*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; font: 400 clamp(16px, 1.25vw, 19px)/1.6 var(--f-body); color: var(--ink); background: var(--paper); overflow-x: hidden; }
main { position: relative; z-index: 2; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
.mono { font-family: var(--f-mono); letter-spacing: 0.04em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; border-radius: 6px; }


/* Typografie */
.display, .h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
.display { font-size: clamp(42px, 7.2vw, 124px); }
.h2 { font-size: clamp(34px, 5vw, 84px); }
.lead { margin-top: 28px; max-width: 34em; font-size: clamp(17px, 1.45vw, 22px); color: var(--ink-2); font-weight: 400; }
.eyebrow { margin-bottom: 22px; font-size: 13px; letter-spacing: 0.22em; color: var(--hi); text-transform: uppercase; min-height: 1.2em; font-weight: 600; }
.note { font-size: 14px; color: var(--muted); }
.src { margin-top: 22px; font-size: 12px; color: var(--muted); max-width: 60ch; }

/* Wörter und Zeichen aus fx.js splitChars */
.w { display: inline-block; white-space: nowrap; }
.m { display: inline-block; overflow: hidden; padding: 0.1em 0.02em 0.14em; margin: -0.1em -0.02em -0.14em; vertical-align: top; }
.c { display: inline-block; }
.grad .c { color: var(--hi); }   /* ein fester Ton — Marcello (13.10.2026): die Farben sollen beim Scrollen nicht wechseln */

/* Glas */
.glass { position: relative; border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.75); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.36)); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(10, 20, 22, 0.05), 0 30px 60px -30px rgba(10, 40, 50, 0.35); transform-style: preserve-3d; }

/* Knöpfe */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; border: 0; font: 600 16px/1 var(--f-body); color: #fff; cursor: pointer; background: var(--ink); box-shadow: 0 12px 34px -10px color-mix(in oklab, var(--a1) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: background 0.25s, box-shadow 0.25s; }
.btn:hover { background: var(--hi); box-shadow: 0 16px 44px -8px color-mix(in oklab, var(--a1) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn--ghost { background: rgba(255, 255, 255, 0.55); color: var(--ink); border: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(14px); }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: 0 12px 30px -14px rgba(10, 40, 50, 0.4); }
.btn--sm { padding: 11px 20px; font-size: 14px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chips li { padding: 9px 16px; border-radius: 999px; font: 500 13px var(--f-mono); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(10px); }
.chips li::before { content: "+ "; color: var(--hi); font-weight: 700; }

/* Kopfleiste */
.nav { position: fixed; z-index: 30; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--pad); background: rgba(243, 246, 245, 0.62); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(10, 20, 22, 0.07); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.brand img { transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1); }
.brand:hover img { transform: rotate(90deg) scale(1.1); }
.brand-t { font: 700 22px var(--f-display); letter-spacing: -0.04em; }
.nav-links { display: flex; gap: clamp(16px, 2.6vw, 40px); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; }
.nav-links a { color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover { color: var(--hi); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* Bühne: erzeugte Bilder und Kurzvideos. Weiss und Eis-Blau der Bilder verschmelzen per «multiply» mit dem Papier, die Masken blenden die Ränder aus. */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { left: -25vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--a1) 26%, transparent), transparent); }
.aurora i:nth-child(2) { right: -30vmax; top: 10vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--a1) 14%, transparent), transparent); }
.aurora i:nth-child(3) { left: 10vmax; bottom: -45vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--a1) 12%, transparent), transparent); }
@keyframes drift1 { to { transform: translate3d(14vmax, 8vmax, 0); } }
@keyframes drift2 { to { transform: translate3d(-12vmax, -6vmax, 0); } }

.stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.scene { position: absolute; inset: 0; margin: 0; display: grid; align-items: center; will-change: transform, opacity; visibility: hidden; }
.scene .media { width: min(58vw, 980px); aspect-ratio: 16 / 9; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%); }
.scene video { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.s0 .media, .s1 .media, .s3 .media, .s5 .media { justify-self: end; margin-right: -10vw; }
.s2 .media { justify-self: start; margin-left: -8vw; }
.s5 .media { width: min(50vw, 860px); margin-right: -2vw; }
.s4 { align-items: stretch; }
.s4 .media { width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.s4 video { object-fit: cover; }

/* Handy: die Szene ist ein Bild im Abschnitt, oberhalb des Textes. Randlos über die ganze Breite, an allen Rändern weich auslaufend —
   ein Motiv, das aus dem Bild treibt, löst sich auf, statt hart abgeschnitten zu wirken. Ohne mix-blend-mode (Safari zeichnet damit gern Ränder). */
.scene.inline { position: relative; inset: auto; display: block; visibility: visible; opacity: 1; transform: none; margin: 0 calc(var(--pad) * -1) 10px; will-change: auto; }
.scene.inline .media { width: 100%; aspect-ratio: 16 / 10; margin: 0; justify-self: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.scene.inline video { mix-blend-mode: normal; object-fit: cover; }
@media (max-width: 899px) { .hero-in, .chap-in, .final-in { width: 100%; } }