/**
 * Präsentationsansicht (#/stage/:code): große Schrift für 2–3 m Lesbarkeit,
 * hoher Kontrast (WCAG 2.1 AA), viel Weißraum, kein Blinken.
 * App-Chrome blendet body.stage-mode aus.
 */

body.stage-mode {
  grid-template-rows: 1fr;
  background: #ffffff;
  color: #111111;
}

body.stage-mode .skip-link,
body.stage-mode #legal-hash-link,
body.stage-mode #app-footer,
body.stage-mode #consent-dialog {
  display: none !important;
}

body.stage-mode .app {
  height: 100dvh;
  height: 100vh;
  min-height: 0;
}

.view-stage {
  /*
   * Platz der Steuerleiste unten (Rand + Leiste). --stage-bar-clear gilt für Elemente in der Bühne (QR-Karte) und ist
   * bei angehefteter Leiste 0 (sie hat dann eine eigene Zeile); --stage-root-bar-clear gilt für Hinweise über der
   * ganzen Leinwand, die immer über der Leiste stehen.
   */
  --stage-bar-clear: calc(84 * var(--su, 1px));
  --stage-root-bar-clear: calc(84 * var(--su, 1px));
  position: relative;
  display: grid;
  /* Bühne füllt den Viewport; Steuerleiste nur unten — keine impliziten Auto-Zeilen. */
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  padding: 0;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  color: #111111;
  /*
   * Bühnen-Einheit: 1 su = 1 px auf einer 1920×1080-Bühne, nie kleiner als 1 px. Bis Full HD ändert sie nichts;
   * auf 4K wachsen alle Obergrenzen mit (sonst blieben Schrift und Bedienung bei Full-HD-Größe stehen).
   * Gegenstück in JavaScript: frontend/js/stage/stageScale.js.
   */
  --su: max(1px, min(calc(100vw / 1920), calc(100vh / 1080)));
  /* ~40 % Weißraum über große Außenabstände */
  --stage-pad-y: 8vh;
  --stage-pad-x: 8vw;
}

/* Folieninhalt in der Hauptzeile — volle verfügbare Höhe für Ergebnisflächen. */
.view-stage > #stage-frame {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  overflow: hidden;
}

/* Über der Bühne schwebende Layer — kein zusätzlicher Grid-Platz. */
.view-stage > #stage-conn,
.view-stage > #stage-reaction-layer,
.view-stage > #stage-logo-wrap,
.view-stage > #stage-footer,
.view-stage > #stage-pause,
.view-stage > #stage-event-countdown,
.view-stage > .stage-kbd-toast,
.view-stage > .stage-kbd-hint {
  grid-row: 1;
  grid-column: 1;
}

.view-stage > .stage-display-controls {
  grid-row: 2;
  grid-column: 1;
}

.view-stage[hidden] {
  display: none !important;
}

.stage-reaction-layer {
  z-index: 6;
}

/* Reaktionen wachsen mit der Leinwand; gebündelte tragen ihre Zahl. */
.stage-reaction-layer .reaction-float {
  font-size: max(2.6rem, calc(42 * var(--su, 1px)));
}
.reaction-float__count {
  margin-left: 0.15em;
  font-size: 0.5em;
  font-weight: 800;
  color: #111111;
  vertical-align: middle;
}

.stage-conn {
  position: absolute;
  top: calc(12 * var(--su, 1px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  padding: calc(10 * var(--su, 1px)) calc(18 * var(--su, 1px));
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: calc(18 * var(--su, 1px));
  font-weight: 700;
}

.stage-conn[hidden] {
  display: none !important;
}

.stage-logo-wrap {
  display: flex;
  justify-content: center;
  padding: 16px var(--stage-pad-x) 0;
}

.stage-logo-wrap[hidden] {
  display: none !important;
}

.stage-logo-wrap img {
  max-height: calc(48 * var(--su, 1px));
  max-width: calc(220 * var(--su, 1px));
  object-fit: contain;
}

.stage-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4vh;
  padding: var(--stage-pad-y) var(--stage-pad-x);
  min-height: 0;
  overflow: hidden;
}

.stage-frame.is-fading {
  animation: stageFade 480ms ease;
}

@keyframes stageFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-frame.is-fading {
    animation: none;
  }
}

.stage-question {
  margin: 0;
  max-width: 18em;
  text-align: center;
  font-size: clamp(48px, 6.2vw, calc(96 * var(--su, 1px)));
  font-weight: 800;
  line-height: 1.12;
  color: #111111;
}

.stage-subtitle {
  margin: 0.65em 0 0;
  max-width: 22em;
  text-align: center;
  font-size: clamp(22px, 2.2vw, calc(34 * var(--su, 1px)));
  font-weight: 600;
  line-height: 1.35;
  color: #444444;
}

.stage-prompt {
  margin: 0.65em 0 0;
  max-width: 22em;
  text-align: center;
  font-size: clamp(32px, 3.4vw, calc(48 * var(--su, 1px)));
  font-weight: 700;
  line-height: 1.25;
  color: #111111;
}

.stage-subtitle + .stage-prompt {
  margin-top: 0.45em;
}

/* Schätzfrage: kleinere Frage, engerer Kopf (Frage → subtitle/prompt → Ergebnis/Teaser). */
.stage-frame--estimation {
  gap: 0.75vh;
  justify-content: flex-start;
  padding-top: max(2vh, 12px);
}

.stage-frame--estimation .stage-interaction-hint {
  margin: 0 0 0.25rem;
}

.stage-frame--estimation .stage-question {
  font-size: clamp(34px, 4.2vw, calc(58 * var(--su, 1px)));
  line-height: 1.08;
}

.stage-frame--estimation .stage-subtitle {
  margin-top: 0.12em;
  font-size: clamp(18px, 1.9vw, calc(28 * var(--su, 1px)));
  line-height: 1.2;
}

.stage-frame--estimation .stage-prompt {
  margin-top: 0.1em;
  font-size: clamp(22px, 2.3vw, calc(34 * var(--su, 1px)));
  line-height: 1.15;
}

.stage-frame--estimation .stage-subtitle + .stage-prompt {
  margin-top: 0.08em;
}

.stage-frame--estimation .stage-results {
  gap: 0.35vh;
  margin-top: 0;
  /* Restliche Viewport-Höhe für das Histogramm nutzen */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stage-frame--estimation .stage-results.stage-estimation {
  width: min(calc(1100 * var(--su, 1px)), 100%);
}

.stage-frame--estimation .stage-teaser {
  margin: 0;
}

/* Multiple Choice: Grid — Kopf (Frage/Teilnahme) und Ergebnisbereich mit reserviertem Chrome. */
.stage-frame--choice {
  gap: 0.75vh;
  justify-content: flex-start;
  padding-top: max(2vh, 12px);
}

.stage-frame--choice .stage-choice-layout {
  display: grid;
  /* minmax(min-content): Kopfzeile darf bei wenig Höhe nicht unter Frage+Teilnahme kollabieren. */
  grid-template-rows: minmax(min-content, auto) minmax(0, 1fr);
  /* Volle Inhaltsbreite: die frühere Deckelung auf 1100px verschenkte auf 1920er
     Bühnen rund 400px, obwohl die Inhaltsfläche 1516px breit ist. Die QR-Reserve
     steckt bereits im padding-inline-end des Frames. */
  width: 100%;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.stage-frame--choice .stage-choice-head {
  grid-row: 1;
  /* min-content: Grid-Zeile darf nicht unter Frage+Teilnahme schrumpfen (sonst Überlappung mit Balken). */
  min-block-size: min-content;
  min-inline-size: 0;
  width: 100%;
  box-sizing: border-box;
}

.stage-frame--choice .stage-choice-head .stage-question {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stage-frame--choice .stage-choice-body {
  grid-row: 2;
  min-block-size: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  /* Oben ausrichten: overflow:hidden + center schneidet erste/letzte Balken ab. */
  justify-content: flex-start;
  overflow-x: hidden;
  /* Standard: kein Scroll — Größe passt sich via --mc-* dynamisch an (JS). */
  overflow-y: hidden;
  width: 100%;
}

/* Notfall: nur wenn Inhalt trotz Mindestgrößen nicht passt (extrem kleines Viewport). */
.stage-frame--choice .stage-choice-body.stage-choice-body--scroll {
  overflow-y: auto;
}

.stage-frame--choice .stage-interaction-hint {
  margin: 0 0 0.25rem;
}

.stage-frame--choice .stage-question {
  font-size: clamp(34px, 4.2vw, calc(58 * var(--su, 1px)));
  line-height: 1.08;
}

@media (max-height: 520px) {
  .stage-frame--choice .stage-question {
    font-size: clamp(22px, 4vw, calc(32 * var(--su, 1px)));
    line-height: 1.06;
  }

  .stage-frame--choice .stage-vote-count {
    font-size: clamp(16px, 2vw, calc(22 * var(--su, 1px)));
  }
}

.stage-frame--choice .stage-choice-options-wrap {
  width: min(calc(920 * var(--su, 1px)), 100%);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-frame--choice .stage-choice-options {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, calc(18 * var(--su, 1px)));
}

.stage-frame--choice .stage-choice-option {
  margin: 0;
  padding: clamp(14px, 1.8vh, calc(22 * var(--su, 1px))) clamp(18px, 2.4vw, calc(28 * var(--su, 1px)));
  border-radius: 14px;
  background: #f4f4f4;
  border: 2px solid #e0e0e0;
  font-size: clamp(24px, 2.6vw, calc(38 * var(--su, 1px)));
  font-weight: 700;
  line-height: 1.25;
  color: #111111;
  text-align: left;
}

.stage-frame--choice .stage-choice-option[data-color="0"] { border-left: 8px solid var(--c1, #b42318); }
.stage-frame--choice .stage-choice-option[data-color="1"] { border-left: 8px solid var(--c2, #175cd3); }
.stage-frame--choice .stage-choice-option[data-color="2"] { border-left: 8px solid var(--c3, #027a48); }
.stage-frame--choice .stage-choice-option[data-color="3"] { border-left: 8px solid var(--c4, #93370d); }
.stage-frame--choice .stage-choice-option[data-color="4"] { border-left: 8px solid var(--c5, #6941c6); }
.stage-frame--choice .stage-choice-option[data-color="5"] { border-left: 8px solid var(--c6, #155eef); }

.stage-frame--choice .stage-results.stage-choice-results {
  flex: 0 1 auto;
  min-height: min-content;
  min-width: 0;
  /* Oben ausrichten: margin-block:auto zentriert die Liste und schneidet bei
     overflow:hidden am Layout den ersten Balken oben / letzten unten ab. */
  justify-content: flex-start;
  align-self: flex-start;
  overflow: visible;
  margin-block: 0;
  width: 100%;
  /* .stage-results deckelt sonst auf min(1100px, 100%) — auf der Bühne soll die
     Balkenliste die gesamte Inhaltsbreite nutzen. */
  max-width: none;
}

/*
 * Wenige Optionen: Balkenblock vertikal zentrieren.
 *
 * Bei zwei bis drei Optionen sind alle Wachstumsdeckel erreicht, bevor die
 * Body-Höhe gefüllt ist — oben ausgerichtet bliebe die untere Bühnenhälfte leer.
 * Nur im Fit-Modus, in dem der Inhalt nachweislich in den Body passt: bei
 * Scrollbedarf würde `margin-block: auto` den ersten und letzten Balken
 * abschneiden (deshalb steht oben `justify-content: flex-start`).
 */
.stage-frame--choice
  .stage-choice-layout[data-mc-layout="fit"]
  .stage-results.stage-choice-results {
  margin-block: auto;
}

/*
 * Beschriftungsspalte: breiter und mehrzeilig.
 *
 * components-base.css setzt auf .poll-label `white-space: nowrap` mit
 * `text-overflow: ellipsis`. Auf der Bühne war die Spalte nur rund 230 px breit,
 * dadurch wurden bei der Messung ALLE sechs Optionen abgeschnitten
 * („Digitalisier…“). Zwei Zeilen in einer 30-%-Spalte fassen die üblichen
 * Optionstexte vollständig; die Höhenschätzung in stageMetrics.js rechnet
 * ohnehin mit mehrzeiligen Beschriftungen.
 */
.stage-frame--choice .stage-results .poll-row {
  grid-template-columns: minmax(0, var(--mc-label-col, 34%)) minmax(0, 1fr) auto;
}

.stage-frame--choice .stage-results .poll-label {
  white-space: normal;
  /* Kein Umbruch mitten im Wort („Donnersta|g“): Ist ein Wort zu breit, verkleinert stageChoiceLayoutMetrics.js die
     Schrift, bis es passt (die Messung erkennt die Überbreite an scrollWidth). */
  overflow-wrap: normal;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--mc-label-lines, 2);
  line-clamp: var(--mc-label-lines, 2);
  overflow: hidden;
}

/*
 * MC-Ergebnisbalken: dynamische Tokens (--mc-*) aus stageChoiceLayoutMetrics.js.
 * Fallback clamp() für ersten Paint vor JS-Messung.
 */
.stage-frame--choice .stage-results {
  gap: var(--mc-row-gap, clamp(6px, 1.2vh, 2.4vh));
}

.stage-frame--choice .stage-results .poll-row {
  gap: clamp(0.4rem, 0.8vw, calc(19.2 * var(--su, 1px))) clamp(0.6rem, 1vw, calc(25.6 * var(--su, 1px)));
}

.stage-frame--choice .stage-results .poll-track {
  height: var(--mc-bar-height, 2.4rem);
}

.stage-frame--choice .stage-results .poll-label {
  font-size: var(--mc-label-size, clamp(28px, 2.8vw, calc(40 * var(--su, 1px))));
  line-height: 1.12;
}

.stage-frame--choice .stage-results .poll-count {
  font-size: var(--mc-count-size, clamp(18px, 2vw, calc(28 * var(--su, 1px))));
}

.stage-frame--choice .stage-results .poll-pct {
  font-size: var(--mc-pct-size, clamp(22px, 2.6vw, calc(40 * var(--su, 1px))));
  line-height: 1.05;
}

.stage-frame--choice .stage-teaser {
  margin: 0;
}

/* Stimmenzähler unter der Frage — live während der Abstimmung */
.stage-frame--choice .stage-vote-count {
  margin: 0.35em 0 0;
  font-size: clamp(22px, 2.4vw, calc(36 * var(--su, 1px)));
  font-weight: 700;
  text-align: center;
  color: #444444;
  font-variant-numeric: tabular-nums;
}

/* QR/Timer-Reserve erfolgt zentral über --stage-chrome-right auf .stage-choice-layout */

.stage-wait {
  font-size: clamp(40px, 5vw, calc(72 * var(--su, 1px)));
  font-weight: 800;
  text-align: center;
}

.stage-results {
  width: min(calc(1100 * var(--su, 1px)), 100%);
  display: flex;
  flex-direction: column;
  gap: 2.4vh;
}

.stage-results .poll-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 2.2fr) auto;
  gap: 1.2rem 1.6rem;
  align-items: center;
}

.stage-results .poll-label {
  font-size: clamp(28px, 2.8vw, calc(40 * var(--su, 1px)));
  font-weight: 700;
  color: #111111;
}

.stage-results .poll-track {
  position: relative;
  height: 2.4rem;
  background: #e8e8e8;
  border-radius: 999px;
  overflow: hidden;
}

.stage-results .poll-fill {
  /* Explizit im Track verankern — verhindert Höhen-Drift durch line-height/Text. */
  position: absolute;
  inset: 0 auto 0 0;
  height: auto;
  width: var(--bar-width, 0%);
  border-radius: inherit;
  line-height: 1;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: 12px;
  box-sizing: border-box;
}

/*
 * Leinwand: jede Zahl genau einmal — Prozent groß, Stimmen klein darunter (poll.js, viewOpts.stage).
 * Führende Antwort fett, die übrigen Balken leicht zurückgenommen; 0 % ohne farbigen Punkt (sah wie eine Stimme aus).
 */
.poll--stage .poll-pct {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.poll--stage .poll-pct__votes {
  margin-top: 0.12em;
  font-size: max(0.36em, 13px);
  font-weight: 700;
  color: #555555;
  white-space: nowrap;
}
.poll--stage .poll-row .poll-fill {
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease, opacity 0.4s ease;
}
.poll--stage .poll-row:not(.is-leading) .poll-fill {
  opacity: 0.78;
}
.poll--stage .poll-row.is-leading .poll-label {
  font-weight: 800;
}
.poll--stage .poll-row.is-zero .poll-fill {
  visibility: hidden;
}
.poll--stage .poll-row.is-zero .poll-track {
  background: repeating-linear-gradient(90deg, #ececec 0 10px, #f6f6f6 10px 20px);
}
.poll--stage .poll-row.is-zero .poll-pct__num {
  color: #8a8a8a;
}
/* Nach dem Ende: Häkchen an der führenden Antwort. */
.stage-frame[data-ix="ended"] .poll--stage .poll-row.is-leading .poll-label::after {
  content: " ✓";
  color: #1b7a3a;
}
/* Schmale Fläche (4:3-Beamer, Hochformat): Beschriftung über dem Balken, der Balken bekommt die volle Breite. */
@media (max-aspect-ratio: 3/2) {
  .stage-frame--choice .stage-choice-layout:not(.stage-choice-layout--list) .poll--stage .poll-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label pct" "track pct";
    row-gap: 0.25em;
  }
  .stage-frame--choice .stage-choice-layout:not(.stage-choice-layout--list) .poll--stage .poll-label {
    grid-area: label;
  }
  .stage-frame--choice .stage-choice-layout:not(.stage-choice-layout--list) .poll--stage .poll-track {
    grid-area: track;
  }
  .stage-frame--choice .stage-choice-layout:not(.stage-choice-layout--list) .poll--stage .poll-pct {
    grid-area: pct;
    align-self: end;
  }
}

/* Unterschiedliche Balkenfarben — Theme-Tokens wie Presenter/Join */
.stage-results .poll-fill[data-color="0"] { background: var(--c1, #b42318); color: var(--c1-ink, #fff); }
.stage-results .poll-fill[data-color="1"] { background: var(--c2, #175cd3); color: var(--c2-ink, #fff); }
.stage-results .poll-fill[data-color="2"] { background: var(--c3, #027a48); color: var(--c3-ink, #fff); }
.stage-results .poll-fill[data-color="3"] { background: var(--c4, #93370d); color: var(--c4-ink, #fff); }
.stage-results .poll-fill[data-color="4"] { background: var(--c5, #6941c6); color: var(--c5-ink, #fff); }
.stage-results .poll-fill[data-color="5"] { background: var(--c6, #155eef); color: var(--c6-ink, #fff); }

.stage-results .poll-fill--custom {
  background: var(--bar-bg);
  color: var(--bar-ink);
}

.stage-choice-option.choice-color--custom {
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: var(--choice-accent, var(--bar-bg));
}

/* Reguläre Folien: Chrome-Reserve (Timer oben, QR unten) — dynamisch via JS */
.stage-frame--regular {
  gap: 0.75vh;
  justify-content: flex-start;
  padding-top: max(2vh, var(--stage-chrome-top, 12px));
  padding-bottom: max(1vh, var(--stage-chrome-bottom, 12px));
  /* Rechts Platz für QR/Timer — verhindert Überlappung bei zentriertem MC-Grid. */
  padding-inline-end: calc(var(--stage-pad-x) + var(--stage-chrome-right, 0px));
  box-sizing: border-box;
}

.stage-frame--regular:has(.stage-slide-qr-overlay) .stage-results,
.stage-frame--regular:has(.stage-slide-qr-overlay) .stage-cloud,
.stage-frame--regular:has(.stage-slide-qr-overlay) .stage-choice-options-wrap {
  max-width: calc(100% - min(calc(208 * var(--su, 1px)), 28vw));
}

/*
 * Multiple Choice und Stimmungsbarometer: Bühnenfläche statt dreifacher QR-Reserve.
 *
 * Gemessen bei 1920×1080 (scripts/diagnose-stage-space-headless.js): Die QR-Karte
 * ist 216×273 px groß und sitzt in der rechten unteren Ecke (x 1682–1898,
 * y 785–1058). Die pauschale Reserve von .stage-frame--regular hält dafür aber
 * gleich dreifach Platz frei:
 *
 *   1. --stage-chrome-right (250 px) wird ZUSÄTZLICH zu --stage-pad-x (154 px)
 *      addiert. Die Variable misst den Abstand vom Bühnenrand zur QR-Karte, der
 *      Bühnenrand selbst ist darin also bereits enthalten — 404 px statt 250 px.
 *   2. --stage-chrome-bottom (303 px) sperrt ein volles unteres Band über die
 *      ganze Bühnenbreite, obwohl die Karte nur die rechte Ecke belegt.
 *   3. Der max-width-Abzug oben nimmt nochmals min(13rem, 28vw) = 208 px weg.
 *
 * Übrig blieben 1363×755 px, also 49,6 % der Bühne; die MC-Balken nutzten davon
 * nur 892 px Breite (46 % der Bühnenbreite), der Rest blieb leer.
 *
 * Beide Folientypen zeigen Balken bzw. Säulen, die nur bei gleicher Spurbreite
 * vergleichbar sind. Die Ecke wird deshalb nicht wie beim Picker umflossen,
 * sondern ehrlich als rechte Spalte reserviert: max() statt Addition. Das untere
 * Band und der max-width-Abzug entfallen — die QR-Karte liegt horizontal
 * vollständig rechts der neuen Inhaltskante.
 */
.stage-frame--choice.stage-frame--regular {
  padding-inline-end: max(var(--stage-pad-x), var(--stage-chrome-right, 0px));
  padding-bottom: max(1vh, 12px);
}

/* Stimmungsbarometer: Die Smileys sitzen mittig auf der Leinwand (links und rechts gleicher Rand). Die QR-Karte
   reserviert hier keine Spalte; überdeckt sie Smileys, weicht sie verkleinert nach oben links aus (stageQrAvoidance.js). */
.stage-frame--mood-meter.stage-frame--regular {
  padding-inline: var(--stage-pad-x);
  padding-bottom: max(1vh, 12px);
}

/* Reihenfolge der beiden Klassen bewusst so herum: test-stage-layout-bounds.js
   verbietet per Zeichenkettensuche den Selektor, der mit der Folientyp-Klasse
   beginnt und direkt darauf die :has-Prüfung setzt — dort stand früher ein
   fragiles padding-right-Patch auf der Ergebnisliste. */
.stage-frame--choice.stage-frame--regular:has(.stage-slide-qr-overlay) .stage-results,
.stage-frame--choice.stage-frame--regular:has(.stage-slide-qr-overlay) .stage-choice-options-wrap,
.stage-frame--mood-meter.stage-frame--regular:has(.stage-slide-qr-overlay) .stage-results {
  max-width: none;
}

.stage-clock[data-reduced-motion="true"][data-urgency="critical"] strong {
  animation: none;
}

.stage-results .poll-count {
  font-size: clamp(18px, 2vw, calc(28 * var(--su, 1px)));
  font-weight: 800;
  color: inherit;
}

.stage-results .poll-pct {
  min-width: 5.5ch;
  font-size: clamp(36px, 4.2vw, calc(64 * var(--su, 1px)));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #111111;
  text-align: right;
}

.stage-teaser {
  font-size: clamp(32px, 3.5vw, calc(52 * var(--su, 1px)));
  font-weight: 700;
  text-align: center;
  color: #111111;
}

.stage-avg {
  margin: 0;
  font-size: clamp(72px, 11vw, calc(160 * var(--su, 1px)));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  color: #111111;
}

.stage-avg-scale {
  display: block;
  margin-top: 0.2em;
  font-size: 0.28em;
  font-weight: 700;
  color: #333333;
}

/* Picker: kompakte Frage, maximaler Platz für Bubble-Ergebnisse und Legende. */
.stage-frame--picker {
  gap: 0.55vh;
  justify-content: flex-start;
  /* Volle Breite nutzen — kein horizontales Zentrieren der Ergebnisfläche. */
  align-items: stretch;
  padding-top: max(1.5vh, 10px);
}

/* Das QR-Badge belegt nur die rechte untere Ecke. Die pauschale Reserve von
   .stage-frame--regular hält dafür eine volle Spalte und ein volles Band frei —
   zusammen rund die Hälfte der Bühne. Die Kacheln umfließen die Ecke selbst
   (siehe measurePickerChromeReserve), daher hier nur der normale Bühnenrand. */
.stage-frame--picker.stage-frame--regular {
  padding-inline-end: var(--stage-pad-x);
  padding-bottom: max(1vh, 12px);
}

.stage-frame--regular.stage-frame--picker:has(.stage-slide-qr-overlay) .stage-results {
  max-width: none;
}

.stage-frame--picker .stage-interaction-hint {
  margin: 0 0 0.2rem;
}

.stage-frame--picker .stage-question {
  font-size: clamp(24px, 2.8vw, calc(40 * var(--su, 1px)));
  line-height: 1.1;
  max-width: 24em;
}

.stage-frame--picker .stage-results {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 1880px);
  gap: 0.25vh;
  margin-top: 0;
  /* Minimales Innenpadding — Bubbles starten links im nutzbaren Bereich. */
  padding-inline: clamp(0, 0.25vw, calc(5.6 * var(--su, 1px)));
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.stage-frame--picker .stage-results .picker-results--bubbles {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Ergebnisfläche oben, Legende als Fußzeile darunter. */
.stage-frame--picker .picker-bubble-grid {
  flex: 1 1 auto;
  /* Flex-Kind darf schrumpfen; Mindesthöhe nur als Fallback vor erstem Layout-Pass. */
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stage-frame--picker .picker-bubble-grid > .picker-bubble-canvas {
  flex: 1 1 auto;
  min-height: 0;
}

/* Kacheln tragen die Chrome-Reserve schon in ihren Koordinaten — Canvas bleibt voll breit. */
.stage-frame--picker .picker-bubble-canvas--tiles {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Listen-Fallback: volle Breite — Legende liegt als Overlay oben rechts. */
.stage-frame--picker .picker-bubble-canvas--list {
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stage-frame--picker .picker-bubble-canvas--list .picker-results-list {
  width: 100%;
  max-width: none;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* Rechts Platz für Legende und QR-Overlay — vom Renderer gemessen. */
  padding-inline-end: var(--picker-legend-reserve, 0px);
  box-sizing: border-box;
}

.stage-frame--picker .picker-bubble-canvas--list .picker-results-list__item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  max-width: 100%;
}

.stage-frame--picker .picker-bubble-canvas--list .picker-results-list__label {
  flex: 0 1 auto;
  font-weight: 650;
  line-height: 1.12;
  font-size: max(var(--picker-bubble-label-size, 16px), 14px);
}

.stage-frame--picker .picker-bubble-canvas--list .picker-results-list__votes {
  flex: 0 0 auto;
  margin-left: 0.15rem;
  font-size: max(var(--picker-bubble-count-size, 14px), 14px);
  font-weight: 600;
  opacity: 0.9;
}

.stage-frame--picker .picker-bubble-canvas--tiles {
  flex: 1 1 auto;
  min-height: 0;
}

/* Legende oben rechts unter Timer/QR-Chrome — Swatch rechts neben Text. */
/* Legende als schmale Fußzeile unter den Kacheln — als Overlay oben rechts würde sie
   mitten in der Ergebnisfläche liegen und dort eine Leerfläche erzwingen. */
.stage-frame--picker .picker-results-legend {
  position: static;
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  margin-top: 0.35rem;
  /* Legende und Restzeile nicht unter die QR-Karte (rechte Spalte). */
  box-sizing: border-box;
  padding-inline-end: var(--stage-chrome-right, 0px);
}

.stage-frame--picker .stage-picker-rest {
  padding-inline-end: var(--stage-chrome-right, 0px);
}

.stage-frame--picker .picker-results-legend .picker-category-legend {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 1.1rem;
  text-align: center;
}

.stage-frame--picker .picker-results-legend .picker-category-legend__item {
  justify-content: flex-start;
}

/* Wortwolke: Frage oben, Wolke auf voller Ergebnisfläche — QR nur als echte Ecken-Überdeckung. */
.stage-frame--wordcloud {
  gap: 0.55vh;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: max(1.5vh, 10px);
}

/*
 * Wie Picker: die pauschale Reserve von .stage-frame--regular (volle rechte Spalte
 * + unteres Band) entfällt. Der Packer spart nur die gemessene QR-Ecke aus.
 */
.stage-frame--wordcloud.stage-frame--regular {
  padding-inline-end: var(--stage-pad-x);
  padding-bottom: max(1vh, 12px);
}

.stage-frame--regular.stage-frame--wordcloud:has(.stage-slide-qr-overlay) .stage-cloud {
  max-width: none;
}

.stage-frame--wordcloud .stage-question {
  font-size: clamp(32px, 3.8vw, calc(56 * var(--su, 1px)));
  line-height: 1.12;
  max-width: 22em;
}

.stage-frame--wordcloud .stage-subtitle {
  margin-top: 0.25em;
}

.stage-frame--wordcloud .stage-wordcloud-count {
  margin: 0.35em 0 0;
  font-size: clamp(22px, 2.4vw, calc(36 * var(--su, 1px)));
  font-weight: 700;
  text-align: center;
  color: #444444;
  font-variant-numeric: tabular-nums;
}

/* Kein zweiter Beitragszähler in der Canvas-Hülle (Stage hat #stage-wordcloud-count). */
.stage-frame--wordcloud .wordcloud-contribution-count,
.stage-frame--wordcloud .wordcloud-live {
  display: none !important;
}

.stage-frame--wordcloud .stage-cloud {
  /* 0%-Basis: Rest der Leinwand füllen, unabhängig von der Canvas-Pixelhöhe. */
  flex: 1 1 0%;
  min-height: 0;
  width: min(100%, 1880px);
  align-self: stretch;
}

.stage-frame--wordcloud .wordcloud-surface {
  min-height: 0;
  height: 100%;
}

.stage-cloud {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
}

.stage-cloud canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.stage-qa {
  --qa-font: clamp(22px, 2.4vw, calc(40 * var(--su, 1px)));
  width: min(calc(1400 * var(--su, 1px)), 100%);
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--qa-font) * 0.45);
}

/* Fragen als Karten: lesbar groß (Schrift setzt stagePager.js, nie unter die Lesbarkeitsgrenze). */
.stage-qa-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: calc(var(--qa-font) * 0.6);
  align-items: start;
  padding: calc(var(--qa-font) * 0.45) calc(var(--qa-font) * 0.7);
  border-radius: calc(var(--qa-font) * 0.45);
  background: #f4f6f8;
}

.stage-qa-item[hidden] {
  display: none;
}

/* Q&A: Überschrift im Maß der übrigen Folien (sie war mit 96 px größer als alle Fragen zusammen). */
.stage-frame--qa .stage-question {
  font-size: clamp(30px, min(4vw, 7vh), calc(64 * var(--su, 1px)));
  line-height: 1.1;
}

.stage-qa-rank {
  font-size: var(--qa-font);
  font-weight: 800;
  color: #007cc1;
  min-width: 1.2em;
}

.stage-qa-text {
  margin: 0;
  font-size: var(--qa-font);
  font-weight: 700;
  line-height: 1.25;
  color: #111111;
  overflow-wrap: anywhere;
}

.stage-qa-item.is-answered .stage-qa-text {
  color: #5a6472;
}

.stage-qa-done {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: #e7f4ee;
  color: #1c6b46;
  font-size: 0.6em;
  font-weight: 700;
  white-space: nowrap;
}

.stage-qa-votes {
  font-size: var(--qa-font);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #111111;
  white-space: nowrap;
}

.stage-qa-empty {
  margin: 2rem 0 0;
  max-width: 28em;
  text-align: center;
  font-size: clamp(24px, 2.6vw, calc(42 * var(--su, 1px)));
  font-weight: 600;
  line-height: 1.3;
  color: #444444;
}

/* QR-Karte reserviert rechts eine Spalte, damit sie keine Fragen verdeckt. */
.stage-frame--qa.stage-frame--regular {
  justify-content: flex-start;
  padding-inline-end: max(var(--stage-pad-x), var(--stage-chrome-right, 0px));
  padding-bottom: max(2vh, 12px);
}

/* ---- Q&A-Moderation auf der Leinwand (Taste M) ---- */
.stage-qa-mod-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
  font: 600 0.95rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.stage-qa-mod-hint.has-pending {
  background: #111111;
  color: #ffffff;
}
.stage-qa-mod {
  position: absolute;
  inset-block: 12px;
  right: 12px;
  z-index: 40;
  width: min(calc(576 * var(--su, 1px)), calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.35);
  font: 500 1rem/1.3 system-ui, sans-serif;
}
.stage-qa-mod[hidden],
.stage-qa-mod-hint[hidden] {
  display: none;
}
.stage-qa-mod__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.stage-qa-mod__head h2 {
  margin: 0;
  font-size: 1.25rem;
}
.stage-qa-mod__count {
  margin: 0;
  color: #5a6472;
}
.stage-qa-mod__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stage-qa-mod__item {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  background: #f4f6f8;
}
.stage-qa-mod__item.is-selected {
  border-color: #007cc1;
  background: #eaf5fc;
}
.stage-qa-mod__item[data-status="pending"] .stage-qa-mod__acts {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.stage-qa-mod__acts:empty {
  display: none;
}
.stage-qa-mod__close {
  margin-left: auto;
}
.stage-qa-mod__state {
  color: #8a4b00;
  font-weight: 700;
}
.stage-qa-mod__state {
  font-size: 0.85rem;
  color: #5a6472;
}
.stage-qa-mod__text {
  overflow-wrap: anywhere;
}
.stage-qa-mod__empty {
  margin: 0;
  color: #5a6472;
}
.stage-qa-mod__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e4e7ec;
  font-size: 0.9rem;
  color: #3d4450;
}
.stage-qa-mod__keys kbd {
  display: inline-block;
  min-width: 1.5em;
  margin-right: 0.15em;
  padding: 0.05em 0.4em;
  border: 1px solid #b8c0cc;
  border-radius: 0.3em;
  background: #fff;
  font: 600 0.9em/1.3 ui-monospace, monospace;
  text-align: center;
}

/*
 * Quiz: Antwortkarten; nach dem Ende mit Verteilung (Füllung nach Anteil, rechts Prozent und Zahl), richtige Antwort
 * grün mit Häkchen, falsche zurückgenommen. Mit Rangliste: Karten links, Rangliste rechts — alles im Bild.
 */
.stage-frame--quiz {
  justify-content: flex-start;
  gap: 2vh;
  padding-top: max(2vh, 12px);
}

.stage-frame--quiz .stage-question {
  font-size: clamp(30px, min(4.4vw, 8vh), calc(72 * var(--su, 1px)));
  line-height: 1.1;
}

.stage-frame--quiz .qe-tiles {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Rechte Spalte der Auflösung: Rangliste und Kennzahl-Kacheln untereinander. */
.stage-quiz-side {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, calc(20 * var(--su, 1px)));
  min-width: 0;
}
.stage-quiz-side .qe-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: clamp(6px, 1vw, calc(14 * var(--su, 1px)));
}
.stage-quiz-side .qe-tile {
  min-width: 0;
  padding: 0.4em 0.5em;
  font-size: clamp(12px, min(1.2vw, 2.2vh), calc(20 * var(--su, 1px)));
  text-align: center;
}
.stage-quiz-side .qe-tile-value {
  font-size: 1.7em;
}
/* 4:3: Rangliste unter den Karten — nur die ersten drei Plätze, ohne Kacheln (sonst reicht die Höhe nicht). */
@media (max-aspect-ratio: 3/2) {
  .stage-quiz-side .stage-board-row:nth-child(n + 4),
  .stage-quiz-side .qe-tiles {
    display: none;
  }
}

/* QR-Karte als rechte Spalte (wie Mehrfachauswahl): Das pauschale untere Band ließ der Auflösung keine Höhe. */
.stage-frame--quiz.stage-frame--regular {
  padding-inline-end: max(var(--stage-pad-x), var(--stage-chrome-right, 0px));
  padding-bottom: max(1vh, 12px);
}

.stage-quiz-result {
  width: min(calc(1500 * var(--su, 1px)), 100%);
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* safe: Bei knappem Platz nicht nach oben in die Frage schieben. */
  align-content: safe center;
  gap: clamp(12px, 2.4vw, calc(48 * var(--su, 1px)));
}

.stage-quiz-result.has-board {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
}

.stage-quiz-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, calc(20 * var(--su, 1px)));
}

.stage-quiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.45em 0.8em;
  overflow: hidden;
  font-size: clamp(20px, min(2.4vw, 4.2vh), calc(40 * var(--su, 1px)));
  font-weight: 700;
  border-radius: calc(12 * var(--su, 1px));
  background: #f4f4f4;
  color: #111111;
  isolation: isolate;
}

/* Verteilung als Füllung von links (relativ zur häufigsten Antwort oder bis 100 %). */
.stage-quiz-opt.has-dist::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--quiz-fill, 0%);
  background: rgba(17, 17, 17, 0.1);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-quiz-opt.is-correct {
  background: #1b7a3a;
  color: #ffffff;
}

.stage-quiz-opt.is-correct.has-dist::before {
  background: rgba(255, 255, 255, 0.22);
}

.stage-quiz-opt.is-correct .stage-quiz-opt__label::after {
  content: " ✓";
  font-weight: 800;
}

.stage-quiz-opt.is-wrong {
  opacity: 0.62;
}

.stage-quiz-opt__nums {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  white-space: nowrap;
}

.stage-quiz-opt__nums small {
  margin-top: 0.15em;
  font-size: 0.5em;
  font-weight: 700;
  opacity: 0.85;
}

.stage-board {
  width: 100%;
  margin: 0;
  padding: clamp(10px, 1.6vw, calc(28 * var(--su, 1px)));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  border-radius: calc(16 * var(--su, 1px));
  background: #111111;
  color: #ffffff;
}

.stage-board-row {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5em;
  font-size: clamp(16px, min(1.8vw, 3.4vh), calc(32 * var(--su, 1px)));
  font-weight: 700;
}

.stage-board-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-board-row__pts {
  font-variant-numeric: tabular-nums;
}

@media (max-aspect-ratio: 3/2) {
  .stage-quiz-result.has-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-quiz-opt.has-dist::before {
    transition: none;
  }
}

.stage-open-list {
  width: min(calc(900 * var(--su, 1px)), 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stage-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  width: min(calc(1100 * var(--su, 1px)), 100%);
}

.stage-images img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

.stage-images p {
  margin: 0.4rem 0 0;
  font-size: clamp(22px, 2vw, calc(32 * var(--su, 1px)));
  font-weight: 700;
  text-align: center;
}

.stage-footer-copy {
  margin: 0;
  padding: calc(12 * var(--su, 1px)) var(--stage-pad-x) calc(16 * var(--su, 1px));
  text-align: center;
  font-size: calc(16 * var(--su, 1px));
  color: #333333;
}

.stage-footer-copy[hidden] {
  display: none !important;
}

/*
 * Steuerleiste der Leinwand (stageDisplayControls.js): dunkle, leicht durchscheinende Leiste unten.
 * Angeheftet (Standard) steht sie in der zweiten Zeile des Bühnen-Grids und überdeckt nichts; mit „automatisch
 * ausblenden“ schwebt sie über der Bühne und erscheint bei Mausbewegung. Alle Größen in --su (wächst auf 4K mit).
 */
.stage-display-controls {
  position: absolute;
  left: calc(10 * var(--su, 1px));
  right: calc(10 * var(--su, 1px));
  bottom: calc(10 * var(--su, 1px));
  z-index: 9;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--su, 1px));
  min-height: max(56px, calc(68 * var(--su, 1px)));
  padding: calc(8 * var(--su, 1px)) calc(14 * var(--su, 1px));
  border-radius: calc(16 * var(--su, 1px));
  background: rgba(17, 17, 17, 0.88);
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: max(14px, calc(17 * var(--su, 1px)));
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(8 * var(--su, 1px)));
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.stage-display-controls.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-duration: 0.15s;
}

/* Angeheftet: eigene Zeile unter der Bühne, keine Überdeckung. Overlays (Hinweise, Meldungen) sitzen darüber. */
.view-stage.is-bar-pinned {
  --stage-bar-clear: 0px;
  --stage-root-bar-clear: calc(max(56px, calc(68 * var(--su, 1px))) + calc(16 * var(--su, 1px)));
}
.view-stage.is-bar-pinned > .stage-display-controls {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 calc(10 * var(--su, 1px)) calc(10 * var(--su, 1px));
  transform: none;
  transition: none;
}

/* Ruhe im automatischen Modus: Mauszeiger verschwindet mit der Leiste. */
.view-stage.is-pointer-idle,
.view-stage.is-pointer-idle * {
  cursor: none !important;
}

.view-stage[data-stage-mode="share"] .stage-display-controls {
  display: none !important;
}

.stage-bar__context,
.stage-bar__view {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--su, 1px));
  min-width: 0;
}

.stage-bar__view {
  justify-content: flex-end;
}
/* Pubquiz: kein Statusblock (stageDisplayControls.js), die Spalte bleibt. */
.stage-bar__context.is-hidden {
  visibility: hidden;
}

.stage-bar__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--su, 1px));
  min-width: 0;
}

.stage-bar__slides {
  flex: 0 0 auto;
  min-height: 44px;
  padding: calc(6 * var(--su, 1px)) calc(12 * var(--su, 1px));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.stage-bar__slides:disabled {
  border-color: transparent;
  cursor: default;
}

.stage-bar__state {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
}

.stage-bar__state[data-state="running"]::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: #34d399;
  vertical-align: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  .stage-bar__state[data-state="running"]::before {
    animation: stage-bar-live 1.6s ease-in-out infinite;
  }
}

@keyframes stage-bar-live {
  50% {
    opacity: 0.35;
  }
}

.stage-onscreen-btn,
.stage-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 44px;
  min-height: 44px;
  padding: calc(8 * var(--su, 1px)) calc(14 * var(--su, 1px));
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.stage-bar__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.stage-bar__btn:disabled,
.stage-bar__btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
}

.stage-bar__primary {
  min-height: max(48px, calc(54 * var(--su, 1px)));
  padding-inline: calc(22 * var(--su, 1px));
  border-color: transparent;
  background: var(--primary-color, #007cc1);
  font-size: 1.08em;
}

.stage-bar__primary[data-tone="go"] {
  background: #1b7a3a;
}

.stage-bar__primary[data-tone="stop"] {
  background: #b42318;
}

.stage-bar__primary[data-tone="danger"] {
  background: #7a271a;
}

.stage-bar__primary:hover:not(:disabled) {
  filter: brightness(1.1);
  background-color: inherit;
}

.stage-bar__key {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.05em 0.4em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 2px;
  border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.12);
  font: inherit;
  font-size: 0.78em;
  font-weight: 700;
  text-align: center;
  opacity: 0.9;
}

.stage-bar__btn:focus-visible,
.stage-bar__slides:focus-visible,
.stage-bar__menuitem:focus-visible,
.stage-bar__slidelist button:focus-visible {
  outline: 3px solid #7cc4ff;
  outline-offset: 3px;
}

/* Aufklappfenster (Menü „Mehr“, Folienübersicht, Ton) über der Leiste */
.stage-bar__pop {
  position: absolute;
  bottom: calc(100% + calc(10 * var(--su, 1px)));
  z-index: 2;
  box-sizing: border-box;
  max-height: min(70vh, calc(640 * var(--su, 1px)));
  overflow: auto;
  padding: calc(10 * var(--su, 1px));
  border-radius: calc(14 * var(--su, 1px));
  background: rgba(17, 17, 17, 0.96);
  color: #ffffff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

.stage-bar__pop[hidden] {
  display: none !important;
}

.stage-bar__menu,
.stage-bar__soundpop {
  right: 0;
  width: min(calc(380 * var(--su, 1px)), 92vw);
}

.stage-bar__overview {
  left: 0;
  width: min(calc(560 * var(--su, 1px)), 92vw);
}

.stage-bar__menuitem {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 44px;
  padding: 0.45em 0.75em;
  border: 0;
  border-radius: 0.5em;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stage-bar__menuitem:hover {
  background: rgba(255, 255, 255, 0.12);
}

.stage-bar__menuitem[data-tone="danger"] {
  color: #fda29b;
}

.stage-bar__poptitle {
  margin: 0 0 0.4em;
  padding: 0 0.4em;
  font-weight: 700;
  opacity: 0.8;
}

.stage-bar__slidelist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-bar__slidelist button {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.75em;
  min-height: 44px;
  padding: 0.45em 0.6em;
  border: 0;
  border-radius: 0.5em;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stage-bar__slidelist button:hover,
.stage-bar__slidelist button[aria-current="true"] {
  background: rgba(255, 255, 255, 0.14);
}

.stage-bar__slidenum {
  flex: 0 0 2ch;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.stage-bar__soundpop .qe-sound .btn {
  color: inherit;
}

/* Zuschauer-Leinwand: nur Vollbild und Tastenübersicht */
.stage-display-controls.is-viewer .stage-bar__main {
  display: none;
}

/* Mittlere Breite: rechts nur Symbole (Beschriftung bleibt als title und aria-label). */
@media (max-width: 1500px) {
  .stage-bar__view .stage-bar__label,
  .stage-bar__view .stage-bar__key,
  .stage-bar__nav .stage-bar__key {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Schmale Leinwand: Beschriftungen der Nebenknöpfe ausblenden, Hauptaktion bleibt beschriftet. */
@media (max-width: 1100px) {
  .stage-bar__secondary .stage-bar__label,
  .stage-bar__nav .stage-bar__label,
  .stage-bar__btn .stage-bar__key,
  .stage-bar__state {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .stage-bar__primary .stage-bar__key {
    display: none;
  }
}

@media (max-width: 640px) {
  .stage-display-controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding-inline: 8px;
  }
  .stage-bar__primary .stage-bar__label {
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-display-controls,
  .stage-display-controls.is-visible {
    transition: none;
    transform: none;
  }
}

.stage-pause {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(17, 17, 17, 0.92);
  color: #ffffff;
}

.stage-pause[hidden] {
  display: none !important;
}

.stage-pause p {
  margin: 0;
  font-size: clamp(40px, 6vw, calc(80 * var(--su, 1px)));
  font-weight: 800;
  text-align: center;
}

.stage-clock {
  position: absolute;
  top: calc(16 * var(--su, 1px));
  right: calc(20 * var(--su, 1px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--su, 1px));
  font-variant-numeric: tabular-nums;
}

.stage-clock[hidden] {
  display: none !important;
}

.stage-clock-ring {
  width: calc(56 * var(--su, 1px));
  height: calc(56 * var(--su, 1px));
}

.stage-clock strong {
  font-size: calc(28 * var(--su, 1px));
  font-weight: 800;
}

.stage-clock[data-urgency="ok"] strong {
  color: #1b7a3a;
}

.stage-clock[data-urgency="warn"] strong {
  color: #8a6a00;
}

.stage-clock[data-urgency="critical"] strong {
  color: var(--timer-critical, var(--danger, #b91c1c));
}

@media (max-width: 900px) {
  .stage-question {
    font-size: 48px;
  }

  .stage-prompt {
    font-size: 32px;
  }

  .view-stage {
    --stage-pad-y: 5vh;
    --stage-pad-x: 5vw;
  }
}

/* Einbettungsmodus (?embed=1, PowerPoint-Add-in): nur die Frage, keine Bühnen-Chrome, volle Fläche. */
.view-stage[data-stage-mode="embed"] {
  min-height: 100vh;
}

.view-stage[data-stage-mode="embed"] > #stage-logo-wrap,
.view-stage[data-stage-mode="embed"] > #stage-footer,
.view-stage[data-stage-mode="embed"] .stage-display-controls,
.view-stage[data-stage-mode="embed"] .stage-kbd-hint {
  display: none !important;
}

/* Screen-Sharing-Modus (?share=1): größere Typo, ruhigere Animationen */
.view-stage[data-stage-mode="share"] {
  --stage-pad-y: 8vh;
  --stage-pad-x: 10vw;
}

#stage-event-countdown .event-countdown-title {
  font-size: clamp(2rem, 6.5vw, calc(68 * var(--su, 1px)));
}

.view-stage[data-stage-mode="share"] .event-countdown-title {
  font-size: clamp(2rem, 5vw, calc(60 * var(--su, 1px)));
}

.view-stage[data-stage-mode="share"] .event-countdown-num {
  font-size: clamp(4rem, 14vw, calc(144 * var(--su, 1px)));
}

.view-stage[data-stage-mode="share"] .event-countdown-datetime {
  font-size: clamp(1.35rem, 3.5vw, calc(40 * var(--su, 1px)));
}

.view-stage[data-stage-mode="share"] .event-countdown-qr-card {
  max-width: min(calc(384 * var(--su, 1px)), 92vw);
  padding: 1.25rem 1.5rem;
}

.view-stage[data-stage-mode="share"] .event-countdown-qr-canvas {
  width: min(calc(240 * var(--su, 1px)), 44vw);
  height: auto;
  aspect-ratio: 1 / 1;
}

.view-stage[data-stage-mode="share"] .event-countdown-bg {
  animation: none;
}

/* QR auf der Stage leicht vergrößert (Folien-Badge + Countdown, nicht Presenter-Vorschau) */
.view-stage .stage-slide-qr-overlay .stage-slide-qr-card {
  /* Breiter als zuvor (15rem): Der Link unter dem Code ist groß geschrieben und soll nicht abgeschnitten werden. */
  max-width: min(calc(352 * var(--su, 1px)), 42vw);
  padding: 0.75rem 1rem;
}

.view-stage .stage-slide-qr-overlay .event-countdown-qr-canvas {
  width: min(calc(200 * var(--su, 1px)), 28vw);
}

.view-stage:not([data-stage-mode="share"]) .event-countdown-host .event-countdown-qr-canvas {
  width: min(calc(228 * var(--su, 1px)), 40vw);
}

/* Stage-Tastatursteuerung: dezente Toasts und Hilfe (keine Toolbar) */
.stage-kbd-toast,
.stage-kbd-hint {
  position: absolute;
  /* Links über der Steuerleiste: weder über dem QR-Code (rechts) noch über den Knöpfen. */
  left: max(16px, var(--stage-pad-x));
  bottom: calc(var(--stage-root-bar-clear, 0px) + 8px + var(--stage-hint-offset, 0px));
  z-index: 8;
  max-width: min(calc(420 * var(--su, 1px)), 90vw);
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.92);
  color: #ffffff;
  font-size: clamp(14px, 1.6vw, calc(18 * var(--su, 1px)));
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.stage-kbd-toast[hidden],
.stage-kbd-hint[hidden] {
  display: none !important;
}

.stage-kbd-hint {
  opacity: 0.88;
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .stage-kbd-toast:not([hidden]),
  .stage-kbd-hint:not([hidden]) {
    animation: stage-kbd-fade-in 0.2s ease-out;
  }
}

@keyframes stage-kbd-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stage-kbd-help-dialog {
  max-width: 36rem;
  width: min(calc(576 * var(--su, 1px)), 92vw);
}

.stage-kbd-help-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.stage-kbd-help-section h3 {
  margin: 1rem 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.stage-kbd-help-list {
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.stage-kbd-help-list div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.stage-kbd-help-list dt {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
}

.stage-kbd-help-list dd {
  margin: 0;
}

.stage-kbd-help-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted, #555);
}

.stage-kbd-help-muted {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #555);
}

.stage-kbd-help-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

/* Starthilfe für Einsteiger: kleine Karte unten links, verschwindet nach 15 s oder mit „Alles klar“ */
.stage-start-prompt {
  position: absolute;
  left: 1.25rem;
  /* über der Steuerleiste (Maus nach unten) und links vom QR-Code */
  bottom: 6.5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(60vw, 34rem);
  padding: 0.75rem 1rem;
  border-radius: 1.25rem;
  background: rgba(20, 24, 31, 0.86);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

.stage-start-prompt__text,
.stage-start-prompt__tips {
  margin: 0;
}

.stage-start-prompt__tips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}

.stage-start-prompt__btn {
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  background: var(--primary-color, #007cc1);
  color: #fff;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.stage-start-prompt__btn--quiet {
  background: rgba(255, 255, 255, 0.16);
}

.stage-start-prompt__btn:focus-visible,
.stage-start-prompt__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.stage-start-prompt__close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 40rem) {
  .stage-start-prompt {
    border-radius: 1rem;
    flex-wrap: wrap;
  }
}

/*
 * Bewertungsfolie (rating_scale, z. B. Smileys von „Sehr schlecht“ bis „Sehr gut“): Frage und Mittelwert
 * sind nur der Kopf, die Bewertungszeilen bekommen die restliche Höhe. Schriftgrößen folgen der kleineren
 * Fensterseite (min(vw, vh)), damit hohe Titel auf 16:9-Beamern die Zeilen nicht aus dem Bild drücken.
 */
.stage-frame--rating {
  justify-content: flex-start;
  gap: 1.2vh;
  padding-top: max(2vh, 12px);
  padding-bottom: max(2vh, 12px);
  box-sizing: border-box;
}

.stage-frame--rating.stage-frame--regular {
  padding-inline-end: max(var(--stage-pad-x), var(--stage-chrome-right, 0px));
  padding-bottom: max(2vh, 12px);
}

.stage-frame--rating .stage-question {
  max-width: 24em;
  font-size: clamp(26px, min(3.8vw, 7vh), calc(64 * var(--su, 1px)));
  line-height: 1.15;
}

.stage-frame--rating .stage-avg {
  font-size: clamp(40px, min(6vw, 11vh), calc(100 * var(--su, 1px)));
}

.stage-frame--rating .stage-avg-scale {
  font-size: 0.32em;
}

.stage-frame--rating .stage-results {
  flex: 1 1 0;
  min-height: 0;
  width: min(calc(1100 * var(--su, 1px)), 100%);
  max-width: none;
  gap: 0.8vh;
}

.stage-frame--regular.stage-frame--rating:has(.stage-slide-qr-overlay) .stage-results {
  max-width: none;
}

/*
 * Skala als Säulendiagramm (stage/stageRatingColumns.js): Säulen 1 → n füllen die Restfläche, Farbverlauf rot → grau →
 * grün, über jeder Säule Prozent (groß) und Stimmen (klein), darunter die Stufe; senkrechte Linie am Mittelwert.
 */
.stage-frame--rating .stage-results.stage-rating-columns {
  width: min(calc(1400 * var(--su, 1px)), 100%);
  display: flex;
  flex-direction: column;
}
.rating-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(10 * var(--su, 1px));
}
.rating-cols__plot,
.rating-cols__labels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, calc(22 * var(--su, 1px)));
}
.rating-cols__plot {
  align-items: end;
  min-height: 0;
  border-bottom: 2px solid #d0d4d9;
}
.rating-col {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}
.rating-col__bar {
  /* Höhe nach Anteil; die Zahlen darüber haben ihren eigenen Platz (oben ~3,2 em). */
  width: 100%;
  height: calc((100% - 3.2em) * var(--h, 0));
  min-height: 0;
  border-radius: calc(10 * var(--su, 1px)) calc(10 * var(--su, 1px)) 0 0;
  background: var(--c, #8a939c);
  opacity: 0.82;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.rating-col.is-leading .rating-col__bar {
  opacity: 1;
}
.rating-col.is-zero .rating-col__bar {
  height: 0;
}
.rating-col__pct {
  font-size: clamp(18px, min(2.6vw, 4.6vh), calc(48 * var(--su, 1px)));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #111111;
}
.rating-col.is-zero .rating-col__pct {
  color: #9aa1a9;
}
.rating-col__votes {
  margin: 0.15em 0 0.3em;
  font-size: clamp(12px, min(1.2vw, 2.2vh), calc(22 * var(--su, 1px)));
  font-weight: 700;
  color: #555555;
  white-space: nowrap;
}
.rating-col__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
  font-size: clamp(16px, min(2vw, 3.6vh), calc(36 * var(--su, 1px)));
  font-weight: 800;
  line-height: 1.1;
}
.rating-col__word {
  font-size: 0.62em;
  font-weight: 700;
  color: #444444;
  overflow-wrap: break-word;
}
.rating-col__label .rating-stars-label {
  font-size: 0.6em;
  color: #f5b301;
  letter-spacing: 0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rating-cols__avg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 0;
  border-left: 3px dashed #111111;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rating-cols__avg[hidden] {
  display: none;
}
.rating-cols__avglabel {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -110%);
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: clamp(14px, min(1.5vw, 2.6vh), calc(26 * var(--su, 1px)));
  font-weight: 800;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .rating-col__bar,
  .rating-cols__avg {
    transition: none;
  }
}
/* Mittelwert über den Säulen: Abstand, damit die Beschriftung der Linie Platz hat. */
.stage-frame--rating .rating-cols {
  padding-top: 2.2em;
}

/* Kurze Lesehilfe über einer Ergebnisliste (Ranking: „kleiner ist besser“, 100 Punkte: Verteilung). */
.stage-results-note {
  margin: 0 0 0.5em;
  font-size: clamp(14px, min(1.5vw, 2.6vh), calc(24 * var(--su, 1px)));
  font-weight: 700;
  color: #555555;
}
/* 100 Punkte: ein Balken über die volle Breite, Anteile nach Durchschnitt */
.points-budget {
  margin-bottom: clamp(8px, 1.6vh, calc(24 * var(--su, 1px)));
}
.points-budget__bar {
  display: flex;
  height: clamp(28px, 6vh, calc(72 * var(--su, 1px)));
  border-radius: 999px;
  overflow: hidden;
  background: #e8e8e8;
}
.points-budget__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 0%);
  min-width: 0;
  overflow: hidden;
  font-size: clamp(12px, min(1.4vw, 2.4vh), calc(24 * var(--su, 1px)));
  font-weight: 800;
  white-space: nowrap;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.points-budget__seg + .points-budget__seg {
  border-left: 3px solid #ffffff;
}
.points-budget__seg[data-color="0"] { background: var(--c1, #b42318); color: var(--c1-ink, #fff); }
.points-budget__seg[data-color="1"] { background: var(--c2, #175cd3); color: var(--c2-ink, #fff); }
.points-budget__seg[data-color="2"] { background: var(--c3, #027a48); color: var(--c3-ink, #fff); }
.points-budget__seg[data-color="3"] { background: var(--c4, #93370d); color: var(--c4-ink, #fff); }
.points-budget__seg[data-color="4"] { background: var(--c5, #6941c6); color: var(--c5-ink, #fff); }
.points-budget__seg[data-color="5"] { background: var(--c6, #155eef); color: var(--c6-ink, #fff); }
.points-budget__seg span {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 0.4em;
}
/* Ranking: Medaille statt „1.“ — gleiche Spaltenbreite */
.poll--stage .rank-place {
  text-align: center;
}
/*
 * Bildauswahl: Die Karten teilen sich die verfügbare Höhe (mit angehefteter Leiste wurde sonst die untere Reihe
 * abgeschnitten). Entwürfe nicht beschneiden (contain), ohne graue Kästen drumherum; Siegerkarte mit Rahmen.
 */
.stage-choice-body .stage-results.stage-images {
  height: 100%;
}
.stage-choice-body .stage-images .image-choice-results {
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
}
.stage-choice-body .stage-images .image-result-card {
  min-height: 0;
}
.stage-choice-body .stage-images .image-choice-results .image-result-card__frame {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  background: transparent;
}
.stage-images .image-result-card {
  border-radius: 1.1rem;
  box-shadow: 0 0 0 4px transparent;
  transition: box-shadow 0.4s ease;
}
.stage-images .image-result-card.is-leading {
  box-shadow: 0 0 0 4px var(--primary-color, #007cc1);
}
.stage-images .image-result-card.is-leading .image-result-card__caption strong::after {
  content: " ✓";
  color: #1b7a3a;
}

/* Picker mit vielen Optionen: Zeile mit den übrigen Optionen unter den Kacheln (pickerCondense.js). */
.stage-picker-rest {
  margin: 0;
  text-align: center;
  font-size: clamp(14px, min(1.5vw, 2.6vh), calc(24 * var(--su, 1px)));
  font-weight: 700;
  color: #555555;
}

/* Blättern bei vielen Einträgen (stagePager.js): Punkte unten mittig, aktuelle Seite gefüllt. */
.stage-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--su, 1px));
  min-height: calc(36 * var(--su, 1px));
  margin-top: calc(8 * var(--su, 1px));
}
.stage-pager__dot {
  width: max(12px, calc(14 * var(--su, 1px)));
  height: max(12px, calc(14 * var(--su, 1px)));
  padding: 0;
  border: 2px solid #111111;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.stage-pager__dot[aria-current="true"] {
  background: #111111;
}
.stage-pager__label {
  margin-left: 0.6em;
  font-size: max(14px, calc(18 * var(--su, 1px)));
  font-weight: 700;
  color: #555555;
  font-variant-numeric: tabular-nums;
}
.stage-pager[data-paused="1"] .stage-pager__label::after {
  content: " ⏸";
}
@media (prefers-reduced-motion: no-preference) {
  .is-paging > :not([hidden]) {
    animation: stage-page-in 0.45s ease both;
  }
  .open-text-card.is-new,
  .stage-qa-item.is-new {
    animation: stage-entry-new 1.6s ease both;
  }
}
@keyframes stage-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes stage-entry-new {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 124, 193, 0.55);
    transform: scale(0.96);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(0, 124, 193, 0.25);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 124, 193, 0);
    transform: none;
  }
}
.open-text-cards--stage .open-text-card[hidden] {
  display: none;
}

/* ---- Live-Puls (stage/stageLive.js): Zähler, Teilnahme-Anteil, Stimmen-Teppich, Aufdeck-Moment, Lobby ---- */
.stage-vote-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--su, 1px));
}
.stage-vote-count.is-bump {
  animation: stage-count-bump 0.5s ease;
}
@keyframes stage-count-bump {
  30% {
    transform: scale(1.12);
    color: var(--primary-color, #007cc1);
  }
}
.stage-participation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--su, 1px));
  font-size: clamp(14px, min(1.4vw, 2.4vh), calc(22 * var(--su, 1px)));
  font-weight: 700;
  color: #555555;
}
.stage-participation__bar {
  position: relative;
  width: clamp(160px, 22vw, calc(420 * var(--su, 1px)));
  height: max(6px, calc(8 * var(--su, 1px)));
  border-radius: 999px;
  background: #e8e8e8;
  overflow: hidden;
}
.stage-participation__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: inherit;
  background: var(--primary-color, #007cc1);
  transition: width 0.6s ease;
}
/* „Alle haben geantwortet“: grünes Häkchen, poppt einmal auf und bleibt dann ruhig */
.stage-all-answered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--su, 1px));
  margin-top: calc(6 * var(--su, 1px));
  font-size: clamp(14px, min(1.5vw, 2.5vh), calc(24 * var(--su, 1px)));
  font-weight: 800;
  color: #1b7a3a;
}
.stage-all-slot,
.stage-participation-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}
.stage-all-answered__icon {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}
.stage-all-answered.is-pop .stage-all-answered__icon {
  animation: stage-all-answered-pop 420ms cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes stage-all-answered-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-all-answered.is-pop .stage-all-answered__icon { animation: none; }
}
.stage-participation.is-almost-all {
  color: #1b7a3a;
}
.stage-participation.is-almost-all .stage-participation__bar::after {
  background: #1b7a3a;
}
/* Stimmen-Teppich: ein Punkt je Stimme, solange Ergebnisse verborgen sind */
.stage-crowd {
  flex: 1 1 auto;
  min-height: 0;
  width: min(calc(1200 * var(--su, 1px)), 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--su, 1px));
  overflow: hidden;
}
.stage-crowd__field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: max(5px, calc(8 * var(--su, 1px)));
  max-width: 100%;
}
.stage-crowd__dot {
  width: max(10px, calc(var(--dot, 18) * var(--su, 1px)));
  height: max(10px, calc(var(--dot, 18) * var(--su, 1px)));
  border-radius: 50%;
  background: hsl(var(--hue, 200) 62% 48%);
}
.stage-crowd__note {
  margin: 0;
  font-size: max(13px, calc(16 * var(--su, 1px)));
  color: #666666;
}
@media (prefers-reduced-motion: no-preference) {
  .stage-crowd__dot.is-new {
    animation: stage-dot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  /* Aufdeck-Moment: Zeilen bzw. Säulen bauen sich gestaffelt auf, die Balken wachsen langsamer */
  .stage-frame.is-revealing .poll-row,
  .stage-frame.is-revealing .rating-col,
  .stage-frame.is-revealing .stage-quiz-opt,
  .stage-frame.is-revealing .image-result-card,
  .stage-frame.is-revealing .open-text-card {
    animation: stage-reveal-in 0.55s ease both;
  }
  .stage-frame.is-revealing :is(.poll-row, .rating-col, .stage-quiz-opt, .image-result-card, .open-text-card):nth-child(2) { animation-delay: 0.12s; }
  .stage-frame.is-revealing :is(.poll-row, .rating-col, .stage-quiz-opt, .image-result-card, .open-text-card):nth-child(3) { animation-delay: 0.24s; }
  .stage-frame.is-revealing :is(.poll-row, .rating-col, .stage-quiz-opt, .image-result-card, .open-text-card):nth-child(4) { animation-delay: 0.36s; }
  .stage-frame.is-revealing :is(.poll-row, .rating-col, .stage-quiz-opt, .image-result-card, .open-text-card):nth-child(5) { animation-delay: 0.48s; }
  .stage-frame.is-revealing :is(.poll-row, .rating-col, .stage-quiz-opt, .image-result-card, .open-text-card):nth-child(n + 6) { animation-delay: 0.6s; }
  .stage-frame.is-revealing .poll-fill,
  .stage-frame.is-revealing .rating-col__bar {
    transition-duration: 1.2s;
  }
  .stage-frame.is-revealing .poll-row.is-leading .poll-label,
  .stage-frame.is-revealing .rating-col.is-leading .rating-col__pct,
  .stage-frame.is-revealing .stage-quiz-opt.is-correct {
    animation: stage-reveal-in 0.55s ease both, stage-crown 0.6s ease 1.4s both;
  }
}
@keyframes stage-dot-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes stage-reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes stage-crown {
  40% {
    transform: scale(1.06);
  }
}
/* Lobby: großer QR-Code, Kurzlink, Zähler der Verbundenen */
.stage-lobby-join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, calc(72 * var(--su, 1px)));
  flex-wrap: wrap;
}
.stage-lobby-qr {
  width: min(42vh, calc(380 * var(--su, 1px)));
  height: auto;
  aspect-ratio: 1 / 1;
  padding: calc(14 * var(--su, 1px));
  border-radius: calc(18 * var(--su, 1px));
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(17, 17, 17, 0.12);
}
.stage-lobby-info {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--su, 1px));
  text-align: left;
}
.stage-lobby-url {
  margin: 0;
  font-size: clamp(22px, min(2.8vw, 5vh), calc(48 * var(--su, 1px)));
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.stage-lobby-count {
  margin: 0;
  font-size: clamp(28px, min(4vw, 7vh), calc(72 * var(--su, 1px)));
  font-weight: 800;
  color: var(--primary-color, #007cc1);
  font-variant-numeric: tabular-nums;
}
.stage-lobby-info .stage-wait {
  margin: 0;
  text-align: left;
  font-size: clamp(20px, min(2.2vw, 4vh), calc(36 * var(--su, 1px)));
  color: #555555;
}

/* ---- Ranking, 100 Punkte, Termine: Platz, Termin und Zusatz in der Beschriftung ---- */
.stage-results .rank-place {
  display: inline-block;
  min-width: 1.6em;
  color: #555555;
  font-variant-numeric: tabular-nums;
}
.stage-results .slot-when {
  font-variant-numeric: tabular-nums;
}
.stage-results .slot-note {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  color: #555555;
}

/* ---- Freitext auf der Leinwand: große, farbig markierte Karten; die Schriftgröße setzt stage.js so, dass alles passt ---- */
.stage-choice-results.stage-open-list {
  width: min(calc(1500 * var(--su, 1px)), 100%);
  display: block;
}
.open-text-cards--stage {
  --ot-font: clamp(20px, 2.4vw, calc(40 * var(--su, 1px)));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(384 * var(--su, 1px)), 100%), 1fr));
  gap: calc(var(--ot-font) * 0.5);
  align-content: start;
  overflow: hidden;
}
.open-text-cards--stage .open-text-card {
  padding: calc(var(--ot-font) * 0.5) calc(var(--ot-font) * 0.8);
  border: 0;
  border-left: 0.5rem solid var(--c1, #b42318);
  border-radius: 1rem;
  background: #f4f6f8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  font-size: var(--ot-font);
  font-weight: 650;
  line-height: 1.2;
  color: #111111;
  overflow-wrap: anywhere;
}
.open-text-cards--stage .open-text-card p {
  margin: 0;
}
.open-text-cards--stage .open-text-card[data-accent="1"] { border-left-color: var(--c2, #175cd3); }
.open-text-cards--stage .open-text-card[data-accent="2"] { border-left-color: var(--c3, #027a48); }
.open-text-cards--stage .open-text-card[data-accent="3"] { border-left-color: var(--c4, #93370d); }
.open-text-cards--stage .open-text-card[data-accent="4"] { border-left-color: var(--c5, #6941c6); }
.open-text-cards--stage .open-text-card[data-accent="5"] { border-left-color: var(--c6, #155eef); }
.open-text-card__count {
  display: inline-block;
  margin-top: 0.3em;
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 0.6em;
  font-weight: 700;
}

/* ---- Entwürfe (Bildwahl): Bilder groß nebeneinander, darunter Name, Stimmen und Balken ---- */
.stage-results.stage-images {
  width: min(calc(1500 * var(--su, 1px)), 100%);
  display: block;
}
.stage-images .image-choice-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, calc(38.4 * var(--su, 1px)));
  align-items: start;
}
.stage-images .image-choice-results[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.stage-images .image-choice-results[data-count="3"],
.stage-images .image-choice-results[data-count="5"],
.stage-images .image-choice-results[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-images .image-choice-results[data-count="4"] .image-result-card__frame,
.stage-images .image-choice-results[data-count="5"] .image-result-card__frame,
.stage-images .image-choice-results[data-count="6"] .image-result-card__frame {
  height: clamp(6rem, 20vh, calc(256 * var(--su, 1px)));
}
.stage-images .image-result-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.stage-images .image-result-card__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(8rem, 38vh, calc(480 * var(--su, 1px)));
  border-radius: 1rem;
  background: #f1f3f5;
  overflow: hidden;
}
.stage-images .image-result-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.stage-images .image-result-card__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: clamp(22px, 2.2vw, calc(36 * var(--su, 1px)));
  text-align: left;
}
.stage-images .image-result-card__caption span {
  font-size: 0.75em;
  font-weight: 600;
  color: #444444;
  white-space: nowrap;
}
.stage-images .image-result-card .poll-track {
  height: clamp(1.4rem, 2.6vh, calc(35.2 * var(--su, 1px)));
  background: #e8e8e8;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.stage-images .image-result-card .poll-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: auto;
  width: var(--bar-width, 0%);
  border-radius: inherit;
}
.stage-images .poll-fill[data-color="0"] { background: var(--c1, #b42318); }
.stage-images .poll-fill[data-color="1"] { background: var(--c2, #175cd3); }
.stage-images .poll-fill[data-color="2"] { background: var(--c3, #027a48); }
.stage-images .poll-fill[data-color="3"] { background: var(--c4, #93370d); }
.stage-images .poll-fill[data-color="4"] { background: var(--c5, #6941c6); }
.stage-images .poll-fill[data-color="5"] { background: var(--c6, #155eef); }
/* Platz hängend einrücken: Umbrüche beginnen unter dem Namen, nicht unter der Zahl (Zeilenbegrenzung bleibt wirksam). */
.stage-results .poll-label--rank {
  padding-left: 1.7em;
  text-indent: -1.7em;
}
.stage-results .poll-label--rank .rank-place {
  display: inline-block;
  width: 1.7em;
  min-width: 0;
  text-indent: 0;
}
.stage-results .poll-label--rank .rank-text {
  overflow-wrap: break-word;
}

/* Zeilenlisten (Ranking, 100 Punkte, Termine): Zahlen und Beschriftung nicht größer als nötig, damit Namen ungetrennt bleiben */
.stage-choice-layout--list .stage-results .poll-pct {
  font-size: min(var(--mc-pct-size, 40px), 2.6vw);
}
.stage-choice-layout--list .stage-results .poll-label {
  font-size: min(var(--mc-label-size, 36px), 3.1vw);
}


/* Vor dem Start einer Frage: Frage oben, großer QR-Code mittig darunter (kein halbfertiges Ergebnis). */
.stage-frame--waiting .stage-slide-qr-overlay {
  left: 50%;
  right: auto;
  top: 56%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.stage-frame--waiting .stage-slide-qr-overlay .stage-slide-qr-card {
  max-width: min(calc(512 * var(--su, 1px)), 80vw);
  padding: 1rem 1.25rem 0.9rem;
}
.stage-frame--waiting .stage-slide-qr-overlay .event-countdown-qr-canvas {
  width: min(calc(360 * var(--su, 1px)), 36vh);
}
.stage-frame--waiting .stage-slide-qr-overlay .stage-slide-qr-title {
  display: none;
}
.stage-frame--waiting .stage-slide-qr-overlay .stage-slide-qr-under-label {
  margin: 0.5rem 0 0.15rem;
  font-size: clamp(1.1rem, 2.1vw, calc(27.2 * var(--su, 1px)));
  font-weight: 700;
  text-align: center;
}
.stage-frame.stage-frame--waiting {
  align-items: center;
  justify-content: flex-start;
  gap: 1.5vh;
  padding: 5vh var(--stage-pad-x) 0;
}
.stage-frame.stage-frame--waiting .stage-question {
  width: 100%;
  max-width: 20em;
  font-size: clamp(36px, 4.6vw, calc(72 * var(--su, 1px)));
  text-align: center;
}
.stage-frame.stage-frame--waiting .stage-slide-qr-overlay {
  top: 60%;
}

/* Session abgeschlossen: Danke und Zahlen, mittig */
.stage-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  text-align: center;
}
.stage-closed__line {
  margin: 0;
  font-size: clamp(24px, 3vw, calc(48 * var(--su, 1px)));
  font-weight: 600;
  color: #444444;
}


/* Warteraum der Leinwand: Name der Session über „Bitte warten“ */
.stage-lobby-title {
  margin: 0 0 0.5em;
  max-width: 22em;
  font-size: clamp(28px, 4.2vw, calc(68 * var(--su, 1px)));
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Hilfestellung: dezente Zeile unten links über der Steuerleiste (nur auf steuerbarer Leinwand, siehe stageHints.js) */
.view-stage > .stage-hint {
  position: absolute;
  left: max(16px, var(--stage-pad-x));
  bottom: calc(var(--stage-root-bar-clear, 0px) + 4px);
  z-index: 7;
  max-width: min(calc(736 * var(--su, 1px)), 64vw);
  padding: 0.4em 0.95em;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.8);
  color: #ffffff;
  font-size: clamp(15px, 1.3vw, calc(20 * var(--su, 1px)));
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Der Inhalt rückt etwas nach oben, damit der Hinweis darunter Platz hat (vor dem Start steht die Frage ohnehin oben). */
.view-stage:has(> .stage-hint.is-visible) > #stage-frame:not(.stage-frame--waiting) {
  padding-bottom: calc(var(--stage-pad-y) + 1.75rem);
}
/* Vor dem Start steht die große QR-Karte (höchstens 32rem breit) mittig: der Hinweis nimmt nur den Platz links davon und bricht sonst um. */
.view-stage:has(.stage-frame--waiting .stage-slide-qr-overlay) > .stage-hint {
  max-width: max(11rem, calc(50vw - 16rem - 1rem - max(16px, var(--stage-pad-x, 0px))));
}
.view-stage > .stage-hint.is-visible {
  opacity: 1;
  transform: none;
}
.view-stage > .stage-hint[data-hint=""] {
  display: none;
}
.stage-hint__line {
  margin: 0;
}
.stage-hint__line + .stage-hint__line {
  margin-top: 0.3em;
  font-size: 0.92em;
  opacity: 0.88;
}
.stage-hint kbd {
  display: inline-block;
  min-width: 1.75em;
  margin: 0 0.1em;
  padding: 0.05em 0.45em 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 2px;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.16);
  font: inherit;
  font-weight: 700;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .view-stage > .stage-hint {
    transition: none;
    transform: none;
  }
}

/* Zugangspasswort auf der Leinwand: oben mittig, groß genug für den Beamer, ohne Frage und QR zu verdecken. */
.stage-access {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  color: var(--text, #111);
  border: 1px solid color-mix(in srgb, var(--text, #111) 18%, transparent);
  font-size: clamp(1rem, 1.6vw, calc(24 * var(--su, 1px)));
  z-index: 3;
}
.stage-access[hidden] {
  display: none;
}
.stage-access__password {
  font-size: clamp(1.5rem, 3vw, calc(44 * var(--su, 1px)));
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Quiz: Form und Farbe je Antwort (● ▲ ■ ◆ ★ ✚) — dieselben Zeichen wie auf dem Handy, damit man vom Bildschirm zum Handy findet. */
.stage-quiz-opt[data-index] .stage-quiz-opt__label::before {
  display: inline-block;
  width: 1.2em;
  margin-right: 0.35em;
  text-align: center;
}
.stage-quiz-opt[data-index="0"] .stage-quiz-opt__label::before { content: "●"; color: var(--c1); }
.stage-quiz-opt[data-index="1"] .stage-quiz-opt__label::before { content: "▲"; color: var(--c2); }
.stage-quiz-opt[data-index="2"] .stage-quiz-opt__label::before { content: "■"; color: var(--c3); }
.stage-quiz-opt[data-index="3"] .stage-quiz-opt__label::before { content: "◆"; color: var(--c4); }
.stage-quiz-opt[data-index="4"] .stage-quiz-opt__label::before { content: "★"; color: var(--c5); }
.stage-quiz-opt[data-index="5"] .stage-quiz-opt__label::before { content: "✚"; color: var(--c6); }
.stage-quiz-opt.is-correct[data-index] .stage-quiz-opt__label::before {
  color: inherit;
}

/* Ergebnisansicht (?review=1): Ergebnisse nachlesen — keine Live-Elemente (Teilnahme, Stimmen-Teppich, Reaktionen), dafür eine
   schmale Leiste zum Blättern im Vollbild. */
.view-stage[data-stage-review="1"] .stage-participation,
.view-stage[data-stage-review="1"] .stage-crowd,
.view-stage[data-stage-review="1"] .reaction-layer,
.view-stage[data-stage-review="1"] .stage-clock {
  display: none !important;
}
.stage-review-nav {
  position: fixed;
  left: 50%;
  bottom: calc(16 * var(--su, 1px));
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--su, 1px));
  padding: calc(8 * var(--su, 1px)) calc(14 * var(--su, 1px));
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font-size: calc(18 * var(--su, 1px));
}
.stage-review-nav__label {
  font-weight: 600;
  opacity: 0.85;
}
.stage-review-nav__btn {
  width: calc(44 * var(--su, 1px));
  height: calc(44 * var(--su, 1px));
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: calc(18 * var(--su, 1px));
  cursor: pointer;
}
.stage-review-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.stage-review-nav__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}