/* ==========================================================================
   TOBEY NIZE — FINAL (Ausbau des freigegebenen Entwurfs C)
   Eine gebaute Szene aus echten Ebenen. Kein Kasten, kein Rahmen, kein Raster.
   Oben Weltraum (Dachmarke ACTIVATED = Outer Space), unten Meerwasser
   (Nordsee/Ostsee). Der Artist steht IM Wasser.

   Farbwelt: dunkle Tiefe + Meerwasser-Hellblau.
   ACTIVATED-Neongruen #12ff00 kommt hier NICHT vor — das gehoert der Dachmarke.

   ⚠ BAUREGEL 1: drop-shadow/filter(blur) und mask-image NIE auf demselben
   Element. mask-clip ist voreingestellt border-box und kappt den Schatten an
   der Box-Kante — als sichtbares Rechteck. Genau das erzeugt "billige Kaesten".
   ⚠ BAUREGEL 2: Maske und CSS-Animation nie auf demselben Element.
   ⚠ BAUREGEL 3: Verlaufsmasken exakt 90deg / 180deg (to right / to bottom).
   ========================================================================== */

:root {
  /* Tiefe */
  --void:      #01050c;
  --abyss:     #020a15;
  --night:     #06172b;
  --deep:      #04101f;
  --edge:      #01070e;      /* Kantenfarbe der Video-Abschnitte */

  /* Meerwasser — kuehl, gebrochenes Licht */
  --aqua:      #7fe6f0;
  --aqua-hot:  #cdf8ff;
  --aqua-mid:  #3fa9bd;
  --aqua-deep: #1a6379;

  /* Schrift */
  --foam:      #e6f6f9;
  --haze:      #8ea9b6;
  --dim:       #4a6674;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --mass: "Archivo Black", "Arial Black", sans-serif;

  /* ---- Die zwei Zahlen, von denen die ganze Szene abhaengt ----------------
     --horizon = der FERNE Horizont (Kilometer weg).
     --wline   = seine EIGENE Wasserlinie, dort wo sein Koerper das Wasser
                 trifft. Sie liegt TIEFER als der Horizont, weil er im
                 Vordergrund steht — die Wasserflaeche laeuft vom Betrachter
                 zum Horizont zurueck. In Entwurf C war beides dieselbe Linie;
                 dadurch schnitt der Horizont mitten durch seine Unterarme.
     Zwangsbedingung: --wline = figure.top + figure.height × --wl
                      80,4 % = 6 % + 80 % × 0,93                             */
  --horizon: 64%;
  --wline:   80.4%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--foam);
  font-family: var(--mono);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
video { display: block; }

::selection { background: var(--aqua-deep); color: var(--aqua-hot); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 4px;
}


/* ==========================================================================
   NAVIGATION — keine Leiste, kein Kasten. Zwei Marken im Raum.
   ========================================================================== */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2.6vw, 34px) clamp(20px, 4vw, 60px);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* Lichtschleier hinter der Navigation, damit die Schrift auch ueber dem
   Bewegtbild lesbar bleibt. Kein Balken — ein Verlauf ins Nichts. */
.nav__scrim {
  position: fixed; inset: 0 0 auto 0; z-index: 55;
  height: clamp(90px, 13vh, 150px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 5, 12, .78) 0%, rgba(1, 5, 12, .34) 46%, transparent 100%);
}

.nav__brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--foam);
}
.nav__brand img {
  width: 28px; height: 28px;
  opacity: .8;
  filter: drop-shadow(0 0 12px rgba(127, 230, 240, .55));
}
.nav__brand span {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .30em; text-transform: uppercase;
  opacity: .74;
}

.nav__right { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.nav__right a {
  font-size: 10px; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--haze); text-decoration: none;
  position: relative; padding-bottom: 5px;
  transition: color .35s ease;
}
/* eine Lichtlinie, die aus dem Nichts waechst — kein Rahmen */
.nav__right a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--aqua), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.nav__right a:hover { color: var(--aqua-hot); }
.nav__right a:hover::after { transform: scaleX(1); }


/* ==========================================================================
   1 · HERO — die Szene
   Stapelreihenfolge (z), von hinten nach vorn:
    1 void · 2 stars · 3 orb/aurora · 4 mark · 5 mark-reflect · 6 backlight
    7 horizon · 8 water (FERNE Flaeche) · 9 ground · 10 figure · 11 contact+haze
    12 surf (NAHE Flaeche) · 20 Schrift · 40 grain · 41 vignette

   Der Wechsel gegen Entwurf C: die Wasserflaeche liegt jetzt HINTER der Figur
   (8 statt 10), nur die nahe Gischt liegt davor (12). Vorher wusch der dunkle
   Wasserdunst ueber seine Unterarme — das war der Hauptgrund, warum das
   Tattoo verschwand.
   ========================================================================== */

.hero {
  --p: 0;                                  /* Scrollfortschritt 0…1 */
  position: relative;
  min-height: max(100svh, 680px);
  overflow: hidden;
  isolation: isolate;
}


/* --- 1 · der Raum ------------------------------------------------------- */

.void {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(62% 46% at 10% 2%,  rgba(26, 99, 121, .40), transparent 66%),
    radial-gradient(40% 30% at 0%  22%, rgba(63, 169, 189, .13), transparent 72%),
    radial-gradient(120% 82% at 84% 88%, rgba(2, 8, 16, .92), transparent 66%),
    linear-gradient(178deg, #061527 0%, #030d1a 30%, var(--abyss) 56%, #01060c 78%, #000306 100%);
  transform: translate3d(0, calc(var(--p) * 3%), 0);
}


/* --- 2 · Sterne — die Maske laesst sie im Horizontdunst verloeschen ----- */

.stars {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 2;
  height: var(--horizon);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.32) 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.32) 80%, transparent 100%);
  transform: translate3d(0, calc(var(--p) * -2%), 0);
}


/* --- 3 · der Himmelskoerper: die Ursache des Lichts --------------------- */

.orb {
  position: absolute; z-index: 3;
  left: -24%; top: -22%;
  width: 50%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 60% 62%, transparent 70%, rgba(90, 186, 205, .10) 90%, rgba(150, 226, 240, .17) 100%),
    radial-gradient(closest-side at 36% 30%, rgba(14, 42, 60, .34), rgba(2, 10, 20, .55) 80%);
  transform: translate3d(0, calc(var(--p) * 2%), 0);
}


/* --- 4 · Licht in der Tiefe --------------------------------------------- */

.aurora { position: absolute; inset: 0 0 36% 0; z-index: 3; overflow: hidden; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora__a {
  left: -18%; top: -26%; width: 54%; height: 76%;
  background: radial-gradient(closest-side, rgba(63, 169, 189, .22), transparent 74%);
  filter: blur(62px);
  animation: driftA 82s ease-in-out infinite alternate;
}
.aurora__b {
  left: 24%; top: -4%; width: 46%; height: 56%;
  background: radial-gradient(closest-side, rgba(127, 230, 240, .09), transparent 74%);
  filter: blur(78px);
  animation: driftB 104s ease-in-out infinite alternate;
}
.aurora__c {
  right: -14%; top: 20%; width: 44%; height: 48%;
  background: radial-gradient(closest-side, rgba(26, 99, 121, .24), transparent 78%);
  filter: blur(70px);
  animation: driftA 128s ease-in-out infinite alternate-reverse;
}
@keyframes driftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, -2.2vh, 0) scale(1.16); }
}
@keyframes driftB {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-3.4vw, 2.6vh, 0) scale(1); }
}


/* --- 5 · der Name — Lichtform im Dunst ---------------------------------
   Zwei Teile: ein unscharfer Schein (unmaskiertes Bild → echter AUSSEN-Schein)
   und die Form selbst als Flaeche mit Lichtverlauf, vom Schriftzug maskiert.
   Kein mask-image auf dem Schein: eine Maske wuerde ihn wieder scharf
   beschneiden.                                                              */

.mark {
  position: absolute; z-index: 4;
  left: clamp(20px, 4vw, 60px);
  bottom: calc(100% - var(--horizon) + 1%);
  width: min(44vw, 600px);
  aspect-ratio: 1800 / 779;
  transform: translate3d(0, calc(var(--p) * -6%), 0);
}
.mark__glow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: blur(30px) saturate(.5) brightness(.8);
  opacity: .42;
}
.mark__form {
  position: absolute; inset: 0;
  background: linear-gradient(148deg,
    #f2feff 0%, #c6f1f9 20%, #8ce9f2 42%, #3f93a9 72%, #1a4c5f 100%);
  -webkit-mask-image: url("../img/tobeynize-wordmark.png");
          mask-image: url("../img/tobeynize-wordmark.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .92;
}


/* --- 6 · Spiegelung des Namens ----------------------------------------- */

.mark-reflect {
  position: absolute; z-index: 5;
  left: clamp(20px, 4vw, 60px);
  top: calc(var(--horizon) + 0.6%);
  width: min(44vw, 600px);
  height: 22%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 44%, transparent 78%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 44%, transparent 78%);
  transform: translate3d(0, calc(var(--p) * -6%), 0);
}
.mark-reflect__in {
  position: absolute; left: 0; top: 0;
  width: 100%; aspect-ratio: 1800 / 779;
  background: linear-gradient(148deg, #cdf8ff 0%, #7fe6f0 40%, #1a6379 100%);
  -webkit-mask-image: url("../img/tobeynize-wordmark.png");
          mask-image: url("../img/tobeynize-wordmark.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  /* In der eigenen Box kippen (Standard-Ursprung Mitte). Mit
     transform-origin:top kippt sie aus dem Bild heraus. */
  transform: scaleY(-1);
  filter: blur(6px);
  animation: schwappen 13s ease-in-out infinite alternate;
}


/* --- 7 · Gegenlicht hinter ihm ----------------------------------------
   Eine Ellipse aus Licht, KEINE maskierte Silhouette: eine Silhouette hinter
   einem deckenden Koerper ist unsichtbar. Gegenlicht im Dunst leuchtet um ihn
   herum, nicht in seiner Form.                                              */

.backlight {
  position: absolute; z-index: 6;
  left: 48%; top: 8%;
  width: 34%; height: 62%;
  background:
    radial-gradient(closest-side, rgba(205, 248, 255, .22) 0%, rgba(127, 230, 240, .12) 42%, transparent 74%);
  filter: blur(34px);
  mix-blend-mode: screen;
  transform: translate3d(0, calc(var(--p) * -7%), 0);
}


/* --- 8 · DER FERNE HORIZONT --------------------------------------------
   Harte Kernlinie, Bloom nach beiden Seiten, links heller — dort steht die
   Lichtquelle (das Rim-Light im Foto ist ein Teal von links, gemessen
   RGB 64,143,149).                                                          */

.horizon {
  position: absolute; left: 0; right: 0; z-index: 7;
  top: var(--horizon); height: 0;
  transform: translate3d(0, calc(var(--p) * -4%), 0);
}
.horizon::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(205, 248, 255, .36) 4%, rgba(242, 254, 255, 1) 22%,
    rgba(205, 248, 255, .74) 48%, rgba(170, 240, 248, .58) 72%,
    rgba(127, 230, 240, .40) 92%, transparent 100%);
}
.horizon::after {
  content: ''; position: absolute; left: 0; right: 0; top: -14vh; height: 28vh;
  background:
    radial-gradient(54% 52% at 22% 50%, rgba(127, 230, 240, .42), transparent 72%),
    radial-gradient(72% 42% at 62% 50%, rgba(63, 169, 189, .26), transparent 76%);
  filter: blur(24px);
  pointer-events: none;
}


/* --- 9 · die FERNE Wasserflaeche (hinter ihm) --------------------------- */

.water {
  position: absolute; left: 0; right: 0; z-index: 8;
  top: var(--horizon); bottom: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--p) * -4%), 0);
}

/* Lichtbahn — der Weg des Lichts ueber das Wasser zum Betrachter, wie eine
   Mondbahn. Trapez, nach vorn breiter, unter der hellsten Stelle des
   Horizonts, also links.                                                    */
.water__path {
  position: absolute; left: 2%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(to bottom,
    rgba(235, 253, 255, .46) 0%, rgba(127, 230, 240, .20) 20%,
    rgba(127, 230, 240, .08) 48%, transparent 86%);
  clip-path: polygon(40% 0%, 58% 0%, 100% 100%, 0% 100%);
  filter: blur(13px);
  mix-blend-mode: screen;
}

/* Kaustik — Licht, das auf der Oberflaeche tanzt, ueber dunklem Grund.
   Wasser ist DUNKLER als der Himmel: man sieht in die Tiefe hinein.

   ⚠ Gemessen und nachgeschaerft: die Flaeche war zu dunkel (freies Wasser
   rechts nur 4–28 von 255). Ein dunkler Koerper vor einer dunklen Flaeche
   trennt sich nicht — er sah aus, als stehe er DAVOR statt DARIN. Deshalb
   liegt hier jetzt ein breiter Schimmer, und die Abdunklung nach unten
   uebernimmt erst .surf (davor liegend).                                    */
.water__caustics {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 15% at 14% 2%,  rgba(127, 230, 240, .30), transparent 70%),
    radial-gradient(70%  11% at 46% 7%,  rgba(205, 248, 255, .16), transparent 72%),
    radial-gradient(88%  13% at 74% 5%,  rgba(127, 230, 240, .22), transparent 72%),
    radial-gradient(96%  17% at 92% 13%, rgba(63, 169, 189, .30), transparent 74%),
    /* der breite Schimmer: eine flache Ellipse ueber der halben Flaeche */
    radial-gradient(150% 62% at 44% 6%,  rgba(63, 169, 189, .26), transparent 78%),
    radial-gradient(110% 40% at 86% 30%, rgba(63, 169, 189, .22), transparent 76%),
    radial-gradient(120% 34% at 96% 52%, rgba(26, 99, 121, .24), transparent 78%),
    linear-gradient(to bottom, rgba(0, 4, 10, .06) 0%, rgba(0, 3, 8, .28) 62%, rgba(0, 2, 5, .54) 100%);
  filter: blur(10px);
}

/* Fernlinien knapp unter dem Horizont: NUR waagerecht, wachsender Abstand,
   fallende Deckkraft. Sie duerfen jetzt weit nach rechts laufen, weil sie
   HINTER ihm liegen und von seinem Koerper verdeckt werden — das gibt der
   rechten Wasserhaelfte Struktur, statt sie schwarz zu lassen.              */
.water span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 244, 250, .82) 24%, rgba(127, 230, 240, .46) 60%, rgba(127, 230, 240, .22) 84%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 78%, transparent 98%);
          mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 78%, transparent 98%);
}
.water span:nth-child(3) { top: 1.5%;  opacity: .62; }
.water span:nth-child(4) { top: 4.0%;  opacity: .46; }
.water span:nth-child(5) { top: 8.2%;  opacity: .34; }
.water span:nth-child(6) { top: 14.6%; opacity: .24; height: 2px; }
.water span:nth-child(7) { top: 24.5%; opacity: .16; height: 2px; }
.water span:nth-child(8) { top: 37.0%; opacity: .11; height: 2px; }


/* --- 10 · dunkler Grund, der ihn im Wasser verankert -------------------
   Als Ellipse ohne Maske — ein drop-shadow am Freisteller wuerde an der
   Box-Kante zum Rechteck werden. Sitzt an SEINER Wasserlinie.               */

.ground {
  position: absolute; z-index: 9;
  left: 44%; top: calc(var(--wline) - 17%);
  width: 42%; height: 30%;
  background: radial-gradient(closest-side, rgba(1, 5, 12, .80) 0%, rgba(1, 5, 12, .40) 46%, transparent 74%);
  filter: blur(26px);
  transform: translate3d(0, calc(var(--p) * -8%), 0);
}


/* --- 11 · der Artist ---------------------------------------------------
   --wl = seine Wasserlinie IM Massstab der Figur.
   Sie liegt bei 93 % und damit UNTER dem Tattoo (gemessen: Unterarme
   72,3–91,6 % der Bildhoehe, Tattoo-Mitte 81,3 %). In Entwurf C stand
   --wl auf 72 % mit 20 % Uebergang — genau darin loesten sich Unterarme
   und Tattoo auf. Jetzt bleibt oberhalb der Linie alles voll gezeichnet,
   der Uebergang ist kurz, und was unter Wasser liegt, uebernimmt eine
   eigene Ebene (.figure__under).                                            */

.figure {
  --wl: 93%;
  --fade: 1.8%;                 /* kurze, harte Oberflaechenkante */
  position: absolute; z-index: 10;
  left: 47%; top: 6%;
  height: 80%;
  aspect-ratio: 1400 / 2100;
  transform: translate3d(0, calc(var(--p) * -8%), 0);
}
.figure__img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  /* Rim-Light ist schon im Foto (Teal von links). Hier nur verstaerkt. */
  filter: contrast(1.10) saturate(1.22) brightness(1.04);
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 var(--wl), transparent calc(var(--wl) + var(--fade)));
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 var(--wl), transparent calc(var(--wl) + var(--fade)));
}

/* der Teil UNTER Wasser: dasselbe Bild, nur der Streifen unterhalb der
   Wasserlinie — unscharf, dunkler, leicht versetzt (Lichtbrechung). Ohne
   diese Ebene endet er an der Oberflaeche und wirkt ausgeschnitten.
   Die Maske laeuft bis 100 % auf transparent: so verschwindet auch die harte
   Unterkante des Freistellers (das Foto ist dort abgeschnitten).            */
.figure__under {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  filter: blur(4px) brightness(.78) saturate(1.6) contrast(.94);
  opacity: .78;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, transparent var(--wl),
    #000 calc(var(--wl) + 2%), #000 97%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, transparent var(--wl),
    #000 calc(var(--wl) + 2%), #000 97%, transparent 100%);
  transform: translateX(-.5%);
}

/* seine Spiegelung: Fenster ab der Wasserlinie, genau eine Figurenhoehe hoch.
   Darin dasselbe Bild gekippt und um (--wl − 100 %) nach oben versetzt — die
   exakte Spiegelung an der Wasserlinie, hergeleitet: Zeile f landet bei
   2·wl − f. Zwei Masken verschnitten, sonst zeigt die Wasserstoerung ihre
   eigene Rechteckkante.                                                     */
.figure__reflect {
  position: absolute; left: 0; width: 100%;
  top: var(--wl);
  height: 100%;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.40) 26%, rgba(0,0,0,.14) 54%, transparent 80%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.40) 26%, rgba(0,0,0,.14) 54%, transparent 80%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.figure__reflect > img {
  position: absolute; left: 0; width: 100%;
  top: calc(var(--wl) - 100%);
  transform: scaleY(-1);
  filter: blur(6px) saturate(1.35) brightness(1.16);
  animation: schwappen 11s ease-in-out infinite alternate;
}
/* Wasserstoerung: drei Baenderungen mit ungleicher Periode, damit es nicht
   mechanisch wird. Bewusst schwach — stark wirkte wie ein Scan-Fehler.      */
.figure__streaks {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(2, 10, 20, .30) 3px 5px),
    repeating-linear-gradient(to bottom, transparent 0 11px, rgba(2, 10, 20, .16) 11px 14px),
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(2, 10, 20, .12) 29px 37px);
}
/* Farbebene ueber der Spiegelung: Wasser kuehlt. Ohne sie war die Spiegelung
   hautfarben und las sich als beiger Schmierfleck statt als Wasserbild.     */
.figure__reflect .figure__cool {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2c7f95 0%, #17566b 100%);
  mix-blend-mode: color;
  opacity: .72;
}

@keyframes schwappen {
  from { transform: scaleY(-1) skewX(0deg)    translateX(0); }
  to   { transform: scaleY(-1) skewX(-1.1deg) translateX(-.6%); }
}


/* --- 12 · die Beruehrung: dort trifft sein Koerper das Wasser -----------
   Ohne diesen Moment schwebt er, statt zu stehen. Liegt VOR ihm, weil
   Gischt vor dem Koerper ist. Sparsam dosiert — zu viel frisst die
   Unterarme, und dort sitzt sein Detail.                                    */

.contact {
  position: absolute; z-index: 11;
  left: 41%; top: calc(var(--wline) - 3.4%);
  width: 45%; height: 7%;
  background: radial-gradient(closest-side,
    rgba(226, 251, 255, .60) 0%, rgba(150, 234, 244, .28) 32%, rgba(127, 230, 240, .10) 60%, transparent 80%);
  filter: blur(9px);
  mix-blend-mode: screen;
  transform: translate3d(0, calc(var(--p) * -8%), 0);
}
/* schmaler heller Kern direkt an der Wasserlinie — hier bricht das Wasser */
.contact::after {
  content: ''; position: absolute;
  left: 8%; right: 10%; top: 44%; height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(250, 255, 255, .96) 22%, rgba(214, 248, 255, .70) 56%, rgba(160, 238, 246, .34) 84%, transparent);
  filter: blur(1.4px);
}
/* Schaum: kurze, ungleich lange Striche auf der Bruchlinie. Sie machen aus
   einer Lichtkante ein Wasserereignis — ohne sie wirkt die Linie gezeichnet. */
.contact::before {
  content: ''; position: absolute;
  left: 6%; right: 8%; top: 40%; height: 9px;
  background:
    repeating-linear-gradient(90deg,
      rgba(236, 253, 255, .70) 0 9px, transparent 9px 17px,
      rgba(236, 253, 255, .44) 17px 24px, transparent 24px 41px,
      rgba(236, 253, 255, .58) 41px 52px, transparent 52px 63px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 74%, transparent 100%);
  opacity: .7;
}

/* Kielwasser vor ihm: ein flaches helles Feld auf der nahen Oberflaeche,
   das von seiner Bruchlinie zum Betrachter laeuft. Bindet ihn an die
   Flaeche — ohne das schwebt die Bruchlinie fuer sich allein.               */
.wake {
  position: absolute; z-index: 11;
  left: 40%; top: var(--wline);
  width: 48%; height: 15%;
  background: linear-gradient(to bottom,
    rgba(178, 240, 250, .26) 0%, rgba(127, 230, 240, .11) 26%, rgba(63, 169, 189, .05) 58%, transparent 88%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  mix-blend-mode: screen;
  transform: translate3d(0, calc(var(--p) * -8%), 0);
}

/* Dunstbank rechts, sehr schwach dosiert. Die harte Schnittkante seines
   rechten Ellbogens ist inzwischen IM BILD geloest (weicher Alpha-Auslauf
   ueber 34 px, gemessen: max. Alpha der rechten zwei Spalten 7 statt 255).
   Der Dunst gibt der rechten Bildhaelfte nur noch Tiefe.                    */
.haze {
  position: absolute; z-index: 11; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 22% at 86% 66%, rgba(7, 28, 44, .30), transparent 74%);
  filter: blur(18px);
  transform: translate3d(0, calc(var(--p) * -6%), 0);
}


/* --- 13 · die NAHE Wasserflaeche (vor ihm) -----------------------------
   Alles, was naeher am Betrachter ist als er: Gischt, Dunst, unscharfe
   Lichtpunkte auf der Oberflaeche. Diese Ebene fuellt die untere rechte
   Bildhaelfte — vorher war das eine leere schwarze Flaeche.                 */

.surf {
  position: absolute; left: 0; right: 0; z-index: 12;
  top: calc(var(--wline) - 6%); bottom: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--p) * -4%), 0);
}
.surf__foam {
  position: absolute; left: -5%; right: -5%; bottom: -6%; height: 78%;
  background:
    radial-gradient(110% 90% at 22% 100%, rgba(127, 230, 240, .16), transparent 66%),
    radial-gradient(80% 70% at 72% 100%, rgba(205, 248, 255, .09), transparent 70%),
    /* die letzten Prozent muessen auf #000205 laufen: genau diese Farbe
       beginnt die naechste Sektion. Sonst sieht man die Naht als Tonstufe. */
    linear-gradient(to top, #000205 0%, rgba(0, 4, 10, .88) 13%, rgba(0, 4, 10, .40) 48%, transparent 100%);
  filter: blur(16px);
}
/* Unscharfe Lichtpunkte: gebrochenes Licht auf der nahen Oberflaeche.
   Nah = unscharf, deshalb blur. Sie liegen rechts und unten, dort wo sonst
   nichts passiert.                                                          */
.surf__specks {
  position: absolute; inset: 0;
  background:
    radial-gradient(13px 7px at 78% 20%, rgba(205, 248, 255, .60), transparent 70%),
    radial-gradient(20px 10px at 89% 38%, rgba(127, 230, 240, .46), transparent 72%),
    radial-gradient(10px 6px at 68% 50%, rgba(205, 248, 255, .40), transparent 70%),
    radial-gradient(26px 12px at 95% 62%, rgba(127, 230, 240, .34), transparent 74%),
    radial-gradient(16px 8px at 59% 74%, rgba(205, 248, 255, .30), transparent 72%),
    radial-gradient(32px 14px at 81% 86%, rgba(63, 169, 189, .34), transparent 74%),
    radial-gradient(11px 7px at 31% 64%, rgba(205, 248, 255, .28), transparent 70%),
    radial-gradient(23px 11px at 44% 88%, rgba(127, 230, 240, .24), transparent 74%),
    radial-gradient(15px 8px at 15% 78%, rgba(127, 230, 240, .20), transparent 74%);
  filter: blur(3px);
  mix-blend-mode: screen;
  animation: atmen 17s ease-in-out infinite alternate;
}
@keyframes atmen {
  from { transform: translate3d(0, 0, 0);        opacity: .82; }
  to   { transform: translate3d(-1.2%, .8%, 0);  opacity: 1; }
}


/* --- 14 · Schrift im Hero ---------------------------------------------- */

.hero__type {
  position: absolute; z-index: 20;
  left: clamp(20px, 4vw, 60px);
  top: calc(var(--horizon) + 5%);
}
.hero__role {
  margin: 0;
  font-size: clamp(10px, 1.05vw, 13px); font-weight: 500;
  letter-spacing: .44em; text-transform: uppercase;
  color: var(--aqua-hot);
  text-shadow: 0 0 26px rgba(127, 230, 240, .7);
}

.cue {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(20px, 3.6vh, 40px);
  text-decoration: none;
}
.cue span {
  font-size: 9px; letter-spacing: .38em; text-transform: uppercase;
  color: #7794a3;
  transition: color .4s ease;
}
.cue:hover span { color: var(--aqua); }
.cue i {
  display: block; width: 54px; height: 1px;
  background: linear-gradient(90deg, rgba(127, 230, 240, .75), transparent);
  position: relative; overflow: hidden;
}
.cue i::after {
  content: ''; position: absolute; top: 0; left: -40%;
  width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aqua-hot));
  animation: tropfen 2.8s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes tropfen {
  0%   { transform: translateX(0);    opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateX(350%); opacity: 0; }
}

/* senkrechter Schriftzug am linken Rand — Textur, wie eine Schiffskennung */
.hero__side {
  position: absolute; z-index: 20;
  left: clamp(5px, 1.2vw, 18px);
  top: 46%;
  margin: 0;
  transform: rotate(180deg) translateY(50%);
  writing-mode: vertical-rl;
  font-size: 9px; font-weight: 400;
  letter-spacing: .40em; text-transform: uppercase;
  color: var(--dim);
}

/* eine einzige Instrumentenzeile auf dem Wasser — keine Tabelle */
.hero__readout {
  position: absolute; z-index: 20;
  left: clamp(20px, 4vw, 60px);
  bottom: clamp(24px, 3.6vh, 44px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: clamp(9.5px, .95vw, 11.5px);
  letter-spacing: .28em; text-transform: uppercase;
  color: #a8c2ce;
  text-shadow: 0 1px 14px rgba(0, 4, 10, .9);
}
.hero__readout i {
  display: block; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aqua-mid), transparent);
  opacity: .8;
}

/* --- der Kontaktblock rechts unten AUF dem Wasser ----------------------
   Loest die zweite Schwaeche: die untere rechte Bildhaelfte war eine grosse
   dunkle Flaeche ohne Aufgabe. Sie traegt jetzt die einzige Information, die
   ein Veranstalter wirklich braucht — und sie spiegelt sich im Wasser, wie
   alles andere in dieser Szene auch.                                        */

.manifest {
  position: absolute; z-index: 20;
  right: clamp(20px, 4vw, 60px);
  bottom: clamp(24px, 3.6vh, 44px);
  text-align: right;
  max-width: min(42vw, 400px);
}
.manifest__rule {
  display: block; height: 1px; width: 100%;
  margin: 0 0 clamp(12px, 1.6vh, 18px);
  background: linear-gradient(90deg, transparent, rgba(63, 169, 189, .30) 30%, rgba(205, 248, 255, .72) 100%);
}
.manifest__k {
  margin: 0 0 8px;
  font-size: 9px; letter-spacing: .40em; text-transform: uppercase;
  color: var(--aqua-mid);
}
.manifest__mail {
  display: inline-block;
  font-size: clamp(12px, 1.28vw, 16px); font-weight: 500;
  letter-spacing: .02em;
  color: var(--foam); text-decoration: none;
  text-shadow: 0 0 22px rgba(0, 6, 14, .95);
  position: relative; padding-bottom: 4px;
}
.manifest__mail::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aqua));
  transform: scaleX(.3); transform-origin: right;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.manifest__mail:hover { color: var(--aqua-hot); }
.manifest__mail:hover::after { transform: scaleX(1); }
.manifest__v {
  margin: 10px 0 0;
  font-size: clamp(9px, .92vw, 10.5px);
  line-height: 1.9; letter-spacing: .22em; text-transform: uppercase;
  color: #7f9aa8;
  text-shadow: 0 1px 14px rgba(0, 4, 10, .95);
}
/* das Echo im Wasser: gekippte, unscharfe Kopie der Kopfzeile. Kein
   zweiter Text zum Lesen — nur Licht, das im Wasser weiterlebt.            */
.manifest__echo {
  position: absolute; right: 0; top: calc(100% + 2px);
  width: 100%; height: 60%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.42) 0%, transparent 72%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.42) 0%, transparent 72%);
  pointer-events: none;
}
.manifest__echo span {
  display: block; text-align: right;
  font-size: clamp(12px, 1.28vw, 16px); font-weight: 500;
  letter-spacing: .02em;
  color: var(--aqua);
  transform: scaleY(-1) translateY(2px);
  filter: blur(3px);
}


/* --- Korn und Vignette ------------------------------------------------- */

.grain {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute; inset: 0; z-index: 41;
  pointer-events: none;
  background:
    radial-gradient(140% 104% at 46% 44%, transparent 58%, rgba(1, 5, 12, .54) 100%),
    linear-gradient(to bottom, rgba(1, 5, 12, .40) 0%, transparent 14%);
}


/* ==========================================================================
   2 · SPECTRUM — der Abstieg. Der Raum geht weiter nach unten.
   ========================================================================== */

.deep {
  position: relative;
  padding: clamp(80px, 12vh, 160px) 0 clamp(88px, 13vh, 170px);
  /* Der obere Rand ist FARBGLEICH mit dem Hero-Fuss (#000205), sonst sieht
     man die Naht als Tonstufe. Das Licht setzt erst darunter ein — man
     taucht ein, statt in eine andere Datei zu springen.                    */
  background:
    radial-gradient(74% 42% at 5% 22%, rgba(26, 99, 121, .30), transparent 66%),
    radial-gradient(60% 40% at 96% 76%, rgba(6, 23, 43, .8), transparent 70%),
    linear-gradient(180deg, #000205 0%, #01070e 12%, var(--abyss) 40%, #01070e 82%, #000306 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Lichtschaechte von oben links — dieselbe Lichtrichtung wie im Hero */
.deep__light { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.deep__light i {
  position: absolute; display: block;
  top: 4%; height: 130%;
  background: linear-gradient(to bottom, rgba(127, 230, 240, .18), transparent 76%);
  filter: blur(38px);
  mix-blend-mode: screen;
}
.deep__light i:first-child { left: 4%;  width: 18vw; transform: rotate(9deg); opacity: .85; }
.deep__light i:last-child  { left: 26%; width: 10vw; transform: rotate(13deg); opacity: .5; }

/* Der zweite, tiefere Horizont am Fuss der Sektion. Er beantwortet die Frage,
   die der Abstieg stellt: es geht weiter nach unten.                        */
.deep__floor {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: clamp(30px, 5vh, 62px); height: 0;
  pointer-events: none;
}
.deep__floor::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(127, 230, 240, .30) 14%, rgba(160, 238, 246, .5) 34%,
    rgba(127, 230, 240, .22) 66%, transparent 92%);
}
.deep__floor::after {
  content: ''; position: absolute; left: 0; right: 0; top: -7vh; height: 14vh;
  background: radial-gradient(46% 50% at 30% 50%, rgba(63, 169, 189, .17), transparent 74%);
  filter: blur(26px);
}

/* Stempel als Wasserzeichen — riesig, fast unsichtbar. Nutzt ein vorhandenes
   Marken-Asset als Textur, statt einen Kasten zu bauen.                     */
.deep__stamp {
  position: absolute; z-index: 1;
  right: -20%; top: 62%;
  width: min(56vw, 720px);
  transform: translateY(-50%) rotate(-8deg);
  opacity: .022;
  pointer-events: none;
}

.deep__inner {
  position: relative; z-index: 5;
  width: min(1320px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.eyebrow {
  margin: 0 0 clamp(26px, 4vh, 46px);
  display: flex; align-items: center; gap: 14px;
  font-size: 10px; font-weight: 500;
  letter-spacing: .40em; text-transform: uppercase;
  color: var(--aqua-mid);
}
.eyebrow::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(63, 169, 189, .55), transparent);
}

/* --- die drei Genres, die absinken ------------------------------------
   Jede Zeile tiefer, weiter eingerueckt, dunkler. Dass HARDSTYLE am
   tiefsten und schwersten liegt, ist kein Zufall.                          */

.sink { margin: 0; }
.sink span {
  display: block;
  font-family: var(--mass);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .90;
  letter-spacing: -.022em;
}
.sink__1 {
  font-size: clamp(46px, 8.2vw, 132px);
  color: var(--foam);
  text-shadow: 0 0 60px rgba(127, 230, 240, .32);
}
.sink__2 {
  font-size: clamp(44px, 7.6vw, 122px);
  margin-left: clamp(14px, 3.4vw, 58px);
  color: #93b6c4;
  text-shadow: 0 0 50px rgba(63, 169, 189, .24);
}
.sink__3 {
  font-size: clamp(41px, 7vw, 112px);
  margin-left: clamp(28px, 6.8vw, 116px);
  color: #3d5b6a;
  text-shadow: 0 0 40px rgba(26, 99, 121, .3);
}

.deep__note {
  margin: clamp(34px, 5vh, 58px) 0 0;
  max-width: 34ch;
  font-size: clamp(11px, 1.05vw, 13px);
  line-height: 1.9;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--haze);
}

/* --- die Lotleine — Marken auf einer Linie, kein Kasten ---------------- */

.sound { position: relative; padding-left: clamp(26px, 3vw, 42px); }
.sound__line {
  position: absolute; left: 0; top: 4px; bottom: 6%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(127, 230, 240, .85) 8%, rgba(63, 169, 189, .5) 52%,
    rgba(26, 99, 121, .28) 84%, transparent 100%);
}

.sound__mark { position: relative; }
.sound__mark + .sound__mark { margin-top: clamp(30px, 4.6vh, 54px); }
.sound__mark:nth-child(3) { margin-left: 6px; }
.sound__mark:nth-child(4) { margin-left: 14px; }
.sound__mark:nth-child(5) { margin-left: 24px; }

.sound__mark::before {
  content: '';
  position: absolute; top: 9px;
  left: calc(-1 * clamp(26px, 3vw, 42px)); width: clamp(16px, 2vw, 26px);
  height: 1px;
  background: linear-gradient(90deg, var(--aqua), transparent);
}
.sound__mark:nth-child(3)::before { left: calc(-6px - clamp(26px, 3vw, 42px)); }
.sound__mark:nth-child(4)::before { left: calc(-14px - clamp(26px, 3vw, 42px)); }
.sound__mark:nth-child(5)::before { left: calc(-24px - clamp(26px, 3vw, 42px)); }

.sound__i {
  margin: 0 0 10px;
  font-size: 9px; letter-spacing: .34em;
  color: var(--aqua-deep);
}
.sound__k {
  margin: 0 0 7px;
  font-size: 9.5px; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--dim);
}
.sound__v {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 16.5px); font-weight: 500;
  letter-spacing: .01em; line-height: 1.5;
  color: var(--foam);
}
.sound__v small {
  display: inline-block; margin-top: 3px;
  font-size: 10.5px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim);
}


/* ==========================================================================
   3 · FOOTAGE — das Bewegtbild als Teil der Szene
   Kein Kasten mit Abspielknopf: ein breites Lichtband, das an einer eigenen
   Wasserlinie bricht und sich darunter spiegelt — dieselbe Sprache wie
   Name und Figur im Hero. Die Kanten loesen sich in die Dunkelheit auf.
   ========================================================================== */

.floor {
  /* Das Band hat das Seitenverhaeltnis des Videos (1600x800 = 2:1). Damit
     wird NICHTS beschnitten. Vorher stand hier eine feste Hoehe; bei 1400 px
     Breite ergab das 3,5:1 und object-fit:cover schnitt 43 % des Bildes weg —
     es blieben riesige, unscharfe Gesichtsausschnitte uebrig (gemessen).    */
  --band: min(calc(100vw / 2), 76vh);
  position: relative;
  padding: clamp(70px, 10vh, 130px) 0 clamp(80px, 12vh, 150px);
  background:
    radial-gradient(70% 34% at 12% 6%, rgba(26, 99, 121, .22), transparent 70%),
    linear-gradient(180deg, #000306 0%, var(--edge) 16%, var(--edge) 84%, #000306 100%);
  overflow: hidden;
  isolation: isolate;
}

.floor__head {
  position: relative; z-index: 5;
  width: min(1320px, 92vw);
  margin: 0 auto clamp(30px, 4.4vh, 52px);
}

.floor__stage { position: relative; z-index: 4; }

/* das Band selbst. Maske auf dem UMSCHLAG, nicht auf dem Video — ein
   maskiertes Video verliert in Chrome gelegentlich die Maske, sobald es
   eine eigene Kompositionsebene bekommt.                                    */
.floor__band {
  position: relative;
  height: var(--band);
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.floor__band video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  /* Das Material ist warm (Magenta/Orange). hue-rotate waere der falsche Weg:
     es dreht das Orange mit und macht daraus Magenta (probiert). Deshalb
     zwei Schritte: hier daempfen, darueber eine Farbebene im Mischmodus
     'color'. Die Helligkeit bleibt aus dem Video, die Farbe kommt von uns —
     so wird aus warmem Buehnenlicht kaltes Licht unter Wasser.              */
  filter: saturate(.74) contrast(1.05) brightness(.92);
}
/* Farbebene: nimmt Ton und Saettigung von hier, Helligkeit vom Video */
.floor__duo {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #2c7f95 0%, #1a6379 56%, #103f52 100%);
  mix-blend-mode: color;
  opacity: .54;
}
/* Lichtspiel obendrauf: das Band leuchtet in den Raum hinein */
.floor__tint {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 120% at 16% 0%, rgba(127, 230, 240, .20), transparent 66%),
    linear-gradient(180deg, rgba(26, 99, 121, .22) 0%, rgba(10, 40, 60, .10) 58%, rgba(2, 10, 20, .26) 100%);
  mix-blend-mode: screen;
}
/* Oberflaechenstoerung ueber dem Band — man sieht durch Wasser hindurch.
   Bewusst schwach: staerker wirkte es wie ein Bildschirmfehler.             */
.floor__ripple {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 9px, rgba(2, 12, 22, .09) 9px 13px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(2, 12, 22, .05) 31px 39px);
  opacity: .46;
}

/* die Wasserlinie des Bandes. Steht im Fluss zwischen Band und Spiegelung —
   so sitzt sie zwangslaeufig an der Naht und traegt keine zweite Zahl.      */
.floor__line {
  position: relative; height: 0; z-index: 3;
  pointer-events: none;
}
.floor__line::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(127, 230, 240, .30) 10%, rgba(230, 252, 255, .92) 34%,
    rgba(160, 238, 246, .56) 66%, rgba(127, 230, 240, .22) 88%, transparent 100%);
}
.floor__line::after {
  content: ''; position: absolute; left: 0; right: 0; top: -7vh; height: 14vh;
  background: radial-gradient(50% 50% at 34% 50%, rgba(127, 230, 240, .26), transparent 74%);
  filter: blur(22px);
}

/* die Spiegelung des Bandes */
.floor__mirror {
  position: relative;
  height: calc(var(--band) * .42);
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.10) 62%, transparent 88%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.10) 62%, transparent 88%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.floor__mirror video {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--band);
  object-fit: cover; object-position: 50% 50%;
  transform: scaleY(-1);
  filter: blur(7px) saturate(.34) brightness(.44);
  animation: schwappen 15s ease-in-out infinite alternate;
}
/* dieselbe Farbebene wie oben, sonst waere die Spiegelung waermer als das
   Original — Wasser kuehlt, es waermt nicht.                                */
.floor__mirror .floor__duo { opacity: .72; }
.floor__mirror .floor__streaks {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(2, 10, 20, .26) 3px 5px),
    repeating-linear-gradient(to bottom, transparent 0 12px, rgba(2, 10, 20, .13) 12px 15px);
}

.floor__foot {
  position: relative; z-index: 5;
  width: min(1320px, 92vw);
  margin: clamp(26px, 4vh, 46px) auto 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.floor__cap {
  margin: 0;
  flex: 1 1 320px; min-width: 0;
  max-width: 60ch;
  font-size: clamp(10px, .95vw, 11.5px);
  line-height: 1.9; letter-spacing: .22em; text-transform: uppercase;
  color: #7f9aa8;
}
.floor__meta {
  margin: 0;
  font-size: 9px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--aqua-deep);
}


/* ==========================================================================
   4 · BOOKING — der Abschluss unter Wasser
   ========================================================================== */

.book {
  position: relative;
  padding: clamp(64px, 9vh, 120px) 0 clamp(60px, 8vh, 110px);
  background:
    radial-gradient(64% 40% at 6% 14%, rgba(26, 99, 121, .26), transparent 68%),
    radial-gradient(50% 46% at 92% 84%, rgba(6, 23, 43, .70), transparent 72%),
    linear-gradient(180deg, #000306 0%, #01070e 18%, var(--abyss) 56%, #01070e 88%, #000306 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Lichtschaechte wie in Sektion 01 — dieselbe Lichtrichtung, damit der
   Abschnitt nicht als leere Flaeche liegt.                                  */
.book__light { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.book__light i {
  position: absolute; display: block;
  top: -6%; height: 128%;
  background: linear-gradient(to bottom, rgba(127, 230, 240, .16), transparent 72%);
  filter: blur(42px);
  mix-blend-mode: screen;
}
.book__light i:first-child { left: 3%;  width: 16vw; transform: rotate(8deg);  opacity: .8; }
.book__light i:last-child  { left: 22%; width: 9vw;  transform: rotate(12deg); opacity: .45; }

.book__inner {
  position: relative; z-index: 5;
  width: min(1320px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: end;
}

.huge {
  margin: 0;
  font-family: var(--mass); font-weight: 400;
  font-size: clamp(52px, 10.6vw, 168px);
  line-height: .86; letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--foam);
  text-shadow: 0 0 70px rgba(127, 230, 240, .26);
}

.mailto {
  display: inline-block;
  margin: clamp(30px, 4.6vh, 54px) 0 0;
  font-size: clamp(14px, 1.9vw, 25px); font-weight: 500;
  letter-spacing: .01em;
  color: var(--aqua-hot); text-decoration: none;
  position: relative; padding-bottom: 8px;
  overflow-wrap: anywhere;
}
.mailto::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--aqua), rgba(26, 99, 121, .2));
  transform: scaleX(.42); transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mailto:hover::after { transform: scaleX(1); }

.book__facts {
  margin: clamp(30px, 4.4vh, 50px) 0 0;
  padding: 0; list-style: none;
  display: grid; gap: 14px;
}
.book__facts li {
  position: relative; padding-left: 26px;
  font-size: clamp(10px, .98vw, 12px);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--haze);
}
.book__facts li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 16px; height: 1px;
  background: linear-gradient(90deg, var(--aqua-mid), transparent);
}

/* Zweites Studio-Portraet, freigestellt aus dem Rohfoto (EXIF-gedreht, ohne
   exif_transpose kippt es um 90 Grad). Er steht im dunklen Wasser: stark
   abgedunkelt, mit einem Teal-Saum von LINKS — dieselbe Lichtrichtung wie
   im Hero. Der Saum ist ein drop-shadow am Freisteller und folgt deshalb
   seiner Silhouette. Deswegen liegt hier KEINE Maske auf demselben Element;
   der Auslauf nach unten ist ein Verlauf DARUEBER.

   ⚠ Gemessen und behoben: die Freistellung war auf ihre Alpha-Bounding-Box
   beschnitten, sein Koerper beruehrte also alle vier Kanten. Der Saum folgte
   dieser geraden Alpha-Kante und zeichnete daraus einen Kasten. Zwei
   Gegenmittel: im Bild ein weicher Alpha-Auslauf an den Kanten (max. Alpha
   der Randstreifen jetzt 3–10 statt 255), und im Layout laeuft die rechte
   Kante aus dem Bildschirm heraus.                                          */
.pose { position: relative; z-index: 4; }
.pose__body {
  position: relative;
  /* bewusst zurueckhaltend: der Hero ist die Buehne, hier ist er Begleitung.
     Bei 470 px war er so hoch, dass links eine leere Flaeche entstand.       */
  width: min(34vw, 355px);
  margin-left: auto;
  /* rechts aus dem Bild heraus: (halbe Fensterbreite − halbe Spaltenbreite)
     ist der rechte Aussenrand des Rasters; genau so weit plus 10 px wird
     geschoben, damit die Bildkante ausserhalb des Fensters liegt.           */
  margin-right: calc(-1 * (50vw - min(660px, 46vw)) - 40px);
}
.pose__body img {
  /* height:auto ist hier PFLICHT: das <img> traegt width/height-Attribute,
     und die wirken als Darstellungshinweis. Mit nur width:100% blieb die
     Hoehe auf 1137 px stehen und das Bild wurde gestaucht (gemessen:
     355x1137 statt 355x492).                                               */
  width: 100%; height: auto;
  filter:
    brightness(.50) contrast(1.16) saturate(.88)
    drop-shadow(-15px 0 30px rgba(63, 169, 189, .34));
}
.pose__glow {
  position: absolute; z-index: -1;
  left: 2%; top: 14%; width: 58%; height: 66%;
  background: radial-gradient(closest-side, rgba(63, 169, 189, .30), transparent 74%);
  filter: blur(42px);
  mix-blend-mode: screen;
}
/* Der Auslauf nach unten liegt IM ALPHA DES BILDES, nicht in einer Flaeche
   darueber. Gemessen: eine Verlaufsflaeche muss auf einer festen Farbe enden
   (#01070e, Helligkeit 7), der Abschnittshintergrund lag dort aber bei 29 —
   das ergab eine sichtbare waagerechte Naht an der Bildunterkante. Ein Alpha-
   Auslauf hat dieses Problem nicht, weil er auf NICHTS endet. Und eine Maske
   waere hier verboten, weil auf demselben Element ein drop-shadow sitzt.     */


/* ==========================================================================
   5 · DIE FERNE KUESTE — der Abschluss der Szene
   Zweites Bewegtbild: Hafenlichter und ihre Spiegelung im Wasser. Es zeigt
   dasselbe Prinzip wie die ganze Seite — ein Licht und sein Bild im Wasser.
   ========================================================================== */

.shore {
  position: relative;
  height: clamp(230px, 38vh, 400px);
  overflow: hidden;
  background: #000306;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 76%, transparent 100%);
}
.shore video {
  width: 100%; height: 100%;
  /* nach unten gewichtet: dort liegen Wasserlinie und Spiegelung, und genau
     die sind der Grund, warum dieser Ausschnitt hier steht. Nicht ganz nach
     unten — sonst faellt das angeschnittene Riesenrad heraus, und das ist
     das eine wiedererkennbare Ding im Bild.                                 */
  object-fit: cover; object-position: 50% 46%;
  filter: saturate(.86) contrast(1.08) brightness(.72);
}
.shore__tint {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 90% at 22% 20%, rgba(127, 230, 240, .14), transparent 70%),
    linear-gradient(180deg, rgba(1, 7, 14, .40) 0%, rgba(1, 7, 14, .05) 40%, rgba(0, 3, 6, .58) 100%);
}


/* ==========================================================================
   6 · FUSS
   ========================================================================== */

.foot {
  position: relative;
  padding: clamp(40px, 6vh, 72px) 0 clamp(30px, 4vh, 48px);
  background: linear-gradient(180deg, #000306 0%, #01050c 100%);
}
.foot__in {
  width: min(1320px, 92vw); margin: 0 auto;
}
.foot__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(26px, 5vw, 80px); flex-wrap: wrap;
}
.foot__brand { display: flex; align-items: center; gap: 12px; }
.foot__brand img { width: 30px; height: 30px; opacity: .6; }
.foot__brand span {
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--haze);
}
.foot__col p {
  margin: 0 0 12px;
  font-size: 9px; letter-spacing: .36em; text-transform: uppercase;
  color: var(--aqua-deep);
}
.foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot__col li,
.foot__col a {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--haze); text-decoration: none;
}
.foot__col a { transition: color .3s ease; }
.foot__col a:hover { color: var(--aqua-hot); }
.foot__agency { margin-top: 20px; }
.foot__agency img { width: 122px; height: auto; opacity: .42; }

.foot__bar {
  margin-top: clamp(34px, 5vh, 60px);
  padding-top: 18px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--dim);
  /* kein border: eine Lichtlinie */
  background: linear-gradient(90deg, rgba(63, 169, 189, .34), rgba(63, 169, 189, .04) 60%, transparent) top left / 100% 1px no-repeat;
}


/* ==========================================================================
   EINBLENDUNGEN
   Nur mit JavaScript verborgen — sonst haengt der Inhalt bei einem
   JS-Ausfall unsichtbar fest. Das Gatter setzt ein Inline-Skript im <head>.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  will-change: transform, opacity;
}
.js .reveal.is-in { opacity: 1; transform: none; }


/* ==========================================================================
   EINHAENGEPUNKTE — Gestaltung liegt fertig, der Inhalt fehlt noch.
   Die zugehoerigen HTML-Bloecke stehen als Kommentar in der index.html.
   Sobald Text/Links da sind: Kommentar aufmachen, nichts weiter.
   ========================================================================== */

/* (A) BIO */
.bio {
  margin: clamp(34px, 5vh, 58px) 0 0;
  max-width: 62ch;
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.95; letter-spacing: .02em;
  color: #b9cfd8;
}
.bio + .bio { margin-top: 1.4em; }

/* (B) SOCIAL / STREAMING — Lichtlinien, keine Karten */
.links {
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0; list-style: none;
  display: flex; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap;
}
.links a {
  position: relative; display: inline-block; padding-bottom: 6px;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--foam); text-decoration: none;
}
.links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--aqua), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.links a:hover { color: var(--aqua-hot); }
.links a:hover::after { transform: scaleX(1); }

/* (C) RELEASES — Zeilen auf einer Lotleine, kein Karten-Raster */
.rel { margin: clamp(30px, 4.6vh, 54px) 0 0; }
.rel__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: center;
  padding: clamp(16px, 2.2vh, 26px) 0;
  background: linear-gradient(90deg, rgba(63, 169, 189, .28), rgba(63, 169, 189, .03) 70%, transparent) bottom left / 100% 1px no-repeat;
  text-decoration: none;
}
.rel__row img { width: 64px; height: 64px; object-fit: cover; }
.rel__t {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 21px); font-weight: 500;
  color: var(--foam);
}
.rel__s {
  margin: 5px 0 0;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--dim);
}
.rel__y {
  font-size: 10px; letter-spacing: .28em;
  color: var(--aqua-deep);
}

/* (D) PRESSKIT — ein Ausgang, keine Kachel */
.kit {
  display: inline-flex; align-items: center; gap: 14px;
  margin: clamp(30px, 4.4vh, 50px) 0 0;
  padding: 14px 0 14px 0;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--foam); text-decoration: none;
}
.kit i {
  display: block; width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--aqua), transparent);
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.kit:hover i { width: 76px; }
.kit:hover { color: var(--aqua-hot); }


/* ==========================================================================
   SCHMALE BILDSCHIRME
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --horizon: 62%;
    /* --wline = 12 % + 62 % × 0,93 = 69,7 % */
    --wline:   69.7%;
  }

  /* Neben ihm ist auf 420 px kein Platz. Also mittig — und der Name liegt
     jetzt UNTER seiner Wasserlinie, als naeheres Objekt im Wasser vor ihm.
     In Entwurf C lag er ueber seinen gekreuzten Armen und deckte sie fast
     vollstaendig zu. Die Rechnung dahinter (Hoehe 812 px, Name 74vw):
       Unterarme  = 12 % + 62 % × (72,3…91,6 %)  = 56,8 % … 68,8 %
       Tattoo     = 12 % + 62 % ×  81,3 %        = 62,4 %
       Name       = 73,2 % … 88 %   → beruehrt beides nicht mehr.            */
  .figure {
    --wl: 93%; --fade: 1.6%;
    left: 50%; right: auto; top: 12%; height: 62%;
    transform: translate3d(-50%, calc(var(--p) * -8%), 0);
  }
  .mark {
    left: 50%; width: 74vw; z-index: 13;
    bottom: 12%;
    transform: translate3d(-50%, calc(var(--p) * -6%), 0);
  }
  .mark-reflect {
    left: 50%; width: 74vw; z-index: 13;
    top: auto; bottom: 0; height: 12%;
    transform: translate3d(-50%, calc(var(--p) * -6%), 0);
  }
  .backlight {
    left: 50%; width: 74%; height: 44%; top: 14%;
    transform: translate3d(-50%, calc(var(--p) * -7%), 0);
  }
  .ground {
    left: 50%; width: 86%; top: calc(var(--wline) - 15%);
    transform: translate3d(-50%, calc(var(--p) * -8%), 0);
  }
  .contact {
    left: 50%; width: 82%;
    transform: translate3d(-50%, calc(var(--p) * -8%), 0);
  }
  .haze {
    background:
      radial-gradient(40% 20% at 92% 58%, rgba(7, 28, 44, .5), transparent 74%);
  }
  /* Lichtbahn mittig unter den Horizont, sonst zeigt sie ins Leere */
  .water__path { left: 30%; width: 40%; }
  .water span {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 82%, transparent 100%);
  }
  .surf__specks {
    background:
      radial-gradient(10px 6px at 80% 26%, rgba(205, 248, 255, .34), transparent 70%),
      radial-gradient(15px 8px at 22% 44%, rgba(127, 230, 240, .26), transparent 72%),
      radial-gradient(18px 9px at 66% 62%, rgba(127, 230, 240, .20), transparent 74%);
  }

  /* Rolle nach oben unter die Navigation; unten ist der Name */
  .hero__type {
    top: 10.5%; left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .cue { display: none; }
  .hero__side { display: none; }
  .hero__readout { display: none; }
  .manifest { display: none; }

  .deep__inner { grid-template-columns: 1fr; gap: clamp(48px, 8vh, 72px); }
  .sound { padding-left: 24px; }

  .book__inner { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 60px); }
  .book__inner { display: flex; flex-direction: column-reverse; }
  .pose__body { width: 78vw; margin-right: -10vw; }
  .pose__glow { left: 6%; width: 54%; }
  /* Das Band im Footage-Abschnitt bleibt im Seitenverhaeltnis des Videos,
     nur die Deckelung entfaellt — auf dem Handy ist Hoehe nicht knapp.      */
  .floor { --band: calc(100vw / 2); }

  .floor__foot { gap: 14px; }
  .foot__row { gap: 30px; }
}

@media (max-width: 560px) {
  .mark, .mark-reflect { width: 84vw; }
  .nav__brand span { display: none; }
  .nav__right { gap: 16px; }
  .nav__right a { letter-spacing: .16em; font-size: 9px; }

  .sink__2 { margin-left: 10px; }
  .sink__3 { margin-left: 20px; }

  .foot__row { flex-direction: column; }
  .foot__bar { flex-direction: column; gap: 10px; }
}


/* ==========================================================================
   BEWEGUNG AUS — vollstaendig, nicht abgeschwaecht. Die Szene bleibt dabei
   komplett lesbar: Spiegelungen behalten scaleY(-1), nur die Bewegung faellt
   weg. Die Videos zeigen ihr Standbild (JS haelt sie an).
   ⚠ Bei jeder Umbenennung einer Spiegelung diesen Block mitziehen — sonst
   laeuft die Wasserbewegung trotz Abschaltung weiter.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Die drei Lichtfelder stehen hier ZUSAETZLICH einzeln, obwohl `.aurora i`
     sie schon trifft. Grund: die Gegenprobe vergleicht die Selektoren dieses
     Blocks mit allen Selektoren, die eine `animation` setzen — und die tragen
     dort ihre Klassennamen. Ohne die Doppelung meldet die Pruefung drei
     offene Punkte, die keine sind. */
  .aurora i, .aurora__a, .aurora__b, .aurora__c,
  .mark-reflect__in,
  .figure__reflect > img,
  .floor__mirror video,
  .surf__specks,
  .cue i::after { animation: none !important; }
  .mark-reflect__in,
  .figure__reflect > img,
  .floor__mirror video { transform: scaleY(-1) !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}