:root{
  --brombeer:#3a0f33; --brombeer-tief:#1d0718; --gruen:#5bc236; --gelb:#f5a700;
  --rot:#e2342c; --weiss:#f4f7ff; --rahmen:#a87f2e; --gold:#ffc83d;
  /* Nur fuer die Raenge: hell genug fuer den dunklen Grund, und die
     einzige Farbe, die im Spiel noch keine Bedeutung trug. */
  --rang:#7fd4ff;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Muss hier stehen: eigene display-Regeln (grid, flex) schlagen sonst das
   hidden-Attribut und Elemente bleiben sichtbar, obwohl der Code sie versteckt. */
[hidden]{display:none !important}
body{
  min-height:100dvh; background:radial-gradient(circle at 50% 0%,#5e1a52,var(--brombeer-tief) 70%);
  color:var(--weiss); font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; align-items:center; justify-content:center; padding:16px;
  /* Das viewport-Meta steht auf „viewport-fit=cover“: Der Hintergrund soll
     bis unter Notch und Gestenleiste reichen, der INHALT aber nicht. Ohne
     diese vier Zeilen lag die vierte Antwort auf einem Samsung mit
     Gestennavigation unter der Leiste und war unten angeschnitten.
     max() statt env() allein, damit die 16px Grundpolster nie unterschritten
     werden — auf Geräten ohne Aussparung ist env() schlicht 0. */
  padding-top:max(16px, env(safe-area-inset-top));
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  -webkit-font-smoothing:antialiased;
  /* Wer schnell hintereinander tippt — etwa waehrend der Erklaerung —
     loeste sonst den Doppeltipp-Zoom des Browsers aus, und das Bild
     sprang. manipulation laesst Wischen und Kneifen zu, nur der
     Doppeltipp zoomt nicht mehr. */
  touch-action:manipulation; overscroll-behavior:none;
}
/* Während einer Frage darf nichts scrollen: Scrollen reißt sonst den Satz ab
   und man verliert Antwortzeit beim Suchen. */
body.spielt{overflow:hidden}
/* Dasselbe fuer alle anderen Bildschirme, die keine sein sollen — Lobby,
   Namen, Stufe, Themen, Vorspann, Tschuess. Welche blaettern duerfen,
   entscheidet BLAETTERBAR in js/app.js.
   Die Klasse steht auch auf <html>, und das ist der Punkt: overflow:hidden
   NUR auf dem body haelt Handy-Browser nicht auf — dort schiebt dann das
   Wurzelelement weiter, und man wischt die Buehne trotzdem weg.
   overscroll-behavior nimmt zusaetzlich das Gummiband am Rand. */
html.steht, body.steht{overflow:hidden; overscroll-behavior:none}
/* 32px sind die beiden Polster des body. Die Aussparungen des Geraets kommen
   obendrauf — sonst rechnet die Buehne mit Hoehe, die physisch unter der
   Gestenleiste liegt. */
body.spielt #buehne{
  height:calc(100dvh - 32px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  display:flex; flex-direction:column;
}
body.spielt .bild[data-bild="spiel"]{flex:1;min-height:0;justify-content:space-between;gap:10px}
/* overflow:hidden schnitt lange Regeltexte einfach ab. Scrollen lassen,
   und etwas mehr Platz geben. */
body.spielt .sprechblase{min-height:0;max-height:30vh;overflow-y:auto;margin-bottom:10px;
  -webkit-overflow-scrolling:touch}
body.spielt .gesagt{font-size:clamp(.92rem,3.2vw,1.2rem)}
/* Eine Variable, kein fester Wert: der Kasten rechnet seine Hoehe daraus,
   und wenn eine sehr lange Frage die Schrift verkleinern muss, bleibt der
   Kasten trotzdem genau gleich hoch. */
body.spielt .frage{--fragenschrift:clamp(.98rem,3.7vw,1.4rem); font-size:var(--fragenschrift)}
/* Die Antworten der Edition sind deutlich laenger als die des Originals —
   zweiundneunzig Zeichen gegen dreiundfuenfzig. Mit der geerbten Groesse
   fuellt der Text die Reihe bis an den Rand. Die Reihenhoehe bleibt davon
   unberuehrt: grid-auto-rows rechnet mit der Schrift des Elternelements. */
body.spielt .antwort{padding:11px 14px;
  font-size:clamp(.86rem, 3.6vw, 1rem);line-height:1.3}
body.spielt .antwort .b{flex:0 0 32px;height:32px}
body.spielt .steuerung{padding-top:6px}
body.spielt .knopf.klein{padding:8px 14px;font-size:.8rem}
#buehne{width:100%;max-width:900px}
.bild[hidden]{display:none}
.bild{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}

.titel{width:100%;max-width:560px;margin:0 auto;text-align:center}
.titel img{width:100%;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
/* 30ch stammten vom alten, laengeren Spruch und zwangen den neuen (40
   Zeichen) auf zwei Zeilen — „wissen.“ stand allein darunter. Die Grenze
   bleibt, damit ein kuenftiger langer Text nicht quer ueber den Bildschirm
   laeuft, ist aber weit genug fuer diesen hier. balance verteilt die Woerter
   gleichmaessig, falls doch einmal umbrochen wird. */
.claim{opacity:.85;max-width:44ch;text-wrap:balance}
/* Absender unten auf dem Startbild: Marke und Partnerhinweis, beides anklickbar. */
.absender{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:4px}
.vonwem{font-size:.72rem;font-weight:600;opacity:.5;letter-spacing:.14em;text-transform:uppercase}
.marke{display:block;opacity:.9;line-height:0}
.marke:hover{opacity:1}
.marke img{width:min(50%,188px);height:auto;display:block;margin:0 auto}
.praesentiert{
  color:var(--weiss);opacity:.6;font-size:.8rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.praesentiert:hover{opacity:.9}

h2{font-size:clamp(1.3rem,5vw,2rem);font-weight:800}
.knopf{
  /* relative, damit die Pro-Fahne am Knopf klebt. Ohne das hatte sie keinen
     positionierten Vorfahren und landete in der oberen rechten Ecke der
     Seite — weit weg von dem Knopf, auf den sie sich bezieht. */
  position:relative;
  font:inherit;font-weight:800;cursor:pointer;border:none;border-radius:16px;
  padding:16px 28px;background:var(--gelb);color:#20160a;
  box-shadow:0 5px 0 #b87d00; transition:transform .06s, box-shadow .06s;
}
.knopf:active{transform:translateY(4px);box-shadow:0 1px 0 #b87d00}
.knopf.gross{font-size:1.2rem;padding:18px 36px}
.knopf.leise{background:transparent;color:var(--weiss);box-shadow:none;opacity:.7;font-weight:600;padding:8px}
.zahlen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.knopf.zahl{width:84px;height:84px;font-size:2rem;border-radius:20px}
.hinweis{opacity:.7;font-size:.9rem}

.leiste{width:100%;display:flex;justify-content:space-between;font-weight:700;opacity:.85}
.sprechblase{
  width:100%;background:rgba(255,255,255,.08);border:2px solid var(--rahmen);
  border-radius:18px;padding:14px 18px;text-align:left;min-height:84px;
  margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;
}
.sprechblase .wort{flex:1 1 auto;min-width:0}
/* Das Gesicht wechselt mit dem Register der Zeile: wer spottet, grinst
   haemisch. Die Bilder stammen aus dem Modelsheet der Serie. */
/* Der Kopf sitzt in einer hellen Scheibe. Ohne sie verschwinden die dunklen
   Haare im dunklen Hintergrund, und uebrig bleibt ein schwebendes Gesicht
   ohne Silhouette — die Frisur ist aber das Erkennungszeichen der beiden.
   Der Ring nimmt die Farbe des Sprechers auf. */
.gesicht{
  flex:0 0 auto;width:clamp(52px,15vw,74px);height:auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fdfbf6 0%, #ebe4ee 65%, #d2c6d9 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.5);
  outline:3px solid var(--rahmen);outline-offset:0;
  animation:gesichtRein .32s cubic-bezier(.2,1.6,.4,1) both;
}
.sprechblase:has(.sprecher[data-wer="fraenk"]) .gesicht{outline-color:var(--gruen)}
.sprechblase:has(.sprecher[data-wer="hilary"]) .gesicht{outline-color:var(--rot)}
.gesicht[hidden]{display:none}
@keyframes gesichtRein{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gesicht{animation:none}}
.sprecher{font-size:.75rem;letter-spacing:.18em;font-weight:800;opacity:.75}
.sprecher[data-wer="hilary"]{color:var(--rot)}
.sprecher[data-wer="fraenk"]{color:var(--gruen)}
.gesagt{font-size:clamp(1rem,3.6vw,1.3rem);line-height:1.35;margin-top:4px}

.uhr{
  width:100%;height:12px;background:rgba(0,0,0,.35);border-radius:99px;
  position:relative;margin-bottom:22px;
  /* Im Spielbild ist die Bühne eine Flex-Spalte. Ohne diese Zeile drückt
     eine Frage mit vier langen Antworten den Balken auf null Höhe — das
     Fähnchen blieb stehen, weil es absolut positioniert ist, der Balken war
     weg. */
  flex:0 0 12px;
}
.uhr-balken{height:100%;width:100%;background:var(--gelb);border-radius:99px;position:relative}
.uhr-balken.knapp{background:var(--rot)}

/* Fähnchen am Ende des Balkens: zeigt, was die Antwort JETZT noch wert ist,
   und wandert mit der ablaufenden Zeit nach links. */
.uhr-wert{
  position:absolute;right:0;top:100%;transform:translate(50%,6px);
  background:var(--gelb);color:#20160a;font-weight:900;font-size:.82rem;
  padding:3px 10px;border-radius:99px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.uhr-wert::before{
  content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--gelb);border-top:0;
}
.uhr-balken.knapp .uhr-wert{background:var(--rot);color:#fff}
.uhr-balken.knapp .uhr-wert::before{border-bottom-color:var(--rot)}

.frage{width:100%}
.antworten{width:100%;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:620px){.antworten{grid-template-columns:1fr 1fr}}
.antwort{
  font:inherit;font-weight:700;text-align:left;cursor:pointer;border:none;
  border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.1);
  color:var(--weiss);display:flex;gap:12px;align-items:center;
  border:2px solid transparent;
}
.antwort .b{
  flex:0 0 36px;height:36px;border-radius:10px;background:var(--rahmen);
  display:grid;place-items:center;font-weight:900;
}
.antwort:disabled{cursor:default}
.antwort.richtig{background:var(--gruen);color:#07280a;border-color:#fff}
.antwort.falsch{background:var(--rot);border-color:#fff}
.antwort.gewaehlt{outline:3px solid var(--gold);outline-offset:2px}

/* EINE ZEILE AUS BEIDEM. Die Abrechnung sass bis zum 06.11.2026 unten und
   nahm dem Ergebnis den Platz, waehrend hier oben welcher frei war.
   `space-between`: Die Abrechnung haelt links ihren Platz (sie bleibt bei uns
   auch leer stehen, siehe `#rechnung[hidden]`), der Punktestand sitzt rechts. */
.punktezeile{
  width:100%;display:flex;gap:5px;align-items:center;justify-content:space-between;
  /* NICHT UMBRECHEN. Karl am 07.11.2026: „EINE ZEILE FUER ALLE PUNKTE."
     Mit Umbruch rutschte der Punktestand bei 360 Punkten Breite in eine
     zweite Zeile — gemessen: 63 statt 30 Punkte hoch, und die Mittellinien
     lagen 34 auseinander. Ohne Umbruch schrumpfen die Pillen stattdessen
     von 86,4 auf 64,6 und bleiben dabei ganz lesbar; der Punktestand
     behaelt seine Breite, weil er nicht schrumpfen darf. */
  flex-wrap:nowrap;
}
.punktezeile .rechnung{width:auto;justify-content:flex-start;flex:1 1 auto;min-width:0}
.punktezeile .konten{width:auto;justify-content:flex-end;flex:0 0 auto}
/* Hier stand bis zum 06.11.2026 eine Grenze von 7ch auf den Spielernamen,
   weil ein langer Name die Abrechnung aus der Zeile draengte. Karl hat den
   Namen stattdessen ganz aus dem Punktestand genommen: Er steht jetzt oben
   in der Leiste, hier unten steht „Player 1". Eine Kuerzung waere damit
   falsch — sie wuerde den festen Platz abschneiden. */

.konten{width:100%;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.konto{
  display:flex;gap:8px;align-items:baseline;background:rgba(255,255,255,.08);
  border:2px solid transparent;border-radius:99px;padding:6px 14px;font-weight:700;
}
.konto[data-dran="ja"]{border-color:var(--gold);background:rgba(255,200,61,.16)}
.konto b{font-weight:800}
.konto .punkte{font-variant-numeric:tabular-nums;opacity:.85}
.namensfelder{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.namensfelder input{
  font:inherit;font-weight:700;padding:14px 16px;border-radius:14px;border:2px solid var(--rahmen);
  background:rgba(255,255,255,.1);color:var(--weiss);text-align:center;
}
.namensfelder input::placeholder{color:rgba(244,247,255,.45);font-weight:600}
.rangliste{list-style:none;width:100%;display:flex;flex-direction:column;gap:8px}
/* Punktetafel statt Liste: Platzziffer, Name mit Marken darunter, rechts
   die Zahl in derselben Handschrift wie der Einschlag. */
.rangliste li{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border:2px solid rgba(255,255,255,.12);
  border-radius:18px;padding:12px 16px;font-weight:700;
  /* Damit die Jagd-Zeile als eigene Reihe unter alles passt. */
  flex-wrap:wrap;
}
.rangliste .platz{
  flex:0 0 auto;min-width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.18);
  font-weight:900;font-size:.92rem;font-variant-numeric:tabular-nums;
}
.rangliste .wer{flex:1 1 auto;min-width:0;text-align:left;overflow:hidden}
.rangliste .name{
  font-size:clamp(1rem,4vw,1.2rem);font-weight:900;line-height:1.15;
  overflow-wrap:anywhere;
}
/* nowrap: die zwei Marken stehen nebeneinander oder gar nicht. */
.rangliste .marken{display:flex;flex-wrap:nowrap;gap:6px;margin-top:6px;min-width:0}
.rangliste .marke{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.rangliste .marke{
  /* Schrift waechst mit der Breite: auf einem 360er Handy muss
     „Durchgefallen" neben „4/10" noch ganz hineinpassen. */
  font-size:clamp(.58rem,2.7vw,.72rem);
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.6;padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,.28);white-space:nowrap;
}
.rangliste .marke.treffer{opacity:.85}
.rangliste .punktzahl{
  flex:0 0 auto;
  font-size:clamp(1.25rem,5.6vw,1.75rem);font-weight:900;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gelb);
  -webkit-text-stroke:2.2px #1a1004;paint-order:stroke fill;
  text-shadow:0 2px 0 #8a5a00, 0 4px 8px rgba(0,0,0,.45);
}

/* Die Siegerkarte: golden, mit Glanzkante. Dort ist alles dunkel, sonst
   stuende Gold auf Gold. */
.rangliste li.siegt{
  background:linear-gradient(180deg, #ffd864, var(--gold) 55%, #e59a00);
  border-color:#fff0bf;color:#241a00;
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6);
}
.rangliste li.siegt .platz{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.25)}
/* Auf dem Gold brauchen die Marken einen dunklen Grund, sonst verschwimmt
   die Schrift darin. */
.rangliste li.siegt .marke{background:rgba(0,0,0,.42);color:#ffe9a8}
.rangliste li.siegt .marke.gewonnen{background:#241a00;color:var(--gold)}
.rangliste li.siegt .punktzahl{
  color:#241a00;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(255,255,255,.45);
}

.stufen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.knopf.stufe{display:flex;flex-direction:column;gap:4px;min-width:150px}
.knopf.stufe small{font-weight:600;opacity:.65;font-size:.72rem}
/* Die Praemie fuers Bestehen. KEINE eigene Farbe: Der Stufenknopf ist selbst
   gold, und Gold auf Gold war schlicht unsichtbar. Sie erbt die Schriftfarbe
   des Knopfes und hebt sich durch volle Deckkraft und Fettung von der Zeile
   darueber ab — die steht auf opacity .65. */
.knopf.stufe small.praemie{
  opacity:1;font-weight:800;letter-spacing:.02em;margin-top:2px;
}
.quote{opacity:.7;font-weight:600;font-size:.85rem}
/* Der Rang in der Bestenliste. Gruen, rot und gold sind im Spiel mit
   Bedeutung belegt (richtig, falsch, perfekt) — frei ist nur Blau, und das
   dunkle Blau ist der Hintergrund. Deshalb ein helles Blau, das darauf
   liest. Gesperrt gesetzt, damit auch ein kurzes Wort wie „Handbremse"
   nach Auszeichnung aussieht und nicht nach Beschriftung. */
.rang{
  color:var(--rang);font-weight:800;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.urteil{font-size:clamp(1.1rem,4vw,1.5rem);font-weight:800}
.urteil.bestanden{color:var(--gruen)}
.urteil.perfekt{color:var(--gold)}
/* Die Siegerkarte ist selbst golden — dort waere Gold auf Gold unlesbar. */
.urteil.durchgefallen{color:var(--rot)}

.steuerung{display:flex;gap:8px;justify-content:center;margin-top:auto;padding-top:12px}
.knopf.klein{
  background:rgba(255,255,255,.1);color:var(--weiss);box-shadow:none;
  font-size:.85rem;font-weight:700;padding:10px 18px;border-radius:12px;
}
.knopf.klein:active{transform:translateY(2px)}
body.pausiert .antworten,body.pausiert .uhr{opacity:.35;pointer-events:none}

/* Ruhebild zwischen den Fragen: verhindert, dass der Bildschirm leer wirkt
   und dass das Layout beim Erscheinen der Antworten springt. */
/* Seit dem quadratischen Logo ueber die Hoehe begrenzt — sonst schiebt
   das Ruhebild die Frage nach unten. */
.ruhebild{width:min(70%,340px);max-height:268px;height:auto;object-fit:contain;
  opacity:.9;margin:8px auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
/* UNGENUTZT seit dem 06.11.2026. Die Regel gehoerte zum Gong vor der
   Finalfrage: Das Ruhebild wackelte dazu kurz, damit der Gong nicht ein
   Geraeusch ohne Bild war. Karl hat den Gong gestrichen („nur kein
   unnoetiger gong, da dies der song schon ersetzt"), also wackelt auch
   nichts mehr — js/spiel.js setzt die Klasse `wackelt` nirgends.
   NICHT GELOESCHT, weil die Bewegung selbst weiter gebraucht wird:
   `taenzeln` laeuft im Vorspann endlos (weiter unten). Wer hier aufraeumt,
   nimmt die Regel, nicht die Bewegung. */
/* Der Verdopplungs-Posten soll sich von den anderen abheben. */
.rechnung .posten.doppelt{color:var(--gold);font-weight:800}

.ruhebild.wackelt{transform-origin:50% 88%;animation:taenzeln 1.1s ease-in-out 3}
@media (prefers-reduced-motion:reduce){.ruhebild.wackelt{animation:none}}

.antworten.gesperrt .antwort{opacity:.75}
.antworten.gesperrt .antwort .b{background:var(--gold);color:#20160a}

/* Wer dran ist, muss auf einen Blick erkennbar sein. */
.dran{
  width:100%;text-align:center;font-weight:900;
  font-size:clamp(1rem,4vw,1.4rem);color:var(--gold);
  background:rgba(255,200,61,.12);border:2px solid var(--gold);
  border-radius:99px;padding:8px 18px;letter-spacing:.02em;
}

/* Die Punkterechnung nach jeder Antwort — damit niemand raten muss,
   wie eine Zahl zustande kommt. */
.rechnung{
  width:100%;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  align-items:baseline;font-weight:700;
}
.rechnung .posten{background:rgba(255,255,255,.1);border-radius:99px;padding:6px 14px}
.rechnung .posten b{color:var(--gruen)}
/* EINE ZEILE FUER ALLE PUNKTE, und alle Pillen gleich gross. Karl am
   07.11.2026: „ja aber die pillen sollten alle gleichgross sein. in einer
   reihe symmetrisch. schoen!" und „das sind nur informationen. nichts zum
   anklicken. es darf also kleiner sein."

   Hier stand bis dahin eine Regel, die auf schmalen Schirmen die Woerter
   ausblendete. Die Woerter gibt es nicht mehr — in den Pillen stehen
   Zeichen, das Wort haengt als Kurzhinweis am Feld.

   FESTE HOEHE, nicht `min-height`: Die Zeichen ziehen die Zeilenbox der
   Posten hoeher als die des Kontos, und dann liegen die Mittellinien
   nebeneinander um drei Punkte versetzt. Genau das hat Karl gesehen.
   FESTE STELLEN plus `tabular-nums`: Sonst wandert die Pille mit jeder
   Zahl. Vier Stellen reichen fuer jeden Bonus — unser groesster ist die
   verdoppelte Basis mit 2.000 —, sechs fuer den Punktestand: Der
   theoretische Hoechstwert liegt bei rund 70.000, also fuenf Ziffern plus
   Trennzeichen.
   DER ABSTAND ueber `gap`, nicht ueber ein Leerzeichen im Text: Die Zahl
   sitzt rechtsbuendig in einem Block fester Breite und klebte sonst bei
   vier Stellen am Zeichen. Karl: „wenn es geht waere ✅ 2000 schoener." */
.punktezeile .rechnung{gap:4px;justify-content:center;flex-wrap:nowrap}
.punktezeile .rechnung .posten,
.punktezeile .konto{
  height:28px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  padding-top:0;padding-bottom:0;
}
.punktezeile .rechnung,
.punktezeile .konten{align-items:center}
.punktezeile .rechnung .posten{
  flex:1 1 0;min-width:0;max-width:7.5em;
  text-align:center;overflow:hidden;gap:5px;
  font-size:.72rem;font-weight:800;padding:0 8px;
}
.punktezeile .rechnung .posten b{
  display:inline-block;min-width:4ch;text-align:right;
  font-variant-numeric:tabular-nums;
}
.punktezeile .konto{padding:0 6px;gap:4px}
/* MIT `body.spielt` DAVOR, sonst kommt es nicht an. Weiter unten steht
   `body.spielt .konto{padding:4px 12px}`, und das wiegt schwerer (0,2,1
   gegen 0,2,0) — die spaetere Position hilft nicht. Gemessen am
   07.11.2026 bei 360: angekommen waren 4px 12px statt 0 6px, der
   Punktestand war dadurch 137,2 statt 125 breit. Dass die Hoehe trotzdem
   stimmte, lag allein an `box-sizing:border-box` — richtig aus dem
   falschen Grund. Fund der Motor-World-Sitzung, bei uns nachgemessen. */
body.spielt .punktezeile .konto{padding:0 6px}
.punktezeile .konto b{font-size:.62rem;letter-spacing:.04em;
  text-transform:uppercase;-webkit-text-stroke-width:1.4px}
.punktezeile .konto .punkte{font-size:.76rem;min-width:6ch;
  text-align:right;-webkit-text-stroke-width:1.4px}
/* GEDRAENGTE ZEILEN. Ab vier Posten reicht der Platz bei 360 Punkten
   Breite nicht mehr: gemessen wurden dort 47,4 Punkte je Pille, und
   „✅ 2000" braucht mehr. Dann wird eine Stufe kleiner geschaltet, die
   feste Stellenbreite faellt weg (sie ordnet nur, wenn Platz dafuer ist)
   und der Punktestand gibt 22 Punkte ab.
   Gemessen bei 360 nach der Umstellung: drei Posten 64,6 · vier 53,6 ·
   fuenf 42,3 — nichts beschnitten, Hoehen und Mittellinien gleich.
   MEHR ALS FUENF GIBT ES NICHT: `henker` und `grosseFrage` haengen beide
   an `frage.rubrik`, und die hat genau einen Wert. Der Hoechstfall ist
   also Finalfrage, Richtig, Zeit, Schwere Frage, Serie. */
.punktezeile .rechnung.viele{gap:3px}
.punktezeile .rechnung.viele .posten{font-size:.56rem;padding:0 4px;gap:3px;max-width:none}
.punktezeile .rechnung.viele .posten b{min-width:0}
.punktezeile .rechnung.viele ~ .konten .konto b{font-size:.52rem}
.punktezeile .rechnung.viele ~ .konten .konto .punkte{font-size:.62rem;min-width:0}
@media(max-width:340px){
  .punktezeile .rechnung .posten{font-size:.52rem;padding:0 5px}
  .punktezeile .konto{padding:0 5px}
  body.spielt .punktezeile .konto{padding:0 5px}
  .punktezeile .konto b{font-size:.52rem}
  .punktezeile .konto .punkte{font-size:.62rem}
}
.rechnung .summe{
  background:var(--gold);color:#241a00;border-radius:99px;padding:6px 16px;font-weight:900;
}
.rechnung .nix{background:rgba(226,52,44,.22);border-radius:99px;padding:6px 16px}

/* Vorspann: Das Logo tänzelt zur Titelmusik — wippen und leicht kippen,
   mit dem Drehpunkt unten, als stünde es auf der Bühne. */
.vorspann-logo{
  width:min(92%,620px);height:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
  transform-origin:50% 88%;
  animation:taenzeln 2.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes taenzeln{
  0%   {transform:rotate(-2.2deg) translateY(0)     scale(1)}
  25%  {transform:rotate(1.6deg)  translateY(-9px)  scale(1.025)}
  50%  {transform:rotate(-1.2deg) translateY(0)     scale(1)}
  75%  {transform:rotate(2.2deg)  translateY(-7px)  scale(1.018)}
  100% {transform:rotate(-2.2deg) translateY(0)     scale(1)}
}
@media (prefers-reduced-motion:reduce){.vorspann-logo{animation:none}}

/* Richtig-oder-Falsch: zwei große Flächen statt vier Zeilen. */
.antworten.zwei{grid-template-columns:1fr 1fr}
.antworten.zwei .antwort{
  flex-direction:column;gap:8px;text-align:center;justify-content:center;
  padding:22px 14px;font-size:1.05rem;
}
.antworten.zwei .antwort .b{display:none}

/* Schätzfragen: Zahl eingeben statt auswählen. */
.schaetzen{width:100%;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.schaetzen input{
  font:inherit;font-weight:900;font-size:clamp(1.3rem,6vw,2rem);text-align:center;
  width:min(58%,220px);padding:12px 14px;border-radius:14px;
  border:2px solid var(--rahmen);background:rgba(255,255,255,.12);color:var(--weiss);
  font-variant-numeric:tabular-nums;
}
.schaetzen input::placeholder{color:rgba(244,247,255,.4);font-weight:600;font-size:1rem}
.schaetzen .einheit{font-weight:700;opacity:.8}
.aufloesung{
  width:100%;text-align:center;font-weight:800;
  font-size:clamp(1rem,3.8vw,1.3rem);
  background:rgba(255,255,255,.1);border-radius:16px;padding:12px 16px;
}
.aufloesung b{color:var(--gruen)}
.aufloesung .deine{color:var(--gold)}

/* Hinweis über der Frage, wenn der Typ vom Üblichen abweicht. */
/* Der Tipp neben der Fragenummer. Gesetzt wie der Titel auf dem
   Ergebnisbild: dieselbe gesperrte Auszeichnung, aber als Feld, damit er
   sich von der Zaehlzeile daneben abhebt.
   Gold, und zwar auf Karls Wunsch — „das sind erfolgreiche Marken, also
   Gold verdient". Angemerkt sei, dass Gold im Spiel schon besetzt ist:
   die gewaehlte Antwort, wer dran ist, der Typ-Hinweis darunter und das
   perfekte Ergebnis. Blau waere die einzige noch freie Farbe gewesen.
   Deshalb hier bewusst gedaempft — Rahmen und Grund bleiben schwach, die
   Schrift ist klein: ein Namensschild, kein Pokal.
   Keine feste Hoechstbreite: Das Feld nimmt, was neben der Fragenummer
   frei ist — die steht auf flex:0 0 auto und wird nicht gequetscht. Eine
   Deckelung auf 62 Prozent hatte vorher Platz verschenkt, den es gab.
   Zentriert gesetzt: bei einem zweizeiligen Namen haengt die zweite Zeile
   sonst schief unter der ersten. Bei den einzeiligen aendert es nichts,
   dort sitzt die Pille ohnehin eng um den Text. */
.zaehler{white-space:nowrap;flex:0 0 auto}
/* Hier stand am 06.11.2026 kurz ein Namensfeld, und die Leiste durfte
   dafuer umbrechen. Karl hat es am 07.11.2026 zurueckgenommen: Der Name
   steht wieder in der Pille, im Punktestand steht der feste Platz.
   Damit sind es hier wieder zwei Felder — Fragenummer und Wegweiser —,
   und die passen nebeneinander. Die Fragenummer schrumpft nicht:
   `.zaehler` traegt `flex:0 0 auto`. Der Wegweiser kuerzt bei uns nicht
   mit drei Punkten, sondern wird eine Nummer kleiner (`.tipp.eng`),
   gemessen am Umbruch des inneren span — unsere Hausnamen sind zu lang
   und zu wichtig zum Abschneiden. */
.tipp{
  color:var(--gold);font-weight:800;font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.38);
  border-radius:14px;padding:3px 8px;line-height:1.2;
  text-align:center;min-width:0;
  /* NICHT UMBRECHEN. Ein Feld, das umbrechen darf, waechst beim
     Drehen mitten in der Frage — gemessen: 16,5 auf 29 Punkte.
     Stattdessen wird der Name eine Nummer kleiner, und erst
     danach beschneidet ihn das Feld. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Nur fuer die paar Markennamen, die in einer Zeile nicht neben die
   Fragenummer passen — „Maison Francis Kurkdjian" und zwei weitere. Eine
   Nummer kleiner, dann bleibt auch dort alles einzeilig. Gesetzt wird die
   Klasse nicht nach Zeichenzahl, sondern nachdem das Spiel nachgesehen
   hat, ob der Text wirklich umbricht: Auf einem breiteren Geraet passt er
   in voller Groesse, und dann soll er auch gross bleiben. */
.tipp.eng{font-size:.56rem;letter-spacing:.02em;padding:3px 8px}
/* Umbrechen statt kuerzen. Drei Markennamen sind zu lang fuer eine Zeile
   neben der Fragenummer — „Maison Francis Kurkdjian", „PAX by Lorenzo
   Pazzaglia", „Stephane Humbert Lucas". Abgeschnitten waere der Tipp
   wertlos, und kleiner gesetzt drueckt er die Fragenummer in den Umbruch.
   Also darf das Feld zweizeilig werden; bei den anderen 62 Namen bleibt
   alles wie gehabt. Darum auch eckigere Ecken statt der Pille: ein
   zweizeiliger Kreisbogen sieht aus wie ein Unfall. */

.typhinweis{
  font-weight:900;letter-spacing:.12em;font-size:.78rem;
  color:var(--gold);text-transform:uppercase;
}

/* Unauffälliger Textlink — etwa zum Überspringen der Typ-Erklärung. */
.link{
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:600;
  color:var(--weiss);opacity:.6;text-decoration:underline;text-underline-offset:3px;
}
.link:hover,.link:active{opacity:.9}

.schalter{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}

/* Hinweis auf die Vollversion, nur in der Gratisfassung. */
.werbung{
  width:100%;display:flex;flex-direction:column;gap:8px;align-items:center;
  background:rgba(255,200,61,.12);border:2px solid var(--gold);
  border-radius:18px;padding:16px;text-align:center;
}
.werbung b{color:var(--gold)}
.werbung span{font-size:.88rem;opacity:.85;max-width:34ch}

/* Hilfe */
/* Eigene Zeile ueber der Sprechblase. Vorher lag der Knopf absolut in deren
   rechter oberer Ecke und sah aus, als gehoere er zum Kasten. */
/* In die Ecke gelegt, nicht in eine eigene Zeile: als Zeile hat sie oben
   vierundvierzig Pixel belegt, die dem Startbildschirm zum Hineinpassen
   gefehlt haben. */
.kopfleiste{position:absolute;top:10px;right:14px;z-index:5;margin:0;
  display:flex;justify-content:flex-end}
.hilfe-knopf{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(244,247,255,.35);background:rgba(255,255,255,.1);
  color:var(--weiss);font:inherit;font-weight:900;font-size:1.1rem;cursor:pointer;
}
.hilfe-knopf:hover{background:rgba(255,255,255,.2)}
#buehne{position:relative}
.hilfe{width:100%;text-align:left;max-height:62vh;overflow-y:auto;
  background:rgba(255,255,255,.07);border-radius:18px;padding:16px 18px}
.hilfe h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:14px 0 5px}
.hilfe h3:first-child{margin-top:0}
.hilfe p{font-size:.92rem;line-height:1.5;opacity:.9;margin-bottom:8px}
.hilfe b{color:var(--weiss)}
.rechtliches{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.rechtliches a{color:var(--weiss);opacity:.55;font-size:.78rem;text-decoration:underline;
  text-underline-offset:3px}
.rechtliches a:hover{opacity:.9}

/* Zugang zum Ausprobieren: sieben Klicks auf die Ueberschrift der Regeln. */
.bild[data-bild="hilfe"] h2{cursor:default;-webkit-user-select:none;user-select:none}
.test-marke{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-top:10px}

/* Mehrspieler gehoert zur Vollversion. Das Faehnchen sagt es vorher, damit
   niemand erst tippt und dann abgewiesen wird. */
.zahl{position:relative}
.pro-fahne{position:absolute;top:-7px;right:-7px;font-size:.58rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px;
  background:var(--gold);color:#2a0b24}
body.hat-pro .pro-fahne{display:none}
.pro-zeile{color:var(--gold);opacity:.95}
.pro-zeile .hinweis{color:inherit;margin-bottom:10px}

/* Abspann: dasselbe tänzelnde Logo wie im Vorspann, nur kleiner — darunter
   stehen ja noch Rangliste und Knöpfe. */
.abspann-logo{max-width:min(320px,62%);max-height:250px;object-fit:contain;margin:0 auto 4px}
.abspann-knoepfe{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
/* Flacher als sonst, aber nicht gedrueckt: darueber steht die Punktetafel.
   Dazu etwas Abstand nach oben, damit er nicht an der letzten Karte klebt. */
.abspann-knoepfe{margin-top:6px}
.abspann-knoepfe .gross{flex:1 0 100%;padding-block:15px}

/* Der Weg zur Vollversion steht auf der Startseite, nicht nur im Ergebnis. */
.pro-knopf{margin-top:12px;background:transparent;border:2px solid var(--gold);
  color:var(--gold);font-size:.92rem;padding:9px 16px}
.pro-knopf:hover{background:rgba(246,195,68,.12)}
body.hat-pro .pro-knopf{display:none}
/* Der Preis steht nicht im Code. Er kommt aus dem Play Store, sobald die
   App dort liegt — sonst bleibt die Stelle einfach leer. */
.pro-preis:empty{display:none}
/* Der Preis bleibt als Ganzes zusammen. Ohne das riss er auf schmalen
   Geraeten mitten durch und das Waehrungszeichen stand allein in der
   naechsten Zeile. Umbrechen darf der Knopf davor, zwischen Text und
   Preis. */
.pro-preis{white-space:nowrap}
/* Der alte Preis steht blasser und duenner daneben, damit der neue die
   Hauptrolle behaelt. Er erscheint nur, wenn Google wirklich weniger
   verlangt — siehe preisEintragen() in js/app.js. */
.pro-preis s{opacity:.65;font-weight:400;margin-right:.15em}
/* Die Frist steht als eigene, ruhigere Zeile unter dem Preis, damit der
   Knopf nicht zum Plakat wird. Als Block direkt im Knopf — siehe
   preisEintragen() in js/app.js. */
.knopf .aktion-bis{display:block;width:100%;margin-top:.2em;
  font-size:.68em;font-weight:400;opacity:.8;letter-spacing:.01em}
/* Die Beschriftung steht neben dem Betrag, ruhiger als er. Siehe
   preisEintragen() in js/app.js: bewusst ausserhalb von .pro-preis. */
.knopf .pro-marke{font-weight:400;opacity:.8}

/* Das Blatt vor dem Kauf. Kein eigenes Bild, sondern ein Dialog darüber —
   sonst müsste man aus dem Ergebnis heraus die Rangliste verlassen. */
/* margin:auto zentriert einen modalen Dialog. Der Reset *{margin:0} ganz
   oben hat das ausgehebelt — der Kasten klebte oben links. */
.blatt{margin:auto;border:0;border-radius:20px;padding:22px 20px;max-width:min(430px,92vw);
  color:var(--weiss);background:#3d1035;box-shadow:0 26px 60px rgba(0,0,0,.55)}
.blatt::backdrop{background:rgba(18,5,16,.72)}
.blatt h2{margin:0 0 14px;text-align:center}
.vorteile{margin:0 0 18px;padding:0 0 0 18px;text-align:left}
.vorteile li{margin-bottom:9px;font-size:.94rem;line-height:1.45;opacity:.92}
.vorteile b{color:var(--gold)}
.blatt .gross{width:100%}
.blatt .link{display:block;margin:12px auto 0}

/* Neuigkeiten. Die Liste scrollt in sich, damit das Blatt nicht waechst,
   wenn der Verlauf laenger wird — und das wird er. */
.news-knopf{
  height:38px;padding:0 14px;border-radius:19px;flex:0 0 auto;margin-right:8px;
  position:relative;
  border:2px solid rgba(244,247,255,.35);background:rgba(255,255,255,.1);
  color:var(--weiss);font:inherit;font-weight:800;font-size:.86rem;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;
}
.news-knopf:hover{background:rgba(255,255,255,.2)}
/* Der Punkt ist blau, nicht rot oder gold: Die beiden haben im Spiel
   bereits eine Bedeutung (falsch und Punkte), und ein roter Fleck auf der
   Startseite sieht nach Fehler aus statt nach Neuigkeit. */
.news-punkt{position:absolute;top:-3px;right:-3px;width:11px;height:11px;
  border-radius:50%;background:#4ea3ff;border:2px solid #2a0b24}
.news-liste{max-height:58vh;overflow-y:auto;text-align:left;
  margin:0 0 4px;padding-right:8px}
/* Wie ein Blog: feiner Strich, viel Luft. Die 26 Pixel oben und unten sind
   nicht zu viel — sie sind der Grund, warum man die Beitraege als einzelne
   Stuecke liest und nicht als eine lange Wand. */
.news-eintrag{padding:26px 0;border-top:1px solid rgba(244,247,255,.13)}
.news-eintrag:first-child{border-top:0;padding-top:4px}
.news-eintrag:last-child{padding-bottom:6px}
.news-kopf{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.news-datum{font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);opacity:.85}
.news-art{font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border-radius:11px;
  background:rgba(78,163,255,.2);color:#9ecbff}
.news-eintrag h3{font-size:1.06rem;line-height:1.3;margin:0 0 9px}
.news-eintrag p{font-size:.93rem;line-height:1.62;opacity:.88;margin:0 0 11px}
.news-eintrag p:last-child{margin-bottom:0}
.news-eintrag a{color:#9ecbff}
/* Der Link sieht aus wie ein Knopf zum Antippen, nicht wie ein Wort im
   Flieastext — auf dem Handy trifft man sonst daneben. */
.news-link{display:inline-block;margin-top:4px;padding:9px 16px;
  border-radius:19px;text-decoration:none;font-weight:800;font-size:.9rem;
  background:rgba(78,163,255,.18);border:1px solid rgba(78,163,255,.45)}
.news-link:hover{background:rgba(78,163,255,.3)}
.news-link + .news-link{margin-left:8px}

/* Das Sicherungsblatt. Erklärender Fließtext, den das Kaufblatt nicht hat:
   Niemand sichert etwas, dessen Zweck er nicht versteht. */
.blatt-text{margin:0 0 12px;font-size:.93rem;line-height:1.5;opacity:.9;text-align:left}
.blatt-hinweis{margin:12px 0 0;font-size:.85rem;text-align:center;opacity:.75;min-height:1.2em}
/* „Sicherung einlesen“ ist ein <label> auf einem versteckten Datei-Feld —
   ohne diese Zeile fehlt ihm die Knopfbreite und der Zeiger. */
.blatt label.knopf{display:block;width:100%;margin-top:10px;background:transparent;
  color:var(--weiss);box-shadow:none;border:2px solid rgba(255,255,255,.28);padding:12px}

/* Die Erinnerung auf der Startseite. Sie sieht bewusst nicht wie die anderen
   Knöpfe aus: ein Hinweis, kein Spielzug. Sie bleibt stehen, auch nachdem
   gesichert wurde — nur die Zeile mit dem Alter und die Farbe wechseln. */
.sicherstreifen{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;
  width:min(430px,92vw);margin:14px auto 0;text-align:left;
  font:inherit;font-size:.82rem;line-height:1.35;cursor:pointer;
  border:1px solid rgba(255,209,102,.45);border-radius:14px;padding:10px 14px;
  background:rgba(255,209,102,.1);color:var(--weiss)}
.sicherstreifen[hidden]{display:none}
.sicherstreifen b{flex-basis:100%;color:var(--gold);font-weight:700}
.sicherstreifen .warn{flex-basis:100%;opacity:.85}
.sicherstreifen .alter{font-weight:600;opacity:.92}
/* Rechtsbündig in dieselbe Zeile wie das Alter — ohne den Umbruch mitzumachen. */
.sicherstreifen .los{margin-left:auto;font-weight:700;white-space:nowrap;color:var(--gold)}
.sicherstreifen:hover{filter:brightness(1.12)}
/* Frisch gesichert: derselbe Streifen, nur ohne Leuchten. Er erinnert dann
   noch, mahnt aber nicht. */
.sicherstreifen.ruhig{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.sicherstreifen.ruhig b,
.sicherstreifen.ruhig .los{color:var(--weiss);opacity:.8}

/* Wer gewonnen hat, steht dabei — „Bestanden" allein sagt es nicht. */
.gewonnen{color:var(--gold);font-weight:800}

/* Themenwahl: abwählbare Blöcke. Ein abgewähltes Thema bleibt lesbar, damit
   man sieht, was man gerade ausschließt. */
.themen{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:4px 0 10px}
.thema{border:2px solid var(--rahmen);background:rgba(255,255,255,.08);color:var(--weiss);
  border-radius:999px;padding:9px 15px;font:inherit;font-size:.9rem;cursor:pointer}
.thema[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2a0b24;font-weight:700}
.thema .anzahl{opacity:.65;font-size:.8rem;margin-left:6px}
.thema[aria-pressed="true"] .anzahl{opacity:.75}

/* Finalfrage: kurz vor der letzten Frage jedes Spielers. */
.finalfrage{margin:0 0 6px;text-align:center;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;font-size:.9rem;color:var(--gold);
  animation:finalpuls 1.1s ease-in-out 3}
@keyframes finalpuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.06)}}

/* Perfekte Runde: der seltenste Moment im Spiel. Gleiche Sprache wie die
   Finalfrage, nur groesser — hier darf es knallen. */
.perfektbanner{margin:0 0 10px;text-align:center;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;font-size:1.35rem;color:var(--gold);
  text-shadow:0 0 18px rgba(255,200,60,.45);
  animation:finalpuls 1.1s ease-in-out 4}

/* Konfetti zum Schluss. Liegt über allem, nimmt aber keine Klicks an. */
.konfetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.konfetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  animation:konfettifall linear forwards}
@keyframes konfettifall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:1}
  100%{transform:translateY(102vh) rotate(680deg);opacity:.85}
}
@media (prefers-reduced-motion:reduce){.finalfrage,.perfektbanner{animation:none}.konfetti{display:none}}

/* ---------- Theatervorhang vor der Punktejagd ----------
   Zwei Fluegel aus rotem Samt. Beim Oeffnen werden sie NICHT einfach zur
   Seite geschoben, sondern gerafft: translateX plus scaleX staucht die
   Falten zusammen, so wie Stoff sich sammelt, wenn man ihn zur Seite zieht.
   Reines Schieben sah nach zwei Rechtecken aus. Dazu ein Lichtstreifen, der
   ueber den geschlossenen Vorhang wandert, damit er nicht tot dasteht. */
.vorhang{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,200,61,.10), transparent 60%)}
.vorhang .fluegel{
  position:absolute;top:0;bottom:0;width:51.5%;
  background:
    repeating-linear-gradient(90deg,
      #4a0808 0 1.6%, #7d1212 2.6%, #a81c1c 3.9%, #7d1212 5.2%, #4a0808 7%),
    linear-gradient(#8d1414, #330505);
  box-shadow:inset 0 -120px 150px rgba(0,0,0,.6), inset 0 40px 60px rgba(0,0,0,.35);
  transition:transform 2.1s cubic-bezier(.5,.02,.22,1);
  will-change:transform;
}
.vorhang .fluegel.links {left:0;  transform-origin:left center}
.vorhang .fluegel.rechts{right:0; transform-origin:right center}
/* Lichtstreifen ueber dem geschlossenen Stoff. */
.vorhang .fluegel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,220,150,.18) 48%,
             rgba(255,235,190,.26) 50%, rgba(255,220,150,.18) 52%, transparent 62%);
  animation:vorhangGlanz 4.5s ease-in-out infinite;
}
@keyframes vorhangGlanz{
  0%,100%{transform:translateX(-60%)} 50%{transform:translateX(60%)}
}
/* Goldene Blende oben, mit Bogen statt gerader Kante. */
.vorhang .schnur{
  position:absolute;left:-2%;right:-2%;top:0;height:40px;
  background:linear-gradient(180deg, #ffd978, var(--gold) 35%, #a9761a 75%, #6b4a10);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  transition:transform 1.5s ease .2s;
}
.vorhang.offen .fluegel.links {transform:translateX(-54%) scaleX(.30)}
.vorhang.offen .fluegel.rechts{transform:translateX(54%)  scaleX(.30)}
.vorhang.offen .schnur{transform:translateY(-110%)}
@media (prefers-reduced-motion:reduce){
  .vorhang .fluegel,.vorhang .schnur{transition-duration:.01s}
  .vorhang .fluegel::after{animation:none}
}

/* ---------- Das Logo der Punktejagd ----------
   Faehrt gross herein, sobald der Vorhang offen ist, und laeuft mit dem
   Jingle zusammen. Fuellt den Moment, der vorher leer war. */
.jagdlogo{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  pointer-events:none;background:radial-gradient(ellipse at 50% 45%, rgba(255,200,61,.14), transparent 65%)}
.jagdlogo img{width:min(84vw, 62vh);filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
  animation:jagdlogoRein 1.1s cubic-bezier(.16,1.5,.4,1) both,
            jagdlogoAtmen 4.5s 1.1s ease-in-out infinite}
@keyframes jagdlogoRein{
  0%{transform:scale(.2) rotate(-8deg);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.jagdlogo.geht img{animation:jagdlogoRaus .5s ease forwards}
@keyframes jagdlogoRaus{to{transform:scale(1.25);opacity:0}}
/* Der Titelsong laeuft einundzwanzig Sekunden ganz durch. So lange soll das
   Logo nicht wie eingefroren dastehen, sondern atmen. */
@keyframes jagdlogoAtmen{50%{transform:scale(1.045)}}

/* Auftakt der Finalfrage: Das Logo dreht sich wie eine Schallplatte,
   solange das Lied laeuft, und wird am Ende mit ihm ausgebremst. Die
   Bremse steuert js/spiel.js ueber die Web-Animations-Schnittstelle —
   nur so laesst sich die Drehung weich herunterregeln statt abzuschneiden.

   Der Schlagschatten sitzt auf dem RAHMEN, nicht auf dem drehenden Bild.
   Bewegte Filter werden auf dem Fire TV bei jedem Einzelbild neu gerechnet
   und bringen die Bewegung zum Ruckeln. */
.finallogo{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  pointer-events:none}
/* Der Hintergrund liegt auf einer eigenen Schicht, damit er fuer sich
   ausgeblendet werden kann: Waehrend die Platte auslaeuft, geht er weg und
   der Brombeergrund des Spiels kommt zurueck. Laege er direkt auf .finallogo,
   verschwaende er erst mit dem ganzen Bild — also zu spaet.
   Dunkel genug, dass der Bildschirm dahinter nicht mitredet, hell genug,
   dass man noch sieht, wo man ist. */
.finallogo::before{content:"";position:absolute;inset:0;
  background:rgba(18,5,16,.72)
             radial-gradient(ellipse at 50% 44%, rgba(255,200,61,.22), transparent 62%);
  transition:opacity .9s ease}
.finallogo.blass::before{opacity:0}
.finallogo-satz{display:grid;justify-items:center;gap:clamp(4px,1.8vw,9px);
  animation:finallogoRein 1s cubic-bezier(.16,1.5,.4,1) both}
.finallogo-teller{width:min(88vw, 64vh);
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.7))}
.finallogo-teller img{display:block;width:100%}
.finallogo-wort{margin:0;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(24px, 7vw, 46px);color:var(--gold);
  text-shadow:0 2px 14px rgba(0,0,0,.75)}
@keyframes finallogoRein{
  0%{transform:scale(.25) rotate(-10deg);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.finallogo.geht{animation:finallogoRaus .5s ease forwards}
@keyframes finallogoRaus{to{transform:scale(1.18);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .finallogo-satz{animation:none}
}
@media (prefers-reduced-motion:reduce){.jagdlogo img{animation:none}}

/* ---------- Finalrunde: Studiolicht ----------
   Setzt ein, wenn die Musik startet. Zwei Scheinwerfer wandern hinter dem
   Inhalt durch, dazu ein warmer Rand und ein Puls auf der Uhr. Alles hinter
   dem Text (z-index 0 gegen den Inhalt) und mit viel Transparenz — lesbar
   bleiben muss es, sonst nuetzt die leise Musik auch nichts. */
body.finalrunde::before,
body.finalrunde::after{
  content:"";position:fixed;top:-12%;width:16vmax;height:150vh;
  pointer-events:none;z-index:0;
  /* Schmaler Kegel mit hellem Kern und weichen Flanken — quer statt
     senkrecht verlaufend, sonst wird daraus Nebel statt Licht. */
  background:linear-gradient(to right,
    transparent 0%, rgba(255,200,61,.05) 22%, rgba(255,200,61,.20) 50%,
    rgba(255,200,61,.05) 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 92%);
  filter:blur(14px);
  transform-origin:top center;
}
body.finalrunde::before{left:4vmax;  animation:scheinwerferA 7s ease-in-out infinite alternate}
body.finalrunde::after {right:4vmax; animation:scheinwerferB 9s ease-in-out infinite alternate}
@keyframes scheinwerferA{
  from{transform:rotate(-22deg)} to{transform:rotate(10deg)}
}
@keyframes scheinwerferB{
  from{transform:rotate(21deg)} to{transform:rotate(-9deg)}
}
/* Warmer Rand, damit der Bildschirm nach Buehne aussieht und nicht nach App. */
/* Das Studio wird dunkel, sobald der Vorhang aufgeht. Der Brombeerverlauf des
   Hauptspiels weicht fast schwarzem Grund — damit die Scheinwerfer ueberhaupt
   wie Licht wirken koennen. Vor einem hellen Hintergrund waere es Dunst. */
body{transition:background 1.4s ease}
body.finalrunde{
  background:radial-gradient(circle at 50% 120%, #16112a 0%, #06070d 60%, #04040a 100%);
}
body.finalrunde .huelle{
  box-shadow:inset 0 0 140px rgba(226,52,44,.22), inset 0 0 40px rgba(255,200,61,.10);
}
/* Der Balken pulsiert NUR im roten Zustand, also in den letzten fuenf
   Sekunden. Vorher lief es ueber die ganze Frage und machte ihn schlechter
   ablesbar — und genau der Balken soll auf einen Blick sagen, wie viel Zeit
   noch da ist.
   Gepulst wird ausschliesslich die Helligkeit. Skalieren verbietet sich
   hier: die LAENGE des Balkens ist die Restzeit, die darf nicht zappeln. */
.uhr-balken.knapp{animation:uhrpuls .9s ease-in-out infinite}
/* Der Abzug der verhauenen Finalfrage. Rot, damit er nicht wie ein
   Gewinn aussieht — er ist das Gegenteil. */
.posten.minus{color:var(--rot)}
@keyframes uhrpuls{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
/* Der Inhalt muss ueber den Scheinwerfern liegen. */
body.finalrunde .huelle{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  body.finalrunde::before,body.finalrunde::after,
  .uhr-balken.knapp{animation:none}
}

/* ---------- Finalpunkte im Comic-Stil ----------
   Der Bildschirm ist vorher leer. Dann schlaegt die Zahl ein: Sternexplosion
   dahinter, dicke Outline, leicht schief — und das ganze Bild wackelt kurz.
   Die Strahlen sind ein conic-gradient mit harten Stopps, kein Bild. */
.finalpunkte{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  pointer-events:none;text-align:center;
}
/* display:grid wuerde das hidden-Attribut aushebeln — darum ausdruecklich. */
.finalpunkte[hidden]{display:none}
.finalpunkte .zeile{position:relative;animation:einschlagRein .45s cubic-bezier(.2,2,.4,1) both}
/* Sternexplosion. repeating-conic-gradient statt eines gebauten Verlaufs:
   gleichmaessige Speichen rundherum, ohne dass man jeden einzeln setzt.
   Die Maske blendet nur den aeusseren Rand weich aus — frueher lag sie zu
   weit innen und hat fast alle Strahlen geschluckt. */
.finalpunkte .zeile::before{
  content:"";position:absolute;left:50%;top:50%;width:150vw;height:150vw;
  transform:translate(-50%,-50%);z-index:-1;
  background:
    radial-gradient(circle, rgba(255,210,110,.45) 0%, rgba(255,150,40,.12) 30%, transparent 55%),
    repeating-conic-gradient(from 0deg,
      rgba(255,232,165,.42) 0deg 3.2deg, transparent 3.2deg 9deg);
  -webkit-mask-image:radial-gradient(circle, #000 0 52%, transparent 74%);
          mask-image:radial-gradient(circle, #000 0 52%, transparent 74%);
  animation:strahlen 16s linear infinite;
}
.finalpunkte .wert{
  display:block;font-size:clamp(58px,22vw,150px);font-weight:900;
  line-height:.95;letter-spacing:-.02em;
  color:var(--gelb);
  -webkit-text-stroke:clamp(3px,1.1vw,7px) #1a1004;
  paint-order:stroke fill;
  text-shadow:0 8px 0 #8a4a00, 0 14px 26px rgba(0,0,0,.55);
  transform:rotate(-4deg);
}
/* Die Praemie unter der erspielten Zahl: derselbe Comic-Schlag wie die
   Punkte, nur kleiner und ohne Schraeglage — sie soll die grosse Zahl
   begleiten, nicht mit ihr um den Blick streiten. */
.finalpunkte .extra{
  display:block;font-size:clamp(20px,6.5vw,42px);font-weight:900;
  line-height:1.1;margin-top:6px;
  color:var(--gelb);
  -webkit-text-stroke:clamp(2px,.6vw,4px) #1a1004;
  paint-order:stroke fill;
  text-shadow:0 4px 0 #8a4a00, 0 8px 14px rgba(0,0,0,.45);
}
.finalpunkte .wer{
  display:block;font-size:clamp(14px,4.4vw,22px);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--weiss);
  -webkit-text-stroke:2px #11131c; paint-order:stroke fill;
  margin-bottom:10px;transform:rotate(-2deg);
}
@keyframes einschlagRein{
  0%{transform:scale(4) rotate(9deg);opacity:0;filter:blur(8px)}
  55%{transform:scale(.88) rotate(-3deg);opacity:1;filter:blur(0)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes strahlen{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Das ganze Bild bekommt einen Schlag ab. */
body.einschlag{animation:bebt .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes bebt{
  10%,90%{transform:translate(-2px,1px)}
  20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-7px,3px)}
  40%,60%{transform:translate(7px,-3px)}
}
@media (prefers-reduced-motion:reduce){
  .finalpunkte .zeile,.finalpunkte .zeile::before{animation:none}
  body.einschlag{animation:none}
}
/* In der Punktejagd wird nicht gesprochen — dort muss man die Aufloesung
   sehen. Bewusst nur dort: im Hauptspiel faerbt sich die Flaeche ohnehin. */
body.finalrunde .antwort.richtig{outline:3px solid var(--gruen);outline-offset:-3px}
body.finalrunde .antwort.daneben{outline:3px solid var(--rot);outline-offset:-3px;opacity:.72}

/* Die Aufloesung bekommt Bewegung. Vorher erschienen Gruen und Rot
   schlagartig — der Moment, auf den man zehnmal pro Sendung wartet, war
   damit der unauffaelligste der ganzen Runde. */
.antwort.richtig{animation:treffer .6s cubic-bezier(.2,1.7,.4,1) both}
.antwort.falsch {animation:daneben .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes treffer{
  0%{transform:scale(1)}
  40%{transform:scale(1.07);box-shadow:0 0 0 6px rgba(91,194,54,.35), 0 8px 24px rgba(0,0,0,.4)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(91,194,54,0)}
}
@keyframes daneben{
  15%,85%{transform:translateX(-5px)}
  30%,70%{transform:translateX(6px)}
  45%,60%{transform:translateX(-7px)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .antwort.richtig,.antwort.falsch{animation:none}
}
@media (prefers-reduced-motion:reduce){.finalpunkte .zeile{animation:none}}

/* Inhalt ueber etwaigen Hintergrundebenen. */
body.spielt .huelle{position:relative;z-index:1}

/* Die Frage nach der Punktejagd. Steht an der Stelle der Abspannknoepfe,
   solange die Entscheidung aussteht. */
.jagdfrage{width:100%;text-align:center}
.jagdfrage[hidden]{display:none}
.jagdfrage #jagdFrageText{font-weight:800;color:var(--gold);
  font-size:clamp(1rem,4vw,1.25rem);margin-bottom:10px}

/* Allein und mittig: die Frage nach der Punktejagd legt sich ueber den
   ganzen Bildschirm. Der Ergebnisbildschirm mit Logo, Rangliste und
   Werbekasten dahinter wuerde die Entscheidung zerreden. */
.jagdfrage.allein{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:22px;padding:28px;
  background:radial-gradient(circle at 50% 35%, #5e1a52, var(--brombeer-tief) 75%);
  /* Ohne Einblendung. Die Flaeche hat einen eigenen Hintergrund: Waehrend
     sie von durchsichtig aufzog, schien der Ergebnisbildschirm mit Logo,
     Rangliste und Werbekasten hindurch, und beide Bilder lagen eine
     Zehntelsekunde uebereinander. Hart umschalten sieht sauber aus. */
}
.jagdfrage.allein #jagdFrageText{
  font-size:clamp(1.3rem,6.4vw,2rem);line-height:1.25;margin:0;
  max-width:22ch;
  -webkit-text-stroke:clamp(1.5px,.5vw,3px) #1a1004;paint-order:stroke fill;
  text-shadow:0 2px 0 #8a5a00, 0 4px 10px rgba(0,0,0,.5);
}
.jagdfrage.allein .abspann-knoepfe{width:min(420px,100%)}
.knopf.jagd{background:linear-gradient(#ffd978, var(--gold));color:#241a00}


/* Der Ausweg aus dem Opener. Sieht aus wie „Erklaerung ueberspringen",
   steht aber fest unten mittig, weil er ueber mehrere Bildschirme hinweg
   sichtbar bleibt. */
/* ZURUECK UND UEBERSPRINGEN LIEGEN FEST UNTEN LINKS. Karl am 07.11.2026
   an einem Bildschirmbild: „Den back Button haben wir im hauptspiel nach
   links versetzt an dieser stelle damit keine ueberlappung ist."
   Die Pille „Music off" liegt fest unten MITTIG (siehe `.musikweg`), und
   im Fluss landet der Zurueck-Knopf genau dort. Gemessen am 07.11.2026
   bei 390 Punkten Breite:

       Fenster 390x844   Abstand  79   kein Beruehren
       Fenster 390x700   Abstand   7   haarscharf daneben
       Fenster 390x660   Abstand −13   ueberlappt
       Fenster 390x620   Abstand −33   ueberlappt

   Unten links kosten die beiden keine Hoehe und koennen die mittige Pille
   nicht mehr treffen — sie liegt bei 390 Breite von 147 bis 243, der
   Knopf endet bei 66. */
.bild > .knopf.leise.zurueck,
.bild > #stufeSkip{
  position:fixed; left:12px; bottom:max(14px, env(safe-area-inset-bottom));
  margin:0; z-index:5;
}
.musikweg{
  position:fixed; left:50%; bottom:max(14px, env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:75;
  opacity:.85; background:rgba(0,0,0,.45);
  padding:8px 18px; border-radius:99px; text-decoration:none;
}
.musikweg[hidden]{display:none}
.musikweg:hover{opacity:1}

/* ---------- Neue Fassung ----------
   Liegt ueber allem und bleibt stehen, bis jemand tippt. Dunkel statt gold:
   Sie ist eine Mitteilung, kein Angebot, und soll die Show nicht uebertoenen. */
.update-bar{
  position:fixed; left:16px; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:120;
  background:var(--brombeer-tief); color:var(--weiss);
  border:1px solid var(--rahmen);
  padding:12px 14px; border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.88rem;
  box-shadow:0 6px 20px rgb(0 0 0 / 45%);
}
.update-bar[hidden]{display:none}
.update-bar button{
  flex:none; border:0; border-radius:999px;
  background:var(--gold); color:#241a00;
  padding:8px 14px; font-size:.88rem; font-weight:700;
  cursor:pointer;
}

/* ---------- Hinweis auf die Note ----------
   Eine kleine Sprechblase ueber der Schalterreihe, die einmalig waehrend
   der Spielregeln auftaucht. Der Zipfel sitzt mittig und zeigt damit auf
   die Note, den dritten von fuenf Knoepfen. */
/* Der Platzhalter traegt nur die Blase. Er selbst steht in der Spalte,
   die Blase schwebt darin ueber der Schalterreihe — und nimmt damit keine
   Hoehe weg. Vorher stand sie in der Spalte und schob Frage und Antworten
   nach unten; auf niedrigen Geraeten zoomte passeAn() daraufhin das ganze
   Bild kleiner, nur damit ein Hinweis Platz hat. */
.notenplatz{position:relative}

.notenhinweis{
  position:absolute; bottom:100%; left:50%; margin-bottom:9px;
  /* Eine Zeile. Die Schrift schrumpft mit der Breite mit, damit auf dem
     schmalsten Handy nichts umbricht und nichts abgeschnitten wird. */
  display:flex; flex-direction:row; gap:15px; white-space:nowrap;
  padding:8px 15px; border-radius:14px;
  background:var(--gold); color:#241a00;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  font-size:clamp(.62rem,2.95vw,.82rem); line-height:1.3; text-align:left;
  animation:notenhinweisRein .45s ease both;
}
/* Kein Trennzeichen zwischen den Haelften — der Abstand reicht, und das
   gesparte Zeichen ist Platz, den die Schrift bekommt. */
.notenhinweis b{font-weight:700}
.notenhinweis[hidden]{display:none}
.notenhinweis::after{
  content:""; position:absolute; bottom:-8px;
  /* Die fuenf Schalter sind verschieden breit, die Note sitzt also NICHT
     in der Mitte der Reihe. Wo genau, rechnet app.js beim Einblenden aus
     und schreibt es in --zipfel; die 50 % sind nur der Notnagel. */
  left:var(--zipfel, 50%);
  width:16px; height:16px; background:var(--gold);
  transform:translateX(-50%) rotate(45deg); border-radius:3px;
}
@keyframes notenhinweisRein{
  from{opacity:0;transform:translateX(-50%) translateY(6px)}
  to{opacity:1;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){.notenhinweis{animation:none}}

/* ---------- Nie scrollen ----------
   Der Startbildschirm ist der hoechste: Logo, Claim, sieben Schalter, der
   Pro-Knopf und die Fusszeile. Zuerst ruecken die Abstaende zusammen und das
   Logo bekommt eine Hoechsthoehe, die erst auf niedrigen Geraeten greift.
   Reicht das nicht, verkleinert app.js den ganzen Bildschirm (zoom). */
.bild[data-bild="start"]{gap:clamp(6px,1.7vh,20px)}
.bild[data-bild="start"] .absender{gap:clamp(2px,.6vh,7px);margin-top:0}
.bild[data-bild="start"] .rechtliches{margin-top:0}
.bild[data-bild="start"] .titel img{width:auto;max-width:100%;max-height:min(373px,44vh)}

/* ---------- Countdown der Punktejagd ----------
   Drei Zahlen und ein LOS, sonst ist nichts zu sehen: keine Sprechblase, kein
   Gesicht, kein Untertitel zum Mitlesen. Jede Zahl kommt gross herein,
   schrumpft auf ihre Groesse und blendet wieder aus. */
.countdown{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  pointer-events:none;background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.82) 70%)}
.countdown span{
  font-size:min(72vw,46vh); font-weight:900; line-height:1;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.02em; color:var(--gold);
  /* Weisse Kontur, nicht schwarze: der Hintergrund der Punktejagd ist fast
     schwarz, ein dunkler Rand verschwindet darin. */
  -webkit-text-stroke:min(2.2vw,14px) #fff;
  paint-order:stroke fill;
  text-shadow:0 .05em 0 #8a5a00, 0 .1em .28em rgba(0,0,0,.75);
  animation:countdownSchlag .85s cubic-bezier(.16,1.4,.3,1) both}
.countdown span.los{font-size:min(40vw,26vh); color:var(--gruen)}
@keyframes countdownSchlag{
  0%{transform:scale(2.6) rotate(-6deg);opacity:0}
  28%{transform:scale(1) rotate(0);opacity:1}
  70%{transform:scale(1) rotate(0);opacity:1}
  100%{transform:scale(.82);opacity:0}
}
@media (prefers-reduced-motion:reduce){.countdown span{animation:none}}


/* ---------- Nichts rutscht ----------
   Die Uhr wird zwischen den Fragen versteckt. Verschwaende sie dabei aus dem
   Layout, ruckte alles darunter nach oben und beim naechsten Einblenden
   wieder nach unten — zweimal je Frage. Der Platz bleibt deshalb stehen,
   zu sehen ist nur nichts. Dasselbe fuer die Zeilen, die nur manchmal
   auftauchen und sonst eine Luecke hinterlassen wuerden. */
#uhr[hidden]{display:block!important;visibility:hidden}
/* NUR die Leiste haelt ihren Platz. Typhinweis, Finalfrage-Zeile und
   Ueberspringen-Link hatten ihn vorher auch — zusammen ueber hundert Pixel
   leere Flaeche zwischen Punktestand und Frage. */

/* ---------- Name und Punkte im Comic-Stil des Countdowns ----------
   Nur das Konto, nicht das Faehnchen am Zeitbalken: das bleibt, wie es war.
   Der Name steht in Weiss, die Punkte in Gold, beide mit Kontur. */
.konto b{
  font-size:1.05rem; font-weight:900; color:var(--weiss);
  -webkit-text-stroke:2.6px #11131c; paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.konto .punkte{
  font-size:1.2rem; color:var(--gelb); font-weight:900; opacity:1;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  -webkit-text-stroke:2.6px #1a1004; paint-order:stroke fill;
  text-shadow:0 2px 0 #8a5a00, 0 3px 4px rgba(0,0,0,.5);
}


/* Waehrend der Kommentar zum Punkteeinschlag laeuft, liegt die Punkteebene
   ueber allem. Der Ueberspringen-Knopf muss darueber liegen, sonst sieht
   man ihn nicht und trifft ihn nicht. */
/* Der Ueberspringen-Knopf steht IMMER an derselben Stelle: unten, knapp
   ueber der Schalterreihe, wo der Daumen beim Halten ohnehin liegt. Vorher
   sass er im Textfluss und wanderte mit der Laenge der Frage mit. Die Hoehe
   der Schalterreihe misst app.js, weil sie auf schmalen Geraeten umbricht. */
/* Im Spielbild steht er in der eigenen Zeile direkt ueber den Schaltern
   und haelt seinen Platz auch, wenn er nicht gebraucht wird. Schwebend hat
   er auf der letzten Antwort gelegen. */
#erklaerWeiter{
  /* Ueber dem Auftaktbild der Finalfrage (z-index 70), aber unter dem
     Vorhang (80). Ohne das lag der Knopf dahinter und war nicht zu
     sehen, obwohl er da war. */
  position:relative;z-index:75;
  opacity:.85;background:rgba(0,0,0,.45);
  padding:8px 18px;border-radius:99px;text-decoration:none;
}
#erklaerWeiter[hidden]{display:inline-block!important;visibility:hidden}
#erklaerWeiter:hover{opacity:1}

/* Der Knopf unter dem Siegerlied haelt seinen Platz, waehrend er weg ist —
   sonst ruckte die Rangliste beim Verschwinden um gut vierzig Pixel nach
   unten, und zwar genau in dem Moment, in dem Fraenk zu sprechen anfaengt.
   Nur solange die Abspannknoepfe fehlen: Stehen die wieder da, braucht
   niemand den reservierten Platz, und es bliebe bloss eine Luecke. */
.bild[data-bild="ergebnis"]:has(#abspannKnoepfe[hidden]) #liedWeiter[hidden]{
  display:inline-block!important;visibility:hidden;
}

body.jagdschluss #erklaerWeiter{
  /* Beim Punkteeinschlag schwebt er im unteren Drittel. Ein gerechneter
     Mittelwert zwischen Zahl und Schaltern landete je nach Zahlenhoehe
     hinter der Zahl — eine feste Hoehe kann das nicht. */
  position:fixed;left:50%;
  /* Mitte des unteren Drittels: zwei Drittel plus ein halbes Drittel.
     Die Schranke haelt ihn auf sehr niedrigen Bildschirmen von der
     Schalterreihe fern. */
  top:min(83.3vh, calc(100vh - 110px));
  transform:translate(-50%,-50%);
  z-index:90;
}


/* Wer gewonnen hat, unter den Zahlen des Ergebniseinschlags — gleiche
   Handschrift wie der Countdown, nur kleiner, damit die Punkte die
   Hauptsache bleiben. */
/* Dieselbe Farbe wie die Zahlen — gruen stand daneben wie ein Fremdkoerper. */
.finalpunkte .sieger{
  position:relative;margin-top:1.1rem;
  font-size:clamp(24px,7.6vw,46px);font-weight:900;line-height:1.15;
  letter-spacing:-.01em;color:var(--gelb);
  -webkit-text-stroke:clamp(2px,.8vw,6px) #1a1004;paint-order:stroke fill;
  text-shadow:0 .05em 0 #8a5a00, 0 .1em .24em rgba(0,0,0,.6);
  /* Eigene Animation, die SCHRAEG endet. Mit einschlagRein waere die Zeile
     schraeg hereingekommen und am Ende wieder gerade gestanden — dessen
     letztes Bild setzt transform auf rotate(0) und schlaegt jede feste
     Angabe hier. */
  animation:siegerRein .5s cubic-bezier(.2,2,.4,1) both;
}
@keyframes siegerRein{
  0%{transform:scale(3.2) rotate(10deg);opacity:0;filter:blur(8px)}
  55%{transform:scale(.9) rotate(-7deg);opacity:1;filter:blur(0)}
  100%{transform:scale(1) rotate(-3deg)}
}
/* Mit Siegerzeile wird der Block hoch. Damit er nicht an den Schaltern
   klebt, rueckt er als Ganzes nach oben. */
.finalpunkte.mitSieger{align-content:center;padding-bottom:14vh}
/* Das Ergebnis der Hauptshow kommt ohne Strahlenkranz: bei zwei bis vier
   Spielern liegen sonst zwei bis vier davon uebereinander, und aus dem
   Effekt wird Unruhe. Der Kranz bleibt der Punktejagd vorbehalten. */
.finalpunkte.schlicht .zeile::before{display:none}
/* Luft zwischen den Spielern: ohne sie klebt der naechste Name an der
   Zahl darueber, weil die Zahl eine Zeilenhoehe unter eins hat. */
.finalpunkte .zeile + .zeile{margin-top:1.7rem}
/* Kein eigener Hintergrund: das Blau der Buehne bleibt stehen. */

/* Ab drei Spielern werden die Zahlen kleiner — sonst passt der groessere
   Abstand nicht mehr aufs Bild. */
.finalpunkte.viele .wert{font-size:clamp(40px,14vw,96px)}

/* Platz behalten, aber noch nicht zeigen. Frueher wuchs das Feld mit jeder
   Zeile: Die erste Zahl stand allein in der Mitte, bei der zweiten rutschten
   beide auseinander, und mit der Siegerzeile sprang alles noch einmal nach
   oben. Jetzt steht das fertige Bild von Anfang an, und aufgedeckt wird
   Zeile fuer Zeile. animation:none haelt den Einschlag so lange an — die
   Regel steht absichtlich HINTER .zeile und .sieger, sonst gewaennen deren
   Animationen. */
.finalpunkte .wartet{visibility:hidden;animation:none}

/* ---------- Lichtschlag hinter den Zahlen ---------- */
/* Beim Ergebnis der Hauptshow ist der Strahlenkranz abgeschaltet (siehe
   .schlicht weiter oben): Bei zwei bis vier Spielern laegen zwei bis vier
   davon uebereinander. Damit stand die Zahl aber auf einem voellig ruhigen
   Hintergrund — das Beben allein traegt den Moment nicht. Statt eines
   Kranzes PRO ZEILE gibt es deshalb EINEN Lichtschlag hinter dem ganzen
   Feld, der bei jeder Zahl neu zuschlaegt. Nur in .schlicht, also nur hier:
   Die Punktejagd hat ihren Kranz und braucht nichts dazu. */
.finalpunkte.schlicht::before{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 46%,
    rgba(255,214,120,.55) 0%, rgba(255,150,40,.20) 34%, transparent 64%);
}
/* Wer durchgefallen ist, bekommt kein Goldlicht. Dasselbe Beben, aber kalt
   und halb so hell — der Moment ist derselbe, die Nachricht nicht. */
.finalpunkte.schlicht.durchgefallen::before{
  background:radial-gradient(circle at 50% 46%,
    rgba(150,180,230,.26) 0%, rgba(90,120,190,.10) 34%, transparent 64%);
}
/* Die Klasse wird je Zahl neu gesetzt; dazwischen erzwingt spiel.js ein
   Neuzeichnen, sonst liefe die Animation nur beim ersten Mal. */
.finalpunkte.schlicht.puls::before{animation:lichtschlag .6s ease-out}
@keyframes lichtschlag{
  0%{opacity:0;transform:scale(.45)}
  22%{opacity:1}
  100%{opacity:0;transform:scale(1.3)}
}
@media (prefers-reduced-motion:reduce){
  .finalpunkte.schlicht.puls::before{animation:none}
}
.finalpunkte.viele .wer{font-size:clamp(13px,3.6vw,18px);margin-bottom:6px}
.finalpunkte.viele .zeile + .zeile{margin-top:1.5rem}
.finalpunkte.viele .sieger{font-size:clamp(20px,6vw,34px);margin-top:1.4rem}


/* Waehrend der Punkteeinschlag laeuft, ist vom Spielfeld nichts mehr zu
   sehen: die Ebene selbst ist durchsichtig, sonst stuende die letzte Frage
   mitten in der Zahl. visibility statt display, damit nichts springt.
   Die Schalterreihe bleibt — man muss abbrechen koennen. */
/* Der Ueberspringen-Knopf bleibt sichtbar — er steht jetzt in der Zeile
   und waere sonst von dieser Abdeckung mit erwischt worden. */
body.knall .bild[data-bild="spiel"] > *:not(.steuerung):not(#erklaerWeiter){visibility:hidden}
body.knall #sprechblase{visibility:hidden}


/* Stufe gewaehlt: die Knoepfe verschwinden, damit niemand in die laufenden
   Ansagen hinein ein zweites Mal tippt und eine zweite Sendung startet. */
.bild[data-bild="stufe"].gewaehlt [data-stufe]{visibility:hidden}


/* Aus der Punktejagd dazuverdient — steht klein unter dem Urteil.
   Auf der Siegerkarte dunkel: die ist selbst golden, dort waere Gold auf
   Gold unsichtbar. Dasselbe galt bisher unbemerkt fuer „Gewonnen". */
.rangliste .jagdanteil{flex:0 0 100%;margin-top:5px;font-size:.78rem;font-weight:800;
  display:flex;gap:7px;flex-wrap:wrap;align-items:baseline;
  font-variant-numeric:tabular-nums}
.rangliste .jagdanteil .kopf{color:var(--weiss);opacity:.65;font-weight:700}
.rangliste .jagdanteil .gut{color:var(--gold)}
.rangliste .jagdanteil .schlecht{color:var(--rot)}
/* Das Ergebnis der Jagd, hinter den beiden Posten. Das Gleichheitszeichen
   macht es zur Summe statt zu einem dritten Posten. */
.rangliste .jagdanteil .summe{margin-left:auto;padding-left:4px}
/* Auf der goldenen Siegerkarte wuerde Gold auf Gold verschwinden. */
.rangliste li.siegt .jagdanteil .kopf{color:#241a00;opacity:.75}
.rangliste li.siegt .jagdanteil .gut{color:#241a00}
.rangliste li.siegt .jagdanteil .schlecht{color:#7a1109}


/* ================= Feste Buehne =================
   Alles, was waehrend einer Runde seine Hoehe aendern koennte, bekommt eine
   feste. Nur so steht das Bild still: kein Springen mehr, wenn ein langer
   Satz kommt, die Uhr erscheint, die Aufloesung einblendet oder das Logo
   geht. Gemessen auf 360 Pixel Breite — dort braucht die Haelfte aller
   Zeilen zwei Zeilen, neunzig Prozent vier, das Maximum dreizehn. */

/* Untertitel: drei Zeilen fest, laengeres scrollt. Sie sind fuer
   Gehoerlose da — mitlesen geht auch mit Scrollbalken, Springen nicht. */
.sprechblase{min-height:0}
.sprechblase .gesagt{
  height:calc(3 * 1.35em); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}
/* IMMER drei Zeilen, auch auf niedrigen Geraeten. Eine Sparfassung mit
   zwei Zeilen hat die Untertitel auf dem Handy abgeschnitten — fuer
   Gehoerlose ist das der Inhalt, nicht die Zugabe. */

/* WICHTIG: In einer Flex-Spalte darf nichts schrumpfen. Sonst drueckt ein
   volles Bild die Frage auf null Pixel — genau das ist passiert, die Frage
   war unsichtbar. flex:0 0 auto haelt jede Zeile auf ihrer Hoehe; passt das
   Ganze nicht mehr, verkleinert app.js die Buehne als Ganzes. */
.bild[data-bild="spiel"] > *{flex:0 0 auto}
/* Der freie Platz geht VOLLSTAENDIG in den Antwortblock, statt sich als
   Luecken zwischen den Zeilen zu verteilen. Dadurch steht alles oben fest,
   die vier Reihen fuellen den Rest und sind immer gleich hoch — egal wie
   lang die Antworten sind. space-between hatte den Platz zwischen Uhr und
   Frage geparkt, und bei vollem Bild lief es unten raus. */
body.spielt .bild[data-bild="spiel"]{justify-content:flex-start;gap:6px}
body.spielt .bild[data-bild="spiel"] .antworten{
  flex:1 1 auto; min-height:0; grid-auto-rows:1fr; align-content:stretch;
}
/* KEINE Untergrenze. Mit einer liefen die vier Reihen auf engen Geraeten
   aus ihrem Kasten heraus und legten sich ueber Rechnung und
   Ueberspringen-Knopf. Jetzt teilen sie sich genau den Platz, der da ist —
   auf grossen Geraeten viel, auf kleinen weniger, aber nie zu viel. */
body.spielt .bild[data-bild="spiel"] .antwort{min-height:0}
body.spielt .bild[data-bild="spiel"] .antworten{overflow:hidden}
/* Die Schalterreihe darf den freien Platz NICHT vorher wegnehmen: ein
   automatischer Rand wird vor flex-grow bedient, und dann bleiben fuer die
   Antworten nur Kruemel. Sie steht ohnehin unten, weil die Antworten den
   Rest fuellen. */
body.spielt .steuerung{margin-top:0}
/* Sind keine Antwortflaechen da — Punktejagd-Vorspann, Logo zwischen den
   Runden —, nimmt kein Element den freien Platz, und die Reihe haenge
   mitten im Bild. Dann schiebt ein automatischer Rand sie nach unten. */
/* Der freie Platz gehoert dem Ueberspringen-Knopf, nicht der Schalterreihe.
   Lag er auf der Reihe, klebte der Knopf oben am Logo statt dort zu stehen,
   wo sonst „Erklaerung ueberspringen" steht — direkt ueber den Schaltern.
   Beim Jingle der Punktejagd stand er dadurch ueber dem Logo. */
body.spielt .bild[data-bild="spiel"]:has(#antworten[hidden]) #erklaerWeiter{margin-top:auto}
body.spielt .bild[data-bild="spiel"]:has(#antworten[hidden]) .steuerung{margin-top:0}
/* Das Logo zwischen den Runden bleibt IMMER gleich gross — es waechst
   nicht mit dem freien Platz. Eine Marke, die bei jeder Frage eine andere
   Groesse haette, wirkt billig. */
body.spielt .bild[data-bild="spiel"] .ruhebild{
  flex:0 0 clamp(130px,19vh,185px); height:clamp(130px,19vh,185px);
}

/* Die Frage: DREI Zeilen fest reserviert, und der Text sitzt UNTEN.
   Die letzte Zeile steht damit IMMER an derselben Stelle — direkt ueber
   den Antworten. Eine einzeilige Frage steht dort, jede weitere Zeile
   waechst nach oben. Dadurch liegen A, B, C und D auf jedem Bildschirm
   und bei jeder Frage an genau demselben Platz, und der Rest gehoert
   ihnen. Vorher hing die Frage mittig im Kasten und wanderte je nach
   Laenge auf und ab.
   Drei Zeilen reichen, seit die neun langen Fragen eine knappere Fassung
   fuer die Anzeige haben. Die Hoehe haengt an --fragenschrift, nicht an
   em: verkleinert der Einpasser im Notfall die Schrift, bleibt der Kasten
   trotzdem gleich hoch. */
.bild[data-bild="spiel"] .frage{
  line-height:1.25; overflow:hidden;
  flex:0 0 calc(3 * 1.25 * var(--fragenschrift, 1.3rem));
  display:flex; align-items:flex-end; justify-content:center;
}

/* Vier gleich hohe Antwortreihen, unabhaengig von der Textlaenge. Die
   laengste Antwort im Bestand hat dreiundfuenfzig Zeichen und braucht auf
   einem schmalen Handy zwei Zeilen — danach ist die Reihe bemessen. */
.antworten{grid-auto-rows:5.2em}
.antwort{min-height:5.2em}

/* Das Logo zwischen den Fragen: nimmt denselben Platz ein wie sonst die
   Antworten, damit beim Wechsel nichts springt. */
.bild[data-bild="spiel"] .ruhebild{
  height:auto; max-height:none; width:auto; margin:0 auto; object-fit:contain;
}

/* Aufloesung und Rechnung kommen erst nach der Antwort. Ohne reservierten
   Platz waechst das Bild in dem Moment und der Massstab springt mit. */
/* KEIN reservierter Platz fuer die Aufloesungszeile: sie wird nur bei
   Schaetzfragen gefuellt („Richtig waere 21.000 Kilometer"), und davon ist
   keine einzige im Bestand. Bei Auswahlfragen sagt die gruene Flaeche
   ohnehin alles. */
.bild[data-bild="spiel"] .aufloesung{flex:0 0 auto}
/* Eine Reihe reicht jetzt: die Summe steht nicht mehr hier unten, sondern
   ploppt oben am Konto auf. */
.bild[data-bild="spiel"] .rechnung{min-height:36px}
#rechnung[hidden]{display:block!important;visibility:hidden}
#typhinweis[hidden]{display:block!important;visibility:hidden}
#finalfrage[hidden]{display:block!important;visibility:hidden}
#typhinweis{min-height:.9em}


/* Die gewaehlte Stufe steht nach dem Tippen dort, wo die Knoepfe waren —
   in derselben Handschrift wie der Countdown. */
.stufen{position:relative}
.stufewahl{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  font-size:clamp(2rem,11vw,3.4rem);font-weight:900;line-height:1;
  letter-spacing:-.02em;color:var(--gelb);
  -webkit-text-stroke:clamp(2px,1vw,6px) #1a1004;paint-order:stroke fill;
  text-shadow:0 .06em 0 #8a5a00, 0 .1em .22em rgba(0,0,0,.55);
  animation:stufeRein .5s cubic-bezier(.2,2,.4,1) both;
}
@keyframes stufeRein{
  0%{transform:scale(2.4) rotate(7deg);opacity:0;filter:blur(6px)}
  55%{transform:scale(.92) rotate(-4deg);opacity:1;filter:blur(0)}
  100%{transform:scale(1) rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){.stufewahl{animation:none}}


/* Die gewonnenen Punkte steigen ueber dem Konto auf und verschwinden.
   Absolut positioniert — das Bild darf sich dabei nicht bewegen. */
.konto{position:relative}
.konto .plus{
  position:absolute;left:50%;bottom:100%;
  font-size:1.15rem;font-weight:900;white-space:nowrap;pointer-events:none;
  color:var(--gruen);-webkit-text-stroke:2.2px #06230a;paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:punktePlus 1.8s ease-out forwards;
}
.konto .plus.minus{color:var(--rot);-webkit-text-stroke-color:#2a0806}
/* „No points" ist zwei Woerter lang, das Plus-Abzeichen ist fuer „+500"
   gebaut: mittig ueber dem Konto. Mittig gesetzt haengt der Text links und
   rechts ueber und wird am Bildrand abgeschnitten. Deshalb rechtsbuendig an
   der Kante des Kontos, kleiner, und mit einer eigenen Bewegung ohne die
   Mitten-Verschiebung. Karl am 06.11.2026: „Keine Punkte erscheint kurz wo
   0 steht.. fertig." */
.konto .plus.nichts{
  color:#ffb4b0;-webkit-text-stroke-width:1.6px;-webkit-text-stroke-color:#2a0806;
  font-size:.78rem;font-weight:800;left:auto;right:0;
  animation:punkteNichts 1.8s ease-out forwards;
}
@keyframes punkteNichts{
  0%  {opacity:0;transform:translateY(8px)}
  20% {opacity:1;transform:translateY(-4px)}
  70% {opacity:1;transform:translateY(-8px)}
  100%{opacity:0;transform:translateY(-16px)}
}
@keyframes punktePlus{
  0%  {opacity:0;transform:translate(-50%,10px) scale(.6)}
  20% {opacity:1;transform:translate(-50%,-6px) scale(1.2)}
  45% {opacity:1;transform:translate(-50%,-12px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-26px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .konto .plus{animation:punktePlusStill 1.8s ease-out forwards}
  .konto .plus.nichts{animation:punktePlusStill 1.8s ease-out forwards}
  @keyframes punktePlusStill{0%,80%{opacity:1}100%{opacity:0}}
}


/* ═════════ Enge Geraete: die Antworten bekommen ihren Platz ═════════
   Gemessen auf einem Handy mit rund 650 Pixel sichtbarer Hoehe: fuer die
   vier Antwortflaechen blieben 165 Pixel uebrig — vierunddreissig je Reihe,
   also knapp die Hoehe des Buchstabenfeldes. Der Text wurde beschnitten und
   treffen konnte man die Flaechen kaum noch. Jedes Moebelstueck darueber
   und darunter kostet Platz; diese Diaet holt rund neunzig Pixel zurueck.
   Keine einzige Textzeile wird dafuer geopfert — die drei Untertitelzeilen
   bleiben unangetastet, gekuerzt werden nur Polster und Abstaende. */
@media (max-height:760px){
  /* Auch die Diaet darf nicht unter die Systemleisten greifen: Die seitlichen
     und oberen Polster duerfen auf 8px schrumpfen, unten gilt weiter die
     Aussparung des Geraets, sonst liegt die vierte Antwort darunter. */
  body{padding:8px}
  body{padding-bottom:max(8px, env(safe-area-inset-bottom))}
  body{padding-top:max(8px, env(safe-area-inset-top))}
  body.spielt #buehne{height:calc(100dvh - 16px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
  body.spielt .bild[data-bild="spiel"]{gap:4px}
  body.spielt .sprechblase{padding-top:9px;padding-bottom:9px;margin-bottom:6px}
  body.spielt .uhr{margin-bottom:4px}
  body.spielt #finalfrage{margin-bottom:0}
  body.spielt .konto{padding:4px 12px}
  body.spielt .bild[data-bild="spiel"] .antworten{gap:8px}
  /* Weniger Polster in der Flaeche heisst: schon eine niedrigere Reihe
     traegt zwei Textzeilen. Die laengste Antwort im Bestand hat
     dreiundfuenfzig Zeichen und braucht auf einem schmalen Handy zwei. */
  body.spielt .antwort{padding:8px 12px}
  .bild[data-bild="spiel"] .rechnung{min-height:30px}
  body.spielt #erklaerWeiter{padding:6px 16px}
}

/* Nicht mehr beschneiden. overflow:hidden war die Notbremse gegen Reihen,
   die aus ihrem Kasten liefen — es hat aber auch den Leuchtring der
   richtigen Antwort unten abgesaebelt, besonders bei den zwei grossen
   Flaechen der Schaetzfrage. Jetzt gilt: eine Untergrenze je Reihe, damit
   nichts mehr zusammengedrueckt wird, ein Fingerbreit Polster fuer Ring und
   Huepfer, und per negativem Rand kostet dieses Polster keinen Platz. Nur
   wenn es wirklich einmal nicht reicht, laesst sich die Liste schieben —
   das ist immer noch besser als abgeschnittene Schrift. */
body.spielt .bild[data-bild="spiel"] .antworten{
  /* Nur senkrecht schieben. „overflow:auto“ setzte beide Achsen, und eine
     waagerechte Leiste frisst unten Höhe — genau dort, wo dann die vierte
     Antwort angeschnitten wird. */
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none;
  grid-auto-rows:minmax(2.7em,1fr);
  /* Unter den eigenen Inhalt darf der Kasten NICHT fallen. Er ist
     flex:1 1 auto mit min-height:0, und wenn darueber viel steht — bei
     dieser Ausgabe das goldene Tipp-Schild und die laengeren Antworten —
     drueckt ihn der Umbruch auf fast nichts: am 06.11.2026 bei 374x500
     gemessene 23 Pixel fuer 207 Pixel Inhalt. Weil er in sich scrollt,
     SCHLUCKT er den Ueberstand, statt ihn nach oben weiterzureichen, und
     der Einpasser in app.js sieht ihn nie. min-content gibt den Ueberstand
     wieder heraus; verkleinert wird dann die ganze Buehne. */
  min-height:min-content;
  padding:5px; margin:-5px;
  /* Browser rechnen das untere Polster eines scrollbaren Kastens nicht
     immer mit. Diese Zeile sichert den Platz unter der letzten Reihe
     unabhängig davon ab. */
  scroll-padding-bottom:5px;
}
body.spielt .bild[data-bild="spiel"] .antworten > :last-child{margin-bottom:0}
body.spielt .bild[data-bild="spiel"] .antworten::-webkit-scrollbar{display:none}
/* Der Rahmen der gewaehlten Antwort liegt jetzt innen — aussen haette ihn
   der Rand des Kastens angeschnitten. */
body.spielt .antwort.gewaehlt{outline-offset:-3px}


/* ───────── Notenknopf: Musik unter der Frage ─────────
   Neben „Ton: an". Angeschaltet eine Note, ausgeschaltet dieselbe Note mit
   einem Strich darueber — kein zweites Wort in einer Reihe, die auf dem
   Handy ohnehin knapp ist. */
.knopf.note{
  position:relative; font-size:1.5rem; line-height:1;
  padding-left:13px; padding-right:13px;
}
/* Der Aus-Zustand muss man auf einen Blick sehen. Ein duenner Strich in
   Schriftfarbe war zu dezent — bei stummer Musik wurde minutenlang ein
   Fehler gesucht, der keiner war. Jetzt: roter Balken mit dunklem Saum,
   damit er auf jedem Untergrund steht, und die Note selbst blass. */
.knopf.note.aus{opacity:.5}
.knopf.note.aus::after{
  content:""; position:absolute; left:50%; top:50%;
  width:1.25em; height:4px; border-radius:3px;
  background:var(--rot); box-shadow:0 0 0 1.5px rgba(0,0,0,.55);
  transform:translate(-50%,-50%) rotate(-24deg);
}
/* Auf schmalen Geraeten muss die fuenfte Taste mit in die Reihe passen:
   gemessen braucht sie mit engerem Polster und Abstand 341 von 344
   verfuegbaren Pixeln. Ohne das wuerde die Reihe umbrechen und genau den
   Platz fressen, den die Antworten gerade bekommen haben. */
@media (max-width:420px){
  body.spielt .steuerung{gap:5px}
  body.spielt .knopf.klein{padding:8px 10px}
  body.spielt .knopf.klein.note{padding-left:11px;padding-right:11px}
}


/* Der Countdown vor der Titelmusik deckt alles zu. In der Punktejagd reicht
   ein Schleier — da liegt ohnehin nur das Spielbild darunter. Hier steht
   noch die Stufenwahl im Bild, und die muss weg: gezaehlt wird vor schwarzem
   Grund, nicht vor einem durchscheinenden. Richtiges Schwarz, kein
   abgedunkeltes Blau — der Sprung ins Logo ist der Knall, kein Fehler. */
.countdown.voll{background:#000}


/* Die Rechnung der Punktejagd auf dem Ergebnisbild. Ohne sie steht dort eine
   Endsumme, die niemand nachvollziehen kann — Treffer bringen bis zu 1.500,
   jeder Fehlgriff kostet 1.000, und beides verrechnet sich unsichtbar. */
.rangliste .jagdrechnung{
  display:flex; flex-direction:column; gap:2px; margin-top:5px;
  font-variant-numeric:tabular-nums;
}
/* Dieselbe Handschrift wie die grosse Zahl, nur halb so stark: der Rand der
   Endsumme ist 2,2 Pixel breit, hier ist er 1,1. So gehoeren die Zeilen
   sichtbar dazu, ohne der Summe die Schau zu stehlen. */
.rangliste .jagdrechnung .posten{
  font-size:clamp(.8rem,3.2vw,1rem); font-weight:900; line-height:1.25;
  -webkit-text-stroke:1.1px #1a1004; paint-order:stroke fill;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.rangliste .jagdrechnung .gut{color:var(--gold)}
.rangliste .jagdrechnung .schlecht{color:var(--rot); -webkit-text-stroke-color:#2a0806}

/* Lokale Testversion: Show-Missionen, persönlicher Joker und Rückblick. */
.show-extras{
  width:100%;max-width:700px;border:1px solid #6785bb80;border-radius:16px;
  padding:10px 14px;background:linear-gradient(120deg,var(--brombeer-tief),var(--brombeer));
  text-align:left;box-shadow:0 8px 24px #020b241c;
}
.show-oben{display:flex;align-items:center;justify-content:space-between;gap:8px}
.show-serie{display:flex;align-items:center;gap:7px;font-size:.8rem;min-width:0}
.show-name{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--weiss)}
.show-pips{display:flex;gap:3px;flex-shrink:0}
.show-pips i{width:9px;height:13px;border:1px solid var(--rahmen);border-radius:3px;transform:skew(-12deg)}
.show-pips i.an{background:var(--gold);border-color:var(--gold);box-shadow:0 0 9px #ffc83d66}
.show-joker{font:inherit;font-size:.75rem;font-weight:800;min-height:38px;white-space:nowrap;
  cursor:pointer;background:var(--gold);color:#20160a;border:1px solid #ffdf8f;border-radius:10px;padding:7px 11px}
.show-joker:disabled{background:var(--brombeer-tief);color:#f4f7ff80;border-color:var(--rahmen);cursor:default}
.show-joker:enabled:hover{background:#ffe293;box-shadow:0 0 18px #ffc83d55}
.show-joker:focus-visible{outline:3px solid white;outline-offset:3px}
.show-missionen{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:5px;font-size:.69rem;color:var(--weiss)}
.show-missionen .geschafft{color:#b6f28e;font-weight:800}
.show-moment{font-size:.72rem;line-height:1.4;min-height:2.8em;margin-top:4px;color:#ffdc87;text-wrap:balance}
.show-jubel{animation:show-moment-glanz 1.3s ease-out}
@keyframes show-moment-glanz{0%,100%{border-color:#6785bb80}25%{border-color:var(--gold);box-shadow:0 0 24px #ffc83d55}}
.antwort.joker-gestrichen{opacity:.25!important;filter:grayscale(1);text-decoration:line-through;
  pointer-events:none;box-shadow:none!important;transform:none!important}
.show-rueckblick{flex:0 0 100%;display:flex;flex-direction:column;gap:4px;padding-top:10px;margin-top:4px;
  border-top:1px solid #a87f2e55;font-size:.76rem;line-height:1.4;color:var(--weiss);text-align:left}
.show-rueckblick>b{color:var(--gold);font-size:.8rem}
.show-trophaeen{color:#b6f28e}
body.spielt .show-extras{padding:6px 11px;flex-shrink:0}
body.spielt .show-moment{min-height:1.4em}
body.finalrunde .show-extras{display:none}
@media(max-width:420px){
  .show-name{max-width:70px}.show-serie{font-size:.7rem;gap:5px}
  .show-joker{font-size:.7rem;padding:6px 8px}
  .show-missionen{font-size:.65rem;gap:4px 9px}
  body.spielt .show-moment{min-height:2.8em}
}
@media(max-height:560px) and (orientation:landscape){
  body.spielt .show-extras{padding:4px 10px}
  body.spielt .show-missionen{display:none}
  body.spielt .show-moment{font-size:.65rem;min-height:1.4em;margin-top:2px}
  .show-joker{min-height:30px;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){.show-jubel{animation:none}}
/* Der wandernde Punktwert bleibt auch am Anfang und Ende der Uhr im Bild. */
.uhr{container-type:inline-size}
.uhr-wert{right:auto;left:clamp(0px,calc(100% - 2rem),calc(100cqw - 4rem));
  transform:translateY(6px);min-width:4rem;text-align:center}
body.pausiert .show-joker{opacity:.4;pointer-events:none}
/* Im niedrigen Querformat stehen Frage und Antworten nebeneinander.
   Die Antworten behalten echte Touchflächen statt auf eine Zeile zu schrumpfen. */
@media(max-height:560px) and (orientation:landscape){
  body.spielt .bild[data-bild="spiel"]{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    grid-template-rows:auto auto auto minmax(108px,1fr) auto auto auto;
    align-items:center;align-content:stretch;gap:4px 14px;
  }
  body.spielt .bild[data-bild="spiel"]>.leiste{grid-column:1;grid-row:1}
  body.spielt .bild[data-bild="spiel"]>.dran{display:none}
  /* Seit die Abrechnung oben in der Punktezeile sitzt, ist nicht mehr
     `.konten` das Kind des Rasters, sondern die Zeile. Die alten Regeln auf
     `>.konten` und `>.rechnung` trafen nichts mehr — und ein Rasterkind ohne
     Platzangabe sucht sich selbst eine Zelle. */
  body.spielt .bild[data-bild="spiel"]>.punktezeile{grid-column:2;grid-row:1;justify-content:flex-end}
  /* Im niedrigen Querformat ist die Zelle schmal: hier reichen die Zahlen,
     sonst bricht die Zeile um und schiebt die Frage nach unten. */
  body.spielt .punktezeile .rechnung{flex:0 1 auto}
  body.spielt .show-extras{grid-column:1/-1;grid-row:2;max-width:none}
  body.spielt .bild[data-bild="spiel"]>.uhr{grid-column:1/-1;grid-row:3;margin-bottom:12px}
  body.spielt .bild[data-bild="spiel"]>.frage{grid-column:1;grid-row:4;height:auto;min-height:0;
    max-height:7em;overflow:auto;font-size:clamp(.95rem,2vw,1.25rem);text-align:left}
  body.spielt .bild[data-bild="spiel"]>.antworten{grid-column:2;grid-row:4;height:100%;min-height:108px;
    grid-template-columns:1fr 1fr;grid-auto-rows:minmax(44px,1fr);gap:7px}
  body.spielt .bild[data-bild="spiel"] .antwort{padding:6px 9px;font-size:.85rem}
  body.spielt .bild[data-bild="spiel"] .antwort .b{flex-basis:24px;height:24px}
  body.spielt .bild[data-bild="spiel"]>.schaetzen{grid-column:2;grid-row:4}
  body.spielt .bild[data-bild="spiel"]>.aufloesung{grid-column:2;grid-row:5}
  body.spielt .bild[data-bild="spiel"]>#erklaerWeiter{grid-column:2;grid-row:6}
  body.spielt .bild[data-bild="spiel"]>.notenplatz{grid-column:1/-1;grid-row:7}
  body.spielt .bild[data-bild="spiel"]>.ruhebild{grid-column:1/-1;grid-row:4;max-height:24vh;width:auto;justify-self:center}
  body.spielt .bild[data-bild="spiel"]>.finalfrage,
  body.spielt .bild[data-bild="spiel"]>.typhinweis{grid-column:1;grid-row:4;align-self:start}
}
.show-versprechen{font-size:.85rem;line-height:1.45;max-width:36ch;color:var(--weiss);text-wrap:balance}
@media(max-height:760px){
  body.spielt .show-extras .show-moment{display:none}
  /* DIE ABZEICHENZEILE BLEIBT STEHEN. Hier verschwand sie, sobald eine
     Antwort dastand — und weil das Antwortfeld den freien Platz aufsaugt,
     wuchsen die zwei grossen Ja/Nein-Flaechen dabei mit und rutschten nach
     oben. Karl: „Wenn die Optik sich so massiv aendert nur weil man
     gedrueckt hat sieht das aus wie ein Fehler." Die paar Punkte, die das
     Ausblenden spart, sind diesen Sprung nicht wert. Der Hinweissatz bleibt
     dagegen ausgeblendet, solange keine Antwort da ist. */
  body.spielt .show-extras.show-antwort .show-moment{display:block;min-height:1.4em}
  /* Leere Rubrikschilder brauchen während einer sichtbaren Frage keinen Platz. */
  body.spielt .bild[data-bild="spiel"]:has(#frage:not([hidden])) #typhinweis[hidden],
  body.spielt .bild[data-bild="spiel"]:has(#frage:not([hidden])) #finalfrage[hidden]{display:none!important}
}

/* Verdienter Joker und kurze Show-Effekte: keine zusätzliche Wartezeit. */
.show-joker.bereit{background:var(--gold);color:#20160a;border-color:#ffe297;box-shadow:0 0 14px #ffc83d40}
.show-joker.bereit:disabled{opacity:.75}
.show-joker.laedt{border-color:#ffcf62;color:#ffdc87}

/* Time Bonus und Shield stehen seit dem 06.11.2026 unten bei den Abzeichen,
   nicht mehr als Knopf oben: Beide wirken von selbst, es gibt nichts zu
   druecken. Sie sehen deshalb aus wie ein Abzeichen und nicht wie ein
   Schalter — Kreis, wenn sie fehlen, Haken, wenn man sie hat. Das Gold ist
   unser eigenes (--gold), nicht das Gruen der Abzeichen: Eine Hilfe ist
   etwas anderes als ein geschafftes Abzeichen. */
.show-selbst{color:#f4f7ffb0}
.show-selbst.geschafft{color:var(--gold);font-weight:800}
.show-selbst.weg{color:#f4f7ff70}

/* Die Quittung auf den Klick: „Used" steht gut anderthalb Sekunden da und
   faellt dann ins Ausgangsbild zurueck. Kurz heller, damit man sieht, dass
   der Klick angekommen ist — ohne eine neue Farbe zu erfinden. */
.show-joker.eingesetzt{background:#ffe293;color:#20160a;border-color:#ffdf8f;
  box-shadow:0 0 18px #ffc83d66}

/* Die scharf gemachte Double Chance: Sie LAEUFT, sie ist nicht fertig. Ein
   Puls statt der ruhigen Goldfarbe, damit der Unterschied zu „bereit"
   sichtbar ist — bereit heisst „du kannst", laeuft heisst „du musst noch
   eine zweite Antwort waehlen". */
.show-joker.laeuft{background:var(--gruen);color:#06230a;border-color:#a8f58d;
  animation:doppel-puls 1.1s ease-in-out infinite}
@keyframes doppel-puls{0%,100%{box-shadow:0 0 0 #5bc23600}50%{box-shadow:0 0 16px #5bc23699}}
@media(prefers-reduced-motion:reduce){.show-joker.laeuft{animation:none}}

/* Die erste Wahl der Double Chance: NICHT wie eine Loesung aussehen lassen.
   Gruen wuerde „richtig" heissen, und aufgeloest ist noch nichts. Der
   gewoehnliche Klick (.gewaehlt) traegt denselben goldenen Rahmen, deshalb
   kommt hier ein gestrichelter dazu — zwei Antworten, noch keine Antwort. */
.antwort.doppel-gewaehlt{outline:3px dashed var(--gold);outline-offset:-3px;
  box-shadow:0 0 14px #ffc83d55}

/* Die Schwellentabelle im Regeltext. Schmal, damit sie auf dem Telefon nicht
   quer herausragt. */
.regel-tabelle{border-collapse:collapse;margin:8px 0 12px;font-size:.84rem}
.regel-tabelle th,.regel-tabelle td{padding:3px 10px 3px 0;text-align:left}
.regel-tabelle th{color:#ffdc87;font-weight:800}
.regel-tabelle td:not(:first-child),.regel-tabelle th:not(:first-child){
  text-align:center;padding-right:0;min-width:3.2em}
.regel-tabelle tr+tr td{border-top:1px solid #a87f2e55}
.show-effekte{position:fixed;inset:0;z-index:76;pointer-events:none;overflow:hidden}
.show-belohnung{position:absolute;left:50%;max-width:calc(100vw - 32px);
  padding:11px 18px;border:1px solid #ffe09a;border-radius:14px;
  background:linear-gradient(120deg,#ffd96d,#ffb51b);color:#30200c;
  box-shadow:0 5px 28px #020b2480;font-size:clamp(.8rem,3.8vw,1.15rem);
  font-weight:950;text-align:center;white-space:nowrap;letter-spacing:.035em}
.show-funke{position:absolute;width:7px;height:11px;border-radius:2px}
@media(max-height:560px) and (orientation:landscape){
  body.spielt .bild[data-bild="spiel"]>.frage{font-size:clamp(.9rem,1.8vw,1.1rem)}
}
@media(prefers-reduced-motion:reduce){
  .show-effekte{display:none}
}

/* Punkteserie: kompakt genug für das Tempo der Punktejagd. */
.punkteserie{width:100%;max-width:700px;padding:7px 12px;border:1px solid #67c7ed70;
  border-radius:12px;background:linear-gradient(110deg,var(--brombeer-tief),var(--brombeer));text-align:left}
.punkteserie-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.75rem;color:var(--weiss)}
.punkteserie-kopf>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.punkteserie-kopf>b{display:inline-block;white-space:nowrap;color:#ffdc87;font-size:.9rem}
.punkteserie-spur{height:4px;margin-top:5px;background:var(--brombeer-tief);border-radius:99px;overflow:hidden}
.punkteserie-spur>i{height:100%;width:0;display:block;border-radius:99px;
  background:linear-gradient(90deg,var(--rang),var(--gold));transition:width .25s ease-out}
.punkteserie>p{font-size:.67rem;line-height:1.25;margin-top:4px;color:var(--weiss);min-height:1.25em}
.punkteserie-feiert{animation:show-moment-glanz .55s ease-out;border-color:#ffdc87}
.show-rueckblick .punkteserie-rueckblick{flex:none;padding-top:6px;font-size:inherit}
@media(max-height:560px) and (orientation:landscape){
  body.spielt .bild[data-bild="spiel"]>.punkteserie{grid-column:1/-1;grid-row:2;max-width:none;padding:4px 10px}
  .punkteserie-kopf{font-size:.68rem}.punkteserie-kopf>b{font-size:.8rem}
  .punkteserie>p{font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){
  .punkteserie-feiert{animation:none}.punkteserie-spur>i{transition:none}
}

.show-ressourcen{display:flex;align-items:center;gap:5px;flex-shrink:0}
@media(max-width:540px){
  .show-extras .show-name{display:none}
  .show-ressourcen .show-joker{font-size:.65rem;padding:6px 8px;min-height:36px}
  .show-extras .show-serie{font-size:.7rem;gap:5px}
}
/* Das nächste Serienziel bleibt auch auf kleinen Displays lesbar — und in
   BEIDEN Lagen gleich hoch. Die Regel stand hier nur fuer die laufende
   Frage; beim Aufloesen griff die staerkere Regel aus dem 760er-Block mit
   1.4em und die Zeile schrumpfte um 16 Punkte. Die Antwortflaechen sogen
   den Platz auf und rutschten um genau diese 16 Punkte nach oben —
   gemessen am 06.11.2026 bei 374x667, nachdem das Ausblenden der
   Abzeichenzeile schon weg war. Karl: „Wenn die Optik sich so massiv
   aendert nur weil man gedrueckt hat sieht das aus wie ein Fehler."
   Deshalb beide Lagen, und die zweite mit genug Gewicht. */
body.spielt .show-extras .show-moment,
body.spielt .show-extras.show-antwort .show-moment{display:block;min-height:2.8em}
/* Im niedrigen Querformat ist jede Zeile teuer: dort beide Lagen auf 1.4em,
   also auch dort gleich hoch. */
@media(max-height:560px) and (orientation:landscape){
  body.spielt .show-extras .show-moment,
  body.spielt .show-extras.show-antwort .show-moment{min-height:1.4em}
}

.show-pips{gap:2px}
.show-pips i{width:6px;height:12px}
@media(max-width:380px){
  .show-pips i{width:5px}
  .show-ressourcen .show-joker{font-size:.62rem;padding:6px}
}
.show-serie [data-show-serie]{white-space:nowrap;flex-shrink:0}
.show-pips{flex-shrink:0}
.show-pips i{width:5px}
@media(max-width:380px){.show-pips i{width:4px}}