*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:CLIP, nicht hidden (Dom-Fund 03.09.2026: „chat rutscht nicht mit").
   `hidden` auf EINER Achse zwingt die andere von `visible` auf `auto` — der body wurde
   dadurch zu einem eigenen Scroll-Container, und ein `position:sticky`-Kind darin klebt
   an einem Kasten, der selbst nie scrollt. Gemessen: `getComputedStyle(body).overflowY`
   war „auto". `clip` hält seitliches Verrutschen genauso ab, ohne einen Scrollport zu
   erzeugen — dieselbe Begründung steht seit heute früh schon bei `html` (app-plan.css). */
body{font-family:var(--font);font-size:var(--fs-body);line-height:1.6;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* MATHEMATIK — die Schrift, aus der Wurzel, Bruchstrich und Klammern kommen.
   (Dom-Fund 10.09.2026: „wieso schreibt floki hier unterschiedliche wurzeln? sie schauen
   irgendwie verzerrt aus.")
   Bis heute stand hier NICHTS: `<math>` erbte die Textschrift, und Titillium liefert das
   Wurzelzeichen gar nicht — seine unicode-range (tokens.css) enthält U+221A nicht. Also
   holte der Browser das √ aus der System-Rückfallschrift (Segoe UI / Roboto / SF), und die
   hat keine OpenType-MATH-Tabelle mit fertigen Größenstufen. Der Browser bleibt dann nur
   beim Strecken des einen vorhandenen Zeichens — und genau das sieht verzerrt aus, umso
   mehr, je höher der Inhalt unter dem Haken ist (a²+b² hoch, 25 flach: „unterschiedliche
   Wurzeln"). Chromium lässt das Zeichen im Extremfall sogar ganz weg (headless-Edge-
   Gegenprobe: aus √(a²+b²) wurde a²+b²).
   Beide Zeilen sind KEINE Erfindung, sondern das mitgelieferte Stylesheet der Bibliothek,
   die unser MathML erzeugt: node_modules/temml/dist/Temml-Local.css:14-15 (Schriftkette)
   und :53-58 („Cramped superscripts in WebKit" — ohne math-shift wird die Hochzahl IM
   Wurzelkasten nicht abgesenkt, der Haken also höher als nötig). Wir laden diese Datei
   bewusst nicht (guards/mathml.ts) und übernehmen deshalb genau die zwei Regeln, die die
   Darstellung tragen — keine Webschrift, keine neue Datei, kein zusätzlicher Download. */
math{font-family:"Cambria Math","STIXTwoMath-Regular","NotoSansMath-Regular",math}
mfrac > :nth-child(2),msqrt,mover > :first-child{math-shift:compact}
::selection{background:var(--gold-soft);color:var(--maroon-dark)}
h1,h2,h3{color:var(--maroon);line-height:1.15}
h1{font-weight:900;letter-spacing:-.5px;line-height:1.08}
h2{font-weight:700;font-size:var(--fs-h2)}
h3{font-weight:700;font-size:var(--fs-h3)}
.num{font-variant-numeric:tabular-nums}
.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}
.floki-face{display:block;width:100%;height:100%;border-radius:50%;background-image:var(--floki-face);background-size:cover;background-position:center}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--maroon);color:#fff;font-weight:700;
  padding:10px 18px;border-radius:0 0 10px 10px;transition:top var(--t)}
.skip:focus{top:0}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 22px}
section.landing{padding:var(--sec-pad) 0}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.lead{font-size:1.125rem;line-height:1.65;color:var(--ink-2);max-width:38em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--focus-on-dark)}

/* ===== Buttons & Chips ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);
  font-weight:700;font-size:1rem;line-height:1;min-height:44px;padding:0 22px;border:0;
  border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),box-shadow var(--t-fast)}
.btn-primary{background:var(--cta);color:var(--cta-ink);box-shadow:0 3px 0 var(--cta-edge),var(--shadow)}
.btn-primary:hover{background:var(--cta-hover);transform:translateY(-1px);box-shadow:0 4px 0 var(--cta-edge),var(--shadow)}
.btn-primary:active{background:var(--cta-active);transform:translateY(2px);box-shadow:0 1px 0 var(--cta-edge)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--focus)}
/* Touch (Dom-Fund 03.09.2026, Handy): :hover „klebt" nach dem Tippen, und der feste
   Knopf unten sprang bei jeder Beruehrung um 1–2 px — wirkte wie ein Eigenleben.
   Ohne Maus gibt es kein Schweben, also auch keinen Schwebe-Effekt. */
@media (hover:none){
  .btn-primary:hover{transform:none;box-shadow:0 3px 0 var(--cta-edge),var(--shadow);background:var(--cta)}
}
.btn-hero{min-height:52px;padding:0 30px;font-size:1.0625rem}
.btn-maroon{background:var(--maroon);color:#fff;box-shadow:0 3px 0 var(--maroon-dark)}
.btn-maroon:hover{background:var(--maroon-light)}
.btn-maroon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--focus)}
.btn-ghost{background:transparent;color:var(--maroon);border:2px solid rgba(104,24,38,.28)}
.btn-ghost:hover{border-color:var(--maroon);background:var(--tint-rose)}
/* Unumkehrbare Aktion (02.09.2026): sichtbar anders als der sichere Weg, aber ruhig —
   der hervorgehobene Knopf im Dialog bleibt „Behalten". Maroon, keine neue Farbe. */
.btn-danger{background:var(--maroon);color:#fff;border:2px solid var(--maroon)}
.btn-danger:hover{background:#4b0e14;border-color:#4b0e14}
.btn-danger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--focus)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:55}
#toastWrap{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:10px}
.toast{display:flex;align-items:center;gap:11px;background:var(--maroon);color:#fff;border-radius:12px;padding:11px 15px;box-shadow:var(--shadow-lg);min-width:215px;transition:opacity .4s,transform .4s}
.toast .tg{font-size:25px}
.toast .tl{font-size:11px;opacity:.85}
.toast .tn{font-weight:700;font-size:14px}
#doneBanner{position:fixed;top:14px;left:50%;z-index:var(--z-toast);background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--r-pill);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translate(-50%,-20px);transition:opacity .35s,transform .35s}
#doneBanner.show{opacity:1;transform:translate(-50%,0)}
.spark{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:50}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-hover{transition:transform var(--t) var(--ease),box-shadow var(--t)}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* Reveal */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .48s var(--ease),transform .48s var(--ease);transition-delay:calc(var(--i,0)*70ms)}

/* Keyframes */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(104,24,38,.35)}50%{box-shadow:0 0 0 6px rgba(104,24,38,0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,255,176,.6)}70%{box-shadow:0 0 0 7px rgba(124,255,176,0)}100%{box-shadow:0 0 0 0 rgba(124,255,176,0)}}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(60px)}}
@keyframes rayBreathe{0%,100%{opacity:.26}50%{opacity:.34}}