/* ==========================================================================
   main.css — Dark-Editorial × LeadPilots-System × GSAP-Scroll
   Lädt nach styles.css. Wirkt nur auf .lst-page.lst-dark (Body-Klassen).

   Tokens stammen verbindlich aus docs/03-design-system.md. Re-Deklaration
   im Scope sichert, dass editorial.css-Overrides nicht durchschlagen.
   ========================================================================== */

.lst-page.lst-dark {
  /* Token-Re-Bind im Page-Scope (editorial.css darf nicht durchschlagen).
     UI-Akzent: monochrom weiß. Kein Gold, kein Blau, keine Farb-Pop.
     Hierarchie kommt aus Typo, Spacing und Opacity-Stufen, nicht aus Farbe. */
  --color-bg-dark: #020202;
  --color-text-on-dark: #F9F7F4;
  --color-accent: #F9F7F4;
  --color-accent-hover: #FFFFFF;
  --color-on-accent: #000000;
  /* Single source of truth for the BLUE brand accent (eyebrows, dots, glows,
     gradient words). Value + rgb are royal-blue (matches the LeadPilots
     dark-blue system); seit dem Token-Rename heißt das Token, was es ist. */
  --color-accent-blue: #6b8cff;
  --color-accent-blue-rgb: 107, 140, 255;
  --color-accent-red: var(--color-accent-blue);         /* deprecated alias */
  --color-accent-red-rgb: var(--color-accent-blue-rgb); /* deprecated alias */
  --color-border-on-dark: rgba(249, 247, 244, 0.08);
  /* Weiß-Leiter (warm) + Glas-Tokens — die EINE Material-Sprache der Seite */
  --ink-95: rgba(249, 247, 244, 0.95);
  --ink-60: rgba(249, 247, 244, 0.6);
  --ink-40: rgba(249, 247, 244, 0.4);
  --glass-bg: rgba(10, 10, 12, 0.72);
  --glass-blur: 10px;
  --glass-border: rgba(249, 247, 244, 0.10);
  --glass-inset: rgba(249, 247, 244, 0.18);
  --color-focus-ring: rgba(249, 247, 244, 0.35);
  --hero-line-width: 2px;
  --hero-line-color: #ffffff;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Headlines use the same grotesk as the rest of the brand (Fraunces was never loaded) */
  --font-headline: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  /* Einheitliche Schrift überall: Inter, auch für blaue Akzent-Labels
     ("LeadPilot Agents.", "Automatisch.") — kein Mono mehr im Einsatz. */
  --font-secondary: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", monospace;
  /* Type-Ramp: eine Quelle für alle Sektionen. Hero-H1 bewusst außerhalb
     (clamp/cqw-Komposition bleibt unangetastet). Rollen siehe DESIGN.md. */
  --type-h2-size: clamp(26px, min(5.6svh, 2.8vw), 40px);   /* Sektions-Headlines */
  --type-display-size: clamp(26px, min(5.6svh, 2.9vw), 44px); /* Item-Namen (Kacheln, Agent-Wörter) */
  --type-h3-size: clamp(24px, 2.6vw, 32px);                /* Sub-Headlines (Modal, Menü) */
  --type-lead-size: clamp(16px, 1.25vw, 19px);             /* Leads unter Headlines */
  --type-small-size: clamp(13px, min(2.4svh, 1.05vw), 16px); /* Bullets, Task-Listen, Captions */
  --type-meta-size: 12px;                                  /* Eyebrows, Labels, Footer */
  --type-micro-size: 11px;                                 /* Nav-Links, Counter, CTA-Pills */
  --type-btn-size: 14px;                                   /* Buttons überall gleich */
  --type-label-tracking: 0.14em;                           /* Eyebrows + Labels (weiß und blau) */
  --side-pad-mobile: 24px;
  --side-pad-desktop: 48px;
  --max-content-width: 1200px;
  --section-pad-mobile: 96px;
  --section-pad-desktop: 160px;
}

/* --------------------------------------------------------------------------
   Page base
   -------------------------------------------------------------------------- */
/* Das einzige erlaubte "Schrift-Leuchten" der Seite. */
::selection {
  background: rgba(107, 140, 255, 0.25);
}
.lst-page.lst-dark,
.lst-page.lst-dark body {
  background: var(--color-bg-dark) !important;
  color: var(--color-text-on-dark);
}
.lst-page.lst-dark {
  /* clip statt hidden: clippt horizontal genauso, macht den body aber NICHT zum
     Scroll-Container — sonst registrieren sich die Scroll-Snap-Areas der Sections
     beim (nicht scrollenden) body statt beim Viewport und Snap greift nie. */
  overflow-x: hidden;
  overflow-x: clip;
}
.lst-page.lst-dark,
.lst-page.lst-dark *,
.lst-page.lst-dark *::before,
.lst-page.lst-dark *::after {
  box-sizing: border-box;
}
html:has(body.lst-page.lst-dark) {
  max-width: 100vw;
  overflow-x: hidden !important;
}
body.lst-page.lst-dark {
  max-width: 100vw;
  overflow-x: hidden !important; /* Fallback für Browser ohne overflow: clip */
  overflow-x: clip !important;   /* kein Scroll-Container -> Snap-Areas gehören zum Viewport */
}
.lst-page.lst-dark main {
  display: block;
}
.lst-page.lst-dark section[id] {
  scroll-margin-top: 80px;
}

/* Reset für H1-H3 + body-Typografie aus Design-System */
.lst-page.lst-dark h1,
.lst-page.lst-dark h2,
.lst-page.lst-dark h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--color-text-on-dark);
  text-wrap: balance;
  margin: 0;
  text-transform: none;
}
/* Sektions-Headlines einheitlich: Weight 500, enge Zeilen, leicht negativ
   gesperrt. H1 (Hero) bleibt bei 600 — bewusst außerhalb der Ramp. */
.lst-page.lst-dark h2,
.lst-page.lst-dark h3 {
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.lst-page.lst-dark p,
.lst-page.lst-dark li,
.lst-page.lst-dark a,
.lst-page.lst-dark dt,
.lst-page.lst-dark dd {
  font-family: var(--font-body) !important;
  font-style: normal;
}

/* Shell — Content-Container */
.lst-shell {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--side-pad-mobile);
}
@media (min-width: 1024px) {
  .lst-shell { padding: 0 var(--side-pad-desktop); }
}

/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */
.lst-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  line-height: 1.4;
  font-weight: 500;
  /* Satzform, keine Sperrung — einheitliche Kicker-Typo (Blau-Diät) */
  color: var(--color-text-on-dark);
  opacity: 0.95;
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   Buttons (Dark-Mode)
   -------------------------------------------------------------------------- */
.lst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--type-btn-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 16px 32px;
  border: 1px solid var(--color-text-on-dark);
  border-radius: 2px;
  background: transparent;
  color: var(--color-text-on-dark);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  line-height: 1;
  white-space: nowrap;
}
.lst-btn:hover {
  background: var(--color-text-on-dark);
  color: var(--color-bg-dark);
  transform: translateY(-1px);
}
.lst-btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lst-btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.lst-btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* --------------------------------------------------------------------------
   S1 — Hero (asymmetrisch 7/5)
   -------------------------------------------------------------------------- */
.lst-hero {
  min-height: 100vh;
  padding: 96px 0 80px;
  display: flex;
  align-items: center;
  background: transparent; /* Blue-Flow-Canvas scheint durch */
  position: relative;
  isolation: isolate;
  --hero-line-progress: 1;
}
@media (min-width: 1024px) {
  .lst-hero { padding: 160px 0 96px; }
}
/* Kein Glow, kein Apple-Light: starke Leere statt Dekor. */
.lst-hero__shell {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--side-pad-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Desktop: Right-Bleed 60% — Bild bricht aus dem max-width-Container raus,
   reicht bis zur Viewport-Rechtskante. Text-Spalte schmal links, im
   Container-Raster eingebettet. */
@media (min-width: 1024px) {
  .lst-hero {
    padding: 0;
    height: 100vh;       /* exakt Viewport, kein Wuchs durch Bild-Höhe */
    min-height: 100vh;
    overflow: hidden;    /* Bild darf nicht über Hero hinausragen */
    --hero-line-progress: 0.6;
  }
  .lst-hero__shell {
    max-width: none;
    margin: 0;
    padding: 0;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 0;
    align-items: stretch;
    min-height: 100vh;
    height: 100vh;
  }
  .lst-hero__text {
    align-self: end;
    padding-left: clamp(40px, 4.5vw, 88px);
    padding-right: 32px;
    padding-bottom: clamp(56px, 9vh, 112px);
    max-width: none;
  }
  .lst-hero__media {
    align-self: stretch;
    margin: 0;
    overflow: hidden;
    height: 100%;
    position: relative;
    /* Border kommt jetzt aus dem Base-Rule (1px rgba 22% weiß) — kein 8px-Cut mehr */
  }
  .lst-hero__media img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center;
    /* Bild deutlich dunkler — Editorial-Schatten statt Bildbühne. */
    filter: brightness(0.62) contrast(1.05) saturate(0.92);
  }
}
.lst-hero__text { max-width: 520px; }
/* Mobil (<1024px): Hero-MacBook wird komplett ausgeblendet — die Hide-Regel
   steht weiter unten im dunklen Mobil-Block (~Z. 1833), weil sie das dortige
   `display:grid !important` der dunklen Basis-Regel überschreiben muss
   (gleiche Spezifität, daher MUSS sie danach stehen). JS lädt das 3D mobil
   ohnehin nicht (leadpilots.js LP_HERO_3D_DESKTOP_ONLY). */
/* Hero-Akzent laut Referenz-Layout: nur in der Hero-Section im Einsatz
   (H1-Zeile 2 + Primär-Button). Globaler Akzent bleibt --color-accent-blue. */
.lst-hero { --hero-accent: #6b8cff; --hero-accent-hover: #6b8cff; /* EIN Blau; Hover-Cue = Bewegung/Schatten */ }
/* Eyebrow über der Headline: klein, gedämpft, kein Fettdruck, 8px zur H1 */
.lst-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 500;
  line-height: 1.4;
  /* Alpha in der Farbe statt opacity: die Intro-Choreo setzt opacity inline
     auf 1 — die Kicker-Dimmung muss das überleben. */
  color: rgba(249, 247, 244, 0.95);
  margin: 0 0 8px;
}
/* H1: Inter Sans-Display — clean, modern, editorial.
   !important nötig, weil editorial.css h1 mit !important überschreibt. */
.lst-hero__h1 {
  font-family: var(--font-sans) !important;
  font-size: clamp(58px, 7.4vw, 110px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.022em !important;
  font-weight: 600 !important;
  font-variation-settings: normal;
  margin: 0 0 16px; /* Referenz-Layout: 16px zur Subline */
  /* text-indent (vererbt sich auf die Zeilen-Blöcke, wird — anders als margin —
     von keiner responsiven !important-Regel überschrieben): -0.067em ≈ 4px bei
     59px = optischer Ausgleich der Glyph-Seitenrand-Aussparung der großen
     Display-Headline. Zieht die Ink-Kante des ersten Buchstabens bündig mit
     Eyebrow + Lead darüber/darunter (Jeremy). */
  text-indent: -0.067em;
  color: var(--color-text-on-dark);
  text-wrap: balance;
}
.lst-hero__h1 .word {
  display: inline-block;
  white-space: pre;
}
/* Die zwei Headline-Zeilen: jede Zeile (vor und nach dem JS-Word-Split)
   als eigener Block — Zeile 1 weiß, Zeile 2 im Hero-Akzent. */
.lst-hero__h1-line,
.lst-hero__h1 > .word {
  display: block;
}
.lst-hero__h1-line--accent {
  color: var(--hero-accent);
}

.lst-hero__h1-line {
  display: inline;
}

.lst-hero__lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead-size);
  line-height: 1.55;
  color: var(--color-text-on-dark);
  margin: 0 0 28px; /* Referenz-Layout: 28px zur CTA-Gruppe */
  max-width: 520px; /* Referenz-Layout: Subline max. 520px, 3-4 Zeilen */
  font-weight: 500; /* einheitliches Lead-Gewicht */
  opacity: 0.95; /* leicht gedämpft */
}
.lst-hero__cta-row {
  display: flex;
  gap: 20px; /* Referenz-Layout */
  flex-wrap: wrap;
  align-items: center;
}
/* Hero-CTAs laut Referenz-Layout: ein gefüllter Primär-Button im Hero-Akzent,
   daneben ein klar untergeordneter Textlink mit Pfeil. Keine Ghost-Paare. */
.lst-hero .lst-btn {
  font-size: var(--type-btn-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 14px 28px;
  border-radius: 6px;
  border-width: 1px;
}
.lst-hero .lst-btn--primary {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: #ffffff;
}
.lst-hero .lst-btn--primary:hover {
  background: var(--hero-accent-hover);
  border-color: var(--hero-accent-hover);
  color: #ffffff;
}
.lst-hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-btn-size);
  font-weight: 500;
  line-height: 1;
  color: rgba(249, 247, 244, 0.95);
  text-decoration: none;
  transition: color .2s ease;
}
.lst-hero__cta-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.lst-hero__cta-link:hover,
.lst-hero__cta-link:focus-visible {
  color: var(--color-text-on-dark);
}
.lst-hero__cta-link:hover .lst-hero__cta-arrow {
  transform: translateX(3px);
}
.lst-hero__cta-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .lst-hero__cta-link,
  .lst-hero__cta-arrow {
    transition: none;
  }
  .lst-hero__cta-link:hover .lst-hero__cta-arrow {
    transform: none;
  }
}
/* Hero-Media: einfache, immer sichtbare weiße Border rundum.
   Keine Mehrfach-Layer, keine State-Toggles, kein Grain darüber. */
.lst-hero__media-anchor {
  display: none;
}
.lst-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  border: 1.5px solid #ffffff;
  box-sizing: border-box;
}
.lst-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}

@media (min-width: 1024px) {
  .lst-hero::after {
    content: none;
  }
  .lst-hero::before {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   GSAP / Lenis prep — set initial state via JS-toggleable class
   No flicker before JS boots: .is-animating disables transitions
   -------------------------------------------------------------------------- */
.lst-anim-init [data-anim] {
  opacity: 0;
  transform: translateY(40px);
}
.lst-anim-init .lst-hero__h1 .word {
  opacity: 0;
}

.lp-hero-intro-active .lst-hero {
  background: transparent !important;
}

.lp-hero-intro-active .lst-hero__media--macbook,
.lp-hero-intro-active .lst-hero__media.lst-hero__media--macbook {
  background: transparent !important;
}

.lp-hero-intro-active .lst-hero__text > *,
.lp-hero-intro-active .lst-hero__h1,
.lp-hero-intro-active .lst-hero__h1 .word {
  /* P7-Nachsteuerung: exakt 0 (vorher 0.02 als LCP-Kandidat). Der Text
     erscheint erst NACH der Kamerafahrt — die H1 ist kein früher LCP mehr,
     der Canvas übernimmt. Greift nur im Erstpaint-Fenster mit aktivem JS;
     ohne JS fehlt die Klasse -> Text voll sichtbar (No-JS-Härtung). */
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}


/* --------------------------------------------------------------------------
   prefers-reduced-motion — alles direkt sichtbar, keine Animationen
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lst-anim-init [data-anim],
  .lst-anim-init .lst-hero__h1 .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .lst-hero__media img { transform: none !important; }
  .lst-btn { transition: none !important; }
}

/* --------------------------------------------------------------------------
   S2 — Leistungsübersicht
   -------------------------------------------------------------------------- */
.lst-services-overview {
  padding: var(--section-pad-mobile) 0;
  background: transparent; /* Blue-Flow-Canvas scheint durch */
  color: var(--color-text-on-dark);
}
@media (min-width: 1024px) {
  .lst-services-overview {
    --overview-canvas-height: 470vh;
    min-height: var(--overview-canvas-height);
    padding: 0;
    overflow: visible;
  }
  .lst-services-overview > .lst-shell {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    isolation: isolate;
  }
}

.lst-services-overview__canvas {
  position: relative;
}
@media (min-width: 1024px) {
  .lst-services-overview__canvas {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: var(--overview-canvas-height);
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }
}

.lst-services-overview__head {
  max-width: 760px;
  margin: 0 0 48px;
}
@media (min-width: 768px) {
  .lst-services-overview__head {
    margin-bottom: 64px;
  }
}
@media (min-width: 1024px) {
  .lst-services-overview__head {
    display: none;
  }
}

.lst-services-overview__h2 {
  font-family: var(--font-headline) !important;
  font-size: var(--type-h2-size);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--color-text-on-dark);
  margin: 0;
  max-width: 18ch;
}

.lst-services-overview__lead {
  font-family: var(--font-body);
  font-size: var(--type-lead-size);
  line-height: 1.55;
  font-weight: 500; /* einheitliches Lead-Gewicht */
  color: var(--color-text-on-dark);
  opacity: 1;
  max-width: 58ch;
  margin: 24px 0 0;
}

.lst-services-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .lst-services-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .lst-services-overview__grid {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

.lst-services-overview__tile {
  --focus: 0;
  min-width: 0;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 20px 52px 20px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-on-dark);
  text-decoration: none;
  overflow: visible;
  cursor: pointer;
  transition: color .22s ease;
}
.lst-services-overview__tile:hover {
  background: transparent;
}
.lst-services-overview__tile:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 8px;
}

@media (min-width: 1024px) {
  .lst-services-overview__tile {
    position: absolute;
    left: clamp(40px, 5vw, 92px);
    width: min(760px, 58vw);
    min-height: clamp(112px, 15vh, 150px);
    padding: clamp(18px, 2vw, 28px) 72px clamp(18px, 2vw, 28px) 0;
    transform: translate3d(calc(var(--focus) * 22px), 0, 0) scale(calc(0.985 + (var(--focus) * 0.055)));
    transform-origin: left center;
    will-change: transform;
    backface-visibility: hidden;
  }
  .lst-services-overview__tile:nth-child(1) {
    top: 118vh;
  }
  .lst-services-overview__tile:nth-child(3) {
    top: 160vh;
  }
  .lst-services-overview__tile:nth-child(5) {
    top: 202vh;
  }
  .lst-services-overview__tile:nth-child(2) {
    top: 292vh;
  }
  .lst-services-overview__tile:nth-child(4) {
    top: 334vh;
  }
  .lst-services-overview__tile:nth-child(6) {
    top: 376vh;
  }
  .lst-services-overview__tile:nth-child(2),
  .lst-services-overview__tile:nth-child(4),
  .lst-services-overview__tile:nth-child(6) {
    right: clamp(40px, 6vw, 100px);
    left: auto;
    align-items: flex-end;
    padding-right: 0;
    padding-left: 72px;
    text-align: right;
    transform: translate3d(calc(var(--focus) * -22px), 0, 0) scale(calc(0.985 + (var(--focus) * 0.055)));
    transform-origin: right center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lst-services-overview__tile {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .lst-services-overview {
    min-height: auto;
    padding: var(--section-pad-desktop) 0;
  }
  .lst-services-overview > .lst-shell {
    position: relative;
    height: auto;
    min-height: 0;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--side-pad-desktop);
    overflow: visible;
  }
  .lst-services-overview__canvas,
  .lst-services-overview__grid {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    transform: none !important;
  }
  .lst-services-overview__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 56px;
  }
  .lst-services-overview__head {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-bottom: 72px;
    transform: none;
  }
  .lst-services-overview__tile,
  .lst-services-overview__tile:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Artistische Textbühne
   -------------------------------------------------------------------------- */
.lst-hero__text {
  position: relative;
  isolation: isolate;
}
/* Ghost-Word `.lst-hero__text::before { content: "Leistungen" }` entfernt:
   verursachte den überlappenden Phantom-Effekt im Hero. */
.lst-hero__lead {
  position: relative;
  padding-top: 0;
}
.lst-hero__lead::before {
  content: none;
  display: none;
}

@media (min-width: 1024px) {
  .lst-hero__shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .lst-hero__text {
    align-self: center;
    padding-left: clamp(40px, 4.5vw, 88px);
    padding-right: 32px;
    padding-bottom: 0;
    max-width: none;
    transform: translateY(3vh);
  }
  .lst-hero__h1 {
    font-size: clamp(56px, 5.4vw, 88px) !important;
    letter-spacing: -0.025em !important;
  }
  .lst-hero__lead {
    max-width: 42ch;
  }
}

.lst-services-overview__head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.lst-services-overview__h2,
.lst-services-overview__lead {
  margin-left: auto;
  margin-right: auto;
}
.lst-services-overview__h2 {
  max-width: 16ch;
}
.lst-services-overview__lead {
  max-width: 54ch;
}

@media (max-width: 1023px) {
  .lst-hero__text {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lst-hero__text {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Large headings use the same sans font as the hero statement
   -------------------------------------------------------------------------- */
.lst-page.lst-dark .lst-services-overview__h2 {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important; /* einheitliches Headline-Gewicht (Ramp) */
  letter-spacing: -0.01em !important;
  font-variation-settings: normal !important;
}

/* --------------------------------------------------------------------------
   Secondary small typography
   -------------------------------------------------------------------------- */
.lst-page.lst-dark .lst-eyebrow {
  font-family: var(--font-secondary) !important;
}

/* ==========================================================================
   Grain Overlay
   ========================================================================== */
/* Active background — subtle animated film grain over the dark page (premium dark look).
   P7: reales Element statt ::after — der Intro-Tween schreibt die Opacity
   inline auf DIESES Element (kein --lp-reveal/calc mehr, dessen Custom-
   Property-Write das gesamte Dokument invalidierte). */
.lst-page.lst-dark .lp-grain {
  position: fixed;
  /* Viewport + 48px Drift-Reserve statt 200%×200%: die Animation bewegt max. 24px,
     der Composite-Layer wird dadurch ~4x kleiner — optisch identisch (Noise kachelt). */
  top: -48px;
  left: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  pointer-events: none;
  z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  /* Basis-Look (No-JS/Mobile); im Desktop-Intro dimmt JS die Opacity inline
     (Black-Phase = totes #020202, Rampe mit dem bg-Tween). */
  opacity: 0.05;
  will-change: transform;
  /* Continuous (non-stepped) drift -> texture stays alive without flickering over the 3D screen */
  animation: lp-grain 7s linear infinite;
}
@keyframes lp-grain {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-24px, 16px); }
}

/* (Der frühere Ambient-Glow .lp-bg::before entfällt — Licht liefert jetzt
   ausschließlich der Blue-Flow-Shader in #lp-bg-flow.) */
@media (prefers-reduced-motion: reduce) {
  .lst-page.lst-dark .lp-grain { animation: none; }
}

/* ==========================================================================
   LeadPilots content pass - keeps the existing dark Leistungen stage
   ========================================================================== */
.lst-page.lst-dark {
  --color-bg-dark: #020202;
  --color-text-muted-dark: rgba(249, 247, 244, 0.72);
}

.lst-hero__media--macbook {
  border: 0 !important;
  background:
    radial-gradient(circle at 52% 45%, rgba(249, 247, 244, 0.16), transparent 32%),
    radial-gradient(circle at 74% 64%, rgba(255, 90, 31, 0.12), transparent 24%),
    transparent;
  overflow: visible !important;
  display: grid;
  place-items: center;
  min-height: min(72vh, 680px);
}

.lst-hero__media--macbook::before {
  content: "";
  position: absolute;
  width: min(65vw, 695px); /* Deko-Ellipse wächst mit dem +12% größeren MacBook mit */
  aspect-ratio: 1;
  border: 1px solid rgba(249, 247, 244, 0.2);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(0.54);
  opacity: 0.75;
}

.lp3d-macbook-canvas,
.lp3d-macbook-fallback {
  position: relative;
  z-index: 1;
  display: block;
  /* +12% (660 -> 740): MacBook größer über die Canvas-Fläche statt Model-Scale —
     das Frustum wächst proportional mit, die pixel-vermessene Dreh-Reserve
     bleibt erhalten -> kein Clipping bei voller Rotation. Container hat overflow:visible. */
  width: min(92vw, 740px);
  height: min(92vw, 740px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
}

.lp3d-macbook-canvas,
.lp3d-macbook-fallback {
  grid-area: 1 / 1;
}

.lp3d-macbook-canvas {
  z-index: 2;
}

.lp3d-macbook-fallback {
  z-index: 1;
  opacity: 0.96;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.lp3d-macbook-fallback.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.lp-dark-footer {
  padding: 30px 0;
  background: transparent; /* Blue-Flow voll sichtbar */
  color: rgba(249, 247, 244, 0.95);
  border-top: 1px solid rgba(249, 247, 244, 0.1);
  font-size: var(--type-meta-size);
  letter-spacing: 0.02em;
}

.lp-dark-footer__inner {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lp-dark-footer__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.lp-dark-footer a {
  color: inherit;
  text-decoration: none;
}

.lp-dark-footer a:hover,
.lp-dark-footer a:focus-visible {
  color: #fff;
}

@media (max-width: 1023px) {
  .lst-hero__media--macbook {
    min-height: 330px;
  }

  .lp3d-macbook-canvas,
  .lp3d-macbook-fallback {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}

/* ==========================================================================
   Pures Schwarz — alle ambient atmosphere ::before / ::after auf 0
   Background bleibt überall konstant #000000.
   ========================================================================== */
.lst-page.lst-dark .lst-services-overview {
  background: transparent !important; /* fixes globales Karo scheint durch */
}
.lst-page.lst-dark .lst-services-overview::before,
.lst-page.lst-dark .lst-services-overview::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Steps bleiben reine Textmodule: kein Fill, kein Border, auch nicht im Hover-State. */
.lst-page.lst-dark .lst-services-overview__tile,
.lst-page.lst-dark .lst-services-overview__tile:hover,
.lst-page.lst-dark .lst-services-overview__tile:active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Film Grain nur auf Bildern
   ========================================================================== */
.lst-page.lst-dark .lst-hero__media-anchor {
  display: none;
}
.lst-hero__media {
  position: relative;
  overflow: hidden;
}

.lst-page.lst-dark .lst-hero__media img {
  filter: grayscale(1) brightness(0.72) contrast(1.2) saturate(0);
}

.lst-page.lst-dark .lst-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><filter id='film'><feTurbulence type='fractalNoise' baseFrequency='1.45' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23film)'/></svg>"),
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
  background-size: 140px 140px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
  mix-blend-mode: overlay;
  opacity: 0.58;
}

/* ==========================================================================
   Hero — künstlerisch verteilte Typografie (statt zentriertem Stack)
   Meta oben links · Statement mittig-unten links · Signature darunter rechts
   ========================================================================== */
@media (min-width: 1024px) {
  .lst-page.lst-dark .lst-hero__text {
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: clamp(96px, 14vh, 160px) !important;
    padding-bottom: clamp(56px, 9vh, 112px) !important;
    max-width: none;
  }
}

.lst-page.lst-dark .lst-hero__h1 {
  font-size: clamp(41px, 5.1vw, 75px) !important;
  margin: 0 0 16px; /* Referenz-Layout: 16px zur Subline (schlägt den h1-Reset) */
}

@media (min-width: 1024px) {
  .lst-page.lst-dark .lst-hero__text {
    justify-content: flex-start !important;
    padding-top: clamp(52px, 7vh, 76px) !important;
  }

  .lst-page.lst-dark .lst-hero__cta-row {
    margin-top: clamp(54px, 7vh, 84px);
  }
}

/* Mobile-Stack: chronologisch von oben nach unten; Abstände kommen aus den
   Element-Margins (Referenz-Layout 8/16/28px), nicht aus einem Flex-Gap */
@media (max-width: 1023px) {
  .lst-page.lst-dark .lst-hero__text {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

/* ==========================================================================
   Leistungsübersicht — 6 Cards im 2x3-Viewport-Grid
   ========================================================================== */
@media (min-width: 1024px) {
  .lst-page.lst-dark .lst-services-overview {
    --overview-canvas-height: auto !important;
    min-height: 100svh !important;
    padding: clamp(46px, 6vh, 72px) 0 !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
  }

  .lst-page.lst-dark .lst-services-overview > .lst-shell {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 clamp(48px, 6vw, 104px) !important;
    overflow: visible !important;
  }

  .lst-page.lst-dark .lst-services-overview__canvas {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  .lst-page.lst-dark .lst-services-overview__head {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 auto clamp(28px, 4vh, 42px) !important;
    transform: none !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  .lst-page.lst-dark .lst-services-overview__lead {
    margin: 0 auto !important;
    max-width: 62ch !important;
    font-size: var(--type-lead-size) !important;
    line-height: 1.55 !important;
  }

  .lst-page.lst-dark .lst-services-overview__grid {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.6vh, 28px) clamp(32px, 5vw, 84px) !important;
    margin: 0 !important;
  }

  .lst-page.lst-dark .lst-services-overview__tile,
  .lst-page.lst-dark .lst-services-overview__tile:nth-child(n) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: clamp(128px, 18vh, 164px) !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: clamp(18px, 2.4vh, 26px) clamp(112px, 9vw, 140px) clamp(18px, 2.4vh, 26px) 0 !important;
    text-align: left !important;
    transform: none !important;
    transform-origin: left center !important;
  }
}

/* ==========================================================================
   Hero-Linien-System — Navbar + Ticker exakt wie Hero-Rahmen
   ========================================================================== */
.lst-page.lst-dark .lst-hero__media {
  border: var(--hero-line-width) solid var(--hero-line-color) !important;
}

@media (min-width: 1024px) {
  .lst-page.lst-dark .lst-hero::after {
    height: var(--hero-line-width) !important;
    background: var(--hero-line-color) !important;
  }
}

.lst-page.lst-dark .lst-services-overview__tile {
  position: relative;
}

/* ==========================================================================
   LeadPilots final overrides - true black page + rotating black MacBook hero
   ========================================================================== */
/* Den Grund malt die fixe Shader-Ebene #lp-bg-flow (z-index 0, erstes
   body-Kind). Sektionen bleiben transparent, damit der Nebel durchscheint.
   html-Schwarz ist nur noch Fallback (z. B. Overscroll-Bounce); es gibt KEINE
   Abhängigkeit mehr von "body muss transparent sein" oder z-index:-1-Ebenen. */
html {
  background: #020202 !important;
  background-color: #020202 !important;
  background-image: none !important;
}
body,
body.lst-page,
.lst-page.lst-dark {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.lst-page.lst-dark main,
.lst-page.lst-dark section,
.lst-page.lst-dark .lst-hero,
.lst-page.lst-dark .lst-services-overview,
.lp-dark-footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.lst-page.lst-dark .lst-hero__media--macbook,
.lst-page.lst-dark .lst-hero__media.lst-hero__media--macbook {
  display: grid !important;
  place-items: center !important;
  min-height: min(78vh, 720px) !important;
  /* transparent statt #000: opake Box erzeugte eine sichtbare Kante gegen den
     blauen Ambient-Glow (Layer-Compositing) — Seite dahinter ist ohnehin schwarz */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.lst-page.lst-dark .lst-hero__media--macbook::before,
.lst-page.lst-dark .lst-hero__media--macbook::after,
.lst-page.lst-dark .lst-hero__media.lst-hero__media--macbook::before,
.lst-page.lst-dark .lst-hero__media.lst-hero__media--macbook::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.lst-page.lst-dark .lp3d-macbook-canvas,
.lst-page.lst-dark .lp3d-macbook-fallback {
  display: block !important;
  position: relative !important;
  width: min(78vw, 920px) !important;
  height: min(78vw, 920px) !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  object-fit: contain;
  pointer-events: none;
}

.lst-page.lst-dark .lp3d-macbook-canvas,
.lst-page.lst-dark .lp3d-macbook-fallback {
  grid-area: 1 / 1 !important;
}

.lst-page.lst-dark .lp3d-macbook-canvas {
  z-index: 10 !important;
}

.lst-page.lst-dark .lp3d-macbook-fallback {
  z-index: 9 !important;
  object-fit: contain !important;
  opacity: 0.96;
}

.lst-page.lst-dark .lp3d-macbook-fallback.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1023px) {
  /* Hero-MacBook mobil KOMPLETT ausblenden. Überschreibt das
     `display:grid !important` der dunklen Basis-Regel (Z. ~1765) — gleiche
     Spezifität + !important, steht bewusst danach. Der Laptop ist mobil weg
     (Wunsch + Optimierung); JS initialisiert das 3D dort ohnehin nicht
     (leadpilots.js LP_HERO_3D_DESKTOP_ONLY). Zum Reaktivieren entfernen. */
  .lst-page.lst-dark .lst-hero__media--macbook,
  .lst-page.lst-dark .lst-hero__media.lst-hero__media--macbook {
    display: none !important;
  }
}

/* ==========================================================================
   LeadPilots services - 2x2 card grid with supplied line icons
   ========================================================================== */
.lst-page.lst-dark .lp-services-showcase {
  position: relative !important; /* P8b: Bezug für .lp-scrim--svc-in (Tal) */
  min-height: auto !important;
  padding: clamp(84px, 12vw, 160px) 0 clamp(16px, 2vw, 32px) !important;
  overflow: visible !important;
}

.lst-page.lst-dark .lp-services-showcase > .lst-shell {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: var(--max-content-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--side-pad-mobile) !important;
  overflow: visible !important;
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__canvas {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  will-change: auto !important;
}

/* --- Sektions-Atmosphäre "Rauchkegel links unten" (.lp-svc-atmo) ----------
   Eigene, auf den Bento-Bereich (.lp-services-intro = Head + Grid, NICHT die
   ganze Sektion mit der hohen Agents-Stage) gescopte Licht-Ebene. Identität
   der Sektion kommt aus DIESER Ebene; der globale Blue-Flow (#lp-bg-flow)
   bleibt im Mittelteil auf 0.4 gedimmt (js/bg-flow.js) und ist nur noch
   Grundtextur. Zwei Schichten: __core = heller Lichtkern aus Rampen-Blau
   rgb(26,89,255) + Marken-Blau rgb(107,140,255), Hotspot in der ÄUSSERSTEN
   linken unteren Ecke — im Rand neben den Karten, nicht unter den Icon-
   Clustern der KI-/Labs-Karten; __smoke = feTurbulence-Schlieren (SVG inline
   im Markup): eine ANDERE Noise-Implementierung als der Hero-fbm, einmal
   gerastert, treibt als Ganzes (kein animiertes baseFrequency = kein
   Repaint-Sturm). Bewegung ausschließlich transform (Komposit), gegenläufige
   Drifts; prefers-reduced-motion = statisches Bild. Die Glas-Karten sampeln
   die Ebene über ihren backdrop-filter — Karten-CSS bleibt unberührt. */
.lst-page.lst-dark .lp-services-intro {
  /* Anker der Atmo-Ebene. Bewusst KEIN z-index/filter/opacity hier — das
     würde eine Backdrop-Root-Grenze schaffen und dem Karten-Glas den
     Durchgriff auf Atmo + Blue-Flow nehmen. */
  position: relative;
}
.lst-page.lst-dark .lp-svc-atmo {
  position: absolute;
  inset: 0;
  overflow: hidden;      /* Drift-Übergröße + Blur enden an der Bereichs-Kante */
  pointer-events: none;
  /* kein z-index: erstes Kind -> liegt per DOM-Reihenfolge unter Head + Grid */
  /* Kanten-Feather (PFLICHT): Eltern-Maske multipliziert sich mit den Kind-
     Masken/Gradients und garantiert, dass JEDER Inhalt der Ebene an allen
     vier Seiten weich auf 0 ausläuft, bevor overflow:hidden greift — egal
     wie Hotspots/Drift innen liegen. Lehre aus dem Kasten-Bug: eine Smoke-
     Maske, die an der Box-Grenze Restdichte hat, macht die Grenze als harte
     Rechteck-Kante sichtbar. Innen darf seither Grunddichte bleiben. */
  -webkit-mask-image: radial-gradient(52% 54% at 50% 50%, #000 42%, rgba(0, 0, 0, 0.85) 60%, transparent 95%);
  mask-image: radial-gradient(52% 54% at 50% 50%, #000 42%, rgba(0, 0, 0, 0.85) 60%, transparent 95%);
}
.lst-page.lst-dark .lp-svc-atmo__core,
.lst-page.lst-dark .lp-svc-atmo__smoke {
  position: absolute;
  inset: -12%;           /* Übergröße: der Drift entblößt nie einen Rand */
  will-change: transform;
}
.lst-page.lst-dark .lp-svc-atmo__core {
  /* ACHTUNG Koordinaten-Mapping: Die Layer-Box ist 12% übergroß (inset:-12%),
     "at x% y%" meint die BOX — Bereichs-% = box% * 1.24 - 12. Hotspots:
     Haupt-Glow + Marken-Hotspot unten links (at 23%/63% bzw. 19%/66% der Box
     ~ 16%/66% bzw. 12%/70% des Bereichs): ruhige Zone an unterer Websites-
     Karte/Gap — weit weg von Headline (oben links), Karten-Oberkante und den
     Icon-Clustern (KI-Diagramme Mitte-rechts, Labs-Tools rechts unten).
     Dazu ein kleines, leises Echo oben rechts (Sektion lebt überall, ohne zu
     überstrahlen). Alle Verläufe enden VOR den Kanten; die Eltern-Maske
     feathert zusätzlich. Intensitäten bewusst Schimmer-Niveau. */
  /* Um 40% gedimmt (Opacity x 0.6): der uSpot-Hotspot im Blue-Flow hinter der
     Labs-Karte ist jetzt der Lichtkern der Sektion — keine zwei konkurrierenden
     Lichtquellen. */
  background:
    radial-gradient(30% 24% at 19% 66%, rgba(107, 140, 255, 0.096), transparent 70%),
    radial-gradient(48% 40% at 23% 63%, rgba(26, 89, 255, 0.18), rgba(26, 89, 255, 0.072) 48%, transparent 76%),
    radial-gradient(26% 20% at 69% 18%, rgba(26, 89, 255, 0.072), transparent 70%);
  animation: lp-svc-atmo-drift-a 88s ease-in-out infinite alternate;
}
.lst-page.lst-dark .lp-svc-atmo__smoke {
  display: block;
  /* Dichteverteilung der Schlieren: Schwerpunkt unten links, Grunddichte
     überall (durchgehende Atmosphäre) — die Rand-Garantie übernimmt die
     Eltern-Maske auf .lp-svc-atmo, daher ist Restdichte hier wieder erlaubt. */
  -webkit-mask-image: radial-gradient(95% 85% at 24% 60%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.08) 100%);
  mask-image: radial-gradient(95% 85% at 24% 60%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.08) 100%);
  animation: lp-svc-atmo-drift-b 64s ease-in-out infinite alternate;
}
@keyframes lp-svc-atmo-drift-a {
  from { transform: translate3d(-1.8%, 1.2%, 0) rotate(-0.6deg); }
  to   { transform: translate3d(1.4%, -1.6%, 0) rotate(0.5deg); }
}
@keyframes lp-svc-atmo-drift-b {
  from { transform: translate3d(1.6%, -1.0%, 0); }
  to   { transform: translate3d(-2.0%, 1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lst-page.lst-dark .lp-svc-atmo__core,
  .lst-page.lst-dark .lp-svc-atmo__smoke {
    animation: none;     /* statisches Atmo-Bild — Muster der Seite */
  }
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__head {
  display: block !important;
  max-width: 760px !important;
  margin: 0 0 clamp(34px, 6vw, 64px) !important;
  text-align: left !important;
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__h2,
.lst-page.lst-dark .lp-services-showcase .lst-services-overview__lead {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__h2 {
  font-size: var(--type-h2-size) !important;
  line-height: 1.12 !important;
  max-width: 22ch !important;
}

.lp-gpu-stage {
  /* P8b: Roboter ~20% größer (Cap 399->480, 24.23vw->29vw, 51.3svh->60svh),
     Seitenverhältnis 2:3 EXAKT erhalten (w = h * 0.6667). */
  --gpu-robot-w: clamp(143px, min(40svh, 19.33vw), 320px);
  --gpu-robot-h: clamp(214px, min(60svh, 29vw), 480px);
  --gpu-robot-half-h: clamp(107px, min(30svh, 14.5vw), 240px);
  --gpu-name-gap: clamp(112px, 15svh, 168px);
  --gpu-name-gap-half: calc(var(--gpu-name-gap) / 2);
  --gpu-visual-h: calc(var(--gpu-robot-h) + var(--gpu-name-gap));
  --gpu-visual-half-h: calc(var(--gpu-robot-half-h) + var(--gpu-name-gap-half));
  margin: clamp(64px, 9vw, 120px) auto 0;
  position: relative;
  isolation: isolate;
  text-align: center;
  background: transparent; /* Karo soll hier genauso sichtbar sein wie in Hero/Referenzen */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}

.lp-gpu-stage__sticky {
  position: relative;
  height: 100svh;
  min-height: min(640px, 100svh);
  display: block;
  overflow: hidden;
  background: transparent; /* Karo voll sichtbar — vorher dimmten Stage + Sticky doppelt (~0.8 Schwarz) */
}

.lp-gpu-stage__copy {
  position: absolute;
  z-index: 5;
  top: clamp(48px, 10svh, 118px);
  left: 0;
  right: 0;
  width: min(calc(100vw - 48px), 680px);
  margin: 0 auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-gpu-stage__copy .lst-eyebrow {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  /* Sperrung + lowercase aus .lst-eyebrow (Ramp) bewusst nicht überschreiben */
}

/* Eyebrow-Stack — 3 Labels, schlicht ein-/ausblenden statt 3D-Rotation */
.lp-gpu-stage__eyebrow {
  position: relative;
  display: block;
  height: 1.4em;
  opacity: 1 !important;
}

.lp-gpu-stage__eyebrow-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}

.lp-gpu-stage__eyebrow-item.is-active {
  opacity: 1;
}

/* (--final-Sonderfarbe entfernt: alle drei Eyebrow-Stufen im Standard-Kicker-
   Weiß — Blau bleibt in der Stage den "Automatisch."-Labels vorbehalten.) */

.lp-gpu-stage__copy h3 {
  width: 100%;
  margin: 0 auto !important;
  max-width: none;
  text-align: center !important;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--type-h2-size);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lp-gpu-stage__copy h3 br {
  display: block;
}

.lp-gpu-stage__visual {
  position: absolute;
  /* P8b: Mitte tiefer (62svh->66svh) — der größere Roboter sitzt tiefer in
     der Sticky, darunter bleibt ~10vh Luft statt eines halben Viewports.
     Top des Roboters bleibt klar unter dem Wort-Block (top ~10svh + Höhe). */
  top: clamp(520px, 66svh, 760px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--gpu-visual-h);
}

/* (Glow-Pool ::before entfernt: opacity 0.1 = unsichtbar, kostete nur einen
   animierten Blur in der perf-kritischen Pin-Sektion.) */

.lp-gpu-stage__words {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(78vw, 1580px);
  max-width: 100vw;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  justify-items: center;
  column-gap: clamp(20px, 3vw, 64px);
  padding: 0 clamp(32px, 4vw, 72px);
  overflow: visible;
  pointer-events: none;
}

/* Agent-Wrapper: enthält Name + Description, jeweils in eigener Grid-Spalte */
.lp-gpu-stage__agent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.35svh, 16px);
  width: max-content;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  pointer-events: none;
}
.lp-gpu-stage__agent[data-agent-pos="left"]   { grid-column: 1; grid-row: 1; }
.lp-gpu-stage__agent[data-agent-pos="center"] { grid-column: 2; grid-row: 1; }
.lp-gpu-stage__agent[data-agent-pos="right"]  { grid-column: 3; grid-row: 1; }

.lp-gpu-stage__agent-detail {
  display: block !important;
  width: max-content;
  max-width: min(100%, 34ch);
  margin-inline: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.lp-gpu-stage__agent-desc {
  margin: 0;
  color: rgba(249, 247, 244, 0.95);
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.02em;
  line-height: 1.4;
  max-width: 24ch;
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.lp-gpu-stage__agent-tasks {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(5px, 0.9svh, 8px);
  width: max-content;
  max-width: 100%;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0);
  pointer-events: none;
  will-change: opacity, transform;
}

.lp-gpu-stage__agent-tasks-label {
  display: block;
  margin: clamp(4px, 0.8svh, 8px) 0 0;
  /* blaues Akzent-Label: gleiche Label-Typo wie weiße Eyebrows, nur in Blau */
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  letter-spacing: var(--type-label-tracking);
  color: var(--color-accent-blue);
  font-weight: 600;
  line-height: 1.1;
  opacity: 1;
}

.lp-gpu-stage__agent-tasks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1svh, 10px);
  color: #f9f7f4;
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0;
}

.lp-gpu-stage__agent-tasks-list li {
  margin: 0;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

.lp-gpu-stage__agent-tasks-list li::after {
  content: none;
}

.lp-gpu-stage__word {
  display: block;
  max-width: 100%;
  color: rgba(249, 247, 244, 0.95);
  font-family: var(--font-sans);
  font-size: var(--type-display-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0 !important;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-4vw, 0, 0);
  pointer-events: none;
}

.lp-gpu-stage__robot {
  position: absolute;
  left: 50%;
  bottom: -32px;
  z-index: 1;
  width: var(--gpu-robot-w);
  height: var(--gpu-robot-h);
  margin-left: calc(var(--gpu-robot-w) / -2);
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 170px, 0) scale(0.98);
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform, opacity;
  background: transparent;
  border: 0;
  /* KEIN isolation:isolate, KEINE schwarze ::before-Platte, kein eigenes
     background: Das Schwarz des Videos wird per Canvas-Luma-Key ausgestanzt
     (js/robot-key.js, .lp-gpu-stage__robot-canvas) — Karo/Glow scheinen durch. */
}

/* Quell-Video: unsichtbar (opacity statt display:none, damit Decoder/Seek —
   der Scroll-Scrub aus main.js — überall zuverlässig weiterläuft). Es liefert
   nur Frames für den Canvas-Luma-Key (js/robot-key.js). mix-blend-mode
   scheiterte am Stacking-Context von __visual, filter:url(#svg) wendet Safari
   auf <video> nicht an — daher keyt jetzt das Canvas. */
.lp-gpu-stage__robot-video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  display: block;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  border: 0;
  transform: translateX(-50%);
}

/* Sichtbares Ziel-Canvas: exakt die Geometrie des Quell-Videos; zeigt die
   gekeyten Frames (Schwarz -> Alpha 0) aus js/robot-key.js. */
.lp-gpu-stage__robot-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  display: block;
  pointer-events: none;
  transform: translateX(-50%);
}

/* EIN Wort-Treatment für alle drei Piloten (Font-Spezimen statt drei
   Kostümen): weiß 0.95 — nur das AKTIVE Wort (Center-Position = Executive
   Pilot) trägt das EINE UI-Blau. */
.lp-gpu-stage__agent[data-agent-pos="center"] .lp-gpu-stage__word {
  color: var(--color-accent-blue);
}

/* Stage-Fortschritt rechts: schlichter Mono-Zähler (01 / 04) statt
   Punkt-/Strich-Ornamenten (Generik-Audit) — Mono ist hier ok, --font-mono
   ist die etablierte Meta-Ebene. */
.lp-gpu-stage__progress {
  position: fixed;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  transform: translateY(-50%);
  z-index: 6;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  contain: layout paint;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  will-change: opacity;
}

.lp-gpu-stage__progress.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease, visibility 0s linear 0s;
}

.lp-gpu-stage__progress-count {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: rgba(249, 247, 244, 0.95);
  writing-mode: vertical-rl;
}

@media (max-width: 1023px) {
  .lp-gpu-stage {
    --gpu-robot-w: 0px;
    --gpu-robot-h: 0px;
    --gpu-robot-half-h: 0px;
    --gpu-name-gap: 0px;
    --gpu-name-gap-half: 0px;
    --gpu-visual-h: 0px;
    --gpu-visual-half-h: 0px;
  }

  .lp-gpu-stage__sticky {
    height: auto;
    min-height: 0;
    padding: clamp(72px, 15vw, 112px) 0;
    overflow: visible;
  }

  .lp-gpu-stage__copy {
    position: relative;
    top: auto;
    margin-bottom: 42px;
  }

  .lp-gpu-stage__visual {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: 0;
  }

  .lp-gpu-stage__words {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    transform: none;
    grid-template-columns: 1fr;
    row-gap: 46px;
    padding: 0 clamp(18px, 5vw, 44px);
  }

  .lp-gpu-stage__agent[data-agent-pos="left"],
  .lp-gpu-stage__agent[data-agent-pos="center"],
  .lp-gpu-stage__agent[data-agent-pos="right"] {
    grid-column: 1;
    grid-row: auto;
  }

  .lp-gpu-stage__agent[data-agent-pos="left"] { order: 1; }
  .lp-gpu-stage__agent[data-agent-pos="center"] { order: 2; }
  .lp-gpu-stage__agent[data-agent-pos="right"] { order: 3; }

  .lp-gpu-stage__agent {
    align-items: center;
    text-align: center;
  }

  .lp-gpu-stage__word {
    text-align: center;
    white-space: normal;
    transform: none;
  }

  .lp-gpu-stage__agent-detail {
    width: min(100%, 290px);
    margin: 0 auto;
    max-height: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
  }

  .lp-gpu-stage__agent-tasks {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .lp-gpu-stage__agent-tasks-list {
    font-size: var(--type-small-size);
    line-height: 1.5;
  }

  .lp-gpu-stage__robot {
    display: none;
  }

  .lp-gpu-stage__progress {
    right: 14px;
    padding: 0;
  }

  .lp-gpu-stage__progress-count {
    font-size: 10px;
  }
}

@supports not (overflow: clip) {
  .lp-gpu-stage {
    overflow-x: hidden;
  }
}

@media (min-width: 1024px) and (max-height: 620px) {
  .lp-gpu-stage__copy {
    top: clamp(36px, 8svh, 64px);
  }

  .lp-gpu-stage__copy .lst-eyebrow {
    margin-bottom: 12px;
  }

  .lp-gpu-stage__copy h3 {
    font-size: var(--type-h2-size);
    line-height: 1.12;
  }

  .lp-gpu-stage__visual {
    top: calc(100svh - 8px - var(--gpu-visual-half-h));
    min-height: var(--gpu-visual-h);
  }
}

@media (min-width: 1024px) {
  .lst-page.lst-dark .lp-services-showcase > .lst-shell {
    padding: 0 var(--side-pad-desktop) !important;
  }
}

@media (max-width: 560px) {
  .lp-gpu-stage__word {
    font-size: var(--type-display-size);
  }

  .lp-gpu-stage__agent-tasks-list {
    font-size: var(--type-small-size);
  }
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__canvas {
  overflow: visible !important;
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__tile,
.lst-page.lst-dark .lp-services-showcase .lst-services-overview__tile:nth-child(n) {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  /* flex-start statt center: beide Spalten (Online Präsenz / KI im Betrieb)
     beginnen an derselben Oberkante, unabhängig von der Bullet-Anzahl */
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: 24px clamp(168px, 22vw, 236px) 24px 0 !important;
  text-align: left !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  cursor: default !important;
}

@media (max-width: 560px) {
  .lst-page.lst-dark .lp-services-showcase .lst-services-overview__tile,
  .lst-page.lst-dark .lp-services-showcase .lst-services-overview__tile:nth-child(n) {
    min-height: 136px !important;
    padding-right: 118px !important;
  }
}

/* Page-wide type rule: keep the hero font across the whole page. */
.lst-page.lst-dark,
.lst-page.lst-dark * {
  font-family: var(--font-sans) !important;
}

/* Desktop hero ratio lock: keep the composition proportional across window shapes. */
@media (min-width: 1024px) {
  .lst-page.lst-dark .lst-hero {
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .lst-page.lst-dark .lst-hero__shell {
    container-type: size;
    width: min(100vw, calc(100svh * 16 / 9), 1600px) !important;
    height: min(100svh, calc(100vw * 9 / 16), 900px) !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
  }

  /* Referenz-Layout: Eyebrow + H1 + Subline + CTAs als eng zusammenhängende
     vertikale Gruppe, leicht über der Mitte — keine verstreuten
     cqh-Absolutpositionen mehr. */
  .lst-page.lst-dark .lst-hero__text {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 45cqw !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 0 6cqh 9cqw !important; /* Gruppe leicht ins obere Drittel heben */
    transform: none !important;
    z-index: 2 !important;
  }

  .lst-page.lst-dark .lst-hero__eyebrow {
    margin: 0 0 8px !important;
  }

  .lst-page.lst-dark .lst-hero__h1 {
    position: static !important;
    width: auto !important;
    max-width: 42cqw !important;
    font-size: 5.5cqw !important;
    line-height: 1.02 !important;
    margin: 0 0 16px !important;
  }

  .lst-page.lst-dark .lst-hero__lead {
    position: static !important;
    width: auto !important;
    max-width: 520px !important;
    /* folgt dem Ratio-Lock, aber nie über das Lead-Maximum der Ramp hinaus */
    font-size: min(1.45cqw, 19px) !important;
    line-height: 1.55 !important;
    margin: 0 0 28px !important;
  }

  .lst-page.lst-dark .lst-hero__cta-row {
    position: static !important;
    margin: 0 !important;
  }

  .lst-page.lst-dark .lst-hero__media--macbook,
  .lst-page.lst-dark .lst-hero__media.lst-hero__media--macbook {
    position: absolute !important;
    top: 8.8cqh !important;
    right: -3cqw !important; /* Canvas vollständig im Viewport halten (kein Clipping) */
    width: 58cqw !important;
    height: 80cqh !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  .lst-page.lst-dark .lp3d-macbook-canvas,
  .lst-page.lst-dark .lp3d-macbook-fallback {
    width: min(60cqw, 92cqh) !important;
    height: min(60cqw, 92cqh) !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    transform: translate(0cqw, -0.6cqh) !important; /* vorher 3cqw: schob den Canvas-Rand aus dem Viewport -> Laptop abgeschnitten */
  }

  /* Prompt 4: full-bleed 3D-Canvas — leadpilots.js hängt den Canvas auf
     Desktop direkt in den Hero um; die "Position" des Laptops macht allein
     die Kamera, nie das Canvas-Element. */
  .lst-page.lst-dark .lst-hero > .lp3d-macbook-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    min-height: 0 !important;
    z-index: 0 !important;
  }

  /* Layout-Anker: NUR noch Platzierung (Mitte = Textblock-Mitte, X über
     right/width) — die GRÖSSE bestimmt seit P7 der Höhen-Match in
     computeHeroEndPose (Laptop-Höhe = Textgruppen-Höhe). */
  .lst-page.lst-dark .lst-hero__media-anchor {
    display: block;
    position: absolute !important;
    top: 47cqh;
    right: -3cqw;
    width: 62.6cqw;
    height: 76cqh;
    transform: translateY(-50%);
    visibility: hidden;
    pointer-events: none;
  }
}

/* ==========================================================================
   Leistungsübersicht — Layout-Overrides (entkoppelt die Sektion vom früheren
   GSAP-Pin: position/height-Resets unten). Die Sektion ist heute statisch,
   backdrop-filter/box-shadows sind hier daher erlaubt (Bento-Karten unten).
   ========================================================================== */
.lst-page.lst-dark .lp-services-showcase {
  min-height: auto !important;
  padding: clamp(84px, 10vh, 128px) 0 clamp(76px, 9vh, 112px) !important;
  overflow: visible !important;
}

.lst-page.lst-dark .lp-services-showcase > .lst-shell {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 88px) !important;
  overflow: visible !important;
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__canvas,
.lst-page.lst-dark .lp-services-showcase .lp-services-intro {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  will-change: auto !important;
  overflow: visible !important;
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__head {
  display: block !important;
  max-width: 780px !important;
  margin: 0 0 clamp(40px, 5vw, 64px) !important;
  text-align: left !important;
}

/* Sektions-Kicker: Standard-Kicker-Stil (weiß 0.55, Satzform — Blau-Diät). */
.lst-page.lst-dark .lst-services-overview__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 500;
  color: rgba(249, 247, 244, 0.95);
}

.lst-page.lst-dark .lp-services-showcase .lst-services-overview__lead {
  max-width: 58ch !important;
  margin-top: 18px !important;
  /* kein !important auf opacity: das Choreo-Reveal (Inline-Style) muss das
     Element verstecken können; die Spezifität gewinnt auch ohne. */
  opacity: 0.95;
}

/* ==========================================================================
   Leistungen — Drei-Stufen-Karten mit SVG-Mini-Visuals
   Markup: index.html #leistungsuebersicht .lp-svc-bento
   Reveal: js/services-bento.js (IntersectionObserver, einmalig, gestaffelt).

   Zustands-Prinzip: Der CSS-GRUNDZUSTAND ist der fertige statische Endzustand
   (alles sichtbar/gezeichnet, Loops aus). Erst wenn JS die Klasse .is-armed
   setzt (Motion erlaubt + IO verfügbar), werden Startzustände aktiv und
   .is-in startet die Animationen. Ohne JS oder mit prefers-reduced-motion
   bleibt die Sektion damit vollständig sichtbar und ruhig.
   ========================================================================== */

/* Drei gleichberechtigte Stufen-Karten: eine Spalte mobil, drei ab 1024px. */
.lst-page.lst-dark .lp-svc-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .lst-page.lst-dark .lp-svc-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Subgrid-Zeilen: Tag / Titel / Body / Lower (Visual+Fußzone) — jede
       Zone beginnt in allen drei Karten auf exakt derselben Höhe. Im Lower
       zentriert sich das Visual per Auto-Margins im freien Raum (Karte 1+2),
       die Fußzone bleibt an der Unterkante. */
    grid-template-rows: repeat(4, auto);
    column-gap: 16px;
    row-gap: 0;
  }
}

/* --- Karte ---------------------------------------------------------------- */
/* Echtes Glas wie die Topnav (.lp-topnav__bar): neutrales Fast-Schwarz mit
   Blur — der Blue-Flow dahinter bleibt als weiches Leuchten ablesbar, Text
   auf der Karte liegt aber nie direkt auf bewegtem Nebel. */
.lst-page.lst-dark .lp-svc-card {
  position: relative;
  isolation: isolate; /* eigener Stacking-Kontext für Inhalt/Backdrop */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 1.6vw, 22px);
  background: rgba(10, 10, 12, 0.72);
  border: 1px solid rgba(249, 247, 244, 0.10);
  border-radius: clamp(14px, 1.4vw, 18px);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(249, 247, 244, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
  /* Anker-Karten (#labs) landen unter der fixen Topnav frei */
  scroll-margin-top: 96px;
}

/* Ab Desktop: Karte wird Subgrid-Spalte — MUSS in der Kaskade NACH der
   Basisregel stehen, sonst gewinnt deren display:flex. */
@media (min-width: 1024px) {
  .lst-page.lst-dark .lp-svc-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 12px;
  }
}

/* Sheen-Hairline oben — dezente Lichtkante wie im Referenz-Mockup. Folgt der
   Eckenrundung: weiter eingerückt (16%), damit sie nicht in die Radien läuft. */
.lst-page.lst-dark .lp-svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, rgba(249, 247, 244, 0), rgba(249, 247, 244, 0.18), rgba(249, 247, 244, 0));
  pointer-events: none;
}

/* (P8b: Diagonale Glas-Schliere ::after entfernt — vom Kunden abgewählt.
   Frost/Border/Backdrop/Innenkante bleiben.) */

/* (KI-Cluster-Sondermaterial entfernt — EIN Karten-Material für alle drei
   Stufen; Unterscheidung NUR über Tag + Inhalt.) */

@media (hover: hover) {
  .lst-page.lst-dark .lp-svc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 247, 244, 0.16);
    box-shadow: inset 0 1px 0 rgba(249, 247, 244, 0.18), 0 18px 44px rgba(0, 0, 0, 0.34);
  }
}
/* Tastatur-Parität: identischer Zustand, sobald etwas in der Karte Fokus trägt */
.lst-page.lst-dark .lp-svc-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(249, 247, 244, 0.16);
  box-shadow: inset 0 1px 0 rgba(249, 247, 244, 0.18), 0 18px 44px rgba(0, 0, 0, 0.34);
}

/* Fallback ohne backdrop-filter (auch -webkit-: altes Safari): der bisherige
   deckende Fond, damit Text nicht auf dem rohen Hintergrund liegt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lst-page.lst-dark .lp-svc-card {
    background:
      linear-gradient(180deg, rgba(249, 247, 244, 0.040), rgba(249, 247, 244, 0.012) 55%),
      rgba(10, 10, 12, 0.88);
  }
}

/* --- Karten-Inhalt (Reihenfolge: Tag → Titel → Text → Visual → Fußzone) ---- */
/* Klammer-Label [ … ]: stehendes Design-Element der Karten-Tags — reiner
   Text, KEINE Box, KEIN Blau, KEIN Glow. Die Klammern kommen IMMER aus dem
   CSS (nie in die Copy tippen) — so sind sie zwangsläufig überall identisch.
   Disziplin-Regel: dieses Muster NUR auf .lp-svc-card__tag — auf keiner
   anderen Eyebrow, keinem Button, keinem Label sonst. */
.lst-page.lst-dark .lp-svc-card__tag {
  align-self: flex-start;
  margin: 0 0 10px; /* mehr Luft zur Überschrift (Feedback Jeremy) */
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-secondary) !important;
  font-size: var(--type-meta-size);
  line-height: 1;
  font-weight: 700; /* bold + ganz weiß (Feedback Jeremy) */
  letter-spacing: var(--type-label-tracking);
  color: var(--ink-95);
}
.lst-page.lst-dark .lp-svc-card__tag::before { content: "[ "; opacity: 0.45; }
.lst-page.lst-dark .lp-svc-card__tag::after  { content: " ]"; opacity: 0.45; }

/* Visual + Fußzone teilen sich den unteren Kartenbereich: das Visual
   zentriert sich per Auto-Margins im freien Raum (Karte 1+2), Karte 3
   füllt den Bereich ohnehin. */
.lst-page.lst-dark .lp-svc-card__lower {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
.lst-page.lst-dark .lp-svc-card__visual {
  position: relative;
  flex: none;
  /* Einheitliche Visual-Höhe für alle drei Stufen (F3/F8) */
  height: 170px;
  margin: auto 0;
}
.lst-page.lst-dark .lp-svc-card__visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lst-page.lst-dark .lp-svc-card__title {
  margin: 0;
  font-family: var(--font-headline) !important;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-on-dark);
}
.lst-page.lst-dark .lp-svc-card__desc {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-95); /* Karten-Copy weiß (Feedback Jeremy) */
  max-width: 52ch;
}

/* Body = Kurz-Lead + Stichpunkte (ein Element pro Subgrid-Zeile). */
.lst-page.lst-dark .lp-svc-card__body {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
/* Stichpunkte mit Pfeil-Marker — etablierte Bullet-Sprache des
   Referenz-Modals, hier in der Weiß-Leiter (Blau-Diät). */
.lst-page.lst-dark .lp-svc-card__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.lst-page.lst-dark .lp-svc-card__points li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: 1.5;
  color: var(--ink-95); /* Karten-Copy weiß (Feedback Jeremy) */
}
.lst-page.lst-dark .lp-svc-card__points li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: rgba(249, 247, 244, 0.95);
}

/* --- Unterpunkt-Chips (Text) — fester Slot UNTER der Beschreibung ----------
   Dezent in Inter, ohne Punkt/Versalien (bewusst KEIN lp-svc-card__tag-Stil):
   konserviert die Substanz der zusammengelegten Karten als ruhige Pillen. */
.lst-page.lst-dark .lp-svc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lst-page.lst-dark .lp-svc-card__chips li {
  padding: 4px 8px;
  border-radius: 4px;            /* keine Pille (Generik-Audit) */
  border: 1px solid rgba(249, 247, 244, 0.14);
  background: rgba(249, 247, 244, 0.045);
  font-family: var(--font-sans);
  font-size: var(--type-micro-size); /* kompakt: 4 Chips passen in eine Zeile */
  line-height: 1;
  font-weight: 500;
  color: rgba(249, 247, 244, 0.95);
  white-space: nowrap;
}

/* --- Fußzone: bindet Chips/Tools/CTA in allen Karten an die Unterkante (F2) */
.lst-page.lst-dark .lp-svc-card__foot {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}

/* Pilotbetrieb-Zeile (Karte 3): ruhiger Absatz — keine Box, kein Icon. */
.lst-page.lst-dark .lp-svc-card__pilot {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-95); /* Karten-Copy weiß (Feedback Jeremy) */
  max-width: 52ch;
}

/* (CTA-Zeile aus Karte 3 in die Sektion umgezogen — s. .lp-svc-cta.) */
.lst-page.lst-dark .lp-svc-card__cta.lst-btn--primary {
  padding: 14px 28px;
  border-radius: 6px;
  border: 1px solid #6b8cff;
  background: #6b8cff;
  color: #fff;
  font-size: var(--type-btn-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.lst-page.lst-dark .lp-svc-card__cta.lst-btn--primary:hover {
  background: #6b8cff;
  border-color: #6b8cff;
}

/* Sektions-CTA unter dem Grid: EIN Conversion-Pfad für alle drei Stufen. */
.lst-page.lst-dark .lp-svc-cta {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 26px;
}

/* --- Tool-Logo-Chips (geteilt: Karten + Labs-Band) -------------------------
   Volle Markenfarben auf Dark (Informationsträger fürs Sofort-Erkennen),
   Ruhezustand leicht gedimmt, Hover voll + Mini-Scale. */
.lst-page.lst-dark .lp-tool-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lst-page.lst-dark .lp-tool-chips li {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(249, 247, 244, 0.04);
  border: 1px solid rgba(249, 247, 244, 0.08);
  border-radius: 8px;
}
.lst-page.lst-dark .lp-tool-chips img {
  display: block;
  width: 28px;
  height: 28px;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* sevDesk existiert offiziell nur als breite Wortmarke (viewBox 124x36) —
   Breite freigeben, sonst schrumpft sie in der quadratischen Box auf ~8px. */
.lst-page.lst-dark .lp-tool-chips img[src*="sevdesk"] {
  width: auto;
  max-width: 96px;
}
.lst-page.lst-dark .lp-tool-chips li:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.lst-page.lst-dark .lp-tool-chips--sm li { padding: 6px 9px; }
.lst-page.lst-dark .lp-tool-chips--sm img { width: 22px; height: 22px; }

/* Monochrome Logo-Zeile (nur Karte 3): Farbe erst on-hover (F6). */
.lst-page.lst-dark .lp-tool-chips--mono img {
  filter: grayscale(1) brightness(1.55);
  opacity: 0.6;
}
.lst-page.lst-dark .lp-tool-chips--mono li:hover img {
  filter: none;
  opacity: 1;
}

/* Logo-Block auf Standard-Karten: Caption + kleine Chip-Reihe als letzter Slot */
.lst-page.lst-dark .lp-svc-card__tools {
  margin-top: 0;
}
.lst-page.lst-dark .lp-svc-card__tools-title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: var(--type-micro-size);
  font-weight: 500;
  color: rgba(249, 247, 244, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .lst-page.lst-dark .lp-tool-chips img { transition: none; }
  .lst-page.lst-dark .lp-tool-chips li:hover img { transform: none; }
}

/* --- SVG-Visual-Vokabular --------------------------------------------------
   Reihenfolge wichtig: Stroke-Klassen setzen fill:none, Füll-Klassen danach
   überschreiben das für kombinierte Elemente (z. B. "svgi-f3 svgi-s2"). */
.lst-page.lst-dark .lp-svc-card__visual .svgi-s1,
.lst-page.lst-dark .lp-svc-card__visual .svgi-s2,
.lst-page.lst-dark .lp-svc-card__visual .svgi-s3 {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-s1 { stroke: rgba(249, 247, 244, 0.30); stroke-width: 1.3; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-s2 { stroke: rgba(249, 247, 244, 0.17); stroke-width: 1.2; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-s3 { stroke: rgba(249, 247, 244, 0.09); stroke-width: 1.2; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-f2 { fill: rgba(249, 247, 244, 0.10); }
.lst-page.lst-dark .lp-svc-card__visual .svgi-f3 { fill: rgba(249, 247, 244, 0.055); }
.lst-page.lst-dark .lp-svc-card__visual .svgi-f4 { fill: rgba(249, 247, 244, 0.03); }
.lst-page.lst-dark .lp-svc-card__visual .svgi-fa { fill: rgba(var(--color-accent-blue-rgb), 0.85); }

.lst-page.lst-dark .lp-svc-card__visual text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  fill: rgba(249, 247, 244, 0.60);
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-txt--core {
  font-size: 12px;
  font-weight: 600;
  fill: rgba(249, 247, 244, 0.92);
}

/* Custom-Tools-Panel (Grundzustand = eingeschaltet) */
.lst-page.lst-dark .lp-svc-card__visual .svgi-togtrack { fill: rgba(var(--color-accent-blue-rgb), 0.35); }
.lst-page.lst-dark .lp-svc-card__visual .svgi-knob  { fill: rgba(249, 247, 244, 0.92); translate: 20px 0; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-sfill { fill: rgba(var(--color-accent-blue-rgb), 0.65); transform-origin: 0% 50%; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-sknob { fill: rgba(249, 247, 244, 0.92); translate: 96px 0; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-segind {
  fill: rgba(var(--color-accent-blue-rgb), 0.14);
  stroke: rgba(var(--color-accent-blue-rgb), 0.50);
  stroke-width: 1.2;
  translate: 84px 0;
}

/* Websites: Safari-Fenster — Ampel-Farben identisch zu den Referenz-Frames
   (makeSafariFrameTexture in references-3d.js), Button-Text auf svgi-fa-Blau. */
.lst-page.lst-dark .lp-svc-card__visual .svgi-mac1 { fill: #ff5f57; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-mac2 { fill: #febc2e; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-mac3 { fill: #28c840; }
.lst-page.lst-dark .lp-svc-card__visual .svgi-txt--btn {
  font-size: 8.5px;
  font-weight: 600;
  fill: #fff;
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-txt--strong {
  font-size: 11px;
  font-weight: 600;
  fill: rgba(249, 247, 244, 0.88);
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-txt--pill {
  font-size: 8.5px;
  fill: rgba(249, 247, 244, 0.55);
}
/* Akzent-Pointe (Preis / Zeitersparnis) */
.lst-page.lst-dark .lp-svc-card__visual .svgi-price {
  font-size: 13px;
  font-weight: 600;
  fill: rgba(var(--color-accent-blue-rgb), 0.92);
}

/* KI-Automation (Pipeline) */
.lst-page.lst-dark .lp-svc-card__visual .svgi-stp {
  fill: #0b1120;
  stroke: rgba(249, 247, 244, 0.28);
  stroke-width: 1.2;
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-stp4 { stroke: rgba(var(--color-accent-blue-rgb), 0.45); }
.lst-page.lst-dark .lp-svc-card__visual .svgi-icn {
  fill: none;
  stroke: rgba(249, 247, 244, 0.62);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-flash {
  fill: none;
  stroke: rgba(var(--color-accent-blue-rgb), 0.9);
  stroke-width: 1.4;
  opacity: 0;
}

/* Transform-Bezug für SVG-Kind-Animationen */
.lst-page.lst-dark .lp-svc-card__visual :is(.svgi-pop, .svgi-sfill, .svgi-knob, .svgi-sknob, .svgi-segind) {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.lst-page.lst-dark .lp-svc-card__visual .svgi-sfill { transform-origin: 0% 50%; }

/* --- Motion: nur wenn erlaubt UND JS die Sektion scharfgeschaltet hat ------ */
@media (prefers-reduced-motion: no-preference) {
  /* Karten-Reveal: opacity/translate gestaffelt (--svc-d setzt js pro Batch),
     Hover-Lift läuft unabhängig über transform — keine Property-Kollision. */
  /* Werte synchron mit CHOREO in js/main.js halten (M2 "Eintreten":
     y 14px, scale 0.985, 0.7s power3.out ~ cubic-bezier(0.215,0.61,0.355,1)). */
  .lst-page.lst-dark .lp-svc-bento.is-armed .lp-svc-card {
    opacity: 0;
    translate: 0 14px;
    scale: 0.985;
    transition:
      opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) var(--svc-d, 0s),
      translate 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) var(--svc-d, 0s),
      scale 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) var(--svc-d, 0s),
      transform 0.24s ease,
      border-color 0.24s ease,
      box-shadow 0.24s ease;
  }
  .lst-page.lst-dark .lp-svc-bento.is-armed .lp-svc-card.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  /* Mobile: halbierte Distanz (synchron mit CHOREO.forViewport in main.js). */
  @media (max-width: 768px) {
    .lst-page.lst-dark .lp-svc-bento.is-armed .lp-svc-card {
      translate: 0 7px;
    }
  }

  /* SVG-Startzustände (scharfgeschaltet). WICHTIG: mit .lst-page.lst-dark-
     Präfix — die Basis-Vokabeln (Endzustände) haben 4 Klassen Spezifität,
     ohne Präfix verlieren die Resets und die Mikro-Animationen starten
     sichtbar im Endzustand. */
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-pop { opacity: 0; transform: translateY(7px); }
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-knob,
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-sknob,
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-segind { translate: 0 0; }
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-togtrack { fill: rgba(249, 247, 244, 0.10); }
  .lst-page.lst-dark .lp-svc-bento.is-armed .svgi-sfill { scale: 0 1; }

  /* Einmalige Aufbau-Animationen beim ersten Sichtbarwerden */
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-dr {
    animation: lpSvcDraw 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--svc-d, 0s) + var(--vd, 0s));
  }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-pop {
    animation: lpSvcPop 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
    animation-delay: calc(var(--svc-d, 0s) + var(--vd, 0s));
  }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-knob {
    animation:
      lpSvcPop 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards,
      lpSvcKnobOn 0.4s cubic-bezier(0.5, 0, 0.3, 1.3) forwards;
    animation-delay:
      calc(var(--svc-d, 0s) + var(--vd, 0s)),
      calc(var(--svc-d, 0s) + var(--vd, 0s) + 0.55s);
  }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-togtrack {
    animation:
      lpSvcPop 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards,
      lpSvcTogFill 0.4s ease forwards;
    animation-delay:
      calc(var(--svc-d, 0s) + var(--vd, 0s)),
      calc(var(--svc-d, 0s) + var(--vd, 0s) + 0.55s);
  }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-sfill {
    animation:
      lpSvcPop 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards,
      lpSvcSlideFill 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay:
      calc(var(--svc-d, 0s) + var(--vd, 0s)),
      calc(var(--svc-d, 0s) + var(--vd, 0s) + 0.6s);
  }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-sknob {
    animation:
      lpSvcPop 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards,
      lpSvcSlideKnob 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay:
      calc(var(--svc-d, 0s) + var(--vd, 0s)),
      calc(var(--svc-d, 0s) + var(--vd, 0s) + 0.6s);
  }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-segind {
    animation:
      lpSvcPop 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards,
      lpSvcSegSlide 0.45s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
    animation-delay:
      calc(var(--svc-d, 0s) + var(--vd, 0s)),
      calc(var(--svc-d, 0s) + var(--vd, 0s) + 0.7s);
  }

  /* Loop (nur nach Reveal): Stations-Ringe leuchten nacheinander auf */
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-flash {
    animation: lpSvcFlash 5.6s linear infinite;
  }
  /* Ring-Phasen gestaffelt von links nach rechts (gleiche Periode) */
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-flash1 { animation-delay: calc(var(--svc-d, 0s) + var(--vd, 0s) + 0.78s); }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-flash2 { animation-delay: calc(var(--svc-d, 0s) + var(--vd, 0s) + 1.90s); }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-flash3 { animation-delay: calc(var(--svc-d, 0s) + var(--vd, 0s) + 3.02s); }
  .lp-svc-bento.is-armed .lp-svc-card.is-in .svgi-flash4 { animation-delay: calc(var(--svc-d, 0s) + var(--vd, 0s) + 4.14s); }
}

@keyframes lpSvcDraw { to { stroke-dashoffset: 0; } }
@keyframes lpSvcPop { to { opacity: 1; transform: none; } }
@keyframes lpSvcFade { to { opacity: 1; } }
@keyframes lpSvcKnobOn { to { translate: 20px 0; } }
@keyframes lpSvcTogFill { to { fill: rgba(var(--color-accent-blue-rgb), 0.35); } }
@keyframes lpSvcSlideFill { to { scale: 1 1; } }
@keyframes lpSvcSlideKnob { to { translate: 96px 0; } }
@keyframes lpSvcSegSlide { to { translate: 84px 0; } }
@keyframes lpSvcFlash {
  0%   { opacity: 0; }
  4%   { opacity: 0.9; }
  16%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Reduced Motion: ruhiger statischer Endzustand, kein Lift, keine Loops */
@media (prefers-reduced-motion: reduce) {
  .lst-page.lst-dark .lp-svc-card,
  .lst-page.lst-dark .lp-svc-card::before,
  .lst-page.lst-dark .lp-svc-card * {
    transition: none !important;
    animation: none !important;
  }
  .lst-page.lst-dark .lp-svc-card:hover,
  .lst-page.lst-dark .lp-svc-card:focus-within {
    transform: none;
  }
}

@media (min-width: 1024px) {
  .lst-page.lst-dark .lp-services-showcase {
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 767px) {
  .lst-page.lst-dark .lp-services-showcase {
    padding: clamp(72px, 18vw, 104px) 0 clamp(64px, 16vw, 92px) !important;
  }
}

/* Reference secondary type: mono/typewriter text style from the screenshot. */
/* Eyebrow bewusst NICHT in dieser Liste: behält die 0.14em-Sperrung der Ramp */
.lst-page.lst-dark .lst-hero__lead,
.lst-page.lst-dark .lst-services-overview__lead {
  font-family: var(--font-secondary) !important;
  letter-spacing: 0 !important;
}

.lst-page.lst-dark .lst-hero__lead,
.lst-page.lst-dark .lst-services-overview__lead {
  font-weight: 500 !important;
}

/* ============================================================ */
/* Referenzen – Schraege Tabs (Vollbild, rechteckig, dark)        */
/* ============================================================ */

.lp-references {
  position: relative;
  /* P8b: Vorlauf der Kopfzone gestrafft (oben 72->40px) — der Roboter
     darüber sitzt jetzt tiefer/größer, die Headline soll zügiger folgen.
     Unteres Padding unverändert. */
  padding: clamp(28px, 3vw, 40px) 0 clamp(70px, 9vw, 112px);
  background: transparent; /* Blue-Flow-Canvas scheint durch */
  color: var(--color-text-on-dark);
  overflow: visible;
}
/* Subtle fading hairline to separate sections on the dark canvas */
.lp-references::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 82vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 247, 244, 0.14), transparent);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 767px) {
  .lp-references { padding: 32px 0 96px; }
}

/* z-index:1 hält den Inhalt ÜBER der .lp-scrim--refs-out (z:0, letztes Kind
   -> läge sonst in Tree-Order darüber). P8b Tal-Prinzip. */
.lp-references__shell { position: relative; z-index: 1; }

.lp-references__head {
  width: 100%;
  max-width: min(1120px, calc(100vw - 48px));
  margin: 0 auto clamp(34px, 5vw, 56px);
  text-align: center;
}
.lp-references__eyebrow {
  margin: 0 0 18px;
  /* Standard-Kicker: weiß 0.55, Satzform, keine Sperrung (Blau-Diät) */
  color: rgba(249, 247, 244, 0.95);
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.lp-references__h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-h2-size);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 auto 18px;
  color: var(--color-text-on-dark);
  width: 100%;
  max-width: none;
  text-align: center;
  text-wrap: normal;
}
/* Stage – kleinere Tabs, weiter auseinander, staerker schraeg */
.lp-references__stage {
  --card-w: min(640px, calc(100vw - 96px));
  --card-h: calc(var(--card-w) * (750 / 1200));
  --stage-extra: calc(var(--card-w) * 0.95);
  perspective: 2200px;
  perspective-origin: 22% 50%;
  position: relative;
  min-height: calc(var(--card-h) + 120px);
  padding: 40px 0 80px;
  padding-right: var(--stage-extra);
}

/* WebGL Canvas: füllt die Stage, übernimmt die Karten-Darstellung */
.lp-references__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  z-index: 2;
}
.lp-references__stage[data-three-active="true"] {
  --stage-extra: 0px;
  perspective: none;
  padding: 0;
  width: 100vw;
  min-height: clamp(520px, 64svh, 820px);
  margin: 0 calc(50% - 50vw);
  overflow: visible;
}
.lp-references__stage[data-three-active="true"] .lp-reference-card {
  display: none !important;
}
@media (max-width: 767px) {
  .lp-references__canvas { display: none; }
}

/* Card root */
.lp-reference-card {
  position: absolute;
  top: 40px;
  left: 0;
  width: var(--card-w);
  height: var(--card-h);
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: block;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(-26deg) translateZ(var(--card-z, 0px)) translateX(var(--card-x, 0px));
  transition:
    transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 320ms ease,
    box-shadow 360ms ease;
  will-change: transform, filter;
}
.lp-reference-card:focus { outline: none; }
.lp-reference-card:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 8px;
}

/* Staffelung: schraeg gestapelt nach hinten/rechts */
.lp-reference-card[data-index="0"] { --card-z: 0px;    --card-x: 0px;   z-index: 4; }
.lp-reference-card[data-index="1"] { --card-z: -160px; --card-x: 150px; z-index: 3; filter: saturate(0.85) brightness(0.88); }
.lp-reference-card[data-index="2"] { --card-z: -320px; --card-x: 300px; z-index: 2; filter: saturate(0.7)  brightness(0.76); }
.lp-reference-card[data-index="3"] { --card-z: -480px; --card-x: 450px; z-index: 1; filter: saturate(0.55) brightness(0.64); }

/* Hover/Focus: gehoverte Karte tritt nach vorn + wird hervorgehoben, andere treten zurueck */
.lp-references__stage:has(.lp-reference-card:hover) .lp-reference-card:not(:hover),
.lp-references__stage:has(.lp-reference-card:focus-visible) .lp-reference-card:not(:focus-visible) {
  filter: saturate(0.25) brightness(0.45) blur(2px);
}
.lp-reference-card:hover,
.lp-reference-card:focus-visible {
  transform: rotateY(-6deg) translateZ(calc(var(--card-z, 0px) + 220px)) translateX(var(--card-x, 0px));
  z-index: 10;
  filter: saturate(1.05) brightness(1.05) !important;
}

/* Parallax wrapper – isolated transform layer (kein border-radius, scharfe Kanten) */
.lp-reference-card__parallax {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(at 30% 18%, rgba(249, 247, 244, 0.08) 0%, transparent 60%),
    radial-gradient(at 80% 90%, rgba(249, 247, 244, 0.04) 0%, transparent 55%),
    linear-gradient(158deg, #14140f 0%, #1f1d18 100%);
  box-shadow:
    0 50px 80px -24px rgba(0, 0, 0, 0.7),
    0 18px 36px -16px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(249, 247, 244, 0.06);
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transition: transform 120ms linear, box-shadow 360ms ease;
}
.lp-reference-card:hover .lp-reference-card__parallax,
.lp-reference-card:focus-visible .lp-reference-card__parallax {
  box-shadow:
    0 70px 110px -22px rgba(0, 0, 0, 0.78),
    0 24px 44px -16px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(249, 247, 244, 0.14);
}

/* Shot area – Vollbild, kein Browser-Chrome */
.lp-reference-card__shot {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lp-reference-card__shot-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  color: rgba(249, 247, 244, 0.16);
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.lp-reference-card__shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms ease;
}
.lp-reference-card__shot-img.is-loaded { opacity: 1; }
.lp-reference-card__shot:has(.is-loaded) .lp-reference-card__shot-label { opacity: 0; }
.lp-reference-card__shot-img.is-missing { display: none; }

/* Mobile: 3D off, horizontaler Snap-Carousel */
@media (max-width: 767px) {
  .lp-references__stage {
    --card-w: 86vw;
    --card-h: calc(var(--card-w) * (750 / 1200));
    perspective: none;
    padding: 8px 24px 32px;
    padding-right: 24px;
    min-height: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }
  .lp-references__stage::-webkit-scrollbar { display: none; }
  .lp-reference-card {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--card-h);
    transform: none !important;
    filter: none !important;
    scroll-snap-align: start;
  }
  .lp-reference-card:hover,
  .lp-reference-card:focus-visible {
    transform: none !important;
    filter: none !important;
  }
  .lp-references__stage:has(.lp-reference-card:hover) .lp-reference-card:not(:hover),
  .lp-references__stage:has(.lp-reference-card:focus-visible) .lp-reference-card:not(:focus-visible) {
    filter: none !important;
  }
  .lp-reference-card__parallax {
    transform: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lp-reference-card,
  .lp-reference-card__parallax,
  .lp-reference-card__shot-img,
  .lp-reference-card__shot-label {
    transition: none !important;
  }
}

/* ============================================================ */
/* Reference Modal                                                */
/* ============================================================ */

.lp-reference-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.lp-reference-modal[hidden] { display: none; }
.lp-reference-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lp-reference-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lp-reference-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 64px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.lp-reference-modal.is-open .lp-reference-modal__panel { transform: scale(1); }

.lp-reference-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(249, 247, 244, 0.1);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(249, 247, 244, 0.14);
  font: 500 22px/1 var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
}
.lp-reference-modal__close:hover {
  background: rgba(249, 247, 244, 0.18);
  transform: rotate(90deg);
}
.lp-reference-modal__close:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lp-reference-modal__media {
  position: relative;
  background:
    radial-gradient(at 30% 18%, rgba(249, 247, 244, 0.07) 0%, transparent 60%),
    linear-gradient(158deg, #14140f 0%, #1f1d18 100%);
  min-height: 360px;
}
.lp-reference-modal__shot {
  position: relative;
  height: 100%;
  min-height: 280px;
}
.lp-reference-modal__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  color: rgba(249, 247, 244, 0.15);
  pointer-events: none;
}
.lp-reference-modal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 280ms ease;
}
.lp-reference-modal__img.is-loaded { opacity: 1; }
.lp-reference-modal__img.is-missing { display: none; }

.lp-reference-modal__body {
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.lp-reference-modal__eyebrow {
  margin: 0;
  color: rgba(249, 247, 244, 0.95);
}
.lp-reference-modal__title {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--type-h3-size);
  line-height: 1.12;
  margin: 0;
  color: var(--color-text-on-dark);
}
.lp-reference-modal__bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-reference-modal__bullets li {
  font-family: var(--font-secondary);
  font-size: var(--type-small-size);
  line-height: 1.5;
  color: var(--color-text-muted-dark);
  padding-left: 22px;
  position: relative;
}
.lp-reference-modal__bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
}
.lp-reference-modal__cta {
  align-self: flex-start;
  margin-top: 12px;
}

@media (max-width: 767px) {
  .lp-reference-modal { padding: 16px; }
  .lp-reference-modal__panel {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .lp-reference-modal__media { min-height: 200px; }
  .lp-reference-modal__shot { min-height: 180px; }
  .lp-reference-modal__body { padding: 32px 24px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-reference-modal,
  .lp-reference-modal__panel,
  .lp-reference-modal__close {
    transition: none !important;
  }
}

/* ==========================================================================
   Kontakt-Modal ("geführte Mail") — gleiche Glas-/Open-Sprache wie das
   Referenz-Modal, aber ein einspaltiges Formular-Panel.
   ========================================================================== */
.lp-contact {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.lp-contact[hidden] { display: none; }
.lp-contact.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lp-contact__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lp-contact__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 40px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-radius: 18px;
  transform: scale(0.96);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.lp-contact.is-open .lp-contact__card { transform: scale(1); }
.lp-contact__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(249, 247, 244, 0.1);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(249, 247, 244, 0.14);
  font: 500 22px/1 var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
}
.lp-contact__close:hover {
  background: rgba(249, 247, 244, 0.18);
  transform: rotate(90deg);
}
.lp-contact__close:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.lp-contact__eyebrow { margin: 0 0 10px; }
.lp-contact__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-95);
}
.lp-contact__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-95);
}
.lp-contact__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-contact__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-contact__field > span {
  font-size: 13px;
  color: var(--ink-95);
}
.lp-contact__field > span em {
  font-style: normal;
  color: var(--ink-40);
}
.lp-contact__field input,
.lp-contact__field textarea {
  width: 100%;
  padding: 11px 13px;
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink-95);
  background: rgba(2, 2, 2, 0.5);
  border: 1px solid rgba(249, 247, 244, 0.14);
  border-radius: 10px;
  transition: border-color 180ms ease, background 180ms ease;
  resize: vertical;
}
.lp-contact__field textarea { min-height: 96px; }
.lp-contact__field input::placeholder,
.lp-contact__field textarea::placeholder { color: var(--ink-40); }
.lp-contact__field input:focus,
.lp-contact__field textarea:focus {
  outline: none;
  border-color: rgba(107, 140, 255, 0.7);
  background: rgba(2, 2, 2, 0.7);
}
.lp-contact__field input.is-invalid,
.lp-contact__field textarea.is-invalid {
  border-color: rgba(255, 120, 120, 0.7);
}
.lp-contact__submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}
.lp-contact__hint {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-40);
}
.lp-contact__hint a { color: var(--ink-60); }
.lp-contact__hint a:hover { color: var(--ink-95); }

@media (prefers-reduced-motion: reduce) {
  .lp-contact,
  .lp-contact__card,
  .lp-contact__close {
    transition: none !important;
  }
}

/* ==========================================================================
   Full-Viewport-Sections — jeder sichtbare Halte-Zustand füllt exakt eine
   Bildschirmhöhe, der nächste Abschnitt blitzt unten nie durch.
   100dvh mit 100vh/100svh-Fallback davor (dvh folgt der mobilen Browser-Leiste).
   Scroll-Distanzen/Pin-Ranges bleiben unangetastet.
   ========================================================================== */

/* --- #leistungsuebersicht: statischer Intro-Block (Kopf + Kacheln) ---------
   Füllt zusammen mit dem Section-Padding-Top genau einen Viewport und ist
   darin vertikal zentriert; die GPU-Stage beginnt erst unterhalb des Folds. */
.lst-page.lst-dark .lp-services-showcase .lp-services-intro {
  min-height: calc(100vh - clamp(84px, 12vw, 160px));
  min-height: calc(100dvh - clamp(84px, 12vw, 160px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- #leistungsuebersicht: GPU-Stage mobil (ungepinnt, statischer Block) ---
   Desktop (≥1024px) füllt der gepinnte Sticky bereits 100svh — unverändert. */
@media (max-width: 1023px) {
  .lst-page.lst-dark .lp-gpu-stage__sticky {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- #referenzen: statische Section auf volle Viewport-Höhe zentrieren ---- */
.lst-page.lst-dark .lp-references {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* (#labs: lebt als Stufe-3-Karte im Leistungs-Grid — keine eigene Sektion.) */

/* ==========================================================================
   Referenzen: Scrubber + Caption (Coverflow-Navigation, DOM-Overlay)
   ========================================================================== */
.lp-references__nav {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vw, 26px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}

.lp-references__nav-arrow {
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: var(--font-secondary);
  font-size: var(--type-meta-size);
  font-weight: 600;
  line-height: 1;
  color: rgba(249, 247, 244, 0.95);
  cursor: pointer;
  transition: color 0.25s ease;
}

.lp-references__nav-arrow:hover {
  color: var(--color-text-on-dark);
}

.lp-references__nav-markers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-references__nav-marker {
  width: 26px;
  height: 15px;
  padding: 6px 0;
  border: 0;
  border-radius: 3px;
  background-color: rgba(249, 247, 244, 0.22);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.lp-references__nav-marker:hover {
  background-color: rgba(249, 247, 244, 0.45);
}

.lp-references__nav-marker.is-active {
  background-color: rgba(249, 247, 244, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .lp-references__nav-marker {
    transition: none;
  }
}

/* ==========================================================================
   Topnav — new.studio-artig in drei Zuständen:
   A) oben: breite, helle Frosted-Glass-Leiste mit Dunkelblau-Schimmer
   B) gescrollt: schrumpft weich zur kompakten, zentrierten Pille
      (nur Wortmarke + Menü-Icon)
   C) Menü-Overlay: helle Glas-Karte (siehe .lp-menu weiter unten)
   Fixed über einen pointer-events-freien Wrapper — nimmt keinen
   Layout-Platz weg, bricht Scroll-Snap/GSAP-Pins nicht.
   ========================================================================== */
.lp-topnav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 120; /* über Grain (90), unter Menü (900) und Modal (1000) */
  display: flex;
  justify-content: center;
  pointer-events: none; /* nur die Leiste selbst ist klickbar */
}

.lp-topnav__bar {
  pointer-events: auto;
  position: relative;
  isolation: isolate; /* Sheen (::before, z-index -1) bleibt unter dem Text */
  display: flex;
  align-items: center;
  width: calc(100vw - 40px);
  max-width: 1560px;
  padding: 10px clamp(18px, 2.4vw, 26px);
  border-radius: 8px;
  /* Echtes Glas: NEUTRAL-dunkler Frost ohne Farbstich — das Blau kommt
     ausschließlich per Backdrop aus dem Hintergrund durch (kein Front-Glow) */
  background: rgba(10, 10, 12, 0.32);
  border: 1px solid rgba(249, 247, 244, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(249, 247, 244, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Glas-Schliere: weicher diagonaler Sheen — wie Lichtbrechung auf Glas */
.lp-topnav__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 18%,
    rgba(249, 247, 244, 0.1) 34%,
    rgba(249, 247, 244, 0.03) 46%,
    transparent 58%,
    rgba(249, 247, 244, 0.06) 80%,
    transparent 90%
  );
  pointer-events: none;
}

.lp-topnav__brand {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
}

/* Links + CTA als direkte Bar-Items: Bar bleibt immer groß (kein Collapse
   beim Scrollen), Wortmarke links | Links mittig | CTA rechts */
.lp-topnav__wide {
  display: contents;
}

.lp-topnav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  white-space: nowrap;
}

.lp-topnav__links a {
  font-family: var(--font-secondary);
  font-size: var(--type-micro-size);
  font-weight: 600;
  letter-spacing: var(--type-label-tracking);
  color: rgba(249, 247, 244, 0.95);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lp-topnav__links a:hover,
.lp-topnav__links a:focus-visible {
  color: var(--color-text-on-dark);
}

.lp-topnav__cta {
  font-family: var(--font-secondary);
  font-size: var(--type-micro-size);
  font-weight: 600;
  letter-spacing: var(--type-label-tracking);
  color: var(--color-text-on-dark);
  text-decoration: none;
  margin-left: auto; /* CTA rechts in der Bar */
  padding: 9px 16px;
  border: 1px solid rgba(249, 247, 244, 0.35);
  border-radius: 8px; /* keine Pille */
  transition: border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.lp-topnav__cta:hover,
.lp-topnav__cta:focus-visible {
  border-color: rgba(249, 247, 244, 0.7);
  background-color: rgba(249, 247, 244, 0.1);
}

/* Menü-Icon (zwei Striche) — sichtbar in Zustand B und mobil */
.lp-topnav__menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  max-width: 38px;
  margin-left: 14px;
  padding: 0;
  border: 1px solid rgba(249, 247, 244, 0.28);
  border-radius: 999px;
  background: rgba(249, 247, 244, 0.12);
  cursor: pointer;
  opacity: 1;
  transition:
    max-width 0.65s cubic-bezier(0.32, 0.72, 0, 1),
    margin-left 0.65s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.lp-topnav__menu-btn span {
  display: block;
  width: 15px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--color-text-on-dark);
}

.lp-topnav__menu-btn:hover,
.lp-topnav__menu-btn:focus-visible {
  background: rgba(249, 247, 244, 0.22);
  border-color: rgba(249, 247, 244, 0.5);
}

/* Desktop (>=1024px): Icon eingeklappt — Bar groß, Links/CTA/Sprachschalter
   übernehmen. Erst ab 1024px ist Platz für zentrierte Links + rechtes Cluster
   (Sprachschalter + CTA) ohne Überlappung; darunter -> Hamburger + Menü. */
@media (min-width: 1120px) {
  .lp-topnav__menu-btn {
    max-width: 0;
    margin-left: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
}

@media (max-width: 1119px) {
  /* Tablet + Mobil: kompakte Pille — Wortmarke + Menü-Icon (Sprachschalter +
     Navigation leben im Overlay-Menü). Verhindert die Navbar-Kollision im
     engen Bereich, die bei sichtbaren Links + rechtem Cluster entstand. */
  .lp-topnav__wide {
    display: none;
  }

  .lp-topnav__bar,
  .lp-topnav.is-scrolled .lp-topnav__bar {
    max-width: 340px;
    padding: 10px 14px 10px 26px;
    border-radius: 14px;
  }

  .lp-topnav__menu-btn {
    margin-left: auto;
  }
}

/* ==========================================================================
   Zustand C: Menü-Overlay — helle Frosted-Glass-Karte (new.studio-artig)
   ========================================================================== */
.lp-menu {
  position: fixed;
  inset: 0;
  z-index: 900; /* über Topnav (120), unter Referenz-Modal (1000) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
}

.lp-menu[hidden] {
  display: none;
}

.lp-menu__backdrop {
  position: absolute;
  inset: 0;
  /* Scrim: dunkelt die Seite ab, solange das Menü offen ist; Klick schließt */
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lp-menu__card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 18px;
  /* Glas-Token-Material: neutral-dunkler Frost, warme Lichtkante — keine
     Blau-Tint-Familie mehr (Weiß-Leiter, AP8) */
  background:
    linear-gradient(180deg, rgba(249, 247, 244, 0.06), transparent),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-inset),
    0 30px 80px rgba(2, 4, 12, 0.6);
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-menu.is-open .lp-menu__backdrop {
  opacity: 1;
}

.lp-menu.is-open .lp-menu__card {
  opacity: 1;
  transform: none;
}

.lp-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.lp-menu__close {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(249, 247, 244, 0.28);
  border-radius: 999px;
  background: rgba(249, 247, 244, 0.12);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lp-menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--color-text-on-dark);
}

.lp-menu__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lp-menu__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lp-menu__close:hover,
.lp-menu__close:focus-visible {
  background: rgba(249, 247, 244, 0.22);
  border-color: rgba(249, 247, 244, 0.5);
}

.lp-menu__label {
  margin: 0 0 12px;
  font-family: var(--font-secondary);
  font-size: var(--type-micro-size);
  font-weight: 600;
  letter-spacing: var(--type-label-tracking);
  color: rgba(249, 247, 244, 0.95);
}

.lp-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 30px;
}

.lp-menu__nav a {
  font-family: var(--font-headline);
  font-size: var(--type-h3-size);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.25s ease;
}

.lp-menu__nav a:hover,
.lp-menu__nav a:focus-visible {
  color: rgb(var(--color-accent-blue-rgb));
  transform: translateX(6px);
}

.lp-menu__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(249, 247, 244, 0.18);
}

.lp-menu__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.lp-menu__line {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--type-meta-size);
  color: rgba(249, 247, 244, 0.95);
  text-decoration: none;
}

a.lp-menu__line:hover,
a.lp-menu__line:focus-visible {
  color: var(--color-text-on-dark);
}

.lp-menu__cta {
  font-family: var(--font-secondary);
  font-size: var(--type-micro-size);
  font-weight: 600;
  letter-spacing: var(--type-label-tracking);
  color: var(--color-text-on-dark);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid rgba(249, 247, 244, 0.35);
  border-radius: 8px; /* keine Pille */
  transition: border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.lp-menu__cta:hover,
.lp-menu__cta:focus-visible {
  border-color: rgba(249, 247, 244, 0.7);
  background-color: rgba(249, 247, 244, 0.1);
}

@media (max-width: 520px) {
  .lp-menu__footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-topnav__bar,
  .lp-topnav__wide,
  .lp-topnav__menu-btn,
  .lp-topnav__links a,
  .lp-topnav__cta,
  .lp-menu__backdrop,
  .lp-menu__card,
  .lp-menu__nav a,
  .lp-menu__cta {
    transition: none;
  }
}

/* ==========================================================================
   Globale fixe Hintergrund-Ebene (#lp-bg-flow) — "Blue Flow + Grain"-Shader
   (js/bg-flow.js, Look aus bg-flow-demo.html). z-index 0 statt -1: negative
   Ebenen unter transparentem body wurden durch GSAP-Pin/Transform-Stacking-
   Contexts intermittierend verdeckt. Der Content (main/footer) liegt explizit
   auf z-index 1 darüber. Licht kommt NUR aus dieser Ebene — kein Karo, kein
   UI-Glow (Generik-Audit). Ohne WebGL2 setzt JS inline einen statischen
   radial-gradient als Fallback auf das Canvas-Element.
   ========================================================================== */
#lp-bg-flow {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: #020202; /* bis der erste Shader-Frame steht */
}

/* Haupt-Content explizit über der Hintergrund-Ebene; Navbar (120) und Menü
   liegen ohnehin höher. */
main,
.lp-dark-footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   S2.7 — Über uns / Team (Founder-Cards)
   Text links, Cards rechts, 100dvh auf Desktop. Scroll-/Snap-
   System unberührt — normale Sektion nach #referenzen.
   ============================================================ */
.lst-page.lst-dark .lp-team {
  position: relative !important;
  background: transparent !important;       /* Karo voll sichtbar wie Hero/Labs */
  color: var(--color-text-on-dark) !important;
  padding: clamp(72px, 11vh, 120px) 0 clamp(48px, 8vh, 88px) !important;
  overflow: hidden !important;
  --team-accent: #6b8cff;                    /* gefüllter Primär-CTA, identisch zu Hero/Labs */
  --team-accent-hover: #6b8cff;
}
.lst-page.lst-dark .lp-team::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 82vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 247, 244, 0.12), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Mobile-first: eine Spalte, Text oben, 3D-Stage darunter. */
.lst-page.lst-dark .lp-team__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 6vw, 52px) !important;
  text-align: left !important;
  position: relative;
  z-index: 1; /* Content über den lp-scrim-Ebenen */
}
.lst-page.lst-dark .lp-team__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 36rem;
}

/* Eyebrow — wie Labs: Site-Blau, gesperrt, Versalien, Inter. */
.lst-page.lst-dark .lp-team__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 500;
  /* Standard-Kicker: weiß 0.55, Satzform, keine Sperrung (Blau-Diät) */
  color: rgba(249, 247, 244, 0.95);
  margin: 0 0 12px;
}
.lst-page.lst-dark .lp-team__title {
  font-family: var(--font-headline) !important;
  font-size: var(--type-h2-size) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  font-weight: 500 !important;
  color: var(--color-text-on-dark) !important;
  margin: 0 0 16px !important;
  max-width: 20ch;
}
.lst-page.lst-dark .lp-team__lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead-size);
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-text-on-dark);
  opacity: 0.95;
  margin: 0 0 28px;
  max-width: 46ch;
}

/* Personen-Liste entfernt — Namen/Rollen leben in den Founder-Cards. */

/* CTA — gleicher Rhythmus wie Hero/Labs (Primär gefüllt + dezenter Link). */
.lst-page.lst-dark .lp-team__cta-row {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.lst-page.lst-dark .lp-team .lst-btn {
  font-size: var(--type-btn-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 14px 28px;
  border-radius: 6px;
  border-width: 1px;
}
.lst-page.lst-dark .lp-team .lst-btn--primary {
  background: var(--team-accent);
  border-color: var(--team-accent);
  color: #ffffff;
}
.lst-page.lst-dark .lp-team .lst-btn--primary:hover {
  background: var(--team-accent-hover);
  border-color: var(--team-accent-hover);
  color: #ffffff;
}
/* 3D-Founder-Cards: zwei Glas-Cards, je Gründer eine eigene 3D-Mini-Bühne.
   Schichtung (z-index): Card-Hintergründe (1) -> gemeinsames Canvas (2) ->
   Card-UI mit Badge/Fade/Plakette (3). Die Figuren werden von js/team-3d.js
   per Scissor in die Card-Rechtecke gerendert; der Kopf darf über die obere
   Kartenkante hinausragen (Headroom-Padding am Container). */
.lst-page.lst-dark .lp-team-stage {
  position: relative !important;
  width: 100% !important;
  isolation: isolate !important;
}

.lst-page.lst-dark .lp-team-cards {
  /* Headroom = Luft über den Cards für den Pop-out-Kopf (Scissor ragt hoch).
     Muss als inset-Top am bg-Grid gespiegelt werden -> CSS-Variable. */
  --team-headroom: clamp(36px, 5.5vh, 60px);
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--team-headroom);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}
.lst-page.lst-dark .lp-team-stage.is-revealed .lp-team-cards {
  opacity: 1;
  transform: none;
}

.lst-page.lst-dark .lp-team-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  justify-content: center;
}
.lst-page.lst-dark .lp-team-cards__grid--bg {
  position: absolute;
  inset: var(--team-headroom) 0 0 0;
  z-index: 1;
}
.lst-page.lst-dark .lp-team-cards__grid--ui {
  position: relative;
  z-index: 3;
}

/* Glas-Hintergrund pro Card: Frosted-Glass exakt im Navbar-Material
   (.lp-topnav__bar) — Hintergrund-Glows + Karo schimmern verschwommen durch.
   Die diagonale Glas-Schliere der Topnav liegt als Gradient-Schicht direkt
   im background (::before ist vom Kopf-Glow belegt). Die 1px-Border lebt
   jetzt im UI-Layer (.lp-team-card), damit sie ÜBER der Figur rahmt. */
.lst-page.lst-dark .lp-team-cardbg {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  /* P8b: Diagonale Glas-Schliere (115°-Layer) entfernt — vom Kunden
     abgewählt. Es bleibt der neutrale Fast-Schwarz-Grund + Frost. */
  background: rgba(10, 10, 12, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(249, 247, 244, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: box-shadow 0.35s ease;
}
/* Mobile/Tablet: Blur halbieren — backdrop-filter auf großen Flächen ist dort
   spürbar teurer (Scroll-Jank-Historie der Seite). */
@media (max-width: 1023px) {
  .lst-page.lst-dark .lp-team-cardbg {
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
  }
}
/* (Front-Glow ::before entfernt — das Glas zeigt das Blau ohnehin per
   backdrop-filter; Licht kommt nur aus dem Hintergrund, nie aus UI-Chrome.) */
.lst-page.lst-dark .lp-team-cardbg.is-hover {
  box-shadow:
    inset 0 1px 0 rgba(249, 247, 244, 0.2),
    0 18px 48px rgba(10, 10, 12, 0.55);
}

/* WebGL-Fallback: Monogramm pro Card (kein externes Bild nötig). */
.lst-page.lst-dark .lp-team-cardbg__monogram {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: 0.04em;
  color: var(--color-text-on-dark);
  opacity: 0.85;
}
.lst-page.lst-dark .lp-team-stage[data-webgl-error="true"] .lp-team-cardbg__monogram { display: grid; }
.lst-page.lst-dark .lp-team-stage[data-webgl-error="true"] .lp-team-cards__canvas { display: none !important; }
/* Fehlerpfade dürfen den Reveal nie blockieren (CSS-Absicherung zum JS). */
.lst-page.lst-dark .lp-team-stage[data-webgl-error="true"] .lp-team-cards {
  opacity: 1 !important;
  transform: none !important;
}
/* Per-Card-Fallback: nur EIN GLB fehlt -> Monogramm statt leerer Bühne,
   und das "live gerendert"-Badge wäre eine Falschaussage -> ausblenden. */
.lst-page.lst-dark .lp-team-cardbg.is-fallback .lp-team-cardbg__monogram { display: grid; }
.lst-page.lst-dark .lp-team-card.is-fallback .lp-team-card__twin { display: none; }

.lst-page.lst-dark .lp-team-cards__canvas {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* UI-Card: transparent (Glas liegt im bg-Layer), trägt Fade/Plakette/Links
   und ist das Hover-Ziel für js/team-3d.js. Die 1px-Border liegt HIER (z3,
   über der Figur) — sie rahmt die Figur, statt von ihr übermalt zu werden. */
.lst-page.lst-dark .lp-team-card {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  border: 1px solid rgba(249, 247, 244, 0.1);
  transition: border-color 0.35s ease;
  /* Kein cursor:pointer auf der Card — sie führt keine Aktion aus, der Hover
     ist rein dekorativ (Pop + Rim). Die Icon-Buttons haben ihn. */
}
/* :focus-within = Hover-Parität für Tastatur (Border hier, Pop-out via JS). */
.lst-page.lst-dark .lp-team-card.is-hover,
.lst-page.lst-dark .lp-team-card:focus-within {
  border-color: rgba(107, 140, 255, 0.55);
}
/* Unterer Beschnitt als Designentscheidung: Figur blendet in den Glas-Ton
   aus, BEVOR die Kartenkante sie schneidet (statt hartem Mesh-Ende). */
.lst-page.lst-dark .lp-team-card__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  /* 17px = Innenradius (18px Card-Radius minus 1px Border): Fade endet exakt
     auf der Clip-Kante des Canvas, sonst schimmert am Bogen Render durch. */
  border-radius: 0 0 17px 17px;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.5) 38%, rgba(10, 10, 12, 0.88) 70%, rgba(10, 10, 12, 0.94) 100%);
  pointer-events: none;
}
.lst-page.lst-dark .lp-team-card__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(249, 247, 244, 0.08);
  border-radius: 0 0 17px 17px;
}
.lst-page.lst-dark .lp-team-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lst-page.lst-dark .lp-team-card__id {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lst-page.lst-dark .lp-team-card__name {
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  font-weight: 600;
  color: var(--color-text-on-dark);
}
.lst-page.lst-dark .lp-team-card__role {
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-accent-blue);
}
/* Zwilling-Zeile: dezenter Einzeiler in Inter statt des alten Mono-Badges
   (Monospace ist im Projekt bewusst abgeschafft, siehe :root-Kommentar). */
.lst-page.lst-dark .lp-team-card__twin {
  font-family: var(--font-sans);
  font-size: var(--type-micro-size);
  font-weight: 400;
  color: rgba(249, 247, 244, 0.95);
}
/* LinkedIn/E-Mail: kleine Glas-Icon-Buttons rechts in der Plakette. */
.lst-page.lst-dark .lp-team-card__links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.lst-page.lst-dark .lp-team-card__icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(249, 247, 244, 0.07);
  border: 1px solid rgba(249, 247, 244, 0.12);
  color: rgba(249, 247, 244, 0.95);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Tap-Target auf >= 44px erweitern, ohne den 36px-Look zu ändern. */
.lst-page.lst-dark .lp-team-card__icon-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.lst-page.lst-dark .lp-team-card__icon-btn:hover {
  background: rgba(249, 247, 244, 0.12);
  border-color: rgba(107, 140, 255, 0.5);
  color: var(--color-text-on-dark);
}
.lst-page.lst-dark .lp-team-card__icon-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.lst-page.lst-dark .lp-team-card__icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Augenzwinkernde Caption unter den Cards. */
.lst-page.lst-dark .lp-team-stage__caption {
  margin: 18px auto 0;
  max-width: 90%;
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-on-dark);
  opacity: 0.95;
  pointer-events: none;
}

/* Mobil: Cards untereinander (größere Gesichter statt Briefmarken). */
@media (max-width: 639px) {
  .lst-page.lst-dark .lp-team-cards__grid {
    grid-template-columns: minmax(0, min(78vw, 300px));
  }
}

/* Desktop ≥1024px: 2-Spalten-Split (Text links, 3D rechts), volle Viewport-Höhe. */
@media (min-width: 1024px) {
  .lst-page.lst-dark .lp-team {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
  }
  .lst-page.lst-dark .lp-team__inner {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important;
    gap: 0 !important;
    align-items: center !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
  }
  .lst-page.lst-dark .lp-team__content {
    justify-self: start !important;
    padding-left: clamp(40px, 4.5vw, 88px) !important;
    padding-right: 32px !important;
    max-width: 34rem;
  }
  .lst-page.lst-dark .lp-team-stage {
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(24px, 3vw, 56px);
  }
  /* Niedrige Fenster (Browser auf halbe Bildschirmhöhe gesnappt): Card-Höhe
     hängt nur an der Breite (aspect-ratio) — bei 100dvh-Sektion muss die
     Breite deshalb an die Viewport-Höhe gekoppelt sein, sonst Beschnitt.
     Formel: Card-Höhe = (Breite - Gap)/2 * 1.5 + Headroom + Caption. */
  .lst-page.lst-dark .lp-team-cards {
    max-width: min(720px, calc((100dvh - 170px) * 1.3333 + 40px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lst-page.lst-dark .lp-team-cards {
    transition: none !important;
    transform: none !important;
    /* Reveal-Animation entfällt -> direkt sichtbar, nie auf opacity:0 hängen. */
    opacity: 1 !important;
  }
}

/* ============================================================
   Scrims (every.to-Muster) — der Flow-Canvas wird per Gradient
   in die exakte Seitenfarbe #020202 übergeblendet; Textkontrast
   ist designt, nicht Zufall. Rein dekorative aria-hidden-Divs:
   pointer-events:none, kein backdrop-filter, keine Animation.
   ============================================================ */
.lp-scrim {
  position: absolute;
  pointer-events: none;
}
/* Hero-Ausklang: blendet den Flow am Sektionsende auf #020202. */
.lst-hero .lp-scrim--hero-out {
  inset: auto 0 0 0;
  height: 28vh;
  background: linear-gradient(to bottom, rgba(2, 2, 2, 0) 0%, #020202 100%);
  z-index: 0;
}
/* Team-Einstieg: aus der Seitenfarbe zurück in den Flow. */
.lp-team .lp-scrim--team-in {
  inset: 0 0 auto 0;
  height: 32vh;
  background: linear-gradient(to bottom, #020202 0%, rgba(2, 2, 2, 0) 100%);
  z-index: 0;
}
/* P8b Tal-Prinzip — Gegen-Rampen, je gleich hoch wie ihr Partner an der
   Grenze (Hero-Ausklang 28vh / Team-Einstieg 32vh), damit beide Seiten sich
   exakt bei #020202 treffen: weiches Abdunkeln -> Tal -> weiches Aufblenden. */
/* Leistungs-Einstieg: blendet aus dem Hero-Schwarz zurück in den Flow. */
#leistungsuebersicht .lp-scrim--svc-in {
  inset: 0 0 auto 0;
  height: 28vh;
  background: linear-gradient(to bottom, #020202 0%, rgba(2, 2, 2, 0) 100%);
  z-index: 0;
}
/* Referenzen-Ausklang: blendet den Flow am Sektionsende auf #020202
   (trifft den deckenden Start von .lp-scrim--team-in). */
#referenzen .lp-scrim--refs-out {
  inset: auto 0 0 0;
  height: 32vh;
  background: linear-gradient(to bottom, rgba(2, 2, 2, 0) 0%, #020202 100%);
  z-index: 0;
}
/* Beruhigter Grund hinter der Team-Textspalte — keine sichtbare
   Box (kein Border, kein Radius, kein Blur). */
.lp-team .lp-scrim--team-text {
  inset: 0;
  background: radial-gradient(120% 90% at 25% 50%, rgba(2, 2, 2, 0.55) 0%, rgba(2, 2, 2, 0) 70%);
  z-index: 0;
}


/* ============================================================
   Intro-Guards (Prompt 4): Skip-Button + Scroll-Cue.
   Micro-Ebene, weiß 0.4 — kein Chrome, kein Pfeil, keine Pille.
   ============================================================ */
.lp-intro-skip {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 40;
  background: none;
  border: 0;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: var(--type-micro-size);
  letter-spacing: 0.04em;
  color: rgba(249, 247, 244, 0.95);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.2s ease;
}
.lp-intro-skip.is-visible { opacity: 1; }
.lp-intro-skip:hover { color: rgba(249, 247, 244, 0.95); }
.lp-intro-skip:focus-visible {
  outline: 1px solid var(--color-focus-ring);
  outline-offset: 2px;
  opacity: 1;
}
.lp-intro-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.lp-intro-cue.is-visible { opacity: 1; }
.lp-intro-cue__label {
  font-family: var(--font-sans);
  font-size: var(--type-micro-size);
  letter-spacing: 0.04em;
  color: rgba(249, 247, 244, 0.95);
}
.lp-intro-cue__line {
  width: 1px;
  height: 24px;
  background: rgba(249, 247, 244, 0.4);
  animation: lpCuePulse 2.2s ease-in-out infinite;
}
@keyframes lpCuePulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-intro-cue__line { animation: none; }
}