/* =================================================================
   DESIGNSYSTEM.css — VERBINDLICHE DESIGN-SYSTEM-EBENE (v2)
   Wird ALS ALLERLETZTE Datei geladen → setzt das einheitliche
   System aus "Designsystem v2" auf der ganzen Website durch.

   1 System · 2 Modi · 3 Farbrollen · 3 Schriften · 1 Radius-Skala
   Primär  = Amber   (Erinnerung, Aktionen, aktive Navigation)
   Sekundär= Blau    (Interaktion, Sachlichkeit, historische Fakten)
   Tertiär = Violett (NUR Gamification: XP, Level, Abzeichen, Streak)
   ================================================================= */

/* -----------------------------------------------------------------
   0. SCHRIFTEN — genau drei Familien, feste Rollen
   Space Grotesk = Display + UI · Plus Jakarta Sans = Lesetext ·
   Courier Prime = Originalzitate & Quellen
   ----------------------------------------------------------------- */
:root{
  --f-display:'Anton', 'Oswald', system-ui, sans-serif; /* Mastheads, Kapitel, große Headlines — plakativ, fett */
  --f-head:'Source Sans 3', system-ui, sans-serif;      /* H3/H4, UI-Titel — fett (700/900) */
  --f-emo:'Anton', system-ui, sans-serif;               /* emotionale H2 */
  --f-ui:'Source Sans 3', system-ui, sans-serif;        /* Nav, Buttons, Labels */
  --f-accent:'Source Sans 3', system-ui, sans-serif;    /* Kicker, Tags */
  --f-body:'Source Sans 3', system-ui, sans-serif;      /* Fließtext */
  --f-quote:'Courier Prime', ui-monospace, monospace;   /* Originalzitate */
  --f-mono:'Courier Prime', ui-monospace, monospace;    /* Quellen, Akten */

  /* Radius-Skala — verbindlich, überall abgerundet */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
}

/* -----------------------------------------------------------------
   1. TERTIÄRFARBE — Violett (Gamification). In beiden Modi dieselbe
   Rolle. Wird NUR für XP, Level, Abzeichen, Streaks verwendet.
   Außerdem: Amber-Tint + On-Amber-Ink für konsistente Buttons/States.
   ----------------------------------------------------------------- */
html[data-theme="light"]{
  --xp:#6E37BC; --xp-l:#9B6FE0; --xp-tint:rgba(110,55,188,.12); --xp-ink:#FFFFFF;
  --amber-tint:rgba(176,114,13,.14);
  --blau-tint:rgba(44,86,151,.12);
  --btn-ink:#FFFFFF;            /* Text auf Amber-Primärbutton (light) */
  --ds-rail:#161210;           /* linke Sidebar — konstant warm-dunkel */
  --ds-rail-ink:#F0E8D5;
}
html[data-theme="dark"]{
  --xp:#A06CF2; --xp-l:#C2A0FF; --xp-tint:rgba(160,108,242,.20); --xp-ink:#0E0820;
  --amber-tint:rgba(240,160,48,.18);
  --blau-tint:rgba(123,163,212,.16);
  --btn-ink:#241A0E;           /* Text auf Amber-Primärbutton (dark) */
  --ds-rail:#0B0907;
  --ds-rail-ink:#F0E8D5;
}

/* -----------------------------------------------------------------
   2. RADIUS — Gesetz 1: nirgends scharfe Ecken
   ----------------------------------------------------------------- */
.btn,.gtab,.dopt,.qopt,.inp,input,textarea,select,.chip,.opt-pill,
.fact,.qcard,.rcard,.group-card,.tilt,.gitem,.compare .side,.recap,
.fbtn,.gender-pill,.pers-opt,.tl2-card,.sb-item,.sb-ctl,.popmenu,
.prov-banner,.learn-meter,.src-badge,.audio,.chat-sugg button,
.decision,.dreveal,.inne-card,.hub-card,.cn-card{
  border-radius:var(--r-md);
}
.sb-item,.sb-ctl,.opt-pill,.chip,.tagx{ border-radius:var(--r-sm); }
.src-badge,.kicker,.tl2-tag{ border-radius:var(--r-xs); }
.btn,.profile-chip,.lvl,.chat-sugg button,.gender-pill,.tf-btn{ border-radius:var(--r-full); }
input,textarea,.inp,.search-box input,.chat-foot input,.gloss-search input{ border-radius:var(--r-sm); }

/* -----------------------------------------------------------------
   3. BUTTONS — Primär = Amber (Aktion), Sekundär = Blau-Outline
   ----------------------------------------------------------------- */
.btn{
  background:var(--amber) !important; color:var(--btn-ink) !important;
  font-family:var(--f-ui) !important; font-weight:700 !important;
  box-shadow:0 6px 18px -10px var(--amber);
}
.btn:hover{ filter:brightness(1.06); background:var(--amber) !important; }
.btn.ghost{ background:transparent !important; color:var(--blau) !important; border:2px solid var(--blau) !important; box-shadow:none; }
.btn.ghost:hover{ background:var(--blau-tint) !important; color:var(--blau) !important; }

/* -----------------------------------------------------------------
   4. LINKE SIDEBAR — folgt dem Theme (hell im hellen Modus, dunkel
   im dunklen). Aktiv = AMBER (Icon, Label, Balken, Tint).
   ----------------------------------------------------------------- */
html[data-theme] .sidebar{
  background:var(--pergament-2) !important;
  border-right:1px solid var(--line) !important;
  box-shadow:2px 0 30px -26px rgba(0,0,0,.5) !important;
}
html .sidebar::after{ background:linear-gradient(90deg,var(--amber),var(--blau)) !important; }
.sidebar .sidebar-logo{ border-bottom:1px solid var(--line) !important; }
.sidebar .sidebar-logo:hover{ background:var(--pergament-3) !important; }
.sidebar .sidebar-logo .wm .l1{ color:var(--ink) !important; }
.sidebar .sidebar-logo .wm .l2{ color:var(--amber) !important; }
/* Logo deutlich größer (system.css erzwingt sonst 30px) */
.sidebar .sidebar-logo{ padding:16px 11px 14px !important; }
.sidebar .sidebar-logo .logo-mark{ width:62px !important; height:62px !important; }
.sidebar .sidebar-logo .wm .l1{ font-size:13.5px !important; letter-spacing:.12em !important; }
.sidebar .sidebar-logo .wm .l2{ font-size:10.5px !important; letter-spacing:.15em !important; }
/* Logo: im hellen Modus dunkle Linienzeichnung, im dunklen über shell.css */
.sidebar .logo-mark{ background:none !important; box-shadow:none !important; padding:0 !important; }
.sidebar .logo-mark .lm-cloud-fill{ fill:var(--pergament-3) !important; }

/* Profil oben in der Schiene */
.sidebar .sb-prof{ border-bottom:1px solid var(--line) !important; }
.sidebar .sb-prof:hover{ background:var(--pergament-3) !important; }
.sidebar .sb-prof .pmeta .pn{ color:var(--ink) !important; }
.sidebar .sb-prof .pmeta .pl{ color:var(--amber) !important; }
.sidebar .sb-prof .pav{ border-color:var(--amber) !important; background:var(--pergament-3) !important; }

/* Navigations-Items */
.sidebar .sb-item{ color:var(--ink-soft) !important; }
.sidebar .sb-item:hover{ color:var(--ink) !important; background:var(--pergament-3) !important; }
.sidebar .sb-item.active{ color:var(--amber-d) !important; background:linear-gradient(90deg,var(--amber-tint),transparent) !important; }
html[data-theme="dark"] .sidebar .sb-item.active{ color:var(--amber-l) !important; }
.sidebar .sb-item.active::before{ background:var(--amber) !important; }
.sidebar .sb-item .tagx{ background:var(--pergament-3) !important; color:var(--ink-soft) !important; }
.sidebar .sb-item .tagx.go{ background:var(--amber) !important; color:var(--btn-ink) !important; }
.sidebar .sb-group-label{ color:var(--ink-soft) !important; opacity:.7; }

/* Fußbereich + Einklappen */
.sidebar .sb-foot,.sidebar .sb-collapse{ border-top:1px solid var(--line) !important; }
.sidebar .sb-ctl,.sidebar .sb-collapse{ color:var(--ink-soft) !important; }
.sidebar .sb-ctl:hover,.sidebar .sb-collapse:hover{ color:var(--ink) !important; background:var(--pergament-3) !important; }
.sidebar .sb-ctl .fl-state{ color:var(--amber) !important; }

/* -----------------------------------------------------------------
   5. OBERE NAVIGATION / QUICK-NAV — Aktiv überall AMBER
   ----------------------------------------------------------------- */
.nav-links .link::after{ background:var(--amber) !important; }
.nav-links .link.active{ color:var(--amber) !important; }
.profile-chip .lvl,
#chipLvl{ background:var(--xp) !important; color:var(--xp-ink) !important; }

/* -----------------------------------------------------------------
   6. GAMIFICATION — IMMER Violett (Tertiär). Klar von Navigation
   (Amber) und Fakten (Blau) getrennt.
   ----------------------------------------------------------------- */
/* Level-Pille im Profil-Drawer */
.drawer-hd .lvl-badge{ background:var(--xp) !important; color:#fff !important; }
.drawer-hd .lvl-name{ color:var(--xp-l) !important; }
/* XP-Fortschrittsbalken */
.xpbar i{ background:linear-gradient(90deg,var(--xp),var(--xp-l)) !important; }
/* XP-Auszeichnungen an den Spiel-Tabs */
.gtab .xp{ background:var(--xp-tint) !important; color:var(--xp-l) !important; border-radius:var(--r-full); padding:2px 9px; }
html[data-theme="light"] .gtab .xp{ color:var(--xp) !important; }
/* Abzeichen-Icons + freigeschaltete Karten */
.drawer .badge .ic,.badge .ic{ background:var(--xp) !important; color:#fff !important; }
.drawer .badge:not(.locked){ border-color:color-mix(in oklab,var(--xp) 50%,var(--line)) !important; }
.drawer .badge .ic{ box-shadow:0 6px 16px -8px var(--xp) !important; }
/* Belohnungs-Banner in Spielen */
.reward{ color:var(--xp) !important; }
html[data-theme="dark"] .reward{ color:var(--xp-l) !important; }
/* XP-Toast + Badge-Pop bekommen violetten Akzent */
.badge-pop .bp-ic,.toast .t-ic{ color:var(--xp-l); }

/* -----------------------------------------------------------------
   7. CHATBOT „Frag Johannes" — ruhiges, markenkonformes Panel.
   Rundes Archivporträt, Amber-Akzente (kein Violett), Source Sans 3.
   ----------------------------------------------------------------- */
.chat-panel{
  border-radius:var(--r-xl) !important; overflow:hidden;
  border:1px solid var(--line) !important; background:var(--pergament) !important;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.55) !important;
}
/* Kopf — warme Fläche, feiner Amber→Blau-Streifen oben */
.chat-hd{
  position:relative;
  background:var(--pergament-2) !important; color:var(--ink) !important;
  border-bottom:1px solid var(--line) !important; padding:15px 16px !important;
}
.chat-hd::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--amber),var(--blau)); }
.chat-hd .gd-head-av{
  width:44px !important; height:44px !important;
  border-radius:50% !important; border:2px solid var(--amber) !important;
  background:var(--pergament-3) !important; overflow:hidden;
  box-shadow:0 0 0 3px var(--amber-tint) !important; animation:none !important;
}
.chat-hd .gd-head-av img{ width:100% !important; height:100% !important; object-fit:cover; object-position:50% 18%; filter:grayscale(.15) contrast(1.04); display:block; }
.chat-hd .nm{ font-family:var(--f-head) !important; font-weight:800 !important; font-size:16px !important; color:var(--ink) !important; letter-spacing:0 !important; }
.chat-hd .st{ font-family:var(--f-ui) !important; font-size:11.5px !important; font-weight:600 !important; color:var(--ink-soft) !important; display:flex; align-items:center; gap:6px; letter-spacing:0 !important; }
.chat-hd .st::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 30%,transparent); }
.chat-hd .clvl{ font-family:var(--f-ui); font-weight:700; font-size:10.5px; color:var(--amber-d);
  background:var(--amber-tint); padding:2px 8px; border-radius:var(--r-full); margin-left:8px; white-space:nowrap; }
.chat-hd .x{ border-radius:50% !important; }
html[data-theme="dark"] .chat-hd{ background:var(--pergament-3) !important; }
html[data-theme="dark"] .chat-hd .clvl{ color:var(--amber-l); }

/* Nachrichtenblasen */
.chat-log{ background:var(--pergament) !important; }
.msg{ font-family:var(--f-body) !important; font-size:14.5px !important; }
.msg.j,.chat-log .j{ border-radius:5px 16px 16px 16px !important; background:var(--pergament-3) !important; border:1px solid var(--line) !important; }
.msg.u,.chat-log .u{ border-radius:16px 16px 5px 16px !important; background:var(--blau) !important; color:#fff !important; }
.msg.j .who{ font-family:var(--f-ui) !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; color:var(--amber-d) !important; font-size:11px !important; }
html[data-theme="dark"] .msg.j .who{ color:var(--amber-l) !important; }

/* Vorschlags-Chips + Eingabe */
.chat-sugg button{ font-family:var(--f-ui) !important; font-weight:600 !important; font-size:12.5px !important;
  border-radius:var(--r-full) !important; border:1px solid var(--line) !important; color:var(--ink-soft) !important; padding:8px 13px !important; }
.chat-sugg button:hover{ border-color:var(--amber) !important; color:var(--amber-d) !important; background:var(--amber-tint) !important; }
.chat-foot input{ border-radius:var(--r-full) !important; font-family:var(--f-body) !important; }
.chat-foot .send{ border-radius:var(--r-full) !important; background:var(--amber) !important; color:var(--btn-ink) !important; }
.chat-foot .send:hover{ filter:brightness(1.06); background:var(--amber) !important; }
.chat-disc{ font-family:var(--f-mono) !important; }

/* FAB — rundes Archivporträt, Amber-Ring, sanftes Wippen */
.chat-fab{ width:auto !important; flex-direction:column !important; }
.chat-fab .gd-fig{
  width:64px !important; height:64px !important; border-radius:50% !important;
  background:var(--pergament-3) !important; border:2.5px solid var(--amber) !important;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45),0 0 0 5px var(--amber-tint) !important;
  object-fit:cover; object-position:50% 20%; filter:grayscale(.15) contrast(1.04) !important;
  padding:0 !important; animation:dsBob 3.6s ease-in-out infinite !important;
}
.chat-fab:hover .gd-fig{ filter:grayscale(0) contrast(1.05) !important; box-shadow:0 18px 36px -12px rgba(0,0,0,.5),0 0 0 7px var(--amber-tint) !important; }
.chat-fab .gd-q{ background:var(--amber) !important; color:var(--btn-ink) !important;
  border-radius:50% 50% 50% 5px !important; box-shadow:0 4px 12px -4px var(--amber); }
.chat-fab .gd-pill{ background:var(--ink) !important; color:var(--pergament) !important;
  border-radius:var(--r-full) !important; font-family:var(--f-ui) !important; font-weight:700 !important; }
html[data-theme="dark"] .chat-fab .gd-pill{ background:var(--amber) !important; color:#241a0e !important; }

/* Sprechblase + seitlicher Reiter */
.guide-bubble{ border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
  background:var(--pergament-3) !important; color:var(--ink) !important; font-family:var(--f-body) !important;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.4) !important; }
.guide-bubble b{ color:var(--amber-d) !important; }
.guide-tab{ border-radius:var(--r-full) 0 0 var(--r-full) !important; background:var(--amber) !important; color:var(--btn-ink) !important; font-family:var(--f-ui) !important; font-weight:700 !important; }

@keyframes dsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.chat-fab .gd-fig{animation:none !important;}}

/* Bot-Avatar (SVG) statt Archivfoto — animiert, „cool" */
.chat-fab svg.gd-fig{ filter:none !important; padding:0 !important; background:transparent !important; }
.chat-hd .gd-head-av svg.botava{ width:100% !important; height:100% !important; display:block; }
.botava{ display:block; width:100%; height:100%; overflow:visible; }
.botava .bot-head,.botava .bot-eyes,.botava .bot-ant{ transform-box:fill-box; }
@media(prefers-reduced-motion:no-preference){
  .chat-hd .botava{ animation:botFloat 3.6s ease-in-out infinite; transform-origin:50% 60%; }
  .botava .bot-eyes{ animation:botBlink 4.2s ease-in-out infinite; transform-origin:50% 50%; }
  .botava .bot-ant{ animation:botAnt 1.9s ease-in-out infinite; transform-origin:50% 50%; }
}
@keyframes botFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-1.5deg)}}
@keyframes botBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes botAnt{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.7}}

/* -----------------------------------------------------------------
   8. AVATARE — immer kreisförmig, immer farbiger Ring (2–3px),
   geometrisch/Verlauf statt kindlichem Cartoon-Gesicht.
   ----------------------------------------------------------------- */
.profile-chip .av,.sb-prof .pav,.drawer-hd .av-anim,
.login .av-pick .av-anim,.uav,.wall-card .uav,.member .uav{
  border-radius:50% !important; overflow:hidden;
}
.profile-chip .av,.uav img,.uav svg{ filter:none !important; }   /* kein Sepia-Schleier mehr */
.drawer-hd .av-anim,.login .av-pick .av-anim{ border:3px solid var(--amber) !important; box-shadow:0 0 0 4px var(--amber-tint); }
.av-anim svg,.av-anim img,.pav svg,.pav img{ filter:none !important; }

/* -----------------------------------------------------------------
   9. EINGABEFELDER — einheitlich, abgerundet, Fokus = Amber
   ----------------------------------------------------------------- */
input:focus,textarea:focus,.inp:focus,.chat-foot input:focus,.search-box input:focus{
  outline:none; border-color:var(--amber) !important;
  box-shadow:0 0 0 3px var(--amber-tint) !important;
}

/* -----------------------------------------------------------------
   10. ICON-SYSTEM — bunte, sanft animierte Mini-Icons (wie auf der
   Startseite). Ersetzen die alten Unicode-Symbole für Cursor, Theme,
   Profil & Geschlecht. „Bewegen sich leicht."
   ----------------------------------------------------------------- */
.sb-item .ic svg{ transition:transform .25s var(--ease,cubic-bezier(.16,1,.3,1)); }
.sb-item:hover .ic svg{ transform:translateY(-2px) scale(1.06); }

.dsico{ width:1em; height:1em; display:inline-block; overflow:visible; vertical-align:-.16em; }
.dsico g,.dsico circle,.dsico path{ transform-box:fill-box; }
@media (prefers-reduced-motion:no-preference){
  .dsico .bob{ animation:dsicoBob 3.2s ease-in-out infinite; transform-origin:50% 60%; }
  .dsico .twk{ animation:dsicoTwk 2.6s ease-in-out infinite; transform-origin:50% 50%; }
  .dsico .spin{ animation:dsicoSpin 14s linear infinite; transform-origin:50% 50%; }
  .dsico .pulse{ animation:dsicoPulse 2.6s ease-in-out infinite; transform-origin:50% 50%; }
}
@keyframes dsicoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
@keyframes dsicoTwk{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.14) rotate(18deg);opacity:.9}}
@keyframes dsicoSpin{to{transform:rotate(360deg)}}
@keyframes dsicoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.66}}

/* sizing inside the pickers */
.popmenu .pm-opt .k{ background:var(--pergament-2) !important; }
.popmenu .pm-opt .k .dsico{ width:20px; height:20px; }
.gender-pill .gi{ display:inline-flex; align-items:center; justify-content:center; }
.gender-pill .gi .dsico{ width:23px; height:23px; }

/* sidebar section icons → colourful cute icons (override the old mono stroke) */
.sidebar .sb-item .ic{ width:30px !important; height:30px !important; }
.sidebar .sb-item .ic svg.dsico{ width:28px !important; height:28px !important; stroke:none; fill:none; overflow:visible; }
.sidebar .sb-item:hover .ic svg.dsico{ transform:none; }

/* top-bar theme/cursor buttons carry the coloured icon → keep it visible
   on hover (no amber wash that would swallow the colours) */
.util-btn.dsico-btn .dsico{ width:24px; height:24px; }
.util-btn.dsico-btn:hover{ background:var(--pergament-3) !important; color:var(--ink) !important;
  border-color:var(--amber) !important; transform:translateY(-2px); box-shadow:0 10px 22px -12px var(--amber); }
.nav-light:not(.solid) .util-btn.dsico-btn{ background:rgba(255,255,255,.16) !important; }
.nav-light:not(.solid) .util-btn.dsico-btn:hover{ background:rgba(255,255,255,.26) !important; border-color:#fff !important; }
html[data-theme="dark"] .util-btn.dsico-btn:hover{ background:var(--pergament-3) !important; border-color:var(--amber) !important; }

/* =================================================================
   11–12. EINHEITLICHES TYPO-SYSTEM
   Anton = große, plakative Headlines · Source Sans 3 = alles andere
   (Fließtext + kleine Überschriften, fett) · Courier Prime = Zitate.
   Feste Stufen pro Rolle — nur Hero/Kapitel dürfen größer sein.
   ================================================================= */

/* --- DISPLAY-TIER: Anton (plakativ). Hero · Kapitel · Sektionstitel --- */
h1,h2,.display,.d-xl,.d-lg,.d-md,.h2-it,.hero-big,
.chap-hd h2,.intro h2,.page-hd h1,.map-title h1,.onb-title,
.yearnum,.tl2-yr,.brand .l1,.brand .l2{
  font-family:var(--f-display) !important;
  font-weight:400 !important; font-style:normal !important;
  letter-spacing:.005em !important; line-height:1.16 !important;
}
/* feste Display-Stufen */
.hero-big{ font-size:clamp(54px,11vw,132px) !important; line-height:1.06 !important; }
.chap-hd h2{ font-size:clamp(46px,9vw,104px) !important; line-height:1.1 !important; }
.d-xl{ font-size:clamp(52px,10vw,120px) !important; }
.display.d-md,.d-md,section .center h2.display{
  font-size:clamp(34px,5.2vw,62px) !important; line-height:1.16 !important; }
.intro h2{ font-size:clamp(32px,4.6vw,56px) !important; line-height:1.18 !important; }
.onb-title{ line-height:1.16 !important; }
.intro h2 em{ font-style:normal !important; color:var(--amber-d); }
html[data-theme="dark"] .intro h2 em{ color:var(--amber-l); }

/* --- SUBHEAD-TIER: Source Sans 3 (fett). Karten · Szenen · Fakten --- */
h3,h4,
.scene-body h3,.step h3,.group-card h3,.compare h3.display,.sec h3.display,
.game-win h3,#footModalTitle,.fact h4,.gloss-card h4,.material-title,
.tip-card h4,.hub-card h4,.cn-card .cn-title,.inne-k,.teach-cat .tc-t,
.lehrplan-title,.pp-q,.tl2-card b,.decision .dq,.wall-card .wq,.rail-place{
  font-family:var(--f-head) !important; font-style:normal !important;
}
/* H3-Rolle — eine Größe */
.scene-body h3,.step h3,.group-card h3,.compare h3.display,
.sec h3.display,.game-win h3,#footModalTitle,.decision .dq{
  font-size:clamp(22px,2.3vw,29px) !important;
  font-weight:900 !important; line-height:1.18 !important; letter-spacing:-.01em !important;
}
/* H4-Rolle — eine Größe, klar über dem Fließtext */
.fact h4,.gloss-card h4,.material-title,.tip-card h4,.hub-card h4,
.cn-card .cn-title,.inne-k,.teach-cat .tc-t,.lehrplan-title,.pp-q,
.tl2-card b,.wall-card .wq{
  font-size:clamp(17px,1.5vw,19px) !important;
  font-weight:700 !important; line-height:1.3 !important; letter-spacing:0 !important;
}

/* FLIESSTEXT: ausnahmslos Source Sans 3, eine Größe (auch Spiel-Intros) */
.body-l,.tx,.step .tx,.scene-body p,.fact p,.gloss-card p,.game-intro,
.dctx,.dsub,.dreveal p,.cn-card p,.hub-card p,.group-card p,.material-desc,
.compare .doc .dx,.recap p,.inne-q,.onb-body p,.compare-note{
  font-family:var(--f-body) !important; font-style:normal !important;
  font-size:clamp(16px,1.1vw,18px) !important; line-height:1.7 !important;
}
.lede{ font-family:var(--f-body) !important; font-style:normal !important;
  font-size:clamp(18px,1.7vw,21px) !important; line-height:1.55 !important; }
/* erklärter Begriff inline: Fließtextgröße, nur Farbe/Fettung als Betonung */
.gl{ font-size:inherit !important; font-family:inherit !important; }

/* KICKER / RUBRIK — Source Sans 3, fett, gesperrt, eine Größe */
.kicker{ font-family:var(--f-ui) !important; font-weight:700 !important;
  font-size:12px !important; letter-spacing:.22em !important; }

/* EYEBROWS / LABELS — EINE Familie (Source Sans 3), eine Größe, eine Sperrung.
   Courier bleibt ausschließlich Zitaten + Quellen vorbehalten. Farbe je Rolle. */
.chap-hd .range,.scene-body .syr,.step .syr,.fact .fl,.compare .tagln,
.decision .dk,.recap .recap-l,.tl2-tag,.gc-cat,.gloss-card .gc-cat,
.lm-label,.dreveal .rl,.tf-meta,.q-meta{
  font-family:var(--f-ui) !important; font-weight:700 !important;
  font-size:12px !important; letter-spacing:.14em !important; line-height:1.4 !important;
  text-transform:uppercase !important;
}

/* KEIN BLOCKSATZ — Lesetext immer linksbündig, großzügige Zeilen */
body,p,li,.body-l,.tx,.step .tx,.scene-body p,.fact p,.gloss-card p,
.dctx,.dsub,.dreveal p,.cn-card p,.hub-card p,.group-card p,.recap p,
.compare .doc .dx,.inne-q,.onb-body p,.lede,.compare-note{ text-align:left !important; hyphens:manual !important; }
/* gleichmäßiger Absatzabstand in Langtext-Blöcken */
.scene-body p + p,.dreveal p + p,.onb-body p + p,.gloss-card p + p{ margin-top:1.15em !important; }

/* ZITATE: Courier Prime kursiv, zwei Rollen */
.auth-q,.mission-q,.compare .mem q,blockquote.auth-q,blockquote.mission-q,
.scene-body .auth-q,.intro .mission-q,.quote{
  font-family:var(--f-quote) !important; font-style:italic !important;
  font-size:clamp(16px,1.3vw,18px) !important; line-height:1.7 !important;
}
.kq{
  font-family:var(--f-quote) !important; font-style:italic !important;
  font-size:clamp(20px,2.2vw,26px) !important; line-height:1.4 !important;
}
/* Quellenzeile/Belege — einheitlich klein, Courier aufrecht */
.auth-q cite,.mission-q cite,.docref,.src-badge{ font-family:var(--f-mono) !important; font-style:normal !important; }

/* =================================================================
   13. CHATBOT-PORTRÄT — echtes Archivfoto auf hellem Ring
   ================================================================= */
.chat-fab img.gd-fig{ object-fit:cover; object-position:50% 20%; background:var(--pergament-3) !important; }
.chat-fab .gd-pill{ box-shadow:0 6px 16px -8px rgba(0,0,0,.4); }

/* =================================================================
   14. UTIL-BUTTONS (Theme + Cursor) — zusammenhängende DS-Steuergruppe
   ================================================================= */
.nav .util{ gap:10px; padding:0; border-radius:0; background:transparent !important; border:none !important; backdrop-filter:none; }
html[data-theme="dark"] .nav .util{ background:transparent !important; border:none !important; }
.nav-light:not(.solid) .nav .util{ background:transparent !important; border:none !important; }
/* Theme- + Cursor-Buttons: größer und gleiche Rahmung wie der Profil-Chip */
.util-btn{ width:46px !important;height:46px !important;border:1.5px solid var(--line) !important;background:var(--pergament-3) !important;box-shadow:0 6px 16px -12px rgba(0,0,0,.35) !important;color:var(--ink) !important;border-radius:var(--r-full) !important;transition:transform .2s,border-color .2s,background .2s; }
.util-btn.dsico-btn .dsico{ width:26px; height:26px; }
.util-btn:hover{ background:var(--pergament-3) !important;color:var(--ink) !important;border-color:var(--amber) !important;transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--amber) !important; }
html[data-theme="dark"] .util-btn{ background:#161210 !important;border-color:#2A2218 !important;color:var(--ink) !important; }
html[data-theme="dark"] .util-btn:hover{ border-color:var(--amber) !important; }
.nav-light:not(.solid) .util-btn{ background:rgba(255,255,255,.16) !important;color:#fff !important;border:1.5px solid rgba(255,255,255,.45) !important;backdrop-filter:blur(6px); }
.nav-light:not(.solid) .util-btn:hover{ background:rgba(255,255,255,.28) !important;border-color:#fff !important; }
.sb-toggle-m{ border-radius:var(--r-full) !important; }

/* =================================================================
   15. SUBPAGE-BRAND (.mk) — gleiche Wortmarke wie die Hauptseite
   ================================================================= */
.brand .mk{ font-family:var(--f-display) !important; font-weight:700; font-size:16px;
  letter-spacing:.04em; line-height:1; color:var(--amber); text-transform:uppercase; }
.brand .mk .l2{ display:block; font-size:11px; letter-spacing:.14em; color:var(--ink); margin-top:3px; text-transform:uppercase; }
.nav-light:not(.solid) .brand .mk .l2{ color:#fff; }

/* Quick-Nav („Zum Nachschlagen") — Aktiv = Amber, Hover = Blau (DS-konform) */
.quick-nav .active,.quick-nav a.active{ background:var(--amber) !important;color:var(--btn-ink) !important;border-color:var(--amber) !important;box-shadow:0 0 0 3px var(--amber-tint) !important; }
.quick-nav button,.quick-nav a{ font-family:var(--f-ui) !important;border-radius:var(--r-full) !important; }

/* =================================================================
   16. MODAL / LOGIN — durchgängig EIN System
   „Blatt" umrandet + rund · runder ×-Button · Eingabe als runder
   Schlauch in derselben Schrift wie alles andere (Source Sans 3).
   ================================================================= */
.mpanel{ border:1px solid var(--line) !important; border-radius:var(--r-xl) !important; }
.mclose{ border-radius:var(--r-full) !important; border:1px solid var(--line) !important; display:flex; align-items:center; justify-content:center; }

/* ALLE Eingaben in der Marken-Schrift — nie die Browser-Standardschrift */
input,textarea,select,.inp{ font-family:var(--f-body) !important; color:var(--ink); }
input::placeholder,textarea::placeholder{ font-family:var(--f-body) !important; color:var(--ink-soft); opacity:.85; }

/* Login-Namensfeld: voller, runder Schlauch + Abstand zum Text darüber */
#loginModal .login-field{ margin-top:26px !important; }
#loginName{
  width:100% !important; box-sizing:border-box;
  margin:0 !important; padding:16px 24px !important;
  border:1.5px solid var(--line) !important; border-radius:var(--r-full) !important;
  background:var(--pergament-3) !important; color:var(--ink) !important;
  font-family:var(--f-body) !important; font-weight:600 !important; font-size:16px !important;
}
#loginName:focus{ border-color:var(--amber) !important; box-shadow:0 0 0 3px var(--amber-tint) !important; outline:none; }

/* gleichmäßige Abstände im Modal */
.mpanel .field-label{ margin-top:24px !important; margin-bottom:10px !important; }
.mpanel .gender-row{ margin-top:0 !important; }
.mpanel .mt3{ margin-top:28px !important; }

/* =================================================================
   17. ZITATE LESBAR + DROP-CAP EINHEITLICH ENTFERNT
   Zitate immer in kräftigem Ink (nicht Orange), Akzent trägt der
   Rand/das Zeichen. Drop-Cap raus, damit es überall gleich aussieht.
   ================================================================= */
.auth-q,.mission-q,.kq,.quote,.scene-body .auth-q,.scene-body blockquote,
blockquote.auth-q,blockquote.mission-q,.intro .mission-q,.compare .mem q,
.chap-hd .emo{ color:var(--ink) !important; }
html[data-theme="dark"] .auth-q,html[data-theme="dark"] .mission-q,
html[data-theme="dark"] .kq,html[data-theme="dark"] .scene-body .auth-q,
html[data-theme="dark"] .scene-body blockquote,html[data-theme="dark"] .compare .mem q,
html[data-theme="dark"] .chap-hd .emo{ color:var(--ink) !important; }
/* kinetischer Leitsatz: solide lesbar statt Amber-Verlauf */
.kq,.kq.on{ background:none !important; -webkit-text-fill-color:var(--ink) !important; color:var(--ink) !important; }
/* Drop-Cap (war nur im Intro) entfernt → überall gleich */
.intro .body-l:first-of-type::first-letter{
  font-family:inherit !important; font-weight:inherit !important;
  font-size:inherit !important; color:inherit !important; float:none !important; line-height:inherit !important; margin:0 !important; }

/* =================================================================
   18. KAPITEL 01/02/03 — IDENTISCHE TYPO, GRÖSSEN & ORDNUNG
   Kapitel 1 & 3 (Szenen) und Kapitel 2 (Scrollytelling) hatten
   unterschiedliche Fließtext-Zeilenhöhen (1.92 vs 2.0) + Margins.
   Hier mit ID-Spezifität auf EINEN Wert gezwungen.
   ================================================================= */
#vorkrieg .body-l,#vorkrieg .scene-body p,#vorkrieg .scene-body .body-l p,
#nachkrieg .body-l,#nachkrieg .scene-body p,#nachkrieg .scene-body .body-l p,
#kap2scope .step .tx,#kap2scope .step .tx p,#kap2scope .tx p,
.scene-body .body-l,.scene-body .body-l p,.scene-body p,.step .tx p,.tx p{
  line-height:1.8 !important; font-size:clamp(16px,1.1vw,18px) !important;
}
#vorkrieg .scene-body .body-l p,#nachkrieg .scene-body .body-l p,
#kap2scope .step .tx p,.scene-body .body-l p,.step .tx p{ margin-bottom:1.2em !important; }
/* gleiche Überschriften-Abstände in Szenen und Scrolly-Schritten */
.scene-body h3,.step h3{ margin:16px 0 26px !important; }
.scene-body .auth-q,.step .auth-q{ margin:28px 0 !important; }

/* =================================================================
   19. VERGLEICHSFENSTER-TITEL — überall identisch (Anton, eine Größe)
   Höhere Spezifität als .sec h3.display / section .center h2.display
   ================================================================= */
.sec .center h2.compare-head,.sec .center h3.compare-head,.center .compare-head,.compare-head{
  font-family:var(--f-display) !important; font-weight:400 !important;
  font-size:clamp(30px,3.4vw,42px) !important; line-height:1.1 !important;
  letter-spacing:.005em !important; text-transform:none !important; margin-top:10px !important;
}

/* =================================================================
   20. ENTSCHEIDUNG A/B — volle Breite + großzügiger Whitespace
   Vollbreite Bühne (Sidebar-Versatz berücksichtigt), Inhalt zentriert
   in lesbarer Spalte, klare Luft zwischen Frage und Optionen.
   ================================================================= */
.decision{
  border-radius:0 !important;
  padding:clamp(50px,7vh,96px) clamp(28px,6vw,96px) !important;
  margin-top:clamp(48px,7vh,96px) !important; margin-bottom:clamp(48px,7vh,96px) !important;
}
@media(min-width:861px){
  .decision{ width:calc(100vw - var(--sbw,0px)) !important; margin-left:calc(50% - 50vw + (var(--sbw,0px) / 2)) !important; }
}
@media(max-width:860px){
  .decision{ width:100vw !important; margin-left:calc(50% - 50vw) !important; }
}
/* Inhalt in lesbarer, zentrierter Spalte */
.decision > *{ max-width:980px !important; margin-left:auto !important; margin-right:auto !important; }
.decision .dq{ max-width:22ch !important; }
.decision .dctx,.decision .dsub{ max-width:62ch !important; }
/* klare Luft vor den Optionen, damit A/B nicht am Text kleben */
.decision .dsub{ margin-top:18px !important; }
.decision .dopts{ margin-top:clamp(36px,5vh,64px) !important; gap:clamp(16px,2vw,24px) !important; }
.decision .dreveal{ margin-top:clamp(28px,4vh,48px) !important; }

/* =================================================================
   21. KAPITEL-KÖPFE — zentriert + kompakter (vor/während/nach dem Krieg)
   Überschrift und Zitat mittig statt linksbündig, eine Spur kleiner.
   ================================================================= */
.chap-hd{ text-align:center !important; }
.chap-hd .barline{ display:none !important; }
.chap-hd::after{ display:none !important; }
.chap-hd .kicker::before,.chap-hd .kicker::after{ display:none !important; content:none !important; background:none !important; }
.chap-hd .kicker{ display:block; margin-bottom:16px !important; }
.chap-hd h2{ font-size:clamp(34px,5.2vw,62px) !important; line-height:1.12 !important; margin:0 auto !important; }
.chap-hd .range{ text-align:center !important; margin-top:20px !important; margin-left:auto !important; margin-right:auto !important; }
.chap-hd .emo{
  margin:30px auto 0 !important;
  text-align:center !important; max-width:46ch !important;
  font-size:clamp(18px,2vw,25px) !important;
}
/* „Vorher geschah"-Rückblick bleibt links lesbar */
.chap-hd .recap,.chap-hd .recap p{ text-align:left !important; }

/* =================================================================
   22. START / HERO — Wortmarke vertikal UND horizontal mittig
   ================================================================= */
.hero .sth-content{
  top:0 !important; bottom:0 !important;
  display:flex !important; flex-direction:column;
  align-items:center !important; justify-content:center !important;
  text-align:center !important;
}
.hero .hero-eyebrow,.hero .hero-eyebrow.center{ justify-content:center !important; margin-bottom:14px !important; }
.hero .hero-tag{ margin-top:18px !important; max-width:48ch; }

/* =================================================================
   23. ENTSCHEIDUNG — A/B als runde Marke mit klarer Luft zum Text
   (vorher klebten A/B direkt am Optionstext)
   ================================================================= */
.decision .dopt{ display:flex !important; align-items:center; gap:clamp(15px,1.7vw,24px) !important; text-align:left; }
.decision .dopt .ol{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:clamp(42px,3.6vw,54px); height:clamp(42px,3.6vw,54px);
  border-radius:50%; background:rgba(255,255,255,.08);
  border:1.5px solid rgba(237,217,163,.5);
  color:var(--amber-l) !important; font-size:clamp(20px,2vw,26px) !important; line-height:1;
}
.decision .dopt .ot{ margin-top:0 !important; }
.decision .dopt:hover .ol{ background:rgba(212,137,10,.22); border-color:var(--amber); }

/* =================================================================
   24. SPIELE / MITMACHAKTIONEN — XP-Pille auf dem aktiven Tab lesbar
   (war: dunkles Violett auf dunklem Tab → nicht erkennbar)
   ================================================================= */
/* XP-Pille IMMER mit hohem Kontrast: solides Violett, weiße Schrift */
.gtab .xp{ background:var(--xp) !important; color:#FFFFFF !important; border:none !important; font-weight:700 !important; border-radius:var(--r-full) !important; padding:2px 9px !important; }
.gtab.on .xp{ background:#FFFFFF !important; color:#5A2EA6 !important; }
html[data-theme="dark"] .gtab.on .xp{ background:#FFFFFF !important; color:#5A2EA6 !important; }

/* =================================================================
   25. VOLLE BREITE — weniger schmal, mehr Bühne nach links/rechts
   ================================================================= */
:root{ --maxw:1440px; }

/* =================================================================
   26. DARK-MODE — Kontraste nachgezogen (Karte + Archiv + allg.)
   ================================================================= */
/* Karten-Seite: Info-Schiene + Infobox sicher dunkel */
html[data-theme="dark"] .map-rail,
html[data-theme="dark"] .map-shell .map-rail,
html[data-theme="dark"] aside.map-rail{ background:#161210 !important; }
html[data-theme="dark"] .map-canvas{ background:#0B0907 !important; }
html[data-theme="dark"] .rail-text,
html[data-theme="dark"] .rail-now{ color:var(--ink) !important; }
html[data-theme="dark"] .rail-chip{ background:#241C12 !important; color:var(--ink-soft) !important; }
html[data-theme="dark"] .map-title{ background:color-mix(in oklab,#161210 90%,transparent) !important; border-color:#2A2218 !important; }
html[data-theme="dark"] .map-title p{ color:var(--ink-soft) !important; }
/* Archiv-Seite: Werkzeugleiste, Karten, Lightbox dunkel + lesbar */
html[data-theme="dark"] .archive-tools{ background:color-mix(in oklab,#0E0B06 90%,transparent) !important; border-color:#2A2218 !important; }
html[data-theme="dark"] .gitem{ background:#161210 !important; border-color:#2A2218 !important; }
html[data-theme="dark"] .gitem .gcap h3{ color:var(--ink) !important; }
html[data-theme="dark"] .search-box{ background:#161210 !important; border-color:#2A2218 !important; }
html[data-theme="dark"] .search-box input{ color:var(--ink) !important; }
html[data-theme="dark"] .fbtn{ color:var(--ink-soft) !important; border-color:#2A2218 !important; }
html[data-theme="dark"] .lb-panel{ background:#0E0B06 !important; }
html[data-theme="dark"] .lb-info p{ color:var(--ink) !important; }

/* =================================================================
   27. SUBPAGES (Karte/Archiv) — Profil-Chip wie auf der Hauptseite
   ================================================================= */
.nav .util .util-prof{
  width:auto !important; min-height:46px; gap:8px; padding:5px 16px 5px 6px !important;
  border-radius:var(--r-full) !important; display:flex; align-items:center;
  background:var(--pergament-3) !important; border:1.5px solid var(--line) !important;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.35) !important;
  font-family:var(--f-ui) !important; font-weight:700 !important; font-size:14px !important;
  color:var(--ink) !important;
}
.nav .util .util-prof:hover{ border-color:var(--amber) !important; background:var(--pergament-3) !important; transform:translateY(-1px); }
.nav .util .util-prof .pav-mono{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--amber); color:#fff; font-weight:800; font-size:14px; flex:0 0 auto;
}
.nav .util .util-prof .up-lvl{ background:var(--xp) !important; color:var(--xp-ink) !important; font-size:11px; font-weight:700; border-radius:var(--r-full); padding:2px 9px; }
.nav-light:not(.solid) .nav .util .util-prof{ background:rgba(255,255,255,.16) !important; color:#fff !important; border-color:rgba(255,255,255,.4) !important; }

/* =================================================================
   28. SCHWEBENDE UI — kleines „Seiten"-Menü + Chatbot etwas höher
   ================================================================= */
#quickNav.quick-nav,.quick-nav{ bottom:34px !important; }
@media(max-width:860px){ #quickNav.quick-nav,.quick-nav{ bottom:26px !important; } }
.guide{ bottom:28px !important; }
.chat-fab{ bottom:28px !important; }
.chat-panel{ bottom:42px !important; }
.guide-tab{ bottom:120px !important; }
/* Karte: Info-Schiene frei vom höheren Menü halten */
.map-rail{ padding-bottom:104px !important; }

/* =================================================================
   29. FÜR LEHRKRÄFTE (#didaktik) — auf das Designsystem gebracht
   Nur drei Blöcke: Arbeitsblätter · Memoiren-Texte · Klassenraum
   ================================================================= */
#didaktik{ background:var(--pergament) !important; }
html[data-theme="dark"] #didaktik{ background:#0B0907 !important; }
.didaktik-badge{ background:var(--blau) !important; color:#fff !important; font-family:var(--f-ui) !important; border-radius:var(--r-full) !important; }

.teach-block{ margin-top:clamp(54px,8vh,96px) !important; }
.teach-block-hd{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.teach-block-hd .tb-ic{ width:48px; height:48px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--amber-tint); border-radius:var(--r-md); }
.teach-block-hd .tb-ic svg.cute{ width:30px; height:30px; }
.teach-block-hd .kicker{ color:var(--blau) !important; }
html[data-theme="dark"] .teach-block-hd .kicker{ color:var(--blau) !important; }
.tb-title{ font-family:var(--f-display) !important; font-weight:400 !important; letter-spacing:.005em !important;
  font-size:clamp(26px,3vw,40px) !important; line-height:1.1 !important; color:var(--heading) !important; margin-top:2px; }
.tb-lede{ font-family:var(--f-body) !important; font-size:clamp(16px,1.1vw,18px) !important; line-height:1.7 !important;
  color:var(--ink-soft) !important; max-width:66ch; margin:0 0 26px !important; }
html[data-theme="dark"] .tb-lede{ color:var(--ink-soft) !important; }

/* Arbeitsblätter */
.ws-list{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:900px){ .ws-list{ grid-template-columns:1fr; } }
.worksheet-preview{ background:var(--pergament-2) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; padding:clamp(22px,2.4vw,32px) !important; box-shadow:0 24px 50px -40px rgba(20,15,8,.5); }
html[data-theme="dark"] .worksheet-preview{ background:#161210 !important; border-color:#2A2218 !important; }
.worksheet-header{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start;
  border-bottom:2px solid var(--line) !important; padding-bottom:12px; margin-bottom:18px; }
.worksheet-logo .l1{ font-family:var(--f-display) !important; font-weight:400; letter-spacing:.05em; color:var(--ink) !important; }
.worksheet-logo .l2{ font-family:var(--f-ui) !important; font-size:11px; letter-spacing:.16em; color:var(--amber-d) !important; }
html[data-theme="dark"] .worksheet-logo .l1{ color:var(--ink) !important; }
html[data-theme="dark"] .worksheet-logo .l2{ color:var(--amber-l) !important; }
.worksheet-meta{ font-family:var(--f-mono) !important; font-size:11.5px; color:var(--ink-soft) !important; text-align:right; line-height:1.5; }
.worksheet-title{ font-family:var(--f-head) !important; font-weight:900 !important; font-size:clamp(19px,2vw,24px) !important;
  line-height:1.2 !important; color:var(--heading) !important; margin:0 0 6px !important; }
.worksheet-task{ margin-top:18px; }
.worksheet-task-num{ font-family:var(--f-ui) !important; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blau) !important; margin-bottom:6px; }
html[data-theme="dark"] .worksheet-task-num{ color:var(--blau) !important; }
.worksheet-task p{ font-family:var(--f-body) !important; font-size:15.5px !important; line-height:1.65 !important; color:var(--ink) !important; }
.worksheet-task blockquote{ font-family:var(--f-quote) !important; font-style:italic; font-size:15px; line-height:1.6;
  background:var(--amber-tint) !important; border-left:3px solid var(--amber) !important; padding:12px 16px; margin:12px 0; color:var(--ink) !important; border-radius:0 var(--r-sm) var(--r-sm) 0; }
.worksheet-line{ border-bottom:1.5px solid color-mix(in oklab,var(--ink) 28%,transparent) !important; height:26px; margin:8px 0; }
.teach-print-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* Memoiren-Texte */
.memo-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; align-items:start; }
.memo-card{ background:var(--pergament-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 24px 50px -42px rgba(20,15,8,.5); }
html[data-theme="dark"] .memo-card{ background:#161210; border-color:#2A2218; }
.memo-hd{ display:flex; align-items:baseline; gap:12px; }
.memo-yr{ font-family:var(--f-mono); font-weight:700; font-size:13px; color:var(--amber-d); }
html[data-theme="dark"] .memo-yr{ color:var(--amber-l); }
.memo-title{ font-family:var(--f-head); font-weight:700; font-size:17px; line-height:1.3; color:var(--heading); }
.memo-q{ font-family:var(--f-quote) !important; font-style:italic; font-size:15.5px; line-height:1.65; color:var(--ink);
  border-left:3px solid var(--amber); padding-left:16px; margin:4px 0; }
.memo-src{ font-family:var(--f-mono); font-size:11.5px; color:#2f7a52; }
html[data-theme="dark"] .memo-src{ color:#7ad0a0; }
.memo-card .teach-print-bar{ margin-top:6px; }
.memo-card .btn{ font-size:13px !important; padding:9px 16px !important; }

/* Klassenraum-Einblick */
.room-insight{ display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:stretch; }
@media(max-width:820px){ .room-insight{ grid-template-columns:1fr; } }
.ri-preview{ background:var(--pergament-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
html[data-theme="dark"] .ri-preview{ background:#161210; border-color:#2A2218; }
.ri-tag{ font-family:var(--f-ui); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ri-q{ font-family:var(--f-head); font-weight:700; font-size:17px; line-height:1.3; color:var(--heading); margin:8px 0 18px; }
.ri-bar{ margin-bottom:14px; }
.ri-bar-hd{ display:flex; justify-content:space-between; font-family:var(--f-ui); font-size:14px; color:var(--ink); margin-bottom:6px; }
.ri-bar-hd b{ color:var(--amber-d); }
html[data-theme="dark"] .ri-bar-hd b{ color:var(--amber-l); }
.ri-track{ height:14px; background:color-mix(in oklab,var(--blau) 16%,var(--pergament-3)); border-radius:var(--r-full); overflow:hidden; }
html[data-theme="dark"] .ri-track{ background:#241C12; }
.ri-track i{ display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--blau)); border-radius:var(--r-full); }
.ri-members{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--f-ui); font-size:13px; }
.ri-mem-l{ font-weight:700; color:var(--ink); } .ri-mem{ color:var(--ink-soft); font-family:var(--f-mono); font-size:12px; }
.ri-cta{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-content:center;
  background:var(--blau); color:#fff; border-radius:var(--r-lg); padding:28px; }
.ri-cta h4{ font-family:var(--f-head) !important; font-weight:800; font-size:20px; color:#fff !important; }
.ri-cta p{ font-family:var(--f-body); font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.9) !important; }
.ri-cta .btn{ background:var(--amber) !important; color:#241A0E !important; }
.ri-cta .btn.ghost{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.6) !important; }

/* =================================================================
   30. „BEGRIFFE ERKLÄRT" — Kategorie-Farbe + Umrandung + Legende
   orange = Johannes persönlich · blau = geschichtlicher Kontext ·
   rot = Judenverfolgung. Definitionstext in Fließtextgröße.
   ================================================================= */
.fact{ border:1.5px solid var(--line) !important; border-left:5px solid var(--schiefer) !important; border-top:3px solid var(--schiefer) !important; }
.fact .fl{ color:var(--schiefer) !important; }
.fact.pers{ border-left-color:var(--amber) !important; border-top-color:var(--amber) !important; }
.fact.pers .fl{ color:var(--amber-d) !important; }
html[data-theme="dark"] .fact.pers .fl{ color:var(--amber-l) !important; }
.fact.ns{ border-left-color:var(--feldrot) !important; border-top-color:var(--feldrot) !important; }
.fact.ns .fl{ color:var(--feldrot) !important; }
.fact .fl .sq{ display:none !important; }
.fact .fl{ gap:0 !important; }
.fact p{ font-size:clamp(16px,1.1vw,18px) !important; line-height:1.7 !important; }
.fact h4{ font-size:clamp(17px,1.5vw,19px) !important; }

/* Farb-Legende — klein, aber gut lesbar, direkt unter dem Abhak-Hinweis */
.term-legend{ display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:14px; }
.term-legend .tl-i{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-ui); font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.term-legend .tl-dot{ width:13px; height:13px; border-radius:4px; flex:0 0 auto; border:2px solid; }
.term-legend .tl-p .tl-dot{ border-color:var(--amber); background:color-mix(in oklab,var(--amber) 24%,transparent); }
.term-legend .tl-k .tl-dot{ border-color:var(--schiefer); background:color-mix(in oklab,var(--schiefer) 24%,transparent); }
.term-legend .tl-j .tl-dot{ border-color:var(--feldrot); background:color-mix(in oklab,var(--feldrot) 24%,transparent); }

/* =================================================================
   31. PROFIL-ABZEICHEN — animierte Mini-Icons (statt Emoji)
   ================================================================= */
.badge .ic .badge-ic{ width:26px; height:26px; display:block; }
.badge.has .ic .badge-ic{ color:#fff; }
.badge .ic .badge-ic.lock{ color:var(--ink-soft); opacity:.7; }
@media(prefers-reduced-motion:no-preference){
  .badge.has:hover .ic .badge-ic{ animation:badgePop .55s var(--ease); }
}
@keyframes badgePop{ 0%{transform:scale(1) rotate(0)} 40%{transform:scale(1.18) rotate(-6deg)} 100%{transform:scale(1) rotate(0)} }

/* =================================================================
   32. SUBPAGE-ÜBERSCHRIFTEN — gleiche Höhe auf allen Unterseiten
   ================================================================= */
:root{ --sub-head-top:clamp(76px,9vh,96px); }
.page-hd{ padding-top:var(--sub-head-top) !important; }

/* =================================================================
   33. SUBPAGE LEBENSLINIE (marquee) + FOOTER — unten über dem Footer
   ================================================================= */
.sub-marquee{ position:relative; z-index:2; }
.sub-footer{ position:relative; z-index:2; background:#172238; color:#C8CEDA; padding:64px 0 40px; }
.sub-foot-in{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.sub-foot-brand .display{ font-size:clamp(28px,4.4vw,50px); line-height:.92; }
.sub-foot-brand .sf-amber{ color:var(--amber-l); }
.sub-foot-brand .sf-cream{ color:#f3ece1; }
.sub-foot-brand .docref{ color:#b3a890; margin-top:18px; }
.sub-foot-nav{ display:flex; flex-direction:column; gap:11px; font-family:var(--f-ui); font-size:14px; }
.sub-foot-nav a{ color:#cfc4b2; text-decoration:none; transition:color .2s; }
.sub-foot-nav a:hover{ color:var(--amber-l); }
.sub-foot-base{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.sub-foot-base span{ color:#8c8170; }
.sub-foot-base .sf-made{ color:#b3a890; font-style:italic; font-family:var(--f-quote); }
/* the map app is full-height; footer + life-line scroll in beneath it */
.map-shell + .sub-marquee{ margin-top:0; }

/* =================================================================
   34. MITMACHAKTIONEN — „Spielend erinnern" bleibt Seitentitel-Größe.
   „Zusammen erinnern" (Klassenraum) trägt die compare-head-Klasse und
   teilt damit bewusst EINE Größe mit den Feature-Überschriften
   „Erinnerung gegen Dokument", „Was hättest du getan?" und
   „Halte einen Moment inne" (siehe §19) — konsequente Designsystem-
   Anwendung, keine Sonderfälle.
   ================================================================= */
#spiele .center h2{
  font-family:var(--f-display) !important;
  font-weight:900 !important;
  font-size:clamp(34px,5.2vw,62px) !important;
  line-height:1.12 !important;
  letter-spacing:.004em !important;
  text-transform:none !important;
}

/* =================================================================
   35. GLEICHE ÜBERSCHRIFTEN-HÖHE BEIM DURCHKLICKEN
   „Vor dem Krieg", „Während des Krieges", „Nach dem Krieg",
   „Zeitleiste" und „Über Johannes" sollen ihre Überschrift exakt auf
   derselben Höhe zeigen. Jede Einstiegs-Ansicht scrollt nach oben; wir
   normalisieren den oberen Abstand so, dass die Titel-Oberkante überall
   identisch (≈158px in der Sektion) landet — kein sichtbarer Versatz.
   Die kleinen Deltas gleichen die unterschiedlichen Eyebrow-/Margin-
   Stapel der jeweiligen Layouts aus.
   ================================================================= */
:root{ --view-head-pad: clamp(120px,16vh,180px); }

/* Kapitel 01/03 + Kapitel 03/03: liegen in einer .sec — deren Polster
   nullen, das Polster trägt die innere .chap-hd */
#vorkrieg, #nachkrieg{ padding-top:0 !important; }
#vorkrieg > .chap-hd, #nachkrieg > .chap-hd{
  padding-top: var(--view-head-pad) !important; min-height:0 !important;
}
/* Kapitel 02/03: ist selbst die .chap-hd */
#kapitel.chap-hd{ padding-top: var(--view-head-pad) !important; }

/* Zeitleiste: zentrierter Kopf ohne Barline (mt2 am Titel → -13px) */
#zeitleiste{ padding-top:0 !important; }
#zeitleiste > .wrap:first-child{
  padding-top: calc(var(--view-head-pad) - 13px) !important;
}

/* Über Johannes: zweispaltiges Intro oben ausrichten, damit die
   Überschrift nicht mittig schwebt; Scroll-Landung auf gleiche Höhe */
#ueber{ padding-top: calc(var(--view-head-pad) - 9px) !important; scroll-margin-top:14px !important; }
#ueber .intro{ align-items:start !important; }

/* =================================================================
   35b. VERGANGENHEIT → GEGENWART  („Von damals zu heute“ im #ueber)
   ================================================================= */
.now-wrap{ margin-top: clamp(56px,8vw,104px); }
.now-wrap::before{
  content:""; display:block; height:1px; background:var(--line);
  margin-bottom: clamp(44px,6vw,80px);
}
.now-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap: clamp(30px,6vw,84px); align-items:center;
}
/* now-heading: exakt wie .intro h2 — dieselbe Schrift, Farbe, Animation,
   indem wir denselben .intro-h2-Selektor erben lassen (display zurück auf block) */
.now-intro{ display:block !important; }

.why-block{
  margin-top: clamp(26px,3vw,38px);
  padding: clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
  background:var(--pergament-2,#F1E7CF);
  border-left:4px solid var(--amber);
}
html[data-theme="dark"] .why-block{ background:rgba(255,255,255,.045); }
.why-block .kicker{ color:var(--amber); }

.now-portrait{ position:relative; }
.now-portrait .ph-now{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--pergament-3);
  box-shadow:0 18px 50px rgba(0,0,0,.16);
}
.now-portrait .ph-now img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  display:block; border:none;
  /* heute = Farbe: bewusster Kontrast zum sepiafarbenen Jugendbild */
}
.now-portrait .tag{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--ink-panel); color:var(--on-ink);
  font-family:var(--f-mono); font-size:12px; padding:9px 14px;
}
.now-portrait .yr-now{
  position:absolute; top:-22px; left:-6px; z-index:3;
  font-size:clamp(52px,6.5vw,104px); text-transform:lowercase;
}

@media(max-width:880px){
  .now-grid{ grid-template-columns:1fr; }
  .now-portrait{ order:-1; max-width:420px; }
  .now-portrait .yr-now{ left:auto; right:-4px; }
}

/* =================================================================
   36. SUBPAGE-PROFIL (Karte/Archiv) — identische Profil-Chip-Optik wie
   auf der Hauptseite. Dort liefert die Avatar-Engine ein Bild; auf den
   Unterseiten (ohne Engine) zeigen wir ein Monogramm im selben Chip.
   ================================================================= */
.profile-chip .av.av-mono{
  display:flex !important; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--amber),var(--amber-l)); color:#fff;
  font-family:var(--f-display); font-weight:800; font-size:18px; line-height:1;
}
html[data-theme="dark"] .profile-chip .av.av-mono{ color:#1A120A; }
#utilProf .pc-name{ white-space:nowrap; }
/* rendered avatar (Männchen) fills the chip circle, identical to the main site */
.profile-chip .av.av-fig{ overflow:hidden; padding:0; background:var(--pergament-3); display:block; }
.profile-chip .av.av-fig svg{ width:100%; height:100%; display:block; }

/* =================================================================
   37. FEEDBACK-RUNDE (Juni 2026) — Lebensabschnitte, Legende,
   Entscheidungspfade, Dark-Mode-Kontraste, Originalzitat, Chatbot
   ================================================================= */

/* --- 37.1 Farb-Legende deutlich besser ausgeschildert ---------------- */
.term-legend{
  align-items:center; gap:9px 16px; padding:11px 16px; margin-top:18px;
  border-radius:14px; background:color-mix(in oklab,var(--amber) 7%,var(--pergament-2));
  border:1px solid var(--line); box-shadow:var(--shadow-soft,0 8px 22px -16px rgba(20,15,8,.5));
}
.term-legend::before{
  content:"Legende"; font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  padding-right:14px; margin-right:2px; border-right:1px solid var(--line);
}
.term-legend .tl-i{ font-family:var(--f-ui); font-size:13.5px; font-weight:700; color:var(--ink); }
.term-legend .tl-dot{ width:15px; height:15px; border-radius:5px; border:0; box-shadow:0 1px 3px rgba(0,0,0,.22); }
.term-legend .tl-p .tl-dot{ background:var(--amber); }
.term-legend .tl-k .tl-dot{ background:var(--blau); }
.term-legend .tl-j .tl-dot{ background:var(--feldrot); }
html[data-theme="dark"] .term-legend{ background:color-mix(in oklab,var(--amber) 12%,#161210); border-color:rgba(240,232,213,.16); }
html[data-theme="dark"] .term-legend .tl-i{ color:var(--ink); }
@media(max-width:560px){ .term-legend::before{ flex-basis:100%; border-right:0; padding-right:0; } }

/* --- 37.2 „Erinnerung gegen Dokument" → mehr Luft vor dem Pfad ------- */
.compare-note{ margin-bottom:clamp(36px,6vh,76px) !important; }

/* --- 37.3 Entscheidungspfad: ruhigere Typo, linksbündig, volle Breite - */
.decision{ text-align:left !important; width:100%; }
.decision .dk{ display:block; margin-bottom:4px; }
.decision .dq{
  font-weight:800 !important; max-width:34ch; margin:14px 0 8px !important;
  letter-spacing:-.01em !important; line-height:1.06 !important;
}
.decision .dsub{ font-family:var(--f-body) !important; color:#cdc2b0 !important; max-width:62ch; margin:0 0 4px; }
.decision .dctx{ max-width:62ch; }
.dopts{ grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
@media(max-width:680px){ .dopts{ grid-template-columns:1fr; } .decision .dq{ max-width:none; } }
.dopt{ text-align:left; }
.dopt .ol{ font-size:20px !important; }
.dopt .ot{ font-family:var(--f-ui) !important; }
/* reveal: calm hierarchy — eyebrow · headline · text · one highlighted fact */
.dreveal{ max-width:none; }
.dreveal h4{ font-weight:800 !important; font-size:clamp(20px,2.4vw,26px) !important; margin:8px 0 10px !important; }
.dreveal .big-fact{ font-size:clamp(19px,2.3vw,24px) !important; line-height:1.18 !important; margin:14px 0 6px !important; }
.dreveal .stat{ font-size:12.5px !important; color:#b3a896 !important; }

/* --- 37.4 Dark-Mode: „Dokument"-Seite wieder klar lesbar ------------- */
html[data-theme="dark"] .compare .doc{
  background:linear-gradient(155deg,#2B5489 0%,#1E3656 120%) !important; color:#F2F6FF !important;
}
html[data-theme="dark"] .compare .doc .tagln{ color:#EAF1FB !important; }
html[data-theme="dark"] .compare .doc .dx{ color:#EAF1FB !important; }
html[data-theme="dark"] .compare .doc .docref{ color:rgba(238,244,255,.82) !important; }
html[data-theme="dark"] .compare .mem .docref{ color:var(--ink-soft) !important; }
html[data-theme="dark"] .compare{ border-color:rgba(240,232,213,.14) !important; }

/* --- 37.5 Dark/Light: stärkerer Kontrast-Unterschied ----------------- */
html[data-theme="dark"]{
  --ink:#FCF7EC; --ink-soft:#D2C2A1; --heading:#FFFFFF;
}
html[data-theme="dark"] body{ color:var(--ink); }
html[data-theme="light"]{ --ink:#160F08; --heading:#160F08; }
/* light cards lift a touch brighter off the warm page → mehr Trennung */
html[data-theme="light"] .compare,html[data-theme="light"] .gloss-card,
html[data-theme="light"] .hub-card,html[data-theme="light"] .fact{ background-color:#FFFDF8; }

/* --- 37.6 „Originalzitat" direkt neben Name & Quelle ----------------- */
.auth-q cite .orig-tag{
  display:inline-block; font-family:var(--f-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#2f7a52;
  border:1px solid currentColor; border-radius:30px; padding:1px 8px; margin-right:9px;
  vertical-align:baseline; line-height:1.5;
}
.auth-q cite .orig-tag::before{ content:"✓ "; }
html[data-theme="dark"] .auth-q cite .orig-tag{ color:#6fd39b; }
.auth-q cite{ display:block; }

/* --- 37.7 Chatbot & Avatar: moderner + lebendiger -------------------- */
.chat-panel{ border-radius:22px !important; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.55), 0 4px 14px -6px rgba(0,0,0,.3) !important; }
html[data-theme="dark"] .chat-panel{ border-color:rgba(240,232,213,.14); }
.chat-hd{ align-items:center; }
.chat-hd .gd-head-av{ box-shadow:0 0 0 3px color-mix(in oklab,var(--amber) 45%,transparent); }
/* live „Online"-Punkt im Header-Status */
.chat-hd .st{ display:inline-flex; align-items:center; }
.chat-hd .st::before{ content:""; width:7px; height:7px; border-radius:50%; background:#46d27f;
  margin-right:7px; flex:0 0 auto; }
@media(prefers-reduced-motion:no-preference){
  .chat-hd .st::before{ animation:esmOnline 2.2s ease-out infinite; }
  .chat-hd .gd-head-av svg{ animation:esmAvaBreathe 5.4s ease-in-out infinite; transform-origin:50% 62%; }
  .chat-fab .gd-pill{ animation:esmPillGlow 3.6s ease-in-out infinite; }
}
@keyframes esmOnline{ 0%{box-shadow:0 0 0 0 rgba(70,210,127,.6)} 70%{box-shadow:0 0 0 7px rgba(70,210,127,0)} 100%{box-shadow:0 0 0 0 rgba(70,210,127,0)} }
@keyframes esmAvaBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes esmPillGlow{ 0%,100%{box-shadow:0 8px 18px -8px rgba(0,0,0,.5)} 50%{box-shadow:0 8px 22px -6px color-mix(in oklab,var(--amber) 60%,transparent)} }
/* modern ring on the profile-chip avatar (calm, no idle motion in the nav) */
.profile-chip .av.av-fig{ box-shadow:0 0 0 2px color-mix(in oklab,var(--amber) 55%,transparent); }
/* chat bubbles a touch rounder/softer = moderner */
.msg{ border-radius:16px; }
.msg.j{ border-bottom-left-radius:5px; }
.msg.u{ border-bottom-right-radius:5px; }
.chat-sugg button{ border-radius:30px; }
.chat-foot input{ border-radius:30px; }
.chat-foot .send{ border-radius:50%; }

/* =================================================================
   §38 — IDENTISCHE PLATZIERUNG „Erinnerung gegen Dokument" +
   „Was hättest du getan?" auf ALLEN Kapitelseiten (vor/während/nach).
   EIN Rhythmus, egal ob inline (Kapitel 01/03) oder eigene .sec (Kapitel 02).
   ================================================================= */
:root{ --feat-gap:clamp(60px,9.5vh,112px); --feat-hd-gap:clamp(22px,3vh,32px); }
.cmp-feat{ margin-top:var(--feat-gap) !important; }
.cmp-hd{ margin-bottom:var(--feat-hd-gap) !important; }
.cmp-hd + .compare{ margin-top:0 !important; }
.compare-note{ margin-bottom:0 !important; }          /* Abstand trägt allein der nächste Kopf */
.dec-hd{ margin-top:var(--feat-gap) !important; margin-bottom:var(--feat-hd-gap) !important; }
.dec-hd + .decision{ margin-top:0 !important; }
/* Kapitel 02 liegt in eigenen .sec → Sektionspolster auf denselben Rhythmus normalisieren */
section.sec[data-screen-label="Vergleichsfenster"]{ padding:var(--feat-gap) 0 0 !important; }
section.sec[data-screen-label="Vergleichsfenster"] .cmp-hd{ margin-top:0 !important; }
section.sec[data-screen-label="Entscheidungen"]{ padding:var(--feat-gap) 0 clamp(80px,11vh,140px) !important; }
section.sec[data-screen-label="Entscheidungen"] .dec-hd{ margin-top:0 !important; }

/* =================================================================
   §39 — CHATBOT: „Verkleinern lässt den Bot verschwinden"-Bug +
   viel kleinerer Disclaimer + garantierter Scrollraum für Antworten
   ================================================================= */
/* Ursache des Bugs: die 0,4s-Transition animierte ALLE Eigenschaften
   (auch visibility). Im Ruhezustand blieb das Panel auf dem Start-Frame
   (visibility:hidden / opacity:0) hängen und „verschwand". Jetzt werden
   ausschließlich transform + opacity animiert, und der offene Zustand
   wird hart auf sichtbar gesetzt. */
.chat-panel{ transition:transform .42s var(--ease,cubic-bezier(.16,1,.3,1)), opacity .42s var(--ease,cubic-bezier(.16,1,.3,1)) !important; }
.chat-panel.on{ visibility:visible !important; opacity:1 !important; transform:none !important; }
.chat-panel.on.min{ visibility:visible !important; opacity:1 !important; transform:none !important; height:auto !important; }
.chat-panel.min .chat-hd{ cursor:pointer; }
.chat-panel.min #chatMin{ font-weight:700; }

/* Disclaimer: klein, ruhig, nimmt dem Chatverlauf keinen Platz mehr */
.chat-disc{ font-family:var(--f-ui) !important; font-size:10.5px !important; line-height:1.45 !important;
  color:var(--ink-soft) !important; padding:8px 16px 9px !important; opacity:.8;
  border-top:1px solid var(--line); }
.chat-disc b{ font-weight:700 !important; color:var(--ink-soft) !important; }
/* Verlauf bekommt garantiert die meiste Höhe und scrollt sauber */
.chat-log{ flex:1 1 auto !important; min-height:130px !important; overscroll-behavior:contain; }
.chat-sugg{ padding:8px 14px 6px !important; }
html[data-theme="dark"] .chat-disc{ color:var(--ink-soft) !important; border-top-color:rgba(240,232,213,.14); }

/* =================================================================
   §40 — KONTRASTE: Light- und Dark-Mode deutlicher unterscheiden,
   in beiden Modi konsistent durchgezogen (Karten heben sich klar ab,
   Rahmen sichtbar, Text mit hohem Kontrast).
   ================================================================= */
html[data-theme="light"]{ --line:#D6C7A4; }
html[data-theme="light"] .compare,html[data-theme="light"] .gloss-card,
html[data-theme="light"] .hub-card,html[data-theme="light"] .fact,
html[data-theme="light"] .worksheet-preview,html[data-theme="light"] .memo-card,
html[data-theme="light"] .ri-preview{
  background-color:#FFFFFF !important; box-shadow:0 18px 40px -30px rgba(20,15,8,.5); }
html[data-theme="dark"]{ --line:rgba(240,232,213,.18); }
html[data-theme="dark"] .compare,html[data-theme="dark"] .gloss-card,
html[data-theme="dark"] .hub-card,html[data-theme="dark"] .fact{ background-color:#16110A !important; }
html[data-theme="dark"] .sec.tint{ background:#0B0907 !important; }
html[data-theme="dark"] body,html[data-theme="dark"] .body-l,html[data-theme="dark"] .scene-body p,
html[data-theme="dark"] .tx,html[data-theme="dark"] .tx p,html[data-theme="dark"] li{ color:var(--ink) !important; }
/* „Erinnerung"-Seite (mem) im Dark sicher lesbar (Pendant zu §37.4 für „doc") */
html[data-theme="dark"] .compare .mem{
  background:linear-gradient(155deg,#241A0E 0%,#15110B 90%) !important; }
html[data-theme="dark"] .compare .mem q,html[data-theme="dark"] .compare .mem .tagln{ color:var(--ink) !important; }
/* literale Absicherung — unabhängig von var(--ink): mem-Text immer hell auf Dunkel */
html[data-theme="dark"] .compare .mem q{ color:#FBF3E2 !important; }
html[data-theme="dark"] .compare .mem .tagln{ color:var(--amber-l) !important; }
html[data-theme="dark"] .compare .mem .docref{ color:rgba(251,243,226,.72) !important; }

/* =================================================================
   §41 — ENTSCHEIDUNGS-PFAD: ruhige Typo (kein Schrift-Durcheinander),
   linksbündig, volle Bühnenbreite genutzt. Anton bleibt nur dem
   Sektionstitel; innen klare Source-Sans-Hierarchie + Mono-Labels.
   ================================================================= */
.decision{ text-align:left !important; }
.decision > *{ max-width:1180px !important; }
.decision .dk{ font-family:var(--f-mono) !important; color:var(--amber-l) !important; }
.decision .dq{ font-family:var(--f-head) !important; font-weight:800 !important;
  font-size:clamp(25px,3.1vw,40px) !important; line-height:1.12 !important; letter-spacing:-.012em !important;
  max-width:26ch !important; margin:14px 0 12px !important; color:var(--on-ink) !important; }
.decision .dctx,.decision .dsub{ font-family:var(--f-body) !important; max-width:70ch !important; }
.decision .dsub{ margin-top:14px !important; }
.decision .dopt .ot{ font-family:var(--f-ui) !important; font-weight:600 !important; }
.decision .dreveal .rl{ font-family:var(--f-mono) !important; }
.decision .dreveal h4{ font-family:var(--f-head) !important; font-weight:800 !important; }
.decision .dreveal .big-fact{ font-family:var(--f-head) !important; font-weight:800 !important;
  letter-spacing:-.01em !important; color:var(--amber-l) !important; }
.decision .dreveal .stat{ font-family:var(--f-mono) !important; }

/* =================================================================
   §42 — CHATBOT-REITER „Johannes fragen" im Dark-Mode sichtbar.
   Bug: dunkler BG (#1C1812 aus enhancements) + dunkler Text (var(--btn-ink))
   = unlesbar. Jetzt Amber-Fläche mit dunklem Text (wie die FAB-Pille),
   in beiden Modi klar erkennbar.
   ================================================================= */
html[data-theme="dark"] .guide-tab{
  background:var(--amber) !important; background-color:var(--amber) !important;
  color:#FFFFFF !important; border-color:var(--amber) !important;
  box-shadow:-8px 8px 24px -12px rgba(0,0,0,.7) !important;
}
html[data-theme="dark"] .guide-tab svg{ stroke:#FFFFFF !important; }
html[data-theme="light"] .guide-tab{ background:var(--amber) !important; color:#FFFFFF !important; }
html[data-theme="light"] .guide-tab svg{ stroke:#FFFFFF !important; }

/* =================================================================
   §43 — VERBINDLICHE FARBPALETTE (Abgleich mit der Bachelorarbeit,
   Kap. 4.2 / Abb. 5). shell.css und system.css hatten die drei
   inhaltlichen Farbrollen auf eine grelle Fremdpalette verschoben
   (Amber → #FFA000, Slate Blue → #4A90E0, Feldrot → #B01010/#FF5050).
   Diese Ebene setzt das dokumentierte System wieder in Kraft:

     Amber      #C8811A   Johannes persönlich · Aktionen · aktive Navigation
     Slate Blue #3B5A8C   historischer Kontext · belegte Einordnung · Links
     Feldrot    #B5462F   Faden Verfolgung/Warnung — WARMES Backstein-Rot,
                          ausdrücklich KEIN Signalrot
     Violett    (nur Gamification, siehe §6/§44)

   Für den dunklen Modus werden dieselben Farbtöne (gleiche Hue) nur
   heller/lesbar auf dunklem Grund gesetzt, nie in Neon verschoben.
   ================================================================= */
html[data-theme="light"]{
  --amber:#C8811A !important;      /* Primär — Amber (Thesis) */
  --amber-d:#9A6410 !important;    /* lesbarer Amber-Text auf Pergament (AA) */
  --amber-l:#EDD9A3 !important;    /* helle Amber-Fläche / Text auf Dunkel */
  --amber-hi:#9A6410 !important;
  --gold:#C8811A !important; --gold-l:#EDD9A3 !important;
  --blau:#3B5A8C !important;       /* Sekundär — Slate Blue (Thesis) */
  --blau-d:#2E486F !important;     /* Hover / Text */
  --blau-l:#C8D8EE !important;     /* helle Info-Fläche (Faktbox-Chips) */
  --schiefer:#3B5A8C !important; --schiefer-l:#6E8CB8 !important;
  --link:#2E486F !important;       /* Links lesbar (AA) */
  --feldrot:#B5462F !important;    /* warmes Backstein-Rot (Thesis) */
  --feldrot-ink:#9A3A26 !important;/* lesbarer Feldrot-Text */
  --history:#B5462F !important; --history-ink:#9A3A26 !important;
  --terra:#3B5A8C !important; --terra-ink:#2E486F !important;
  --cyan:#3B5A8C !important; --violet:#3B5A8C !important;
  --btn-ink:#241A0E !important;    /* dunkler Text auf Amber-Button → AA-Kontrast */
  --ok:#1F7A44 !important;         /* einheitliches Erfolgs-/Quellen-Grün */
}
html[data-theme="dark"]{
  --amber:#E3A94A !important;      /* Amber, auf Dunkel angehoben (kein Neon) */
  --amber-d:#E3A94A !important;
  --amber-l:#F0D9A6 !important;    /* pale Amber — Betonungstext auf Dunkel */
  --amber-hi:#F0D9A6 !important;
  --gold:#E3A94A !important; --gold-l:#F0D9A6 !important;
  --blau:#8FB0D9 !important;       /* Slate Blue hell — lesbar auf Dunkel */
  --blau-d:#A9C6EA !important;     /* Hover heller */
  --blau-l:#1D2C46 !important;     /* dunkle Info-Fläche (Chips) */
  --schiefer:#8FB0D9 !important; --schiefer-l:#A9C6EA !important;
  --link:#8FB0D9 !important;
  --feldrot:#DE8168 !important;    /* warmes Rot, auf Dunkel angehoben */
  --feldrot-ink:#E89B84 !important;
  --history:#DE8168 !important; --history-ink:#E89B84 !important;
  --terra:#8FB0D9 !important; --terra-ink:#A9C6EA !important;
  --cyan:#8FB0D9 !important; --violet:#8FB0D9 !important;
  --btn-ink:#241A0E !important;    /* dunkler Text auf Amber-Button */
  --ok:#5FB884 !important;
}
/* Amber/Feldrot-Tints an die korrigierten Farbtöne angleichen */
html[data-theme="light"]{ --amber-tint:rgba(200,129,26,.14) !important; --blau-tint:rgba(59,90,140,.12) !important; --source:#2F7A52 !important; }
html[data-theme="dark"]{ --amber-tint:rgba(227,169,74,.18) !important; --blau-tint:rgba(143,176,217,.18) !important; --source:#7AD0A0 !important; }

/* Primär-Button: dunkler Text auf Amber in BEIDEN Modi (ein Erscheinungsbild,
   AA-lesbar). Ghost-Button bleibt Slate-Outline. */
.btn{ color:var(--btn-ink) !important; }
html[data-theme="light"] .btn.ghost,
html[data-theme="dark"] .btn.ghost{ color:var(--blau) !important; border-color:var(--blau) !important; }

/* Grün hat ZWEI getrennte Bedeutungen — beide je auf EIN Token vereinheitlicht
   (vorher viele leicht abweichende Grüntöne):
     --ok      = „richtig"/erfolgreich (Spiel-Feedback, Fortschritt fertig)
     --source  = „Echte Quelle"/Beleg (Provenienz, Zitat-Herkunft) — der
                 etablierte Beleg-Grünton #2f7a52 / hell #7ad0a0. */
.rcard.answered::after,
.chip.right .yr-badge,.inne-feedback.done,
.learn-meter.lm-complete .lm-num{ color:var(--ok) !important; }
.rail-src,.tf-src,.memo-src,.prov-banner .pic{ color:var(--source) !important; }
.chip.right{ border-color:var(--ok) !important; background:color-mix(in oklab,var(--ok) 12%,transparent) !important; }
.tf-btn.yes{ border-color:var(--ok) !important; color:var(--ok) !important; }
.tf-btn.yes:hover{ background:var(--ok) !important; color:#fff !important; }
.tf-stamp.t{ color:var(--ok) !important; border-color:var(--ok) !important; }
.learn-meter .lm-fill{ background:linear-gradient(90deg,var(--blau),var(--ok)) !important; }
.learn-meter.lm-complete .lm-fill{ background:linear-gradient(90deg,var(--ok),color-mix(in oklab,var(--ok) 70%,#fff)) !important; }

/* =================================================================
   §44 — SPIELE = GAMIFICATION-EBENE → VIOLETT trägt den Akzent
   (Arbeit S. 52 f.: „Violett … ausschließlich in der Gamification-
   Ebene, bei XP-Balken, Abzeichen und Levelanzeigen … ausnahmslos
   Spiel, niemals Geschichte"). Historische INHALTE (Zitate, Fotos,
   Fragetexte) bleiben in ihrer Inhaltsfarbe — nur die Spiel-Chrome
   (Tabs, Punkte, Belohnung, Gewinn, Fortschritt) wird violett.
   Kontrast: Violett-Fläche immer mit weißem Text, Violett-Text nur
   auf hellen/dunklen Neutralflächen mit ausreichendem Kontrast.
   ================================================================= */
/* Rubrik der Spiele-Sektion signalisiert die Spielebene */
#spiele > .wrap > .center .kicker{ color:var(--xp) !important; }
html[data-theme="dark"] #spiele > .wrap > .center .kicker{ color:var(--xp-l) !important; }

/* Reiter: aktiver Tab = Violett-Fläche, erledigter Tab = Violett-Rand */
#spiele .gtab.on{ background:var(--xp) !important; color:#FFFFFF !important; border-color:var(--xp) !important; }
#spiele .gtab.on .gt-ic,#spiele .gtab.on svg{ color:#FFFFFF !important; stroke:#FFFFFF !important; }
#spiele .gtab.done{ border-color:var(--xp) !important; }
#spiele .gtab.rec{ border-color:var(--xp) !important; box-shadow:0 0 0 3px var(--xp-tint) !important; }
#spiele .gtab .fuer-dich{ background:var(--xp) !important; color:#fff !important; }

/* Punktezähler / Spiel-Statistiken → Violett (statt Feldrot/Amber) */
#spiele .mem-stats b{ color:var(--xp) !important; }
html[data-theme="dark"] #spiele .mem-stats b{ color:var(--xp-l) !important; }

/* Memory-Kartenrücken = Spiel-Fläche → Violett; Treffer-Rahmen violett */
#spiele .mback{ background:linear-gradient(150deg,var(--xp),var(--xp-l)) !important; color:#FFFFFF !important; }
#spiele .mcard.matched .mface{ border-color:var(--xp) !important; }

/* Quiz-Nummer = Spiel-Chrome → Violett (Fragetext/Antworten bleiben Inhalt) */
#spiele .qcard .qn{ color:var(--xp) !important; }
html[data-theme="dark"] #spiele .qcard .qn{ color:var(--xp-l) !important; }

/* Gewinn-/Belohnungszustände → Violett-Fläche, weißer Text */
#spiele .game-win .reward{ background:var(--xp) !important; color:#FFFFFF !important; }
#spiele .tf-done .sc{ color:var(--xp) !important; }
html[data-theme="dark"] #spiele .tf-done .sc{ color:var(--xp-l) !important; }

/* Wahr/Falsch: Belohnungs-Endscore violett, aber Antwort-Feedback bleibt
   semantisch grün (richtig) / feldrot (falsch) — nicht violett einfärben. */
#spiele .tf-meta b{ color:var(--xp) !important; }
html[data-theme="dark"] #spiele .tf-meta b{ color:var(--xp-l) !important; }

/* =================================================================
   §45 — ZEITLEISTE — die zwei Spuren exakt auf die Rollenfarben
   (Arbeit S. 51: „Amber für persönliche Ereignisse und Slate Blue
   für historische Ereignisse", Feldrot = Faden Verfolgung).
   Das Band ist eine feste dunkelblaue Fläche in BEIDEN Modi, daher
   feste, aufgehellte Rollentöne (light-on-dark), kein Himmelblau/
   Koralle mehr. Kontrast auf #0f2138–#1c3e63 durchgehend AA+.
   ================================================================= */
/* Persönlich = Amber (aufgehellt für die dunkle Fläche) */
#zeitleiste .zs-legend .lg.p i,
#zeitleiste .zs-dot{ background:#E3A94A !important; }
#zeitleiste .zs-year{ color:#E3A94A !important; }
#zeitleiste .zs-tag{ color:#F0D9A6 !important; border-color:rgba(227,169,74,.45) !important; }
/* Historisch = Slate Blue (hell, klar als Slate erkennbar) */
#zeitleiste .zs-legend .lg.h i,
#zeitleiste .cat-h .zs-dot{ background:#8FB0D9 !important; }
#zeitleiste .cat-h .zs-year{ color:#AEC8EC !important; }
#zeitleiste .cat-h .zs-tag{ color:#AEC8EC !important; border-color:rgba(143,176,217,.45) !important; }
/* Verfolgung = Feldrot (warmes Backstein-Rot, aufgehellt) */
#zeitleiste .zs-legend .lg.v i,
#zeitleiste .cat-v .zs-dot{ background:#DE8168 !important; }
#zeitleiste .cat-v .zs-year{ color:#EDA48E !important; }
#zeitleiste .cat-v .zs-tag{ color:#EDA48E !important; border-color:rgba(222,129,104,.45) !important; }

/* =================================================================
   §46 — KICKER / RUBRIKEN — feste Rollenfarben (Arbeit Abb. 5).
   enhancements.css hatte `.kicker.b` auf --heading (fast Schwarz)
   umgebogen; der blaue Rubrik-Text markiert aber Kontext/historische
   Sektionen und MUSS Slate Blue sein. Rot = Feldrot (Verfolgung/
   Warnung). Default-Kicker bleibt Amber (persönlich/Rubrik).
   Feste Hex-Werte je Modus → garantiert korrekt & AA-lesbar.
   ================================================================= */
.kicker.b{ color:#3B5A8C !important; }
.kicker.r{ color:#9A3A26 !important; }
html[data-theme="light"] .kicker.b{ color:#3B5A8C !important; }
html[data-theme="light"] .kicker.r{ color:#9A3A26 !important; }
html[data-theme="dark"] .kicker.b{ color:#8FB0D9 !important; }
html[data-theme="dark"] .kicker.r{ color:#E89B84 !important; }
/* Default-Kicker (Amber) in beiden Modi lesbar bestätigen */
html[data-theme="light"] .kicker:not(.b):not(.r){ color:var(--amber-d) !important; }
html[data-theme="dark"] .kicker:not(.b):not(.r){ color:var(--amber) !important; }
/* „Für Lehrkräfte"-Rubrik bleibt bewusst Slate (Kontext-Signal) */
.teach-block-hd .kicker{ color:#3B5A8C !important; }
html[data-theme="dark"] .teach-block-hd .kicker{ color:#8FB0D9 !important; }
/* Spiele-Rubrik bleibt Violett (Gamification-Signal, §44) */
#spiele > .wrap > .center .kicker:not(.b):not(.r){ color:var(--xp) !important; }
html[data-theme="dark"] #spiele > .wrap > .center .kicker:not(.b):not(.r){ color:var(--xp-l) !important; }

/* =================================================================
   §47 — GLOSSAR: Kategorie-Chip trägt die Rollenfarbe.
   NS-System · Krieg & Militär · Nachkrieg = Kontext → Slate Blue.
   „Verfolgung" = der Feldrot-Faden (wie Zeitleiste cat-v und
   Faktbox .ns) → Feldrot. So ist die Judenverfolgung überall am
   selben Farbcode erkennbar.
   ================================================================= */
.gloss-card .gc-cat{ color:var(--blau) !important;
  background:color-mix(in oklab,var(--blau) 12%,transparent) !important; }
.gloss-card[data-cat="Verfolgung"] .gc-cat{ color:var(--feldrot-ink) !important;
  background:color-mix(in oklab,var(--feldrot) 14%,transparent) !important; }
.gloss-card[data-cat="Verfolgung"]{ border-left-color:var(--feldrot) !important; }
html[data-theme="dark"] .gloss-card[data-cat="Verfolgung"] .gc-cat{ color:#EDA48E !important; }
/* Standard-Kachel: Rahmen folgt dem Kontext-Chip (Slate Blue), damit
   Rahmen und Kategorie-Chip dieselbe Rolle tragen (war: amber). */
.gloss-card{ border-left-color:var(--blau) !important; }
.gloss-card[data-cat="Verfolgung"]{ border-left-color:var(--feldrot) !important; }

/* =================================================================
   §48 — GRÜN-RESTE auf die zwei Token routen (Vervollständigung §43).
   „Gelernt/abgehakt" = Erfolgszustand → --ok (wie Quiz-richtig).
   „Beleg/Quelle" (orig-tag, src-Badge, Lightbox-Quelle) → --source.
   So gibt es website-weit nur noch genau zwei Grüntöne.
   ================================================================= */
.learn-chk.done{ color:var(--ok) !important;
  background:color-mix(in oklab,var(--ok) 12%,transparent) !important;
  border-color:color-mix(in oklab,var(--ok) 45%,transparent) !important; }
.learn-chk.done .lc-box{ background:var(--ok) !important; border-color:var(--ok) !important; color:#fff !important; }
[data-learn].is-learned{ box-shadow:-3px 0 0 0 var(--ok) !important; }
html[data-theme="dark"] .learn-chk.done{ color:var(--ok) !important;
  background:color-mix(in oklab,var(--ok) 16%,transparent) !important;
  border-color:color-mix(in oklab,var(--ok) 50%,transparent) !important; }
/* Beleg-/Quellen-Grün überall gleich */
.src-badge,.lb-info .src,.auth-q cite .orig-tag{ color:var(--source) !important; border-color:var(--source) !important; }