/* Ruhiger, heller Stil (Vorbild: Gaia auf getdesign.ai): warmes Hellgrau, fast schwarze Schrift, Oliv als Akzent,
   weiche runde Karten, schwarze runde Knöpfe. Immer hell, kein Dunkelmodus.
   Alle Farben, Schriftgrößen, Abstände und Formen stehen hier als Variablen. Weiter unten nur noch var(--…). */
:root {
  color-scheme: light;

  /* Farben */
  --bg: #eeede7;             /* Grund der Seite */
  --surface: #ffffff;        /* Arbeitsblätter: Frage, Test, Karten */
  --panel: #e6e5dd;          /* weiche Fläche für ganze Abschnitte */
  --tint: #e4e3db;           /* Spuren, Hover, Eingabefelder */
  --ink: #1b1b17;            /* Text */
  --ink-hover: #3a3a33;
  --ink-2: #66655d;          /* Nebentext, mindestens 4.5:1 auf Grund, Fläche und Karte */
  --line: #dcdbd2;           /* Linien in Listen und Tabellen */
  --control: #8a897f;        /* Rahmen von Bedienelementen, mindestens 3:1 */
  --olive: #555c2e;          /* Akzent: sicher, richtig, Fortschritt */
  --olive-mid: #7b8150;      /* „einmal richtig“ in Balken, mindestens 3:1 gegen --tint */
  --olive-soft: #e4e7d1;     /* richtige Antwort, ausgewählt */
  --red: #b42318;            /* falsch */
  --red-soft: #fbe7e4;
  --flag: #8a5300;           /* markierte Frage */
  --focus: #1b1b17;
  --hover: rgba(27, 27, 23, 0.06);          /* Hover in Seitenleiste und Tab-Leiste */
  --on-olive-2: rgba(255, 255, 255, 0.8);    /* Nebentext auf Oliv, 5.2:1 */
  --on-olive-track: rgba(255, 255, 255, 0.22);
  --shadow-chip: 0 1px 3px rgba(27, 27, 23, 0.1);  /* gewählter Eintrag in Leisten und Umschaltern */
  --shadow-card: 0 24px 60px rgba(27, 27, 23, 0.10), 0 2px 6px rgba(27, 27, 23, 0.06);  /* nur für die schwebende Probefrage */
  --shadow-pull: 0 22px 44px rgba(12, 13, 9, 0.28), 0 2px 5px rgba(12, 13, 9, 0.16);           /* Karten, die aus einem Bild herausspringen */
  --shadow-float: 0 8px 24px rgba(27, 27, 23, 0.18);                                    /* Meldungen */
  /* Bewegung: weiche Ausroll-Kurve, kleiner Überschwinger für Pop-Momente */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.7, 0.64, 1);
  --dur-fast: 160ms; --dur: 260ms; --dur-slow: 700ms;
  --doodle-accent: #f3dd5c;  /* Gelb nur in den Zeichnungen */
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Schrift: Figtree für Überschriften und Zahlen, Inter für Text */
  --f-head: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-small: 0.875rem;
  --fs-tab: 0.75rem;                                    /* Beschriftung der Tab-Leiste */
  --fs-tab-s: 0.6875rem;                                /* dieselbe auf sehr schmalen Handys */
  --fs-body: 1rem;
  --fs-lead: 1.1875rem;
  --fs-title: 1.625rem;                                 /* Seitentitel in den Arbeitsansichten */
  --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);        /* Abschnitte der Übersicht, große Zahlen */
  --fs-hero: clamp(2.25rem, 1.3rem + 4.4vw, 4.75rem);   /* nur die Startzeile */
  --lh-head: 1.08;
  --lh-text: 1.6;

  /* Abstände, 4er-Raster */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --sp-section: clamp(80px, 11vw, 160px);
  --gutter: clamp(16px, 3vw, 32px);
  --w-page: 76rem;
  --w-app: 62rem;
  --w-read: 46rem;
  --top-h: 64px;
  --side-w: 264px;           /* Seitenleiste des Paket-Bereichs */
  --tab-h: 64px;             /* Tab-Leiste des Paket-Bereichs am Handy */

  /* Formen: weich gerundet, Knöpfe ganz rund */
  --r-card: 24px;
  --r-box: 16px;
  --r-opt: 14px;
  --r-chip: 10px;
  --r-pill: 999px;
  --hit: 44px;
  --bw: 1px;
  --bw-strong: 2px;
}

/* Grundlagen */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Einspaltige Raster dürfen nie breiter werden als ihr Platz, auch wenn eine Zeile nicht umbricht. */
.hero, .mode, .meter, .group, .tnav, .result, .scorebox, .essay-box, .review, .review .body, .eval > div, .confirm, .weak-box, .weak, .calc-card, .split-text { grid-template-columns: minmax(0, 1fr); }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: var(--control) transparent; }
button, .btn, .opt, .chip, .topic, .radio, input[type="range"] { touch-action: manipulation; }
body {
  margin: 0; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-text) var(--f-text);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg);
}
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 500; line-height: var(--lh-head); letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--olive-soft); color: var(--ink); }
.mono { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; 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: var(--gutter); top: -200px; z-index: 20;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + var(--sp-2)); }
.wrap {
  max-width: var(--w-page); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.muted { color: var(--ink-2); }
/* Volle Breite innerhalb der Spalte, Inhalt bleibt auf der Spaltenkante */
.bleed { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }

/* Kopfzeile: Name links, Bereiche rechts, kein Rahmen */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--bg); }
.top.scrolled { box-shadow: 0 var(--bw) 0 var(--line); } /* taste-skill-ignore: klebende Leiste */
.top-in { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--top-h); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink); font: 700 1.1875rem/1 var(--f-head); letter-spacing: -0.03em; white-space: nowrap;
}
.unofficial { font-size: var(--fs-small); color: var(--ink-2); }
.nav { margin-left: auto; display: flex; gap: var(--sp-1); }
.nav button {
  min-height: var(--hit); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  color: var(--ink); font: 500 var(--fs-small)/1 var(--f-text); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: transform .1s ease-out, background-color .15s;
}
.nav button:hover { background: var(--tint); }
.nav button:active { transform: scale(0.97); }
.nav button[aria-current="page"] { background: var(--tint); font-weight: 600; }
.timer-inline { font-size: 0.8125rem; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); }
.low { color: var(--red) !important; }
.timer-inline.low { background: var(--red); color: var(--surface) !important; }
/* Gesperrt, bis das passende Paket gekauft ist: leiser und mit Schloss; ein Klick führt zu den Paketen */
.lock { display: inline-flex; }
.lock svg { width: 12px; height: 12px; }
.nav .lock { display: none; margin-left: -3px; }
.nav button.is-locked { color: var(--ink-2); }
.nav button.is-locked .lock { display: inline-flex; }
@media (max-width: 560px) { .unofficial { display: none; } .nav button { padding: 0 var(--sp-3); } }
/* Auf dem Handy führt der Name zur Übersicht, damit die Leiste in eine Zeile passt */
@media (max-width: 480px) { .nav [data-nav="start"] { display: none; } }
/* „How it works“ nur in breiten Leisten; schmal führen die Knöpfe auf der Startseite dorthin */
@media (max-width: 860px) { .nav [data-nav="how"] { display: none; } }
@media (max-width: 400px) { .nav { gap: 0; } .nav button { padding: 0 var(--sp-2); gap: var(--sp-1); } }
/* Schmal passt „Pricing“ nicht mehr in die Leiste. Ohne Paket führen „Practice“ und „Mock test“ ohnehin zu den Paketen */
/* Hauptseite (index.html) und Paket-Bereich (paket.html) haben je eine eigene Leiste. Auf der Hauptseite steht vom Paket
   nur „Log in“ oder „My package“ mit kleinem Pfeil, das den Paket-Bereich in einem eigenen Tab öffnet */
.pkg-tag { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.nav .n-login { color: var(--ink-2); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.n-login .ico { width: 14px; height: 14px; margin-left: -2px; stroke-width: 2; }

/* Paket-Bereich als Lern-App (Vorbilder: TestHelden, Magoosh, Khan Academy, UWorld; siehe PAKET_BEREICH_REPORT.md).
   Ab 1024 px eine Seitenleiste links mit den vier Bereichen, unten Paket, „Back to the site“ und „Log out“.
   Schmaler oben Name und „Back to the site“, unten eine Tab-Leiste. Die Login-Seite und der laufende Probetest haben beides nicht. */
.side, .tabbar, .top-back { display: none; }
body[data-area="paket"] .top-back {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; min-height: var(--hit); padding: 0 var(--sp-4) 0 var(--sp-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-small)/1 var(--f-text); white-space: nowrap; transition: transform .1s ease-out, border-color .15s;
}
body[data-area="paket"] .top-back:hover { border-color: var(--control); }
body[data-area="paket"] .top-back:active { transform: scale(0.97); }
body[data-area="paket"] .top-back .ico { width: 18px; height: 18px; }
@media (max-width: 560px) { body[data-area="paket"] .top .pkg-tag { display: none; } }

@media (min-width: 1024px) {
  body[data-area="paket"]:not([data-view="login"]):not([data-running]) { padding-left: var(--side-w); }
  body[data-area="paket"]:not([data-view="login"]):not([data-running]) .top { display: none; }
  body[data-area="paket"]:not([data-view="login"]):not([data-running]) .side { display: flex; }
}
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 9; width: var(--side-w);
  flex-direction: column; gap: var(--sp-5); overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-3)) var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-left, 0px));
  background: var(--panel);
}
.side-head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--top-h); padding-left: var(--sp-3); }
.side-nav { margin: 0; flex-direction: column; gap: 2px; }
.side-nav button { width: 100%; justify-content: flex-start; gap: var(--sp-3); padding: 0 var(--sp-3); border-radius: var(--r-chip); }
.side-nav button:hover { background: var(--hover); }
.side-nav button[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow-chip); }
.side-nav .lock, .side-nav .timer-inline { margin-left: auto; }
.side-nav button.is-locked .ico { opacity: 0.7; }
.side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: var(--sp-4); border-top: var(--bw) solid var(--line); }
/* Konto unten in der Seitenleiste: Symbol, Paket und Laufzeit; führt zur Konto-Seite */
.side-acc {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 0; border-radius: var(--r-chip); background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit;
  transition: background-color .15s, transform .1s ease-out;
}
.side-acc:hover { background: var(--hover); }
.side-acc:active { transform: scale(0.98); }
.side-acc[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow-chip); }
.side-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--ink-2); }
.side-acc[aria-current="page"] .side-avatar { background: var(--tint); }
.side-pack { min-width: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.side-pack b { display: block; color: var(--ink); font-weight: 600; }
.side-link {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--hit); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-chip); background: none; color: var(--ink); cursor: pointer;
  font: 500 var(--fs-small)/1 var(--f-text); text-align: left; transition: background-color .15s, transform .1s ease-out;
}
.side-link:hover { background: var(--hover); }
.side-link:active { transform: scale(0.98); }

@media (max-width: 1023.98px) {
  body[data-area="paket"]:not([data-view="login"]):not([data-running]) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  body[data-area="paket"]:not([data-view="login"]):not([data-running]) .tabbar { display: grid; }
  body[data-area="paket"]:not([data-view="login"]):not([data-running]) .toast { bottom: calc(var(--tab-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
}
.tabbar {
  position: fixed; inset: auto 0 0; z-index: 9; margin: 0; gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: var(--tab-h);
  padding: var(--sp-1) max(var(--sp-2), env(safe-area-inset-right, 0px)) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px)) max(var(--sp-2), env(safe-area-inset-left, 0px));
  background: var(--bg); box-shadow: 0 calc(-1 * var(--bw)) 0 var(--line); /* taste-skill-ignore: feste Tab-Leiste */
}
.tabbar button {
  flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 0 var(--sp-1);
  border-radius: var(--r-box); color: var(--ink-2); font: 600 var(--fs-tab)/1.2 var(--f-text);
}
.tabbar button:hover, .tabbar button[aria-current="page"] { background: none; font-weight: 600; }
.tabbar button[aria-current="page"] { color: var(--ink); }
.tab-ico { display: grid; place-items: center; width: min(56px, 100%); height: 30px; border-radius: var(--r-pill); transition: background-color .15s; }
.tabbar button[aria-current="page"] .tab-ico { background: var(--surface); box-shadow: var(--shadow-chip); }
@media (hover: hover) { .tabbar button:hover .tab-ico { background: var(--hover); } }
.tab-l { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tabbar .lock { margin: 0; }
.tabbar .lock svg { width: 10px; height: 10px; }
/* Sehr schmal: fünf Tabs passen nur mit kleinerer Schrift und ohne sichtbares Schloss (Screenreader hören „locked“ weiter) */
@media (max-width: 380px) {
  .tabbar { padding-inline: max(var(--sp-1), env(safe-area-inset-left, 0px)) max(var(--sp-1), env(safe-area-inset-right, 0px)); }
  .tabbar button { padding: 0; font-size: var(--fs-tab-s); }
  .tabbar .lock svg { display: none; }
}

/* Login-Seite: eine ruhige Karte, ohne Seitenleiste und Tabs. E-Mail und Passwort zeigen, wie das echte Login aussehen wird,
   bleiben aber aus, bis es angeschlossen ist */
.login-preview { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: var(--sp-1); font-size: var(--fs-small); font-weight: 600; }
.field input { min-height: 48px; padding: 0 var(--sp-4); border: var(--bw) solid var(--line); border-radius: var(--r-opt); background: var(--bg); color: var(--ink-2); font: 400 var(--fs-body) var(--f-text); }
.field input:disabled { cursor: not-allowed; }
body[data-area="paket"][data-view="login"] main { padding-block: clamp(var(--sp-6), 9vh, var(--sp-8)); }
body[data-area="paket"][data-view="login"] .foot-wrap .foot { max-width: calc(34rem + 2 * var(--gutter)); }

/* Grundbausteine */
main { padding-block: var(--sp-6); }
main.view-start { padding-top: 0; }
main:not(.view-start):not(.view-how) { max-width: calc(var(--w-app) + 2 * var(--gutter)); }
main.view-practice { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
main:focus, .q-text:focus, .done-box h2:focus, h1[tabindex="-1"]:focus { outline: none; }
.sheet { background: var(--surface); border-radius: var(--r-card); padding: clamp(var(--sp-5), 4vw, var(--sp-7)); }
.fineprint { font-size: var(--fs-small); color: var(--ink-2); max-width: 70ch; }
.note { font-size: var(--fs-small); color: var(--ink-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-5); cursor: pointer;
  border: var(--bw) solid var(--control); border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font: 600 var(--fs-body)/1.1 var(--f-text); text-align: center;
  transition: transform .1s ease-out, background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--tint); border-color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn.ghost { border-color: transparent; padding-inline: var(--sp-3); }
.btn.soft { border-color: transparent; background: var(--tint); }
.btn.soft:hover { border-color: transparent; background: var(--line); }
.btn .arrow { transition: transform 0.42s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.linkbtn {
  border: 0; background: none; padding: var(--sp-2) 0; cursor: pointer; color: inherit;
  font: 600 var(--fs-body) var(--f-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.linkbtn:hover { text-decoration-thickness: 2px; }
.fineprint .linkbtn, .note .linkbtn { font-size: inherit; padding: 0; }
.pill { display: inline-block; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--tint); color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.pill.falsch { background: var(--red-soft); color: var(--red); }
.pill.geuebt { background: var(--olive-soft); color: var(--olive); }
.pill.sicher { background: var(--olive); color: var(--surface); }
.warn { border: var(--bw-strong) solid var(--flag); border-radius: var(--r-box); background: var(--surface); padding: var(--sp-4); margin-bottom: var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.warn ul { margin: 0; padding-left: 1.2em; }
/* Ehemals Rotstift: jetzt ruhige Hinweise in Oliv */
.pen { display: inline-block; margin-left: var(--sp-2); padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--olive-soft); color: var(--olive); font: 600 0.8125rem/1.5 var(--f-text); vertical-align: 1px; }
.pen-tick { display: inline-block; width: 20px; height: 20px; margin-left: var(--sp-2); vertical-align: -4px; background: var(--olive);
  -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }

/* Übersicht */
.section { margin-top: var(--sp-section); }
.h2 { font: 600 var(--fs-h2)/var(--lh-head) var(--f-head); letter-spacing: -0.035em; }
main.view-start .h2, main.view-how .h2 { font-weight: 500; }
.h2 .muted { color: var(--ink-2); }
.lede { font-size: var(--fs-lead); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }

/* Übersicht: Startbild nach Gaia. Überschrift mittig, darunter der Punkterechner wie dort das Handy.
   Dahinter schießen eigene Strichzeichnungen aus der Mitte heraus und fallen unten zu einem Berg; Text und Karte liegen davor. */
.hero { position: relative; overflow: hidden; background: var(--bg); padding-top: var(--sp-7); }
.hero-toys { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-centre { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-5); }
.hero h1 { font: 500 clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem)/1.06 var(--f-head); letter-spacing: -0.025em; }
.hero h1 .lm { display: block; }
.hero .lede { margin-inline: auto; font-size: 1.125rem; }
.hero-act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero-small { font-size: var(--fs-small); color: var(--ink-2); }
.doodle { position: absolute; left: 0; top: 0; color: var(--ink); visibility: hidden; }
.doodle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.doodle .a { fill: var(--doodle-accent); }
.doodle .w { fill: var(--surface); }
.hero-phone { --pw: clamp(280px, 24.4vw, 312px); position: relative; width: var(--pw); margin-top: var(--sp-3); padding: 7px; border-radius: 50px; background: var(--ink); text-align: left; box-shadow: var(--shadow-card); } /* taste-skill-ignore: Handy wie bei Gaia */
.phone-screen { display: flex; flex-direction: column; min-height: calc(var(--pw) * 2.17 - 14px); border-radius: 43px; background: var(--surface); overflow: hidden; }
.phone-screen::after { content: ""; flex: none; width: 112px; height: 5px; margin: auto auto 9px; border-radius: var(--r-pill); background: var(--ink); }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 15px 26px 2px; font: 600 0.8125rem/1 var(--f-text); font-variant-numeric: tabular-nums; }
.phone-status svg { width: 44px; height: 11px; }
.phone-app { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 2px; }
.phone-app b { font: 700 1.375rem/1 var(--f-head); letter-spacing: -0.03em; }
.phone-app span { padding: 3px 9px; border-radius: var(--r-pill); background: var(--olive-soft); color: var(--olive); font-size: 0.6875rem; font-weight: 600; }
.hero-phone .hero-card { gap: var(--sp-4); padding: var(--sp-3) 20px var(--sp-4); }
.hero-card h2 { font: 500 1.125rem/1.25 var(--f-head); letter-spacing: -0.02em; }
.hero-card .muted { font-size: var(--fs-small); }
.hero-card .need-num { font-size: 3.5rem; }
.hero-card .need-cap { font-size: 0.9375rem; }
.hero-card .need-bar { background: var(--tint); }
@media (max-width: 560px) { .hero-phone { --pw: calc(100vw - 88px); } }
@keyframes bar-grow { from { transform: scaleX(0); } }
.slip-d { border-top: var(--bw) solid var(--line); padding-top: var(--sp-2); }
.slip-d summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--hit); cursor: pointer; list-style: none; font-weight: 600; }
.slip-d summary::-webkit-details-marker { display: none; }
.slip-d summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur) var(--ease-out); margin-right: 4px; }
.slip-d[open] summary::after { transform: rotate(-135deg); }
.slip-d .slip { padding: 0; background: none; border-radius: 0; }
.slip-d .fineprint { margin-top: var(--sp-3); }
.card { background: var(--surface); border-radius: var(--r-card); padding: clamp(var(--sp-4), 3vw, var(--sp-6)); }
.card h3 { font-size: var(--fs-lead); margin-bottom: var(--sp-3); }
.rows { display: grid; }
.rows > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 52px; padding-block: var(--sp-2); border-top: var(--bw) solid var(--line); }
.rows > div:first-child { border-top: 0; }
.rows b { font: 600 var(--fs-lead)/1.2 var(--f-head); font-variant-numeric: tabular-nums; }

/* Übersicht: Auswahlverfahren und Üben als Geschichte (Aufbau wie Gaias Story). Fünf Schritte; jeder bleibt eine Weile
   stehen und schiebt sich dann am nächsten vorbei. Dahinter färbt sich der Grund wie ein Himmel: Dämmerung, Nacht,
   Morgen, Tag. Ohne Bewegung, eingebettet ohne eigenes Scrollen und auf dem Handy steht alles untereinander. */
.story { position: relative; margin-inline: calc(50% - 50vw); }
.story-ground, .story-ticks, .story-progress, .beat-peek { display: none; }
.beat { position: relative; color: var(--story-ink, var(--ink)); }
.beat-inner { position: relative; padding-block: clamp(64px, 10vw, 120px); }
.beat-frame { position: relative; z-index: 2; max-width: calc(var(--w-page) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.beat-frame.has-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 72px); align-items: center; }
.beat-frame.is-flipped > .beat-col { order: 2; }
.beat-col { max-width: 36rem; }
.beat-col.is-centre { margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.beat-label { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: clamp(16px, 3.5vh, 40px); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--story-soft, var(--ink-2)); }
.beat-label::before { content: ""; width: clamp(24px, 4vw, 60px); height: 1px; background: currentColor; opacity: 0.5; }
.beat-h { font: 500 clamp(2.25rem, 1.1rem + 3.6vw, 4rem)/0.98 var(--f-head); letter-spacing: -0.035em; }
.beat-h .lm { display: block; }
.beat-h .lm + .lm { color: var(--story-soft, var(--ink-2)); }
.beat-body { margin-top: clamp(20px, 3vh, 34px); max-width: 40ch; color: var(--story-soft, var(--ink-2)); }
.beat-col.is-centre .beat-body { margin-inline: auto; }
.beat-col .btn-row { margin-top: var(--sp-5); justify-content: center; }
/* Bildseite: ein Handy-Bild, daraus springt eine vergrößerte Karte heraus; oben drauf sitzt eine kleine Zeichnung */
.beat-stage { --dw: clamp(210px, 19vw, 262px); position: relative; display: grid; place-items: center; }
.beat .card, .device, .mock-card, .mock-chip { color: var(--ink); }
.beat-shot { position: relative; }
.device { position: relative; width: var(--dw); height: calc(var(--dw) * 2.05); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); border: 9px solid var(--ink); border-radius: 44px; background: var(--surface); overflow: hidden; transition: box-shadow 0.26s linear; }
.dev-top { display: flex; justify-content: space-between; align-items: center; font: 600 0.8125rem/1 var(--f-head); }
.dev-top span { padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.dev-row { display: grid; gap: 6px; padding: var(--sp-3); border-radius: 14px; background: var(--bg); font-size: 0.75rem; font-weight: 600; }
.dev-row i { display: block; height: 5px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }
.dev-row em { display: block; height: 100%; background: var(--olive); }
.dev-kv { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 10px var(--sp-3); border-radius: 12px; background: var(--bg); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dev-cap { font-size: 0.75rem; color: var(--ink-2); }
.dev-big { font: 600 3rem/1 var(--f-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dev-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.dev-grid i { aspect-ratio: 1; border-radius: 5px; background: var(--tint); }
.dev-grid i.on { background: var(--ink); }
.dev-grid i.fl { background: var(--doodle-accent); }
.dev-grid i.cur { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.dev-meter { position: relative; height: 8px; margin-block: var(--sp-2); border-radius: var(--r-pill); background: var(--tint); }
.dev-meter em { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--olive); }
.dev-meter b { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.dev-btn { margin-top: auto; padding: 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font: 600 0.75rem/1 var(--f-text); text-align: center; }
.beat-orn { position: absolute; right: 14%; bottom: calc(100% - 6px); width: 30%; color: var(--story-ink, var(--ink)); pointer-events: none; }
.beat-orn svg { display: block; width: 100%; height: auto; overflow: visible; }
.beat-orn .a { fill: var(--doodle-accent); }
.beat-orn .w { fill: var(--surface); }
.beat-pullwrap { position: absolute; top: 46%; z-index: 2; width: min(330px, 88%); }
.beat-frame:not(.is-flipped) .beat-pullwrap, .chapter:not(.is-flipped) .beat-pullwrap { left: calc(50% - var(--dw) / 2 - 110px); }
.beat-frame.is-flipped .beat-pullwrap, .chapter.is-flipped .beat-pullwrap { right: calc(50% - var(--dw) / 2 - 110px); }
.beat-pull { margin: 0; box-shadow: var(--shadow-pull); } /* taste-skill-ignore: herausgezogene Karte */
/* „How it works“: Bild einer echten Übungsfrage (Kapitel Practice) */
.mock { margin: 0; position: relative; width: min(100%, 30rem); }
.mock-chip { position: absolute; left: calc(-1 * var(--sp-5)); bottom: calc(-1 * var(--sp-6)); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-4); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-pull); } /* taste-skill-ignore: schwebende Karte */
.mock-chip .pen-tick { margin-left: 0; }
.mock-chip b { display: block; font: 600 var(--fs-body)/1.2 var(--f-head); }
.mock-chip span span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.mock-card { background: var(--surface); border-radius: 28px; padding: var(--sp-6); box-shadow: var(--shadow-card); pointer-events: none; } /* taste-skill-ignore: schwebende Karte */
.mock-card .q-text { font-size: var(--fs-lead); }
.mock-card .explain { animation: none; }
@media (max-width: 860px) {
  .beat-frame.has-shot { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 7vh, 56px); }
  .beat-frame.is-flipped > .beat-col { order: 0; }
  .beat-stage { --dw: 200px; padding-block: var(--sp-5); }
  .beat-frame .beat-pullwrap, .beat-frame:not(.is-flipped) .beat-pullwrap, .chapter .beat-pullwrap, .chapter:not(.is-flipped) .beat-pullwrap { left: 0; right: auto; top: 50%; width: min(290px, 84%); }
  .beat-frame.is-flipped .beat-pullwrap, .chapter.is-flipped .beat-pullwrap { left: auto; right: 0; }
  .mock-chip { left: var(--sp-4); bottom: calc(-1 * var(--sp-5)); }
}

/* Himmel, Striche am Rand und Testuhr: nur mit Bewegung und wenn die Seite selbst scrollt */
.has-motion:not(.no-pin) .story-ground { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: var(--bg); }
/* Der Himmel ist eine winzige Leinwand (etwa 160 × 100 Pixel), die der Bildschirm auf volle Größe streckt. Ein weicher Verlauf
   sieht vergrößert genauso aus, aber pro Bild sind nur ein paar tausend statt Millionen Pixel zu malen. */
html.story-under body[data-view="start"] .top { background: var(--sky-top, transparent); box-shadow: none; } /* fast deckend in Himmelsfarbe; ohne Unschärfe dahinter, die bei jedem Bild neu gerechnet werden müsste */
html.story-under body[data-view="start"]::before { background: var(--sky-top, transparent); }
html.story-under body[data-view="start"] .brand, html.story-under body[data-view="start"] .nav button { color: var(--story-ink, var(--ink)); }
html.story-under body[data-view="start"] .top { --focus: var(--story-ink, var(--ink)); } /* Fokusrahmen hell auf Nachthimmel */
html.story-under body[data-view="start"] .unofficial { color: var(--story-soft, var(--ink-2)); }
html.story-night body[data-view="start"] .nav button[aria-current="page"], html.story-night body[data-view="start"] .nav button:hover { background: rgba(244, 243, 234, 0.14); }
html.story-night .device { box-shadow: 0 0 0 1px rgba(244, 243, 234, 0.22); }
html.story-night .beat-orn .w { fill: transparent; }
/* Farbwechsel von Leiste und Schrift der Geschichte (Tag und Nacht) passieren sofort, ohne weichen Übergang: Jeder Übergang
   ließ den Browser große Schrift mehrere Bilder lang neu malen, und das Scrollen hing kurz (gemessen am 04.11.2026). */
.has-motion:not(.no-pin) .story-ticks { display: block; position: fixed; right: clamp(8px, 1.6vw, 28px); top: 0; bottom: 0; z-index: 3; width: 1px; pointer-events: none; opacity: 0; transition: opacity 0.32s linear; }
.story-ticks i { position: absolute; right: 0; width: 7px; height: 1px; background: var(--story-ink, var(--ink)); opacity: 0.3; }
.has-motion:not(.no-pin) .story-progress { display: flex; position: fixed; right: clamp(8px, 1.6vw, 28px); top: 0; transform: translateY(78px); z-index: 4; flex-direction: row-reverse; align-items: center; gap: 9px; pointer-events: none; font: 600 0.6875rem/1 var(--f-text); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--story-ink, var(--ink)); opacity: 0; transition: opacity 0.32s linear; }
.story-progress::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.has-motion.story-mid:not(.no-pin) .story-ticks, .has-motion.story-mid:not(.no-pin) .story-progress { opacity: 1; }
@media (max-width: 860px) {
  .has-motion:not(.no-pin) .story-progress { flex-direction: column-reverse; gap: 6px; right: 4px; }
  .story-progress span { writing-mode: vertical-rl; }
  .story-progress::before { width: 1px; height: 16px; }
}
@media (min-width: 861px) and (pointer: fine) {
  /* Jeder Schritt bleibt eine Weile stehen, dann schiebt sich der nächste darüber (Übergang zwischen den Folien, Wunsch des Nutzers) */
  .has-motion:not(.no-pin) .beat { height: 180svh; }
  .has-motion:not(.no-pin) .beat-inner { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-block: var(--top-h) 0; }
  /* Während ein Schritt steht, wandern Bild und Karte leicht gegeneinander (siehe unten: vom Browser, synchron zum Scrollen) */
  /* Zeichnungen am Rand zeichnen sich selbst, sobald ihr Schritt steht, und atmen dann leicht */
  .has-motion:not(.no-pin) .beat-peek { display: block; position: absolute; z-index: 1; color: var(--story-ink, var(--ink)); opacity: 0; transition: opacity 0.4s linear; pointer-events: none; }
  .beat-peek svg { display: block; width: 100%; height: auto; overflow: visible; }
  .beat-peek svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 0.15s, fill 0.5s linear 1.2s; }
  .beat-peek .a, .beat-peek .w { fill: transparent; }
  .beat.is-active .beat-peek { opacity: 1; animation: idle-breathe 5s ease-in-out 1.8s infinite; }
  .beat.is-active .beat-peek svg * { stroke-dashoffset: 0; }
  .beat.is-active .beat-peek .a { fill: var(--doodle-accent); }
  .beat.is-active .beat-peek .w { fill: var(--peek-fill, var(--surface)); }
  html.story-night .beat-peek { --peek-fill: transparent; }
  @keyframes idle-breathe { 50% { transform: translateY(-6px) rotate(1deg); } }
}

/* Einblenden: Startbild beim Laden, jeder Schritt und jeder Abschnitt beim Hineinscrollen */
.has-motion .hero h1 .lm, .has-motion .beat-h .lm, .has-motion .mt .lm { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.has-motion .hero h1 .ln { display: block; animation: line-up 1s var(--ease-out) 0.1s both; }
.has-motion .hero h1 .lm + .lm .ln { animation-delay: 0.2s; }
@keyframes line-up { from { transform: translateY(108%); } }
.has-motion .hero .lede { animation: rise-in 0.8s var(--ease-out) 0.35s both; }
.has-motion .hero-act { animation: rise-in 0.8s var(--ease-out) 0.45s both; }
.has-motion .hero-small { animation: rise-in 0.8s var(--ease-out) 0.55s both; }
.has-motion .hero-phone { animation: card-up 1.1s var(--ease-out) 0.5s both; }
@keyframes card-up { from { opacity: 0; transform: translateY(140px); } }
.has-motion .hero-card .need-fill { animation: bar-grow 0.9s var(--ease-out) 1.3s both; }
.has-motion .beat-h .ln, .has-motion .mt .ln { display: block; transform: translateY(108%); transition: transform 0.9s var(--ease-out); }
.has-motion .beat-h .lm + .lm .ln, .has-motion .mt .lm + .lm .ln { transition-delay: 0.08s; }
.has-motion .beat-label, .has-motion .beat-body, .has-motion .beat-col .btn-row { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.has-motion .beat-body { transition-delay: 0.18s; }
.has-motion .beat-col .btn-row { transition-delay: 0.28s; }
.has-motion .beat-shot { opacity: 0; transform: translateY(80px); transition: opacity 0.6s linear 0.1s, transform 1.1s var(--ease-out) 0.1s; }
.has-motion .beat-pull, .has-motion .mock-chip { opacity: 0; transform: translate(var(--pull-dx, 48px), 24px) scale(0.7); transition: opacity 0.4s var(--ease-out) 0.5s, transform 0.8s var(--ease-pop) 0.5s; }
.beat-frame.is-flipped, .chapter.is-flipped { --pull-dx: -48px; }
.has-motion .beat-orn { opacity: 0; transform: translateY(16px) scale(0.6); transform-origin: 50% 100%; transition: opacity 0.3s linear 0.9s, transform 0.6s var(--ease-pop) 0.9s; }
.has-motion .chapter .ch-item, .has-motion .chapter .btn-row, .has-motion .cta > :not(.h2) { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out) var(--d, 0s), transform 0.7s var(--ease-out) var(--d, 0s); }
.has-motion .chapter .beat-shot { opacity: 0; transform: translateX(12%); transition: opacity 0.6s linear 0.1s, transform 1.1s var(--ease-out) 0.1s; }
.has-motion .chapter.is-flipped .beat-shot { transform: translateX(-12%); }
/* Alles, was beim Scrollen mitwandert, bewegt der Browser selbst (Scroll-Zeitleisten). Ein Skript hinkt immer ein Bild hinterher,
   und das Scrollen wirkt unruhig. Ohne diese Fähigkeit (ältere Browser) bleibt alles still stehen. */
@supports (animation-timeline: view()) {
  .has-motion:not(.no-pin) .story { view-timeline: --story block; }
  /* Testuhr am rechten Rand: wandert mit der Geschichte nach unten */
  .has-motion:not(.no-pin) .story-progress { animation: story-clock linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
  @media (min-width: 861px) and (pointer: fine) {
    .has-motion:not(.no-pin) .beat { view-timeline: --beat block; }
    .has-motion:not(.no-pin) .beat-stage { animation: drift-stage linear both; animation-timeline: --beat; animation-range: contain 0% contain 100%; }
    .has-motion:not(.no-pin) .beat-pullwrap { animation: drift-pull linear both; animation-timeline: --beat; animation-range: contain 0% contain 100%; }
  }
  /* Kapitel: das Handy-Bild bleibt beim Scrollen ein wenig zurück (wie bei Gaia); am Handy nicht, es würde in den Text darüber rutschen */
  @media (min-width: 861px) {
    .has-motion:not(.no-pin) .chapter { view-timeline: --chapter block; }
    .has-motion:not(.no-pin) .ch-stage { animation: drift-chapter linear both; animation-timeline: --chapter; animation-range: cover 0% cover 100%; }
  }
}
@keyframes story-clock { from { transform: translateY(78px); } to { transform: translateY(calc(78px + 56.5vh)); } }
@keyframes drift-stage { from { transform: translateY(24px); } to { transform: translateY(-24px); } }
@keyframes drift-pull { from { transform: translateY(32px); } to { transform: translateY(-32px); } }
@keyframes drift-chapter { from { transform: translateY(-36px); } to { transform: translateY(36px); } }
.has-motion .chapter.is-in .ch-item, .has-motion .chapter.is-in .btn-row, .has-motion .cta.is-in > :not(.h2),
.has-motion .chapter.is-in .beat-shot, .has-motion .chapter.is-in .beat-pull, .has-motion .chapter.is-in .beat-orn, .has-motion .chapter.is-in .mock-chip,
.has-motion .is-in .beat-h .ln, .has-motion .is-in .mt .ln,
.has-motion .beat.is-in .beat-label, .has-motion .beat.is-in .beat-body, .has-motion .beat.is-in .beat-col .btn-row,
.has-motion .beat.is-in .beat-shot, .has-motion .beat.is-in .beat-pull, .has-motion .beat.is-in .mock-chip,
.has-motion .beat.is-in .beat-orn { opacity: 1; transform: none; }

/* Übersicht: Punkterechner auf einer weichen Fläche */
.calc-wrap { background: var(--panel); border-radius: 32px; padding: clamp(var(--sp-5), 5vw, var(--sp-8)); }
.calc-card { display: grid; gap: var(--sp-5); }
.calc { display: grid; gap: var(--sp-2); }
.calc label { font-weight: 600; font-size: var(--fs-small); }
.calc-row { display: flex; align-items: center; gap: var(--sp-4); }
.calc-row input[type="range"] { flex: 1; min-width: 0; height: var(--hit); margin: 0; accent-color: var(--ink); cursor: pointer; }
.calc-row output { min-width: 3ch; text-align: right; font: 600 var(--fs-lead)/1 var(--f-head); font-variant-numeric: tabular-nums; }
.need-num { font: 600 clamp(4rem, 3rem + 5vw, 7rem)/0.9 var(--f-head); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.need-cap { font-size: var(--fs-lead); max-width: 30ch; }
.need-bar { margin-top: var(--sp-4); height: 10px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; max-width: 26rem; }
.need-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--olive); transform-origin: left center; transition: transform 0.45s var(--ease-out); }
.need-fill.over { background: var(--red); }
.need-scale { display: flex; justify-content: space-between; max-width: 26rem; margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.has-motion [data-reveal]:not(.is-in) .need-fill { transform: scaleX(0) !important; }
.slip { background: var(--surface); border-radius: var(--r-card); padding: var(--sp-5); font-variant-numeric: tabular-nums; }
.slip h3 { font-size: var(--fs-body); margin-bottom: var(--sp-2); }
.slip-group { margin-top: var(--sp-3); display: grid; }
.slip-group > p { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--sp-1); }
.slip-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-1); }
.slip-row i { display: none; }
.slip-row span:last-child { white-space: nowrap; font-weight: 600; }
.slip-total { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-box); background: var(--ink); color: var(--surface); font-weight: 600; }
.zig { display: none; }
.need-fine { margin-top: var(--sp-5); }
.calc-h { margin-bottom: var(--sp-6); }
.calc-first { margin-top: var(--sp-8); }
.explain:focus { outline: none; }

/* Übersicht: Kapitel nach der Geschichte (wie Gaias Kapitel): Text auf einer Seite, Handy-Bild auf der anderen, abwechselnd */
.chapters { display: grid; gap: clamp(96px, 14vw, 200px); }
.chapter { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.chapter.is-flipped { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
.chapter.is-flipped .ch-text { order: 2; }
.ch-h { font: 500 clamp(2rem, 1.2rem + 2vw, 2.75rem)/1.04 var(--f-head); letter-spacing: -0.035em; }
.ch-h .lm { display: block; }
.ch-h .lm + .lm { color: var(--ink-2); }
.ch-body { margin-top: var(--sp-5); max-width: 40ch; color: var(--ink-2); }
.ch-points { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); max-width: 40ch; color: var(--ink-2); font-size: var(--fs-small); }
.ch-points li { display: flex; gap: var(--sp-3); }
.ch-points li::before { content: ""; flex: none; width: 14px; height: 1px; margin-top: 0.75em; background: currentColor; opacity: 0.5; }
.ch-text .btn-row { margin-top: var(--sp-5); }
.ch-stage { --dw: clamp(210px, 19vw, 262px); position: relative; display: grid; place-items: center; min-height: calc(var(--dw) * 2.05 + 40px); }
.dev-q { font: 600 0.875rem/1.35 var(--f-head); }
.dev-opt { display: flex; gap: var(--sp-2); align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.75rem; }
.dev-opt b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--control); font-size: 0.625rem; }
.dev-opt.on { border-color: var(--ink); background: var(--olive-soft); }
.dev-opt.on b { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.dev-lines { display: grid; gap: 7px; }
.dev-lines i { display: block; height: 6px; border-radius: var(--r-pill); background: var(--tint); }
.dev-flag { align-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--doodle-accent); font-size: 0.6875rem; font-weight: 600; }
.pull-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-small); }
.pull-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pull-list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--olive); -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat; }
.pull-list li.todo::before { background: var(--flag); -webkit-mask: none; mask: none; height: 2px; margin-top: 9px; border-radius: 2px; }
.pull-grid { margin-block: var(--sp-3); }
@media (max-width: 860px) {
  .chapter, .chapter.is-flipped { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .chapter.is-flipped .ch-text { order: 0; }
  .ch-stage { --dw: 200px; min-height: calc(var(--dw) * 2.05 + 130px); align-items: start; padding-top: var(--sp-7); } /* Platz für die Zeichnung über dem Handy */
  .chapter .beat-pullwrap, .chapter:not(.is-flipped) .beat-pullwrap, .chapter.is-flipped .beat-pullwrap { top: 34%; }
}

/* Übersicht: Details als aufklappbare Liste, wie Gaias Fragen */
.faq-body { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.faq-row { background: var(--panel); border-radius: var(--r-box); }
.faq-row summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) var(--sp-5); cursor: pointer; list-style: none; font: 600 var(--fs-body)/1.3 var(--f-head); }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur) var(--ease-out); }
.faq-row[open] summary::after { transform: rotate(-135deg); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); max-width: 72ch; color: var(--ink-2); }
.faq-a p + p { margin-top: var(--sp-2); }
.has-motion .faq-row[open] .faq-a { animation: rise-in 0.4s var(--ease-out); }
.faq-h a { font-size: var(--fs-small); color: var(--ink-2); }

/* Übersicht: ruhiger Schluss mit einem Knopf */
.cta { display: grid; justify-items: center; text-align: center; gap: var(--sp-5); padding-block: var(--sp-7) var(--sp-4); }

/* Pakete: drei Karten nebeneinander, das beliebteste mit Rahmen und Schild */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); text-align: left; }
.cta .packs, .cta .pack-free { justify-self: stretch; margin-top: 0; }
.pack { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: 28px; background: var(--surface); }
.pack.is-pop { box-shadow: inset 0 0 0 2px var(--ink); }
.pack-tag { position: absolute; top: -12px; left: var(--sp-6); padding: 3px 12px; border-radius: var(--r-pill); background: var(--doodle-accent); font-size: 0.75rem; font-weight: 600; }
.pack h3 { font: 600 var(--fs-lead)/1.2 var(--f-head); }
.pack-price { display: flex; align-items: baseline; gap: var(--sp-2); }
.pack-price b { font: 600 2.75rem/1 var(--f-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pack-price span { font-size: var(--fs-small); color: var(--ink-2); }
.pack-list { flex: 1; align-content: start; }
.pack .btn { width: 100%; justify-content: center; }
.pack-free { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: 28px; background: var(--panel); text-align: left; }
.pack-free h2 { font: 600 var(--fs-body)/1.3 var(--f-head); }
.pack-free p { font-size: var(--fs-small); color: var(--ink-2); }
.price-head, .how-head { display: grid; gap: var(--sp-3); }
/* Paket-Home (Vorbilder: „Continue“ bei Brilliant, Leistung je Fach bei Magoosh, frühere Tests bei UWorld):
   nächster Schritt mit Ring, Zahlenleiste, Themen, Probetest und Essay. Dazu Login- und Kaufseite */
.pk { container-type: inline-size; display: grid; gap: var(--sp-4); }
.pk-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pk-eyebrow { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.pk-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5) var(--sp-7);
  padding: clamp(var(--sp-5), 5cqi, var(--sp-7)); border-radius: var(--r-card); background: var(--olive); color: var(--surface);
}
.pk-next :focus-visible { outline-color: var(--surface); }
.pk-next-text { display: grid; gap: var(--sp-3); justify-items: start; }
.pk-label { font-size: var(--fs-small); font-weight: 600; color: var(--on-olive-2); }
.pk-next h2 { font: 600 var(--fs-title)/1.15 var(--f-head); letter-spacing: -0.03em; max-width: 26ch; }
.pk-next-text > p:not(.pk-label) { color: var(--on-olive-2); max-width: 52ch; text-wrap: pretty; }
.pk-next .btn-row { margin-top: var(--sp-2); }
.btn.light { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.btn.light:hover { background: var(--bg); border-color: var(--bg); }
.pk-ring { position: relative; display: grid; place-items: center; width: 140px; aspect-ratio: 1; text-align: center; }
.pk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-ring circle { fill: none; stroke-width: 8; }
.pk-ring .r-track { stroke: var(--on-olive-track); }
.pk-ring .r-fill { stroke: var(--surface); stroke-linecap: round; }
.pk-ring b { display: block; font: 600 2rem/1 var(--f-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-ring span { font-size: var(--fs-small); color: var(--on-olive-2); }
@media (prefers-reduced-motion: no-preference) {
  .pk-ring .r-fill { animation: ring-in 0.9s var(--ease-out) both; }
  @keyframes ring-in { from { stroke-dasharray: 0 264; } }
}
.pk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-card); background: var(--surface); }
.pk-stat { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4) var(--sp-5); border-left: var(--bw) solid var(--line); }
.pk-stat:first-child { border-left: 0; }
.pk-stat b { font: 600 1.75rem/1.1 var(--f-head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pk-stat b .mono { font-size: var(--fs-small); color: var(--ink-2); letter-spacing: 0; }
.pk-stat span { font-size: var(--fs-small); color: var(--ink-2); }
.pk-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.pk-col { display: grid; gap: var(--sp-4); }
.pk-card { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-5); border-radius: var(--r-card); background: var(--surface); }
.pk-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; }
.pk-card-h h2 { display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 var(--fs-lead)/1.2 var(--f-head); }
.pk-card-h .linkbtn { font-size: var(--fs-small); padding-block: var(--sp-1); }
.pk-card > p { color: var(--ink-2); }
.pk-card.is-locked h2 { color: var(--ink-2); }
/* Themen ohne eigene Karten: die Zeilen reichen bis an den Rand der Themenkarte */
.pk-topics { padding-inline: 0; padding-bottom: var(--sp-2); overflow: hidden; }
.pk-topics .pk-card-h, .pk-topics .group h3 { padding-inline: var(--sp-5); }
.pk-topics .group + .group { margin-top: var(--sp-2); }
.pk-topics .topic-list { border-radius: 0; background: none; }
.pk-topics .topic { min-height: 60px; padding-block: var(--sp-3); }
.pk-topics .topic:first-child { border-top: var(--bw) solid var(--line); }
.pk-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.pk-score b { font: 600 var(--fs-h2)/1 var(--f-head); letter-spacing: -0.04em; color: var(--ink); }
.pk-score span { font-size: var(--fs-small); color: var(--ink-2); }
.pk-attempts { margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.pk-attempts li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--bw) solid var(--line); color: var(--ink-2); }
.pk-attempts b { color: var(--ink); font-weight: 600; }
.pk-foot { margin-top: var(--sp-5); }
/* Ankunft nach dem Kauf: einmal „Your access is ready“ */
.pk-welcome { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); background: var(--olive-soft); }
.pk-welcome div { display: grid; gap: var(--sp-1); flex: 1 1 22rem; }
.pk-welcome h2 { font: 600 var(--fs-body)/1.3 var(--f-head); }
.pk-welcome p { font-size: var(--fs-small); max-width: 62ch; }
/* Prüfmodus: alle Zahlensätze einer Frage */
.zs { margin-top: var(--sp-4); }
.zs-list { margin: var(--sp-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--sp-4); }
.zs-list li { display: grid; gap: var(--sp-1); }
.zs-q { font-weight: 600; }
.zs-a { font-size: var(--fs-small); }
/* Dieselbe Aufgabe wie früher, mit anderen Zahlen */
.pill.new-numbers { background: var(--olive-soft); color: var(--olive); }
/* Konto */
.acc-list { display: grid; margin: 0; }
.acc-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: var(--bw) solid var(--line); font-size: var(--fs-small); }
.acc-row dt { color: var(--ink-2); }
.acc-row dd { margin: 0; font-weight: 600; text-align: right; }
.pk-gate { max-width: 34rem; margin: 0 auto; display: grid; gap: var(--sp-4); }
@container (max-width: 760px) { .pk-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 640px) {
  .pk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-stat:nth-child(3) { border-left: 0; }
  .pk-stat:nth-child(n+3) { border-top: var(--bw) solid var(--line); }
}
@container (max-width: 520px) {
  .pk-next { grid-template-columns: minmax(0, 1fr); }
  .pk-ring { display: none; }
  .pk-next h2 { font-size: var(--fs-lead); }
}
.how-head + .chapters { margin-top: var(--sp-8); }
.pack-note { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-box); background: var(--olive-soft); font-weight: 600; }
.price-fine { margin-top: var(--sp-5); }
.price-faq { display: grid; gap: var(--sp-2); margin-top: var(--sp-7); max-width: 46rem; }
@media (max-width: 860px) { .packs { grid-template-columns: minmax(0, 1fr); } }

/* Üben: Übersicht */
.dash-head { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-5); }
.dash-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.dash-head h1, .sub-h1, .p-title { font: 600 var(--fs-title)/1.15 var(--f-head); letter-spacing: -0.03em; }
.dash-head p { color: var(--ink-2); max-width: 62ch; }
.sub-h2 { font: 500 var(--fs-lead)/1.2 var(--f-head); }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.mode { display: grid; gap: var(--sp-4); align-content: start; padding: clamp(var(--sp-5), 3vw, var(--sp-6)); background: var(--surface); border-radius: var(--r-card); }
.mode h2 { font: 500 var(--fs-lead)/1.2 var(--f-head); }
.mode p { color: var(--ink-2); }
@media (max-width: 760px) { .modes { grid-template-columns: minmax(0, 1fr); } }
.meter { display: grid; gap: var(--sp-2); }
.meter-top { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; }
.mode .big-time, .big-time { color: var(--ink); font: 600 var(--fs-h2)/1 var(--f-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin: var(--sp-7) 0 var(--sp-4); }
.section-h h2 { font: 600 var(--fs-lead)/1.2 var(--f-head); }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-5); }
.group { display: grid; gap: var(--sp-2); align-content: start; }
.group h3 { font: 600 var(--fs-small)/1.3 var(--f-text); color: var(--ink-2); letter-spacing: 0; }
.topic-list { background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.topic {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: center;
  width: 100%; min-height: 68px; padding: var(--sp-4) var(--sp-5); text-align: left; cursor: pointer;
  border: 0; border-top: var(--bw) solid var(--line); background: transparent; color: var(--ink); font: inherit;
  transition: background-color .15s;
}
.topic:first-child { border-top: 0; }
.topic:hover:not([disabled]), .topic:active:not([disabled]) { background: var(--bg); }
.topic[disabled] { cursor: default; opacity: 0.6; }
.t-name { font-weight: 600; }
.t-meta { font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.seg { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }
.seg i { display: block; height: 100%; }
.s-sicher { background: var(--olive); }
.s-geuebt { background: var(--olive-mid); }
.s-falsch { background: var(--red); }
.s-neu { background: var(--tint); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--sp-4); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.reset-box { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* Üben: eine Frage */
.p-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.p-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.p-count { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.p-bar { height: 6px; border-radius: var(--r-pill); background: var(--tint); margin-bottom: var(--sp-5); overflow: hidden; }
.p-bar i { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill); transition: width .3s ease-out; }
.q-tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.q-text { font: 600 var(--fs-lead)/1.35 var(--f-head); letter-spacing: -0.01em; margin-top: var(--sp-3); max-width: 60ch; }
.opts { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.opt {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 54px; text-align: left;
  padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--line); border-radius: var(--r-opt);
  background: var(--surface); color: var(--ink); font: inherit; line-height: 1.4; cursor: pointer;
  transition: transform .1s ease-out, border-color .15s, background-color .15s;
}
.opt:hover:not([disabled]) { border-color: var(--ink); background: var(--bg); }
.opt:active:not([disabled]) { transform: scale(0.985); }
.opt[disabled] { cursor: default; }
.bub {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); color: var(--ink); font: 600 var(--fs-small)/1 var(--f-text);
}
/* Richtig: Oliv mit Haken; falsch: rot und durchgestrichen */
.opt.is-right { background: var(--olive-soft); border-color: var(--olive); }
.opt.is-right .bub { background: var(--olive); color: var(--surface); }
.opt.is-right::after { content: ""; flex: none; margin-left: auto; width: 22px; height: 22px; background: var(--olive);
  -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat; }
.opt.is-wrong { background: var(--red-soft); border-color: var(--red); }
.opt.is-wrong .bub { background: var(--red); color: var(--surface); }
.opt.is-wrong .otxt { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.opt.is-dim { color: var(--ink-2); }
.explain { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-box); background: var(--bg); animation: rise .22s ease-out; }
.hand { font: 600 var(--fs-lead)/1.2 var(--f-head); color: var(--olive); margin-bottom: var(--sp-2); }
.explain.wrong .hand { color: var(--red); }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.hint { font-size: var(--fs-small); color: var(--ink-2); }
@media (hover: none) { .hint { display: none; } }
.done-num { font: 600 var(--fs-h2)/1 var(--f-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.done-box { display: grid; gap: var(--sp-4); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Eintippen statt Auswählen */
.tform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); justify-items: start; margin-top: var(--sp-5); } /* begrenzte Spalte: das Feld wird nie breiter als die Karte */
.tlabel { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.tfield { display: flex; align-items: center; gap: var(--sp-2); width: min(100%, 22rem); min-height: 56px; padding: 0 var(--sp-4); border: var(--bw) solid var(--control); border-radius: var(--r-opt); background: var(--surface); }
.tfield:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tin { flex: 1; min-width: 0; padding: var(--sp-3) 0; border: 0; background: transparent; color: var(--ink); font: 600 1.25rem/1.2 var(--f-head); font-variant-numeric: tabular-nums; }
.tin:focus { outline: none; }
.tfix { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
/* Plus/Minus für Zifferntastaturen ohne Minus (iPhone), nur bei Touch */
.tsign { display: none; flex: none; align-items: center; justify-content: center; width: var(--hit); height: var(--hit); margin-right: calc(-1 * var(--sp-2)); border: 0; border-radius: var(--r-pill); background: var(--tint); color: var(--ink); font: 600 1.25rem/1 var(--f-head); cursor: pointer; }
@media (pointer: coarse) { .tsign { display: inline-flex; } }
.tfield.is-right { background: var(--olive-soft); border-color: var(--olive); }
.tfield.is-wrong { background: var(--red-soft); border-color: var(--red); }
.tfield.is-wrong .tin { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.terr { color: var(--red); font-size: var(--fs-small); font-weight: 600; }
.tform .btn { margin-top: var(--sp-2); }
.fmt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.seg-ctl { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-pill); background: var(--tint); }
.seg-ctl button { min-height: var(--hit); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 600 var(--fs-small)/1 var(--f-text); cursor: pointer; transition: background-color .15s, color .15s; }
.seg-ctl button:hover { color: var(--ink); }
.seg-ctl button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(27, 27, 23, 0.1); }

/* Probetest, aufgebaut wie ein Moodle-Quiz */
.test { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.tnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top-h) + var(--sp-3)); max-height: calc(100vh - var(--top-h) - var(--sp-5)); max-height: calc(100dvh - var(--top-h) - var(--sp-5)); overflow-y: auto; padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.tnav-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-weight: 600; }
.tnav-time { font: 600 var(--fs-lead)/1 var(--f-head); font-variant-numeric: tabular-nums; }
.end-m { display: none; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--hit), 1fr)); gap: var(--sp-1); }
.chip {
  position: relative; height: var(--hit); min-width: var(--hit); padding: 0; cursor: pointer;
  border: var(--bw) solid var(--line); border-radius: var(--r-chip); background: var(--surface); color: var(--ink);
  font: 600 var(--fs-small)/1 var(--f-text); font-variant-numeric: tabular-nums;
  transition: transform .1s ease-out;
}
.chip:active { transform: scale(0.94); }
.chip.answered { background: var(--olive-soft); border-color: var(--olive); }
.chip.current { outline: var(--bw-strong) solid var(--ink); outline-offset: 2px; }
.chip.flagged::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--flag); }
.chip.essay { grid-column: span 2; padding-inline: var(--sp-3); }
.tnav-legend { font-size: var(--fs-small); color: var(--ink-2); }
.q-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-4); border-bottom: var(--bw) solid var(--line); }
.q-num { font: 600 var(--fs-lead)/1 var(--f-head); }
.q-state { font-size: var(--fs-small); color: var(--ink-2); }
.flag-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  min-height: var(--hit); padding: 0 var(--sp-4); border: var(--bw) solid var(--control); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font: 600 var(--fs-small) var(--f-text);
}
.flag-btn:hover { color: var(--ink); border-color: var(--ink); }
.flag-btn[aria-pressed="true"] { color: var(--flag); border-color: var(--flag); }
.flag-btn svg { width: 14px; height: 14px; }
.radios { border: 0; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-1); min-width: 0; }
.radio { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 48px; padding: var(--sp-3); border-radius: var(--r-opt); cursor: pointer; line-height: 1.45; }
.radio:hover { background: var(--bg); }
.radio:has(input:checked) { background: var(--olive-soft); }
.radio input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.rl { color: var(--ink-2); min-width: 1.4em; font-weight: 600; }
.tfoot { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
textarea {
  width: 100%; min-height: 16rem; margin-top: var(--sp-4); padding: var(--sp-4); resize: vertical;
  border: var(--bw) solid var(--control); border-radius: var(--r-box); background: var(--surface); color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--f-text);
}
textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wc { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.rules { margin: var(--sp-4) 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); max-width: 62ch; }
.rules li { padding-left: var(--sp-5); position: relative; }
.rules li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); }
.sum-h { font: 500 var(--fs-title)/1.15 var(--f-head); letter-spacing: -0.03em; }
.sum-wrap { overflow-x: auto; margin-top: var(--sp-4); }
.sum { width: 100%; border-collapse: collapse; }
.sum th, .sum td { text-align: left; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: var(--bw) solid var(--line); }
.sum th { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.sum .open { color: var(--ink-2); }
.confirm { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-box); border: var(--bw-strong) solid var(--red); background: var(--red-soft); display: grid; gap: var(--sp-3); }
/* Quiz-Seite vor dem Start */
.quiz { display: grid; gap: var(--sp-4); }
.crumbs { font-size: var(--fs-small); color: var(--ink-2); }
.quiz-len { justify-self: start; }
.quiz-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-3); margin: 0; }
.quiz-info div { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-box); background: var(--bg); }
.quiz-info dt { font-size: var(--fs-small); color: var(--ink-2); }
.quiz-info dd { margin: 2px 0 0; font: 600 var(--fs-body)/1.35 var(--f-head); }
.quiz-h { font: 500 var(--fs-lead)/1.2 var(--f-head); margin-top: var(--sp-5); }
/* Dialog und Weiterleitung */
.modal-back { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--gutter); background: rgba(27, 27, 23, 0.45); animation: fade 0.2s ease-out; }
.modal { width: min(100%, 32rem); display: grid; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); } /* taste-skill-ignore: Dialog */
.modal h2 { font: 500 var(--fs-title)/1.15 var(--f-head); letter-spacing: -0.02em; }
.modal .btn-row { margin-top: var(--sp-3); }
.has-motion .modal { animation: modal-in 0.32s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.redirect { position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: var(--gutter); background: var(--bg); text-align: center; animation: fade 0.2s ease-out; }
.redirect-box { display: grid; justify-items: center; gap: var(--sp-3); }
.redirect-h { font: 500 var(--fs-title)/1.15 var(--f-head); letter-spacing: -0.02em; }
.redirect-bar { width: 220px; height: 4px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }
.redirect-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left center; animation: load 1.2s var(--ease-out) both; }
@keyframes load { from { transform: scaleX(0); } }
/* Geschlossener Prüfungsmodus: statt der Kopfzeile eine eigene Leiste mit Restzeit, Endzeit und Abgabe */
body[data-running] .top { display: none; }
.exam-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; display: flex; align-items: center; gap: var(--sp-4); min-height: var(--top-h); margin: calc(-1 * var(--sp-6)) calc(50% - 50vw) var(--sp-5); padding-inline: max(var(--gutter), calc(50vw - 50%)); background: var(--bg); box-shadow: 0 var(--bw) 0 var(--line); } /* taste-skill-ignore: feste Prüfungsleiste */
.exam-name { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.exam-name b { font: 700 1.1875rem/1 var(--f-head); letter-spacing: -0.03em; white-space: nowrap; }
.exam-name span { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exam-clock { margin-left: auto; display: flex; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-small); white-space: nowrap; }
.exam-clock b { font: 600 var(--fs-lead)/1 var(--f-head); }
.exam-end { color: var(--ink-2); }
.exam-finish .sm { display: none; }
@media (max-width: 760px) {
  .exam-name span, .exam-end { display: none; }
  .exam-bar { gap: var(--sp-3); }
  .exam-finish { padding-inline: var(--sp-4); min-height: var(--hit); }
}
@media (max-width: 560px) {
  .tnav-head .tnav-time, .tnav-head .end-m { display: none; }  /* stehen schon in der Prüfungsleiste */
  .exam-name { display: none; }
  .exam-clock { margin-left: 0; }
  .exam-finish { margin-left: auto; }
  .exam-finish .lg { display: none; }
  .exam-finish .sm { display: inline; }
}
@media (max-width: 760px) {
  .test { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  /* Fragenleiste und Zeit bleiben beim Scrollen oben sichtbar */
  .tnav { top: calc(env(safe-area-inset-top, 0px) + var(--top-h)); z-index: 5; max-height: none; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); border-radius: var(--r-box); }
  .chips { display: flex; overflow-x: auto; padding: 3px 3px var(--sp-2); scrollbar-width: thin; }
  .chip { flex: none; width: var(--hit); }
  .chip.essay { width: auto; }
  .tnav-legend, .tnav .end { display: none; }
  .end-m { display: inline-flex; margin-left: auto; padding: 0; min-height: var(--hit); align-items: center; }
}

/* Ergebnis */
.result { display: grid; gap: var(--sp-6); }
.scorebox { display: grid; gap: var(--sp-4); }
.score-main { display: flex; align-items: center; gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; }
.score-num { font: 600 var(--fs-h2)/0.95 var(--f-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.circled { display: inline-block; }
.score-side { display: grid; gap: var(--sp-1); }
.pen-comment { font: 600 var(--fs-lead)/1.2 var(--f-head); color: var(--olive); }
.score-of { color: var(--ink-2); max-width: 40ch; }
.score-bar { display: flex; height: 10px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; gap: 2px; }
.score-bar i { display: block; height: 100%; transition: width .4s ease-out; }
.c-0 { background: var(--olive); } .c-1 { background: var(--olive-mid); } .c-2 { background: var(--control); } .c-e { background: var(--ink); }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); margin: 0; }
.parts > div { padding: var(--sp-4); border-radius: var(--r-box); background: var(--bg); display: grid; gap: var(--sp-1); }
.parts dt { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-2); }
.parts dt i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.parts dd { margin: 0; }
.parts b { font: 600 var(--fs-lead)/1.2 var(--f-head); font-variant-numeric: tabular-nums; }
.essay-box { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); border-top: var(--bw) solid var(--line); }
.essay-box h2, .review h2, .weak-box h2 { font: 600 var(--fs-lead)/1.2 var(--f-head); }
.essay-text { white-space: pre-wrap; padding: var(--sp-4); border-radius: var(--r-box); background: var(--bg); max-height: 18rem; overflow: auto; overflow-wrap: anywhere; }
.eval { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-4); align-items: start; }
.eval > div { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-box); background: var(--bg); }
.eval h3 { font-size: var(--fs-body); }
.crit-check { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; min-height: var(--hit); }
.crit-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.crit-check small { display: block; color: var(--ink-2); font-size: var(--fs-small); }
.ai-total { font: 600 var(--fs-lead)/1 var(--f-head); font-variant-numeric: tabular-nums; }
.ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ai-list li { display: grid; gap: 2px; }
.ai-list .row { display: flex; justify-content: space-between; gap: var(--sp-3); font-weight: 600; }
.ai-list p { color: var(--ink-2); font-size: var(--fs-small); }
.thinking { color: var(--ink-2); }
.review { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: var(--bw) solid var(--line); }
.review details { border-radius: var(--r-box); background: var(--bg); }
.review summary { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); padding: var(--sp-2) var(--sp-4); cursor: pointer; list-style: none; }
.review summary::-webkit-details-marker { display: none; }
.review summary .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review .body { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--olive); } .dot.bad { background: var(--red); } .dot.open { background: transparent; border: var(--bw-strong) solid var(--control); }
.lbl { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.weak-box { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: var(--bw) solid var(--line); }
.weak { display: grid; gap: var(--sp-2); }
.weak-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-box); background: var(--bg); }
.weak-row > span { min-width: 0; }
.weak-row small { display: block; color: var(--ink-2); font-size: var(--fs-small); }
.essay-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }

/* Wischen und Hinweise */
.qcard { touch-action: pan-y; }
.qcard.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hint-touch { display: none; font-size: var(--fs-small); color: var(--ink-2); }
@media (hover: none) { .hint-touch { display: inline; } }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 30;
  transform: translateX(-50%); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface); font-weight: 600; box-shadow: var(--shadow-float); /* taste-skill-ignore: schwebende Meldung */
  animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Fußzeile: schlicht, im laufenden Test ausgeblendet */
.foot { padding-block: var(--sp-7) var(--sp-6); font-size: var(--fs-small); color: var(--ink-2); display: grid; gap: var(--sp-2); }
.foot p { max-width: 75ch; }
body:is([data-view="start"], [data-view="how"]) .foot { margin-top: var(--sp-section); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); border-top: var(--bw) solid var(--line); padding-top: var(--sp-6); }
body[data-running] .foot-wrap { display: none; }
body:not([data-view="start"]):not([data-view="how"]) .foot { max-width: calc(var(--w-app) + 2 * var(--gutter)); }
body[data-view="practice"] .foot { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
@media (max-width: 760px) { body:is([data-view="start"], [data-view="how"]) .foot { grid-template-columns: minmax(0, 1fr); } }

/* Bewegung: nur mit html.has-motion. Das Skript setzt die Klasse nicht bei „weniger Bewegung“, ohne Skript bleibt alles sichtbar. */
.has-motion .top-in { animation: nav-in 0.5s var(--ease-out) both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-4px); } }
.has-motion [data-reveal] { transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0ms), transform var(--dur-slow) var(--ease-out) var(--d, 0ms); }
.has-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.has-motion .enter { animation: rise-in var(--dur-slow) var(--ease-out) var(--d, 0ms) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
/* Antworten: Haken zeichnet sich, Buchstabe ploppt, falsch wackelt kurz */
.tfield.is-right::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--olive);
  -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat; }
.has-motion .opt.is-right::after, .has-motion .tfield.is-right::after { animation: tick-draw 420ms var(--ease-out) both; }
@keyframes tick-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.has-motion .opt.is-right .bub, .has-motion .opt.is-wrong .bub { animation: dot-pop var(--dur-fast) var(--ease-pop) both; }
@keyframes dot-pop { from { transform: scale(0.6); } }
.has-motion .opt.is-wrong, .has-motion .tfield.is-wrong { animation: nudge 320ms var(--ease-out); }
@keyframes nudge { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* Auf Touch-Geräten bleibt kein Hover-Zustand hängen; Rückmeldung gibt es über :active */
@media (hover: none) {
  .btn:hover { background: transparent; border-color: var(--control); }
  .btn.primary:hover { background: var(--ink); border-color: var(--ink); }
  .btn.soft:hover { background: var(--tint); border-color: transparent; }
  .btn.danger:hover { border-color: var(--red); }
  .opt:hover:not([disabled]) { border-color: var(--line); background: var(--surface); }
  .topic:hover:not([disabled]) { background: transparent; }
  .nav button:hover { background: none; }
  .nav button[aria-current="page"] { background: var(--tint); }
  .side-nav button[aria-current="page"] { background: var(--surface); }
  .tabbar button[aria-current="page"] { background: none; }
  .side-link:hover { background: none; }
  .radio:hover { background: transparent; }
  .radio:has(input:checked) { background: var(--olive-soft); }
  .flag-btn:hover { color: var(--ink-2); border-color: var(--control); }
  .flag-btn[aria-pressed="true"] { color: var(--flag); border-color: var(--flag); }
  .btn:active { background: var(--tint); }
  .btn.primary:active { background: var(--ink-hover); }
  .opt:active:not([disabled]), .topic:active:not([disabled]) { background: var(--bg); }
}

/* Übergang zwischen Overview, Practice und Mock test: die Kopfzeile bleibt stehen, der Inhalt gleitet in Leserichtung */
.top { view-transition-name: top; }
.side { view-transition-name: side; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
html[data-dir="back"]::view-transition-old(root) { animation-name: vt-out-back; }
html[data-dir="back"]::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(24px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-24px); } }

/* Weniger Bewegung: nichts fährt, Rückmeldungen bleiben als kurze Überblendung */
@media (prefers-reduced-motion: reduce) {
  .explain, .toast { animation: fade 0.2s ease-out; }
  .toast { transform: translateX(-50%); }
  .btn:active, .opt:active, .topic:active, .chip:active, .nav button:active { transform: none; }
  .p-bar i, .score-bar i { transition: none; }
}
@keyframes fade { from { opacity: 0; } }