/* ============================================================
   Lokal gehostete Schriften (kein externer Google-Fonts-Aufruf,
   DSGVO-konform: keine IP-Übertragung an Google beim Seitenaufruf)
   ============================================================ */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500;
  font-display:swap; src:url('../fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:600;
  font-display:swap; src:url('../fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700;
  font-display:swap; src:url('../fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:300;
  font-display:swap; src:url('../fonts/outfit-300.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/outfit-400.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:500;
  font-display:swap; src:url('../fonts/outfit-500.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* ============================================================
   JD STUDIOS — Redesign 2026
   Konzept: "Die Seite als Studio-Session"
   Dunkle On-Air-Atmosphäre · Timecode · Waveform als Signature
   Radius-System: Interaktiv = Pill · Panels = 28px · Kerne = 20px
   Akzent-Lock: Lavendel #ACADE8 (Brand) auf Indigo-Schwarz
   ============================================================ */

:root{
  --ink:        #020204;
  --ink-2:      #050508;
  --ink-deep:   #0B0B1D;
  --line:       rgba(172,173,232,.14);
  --line-soft:  rgba(172,173,232,.08);
  --indigo:     #565D92;
  --lav:        #ACADE8;
  --lav-fill:   #ACADE8;
  --lav-dim:    rgba(172,173,232,.55);
  --paper:      #EDEDF8;
  --text:       #E7E7F3;
  --dim:        #9FA0C2;
  --r-panel:    28px;
  --r-core:     20px;
  --ease:       cubic-bezier(.32,.72,0,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --font-d:     'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-b:     'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-m:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --pad-x:      clamp(1.25rem, 4vw, 4rem);
  --section-y:  clamp(6rem, 12vw, 11rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  background:#020204 !important;
  scrollbar-color:#565D92 #020204;
  scrollbar-width:thin;
}
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#020204; }
::-webkit-scrollbar-thumb{
  background:#565D92;
  border-radius:999px;
  border:2px solid #020204;
}
::-webkit-scrollbar-thumb:hover{ background:#ACADE8; }
/* scroll-behavior:smooth entfernt – ließ jeden Mausrad-Tick als
   Animation statt als sofortigen Sprung ablaufen (fühlte sich "zäh" an) */

body{
  background:var(--ink) !important;
  color:var(--text);
  font-family:var(--font-b);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--lav-fill); color:var(--ink-deep); }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--lav);
  outline-offset:4px;
  border-radius:4px;
}

.container{
  width:min(1400px, 100% - 2*var(--pad-x));
  margin-inline:auto;
}

/* ---------- Skip-Link ---------- */
.skip-link{
  position:fixed; top:-100%; left:1rem; z-index:120;
  background:var(--lav-fill); color:var(--ink-deep);
  font-family:var(--font-m); font-size:.8rem;
  padding:.6rem 1.1rem; border-radius:999px;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- Grain (fixed, pointer-events none) ---------- */
/* Grain-Textur entfernt (war Hauptursache für langsames Scrollen:
   ein live berechneter SVG-Rauschfilter über den kompletten,
   fixierten Viewport ist bei jedem Scroll-Frame teuer) */

/* ---------- Playhead (Scroll-Fortschritt) ---------- */
.playhead{
  position:fixed; top:0; left:0; z-index:100;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--indigo), var(--lav));
  transform:scaleX(0); transform-origin:left center;
  pointer-events:none;
}
@supports (animation-timeline: scroll()) {
  .no-gsap .playhead{
    animation:playhead-grow linear both;
    animation-timeline:scroll(root);
  }
  @keyframes playhead-grow{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
}

/* ============================================================
   NAVIGATION — Floating Glass Pill
   ============================================================ */
.nav{
  position:fixed; z-index:10000;
  top:clamp(.9rem, 2vw, 1.4rem);
  left:50%; transform:translateX(-50%);
  width:min(1400px, 100% - 2*clamp(.9rem,3vw,2.5rem));
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding-inline:1.5rem .625rem;
  border-radius:999px;
  border:1px solid var(--line-soft);
  background:rgba(6,6,10,.94);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.scrolled{
  background:rgba(2,2,4,.97);
  border-color:var(--line);
  box-shadow:0 20px 60px rgba(5,5,12,.5);
}
.nav-logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav-logo img{ height:22px; width:auto; display:block; }

.nav-links{
  display:flex; align-items:center; gap:clamp(1rem, 2.4vw, 2.25rem);
  list-style:none;
}
.nav-links a{
  position:relative;
  font-family:var(--font-b); font-weight:400;
  font-size:.9375rem; color:var(--dim);
  padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--lav);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .45s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--paper); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:left center;
}

.nav-cta{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-d); font-weight:500; font-size:.9rem;
  color:var(--ink-deep);
  background:var(--lav-fill);
  padding:.7rem .55rem .7rem 1.35rem;
  border-radius:999px;
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.nav-cta .arr{
  width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(20,20,46,.14);
  transition:transform .45s var(--ease);
}
.nav-cta .arr-ico{ font-size:14px; }
.nav-cta:hover{ background:#C0C1F0; }
.nav-cta:hover .arr{ transform:translate(2px,-2px); }
.nav-cta:active{ transform:scale(.97); }

/* Burger */
.menu-toggle-input{
  position:absolute; opacity:0; width:1px; height:1px;
  pointer-events:none;
}
.burger{
  display:block;
  width:44px; height:44px;
  border-radius:999px;
  position:relative;
  flex:0 0 auto;
  cursor:pointer;
}
.burger span{
  position:absolute; left:50%; top:50%;
  width:20px; height:1.5px; background:var(--paper);
  transition:transform .5s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ transform:translate(-50%, calc(-50% - 4px)); }
.burger span:nth-child(2){ transform:translate(-50%, calc(-50% + 4px)); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
body:has(.menu-toggle-input:checked) .burger span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
body:has(.menu-toggle-input:checked) .burger span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
body:has(.menu-toggle-input:checked){ overflow:hidden; }
body:has(.menu-toggle-input:checked) .menu-overlay{
  opacity:1 !important; visibility:visible !important;
}
body:has(.menu-toggle-input:checked) .menu-overlay a{
  transform:translateY(0) !important; opacity:1 !important;
}

/* Mobile Overlay */
.menu-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(2,2,4,.98);
  display:flex !important; flex-direction:column; justify-content:center;
  padding:var(--pad-x);
  opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), visibility 0s .2s;
}
.menu-overlay.open{ opacity:1 !important; visibility:visible !important; transition:opacity .2s var(--ease); }
.menu-overlay ul{ list-style:none; display:grid; gap:.4rem; }
.menu-overlay a{
  display:inline-block;
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(2.2rem, 9vw, 3.4rem);
  letter-spacing:-.02em; line-height:1.15;
  color:var(--paper);
  transform:translateY(1rem); opacity:0;
  transition:transform .3s var(--ease-out), opacity .3s var(--ease-out), color .3s;
  transition-delay:0s;
}
.menu-overlay a:hover{ color:var(--lav); }
.menu-overlay a.menu-cta{ color:var(--lav); }
.menu-overlay a.menu-cta:hover{ color:#C0C1F0; }
.menu-overlay.open a{ transform:translateY(0); opacity:1; }
.menu-overlay.open li:nth-child(1) a{ transition-delay:.02s; }
.menu-overlay.open li:nth-child(2) a{ transition-delay:.05s; }
.menu-overlay.open li:nth-child(3) a{ transition-delay:.08s; }
.menu-overlay.open li:nth-child(4) a{ transition-delay:.11s; }
.menu-overlay.open li:nth-child(5) a{ transition-delay:.14s; }
body.menu-locked{ overflow:hidden; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(5.5rem, 9vh, 6rem);
  padding-bottom:clamp(9rem, 18vh, 12rem);
  overflow:clip;
}
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--hero-img);
  background-size:cover; background-position:center 42%;
  opacity:.3; filter:grayscale(.25) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
}
.hero-photo-wide{ background-position:78% 38%; }
.hero-glow::before{
  content:""; position:absolute;
  left:-15%; top:12%;
  width:70vw; height:70vw; max-width:980px; max-height:980px;
  background:radial-gradient(circle, rgba(86,93,146,.32) 0%, rgba(86,93,146,0) 62%);
  filter:blur(10px);
}
.hero-glow::after{
  content:""; position:absolute;
  right:-10%; top:-18%;
  width:46vw; height:46vw; max-width:640px; max-height:640px;
  background:radial-gradient(circle, rgba(172,173,232,.13) 0%, rgba(172,173,232,0) 65%);
}

.hero-inner{ position:relative; z-index:2; }

.hero-formats{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.9rem 1.1rem;
  font-family:var(--font-m); font-weight:500;
  font-size:clamp(.85rem, 1.3vw, 1rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--lav);
  margin-bottom:clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero-formats .dot{
  width:5px; height:5px; border-radius:999px;
  background:var(--lav);
  animation:dot-pulse 2.6s var(--ease) infinite;
}
.hero-formats .dot:nth-of-type(2){ animation-delay:.4s; }
.hero-formats .dot:nth-of-type(3){ animation-delay:.8s; }
@keyframes dot-pulse{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.35); }
}

.hero-h{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(2.25rem, 5.75vw, 4.95rem);
  line-height:1.04; letter-spacing:-.03em;
  color:var(--paper);
  max-width:16ch;
  padding-bottom:.08em; /* Descender-Reserve für Kursive */
}
.hero-h .accent{
  font-style:italic; font-weight:600;
  color:var(--lav);
  line-height:1.1;
}
.hero-sub{
  margin-top:clamp(1.5rem, 2.6vw, 2.25rem);
  max-width:46ch;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight:500;
  color:var(--dim);
}
.hero-cta-row{
  margin-top:clamp(2.25rem, 4vw, 3.25rem);
  display:flex; align-items:center; gap:1.5rem;
}

/* Primäre CTA — Pill mit Button-in-Button-Pfeil */
.btn-primary{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--font-d); font-weight:600; font-size:1rem;
  color:var(--ink-deep);
  background:var(--lav-fill);
  padding:.55rem .55rem .55rem 1.75rem;
  border-radius:999px;
  transition:background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.btn-primary .arr{
  width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(20,20,46,.14);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.btn-primary .arr-ico{ font-size:17px; transition:transform .5s var(--ease); }
.btn-primary:hover{ background:#C0C1F0; box-shadow:0 16px 50px rgba(172,173,232,.22); }
.btn-primary:hover .arr{ transform:translate(2px,-2px) scale(1.05); }
.btn-primary:active{ transform:scale(.97); }

/* Sekundäre CTA — Outline-Pill */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--font-d); font-weight:500; font-size:1rem;
  color:var(--paper);
  border:1px solid var(--line);
  padding:.55rem .55rem .55rem 1.75rem;
  border-radius:999px;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.btn-ghost .arr{
  width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.btn-ghost .arr-ico{ font-size:17px; }
.btn-ghost:hover{ border-color:var(--lav-dim); background:rgba(172,173,232,.06); }
.btn-ghost:hover .arr{ transform:translate(2px,-2px); border-color:var(--lav-dim); }
.btn-ghost:active{ transform:scale(.97); }

/* ============================================================
   RAIL — "Ein Setup – mehrere outputs"
   ============================================================ */
.rail{ position:relative; }
.rail-viewport{ position:relative; }

.rail-track{
  display:flex; flex-direction:column;
  gap:clamp(2.5rem, 5vw, 4rem);
  padding-block:var(--section-y);
  width:min(1400px, 100% - 2*var(--pad-x));
  margin-inline:auto;
}

.rail-head h2{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(2.2rem, 5vw, 4.25rem);
  line-height:1.05; letter-spacing:-.03em;
  color:var(--paper);
  max-width:16ch;
}
.rail-head h2 em{
  font-style:italic; color:var(--lav); font-weight:600;
}

.rail-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem, 2.6vw, 2rem);
}
@media (min-width:680px){
  .rail-cards{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1100px){
  .rail-cards-8{ grid-template-columns:1fr 1fr 1fr 1fr; }
  .rail-cards-4{ grid-template-columns:1fr 1fr 1fr 1fr; }
}

/* Partner-Logo-Badge (unter dem Partnerstudio-Foto) */
.partner-logo{
  display:inline-flex; align-items:center;
  margin-top:1.1rem;
  width:fit-content;
}
.partner-logo img{ max-height:72px; width:auto; display:block; }

.partner-logo-text{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.1rem;
  font-family:var(--font-m); font-weight:500; font-size:.92rem;
  color:var(--lav);
  transition:color .3s var(--ease);
}
.partner-logo-text:hover{ color:var(--paper); }

/* Kachel ohne Foto (z.B. Recklinghausen) */
.clip-core-noimg{
  justify-content:center;
  min-height:clamp(220px, 24vw, 280px);
  background:
    radial-gradient(120% 130% at 50% 120%, rgba(172,173,232,.14) 0%, rgba(172,173,232,0) 60%);
}
.clip-core-noimg h3{ margin-top:.5rem; }

/* Kompakte Variante für viele Kacheln auf einmal (bessere Übersicht) */
.clip-core-compact{
  display:block;
  min-height:0;
  padding:1.75rem 1.75rem 2rem;
}
.clip-core-compact .clip-visual{
  width:96px; height:96px; margin:0 0 1.25rem;
  background:none; border:none; border-radius:0;
  display:block;
}
.clip-core-compact .clip-visual .viz{ width:100%; height:100%; }
.rail-cards-8 .clip-core-compact h3{
  font-size:1.15rem; letter-spacing:.01em; line-height:1.3;
  text-transform:uppercase; font-weight:700;
}
.rail-cards-8 .clip-core-compact p{
  margin-top:.6rem; font-size:1rem; color:var(--dim); max-width:none;
}

/* Output-Karte — Double-Bezel, deutlich prominenter */
.clip{
  border-radius:var(--r-panel);
  border:1px solid var(--line);
  background:rgba(172,173,232,.07);
  padding:11px;
  transition:border-color .5s var(--ease), transform .5s var(--ease), background .5s var(--ease);
}
.clip:hover{ border-color:var(--lav-dim); transform:translateY(-4px); background:rgba(172,173,232,.11); }
.clip-core{
  height:100%;
  border-radius:var(--r-core);
  background:#020203;
  box-shadow:inset 0 1px 0 rgba(172,173,232,.12);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  display:flex; flex-direction:column;
}
.clip-visual{
  height:clamp(160px, 20vw, 210px);
  display:grid; place-items:center;
  border-radius:calc(var(--r-core) - 6px);
  background:
    radial-gradient(120% 130% at 50% 120%, rgba(172,173,232,.28) 0%, rgba(172,173,232,0) 60%),
    rgba(2,2,4,.6);
  border:1px solid var(--line);
  overflow:hidden;
  margin-bottom:clamp(1.5rem, 2.4vw, 2rem);
}
.clip h3{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing:-.015em; color:var(--paper);
}
.clip p{
  margin-top:.65rem; color:var(--text);
  font-size:1.05rem; max-width:32ch;
}

/* Karten-Visuals */
.viz{ width:min(70%, 260px); height:auto; color:var(--lav); }
.viz .bar{ transform-origin:center; }
.badge-svg{ width:100%; height:100%; object-fit:contain; }
.arr-ico{
  display:block; line-height:1; font-style:normal;
  font-family:var(--font-b);
}
@keyframes eq{ from{ transform:scaleY(.3); } to{ transform:scaleY(1); } }
@keyframes vu{ from{ transform:translateY(6px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }
@keyframes ring{ 0%,100%{ transform:scale(1); opacity:.35; } 50%{ transform:scale(1.12); opacity:.1; } }

/* Abschluss-Statement der Rail */
.rail-outro p{
  font-family:var(--font-d); font-weight:500;
  font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  line-height:1.35; letter-spacing:-.015em;
  color:var(--paper);
  max-width:44ch;
}.rail-outro p .accent{ color:var(--lav); font-style:italic; }

.rail-outro{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.rail-photo-banner{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  border-radius:var(--r-panel);
  overflow:hidden;
}
.rail-photo-banner img{
  width:100%; height:clamp(220px, 32vw, 420px); object-fit:cover;
  display:block; filter:grayscale(.1) contrast(1.03);
}

/* ============================================================
   STORY — Manifest mit Scroll-Reveal
   ============================================================ */
.story{
  position:relative;
  padding-block:var(--section-y);
  overflow:clip;
}
.story::before{
  content:""; position:absolute; z-index:0;
  right:-12%; top:8%;
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle, rgba(86,93,146,.22) 0%, rgba(86,93,146,0) 62%);
  pointer-events:none;
}
.story .container{ position:relative; z-index:1; }

.story-photo-bg{
  position:absolute; z-index:0; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.story-photo-bg img{
  width:100%; height:100%; object-fit:cover; object-position:70% 20%;
  opacity:.5;
  filter:grayscale(.25) contrast(1.05);
  -webkit-mask-image:radial-gradient(60% 55% at 78% 32%, #000 30%, transparent 90%);
  mask-image:radial-gradient(60% 55% at 78% 32%, #000 30%, transparent 90%);
}

.story-badge{
  position:absolute; z-index:2;
  right:clamp(0px, 4vw, 3rem); top:-3.5rem;
  width:clamp(96px, 12vw, 150px); height:clamp(96px, 12vw, 150px);
  color:var(--lav);
  opacity:.9;
}

/* ============================================================
   ABOUT — Bio-Sektion
   ============================================================ */
.about-bio{
  display:grid; grid-template-columns:minmax(220px, 320px) 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.about-photo img{
  width:100%; height:auto; border-radius:var(--r-core);
  filter:grayscale(.15) contrast(1.03);
}
.about-text p{
  font-size:1.1rem; line-height:1.75; color:var(--dim);
  margin-bottom:1.25rem;
}
.about-text p:last-child{ margin-bottom:0; }
.about-text strong{ color:var(--paper); font-weight:600; }
@media (max-width:760px){
  .about-bio{ grid-template-columns:1fr; }
  .about-photo{ max-width:260px; margin:0 auto; }
}

.story-h{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(2.3rem, 6vw, 5rem);
  line-height:1.08; letter-spacing:-.03em;
  max-width:17ch;
  color:var(--paper);
  padding-bottom:.08em;
}
.story-h .accent{ color:var(--lav); font-style:italic; font-weight:600; line-height:1.12; }
.story-sub{
  margin-top:clamp(2rem, 3.5vw, 3rem);
  max-width:52ch;
  font-size:clamp(1.2rem, 2vw, 1.55rem);
  color:var(--dim);
}

/* ============================================================
   KUNDEN — Index-Liste
   ============================================================ */
.clients{ padding-block:var(--section-y); }
#jd-leistungen-liste{ padding-bottom:clamp(1.5rem, 4vw, 3rem); }
#jd-partnerstudios .rail-track{ padding-top:clamp(1.5rem, 4vw, 3rem); }
#jd-prozessschritte{ padding-top:clamp(1.5rem, 4vw, 3rem); }
#jd-netzwerk{ padding-top:clamp(1.5rem, 4vw, 3rem); }
.clients-head{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing:-.02em; color:var(--paper);
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.clients-head em{ font-style:italic; color:var(--lav); font-weight:600; }
.client-row{
  position:relative;
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:2rem; align-items:center;
  padding-block:clamp(2rem, 3.8vw, 3rem);
  padding-inline:clamp(0px, 2vw, 1.5rem);
  border-top:1px solid var(--line);
}
.client-row:last-of-type{ border-bottom:1px solid var(--line); }
.client-row::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(172,173,232,.08), rgba(172,173,232,0) 70%);
  opacity:0; transition:opacity .5s var(--ease);
  pointer-events:none;
}
.client-row:hover::before{ opacity:1; }
.client-num{
  font-family:var(--font-m); font-weight:500; font-size:.9rem;
  color:var(--lav); letter-spacing:.05em;
}
.client-title{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(1.7rem, 3.6vw, 2.75rem);
  letter-spacing:-.02em; color:var(--paper);
  transition:transform .55s var(--ease), color .55s var(--ease);
}
.client-eq{
  flex:0 0 auto;
  display:flex; align-items:flex-end; gap:3px;
  width:16px; height:18px;
  opacity:0; transform:scale(.6);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.client-eq i{
  width:3px; height:100%; border-radius:2px;
  background:var(--lav);
  transform:scaleY(.25); transform-origin:bottom;
}
.client-row:hover .client-title{ color:var(--lav); transform:translateX(.6rem); }
.client-row:hover .client-eq{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:no-preference){
  .client-row:hover .client-eq i{ animation:eq-mini .9s var(--ease) infinite alternate; }
  .client-eq i:nth-child(2){ animation-delay:-.3s; }
  .client-eq i:nth-child(3){ animation-delay:-.6s; }
}
@keyframes eq-mini{ from{ transform:scaleY(.25); } to{ transform:scaleY(1); } }
.client-desc{
  color:var(--text); font-size:1.05rem;
  transition:color .5s var(--ease);
}
.client-row:hover .client-desc{ color:var(--paper); }
.clients-cta{ margin-top:clamp(2.5rem, 5vw, 4rem); }

/* ============================================================
   PROZESS-ZEITSTRAHL ("Dein Projekt")
   ============================================================ */
/* ============================================================
   RECHTSTEXTE — Impressum, Datenschutz
   ============================================================ */
.legal-content{
  padding-bottom:var(--section-y);
  max-width:74ch;
}
.legal-content h2{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing:-.01em; color:var(--paper);
  margin-top:3rem; margin-bottom:1rem;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{
  font-family:var(--font-d); font-weight:700;
  font-size:1.2rem; color:var(--lav);
  margin-top:2rem; margin-bottom:.75rem;
}
.legal-content h4{
  font-family:var(--font-b); font-weight:600;
  font-size:1.02rem; color:var(--paper);
  margin-top:1.5rem; margin-bottom:.5rem;
}
.legal-content p{
  color:var(--dim); font-size:1rem; line-height:1.7;
  margin-bottom:1.1rem;
}
.legal-content ul{
  margin:0 0 1.1rem 1.25rem;
  color:var(--dim); font-size:1rem; line-height:1.7;
}
.legal-content li{ margin-bottom:.4rem; }
.legal-content a{ color:var(--lav); text-decoration:underline; text-underline-offset:.15em; }
.legal-content a:hover{ color:var(--paper); }
.legal-content strong{ color:var(--paper); font-weight:600; }

/* ============================================================
   KONTAKT — Formular
   ============================================================ */
.contact-tel{
  color:var(--lav); font-weight:600;
  text-decoration:underline; text-underline-offset:.15em;
}
.contact-tel:hover{ color:var(--paper); }

.contact-form-section{ padding-bottom:var(--section-y); }

/* ============================================================
   RECHTSTEXTE — Impressum / Datenschutz
   ============================================================ */
.legal-hero{
  min-height:auto;
  padding-top:clamp(7rem, 14vh, 9rem);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
}
.legal-hero .hero-h{ font-size:clamp(2rem, 4.5vw, 3.2rem); }

.legal-content{
  max-width:72ch;
  padding-bottom:var(--section-y);
  color:var(--dim);
  font-size:1.02rem;
  line-height:1.7;
}
.legal-content h2{
  font-family:var(--font-d); font-weight:700; color:var(--paper);
  font-size:clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing:-.01em;
  margin-top:3rem; margin-bottom:1rem;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{
  font-family:var(--font-d); font-weight:700; color:var(--paper);
  font-size:1.2rem;
  margin-top:2.25rem; margin-bottom:.75rem;
}
.legal-content h4{
  font-family:var(--font-b); font-weight:600; color:var(--paper);
  font-size:1.02rem;
  margin-top:1.5rem; margin-bottom:.5rem;
}
.legal-content p{ margin-bottom:1.1rem; }
.legal-content ul{ margin:0 0 1.1rem 1.3rem; }
.legal-content li{ margin-bottom:.4rem; }
.legal-content a{ color:var(--lav); text-decoration:underline; text-underline-offset:.15em; }
.legal-content a:hover{ color:var(--paper); }
.legal-content strong{ color:var(--paper); font-weight:600; }

.jd-website-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.jd-contact-form{
  display:grid; gap:1.5rem;
  max-width:640px;
}
.form-row{ display:grid; gap:.6rem; }
.form-row label{
  font-family:var(--font-m); font-size:.8rem; letter-spacing:.06em;
  color:var(--dim); text-transform:uppercase;
}
.form-row input, .form-row textarea{
  width:100%;
  font-family:var(--font-b); font-size:1.05rem; color:var(--paper);
  background:var(--ink-2, transparent);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.95rem 1.15rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-row input:focus, .form-row textarea:focus{
  outline:none;
  border-color:var(--lav);
  box-shadow:0 0 0 3px var(--lav-dim, rgba(172,173,232,.2));
}
.form-row textarea{ resize:vertical; min-height:140px; }
.form-consent{
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.92rem; color:var(--dim); line-height:1.5;
}
.form-consent input[type="checkbox"]{
  margin-top:.2rem; width:18px; height:18px; flex:0 0 auto;
  accent-color:var(--lav);
}
.form-consent a{ color:var(--lav); text-decoration:underline; text-underline-offset:.15em; }
.form-consent a:hover{ color:var(--paper); }

.jd-contact-form .btn-primary{
  justify-self:start; border:none; cursor:pointer;
  font-family:var(--font-d);
}

.form-notice{
  max-width:640px; margin-bottom:2rem;
  padding:1rem 1.35rem; border-radius:14px;
  font-size:.98rem;
}
.form-notice-success{
  background:rgba(172,173,232,.14); border:1px solid var(--line); color:var(--paper);
}
.form-notice-error{
  background:rgba(220,90,90,.1); border:1px solid rgba(220,90,90,.3); color:var(--paper);
}
.form-notice-error a{ color:var(--lav); text-decoration:underline; }

/* ============================================================
   ABOUT — Portrait + Text
   ============================================================ */
.about-intro-grid{
  display:grid; grid-template-columns:1fr 300px;
  gap:clamp(1.5rem, 3vw, 2.25rem);
  align-items:start;
}
.about-portrait{
  order:2;
  position:relative;
  border-radius:var(--r-core);
  overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, rgba(172,173,232,.14) 0%, rgba(172,173,232,0) 60%);
}
.about-portrait img{
  width:100%; height:auto; display:block;
  filter:grayscale(.55) contrast(1.1) brightness(1.0);
  -webkit-mask-image:linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 80%, transparent 100%);
}
.about-intro-text{ order:1; }
.about-bio-text{
  font-size:1.2rem;
  font-weight:400;
  color:var(--dim);
  margin-bottom:1.35rem;
  max-width:60ch;
}
.about-bio-text:last-child{ margin-bottom:0; }
.about-bio-text strong{ color:var(--paper); font-weight:600; }
@media (max-width:820px){
  .about-intro-grid{ grid-template-columns:1fr; }
  .about-portrait{ order:2; max-width:220px; margin:1.75rem auto 0; }
  .about-intro-text{ order:1; }
}

/* Kompakterer Header nur für die About-Seite */
.hero-compact{
  min-height:auto;
  padding-top:clamp(7rem, 14vh, 9rem);
  padding-bottom:clamp(3rem, 6vh, 4.5rem);
}
.hero-compact .hero-photo{ mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }

.process-timeline{
  position:relative;
  padding-top:.5rem;
}
.process-timeline::before{
  content:"";
  position:absolute;
  left:27px; top:8px; bottom:8px;
  width:1px;
  background:linear-gradient(180deg, var(--lav) 0%, var(--line) 85%, transparent 100%);
}
.process-step{
  position:relative;
  display:flex; align-items:flex-start; gap:1.75rem;
  padding-bottom:clamp(2.25rem, 4vw, 3.25rem);
}
.process-step:last-child{ padding-bottom:0; }
.process-dot{
  position:relative; z-index:1; flex:0 0 auto;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--ink);
  border:1.5px solid var(--lav);
  color:var(--lav);
  font-family:var(--font-m); font-weight:500; font-size:.9rem;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.process-body h3{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing:-.01em; color:var(--paper);
  margin-bottom:.5rem;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.process-body p{
  color:var(--dim); font-size:1.02rem; max-width:52ch;
  transition:color .4s var(--ease);
}
.process-step:hover .process-dot{
  background:var(--lav-fill); color:var(--ink-deep); transform:scale(1.08);
}
.process-step:hover .process-body h3{
  color:var(--lav); transform:translateX(.5rem);
}
.process-step:hover .process-body p{ color:var(--paper); }
@media (max-width:600px){
  .process-timeline::before{ left:23px; }
  .process-dot{ width:48px; height:48px; font-size:.8rem; }
  .process-step{ gap:1.25rem; }
  .process-step:hover .process-body h3{ transform:none; }
}

/* ============================================================
   KONTAKT-CTA — Lavendel-Flip
   ============================================================ */
.contact{
  position:relative;
  background:var(--lav-fill);
  color:var(--ink-deep);
  padding-block:clamp(7rem, 15vw, 12rem);
  overflow:clip;
}
.contact-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--contact-img);
  background-size:cover; background-position:center;
  opacity:.12; mix-blend-mode:multiply;
}
.contact .container{ position:relative; z-index:1; }
.contact-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem, 4vw, 4rem);
}
.contact-link h2{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(2.1rem, 5.6vw, 4.75rem);
  line-height:1.06; letter-spacing:-.03em;
  max-width:15ch;
  transition:transform .6s var(--ease);
}
.contact-arr{
  position:relative;
  flex:0 0 auto;
  width:clamp(72px, 9vw, 110px); height:clamp(72px, 9vw, 110px);
  border-radius:999px;
  border:1.5px solid var(--ink-deep);
  display:grid; place-items:center;
  transition:background .55s var(--ease), transform .55s var(--ease);
  will-change:transform;
}
.contact-arr .arr-ico{
  position:relative; z-index:1;
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  transition:transform .55s var(--ease), color .55s var(--ease);
}
.contact-link:hover h2{ transform:translateX(.5rem); }
.contact-link:hover .contact-arr{ background:var(--ink-deep); }
.contact-link:hover .contact-arr .arr-ico{ color:var(--lav); transform:rotate(45deg); }
.contact-link:active .contact-arr{ transform:scale(.95); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  border-top:1px solid var(--line-soft);
  padding-top:var(--section-y);
  overflow:clip;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr;
  gap:clamp(2.5rem, 5vw, 5rem);
  padding-bottom:clamp(3.5rem, 6vw, 5rem);
}
.footer-brand img{ height:24px; width:auto; display:block; }
.footer-brand p{
  margin-top:1.75rem; max-width:36ch; color:var(--dim); font-size:1rem;
}
.footer-brand strong{ color:var(--text); font-weight:500; }
.footer h3{
  font-family:var(--font-m); font-weight:500;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--lav-dim);
  margin-bottom:1.4rem;
}
.footer ul{ list-style:none; display:grid; gap:.7rem; }
.footer ul a{
  color:var(--dim); font-size:1rem;
  transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.footer ul a:hover{ color:var(--lav); padding-left:.4rem; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-block:2rem;
  border-top:1px solid var(--line-soft);
}
.footer-badge{ width:56px; height:56px; color:var(--lav); opacity:.85; }
@media (prefers-reduced-motion:no-preference){
}
.footer-copy{
  font-family:var(--font-m); font-size:.78rem; letter-spacing:.1em;
  color:var(--dim);
}

.footer-ghost{
  margin-top:1rem;
  color:var(--lav);
  opacity:.06;
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 96%);
  mask-image:linear-gradient(180deg, #000 20%, transparent 96%);
  pointer-events:none;
}
.footer-ghost img{ width:100%; height:auto; display:block; }

/* ============================================================
   SCHALL — Frequenzlinie
   ============================================================ */
/* ============================================================
   REVEALS
   ============================================================ */
.js [data-reveal]{
  opacity:0;
  transform:translateY(1.5rem);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--d, 0s);
}
.js [data-reveal].in{
  opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero-formats .dot{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .contact-link{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; gap:3rem; }
}
@media (max-width:680px){
  .nav{ padding-inline:1rem .5rem; gap:.75rem; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-logo img{ height:18px; }
}
@media (max-width:767px){
  .client-row{ grid-template-columns:1fr; gap:.75rem; align-items:start; }
  .client-row:hover .client-title{ transform:none; }
  .hero-cta-row{ flex-direction:column; align-items:flex-start; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .story-badge{ position:static; margin-bottom:2rem; }
}