/* =====================================================================
   Quiznight 2 · Spielprobe — das Blatt um Wand und Hand herum.
   Alles hier liegt in der Ebene `dokument`, damit qn.css und das CSS der
   Kategorien (ohne Ebene) immer gewinnen. Eigene Klassen tragen `sp-`.
   ===================================================================== */
@layer dokument {
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #07080c; color: var(--t0, #f2f4f8);
  font-family: var(--f-body, system-ui, sans-serif); font-size: 14px; line-height: 1.45;
  overflow: hidden;
}
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acc2, #00d6c2); outline-offset: 2px; border-radius: 6px; }

/* ---------- Grundgerüst ---------- */
.sp-app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100vh; }
.sp-leiste {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: rgba(10, 12, 18, .92); border-bottom: 1px solid #171c26; min-height: 46px;
}
.sp-marke { display: flex; align-items: center; gap: 9px; margin-right: 6px; }
.sp-marke i { width: 20px; height: 20px; border-radius: 7px; background: linear-gradient(145deg, #7c5cff, #00d6c2); }
.sp-marke b { font-family: var(--f-display, inherit); font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
.sp-marke span { display: block; font-size: 9.5px; color: var(--t2, #8b93a7); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; line-height: 1; }
/* Ein Fließtext, kein Flex: Wird die Leiste knapp, läuft er mit „…“ aus — als Flex lagen die Teile übereinander („TRU“ unter „Wahr oder falsch“, M4). */
.sp-status { display: block; min-width: 0; flex: 1; font-size: 13px; color: var(--t1, #c7cdd9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-status b { color: #fff; }
.sp-status .sp-kat { display: inline-block; margin: 0 4px; font-family: var(--f-mono, monospace); font-size: 11px; color: var(--acc2, #00d6c2); background: color-mix(in srgb, var(--acc2, #00d6c2) 14%, transparent); padding: 2px 7px; border-radius: 6px; }
.sp-uhr { font-family: var(--f-mono, monospace); font-size: 13px; font-weight: 700; color: var(--t0); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.sp-uhr.knapp { color: #ff6b6b; }
.sp-knopf {
  font-size: 12.5px; font-weight: 700; color: var(--t1, #c7cdd9);
  background: #11151d; border: 1px solid #1d2430; border-radius: 8px; padding: 6px 11px; cursor: pointer;
}
.sp-knopf:hover { color: #fff; border-color: #2b3446; }
.sp-knopf.an { background: color-mix(in srgb, #7c5cff 30%, #11151d); border-color: color-mix(in srgb, #7c5cff 70%, transparent); color: #fff; }
.sp-knopf.stark { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.sp-knopf.still { opacity: .55; }
/* Der Hinweis gibt nach, nie die Seite (Generaldurchlauf 02.11., M4): „Angehalten — der Abend wartet.“ und „▶ Weiter spielen“ machten die
   Leiste breiter als das Fenster — die Spalte des Rasters wuchs mit, die Bühne rückte ~70 px nach rechts, das Zahnrad lag abgeschnitten. */
.sp-hinweis { font-size: 12px; color: #ffcc4d; white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sp-hinweis.ruhig { font-size: inherit; color: var(--t1, #c7cdd9); white-space: normal; }

/* ---------- Der Spielraum: Wand links, Hand rechts ---------- */
.sp-raum { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 16px 18px 14px; min-height: 0; align-items: start; }
.sp-wandspalte { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 8px; height: 100%; }
.sp-spaltenkopf { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t2, #8b93a7); }
.sp-spaltenkopf .luft { flex: 1; }
.sp-wandhalter { position: relative; min-height: 0; overflow: hidden; }
.sp-wandhalter > .qn-buehne { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sp-handspalte { display: grid; grid-template-rows: auto 1fr; gap: 8px; height: 100%; min-height: 0; }
.sp-handhalter { position: relative; min-height: 0; }
.sp-handhalter > .qn-hand { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 0 0 5px #0b0d13, 0 0 0 6px #2a3040, 0 30px 80px rgba(0, 0, 0, .55); }

/* ---------- Die Lobby ---------- */
.sp-lobby { padding: 26px 30px 60px; max-width: 1080px; overflow: auto; height: 100%; }
.sp-lobby h1 { font-family: var(--f-display, inherit); font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.05; text-wrap: balance; }
.sp-lobby .sp-unter { color: var(--t1, #c7cdd9); max-width: 70ch; margin: 0 0 22px; }
.sp-block { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid #171c26; }
.sp-block > em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t2, #8b93a7); padding-top: 8px; }
.sp-block .sp-reihe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-block .sp-erkl { grid-column: 2; font-size: 12.5px; color: var(--t2, #8b93a7); margin-top: -4px; max-width: 76ch; }
/* STIL (stile.js): die sechs ganzen Abende unter den Sets, in der Spalte der Knöpfe. */
.sp-block .sp-abende { grid-column: 2; margin-top: 6px; }
/* Bauteile: eine Reihe je Bauteil, vorne sein Name (qn.js, BAUTEILE) */
.sp-bauteile { display: grid; gap: 6px; }
.sp-bt-name { min-width: 5.6em; font-size: 12.5px; font-weight: 700; color: var(--t1, #c7cdd9); }
.sp-katliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.sp-kat {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; cursor: pointer;
  background: #0e1118; border: 1px solid #171c26; color: var(--t1, #c7cdd9); text-align: left; min-width: 0;
}
.sp-kat.an { background: color-mix(in srgb, var(--ak, var(--acc)) 18%, #0e1118); border-color: color-mix(in srgb, var(--ak, var(--acc)) 55%, transparent); color: #fff; }
.sp-kat .g { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--ak, var(--acc)) 26%, #151a24); color: var(--ak, var(--acc)); }
.sp-kat .g svg { width: 13px; height: 13px; }
/* Die Farbwahl der Lobby: je Knopf die zwei Set-Farben als Muster. */
.sp-farbe { display: inline-flex; align-items: center; gap: 7px; }
.sp-farbe i { width: 18px; height: 12px; border-radius: 3px; display: block; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.sp-eigen { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.sp-eigen input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid #1d2430; border-radius: 6px; background: #11151d; cursor: pointer; }
.sp-eigen select { font: inherit; font-size: 12px; color: var(--t1, #c7cdd9); background: #11151d; border: 1px solid #1d2430; border-radius: 6px; padding: 4px 6px; }
.sp-kat b { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-kat .nr { margin-left: auto; font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--t2, #8b93a7); flex: none; }
.sp-kat.fehlt { opacity: .5; }
.sp-kat.fehlt .nr { color: #ffcc4d; }
.sp-start { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.sp-start .sp-knopf.stark { font-size: 15px; padding: 11px 22px; border-radius: 12px; }
.sp-start .sp-erkl { font-size: 12.5px; color: var(--t2, #8b93a7); }

/* ---------- DIE TAFEL — Zwischenstand und Abendende ----------
   Drei Regeln, aus denen alles andere folgt:
   1. Die Leiter FUELLT die Hoehe (`repeat(var(--zeilen), 1fr)`) — vorher
      stand sie oben und liess darunter die halbe Wand leer.
   2. Der Anteilsbalken ist der HINTERGRUND der Zeile, keine Spur darin.
      So koennen Flaeche und Inhalt sich nicht ins Gehege kommen.
   3. Die Schrift folgt der Spielerzahl, mit einem Pixel-Boden: Auf 628x390
      ist 1cqmin 3,9 px, auf 1608x940 sind es 9,4 px — ohne Boden waere die
      Nebenzeile auf der kleinen Buehne sieben Pixel hoch.
   ------------------------------------------------------------- */
.sp-tafel-leib {
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding: 1.4cqmin 3.4cqmin 2cqmin; gap: 1.8cqmin; min-height: 0;
}
.sp-tafel-kopf { font-family: var(--f-display); font-size: 5cqmin; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.sp-tafel-kopf small { display: block; font-size: max(9px, 2.2cqmin); font-weight: 600; color: var(--t2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5cqmin; }

.sp-feld-haupt { display: grid; grid-template-columns: 1fr 34cqmin; gap: 3cqmin; min-height: 0; }
.sp-tafel-liste { display: grid; grid-template-rows: repeat(var(--zeilen, 4), 1fr); gap: 1cqmin; min-height: 0; }

/* Die Zeile ist eine BAHN, keine Tabellenzeile: Name links, dann die Strecke,
   auf der die Figur steht, dann die Zahl als Fussnote. Die Figurgroesse haengt
   an der Spielerzahl — bei vieren gross genug fuer Gesichter, bei achten noch
   gross genug, um sie zu unterscheiden. */
.sp-zeile {
  --mgr: min(11cqmin, calc(52cqmin / var(--zeilen, 4)));
  display: grid; grid-template-columns: 5cqmin minmax(0, 20cqmin) minmax(0, 1fr) 12cqmin 4.6cqmin;
  align-items: center; gap: 2cqmin; padding: 0 2.4cqmin; border-radius: 2.4cqmin;
  min-height: 0; position: relative;
  background: color-mix(in srgb, var(--t0) 6%, transparent);
}

/* Die Strecke. Sie ist die Spur, die die Figur gezogen hat — deshalb laeuft
   sie hinter ihr her und hoert dort auf, wo die Figur steht. */
.sp-bahn { position: relative; height: 100%; min-width: 0; }
.sp-spur {
  position: absolute; left: 0; top: 50%; height: 1.2cqmin; width: var(--p, 0%);
  transform: translateY(-50%); border-radius: 10cqmin;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acc) 12%, transparent),
    color-mix(in srgb, var(--acc) 62%, transparent));
  transition: width var(--d-xl) var(--k-ein);
}
/* Die Figur FAEHRT auf ihre Entfernung. Das ist die eine Bewegung, die den
   ganzen Schirm traegt: Man sieht den Stand, bevor man eine Zahl gelesen hat. */
.sp-figur {
  position: absolute; top: 50%;
  /* Nie ueber die Bahnkante hinaus: Bei null Punkten stand die Figur auf
     x=0 und hing zur Haelfte heraus, beim Fuehrenden lag sie auf der
     Punktespalte. `clamp` haelt sie zwischen beiden Raendern. */
  left: clamp(calc(var(--mgr) / 2), var(--p, 0%), calc(100% - var(--mgr) / 2));
  transform: translate(-50%, -50%);
  transition: left var(--d-xl) var(--k-ein);
  display: grid; place-items: center;
}
.sp-figur .qn-av { --gr: var(--mgr); }
/* Die Spur hoert dort auf, wo die Figur steht — nicht an der Spaltenkante. */
.sp-spur { max-width: calc(100% - var(--mgr) / 2); }
.sp-zeile.erster .sp-spur {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acc) 20%, transparent), var(--acc));
}
.sp-zeile.du { box-shadow: inset 0 0 0 .28cqmin color-mix(in srgb, var(--acc2) 70%, transparent); }
.sp-zeile.erster .rang { color: #ffd166; }
.sp-zeile .rang { font-family: var(--f-mono); font-size: max(11px, 3.4cqmin); font-weight: 700; color: var(--t2); }
.sp-zeile .mitte { display: grid; gap: .5cqmin; min-width: 0; align-content: center; }
.sp-zeile .name { font-size: max(12px, 3.8cqmin); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zugewinn und Stand stehen UEBEREINANDER in einer Spalte: Nebeneinander
   nahmen sie der Bahn ein Fuenftel der Breite, und die Figur des Fuehrenden
   lag auf dem „+300". */
.sp-zeile .zahlen { display: grid; justify-items: end; gap: 0; min-width: 0; }
.sp-zeile .plus {
  font-family: var(--f-mono); font-size: max(9px, 2.4cqmin); color: var(--acc2);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.sp-zeile .plus.null { color: var(--t2); }
.sp-zeile .pkt { font-family: var(--f-mono); font-size: max(13px, 4.4cqmin); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.sp-zeile .sprung {
  font-size: max(9px, 2.4cqmin); font-weight: 700; color: var(--t2); text-align: right;
  opacity: 0; transition: opacity var(--d-mittel) var(--k-ein);
}
.sp-zeile .sprung.da { opacity: 1; }
.sp-zeile .sprung.hoch { color: #4ee08a; }
.sp-zeile .sprung.runter { color: #ff6b6b; }

/* Die Formkurve: ein Quadrat je Frage dieser Runde — voll getroffen,
   halb = Punkte ohne Treffer, leer = nichts. */
.sp-form { display: flex; gap: .6cqmin; }
.sp-form i {
  width: max(5px, 1.5cqmin); height: max(5px, 1.5cqmin); border-radius: .4cqmin;
  box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--t0) 26%, transparent);
}
.sp-form i.f2 { background: var(--acc2); box-shadow: none; }
.sp-form i.f1 { background: color-mix(in srgb, var(--acc2) 42%, transparent); box-shadow: none; }
.sp-form-zahl { font-family: var(--f-mono); font-size: max(9px, 2.2cqmin); color: var(--t2); }

/* Die Momentkarte: EINE Aussage, gross. */
/* Die Karte hat jetzt eine Figur — deshalb weniger Luft zwischen den
   Zeilen und die Zahl etwas kleiner: Das Gesicht traegt, nicht die Ziffer. */
.sp-moment-figur { display: grid; place-items: center; margin-bottom: .4cqmin; }
.sp-moment-figur .qn-av { --gr: 19cqmin; }
.sp-moment {
  display: grid; align-content: center; justify-items: center; gap: .5cqmin; text-align: center;
  padding: 2.4cqmin 2.6cqmin; border-radius: 3.4cqmin; min-width: 0;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  box-shadow: inset 0 0 0 .24cqmin color-mix(in srgb, var(--acc) 40%, transparent);
}
.sp-moment-marke {
  color: var(--acc2); font-size: max(9px, 2.2cqmin); font-weight: 600;
  line-height: 1.25; letter-spacing: .06em; text-transform: uppercase;
}
.sp-moment-zahl { font-family: var(--f-mono); font-size: 9.5cqmin; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.sp-moment-wort { font-size: max(10px, 2.8cqmin); color: var(--t1); font-weight: 700; }
.sp-moment-satz { font-size: max(10px, 2.6cqmin); color: var(--t2); line-height: 1.35; }

/* Das Rundenband: der Abend als Streifen. */
.sp-band { display: flex; align-items: center; gap: 2cqmin; min-height: 0; }
.sp-band-wort {
  color: var(--t2); white-space: nowrap; font-size: max(9px, 2cqmin); font-weight: 600;
  line-height: 1.25; letter-spacing: .06em; text-transform: uppercase;
}
.sp-band-wort.rechts { margin-left: auto; }
.sp-band-felder { display: flex; gap: .5cqmin; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
/* Die Masse haengen am BAND, nicht an `.sp-feld` allein: Dieselbe Klasse
   traegt in der Hand das Schreibfeld (`.qh-schreib.sp-feld`), und eine
   generische Regel haette es auf 2,2cqmin Hoehe gestaucht. Der gemeinsame
   Behaelter beider Baender ist `.sp-band-felder` — der ist die richtige
   Klammer, nicht `.sp-band` (das Abendende hat kein Rundenband). */
.sp-band-felder .sp-feld {
  flex: 1 1 0; max-width: 3.4cqmin; height: 2.2cqmin; border-radius: .5cqmin;
  background: color-mix(in srgb, var(--t0) 10%, transparent);
}
.sp-band-felder .sp-feld.s1 { background: color-mix(in srgb, var(--acc2) 25%, transparent); }
.sp-band-felder .sp-feld.s2 { background: color-mix(in srgb, var(--acc2) 45%, transparent); }
.sp-band-felder .sp-feld.s3 { background: color-mix(in srgb, var(--acc2) 72%, transparent); }
.sp-band-felder .sp-feld.s4 { background: var(--acc2); }
.sp-band-felder .sp-feld.naechst { background: transparent; box-shadow: inset 0 0 0 .26cqmin var(--acc); }

/* Die Rechtszeile: Ein Gast ohne Handy sieht in der Activity sonst nie ein
   Impressum — die Wand ist dann die einzige Flaeche, die er hat. */
.sp-recht { font-size: max(9px, 1.8cqmin); color: color-mix(in srgb, var(--t2) 80%, transparent); text-align: center; }

/* Auf der kleinen Buehne kippt die Momentkarte unter die Leiter, statt
   ihr die Breite zu nehmen. Nicht schrumpfen: umschalten. */
.sp-schmal .sp-feld-haupt { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 1.4cqmin; }
.sp-schmal .sp-moment { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; padding: 1.6cqmin 2.4cqmin; gap: 1.6cqmin; }
.sp-schmal .sp-moment-marke { display: none; }
.sp-schmal .sp-moment-zahl { font-size: 6cqmin; }
.sp-schmal .sp-form { display: none; }



/* ================================================================
   DIE ZEREMONIE — das Abendende.

   Ein Raster, das sich in Stufen fuellt. Alle vier Reihen stehen von
   Anfang an, nur unsichtbar: So springt nichts, wenn ein Schlag
   dazukommt. Die eine Ausnahme ist die grosse Zahl im Kopf — sie
   FAEHRT auf ihre kleine Groesse, statt zu verschwinden, denn sie ist
   die Ueberschrift des Abends und soll oben bleiben.
   ================================================================ */
/* ACHTUNG, die Falle dieser Datei: Alles hier liegt in der Ebene
   `dokument` (siehe Kopf), qn.css liegt in KEINER. Ungeebnete Regeln
   gewinnen gegen geebnete — unabhaengig von der Spezifitaet. Eine Regel
   hier kann also nichts aus qn.css ueberschreiben, auch nicht mit drei
   Klassen. Gemessen: zwei Anlaeufe, `position: absolute` und
   `grid-template-rows: 1fr`, blieben beide wirkungslos.

   Deshalb wird hier nicht ueberschrieben, sondern die vorhandene
   Struktur benutzt: Die Buehne hat zwei Reihen (`auto 1fr` — Kopf und
   Rest). Die Zeremonie hat keinen Kopf; ihr erster Schlag IST die
   Ueberschrift. Also legen sich ihre drei Schichten alle in Reihe ZWEI,
   uebereinander in dieselbe Zelle. Reihe eins bleibt leer und damit
   null hoch. Das braucht kein `position: absolute` und kein
   `!important`. */
.sp-ende { position: relative; overflow: hidden; }
.sp-e-licht, .sp-e-funken, .sp-e-leib { grid-row: 2; grid-column: 1; }

/* Das Licht: ein Kegel von oben, der auf die Mitte faellt. Es liegt in
   derselben Zelle wie der Leib, aber davor im Dokument — und damit
   darunter. */
.sp-e-licht {
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -12%, color-mix(in srgb, var(--jetzt) 18%, transparent), transparent 62%),
    radial-gradient(80% 50% at 50% 108%, color-mix(in srgb, var(--acc2) 16%, transparent), transparent 70%);
}
.sp-e-funken { pointer-events: none; overflow: hidden; }
.sp-e-funken i {
  position: absolute; top: -6cqmin; width: 1.4cqmin; height: 2.4cqmin; border-radius: .3cqmin;
  background: linear-gradient(180deg, var(--jetzt), var(--acc));
  opacity: 0; transform: scale(var(--fs, 1));
  /* Zwei Durchlaeufe, dann ist Schluss (`both` haelt den Endzustand:
     unsichtbar). Konfetti, das nach einer halben Minute noch faellt, ist
     kein Jubel mehr, sondern Unruhe. */
  animation: sp-funke var(--fd, 3.4s) linear var(--fv, 0s) 2 both;
}
@keyframes sp-funke {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  92%  { opacity: .65; }
  100% { opacity: 0; transform: translate(var(--fx, 0), 112cqmin) rotate(520deg) scale(var(--fs, 1)); }
}
/* Gaming (Motiv „pixel“): Das Konfetti fällt als Pixel — quadratisch, in
   den drei Farben des Sets, ohne Drehung und in Stufen, wie ein Sprite auf
   einem alten Schirm. Wann es fällt, bleibt wie oben (erst mit dem Pokal). */
[data-motiv="pixel"] .sp-e-funken i {
  width: 1.8cqmin; height: 1.8cqmin; border-radius: 0; background: var(--jetzt);
  box-shadow: 0 0 1.2cqmin color-mix(in srgb, var(--jetzt) 55%, transparent);
  animation-name: sp-funke-pixel; animation-timing-function: steps(24, end);
}
/* Der Ruf des Sets über dem Sieger (Paket finale.ruf): kommt mit dem Pokal
   und blinkt in Stufen wie der Highscore auf einem Automaten. */
.sp-f-ruf {
  position: absolute; left: 50%; top: -66%; transform: translateX(-50%); white-space: nowrap; opacity: 0; z-index: 2;
  font-family: var(--f-mono); font-weight: 700; font-size: 2.4cqmin; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jetzt); text-shadow: .3cqmin .3cqmin 0 var(--acc2);
}
.sp-e-jubel .sp-f-ruf { animation: sp-f-ruf 2.2s steps(1, end) 1 both; }
@keyframes sp-f-ruf { 0% { opacity: 0; } 12% { opacity: 1; } 28% { opacity: .1; } 40% { opacity: 1; } 56% { opacity: .1; } 68%, 100% { opacity: 1; } }
/* Die Spielhalle steht hinter dem Podest: Die Kulisse ist gespiegelt, die
   Reihe der Automaten links statt unter den Karten rechts (Prüfung). Die
   Eigenschaft scale verträgt sich mit dem Atmen (transform) der Szene. */
.sp-ende .qn-szene[data-gestalt="arcade"] .qsz-bild { scale: -1 1; }
/* Kino ebenso: Der helle Eingang von kn-teppich steht gespiegelt rechts unter Liste und Schaufenster,
   das Treppchen links vor der dunklen Wand (Prüfung: Schrift auf dem hellen Foyer hatte 1,2 : 1). */
.sp-ende .qn-szene[data-gestalt="premiere"] .qsz-bild { scale: -1 1; }
[data-motiv="pixel"] .sp-e-funken i:nth-child(3n+1) { background: var(--acc); box-shadow: 0 0 1.2cqmin color-mix(in srgb, var(--acc) 55%, transparent); }
[data-motiv="pixel"] .sp-e-funken i:nth-child(3n+2) { background: var(--acc2); box-shadow: 0 0 1.2cqmin color-mix(in srgb, var(--acc2) 55%, transparent); }
@keyframes sp-funke-pixel {
  0%   { opacity: 0; transform: translate(0, 0) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  92%  { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--fx, 0), 112cqmin) scale(var(--fs, 1)); }
}
/* Kino (Motiv „filmstreifen"): Das Konfetti ist Popcorn — helle, unregelmäßige
   Körner, die taumelnd fallen (jedes vierte ein Stück dunkler, wie geröstet).
   Der Ruf des Sets („Großes Kino!") steht wie ein Titel auf der Leinwand:
   Leuchtschrift, die einmal aufgeht — kein Blinken in Stufen (das ist der Automat). */
[data-motiv="filmstreifen"] .sp-e-funken i {
  width: 2.1cqmin; height: 1.9cqmin; border-radius: 46% 54% 50% 50% / 56% 50% 50% 44%;
  background: radial-gradient(circle at 38% 34%, #fff 0 18%, color-mix(in srgb, var(--t0) 86%, var(--acc)) 46%, color-mix(in srgb, var(--acc) 58%, var(--t0)) 100%);
}
[data-motiv="filmstreifen"] .sp-e-funken i:nth-child(4n+1) {
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, #fff 70%, var(--acc)) 0 16%, color-mix(in srgb, var(--acc) 60%, var(--t0)) 50%, color-mix(in srgb, var(--acc) 80%, var(--g0)) 100%);
}
[data-motiv="filmstreifen"] .sp-f-ruf {
  font-family: var(--f-display); font-weight: 900; font-size: 3.4cqmin; letter-spacing: .02em; text-transform: none;
  color: var(--t0); text-shadow: .22cqmin .22cqmin 0 color-mix(in srgb, var(--acc) 82%, var(--g0)), 0 0 2.4cqmin color-mix(in srgb, var(--acc) 70%, transparent);
}
/* Anime (Motiv „blueten"): Das Konfetti sind Kirschblütenblätter — jedes mit Kerbe (--blueten-blatt, qn.css),
   rosa bis weiß, sie taumeln und drehen sich im Fallen. Der Ruf des Sets („Sugoi!") steht wie die Titelkarte
   einer Anime-Folge: Rosa mit Tuscherand und weißem Außenrand, schräg, in einem Kranz Fokuslinien — er schlägt
   einmal ein (kein Blinken). Der Außenrand ist text-shadow, kein filter: Der träfe die Fokuslinien mit. */
[data-motiv="blueten"] .sp-e-funken i {
  width: 1.7cqmin; height: 2.1cqmin; border-radius: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 40%, #fff) 0, color-mix(in srgb, var(--acc) 82%, #fff) 55%, var(--acc) 100%);
  -webkit-mask: var(--blueten-blatt) center / 100% 100% no-repeat; mask: var(--blueten-blatt) center / 100% 100% no-repeat;
  animation-name: sp-funke-blatt;
}
[data-motiv="blueten"] .sp-e-funken i:nth-child(3n+1) { background: linear-gradient(0deg, #fff 0, color-mix(in srgb, var(--acc) 40%, #fff) 100%); }
@keyframes sp-funke-blatt {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) rotateX(0deg) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  50%  { transform: translate(calc(var(--fx, 0px) * .4 - 6cqmin), 56cqmin) rotate(260deg) rotateX(240deg) scale(var(--fs, 1)); }
  92%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--fx, 0), 112cqmin) rotate(520deg) rotateX(480deg) scale(var(--fs, 1)); }
}
[data-motiv="blueten"] .sp-f-ruf {
  font-family: var(--f-display); font-weight: 900; font-size: 4.4cqmin; letter-spacing: .01em; text-transform: uppercase;
  color: var(--acc); -webkit-text-stroke: .06em color-mix(in srgb, var(--g0) 70%, #000); paint-order: stroke fill;
  text-shadow: .05em .06em 0 color-mix(in srgb, var(--g0) 70%, #000), .045em 0 0 var(--t0), -.045em 0 0 var(--t0), 0 .045em 0 var(--t0), 0 -.045em 0 var(--t0);
}
[data-motiv="blueten"] .sp-f-ruf::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30cqmin; height: 30cqmin; margin: -15cqmin 0 0 -15cqmin; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 2deg, color-mix(in srgb, var(--t0) 58%, transparent) 0 .8deg, transparent .8deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 32%, #000 44%, transparent 100%); mask: radial-gradient(closest-side, transparent 32%, #000 44%, transparent 100%);
}
[data-motiv="blueten"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-anime 700ms var(--k-schnapp) 1 both; }
@keyframes sp-f-ruf-anime {
  0%   { opacity: 0; transform: translateX(-50%) rotate(-14deg) scale(.3); }
  55%  { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1.18); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-6deg); }
}
[data-motiv="filmstreifen"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-kino 900ms var(--k-schnapp) 1 both; }
@keyframes sp-f-ruf-kino {
  0%   { opacity: 0; transform: translateX(-50%) scale(.6); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1.12); }
  100% { opacity: 1; transform: translateX(-50%); }
}
/* Musik (Motiv „tasten"): Die Konfetti-Kanonen schießen Plektren (oben breit, unten spitz) in Lime und
   Magenta und dazwischen Papierschnipsel. Der Ruf („Nummer eins!") ist Neon wie der Titel der Lobby: Er
   zündet einmal flackernd und steht dann — kein Blinken in Stufen (das ist der Automat). */
[data-motiv="tasten"] .sp-e-funken i {
  width: 1.9cqmin; height: 2.2cqmin; border-radius: 0; background: var(--acc);
  clip-path: polygon(50% 100%, 7% 38%, 4% 20%, 14% 6%, 32% 0, 68% 0, 86% 6%, 96% 20%, 93% 38%);
}
[data-motiv="tasten"] .sp-e-funken i:nth-child(3n+1) { background: var(--acc2); }
[data-motiv="tasten"] .sp-e-funken i:nth-child(3n+2) {
  width: 1.2cqmin; height: 2.4cqmin; clip-path: none; border-radius: .1cqmin;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t0) 92%, var(--acc)), color-mix(in srgb, var(--t0) 76%, var(--g3)));
}
[data-motiv="tasten"] .sp-f-ruf {
  font-family: var(--f-display); font-weight: 900; font-size: 3.4cqmin; letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in srgb, #fff 34%, var(--acc));
  text-shadow: 0 0 .6cqmin color-mix(in srgb, var(--acc) 90%, transparent), 0 0 2.4cqmin color-mix(in srgb, var(--acc) 60%, transparent), .2cqmin .2cqmin 0 color-mix(in srgb, var(--acc2) 70%, var(--g0));
  /* Die Röhren hängen auf einer dunklen Platte wie jede Leuchtschrift: Vor den Lasern im Dunst (die Kulisse ist dort hell und
     grün) stand das Lime sonst bei 2,3 : 1 — auf der Platte liest es sich auch als Ruf über dem Sieger. */
  padding: .5cqmin 1.6cqmin .6cqmin; border-radius: .8cqmin;
  background: color-mix(in srgb, var(--g0) 84%, transparent);
  box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--acc) 34%, transparent), 0 0 2.4cqmin color-mix(in srgb, var(--acc) 24%, transparent);
}
[data-motiv="tasten"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-musik 1100ms steps(1, end) 1 both, sp-f-ruf-musik-pop 700ms var(--k-schnapp) 1 both; }
@keyframes sp-f-ruf-musik { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: .3; } 28% { opacity: 1; } 36% { opacity: .55; } 46%, 100% { opacity: 1; } }
@keyframes sp-f-ruf-musik-pop { 0% { transform: translateX(-50%) scale(.7); } 60% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%); } }
/* Weltreise (Motiv „luftpost"): Das Konfetti sind BRIEFMARKEN — Papier mit gezähntem Rand (die Zähnung
   ist eine Maske: Löcher nur am Rand, innen deckt die Fläche) und einem Bildfeld in Azur oder Koralle;
   jede dritte trägt die Streifen der Luftpost. Sie taumeln wie das übrige Konfetti.
   Der Ruf („Erste Klasse!") ist eine GOLDENE BORDKARTE über dem Sieger: Gold ist die Farbe des ersten
   Platzes (die Medaille — die einzige feste Farbe, wie in der Abendkarte), dunkle Schrift wie auf dem
   Abschnitt einer Karte (über 7 : 1), rechts der Abriss mit Kerben und einem kleinen Flieger. Sie wird
   einmal eingesteckt: von unten, ein Ruck, sie steht leicht schräg. */
[data-motiv="luftpost"] .sp-e-funken i {
  --luftpost-zahn: .24cqmin;
  width: 2.3cqmin; height: 2.8cqmin; border-radius: 0; box-sizing: border-box; padding: var(--luftpost-zahn);
  background: linear-gradient(var(--acc), var(--acc)) 50% 50% / 62% 66% no-repeat, color-mix(in srgb, var(--t0) 94%, var(--acc2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle calc(var(--luftpost-zahn) * .7), #0000 92%, #000) calc(var(--luftpost-zahn) * -1) calc(var(--luftpost-zahn) * -1) / calc(var(--luftpost-zahn) * 2) calc(var(--luftpost-zahn) * 2) round;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle calc(var(--luftpost-zahn) * .7), #0000 92%, #000) calc(var(--luftpost-zahn) * -1) calc(var(--luftpost-zahn) * -1) / calc(var(--luftpost-zahn) * 2) calc(var(--luftpost-zahn) * 2) round;
}
[data-motiv="luftpost"] .sp-e-funken i:nth-child(3n+2) {
  background: linear-gradient(var(--acc2), var(--acc2)) 50% 50% / 62% 66% no-repeat, color-mix(in srgb, var(--t0) 94%, var(--acc));
}
[data-motiv="luftpost"] .sp-e-funken i:nth-child(3n) {
  background: repeating-linear-gradient(135deg, var(--acc) 0 .42cqmin, var(--t0) .42cqmin .84cqmin, var(--acc2) .84cqmin 1.26cqmin, var(--t0) 1.26cqmin 1.68cqmin) 50% 50% / 62% 66% no-repeat, color-mix(in srgb, var(--t0) 94%, var(--acc2));
}
[data-motiv="luftpost"] .sp-f-ruf {
  --luftpost-gold: #e6a514; --luftpost-gold-hell: #ffe58a; --luftpost-tinte: #2a1a02;
  top: -78%; padding: .8cqmin 4.3cqmin .8cqmin 1.8cqmin; border-radius: .45cqmin;
  font-family: var(--f-mono); font-weight: 700; font-size: 2.4cqmin; letter-spacing: .14em; text-transform: uppercase;
  color: var(--luftpost-tinte); text-shadow: 0 .12cqmin 0 color-mix(in srgb, var(--luftpost-gold-hell) 70%, transparent);
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--luftpost-tinte) 45%, transparent) 0 .36cqmin, transparent .36cqmin .72cqmin) calc(100% - 2.5cqmin) 0 / .16cqmin 100% no-repeat,
    linear-gradient(162deg, var(--luftpost-gold-hell) 0, var(--luftpost-gold) 52%, color-mix(in srgb, var(--luftpost-gold) 78%, #6b3c00) 100%);
  box-shadow: 0 .5cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent);
  /* die Kerben des Abrisses: oben und unten ein Halbkreis aus der Karte. Beide Lagen decken die ganze Karte
     und werden geschnitten (intersect) — zwei halbe Kacheln ließen am Stoß eine graue Naht durch die Schrift. */
  -webkit-mask: radial-gradient(circle .5cqmin at calc(100% - 2.42cqmin) 0, #0000 94%, #000),
                radial-gradient(circle .5cqmin at calc(100% - 2.42cqmin) 100%, #0000 94%, #000);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle .5cqmin at calc(100% - 2.42cqmin) 0, #0000 94%, #000),
                radial-gradient(circle .5cqmin at calc(100% - 2.42cqmin) 100%, #0000 94%, #000);
          mask-composite: intersect;
}
/* Der kleine Flieger auf dem Abschnitt (eine Zeichnung, keine Marke). */
[data-motiv="luftpost"] .sp-f-ruf::after {
  content: ""; position: absolute; right: .55cqmin; top: 50%; width: 1.5cqmin; height: 1.5cqmin; margin-top: -.75cqmin;
  background: var(--luftpost-tinte); transform: rotate(90deg);
  clip-path: polygon(50% 0, 56% 6%, 57% 38%, 98% 62%, 98% 70%, 57% 58%, 56% 84%, 68% 94%, 68% 100%, 50% 95%, 32% 100%, 32% 94%, 44% 84%, 43% 58%, 2% 70%, 2% 62%, 43% 38%, 44% 6%);
}
[data-motiv="luftpost"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-luftpost 820ms var(--k-schnapp) 1 both; }
@keyframes sp-f-ruf-luftpost {
  0%   { opacity: 0; transform: translateX(-50%) translateY(70%) rotate(-8deg) scale(.86); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(-10%) rotate(1.5deg) scale(1.06); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-2.5deg); }
}

/* Küche (Motiv „fliesen"): Das Konfetti sind bunte ZUCKERSTREUSEL — kleine runde Stäbchen in Tomate, Basilikum,
   Weiß, Eigelb und Rosa (nicht nur weiß: sonst wäre es Schnee), die sich im Fallen drehen. Der Ruf („Erste Sahne!")
   hängt als EMAILLESCHILD über dem Sieger, wie das Schild der Lobby: cremeweiß mit dunklem Rand, zwei Schrauben,
   die Schrift in tiefer Tomate (gemessen über 5 : 1, unabhängig vom Bild dahinter). Es schwingt einmal ein und hängt. */
[data-motiv="fliesen"] .sp-e-funken i {
  width: .75cqmin; height: 2.1cqmin; border-radius: 99px; background: var(--acc);
}
[data-motiv="fliesen"] .sp-e-funken i:nth-child(5n+1) { background: var(--acc2); }
[data-motiv="fliesen"] .sp-e-funken i:nth-child(5n+2) { background: color-mix(in srgb, var(--t0) 94%, var(--acc)); }
[data-motiv="fliesen"] .sp-e-funken i:nth-child(5n+3) { background: color-mix(in srgb, #ffd23f 86%, var(--acc)); }
[data-motiv="fliesen"] .sp-e-funken i:nth-child(5n+4) { background: color-mix(in srgb, #ff9ec7 80%, var(--t0)); }
[data-motiv="fliesen"] .sp-f-ruf {
  --sp-ku-email: #f6efe1; --sp-ku-rand: #3a1a12;
  top: -80%; padding: .7cqmin 2.4cqmin .75cqmin; border-radius: .7cqmin;
  font-family: var(--f-display); font-weight: 900; font-size: 3cqmin; letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 66%, #3a0702); text-shadow: none;
  background:
    radial-gradient(circle at .9cqmin 50%, #c9c2b4 0 .26cqmin, #6b645a .34cqmin, transparent .4cqmin),
    radial-gradient(circle at calc(100% - .9cqmin) 50%, #c9c2b4 0 .26cqmin, #6b645a .34cqmin, transparent .4cqmin),
    linear-gradient(180deg, color-mix(in srgb, #fff 50%, var(--sp-ku-email)), var(--sp-ku-email) 60%, color-mix(in srgb, var(--sp-ku-email) 88%, #b9a98a));
  box-shadow: inset 0 0 0 .3cqmin var(--sp-ku-rand), inset 0 0 0 .5cqmin color-mix(in srgb, var(--sp-ku-email) 70%, #fff), 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent);
  transform-origin: 50% -40%;
}
[data-motiv="fliesen"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-kueche 1100ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-kueche {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-40%) rotate(-12deg); }
  30%  { opacity: 1; transform: translateX(-50%) rotate(7deg); }
  55%  { transform: translateX(-50%) rotate(-4deg); }
  78%  { transform: translateX(-50%) rotate(1.6deg); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-.6deg); }
}

/* Sagenwelt (Motiv „schuppen"): Das Konfetti sind EDELSTEINE aus dem Hort — Smaragd-Splitter (Rauten) und Amethyste
   (Sechsecke), geschliffen, die sich im Fallen drehen. Der Ruf („Sagenhaft!") steht auf einem Band aus Pergament mit
   Purpurkante über dem Sieger, die Schrift in dunkler Tinte (über 12 : 1, unabhängig vom Bild dahinter); es entrollt
   sich einmal und hängt. */
[data-motiv="schuppen"] .sp-e-funken i {
  width: 1.5cqmin; height: 1.9cqmin; border-radius: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 40%, #fff), var(--acc) 48%, color-mix(in srgb, var(--acc) 50%, #02261a));
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}
[data-motiv="schuppen"] .sp-e-funken i:nth-child(3n+1) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc2) 30%, #fff), color-mix(in srgb, var(--acc2) 70%, #b45cff) 48%, color-mix(in srgb, var(--acc2) 50%, #1a0c1c));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
[data-motiv="schuppen"] .sp-e-funken i:nth-child(5n+2) { width: 1cqmin; height: 1.3cqmin; }
[data-motiv="schuppen"] .sp-f-ruf {
  --sp-sw-pergament: #f4e9cd; --sp-sw-tinte: #2a1f14;
  top: -80%; padding: .7cqmin 2.6cqmin .75cqmin; border-radius: .3cqmin;
  font-family: var(--f-display); font-weight: 900; font-size: 3cqmin; letter-spacing: .02em;
  color: var(--sp-sw-tinte); text-shadow: none;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 34%, var(--sp-sw-pergament)), var(--sp-sw-pergament) 60%, color-mix(in srgb, var(--sp-sw-pergament) 86%, #a88a58));
  box-shadow: inset .5cqmin 0 0 var(--acc2), inset -.5cqmin 0 0 var(--acc2), 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent), 0 0 3cqmin color-mix(in srgb, var(--acc) 30%, transparent);
  transform-origin: 50% 50%;
}
[data-motiv="schuppen"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-sagenwelt 1100ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-sagenwelt {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(.15); }
  40%  { opacity: 1; transform: translateX(-50%) scaleX(1.06); }
  70%  { transform: translateX(-50%) scaleX(.98); }
  100% { opacity: 1; transform: translateX(-50%); }
}
[data-motiv="schuppen"] .sp-ende .sp-f-wort { color: var(--t1); }
[data-motiv="schuppen"] .sp-ende .sp-f-platz.s2 .sp-f-medaille { background: color-mix(in srgb, var(--acc2) 86%, var(--g0)); }
/* „Und sie geht an …" (finale.css: Zweitfarbe, pulsiert zwischen 45 % und voller Deckung) — im gedämpften Purpur zu
   leise auf der dunklen Höhle; hier helles Purpur, das nur zwischen 80 % und voll pulsiert (wie bei Musik). */
[data-motiv="schuppen"] .fn-ehr-trommel { color: color-mix(in srgb, var(--acc2) 38%, #fff); animation-name: fn-trommel-sagenwelt; }
@keyframes fn-trommel-sagenwelt { from { opacity: .8; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .36em; } }

.sp-e-leib {
  position: relative; display: grid; grid-template-rows: auto 1fr auto auto auto;
  padding: 2.4cqmin 3.4cqmin 2cqmin; gap: 2cqmin; min-height: 0;
}

/* --- Schlag 0: die eine Zahl ------------------------------------ */
/* Am Abendende steht der Schriftzug ueber allem — es ist der Schirm, den man
   fotografiert, und darauf gehoert der Name des Spiels. */
/* --- Schlag 4: alle Ehren, und wo es weitergeht ------------------ */
.sp-e-fuss {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.4cqmin;
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
.sp-e-fuss.da { opacity: 1; }
/* Die Rechtszeile der Zeremonie kommt zum Schluss, mit dem Fuss. */
.sp-e-recht { opacity: 0; transition: opacity var(--d-lang) var(--k-ein); }
.sp-e-recht.da { opacity: 1; }
.sp-e-fuss .sp-band-felder { min-width: 0; }
/* Die Felder des Abends leuchten in Gold statt im Kategorie-Akzent — hier
   gibt es keine laufende Kategorie mehr, auf die sich eine Farbe beziehen
   koennte. */
.sp-e-fuss .sp-band-felder .sp-feld.s1 { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.sp-e-fuss .sp-band-felder .sp-feld.s2 { background: color-mix(in srgb, var(--acc) 42%, transparent); }
.sp-e-fuss .sp-band-felder .sp-feld.s3 { background: color-mix(in srgb, var(--acc) 68%, transparent); }
.sp-e-fuss .sp-band-felder .sp-feld.s4 { background: var(--acc); }
.sp-e-hinweis {
  font-size: max(9px, 2.2cqmin); font-weight: 700; white-space: nowrap;
  color: color-mix(in srgb, var(--acc) 88%, #fff);
}

/* ---------------- Die kleine Buehne (628x390) ----------------
   Hier wird nicht geschrumpft, sondern umgeschaltet: Der Sieger-Block
   faellt weg (er nahm ein Drittel der Hoehe fuer eine Auskunft, die in
   der ersten Zeile schon steht), der Kopf wird einzeilig, und von den
   drei Momenten bleibt einer. Was bleibt, bleibt lesbar.
   ----------------------------------------------------------- */
.sp-schmal .sp-e-leib { padding: 1.6cqmin 2.4cqmin 1.4cqmin; gap: 1.2cqmin; }
.sp-schmal .sp-e-kopf {
  grid-template-columns: auto auto auto; justify-content: center;
  align-items: baseline; gap: 0 1.6cqmin;
}
.sp-schmal .sp-e-zahl { font-size: 9cqmin; }
/* BEIDE Klassen sitzen auf der Buehne — als Nachfahren-Selektor
   (`.sp-schmal .sp-e-klein`) griff diese Regel nie. */
.sp-schmal.sp-e-klein .sp-e-zahl { font-size: 5.4cqmin; }
.sp-schmal .sp-e-mitte { grid-template-columns: 1fr; }
.sp-schmal .sp-e-sieger { display: none; }
.sp-schmal .sp-e-zeile { grid-template-columns: 4cqmin 5.4cqmin minmax(0, 1fr) 11cqmin; min-height: 5.4cqmin; gap: 1.4cqmin; }
.sp-schmal .sp-e-zeile.erster .rang { display: none; }
/* Ab sieben Zeilen faellt der Titel weg — halbierte Buchstaben sind
   schlechter als keine. Auf der kleinen Buehne gilt das immer. */
.sp-schmal .sp-e-zeile .titel,
.sp-e-eng .sp-e-zeile .titel { display: none; }
.sp-schmal .sp-e-momente { grid-auto-flow: row; grid-auto-rows: auto; }
.sp-schmal .sp-e-moment:nth-child(n+2) { display: none; }
.sp-schmal .sp-e-m-zahl { font-size: 5cqmin; }

/* Die Knöpfe unter der Ergebniskarte (zeigeKarte). Die Hand an Tafel und
   Abendende steht im Pult-Block am Ende dieser Datei. */
.sp-he-knopf {
  display: block; width: 100%; border: 0; min-height: 13cqmin;
  padding: 2.6cqmin 3cqmin; border-radius: 3.4cqmin;
  font-family: inherit; font-size: calc(4cqmin * var(--schrift, 1)); font-weight: 700;
  color: var(--t0); background: color-mix(in srgb, var(--t0) 10%, transparent);
  cursor: pointer; transition: transform var(--d-kurz) var(--k-schnapp);
}
.sp-he-knopf.haupt { background: var(--acc); color: var(--auf-acc); }
.sp-he-knopf.leise { color: var(--t2); font-weight: 600; background: transparent;
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 14%, transparent); }
.sp-he-knopf:active { transform: scale(.97); }

} /* ===== Ende der Ebene `dokument` =====
     Diese Klammer hat gefehlt, seit die Datei entstand: Die Tiefe am Dateiende
     war 1, und damit lag ALLES darunter in der Ebene — auch der Block hier,
     der laut seinem eigenen Kommentar draussen liegen muss. Er tat seither
     nichts von dem, wofuer er geschrieben wurde: kein Zeiger-Cursor auf den
     Kacheln, kein Druckgefuehl, keine gruene Quittung am Abschicken-Knopf.
     Gefunden 2026-09-20 von einem Pruefagenten, nachgemessen an der
     Klammertiefe und am Knopf. */



/* ================================================================
   DAS PODIUM — der Game-Over-Schirm.

   Die Hoehe ist der Punktestand, die FARBE ist der Rang, und beide
   sagen dasselbe: Platz 1 steht im hellsten Violett ganz oben, der
   Letzte im tiefen Indigo. Aus drei Metern liest man eine Treppe.

   Die Spielerfarbe erscheint nur als Ring um die Figur — acht
   gesaettigte Spielerfarben als Saeulen waeren ein Regenbogen, und
   ein Regenbogen sagt nichts ueber Quiznight.
   ================================================================ */
/* Zwei Spalten: das Podium links, die Momente rechts. Vorher lagen die
   Momente als absolute Auflage darueber — und die letzte Saeule lag darunter.
   Eine Spalte kann nicht ueberlappen. */
.sp-ende .sp-e-leib {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) 31cqmin;
  padding: 2.6cqmin 3.4cqmin 2cqmin; gap: 1.6cqmin 3cqmin;
}
.sp-e-kopf, .sp-e-fuss { grid-column: 1 / -1; }
.sp-e-podium { grid-column: 1; }
.sp-e-momente { grid-column: 2; }
/* Ohne Momente (kleine Buehne) nimmt das Podium die ganze Breite. */
.sp-schmal .sp-ende .sp-e-leib, .sp-ende.sp-schmal .sp-e-leib { grid-template-columns: minmax(0, 1fr); }
.sp-schmal .sp-e-podium { grid-column: 1 / -1; }

/* --- Der Kopf: Schriftzug links, die Zahlen des Abends rechts --- */
.sp-e-kopf {
  display: flex; align-items: center; gap: 2cqmin; text-align: left;
  opacity: 0; transform: translateY(-1.6cqmin);
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.sp-e-kopf.da { opacity: 1; transform: none; }
.sp-e-finale {
  font-family: var(--f-display);
  font-size: 2.4cqmin; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--t2); padding-left: 2cqmin;
  border-left: .22cqmin solid color-mix(in srgb, var(--t0) 14%, transparent);
}
.sp-e-luft { flex: 1 1 auto; }
.sp-e-abendzahlen {
  display: flex; align-items: baseline; gap: 1.6cqmin;
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
.sp-e-abendzahlen.da { opacity: 1; }
.sp-e-abendzahlen i {
  font-style: normal; font-size: 2.3cqmin; color: var(--t2); white-space: nowrap;
}
.sp-e-summe {
  font-family: var(--f-mono); font-size: 3.4cqmin; font-weight: 800; color: var(--acc);
  font-variant-numeric: tabular-nums;
}

/* --- Schlag 2: die grosse Zahl, die spaeter andockt --- */
.sp-e-gross {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.86);
  display: grid; justify-items: center; gap: .6cqmin; text-align: center; z-index: 4;
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
  pointer-events: none;
}
.sp-e-gross.da { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Sie faehrt nach OBEN RECHTS aus dem Bild — dorthin, wo sie gleich im Kopf
   wieder auftaucht. Ausblenden an Ort und Stelle waere ein Verschwinden;
   so ist es ein Umzug. */
.sp-e-gross.weg {
  opacity: 0; transform: translate(26%, -320%) scale(.28);
  transition: opacity var(--d-lang) var(--k-aus), transform var(--d-xl) var(--k-ein);
}
.sp-e-gross-ober, .sp-e-gross-unter {
  font-size: 2.4cqmin; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t1);
}
.sp-e-gross-zahl {
  font-family: var(--f-display); font-weight: 900; font-size: 17cqmin; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--pink), var(--acc) 52%, var(--acc2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Das Podium --- */
.sp-e-podium {
  display: grid; grid-template-columns: repeat(var(--saeulen, 4), minmax(0, 1fr));
  align-items: end; gap: 1.6cqmin; min-height: 0; position: relative;
}
/* Die Bodenkante, auf der alle stehen — ohne sie schweben die Saeulen. */
.sp-e-podium::after {
  content: ''; position: absolute; left: -1cqmin; right: -1cqmin; bottom: 0; height: .3cqmin;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--acc) 70%, transparent), transparent);
}
/* Die Turmhoehe ist eine GRID-ZEILE, keine Elementhoehe: `height: var(--h)`
   am Turm selbst hat keinen Bezug, weil seine Zeile `auto` ist — der Turm war
   dann immer nur so hoch wie sein Text, und die Treppe verschwand. Als Zeile
   bezieht sich das Prozent auf die Saeulenhoehe, und die steht. */
.sp-e-saeule {
  --mgr: min(13cqmin, calc(64cqmin / var(--saeulen, 4)));
  display: grid; grid-template-rows: auto minmax(18cqmin, var(--h));
  justify-items: center; align-content: end; height: 100%; min-width: 0;
  opacity: 0; transform: translateY(5cqmin) scale(.9); filter: blur(.6cqmin);
  transition: opacity var(--d-lang) var(--k-ein),
              transform var(--d-lang) var(--k-schnapp),
              filter var(--d-lang) var(--k-ein);
}
.sp-e-saeule.da { opacity: 1; transform: none; filter: none; }

.sp-e-kopfteil { position: relative; display: grid; justify-items: center; margin-bottom: -.6cqmin; z-index: 2; }
.sp-e-kopfteil .qn-av { --gr: var(--mgr); }
/* Die Tintenplatte unter der Figur, mit dem Ring in der Spielerfarbe: So
   gilt jede der zwoelf Monsterfarben auf jedem Untergrund. */
.sp-e-kopfteil .qn-av.mon {
  background: var(--g0); border-radius: 2.2cqmin; padding: .5cqmin;
  box-shadow: 0 0 0 .34cqmin var(--pf), 0 0 2.4cqmin color-mix(in srgb, var(--pf) 45%, transparent);
}

/* Der Turm traegt seinen Text INNEN — also braucht er auch bei null Punkten
   Platz dafuer. `min-height` ist die Untergrenze, `--h` die Aussage darueber:
   Wer fuehrt, steht hoeher, aber niemand steht so flach, dass sein Name
   herauslaeuft. Gemessen: Name 4,2 + Punkte 4 + Rang 2,6 + Titel 2×2 cqmin
   plus Abstaende ergibt rund 17cqmin. */
.sp-e-turm {
  width: 100%; height: 100%; border-radius: 2.2cqmin 2.2cqmin 0 0;
  display: grid; align-content: start; justify-items: center; gap: .1cqmin;
  padding: 1.4cqmin .8cqmin 1cqmin; overflow: hidden; position: relative;
  /* DER MARKENBOGEN: --t laeuft von 0 (Platz 1) bis 1 (letzter). Hell nach
     tief, Violett nach Indigo — die Farbe faellt mit der Hoehe. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc2) calc(var(--t) * 88%), var(--acc)),
    color-mix(in srgb, var(--g1) calc(38% + var(--t) * 30%),
      color-mix(in srgb, var(--acc2) calc(var(--t) * 80%), var(--acc))));
  box-shadow: inset 0 .3cqmin 0 color-mix(in srgb, #fff 30%, transparent);
}
.sp-e-rang {
  font-family: var(--f-mono); font-size: 2.6cqmin; font-weight: 700;
  color: color-mix(in srgb, var(--turm-schrift, #fff) 62%, transparent); line-height: 1;
}
.sp-e-name {
  font-family: var(--f-display); font-weight: 800; font-size: 4.2cqmin; line-height: 1.1;
  letter-spacing: -.02em; max-width: 100%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--turm-schrift, #fff);
}
.sp-e-punkte {
  font-family: var(--f-mono); font-weight: 800; font-size: 4cqmin; line-height: 1.1;
  color: var(--turm-schrift, #fff); font-variant-numeric: tabular-nums;
}
.sp-e-titel {
  font-size: 2cqmin; line-height: 1.25; color: color-mix(in srgb, var(--turm-schrift, #fff) 78%, transparent);
  max-width: 100%; margin-top: .3cqmin;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Der Siegertitel kommt ERST mit seinem Schlag — vorher waere der staerkste
   Schlag des Schirms auf eine Information gefallen, die laengst dastand. */
.sp-e-titel.spaet { opacity: 0; transition: opacity var(--d-lang) var(--k-ein); }
.sp-e-titel.spaet.da { opacity: 1; }

/* Der Sieger: hellstes Violett und eine Lichtkante. Kein Gold — Gold ist
   keine Quiznight-Farbe. */
.sp-e-saeule.erster .sp-e-turm {
  box-shadow: inset 0 .3cqmin 0 color-mix(in srgb, #fff 54%, transparent),
              0 0 0 .22cqmin color-mix(in srgb, var(--pink) 46%, transparent);
}
/* Die eigene Saeule: der einzige Tuerkis auf dem Schirm. */
.sp-e-saeule.du .sp-e-turm {
  background: linear-gradient(180deg, var(--du), color-mix(in srgb, var(--du) 26%, var(--g1)));
  box-shadow: inset 0 .3cqmin 0 color-mix(in srgb, #fff 46%, transparent),
              0 0 0 .24cqmin color-mix(in srgb, var(--du) 70%, transparent);
}
.sp-e-saeule.du .sp-e-rang,
.sp-e-saeule.du .sp-e-name,
.sp-e-saeule.du .sp-e-punkte { color: var(--auf-du); }
.sp-e-saeule.du .sp-e-titel { color: color-mix(in srgb, var(--auf-du) 74%, transparent); }
.sp-e-dufahne {
  position: absolute; top: -2.6cqmin; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 1.9cqmin; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; background: var(--du); color: var(--auf-du);
  padding: .3cqmin 1.2cqmin; border-radius: 1cqmin; white-space: nowrap;
}

/* --- Die Momente: rechts neben dem Podium, nicht darunter --- */
.sp-e-momente {
  display: grid; grid-auto-flow: row; align-content: center; gap: 1.2cqmin;
  min-height: 0; min-width: 0;
}
.sp-e-moment {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: .2cqmin 1.4cqmin; padding: 1.2cqmin 1.6cqmin; border-radius: 1.8cqmin;
  background: color-mix(in srgb, var(--g2) 82%, transparent);
  box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--pink) 30%, transparent);
  opacity: 0; transform: translateX(3cqmin);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-mittel) var(--k-schnapp);
}
.sp-e-moment.da { opacity: 1; transform: none; }
.sp-e-m-marke {
  grid-column: 2; font-size: 1.8cqmin; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pink); line-height: 1.2;
}
.sp-e-m-zahl {
  grid-row: 1 / 3; font-family: var(--f-mono); font-size: 4.4cqmin; font-weight: 800;
  color: var(--t0); line-height: 1; font-variant-numeric: tabular-nums;
}
.sp-e-m-satz {
  grid-column: 2; font-size: 2cqmin; color: var(--t1); line-height: 1.25; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Der Fuss --- */
.sp-e-fuss {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2cqmin;
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
.sp-e-fuss.da { opacity: 1; }
.sp-e-hinweis {
  font-size: 2.2cqmin; font-weight: 700; white-space: nowrap;
  color: color-mix(in srgb, var(--acc) 88%, #fff);
}
.sp-e-recht { font-size: 1.8cqmin; color: var(--t2); }

/* Auf der kleinen Buehne: keine Momente (dort ist die Treppe die Aussage),
   schmalere Saeulen, kein Titel. */
.sp-schmal .sp-e-momente { display: none; }
.sp-schmal .sp-e-titel { display: none; }
.sp-schmal .sp-e-name { font-size: 3.2cqmin; }
.sp-schmal .sp-e-punkte { font-size: 3cqmin; }
.sp-schmal .sp-e-gross-zahl { font-size: 12cqmin; }
/* Ab sieben Saeulen wird es auch auf der grossen Buehne eng. */
.sp-e-eng .sp-e-titel { display: none; }

/* ---------------- Akt zwei: die Ergebniskarte ----------------
   Das Blatt deckt die Hand ab, die Karte liegt in 16:9 — das ist die
   Form, in der sie im Kanal ankommt. Eine Vorschau in einer anderen
   Form waere keine.
   ------------------------------------------------------------ */
/* Ueber dem Zahnrad (z-index 24 in qn.css) und unter dem Einstellungsblatt
   (30): Sonst liegt der Zahnradknopf auf der Karte, und „Neu verbinden"
   startet von dort die ganze Zeremonie neu. */
.sp-karteblatt { position: absolute; inset: 0; z-index: 26; display: grid; align-items: end; }
.sp-karte-ruecken {
  position: absolute; inset: 0; background: rgba(4, 6, 12, .72);
  opacity: 0; transition: opacity var(--d-mittel) var(--k-ein);
}
.sp-karteblatt.auf .sp-karte-ruecken { opacity: 1; }
.sp-karte-huelle {
  position: relative; display: grid; gap: 3cqmin; padding: 5cqmin; max-height: 100%; min-height: 0;
  background: var(--g2, #161a22); border-radius: 6cqmin 6cqmin 0 0;
  box-shadow: 0 -2cqmin 8cqmin rgba(0, 0, 0, .5);
  transform: translateY(102%); transition: transform var(--d-mittel) var(--k-schnapp);
}
.sp-karteblatt.auf .sp-karte-huelle { transform: none; }

/* `min-height` statt fester `aspect-ratio`: Bei 150 % Schrift wachsen Kopf-,
   Moment- und Fusszeile, und die 1fr-Reihe des Podests wurde so weit
   zusammengedrueckt, dass die Koepfe durch die Momentzeile liefen. Jetzt
   darf die Karte hoeher werden als 16:9 — lieber ein Stueck hoeher als
   uebereinander. */
.sp-karte {
  /* Die Karte ist eine BILDVORSCHAU, keine Bedienflaeche: Was im Kanal
     landet, sieht fuer alle gleich aus. Deshalb traegt hier drin KEINE
     Schrift den Faktor `--schrift` — sonst zeigte die Vorschau bei 150 %
     etwas anderes als das Bild, das entsteht, und muesste dafuer aus der
     Hand herauswachsen (gemessen: 404x227 statt 351x197, Huelle ragte oben
     heraus). Die drei Knoepfe DARUNTER wachsen weiterhin mit — die bedient
     man. */
  aspect-ratio: 16 / 9;
  display: grid; grid-template-rows: auto 1fr auto auto;
  gap: 1.6cqmin; padding: 3.4cqmin; border-radius: 3cqmin; min-height: 0;
  background: linear-gradient(152deg, #1b1430, #0d1b2a 60%, #101828);
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--acc) 40%, transparent);
}
.sp-k-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.sp-k-marke {
  font-family: var(--f-display); font-size: 3.4cqmin;
  font-weight: 800; letter-spacing: .14em; color: var(--acc);
}
.sp-k-datum { font-size: 2.6cqmin; color: var(--t2); }
/* Das Podest: der Erste in der Mitte und groesser — so liest man ein
   Podest, seit es Podeste gibt. */
.sp-k-podest { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 1.4cqmin; min-height: 0; }
/* Punktet niemand, hat die Karte kein Podest (spiel.js, zeigeKarte): Der Moment des Abends steht in der Mitte. */
.sp-karte.ohne-podest { grid-template-rows: auto 1fr auto; }
.sp-karte.ohne-podest > .sp-k-moment { align-self: center; }
.sp-k-platz { display: grid; justify-items: center; gap: .3cqmin; min-width: 0; }
.sp-k-platz.p1 { order: 2; }
.sp-k-platz.p2 { order: 1; }
.sp-k-platz.p3 { order: 3; }
.sp-k-platz b {
  font-size: 3.2cqmin; font-weight: 700;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-k-platz.p1 b { font-size: 4cqmin; }
.sp-k-platz span {
  font-family: var(--f-mono); font-size: 2.8cqmin;
  color: var(--t2); font-variant-numeric: tabular-nums;
}
.sp-k-platz.p1 span { color: var(--acc); font-weight: 700; }
.sp-k-moment {
  display: flex; align-items: center; gap: 1.6cqmin; padding: 1.4cqmin 2cqmin;
  border-radius: 2cqmin; background: rgba(255, 255, 255, .06); min-width: 0;
}
.sp-k-moment b {
  font-family: var(--f-mono); font-size: 4cqmin;
  font-weight: 800; color: var(--acc);
}
.sp-k-moment span {
  font-size: 2.4cqmin; color: var(--t1); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-k-fuss {
  display: flex; justify-content: space-between; gap: 2cqmin;
  font-size: 2.4cqmin; color: var(--t2);
}
.sp-k-code { color: color-mix(in srgb, var(--acc) 80%, #fff); }
.sp-k-knoepfe { display: grid; gap: 1.6cqmin; }




/* ---------------- Die Monsterwahl in der Lobby ----------------
   Vierundzwanzig Figuren in zwei Reihen (oben die ersten zwoelf, darunter die
   zweiten, seit 2026-10-06), die alle den anschauen, ueber dem der
   Zeiger steht. Die Wahl ist die erste Beruehrung mit der Marke — sie
   darf sich nicht wie ein Formularfeld anfuehlen.
   ------------------------------------------------------------- */
.sp-monsterwahl {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px; margin-top: 6px;
}
@media (max-width: 1000px) { .sp-monsterwahl { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sp-monsterwahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-mwahl {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .04);
  color: var(--t2); font: inherit; font-size: 11px; font-weight: 600;
  transition: background var(--d-kurz) var(--k-ein), transform var(--d-kurz) var(--k-schnapp);
}
.sp-mwahl .qn-monster { width: 52px; height: 52px; }
.sp-mwahl:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.sp-mwahl.an {
  background: color-mix(in srgb, var(--acc2, #00d6c2) 20%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc2, #00d6c2) 60%, transparent);
  color: var(--t0);
}


/* ---------- Eingabe-Zustände, die der Entwurf nicht kennt ----------
   Außerhalb der Ebene, weil sie Regeln aus qn.css (ohne Ebene) überstimmen
   müssen — sie treffen nur .sp-Klassen und die lebende Hand. */
.qn-hand.sp-lebt .qh-kachel, .qn-hand.sp-lebt .qh-riese, .qn-hand.sp-lebt .qh-zeile, .qn-hand.sp-lebt .qh-paar,
.qn-hand.sp-lebt .qh-knopf, .qn-hand.sp-lebt .qh-fein span, .qn-hand.sp-lebt .qh-hinweisreihe span,
.qn-hand.sp-lebt .qh-tastatur span, .qn-hand.sp-lebt .qh-flaeche, .qn-hand.sp-lebt .qh-stellwerk { cursor: pointer; }
.qn-hand.sp-lebt .qh-kachel:active, .qn-hand.sp-lebt .qh-riese:active, .qn-hand.sp-lebt .qh-knopf:active { transform: scale(.985); }
.qn-hand.sp-lebt .qh-bahn { cursor: ew-resize; touch-action: none; }
.qn-hand.sp-lebt .qh-flaeche { touch-action: none; }
.qn-hand.sp-lebt .qh-flaeche img, .qn-hand.sp-lebt .qh-flaeche svg { pointer-events: none; }
.qn-hand.sp-lebt .qh-zeile { touch-action: none; }
.qn-hand.sp-lebt .qh-zeile.sp-greift { background: color-mix(in srgb, var(--acc) 26%, var(--g2)); box-shadow: inset 0 0 0 .45cqmin var(--acc); z-index: 3; }
.qn-hand.sp-lebt .qh-zeile.sp-gewaehlt { box-shadow: inset 0 0 0 .45cqmin var(--acc2); }
.qn-hand.sp-lebt .qh-paar.sp-gewaehlt { box-shadow: inset 0 0 0 .45cqmin var(--acc2); }
.qn-hand.sp-lebt .qh-tipp {
  font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; min-width: 0;
  padding: 0; margin: 0; text-align: inherit; caret-color: var(--acc2);
}
.qn-hand.sp-lebt .qh-tipp::placeholder { color: var(--t2); opacity: 1; }
/* Hier stand `.qn-hand.sp-lebt .qh-schreib.sp-feld { display: block }`. Die
   Regel hat nie gewirkt (sie lag in der Ebene, qn.css setzt `.qh-schreib
   { display: flex }`) — und seit die Ebene richtig schliesst, ueberstimmt sie
   die Kategorie-Regel der Luege: Die Textflaeche verliert ihr
   `flex: 1 1 auto` und faellt auf die `rows`-Hoehe, die untere Haelfte des
   Kastens wird toter Raum. Der Entwurf lief die ganze Zeit ohne sie. */
.qn-hand .qh-knopf.sp-fertig { background: color-mix(in srgb, var(--ok) 30%, var(--g2)); box-shadow: inset 0 0 0 .5cqmin var(--ok); color: var(--t0); }
.qn-hand .qh-knopf.sp-leer { opacity: .45; cursor: default; }
/* Beim ZIEHEN darf der Griff nicht nachhinken — deshalb keine Uebergangszeit
   auf `left`. Das Wachsen unter dem Daumen (`transform`) und die Fahrt in der
   AUFLOESUNG muessen aber bleiben: „Er dort erscheinen zu lassen verschenkt
   die einzige Sekunde, in der man sieht, wie weit daneben man lag" (qn.css).
   Das pauschale `transition: none` hat beides mitgenommen, sobald die Ebene
   richtig schloss. */
.qn-hand .qh-bahn i { transition: transform var(--d-kurz) var(--k-ein); }
/* Die Fahrt gehoert der AUFLOESUNG (`qh-aufl`), nicht jedem Schirm, auf dem
   die Choreografie gelaufen ist: `qh-laeuft` setzt QN.handMount auch auf der
   FRAGE — mit `transition: left` haette der Griff dort 0,9 s hinter dem
   Daumen hergehinkt. Gemessen, nicht vermutet. */
.qn-hand.qh-aufl .qh-bahn i {
  transition: left var(--d-xl) var(--k-ein), transform var(--d-kurz) var(--k-ein);
}
.sp-wahlblatt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 70%; overflow: auto;
  padding: 4cqmin 4cqmin 6cqmin; background: var(--g2); border-radius: 8cqmin 8cqmin 0 0;
  box-shadow: 0 -2cqmin 8cqmin rgba(0, 0, 0, .6); display: grid; gap: 1.6cqmin;
}
.sp-wahlblatt .titel { font-size: 3.4cqmin; color: var(--t2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6cqmin; }
.sp-wahlblatt button {
  text-align: left; padding: 3.2cqmin 3.6cqmin; border-radius: 3.6cqmin; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--t0) 8%, transparent); color: var(--t0); font-size: 4.2cqmin; font-weight: 700;
}
.sp-wahlblatt button.vergeben { opacity: .45; }
.sp-wahlblatt button.leer { color: var(--t2); font-weight: 600; }
.sp-fehlt { display: grid; place-items: center; height: 100%; padding: 8cqmin; text-align: center; color: var(--t2); font-size: 4cqmin; }
.qn-buehne .sp-fehlt { font-size: 3cqmin; }
.sp-abzeichen { position: absolute; right: 1.6cqmin; top: 1.6cqmin; z-index: 5; font-size: 2.2cqmin; font-weight: 700; color: #ffcc4d; background: rgba(0, 0, 0, .55); padding: .6cqmin 1.4cqmin; border-radius: 2cqmin; }

/* Der Sieger bekommt einen Lichtschein UNTER der Figur, keinen Ring um sie.
   Ein `box-shadow: 0 0 0 Xcqmin` ist um einen runden Avatar ein Ring — um
   ein SVG ist es ein KASTEN, und der Sieger stand in einer goldenen Kiste.
   Ausserdem schnitte ein Kreis um ein Monster ihm die Hoerner ab. Die Regel
   steht hier unten und nicht oben bei der Zeremonie, weil qn.css
   `.qn-av { box-shadow: ... }` setzt und eine geebnete Regel dagegen keine
   Chance haette. */
.sp-ende .sp-e-sieger .qn-av { box-shadow: none; position: relative; }
.sp-ende .sp-e-sieger .qn-av::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 118%; height: 118%; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--acc) 42%, transparent), transparent 78%);
}


/* ---- Angehalten ----------------------------------------------------------
   Ein Schild, kein Vorhang: Wer anhaelt, will genau das ansehen, was gerade
   zu sehen ist. Deshalb steht es am unteren Fensterrand — dort liegt auf
   keinem der sechsunddreissig Schirme etwas. */
html.qn-pause body::after {
  content: '❚❚  Angehalten — P oder der Knopf oben spielt weiter';
  position: fixed; z-index: 60; bottom: 14px; left: 50%; transform: translateX(-50%);
  padding: 7px 18px; border-radius: 999px;
  font: 700 12.5px/1 system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap;
  color: #f5f1ff; background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* =====================================================================
   DAS NETZ — die Rollen (spiel.js, Abschnitt NETZ). Ausserhalb der Ebene
   `dokument`, weil die Pult-Hand die Geräteform aus qn.css ablegen muss.
   ===================================================================== */
.sp-netz { font-family: var(--f-mono, monospace); font-size: 12px; color: var(--t1, #c7cdd9); white-space: nowrap; }
.sp-netz b { color: #fff; letter-spacing: .08em; }
.sp-netz b.aus { color: #ff6b6b; letter-spacing: 0; }

/* Der Fernseher: nur die Wand. */
.sp-rolle-buehne .sp-handspalte { display: none; }
.sp-rolle-buehne .sp-raum { grid-template-columns: 1fr; }
.sp-rolle-buehne .sp-wandhalter { margin: 0 auto; }
/* RANDLOS (Tobi 06.11.2026 zu neu.playquiznight.com/b: „Das ist ja das alte Labor, was eigentlich weg sollte"): Im Raum zeigen
   Fernseher und Online-Schirm nur das Spiel — keine Leiste „Quiznight 2 · Spielprobe" mit Labor-Knöpfen, kein Spaltenkopf
   „Die Wand", kein Polster; die Wand füllt das Fenster (skaliere rechnet dann ohne Rand). Das Labor (ohne rolle) bleibt, wie es war. */
.sp-rolle-buehne body, .sp-rolle-online body { background: #000; }
.sp-rolle-buehne .sp-leiste, .sp-rolle-online .sp-leiste,
.sp-rolle-buehne .sp-spaltenkopf, .sp-rolle-online .sp-spaltenkopf { display: none; }
.sp-rolle-buehne .sp-app, .sp-rolle-online .sp-app { grid-template-rows: 1fr; height: 100dvh; }
.sp-rolle-buehne .sp-raum, .sp-rolle-online .sp-raum { height: 100dvh; padding: 0; align-items: center; align-content: center; }

/* Das Handy: nur die Hand, randlos, ohne Leiste und ohne Geräterahmen. */
.sp-rolle-pult body { background: var(--g1, #0c0a1a); }
.sp-rolle-pult .sp-leiste, .sp-rolle-pult .sp-wandspalte, .sp-rolle-pult .sp-handspalte > .sp-spaltenkopf { display: none; }
.sp-rolle-pult .sp-app { grid-template-rows: 1fr; height: 100dvh; }
/* Unten bleibt Platz für die Navigation des Geräts (Home-Balken, Gestenleiste,
   Browserleiste) — Tobi, 2026-09-23. Oben die Kamera-Aussparung. */
.sp-rolle-pult .sp-raum { display: grid; place-items: start center; grid-template-columns: 1fr; height: 100dvh;
  padding: env(safe-area-inset-top, 0px) 0 max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
.sp-rolle-pult .sp-handspalte { display: block; height: auto; }
.sp-rolle-pult .sp-handhalter > .qn-hand { box-shadow: none; border-radius: 0; }
/* Das Pult (qn.js, handNeu) hält im Handschirm selbst 39 px für die Navigation
   frei. Unter dem Handschirm liegt hier schon das Polster des Raums — beides
   zusammen wäre ein doppelter Rand. Im Pult bleibt im Schirm nur der Rest bis
   ~34 px über dem Polster von mindestens 22 px (3,4cqmin ≈ 13 px). */
.sp-rolle-pult .qn-hand.qh-neu { --qh-p-rand: 3.4cqmin; }
.sp-rolle-pult .sp-lobby, .sp-rolle-online .sp-lobby { padding: 22px 18px 40px; }

/* Beitritt und Warten — auf dem Telefon lesbar, ein Daumen reicht. */
.sp-beitritt { max-width: 420px; margin: 8vh auto 0; display: grid; gap: 14px; }
.sp-beitritt h1 { margin: 0; font-family: var(--f-display, inherit); font-size: 30px; letter-spacing: -.02em; }
.sp-beitritt input {
  font: 700 20px var(--f-body, system-ui); color: var(--t0, #fff); background: var(--g2, #161231);
  border: 1px solid var(--g4, #2e2660); border-radius: 14px; padding: 15px 16px;
}
.sp-beitritt .sp-knopf.stark { font-size: 17px; padding: 15px; border-radius: 14px; background: var(--acc, #a855f7); border-color: var(--acc, #a855f7); color: var(--auf-acc, #fff); }

/* Der Raum in der Lobby des Gastgebers: QR, Code, Adresse, wer da ist. */
.sp-netz-qr { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.sp-netz-qr img { width: 150px; height: 150px; border-radius: 12px; background: #fff; padding: 6px; display: block; }
.sp-netz-qr b { display: block; font-family: var(--f-mono, monospace); font-size: 34px; letter-spacing: .18em; color: #fff; }
.sp-netz-qr em { display: block; font-style: normal; font-family: var(--f-mono, monospace); font-size: 13px; color: var(--t1, #c7cdd9); margin-top: 4px; }
.sp-netz-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.sp-mitglied { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: var(--g2, #161231); border: 1px solid var(--g4, #2e2660); font-weight: 700; }
.sp-mitglied.weg { opacity: .45; }
.sp-mitglied i { font-style: normal; }

/* Hinweise am Handy: Die Leiste ist dort ausgeblendet — was das Netz zu sagen
   hat (Gastgeber weg, keine Verbindung), kommt als Einblendung unten. */
.sp-netztoast {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 140%); opacity: 0; max-width: min(92vw, 420px);
  padding: 12px 16px; border-radius: 14px; font: 600 15px/1.35 var(--f-body, system-ui);
  color: var(--t0, #fff); background: color-mix(in srgb, var(--g3, #1f1946) 94%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px color-mix(in srgb, var(--jetzt, #e879f9) 50%, transparent);
  transition: transform var(--d-mittel, 260ms) var(--k-schnapp, ease), opacity var(--d-mittel, 260ms);
}
.sp-netztoast.da { transform: translate(-50%, 0); opacity: 1; }

/* =====================================================================
   DAS FINALE ALS SIEGERTREPPCHEN (spiel.js, zeigeEnde) — Tobi, 2026-09-23:
   „so ähnlich wie das Leaderboard, nur immer passend zum Set, deutlich
   schöner und optimierter und für jede Spieleranzahl perfekt abgestimmt."
   Seit 28.10.2026 nur noch das Podium (Sieger Mitte; bei Gleichstand alle mit
   Platz 1–3), daneben „Was heute los war". Nur Rollen: --acc trägt den Sieger,
   --acc2 die Plätze dahinter, --jetzt den Pokal, --du am eigenen Schirm den
   eigenen Ring. Maße in cqmin gegen die Bühnenhöhe.
   ===================================================================== */
.sp-ende .sp-e-leib.sp-f {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 1.8cqmin; padding: 2.4cqmin 3.4cqmin 1.8cqmin;
}
/* Kopf: QUIZNIGHT | SET | DAS FINALE — ein Schriftzug, eine Größe. */
.sp-e-kopf .qn-marke-set { display: inline-flex; align-items: center; flex: none; }
.sp-e-kopf .qn-marke-set .qn-wortmarke, .sp-e-kopf .qn-setname {
  font-size: 3.1cqmin; letter-spacing: .02em; margin-right: 2cqmin; padding-right: 2cqmin;
  border-right: .22cqmin solid color-mix(in srgb, var(--t0) 14%, transparent);
}
.sp-e-kopf .qn-marke-set .qn-setname { margin-right: 0; }
.sp-e-kopf .sp-e-finale { font-size: 3.1cqmin; letter-spacing: .02em; font-weight: 800; color: var(--t0); }
.sp-e-kopf .qn-marke-set + .sp-e-finale { border-left: 0; padding-left: 2cqmin; }
/* Das Zeichen steht zwischen Setname und Wort, wie in jeder Kopfzeile. */
.sp-e-kopf .qn-kopf-glyph { margin-left: .4cqmin; }
.sp-e-kopf .qn-kopf-glyph + .sp-e-finale { border-left: 0; padding-left: 0; }

.sp-f-buehne { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3cqmin; min-height: 0; min-width: 0; }
.sp-f-buehne.ohne-liste { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.sp-f-buehne.ohne-liste .sp-f-podium { width: min(100%, 120cqmin); }

/* --- Das Podium --- */
.sp-f-podium { display: grid; grid-template-columns: repeat(var(--pl), minmax(0, 1fr)); align-items: end; gap: 1.6cqmin; min-height: 0; height: 100%; }
.sp-f-platz {
  --fgr: 11cqmin; --sockel: 8cqmin; --ring: color-mix(in srgb, var(--acc2) 45%, var(--t2));
  position: relative; display: grid; justify-items: center; align-content: end; row-gap: .5cqmin;
  min-width: 0; height: 100%; text-align: center;
}
.sp-f-platz.s1 { --fgr: 15.5cqmin; --sockel: 15cqmin; --ring: var(--acc); --auf-ring: var(--auf-acc); }
.sp-f-platz.s2 { --sockel: 10cqmin; --ring: var(--acc2); --auf-ring: var(--auf-acc2); }
.sp-f-platz.s3 { --sockel: 6.5cqmin; }
/* Zu zweit oder dritt gehört die ganze Bühne dem Podium — größer, nicht leerer. */
.sp-f-buehne.ohne-liste .sp-f-platz { --fgr: 17cqmin; --sockel: 11cqmin; }
.sp-f-buehne.ohne-liste .sp-f-platz.s1 { --fgr: 23cqmin; --sockel: 18cqmin; }
.sp-f-buehne.ohne-liste .sp-f-platz.s3 { --sockel: 7.5cqmin; }
.sp-f-buehne.ohne-liste .sp-f-name { font-size: 4.2cqmin; }
.sp-f-buehne.ohne-liste .sp-f-platz.s1 .sp-f-name { font-size: 5.4cqmin; }
.sp-f-buehne.ohne-liste .sp-f-punkte { font-size: 8cqmin; }
.sp-f-buehne.ohne-liste .sp-f-platz.s1 .sp-f-punkte { font-size: 14cqmin; }
.sp-f-buehne.ohne-liste .sp-f-titel { font-size: 2.4cqmin; }
.sp-f-buehne.ohne-liste .sp-f-stat { font-size: 2.3cqmin; }
.sp-f-buehne.ohne-liste .sp-f-stat i { width: 2.6cqmin; height: 2.6cqmin; }
.sp-f-figur { position: relative; width: var(--fgr); height: var(--fgr); margin-bottom: 1cqmin; }
.sp-f-ring {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; padding: 12%;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--ring) 30%, var(--g2)), var(--g1) 72%);
  box-shadow: 0 0 0 .5cqmin var(--ring), 0 0 3.4cqmin color-mix(in srgb, var(--ring) 38%, transparent);
}
.sp-f-platz.s1 .sp-f-ring { box-shadow: 0 0 0 .7cqmin var(--ring), 0 0 7cqmin color-mix(in srgb, var(--ring) 55%, transparent); }
.sp-f-platz.du .sp-f-ring { box-shadow: 0 0 0 .5cqmin var(--ring), 0 0 0 1.1cqmin var(--du), 0 0 3.4cqmin color-mix(in srgb, var(--du) 40%, transparent); }
.sp-f-ring .qn-av { width: 100%; height: 100%; }
.sp-f-medaille {
  position: absolute; right: -3%; bottom: -3%; width: 32%; height: 32%; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono); font-weight: 800;
  font-size: calc(var(--fgr) * .17); background: var(--ring); color: var(--t0);
  box-shadow: 0 0 0 .35cqmin var(--g1);
}
.sp-f-platz.s1 .sp-f-medaille { color: var(--auf-acc); }
.sp-f-platz.s2 .sp-f-medaille { color: var(--auf-acc2); }
.sp-f-pokal {
  position: absolute; top: -36%; left: 50%; width: 46%; color: var(--jetzt); opacity: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 1.6cqmin color-mix(in srgb, var(--jetzt) 60%, transparent));
}
.sp-f-pokal svg { display: block; width: 100%; }
/* Der Pokal wird hochgehoben: aus dem Podium hinauf über den Sieger, ein
   kurzes Nachfedern (die Krone trägt nur der Host). */
.sp-f-pokal.kommt { animation: sp-f-pokal calc(var(--d-xl) * .8) var(--k-schnapp) 1 both; }
@keyframes sp-f-pokal {
  0%   { transform: translateX(-50%) translateY(14cqmin) scale(.4); opacity: 0; }
  56%  { transform: translateX(-50%) translateY(-1.6cqmin) scale(1.08); opacity: 1; }
  76%  { transform: translateX(-50%) translateY(.4cqmin) scale(.98); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
.sp-f-name { font-family: var(--f-display); font-weight: 800; font-size: 3.4cqmin; line-height: 1.1; color: var(--t0); max-width: 100%; overflow-wrap: anywhere; }
.sp-f-platz.s1 .sp-f-name { font-size: 4.3cqmin; }
.sp-f-name i { font-style: normal; color: var(--du); }
.sp-f-titel { font-size: 2cqmin; font-weight: 600; color: var(--t1); line-height: 1.2; }
.sp-f-punkte {
  font-family: var(--f-display); font-weight: 900; font-size: 6cqmin; line-height: .95; letter-spacing: -.02em;
  color: var(--t0); font-variant-numeric: tabular-nums; margin-top: .5cqmin;
}
.sp-f-platz.s1 .sp-f-punkte {
  font-size: 11cqmin; background: linear-gradient(180deg, var(--jetzt), var(--acc));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sp-f-wort { font-size: 1.8cqmin; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--t2); }
.sp-f-sockel {
  width: 100%; height: var(--sockel); margin-top: 1.2cqmin; border-radius: 1.6cqmin 1.6cqmin 0 0;
  display: grid; justify-items: center; align-content: start; padding-top: 1cqmin; transform-origin: bottom;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ring) 58%, var(--g2)), color-mix(in srgb, var(--ring) 12%, var(--g1)));
  box-shadow: inset 0 .3cqmin 0 color-mix(in srgb, var(--t0) 24%, transparent);
}
/* Die Ziffer steht auf der Farbe des Platzes — ihre Schrift ist die Schrift
   AUF dieser Rolle (gelber Sockel: dunkle Ziffer; gemessen: Weiß auf Gelb). */
.sp-f-sockel b { font-family: var(--f-display); font-weight: 900; font-size: calc(var(--sockel) * .5); line-height: 1; color: color-mix(in srgb, var(--auf-ring, var(--t0)) 86%, transparent); }

/* Die Zahlen des Abends je Person: Treffer · längste Serie · gewonnene Runden. */
.sp-f-stat { display: inline-flex; align-items: center; gap: 1.4cqmin; font-family: var(--f-mono); font-size: 1.9cqmin; color: var(--t1); white-space: nowrap; }
.sp-f-stat > span { display: inline-flex; align-items: center; gap: .5cqmin; }
.sp-f-stat i { display: block; width: 2.2cqmin; height: 2.2cqmin; color: var(--t2); }
.sp-f-stat i svg { display: block; width: 100%; height: 100%; }
.sp-f-stat > span:nth-child(2) i { color: var(--jetzt); }
.sp-f-stat b { color: var(--t0); font-weight: 700; }
.sp-f-stat em { font-style: normal; font-family: var(--f-body); color: var(--t2); }

/* Auftritt des Podiums: der Sockel wächst, dann landet die Figur darauf. */
.sp-f-platz > :not(.sp-f-sockel) { opacity: 0; transform: translateY(-4cqmin); transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp); }
.sp-f-platz > .sp-f-sockel { transform: scaleY(0); transition: transform var(--d-lang) var(--k-ein); }
.sp-f-platz.da > * { opacity: 1; transform: none; }
.sp-f-platz.da > .sp-f-figur { transition-delay: var(--d-kurz); }
.sp-f-platz.da > .sp-f-titel.spaet:not(.da) { opacity: 0; }

/* Die Überschrift über den Geschichten („Was heute los war“). Die Liste ab Platz 4, die hier stand, gibt es seit dem
   28.10.2026 nicht mehr — das Finale zeigt nur noch das Podium. */
.sp-f-ab { font-size: 1.9cqmin; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }


/* --- Nach der Gegenprüfung (2026-09-23) --------------------------------- */
/* Das Konfetti wartet auf den Pokal: Es lief sonst ab der ersten
   Millisekunde, mitten in die Stille. */
.sp-ende:not(.sp-e-jubel) .sp-e-funken i { animation-play-state: paused; }
/* Der Pokal braucht Luft nach oben — er hing sonst in der Kopfzeile. */
.sp-f-podium { padding-top: 6.8cqmin; }
.sp-f-buehne.ohne-liste .sp-f-podium { padding-top: 9.4cqmin; }
/* Namen brechen an Wortgrenzen (mit Silbentrennung), nie Buchstabe für Buchstabe. */
.sp-f-name { overflow-wrap: break-word; hyphens: auto; }
/* Kontrast: Sockelziffer hell auf einem dunkleren Sockel; Medaille 3 auf Grund. */
.sp-f-sockel { background: linear-gradient(180deg, color-mix(in srgb, var(--ring) 44%, var(--g1)), color-mix(in srgb, var(--ring) 10%, var(--g1))); }
.sp-f-sockel b { color: var(--t0); text-shadow: 0 .2cqmin .8cqmin color-mix(in srgb, var(--g0) 70%, transparent); }
.sp-f-platz.s3 .sp-f-medaille { background: var(--g3); color: var(--t0); box-shadow: 0 0 0 .35cqmin var(--g1), inset 0 0 0 .3cqmin var(--ring); }
/* Langer Set-Name: bricht im Kopf um, statt ihn hinauszuschieben. */
.sp-e-kopf .qn-setname { white-space: normal; max-width: 46cqmin; line-height: 1.05; }
/* Kleine Bühne: nichts unter 9 Punkten. */
.sp-f-ab, .sp-f-titel, .sp-f-wort { font-size: max(9px, 1.8cqmin); }
/* Kino (Motiv „filmstreifen"): Die leisen Wörter („Punkte") stehen im Finale eine Stufe heller. In --t2
   kamen sie selbst vor der dunklen Wand nur auf 3,5 : 1 (im Bild gemessen, 19 px) — in --t1 sind es über
   4,5 : 1. (Hier, außerhalb der Ebene „dokument": Die Regel darüber ist ungeschichtet und gewänne sonst.) */
[data-motiv="filmstreifen"] .sp-ende .sp-f-wort { color: var(--t1); }
/* Weltreise (Motiv „luftpost") ebenso: In der Liste über dem hellen Wolkenmeer stand „Punkte" in --t2 bei
   4,45 : 1 (gemessen, zwölf Spieler, 1128 × 640). */
[data-motiv="luftpost"] .sp-ende .sp-f-wort { color: var(--t1); }
/* Der Name des Siegers steht genau im hellen Band über dem Horizont, wo das Abendrot am stärksten glüht
   (Prüfung 2026-10-18: bei 628 × 390 an der hellsten Stelle 1,8–2,6 : 1, bei 1128 × 640 mit einem langen
   Namen in einer Zeile 1,6 : 1). Hinter dem Namen liegt darum ein weicher Grund in der Farbe der Bühne, der
   der Länge des Namens folgt; die Welt daneben bleibt frei. */
[data-motiv="luftpost"] .sp-ende.fn-an .sp-f-platz.s1 .sp-f-name {
  border-radius: 1.2cqmin; background: color-mix(in srgb, var(--g0) 70%, transparent);
  box-shadow: 0 0 1.6cqmin 1.2cqmin color-mix(in srgb, var(--g0) 70%, transparent);
}
[data-motiv="blueten"] .sp-ende.fn-an .sp-f-platz .sp-f-wort { color: var(--t0); }
[data-motiv="tasten"] .sp-ende .sp-f-wort { color: var(--t1); }
[data-motiv="tasten"] .sp-ende .sp-f-platz.s2 .sp-f-medaille { background: color-mix(in srgb, var(--acc2) 86%, var(--g0)); }
/* „Und sie geht an …" (finale.css: Zweitfarbe, pulsiert zwischen 45 % und voller Deckung) stand im satten Magenta
   der Musik auf der dunklen Bühne bei 1,0–3,9 : 1. Hier steht es in hellem Magenta und pulsiert nur noch zwischen
   80 % und voll — die Trommel bleibt hörbar, die Zeile lesbar. */
[data-motiv="tasten"] .fn-ehr-trommel { color: color-mix(in srgb, var(--acc2) 38%, #fff); animation-name: fn-trommel-musik; }
@keyframes fn-trommel-musik { from { opacity: .8; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .36em; } }
.sp-f-stat { font-size: max(9px, 1.9cqmin); }

/* Das Podium gibt nach, statt überzulaufen: Die Spalte ist eine Flexspalte,
   und wenn die Höhe knapp wird, schrumpft zuerst der Sockel (nie unter 5
   cqmin). Zu zweit mit Du-Zeile lagen die Sockel sonst über der Du-Zeile. */
.sp-f-platz { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5cqmin; }
.sp-f-platz > * { flex: none; }
.sp-f-platz > .sp-f-sockel { flex: 0 1 var(--sockel); height: auto; min-height: 5cqmin; }

/* =====================================================================
   WAS HEUTE LOS WAR — die Geschichten des Abends (spiel.js,
   abendGeschichten): eine eigene Spalte neben dem Podium. Jede Karte trägt
   eine Rolle (--fr: Bühne, Tiefe, Jetzt) — das Set färbt sie mit.
   ===================================================================== */
.sp-f-buehne.mit-abend { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); justify-items: stretch; }
.sp-f-buehne.mit-abend .sp-f-podium { width: 100%; }
.sp-f-abend { display: flex; flex-direction: column; gap: 1.2cqmin; min-height: 0; min-width: 0; }
.sp-f-buehne.mit-abend > .sp-f-abend { padding-top: 3cqmin; }
/* Online: unten Luft bis zum Pult (Tobi 2026-11-04: „die Stats ein bisschen nach oben schieben, dass da unten
   ein bisschen Platz ist“ — „nur online“). */
.sp-schirm-online .sp-f-abend { padding-bottom: 4cqmin; }
.sp-schirm-online .sp-f-buehne.mit-abend > .sp-f-abend { padding-top: 1cqmin; }
.sp-schirm-online .sp-f-fakten { justify-content: flex-start; }
.sp-f-abend > .sp-f-ab { opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); }
.sp-f-abend.da > .sp-f-ab { opacity: 1; }
.sp-f-fakten { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.2cqmin; flex: 1 1 auto; min-height: 0; }
.sp-f-fakt {
  position: relative; overflow: hidden; flex: 1 1 0; min-height: 0; max-height: 22cqmin;
  display: grid; grid-template-columns: 16cqmin minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; column-gap: 2cqmin; row-gap: .5cqmin; padding: 1.2cqmin 2.4cqmin 1.2cqmin 1.8cqmin;
  border-radius: 2cqmin;
  background: linear-gradient(100deg, color-mix(in srgb, var(--fr) 17%, var(--g2)), color-mix(in srgb, var(--g2) 88%, transparent) 62%);
  box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--fr) 30%, transparent), inset .6cqmin 0 0 var(--fr);
  opacity: 0; transform: translateX(5cqmin) scale(.97);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.sp-f-fakt.da { opacity: 1; transform: none; }
/* Das Zeichen der Geschichte noch einmal groß und leise im Hintergrund. */
.sp-f-fwm {
  position: absolute; right: -2.4cqmin; top: 50%; width: 17cqmin; height: 17cqmin; pointer-events: none;
  color: var(--fr); opacity: .1; transform: translateY(-50%) rotate(-12deg);
}
.sp-f-fwm svg, .sp-f-fmarke i svg { display: block; width: 100%; height: 100%; }
.sp-f-fzahl {
  grid-row: 1 / 3; align-self: center; justify-self: stretch; text-align: center; white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; font-size: 6.4cqmin; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--fr);
  text-shadow: 0 0 3cqmin color-mix(in srgb, var(--fr) 35%, transparent);
}
.sp-f-fmarke {
  position: relative; display: flex; align-items: center; gap: .8cqmin; align-self: end;
  font-size: max(9px, 1.9cqmin); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t1);
}
.sp-f-fmarke i { flex: none; width: 2.4cqmin; height: 2.4cqmin; color: var(--fr); }
.sp-f-fsatz {
  position: relative; align-self: start; font-size: max(9px, 2.3cqmin); line-height: 1.25; color: var(--t0);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Neben dem Podium ist mehr Platz: größere Zahl, größerer Satz. */
.sp-f-buehne.mit-abend .sp-f-fzahl { font-size: 7.4cqmin; }
.sp-f-buehne.mit-abend .sp-f-fsatz { font-size: max(9px, 2.5cqmin); }
.sp-f-buehne.mit-abend .sp-f-fakt { grid-template-columns: 17cqmin minmax(0, 1fr); }
/* Kleine Bühne: die Zahl schmaler, damit der Satz Luft hat. */
.sp-schmal .sp-f-fakt { grid-template-columns: 13cqmin minmax(0, 1fr); column-gap: 1.4cqmin; padding-left: 1.4cqmin; }
.sp-schmal .sp-f-fzahl { font-size: 5.6cqmin; }
@media (prefers-reduced-motion: reduce) {
  .sp-f-fakt { transform: none; transition: opacity var(--d-mittel) linear; }
}
/* Allein am Abend: ein Platz, nicht ein Sockel über die halbe Bühne. */
.sp-f-buehne .sp-f-podium.solo { width: min(100%, 52cqmin); justify-self: center; }
/* GLEICHSTAND AN PLATZ 1–3 (spiel.js, zeigeEnde — es gibt nur noch das Podium): Stehen mehr als drei darauf,
   werden Figur, Name und Zahl im Verhältnis 3 : --pl kleiner; die Sockel bleiben, wie sie sind. Die Regeln tragen
   .sp-ende vorn, damit sie die Stufen des Online-Schirms (online.css, qo-fe1/qo-fe3) schlagen — deren eigene
   Fassung für viele Plätze steht dort. */
.sp-f-podium.viele { --pk: calc(3 / var(--pl)); gap: 1cqmin; }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz { --fgr: calc(17cqmin * var(--pk)); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz.s1 { --fgr: calc(23cqmin * var(--pk)); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-name { font-size: max(9px, calc(4.2cqmin * var(--pk))); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz.s1 .sp-f-name { font-size: max(9px, calc(5.4cqmin * var(--pk))); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-punkte { font-size: calc(8cqmin * var(--pk)); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-platz.s1 .sp-f-punkte { font-size: calc(14cqmin * var(--pk)); }
/* Kleine Schrift (Titel, „Punkte", Zahlenzeile) schrumpft nur halb so stark mit — sie klebte sonst auf 9 px. */
.sp-f-podium.viele { --pkt: calc((1 + var(--pk)) / 2); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-titel { font-size: max(9px, calc(2.4cqmin * var(--pkt))); }
.sp-ende .sp-f-buehne.ohne-liste .sp-f-podium.viele .sp-f-wort { font-size: max(9px, calc(1.8cqmin * var(--pkt))); }
/* Beim Einpassen (spiel.js, podiumPasse) stehen die Sockel fest — sonst gäben sie nach, und alles passte scheinbar. */
.sp-f-podium.pk-mess .sp-f-platz > .sp-f-sockel { flex-shrink: 0 !important; }
/* Ab fünf nebeneinander passt die Zahlenzeile (Treffer · Serie · Runden) nicht mehr unter den Platz — sie lief in die
   Nachbarn. Sie geht, wie auf dem engen Online-Schirm (online.css, qo-fe2). */
.sp-ende .sp-f-podium.viele.eng .sp-f-platz > .sp-f-stat { display: none; }
/* Liegen mehr als sechs gleichauf, zählt der äußerste Platz die übrigen: „+2" oben links am Ring (gegenüber der Medaille). */
.sp-f-mehr {
  position: absolute; left: -6%; top: -4%; min-width: 34%; height: 30%; padding: 0 .6cqmin; border-radius: 99px;
  display: grid; place-items: center; font-family: var(--f-mono); font-weight: 800; font-size: max(9px, calc(var(--fgr) * .16)); line-height: 1;
  background: var(--g3); color: var(--t0); box-shadow: 0 0 0 .35cqmin var(--g1), inset 0 0 0 .3cqmin var(--ring);
}
/* Ohne den Hinweis (eigener Schirm) bleibt die Rechtszeile rechts. */
.sp-e-fuss .sp-e-recht { margin-left: auto; }
/* Am eigenen Schirm ist der Fuß leer (das Rechtliche liegt im Zahnrad) — er nimmt dann keinen Platz,
   die Plätze reichen bis ans Pult. */
.sp-e-fuss:empty { display: none; }

/* --- Nach der zweiten Gegenprüfung (2026-09-23) -------------------------- */
/* Die Rasterzeilen des Leibs: Kopf · Bühne, danach implizit (Du-Zeile, Fuß).
   Mit vier festen Zeilen blieb ohne Du-Zeile eine leere vierte samt Abstand
   stehen — der Fuß saß zu hoch. */
.sp-ende .sp-e-leib.sp-f { grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; }
/* Namen: Umbruch nur an Leerzeichen und Bindestrich, keine Silbentrennung.
   Was dann nicht passt, macht spiel.js kleiner (Klasse „hart" = letzter Ausweg). */
.sp-f-name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Letzter Ausweg: eine Zeile mit Ellipse, nie mitten im Wort (Namen-Regel, qn.css). */
.sp-f-name.hart { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Die Siegerzahl: Verlaufsschrift mit engem Abstand verlor die rechte Kante
   der letzten Ziffer. */
.sp-f-platz.s1 .sp-f-punkte { padding: 0 .08em; }
/* Nichts unter 9 Punkten, auch nicht auf der kleinen Bühne. */
.sp-e-recht { font-size: max(9px, 1.8cqmin); }
.sp-e-hinweis { font-size: max(9px, 2.2cqmin); }
.sp-f-medaille { font-size: max(9px, calc(var(--fgr) * .17)); }
/* Das Handy: Die Hand ist 390 breit gebaut und wird verkleinert — ihr
   Layoutkasten blieb 390 breit und machte die Seite breiter als das Gerät
   (Gegenprüfung: innerWidth 375 → 428). */
.sp-rolle-pult .sp-handhalter { overflow: hidden; }
/* #9: Auch die Kopfzahlen und die Zahlen am Podium nie unter 9 px. */
.sp-e-abendzahlen i { font-size: max(9px, 2.3cqmin); }
.sp-f-buehne.ohne-liste .sp-f-stat { font-size: max(9px, 2.3cqmin); }
/* Ergebniskarte: Stelle nach Reihenfolge, nicht nach Platz. */
.sp-k-platz.s1 { order: 2; }
.sp-k-platz.s2 { order: 1; }
.sp-k-platz.s3 { order: 3; }
/* Die Bühne hat genau EINE Zeile, so hoch wie ihr Platz — sonst wuchs sie
   mit einem hohen Podium und schob den dritten Sockel unter den Fuß. */
.sp-f-buehne { grid-template-rows: minmax(0, 1fr); }

/* =====================================================================
   DIE KULISSE DES FINALES (qn.js: kulisseSetzen, QN.szene) — das Bild
   hinter allem und die Schichten, die es lebendig machen (qn.css,
   „Die lebendige Szene"). Sie blendet mit dem Kopf ein.
   ===================================================================== */
.sp-ende > .qn-szene { opacity: 0; transition: opacity var(--d-xl) var(--k-ein); }
.sp-ende:has(.sp-e-kopf.da) > .qn-szene { opacity: 1; }
.sp-e-licht, .sp-e-funken, .sp-e-leib { position: relative; z-index: 1; }
/* Der Kopf steht auf dem hellsten Teil der Szene (das Licht kommt von oben
   links) — ein weicher Schatten hält den Schriftzug lesbar. */
.sp-ende .sp-e-kopf { text-shadow: 0 .2cqmin 1.8cqmin color-mix(in srgb, var(--g0) 92%, transparent), 0 0 .6cqmin color-mix(in srgb, var(--g0) 80%, transparent); }
/* Die Wortmarke ist Verlaufsschrift (Hintergrund durch die Buchstaben) —
   ein Textschatten schiene durch sie hindurch und machte sie dunkel. Sie
   bekommt einen Schatten UM die Buchstaben. */
.sp-ende .sp-e-kopf .qn-wortmarke { text-shadow: none; filter: drop-shadow(0 .15cqmin .9cqmin color-mix(in srgb, var(--g0) 90%, transparent)); }

/* =====================================================================
   DIE SPIELWEISE IN DER PROBE (spiel.js, spielweiseAnwenden)
   Bigscreen: Fernseher und Handy stehen getrennt. Online/Discord: EIN
   Schirm — Wand und Eingabe kleben aneinander, ein Rahmen, keine
   Handy-Zarge.
   ===================================================================== */
.sp-raum.sp-weise-online { column-gap: 0; grid-template-columns: auto auto; justify-content: center; }
.sp-raum.sp-weise-online .sp-wandhalter > .qn-buehne { border-radius: 14px 0 0 14px; }
.sp-raum.sp-weise-online .sp-handhalter { overflow: hidden; border-radius: 0 14px 14px 0; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sp-raum.sp-weise-online .sp-handhalter > .qn-hand {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--t0, #fff) 10%, transparent); border-radius: 0;
}
.sp-raum.sp-weise-online .sp-handspalte > .sp-spaltenkopf { visibility: hidden; }
.sp-raum.sp-weise-bigscreen .sp-wandspalte > .sp-spaltenkopf > span:first-child,
.sp-raum.sp-weise-online .sp-wandspalte > .sp-spaltenkopf > span:first-child { color: var(--acc, #a855f7); }

/* ================================================================
   DIE HAND AN TAFEL UND ABENDENDE — im Gerüst des Pults
   (spiel.js, „DIE HAND AN TAFEL UND ABENDENDE"; Tobi, 2026-09-23).

   Außerhalb der Ebene: Der Schirm trägt `.qh-neu` und steht damit neben
   den ungeebneten Regeln des Pults (qn.css, Abschnitt 16) — Kopf, Uhr,
   Rand unten (--qh-p-rand) kommen von dort. Klassen: `sp-hp-*` gemeinsam,
   `sp-ht-*` Tafel, `sp-hf-*` Abendende.

   Nur Rollen: --acc/--acc2 die Bühne, --jetzt was sich gerade ändert
   (Platzwechsel, Punkte dieser Runde, der Pokal), --du genau einmal.
   Bewegt werden nur transform und opacity, mit den Tokens. Was auf seinen
   Schlag wartet (.sp-hq, das Abzeichen, Punkte und Satz am Abendende, der
   Pokal), ist bis dahin unsichtbar; unter reduzierter Bewegung schaltet
   qn.css alle Übergänge in `.qn-hand.qh-neu` ab, und spiel.js setzt jeden
   Schlag sofort — dann steht sofort der Endzustand.
   ================================================================ */

/* ---- Gemeinsam: Schläge, Figur, Rolle, Jubel ---------------------------- */
.sp-hp .sp-hq {
  opacity: 0; transform: translateY(3cqmin);
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.sp-hp .sp-hq.da { opacity: 1; transform: none; }
/* Knöpfe, die man noch nicht sieht, nimmt man auch nicht: `visibility`
   nimmt Treffer und Tab-Stopp, ohne dass der Platz springt. */
.sp-hp .sp-hp-knoepfe.sp-hq {
  visibility: hidden;
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp), visibility 0s linear var(--d-lang);
}
.sp-hp .sp-hp-knoepfe.sp-hq.da { visibility: visible; transition-delay: 0s; }

.sp-hp-figur { position: relative; display: grid; place-items: center; }

/* Die Rolle: ein Zählwerk. Das Band steht im Grundzustand auf der
   Zielziffer; `wartet` hält es auf der ersten, `rollt` fährt es hin. */
.sp-hp-rolle { display: inline-block; height: 1.04em; line-height: 1.04; overflow: hidden; vertical-align: bottom; }
.sp-hp-band { display: flex; flex-direction: column; transform: translateY(calc(var(--schritte, 0) * -1.04em)); }
.sp-hp-band > b { display: block; height: 1.04em; font: inherit; line-height: 1.04; text-align: center; }
.sp-hp-band > b:not(.ziel) { visibility: hidden; }
.sp-hp-rolle.wartet .sp-hp-band > b, .sp-hp-rolle.rollt .sp-hp-band > b { visibility: visible; }
.sp-hp-rolle.wartet .sp-hp-band { transform: none; }
.sp-hp-rolle.rollt .sp-hp-band { animation: sp-hp-rollen var(--d-xl) var(--k-ein) both; }
@keyframes sp-hp-rollen { from { transform: none; } }

/* „jubelt!" an der Zeile (bzw. Stufe) dessen, der gerade jubelt. */
.sp-hp-jubelt {
  position: absolute; right: 3cqmin; top: -2cqmin; z-index: 3; pointer-events: none;
  padding: .5cqmin 1.6cqmin; border-radius: 10cqmin; background: var(--acc); color: var(--auf-acc);
  font-size: calc(2.6cqmin * var(--schrift, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(1cqmin) scale(.7);
}
.jubelt > .sp-hp-jubelt { animation: sp-hp-jubelt calc(var(--d-xl) * 1.4) var(--k-ein) both; }
/* Ohne Bewegung steht das Schild, solange die Klasse steht (spiel.js nimmt sie nach 1,6 s). */
@media (prefers-reduced-motion: reduce) {
  .qn-hand.qh-neu .jubelt > .sp-hp-jubelt { opacity: 1; transform: none; }
}
@keyframes sp-hp-jubelt {
  0% { opacity: 0; transform: translateY(1cqmin) scale(.7); }
  20% { opacity: 1; transform: none; }
  75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-2cqmin); }
}

/* Der Jubelknopf: im Fluss, in der Daumenzone, mit dem eigenen Gesicht. */
.sp-jubel {
  display: flex; align-items: center; justify-content: center; gap: 2.6cqmin;
  width: 100%; min-height: 14cqmin; padding: 1.6cqmin 4cqmin; border: 0; border-radius: 4cqmin;
  font: inherit; color: var(--t0); cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: color-mix(in srgb, var(--acc) 24%, var(--g2));
  box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--acc) 55%, transparent);
}
.sp-jubel-kopf { flex: none; display: grid; place-items: center; width: 9cqmin; height: 9cqmin; }
.sp-jubel-kopf .qn-av { --gr: 8.4cqmin; }
/* Auch ohne Bewegung antwortet der Knopf: Er leuchtet kurz auf. */
.sp-jubel.gejubelt { background: color-mix(in srgb, var(--acc) 46%, var(--g2)); }
.sp-jubel-t { display: grid; min-width: 0; text-align: left; line-height: 1.15; }
.sp-jubel-wort {
  font-family: var(--f-display); font-weight: 900; font-size: calc(5cqmin * var(--schrift, 1));
  letter-spacing: .04em; text-transform: uppercase;
}
.sp-jubel-t em { font-style: normal; font-weight: 600; font-size: calc(2.9cqmin * var(--schrift, 1)); color: var(--t1); }
.sp-jubel.gedrueckt { animation: sp-jubelknopf var(--d-lang) var(--k-schnapp) 1; }
@keyframes sp-jubelknopf {
  0% { transform: none; } 30% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; }
}

/* ---- Die Tafel ------------------------------------------------------------ */
/* Was an Höhe übrig bleibt, verteilt sich zwischen den Blöcken — der Platz
   oben, der Jubelknopf unten in der Daumenzone. */
.sp-ht-leib {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.2cqmin; min-height: 0;
  padding: 2.6cqmin 5cqmin var(--qh-p-rand, 10cqmin);
}
.sp-ht-leib > * { flex: none; }

/* Mein Platz: Figur links (20 cqmin, unter 10 % der Höhe), rechts der Platz
   als Zählwerk, das Abzeichen der Bewegung, der Stand. */
.sp-ht-held {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "figur marke" "figur zeile" "figur stand";
  align-items: center; column-gap: 4cqmin; row-gap: .6cqmin;
  padding: 3cqmin 4cqmin; border-radius: 5cqmin;
  background:
    radial-gradient(70% 120% at 0% 40%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--g2) 72%, transparent);
  box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 30%, transparent);
}
.sp-ht-held .sp-hp-figur { grid-area: figur; width: 20cqmin; height: 20cqmin; }
.sp-ht-held .sp-hp-figur .qn-av { --gr: 17cqmin; }
.sp-ht-pmarke, .sp-hf-pmarke {
  grid-area: marke; font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t2);
}
.sp-ht-pzeile {
  grid-area: zeile; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6cqmin 2cqmin;
  font-family: var(--f-display); font-weight: 900; font-size: calc(15cqmin * var(--schrift, 1));
  line-height: 1; letter-spacing: -.04em; color: var(--t0);
}
.sp-ht-von, .sp-hf-von {
  font-family: var(--f-body); font-size: calc(3.6cqmin * var(--schrift, 1)); font-weight: 600;
  letter-spacing: 0; color: var(--t1);
}
.sp-ht-zug {
  align-self: center; padding: .9cqmin 2cqmin; border-radius: 10cqmin;
  font-family: var(--f-mono); font-weight: 700; font-size: calc(3.2cqmin * var(--schrift, 1));
  letter-spacing: 0; line-height: 1; white-space: nowrap;
  background: var(--jetzt); color: var(--auf-jetzt);
  opacity: 0; transform: scale(.4) rotate(-10deg);
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.sp-ht-zug.da { opacity: 1; transform: none; }
.sp-ht-zug.runter, .sp-ht-zug.gleich { background: color-mix(in srgb, var(--t0) 11%, transparent); color: var(--t1); }
.sp-ht-stand { grid-area: stand; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4cqmin 1.6cqmin; min-width: 0; }
.sp-ht-summe {
  display: block; max-width: 100%; font-family: var(--f-mono); font-weight: 700; line-height: 1;
  font-size: calc(7cqmin * var(--schrift, 1)); color: var(--t0); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-ht-stand > span { font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t1); }
.sp-ht-stand > em { font-style: normal; font-weight: 800; font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--jetzt); }

/* Das Rennen: der Abstand in einem Satz, darunter die Leiter. */
.sp-ht-rennen { display: grid; gap: 1.2cqmin; }
.sp-ht-rkopf {
  font-size: calc(4.4cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.15; color: var(--t1);
}
.sp-ht-rkopf b {
  font-family: var(--f-display); font-weight: 900; font-size: calc(8cqmin * var(--schrift, 1));
  letter-spacing: -.02em; color: var(--acc);
}
.sp-ht-runter { margin-top: -.6cqmin; font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t2); }
.sp-ht-leiter { display: grid; gap: 1.2cqmin; }
.sp-ht-zeile {
  position: relative; display: grid; grid-template-columns: 6cqmin auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 2.4cqmin;
  /* Wenige Zeilen werden höher (bis 15 cqmin), viele bleiben bei 12. */
  min-height: clamp(12cqmin, calc(60cqmin / var(--reihen, 5)), 15cqmin);
  padding: 1cqmin 3.4cqmin 1cqmin 2.4cqmin; border-radius: 3.4cqmin;
  background: color-mix(in srgb, var(--t0) 6%, var(--g1));
}
.sp-ht-zeile.faehrt { transition: transform var(--d-xl) var(--k-schnapp); }
.sp-ht-zeile.ich {
  z-index: 2; background: color-mix(in srgb, var(--du) 13%, var(--g1));
  box-shadow: inset 0 0 0 .45cqmin var(--du);
}
.sp-ht-rang {
  font-family: var(--f-display); font-weight: 900; font-size: calc(4.8cqmin * var(--schrift, 1));
  line-height: 1; text-align: center; color: var(--t1);
}
.sp-ht-kopf { display: grid; place-items: center; width: 8.4cqmin; height: 8.4cqmin; }
.sp-ht-name, .sp-hf-sname {
  min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: calc(4.4cqmin * var(--schrift, 1));
  line-height: 1.1; color: var(--t0); white-space: nowrap; overflow-wrap: normal; word-break: normal;
}
/* Erst kleiner, dann Umbruch an Leerzeichen/Bindestrich — nie mitten im Wort (Namen-Regel,
   qn.css; die Grenze hält jedes Wort unter 6 W, es passt also immer in die Zeile). */
.sp-ht-name.bricht, .sp-hf-sname.bricht, .sp-ht-nname.bricht { white-space: normal; overflow-wrap: normal; word-break: normal; }
.sp-ht-pkt {
  font-family: var(--f-mono); font-weight: 700; font-size: calc(4.4cqmin * var(--schrift, 1));
  color: var(--t0); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-ht-luecke {
  text-align: center; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 700;
  line-height: 1; letter-spacing: .08em; color: var(--t2);
}

/* Meine Runde in einem Satz (am Abendende: meine Geschichte des Abends). */
.sp-hp .sp-ht-runde, .sp-hp .sp-hf-gesch {
  display: grid; align-content: center; gap: 1cqmin;
  padding: 3cqmin 4cqmin; border-radius: 4.4cqmin;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 26%, var(--g2)), color-mix(in srgb, var(--acc2) 16%, var(--g1)));
  box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 40%, transparent);
}
.sp-ht-rmarke, .sp-hf-gmarke, .sp-hf-tmarke {
  font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 45%, var(--t0));
}
.sp-ht-rzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2cqmin; }
.sp-ht-rzahl, .sp-hf-gzahl {
  min-width: 0; max-width: 100%;
  font-family: var(--f-display); font-weight: 900; font-size: calc(9cqmin * var(--schrift, 1));
  line-height: 1; letter-spacing: -.02em; color: var(--t0); white-space: nowrap;
}
.sp-ht-rwort { font-weight: 800; font-size: calc(3.8cqmin * var(--schrift, 1)); color: var(--t0); }
.sp-ht-rsatz, .sp-hf-gsatz { font-size: calc(4.2cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.3; color: var(--t0); }
.sp-ht-form { display: flex; flex-wrap: wrap; gap: 1.2cqmin; margin-top: 1cqmin; }
.sp-ht-form i {
  display: block; width: 3.6cqmin; height: 3.6cqmin; border-radius: 50%;
  background: color-mix(in srgb, var(--t0) 14%, transparent);
  box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 26%, transparent);
}
.sp-ht-form i.f2 { background: var(--t0); box-shadow: none; }
.sp-ht-form i.f1 { background: linear-gradient(90deg, var(--t0) 50%, color-mix(in srgb, var(--t0) 14%, transparent) 50%); }
.sp-ht-runde.da .sp-ht-form i { animation: sp-ht-pip var(--d-mittel) var(--k-schnapp) calc(var(--d-lang) + var(--i, 0) * 90ms) both; }
@keyframes sp-ht-pip { from { opacity: 0; transform: scale(.3); } }

/* Was als Nächstes kommt: Zeichen, Name, Runde. */
.sp-ht-naechst {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "glyph marke runde" "glyph name runde";
  align-items: center; column-gap: 3cqmin; row-gap: .3cqmin;
  padding: 1.8cqmin 3.4cqmin; border-radius: 3.6cqmin;
  background: color-mix(in srgb, var(--t0) 6%, var(--g1));
}
.sp-ht-nglyph { grid-area: glyph; display: grid; place-items: center; width: 8cqmin; height: 8cqmin; color: var(--acc); }
.sp-ht-nglyph svg { width: 100%; height: 100%; display: block; }
.sp-ht-nmarke {
  grid-area: marke; font-size: calc(2.6cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t2);
}
.sp-ht-nname {
  grid-area: name; min-width: 0; white-space: nowrap;
  font-family: var(--f-display); font-weight: 800; font-size: calc(4.4cqmin * var(--schrift, 1)); line-height: 1.1;
}
.sp-ht-nrunde { grid-area: runde; max-width: 26cqmin; text-align: right; font-family: var(--f-mono); font-size: calc(3cqmin * var(--schrift, 1)); color: var(--t2); }
.sp-hp-knoepfe { display: grid; gap: 1.8cqmin; }

/* Zu eng (große Schrift, lange Namen): erst Luft, dann Nebensätze, dann
   die Leiter bis auf die Nachbarn — in dieser Reihenfolge. */
.sp-ht.sp-eng1 .sp-ht-leib { gap: 1.4cqmin; padding-top: 1.6cqmin; }
.sp-ht.sp-eng1 .sp-ht-held { padding: 2cqmin 3.4cqmin; }
.sp-ht.sp-eng1 .sp-ht-pzeile { font-size: calc(12cqmin * var(--schrift, 1)); }
.sp-ht.sp-eng1 .sp-ht-zeile { min-height: 9.4cqmin; padding-top: .6cqmin; padding-bottom: .6cqmin; }
.sp-ht.sp-eng1 .sp-ht-runde { padding: 2cqmin 3.4cqmin; }
.sp-ht.sp-eng1 .sp-ht-rzahl { font-size: calc(7cqmin * var(--schrift, 1)); }
.sp-ht.sp-eng1 .sp-jubel { min-height: 12cqmin; }
.sp-ht.sp-eng2 .sp-ht-runter, .sp-ht.sp-eng2 .sp-ht-nmarke, .sp-ht.sp-eng2 .sp-jubel-t em { display: none; }
.sp-ht.sp-eng2 .sp-ht-naechst { grid-template-areas: "glyph name runde"; }
.sp-ht.sp-eng3 .sp-ht-rmarke, .sp-ht.sp-eng3 .sp-ht-form { display: none; }
.sp-ht.sp-eng3 .sp-ht-held { row-gap: 0; }
.sp-ht.sp-eng4 .sp-ht-zeile:not(.nah), .sp-ht.sp-eng4 .sp-ht-luecke { display: none; }

/* ---- Das Abendende -------------------------------------------------------- */
.sp-hf-leib {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2cqmin; min-height: 0;
  padding: 1.4cqmin 5cqmin var(--qh-p-rand, 10cqmin);
}
.sp-hf-leib > * { flex: none; }
.sp-hf-marke {
  text-align: center; font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 60%, var(--t0));
}
.sp-hf-held {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "figur marke" "figur zeile" "figur punkte" "satz satz";
  align-items: center; column-gap: 4cqmin; row-gap: .6cqmin;
  padding: 3.4cqmin 4cqmin; border-radius: 5cqmin;
  background:
    radial-gradient(80% 110% at 0% 30%, color-mix(in srgb, var(--acc) 28%, transparent), transparent 70%),
    color-mix(in srgb, var(--g2) 72%, transparent);
  box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 34%, transparent);
}
.sp-hf.sieger .sp-hf-held { box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--jetzt) 60%, transparent); }
.sp-hf-held .sp-hp-figur { grid-area: figur; width: 23cqmin; height: 23cqmin; }
.sp-hf-held .sp-hp-figur .qn-av { --gr: 19cqmin; }
.sp-hf-pokal {
  position: absolute; z-index: 2; left: 50%; top: -3.4cqmin; width: 10cqmin; height: 10cqmin; margin-left: -5cqmin;
  color: var(--jetzt); opacity: 0; transform: translateY(8cqmin) scale(.4);
  filter: drop-shadow(0 0 1.4cqmin color-mix(in srgb, var(--jetzt) 60%, transparent));
}
.sp-hf-pokal svg { width: 100%; height: 100%; display: block; }
.sp-hf.geehrt .sp-hf-pokal {
  opacity: 1; transform: none;
  transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.sp-hf-pzeile {
  grid-area: zeile; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6cqmin 2cqmin;
  font-family: var(--f-display); font-weight: 900; font-size: calc(18cqmin * var(--schrift, 1));
  line-height: 1; letter-spacing: -.04em; color: var(--t0);
}
.sp-hf .sp-hp-rolle.rollt .sp-hp-band { animation-duration: calc(var(--d-xl) * 1.3); }
/* Bis zur Aufdeckung pocht das Fragezeichen — ruhig, nur Deckkraft. */
.sp-hf .sp-hp-rolle.wartet { animation: sp-hf-trommel var(--d-lang) var(--k-ein) infinite alternate; }
@keyframes sp-hf-trommel { from { opacity: .45; } to { opacity: 1; } }
.qn-hand.qh-ruhig-an .sp-hp-rolle.wartet { animation: none; }
.sp-hf-punkte {
  grid-area: punkte; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4cqmin 1.4cqmin; min-width: 0;
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
.sp-hf.aufgedeckt .sp-hf-punkte { opacity: 1; }
.sp-hf-punkte b {
  display: block; max-width: 100%; font-family: var(--f-mono); font-weight: 700; line-height: 1;
  font-size: calc(7.4cqmin * var(--schrift, 1)); color: var(--t0); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-hf-punkte span { font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t1); }
.sp-hf-satz {
  grid-area: satz; margin-top: 1.4cqmin; font-size: calc(3.9cqmin * var(--schrift, 1)); line-height: 1.3; color: var(--t1);
  opacity: 0; transform: translateY(2cqmin);
  transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-schnapp);
}
.sp-hf-satz.da { opacity: 1; transform: none; }
.sp-hf-satz b {
  font-family: var(--f-display); font-weight: 900; font-size: calc(5.2cqmin * var(--schrift, 1));
  letter-spacing: -.01em; color: var(--t0);
}

.sp-hf-titel {
  display: grid; justify-items: center; gap: .4cqmin; text-align: center;
  padding: 2.4cqmin 4cqmin; border-radius: 4cqmin;
  background: color-mix(in srgb, var(--acc) 16%, var(--g1));
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--acc) 44%, transparent);
}
.sp-hf-tmarke { display: inline-flex; align-items: center; gap: 1cqmin; }
.sp-hf-tmarke svg { width: 3.2cqmin; height: 3.2cqmin; color: var(--acc); }
.sp-hf-titel b { font-family: var(--f-display); font-weight: 900; font-size: calc(5.4cqmin * var(--schrift, 1)); line-height: 1.1; }
.sp-hf-titel em { font-style: normal; font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t1); }

.sp-hp .sp-hf-gesch {
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico marke" "zahl satz";
  column-gap: 3cqmin; align-items: center;
}
.sp-hf-gico { grid-area: ico; display: grid; place-items: center; width: 5cqmin; height: 5cqmin; color: var(--acc); }
.sp-hf-gico svg { width: 100%; height: 100%; display: block; }
.sp-hf-gmarke { grid-area: marke; }
.sp-hf-gzahl { grid-area: zahl; display: block; max-width: 34cqmin; font-size: calc(8cqmin * var(--schrift, 1)); }
.sp-hf-gsatz { grid-area: satz; font-size: calc(3.8cqmin * var(--schrift, 1)); }

.sp-hf-zahlen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.6cqmin; }
.sp-hf-kachel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico zahl" "wort wort";
  align-items: center; column-gap: 1.4cqmin; row-gap: .4cqmin; min-width: 0;
  padding: 2cqmin 2.4cqmin; border-radius: 3.4cqmin; background: var(--g2);
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--acc) 26%, transparent);
}
.sp-hf-kachel i { grid-area: ico; display: grid; width: 4.4cqmin; height: 4.4cqmin; color: var(--acc); }
.sp-hf-kachel i svg { width: 100%; height: 100%; display: block; }
.sp-hf-kachel b { grid-area: zahl; min-width: 0; white-space: nowrap; font-family: var(--f-mono); font-weight: 700; font-size: calc(6.4cqmin * var(--schrift, 1)); line-height: 1; }
.sp-hf-kachel em { grid-area: wort; font-style: normal; font-size: calc(2.6cqmin * var(--schrift, 1)); line-height: 1.2; color: var(--t1); }

/* Das kleine Podium: zwei, eins, drei — die Stufe wächst mit dem Platz. */
.sp-hf-podium { display: grid; grid-template-columns: repeat(var(--pl, 3), minmax(0, 1fr)); align-items: end; gap: 2cqmin; }
.sp-hf-stufe { position: relative; display: grid; justify-items: center; gap: .6cqmin; min-width: 0; }
.sp-hf-skopf { display: grid; place-items: center; width: 9cqmin; height: 9cqmin; }
.sp-hf-skopf .qn-av { --gr: 9cqmin; }
.sp-hf-sname { max-width: 100%; text-align: center; font-size: calc(3.4cqmin * var(--schrift, 1)); }
.sp-hf-ssockel {
  width: 100%; display: grid; place-items: center; align-content: center; gap: .3cqmin; padding: 1cqmin 0;
  border-radius: 2.6cqmin 2.6cqmin 1.2cqmin 1.2cqmin; background: color-mix(in srgb, var(--acc) 24%, var(--g2));
}
.sp-hf-stufe.s1 .sp-hf-ssockel { min-height: 13cqmin; background: color-mix(in srgb, var(--acc) 52%, var(--g2)); }
.sp-hf-stufe.s2 .sp-hf-ssockel { min-height: 10cqmin; }
.sp-hf-stufe.s3 .sp-hf-ssockel { min-height: 8cqmin; }
.sp-hf-ssockel b { font-family: var(--f-display); font-weight: 900; font-size: calc(4.6cqmin * var(--schrift, 1)); line-height: 1; }
.sp-hf-ssockel em { font-style: normal; font-family: var(--f-mono); font-size: calc(2.8cqmin * var(--schrift, 1)); color: var(--t0); }
.sp-hf-stufe.ich .sp-hf-sname { text-decoration: underline; text-decoration-thickness: .5cqmin; text-underline-offset: .8cqmin; }

.sp-hf-knoepfe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-hf-knoepfe .sp-jubel { min-height: 13cqmin; padding: 1.4cqmin 2.4cqmin; gap: 1.6cqmin; }
.sp-hf-knoepfe .sp-jubel-kopf { width: 7.4cqmin; height: 7.4cqmin; }
.sp-hf-knoepfe .sp-jubel-kopf .qn-av { --gr: 7.4cqmin; }
.sp-hf-knoepfe .sp-jubel-wort { font-size: calc(4.2cqmin * var(--schrift, 1)); }
.sp-hf-knopf {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqmin; min-width: 0;
  min-height: 13cqmin; padding: 1.4cqmin 3cqmin; border: 0; border-radius: 4cqmin;
  font: inherit; font-weight: 800; font-size: calc(4.2cqmin * var(--schrift, 1)); line-height: 1.15; color: var(--t0);
  background: color-mix(in srgb, var(--t0) 10%, var(--g1)); cursor: pointer;
  transition: transform var(--d-kurz) var(--k-schnapp);
}
.sp-hf-knopf svg { flex: none; width: 4.6cqmin; height: 4.6cqmin; }
.sp-hf-knopf.haupt { background: var(--acc); color: var(--auf-acc); }
.sp-hf-knopf:active { transform: scale(.97); }
/* Der Gastgeber wählt, wie es weitergeht: Nochmal und Neues Set nebeneinander
   (Neues Set ist die Hauptaktion). Alle anderen lesen einen ruhigen Satz. */
.sp-hf-gastgeber {
  grid-column: 1 / -1; margin: 0; padding: 1.2cqmin 2cqmin; text-align: center;
  font-size: calc(3.6cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.3; color: var(--t1);
}
/* „Neues Set": Die Lobby steht an der Set-Wahl und zeigt sie einen Augenblick an. */
.sp-block.sp-hervor { position: relative; }
.sp-block.sp-hervor::after {
  content: ""; position: absolute; inset: 2px -10px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--acc, #a78bfa), 0 0 0 8px color-mix(in srgb, var(--acc, #a78bfa) 20%, transparent);
  animation: sp-hervor calc(var(--d-xl, 900ms) * 2.6) var(--k-ein, ease-out) both;
}
@keyframes sp-hervor { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-block.sp-hervor::after { animation: none; opacity: 0; } }

.sp-hf.sp-eng1 .sp-hf-leib { gap: 1.4cqmin; }
.sp-hf.sp-eng1 .sp-hf-held { padding: 2.4cqmin 3.4cqmin; }
.sp-hf.sp-eng1 .sp-hf-held .sp-hp-figur { width: 19cqmin; height: 19cqmin; }
.sp-hf.sp-eng1 .sp-hf-held .sp-hp-figur .qn-av { --gr: 16cqmin; }
.sp-hf.sp-eng1 .sp-hf-pzeile { font-size: calc(14cqmin * var(--schrift, 1)); }
.sp-hf.sp-eng1 .sp-hf-titel, .sp-hf.sp-eng1 .sp-hf-gesch { padding: 1.8cqmin 3.4cqmin; }
.sp-hf.sp-eng1 .sp-hf-knopf, .sp-hf.sp-eng1 .sp-hf-knoepfe .sp-jubel { min-height: 11.4cqmin; }
.sp-hf.sp-eng2 .sp-hf-zahlen, .sp-hf.sp-eng2 .sp-hf-marke, .sp-hf.sp-eng2 .sp-jubel-t em { display: none; }
.sp-hf.sp-eng3 .sp-hf-skopf { width: 6.4cqmin; height: 6.4cqmin; }
.sp-hf.sp-eng3 .sp-hf-skopf .qn-av { --gr: 6.4cqmin; }
.sp-hf.sp-eng3 .sp-hf-ssockel { min-height: 0; padding: .6cqmin 0; }
.sp-hf.sp-eng3 .sp-hf-stufe { grid-template-columns: auto minmax(0, 1fr); column-gap: 1cqmin; }
.sp-hf.sp-eng3 .sp-hf-ssockel { grid-column: 1 / -1; }
.sp-hf.sp-eng4 .sp-hf-podium { display: none; }
.sp-hf.sp-eng5 .sp-hf-titel em, .sp-hf.sp-eng5 .sp-hf-gmarke, .sp-hf.sp-eng5 .sp-hf-gico { display: none; }
.sp-hf.sp-eng5 .sp-hf-gesch { grid-template-areas: "zahl satz"; }

/* Der Online-Schirm (online.js): Hat die Kategorie eine Online-Fassung, gibt
   es keine Handspalte — die Eingabe liegt an der Wand, die Leiste unten im
   Schirm. Ohne Fassung bleibt es beim Pult als Leiste daneben (oben). */
.sp-raum.sp-schirm-online { grid-template-columns: auto; justify-content: center; }
.sp-raum.sp-schirm-online .sp-handspalte { display: none; }
.sp-raum.sp-schirm-online .sp-wandhalter > .qn-buehne { border-radius: 14px; }

/* schritteFrei (spiel.js, eigenerSchritt): Ein Schirm, der mitten in der Uhr
   neu entsteht, bekommt ihren Stand zwei Bilder lang OHNE Übergang — sonst
   führe die Energie sichtbar von „voll" auf den Stand zurück. */
.sp-ohne-uebergang, .sp-ohne-uebergang * { transition: none !important; }

/* Weltall (Motiv „sternlinie"): Das Konfetti sind Schnipsel GOLDFOLIE — wie die Folie an den Landebeinen einer Mondfähre —,
   die sich im Fallen wenden; sie fallen SECHSMAL LANGSAMER als auf der Erde (die Schwerkraft des Mondes) und nur einmal.
   Der Ruf („Sternstunde!") steht auf einem Instrumentenschild aus Silber über dem Sieger, die Schrift dunkel (über 12 : 1,
   unabhängig vom Bild dahinter); es klappt einmal auf und hängt. Keine Sterne als Konfetti (das ist Weihnachten). */
[data-motiv="sternlinie"] .sp-e-funken i {
  width: 1.5cqmin; height: 1.1cqmin; border-radius: .1cqmin;
  background: linear-gradient(120deg, #fff3c4, #e8b84a 30%, #b07a1c 55%, #f4d27a 80%, #9a6a16);
  animation-name: sp-funke-goldfolie; animation-duration: calc(var(--fd, 3.4s) * 6); animation-iteration-count: 1;
}
[data-motiv="sternlinie"] .sp-e-funken i:nth-child(3n+1) { width: 1cqmin; height: 1.6cqmin; background: linear-gradient(60deg, #d9a33a, #fff0b8 45%, #c58c25); }
@keyframes sp-funke-goldfolie {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scaleX(1) scale(var(--fs, 1)); }
  6%   { opacity: 1; }
  25%  { transform: translate(calc(var(--fx, 0px) * .25), 28cqmin) rotate(70deg) scaleX(-.4) scale(var(--fs, 1)); }
  50%  { transform: translate(calc(var(--fx, 0px) * .5), 56cqmin) rotate(140deg) scaleX(1) scale(var(--fs, 1)); }
  75%  { transform: translate(calc(var(--fx, 0px) * .75), 84cqmin) rotate(210deg) scaleX(-.4) scale(var(--fs, 1)); }
  94%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--fx, 0px), 112cqmin) rotate(280deg) scaleX(1) scale(var(--fs, 1)); }
}
[data-motiv="sternlinie"] .sp-f-ruf {
  --sp-wa-blech: #e6edf3; --sp-wa-schrift: #0d1621;
  top: -80%; padding: .7cqmin 2.6cqmin .75cqmin; border-radius: .6cqmin;
  font-family: var(--f-display); font-weight: 900; font-size: 3cqmin; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sp-wa-schrift); text-shadow: none;
  background: linear-gradient(180deg, #fff, var(--sp-wa-blech) 55%, #b9c5d0);
  box-shadow: inset 0 -.4cqmin 0 var(--acc2), 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent), 0 0 3cqmin color-mix(in srgb, var(--acc) 34%, transparent);
}
[data-motiv="sternlinie"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-weltall 900ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-weltall { 0% { opacity: 0; transform: translateX(-50%) scaleY(.1); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1.08); } 100% { opacity: 1; transform: translateX(-50%); } }
[data-motiv="sternlinie"] .sp-ende .sp-f-wort { color: var(--t1); }
/* ERFINDER-BLOCK · Erfinder (Motiv „blaupause"): Das Konfetti sind BLAUPAUSEN-SCHNIPSEL (Rechtecke aus blauem Papier mit
   einer weißen Linie) und GOLDENE FUNKEN (kleine Rauten im Glühfaden-Licht). Der Ruf („Weltneuheit!") steht auf einem
   genieteten Typenschild aus Aluminium über dem Sieger, die Schrift dunkel (über 12 : 1, unabhängig vom Bild dahinter);
   es klappt einmal auf und hängt. Zu Akt 1 fällt ein TUCH vom Treppchen — die Enthüllung einer Erfindung. */
[data-motiv="blaupause"] .sp-e-funken i {
  width: 1.6cqmin; height: 1.1cqmin; border-radius: .1cqmin;
  background: linear-gradient(180deg, transparent 0 44%, rgba(244, 248, 255, .85) 44% 56%, transparent 56%), color-mix(in srgb, var(--acc) 62%, #0b1a33);
  box-shadow: inset 0 0 0 .1cqmin rgba(244, 248, 255, .6);
}
[data-motiv="blaupause"] .sp-e-funken i:nth-child(3n+1) {
  width: 1cqmin; height: 1.3cqmin; border-radius: 0; box-shadow: none;
  background: linear-gradient(135deg, #fffef4, var(--acc2) 50%, color-mix(in srgb, var(--acc2) 60%, #b8913f));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
[data-motiv="blaupause"] .sp-f-ruf {
  top: -80%; padding: .7cqmin 2.6cqmin .75cqmin; border-radius: .3cqmin;
  font-family: var(--f-display); font-weight: 900; font-size: 3cqmin; letter-spacing: .02em;
  color: #15202c; text-shadow: 0 .06em 0 rgba(255, 255, 255, .6);
  background:
    radial-gradient(circle, #f7f9fb 0 .12cqmin, #6c747c .3cqmin, transparent .4cqmin) .7cqmin 50% / .9cqmin .9cqmin no-repeat,
    radial-gradient(circle, #f7f9fb 0 .12cqmin, #6c747c .3cqmin, transparent .4cqmin) calc(100% - .7cqmin) 50% / .9cqmin .9cqmin no-repeat,
    linear-gradient(180deg, #f2f4f6, #d5dbe1 55%, #c3cad1);
  box-shadow: inset 0 0 0 .16cqmin rgba(255, 255, 255, .7), inset 0 -.2cqmin 0 rgba(60, 70, 80, .35), 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent),
    0 0 3cqmin color-mix(in srgb, var(--acc2) 34%, transparent);
  transform-origin: 50% 0;
}
[data-motiv="blaupause"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-erfinder 1000ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-erfinder {
  0%   { opacity: 0; transform: translateX(-50%) perspective(40cqmin) rotateX(-80deg); }
  45%  { opacity: 1; transform: translateX(-50%) perspective(40cqmin) rotateX(14deg); }
  72%  { transform: translateX(-50%) perspective(40cqmin) rotateX(-5deg); }
  100% { opacity: 1; transform: translateX(-50%); }
}
[data-motiv="blaupause"] .sp-ende .sp-f-wort { color: var(--t1); }
/* „Und sie geht an …" — Glühfaden-Licht ist zu hell für Schrift neben Urteilen; hier helles Blaupausenblau, das nur
   zwischen 80 % und voll pulsiert (wie bei Musik und Sagenwelt). */
[data-motiv="blaupause"] .fn-ehr-trommel { color: color-mix(in srgb, var(--acc) 40%, #fff); animation-name: fn-trommel-erfinder; }
@keyframes fn-trommel-erfinder { from { opacity: .8; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .36em; } }

/* Geschichte (Motiv „maeander"): Das Konfetti sind GOLDMÜNZEN ohne Prägung, die sich im Fallen drehen, und Flocken BLATTGOLD, die
   flattern — der Schatz der Schatzkammer (einmal, nicht endlos). Der Ruf („Geschichte geschrieben!") steht auf einer KARTUSCHE
   aus Pergament über dem Sieger, links ein rotes Siegel; die Schrift dunkel (über 12 : 1, unabhängig vom Bild dahinter), in zwei
   Zeilen, damit sie über dem Treppchen bleibt. Keine Sterne (Weihnachten), nichts zum Trinken. */
[data-motiv="maeander"] .sp-e-funken i {
  width: 1.3cqmin; height: 1.3cqmin; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3c4, #e8b84a 42%, #b07a1c 72%, #7a5210);
  box-shadow: inset 0 0 0 .14cqmin color-mix(in srgb, #fff3c4 50%, transparent);
  animation-name: sp-funke-goldmuenze; animation-iteration-count: 1;
}
[data-motiv="maeander"] .sp-e-funken i:nth-child(3n+1) {
  width: 1.6cqmin; height: 1.1cqmin; border-radius: .1cqmin 50% .1cqmin 50%; box-shadow: none;
  background: linear-gradient(120deg, #fff3c4, #e8b84a 38%, #c58c25 64%, #fff0b8);
  animation-name: sp-funke-blattgold;
}
@keyframes sp-funke-goldmuenze {
  0%   { opacity: 0; transform: translate(0, 0) scaleY(1) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  25%  { transform: translate(calc(var(--fx, 0px) * .25), 22cqmin) scaleY(.15) scale(var(--fs, 1)); }
  50%  { transform: translate(calc(var(--fx, 0px) * .5), 46cqmin) scaleY(1) scale(var(--fs, 1)); }
  75%  { transform: translate(calc(var(--fx, 0px) * .75), 70cqmin) scaleY(.15) scale(var(--fs, 1)); }
  92%  { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--fx, 0px), 96cqmin) scaleY(1) scale(var(--fs, 1)); }
}
@keyframes sp-funke-blattgold {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scaleX(1) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  30%  { transform: translate(calc(var(--fx, 0px) * .4), 24cqmin) rotate(60deg) scaleX(-.5) scale(var(--fs, 1)); }
  60%  { transform: translate(calc(var(--fx, 0px) * .2), 50cqmin) rotate(140deg) scaleX(1) scale(var(--fs, 1)); }
  92%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--fx, 0px), 80cqmin) rotate(220deg) scaleX(-.5) scale(var(--fs, 1)); }
}
[data-motiv="maeander"] .sp-f-ruf {
  top: -96%; padding: .7cqmin 2cqmin .75cqmin 4.6cqmin; border-radius: .4cqmin; width: max-content; max-width: 30cqmin;
  white-space: normal; text-wrap: balance; text-align: center; line-height: 1.04;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 2.6cqmin; letter-spacing: .02em;
  color: #2a1a0c; text-shadow: none;
  background:
    radial-gradient(circle at 2.3cqmin 50%, color-mix(in srgb, var(--acc2) 60%, #ffd7d0) 0, var(--acc2) 1cqmin, color-mix(in srgb, var(--acc2) 60%, #2a0508) 1.5cqmin, transparent 1.6cqmin),
    linear-gradient(180deg, #f7eedb, #e6d6b2);
  box-shadow: inset 0 0 0 .18cqmin #8a6538, 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent), 0 0 3cqmin color-mix(in srgb, var(--acc) 30%, transparent);
}
[data-motiv="maeander"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-geschichte 900ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-geschichte { 0% { opacity: 0; transform: translateX(-50%) scaleX(.1); } 50% { opacity: 1; transform: translateX(-50%) scaleX(1.06); } 100% { opacity: 1; transform: translateX(-50%); } }

/* „Und sie geht an …" (finale.css: Zweitfarbe, pulsiert zwischen 45 % und voller Deckung) — in Rost zu leise auf dem dunklen
   Akt 2 (gemessen 1,5–2,3 : 1); hier helles Rost, das nur zwischen 80 % und voll pulsiert (wie bei Musik und Sagenwelt). */
[data-motiv="sternlinie"] .fn-ehr-trommel { color: color-mix(in srgb, var(--acc2) 34%, #fff); animation-name: fn-trommel-weltall; }
@keyframes fn-trommel-weltall { from { opacity: .8; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .36em; } }
/* Geschichte: „Und sie geht an …" in hellem Siegelrot, das nur zwischen 80 % und voll pulsiert (das reine Siegelrot läge auf dem
   dunklen Akt 2 unter 4,5 : 1 — dieselbe Lehre wie bei Weltall). */
[data-motiv="maeander"] .fn-ehr-trommel { color: color-mix(in srgb, var(--acc2) 34%, #fff); animation-name: fn-trommel-geschichte; }
@keyframes fn-trommel-geschichte { from { opacity: .8; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .36em; } }

/* Tierwelt (Motiv „faehrte"): Das Konfetti sind FLAMINGOFEDERN — beim Jubel steigen sie auf und segeln schaukelnd herab (hin und
   her, wie Federn fallen; einmal, nicht endlos), dazwischen ein paar kleine Daunen. Der Ruf („Tierisch gut!") steht auf einem
   HOLZSCHILD des Camps mit eingebrannter Schrift über dem Sieger — dunkel auf hellem Holz (über 7 : 1, unabhängig vom Bild
   dahinter), in einer Zeile. Keine Sterne (Weihnachten), nichts zum Trinken. */
[data-motiv="faehrte"] .sp-e-funken i {
  width: .9cqmin; height: 2.6cqmin; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 40%, #fff) 0, var(--acc2) 46%, color-mix(in srgb, var(--acc2) 72%, #5a1426) 100%);
  box-shadow: inset .14cqmin 0 0 color-mix(in srgb, #fff 50%, transparent);
  animation-name: sp-funke-flamingofeder; animation-iteration-count: 1;
}
[data-motiv="faehrte"] .sp-e-funken i:nth-child(4n+1) {
  width: 1cqmin; height: 1cqmin; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--acc2) 40%, #fff) 60%, transparent 72%); box-shadow: none;
  animation-name: sp-funke-daune;
}
@keyframes sp-funke-flamingofeder {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  24%  { transform: translate(calc(var(--fx, 0px) * .3), 18cqmin) rotate(38deg) scale(var(--fs, 1)); }
  46%  { transform: translate(calc(var(--fx, 0px) * .1), 40cqmin) rotate(-30deg) scale(var(--fs, 1)); }
  70%  { transform: translate(calc(var(--fx, 0px) * .7), 64cqmin) rotate(26deg) scale(var(--fs, 1)); }
  92%  { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--fx, 0px), 90cqmin) rotate(-14deg) scale(var(--fs, 1)); }
}
@keyframes sp-funke-daune {
  0%   { opacity: 0; transform: translate(0, 0) scale(var(--fs, 1)); }
  10%  { opacity: .9; }
  50%  { transform: translate(calc(var(--fx, 0px) * .6), 36cqmin) scale(var(--fs, 1)); }
  100% { opacity: 0; transform: translate(var(--fx, 0px), 70cqmin) scale(var(--fs, 1)); }
}
[data-motiv="faehrte"] .sp-f-ruf {
  top: -92%; padding: .7cqmin 2.2cqmin .8cqmin; border-radius: .5cqmin; width: max-content; max-width: 34cqmin;
  white-space: nowrap; text-align: center; line-height: 1.04;
  font-family: var(--f-display); font-weight: 800; font-size: 2.8cqmin; letter-spacing: .02em;
  color: #2a1608; text-shadow: 0 .1cqmin 0 color-mix(in srgb, #fff 30%, transparent);
  background:
    repeating-linear-gradient(180deg, transparent 0 1.6cqmin, color-mix(in srgb, #6b4520 22%, transparent) 1.6cqmin 1.75cqmin),
    linear-gradient(180deg, #f0d6a4, #d9b47a 60%, #c29a5e);
  box-shadow: inset 0 0 0 .2cqmin #7a5228, inset 0 .25cqmin 0 rgba(255, 255, 255, .35), 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent), 0 0 3cqmin color-mix(in srgb, var(--acc2) 28%, transparent);
}
[data-motiv="faehrte"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-tierwelt 900ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-tierwelt { 0% { opacity: 0; transform: translateX(-50%) translateY(-40%) rotate(-6deg); } 55% { opacity: 1; transform: translateX(-50%) translateY(4%) rotate(2deg); } 100% { opacity: 1; transform: translateX(-50%); } }

/* Fußball (Motiv „rasen"): Das Konfetti sind PAPIERSCHNIPSEL in Rasengrün, Nachtblau und Weiß — kleine Rechtecke, die beim Jubel
   aufsteigen und flatternd herabsegeln (einmal, nicht endlos), wie die im Bild der Siegerehrung. Der Ruf („Weltmeister!") steht auf
   der ANZEIGETAFEL des Stadions über dem Sieger — Leuchtschrift auf schwarzem Feld (über 9 : 1, unabhängig vom Bild dahinter), in
   einer Zeile; er flackert beim Einschalten einmal auf. Kein Pokal (geschützt), nichts zum Trinken. */
[data-motiv="rasen"] .sp-e-funken i {
  width: 1.3cqmin; height: .8cqmin; border-radius: .1cqmin; background: var(--acc); box-shadow: none;
  animation-name: sp-funke-schnipsel; animation-iteration-count: 1;
}
[data-motiv="rasen"] .sp-e-funken i:nth-child(3n+1) { background: color-mix(in srgb, var(--acc2) 70%, #0b1430); }
[data-motiv="rasen"] .sp-e-funken i:nth-child(3n+2) { background: #f4f6f2; }
@keyframes sp-funke-schnipsel {
  0%   { opacity: 0; transform: translate(0, 0) rotate3d(1, .4, .2, 0deg) scale(var(--fs, 1)); }
  8%   { opacity: 1; }
  30%  { transform: translate(calc(var(--fx, 0px) * .3), 22cqmin) rotate3d(1, .4, .2, 220deg) scale(var(--fs, 1)); }
  60%  { transform: translate(calc(var(--fx, 0px) * .7), 52cqmin) rotate3d(.4, 1, .2, 460deg) scale(var(--fs, 1)); }
  92%  { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--fx, 0px), 88cqmin) rotate3d(1, .4, .2, 720deg) scale(var(--fs, 1)); }
}
/* Breit über dem Treppchen (Prüfbefund 25.10.: mit 165 × 28 px bei 1204 px Breite war der zweite Höhepunkt zu klein) — gut doppelt so
   groß, an zwei kurzen Seilen (sie verlieren sich nach oben, die Kopfzeile bleibt frei). */
[data-motiv="rasen"] .sp-f-ruf {
  top: calc(-92% - 5cqmin); padding: 1.3cqmin 4.4cqmin 1.4cqmin; border-radius: .9cqmin; width: max-content; min-width: 46cqmin; max-width: 74cqmin;
  white-space: nowrap; text-align: center; line-height: 1.04;
  font-family: var(--f-mono); font-weight: 800; font-size: 5.4cqmin; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 40%, #f6fff4); text-shadow: 0 0 .7cqmin color-mix(in srgb, var(--acc) 70%, transparent);
  background:
    repeating-linear-gradient(90deg, transparent 0 .32cqmin, color-mix(in srgb, #fff 4%, transparent) .32cqmin .42cqmin),
    repeating-linear-gradient(0deg, transparent 0 .32cqmin, color-mix(in srgb, #fff 4%, transparent) .32cqmin .42cqmin),
    #030604;
  box-shadow: inset 0 0 0 .22cqmin #29302b, 0 .6cqmin 1.6cqmin color-mix(in srgb, #000 55%, transparent), 0 0 3cqmin color-mix(in srgb, var(--acc) 26%, transparent);
}
[data-motiv="rasen"] .sp-f-ruf::before {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 100%; height: 9cqmin; pointer-events: none;
  background: linear-gradient(90deg, #59615c 0 .35cqmin, transparent .35cqmin calc(100% - .35cqmin), #59615c calc(100% - .35cqmin));
  -webkit-mask: linear-gradient(0deg, #000, transparent); mask: linear-gradient(0deg, #000, transparent);
}
[data-motiv="rasen"] .sp-e-jubel .sp-f-ruf { animation: sp-f-ruf-fussball 1000ms cubic-bezier(.3, .7, .3, 1) 1 both; }
@keyframes sp-f-ruf-fussball { 0% { opacity: 0; transform: translateX(-50%) scaleY(.1); } 34% { opacity: 1; transform: translateX(-50%) scaleY(1.06); } 48% { opacity: .35; transform: translateX(-50%); } 62% { opacity: 1; } 76% { opacity: .6; } 100% { opacity: 1; transform: translateX(-50%); } }

/* PUNKTET NIEMAND (spiel.js, zeigeEnde — Tobi, 29.10.: „Bei alle 0 das Podium ganz weglassen"): kein Podium, die Geschichten
   (Akt 1/2) bzw. die Schaufenster (Akt 3) stehen allein — mittig und so breit, wie die Bühne trägt, ohne dass etwas größer
   gesetzt wird (die Schrift bleibt, wie sie ist; nur die Spalte wird breiter). */
.sp-ende .sp-f-buehne.ohne-podium { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.sp-ende .sp-f-buehne.ohne-podium > .sp-f-abend, .sp-ende .sp-f-buehne.ohne-podium > .fn-rechts { width: min(100%, 104cqmin); }