:root{
  --blau:#0b2e6b; --blau-tief:#06193d; --gruen:#5bc236; --gelb:#f5a700;
  --rot:#e2342c; --weiss:#f4f7ff; --rahmen:#1a4fa0; --gold:#ffc83d;
  /* Nur fuer die Raenge: hell genug fuer den blauen 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%,#14498f,var(--blau-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)}
body.spielt .antwort{padding:11px 14px}
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}
/* DER WEGWEISER GIBT NACH, NICHT DIE FRAGENUMMER. Die Fragenummer
   schrumpft nie (flex:0 0 auto), der Wegweiser nimmt, was uebrig ist, und
   kuerzt sich erst, wenn es wirklich nicht reicht.
   KEIN fester Deckel. Nischenduefte hat hier 30 Prozent stehen — dort
   stand zu der Zeit noch der Spielername in derselben Zeile, und zu dritt
   braucht es eine feste Aufteilung. Seit der Name in der Pille steht, sind
   es nur noch zwei, und ein Deckel kuerzte dann grundlos: „Tipp:
   Allgemeinwissen" wurde auf 374 Punkten zusammengestrichen, obwohl 150
   Punkte der Zeile leer blieben. Gemessen am 07.11.2026.
   Aufbau aus der Nischenduefte-Ausgabe, damit die Serie aus einer Hand
   kommt — die Farben sind unsere eigenen. */
.leiste .zaehler{flex:0 0 auto}
.leiste .tipp{
  flex:0 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.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;
}
/* Eine Nummer kleiner, wenn der Wegweiser auch gekuerzt nicht hineinpasst.
   Gesetzt wird die Klasse nicht nach Zeichenzahl, sondern nachdem das
   Spiel nachgesehen hat, ob der Text wirklich zu breit ist — auf einem
   breiteren Geraet passt er in voller Groesse, und dann bleibt er gross. */
.tipp.eng{font-size:.56rem;letter-spacing:.02em;padding:3px 8px}
.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%, #e4e8f2 65%, #c7cfe0 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: Abrechnung links, Punktestand rechts. Karl am 06.11.2026 an
   einem Bildschirmbild — die Abrechnung stand unten und nahm dem Ergebnis
   den Platz, waehrend hier oben welcher frei war.
   `space-between` statt zentriert: Solange die Abrechnung leer ist (sie ist
   `hidden`), rutscht der Punktestand von selbst nach rechts. */
.punktezeile{
  width:100%;display:flex;gap:10px;align-items:center;justify-content:space-between;
  /* NIE UMBRECHEN. Mit `wrap` rutscht der Punktestand unter die Abrechnung,
     sobald die Posten zu breit werden — und alles darunter springt bei jeder
     Auflösung um 36 Punkte. Gemessen von der Nischenduft-Sitzung: bei 360
     Breite passiert das schon mit drei Posten, bei 374 mit fünf (Finalfrage
     ×2, Richtig, Sek. übrig, Fremdwort, Serie). Fahrzeugwelten hat dasselbe
     in zwei Breitenbändern gefunden, 320–374 und 570–600.
     Statt umzubrechen schiebt sich die Abrechnung in sich zusammen und
     laesst sich im Notfall seitwaerts wischen. Die HOEHE aendert sich nie —
     und darauf kommt es an. Ein min-height waere die Alternative, kostet
     aber dauerhaft die 36 Punkte, die wir gerade gewonnen haben. */
  flex-wrap:nowrap;
}
/* DIE ABRECHNUNG DARF UMBRECHEN. Sie stand hier auf einer Zeile mit
   verstecktem Wischbalken — und schnitt damit den letzten Posten ab.
   Gemessen am 07.11.2026 mit drei Posten und Beschriftung: gebraucht
   286 Punkte bei 374 Breite, frei 207. Auch auf 430 fehlten noch 57.
   Es koennen bis zu sechs sein — Finalfrage x2, Richtig, Zeit,
   Fremdwort, Schwere Frage, Serie —, und dann reicht auch die volle
   Breite nicht. Eine Zeile ist also keine Loesung, sondern eine
   Abschneidemaschine.
   Umbrechen kostet eine Zeile Hoehe, aber nur in den Momenten, in denen
   wirklich mehr zu zeigen ist, und es schneidet nie etwas ab. */
.punktezeile .rechnung{
  width:auto;justify-content:center;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;
}
/* ALLE PILLEN GLEICH GROSS, symmetrisch in einer Reihe. Karl am
   07.11.2026: „ja aber die pillen sollten alle gleichgross sein. in einer
   reihe symmetrisch. schoen!"
   flex:1 1 0 teilt den Platz zu gleichen Teilen — egal ob zwei Posten
   dastehen oder sechs. Die Obergrenze verhindert, dass zwei Pillen die
   halbe Zeile aufblasen. */
/* GLEICHE HOEHE, EINE LINIE. Karl am 07.11.2026: „die punkte sind nicht
   symmetrisch mit Spieler 1 Horizontal." Sie waren es nicht, weil
   Abrechnung und Punktestand verschiedene Polster und Schriftgroessen
   hatten — zwei Pillen unterschiedlicher Hoehe nebeneinander lesen sich
   als Versehen. Beide bekommen jetzt dieselbe Mindesthoehe und dasselbe
   senkrechte Polster; die Schriftgroesse darf sich unterscheiden. */
.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;
}
/* min-height genuegte nicht: die Zeichen ziehen die Zeilenbox der Posten
   auf 29 Punkte, waehrend der Punktestand bei 26 blieb — gemessen 3,5
   Punkte Versatz der Mittellinien. Eine FESTE Hoehe fuer beide, und die
   Behaelter duerfen ihre Kinder nicht strecken. */
.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;
}
/* Das Leerzeichen zwischen Zeichen und Zahl. Karl am 07.11.2026: „✅2000
   wurde angezeigt. wenn es geht waere ✅ 2000 schoener." Das Leerzeichen
   steht zwar im Markup, aber die Zahl sitzt in einem Block mit fester
   Stellenzahl und rechtsbuendig — bei vier Stellen fuellt sie ihn ganz
   aus und klebt am Zeichen. Ein Abstand der Flex-Reihe wirkt immer. */
/* FESTE STELLEN. Karl am 07.11.2026: „feste stellen. mehr als 4 zahlen
   gibt es nicht in den bonis. die punkte koennen dagegen mehrstellig sein
   glaube 5."
   Ohne das wandert die Pille mit jeder Zahl: „500" ist schmaler als
   „3000", und die Reihe verschiebt sich von Frage zu Frage. Vier Stellen
   fuer den Bonus, sechs fuer den Punktestand — fuenf Ziffern plus
   Tausenderpunkt, also „15.000". Gleiche Ziffernbreite dazu, sonst ist
   eine 1 schmaler als eine 8 und es ruckelt trotzdem. */
.punktezeile .rechnung .posten b{
  display:inline-block;min-width:4ch;text-align:right;
  font-variant-numeric:tabular-nums;
}
.punktezeile .konto .punkte{min-width:6ch;text-align:right}
.punktezeile .konten{width:auto;justify-content:flex-end;flex:0 0 auto}
/* DER NAME DARF DIE ABRECHNUNG NICHT VERDRAENGEN. Der Punktestand hat
   Vorrang (flex:0 0 auto), also schrumpft bei einem langen Namen die
   Abrechnung — gemessen bei 374 Breite: „Maximilian-Konstantin" machte das
   Konto 284 Punkte breit, und von 221 Punkten Abrechnung blieben 68
   sichtbar. Erste Antwort war eine Kuerzung auf sieben Zeichen; damit
   lasen sich „Maximilian" und „Maximiliane" aber beide als „Maximilia...".
   Seit dem 06.11.2026 steht hier deshalb kein Name mehr, sondern ein
   fester Platz — „Spieler 1" bis „Spieler 4", immer gleich lang. Der Name
   steht oben rechts in der Zaehlerzeile, ungekuerzt.
   Gefunden hat den Verdraengungsfall die Fahrzeugwelten-Sitzung, nachdem
   ich ihnen geschrieben hatte, mein eigener Pruefling sei zu freundlich
   gewesen („K", ein Buchstabe). */
.punktezeile .konto b{white-space:nowrap}
/* ALLES DEUTLICH KLEINER. Karl am 07.11.2026, mit Bild und in drei
   Schritten: „Die 2. Pille 500 wurde abgeschnitten. Also alles ein wenig
   kleiner" — „aber siehst du wie klein Dreierpack ist. Wieso sollten die
   Punkte die vergeben werden nicht diese groesse haben koennen" — „oder
   die pillen von den jokern sind auch kleiner" — „das sind nur
   informationen. nichts zum anklicken. es darf also kleiner sein."
   Er hat recht: die Joker sind Knoepfe und brauchen eine Flaeche zum
   Treffen, die Abrechnung wird nur gelesen. Zum Vergleich gemessen:
   Missionszeile 10,4 Punkte, Joker 9,9, Abrechnung vorher 13.
   DREI POSTEN sind der Fall, der entscheidet — Grundwert, Zeit, Serie,
   und es koennen bis zu sechs werden. Durchgerechnet ueber eine ganze
   Treppe von Groessen, jedes Mal mit Beschriftung:
     bei .82 fehlten 84 Punkte Breite bei 374, selbst auf 430 noch 62
     Schrumpfen allein reichte nie — der Punktestand nahm 42 Prozent
     erst „Zeit" statt „45 Sek. uebrig" plus .58 passt ab 360 Breite
   Das Wort blieb also stehen; es sagt weiter, wofuer es die Punkte gibt. */
.punktezeile .rechnung .posten{font-size:.72rem;font-weight:800;padding:4px 8px}
/* Karl: „5px abstand zueinander. Horizontal symmetrisch verteilt,
   zentriert." */
.punktezeile{gap:5px}
.punktezeile .rechnung{gap:4px;justify-content:center}
/* `body.spielt` davor ist noetig, nicht Zierde: weiter unten steht
   `body.spielt .konto{padding:4px 12px}`, und das schlaegt eine Regel
   ohne den Rumpf-Wahlteil — Gewicht (0,2,1) gegen (0,2,0), die spaetere
   Position hilft nicht. Ohne diesen Vorsatz war das Polster hier eine
   TOTE ZEILE: gemessen kamen 4px 12px an, der Punktestand war 140 statt
   125 breit, und das Ergebnis sah trotzdem richtig aus, weil
   box-sizing:border-box die feste Hoehe rettet. Richtig aus dem falschen
   Grund. Gefunden von der Motor-World-Sitzung, 07.11.2026. */
body.spielt .punktezeile .konto{padding:0 6px;gap:4px}
/* „SPIELER 1" gross, wie Karl es geschrieben hat. */
.punktezeile .konto b{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;
  -webkit-text-stroke-width:1.4px}
.punktezeile .konto .punkte{font-size:.76rem;-webkit-text-stroke-width:1.4px}
/* Auf 320 Punkten Breite reicht auch das nicht: drei Posten brauchen dort
   190, neben dem Punktestand bleiben 153. Diese Geraete bekommen eine
   Stufe weniger — nur bei der Abrechnung, der Punktestand bleibt gleich,
   damit die Zahl, auf die es ankommt, nicht als erste schrumpft. */
/* Auf 320 Punkten Breite fehlen auch dann noch 18. Diese Geraete bekommen
   eine Stufe weniger — mehr ist nicht herauszuholen, ohne dass die Zahlen
   unlesbar werden. */
/* VIER UND FUENF POSTEN. Gleich breite Pillen teilen sich den Platz: bei
   vieren bleiben auf 374 Punkten noch 50 je Pille, bei fuenf 40 — und
   „✅ 3000" braucht bei .72rem rund 55. Ohne Staffelung wird die ZAHL
   abgeschnitten, und das sieht man nicht: die Zeile bleibt heil, hinten
   fehlen nur Ziffern. Gemessen am 07.11.2026, bei jeder Breite.
   Fuenf ist der Hoechstfall: x2, Richtig, Zeit, schwere Frage, Serie.
   Fremdwort und schwere Frage schliessen sich aus, beide kommen aus
   frage.rubrik, und die hat genau einen Wert.
   Bei vielen Posten faellt auch die feste Stellenbreite weg — dort geht
   es nicht mehr um ruhige Ziffern, sondern darum, dass sie ueberhaupt
   dastehen. */
/* DIE GROESSTE, DIE PASST — gesucht, nicht geschaetzt. Meine ersten
   Werte waren durch Probieren entstanden: sie bestanden, aber „besteht"
   heisst nicht „bestmoeglich". Je Breite die groesste passende Groesse
   gesucht und eine Stufe darunter gesetzt:
     366 breit   4 Pillen bis .66  ·  5 Pillen bis .52
     341 breit   4 Pillen bis .56  ·  5 Pillen bis .46
     320 breit   4 Pillen bis .56  ·  5 Pillen bis .42
   Vorher standen hier .58 und .50, also bis zu einem Viertel zu klein.
   Der Anstoss kam von der Fahrzeugwelten-Sitzung, die bei sich dasselbe
   gefunden hat. */
.punktezeile .rechnung[data-posten="4"] .posten{font-size:.62rem;padding:0 5px;gap:4px}
.punktezeile .rechnung[data-posten="5"] .posten{font-size:.5rem;padding:0 4px;gap:3px}
.punktezeile .rechnung[data-posten="4"] .posten b,
.punktezeile .rechnung[data-posten="5"] .posten b{min-width:0}

/* 360 Punkte Breite ist die Luecke zwischen den beiden Stufen: dort
   blieben vier Pillen bei 47 Punkten, und „✅ 1000" braucht mehr. Die
   Zwischenstufe gilt bis 365 — gemessen, nicht geschaetzt. */
@media(max-width:365px){
  .punktezeile .rechnung[data-posten="4"] .posten{font-size:.52rem;padding:0 4px}
  .punktezeile .rechnung[data-posten="5"] .posten{font-size:.42rem;padding:0 3px}
}
@media(max-width:340px){
  .punktezeile .rechnung .posten{font-size:.52rem;padding:2px 5px}
  /* Nur die fuenf brauchen hier noch eine Stufe; .52 traegt auch 320. */
  .punktezeile .rechnung[data-posten="5"] .posten{font-size:.4rem;padding:0 3px}
  .punktezeile .konto{padding:2px 5px}
  .punktezeile .konto b{font-size:.52rem}
  .punktezeile .konto .punkte{font-size:.62rem}
}

.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))}
/* SEIT 06.11.2026 UNGENUTZT: Der Gong vor der Finalfrage ist weg (das Lied
   ersetzt ihn, Karls Entscheidung), und mit ihm das Wackeln. Die Regel bleibt
   stehen, weil sie nichts kostet und das Wackeln mit einer Zeile Code
   zurueckkaeme, falls Karl es wieder haben will. Die Bewegung `taenzeln`
   selbst wird weiter gebraucht, die darf nicht weg.
   Zum Gong vor der Finalfrage wackelte das Ruhebild kurz — dieselbe Bewegung
   wie im Vorspann, nur dreimal statt endlos. Sonst ist der Gong ein Geraeusch
   ohne Bild. */
/* 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)}
/* AUF DEM TELEFON NUR DIE ZAHLEN. Mit voller Beschriftung braucht die
   Abrechnung bei 374 Punkten Breite die ganze Zeile, der Punktestand rutscht
   darunter, und die Zeile wird 117 statt 35 Punkte hoch — gemessen. Also
   faellt das Wort weg und die Zahl bleibt: „+1000", „+500", „+500".
   Welcher Posten das ist, sagt die Reihenfolge und die Farbe. */
@media(max-width:620px){
  /* Das Wort bleibt stehen. Es stand hier bis zum 07.11.2026 auf
     display:none, um Platz zu sparen — Karl: „Vorher war besser, dass man
     sah wofuer man die bekommt." Der Platz kommt jetzt aus der kleineren
     Schrift und den engeren Abstaenden darueber. */
  .punktezeile .rechnung .posten{padding:5px 10px}
  .punktezeile{gap:6px}
}
.rechnung .summe{
  background:var(--gold);color:#241a00;border-radius:99px;padding:6px 16px;font-weight:900;
}
/* Die Blase „Keine Punkte" gibt es nicht mehr: Sie erscheint jetzt kurz
   dort, wo sonst das „+500" aufpoppt — Karls Entscheidung, „Keine Punkte
   erscheint kurz wo 0 steht.. fertig". Die Regel bleibt stehen, falls die
   Blase je zurueckkommt. */
.rechnung .nix{background:rgba(226,52,44,.22);border-radius:99px;padding:6px 16px}
/* „Keine Punkte" 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 — am 06.11.2026 im
   Browser gesehen. Deshalb rechtsbuendig an der Kante des Kontos, kleiner,
   und mit einer eigenen Bewegung ohne die Mitten-Verschiebung. */
.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)}
}

/* 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. */
.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:#13233f}
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 Euro-Zeichen stand allein in der naechsten
   Zeile — nachgemessen bei 296 px Knopfbreite. Umbrechen darf der Knopf
   davor, zwischen „holen" und dem 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}
/* Das Wort zum heutigen Preis. Steht neben der Preisspanne, nicht darin —
   die ist nowrap, und ein unzerbrechliches „· 4,99 € (Eröffnungspreis)"
   würde den Knopf auf schmalen Geräten sprengen. */
.knopf .pro-marke{font-size:.8em;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:#16305e;box-shadow:0 26px 60px rgba(0,0,0,.55)}
.blatt::backdrop{background:rgba(4,12,30,.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 #0b2452}
.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}
/* Bild im Verlauf: volle Breite des Eintrags, damit es nicht wie ein
   Fremdkoerper neben dem Text klebt. Seitenverhaeltnis steht fest, sonst
   springt die Liste beim Nachladen. */
.news-bild{display:block;width:100%;height:auto;aspect-ratio:1/1;
  border-radius:14px;margin:2px 0 13px;background:rgba(244,247,255,.06)}
.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:#13233f;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
   das Blau 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(4,14,38,.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}
/* Zwoelf Prozent groesser als bis v205. Dort lief hier das App-Symbol, ein
   gerundeter Kasten, der seinen Rahmen bis in die Ecken ausfuellte. Das Logo
   reicht zwar ebenso bis an alle vier Raender — oben das Haar, unten das
   „KEINER!", seitlich die Strahlen —, hat dazwischen aber viel Durchsicht
   und wirkt bei gleicher Breite deshalb kleiner.

   Nachgemessen statt geschaetzt: Der aeusserste sichtbare Punkt des Logos
   liegt 121 % der halben Bildbreite von der Mitte entfernt. Beim Drehen
   ueberstreicht er also einen Kreis von 0,447 Bildschirmbreiten Radius,
   waehrend bis zum Rand 0,5 zur Verfuegung stehen. Es bleibt rund ein
   Zehntel Luft, und zwar auf JEDEM Bildschirm — die Rechnung haengt nur an
   der Prozentangabe, nicht an der Geraetegroesse. Der durchsichtige
   Bildrahmen ragt bei 45 Grad zwar heraus, aber da steht nichts drin. */
.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 blaue Verlauf 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%, #14498f, var(--blau-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. */
.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(--blau-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;
}

/* Derselbe feste Platz am Ende der grossen Show: Dort steht die
   Punktezahl genauso gross im Bild, und der Knopf fuer Ansage und Urteil
   laege sonst dahinter. */
body.jagdschluss #erklaerWeiter,
body.showschluss #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}
/* UNVERAENDERT, mit Absicht. Ich hatte den Aufstieg verkuerzt und die
   Zahl verkleinert, weil sie in die Tipp-Zeile ragt. Karl am 07.11.2026:
   „Ich meinte diese gruenen zahlen die eingeblendet werden ueber dem
   punktestand. Das sah vorher auch perfekt aus." Also bleiben Groesse und
   Weg, wie sie waren — das kurze Ueberlappen gehoert dazu. */
.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}
@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}
  @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);
  /* Ohne diese Zeile faellt die Flaeche unter ihren eigenen Inhalt: Der
     Flex-Umbruch drueckt sie auf wenige Pixel, und weil sie in sich
     scrollt, SCHLUCKT sie den Ueberstand, statt ihn nach oben
     weiterzureichen. Gemessen bei 374x500: Kasten 25 Pixel hoch bei 207
     Pixeln Inhalt, 182 Pixel abgeschnitten — und passeAn() sah keinen
     Grund zu verkleinern, weil das Dokument keinen Ueberlauf meldete.
     min-content laesst die Flaeche ihre wahre Hoehe behalten; erst
     dadurch wird der Platzmangel ueberhaupt messbar. Allein hilft die
     Zeile nicht, sie gehoert zu den vier Aenderungen in passeAn(). */
  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}


/* ══════════════════════════════════════════════════════════════
   DIE FERNSEH-SCHICHT, TEIL 1
   ══════════════════════════════════════════════════════════════
   Uebernommen am 11.11.2026 aus der deutschen Fernsehfassung desselben
   Spiels (~/Projekte/uns-fragt-ja-keiner-tv/app/stil.css, Zeilen 1434 bis
   2321), beschrieben in deren _TV-SCHICHT.md, Teil 1.

   WORTGLEICH UEBERNOMMEN, und das mit Absicht: Die deutsche und die
   englische Quiz-Show sind dasselbe Spiel in zwei Sprachen. Die beiden
   Handy-Blaetter sind bytegleich (md5 652e470a...), es steht kein Wort
   Text in diesem Blatt, und die Farben sind dieselben. Was die Vorlage
   fuer die anderen Ausgaben mahnt — „jede bleibt in ihrer Optik“ — gilt
   hier nicht: Es IST dieselbe Optik.

   Alles hier haengt an einer von vier Kennungen, die js/steuerung.js
   setzt: html.grossbild, html.spielraster, html.feuertv oder
   body.navigiert. Was ohne diese Kennungen gilt, steht weiter oben und
   bleibt unberuehrt — am Handy aendert diese Schicht nichts.
   ══════════════════════════════════════════════════════════════ */

/* ---------- Fokus fuer Fernbedienung, Tastatur und Gamepad ---------- */
/* Sichtbar wird das nur, waehrend wirklich navigiert wird: js/steuerung.js
   setzt body.navigiert beim ersten Richtungsdruck und nimmt es beim ersten
   Tippen oder bei der ersten Mausbewegung wieder weg. Fuer die
   Fingerbedienung aendert sich nichts.

   Blau — und zwar, weil es die einzige Farbe ist, die in diesem Spiel noch
   nichts bedeutet:
     gruen  = richtig
     rot    = daneben
     gold   = der Hauptknopf, die gewaehlte Antwort, die Uhr, die Punkte
   Alles Blau im Spiel ist dunkel (#0b2e6b, #1a4fa0, #14498f), ein helles
   kommt nirgends vor. Es kann also mit nichts verwechselt werden — und auf
   dem gelben Knopf ist es die Gegenfarbe und damit nicht zu uebersehen.
   Das loest zugleich das Problem, dass .knopf ohnehin schon var(--gelb)
   traegt: Ein goldener Fokus musste sich dort muehsam abheben, ein blauer
   tut es von selbst.

   Das Blau ist satt, nicht zart, weil die Schrift darauf WEISS bleibt. Auf
   einem hellen Cyan waere Weiss nicht mehr zu lesen; ein kraeftiges Blau
   traegt sie muehelos und wirkt freundlicher als dunkle Schrift auf hellem
   Grund. */

/* Gold, nicht Blau. Blau war die saubere Wahl, solange die Antworten
   selbst blass waren — aber der ganze Bildschirm ist blau, und „hier
   stehe ich" muss sich vom Hintergrund abheben, nicht von ihm erben.
   Gold ist im Spiel ohnehin die Signalfarbe, und aus drei Metern
   Abstand findet man es ohne Suchen. Grün und Rot bleiben der
   Aufloesung vorbehalten, die Ruhefarbe ist Blau. */
:root{ --fokus:#ffc83d; --fokus-tief:#e59a00; --fokus-hof:255,200,61; }

@keyframes fokus-atem{
  0%,100%{box-shadow:0 0 0 4px rgba(var(--fokus-hof),.45), 0 8px 26px rgba(0,0,0,.45)}
  50%    {box-shadow:0 0 0 11px rgba(var(--fokus-hof),.18), 0 8px 30px rgba(0,0,0,.5)}
}

body.navigiert :is(button, label.knopf):focus{
  outline:none;
  /* .knopf.leise steht auf opacity:.7 — damit waere das Blau matt. Der
     fokussierte Knopf ist der, auf den es gerade ankommt. */
  opacity:1;
  background:linear-gradient(180deg,var(--fokus),var(--fokus-tief));
  /* Dunkel, nicht weiss. Weiss auf Gold kommt auf ein Kontrastverhaeltnis
     von 1,6 zu 1 — das ist auf dem Fernseher nicht mehr zu lesen, und auf
     einem hellen Wohnzimmer schon gar nicht. Dasselbe Dunkelbraun traegt
     im Spiel jede andere goldene Flaeche. */
  color:#20160a; font-weight:800;
  /* transform liegt ausserhalb des Layouts — der Knopf waechst, ohne seine
     Nachbarn zu verschieben. Sonst ruckte bei jedem Schritt die Reihe. */
  transform:scale(1.07);
  animation:fokus-atem 1.9s ease-in-out infinite;
  position:relative; z-index:5;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
/* Der Buchstabenkasten der Antwort traegt var(--rahmen) — ein mittleres
   Blau, das auf dem Fokusblau untergeht. Gold setzt ihn ab: Es ist die
   Farbe der Show, und auf dem Blau der kraeftigste Kontrast, den die
   Palette hergibt. Derselbe Ton, den die Kaesten ohnehin bekommen, sobald
   die Antworten gesperrt sind. */
body.navigiert .antwort:focus .b{background:var(--rahmen);color:#fff}
/* Das Pro-Faehnchen ist von sich aus gold auf dunkelblauer Schrift und
   passt damit auf das Fokusblau, ohne dass hier etwas zu tun waere. */
/* Die Notenschrift ist ein Zeichen, kein Wort — Fettdruck macht sie breit. */
body.navigiert button.note:focus{font-weight:400}
/* Das Kleingedruckte auf den Stufenknoepfen („60 Sek · 5 von 10") erbt
   sonst eine helle Farbe und verschwindet auf dem Blau. */
body.navigiert button:focus small{color:inherit;opacity:.85}

/* Die gewaehlte Antwort traegt von Haus aus einen goldenen Rand. Solange
   der Fokus blau war, standen hier zwei Aussagen in zwei Farben
   nebeneinander: „die hast du gewaehlt" und „hier stehst du".
   Seit der Fokus selbst golden ist, faellt das zusammen — und es faellt
   zu Recht zusammen, denn gewaehlt hat man immer das, worauf man steht.
   Ein goldener Rand um eine goldene Flaeche waere nur unsichtbar.
   Stattdessen ein dunkler Saum nach innen: Er trennt die Flaeche vom
   Rand, ohne eine dritte Farbe einzufuehren. */
body.navigiert .antwort.gewaehlt:focus{
  outline:none;
  box-shadow:inset 0 0 0 3px rgba(32,22,10,.55);
}

/* Nach der Aufloesung steht fest, was richtig und was daneben war. Diese
   Aussage schlaegt den Fokus: Wer gerade sieht, dass er danebenlag, soll
   keinen eingefaerbten Knopf vor sich haben.
   Drei Klassen, nicht zwei — .falsch ist die normale Runde, .daneben die
   Punktejagd. Erkennbar bleibt der Fokus durch einen schmalen hellen Saum,
   der die Aussage von Gruen und Rot nicht beruehrt. */
body.navigiert :is(.antwort.richtig, .antwort.falsch, .antwort.daneben):focus{
  font-weight:inherit;
  transform:none; animation:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.95);
}
/* Hier stand background:none — und das war derselbe Fehler nochmal, nur an
   einer anderen Stelle. Es loescht nicht das Fokusblau, es loescht JEDE
   Flaeche: auch das Gruen aus .antwort.richtig, das zwei Zeilen weiter
   oben in der Datei steht und die geringere Spezifitaet hat. Die richtige
   Antwort wurde also wieder genau dann farblos, wenn man sie getroffen
   hatte — dann liegt der Fokus ja auf ihr.
   Statt die Flaeche zu loeschen, wird sie gesetzt. Dieselben Farben wie
   ohne Fernbedienung: */
body.navigiert .antwort.richtig:focus{
  background:var(--gruen); color:#07280a;
}
body.navigiert :is(.antwort.falsch, .antwort.daneben):focus{
  background:var(--rot); color:#fff;
}
/* outline wird hier bewusst NICHT angefasst — das war ein Fehler und hat
   in der Punktejagd die Aufloesung unsichtbar gemacht:
       body.finalrunde .antwort.richtig{outline:3px solid var(--gruen)}
   Dort ist der RAHMEN die Markierung, keine Flaeche. Ein outline:none in
   meiner Fokusregel hat ihn geloescht, sobald die richtige Antwort unter
   dem Fokus stand — und das ist sie nach einer richtigen Antwort immer.
   Die richtige Antwort wurde also ausgerechnet dann nicht gruen, wenn man
   sie getroffen hatte.
   Dasselbe gilt fuer den goldenen Rand der gewaehlten Antwort. Fremde
   Raender bleiben stehen; zurueckgenommen wird nur, was ich selbst
   gesetzt habe. */

/* Die Themenknoepfe sind Umschalter. Ihr Zustand steckt in aria-pressed und
   faerbt die Flaeche — der Fokus darf ihn nicht ueberschreiben, sonst sieht
   ein abgewaehltes Thema fokussiert wie ein gewaehltes aus. Hier also doch
   ein Rand, aber ein blauer und ein dicker. */
body.navigiert .thema:focus{
  background:none; color:inherit; font-weight:inherit; transform:scale(1.05);
  /* NICHT var(--fokus): Ein gewaehltes Thema ist selbst goldgefuellt,
     ein goldener Rand darum waere unsichtbar. Weiss sagt dasselbe und
     steht auf beiden Zustaenden. */
  outline:4px solid #fff; outline-offset:3px;
  box-shadow:none; animation:none;
}

/* Textfelder: Eine Flaeche macht den getippten Namen unlesbar. Hier
   gehoert der Rahmen ums Feld. */
body.navigiert input:focus{
  outline:4px solid var(--fokus); outline-offset:2px;
  box-shadow:none; animation:none;
}

/* Links — Fusszeile, Impressum, „Bestenliste loeschen". Eine Flaeche waere
   hier zu laut; blaue, unterstrichene Schrift genuegt. */
body.navigiert :is(a[href], .link):focus{
  outline:none; color:var(--fokus); text-decoration:underline;
  text-decoration-thickness:3px; text-underline-offset:4px;
  transform:scale(1.06); box-shadow:none; animation:none;
}
/* display NUR bei echten Links anfassen: Die sind inline, und auf inline
   wirkt transform nicht. Knoepfe sind ohnehin inline-block, und manche
   stehen auf block mit margin:auto — „Vielleicht spaeter" im
   Vollversions-Blatt zum Beispiel. Ein pauschales inline-block hat genau
   dessen Zentrierung zerstoert: Der Knopf rutschte an den linken Rand. */
body.navigiert a[href]:focus{ display:inline-block; }
/* Das Markenlogo ist ein Bild — Schriftfarbe hilft dort nicht. */
body.navigiert .marke:focus{
  outline:4px solid var(--fokus); outline-offset:4px; transform:scale(1.06);
}

/* Wer eine Fernbedienung benutzt, sitzt weit weg. Ein Mauszeiger, der
   mitten im Bild stehen bleibt, sieht auf dem Fernseher nach einem Fehler
   aus. Die erste Mausbewegung holt ihn zurueck. */
body.navigiert{cursor:none}

/* Wer Bewegung abbestellt hat, bekommt den Zustand ohne das Atmen. Farbe
   und Groesse zeigen den Fokus ja schon. */
@media (prefers-reduced-motion: reduce){
  body.navigiert :is(button, label.knopf):focus{
    animation:none; transition:none;
    box-shadow:0 0 0 4px rgba(var(--fokus-hof),.45), 0 8px 26px rgba(0,0,0,.45);
  }
}

/* ---------- Grosse Darstellung fuer den Fernseher ---------- */
/* Greift nur, wenn js/steuerung.js einen Fernseher erkannt hat, der Nutzer
   es eingeschaltet hat oder ?tv=1 es erzwingt. Am Handy und am Schreibtisch
   aendert sich nichts. Die Klasse sitzt auf <html>, nicht auf <body> —
   sonst wuerde font-size die rem-Werte nicht erreichen.

   Alle Masse hier sind RELATIV zur Bildschirmbreite, nicht in festen Pixeln.
   Das ist der Unterschied zwischen „sieht auf meinem Testschirm gut aus" und
   „taugt fuer 4K": Ein Fire TV Stick meldet meist 1920 Viewport-Pixel bei
   doppelter Pixeldichte, manche Geraete melden aber echte 3840. Mit festen
   22px waere die Schrift dort wieder halb so gross wie gedacht — mit 1.15vw
   waechst sie mit.

      1280 Pixel (720p)  ->  18px Grundschrift  (Untergrenze greift)
      1920 Pixel (1080p) ->  22px
      2560 Pixel (1440p) ->  29px
      3840 Pixel (4K)    ->  44px

   Das Grundmass ist die Schrift auf <html>, weil fast alles im Spiel in rem
   und clamp() rechnet — Frage, Sprechblase, Hinweise, Knoepfe ziehen von
   allein mit. Deshalb stehen auch die Polster hier in rem und nicht in
   Pixeln: Sonst saesse auf dem 4K-Schirm grosse Schrift in kleinen Knoepfen.

   Die Breite ist dabei genauso wichtig wie die Schrift: Erst wenn die Buehne
   den Schirm nutzt, passt mehr nebeneinander und braucht weniger Hoehe —
   sonst drueckt die groessere Schrift den Inhalt nach unten, und passeAn()
   verkleinert alles wieder auf Anfang. */

/* Die Schrift haengt an BEIDEN Massen, nicht nur an der Breite. Das war
   ein Fehler: Ein Fire TV liefert 1920 Pixel Breite, aber der Silk-Browser
   nimmt oben eine Adressleiste weg. Die Schrift wuchs trotzdem auf volle
   Groesse, und die unteren beiden Antworten fielen aus dem Bild.
   min() nimmt das kleinere von beidem — wo Hoehe fehlt, waechst nichts.

      1920 x 1080 (App, volles Bild)  -> 22px
      1920 x  985 (Browser mit Leiste) -> 21px
      1920 x  900                      -> 19px
      1280 x  720                      -> 18px (Untergrenze)  */
html.grossbild{
  /* DIE UNTERGRENZE MUSS MITWACHSEN. Vorher standen hier feste 18px. Das
     passt, solange ein CSS-Pixel ungefaehr ein Bildpunkt ist — Karls Fire TV
     meldet dem Browser aber nur 960x540 und zeigt das auf 1920x1080. Dort
     gewann die 18 gegen die gerechneten 11, die Schrift war doppelt so gross
     wie gedacht, alles wurde zu hoch, und passeAn() musste auf 0,62
     verkleinern. Der Zoom schrumpft aber auch die BREITE: Der Inhalt stand
     als Briefmarke in der Mitte, mit leeren Flaechen links und rechts.
     Proportional gerechnet bleibt 1080p unveraendert (21,6 als Untergrenze
     gegen 22,08 gerechnet) und 540 bekommt 10,8 statt 18 — auf dem Schirm
     dieselbe Groesse wie vorher, nur ohne den Umweg ueber den Zoom. */
  font-size:clamp(calc(var(--echte-hoehe, 100vh) * .020),
                  min(1.15vw, calc(var(--echte-hoehe, 100vh) * .022)), 52px);
}

/* Fernseher schneiden am Rand ab — je nach Geraet drei bis fuenf Prozent.
   Der Hintergrundverlauf liegt auf body und laeuft bis zum Bildrand; das
   Polster haelt nur den INHALT davon weg. Was der Fernseher abschneidet,
   ist damit immer nur Hintergrund, nie ein Knopf oder eine Antwort.
   Die Deckel sind hoch genug, dass sie auf 4K nicht vorzeitig bremsen. */
html.grossbild{
  /* Ein Mass fuer beides: das Polster und die Hoehenrechnung darunter.
     Standen sie getrennt da, lief die Rechnung bei jeder Aenderung
     auseinander. Bezugsgroesse ist die GEMESSENE Hoehe, nicht vh. */
  /* 07.11.2026 von .03 auf .05: Der Kommentar darueber sagt „drei bis fuenf
     Prozent", gesetzt waren drei. Auf Karls 55-Zoll-Fernseher stand die
     Schalterreihe damit halb unter dem Bildrand — gemessen blieben bei
     1920x1080 nur 32 px Luft (Reihe 999..1048), bei 1280x720 nur 22 px
     (657..698). Wer mehr abschneidet als drei Prozent, verliert die Knoepfe.
     Jetzt fuenf Prozent, und was dadurch nicht mehr passt, verkleinert
     passeAn() — siehe die Reparatur dort. */
  --tv-polster:max(16px, calc(var(--echte-hoehe, 100vh) * .05));
  /* Seitlich dasselbe Mass, bezogen auf die Breite. */
  --tv-polster-x:max(16px, 5vw);
}
html.grossbild body{
  /* Seitlich dieselben fuenf Prozent wie oben und unten — das ist die Safe
     Area, die Amazon fuer Fire TV vorgibt. Vorher stand hier
     clamp(28px,4vw,165px), also vier Prozent, und daneben begrenzte
     #buehne die Breite zusaetzlich auf 78vw. Zusammen blieben rund zwei
     Drittel der Bildbreite uebrig, der Rest war leer. Karl: „nutz doch die
     breite in tv aus". */
  padding:var(--tv-polster) var(--tv-polster-x);
  min-height:var(--echte-hoehe, 100dvh);
}
/* Die Hoehenrechnung des Spielbildes zieht die Polster ab. Sie steht oben
   mit festen 32px — hier gilt das neue Mass, sonst ragt das Spielbild
   unten aus dem Bild. */
html.grossbild body.spielt #buehne{
  height:calc(var(--echte-hoehe, 100dvh) - 2*var(--tv-polster));
}

/* 78 Prozent der Breite — als Anteil, nicht als Pixelzahl. Auf 4K waere
   eine feste Obergrenze sonst wieder eine Briefmarke in der Mitte. */
/* Die Breite gehoert dem Inhalt. Die Safe Area steckt schon im Polster des
   body — eine zweite Begrenzung hier machte das Bild ein zweites Mal
   schmaler. */
html.grossbild #buehne{ max-width:100%; }
html.grossbild .titel{ max-width:min(32rem,52vw); }

/* Die Abstaende bewusst knapp: Die Startseite traegt sieben Bloecke, und
   bei 1.27rem war sie fuenf Pixel zu hoch fuer einen 1080p-Schirm — worauf
   passeAn() die ganze Buehne auf 91 Prozent verkleinert hat. Fuenf Pixel
   Ueberhang kosteten also neun Prozent Schriftgroesse ueberall. Mit .95rem
   bleibt Luft, und die 22px Grundschrift kommen wirklich an. */
html.grossbild .bild{ gap:.95rem; }

/* Polster und Rundungen in rem, damit sie mit der Grundschrift wachsen. */
html.grossbild .knopf{ padding:.9rem 1.64rem; border-radius:.9rem; }
html.grossbild .knopf.gross{ padding:1.1rem 2.2rem; }
html.grossbild .knopf.leise{ padding:.55rem .73rem; }
html.grossbild .knopf.klein{ padding:.55rem .9rem; }
html.grossbild .knopf.zahl{ width:5rem; height:5rem; border-radius:1.2rem; }
/* Die Antworten sind der Text, auf den es ankommt — den muss man vom Sofa
   lesen koennen, nicht die Fussnote. Sie erben sonst die Grundschrift und
   waeren mit 22px der kleinste wichtige Text auf dem Schirm. */
html.grossbild .antwort{ padding:.82rem 1rem; border-radius:.82rem; font-size:1.25rem; }
html.grossbild .antwort .b{ flex:0 0 2.1rem; height:2.1rem; border-radius:.6rem; }
html.grossbild .gesicht{ width:clamp(3.4rem,7vw,5rem); }
html.grossbild .antworten{ gap:.64rem; }
html.grossbild .schalter{ gap:.55rem; }

/* Im Spiel ist die Hoehe knapp — dort bleiben die Abstaende enger, damit
   die Frage gross sein darf, ohne dass passeAn() alles herunterzoomt. */
html.grossbild body.spielt .bild[data-bild="spiel"]{ gap:.64rem; }
/* Die Sprechblase darf im Spiel nicht die halbe Hoehe nehmen. Der Deckel
   steht im Grundstil auf 30vh — im Grossbild ist das zu viel, weil Gesicht
   und Schrift mitgewachsen sind. Was darueber hinausgeht, wird gerollt;
   der Text ist ohnehin auch zu hoeren. */
html.grossbild body.spielt .sprechblase{ max-height:calc(var(--echte-hoehe, 100vh) * .24); }

/* AUF DEM FERNSEHER KANN NIEMAND ROLLEN. Der Grundstil gibt `.gesagt` eine
   FESTE Hoehe von drei Zeilen und `overflow-y:auto` — auf dem Handy wischt
   man darin, mit der Fernbedienung nicht. Alles ab der vierten Zeile war
   damit fuer den Zuschauer weg, oben und unten abgeschnitten.
   Gemessen am 07.11.2026 an der ausgelieferten Fassung: 116,25 px bei
   1920x1080 (Zeilenhoehe 38,75 — also exakt 3,00 Zeilen). Der
   Begruessungstext braucht dort knapp drei Zeilen und passt gerade noch;
   bei 1280x720 braucht er 3,01 Zeilen in einem Kasten fuer 2,70 und wird
   abgeschnitten. Karls Foto vom 55-Zoll-Geraet zeigt die erste Zeile oben
   und „Lauf lassen!" unten weggeschnitten.
   Darum hier: waechst statt zu klemmen, mit drei Zeilen als MINDESTmass —
   die drei Zeilen waren eine Zusage an die Untertitel, kein Deckel. */
/* DAMIT DER UEBERSTAND UEBERHAUPT ANKOMMT. Die Antwortflaeche ist ein Grid
   mit `overflow:hidden auto` — steht darueber viel, drueckt der Flex-Umbruch
   sie zusammen, und weil sie in sich rollt, SCHLUCKT sie den Ueberstand
   statt ihn weiterzureichen. Das Dokument meldet dann genau die
   Fensterhoehe, passeAn() sieht nichts, und die unterste Antwort ist weg.
   Gemessen am 07.11.2026 an der ausgelieferten Fassung bei 1280x720:
   `#antworten` klemmte seinen Inhalt um 63 px, waehrend das Dokument 720
   meldete — also genau 720, die Fensterhoehe.
   Diese Zeile allein REPARIERT NICHTS, sie TAUSCHT nur: abgeschnittene
   Antworten gegen eine Schalterreihe, die aus dem Bild rutscht. Erst
   zusammen mit dem reparierten passeAn() stimmt beides. Die beiden gehoeren
   zusammen und duerfen nie einzeln nachgezogen werden. */
html.grossbild body.spielt #antworten{ min-height:min-content; }

html.grossbild .sprechblase .gesagt{
  height:auto; min-height:calc(3 * 1.35em); overflow:visible;
}
/* Im Spiel bleibt ein Deckel, sonst drueckt eine lange Zeile die Antworten
   zusammen. Fuenf Zeilen statt drei: Der laengste Vorlesetext im Bestand
   braucht vier. Was darueber hinausgeht, verkleinert passeAn() mit der
   ganzen Buehne — nicht mehr dieser Kasten allein. */
html.grossbild body.spielt .sprechblase .gesagt{
  max-height:calc(5 * 1.35em); overflow-y:auto;
}
html.grossbild body.spielt .gesicht{ width:clamp(3rem,5vw,4.2rem); }
html.grossbild body.spielt .antwort{ padding:.73rem .9rem; }

/* DIE SHOW-LEISTE AUF EINE ZEILE. Sie stapelt drei Zeilen uebereinander —
   Serie mit Punkten, Missionen, Hinweis — und die Joker rechts daneben. Auf
   einem Handy ist das richtig, dort ist Breite knapp und Hoehe da. Auf einem
   Fernseher ist es umgekehrt: Die drei Zeilen kosten Hoehe, die der Frage
   und den Antworten fehlt, waehrend rechts und links Platz leer steht.
   Karl: „die serienpunkte nach links fuer mehr platz".
   `display:contents` loest die innere Verpackung auf, damit Serie, Missionen,
   Hinweis und Joker zu Geschwistern in EINER Reihe werden. Die Joker gehen
   per `order` und `margin-left:auto` ans rechte Ende.
   Der Hinweis behaelt seine Mindesthoehe — er wechselt waehrend der Sendung
   den Text, und ohne reservierten Platz wuerde die Leiste springen. */
html.grossbild body.spielt .show-extras{
  display:flex; flex-wrap:nowrap; align-items:center; gap:.4rem 1.1rem;
}
html.grossbild body.spielt .show-oben{ display:contents; }
html.grossbild body.spielt .show-serie{ flex:0 0 auto; }
html.grossbild body.spielt .show-missionen{
  margin-top:0; flex:0 0 auto; white-space:nowrap;
}
html.grossbild body.spielt .show-moment{
  margin-top:0; min-height:1.4em; flex:1 1 auto; text-align:left;
}
html.grossbild body.spielt .show-ressourcen{
  order:9; margin-left:auto; flex:0 0 auto; display:flex; gap:.4rem;
}

/* AUSGESCHALTETE BLOECKE BELEGTEN EIN DRITTEL DES FERNSEHBILDES.
   #uhr, #finalfrage, #rechnung und #erklaerWeiter stehen oben im Blatt mit
   `display:block!important;visibility:hidden`. Das ist Absicht: Beim
   Einblenden soll nichts rutschen. Gemessen bei 960x540 — Karls Groesse —
   kosteten sie zusammen 167 der 537 Pixel, die die Buehne brauchte. Weil
   die Buehne dadurch zu hoch wurde, verkleinerte der Einpasser sie
   zusaetzlich; im Bild stand die Frage klein in einem Loch.
   Solange die Antworten auf dem Schirm stehen, kann keiner dieser drei
   unteren Bloecke kommen: Rechnung und Weiter-Knopf gehoeren zur
   Aufloesung, das Finalfragen-Schild steht vor der Frage. Die Uhr behaelt
   ihren Platz — sie kommt waehrend der Frage.
   Die Handy-Fassung raeumt zwei davon laengst weg (Typhinweis und
   Finalfrage, weiter unten im Blatt); der Fernseher hatte es nie. */
html.grossbild body.spielt .bild[data-bild="spiel"]:has(#antworten:not([hidden])) #typhinweis[hidden],
html.grossbild body.spielt .bild[data-bild="spiel"]:has(#antworten:not([hidden])) #finalfrage[hidden],
html.grossbild body.spielt .bild[data-bild="spiel"]:has(#antworten:not([hidden])) #rechnung[hidden],
html.grossbild body.spielt .bild[data-bild="spiel"]:has(#antworten:not([hidden])) #erklaerWeiter[hidden]{
  display:none!important;
}
html.grossbild body.spielt .knopf.klein{ padding:.45rem .9rem; font-size:.9rem; }

/* Das Logo haengt an einer festen Grenze von 373px, und die gewinnt auf
   jedem Fernseher gegen das 44vh daneben. Auf einem Geraet mit echten 3840
   CSS-Pixeln waere es damit ein Zehntel der Bildbreite — eine Briefmarke.
   34vh trifft bei 1080p fast dieselben Pixel wie bisher, waechst aber auf
   4K proportional mit und bleibt mit rund 748 Pixeln Breite unter den 1254
   der Datei, also scharf.
   Absichtlich knapp: Mehr Logo heisst weniger Platz fuer den Rest, und dann
   verkleinert passeAn() die ganze Buehne. Bei 42vh ist genau das passiert —
   das Logo war 12 Pixel groesser und alles andere 15 Prozent kleiner. */
html.grossbild .bild[data-bild="start"] .titel img{ max-height:calc(var(--echte-hoehe, 100vh) * .34); }

/* Der Fokusring darf mitwachsen: Was auf zwei Metern wirken soll, braucht
   mehr als vier Pixel — und auf 4K mehr als sechs. */
html.grossbild body.navigiert .thema:focus,
html.grossbild body.navigiert input:focus,
html.grossbild body.navigiert .marke:focus{ outline-width:.28rem; }

/* Die Bestenliste darf rollen statt zu schrumpfen. Zehn Eintraege mit Rang
   sind auf 1080p zu hoch; passeAn() verkleinerte daraufhin die ganze Buehne
   auf 74 Prozent, und vom Grossbild blieb fast nichts.
   Mit eigenem Rollbereich bleibt die Buehne in der Hoehe — passeAn() hat
   nichts mehr zu tun, und Rang und Name behalten ihre volle Groesse.
   Nur hier, nicht im Spiel: Dort ist Rollen verboten, weil es mitten in
   einer Frage den Satz abreisst und Antwortzeit kostet.
   Die Eintraege bekommen von js/steuerung.js ein tabindex, sonst waere der
   Bereich mit der Fernbedienung nicht erreichbar — man wandert von Knopf zu
   Knopf, und ein reiner Textblock wird dabei uebersprungen. */
html.grossbild .bild[data-bild="bestenliste"] .rangliste{
  max-height:calc(var(--echte-hoehe, 100vh) * .62); overflow-y:auto; overscroll-behavior:contain;
  /* Platz fuer den Fokusring des ersten und letzten Eintrags. */
  padding:4px;
}
/* Der Ring sitzt sonst halb unter dem Rand des Rollbereichs. */
html.grossbild body.navigiert .rangliste li:focus{
  outline:4px solid var(--fokus); outline-offset:-2px;
  border-radius:14px;
}

/* Die Ranglisten im Grossbild: kompakter, damit mehr Schrift uebrig bleibt.
   Klingt widersinnig, ist aber Rechnerei. Zehn Eintraege mit Rang, Name und
   Fussnote sind bei 22px Grundschrift rund 1130 Pixel hoch — zu viel fuer
   einen 1080p-Schirm, worauf passeAn() die ganze Buehne auf 74 Prozent
   verkleinert. Vom Zugewinn des Grossbilds bleibt dann fast nichts: 16,3px
   statt 14,8px beim Namen.
   Also spart man Hoehe dort, wo sie nichts kostet — im Polster und in der
   Fussnote, die ohnehin das Kleingedruckte ist — und bekommt sie als
   Schriftgroesse zurueck, wo sie zaehlt: bei Rang und Name. */
html.grossbild .rangliste li{ padding:.4rem .75rem; }
html.grossbild .rangliste{ gap:.3rem; }
/* Die Fussnote traegt Stufe, Treffer und Datum — Nachschlagewerte, keine
   Leseschrift. Sie darf deutlich kleiner sein als der Name darueber. */
html.grossbild .rangliste .quote{ font-size:.62rem; }

/* Ein Textkasten, der gerollt werden muss, braucht einen eigenen Ring —
   man sieht sonst nicht, dass er „dran" ist und die Pfeiltasten ihn
   bewegen. Innen gesetzt, damit er den Kasten nicht aufblaeht. */
html.grossbild body.navigiert :is(.hilfe, .news-liste):focus{
  outline:4px solid var(--fokus); outline-offset:-4px; border-radius:14px;
}

/* Der Neuigkeiten-Verlauf auf dem Fernseher. Zwei Aenderungen gegenueber
   der Handy-Fassung, und beide haben denselben Grund wie bei der
   Bestenliste darueber:
   Erstens die Hoehe aus --echte-hoehe statt aus vh — der Browser auf dem
   Fire TV meldet vh falsch, dafuer steht die gemessene Hoehe in der
   Variablen (siehe hoeheMessen() in js/steuerung.js).
   Zweitens ein Polster, damit der Fokusring des Kastens nicht halb unter
   dem eigenen Rand verschwindet. */
html.grossbild .news-liste{
  max-height:calc(var(--echte-hoehe, 100vh) * .56);
  overscroll-behavior:contain;
  padding:4px 8px 4px 4px;
}

/* DIE BREITE DER BLAETTER AUF DEM FERNSEHER. Karl am 07.11.2026 mit einem
   Foto vom 70-Zoeller: „Hier space" — das Blatt stand als schmaler Turm
   mitten im Bild, links und rechts blieb alles leer.
   Die Grundregel deckelt auf min(430px, 92vw). 430 Pixel sind eine
   Handybreite: auf einer 960er Buehne sind das 45 Prozent, auf 1920 nur
   noch 22. Am Handy stimmt die Zahl, am Fernseher stimmt sie nicht.
   78vw statt einer festen Zahl, damit es mit der gemeldeten Flaeche
   waechst; der Deckel bei 1040 haelt die Zeilen lesbar, denn eine Zeile
   ueber die halbe Wand liest sich schlechter als eine zu schmale.
   Gilt fuer ALLE Blaetter, nicht nur die Neuigkeiten: Regeln, Hilfen und
   Vollversion stehen auf demselben Schirm und waeren sonst verschieden
   breit. */
html.grossbild .blatt{max-width:min(1040px, 78vw)}

/* Die Schallplatte auf dem Fernseher. Zwei Aenderungen, beide aus
   demselben Grund wie oben beim Neuigkeiten-Kasten und bei der
   Bestenliste.

   Erstens die Groesse: 66vw sind auf einem 16-zu-9-Schirm fast zwei
   Drittel der Bildbreite, und 48vh stimmen hier nicht, weil der Browser
   auf dem Fire TV vh falsch meldet. Gerechnet wird darum aus
   --echte-hoehe (hoeheMessen() in js/steuerung.js).

   Zweitens der Schatten, und das ist der wichtige Teil: In der
   Handy-Fassung sitzt er als drop-shadow auf dem Rahmen und nicht auf dem
   drehenden Bild — aber auch ein Filter am Elternteil muss neu gerechnet
   werden, sobald sich darin etwas bewegt. Auf dem Stick kostet das jedes
   Einzelbild, und die Drehung ruckelt. Hier liegt deshalb gar kein Filter,
   sondern ein gemalter Schatten darunter: ein Farbverlauf, der sich nicht
   mitdreht und den niemand nachrechnen muss. */
html.grossbild .finallogo-teller{
  width:min(42vw, calc(var(--echte-hoehe, 100vh) * .46));
  filter:none; position:relative;
}
html.grossbild .finallogo-teller::after{
  content:""; position:absolute; z-index:-1;
  left:6%; right:6%; bottom:-7%; height:20%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.75), transparent 70%);
}
/* Das Wort darunter rechnet am Handy in vw. Auf dem Fernseher waeren
   sieben Prozent der Bildbreite weit ueber der Obergrenze, also staende
   es immer bei 46 Pixeln — neben einer Platte von 42vw verschwindet das.
   Hier darf es mit der Grundschrift wachsen. */
html.grossbild .finallogo-wort{ font-size:clamp(34px, 2.6vw, 72px); }

/* Die Antworten wachsen beim Fokus NICHT mit. Sieben Prozent sind bei einem
   schmalen Schaltknopf unauffaellig, bei einer Antwort von halber Bildbreite
   aber rund fuenfzig Pixel — und die ragten rechts ueber den Rand hinaus.
   Noetig ist die Vergroesserung hier ohnehin nicht: Die goldene Flaeche
   auf den blauen Nachbarn ist deutlich genug. */
html.grossbild body.navigiert .antwort:focus{
  transform:none;
  /* Auch der Leuchthof bleibt drinnen. Er stand beim Atmen bis zu elf
     Pixel nach aussen und wurde an der Kante des Antwortrasters
     abgeschnitten — ein heller Streifen, der aussah wie ein Darstellungs-
     fehler. Nach INNEN gelegt stoert er nichts und markiert genauso klar. */
  animation:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 8px 26px rgba(0,0,0,.45);
}

/* Das Logo zwischen den Fragen darf auf dem Fernseher groesser sein — dort
   ist Platz, und es fuellt die Pause, waehrend Fraenk spricht.
   Die Absicht des Originals bleibt dabei gewahrt: Es ist ein FESTES Mass,
   kein Mitwachsen mit dem freien Platz. Dort steht ausdruecklich, eine
   Marke, die bei jeder Frage anders gross waere, wirke billig — das
   stimmt, und daran aendert sich nichts. Angehoben wird nur die Klammer:
   aus 130–185 werden 180–280 Pixel.
   Die Obergrenze setzt die Aufloesung: Bei 280 Pixeln braucht ein 4K-Schirm
   560, die Datei hat 1254. Reichlich Reserve. */
html.grossbild body.spielt .bild[data-bild="spiel"] .ruhebild{
  flex:0 0 clamp(180px, 26vh, 280px);
  height:clamp(180px, 26vh, 280px);
  opacity:1;
}

/* ---------------------------------------------------------------
   Punktejagd: die falsche Antwort ist eine Flaeche, kein Rahmen
   ---------------------------------------------------------------
   Im Original markiert die Punktejagd nur mit Raendern:

       body.finalrunde .antwort.daneben{outline:3px solid var(--rot);
                                        outline-offset:-3px;opacity:.72}

   Die richtige Antwort bekommt ihr Gruen trotzdem als Flaeche — das
   kommt aus .antwort.richtig und gilt ueberall. Wer danebenlag, sah
   also eine gruen gefuellte und eine rot umrandete Taste. Zwei
   verschiedene Staerken fuer zwei gleich wichtige Aussagen.
   Auf dem Fernseher, drei Meter weg, ist der Rand kaum zu sehen.

   Jetzt dieselbe Sprache wie im Hauptspiel: Rot ist eine Flaeche.
   Das opacity faellt weg — es hat die Flaeche gedaempft, und eine
   gedaempfte Aussage ist genau das, was hier nicht gemeint ist. */
body.finalrunde .antwort.daneben{
  background:var(--rot); color:#fff; border-color:#fff;
  opacity:1;
}

/* ---------------------------------------------------------------
   Grossbild: die Aufloesung bleibt im Knopf
   ---------------------------------------------------------------
   Die richtige Antwort wuchs bei der Aufloesung auf scale(1.07) und
   legte einen gruenen Hof von 6 px nach aussen. Beides ist auf dem
   Handy unauffaellig — dort ist ein Knopf 300 px breit, und 7 %
   davon sind 20 px. Auf dem Fernseher ist derselbe Knopf 700 px
   breit, also waechst er um fast 50 px je Seite.

   Dazu kommt, dass das Antwortraster waehrend des Spiels beschnitten
   wird:

       body.spielt .bild[data-bild="spiel"] .antworten{overflow:hidden}

   Was ueber die Zelle hinausragt, wird also nicht nur gross, sondern
   abgeschnitten — die gruene Flaeche lief rechts in die Nachbarspalte
   und endete dort an einer geraden Kante.

   Statt nach aussen zu wachsen, blitzt jetzt ein heller Rand nach
   INNEN auf. Der Moment bleibt sichtbar, der Knopf behaelt seine
   Groesse, und beschnitten werden kann nichts mehr. */
html.grossbild .antwort.richtig{
  animation:treffer-innen .55s cubic-bezier(.2,1.7,.4,1) both;
}
@keyframes treffer-innen{
  0%  {box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
  35% {box-shadow:inset 0 0 0 7px rgba(255,255,255,.8), 0 8px 24px rgba(0,0,0,.4)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  html.grossbild .antwort.richtig{animation:none}
}

/* ---------------------------------------------------------------
   Grossbild: das Jagdlogo faehrt ohne Schlagschatten herein
   ---------------------------------------------------------------
   Das Logo traegt einen drop-shadow mit 40 px Weichzeichnung. Ein
   Filter wird nicht einmal gerechnet und dann mitgeschoben — er wird
   bei JEDEM Bild neu gerechnet, solange sich das Element bewegt. Die
   Einfahrt skaliert von 0,2 auf 1, und danach atmet das Logo
   einundzwanzig Sekunden lang weiter. Der Fernseher rechnet also
   dauerhaft einen weichen Schatten um eine 1254 Pixel breite Silhouette
   neu — dafuer reicht seine Grafikeinheit nicht, und die Einfahrt
   ruckelt.

   Ohne Filter ist die Bewegung eine reine Verschiebung, die die
   Grafikeinheit ohne Neuzeichnen schiebt. Der Schatten fehlt dann —
   dafuer wird der Lichtschein hinter dem Logo kraeftiger. Er liegt auf
   dem Feld, das sich nicht bewegt, und kostet darum nichts.

   will-change sagt dem Browser vorher Bescheid, dass sich dieses
   Element bewegen wird. Er legt es dann von vornherein auf eine eigene
   Ebene, statt das beim ersten Bild der Einfahrt zu bemerken. */
html.grossbild .jagdlogo{
  background:radial-gradient(ellipse at 50% 45%,
             rgba(255,200,61,.26), rgba(255,200,61,.07) 45%, transparent 68%);
}
html.grossbild .jagdlogo img{
  filter:none;
  will-change:transform;
  backface-visibility:hidden;
}


/* ---------------------------------------------------------------
   Die vier Zustaende einer Antwort, in vier Farben
   ---------------------------------------------------------------
       Ruhe     Blau
       Auswahl  Gold
       richtig  Gruen
       falsch   Rot

   Die Ruhefarbe war bisher rgba(255,255,255,.1) — ein weisser Schleier
   ueber dem Hintergrund. Die Taste hatte damit keine eigene Farbe,
   sondern nur eine aufgehellte Stelle des Hintergrunds, und sie wurde
   nach unten hin dunkler, weil der Hintergrund es wird. Auf dem
   Fernseher sah die unterste Antwort darum anders aus als die oberste,
   obwohl beide dasselbe meinen.

   Jetzt ein blauer Schleier statt eines weissen: Die Taste ist blau,
   und zwar oben wie unten dieselbe. */
.antwort{ background:rgba(23,70,150,.62) }
/* Der Buchstabenkasten trug var(--rahmen) — fast genau das Blau, das die
   Taste jetzt selbst hat. Er muss dunkler werden, sonst verschwindet er
   in der Flaeche. */
.antwort .b{ background:#0e2f6d }

/* ---------------------------------------------------------------
   Grossbild: kein Knopf waechst mehr beim Fokus
   ---------------------------------------------------------------
   Die Vergroesserung auf 107 Prozent hatte ich den Antworten schon
   abgewoehnt, weil eine Antwort von halber Bildbreite dabei rund
   fuenfzig Pixel ueber ihre Zelle hinauslief. Alle anderen Knoepfe
   wuchsen weiter — und die Punktejagd fragt ueber eigene Knoepfe,
   nicht ueber die Antwortflaechen.

   Verschieben tut das streng genommen nichts: transform liegt
   ausserhalb des Layouts, die Nachbarn bleiben stehen. Aber der Knopf
   selbst springt bei jedem Schritt eine Spur auf und wieder zu, und
   auf einem Fernseher, der zwei Meter entfernt steht, sieht das nach
   Wackeln aus und nicht nach Hervorheben.

   Noetig war es ohnehin nur, solange der Fokus blau auf blauem Grund
   lag. Eine goldene Flaeche braucht keine Groessenaenderung, um
   aufzufallen.

   Die Themenknoepfe bleiben aussen vor: Sie tragen ihren Zustand in
   der Flaeche und haben als einzige einen weissen Ring statt einer
   Fuellung. Ein Schatten nach innen wuerde den nur truebe machen. */
html.grossbild body.navigiert :is(button, label.knopf):not(.thema):focus{
  transform:none;
  animation:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5), 0 8px 26px rgba(0,0,0,.45);
}

/* „Musik aus" muss sich aus allen Fokusregeln heraushalten, und zwar
   nicht aus Geschmack: Bei ihm tragen position und transform das Layout
   und nicht die Hervorhebung. Der Knopf steht mit position:fixed auf
   left:50% und wird erst durch translateX(-50%) in die Mitte geholt.

   Drei Regeln darueber greifen ihm da hinein:
     • `body.navigiert :is(button, label.knopf):focus` setzt
       `position:relative` — damit faellt der Knopf aus der festen Lage
       zurueck in den Fluss und landet als Flex-Kind mitten im body.
       Das ist der Grund, warum er beim Anwandern aus dem Bild
       verschwindet und beim Weggehen wieder an seiner Stelle steht.
     • dieselbe Regel setzt `transform:scale(1.07)`,
     • die Linkregel `transform:scale(1.06)`, die Grossbild-Regel
       `transform:none` — jede davon loescht die Zentrierung, und der
       Knopf springt um die halbe Breite nach rechts. Nachgemessen bei
       1920 Pixeln Fensterbreite: 61 Pixel.

   Nachgemessen am 02.11.2026: ohne diese Regel wandert der Knopf beim
   Fokus von (892|1029) nach (1781|507) und macht das Dokument nebenbei um
   15 Pixel rollbar. Mit ihr bleibt er, wo er ist.

   Die dritte Angabe derselben Fokusregel ist `z-index:5`. Sie gehoert zum
   `position:relative` — ein wachsender Knopf soll ueber seinem Nachbarn
   liegen. `.musikweg` traegt aber von Haus aus 75, weil er ueber dem
   ganzen Aufbau schwebt, und die Fokusregel ist spezifischer. Nachgemessen
   am 02.11.2026: ohne Fokus 75, mit Fokus 5. In dieser Datei stehen
   Flaechen auf 50, 60, 70, 75, 80, 90 und 120 — liegt eine davon
   gleichzeitig auf dem Bild, verschwaende der Knopf beim Anwandern
   darunter. Darum steht die 75 hier noch einmal.

   Das `scale(1.07)` holen wir NICHT zurueck. Es ginge — in einer Angabe,
   `translateX(-50%) scale(1.07)`, erst verschieben, dann skalieren, sonst
   skaliert die Verschiebung mit. Noetig ist es nicht: Farbe und Unterstrich
   zeigen den Fokus, und im Grossbild waere das Wachsen ohnehin
   abgeschaltet. Ein Knopf, der an zwei Stellen unterschiedlich gross wird,
   ist mehr Erklaerung wert als er bringt.

   Der Fokus bleibt sichtbar: Die Linkregel faerbt ihn und unterstreicht
   ihn, und das genuegt — der Knopf ist ein Link, keine Flaeche. */
body.navigiert button.musikweg.link:focus,
html.grossbild body.navigiert button.musikweg.link:focus{
  position:fixed;
  transform:translateX(-50%);
  z-index:75;
  /* Flaeche UND Schrift stehen hier ausdruecklich, und zwar beide.
     Vorher ergaben sie sich aus drei Regeln, die alle auf diesen Knopf
     passen: die Knopfregel legt die goldene Flaeche, die Linkregel faerbt
     die Schrift, und welche gewinnt, haengt am Zustand. Auf dem Fernseher
     kam dabei Weiss auf Gold heraus — 1,44 zu 1, auf zwei Meter Abstand
     nicht zu lesen (gemeldet am 03.11.2026 aus dem echten Spiel).

     Das Blau ist Karls Wahl, getroffen am 03.11.2026 nach einem Vergleich
     der drei Moeglichkeiten. Nachgerechnet: Weiss 1,44 zu 1, Blau 5,09 zu
     1, das Dunkelbraun der uebrigen goldenen Flaechen 11,50 zu 1. Blau
     liegt damit ueber der Schwelle von 4,5, ab der Text als lesbar gilt,
     und es ist var(--rahmen) — kein neuer Farbton, sondern der, der im
     Spiel ohnehin die Buchstabenkaesten traegt. */
  background:var(--fokus);
  color:var(--rahmen);
  font-weight:800;
  opacity:1;
}

/* Hinweise, die nur auf dem Fire TV stimmen. Die Kennung setzt
   js/steuerung.js anhand der Geraetekennung; auf dem Rechner und in der
   spaeteren Steam-Fassung bleibt der Absatz weg. */
.nur-feuertv{display:none}
html.feuertv .nur-feuertv{display:block}

/* Umgekehrt: was auf dem Fire TV *nicht* geht. Das Sichern schreibt eine
   Datei heraus und liest eine wieder ein. Beides braucht in einer
   WebView-Huelle erst einen Download-Horcher und einen Dateiwaehler, und
   selbst dann gibt es auf einem Fernseher keinen Ort, an dem die Datei
   jemandem nuetzt — kein Dateimanager, kein Weg zu einem anderen Geraet.
   Ein Knopf, der sichtbar nichts tut, ist schlimmer als keiner.

   Verloren ist dadurch wenig: Die Vollversion haengt am Amazon-Konto und
   ist nach einer Neuinstallation von selbst wieder da, nur Bestenliste und
   Merkliste bleiben auf dem Stick. In der spaeteren Steam-Fassung darf das
   Sichern bleiben — Electron kommt an Dateien heran. Darum haengt die Regel
   an `feuertv` und nicht an `grossbild`. */
html.feuertv .ohne-feuertv{display:none}


/* ───────────────────────────────────────────────────────────────
   Punktejagd: die Antwortflaechen behalten ihr Format
   ───────────────────────────────────────────────────────────────
   Am laufenden Spiel gemessen: Die Flaechen sprangen beim Antworten von
   193 auf 147 Pixel und danach wieder zurueck.

   Der Grund steht in den berechneten Werten von .antworten:
   flex:1 1 auto und grid-auto-rows:minmax(…, 1fr). Die Reihen dehnen sich
   also auf alles, was in der Spalte uebrig bleibt — und genau dieser Rest
   aendert sich im Moment der Antwort, weil die Uhr verschwindet und der
   Punktestand erscheint. Die Antwortflaechen waren der Stossdaempfer fuer
   jede Hoehenaenderung ringsum.

   Mit einer festen Reihenhoehe landet der Unterschied dort, wo ihn niemand
   sieht: als Luft um die Flaechen herum. Acht em sind bewusst etwas knapper
   als die bisherigen 193 Pixel — sie muessen auch in den engeren Zustand
   nach der Antwort passen, sonst waere der Sprung nur umgedreht.

   Nur fuer die Punktejagd: Dort sind es immer zwei Flaechen in einer Reihe.
   Im Hauptspiel koennen es vier sein, und vier feste Reihen wuerden den
   Bildschirm sprengen. */
html.grossbild body.finalrunde .bild[data-bild="spiel"] .antworten{
  grid-auto-rows:8em;
  align-content:center;
}

/* ───────────────────────────────────────────────────────────────
   Grossbild: auch die falsche Antwort wackelt nicht mehr
   ───────────────────────────────────────────────────────────────
   Dem Treffer hatte ich das Wachsen schon abgewoehnt; das Zittern der
   falschen Antwort lief noch. Beides sind transform-Animationen, und die
   haben eine Nebenwirkung, die man nicht sofort einem Wackler zuschreibt:
   Fuer die Bewegung legt der Browser das Element auf eine eigene Ebene und
   schaltet dabei die Kantenglaettung der Schrift um. Dieselbe Schrift wirkt
   dadurch waehrend der Animation duenner und danach wieder normal — im
   Spiel sieht das aus, als wechsle die Schriftstaerke.

   Die Schriftstaerke selbst aendert sich nie: .antwort traegt durchgehend
   font-weight:700, nachgemessen in jedem Zustand. Es ist reine Darstellung
   — und sie verschwindet, sobald sich nichts mehr bewegt.

   Statt zu zittern blitzt die Flaeche jetzt nach innen rot auf, in
   derselben Machart wie treffer-innen beim Treffer. */
html.grossbild .antwort.falsch{
  animation:daneben-innen .45s ease-out both;
}
@keyframes daneben-innen{
  0%  {box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
  30% {box-shadow:inset 0 0 0 7px rgba(255,255,255,.75), 0 8px 24px rgba(0,0,0,.4)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  html.grossbild .antwort.falsch{animation:none}
}

/* ---- Die Buehne steht still, auch wenn der Rollbalken kommt und geht ----
   Die Buehne ist 78vw breit und wird vom body mittig gestellt. Beides
   rechnet gegen verschiedene Masse, sobald ein Rollbalken auftaucht: Der
   Balken nimmt fuenfzehn Pixel Breite weg, die Mitte wandert um gut sieben
   Pixel nach links, und die Buehne wird zwoelf Pixel schmaler. Weil die
   Hoehe der Sprechblase von Satz zu Satz wechselt, erscheint und
   verschwindet der Balken staendig — und das Bild ruckt bei jedem Satz
   seitwaerts.
   Der Platz fuer den Balken wird deshalb dauerhaft freigehalten, ob er
   gebraucht wird oder nicht. Am Fernseher und am Handy kostet das nichts:
   dort liegen die Balken ueber dem Inhalt und sind null Pixel breit. */
/* HIER STAND `#antworten{min-height:min-content}` — am 06.11.2026 eingebaut,
   gemessen und wieder HERAUSGENOMMEN. Aufgeschrieben, damit es niemand
   erneut einbaut, ohne die Zahlen zu kennen.

   Der Anlass: Auf kurzen Schirmen klemmt die Antwortflaeche ihren Inhalt.
   Sie ist ein Grid mit `overflow:hidden auto` und `flex:1 1 auto`; steht
   darueber viel, drueckt der Flex-Umbruch sie zusammen, und weil sie in
   sich rollt, schluckt sie den Ueberstand statt ihn weiterzureichen.
   Niemand meldet einen Ueberlauf, die untersten Antworten sind weg.

   Gemessen bei 374x500 mit vier langen Antworten:

     ohne die Zeile   #antworten 136 hoch, 207 Inhalt -> 71 geklemmt
                      .steuerung 455..492 -> im Bild
     mit der Zeile    #antworten 258 hoch, 258 Inhalt -> 0 geklemmt
                      .steuerung 577..614 -> AUS DEM BILD

   Die Zeile allein repariert also nicht, sie TAUSCHT: abgeschnittene
   Antworten gegen eine Schalterreihe, die aus dem Bild rutscht (Pause, Ton,
   Neustart, Abbrechen). `min-content` auf `.bild` statt auf `#antworten`
   macht es nicht besser (dann ist `.bild` 606 hoch).

   MEIN SCHLUSS DARAUS WAR FALSCH, und das gehoert hierher, damit niemand
   ihn weitertraegt: Ich hatte geschrieben, bei 374x500 sei fuer Frage,
   vier lange Antworten UND die Schalterreihe einfach kein Platz. Die
   Niche-Sitzung hat am 06.11.2026 das Gegenteil gemessen — mit ZWEI
   weiteren Aenderungen passt alles: Zoom 0,703, Buehnenhoehe 688, alle
   vier Antworten ganz im Bild, Schalterreihe vollstaendig sichtbar.

   Was mir gefehlt hat, sind diese zwei:

   (3) ES RUFT NIEMAND. Der ResizeObserver haengt nur an `#buehne`, und die
       ist so hoch wie das Fenster — ihre Kante aendert sich waehrend einer
       Frage nie. Die Antworten kommen aber erst, waehrend Hilary noch
       redet, lange nach dem Bildwechsel, der passeAn() zuletzt gerufen hat.
       `#antworten` muss mitbeobachtet werden.

   (4) DIE BUEHNE SCHRUMPFT NICHT MIT. `body.spielt #buehne{height:calc(
       100dvh - ...)}` — `dvh` ist der Sichtschirm, und den verkleinert der
       Zoom nicht. Verkleinert blieb die Buehne also auf 500 Zeilenpunkten
       stehen, wurde kleiner gezeichnet und mittig gesetzt: oben ein leerer
       Streifen, unten fiel die Schalterreihe heraus. GENAU DAS waren meine
       gemessenen 577. passeAn() muss die Hoehe mitsetzen, und zwar aus
       `eigene/zoom`, nicht aus `platz/zoom` — sonst fehlen die Polster des
       body und die Reihe steht elf Punkte zu tief. Die Hoehe muss VOR dem
       Messen zurueckgenommen werden, sonst misst der naechste Durchgang die
       eigene Zugabe mit und die Buehne waechst bei jedem Lauf.

   Und die Verkleinerung aus passeAn() kann es nicht loesen: Jeder Zoom
   macht die Klemme GROESSER, monoton — 0,9 ergab 24 Pixel, 0,823 dann 42,
   0,6 schliesslich 95. Der Grund ist, dass die Schriftgroessen an
   Fensterbreite und -hoehe haengen (clamp mit vw/vh) und beim Zoomen NICHT
   mitschrumpfen; der Text bricht neu um und wird relativ hoeher.

   Entscheidend fuer DIESE Fassung: Auf dem Fernseher, 1920x1080, sind die
   Zahlen mit und ohne die Zeile Zeichen fuer Zeichen gleich — 345 zu 345,
   nichts geklemmt, Schalterreihe bei 999..1048 im Bild. Die Zeile bringt
   auf dem Zielgeraet also NICHTS und schadet nur im kleinen Fenster.
   Darum ist sie draussen.

   Wer sie fuer eine Handy-Ausgabe braucht, wo 374x500 ein echtes Geraet
   ist: Dort ist zuerst zu entscheiden, WAS auf kurzen Schirmen weichen
   soll — und das ist eine Gestaltungsfrage fuer Karl, keine fuer eine
   Sitzung. Messwerkzeug: werkzeuge/browser-abgeschnittene-antworten.cjs */

html{ scrollbar-gutter:stable; }


/* 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,#081b43eb,#18396fdb);
  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:#bbd4ff}
.show-pips{display:flex;gap:3px;flex-shrink:0}
.show-pips i{width:9px;height:13px;border:1px solid #7191c6;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:#17365f;color:#afc6e8;border-color:#50729b;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:#c0d0ea}
.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 #6b90c355;font-size:.76rem;line-height:1.4;color:#c5d8f4;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}
  /* DREI KLASSEN, nicht zwei. Mit `body.spielt .show-moment` verliert diese
     Regel gegen die am Dateiende (`body.spielt .show-extras .show-moment`),
     und die Hinweiszeile bleibt im Querformat 2,8em hoch. Gemessen bei
     740x420: 29 Punkte statt der gewollten 15 — verschenkt genau dort, wo
     am wenigsten Platz ist. Hinweis der Niche-Fragrances-Sitzung, die
     denselben Fall bei sich hatte. */
  body.spielt .show-extras .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}
  body.spielt .bild[data-bild="spiel"]>.punktezeile{grid-column:2;grid-row:1;justify-content:flex-end}
  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}
  /* Die Abrechnung hat hier keine eigene Platzangabe mehr: Sie sitzt im
     Kasten .punktezeile und wandert mit ihm nach oben rechts. Vorher stand
     hier `>.rechnung{grid-column:1;grid-row:5}` — tot, seit sie kein
     direktes Kind mehr ist. Fund der Nischenduft-Sitzung. */
  /* HIER STAND: .was{display:none}. Das war richtig, solange `.was` das
     WORT trug („Richtig", „45 Sek. uebrig") und im Querformat der Platz
     fehlte. Seit dem 07.11.2026 steht dort das ZEICHEN — ✅ ⏱️ 🚀 —,
     und ohne das bliebe eine nackte Zahl ohne jeden Hinweis, wofuer sie
     ist. Die Zeile ist deshalb raus. Platz macht stattdessen die
     Staffelung nach Anzahl weiter oben. */
  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:#bfd4f6;text-wrap:balance}
@media(max-height:760px){
  /* DIE ABZEICHENZEILE BLEIBT STEHEN. Sie verschwand hier, sobald eine
     Antwort dastand — und weil das Antwortfeld den freien Platz aufsaugt,
     wuchsen die zwei grossen Ja/Nein-Flaechen dabei um 33 Punkte und
     rutschten 33 nach oben. Gemessen am 06.11.2026 bei 374x667.
     Karl: „Wenn die Optik sich so massiv ändert nur weil man gedrückt hat
     sieht das aus wie ein Fehler." Die 28 Punkte, die das Ausblenden
     spart, sind diesen Sprung nicht wert.
     Der Hinweissatz bleibt dagegen ausgeblendet, solange keine Antwort da
     ist — er erscheint erst zur Auflösung und nimmt vorher keinen Platz. */
  /* DER HINWEISSATZ BLEIBT STEHEN. Er war hier versteckt, bis eine Antwort
     dastand — und tauchte dann auf: 16 Punkte, die das Antwortfeld
     verliert, bei jeder Auflösung. Gemessen von der Fahrzeugwelten-Sitzung,
     hier nachgemessen: +16/-16 ab 390 Punkten Breite. Dieselbe Bewegung wie
     beim Ausblenden der Abzeichenzeile, nur halb so groß — und nach Karls
     Regel genauso falsch.
     Hier steht deshalb KEINE eigene Regel mehr: Die Höhe setzt die Regel am
     Dateiende für alle Zustände gleich. Eine Regel hier wäre tot (gleiche
     Gewichtung, frühere Zeile) und brächte nur jemanden auf die Idee, sie
     zu „reparieren". */
  /* 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}
.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,#071b35ed,#103e57ed);text-align:left}
.punkteserie-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.75rem;color:#c5eaff}
.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:#030e27;border-radius:99px;overflow:hidden}
.punkteserie-spur>i{height:100%;width:0;display:block;border-radius:99px;
  background:linear-gradient(90deg,#65d4fa,#ffce54);transition:width .25s ease-out}
.punkteserie>p{font-size:.67rem;line-height:1.25;margin-top:4px;color:#c4def0;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}
}

/* ---------- Die vier Hilfen ----------
   Vorher standen hier ZWEI Knoepfe, jetzt sind es vier. Deshalb darf die
   Reihe umbrechen: Bei 374 Punkten Breite passen vier Beschriftungen wie
   „Doppelchance · 2/4" nicht mehr nebeneinander, und ein `flex-shrink:0`
   haette sie aus dem Bild geschoben, statt sie umzubrechen. */
/* Nur noch ZWEI Knoepfe. Vier nebeneinander ergaben auf dem Telefon ein
   gedraengtes Zweier-Raster; der Umbruch bleibt trotzdem stehen, weil
   „Doppelchance" ein langes Wort ist und die Reihe neben dem Spielernamen
   steht. */
.show-ressourcen{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}

/* Zeitbonus und Schutzschild 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. */
.show-selbst{color:#c0d0ea}
.show-selbst.geschafft{color:var(--gold);font-weight:800}
.show-selbst.weg{color:#8aa3c8}

/* Die Quittung auf den Klick: „Eingesetzt" 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 Doppelchance: 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 Doppelchance: NICHT wie eine Loesung aussehen lassen.
   Gruen wuerde „richtig" heissen, und aufgeloest ist noch nichts. Also nur
   ein Rahmen und ein Haken-Platz. */
.antwort.doppel-gewaehlt{outline:3px solid 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 #1a4fa033}
@media(max-width:540px){
  .show-extras .show-name{display:none}
  .show-ressourcen .show-joker{font-size:.62rem;padding:5px 7px;min-height:32px}
  .show-ressourcen{gap:4px}
  .show-extras .show-serie{font-size:.7rem;gap:5px}
}
/* Das nächste Serienziel bleibt auch auf kleinen Displays lesbar — und in
   ALLEN Zuständen gleich hoch, damit beim Antworten nichts springt. */
body.spielt .show-extras .show-moment{display:block;min-height:2.8em}

/* Im Querformat reicht eine Zeile, der Platz ist dort knapp. Diese Regel
   muss NACH der oberen stehen: Sie hat dieselbe Gewichtung (drei Klassen),
   und bei gleicher Gewichtung gewinnt die spätere Zeile — eine
   Medienabfrage zählt dabei NICHT mit.
   Ich hatte es zuerst oben im Querformat-Block versucht und die Gewichtung
   angeglichen. Hat nichts geändert, weil die Regel hier später steht:
   gemessen bei 740x420 weiterhin 29 statt 15 Punkte. Gefunden hat den Fall
   die Niche-Fragrances-Sitzung; dass mein erster Versuch danebenging, hat
   erst die Nachmessung gezeigt. */
@media(max-height:560px) and (orientation:landscape){
  body.spielt .show-extras .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}}

/* Zurueck und Ueberspringen liegen fest unten links statt im Fluss. Im Fluss
   machten sie die Stufenseite auf 320x568 um 42 Pixel zu hoch — der Knopf
   stand dann bei top 567 von 568, also unterhalb des Bildrands, und die
   Buehne fing an zu scrollen. Unten links kosten sie keine Hoehe und
   kollidieren nicht mit der mittig liegenden Pille „Musik aus"
   (die steht von 110 bis 210 bei 320 Pixel Breite). */
/* `max(14px, env(...))` wie an den vier anderen festen Stellen im Blatt:
   auf Geraeten mit Gestenleiste rutscht der Knopf sonst darunter. Hier
   stand nur `14px` — kein Fehler, den man sieht, solange niemand mit
   Leiste testet. Hinweis von der Niche-Fragrances-Sitzung, 07.11.2026. */
.bild > .knopf.leise.zurueck,
.bild > #stufeSkip{position:fixed;left:12px;
  bottom:max(14px, env(safe-area-inset-bottom));margin:0;z-index:5}


/* ══════════════════════════════════════════════════════════════
   DIE FERNSEH-SCHICHT, TEIL 2 — und die Show-Hilfen
   ══════════════════════════════════════════════════════════════
   Dieselbe Vorlage, Zeilen 2497 bis 2777. Steht hier unten, weil sie den
   Block mit den Show-Hilfen darueber ueberschreibt — genau wie in der
   deutschen Fassung. Die Reihenfolge ist also nicht beliebig.
   ══════════════════════════════════════════════════════════════ */

/* Und hier die Fernsehfassung dazu.

   Die Frageschrift bleibt auf dem Fernseher gross. Das Hauptspiel hat sie
   am 05.11.2026 verkleinert — von clamp(1.05rem,4.2vw,1.7rem) auf
   clamp(.98rem,3.7vw,1.4rem) —, um auf einem Handy Platz fuer die neue
   Knopfreihe zu gewinnen. Auf dem Fernseher zaehlt der Deckel: bei 22px
   Grundschrift sind 1.7rem gleich 37px und 1.4rem nur noch 31px. Sechs
   Pixel weniger auf drei Meter Entfernung sind kein Platzgewinn, sondern
   eine schlechter lesbare Frage. Die Hoehe ist hier auch nicht knapp — ein
   1080p-Schirm hat sie, ein Handy im Querformat nicht. */
html.grossbild body.spielt .frage{--fragenschrift:clamp(1.05rem,4.2vw,1.7rem)}

/* Die Belohnungsmeldung steht ueber der Bildmitte und ist auf dem
   Fernseher die wichtigste neue Anzeige. Mit der Grundschrift von 22px
   waechst sie von selbst mit; nur der Rand muss weiter weg vom Bildrand
   bleiben, weil Fernseher dort abschneiden. */
html.grossbild .show-belohnung{font-size:1.15rem;padding:.5rem 1.1rem}
html.grossbild .show-extras{max-width:none}

/* v232-lokal: feste Spielspuren. Punkte und Hilfen links, Spielfeld rechts.
   Keine DOM-Verschiebung: Spielzustand, Ereignisse und Fokus bleiben erhalten.
   hidden darf die Größe der Spuren nicht ändern. Nur das Spielbild nutzt
   dieses Raster; Anleitung und übrige Seiten behalten ihre Darstellung. */
html.spielraster:not(.grossbild){font-size:clamp(12px,min(1.4vw,2.3vh),20px)}
html.spielraster.steht{scrollbar-gutter:auto;background:var(--blau-tief)}
html.spielraster body.spielt{
  height:var(--echte-hoehe,100dvh); min-height:0; overflow:hidden;
}
html.spielraster body.spielt #buehne{
  max-width:100%;
  height:calc(var(--echte-hoehe,100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
html.spielraster.grossbild body.spielt #buehne{
  height:calc(var(--echte-hoehe,100dvh) - 2 * var(--tv-polster));
}
/* Untertitel gehören zum Spiel. Ein fester Platz verhindert, dass der
   Kommentar nach einer Antwort das gesamte Spielfeld zusammenschiebt. */
html.spielraster body.spielt #sprechblase{
  flex:0 0 8rem;height:8rem;min-height:8rem;max-height:8rem;
  margin:0 0 .5rem;padding:.6rem .8rem;overflow-y:auto;
}
html.spielraster body.spielt #sprechblase[hidden]{display:flex!important;visibility:hidden}
html.spielraster body.spielt #sprechblase .gesagt{
  font-size:1.05rem;line-height:1.35;min-height:0;max-height:none;height:auto;overflow:visible;
}
html.spielraster body.spielt #sprechblase .gesicht{width:3rem}
html.spielraster body.spielt .bild[data-bild="spiel"]{
  display:grid; width:100%; height:100%; min-height:0;
  grid-template-columns:minmax(0,24fr) minmax(0,76fr);
  /* Zeile 6 traegt den Ueberspringen-Knopf und ist seit dem 07.11.2026
     `minmax(2rem,auto)` statt fest `2rem`. Fest hiess: Ist der Knopf
     hoeher als seine Zeile, laeuft er mittig ueber — die Haelfte nach
     oben, die Haelfte nach UNTEN in die Schalterreihe. Genau das hat Karl
     auf dem 55-Zoeller fotografiert. Mit `auto` waechst die Zeile
     stattdessen mit, und der Platz dafuer kommt aus Zeile 4 (1fr). */
  grid-template-rows:1.6rem 4.4rem 2.8rem minmax(0,1fr) 2.2rem minmax(2rem,auto) 2.8rem;
  gap:max(5px,.5rem) 1.4rem; align-items:stretch; justify-items:stretch;
}
html.spielraster body.spielt .bild[data-bild="spiel"]>.leiste{grid-column:2;grid-row:1;align-self:center}
html.spielraster body.spielt #dran{display:none}
html.spielraster body.spielt #konten{
  grid-column:1;grid-row:1 / 3;align-self:stretch;display:grid;grid-template-columns:1fr;
  grid-template-rows:repeat(4,minmax(0,1fr));gap:max(5px,.5rem);min-height:0;
}
html.spielraster body.spielt .konto{
  min-width:0;min-height:0;padding:0 .5rem;font-size:.85rem;line-height:1.2;
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
}
html.spielraster body.spielt .konto b{font-size:.85rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.spielraster body.spielt .konto .punkte{font-size:1rem;flex-shrink:0}
html.spielraster body.spielt #showExtras,
html.spielraster body.spielt #punkteserie{
  grid-column:1;grid-row:3 / 5;align-self:start;max-width:none;min-width:0;
  padding:.6rem .8rem;border-radius:.8rem;text-align:left;
}
html.spielraster body.spielt #showExtras{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
html.spielraster body.spielt .show-oben{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
html.spielraster body.spielt .show-serie{flex-wrap:wrap;font-size:.9rem;gap:.4rem}
html.spielraster body.spielt .show-name{display:block;width:100%;overflow-wrap:anywhere}
html.spielraster body.spielt .show-missionen{display:flex;flex-direction:column;gap:.25rem;white-space:normal;font-size:.8rem}
html.spielraster body.spielt .show-moment{font-size:.85rem;line-height:1.35;min-height:2.7em;margin:0}
html.spielraster body.spielt .show-ressourcen{order:0;margin:0;display:grid;grid-template-columns:1fr;gap:.5rem}
html.spielraster body.spielt .show-joker{font-size:.9rem;min-height:2.5rem;white-space:normal}
html.spielraster body.spielt .punkteserie-kopf{flex-wrap:wrap;font-size:.9rem}
html.spielraster body.spielt .punkteserie>p{font-size:.9rem;line-height:1.4;min-height:5.6em}
html.spielraster body.spielt #uhr{grid-column:2;grid-row:3;align-self:start;margin:0;height:.6rem;min-height:.6rem}
html.spielraster body.spielt #frage{
  grid-column:2;grid-row:2;align-self:stretch;height:100%;min-height:0;
  --fragenschrift:1.7rem;font-size:var(--fragenschrift);line-height:1.25;
  margin:0;display:flex;align-items:center;
}
html.spielraster body.spielt #antworten{
  grid-column:2;grid-row:4;align-self:stretch;height:100%;min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:minmax(0,1fr);gap:.65rem;overflow:visible;
}
html.spielraster body.spielt #antworten .antwort{
  min-height:0;min-width:0;padding:.7rem .8rem;font-size:1.2rem;
}
html.spielraster body.spielt #schaetzen{grid-column:2;grid-row:4;align-self:center}
/* max-height 85 statt 100 Prozent. Gemessen am 07.11.2026 bei 960x540, in
   der Phase „WILLKOMMEN!": Das Logo war 305x305 und endete bei 449, der
   Knopf „Regeln ueberspringen" begann bei 455 — SECHS Pixel dazwischen.
   Die Kaesten ueberlappten sich also nicht, aber das Logo ist eine
   Bilddatei mit Rand um die Zeichnung, und auf einem 70-Zoll-Schirm sieht
   das aus wie Beruehrung. Karl hat es genau so gemeldet.
   Das Logo steht mittig in seinem Feld, der gewonnene Platz faellt also
   zur Haelfte nach oben und zur Haelfte nach unten. Das ist gewollt: So
   bleibt es auf einer Achse mit der Ueberschrift. */
html.spielraster body.spielt #ruhebild{grid-column:2;grid-row:2 / 6;align-self:center;justify-self:center;max-height:85%;max-width:70%;height:auto}
html.spielraster body.spielt #finalfrage,
html.spielraster body.spielt #typhinweis{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;font-size:.9rem}
html.spielraster body.spielt #aufloesung{grid-column:2;grid-row:5;align-self:center;font-size:1rem}
html.spielraster body.spielt #rechnung{
  grid-column:1;grid-row:5 / 8;align-self:start;display:flex;flex-direction:column;
  align-items:stretch;gap:max(5px,.5rem);min-height:0;font-size:.85rem;
}
html.spielraster body.spielt #rechnung .posten{padding:.25rem .5rem;border-radius:.4rem}
/* DER ABSTANDHALTER UEBER DER SCHALTERREIHE. Karl am 07.11.2026, mit zwei
   Fotos vom 70- und vom 55-Zoeller: „Die Pille ueberlappt die ganze Zeit
   schon. Nicht das Logo." Und: „Mach doch einfach einen Abstandhalter ueber
   das Menue." — „Ich sag doch die ganze zeit hoeher."
   Zusammen mit `minmax(2rem,auto)` auf Zeile 6 wirkt das so: Die Zeile
   waechst um die 2rem, ihr Fuss steht fest (Zeile 7 haengt am unteren Rand),
   also wandert ihr Kopf — und mit ihm die Pille — um volle 2rem nach oben.
   Ein fester Rand am Knopf allein haette nicht gereicht: In einer Zeile mit
   fester Hoehe laeuft ein zu hoher Knopf MITTIG ueber, die Haelfte nach
   unten in die Schalter. Erst die mitwachsende Zeile macht den Abstand
   unverlierbar. */
html.spielraster body.spielt #erklaerWeiter{grid-column:2;grid-row:6;align-self:center;justify-self:center;margin:0 0 2rem;font-size:.9rem}
html.spielraster body.spielt .notenplatz{grid-column:2;grid-row:7;align-self:end}
/* Die Schalterreihe steht fest am Fuss ihrer Zeile. Zusammen mit der auf
   4.8rem erhoehten Zeile 7 bleiben daruber 2rem leer — der Abstandhalter,
   den Karl am 07.11.2026 verlangt hat. Er kann nicht wegfallen: Die Zeile
   ist fest, die Reihe haengt an ihrem unteren Rand, und was dazwischen
   liegt, gehoert niemandem. */
html.spielraster body.spielt .steuerung{padding:0;gap:.5rem;flex-wrap:nowrap;grid-column:2;grid-row:7;align-self:end}
html.spielraster body.spielt .steuerung .knopf{padding:.5rem .8rem;font-size:.85rem}

/* FINGERGROESSE FUER DIE SCHALTERREIHE. Gemessen am 06.11.2026 gegen die
   Live-Adresse auf echten Fire-Tablet-Massen, mit Tablet-Kennung und
   Fingerbedienung:

     1280x800   ?tv=1   kleinster Schalter 32 px
     1280x800   ?tv=0   kleinster Schalter 36 px
     1920x1200  ?tv=0   kleinster Schalter 40 px
     1920x1200  ?tv=1   kleinster Schalter 48 px

   Apple nennt 44 Punkte als Untergrenze fuer eine Fingerflaeche, Google 48.
   Die Antwortkacheln sind mit 115 bis 367 Pixeln ueberall weit darueber —
   diese kleine Reihe aber nicht, und dort sitzen Pause, Ton, Neustart,
   Abbrechen und der Notausgang zum Neuladen.

   `pointer: coarse` trifft genau die Geraete, die mit dem Finger bedient
   werden. Ein Fernseher mit Fernbedienung meldet `fine` oder gar nichts und
   bleibt deshalb unberuehrt: Dort ist die Reihe seit der Fernsehreparatur
   genau so hoch, wie sie ins Bild passt, und 48 Pixel wuerden sie dort
   wieder aufblaehen. Die Breite waechst ueber das Polster, nicht ueber
   min-width — das dachte ich zuerst, und es war falsch. Erst stand hier nur
   min-height, danach passten drei der vier Faelle. Der vierte blieb bei 39
   Pixeln: Das waren `♪` und `↻`, zwei einzelne Zeichen mit 32 Pixeln Polster
   drumherum — also 48 hoch und 39 breit. Ein Finger trifft nach BEIDEN
   Massen, nicht nur nach dem groesseren. Die Mindestbreite betrifft nur
   diese beiden Knoepfe, die vier beschrifteten sind ohnehin breiter, und die
   Reihe steht im Raster auf nowrap. */
@media (pointer: coarse) {
  body.spielt .steuerung .knopf,
  html.spielraster body.spielt .steuerung .knopf{
    min-height:48px; min-width:48px; padding-left:1rem; padding-right:1rem;
    display:inline-flex; align-items:center; justify-content:center;
  }
}

/* TV: keine Bewegung der gesamten Bühne, keine dauerhaft animierten
   Scheinwerfer/Strahlen. Rückmeldung bleibt über Farbe und kurze Effekte. */
html.grossbild body.einschlag{animation:none}
html.grossbild body.finalrunde::before,
html.grossbild body.finalrunde::after,
html.grossbild .finalpunkte .zeile::before{animation:none}
html.grossbild .jagdlogo img{animation:jagdlogoRein .55s ease-out both;will-change:auto}
html.grossbild .jagdlogo.geht img{animation:jagdlogoRaus .35s ease-in both}
html.grossbild .antwort.richtig,
html.grossbild .antwort.falsch{animation:none}
@media(prefers-reduced-motion:reduce){
  html.grossbild .jagdlogo img{animation:none}
}

/* DER ABSCHNITTSTITEL AUF DER FREIEN LINKEN FLAECHE.
   v233 hat ihn eingefuehrt, v235 passt ihn ein. Karl am 06.11.2026:
   „Diesen leeren Platz einfach nutzen, teile das Bild in Gedanken. Links
   gibt es dann eine Mitte von oben und unten. Der Mittelpunkt ist die
   Mitte. Zentriert. Und ein wenig den Space nutzen!"

   Gilt in BEIDEN Zustaenden — waehrend der Ansagen am Anfang, wo noch kein
   Konto steht, und waehrend der Ueberleitungen, wo die Konten oben links
   schon stehen. Vorher waren das zwei Regeln mit zwei Groessen; der Titel
   sprang dadurch beim ersten Konto von gross nach klein und von der Mitte
   nach unten. Eine Regel, eine Groesse, eine Hoehe.

   DAS LOGO BLEIBT, WO ES IST. Ein Anlauf stellte die Spalten hier auf halb
   und halb — der Titel hatte Platz, aber das Logo rutschte 110 Pixel nach
   rechts an den Rand. Karl: „die Ueberschrift soll nicht das LOGO
   wegdrucken!" Die Spalten bleiben deshalb auf 24 zu 76, und der Titel legt
   sich als eigenes Rasterfeld ueber beide:

     grid-column 1 / 3   ueber die ganze Breite gespannt,
     justify-self start  linksbuendig am Sicherheitsrand,
     width 45%           und dort zu Ende, wo das Logo anfaengt.

   Gemessen bei 960x540: Buehne 864 breit, 45 Prozent davon sind 389, das
   Logo beginnt bei 437 — der Titel stoesst also genau an, ohne das Logo zu
   beruehren. Das sind fast doppelt so viele Pixel wie die 204 der linken
   Spalte.

   grid-row 1 / 8 mit align-self center setzt ihn auf die Mitte der ganzen
   Hoehe statt auf die Mitte des Restes unter den Konten: damit liegt er auf
   einer Achse mit der Mitte des Logos. Die Konten enden bei 215, der Titel
   steht einzeilig um 317 — dazwischen bleiben rund achtzig Pixel.

   WANN NICHT: Sobald Joker, Punkteserie oder Abrechnung sichtbar sind,
   gehoert die linke Spalte ihnen, und der Titel wuerde darueberliegen.
   Waehrend der Ueberleitungen sind alle drei aus — nachgemessen, nicht
   angenommen. Die drei :not() sorgen dafuer, dass es dabei bleibt, auch
   wenn spaeter ein Ablauf eines davon frueher einblendet. */
html.spielraster body.spielt .bild[data-bild="spiel"]:has(#ruhebild:not([hidden])):not(:has(#showExtras:not([hidden]))):not(:has(#punkteserie:not([hidden]))):not(:has(#rechnung:not([hidden])))::before{
  content:attr(data-phase);
  grid-column:1 / 3;grid-row:1 / 8;
  justify-self:start;align-self:center;width:45%;
  /* Von clamp(1.4rem, 3vw, 2.6rem) hoch, so weit die 45 Prozent tragen:
     bei 960 Pixeln sind 4.6vw rund 44 Pixel, bei 1920 rund 88. */
  /* 07.11.2026 um 15 Prozent zurueckgenommen, zusammen mit dem Logo:
     aus 1.6/4.6/4.2 werden 1.36/3.91/3.57. Karl: „ich sag ja 15%
     zurueck. Beides den satz und das logo". */
  color:var(--gold);font-size:clamp(1.36rem,3.91vw,3.57rem);font-weight:900;
  line-height:1.08;text-align:center;overflow-wrap:normal;
  -webkit-text-stroke:.06em #241a00;paint-order:stroke fill;
  text-shadow:0 .09em 0 #8a5a00;transform:rotate(-3deg);
}

/* Ergebnis: Punkteliste links, großes unverändertes Logo rechts. */
html.spielraster .bild[data-bild="ergebnis"]{
  height:calc(var(--echte-hoehe,100dvh) - 32px);
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  gap:max(5px,.6rem) 1.5rem;align-items:center;
}
html.spielraster.grossbild .bild[data-bild="ergebnis"]{
  height:calc(var(--echte-hoehe,100dvh) - 2 * var(--tv-polster));
}
html.spielraster .bild[data-bild="ergebnis"]>.abspann-logo{
  grid-column:2;grid-row:1 / 4;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;object-fit:contain;
}
html.spielraster .bild[data-bild="ergebnis"]>h2{grid-column:1;grid-row:1;color:var(--gold)}
html.spielraster #urteilZeile{grid-column:1;grid-row:2}
html.spielraster #rangliste{grid-column:1;grid-row:3;width:100%;max-width:none;max-height:100%;overflow-y:auto;align-self:start;min-height:0}
html.spielraster #perfektBanner{grid-column:2;grid-row:4;margin:0}
html.spielraster #liedWeiter{grid-column:1;grid-row:4}
html.spielraster #abspannKnoepfe{grid-column:1 / -1;grid-row:5;justify-content:center}
html.spielraster #proHinweis{grid-column:1 / -1;grid-row:6;margin:0;font-size:.8rem}
html.spielraster #abspannKnoepfe .gross{flex:0 1 auto;padding:.8rem 1.4rem}
html.spielraster #proHinweis{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;padding:.8rem 1rem;text-align:left}
html.spielraster #proHinweis>b{grid-column:1;grid-row:1}
html.spielraster #proHinweis>span{grid-column:1;grid-row:2;max-width:none}
html.spielraster #proHinweis>button{grid-column:2;grid-row:1 / 3}

/* v234: vier Hilfen in zwei festen Reihen statt einer wachsenden Liste. */
.show-ressourcen,
html.spielraster body.spielt .show-ressourcen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:max(5px,.5rem);min-width:0}
html.spielraster body.spielt .show-ressourcen .show-joker{
  width:100%;min-width:0;height:3.5rem;min-height:3.5rem;padding:.3rem;
  font-size:.8rem;line-height:1.2;white-space:normal;overflow-wrap:anywhere;
}
.show-schutz,.show-zeit{display:flex;align-items:center;justify-content:center;cursor:default;background:#17365f;color:#afc6e8;border-color:#50729b;text-align:center}
.show-schutz.bereit,.show-zeit.bereit{background:var(--gold);color:#20160a;border-color:#ffdf8f}
html.spielraster body.spielt .show-missionen{display:none}
html.spielraster body.spielt .show-serie [data-show-serie]{white-space:normal}
.antwort.doppel-markiert{outline:2px solid var(--gold);outline-offset:-3px;opacity:1}
.hilfen-tabelle{width:100%;border-collapse:collapse;margin:1em 0}
.hilfen-tabelle th,.hilfen-tabelle td{padding:.4em;border-bottom:1px solid #50729b;text-align:left}
/* Bonusposten teilen die reservierte Rechnungshöhe auch bei der Finalfrage. */
html.spielraster body.spielt #rechnung .posten{padding:.1rem .5rem;font-size:.8rem;line-height:1.2}

/* Die englische Quiz-Show behaelt ihr eigenes Hilfen-Modul (js/show-extras.js,
   733 Zeilen) statt des schlankeren aus der deutschen Fernsehfassung: Es kann
   dasselbe und dazu die Zeile „2 more correct: Two Out!". Es setzt an den
   beiden Anzeigen aber `geschafft` und `weg`, wo das andere Modul `bereit`
   setzt. Deshalb hier dieselbe Optik noch einmal fuer diese zwei Zustaende —
   ohne das blieben verdiente Hilfen auf dem Fernseher grau. */
.show-zeit.geschafft,.show-schutz.geschafft{
  background:var(--gold);color:#20160a;border-color:#ffdf8f;font-weight:800;
}
.show-zeit.weg,.show-schutz.weg{opacity:.55}