/* Cypher News Pitch · "Sendersuchlauf"
   Idee: Die Seite ist ein Empfänger. Scrollen ist Sendersuchlauf, zwischen den Szenen rauscht es, auf jeder Szene rastet ein Sender ein.
   Zwei Farben (Schwarz #0d0d0d, Signal-Orange #ff4f12 als flache Fläche), Anybody (Breite als Ausdruck) + Martian Mono.
   Eckig, Haarlinien, kein Radius (Ausnahme: das Handy als Gerät). Keine Glows, keine Verläufe, kein kursives Akzentwort.
   Technik: nur transform/opacity/clip-path animieren, Hover nur bei feinem Zeiger, keine Inline-Stile (CSP). */

@font-face { font-family: 'Anybody'; src: url(../fonts/anybody.woff2) format('woff2'); font-weight: 300 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url(../fonts/martian-mono.woff2) format('woff2'); font-weight: 300 700; font-stretch: 75% 112.5%; font-style: normal; font-display: swap; }

:root {
  --ink: #0d0d0d; --ink-2: #161616; --ink-3: #1f1f1e;
  --sig: #ff4f12;
  --paper: #efeee9; --mute: #9d9c97; --dim: #6e6d69;
  --line: #2c2c2a; --line-2: #4f4f4c;
  --display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gut: clamp(16px, 4.4vw, 72px);
  --arrive: cubic-bezier(.16, 1, .3, 1);
  --curtain: cubic-bezier(.76, 0, .24, 1);
  --push: cubic-bezier(.2, .8, .2, 1);
  --top-h: 56px;
  --hud-h: 56px;
  --focus: var(--sig);
  --sync-bg: var(--ink);
  --sync-hot-bg: var(--sig);
  --sync-hot-fg: var(--ink);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: calc(var(--top-h) + 12px); background: var(--ink); }
html:not(.js) { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 15px/1.62 var(--mono); overflow-x: clip; min-height: 100vh; }
html.i18n-pending body { visibility: hidden; animation: cn-show 0s 1.2s forwards; }
@keyframes cn-show { to { visibility: visible; } }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
s { text-decoration: none; }
kbd { font: 600 11px/1 var(--mono); padding: 4px 6px; border: 1px solid currentColor; }
sup { line-height: 0; font-size: 1em; vertical-align: baseline; }
sup a { position: relative; top: -.42em; display: inline-block; min-width: 24px; min-height: 24px; padding: 0 2px; margin-left: 3px; font: 600 12px/24px var(--mono); color: var(--sig); text-decoration: none; text-align: center; }
sup a::before { content: '['; color: var(--mute); }
sup a::after { content: ']'; color: var(--mute); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--sig); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.label { font: 500 12px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* Korn: Material, nicht Deko. Zwischen den Szenen stärker (core.js setzt die Deckkraft). */
.grain { position: fixed; inset: -60px; z-index: 90; pointer-events: none; opacity: .065; background: url(../img/grain.svg) 0 0 / 220px 220px repeat; }
html.js:not(.rm) .grain { animation: grain .7s steps(4) infinite; }
html.js:not(.ready) .grain { display: none; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 14px); } 50% { transform: translate(18px, -26px); } 75% { transform: translate(-30px, -8px); } 100% { transform: translate(0, 0); } }

.skip { position: fixed; left: 12px; top: 8px; z-index: 200; padding: 12px 16px; background: var(--paper); color: var(--ink); font: 600 13px/1 var(--mono); text-decoration: none; transform: translateY(-160%); transition: transform .18s var(--push); }
.skip:focus { transform: none; }

/* ── Kopfzeile: feste schwarze Leiste ── */
.top { position: fixed; z-index: 60; inset: 0 0 auto; height: calc(var(--top-h) + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: env(safe-area-inset-top) var(--gut) 0; background: var(--ink); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.brand-word { font: 900 15px/1 var(--display); font-stretch: 150%; text-transform: uppercase; letter-spacing: .01em; }
.brand-tag { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 5px 6px; border: 1px solid var(--line-2); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; border: 1px solid var(--line-2); }
.lang-btn { min-width: 44px; min-height: 44px; border: 0; background: transparent; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--mute); transition: background-color .14s ease, color .14s ease; }
.lang-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.top-app { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; color: var(--paper); }
.top-app .ta-s { display: none; }
@media (max-width: 560px) { .top-app .ta-l { display: none; } .top-app .ta-s { display: inline; } }
@media (hover: hover) and (pointer: fine) { .top-app:hover { text-decoration-thickness: 3px; color: var(--sig); } }
.btn-present { display: none; align-items: center; gap: 12px; min-height: 42px; padding: 0 8px 0 14px; border: 1px solid var(--sig); background: transparent; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); transition: background-color .14s ease, color .14s ease; }
.btn-present kbd { border-color: var(--sig); color: var(--sig); }
.nojs { position: fixed; z-index: 61; top: calc(var(--top-h) + 8px); left: var(--gut); right: var(--gut); padding: 10px 14px; border: 1px dashed var(--line-2); background: var(--ink-2); font-size: 13px; }
.narrow-note { position: fixed; z-index: 62; top: calc(var(--top-h) + 8px); left: var(--gut); right: var(--gut); padding: 14px 16px; background: var(--paper); color: var(--ink); font: 500 13px/1.5 var(--mono); }
@media (min-width: 900px), (pointer: fine) and (min-width: 640px) { .btn-present { display: inline-flex; } }
@media (hover: hover) and (pointer: fine) {
  .btn-present:hover { background: var(--sig); color: var(--ink); }
  .btn-present:hover kbd { border-color: var(--ink); color: var(--ink); }
  .lang-btn:not([aria-pressed="true"]):hover { color: var(--paper); }
}

/* ── Senderskala (Navigation und Fortschritt) ── */
.hud { position: fixed; z-index: 55; inset: auto 0 0; height: calc(var(--hud-h) + env(safe-area-inset-bottom)); padding: 0 var(--gut) env(safe-area-inset-bottom); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; background: var(--ink); border-top: 1px solid var(--line); }
html:not(.js) .hud { display: none; }
.hud-read { display: flex; align-items: baseline; gap: 7px; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--mute); }
.hud-mhz { min-width: 4.4ch; font: 800 22px/1 var(--display); font-stretch: 125%; text-align: right; color: var(--sig); font-variant-numeric: tabular-nums; }
.dial { position: relative; height: 40px; }
.dial::before { content: ''; position: absolute; left: 22px; right: 22px; top: 9px; height: 7px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 2%); }
.dial::after { content: ''; position: absolute; left: 22px; right: 22px; top: 16px; height: 1px; background: var(--line-2); }
.dial-st { display: none; position: absolute; inset: 0; justify-content: space-between; }
.st { position: relative; display: grid; justify-items: center; align-content: start; width: 44px; height: 40px; padding-top: 2px; text-decoration: none; }
.st::before { content: ''; width: 1px; height: 15px; background: var(--paper); opacity: .6; }
.st-f { margin-top: 5px; font: 500 11px/1 var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.st-l { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); padding: 8px 10px; background: var(--paper); color: var(--ink); font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.st:focus-visible .st-l { opacity: 1; }
.st[aria-current="step"] .st-f { color: var(--paper); }
.st[aria-current="step"]::before { background: var(--sig); opacity: 1; }
.needle { position: absolute; left: 0; top: 4px; width: 3px; height: 16px; margin-left: 20.5px; background: var(--sig); will-change: transform; }
html.js:not(.rm):not(.deck-boot) .needle { animation: needle-in 1.25s var(--curtain) .15s backwards; }
@keyframes needle-in { from { translate: -60px 0; opacity: 0; } 40% { opacity: 1; } }
.hud-now { display: none; align-items: baseline; gap: 10px; }
.hud-num { font: 600 12px/1 var(--mono); color: var(--sig); }
.hud-name { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
@media (min-width: 900px) {
  .hud { grid-template-columns: auto minmax(0, 1fr) 200px; gap: 26px; }
  .dial-st { display: flex; }
  .hud-now { display: flex; justify-content: flex-end; }
}
@media (hover: hover) and (pointer: fine) {
  .st:hover .st-l { opacity: 1; }
  .st:hover::before { opacity: 1; }
}

/* ── Typografie ── */
main { display: block; outline: none; }
.sc { position: relative; padding: clamp(96px, 14vh, 168px) var(--gut); }
.h-xl, .h-l, .h-m, .title, .insight-h, .reveal, .end-h, .punch, .lead { font-family: var(--display); }
.h-xl { font-size: clamp(46px, 8.2vw, 150px); font-weight: 850; font-stretch: 62%; line-height: .86; letter-spacing: -.012em; }
.h-l { font-size: clamp(38px, 5.6vw, 100px); font-weight: 800; font-stretch: 74%; line-height: .9; letter-spacing: -.01em; }
.h-m { font-size: clamp(28px, 3.1vw, 50px); font-weight: 800; font-stretch: 100%; line-height: .96; }
.lede { max-width: 54ch; margin-top: clamp(20px, 3vh, 30px); font-size: 15px; line-height: 1.66; color: var(--paper); text-wrap: pretty; }
.note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 60ch; margin-top: 22px; font-size: 12.5px; line-height: 1.55; color: var(--mute); }
.tag { display: inline-block; padding: 4px 7px; border: 1px solid var(--line-2); font: 600 11px/1.1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.h-xl, .h-l, .ins-2, .punch, .lead { word-spacing: .14em; }
.ww { font-weight: 900; font-stretch: 150%; }
.nw { white-space: nowrap; }
.wn { font-weight: 400; font-stretch: 55%; color: var(--mute); }

/* Knöpfe: Kästen */
.btn-sig, .btn-line, .btn-ink { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 0 20px; border: 1px solid transparent; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color .14s ease, color .14s ease, border-color .14s ease; }
.btn-sig { background: var(--sig); color: var(--ink); border-color: var(--sig); }
.btn-line { background: transparent; color: var(--paper); border-color: var(--line-2); }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-sig[aria-disabled="true"] { background: transparent; color: var(--mute); border-color: var(--line-2); cursor: progress; }
.arrow { display: inline-block; transition: translate .2s var(--push); }
.btn-sig:active, .btn-line:active, .btn-ink:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) {
  .btn-sig:not([aria-disabled="true"]):hover { background: var(--ink); color: var(--sig); }
  .btn-line:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
  .btn-ink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .btn-sig:hover .arrow, .btn-ink:hover .arrow { translate: 4px 0; }
}
.ic-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); background: transparent; font: 600 16px/1 var(--mono); transition: background-color .14s ease, color .14s ease; }
.ic-btn:active { background: var(--paper); color: var(--ink); }

/* Platzhalter: geschwärzt und klar beschriftet */
.ph { display: inline-block; vertical-align: -.06em; width: 3.4em; max-width: 100%; height: .74em; background: repeating-linear-gradient(90deg, rgba(239, 238, 233, .34) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px rgba(239, 238, 233, .2); user-select: none; }
.ph-l { display: inline-block; margin-top: 8px; padding: 5px 8px; border: 1px dashed var(--line-2); font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); white-space: normal; }
.ph-l::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: .05em; background: var(--sig); }

/* ═════════ Bildsynchronisation (Signatur 1) ═════════
   Über dem echten Text liegen horizontale Bänder mit Kopien (aria-hidden). Sie sind verschoben und rasten ein. */
.has-sync { position: relative; }
.sync { pointer-events: none; container-type: size; }
.has-sync > .sync { position: absolute; inset: 0; overflow: clip; }
/* Bänder als Ausschnitte mit overflow: hidden (pixelgenau, keine Kantenglättung wie bei clip-path, also keine Nähte) */
.band { --top: calc(var(--i) * 100cqh / var(--n)); --h: calc(100cqh / var(--n) + 1px); position: absolute; left: -60vw; right: -60vw; top: var(--top); height: var(--h); display: block; overflow: hidden; background: var(--sync-bg); }
.band:first-child { --top: -3cqh; --h: calc(3cqh + 100cqh / var(--n) + 1px); }
.band:last-child { --h: calc(100cqh / var(--n) + 3cqh); }
/* In Ruhe ist nur der echte Text sichtbar; die Bänder erscheinen nur, solange das Bild nicht synchron ist */
.has-sync > .sync { visibility: hidden; }
.sync.go { visibility: visible; animation: sync-off 0s 1.45s forwards; }
@keyframes sync-off { to { visibility: hidden; } }
.bc { position: absolute; left: 60vw; top: calc(-1 * var(--top)); width: 100cqw; display: block; }
.sync-8 { --n: 8; }
.sync-8 .band:nth-child(1) { --i: 0; --dx: 7vw; } .sync-8 .band:nth-child(2) { --i: 1; --dx: -11vw; }
.sync-8 .band:nth-child(3) { --i: 2; --dx: 3vw; } .sync-8 .band:nth-child(4) { --i: 3; --dx: 16vw; }
.sync-8 .band:nth-child(5) { --i: 4; --dx: -5vw; } .sync-8 .band:nth-child(6) { --i: 5; --dx: 9vw; }
.sync-8 .band:nth-child(7) { --i: 6; --dx: -14vw; } .sync-8 .band:nth-child(8) { --i: 7; --dx: 4vw; }
@keyframes jit {
  0% { translate: var(--dx) 0; }
  16% { translate: calc(var(--dx) * -.62) 0; }
  30% { translate: calc(var(--dx) * .38) 0; }
  46% { translate: calc(var(--dx) * -.2) 0; }
  62% { translate: calc(var(--dx) * .07) 0; }
  74%, 100% { translate: 0 0; }
}
@keyframes hot {
  0%, 26% { background: var(--sync-hot-bg); color: var(--sync-hot-fg); }
  27%, 50% { background: var(--sync-bg); color: inherit; }
  51%, 60% { background: var(--sync-hot-bg); color: var(--sync-hot-fg); }
  61%, 100% { background: var(--sync-bg); color: inherit; }
}
html:not(.rm):not(.deck-boot) .sc-cold .sync { animation: sync-off 0s 1.45s forwards; }
html:not(.rm):not(.deck-boot) .sc-cold .sync .bc, .sync.go .bc { animation: jit 1.25s steps(3, jump-end) .15s backwards; }
html:not(.rm):not(.deck-boot) .sc-cold .sync .band:nth-child(3n), .sync.go .band:nth-child(3n) { animation: hot 1.25s steps(1, jump-end) .15s backwards; }
html:not(.rm) .sc-cold .sync.live { animation: none; visibility: hidden; }
html:not(.rm) .sc-cold .sync.live.on { visibility: visible; }
html.rm .sync { display: none; }

/* ═════════ 00 KALTSTART ═════════ */
.sc-cold { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: clamp(18px, 3vh, 36px); min-height: 100vh; min-height: 100svh; padding: calc(var(--top-h) + clamp(28px, 6vh, 72px)) var(--gut) calc(var(--hud-h) + clamp(24px, 5vh, 56px)); overflow: clip; }
.presents { align-self: start; }
.tune { position: relative; display: grid; container-type: inline-size; }
.tune > * { grid-area: 1 / 1; }
.tune > .sync { position: relative; }
.title { margin: 0; color: var(--paper); text-transform: uppercase; font-weight: 900; font-stretch: 150%; line-height: .8; letter-spacing: 0; }
.tl { display: block; white-space: nowrap; }
.tl-1 { font-size: calc(100cqw / 6.423 * .995); }
.tl-2 { font-size: calc(100cqw / 4.93 * .995); }
.title .tl-2 { padding-top: .04em; }
.sc-cold .sync .bc { font-family: var(--display); text-transform: uppercase; font-weight: 900; font-stretch: 150%; line-height: .8; color: var(--paper); }
.sc-cold .sync .tl-2 { padding-top: .04em; }
.cold-row { display: grid; gap: 22px; align-items: end; }
.cold-sub { font: 700 clamp(30px, 3.4vw, 54px)/.95 var(--display); font-stretch: 100%; }
.cold-line { max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--paper); }
.win { display: inline-grid; justify-self: start; gap: 6px; padding: 14px 16px 15px; background: var(--sig); color: var(--ink); rotate: -2deg; }
.win .label { color: var(--ink); }
.win-main { font: 900 22px/1 var(--display); font-stretch: 120%; text-transform: uppercase; }
.win-sub { max-width: 30ch; }
.cue { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cue-alt { display: none; }
@keyframes flick { 0% { opacity: 0; } 100% { opacity: 1; } }
html.js:not(.rm):not(.deck-boot) .sc-cold .presents,
html.js:not(.rm):not(.deck-boot) .sc-cold .cold-row > *,
html.js:not(.rm):not(.deck-boot) .sc-cold .cue { animation: flick .3s steps(2, jump-none) .8s backwards; }
html.js:not(.rm):not(.deck-boot) .sc-cold .cold-row > :nth-child(2) { animation-delay: .9s; }
html.js:not(.rm):not(.deck-boot) .sc-cold .cold-row > :nth-child(3) { animation-delay: 1s; }
@media (min-width: 900px) {
  .cold-row { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 3vw; }
  .win { justify-self: end; }
  .cue-alt { display: inline; }
}
@media (max-width: 699px) {
  .title, .sc-cold .sync .bc { font-weight: 800; font-stretch: 100%; }
  .tl-1 { font-size: calc(100cqw / 4.134 * .99); }
  .tl-2 { font-size: calc(100cqw / 3.203 * .99); }
}

/* ═════════ 01 DAS RAUSCHEN ═════════ */
.noise-grid { display: grid; gap: 56px; }
.missed { margin-top: clamp(36px, 6vh, 64px); border-bottom: 1px solid var(--line); }
.miss { position: relative; display: block; padding: 18px 120px 18px 0; border-top: 1px solid var(--line); font: 600 clamp(22px, 2.3vw, 34px)/1.12 var(--display); font-stretch: 92%; }
.miss-b { color: var(--mute); text-decoration: line-through; text-decoration-thickness: .1em; text-decoration-color: var(--sig); text-decoration-skip-ink: none; }
.stamp { position: absolute; right: 0; top: 50%; margin-top: -15px; padding: 8px 9px 7px; background: var(--sig); color: var(--ink); font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; rotate: -5deg; transform-origin: 100% 50%; }
.meter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: clamp(30px, 5vh, 48px); font-size: 14px; }
.meter-v { min-width: 5.4ch; font: 900 clamp(34px, 3.4vw, 52px)/1 var(--display); font-stretch: 150%; color: var(--sig); font-variant-numeric: tabular-nums; }
.meter small { flex-basis: 100%; font-size: 12px; color: var(--mute); }
html:not(.js) .meter { display: none; }
.feed-wrap { display: none; }
html.js .feed-wrap { display: block; }
.feed-cap { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.feed-n { color: var(--sig); }
.feed-win { position: relative; height: 480px; overflow: hidden; border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feed { position: absolute; left: 14px; right: 14px; top: 0; will-change: transform; }
.post { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.post-h { display: flex; align-items: center; gap: 10px; }
.av { flex: none; width: 22px; height: 22px; background: var(--line-2); }
.av.a2 { background: var(--dim); } .av.a3 { background: var(--ink-3); outline: 1px solid var(--line-2); outline-offset: -1px; }
.bar { display: block; height: 6px; background: var(--line); }
.bar.w30 { width: 30%; } .bar.w45 { width: 45%; } .bar.w60 { width: 60%; } .bar.w80 { width: 80%; } .bar.w90 { width: 90%; }
.post .bar + .bar { margin-top: 7px; }
.post-k { margin-left: auto; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.media { height: 90px; margin: 10px 0; background: var(--ink-3); }
.media.m2 { height: 140px; } .media.m3 { height: 116px; background: var(--ink-2); outline: 1px solid var(--line); outline-offset: -1px; }
.post-a { display: flex; gap: 10px; margin-top: 10px; }
.post-a i { width: 12px; height: 12px; border: 1px solid var(--line-2); }
.post.hot .media { display: grid; place-items: center; height: auto; min-height: 104px; padding: 16px; background: var(--sig); }
.post.hot .media p { font: 800 19px/1.08 var(--display); font-stretch: 90%; color: var(--ink); text-align: center; }
@media (min-width: 900px) {
  .noise-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 6vw; align-items: start; }
  .feed-wrap { position: sticky; top: calc(var(--top-h) + 8vh); }
  .feed-win { height: min(64vh, 640px); }
}

/* ═════════ 02 DIE EINSICHT: erste orange Vollfläche ═════════ */
.sc-insight { display: grid; align-content: center; gap: clamp(26px, 5vh, 64px); min-height: 100vh; min-height: 100svh; background: var(--sig); color: var(--ink); --focus: var(--ink); --sync-bg: var(--sig); --sync-hot-bg: var(--ink); --sync-hot-fg: var(--sig); }
.sc-insight ::selection { background: var(--ink); color: var(--sig); }
.insight-h { display: grid; gap: clamp(18px, 3vh, 30px); }
.ins-1 { font: 900 clamp(20px, 2.4vw, 40px)/1 var(--display); font-stretch: 150%; text-transform: uppercase; }
.ins-2 { max-width: 15ch; font: 850 clamp(40px, min(7.4vw, 10.5vh), 136px)/.86 var(--display); font-stretch: 56%; letter-spacing: -.01em; }
.reveal { justify-self: end; max-width: 100%; font: 900 clamp(34px, min(calc((100vw - 2 * var(--gut)) / 19.2), 11vh), 150px)/.86 var(--display); font-stretch: 150%; text-transform: uppercase; text-align: right; }
.insight-p { max-width: 50ch; justify-self: end; font-size: 15px; line-height: 1.66; }

/* ═════════ 03 DER DROP ═════════ */
.funnel { display: grid; gap: 36px; }
.funnel-copy .h-l { font-size: clamp(34px, 3.9vw, 68px); }
.funnel-copy .h-l .n { font-variant-numeric: tabular-nums; }
.count { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(24px, 4vh, 40px); }
.count-v { font: 900 clamp(80px, 9.6vw, 176px)/.8 var(--display); font-stretch: 150%; color: var(--sig); font-variant-numeric: tabular-nums; }
.stages { margin-top: 26px; max-width: 460px; border-bottom: 1px solid var(--line); }
.stages li { display: flex; align-items: baseline; gap: 16px; padding: 11px 0 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--paper); }
.stages b { min-width: 4.4ch; font: 800 20px/1 var(--display); font-stretch: 120%; font-variant-numeric: tabular-nums; }
html.js:not(.rm) .stages[data-live] li { color: var(--mute); }
html.js:not(.rm) .stages[data-live] li.on { color: var(--paper); }
.stages li.on b { color: var(--sig); }
.funnel-stage { position: relative; aspect-ratio: 4 / 5; width: 100%; margin-top: 30px; border: 1px solid var(--line); }
.funnel-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-cap { position: absolute; left: 0; bottom: calc(100% + 10px); }
.replay { margin-top: 20px; }
@media (min-width: 900px) {
  .funnel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: calc(100vh - var(--top-h) - var(--hud-h) - 48px); gap: 4vw; }
  .funnel-stage { aspect-ratio: auto; height: min(68vh, 700px); }
}

.try { display: grid; gap: 56px; margin-top: clamp(110px, 18vh, 200px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; border: 0; }
.chips legend { width: 100%; margin-bottom: 12px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line-2); font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--paper); transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.chip > span::before { content: ''; width: 10px; height: 10px; border: 1px solid currentColor; }
.chip input:checked + span { background: var(--sig); border-color: var(--sig); color: var(--ink); }
.chip input:checked + span::before { background: var(--ink); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.build-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.build-err { font-size: 13px; color: var(--sig); }
.build-err:empty { display: none; }
.run-box { margin-top: 28px; }
.run { margin-top: 10px; border-bottom: 1px solid var(--line); }
.run li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--mute); }
.run li::before { content: ''; flex: none; width: 9px; height: 9px; border: 1px solid var(--line-2); }
.run li.done { color: var(--paper); }
.run li.done::before { background: var(--paper); border-color: var(--paper); }
.run li.last.done::before { background: var(--sig); border-color: var(--sig); }
html:not(.js) .chips, html:not(.js) .build-row, html:not(.js) .run-box { display: none; }
.phone-col { display: grid; justify-items: center; }
@media (min-width: 900px) { .try { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 6vw; } }

/* Handy: das einzige Gerät mit Radius */
.phone { width: min(330px, 86vw); aspect-ratio: 9 / 19; padding: 9px; border: 1px solid var(--line-2); border-radius: 46px; background: #050505; }
.phone-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: var(--ink); }
.lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 60px 14px 22px; transition: opacity .28s var(--arrive); }
.lock.out { opacity: 0; pointer-events: none; }
.lock-date { font-size: 12px; color: var(--paper); }
.lock-time { margin-top: 4px; font: 300 84px/1 var(--display); font-stretch: 112%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lock-idle { margin-top: auto; padding: 0 8px; font-size: 12px; line-height: 1.5; color: var(--mute); text-align: center; }
.notif { display: grid; gap: 5px; width: 100%; margin-top: 26px; padding: 12px 14px 13px; border: 0; background: var(--paper); color: var(--ink); text-align: left; }
.notif.enter { animation: notif-in .42s var(--arrive) both; }
@keyframes notif-in { from { opacity: 0; translate: 0 -22px; } to { opacity: 1; translate: none; } }
.notif-top { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.notif-ic { width: 14px; height: 14px; background: var(--sig); }
.notif-now { margin-left: auto; text-transform: none; letter-spacing: 0; }
.notif-title { font: 800 17px/1.1 var(--display); font-stretch: 100%; }
.notif-body { font-size: 12.5px; line-height: 1.4; }
.dropv { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 46px 12px 12px; background: var(--ink); }
.dropv.enter { animation: dropv-in .36s var(--arrive) both; }
@keyframes dropv-in { from { opacity: 0; } to { opacity: 1; } }
.dropv-head { padding: 0 4px 10px; border-bottom: 1px solid var(--line-2); }
.dropv-word { font: 900 19px/1 var(--display); font-stretch: 150%; text-transform: uppercase; }
.dropv-meta { margin-top: 7px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.dropv-n { margin-top: 6px; font-size: 11.5px; color: var(--mute); }
.stack { position: relative; flex: 1; margin: 12px 0 10px; outline-offset: 4px; touch-action: pan-y; }
.card { position: absolute; inset: 0 0 18px; display: flex; flex-direction: column; padding: 14px 14px 10px; border: 1px solid var(--line-2); background: var(--ink-2); transform-origin: 50% 0; transition: transform .3s var(--arrive), opacity .3s ease; user-select: none; -webkit-user-select: none; }
.card.drag { transition: none; cursor: grabbing; }
.card-top { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.card-when { margin-left: auto; letter-spacing: 0; text-transform: none; color: var(--paper); }
.card-no { position: absolute; right: 12px; bottom: 54px; font: 900 34px/1 var(--display); font-stretch: 150%; color: var(--line-2); }
.card-t { margin-top: 12px; font: 800 21px/1.04 var(--display); font-stretch: 88%; }
.card-s { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--paper); }
.card-f { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--mute); }
.save { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-2); background: transparent; font: 600 11px/1 var(--mono); letter-spacing: .04em; color: var(--paper); }
.save svg { width: 12px; height: 12px; }
.save[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: var(--ink); }
.stack-ctrl { display: flex; align-items: center; justify-content: space-between; }
.stack-pos { font: 800 16px/1 var(--display); font-stretch: 125%; font-variant-numeric: tabular-nums; }

/* ═════════ 04 DIE MASCHINE: Index-Liste, eine Station ist laut ═════════ */
.stations { margin-top: clamp(36px, 6vh, 64px); border-bottom: 1px solid var(--line); }
.station { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 16px; padding: 18px 0 20px; border-top: 1px solid var(--line); transition: background-color .22s ease, color .22s ease, box-shadow .22s ease; }
.st-n { font: 600 12px/1.9 var(--mono); color: var(--mute); }
.station h3 { font: 800 clamp(24px, 2.5vw, 40px)/1 var(--display); font-stretch: 112%; }
.station p { grid-column: 2; max-width: 62ch; font-size: 14px; line-height: 1.6; }
.station.lit { background: var(--sig); color: var(--ink); box-shadow: 0 0 0 100vmax var(--sig); clip-path: inset(0 -100vmax); }
.station.lit .st-n { color: var(--ink); }
.trust { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 26px; }
.trust li { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.trust li + li::before { content: '/'; margin: 0 12px; color: var(--sig); }
@media (min-width: 900px) {
  .machine-pin { min-height: calc(100vh - var(--top-h) - var(--hud-h) - 64px); display: flex; flex-direction: column; justify-content: center; }
  .station { grid-template-columns: 70px minmax(0, 4fr) minmax(0, 6fr); align-items: baseline; padding: 20px 0 21px; }
  .station p { grid-column: 3; }
}

/* ═════════ 05 DER BEWEIS: Sendeprotokoll, zeitgetreu ═════════ */
.proof-head { display: grid; gap: 14px; }
.hl { display: inline-block; padding: 0 .08em; background: var(--sig); color: var(--ink); font-weight: 900; font-stretch: 120%; }
.log { position: relative; margin-top: clamp(36px, 6vh, 64px); }
.ruler { display: none; }
.events { border-bottom: 1px solid var(--line); }
.ev { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ev time { font: 800 18px/1.2 var(--display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.ev p { font-size: 13.5px; line-height: 1.5; }
.ev-3 time { color: var(--sig); }
.winner { display: grid; gap: 10px; justify-items: start; margin-top: 34px; }
.win-lg { padding: 18px 20px 20px; }
.win-lg .win-main { font-size: clamp(26px, 2.6vw, 40px); }
.prize { font-size: 13px; }
@media (min-width: 900px) {
  .proof-pin { min-height: calc(100vh - var(--top-h) - var(--hud-h) - 64px); display: flex; flex-direction: column; justify-content: center; }
  .log { container-type: inline-size; padding-top: 52px; }
  .ruler { display: block; position: absolute; left: 0; right: 0; top: 0; height: 30px; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 3.3333%) 0 100% / 100% 8px no-repeat; }
  .hr { position: absolute; top: 0; translate: -50% 0; font: 600 12px/1 var(--mono); color: var(--mute); }
  .hr:nth-child(1) { left: 0; translate: 0 0; } .hr:nth-child(2) { left: 20%; } .hr:nth-child(3) { left: 40%; } .hr:nth-child(4) { left: 60%; } .hr:nth-child(5) { left: 80%; } .hr:nth-child(6) { left: 100%; translate: -100% 0; }
  .playhead { position: absolute; left: 0; top: 0; width: 2px; height: 300px; margin-left: -1px; background: var(--sig); translate: calc(var(--p, 1) * 100cqw) 0; }
  html:not(.js) .playhead { display: none; }
  .events { position: relative; height: 250px; border: 0; }
  .ev { position: absolute; display: block; width: 190px; padding: 14px 0 6px 12px; border-top: 0; border-left: 1px solid var(--line-2); background: var(--ink); }
  .ev time { font-size: 26px; }
  .ev p { margin-top: 6px; font-size: 12.5px; }
  .ev-0 { left: 0; top: 0; } .ev-1 { left: 17%; top: 92px; } .ev-2 { left: 37.667%; top: 0; } .ev-3 { left: 52.667%; top: 92px; }
  .ev-4 { left: 70%; top: 0; } .ev-5 { left: 95%; top: 92px; } .ev-6 { left: 100%; top: 168px; }
  .ev-5, .ev-6 { translate: -100% 0; padding: 14px 12px 0 0; border-left: 0; border-right: 1px solid var(--line-2); text-align: right; }
  .ev-3 { border-left-color: var(--sig); }
  html.js:not(.rm) .log.live .ev { opacity: .32; transition: opacity .2s ease; }
  html.js:not(.rm) .log.live .ev.on { opacity: 1; }
  .winner { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 22px; margin-top: 28px; }
  html.js:not(.rm) .winner.live { clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--curtain); }
  html.js:not(.rm) .winner.live.on { clip-path: inset(-10px -10px -10px 0); }
}
@media (min-width: 900px) and (max-width: 1199px) { .ev { width: 150px; } .ev time { font-size: 22px; } }
.after { margin-top: clamp(110px, 18vh, 200px); }
.lead { max-width: 20ch; margin-top: 18px; font: 800 clamp(32px, 4.4vw, 76px)/.92 var(--display); font-stretch: 80%; }
.facts { max-width: 760px; margin-top: clamp(30px, 5vh, 52px); border-bottom: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 3fr) auto; align-items: baseline; gap: 16px; padding: 14px 0 15px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.facts b { white-space: nowrap; font: 900 clamp(38px, 4.2vw, 68px)/.85 var(--display); font-stretch: 150%; font-variant-numeric: tabular-nums; }
.facts li:first-child b { color: var(--sig); }
.after-grid { display: grid; gap: 44px; margin-top: 18px; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; max-width: 320px; height: auto; border: 1px solid var(--line-2); }
.shot figcaption { max-width: 34ch; margin-top: 12px; }
@media (min-width: 900px) { .after-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; gap: 5vw; } .shot { justify-self: end; } }
.buildlog { max-width: 760px; margin-top: clamp(36px, 6vh, 56px); border-bottom: 1px solid var(--line); }
.buildlog li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.buildlog time { color: var(--mute); }

/* ═════════ 06 DER MARKT: drei Bänder ═════════ */
.bands-wrap { margin-top: clamp(40px, 7vh, 72px); }
.axis { display: none; }
.bands { border-bottom: 1px solid var(--line); }
.bandrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.bandrow h3 { font: 800 clamp(24px, 2.4vw, 38px)/1 var(--display); font-stretch: 100%; }
.b-t { max-width: 52ch; font-size: 14px; line-height: 1.6; }
.b-bar { position: relative; display: block; height: 16px; margin-top: 8px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 7.1428%) 0 50% / 100% 8px no-repeat; }
.b-bar i { position: absolute; top: 0; bottom: 0; background: var(--sig); }
.b-1 .b-bar i { left: 14.286%; width: 42.857%; }
.b-2 .b-bar i { left: 21.429%; width: 64.286%; background: var(--paper); }
.b-3 .b-bar { visibility: hidden; }
.sizes { display: grid; margin-top: clamp(48px, 8vh, 80px); border-top: 1px solid var(--line-2); }
.size { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.size dd { margin-top: 12px; font: 900 clamp(32px, 3.6vw, 56px)/1 var(--display); font-stretch: 150%; }
.size dd .val { display: block; }
.size dd .src { display: block; margin-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--mute); }
.size .ph-l { display: block; width: fit-content; max-width: 100%; font-size: 12px; }
.why { display: grid; gap: 18px; margin-top: clamp(56px, 10vh, 110px); }
.why-l { border-bottom: 1px solid var(--line); counter-reset: w; }
.why-l li { position: relative; padding: 16px 0 17px 52px; border-top: 1px solid var(--line); counter-increment: w; font: 700 clamp(20px, 1.9vw, 30px)/1.12 var(--display); font-stretch: 90%; }
.why-l li::before { content: counter(w); position: absolute; left: 0; top: 19px; font: 600 12px/1 var(--mono); color: var(--sig); }
.punch { max-width: 15ch; margin-top: clamp(90px, 16vh, 170px); font: 850 clamp(44px, 7vw, 128px)/.86 var(--display); font-stretch: 60%; }
.punch .ww { color: var(--sig); }
@media (min-width: 900px) {
  .axis, .bandrow { grid-template-columns: 100px minmax(0, 4fr) minmax(0, 5fr); column-gap: 3vw; }
  .axis { display: grid; align-items: end; padding-bottom: 10px; }
  .ax-n { grid-column: 3; display: flex; justify-content: space-between; }
  .bandrow { align-items: center; padding: 22px 0 24px; }
  .bandrow .b-n { grid-row: 1 / 3; align-self: start; padding-top: 6px; }
  .bandrow h3 { grid-column: 2; }
  .bandrow .b-t { grid-column: 2; }
  .b-bar { grid-column: 3; grid-row: 1 / 3; margin: 0; height: 22px; }
  .sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .size { padding: 18px 24px 20px; border-bottom: 0; border-left: 1px solid var(--line); }
  .size:first-child { padding-left: 0; border-left: 0; }
  .why { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; }
  .why-h { padding-top: 18px; }
  .punch { margin-left: 25%; }
}

/* ═════════ 07 DAS MODELL: eine große Freikarte, zwei kleine ═════════ */
.offer { display: grid; gap: 32px; margin-top: clamp(40px, 7vh, 72px); }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px; min-height: 360px; background: var(--sig); color: var(--ink); --focus: var(--ink); }
.ticket::before, .ticket::after { content: ''; position: absolute; right: 66px; width: 20px; height: 20px; background: var(--ink); }
.ticket::before { top: -10px; } .ticket::after { bottom: -10px; }
.t-main { display: flex; flex-direction: column; padding: 24px 22px 24px; }
.t-kind { color: var(--ink); }
.t-price { margin-top: 10px; white-space: nowrap; font: 900 clamp(72px, 13vw, 236px)/.78 var(--display); font-stretch: 150%; letter-spacing: -.02em; }
.t-txt { max-width: 44ch; margin-top: auto; padding-top: 24px; font-size: 14px; line-height: 1.6; }
.t-stub { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0; border-left: 2px dashed rgba(13, 13, 13, .55); }
.t-admit, .t-status { writing-mode: vertical-rl; rotate: 180deg; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.t-status { padding: 9px 6px; background: var(--ink); color: var(--sig); }
.t-no { font: 600 11px/1 var(--mono); }
.others { border-bottom: 1px solid var(--line); }
.other { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.o-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.o-kind { font: 900 clamp(28px, 2.8vw, 44px)/1 var(--display); font-stretch: 130%; text-transform: uppercase; }
.o-status { padding: 5px 7px; border: 1px dashed var(--line-2); color: var(--paper); }
.o-price { margin-top: 12px; font: 800 30px/1 var(--display); }
.o-price .ph { width: 2.6em; }
.o-price .ph-l { display: block; width: fit-content; }
.o-txt { margin-top: 12px; max-width: 46ch; font-size: 14px; line-height: 1.6; }
@media (min-width: 900px) {
  .offer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4vw; align-items: stretch; }
  .ticket { min-height: 460px; grid-template-columns: minmax(0, 1fr) 92px; }
  .ticket::before, .ticket::after { right: 82px; }
  .t-main { padding: 30px 32px 30px; }
  .others { display: grid; align-content: stretch; }
}
@media (max-width: 560px) { .t-no { display: none; } }

.pool { display: grid; gap: 36px; margin-top: clamp(90px, 15vh, 160px); }
.pool-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pool-viz { padding: 22px; border: 1px solid var(--line-2); }
.pool-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.pool-nums div { min-width: 0; }
.pool-nums dd { margin-top: 10px; font: 900 clamp(40px, 4.2vw, 68px)/.85 var(--display); font-stretch: 150%; font-variant-numeric: tabular-nums; }
.pool-with dd { color: var(--sig); }
.pool-bars { display: grid; gap: 6px; margin: 20px 0 18px; }
.pb { display: block; height: 10px; transform-origin: left; transition: transform .4s var(--arrive); }
.pb-without { background: var(--line-2); }
.pb-with { background: var(--sig); }
.pool-people { display: grid; max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }
.pp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pp-n { min-width: 86px; font: 600 12px/1 var(--mono); color: var(--paper); }
.pt { padding: 6px 8px; font-size: 12px; line-height: 1; }
.pt.new { background: var(--sig); color: var(--ink); }
.pt.reuse { border: 1px dashed var(--line-2); color: var(--paper); }
.pt.reuse::before { content: '↺ '; color: var(--sig); }
.pp.enter { animation: pp-in .3s var(--arrive) both; }
@keyframes pp-in { from { opacity: 0; } to { opacity: 1; } }
.limit { max-width: 72ch; margin-top: 40px; font-size: 13px; line-height: 1.6; color: var(--mute); }
@media (min-width: 900px) { .pool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5vw; align-items: start; } .pool-viz { padding: 28px; } }

/* ═════════ 08 DIE BESETZUNG: die ruhigste Stelle ═════════ */
.sc-cast { padding-block: clamp(140px, 22vh, 240px); text-align: center; }
.sc-cast .h-l { max-width: 22ch; margin-inline: auto; font-stretch: 90%; text-wrap: balance; }
.sc-cast .lede { margin-inline: auto; }
.credits { max-width: 980px; margin: clamp(56px, 10vh, 110px) auto 0; }
.cr { display: grid; gap: 6px; padding: 14px 0; }
.cr dt { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.cr dd { font: 700 clamp(26px, 2.8vw, 42px)/1.05 var(--display); font-stretch: 100%; }
.cr dd small { margin-left: 10px; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sig); vertical-align: .3em; }
.cr-sm dd { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; }
.cr dd .ph { width: 4.4em; height: .62em; }
.cr dd .ph-l { display: block; width: fit-content; margin: 8px auto 0; }
@media (min-width: 720px) {
  .cr { grid-template-columns: 1fr 1fr; gap: 40px; align-items: baseline; padding: 12px 0; }
  .cr dt { text-align: right; }
  .cr dd { text-align: left; }
  .cr dd .ph-l { margin: 8px 0 0; }
}

/* ═════════ 09 DIE VISION: flache Scheibe über dem Horizont ═════════ */
.sc-vision { padding-top: clamp(40px, 8vh, 90px); }
.horizon { position: relative; height: clamp(240px, 46vh, 520px); margin: 0 calc(-1 * var(--gut)) clamp(40px, 7vh, 80px); overflow: hidden; }
.disc { --d: min(62vw, 640px); position: absolute; left: 50%; top: 18%; width: var(--d); aspect-ratio: 1; margin-left: calc(var(--d) / -2); border-radius: 50%; background: var(--sig); display: grid; justify-items: center; align-content: start; padding-top: calc(var(--d) * .17); }
.disc-t { font: 900 clamp(40px, 7vw, 120px)/1 var(--display); font-stretch: 150%; color: var(--ink); font-variant-numeric: tabular-nums; }
.hz-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper); }
.sc-vision .h-l { max-width: 20ch; }
.parts { display: grid; gap: 0; margin-top: clamp(48px, 8vh, 90px); border-bottom: 1px solid var(--line); }
.part { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.part-live { border-top: 3px solid var(--sig); }
.part-k { display: flex; align-items: baseline; gap: 12px; font: 900 clamp(26px, 2.6vw, 40px)/1 var(--display); font-stretch: 130%; text-transform: uppercase; }
.part-s { padding: 5px 7px; border: 1px solid var(--line-2); color: var(--paper); }
.part-live .part-s { background: var(--sig); border-color: var(--sig); color: var(--ink); }
.part p:last-child { margin-top: 12px; max-width: 40ch; font-size: 14px; line-height: 1.6; }
@media (min-width: 900px) { .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; border-bottom: 0; } .part { border-bottom: 1px solid var(--line); } }

/* ═════════ 10 HANDLUNG: orange Fläche, ein Kasten ═════════ */
.sc-end { padding-top: 0; padding-bottom: clamp(80px, 12vh, 140px); }
.end-sig { margin: 0 calc(-1 * var(--gut)); padding: clamp(96px, 16vh, 180px) var(--gut) clamp(80px, 13vh, 140px); background: var(--sig); color: var(--ink); --focus: var(--ink); --sync-bg: var(--sig); --sync-hot-bg: var(--ink); --sync-hot-fg: var(--sig); }
.end-sig ::selection { background: var(--ink); color: var(--sig); }
.end-h { font: 900 clamp(72px, 15vw, 290px)/.8 var(--display); font-stretch: 150%; text-transform: uppercase; letter-spacing: -.01em; }
.end-grid { display: grid; gap: 48px; margin-top: clamp(40px, 7vh, 80px); }
.ask-h { color: var(--ink); }
.ask-l { margin-top: 14px; border-bottom: 1px solid rgba(13, 13, 13, .35); }
.ask-l li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; border-top: 1px solid rgba(13, 13, 13, .35); font: 700 clamp(22px, 2.2vw, 34px)/1.1 var(--display); font-stretch: 95%; }
.ask-l .ph-l, .end-sig .ph-l { margin-top: 0; border-color: var(--ink); color: var(--ink); }
.end-sig .ph-l::before { background: var(--ink); }
.cta { display: grid; gap: 14px; align-content: start; }
.btn-ink { min-height: 68px; padding: 0 24px; font-size: 14px; }
.cta-note { font-size: 13px; }
.cta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.tlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tlink-ph { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .tlink:hover { text-decoration-thickness: 4px; } }
@media (min-width: 900px) { .end-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 6vw; align-items: end; } .cta { justify-self: stretch; } }
.roll { display: grid; gap: 14px; max-width: 760px; margin: clamp(90px, 15vh, 160px) auto 0; }
.roll div { display: grid; gap: 4px; text-align: center; }
.roll dt { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.roll dd { font: 700 clamp(18px, 1.7vw, 26px)/1.15 var(--display); font-stretch: 100%; }
@media (min-width: 720px) { .roll div { grid-template-columns: 1fr 1fr; gap: 36px; align-items: baseline; } .roll dt { text-align: right; } .roll dd { text-align: left; } }
.the-end { margin-top: clamp(90px, 15vh, 160px); text-align: center; font: 900 min(calc((100vw - 2 * var(--gut)) / 13.4), 170px)/.82 var(--display); font-stretch: 150%; text-transform: uppercase; }
@media (max-width: 699px) { .disc { --d: 86vw; top: 34%; } }
@media (max-width: 699px) { .the-end { font-size: calc((100vw - 2 * var(--gut)) / 5.5); font-stretch: 62%; } }
.pc-line { margin-top: 26vh; padding-bottom: 4vh; text-align: center; font: 700 clamp(24px, 2.4vw, 38px)/1.1 var(--display); }

/* Fußzeile mit Belegen */
.foot { padding: 72px var(--gut) calc(var(--hud-h) + 48px); border-top: 1px solid var(--line); }
.proofs-l { display: grid; gap: 12px 48px; margin-top: 22px; counter-reset: b; }
.proofs-l li { position: relative; padding-left: 44px; font-size: 12.5px; line-height: 1.6; counter-increment: b; scroll-margin-top: 110px; }
.proofs-l li::before { content: '[' counter(b) ']'; position: absolute; left: 0; top: 0; font: 600 12.5px/1.6 var(--mono); color: var(--sig); }
.proofs-l li:target { outline: 1px solid var(--sig); outline-offset: 6px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }
.foot-made { font: 900 14px/1.4 var(--display); font-stretch: 150%; text-transform: uppercase; color: var(--paper); }
.foot-privacy { flex: 1 1 360px; }
.foot-links a { display: inline-block; min-height: 24px; color: var(--paper); }
@media (min-width: 900px) { .proofs-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═════════ Enthüllungen: Überschriften wischen von links herein (Richtung der Skala), Absätze stehen ═════════ */
html.js:not(.rm) .wp { clip-path: inset(-.2em 100% -.3em 0); }
html.js:not(.rm) .wp.is-in { clip-path: inset(-.2em -.2em -.3em 0); transition: clip-path .9s var(--curtain); }
html.js:not(.rm) .mv .miss-b { text-decoration-color: transparent; }
html.js:not(.rm) .mv .stamp { opacity: 0; scale: 1.6; }
html.js:not(.rm) .mv.is-in .miss-b { text-decoration-color: var(--sig); transition: text-decoration-color .3s ease; }
html.js:not(.rm) .mv.is-in .stamp { opacity: 1; scale: 1; transition: scale .18s var(--push) .32s, opacity .1s linear .32s; }

/* Handy: Szenen außerhalb des Bildes werden erst bei Annäherung gelayoutet */
@media (max-width: 899px) {
  #szene-03, #szene-04, #szene-05, #szene-06, #szene-07, #szene-08, #szene-09, #szene-10, .foot { content-visibility: auto; }
  #szene-03 { contain-intrinsic-size: auto 2700px; }
  #szene-04 { contain-intrinsic-size: auto 1500px; }
  #szene-05 { contain-intrinsic-size: auto 2300px; }
  #szene-06 { contain-intrinsic-size: auto 2100px; }
  #szene-07 { contain-intrinsic-size: auto 2100px; }
  #szene-08 { contain-intrinsic-size: auto 1500px; }
  #szene-09 { contain-intrinsic-size: auto 1300px; }
  #szene-10 { contain-intrinsic-size: auto 2600px; }
  .foot { contain-intrinsic-size: auto 1300px; }
}

/* Handy: Scheibe zeitgesteuert (Klasse aus scenes.js), Desktop scrubbt per GSAP */
@media (max-width: 899px) {
  html.js:not(.rm) .sc-vision .disc { translate: 0 42%; }
  html.js:not(.rm) .sc-vision.up .disc { translate: none; transition: translate 1.8s var(--arrive); }
}

@media (max-width: 560px) {
  .tag, .ph-l { font-size: 13px; }
  .label { font-size: 12.5px; }
  .stamp, .t-status, .t-admit { font-size: 12px; }
  .brand-tag { display: none; }
  .miss { padding-right: 0; padding-top: 44px; }
  .stamp { top: 12px; margin-top: 0; }
  .noise-grid > * { min-width: 0; }
  .ev { grid-template-columns: 64px minmax(0, 1fr); }
}

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

/* Lenis (aus lenis.css 1.3.26) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ═════════ Präsentationsmodus (Bühne 1920 × 1080, skaliert) ═════════ */
html.deck-on, html.deck-on body { overflow: hidden; }
html.deck-on .top, html.deck-on .hud, html.deck-on .grain { visibility: hidden; }
html.deck-boot body > *:not(.deck) { visibility: hidden; }
html.embed body > *:not(.deck) { display: none !important; }
.deck { position: fixed; inset: 0; z-index: 150; background: #000; color: var(--paper); overflow: hidden; cursor: none; }
.deck.ui-on { cursor: default; }
.deck-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--ink); }
.slide { position: absolute; inset: 0; padding: 110px 120px 150px; opacity: 0; visibility: hidden; }
.slide.on { opacity: 1; visibility: visible; }
.slide .label { font-size: 18px; }
.slide .note { font-size: 19px; max-width: 64ch; }
.slide .tag { font-size: 15px; }
.slide .ph-l { font-size: 15px; }
.s-mark { position: absolute; z-index: 5; left: 120px; right: 120px; bottom: 44px; display: grid; grid-template-columns: 1fr 420px 1fr; align-items: center; gap: 40px; font: 600 17px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.s-mark b { font-weight: 600; color: var(--sig); }
.s-mark .s-n { justify-self: end; color: var(--paper); }
.s-dial { position: relative; height: 26px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10%) 0 0 / calc(100% + 1px) 100% no-repeat; border-bottom: 1px solid var(--line-2); }
.s-dial i { position: absolute; top: -4px; bottom: -1px; width: 3px; margin-left: -1px; background: var(--sig); }
.s-orange { background: var(--sig); color: var(--ink); --sync-bg: var(--sig); --sync-hot-bg: var(--ink); --sync-hot-fg: var(--sig); }
.s-orange .s-mark, .s-orange .s-mark .s-n, .s-orange .s-mark b { color: var(--ink); }
.s-orange .s-dial { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, .5) 0 1px, transparent 1px 10%); border-color: rgba(13, 13, 13, .5); }
.s-orange .s-dial i { background: var(--ink); }
.s-orange .ph-l { border-color: var(--ink); color: var(--ink); }
.s-orange .ph-l::before { background: var(--ink); }

/* s0 Titel */
.s-title { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 34px; }
.s-title .presents { align-self: start; }
.s-title .cold-row { grid-template-columns: 6fr 3fr 3fr; gap: 56px; }
.s-title .cold-sub { font-size: 64px; }
.s-title .cold-line { font-size: 22px; }
.s-title .win { justify-self: end; padding: 20px 22px; }
.s-title .win-main { font-size: 32px; }
.s-title .win .label { font-size: 15px; }
/* s1 Problem */
.s-problem { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 120px; align-items: center; }
.s-problem .h-xl { font-size: 150px; }
.s-problem .miss { font-size: 44px; padding: 22px 180px 22px 0; }
.s-problem .stamp { font-size: 17px; padding: 11px 12px 10px; margin-top: -20px; }
.s-problem .feed-wrap { display: block; }
.s-problem .feed-cap { font-size: 16px; }
.s-problem .feed-win { height: 720px; }
/* s2 Einsicht */
.s-insight { display: grid; align-content: center; gap: 56px; }
.s-insight { gap: 44px; }
.s-insight .ins-1 { font-size: 44px; }
.s-insight .ins-2 { font-size: 126px; max-width: 19ch; }
.s-insight .reveal { font-size: 89px; white-space: nowrap; }
/* s3 Demo */
.s-demo { display: grid; grid-template-columns: 560px minmax(0, 1fr) 380px; gap: 64px; align-items: center; }
.s-demo .h-l { font-size: 64px; }
.s-demo .count { margin-top: 26px; }
.s-demo .count-v { font-size: 128px; }
.s-demo .count .label { font-size: 20px; }
.s-demo .stages { max-width: none; margin-top: 30px; }
.s-demo .stages li { font-size: 21px; padding: 11px 0 10px; }
.s-demo .stages b { font-size: 30px; }
.s-demo .funnel-stage { aspect-ratio: auto; height: 800px; }
.s-demo .fs-cap { font-size: 16px; }
.s-demo .phone { width: 370px; }
.s-demo .phone-col { transition: opacity .35s var(--arrive), translate .45s var(--arrive); }
.s-demo .phone-col.off { opacity: 0; translate: 0 26px; }
.s-demo .lock-idle { display: none; }
.s-demo .lock-date { font-size: 17px; }
.s-demo .lock-time { font-size: 110px; }
.s-demo .notif { padding: 16px 18px 18px; }
.s-demo .notif-top { font-size: 14px; }
.s-demo .notif-title { font-size: 24px; }
.s-demo .notif-body { font-size: 17px; }
.s-demo .dropv { padding: 56px 16px 16px; }
.s-demo .dropv-word { font-size: 25px; }
.s-demo .dropv-meta { font-size: 14px; }
.s-demo .dropv-n { font-size: 15px; }
.s-demo .card { padding: 18px 18px 12px; }
.s-demo .card-top { font-size: 14px; }
.s-demo .card-t { font-size: 30px; }
.s-demo .card-s { font-size: 17px; }
.s-demo .card-f { font-size: 14px; }
.s-demo .save { font-size: 14px; }
.s-demo .stack-pos { font-size: 22px; }
/* s4 Maschine */
.s-machine { display: flex; flex-direction: column; justify-content: center; }
.s-machine .h-l { font-size: 110px; }
.s-machine .stations { margin-top: 56px; }
.s-machine .station { grid-template-columns: 90px 640px minmax(0, 1fr); align-items: baseline; padding: 24px 0 26px; }
.s-machine .station p { grid-column: 3; font-size: 28px; line-height: 1.35; }
.s-machine .st-n { font-size: 20px; }
.s-machine .station h3 { font-size: 58px; }
.s-machine .trust { margin-top: 36px; }
.s-machine .trust li { font-size: 19px; }
.s-machine .station.lit { box-shadow: 0 0 0 120px var(--sig); clip-path: inset(0 -120px); }
/* s5 Beweis */
.s-proof { display: flex; flex-direction: column; }
.s-proof .h-l { font-size: 104px; }
.s-proof .proof-date { margin-top: 22px; }
.s-proof .log { container-type: inline-size; padding-top: 64px; margin-top: 54px; }
.s-proof .ruler { display: block; position: absolute; left: 0; right: 0; top: 0; height: 40px; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 3.3333%) 0 100% / 100% 10px no-repeat; }
.s-proof .hr { position: absolute; top: 0; translate: -50% 0; font: 600 20px/1 var(--mono); color: var(--mute); }
.s-proof .hr:nth-child(1) { left: 0; translate: 0 0; } .s-proof .hr:nth-child(2) { left: 20%; } .s-proof .hr:nth-child(3) { left: 40%; } .s-proof .hr:nth-child(4) { left: 60%; } .s-proof .hr:nth-child(5) { left: 80%; } .s-proof .hr:nth-child(6) { left: 100%; translate: -100% 0; }
.s-proof .playhead { position: absolute; left: 0; top: 0; width: 3px; height: 420px; margin-left: -1px; background: var(--sig); translate: calc(var(--p, 1) * 100cqw) 0; }
.s-proof .events { position: relative; height: 360px; border: 0; }
.s-proof .ev { position: absolute; display: block; width: 280px; padding: 16px 0 0 16px; border-top: 0; border-left: 1px solid var(--line-2); transition: opacity .25s ease; }
.s-proof .ev time { font-size: 40px; }
.s-proof .ev p { margin-top: 8px; font-size: 19px; line-height: 1.4; }
.s-proof .ev-0 { left: 0; top: 0; } .s-proof .ev-1 { left: 17%; top: 130px; } .s-proof .ev-2 { left: 37.667%; top: 0; } .s-proof .ev-3 { left: 52.667%; top: 130px; border-left-color: var(--sig); }
.s-proof .ev-4 { left: 70%; top: 0; } .s-proof .ev-5 { left: 95%; top: 130px; } .s-proof .ev-6 { left: 100%; top: 250px; }
.s-proof .ev-5, .s-proof .ev-6 { translate: -100% 0; padding: 16px 16px 0 0; border-left: 0; border-right: 1px solid var(--line-2); text-align: right; }
.s-proof .ev.off { opacity: .28; }
.s-proof .winner { display: flex; align-items: end; gap: 30px; margin-top: auto; transition: clip-path .5s var(--curtain); }
.s-proof .winner.off { clip-path: inset(0 100% 0 0); }
.s-proof .win-lg { padding: 22px 26px 24px; }
.s-proof .win-lg .win-main { font-size: 46px; }
.s-proof .win .label { font-size: 16px; }
.s-proof .prize { font-size: 20px; }
.s-after { position: absolute; inset: 0; z-index: 6; padding: 110px 120px 150px; background: var(--ink); opacity: 0; visibility: hidden; transition: opacity .3s ease; }
.slide.on .s-after.on { opacity: 1; visibility: inherit; }
.s-after .h-m { font-size: 64px; }
.s-after .lead { font-size: 96px; max-width: 18ch; margin-top: 24px; }
.s-after { display: grid; grid-template-columns: minmax(0, 1fr) 330px; column-gap: 90px; align-content: start; }
.s-after > :not(.shot) { grid-column: 1; }
.s-after .shot { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.s-after .shot img { max-width: none; }
.s-after .shot figcaption { font-size: 15px; }
.s-after .facts { max-width: none; margin-top: 44px; }
.s-after .facts li { grid-template-columns: 300px minmax(0, 1fr); font-size: 24px; padding: 14px 0 15px; }
.s-after .facts b { font-size: 84px; }
/* s6 Markt */
.s-market .h-l { font-size: 80px; max-width: 30ch; }
.s-market .bands-wrap { margin-top: 56px; }
.s-market .axis, .s-market .bandrow { grid-template-columns: 140px 860px minmax(0, 1fr); column-gap: 60px; }
.s-market .axis { display: grid; }
.s-market .ax-n { grid-column: 3; display: flex; justify-content: space-between; }
.s-market .bandrow { align-items: center; padding: 18px 0 20px; }
.s-market .bandrow .b-n { grid-row: 1 / 3; align-self: start; padding-top: 10px; }
.s-market .bandrow h3 { grid-column: 2; font-size: 44px; }
.s-market .b-t { grid-column: 2; font-size: 20px; line-height: 1.4; max-width: none; }
.s-market .b-bar { grid-column: 3; grid-row: 1 / 3; margin: 0; height: 30px; }
.s-market .s-note { margin-top: 18px; font-size: 18px; }
.s-market .s-punch { margin-top: 30px; font: 850 70px/1 var(--display); font-stretch: 62%; word-spacing: .14em; }
/* s7 Modell */
.s-model .h-xl { font-size: 130px; }
.s-model .offer { grid-template-columns: 1040px minmax(0, 1fr); gap: 70px; margin-top: 40px; align-items: start; }
.s-model .ticket { min-height: 440px; grid-template-columns: minmax(0, 1fr) 110px; }
.s-model .ticket::before, .s-model .ticket::after { right: 100px; width: 22px; height: 22px; }
.s-model .ticket::before { top: -11px; } .s-model .ticket::after { bottom: -11px; }
.s-model .t-main { padding: 38px 40px; }
.s-model .t-price { font-size: 260px; }
.s-model .t-txt { font-size: 24px; }
.s-model .t-admit, .s-model .t-status, .s-model .t-no { font-size: 15px; }
.s-model .other { padding: 26px 0 28px; }
.s-model .o-kind { font-size: 60px; }
.s-model .o-txt { font-size: 22px; }
.s-model .o-price { font-size: 40px; }
.s-model .s-pool { margin-top: 36px; display: flex; align-items: baseline; gap: 22px; font: 600 22px/1.3 var(--mono); }
.s-model .s-pool b { font: 900 46px/1 var(--display); font-stretch: 150%; }
.s-model .s-pool b.e { color: var(--sig); }
/* s8 Besetzung */
.s-cast { text-align: center; }
.s-cast .h-l { font-size: 92px; max-width: none; }
.s-cast .credits { max-width: 1400px; margin-top: 50px; }
.s-cast .cr { grid-template-columns: 1fr 1fr; gap: 50px; align-items: baseline; padding: 8px 0; }
.s-cast .cr dt { text-align: right; font-size: 18px; }
.s-cast .cr dd { text-align: left; font-size: 46px; }
.s-cast .cr dd small { font-size: 16px; }
.s-cast .cr-sm dd { font-size: 30px; }
.s-cast .cr dd .ph-l { margin: 6px 0 0; }
/* s9 Vision */
.s-vision { padding-top: 60px; }
.s-vision .horizon { height: 430px; margin: 0 -120px 40px; }
.s-vision .disc { --d: 760px; top: 12%; transition: translate 2s var(--arrive); }
.s-vision .disc.low { translate: 0 40%; }
.s-vision .disc-t { font-size: 130px; }
.s-vision .h-l { font-size: 76px; max-width: 30ch; }
.s-vision .parts { grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 34px; border-bottom: 0; }
.s-vision .part { border-bottom: 1px solid var(--line); }
.s-vision .part-k { font-size: 50px; }
.s-vision .part-s { font-size: 16px; }
.s-vision .part p:last-child { font-size: 20px; max-width: 36ch; }
/* s10 Handlung */
.s-end { display: flex; flex-direction: column; }
.s-end .end-h { font-size: 300px; }
.s-end .end-grid { grid-template-columns: 1000px minmax(0, 1fr); gap: 90px; align-items: end; margin-top: 60px; }
.s-end .ask-l li { font-size: 46px; padding: 18px 0; }
.s-end .ask-h { font-size: 18px; }
.s-end .s-links { display: grid; gap: 22px; font: 600 26px/1.2 var(--mono); }
.s-end .s-links b { display: block; margin-bottom: 6px; font: 600 16px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.s-end .s-links .ph-l { font-size: 16px; }
.s-end .s-thanks { position: absolute; right: 120px; top: 430px; font: 900 96px/1 var(--display); font-stretch: 150%; text-transform: uppercase; }

/* Deck-Bedienleiste (nicht skaliert) */
.deck-ui { position: absolute; left: 50%; bottom: 14px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 4px; border: 1px solid var(--line-2); background: var(--ink); transform: translateX(-50%); opacity: 0; transition: opacity .2s ease; }
.deck.ui-on .deck-ui, .deck-ui:focus-within { opacity: 1; }
.deck-ui button { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border: 0; background: transparent; font: 600 12px/1 var(--mono); letter-spacing: .04em; color: var(--paper); transition: background-color .12s ease, color .12s ease; }
.deck-ui button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.deck-ui .d-count { min-width: 82px; text-align: center; font: 800 18px/1 var(--display); font-stretch: 125%; color: var(--sig); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .deck-ui button:hover { background: var(--ink-3); } }
.deck-black { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.deck-black.on { opacity: 1; pointer-events: auto; }
.deck-notes { position: absolute; left: 50%; bottom: 76px; z-index: 12; width: min(1100px, 92vw); max-height: 40vh; overflow: auto; padding: 18px 22px; border: 1px solid var(--line-2); background: var(--ink); transform: translateX(-50%); font: 400 18px/1.55 var(--mono); color: var(--paper); text-align: left; cursor: default; }
.deck-notes b { display: block; margin-bottom: 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.deck-toast { position: absolute; left: 50%; top: 20px; z-index: 30; max-width: min(640px, 90vw); padding: 14px 18px; background: var(--paper); color: var(--ink); transform: translateX(-50%); font: 500 14px/1.5 var(--mono); cursor: default; }
.deck-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.embed .deck-ui, html.embed .deck-notes, html.embed .deck-toast { display: none !important; }
html.embed .deck { cursor: default; }

/* Unterseiten: Impressum, 404 */
.legal { max-width: 860px; margin: 0 auto; padding: calc(var(--top-h) + 56px) var(--gut) 96px; }
.legal section { margin-top: 56px; }
.legal h2 { margin-bottom: 16px; }
.legal p { margin-top: 14px; font-size: 14px; line-height: 1.7; }
.legal a { color: var(--paper); text-underline-offset: 3px; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin-top: 18px; font-size: 14px; }
.legal-dl dt { color: var(--mute); }
.legal-list { display: grid; gap: 10px; margin-top: 12px; padding-left: 18px; list-style: square; line-height: 1.6; font-size: 14px; }
.ph-inline { border-bottom: 1px dashed var(--line-2); }
.lost { display: grid; align-content: center; gap: 26px; min-height: 100vh; min-height: 100svh; padding: 64px var(--gut); }
.lost .h-xl { max-width: 14ch; }