/* ============================================================================
   FIANO STUDIOS — Landing Page 2026
   Fluid-Scaling: clamp(), linear interpoliert 390→1440px
     slope = (max-min)*1.5238 [vw] · intercept = min - slope*0.24375 [rem]
   Architektur: fixe Ebenen (.fv-bg z0 + .orbfix z1) hinter transparenter
   Sticky-Hero-Sektion; kein Pinning — sticky + lvh-Runways; Sticky-Bottom-
   Gradient-Ebene hinter transparenten Sektionen. Onepage mit Popups.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#121213;
  --bg-card:#1a1a1b;
  --bg-brand:#1d1d1d;
  --fg:rgba(238,235,229,.95);
  --fg-2:rgba(238,235,229,.66);
  --fg-3:rgba(238,235,229,.4);
  --red:#f6383f;
  --red-deep:#871d25;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --fs-hero:   clamp(2.6rem, calc(7.01vw + .89rem),  7.2rem);
  --fs-counter:clamp(3.8rem, calc(5.64vw + 2.43rem), 7.5rem);
  --fs-display:clamp(1.6rem, calc(2.29vw + 1.04rem), 3.1rem);
  --fs-title:  clamp(1.4rem, calc(1.83vw + .95rem),  2.6rem);
  --fs-lg:     clamp(1.05rem,calc(.69vw  + .88rem),  1.5rem);
  --fs-body:   clamp(.88rem, calc(.27vw  + .81rem),  1.06rem);
  --fs-sm:     clamp(.66rem, calc(.17vw  + .62rem),  .77rem);
  --fs-label:  clamp(.66rem, calc(.21vw  + .61rem),  .8rem);

  --pad-page:  clamp(1.25rem, calc(2.67vw + .6rem),   3rem);
  --pad-sec:   clamp(3.5rem,  calc(8.38vw + 1.46rem), 9rem);
  --gap-1:     clamp(.75rem,  calc(1.14vw + .47rem),  1.5rem);
  --gap-2:     clamp(1.5rem,  calc(2.29vw + .94rem),  3rem);
  --logo-h:    clamp(1.25rem, calc(.38vw  + 1.16rem), 1.5rem);
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.32;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
}
img,video,canvas,svg{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

.u-label{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.2;
}

video::-webkit-media-controls,video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button{
  display:none!important;-webkit-appearance:none!important;opacity:0!important;pointer-events:none!important}

/* ============================================================================
   GRAIN (Original-Rezept Alt-Seite) + VIGNETTE
   ========================================================================== */
.noise{
  position:fixed;inset:0;z-index:210;pointer-events:none; /* über allem, auch Preloader */
  background-image:url('../img/grain-slow.gif');
  background-position:0 0;background-size:auto;
  opacity:.08;
}
.vignette{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(215,210,230,.05),rgba(215,210,230,.03) 20%,transparent 62%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.42) 100%);
}

/* ============================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--gap-2);
  background:var(--bg);overflow:hidden;
  transition:opacity .9s ease,visibility .9s ease;
}
.loader.is-done{opacity:0;visibility:hidden}
/* Orbit-Linien (visioned-Stil): konzentrische feine Kreise, rotieren verschieden schnell */
.loader-orbits{
  position:absolute;left:50%;top:50%;width:150vh;height:150vh;
  transform:translate(-50%,-50%);opacity:.9;
  transition:transform 1s ease,opacity 1s ease;
}
.loader-orbits circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:.7;
  transform-box:fill-box;transform-origin:center}
/* Sichtbar animiert (Nutzer-Vorgabe): Teilbögen rotieren verschieden schnell + Dash-Lauf */
.lo1{stroke-dasharray:24 76;stroke-linecap:round;animation:fhspin 14s linear infinite,lodash 9s linear infinite}
.lo2{stroke-dasharray:58 42;stroke-linecap:round;animation:fhspin 30s linear infinite reverse,lodash 13s linear infinite reverse}
.lo3{stroke-dasharray:2.4 4.8;stroke-linecap:round;animation:fhspin 56s linear infinite,lodash 22s linear infinite}
@keyframes lodash{to{stroke-dashoffset:-100}}
.loader.is-done .loader-orbits{transform:translate(-50%,-50%) scale(1.14);opacity:0}
/* Mobile: Preloader-Ringe sichtbar machen — Container schmaler (die 3 Ringe passen auf den
   schmalen Screen statt weit hinauszuragen = als Kreise erkennbar & größer wirkend), Stroke
   heller + deutlich dicker (bei kleinerem SVG würde .7 auf ~0.36px schrumpfen) (Gary iter41) */
@media(max-width:767px){
  /* Kreise groß via transform:scale (NICHT via width) → das Layout-Element bleibt 100vw breit, der
     position:fixed .loader bekommt KEINE Layout-Überbreite (verhindert iOS-Sidescroll); die Skalierung
     wird von .loader{overflow:hidden} geclippt. Inner-Ring visuell ≈ 0.36×100vw×2.42 ≈ 339px → umschließt
     Zahl+Claim mit Rand (Gary iter42) */
  .loader-orbits{width:100vw;height:100vw;max-width:none;transform:translate(-50%,-50%) scale(2.42)}
  .loader-orbits circle{stroke:rgba(255,255,255,.32);stroke-width:1.4}
  .loader.is-done .loader-orbits{transform:translate(-50%,-50%) scale(2.76)}
}
.loader-num{
  position:relative;z-index:2;
  font-size:clamp(3.4rem,9vw,9rem);font-weight:300;line-height:1;letter-spacing:-.03em;
  color:var(--fg);font-variant-numeric:tabular-nums;
}
.loader-claim{
  position:relative;z-index:2;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);text-align:center;max-width:36ch;line-height:1.6;
}
.loader-claim b{color:var(--fg-2);font-weight:500}

/* ============================================================================
   HEADER — Nav der Alt-Seite: Menu+Burger+Links links · Logo mittig
   ========================================================================== */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:85;
  display:flex;align-items:center;gap:var(--gap-2);
  padding:calc(var(--pad-page)*.62) var(--pad-page) calc(var(--pad-page)*1.2);
  background:linear-gradient(to bottom,rgba(18,18,19,.5),transparent);
  pointer-events:none;
}
.site-head a,.site-head button{pointer-events:auto}
.nav-menu-btn{
  display:flex;align-items:center;gap:.7em;
  font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);
}
.nav-burger{display:flex;flex-direction:column;gap:5px;width:22px}
.nav-burger i{display:block;height:1.5px;background:currentColor;transition:transform .35s ease,opacity .35s ease}
.nav-menu-btn.is-open .nav-burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-menu-btn.is-open .nav-burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav-links{display:flex;align-items:center;gap:calc(var(--gap-1)*1.2);margin-left:auto}
.nav-links button{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);transition:color .25s;
}
.nav-links button:hover{color:var(--fg)}
.head-logo{position:absolute;left:50%;top:calc(var(--pad-page)*.62);transform:translateX(-50%)}
.head-logo img{height:var(--logo-h);width:auto}

/* ---------- Fullscreen-Menü (Alt-Seiten-Stil) ---------- */
.fmenu{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;justify-content:center;gap:calc(var(--gap-2)*1.6);
  padding:calc(var(--pad-page)*3) var(--pad-page) calc(var(--pad-page)*1.4);
  background:rgba(18,18,19,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;
}
.fmenu.is-open{opacity:1;visibility:visible}
.fmenu-list{list-style:none;display:flex;flex-direction:column;gap:calc(var(--gap-1)*.9)}
.fmenu-list button,.fmenu-list a{
  display:flex;align-items:baseline;gap:1em;
  font-size:var(--fs-display);font-weight:300;letter-spacing:-.02em;line-height:1.1;
  color:var(--fg-2);transition:color .25s,transform .3s;
}
.fmenu-list button:hover,.fmenu-list a:hover{color:var(--fg);transform:translateX(.3em)}
.fmenu-list button:hover span,.fmenu-list a:hover span{color:var(--red)}
.fmenu-list em{
  font-style:normal;font-size:var(--fs-sm);letter-spacing:.14em;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}
.fmenu-foot{
  display:flex;flex-wrap:wrap;gap:var(--gap-2);align-items:flex-end;justify-content:space-between;
  font-size:var(--fs-sm);letter-spacing:.05em;color:var(--fg-2);line-height:2;
}
.fmenu-contact{display:flex;flex-direction:column}
.fmenu-contact b{color:var(--fg);font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.fmenu-social{display:flex;gap:1.4em}
.fmenu-social a:hover{color:var(--fg)}
.fmenu-lang{display:flex;gap:1.2em}

/* ---------- Sprachwahl DE/EN/IT — vertikal rechts (Alt-Seite) ---------- */
.fi-lang{
  position:fixed;right:max(15px,1.04vw);top:50%;transform:translateY(-50%);z-index:105;
  display:flex;flex-direction:column;gap:max(12px,.83vw);align-items:center;
  mix-blend-mode:difference;pointer-events:auto;
}
.fi-lang-btn{
  color:rgba(255,255,255,.5);font-size:max(12px,.8vw);line-height:1;
  letter-spacing:.12em;text-transform:uppercase;font-weight:400;transition:color .25s;
}
.fi-lang-btn:hover{color:#fff}
.fi-lang-btn.is-active{color:#fff;pointer-events:none}
.fi-lang-btn.is-active::after{
  content:"";display:block;height:max(1.5px,.1vw);width:100%;background:var(--red);
  margin:max(3px,.2vw) auto 0;
}
.fmenu .fi-lang-btn{mix-blend-mode:normal}

/* ---------- Sound-Toggle (Alt-Seite) ---------- */
.bgm-toggle{
  position:fixed;z-index:91;right:15vw;bottom:calc(var(--pad-page)*.8);
  display:flex;align-items:center;gap:max(7px,.62vw);
  /* Landing-Zustand: Text exakt wie „BACK TO TOP" (.ui-back) — gleiche Größe/Spacing/Blend */
  color:#fff;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  mix-blend-mode:difference;border-radius:100px;
  transition:background .35s,border-color .35s;
}
.bgm-toggle .bgm-bars{display:none;align-items:center;gap:2px;height:max(12px,1.04vw)}
.bgm-bars i{width:2px;height:4px;background:#fff;border-radius:2px;transition:height .25s}
.bgm-toggle.is-playing .bgm-bars i{animation:bgmbar 1s ease-in-out infinite}
.bgm-toggle.is-playing .bgm-bars i:nth-child(2){animation-delay:.18s}
.bgm-toggle.is-playing .bgm-bars i:nth-child(3){animation-delay:.4s}
.bgm-toggle.is-playing .bgm-bars i:nth-child(4){animation-delay:.12s}
@keyframes bgmbar{0%,100%{height:3px}50%{height:max(11px,.95vw)}}
.bgm-toggle.is-scrolled{
  right:auto;left:50%;bottom:calc(var(--pad-page)*.7);transform:translateX(-50%);
  height:max(30px,2.35vw);padding:0 max(14px,1.1vw) 0 max(11px,.9vw);
  border:1px solid rgba(255,255,255,.18);background:rgba(18,18,18,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:max(10px,.78vw);letter-spacing:.16em;mix-blend-mode:normal;
}
.bgm-toggle.is-scrolled .bgm-bars{display:flex}
.bgm-toggle.is-scrolled:hover{background:rgba(246,56,63,.32);border-color:rgba(246,56,63,.55)}

/* ============================================================================
   FIXED UI — SCROLL % / BACK TO TOP
   ========================================================================== */
.ui-scroll,.ui-back{
  position:fixed;bottom:calc(var(--pad-page)*.8);z-index:81;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;
}
.ui-scroll{left:var(--pad-page);pointer-events:none;font-variant-numeric:tabular-nums}
.ui-back{right:var(--pad-page)}
.ui-back:hover{opacity:.7}

/* ============================================================================
   FIXE HINTERGRUND-EBENEN
   ========================================================================== */
.fv-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;will-change:opacity;background:transparent}
.fv-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s ease;filter:grayscale(1) brightness(.72) contrast(1.06);
}
.fv-vid.is-on{opacity:1}
.fv-vid{filter:grayscale(1) brightness(.6) contrast(1.06)}
.fv-shade{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(18,18,19,.3) 12%,rgba(18,18,19,.55) 46%,rgba(18,18,19,.97) 100%);
}
.orbfix{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;will-change:opacity;
}
.fh-orb-scale{position:relative;width:min(115vh,1320px);height:min(115vh,1320px);display:flex;align-items:center;justify-content:center;will-change:transform}
.fh-orb-gl{width:min(92vh,1200px);aspect-ratio:1396/1127;opacity:0;will-change:opacity,filter;pointer-events:auto;filter:drop-shadow(0 0 20px rgba(246,56,63,.26))}
.fh-orb-static{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vh,1200px);aspect-ratio:1396/1127;
  background:url('../img/hero-orb-fiano-liquid.png') center/contain no-repeat;
  opacity:0;will-change:opacity;display:none;
}
.fh-orb-blur{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vh,1200px);aspect-ratio:1396/1127;
  background:url('../img/hero-orb-fiano-liquid-blur-v6.png') center/contain no-repeat;
  opacity:0;will-change:opacity;
}
/* Lite-Modus (Touch ODER ≤991px, wie Alt-Seite): PNG statt WebGL */
html.f-lite .fh-orb-gl{display:none}
html.f-lite .fh-orb-static{display:block}

/* ============================================================================
   HERO = KATEGORIE-SEKTION
   ========================================================================== */
.hero-run{position:relative;height:480vh;height:480lvh;z-index:2}
.hero{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip;background:transparent}
/* TEST: Hero-Hintergrundvideo als FIXE Ebene (z0) HINTER Kreisen/Orb (z1), über Kategorie-Videos.
   Blendet beim Scrollen aus (cats.js) → Kategorie-Videos werden sichtbar; roter Kreis liegt darüber. */
.hero-bgvid-layer{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:opacity}
.hero-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5) contrast(1.08)}
/* KREISFÖRMIGE Vignette nur bei Scroll 0 (liegt in der Video-Ebene → blendet beim Scrollen mit
   aus, daher „nur ganz oben"). Noch dunkler (Nutzer-Vorgabe) + zusätzlich am oberen Rand
   abgedunkelt (linearer Top-Gradient, schmilzt bis 34% ins Video → Gesichter bleiben sichtbar). */
.hero-bgvid-shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(3,3,4,.66) 0%,
      rgba(4,4,5,.30) 15%,
      rgba(4,4,5,0) 34%),
    radial-gradient(circle at 50% 44%,
      rgba(8,8,9,.16) 8%,
      rgba(7,7,8,.46) 40%,
      rgba(4,4,5,.82) 72%,
      rgba(2,2,3,1) 100%)}
/* Hero-Titel wie Kapitel-Titel, aber EINZEILIG (Nutzer-Vorgabe, wie „The Agency"):
   white-space:nowrap + auf die längste Sprache passende vw-Größe. Mobile bricht um. */
.hero-grid .ch-mid h1{
  font-size:var(--fs-counter);font-weight:300;line-height:1.02;letter-spacing:-.025em;
  max-width:none;white-space:nowrap;color:var(--fg);text-shadow:0 2px 22px rgba(0,0,0,.5);
}
@media(max-width:991px){
  .hero-grid .ch-mid h1{white-space:normal;font-size:var(--fs-hero)}
}
/* Hero im Kapitel-Layout (wie Agentur/Leistungen): Achse+Punkt oben, Titel+Sub mittig,
   Text rechts, Achse unten. Füllt den Hero, damit die 1fr/auto/1fr-Zeilen greifen. */
.hero-claim{
  position:absolute;inset:0;z-index:6;
  will-change:opacity,transform;
}
.hero-grid{gap:clamp(1.4rem,2.6vw,2.6rem)}
/* Roter Verlauf unten→oben (Werte der Alt-Seite) */
.fh-redbottom{
  position:absolute;left:0;right:0;bottom:0;height:48%;z-index:3;pointer-events:none;
  /* Rot beginnt bündig am unteren Rand (0% = Peak, kein transparenter Abstand); oberer Verlauf unverändert */
  background:linear-gradient(to top,rgba(246,56,63,.15) 0%,rgba(246,56,63,.15) 26%,rgba(246,56,63,.05) 60%,transparent 100%);
}
.fh-redglow{
  position:absolute;left:-8vw;bottom:0;width:66vw;height:60vh;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 26% 64%,rgba(246,56,63,.20) 0%,rgba(246,56,63,.10) 34%,rgba(246,56,63,.04) 56%,transparent 72%);
}
/* Alles in Weiß, Drop-Shadow nach hinten für Lesbarkeit */
.hero-claim h1{
  font-size:var(--fs-hero);font-weight:300;line-height:1.02;letter-spacing:-.035em;
  max-width:15ch;text-wrap:balance;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6),0 10px 34px rgba(0,0,0,.55);
}
.hero-claim h1 .hl{color:#fff;font-weight:400}
.hero-kicker{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  text-shadow:0 1px 4px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.5);
}
/* Hero-Kapitel-Texte: Sub + Copy erben die Kapitel-Styles (.chapter-sub/.chapter-copy),
   nur die Lesbarkeit über dem Video absichern (Schatten). */
.hero-grid .chapter-sub{color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-grid .chapter-copy{color:rgba(238,235,229,.82);text-shadow:0 1px 8px rgba(0,0,0,.65)}
.hero-grid .chapter-copy b{color:#fff}
@keyframes fhspin{to{transform:rotate(360deg)}}
@keyframes fhdash{to{stroke-dashoffset:-100}}
/* ---- RING-EBENE: fix (scrollt nie), konzentrisch via grid-stack ---- */
.hero-fx{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;will-change:opacity;color:#fff}
/* Sidescroll-Fix (Gary iter43): Orb (~140vw) + HUD-Ringe ragen über den Viewport; ihre fixed-Container
   haben overflow:visible → auf iOS (kein Scrollbar) horizontaler Überlauf, den body{overflow-x:clip} bei
   fixed-Elementen NICHT erwischt. Horizontal clippen (off-screen Teile sind eh unsichtbar; vertikal bleibt).
   Nur Mobile — Desktop-Orb ist min(140vw,760px)=760px < Viewport, ragt nicht raus. */
@media(max-width:991px){ .orbfix,.hero-fx{overflow-x:clip} }
.ring-stack{position:absolute;inset:0;display:grid;place-items:center;place-content:center}
.ring-stack>*{grid-area:1/1}
.ring-big,.ring-hud{width:min(110vh,1360px);height:min(110vh,1360px)}
/* Große Hintergrundkreise (weiß + roter Außenkreis) — skalieren beim Scrollen (JS) */
.ring-big{position:relative;will-change:transform}
.ring-white,.ring-red{position:absolute;inset:0;width:100%;height:100%}
/* Hero: Der große rote Außenkreis ganz oben ist AUS (Nutzer-Vorgabe: „roten Kreis ganz oben
   entfernen, die anderen Kreise bleiben alle") — beim Scrollen bleibt nur der HUD-Ring um den Orb.
   Die weißen konzentrischen Kreise sind ebenfalls aus. */
.ring-white{display:none}
.ring-white circle{fill:none;stroke:#fff;stroke-width:.6}
.ring-red{display:none;overflow:visible;animation:fhspin 170s linear infinite reverse}
.ring-red circle{
  fill:none;stroke:var(--red);stroke-width:1.8;stroke-dasharray:30 20;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(246,56,63,.55));animation:fhdash 22s linear infinite;
}
/* HUD: dünner WEISSER Progress-Ring + Ticks + Punkt (auf dem roten Kreis) + Strich + Label.
   Nur EIN roter Kreis (der Außenkreis) — Progress ist weiß. Blendet beim Scrollen ein (JS). */
.ring-hud{position:relative;opacity:0;will-change:opacity}
.rh-svg{width:100%;height:100%;transform:rotate(-90deg)}
/* Um den Orb (beim Scrollen): INNEN weißer Ring, AUSSEN roter Ring mit Progress.
   Innere Animation exakt wie Alt-Seite: solider Ring (fh-ring) + fein gestrichelter Ring,
   der LANGSAM (70s) rotiert (fh-ring::before). */
.rh-inner{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.2}
.rh-innerdash{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:3 6;transform-box:fill-box;transform-origin:center;animation:fhspin 70s linear infinite}
.rh-track{fill:none;stroke:rgba(246,56,63,.22);stroke-width:1.6}
.rh-prog{fill:none;stroke:var(--red);stroke-width:2.6;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(246,56,63,.5))}
.rh-ticks circle{fill:rgba(255,255,255,.4)}
.rh-dot{position:absolute;right:0;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;
  transform:translate(50%,-50%);box-shadow:0 0 7px rgba(255,255,255,.7)}
.rh-line{position:absolute;left:100%;top:50%;width:min(4vw,58px);height:1px;background:rgba(255,255,255,.45);transform:translateY(-50%)}
.rh-label{position:absolute;left:calc(100% + min(4vw,58px) + .8vw);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.5vw;white-space:nowrap;line-height:1.2}
.fv-name{font-size:max(15px,1.2vw);font-weight:400;letter-spacing:.02em}
.fv-idx{font-size:max(9px,.66vw);letter-spacing:.14em;opacity:.55;text-transform:uppercase}
.fv-time{font-size:max(10px,.74vw);letter-spacing:.12em;opacity:.8;font-variant-numeric:tabular-nums}
/* Idle-Zustand nach Sektionsende */
@keyframes fvspin{from{transform:rotate(-90deg)}to{transform:rotate(-450deg)}}
.hero-fx.fv-anim .rh-svg{animation:fvspin 72s linear infinite}
.hero-fx.fv-anim .rh-prog{stroke-width:1.4;stroke-dasharray:18 14;stroke:rgba(255,255,255,.7);animation:fhdash 14s linear infinite}
/* ---- FILM-STRIP (Hero links): vertikaler 35mm-Kategorie-Umschalter — NUR Desktop.
   VOLLE Höhe (bis an die Ränder). Endlos-Reel: die 4 Kategorien laufen dauerhaft von
   oben nach unten durch (cats.js klont die Sets, zweite Hälfte = exakte Kopie → der
   -50%→0-Loop ist nahtlos). Glitch: Jitter-Ebene (Ruckler/Skew/Filter-Pops) + RGB-
   Split-Balken + Scanlines + Bild-Flicker. Hover pausiert das Reel (zum Klicken).
   Sichtbarkeit/Scroll-Fade steuert cats.js (opacity/transform). ---- */
.film-strip{display:none}
.hero-logos{display:none}   /* Hero-Firmen-Marquee: nur Mobile (unten), sonst aus */
.hero-wave{display:none}    /* animierte Audio-Wave über dem Hero-Marquee (nur Mobile) */
@keyframes hwave{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(1)}}
@media (min-width:992px) and (pointer:fine){
  .film-strip{
    display:block;position:fixed;left:1.1vw;top:0;bottom:0;z-index:10;
    pointer-events:none;will-change:opacity,transform;
  }
  .fs-track{
    position:relative;height:100%;width:16.4vw;overflow:hidden;
    background:rgba(9,9,10,.72);
    border-left:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09);
    box-shadow:0 0 4.5vh rgba(0,0,0,.5);
    pointer-events:auto;
  }
  /* Scanlines: feine Zeilen, wandern langsam (Analog-Textur) */
  .fs-track::before{
    content:'';position:absolute;left:0;right:0;top:-24%;bottom:-24%;z-index:4;pointer-events:none;opacity:.055;
    background:repeating-linear-gradient(to bottom,rgba(255,255,255,.9) 0 1px,transparent 1px 3px);
    animation:fsscan 8s linear infinite;
  }
  /* RGB-Split-Balken: blitzen im Glitch-Takt kurz auf (synchron zu fsjit, 7.3s) */
  .fs-track::after{
    content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:
      linear-gradient(to bottom,
        transparent 11%,rgba(246,56,63,.5) 11.2%,rgba(246,56,63,.5) 12.6%,transparent 12.8%,
        transparent 45%,rgba(185,205,220,.38) 45.2%,rgba(185,205,220,.38) 46.1%,transparent 46.3%,
        transparent 71%,rgba(246,56,63,.42) 71.3%,rgba(246,56,63,.42) 72.2%,transparent 72.4%);
    animation:fsrgb 7.3s steps(1,end) infinite;
  }
  /* Jitter-Ebene: ruckt/verzerrt den GANZEN Streifen (inkl. Perforation) im Glitch-Takt */
  .fs-jitter{position:absolute;inset:0;animation:fsjit 7.3s steps(1,end) infinite;will-change:transform,filter}
  /* Endlos-Reel (cats.js setzt is-roll + animationDuration nach dem Klonen) */
  .fs-reel{position:relative;padding:0 2.4vw;will-change:transform}
  .fs-reel.is-roll{animation:fsroll 55s linear infinite}
  .fs-track:hover .fs-reel{animation-play-state:paused}   /* zum Klicken anhalten */
  .fs-set{display:flex;flex-direction:column;align-items:center}
  /* Perforation (Lochreihen) links + rechts wie 35mm-Film — über den Frames */
  .fs-holes{
    position:absolute;top:0;bottom:0;width:.9vw;pointer-events:none;z-index:3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='17'%3E%3Crect x='1.4' y='4.8' width='7.2' height='7.4' rx='1.8' fill='%23e6e3dd' fill-opacity='.55'/%3E%3C/svg%3E");
    background-repeat:repeat-y;background-position:center top;background-size:.9vw 1.53vw;
  }
  .fs-holes-l{left:.68vw}
  .fs-holes-r{right:.68vw}
  .fs-frame{
    position:relative;flex:none;display:block;width:11.6vw;height:10.3vw;padding:0;margin:0 0 .7vw;
    /* 10.3vw = doppelte Höhe der vorigen Frames (2 × 7.7vw·⅔) — bewusst fast quadratisch */
    border:1px solid rgba(255,255,255,.14);border-radius:.14vw;background:#0a0a0b;overflow:hidden;
    cursor:pointer;color:#fff;font-family:inherit;
    transition:transform .5s cubic-bezier(.23,.65,.32,1),border-color .35s ease,box-shadow .35s ease;
  }
  .fs-frame img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(1) brightness(.5) contrast(1.06);transform:scale(1.03);
    transition:filter .5s ease,transform .8s cubic-bezier(.23,.65,.32,1);
    animation:fsflick 3.6s steps(1,end) infinite;
  }
  /* Flicker pro Kategorie desynchronisiert (verschiedene Dauer/Phase) */
  .fs-frame:nth-child(2) img{animation-duration:4.3s;animation-delay:-1.7s}
  .fs-frame:nth-child(3) img{animation-duration:3.1s;animation-delay:-.9s}
  .fs-frame:nth-child(4) img{animation-duration:4.9s;animation-delay:-2.6s}
  .fs-frame::before{content:'';position:absolute;left:0;right:0;bottom:0;height:36%;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.78),transparent)}
  .fs-frame:hover{transform:translateX(.4vw);border-color:rgba(255,255,255,.32)}
  .fs-frame:hover img{filter:grayscale(1) brightness(.74);transform:scale(1.07)}
  .fs-frame.is-active{border-color:rgba(246,56,63,.85);box-shadow:0 0 1.5vw rgba(246,56,63,.32)}
  .fs-frame.is-active img{filter:grayscale(.25) brightness(.8)}
  .fs-frame.is-active::after{content:'';position:absolute;top:.55vw;right:.55vw;width:.45vw;height:.45vw;z-index:2;
    border-radius:50%;background:var(--red);box-shadow:0 0 .5vw rgba(246,56,63,.9);
    animation:fsblink 1.5s ease-in-out infinite}
  .fs-meta{position:absolute;left:.6vw;right:.55vw;bottom:.5vw;z-index:2;display:flex;align-items:baseline;gap:.45vw;pointer-events:none}
  .fs-idx{font-size:.62vw;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
  /* Kategorie-Titel bewusst GRAU (zurückhaltend, nicht dominant) — bei Hover/aktiv leicht heller */
  .fs-name{font-size:.72vw;font-weight:500;font-style:normal;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.48);text-shadow:0 1px 6px rgba(0,0,0,.7);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s ease}
  .fs-frame:hover .fs-name,.fs-frame.is-active .fs-name{color:rgba(255,255,255,.68)}
}
@keyframes fsblink{50%{opacity:.3}}
/* Reel läuft von OBEN nach UNTEN: -50% → 0 (zweite Hälfte = Kopie der ersten → nahtlos) */
@keyframes fsroll{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes fsscan{to{transform:translateY(24%)}}
@keyframes fsjit{
  0%,100%{transform:none;filter:none}
  9%{transform:none;filter:none}
  9.3%{transform:translate(.14vw,-.2vh) skewX(-1deg);filter:brightness(1.22) contrast(1.1)}
  9.9%{transform:none;filter:none}
  27%{transform:none;filter:none}
  27.3%{transform:translateX(-.16vw);filter:brightness(.88) contrast(1.2) saturate(1.3)}
  27.7%{transform:translateX(.1vw) skewX(.7deg);filter:none}
  28.1%{transform:none;filter:none}
  56%{transform:none;filter:none}
  56.3%{transform:translate(-.12vw,.25vh);filter:brightness(1.3)}
  56.8%{transform:none;filter:none}
  81%{transform:none;filter:none}
  81.3%{transform:translateX(.18vw) skewX(-1.4deg);filter:hue-rotate(-14deg) brightness(1.12)}
  81.9%{transform:none;filter:none}
}
@keyframes fsrgb{
  0%,9%,10%,27%,28.2%,56%,57%,81%,82%,100%{opacity:0;transform:none}
  9.3%{opacity:1;transform:translateX(-.2vw)}
  27.3%{opacity:.85;transform:translateX(.25vw)}
  56.3%{opacity:1;transform:translateX(.15vw)}
  81.3%{opacity:.9;transform:translateX(-.3vw)}
}
@keyframes fsflick{
  0%,100%{opacity:1}
  7%{opacity:.84}8%{opacity:1}
  23%{opacity:.93}24%{opacity:1}
  41%{opacity:.72}42.5%{opacity:.97}
  63%{opacity:.88}64%{opacity:1}
  86%{opacity:.8}87%{opacity:1}
}
/* ---- FILM-STRIP auf Tablet/Mobile: HORIZONTAL unten, läuft von links nach rechts
   (Nutzer-Vorgabe). Gleiche Logik/Keyframes; cats.js klont hier nach BREITE. ---- */
@media (max-width:991px), (min-width:992px) and (pointer:coarse){
  .film-strip{display:none;position:fixed;left:0;right:0;top:auto;bottom:calc(env(safe-area-inset-bottom, 0px) + 62px);z-index:10;pointer-events:none;will-change:opacity,transform}  /* Film-Strip auf Mobile ausgeblendet (Gary); Positionswerte bleiben für evtl. Reaktivierung */
  .fs-track{
    position:relative;width:100%;height:clamp(116px,32vw,165px);overflow:hidden;
    background:rgba(9,9,10,.3);   /* transparenter Balken → Hero-Hintergrund scheint durch (Gary: weniger klobig) */
    border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);
    pointer-events:auto;
  }
  .fs-jitter{position:absolute;inset:0;animation:fsjit 7.3s steps(1,end) infinite}
  .fs-reel{position:relative;display:flex;align-items:center;height:100%;width:max-content;padding:0 0 0 8px}
  .fs-reel.is-roll{animation:fsrollh 55s linear infinite}
  .fs-set{display:flex;flex-direction:row;align-items:center;flex:none}
  .fs-holes{
    position:absolute;left:0;right:0;width:auto;height:6px;pointer-events:none;z-index:3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10'%3E%3Crect x='4.8' y='1.4' width='7.4' height='7.2' rx='1.8' fill='%23e6e3dd' fill-opacity='.55'/%3E%3C/svg%3E");
    background-repeat:repeat-x;background-position:left center;background-size:10.2px 6px;
  }
  .fs-holes-l{top:4px;bottom:auto}
  .fs-holes-r{bottom:4px;top:auto}
  .fs-frame{
    position:relative;flex:none;display:block;width:clamp(122px,34vw,176px);height:clamp(86px,24vw,124px);
    padding:0;margin:0 8px 0 0;border:1px solid rgba(255,255,255,.12);border-radius:2px;
    background:rgba(10,10,11,.4);opacity:.9;overflow:hidden;color:#fff;font-family:inherit;   /* Frames dezent durchscheinend */
  }
  .fs-frame img{width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(1) brightness(.5) contrast(1.06);animation:fsflick 3.6s steps(1,end) infinite}
  .fs-frame::before{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.78),transparent)}
  .fs-frame.is-active{border-color:rgba(246,56,63,.85)}
  .fs-frame.is-active::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;z-index:2;
    border-radius:50%;background:var(--red);animation:fsblink 1.5s ease-in-out infinite}
  .fs-meta{position:absolute;left:7px;right:6px;bottom:6px;z-index:2;display:flex;align-items:baseline;gap:5px;pointer-events:none}
  .fs-idx{font-size:8px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
  .fs-name{font-size:9px;font-weight:500;font-style:normal;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(255,255,255,.48);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Kategorie-Balken + Mobile-HUD rutschen über den Strip */
  .hero-fx .fh-catbar{left:24px;bottom:calc(clamp(116px,32vw,165px) + 18px)}
  .hero-fx .hud-live{bottom:calc(clamp(116px,32vw,165px) + 52px)}
}
/* Horizontaler Endlos-Lauf: von links nach rechts (zweite Hälfte = Kopie → nahtlos) */
@keyframes fsrollh{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.fh-catbar{display:none;position:absolute;left:24px;right:24px;bottom:11.5%;z-index:6;pointer-events:none}
.fh-catbar-track{position:relative;width:100%;height:2px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
.fh-catbar-fill{
  position:absolute;left:0;top:0;bottom:0;width:25%;background:var(--red);
  box-shadow:0 0 8px rgba(246,56,63,.7);transition:width .8s cubic-bezier(.4,0,.2,1);border-radius:2px;
}
.hud-live{display:none;position:absolute;left:24px;right:24px;bottom:calc(11.5% + 34px);z-index:6;pointer-events:none;
  color:rgba(255,255,255,.5);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.95}
.hud-live b{color:#fff;font-weight:400;font-variant-numeric:tabular-nums}

/* ============================================================================
   KUNDENLOGOS
   ========================================================================== */
.logos-sec{
  position:relative;z-index:2;
  min-height:100vh;min-height:100lvh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--pad-sec)*1.6) 0 calc(var(--pad-sec)*.8);
  gap:calc(var(--gap-2)*1.3);
}
.logos-rows{display:flex;flex-direction:column;gap:calc(var(--gap-2)*1.3)}
.logos-mq{
  overflow:hidden;padding:6px 0; /* Luft, damit nichts vertikal anschneidet */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 80%,transparent 100%);
}
.logos-track{display:flex;align-items:center;width:max-content;animation:mq 42s linear infinite;will-change:transform}
.logos-mq.is-rev .logos-track{animation-direction:reverse}
.logos-track img{height:clamp(17px,1.7vw,25px);width:auto;flex:none;opacity:.9;margin-right:clamp(44px,6.5vw,100px)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================================
   PERSISTENTER GRADIENT-HINTERGRUND
   ========================================================================== */
/* FIXE, immer sichtbare Hintergrund-Ebene (robuster als der Sticky-Trick).
   memorial-artig: dunkle getönte Basis + weicher Glow + Sterne + Vignette — in ROT. */
.bg-hold{position:fixed;inset:0;z-index:-3;pointer-events:none}
.bg-hold-inner{position:absolute;inset:0;overflow:hidden;background:#121213}
.bg-grad{display:none}
/* Hauptinhalt: neutraler dunkler Grau-Hintergrund, nur ein Hauch Rot ganz unten
   (Hero, Kundenstimmen, Footer haben ihr eigenes Rot und sind davon unberührt) */
.bg-smooth{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 122%,rgba(246,56,63,.08) 0%,rgba(120,26,33,.03) 34%,transparent 62%),
    linear-gradient(180deg,#121213 0%,#141416 52%,#161517 100%);
}
.bg-stars{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26}
.bg-redglow{display:none}
/* Vignette wie memorial vignette-overlay: sanfter Licht-Hotspot + weiche dunkle Ränder */
.bg-vig{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 44% at 50% 44%,rgba(255,222,216,.05),rgba(255,222,216,.03) 22%,transparent 60%),
    radial-gradient(ellipse at 50% 50%,transparent 44%,rgba(0,0,0,.52) 100%);
}

/* ============================================================================
   STATEMENT — linksbündig, Text-Highlight beim Scrollen (Alt-Seiten-Stil)
   ========================================================================== */
.statement{
  position:relative;z-index:2;
  min-height:110vh;min-height:110lvh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:calc(var(--gap-2)*1.4);
  padding:calc(var(--pad-sec)*.5) var(--pad-page);
}
.statement-text{
  max-width:24ch;margin:0 auto; /* Block mittig — gleicher Abstand links/rechts */
  font-size:clamp(1.9rem,calc(3.2vw + 1.12rem),4rem);font-weight:300;line-height:1.16;letter-spacing:-.02em;
  text-align:center;   /* zentriert (Nutzer-Vorgabe) */
}
.statement-text .w{display:inline-block;white-space:pre}
.statement .tl-axis{align-self:center}
.tl-axis{display:flex;flex-direction:column;align-items:center;flex:none}
.tl-dot{width:4px;height:4px;border-radius:50%;background:var(--fg);flex:none;position:relative}
.tl-dot::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--fg);
  filter:blur(5px);opacity:.8;
}
.tl-line{width:1px;height:clamp(60px,12vh,130px);height:clamp(60px,12lvh,130px);background:linear-gradient(to bottom,var(--fg-3),transparent)}
.tl-line.up{background:linear-gradient(to top,var(--fg-3),transparent)}

/* ============================================================================
   KAPITEL (Election-Stil): BG-Foto + Leitlinie + Titel mitte + Text rechts
   ========================================================================== */
.agentur-run,.lst-run{position:relative;height:260vh;height:260lvh;z-index:2}   /* länger → Kapitel-Text steht länger + driftet deutlich langsamer nach oben raus (Gary iter40) */
.lst-run{margin-top:-50vh;margin-top:-50lvh}   /* Services überlappt den Partner-Auslauf → Services-Kopf kommt von unten rein, während Partner noch oben rausdriftet (Gary: keine 100vh Leere) */
/* ---- MOBILE (≤991): Kapitel-Szene KOMPAKT (Gary iter41): kürzere Runways + starke Überlappung
   → beim Übergang ist immer Text im Viewport (der eine oben raus, der nächste schon unten rein),
   Odometer hochgezogen, kurzer Auslauf. Desktop (260lvh / -70lvh) bleibt im min-width:992-Block. ---- */
@media(max-width:991px){
  .statement{min-height:74vh;min-height:74lvh}   /* etwas kürzer → weniger Abstand Statement→Partner (Gary iter43) */
  .logos-sec{min-height:44vh;min-height:44lvh}   /* Abstand Firmen-Marquee→Statement ~halbiert (war 68lvh, Gary iter43) */
  /* iter42: Runways ZURÜCK auf langsam (wie vor iter41) → Text driftet langsam nach oben + Crossfade
     nicht mehr zu schnell; große Überlappung hält die Übergänge trotzdem lückenlos (Gary) */
  .agentur-run,.lst-run{height:250vh;height:250lvh}
  .lst-run{margin-top:-118vh;margin-top:-118lvh}
  #achRun{margin-top:-105vh;margin-top:-105lvh}      /* #id-Präfix: dieser Block steht VOR den Base-Regeln → höhere Spezifität
                                      macht ihn immun gegen den Source-Order-Bug (iter42-Härtung) */
  #achRun .ach-figs{padding-bottom:20vh;padding-bottom:20lvh}   /* kürzerer Bilder-Auslauf (Base 70lvh ist Desktop) */
  #seqRun{margin-top:-12vh;margin-top:-12lvh}       /* etwas weniger Überlappung → kleiner Abstand Odometer→Seq (Gary iter43: „gar kein Abstand" war zu wenig) */
}
.chapter{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip}
.chapter-bg{position:absolute;inset:0;opacity:0;will-change:opacity;
  /* Weiche Ober-/Unterkante (Nutzer-Vorgabe): keine harte Bildkante beim Ein-/Ausfahren */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.chapter-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.52) contrast(1.08);
}
.chapter-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(18,18,19,.78) 100%);
}
/* ---- Geteilte Kapitel-Szene: EIN Sticky-Hintergrund für Partner→Services (Crossfade), hält bis zum Projekte-Kopf ---- */
.ch-scene{position:relative;z-index:2}
.ch-scene-bg{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;z-index:0;pointer-events:none;overflow:clip}
.csbg{position:absolute;inset:0;opacity:0;will-change:opacity;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.csbg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.52) contrast(1.08)}
.csbg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(18,18,19,.78) 100%)}
/* Durchgehende Leitlinie über die Szene — mit einer echten TRANSPARENTEN LÜCKE im vertikalen
   Zentrum (dort steht die Überschrift, die immer mittig gelesen wird): die Linie „bricht" an der
   Überschrift, ohne dass ein dunkler Block über dem Bild liegt (Gary). Läuft oben+unten weiter. */
.ch-spine{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(238,235,229,.16) 7%, rgba(238,235,229,.16) 32%,
    rgba(238,235,229,0) 40%, rgba(238,235,229,0) 62%,
    rgba(238,235,229,.16) 70%, rgba(238,235,229,.16) 93%,
    transparent 100%)}
.chapter .ch-mid{position:relative}

/* ===== FIANO Rot-Hintergrund (Alt-Seite Partner): roter Gradient + Textur + rotierende Kreise/Dash-Bogen.
   Sticky, oben+unten die letzten 10% weich zu transparent (kein sichtbares Bild-Ende). Reused: #achRun + fotos.html ===== */
.redbg{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%)}
/* dunkleres Overlay: das weiche Rot-/Grau-Glühen des Bildes wird Richtung Seiten-HG (#121213)
   gedämpft (Gary: „Grau zu hell"), die kräftige rote Welle bleibt sichtbar */
.redbg__grad{position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(18,18,19,.64) 0%, rgba(18,18,19,.42) 46%, rgba(18,18,19,.56) 100%),
    url('../img/hintergrund-projekte-grau.jpg') center/cover no-repeat,
    #121213}
/* Kreis-System im visioned.ch-Stil: 4 dünne dunkelgraue Kreise + 4 helle Bögen, die beim Scrollen
   um die Kreise wandern (circles.js rotiert die .cbright je nach scrollY, verschiedene Speeds/Richtungen) */
.redbg__circles{position:absolute;left:50%;top:50%;width:100vh;height:100vh;margin-left:-50vh;margin-top:-50vh;
  z-index:1;opacity:1;will-change:transform}
/* Strokes in viewBox-Einheiten (KEIN non-scaling-stroke): skalieren mit der 100vh-Größe des SVG →
   bleiben bei Cmd±-Zoom konstant sichtbar (non-scaling wurde bei 25% auf ~0.25px unsichtbar dünn). */
.redbg__circles .cbase{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.1}
.redbg__circles .cbright{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.7;
  stroke-dasharray:26 974;stroke-linecap:round;transform-box:fill-box;transform-origin:center;will-change:transform}
@media (prefers-reduced-motion:reduce){.redbg__circles .cbright{stroke-dasharray:0 1000}}
/* Variante für normale (nicht sticky-runway) Seiten wie fotos.html: oben fix, scrollt mit, unten ausgeblendet */
.redbg--static{position:absolute;top:0;left:0;right:0;height:130vh;margin-bottom:0;z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%)}
/* fotos.html: Kreise FIX in der rechten unteren Ecke — bleiben beim Scrollen stehen (Gary),
   Zentrum genau im Eck (nur linkes oberes Viertel sichtbar), gleiche Größe wie #achRun */
.redbg__circles--fixed{position:fixed;left:auto;top:auto;right:0;bottom:0;margin:0;
  transform:translate(50%,50%);width:100vh;height:100vh;z-index:-1;pointer-events:none}

/* ---- Rot-HG als Crossfade-Ebene im geteilten ch-scene-bg (#redScene): füllt den (bereits
   gepinnten) Sticky-BG, keine eigene Sticky-Bewegung → blendet nur per Opazität ein/aus,
   scrollt NICHT „von unten" rein. Start unsichtbar (JS steuert Opazität). ---- */
.redbg--scene{position:absolute;inset:0;height:auto;margin:0;z-index:1;opacity:0;
  -webkit-mask-image:none;mask-image:none}
/* Kreise in die rechte UNTERE Ecke (Zentrum am Eck → nur linkes oberes Viertel sichtbar) */
.ch-scene-bg .redbg__circles{left:100%;top:100%}
/* Memorial-Grid: Achse läuft von oben in den Titel, Titel mittig,
   darunter Achse in der Mitte + Text rechts daneben (Spalte 3) */
.ch-grid{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;
  gap:clamp(2rem,3.4vw,3rem);
  padding:var(--pad-page);
}
.ch-top{
  grid-row:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.ch-top .tl-line.down{flex:0 1 clamp(60px,16vh,170px);flex:0 1 clamp(60px,16lvh,170px);height:auto;background:linear-gradient(to bottom,transparent,rgba(238,235,229,.22))}
.ch-mid{grid-row:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--gap-1)}
.ch-mid h2{
  font-size:var(--fs-counter);font-weight:300;line-height:1.01;letter-spacing:-.025em;
}
.chapter-sub{
  font-size:var(--fs-lg);font-weight:300;color:var(--fg-2);letter-spacing:-.0125em;
}
.ch-bot{
  grid-row:3;height:100%;width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--gap-1);
}
.ch-bot-axis{grid-column:2;display:flex;flex-direction:column;align-items:center;height:100%}
.ch-bot-axis .tl-line{flex:1 1 auto;height:auto;background:linear-gradient(to bottom,rgba(238,235,229,.22),transparent)}
.ch-bot-axis.is-long .tl-line{background:linear-gradient(to bottom,rgba(238,235,229,.22),rgba(238,235,229,.1))}
.chapter-copy{
  grid-column:3;justify-self:start;align-self:start;
  max-width:38ch;text-align:left;
  padding:.2em 0 0 clamp(1rem,3vw,2.6rem);
  font-size:var(--fs-body);line-height:1.5;color:var(--fg-2);
}
.chapter-copy b{color:var(--fg);font-weight:400}

/* ============================================================================
   LEISTUNGEN: ZAHL STICKY + BILDER VON UNTEN
   ========================================================================== */
.ach-run{position:relative;z-index:2;overflow:clip}
/* Kopf sticky ÜBER den Bildern (Memorial: content z-30 > assets z-20) */
.ach-head{
  position:sticky;top:0;height:100vh;height:100lvh;z-index:3;
  display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;
  gap:clamp(2rem,3.4vw,3rem);
  padding:var(--pad-page);
  text-align:center;pointer-events:none;
}
.stats-num{
  font-size:var(--fs-counter);font-weight:300;line-height:1;letter-spacing:-.05em;
  display:flex;
}
.stats-num .dg{display:inline-block;height:1em;overflow:hidden;letter-spacing:-.07em}
/* Ziffern rollen per CSS-Transition (JS setzt nur noch style.transform —
   bewusst KEIN GSAP auf den Stacks: konkurrierende Tweens ließen die Zahl hängen) */
.stats-num .dg > span{transition:transform .85s cubic-bezier(.25,.9,.3,1)}
.stats-num .dg span{display:block;height:1em;line-height:1}
.stats-label{
  font-size:var(--fs-title);font-weight:300;letter-spacing:-.02em;color:var(--fg-2);
}
/* Bilder-Spalte wie Memorial: -50lvh Überlappung, mx-auto + Versatz, 70lvh Auslauf */
.ach-figs{
  position:relative;z-index:2;
  margin-top:-50vh;margin-top:-50lvh;
  padding-bottom:70vh;padding-bottom:70lvh;
  display:flex;flex-direction:column;
  gap:clamp(2.5rem,8vw,7rem);
}
.ach-fig{
  width:var(--w);margin-inline:auto;
  will-change:transform;
}
.ach-fig figure,.ach-fig{overflow:visible}
/* Wrapper clippt den Innen-Parallax des Bildes — Caption bleibt frei (Bugfix) */
.ach-fig .ach-media{display:block;overflow:hidden}
.ach-fig img{width:100%;height:auto;filter:saturate(.9);display:block}
.ach-fig figcaption{
  margin-top:.8em;text-align:left;
  font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);
}

/* ============================================================================
   IMAGE-SEQUENCE — Canvas-Scrub, Titel fix in der Mitte, wechselt per Fade
   ========================================================================== */
.seq-run{position:relative;height:340vh;height:340lvh;z-index:2}
.seq{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip}
/* tl-Achse + End-Dot über der zentrierten Seq-Überschrift („From …") — Timeline-Terminus */
.seq-axis{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:calc(50% - 25vh)}
.seq-axis .tl-line{width:1px;height:auto;flex:0 1 clamp(60px,15vh,170px);flex:0 1 clamp(60px,15lvh,170px);
  background:linear-gradient(to bottom,transparent,rgba(238,235,229,.26))}
.seq-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;will-change:opacity;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 0%,transparent 100%);
}
.seq-shade{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(18,18,19,.24) 30%,rgba(18,18,19,.6) 100%);
}
.seq-step{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--gap-1);
  text-align:center;width:min(90vw,900px);
  opacity:0;will-change:opacity,filter;
}
.seq-step h2{
  font-size:var(--fs-counter);font-weight:300;line-height:1.02;letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.6);text-wrap:balance;
}
.seq-step p{
  color:var(--fg-2);font-size:var(--fs-lg);line-height:1.4;max-width:40ch;
  text-shadow:0 1px 18px rgba(0,0,0,.6);
}

/* ============================================================================
   MOVING TEXT — Riesentext, bewegt sich mit der Scrollrichtung (Alt-Seite)
   ========================================================================== */
.mtx{
  position:relative;z-index:2;overflow:clip;
  padding:calc(var(--pad-sec)*.9) 0;
}
.mtx-row{
  display:flex;white-space:nowrap;width:max-content;
  font-size:clamp(5rem,17vw,16rem);font-weight:300;line-height:1;letter-spacing:-.04em;
  color:var(--fg);will-change:transform;
}

/* ============================================================================
   ÜBER MICH — Text + Bilder-Slider mit großem Schriftzug (Alt-Seite, neuer Stil)
   ========================================================================== */
.about{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:calc(var(--gap-2)*1.6);
  padding:calc(var(--pad-sec)*.7) 0 var(--pad-sec);
}
.about-copy{
  max-width:44ch;margin:0 auto;padding:0 var(--pad-page);
  font-size:clamp(1.2rem,calc(1.07vw + .94rem),1.9rem);
  font-weight:300;line-height:1.42;color:var(--fg-2);text-align:center;text-wrap:balance;
}
.about-slider{position:relative;overflow:clip}
.about-mq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.about-track{
  display:flex;align-items:flex-start;width:max-content;gap:clamp(10px,1.2vw,20px);
  animation:mq 60s linear infinite;will-change:transform;
}
.about-track figure{width:clamp(240px,25vw,360px);flex:none}
.about-track img{
  width:100%;height:clamp(360px,37.5vw,540px);object-fit:cover;   /* Hochformat wie Alt-Seite (~360×540) */
  aspect-ratio:auto;
  filter:grayscale(1) brightness(.72) contrast(1.05);
}
.about-track figcaption{
  margin-top:.9em;
  font-size:var(--fs-sm);letter-spacing:.04em;color:var(--fg-2);text-transform:none;
}
.about-track figcaption b{display:block;color:var(--fg);font-weight:400;margin-bottom:.15em}
.about-track figcaption i{font-style:normal;color:var(--fg-3);letter-spacing:.02em}
.about-big{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:2;
  font-size:clamp(3rem,calc(7.62vw + .78rem),8rem);
  font-weight:300;line-height:1;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.55),0 10px 40px rgba(0,0,0,.5);
  white-space:nowrap;pointer-events:none;
}

/* ============================================================================
   PROZESS (visioned-Stil) — DU/WIR-Kette mit Puls-Kreisen
   Referenzwerte 1:1 aus visioned.ch extrahiert (dort selbst in vw definiert):
   Kreis-Reihe 3–18vw, Content 28vw, Linie 0.5px-Äquiv., h3 1.3vw, p 1vw.
   Alles in vw → Cmd±-zoom-stabil (Desktop-Regel). Animation: main.js (Puls).
   ========================================================================== */
.prozess{position:relative;z-index:2;padding:10vw 0}
/* Roter Gradient-HG hinter dem Sektions-Kopf (gleiches Bild wie redScene/„Leistungen"),
   läuft per Overlay-Verlauf weich in den Seiten-BG aus */
.prz-bg{
  position:absolute;left:0;right:0;top:0;height:55vw;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(18,18,19,.55) 0%, rgba(18,18,19,.45) 100%),
    url('../img/hintergrund-projekte-grau.jpg') center top/cover no-repeat;
  /* weiche Kanten: oben 0→100% Deckkraft einfaden, unten 100→0% ausfaden (keine harte Bildkante) */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 60%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 60%, transparent 100%);
}
.prz-head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.1vw;text-align:center;margin-bottom:9vw}
.prz-head h2{
  font-size:5.6vw;font-weight:300;line-height:.95;letter-spacing:-.045em;
  color:var(--fg);max-width:64vw;
}
.prz-list{position:relative;z-index:1;width:85vw;margin:0 auto}
.prz-step{display:flex;align-items:center;justify-content:center;gap:1vw}
/* KEIN vertikales Padding: Step-Höhe = max(Kreis, Text) → Kreis-Boxen stoßen aneinander,
   der Puls (scale bis 1.1) lässt die Kreise ÜBERLAPPEN (visioned-Mechanik) */
.prz-side{flex:0 0 auto;width:28vw;display:flex;flex-direction:column;gap:.55vw;min-width:0}
.prz-step.is-first .prz-side{padding:2vw 0}
.prz-l{align-items:flex-end;text-align:right}
.prz-r{align-items:flex-start;text-align:left}
.prz-side h3{font-size:1.3vw;font-weight:300;line-height:1.1;letter-spacing:-.045em;color:#fff;margin:0}
.prz-side p{font-size:1vw;font-weight:300;line-height:1.4;color:rgba(255,255,255,.65);margin:0;max-width:24vw}
.prz-side h3.prz-role{font-size:.7vw;font-weight:400;letter-spacing:.286em;text-transform:uppercase;color:#fff}
.prz-ln{flex:1 1 0;height:.035vw;background:rgba(255,255,255,.2)}
.prz-ln.is-off{opacity:0}
.prz-circle{
  flex:0 0 auto;width:var(--cw,3vw);height:var(--cw,3vw);
  border:.07vw solid var(--red);border-radius:50%;
  background-color:rgba(246,56,63,0);
  box-shadow:0 -2.45vw 1.63vw rgba(0,0,0,.25);
  will-change:transform,background-color;
}
.prz-circle.is-ghost{opacity:0}
@media(max-width:991px){
  .prozess{padding:72px 0 56px}
  .prz-head{gap:10px;margin-bottom:56px}
  .prz-head h2{font-size:8.5vw;max-width:88vw;letter-spacing:-.02em}
  .prz-bg{height:150vw}
  .prz-list{width:94vw}
  /* Mobile: Kreise klein & im Flow, Texte stehen frei neben den Kreisen (Gary iter41 —
     Rollback des Absolut-/Groß-Kreis-Umbaus; kleiner Look bewusst gewählt) */
  .prz-step{gap:10px}
  .prz-side{width:35vw;gap:5px;padding:6px 0}
  .prz-step.is-first .prz-side{padding:12px 0}
  .prz-side h3{font-size:13px;letter-spacing:-.02em}
  .prz-side p{font-size:10.5px;line-height:1.35;max-width:none}
  .prz-side h3.prz-role{font-size:10px;letter-spacing:.24em}
  .prz-ln{height:.5px}
  .prz-circle{border-width:1px;width:calc(var(--cw,3vw)*1.4);height:calc(var(--cw,3vw)*1.4);box-shadow:0 -18px 12px rgba(0,0,0,.25)}
}

/* ============================================================================
   KUNDENSTIMMEN
   ========================================================================== */
.kunden-run{position:relative;height:340vh;height:340lvh;z-index:2}
.kunden{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip;display:grid;grid-template-columns:1fr 1fr;will-change:opacity,filter}
.kunden-video{position:relative;overflow:clip}
.kunden-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) brightness(.78) contrast(1.05);
}
.kunden-video::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,transparent 62%,rgba(18,18,19,.85) 100%);
}
.kunden-cc{
  position:absolute;left:var(--pad-page);bottom:calc(var(--pad-page)*1.6);z-index:2;
  font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);
  display:flex;align-items:center;gap:.6em;
}
.kunden-cc::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--red);animation:bgmpulse 1.6s infinite}
@keyframes bgmpulse{0%,100%{opacity:1}50%{opacity:.35}}
.kunden-quotes{position:relative;padding:var(--pad-page)}
.kunden-label{
  position:absolute;top:calc(var(--pad-page)*2.4);left:clamp(1.5rem,5vw,4.5rem);
  color:var(--fg-2);
}
.kunden-idx{
  position:absolute;bottom:calc(var(--pad-page)*1.6);left:clamp(1.5rem,5vw,4.5rem);
  font-size:var(--fs-sm);letter-spacing:.14em;color:var(--fg-3);font-variant-numeric:tabular-nums;
}
.kq{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:var(--gap-2);
  padding:calc(var(--pad-page)*2) clamp(1.5rem,5vw,4.5rem);
  opacity:0;visibility:hidden;will-change:opacity,filter,transform;
}
.kq-mark{
  font-size:var(--fs-counter);line-height:.4;font-weight:400;color:var(--red);
  font-family:Georgia,serif;height:.3em;margin-bottom:.5em;
}
.kq-text{
  font-size:var(--fs-lg);font-weight:300;line-height:1.3;letter-spacing:-.015em;
  max-width:30ch;text-wrap:balance;
}
.kq-who{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);
}
.kq-who b{display:block;color:var(--fg);font-weight:500;margin-bottom:.35em}

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-foot{
  position:relative;z-index:2;
  padding:calc(var(--pad-sec)*1.1) var(--pad-page) var(--pad-page);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%);
  overflow:clip;
}
.foot-red{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 80% 55% at 50% 112%,rgba(246,56,63,.28),transparent 70%),
    linear-gradient(to bottom right,transparent 30%,rgba(135,29,37,.32) 100%);
}
.foot-inner{max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:calc(var(--gap-2)*1.8)}
.foot-h{
  font-size:var(--fs-display);font-weight:300;line-height:1.05;letter-spacing:-.03em;
  max-width:18ch;text-wrap:balance;
}
.foot-h .hl{color:var(--red);font-weight:400}
.foot-sub{max-width:46ch;color:var(--fg-2);font-size:var(--fs-lg);font-weight:300;line-height:1.4}
.foot-cta-row{display:flex;flex-wrap:wrap;gap:var(--gap-1);align-items:center}
.foot-cta{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.95em 1.6em;border-radius:100px;
  background:rgba(238,235,229,.06);
  border:1px solid rgba(238,235,229,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s,border-color .3s;
}
.foot-cta:hover{background:rgba(246,56,63,.25);border-color:rgba(246,56,63,.55)}
.foot-cta.is-ghost{background:transparent}
.foot-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-2);
  padding-top:var(--gap-2);border-top:1px solid rgba(238,235,229,.12);
  font-size:var(--fs-sm);line-height:2;letter-spacing:.05em;color:var(--fg-2);
}
.foot-cols h4{
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:.6em;
}
.foot-cols a,.foot-cols button{display:block;transition:color .25s;text-align:left;padding:0;letter-spacing:inherit;font-size:inherit;line-height:inherit;color:inherit}
.foot-cols a:hover,.foot-cols button:hover{color:var(--fg)}
.foot-meta{
  display:flex;justify-content:space-between;gap:var(--gap-1);flex-wrap:wrap;
  font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
}
.foot-biglogo{margin-top:var(--gap-2);opacity:.9}
.foot-biglogo img{width:100%;height:auto}

/* ============================================================================
   POPUPS (Onepage: Projekte / Team / Kontakt)
   ========================================================================== */
.popup{
  position:fixed;inset:0;z-index:110;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(18,18,19,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;
}
.popup.is-open{opacity:1;visibility:visible}
.popup-inner{
  max-width:1200px;margin:0 auto;
  /* Inhalt beginnt auf GLEICHER Höhe wie das X (Nutzer-Vorgabe: gleicher Abstand nach oben) */
  padding:calc(var(--pad-page)*.7) var(--pad-page) calc(var(--pad-page)*2);
  display:flex;flex-direction:column;gap:var(--gap-2);
}
/* Custom Scrollbar in Popups (designnah: schmal, dunkle Spur, roter Daumen) */
.popup,.prj-detail{scrollbar-width:thin;scrollbar-color:rgba(246,56,63,.55) rgba(255,255,255,.05)}
.popup::-webkit-scrollbar,.prj-detail::-webkit-scrollbar{width:9px}
.popup::-webkit-scrollbar-track,.prj-detail::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.popup::-webkit-scrollbar-thumb,.prj-detail::-webkit-scrollbar-thumb{
  background:linear-gradient(to bottom,rgba(246,56,63,.75),rgba(246,56,63,.35));
  border-radius:999px;border:2px solid rgba(18,18,19,.9);
}
.popup::-webkit-scrollbar-thumb:hover,.prj-detail::-webkit-scrollbar-thumb:hover{background:var(--red)}
.pop-progress{display:none}   /* Popup-Scroll-Fortschritt: nur Mobile (unten, weiß) — Desktop behält Scrollbar rechts */
.popup-close{
  position:fixed;top:calc(var(--pad-page)*.7);right:var(--pad-page);
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(238,235,229,.25);
  font-size:22px;font-weight:300;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s;
}
.popup-close:hover{background:rgba(246,56,63,.3);border-color:rgba(246,56,63,.55)}
.popup-h{
  font-size:var(--fs-display);font-weight:300;letter-spacing:-.025em;line-height:1.05;
  max-width:20ch;
}
.pop-sub{color:var(--fg-2);font-size:var(--fs-lg);line-height:1.4;max-width:46ch}
.pop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-2);
}
.pop-grid figure img{width:100%;height:auto;filter:saturate(.9)}
.pop-grid figcaption{
  margin-top:.7em;display:flex;justify-content:space-between;gap:1em;
  font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);
}
.pop-grid figcaption i{font-style:normal;color:var(--fg-3)}
.pop-team{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:var(--gap-2)}
.pop-team img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.9)}
.pop-team h3{margin-top:.9em;font-size:var(--fs-lg);font-weight:400}
.pop-role{
  color:var(--red);font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;margin:.35em 0 .7em;
}
.pop-team p{color:var(--fg-2);line-height:1.5;max-width:34ch}
.pop-contact{
  display:flex;flex-direction:column;gap:.3em;
  padding-top:var(--gap-2);border-top:1px solid rgba(238,235,229,.12);
  font-size:var(--fs-sm);letter-spacing:.05em;line-height:2;color:var(--fg-2);
}
.pop-contact .fmenu-social{margin-top:.8em}

/* ---------- PROJEKTE-Popup NEU (Ocean-Films-Stil) ----------
   Kreis + Nadel über Hintergrund-Medien; Scrollen = Nadel dreht + Vorschau-Ring
   (SVG-Donut-Segmente, JS-generiert) blendet ein; Stillstand = Video spielt. */
.popup-prj{background:#0e0d10;-webkit-backdrop-filter:none;backdrop-filter:none}
.popup-prj .popup-close{z-index:12}
.prj-scroll{position:relative;height:1980vh}   /* 3 Zyklen à 660vh (6 Projekte) → nahtloser Endlos-Loop */
.prj-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.prj-bgs{position:absolute;inset:0}
.prj-bg{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.prj-bg.is-on{opacity:1}
.prj-bg video,.prj-bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) brightness(.55) contrast(1.05);transition:filter .7s ease}
/* Beim Scrollen nur dezent dunkler (Nutzer-Vorgabe: nicht so stark abdimmen) */
.prj-stage.is-scrub .prj-bg video,.prj-stage.is-scrub .prj-bg img{filter:grayscale(.4) brightness(.44) contrast(1.05)}
/* Großes FIANO-Logo vertikal links (Ocean-Stil): mit Abstand zum Rand, fast volle Höhe */
.prj-mark{position:absolute;left:1.8vw;top:0;height:100%;width:20vh;z-index:2;
  display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:visible}
.prj-mark img{flex:none;width:90vh;max-width:none;transform:rotate(-90deg);opacity:.94;
  filter:drop-shadow(0 2px 30px rgba(0,0,0,.5))}
.prj-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(14,13,16,.1) 22%,rgba(14,13,16,.74) 100%)}
/* Roter Bodengradient wie im Hero (.fh-redbottom) */
.prj-redbottom{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(246,56,63,.17) 0%,rgba(246,56,63,.15) 24%,rgba(246,56,63,.05) 58%,transparent 100%)}
.prj-ring{position:absolute;left:50%;top:50%;width:min(115vh,94vw);height:min(115vh,94vw);
  transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
/* Rotes FIANO-Liquid-Logo in der Kreismitte (wie Startseiten-Orb, statisches PNG) */
.prj-orb{position:absolute;left:50%;top:50%;width:min(74vh,60vw);transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;opacity:.96;
  filter:drop-shadow(0 0 40px rgba(246,56,63,.4))}
/* Hero-HUD-Look (Werte wie .ring-hud: rh-inner/rh-innerdash/rh-track/rh-prog) */
.prj-rh-inner{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.2}
.prj-rh-innerdash{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:3 6;
  transform-box:fill-box;transform-origin:center;animation:fhspin 70s linear infinite}
.prj-rh-track{fill:none;stroke:rgba(246,56,63,.22);stroke-width:1.6}
.prj-rh-prog{fill:none;stroke:var(--red);stroke-width:2.6;stroke-dasharray:100;stroke-dashoffset:100;
  stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(246,56,63,.5))}
.prj-needle{stroke:var(--red);stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(246,56,63,.6))}
.prj-segs{opacity:0;transition:opacity .65s ease;will-change:transform}
.prj-stage.is-scrub .prj-segs{opacity:1}
.prj-seg-line{fill:none;stroke:rgba(14,13,16,.55);stroke-width:2.5}
.prj-label{
  position:absolute;left:calc(50% + min(59.5vh,48.5vw));right:var(--pad-page);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.45em;z-index:3;
}
.prj-cat{font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:500}
.prj-title{font-size:clamp(1.15rem,1.65vw,1.95rem);font-weight:300;letter-spacing:-.015em;line-height:1.12;margin:0}
.prj-time{font-size:var(--fs-sm);letter-spacing:.12em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.prj-open{
  margin-top:.7em;display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;
  padding:.7em 1.5em;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font-size:var(--fs-sm);letter-spacing:.06em;color:#fff;
  transition:background .3s,border-color .3s;
}
.prj-open:hover{background:var(--red);border-color:var(--red)}
.prj-idx{position:absolute;left:var(--pad-page);bottom:calc(var(--pad-page)*.8);z-index:3;
  font-size:var(--fs-sm);letter-spacing:.14em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.prj-hint{position:absolute;right:var(--pad-page);bottom:calc(var(--pad-page)*.8);z-index:3;
  font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
/* Projekt-„Unterseite" (Detail-Layer im Popup) */
.prj-detail{
  position:fixed;inset:0;z-index:8;background:rgba(14,13,16,.985);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(4vh);
  transition:opacity .45s ease,visibility .45s ease,transform .45s ease;
}
.prj-detail.is-open{opacity:1;visibility:visible;transform:none}
.prj-back{
  position:fixed;top:calc(var(--pad-page)*.7 + 6px);left:var(--pad-page);z-index:9;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.6em 1.3em;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  font-size:var(--fs-sm);letter-spacing:.06em;
  transition:background .3s,border-color .3s;
}
.prj-back:hover{background:rgba(246,56,63,.3);border-color:rgba(246,56,63,.55)}
.prj-detail-inner{
  max-width:1100px;margin:0 auto;
  padding:calc(var(--pad-page)*.7 + 60px) var(--pad-page) calc(var(--pad-page)*2);
  display:flex;flex-direction:column;gap:var(--gap-1);
}
.prj-detail-cat{font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:500}
.prj-detail-title{font-size:var(--fs-display);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0}
.prj-detail-copy{color:var(--fg);max-width:60ch;line-height:1.55;font-size:var(--fs-lg);font-weight:300}
.prj-detail-body{display:flex;flex-direction:column;gap:1em;max-width:66ch}
.prj-detail-body p{color:var(--fg-2);line-height:1.65;font-size:var(--fs-body);margin:0}
.prj-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-1);margin-top:var(--gap-1)}
.prj-gallery img{width:100%;height:auto;filter:saturate(.9)}
@media(max-width:991px){
  /* Bug4 (Gary iter46): Ring DEUTLICH größer (darf links/rechts überstehen) + höher gesetzt,
     Center-Mark viel größer, Ring+Label nach oben (Label klebte am Boden), HUD-Striche dicker,
     Nadel nach unten gedreht → zeigt zum Label. Das aktive Segment wird in main.js mobil auf Süd
     (6 Uhr) gerechnet, damit Segment/Hintergrund mit der gedrehten Nadel fluchten. Alles ≤991. */
  .prj-ring{width:min(112vw,80vh);height:min(112vw,80vh);top:38%;max-width:none}   /* Gary iter47: Ring wieder kleiner (war 132vw = viel zu groß) → mehr Abstand zum Text; max-width:none hebt den svg{max-width:100%}-Cap auf */
  .prj-orb{width:min(82vw,54vh);top:38%;max-width:none}   /* Center-Mark viel größer (Gary) */
  .prj-label{left:50%;right:auto;top:72%;bottom:auto;transform:translateX(-50%);
    align-items:center;text-align:center;width:88vw;max-width:88vw}   /* direkt unter den Ring, nicht am Boden */
  .prj-open{align-self:center}
  .prj-gallery{grid-template-columns:1fr}
  .prj-stage{overflow-x:clip}   /* der übergroße Ring darf links/rechts überstehen, ohne Sidescroll zu erzeugen */
  .prj-rh-track{stroke-width:3.4}
  .prj-rh-inner,.prj-rh-innerdash{stroke-width:2.6}
  .prj-rh-prog{stroke-width:5}
  .prj-needle{transform-box:view-box;transform-origin:500px 500px;transform:rotate(90deg);stroke-width:6}
}

/* ---------- TEAM-Popup: „Das Team" im Alt-Seiten-Stil (partner.html .pm-*) ---------- */
.pm-wrap{max-width:1400px}
.pm-team{position:relative;overflow:hidden;padding:0 0 max(20px,3vh)}
.pm-rings{position:absolute;left:50%;top:50%;width:210vh;height:210vh;margin-left:-105vh;margin-top:-105vh;z-index:0;opacity:.5;pointer-events:none;animation:fhspin 90s linear infinite;will-change:transform}
.pm-rings circle{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.pm-rings .dash{stroke:rgba(246,56,63,.3);stroke-dasharray:34 90;animation:pmdash 13s linear infinite}
@keyframes pmdash{to{stroke-dashoffset:-236}}
.pm-inner{position:relative;z-index:2;margin:0 auto;min-height:max(680px,80vh)}
.pm-h{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-size:max(56px,8.5vw);font-weight:300;letter-spacing:-.035em;line-height:1;color:#fff;z-index:1;white-space:nowrap;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.pm-member{position:absolute;width:max(200px,16vw);z-index:3;margin:0}
.pm-m1{left:0;top:2%}
.pm-m2{right:0;bottom:2%}
.pm-member img{width:100%;aspect-ratio:3/5;object-fit:cover;display:block;background:#111;box-shadow:0 44px 110px rgba(0,0,0,.6)}
.pm-cap{margin:max(14px,1.6vh) 0 0}
.pm-name{font-size:max(18px,1.4vw);font-weight:300;color:#fff;line-height:1.15}
.pm-role{font-size:max(11px,.8vw);letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:.5em 0 0}
.pm-desc{max-width:34ch;margin:max(10px,1.3vh) 0 0;font-size:max(13px,.9vw);font-weight:300;line-height:1.55;color:rgba(255,255,255,.58)}
.pm-curve{position:absolute;left:24%;top:24%;width:52%;height:50%;z-index:1;pointer-events:none;overflow:visible}
.pm-curve path,.pm-curve polyline{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pm-curve path{stroke-dasharray:1 11}
@media(max-width:991px){
  .pm-inner{min-height:0;display:flex;flex-direction:column;align-items:center;gap:max(40px,6vh)}
  .pm-h{position:relative;transform:none;left:auto;top:auto;margin:0 0 max(20px,3vh);font-size:15vw;text-align:center;white-space:normal}
  .pm-member{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:min(360px,80vw);text-align:center}
  .pm-desc{max-width:46ch;margin-left:auto;margin-right:auto}
  .pm-curve{display:none}
}

/* ---------- KONTAKT-Popup: Formular der Alt-Seite (kontakt.html .kt-*) ---------- */
/* Inhalt mittig (schmalere zentrierte Spalte) + mehr Abstand nach oben (Nutzer-Vorgabe) */
#popKontakt .popup-inner{max-width:880px;padding-top:calc(var(--pad-page)*.7 + 90px)}
/* Team + Services + Impressum + Datenschutz: Inhalt tiefer, damit er unter dem Zurück-Button beginnt (Gary) */
#popTeam .popup-inner,#popServices .popup-inner,#popImpressum .popup-inner,#popDatenschutz .popup-inner{padding-top:calc(var(--pad-page)*.7 + 88px)}
.kt-form{margin-top:var(--gap-1);display:grid;grid-template-columns:1fr 1fr;gap:5vh 6vw}
.kt-field{display:flex;flex-direction:column;min-width:0}
.kt-wide{grid-column:1 / -1}
.kt-label{font-size:max(13px,.92vw);letter-spacing:.02em;color:rgba(255,255,255,.7);margin-bottom:1.5vh}
.kt-input,.kt-textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:max(16px,1.15vw);font-weight:300;padding:1.1vh 0;outline:none;transition:border-color .3s;width:100%;border-radius:0}
.kt-input:focus,.kt-textarea:focus{border-bottom-color:var(--red)}
.kt-textarea{resize:vertical;min-height:11vh;line-height:1.5}
.kt-actions{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:3vw;margin-top:1vh}
.kt-note{font-size:max(13px,.9vw);line-height:1.5;color:rgba(255,255,255,.42);max-width:42ch}
.kt-privacy{color:rgba(255,255,255,.66);text-decoration:underline;text-underline-offset:2px;font-size:inherit;letter-spacing:inherit;padding:0;transition:color .25s}
.kt-privacy:hover{color:#fff}
.kt-submit{flex:none;width:max(118px,9vw);height:max(118px,9vw);border-radius:50%;background:var(--red);color:#fff;border:0;font-family:inherit;font-size:max(14px,1vw);font-weight:500;letter-spacing:.02em;transition:transform .3s,filter .3s}
.kt-submit:hover{transform:scale(1.05);filter:brightness(1.1)}
@media(max-width:767px){
  .kt-form{grid-template-columns:1fr;gap:3.4vh 0}
  .kt-actions{flex-direction:column-reverse;align-items:stretch;gap:20px}
  .kt-submit{width:100%;height:auto;border-radius:999px;padding:18px}
  .kt-note{text-align:center;max-width:none}
}

/* ---------- SERVICES-Popup: Kategorien-Pills + Detail-Sektionen (Alt .ex-* → .sv-*) ---------- */
.sv-wrap{max-width:1400px}
.sv-bar{display:flex;flex-wrap:wrap;gap:max(12px,.84vw);padding-bottom:max(14px,1.12vw);border-bottom:1px solid rgba(255,255,255,.16)}
.sv-pill{padding:max(10px,.78vw) max(20px,1.55vw);border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:max(13px,.9vw);color:rgba(255,255,255,.8);white-space:nowrap;transition:background .3s,border-color .3s,color .3s}
.sv-pill:hover{border-color:#fff;color:#fff}
.sv-cat{padding:max(50px,7vh) 0 max(30px,4vh);scroll-margin-top:20px}
.sv-head{display:flex;align-items:center;gap:4vw;margin-bottom:max(34px,4.5vh)}
.sv-circ{position:relative;flex:none;width:max(140px,13vw);aspect-ratio:1/1}
.sv-circ::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.13);pointer-events:none}
.sv-circ::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px solid transparent;border-top-color:rgba(255,255,255,.45);border-left-color:rgba(255,255,255,.16);animation:svspin 9s linear infinite;pointer-events:none}
@keyframes svspin{to{transform:rotate(360deg)}}
.sv-circ img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#2a2a2a;box-shadow:0 2vw 6vw rgba(0,0,0,.5);filter:grayscale(1) brightness(.92) contrast(1.05)}
.sv-name{flex:1 1 auto;min-width:0;font-size:max(38px,4.6vw);font-weight:300;line-height:.92;letter-spacing:-.03em;color:#fff;margin:0}
.sv-num{font-size:.2em;vertical-align:super;color:var(--red);margin-left:.35em;letter-spacing:.05em}
.sv-body{display:grid;grid-template-columns:0.9fr 1.1fr;gap:4vw;align-items:start}
.sv-desc{margin:0;font-size:max(16px,1.3vw);font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);letter-spacing:-.01em}
.sv-list{list-style:none;margin:0;padding:0}
.sv-list li{display:flex;align-items:center;gap:1.4vw;padding:1.9vh 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:max(14px,1.05vw);color:rgba(255,255,255,.86)}
.sv-list li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.sv-list li::before{content:"\2192";flex:none;color:var(--red);font-size:1.1em}
.sv-right{display:flex;flex-direction:column}
.sv-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:max(8px,.7vw);margin-top:max(28px,3.4vh);font-size:max(14px,.95vw);letter-spacing:.02em;color:#fff;padding:max(13px,1vw) max(28px,2.2vw);border-radius:999px;background:var(--red);box-shadow:0 14px 40px rgba(246,56,63,.32);transition:filter .3s,transform .3s}
.sv-cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
@media(max-width:991px){
  .sv-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sv-bar::-webkit-scrollbar{display:none}
  .sv-head{flex-direction:column;align-items:flex-start;gap:26px}
  .sv-circ{width:50vw;max-width:260px}
  .sv-name{font-size:clamp(30px,11vw,84px)}
  .sv-body{grid-template-columns:1fr;gap:30px}
  .sv-desc{font-size:17px}
  .sv-list li{gap:14px;padding:15px 0;font-size:15px}
}

/* ---------- LEGAL-Popups: Impressum / Datenschutz (Alt-Seiten-Textstil .lg-*) ---------- */
.popup-legal .popup-inner{max-width:900px}
.lg-eyebrow{display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0}
.lg-eyebrow::before{content:"";width:36px;height:1px;background:var(--red)}
.lg-title{font-size:clamp(36px,6.4vw,64px);font-weight:300;line-height:1.0;letter-spacing:-.015em;margin:0}
.lg-lead{color:rgba(255,255,255,.62);font-size:clamp(15px,1.5vw,18px);margin:0 0 14px;max-width:60ch}
.lg-main h3{font-size:clamp(21px,2.6vw,28px);font-weight:400;line-height:1.2;letter-spacing:-.01em;margin:34px 0 2px;color:#fff}
.lg-main h4{font-size:clamp(17px,2vw,21px);font-weight:400;margin:20px 0 0;color:rgba(255,255,255,.92)}
.lg-main p{color:rgba(255,255,255,.66);margin:0;font-size:16px;line-height:1.65}
.lg-main a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(246,56,63,.32);transition:border-color .25s;word-break:break-word}
.lg-main a:hover{border-bottom-color:var(--red)}
.lg-main ul{color:rgba(255,255,255,.66);margin:0;padding-left:22px;font-size:16px}
.lg-main li{margin:7px 0}
.lg-main strong{color:#fff;font-weight:500}
.lg-rule{height:1px;background:rgba(255,255,255,.13);margin:20px 0 0}
.lg-fine{color:rgba(255,255,255,.4)!important;font-size:13px!important}
.lg-dl{margin:8px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.lg-dl>div{display:grid;grid-template-columns:230px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.lg-dl dt{margin:0;color:rgba(255,255,255,.5);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.lg-dl dd{margin:0;color:#fff;font-size:16px}
@media(max-width:767px){
  .lg-dl>div{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .lg-dl dt{font-size:12px}
}

/* ---------- Projekte-Popup: FC-Porto-artige Sticky-Stacking-Cards (Parallax via JS) ---------- */
.popup-proj{background:#0f0d11;-webkit-backdrop-filter:none;backdrop-filter:none}
.popup-proj .popup-close{z-index:12}
.proj-stack{position:relative;width:100%}
.proj-card{position:sticky;top:0;height:100vh;overflow:hidden;background:#0f0d11}
.proj-bg{position:absolute;inset:0;will-change:transform}
.proj-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.6) contrast(1.06)}
.proj-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(10,10,11,.28) 0%,rgba(10,10,11,.5) 52%,rgba(10,10,11,.88) 100%),
    radial-gradient(ellipse at 50% 46%,transparent 42%,rgba(9,9,10,.6) 100%);
}
.proj-inner{
  position:relative;z-index:2;width:100%;height:100%;
  display:grid;grid-template-columns:auto 1fr minmax(0,34ch);align-items:center;
  gap:var(--gap-2);padding:calc(var(--pad-page)*2.2) calc(var(--pad-page)*1.4);
  color:#fff;will-change:transform,opacity;
}
.proj-num{
  grid-column:1;align-self:start;
  font-size:var(--fs-lg);font-weight:400;letter-spacing:.06em;color:var(--fg-2);
  font-variant-numeric:tabular-nums;
}
.proj-mid{grid-column:2;text-align:center}
.proj-title{
  font-size:var(--fs-counter);font-weight:300;line-height:1.03;letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(0,0,0,.55);max-width:18ch;margin:0 auto;text-wrap:balance;
}
.proj-cat{
  margin-top:.7em;font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);
}
.proj-copy{
  grid-column:3;align-self:center;max-width:34ch;
  font-size:var(--fs-body);line-height:1.55;color:rgba(238,235,229,.85);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
@media(max-width:767px){
  .proj-inner{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:center;gap:var(--gap-1);padding:calc(var(--pad-page)*3) var(--pad-page)}
  .proj-num,.proj-mid,.proj-copy{grid-column:1}
  .proj-num{align-self:auto}
  .proj-copy{align-self:auto;text-align:center}
}

/* ============================================================================
   REVEALS
   ========================================================================== */
[data-reveal] .w{display:inline-block;white-space:pre;will-change:transform,opacity,filter}
html.no-js [data-reveal] .w{opacity:1!important;transform:none!important;filter:none!important}

/* ============================================================================
   RESPONSIVE — Tablet ≤991 / Mobile ≤767
   ========================================================================== */
@media(max-width:991px){
  .fv-vid{filter:grayscale(1) brightness(.72) contrast(1.25)}
  .fv-shade{background:radial-gradient(circle at 50% 50%,rgba(18,18,19,.26) 14%,rgba(18,18,19,.44) 52%,rgba(18,18,19,.94) 100%)}
  /* ---- MOBILE HEADER (Gary): Logo LINKS, Burger RECHTS, Sprache RECHTS — Größe wie Alt-Seite + mehr Abstand oben ---- */
  .site-head{padding-top:calc(var(--pad-page)*1.25 + env(safe-area-inset-top, 0px))}
  .head-logo{position:static;top:auto;left:auto;transform:none;order:-1;margin-right:auto}
  .head-logo img{height:24px}
  .nav-menu-btn{font-size:13px}
  .nav-burger{width:24px;gap:5px}
  .nav-burger i{height:2px}
  .nav-menu-btn.is-open .nav-burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav-menu-btn.is-open .nav-burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .fi-lang{left:auto;right:14px;gap:11px}
  /* ---- HERO-HUD: REC/NOW-PLAYING + Balken WEG → Kategorie-Name/Nr/Zeit UNTERHALB des Orb-Logos (Bild 4) ---- */
  .fh-catbar{display:none}
  .rh-line,.rh-dot{display:none}
  .rh-label{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:.7em;white-space:nowrap;
    left:50%;top:85%;bottom:auto;transform:translate(-50%,-50%);text-align:center}
  .fv-name{font-size:16px}
  .fv-idx{font-size:11px}
  .fv-time{font-size:12px}
  /* ---- HERO + KAPITEL (Partner/Leistungen) auf Mobile: Titel/Untertitel/Copy ZENTRIERT & kompakt.
     Copy direkt unter dem Untertitel (kleiner Abstand), tl-Line+Dot zentriert UNTER der Copy (Gary) ---- */
  .hero-grid .ch-mid h1{font-size:14.5vw;white-space:nowrap}   /* Hero-Titel einzeilig (Gary) */
  .hero-grid{grid-template-rows:auto auto auto;align-content:center;gap:clamp(1rem,4.5vw,1.9rem)}  /* Inhalt vertikal mittig (Gary; Film-Strip entfernt) */
  .hero-grid .ch-top .tl-line.down{flex:none;height:clamp(56px,11vh,100px)}   /* tl-Line länger (Gary) */
  .hero-grid .ch-bot-axis .tl-line,.chapter .ch-bot-axis .tl-line{flex:none;height:clamp(56px,11vh,100px)}
  .hero-grid .ch-bot,.chapter .ch-bot{grid-template-columns:1fr;justify-items:center;gap:var(--gap-1)}
  .hero-grid .chapter-copy{grid-column:1;order:1;text-align:center;max-width:80vw;padding-left:0;margin-left:auto;margin-right:auto}   /* Hero-Fließtext schmaler + echt mittig (Gary) */
  .chapter .ch-bot .chapter-copy{grid-column:1;order:1;text-align:center;max-width:none;padding-left:0;justify-self:center}   /* justify-self:center überschreibt Basis-`justify-self:start` → Copy zentriert (bei einzeiligem Text auf Tablet klebte sie sonst links, Gary iter52) */
  .hero-grid .ch-bot-axis,.chapter .ch-bot-axis{grid-column:1;order:2}

  .ring-big,.ring-hud{width:min(128vw,560px);height:min(128vw,560px)}
  .fh-orb-scale{width:min(150vw,620px);height:min(150vw,620px)}
  .fh-orb-static,.fh-orb-gl{width:min(114vw,610px)}
  /* Blur-Logo (Orb-Blur über den Kundenlogos) auf Mobile GRÖSSER + obere Kante weich ausblenden,
     damit der Übergang nicht sichtbar ist (Gary; Alt-Seiten-Look) */
  .fh-orb-blur{width:min(140vw,760px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 88%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 88%,transparent 100%)}
  /* Kundenlogos: Reihen VERTIKAL ZENTRIERT statt ganz unten → beide stabil in der Mitte sichtbar,
     werden beim Scrollen nicht mehr oben/unten angeschnitten (Gary) */
  .logos-sec{justify-content:center;padding:calc(var(--pad-sec)*1.2) 0}
  .logos-rows{gap:clamp(1.1rem,5vw,1.8rem)}
  .nav-links{display:none}
  .kunden{grid-template-columns:1fr}
  .kunden-video{position:absolute;inset:0}
  .kunden-video::after{background:linear-gradient(to bottom,rgba(18,18,19,.25),rgba(18,18,19,.85) 78%)}
  .kunden-quotes{position:absolute;inset:0}
  .kunden-label{top:calc(var(--pad-page)*3.2);left:var(--pad-page)}
  .kunden-idx{left:var(--pad-page);bottom:calc(var(--pad-page)*2.6)}
  .kunden-cc{bottom:auto;top:calc(var(--pad-page)*3.2);right:var(--pad-page);left:auto}
  .kq{justify-content:flex-end;padding:calc(var(--pad-page)*2) var(--pad-page) calc(var(--pad-page)*4.5)}
  .ch-bot{grid-template-columns:auto 1fr}
  .ch-bot-axis{grid-column:1}
  /* Odometer-.ch-bot wie die Kapitel behandeln: Copy zentriert oben, tl-Achse+Punkt zentriert darunter
     (war nebeneinander → Achse an den linken Rand gedrückt, Gary iter41) */
  .ach-head .ch-bot{grid-template-columns:1fr;justify-items:center}
  .ach-head .ch-bot .chapter-copy{grid-column:1;order:1;text-align:center;max-width:none;padding-left:0;justify-self:center}   /* justify-self:center → Odometer-Beschreibung wirklich mittig (Bild1, Gary iter52) */
  .ach-head .ch-bot-axis{grid-column:1;order:2}
  /* Rot-HG-Kreise auf Mobile: der globale svg{max-width:100%}-Cap quetscht die 100vh-Breite auf
     390px → verzerrt+vermittigt. Cap aufheben → Bögen sweepen wieder aus der rechten unteren Ecke;
     Bögen heller, damit sie sichtbar sind (Gary iter41) */
  .ch-scene-bg .redbg__circles{max-width:none}
  .ch-scene-bg .redbg__circles .cbright{stroke:rgba(255,255,255,.82)}
  /* (Kein body/overflow-x-Clip: bricht in Kombination mit .ach-run{overflow:clip} die Odometer-Sticky.
     Sidescroll-Ursache war der fixed Loader mit Überbreite → oben via transform:scale entschärft.
     redbg-Kreise sind bereits doppelt geклиpt (.redbg{overflow:hidden} + .ch-scene-bg{overflow:clip}).) */
  .chapter-copy{grid-column:2;padding-left:clamp(1rem,4vw,2rem)}
  .bgm-toggle{right:auto;left:50%;transform:translateX(-50%)}
  .ach-fig{--w:44%!important}
  .pop-grid{grid-template-columns:repeat(2,1fr)}
  .pop-team{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .hud-live{display:none}   /* REC/LOCAL/NOW-PLAYING aus dem Hero raus (Gary) */
  .fi-lang-btn{font-size:12px}
  .hero-claim h1{white-space:normal}
  .hero-run{height:420vh;height:420lvh}
  .fh-redbottom{height:60%;transition:height .55s ease}   /* Landing: roter Bodengradient höher (Gary) */
  body.is-scrolled .fh-redbottom{height:48%}              /* beim Scrollen zurück auf normal */
  .statement-text{max-width:none}
  .chapter-copy{max-width:none}
  .ach-fig{--w:74%!important}
  .seq-step{width:84vw}                     /* seitlicher Abstand → Text klebt nicht an den Rändern (Gary iter42) */
  .seq-step h2{white-space:normal;font-size:12vw}   /* kleiner → „Hohenthurn" passt mit Rand */
  /* tl-Line: Desktop-„Achsen-verbunden"-Technik (siehe min-width:992-Block) nach Mobile portiert.
     Beide Achsen FÜLLEN ihre Tracks bis an die Sektionskanten (flex:1 1 auto) + opake Gradient-Enden
     → (Bug1) durchgehende Linie über Statement→Partner (kein transparentes Ende, keine Zentrier-Lücke)
     UND (Bug2) .ch-mid exakt vertikal zentriert, weil beide 1fr-Tracks jetzt gleich gefüllt sind
     (vorher oben 38lvh vs. unten ~93px → Titel nach unten gedrückt) (Gary iter45) */
  .statement{padding-bottom:0}
  .statement::before{content:'';flex:1 1 0}
  .statement .tl-axis{flex:1 1 0;min-height:10vh;min-height:10lvh;margin-bottom:0}
  .statement .tl-axis .tl-line{flex:1 1 auto;height:auto;
    background:linear-gradient(to bottom,var(--fg-3),rgba(238,235,229,.22))}
  .chapter .ch-top,.ach-head .ch-top{
    align-self:start;margin-top:calc(var(--pad-page)*-1);height:calc(100% + var(--pad-page))}
  .chapter .ch-top .tl-line.down,.ach-head .ch-top .tl-line.down{flex:1 1 auto;height:auto;
    background:linear-gradient(to bottom,rgba(238,235,229,.22),rgba(238,235,229,.26))}
  /* Untere Kapitel-Achse (Partner/Services) wieder füllend statt fixe 93px → symmetrisch zur
     Kopf-Linie → .ch-mid zentriert (überschreibt Z.1436 per Source-Order; Odometer bleibt außen vor) */
  .chapter .ch-bot-axis .tl-line{flex:1 1 auto;height:auto}
  /* B1 (Gary iter46): sichtbarer Text-Block (Überschrift+Sub+Fließtext) saß ~65px zu tief, weil der
     Fließtext unter der zentrierten Überschrift hängt. Oberen Track kleiner → .ch-mid+Copy als Gruppe
     nach oben, gleicher Abstand oben/unten. Kopf-Linie erreicht weiter die Sektions-Oberkante (Bug1),
     untere Linie wird länger. Nur Partner/Services (.chapter), Hero/Odometer unberührt. */
  .chapter .ch-grid{grid-template-rows:.66fr auto 1fr}
  /* B2 (Gary iter47): am Kapitel-Übergang erschienen ZWEI Dots (unterer Dot des ausgehenden Kapitels
     + oberer Dot des kommenden). Den unteren Dot von Partner/Services entfernen → es bleibt genau EIN
     Dot kurz vor der nächsten Überschrift. Linie läuft trotzdem durch. Hero/Odometer behalten ihre Dots. */
  .chapter .ch-bot-axis .tl-dot{display:none}
  /* C1 (Gary iter46): kompletter Hero-Textblock (Überschrift/Sub/Copy + tl-Dot/Line) etwas höher →
     mehr Luft nach unten. cats.js translatiert #heroClaim (Parent) → hier das innere .hero-grid. */
  .hero-grid{transform:translateY(-4vh)}
  /* Popup-Überschriften größer (war 25.6px = --fs-display am Mobile-Minimum; Impressum/Datenschitz sind 36px) (Gary iter44) */
  .popup-h{font-size:clamp(34px,9.2vw,46px)}
  /* Full-Screen-Nav nutzt die ganze Höhe: Items gleichmäßig verteilt, Footer unten (Gary iter44) */
  .fmenu{justify-content:space-between;padding:calc(env(safe-area-inset-top, 0px) + 96px) 26px calc(env(safe-area-inset-bottom, 0px) + 30px)}
  .fmenu-list{flex:1 1 auto;justify-content:space-evenly;gap:0}
  .fmenu-list button,.fmenu-list a{font-size:8.6vw}
  /* Popup-Scroll: native Scrollbar (rechts, rot) aus → stattdessen weiße Fortschrittsleiste UNTEN (Gary iter44) */
  .popup,.prj-detail{scrollbar-width:none}
  .popup::-webkit-scrollbar,.prj-detail::-webkit-scrollbar{display:none}
  .pop-progress{display:block;position:fixed;left:0;bottom:0;height:3px;width:100%;z-index:230;
    background:rgba(255,255,255,.13);opacity:0;transition:opacity .3s ease;pointer-events:none}
  .pop-progress.is-on{opacity:1}
  .pop-progress::before{content:'';display:block;height:100%;width:var(--p,0);background:#fff;transition:width .1s linear}
  .foot-cols{grid-template-columns:1fr;gap:var(--gap-1)}
  /* Bottom-Leiste SCROLL/SOUND/BACK: alle 3 auf EINER Linie, GANZ UNTEN (unter dem Film-Strip).
     Bleibt beim Scrollen fix unten (der Film-Strip darüber fadet aus) (Gary: getauscht). */
  /* Landing: Bar HOCHgesetzt (macht Platz für die Audio-Wave darunter am Boden). Beim Scrollen
     rückt sie per transition animiert nach unten auf ihre eigentliche Position (Gary iter48). */
  .ui-scroll,.ui-back,.bgm-toggle{bottom:calc(env(safe-area-inset-bottom, 0px) + 66px);transition:bottom .45s cubic-bezier(.4,0,.2,1)}
  body.is-scrolled .ui-scroll,body.is-scrolled .ui-back{bottom:calc(env(safe-area-inset-bottom, 0px) + 24px)}
  /* C2 (Gary iter46): beim Scrollen wird der Sound-Toggle zur ~30px-Pille → tiefer setzen, damit seine
     Text-Mitte wieder auf einer Linie mit SCROLL/BACK TO TOP (Text-Labels) sitzt. */
  .bgm-toggle.is-scrolled{bottom:calc(env(safe-area-inset-bottom, 0px) + 14px)}
  .pop-grid{grid-template-columns:1fr}
  .pop-team{grid-template-columns:1fr}
  .logos-track img{height:24px;margin-right:48px}
  /* Hero-Firmen-Marquee (einzeilig) über der Bar; im Landing sichtbar, fadet beim Scrollen (Gary) */
  .hero-logos{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom, 0px) + 100px);z-index:10;pointer-events:none;opacity:1;transition:opacity .5s ease}   /* Gary iter48: Marquee ÜBER die (hochgesetzte) Bar; Wave ist jetzt separat ganz unten. Fadet beim Scrollen (fixed Wave-Kind fadet via Opacity mit — kein Reposition, da Opacity keinen Containing-Block erzeugt) */
  body.is-scrolled .hero-logos{opacity:0}
  /* Animierte Audio-Wave (Equalizer-Stil wie Sound-Button / visioned-Referenz): 63 Balken,
     gestaffelte scaleY-Welle. Über dem Marquee (Gary iter43) */
  .hero-wave{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);z-index:10;pointer-events:none;display:flex;justify-content:center;align-items:flex-end;gap:4px;height:40px;opacity:.5}   /* Gary iter48: Wave GANZ nach unten (fixed, UNTER der SCROLL/SOUND/BACK-Bar); fadet via #heroLogos-Opacity mit */
  .hero-wave i{display:block;width:2px;height:100%;background:rgba(255,255,255,.65);border-radius:1px;transform:scaleY(.16);transform-origin:center bottom;animation:hwave 1.15s ease-in-out infinite}
  .hero-wave i:nth-child(6n+2){animation-delay:-.19s}
  .hero-wave i:nth-child(6n+3){animation-delay:-.38s}
  .hero-wave i:nth-child(6n+4){animation-delay:-.57s}
  .hero-wave i:nth-child(6n+5){animation-delay:-.76s}
  .hero-wave i:nth-child(6n){animation-delay:-.95s}
}

/* ============================================================================
   TABLET HOCHFORMAT (768–991) — eigene Werte (Gary iter49): die Phone-Fixes (vw + px-Caps
   für ~390px) skalieren hier nicht sauber. Liegt zwischen Phone (≤767) und Desktop/Tablet-quer.
   Vorschau möglich (nur breiten-basiert, pointer-unabhängig).
   ========================================================================== */
@media (min-width:768px) and (max-width:991px){
  /* Bild5: Projekte-Popup — Ring + Center-Mark kleiner, Ring NICHT mehr in den Text (war 918px,
     Bottom überlappte das Label). top:38% + max-width:none erbt aus dem ≤991-Block. */
  .prj-ring{width:min(86vw,60vh);height:min(86vw,60vh)}
  /* Bild3 (Gary iter50): Orb ein wenig größer + leicht nach unten genudged → die Pfeil-Marke sitzt
     optisch mittig im Ring (die PNG-Grafik hat ihren Schwerpunkt etwas oben, Box ist konzentrisch). */
  .prj-orb{width:min(68vw,48vh);transform:translate(-50%,calc(-50% + 5%))}
  /* Bild3: Popup-Überschriften größer (Basis --fs-display ist auf Tablet zu klein) */
  .popup-h{font-size:clamp(46px,7vw,66px)}
  /* Bild4: Full-Screen-Nav nutzt die volle Höhe (wie Phone) — Items gleichmäßig verteilt, Footer unten */
  .fmenu{justify-content:space-between;padding:calc(env(safe-area-inset-top, 0px) + 120px) 40px calc(env(safe-area-inset-bottom, 0px) + 50px)}
  .fmenu-list{flex:1 1 auto;justify-content:space-evenly;gap:0}
  .fmenu-list button,.fmenu-list a{font-size:clamp(42px,5.6vw,56px)}   /* Bild2 (Gary iter50): Menü-Texte größer (Basis --fs-display ~35px war zu klein) */
  /* Bild2: Hero-HUD-Ring größer als der Orb (610px) — Phone-Cap 560px ist auf Tablet zu klein.
     Ratio Ring:Orb ~0.85 wie Desktop. cats.js legt die Scale/Einblendung beim Scrollen drauf. */
  .ring-big,.ring-hud{width:min(88vw,760px);height:min(88vw,760px)}
}

/* ============================================================================
   TABLET QUERFORMAT (≥992 + Touch/pointer:coarse) — nutzt die Desktop-Basis (Label rechts),
   aber bei Tablet-Höhe ist der Ring zu groß → Label rechts wird abgeschnitten (Bild1). Ring/Orb/
   Label-Offset ein wenig kleiner. NICHT im Preview testbar (Preview meldet pointer:fine) → am iPad prüfen.
   ========================================================================== */
@media (min-width:992px) and (pointer:coarse){
  /* Bild1 (Gary iter50): deutlich stärker verkleinert (iter49 war zu wenig) — Ring passt jetzt in die
     Tablet-Höhe (70vh), Label-Offset skaliert knapp außerhalb des Rings mit → rechter Text passt.
     NICHT im Preview testbar (coarse) → am iPad prüfen; ggf. weiter nachziehen. */
  .prj-ring{width:min(70vh,72vw);height:min(70vh,72vw)}
  .prj-orb{width:min(52vh,50vw)}   /* Gary iter51: Center-Mark ein wenig größer (war 44vh, zu klein) → Ratio zum Ring ~0.74 */
  .prj-label{left:calc(50% + min(38vh,39vw))}
  /* Bild1 (Gary iter53): Orb-Blur über den Kundenlogos — auf Tablet-Querformat greift weder die Mobile-
     noch eine Desktop-Maske → harte Bildkanten sichtbar. 4-seitige Verlaufsmaske (zwei Gradienten via
     mask-composite:intersect / -webkit-mask-composite:source-in): fadet die äußeren 10% JEDER Kante
     (oben/unten/links/rechts) auf Deckkraft 0 → keine sichtbaren Ränder. NICHT previewbar (coarse). */
  .fh-orb-blur{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
    mask-composite:intersect;
  }
}

/* ============================================================================
   DESKTOP (echter Desktop: ≥992px UND feiner Zeiger/Maus) — PURE vw/vh
   Ersetzt clamp()/min()/max()-Caps durch reine Viewport-Einheiten:
   → proportional (Kreise + Bilder skalieren gemeinsam) + Cmd±-Zoom-stabil.
   Kalibrierpunkt 1440×900: pixelgleich zum bisherigen clamp-Stand.
   Gate `(pointer:fine)`: Tablet quer/hoch (pointer:coarse) + Mobile bleiben
   komplett unverändert (behalten clamp/px + ihre Media-Queries). NIE px-Caps.
   ========================================================================== */
@media (min-width:992px) and (pointer:fine){
  :root{
    --fs-hero:8vw;
    --fs-counter:8.333vw;
    --fs-display:3.444vw;
    --fs-title:2.885vw;
    --fs-lg:1.667vw;
    --fs-body:1.17vw;
    --fs-sm:.855vw;
    --fs-label:.888vw;
    --pad-page:3.333vw;
    --pad-sec:10vw;
    --gap-1:1.662vw;
    --gap-2:3.333vw;
    --logo-h:1.667vw;
  }
  /* Hero-Kreise wie Alt-Seite: große Hintergrundkreise 103vw (breitenbezogen, konstant),
     HUD-Ring 96vh kleiner + genestet (roter Progress). Orb reine vh. Keine px-Caps. */
  .ring-big{width:103vw;height:103vw}
  .ring-hud{width:115vh;height:115vh}   /* größer (Gary): Ring deutlicher um den Orb, Mittelmaß Alt-Seite */
  .fh-orb-scale{width:115vh;height:115vh}
  .fh-orb-gl,.fh-orb-static,.fh-orb-blur{width:96vh}   /* Orb größer (Gary); Verhältnis zum Ring wie zuvor (~0.83) */
  .rh-line{width:4vw}
  .rh-label{left:calc(100% + 4.8vw)}
  .fv-name{font-size:1.2vw}
  .fv-idx{font-size:.66vw}
  .fv-time{font-size:.74vw}
  /* Sektions-Bilder + Groß-Typo: reine vw → passen proportional zu den Kreisen */
  .statement-text{font-size:4.444vw}
  .about-copy{font-size:2.11vw}
  .about-big{font-size:8.49vw}
  .mtx-row{font-size:17vw}
  .about-track{gap:1.2vw}
  .about-track figure{width:25vw}
  .about-track img{height:30vw}   /* Alt-Seite .ueber-mich-portrait 25vw×30vw (nicht 2:3) */
  .ach-figs{gap:7.78vw}
  .logos-track img{height:1.7vw;margin-right:6.5vw}
  /* ach-fig --w liegt inline als clamp() → nur auf Desktop per !important auf reine vw
     (Tablet quer/hoch behält das inline clamp; Mobile behält seinen 44%/74%-Override) */
  .ach-figs .ach-fig:nth-child(1){--w:33vw!important}
  .ach-figs .ach-fig:nth-child(2){--w:26vw!important}
  .ach-figs .ach-fig:nth-child(3){--w:30vw!important}
  .ach-figs .ach-fig:nth-child(4){--w:29vw!important}
  .ach-figs .ach-fig:nth-child(5){--w:28vw!important}
  .ach-figs .ach-fig:nth-child(6){--w:34vw!important}
  /* Fixe UI-Chrome (Sprachwahl, Sound): reine vw statt max(px,vw)-Floor */
  .fi-lang{right:1.04vw;gap:.83vw}
  .fi-lang-btn{font-size:.8vw}
  .fi-lang-btn.is-active::after{height:.1vw;margin:.2vw auto 0}
  .bgm-toggle{gap:.62vw}   /* font-size erbt --fs-sm (= .ui-back) */
  .bgm-toggle .bgm-bars{height:1.04vw}
  .bgm-toggle.is-scrolled{height:2.35vw;padding:0 1.1vw 0 .9vw;font-size:.78vw}

  /* ---- ACHSEN VERBUNDEN (Nutzer-Vorgabe): die tl-Linien laufen durchgehend über die
     Sektionsgrenzen. Statement: Linie füllt bis zur Sektions-Unterkante (::before als
     Gegengewicht hält den Text zentriert). Kapitel/Ach-Kopf: Linie startet an der
     Sektions-Oberkante (negative Marge hebt das Grid-Padding auf). ---- */
  .statement{padding-bottom:0}
  .statement::before{content:'';flex:1 1 0}
  .statement .tl-axis{flex:1 1 0;min-height:12vh;min-height:12lvh}
  .statement .tl-axis .tl-line{flex:1 1 auto;height:auto;
    background:linear-gradient(to bottom,var(--fg-3),rgba(238,235,229,.16))}
  .chapter .ch-top,.ach-head .ch-top{
    align-self:start;margin-top:calc(var(--pad-page)*-1);height:calc(100% + var(--pad-page));
  }
  .chapter .ch-top .tl-line.down,.ach-head .ch-top .tl-line.down{flex:1 1 auto;
    background:linear-gradient(to bottom,rgba(238,235,229,.16),rgba(238,235,229,.26))}
  /* Achse des Ach-Kopfs endet mit ihrem Punkt IM Projekte-Bereich (nicht mehr bis in die
     Seq-Sektion, Gary): kürzer + wird beim Seq-Eintritt per JS ausgeblendet (main.js). */
  .ach-head .ch-bot-axis.is-long{height:calc(100% + 40vh);height:calc(100% + 40lvh)}
  /* Wander-Puls: ein hellerer Abschnitt läuft die Linien entlang nach unten Richtung Punkt */
  .tl-line{position:relative;overflow:hidden}
  .tl-line::after{content:'';position:absolute;left:0;width:100%;height:16%;top:-20%;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7),transparent);
    animation:tlpulse 3.6s cubic-bezier(.45,.05,.55,.95) infinite}

  /* ---- CUSTOM CURSOR (nur Desktop): roter Punkt + nachziehender Ring ---- */
  body{cursor:none}
  a,button,[data-nav],.fs-frame,.fi-lang-btn,.popup-close,input,textarea,select,label{cursor:none}
  .cur-dot,.cur-ring{
    position:fixed;left:0;top:0;z-index:400;pointer-events:none;border-radius:50%;
    transform:translate(-50%,-50%);will-change:transform;opacity:0;
  }
  .cur-dot{width:.42vw;height:.42vw;background:var(--red);box-shadow:0 0 .6vw rgba(246,56,63,.55)}
  .cur-ring{
    width:2.3vw;height:2.3vw;border:1px solid rgba(246,56,63,.5);
    transition:width .32s ease,height .32s ease,border-color .32s ease,background .32s ease,opacity .3s ease;
  }
  .cur-ring.is-hover{width:3.8vw;height:3.8vw;border-color:rgba(255,255,255,.75);background:rgba(246,56,63,.08)}
  .cur-ring.is-down{width:1.6vw;height:1.6vw;border-color:var(--red)}
  html.has-cursor .cur-dot,html.has-cursor .cur-ring{opacity:1}

  /* ---- Abstand Services→Projekte verkürzen (Gary: „viel zu viel leer"): Projekte-Sektion
       hochziehen, damit „06" früher kommt. NUR Desktop. ---- */
  .ach-run{margin-top:-70vh;margin-top:-70lvh}

  /* ---- Rest auf reine vw (kein px-/min()-Cap → Cmd±-Zoom-stabil): Seq-Text, Grain, Footer, alle
       Popups. Kalibrierpunkt 1440 (px/14.4 = vw). Tablet/Mobile behalten ihre px-Werte. ---- */
  .seq-step{width:62.5vw}                         /* war min(90vw,900px) → 900px-Cap raus */
  .noise{background-size:33.33vw auto}            /* Grain 480px-Kachel → 33.33vw = konstante Dichte bei jedem Zoom */
  .foot-inner{max-width:none}                     /* war 1500px-Cap → volle Breite minus vw-Padding */
  .popup-inner{max-width:83.33vw}                 /* 1200px */
  .popup-close{width:3.06vw;height:3.06vw;font-size:1.53vw}   /* 44/44/22px */
  .pm-wrap,.sv-wrap{max-width:none}               /* Team/Services: 1400px-Cap raus (volle Breite minus vw-Padding) */
  /* Legal-Popups (Impressum/Datenschutz): fixe px/clamp-Caps → reine vw (1440-Look erhalten, px/14.4) */
  .lg-title{font-size:4.44vw}                     /* clamp-Cap 64px */
  .lg-lead{font-size:1.25vw}                      /* clamp-Cap 18px */
  .lg-main p{font-size:1.11vw}                    /* 16px */
  .lg-fine{font-size:.903vw!important}            /* 13px (Basis hat !important) */
  .lg-dl dt{font-size:.903vw}                     /* 13px */
  .lg-dl dd{font-size:1.11vw}                     /* 16px */
  .lg-eyebrow{font-size:.833vw;gap:.9vw}          /* 12px / 13px */
  .lg-eyebrow::before{width:2.5vw}                /* 36px */
  .lg-main h3{font-size:1.94vw;margin:2.36vw 0 .14vw}  /* clamp-Cap 28px + 34px */
  /* Popup-Breiten-Caps + Abstand-nach-oben (Button-Freiraum) → reine vw (waren ID/2-Klassen px-Caps) */
  #popKontakt .popup-inner{max-width:61.11vw;padding-top:calc(var(--pad-page)*.7 + 6.25vw)}   /* 880px + 90px */
  #popTeam .popup-inner,#popServices .popup-inner,#popImpressum .popup-inner,#popDatenschutz .popup-inner{padding-top:calc(var(--pad-page)*.7 + 6.11vw)}  /* 88px */
  .popup-legal .popup-inner{max-width:62.5vw}     /* 900px */
  .prj-title{font-size:1.65vw}                    /* war clamp(...,1.65vw,...) */
  .prj-detail-inner{max-width:76.4vw;padding:calc(var(--pad-page)*.7 + 4.17vw) var(--pad-page) calc(var(--pad-page)*2)}  /* 1100px + 60px */
  .prj-back{top:calc(var(--pad-page)*.7 + .42vw)} /* 6px */

  /* ---- Runde 2: clamp(rem,vw,rem)-Caps (kleben bei Zoom-out am rem-Max) → reine vw-Terme ---- */
  .loader-num{font-size:9vw}                      /* clamp(3.4rem,9vw,9rem) */
  .hero-grid{gap:2.6vw}                           /* clamp(1.4rem,2.6vw,2.6rem) */
  .ch-grid,.ach-head{gap:3.4vw}                   /* clamp(2rem,3.4vw,3rem) */
  .chapter-copy{padding:.2em 0 0 3vw}             /* clamp(1rem,3vw,2.6rem) */
  .kunden-label,.kunden-idx{left:5vw}             /* clamp(1.5rem,5vw,4.5rem) — Kundenstimmen-Abstand (Gary) */
  .kq{padding:calc(var(--pad-page)*2) 5vw}        /* clamp(1.5rem,5vw,4.5rem) */

  /* ---- Runde 2: rohe px/rem-Werte (Audit) → vw. Burger, Sound-Equalizer, Dots, Logos, Legal-Details ---- */
  .nav-burger{gap:.347vw;width:1.528vw}           /* 5px / 22px */
  .nav-menu-btn.is-open .nav-burger i:first-child{transform:translateY(.226vw) rotate(45deg)}   /* 3.25px */
  .nav-menu-btn.is-open .nav-burger i:last-child{transform:translateY(-.226vw) rotate(-45deg)}
  .bgm-toggle .bgm-bars{gap:.14vw}                /* 2px */
  .bgm-bars i{width:.14vw;height:.28vw}           /* 2px / 4px (Equalizer-Balken) */
  .rh-dot{width:.417vw;height:.417vw}             /* 6px (HUD-Punkt) */
  .tl-dot{width:.278vw;height:.278vw}             /* 4px (Achsen-Punkte) */
  /* tl-Linien + Spine: 1px wird bei 25% Zoom auf ~0.25px unsichtbar → Breite in vw (0.07vw = 1px, zoom-stabil) */
  .tl-line{width:.07vw}
  .ch-spine{width:.07vw}
  .seq-axis .tl-line{width:.07vw}
  .logos-mq{padding:.417vw 0}                     /* 6px */
  .lg-main ul{padding-left:1.528vw;font-size:1.111vw}  /* 22px / 16px */
  .lg-main li{margin:.486vw 0}                    /* 7px */
  .lg-main h4{font-size:1.458vw;margin:1.389vw 0 0}    /* clamp-Cap 21px / 20px */
  .lg-rule{margin:1.389vw 0 0}                    /* 20px */
  .lg-dl{margin:.556vw 0 0}                       /* 8px */
  .lg-dl>div{grid-template-columns:15.972vw 1fr;gap:1.25vw;padding:.972vw 0}  /* 230px / 18px / 14px */
}
@keyframes tlpulse{0%{top:-20%}100%{top:120%}}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- Firmen-Marquee (#klogos) auf Mobile: läuft IMMER endlos durch (Bug3, Gary iter45) ----
   Der globale prefers-reduced-motion-Block oben friert per `*{animation-iteration-count:1!important}`
   AUCH die Logo-Laufschrift ein (iOS/Android „Bewegung reduzieren" → Marquee snappt einmal auf -50%
   und STOPPT). Der `#klogos`-Präfix schlägt den `*`-Selektor (höhere Spezifität) UND steht NACH dem
   RM-Block (Source-Order) → erzwingt die Endlos-Animation zurück. Bewusster A11y-Trade-off nur für
   diese eine dekorative, langsame (42s) Drift; kein anderer RM-Effekt wird reaktiviert.
   Zusätzlich: SVG-Logos ohne intrinsische Breite können vor dem Decode width:auto=0 ergeben → mit
   flex:none kollabiert die ganze Reihe (leer). min-width erzwingt sofort eine sichtbare Box.
   Alles ≤991 → Desktop (min-width:992 + pointer:fine) bleibt unberührt. */
@media(max-width:991px){
  #klogos .logos-track{animation:mq 42s linear infinite!important}
  #klogos .logos-mq.is-rev .logos-track{animation-direction:reverse!important}
  #klogos .logos-track img{min-width:56px}
}