/* hilfmirmal v11 · KI-Manager:in Lernpfad: Theme-Schicht über dem unveränderten Kurs-CSS (Ki-Manager/index.html)
   und Stile der statischen Glossarseite (Ki-Manager/glossar.html). Erzeugt wird beides von tools/kurs-ki-manager.py.

   Regeln dieser Datei
   - Kurs: alles hängt an html.kim-kurs (setzt nur die Kursseite). Damit gewinnt jede Regel gegen das Original,
     egal in welcher Reihenfolge, und nichts davon wirkt auf andere Seiten.
   - Farben nur aus designsystem/tokens.json (auch als Alpha-Variante, z. B. sky-2 mit .2) oder aus den unten
     dokumentierten Vorschlägen --kurs-* (Status richtig/falsch, Phasen, Tokenizer). Isabell entscheidet darüber.
   - Schriften: Instrument Serif nur für h1, Heldenflächen, große Zahlen und Abschnittstitel (sec-head h2,
     block-title h2). Alles andere Inter 600/700. Mono: System-Monospace (keine zusätzliche Schriftdatei).
     @font-face für Instrument Serif und Inter kommt aus schale.css.
   - Dunkelmodus des Kurses bleibt (Eriks Vorgabe) und liegt auf night (#1c2a35) mit on-dark.
   - Kopf, Menü und Fuß sind die v11-Schale (schale.css); hier nur ihre Anpassung an den Kurs. */

/* ================================================================ Kurs-Farbvorschläge (nicht in tokens.json)
   --kurs-ok, --kurs-ok-hell          Quiz richtig, erledigt, Häkchen   (Name und Wert wie in kurs-n8n.css)
   --kurs-fehler, --kurs-fehler-hell  Quiz falsch, Warnung              (wie kurs-n8n.css; „stop“ ist nur für „Darf nicht“)
   --kurs-ok-linie, --kurs-fehler-linie  Rahmen dazu (nur KI-Manager)
   --kurs-violett*   Kursbuch-Bezug, Leitfragen        (bisheriges Violett des Kurses)
   --kurs-phase-*    vier Kursphasen: Verstehen = sky-2 (Token), die anderen drei Vorschläge
   --kurs-token-*    Tokenizer-Farben 3 bis 5 auf night (1 = sky-2, 2 = on-dark sind Tokens)
   Dunkelmodus: die hellen Varianten des bisherigen Kurses auf night. */
html.kim-kurs,.kim-glossar-seite{
  --kurs-ok:#2e7553;
  --kurs-ok-hell:#e4f2ea;
  --kurs-ok-linie:#a9d3be;
  --kurs-fehler:#a83a3f;
  --kurs-fehler-hell:#faebea;
  --kurs-fehler-linie:#f0b9a8;
  --kurs-violett:#6b4fa8;
  --kurs-violett-soft:#ece6f7;
  --kurs-phase-verstehen:#9fcdee;
  --kurs-phase-verantworten:#e0826a;
  --kurs-phase-einfuehren:#7fb09a;
  --kurs-phase-zeigen:#b7a2e8;
  --kurs-token-3:#a8d3bf;
  --kurs-token-4:#f2b3a2;
  --kurs-token-5:#c9b9ee;
}
html.kim-kurs[data-theme="dark"]{
  --kurs-ok:#8fc6ab;
  --kurs-ok-hell:rgba(127,176,154,.14);
  --kurs-ok-linie:rgba(127,176,154,.4);
  --kurs-fehler:#f2a189;              /* heller als im Original (#f0977f): auf night über --kurs-fehler-hell sonst 4,3:1 */
  --kurs-fehler-hell:rgba(224,130,106,.14);
  --kurs-fehler-linie:rgba(224,130,106,.4);
  --kurs-violett:#b7a2e8;
  --kurs-violett-soft:rgba(160,135,220,.15);
}

/* ================================================================ Variablen des Kurses auf v11
   html.kim-kurs[data-theme="light"] (0,2,1) schlägt das Original :root[data-theme="light"] (0,2,0). */
html.kim-kurs,html.kim-kurs[data-theme="light"]{
  --display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --kim-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  /* früher Navy und Gold, in beiden Modi gleich: jetzt night mit sky */
  --navy:#1c2a35;
  --navy-2:color-mix(in srgb,#f7f5f2 6%,#1c2a35);
  --navy-3:color-mix(in srgb,#f7f5f2 12%,#1c2a35);
  --cream:#f7f5f2;
  --gold-brand:#9fcdee;
  --gold-glow:#cfe7f8;
  /* hell */
  --bg:#e7e4e0;
  --bg-2:#f1efec;
  --surface:#fdfdfc;
  --surface-2:#f7f6f4;
  --surface-3:#f1efec;
  --line:rgba(29,43,54,.12);
  --line-2:rgba(29,43,54,.22);
  --ink:#1d2b36;
  --ink-2:#3e4f5b;
  --ink-3:#5f6e79;
  --gold:#2f5a76;
  --gold-fill:#9fcdee;
  --gold-soft:#e8f4fd;
  --gold-line:#9fcdee;
  /* die bisherige zweite Akzentfarbe Blau wird neutral (sand und ink-2), damit sie sich vom neuen Blau abhebt */
  --blue:#3e4f5b;
  --blue-soft:#f1efec;
  --blue-line:rgba(29,43,54,.22);
  --coral:var(--kurs-fehler);
  --coral-soft:var(--kurs-fehler-hell);
  --coral-line:var(--kurs-fehler-linie);
  --green:var(--kurs-ok);
  --green-soft:var(--kurs-ok-hell);
  --green-line:var(--kurs-ok-linie);
  --violet:var(--kurs-violett);
  --violet-soft:var(--kurs-violett-soft);
  --shadow-sm:0 1px 2px rgba(29,43,54,.06);
  --shadow:0 1px 2px rgba(29,43,54,.05),0 18px 40px -24px rgba(29,43,54,.5);
  --shadow-lg:0 40px 90px -50px rgba(29,43,54,.38);
  --focus:#3f6f8f;
  /* leise Texte auf den night-Flächen (Seitenleiste, Topbar, Simulationen), in beiden Modi gleich:
     on-dark als Alpha-Variante, mindestens 4,9:1 auch auf den hellsten Feldern der Simulationen */
  --kim-nacht-leise:rgba(247,245,242,.66);
  --kim-nacht-still:rgba(247,245,242,.6);
}
html.kim-kurs[data-theme="dark"]{
  --bg:#1c2a35;
  --bg-2:color-mix(in srgb,#f7f5f2 3%,#1c2a35);
  --surface:color-mix(in srgb,#f7f5f2 5%,#1c2a35);
  --surface-2:color-mix(in srgb,#f7f5f2 8%,#1c2a35);
  --surface-3:color-mix(in srgb,#f7f5f2 12%,#1c2a35);
  --line:rgba(247,245,242,.1);
  --line-2:rgba(247,245,242,.18);
  --ink:#f7f5f2;
  --ink-2:rgba(247,245,242,.82);
  --ink-3:rgba(247,245,242,.66);
  --gold:#9fcdee;
  --gold-fill:#9fcdee;
  --gold-soft:rgba(159,205,238,.13);
  --gold-line:rgba(159,205,238,.38);
  --blue:rgba(247,245,242,.82);
  --blue-soft:rgba(247,245,242,.06);
  --blue-line:rgba(247,245,242,.2);
  --coral:var(--kurs-fehler);         /* sonst gilt im Dunkelmodus das Original :root[data-theme="dark"] (#F0977F) */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 12px 32px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.3),0 30px 70px -26px rgba(0,0,0,.75);
  --focus:#9fcdee;
}

/* ================================================================ Typografie */
.kim-kurs .hero h1,.kim-kurs .home-hero h1{font-family:var(--kim-serif);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.kim-kurs .hero h1{font-size:clamp(2.3rem,1.3rem + 3.6vw,3.9rem)}
.kim-kurs .home-hero h1{font-size:clamp(2.5rem,1.2rem + 4.8vw,4.7rem);max-width:13ch}
.kim-kurs .home-hero h1 em{font-style:italic;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#9fcdee;-webkit-text-fill-color:currentColor}
.kim-kurs .hero .hook{font-family:var(--kim-serif);font-weight:400;font-style:italic;font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);line-height:1.22;color:#cfe7f8}
.kim-kurs .hero-num{font-family:var(--kim-serif);font-weight:400;letter-spacing:-.02em;background:linear-gradient(160deg,#cfe7f8 10%,#9fcdee 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kim-kurs .sec-head h2,.kim-kurs .sec-head h1,.kim-kurs .block-title h2{font-family:var(--kim-serif);font-weight:400;letter-spacing:-.005em;line-height:1.06;font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem)}
.kim-kurs .hs .v,.kim-kurs .stat .v,.kim-kurs .day-card .n,.kim-kurs .exam-row .p,.kim-kurs .kb-top .big,.kim-kurs .scorebar .big,.kim-kurs .gl-letter{font-family:var(--kim-serif);font-weight:400;letter-spacing:0}
.kim-kurs .hs .v{font-size:2.15rem}
.kim-kurs .day-card .n{font-size:2.4rem}
.kim-kurs .exam-row .p{font-size:2.1rem}
.kim-kurs .kb-top .big{font-size:2.7rem}
.kim-kurs .scorebar .big{font-size:2.2rem}
.kim-kurs .gl-letter{font-size:1.9rem}
.kim-kurs .donut text{font-family:var(--kim-serif);font-weight:400}
.kim-kurs .hs .v small,.kim-kurs .scorebar .big small{font-family:var(--body)}

/* ================================================================ Navy/Gold-Regeln des Originals (28 Stellen) */
.kim-kurs[data-theme="dark"] .hero,.kim-kurs[data-theme="dark"] .home-hero,.kim-kurs[data-theme="dark"] .sim{border:1px solid rgba(159,205,238,.16)}
.kim-kurs ::selection{background:#cfe7f8;color:#1d2b36}
.kim-kurs .side::before{background:radial-gradient(120% 90% at 90% 0%,rgba(159,205,238,.14),transparent 60%)}
.kim-kurs .brand-mark{background:linear-gradient(145deg,#cfe7f8,#9fcdee);color:#1c2a35;box-shadow:0 8px 20px -8px rgba(159,205,238,.6)}
.kim-kurs .brand b{font-weight:700}
.kim-kurs .nav-item.is-active{background:rgba(159,205,238,.12)}
.kim-kurs .nav-item.is-active .n,.kim-kurs .nav-item.is-done .n{color:#1c2a35}
.kim-kurs .theme-switch button[aria-pressed="true"]{background:rgba(159,205,238,.18)}
.kim-kurs .hero::before,.kim-kurs .sim::before,.kim-kurs .home-hero::before{background:radial-gradient(70% 90% at 92% 8%,rgba(159,205,238,.2),transparent 58%),radial-gradient(60% 70% at 0% 100%,rgba(207,231,248,.07),transparent 60%),#1c2a35}
.kim-kurs .hero .kicker .today{color:#1c2a35}
.kim-kurs .btn{border-radius:999px}
.kim-kurs .btn.gold,.kim-kurs .sim .btn.gold{background:#9fcdee;color:#1c2a35;border-color:transparent;box-shadow:0 10px 24px -12px rgba(159,205,238,.8)}
.kim-kurs .btn.gold:hover,.kim-kurs .sim .btn.gold:hover{background:#cfe7f8}
.kim-kurs .task-num{box-shadow:inset 0 0 0 1px rgba(159,205,238,.3)}
.kim-kurs .m-item.p2 .tag{background:#2f5a76}
.kim-kurs .sim .chip-btn[aria-pressed="true"]{color:#1c2a35}
.kim-kurs .sim .tok:nth-of-type(n){color:#1c2a35}
.kim-kurs .sim .tok:nth-of-type(5n+1){background:#9fcdee;border-color:#9fcdee}
.kim-kurs .sim .tok:nth-of-type(5n+2){background:#f7f5f2;border-color:#f7f5f2}
.kim-kurs .sim .tok:nth-of-type(5n+3){background:var(--kurs-token-3);border-color:var(--kurs-token-3)}
.kim-kurs .sim .tok:nth-of-type(5n+4){background:var(--kurs-token-4);border-color:var(--kurs-token-4)}
.kim-kurs .sim .tok:nth-of-type(5n+5){background:var(--kurs-token-5);border-color:var(--kurs-token-5)}
.kim-kurs .gen-out .w.new{background:rgba(159,205,238,.28)}
.kim-kurs .pb-slot.filled{background:rgba(159,205,238,.08)}
.kim-kurs .mail{background:#f7f6f4;color:#1d2b36}
.kim-kurs .outcome.mid{background:rgba(159,205,238,.14);border-color:rgba(159,205,238,.45);color:#cfe7f8}
.kim-kurs .goal[aria-pressed="true"]{background:rgba(159,205,238,.15)}
.kim-kurs .radar .area{fill:rgba(159,205,238,.28);stroke:#9fcdee}
.kim-kurs .radar .pt{fill:#cfe7f8}
.kim-kurs .home-hero::after{border-color:rgba(159,205,238,.18);box-shadow:0 0 0 60px rgba(159,205,238,.03),0 0 0 120px rgba(159,205,238,.025),0 0 0 180px rgba(159,205,238,.02)}

/* Kleine Texte auf greige brauchen ink-2 (ink-3 erreicht dort nur 4,15:1) */
.kim-kurs .block-title p,.kim-kurs .phases,.kim-kurs .gl-count,.kim-kurs .day-card .date,.kim-kurs .day-card .cnt,
.kim-kurs .sec-head .eyebrow{color:var(--ink-2)}
/* Kleine Texte auf night: Das Original hatte Grautöne für sein dunkleres Navy (#7F8A9C, #8C97A8, #6F7B8E). Auf dem
   helleren night fielen sie unter 4,5:1, darum hier on-dark als Alpha-Variante. Die Abstufung (leise, still) bleibt. */
.kim-kurs .nav-label,.kim-kurs .nav-item .t small,.kim-kurs .nav-item .pct,.kim-kurs .side-progress .sub,
.kim-kurs .sim .muted,.kim-kurs .pb-opts .grp>span,.kim-kurs .hunt th,.kim-kurs .hunt-status span:not(.hit),
.kim-kurs .tool-card .row span:first-child,.kim-kurs .uc .cell small,.kim-kurs .uc-head,.kim-kurs .dim small{color:var(--kim-nacht-leise)}
.kim-kurs .side-note,.kim-kurs .pb-slot .v.empty{color:var(--kim-nacht-still)}
/* Rangliste der Use Cases (Tag 8): die Farbe des Matrix-Punkts (--c aus den Kursdaten) mit on-dark aufgehellt,
   mindestens 6:1 auf night; ohne --c bleibt die Textfarbe des Absatzes */
.kim-kurs .sc-rank b[style*="--c"]{color:color-mix(in srgb,var(--c) 60%,#f7f5f2)}
/* Fokusring auf night: sky-2 statt blue (blue erreicht auf night nur 2,7:1) */
.kim-kurs .side,.kim-kurs .topbar,.kim-kurs .hero,.kim-kurs .home-hero,.kim-kurs .sim,.kim-kurs .stand{--focus:#9fcdee}
/* Dunkelmodus, nur am Bildschirm (im Druck gelten die hellen Werte mit dem dunklen Korallton, darauf bleibt Weiß):
   Text auf dem hellen Korallton in night statt Weiß (Original 2,2:1): Chat-Markierung (Tag 6), falsche Antwort,
   falsch sortiert, Kennzeichen „heute“ */
@media screen{
  .kim-kurs[data-theme="dark"] .msg mark,.kim-kurs[data-theme="dark"] .opt.wrong .k,
  .kim-kurs[data-theme="dark"] .sort-row .seg button.wrong,.kim-kurs[data-theme="dark"] .day-card .state.today{color:#1c2a35}
}
.kim-kurs .day-card .date{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.66rem}
/* Links im Fließtext wie auf den Unterseiten: blue-deep (dunkel: sky-2), unterstrichen */
.kim-kurs .step-tx a,.kim-kurs .task a,.kim-kurs .term .def a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.kim-kurs .note.ex .lbl,.kim-kurs .reveal.blue>button{color:var(--ink-2)}

/* ================================================================ Mobil: Überlauf bis 320 px verhindern */
.kim-kurs .kb-grid>div{min-width:0}
.kim-kurs .kb-grid>div[style*="display:grid"]{grid-template-columns:minmax(0,1fr)}
.kim-kurs .term-title,.kim-kurs .q-text,.kim-kurs .task-head h3,.kim-kurs .branch h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* Eingeklappte Unterpunkte der Tage sind unsichtbar und darum auch nicht per Tab erreichbar */
.kim-kurs .nav-sub>div{visibility:hidden;transition:visibility 0s linear .35s}
.kim-kurs .nav-sub.open>div{visibility:inherit;transition:visibility 0s}   /* inherit: im geschlossenen Drawer bleibt es unsichtbar */
@media (max-width:980px){
  /* der Schatten der eingeklappten Seitenleiste lag sonst als grauer Rand über dem Inhalt */
  .kim-kurs .side:not(.open){box-shadow:none}
  /* Drawer zu: unsichtbar, also kein Tab-Ziel; das Wegschieben (.38 s) bleibt sichtbar */
  .kim-kurs .side{visibility:hidden;transition:transform .38s var(--ease),visibility 0s linear .38s}
  .kim-kurs .side.open{visibility:visible;transition:transform .38s var(--ease),visibility 0s}
}
@media (max-width:420px){
  .kim-kurs .scorebar .score{min-width:0}
  .kim-kurs .scorebar .segs{flex-wrap:wrap}
  .kim-kurs .scorebar .segs i{width:14px}
  .kim-kurs .range{flex-wrap:wrap}
  .kim-kurs .range input{min-width:0;flex:1 1 160px}
}

/* ================================================================ Schale im Kurs */
/* Kopf über dem Inhalt, aber unter Scrim (55) und Drawer (60) des Kurses */
.kim-kurs .hmm-kopf.hmm-kopf-scrollt{z-index:50}
/* Bis 980 px gilt der Kopf wie überall (Variante A: Emblem, Erstgespräch, Menü) samt Brotkrumen. Der Burger in
   der Topbar des Kurses öffnet nur die Kursnavigation (aria-label „Kursnavigation öffnen“). */
/* Dunkelmodus: Kopf, Brotkrumen und Fuß auf night (das Menü-Panel bleibt immer hell) */
.kim-kurs[data-theme="dark"] .hmm-kopf,.kim-kurs[data-theme="dark"] .hmm-kopf .hmm-menueknopf,
.kim-kurs[data-theme="dark"] .hmm-krumen,.kim-kurs[data-theme="dark"] .hmm-fuss{
  --hmm-kopf-bg:#1c2a35;
  --hmm-sky-air:#1c2a35;
  --hmm-paper:#1c2a35;
  --hmm-ink:#f7f5f2;
  --hmm-ink-2:rgba(247,245,242,.82);
  --hmm-ink-3:rgba(247,245,242,.66);
  --hmm-blue:#9fcdee;
  --hmm-blue-deep:#cfe7f8;
  --hmm-line:rgba(247,245,242,.12);
}
.kim-kurs[data-theme="dark"] .hmm-kopf,.kim-kurs[data-theme="dark"] .hmm-krumen{color:#f7f5f2}
.kim-kurs[data-theme="dark"] .hmm-kopf .hmm-menueknopf:hover,.kim-kurs[data-theme="dark"] .hmm-kopf-cta:hover{background:#f7f5f2;color:#1c2a35}

/* Kurs-Tor: gesperrte Ansicht nie hinter dem Tor zeigen */
html.kim-tor-sperre #lp .main{visibility:hidden}

/* Hinweis ohne JavaScript (noscript in #lp): Kursname als h1, darunter der Weg zu Überblick und Glossar */
.kim-noscript{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,56px) 8px;font-family:var(--body);color:var(--ink)}
.kim-noscript-titel{margin:0;font-family:var(--kim-serif);font-weight:400;font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);line-height:1.02;letter-spacing:-.01em}
.kim-noscript p{margin:.9rem 0 0;max-width:62ch;color:var(--ink-2);line-height:1.55}
.kim-noscript a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em;font-weight:600}

/* ================================================================ Kursüberblick (statisch, für alle sichtbar) */
.kim-ueberblick{padding:clamp(40px,6vw,80px) clamp(16px,4vw,56px) clamp(48px,7vw,96px);background:var(--bg-2);border-top:1px solid var(--line);color:var(--ink);font-family:var(--body)}
.kim-ueberblick-innen{max-width:1120px;margin:0 auto}
.kim-kicker{margin:0 0 .9rem;font:600 .76rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kim-ueberblick-titel{margin:0;font-family:var(--kim-serif);font-weight:400;font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);line-height:1.02;letter-spacing:-.01em}
.kim-ueberblick-lead{margin:1rem 0 0;max-width:62ch;color:var(--ink-2);font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.55}
.kim-tage{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kim-tag{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:16px 18px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--kim-pc,var(--line-2))}
.kim-phase-verstehen{--kim-pc:var(--kurs-phase-verstehen)}
.kim-phase-verantworten{--kim-pc:var(--kurs-phase-verantworten)}
.kim-phase-einfuehren{--kim-pc:var(--kurs-phase-einfuehren)}
.kim-phase-zeigen{--kim-pc:var(--kurs-phase-zeigen)}
.kim-tag-link{display:flex;flex-direction:column;gap:.35rem;color:inherit;text-decoration:none;border-radius:10px}
.kim-tag-link:hover .kim-tag-titel{color:var(--gold);text-decoration:underline;text-underline-offset:.2em}
.kim-tag-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kim-tag-n{font-family:var(--kim-serif);font-size:1.6rem;line-height:1}
.kim-tag-phase{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.kim-tag-titel{margin:0;font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:0}
.kim-tag-hook{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.45}
.kim-tag-themen{margin:auto 0 0;padding-top:.4rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.8rem;line-height:1.45}
.kim-tag-label{font-weight:600;color:var(--ink)}
.kim-tag-projekt{grid-column:span 1;background:var(--surface-2)}
.kim-ueberblick-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;margin-top:1.6rem;color:var(--ink-2);font-size:.92rem}
.kim-ueberblick-fuss p{margin:0}
.kim-glossar-link a,.kim-stand a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em;font-weight:600}
.kim-stand{color:var(--ink-2)}

/* Erik spricht: immer mit seinem gezeichneten Avatar und dem Namen darüber (Bubble-Regel des Designsystems) */
.kim-erik{display:flex;align-items:flex-end;gap:.75rem;max-width:40rem;margin-top:2.4rem}
.kim-erik-avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fdfdfc,0 10px 24px -12px rgba(29,43,54,.5)}
.kim-erik-spalte{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-width:0}
.kim-erik-name{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2);padding-left:.5rem}
.kim-erik-blase{margin:0;background:#fdfdfc;color:#1d2b36;border-radius:20px 20px 20px 6px;padding:.85rem 1.15rem;font-size:clamp(1rem,.95rem + .3vw,1.15rem);font-weight:500;line-height:1.45;box-shadow:0 18px 40px -24px rgba(29,43,54,.5)}
.kim-erik-aktion{margin:1rem 0 0 calc(52px + .75rem)}
.kim-erik-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;padding:.7rem 1.3rem;border-radius:999px;background:#1d2b36;color:#fdfdfc;font-weight:600;font-size:.98rem;text-decoration:none;transition:background-color .3s}
.kim-erik-knopf::after{content:"";width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.kim-erik-knopf:hover{background:#3f6f8f}
.kim-kurs[data-theme="dark"] .kim-erik-knopf{background:#9fcdee;color:#1c2a35}
.kim-kurs[data-theme="dark"] .kim-erik-knopf:hover{background:#cfe7f8}
.kim-kurs[data-theme="dark"] .kim-erik-avatar{box-shadow:0 0 0 3px #1c2a35,0 10px 24px -12px rgba(0,0,0,.6)}
.kim-erik-knopf:focus-visible,.kim-tag-link:focus-visible{outline:2px solid var(--focus,#3f6f8f);outline-offset:3px}

@media (max-width:980px){
  .kim-tage{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .kim-tage{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .kim-erik-knopf{transition:none}
  /* ohne Bewegung auch ohne Verzögerung: zu ist sofort unsichtbar */
  .kim-kurs .side,.kim-kurs .nav-sub>div{transition-delay:0s!important}
}

/* ================================================================ Glossarseite (Ki-Manager/glossar.html, seite.css) */
.kim-gl{padding:0 var(--gutter) clamp(56px,8vw,110px)}
.kim-gl-kopf{max-width:46rem;padding:clamp(28px,5vw,64px) 0 clamp(18px,3vw,32px)}
.kim-gl-titel{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1;letter-spacing:-.01em}
.kim-gl-titel em{font-style:italic;color:var(--blue)}
.kim-gl-kopf .say{margin-top:1.1rem;max-width:40em;color:var(--ink-2);font-size:clamp(1.05rem,.95rem + .45vw,1.25rem);line-height:1.5}
.kim-gl-aktionen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.kim-gl-abc{position:sticky;top:0;z-index:5;margin:0 calc(-1 * var(--gutter));padding:.4rem var(--gutter);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.kim-gl-abc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.kim-gl-abc a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:10px;color:var(--blue-deep);font-weight:600;text-decoration:none}
.kim-gl-abc a:hover{background:var(--paper)}
.kim-gl-abc a:focus-visible,.kim-gl a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kim-gl-gruppen{max-width:56rem;scroll-margin-top:64px}
.kim-gl-gruppe{scroll-margin-top:64px;margin-top:2.2rem}
.kim-gl-buchstabe{margin:0 0 .6rem;font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:1;color:var(--blue)}
.kim-gl-liste{display:grid;gap:10px;margin:0}
.kim-gl-eintrag{scroll-margin-top:64px;padding:16px 20px;border-radius:18px;background:var(--paper);box-shadow:0 18px 40px -30px rgba(29,43,54,.45)}
.kim-gl-eintrag:target{outline:2px solid var(--sky-2);outline-offset:2px}
.kim-gl-begriff{font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.kim-gl-erklaerung{margin:.35rem 0 0}
.kim-gl-erklaerung p{margin:0;color:var(--ink-2);line-height:1.55}
.kim-gl-erklaerung .kim-gl-tag{margin-top:.45rem;font-size:.85rem;color:var(--ink-3)}
.kim-gl-tag a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.kim-gl-ende{max-width:56rem;margin-top:3rem}
.kim-gl-ende .kim-stand{margin:0;color:var(--ink-2);font-size:.92rem}
.kim-glossar-seite .kim-erik-name{color:var(--ink-2)}
@media (max-width:760px){
  /* eine Zeile zum Wischen statt vier klebender Zeilen */
  .kim-gl-abc ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .kim-gl-abc ul::-webkit-scrollbar{display:none}
  .kim-gl-abc li{flex:none}
}
@media (prefers-reduced-motion:no-preference){
  .kim-gl-gruppen{scroll-behavior:smooth}
}

/* ================================================================ Druck */
@media print{
  html.kim-kurs,html.kim-kurs[data-theme]{
    --bg:#fdfdfc;--surface:#fdfdfc;--surface-2:#fdfdfc;--surface-3:#f7f6f4;
    --line:rgba(29,43,54,.18);--line-2:rgba(29,43,54,.28);
    --ink:#1d2b36;--ink-2:#3e4f5b;--ink-3:#5f6e79;
    --gold:#2f5a76;--gold-fill:#9fcdee;--gold-soft:#e8f4fd;--gold-line:#9fcdee;
    --blue:#3e4f5b;--blue-soft:#f1efec;--blue-line:rgba(29,43,54,.22);
    --kurs-ok:#2e7553;--kurs-ok-hell:#e4f2ea;--kurs-ok-linie:#a9d3be;
    --kurs-fehler:#a83a3f;--kurs-fehler-hell:#faebea;--kurs-fehler-linie:#f0b9a8;
    --kurs-violett:#6b4fa8;--kurs-violett-soft:#ece6f7;
    /* helle Akzente der Nachtflächen wären auf Papier zu blass */
    --gold-glow:#3f6f8f;--gold-brand:#3f6f8f;--kurs-phase-verstehen:#3f6f8f;
  }
  .kim-kurs .hero .hook,.kim-kurs .stand .time{color:#2f5a76}
  .kim-kurs .home-hero h1 em{color:#2f5a76}
  .kim-ueberblick,.hmm-tor{display:none!important}
}