/* =========================================================================
   kurs.css — die eigene Bühne des Neubaus, im Gestaltungsbild der
   Online-Schulung (tokens.css, base.css, shell.css unverändert).

   Drei Flächen wie in der Vorlage: Schiene (weiß), Blatt (weiß, mit
   Kopfzeile) und die dunkle Wiedergabepille. Dazu kommt als vierte, neue
   Fläche die FOLIE: eine dunkle Bühne im Blatt, auf der die Sprechfolien
   laufen — so wie der Altkurs seine Folien dunkel auf hellem Blatt zeigte.
   Signalrot bleibt der einzige Akzent; Struktur entsteht aus Rundung,
   Abstand und Helligkeitsstufe, nicht aus Linien.
   ========================================================================= */

[hidden] { display: none !important; }
body { padding: 0; }

/* ------------------------------------------------------------ Schrift --- */
/* Selbst ausgeliefert, kein Netz noetig: Inter fuer Oberflaeche und Text,
   Sora fuer die grossen Ueberschriften der Folien, JetBrains Mono fuer
   Adressen und Passphrasen. Die Tokens der Vorlage bleiben; nur die drei
   Schriftrollen werden hier belegt. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/sora-latin-variable.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-num: var(--font-ui);
}
.rail__title, .kopf__segment, .auftrag__anweisung, .rund__titel, .regler__titel, .check__frage, .post__betreff, .werk__zahl { font-family: var(--font-display); }
.rail__title { letter-spacing: -.025em; }

/* Grid-Kinder schrumpfen nicht unter ihre Inhaltsbreite — ohne diese Sperre
   bläht sich die Schiene von innen auf (Befund S08). */
.rail__head, .chain, .rail__foot, .rail__meter, .meter, .meter__bar { min-inline-size: 0; }
.rail__kicker, .rail__title { overflow-wrap: anywhere; }
.meter > .num { flex: 0 0 auto; }
.meter--zeile { margin-top: .5rem; }
.rail__foot { display: flex; flex-wrap: wrap; gap: .35rem; }
.rail__hinweis kbd {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
  padding: .15rem .35rem; border-radius: var(--r-xs);
  background: var(--bg-fill); color: var(--fg-default);
}
.chain__zahl { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Kapitel --- */
.kapitel { display: flex; flex-direction: column; gap: 2px; padding: 0 0 .5rem; }
.kapitel__punkt {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-3);
  align-items: center; inline-size: 100%; min-inline-size: 0; text-align: start;
  background: none; border: 0; border-radius: var(--r-lg);
  padding: .55rem var(--sp-3); cursor: pointer;
  color: var(--fg-default);
  transition: background var(--mo-fast) var(--ease-move);
}
.kapitel__punkt:hover:not(:disabled) { background: var(--bg-fill); }
.kapitel__punkt:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.kapitel__punkt:disabled { cursor: not-allowed; }
.kapitel__punkt:disabled .kapitel__text { color: var(--fg-subtle); }
.kapitel__punkt:disabled .kapitel__nr { color: var(--fg-subtle); background: var(--bg-sunken); }
/* Der aktuelle Eintrag trägt einen Balken an der Startkante: die weiche
   Fläche allein erreicht gegen die Schiene nur 1,14:1 (WCAG 1.4.11: 3:1). */
/* Das aktuelle Kapitel ist die dunkle Sonderflaeche der Schiene — wie die
   Fortschrittskarte darueber. Keine Kante, kein Balken, nur die Flaeche. */
.kapitel__punkt[aria-current="step"] { background: var(--bg-inverse); }
.kapitel__punkt[aria-current="step"]:hover { background: var(--bg-inverse); }
.kapitel__punkt[aria-current="step"] .kapitel__nr { background: var(--brand); color: var(--fg-onbrand); }
.kapitel__punkt[aria-current="step"] .kapitel__name { color: #fff; font-weight: var(--fw-bold); }
/* Dunkel: die Sonderflaeche kippt ins Helle — Anthrazit auf Anthrazit kaeme
   nur auf 1,66:1, die helle Flaeche auf 10:1. */
:root[data-theme="dark"] .kapitel__punkt[aria-current="step"] { background: var(--c-n-200); }
:root[data-theme="dark"] .kapitel__punkt[aria-current="step"] .kapitel__name { color: var(--c-n-900); }
:root[data-theme="dark"] .kapitel__punkt[aria-current="step"] .kapitel__sub { color: var(--c-n-600); }
.kapitel__nr {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px;
  border-radius: var(--r-pill); background: var(--bg-fill); color: var(--fg-subtle);
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-num); font-variant-numeric: tabular-nums;
}
.kapitel__punkt[data-erledigt="ja"] .kapitel__nr { background: var(--ok-soft); color: var(--ok-fg); }
.kapitel__text { min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.kapitel__name { font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-ui); letter-spacing: var(--track-tight); overflow-wrap: anywhere; }
.kapitel__sub { font: var(--fw-medium) var(--fs-micro)/1.2 var(--font-ui); color: var(--fg-subtle); }
.kapitel__punkt[aria-current="step"] .kapitel__sub { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------- Bühne --- */
/* Die Bühne der Hülle ist nur der Platz. Das Blatt und die Pille darunter
   zeichnet der Kurs selbst — mit demselben Abstand wie in der Vorlage. */
.stage { overflow: visible; border-radius: 0; background: transparent; }
.stage__rail-schalter { position: static; }
.buehne {
  display: grid; grid-template-rows: var(--bar-h) minmax(0, 1fr) auto auto;
  gap: 0 0; block-size: 100%; min-block-size: 0;
}
.buehne > .kopf, .buehne > .seg, .buehne > .untertitel { background: var(--bg-canvas); }
.buehne > .seg {
  background-color: var(--bg-canvas);
  background-image: linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 12%)), var(--segment-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
:root[data-theme="dark"] .buehne > .seg {
  background-image: var(--segment-bg-dark);
}
.buehne > .kopf { border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
.buehne > .seg { border-radius: 0 0 var(--r-2xl) var(--r-2xl); }
.buehne > .untertitel { border-radius: 0 0 var(--r-2xl) var(--r-2xl); }
.buehne > .seg:has(+ .untertitel:not([hidden])) { border-radius: 0; }

/* ---- Kopfzeile: Titel links, Werkzeugpille rechts ---- */
.kopf {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 var(--sp-3); min-inline-size: 0;
}
.kopf__titel { display: flex; align-items: baseline; gap: .5rem; min-inline-size: 0; flex: 1 1 auto; }
.kopf__kapitel {
  flex: 0 0 auto; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--brand-fg);
}
.kopf__trenner { color: var(--fg-subtle); }
.kopf__segment {
  min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--fw-bold) var(--fs-sm)/1.2 var(--font-ui); letter-spacing: var(--track-tight); color: var(--fg-strong);
}
.kopf__werkzeuge {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-1);
  padding: 4px; border-radius: var(--r-pill); background: var(--bg-sunken);
}
.pille {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 32px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--bg-canvas); color: var(--fg-strong); box-shadow: var(--sh-1);
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
  transition: background var(--mo-fast) var(--ease-move), color var(--mo-fast) var(--ease-move);
}
.pille:hover { background: var(--bg-fill); }
.pille[aria-pressed="true"] { background: var(--accent); color: var(--bg-canvas); }
.pille--zahl { cursor: default; box-shadow: none; background: transparent; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pille--zahl:hover { background: transparent; }

/* ---- Segmentfläche ---- */
.seg {
  min-block-size: 0; display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-3) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  overflow-y: auto; scrollbar-gutter: stable;
}
.seg__kopf { display: none; }

/* ------------------------------------------------------------- FOLIE --- */
/* Die Sprechfolie liegt auf dem Blatt selbst — dieselbe Fläche, dieselben
   Tokens wie die Hülle, kein eigener dunkler Kasten. Drei Zustände:
     intro   Titel groß und mittig, bis das erste Element gesprochen wird
     lauf    Titel oben, Karten im Raster, das aktuelle hervorgehoben
   Die Wörter jeder Karte erscheinen einzeln, im Takt der Sprache. */
.folie {
  position: relative; flex: 1 1 auto; min-block-size: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding: clamp(.5rem, 1.5vw, 1.25rem) clamp(.25rem, 1.5vw, 1.25rem) clamp(.5rem, 1.5vw, 1.25rem);
}
.folie__motiv {
  position: absolute; grid-area: 1 / 1 / -1 / -1; z-index: 0;
  top: clamp(.5rem, 1.5vw, 1.25rem); right: clamp(.25rem, 1.5vw, 1.25rem);
  inline-size: clamp(2.6rem, 5vw, 3.6rem); block-size: auto;
  color: var(--line-strong); pointer-events: none;
  transition: opacity var(--mo-slow) var(--ease-move);
}
.folie__motiv svg { inline-size: 100%; block-size: auto; }
.folie__kopf { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: .6rem; padding-inline-end: clamp(3rem, 7vw, 5rem); min-inline-size: 0;
  transition: transform var(--mo-stage) var(--ease-move); }
.folie__kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--fg-subtle);
}
.folie__kicker b { color: var(--brand-fg); }
.folie__kicker span:empty { display: none; }
.folie__kicker span::before { content: "·"; margin-inline-end: .55rem; color: var(--fg-subtle); }
.folie__titel {
  margin: 0; font: var(--fw-bold) clamp(1.5rem, 1rem + 1.8vw, 2.6rem)/1.04 var(--font-display);
  letter-spacing: -.028em; color: var(--fg-strong); text-wrap: balance; max-inline-size: 22ch;
  transition: font-size var(--mo-stage) var(--ease-move);
}
/* Intro: solange noch kein Element gesprochen ist, trägt der Titel die Folie. */
.folie[data-phase="intro"] .folie__kopf { grid-row: 1 / span 2; align-self: center; justify-self: start; padding-block: clamp(1rem, 4vh, 3rem); }
.folie[data-phase="intro"] .folie__titel { font-size: clamp(2rem, 1.2rem + 3.2vw, 4.4rem); max-inline-size: 16ch; }
.folie[data-phase="intro"] .folie__raster { opacity: 0; pointer-events: none; }

/* ---- Karten ---- */
.folie__raster {
  grid-row: 2; grid-column: 1; display: grid; gap: clamp(.6rem, 1.2vw, .9rem); min-block-size: 0;
  grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); align-self: center; inline-size: 100%;
  max-block-size: var(--raster-max, 30rem); transition: opacity var(--mo-slow) var(--ease-move);
}
.folie__raster[data-n="1"] { --spalten: 1; --raster-max: 16rem; }
.folie__raster[data-n="2"] { --spalten: 2; --raster-max: 16rem; }
.folie__raster[data-n="3"] { --spalten: 3; --raster-max: 16rem; }
.folie__raster[data-n="4"] { --spalten: 2; --raster-max: 30rem; }
.folie__el {
  position: relative; display: flex; flex-direction: column; gap: .7rem; justify-content: space-between;
  min-block-size: 0; overflow: hidden; padding: clamp(.9rem, 1.6vw, 1.4rem) clamp(1rem, 1.8vw, 1.5rem);
  border-radius: var(--r-xl); background: var(--bg-sunken); border: 1px solid transparent;
  font: var(--fw-medium) clamp(1.05rem, .9rem + .8vw, 1.5rem)/1.22 var(--font-display);
  letter-spacing: -.02em; color: var(--fg-muted); text-wrap: pretty;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--mo-slow) var(--ease-enter), transform var(--mo-slow) var(--ease-enter),
              background var(--mo-normal) var(--ease-move), color var(--mo-normal) var(--ease-move),
              box-shadow var(--mo-normal) var(--ease-move), border-color var(--mo-normal) var(--ease-move);
}
.folie__el[data-sichtbar="ja"] { opacity: 1; transform: none; }
.folie__el[data-aktiv="ja"] { background: var(--bg-canvas); color: var(--fg-strong); border-color: var(--line-default); box-shadow: var(--sh-3); }
:root[data-theme="dark"] .folie__el[data-aktiv="ja"]:not([data-art="merke"]):not([data-art="eselsbruecke"]):not([data-art="frage"]):not([data-art="warnung"]) { background: var(--bg-fill); }
.folie__nr {
  display: inline-flex; align-items: center; gap: .5rem;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-num); letter-spacing: var(--track-label);
  color: var(--fg-subtle); font-variant-numeric: tabular-nums;
}
.folie__nr::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--line-strong); transition: background var(--mo-normal) var(--ease-move), transform var(--mo-normal) var(--ease-enter); }
.folie__el[data-aktiv="ja"] .folie__nr { color: var(--brand-fg); }
.folie__el[data-aktiv="ja"] .folie__nr::before { background: var(--brand); transform: scale(1.3); }
.folie__text { display: block; }
/* Die Wörter treten einzeln auf: von unten, leicht gestaucht, ohne Nachwippen. */
.folie__wort { display: inline-block; opacity: 0; transform: translateY(.45em) scale(.92); transform-origin: 0 100%;
  transition: opacity 260ms var(--ease-enter), transform 320ms var(--ease-enter); transition-delay: var(--verzug, 0ms); }
.folie__el[data-sichtbar="ja"] .folie__wort { opacity: 1; transform: none; }
.folie__el[data-art="frage"] { background: var(--brand-soft); color: var(--brand-fg); font-weight: var(--fw-bold); }
.folie__el[data-art="frage"][data-aktiv="ja"] { background: var(--brand); color: #fff; border-color: transparent; }
.folie__el[data-art="frage"] .folie__nr { color: var(--brand-fg); }
.folie__el[data-art="frage"][data-aktiv="ja"] .folie__nr { color: rgba(255, 255, 255, .8); }
.folie__el[data-art="frage"][data-aktiv="ja"] .folie__nr::before { background: #fff; }
.folie__el[data-art="hinweis"] { grid-column: 1 / -1; font: var(--fw-normal) var(--fs-md)/1.5 var(--font-ui); letter-spacing: var(--track-tight); background: transparent; border: 1px dashed var(--line-strong); }
.folie__raster[data-n="1"] .folie__el { justify-content: center; align-items: center; text-align: center; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.7rem); }
.folie__raster[data-n="2"] .folie__el, .folie__raster[data-n="3"] .folie__el { font-size: clamp(1.15rem, .95rem + 1vw, 1.8rem); }

/* ---- Ersatzmarke ----
   Die Folie hatte hier einmal eine eigene Taktleiste (Punkte, Balken, Zeit).
   Sie ist entfallen: dieselbe Zahl stand schon in der Wiedergabepille unter
   der Buehne. Geblieben ist nur die Marke fuer den tonlosen Ersatzlauf. */
.folie__ersatz { position: absolute; inset-block-end: .35rem; inset-inline-start: .25rem; z-index: 4;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--bad-fg); background: var(--bad-soft); border-radius: var(--r-pill); padding: .3rem .6rem; }

/* ---- Start-Tor: Browser lassen Ton erst nach einer Geste zu ---- */
.folie__tor {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  border-radius: var(--r-xl); background: color-mix(in srgb, var(--bg-canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.folie__tor button {
  display: inline-flex; align-items: center; gap: .9rem; padding: .6rem 1.6rem .6rem .6rem;
  border: 0; border-radius: var(--r-pill); background: var(--bg-inverse); color: #fff; cursor: pointer;
  font: var(--fw-bold) var(--fs-sm)/1.2 var(--font-ui); box-shadow: var(--sh-3);
  transition: transform var(--mo-fast) var(--ease-move), background var(--mo-fast) var(--ease-move);
}
.folie__tor button:hover { transform: translateY(-1px); }
.folie__tor button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.folie__tor button i { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--brand); }
.folie__tor button svg { inline-size: 20px; block-size: 20px; fill: #fff; }
.folie__tor small { display: block; margin-top: .2rem; font: var(--fw-medium) var(--fs-micro)/1.3 var(--font-ui); color: rgba(255, 255, 255, .65); }
@media (prefers-reduced-motion: reduce) {
  .folie__el, .folie__wort { transition: opacity var(--mo-instant) linear; transform: none; }
}

/* -------------------------------------------------------- Untertitel --- */
.untertitel {
  min-block-size: 3.2rem; display: flex; align-items: center; justify-content: center;
  margin: 0 clamp(1rem, 3vw, 2.5rem) clamp(.75rem, 2vw, 1.5rem);
  padding: .65rem 1.1rem; border-radius: var(--r-lg);
  font: var(--fw-medium) var(--fs-md)/var(--lh-body) var(--font-ui);
  color: var(--fg-strong); background: var(--bg-sunken); text-align: center;
}

/* -------------------------------------------------- Wiedergabepille --- */
/* Die einzige dunkle Bedienfläche — Pille, abgesetzt vom Blatt, wie in der
   Vorlage. Der runde rote Knopf ist die primäre Handlung: abspielen. */
/* Der Innenabstand ist nicht Geschmack: ohne ihn ist die Pille genau so hoch
   wie der runde Knopf (52px), und weil die Pille selbst rund ist, schneidet
   ihre Kante den Knopf oben und unten sichtbar an. 10px ringsum setzen den
   Knopf mittig in die Rundung — Pillenradius 36px, Knopfradius 26px. */
.leiste {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--gap-shell); padding: var(--leiste-luft) var(--leiste-luft);
  border-radius: var(--r-pill); background: var(--bg-inverse); color: rgba(255, 255, 255, .7);
  min-inline-size: 0; --leiste-luft: 10px;
}
.leiste__play {
  flex: 0 0 auto; display: grid; place-items: center; inline-size: 52px; block-size: 52px;
  border: 0; border-radius: var(--r-pill); background: var(--brand); color: #fff; cursor: pointer;
  transition: background var(--mo-fast) var(--ease-move), transform var(--mo-instant) var(--ease-move);
}
.leiste__play:hover { background: var(--brand-hover); }
.leiste__play:active { transform: scale(.94); }
.leiste__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.leiste__ikon--play { display: none; }
.leiste__play[aria-pressed="true"] .leiste__ikon--pause { display: none; }
.leiste__play[aria-pressed="true"] .leiste__ikon--play { display: block; }
.leiste__zeit { flex: 0 0 auto; font: var(--fw-bold) var(--fs-2xs)/1 var(--font-num); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); min-inline-size: 4ch; }
.leiste__zeit--gesamt { color: rgba(255, 255, 255, .5); }
/* Die Spur ist die Flugstrecke: die rote Fuellung ist die zurueckgelegte
   Bahn, das Flugzeug sitzt an ihrer Spitze. Kein overflow:hidden — sonst
   waere das Flugzeug am Rand der Spur abgeschnitten; die Fuellung braucht es
   nicht, sie traegt ihre eigene Rundung. */
.leiste__spur {
  position: relative; flex: 1 1 auto; block-size: 8px; min-inline-size: 4rem;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .14);
}
/* Kein CSS-Uebergang: player.js schreibt Breite und Ort im rAF-Takt, also in
   jedem Bild. Eine zusaetzliche Blende liefe der Wahrheit hinterher und
   erzeugte genau das Ruckeln, das sie glaetten soll. */
.leiste__fuellung { block-size: 100%; inline-size: 0; border-radius: var(--r-pill); background: var(--brand); }
/* Feste Masse, kein Shrink-to-fit: Am rechten Ende (--stand: 100%) bleibt dem
   absolut gesetzten Kasten sonst null Breite, und das Flugzeug verschwindet
   genau dort, wo der Kurs zu Ende ist. */
.leiste__flieger {
  position: absolute; inset-block-start: 50%; inset-inline-start: var(--stand, 0%);
  display: block; inline-size: 22px; block-size: 22px; line-height: 0;
  color: #fff; pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.leiste__flieger svg { display: block; inline-size: 100%; block-size: 100%; }
/* Waehrend der Kurs laeuft, traegt das Flugzeug leicht auf und ab. Steht der
   Kurs (aria-pressed="true" = pausiert), steht auch das Flugzeug. */
.leiste:has(.leiste__play[aria-pressed="false"]) .leiste__flieger { animation: flug 2.6s ease-in-out infinite; }
@keyframes flug {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50%      { transform: translate(-50%, calc(-50% - 2px)) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .leiste__flieger { animation: none !important; }
}
.bedienung { display: flex; gap: var(--sp-2); align-items: center; }
.bedienung--rechts { margin-inline-start: auto; }
.leiste__art {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label);
  color: rgba(255, 255, 255, .5); padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08);
}
.leiste__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-block-size: 44px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui);
  transition: background var(--mo-fast) var(--ease-move), color var(--mo-fast) var(--ease-move), transform var(--mo-instant) var(--ease-move);
}
.leiste__knopf:active:not(:disabled) { transform: scale(.96); }
.leiste__knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.leiste__knopf--zurueck { inline-size: 44px; background: transparent; color: rgba(255, 255, 255, .75); }
.leiste__knopf--zurueck:hover:not(:disabled) { background: rgba(255, 255, 255, .12); color: #fff; }
.leiste__knopf--weiter { padding: 0 var(--sp-3) 0 var(--sp-5); background: #fff; color: var(--c-n-900); }
.leiste__knopf--weiter:hover:not(:disabled) { background: var(--c-n-50); }
/* Gesperrt: deckende Farben statt Alpha — halbtransparentes Weiss misst kein
   Kontrastmesser richtig, und der Zustand soll trotzdem lesbar bleiben (5,6:1). */
.leiste__knopf--weiter:disabled { background: var(--c-n-700); color: var(--c-n-300); cursor: not-allowed; }
:root[data-theme="dark"] .leiste { background: var(--c-n-950); }

@media (max-width: 640px) {
  .leiste__art, .leiste__zeit--gesamt { display: none; }
  /* Auf dem Handy bleibt der Spur nur noch gut 80 px. Ein 22-px-Flugzeug
     deckte davon ein Viertel ab und liesse den Stand nicht mehr ablesen. */
  .leiste { gap: var(--sp-2); --leiste-luft: 8px; }
  .leiste__flieger { inline-size: 17px; block-size: 17px; }
  .kopf__werkzeuge .pille span { display: none; }
  .pille { padding: 0 var(--sp-2); }
}

/* ------------------------------------------------------------ Auftrag --- */
/* Jede Strecke beginnt mit dem Auftrag: Was ist zu tun, in welchen Schritten,
   und wie geht es ohne Maus. Erst darunter steht die Aufgabe selbst. */
.auftrag {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-5); align-items: start;
  padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--r-xl);
  background: var(--bg-sunken);
}
.auftrag__motiv {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: var(--r-lg);
  background: var(--bg-inverse); color: #fff;
}
.auftrag__motiv svg { inline-size: 34px; block-size: 34px; }
.auftrag__text { display: flex; flex-direction: column; gap: .45rem; min-inline-size: 0; }
.auftrag__kicker { font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--brand-fg); }
.auftrag__anweisung { margin: 0; font: var(--fw-bold) var(--fs-lg)/1.3 var(--font-ui); letter-spacing: var(--track-tight); color: var(--fg-strong); text-wrap: balance; }
.auftrag__schritte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.auftrag__schritt {
  counter-increment: schritt; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .6rem; align-items: start;
  padding: .7rem .8rem; border-radius: var(--r-lg); background: var(--bg-canvas);
  font: var(--fw-medium) var(--fs-xs)/1.45 var(--font-ui); color: var(--fg-default);
}
.auftrag__schritt::before {
  content: counter(schritt); display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem;
  border-radius: var(--r-pill); background: var(--brand); color: #fff;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-num);
}
.auftrag__tasten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font: var(--fw-medium) var(--fs-2xs)/1.3 var(--font-ui); color: var(--fg-muted); }
.auftrag__tasten kbd {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); padding: .25rem .45rem;
  border-radius: var(--r-xs); background: var(--bg-canvas); color: var(--fg-strong); box-shadow: var(--sh-1);
}
.auftrag__stand {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem;
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-num); color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.auftrag__stand .balken { flex: 1 1 auto; block-size: 6px; border-radius: var(--r-pill); background: var(--bg-fill); overflow: hidden; }
.auftrag__stand .balken i { display: block; block-size: 100%; inline-size: 0; background: var(--brand); transition: inline-size var(--mo-slow) var(--ease-move); }
.auftrag__stand[data-fertig="ja"] .balken i { background: var(--ok); }
@media (max-width: 640px) { .auftrag { grid-template-columns: minmax(0, 1fr); } .auftrag__motiv { display: none; } }

/* ------------------------------------------------------- Interaktion --- */
.ia { display: flex; flex-direction: column; gap: var(--sp-5); inline-size: 100%; }
.ia__anweisung { display: none; }
.ia__hilfe { display: none; }
.ia__szene {
  margin: 0; padding: .7rem 1rem; border-radius: var(--r-lg);
  border-inline-start: 3px solid var(--line-strong); background: var(--bg-sunken);
  font: var(--fw-normal) var(--fs-sm)/1.5 var(--font-ui); color: var(--fg-muted); font-style: italic;
}
.tafel { border-radius: var(--r-xl); background: var(--bg-sunken); padding: clamp(.9rem, 2vw, 1.25rem); min-inline-size: 0; }
.tafel__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .75rem;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle);
}
.tafel__kopf .num { color: var(--fg-muted); }

/* ---- Rückmeldung ---- */
.rueck {
  margin-block-start: auto; display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1.1rem; border-radius: var(--r-lg);
  font: var(--fw-medium) var(--fs-sm)/1.5 var(--font-ui);
  background: var(--bg-fill); color: var(--fg-strong);
  border-inline-start: 4px solid var(--line-strong);
}
.rueck::before {
  content: ""; flex: 0 0 auto; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; margin-top: .05rem;
  background: var(--line-strong);
}
.rueck[data-art="richtig"] { background: var(--ok-soft); color: var(--ok-fg); border-inline-start-color: var(--ok); }
.rueck[data-art="richtig"]::before { background: var(--ok); }
.rueck[data-art="falsch"] { background: var(--bad-soft); color: var(--bad-fg); border-inline-start-color: var(--bad); }
.rueck[data-art="falsch"]::before { background: var(--bad); }
.rueck[data-art="teilweise"] { background: var(--warn-soft); color: var(--fg-strong); border-inline-start-color: var(--warn); }
.rueck[data-art="teilweise"]::before { background: var(--warn); }

/* ---- Antwortkasten in den Strecken (Post, Check, Gespräch, Markieren) ---- */
.antwort {
  margin: 0; padding: .7rem .9rem; border-radius: var(--r-md);
  font: var(--fw-medium) var(--fs-xs)/1.55 var(--font-ui);
  border-inline-start: 4px solid var(--line-strong); background: var(--bg-fill); color: var(--fg-default);
}
.antwort[data-art="richtig"] { background: var(--ok-soft); color: var(--ok-fg); border-inline-start-color: var(--ok); }
.antwort[data-art="falsch"] { background: var(--bad-soft); color: var(--bad-fg); border-inline-start-color: var(--bad); }
.antwort[data-art="teilweise"] { background: var(--warn-soft); color: var(--fg-strong); border-inline-start-color: var(--warn); }
.antwort[data-art="aufgeloest"] { background: var(--bg-sunken); color: var(--fg-muted); border-inline-start-color: var(--line-strong); }

/* ---- Zuordnung ---- */
.ia__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .ia__spalten { grid-template-columns: minmax(0, 1fr); } }
.ia__stapel { display: flex; flex-direction: column; gap: .5rem; min-inline-size: 0; }
.karte {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start;
  text-align: start; inline-size: 100%; min-inline-size: 0;
  background: var(--bg-canvas); color: var(--fg-default);
  border: 1px solid var(--line-default); border-radius: var(--r-lg);
  padding: .75rem .9rem; cursor: grab;
  font: var(--fw-medium) var(--fs-sm)/1.45 var(--font-ui); overflow-wrap: anywhere;
  box-shadow: var(--sh-1);
  transition: transform var(--mo-fast) var(--ease-move), border-color var(--mo-fast) var(--ease-move), box-shadow var(--mo-fast) var(--ease-move);
}
.karte::before {
  content: ""; inline-size: 6px; block-size: 100%; min-block-size: 1.4rem; border-radius: 3px;
  background: var(--line-strong); align-self: stretch;
}
.karte:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--sh-2); }
.karte:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.karte[aria-selected="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--fg-strong); box-shadow: 0 0 0 1px var(--brand); }
.karte[aria-selected="true"]::before { background: var(--brand); }
.karte[data-zieht="ja"] { opacity: .5; cursor: grabbing; }
.ia__koerbe { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; min-inline-size: 0; }
.korb {
  display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; min-inline-size: 0;
  background: var(--bg-sunken); border: 2px dashed transparent;
  transition: border-color var(--mo-fast) var(--ease-move), background var(--mo-fast) var(--ease-move);
}
.korb[data-ziel="ja"] { border-color: var(--brand); background: var(--brand-soft); }
.korb__knopf {
  inline-size: 100%; text-align: start; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: center;
  background: var(--bg-inverse); color: #fff; border: 0;
  padding: .8rem .9rem;
  font: var(--fw-bold) var(--fs-sm)/1.3 var(--font-ui);
  transition: background var(--mo-fast) var(--ease-move);
}
.korb__knopf:hover:not(:disabled) { background: var(--c-n-800); }
:root[data-theme="dark"] .korb__knopf { background: var(--c-n-700); }
.korb__knopf:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.korb__knopf:disabled { cursor: default; }
.korb__titel { grid-column: 1; }
.korb__ziffer {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem;
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .14); font: var(--fw-bold) var(--fs-micro)/1 var(--font-num);
}
.korb__hinweis { grid-column: 1; font: var(--fw-normal) var(--fs-2xs)/1.3 var(--font-ui); color: rgba(255, 255, 255, .62); }
.korb__inhalt { list-style: none; margin: 0; padding: .5rem; display: flex; flex-direction: column; gap: .35rem; min-block-size: 3.2rem; }
.korb__inhalt:empty::after {
  content: "hier ablegen"; display: grid; place-items: center; block-size: 2.4rem; border-radius: var(--r-md);
  border: 1px dashed var(--line-strong); color: var(--fg-subtle); font: var(--fw-medium) var(--fs-micro)/1 var(--font-ui);
}
.korb__inhalt li {
  padding: .5rem .7rem; border-radius: var(--r-md);
  font: var(--fw-medium) var(--fs-xs)/1.4 var(--font-ui); color: var(--ok-fg);
  background: var(--ok-soft); border-inline-start: 3px solid var(--ok);
  animation: einsortiert var(--mo-slow) var(--ease-enter);
}
@keyframes einsortiert { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Postfach: ein Postfach, keine Liste ---- */
.post { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.post__zeile {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .35rem .9rem;
  padding: .9rem 1rem .9rem .9rem; min-inline-size: 0;
  border-radius: var(--r-xl); background: var(--bg-canvas); border: 1px solid var(--line-default);
  transition: border-color var(--mo-fast) var(--ease-move), box-shadow var(--mo-fast) var(--ease-move);
}
.post__zeile:hover { box-shadow: var(--sh-2); }
.post__zeile[data-art="richtig"] { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.post__zeile[data-art="falsch"] { border-color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); }
.post__zeile[data-art="teilweise"] { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.post__avatar {
  grid-row: 1 / span 3; display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: var(--r-pill); background: var(--bg-inverse); color: #fff;
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); letter-spacing: 0;
}
.post__zeile[data-kanal="SMS"] .post__avatar { background: var(--c-n-600); }
.post__zeile[data-kanal="Anruf"] .post__avatar, .post__zeile[data-kanal="Telefon"] .post__avatar { background: var(--c-n-500); }
.post__kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-inline-size: 0; }
.post__kanal {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--fg-muted); background: var(--bg-fill); border-radius: var(--r-pill); padding: .3rem .55rem;
}
.post__name { font: var(--fw-bold) var(--fs-sm)/1.3 var(--font-ui); color: var(--fg-strong); overflow-wrap: anywhere; }
.post__zeit { font: var(--fw-medium) var(--fs-micro)/1 var(--font-num); color: var(--fg-subtle); }
.post__aufklappen { margin-inline-start: auto; }
.post__betreff { margin: 0; font: var(--fw-bold) var(--fs-md)/1.35 var(--font-ui); color: var(--fg-strong); letter-spacing: var(--track-tight); }
.post__vorschau { margin: 0; font: var(--fw-normal) var(--fs-sm)/1.5 var(--font-ui); color: var(--fg-muted); }
.post__link {
  display: inline; font: inherit; color: var(--c-n-900); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: .15em;
}
:root[data-theme="dark"] .post__link { color: var(--fg-strong); }
.post__details {
  grid-column: 2; margin: .35rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .9rem;
  font: var(--fw-medium) var(--fs-xs)/1.45 var(--font-mono);
  background: var(--bg-inverse); color: #e0e2e5; border-radius: var(--r-lg); padding: .8rem 1rem;
}
.post__details dt { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-label); color: rgba(255, 255, 255, .55); align-self: center; }
.post__details dd { margin: 0; overflow-wrap: anywhere; color: #fff; }
.post__details dd[data-verdacht="ja"] { color: #ffb3ae; }
.post__details dd[data-verdacht="ja"]::after { content: " ≠ Linktext"; font-family: var(--font-ui); font-size: var(--fs-micro); color: #ffb3ae; opacity: .9; }
.post__wahl { grid-column: 2; display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
.post__wahl .btn { gap: .4rem; }
.post__wahl .btn[data-wahl="melden"] { --btn-bg: var(--brand); --btn-fg: #fff; }
.post__wahl .btn[data-wahl="melden"]:hover:not(:disabled) { --btn-bg: var(--brand-hover); }
.post__wahl .btn[data-wahl="vertrauen"] { --btn-bg: var(--accent); --btn-fg: var(--bg-canvas); }
.post__wahl .btn[data-wahl="vertrauen"]:hover:not(:disabled) { --btn-bg: var(--fg-default); }
/* Nach der Entscheidung: kein Ausbleichen per opacity — das drueckt weisse
   Schrift im dunklen Schema auf 2,6:1. Stattdessen feste, gepruefte Paare. */
.post__wahl .btn:disabled { opacity: 1; --btn-bg: var(--bg-fill); --btn-fg: var(--fg-muted); }
.post__wahl .btn[data-gewaehlt="ja"] { --btn-bg: var(--ok-soft); --btn-fg: var(--ok-fg); --btn-line: var(--ok); opacity: 1; }
.post__antwort { grid-column: 2; }

/* ---- Gespräch: ein Chat ---- */
.gespr { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
.gespr__zug { display: flex; flex-direction: column; gap: .6rem; min-inline-size: 0; padding-inline-start: .75rem; border-inline-start: 4px solid transparent; }
/* Der abgeschlossene Zug traegt seinen Ausgang als Balken — nicht nur in der
   weichen Flaeche der Folge (WCAG 1.4.11 will 3:1 fuer reine Zustandsfarbe). */
.gespr__zug[data-art="richtig"] { border-inline-start-color: var(--ok); }
.gespr__zug[data-art="falsch"] { border-inline-start-color: var(--bad); }
.gespr__sagt {
  position: relative; align-self: flex-start; max-inline-size: min(100%, 44rem);
  margin: 0 0 0 3rem; padding: .9rem 1.1rem;
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-xs);
  background: var(--bg-fill); color: var(--fg-strong);
  font: var(--fw-medium) var(--fs-md)/1.5 var(--font-ui);
}
.gespr__sagt::before {
  content: attr(data-wer); position: absolute; inset-inline-start: -3rem; inset-block-end: 0;
  display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--r-pill);
  background: var(--bg-inverse); color: #fff; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
}
.gespr__hebel {
  align-self: flex-start; margin-inline-start: 3rem;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--brand-fg); background: var(--brand-soft); border-radius: var(--r-pill); padding: .3rem .6rem;
}
.gespr__wahl { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.gespr__wahl::before {
  content: "Sie antworten"; align-self: flex-end; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); margin-block-end: .1rem;
}
.gespr__zug[data-fertig="ja"] .gespr__wahl::before { display: none; }
.gespr__antwort {
  max-inline-size: min(100%, 40rem); text-align: start; justify-content: flex-start; white-space: normal;
  min-block-size: 0; padding: .7rem 1rem; border-radius: var(--r-xl) var(--r-xl) var(--r-xs) var(--r-xl);
  font-size: var(--fs-sm); line-height: 1.4; font-weight: var(--fw-medium);
  --btn-bg: var(--bg-canvas); --btn-line: var(--line-strong);
}
.gespr__antwort:hover:not(:disabled) { --btn-bg: var(--brand-soft); --btn-line: var(--brand); }
.gespr__antwort:disabled:not([data-gewaehlt="ja"]) { display: none; }
.gespr__antwort[data-gewaehlt="ja"] { opacity: 1; --btn-bg: var(--accent); --btn-fg: var(--bg-canvas); --btn-line: transparent; cursor: default; }
.gespr__folge {
  align-self: stretch; margin: 0; padding: .7rem .9rem; border-radius: var(--r-md);
  font: var(--fw-normal) var(--fs-xs)/1.55 var(--font-ui); border-inline-start: 4px solid var(--line-strong); background: var(--bg-fill);
}
.gespr__folge b { display: block; margin-block-end: .2rem; font-weight: var(--fw-bold); }
.gespr__folge[data-art="richtig"] { background: var(--ok-soft); color: var(--ok-fg); border-inline-start-color: var(--ok); }
.gespr__folge[data-art="falsch"] { background: var(--bad-soft); color: var(--bad-fg); border-inline-start-color: var(--bad); }
.gespr__ende { border-radius: var(--r-xl); padding: 1rem 1.1rem; background: var(--bg-sunken); }
.gespr__abschluss { margin: 0 0 .75rem; font: var(--fw-medium) var(--fs-sm)/1.55 var(--font-ui); color: var(--fg-strong); }
.gespr__bilanz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
.gespr__bilanz li {
  display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem; border-radius: var(--r-lg);
  font: var(--fw-medium) var(--fs-2xs)/1.3 var(--font-ui); background: var(--ok-soft); color: var(--ok-fg); border-inline-start: 3px solid var(--ok);
}
.gespr__bilanz li b { color: inherit; font-size: var(--fs-xs); }
.gespr__bilanz li[data-art="falsch"] { background: var(--bad-soft); color: var(--bad-fg); border-inline-start-color: var(--bad); }

/* ---- Regler: die Zeitachse ---- */
.ia--regler .ia__spalten { grid-template-columns: minmax(0, 1fr); }
.regler { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--r-xl); background: var(--bg-sunken); }
.regler__label { font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); }
.regler__eingabe { inline-size: 100%; accent-color: var(--brand); block-size: 2.2rem; cursor: pointer; }
.regler__eingabe:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--r-md); }
.regler__achse { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: .4rem; }
.regler__station {
  flex: 1 1 0; min-inline-size: 0; text-align: center; padding: .55rem .2rem 0; overflow-wrap: anywhere;
  font: var(--fw-bold) var(--fs-xs)/1.3 var(--font-num); color: var(--fg-subtle);
  border-block-start: 3px solid var(--line-default);
  transition: color var(--mo-fast) var(--ease-move), border-color var(--mo-fast) var(--ease-move);
}
.regler__station[data-besucht="ja"] { color: var(--fg-muted); border-block-start-color: var(--line-strong); }
.regler__station[data-aktiv="ja"] { color: var(--brand-fg); border-block-start-color: var(--brand); }
.regler__folge {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; align-items: start;
  border-radius: var(--r-xl); padding: clamp(1rem, 2vw, 1.4rem); background: var(--bg-canvas); border: 1px solid var(--line-default);
}
.regler__folge[data-art="signal"] { border-color: var(--bad); box-shadow: inset 5px 0 0 var(--bad); }
.regler__titel {
  grid-row: 1 / span 3; margin: 0; font: var(--fw-black) clamp(1.8rem, 1.2rem + 2vw, 3rem)/1 var(--font-num);
  letter-spacing: var(--track-display); color: var(--fg-strong); font-variant-numeric: tabular-nums; min-inline-size: 5ch;
}
.regler__folge[data-art="signal"] .regler__titel { color: var(--bad); }
.regler__lage {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--fg-subtle); justify-self: start; border-radius: var(--r-pill); padding: .3rem .6rem; background: var(--bg-fill);
}
.regler__folge[data-art="signal"] .regler__lage { background: var(--bad-soft); color: var(--bad-fg); }
.regler__text { margin: 0; font: var(--fw-medium) var(--fs-md)/1.5 var(--font-ui); color: var(--fg-strong); }
.regler__liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.regler__liste li { padding: .45rem .7rem; border-radius: var(--r-md); background: var(--bg-sunken); font: var(--fw-normal) var(--fs-xs)/1.5 var(--font-ui); color: var(--fg-default); border-inline-start: 3px solid var(--line-strong); }
@media (max-width: 640px) { .regler__folge { grid-template-columns: minmax(0, 1fr); } .regler__titel { grid-row: auto; } }

/* ---- Rundgang: die Kontrollspur ---- */
.rund { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .rund { grid-template-columns: minmax(0, 1fr); } }
.rund__plan { position: relative; display: flex; flex-direction: column; gap: .35rem; min-inline-size: 0; padding: .5rem 0 .5rem 1.4rem; }
.rund__plan::before {
  content: ""; position: absolute; inset-block: 1.4rem 1.4rem; inset-inline-start: calc(1.4rem + 1.35rem - 2px);
  inline-size: 4px; border-radius: 2px; background: var(--line-default);
}
.rund__geraet {
  position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: .7rem; align-items: center;
  text-align: start; inline-size: 100%; min-inline-size: 0;
  background: var(--bg-canvas); color: var(--fg-default);
  border: 1px solid var(--line-default); border-radius: var(--r-lg);
  padding: .55rem .8rem .55rem .55rem; cursor: pointer;
  font: var(--fw-medium) var(--fs-sm)/1.35 var(--font-ui); overflow-wrap: anywhere;
  transition: border-color var(--mo-fast) var(--ease-move), background var(--mo-fast) var(--ease-move);
}
.rund__geraet:hover { border-color: var(--line-strong); }
.rund__geraet:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rund__geraet[data-gesehen="ja"] { border-color: var(--ok); }
.rund__geraet[data-gesehen="ja"] .rund__nr { background: var(--ok); color: #fff; border-color: var(--ok); }
.rund__geraet[data-aktiv="ja"] { background: var(--brand-soft); border-color: var(--brand); color: var(--fg-strong); font-weight: var(--fw-bold); }
.rund__geraet[data-aktiv="ja"] .rund__nr { background: var(--brand); color: #fff; border-color: var(--brand); }
.rund__nr {
  display: grid; place-items: center; inline-size: 2.7rem; block-size: 2.7rem;
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-num); border-radius: var(--r-pill);
  border: 3px solid var(--line-default); background: var(--bg-canvas); color: var(--fg-muted);
}
.rund__tafel { min-block-size: 12rem; border-radius: var(--r-xl); padding: clamp(1rem, 2vw, 1.4rem); background: var(--bg-sunken); min-inline-size: 0; }
.rund__leer { display: grid; place-items: center; block-size: 100%; min-block-size: 10rem; text-align: center; color: var(--fg-subtle); font: var(--fw-medium) var(--fs-sm)/1.5 var(--font-ui); }
.rund__titel { margin: 0 0 .8rem; font: var(--fw-bold) var(--fs-xl)/1.1 var(--font-ui); letter-spacing: var(--track-display); color: var(--fg-strong); }
.rund__daten { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.rund__daten div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .7rem .9rem; border-radius: var(--r-lg); background: var(--bg-canvas); }
.rund__daten dt { font: var(--fw-bold) var(--fs-micro)/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); }
.rund__daten dd { margin: 0; font: var(--fw-normal) var(--fs-sm)/1.55 var(--font-ui); color: var(--fg-default); }
.rund__daten div[data-art="ausfall"] { box-shadow: inset 4px 0 0 var(--bad); }
.rund__daten div[data-art="ausfall"] dt { color: var(--bad-fg); }

/* ---- Markieren: eine Adresszeile im Browser ---- */
.mark { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; counter-reset: adresse; }
.mark__zeile {
  border-radius: var(--r-xl); padding: .75rem .9rem .9rem; background: var(--bg-sunken);
  display: flex; flex-direction: column; gap: .6rem; min-inline-size: 0; counter-increment: adresse;
  border: 1px solid transparent;
}
.mark__zeile[data-art="richtig"] { border-color: var(--ok); }
.mark__zeile[data-art="falsch"] { border-color: var(--bad); }
.mark__browser { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; }
.mark__punkte { flex: 0 0 auto; display: flex; gap: .3rem; }
.mark__punkte i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--line-strong); }
.mark__leiste {
  flex: 1 1 auto; display: flex; align-items: center; gap: .5rem; min-inline-size: 0;
  background: var(--bg-canvas); border: 1px solid var(--line-default); border-radius: var(--r-pill); padding: .4rem .5rem .4rem .8rem;
}
.mark__schloss { flex: 0 0 auto; display: grid; place-items: center; color: var(--ok); }
.mark__schloss svg { inline-size: 16px; block-size: 16px; }
.mark__teile { display: flex; flex-wrap: wrap; align-items: center; min-inline-size: 0; }
.mark__teil {
  border: 0; background: none; cursor: pointer; padding: .3rem .08rem; border-radius: var(--r-xs);
  font: var(--fw-medium) var(--fs-md)/1.3 var(--font-mono); color: var(--fg-strong);
  box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--mo-fast) var(--ease-move), background var(--mo-fast) var(--ease-move);
}
.mark__teil:hover:not(:disabled) { background: var(--bg-fill); box-shadow: inset 0 -2px 0 var(--line-strong); }
.mark__teil:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.mark__teil[data-markiert="ja"] { background: var(--bad-soft); color: var(--bad-fg); box-shadow: inset 0 -2px 0 var(--bad); }
.mark__teil[data-loesung="ja"] { box-shadow: inset 0 -2px 0 var(--bad); }
.mark__nr { flex: 0 0 auto; font: var(--fw-bold) var(--fs-micro)/1 var(--font-num); color: var(--fg-subtle); min-inline-size: 1.4rem; text-align: end; }
.mark__antwort { margin: 0; }

/* ---- Werkbank: die Passphrase ---- */
.werk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .werk { grid-template-columns: minmax(0, 1fr); } }
.werk__feld { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--r-xl); background: var(--bg-sunken); }
.werk__versprechen {
  margin: 0; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--r-lg);
  background: var(--bg-canvas); color: var(--fg-default); border-inline-start: 3px solid var(--ok);
  font: var(--fw-medium) var(--fs-xs)/1.5 var(--font-ui);
}
.werk__label { font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); }
.werk__eingabe {
  inline-size: 100%; padding: .9rem 1.1rem; border-radius: var(--r-lg);
  border: 2px solid var(--line-strong); background: var(--bg-canvas); color: var(--fg-strong);
  font: var(--fw-medium) clamp(1.1rem, 1rem + .6vw, 1.5rem)/1.3 var(--font-mono);
}
.werk__eingabe:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--fg-strong); }
.werk__meter { display: flex; flex-direction: column; gap: .4rem; }
.werk__skala { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; block-size: 10px; }
.werk__skala i { display: block; border-radius: 3px; background: var(--bg-fill); transition: background var(--mo-normal) var(--ease-move); }
.werk__skala[data-stufe="1"] i:nth-child(-n+1) { background: var(--bad); }
.werk__skala[data-stufe="2"] i:nth-child(-n+2) { background: var(--warn); }
.werk__skala[data-stufe="3"] i:nth-child(-n+3) { background: var(--warn); }
.werk__skala[data-stufe="4"] i:nth-child(-n+4) { background: var(--ok); }
.werk__stufen { display: flex; justify-content: space-between; font: var(--fw-medium) var(--fs-micro)/1 var(--font-ui); color: var(--fg-subtle); }
.werk__ergebnis { min-block-size: 5rem; display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--bg-canvas); border: 1px solid var(--line-default); }
.werk__ergebnis:empty::after { content: "Tippen Sie eine Passphrase — die Schätzung erscheint sofort."; color: var(--fg-subtle); font: var(--fw-medium) var(--fs-xs)/1.5 var(--font-ui); }
.werk__ergebnis[data-art="richtig"] { border-color: var(--ok); }
.werk__ergebnis[data-art="teilweise"] { border-color: var(--warn); }
.werk__ergebnis[data-art="falsch"] { border-color: var(--bad); }
.werk__zahl { font: var(--fw-black) clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.1 var(--font-ui); letter-spacing: var(--track-display); color: var(--fg-strong); }
.werk__ergebnis[data-art="falsch"] .werk__zahl { color: var(--bad); }
.werk__ergebnis[data-art="richtig"] .werk__zahl { color: var(--ok-fg); }
.werk__erklaerung { font: var(--fw-normal) var(--fs-2xs)/1.5 var(--font-ui); color: var(--fg-muted); }
.werk__vergleich { display: flex; flex-direction: column; gap: .5rem; }
.werk__zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center;
  padding: .7rem .9rem; border-radius: var(--r-lg); background: var(--bg-sunken); border-inline-start: 4px solid var(--line-strong);
}
.werk__zeile code { font: var(--fw-bold) var(--fs-sm)/1.3 var(--font-mono); color: var(--fg-strong); background: none; padding: 0; overflow-wrap: anywhere; }
.werk__zeile span { grid-column: 1 / -1; font: var(--fw-medium) var(--fs-2xs)/1.4 var(--font-ui); color: var(--fg-muted); }
.werk__zeile .werk__balken { grid-column: 1 / -1; block-size: 6px; border-radius: 3px; background: var(--bg-fill); overflow: hidden; }
.werk__zeile .werk__balken i { display: block; block-size: 100%; background: var(--line-strong); }
.werk__zeile[data-art="kurz"] { border-inline-start-color: var(--bad); }
.werk__zeile[data-art="kurz"] .werk__balken i { background: var(--bad); }
.werk__zeile[data-art="lang"] { border-inline-start-color: var(--ok); }
.werk__zeile[data-art="lang"] .werk__balken i { background: var(--ok); }

/* ---- Suchbild: der Arbeitsplatz ---- */
.such { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.such__stelle { display: flex; flex-direction: column; gap: .4rem; min-inline-size: 0; }
.such__knopf {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; align-items: start;
  text-align: start; inline-size: 100%; min-inline-size: 0; min-block-size: 4.6rem; cursor: pointer;
  background: var(--bg-canvas); color: var(--fg-default);
  border: 1px solid var(--line-default); border-radius: var(--r-lg);
  padding: .75rem .9rem; font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-ui); overflow-wrap: anywhere;
  transition: border-color var(--mo-fast) var(--ease-move), transform var(--mo-fast) var(--ease-move);
}
.such__knopf:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-1px); }
.such__knopf:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.such__nr {
  display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-pill);
  background: var(--bg-fill); color: var(--fg-muted); font: var(--fw-bold) var(--fs-micro)/1 var(--font-num);
}
.such__stelle[data-art="richtig"] .such__knopf { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-fg); }
.such__stelle[data-art="richtig"] .such__nr { background: var(--ok); color: #fff; }
.such__stelle[data-art="aufgeloest"] .such__knopf { border-style: dashed; color: var(--fg-muted); }
.such__grund { margin: 0; }

/* -------------------------------------------------------------- Video --- */
.video { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-block-size: 0; }
.video__rahmen {
  inline-size: 100%; max-inline-size: 1280px; border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-inverse); box-shadow: var(--sh-2);
}
.video__bild { inline-size: 100%; max-block-size: 100%; display: block; background: #000; aspect-ratio: 16 / 9; }
.video__zeile { display: flex; align-items: center; gap: .75rem; inline-size: 100%; max-inline-size: 1280px; color: var(--fg-muted); font: var(--fw-medium) var(--fs-2xs)/1.3 var(--font-ui); }
.video__zeile b { color: var(--fg-strong); }
.video__fehlt { margin: 0; padding: 1rem; font: var(--fw-medium) var(--fs-sm)/1.5 var(--font-ui); color: #fff; text-align: center; }

/* -------------------------------------------------------------- Check --- */
.ia--check .check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; counter-reset: aufgabe; }
.check__aufgabe {
  display: flex; flex-direction: column; gap: .7rem; min-inline-size: 0; counter-increment: aufgabe;
  border-radius: var(--r-xl); padding: clamp(.9rem, 2vw, 1.25rem); background: var(--bg-sunken); border: 1px solid transparent;
}
.check__aufgabe[data-art="richtig"] { border-color: var(--ok); }
.check__kopf { display: flex; align-items: center; gap: .6rem; }
.check__kopf::before {
  content: "Aufgabe " counter(aufgabe); font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--fg-subtle);
}
.check__format { font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-muted); background: var(--bg-canvas); border-radius: var(--r-pill); padding: .3rem .55rem; }
.check__frage { margin: 0; font: var(--fw-bold) var(--fs-md)/1.4 var(--font-ui); letter-spacing: var(--track-tight); color: var(--fg-strong); }
.check__wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .45rem; align-items: stretch; }
.check__option {
  position: relative;
  display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .7rem; align-items: center;
  text-align: start; white-space: normal; min-block-size: 0; padding: .7rem .8rem;
  border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.4; font-weight: var(--fw-medium);
  --btn-bg: var(--bg-canvas); --btn-line: var(--line-default);
}
.check__option::before {
  content: attr(data-buchstabe); display: grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem;
  border-radius: var(--r-sm); background: var(--bg-fill); color: var(--fg-muted); font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
}
.check__option:hover:not(:disabled) { --btn-bg: var(--brand-soft); --btn-line: var(--brand); }
.check__option[data-falsch="ja"] { --btn-line: var(--bad); }
.check__option[data-falsch="ja"]::before { background: var(--bad); color: #fff; }
.check__pruefen { grid-column: 1 / -1; justify-self: start; }

/* Mehrfachwahl: angekreuzt und falsch trugen beide dasselbe Rot — --bad ist
   derselbe Farbwert wie --brand (tokens.css: --bad: var(--c-rot-500)). Eine
   angekreuzte und eine als falsch markierte Antwort waren dadurch nicht zu
   unterscheiden; wer die falsche abwaehlen wollte, sah keinen Unterschied.
   Getrennt werden sie deshalb an der Form, nicht an der Farbe: angekreuzt ist
   flaechig gefuellt und traegt einen Haken, falsch ist hell mit gestricheltem
   Rand und einem Kreuz. */
.check__option--mehrfach { padding-inline-end: 2.6rem; }
.check__option--mehrfach::after {
  content: ""; position: absolute; inset-inline-end: .8rem; inset-block-start: 50%; translate: 0 -50%;
  inline-size: 1.15rem; block-size: 1.15rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--bg-canvas);
  display: grid; place-items: center; font: var(--fw-bold) var(--fs-micro)/1 var(--font-ui);
}
.check__option--mehrfach[data-angekreuzt="ja"] { --btn-bg: var(--brand); --btn-line: var(--brand); color: var(--fg-onbrand); }
.check__option--mehrfach[data-angekreuzt="ja"]::before { background: #fff; color: var(--brand); }
.check__option--mehrfach[data-angekreuzt="ja"]::after { content: "\2713"; background: #fff; border-color: #fff; color: var(--brand); }
.check__option--mehrfach[data-falsch="ja"] { --btn-bg: var(--bad-soft); --btn-line: var(--bad); color: var(--bad-fg); border-style: dashed; }
.check__option--mehrfach[data-falsch="ja"]::before { background: var(--bad); color: #fff; }
.check__option--mehrfach[data-falsch="ja"]::after { content: "\2715"; background: var(--bg-canvas); border-color: var(--bad); color: var(--bad); }

/* Geloest: gruen schlaegt jede Auswahl- und Fehlermarke, deshalb zuletzt. */
.check__option[data-gewaehlt="ja"] { --btn-bg: var(--ok-soft); --btn-line: var(--ok); opacity: 1; color: var(--ok-fg); border-style: solid; }
.check__option[data-gewaehlt="ja"]::before { background: var(--ok); color: #fff; }
.check__option--mehrfach[data-gewaehlt="ja"]::after { content: "\2713"; background: var(--ok); border-color: var(--ok); color: #fff; }
.check__paare { display: flex; flex-direction: column; gap: .35rem; }
.check__paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); gap: .6rem; align-items: center; padding: .55rem .8rem; border-radius: var(--r-md); background: var(--bg-canvas); font: var(--fw-medium) var(--fs-xs)/1.4 var(--font-ui); }
.check__paar::after { content: ""; }
.check__paar > span:nth-child(2) { color: var(--fg-subtle); }
.check__paar b { color: var(--fg-strong); text-align: end; }
.check__paar[data-offen="ja"] b { visibility: hidden; }
.check__schritte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; counter-reset: schritt; }
.check__schritte li { counter-increment: schritt; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .6rem; align-items: center; padding: .5rem .8rem; border-radius: var(--r-md); background: var(--bg-canvas); font: var(--fw-medium) var(--fs-xs)/1.4 var(--font-ui); }
.check__schritte li::before { content: counter(schritt); display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: var(--r-pill); background: var(--accent); color: var(--bg-canvas); font: var(--fw-bold) var(--fs-micro)/1 var(--font-num); }
.check__antwort { margin: 0; }
.check__stand { display: flex; align-items: center; gap: .75rem; font: var(--fw-bold) var(--fs-2xs)/1 var(--font-num); color: var(--fg-muted); }
.check__stand .balken { flex: 1 1 auto; block-size: 6px; border-radius: 3px; background: var(--bg-fill); overflow: hidden; }
.check__stand .balken i { display: block; block-size: 100%; inline-size: 0; background: var(--ok); transition: inline-size var(--mo-slow) var(--ease-move); }

/* ------------------------------------------------------- Platzhalter --- */
.platzhalter {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--r-2xl);
  padding: clamp(1.5rem, 5vw, 3rem); color: var(--fg-muted);
}
.platzhalter__titel { font: var(--fw-bold) var(--fs-lg)/1.3 var(--font-ui); color: var(--fg-default); }

/* ------------------------------------------------------------- Schmal --- */
@media (max-width: 900px) {
  .seg { padding-inline: clamp(.75rem, 3vw, 1.5rem); }
}
/* Schmal: Die Folie waechst mit ihrem Inhalt und die Segmentflaeche scrollt —
   vier Kacheln in eine Handyhoehe zu pressen macht sie unlesbar. */
@media (max-width: 760px) {
  .folie { flex: 0 0 auto; min-block-size: 100%; }
  .folie__raster { grid-auto-rows: auto; overflow: visible; align-content: center; max-block-size: none; --spalten: 1 !important; }
  .folie__el { min-block-size: 5.5rem; overflow: visible; }
  .folie__kopf { padding-inline-end: 3rem; }
  .folie__motiv { inline-size: 2.4rem; }
}