/* =====================================================================
   Quiznight 2 · DAS FINALE IN DREI AKTEN (finale.js)
   Akt 2: die Auszeichnungen über dem Treppchen · Akt 3: die Schaufenster
   rechts daneben · das Handy: drei Kacheln zum Abstimmen.
   Farben nur aus Rollen; jede Karte trägt die Farben IHRES Sets (--acc, --acc2,
   --auf-acc, --auf-acc2 an der Karte gesetzt). Maße der Bühne in cqmin, die der
   Auszeichnung in cqh ihres Felds — online ist es niedriger als am Fernseher.
   Keine Schrift unter 9 px (Größe S): max(9px, …), wie überall auf der Bühne.
   ===================================================================== */

/* ---------- AKT 2 · Die Auszeichnungen ---------- */
.sp-ende.fn-akt2 .sp-f-buehne > * {
  opacity: 0 !important; visibility: hidden;
  transition: opacity var(--d-mittel) var(--k-aus), visibility 0s var(--d-mittel);
}
/* Was gleich verliehen wird, verrät vorher niemand: nicht das Treppchen, nicht die Liste, nicht die
   eigene Leiste, nicht das Handy. Der Platz bleibt frei — nichts springt. */
.sp-ende.fn-titel-zu .fn-zu { visibility: hidden; }
.sp-ende.fn-akt3 .fn-zu { animation: fn-ein var(--d-lang) var(--k-ein) both; }
.qo-leiste.fn-titel-zu .qo-pe-tname, .qo-leiste.fn-titel-zu .qo-e-tzeile { visibility: hidden; position: relative; }
.qo-leiste.fn-titel-zu .qo-pe-tname::before, .qo-leiste.fn-titel-zu .qo-e-tzeile::before {
  content: 'Dein Titel …'; visibility: visible; position: absolute; left: 0; top: 0; white-space: nowrap; opacity: .72;
}
/* Die Leiste ohne Pult sagt „Dein Titel" schon darüber. */
.qo-leiste.fn-titel-zu .qo-e-tzeile::before { content: 'wird gleich verliehen …'; }
.qo-leiste.fn-titel-auf .qo-pe-tname, .qo-leiste.fn-titel-auf .qo-e-tzeile { animation: fn-karte .5s var(--k-schnapp) both; }
/* Am Handy steht der Platzhalter mittig im Kasten (über Titel- und Wertzeile), nicht oben in der Ecke. */
.sp-hf-titel.fn-zu b { visibility: hidden; position: relative; }
.sp-hf-titel.fn-zu em { visibility: hidden; }
.sp-hf-titel.fn-zu b::before { content: 'wird gleich verliehen …'; visibility: visible; position: absolute; inset: .8em 0 auto 0; white-space: nowrap; font-size: .7em; color: var(--t1); }
.sp-hf.sp-eng5 .sp-hf-titel.fn-zu b::before { inset: 0; }
.sp-hf-titel.fn-auf b, .sp-hf-titel.fn-auf em { animation: fn-karte .5s var(--k-schnapp) both; }
/* Das Treppchen kommt aus der Verleihung zurück: Es blendet ein. Ohne Verleihung (Akt 1 → 3) stand es
   die ganze Zeit da — dann blendet nichts (es sprang sonst auf null und kam neu). */
.sp-ende.fn-akt3.fn-von2 .sp-f-podium { animation: fn-ein var(--d-lang) var(--k-ein) both; }

.fn-ehr {
  position: absolute; z-index: 4; container-type: size;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: center;
  animation: fn-ein var(--d-mittel) var(--k-ein) both;
}
/* Ausblenden als eigene Animation: `opacity` allein verlor gegen `fn-ein … both` — das Feld stand
   dann 420 ms still und wurde hart ersetzt (Gegenprüfung). */
.fn-ehr.geht { animation: fn-aus .4s var(--k-aus) both; }
/* Ein weicher dunkler Fleck hinter dem Geschehen — ohne Kante, das Feld endet nirgends sichtbar. */
.fn-ehr::before {
  content: ''; position: absolute; inset: -6cqh -4cqw; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 62% at 50% 56%, color-mix(in srgb, var(--g0) 78%, transparent), transparent 100%);
}
/* Angehalten: ein kleines Zeichen oben rechts — für alle, nicht nur für den Host. */
.fn-ehr.halt::after {
  content: ''; position: absolute; right: 1cqh; top: 1cqh; width: 7cqh; height: 7cqh; border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) 36% 50% / 10% 40% no-repeat,
    linear-gradient(#fff, #fff) 64% 50% / 10% 40% no-repeat,
    color-mix(in srgb, var(--g0) 70%, transparent);
  box-shadow: inset 0 0 0 .5cqh color-mix(in srgb, var(--t0) 40%, transparent);
}
.fn-ehr-kopf { grid-row: 1; display: grid; justify-items: center; gap: 1.2cqh; padding-top: 1cqh; width: 100%; min-width: 0; }
.fn-ehr-nr { font: 800 max(9px, 3.4cqh)/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--t1); }
.fn-ehr-zeichen {
  width: 15cqh; height: 15cqh; display: grid; place-items: center; border-radius: 50%; color: var(--acc2);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc2) 30%, transparent), transparent);
  filter: drop-shadow(0 0 4cqh color-mix(in srgb, var(--acc2) 70%, transparent));
  animation: fn-stempel .5s var(--k-schnapp) both;
}
.fn-ehr-zeichen svg { width: 66%; height: 66%; }
/* Die Zeile schneidet NICHT ab: Mit `overflow: hidden` fehlten die Punkte von „GRÖSSTE", die
   Unterlängen der Namen, und das Leuchten stand als Kasten hinter dem Titel. Die Breite sichert passe(). */
.fn-ehr-zeile { display: block; width: 100%; min-width: 0; text-align: center; }
.fn-ehr-titel {
  display: inline-block; font-family: var(--f-display); font-weight: 900; font-size: 14cqh; line-height: 1.16;
  text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
  background: linear-gradient(120deg, #fff 10%, var(--acc2) 60%, var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .8cqh 4cqh color-mix(in srgb, var(--acc) 50%, transparent));
  animation: fn-hoch .5s var(--k-ein) .12s both;
}
.fn-ehr.da .fn-ehr-zeichen { width: 10cqh; height: 10cqh; animation: none; }
.fn-ehr.da .fn-ehr-titel { font-size: 9cqh; animation: none; }
.fn-ehr-trommel {
  grid-row: 2; margin-top: 2cqh; font: 800 max(10px, 4.6cqh)/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--acc2);
  animation: fn-puls .7s ease-in-out .5s infinite alternate both;
}
/* Alle warten: so groß, wie die Reihe es zulässt — mittig im Raum unter dem Titel. */
.fn-ehr-reihe { grid-row: 3; align-self: center; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 2cqh; }
.fn-ehr-kandidat { width: min(42cqh, calc((100cqw - 6cqh) / var(--fn-n, 4) - 2cqh)); aspect-ratio: 1; flex: none; animation: fn-hoch .5s var(--k-ein) both; }
.fn-ehr-kandidat .qmr, .fn-ehr-figur .qmr, .fn-ehr-gast .qmr { width: 100%; height: 100%; }
/* Der Gewinner springt nach vorn. */
.fn-ehr-sieger { grid-row: 3; align-self: center; width: 100%; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 5cqh; }
.fn-ehr-figur { width: 58cqh; height: 58cqh; flex: none; animation: fn-sprung .62s var(--k-schnapp) both; }
/* Die Breite des Texts aus der BREITE des Felds (minus Figur, Lücke und die Klatscher an beiden
   Rändern) — eine Grenze aus der Höhe machte lange Namen im breiten, niedrigen Online-Feld winzig. */
.fn-ehr-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1cqh; min-width: 0; max-width: max(60cqh, calc(100cqw - 132cqh)); animation: fn-hoch .5s var(--k-ein) .2s both; }
.fn-ehr-text .fn-ehr-zeile { text-align: left; }
.fn-ehr-name {
  display: inline-block; font-family: var(--f-display); font-weight: 900; font-size: 17cqh; line-height: 1.16; white-space: nowrap;
  color: color-mix(in srgb, var(--pf, #fff) 80%, #fff); text-shadow: 0 .6cqh 3cqh rgba(0, 0, 0, .55);
}
.fn-ehr-wert { font-family: var(--f-display); font-weight: 800; font-size: 8cqh; line-height: 1.1; color: var(--acc2); text-wrap: balance; }
.fn-ehr-dazu { font: 600 max(10px, 4.8cqh)/1.3 var(--f-body); color: var(--t1); text-wrap: balance; }
/* Die anderen klatschen am Rand: höchstens zwei je Seite. */
.fn-ehr-rest { position: absolute; bottom: 0; display: flex; align-items: flex-end; animation: fn-ein .4s var(--k-ein) .25s both; }
.fn-ehr-rest.links { left: 0; }
.fn-ehr-rest.rechts { right: 0; }
.fn-ehr-gast { width: 18cqh; height: 18cqh; flex: none; }
.fn-ehr-gast + .fn-ehr-gast { margin-left: -6cqh; }
/* Ein hohes Feld (der Fernseher: weniger als 2,4-mal so breit wie hoch) ist in cqh gerechnet schmal.
   Dort wird die Figur etwas kleiner und es klatscht nur EINER je Seite — der Name bekommt die Breite.
   Sonst schrumpfte schon ein Name mit zehn Buchstaben, und der Text lief unter die Klatscher. */
@container (max-aspect-ratio: 24 / 10) {
  .fn-ehr-figur { width: 48cqh; height: 48cqh; }
  .fn-ehr-text { max-width: max(60cqh, calc(100cqw - 95cqh)); }
  .fn-ehr-gast + .fn-ehr-gast { display: none; }
}
.fn-ehr-funken { position: absolute; left: 50%; top: 58%; width: 0; height: 0; pointer-events: none; }
.fn-ehr-funken i {
  position: absolute; left: 0; top: 0; width: 2.6cqh; height: 1.4cqh; border-radius: .3cqh; opacity: 0;
  animation: fn-funke 1.5s cubic-bezier(.1, .7, .3, 1) var(--fv, 0ms) both;
}

@keyframes fn-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fn-aus { from { opacity: 1; } to { opacity: 0; } }
@keyframes fn-hoch { from { opacity: 0; transform: translateY(5cqh); } to { opacity: 1; transform: none; } }
@keyframes fn-stempel { from { opacity: 0; transform: scale(2.2) rotate(-18deg); } to { opacity: 1; transform: none; } }
@keyframes fn-puls { from { opacity: .45; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .36em; } }
@keyframes fn-sprung { 0% { opacity: 0; transform: translateY(40cqh) scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes fn-funke {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx), calc(var(--fy) + 26cqh)) rotate(var(--fd)) scale(1); }
}

/* ---------- AKT 3 · Die Schaufenster ---------- */
.fn-rechts {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.4cqmin; min-height: 0; min-width: 0;
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
.fn-rechts.da { opacity: 1; }
/* ONLINE liegt unter dem Finale die Leiste (das Pult). Das Treppchen steht auf ihrer Kante — das
   Schaufenster nicht: Es stieß mit null Abstand an (Tobi, 2026-10-04: „viel zu klein"). Jetzt hält
   es so viel Luft wie die Spalten untereinander (.sp-f-buehne, 3cqmin). */
.qo-schirm .fn-rechts { padding-bottom: 3cqmin; }
/* Die Kopfzeile: die Frage und rechts, wer entscheidet. Wird es eng, kürzt finale.js (kopfPasse) der
   Reihe nach: „… entscheidet" fällt weg (fn-eng1) → die Frage fällt weg, und aus „Du entscheidest" wird
   „Du" (fn-eng2) → zuletzt kürzt ein fremder Name mit „…". Nichts läuft über den Rand. */
.fn-kopf { display: flex; align-items: center; gap: 1cqmin; min-width: 0; min-height: 4.6cqmin; }
.fn-wer { flex: 0 1 auto; min-width: 0; margin-left: auto; display: inline-flex; align-items: center; gap: .7cqmin; font: 800 max(9px, 1.9cqmin)/1.2 var(--f-body); color: var(--t0); white-space: nowrap; }
.fn-wer i { display: inline-grid; width: 2.2cqmin; height: 2.2cqmin; min-width: 9px; min-height: 9px; color: var(--acc2); flex: none; }
.fn-wer i svg { width: 100%; height: 100%; }
.fn-wer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fn-wer-tut { flex: none; margin-left: -.15cqmin; }
.fn-wer.ich .fn-wer-name { flex: none; overflow: visible; }   /* „Du" kürzt nie zu nichts */
.fn-eng1 .fn-wer:not(.ich) .fn-wer-tut, .fn-eng2 .fn-wer-tut { display: none; }
.fn-kopf b { font: 800 max(9px, 2.1cqmin)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); white-space: nowrap; flex: none; }
.fn-eng2 > b { display: none; }
/* Beim Messen (kopfPasse) schrumpft nichts — sonst sähe die Zeile immer passend aus. */
.fn-mess > * { flex: none !important; }
.fn-mess .fn-wer-name { overflow: visible !important; }

.fn-feld { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; min-width: 0; }
.fn-blatt { grid-area: 1 / 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; min-width: 0; }

/* DAS SCHAUFENSTER: eine große Karte „Als Nächstes", darunter zwei kleine. Die Karte selbst ist das
   Bauteil QN.setKarte (setkarte.js/.css) — Titelbild, Name, Lockzeile, Trailer, Bewegung, Rahmen. Hier
   steht nur, was das Finale dazugibt: das Raster, das Maß (--sk = 1cqmin der Bühne), der Auftritt und
   die Einbauten (Monster, Stimm-Knopf, „Jetzt spielen"). */
.fn-schau { --sk: 1cqmin; display: grid; grid-template-rows: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6cqmin; min-height: 0; }
.fn-schau[data-n="1"] { grid-template-rows: minmax(0, 1fr); }
.fn-schau[data-n="2"] .fn-karte:not(.gross) { grid-column: 1 / -1; }
.fn-karte.gross { grid-column: 1 / -1; }
/* Der Auftritt füllt nur RÜCKWÄRTS (backwards): Stünde er danach noch an der Karte, höbe sie sich beim
   Zeigen nicht mehr (eine Animation schlägt jede Regel). */
.fn-rechts.da .fn-blatt .fn-karte { animation: fn-karte .55s var(--k-schnapp) backwards; }
.fn-rechts.da .fn-karte:nth-child(2) { animation-delay: 90ms; }
.fn-rechts.da .fn-karte:nth-child(3) { animation-delay: 170ms; }
@keyframes fn-karte { from { opacity: 0; transform: translateY(3cqmin) scale(.96); } to { opacity: 1; transform: none; } }
/* Wer für das Set gestimmt hat, schaut von unten hinein. Wie viele passen, rechnet finale.js aus diesen
   Maßen (guckerMalen: 13 breit, jede weitere 9,8 — klein 9,6 und 7); „+N" hängt am letzten Monster. */
.fn-gucker { position: absolute; z-index: 2; left: 1.6cqmin; bottom: -3.6cqmin; display: flex; align-items: flex-end; pointer-events: none; }
.fn-guck { width: 13cqmin; height: 13cqmin; margin-right: -3.2cqmin; flex: none; animation: fn-guck .55s var(--k-schnapp) both; }
.fn-guck .qmr { width: 100%; height: 100%; }
@keyframes fn-guck { from { transform: translateY(80%); } to { transform: none; } }
.fn-mehr {
  position: relative; z-index: 2; align-self: flex-start; flex: none; margin: 1cqmin 0 0 -1.2cqmin;
  font: 800 max(9px, 2cqmin)/1 var(--f-body); padding: .6cqmin 1.1cqmin; border-radius: 10cqmin;
  background: rgba(6, 6, 10, .82); color: #fff; box-shadow: inset 0 0 0 .2cqmin rgba(255, 255, 255, .4);
}
.fn-karte:not(.gross) .fn-gucker { left: 1cqmin; bottom: -2.6cqmin; }
.fn-karte:not(.gross) .fn-guck { width: 9.6cqmin; height: 9.6cqmin; margin-right: -2.6cqmin; }
.fn-karte:not(.gross) .fn-mehr { margin: .4cqmin 0 0 -.8cqmin; font-size: max(9px, 1.8cqmin); }
/* Die ganze Karte ist die Stimme; der Knopf des Hosts liegt darüber. */
.fn-waehl { position: absolute; inset: 0; z-index: 3; appearance: none; border: 0; margin: 0; padding: 0; background: none; cursor: pointer; border-radius: inherit; }
.fn-waehl:disabled { cursor: default; }
.fn-waehl:focus-visible { outline: .4cqmin solid #fff; outline-offset: -.8cqmin; }
.fn-tu { position: absolute; right: 2cqmin; bottom: 2.2cqmin; z-index: 5; display: flex; pointer-events: none; }
.fn-karte:not(.gross) .fn-tu { right: 1.2cqmin; bottom: 1.2cqmin; }
/* „JETZT SPIELEN" — der Knopf, um den es geht. In der Hauptfarbe des Sets, die Schrift in der Farbe, die
   das Thema dafür rechnet (--auf-acc: Weiß auf dem Verlauf zum hellen --acc2 kam bei Rennsport und
   Weihnachten nur auf 1,6:1). Er LEBT: Sein Schein atmet (eine Fläche dahinter, nur opacity), ein
   Lichtstreif läuft darüber, wenn der Trailer zum Titel zurückkehrt (.sk-ruf, setkarte.js), beim
   Zeigen hebt er sich und der Pfeil rückt vor, beim Drücken gibt er nach. */
.fn-los {
  position: relative; isolation: isolate; overflow: visible; pointer-events: auto; appearance: none; border: 0; margin: 0; cursor: pointer; white-space: nowrap; color: var(--auf-acc, #fff);
  display: inline-flex; align-items: center; gap: 1.1cqmin;
  font: 800 3cqmin/1 var(--f-body); padding: 1.7cqmin 2.4cqmin 1.7cqmin 3.2cqmin; border-radius: 10cqmin;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 88%, #fff), var(--acc) 46%, color-mix(in srgb, var(--acc) 74%, #000));
  box-shadow: 0 .8cqmin 2.2cqmin rgba(0, 0, 0, .5), inset 0 0 0 .24cqmin rgba(255, 255, 255, .46), inset 0 .5cqmin .8cqmin rgba(255, 255, 255, .22);
  transition: transform var(--d-kurz) var(--k-ein), filter var(--d-kurz) var(--k-ein);
  animation: fn-karte .4s var(--k-schnapp) backwards;
}
/* Der Schein hinter dem Knopf atmet. */
.fn-los::before {
  content: ''; position: absolute; inset: -1.4cqmin; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 82%, #fff), color-mix(in srgb, var(--acc) 50%, transparent) 62%, transparent);
  opacity: .5; animation: fn-los-atmen 2.6s ease-in-out infinite alternate; will-change: opacity;
}
/* Nur die Deckkraft atmet: Mit einer Größenänderung dazu kostete der Schein rund 2 ms je Bild (gemessen). */
@keyframes fn-los-atmen { from { opacity: .28; } to { opacity: .74; } }
/* Der Lichtstreif auf dem Knopf (in einer Hülle, die an seinem Rand abschneidet). */
.fn-los > span { position: relative; }
.fn-los::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sk-ruf .fn-los::after { animation: fn-los-streif 1.1s cubic-bezier(.4, 0, .2, 1) .25s 1 both; }
@keyframes fn-los-streif { 0% { opacity: 0; transform: translateX(-60%); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
.fn-los i { display: inline-grid; place-items: center; width: 3.8cqmin; height: 3.8cqmin; border-radius: 50%; flex: none; font-style: normal;
  background: color-mix(in srgb, var(--auf-acc, #fff) 18%, transparent); transition: transform var(--d-kurz) var(--k-schnapp); }
.fn-los i svg { width: 58%; height: 58%; margin-left: 8%; }
.fn-los:hover { transform: translateY(-.3cqmin) scale(1.045); filter: brightness(1.1); }
.fn-los:hover i { transform: translateX(.5cqmin) scale(1.08); }
.fn-los:active { transform: scale(.955); filter: brightness(.96); transition-duration: 60ms; }
.fn-los:focus-visible { outline: .4cqmin solid #fff; outline-offset: .3cqmin; }
.fn-los:disabled { cursor: default; }
/* Gedrückt: Der Knopf bleibt hell und wartet — gleich fährt die Karte auf (fn-tor). */
.fn-los.fn-geht { filter: brightness(1.18); transform: scale(.97); }
.fn-karte:not(.gross) .fn-los { font-size: max(9px, 2.1cqmin); padding: 1.1cqmin 1.3cqmin 1.1cqmin 1.9cqmin; gap: .7cqmin; }
.fn-karte:not(.gross) .fn-los i { width: 2.8cqmin; height: 2.8cqmin; min-width: 11px; min-height: 11px; }
.fn-karte:not(.gross) .fn-los::before { inset: -.9cqmin; }
/* Kein Platz neben den Monstern (finale.js guckerMalen): nur der Pfeil, rund. */
.fn-karte.fn-rund .fn-los { padding: .9cqmin; gap: 0; }
.fn-karte.fn-rund .fn-los > span { display: none; }
/* Die Stimme der Gäste: „Abstimmen" an jeder Karte, danach „✓ Deine Stimme" an der eigenen. Beim Zeigen
   auf die Karte füllt sich „Abstimmen" mit der Farbe des Sets — die Karte sagt: hier. */
.fn-chip { font: 800 2.4cqmin/1 var(--f-body); padding: 1.3cqmin 2.4cqmin; border-radius: 10cqmin; color: #fff; white-space: nowrap; transition: background var(--d-kurz) var(--k-ein), color var(--d-kurz) var(--k-ein), transform var(--d-kurz) var(--k-schnapp); }
.fn-chip.leise { background: rgba(6, 6, 10, .5); box-shadow: inset 0 0 0 .25cqmin rgba(255, 255, 255, .62); }
.fn-karte.sk-zeigbar:hover .fn-chip.leise, .fn-karte.sk-zeigbar:focus-within .fn-chip.leise { background: var(--acc); color: var(--auf-acc, #fff); box-shadow: inset 0 0 0 .25cqmin rgba(255, 255, 255, .5); transform: scale(1.06); }
.fn-chip.gewaehlt { background: var(--acc2); color: var(--auf-acc2, #14141a); box-shadow: 0 .6cqmin 1.8cqmin rgba(0, 0, 0, .45); animation: fn-karte .4s var(--k-schnapp) backwards; }
.fn-karte:not(.gross) .fn-chip { font-size: max(9px, 1.9cqmin); padding: 1cqmin 1.6cqmin; }
.fn-karte:not(.gross) .fn-chip.gewaehlt { min-width: 4.6cqmin; height: 4.6cqmin; padding: 0 1cqmin; display: grid; place-items: center; }

/* DER START (finale.js, schluss.geht): Die gewählte Karte schnurrt über der Bühne zum Punkt — als eigene Ebene darüber
   (laden/set-wechsel.css, das Portal); am Finale selbst ändert sich nichts (ein Umbau des alten Schirms zeichnete ihn
   neu). .fn-geht am Schaufenster sagt nur: Es geht los — der Griff zum Marktplatz öffnet dann nicht mehr (marktgriff.js). */

/* ---------- Das Handy in Akt 3: abstimmen ---------- */
.sp-hf.fn-hw-an .sp-hf-gesch, .sp-hf.fn-hw-an .sp-hf-podium { display: none; }
/* Der Host hat jetzt EINEN Hauptknopf: „‹Set› spielen". „Neues Set" (die volle Auswahl) tritt zurück. */
.sp-hf.fn-hw-an:has(.fn-hw-los) .sp-hf-knopf.haupt { background: color-mix(in srgb, var(--t0) 10%, var(--g1)); color: var(--t0); }
.fn-hw { display: grid; gap: 2cqmin; }
.fn-hw-kopf { font: 800 3.1cqmin/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.fn-hw-reihe { display: grid; grid-template-columns: repeat(var(--fn-n, 3), minmax(0, 1fr)); gap: 2cqmin; }
.fn-hw-kachel {
  position: relative; overflow: hidden; isolation: isolate; appearance: none; border: 0; margin: 0; cursor: pointer;
  min-height: max(64px, 25cqmin); border-radius: 3.4cqmin; padding: 2cqmin; color: #fff; text-align: left;
  display: grid; align-content: end; justify-items: start; gap: .8cqmin; -webkit-tap-highlight-color: transparent;
}
.fn-hw-bild { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.fn-hw-kachel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 6, 10, .1) 20%, rgba(6, 6, 10, .86) 100%); }
.fn-hw-kachel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 .5cqmin color-mix(in srgb, var(--acc) 70%, transparent); }
.fn-hw-kachel.meins::after { box-shadow: inset 0 0 0 1.1cqmin var(--acc2); }
.fn-hw-kachel:active { transform: scale(.97); }
.fn-hw-kachel b { font-family: var(--f-display); font-weight: 800; font-size: 3.2cqmin; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 .3cqmin 1.4cqmin rgba(0, 0, 0, .8); }
.fn-hw-kachel i { font: 700 2.7cqmin/1 var(--f-body); font-style: normal; opacity: .85; }
.fn-hw-haken { position: absolute; right: 1.6cqmin; top: 1.6cqmin; width: 6.4cqmin; height: 6.4cqmin; display: grid; place-items: center; border-radius: 50%; background: var(--acc2); color: var(--auf-acc2, #14141a); font: 900 3.6cqmin/1 var(--f-body); }
/* 64 px im Entwurfsmaß (390 breit): Auf kleinen Telefonen schrumpft die ganze Hand auf rund drei
   Viertel — dann bleiben 47 px. Mit 48 waren es dort nur 37 (Gegenprüfung). */
.fn-hw-los {
  appearance: none; border: 0; margin: 0; cursor: pointer; min-height: 64px; border-radius: 10cqmin; color: var(--auf-acc, #fff);
  font: 800 4.4cqmin/1 var(--f-body); padding: 0 5cqmin; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 76%, #000));
  box-shadow: inset 0 0 0 .4cqmin rgba(255, 255, 255, .34);
}
.fn-hw-los i { font-style: normal; }
.fn-hw-los:disabled { filter: saturate(.4) brightness(.8); }
.sp-hf.sp-eng3 .fn-hw-kachel { min-height: max(64px, 20cqmin); }
.sp-hf.sp-eng5 .fn-hw-kachel { min-height: 64px; }

/* Reduzierte Bewegung: nichts fliegt, nichts blendet — und nichts bleibt deshalb unsichtbar. Die
   Verleihung blendet dann auch nicht aus (finale.js lässt den Schritt weg): Sie wird ersetzt. */
@media (prefers-reduced-motion: reduce) {
  .fn-ehr, .fn-ehr *, .fn-karte, .fn-guck, .fn-los, .fn-los::before, .fn-los::after, .fn-chip, .sp-ende.fn-akt3 .fn-zu, .sp-ende.fn-akt3.fn-von2 .sp-f-podium { animation: none !important; }
  .fn-ehr-funken { display: none; }
}

/* ZUJUBELN (finale.js, F.zujubeln): „Anna jubelt!" am ersten Sieger — links oben neben seinem Ring, wo neben ihm Luft ist (die
   Plätze daneben stehen tiefer). Der Name steht, wie er ist (keine Großbuchstaben: aus „ß" würde „SS"); ein langer bricht um. */
.sp-f-figur > .fn-zujubel { left: auto; right: 96%; top: 6%; margin: 0; transform: none; text-transform: none; letter-spacing: .02em;
  white-space: normal; width: max-content; max-width: 30cqmin; text-align: center; }
.sp-f-figur > .fn-zujubel.an { animation-name: fn-zujubel; }
.sp-f-figur > .fn-zujubel.oben { right: auto; left: 50%; top: auto; bottom: 88%; translate: -50% 0; }
@keyframes fn-zujubel {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: 1; transform: scale(1.08); }
  30%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40%); }
}
@media (prefers-reduced-motion: reduce) { .sp-f-figur > .fn-zujubel.an { animation: none; opacity: 1; transform: none; } }