/* ============================================================
   base.css — strukturelles Base-Stylesheet für ALLE Renderer & Komponenten.
   Konsumiert Theme-Tokens (--bg,--ink,--accent,…) aus tokens.js via Lessons.theme.apply.
   Enthält die A11y-Kerngarantien (Fokus, 44px, reduced-motion, Reflow, sr-only).
   Module dürfen mit eigener style.css ergänzen/überschreiben.
   ============================================================ */

/* ---- Token-Fallbacks (falls Theme noch nicht injiziert) ---- */
:root{
  --bg:#eef2fb; --paper:#fff; --panel:#fff; --soft:#f5f8fd;
  --ink:#1f2433; --muted:#586074; --line:#d8dee9;
  --accent:#2f5fb0; --accent2:#1d3557; --navy:#1d3557;
  --head:#1d3557; --accent-ink:#fff;
  /* --ink-dim ist kein Theme-Token; viele Komponenten nutzen var(--ink-dim,#888)
     → an das (kontrast-getunte) --muted koppeln, statt auf #888 zu fallen. */
  --ink-dim:var(--muted);
  --ok:#1f9d7a; --bad:#c0392b; --warn:#b8860b; --focus:#2f5fb0;
  --k-red:#e21b3c; --k-blue:#1368ce; --k-yellow:#9a6a00; --k-green:#26890c;
  /* Belohnungs-Token-Fallback (s. tokens.js COMMON — dort die kontraktgeprüfte Quelle).
     KOMPLETTE Familie inkl. --reward-btn-ink (Text auf Gold-Füllung, 5.28:1) und
     --reward-ink (Icon-/Rahmenton auf Panels; heller Default = Light-Theme-Fall). */
  --reward:#f5a623; --reward-deep:#7a4a00; --reward-btn-ink:#5a3600; --reward-ink:#7a4a00;
  --reward-glow:rgba(245,166,35,.45); --streak:#ff6a3d; --star-empty:#c9cddb;
  --radius-card:16px; --radius-btn:12px; --radius-pill:999px; --radius-sm:6px;
  --tap:44px; --shadow:0 8px 24px rgba(29,53,87,.12);
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Lato,Helvetica,Arial,sans-serif;
  --font-display:system-ui,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --font-num:"Fredoka",system-ui,"Segoe UI",Roboto,sans-serif;
  --dur:260ms; --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Display-Font "Fredoka" — NUR für Zahlen/Level/Celebration (.num-display),
   NICHT global (Content bleibt system-ui für Lesbarkeit, s. Design-Critique).
   Variable Font (wght 300–700 in einer Datei) — eine @font-face genügt, s. CREDITS.md.
   Pfad relativ zu dieser CSS-Datei: core/base.css → ../assets/fonts/. */
@font-face{
  font-family:"Fredoka";
  src:url("../assets/fonts/fredoka-400.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
.num-display{ font-family:var(--font-num); font-weight:700; }

/* ---- Reset / Basis ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-ui); color:var(--ink); background:var(--bg);
  line-height:1.55; font-size:clamp(15px,1.6vw,17px); overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--font-display); line-height:1.2; }
a{ color:var(--accent); }
img{ max-width:100%; height:auto; }
p{ margin:.5em 0; }

/* ---- Lesbare Zeilenlänge (Beamer/Breitbild): Fließtext-Container bewusst eng
   gehalten, damit Zeilen auf großen Screens nicht über die ganze Breite laufen.
   NUR statische Textcontainer — interaktive/Grid-Container (.board, .path-hub,
   .grid, .lc__opts, .quiz-tiles …) bleiben unangetastet. */
.station__basis p, .lc__q, .lnav__lead{ max-width:70ch; }

/* ---- Leerfeld-Sicherheitsnetz: statische Text-Container ohne Inhalt gefahrlos
   ausblenden. ACHTUNG: NIEMALS auf interaktive Mount-Hosts anwenden (.lab,
   [data-node], [data-station] u. ä.) — die sind vor bind() absichtlich leer und
   würden sonst unsichtbar. .lc__q/.station__basis sind reiner Lesson-Text, der
   synchron mit dem umgebenden Markup gerendert wird (kein späteres bind()-Fill),
   daher hier sicher. */
.lc__q:empty, .station__basis:empty{ display:none; }

/* ---- A11y: sichtbarer Fokus (NIE entfernen), Skip-Link, sr-only ---- */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }
.sr-only{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip{ position:absolute; left:-999px; top:0; z-index:1000; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem; border-radius:0 0 var(--radius-btn) 0; }
.skip:focus{ left:0; }

/* ---- Touch-Ziele ≥44px (bewusste Über-Erfüllung für Kinder/Tablets) ---- */
button,.btn,a.btn,input[type=button],input[type=submit],summary,.chip,.tile,.card{
  min-height:var(--tap);
}
button,.btn{
  font:inherit; cursor:pointer; border:0; border-radius:var(--radius-btn);
  padding:.6rem 1rem; background:var(--soft); color:var(--ink); transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}
.btn.primary,button.primary,.auth-btn{ background:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:transparent; border:1.5px solid var(--line); }
button:hover,.btn:hover{ filter:brightness(1.03); }
button:active,.btn:active{ transform:translateY(1px); }
button:disabled,.btn:disabled{ opacity:.55; cursor:not-allowed; }
input,select,textarea{
  font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line);
  border-radius:var(--radius-btn); padding:.55rem .7rem; min-height:var(--tap);
}
textarea{ min-height:5rem; resize:vertical; }

/* ---- Reduced Motion (WCAG 2.2.2) ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---- Shell / Header / Top-Bar ---- */
.top,.lesson-header{ background:var(--paper); border-bottom:1px solid var(--line); padding:.6rem clamp(.8rem,3vw,1.4rem); }
.top__row,.lesson-header__row{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.top h1,.lesson-header h1{ margin:0; font-size:clamp(1.1rem,3.5vw,1.5rem); color:var(--head); }
.top__nav{ max-width:1100px; margin:.2rem auto 0; display:flex; gap:1rem; flex-wrap:wrap; }
main{ max-width:1100px; margin:0 auto; padding:clamp(.8rem,3vw,1.4rem); }

/* Bereichs-Header-Buttons (Lernkartei/Tagebuch) — Optik wie Lektions-Topnav.
   Scope bewusst auf .area-nav__btn (+ .top__nav .area-nav__btn) begrenzt:
   .top__nav wird auch von lehrer.html, quiz/, arcade/, kooperation/,
   werkzeuge/, impressum.html, datenschutz.html mit nackten <a>-Links
   genutzt — deren Optik bleibt hier unangetastet. Vorlage: .lnav__btn. */
.top__nav.area-nav{ margin-left:auto; }
.top__nav .area-nav__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-weight:700; text-decoration:none;
  color:var(--ink); background:var(--soft);
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:.45rem .9rem; min-height:var(--tap);
  transition:background .15s,color .15s,border-color .15s;
}
.top__nav .area-nav__btn:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.top__nav .area-nav__btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .top__nav .area-nav__btn{ transition:none; }
}

/* #app-status: struktureller Unterbau (Flex-Ausrichtung) bleibt hier. Optik/Farbe/
   Balken/Badge-Medaille der XP-Bar kommen aus dem „WF-G Topbar/Sterne"-Block am
   Dateiende (dort auch die Kompaktierung .lnav__status #app-status). */
#app-status{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-left:auto; font-size:.86rem; }
.app-name{ font-weight:700; color:var(--head); }
.app-level{ font-weight:700; }
.app-badges{ font-weight:700; }

/* ---- Lektions-Kopfleiste: EINE Zeile — 🏠 Übersicht · Titel · Fortschritt ·
   Bereiche · Profil. Sticky (direktes <body>-Kind). Untertitel steht im Inhalt. */
.lnav__bar{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); }
.lnav__bar-in{ width:100%; display:flex; align-items:center; gap:.45rem; padding:.25rem clamp(.7rem,2.5vw,2rem); min-height:52px; }
.lnav__home{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; color:var(--head); text-decoration:none; padding:.4rem .6rem; border-radius:var(--radius-pill); white-space:nowrap; min-height:var(--tap); flex:0 0 auto; }
.lnav__home:hover{ background:var(--soft); }
.lnav__ic{ font-size:1.1em; line-height:1; }
.lnav__divider{ width:1px; align-self:stretch; margin:.45rem .15rem; background:var(--line); flex:0 0 auto; }
.lnav__titlewrap{ min-width:0; flex:0 1 auto; }
.lnav__title{ margin:0; font-size:clamp(1rem,2.4vw,1.3rem); font-weight:800; color:var(--head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lnav__spacer{ flex:1 1 auto; min-width:.5rem; }
.lnav__status{ display:inline-flex; flex:0 0 auto; }
/* #app-status kompakt in der Leiste: Name ist über den Profil-Chip schon da.
   Größe/Balken-Kompaktierung: „WF-G Topbar/Sterne"-Block am Dateiende (dort bleibt
   die XP-Bar ein ECHTER Mini-Balken statt auf reinen Text zurückzufallen). */
.lnav__status #app-status{ margin:0; font-size:.82rem; gap:.45rem; }
.lnav__status #app-status .app-name{ display:none; }
.lnav__lead{ margin:0 0 1rem; color:var(--muted); font-size:1.02rem; }

/* Schwierigkeits-Umschalter (Einfach/Mittel/Schwer) — segmentierte Auswahl. */
.lnav__diff{ display:inline-flex; flex:0 0 auto; border:1.5px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; background:var(--soft); }
.lnav__diffbtn{ font:inherit; font-weight:700; font-size:.82rem; color:var(--muted); background:transparent;
  border:0; border-left:1px solid var(--line); padding:.4rem .75rem; min-height:var(--tap); cursor:pointer; white-space:nowrap; }
.lnav__diffbtn:first-child{ border-left:0; }
.lnav__diffbtn:hover{ color:var(--head); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.lnav__diffbtn.is-on{ background:var(--accent); color:var(--accent-ink); }
.lnav__diffbtn:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.lnav__diffabbr{ display:none; }
@media (max-width:680px){
  .lnav__difffull{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .lnav__diffabbr{ display:inline; }
  .lnav__diffbtn{ padding:.4rem .6rem; }
}

.lnav__group{ position:relative; display:inline-flex; flex:0 0 auto; }
.lnav__btn{ display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-weight:700; color:var(--ink); background:transparent; border:1.5px solid transparent; border-radius:var(--radius-pill); padding:.35rem .7rem; min-height:var(--tap); cursor:pointer; }
.lnav__btn:hover{ background:var(--soft); }
.lnav__btn[aria-expanded="true"]{ background:var(--soft); border-color:var(--line); }
.lnav__chip{ gap:.45rem; padding-left:.35rem; }
.lnav__name{ max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lnav__caret{ font-size:.7em; opacity:.7; }
.lnav__ava{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:inline-grid; place-items:center; overflow:hidden; }
.lnav__ava svg,.lnav__ava img{ width:100%; height:100%; display:block; }
.lnav__profile{ flex:0 0 auto; display:inline-flex; }
.lnav__login{ display:inline-flex; align-items:center; gap:.4rem; font-weight:800; background:var(--accent); color:var(--accent-ink); text-decoration:none; border-radius:var(--radius-pill); padding:.4rem .9rem; min-height:var(--tap); }
.lnav__login:hover{ filter:brightness(1.06); }
.lnav__pop{ position:absolute; right:0; top:calc(100% + 6px); min-width:210px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-btn); box-shadow:var(--shadow); padding:.3rem; display:flex; flex-direction:column; z-index:60; }
.lnav__pop--left{ right:auto; left:0; }
.lnav__pop[hidden]{ display:none; }
.lnav__item{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; font:inherit; color:var(--ink); background:transparent; border:0; border-radius:var(--radius-sm); padding:.55rem .6rem; min-height:var(--tap); cursor:pointer; text-decoration:none; }
.lnav__item:hover,.lnav__item:focus-visible{ background:var(--soft); }
.lnav__sep{ height:1px; background:var(--line); margin:.25rem .2rem; }
/* Eng: Fortschritts-Anzeige ausblenden, damit die Zeile EINE Zeile bleibt. */
@media (max-width:820px){ .lnav__status{ display:none; } }
@media (max-width:560px){
  .lnav__home .lnav__lbl,.lnav__btn .lnav__lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .lnav__home{ padding:.4rem .5rem; }
  .lnav__name{ display:none; }
  .lnav__divider{ display:none; }
}
@media print{ .lnav__bar{ display:none; } }

/* WF persistent-header: 🏠 Übersicht als AKTUELLE Seite (Hub) — kein Link, nur
   Statusanzeige. Optisch wie .lnav__home, aber gedimmt/nicht interaktiv. */
.lnav__home--current{ color:var(--muted); cursor:default; opacity:.75; }
.lnav__home--current:hover{ background:none; }
.lnav__bar--teacher{ border-bottom-color:color-mix(in srgb,var(--accent) 36%,var(--line)); }
.lnav__home--teacher,.lnav__chip--teacher{
  background:color-mix(in srgb,var(--accent) 10%,var(--paper));
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
}
.lnav__ava--teacher{ background:var(--soft); font-size:18px; }

/* WF persistent-header: Spielzeit-Chip (Hub/Lernkartei/Tagebuch — Seiten ohne XP-Leiste). */
.lnav__playtime{ display:inline-flex; flex:0 0 auto; }
.lnav__playtime-chip{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700;
  color:var(--head); background:var(--soft); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:.3rem .7rem; white-space:nowrap;
}
@media (max-width:820px){ .lnav__playtime{ display:none; } }

/* Profil-Modal (Name + Avatar, via topnav.js + AvatarStudio) */
.lnav-modal{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; background:rgba(16,24,40,.55); padding:16px; }
.lnav-modal.open{ display:flex; }
.lnav-modal__card{ background:var(--paper); color:var(--ink); width:100%; max-width:460px; border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1.2rem 1.2rem 1.4rem; max-height:90vh; overflow:auto; }
.lnav-modal__card h2{ margin:.1rem 0 .8rem; color:var(--head); }
.lnav-modal__card label{ display:block; font-weight:700; margin:.7rem 0 .25rem; }
.lnav-modal__err{ color:var(--bad); font-weight:600; min-height:1.2em; margin:.4rem 0 0; }
.lnav-modal__row{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem; flex-wrap:wrap; }
.lnav-toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%,12px); z-index:9600; background:var(--head); color:#fff; font-weight:700; padding:.6rem 1rem; border-radius:var(--radius-pill); box-shadow:var(--shadow); opacity:0; transition:opacity .25s,transform .25s; max-width:90vw; text-align:center; }
.lnav-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- Differenzierungs-Leiste (3 Stufen) ---- */
.tierbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem; }
.tierbar__lbl{ font-weight:700; color:var(--muted); }
.tierbtn{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.4rem .8rem; }
.tierbtn.is-on{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }

/* ---- Stationen (linear-stations / Bestands-engine.js-DOM) ---- */
.station{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin:0 0 1.1rem; }
.station.is-locked{ opacity:.6; }
.station__head{ display:flex; flex-direction:column; gap:.1rem; margin-bottom:.4rem; }
.station__no{ font-size:.78rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.station__title{ margin:0; color:var(--head); font-size:clamp(1.05rem,3vw,1.35rem); }
.station__basis{ margin:.3rem 0; }
.block{ margin:.6rem 0; border:1px solid var(--line); border-radius:var(--radius-btn); padding:.2rem .7rem; background:var(--soft); }
.block>summary{ cursor:pointer; font-weight:700; padding:.4rem 0; }
.tier-forscher{ border-style:dashed; }
.lab{ margin:.8rem 0; }
.lab__todo{ color:var(--muted); font-style:italic; }
.station__aufgabe{ margin-top:.6rem; padding:.6rem .8rem; background:var(--soft); border-left:4px solid var(--accent); border-radius:var(--radius-sm); }
.station__status{ margin-top:.6rem; }
.badge{ display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .6rem; border-radius:var(--radius-pill); font-size:.8rem; font-weight:700; }
.badge.ok{ background:color-mix(in srgb,var(--ok) 18%,transparent); color:color-mix(in srgb,var(--ok) 55%,var(--ink)); }
.badge.todo{ background:var(--soft); color:var(--muted); }
.badge.locked{ background:var(--soft); color:var(--muted); }
#progress{ color:var(--muted); font-weight:700; margin:.4rem 0 1rem; }

/* ---- Vorlesen / TTS (QA-021, DaZ/Niedrigschwelligkeit) ---- */
.tts-btn{
  display:inline-flex; align-items:center; gap:.35rem; margin:.45rem 0 0;
  padding:.32rem .7rem; min-height:auto; font-size:.8rem; font-weight:700;
  background:var(--soft); color:var(--muted); border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
}
.tts-btn:hover{ color:var(--ink); }
.tts-btn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.tts-btn[data-tts-state="paused"]{ border-color:var(--accent); color:var(--accent); }
.tts-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.tts-btn__icon{ font-size:1rem; line-height:1; }
.station__aufgabe .tts-btn,.lc__q .tts-btn{ margin-top:.4rem; }

/* ---- Pfad-Hub / station-path ---- */
.path-hub{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin:0 0 1.4rem; }
.path-card{ background:var(--panel); border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1rem; text-align:left; }
.path-card[aria-pressed=true]{ outline:3px solid var(--accent); }
.path-card__icon{ font-size:1.6rem; }
.path-card{ display:flex; flex-direction:column; align-items:stretch; overflow:hidden; }
.path-card__img{ position:relative; width:100%; flex:0 0 auto; margin:-1rem -1rem .6rem; aspect-ratio:16/9; background:var(--soft); overflow:hidden; }
.path-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.path-card__badge{ position:absolute; left:.5rem; bottom:.5rem; font-size:1.4rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.path-card__name{ font-weight:800; color:var(--ink, var(--navy)); margin:.2rem 0; }
.path-card__desc{ color:var(--muted); font-size:.9rem; }

/* ---- Lernlandkarte / Spielbrett (station-path Hub) ----
   Pflicht-Kapitel als senkrechte Bahn, Wahl/Kontext als Abzweige,
   Prüfungen in einer hervorgehobenen Ziel-Zone. Reine Darstellung. */
.board{ max-width:720px; margin:.4rem auto 1.7rem; }
.board__spine{ position:relative; display:flex; flex-direction:column; }

/* Pfad-Kachel */
.board-node{
  position:relative; z-index:1; display:grid;
  grid-template-columns:86px minmax(0,1fr) 18px; align-items:center; gap:.85rem;
  width:100%; text-align:left; background:transparent; border:0;
  padding:.5rem .55rem; border-radius:18px; min-height:0;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.board-node:hover{ background:var(--soft); }
.board-node:hover .board-node__media{ transform:scale(1.04); }
.board-node:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* Verbindungslinie der Pflicht-Bahn (durchgehend hinter den Foto-Kacheln) */
.board__spine .board-node::before{
  content:""; position:absolute; z-index:0; top:0; bottom:0;
  left:calc(.55rem + 43px); width:4px; transform:translateX(-50%); border-radius:4px;
  background:color-mix(in srgb,var(--line) 88%, var(--muted));
}
.board__spine .board-node:first-child::before{ top:50%; }
.board__spine .board-node:last-child::before{ bottom:50%; }
.board__spine .board-node.is-done::before{ background:color-mix(in srgb,var(--ok) 55%, var(--line)); }

/* Foto/Icon mit Fortschritts-Ring */
.board-node__media{
  position:relative; z-index:1; width:86px; height:86px; flex:0 0 auto;
  display:grid; place-items:center; transition:transform var(--dur) var(--ease);
}
.board-node__media img, .board-node__glyph{
  /* Quadratisch über aspect-ratio (NICHT height:%, das löst im Grid-Kontext nicht auf
     → Hochformat-Fotos liefen sonst aus dem Rahmen). object-fit beschneidet das Bild. */
  width:calc(100% - 12px); height:auto; aspect-ratio:1; flex:0 0 auto;
  border-radius:20px; object-fit:cover;
  /* Vertikal etwas nach oben beschnitten: zeigt bei Porträt-/Büsten-Fotos den Kopf
     statt Sockel/Torso. Bei Querformaten füllt cover die Höhe → ohne Wirkung. */
  object-position:center 28%;
  box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.board-node__glyph{
  display:grid; place-items:center; font-size:2rem; color:#fff;
  background:var(--node-accent); /* Fallback, falls color-mix nicht unterstützt wird (sonst weißes Icon auf transparent) */
  background:linear-gradient(145deg, color-mix(in srgb,var(--node-accent) 72%, #fff) 0%, var(--node-accent) 100%);
}
.board-node__ring{
  position:absolute; inset:0; border-radius:24px; z-index:-1;
  background:conic-gradient(var(--node-accent) calc(var(--pct,0)*1%), color-mix(in srgb,var(--line) 70%, transparent) 0);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask:radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.board-node__flag{
  position:absolute; right:-3px; bottom:-3px; min-width:24px; height:24px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px; font-size:.82rem; font-weight:800;
  background:var(--panel); color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.22); border:1.5px solid var(--panel);
}
.board-node__flag.flag-done{ background:var(--ok); color:#fff; }
.board-node__flag.flag-lock{ background:var(--soft); color:var(--muted); }
.board-node__flag.flag-none{ display:none; }

/* Textspalte */
.board-node__body{ min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.board-node__kicker{
  font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--node-accent);
}
.board-node__name{ font-weight:800; color:var(--head,var(--ink)); line-height:1.22; }
.board-node__desc{
  color:var(--muted); font-size:.84rem; line-height:1.34;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.board-node__prog{ margin-top:.16rem; font-size:.77rem; font-weight:700; color:var(--muted); }
.board-node.is-done .board-node__prog{ color:var(--ok); }

/* Sterne pro Kapitel (1★ Einfach · 2★ Mittel · 3★ Schwer) */
.board-node__stars{ display:inline-flex; gap:.1rem; margin:.12rem 0 .02rem; line-height:1; }
.board-node__stars .star{ font-size:1rem; color:color-mix(in srgb,var(--muted) 42%, transparent); }
.board-node__stars .star.on{ color:#f4b400; text-shadow:0 1px 2px rgba(0,0,0,.16); }

/* Hartes Sterne-Gate auf der Prüfung: kurzes Wackeln beim Antippen */
@keyframes board-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.board-node.is-shake{ animation:board-shake .5s var(--ease); }
.board-node__chev{ font-size:1.5rem; line-height:1; color:var(--muted); opacity:.45; }

/* Zustände */
.board-node.is-active{
  background:color-mix(in srgb,var(--node-accent) 12%, var(--panel));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--node-accent) 55%, transparent);
}
.board-node.is-locked{ opacity:.82; }
.board-node.is-locked .board-node__media img, .board-node.is-locked .board-node__glyph{ filter:grayscale(.8) brightness(.97); }

/* Wahl-/Kontext-Abzweige: WIRKLICH parallel — ab zwei Abzweigen liegen sie als
   Spalten nebeneinander (ein einzelner behält die volle Breite; das Label spannt
   alle Spalten, deshalb kollabiert auto-fit nicht von allein → :has-Umschalter). */
.board__branches{
  margin:.1rem 0 .2rem; padding:.1rem 0 .2rem 22px; margin-left:30px;
  border-left:3px dashed color-mix(in srgb,var(--line) 70%, var(--muted));
  display:flex; flex-direction:column;
}
.board__branches:has(.board-node:nth-of-type(2)){
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.1rem .7rem; align-items:start;
}
.board__branch-label{
  grid-column:1 / -1;
  font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:.2rem 0 0;
}
.board__branches .board-node{ grid-template-columns:66px minmax(0,1fr) 18px; gap:.7rem; }
.board__branches .board-node__media{ width:66px; height:66px; }

/* Ziel-Zone: Klausur, Prüfen & Urteilen, benotete Prüfung, Lernstand */
.board__goal{
  margin-top:.7rem; padding:.45rem .55rem .65rem; border-radius:20px;
  background:color-mix(in srgb,var(--bad) 10%, var(--panel));
  border:2px solid color-mix(in srgb,var(--bad) 45%, var(--line));
  display:flex; flex-direction:column;
}
/* Label als farbiges Pill — bleibt auf hellen UND dunklen Themes klar erkennbar. */
.board__goal-label{
  align-self:flex-start; font-weight:800; font-size:.82rem; margin:.1rem .1rem .4rem;
  display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--bad) 88%, #000 0%); color:#fff;
}
.board__goal .board-node__media img, .board__goal .board-node__glyph{
  box-shadow:0 3px 10px rgba(0,0,0,.16), 0 0 0 3px color-mix(in srgb,var(--node-accent) 35%, transparent);
}

@media (max-width:480px){
  .board-node{ grid-template-columns:64px minmax(0,1fr); gap:.7rem; padding:.45rem .35rem; }
  .board-node__media{ width:64px; height:64px; }
  .board-node__chev{ display:none; }
  .board__spine .board-node::before{ left:calc(.35rem + 32px); }
  .board__branches{ margin-left:14px; padding-left:16px; }
  .board__branches .board-node{ grid-template-columns:52px minmax(0,1fr); }
  .board__branches .board-node__media{ width:52px; height:52px; }
}

/* ---- Kontext-Lane-Band (station-path, First-Class-Kontexte) ----
   Parallele „Bahnen" mit EIGENEN Kapitel-Kacheln je Kontext (variable Anzahl);
   shared Segmente in voller Breite (Bahnen laufen zusammen). Chips = Buttons ≥44px. */
.board__laneband{
  position:relative; margin:.35rem 0 .5rem; padding:.65rem .7rem .55rem;
  border:2px solid color-mix(in srgb,var(--ctx-accent,var(--accent)) 40%, var(--line));
  border-radius:20px; background:color-mix(in srgb,var(--ctx-accent,var(--accent)) 6%, var(--panel));
}
.board__laneband .board-node::before{ display:none; } /* Spine-Linie läuft nicht durchs Band */
.board__laneband-head{ display:flex; flex-direction:column; gap:.45rem; }
.board__laneband-title{ font-weight:800; font-size:.92rem; color:var(--head,var(--ink)); }
.board__laneband-sub{ font-weight:400; font-size:.8em; color:var(--muted); }
.board__laneband-note{ margin:.5rem 0 .1rem; font-size:.86rem; color:var(--ink); }
.board__laneband .board__ctxchips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.board__laneband .board__ctxchip{
  display:inline-flex; align-items:center; gap:.35rem; min-height:44px; min-width:44px; padding:.35rem .8rem;
  border-radius:var(--radius-pill); border:2px solid color-mix(in srgb,var(--c,var(--accent)) 55%, var(--line));
  background:var(--panel); color:var(--head,var(--ink)); font-weight:700; font-size:.86rem; cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.board__laneband .board__ctxchip:hover{ background:color-mix(in srgb,var(--c,var(--accent)) 12%, var(--panel)); }
.board__laneband .board__ctxchip:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.board__laneband .board__ctxchip[aria-pressed="true"]{
  background:color-mix(in srgb,var(--c,var(--accent)) 18%, var(--panel));
  box-shadow:inset 0 0 0 2px var(--c,var(--accent));
}
.board__laneband .board__ctxchip[aria-pressed="true"]::after{ content:"✓"; font-weight:800; color:var(--c,var(--accent)); }
/* Lane-Segment: die Bahnen laufen WIRKLICH parallel — eine Spalte je Kontext,
   jede mit eigener Farb-Schiene (border-left) und eigenen Kapitel-Kacheln.
   Kacheln im Band kompakt (drei Spalten teilen sich die Board-Breite). */
.board__lanes{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:.55rem; margin:.6rem 0 .2rem; align-items:stretch;
}
.board__lane{
  border-left:5px solid var(--c,var(--accent)); border-radius:6px 14px 14px 6px;
  padding:.15rem .1rem .15rem .4rem;
  transition:opacity var(--dur) var(--ease);
}
.board__lanes .board-node{ grid-template-columns:44px minmax(0,1fr); gap:.5rem; padding:.4rem .3rem; border-radius:14px; }
.board__lanes .board-node__media{ width:44px; height:44px; }
.board__lanes .board-node__media img, .board__lanes .board-node__glyph{ border-radius:12px; }
.board__lanes .board-node__glyph{ font-size:1.3rem; }
.board__lanes .board-node__ring{ border-radius:14px; }
.board__lanes .board-node__chev{ display:none; }
.board__lanes .board-node__desc{ display:none; }
.board__lane-label{
  display:inline-flex; align-items:center; gap:.35rem; margin:.15rem 0 0;
  font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c,var(--accent));
}
.board__lane-label em{ font-style:normal; text-transform:none; letter-spacing:0; font-weight:700; color:var(--muted); }
/* Inaktive Lane: läuft sichtbar parallel mit, nur entsättigt/gedimmt — nicht bedienbar
   (aria-hidden setzt das JS). Kein scale mehr: die Spalten sollen bündig laufen. */
.board__lane.is-off{ opacity:.55; pointer-events:none; }
.board__lane.is-off .board-node__media img, .board__lane.is-off .board-node__glyph{ filter:grayscale(.85) brightness(.98); }
/* Schmale Viewports: Bahnen stapeln wieder untereinander (Kacheln bleiben kompakt). */
@media (max-width:640px){
  .board__lanes{ grid-auto-flow:row; }
}
/* Vorschau-Lane (noch kein Kontext gewählt): sichtbar, aber gesperrt */
.board__lane.is-preview .board-node{ cursor:not-allowed; }
.board__lane.is-preview .board-node__media img, .board__lane.is-preview .board-node__glyph{ filter:grayscale(.35); }
/* Shared Segment: volle Breite, die Bahnen treffen sich */
.board__laneshared{ margin:.5rem 0 .2rem; padding-top:.35rem; border-top:3px dashed color-mix(in srgb,var(--ctx-accent,var(--accent)) 35%, var(--line)); }
.board__laneshared-label{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
@media (prefers-reduced-motion: reduce){
  .board__laneband .board__ctxchip, .board__lane{ transition:none; }
  .board__lane.is-off{ transform:none; }
}

/* ---- Kontext-Picker im Pfad-View (station-path, First-Class-Kontexte) ----
   Framework-Basis: JEDE Lektion mit navigation.contexts bekommt bediengroße
   Chips (≥44px Zielgröße), sichtbaren Wahl-Zustand (✓-Textmarker, nicht nur
   Farbe/aria-pressed), Fokus-Ring und reduced-motion. Lektionen ergänzen nur
   Theme-Feintuning (Farben/Radien), keine Mechanik. */
.context-picker{
  margin:.2rem 0 1.1rem; padding:.85rem .9rem 1rem;
  background:color-mix(in srgb,var(--accent) 6%, var(--panel));
  border:1px solid var(--line); border-radius:var(--radius-card);
}
.context-picker__lbl{ font-size:.94rem; color:var(--ink); margin-bottom:.65rem; }
.context-picker__row{ display:grid; gap:.6rem; grid-template-columns:1fr; }
@media (min-width:560px){ .context-picker__row{ grid-template-columns:repeat(3,1fr); } }
.context-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:.12rem;
  text-align:left; cursor:pointer; min-height:44px; padding:.7rem .85rem;
  background:var(--panel); border:1.5px solid var(--line); border-radius:var(--radius-btn);
  color:var(--ink); font:inherit;
  transition:transform .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.context-chip:hover{ transform:translateY(-2px); border-color:var(--accent); }
.context-chip:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.context-chip__ic{ font-size:1.5em; line-height:1; }
.context-chip__nm{ font-weight:700; color:var(--head,var(--ink)); }
.context-chip__ds{ font-size:.82em; color:var(--muted); }
.context-chip.is-active{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%, var(--panel));
  box-shadow:inset 0 0 0 1px var(--accent);
}
/* Sichtbarer Wahl-Zustand als TEXT (WCAG 1.4.1 — nicht nur Rahmenfarbe): */
.context-chip.is-active::after{
  content:"✓ dein Kontext"; margin-top:.2em;
  font-size:.76em; font-weight:700; color:var(--accent);
}
@media (prefers-reduced-motion: reduce){
  .context-chip{ transition:none; }
  .context-chip:hover{ transform:none; }
}

.pathbar{ position:sticky; top:var(--lnav-h,0); z-index:5; background:var(--bg); padding:.5rem 0; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); }
.status-chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .55rem; border-radius:var(--radius-pill); font-size:.74rem; font-weight:700; background:var(--soft); color:var(--muted); border:1px solid var(--line); }
.status-chip.done{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); }
.status-chip.mastered{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); }
.status-chip.locked{ opacity:.6; }
.status-chip.is-wahl{ border-style:dashed; opacity:.85; }
.status-chip.is-wahl::after{ content:"✦"; font-size:.7em; opacity:.7; }
.next-nudge{ margin:.6rem 0 1rem; }
/* „Als Nächstes empfohlen" (§7 entry-Routing / recommendedNext) — Board-Banner. */
.sp-recommend{ margin:0 0 1.1rem; padding:.85rem 1rem; border-radius:var(--radius-card,14px); background:color-mix(in srgb,var(--accent) 9%,var(--card,#fff)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-left:4px solid var(--accent); }
.sp-recommend__lead{ margin:0 0 .2rem; font-size:.78rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--accent); }
.sp-recommend__msg{ margin:0; font-weight:700; color:var(--head); }
.sp-recommend__hint{ margin:.35rem 0 0; font-size:.86rem; color:var(--muted); }
.sp-recommend__go{ margin-top:.7rem; }
.station__bypass{ margin-left:.5rem; font-size:.78rem; }

/* ---- Session-Banner: synchron (Live) vs. asynchron (Frist) ---- */
#session-bar{ margin:0 0 .8rem; }
.session-banner{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:var(--radius-pill); font-weight:700; font-size:.84rem; background:var(--soft); color:var(--head); border:1px solid var(--line); }
.session-banner.is-urgent{ background:color-mix(in srgb,var(--bad,#c0392b) 14%,transparent); color:var(--bad,#c0392b); border-color:color-mix(in srgb,var(--bad,#c0392b) 40%,transparent); }
.session-banner.is-over{ opacity:.7; }
.session-banner--live{ background:color-mix(in srgb,#c0392b 14%,transparent); color:#c0392b; border-color:color-mix(in srgb,#c0392b 40%,transparent); }

/* ---- Article-Grid (menschenrechte/voelkerrecht) ---- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
.tile,.card{ position:relative; display:flex; flex-direction:column; gap:.3rem; text-align:left; padding:.9rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); min-height:150px; transition:transform var(--dur) var(--ease); cursor:pointer; }
.tile:hover,.card:hover{ transform:translateY(-3px); }
.tile__icon,.card__icon{ font-size:1.8rem; }
.tile__title,.card__title{ font-weight:800; color:var(--head); }
.tile.is-seen::after,.card.is-seen::after{ content:"✓"; position:absolute; top:.5rem; right:.6rem; color:var(--ok); font-weight:900; }
.detail{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1.2rem; }
.detail__nav{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem; }
.motion-stage{ display:flex; align-items:center; justify-content:center; min-height:150px; border:1px solid var(--line); border-radius:var(--radius-btn); background:var(--soft); margin:.6rem 0; }
.gloss{ position:relative; border:0; background:none; color:inherit; font:inherit; text-decoration:underline dotted; text-underline-offset:3px; cursor:help; padding:0; }
.gloss-mark{ font-size:.7em; vertical-align:super; color:var(--accent); }
.gloss-tip{ position:absolute; z-index:30; left:0; top:1.6em; max-width:min(300px,90vw); background:var(--navy); color:#fff; padding:.6rem .7rem; border-radius:10px; font-size:.85rem; box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease); }
.gloss-tip.show{ opacity:1; visibility:visible; }

/* ---- Kahoot-Quiz ---- */
.quiz-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
@media (max-width:480px){ .quiz-tiles{ grid-template-columns:1fr; } }
.quiz-tile{ display:flex; align-items:center; gap:.5rem; min-height:64px; padding:.8rem 1rem; border-radius:12px; color:#fff; font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.quiz-tile:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.quiz-tile.t0{ background:var(--k-red); } .quiz-tile.t1{ background:var(--k-blue); }
.quiz-tile.t2{ background:var(--k-yellow); } .quiz-tile.t3{ background:var(--k-green); }
.quiz-tile.is-correct{ outline:4px solid var(--ok); }
.quiz-tile.is-wrong{ outline:4px solid #fff; filter:grayscale(.6) brightness(.85); }

/* ---- Generische Komponenten-Skins (.lc-…) ---- */
.lc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); padding:1rem; margin:.6rem 0; box-shadow:var(--shadow); }
.lc__q{ font-weight:700; margin-bottom:.6rem; }
.lc__opts{ display:flex; flex-direction:column; gap:.5rem; }
.lc__opt{ text-align:left; width:100%; border:1.5px solid var(--line); background:var(--soft); border-radius:var(--radius-btn); padding:.6rem .8rem; }
.lc__opt.ok{ background:color-mix(in srgb,var(--ok) 18%,transparent); border-color:var(--ok); }
.lc__opt.no{ background:color-mix(in srgb,var(--bad) 14%,transparent); border-color:var(--bad); }
.lc__opt[aria-pressed=true]{ outline:2px solid var(--accent); }
.lc__fb{ margin-top:.6rem; padding:.6rem .8rem; border-radius:var(--radius-btn); display:none; }
.lc__fb.show{ display:block; }
.lc__fb.good{ background:color-mix(in srgb,var(--ok) 16%,transparent); }
.lc__fb.bad{ background:color-mix(in srgb,var(--warn) 18%,transparent); }
.lc__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }
.lc input.blank{ display:inline-block; width:auto; min-width:6ch; min-height:auto; padding:.1rem .3rem; }
.lc input.blank.ok{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); }
.lc input.blank.no{ border-color:var(--bad); background:color-mix(in srgb,var(--bad) 10%,transparent); }
.lc__bank{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.lc__chip{ border:1.5px solid var(--line); background:var(--soft); border-radius:var(--radius-pill); padding:.4rem .8rem; cursor:grab; }
.lc__chip[aria-grabbed=true]{ outline:2px solid var(--accent); }
.lc__slot{ display:inline-block; min-width:7ch; min-height:1.8em; padding:.1rem .4rem; border-bottom:2px dashed var(--accent); }
.lc__slot.filled{ border-bottom-style:solid; background:var(--soft); }
.word{ cursor:pointer; border-radius:4px; padding:0 .1rem; }
.word.marked{ background:color-mix(in srgb,var(--accent) 25%,transparent); }
.word.hit{ background:color-mix(in srgb,var(--ok) 30%,transparent); }
.word.miss{ outline:2px solid var(--bad); }
.lc__hint{ margin-top:.5rem; padding:.5rem .7rem; background:var(--soft); border-left:4px solid var(--warn); border-radius:var(--radius-sm); }

/* ---- Toasts ---- */
.xp-toast,.badge-toast{ position:fixed; right:1rem; bottom:1rem; z-index:200; background:var(--navy); color:#fff; padding:.7rem 1rem; border-radius:var(--radius-btn); box-shadow:var(--shadow); opacity:0; transform:translateY(12px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); display:flex; align-items:center; gap:.6rem; }
.xp-toast.show,.badge-toast.show{ opacity:1; transform:none; }
.xp-toast{ font-weight:800; background:var(--accent); }
.badge-toast__icon{ font-size:1.6rem; }

/* ---- Auth-Overlay (auth.js) ---- */
.auth-overlay{ position:fixed; inset:0; z-index:300; background:rgba(10,16,36,.55); display:none; align-items:center; justify-content:center; padding:1rem; }
.auth-overlay.open{ display:flex; }
.auth-card{ background:var(--paper); color:var(--ink); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1.4rem; max-width:440px; width:100%; }
.auth-card h2{ margin:.1rem 0 .6rem; color:var(--head); }
.auth-card label{ display:block; font-weight:700; margin:.7rem 0 .2rem; }
.auth-card input{ width:100%; }
.auth-note{ color:var(--muted); font-size:.9rem; }
.auth-opt{ color:var(--muted); font-weight:400; }
.auth-err{ color:var(--bad); font-weight:700; min-height:1.2em; }
.auth-hint{ color:var(--muted); font-size:.82rem; margin-top:.6rem; }
.auth-btn{ width:100%; margin-top:.8rem; }
.auth-guest{ width:100%; margin-top:.5rem; background:transparent; border:1.5px solid var(--line); }
#app-sync{ position:fixed; left:1rem; bottom:1rem; z-index:200; background:var(--navy); color:#fff; padding:.4rem .7rem; border-radius:var(--radius-pill); font-size:.8rem; opacity:0; transition:opacity var(--dur) var(--ease); }
#app-sync.show{ opacity:1; }

/* ---- Footer (Impressum/Datenschutz – auf jeder Seite) ---- */
.lesson-footer{ max-width:1100px; margin:2rem auto 0; padding:1rem clamp(.8rem,3vw,1.4rem); border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; display:flex; gap:1rem; flex-wrap:wrap; }
.lesson-footer a{ color:var(--muted); }

/* ============================================================
   Belohnungs-Schicht (core/reward.js) — Juice NUR für echte Meilensteine
   (Kapitel/Lektion/Level/Stern), NIE pro Klick (Design-Critique 2026-07-02).
   Content-Flächen bleiben unverändert; alles hier ist additiv/overlay.
   Farb-Disziplin: --reward/--streak sind Füllfarben (Icon/Hintergrund), NIE
   Textfarbe auf hellem Papier — Text läuft über --reward-deep bzw. --ink/--head.
   Text AUF --reward-Füllung (z.B. Belohnungs-Buttons) NICHT in --reward-deep
   (nur 3.69:1) — dafür --reward-btn-ink (5.28:1 auf --reward, AA ok).
   Status ist nie NUR Farbe (Text/Symbol/aria-live begleiten jede Feier).
   ============================================================ */

/* ---- XP-Float-up: "+100" am Interaktionsort, kurzlebig, unaufdringlich ---- */
.rw-float-host{ position:relative; }
.rw-float{
  position:absolute; left:50%; top:0; z-index:400;
  transform:translate(-50%,0); pointer-events:none;
  font-family:var(--font-num); font-weight:700; font-size:1.05rem;
  /* Text theme-nativ (--head): --reward-deep scheitert auf dunklem --panel (~2.3:1). */
  color:var(--head); background:var(--panel,#fff);
  border:1.5px solid color-mix(in srgb,var(--reward) 55%, var(--line));
  border-radius:var(--radius-pill); padding:.15rem .65rem;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  animation:rw-float-up .9s var(--ease) forwards;
}
@keyframes rw-float-up{
  0%{ opacity:0; transform:translate(-50%,4px) scale(.9); }
  15%{ opacity:1; transform:translate(-50%,-6px) scale(1); }
  75%{ opacity:1; transform:translate(-50%,-34px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-46px) scale(1); }
}

/* ---- Stern-Pop: neuer Stern erscheint mit kurzem Bounce ---- */
.rw-star-pop{ display:inline-block; animation:rw-star-pop .5s var(--ease) both; }
@keyframes rw-star-pop{
  0%{ transform:scale(.3) rotate(-15deg); opacity:0; }
  55%{ transform:scale(1.25) rotate(6deg); opacity:1; }
  80%{ transform:scale(.94) rotate(-2deg); }
  100%{ transform:scale(1) rotate(0); }
}

/* ---- Konfetti-Overlay: ~24 CSS-Partikel aus assets/img/reward/particle-*.png ---- */
.rw-confetti{
  position:fixed; inset:0; z-index:900; pointer-events:none; overflow:hidden;
}
.rw-confetti__p{
  position:absolute; top:-5%; width:18px; height:18px; opacity:0;
  background-color:var(--rw-tint,var(--reward));
  animation:rw-confetti-fall 1.6s var(--ease) forwards;
  /* Partikel-Sprites sind weiß/grau auf Transparenz (s. CREDITS.md) — gezielt zum
     Einfärben gedacht: als CSS-Maske genutzt, die Fläche kommt aus --rw-tint. */
  -webkit-mask-image:var(--rw-shape); mask-image:var(--rw-shape);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
@keyframes rw-confetti-fall{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg); }
  8%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--rw-x,0),115vh) rotate(var(--rw-rot,360deg)); }
}

/* ---- Abschluss-Feier (Kapitel/Lektion): Overlay-Karte, Fokus-Falle, ≥44px CTA ---- */
.rw-celebrate{
  position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,8,.55); padding:1rem;
}
.rw-celebrate__card{
  position:relative; z-index:1; max-width:420px; width:100%; text-align:center;
  background:var(--paper,#fff); color:var(--ink); border-radius:var(--radius-card);
  box-shadow:0 20px 50px rgba(0,0,0,.35); padding:1.6rem 1.4rem 1.4rem;
  border-top:6px solid var(--reward);
  animation:rw-card-in .4s var(--ease) both;
}
@keyframes rw-card-in{
  0%{ opacity:0; transform:translateY(18px) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.rw-celebrate__img{ width:84px; height:84px; object-fit:contain; margin:0 auto .5rem; display:block; }
.rw-celebrate__title{ margin:.2rem 0 .3rem; font-family:var(--font-num); font-weight:700; font-size:1.35rem; color:var(--head); }
.rw-celebrate__sub{ margin:0 0 .8rem; color:var(--muted); }
.rw-celebrate__stars{ display:flex; justify-content:center; gap:.3rem; margin:.4rem 0 1rem; }
.rw-celebrate__stars img{ width:32px; height:32px; }
.rw-celebrate__stars img.is-empty{ opacity:.45; filter:grayscale(1); }
.rw-celebrate__btn{ min-height:var(--tap); min-width:160px; background:var(--reward); color:var(--reward-btn-ink); font-weight:800; border:2px solid var(--reward-deep); }
.rw-celebrate__btn:hover{ filter:brightness(1.05); }
.rw-celebrate__btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* ---- Level-Up-Modal: kleiner als Celebrate, neuer Titel + Icon ---- */
.rw-levelup{
  position:fixed; inset:0; z-index:960; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,8,.5); padding:1rem;
}
.rw-levelup__card{
  max-width:360px; width:100%; text-align:center;
  background:var(--paper,#fff); color:var(--ink); border-radius:var(--radius-card);
  box-shadow:0 16px 40px rgba(0,0,0,.3); padding:1.3rem 1.2rem;
  border:2px solid var(--reward);
  animation:rw-card-in .35s var(--ease) both;
}
.rw-levelup__icon{ font-size:2.4rem; line-height:1; margin-bottom:.3rem; }
/* Kicker = theme-native (muted), NICHT --reward-deep: der Reward-Ton scheitert als
   Text auf dunklem --paper/--panel (space/law-dark ~2.3:1). Gold nur auf Icon/Rahmen/Balken. */
.rw-levelup__kicker{ font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.rw-levelup__title{ margin:.15rem 0 .7rem; font-family:var(--font-num); font-weight:700; font-size:1.2rem; color:var(--head); }
.rw-levelup__btn{ min-height:var(--tap); min-width:140px; background:var(--reward); color:var(--reward-btn-ink); font-weight:800; border:2px solid var(--reward-deep); }
.rw-levelup__btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* ---- XP-Bar (Topbar): Track + Fill in --reward, Text-Label daneben ----
   Additiv zu .app-xpbar (Bestand bleibt unverändert) — .rw-xpbar ist die
   aufgewertete Variante für Seiten, die core/reward.js aktiv nutzen. */
.rw-xpbar{ display:inline-flex; align-items:center; gap:.5rem; }
.rw-xpbar__track{ position:relative; width:min(220px,40vw); height:14px; background:var(--soft); border-radius:var(--radius-pill); overflow:hidden; border:1px solid var(--line); }
.rw-xpbar__fill{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--reward),var(--streak)); border-radius:var(--radius-pill); transition:width .5s var(--ease); }
/* XP-Label = theme-native (muted) statt --reward-deep — sonst unlesbar auf dunklem
   --paper/--panel (space/law-dark ~2.3:1). Reward-Ton bleibt auf der Balkenfüllung. */
.rw-xpbar__label{ font-family:var(--font-num); font-weight:700; font-size:.82rem; color:var(--muted); white-space:nowrap; }

/* ---- prefers-reduced-motion: Feiern bleiben SICHTBAR, aber statisch (Farbe+Text) ---- */
@media (prefers-reduced-motion: reduce){
  .rw-float{ animation:none; opacity:1; transform:translate(-50%,-20px); }
  .rw-star-pop{ animation:none; }
  .rw-confetti{ display:none; }
  .rw-celebrate__card,.rw-levelup__card{ animation:none; }
  .rw-xpbar__fill{ transition:none; }
}

/* === WF-G Topbar/Sterne ===
   core/core.js renderTopBar() + renderers/station-path.js starsRow()/laneBand-Kopf.
   Eigener Block (kein Merge mit dem Reward-Block oben) — Farb-/Token-Vertrag ist
   derselbe (--reward/--reward-deep/--star-empty), Selektoren sind aber eigene
   Namen (.app-xpbar, .board-node__stars, .board__laneband-starcount), damit hier
   niemand mit paralleler Arbeit an .rw-* kollidiert. Additiv: KEINE Regeln oben
   verändert. Leitplanken: Content ruhig, Belohnung bunt; Gold/Gelb NIE als
   Textfarbe (nur Füllung/Rahmen/Icon). ACHTUNG: --reward-deep ist NUR textfähig
   auf hellem Papier (#fff = 7.48:1) — auf --reward-Füllung nur 3.69:1 (FAILT AA,
   dafür --reward-btn-ink) und auf dunklem --panel/--paper der dark-Themes
   (space/law-dark) scheitert es am Kontrast (~1.7-2.4:1). Sichtbarer
   Text auf Theme-Flächen daher theme-nativ (--head/--ink/--muted), nicht --reward-deep;
   Status nie nur Farbe; reduced-motion → Fill-Transition aus (Zielwert bleibt). */

/* ---- Topbar-XP-Bar (renderTopBar): Level-Icon+Titel · Balken · Badge-Zähler ----
   Ersetzt die reine Textzeile „🌱 Titel · 0 XP · 🎖️ 0/8" aus der Design-Critique
   durch einen kompakten, token-basierten Balken. #app-status trägt EIN aria-label
   (Gesamtansage); alle Kind-Spans sind aria-hidden (core.js renderTopBar). */
#app-status{ padding:.15rem .3rem; }
.app-level{ display:inline-flex; align-items:center; gap:.3rem; color:var(--head); }
.app-xpbar{
  position:relative; width:min(180px,32vw); height:16px;
  background:var(--soft); border-radius:var(--radius-pill); overflow:hidden;
  border:1px solid var(--line);
}
.app-xpbar__fill{
  position:absolute; inset:0 auto 0 0;
  background:linear-gradient(90deg,var(--reward),var(--streak));
  transition:width .5s var(--ease);
}
.app-xpbar.is-maxed .app-xpbar__fill{ background:linear-gradient(90deg,var(--reward),var(--reward-deep)); }
/* XP-Zahl NICHT per mix-blend-mode über den Gradient (garantiert keinen Kontrast; auf
   den Dark-Themes war weißer --ink auf Gold-Füllung nur ~1.8:1). Stattdessen sitzt die
   Zahl in einem deckenden --panel-Chip (.app-xpbar__chip) mit --ink-Text — das ist die
   theme-eigene Text/Panel-Paarung und hält in ALLEN 6 Themes ≥15:1 (WCAG 1.4.3 ✓),
   unabhängig vom Balkenstand darunter. Der äußere Span zentriert nur; der Chip
   schrumpft auf den Text, sodass die Balkenfüllung links/rechts sichtbar bleibt. */
.app-xpbar__txt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.app-xpbar__chip{
  font-size:.68rem; line-height:1; color:var(--ink);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:.02rem .34rem;
}
/* Zahl ohne Balken (Legacy-Lektionen ohne game.levels — sauberer Degrade). */
.app-xp-plain{ color:var(--muted); font-size:.86rem; }
.app-badges{ display:inline-flex; align-items:center; gap:.3rem; }
.app-badges__medal{
  display:inline-block; width:16px; height:16px; flex:0 0 auto;
  /* Icon-Ton theme-adaptiv: reward-deep war auf dunklen Panels nur ~2.3:1 (<3:1,
     WCAG 1.4.11). --reward-ink hält als Grafik ≥3:1 in allen 6 Themes (hell: 7.5:1,
     dunkel: 8.5:1). */
  background-color:var(--reward-ink);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}

/* Kompaktierung in der Sticky-Kopfleiste (.lnav__status): ECHTER Mini-Balken
   statt (bisher) reinem Text — der Balken ist gerade der Upgrade-Punkt aus der
   Design-Critique, daher hier NICHT mehr wie zuvor auf Text zurückbauen. */
.lnav__status #app-status{ padding:0; }
.lnav__status #app-status .app-xpbar{ width:min(120px,22vw); height:12px; }
.lnav__status #app-status .app-xpbar__chip{ font-size:.62rem; padding:.02rem .28rem; }

/* ---- station-path.js: Bild-Sterne statt Text-„★☆" ---- */
.board-node__stars{ align-items:center; }
.board-node__stars .star-ic{ height:18px; width:auto; display:inline-block; vertical-align:middle; }
/* Leere Sterne etwas gedämpft, damit „erreicht vs. offen" nicht NUR über das
   andere Bildmotiv, sondern auch über Deutlichkeit/Kontrast lesbar bleibt. */
.board-node__stars .star-ic.is-empty{ opacity:.55; }
.board-node__stars .star-ic.rw-star-pop{ animation:rw-star-pop .5s var(--ease) both; }

/* ---- Band-Kopf: Sterne-Konto „x/need ⭐ für den Abschlusstest" ---- */
/* Text theme-nativ (--head) statt --reward-deep: auf dunklem --panel scheitert der
   Reward-Ton am Kontrast (space/law-dark ~1.7:1). Gold bleibt auf Rahmen + Stern-Icon. */
.board__laneband-starcount, .board__ctxband-starcount{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.35rem;
  font-size:.82rem; font-weight:700; color:var(--head);
  background:color-mix(in srgb,var(--reward) 16%, var(--panel));
  border:1px solid color-mix(in srgb,var(--reward) 45%, var(--line));
  border-radius:var(--radius-pill); padding:.2rem .65rem .2rem .5rem;
  width:fit-content;
}
.board__laneband-starcount img, .board__ctxband-starcount img{ height:15px; width:auto; }

@media (prefers-reduced-motion: reduce){
  .app-xpbar__fill{ transition:none; }
  .board-node__stars .star-ic.rw-star-pop{ animation:none; }
}