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

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

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

.leiste{width:100%;display:flex;justify-content:space-between;font-weight:700;opacity:.85}
/* DER WEGWEISER GIBT NACH, NICHT DIE FRAGENUMMER. Die Fragenummer
   schrumpft nie (flex:0 0 auto), der Wegweiser nimmt, was uebrig ist, und
   kuerzt sich erst, wenn es wirklich nicht reicht.
   KEIN fester Deckel. Nischenduefte hat hier 30 Prozent stehen — dort
   stand zu der Zeit noch der Spielername in derselben Zeile, und zu dritt
   braucht es eine feste Aufteilung. Seit der Name in der Pille steht, sind
   es nur noch zwei, und ein Deckel kuerzte dann grundlos: „Tipp:
   Allgemeinwissen" wurde auf 374 Punkten zusammengestrichen, obwohl 150
   Punkte der Zeile leer blieben. Gemessen am 07.11.2026.
   Aufbau aus der Nischenduefte-Ausgabe, damit die Serie aus einer Hand
   kommt — die Farben sind unsere eigenen. */
.leiste .zaehler{flex:0 0 auto}
.leiste .tipp{
  flex:0 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tipp{
  color:var(--gold);font-weight:800;font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.38);
  border-radius:14px;padding:3px 8px;line-height:1.2;
  text-align:center;min-width:0;
}
/* Eine Nummer kleiner, wenn der Wegweiser auch gekuerzt nicht hineinpasst.
   Gesetzt wird die Klasse nicht nach Zeichenzahl, sondern nachdem das
   Spiel nachgesehen hat, ob der Text wirklich zu breit ist — auf einem
   breiteren Geraet passt er in voller Groesse, und dann bleibt er gross. */
.tipp.eng{font-size:.56rem;letter-spacing:.02em;padding:3px 8px}
.sprechblase{
  width:100%;background:rgba(255,255,255,.08);border:2px solid var(--rahmen);
  border-radius:18px;padding:14px 18px;text-align:left;min-height:84px;
  margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;
}
.sprechblase .wort{flex:1 1 auto;min-width:0}
/* Das Gesicht wechselt mit dem Register der Zeile: wer spottet, grinst
   haemisch. Die Bilder stammen aus dem Modelsheet der Serie. */
/* Der Kopf sitzt in einer hellen Scheibe. Ohne sie verschwinden die dunklen
   Haare im dunklen Hintergrund, und uebrig bleibt ein schwebendes Gesicht
   ohne Silhouette — die Frisur ist aber das Erkennungszeichen der beiden.
   Der Ring nimmt die Farbe des Sprechers auf. */
.gesicht{
  flex:0 0 auto;width:clamp(52px,15vw,74px);height:auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fdfbf6 0%, #e4e8f2 65%, #c7cfe0 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.5);
  outline:3px solid var(--rahmen);outline-offset:0;
  animation:gesichtRein .32s cubic-bezier(.2,1.6,.4,1) both;
}
.sprechblase:has(.sprecher[data-wer="fraenk"]) .gesicht{outline-color:var(--gruen)}
.sprechblase:has(.sprecher[data-wer="hilary"]) .gesicht{outline-color:var(--rot)}
.gesicht[hidden]{display:none}
@keyframes gesichtRein{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gesicht{animation:none}}
.sprecher{font-size:.75rem;letter-spacing:.18em;font-weight:800;opacity:.75}
.sprecher[data-wer="hilary"]{color:var(--rot)}
.sprecher[data-wer="fraenk"]{color:var(--gruen)}
.gesagt{font-size:clamp(1rem,3.6vw,1.3rem);line-height:1.35;margin-top:4px}

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

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

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

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

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

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

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

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

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

/* Ruhebild zwischen den Fragen: verhindert, dass der Bildschirm leer wirkt
   und dass das Layout beim Erscheinen der Antworten springt. */
/* Seit dem quadratischen Logo ueber die Hoehe begrenzt — sonst schiebt
   das Ruhebild die Frage nach unten. */
.ruhebild{width:min(70%,340px);max-height:268px;height:auto;object-fit:contain;
  opacity:.9;margin:8px auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
/* SEIT 06.11.2026 UNGENUTZT: Der Gong vor der Finalfrage ist weg (das Lied
   ersetzt ihn, Karls Entscheidung), und mit ihm das Wackeln. Die Regel bleibt
   stehen, weil sie nichts kostet und das Wackeln mit einer Zeile Code
   zurueckkaeme, falls Karl es wieder haben will. Die Bewegung `taenzeln`
   selbst wird weiter gebraucht, die darf nicht weg.
   Zum Gong vor der Finalfrage wackelte das Ruhebild kurz — dieselbe Bewegung
   wie im Vorspann, nur dreimal statt endlos. Sonst ist der Gong ein Geraeusch
   ohne Bild. */
/* Der Verdopplungs-Posten soll sich von den anderen abheben. */
.rechnung .posten.doppelt{color:var(--gold);font-weight:800}

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

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

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

/* Die Punkterechnung nach jeder Antwort — damit niemand raten muss,
   wie eine Zahl zustande kommt. */
.rechnung{
  width:100%;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  align-items:baseline;font-weight:700;
}
.rechnung .posten{background:rgba(255,255,255,.1);border-radius:99px;padding:6px 14px}
.rechnung .posten b{color:var(--gruen)}
/* AUF DEM TELEFON NUR DIE ZAHLEN. Mit voller Beschriftung braucht die
   Abrechnung bei 374 Punkten Breite die ganze Zeile, der Punktestand rutscht
   darunter, und die Zeile wird 117 statt 35 Punkte hoch — gemessen. Also
   faellt das Wort weg und die Zahl bleibt: „+1000", „+500", „+500".
   Welcher Posten das ist, sagt die Reihenfolge und die Farbe. */
@media(max-width:620px){
  /* Das Wort bleibt stehen. Es stand hier bis zum 07.11.2026 auf
     display:none, um Platz zu sparen — Karl: „Vorher war besser, dass man
     sah wofuer man die bekommt." Der Platz kommt jetzt aus der kleineren
     Schrift und den engeren Abstaenden darueber. */
  .punktezeile .rechnung .posten{padding:5px 10px}
  .punktezeile{gap:6px}
}
.rechnung .summe{
  background:var(--gold);color:#241a00;border-radius:99px;padding:6px 16px;font-weight:900;
}
/* Die Blase „Keine Punkte" gibt es nicht mehr: Sie erscheint jetzt kurz
   dort, wo sonst das „+500" aufpoppt — Karls Entscheidung, „Keine Punkte
   erscheint kurz wo 0 steht.. fertig". Die Regel bleibt stehen, falls die
   Blase je zurueckkommt. */
.rechnung .nix{background:rgba(226,52,44,.22);border-radius:99px;padding:6px 16px}
/* „Keine Punkte" ist zwei Woerter lang, das Plus-Abzeichen ist fuer „+500"
   gebaut: mittig ueber dem Konto. Mittig gesetzt haengt der Text links und
   rechts ueber und wird am Bildrand abgeschnitten — am 06.11.2026 im
   Browser gesehen. Deshalb rechtsbuendig an der Kante des Kontos, kleiner,
   und mit einer eigenen Bewegung ohne die Mitten-Verschiebung. */
.konto .plus.nichts{
  color:#ffb4b0;-webkit-text-stroke-width:1.6px;-webkit-text-stroke-color:#2a0806;
  font-size:.78rem;font-weight:800;left:auto;right:0;
  animation:punkteNichts 1.8s ease-out forwards;
}
@keyframes punkteNichts{
  0%  {opacity:0;transform:translateY(8px)}
  20% {opacity:1;transform:translateY(-4px)}
  70% {opacity:1;transform:translateY(-8px)}
  100%{opacity:0;transform:translateY(-16px)}
}

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

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

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

/* Hinweis über der Frage, wenn der Typ vom Üblichen abweicht. */
.typhinweis{
  font-weight:900;letter-spacing:.12em;font-size:.78rem;
  color:var(--gold);text-transform:uppercase;
}

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

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

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

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

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

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

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

/* Der Weg zur Vollversion steht auf der Startseite, nicht nur im Ergebnis. */
.pro-knopf{margin-top:12px;background:transparent;border:2px solid var(--gold);
  color:var(--gold);font-size:.92rem;padding:9px 16px}
.pro-knopf:hover{background:rgba(246,195,68,.12)}
body.hat-pro .pro-knopf{display:none}
/* Der Preis steht nicht im Code. Er kommt aus dem Play Store, sobald die
   App dort liegt — sonst bleibt die Stelle einfach leer. */
.pro-preis:empty{display:none}
/* Der Preis bleibt als Ganzes zusammen. Ohne das riss er auf schmalen
   Geraeten mitten durch und das Euro-Zeichen stand allein in der naechsten
   Zeile — nachgemessen bei 296 px Knopfbreite. Umbrechen darf der Knopf
   davor, zwischen „holen" und dem Preis. */
.pro-preis{white-space:nowrap}
/* Der alte Preis steht blasser und duenner daneben, damit der neue die
   Hauptrolle behaelt. Er erscheint nur, wenn Google wirklich weniger
   verlangt — siehe preisEintragen() in js/app.js. */
.pro-preis s{opacity:.65;font-weight:400;margin-right:.15em}
/* Die Frist steht als eigene, ruhigere Zeile unter dem Preis, damit der
   Knopf nicht zum Plakat wird. Als Block direkt im Knopf — siehe
   preisEintragen() in js/app.js. */
.knopf .aktion-bis{display:block;width:100%;margin-top:.2em;
  font-size:.68em;font-weight:400;opacity:.8;letter-spacing:.01em}
/* Das Wort zum heutigen Preis. Steht neben der Preisspanne, nicht darin —
   die ist nowrap, und ein unzerbrechliches „· 4,99 € (Eröffnungspreis)"
   würde den Knopf auf schmalen Geräten sprengen. */
.knopf .pro-marke{font-size:.8em;font-weight:400;opacity:.8}

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

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

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

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

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

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

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

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

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

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

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

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

   Der Schlagschatten sitzt auf dem RAHMEN, nicht auf dem drehenden Bild.
   Bewegte Filter werden auf dem Fire TV bei jedem Einzelbild neu gerechnet
   und bringen die Bewegung zum Ruckeln. */
.finallogo{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  pointer-events:none}
/* Der Hintergrund liegt auf einer eigenen Schicht, damit er fuer sich
   ausgeblendet werden kann: Waehrend die Platte auslaeuft, geht er weg und
   das Blau des Spiels kommt zurueck. Laege er direkt auf .finallogo,
   verschwaende er erst mit dem ganzen Bild — also zu spaet.
   Dunkel genug, dass der Bildschirm dahinter nicht mitredet, hell genug,
   dass man noch sieht, wo man ist. */
.finallogo::before{content:"";position:absolute;inset:0;
  background:rgba(4,14,38,.72)
             radial-gradient(ellipse at 50% 44%, rgba(255,200,61,.22), transparent 62%);
  transition:opacity .9s ease}
.finallogo.blass::before{opacity:0}
.finallogo-satz{display:grid;justify-items:center;gap:clamp(4px,1.8vw,9px);
  animation:finallogoRein 1s cubic-bezier(.16,1.5,.4,1) both}
/* Zwoelf Prozent groesser als bis v205. Dort lief hier das App-Symbol, ein
   gerundeter Kasten, der seinen Rahmen bis in die Ecken ausfuellte. Das Logo
   reicht zwar ebenso bis an alle vier Raender — oben das Haar, unten das
   „KEINER!", seitlich die Strahlen —, hat dazwischen aber viel Durchsicht
   und wirkt bei gleicher Breite deshalb kleiner.

   Nachgemessen statt geschaetzt: Der aeusserste sichtbare Punkt des Logos
   liegt 121 % der halben Bildbreite von der Mitte entfernt. Beim Drehen
   ueberstreicht er also einen Kreis von 0,447 Bildschirmbreiten Radius,
   waehrend bis zum Rand 0,5 zur Verfuegung stehen. Es bleibt rund ein
   Zehntel Luft, und zwar auf JEDEM Bildschirm — die Rechnung haengt nur an
   der Prozentangabe, nicht an der Geraetegroesse. Der durchsichtige
   Bildrahmen ragt bei 45 Grad zwar heraus, aber da steht nichts drin. */
.finallogo-teller{width:min(88vw, 64vh);
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.7))}
.finallogo-teller img{display:block;width:100%}
.finallogo-wort{margin:0;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(24px, 7vw, 46px);color:var(--gold);
  text-shadow:0 2px 14px rgba(0,0,0,.75)}
@keyframes finallogoRein{
  0%{transform:scale(.25) rotate(-10deg);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.finallogo.geht{animation:finallogoRaus .5s ease forwards}
@keyframes finallogoRaus{to{transform:scale(1.18);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .finallogo-satz{animation:none}
}
@media (prefers-reduced-motion:reduce){.jagdlogo img{animation:none}}

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

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

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

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

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

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


/* Der Ausweg aus dem Opener. Sieht aus wie „Erklaerung ueberspringen",
   steht aber fest unten mittig, weil er ueber mehrere Bildschirme hinweg
   sichtbar bleibt. */
.musikweg{
  position:fixed; left:50%; bottom:max(14px, env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:75;
  opacity:.85; background:rgba(0,0,0,.45);
  padding:8px 18px; border-radius:99px; text-decoration:none;
}
.musikweg[hidden]{display:none}
.musikweg:hover{opacity:1}

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

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

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

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

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


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

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


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

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

/* Derselbe feste Platz am Ende der grossen Show: Dort steht die
   Punktezahl genauso gross im Bild, und der Knopf fuer Ansage und Urteil
   laege sonst dahinter. */
body.jagdschluss #erklaerWeiter,
body.showschluss #erklaerWeiter{
  /* Beim Punkteeinschlag schwebt er im unteren Drittel. Ein gerechneter
     Mittelwert zwischen Zahl und Schaltern landete je nach Zahlenhoehe
     hinter der Zahl — eine feste Hoehe kann das nicht. */
  position:fixed;left:50%;
  /* Mitte des unteren Drittels: zwei Drittel plus ein halbes Drittel.
     Die Schranke haelt ihn auf sehr niedrigen Bildschirmen von der
     Schalterreihe fern. */
  top:min(83.3vh, calc(100vh - 110px));
  transform:translate(-50%,-50%);
  z-index:90;
}


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

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

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

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


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


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


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


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

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

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

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

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

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

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


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


/* Die gewonnenen Punkte steigen ueber dem Konto auf und verschwinden.
   Absolut positioniert — das Bild darf sich dabei nicht bewegen. */
.konto{position:relative}
/* UNVERAENDERT, mit Absicht. Ich hatte den Aufstieg verkuerzt und die
   Zahl verkleinert, weil sie in die Tipp-Zeile ragt. Karl am 07.11.2026:
   „Ich meinte diese gruenen zahlen die eingeblendet werden ueber dem
   punktestand. Das sah vorher auch perfekt aus." Also bleiben Groesse und
   Weg, wie sie waren — das kurze Ueberlappen gehoert dazu. */
.konto .plus{
  position:absolute;left:50%;bottom:100%;
  font-size:1.15rem;font-weight:900;white-space:nowrap;pointer-events:none;
  color:var(--gruen);-webkit-text-stroke:2.2px #06230a;paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:punktePlus 1.8s ease-out forwards;
}
.konto .plus.minus{color:var(--rot);-webkit-text-stroke-color:#2a0806}
@keyframes punktePlus{
  0%  {opacity:0;transform:translate(-50%,10px) scale(.6)}
  20% {opacity:1;transform:translate(-50%,-6px) scale(1.2)}
  45% {opacity:1;transform:translate(-50%,-12px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-26px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .konto .plus{animation:punktePlusStill 1.8s ease-out forwards}
  @keyframes punktePlusStill{0%,80%{opacity:1}100%{opacity:0}}
}


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

/* Nicht mehr beschneiden. overflow:hidden war die Notbremse gegen Reihen,
   die aus ihrem Kasten liefen — es hat aber auch den Leuchtring der
   richtigen Antwort unten abgesaebelt, besonders bei den zwei grossen
   Flaechen der Schaetzfrage. Jetzt gilt: eine Untergrenze je Reihe, damit
   nichts mehr zusammengedrueckt wird, ein Fingerbreit Polster fuer Ring und
   Huepfer, und per negativem Rand kostet dieses Polster keinen Platz. Nur
   wenn es wirklich einmal nicht reicht, laesst sich die Liste schieben —
   das ist immer noch besser als abgeschnittene Schrift. */
body.spielt .bild[data-bild="spiel"] .antworten{
  /* Nur senkrecht schieben. „overflow:auto“ setzte beide Achsen, und eine
     waagerechte Leiste frisst unten Höhe — genau dort, wo dann die vierte
     Antwort angeschnitten wird. */
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none;
  grid-auto-rows:minmax(2.7em,1fr);
  /* Ohne diese Zeile faellt die Flaeche unter ihren eigenen Inhalt: Der
     Flex-Umbruch drueckt sie auf wenige Pixel, und weil sie in sich
     scrollt, SCHLUCKT sie den Ueberstand, statt ihn nach oben
     weiterzureichen. Gemessen bei 374x500: Kasten 25 Pixel hoch bei 207
     Pixeln Inhalt, 182 Pixel abgeschnitten — und passeAn() sah keinen
     Grund zu verkleinern, weil das Dokument keinen Ueberlauf meldete.
     min-content laesst die Flaeche ihre wahre Hoehe behalten; erst
     dadurch wird der Platzmangel ueberhaupt messbar. Allein hilft die
     Zeile nicht, sie gehoert zu den vier Aenderungen in passeAn(). */
  min-height:min-content;
  padding:5px; margin:-5px;
  /* Browser rechnen das untere Polster eines scrollbaren Kastens nicht
     immer mit. Diese Zeile sichert den Platz unter der letzten Reihe
     unabhängig davon ab. */
  scroll-padding-bottom:5px;
}
body.spielt .bild[data-bild="spiel"] .antworten > :last-child{margin-bottom:0}
body.spielt .bild[data-bild="spiel"] .antworten::-webkit-scrollbar{display:none}
/* Der Rahmen der gewaehlten Antwort liegt jetzt innen — aussen haette ihn
   der Rand des Kastens angeschnitten. */
body.spielt .antwort.gewaehlt{outline-offset:-3px}


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


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


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

/* Lokale Testversion: Show-Missionen, persönlicher Joker und Rückblick. */
.show-extras{
  width:100%;max-width:700px;border:1px solid #6785bb80;border-radius:16px;
  padding:10px 14px;background:linear-gradient(120deg,#081b43eb,#18396fdb);
  text-align:left;box-shadow:0 8px 24px #020b241c;
}
.show-oben{display:flex;align-items:center;justify-content:space-between;gap:8px}
.show-serie{display:flex;align-items:center;gap:7px;font-size:.8rem;min-width:0}
.show-name{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bbd4ff}
.show-pips{display:flex;gap:3px;flex-shrink:0}
.show-pips i{width:9px;height:13px;border:1px solid #7191c6;border-radius:3px;transform:skew(-12deg)}
.show-pips i.an{background:var(--gold);border-color:var(--gold);box-shadow:0 0 9px #ffc83d66}
.show-joker{font:inherit;font-size:.75rem;font-weight:800;min-height:38px;white-space:nowrap;
  cursor:pointer;background:var(--gold);color:#20160a;border:1px solid #ffdf8f;border-radius:10px;padding:7px 11px}
.show-joker:disabled{background:#17365f;color:#afc6e8;border-color:#50729b;cursor:default}
.show-joker:enabled:hover{background:#ffe293;box-shadow:0 0 18px #ffc83d55}
.show-joker:focus-visible{outline:3px solid white;outline-offset:3px}
.show-missionen{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:5px;font-size:.69rem;color:#c0d0ea}
.show-missionen .geschafft{color:#b6f28e;font-weight:800}
.show-moment{font-size:.72rem;line-height:1.4;min-height:2.8em;margin-top:4px;color:#ffdc87;text-wrap:balance}
.show-jubel{animation:show-moment-glanz 1.3s ease-out}
@keyframes show-moment-glanz{0%,100%{border-color:#6785bb80}25%{border-color:var(--gold);box-shadow:0 0 24px #ffc83d55}}
.antwort.joker-gestrichen{opacity:.25!important;filter:grayscale(1);text-decoration:line-through;
  pointer-events:none;box-shadow:none!important;transform:none!important}
.show-rueckblick{flex:0 0 100%;display:flex;flex-direction:column;gap:4px;padding-top:10px;margin-top:4px;
  border-top:1px solid #6b90c355;font-size:.76rem;line-height:1.4;color:#c5d8f4;text-align:left}
.show-rueckblick>b{color:var(--gold);font-size:.8rem}
.show-trophaeen{color:#b6f28e}
body.spielt .show-extras{padding:6px 11px;flex-shrink:0}
body.spielt .show-moment{min-height:1.4em}
body.finalrunde .show-extras{display:none}
@media(max-width:420px){
  .show-name{max-width:70px}.show-serie{font-size:.7rem;gap:5px}
  .show-joker{font-size:.7rem;padding:6px 8px}
  .show-missionen{font-size:.65rem;gap:4px 9px}
  body.spielt .show-moment{min-height:2.8em}
}
@media(max-height:560px) and (orientation:landscape){
  body.spielt .show-extras{padding:4px 10px}
  body.spielt .show-missionen{display:none}
  /* DREI KLASSEN, nicht zwei. Mit `body.spielt .show-moment` verliert diese
     Regel gegen die am Dateiende (`body.spielt .show-extras .show-moment`),
     und die Hinweiszeile bleibt im Querformat 2,8em hoch. Gemessen bei
     740x420: 29 Punkte statt der gewollten 15 — verschenkt genau dort, wo
     am wenigsten Platz ist. Hinweis der Niche-Fragrances-Sitzung, die
     denselben Fall bei sich hatte. */
  body.spielt .show-extras .show-moment{font-size:.65rem;min-height:1.4em;margin-top:2px}
  .show-joker{min-height:30px;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){.show-jubel{animation:none}}
/* Der wandernde Punktwert bleibt auch am Anfang und Ende der Uhr im Bild. */
.uhr{container-type:inline-size}
.uhr-wert{right:auto;left:clamp(0px,calc(100% - 2rem),calc(100cqw - 4rem));
  transform:translateY(6px);min-width:4rem;text-align:center}
body.pausiert .show-joker{opacity:.4;pointer-events:none}
/* Im niedrigen Querformat stehen Frage und Antworten nebeneinander.
   Die Antworten behalten echte Touchflächen statt auf eine Zeile zu schrumpfen. */
@media(max-height:560px) and (orientation:landscape){
  body.spielt .bild[data-bild="spiel"]{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    grid-template-rows:auto auto auto minmax(108px,1fr) auto auto auto;
    align-items:center;align-content:stretch;gap:4px 14px;
  }
  body.spielt .bild[data-bild="spiel"]>.leiste{grid-column:1;grid-row:1}
  body.spielt .bild[data-bild="spiel"]>.dran{display:none}
  body.spielt .bild[data-bild="spiel"]>.punktezeile{grid-column:2;grid-row:1;justify-content:flex-end}
  body.spielt .show-extras{grid-column:1/-1;grid-row:2;max-width:none}
  body.spielt .bild[data-bild="spiel"]>.uhr{grid-column:1/-1;grid-row:3;margin-bottom:12px}
  body.spielt .bild[data-bild="spiel"]>.frage{grid-column:1;grid-row:4;height:auto;min-height:0;
    max-height:7em;overflow:auto;font-size:clamp(.95rem,2vw,1.25rem);text-align:left}
  body.spielt .bild[data-bild="spiel"]>.antworten{grid-column:2;grid-row:4;height:100%;min-height:108px;
    grid-template-columns:1fr 1fr;grid-auto-rows:minmax(44px,1fr);gap:7px}
  body.spielt .bild[data-bild="spiel"] .antwort{padding:6px 9px;font-size:.85rem}
  body.spielt .bild[data-bild="spiel"] .antwort .b{flex-basis:24px;height:24px}
  body.spielt .bild[data-bild="spiel"]>.schaetzen{grid-column:2;grid-row:4}
  /* Die Abrechnung hat hier keine eigene Platzangabe mehr: Sie sitzt im
     Kasten .punktezeile und wandert mit ihm nach oben rechts. Vorher stand
     hier `>.rechnung{grid-column:1;grid-row:5}` — tot, seit sie kein
     direktes Kind mehr ist. Fund der Nischenduft-Sitzung. */
  /* HIER STAND: .was{display:none}. Das war richtig, solange `.was` das
     WORT trug („Richtig", „45 Sek. uebrig") und im Querformat der Platz
     fehlte. Seit dem 07.11.2026 steht dort das ZEICHEN — ✅ ⏱️ 🚀 —,
     und ohne das bliebe eine nackte Zahl ohne jeden Hinweis, wofuer sie
     ist. Die Zeile ist deshalb raus. Platz macht stattdessen die
     Staffelung nach Anzahl weiter oben. */
  body.spielt .bild[data-bild="spiel"]>.aufloesung{grid-column:2;grid-row:5}
  body.spielt .bild[data-bild="spiel"]>#erklaerWeiter{grid-column:2;grid-row:6}
  body.spielt .bild[data-bild="spiel"]>.notenplatz{grid-column:1/-1;grid-row:7}
  body.spielt .bild[data-bild="spiel"]>.ruhebild{grid-column:1/-1;grid-row:4;max-height:24vh;width:auto;justify-self:center}
  body.spielt .bild[data-bild="spiel"]>.finalfrage,
  body.spielt .bild[data-bild="spiel"]>.typhinweis{grid-column:1;grid-row:4;align-self:start}
}
.show-versprechen{font-size:.85rem;line-height:1.45;max-width:36ch;color:#bfd4f6;text-wrap:balance}
@media(max-height:760px){
  /* DIE ABZEICHENZEILE BLEIBT STEHEN. Sie verschwand hier, sobald eine
     Antwort dastand — und weil das Antwortfeld den freien Platz aufsaugt,
     wuchsen die zwei grossen Ja/Nein-Flaechen dabei um 33 Punkte und
     rutschten 33 nach oben. Gemessen am 06.11.2026 bei 374x667.
     Karl: „Wenn die Optik sich so massiv ändert nur weil man gedrückt hat
     sieht das aus wie ein Fehler." Die 28 Punkte, die das Ausblenden
     spart, sind diesen Sprung nicht wert.
     Der Hinweissatz bleibt dagegen ausgeblendet, solange keine Antwort da
     ist — er erscheint erst zur Auflösung und nimmt vorher keinen Platz. */
  /* DER HINWEISSATZ BLEIBT STEHEN. Er war hier versteckt, bis eine Antwort
     dastand — und tauchte dann auf: 16 Punkte, die das Antwortfeld
     verliert, bei jeder Auflösung. Gemessen von der Fahrzeugwelten-Sitzung,
     hier nachgemessen: +16/-16 ab 390 Punkten Breite. Dieselbe Bewegung wie
     beim Ausblenden der Abzeichenzeile, nur halb so groß — und nach Karls
     Regel genauso falsch.
     Hier steht deshalb KEINE eigene Regel mehr: Die Höhe setzt die Regel am
     Dateiende für alle Zustände gleich. Eine Regel hier wäre tot (gleiche
     Gewichtung, frühere Zeile) und brächte nur jemanden auf die Idee, sie
     zu „reparieren". */
  /* Leere Rubrikschilder brauchen während einer sichtbaren Frage keinen Platz. */
  body.spielt .bild[data-bild="spiel"]:has(#frage:not([hidden])) #typhinweis[hidden],
  body.spielt .bild[data-bild="spiel"]:has(#frage:not([hidden])) #finalfrage[hidden]{display:none!important}
}

/* Verdienter Joker und kurze Show-Effekte: keine zusätzliche Wartezeit. */
.show-joker.bereit{background:var(--gold);color:#20160a;border-color:#ffe297;box-shadow:0 0 14px #ffc83d40}
.show-joker.bereit:disabled{opacity:.75}
.show-joker.laedt{border-color:#ffcf62;color:#ffdc87}
.show-effekte{position:fixed;inset:0;z-index:76;pointer-events:none;overflow:hidden}
.show-belohnung{position:absolute;left:50%;max-width:calc(100vw - 32px);
  padding:11px 18px;border:1px solid #ffe09a;border-radius:14px;
  background:linear-gradient(120deg,#ffd96d,#ffb51b);color:#30200c;
  box-shadow:0 5px 28px #020b2480;font-size:clamp(.8rem,3.8vw,1.15rem);
  font-weight:950;text-align:center;white-space:nowrap;letter-spacing:.035em}
.show-funke{position:absolute;width:7px;height:11px;border-radius:2px}
@media(max-height:560px) and (orientation:landscape){
  body.spielt .bild[data-bild="spiel"]>.frage{font-size:clamp(.9rem,1.8vw,1.1rem)}
}
@media(prefers-reduced-motion:reduce){
  .show-effekte{display:none}
}

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

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

/* Zeitbonus und Schutzschild stehen seit dem 06.11.2026 unten bei den
   Abzeichen, nicht mehr als Knopf oben: Beide wirken von selbst, es gibt
   nichts zu druecken. Sie sehen deshalb aus wie ein Abzeichen und nicht wie
   ein Schalter — Kreis, wenn sie fehlen, Haken, wenn man sie hat. */
.show-selbst{color:#c0d0ea}
.show-selbst.geschafft{color:var(--gold);font-weight:800}
.show-selbst.weg{color:#8aa3c8}

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

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

/* Die erste Wahl der Doppelchance: NICHT wie eine Loesung aussehen lassen.
   Gruen wuerde „richtig" heissen, und aufgeloest ist noch nichts. Also nur
   ein Rahmen und ein Haken-Platz. */
.antwort.doppel-gewaehlt{outline:3px solid var(--gold);outline-offset:-3px;
  box-shadow:0 0 14px #ffc83d55}

/* Die Schwellentabelle im Regeltext. Schmal, damit sie auf dem Telefon
   nicht quer herausragt. */
.regel-tabelle{border-collapse:collapse;margin:8px 0 12px;font-size:.84rem}
.regel-tabelle th,.regel-tabelle td{padding:3px 10px 3px 0;text-align:left}
.regel-tabelle th{color:#ffdc87;font-weight:800}
.regel-tabelle td:not(:first-child),.regel-tabelle th:not(:first-child){
  text-align:center;padding-right:0;min-width:3.2em}
.regel-tabelle tr+tr td{border-top:1px solid #1a4fa033}
@media(max-width:540px){
  .show-extras .show-name{display:none}
  .show-ressourcen .show-joker{font-size:.62rem;padding:5px 7px;min-height:32px}
  .show-ressourcen{gap:4px}
  .show-extras .show-serie{font-size:.7rem;gap:5px}
}
/* Das nächste Serienziel bleibt auch auf kleinen Displays lesbar — und in
   ALLEN Zuständen gleich hoch, damit beim Antworten nichts springt. */
body.spielt .show-extras .show-moment{display:block;min-height:2.8em}

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

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

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