/* 1. VARIABLEN & BASICS */
:root {
    --bg-header: #eeeeee;
    /*--color-primary: #228B22;*/
    --color-primary: #1a306c;
    --color-accent: #800080;
    --border-dark: #3c402f;
    --standard-padding: 0.4em 0.4em;
    --h1-blue: #1a306c;
    --h2-blue: #3e5e91;
    --white: #ffffff;
    --card-bg: #f9f9f9;
}

/* 8. Schriftfarben */
.co_gk {font-size:88%;} /* Ausnahme: Änderungsmonat kleiner setzen */
.co_aq {color:#00FFFF;} /*aqua: Material für Lehrkräfte, Sachanalysen, Gymnasium und Hochschule*/
.co_bk {color:#222222;} /*black: Interaktive Applets, Online-Übungen, Präsentation*/
.co_bl {color:#0000FF;} /*blue: Linksammlung, nützliche Querverweise*/
.co_fu {color:#CC33CC;} /*fuchsia: Material für Schüler der Sekundarstufe I (HS / WRS / RS / Gym)*/
.co_gn {color:#CF6;} /*green: Volltext / Ebook / PDF*/
.co_gn2 {color:#8a4466;} /*green - linkintern*/
.co_gr {color:#808080;} /*gray: Nicht gruppiert*/
.co_li {color:#00C000;} /*lime : Gute Infos, Schülergeeignet*/
.co_oa {color:#dda500;} /*orange: Material für Grundschüler*/
.co_pu {color:#800080;} /*purple: Literaturhinweis*/
.co_re {color:#e67e22;} /*rot*/
.co_ta {color:#FFA54F;} /*tan: Clipart, Grafik, Foto, Schmuckblatt, Ausmalbild, Flashcards, Symbolkarten*/
.co_te {color:#008080;} /*teal: Lehrer-Material, Infos und Arbeitsblätter*/
.co_wh {color:#008844;} /*grün*/
.co_ye {color:#FFBF00;} /*yellow: Free- oder Shareware / Programm / Template / Berechnungstabelle*/
/*.co_wh {color:#ffffff;} weiß*/

/* Globale Link-Farbe für den Fließtext */
a {
    color: #044704;
    text-decoration: underline; /* Unterstreichung für bessere Erkennbarkeit im Text */
    font-weight: normal;       /* Im Text meist besser nicht fett, außer gewünscht */
}

/* Hover-Effekt (optional, aber empfohlen) */
a:hover {
    color: #3e5e91;            /* Wechselt beim Drüberfahren zu deinem Blau */
    text-decoration: none;
}


/* 6. DIE NEUEN CARDS (Nebeneinander-Layout fixiert) */

.autenrieths-grid-container {
    display: grid !important;
    /* 1. minmax auf einen festen Maximalwert setzen, damit die Cards nicht breitfließen */
    grid-template-columns: repeat(auto-fill, minmax(240px, 295px)); 
    
    gap: 20px;
    margin: 20px 0;
    clear: both;
    width: 100%;
    
    /* 2. Hier von 'center' zurück auf 'start' (linksbündig) */
    justify-content: start; 
}

.autenrieths-card {
    /* WICHTIG: Sicherstellen, dass die Card ihre Zelle voll ausfüllt */
    width: 100%;
    box-sizing: border-box; /* Verhindert Überschneidungen durch Padding */
    
    /* Restliches Design bleibt... */
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg, #ffffff) !important;
    border: 1px solid #ddd !important;
    border-radius: 8px;
    padding: 14px 20px !important;
}


.autenrieths-card h3 { 
    margin-top: 0 !important; /* Entfernt den Abstand über dem Text */
    background: none; 
    padding: 0 0 8px 0; 
    border-bottom: 2px solid #e67e22; 
    margin-bottom: 12px;
}

.autenrieths-card a {
    display: block;           
    padding-left: 25px;       
    text-indent: -25px;       
    
    /* ABSTAND ZWISCHEN DEN LINKS */
    margin-top: 0.2rem;       /* HIER ANPASSEN (z.B. 0.1rem für ganz eng) */
    margin-bottom: 0.7rem;    /* HIER ANPASSEN */
    
    color: #044704;           
    text-decoration: none;    
    font-weight: bold;
    
    /* ZEILENHÖHE INNERHALB EINES LINKS */
    line-height: 1.2;         /* HIER ANPASSEN */
}

/* DAS SYMBOL VOR DEM LINK */
.autenrieths-card a::before {
    content: "»";             /* Hier kannst du das Zeichen ändern (z.B. "»", "›", "●") */
    color: #e67e22;           /* Deine orange Akzentfarbe */
    font-weight: bold;        /* Macht den Pfeil deutlicher */
    display: inline-block;    
    width: 25px;              /* Muss exakt dem padding-left des <a> entsprechen */
    margin-left: -25px;       /* Zieht das Zeichen in den leeren Bereich links vom Text */
    text-align: center;       /* Zentriert das Zeichen im Einzugsbereich */
    text-decoration: none !important; /* Verhindert, dass der Pfeil unterstrichen wird */
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap'); 

/* 1. Der graue Hintergrund (Seitenstreifen) */
body {
    font-family: Roboto, Helvetica, Verdana, sans-serif;
    background-color: #3e5e91; /* #f0f0f0;Das Hellgrau für die Ränder */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    font-size: 1rem; /* Die Basisgröße */
    line-height: 1.6; /* WICHTIG: Erhöht den Zeilenabstand für bessere Lesbarkeit */

}

/* 2. Der weiße Inhaltsbereich */
.container {
    background-color: #ffffff;
    min-height: 100vh;
    box-sizing: border-box;
    
    /* Desktop: 80% Breite (ergibt 10% Rand links & rechts) */
    width: 86%;
}

/* 3. Layout für Header und Content (ohne Sidebar/Footer) */
.wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    padding: 20px; /* Innenabstand für deinen Text */
}


header {
    background-color: #3e5e91;
    color: white;
    padding: 20px;
}

article {
    color: #000000;
}

footer {
    background-color: #3c402f; /* Dunkler Kontrast zum Rest */
    color: #ffffff;            /* Weißer Text für Lesbarkeit */
    padding: 20px;             /* Abstand zum Inhalt */
    font-size: 0.9rem;         /* Etwas kleiner als der Haupttext */
    text-align: center;        /* Zentriert den Text (Copyright etc.) */
    margin-top: auto;          /* Schiebt den Footer nach ganz unten */
}

footer a {
    color: #ffffff;
    text-decoration: underline;
    margin: 0 10px;            /* Abstand zwischen mehreren Links */
}

footer a:hover {
    color: #f0f0f0;
    text-decoration: none;
}

.header-suche {
    display: flex;          /* Aktiviert das Nebeneinander-Layout */
    align-items: center;    /* Zentriert Bild und Suchfeld vertikal zueinander */
    justify-content: space-between; /* Schiebt Bild nach links, Suche nach rechts */
    gap: 20px;              /* Abstand zwischen Bild und Suchfeld */
    padding: 10px 20px;
    background-color: #3e5e91; /* Dein Blau-Ton aus dem vorherigen Header */
}

/* Verhindert, dass das Bild zu groß wird */
.einziggut img {
    max-height: 60px;       /* Passt die Höhe an dein Layout an */
    width: auto;
}

/* RESPONSIVE ANPASSUNGEN */
/* Mobil-Optimierung: Untereinander stapeln, wenn der Platz zu eng wird */
@media (max-width: 600px) {
    .header-suche {
        flex-direction: column;
        text-align: center;
    }
}
/* Tablets & Handys: 94% Breite (ergibt 3% Rand links & rechts) */
@media (max-width: 1024px) {
    .container {
        width: 94%;
    }
}

/* 2. Standard-Look für h2 bis h6 (h1 ausgenommen, da komplett anders) */
h3, h4, h5, h6 {
    background-color: var(--bg-header);
    padding: var(--standard-padding);
}

/* 3. Farblogik (ohne h1) */
h3, h4, h5, h6 { color: var(--color-primary); }

/* 4. Größen-Hierarchie */
h3 { font-size: 1.35rem;  line-height: 1.3; border-bottom: 2px solid var(--color-primary);}
h4 { font-size: 1.3rem;  line-height: 1.3; clear: both;border-bottom: 2px solid var(--color-primary); }
h5 { font-size: 1.2rem;  line-height: 1.3; border-bottom: 2px solid var(--color-primary);}
h6 { font-size: 1rem;    line-height: 1.3; clear: both;border-bottom: 2px solid var(--color-primary);}

/* 5. Die Sonderrolle: h1 (Blau/Weiß) */
h1 {
    background-color: var(--h1-blue);
    color: var(--white);
    font-size: 1.75rem;
    line-height: 1.3;
    padding: 0.5em 1em;
    border-bottom: 2px solid var(--border-dark);
    margin-top: 0; 
}
h1.index { font-size: 1.5rem; }

h1.startseite {
    background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
    color: var(--white);
    font-size: 1.75rem;
    line-height: 1.3;
    padding: 0.5em 1em;
    margin-top: 0; 
}


h2 {
    background-color: var(--h2-blue);
    color: var(--white);
    font-size: 1.3rem;
    line-height: 1.3;
    padding: 0.3em 0.4em;
    border-bottom: 2px solid var(--border-dark);
    margin-top: 0; 
}

h2.kapitelheadline {
    background-color: var(--h2-blue);
    color: var(--white);
    font-size: 1.3rem;
    line-height: 1.3;
    padding: 0.3em 0.4em;
    border-bottom: 2px solid var(--border-dark);
    margin-top: 0; 
}

h2.index { border-bottom: none; } /* font-size entfernt, da identisch mit h2 */

.h2_linktipps {
    font-size: 1.6rem;
    border: none;
    /* Nutzt Hintergrund und Padding der h2-h6 Basis */
}


/* 6. Modifikatoren & Spezialklassen */
.index { text-shadow: 1px 1px 3px white; } 
.index {background:#fefefe;color:#bbbbbb;text-align:center;font-size:135%;line-height:120%;border:2px #323232;text-shadow:1px 1px 2px black;padding:0.5% 2% 0.5% 1%} 

img {max-width: 100%;}
img.center {text-align:center;}
img.radi {max-width: 65%;}
img.schatten {border: 2px solid #ccc;border-radius: 2px;padding: 2px;}	

/* 4. NAVIGATIONEN (Zusammengefasst) */
/* .topnav { overflow: hidden; background-color: #3e5e91; position: sticky; top: 0; z-index: 9; }
.topnav a { float: left; display: block; color: #008080; text-align: center; padding: 0.6% 0.4%; text-decoration: none; } */

.topnav { overflow: hidden; background-color:#3e5e91; color:#646464;position: -webkit-sticky; position: sticky; top: 0; z-index: 9;} 
.topnav a { float: left;  display:block;  background-color:#3e5e91;  color:#008080;  text-align:center;  padding: 0.6% 0.4%;  text-decoration:none;} 
.topnav a:hover { background-color:#3e5e91;  color:#454545;}  /*background-color:#a9a9a9; */

[id^="category-nav"] { text-align: center; margin: 5px auto; }
[id^="category-nav"] a { display: inline-block; background-color: #F5F5F6; margin: 2px; padding: 4px; text-decoration: underline; color: #1311a8; }
[id^="category-nav"] a:hover { background-color: #feca14; border: 1px solid #fff; }

/* 5. LISTEN (Global) */
ul { list-style: none; margin: 0; padding: 0; }
li { text-indent: -1em; margin: 0.6em 0.5em 0.5em 1.5em; position: relative; }
li:before { color: green; content: "•"; padding-right: 8px; }


/* 7. HILFSKLASSEN */
.center { text-align: center; }
.fett { font-weight: bold; }
.kleiner { font-size: 90%; }
.nochkleiner { font-size: 88%; }



/*9. Table */
.rTable {background:#fcfdfc;display:block;width:100%;}
.rTable:after  {visibility: hidden; display:block; font-size:0;content: " ";clear:both; height:0;}
.rTableCell1 {background:#fdfefd;color:#212121;font-size:100%;padding:1% 2% 1%;line-height:120%;clear:both;}
.rTableCellsiehe {background:#f4f5f0;color:#222222;border:1px #fffffd;font-size:100%;line-height:110%;padding:0.5% 3% 0.5%;display:block;}
.rTableRow {clear:both;}


.col_back {background-color:#eeeeee;} /* - */
.columns {-webkit-column-count: 2;-webkit-column-gap: 10px; -webkit-column-rule: 1px dotted black;-moz-column-count: 2;-moz-column-gap: 10px; -moz-column-rule: 1px dotted black;column-count: 2;column-gap: 10px;column-rule: 1px dotted black;}
.columns3 {-webkit-column-count: 3;-webkit-column-gap: 10px; -webkit-column-rule: 1px dotted black;-moz-column-count: 3;-moz-column-gap: 10px; -moz-column-rule: 1px dotted black;column-count: 3;column-gap: 10px;column-rule: 1px dotted black;}
.columns4 {-webkit-column-count: 4;-webkit-column-gap: 10px; -webkit-column-rule: 1px dotted black;-moz-column-count: 4;-moz-column-gap: 10px; -moz-column-rule: 1px dotted black;column-count: 4;column-gap: 10px;column-rule: 1px dotted black;}
.columns1_menu {background-color:#dedede; font-weight:normal;-webkit-column-count: 1;-webkit-column-gap: 10px; -webkit-column-rule: 1px dotted black;-moz-column-count: 1;-moz-column-gap: 10px;  -moz-column-rule: 1px dotted black;column-count: 1;column-gap: 10px;column-rule: 1px dotted black;}/*background-color:#303030;*/
.columns2_menu {background-color:#dedede; font-weight:normal;-webkit-column-count: 2;-webkit-column-gap: 10px; -webkit-column-rule: 1px dotted black;-moz-column-count: 2;-moz-column-gap: 10px;  -moz-column-rule: 1px dotted black;column-count: 2;column-gap: 10px;column-rule: 1px dotted black;}/*background-color:#303030;*/

/* 10. Startseite */
        /* Hero-Bereich */
        .hero {
            background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
            color: white;
            padding: 60px 20px;
            text-align: center;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .hero p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 30px;
        }

        /* Suchfeld */
        .search-container {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
        }

        .search-container input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 5px 0 0 5px;
            font-size: 1rem;
        }

        .search-container button {
            padding: 15px 25px;
            border: none;
            background-color: #ffc107;
            color: #333;
            font-weight: bold;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }

        /* Kachel-Raster
        .container {
            max-width: 1100px;
            margin: 50px auto;
            padding: 0 20px;
        } */

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        /* Einzelne Kachel */
        .card {
            background: white;
            padding: 30px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            color: inherit;
            border: 1px solid #eee;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
            border-color: #007bff;
        }

        .card .icon {
            font-size: 3rem;
            margin-bottom: 15px;
            display: block;
        }

        .card h3 {
            margin: 0;
            color: #0056b3;
        }

        /* Footer Info */
        .footer-info {
            text-align: center;
            margin-top: 50px;
            padding: 40px;
            background: #eee;
            font-size: 0.9rem;
        }