/* ===========================================================================
   Kommandozentrale – seitenweite Grundlage (09/2026)

   Bringt die Designrichtung der Lehrplanseiten auf die ganze Website:
   Farbmarken fuer Hell/Dunkel, Navigation, Brotkrumen, Footer, Popups und
   die wiederkehrenden Bausteine der Inhaltsseiten (.one h1, #rightPanel,
   .model-card ...). Eingebunden von head-meta.php - also auf JEDER Seite,
   vor deren eigenem <style>-Block.

   Spezifitaet: Die Seiten, navigation.php und footer.php geben ihre
   <style>-Bloecke NACH diesem Stylesheet aus und wuerden bei gleicher
   Spezifitaet gewinnen. Alle Regeln, die fremde Optik ueberschreiben,
   beginnen deshalb mit ":root:root" (+0,2,0) - das hebt sie ueber die
   Seitenregeln, ohne !important.

   Das Thema setzt ein Inline-Skript in head-meta.php als data-kz-theme
   auf <html>, bevor der erste Pixel gezeichnet wird. Ohne JavaScript
   entscheidet prefers-color-scheme.
   =========================================================================== */

/* --- Farbmarken ---------------------------------------------------------- */

:root,
:root[data-kz-theme="hell"] {
    --kz-bg:            #f3f5f7;
    --kz-panel:         #ffffff;
    --kz-panel-2:       #f8fafb;
    --kz-erhoben:       #f1f5f8;
    --kz-rand:          #d8e0e8;
    --kz-rand-weich:    #e6ecf1;
    --kz-text:          #16202b;
    --kz-text-2:        #3c4c5c;
    --kz-text-3:        #62717f;
    --kz-text-4:        #5f6d7a;
    --kz-akzent:        #0b6b84;
    --kz-akzent-linie:  #0b6b84;
    --kz-akzent-bg:     #e4f3f7;
    --kz-akzent-rand:   #a5d5e2;
    --kz-akzent-text:   #0b6b84;
    --kz-akzent-kontrast: #ffffff;
    --kz-logo-a:        #132f48;
    --kz-logo-b:        #30769f;
    --kz-treffer:       #fdf0c4;
    --kz-warm-text:     #8a5d10;
    --kz-warm-bg:       #fdf3e0;
    --kz-warm-rand:     #e6ce9e;
    --kz-status-bg:     #eef2f5;
    --kz-eingabe-bg:    #ffffff;
    --kz-zeile-hover:   #f1f5f8;
    --kz-schatten:      0 1px 2px rgba(22, 32, 43, .06);
    --kz-schatten-gross: 0 10px 30px rgba(22, 32, 43, .08);
    --kz-fokus:         #0b6b84;
    /* Markenrot (frueher #b80000): Orientierung und Marke, nie Bedienung.
       Interaktives bleibt im Akzent-Blaugruen. */
    --kz-rot:           #b80000;
    --kz-rot-bg:        #fcecea;
    --kz-rot-rand:      #eab3ad;

    --kz-schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
    --kz-schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                  Menlo, Consolas, "Liberation Mono", monospace;
}

/* Dunkel: einmal als Attribut (Schalter), einmal ueber das Betriebssystem,
   solange niemand ausdruecklich "hell" gewaehlt hat. */
:root[data-kz-theme="dunkel"] {
    --kz-bg:            #0e1116;
    --kz-panel:         #111720;
    --kz-panel-2:       #131922;
    --kz-erhoben:       #161d27;
    --kz-rand:          #232c38;
    --kz-rand-weich:    #1e2732;
    --kz-text:          #e3e8ef;
    --kz-text-2:        #b6c1cf;
    --kz-text-3:        #8b97a8;
    --kz-text-4:        #7c8998;
    --kz-akzent:        #47bdd4;
    --kz-akzent-linie:  #47bdd4;
    --kz-akzent-bg:     #10262c;
    --kz-akzent-rand:   #2d5a66;
    --kz-akzent-text:   #7fd6e6;
    --kz-akzent-kontrast: #071016;
    --kz-logo-a:        #e3e8ef;
    --kz-logo-b:        #6fb3dd;
    --kz-treffer:       #3d3410;
    --kz-warm-text:     #d3a24a;
    --kz-warm-bg:       #221b0e;
    --kz-warm-rand:     #4a3c1e;
    --kz-status-bg:     #0b0f14;
    --kz-eingabe-bg:    #0e1319;
    --kz-zeile-hover:   #151d26;
    --kz-schatten:      0 1px 2px rgba(0, 0, 0, .35);
    --kz-schatten-gross: 0 10px 30px rgba(0, 0, 0, .35);
    --kz-fokus:         #47bdd4;
    --kz-rot:           #f07a6e;
    --kz-rot-bg:        #2a1414;
    --kz-rot-rand:      #5c2a26;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-kz-theme="hell"]) {
        --kz-bg: #0e1116; --kz-panel: #111720; --kz-panel-2: #131922;
        --kz-erhoben: #161d27; --kz-rand: #232c38; --kz-rand-weich: #1e2732;
        --kz-text: #e3e8ef; --kz-text-2: #b6c1cf; --kz-text-3: #8b97a8;
        --kz-text-4: #7c8998; --kz-akzent: #47bdd4; --kz-akzent-linie: #47bdd4;
        --kz-akzent-bg: #10262c; --kz-akzent-rand: #2d5a66;
        --kz-akzent-text: #7fd6e6; --kz-akzent-kontrast: #071016;
        --kz-logo-a: #e3e8ef; --kz-logo-b: #6fb3dd;
        --kz-treffer: #3d3410; --kz-warm-text: #d3a24a; --kz-warm-bg: #221b0e;
        --kz-warm-rand: #4a3c1e; --kz-status-bg: #0b0f14;
        --kz-eingabe-bg: #0e1319; --kz-zeile-hover: #151d26;
        --kz-schatten: 0 1px 2px rgba(0, 0, 0, .35);
        --kz-schatten-gross: 0 10px 30px rgba(0, 0, 0, .35);
        --kz-fokus: #47bdd4;
        --kz-rot: #f07a6e; --kz-rot-bg: #2a1414; --kz-rot-rand: #5c2a26;
    }
}

/* Navigation und Brotkrumen lesen ausschliesslich diese Variablen aus
   navigation.php. :root:root liegt ueber deren eigenem :root-Block. */
:root:root {
    --nav-bg:         color-mix(in srgb, var(--kz-panel) 86%, transparent);
    --nav-border:     var(--kz-rand);
    --text:           var(--kz-text);
    --muted:          var(--kz-text-3);
    --hover:          var(--kz-zeile-hover);
    --active:         var(--kz-akzent-bg);
    --primary:        var(--kz-akzent);
    --nav-link:       var(--kz-akzent-text);
    --nav-link-hover: var(--kz-text);
    --shadow:         var(--kz-schatten-gross);
    --submenu-bg-1:   var(--kz-panel);
    --submenu-bg-2:   var(--kz-erhoben);
    --submenu-bg-3:   var(--kz-panel-2);
}

/* --- Grundlagen ---------------------------------------------------------- */

html { background: var(--kz-bg); color-scheme: light; }
:root[data-kz-theme="dunkel"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-kz-theme="hell"]) { color-scheme: dark; }
}

:root:root body {
    background: var(--kz-bg);
    color: var(--kz-text);
    font-family: var(--kz-schrift);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0; /* aeltere Seiten setzen 20px - Navigation und Footer bringen eigene Abstaende mit */
}

:root:root :focus-visible {
    outline: 2px solid var(--kz-fokus);
    outline-offset: 2px;
}

:root:root ::selection { background: var(--kz-akzent-bg); color: var(--kz-text); }

.kz-mono {
    font-family: var(--kz-schrift-mono);
    font-variant-ligatures: none;
}

.kz-nur-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Navigation ---------------------------------------------------------- */

:root:root nav:not(.brotkrumen) {
    border-radius: 14px;
}

/* Logo: freigestelltes Bildzeichen + Schriftzug als Text (passt sich dem Thema an) */
:root:root .logo-marke {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    border-radius: 10px;
}
:root:root .logo-zeichen {
    display: block;
    width: auto;
    height: 46px;
}
:root:root .logo-wort {
    font-family: var(--kz-schrift);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
:root:root .logo-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
:root:root .logo-wort { display: block; }
/* Claim wie im Logo: Versalien, weit gesperrt, buendig unter dem Schriftzug */
:root:root .logo-claim {
    display: block;
    font-family: var(--kz-schrift);
    font-size: 8.4px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--kz-logo-a);
}
:root:root .logo-wort-a { color: var(--kz-logo-a); }
:root:root .logo-wort-b { color: var(--kz-logo-b); }
:root:root .logo-marke:focus-visible { outline: 2px solid var(--kz-fokus); outline-offset: 3px; }
@media (max-width: 480px) {
    :root:root .logo-marke { gap: 7px; }
    :root:root .logo-zeichen { height: 36px; }
    :root:root .logo-wort { font-size: 14px; letter-spacing: .02em; }
    :root:root .logo-claim { display: none; } /* auf dem Handy zu klein zum Lesen */
}
:root[data-kz-theme="dunkel"] .logo-zeichen,
:root[data-kz-theme="dunkel"] .kz-marke-zeichen img { filter: brightness(1.45) saturate(1.1); } /* dunkelblaues Buch auf dunklem Grund aufhellen */
@media (prefers-color-scheme: dark) {
    :root:not([data-kz-theme="hell"]) .logo-zeichen,
    :root:not([data-kz-theme="hell"]) .kz-marke-zeichen img { filter: brightness(1.45) saturate(1.1); }
}

:root:root .hamburger {
    background: var(--kz-erhoben);
    border-color: var(--kz-rand);
}
:root:root .hamburger span { background: var(--kz-text-2); }

/* Menuepunkte: ruhiger, mit Akzentlinie statt Flaechen */
:root:root nav:not(.brotkrumen) ul li > a {
    color: var(--kz-text-2);
    font-weight: 550;
}
:root:root nav:not(.brotkrumen) ul li > a:hover,
:root:root nav:not(.brotkrumen) ul li > a.active,
:root:root nav:not(.brotkrumen) ul li > a.is-current {
    color: var(--kz-text);
    background: var(--kz-zeile-hover);
}

:root:root .dropdown-content,
:root:root .sub-dropdown-content {
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 10px;
    box-shadow: var(--kz-schatten-gross);
}
:root:root .dropdown-content a,
:root:root .sub-dropdown-content a {
    color: var(--kz-text-2);
}
:root:root .dropdown-content a:hover,
:root:root .sub-dropdown-content a:hover {
    background: var(--kz-akzent-bg);
    color: var(--kz-akzent-text);
}
/* Noch nicht freigegebene Eintraege (Befrag den Lehrplan, daten/befrag-freigabe.php) */
:root:root .dropdown-content a.nav-gesperrt,
:root:root .dropdown-content a.nav-gesperrt:hover {
    color: var(--kz-text-4);
    background: none;
    cursor: not-allowed;
    opacity: .6;
    justify-content: space-between;
    gap: 10px;
}
:root:root .nav-bald {
    font-family: var(--kz-schrift-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Schalter Hell/Dunkel - sitzt rechts oben im Menue. Auf den Lehrplanseiten
   bringt die Anwendung ihren eigenen Schalter mit; dort entfaellt dieser. */
.kz-thema-nav {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--kz-rand);
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
}
.kz-thema-nav:hover { border-color: var(--kz-text-4); color: var(--kz-text); }
.kz-thema-nav svg { width: 17px; height: 17px; }
.kz-thema-nav .kz-icon-mond { display: none; }
:root[data-kz-theme="hell"] .kz-thema-nav .kz-icon-mond { display: block; }
:root[data-kz-theme="hell"] .kz-thema-nav .kz-icon-sonne { display: none; }
body.kz-body .kz-thema-nav { display: none; }

@media (min-width: 900px) {
    /* Platz fuer den Schalter rechts neben der ersten Menuezeile */
    :root:root .nav-menu-wrapper { padding-right: 52px; }
}
@media (max-width: 899px) {
    .kz-thema-nav { right: 68px; }
}

/* --- Brotkrumen ---------------------------------------------------------- */

:root:root .brotkrumen {
    border-radius: 10px;
    font-family: var(--kz-schrift-mono);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
}
:root:root .brotkrumen li + li::before {
    content: "/";
    color: var(--kz-text-4);
    opacity: .7;
}
:root:root .brotkrumen a { color: var(--kz-text-3); }
:root:root .brotkrumen a:hover { color: var(--kz-akzent-text); background: var(--kz-akzent-bg); }
:root:root .brotkrumen [aria-current="page"] { color: var(--kz-text); font-weight: 500; }

/* --- Footer -------------------------------------------------------------- */

:root:root .footer {
    background: var(--kz-status-bg);
    border-top: 1px solid var(--kz-rand);
    color: var(--kz-text-3);
    padding: 18px 0;
    margin-top: 28px;
    font-size: 13.5px;
}
:root:root .footer-links a {
    color: var(--kz-text-2);
}
:root:root .footer-links a:hover {
    color: var(--kz-akzent-text);
}
:root:root .footer-links small { color: var(--kz-text-4); }

/* --- Popups (Newsletter, Spenden) --------------------------------------- */

:root:root #newsletter-popup,
:root:root .newsletter-start-popup-overlay,
:root:root #donation-popup {
    background: rgba(8, 12, 18, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

:root:root #newsletter-popup .newsletter-box,
:root:root .newsletter-start-popup-box,
:root:root .donation-box {
    background: var(--kz-panel);
    color: var(--kz-text);
    border: 1px solid var(--kz-rand);
    border-radius: 14px;
    box-shadow: var(--kz-schatten-gross);
}
:root:root #newsletter-popup .newsletter-box h2,
:root:root .newsletter-start-popup-box h2,
:root:root .donation-box h2 {
    color: var(--kz-text);
    font-family: var(--kz-schrift);
    font-weight: 650;
    font-size: 20px;
}
:root:root .close-btn,
:root:root .newsletter-start-popup-close { color: var(--kz-text-3); background: none; }

:root:root .newsletter-tabs { border-bottom-color: var(--kz-rand); }
:root:root .newsletter-tab {
    background: var(--kz-erhoben);
    border-color: var(--kz-rand);
    color: var(--kz-text-3);
}
:root:root .newsletter-tab.active {
    background: var(--kz-panel-2);
    color: var(--kz-text);
    border-color: var(--kz-rand);
    border-bottom-color: var(--kz-panel-2);
}
:root:root .newsletter-tab-content {
    background: var(--kz-panel-2);
    border-color: var(--kz-rand);
}

/* --- Formularelemente ---------------------------------------------------- */

:root:root input[type="text"],
:root:root input[type="email"],
:root:root input[type="search"],
:root:root input[type="number"],
:root:root input[type="password"],
:root:root input[type="url"],
:root:root input[type="file"],
:root:root select,
:root:root textarea {
    background: var(--kz-eingabe-bg);
    color: var(--kz-text);
    border: 1px solid var(--kz-rand);
    border-radius: 8px;
    font-family: var(--kz-schrift);
}
:root:root input:focus,
:root:root select:focus,
:root:root textarea:focus {
    border-color: var(--kz-akzent-rand);
    outline: none;
    box-shadow: 0 0 0 3px var(--kz-akzent-bg);
}
:root:root ::placeholder { color: var(--kz-text-4); }

/* Primaerknoepfe der Inhaltsseiten und Popups */
:root:root .submit-btn,
:root:root #newsletter-popup button[type="submit"],
:root:root .newsletter-start-popup-btn-primary,
:root:root .button-group button,
:root:root #promptButton,
:root:root #copyButton,
:root:root .kz-knopf {
    background: var(--kz-akzent);
    color: var(--kz-akzent-kontrast);
    border: 1px solid var(--kz-akzent);
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--kz-schrift);
    cursor: pointer;
}
:root:root .submit-btn:hover,
:root:root #newsletter-popup button[type="submit"]:hover,
:root:root .newsletter-start-popup-btn-primary:hover,
:root:root .button-group button:hover,
:root:root #promptButton:hover,
:root:root #copyButton:hover,
:root:root .kz-knopf:hover {
    background: color-mix(in srgb, var(--kz-akzent) 86%, var(--kz-text));
    border-color: color-mix(in srgb, var(--kz-akzent) 86%, var(--kz-text));
}

/* Zweitknoepfe */
:root:root #newsletter-popup button[type="button"],
:root:root .newsletter-start-popup-btn-secondary,
:root:root .kz-knopf-zweit {
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
    border: 1px solid var(--kz-rand);
    border-radius: 8px;
    font-family: var(--kz-schrift);
    cursor: pointer;
}
:root:root #newsletter-popup button[type="button"]:hover,
:root:root .newsletter-start-popup-btn-secondary:hover,
:root:root .kz-knopf-zweit:hover {
    border-color: var(--kz-text-4);
    color: var(--kz-text);
}

/* --- Inhaltsseiten (Guide, Kontakt, Impressum, Newsblog ...) ------------- */

/* Rahmen: eine zentrierte Spalte in der Breite der Navigation */
:root:root #rightPanel {
    /* Zentrierte Lesespalte (09/2026: auf Wunsch mittig statt linksbuendig) */
    width: min(880px, calc(100% - 24px));
    max-width: none;
    margin: 6px auto 0 auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    align-items: stretch;
    color: var(--kz-text);
}

/* Seitentitel: .one h1 hatte eine zentrierte Versalzeile mit roter Linie */
:root:root .one {
    width: 100%;
    margin: 18px 0 18px 0;
    padding: 0 0 14px 0;
    border-bottom: 1px solid var(--kz-rand);
    text-align: center;
}
:root:root .one h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: none;
    letter-spacing: -0.01em;
    font-family: var(--kz-schrift);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 650;
    line-height: 1.2;
    color: var(--kz-text);
}
:root:root .one h1::before {
    display: none;
    content: none;
}
:root:root .one h1 small {
    display: block;
    font-size: 1em;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: inherit;
    color: inherit;
}
:root:root .one h1 small::before,
:root:root .one h1 small::after { display: none; content: none; }

:root:root #rightPanel h2,
:root:root #rightPanel h3 {
    font-family: var(--kz-schrift);
    color: var(--kz-text);
    letter-spacing: -0.005em;
}
:root:root #rightPanel h2 { font-weight: 650; font-size: 1.25rem; }
:root:root #rightPanel h3 { font-weight: 600; font-size: 1.05rem; }

:root:root #rightPanel p,
:root:root #rightPanel li { color: var(--kz-text-2); line-height: 1.6; }

:root:root #rightPanel a:not(.kz-knopf):not(.kz-karte) {
    color: var(--kz-akzent-text);
    text-decoration: underline;
    text-decoration-color: var(--kz-akzent-rand);
    text-underline-offset: 3px;
}
:root:root #rightPanel a:not(.kz-knopf):not(.kz-karte):hover {
    text-decoration-color: currentColor;
}

/* Karten */
:root:root .model-card {
    /* Lesespalte: linksbuendig unter dem Titel. Einige Seiten setzen
       "width: 70% !important" - dagegen hilft nur ein eigenes !important. */
    width: 100% !important;
    max-width: 880px;
    margin: 0 auto 14px auto;
    padding: 20px 22px;
    box-sizing: border-box;
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 12px;
    box-shadow: var(--kz-schatten);
    color: var(--kz-text-2);
    transform: none;
}
:root:root .model-card:hover {
    transform: none;
    box-shadow: var(--kz-schatten);
    border-color: var(--kz-rand);
}
:root:root .model-title {
    font-family: var(--kz-schrift);
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--kz-text);
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--kz-rand-weich);
    text-decoration: none;
}
:root:root .model-title::after,
:root:root .model-title::before { display: none; content: none; }
:root:root .model-feature {
    color: var(--kz-text-2);
    line-height: 1.6;
    border: 0;
    background: none;
    padding: 4px 0 4px 16px;
    position: relative;
}
:root:root .model-feature::before {
    content: "";
    position: absolute;
    left: 2px; top: .85em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--kz-akzent);
}
:root:root .model-feature b,
:root:root .model-feature strong { color: var(--kz-text); }

/* Neuerungen (sonstiges/neuerungen.php): senkrechte Zeitleiste, neueste oben.
   Die Linie laeuft durch alle Punkte und endet am Start-Eintrag. */
:root:root .zeitleiste-einleitung {
    margin: 0 0 26px 0;
    text-align: center;
}
:root:root .zeitleiste {
    --zl-x: 9px;              /* Mitte der Linie */
    list-style: none;
    margin: 0 0 40px 0;
    padding: 30px 0 0 40px;   /* oben Platz fuer das offene Linienende */
    position: relative;
}
:root:root .zeitleiste-eintrag {
    position: relative;
    padding: 0 0 34px 0;
    margin: 0;
}
/* Linienstueck je Eintrag ueber die volle Hoehe; oben laeuft die Linie weich aus
   (es kommt Neues dazu), unten endet sie am Punkt des Start-Eintrags. */
:root:root .zeitleiste-eintrag::before {
    content: "";
    position: absolute;
    left: calc(var(--zl-x) - 40px - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kz-rand);
}
:root:root .zeitleiste-eintrag:first-child::before {
    top: -30px;
    background: linear-gradient(to bottom, transparent, var(--kz-rand) 30px);
}
:root:root .zeitleiste-eintrag:last-child::before { bottom: auto; height: 12px; }
:root:root .zeitleiste-eintrag:first-child:last-child::before { height: 42px; }
:root:root .zeitleiste-punkt {
    position: absolute;
    left: calc(var(--zl-x) - 40px - 7px);
    top: 5px;
    width: 10px; height: 10px;
    border: 2px solid var(--kz-rot);
    border-radius: 50%;
    background: var(--kz-bg);
}
:root:root .zeitleiste-start .zeitleiste-punkt {
    left: calc(var(--zl-x) - 40px - 9px);
    top: 3px;
    width: 14px; height: 14px;
    background: var(--kz-rot);
    box-shadow: 0 0 0 4px var(--kz-rot-bg);
}
:root:root #rightPanel .zeitleiste-datum {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 4px 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kz-text-3);
    line-height: 1.6;
}
:root:root .zeitleiste-marke {
    padding: 1px 7px;
    border: 1px solid var(--kz-rot-rand);
    border-radius: 999px;
    background: var(--kz-rot-bg);
    color: var(--kz-rot);
    font-size: 11px;
    letter-spacing: .08em;
}
:root:root #rightPanel .zeitleiste-titel {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
}
:root:root .zeitleiste-punkte {
    list-style: none;
    margin: 0;
    padding: 0;
}
:root:root #rightPanel .zeitleiste-punkte li {
    position: relative;
    margin: 0 0 6px 0;
    padding: 0 0 0 18px;
    line-height: 1.5;
}
:root:root .zeitleiste-punkte li::before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 8px; height: 2px;
    border-radius: 2px;
    background: var(--kz-rot);
}
@media (max-width: 480px) {
    :root:root .zeitleiste { padding-left: 32px; --zl-x: 9px; }
    :root:root .zeitleiste-eintrag::before { left: calc(var(--zl-x) - 32px - 1px); }
    :root:root .zeitleiste-punkt { left: calc(var(--zl-x) - 32px - 7px); }
    :root:root .zeitleiste-start .zeitleiste-punkt { left: calc(var(--zl-x) - 32px - 9px); }
}

/* Kontaktformular */
:root:root .form-container {
    max-width: 880px;
    margin: 0 auto 14px auto;
    box-sizing: border-box;
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 12px;
    box-shadow: var(--kz-schatten);
    color: var(--kz-text-2);
}
:root:root .form-group label { color: var(--kz-text-2); }
:root:root .form-info { color: var(--kz-text-3); }
:root:root .required { color: var(--kz-warm-text); }
:root:root .success-message {
    background: var(--kz-akzent-bg);
    border: 1px solid var(--kz-akzent-rand);
    color: var(--kz-akzent-text);
    border-radius: 8px;
}
:root:root .error-message {
    background: var(--kz-warm-bg);
    border: 1px solid var(--kz-warm-rand);
    color: var(--kz-warm-text);
    border-radius: 8px;
}

/* Tabellen (Datenschutz, Modelle) */
:root:root #rightPanel table { border-collapse: collapse; }
:root:root #rightPanel th,
:root:root #rightPanel td { border-color: var(--kz-rand); color: var(--kz-text-2); }
:root:root #rightPanel th { background: var(--kz-erhoben); color: var(--kz-text); }

/* Der Footer steckt auf den Inhaltsseiten in einem leeren <main>, das sonst
   als zweite Flex-Spalte Breite beansprucht. */
:root:root main.main-content:not(:has(> :not(.footer):not(script):not(style):not(#newsletter-popup):not(#donation-popup))) {
    display: block;
}

/* --- Werkzeugseiten mit Sidebar (Befrag den Lehrplan, Textbearbeitung) -- */

:root:root .sidebar {
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 12px;
    box-shadow: var(--kz-schatten);
    color: var(--kz-text-2);
}
:root:root .sidebar .category,
:root:root .sidebar .section-title {
    color: var(--kz-text-4);
    font-family: var(--kz-schrift-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    background: none;
    border: 0;
}
:root:root .sidebar .subcategory,
:root:root .sidebar button,
:root:root .sidebar a {
    color: var(--kz-text-3);
    background: none;
    border-color: transparent;
}
:root:root .sidebar .subcategory:hover,
:root:root .sidebar button:hover,
:root:root .sidebar a:hover {
    background: var(--kz-zeile-hover);
    color: var(--kz-text);
}
:root:root .content,
:root:root .content-display,
:root:root .chat-container {
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    border-radius: 12px;
    box-shadow: var(--kz-schatten);
    color: var(--kz-text-2);
}
:root:root .chat-history { background: var(--kz-panel-2); border-color: var(--kz-rand-weich); }
:root:root .user-message {
    background: var(--kz-akzent-bg);
    border: 1px solid var(--kz-akzent-rand);
    color: var(--kz-text);
}
:root:root .assistant-message {
    background: var(--kz-erhoben);
    border: 1px solid var(--kz-rand);
    color: var(--kz-text);
}
:root:root .message-header { color: var(--kz-text-3); }

:root:root .button-container button,
:root:root .button1,
:root:root .button2,
:root:root .button3 {
    background: var(--kz-erhoben);
    color: var(--kz-text-2);
    border: 1px solid var(--kz-rand);
    border-radius: 8px;
    font-family: var(--kz-schrift);
}
:root:root .button-container button:hover,
:root:root .button1:hover,
:root:root .button2:hover,
:root:root .button3:hover {
    border-color: var(--kz-akzent-rand);
    color: var(--kz-akzent-text);
    background: var(--kz-akzent-bg);
}

:root:root .tips {
    background: var(--kz-panel);
    border: 1px solid var(--kz-rand);
    color: var(--kz-text-3);
    border-radius: 10px;
}
:root:root .info-popup,
:root:root .popup-container {
    background: var(--kz-panel);
    color: var(--kz-text-2);
    border: 1px solid var(--kz-rand);
    border-radius: 12px;
    box-shadow: var(--kz-schatten-gross);
}

/* Datei- und Ergebnisfelder der Werkzeugseiten (Eigene Items, Textbearbeitung) */
:root:root #fileContainer,
:root:root #fileContent,
:root:root #text-field,
:root:root #textField,
:root:root .result-section,
:root:root #text-field .result-section,
:root:root #response {
    background: var(--kz-panel-2);
    border-color: var(--kz-rand);
    color: var(--kz-text-2);
}
:root:root .list-item { border-bottom-color: var(--kz-rand-weich); color: var(--kz-text-2); }
:root:root .list-item:hover { background: var(--kz-zeile-hover); color: var(--kz-text); }

/* Aufklappbare Gliederung der Werkzeugseiten (css/lehrplaene.css) */
:root:root .aspect-title,
:root:root button.aspect-title {
    background: var(--kz-erhoben);
    border-color: var(--kz-rand);
    color: var(--kz-text);
}
:root:root .aspect-title:hover,
:root:root button.category:hover { background: var(--kz-zeile-hover); }
:root:root .aspect-content li:hover,
:root:root .subcategory > div:not(.subcategory):hover,
:root:root .subcategory > button:hover { background: var(--kz-zeile-hover); color: var(--kz-text); }
:root:root .subcategory > div:not(.subcategory),
:root:root .subcategory > button { border-bottom-color: var(--kz-rand-weich); }

/* --- KI-Kennzeichnung (ki-hinweis.php) ---------------------------------- */

:root:root .ki-balken {
    background: var(--kz-akzent-bg);
    border: 1px solid var(--kz-akzent-rand);
    border-left: 4px solid var(--kz-akzent-linie);
    border-radius: 8px;
    color: var(--kz-text-2);
}
:root:root .ki-balken strong { color: var(--kz-akzent-text); }
:root:root .ki-kennzeichen {
    background: var(--kz-akzent);
    color: var(--kz-akzent-kontrast);
}
:root:root .ki-pruefhinweis {
    background: var(--kz-warm-bg);
    border: 1px solid var(--kz-warm-rand);
    border-left: 4px solid var(--kz-warm-text);
    border-radius: 8px;
    color: var(--kz-warm-text);
}

/* Modellauswahl ausserhalb der Lehrplan-Anwendung (Textbearbeitung) */
:root:root body:not(.kz-body) #modelSelect {
    height: 36px;
    padding: 0 10px;
    background: var(--kz-eingabe-bg);
    color: var(--kz-text);
    border: 1px solid var(--kz-rand);
    border-radius: 8px;
}

/* --- Kleine gemeinsame Bausteine fuer neue Seiten ------------------------ */

.kz-rubrik {
    font-family: var(--kz-schrift-mono);
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kz-rot); font-weight: 600;
    margin: 0;
}

/* Kurze rote Linie unter Seitentiteln - das Motiv der frueheren .one h1 */
.kz-titel-linie::after,
:root:root .one h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--kz-rot);
}

.kz-knopf,
.kz-knopf-zweit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
    :root:root * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* --- Hinweis "Neues Design" (navigation.php) ---------------------------- */

.kz-neu {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(1200px, calc(100% - 24px));
    margin: 0 auto 10px auto;
    padding: 7px 8px 7px 8px;
    box-sizing: border-box;
    background: var(--kz-rot-bg);
    border: 1px solid var(--kz-rot-rand);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--kz-text-2);
}
.kz-neu[hidden] { display: none; }
.kz-neu-marke {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--kz-rot);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
:root[data-kz-theme="dunkel"] .kz-neu-marke { color: #1a0a09; }
.kz-neu p { margin: 0; flex: 1; min-width: 0; line-height: 1.4; }
:root:root .kz-neu-link {
    flex-shrink: 0;
    color: var(--kz-rot);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.kz-neu-zu {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--kz-text-3);
    cursor: pointer;
}
.kz-neu-zu:hover { background: var(--kz-rot-rand); color: var(--kz-text); }

@media (max-width: 640px) {
    .kz-neu { flex-wrap: wrap; font-size: 13px; }
    .kz-neu p { flex-basis: calc(100% - 90px); }
}

/* Auf Inhaltsseiten steht die Titel-Linie mittig unter dem zentrierten Titel */
:root:root .one h1::after {
    position: static;   /* alte Seiten: position: relative; left: 50%; margin-left: -50px */
    left: auto;
    width: 44px;
    margin: 12px auto 0 auto;
}

/* Videos und eingebettete Inhalte in Karten mittig */
:root:root .model-card iframe,
:root:root .model-card video,
:root:root .model-card img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }

/* --- Rot-Akzent auf Inhaltskarten (Fortbildung, Guide, Newsblog, Modelle) --
   Die Karten tragen eine rote Kante, eine nummerierte Marke vor dem Titel,
   rote Aufzaehlungspfeile und heben sich beim Ueberfahren leicht an.
   Die erste Karte ohne Titel (Einleitung) bekommt statt der Nummer einen
   roten Tonflaechen-Hintergrund. */
:root:root #rightPanel { counter-reset: kz-karte; }
:root:root #rightPanel .model-card {
    position: relative;
    overflow: hidden;
    padding-left: 28px;
    border-top: 3px solid var(--kz-rot);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
:root:root #rightPanel .model-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--kz-rot), var(--kz-rot-rand));
}
:root:root #rightPanel .model-card:hover {
    transform: translateY(-2px);
    border-color: var(--kz-rot-rand);
    border-top-color: var(--kz-rot);
    box-shadow: var(--kz-schatten-gross);
}
:root:root #rightPanel .model-card:not(:has(.model-title)) {
    background: linear-gradient(135deg, var(--kz-rot-bg), var(--kz-panel) 75%);
    border-color: var(--kz-rot-rand);
    border-top-color: var(--kz-rot);
    color: var(--kz-text);
}
:root:root #rightPanel .model-card:has(.model-title) { counter-increment: kz-karte; }
:root:root #rightPanel .model-title {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom-color: var(--kz-rot-rand);
}
:root:root #rightPanel .model-title::before {
    content: counter(kz-karte, decimal-leading-zero);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 34px; height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--kz-rot);
    color: var(--kz-panel);
    font-family: var(--kz-schrift-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}
:root:root #rightPanel .model-feature { padding-left: 22px; }
:root:root #rightPanel .model-feature::before {
    content: "";
    left: 4px; top: .78em;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--kz-rot);
    transform: rotate(45deg);
}

/* Dezentere Variante des Rot-Akzents (Fortbildung): keine Kantenstreifen,
   Nummernmarke als zarte Tonflaeche, Rot erst beim Ueberfahren staerker. */
:root:root #rightPanel.kz-dezent .model-card {
    padding-left: 22px;
    border-top: 1px solid var(--kz-rand);
}
:root:root #rightPanel.kz-dezent .model-card::before {
    width: 3px;
    background: var(--kz-rot-rand);
    opacity: .8;
}
:root:root #rightPanel.kz-dezent .model-card:hover {
    transform: none;
    border-color: var(--kz-rot-rand);
    box-shadow: var(--kz-schatten);
}
:root:root #rightPanel.kz-dezent .model-card:hover::before { background: var(--kz-rot); opacity: 1; }
:root:root #rightPanel.kz-dezent .model-card:not(:has(.model-title)) {
    background: var(--kz-panel);
    border-color: var(--kz-rand);
    border-top-color: var(--kz-rand);
}
:root:root #rightPanel.kz-dezent .model-title {
    border-bottom-color: var(--kz-rand-weich);
}
:root:root #rightPanel.kz-dezent .model-title::before {
    background: var(--kz-rot-bg);
    color: var(--kz-rot);
    border: 1px solid var(--kz-rot-rand);
}
:root:root #rightPanel.kz-dezent .model-feature::before {
    width: 5px; height: 5px;
    background: var(--kz-rot);
    opacity: .75;
}