:root{
  --brombeer:#23262b; --brombeer-tief:#0f1114; --gruen:#5bc236; --gelb:#f5a700;
  --rot:#e2342c; --weiss:#f4f7ff; --rahmen:#9aa4ae; --gold:#ffc83d;
  /* Nur fuer die Raenge: hell genug fuer den dunklen Grund, und die
     einzige Farbe, die im Spiel noch keine Bedeutung trug. */
  --rang:#7fd4ff;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Muss hier stehen: eigene display-Regeln (grid, flex) schlagen sonst das
   hidden-Attribut und Elemente bleiben sichtbar, obwohl der Code sie versteckt. */
[hidden]{display:none !important}
body{
  min-height:100dvh;
  /* Riffelblech. Die Kachel ist 64 Pixel gross und liegt als eigene Datei
     daneben — aus Verlaeufen gebaut sah es nach Karomuster aus, weil echte
     Riffel kurze, getrennte Stege sind und keine durchlaufenden Linien.
     Die zweite Fassung ist deutlich schwaecher als die erste — die stoerte
     beim Lesen. Deshalb auch der neue Name: Bilder kommen aus dem
     Tonspeicher und werden nie wieder vom Netz geholt, ein Austausch unter
     altem Namen erreicht niemanden, der die App schon hat.
     NEUE DATEI: steht im GERUEST der sw.js. */
  background:
    url("riffel-2.png") repeat,
    radial-gradient(circle at 50% 0%, #3a4049, var(--brombeer-tief) 72%);
  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.
   Und der Grund fährt herunter: Grün und Rot auf den Antworten müssen die
   lautesten Farben im Bild sein. Auf dem vollen Cars-Rot der Startseite
   trägt die falsche Antwort nur noch über ihren goldenen Rand — gemessen
   am 02.11.2026 an f033. Die Lobby bleibt knallrot, die Sendung wird
   dunkler; das ist auch dramaturgisch richtig, im Studio geht ja das Licht
   runter. */
body.spielt{overflow:hidden;
  /* Dasselbe Blech, nur gedaempft: Gruen und Rot auf den Antworten muessen
     die lautesten Farben im Bild sein. */
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("riffel-2.png") repeat,
    radial-gradient(circle at 50% 0%, #2b3038, #0a0b0d 70%)}
/* Dasselbe fuer alle anderen Bildschirme, die keine sein sollen — Lobby,
   Namen, Stufe, Themen, Vorspann, Tschuess. Welche blaettern duerfen,
   entscheidet BLAETTERBAR in js/app.js.
   Die Klasse steht auch auf <html>, und das ist der Punkt: overflow:hidden
   NUR auf dem body haelt Handy-Browser nicht auf — dort schiebt dann das
   Wurzelelement weiter, und man wischt die Buehne trotzdem weg.
   overscroll-behavior nimmt zusaetzlich das Gummiband am Rand. */
html.steht, body.steht{overflow:hidden; overscroll-behavior:none}
/* 32px sind die beiden Polster des body. Die Aussparungen des Geraets kommen
   obendrauf — sonst rechnet die Buehne mit Hoehe, die physisch unter der
   Gestenleiste liegt. */
body.spielt #buehne{
  height:calc(100dvh - 32px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  display:flex; flex-direction:column;
}
body.spielt .bild[data-bild="spiel"]{flex:1;min-height:0;justify-content:space-between;gap:10px}
/* overflow:hidden schnitt lange Regeltexte einfach ab. Scrollen lassen,
   und etwas mehr Platz geben. */
body.spielt .sprechblase{min-height:0;max-height:30vh;overflow-y:auto;margin-bottom:10px;
  -webkit-overflow-scrolling:touch}
body.spielt .gesagt{font-size:clamp(.92rem,3.2vw,1.2rem)}
/* Eine Variable, kein fester Wert: der Kasten rechnet seine Hoehe daraus,
   und wenn eine sehr lange Frage die Schrift verkleinern muss, bleibt der
   Kasten trotzdem genau gleich hoch. */
body.spielt .frage{--fragenschrift:clamp(.98rem,3.7vw,1.4rem); font-size:var(--fragenschrift)}
/* Die Antworten der Edition sind deutlich laenger als die des Originals —
   zweiundneunzig Zeichen gegen dreiundfuenfzig. Mit der geerbten Groesse
   fuellt der Text die Reihe bis an den Rand. Die Reihenhoehe bleibt davon
   unberuehrt: grid-auto-rows rechnet mit der Schrift des Elternelements. */
body.spielt .antwort{padding:11px 14px;
  font-size:clamp(.86rem, 3.6vw, 1rem);line-height:1.3}
body.spielt .antwort .b{flex:0 0 32px;height:32px}
body.spielt .steuerung{padding-top:6px}
body.spielt .knopf.klein{padding:8px 14px;font-size:.8rem}
#buehne{width:100%;max-width:900px}
.bild[hidden]{display:none}
.bild{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}

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

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

.leiste{width:100%;display:flex;justify-content:space-between;font-weight:700;opacity:.85}
.sprechblase{
  width:100%;background:rgba(255,255,255,.08);border:2px solid var(--rahmen);
  border-radius:18px;padding:14px 18px;text-align:left;min-height:84px;
  margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;
}
.sprechblase .wort{flex:1 1 auto;min-width:0}
/* Das Gesicht wechselt mit dem Register der Zeile: wer spottet, grinst
   haemisch. Die Bilder stammen aus dem Modelsheet der Serie. */
/* Der Kopf sitzt in einer hellen Scheibe. Ohne sie verschwinden die dunklen
   Haare im dunklen Hintergrund, und uebrig bleibt ein schwebendes Gesicht
   ohne Silhouette — die Frisur ist aber das Erkennungszeichen der beiden.
   Der Ring nimmt die Farbe des Sprechers auf. */
.gesicht{
  flex:0 0 auto;width:clamp(52px,15vw,74px);height:auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fdfbf6 0%, #e8eaee 65%, #cbd0d6 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}

.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))}
/* Zum Gong vor der Finalfrage wackelt 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)}
.rechnung .summe{
  background:var(--gold);color:#241a00;border-radius:99px;padding:6px 16px;font-weight:900;
}
.rechnung .nix{background:rgba(226,52,44,.22);border-radius:99px;padding:6px 16px}

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

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

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

/* Hinweis über der Frage, wenn der Typ vom Üblichen abweicht. */
/* Der Tipp neben der Fragenummer. Gesetzt wie der Titel auf dem
   Ergebnisbild: dieselbe gesperrte Auszeichnung, aber als Feld, damit er
   sich von der Zaehlzeile daneben abhebt.
   Gold, und zwar auf Karls Wunsch — „das sind erfolgreiche Marken, also
   Gold verdient". Angemerkt sei, dass Gold im Spiel schon besetzt ist:
   die gewaehlte Antwort, wer dran ist, der Typ-Hinweis darunter und das
   perfekte Ergebnis. Blau waere die einzige noch freie Farbe gewesen.
   Deshalb hier bewusst gedaempft — Rahmen und Grund bleiben schwach, die
   Schrift ist klein: ein Namensschild, kein Pokal.
   Keine feste Hoechstbreite: Das Feld nimmt, was neben der Fragenummer
   frei ist — die steht auf flex:0 0 auto und wird nicht gequetscht. Eine
   Deckelung auf 62 Prozent hatte vorher Platz verschenkt, den es gab.
   Zentriert gesetzt: bei einem zweizeiligen Namen haengt die zweite Zeile
   sonst schief unter der ersten. Bei den einzeiligen aendert es nichts,
   dort sitzt die Pille ohnehin eng um den Text. */
.zaehler{white-space:nowrap;flex:0 0 auto}
.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;
}
/* Nur fuer die paar Markennamen, die in einer Zeile nicht neben die
   Fragenummer passen — „Maison Francis Kurkdjian" und zwei weitere. Eine
   Nummer kleiner, dann bleibt auch dort alles einzeilig. Gesetzt wird die
   Klasse nicht nach Zeichenzahl, sondern nachdem das Spiel nachgesehen
   hat, ob der Text wirklich umbricht: Auf einem breiteren Geraet passt er
   in voller Groesse, und dann soll er auch gross bleiben. */
.tipp.eng{font-size:.56rem;letter-spacing:.02em;padding:3px 8px}
/* Umbrechen statt kuerzen. Drei Markennamen sind zu lang fuer eine Zeile
   neben der Fragenummer — „Maison Francis Kurkdjian", „PAX by Lorenzo
   Pazzaglia", „Stephane Humbert Lucas". Abgeschnitten waere der Tipp
   wertlos, und kleiner gesetzt drueckt er die Fragenummer in den Umbruch.
   Also darf das Feld zweizeilig werden; bei den anderen 62 Namen bleibt
   alles wie gehabt. Darum auch eckigere Ecken statt der Pille: ein
   zweizeiliger Kreisbogen sieht aus wie ein Unfall. */

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

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

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

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

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

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

/* Mehrspieler gehoert zur Vollversion. Das Faehnchen sagt es vorher, damit
   niemand erst tippt und dann abgewiesen wird. */
.zahl{position:relative}
.pro-fahne{position:absolute;top:-7px;right:-7px;font-size:.58rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px;
  background:var(--gold);color:#14171b}
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:#1e2127;box-shadow:0 26px 60px rgba(0,0,0,.55)}
.blatt::backdrop{background:rgba(18,5,16,.72)}
.blatt h2{margin:0 0 14px;text-align:center}
.vorteile{margin:0 0 18px;padding:0 0 0 18px;text-align:left}
.vorteile li{margin-bottom:9px;font-size:.94rem;line-height:1.45;opacity:.92}
.vorteile b{color:var(--gold)}
.blatt .gross{width:100%}
.blatt .link{display:block;margin:12px auto 0}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* Der Ausweg aus dem Opener. Sieht aus wie „Erklaerung ueberspringen",
   steht aber fest unten mittig, weil er ueber mehrere Bildschirme hinweg
   sichtbar bleibt. */
.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}

/* „Back" liegt fest im Fenster, nicht im Bildschirm — und zwar aus zwei
   gemessenen Gruenden. Im Fluss stand er genau unter „Music off", die beiden
   lagen auf 360x640 uebereinander. Und auf 320x568 machte er die Stufenseite
   96 Pixel zu hoch: Sie fing an zu scrollen, was dieses Spiel nirgends tut,
   und der Knopf stand unter dem unteren Rand. Die Verkleinerung in passeAn
   hat ihn dort nicht gerettet. Fest gesetzt kostet er keine Hoehe.
   Links, weil die Mitte der Pille gehoert — auf 320 bleiben zwischen den
   beiden noch gut zwanzig Pixel. */
.bild[data-bild="lobby"] [data-tu="zurueck"],
.bild[data-bild="namen"] [data-tu="zurueck"],
.bild[data-bild="stufe"] [data-tu="zurueck"]{
  position:fixed; left:14px; bottom:max(14px, env(safe-area-inset-bottom));
  z-index:75; opacity:.85; background:rgba(0,0,0,.45);
  padding:8px 18px; border-radius:99px; box-shadow:none;
}
.bild[data-bild="lobby"] [data-tu="zurueck"]:hover,
.bild[data-bild="namen"] [data-tu="zurueck"]:hover,
.bild[data-bild="stufe"] [data-tu="zurueck"]:hover{opacity:1}

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

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

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

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

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


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

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


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

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

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


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

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

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

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


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


/* Stufe gewaehlt: die Knoepfe verschwinden, damit niemand in die laufenden
   Ansagen hinein ein zweites Mal tippt und eine zweite Sendung startet.
   Der Zurueck-Knopf geht im selben Moment mit: Ab hier laeuft die Sendung
   an, und Karls Grenze ist der Spruch mit dem Countdown. visibility statt
   display, damit nichts nachrueckt — die Seite soll stehenbleiben. */
.bild[data-bild="stufe"].gewaehlt [data-stufe],
.bild[data-bild="stufe"].gewaehlt [data-tu="zurueck"]{visibility:hidden}


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


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

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

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

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

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

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

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


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


/* Die gewonnenen Punkte steigen ueber dem Konto auf und verschwinden.
   Absolut positioniert — das Bild darf sich dabei nicht bewegen. */
.konto{position:relative}
.konto .plus{
  position:absolute;left:50%;bottom:100%;
  font-size:1.15rem;font-weight:900;white-space:nowrap;pointer-events:none;
  color:var(--gruen);-webkit-text-stroke:2.2px #06230a;paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:punktePlus 1.8s ease-out forwards;
}
.konto .plus.minus{color:var(--rot);-webkit-text-stroke-color:#2a0806}
@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. */
  html:not(.grossbild) body{padding:8px}
  html:not(.grossbild) body{padding-bottom:max(8px, env(safe-area-inset-bottom))}
  html:not(.grossbild) body{padding-top:max(8px, env(safe-area-inset-top))}
  html:not(.grossbild) body.spielt #buehne{height:calc(100dvh - 16px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]{gap:4px}
  html:not(.grossbild) body.spielt .sprechblase{padding-top:9px;padding-bottom:9px;margin-bottom:6px}
  html:not(.grossbild) body.spielt .uhr{margin-bottom:4px}
  html:not(.grossbild) body.spielt #finalfrage{margin-bottom:0}
  html:not(.grossbild) body.spielt .konto{padding:4px 12px}
  html:not(.grossbild) 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. */
  html:not(.grossbild) body.spielt .antwort{padding:8px 12px}
  html:not(.grossbild) .bild[data-bild="spiel"] .rechnung{min-height:30px}
  html:not(.grossbild) 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);
  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}

.titel img{max-width:100%;height:auto}
/* Lokale Testversion: Show-Missionen, persönlicher Joker und Rückblick. */
.show-extras{
  width:100%;max-width:700px;border:1px solid #9aa4ae66;border-radius:16px;
  padding:10px 14px;background:linear-gradient(120deg,var(--brombeer-tief),var(--brombeer));
  text-align:left;box-shadow:0 8px 24px #00000030;
}
.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:#d6dbe2}
.show-pips{display:flex;gap:3px;flex-shrink:0}
.show-pips i{width:9px;height:13px;border:1px solid #9aa4ae;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:#2b2f35;color:#b7bec6;border-color:#5c636b;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:#c3cad2}
.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:#9aa4ae66}25%{border-color:var(--gold);box-shadow:0 0 24px #ffc83d55}}
/* 07.11.2026: rot statt grau und ohne jede Sperre. Die Kachel bleibt
   ein normaler Knopf — sie sieht nur falsch aus. var(--rot) ist der
   Rotton DIESER Ausgabe. */
.antwort.joker-gestrichen{
  background:var(--rot);border-color:#ffffff55;color:#fff;
  opacity:.6;box-shadow:none!important;transform:none!important;
}
.antwort.joker-gestrichen .b{background:#ffffff2e;color:#fff}
.antwort.joker-gestrichen:focus-visible,
.antwort.joker-gestrichen:focus{opacity:.85}
.show-rueckblick{flex:0 0 100%;display:flex;flex-direction:column;gap:4px;padding-top:10px;margin-top:4px;
  border-top:1px solid #9aa4ae55;font-size:.76rem;line-height:1.4;color:#c8cfd7;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){
  html:not(.grossbild) body.spielt .show-extras{padding:4px 10px}
  html:not(.grossbild) body.spielt .show-missionen{display:none}
  html:not(.grossbild) body.spielt .show-moment{font-size:.65rem;min-height:1.4em;margin-top:2px}
  html:not(.grossbild) .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){
  html:not(.grossbild) 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;
  }
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.leiste{grid-column:1;grid-row:1}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.dran{display:none}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.konten{grid-column:2;grid-row:1;justify-content:flex-end}
  html:not(.grossbild) body.spielt .show-extras{grid-column:1/-1;grid-row:2;max-width:none}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.uhr{grid-column:1/-1;grid-row:3;margin-bottom:12px}
  html:not(.grossbild) 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}
  html:not(.grossbild) 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}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"] .antwort{padding:6px 9px;font-size:.85rem}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"] .antwort .b{flex-basis:24px;height:24px}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.schaetzen{grid-column:2;grid-row:4}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.rechnung{grid-column:1;grid-row:5}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.aufloesung{grid-column:2;grid-row:5}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>#erklaerWeiter{grid-column:2;grid-row:6}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.notenplatz{grid-column:1/-1;grid-row:7}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.ruhebild{grid-column:1/-1;grid-row:4;max-height:24vh;width:auto;justify-self:center}
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.finalfrage,
  html:not(.grossbild) 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:#c8cfd7;text-wrap:balance}
@media(max-height:760px){
  html:not(.grossbild) body.spielt .show-extras .show-moment{display:none}
  html:not(.grossbild) body.spielt .show-extras.show-antwort .show-missionen{display:none}
  html:not(.grossbild) body.spielt .show-extras.show-antwort .show-moment{display:block;min-height:1.4em}
  /* Leere Rubrikschilder brauchen während einer sichtbaren Frage keinen Platz. */
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]:has(#frage:not([hidden])) #typhinweis[hidden],
  html:not(.grossbild) 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 #00000080;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){
  html:not(.grossbild) 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 #ffc83d55;
  border-radius:12px;background:linear-gradient(110deg,var(--brombeer-tief),var(--brombeer));text-align:left}
.punkteserie-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.75rem;color:#d6dbe2}
.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:#0f1114;border-radius:99px;overflow:hidden}
.punkteserie-spur>i{height:100%;width:0;display:block;border-radius:99px;
  background:linear-gradient(90deg,#ffd978,#ffce54);transition:width .25s ease-out}
.punkteserie>p{font-size:.67rem;line-height:1.25;margin-top:4px;color:#c3cad2;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){
  html:not(.grossbild) body.spielt .bild[data-bild="spiel"]>.punkteserie{grid-column:1/-1;grid-row:2;max-width:none;padding:4px 10px}
  html:not(.grossbild) .punkteserie-kopf{font-size:.68rem}html:not(.grossbild) .punkteserie-kopf>b{font-size:.8rem}
  html:not(.grossbild) .punkteserie>p{font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){
  .punkteserie-feiert{animation:none}.punkteserie-spur>i{transition:none}
}

.show-ressourcen{display:flex;align-items:center;gap:5px;flex-shrink:0}
@media(max-width:540px){
  .show-extras .show-name{display:none}
  .show-ressourcen .show-joker{font-size:.65rem;padding:6px 8px;min-height:36px}
  .show-extras .show-serie{font-size:.7rem;gap:5px}
}
/* Das nächste Serienziel bleibt auch auf kleinen Displays lesbar. */
body.spielt .show-extras .show-moment{display:block;min-height:2.8em}

.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}}


/* ═══════════════════════════════════════════════════════════════
   DIE FERNSEH-SCHICHT
   ═══════════════════════════════════════════════════════════════
   Uebernommen am 05.11.2026 aus der Fernsehfassung des Hauptquiz
   (~/Projekte/uns-fragt-ja-keiner-tv/app/stil.css, Zeilen 1430 bis 2129
   und 2286 bis 2296), beschrieben in deren _TV-SCHICHT.md, Teil 1.

   Alles hier haengt an einer von drei Kennungen, die js/steuerung.js
   setzt — html.grossbild, html.feuertv oder body.navigiert. Was ohne
   diese Kennungen gilt, steht weiter oben in dieser Datei und ist
   unberuehrt: Am Handy aendert diese Schicht nichts.

   Zwei Stellen weichen von der Vorlage ab, und zwar begruendet; sie sind
   unten als ABWEICHUNG bzw. NICHT UEBERNOMMEN vermerkt. Wer die Vorlage
   eines Tages wieder abgleicht, findet sie daran.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 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{
  /* 07.11.2026: DIE UNTERGRENZE MUSS MITWACHSEN. Vorher 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, und die festen Reihen des
     Spielrasters frassen die eine flexible Reihe auf: Fragezeile 0 px. */
  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: Fernseher schneiden drei bis fuenf Prozent
     ab. Auf Karls 55-Zoll-Geraet stand die Schalterreihe mit drei Prozent
     halb unter dem Bildrand. Kein Deckel mehr bei 110px — der hat auf 4K
     vorzeitig gebremst. */
  --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{
  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. */
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); }
html.grossbild body.spielt .gesicht{ width:clamp(3rem,5vw,4.2rem); }
html.grossbild body.spielt .antwort{ padding:.73rem .9rem; }
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 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. */
/* ABWEICHUNG von der Vorlage: dort gilt diese Regel ueberall, hier nur im
   Grossbild. Der Grund der Vorlage ist der Fernseher („drei Meter weg ist
   der Rand kaum zu sehen"), und der gilt auch hier — aber am Handy soll
   diese Ausgabe aussehen wie die Handy-Fassung, aus der sie kommt. Die
   Farben sind die eigenen (var(--rot)), nicht die der Vorlage. */
html.grossbild 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.

   Die Vorlage legt dafuer einen BLAUEN Schleier auf die Taste
   (rgba(23,70,150,.62)) und dunkelt den Buchstabenkasten nach (#0e2f6d).

   NICHT UEBERNOMMEN, und das ist Absicht: Beide Werte kommen aus der
   blauen Palette des Hauptquiz. Diese Ausgabe ist brombeer (--brombeer
   #23262b), ihr Rahmen ist grau (--rahmen #9aa4ae) — ein Blau von dort
   waere hier eine neue Farbe im Spiel, und Farben entscheidet Karl.

   Das Problem selbst besteht hier genauso: .antwort traegt
   rgba(255,255,255,.1), also einen weissen Schleier ueber einem Grund,
   der nach unten dunkler wird. Die unterste Antwort sieht damit anders
   aus als die oberste, obwohl beide dasselbe meinen — auf dem Fernseher
   faellt das auf. Was fehlt, ist eine eigene Ruhefarbe aus DIESER
   Palette. Offen; gehoert zu Karl und zur Quell-Sitzung. */

/* ---------------------------------------------------------------
   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. */
html{ scrollbar-gutter:stable; }

/* 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}

/* ───────────────────────────────────────────────────────────────────────
   FERNSEHRASTER, uebernommen aus der TV-Fassung am 07.11.2026.

   Karl: „DU bist jetzt die Vorzeigeversion. Genau so muessen alle laufen!"

   Alles hier haengt an `html.spielraster` bzw. `html.grossbild`. Die Klasse
   `spielraster` setzt passeAn() in js/app.js erst ab 720x400 im Querformat —
   darunter schlaeft dieser ganze Abschnitt und die alte Darstellung gilt
   unveraendert weiter. Auf einem Handy aendert sich also nichts.

   EURE SEITE: Farben, Logos und Sprache sind nicht angefasst. Was hier
   Farbe nennt, nimmt `var(--gold)`, `var(--blau-tief)` usw. aus EUREM
   Stilblatt. Vier Regeln aus unserem Abschnitt sind absichtlich NICHT
   mitgekommen, weil sie Bauteile betreffen, die es bei euch nicht gibt oder
   die eigene Farben tragen: .show-schutz, .antwort.doppel-markiert und
   .hilfen-tabelle.
   ─────────────────────────────────────────────────────────────────────── */
/* 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. */
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;
}
html.spielraster body.spielt .show-missionen{display:none}
html.spielraster body.spielt .show-serie [data-show-serie]{white-space:normal}
/* 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}


/* ───────────────────────────────────────────────────────────────────────
   FERNSEH-FEINHEITEN, uebernommen aus der TV-Fassung am 07.11.2026.
   Vierzehn Regeln, alle an `html.grossbild` gehaengt. Was ihr davon schon
   hattet, steht hier wortgleich noch einmal und aendert nichts.
   ─────────────────────────────────────────────────────────────────────── */
/* 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; }

   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)}