/* Serienabend Wrapped — Vollbild-Story nach Redesign A (A 11).
   Basis-Tokens kommen aus assets/tokens.css (F-13). Jede Karte trägt ein
   Thema (Grund · Violett · Fläche · Paarfarbe), das Hintergrund und
   Schriftfarbe setzt; die Mechanik steht in wrapped.js. */

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Spalte wie die Hauptseite (Spec §8) */
.stage {
  --karte: var(--bg);
  --karte-ink: var(--ink);
  --karte-dim: var(--ink-soft);
  --spur: rgba(255, 255, 255, .22);
  position: fixed;
  inset: 0;
  left: max(0px, calc(50% - 240px));
  right: max(0px, calc(50% - 240px));
  overflow: hidden;
  background: var(--karte);
  color: var(--karte-ink);
  transition: background-color .6s ease, color .6s ease;
}
.thema-grund { --karte: var(--bg); }
.thema-flaeche { --karte: var(--surface); }
.thema-violett { --karte: var(--violet-fill); --karte-ink: #fff; --karte-dim: rgba(255, 255, 255, .82); }
.stage[class*="thema-paar-"] { --karte: var(--paar); --karte-ink: var(--paar-ink); --karte-dim: var(--paar-ink); --spur: rgba(0, 0, 0, .18); }
.thema-paar-ce { --paar: var(--paar-ce); --paar-ink: var(--paar-ce-ink); }
.thema-paar-cp { --paar: var(--paar-cp); --paar-ink: var(--paar-cp-ink); }
.thema-paar-tj { --paar: var(--paar-tj); --paar-ink: var(--paar-tj-ink); }
.thema-paar-fl { --paar: var(--paar-fl); --paar-ink: var(--paar-fl-ink); }

/* Posterwand nur auf der ersten Karte: schräg, nach unten ausgeblendet */
.wall {
  position: absolute;
  top: 90px;
  left: -20px;
  right: -20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  opacity: 0;
  transform: rotate(-8deg);
  transition: opacity .6s ease;
}
.wall > span { aspect-ratio: 2 / 3; border-radius: 12px; background: var(--surface) center / cover no-repeat; }
.scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(10, 7, 20, 0) 20%, var(--bg) 62%); transition: opacity .6s ease; }
.stage--intro > .wall { opacity: .55; }
.stage--intro > .scrim { opacity: 1; }

/* Fortschritt: ein Balken je Karte, der aktuelle füllt sich in --dauer */
.bars {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
}
.bars > span { height: 4px; border-radius: 2px; background: var(--spur); overflow: hidden; }
.bars > span > i { display: block; width: 0; height: 100%; background: var(--karte-ink); }
.bars > .voll > i { width: 100%; }
.bars > .jetzt > i { animation: balken var(--dauer, 4500ms) linear forwards; }
.bars.pausiert > .jetzt > i { animation-play-state: paused; }
@keyframes balken { from { width: 0; } to { width: 100%; } }

.kopf {
  position: absolute;
  top: calc(28px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 10px;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.kopf > .kopf__titel { flex: 1 1 auto; font-size: 13px; font-weight: 700; }
.kopf > .pause, .kopf > .exit {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--karte-ink);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.pause > svg { width: 16px; height: 16px; }
.pause > .pause__aus { display: none; }
.pause[aria-pressed="true"] > .pause__an { display: none; }
.pause[aria-pressed="true"] > .pause__aus { display: block; }

/* Karte: Inhalt links unten bündig wie im Entwurf */
.slide {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 100px 24px calc(80px + env(safe-area-inset-bottom, 0px));
}
.stage--intro > .slide { justify-content: flex-end; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

.label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--karte-dim); }
.stage--intro .label { color: var(--violet-soft); }

.slide h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 17vw, 96px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.stage--intro .slide h1 { font-size: clamp(56px, 18vw, 100px); line-height: .85; overflow-wrap: normal; }
.slide h1 em { font-style: normal; display: block; }
.slide .big {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(120px, 48vw, 220px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
}
.slide p { margin: 0; max-width: 34ch; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--karte-dim); }
.slide p strong { color: var(--karte-ink); }
.hintouch { font-size: 13px; color: var(--ink-dim); }

.slide .weiter {
  position: relative;
  z-index: 6;
  height: 56px;
  display: inline-flex;
  align-items: center;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Posterwand-Karte */
.posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.posters > span { aspect-ratio: 2 / 3; border-radius: 12px; background: var(--surface) center / cover no-repeat; }

/* Einblendung: Label/Text steigen auf, Überschriften zoomen */
@media (prefers-reduced-motion: no-preference) {
  .slide > * { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .slide > h1, .slide > .big { animation-name: zoom; animation-duration: .9s; animation-timing-function: cubic-bezier(.2, 1.3, .4, 1); }
  .slide > *:nth-child(3) { animation-delay: .25s; }
  .slide > *:nth-child(4) { animation-delay: .5s; }
  .slide > *:nth-child(5) { animation-delay: .8s; }
  .posters > span { animation: drop .8s cubic-bezier(.2, 1.2, .4, 1) both; }
  .posters > span:nth-child(3n + 2) { animation-delay: .15s; }
  .posters > span:nth-child(3n) { animation-delay: .3s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes zoom { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-120px) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* Tippzonen: links 35 % zurück, rechts weiter (unter Kopf und Button) */
.zone {
  position: absolute;
  top: 70px;
  bottom: 0;
  z-index: 4;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zone--prev { left: 0; width: 35%; }
.zone--next { left: 35%; right: 0; }
.zone:disabled { cursor: default; }
.zone:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: -4px; }

/* Nur für Screenreader (Kartenzähler, F-12) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fallback { position: fixed; inset: 40% 20px auto; text-align: center; color: var(--ink-soft); }
.fallback a { color: var(--ink); }

/* Konfetti */
.confetti { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .85; }
}

/* ---------- Desktop (D 11, Phase 12.5) ----------
   Die Story bleibt hochkant (420 × 746) und liegt mittig über einer
   unscharfen Posterwand; Kopfzeile mit Jahren, Pfeile, Tastaturhinweise.
   Mobil gibt es diese Teile nicht. */
.buehne, .oben, .pfeil, .tasten { display: none; }

@media (min-width: 900px) {
  body { background: var(--bg); }
  .buehne {
    position: fixed;
    top: -80px;
    left: -60px;
    right: -60px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
    filter: blur(18px) saturate(1.2);
    opacity: .55;
  }
  .buehne > span { aspect-ratio: 2 / 3; border-radius: 12px; background: var(--surface) center / cover no-repeat; }
  body::before { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(10, 7, 20, .6); }

  .oben {
    position: fixed;
    top: 28px;
    left: 36px;
    right: 36px;
    z-index: 6;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .oben > .oben__titel { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
  .oben > .oben__jahre { display: flex; flex-direction: row; gap: 6px; }
  .oben__jahre > .oben__jahr {
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .oben__jahre > .oben__jahr--an { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 700; }
  .oben > .oben__zu,
  .pfeil {
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(20, 14, 38, .6);
    color: var(--ink);
    cursor: pointer;
  }
  .oben > .oben__zu { margin-left: auto; width: 44px; height: 44px; }
  .oben__zu > svg { width: 18px; height: 18px; }

  /* Die Karte: feste Hochkant-Bühne, passt sich niedrigen Fenstern an */
  .stage {
    --hoehe: min(746px, calc(100vh - 150px));
    top: 96px;
    bottom: auto;
    left: 50%;
    right: auto;
    z-index: 2;
    height: var(--hoehe);
    width: calc(var(--hoehe) * 420 / 746);
    transform: translateX(-50%);
    border-radius: 30px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
  }
  .stage > .kopf > .kopf__titel, .stage > .kopf > .exit { visibility: hidden; }

  .pfeil {
    position: fixed;
    top: calc(96px + min(746px, calc(100vh - 150px)) / 2 - 28px);
    z-index: 6;
    width: 56px;
    height: 56px;
  }
  .pfeil > svg { width: 20px; height: 20px; }
  .pfeil:disabled { opacity: .3; cursor: default; }
  .pfeil--zurueck { right: calc(50% + min(746px, calc(100vh - 150px)) * 210 / 746 + 32px); }
  .pfeil--weiter { left: calc(50% + min(746px, calc(100vh - 150px)) * 210 / 746 + 32px); }
  .oben a:focus-visible, .pfeil:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

  .tasten {
    position: fixed;
    bottom: 22px;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 18px;
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft);
  }
}