/* ==========================================================================
   biteme.digital . Home (pages/home.css) v4 . DER AUFSTIEG, INVERTIERT
   v4 (Guide §5a): Szenen-Prinzip (.scene = geschlossene ~100vh-Szene,
   top-down lesbar, klare Kante, kein Overlap), L4-Okkluder-Silhouetten
   (.occluder), Cluster als data-deck-Sektion. Die Sticky-Deck-Mechanik
   baut WP-A2; bis dahin gilt der vertikale Stack (= Mobile-Verhalten).
   Das Dokument ist physisch invertiert: Breach oben, Hero (Meeresgrund)
   unten, Footer darunter. Landung am Hero, Aufstieg = HOCHscrollen.
   Regel: keine Initial-States fuer INHALTE (opacity:0) in CSS, nur reine
   Deko-Layer (Licht, Blasen, Splash, Leuchtspur) duerfen unsichtbar starten.
   Ohne JS ist jede Sektion voll lesbar, die Breach-Szene zeigt statisch
   den hellen Himmel. CI v3: Caribbean/Purple/Jellofish, kein Orange.
   ========================================================================== */

/* Lande-Zone: die Home landet am Meeresgrund (Hero, unten im Dokument) */
body { --zone-bg: var(--zone-abyss); }

/* v6-Fix 2: fester Zonen-Hintergrund UNTER dem Fisch-Layer (z:0).
   Der Fisch (z:1) schwimmt VOR dem Wasser-Hintergrund, HINTER dem
   Content in main (z:2). Szenen-eigene Hintergruende (::before, God Rays)
   bleiben in main und verdecken den Fisch NICHT, weil sie transparent
   auf dem Zone-Hintergrund aufbauen. */
.zone-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--zone-bg, var(--bg-deep));
}

/* --------------------------------------------------------------------------
   SZENEN-PRINZIP (v4, Guide §5a): jede .scene ist eine geschlossene
   Szene in Bildschirmhoehe, in sich top-down lesbar, klare Kante zur
   naechsten Szene (overflow clippt Deko/Parallax), kein Overlap.
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(4rem, 10vh, 7rem);
}
/* Inhalt liegt ueber den Deko-Layern (Rays, Kaustik, Okkluder-Sockel) */
.scene > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   L4-OKKLUDER (v4, Guide §5a): nahe Vordergrund-Silhouetten (Fels, Kelp,
   Seegras, Koralle), dunkler als die Szene, leicht unscharf (blur 2px),
   Parallax 0.3 via data-parallax. Hinter ihnen wendet der Fisch (WP-B).
   Bottom-Ueberhoehung: der Parallax-Versatz legt keine Kanten frei.
   -------------------------------------------------------------------------- */
.occluder {
  position: absolute;
  /* v6-Fix 6: bottom 0 statt -16vh. Cluster sitzen am Szenen-BODEN
     auf (Felsen/Sediment-Basis verdeckt den Schnitt), keine freien
     Schnittkanten mitten im Blatt. overflow:hidden der Szene clippt
     sauber am unteren Rand. */
  bottom: 0;
  pointer-events: none;
  z-index: 3;
  filter: blur(1.5px);
}
.occluder svg { display: block; width: 100%; height: 100%; }

/* Kelp-Wand links in der Insights-Szene (deckt Wende C) */
.occluder--kelp {
  left: calc(-1 * clamp(10px, 2vw, 28px));
  width: clamp(140px, 16vw, 250px);
  height: min(96vh, 760px);
}

/* Seegras-Band unten in der Stats-Szene (volle Breite, Band-Silhouette) */
.occluder--grass {
  left: -2vw;
  width: 104vw;
  height: clamp(100px, 20vh, 200px);
  bottom: -14vh;
}

/* Sticky-Deck-Okkluder: Korallen-Fels links (Wende A), Felsnadel
   rechts (Wende B). Haengen im Deck-Panel, stehen die ganze Deck-
   Phase fix im Bild (Sticky-Mechanik: WP-A2).
   v4 (WP-V1): auf 18vw verschmaelert, damit der Gallery-Head-Text
   (zentriert) NIE ueberdeckt wird (Juergens "nie ueber Text"-Regel).
   v6: max-width 260px hart gedeckelt (1920px-Probe). */
.occluder--deck-left {
  left: calc(-1 * clamp(16px, 3vw, 48px));
  width: clamp(160px, 18vw, 260px);
  height: min(88vh, 720px);
}
.occluder--deck-right {
  right: calc(-1 * clamp(16px, 3vw, 48px));
  width: clamp(170px, 21vw, 340px);
  height: min(92vh, 740px);
}

/* Felsformation rechts im Beweisstueck (deckt Wende B).
   v4 (WP-V1): auf 14vw verschmaelert + weiter nach rechts (-3vw),
   damit das Porthole-Video und der Text NIE ueberdeckt werden. */
.occluder--proof-rock {
  right: calc(-1 * clamp(16px, 3vw, 48px));
  width: clamp(140px, 14vw, 220px);
  height: min(86vh, 600px);
}

/* Naher Felsblock mit Koralle rechts unten im Hero (reine Tiefen-Deko).
   v4 (WP-V1): auf 22vw verschmaelert, damit Hero-Actions/CTA-Buttons
   rechts NIE ueberdeckt werden (Juergens "nie ueber Text"-Regel). */
.occluder--hero-rock {
  right: calc(-1 * clamp(12px, 2.5vw, 36px));
  width: clamp(200px, 22vw, 340px);
  height: clamp(180px, 32vh, 300px);
  bottom: -14vh;
}

@media (max-width: 899px) {
  /* Mobile: Okkluder dezenter und schmaler, kein Platzfresser (Guide §5a) */
  .occluder--kelp { width: 110px; }
  .occluder--proof-rock { display: none; }
  .occluder--deck-left { width: 160px; }
  .occluder--deck-right { width: 130px; }
  .occluder--hero-rock { width: 220px; }
}

/* --------------------------------------------------------------------------
   L1 HINTERGRUND-DEKO (v4, Guide §5a): ferne Felsen-/Pflanzen-Silhouetten,
   dunkel, leichtes Parallax 0.1. Hinter L3 Content und L4 Okkludern, rein
   dekorativ. Sparsam, Eleganz vor Verspieltheit.
   -------------------------------------------------------------------------- */
.deco-bg {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.deco-bg svg { display: block; width: 100%; height: 100%; }

/* Ferne Felsformation rechts in der DSGVO-Szene.
   v4 (WP-V1): right -2vw, damit die Silhouette ausserhalb des
   Content-Bereichs bleibt (DSGVO-Grid rechte Spalte). */
.deco-bg--dsgvo-far {
  right: -2vw;
  bottom: -10vh;
  width: clamp(120px, 12vw, 200px);
  height: min(72vh, 480px);
}

/* Fernes Seegras-Feld links unten in der Kunden-Stroemung.
   v4 (WP-V1): schmaeler (14vw), damit die stream-band-Zeilen
   nicht ueberdeckt werden. */
.deco-bg--stream-grass {
  left: calc(-1 * clamp(8px, 1.5vw, 20px));
  bottom: -8vh;
  width: clamp(120px, 14vw, 220px);
  height: min(56vh, 380px);
}

/* Ferne Riff-Silhouette rechts in der Lab-Szene */
.deco-bg--lab-reef {
  right: 0;
  bottom: -8vh;
  width: clamp(140px, 16vw, 240px);
  height: min(56vh, 360px);
}

@media (max-width: 899px) {
  /* Mobile: L1-Deko reduziert (Guide §5a, matchMedia) */
  .deco-bg--dsgvo-far { display: none; }
  .deco-bg--stream-grass { width: 120px; opacity: 0.5; }
  .deco-bg--lab-reef { display: none; }
}

/* --------------------------------------------------------------------------
   UNTERWASSERWELT v2 (WP-V2): Sway, Seekarten-Labels, Fischschwaerme
   -------------------------------------------------------------------------- */

/* Kelp-Blade (deko.js-Generator): jedes Blatt braucht transform-box
   fill-box damit scaleY/transformOrigin im SVG korrekt wirken. */
.kelp-blade {
  transform-box: fill-box;
}

/* Sanftes Schwanken der Deko-SVGs (auf dem inneren <svg>, NICHT auf dem
   Okkluder-Wrapper, da dieser data-parallax=transform bekommt).
   transform-origin unten: Pflanzen wiegen sich an der Basis. */
.deko-sway {
  transform-origin: 50% 100%;
  animation: deko-sway 9s ease-in-out infinite alternate;
}
.deko-sway--slow {
  transform-origin: 50% 100%;
  animation: deko-sway 14s ease-in-out infinite alternate;
}
@keyframes deko-sway {
  from { transform: rotate(-1.5deg); }
  to { transform: rotate(1.5deg); }
}

/* Seekarten-Labels: JetBrains Mono, muted/caribbean, Seekarten-Stil */
.seekarten-label {
  position: absolute;
  z-index: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.45;
  white-space: nowrap;
  pointer-events: none;
}
/* Kelp-Label (Insights, links unten) */
.insights .seekarten-label { left: clamp(8px, 2vw, 24px); bottom: 8vh; }
/* Riffkante (Deck, rechts unten) */
.seekarten-label--right { right: clamp(8px, 2vw, 24px); bottom: 6vh; }
/* Seegrasguertel (Stats, links unten, v6: weiter unten, kein Overlap mit Wrack-Label) */
.seekarten-label--bottom { left: clamp(12px, 3vw, 32px); bottom: 0.5vh; }
/* Felssockel (Hero, rechts unten) */
.seekarten-label--hero { right: clamp(12px, 3vw, 40px); bottom: 6vh; }

/* Fischschwaerme: dezentes Drift-Parallax, langsam, elegant */
.fish-school {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: school-drift 18s ease-in-out infinite alternate;
}
.fish-school svg { display: block; width: 100%; height: 100%; }
.fish-school--stream {
  right: 8vw;
  top: 14vh;
  width: clamp(140px, 18vw, 260px);
}
.fish-school--dsgvo {
  left: 6vw;
  top: 10vh;
  width: clamp(110px, 14vw, 200px);
}
.fish-school--lab {
  right: 5vw;
  top: 8vh;
  width: clamp(100px, 12vw, 180px);
}
@keyframes school-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(12px, -8px); }
}

@media (max-width: 899px) {
  /* Mobile: Schwaerme und Labels reduziert, kein Overflow */
  .fish-school--dsgvo { display: none; }
  .fish-school--lab { display: none; }
  .fish-school--stream { width: 120px; opacity: 0.7; }
  .seekarten-label { display: none; }
  .deko-sway, .deko-sway--slow { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .deko-sway, .deko-sway--slow { animation: none; }
  .fish-school { animation: none; }
}

/* --------------------------------------------------------------------------
   OKTOPUS-SCHATTEN (WP-V7, B+-Stil): gross, sehr dunkel, Hintergrund-Ebene
   (z:-1, UNTER dem Fisch). Position midnight/twilight, nie ueber Text.
   -------------------------------------------------------------------------- */
.octopus-shadow {
  position: absolute;
  right: 8vw;
  top: 6vh;
  width: clamp(200px, 28vw, 360px);
  pointer-events: none;
  z-index: -1;
}
.octopus-shadow svg { display: block; width: 100%; height: auto; }

@media (max-width: 899px) {
  .octopus-shadow { display: none; }
}

/* --------------------------------------------------------------------------
   JELLOFISH-KICKER (Juergen-GO 13.06. BESTAETIGT): dezenter Jellofish-Ton
   auf den kleineren Eyebrow-Headlines (Kicker) der Home in dunklen Zonen.
   Hebt den Text sichtbar ab, bleibt dezent (opacity 0.6). Headlines bleiben
   weiss. Echtes Jellofish-Licht (Laterne/Glow) unberuehrt. Seekarten-Labels
   (reine Tiefen-Deko) tragen KEIN Jellofish, die bleiben Caribbean.
   -------------------------------------------------------------------------- */
.dsgvo .kicker,
.lab .kicker,
.stream .kicker {
  color: var(--accent-jellofish);
  opacity: 0.92;
}

/* Seekarten-Labels: Jellofish-Ton statt muted (WP-V7) */
.seekarten-label {
  color: var(--accent-caribbean);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   HERO (abyss, -800 m) . Meeresgrund, Lande-Sektion (data-dive-target)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Cue-Zone (WP-A4 Befund 3): eine Quelle fuer Cue-Top, Onboard-Top
     und die Content-Clearance. 72px = Header-Hoehe im Fluss. */
  --cue-top: calc(72px + clamp(1.25rem, 4vh, 2.75rem));
  /* Hero-Inhalt (Badge/H1) startet erst UNTER der Cue+Hinweis-Zone:
     104px Cue-Stack + ~22px Hinweis-Zeile + Luft. Border-box: bei
     knapper Viewport-Hoehe waechst die Szene einfach mit. */
  padding-top: calc(var(--cue-top) + 126px + clamp(1.5rem, 4vh, 2.5rem));
}

/* Sediment-Linie: feine Meeresgrund-Andeutung unten, zeichnet sich (data-draw) */
.hero__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(70px, 12vh, 120px);
  pointer-events: none;
  z-index: 0;
}
.hero__floor svg { width: 100%; height: 100%; }

/* Meeresgrund-Silhouetten (v3): drei Parallax-Ebenen aus dunklen Shapes
   (Felsen, Pflanzen). Reine Fill-Silhouetten, keine Clipart. data-parallax
   staffelt die Tiefe (Desktop), Mobile statisch. Ueberhoehung nach unten,
   damit der Parallax-Versatz keine Kanten freilegt. */
.hero__seabed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(180px, 32vh, 320px);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.hero__seabed svg {
  position: absolute;
  left: -2vw;
  bottom: -12vh;
  width: 104vw;
  height: 100%;
}
.hero__seabed svg:nth-child(1) { opacity: 0.5; }
.hero__seabed svg:nth-child(2) { opacity: 0.75; }
.hero__seabed svg:nth-child(3) { opacity: 1; }

/* Daemmrige Bodennaehe: kaum Licht von oben, leichtes Glimmen am Grund */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(74, 36, 120, 0.12), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(6, 8, 15, 0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Laternen-Licht: der Spot, in dem die H1 freigelegt wird (home.js) */
.hero__light {
  position: absolute;
  left: 38%;
  top: 44%;
  width: min(860px, 100vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(160, 239, 255, 0.14) 0%, rgba(160, 239, 255, 0.05) 36%, transparent 64%);
  mix-blend-mode: screen;
  opacity: 0; /* reine Deko, home.js blendet ein; ohne JS bleibt der Text lesbar */
  pointer-events: none;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(6rem, 14vh, 9rem);
}

.hero__badge { margin-bottom: 1.75rem; }

.hero__sub {
  margin-top: 1.75rem;
  max-width: 38rem;
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Aufstiegs-Cue (Pflicht, v3): ↑-Pfeil + Lichtlinie mit AUFsteigender
   Blase, oben im Hero. In einer Sekunde klar: hochscrollen = auftauchen. */
.hero__cue {
  position: absolute;
  top: var(--cue-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-caribbean);
}
.hero__cue svg { animation: cue-nudge 2.8s ease-in-out infinite; }
.hero__cue-line {
  display: block;
  width: 1px;
  flex: 1;
  background: linear-gradient(0deg, transparent, var(--caribbean-25));
  position: relative;
  overflow: hidden;
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  border: 1px solid var(--accent-caribbean);
  animation: cue-rise 2.8s ease-in-out infinite;
}
@keyframes cue-rise {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 0.9; }
  70%, 100% { transform: translateY(-72px); opacity: 0; }
}
@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  45% { transform: translateY(-5px); opacity: 1; }
}

/* Onboarding-Hinweis (§5a): JS-injiziert (scroll-engine, nur ascent),
   Mono-Zeile "Scroll nach oben · Auftauchen ↑" unter dem Cue. Per CSS
   SICHTBAR (reduced-motion zeigt ihn statisch); der animierte Pfad
   setzt den Initial-State via JS (gsap autoAlpha 0) und blendet ihn
   nach dem ersten Aufwaerts-Scroll aus. KEIN transform fuers Zentrieren:
   gsap pulst ueber scale und wuerde ein translateX(-50%) ueberschreiben.
   WP-A4 Befund 3: max-width:none ist Pflicht: das globale p-Zeichenmass
   (design-system: p { max-width: 68ch }) macht die left/right-Box sonst
   ueberconstraint, left gewinnt, der Hinweis klebt linksbuendig. Daher
   shrink-to-fit (width:max-content) + margin-inline:auto = exakt mittig
   unter dem Cue, ohne transform. */
.hero__onboard {
  position: absolute;
  top: calc(var(--cue-top) + 104px);
  left: 0;
  right: 0;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  z-index: 2;
  margin-block: 0;
  text-align: center;
  font-family: var(--font-mono);
  /* v5: nochmals ~10% groesser (1.1 → 1.2rem, Juergen-Feedback) */
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--accent-caribbean);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 899px) {
  .hero__onboard { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   DAS WRACK (WP-V4 Signature-Moment): versunkener Frachter in der Stats-
   Szene (midnight). Elegant-mystisch, leicht schraeg (5° Neigung, gesunken).
   Der Fisch taucht durch: Bullauge rein, Schornstein raus. Randlage,
   nie ueber Text (V1-Regel). Fish (z:1) geht hinter dem Wrack (in main,
   z:2) durch. Mobile: ausgeblendet (Mobile-Pfad hat keine Wenden).
   -------------------------------------------------------------------------- */
.wrack {
  position: absolute;
  left: calc(-1 * clamp(4px, 1vw, 16px));
  bottom: 4vh;
  width: clamp(280px, 38vw, 520px);
  z-index: 2;
  pointer-events: none;
  transform: rotate(5deg);
  transform-origin: 60% 80%;
}
.wrack svg { display: block; width: 100%; height: auto; }
/* v6-Fix 5: Label rechts positioniert (kein Overlap mit --bottom-Label links) */
.seekarten-label--wrack {
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  transform: rotate(-5deg);
  color: var(--text-muted);
  opacity: 0.4;
}

@media (max-width: 899px) {
  /* Mobile: Wrack ausgeblendet (Mobile-Pfad monoton, keine Wenden) */
  .wrack { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wrack .deko-sway { animation: none; }
}

/* --------------------------------------------------------------------------
   Section 2 . STATS (abyss -> midnight)
   -------------------------------------------------------------------------- */
.stats { padding-block: clamp(4rem, 10vh, 7rem); }

/* Blasen: reine Deko, steigen traege auf (transform/opacity only) */
.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bubbles i {
  position: absolute;
  bottom: -28px;
  display: block;
  border: 1px solid var(--caribbean-25);
  border-radius: 999px;
  opacity: 0;
  animation: bubble-rise linear infinite;
}
.bubbles i:nth-child(1) { left: 8%;  width: 6px;  height: 6px;  animation-duration: 11s; animation-delay: -2s; }
.bubbles i:nth-child(2) { left: 21%; width: 4px;  height: 4px;  animation-duration: 14s; animation-delay: -9s; }
.bubbles i:nth-child(3) { left: 34%; width: 9px;  height: 9px;  animation-duration: 12s; animation-delay: -5s; }
.bubbles i:nth-child(4) { left: 47%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay: -12s; }
.bubbles i:nth-child(5) { left: 59%; width: 7px;  height: 7px;  animation-duration: 10s; animation-delay: -3s; }
.bubbles i:nth-child(6) { left: 71%; width: 4px;  height: 4px;  animation-duration: 15s; animation-delay: -7s; }
.bubbles i:nth-child(7) { left: 83%; width: 10px; height: 10px; animation-duration: 13s; animation-delay: -10s; }
.bubbles i:nth-child(8) { left: 93%; width: 5px;  height: 5px;  animation-duration: 17s; animation-delay: -1s; }

@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.35; }
  80%  { opacity: 0.15; }
  100% { transform: translateY(-52vh) translateX(16px); opacity: 0; }
}

.stats__row {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .stats__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .stats__row { grid-template-columns: repeat(4, 1fr); } }

.stat-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.375rem 1.5rem;
  display: flex;
  align-items: center;
}
.stat-pill p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: none;
}
.stat-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1;
  color: var(--accent-caribbean);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Section 3 . WAS WIR TUN (midnight) . CLUSTER-DECK (data-deck, WP-A2)
   v4: KEIN ScrollTrigger-Pin. BASIS-Layout (Mobile <900px, reduced-motion,
   ohne JS): vertikaler Stack, voll lesbar. Auf Desktop + no-preference
   setzt die Engine die Klasse .deck-active auf die Sektion: Container
   220vh, inneres position:sticky-Panel 100vh, der Karten-Track faehrt
   horizontal per Engine-Scrub (nur transform), gsap-Snap an den
   Kartenmitten (scroll-engine.js, setupDecks).
   -------------------------------------------------------------------------- */
.cluster-scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding-block: clamp(4rem, 10vh, 7rem);
}
.deck-sticky { position: relative; }

.gallery-head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.deck-track {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: min(var(--container), 46rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cluster-card {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}
.cluster-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cluster-card h3 { margin-bottom: 0.625rem; }
.cluster-card__hook {
  color: var(--accent-caribbean);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.cluster-card__body {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  flex: 1;
}
.cluster-card__punch {
  font-size: 0.9375rem;
  color: var(--text-primary);
  opacity: 0.9;
  border-left: 2px solid var(--caribbean-25);
  padding-left: 0.875rem;
  margin-bottom: 1.5rem;
}
.cluster-card .arrow-link { margin-top: auto; }

/* v8 (Fix 4): Karten-Kompaktstufe fuer niedrige Fensterhoehen.
   Bei ≤800px Hoehe werden Karten hart an der Szenen-Unterkante gekappt
   (overflow:hidden). Padding/Schrift moderat kleiner, Karte passt ins Panel.
   KEINE Textkuerzung. Gilt auch fuer Insight-Karten. */
@media (max-height: 800px) {
  .cluster-card {
    padding: clamp(0.75rem, 2vh, 1.25rem);
    font-size: 0.875rem;
  }
  .cluster-card__top { margin-bottom: 0.875rem; }
  .cluster-card h3 { font-size: 1.05rem; margin-bottom: 0.375rem; }
  .cluster-card__hook { font-size: 0.8125rem; margin-bottom: 0.625rem; }
  .cluster-card__body { font-size: 0.8125rem; margin-bottom: 0.75rem; }
  .cluster-card__punch { font-size: 0.8125rem; margin-bottom: 0.875rem; }
  .insight-card h3 { font-size: 1.05rem; }
  .insight-card p { font-size: 0.8125rem; }
}

/* Aktives Sticky-Deck (Klasse setzt NUR die Engine: Desktop >= 900px UND
   prefers-reduced-motion: no-preference). overflow: clip statt hidden,
   weil ein overflow:hidden-Vorfahr position:sticky aushebelt (hidden
   macht den Container zum Scrollport). Fallback visible fuer alte
   Browser: dann fehlt nur die Szenen-Kanten-Klippung, Sticky laeuft. */
.cluster-scene.deck-active {
  --deck-card-w: min(34rem, 76vw);
  --deck-gap: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 220vh;
  height: 220vh;
  padding-block: 0;
  overflow: visible;
  overflow: clip;
}
.deck-active .deck-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
}
.deck-active .deck-track {
  flex-direction: row;
  align-items: stretch;
  gap: var(--deck-gap);
  width: max-content;
  max-width: none;
  margin-inline: 0;
  /* zentriert Karte 01 bei x=0 und Karte 04 am Track-Ende im Panel */
  padding-inline: calc((100vw - var(--deck-card-w)) / 2);
  will-change: transform;
}
.deck-active .cluster-card {
  flex: 0 0 var(--deck-card-w);
  width: var(--deck-card-w);
}

/* --------------------------------------------------------------------------
   Section 4 . DSGVO-ANKER (midnight)
   -------------------------------------------------------------------------- */
.dsgvo__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 980px) {
  .dsgvo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

.dsgvo__copy .section-head { margin-bottom: 2.25rem; }

.dsgvo__points {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-bottom: 2.25rem;
}
.dsgvo__point { display: flex; gap: 1.25rem; }
.dsgvo__num {
  color: var(--accent-caribbean);
  font-size: 0.8125rem;
  padding-top: 0.35rem;
}
.dsgvo__point h3 { font-size: 1.125rem; margin-bottom: 0.375rem; }
.dsgvo__point p { font-size: 0.9375rem; }

.dsgvo__scene { max-width: 640px; justify-self: center; width: 100%; }
.dsgvo__scene svg { width: 100%; height: auto; }

/* Datenpunkte: Ring pulst (transform/opacity), Punkt bleibt ruhig */
.dsgvo-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: dsgvo-ping 3.2s ease-out infinite;
}
.dsgvo-dot--2 { animation-delay: 1.05s; }
.dsgvo-dot--3 { animation-delay: 2.1s; }

@keyframes dsgvo-ping {
  0%   { transform: scale(0.45); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Section 5 . BEWEISSTUECK (midnight -> twilight) . Bullauge-Video
   -------------------------------------------------------------------------- */
.proof__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 960px) {
  .proof__grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
}

.proof__line {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 1rem;
  max-width: 22em;
}
.proof__cta { margin-top: 2.25rem; }

.proof__media { margin: 0; }

.porthole {
  position: relative;
  height: min(70vh, 620px);
  aspect-ratio: 1 / 1;
  max-width: 86vw;
  margin-inline: auto;
  border-radius: clamp(20px, 3vw, 30px);
  padding: 10px;
  background: linear-gradient(160deg, var(--bg-elevated-2), var(--bg-elevated));
  border: 1px solid rgba(160, 239, 255, 0.18);
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    0 0 70px -24px rgba(160, 239, 255, 0.16),
    inset 0 0 24px rgba(6, 8, 15, 0.7);
}
.porthole video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(13px, 2.2vw, 22px);
}
/* Glas-Schimmer oben im Rahmen */
.porthole::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: clamp(13px, 2.2vw, 22px);
  background: linear-gradient(165deg, rgba(245, 247, 250, 0.07), transparent 30%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section 6 . KUNDEN-STROEMUNG (twilight) . stream-band statt Logo-Wand
   -------------------------------------------------------------------------- */
.stream { overflow: hidden; }
.stream .section-head { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.stream__cta { margin-top: clamp(1.75rem, 4vh, 2.5rem); }

/* --------------------------------------------------------------------------
   Section 7 . LAB-TEASER (twilight) . Werkstatt-Karte am Fisch-Waypoint
   fish.js dimmt den Inhalt (Klasse) und leuchtet ihn mit dem Spot frei.
   -------------------------------------------------------------------------- */
.lab { overflow: hidden; }

.lab__card {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
}
.lab__card h2 { margin-top: 0.875rem; }
.lab__card .lead { margin-top: 1.25rem; max-width: 36rem; }
.lab__cta { margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Section 8 . INSIGHTS-TEASER (twilight -> surface)
   -------------------------------------------------------------------------- */
.insights__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.insights__head .section-head { margin-bottom: 0; }

.insight-card { display: flex; flex-direction: column; color: var(--text-primary); }
.insight-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.insight-card__meta time { font-size: 0.75rem; color: var(--text-muted); }
.insight-card h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 0.75rem; }
.insight-card p { font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Section 9 . FINAL CTA + BREACH (surface -> breach, 0 m)
   Heller Himmel, dunkler Text (Kontrast-Flip via --text-on-light).
   Ohne JS: statische helle Szene, Text + Button voll sichtbar.
   home.js pinnt die Szene und choreografiert Sprung, Splash, Loop.
   -------------------------------------------------------------------------- */
/* v6-Fix 3: Surface-Strecke straffen (Juergen: "2-3 leere Scroll-Laengen").
   Breach-Szenen-Hoehe auf 85vh reduziert (war 100vh), damit weniger leerer
   Himmels-Raum ueber dem Content steht. Das Pin-Ende (+170%) bleibt. */
.breach {
  position: relative;
  min-height: 85vh;
  min-height: 85svh;
  padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 6vh, 5rem);
  overflow: hidden;
  text-align: center;
  color: var(--text-on-light);
}

.breach__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* v3 (WP-V3): Abend-Daemmerung (Purple-Turtle-Verlauf statt neutral-
   hell). Kontrast-Flip mit dunklem Text bleibt WCAG-AA-fest: der Text
   sitzt im mittleren Bereich (> 40% Hoehe), dort ist die Luminanz hoch
   genug. #0A0E1A auf #C8A8E0 = Kontrast ~8.3:1 (AA Minimum 4.5:1).
   KEIN Orange im Himmel (Orange exklusiv Laterne). */
.breach__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #3D1E6C 0%,
    #5E3A92 16%,
    #8B62B8 32%,
    #C8A8E0 48%,
    #E2D2F0 62%,
    #EBE0F5 76%,
    #E8F7FD 100%);
}

/* Kaustik v4 Polier-Welle: die Breach-Zone hat hellen Hintergrund,
   daher mix-blend-mode overlay statt screen (sonst unsichtbar).
   Leicht hellere Flecken, schnellere Drift fuer Wasseroberflaechengefuehl. */
.caustics--breach {
  mix-blend-mode: overlay;
  inset: 0;
}
.caustics--breach::before,
.caustics--breach::after {
  opacity: 0.3;
  background-image:
    radial-gradient(ellipse 22% 12% at 18% 62%, rgba(160, 239, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 28% 14% at 56% 72%, rgba(160, 239, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 24% 10% at 82% 58%, rgba(160, 239, 255, 0.2), transparent 70%),
    radial-gradient(ellipse 20% 12% at 40% 80%, rgba(160, 239, 255, 0.16), transparent 70%);
  animation-duration: 11s;
}
.caustics--breach::after {
  background-image:
    radial-gradient(ellipse 26% 14% at 72% 66%, rgba(160, 239, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 22% 12% at 28% 76%, rgba(160, 239, 255, 0.2), transparent 70%),
    radial-gradient(ellipse 30% 14% at 50% 56%, rgba(160, 239, 255, 0.15), transparent 70%);
  animation-duration: 15s;
}

/* Insel-Silhouette (v6: kompakt, NUR rechts aussen am Horizont,
   nie hinter Text. Ersetzt das vollbreite Band aus V3.) */
.breach__island {
  position: absolute;
  right: 2vw;
  /* v7-Tuning (Ada, Review #3 "klebt in der Luft"): 46% war die Box-
     Oberkante der See, die SICHTBARE Wasserlinie liegt tiefer (gestrecktes
     SVG). 28% setzt die Insel auf die Linie, Basis leicht eingetaucht. */
  bottom: 28%;
  width: clamp(100px, 14vw, 180px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.seekarten-label--coast {
  position: absolute;
  bottom: 50%;
  right: 2vw;
  color: var(--accent-caribbean);
  opacity: 0.3;
  font-size: 0.625rem;
  z-index: 0;
}

/* Breach-Sonne: Jellofish ist Licht (CI v3) */
.breach__sun {
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(560px, 70vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 157, 0.8), rgba(255, 255, 157, 0) 62%);
}

/* Wasserflaeche mit 2vw Ueberstand je Seite (Bugfix c + Handover Bug 2):
   die wobbelnden Morph-Raender liegen AUSSERHALB des Viewports, keine
   schraegen Schnitte an den Kanten. viewBox -30..1470 deckt den
   Ueberstand, preserveAspectRatio="none" streckt den Pfad voll.
   WICHTIG (Wurzel von Bug 2, headless verifiziert): width MUSS explizit
   104vw sein (replaced Elements ignorieren left+right bei width:auto)
   UND max-width:none gesetzt werden, denn design-system.css:140 kappt
   ALLE svg auf max-width:100% (= 1440 statt 1497px bei 1440er-Viewport,
   rechts fehlten exakt die ~58px weisser Streifen).
   vw-Einheiten vermessen sich bei Resize selbst neu. */
.breach__sea {
  position: absolute;
  left: -2vw;
  bottom: 0;
  width: 104vw;
  max-width: none;
  height: 46%;
}

/* Tiefen-Overlay: "von unten auftauchen". Startet per CSS unsichtbar
   (Deko); home.js setzt es im Scrub auf 1 und blendet es beim Aufstieg aus. */
.breach__depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 15, 0.94) 0%, rgba(10, 18, 38, 0.9) 55%, rgba(16, 48, 83, 0.85) 100%);
  opacity: 0;
}

/* Szenen-Fisch: das echte Logo (fish.js-Markup). Unter Wasser hell,
   ueber der Oberflaeche faerbt home.js den Fill auf Purple Turtle
   (Kontrast-Flip der hellen Zone). Nur EIN Fisch zur Zeit: der globale
   Layer ist hier laengst weich ausgeblendet (Scrub-Uebergabe). */
.breach__fishwrap {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(96px, 11vw, 150px);
  will-change: transform;
}
.breach__fishwrap svg { overflow: visible; width: 100%; height: auto; }

/* Splash-Partikel (home.js erzeugt die <i>) */
.breach__splash {
  position: absolute;
  left: 62%;
  top: 56%;
}
.breach__splash i {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #F6FCFF;
  box-shadow: 0 0 10px rgba(160, 239, 255, 0.8);
  opacity: 0;
}
.breach__splash i:nth-child(odd) { width: 4px; height: 4px; }

.breach__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.breach__inner h2 { text-wrap: balance; }
.breach .lead {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: rgba(10, 14, 26, 0.72);
}
.breach__actions {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.breach__alt { font-size: 0.9375rem; color: rgba(10, 14, 26, 0.66); }
/* Links in der hellen Zone: Purple Turtle (CI v3) */
.breach .link { color: var(--accent-purple); }
.breach .link:hover { border-color: var(--accent-purple); }

/* Auf dem hellen Himmel traegt der Beacon-Glow staerker: leicht dimmen */
.breach .btn-beacon::after { opacity: 0.35; }

/* --------------------------------------------------------------------------
   HAFENLICHTER (WP-V3): Caribbean-Lichtpunkte vor dem Footer, erzaehlen
   die Abend-Hafen-Story. Das Footer-Partial bleibt byte-identisch.
   -------------------------------------------------------------------------- */
.harbor-lights {
  position: relative;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.harbor-lights i {
  position: absolute;
  bottom: 1.5rem;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-caribbean);
  box-shadow: 0 0 8px rgba(160, 239, 255, 0.6);
  opacity: 0;
  animation: harbor-blink 5s ease-in-out infinite;
}
@keyframes harbor-blink {
  0%, 40%, 100% { opacity: 0; }
  20% { opacity: 0.7; }
}

/* Fischschwarm Surface (WP-V3): zieht quer, etwas groesser als andere Schwaerme */
.fish-school--surface {
  left: 12vw;
  top: 18vh;
  width: clamp(160px, 22vw, 320px);
  animation-duration: 14s;
}

/* --------------------------------------------------------------------------
   FOOTER-KOMPAKTIERUNG (WP-V3, site-weit erlaubt per Juergen-GO):
   Vertikale Abstaende straffen. Markup in _partials-src/footer.html
   bleibt byte-identisch (Pflicht-Check!). NUR Spacing-Aenderungen.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ADA LIVE-TUNING 12.06.2026 (Browser-validiert, Jürgen-Session):
   1. Cluster-Maßstab viewport-relativ (vorher zu klein auf breiten Screens)
   2. Blur reduziert (Unschärfe-Befund), deco-bg ohne Blur
   3. Schwarm-Positionen fix in Leerzonen (nie über Text/Kicker)
   4. Fisch-Dunkel-Halo: löst Weiß-auf-Weiß über Text, mehr Plastizität
   5. Insel-Breite
   Werte live im Browser verprobt, NICHT ohne Sichttest ändern.
   WICHTIG (13.06.): nur Desktop ≥900px. Mobil greifen die ≤899px-Regeln
   weiter oben (kleine/ausgeblendete Deko), sonst liegen 300px-Korallen
   über dem Text (Jürgen-Befund Mobile).
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
.occluder--deck-left { width: clamp(300px, 21vw, 440px) !important; aspect-ratio: 240/420; height: auto !important; }
.occluder--deck-right { width: clamp(250px, 17vw, 380px) !important; aspect-ratio: 240/420; height: auto !important; }
.occluder--kelp { width: clamp(270px, 18vw, 420px) !important; aspect-ratio: 240/420; height: auto !important; }
.occluder--proof-rock { width: clamp(230px, 15vw, 350px) !important; aspect-ratio: 240/420; height: auto !important; }
.deco-bg--lab-reef,
.deco-bg--dsgvo-far { width: clamp(230px, 15vw, 360px) !important; aspect-ratio: 240/420; height: auto !important; }
.deco-bg--stream-grass { width: clamp(240px, 16vw, 370px) !important; aspect-ratio: 240/420; height: auto !important; }
.occluder { filter: blur(0.5px) !important; }
[class*="deco-bg"] { filter: none !important; }
.fish-school--dsgvo { left: auto !important; right: 7vw !important; top: 16vh !important; bottom: auto !important; }
.fish-school--stream { left: auto !important; right: 9vw !important; top: 18vh !important; bottom: auto !important; }
.fish-school--lab { left: 6vw !important; top: 10vh !important; bottom: auto !important; }
.fish-school--surface { right: 14vw !important; left: auto !important; top: 26vh !important; bottom: auto !important; }
.bmd-fish-layer svg { filter: drop-shadow(0 0 16px rgba(6, 8, 15, 0.9)) drop-shadow(0 0 4px rgba(6, 8, 15, 0.7)); }
.breach__island { width: clamp(180px, 16vw, 300px); opacity: 1; }

/* Ada-Tuning Review #3: Hero-Cluster war nicht skaliert + Oktopus neu in
   der Stats-Leere positioniert (links-mittig, hinter dem Fisch). */
.occluder--hero-rock { width: clamp(280px, 19vw, 430px) !important; aspect-ratio: 240/420; height: auto !important; }
.scene.stats .octopus-shadow { right: auto; left: 14vw; top: 16vh; width: clamp(260px, 30vw, 440px); }
} /* /@media min-width:900 : Desktop-Live-Tuning, Mobile-Deko via ≤899px-Regeln */

/* --------------------------------------------------------------------------
   HERO-SCHNELL-EINSTIEG (Personas 13.06.: gerader Pfad fuer Zeitarme,
   direkt im Hero, der im invertierten Flow zuerst geladen wird).
   -------------------------------------------------------------------------- */
.hero__express {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.9;
}
.hero__express a {
  color: var(--accent-caribbean);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.hero__express a:hover,
.hero__express a:focus-visible { border-bottom-color: var(--accent-caribbean); }
.hero__express span { opacity: 0.35; margin: 0 0.4rem; }