/* Finale — Kino-Rot und Creme. Die Bühne ist 200vw breit, rechts um 100vw verschoben. */
body:is([data-phase="curtain"], [data-phase="reveal"], [data-phase="choice"], [data-phase="ticket"], [data-phase="credits"], [data-phase="done"]) {
  background: radial-gradient(ellipse 120% 80% at 50% 110%, #3a0b13 0%, #14060a 60%, #0a0407 100%);
}
body:is([data-phase="curtain"], [data-phase="reveal"], [data-phase="ticket"], [data-phase="credits"], [data-phase="done"])::before {
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
}

.root > section.finale {
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.buehne {
  position: absolute;
  top: 0;
  left: 0;
  width: 200vw;
  height: 100%;
  overflow: hidden;
}
body[data-side="rechts"] .buehne { transform: translateX(-100vw); }

/* ── Vorhang ───────────────────────────────────────────────────────────── */
.buehne-dunkel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 60%, #1c0a0e, #07030408 70%);
}
.warte { color: var(--creme-60); font-size: 14px; letter-spacing: 0.1em; }

.vorhang {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
  background:
    repeating-linear-gradient(90deg,
      var(--samt-hell) 0 6vw,
      var(--samt) 6vw 9vw,
      #5c0a15 9vw 12vw,
      var(--samt) 12vw 16vw),
    var(--samt);
  box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.55), inset 0 30px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: grid;
  place-items: end center;
  padding-bottom: 18vh;
}
.vorhang.greift { transition: none; cursor: grabbing; }
.vorhang.offen { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vorhang .falten {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1vw, transparent 1vw 8vw),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 20%, transparent 70%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.vorhang[data-side="links"] { border-right: 6px solid var(--messing); }
.vorhang[data-side="rechts"] { border-left: 6px solid var(--messing); }
.vorhang-hinweis {
  position: relative;
  font-size: 26px;
  color: var(--creme);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: wink 1.6s ease-in-out infinite;
}
@keyframes wink { 50% { opacity: 0.55; transform: translateX(-4px); } }
.vorhang[data-side="rechts"] .vorhang-hinweis { animation-name: wink-r; }
@keyframes wink-r { 50% { opacity: 0.55; transform: translateX(4px); } }

/* ── Doppelleinwand ────────────────────────────────────────────────────── */
.reveal .buehne { background: #07030a; }
.reveal .flackern {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 236, 200, 0.16), transparent 60%);
  animation: flackern 2s steps(2, end) both;
  animation-delay: var(--start);
  opacity: 0;
}
@keyframes flackern {
  0% { opacity: 0; } 10% { opacity: 0.8; } 15% { opacity: 0.2; } 25% { opacity: 1; }
  30% { opacity: 0.1; } 45% { opacity: 0.6; } 55% { opacity: 0.2; } 100% { opacity: 0; }
}
.reveal .kegel {
  position: absolute;
  top: -20%;
  left: 0;
  width: 60vw;
  height: 140%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 241, 214, 0.45), rgba(255, 241, 214, 0.08) 45%, transparent 70%);
  transform: translateX(-70vw);
  animation: kegel 2.6s cubic-bezier(0.4, 0, 0.3, 1) both;
  animation-delay: var(--start);
}
@keyframes kegel { from { transform: translateX(-70vw); } to { transform: translateX(210vw); } }
.reveal .streifen {
  position: absolute;
  top: 34%;
  left: 0;
  width: 400vw;
  height: 22vh;
  background:
    repeating-linear-gradient(90deg, transparent 0 3vw, #0a0508 3vw 4.6vw) 0 0 / 100% 12%,
    repeating-linear-gradient(90deg, transparent 0 3vw, #0a0508 3vw 4.6vw) 0 100% / 100% 12%,
    repeating-linear-gradient(90deg, #2a1f14 0 22vw, #1a120c 22vw 23vw);
  background-repeat: no-repeat, no-repeat, repeat;
  border-top: 2px solid #3b2a1a;
  border-bottom: 2px solid #3b2a1a;
  opacity: 0;
  animation: streifen 3.2s linear both;
  animation-delay: calc(var(--start) + 2s);
}
@keyframes streifen {
  0% { transform: translateX(200vw); opacity: 0; }
  8% { opacity: 0.9; }
  92% { opacity: 0.9; }
  100% { transform: translateX(-400vw); opacity: 0; }
}
.reveal .zeilen { position: absolute; inset: 0; }
.reveal .zeile {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 24px);
  margin: 0;
  white-space: nowrap;
  font-size: 8vh;
  line-height: 1;
  color: var(--creme);
  text-shadow: 0 0 40px rgba(255, 220, 160, 0.35), 0 4px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: zeile-ein 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, zeile-aus 1.2s ease-in both;
  animation-delay: calc(var(--start) + 4.5s + var(--i) * 1.9s), calc(var(--start) + 14.4s);
}
.reveal .zeile:nth-child(1) { top: 12%; font-size: 12vh; }
.reveal .zeile:nth-child(2) { top: 24%; color: var(--messing-hell); font-size: 20vh; }
.reveal .zeile:nth-child(3) { top: 47%; font-size: 7.5vh; color: var(--messing-hell); }
.reveal .zeile:nth-child(4) { top: 60%; }
.reveal .zeile:nth-child(5) { top: 71%; }
@keyframes zeile-ein { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes zeile-aus { to { opacity: 0; } }

/* ── Wahl ──────────────────────────────────────────────────────────────── */
.root > section.wahl {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: clamp(10px, 2.5vh, 24px) 0 92px;
  text-align: center;
  justify-items: center;
}
.wahl .kopf { padding: 0 20px; gap: 2px; }
.wahl .titel { font-size: clamp(32px, 9vw, 48px); }
.wahl .anleitung { font-size: 12.5px; max-width: 30ch; }
.wahl .karussell { align-self: center; }

.karussell {
  width: 100%;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 0 14px;
  align-items: center;
  transition: opacity 0.3s, filter 0.3s;
}
.karussell::-webkit-scrollbar { display: none; }
.karussell.gesperrt { pointer-events: none; opacity: 0.7; filter: saturate(0.6); }

.poster {
  flex: 0 0 74vw;
  height: min(38dvh, 96vw);
  margin: 0 4vw;
  scroll-snap-align: center;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  justify-items: center;
  padding: 7% 6%;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.poster:first-child { margin-left: 13vw; }
.poster:last-child { margin-right: 13vw; }
.poster .p-klein { position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; }
.poster .p-fuss { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.8; }
.poster .p-titel { position: relative; display: grid; line-height: 0.9; }

.poster-odyssey {
  color: #e9b85c;
  font-family: var(--serif);
  background:
    radial-gradient(circle at 50% 30%, #f3c063 0 8.5%, rgba(243, 192, 99, 0.35) 9%, transparent 16%),
    linear-gradient(180deg, #0f2238 0%, #071526 55%, #041018 100%);
}
.poster-odyssey .p-titel { font-weight: 700; font-size: 11.5vw; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.poster-odyssey .p-titel small { font-size: 0.42em; letter-spacing: 0.4em; font-weight: 400; }
.poster-odyssey .wellen { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 36%; }
.poster-odyssey .wellen path { fill: none; stroke: #e9b85c; stroke-width: 0.9; opacity: 0.75; }

.poster-spiderman {
  color: #fff;
  font-family: var(--display);
  background: linear-gradient(112deg, #b8121c 0 47%, #7b0f16 47% 49%, #1b3a8f 49% 100%);
}
.poster-spiderman .netz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; }
.poster-spiderman .p-titel { font-size: 15vw; letter-spacing: 0.04em; text-align: center; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7); text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); }
.poster-spiderman .p-unter { position: relative; font-size: 7vw; letter-spacing: 0.14em; color: #ffe08a; }

.hebel-zeile { display: grid; gap: 12px; justify-items: center; padding: 0 20px; }
.hebel {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--creme);
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 12px;
}
.hebel:focus-visible { outline: 3px solid var(--creme); }
.hebel-spur {
  width: 44px;
  height: 96px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--panel-tief), var(--panel));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), 0 0 0 3px var(--messing-dunkel), 0 10px 20px rgba(0, 0, 0, 0.5);
  position: relative;
}
.hebel-knauf {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5dc9a, var(--messing) 50%, var(--messing-dunkel));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.hebel[aria-pressed="true"] .hebel-knauf { transform: translateY(52px); }
.hebel[aria-pressed="true"] .hebel-spur { box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), 0 0 0 3px var(--messing), 0 0 24px rgba(232, 200, 119, 0.45); }
.hebel-label { font-size: 30px; letter-spacing: 0.1em; }
.hebel[aria-pressed="true"] .hebel-label { color: var(--messing-hell); }
.muenze { font-size: 18px; padding: 12px 28px; }

/* ── Ticket ────────────────────────────────────────────────────────────── */
.ticket-screen, .abspann-screen { display: grid; }
.buehne-ticket { display: grid; place-items: center; }
.ticket {
  position: relative;
  width: 176vw;
  height: min(64dvh, 120vw);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.5), transparent 50%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 2px, transparent 2px 5px),
    var(--papier);
  color: var(--tinte);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), inset 0 0 0 2px var(--messing), inset 0 0 0 6px var(--papier), inset 0 0 0 7px rgba(201, 160, 74, 0.6);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.perforation {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 3px dashed rgba(26, 26, 26, 0.35);
  transform: translateX(-1.5px);
}
.perforation::before, .perforation::after {
  content: '';
  position: absolute;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #14060a;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
}
.perforation::before { top: -14px; }
.perforation::after { bottom: -14px; }

.ticket-haelfte {
  padding: 5vh 8vw 18vh;
  display: grid;
  align-content: start;
  gap: 1.2vh;
  text-align: center;
}
.ticket .kicker { color: var(--messing-dunkel); font-size: 12px; letter-spacing: 0.3em; }
.ticket .film { font-size: clamp(40px, 13vw, 72px); line-height: 0.95; margin: 0; color: var(--tinte); }
.ticket .reihe { font-size: 26px; margin: 0; font-style: italic; }
.ticket .termin { font-size: 20px; margin: 1vh 0 0; }
.ticket .bezahlt { font-size: 24px; margin: 0; font-weight: 700; }
.ticket .klein { font-size: 11px; color: rgba(26, 26, 26, 0.65); letter-spacing: 0.08em; margin: 0; }
.ticket .rechts .kicker { font-size: 16px; letter-spacing: 0.25em; color: var(--tinte); }

.ticket .namen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  font-size: 10vh;
  line-height: 1;
  color: var(--messing-dunkel);
}
.ticket .namen .naht { color: var(--tinte); }

.abspann.knopf { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
.hinweis-ticket { position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--creme-60); font-size: 13px; margin: 0; }
.ticket-screen .buehne-ticket { padding-bottom: 8vh; }

/* ── Abspann ───────────────────────────────────────────────────────────── */
.abspann-screen .buehne { background: #07030a; }
.rolle {
  position: absolute;
  left: 0;
  width: 200vw;
  top: 100%;
  display: grid;
  gap: 6vh;
  animation: rollen 25s linear both;
  animation-delay: var(--start);
}
@keyframes rollen { to { transform: translateY(calc(-100% - 100dvh)); } }
.credit-titel {
  margin: 0;
  text-align: center;
  font-size: 13vh;
  line-height: 1;
  color: var(--messing-hell);
  white-space: nowrap;
}
.credit {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8vw;
  font-size: 4.2vh;
  color: var(--creme);
  line-height: 1.2;
}
.credit .rolle-name { text-align: right; color: var(--creme-60); }
.credit-gruss { margin: 0; text-align: center; font-size: 8vh; line-height: 1; color: var(--creme); white-space: nowrap; }
.credit .credit-name { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .vorhang-hinweis { animation: none; }
}

/* ── Lichtshow: 25 Sekunden, alles aus --start (negativer Delay ab startedAt.curtain) ── */
.show {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background: #000;
  animation: show-aus 3s ease both;
  animation-delay: calc(var(--start) + 22s);
}
@keyframes show-aus { to { opacity: 0; } }
.show.aus { opacity: 0; pointer-events: none; }

/* 0–3 s: sechs Riegelpunkte leuchten nacheinander auf */
.show-punkte {
  position: absolute;
  left: 100vw;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4vw;
  z-index: 8;
  animation: punkte-weg 0.6s ease both;
  animation-delay: calc(var(--start) + 3s);
}
@keyframes punkte-weg { to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
.show-punkte i {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: var(--panel-tief);
  box-shadow: 0 0 0 2px var(--messing-dunkel);
  opacity: 0.35;
  animation: punkt-an 0.25s ease both;
}
.show-punkte i:nth-child(1) { animation-delay: calc(var(--start) + 0.5s); }
.show-punkte i:nth-child(2) { animation-delay: calc(var(--start) + 0.9s); }
.show-punkte i:nth-child(3) { animation-delay: calc(var(--start) + 1.3s); }
.show-punkte i:nth-child(4) { animation-delay: calc(var(--start) + 1.7s); }
.show-punkte i:nth-child(5) { animation-delay: calc(var(--start) + 2.1s); }
.show-punkte i:nth-child(6) { animation-delay: calc(var(--start) + 2.5s); }
@keyframes punkt-an {
  to { opacity: 1; background: radial-gradient(circle at 35% 30%, #fff3c4, var(--messing) 60%); box-shadow: 0 0 22px rgba(232, 200, 119, 0.9), 0 0 0 2px var(--messing); }
}

/* 3–6 s: die Stahltür schwingt auf, Licht aus der Naht */
.tuer-halb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  z-index: 7;
  background:
    radial-gradient(circle at 6vw 6vh, var(--messing-hell) 0 5px, transparent 6px),
    radial-gradient(circle at 94vw 6vh, var(--messing-hell) 0 5px, transparent 6px),
    radial-gradient(circle at 6vw calc(100% - 6vh), var(--messing-hell) 0 5px, transparent 6px),
    radial-gradient(circle at 94vw calc(100% - 6vh), var(--messing-hell) 0 5px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #3a4048, #1f2327 60%, #14171a);
  box-shadow: inset 0 0 0 8px var(--panel-tief), inset 0 0 0 10px var(--messing-dunkel);
  animation-duration: 3.2s;
  animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  animation-fill-mode: both;
  animation-delay: calc(var(--start) + 3s);
}
.tuer-halb.links { left: 0; border-right: 5px solid var(--messing); animation-name: tuer-links; }
.tuer-halb.rechts { left: 100vw; border-left: 5px solid var(--messing); animation-name: tuer-rechts; }
@keyframes tuer-links { to { transform: translateX(-105%); } }
@keyframes tuer-rechts { to { transform: translateX(105%); } }

.glut {
  position: absolute;
  left: 100vw;
  top: 50%;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fff8dc 0%, #e8c877 25%, rgba(201, 160, 74, 0.45) 55%, transparent 72%);
  z-index: 2;
  animation: glut-auf 4.5s ease-out both;
  animation-delay: calc(var(--start) + 3.2s);
}
@keyframes glut-auf { 45% { opacity: 1; } to { transform: translate(-50%, -50%) scale(13); opacity: 0.32; } }

.strahlen {
  position: absolute;
  left: 100vw;
  top: 50%;
  width: 320vw;
  height: 320vw;
  margin: -160vw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(232, 200, 119, 0.16) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 55%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 55%);
  opacity: 0;
  z-index: 2;
  animation: strahlen-an 1.6s ease both, strahlen-dreh 46s linear infinite, strahlen-dimm 2s ease both;
  animation-delay: calc(var(--start) + 3.6s), calc(var(--start) + 3.6s), calc(var(--start) + 8s);
}
@keyframes strahlen-an { to { opacity: 1; } }
@keyframes strahlen-dimm { from { opacity: 1; } to { opacity: 0.45; } }
@keyframes strahlen-dreh { to { transform: rotate(360deg); } }

.funken i {
  position: absolute;
  left: 100vw;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff1c2;
  box-shadow: 0 0 10px #e8c877, 0 0 20px rgba(232, 200, 119, 0.6);
  opacity: 0;
  z-index: 5;
  animation: funke 1.7s cubic-bezier(0.1, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--start) + 3.7s + var(--d));
}
@keyframes funke {
  0% { opacity: 1; transform: translate(0, 0) scale(1.4); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

/* Scheinwerfer, schwenken über beide Displays */
.scheinwerfer {
  position: absolute;
  top: -30%;
  width: 70vw;
  height: 160%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 244, 214, 0.38), rgba(255, 244, 214, 0.1) 40%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: sw-an 1.2s ease both, sw-fahrt 7s ease-in-out infinite alternate;
}
.sw-1 { left: -25vw; animation-delay: calc(var(--start) + 3s), calc(var(--start) + 3s); }
.sw-2 { left: 155vw; animation-delay: calc(var(--start) + 3s), calc(var(--start) + 6s); animation-name: sw-an, sw-fahrt-r; }
.scheinwerfer.leise { animation-delay: var(--start), var(--start); opacity: 0; }
.scheinwerfer.leise.sw-1 { animation-name: sw-an-leise, sw-fahrt; }
.scheinwerfer.leise.sw-2 { animation-name: sw-an-leise, sw-fahrt-r; animation-delay: var(--start), calc(var(--start) + 3s); }
@keyframes sw-an { to { opacity: 1; } }
@keyframes sw-an-leise { to { opacity: 0.55; } }
@keyframes sw-fahrt { from { transform: translateX(0) rotate(-8deg); } to { transform: translateX(150vw) rotate(8deg); } }
@keyframes sw-fahrt-r { from { transform: translateX(0) rotate(8deg); } to { transform: translateX(-150vw) rotate(-8deg); } }

/* 8–20 s: Feuerwerk, 27 und Glückwunsch */
.feuerwerk i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2vw;
  height: 2vw;
  margin: -1vw;
  border-radius: 50%;
  border: 3px solid var(--c);
  box-shadow: 0 0 22px var(--c), inset 0 0 18px var(--c);
  opacity: 0;
  transform: scale(0);
  z-index: 5;
  animation: ring 1.4s cubic-bezier(0.1, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--start) + var(--t));
}
.feuerwerk i::before {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 30px #fff;
}
@keyframes ring {
  0% { opacity: 1; transform: scale(0); }
  60% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(24); }
}

.show-27 {
  position: absolute;
  left: 100vw;
  top: 52%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: 72vh;
  line-height: 1;
  color: var(--messing);
  opacity: 0;
  z-index: 1;
  animation: zahl-an 1.4s ease both, zahl-puls 2.4s ease-in-out infinite;
  animation-delay: calc(var(--start) + 8s), calc(var(--start) + 9.4s);
}
@keyframes zahl-an { to { opacity: 0.16; } }
@keyframes zahl-puls { 50% { transform: translate(-50%, -50%) scale(1.06); } }

.show .gruss {
  position: absolute;
  left: 100vw;
  top: 20%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 1.5vh;
  z-index: 6;
}
.gruss-zeile {
  margin: 0;
  white-space: nowrap;
  line-height: 1.1;
  background: linear-gradient(100deg, var(--creme) 0 34%, #fffdf2 46%, var(--messing-hell) 54%, var(--creme) 66% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(255, 220, 160, 0.35));
  opacity: 0;
  transform: translateY(20px);
  animation: gruss-ein 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, glanz 3.2s linear infinite;
}
@keyframes gruss-ein { to { opacity: 1; transform: translateY(0); } }
@keyframes glanz { from { background-position: 120% 0; } to { background-position: -140% 0; } }
.gruss-1 { font-size: 7.5vh; animation-delay: calc(var(--start) + 9s), calc(var(--start) + 9.5s); }
.gruss-2 { font-size: 13vh; animation-delay: calc(var(--start) + 10.2s), calc(var(--start) + 10.7s); }

/* Konfettikanone an der Außenkante, schießt Richtung Naht */
.kanone { position: absolute; bottom: 8vh; z-index: 5; pointer-events: none; }
.kanone[data-side="links"] { left: 2vw; }
.kanone[data-side="rechts"] { right: 2vw; }
.kanone i {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 6px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: schuss 2.6s cubic-bezier(0.2, 0.7, 0.4, 1) both;
  animation-delay: calc(var(--start) + var(--t));
}
@keyframes schuss {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
  45% { opacity: 1; transform: translate(calc(var(--dx) * 0.7), calc(var(--up) * -1)) rotate(calc(var(--r) + 300deg)); }
  100% { opacity: 0; transform: translate(var(--dx), 30vh) rotate(calc(var(--r) + 720deg)); }
}

.konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.konfetti i {
  position: absolute;
  top: -6vh;
  left: var(--x);
  width: var(--w);
  height: calc(var(--w) * 0.6);
  background: var(--c);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(var(--r));
  animation: konfetti-fall var(--t) linear calc(var(--d) + var(--regen, 0s)) infinite;
}
@keyframes konfetti-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--r)); }
  8% { opacity: 1; }
  100% { opacity: 0.9; transform: translate3d(calc(var(--w) * -3), 115vh, 0) rotate(calc(var(--r) + 540deg)); }
}
.ticket-screen .konfetti i { animation-iteration-count: 2; }
@media (prefers-reduced-motion: reduce) { .konfetti i { animation: none; } }