/* ==========================================================================
   Kapitel
   --------------------------------------------------------------------------
   Die Buehne ist 1920 x 888 Design-Einheiten gross (Kopf- und Fusszeile
   liegen ausserhalb). Alle Positionen unten beziehen sich darauf.
   ========================================================================== */

.scene {
  opacity: 0;
  transition: opacity 460ms var(--ease-out);
}
.scene.is-in { opacity: 1; }
.scene.is-out { opacity: 0; transition-duration: 400ms; }

/* Grundbausteine des Einblendens */
.fade {
  opacity: 0;
  transform: translateY(calc(14 * var(--u)));
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-soft);
}
.fade.is-in { opacity: 1; transform: none; }

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-soft);
}
.word.is-in { opacity: 1; transform: none; }

/* Schutzzeichen: klein und hochgestellt, sonst dominiert das ™ die Zeile */
.tm {
  font-size: 0.4em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.06em;
  letter-spacing: 0;
}

/* Gemeinsamer Kapitelkopf */
.scene__head {
  position: absolute;
  left: calc(768 * var(--u));
  top: calc(40 * var(--u));
}
.scene__head--corner {
  left: calc(64 * var(--u));
  top: calc(28 * var(--u));
}
.scene__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(50 * var(--u));
  letter-spacing: -0.015em;
  margin-top: calc(10 * var(--u));
  color: var(--text);
}
.kicker { margin-bottom: calc(2 * var(--u)); }

/* ==========================================================================
   INTRO
   ========================================================================== */

.intro__text {
  position: absolute;
  left: calc(1000 * var(--u));
  top: calc(150 * var(--u));
  width: calc(840 * var(--u));
}
.intro__kicker { margin-bottom: calc(24 * var(--u)); }

.intro__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(104 * var(--u));
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
}
.intro__subtitle {
  margin-top: calc(14 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(30 * var(--u));
  letter-spacing: 0.01em;
  color: var(--text-3);
}
.intro__rule {
  height: calc(3 * var(--u));
  width: calc(120 * var(--u));
  margin: calc(38 * var(--u)) 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.intro__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(36 * var(--u));
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--text);
  min-height: calc(96 * var(--u));
}
.intro__lead {
  margin-top: calc(28 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}

/* ==========================================================================
   MERKMALE
   ========================================================================== */

.features__list {
  position: absolute;
  left: calc(768 * var(--u));
  top: calc(160 * var(--u));
  width: calc(1088 * var(--u));
  height: calc(688 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.fcard {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  opacity: 0;
  transform: translateY(calc(20 * var(--u)));
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-soft);
}
.fcard.is-in { opacity: 1; transform: none; }

.fcard__icon {
  flex: 0 0 auto;
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--surface-sunk);
  border-radius: var(--radius);
}
.icon {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
}

.fcard__body { flex: 1; min-width: 0; }
.fcard__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(29 * var(--u));
  letter-spacing: -0.01em;
  color: var(--text);
}
.fcard__text {
  margin-top: calc(6 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.45;
  color: var(--text-2);
}
.fcard__index {
  flex: 0 0 auto;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  color: var(--text-4);
}

/* ==========================================================================
   KENNZAHLEN
   ========================================================================== */

.specs__grid {
  position: absolute;
  left: calc(664 * var(--u));
  top: calc(246 * var(--u));
  width: calc(1192 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Mindesthoehe statt fester Hoehe: Zeilen ohne Zusatzzeile bleiben kompakt,
     Zeilen mit Anmerkung wachsen mit — sonst steht die halbe Karte leer. */
  grid-auto-rows: minmax(calc(152 * var(--u)), auto);
  gap: calc(32 * var(--u));
}

.metric {
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  opacity: 0;
  transform: translateY(calc(20 * var(--u)));
  transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-soft);
}
.metric.is-in { opacity: 1; transform: none; }

.metric__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(17 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.metric__value {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--u));
  margin-top: calc(14 * var(--u));
}
.metric__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(58 * var(--u));
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Bereiche wie "100 – 400" brauchen weniger Groesse, sonst brechen sie um */
.metric__num--text { font-size: calc(46 * var(--u)); }

.metric__unit {
  font-family: var(--font-mono);
  font-size: calc(19 * var(--u));
  color: var(--text-3);
}
.metric__bar {
  margin-top: calc(18 * var(--u));
  height: calc(4 * var(--u));
  background: var(--surface-sunk);
  border-radius: calc(2 * var(--u));
  overflow: hidden;
}
.metric__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.metric__note {
  margin-top: calc(14 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.4;
  color: var(--text-3);
}

/* ==========================================================================
   AUFBAU / HOTSPOTS
   ========================================================================== */

.callout {
  position: absolute;
  right: calc(64 * var(--u));
  top: calc(228 * var(--u));
  width: calc(556 * var(--u));
  min-height: calc(300 * var(--u));
  padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(38 * var(--u));
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateX(calc(20 * var(--u)));
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-soft);
}
.callout.is-in { opacity: 1; transform: none; }

.callout__index {
  font-size: calc(16 * var(--u));
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.callout__title {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(36 * var(--u));
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text);
}
.callout__text {
  margin-top: calc(18 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.55;
  color: var(--text-2);
}

/* ==========================================================================
   FAZIT
   ========================================================================== */

.outro__list {
  position: absolute;
  left: calc(768 * var(--u));
  top: calc(176 * var(--u));
  width: calc(1088 * var(--u));
  list-style: none;
}
.outro__item {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--u));
  padding: calc(26 * var(--u)) 0;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(calc(16 * var(--u)));
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-soft);
}
.outro__item.is-in { opacity: 1; transform: none; }

.outro__mark {
  position: relative;
  flex: 0 0 auto;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--accent);
}
/* Haken im Punkt */
.outro__mark::after {
  content: '';
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(7 * var(--u));
  width: calc(9 * var(--u));
  height: calc(5 * var(--u));
  border-left: calc(2 * var(--u)) solid #fff;
  border-bottom: calc(2 * var(--u)) solid #fff;
  transform: rotate(-45deg);
}
.outro__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(32 * var(--u));
  line-height: 1.32;
  color: var(--text);
}

.outro__foot {
  position: absolute;
  left: calc(768 * var(--u));
  bottom: calc(74 * var(--u));
  width: calc(1088 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: calc(24 * var(--u)) calc(32 * var(--u));
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(calc(20 * var(--u)));
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-soft);
}
.outro__foot.is-in { opacity: 1; transform: none; }

.outro__qr {
  flex: 0 0 auto;
  padding: calc(10 * var(--u));
  background: var(--surface-sunk);
  border-radius: var(--radius);
}
.outro__qrimg {
  width: calc(112 * var(--u));
  height: calc(112 * var(--u));
}

.outro__ctatext {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--text);
}
.outro__ctasub {
  margin-top: calc(8 * var(--u));
  font-size: calc(20 * var(--u));
  color: var(--text-3);
}

.outro__loop {
  position: absolute;
  right: calc(64 * var(--u));
  top: calc(52 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
.outro__looptext {
  font-size: calc(16 * var(--u));
  color: var(--text-3);
}
.outro__looptrack {
  width: calc(120 * var(--u));
  height: calc(3 * var(--u));
  background: var(--line);
  border-radius: calc(2 * var(--u));
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-size: calc(var(--p, 0) * 100%) 100%;
  background-repeat: no-repeat;
}

/* ==========================================================================
   ATTRACT
   ========================================================================== */

.scene--attract { z-index: 17; }

/* Ablagefeld auf der Bank — angedeutete Aufsicht, kein Radar */
.attract__ring {
  position: absolute;
  left: 50%;
  top: calc(316 * var(--u));
  width: calc(400 * var(--u));
  height: calc(400 * var(--u));
  margin-left: calc(-200 * var(--u));
  margin-top: calc(-200 * var(--u));
  display: grid;
  place-items: center;
}
.attract__ring-plate {
  position: absolute;
  inset: calc(112 * var(--u));
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.attract__ring-r {
  position: absolute;
  border-radius: 50%;
  border: calc(1.5 * var(--u)) solid rgb(var(--accent-rgb) / 0.4);
}
.attract__ring-r--1 { inset: 0;                    animation: ring-pulse 4s ease-out infinite; }
.attract__ring-r--2 { inset: calc(56 * var(--u));  animation: ring-pulse 4s ease-out 1.4s infinite; }

@keyframes ring-pulse {
  0%   { transform: scale(0.68); opacity: 0; }
  22%  { opacity: 0.85; }
  100% { transform: scale(1.08); opacity: 0; }
}

.attract__ring-icon {
  position: relative;
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  color: var(--accent);
}
.attract__ring-icon svg { width: 100%; height: 100%; }

.attract__centre {
  position: absolute;
  left: 50%;
  top: calc(566 * var(--u));
  width: calc(1560 * var(--u));
  margin-left: calc(-780 * var(--u));
  text-align: center;
}
.attract__kicker {
  font-size: calc(18 * var(--u));
  letter-spacing: 0.3em;
}
.attract__cta {
  margin-top: calc(20 * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(64 * var(--u));
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--text);
}
.attract__hint {
  margin-top: calc(20 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 400;
  color: var(--text-2);
}

.attract__ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(34 * var(--u));
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.attract__tickerinner {
  display: flex;
  gap: calc(64 * var(--u));
  width: max-content;
  animation: ticker 42s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }

.attract__chip {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  white-space: nowrap;
}
.attract__chipdot {
  align-self: center;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--accent);
}
.attract__chipname {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(23 * var(--u));
  color: var(--text);
}
.attract__chipsub {
  font-size: calc(19 * var(--u));
  color: var(--text-3);
}

.attract__unknown {
  position: absolute;
  left: 50%;
  top: calc(44 * var(--u));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(20 * var(--u)) calc(36 * var(--u));
  box-shadow: var(--shadow-2);
  text-align: center;
}
.attract__unknown::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(3 * var(--u));
  background: var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.attract__unknownlabel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(19 * var(--u));
  color: var(--warn);
}
.attract__unknownuid {
  font-size: calc(32 * var(--u));
  letter-spacing: 0.14em;
  color: var(--text);
}
.attract__unknownhint { font-size: calc(18 * var(--u)); color: var(--text-3); }

/* ==========================================================================
   ERKENNUNG (die zwei Sekunden nach dem Auflegen)
   ========================================================================== */

.scene--boot { z-index: 19; }

.boot__card {
  position: absolute;
  left: 50%;
  top: calc(240 * var(--u));
  width: calc(700 * var(--u));
  margin-left: calc(-350 * var(--u));
  padding: calc(44 * var(--u)) calc(52 * var(--u)) calc(40 * var(--u));
  box-shadow: var(--shadow-3);
}
.boot__kicker { font-size: calc(18 * var(--u)); letter-spacing: 0.28em; }
.boot__name {
  margin-top: calc(14 * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(64 * var(--u));
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.boot__uid {
  margin-top: calc(12 * var(--u));
  font-size: calc(18 * var(--u));
  color: var(--text-4);
}

.boot__steps {
  margin-top: calc(34 * var(--u));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.boot__step {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  opacity: 0.3;
  transition: opacity 400ms var(--ease-out);
}
.boot__step.is-in { opacity: 1; }
.boot__check {
  position: relative;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--line-strong);
  transition: background-color 300ms, border-color 300ms;
}
.boot__step.is-in .boot__check {
  background: var(--accent);
  border-color: var(--accent);
}
.boot__step.is-in .boot__check::after {
  content: '';
  position: absolute;
  left: calc(6 * var(--u));
  top: calc(5 * var(--u));
  width: calc(8 * var(--u));
  height: calc(4 * var(--u));
  border-left: calc(2 * var(--u)) solid #fff;
  border-bottom: calc(2 * var(--u)) solid #fff;
  transform: rotate(-45deg);
}
.boot__steptext {
  font-size: calc(24 * var(--u));
  color: var(--text-2);
}

.boot__bar {
  margin-top: calc(36 * var(--u));
  height: calc(4 * var(--u));
  background: var(--surface-sunk);
  border-radius: calc(2 * var(--u));
  overflow: hidden;
}
.boot__barfill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  animation: boot-fill 2200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes boot-fill {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ==========================================================================
   RATE-MODUS — Frage im Attract-Loop
   --------------------------------------------------------------------------
   Die Frage muss aus fuenf Metern lesbar sein, die Beschreibung darunter aus
   zwei. Deshalb bekommt die Frage die volle Zeilenhoehe des Attract-Titels
   und darf im Gegensatz zu ihm umbrechen — "Ein Kollagendrink, der sich kalt
   einruehrt" passt nicht in eine Zeile und soll es auch nicht.
   ========================================================================== */

/* Die Frage braucht zwei Zeilen und darunter noch Beschreibung, Aufforderung
   und Fortschritt. Ring und Textblock ruecken dafuer nach oben — sonst
   schiebt sich die Beschreibung in die Punktleiste. */
.scene--attract.is-quiz .attract__ring {
  top: calc(238 * var(--u));
  width: calc(300 * var(--u));
  height: calc(300 * var(--u));
  margin-left: calc(-150 * var(--u));
  margin-top: calc(-150 * var(--u));
}
.scene--attract.is-quiz .attract__ring-plate { inset: calc(84 * var(--u)); }
.scene--attract.is-quiz .attract__ring-icon {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}

.scene--attract.is-quiz .attract__centre {
  top: calc(422 * var(--u));
}
.attract__cta--quiz {
  white-space: normal;
  max-width: calc(1280 * var(--u));
  margin-left: auto;
  margin-right: auto;
  font-size: calc(56 * var(--u));
  line-height: 1.08;
  text-wrap: balance;
}
.scene--attract.is-quiz .attract__hint {
  max-width: calc(1180 * var(--u));
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(18 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.4;
  text-wrap: balance;
}
.attract__hint--tip {
  color: var(--text-3);
  font-style: italic;
}
.attract__quizask {
  margin-top: calc(24 * var(--u));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(29 * var(--u));
  color: var(--accent);
}

/* Fortschritt: ein Punkt je Glas auf dem Podest. */
.attract__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-soft);
}
.attract__progress.is-in { opacity: 1; transform: none; }

.attract__dots {
  display: flex;
  gap: calc(16 * var(--u));
}
.attract__dot {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--line-strong);
  background: transparent;
  transition: background-color 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.attract__dot.is-found {
  background: var(--accent);
  border-color: var(--accent);
}
.attract__progresstext {
  font-family: var(--font-mono);
  font-size: calc(19 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ==========================================================================
   AUFLOESUNG (Rate-Modus, an Stelle der Erkennungsanzeige)
   --------------------------------------------------------------------------
   Treffer und Fehlgriff unterscheiden sich nur in der Farbe des Symbols, nicht
   im Aufbau. Wer danebengreift, soll nicht das Gefuehl haben, in einer anderen
   Ansicht gelandet zu sein — nur in einer anderen Antwort.
   ========================================================================== */

.scene--verdict { z-index: 19; }

.verdict__card {
  position: absolute;
  left: 50%;
  top: calc(190 * var(--u));
  width: calc(880 * var(--u));
  margin-left: calc(-440 * var(--u));
  padding: calc(48 * var(--u)) calc(56 * var(--u)) calc(42 * var(--u));
  box-shadow: var(--shadow-3);
  text-align: center;
}

.verdict__mark {
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  margin: 0 auto calc(24 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 460ms var(--ease-out), transform 520ms var(--ease-soft);
}
.verdict__mark.is-in { opacity: 1; transform: none; }
.verdict__mark svg { width: 60%; height: 60%; }

.scene--verdict.is-correct .verdict__mark {
  background: rgb(31 138 91 / 0.12);
  color: var(--ok);
}
.scene--verdict.is-other .verdict__mark {
  background: var(--surface-sunk);
  color: var(--text-3);
}
.scene--verdict.is-correct .verdict__kicker { color: var(--ok); }
.scene--verdict.is-other .verdict__kicker { color: var(--text-3); }

.verdict__kicker,
.verdict__name,
.verdict__lead {
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-soft);
}
.verdict__kicker.is-in,
.verdict__name.is-in,
.verdict__lead.is-in { opacity: 1; transform: none; }

.verdict__kicker { font-size: calc(19 * var(--u)); letter-spacing: 0.28em; }
.verdict__name {
  margin-top: calc(12 * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(60 * var(--u));
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.verdict__lead {
  margin-top: calc(20 * var(--u));
  font-size: calc(27 * var(--u));
  line-height: 1.45;
  color: var(--text-2);
}

.verdict__progress {
  margin-top: calc(32 * var(--u));
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(12 * var(--u));
}
.verdict__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(34 * var(--u));
  color: var(--accent);
}
.verdict__countlabel {
  font-family: var(--font-mono);
  font-size: calc(18 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.verdict__bar {
  margin-top: calc(30 * var(--u));
  height: calc(4 * var(--u));
  background: var(--surface-sunk);
  border-radius: calc(2 * var(--u));
  overflow: hidden;
}
.verdict__barfill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  animation-name: boot-fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* ==========================================================================
   FINALE — alle Glaeser entdeckt
   ========================================================================== */

.scene--finale { z-index: 18; }

.finale__card {
  position: absolute;
  left: 50%;
  top: calc(60 * var(--u));
  width: calc(1180 * var(--u));
  margin-left: calc(-590 * var(--u));
  padding: calc(50 * var(--u)) calc(64 * var(--u)) calc(44 * var(--u));
  box-shadow: var(--shadow-3);
}
.finale__kicker { font-size: calc(19 * var(--u)); letter-spacing: 0.28em; }

.finale__title,
.finale__lead {
  opacity: 0;
  transform: translateY(calc(14 * var(--u)));
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-soft);
}
.finale__title.is-in,
.finale__lead.is-in { opacity: 1; transform: none; }

.finale__title {
  margin-top: calc(12 * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(62 * var(--u));
  letter-spacing: -0.03em;
  color: var(--text);
}
.finale__lead {
  margin-top: calc(18 * var(--u));
  max-width: calc(940 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.5;
  color: var(--text-2);
}

.finale__list {
  margin-top: calc(34 * var(--u));
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--u)) calc(48 * var(--u));
}
.finale__item {
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateX(calc(-10 * var(--u)));
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-soft);
}
.finale__item.is-in { opacity: 1; transform: none; }
.finale__mark {
  align-self: center;
  position: relative;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.finale__mark::after {
  content: '';
  position: absolute;
  left: calc(5.5 * var(--u));
  top: calc(5 * var(--u));
  width: calc(7 * var(--u));
  height: calc(3.5 * var(--u));
  border-left: calc(2 * var(--u)) solid #fff;
  border-bottom: calc(2 * var(--u)) solid #fff;
  transform: rotate(-45deg);
}
.finale__itemname {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(27 * var(--u));
  color: var(--text);
}
.finale__itemsub {
  font-size: calc(20 * var(--u));
  color: var(--text-3);
}

.finale__cta {
  margin-top: calc(38 * var(--u));
  padding-top: calc(26 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--accent);
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-soft);
}
.finale__cta.is-in { opacity: 1; transform: none; }
.finale__ctatext {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(34 * var(--u));
  color: var(--text);
}
.finale__ctasub {
  margin-top: calc(8 * var(--u));
  font-size: calc(22 * var(--u));
  color: var(--text-2);
}

.finale__loop {
  position: absolute;
  left: 50%;
  bottom: calc(34 * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}
.finale__looptext {
  font-family: var(--font-mono);
  font-size: calc(17 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.finale__looptrack {
  width: calc(120 * var(--u));
  height: calc(3 * var(--u));
  background: var(--line);
  border-radius: calc(2 * var(--u));
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-size: calc(var(--p, 0) * 100%) 100%;
  background-repeat: no-repeat;
}