/* =============================================================================
   PARASIONS — Relaunch 2026 · Design-Preview
   Grundlage: parasions-relaunch-2026-v3.xd (Artboards 1920 × 1080)

   Koordinatensystem
   -----------------
   Alle Maße stehen so im Code, wie sie im XD stehen: calc(245 * var(--px)).
   --px ist ein Design-Pixel und skaliert mit dem Viewport, damit die Bühne
   immer vollständig und proportionsgetreu ins Fenster passt.

   Bewegung — entspricht der Anordnung der Artboards im XD
   -------------------------------------------------------
   .deck   Hauptseiten 00–06 liegen nebeneinander → waagerecht
   .stack  Unterseiten liegen darunter            → senkrecht
   .hpages weiterer Inhalt einer Unterseite daneben → waagerecht
   Das Mausrad bedient dabei immer die jeweils übergeordnete Achse.
   ============================================================================= */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  --px: 0.0625rem;          /* 1 Design-Pixel */

  --accent: #cd6013;        /* XD rgb(205, 96, 19) */
  --dim:    #474642;        /* große Ziffer, inaktive Punkte */
  --line:   #707070;        /* Rahmen und Haarlinien */
  --muted:  #c7c7c7;
  --ok:     #219825;        /* aktives Teammitglied */
  --gone:   #982121;        /* ehemaliges Teammitglied */

  --ease: cubic-bezier(.65, .05, .25, 1);

  /* Beides setzt das Skript auf der Bühne:
     --accent  Farbe der aktuell laufenden Staffel — gilt auf der ganzen Seite
     --on-accent  Schriftfarbe auf gefüllten Akzentflächen, hell oder dunkel
                  je nach Helligkeit der Staffelfarbe
     --season  Farbe der im Karussell gewählten Staffel — nur für den
               Hintergrundverlauf der Staffelübersicht */
  --on-accent: #fff;
  --season: #def000;
}

/* Bühne füllt das Fenster, ohne je über den Rand zu laufen. */
html { font-size: clamp(7px, min(0.833333vw, 1.481481vh), 22px); }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
ul, ol, dl, dd, figure, h2, h3, p { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Aufbauphase: Ausgangszustand ohne sichtbaren Übergang setzen. */
.is-booting *, .is-booting *::before, .is-booting *::after {
  transition: none !important;
  animation: none !important;
}

.hint-small { display: none; }

/* --- Bühne ----------------------------------------------------------------- */
.stage {
  position: relative;
  width: calc(1920 * var(--px));
  height: calc(1080 * var(--px));
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.frame {
  position: absolute;
  inset: calc(40 * var(--px));
  border: 1px solid rgba(255, 255, 255, .30);
  pointer-events: none;
  z-index: 40;
}

/* =============================================================================
   HUD — Zähler, Signet, Kapitelleiste, Fußmarke, Pfeile
   ============================================================================= */
.counter {
  position: absolute;
  left: calc(88 * var(--px));
  top: calc(100 * var(--px));
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: calc(9 * var(--px));
  line-height: 1;
  transition: opacity .4s ease;
}
.counter b { font-size: calc(36 * var(--px)); font-weight: 700; letter-spacing: .01em; }
.counter span { font-size: calc(26 * var(--px)); font-weight: 500; color: var(--line); }

/* Die drei verschlungenen Ringe sind der Menü-Knopf. */
.signet {
  position: absolute;
  left: calc(1791 * var(--px));
  top: calc(80 * var(--px));
  width: calc(49 * var(--px));
  height: calc(49 * var(--px));
  z-index: 47;
  transition: transform .4s var(--ease);
}
.signet svg { width: 100%; height: 100%; }
.signet:hover { transform: rotate(-25deg); }
/* Bei offenem Menü übernimmt der orange Knopf im Panel das Schließen. */
.stage.menu-open .signet { opacity: 0; pointer-events: none; }

.rail {
  position: absolute;
  left: calc(105 * var(--px));
  top: calc(228 * var(--px));
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 * var(--px));
  transition: opacity .4s ease;
}
.rail__line { width: 1px; height: calc(121 * var(--px)); background: var(--dim); }
.rail__dots { display: flex; flex-direction: column; gap: calc(32 * var(--px)); }
.rail__dots button {
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  border: calc(3 * var(--px)) solid var(--dim);
  border-radius: 50%;
  background: #0b0b0b;
  transition: border-color .35s ease, transform .35s var(--ease);
}
.rail__dots button:hover { border-color: #8a8880; transform: scale(1.18); }
.rail__dots button[aria-current='true'] { border-color: var(--accent); transform: scale(1.1); }

/* Der Fußabdruck blendet den Footer ein. */
.footmark {
  position: absolute;
  top: calc(930 * var(--px));
  width: calc(100 * var(--px));
  height: calc(100 * var(--px));
  background: var(--accent);
  z-index: 30;
  transition: opacity .35s ease, background-color .25s ease;
}
.footmark svg {
  position: absolute;
  left: calc(20.9 * var(--px));
  top: calc(11 * var(--px));
  width: calc(46.5 * var(--px));
  height: calc(78.6 * var(--px));
  fill: var(--on-accent);
}
.footmark:hover { filter: brightness(1.12); }

.steps { position: absolute; top: calc(963 * var(--px)); z-index: 30; display: flex; gap: calc(63 * var(--px)); transition: opacity .4s ease; }
.step { width: calc(22 * var(--px)); height: calc(30 * var(--px)); transition: opacity .3s ease, transform .3s var(--ease); }
.step svg { width: 100%; height: 100%; fill: #fff; }
.step:hover { transform: scale(1.25); }
.step[disabled] { opacity: .25; cursor: default; transform: none; }

/* In den Artboards wechseln Fußmarke und Pfeile pro Kapitel die Seite. Als
   bewegliche Oberfläche irritiert das Hin- und Herspringen, deshalb feste
   Plätze: Fußabdruck links, Pfeile rechts. */
.footmark { left: calc(50 * var(--px)); }
.steps    { left: calc(1734 * var(--px)); }

/* Im Intro gibt es weder Zähler noch Kapitelpunkte noch Pfeile. */
.stage[data-chapter='intro'] .counter,
.stage[data-chapter='intro'] .rail,
.stage[data-chapter='intro'] .steps { opacity: 0; pointer-events: none; }

/* =============================================================================
   Slider
   ============================================================================= */
/* Hauptseiten: eine Reihe nebeneinander, das Mausrad schiebt sie seitwärts. */
.deck {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--c, 0) * -100%));
  transition: transform .85s var(--ease);
}
.scene {
  position: absolute;
  top: 0;
  left: calc(var(--i) * 100%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;   /* hält mix-blend-mode der Staffelfarbe in der Szene */
}

/* Staffelfarbe über dem Hintergrundbild: schwarz links, zur Farbe hin nach
   rechts. "color" behält die Helligkeit des Fotos und tauscht nur den Farbton. */
.season-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 14%, var(--season) 56%, var(--season) 100%);
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.scene[data-depth='1'] .season-tint { opacity: .92; }

/* Der Hintergrund bleibt stehen, während die Unterseite darüber hochschiebt. */
.stack {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--d, 0) * -100%));
  transition: transform .7s var(--ease);
}
.view {
  position: absolute;
  left: 0;
  top: calc(var(--vi) * 100%);
  width: 100%;
  height: 100%;
}

/* Seitwärts blättern innerhalb einer Unterseite */
.hpages {
  position: absolute;
  overflow: hidden;
}
.hpages > .hpage {
  position: absolute;
  left: calc(var(--pi) * 100%);
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform .6s var(--ease);
  transform: translateX(calc(var(--p, 0) * -100%));
}

/* --- Hintergründe ---------------------------------------------------------- */
.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
}
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 20%, transparent 78%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.74) 50%, rgba(0,0,0,.36) 65%, rgba(0,0,0,.15) 82%, rgba(0,0,0,.11) 100%);
}
.bg--map { background-position: center; }
.bg--map::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 20%, transparent 78%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, #000 0%, #000 17%, rgba(0,0,0,.86) 30%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.1) 100%);
}
/* Das Hero-Bild ist von Haus aus sehr dunkel — es verträgt nur eine Vignette. */
.bg--hero { background-position: center; }
.bg--hero::after {
  background:
    radial-gradient(72% 76% at 50% 48%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.12) 74%, rgba(0,0,0,.58) 100%);
}

/* Nahtlinie mit Ring — im XD nur auf „Über uns“. */
.seam { position: absolute; left: calc(960 * var(--px)); top: 0; bottom: 0; width: 1px; background: rgba(112,112,112,.5); pointer-events: none; }
.seam__ring {
  position: absolute;
  left: 50%; top: calc(540 * var(--px));
  width: calc(50 * var(--px)); height: calc(50 * var(--px));
  margin: calc(-25 * var(--px)) 0 0 calc(-25 * var(--px));
  border: calc(6 * var(--px)) solid var(--accent);
  border-radius: 50%;
  background: #000;
}
.seam__ring::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: calc(10 * var(--px)); height: calc(10 * var(--px));
  margin: calc(-5 * var(--px)) 0 0 calc(-5 * var(--px));
  border-radius: 50%;
  background: #fff;
}

/* =============================================================================
   Textspalte links
   ============================================================================= */
.col {
  position: absolute;
  left: calc(245 * var(--px));
  top: calc(205 * var(--px));
  width: calc(560 * var(--px));
  z-index: 10;
}
.col--flush { width: calc(250 * var(--px)); }

.num { font-size: calc(80 * var(--px)); font-weight: 800; line-height: .84; color: var(--dim); }
.eyebrow {
  margin-top: calc(22 * var(--px));
  font-size: calc(24 * var(--px));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--accent);
}
.title {
  margin-top: calc(6 * var(--px));
  font-size: calc(28 * var(--px));
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: .012em;
  text-transform: uppercase;
}
.copy {
  margin-top: calc(46 * var(--px));
  max-width: calc(552 * var(--px));
  font-size: calc(18 * var(--px));
  font-weight: 400;
  line-height: 1.95;
}
.copy--tight { margin-top: calc(42 * var(--px)); max-width: calc(330 * var(--px)); }
.copy--narrow { max-width: calc(390 * var(--px)); }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  position: absolute;
  top: calc(425 * var(--px));
  left: 0;
  display: grid;
  place-items: center;
  width: calc(250 * var(--px));
  height: calc(50 * var(--px));
  border: calc(2 * var(--px)) solid var(--accent);
  border-radius: calc(5 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease;
}
.btn::after {
  content: '';
  position: absolute;
  right: calc(-13 * var(--px));
  top: 50%;
  width: calc(38 * var(--px));
  height: calc(2 * var(--px));
  margin-top: calc(-1 * var(--px));
  background: var(--accent);
  transition: width .3s var(--ease), right .3s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn:hover::after { width: calc(58 * var(--px)); right: calc(-33 * var(--px)); }
.btn--low { top: calc(738 * var(--px)); }
.btn--solid { position: static; background: var(--accent); color: var(--on-accent); }
.btn--solid::after { content: none; }   /* ohne Positionierung säße der Zierstrich am Container */
.btn--solid:hover { filter: brightness(1.12); }

.back {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--px));
  margin-top: calc(58 * var(--px));
  font-size: calc(17 * var(--px));
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: gap .3s var(--ease);
}
.back svg { width: calc(44 * var(--px)); height: calc(34 * var(--px)); color: var(--accent); flex: none; }
.back:hover { gap: calc(24 * var(--px)); }

/* =============================================================================
   00 · Intro
   ============================================================================= */
.coord {
  position: absolute;
  top: calc(96 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(18 * var(--px));
  font-size: calc(19 * var(--px));
  font-weight: 500;
  color: #e8e8e8;
}
.coord--l { left: calc(78 * var(--px)); }
.coord--r { right: calc(155 * var(--px)); }
.coord__bars { display: grid; gap: calc(6 * var(--px)); }
.coord__bars i { display: block; width: calc(56 * var(--px)); height: calc(7 * var(--px)); background: var(--accent); }
.coord__bars i:last-child { background: var(--line); }

.scrollrail {
  position: absolute;
  left: calc(105 * var(--px));
  top: calc(228 * var(--px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26 * var(--px));
}
.scrollrail__seg { width: 1px; background: var(--dim); height: calc(120 * var(--px)); }
.scrollrail__seg--accent { height: calc(322 * var(--px)); background: var(--accent); }
.scrollrail__label {
  font-size: calc(15 * var(--px));
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-logo {
  position: absolute;
  left: 50%;
  top: calc(322 * var(--px));
  width: calc(690 * var(--px));
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(10 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, .8));
}

.claim {
  position: absolute;
  left: 50%;
  top: calc(952 * var(--px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(18 * var(--px));
  white-space: nowrap;
  font-size: calc(29 * var(--px));
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.claim i { flex: none; width: calc(9 * var(--px)); height: calc(9 * var(--px)); border-radius: 50%; background: var(--accent); }

/* Beginnt rechts neben der Fußmarke, die jetzt fest unten links sitzt. */
.social { position: absolute; left: calc(190 * var(--px)); top: calc(950 * var(--px)); display: flex; align-items: center; gap: calc(45 * var(--px)); }
.social a { display: block; height: calc(31 * var(--px)); transition: color .25s ease, transform .25s var(--ease); }
/* Beide Maße setzen: das äußere <svg> hat keine eigene viewBox und fiele mit
   width:auto sonst auf die Standardbreite von 300 px zurück — die Flächen
   würden sich dann gegenseitig überlagern. */
.social svg { width: 100%; height: 100%; fill: currentColor; }
.social li:nth-child(1) a { width: calc(18 * var(--px)); }
.social li:nth-child(2) a { width: calc(31 * var(--px)); }
.social li:nth-child(3) a { width: calc(35 * var(--px)); height: calc(26 * var(--px)); }
.social a:hover { color: var(--accent); transform: translateY(calc(-3 * var(--px))); }

/* =============================================================================
   Karten-Schienen (Fallakten, Ausrüstung)
   ============================================================================= */
.panel { z-index: 10; }
.panel--rail { position: absolute; left: calc(843 * var(--px)); top: calc(406 * var(--px)); width: calc(985 * var(--px)); }

/* Innenabstand plus negativer Außenabstand: die Schiene schneidet seitwärts ab,
   lässt der Karte beim Überfahren nach oben aber Luft. */
.hrail {
  overflow: hidden;
  padding: calc(18 * var(--px)) 0;
  margin: calc(-18 * var(--px)) 0;
}
.cards { display: flex; gap: calc(23 * var(--px)); transition: transform .55s var(--ease); }
.cards > li { flex: 0 0 calc(229 * var(--px)); }

.card {
  position: relative;
  display: block;
  width: 100%;
  height: calc(450 * var(--px));
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .38);
  background: #090909;
  transition: border-color .3s ease, transform .45s var(--ease);
}
.card:hover { border-color: var(--accent); transform: translateY(calc(-8 * var(--px))); }
/* Bild und Textblock sitzen höher als im Entwurf: eine zweizeilige Teamliste
   stieß sonst unten an den Kartenrand. */
.card__img { position: absolute; left: 0; top: 0; width: 100%; height: calc(285 * var(--px)); object-fit: cover; }
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: calc(285 * var(--px));
  background: linear-gradient(180deg, transparent 30%, rgba(9,9,9,.55) 72%, #090909 100%);
  z-index: 1;
}
.card__title {
  position: absolute;
  left: calc(20 * var(--px));
  right: calc(20 * var(--px));
  top: calc(225 * var(--px));
  z-index: 2;
  font-size: calc(17 * var(--px));
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.card__foot { position: absolute; left: calc(20 * var(--px)); right: calc(16 * var(--px)); top: calc(285 * var(--px)); z-index: 2; }
.card__date { font-size: calc(14 * var(--px)); color: var(--muted); }
.card__meta { margin-top: calc(22 * var(--px)); display: grid; grid-template-columns: calc(62 * var(--px)) 1fr; row-gap: calc(9 * var(--px)); font-size: calc(13.5 * var(--px)); }
.card__k { color: var(--muted); }
.card__v { color: var(--accent); }
.card__text { position: absolute; left: calc(20 * var(--px)); right: calc(20 * var(--px)); top: calc(285 * var(--px)); z-index: 2; font-size: calc(14.5 * var(--px)); line-height: 1.62; color: #efefef; }

/* Staffel ohne veröffentlichte Folgen */
.rail-leer {
  padding-top: calc(40 * var(--px));
  font-size: calc(18 * var(--px));
  line-height: 1.8;
  color: var(--muted);
}

.pager { position: absolute; left: 0; top: calc(502 * var(--px)); display: flex; gap: calc(11 * var(--px)); }
.pager button {
  width: calc(148 * var(--px));
  height: calc(5 * var(--px));
  border-radius: calc(3 * var(--px));
  background: var(--line);
  transition: background-color .3s ease;
}
.pager button[aria-current='true'] { background: var(--accent); }
.pager button:hover { background: #9a9a9a; }
.pager button[aria-current='true']:hover { background: var(--accent); }

/* =============================================================================
   01 · Team
   ============================================================================= */
.panel--team { position: absolute; left: calc(640 * var(--px)); top: calc(192 * var(--px)); width: calc(1078 * var(--px)); }
.team { display: grid; grid-template-columns: repeat(5, calc(198 * var(--px))); gap: calc(22 * var(--px)); }
.team li { position: relative; aspect-ratio: 1; overflow: hidden; border: calc(2 * var(--px)) solid var(--ok); }
.team li.is-former { border-color: var(--gone); }
.team img { width: 100%; height: 100%; object-fit: cover; }
.team li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ok);
  mix-blend-mode: color;
  opacity: .92;
  transition: opacity .35s ease;
}
.team li.is-former::after { background: var(--gone); }
.team li:hover::after { opacity: 0; }
.team figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: calc(14 * var(--px)) calc(12 * var(--px)) calc(10 * var(--px));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88));
  opacity: 0;
  transform: translateY(calc(8 * var(--px)));
  transition: opacity .3s ease, transform .3s var(--ease);
}
.team li:hover figcaption { opacity: 1; transform: none; }
.team b { display: block; font-size: calc(14 * var(--px)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.team span { display: block; font-size: calc(12 * var(--px)); color: var(--muted); }

/* =============================================================================
   02 · Staffel-Karussell
   Maße aus fallakten-2-1.png: Mittelkachel bei (1280 | 537), Nachbarn bei ±345
   mit Faktor 0,677 dahinter. Die Bildfläche ist 16:9, der Glasrand 28 px breit.
   ============================================================================= */
.carousel { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

.season {
  position: absolute;
  left: calc(1280 * var(--px));
  top: calc(537 * var(--px));
  width: calc(740 * var(--px));
  height: calc(441 * var(--px));
  margin: calc(-220.5 * var(--px)) 0 0 calc(-370 * var(--px));
  padding: calc(28 * var(--px));
  pointer-events: auto;
  z-index: var(--layer, 1);
  opacity: var(--fade, 1);
  /* Versatz als Prozent der eigenen Breite: dadurch skaliert das Karussell
     ohne weiteres Zutun mit, wenn die Kachel auf Mobil kleiner wird. */
  transform: translateX(calc(var(--pos, 0) * 46.6%)) scale(var(--scale, 1));
  transition: transform .65s var(--ease), opacity .5s ease,
              background-color .45s ease, box-shadow .45s ease;
}

/* Aero Glass — nur um die gewählte Staffel. Die Farbwerte setzt das Skript,
   damit ältere Browser ohne color-mix() nicht ausfallen. */
.season.is-active {
  background: var(--glass);
  backdrop-filter: blur(calc(16 * var(--px))) saturate(1.5);
  -webkit-backdrop-filter: blur(calc(16 * var(--px))) saturate(1.5);
  box-shadow:
    0 0 calc(80 * var(--px)) var(--glow),
    inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.season__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.season__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  transition: background-color .45s ease;
}
.season.is-active .season__img::after { background: rgba(0, 0, 0, .12); }
.season:not(.is-active):hover .season__img::after { background: rgba(0, 0, 0, .3); }

.season__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(4 * var(--px));
  color: #fff;
  text-shadow: 0 calc(4 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, .7);
}
.season__label b { font-size: calc(84 * var(--px)); font-weight: 700; line-height: 1; }
.season__label i {
  font-size: calc(56 * var(--px));
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.season__soon {
  margin-top: calc(10 * var(--px));
  font-size: calc(15 * var(--px));
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
}
.season--geplant .season__img { filter: grayscale(.55); }

/* =============================================================================
   03 · Orte
   ============================================================================= */
/* Die Kartenebene liegt über der ganzen Szene. Ohne pointer-events:none läge sie
   über dem Text und man könnte ihn weder markieren noch anklicken. */
.panel--map, .pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  pointer-events: auto;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translateX(-50%);
  text-align: center;
  cursor: default;
}
.pin svg { width: calc(21 * var(--px)); height: calc(29 * var(--px)); margin: 0 auto; color: var(--accent); fill: var(--accent); transition: transform .3s var(--ease); }
.pin b { display: block; margin-top: calc(4 * var(--px)); font-size: calc(12.5 * var(--px)); font-weight: 500; letter-spacing: .11em; text-transform: uppercase; text-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) #000; }
.pin i { display: block; width: 1px; height: calc(58 * var(--px)); margin: calc(8 * var(--px)) auto 0; background: linear-gradient(180deg, rgba(255,255,255,.85), transparent); }
.pin:hover svg { transform: translateY(calc(-5 * var(--px))) scale(1.15); }

.places { position: absolute; left: 0; top: calc(300 * var(--px)); width: calc(430 * var(--px)); }
.places button {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--px));
  width: 100%;
  height: calc(46 * var(--px));
  border-bottom: 1px solid rgba(112, 112, 112, .35);
  font-size: calc(16 * var(--px));
  text-align: left;
  transition: color .25s ease, padding-left .25s var(--ease);
}
.places button span { margin-left: auto; font-size: calc(13 * var(--px)); color: var(--muted); }
.places button:hover { color: var(--accent); padding-left: calc(8 * var(--px)); }
.places button[aria-current='true'] { color: var(--accent); }

/* =============================================================================
   04 · Gerätedetail
   ============================================================================= */
.specs { position: absolute; left: calc(600 * var(--px)); top: calc(192 * var(--px)); width: calc(390 * var(--px)); z-index: 10; }
.specs li { margin-bottom: calc(42 * var(--px)); text-align: right; }
.specs b { display: block; font-size: calc(17 * var(--px)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.specs p { margin-top: calc(6 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.62; }

.device {
  position: absolute;
  left: calc(1030 * var(--px));
  top: calc(192 * var(--px));
  width: calc(800 * var(--px));
  height: calc(768 * var(--px));
  border: calc(2 * var(--px)) solid #fff;
  overflow: hidden;
  z-index: 10;
}
.device img { width: 100%; height: 100%; object-fit: cover; }
.device__callouts { position: absolute; inset: 0; width: 100%; height: 100%; }
.device__callouts line { stroke: var(--accent); stroke-width: 2.4; }
.device__callouts circle { fill: none; stroke: var(--accent); stroke-width: 3.4; }
.device__callouts text { fill: #fff; font-size: 17px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }
.device__note {
  position: absolute;
  left: calc(22 * var(--px));
  bottom: calc(18 * var(--px));
  font-size: calc(13 * var(--px));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.device__note[hidden] { display: none; }

/* =============================================================================
   05 · Formular
   ============================================================================= */
.form { position: absolute; left: calc(700 * var(--px)); top: calc(214 * var(--px)); width: calc(1080 * var(--px)); z-index: 10; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(38 * var(--px)); }
.field { display: block; margin-bottom: calc(34 * var(--px)); }
.field > span { display: block; margin-bottom: calc(10 * var(--px)); font-size: calc(14 * var(--px)); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.field input, .field textarea {
  width: 100%;
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: calc(4 * var(--px));
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font: inherit;
  font-size: calc(16 * var(--px));
  resize: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); background: rgba(255, 255, 255, .07); outline: none; }
.check { display: flex; align-items: flex-start; gap: calc(14 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.6; }
.check input { width: calc(18 * var(--px)); height: calc(18 * var(--px)); margin-top: calc(4 * var(--px)); accent-color: var(--accent); flex: none; }
.check a { color: var(--accent); }
.form__foot { display: flex; align-items: center; gap: calc(28 * var(--px)); margin-top: calc(38 * var(--px)); }
.form__foot .btn--solid { width: calc(260 * var(--px)); }
.form__note { font-size: calc(15 * var(--px)); color: var(--muted); }
.form__note.is-error { color: #e2703a; }
.form__note.is-ok { color: #7fc084; }

/* =============================================================================
   06 · Impressionen und Rechtliches
   ============================================================================= */
.gallery {
  position: absolute;
  left: calc(240 * var(--px));
  top: calc(196 * var(--px));
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, calc(250 * var(--px)));
  gap: calc(22 * var(--px));
}
.gallery li:first-child { grid-column-start: 2; }
/* Wie bei den Clips: Rahmen als innerer Schatten, und das Bild bekommt eine
   eigene Ebene. Ein filter: brightness() beim Skalieren lässt den Rahmen
   zusätzlich zittern, deshalb erledigt das Aufhellen eine Überlagerung. */
.gallery button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85);
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transition: transform .7s var(--ease);
}
.gallery button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background .35s ease;
  pointer-events: none;
}
.gallery button:hover img { transform: scale(1.07); }
.gallery button:hover::after { background: rgba(255, 255, 255, .12); }

.legal-tile {
  position: absolute;
  left: calc(1388 * var(--px));
  top: calc(424 * var(--px));
  width: calc(294 * var(--px));
  height: calc(341 * var(--px));
  z-index: 10;
  display: grid;
  place-content: center;
  gap: calc(34 * var(--px));
  background: var(--accent);
  color: var(--on-accent);
  border: calc(4 * var(--px)) solid rgba(255, 255, 255, .22);
  transition: background-color .3s ease, transform .4s var(--ease);
}
.legal-tile span { font-size: calc(25 * var(--px)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.legal-tile svg { width: calc(52 * var(--px)); height: calc(52 * var(--px)); margin: 0 auto; }
.legal-tile:hover { filter: brightness(1.12); transform: translateY(calc(-6 * var(--px))); }

.legal {
  position: absolute;
  left: calc(608 * var(--px));
  top: calc(190 * var(--px));
  width: calc(620 * var(--px));
  z-index: 10;
  font-size: calc(17 * var(--px));
  line-height: 1.55;
}
.legal h3 { font-size: calc(17 * var(--px)); font-weight: 700; color: var(--accent); }
.legal p { margin: 0 0 calc(48 * var(--px)); }
.legal h3 + p { margin-top: calc(2 * var(--px)); }

/* Datenschutz: zwei Spalten je Blätterseite */
/* Endet oberhalb der Pfeile unten rechts. */
#legalPages { left: calc(546 * var(--px)); top: calc(190 * var(--px)); width: calc(1290 * var(--px)); height: calc(765 * var(--px)); z-index: 10; }
.hpage > .legal--cols {
  position: absolute;
  inset: 0;
  left: 0; top: 0;
  width: 100%;
  columns: 2;
  column-gap: calc(50 * var(--px));
  font-size: calc(15.5 * var(--px));
  line-height: 1.62;
}
.legal--cols p { margin: 0 0 calc(20 * var(--px)); }
.legal--cols h3 { margin-top: calc(14 * var(--px)); break-after: avoid; }
.legal--cols h3:first-child { margin-top: 0; }

/* =============================================================================
   Orangefarbener Schließen-Knopf (Menü und Footer)
   ============================================================================= */
.exit {
  width: calc(95 * var(--px));
  height: calc(95 * var(--px));
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent);
  transition: filter .25s ease;
}
.exit svg { width: calc(52 * var(--px)); height: calc(52 * var(--px)); fill: var(--on-accent); }
.exit:hover { filter: brightness(1.12); }

/* =============================================================================
   Burger-Menü — Panel von rechts, die Seite bleibt daneben sichtbar
   ============================================================================= */
.menu {
  position: absolute;
  top: calc(41 * var(--px));
  right: calc(41 * var(--px));
  bottom: calc(41 * var(--px));
  width: calc(415 * var(--px));
  z-index: 46;
  display: flex;
  flex-direction: column;
  padding: calc(48 * var(--px)) 0 calc(24 * var(--px));
  background: #000;
  border-left: 1px solid rgba(255, 255, 255, .18);
  /* weit genug, dass im geschlossenen Zustand nichts am Bühnenrand hervorschaut */
  transform: translateX(calc(100% + 60 * var(--px)));
  transition: transform .55s var(--ease);
}
.menu.is-open { transform: none; }

.menu__list { padding-left: calc(32 * var(--px)); }
.menu__list li + li { margin-top: calc(44 * var(--px)); }
.menu__list button {
  display: flex;
  align-items: center;
  gap: calc(44 * var(--px));
  transition: color .25s ease, padding-left .3s var(--ease);
}
.menu__list em { font-size: calc(64 * var(--px)); font-weight: 700; font-style: normal; line-height: 1; color: #6a6863; transition: color .25s ease; }
.menu__list b { font-size: calc(26 * var(--px)); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.menu__list button:hover { color: var(--accent); padding-left: calc(14 * var(--px)); }
.menu__list button:hover em { color: var(--accent); }
.menu__list button[aria-current='true'] em { color: var(--accent); }

.menu__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: flex-end; gap: calc(26 * var(--px)); padding-right: calc(7 * var(--px)); }
.menu__legal { text-align: right; font-size: calc(20 * var(--px)); line-height: 1.55; color: var(--accent); }
.menu__legal button { display: block; margin-left: auto; transition: color .2s ease; }
.menu__legal button:hover { color: #fff; }
.menu__legal span { display: block; }

/* =============================================================================
   Footer — fährt über den Fußabdruck-Knopf ein
   ============================================================================= */
.site-footer {
  position: absolute;
  left: calc(41 * var(--px));
  right: calc(41 * var(--px));
  bottom: calc(41 * var(--px));
  height: calc(200 * var(--px));
  z-index: 44;
  display: flex;
  align-items: center;
  gap: calc(44 * var(--px));
  padding: 0 calc(56 * var(--px));
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, .18);
  transform: translateY(calc(100% + 60 * var(--px)));
  transition: transform .55s var(--ease);
}
.site-footer.is-open { transform: none; }
.site-footer__mark { width: calc(118 * var(--px)); height: auto; flex: none; }
.site-footer__adr { font-size: calc(17 * var(--px)); line-height: 1.5; }
.site-footer__label { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: calc(4 * var(--px)); }
.site-footer__copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: calc(17 * var(--px));
}
.site-footer .exit { margin-left: auto; }

/* =============================================================================
   Folgen einer Staffel — eine Glasfläche, zwei Zustände
   Statt Pop-up im Pop-up bleibt die Fläche stehen; nur der Inhalt wechselt
   zwischen Raster und Detailansicht. Vorlage: die beiden neuen Entwürfe.
   ============================================================================= */
/* Die äußere Fläche ist nur der Klickfänger: ein Klick daneben schließt. */
.folgen {
  position: absolute;
  inset: 0;
  z-index: 52;
  animation: fade .35s ease;
}
.folgen[hidden] { display: none; }

.folgen__panel {
  position: absolute;
  inset: calc(40 * var(--px));
  background: var(--panel-glass);
  backdrop-filter: blur(calc(30 * var(--px))) saturate(1.5);
  -webkit-backdrop-filter: blur(calc(30 * var(--px))) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.folgen__raster, .folgen__akte { position: absolute; inset: 0; }

/* In der Detailansicht bleibt das Raster als weiche Ebene dahinter stehen. */
.folgen[data-state='raster'] .folgen__akte { display: none; }
.folgen[data-state='akte'] .folgen__raster {
  opacity: .22;
  filter: blur(calc(3 * var(--px)));
  pointer-events: none;
}

/* Im Raster füllt das Kachelgitter die rechte obere Ecke — dort läge das X auf
   einer Kachel. Zurück geht es deshalb über den Knopf in der linken Spalte. */
.folgen[data-state='raster'] .folgen__close { display: none; }

.folgen__close {
  position: absolute;
  right: calc(96 * var(--px));
  top: calc(96 * var(--px));
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  z-index: 3;
  transition: color .2s ease, transform .3s var(--ease);
}
.folgen__close svg { width: 100%; height: 100%; }
.folgen__close:hover { color: var(--accent); transform: rotate(90deg); }

/* --- Zustand 1: Raster ------------------------------------------------------ */
.folgen__head { position: absolute; left: calc(52 * var(--px)); top: calc(52 * var(--px)); width: calc(310 * var(--px)); }
.folgen__num { font-size: calc(80 * var(--px)); font-weight: 800; line-height: .9; color: var(--accent); }
.folgen__title {
  margin-top: calc(30 * var(--px));
  font-size: calc(26 * var(--px));
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}
.folgen__staffel {
  margin-top: calc(26 * var(--px));
  font-size: calc(16 * var(--px));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.folgen__list {
  position: absolute;
  left: calc(403 * var(--px));
  top: calc(48 * var(--px));
  width: calc(1384 * var(--px));
  display: grid;
  grid-template-columns: repeat(3, calc(448 * var(--px)));
  gap: calc(20 * var(--px));
}

.fcard {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: transform .4s var(--ease), box-shadow .3s ease;
}
.fcard:hover { transform: translateY(calc(-6 * var(--px))); box-shadow: inset 0 0 0 2px var(--accent); }
.fcard img { width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; transition: transform .7s var(--ease); }
.fcard:hover img { transform: scale(1.05); }
.fcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: calc(20 * var(--px)) calc(18 * var(--px)) calc(18 * var(--px));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88) 36%, rgba(0, 0, 0, .95));
  text-align: center;
}
.fcard__title { font-size: calc(17 * var(--px)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fcard__meta {
  margin-top: calc(14 * var(--px));
  display: flex;
  justify-content: center;
  gap: calc(26 * var(--px));
  font-size: calc(14 * var(--px));
}
.fcard__meta b { margin-left: calc(9 * var(--px)); font-weight: 400; color: var(--accent); }
.fcard__date { color: var(--muted); }

.reihen { margin-top: calc(64 * var(--px)); }
.reihen button {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  height: calc(46 * var(--px));
  font-size: calc(18 * var(--px));
  letter-spacing: .02em;
  transition: color .25s ease;
}
.reihen button::before {
  content: '';
  width: calc(10 * var(--px));
  height: calc(19 * var(--px));
  background: var(--line);
  transition: background-color .25s ease;
}
.reihen button:hover { color: var(--accent); }
.reihen button[aria-pressed='true'] { color: var(--accent); }
.reihen button[aria-pressed='true']::before { background: var(--accent); }

/* Zweizeilige Beschriftung der Nebenfolgen-Kacheln */
.season__label em {
  margin-top: calc(10 * var(--px));
  font-size: calc(20 * var(--px));
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .9;
}
.season__label i.ist-reihe { font-size: calc(46 * var(--px)); font-weight: 700; }

.pager--folgen { left: calc(403 * var(--px)); top: auto; bottom: calc(52 * var(--px)); }
.pager--folgen button { width: calc(98 * var(--px)); background: rgba(255, 255, 255, .85); }
.pager--folgen button:hover { background: #fff; }
.pager--folgen button[aria-current='true'],
.pager--folgen button[aria-current='true']:hover { background: var(--accent); }

.folgen__steps {
  position: absolute;
  right: calc(58 * var(--px));
  bottom: calc(44 * var(--px));
  display: flex;
  gap: calc(63 * var(--px));
}

/* --- Zustand 2: eine Folge --------------------------------------------------- */
.folgen__akte {
  inset: calc(40 * var(--px));
  padding: calc(50 * var(--px));
  background: rgba(6, 6, 6, .93);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.akte__title {
  margin-top: calc(8 * var(--px));
  font-size: calc(52 * var(--px));
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.akte__body {
  margin-top: calc(56 * var(--px));
  display: grid;
  grid-template-columns: calc(1050 * var(--px)) 1fr;
  gap: calc(60 * var(--px));
}
.akte__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  overflow: hidden;
}
.akte__video iframe { width: 100%; height: 100%; border: 0; }

/* Zwei-Klick-Lösung: erst auf Klick wird YouTube nachgeladen. */
.yt { position: absolute; inset: 0; display: block; width: 100%; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .55; backface-visibility: hidden; transition: opacity .35s ease; }
.yt:hover img { opacity: .8; }
.yt svg {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(96 * var(--px)); height: calc(96 * var(--px));
  margin: calc(-48 * var(--px)) 0 0 calc(-48 * var(--px));
  fill: #fff;
  transition: fill .3s ease, transform .3s var(--ease);
}
.yt:hover svg { fill: var(--accent); transform: scale(1.1); }
.yt__hint {
  position: absolute;
  left: 0; right: 0; bottom: calc(24 * var(--px));
  text-align: center;
  font-size: calc(14 * var(--px));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.akte__video p {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 0 calc(80 * var(--px));
  text-align: center;
  font-size: calc(17 * var(--px));
  line-height: 1.7;
  color: var(--muted);
}

.akte__meta {
  display: grid;
  grid-template-columns: calc(116 * var(--px)) 1fr;
  row-gap: calc(24 * var(--px));
  font-size: calc(18 * var(--px));
}
.akte__meta dt { font-weight: 700; }
.akte__meta dd { color: var(--accent); }
.akte__text { margin-top: calc(48 * var(--px)); font-size: calc(17 * var(--px)); line-height: 1.8; }

/* =============================================================================
   Lightbox
   ============================================================================= */
.lightbox {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: calc(90 * var(--px));
  background: rgba(0, 0, 0, .94);
  animation: fade .3s ease;
}
@keyframes fade { from { opacity: 0 } }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid rgba(255, 255, 255, .3); }
.lightbox__close { position: absolute; right: calc(96 * var(--px)); top: calc(92 * var(--px)); width: calc(30 * var(--px)); height: calc(30 * var(--px)); }
.lightbox__close svg { width: 100%; height: 100%; }
.lightbox__close:hover { color: var(--accent); }

/* =============================================================================
   Kleine Fenster — das Design existiert bislang nur für Desktop.
   ============================================================================= */
@media (max-width: 760px) {
  body { display: block; padding: 2.5rem 0 1rem; }
  .stage { margin: 0 auto; }
  .hint-small {
    display: block;
    padding: 0 1.25rem 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #9a9a9a;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}