:root {
    /* --petrol und --petrol-deep NICHT zusammenlegen: Petrol traegt weisse Schrift nur bei 3,82 und verfehlt die 4,5 fuer Fliesstext. */
    --petrol: #258EA6;                /*  3,82  nur Rahmen, nie Schrift   */
    --petrol-deep: #217E92;           /*  4,71  Flaechen mit weisser Schrift */
    --petrol-deeper: #1B6B7C;         /*  6,10  deren Hover               */
    --graublau: #3C6070;              /*  6,78  grosse Flaechen, Navi     */
    --graublau-deep: #33525F;         /*  8,36  deren Hover               */
    --graublau-dark: #24363E;         /* 12,55  Kontextzeile, Pillentext  */
    --graublau-darker: #1A272E;       /* 15,29  ohne Verwendung           */
    --gruen: #2E8039;                 /*  4,93  Zustandsmeldung           */
    --gruen-deep: #256630;            /*  6,95  deren Hover               */
    --nds-rot: #E4062F;               /*  4,81  Zuruecksetzen             */
    --nds-rot-deep: #B40525;          /*  7,03  dessen Hover              */
    --border-neutral: #767676;        /*  4,54  Rahmen nicht gewaehlt     */
    --border-neutral-hover: #5A5A5A;  /*  6,90  dessen Hover              */
    /* Toenung der drei Hinweiskaesten. Der Rahmen ist rein dekorativer Schmuck und nicht normpflichtig - seine 1,66 sind kein uebersehener Verstoss. */
    --petrol-tint: #E8F0F2;           /* 10,94  Fliesstext, 6,70 Link     */
    --petrol-tint-border: #B7CDD3;    /*  1,66  nur Schmuckrahmen         */

    /* Kapitel-Überschrift */
    --chapter-header-bg: var(--graublau);
    --chapter-header-bg-hover: var(--graublau-deep);
    --chapter-header-text: #ffffff;

    --subchapter-header-bg: var(--petrol-deep);
    --subchapter-header-bg-hover: var(--petrol-deeper);
    --subchapter-header-text: #ffffff;

    /* Alle drei Hinweiskaesten tragen dieselbe Toenung; unterschieden sind sie ueber Beschriftung und Klappverhalten, nicht ueber Farbe. Die acht Tokens bleiben trotzdem getrennt: drei Elemente, drei Rollen. */
    /* Auswahlhinweis */
    --selection-hint-bg: var(--petrol-tint);
    --selection-hint-border: var(--petrol-tint-border);

    /* Hinweis-Textblock */
    --info-hint-bg: var(--petrol-tint);
    --info-hint-border: var(--petrol-tint-border);
    --info-hint-text: var(--text-color);

    /* Regelvarianten (unselected) */
    --rule-option-border: var(--border-neutral);
    --rule-option-border-hover: var(--border-neutral-hover);

    /* Regelvarianten (selected) */
    --rule-option-border-selected: var(--petrol);

    /* Erläuterungsblöcke (unselected) */
    --explanation-border: var(--border-neutral);
    --explanation-border-hover: var(--border-neutral-hover);
    --explanation-border-style: dashed;

    /* Erläuterungsblöcke (selected) */
    --explanation-border-selected: var(--petrol);

    --toggle-arrow-color: var(--petrol-deep);   /*  4,70  Schrift        */

    /* Checkmark */
    --checkmark-color: var(--gruen);

    /* Formularfelder */
    --input-border: #767676;        /*  4,54  Rahmen eines Bedienelements auf Weiss */
    --input-bg: #ffffff;

    /* Buttons */
    --export-btn-bg: var(--petrol-deep);
    --export-btn-bg-hover: var(--petrol-deeper);
    --export-btn-text: #ffffff;

    --supporting-text: #666;        /* Untertitel Seite 0, Ladehinweis */
    --card-heading-text: #444;      /* Ueberschrift in einer Karte */
    --field-label-text: #555;       /* Feldbeschriftung */
    --config-section-text: #555;    /* Fliessabsatz im Konfigurationsbereich */
    --fine-print-text: #6E6E6E;     /* Kleingedrucktes, 5,10 */

    /* Ausfuellhilfe (Good-Practice-Kasten) */
    --input-help-bg: var(--petrol-tint);
    --input-help-border: var(--petrol-tint-border);
    --input-help-text: var(--text-color);

    --hairline-color: rgba(0,0,0,0.08);
    --separator-color: rgba(0,0,0,0.1);

    --config-btn-bg: var(--graublau);
    --config-btn-bg-hover: var(--graublau-deep);
    --config-btn-text: #ffffff;

    /* Warnknopf (Kapitel zuruecksetzen) */
    --reset-btn-bg: var(--nds-rot);
    --reset-btn-bg-hover: var(--nds-rot-deep);
    --reset-btn-text: #ffffff;

    /* Navigation */
    --nav-bg: var(--graublau);
    --nav-text: #ffffff;
    --nav-link-hover: var(--petrol-deep);

    /* Die Pille geht HELLER als die Leiste - auf Graublau haelt keine Petrolfarbe mit weisser Schrift die 3:1 aus WCAG 1.4.11 (1,44). */
    --nav-link-active-bg: #ffffff;
    --nav-link-active-text: var(--graublau-dark);

    /* Weiss auf #24363E 12,55 - #a8adb3 auf #24363E 5,56, beides ueber der AA-Schwelle 4,5. */
    --nav-context-bg: var(--graublau-dark);
    --nav-context-text: #ffffff;
    --nav-context-muted: #a8adb3;

    --link-color: #1a5490;
    --link-color-hover: #0d3a66;

    /* Allgemein */
    --body-bg: #f5f5f5;
    --text-color: #333333;
    --section-bg: #ffffff;
    --section-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

* {
    box-sizing: border-box;
}

/* Jede Seite setzt max-width und text-align selbst. */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--body-bg);
    color: var(--text-color);
}

/* Geometrie ohne Farbe - jede Seite setzt ihre eigene. */
.kira-btn {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

/* Seite 0 und die Rechtsseiten - der Generator benutzt die Klasse nicht. */
.card {
    background: var(--section-bg);
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: var(--section-shadow);
}

.card > p:first-child {
    margin-top: 0;
}

.card > p:last-child {
    margin-bottom: 0;
}

/* Nur text-decoration-LINE, nie die Kurzschreibweise: die setzt -thickness still auf auto zurueck. "body a" ist der eine erlaubte nackte Selektor - ein h2 hier traf einmal "Kursinformationen" im Generator. */
body a {
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}

/* Seitenfuss mit den Rechtslinks, steht auf jeder Seite. */
.page-footer {
    text-align: center;
    font-size: 14px;
    margin: 30px 0 10px 0;
}

/* margin-top ist Schutzraum: die Grafik ist buendig bis ins Eckpixel beschnitten und bringt keinen eigenen Mindestabstand mit. */
.brand-top {
    text-align: right;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* width/height am <img> sind ein Platzhalter-Verhaeltnis fuer die Zeit vor dem Laden, keine Messung - die Groesse kommt von hier. */
.brand-top img {
    height: 160px;
    width: auto;
}

/* flex mit gap, nicht text-align mit margin: zwischen Inline-Elementen stuende sonst ein Wortzwischenraum, dessen Breite von der Schriftgroesse abhaengt. */
.footer-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.footer-logos img {
    height: 160px;
    width: auto;
}

/* Schmale Fenster ueber die HOEHE regeln, nie ueber die Breite: max-width mit fester height staucht das Bild, sobald der Deckel greift. */
@media (max-width: 700px) {
    .brand-top img,
    .footer-logos img { height: 90px; }
}