/* ============================================================
   VYSUALIZED — Relaunch · »EDITORIAL«
   Dark Theme · Geologica · Mint #DEFEEA · Rosé #FEDEE1
   Radius 0 · Uppercase-Headlines · reduzierte Glows
   ============================================================ */

:root{
  --bg:#050506;
  --panel:#0b0b0d;
  --fg:#F5F7F6;
  --muted:rgba(247,249,248,.72);   /* heller (Carlos: „das Grau wirkt müffig") — vormals .62 */
  --mint:#DEFEEA;
  --pink:#FEDEE1;
  --warm-ink:#EFE8DC;   /* warmes Off-White fuer Fliesstext — Kerzenlicht statt OLED-Weiss */
  --warm-black:#0A0807; /* warmes Dunkel fuer Waermflaechen (Rand-Cuts bleiben #050506) */
  --line:rgba(245,247,246,.14);
  --font:'Geologica',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --maxw:1500px;
  --radius:0px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--mint); color:#000; }
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,ol,ul{ margin:0; }

.skip{
  position:fixed; top:-100px; left:16px; z-index:100;
  background:var(--mint); color:#000; padding:10px 18px;
  transition:top .2s;
}
.skip:focus{ top:16px; }

/* ===== Seitenwechsel: gebrandeter Dip-to-Black (zum Schnitt-Motiv der Seite) =====
   Laden: Seite taucht aus dem dunklen Panel auf, die V-Marke driftet leise weg
   (pageIn). Klick auf internen Seitenlink: Panel blendet auf, Marke wächst herein
   (.is-leaving) → nahtloser, markierter Cut zwischen den Seiten. */
.pagefade{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:#050506;
  opacity:0;
  animation:pfPanelIn 1s cubic-bezier(.22,1,.36,1) forwards;
}
.pagefade__mark{
  position:absolute; top:50%; left:50%;
  width:clamp(46px,6.5vw,82px); height:auto;
  transform:translate(-50%,-50%) scale(1.05);
  opacity:0;
  animation:pfMarkIn 1s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 0 26px rgba(222,254,234,.22));
}
@keyframes pfPanelIn{ from{ opacity:1; } to{ opacity:0; } }
@keyframes pfMarkIn{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0px) drop-shadow(0 0 26px rgba(222,254,234,.22)); }
  55%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.04); filter:blur(6px) drop-shadow(0 0 26px rgba(222,254,234,.22)); }
}
.pagefade.is-leaving{
  animation:none; opacity:1; pointer-events:auto;
  transition:opacity .6s cubic-bezier(.4,0,.2,1);
}
.pagefade.is-leaving .pagefade__mark{
  animation:none; opacity:1; transform:translate(-50%,-50%) scale(1);
  transition:opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
/* Ankunfts-Hold: Inline-Script pausiert die Aufblende sofort bei Schwarz,
   main.js gibt sie nach Fonts + erstem Render frei (Handy: Seitenwechsel ruhiger).
   Ohne JS laeuft die Keyframe-Blende normal — kann nie schwarz haengen bleiben. */
.pagefade.pf-hold, .pagefade.pf-hold .pagefade__mark{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .pagefade{ display:none; } }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section{ padding:clamp(90px,13vh,170px) 0; position:relative; }

main{ position:relative; z-index:1; background:var(--bg); }
/* Seitwaerts-Scroll global versiegeln (Carlos-Handyvideo Juli 2026: „staendige
   links-rechts-scrolls"): clip statt hidden = KEIN Scroll-Container, sticky/Pins
   bleiben heil — schneidet nur ab, was seitlich raussteht. */
html, body{ overflow-x:clip; }

/* ===== Typo-Bausteine ===== */
.eyebrow{
  color:var(--mint); font-size:.78rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; margin-bottom:1.3rem;
}
.h2{
  font-size:clamp(2.5rem,5.2vw,4.6rem); font-weight:600;
  line-height:1.12; letter-spacing:-.025em; text-transform:uppercase;   /* nicht 1: sonst beschneidet background-clip:text die Umlaut-Punkte (Ä/Ö/Ü) */
  /* Halation: hauchzarter warmer Lichthof wie belichtetes Filmnegativ (Alpha <.06,
     sonst schmiert die Typo ueber die 1080p-Scrubs). Auf grad-cool-Headlines (Fill
     transparent) neutral — zeigt sich nur auf soliden Ueberschriften. */
  text-shadow:0 0 34px rgba(255,224,178,.05), 0 0 8px rgba(255,255,255,.03);
}
/* Die literarische Drehung (Frisch): der EINE leise Schlusssatz je Sektion, gross &
   kleingeschrieben & leicht — „jemand spricht zu dir" statt Versalien-Plakat. */
.drehung{
  display:block; text-transform:none; font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.35; letter-spacing:-.01em;
  color:var(--warm-ink); max-width:24ch; margin-top:1.4em;
}
.page-ren .drehung{ color:#F2E7C8; }
/* Keine Einzelwort-Waisen (Carlos: „niemals eines wie ‚Analyse.' allein in einer Reihe"):
   balance verteilt Headline-Zeilen gleichmaessig, pretty verhindert Waisen im Fliesstext. */
.h2, .rp__title, .rp__welten-line, .pagehead h1, .cine__head, .kontakt__head, .stats__head h2, .rp-card__name{ text-wrap:balance; }
.keypoint__copy, .stats__intro, .stat-block__cap, .pagehead__copy, .studio__copy, .rp__lede, .rp__welten-copy, .rp__note, .register__line, .kontakt__way{ text-wrap:pretty; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:clamp(3rem,6vw,5.5rem);
}
.section-head__note{
  color:var(--muted); font-size:.8rem; text-align:right; padding-bottom:.5rem;
  text-transform:uppercase; letter-spacing:.08em;
}

/* ===== Buttons ===== */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid rgba(222,254,234,.3); border-radius:100px;   /* abgerundet + CI-getoenter Rand (Juli 2026, Carlos) */
  padding:.8em 1.7em; font-size:.9rem; font-weight:500; color:var(--fg);
  background:transparent; cursor:pointer; white-space:nowrap;
  transition:color .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1);
}
/* Ruhe-Puls entfernt (Juli 2026, Launch-Reife): Buttons ruhen statisch, Hover-Charge bleibt. */
/* CTA laedt sich beim Hover in CI-Mint→Rosé auf (Juli 2026, Carlos): eine
   Verlaufs-Fuellung wischt von links ein, der Text kippt auf Dunkel, ein
   weicher Mint/Rosé-Schein legt sich drum — „aufladen" statt hartem Fill. */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, var(--mint) 0%, #EFFBF3 50%, var(--pink) 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.btn:hover, .btn:focus-visible{
  color:#050506; border-color:transparent;
  box-shadow:0 8px 34px -10px rgba(222,254,234,.5), 0 8px 34px -10px rgba(254,222,225,.42);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .btn::before{ transition:opacity .3s; transform:scaleX(1); opacity:0; }
  .btn:hover::before{ opacity:1; }
}
.btn--outline{ margin-top:2.2rem; }

/* ===== Navigation ===== */
/* Nav = SCHWEBEND, kein Banner (Juli 2026, Carlos: „muss oben kein voller Banner
   sein, da steht eh nichts drin"). Statt Glas-Leiste nur ein weicher Kopf-Scrim,
   der Marke + Knoepfe ueber hellen Sektionen lesbar haelt. Die leere Leiste
   selbst faengt keine Klicks (pointer-events), nur ihre Kinder. z-80: der
   Menue-Knopf bleibt ueber dem Pult (z-60) zum Schliessen klickbar. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,26px) var(--pad);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.nav::before{                 /* weicher Verlaufs-Scrim statt Banner-Flaeche */
  content:""; position:absolute; inset:0 0 auto 0; height:clamp(100px,14vh,158px);
  background:linear-gradient(180deg, rgba(5,5,6,.72) 0%, rgba(5,5,6,.34) 48%, rgba(5,5,6,0) 100%);
  opacity:.6; transition:opacity .4s; pointer-events:none; z-index:-1;
}
.nav--scrolled::before{ opacity:1; }
/* nav--hidden v3: die Leiste bleibt (kein Banner mehr, der verschwinden koennte);
   nur die Marke zieht sich beim Runterscrollen zurueck, Menue + CTA bleiben. */
.nav__brand{ transition:opacity .35s, transform .35s; }
.nav--hidden .nav__brand{ opacity:0; transform:translateY(-10px); pointer-events:none; }
.nav__brand img, .nav__brand svg{ height:clamp(30px,3.6vw,40px); width:auto; display:block; }
/* Rechte Aktionsgruppe: Menue-Knopf + CTA gebuendelt (Marke bleibt links) */
.nav__actions{ display:inline-flex; align-items:center; gap:clamp(9px,1.3vw,16px); }
.nav__cta{ padding:.62em 1.35em; font-size:.82rem;
  background:rgba(9,10,12,.66); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }

/* ============================================================
   FILMSET-REISE — Raum-Kapitel (Birdman-Prinzip)
   ============================================================ */
.scene{
  position:relative; height:100vh; height:100svh;
  overflow:hidden; background:#050506; color:#fff;
}
.scene__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;  /* kein will-change: <video> hat nativ einen Compositing-Layer */
}
.scene__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 45%, transparent 46%, rgba(0,0,0,.5) 100%);
}
/* Unsichtbarer Cut: Raum 2-5 beginnen im Dunkeln und blenden auf (JS-generiert) */
.scene__dark{
  position:absolute; inset:0; z-index:2;
  background:#050506; pointer-events:none;
}
.scene__content{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none; padding:0 24px;
}
.scene__content .eyebrow{ margin-bottom:1rem; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.scene__head{
  font-weight:600; text-transform:uppercase; line-height:1.04;
  font-size:clamp(1.7rem,4.4vw,3.2rem); letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.scene__sub{
  margin-top:.7em; color:rgba(255,255,255,.72); font-weight:300;
  font-size:clamp(12.5px,1.5vw,15.5px); text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* Renaissance-CI-Schriftfarbe (aus Carlos' Vorlage, Juli 2026):
   Creme-Gold laeuft in warmes Rose-Kupfer — nur die Schrift, kein Fresko-Hintergrund */
.grad-ren{
  background:linear-gradient(100deg, #F6EEDA 0%, #EBD2AE 52%, #D9A88C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Kompakter Renaissance-Presenter auf der Landing */
.coverage__brand{
  font-weight:600; text-transform:uppercase; line-height:1.02;
  font-size:clamp(2.6rem, 6.5vw, 5.4rem); letter-spacing:-.01em;
  margin-top:.45rem;
}
.section--overlap{
  position:relative; z-index:5;
  /* -38svh (Juli 2026, war -30): der Korridor schiebt sich frueher ueber das
     dunkle Video-Ende — weniger tote Schwarzstrecke zwischen den Raeumen */
  margin-top:-38vh; margin-top:-38svh;
  padding-top:clamp(60px,10vh,120px);
}
/* Feder-Kante ueber der Overlap-Sektion: das Szenen-Video laeuft dem Scroll
   ~0.6s nach (scrub) — bei schnellem Wischen stand noch ein helles Bild unter
   der messerscharfen Schnittlinie. Der Verlauf blendet es weich ins Schwarz. */
.section--overlap::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height:clamp(140px,24vh,260px);
  background:linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,.72) 62%, #050506 100%);
  pointer-events:none;
}
/* Korridor-Licht als unsichtbarer Cut: jede Passage kommt aus tiefem Schwarz
   (verschmilzt mit dem dunklen Video-Ende), traegt in der Mitte die Lichtfarbe
   ihres Raums und laeuft wieder ins Schwarz aus, bevor der naechste Raum aufblendet */
/* EINE Lichtlogik (Juli 2026): Die statischen Mitte-Radiale sind raus — das
   scrollgetriebene Streiflicht (luxfx-Leak/Glow) IST jetzt das Raumlicht der
   Korridore. Vorher lagen zwei gleichfarbige Lichtquellen uebereinander
   (Carlos: „die Hintergrundeffekte doppeln sich"). Boden-Schimmer + dunkle
   Mitteltoene bleiben als stiller Unterbau. */
.clients, .manifest{
  background:
    radial-gradient(120% 45% at 50% 100%, rgba(222,254,234,.045), transparent 72%),
    linear-gradient(180deg, #050506 0%, #0b0c0e 22%, #090a0c 70%, #050506 100%);
}
.work, .tape{
  background:
    radial-gradient(120% 45% at 50% 100%, rgba(254,222,225,.04), transparent 72%),
    linear-gradient(180deg, #050506 0%, #0c0a07 22%, #090807 70%, #050506 100%);
}
.studio{
  background:
    radial-gradient(120% 45% at 50% 100%, rgba(222,254,234,.04), transparent 72%),
    linear-gradient(180deg, #050506 0%, #0d0a06 22%, #0a0806 70%, #050506 100%);
}
/* .keypoint.services (2 Klassen): gewinnt gegen das spaetere .services{background:var(--panel)}
   der Unterseiten-Sektion — sonst verliert der Landing-Korridor sein Monitorblau (Kaskaden-Bug) */
.keypoint.services{
  background:
    radial-gradient(120% 45% at 50% 100%, rgba(254,222,225,.04), transparent 72%),
    linear-gradient(180deg, #050506 0%, #090b0e 22%, #070a0c 70%, #050506 100%);
}
.coverage{
  background:
    radial-gradient(90% 55% at 50% 30%, rgba(242,231,200,.12), transparent 72%),
    radial-gradient(120% 45% at 50% 100%, rgba(254,222,225,.045), transparent 72%),
    linear-gradient(180deg, #050506 0%, #0d0b07 24%, #0a0906 72%, #050506 100%);
}
.kontakt{
  background:#050506;  /* Gold-Nachgluehen kommt vom luxfx-Leak (war doppelt) */
}
@media (prefers-reduced-motion: reduce){
  .scene{ height:auto; min-height:62vh; }
  .section--overlap{ margin-top:0; }
  .section--overlap::before{ display:none; }
}
/* Keypoint-Korridore: die Landing zeigt zwischen den Räumen nur noch ein
   zentriertes Statement + CTA — alles Weitere liegt auf services.html */
.keypoint{ padding-block:clamp(90px,14vh,150px); }  /* kompakter: weniger leeres Schwarz um die Statements */
.keypoint__inner{ max-width:760px; margin-inline:auto; text-align:center; }  /* margin-inline:auto: sitzt auch als KIND des Containers mittig (Showreel/Nourelle-Koepfe sassen links) */
.keypoint__inner .h2{ margin-top:.5rem; }
.keypoint__copy{
  color:var(--muted); max-width:54ch;
  margin:1.7rem auto 0; line-height:1.7;
  font-size:clamp(1rem,1.15vw,1.15rem);
}
.keypoint .btn--outline{ margin-top:2.4rem; }
.keypoint__inner .coverage__cta{ justify-content:center; }
/* CI-Fäden: zwei hauchfeine Stränge (Mint/Rosé), die sich umeinander winden und
   mit der Scrollrichtung drehen — das Landing-Geschwister des goldenen
   Renaissance-Lebensstrangs. Liegt hinter dem Content der dunklen Korridore. */
/* Streiflicht (Juli 2026, ersetzt ci-threads): Lichtreste + Schaft + Staub */
.luxfx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.luxfx__layer{ position:absolute; inset:0; }
.luxfx__shaft{
  position:absolute; inset:-16%;
  background:linear-gradient(115deg, transparent 40%, rgba(245,247,246,.055) 50%, transparent 60%);
}
.luxfx__dust{ position:absolute; inset:0; width:100%; height:100%; }

.ci-threads{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.ci-threads svg{ width:100%; height:100%; display:block; }
.ci-threads canvas.ci-dust{ position:absolute; inset:0; width:100%; height:100%; }
.keypoint .container, .manifest .container{ position:relative; z-index:1; }
[data-strand] > .container{ position:relative; z-index:1; }  /* Inhalt ueber dem Strang */

/* Cooler Mint→Pink-Schrifteffekt für die Keypoint-Headlines — bewusst ANDERS als
   das Logo (dort flacher 2-Stop-Verlauf): 5-Stop mit hellem Kern, langsam fließend.
   Der Verlauf liegt auf den SplitText-Zeilen (.rvl-line) — sicher, weil diese den
   Text direkt tragen (background-clip:text bricht nur bei transformierten KINDERN). */
.grad-cool .rvl-line{
  background:linear-gradient(92deg, #A9EFCC 0%, #DEFEEA 24%, #F3F7F5 47%, #FEDEE1 73%, #F7BDC8 100%);
  background-size:230% 100%;
  background-position:0% 50%;   /* JS scrubbt die Position mit dem Scroll: Mint → Pink */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Fallback ohne Split (reduced-motion): Verlauf direkt auf der Headline */
@media (prefers-reduced-motion: reduce){
  .grad-cool{
    background:linear-gradient(92deg, #A9EFCC, #DEFEEA 40%, #FEDEE1 78%, #F7BDC8);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .grad-cool .rvl-line{ animation:none; }
}
/* Umlaut-Fix (Juli 2026, Carlos: Ü/Ö/Ä-Punkte oben abgeschnitten — trotz
   line-height 1.12). ZWEI Klipp-Mechaniken zugleich: (1) SplitText mask:'lines'
   legt um jede Zeile einen Wrapper mit overflow:clip, dessen Oberkante die
   Diakritika der grossen Versalien kappt → dem Wrapper oben Luft geben, per
   negativem Margin die Position halten (Slide-Reveal & Zeilenabstand bleiben);
   (2) bei grad-cool ist die Zeile zugleich background-clip:text-Malflaeche →
   etwas mehr line-height, damit die Punkte gefuellt bleiben. */
[data-reveal] :has(> .rvl-line), [data-reveal] .rvl-wrap{ padding-top:.28em; margin-top:-.28em; }  /* .rvl-wrap = JS-Fallback ohne :has() */
[data-reveal] .rvl-line{ line-height:1.2; }

/* Ausgewaehlte Arbeiten auf der Landing — elegante Teaser-Reihe */
.keypoint--works{ padding-block:clamp(96px,15vh,170px); }
/* Editorial-Versatz-Triptychon (Juli 2026, Carlos: „sieht grob aus" → Referenz-
   Recherche Locomotive/Obys/Exo-Ape-Schule): KEIN Karten-Grid mehr — die drei
   Werke stehen wie eine Magazin-Doppelseite: Querformat links (~72%), Hoch-
   format rechts ausgerueckt und leicht in den Weissraum gezogen, drittes Werk
   eingerueckt (Z-Lesefluss). Captions IMMER sichtbar UNTER dem Medium (Touch!),
   mit Haarlinie + Kurator-Index 01-03 in Mint. Kein Overlay-Verlauf mehr. */
.kp-works{
  margin:clamp(3rem,6vh,5rem) auto clamp(2.4rem,5vh,3.6rem);
  max-width:1060px; text-align:left;
}
.kp-work{ display:block; position:relative; }
.kp-work--a{ width:72%; }
.kp-work--b{ width:40%; margin-left:auto; margin-top:clamp(-72px,-7vh,-36px); }
/* --c zieht HOCH neben das Hochformat (Carlos: „zu viel Freiraum") — links 46%,
   rechts haengt Shindy (ab 60%): kein Ueberlappen, aber die Spalten verzahnen. */
.kp-work--c{ width:46%; margin-left:5%; margin-top:clamp(-220px,-24vh,-110px); }
.kp-work figure{
  margin:0; overflow:hidden; background:var(--panel);
  /* Transform-Transition auf der FIGURE, nicht dem Medium (Parallax-Falle) */
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.kp-work--a figure{ aspect-ratio:16/10; }
.kp-work--b figure{ aspect-ratio:4/5; }
.kp-work--c figure{ aspect-ratio:1/1; }   /* native 1:1-Quelle — nichts beschnitten (Koepfe!) */
.kp-work figure img, .kp-work figure video{
  width:100%; height:100%; object-fit:cover;
  transition:filter .5s;
  filter:saturate(.96) brightness(.92);
}
.kp-work:hover figure{ transform:scale(1.03); }
.kp-work:hover figure img, .kp-work:hover figure video{
  filter:saturate(1.05) brightness(1.02);
}
/* Caption: Haarlinie in Medienbreite, darunter Index · Kunde · Kategorie */
.kp-work__cap{
  display:flex; align-items:baseline; gap:1rem;
  margin-top:.85rem; padding-top:.8rem;
  border-top:1px solid rgba(245,247,246,.09);
  text-align:left;
}
.kp-work__idx{
  font-size:.68rem; letter-spacing:.12em; color:var(--mint);
  font-variant-numeric:tabular-nums; font-weight:500;
}
.kp-work__cap b{
  font-weight:600; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(245,247,246,.88);
}
.kp-work__cap i{ font-style:normal; color:var(--muted); font-size:.78rem; }  /* im Fluss neben dem Namen — rechts bleibt Leerraum, in den das naechste Werk ragen darf */
@media (max-width:820px){
  .kp-work--a, .kp-work--b, .kp-work--c{ width:100%; margin-left:0; }
  .kp-work--b, .kp-work--c{ margin-top:clamp(44px,7vh,72px); }
  .kp-work--b figure{ aspect-ratio:4/5; max-width:78%; }
  .kp-work--c figure{ aspect-ratio:1/1; }
}

/* Concept-Explosion darf ueber die Karte hinausbersten, aber NICHT ueber
   die Sektion → sonst horizontaler Seiten-Ueberlauf (Juli 2026-Fix „kreuz
   und quer"). overflow:clip clippt an der viewport-breiten Sektionskante,
   ohne Scroll-Container (Pins/Parallax bleiben heil). */
.work{ overflow:clip; }
/* Alt-Safari (<16) kennt overflow:clip nicht (faellt auf visible zurueck → der
   127px-Boom-Ueberlauf kaeme wieder); hidden waere die Scroll-Container-Falle.
   Stattdessen die Explosions-Buehne dort einfach kleiner spannen. */
/* Team: kompakte Reihe runder Portraits mit feinem CI-Ring (services.html#studio) */
.team-split{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.team-split__text .studio__copy{ margin-top:0; }
.team-row{ display:flex; gap:clamp(1.4rem,2.6vw,2.6rem); align-items:flex-start; }
.team-ava{ margin:0; text-align:center; max-width:214px; }   /* Rolle bricht 2-zeilig, Text bleibt am Kopf */
.team-ava__ring{
  display:block; width:clamp(120px,11vw,164px); aspect-ratio:1;
  margin-inline:auto;   /* Block zentriert sich NICHT per text-align — Ring stand links neben der breiteren Caption */
  border-radius:50%; padding:3px;
  background:linear-gradient(135deg, rgba(222,254,234,.65), rgba(254,222,225,.55));
}
.team-ava__ring img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; object-position:center;   /* Avatare sind 1:1 mit eingebackener Kopffreiheit + Aufhellung (ffmpeg) — ganzes Quadrat sichtbar */
  border:3px solid #050506;
  filter:saturate(1) brightness(1);
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .45s;
}
.team-ava:hover .team-ava__ring img{
  transform:scale(1.05); filter:saturate(1.05) brightness(1.05);
}
.team-ava figcaption{ margin-top:.9rem; display:flex; flex-direction:column; gap:.1rem; }
.team-ava b{ font-weight:600; font-size:.95rem; }
.team-ava i{
  font-style:normal; color:var(--muted); font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase;
}
@media (max-width:920px){
  .team-split{ grid-template-columns:1fr; }
  .team-row{ justify-content:center; flex-wrap:wrap; }
}

/* Seitenkopf der klassischen Unterseiten (services.html) */
.pagehead{ position:relative; overflow:hidden; padding-top:clamp(150px,24vh,240px); padding-bottom:clamp(40px,7vh,90px); }
.pagehead h1{ font-size:clamp(2.8rem,7.4vw,5.6rem); line-height:1.1; }   /* nicht 1.01: Verlaufs-Clip beschnitt Zeichen-Extreme */
/* Bewegtbild-Ebene aus unserem Set-Material (Juli 2026, Carlos): laeuft dunkel
   aus, damit die Typo traegt und es nahtlos ins Schwarz uebergeht — Wärme &
   Kino statt stillem Kopf-Feld. Ersetzt hier den Strang (ein Licht pro Zone). */
.pagehead__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.pagehead__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:58% 50%;                 /* Schwung leicht nach rechts, Text-Seite ruhig */
  opacity:.82; filter:saturate(1.06) brightness(1);   /* Video ist schon dunkel gegradet — mehr Leben (Carlos: „muss deutlich mehr leben") */
}
/* Scrim: links dunkel (Typo glasklar), Schlieren leben rechts/mittig durch; Boden voll ins Schwarz, Kopf-Vignette */
.pagehead__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, #050506 0%, rgba(5,5,6,.8) 30%, rgba(5,5,6,.28) 58%, rgba(5,5,6,.12) 80%, rgba(5,5,6,.5) 100%),
    linear-gradient(180deg, rgba(5,5,6,.42) 0%, rgba(5,5,6,.08) 26%, rgba(5,5,6,0) 50%, rgba(5,5,6,.72) 100%),
    radial-gradient(120% 92% at 50% -6%, rgba(5,5,6,0) 42%, rgba(5,5,6,.4) 86%);
}
.pagehead .container{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .pagehead__vid{ display:none; } }
.pagehead__copy{ color:var(--muted); max-width:56ch; margin-top:1.6rem; line-height:1.75; }
/* Masthead (Juli 2026, Carlos: „Video-Header raus, animiere etwas Eigenes"): die Typo
   IST der Kopf — grad-cool-Ignition auf der H1 (JS) + editoriale Callsheet-Zeile. */
.pagehead--masthead{ padding-top:clamp(160px,26vh,260px); }
/* Masthead-Verlauf direkt auf der H1 (5-Stop mit hellem Kern) — der Opener wischt den
   Kern per background-position drueber; Verlauf bleibt heil, weil KEINE Kinder mit
   Transform darunter liegen (data-masthead animiert die H1 selbst). */
.pagehead--masthead h1{
  background:linear-gradient(100deg,#A9EFCC 0%,#DEFEEA 24%,#F3F7F5 47%,#FEDEE1 73%,#F7BDC8 100%);
  background-size:230% 100%; background-position:50% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  will-change:letter-spacing, filter, transform;
}
.pagehead__slate{
  margin-top:clamp(1.8rem,4vh,3rem);
  font:500 clamp(.62rem,.82vw,.78rem)/1.2 'Geologica',sans-serif;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.pagehead__slate-key{ color:var(--mint); }
.pagehead__slate-yr{ color:var(--pink); }

/* ============================================================
   CINEMATIC SET-HERO — Dolly-Fahrt ans Video-Village
   ============================================================ */
.cine{
  position:relative; height:100vh; height:100svh;
  overflow:hidden; background:#000; color:#fff;
}
.cine__set{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;  /* kein will-change: <video> = nativer Layer */
  /* Grading ist ins Video eingebrannt — kein Live-Filter (GPU + verstärkt Grain) */
}
.cine__gels{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(40% 58% at 8% -4%, rgba(222,254,234,.22), transparent 68%),
    radial-gradient(40% 58% at 92% -4%, rgba(254,222,225,.2), transparent 68%);
}
.cine__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 88% at 50% 44%, transparent 36%, rgba(0,0,0,.74) 100%);
}
.cine__content{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
/* Wordmark im CI-Verlauf (Mint → Rosé), kohaerent zum Renaissance-Gold:
   SVG als Maske, der Verlauf ist der Fuellstoff */
.cine__wm{
  width:100%; aspect-ratio:646.8 / 161.4;
  /* 5-Stop mit hellem Kern + breites background-size: JS schiebt die Position,
     der helle Kern wandert als Licht ueber die Wortmarke = „Ignition"-Sweep,
     danach sanftes Dauer-Schimmern (heroWordmark() in main.js). */
  background:linear-gradient(100deg, var(--mint) 0%, #CFF6E0 28%, #F3F7F5 50%, #FBD8DE 72%, var(--pink) 100%);
  background-size:230% 100%;
  background-position:120% 50%;
  -webkit-mask:url('../assets/wordmark.svg') no-repeat center / contain;
  mask:url('../assets/wordmark.svg') no-repeat center / contain;
  filter:drop-shadow(0 0 26px rgba(222,254,234,.28));
}
@media (prefers-reduced-motion: reduce){ .cine__wm{ background-position:50% 50%; } }
.cine__head{
  margin-top:clamp(18px,2.6vw,32px); font-weight:600; text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:.06em; line-height:1.2;
}
.cine__sub{
  margin-top:.6em; color:rgba(255,255,255,.65); font-weight:300;
  font-size:clamp(12.5px,1.5vw,15.5px);
}
/* Positionierungszeile: besteht den 10-Sekunden-Scan (WAS + FUER WEN),
   ohne der Atmosphaere etwas zu nehmen */
.cine__tagline{
  margin-top:.85em; color:rgba(245,247,246,.78); font-weight:400;
  font-size:clamp(13px,1.6vw,16.5px); letter-spacing:.02em;
}
/* Scan-Anker: strong hebt Schluesselfakten aus den muted Copys auf volle
   Textfarbe — das Auge findet sie im F-Muster, ohne zu lesen.
   Site-weit (Juli 2026): dieselbe dezente Anhebung (Weight 500 statt hartem
   700-Bold, volle Textfarbe) fuer ALLE Copy-Absaetze mit Fett-Logik. */
.keypoint__copy strong, .kontakt__copy strong,
.pagehead__copy strong, .section-head__note strong,
.register__line strong, .journey__panel p strong,
.stats__intro strong, .stat-block__cap strong,
.regie__line strong, .studio__copy strong,
.rp__lede strong, .rp__note strong,
.rp-card__claim strong, .rp-card__value strong, .rp-card__carry strong,
.feedcase__copy strong,
.op__fact p strong{
  font-weight:500; color:var(--fg);
}
/* op__fact p strong steht IM Fliesssatz — muss die Riesen-Zahl-Regel
   (.op__fact strong, display:block/5rem/Gold) explizit zuruecknehmen */
.op__fact p strong{
  display:inline; font-size:inherit; letter-spacing:inherit;
  line-height:inherit; filter:none;
}
@media (prefers-reduced-motion: reduce){
  .cine{ height:auto; min-height:70vh; }
}

/* ============================================================
   OPENER / HERO
   ============================================================ */
.vys-opener{
  --vys-col-w:clamp(200px,28vw,340px);
  --vys-gap:clamp(14px,2vw,26px);
  --vys-tilt:-13deg;
  --vys-bgw:155%; --vys-bgh:185%;
  --vys-scale:1;
  position:relative; width:100%; height:100vh; height:100svh;
  overflow:hidden; background:#000; color:#fff;
}
.vys-bg{
  position:absolute; top:50%; left:50%; width:var(--vys-bgw); height:var(--vys-bgh);
  display:flex; justify-content:center; align-items:flex-start; gap:var(--vys-gap);
  --px:0px; --py:0px;
  transform:translate(calc(-50% + var(--px)), calc(-50% + var(--py))) rotate(var(--vys-tilt)) scale(var(--vys-scale));
  transform-origin:center center;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
  pointer-events:none; user-select:none;
  filter:brightness(.90);
}
.vys-col{
  flex:0 0 var(--vys-col-w); display:flex; flex-direction:column; gap:var(--vys-gap);
  will-change:transform; animation:vysScrollY 30s linear infinite;
}
.vys-col.vys-down{ animation-direction:reverse; }
.vys-tile{
  position:relative; width:100%; aspect-ratio:3/2; border-radius:0;
  overflow:hidden; background:#141416; flex:0 0 auto; will-change:transform,opacity;
}
.vys-tile img{ width:100%; height:100%; object-fit:cover; filter:saturate(.82); }
.vys-tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:#0f2a23; opacity:.10; mix-blend-mode:soft-light;
}
@keyframes vysScrollY{ from{ transform:translateY(0);} to{ transform:translateY(-50%);} }

.vys-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(48% 36% at 30% 82%, rgba(222,254,234,.10), transparent 70%),
    radial-gradient(48% 36% at 70% 82%, rgba(254,222,225,.10), transparent 70%),
    radial-gradient(125% 95% at 50% 49%, rgba(0,0,0,.48) 0%, rgba(0,0,0,.28) 46%, rgba(0,0,0,.66) 100%);
}
.vys-burst{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(128% 58% at 50% 60%,
    rgba(255,92,150,.40) 0%, rgba(190,100,225,.28) 26%,
    rgba(43,232,178,.18) 48%, rgba(255,92,150,0) 72%);
  filter:blur(32px); opacity:.32;
}

.vys-grain{
  position:absolute; inset:-60%; z-index:9; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E") repeat;
  background-size:170px 170px;
  animation:vysGrain 1.2s steps(6) infinite;
}
@keyframes vysGrain{ 0%{ transform:translate(0,0);} 100%{ transform:translate(8%,5%);} }

.vys-dim{ position:absolute; inset:0; z-index:12; pointer-events:none; background:#000; opacity:0; }
.vys-fade{
  position:absolute; left:0; right:0; bottom:0; height:16%; z-index:8; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,5,6,0), rgba(5,5,6,.9));
}
.vys-scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:10; pointer-events:none; }
.vys-scrollcue svg{ animation:vysCue 2.6s ease-in-out infinite; }
@keyframes vysCue{ 0%,100%{ transform:translateY(0); opacity:.65;} 50%{ transform:translateY(6px); opacity:1;} }

.vys-content{
  position:absolute; inset:0; z-index:11;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
.vys-lockup{ position:relative; width:clamp(300px,62vw,430px); isolation:isolate; }
.wm{ display:block; width:100%; height:auto; overflow:visible; }
.wm .st0{ fill:#ffffff; }
.wm .st1{ fill:#defeea; }
.vys-lockup::before{
  content:""; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:122%; height:300%;
  background:radial-gradient(60% 56% at 50% 50%, rgba(0,0,0,.52), rgba(0,0,0,.30) 52%, rgba(0,0,0,0) 78%);
  filter:blur(28px); z-index:-1; pointer-events:none;
}
.wm .ltr, .wm .chev{ will-change:filter,opacity; }

.vys-intro .wm .ltr, .vys-intro .wm .chev, .vys-intro .wm .tag{ opacity:0; }
.vys-intro .vys-tile{ opacity:0; transform:scale(.96); }
.vys-intro .vys-burst{ opacity:0; }
.vys-intro .vys-scrollcue{ opacity:0; }
.vys-intro .vys-copy{ opacity:0; transform:translateY(10px); }

.vys-copy{ position:relative; z-index:2; margin-top:clamp(16px,2.4vw,30px); max-width:48ch; padding:0 24px; }
.vys-oc-head{
  color:#fff; font-weight:500; font-size:clamp(16px,2.3vw,24px);
  letter-spacing:.01em; line-height:1.15;
}
.vys-oc-sub{
  margin:.6em 0 0; color:rgba(255,255,255,.7); font-weight:300;
  font-size:clamp(12.5px,1.5vw,15.5px); line-height:1.55;
}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients{ padding-bottom:clamp(70px,10vh,130px); }
.clients .h2{ margin-bottom:clamp(3rem,6vw,5rem); }
.marquee{
  overflow:hidden; padding:clamp(18px,2.5vw,30px) 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; align-items:center; width:max-content;
  gap:clamp(56px,9vw,130px); padding-right:clamp(56px,9vw,130px);
}
.marquee__track img{
  height:clamp(34px,4.4vw,56px); width:clamp(140px,18vw,230px);
  object-fit:contain; flex:0 0 auto;
  filter:grayscale(1) invert(1); mix-blend-mode:screen; opacity:.72;
  transition:opacity .3s;
}
.marquee:hover .marquee__track img{ opacity:1; }
/* CI-getönte Kundenlogos (Logo = Maske, CI-Farbe = Füllung).
   Größe + Masken-Zuschnitt setzt JS (logoDress) nach gemessenem Logo-Inhalt →
   alle optisch gleich groß. Farbe setzt JS nach Bildschirm-x: Mint → Rosé. */
.marquee__track .client-logo{
  height:28px; width:96px; flex:0 0 auto;         /* Fallback bis JS misst */
  background-color:#DEFEEA;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:.9; transition:opacity .35s;
}
.marquee:hover .client-logo{ opacity:1; }

/* ============================================================
   MANIFEST — Scroll-Wort-Reveal
   ============================================================ */
.manifest__line{
  font-size:clamp(1.6rem,3.4vw,3rem); font-weight:600; line-height:1.18;
  text-transform:uppercase; letter-spacing:-.015em; max-width:32ch;
  margin:0 0 clamp(2rem,4vw,3.2rem);
}
.manifest__line:last-child{ margin-bottom:0; }
.manifest__line--tag{
  text-transform:none; color:var(--mint); font-weight:500;
  font-size:clamp(2.2rem,5.5vw,4.6rem); letter-spacing:-.02em;
}

/* ============================================================
   TAPE „WERBEBANDE" (Juli 2026, Carlos): Der Typo-Breaker traegt jetzt das Kleid
   einer Stadion-LED-Bande — dunkles Board in leichter Broadcast-Perspektive,
   LED-Pixelraster ueber der Laufschrift, darunter ein Hauch Rasen mit Seitenlinie.
   EASTER EGG: Klick = Anzeigenwechsel (harter LED-Blip, dann laeuft der
   Vysualized-„Spot" in Rosé mit ⚽-Trennern; Klick schaltet zurueck).
   ============================================================ */
.tape{
  overflow:hidden; padding:clamp(30px,5vh,56px) 0 clamp(16px,2.6vh,30px);
  cursor:pointer;
  position:relative;   /* WICHTIG: die section--stack-Nachbarn sind sticky=positioned und
                          malten sonst UEBER den statischen Tape-Hintergrund (nur Board/Track
                          mit Transform lagen oben). Positioned + z-auto = DOM-Reihenfolge:
                          Bande deckt #arbeiten, #services deckt die Bande. */
}
.tape__board{
  position:relative; overflow:hidden;
  width:104%; margin-left:-2%;                      /* Perspektiv-Trapez laesst sonst die oberen Ecken frei */
  padding:clamp(18px,3vh,30px) 0;
  background:linear-gradient(180deg,#0a0b0c,#050506 45%,#08090a);
  border-top:1px solid rgba(245,247,246,.10);
  border-bottom:1px solid rgba(245,247,246,.16);
  transform:perspective(1100px) rotateX(6deg);      /* Broadcast-Blick leicht von oben */
  transform-origin:50% 100%;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85);
}
/* LED-Blip beim Anzeigenwechsel (steps = harter Diodenblitz statt weichem Fade) */
.tape__board::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(234,255,243,.95), rgba(222,254,234,.7));
  opacity:0; transition:opacity .12s steps(2,end);
}
.tape.is-blip .tape__board::before{ opacity:.85; }
/* LED-Pixelraster: dunkles Mesh mit runden Loechern — die Schrift wird zu Dioden */
.tape__board::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:radial-gradient(circle, rgba(5,5,6,0) 26%, rgba(5,5,6,.55) 58%);
  background-size:4px 4px;
}
.tape__lane{ position:relative; z-index:1; transition:opacity .18s, visibility .18s; }
.tape__lane--spot{ position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; }
.tape.is-spot .tape__lane:not(.tape__lane--spot){ opacity:0; visibility:hidden; }
.tape.is-spot .tape__lane--spot{ opacity:1; visibility:visible; }
.tape__track{
  display:flex; align-items:center; gap:clamp(1.6rem,3.2vw,3.2rem);
  width:max-content; white-space:nowrap;
  font-size:clamp(1.2rem,2.5vw,2.1rem); font-weight:500; line-height:1;
  text-transform:uppercase; letter-spacing:.26em;
  color:#E4FDF0;
  text-shadow:0 0 7px rgba(222,254,234,.55), 0 0 26px rgba(222,254,234,.25);   /* Dioden-Bloom */
  will-change:transform; user-select:none;
}
.tape__track--spot{ color:#FFE6E9;
  text-shadow:0 0 7px rgba(254,222,225,.55), 0 0 26px rgba(254,222,225,.25); }
.tape__dot{ color:var(--mint); font-size:.55em; letter-spacing:0; opacity:.85; text-shadow:none; }
.tape__track--spot .tape__dot{ font-size:.8em; opacity:1; }   /* ⚽ */
/* Rasen unter der Bande: Seitenlinie + Mahstreifen, bewusst tief und dunkel */
.tape__pitch{
  height:clamp(12px,1.8vh,18px); margin-top:2px;
  border-top:1px solid rgba(245,255,246,.09);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 110px, rgba(0,0,0,0) 110px 220px),
    linear-gradient(180deg, rgba(52,96,54,.42), rgba(20,38,22,.16) 70%, transparent);
}
@media (prefers-reduced-motion:reduce){ .tape__board::before{ transition:none; } }

/* ============================================================
   JOURNEY — gepinnte horizontale Erzähl-Strecke
   ============================================================ */
.journey{ background:var(--panel); padding-bottom:0; }
.journey .section-head{ margin-bottom:0; }
.journey__stage{
  height:100vh; height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.journey__track{
  display:flex; align-items:flex-start; gap:clamp(28px,5vw,80px);
  padding:0 var(--pad); will-change:transform;
}
.journey__panel{ flex:0 0 auto; width:min(74vw,660px); }
.journey__panel figure{
  overflow:hidden; aspect-ratio:16/10; background:#141416;
  margin-bottom:1.4rem;
}
.journey__panel figure img,
.journey__panel figure video{
  width:100%; height:100%; object-fit:cover; transform:scale(1.14); will-change:transform;
}
/* „Wirken" (Juli 2026, Carlos: „9,2 Mio formatfüllend mittig, beim Scrollen steigt der
   Wert"): kein Donut/KPI-Widget mehr — die Zahl IST das Bild. Formatfüllend, zählt
   scroll-gebunden 0,0→9,2 hoch, stellt sich aus der Unschärfe scharf und läuft dabei
   von kühl (Mint) nach warm (Rosé). Annotationen als ruhige Randnotizen. */
.journey__stat{
  position:relative; margin:0 0 1.4rem; min-height:min(48vh,420px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.4rem;
}
.journey__panel figure.journey__stat{ background:transparent; overflow:visible; }
.journey__stat-label{ color:var(--mint); font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.journey__stat-big{ display:flex; align-items:baseline; gap:.12em; }
.journey__stat-num{
  font:600 clamp(4.5rem,17vw,13rem)/.82 'Geologica',sans-serif; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; display:inline-block; min-width:3.4ch; text-align:right;
  background:linear-gradient(100deg,#A9EFCC 0%,#DEFEEA 24%,#F3F7F5 47%,#FEDEE1 73%,#F7BDC8 100%);
  background-size:230% 100%; background-position:0% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.journey__stat-unit{
  font:500 clamp(1.4rem,3.4vw,2.6rem)/1 'Geologica',sans-serif; text-transform:uppercase; letter-spacing:.02em;
  color:var(--warm-ink);
}
.journey__stat-ctx{ color:var(--warm-ink); font-size:clamp(1rem,1.4vw,1.25rem); font-weight:300; margin-top:.3em; }
.journey__stat-ctx em{ font-style:normal; color:var(--pink); border-bottom:1px solid rgba(254,222,225,.5); padding-bottom:.06em; }
.journey__stat-foot{ color:var(--muted); font-size:.82rem; font-weight:300; margin-top:.5em; }

/* WIRKUNG IN ZAHLEN — Apple-nahe Stat-Blöcke (Juli 2026, Carlos: „wichtige Infos wie die
   9,2 Mio so wie bei Apple"): Haarlinie oben · kleines Label · Riesen-Zahl · Bildunterschrift
   · Quelle. Klar, ruhig, viel Weissraum, kein Gimmick. */
.stats{ padding-block:clamp(90px,15vh,170px); }
.stats__head{ max-width:58ch; }   /* nicht 24ch: schnitt „HERAUSKOMMT" ab + quetschte den Intro */
.stats__intro{ color:var(--muted); max-width:54ch; margin-top:1.6rem; font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.7; }
.stats__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.4rem,5vh,4.6rem) clamp(3rem,7vw,7rem);
  margin-top:clamp(3rem,7vh,6rem);
}
/* 9,2 Mio als Hero-Stat (volle Breite, viel Luft — nicht mehr eingequetscht),
   danach die zwei kleineren im Raster. Text FAST WEISS (Carlos: „das Grau wirkt müffig"),
   grosszuegige Abstaende, Zahl mit Verlauf. */
.stats__hero + .stats__grid{ margin-top:clamp(3rem,7vh,6rem); }
.stat-block{ border-top:1px solid rgba(245,247,246,.24); padding-top:clamp(1.5rem,2.6vw,2.3rem); }
.stat-block__eyebrow{ color:rgba(247,249,248,.92); font-size:clamp(.95rem,1.1vw,1.05rem); font-weight:400; letter-spacing:.005em; margin-bottom:clamp(.9rem,1.8vw,1.5rem); }
.stat-block__num{
  margin:0 0 clamp(1rem,1.9vw,1.6rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  font:600 clamp(3.4rem,7.4vw,6.2rem)/1.2 'Geologica',sans-serif;   /* 1.2 statt 1: sonst Komma-Beschnitt durch background-clip:text */
  background:linear-gradient(100deg,#A9EFCC 0%,#DEFEEA 30%,#F3F7F5 55%,#FEDEE1 80%,#F7BDC8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.stat-block__cap{ color:rgba(247,249,248,.86); font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.55; max-width:34ch; }
.stat-block__cap sup{ color:rgba(247,249,248,.55); font-size:.66em; vertical-align:super; }
/* Hero: 9,2 Mio raumfuellend */
.stat-block--hero{ border-top-color:rgba(245,247,246,.3); padding-top:clamp(1.8rem,3vw,2.8rem); }
.stat-block--hero .stat-block__num{ font-size:clamp(4.6rem,13vw,10.5rem); margin-bottom:clamp(1.2rem,2.2vw,2rem); }
.stat-block--hero .stat-block__cap{ font-size:clamp(1.05rem,1.4vw,1.32rem); max-width:44ch; }
.stats__sources{ color:rgba(247,249,248,.55); font-size:.82rem; line-height:1.6; margin-top:clamp(2.4rem,4.5vh,3.6rem); max-width:72ch; }
.stats__sources sup{ font-size:.8em; }
@media (max-width:720px){ .stats__grid{ grid-template-columns:1fr; } }
.journey__meta{ display:flex; align-items:baseline; gap:1rem; }
.journey__num{ color:var(--mint); font-size:.8rem; font-weight:500; letter-spacing:.12em; }
.journey__panel h3{
  font-size:clamp(1.9rem,4.4vw,3.4rem); font-weight:600;
  letter-spacing:-.02em; text-transform:uppercase; line-height:1;
}
.journey__panel p{ color:var(--muted); max-width:48ch; margin-top:.7rem; }
@media (max-width:760px){ .journey__panel{ width:84vw; } }

/* ============================================================
   ARBEITEN
   ============================================================ */
.work__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3.2vw,48px);
}
.work-card--wide{ grid-column:span 2; }
.work-card figure{
  overflow:hidden; border-radius:var(--radius); background:#141416;
  aspect-ratio:4/3;
}
.work-card--wide figure{ aspect-ratio:21/10; }
.work-card figure img, .work-card figure video{
  width:100%; height:100%; object-fit:cover;
  transition:filter .5s;
}
.work-card:hover figure img, .work-card:hover figure video{ filter:saturate(1.08) brightness(1.07); }
.work-card__meta{
  display:flex; align-items:baseline; gap:1rem; padding-top:1.1rem;
}
.work-card__num{ color:var(--mint); font-size:.8rem; font-weight:500; letter-spacing:.1em; }
.work-card__meta h3{ font-size:clamp(1.15rem,1.8vw,1.45rem); font-weight:500; }
.work-card__meta p{ color:var(--muted); font-size:.92rem; margin-left:auto; text-align:right; }
@media (max-width:760px){
  .work__grid{ grid-template-columns:1fr; }
  .work-card--wide{ grid-column:auto; }
  .work-card--wide figure{ aspect-ratio:4/3; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--panel); }
/* REGISTER (Juli 2026, Carlos: „das ist eine Tabelle"): das Leistungs-Register
   ersetzt die 01–06-Liste — geghostete Magazin-Kapitelzahlen (bluten hängend),
   Haarlinien + Weißraum statt Zeilenraster, warmer Cursor-Spotlight statt flachem
   :hover-Farbwechsel. Kein bg, keine Symbol-Spalte, kein Vergleichs-Gefühl. */
.register{ margin-top:clamp(2.5rem,5vw,4.5rem); counter-reset:svc; }
.register__item{
  counter-increment:svc; position:relative; isolation:isolate;
  display:grid; grid-template-columns:clamp(80px,10vw,140px) 1.1fr 1.4fr; gap:clamp(1rem,2vw,2.5rem);
  align-items:baseline; padding-block:clamp(28px,4vh,52px);
  border-top:1px solid rgba(245,247,246,.09);
}
.register__item:last-child{ border-bottom:1px solid rgba(245,247,246,.09); }
.register__item::before{
  content:counter(svc,decimal-leading-zero); align-self:start;
  font:300 clamp(3rem,7vw,6rem)/.8 'Geologica',sans-serif; letter-spacing:-.02em;
  color:rgba(239,232,220,.16); -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(239,232,220,.16);
  transition:-webkit-text-fill-color .3s, -webkit-text-stroke-color .3s;
}
.register__item:hover::before{ -webkit-text-fill-color:var(--mint); -webkit-text-stroke-color:var(--mint); }
.register__name{
  font-size:clamp(1.2rem,2.2vw,1.8rem); font-weight:500; letter-spacing:0; text-transform:uppercase;
}
.register__line{ color:var(--warm-ink,#EFE8DC); max-width:52ch; }
.register__item::after{      /* Zeilen-Spotlight folgt dem Cursor (--mx via JS, pointer:fine) */
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(220px 140px at var(--mx,50%) 50%, rgba(222,254,234,.06), transparent 70%);
}
.register__item:hover::after{ opacity:1; }
@media (max-width:760px){
  .register__item{ grid-template-columns:1fr; gap:.4rem; }
  .register__item::before{ font-size:2.6rem; }
}

/* ============================================================
   360° ABDECKUNG
   ============================================================ */
.coverage{ overflow:hidden; }
.coverage__aurora{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:max(100%,1200px); height:auto; opacity:.35;
  mix-blend-mode:screen; pointer-events:none; user-select:none;
}
/* --- Full-Circle-Pin: zwei Ringe erklären die Säulen und schließen sich --- */
.fc{
  position:relative; height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:center;
}
.fc__rings{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,88vw,72vh); height:auto; overflow:visible; pointer-events:none;
}
.fc__ring ellipse{ fill:none; stroke-width:2.5; }
.fc__ring--a ellipse{ stroke:url(#fcMint); }
.fc__ring--b ellipse{ stroke:url(#fcRose); }
.fc__halo{
  fill:none; stroke:rgba(222,254,234,.55); stroke-width:1; opacity:0;
  filter:drop-shadow(0 0 30px rgba(222,254,234,.5));
}
.fc__phase{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(430px,80vw); text-align:center; opacity:0;
}
.fc__phase span{
  display:block; color:var(--mint); font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; margin-bottom:.9rem;
}
.fc__phase h3{
  font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:600;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.fc__phase p{ color:var(--muted); margin-top:.9rem; font-size:.98rem; }
.fc__phase em{
  display:inline-block; margin-top:1.1rem; font-style:normal;
  font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint); border:1px solid rgba(222,254,234,.32); padding:.5em 1.1em;
}
.fc__phase--final img{ width:clamp(48px,6vw,68px); height:auto; margin:0 auto 1.1rem; }
.fc__phase--final strong{
  display:block; font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:600;
  text-transform:uppercase; letter-spacing:0; line-height:1;
  background:linear-gradient(110deg, var(--mint), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion: reduce){
  .fc{ height:auto; padding:clamp(2rem,5vw,4rem) 0; display:block; }
  .fc__rings{ display:none; }
  .fc__phase{ position:static; transform:none; opacity:1; margin:0 auto 2.4rem; }
}

.coverage__intro{ color:var(--muted); max-width:62ch; font-size:1.02rem; }
.section-head + .coverage__intro{ margin-top:calc(-1 * clamp(1.5rem,3vw,2.75rem)); }
.coverage__intro + .coverage__intro{ margin-top:1.15em; }
.coverage__steps{
  list-style:none; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.8rem) clamp(1.4rem,2.5vw,2.5rem);
  border-top:1px solid var(--line); padding-top:clamp(1.8rem,3.4vw,3rem);
}
.coverage__steps li{
  font-size:.98rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
}
.coverage__steps li span{
  display:block; color:var(--mint); font-size:.75rem; letter-spacing:.12em; margin-bottom:.4rem;
}
.coverage__steps li p{
  color:var(--muted); font-size:.88rem; font-weight:400; text-transform:none;
  letter-spacing:0; margin-top:.45rem; line-height:1.55; max-width:34ch;
}
.coverage__cta{
  display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap;
  margin-top:clamp(2.6rem,5vw,4.2rem);
}
.coverage__single{
  color:var(--muted); font-size:.8rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; transition:color .25s;
}
.coverage__single:hover{ color:var(--mint); }
@media (max-width:760px){ .coverage__steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .coverage__steps{ grid-template-columns:1fr; } }

/* „Regiebuch in fünf Lichtern" (Juli 2026, ersetzt das kalte 01–06-Raster —
   Carlos' Wahl aus der Entsteril-Analyse): benannte Formel statt Gitter.
   Fünf grosse Verben, treppenförmig gestaffelt = aufsteigender Weg, kein
   Raster; je ein Frisch-Satz. Waerme kommt aus Groesse + Luft + Asymmetrie. */
.regie{
  border-top:1px solid var(--line);
  margin-top:clamp(1.6rem,3vw,2.8rem);
  display:flex; flex-direction:column;
}
.regie__act{
  padding:clamp(1.5rem,3.2vw,2.6rem) 0;
  border-bottom:1px solid rgba(245,247,246,.07);
  padding-left:calc(var(--i,0) * clamp(0px,3.4vw,66px));   /* Treppe */
}
.regie__head{ display:flex; align-items:baseline; gap:clamp(12px,1.8vw,24px); margin:0; }
.regie__no{
  font-size:.82rem; font-weight:600; letter-spacing:.14em;
  color:#EBD2AE; min-width:1.6em; flex:0 0 auto;   /* Gold als Waerme-Akzent */
}
.regie__verb{
  font-size:clamp(2rem,7vw,4.4rem); font-weight:600; line-height:.98;
  text-transform:uppercase; letter-spacing:-.015em;
}
.regie__line{
  margin:.7rem 0 0; max-width:48ch; color:var(--muted);
  font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.6;
}
@media (max-width:680px){
  .regie__act{ padding-left:0; }
  .regie__verb{ font-size:clamp(1.9rem,10vw,3rem); }
}

/* ============================================================
   STUDIO
   ============================================================ */
.studio__grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(3rem,6vw,7rem); align-items:center;
}
.studio__copy{ color:var(--muted); margin-top:1.8rem; max-width:46ch; }
.studio__images{ position:relative; }
.studio__img{ overflow:hidden; border-radius:var(--radius); background:#141416; }
.studio__img img{ width:100%; height:100%; object-fit:cover; }
.studio__img--a{ width:72%; aspect-ratio:4/5; }
.studio__img--b{ width:56%; aspect-ratio:4/3; margin:-28% 0 0 auto; position:relative; z-index:2; }
.studio__img--c{ width:42%; aspect-ratio:1; margin:-16% 0 0 6%; position:relative; z-index:3; }
@media (max-width:900px){
  .studio__grid{ grid-template-columns:1fr; }
  .studio__img--a{ width:88%; }
  .studio__img--b{ margin-top:-20%; }
}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt{ padding-bottom:clamp(110px,16vh,200px); }
.kontakt__head{
  font-size:clamp(3.4rem,11vw,9rem); font-weight:600;
  line-height:.94; letter-spacing:-.03em; text-transform:uppercase;
}
.kontakt__copy{ color:var(--muted); max-width:52ch; margin-top:2rem; }
.kontakt__mail{
  display:inline-block; margin-top:2.6rem;
  font-size:clamp(1.5rem,4.2vw,3.2rem); font-weight:500; letter-spacing:-.01em;
  color:var(--mint);
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px;
  transition:background-size .5s cubic-bezier(.22,1,.36,1), color .3s;
  padding-bottom:.08em;
}
.kontakt__mail:hover{ color:var(--pink); background-size:100% 2px; }
/* Kontaktwege als warme Einladungen (Juli 2026, Carlos: „steril, Tabellen"): das
   Label/Wert-Datenraster wich ruhigen Prosa-Zeilen — Verb-Auftakt in Mint, zweite
   Person, keine Kapitälchen-Labels, keine Trennlinien. */
.kontakt__ways{
  display:flex; flex-direction:column; gap:clamp(1rem,2.4vh,1.9rem);
  max-width:58ch; margin-top:clamp(3rem,6vw,5rem);
}
.kontakt__way{
  font:300 clamp(1.02rem,1.35vw,1.24rem)/1.5 'Geologica',sans-serif; color:var(--warm-ink);
}
.kontakt__way b{ font-weight:500; color:var(--mint); }
.kontakt__way a{ color:var(--fg); border-bottom:1px solid rgba(245,247,246,.28); transition:border-color .3s; }
.kontakt__way a:hover{ border-color:var(--mint); }

/* ============================================================
   FOOTER — Big Reveal
   ============================================================ */
.footer{
  position:sticky; bottom:0; z-index:0;
  background:var(--bg);
  padding:clamp(60px,9vh,110px) 0 34px;
}
/* Inline-Brandmarken (Juli 2026, Carlos: „ueberall wo Vysualized steht, unser
   Logo in Mint-Pink; im Renaissance-Kreis nur das kleine Logo in Gold"):
   das WORT ist die Marke — als Masken-Span in Textzeilen, skaliert mit der
   Schriftgroesse (em). aria-label traegt den Namen fuer Screenreader/SEO. */
.vys-inline{
  display:inline-block; height:.72em; aspect-ratio:639.6/88;   /* Cap-Hoehe: liest sich wie das naechste Wort */
  background:linear-gradient(100deg, var(--mint) 0%, #F3F7F5 50%, var(--pink) 100%);
  -webkit-mask:url("../assets/wordmark-word.svg") center/contain no-repeat;
          mask:url("../assets/wordmark-word.svg") center/contain no-repeat;
  vertical-align:baseline;
}
/* WICHTIG: wordmark.svg traegt die „less is less."-Tagline ALS PFADGRUPPE in der Datei —
   fuer Inline-Wortmarken immer wordmark-word.svg (Tag entfernt, viewBox auf Wort-BBox) nutzen! */
/* Gold-Fassung der Wordmark (Renaissance-Kreis) — Carlos: „ich meinte das Typologo".
   Etwas kleiner als .9em, damit die Marke in der Kapitaelchen-Kicker-Zeile
   optisch auf Cap-Hoehe der Nachbarbuchstaben sitzt. */
.vys-inline--gold{
  background:linear-gradient(100deg, #F6EEDA 0%, #EBD2AE 55%, #D9A88C 100%);
}
.footer__wordmark{
  width:100%; aspect-ratio:646.8/161.4; opacity:.26;
  background:linear-gradient(100deg, var(--mint) 0%, var(--pink) 100%);  /* Brand-2-Stop */
  -webkit-mask:url("../assets/wordmark.svg") center/contain no-repeat;
          mask:url("../assets/wordmark.svg") center/contain no-repeat;
  will-change:transform,opacity;
}
.footer__tagline{
  color:var(--muted); font-size:.82rem; letter-spacing:.02em;
  margin-bottom:1.6rem; text-wrap:pretty;
}
.footer__row{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line); padding-top:26px;
}
.footer__links{ display:flex; gap:clamp(1.2rem,3vw,2.4rem); }
.footer__links a{ color:var(--muted); font-size:.9rem; transition:color .25s; }
.footer__links a:hover{ color:var(--mint); }
.footer__copy{ color:var(--muted); font-size:.85rem; }

/* ============================================================
   FULL-CIRCLE-UNTERSEITE — die Seite IST der Circle
   ============================================================ */
.op__stage{
  position:relative; height:100vh; height:100svh; overflow:hidden;
}
.op__kicker{
  position:absolute; left:50%; top:clamp(96px,14vh,150px); transform:translateX(-50%);
  z-index:5; color:var(--fg); font-size:clamp(.78rem,1.4vw,1rem); font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; white-space:nowrap; opacity:.9;
}
.op__biome{
  position:absolute; top:0; left:-3%; width:106%; height:100%;
  object-fit:cover; object-position:center bottom;
  mix-blend-mode:screen; opacity:0; pointer-events:none; user-select:none;
  /* will-change entfernt (Perf Juli 2026): <video> hat nativ einen Compositing-Layer */
}
.op__biome--sky{ object-position:center top; }
.op__svgwrap{
  position:absolute; left:50%; top:50%; z-index:2;
  width:min(88vh,860px,96vw); aspect-ratio:1; will-change:transform;
  pointer-events:none;
}
.op__svgwrap svg{ width:100%; height:100%; overflow:visible; }
.op__line{
  fill:none; stroke:url(#opgrad); stroke-width:.7; opacity:.9;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 18px rgba(240,224,176,.22));
}
.op__strands path{ fill:none; vector-effect:non-scaling-stroke; }
.op__markers circle{ fill:rgba(242,230,196,.9) !important; }
.op__markers circle:nth-child(even){ fill:rgba(235,205,185,.9) !important; }
.op__final strong{
  background:linear-gradient(110deg, #F2E7C8, #E9C9A8);
  -webkit-background-clip:text; background-clip:text;
}
.op__fact{
  position:absolute; left:50%; top:50%;
  z-index:4; width:min(560px,86vw); text-align:center; opacity:0;
  will-change:transform,opacity,filter;   /* wie .op__station: Gold-Zahl-Fluege auf gecachter Layer-Textur statt Voll-Repaint pro Scrub-Frame */
}
/* Selling-Point-Zahlen (Juli 2026): gross, in Renaissance-Gold — wie die
   Kapitel-Karten aus Carlos' Entwurf. Die Zahl IST der Beat.
   WICHTIG: Der Gold-Verlauf liegt auf den SplitText-CHARS, nicht auf dem
   strong — background-clip:text am Parent bricht, sobald die Kinder
   Transforms tragen (Chars waeren unsichtbar). */
.op__fact strong{
  display:block; font-size:clamp(2.9rem,7vw,5.2rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.14; font-variant-numeric:tabular-nums;
  color:#EBD2AE;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.35));
}
.op__fact strong div, .op__fact strong span{
  background:linear-gradient(115deg, #F6EEDA 10%, #EBD2AE 55%, #D9A88C 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.op__fact p{
  color:rgba(245,247,246,.9); margin-top:1.15rem;
  font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; font-weight:400;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
/* Die Begriffe: keine UI-Boxen mehr — eine editoriale Zeile in Gold-Kapitaelchen,
   Worte durch Mittelpunkte getrennt (Renaissance-CI statt Interface-Look) */
.op__chips{
  display:flex; justify-content:center; align-items:baseline;
  gap:1.1em; margin-top:1.6rem;
}
.op__chips i{
  font-style:normal; font-size:.74rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  background:linear-gradient(100deg, #F6EEDA, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.op__chips i + i::after{
  content:"\00B7"; position:absolute; left:-.85em; top:0;
  background:none; -webkit-text-fill-color:rgba(238,226,192,.55);
  letter-spacing:0;
}
.op__fact small{
  display:block; margin-top:1.15rem; color:rgba(245,247,246,.42);
  font-size:.68rem; letter-spacing:.1em;
}
.op__corelight{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26%; aspect-ratio:1; border-radius:50%; opacity:0;
  background:radial-gradient(circle,
    rgba(255,238,205,.55) 0%, rgba(255,224,180,.22) 30%, rgba(254,222,225,.1) 55%, transparent 72%);
  mix-blend-mode:screen; pointer-events:none;
}
.op__markers circle{ fill:rgba(222,254,234,.85); }
.op__markers circle:nth-child(even){ fill:rgba(254,222,225,.85); }
.op__beacon{
  position:absolute; left:50%; top:50%;
  z-index:3; pointer-events:none;
}
.op__beacon-glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(52vw,720px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,228,190,.16) 0%, rgba(254,222,225,.09) 38%, transparent 68%);
  mix-blend-mode:screen;
}
.op__beacon-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%;
  background:#FFEDD6;
  box-shadow:0 0 16px 5px rgba(255,222,170,.9), 0 0 64px 22px rgba(255,205,160,.35);
}
.op__labels{ opacity:0; }
/* Säulen-Labels: präsenter, in Gold-Creme — und klickbar (Sprung zur Welt) */
.op__labels text{
  fill:rgba(242,231,200,.88); font-family:var(--font); font-weight:600;
  font-size:31px; letter-spacing:.24em; text-transform:uppercase; text-anchor:middle;
  pointer-events:auto; cursor:pointer;
  transition:fill .3s;
}
.op__labels text:hover{ fill:#F6EEDA; }
.op__glow{
  position:absolute; left:50%; bottom:-30%; transform:translateX(-50%);
  width:130vw; aspect-ratio:2.2; border-radius:50%; z-index:1;
  opacity:0; pointer-events:none;   /* Blend-Diaet Juli 2026: screen entfernt — auf schwarzem Grund quasi identisch, spart Backdrop-Readback */
}
.op__glow--mint{ background:radial-gradient(50% 50% at 50% 50%, rgba(222,254,234,.15), transparent 70%); }
.op__glow--rose{ background:radial-gradient(50% 50% at 50% 50%, rgba(254,222,225,.13), transparent 70%); }
.op__particles{
  position:absolute; inset:0; width:100%; height:100%; z-index:3;
  pointer-events:none;   /* Blend-Diaet: weisses Licht auf Schwarz braucht kein screen */
}
.op__station{
  position:absolute; left:50%; top:50%;
  z-index:4; width:min(480px,84vw); text-align:center; opacity:0;
  will-change:transform,opacity,filter;
}
/* Kapitel-Zeile und Claim in der Renaissance-CI: Gold-Kapitaelchen statt
   Systemfarben — das Produkt spricht durchgehend in seiner eigenen Palette */
.op__station span{
  display:block; font-size:.72rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; margin-bottom:.9rem;
  background:linear-gradient(100deg, #F6EEDA, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.op__station h2{
  font-size:clamp(2rem,4.6vw,3.4rem); font-weight:600;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.op__station p{
  margin-top:.9rem; font-size:clamp(1rem,1.4vw,1.15rem);
  background:linear-gradient(100deg, #F6EEDA 20%, #E9C9A8 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
/* Auftakt-Beat: das Produkt begruesst, bevor die erste Welt einfliegt */
.op__intro{
  position:absolute; left:50%; top:50%;
  z-index:4; width:min(640px,88vw); text-align:center;
  will-change:transform,opacity,filter;
}
.op__intro h1{
  font-size:clamp(3rem,7.5vw,5.8rem); font-weight:600;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.4));
}
.op__intro-claim{
  color:rgba(245,247,246,.88); margin-top:1.2rem;
  font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.op__intro-cue{
  margin-top:2.2rem; font-size:.74rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(245,247,246,.5);
}
/* Finale „Medaillon": Renaissance. sitzt EXAKT in der Kreismitte,
   Claim + Gold-CTA stehen unter dem Kreis */
.op__final{
  position:absolute; left:50%; top:50%;
  z-index:6; width:min(560px,84vw); text-align:center; opacity:0;
}
/* Kleines Gold-Brandmark als Siegel UEBER dem Titel (Carlos Juli 2026) —
   das Ensemble Mark+Titel zentriert sich als Ganzes in der Kreismitte. */
.op__final-mark{
  display:block; width:clamp(26px,3.2vh,34px); aspect-ratio:254.41/251.67;
  margin:0 auto 1.15rem;
  background:linear-gradient(135deg, #F6EEDA 0%, #EBD2AE 55%, #D9A88C 100%);
  -webkit-mask:url("../assets/brandmark.svg") center/contain no-repeat;
          mask:url("../assets/brandmark.svg") center/contain no-repeat;
}
.op__final strong{
  display:block; font-size:clamp(2rem,3.6vw,3.1rem); font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
  background:linear-gradient(100deg, #F6EEDA 0%, #EBD2AE 40%, #D9A88C 62%, #EBD2AE 84%, #F6EEDA 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 22px rgba(0,0,0,.4));
}
/* Schmale Viewports: Titel-Ensemble bleibt IM Ring (Carlos: „eleganter in den Kreis" —
   der Schriftzug spannte sich am Handy von Ringkante zu Ringkante) */
@media (max-width:700px){
  .op__final strong{ font-size:clamp(1.3rem,6.2vw,1.7rem); letter-spacing:.05em; }
  .op__final-mark{ width:22px; margin-bottom:.75rem; }
}
.op__final-below{
  position:absolute; left:50%; bottom:2.6vh;   /* tiefer: Luft zum unteren Saeulen-Label */
  z-index:6; width:min(620px,90vw); text-align:center; opacity:0;
}
.op__final-below p{ color:rgba(245,247,246,.85); font-size:clamp(1rem,1.3vw,1.15rem); }
.goldlink{
  display:inline-block; margin-top:1.3rem; padding-bottom:.4rem;
  font-size:.8rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  background:linear-gradient(100deg, #F6EEDA, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative; cursor:pointer;
}
.goldlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(238,226,192,.15), rgba(238,226,192,.75), rgba(238,226,192,.15));
  background-size:200% 100%;
  transition:background-position .8s cubic-bezier(.22,1,.36,1);
}
.goldlink:hover::after{ background-position:100% 0; }
.goldlink .arr{
  display:inline-block; margin-left:.7em;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  -webkit-text-fill-color:rgba(238,226,192,.9);
}
.goldlink:hover .arr{ transform:translateX(6px); }
@media (prefers-reduced-motion: reduce){
  .op__stage{ height:auto; padding:150px 0 60px; }
  .op__svgwrap, .op__biome, .op__particles{ display:none; }
  .op__kicker{ position:static; transform:none; display:block; text-align:center; margin-bottom:3rem; }
  .op__station, .op__fact, .op__final, .op__final-below, .op__intro{ position:static; transform:none; opacity:1; margin:0 auto 2.8rem; }
}

/* --- Abo-Rhythmus --- */
.abo__rhythm{
  list-style:none; padding:0; margin-top:clamp(2.4rem,4.5vw,4rem);
  border-top:1px solid var(--line);
}
.abo__rhythm li{
  display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:1.4rem;
  padding:clamp(16px,2vw,24px) 0; border-bottom:1px solid var(--line);
  font-size:.98rem;
}
.abo__rhythm li span{
  color:var(--mint); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; align-self:center;
}

/* ============================================================
   AMBIENT — Farb-Orbs + globales Filmkorn über allem
   ============================================================ */
.ambient{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
/* KERZENLICHT (Juli 2026, Carlos: „deutlich waermer, aber dezent — Kerzenlicht"):
   ein sehr sanfter warmer Schein von oben & unten ueber der ganzen Seite. soft-light
   waermt nur die dunklen Flaechen, laesst Mint/Rosé/Gold-Akzente in Ruhe. */
.vys-warmth{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:
    radial-gradient(125% 78% at 50% -10%, rgba(255,201,138,.13), transparent 56%),
    radial-gradient(125% 92% at 50% 110%, rgba(196,102,48,.11), transparent 60%);
}
@media (prefers-reduced-motion: reduce){ .vys-warmth{ opacity:.85; } }
/* Performance: Kerzenlicht (full-viewport soft-light) raus auf der schweren Kreis-Seite
   UND in Firefox (Gecko blendet full-screen soft-light teuer). */
.page-ren .vys-warmth, .is-lowgfx .vys-warmth{ display:none; }
/* Firefox-Sparpfad: dekorative Glow-Blends normal statt screen (weniger Compositing);
   Biome laufen als Poster (kein Video-Scrub, siehe JS). */
.is-lowgfx .op__glow, .is-lowgfx .op__beacon-glow{ mix-blend-mode:normal; opacity:.55; }
/* Firefox-Sparpfad Runde 2 (renaissance ruckelt weiter): drop-shadow-Filter auf BEWEGTEN
   Elementen (Kreis-SVG, Fakt-Zahlen, Stationen) rendert Firefox pro Scroll-Frame NEU =
   Luefter. Dazu full-viewport Blend-Ebenen (Grain-overlay, Biome-screen) + nav-backdrop-filter.
   Alles nur in Firefox aus — Chrome bleibt voll. */
.is-lowgfx .op__svgwrap svg,
.is-lowgfx .op__fact strong,
.is-lowgfx .op__station,
.is-lowgfx .op__beacon-core{ filter:none !important; }
.is-lowgfx .op__biome{ mix-blend-mode:normal; }
.is-lowgfx .ambient__grain{ display:none; }
.is-lowgfx .nav, .is-lowgfx .nav--scrolled{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.is-lowgfx .nav--scrolled{ background:rgba(5,5,6,.92); }
.ambient__drift{ position:absolute; left:0; width:100%; will-change:transform; }
.ambient__drift--1{ top:-12%; }
.ambient__drift--2{ top:34%; }
.ambient__drift--3{ top:74%; }
.ambient__wave{
  width:170%; margin-left:-35%; height:46vh;
  border-radius:50%; mix-blend-mode:screen; will-change:transform;
}
.ambient__wave--1{ background:radial-gradient(55% 90% at 50% 50%, rgba(222,254,234,.11), transparent 72%); }
.ambient__wave--2{ background:radial-gradient(55% 90% at 46% 50%, rgba(254,222,225,.09), transparent 72%); }
.ambient__wave--3{ background:radial-gradient(55% 90% at 54% 50%, rgba(196,236,226,.07), transparent 72%); }
.ambient__grain{
  position:absolute; inset:0; opacity:.028; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23gn)' opacity='0.9'/%3E%3C/svg%3E") repeat;
  background-size:180px 180px;
}

/* ============================================================
   CURSOR
   ============================================================ */
/* Cursor „Smiley" (Juli 2026, Carlos): laechelnder :) der beim Klicken zu ;) zwinkert.
   Aeussere .cursor traegt die GSAP-x/y-Position (xPercent/yPercent -50 zentriert),
   .cursor__inner skaliert unabhaengig davon beim Hover ueber Links (is-grow). */
.cursor{
  position:fixed; top:0; left:0; z-index:999; pointer-events:none;
  width:26px; height:26px; color:var(--mint);
  opacity:0; transition:opacity .25s;
}
.cursor.is-active{ opacity:1; }
.cursor__inner{ position:absolute; inset:0; transform-origin:center; transition:transform .22s cubic-bezier(.22,1,.36,1); }
.cursor.is-grow .cursor__inner{ transform:scale(1.55) rotate(-4deg); }
.cursor svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition:opacity .1s; }
.cursor__wink{ opacity:0; }
.cursor.is-wink .cursor__smile{ opacity:0; }
.cursor.is-wink .cursor__wink{ opacity:1; }
@media (pointer:coarse){ .cursor{ display:none; } }

/* ============================================================
   LEGAL (Impressum/Datenschutz)
   ============================================================ */
.legal{ padding-top:clamp(140px,20vh,220px); }
.legal h1{ font-size:clamp(2rem,5vw,3.6rem); font-weight:500; line-height:1.05; margin-bottom:2.5rem; }
.legal-content{ max-width:76ch; color:var(--muted); }
.legal-content p{ margin:.9em 0; }
.legal-content strong{ color:var(--fg); font-weight:500; }
.legal-content a{ color:var(--mint); }
.legal-content h2{
  font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:600; color:var(--fg);
  text-transform:uppercase; letter-spacing:.04em; line-height:1.2;
  margin:3rem 0 1rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal-content h3{
  font-size:1rem; font-weight:500; color:var(--fg);
  margin:1.8em 0 .5em;
}
.legal-content ul{ margin:.9em 0; padding-left:1.3em; }
.legal-content li{ margin:.45em 0; }
/* Abschnitts-Sprungmarken (z. B. #datenschutz) nicht unter der fixen Nav landen lassen */
.legal-content section{ scroll-margin-top:110px; }
.legal h2.legal-part{
  font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:500; line-height:1.05;
  margin:5rem 0 2rem; text-transform:none; border:0; padding:0; color:var(--fg);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .vys-col, .vys-grain, .vys-scrollcue svg{ animation:none !important; }
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
  .journey__stage{ height:auto; }
  .journey__track{ flex-direction:column; }
  .journey__panel{ width:100%; }
}

/* ============================================================
   RENAISSANCE — PAKETE (Drei Stufen. Ein Kreis.)
   Portiert aus Carlos' CI-Entwurf (renaissance-pakete.html), Juli 2026:
   Gold-Palette, Radius 0, data-fade-Reveals, Fonts lokal.
   ============================================================ */
.eyebrow--gold{
  background:linear-gradient(90deg, #F2E7C8, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rp{ border-top:1px solid var(--line); }
.rp__head{ text-align:center; padding-bottom:clamp(46px,7vh,80px); }
.rp__head .eyebrow{ display:block; margin-bottom:24px; }
.rp__title{
  font-weight:600; text-transform:uppercase; letter-spacing:-.02em;
  line-height:1.04; font-size:clamp(2.4rem,6vw,4.6rem);
}
.rp__lede{ margin:26px auto 0; max-width:46ch; color:var(--muted); line-height:1.7; }
.rp__anchor{
  text-align:center; padding:clamp(40px,6vh,66px) var(--pad);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:clamp(56px,9vh,100px);
}
.rp__anchor .eyebrow{ display:block; margin-bottom:20px; }
.rp__sum{
  font-weight:600; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.4vw,2.4rem);
}
.rp__strike{ color:rgba(245,247,246,.38); position:relative; white-space:nowrap; }
.rp__strike::after{
  content:""; position:absolute; left:-2%; right:-2%; top:52%; height:1px;
  background:linear-gradient(90deg, #F2E7C8, #E9C9A8);
}
.rp__note{ margin-top:16px; color:var(--muted); font-size:.95rem; }
.rp__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr); gap:22px; align-items:stretch;   /* minmax(0,…): 1fr darf nicht unter min-content schrumpfen — Karten wurden am Handy angeschnitten */
}
.rp-card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  padding:50px 40px 150px; overflow:hidden; display:flex; flex-direction:column;
}
.rp-card::before{  /* Lebensstrang-Bogen am Kartenfuss */
  content:""; position:absolute; left:50%; bottom:-560px; transform:translateX(-50%);
  width:640px; height:640px; border-radius:50%;
  border:1px solid rgba(238,226,192,.45);
  box-shadow:0 0 40px rgba(240,224,176,.18), 0 0 90px rgba(254,222,225,.08);
  pointer-events:none;
}
.rp-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:130px;
  background:radial-gradient(60% 100% at 50% 100%, rgba(238,226,192,.10), transparent 70%);
  pointer-events:none;
}
.rp-card__step{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  color:rgba(245,247,246,.55); margin-bottom:16px;
}
.rp-card__name{
  font-weight:600; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.9rem,3vw,2.4rem); line-height:1;
}
.rp-card__claim{ margin-top:14px; color:var(--muted); font-size:.98rem; font-weight:400; }
/* Whisper-Price (Juli 2026): der Preis steht geflüstert unter dem starken Claim
   (Premium-Haltung, kein SaaS-Riesenpreis mehr) — Claim führt. */
.rp-card__claim{ margin-top:16px; color:var(--fg); font-size:clamp(1.05rem,1.5vw,1.35rem); font-weight:400; line-height:1.4; }
.rp-card__price{ margin:28px 0 8px; display:flex; align-items:baseline; gap:10px; }
.rp-card__amount{
  font-weight:500; font-size:clamp(1.7rem,2.4vw,2.1rem); letter-spacing:-.01em;
  background:linear-gradient(100deg, #F2E7C8, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rp-card__per{ color:var(--muted); font-size:.9rem; }
.rp-card__terms{ color:rgba(245,247,246,.55); font-size:.78rem; letter-spacing:.06em; }
.rp-card__divider{ height:1px; background:var(--line); margin:28px 0; }
/* Speisekarten-Leader statt An/Aus-Checkliste (Juli 2026, Carlos: „das ist eine Tabelle"):
   Leistung · gepunkteter Gold-Leader · Wert. Kein Punkt-Icon, keine „das kriegst du NICHT"-
   Zeile — nur Zuwachs. Botticelli/Leonardo listen nur ihr Delta (Carry-Satz voran). */
.rp-card__carry{ color:rgba(242,231,200,.85); font-weight:300; font-style:italic; font-size:.92rem; margin-bottom:.9rem; line-height:1.4; }
.rp-menu{ display:flex; flex-direction:column; gap:15px; flex:1; }
.rp-menu__row{ display:flex; align-items:baseline; gap:.6rem; }
.rp-menu__item{ font:500 .9rem/1.3 'Geologica',sans-serif; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.rp-menu__leader{ flex:1; min-width:16px; border-bottom:1px dotted rgba(242,231,200,.30); transform:translateY(-.28em); }
.rp-menu__note{ color:var(--muted); font-weight:300; font-size:.9rem; white-space:nowrap; }
@media (max-width:560px){ .rp-menu__note{ white-space:normal; text-align:right; max-width:52%; } }
.rp-card--hero .rp-menu__leader{ border-bottom-color:rgba(235,210,174,.44); }
.rp-card__value{ margin-top:30px; font-size:.88rem; color:var(--muted); line-height:1.7; }
.rp-card__value em{
  font-style:normal; font-weight:500;
  background:linear-gradient(90deg, #F2E7C8, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rp-card--hero{
  overflow:visible;   /* Badge darf auf der Kante sitzen — der Deko-Bogen wird stattdessen von .rp-card__clip geclippt */
  border:1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(160deg, #F2E7C8, rgba(238,226,192,.15) 45%, #E9C9A8) border-box;
  box-shadow:0 0 80px rgba(240,224,176,.07);
}
/* Der Bogen der Hero-Karte lebt in einer eigenen Clip-Ebene, damit die Karte selbst
   overflow:visible sein kann (Badge auf der Linie, Carlos Juli 2026). */
.rp-card--hero::before{ content:none; }
.rp-card__clip{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rp-card__clip::before{
  content:""; position:absolute; left:50%; bottom:-560px; transform:translateX(-50%);
  width:640px; height:640px; border-radius:50%;
  border:1px solid rgba(238,226,192,.45);
  box-shadow:0 0 40px rgba(240,224,176,.18), 0 0 90px rgba(254,222,225,.08);
}
.rp-card__badge{
  /* sitzt HALB auf der Gold-Linie (translate -50% -50%) — moeglich, weil die
     Hero-Karte overflow:visible ist und der Bogen separat geclippt wird */
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:2;
  background:linear-gradient(100deg, #F2E7C8, #E9C9A8);
  color:#050506; font-weight:500; font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase; padding:9px 18px; white-space:nowrap;
}
.rp-card--hero{ padding-top:58px; }   /* Badge ragt nur noch ~17px hinein */
.rp-card__scarcity{
  display:inline-flex; align-items:center; gap:9px; margin-top:30px;
  color:#FFEDD6; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:400; position:relative; z-index:2;
}
.rp-pulse{
  width:7px; height:7px; border-radius:50%; background:#FFEDD6;
  box-shadow:0 0 12px rgba(255,228,190,.9), 0 0 26px rgba(254,222,225,.5);
  animation:rp-pulse 2.6s ease-in-out infinite;
}
@keyframes rp-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.rp__matrix{ padding-top:clamp(64px,10vh,110px); }
.rp__matrix .eyebrow{ display:block; margin-bottom:18px; }
.rp__matrix-title{
  font-weight:600; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,2.8rem); margin-bottom:44px;
}
.rp__tablewrap{ overflow-x:auto; }
.rp__tablewrap table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:620px; }
.rp__tablewrap th, .rp__tablewrap td{
  padding:18px 14px; border-bottom:1px solid var(--line); text-align:center;
}
.rp__tablewrap th{
  font-weight:500; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.rp__tablewrap th:first-child, .rp__tablewrap td:first-child{ text-align:left; }
.rp__tablewrap td .sub{ display:block; color:rgba(245,247,246,.55); font-size:.78rem; margin-top:4px; font-weight:300; }
.rp__tablewrap td.on{ color:#F2E7C8; font-weight:500; }
.rp__tablewrap td.off{ color:rgba(245,247,246,.5); }
.rp__tablewrap th.hl, .rp__tablewrap td.hl{ background:rgba(238,226,192,.05); }
.rp__tablewrap .kadenz td{ color:var(--muted); }
.rp__tablewrap .kadenz td.on{ color:#F2E7C8; }
.rp__numbers{ padding-top:clamp(64px,10vh,110px); }
.rp__numbers .eyebrow{ display:block; margin-bottom:44px; text-align:center; }
.rp__numgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rp-num{ border:1px solid var(--line); background:var(--panel); padding:40px 32px; }
.rp-num__big{
  font-weight:600; font-size:clamp(2.2rem,4vw,3rem); letter-spacing:-.02em;
  background:linear-gradient(100deg, #F2E7C8, #E9C9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rp-num__label{ margin-top:12px; font-size:.95rem; font-weight:400; }
.rp-num__src{ margin-top:10px; font-size:.76rem; color:rgba(245,247,246,.55); line-height:1.5; }
.rp-cta{ position:relative; overflow:hidden; }
.rp-cta__ring{
  position:absolute; left:50%; bottom:-55%; transform:translateX(-50%);
  width:1100px; height:1100px; border-radius:50%;
  border:1px solid rgba(238,226,192,.45);
  box-shadow:0 0 60px rgba(240,224,176,.2), inset 0 0 120px rgba(254,222,225,.06);
  pointer-events:none;
}
.rp-cta__row{ margin:34px 0 26px; }
.btn--gold{
  border-color:transparent;
  background:linear-gradient(100deg, #F2E7C8, #E9C9A8);
  color:#050506; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:1.1em 2.4em; font-size:.8rem;
}
.btn--gold::before{ display:none; }   /* gefuellter Gold-Button: kein Mint-Wisch */
.btn--gold:hover{ background:linear-gradient(100deg, #F6EEDA, #EBD2AE); color:#050506; border-color:transparent; box-shadow:0 8px 34px -10px rgba(235,201,168,.55); }
/* Renaissance-Kontext: die Outline-Buttons pulsieren in GOLD statt Mint/Rosé */
.rp-cta__fine{
  margin-top:46px; font-size:.74rem; color:rgba(245,247,246,.55);
  line-height:1.8; max-width:560px;
}
@media (max-width:980px){
  .rp__grid{ grid-template-columns:minmax(0,1fr); max-width:560px; margin:0 auto; }
  .rp-card--hero{ order:-1; }
  .rp__numgrid{ grid-template-columns:1fr; }
  .rp-card{ padding:46px 28px 130px; }
  .rp-card--hero{ padding-top:54px; margin-top:34px; }   /* nach .rp-card-Shorthand; margin-top: Badge ragt oben raus */
}
@media (prefers-reduced-motion: reduce){
  .rp-pulse{ animation:none; }
}


/* ===== Fokus-Sichtbarkeit (Tastatur) ===== */
a:focus-visible, button:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.page-ren a:focus-visible, .page-ren button:focus-visible{ outline-color:#EBD2AE; }

/* ===== Gold-Kontext renaissance.html (page-ren): Systemfarben folgen dem Produkt ===== */
.page-ren .kontakt__mail{ color:#EBD2AE; }
.page-ren .kontakt__mail:hover{ color:#F6EEDA; }
/* Renaissance-Kontext: die Outline-Buttons laden in GOLD auf (statt Mint→Rosé) */
.page-ren .btn:not(.btn--gold)::before{ background:linear-gradient(100deg,#F6EEDA 0%,#F1DFC0 50%,#D9A88C 100%); }
.page-ren .btn:not(.btn--gold):hover{ border-color:transparent; color:#050506; box-shadow:0 8px 34px -10px rgba(235,201,168,.5); }

/* ===== Quellen-Zeile unter der Renaissance-Matrix ===== */
.rp__sources{
  margin-top:34px; max-width:76ch;
  font-size:.78rem; line-height:1.6; font-weight:300;
  color:rgba(245,247,246,.55);
}

/* ===== Preis-Schnellweg im Kreis-Intro ===== */
.op__intro-skip{ display:inline-block; margin-top:22px; font-size:.85rem; }

/* ===== Korridor-Artefakte (Crescendo: Logos → Werke → Gesichter → Disziplinen) ===== */
/* ===== Sticky-Cover „Sektionen schieben sich uebereinander" (Test, Juli 2026, Carlos) =====
   Apple-Stil: jede Sektion klebt oben und wird von der naechsten ueberschoben. NUR auf dem
   pin-freien unteren Services-Lauf (#zahlen/#prozess/#studio/#kontakt) — der Journey-Pin und
   die Film-Szenen bleiben unberuehrt. Solider BG deckt die vorherige; weiche Kartenkante
   (Radius + Haarlinie + Schatten) macht das Drueberschieben sichtbar. Spaeter DOM = oben. */
.section--stack{ position:sticky; top:0; background:#050506;
  border-top:1px solid rgba(245,247,246,.08);
  border-top-left-radius:20px; border-top-right-radius:20px;
  box-shadow:0 -30px 70px -30px rgba(0,0,0,.9); }
/* JS (stackTops in main.js) setzt pro Sektion top = min(0, vh - Hoehe):
   ueber-viewport-hohe Sektionen scrollen erst komplett durch, DANN kleben sie —
   sonst waere ihre untere Haelfte unerreichbar (Review-Fund Juli 2026). */
.is-lowgfx .section--stack{ box-shadow:0 -12px 30px -18px rgba(0,0,0,.8); }  /* Safari malt grosse Blur-Schatten auf der CPU */
@media (pointer:coarse){ .section--stack{ position:static !important; box-shadow:none; border-radius:0; } }
@media (prefers-reduced-motion: reduce){ .section--stack{ position:static; box-shadow:none; } }

/* Landing-Team-Reihe „nur die Augen" (Juli 2026, Carlos: GROSS & UNTEREINANDER).
   Finale Interaktion (Carlos „2+3 gemischt"): KEIN Aufklappen mehr — der tighte
   Augen-Crop kann kein ganzes Gesicht zeigen, ganz waere zu gross. Stattdessen
   bleibt die Reihe STATISCH; Hover belebt dezent (heller + leichter Zoom + CI-Rand)
   UND blendet Name+Rolle ein; das ganze Band ist ein Link aufs Team (services). */
.kp-eyes{ display:flex; flex-direction:column; align-items:center; gap:9px;
  max-width:500px; margin:2.2rem auto 0; }   /* kompakter & schmaler (Carlos: „zu gross, nehmen die ganze Seite ein") — kein Vollbreiten-Ausbruch mehr */
.kp-eye{ margin:0; position:relative; display:block; width:100%; text-decoration:none;
  height:clamp(100px,13.5vh,128px); overflow:hidden; cursor:pointer;   /* statisch, kompakt */
  outline:1px solid rgba(245,247,246,.1); outline-offset:-1px;
  transition:outline-color .5s, box-shadow .5s; }
.kp-eye img{ display:block; width:100%; height:100%; object-fit:cover;
  object-position:center 44%;              /* Augenlinie als Anker (Crop-Augen auf 44%) */
  filter:grayscale(1) brightness(.87) contrast(1.12);   /* Standard: s/w, FINAL .87 (Carlos: Mittelweg .80 + 9%); Analog-Kurve+Vignette im Bild eingebrannt */
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .6s; }
.kp-eye:hover img, .kp-eye:focus-visible img{ transform:scale(1.03); filter:grayscale(0) brightness(1.06) saturate(1.05); }  /* Hover/Fokus: Farbe kehrt zurueck = „aufleben" (Tastatur sieht dasselbe wie die Maus) */
.is-lowgfx .kp-eye img{ transition:transform .6s cubic-bezier(.22,1,.36,1); }  /* Filter schaltet hart (Safari-Repaint), Zoom bleibt weich */
/* Grain-Grade auf dem s/w-Zustand (Carlos: „mit grain graden"): dieselbe Turbulence
   wie das globale Korn, hier kraeftiger dosiert — Filmstill statt Foto. Weicht der
   Farbe beim Hover fast vollstaendig (die lebendige Version bleibt clean). */
.kp-eye::after{
  content:""; position:absolute; inset:-60%; z-index:1; pointer-events:none;
  opacity:.13; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E") repeat;
  background-size:170px 170px;
  animation:vysGrain 1.2s steps(6) infinite;
  transition:opacity .6s;
}
.kp-eye:hover::after, .kp-eye:focus-visible::after{ opacity:.04; }
.is-lowgfx .kp-eye::after{ animation:none; }
.kp-eye:hover, .kp-eye:focus-visible{ outline-color:rgba(222,254,234,.42);
  box-shadow:0 0 0 1px rgba(222,254,234,.18), 0 12px 40px -18px rgba(222,254,234,.28); }
/* Name + Rolle: unten ueber weichem Scrim, blenden beim Hover ein */
.kp-eye__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:28px 20px 13px;
  background:linear-gradient(180deg, transparent, rgba(5,5,6,.5) 52%, rgba(5,5,6,.9));
  opacity:0; transform:translateY(10px);
  transition:opacity .4s, transform .45s cubic-bezier(.22,1,.36,1); }
.kp-eye:hover .kp-eye__cap, .kp-eye:focus-visible .kp-eye__cap{ opacity:1; transform:none; }
.kp-eye__cap b{ display:block; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1rem,1.5vw,1.2rem); color:#F5F7F6; }
.kp-eye__cap i{ display:block; margin-top:3px; font-style:normal; font-weight:500;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(222,254,234,.82); }
/* Touch/kein Hover: Farbe + Name+Rolle dauerhaft (kein Hover verfuegbar) */
@media (hover:none){ .kp-eye__cap{ opacity:1; transform:none; } .kp-eye img{ filter:grayscale(0) brightness(1); } }
@media (prefers-reduced-motion:reduce){ .kp-eye, .kp-eye img, .kp-eye__cap{ transition:none; } .kp-eye::after{ animation:none; } }
.kp-disziplinen{
  margin-top:1.9rem; font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(245,247,246,.6);
}
.kp-disziplinen i{ font-style:normal; }
.kp-disziplinen i + i::before{ content:"·"; margin:0 .7em; color:rgba(245,247,246,.35); }

/* ===== Menue-Knopf (Juli 2026, ersetzt „Menü"-Wort + 3-Strich-Burger) =====
   Elegante Pille: 2-Strich-Icon (morpht zu ✕) + Wort, mit eigenem leichten
   Glas-Backing (blutet nie in den Inhalt). Traegt data-mnav-toggle (Lichtpult). */
.nav__menu{
  position:relative; z-index:70;   /* ueber dem Pult (z-60): zum Schliessen klickbar */
  display:inline-flex; align-items:center; gap:9px;
  padding:.6em 1.05em; border-radius:100px; cursor:pointer;
  background:rgba(9,10,12,.66); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(245,247,246,.16); color:var(--fg);
  font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; line-height:1;
  transition:border-color .3s, color .3s, background .3s;
}
.nav__menu:hover{ border-color:rgba(222,254,234,.55); color:#fff; }
.nav__menu-icon{ position:relative; width:16px; height:9px; flex:0 0 auto; }
.nav__menu-icon i{ position:absolute; left:0; width:100%; height:1.5px; border-radius:2px;
  background:currentColor; transition:transform .34s cubic-bezier(.22,1,.36,1); }
.nav__menu-icon i:nth-child(1){ top:0; }
.nav__menu-icon i:nth-child(2){ bottom:0; }
.nav__menu[aria-expanded="true"] .nav__menu-icon i:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-icon i:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }
.nav__menu-txt{ line-height:1; }
.is-lowgfx .nav__menu, .is-lowgfx .nav__cta{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(9,10,12,.85); }
.page-ren .nav__menu, .page-ren .nav__cta{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(9,10,12,.85); }   /* Kreis-Seite: Milchglas ueber pro Frame bewegter Buehne = teuerster Readback */
@media (max-width:520px){ .nav__menu-txt{ display:none; } .nav__menu{ padding:.55em; gap:0; } }
/* Touch: 44px-Trefferflaeche — die elegante kleine Pille bleibt optisch, die
   Klickflaeche waechst unsichtbar (Apple HIG Minimum; Pill war 32x25). */
@media (pointer:coarse){
  .nav__menu::after{ content:""; position:absolute; inset:-11px -8px; border-radius:100px; }
  .nav__cta{ padding-block:.85em; }
}

/* ============================================================
   MENÜ „DAS LICHTPULT" — Fullscreen-Nav (Juli 2026, Carlos' Wahl)
   Regie-Lichtpult: jeder Punkt ein Kanal; Hover fährt den Fader hoch,
   ein Spot zündet + Szenen-Poster leuchtet auf, die anderen dimmen.
   Ein „Menü"-Knopf auf allen Viewports ersetzt die Inline-Links.
   ============================================================ */
/* Positionierung uebernimmt jetzt .nav__actions (rechts) + justify-content:
   space-between am .nav — kein margin-left:auto-Jonglieren mehr noetig. */

body.menu-open{ overflow:hidden; }   /* Touch-Lock: lenis.stop() haelt natives Touch-Scrollen NICHT auf */
.pult{
  position:fixed; inset:0; z-index:60; overflow-x:clip;   /* Kanal-Tags ragten am Handy seitlich raus */
  touch-action:none; overscroll-behavior:contain;   /* Gurt fuer aeltere iOS: Wischen aufs Pult scrollt nicht die Seite dahinter */
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(28px,8vw,130px); background:#060607;
  transform:translateY(101%); transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.pult.is-open{ transform:none; }
/* Spotlight-Kegel + Poster KOMPLETT entfernt (Juli 2026, Review: Markup lud
   ~250 KB tote Poster auf jeder Seite) — nur Kanaele + Fader + Abdimmen. */
/* CTA ausblenden solange das Pult offen ist (Nav z-80 liegt UEBER dem Pult z-60 —
   ein Klick auf den CTA ging sonst ins Leere hinter dem Overlay; Review Juli 2026) */
.menu-open .nav__cta{ opacity:0; pointer-events:none; transition:opacity .25s; }
.pult .ch{ display:flex; align-items:center; gap:clamp(16px,3vw,38px); padding:clamp(7px,1.5vh,15px) 0; text-decoration:none; color:var(--fg); border-bottom:1px solid rgba(245,247,246,.07); transition:opacity .3s; }
.pult .ch:last-of-type{ border-bottom:0; }
.pult.is-hovering .ch:not(:hover){ opacity:.28; }
.pult .ch__meta{ display:flex; align-items:center; gap:14px; min-width:120px; }
.pult .ch__num{ font-size:.72rem; letter-spacing:.28em; color:rgba(245,247,246,.5); font-weight:500; font-variant-numeric:tabular-nums; }
.pult .ch__fader{ position:relative; width:3px; height:44px; background:rgba(245,247,246,.14); }
.pult .ch__fader i{ position:absolute; left:50%; bottom:6%; width:13px; height:7px; transform:translateX(-50%); background:var(--fg); transition:bottom .35s cubic-bezier(.22,1,.36,1), background .3s; }
.pult .ch:hover .ch__fader i{ bottom:78%; background:var(--mint); }
.pult .ch--gold:hover .ch__fader i{ background:#EBD2AE; }
/* Hover-„Aufladen" der Kanal-Buchstaben in CI-Mint→Rosé (Juli 2026, Carlos: „wie die CTAs,
   nur die Buchstaben, kein Kreis") — ersetzt den entfernten Spotlight als Licht-Feedback. */
.pult .ch__name{
  font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(2rem,6vh,3.6rem); line-height:1.12;
  background:linear-gradient(100deg,var(--mint) 0%,#EFFBF3 50%,var(--pink) 100%);
  background-size:220% 100%; background-position:100% 50%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:#F5F7F6; color:transparent;
  transition:letter-spacing .3s, -webkit-text-fill-color .45s ease, background-position .6s cubic-bezier(.22,1,.36,1);
}
.pult .ch:hover .ch__name{ letter-spacing:.035em; -webkit-text-fill-color:transparent; background-position:0% 50%; }
.pult .ch--gold .ch__name{ background:linear-gradient(100deg,#F6EEDA 0%,#F3E4C4 50%,#EBD2AE 100%); background-size:220% 100%; background-position:100% 50%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:#EBD2AE; }
.pult .ch--gold:hover .ch__name{ -webkit-text-fill-color:transparent; background-position:0% 50%; }
@media (prefers-reduced-motion:reduce){ .pult .ch__name{ transition:letter-spacing .3s; } .pult .ch:hover .ch__name, .pult .ch--gold:hover .ch__name{ -webkit-text-fill-color:transparent; background-position:50% 50%; } }
.pult .ch__tag{ margin-left:auto; margin-right:min(36%,470px); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,247,246,0); transition:color .3s; font-weight:500; }
.pult .ch:hover .ch__tag{ color:rgba(245,247,246,.55); }
.pult.blackout .ch{ opacity:0 !important; transition:opacity .12s; }
@media (max-width:720px){
  .pult .ch__tag{ margin-right:0; }
  .pult .ch__name{ font-size:clamp(1.7rem,8vw,2.6rem); }
}
@media (prefers-reduced-motion: reduce){ .pult{ transition:none; } }


/* section-head: unter 920px Notiz UNTER die Headline (vorher standen grosse
   Ueberschrift und rechtsbuendige Notiz auf iPad/Mobile nebeneinander und
   kreuzten sich — „laeuft alles kreuz und quer"). */
@media (max-width:920px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .section-head__note{ text-align:left; padding-bottom:0; }
}


/* „Die sechs Welten" — editoriale Prosa statt Vergleichs-Tabelle (Juli 2026) */
.rp__welten{ max-width:70ch; margin-top:clamp(2.6rem,5vw,4rem); }
.rp__welten-line{
  margin:.7rem 0 1.1rem; font-weight:600; line-height:1.25;
  font-size:clamp(1.3rem,3vw,2.1rem); letter-spacing:.005em;
}
.rp__welten-line .grad-ren{ font-weight:600; }
.rp__welten-copy{
  color:var(--muted); line-height:1.75; font-size:clamp(1rem,1.15vw,1.15rem); margin:0;
}
.rp__welten-copy strong{ color:#F6EEDA; font-weight:500; }

/* lowGfx-Nachzuegler (Launch-Audit Juli 2026) */
.is-lowgfx .op__fact, .is-lowgfx .op__intro{ filter:none !important; }


/* ============================================================
   SHOWREEL-KINO-BAND (Landing #arbeiten, Juli 2026 — Carlos' Entwurf 1)
   Teaser laeuft stumm (nur pointer:fine, IO-gesteuert), Klick oeffnet
   die Ton-Lightbox (.srlb). Touch behaelt Poster + Play.
   ============================================================ */
.showreel{ margin:clamp(3rem,7vh,5.5rem) 0 clamp(2.4rem,5vh,4rem); }
.showreel__band{
  display:block; width:100%; padding:0; border:0; cursor:pointer;
  position:relative; aspect-ratio:21/9; overflow:hidden; background:#000;
  border-radius:0;
}
.showreel__band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px 30px rgba(0,0,0,.55);
}
.showreel__teaser{
  width:100%; height:100%; object-fit:cover; display:block;
}
.showreel__cta{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; z-index:2; white-space:nowrap;
  color:#fff; font-size:.85rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.6); transition:transform .4s var(--ease, ease);
}
.showreel__band:hover .showreel__cta,
.showreel__band:focus-visible .showreel__cta{ transform:translateX(-50%) scale(1.04); }
.showreel__play{
  width:58px; height:58px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.85); display:grid; place-items:center;
  background:rgba(5,5,6,.35); backdrop-filter:blur(6px);
  animation:srPulse 3s ease-in-out infinite;
}
.showreel__play svg{ margin-left:3px; }
@keyframes srPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(222,254,234,.35); }
  50%{ box-shadow:0 0 0 14px rgba(222,254,234,0); }
}
.is-lowgfx .showreel__play{ backdrop-filter:none; background:rgba(5,5,6,.6); }
@media (max-width:700px){
  .showreel__band{ aspect-ratio:16/9; }
  .showreel__cta{ font-size:.75rem; gap:10px; }
  .showreel__play{ width:46px; height:46px; }
}
@media (prefers-reduced-motion: reduce){ .showreel__play{ animation:none; } }

/* Showreel-Lightbox (JS-generiert, showreel() in main.js) */
.srlb{
  position:fixed; inset:0; z-index:120; background:rgba(3,3,4,.96);
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .3s ease; overscroll-behavior:contain;
}
.srlb.on{ opacity:1; pointer-events:auto; }
.srlb video{ width:min(92vw,160vh); aspect-ratio:16/9; background:#000; display:block; }
.srlb__x{
  position:absolute; top:14px; right:16px; width:48px; height:48px;
  font-size:30px; line-height:1; color:#fff; cursor:pointer; background:none; border:0;
}
.srlb__x:hover{ color:var(--mint); }
body.srlb-open{ overflow:hidden; }


/* ============================================================
   FEEDCASE — Nourelle-Phone (services #nourelle, Juli 2026 — Entwurf 2)
   CSS-iPhone mit Story-Feed (4 UGC-Clips + Shop-Slide, echte Produktfotos).
   Engine: phoneFeed() in main.js. Radius-Ausnahme wie die Button-Pille:
   das Geraet ist ein Zitat der echten Welt, kein UI-Element.
   ============================================================ */
.feedcase__duo{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,72px); align-items:center;
}
.feedcase__copy{
  color:var(--muted); line-height:1.75; max-width:46ch;
  font-size:clamp(1rem,1.15vw,1.15rem); margin:1.4rem 0 2rem;
}
.feedcase__stage{ display:flex; justify-content:center; perspective:1200px; }
.phone{
  position:relative; width:min(300px,72vw); aspect-ratio:9/19.2;
  border-radius:44px; padding:12px;
  background:linear-gradient(160deg,#1a1b1e,#0a0b0d 60%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(245,247,246,.14),
             0 0 60px -20px rgba(222,254,234,.18);
  transform:rotateY(-9deg) rotateX(3deg);
  animation:phoneFloat 7s ease-in-out infinite;
}
@keyframes phoneFloat{
  0%,100%{ transform:rotateY(-9deg) rotateX(3deg) translateY(0); }
  50%{ transform:rotateY(-7deg) rotateX(2deg) translateY(-12px); }
}
.phone__screen{ position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#000; }
.phone__screen video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s;
}
.phone__screen video.on{ opacity:1; }
.phone__island{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:34%; height:26px; border-radius:20px; background:#000; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone__ui{
  position:absolute; left:0; right:0; bottom:0; padding:18px 16px 22px; z-index:2;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff; font-size:.72rem;
}
.phone__ui b{ display:block; font-size:.8rem; margin-bottom:2px; }
.phone__dots{ position:absolute; top:60px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
.phone__dots i{
  width:26px; height:3px; border-radius:2px; background:rgba(255,255,255,.28);
  overflow:hidden; position:relative;
}
.phone__dots i.on::after{
  content:""; position:absolute; inset:0; background:#fff;
  animation:storyDot linear forwards; animation-duration:var(--d,8s);
}
@keyframes storyDot{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
.phone__glow{
  position:absolute; inset:-14%; z-index:-1; border-radius:60px;
  background:radial-gradient(55% 45% at 55% 50%, rgba(222,254,234,.14), rgba(254,222,225,.08) 55%, transparent 75%);
  filter:blur(30px);
}
/* Shop-Slide: der Nourelle-Store scrollt einmal durch die Kacheln */
.shopslide{
  position:absolute; inset:0; background:#EFEAE1; opacity:0; transition:opacity .45s;
  z-index:1; overflow:hidden;
}
.shopslide.on{ opacity:1; }
.shopslide__scroll{ position:absolute; left:0; right:0; top:0; padding:64px 14px 20px; }
.shopslide.on .shopslide__scroll{ animation:shopScroll 6.2s ease-in-out forwards; }
.shopslide.is-static .shopslide__scroll{ animation:none; }
@keyframes shopScroll{ 0%,16%{ transform:translateY(0); } 100%{ transform:translateY(-58%); } }
.shopslide__head{
  font-size:.6rem; letter-spacing:.12em; color:#7a746a; text-align:center; margin-bottom:12px;
  font-weight:400;
}
.shopslide__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shopslide__grid figure{ margin:0; }
.shopslide__grid img{
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px;
}
.shopslide__grid b{
  display:block; font-size:.62rem; letter-spacing:.06em; color:#2a2723; margin-top:6px;
  font-weight:600; font-family:Georgia,'Times New Roman',serif;
}
.shopslide__grid i{ font-style:normal; font-size:.58rem; color:#7a746a; }
.is-lowgfx .phone{ animation:none; }
.is-lowgfx .phone__glow{ display:none; }
@media (max-width:860px){
  .feedcase__duo{ grid-template-columns:1fr; gap:48px; }
  .feedcase__stage{ order:2; }
}
@media (prefers-reduced-motion: reduce){
  .phone{ animation:none; transform:none; }
  .phone__dots{ display:none; }
}


/* ============================================================
   FILMSTRIP-VIEWER (Juli 2026, Carlos: „durch Klicken mehr sehen,
   wie ein Filmstreifen — ohne Unterseiten"). JS: filmstrip() in main.js,
   Karten mit data-strip. Perforation liegt AN JEDEM FRAME (scrollt mit).
   ============================================================ */
[data-strip]{ cursor:pointer; }
.work-card__more{
  position:absolute; top:14px; right:14px; z-index:2;
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint); padding:6px 11px; pointer-events:none;
  background:rgba(5,5,6,.55); border:1px solid rgba(222,254,234,.35);
  backdrop-filter:blur(4px);
}
.is-lowgfx .work-card__more{ backdrop-filter:none; background:rgba(5,5,6,.75); }
.work-card figure{ position:relative; }

.fstrip{
  position:fixed; inset:0; z-index:120; background:rgba(4,4,5,.99);
  display:flex; flex-direction:column; opacity:0; pointer-events:none;
  transition:opacity .3s ease; overscroll-behavior:contain;
}
.fstrip.on{ opacity:1; pointer-events:auto; }
.fstrip__bar{
  display:flex; align-items:center; gap:18px;
  padding:clamp(16px,3vh,26px) clamp(18px,4vw,42px) 0;
}
.fstrip__title{
  font-size:.8rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint); margin:0;
}
.fstrip__count{
  color:var(--muted); font-size:.8rem; letter-spacing:.08em; margin:0 0 0 auto;
  font-variant-numeric:tabular-nums;
}
.fstrip__x{
  width:48px; height:48px; font-size:30px; line-height:1; color:#fff;
  cursor:pointer; background:none; border:0; flex:0 0 auto; margin-right:-12px;
}
.fstrip__x:hover{ color:var(--mint); }
.fstrip__track{
  flex:1; display:flex; align-items:center; gap:clamp(18px,3vw,34px);
  overflow-x:auto; overflow-y:hidden; padding:0 clamp(20px,7vw,90px);
  scrollbar-width:none; cursor:grab; touch-action:pan-x;
  overscroll-behavior:contain;
}
.fstrip__track::-webkit-scrollbar{ display:none; }
.fstrip__track.is-drag{ cursor:grabbing; user-select:none; }
.fstrip__frame{
  flex:0 0 auto; margin:0; position:relative; padding:20px 0;
}
/* Perforation: Filmstreifen-Zacken oben + unten am Frame */
.fstrip__frame::before, .fstrip__frame::after{
  content:""; position:absolute; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg,
    rgba(245,247,246,.2) 0 12px, transparent 12px 30px);
}
.fstrip__frame::before{ top:4px; }
.fstrip__frame::after{ bottom:4px; }
.fstrip__frame img, .fstrip__frame video{
  display:block; height:min(58vh,640px); width:auto; max-width:82vw;
  object-fit:contain; background:#000;
  -webkit-user-drag:none; user-select:none;
}
.fstrip__frame figcaption{
  position:absolute; top:100%; left:0; margin-top:10px;
  color:var(--muted); font-size:.85rem; letter-spacing:.02em; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
body.fstrip-open{ overflow:hidden; }
@media (max-width:700px){
  .fstrip__frame img, .fstrip__frame video{ height:min(46vh,480px); }
  .fstrip__frame figcaption{ font-size:.78rem; white-space:normal; }
}


/* ============================================================
   PLATZIERUNGS-RUNDE (Juli 2026, Carlos): Showreel unter „less is less."
   (Manifest), Nourelle-Phone im Landing-#arbeiten VOR dem Triptychon,
   services #buehne = Duett (Reel 16:9 + Phone nebeneinander, Entwurf 3).
   ============================================================ */
/* Landing: Duo im Korridor — linksbuendig, gleiche Buehnenbreite wie kp-works */
.kp-feedcase{
  max-width:1060px; margin:clamp(2.6rem,6vh,4.5rem) auto clamp(3rem,7vh,5rem);
  text-align:left;
}
.feedcase__h{
  font-weight:600; text-transform:uppercase; line-height:1.15;
  font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:.02em;
  margin:.9rem 0 0; text-wrap:balance;
}
/* Duett (services #buehne): Reel links, Phone rechts */
.duett{
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,5vw,56px);
  align-items:center; margin-top:clamp(2.2rem,5vh,3.6rem);
}
.showreel--duett{ margin:0; }
.showreel--duett .showreel__band{ aspect-ratio:16/9; }
.showreel--duett .showreel__cta{ font-size:.75rem; gap:10px; }
.showreel--duett .showreel__play{ width:46px; height:46px; }
.phone--duett{ width:min(240px,60vw); margin:0 auto; }
@media (max-width:860px){
  .duett{ grid-template-columns:1fr; gap:48px; }
}


/* FEEDSTAGE — Nourelle-Buehne (Juli 2026, final: NUR das Phone im Zentrum;
   Satelliten-Fassung verworfen — „lenkt vom Handy ab". BTS haengt als
   .btslink-Trigger unter der Copy und oeffnet gross im Filmstrip-Viewer). */
.feedstage{
  max-width:920px; margin:clamp(2.2rem,5vh,3.6rem) auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,5vw,64px);
  align-items:center; text-align:left;
  padding-block:clamp(1rem,3vh,2rem);
}
.feedstage__phone{ display:flex; justify-content:center; perspective:1200px; }
.feedstage .phone{ position:relative; width:min(320px,74vw); }
@media (max-width:860px){
  .feedstage{ grid-template-columns:1fr; gap:44px; }
  /* Handy: Phone ZUERST, Text darunter (Carlos) */
  .feedstage__text{ order:2; }
}

/* BTS-Trigger: kleine Zeile unter der Case-Copy, Klick = Filmstrip */
.btslink{
  display:inline-flex; align-items:center; gap:10px; margin-top:1.6rem;
  padding:0 0 .35rem; background:none; border:0; border-bottom:1px solid rgba(222,254,234,.35);
  color:var(--mint); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:color .3s, border-color .3s;
}
.btslink:hover{ color:var(--pink); border-color:rgba(254,222,225,.55); }
.btslink__play{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  border:1px solid currentColor; display:grid; place-items:center;
}
.btslink__play svg{ margin-left:1px; }


/* ============================================================
   CONSENT-BANNER (Juli 2026, Meta Pixel — erscheint nur, wenn eine
   Pixel-ID in main.js eingetragen ist und noch keine Wahl gespeichert
   wurde). Beide Buttons bewusst GLEICHWERTIG (DSK-Vorgabe).
   ============================================================ */
.consent{
  position:fixed; left:50%; bottom:clamp(14px,3vh,28px); z-index:110;
  transform:translate(-50%, 24px); opacity:0;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
  width:min(560px, calc(100vw - 32px));
  background:rgba(9,10,12,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(245,247,246,.12);
  padding:clamp(16px,2.4vw,22px) clamp(18px,2.8vw,26px);
}
.consent.is-in{ transform:translate(-50%, 0); opacity:1; }
.consent__txt{
  color:var(--muted); font-size:.9rem; line-height:1.65; margin:0 0 14px;
}
.consent__txt a{ color:var(--mint); text-decoration:underline; text-underline-offset:3px; }
.consent__row{ display:flex; gap:10px; }
.consent__btn{
  flex:1; padding:11px 18px; cursor:pointer;
  background:transparent; color:var(--fg);
  border:1px solid rgba(245,247,246,.28); border-radius:100px;
  font-family:inherit; font-size:.86rem; font-weight:500; letter-spacing:.04em;
  transition:border-color .3s, color .3s;
}
.consent__btn:hover{ border-color:rgba(222,254,234,.55); color:var(--mint); }
.is-lowgfx .consent{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(9,10,12,.97); }
@media (prefers-reduced-motion: reduce){ .consent{ transition:none; } }