/* =====================================================================
   Quiznight 2 · DER PAUSE-SCHIRM — „Der Sendungs-Trenner“ (pause/pause.js)
   Ordnung statt Fülle: links Wortmarke, „Pause“, die Runde als Teaser — rechts ein kleiner Stand —
   unten eine Zeile. Deckend (die Frage bleibt verdeckt), unter dem Kopf, online über dem Pult.
   Maße in cqw/cqh des Schirms (.pz-lage ist container-type: size). Keine Keyframes: html.qn-pause
   hält sie an — bewegt wird mit Web-Animationen (pause.js).
   ===================================================================== */
/* Kleinschrift in der Farbe des Sets: aufgehellt, damit sie auch bei dunklem Rot (Rennsport) über 4,5 : 1 bleibt */
.pz-lage, .pz-griffort { --pz-akzent: color-mix(in srgb, var(--acc) 62%, #fff); }

.pz-lage {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--sp-host-kopf, 0px); z-index: 1;
  overflow: hidden; pointer-events: auto; container-type: size;
  color: var(--t0); font-family: var(--f-body);
}
/* Im Schirm (pause.js, anbringen): über Frage und Pult (z ≤ 2), unter Zahnrad (24) und seinem Feld (.qh-einstblatt, 30/40) —
   so öffnen sich die Einstellungen über der Pause. Gegen `.qn-buehne > * { position: relative; z-index: 1 }` (qn.css). */
.qn-buehne > .pz-lage { position: absolute; z-index: 20; border-radius: inherit; }   /* die runden Ecken des Schirms (sonst ragte der Grund oben hinaus) */
/* Was sonst kurz „über allem“ läge (z 40: die Welle des Weiter, der Flug des Pults) — in der Pause hielte html.qn-pause es mitten im Bild fest. */
.qn-buehne:has(> .pz-lage) > .qn-weiterwelle, .qn-buehne:has(> .pz-lage) > .qh-pf-geist { visibility: hidden; }
/* Der Kopf steht über dem Pause-Schirm (der vom oberen Rand an liegt): lesbar und bedienbar, auf demselben ruhigen Grund. */
.qn-buehne:has(> .pz-lage) > .qn-kopf, .qn-buehne:has(> .pz-lage) > .sp-e-kopf { z-index: 21 !important; }   /* !important: manche Bühnen setzen ihren Kopf eigens (Bildfrage-Auflösung: z 2) */
.pz-lage *, .pz-lage *::before, .pz-lage *::after { box-sizing: border-box; }
.pz-zahl { font-variant-numeric: tabular-nums; }

/* ---- der Trenner ---- */
/* Eine Zeile, beide Spalten mittig: oben unter dem Kopf und unten gleich viel Luft — keine Leerbänder. */
.pzb { display: grid; grid-template-columns: minmax(0, 1fr) 34cqw; grid-template-rows: minmax(0, 1fr); align-items: center;
  column-gap: 5cqw; padding: calc(var(--pz-kopf, 0px) + 4cqh) 6cqw 6cqh; background: var(--g0); }
.pzb-grund { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .28; filter: blur(.6cqh) saturate(.9); transform: scale(1.04); }
/* Je Welt nachgezogen (Durchgang 02.11.): Die Tierwelt hat das hellste Titelbild (Steppe im Abendlicht) — oben unter dem Kopf etwas leiser. */
.pzb[data-set="tierwelt"] .pzb-grund { opacity: .2; }
.pzb-grund.pzb-vor { filter: none; }   /* einmal unscharf vorgerechnet (pause.js, grundVorrechnen) */
/* Links dunkel für die Schrift; oben ein weicher Verlauf, auf dem der Kopf steht (statt einer Kante unter ihm). */
.pzb::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g0) 78%, transparent) 0, color-mix(in srgb, var(--g0) 40%, transparent) var(--pz-kopf, 0px), transparent calc(var(--pz-kopf, 0px) + 14cqh)),
    linear-gradient(90deg, var(--g0) 8%, color-mix(in srgb, var(--g0) 72%, transparent) 55%, color-mix(in srgb, var(--g0) 86%, transparent)); }
.pzb > :not(.pzb-grund) { position: relative; z-index: 1; }

.pzb-links { display: grid; align-content: center; justify-items: start; gap: 2.2cqh; min-height: 0; }
.pzb-marke { display: flex; align-items: center; gap: 1cqw; font-size: max(11px, 2.3cqh); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pz-akzent); }
.pzb-marke b { color: var(--t0); font-weight: 800; }
.pzb-marke i { width: .2cqw; height: 2.4cqh; background: color-mix(in srgb, var(--t0) 30%, transparent); }
.pzb-wort { font-family: var(--f-display); font-weight: 800; font-size: max(34px, 14cqh); line-height: .86; letter-spacing: -.01em; color: var(--t0); }
.pzb-gleich { font-size: max(12px, 2.8cqh); font-weight: 600; color: var(--t1); margin-top: -.6cqh; }
.pzb-teaser { display: grid; grid-template-columns: 20cqw minmax(0, 1fr); align-items: center; gap: 1.8cqw; width: 100%; margin-top: 2cqh; padding-top: 2.4cqh; border-top: .2cqh solid color-mix(in srgb, var(--t0) 14%, transparent); }
.pzb-motiv { aspect-ratio: 16 / 9; border-radius: 1cqh; background: center / cover no-repeat; }
.pzb-ttext { display: grid; gap: .6cqh; min-width: 0; }
.pzb-ttext small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(10px, 1.9cqh); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pz-akzent); }
.pzb-ttext b { font-family: var(--f-display); font-size: max(16px, 4.4cqh); font-weight: 800; line-height: 1.02; }
.pzb-ttext span { font-size: max(11px, 2.3cqh); font-weight: 600; color: var(--t1); }

.pzb-tafel { align-self: center; display: grid; gap: .2cqh; }
.pzb-tkopf { padding-bottom: 1.2cqh; margin-bottom: .6cqh; border-bottom: .2cqh solid color-mix(in srgb, var(--t0) 14%, transparent); font-size: max(10px, 1.9cqh); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t1); }
.pzb-zeile { display: grid; grid-template-columns: 3.4cqh 6cqh minmax(0, 1fr) auto; align-items: center; column-gap: 1.2cqw; height: 7.4cqh; border-bottom: .15cqh solid color-mix(in srgb, var(--t0) 8%, transparent); }
.pzb-zeile b { font-size: max(11px, 2.6cqh); font-weight: 800; color: var(--t1); text-align: right; }
.pzb-zeile[data-vorn] b { color: var(--pz-akzent); }
.pzb-fig { width: 6cqh; height: 6cqh; }
.pzb-fig svg { display: block; overflow: visible; }
.pzb-name { font-size: max(12px, 2.8cqh); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pzb-pkt { font-size: max(12px, 2.8cqh); font-weight: 800; }
.pzb-mehr { padding-top: 1cqh; font-size: max(10px, 1.9cqh); color: var(--t1); }

/* Die Frist: eine schlanke Leiste, die abläuft (pause.js, tick — eine Übergangs-Bewegung, html.qn-pause hält nur Keyframes an), die Restzeit,
   dezent wer angehalten hat. Klein und in einer Zeile — Profi-Maß, nicht groß gezogen. */
.pzb-frist { display: flex; align-items: center; gap: 1.2cqw; margin-top: .4cqh; font-size: max(11px, 2.2cqh); font-weight: 600; color: var(--t1); white-space: nowrap; max-width: 100%; }
.pzb-balken { flex: none; position: relative; width: 12cqw; height: max(3px, .6cqh); border-radius: 1cqh; overflow: hidden; background: color-mix(in srgb, var(--t0) 16%, transparent); }
.pzb-balken > i { position: absolute; inset: 0; border-radius: inherit; background: var(--pz-akzent); transform-origin: 0 50%; transition: transform .5s linear; }
.pzb-frist b { color: var(--t0); font-weight: 800; }
.pzb-punkt { flex: none; width: .5cqh; height: .5cqh; border-radius: 50%; background: var(--t1); }
.pzb-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- der Griff ohne Pult: unten rechts (mit Pult ist „Fortsetzen“ ein Knopf des Pults, pause.js pultAn) ---- */
.pz-griffort { position: absolute; z-index: 4; display: flex; pointer-events: auto; right: 2.6cqmin; bottom: 2.6cqmin; height: max(48px, 9cqmin); }
.pz-griffort .pz-griff { height: 100%; padding: 0 max(18px, 3.4cqmin); }
.pz-griffort .sp-host-griff { font-size: max(13px, 3.2cqmin); gap: 1.4cqmin; border-radius: 2cqmin; justify-content: center; }
.pz-griffort .sp-host-griff .sp-host-z { width: 3.6cqmin; height: 3.6cqmin; }

/* ---- DAS PULT IN DER PAUSE (online, jede Phase): Tobi, 02.11.2026: „ich will da einen ganz normalen Fortsetzen-Knopf wie bei
   Abschicken, nur halt wo Fortsetzen draufsteht.“ ---- */
/* Rechts: Was dort sonst steht (der Knopf der Frage, Platz und Punkte, die Taste des Stands), tritt zurück — an seiner Stelle der
   Knopf .pz-los, gebaut wie „Abschicken“ (.qo-los mit dem Zustand „gewählt“ — beim Gast ruhend, „leer“ und deaktiviert). */
.qo-leiste.pz-pult > :is(.qo-los, .qo-rang):not(.pz-los), .qo-leiste.pz-pult > :is(.qo-los, .qo-rang):not(.pz-los) * { visibility: hidden !important; pointer-events: none !important; }
.qo-leiste.pz-pult > .pz-los { grid-column: 4; grid-row: 1; align-self: stretch; animation: none !important; }
.qo-leiste.pz-pult > .pz-los .qo-kappe { animation: none !important; }
.qo-leiste.pz-pult > .pz-los[disabled] { cursor: default; }
.qo-leiste.pz-pult > .pz-los .pz-halt { display: block; width: max(18px, 4.4cqmin); height: max(18px, 4.4cqmin); opacity: .7; }
.qo-leiste.pz-pult > .pz-los .pz-halt svg { display: block; width: 100%; height: 100%; }
/* Die Anzeige: NUR die Pause — „Pause“, darunter wer angehalten hat, in der Schrift der Welt (.qo-a-t). Alles andere darin
   (Wahl, Urteil, Punkte, „eingeloggt“) tritt zurück und kommt danach unverändert wieder. Nichts wird abgeschnitten: Die
   zweite Zeile darf umbrechen (lange Namen). */
.qo-display:has(> .pz-anzeige) > :not(.qo-d-glas):not(.pz-anzeige) { display: none !important; }
.qo-display > .qo-anzeige.pz-anzeige { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; animation: none !important; }
.qo-pult .pz-anzeige .qo-a-t > b { color: var(--disp-an, var(--t0)); animation: none !important; }
.qo-pult .pz-anzeige .qo-a-t em { white-space: normal; overflow: visible; -webkit-mask-image: none; mask-image: none; text-wrap: balance; line-height: 1.2; }
/* (Der Buddy im Pult lebt in der Pause weiter: die Ausnahme von der Sperre steht in qn.css, bei html.qn-pause.) */
@media (prefers-reduced-motion: reduce) { .pzb-balken > i { transition: none; } }
/* ---- der Kopf in der Pause (pause.js, kopfAn): „Pause“ mit Zeichen an der Stelle von Zeichen und Name der Phase ---- */
.qn-kopf.pz-kopf > :is(.qn-kopf-glyph, .qn-kopf-name):not(.pz-kopf-teil) { display: none !important; }
.qn-kopf.pz-kopf > .pz-kopf-teil { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Rechts im Kopf steht in der Pause nichts (Tobi, 02.11.2026: „… und mach oben rechts den Timer beim Pausenscreen weg“ — „das schild
   auflösung/stand auch weg“): die stehende Uhr, „weiter in“ und das Schild der Phase (.qn-kopf-rechts). Unsichtbar statt entfernt —
   die Uhr läuft danach an derselben Stelle weiter, ohne neu zu beginnen; die Lücke ist rechts, wo der Kopf ohnehin frei ausläuft
   (online stehen dort weiter Krone und Zahnrad). Auch im Ausgang, bis der Schirm weg ist (:has) — dann läuft die Uhr wieder. Es bleiben QUIZNIGHT · Set · ❚❚ Pause · „Frage x von y“ bzw. „Runde x von y“. */
:is(.qn-kopf.pz-kopf, .qn-buehne:has(> .pz-lage) > .qn-kopf) > .qn-kopf-rechts, :is(.qn-kopf.pz-kopf, .qn-buehne:has(> .pz-lage) > .qn-kopf) > .qn-kopf-rechts * { visibility: hidden !important; }