/* ---------- Pubquiz Leinwand (Teil 3): ganze Fläche, große Schrift aus der Ferne (Spec 2026-10-14-pubquiz-leinwand-design.md) ----------
 * Gilt nur, solange die Pubquiz-Folie gezeichnet ist (Kopfzeile vorhanden); --pq-k = 1 % der Höhe einer 16:9-Leinwand
 * (10,8 px bei 1080p, 7,2 px bei 720p). Mindestschrift: Frage ≥ 5,2k, Antworten ≥ 4,1k, Rundenkopf und Zeit ≥ 3k, nichts unter 2,3k. */
.quiz-elimination.pq-stage {
  --pq-k: min(1vh, 0.5625vw);
}
.quiz-elimination.pq-stage:has(> .quiz-elimination-header) {
  justify-content: flex-start;
  align-items: stretch;
  gap: calc(1.6 * var(--pq-k));
  padding: calc(2 * var(--pq-k)) 3vw calc(var(--stage-bar-clear, 0px) + 2 * var(--pq-k));
  box-sizing: border-box;
}
/* QR-Kasten unten rechts: Inhalt rückt nach links, nichts liegt darunter. */
.quiz-elimination.pq-stage.stage-frame--has-qr:has(> .quiz-elimination-header) {
  padding-inline-end: calc(3vw + min(calc(352 * var(--su, 1px)), 42vw) + 2 * var(--pq-k));
}
/* Warteraum (Publikumsbühne statt Kopfzeile): QR als rechte Spalte wie während der Frage, kein Reserveband über die ganze Breite. */
.quiz-elimination.pq-stage:has(> .qe-roster > .pq-audience) {
  justify-content: flex-start;
  align-items: stretch;
  padding: calc(2 * var(--pq-k)) 3vw calc(var(--stage-bar-clear, 0px) + 2 * var(--pq-k));
  box-sizing: border-box;
}
.quiz-elimination.pq-stage.stage-frame--has-qr:has(> .qe-roster > .pq-audience) {
  padding-inline-end: calc(3vw + min(calc(352 * var(--su, 1px)), 42vw) + 2 * var(--pq-k));
}
.pq-stage:has(> .quiz-elimination-header) > * {
  flex: 0 0 auto;
  margin: 0;
}
.pq-stage > .quiz-elimination-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 1em;
}
.pq-stage .pq-roundhead {
  margin: 0;
  font-size: calc(3.4 * var(--pq-k));
}
.pq-currenttag {
  margin: 0.25em 0 0;
  font-size: 0.85em;
  opacity: 0.8;
}
.pq-stage .pq-currenttag {
  margin: 0;
  font-size: calc(2.4 * var(--pq-k));
  font-weight: 600;
}
.pq-stage .qe-testrun {
  margin: 0;
  font-size: calc(3 * var(--pq-k));
}
.pq-stage > .quiz-elimination-question {
  max-width: none;
  font-size: calc(5.6 * var(--pq-k) * var(--pq-qfit, 1));
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.pq-stage > .quiz-elimination-closed {
  font-size: calc(3.6 * var(--pq-k));
  text-align: center;
}

/* Zeitbalken über die volle Breite; links die Zahl der Antworten, rechts die Sekunden. */
.pq-stage-timebar {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--pq-k));
}
.pq-stage-timebar__track {
  flex: 1 1 auto;
  height: calc(2.2 * var(--pq-k));
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  overflow: hidden;
}
.pq-stage-timebar__fill {
  height: 100%;
  background: var(--accent, #4338ca);
  transform-origin: left center;
}
.pq-stage-timebar.is-urgent .pq-stage-timebar__fill {
  background: #b42318;
}
.pq-stage-timebar.is-closed .pq-stage-timebar__left {
  white-space: nowrap;
}
.pq-stage-timebar__left {
  min-width: 3.2em;
  font-size: calc(3.6 * var(--pq-k));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pq-stage-timebar > .qe-answered {
  order: -1;
  margin: 0;
  font-size: calc(3.2 * var(--pq-k));
  white-space: nowrap;
}

/* Antwortraster: füllt die restliche Höhe (2 × 2, bei 6 Antworten 2 × 3). */
.pq-stage > .pq-show-grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  grid-auto-rows: minmax(0, 1fr);
  gap: calc(1.6 * var(--pq-k));
}
.pq-stage .pq-show-grid .stage-quiz-opt {
  min-height: 0;
  padding: 0.3em 0.7em;
  gap: 0.6em;
  font-size: calc(4.8 * var(--pq-k) * var(--pq-afit, 1));
  line-height: 1.12;
  border-radius: calc(1.6 * var(--pq-k));
}
.pq-stage .pq-show-grid .pq-opt-label {
  overflow-wrap: anywhere;
}

/* Schätzfrage: Einheit und Zahl der Tipps groß in einer ruhigen Fläche. */
.pq-stage > .pq-stage-estimate,
.pq-stage > .pq-stage-buzz--stage {
  flex: 1 1 auto;
  min-height: calc(18 * var(--pq-k));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--pq-k));
  padding: calc(2 * var(--pq-k));
  border-radius: calc(2.4 * var(--pq-k));
  background: color-mix(in srgb, currentColor 6%, transparent);
  text-align: center;
}
.pq-stage-estimate .pq-unit {
  margin: 0;
  font-size: calc(4.4 * var(--pq-k));
  color: inherit;
}
.pq-stage-estimate .qe-answered {
  margin: 0;
  font-size: calc(6 * var(--pq-k));
  font-weight: 800;
}

/* Buzzer: Aufruf bzw. wer dran ist groß in der Mitte. */
.pq-stage .pq-stage-buzz--stage .pq-buzz-call,
.pq-stage .pq-stage-buzz--stage .pq-buzz-name {
  margin: 0;
  font-size: calc(8 * var(--pq-k));
  line-height: 1.05;
}
.pq-stage .pq-stage-buzz--stage .pq-buzz-holder {
  padding: calc(2 * var(--pq-k)) calc(4 * var(--pq-k));
}
.pq-stage .pq-stage-buzz--stage .pq-buzz-line,
.pq-stage .pq-stage-buzz--stage .pq-buzz-open,
.pq-stage .pq-stage-buzz--stage .pq-buzz-wrong,
.pq-stage .pq-stage-buzz--stage .pq-buzz-tried,
.pq-stage .pq-stage-buzz--stage .pq-buzz-result {
  margin: 0;
  font-size: calc(3.6 * var(--pq-k));
  color: inherit;
}
.pq-stage .pq-stage-buzz--stage .pq-buzz-ring {
  width: calc(16 * var(--pq-k));
  height: calc(16 * var(--pq-k));
}
.pq-stage .pq-stage-buzz--stage .pq-pick-seconds {
  font-size: calc(2.8 * var(--pq-k));
  line-height: 1.1;
}

/* Musikrunde: Bühne über die volle Breite, Platte bzw. Cover groß. */
.pq-stage:has(> .quiz-elimination-header) > .music-stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: calc(44 * var(--pq-k));
  margin: 0;
  align-content: center;
}
.pq-stage .music-deck {
  width: clamp(200px, calc(34 * var(--pq-k)), 560px);
}

/* Nach der Auflösung: oben Frage und Antworten (kompakter), dazwischen Sprechblasen, unten die Bühne über die ganze Breite. */
.pq-stage--ended:has(> .quiz-elimination-header) {
  gap: calc(1.2 * var(--pq-k));
}
.pq-stage--ended > .pq-show-grid {
  flex: 1 1 0;
  min-height: calc(14 * var(--pq-k));
}
.pq-stage--ended:has(> .quiz-elimination-header) > .music-stage {
  flex: 1 1 0;
  min-height: calc(18 * var(--pq-k));
}
.pq-stage--ended > .pq-stage-buzz--stage {
  flex: 0 0 auto;
  min-height: 0;
}
.pq-stage--ended > .pq-correct {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  font-size: calc(8 * var(--pq-k));
  font-weight: 800;
  text-align: center;
}

/* Sprechblasen: falsche Tipps ohne Namen, häufigste zuerst. */
.pq-tips {
  flex: 0 0 auto;
  max-height: calc(17 * var(--pq-k));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: calc(1.2 * var(--pq-k)) calc(1.6 * var(--pq-k));
  margin: 0;
  padding: calc(1.2 * var(--pq-k)) calc(1 * var(--pq-k)) calc(1.4 * var(--pq-k));
  list-style: none;
  overflow: hidden;
  position: relative;
}
.pq-tip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.12em 0.7em 0.18em;
  font-size: calc(3.2 * var(--pq-k));
  font-weight: 700;
  line-height: 1.2;
  color: #16161d;
  background: #ffffff;
  border: calc(0.3 * var(--pq-k)) solid #16161d;
  border-radius: 1.2em;
  transform: rotate(var(--pq-tip-tilt, 0deg));
}
.pq-tip::after {
  content: "";
  position: absolute;
  left: 1.1em;
  bottom: -0.32em;
  width: 0.5em;
  height: 0.5em;
  background: #ffffff;
  border-right: calc(0.3 * var(--pq-k)) solid #16161d;
  border-bottom: calc(0.3 * var(--pq-k)) solid #16161d;
  transform: rotate(45deg);
}
.pq-tip__count {
  font-weight: 900;
  color: #8a1c3a;
}
.pq-tips.is-waiting,
.pq-floor.is-waiting .pq-tippers {
  visibility: hidden;
}
.pq-tips.is-floating:not(.is-waiting) .pq-tip {
  animation: pq-tip-in 600ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: var(--pq-tip-delay, 0ms);
}
@keyframes pq-tip-in {
  from { opacity: 0; transform: translateY(calc(3 * var(--pq-k))) rotate(var(--pq-tip-tilt, 0deg)) scale(0.8); }
  to { opacity: 1; transform: rotate(var(--pq-tip-tilt, 0deg)); }
}

/* Bühne unten: links das Podest mit den Figuren, rechts Teamwertung bzw. Rangliste. */
.pq-stage > .pq-floor {
  /* Verkleinerung bei knapper Höhe (stageFit.js, --pq-floorfit). */
  --pq-k: calc(min(1vh, 0.5625vw) * var(--pq-floorfit, 1));
  flex: 0 0 auto;
  height: calc(36 * var(--pq-k));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: calc(3 * var(--pq-k));
  padding-top: calc(1 * var(--pq-k));
  border-top: calc(0.4 * var(--pq-k)) solid color-mix(in srgb, currentColor 16%, transparent);
  box-sizing: border-box;
}
.pq-floor__side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}
/* Schrift der Rangliste nie unter 24 px bei 1080p, auch wenn die Bühne verkleinert ist (--pq-floorfit trifft Figuren und Abstände). */
.pq-floor .pq-bars-slot,
.pq-floor .pq-team-bars,
.pq-floor .pq-ranking {
  width: 100%;
  font-size: max(calc(3 * var(--pq-k)), calc(2.25 * min(1vh, 0.5625vw)));
}
.pq-floor .pq-ranking h3,
.pq-floor .pq-team-bars h3 {
  margin: 0 0 0.3em;
  font-size: max(calc(3 * var(--pq-k)), calc(2.25 * min(1vh, 0.5625vw)));
}
/* Teamwertung auf der Bühne: Name und Punkte in einer Zeile, der Balken darunter über die ganze Spaltenbreite. */
.pq-floor .pq-team-bars ol {
  gap: 0.35em;
}
.pq-floor .pq-bar-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name score" "track track";
  row-gap: 0.15em;
}
.pq-floor .pq-bar-name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pq-floor .pq-bar-score {
  grid-area: score;
}
.pq-floor .pq-bar-track {
  grid-area: track;
  height: 0.55em;
}
/* Ab vier Teams etwas kleiner, ab fünf noch etwas mehr (bleibt über 24 px bei 1080p), damit Überschrift und alle Teams auf die Bühne
 * passen (Nutzermeldung 14.10.: „Teamwertung“ oben angeschnitten). */
.pq-floor .pq-team-bars:has(li:nth-child(4)) {
  font-size: max(calc(2.6 * var(--pq-k)), calc(2.25 * min(1vh, 0.5625vw)));
}
.pq-floor .pq-team-bars:has(li:nth-child(5)) {
  font-size: max(calc(2.3 * var(--pq-k)), calc(2.25 * min(1vh, 0.5625vw)));
}
.pq-floor .pq-ranking-row {
  grid-template-columns: 2.2em minmax(0, 1fr) auto auto;
}
.pq-floor .pq-name-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pq-tippers {
  /* Podest: eine Stufe je Platz (2 – 1 – 3), Gleichplatzierte nebeneinander auf derselben Stufe. Die Figuren werden nach ihrer
   * Gesamtzahl (--pq-n, mindestens 3) kleiner, damit alle in die Breite passen – höchstens bis --pq-kmin (Anteil der Grundgröße);
   * darunter brechen die Figuren einer Stufe in eine zweite Reihe um (Handy), statt sich zu überlappen. */
  --pq-tk: var(--pq-k);
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(1.6 * var(--pq-k));
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pq-tippers__step {
  --pq-k: max(calc(var(--pq-tk) * var(--pq-kmin, 0.45)), min(var(--pq-tk), calc(100cqi / (var(--pq-n, 3) * 25))));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Schmaler als eine Figur wird eine Stufe nie (min-width: auto); mehr Figuren brechen in eine weitere Reihe um. */
  flex: 0 1 auto;
}
.pq-tippers__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  column-gap: calc(0.4 * var(--pq-k));
  row-gap: calc(1 * var(--pq-k));
}
/* Auf der Rundenbühne trägt die Stufe die Platzierung: kein kleines Podest unter jeder Figur. */
.pq-tippers__row .pq-figure__pedestal {
  display: none;
}
.pq-tippers__more {
  align-self: center;
  flex: 0 0 auto;
  max-width: calc(14 * var(--pq-k));
  padding: 0.1em 0.5em;
  font-size: calc(3 * var(--pq-k));
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: #16161d;
  background: #fff8e6;
  border: calc(0.3 * var(--pq-k)) solid #16161d;
  border-radius: calc(0.6 * var(--pq-k));
  transform: rotate(-2deg);
}
.pq-tippers__block {
  display: grid;
  place-items: center;
  height: calc(4.4 * var(--pq-k));
  font-size: calc(3.2 * var(--pq-k));
  font-weight: 900;
  line-height: 1;
  color: #16161d;
  background: #e0a774;
  border: calc(0.4 * var(--pq-k)) solid #16161d;
  border-bottom: 0;
  border-radius: calc(0.8 * var(--pq-k)) calc(0.8 * var(--pq-k)) 0 0;
  box-sizing: border-box;
}
.pq-tippers__step[data-rank="1"] .pq-tippers__block {
  height: calc(7 * var(--pq-k));
  background: #f2c94c;
}
.pq-tippers__step[data-rank="2"] .pq-tippers__block {
  height: calc(5 * var(--pq-k));
  background: #d7dce3;
}
.pq-tippers__none {
  align-self: center;
  margin: 0;
  font-size: calc(4 * var(--pq-k));
  font-weight: 700;
  text-align: center;
}

/* Figur im Glashelm (Entwurf C, frontend/js/avatar/bodyFigure.js): Glas, Körper und Gesicht als eine Figur, Namensschild in den Händen,
   Podest mit Platz. Der Körper (Viewport -10 0 120 190, 1 Einheit = 0,12 × --pq-k) liegt im Fluss; der Helm (Einheiten 0 … 100) sitzt
   als zwei Ebenen deckungsgleich oben darin: Glas und Haar hinten (z 0) unter dem Körper, Gesicht und Helmrand vorne (z 2) darüber. */
.pq-figure {
  --pq-ink: #1d1a2b;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(23 * var(--pq-k));
  margin: 0;
}
.pq-figure__person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Kopf allein (Captain-Münze, Walze): Comic mit eigenem Glashelm, ohne Rahmen. */
.pq-figure__head {
  position: relative;
  width: calc(11 * var(--pq-k));
  height: calc(11 * var(--pq-k));
  box-sizing: border-box;
}
/* In der Figur: Helm-Ebenen 12 × 12 k über der Mitte des Körpers (kein transform: den setzen die Bewegungen). Der Kopf nickt um den Hals. */
.pq-figure__person > .pq-figure__head,
.pq-figure__person > .pq-figure__helmet {
  position: absolute;
  top: var(--pq-head-top, 0px);
  left: calc(50% - 6 * var(--pq-k));
  width: calc(12 * var(--pq-k));
  height: calc(12 * var(--pq-k));
  transform-origin: 50% 85%;
}
.pq-figure__person > .pq-figure__head {
  z-index: 2;
}
.pq-figure__person > .pq-figure__helmet {
  z-index: 0;
}
.pq-figure__head img,
.pq-figure__head .pq-figure__comic,
.pq-figure__head svg,
.pq-figure__helmet .pq-figure__comic,
.pq-figure__helmet svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Foto-Kopf: rund mit dunklem Rand im Kreis des Helms (r 47,5 von 50); das Glas dahinter entfällt. */
.pq-figure__head.is-photo {
  border: calc(0.45 * var(--pq-k)) solid var(--pq-ink);
  border-radius: 50%;
  overflow: hidden;
  background: #f4e3c8;
}
.pq-figure__person > .pq-figure__head.is-photo {
  top: calc(var(--pq-head-top, 0px) + 0.3 * var(--pq-k));
  left: calc(50% - 5.7 * var(--pq-k));
  width: calc(11.4 * var(--pq-k));
  height: calc(11.4 * var(--pq-k));
}
.pq-figure__head.is-photo ~ .pq-figure__helmet {
  display: none;
}
/* Kappe/Stirnband zum Foto-Kopf: eigene Schicht über dem Kopf (Comic-Köpfe tragen sie im Helm, comicAvatar.js `gear`). */
.pq-figure__headgear {
  position: absolute;
  top: calc(var(--pq-head-top, 0px) + 0.5 * var(--pq-k));
  left: 50%;
  z-index: 2;
  width: calc(10 * var(--pq-k));
  height: calc(10 * var(--pq-k));
  transform: translateX(-50%);
  pointer-events: none;
}
.pq-figure__headgear svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pq-figure__body {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(14.4 * var(--pq-k));
  height: auto;
  overflow: visible;
}
/* Kleine Figuren (Handy um 48 px, Publikum, Rangliste): Details unter 1 px (Nähte, Knöpfe, Muster, Falten) entfallen (Spec A6). */
.mpq-rematch__person .pq-fine,
.pq-cap-vote__face .pq-fine,
.pq-audience .pq-fine,
.pq-ranking--figs .pq-fine,
.pq-lineup-slots .pq-fine {
  display: none;
}
.pq-figure__sign {
  position: absolute;
  z-index: 2;
  left: 50%;
  /* Schild auf Hüft- und Beinhöhe: Brust (Oberteil, Schal, Halstuch, Fliege) und Farbring bleiben sichtbar. */
  bottom: calc(0.8 * var(--pq-k));
  width: max-content;
  max-width: calc(23 * var(--pq-k));
  box-sizing: border-box;
  padding: 0.05em 0.5em 0.1em;
  font-size: calc(3.2 * var(--pq-k));
  font-weight: 800;
  line-height: 1.15;
  color: var(--pq-sign-ink, #16161d);
  background: var(--pq-sign-bg, #fff8e6);
  border: calc(0.3 * var(--pq-k)) solid var(--pq-ink);
  border-radius: calc(0.6 * var(--pq-k));
  text-align: center;
  overflow-wrap: break-word;
  /* Lange Namen mit Trennstrich statt mitten im Wort zerhackt (Sprache aus <html lang>). */
  -webkit-hyphens: auto;
  hyphens: auto;
  transform: translateX(-50%) rotate(-2deg);
}
.pq-figure__pedestal {
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(4.4 * var(--pq-k));
  font-size: calc(3.2 * var(--pq-k));
  font-weight: 900;
  line-height: 1;
  color: var(--pq-ink);
  background: #e0a774;
  border: calc(0.4 * var(--pq-k)) solid var(--pq-ink);
  border-bottom: 0;
  border-radius: calc(0.8 * var(--pq-k)) calc(0.8 * var(--pq-k)) 0 0;
  box-sizing: border-box;
}
.pq-figure[data-rank="1"] .pq-figure__pedestal {
  height: calc(7 * var(--pq-k));
  background: #f2c94c;
}
.pq-figure[data-rank="2"] .pq-figure__pedestal {
  height: calc(5 * var(--pq-k));
  background: #d7dce3;
}

/* Jubel auf dem Podest: Bewegungen aus dem Abspieler (frontend/js/avatar/emotePlayer.js, figures.js mountTipperStage). Die Drehpunkte der
   Gelenke stehen am Element (bodyFigure.js, je Statur). */
.pq-figure__arm {
  transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
  .pq-tips.is-floating .pq-tip {
    animation: none;
  }
}

/* Vorspann-Banner und Hinweis zur Einheit nach der Auflösung: ebenfalls aus der Ferne lesbar. */
.pq-stage > .qe-resolve-banner,
.pq-stage > .pq-unit {
  margin: 0;
  font-size: calc(3.2 * var(--pq-k));
  text-align: center;
  color: inherit;
}

/* Antwortkarten (Nutzerwunsch 14.10.): alle gleichwertig in der Systemfarbe mit Rahmen in der zweiten Systemfarbe, Form wie bei
 * „Wer wird Millionär“ (langgestrecktes Sechseck mit spitzen Enden). Die Karte selbst ist der Rahmen, ::before die Fläche (ein
 * CSS-Rahmen würde vom Zuschnitt abgeschnitten). Auflösung: richtige Antwort grün mit weißem Rahmen, falsche verblassen. */
.pq-show-grid .stage-quiz-opt {
  --pq-tip: clamp(14px, calc(3.6 * var(--pq-k, 10px)), 48px);
  --pq-edge: max(3px, calc(0.5 * var(--pq-k, 10px)));
  --pq-hex: polygon(0 50%, var(--pq-tip) 0, calc(100% - var(--pq-tip)) 0, 100% 50%, calc(100% - var(--pq-tip)) 100%, var(--pq-tip) 100%);
  position: relative;
  isolation: isolate;
  background: var(--secondary-color, #f99700);
  /* Schrift wie auf Schaltflächen in der Systemfarbe (theme.js wählt sie mit ausreichend Kontrast zur Branding-Farbe). */
  color: var(--btn-primary-ink, #ffffff);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--pq-hex);
  padding-inline: calc(var(--pq-tip) + 0.45em);
}
.pq-show-grid .stage-quiz-opt::before {
  content: "";
  position: absolute;
  inset: var(--pq-edge);
  z-index: -1;
  background: var(--btn-primary-bg, var(--primary-color, #007cc1));
  clip-path: var(--pq-hex);
  transition: background-color 0.35s ease;
}
.pq-show-grid .stage-quiz-opt.is-revealed,
.pq-show-grid .stage-quiz-opt.is-correct {
  background: #ffffff;
  color: #ffffff;
  box-shadow: none;
}
.pq-show-grid .stage-quiz-opt.is-revealed::before,
.pq-show-grid .stage-quiz-opt.is-correct::before {
  background: #0b7a48;
}
.pq-stage .pq-show-grid .stage-quiz-opt {
  border-radius: 0;
  padding-inline: calc(var(--pq-tip) + 0.45em);
}
@media (prefers-reduced-motion: reduce) {
  .pq-show-grid .stage-quiz-opt::before { transition: none; }
}

/* Kategorienwahl und Glücksrad (Leinwand): Karten über die ganze Fläche; beim Rad links Titel und Kategorie, rechts das Rad über
 * fast die ganze Höhe (ein rundes Rad allein füllt die Breite nicht). */
.quiz-elimination.pq-stage:has(> .pq-pick--stage) {
  justify-content: flex-start;
  align-items: stretch;
  padding: calc(2 * var(--pq-k)) 3vw calc(var(--stage-bar-clear, 0px) + 2 * var(--pq-k));
  box-sizing: border-box;
}
.pq-stage > .pq-pick--stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: calc(2 * var(--pq-k));
  align-content: stretch;
}
.pq-pick--stage .pq-pick-title {
  font-size: calc(6 * var(--pq-k));
  text-wrap: balance;
}
.pq-pick--stage.pq-pick--choose {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.pq-pick--stage .pq-pick-cards {
  width: 100%;
  height: 100%;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: calc(2 * var(--pq-k));
}
.pq-pick--stage .pq-pick-card {
  min-height: 0;
  padding: calc(2 * var(--pq-k));
  font-size: calc(4.6 * var(--pq-k));
  line-height: 1.15;
  border-radius: calc(2 * var(--pq-k));
}
.pq-pick--stage .pq-pick-symbol {
  font-size: calc(10 * var(--pq-k));
  line-height: 1.1;
}
.pq-pick--stage .pq-pick-ring {
  width: calc(19 * var(--pq-k));
  height: calc(19 * var(--pq-k));
}
.pq-pick--stage .pq-pick-seconds {
  font-size: calc(2.4 * var(--pq-k));
  line-height: 1.1;
}
.pq-pick--stage .pq-pick-result {
  font-size: calc(5 * var(--pq-k));
}
.pq-pick--stage .pq-wheel-banner {
  font-size: calc(5 * var(--pq-k));
}
.pq-pick--stage.pq-pick--wheel {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto auto 1fr;
  align-items: center;
  justify-items: start;
  column-gap: 4vw;
  text-align: left;
}
.pq-pick--stage.pq-pick--wheel > .pq-pick-title {
  grid-column: 1;
  grid-row: 2;
}
.pq-pick--stage.pq-pick--wheel > .pq-pick-result {
  grid-column: 1;
  grid-row: 3;
}
.pq-pick--stage.pq-pick--wheel > .pq-wheel {
  grid-column: 2;
  grid-row: 1 / -1;
  width: min(calc(100vh - var(--stage-bar-clear, 0px) - 16 * var(--pq-k)), 56vw);
  margin: calc(4 * var(--pq-k)) 0 0;
}

/* Siegerfolie (Leinwand): oben die Siegerszene, mittig ein breites Podium, unten Endstand und Top-Scorer groß. */
.quiz-elimination.pq-stage.pq-finale-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: end;
  align-content: stretch;
  column-gap: 4vw;
  row-gap: calc(2 * var(--pq-k));
  padding: calc(2 * var(--pq-k)) 3vw calc(var(--stage-bar-clear, 0px) + 2 * var(--pq-k));
  box-sizing: border-box;
}
.pq-stage.pq-finale-layout > .qe-finale-host {
  grid-column: 1 / -1;
  grid-row: 1;
}
.pq-stage.pq-finale-layout > .qe-finale-host .qe-finale {
  min-height: 0;
  margin: 0;
  gap: calc(1 * var(--pq-k));
}
.pq-stage.pq-finale-layout .qe-finale-win {
  font-size: calc(9 * var(--pq-k));
}
.pq-stage.pq-finale-layout .qe-finale-ring {
  width: calc(12 * var(--pq-k));
  height: calc(12 * var(--pq-k));
}
/* Die Sieger stehen groß auf dem Podium darunter; die Personenkarte der Szene entfällt auf der Pubquiz-Leinwand. */
.pq-stage.pq-finale-layout .qe-finale-winners {
  display: none;
}
.pq-stage.pq-finale-layout > .pq-podium-host {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  width: min(100%, 56vw);
}
.pq-stage.pq-finale-layout .quiz-podium {
  gap: calc(1.6 * var(--pq-k));
  margin: 0;
}
.pq-stage.pq-finale-layout .quiz-podium-step {
  max-width: none;
  gap: calc(0.4 * var(--pq-k));
}
.pq-stage.pq-finale-layout .quiz-podium-name {
  font-size: calc(3.8 * var(--pq-k));
  font-weight: 800;
}
.pq-stage.pq-finale-layout .quiz-podium-points {
  font-size: calc(3 * var(--pq-k));
}
.pq-stage.pq-finale-layout .quiz-podium-block {
  font-size: calc(5 * var(--pq-k));
  border-radius: calc(1 * var(--pq-k)) calc(1 * var(--pq-k)) 0 0;
}
.pq-stage.pq-finale-layout .quiz-podium-step--1 .quiz-podium-block { height: calc(6 * var(--pq-k)); }
.pq-stage.pq-finale-layout .quiz-podium-step--2 .quiz-podium-block { height: calc(10 * var(--pq-k)); }
.pq-stage.pq-finale-layout .quiz-podium-step--3 .quiz-podium-block { height: calc(14 * var(--pq-k)); }
.pq-stage.pq-finale-layout > .pq-ranking,
.pq-stage.pq-finale-layout > .pq-topscorers {
  grid-row: 3;
  font-size: calc(3.2 * var(--pq-k));
}
.pq-stage.pq-finale-layout > .pq-team-ranking {
  grid-column: 1;
}
.pq-stage.pq-finale-layout > .pq-topscorers {
  grid-column: 2;
}
.pq-stage.pq-finale-layout > .pq-ranking:not(.pq-team-ranking) {
  grid-column: 1 / -1;
}
.pq-stage.pq-finale-layout > .pq-ranking:not(.pq-team-ranking) ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4vw;
}
.pq-stage.pq-finale-layout .pq-ranking h3,
.pq-stage.pq-finale-layout .pq-topscorers h3 {
  margin: 0 0 0.3em;
  font-size: calc(3.4 * var(--pq-k));
}
.pq-stage.pq-finale-layout .pq-ranking-row {
  font-size: inherit;
  grid-template-columns: 2em minmax(0, 1fr) auto auto;
}
.pq-stage.pq-finale-layout .pq-delta {
  font-size: 0.85em;
}

/* Namensschild: Spitzname, bei Schätz- und Jahresrunden darunter der Tipp. */
.pq-figure__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.pq-figure__detail {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pq-figure__detail {
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
}

/* Handy-Gameplay: Antwortknöpfe wie auf der Leinwand (Nutzerwunsch 14.10.): Sechseck mit spitzen Enden wie bei „Wer wird Millionär“,
 * Fläche in der Systemfarbe, Rahmen in der zweiten Systemfarbe. Der Knopf ist der Rahmen, ::before die Fläche (ein CSS-Rahmen würde
 * vom Zuschnitt abgeschnitten). Gewählt/eingeloggt: Fläche in der zweiten Systemfarbe (wie die eingeloggte Antwort in der Show),
 * gesperrte andere Antworten verblassen; „wird gesendet“ zeigt den Lichtlauf über der Karte (::after). */
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"] {
  --pq-tip: 12px;
  --pq-edge: 3px;
  --pq-hex: polygon(0 50%, var(--pq-tip) 0, calc(100% - var(--pq-tip)) 0, 100% 50%, calc(100% - var(--pq-tip)) 100%, var(--pq-tip) 100%);
  isolation: isolate;
  padding-inline: calc(var(--pq-tip) + 6px);
  color: var(--btn-primary-ink, #ffffff);
  background: var(--secondary-color, #f99700);
  border: 0;
  border-radius: 0;
  outline: none;
  clip-path: var(--pq-hex);
  transition: opacity 150ms ease-out, transform 120ms ease-out;
}
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"]::before {
  content: "";
  position: absolute;
  inset: var(--pq-edge);
  width: auto;
  z-index: -1;
  background: var(--btn-primary-bg, var(--primary-color, #007cc1));
  clip-path: var(--pq-hex);
  animation: none;
  transition: background-color 150ms ease-out;
}
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-selected,
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-confirmed {
  color: var(--accent-surface-ink, #1a1d23);
  background: var(--btn-primary-bg, var(--primary-color, #007cc1));
  opacity: 1;
}
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-selected::before,
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-confirmed::before {
  background: var(--accent-surface, var(--secondary-color, #f99700));
}
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-confirmed::after {
  right: calc(var(--pq-tip) + 4px);
  color: inherit;
}
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-sending::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent);
  animation: qe-answer-streak 900ms ease-in-out infinite;
}
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"]:disabled:not(.is-selected):not(.is-confirmed) {
  opacity: 0.4;
}
/* Tastaturfokus: der Rahmen wechselt in die Fokusfarbe (eine Fokuslinie fiele dem Zuschnitt zum Opfer). */
.quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"]:focus-visible {
  --pq-edge: 5px;
  background: var(--focus, #0052cc);
}
@media (prefers-reduced-motion: reduce) {
  .quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"].is-sending::after { animation: none; display: none; }
  .quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"],
  .quiz-elimination .pq-frame .quiz-opt[class*="pq-opt-"]::before { transition: none; }
}

/* Pubquiz-Leinwand: Die Frage steht immer als Überschrift direkt unter dem Rundenkopf, darunter der Zeitbalken (auch in Musikrunden,
 * deren Bühne im DOM vor der Frage steht). */
.pq-stage:has(> .quiz-elimination-header) > .quiz-elimination-header { order: -4; }
.pq-stage:has(> .quiz-elimination-header) > .quiz-elimination-question { order: -3; }
.pq-stage:has(> .quiz-elimination-header) > .pq-stage-timebar,
.pq-stage:has(> .quiz-elimination-header) > .pq-unit { order: -2; }

/* Musikrunde nach der Auflösung: Cover links so hoch, wie die Bühne Platz hat (nie beschnitten), rechts Song und Lösung groß. */
.pq-stage:has(> .quiz-elimination-header) > .music-stage[data-mode="reveal"] {
  /* Zeile statt Raster: Die Plattenfläche wird auf die Höhe der Bühne gestreckt (sicher bestimmt), die Breite folgt dem Seitenverhältnis. */
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: calc(4 * var(--pq-k));
  padding: calc(1.6 * var(--pq-k)) calc(4 * var(--pq-k));
  min-height: calc(18 * var(--pq-k));
}
/* Plattenfläche: quadratisch, so hoch wie die Bühne innen Platz hat (höchstens 34k). Größen-Container statt Seitenverhältnis plus
 * Strecken – das rechnen Safari (WebKit) und Chrome gleich (Nutzermeldung 14.10.: in Safari Cover und Text nicht ganz sichtbar). */
.pq-stage:has(> .quiz-elimination-header) > .music-stage[data-mode="reveal"] {
  container-type: size;
}
.pq-stage > .music-stage[data-mode="reveal"] .music-deck {
  --pq-deck: min(calc(100cqh - 3.2 * var(--pq-k)), calc(34 * var(--pq-k)));
  flex: 0 0 auto;
  align-self: center;
  width: var(--pq-deck);
  height: var(--pq-deck);
  min-height: 0;
  aspect-ratio: auto;
}
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal {
  flex: 1 1 auto;
  min-width: 0;
  justify-items: start;
  max-width: none;
  text-align: left;
  gap: calc(0.8 * var(--pq-k) * var(--music-fit, 1));
}
/* Viel Text (langer Titel, Interpret, Lösungssatz, Erklärung): stageFit.js verkleinert alle Zeilen gemeinsam (`--music-fit`), nie unter
 * 16 px; reicht das nicht, blendet die Erklärung unten weich aus (voller Text im title). Nutzermeldung 24.10. */
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal__song {
  font-size: max(16px, calc(5 * var(--pq-k) * var(--music-fit, 1)));
}
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal__solution,
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal__score {
  font-size: max(16px, calc(3.2 * var(--pq-k) * var(--music-fit, 1)));
}
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal__link {
  font-size: max(16px, calc(2.6 * var(--pq-k) * var(--music-fit, 1)));
}
.pq-stage > .music-stage[data-mode="reveal"] .music-reveal [data-fit-clamped] {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent);
}

/* Nach der Auflösung (Bühne sichtbar) ist der Hinweis „Antworten geschlossen“ überflüssig: Platz für Musikbühne, Raster und Bühne. */
.pq-stage--ended:has(> .pq-floor:not(.is-waiting)) > .qe-resolve-banner,
.pq-stage > .qe-resolve-banner.is-done {
  /* unsichtbar, aber mit Platz: Raster und Bühne ändern ihre Größe nicht, wenn das Banner verschwindet */
  visibility: hidden;
}
/* Der Lichtbogen des Vorspanns liegt im Banner über dem Raster und nimmt keinen Platz (sonst schöbe er Raster und Bühne für 0,6 s). */
.pq-stage > .qe-resolve-banner {
  position: relative;
}
.pq-stage > .qe-resolve-banner > .qe-resolve-arc {
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(42 * var(--pq-k));
  height: calc(4 * var(--pq-k));
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.pq-stage--ended:has(> .quiz-elimination-header) > .music-stage[data-mode="reveal"] {
  min-height: calc(12 * var(--pq-k));
}

/* ---------- Pubquiz: vor der Frage (Nutzerwunsch 14.10.) ----------
 * 1 s leerer Bildschirm; Buzzerrunde: „Achtung Buzzerrunde“ mit blinkendem Rahmen bis zur Öffnung, danach kurz „Buzzer frei!“. */
.pq-gate {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-content: center;
  gap: calc(2 * var(--pq-k, 1vh));
  text-align: center;
}
.pq-stage > .pq-gate--announce,
.pq-stage > .pq-gate--open {
  margin: calc(1 * var(--pq-k));
  border: calc(1.4 * var(--pq-k)) solid #e11d48;
  border-radius: calc(2.4 * var(--pq-k));
  animation: pq-gate-blink 0.9s steps(1, end) infinite;
}
.pq-stage > .pq-gate--open {
  border-color: #16a34a;
  animation: none;
}
.pq-gate__title {
  margin: 0;
  font-size: calc(10 * var(--pq-k, 1vh));
  font-weight: 900;
  line-height: 1.05;
  text-wrap: balance;
}
.pq-gate__hint {
  margin: 0 auto;
  max-width: 34em;
  font-size: calc(3.6 * var(--pq-k, 1vh));
  font-weight: 600;
  text-wrap: balance;
}
/* ---------- Pubquiz: Antworten erst nach dem Frageton ----------
 * Bis `round.optionsAt` steht nur die Frage (blendet sanft ein); der Platz der Antworten bleibt frei, damit nichts springt. Danach blenden die
 * Antworten ein. Nur opacity und transform. Reduzierte Bewegung und der Schalter „Avatare und Animationen“ aus: ohne Einblenden. */
.pq-opts-hold {
  visibility: hidden;
  pointer-events: none;
}
@keyframes pq-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pq-fade-in {
  animation: pq-fade-in 600ms ease-out backwards;
}
.pq-opts-in {
  animation: pq-fade-in 500ms ease-out backwards;
}
@media (prefers-reduced-motion: reduce) {
  .pq-fade-in,
  .pq-opts-in {
    animation: none;
  }
}
.pq-figures-still .pq-fade-in,
.pq-figures-still .pq-opts-in {
  animation: none;
}
/* Handy: im Teamrahmen, blinkender Rand. */
.pq-gate--phone.pq-gate--announce {
  padding: 1.5rem 1rem;
  border: 6px solid #e11d48;
  border-radius: 18px;
  animation: pq-gate-blink 0.9s steps(1, end) infinite;
}
.pq-gate--phone .pq-gate__title {
  font-size: clamp(1.8rem, 9vw, 2.6rem);
}
/* Mit bedienbarem Knopf (Frühstart, E4): Hinweis kompakt, der Knopf bleibt im Bild. */
.pq-gate--phone.pq-gate--withbuzz {
  flex: 0 0 auto;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
}
.pq-gate--withbuzz .pq-gate__title {
  font-size: clamp(1.3rem, 7vw, 1.9rem);
}
.pq-gate--withbuzz .pq-gate__hint {
  font-size: 0.95rem;
}
.pq-gate--withbuzz ~ .pq-buzz {
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.pq-frame .pq-gate--withbuzz ~ .pq-buzz .pq-buzzer {
  width: min(70vw, 32dvh, 22rem);
}
.pq-gate--phone .pq-gate__hint {
  font-size: 1.1rem;
}
@keyframes pq-gate-blink {
  50% {
    border-color: #facc15;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pq-gate {
    animation: none !important;
  }
}

/* ---------- Pubquiz Siegerfolie: Szene (Spec 2026-10-14-pubquiz-siegerfolie-design.md) ----------
 * Einstellungen als übereinanderliegende Ebenen (Podium, Großaufnahme, Endstand); die aktive blendet ein, die Großaufnahme zoomt heran.
 * Konfetti auf einer Zeichenfläche hinter allem. --pq-k wie auf der übrigen Leinwand (1 % der Höhe einer 16:9-Leinwand). */
.quiz-elimination.pq-stage.pq-finale-layout:has(> .pq-celebration-host) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: calc(1.6 * var(--pq-k)) 3vw calc(var(--stage-bar-clear, 0px) + 1.6 * var(--pq-k));
  box-sizing: border-box;
}
.pq-stage > .pq-celebration-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.pq-celebration {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Eine feste Zelle in der verfügbaren Größe: unsichtbare Einstellungen dürfen die Zeile nicht strecken. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.pq-cel-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pq-cel-layer {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s;
}
.pq-celebration[data-shot="podium"] > .pq-cel-podium,
.pq-celebration[data-shot^="close-"] > .pq-cel-close:not([data-enter]),
.pq-celebration[data-shot="board"] > .pq-cel-board,
.pq-celebration[data-shot^="awards-"] > .pq-cel-awards,
.pq-celebration[data-shot="standings"] > .pq-cel-standings {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
/* Großaufnahme: die „Kamera“ fährt vom Podest heran. */
.pq-cel-close {
  transform: scale(0.55) translateY(12%);
}

/* Reihe von Figuren: Größe nach Anzahl (--n), Pokal-Figur vorn. */
.pq-cel-row {
  --pq-k: calc(min(1vh, 0.5625vw) * var(--pq-scale, 1));
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.pq-cel-row > .pq-figure[data-pose="trophy"] {
  /* der Pokalträger liegt über laufenden Nachbarfiguren (z 3), der Pokal wird nie verdeckt */
  z-index: 4;
}

/* Podium: Spalten 2 – 1 – 3, Podest in Gold, Silber und Bronze mit Ziffer, Name und Punkten. Gleichstand: gleichplatzierte Teams
 * nebeneinander auf gleicher Höhe, im Einzelspiel alle Gleichplatzierten auf einer Stufe (Breite nach Figurenzahl, --w). */
.pq-cel-podium {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * min(1vh, 0.5625vw));
  padding-top: calc(2 * min(1vh, 0.5625vw));
}
.pq-cel-place {
  /* Containereinheiten: Die Figuren richten sich nach der Breite ihrer Spalte (nie breiter, nie überlappend). */
  container-type: inline-size;
  flex: var(--w, 1) 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.pq-cel-podium .pq-cel-row {
  /* Nach Anzahl in der Spaltenbreite und höchstens 0,85 (Höhe: Pokal-Figur über dem höchsten Podest bis unter die Steuerleiste). */
  --pq-k: var(--pq-fit, min(calc(min(1vh, 0.5625vw) * 0.85), calc(100cqi / (var(--n) * 25))));
  /* Lücke 2 Einheiten: pro Figur 25 Einheiten (Figur 23 + Lücke), so bleibt das Schild (höchstens 24) neben dem der Nachbarin. */
  gap: calc(2 * var(--pq-k));
}
/* Größe nach dem tatsächlichen Platz (celebration.js, fitPodium → --pq-fit): bei mehr als einer Reihe bricht die Reihe nach --per Figuren um
 * (die letzte Reihe mittig), die Reihen stehen mit 4 Einheiten Abstand übereinander. Ohne --pq-fit bleibt es bei einer Reihe in der Spaltenbreite. */
.pq-cel-podium .pq-cel-row[style*="--per"] {
  flex-wrap: wrap;
  align-self: center;
  width: calc(var(--per) * 25 * var(--pq-k));
  row-gap: calc(4 * var(--pq-k));
}
/* Figuren behalten ihre Breite (das Schild ist so breit wie die Figur): die Größe oben passt die Reihe in die Spalte. */
.pq-cel-podium .pq-cel-row > .pq-figure {
  flex-shrink: 0;
}
/* Einzelspiel: „+n weitere“ am Ende der Reihe einer geteilten Stufe, so breit wie höchstens eine Figur. */
.pq-cel-podium .pq-cel-row > .pq-cel-more {
  flex: 0 0 auto;
  max-width: calc(20 * var(--pq-k));
  font-size: min(calc(3 * min(1vh, 0.5625vw)), calc(4 * var(--pq-k)));
  text-align: center;
}
/* Podium: Das Schild ragt nie über die Brustoberkante (Torso-Beginn bei etwa 15 % der Körperhöhe) und nie in das Nachbarschild (Breite
 * höchstens 24 Einheiten bei 25 je Figur). Die Schrift bleibt so groß wie bisher (--pq-f0 ≈ 26 px bei 1080p, mindestens 20 px), solange der Name in
 * voller Größe in die Schildbreite passt (kurze Namen). Längere einzeilige Namen (5 bis 8 Zeichen, „Dominik“, „Benedikt“) werden nur so weit
 * verkleinert, dass sie einzeilig bleiben (--pq-f1, aus der Zeichenzahl --pq-len, die figures.js setzt). Wird die Schrift dafür zu klein, zählt
 * die größte, bei der zwei Zeilen noch unter der Brustoberkante bleiben (--pq-f2); was dann nicht passt, wird mit Auslassung gekürzt (Name
 * vollständig im DOM, title am Schild). Untergrenze 12 px, ab 1000 px Bildhöhe 14 px. Liegt die Untergrenze über f2 (kleine Figuren, etwa
 * Einzelspiel mit 6 Figuren plus „+n weitere“ bei 720p oder 4:3), gewinnt die Brustoberkante: eine Zeile mit Auslassung statt zwei; und
 * auch eine einzige Zeile wird nie größer als f3 (bei sehr kleinen Figuren geht die Brustoberkante der Untergrenze und der bisherigen Größe vor). */
.pq-cel-podium .pq-figure__sign {
  --pq-fmin: 12px;
  --pq-f0: max(calc(2.4 * min(1vh, 0.5625vw)), 20px, calc(1.6 * var(--pq-k)));
  --pq-f1: calc(23.4 * var(--pq-k) / (0.68 * var(--pq-len, 1) + 0.6));
  --pq-f2: calc(4 * var(--pq-k));
  --pq-f3: calc(7.4 * var(--pq-k));
  font-size: min(var(--pq-f3), max(min(var(--pq-f0), max(var(--pq-f1), var(--pq-f2))), var(--pq-fmin)));
  max-width: calc(24 * var(--pq-k));
  padding-inline: 0.3em;
}
@media (min-height: 1000px) {
  .pq-cel-podium .pq-figure__sign {
    --pq-fmin: 14px;
  }
}
/* Zwei Zeilen nur, wenn sie auch in der Untergrenze der Schrift unter der Brustoberkante bleiben (f2 ≥ Untergrenze), sonst eine. */
.pq-cel-podium .pq-figure__name {
  -webkit-line-clamp: 2; /* Rückfall für Browser ohne sign()/round() */
  -webkit-line-clamp: round(calc(1.5 + 0.5 * sign(var(--pq-f2) - var(--pq-fmin))), 1);
}
/* Podium: Schild auch beim Klatschen unten verankert (wächst nach oben) – „+n weitere“ darunter bleibt frei. */
.pq-cel-podium .pq-figure[data-pose="clap"] .pq-figure__sign {
  top: auto;
  bottom: calc(0.8 * var(--pq-k));
}
.pq-cel-more {
  align-self: center;
  margin: calc(0.6 * min(1vh, 0.5625vw)) 0;
  padding: 0.1em 0.7em;
  font-size: calc(3 * min(1vh, 0.5625vw));
  font-weight: 800;
  color: #16161d;
  background: #fff8e6;
  border: calc(0.3 * min(1vh, 0.5625vw)) solid #16161d;
  border-radius: calc(0.6 * min(1vh, 0.5625vw));
  transform: rotate(-2deg);
}
.pq-cel-block {
  --pq-u: min(1vh, 0.5625vw);
  /* Ziffer links, Name und Punkte rechts daneben: passt auch in das niedrige Podest von Platz 3. */
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  justify-content: center;
  align-content: start;
  column-gap: calc(1.4 * var(--pq-u));
  row-gap: calc(0.2 * var(--pq-u));
  box-sizing: border-box;
  padding: calc(1.2 * var(--pq-u)) calc(1 * var(--pq-u));
  color: #16161d;
  background: linear-gradient(180deg, #e6c06a, #c99a2e);
  border: calc(0.4 * var(--pq-u)) solid #16161d;
  border-bottom: 0;
  border-radius: calc(1 * var(--pq-u)) calc(1 * var(--pq-u)) 0 0;
  text-align: center;
}
.pq-cel-place[data-rank="1"] .pq-cel-block { min-height: calc(20 * var(--pq-u)); background: linear-gradient(180deg, #ffe07a, #f2b705); }
.pq-cel-place[data-rank="2"] .pq-cel-block { min-height: calc(15 * var(--pq-u)); background: linear-gradient(180deg, #eef1f5, #c3cad4); }
.pq-cel-place[data-rank="3"] .pq-cel-block { min-height: calc(11 * var(--pq-u)); background: linear-gradient(180deg, #f0be8d, #d0884a); }
/* In der Siegerfolie trägt das große Podest die Platzierung: kein kleines Podest unter jeder Figur. */
.pq-cel-row .pq-figure__pedestal {
  display: none;
}
.pq-cel-num {
  grid-row: 1 / 3;
  align-self: center;
  font-size: calc(7 * var(--pq-u));
  font-weight: 900;
  line-height: 1;
}
.pq-cel-name {
  justify-self: start;
  text-align: left;
  max-width: 100%;
  font-size: calc(3.6 * var(--pq-u));
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.pq-cel-points {
  justify-self: start;
  font-size: calc(3.2 * var(--pq-u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Grund der Gleichstand-Entscheidung (E4): klein unter Name und Punkten auf dem Podest des Siegers. */
.pq-cel-tie {
  grid-column: 1 / -1;
  margin-top: calc(0.8 * var(--pq-u));
  font-size: calc(2.2 * var(--pq-u));
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

/* Großaufnahme: Überschrift sehr groß, darunter die Figurenreihe bildschirmfüllend. */
.pq-cel-close {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: calc(2 * min(1vh, 0.5625vw));
  padding-top: calc(2 * min(1vh, 0.5625vw));
}
.pq-cel-title {
  margin: 0;
  font-size: calc(6 * min(1vh, 0.5625vw));
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
.pq-cel-close[data-rank="1"] .pq-cel-title {
  color: #8a5a00;
}
/* Großaufnahme: Grundgröße der Schilder; die Regel für das Schild unter den Füßen (weiter unten) senkt die Namenszeile auf
   mindestens 28 px bei 1080p, die Punkte bleiben bei mindestens 32 px. */
.pq-cel-close .pq-figure__sign {
  font-size: max(calc(3.2 * var(--pq-k)), calc(3 * min(1vh, 0.5625vw)));
}
/* Punkte auf dem Schild der Großaufnahme: mindestens 32 px bei 1080p (0,8 em des Schildes ergäben dort nur 26 px). */
.pq-cel-close .pq-figure__score {
  font-size: max(0.8em, calc(3 * min(1vh, 0.5625vw)));
}
.pq-cel-close .pq-cel-row {
  --pq-scale: min(1.5, calc(7.4 / var(--n)));
  width: 100%;
  gap: calc(0.6 * var(--pq-k));
  padding-bottom: calc(1 * var(--pq-k));
}
/* Ab 6 Figuren zwei gleich große Reihen: größer als eine lange Reihe, Höhe reicht für beide (samt Platz für den Pokal über jedem Kopf). */
.pq-cel-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
}
.pq-cel-close .pq-cel-rows .pq-cel-row {
  --pq-scale: min(0.78, calc(7.4 / var(--n)));
  /* Bei den kleineren Figuren bleiben die Schilder (Schrift mit Mindestgröße) so lesbar wie bisher: etwas breiter, dafür mehr Abstand. */
  gap: calc(4.4 * var(--pq-k));
}
.pq-cel-close .pq-cel-rows .pq-figure__sign {
  max-width: calc(27 * var(--pq-k));
}
/* Platz für den Sprung (bis 5 × --pq-k): Die zweite Reihe springt nicht in die Schilder der ersten. */
.pq-cel-close .pq-cel-rows .pq-cel-row + .pq-cel-row {
  padding-top: calc(5.5 * var(--pq-k));
}
/* Zwei Reihen: Pokal und Flasche wandern über beide Reihen (trophyRelay.js), die Reihen bleiben dabei gleich hoch. Jede Figur beider
   Reihen hält den Platz über dem Helm für den Pokal frei (auch wenn er gerade woanders ist; er steht rechts neben dem Helm und ragt
   nur wenig darüber); so ragt er in der hinteren Reihe weder in die Schilder der vorderen Reihe noch aus dem Bild, und nichts springt,
   wenn er die Reihe wechselt. Die Figuren sind dafür etwas kleiner (Faktor 0,78 statt 0,9). */
.pq-cel-close .pq-cel-rows .pq-figure .pq-figure__person {
  --pq-head-top: calc(2 * var(--pq-k));
  padding-top: var(--pq-head-top);
}
/* Zwei Reihen: Schilder bleiben in der eigenen Figur (auch beim Klatschen unten verankert) – sie verdecken die Köpfe der Reihe
   darunter nicht und ragen nicht aus dem Bild. */
.pq-cel-rows .pq-figure[data-pose="clap"] .pq-figure__sign {
  top: auto;
  bottom: calc(0.8 * var(--pq-k));
}

/* Großaufnahme: Schild unter den Füßen und dem Farbring statt auf der Hüfte – Hose, Schuhe, Kleidsaum, Halsschmuck bleiben frei.
   Gilt für alle Haltungen (die Haltungs-Regeln davor verankern oben bzw. auf Hüfthöhe). */
.pq-cel-close .pq-figure[data-pose] .pq-figure__sign {
  top: calc(100% + 1.2 * var(--pq-k));
  bottom: auto;
  font-size: max(calc(2.6 * var(--pq-k)), calc(2.6 * min(1vh, 0.5625vw)));
}
/* Platz unter dem Schild (bis drei Zeilen), damit es nicht abgeschnitten wird und nicht in die nächste Reihe ragt. */
.pq-cel-close .pq-cel-row {
  padding-bottom: calc(13 * var(--pq-k));
}

/* Endstand: ruhige Tafel, groß und mittig. */
.pq-cel-board {
  --pq-u: min(1vh, 0.5625vw);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(3 * var(--pq-u)) 6vw;
  font-size: calc(4 * var(--pq-u));
}
.pq-cel-board > .pq-ranking,
.pq-cel-board > .pq-topscorers {
  min-width: min(100%, 36vw);
}
.pq-cel-board h3 {
  margin: 0 0 0.4em;
  font-size: calc(4.6 * var(--pq-u));
}
.pq-cel-board .pq-ranking-row {
  grid-template-columns: 2em minmax(0, 1fr) auto auto;
  gap: 0.6em;
}
.pq-cel-board .pq-topscorers li {
  font-size: calc(3.4 * var(--pq-u));
}
/* Auszeichnungen (E6): Karten in zwei Spalten, groß und lesbar; die Leinwand zeigt höchstens sechs je Seite. */
.pq-cel-awards {
  --pq-u: min(1vh, 0.5625vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--pq-u));
  padding: calc(2 * var(--pq-u)) 4vw;
}
.pq-award-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.6rem 1rem;
}
.pq-cel-awards .pq-award-list {
  width: min(100%, 150 * var(--pq-u));
  gap: calc(2 * var(--pq-u)) calc(3 * var(--pq-u));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pq-award {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.18));
  border-left-width: 0.35rem;
  border-radius: 0.5rem;
  min-width: 0;
}
.pq-award__name {
  font-size: 1.05em;
  overflow-wrap: anywhere;
}
.pq-award__desc {
  font-size: 0.85em;
  opacity: 0.8;
}
.pq-award__who {
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* Karte auf der Leinwand: eigene, feste Fläche (heller Grund, dunkle Schrift und Rand) – lesbar vor jeder Kulisse und jedem Theme, die Kulisse
 * scheint nie durch. Links die Figur der Person bzw. die Teamplakette, daneben Name, Beschreibung und Träger. */
.pq-cel-awards .pq-award {
  --pq-k: calc(0.8 * var(--pq-u));
  display: flex;
  align-items: center;
  gap: calc(2.4 * var(--pq-u));
  padding: calc(1.6 * var(--pq-u)) calc(2.4 * var(--pq-u));
  color: #16161d;
  background: #fffdf7;
  border: calc(0.4 * var(--pq-u)) solid #16161d;
  border-left: calc(1.4 * var(--pq-u)) solid var(--pq-award-accent, #c99a2e);
  border-radius: calc(1.4 * var(--pq-u));
  box-shadow: 0 calc(0.5 * var(--pq-u)) 0 rgba(22, 22, 29, 0.25);
}
.pq-award__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.pq-cel-awards .pq-award__body {
  flex: 1 1 auto;
  gap: calc(0.4 * var(--pq-u));
}
.pq-cel-awards .pq-award__name {
  font-size: calc(3.6 * var(--pq-u));
}
.pq-cel-awards .pq-award__desc {
  font-size: calc(2.4 * var(--pq-u));
  color: #3b3b48;
  opacity: 1;
}
.pq-cel-awards .pq-award__who {
  font-size: calc(3.4 * var(--pq-u));
}
/* Bildstreifen: bis zu zwei Figuren (Brustbild) bzw. Plaketten, leicht überlappend. */
.pq-award__figs {
  flex: none;
  display: flex;
  align-items: center;
  padding-top: calc(2 * var(--pq-k));
}
/* Feste Breite je Anzahl (ein, zwei Bilder), damit die Texte der Karten untereinander bündig stehen. */
.pq-award__figs {
  justify-content: center;
  width: calc(22 * var(--pq-u));
}
.pq-award__figs[data-n="2"] {
  width: calc(31 * var(--pq-u));
}
.pq-award__figs > * + * {
  margin-left: calc(-9 * var(--pq-k));
}
.pq-award__figs > .pq-award__badge + .pq-award__badge {
  margin-left: calc(-3 * var(--pq-u));
}
.pq-award__figs .pq-figure--bust {
  --pq-k: calc(0.8 * var(--pq-u));
  height: calc(15.8 * var(--pq-k));
  margin-bottom: 0;
  clip-path: inset(calc(-10 * var(--pq-k)) calc(-8 * var(--pq-k)) 0 calc(-8 * var(--pq-k)));
}
.pq-award__badge {
  --pq-badge: #6b6b7a;
  display: grid;
  place-items: center;
  width: calc(11 * var(--pq-u));
  height: calc(11 * var(--pq-u));
  box-sizing: border-box;
  border: calc(0.5 * var(--pq-u)) solid #16161d;
  border-radius: 50%;
  background: var(--pq-badge);
  color: #fff;
  font-size: calc(5.6 * var(--pq-u));
  font-weight: 900;
  line-height: 1;
}
.pq-award__badge[data-light] {
  color: #16161d;
}
/* Endstand im Netz (E6, Spec E2): QR-Code auf der Leinwand (letzte Einstellung) und in der Moderation. */
.pq-cel-standings {
  --pq-u: min(1vh, 0.5625vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2.4 * var(--pq-u));
  padding: calc(2 * var(--pq-u)) 4vw;
  text-align: center;
}
.pq-cel-standings .pq-standings__qr {
  width: min(60vh, 60vw);
  max-width: 100%;
  aspect-ratio: 1;
  background: #fff;
  border-radius: calc(1.4 * var(--pq-u));
}
.pq-standings__hint {
  margin: 0;
  font-size: calc(3.6 * var(--pq-u));
  max-width: 40ch;
}
.pq-standings__host {
  margin: 0;
  font-size: calc(2.8 * var(--pq-u));
  opacity: 0.8;
  overflow-wrap: anywhere;
}
.pq-standings__lead,
.pq-standings__state {
  margin: 0.3rem 0;
}
.pq-standings__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}
.pq-standings__qr--mod {
  width: 11rem;
  max-width: 100%;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 0.4rem;
  flex: 0 0 auto;
}
.pq-standings__side {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.pq-standings__link {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}
.pq-standings__side .btn {
  min-height: 44px;
}

.pq-awards__stage {
  margin: 0.75rem 0 0;
}
.pq-awards__note {
  font-size: 0.9em;
}
@media (prefers-reduced-motion: reduce) {
  .pq-cel-layer { transition: none; }
}