/* ============================================================
   thaeven — Startseite (Header-Lockup, Ink-Reveal-FX, Parallax-Hero, Dummy)
   Baut auf den Tokens aus preloader.css auf.
   ============================================================ */

/* ----------------------------------------------------------------
   HEADER — Marken-Lockup oben links (Logo + Schriftzug) + Nav
   Das Logo fliegt beim Eintreten in #logoSlot, THAEVEN schreibt sich daneben.
   ---------------------------------------------------------------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) clamp(20px,4.5vw,60px);
  pointer-events:none;                  /* nur die Kinder klickbar */
}
.hdr__brand{ position:relative; display:inline-block; text-decoration:none; pointer-events:auto; }
.hdr__lock{ position:relative; display:flex; align-items:center; gap:0; }

/* FLIP-Landeplatz für die Marke (klein, oben links) */
.hdr__mark{ width:clamp(34px,3.4vw,46px); aspect-ratio:1; line-height:0; flex:none; }
.hdr__mark .mark{ width:100%; }
.hdr__mark .mark__inner{ animation:none !important; transform:none !important; }

.wordmark{ height:clamp(15px,1.5vw,20px); width:auto; display:block;
  margin-left:clamp(10px,1vw,16px); }   /* Abstand Marke ↔ Wortmarke */
.wordmark .ltr{
  fill:var(--ink); opacity:0;
  transform-box:fill-box; transform-origin:50% 100%;
  transform: translateY(40%) scale(.92);
}
.wordmark.is-writing .ltr{
  animation: ltrIn .55s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes ltrIn{ to{ opacity:1; transform: translateY(0) scale(1); } }

/* --- Header-Zusatz hinter THAEVEN: <web/> (Code) bzw. CUT (Schnitt) ---
   Beide nutzen den ECHTEN Logo-Font (aus den Logos zugeschnittene SVGs). */
.hdr__suffix{
  margin-left:clamp(16px,1.7vw,26px); align-self:center;   /* mehr Abstand zu THAEVEN */
  display:inline-flex; align-items:center; min-height:1em;
}
.hdr__suffix .tag{ height:clamp(15px,1.6vw,21px); width:auto; display:block; }

/* <web/> reincoden (Links-Rechts-Wipe). Ganzes Suffix (Tag+Caret) zusammen stauchen
   → der Caret bleibt direkt am ">" kleben. */
.hdr__suffix--code{ transform: scaleX(.8); transform-origin:left; }
.hdr__suffix--code .tag{ clip-path: inset(0 100% 0 0); animation: codeWipe .6s steps(9) .05s forwards; }
@keyframes codeWipe{ to{ clip-path: inset(0 0 0 0); } }
.hdr__suffix .caret{
  width:2px; height:clamp(14px,1.5vw,19px); margin-left:3px; background:var(--accent);
  box-shadow:0 0 8px var(--glow); animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* CUT schneidet sich auf (Schlitz öffnet) */
.hdr__suffix--cut .tag{ clip-path: inset(46% 0 46% 0); opacity:0;
  animation: cutOpen .55s var(--ease) .15s forwards; }
@keyframes cutOpen{ 0%{ clip-path:inset(46% 0 46% 0); opacity:0; }
  35%{ opacity:1; } 100%{ clip-path:inset(0 0 0 0); opacity:1; } }

/* durchgezogene Schnittlinie: teilt Logo + THAEVEN exakt in der Mitte (endet vor CUT) */
.hdr__cutline{
  position:absolute; left:0; top:50%; height:1.5px; transform-origin:left;
  background:linear-gradient(90deg, transparent, var(--accent) 18%, #fff 50%, var(--accent) 88%, transparent);
  box-shadow:0 0 10px var(--glow), 0 0 22px rgba(207,224,230,.4);
  transform:scaleX(0); opacity:0; pointer-events:none; will-change:transform, opacity;
}
/* Blade fährt durch (scaleX 0→1), blitzt hell auf und VERSCHWINDET dann wieder */
.hdr__cutline.go{ animation: cutSweep .9s var(--ease) forwards; }
@keyframes cutSweep{ 0%{ transform:scaleX(0); opacity:0; } 18%{ opacity:1; }
  55%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }

/* nach dem Blade bleibt ein transparenter Spalt durch Logo + THAEVEN (echter „Cut") */
.hdr__lock.is-cut .hdr__mark,
.hdr__lock.is-cut .wordmark{
  -webkit-mask-image: linear-gradient(to bottom, #000 0 47%, transparent 47% 53%, #000 53% 100%);
          mask-image: linear-gradient(to bottom, #000 0 47%, transparent 47% 53%, #000 53% 100%);
}

.hdr__nav{ display:flex; gap:clamp(18px,2vw,34px); pointer-events:auto; }
.hdr__nav a{
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color .3s ease;
}
.hdr__nav a:hover{ color:var(--ink); }
@media (max-width:680px){ .hdr__nav{ display:none; } }

/* ----------------------------------------------------------------
   LEGENDE (rechts) — aktiver Marken-Bereich + Fortschrittslinie
   ---------------------------------------------------------------- */
.legend{
  position:fixed; right:clamp(16px,2.6vw,40px); top:50%; transform:translateY(-50%);
  z-index:35; display:flex; flex-direction:column;
  opacity:0; transition:opacity .8s var(--ease) 1.9s; pointer-events:none;
}
body.entered .legend{ opacity:1; }
.legend__item{
  appearance:none; background:none; border:0; cursor:pointer; pointer-events:auto;
  position:relative; display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:14px 0; font:inherit;
}
.legend__label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  color:var(--muted); opacity:.45; transition:color .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
  transform:translateX(6px);
}
.legend__dot{
  width:9px; height:9px; border-radius:50%; flex:none; position:relative;
  border:1px solid rgba(244,244,242,.4); background:transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* verbindende Linie nach unten zum nächsten Punkt (Dot-Mitte = right:4px) */
.legend__item:not(:last-child)::after{
  content:""; position:absolute; right:4px; top:calc(50% + 8px);
  height:calc(100% - 16px); width:1px; background:rgba(244,244,242,.16);
  transition: background .45s var(--ease);
}
.legend__item:hover .legend__label{ opacity:.8; color:var(--ink); }
/* aktiver Bereich */
.legend__item.is-active .legend__label{ opacity:1; color:var(--ink); transform:translateX(0); }
.legend__item.is-active .legend__dot{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(207,224,230,.12), 0 0 14px var(--glow);
}
/* bereits besuchte Bereiche → Linie gefüllt */
.legend__item.is-done .legend__dot{ background:rgba(207,224,230,.55); border-color:transparent; }
.legend__item.is-done::after{ background:rgba(207,224,230,.5); }
@media (max-width:768px){ .legend__label{ display:none; } }   /* nur Punkte → kein Konflikt mit dem Fächer */

/* ----------------------------------------------------------------
   FULLPAGE-STAGE — 4 Panels auf 2D-Raster, JS bewegt die „Kamera"
   Pfad: p1(0,0) ↓ p2(0,1) → p3(1,1) ↓ p4(1,2)   (js/fullpage.js)
   ---------------------------------------------------------------- */
.stage{
  position:fixed; inset:0; z-index:1;
  transition: transform .95s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.panel{
  position:absolute; top:0; left:0; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#p1{ left:0;     top:0;      background:#06070A; }
#p2{ left:0;     top:100vh;  }
#p3{ left:100vw; top:100vh;  }
#p4{ left:100vw; top:200vh;  }

/* ----------------------------------------------------------------
   PARALLAX-HERO  (eigene Version des 21st.dev parallax-scrolling)
   Mehrere Ebenen mit unterschiedlicher Scroll-Geschwindigkeit (Tiefe).
   ---------------------------------------------------------------- */
.px{ position:absolute; inset:0; isolation:isolate; }   /* Blend-Modi auf .px begrenzen */
.px__layer{ position:absolute; inset:-24% 0; will-change:transform;
  transition: transform .95s cubic-bezier(.76,0,.24,1); }

/* „Dive durch die Wolken": beim Verlassen von p1 TEILEN sich die Ebenen —
   obere Wolken fliegen nach OBEN raus, Vordergrund-Wolken nach UNTEN raus, der ferne
   Himmel zoomt heran. Reine CSS-Transition → beim Hochscrollen setzt sich alles
   automatisch in die Ausgangsposition zurück. */
body[data-active="1"] .px__bg, body[data-active="2"] .px__bg, body[data-active="3"] .px__bg{
  transform: scale(1.12); }
body[data-active="1"] .px__haze, body[data-active="2"] .px__haze, body[data-active="3"] .px__haze{
  transform: translateY(-14%) scale(1.05); }
/* Vordergrund-Wolken fliegen nach UNTEN aus dem Bild (kommen näher) */
body[data-active="1"] .px__fg, body[data-active="2"] .px__fg, body[data-active="3"] .px__fg{
  transform: translateY(34%) scale(1.18); }
/* obere Wolken fliegen nach OBEN aus dem Bild */
body[data-active="1"] .px__top, body[data-active="2"] .px__top, body[data-active="3"] .px__top{
  transform: translateY(-46%) scale(1.08); }

/* Bild-Pfade kommen inline per background-image (relativ zum HTML, nicht zur CSS!) */
/* Ebene 1 — ferner Himmel (volles, deckendes Bild) */
/* px__bg ist ein <video> (replaced element!) → braucht EXPLIZIT width/height + inset:0,
   sonst nimmt es seine intrinsische Größe (2560×1440) → dunkle Ränder.
   poster wird per object-fit ebenso cover gerendert → deckungsgleich mit dem ersten Frame. */
.px__bg{ z-index:0; inset:0; width:100%; height:100%; object-fit:cover;
  background-size:cover; background-position:center; background-repeat:no-repeat; }

/* Ebene 2 — Dunst/Wolken-Mitte: oberer Bildbereich ist schwarz → screen blendet ihn weg */
.px__haze{ z-index:1; mix-blend-mode:screen; opacity:.92;
  background-size:cover; background-position:center; background-repeat:no-repeat; }

/* Obere Wolken (gespiegelter Vordergrund): oben verankert, rahmt den Titel von oben */
.px__top{ z-index:3; mix-blend-mode:screen; inset:-24% 0 auto 0; height:92%;
  background-size:cover; background-position:center top; background-repeat:no-repeat; }

/* Ebene 4 — nahe Wolken (Vordergrund): unten verankert, schiebt sich vor den Titel */
.px__fg{ z-index:3; mix-blend-mode:screen; inset:auto 0 -24% 0; height:92%;
  background-size:cover; background-position:center bottom; background-repeat:no-repeat; }

/* ASMR-Himmel-Partikel: globaler, fixierter Overlay über der ganzen Seite (reagiert auf die Maus).
   z20 = über allen Panels/Stage (z1), aber unter Header(30)/Legende(35)/Preloader(50)/Cursor(60). */
.sky-fx{ position:fixed; inset:0; width:100%; height:100%; display:block;
  z-index:20; pointer-events:none; }   /* width/height nötig: Canvas ist replaced element */

/* Sichtbarer Cursor-Ring (Glow um die echte Maus, OS-Cursor bleibt sichtbar) */
.cursor-ring{
  position:fixed; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(207,224,230,.6); border-radius:50%;
  box-shadow:0 0 12px rgba(207,224,230,.35), inset 0 0 6px rgba(207,224,230,.15);
  pointer-events:none; z-index:60; opacity:0;
  transition: opacity .4s var(--ease), transform .09s ease-out;
}
body.entered .cursor-ring{ opacity:1; }
@media (hover:none){ .cursor-ring{ display:none; } }   /* Touch: kein Ring */

/* Ebene 3 — Titel/Copy (zwischen Dunst und Vordergrund → Tiefe) */
.px__mid{ z-index:2; display:flex; align-items:center; justify-content:center; }

.hero__copy{ text-align:center; padding:0 24px; max-width:min(1100px,92vw); }
.hero__eyebrow{
  font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent);
  margin-bottom:clamp(18px,3vh,30px);
}
.hero__title{
  font-weight:600; letter-spacing:-.025em; line-height:.98;
  font-size:clamp(44px,8vw,120px);   /* passt in 2 Zeilen, lässt Platz für den Subtext */
  text-shadow:0 2px 24px rgba(8,10,16,.4);   /* nur dezente Lesbarkeit, kein dunkler „Schatten-Klotz" */
}
.hero__title span{ display:block; }
.hero__title .em{ color:var(--accent); }
.hero__sub{
  margin:clamp(20px,3.4vh,34px) auto 0; max-width:54ch;
  color:rgba(248,249,252,.96); font-size:clamp(15.5px,1.55vw,20px); line-height:1.7;
  font-weight:450; text-shadow:0 1px 12px rgba(8,12,20,.6), 0 0 2px rgba(8,12,20,.5);
}

/* Hero-Copy blendet erst NACH dem Eintreten gestaffelt ein.
   will-change → Ebenen schon beim Laden stabil promoten, damit der Reveal keine NEUE
   Compositing-Ebene in der mix-blend/isolation-Gruppe erzeugt (sonst Helligkeits-Pop). */
.hero__eyebrow, .hero__title, .hero__sub{ opacity:0; transform:translateY(26px);
  will-change:transform, opacity; }
body.entered .hero__eyebrow{ animation: heroIn .9s var(--ease) 1.55s forwards; }
body.entered .hero__title  { animation: heroIn 1s  var(--ease) 1.72s forwards; }
body.entered .hero__sub    { animation: heroIn .9s var(--ease) 2.05s forwards; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

/* Scroll-Hinweis */
.hero__cue{
  opacity:0;
  position:absolute; left:50%; bottom:clamp(20px,3.5vh,40px); transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
.hero__cue i{
  width:1px; height:46px; background:linear-gradient(var(--accent), transparent);
  display:block; animation: cueDrop 1.9s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  35%{ opacity:1; } 60%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(1); transform-origin:bottom; opacity:0; } }
/* Cue erst nach dem Eintreten einblenden (nur Opacity → Zentrierung bleibt) */
body.entered .hero__cue{ opacity:1; transition: opacity .8s var(--ease) 2.4s; }

/* ----------------------------------------------------------------
   MARKEN-PANELS p2–p4 (Dummies, je eigener dezenter Akzent)
   ---------------------------------------------------------------- */
#p2{ background:
  radial-gradient(90% 80% at 30% 18%, rgba(120,170,210,.13), transparent 62%),
  linear-gradient(160deg, #0B0F15, #07080B); }
#p3{ background:
  radial-gradient(90% 80% at 74% 24%, rgba(205,185,150,.11), transparent 62%),
  linear-gradient(160deg, #100E0C, #08080A); }
#p4{ background:
  radial-gradient(90% 80% at 50% 88%, rgba(165,142,212,.13), transparent 62%),
  linear-gradient(160deg, #0C0A12, #08080A); }

.brandpanel{
  text-align:center; padding:0 24px; position:relative; z-index:1; max-width:min(960px,92vw);
  opacity:0; transform:translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.panel.is-current .brandpanel{ opacity:1; transform:none; }
.brandpanel__eyebrow{ font-size:11.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--accent); }
.brandpanel__title{ margin-top:18px; font-weight:600; letter-spacing:-.025em; line-height:1.0;
  font-size:clamp(46px,10vw,128px); }
.brandpanel__title .em{ color:var(--accent); }
.brandpanel__sub{ margin:22px auto 0; max-width:48ch; color:rgba(244,244,242,.72);
  font-size:clamp(15px,1.5vw,18px); line-height:1.7; }

/* ----------------------------------------------------------------
   thaeven-web HERO (p2): Text + CTA links, Card-Fan rechts
   ---------------------------------------------------------------- */
.webhero{
  /* Panel ist 100vw (.panel justify-content:center) → Text+Fächer als Gruppe mittig.
     KEIN max-width/margin hier: das Panel ist position:absolute, auto-Margin würde es nach links pinnen. */
  text-align:left;
  gap:clamp(40px,5vw,110px);
  padding:clamp(96px,13vh,150px) clamp(48px,5vw,90px) clamp(50px,8vh,90px) clamp(48px,5vw,90px);
}
/* Hintergrund-Video (seamless Crossfade-Loop) + sanfter Verdunklungs-Schleier für Lesbarkeit */
.webhero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.5; }
.webhero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 28%, rgba(6,7,10,.5) 100%),
    linear-gradient(180deg, rgba(6,7,10,.3), rgba(6,7,10,.5)); }
.webhero__text{ max-width:min(46ch,40vw); position:relative; z-index:2;
  opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.panel.is-current .webhero__text{ opacity:1; transform:none; }
.webhero__eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent); }
.webhero__title{ margin-top:18px; font-weight:600; letter-spacing:-.03em; line-height:.92;
  font-size:clamp(54px,9vw,150px); text-shadow:0 14px 60px rgba(0,0,0,.55); }
.webhero__brand{ display:block; }
/* <WEB/> als TEXT in derselben Schrift wie THAEVEN (Symbole in Akzentfarbe), wird „reincodiert" */
.webhero__web{ display:flex; align-items:center; margin-top:.04em; font-size:.82em; }
.webhero__webtxt{ font-weight:600; letter-spacing:-.02em; white-space:nowrap; clip-path: inset(0 100% 0 0); }
.webhero__webtxt i{ font-style:normal; color:var(--accent); }
/* Coding-Animation spielt bei JEDEM Wechsel auf p2 neu (ohne Caret im Hero) */
#p2.is-current .webhero__webtxt{ animation: codeWipe .62s steps(10) .35s forwards; }
.webhero__sub{ margin-top:20px; color:rgba(244,244,242,.74);
  font-size:clamp(15px,1.45vw,18px); line-height:1.7; }
.webhero__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(22px,3.4vh,36px);
  padding:15px 28px; border-radius:999px; background:var(--accent); color:#08080A;
  font-weight:600; font-size:13px; letter-spacing:.03em; text-decoration:none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.webhero__cta:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(207,224,230,.28); }
.webhero__cta span{ transition:transform .3s var(--ease); }
.webhero__cta:hover span{ transform:translateX(5px); }

/* Card-Fan (GSAP-getrieben: elastisches Auffächern + Hover-Spread; hover → Video, klick → Subdomain) */
.cardfan{
  position:relative; flex:none; z-index:2;
  --cw: clamp(190px,15.5vw,290px);
  width:clamp(360px,40vw,640px); height:clamp(420px,64vh,640px);
  /* etwas runter + minimal nach rechts → Fächer überschattet das "N" nur noch leicht statt den ganzen Text */
  transform: translate(clamp(8px,1.4vw,34px), clamp(34px,7vh,96px));
}
.fcard{
  position:absolute; left:50%; top:50%; width:var(--cw); height:calc(var(--cw) * 1.06);
  margin-left:calc(var(--cw) / -2); margin-top:calc(var(--cw) * 1.06 / -2);
  border-radius:16px; overflow:hidden; text-decoration:none; cursor:pointer;
  background:#0a0b0e; border:1px solid rgba(244,244,242,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  opacity:0; will-change:transform;
  transition: box-shadow .4s var(--ease);   /* Transform macht GSAP */
}
.fcard:hover{ box-shadow:0 36px 84px rgba(0,0,0,.7), 0 0 0 1px rgba(207,224,230,.34); }
/* Website-Screenshot: volle BREITE, oben verankert → Headlines intakt, nichts seitlich abgeschnitten.
   Querformat-Shot sitzt oben, der Rest der Karte ist dunkles Panel mit Label. */
.fcard__media{ position:absolute; inset:0; background-color:#0a0b0e;
  background-repeat:no-repeat; background-position:top center; background-size:100% auto; }
.fcard__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,11,14,.55) 62%, #0a0b0e 72%); }
.fcard__video{ position:absolute; top:0; left:0; width:100%; height:auto;
  opacity:0; transition:opacity .35s ease; }
.fcard:hover .fcard__video{ opacity:1; }
.fcard__label{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 16px;
  display:flex; flex-direction:column; gap:3px; }
.fcard__label b{ font-size:14px; font-weight:600; color:var(--ink); }
.fcard__label span{ font-size:10px; letter-spacing:.05em; color:var(--accent); }

/* ----------------------------------------------------------------
   THAEVEN-CUT (p3) — hell, gelb-elektrisch, Blitze + Parallax-Tiefe
   Kontrast zu den dunklen p1/p2. „Das Bewegte": Energie, Schnitt, Tempo.
   ---------------------------------------------------------------- */
.cut{ --cut-ink:#0B0B0B; overflow:hidden; }
.cut__bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 95% at 50% 18%, #FFF3AE 0%, #FFD60A 44%, #F4B400 100%),
    #FFD60A;
}
/* feiner „Energie"-Schimmer + Vignette für Tiefe */
.cut__bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(120% 100% at 50% 120%, rgba(120,80,0,.28), transparent 55%);
  mix-blend-mode:soft-light; }

/* Parallax-Wrapper (Maus-Tiefe via js/cut.js — setzt transform). Entrance liegt auf den Blitzen. */
.cut__plx{ position:absolute; inset:0; will-change:transform; }
.cut__plx--far{ z-index:1; }
.cut__plx--near{ z-index:4; }

/* Reale Blitze: weißer heißer Kern + mehrlagiger Glow + Verästelungen.
   IMMER laufend (nicht an is-current gekoppelt) → beim Panel-Wechsel kein Verschwinden/Nachhinken. */
.cut__bolts{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cut__bolts path{ fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; }
.cut__bolts--far{ animation: cutStrikeFar 5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.85)) drop-shadow(0 0 14px rgba(255,235,140,.7)); }
.cut__bolts--far path{ stroke-width:1.8; }
.cut__bolts--near{ animation: cutStrikeNear 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 20px rgba(255,232,120,.95)) drop-shadow(0 0 42px rgba(255,210,80,.5)); }
.cut__bolts--near path{ stroke-width:3.6; }

/* Strike-Aufhellung über die ganze Fläche (immer laufend, wie die Blitze) */
.cut__flash{ position:absolute; inset:0; z-index:2; background:#fff; opacity:0;
  pointer-events:none; mix-blend-mode:screen; animation: cutFlash 3.4s ease-in-out infinite; }

/* Copy */
.cut__copy{ position:relative; z-index:3; text-align:center; padding:0 24px;
  max-width:min(960px,92vw);
  opacity:0; transform:translateY(42px) scale(.985);
  transition: opacity .9s var(--ease), transform .9s var(--ease); }
.cut__eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(11,11,11,.66); font-weight:600; }
/* Zweizeiliger Titel: THAEVEN (oben) / CUT (unten). Der Cut wirkt NUR auf THAEVEN. */
.cut__title{ position:relative; display:inline-block; margin-top:14px;
  font-weight:800; letter-spacing:-.035em; line-height:.92;
  font-size:clamp(52px,9.5vw,140px); color:var(--cut-ink); text-shadow:0 6px 0 rgba(120,80,0,.12); }
.cut__cutword{ display:block; }
/* THAEVEN als zwei deckungsgleiche Hälften (oben/unten) + bleibende Schnitt-Linie */
.cut__word{ position:relative; display:block; }
.cut__t{ display:block; white-space:nowrap; will-change:transform; }
.cut__t--a{ position:relative; clip-path: inset(0 0 50% 0); }   /* obere Hälfte */
.cut__t--b{ position:absolute; inset:0; clip-path: inset(50% 0 0 0); }  /* untere Hälfte */
/* die Klinge: fährt links→rechts durch THAEVEN und VERSCHWINDET danach (wie der Header-Blade) */
.cut__blade{ position:absolute; left:-2%; right:-2%; top:50%; height:.04em;
  transform: translateY(-50%) scaleX(0); transform-origin:left center; opacity:0;
  background: linear-gradient(90deg, transparent, #fff 9%, #fff 91%, transparent);
  box-shadow: 0 0 7px #fff, 0 0 17px rgba(255,228,110,.95); pointer-events:none;
  will-change:transform, opacity; }
.cut__headline{ margin-top:22px; font-weight:700; line-height:1.08; color:var(--cut-ink);
  font-size:clamp(22px,3.4vw,44px); letter-spacing:-.01em; }
.cut__sub{ margin:18px auto 0; max-width:60ch; color:rgba(11,11,11,.78);
  font-size:clamp(15px,1.45vw,18px); line-height:1.65; }
.cut__badge{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(22px,3.2vh,34px);
  padding:9px 18px; border-radius:999px; background:var(--cut-ink); color:#FFD60A;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.cut__badge i{ width:8px; height:8px; border-radius:50%; background:#FFD60A;
  box-shadow:0 0 0 0 rgba(255,214,10,.7); animation: cutPulse 1.8s var(--ease) infinite; }

/* ---- Entrance + Strikes, REPLAY bei jedem Wechsel auf p3 (is-current togglet) ---- */
#p3.is-current .cut__copy{ opacity:1; transform:none; }
/* Cut auf THAEVEN — 1:1 wie das Logo: Blade fährt links→rechts durch, VERSCHWINDET,
   danach bleibt ein transparenter Spalt (die zwei Hälften rücken minimal auseinander). */
#p3.is-current .cut__blade{ animation: cutBladeSweep 1s var(--ease) .9s both; }
#p3.is-current .cut__t--a{ animation: cutGapTop 1.45s var(--ease) .9s both; }
#p3.is-current .cut__t--b{ animation: cutGapBot 1.45s var(--ease) .9s both; }

/* Blade fährt durch THAEVEN und verschwindet (wie der Header-Cutline) */
@keyframes cutBladeSweep{
  0%{ transform:translateY(-50%) scaleX(0); opacity:0 } 18%{ opacity:1 }
  55%{ transform:translateY(-50%) scaleX(1); opacity:1 } 100%{ transform:translateY(-50%) scaleX(1); opacity:0 } }
/* Hälften bleiben zusammen, bis der Blade durch ist, dann kleiner bleibender Spalt (≈ Logo-Spalt) */
@keyframes cutGapTop{ 0%,45%{transform:translateY(0)} 72%{transform:translateY(-3.3%)} 100%{transform:translateY(-3%)} }
@keyframes cutGapBot{ 0%,45%{transform:translateY(0)} 72%{transform:translateY(3.3%)} 100%{transform:translateY(3%)} }
/* scharfe, reale Strikes (niedrige Grundsichtbarkeit + helle Doppel-Flashes) */
@keyframes cutStrikeNear{
  0%,100%{opacity:.16} 28%{opacity:.16} 29%{opacity:1} 30.5%{opacity:.3} 32%{opacity:.95} 33.5%{opacity:.2}
  70%{opacity:.16} 71%{opacity:1} 73%{opacity:.28} }
@keyframes cutStrikeFar{
  0%,100%{opacity:.1} 47%{opacity:.1} 48%{opacity:.6} 49.5%{opacity:.16} 51%{opacity:.5} 52.5%{opacity:.1} }
@keyframes cutFlash{
  0%,27%{opacity:0} 29%{opacity:.5} 31%{opacity:.06} 33%{opacity:.38} 36%{opacity:0}
  70%,70.5%{opacity:0} 72%{opacity:.42} 75%{opacity:0} 100%{opacity:0} }
@keyframes cutPulse{ 0%{box-shadow:0 0 0 0 rgba(255,214,10,.7)} 70%,100%{box-shadow:0 0 0 9px rgba(255,214,10,0)} }

@media (prefers-reduced-motion: reduce){
  .cut__bolts--near, .cut__bolts--far, .cut__flash,
  #p3.is-current .cut__blade, #p3.is-current .cut__t--a, #p3.is-current .cut__t--b{ animation:none; }
  .cut__bolts{ opacity:.3; }
  .cut__flash, .cut__blade{ opacity:0; }
  #p3.is-current .cut__t--a{ transform:translateY(-3%); }   /* statischer Spalt */
  #p3.is-current .cut__t--b{ transform:translateY(3%); }
}

/* Header + Legende auf dem hellen Panel dunkel schalten (Logo/Texte sind sonst weiß = unsichtbar) */
.hdr, .legend{ transition: filter .5s var(--ease); }
body[data-active="2"] .hdr{ filter: invert(1) brightness(.9); }
body[data-active="2"] .legend{ filter: invert(1) contrast(1.15); }

/* Header-Suffix Z1R0 (Scramble-Decode, Mono/Cyan) — gleiche Höhe/Größe wie THAEVEN */
.hdr__suffix--zero{ margin-left:clamp(16px,1.7vw,26px); align-self:center; align-items:center; }
.hdr__suffix--zero .zerotxt{ display:block; line-height:.74;        /* ≈ Cap-Höhe → mittig wie THAEVEN */
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:clamp(15px,1.55vw,21px); font-weight:600; letter-spacing:.03em; color:#67E8D0;
  text-shadow:0 0 9px rgba(103,232,208,.7); }

/* ----------------------------------------------------------------
   THAEVEN-Z1R0 (p4) — dunkel-futuristisch, selbst-bauender Wissensgraph + Scramble-Decode
   ---------------------------------------------------------------- */
.zero{ --z-ink:#EAF6F2; --z-accent:#67E8D0; overflow:hidden; }
.zero__bg{ position:absolute; inset:0; z-index:0;
  background: radial-gradient(120% 90% at 50% 32%, #0a151a 0%, #06090d 55%, #03050a 100%), #03050a; }
.zero__bg::after{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(103,232,208,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(103,232,208,.022) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(103,232,208,.022) 38px 39px); }

/* Gehirn-UMRANDUNG: WebGL „Neural Noise"-Shader, auf die Gehirn-Kontur maskiert (js/zero.js) */
.zero__neuro{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center 45%; mask-position:center 45%;
  -webkit-mask-size:62% auto; mask-size:62% auto; }

.zero__copy{ position:relative; z-index:3; text-align:center; padding:0 24px; max-width:min(1000px,92vw);
  opacity:0; transform:translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
#p4.is-current .zero__copy{ opacity:1; transform:none; }
.zero__eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--z-accent); font-weight:600; }
.zero__title{ margin-top:14px; line-height:.96; }
.zero__brand{ display:block; font-weight:600; letter-spacing:-.03em; color:var(--z-ink);
  font-size:clamp(38px,6.6vw,98px); }
.zero__name{ display:block; margin-top:.02em; font-weight:700; letter-spacing:.05em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:var(--z-accent);
  font-size:clamp(60px,12.5vw,190px); text-shadow:0 0 30px rgba(103,232,208,.5); }
.zero__headline{ margin-top:20px; font-weight:700; line-height:1.1; color:var(--z-ink);
  font-size:clamp(21px,3.1vw,40px); }
.zero__sub{ margin:18px auto 0; max-width:60ch; color:rgba(234,246,242,.74);
  font-size:clamp(15px,1.45vw,18px); line-height:1.65; }
.zero__badge{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(22px,3.2vh,34px);
  padding:9px 18px; border-radius:999px; border:1px solid rgba(103,232,208,.4); color:var(--z-accent);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; background:rgba(103,232,208,.06); }
.zero__badge i{ width:8px; height:8px; border-radius:50%; background:var(--z-accent);
  box-shadow:0 0 0 0 rgba(103,232,208,.6); animation: zBadge 1.9s var(--ease) infinite; }
@keyframes zBadge{ 0%{box-shadow:0 0 0 0 rgba(103,232,208,.6)} 70%,100%{box-shadow:0 0 0 9px rgba(103,232,208,0)} }

@media (prefers-reduced-motion: reduce){
  .zero__neuro{ opacity:.5; }
}

/* Ultrawide (z.B. 3440×1440): Hero-Schrift + Karten größer, Gruppe weiter mittig */
@media (min-width:2200px){
  /* p1-Wolken näher heranzoomen → so immersiv/„krass" wie auf dem normalen Screen.
     Text-Ebene gegen-skalieren, damit die Copy ihre Größe behält. */
  .px{ transform:scale(1.2); transform-origin:center; }
  .px__mid{ transform:scale(.833); }
  .webhero{ gap:clamp(110px,7vw,200px); }
  .webhero__text{ max-width:54ch; }
  .webhero__title{ font-size:clamp(150px,5.6vw,210px); }
  .webhero__sub{ font-size:clamp(18px,1.25vw,24px); }
  .webhero__eyebrow{ font-size:15px; }
  .cardfan{ --cw:clamp(290px,9.8vw,360px); width:clamp(640px,28vw,840px); height:clamp(640px,52vh,760px); }
}

@media (max-width:1200px){
  .webhero{ flex-direction:column; justify-content:center; text-align:center;
    max-width:none; padding:clamp(90px,12vh,130px) 24px 60px; gap:clamp(20px,3vh,36px); }
  .webhero__text{ max-width:none; }
  .webhero__web{ justify-content:center; }   /* <WEB/> mittig unter zentriertem THAEVEN */
  .cardfan{ --cw:clamp(170px,26vw,230px); width:min(94vw,520px); height:clamp(320px,42vh,440px); }
}

@media (prefers-reduced-motion: reduce){
  .px__layer{ transform:none !important; }
  .wordmark .ltr{ opacity:1; transform:none; }
  .hero__cue i{ animation:none; }
  .fcard{ opacity:1; }
}

/* ================================================================
   MOBILE (Handy, Hochformat ≤640px) — alle 4 Heroes in 100vh einpassen
   ================================================================ */
@media (max-width:640px){
  /* Handy: Panels rein vertikal stapeln (Navigation nur nach unten) — passt zu cellsMobile */
  #p3{ left:0; top:200vh; }
  #p4{ left:0; top:300vh; }

  /* Header kompakter */
  .hdr{ padding:14px 16px; }

  /* p1 THAEVEN — kleiner, damit „Über den Wolken" / „entsteht Bestand." je 1 Zeile bleiben */
  .hero__title{ font-size:clamp(30px,8.4vw,42px); line-height:1.08; }
  .hero__sub{ font-size:14px; line-height:1.55; max-width:34ch; }

  /* p2 THAEVEN-WEB — zentriert (wie CUT), kompakter Fächer darunter (nicht abgeschnitten) */
  .webhero{ padding:clamp(70px,10vh,92px) 18px 24px; gap:12px; }
  .webhero__eyebrow{ font-size:10.5px; letter-spacing:.34em; }
  .webhero__title{ font-size:clamp(44px,12.5vw,62px); }
  .webhero__web{ font-size:.96em; margin-top:.02em; }   /* so groß wie THAEVEN — wie CUT */
  .webhero__sub{ font-size:13.5px; line-height:1.5; max-width:40ch; margin-top:12px; }
  .webhero__cta{ padding:12px 22px; font-size:12px; margin-top:14px; }
  .cardfan{ transform:none; --cw:clamp(102px,28vw,132px);
    width:92vw; height:clamp(214px,30vh,272px); margin-top:4px; }

  /* p3 THAEVEN-CUT — Copy kompakter */
  .cut__title{ font-size:clamp(48px,15vw,72px); }
  .cut__headline{ font-size:clamp(20px,5vw,28px); }
  .cut__sub{ font-size:13.5px; line-height:1.55; max-width:40ch; }

  /* p4 Z1R0 — Gehirn-Umrandung größer/prominenter, Copy kompakt */
  .zero__neuro{ -webkit-mask-size:94% auto; mask-size:94% auto;
    -webkit-mask-position:center 42%; mask-position:center 42%; }
  .zero__brand{ font-size:clamp(34px,9vw,52px); }
  .zero__name{ font-size:clamp(54px,16vw,76px); }
  .zero__headline{ font-size:clamp(20px,5vw,28px); }
  .zero__sub{ font-size:13.5px; line-height:1.55; max-width:42ch; }
}

/* sehr kleine / niedrige Geräte: noch etwas enger */
@media (max-width:640px) and (max-height:720px){
  .webhero{ padding-top:64px; }
  .cardfan{ height:clamp(200px,28vh,250px); }
  .hero__title{ font-size:clamp(36px,10vw,50px); }
}