/* ============================================================
   KÖRPERLOTSEN – Liquid Stack: slot, slab, wave
   ============================================================ */

.liquid-stack {
  position: relative;
  /* Dunkler Fallback-bg: verhindert weißen Body-Blitz am Viewport-Rand,
     wenn auf iOS Safari beim Slab-Wechsel ein 1px-Subpixel-Gap entsteht. */
  background: var(--color-petrol);
  /* overflow: clip contains horizontal wave bleed without breaking
     sticky descendants (overflow: hidden would). Clip lacks Safari
     <16 support; the body:has fallback below catches modern Safari,
     and the mobile media query below removes the bleed entirely. */
  overflow-x: clip;
}

.liquid-stack .slot {
  position: relative;
  height: var(--liquid-slot-height);
}

.liquid-stack .slot:first-child {
  height: var(--liquid-slot-height-first);
}

.liquid-stack .slot:last-child {
  height: var(--liquid-slot-height-last);
}

.liquid-stack .slab {
  position: sticky;
  /* top: -1px + height: calc(100svh + 1px) → 1px Overlap am oberen
     Viewport-Rand. Killt das 1px-Subpixel-Seam, durch das der Body
     auf iOS Safari beim Slab-Wechsel als weiße Linie durchblitzt. */
  top: -1px;
  height: calc(100vh + 1px);
  height: calc(100svh + 1px);
  width: 100%;
  /* Eigener Compositing-Layer → fixt iOS-Safari-Sticky-Jitter
     (Subpixel-Verschiebung des Inhalts pro Frame). */
  transform: translateZ(0);
  will-change: transform;
  /* No overflow:hidden — wave child is positioned bottom:100% (above the
     slab's top edge) and would be clipped. Content overflow is handled
     via .slab__content sizing. */
}

/* Prevent horizontal scrollbar from wave's left:-5%; width:110% bleed.
   Desktop only: `overflow-x: clip` on body in Safari creates a containing
   block for position:fixed descendants, causing the fixed header to scroll
   with the page. On mobile the sticky stack is disabled, so .liquid-stack's
   own overflow-x:clip handles the bleed without affecting fixed elements. */
@media (min-width: 901px) {
  body:has(.liquid-stack) {
    overflow-x: clip;
  }
}

/* Wave belongs to its slab and protrudes upward into the previous slab.
   Painted in this slab's bg color so the slab "rises" through a wavy edge.
   Overlap the slab top by 1px to avoid a subpixel seam line on iOS Safari. */
.liquid-stack .wave {
  position: absolute;
  left: -5%;
  width: 110%;
  height: calc(100vh + 1px);
  height: calc(100svh + 1px);
  bottom: calc(100% - 1px);
  will-change: transform;
  pointer-events: none;
  z-index: 1;
}

.liquid-stack .wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Slab content sits above its own wave. */
.liquid-stack .slab > .slab__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  /* safe center: zentriert solange der Content in die Slab-Höhe passt, klebt
     bei Überlauf aber am Anfang (oben) statt symmetrisch oben UND unten
     abzuschneiden. So bleibt zumindest der obere Content-Teil (Eyebrow,
     Headline) auf kurzen Desktop-Viewports immer sichtbar. */
  align-items: safe center;
  padding: 0 var(--pad-x);
}

/* Reduced motion: drop sticky, drop pinning, content flows normally. */
@media (prefers-reduced-motion: reduce) {
  /* :first-child/:last-child mitnennen — sonst behalten deren höher-
     spezifische Desktop-Regeln ihre feste svh-Höhe (siehe Mobile-Block). */
  .liquid-stack .slot,
  .liquid-stack .slot:first-child,
  .liquid-stack .slot:last-child {
    height: auto;
  }
  .liquid-stack .slab {
    position: relative;
    height: auto;
    min-height: 80vh;
  }
  .liquid-stack .wave {
    display: none;
  }
}

/* Mobile: kompletter Layout-Switch.
   Sticky-Stack mit Wave-Morph wird auf Mobile aufgegeben — verursacht
   auf iOS Safari Sticky-Jitter, weiße Subpixel-Seams und ist auf Touch
   ein unruhiges Erlebnis. Stattdessen klassische Long-Page mit
   statischen Wave-Dividern zwischen den Sections. */
@media (max-width: 900px) {
  /* Stack-bg auf Mobile transparent: kein Sticky mehr, also kein
     iOS-Subpixel-Seam-Schutz nötig. Der Petrol-Fallback würde sonst
     bei viewport-Resize (URL-Bar-Toggle) als feine dunkle Linie
     zwischen den Slabs durchscheinen. */
  .liquid-stack {
    background: transparent;
  }

  /* :first-child UND :last-child explizit nennen — deren Desktop-Regeln
     haben höhere Spezifität (0,3,0) als ".liquid-stack .slot" (0,2,0) und
     würden sonst ihre feste svh-Höhe behalten. Beim ersten Slot fixiert das
     die Slot-Höhe auf 100svh: ist svh (URL-Bar sichtbar) kleiner als die
     echte Hero-Höhe, ragt der petrol-Hero in den nächsten (teal-dark) Slot
     → dunkelblauer Streifen am Standorte-Anfang. */
  .liquid-stack .slot,
  .liquid-stack .slot:first-child,
  .liquid-stack .slot:last-child {
    height: auto;
  }

  .liquid-stack .slab {
    /* relative bleibt für absolute Wave-Positionierung. */
    position: relative;
    top: auto;
    height: auto;
    transform: none;
    will-change: auto;
    /* Padding-bottom gibt dem nächsten Slab Platz, damit dessen Wave
       (90px hoch) in diesen Slab hineinragen kann ohne Content zu
       überdecken. */
    padding: clamp(60px, 10vh, 110px) 0 clamp(90px, 11vh, 110px);
  }

  /* Non-hero slabs: Wave übernimmt visuellen Übergang — weniger top-padding
     nötig, da Wave bereits die Farbfläche auffüllt. */
  .liquid-stack .slab:not(.slab--hero) {
    padding-top: clamp(20px, 3vh, 36px);
  }

  /* Mehr Atmung unter Methode/Vertrauen — Sections mit dichter
     Inhalt-Komposition wirken sonst gedrängt vor dem nächsten Übergang. */
  .liquid-stack .slab--methode,
  .liquid-stack .slab--vertrauen {
    padding-bottom: clamp(120px, 16vh, 170px);
  }

  /* Hero-Slab bleibt full-viewport für starken Einstieg. */
  .liquid-stack .slab--hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-bottom: clamp(90px, 11vh, 110px);
  }

  /* Content fließt natürlich — kein height:100% / center-flex mehr.
     position: static, damit absolut-positionierte Kinder wie scroll-hint
     am übergeordneten .slab--hero ankern, nicht am inhalt-hohen content. */
  .liquid-stack .slab > .slab__content {
    height: auto;
    display: block;
    position: static;
  }
  .liquid-stack .slab--hero > .slab__content {
    width: 100%;
  }

  /* Wave als statischer Section-Divider: ragt 90px in den vorherigen
     Slab hinein und führt visuell von dessen Farbe in die eigene über.
     Wave-Fill = this-slab-color (im SVG hardcoded), top-Bereich des
     SVG ist transparent → previous-slab-color scheint durch.
     Höhe: 91px (1px overlap unten in den Slab) → killt subpixel-Spalt
     zwischen Wave-Bottom und Slab-Bg, durch den sonst der Body-bg
     als feine Linie sichtbar würde. */
  .liquid-stack .wave {
    position: absolute;
    top: -90px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 91px;
    will-change: auto;
  }
  .liquid-stack .wave svg {
    width: 100%;
    height: 100%;
  }
}

/* ============================================================
   Ultra-kurze Desktop-Viewports (kleine Laptops, stark verkleinerte
   Fenster). Selbst nach dem Spacing-Tuning (vh-Clamps + safe center)
   passt der dichte Slab-Content (Vertrauen, Menschen, Standorte) nicht
   mehr in die Viewporthöhe. Statt ihn vom nächsten Sticky-Slab
   abschneiden zu lassen, geben wir — exakt wie die reduced-motion- und
   Mobile-Logik — den Sticky-Pin auf: Slabs fließen als normale Sections,
   alles bleibt sichtbar.

   Warum max-height und NICHT svh: Media-Query-Height hat gar keine
   svh-Variante, und auf dem Desktop ist die Viewporthöhe statisch (keine
   ein-/ausfahrende URL-Bar). svh ist ein reiner Mobile-Stabilisator und
   hier der falsche Hebel. 640px liegt unter typischen Laptop-Content-
   Höhen (768p ≈ 720px bleibt gepinnt), greift also nur bei echten
   Mini-Viewports.
   ============================================================ */
@media (min-width: 901px) and (max-height: 640px) {
  /* :first-child/:last-child mitnennen — sonst behalten deren höher-
     spezifische Desktop-Regeln (0,3,0) ihre feste svh-Höhe. */
  .liquid-stack .slot,
  .liquid-stack .slot:first-child,
  .liquid-stack .slot:last-child {
    height: auto;
  }

  .liquid-stack .slab {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
    transform: none;
    will-change: auto;
  }

  /* Dichte Slabs dürfen über die Viewporthöhe hinauswachsen — kein
     min-height-Zwang, dafür ruhiges Section-Padding. */
  .liquid-stack .slab--standorte,
  .liquid-stack .slab--vertrauen,
  .liquid-stack .slab--methode,
  .liquid-stack .slab--leistungen,
  .liquid-stack .slab--menschen {
    min-height: 0;
    padding: clamp(48px, 9vh, 88px) 0;
  }

  /* Content fließt von oben (kein center-Pinning mehr). position: static,
     damit absolut-positionierte Kinder wie scroll-hint am Slab ankern. */
  .liquid-stack .slab > .slab__content {
    height: auto;
    display: block;
    position: static;
  }

  /* Inner-Grids, die auf height:100% basieren, auf natürliche Höhe
     zurücksetzen — sonst kollabieren bzw. überdehnen sie ohne definite
     Parent-Höhe. */
  .slab-inner--standorte,
  .slab-inner--menschen,
  .slab-inner--leistungen {
    height: auto;
  }

  /* Founder-Cards nicht mehr auf 34vh deckeln — sollen ihren Text zeigen. */
  .team-founders {
    max-height: none;
  }

  /* Wave-Morph aufgeben (wie reduced-motion). Der JS-Ticker mutiert dann
     nur noch unsichtbare Pfade — harmlos. */
  .liquid-stack .wave {
    display: none;
  }
}

/* ============================================================
   Static Wave Separators (Subpages)
   Verwendung: <svg class="wave-sep wave-sep--from-petrol …">
   Klasse beschreibt was OBEN steht. SVG-fill = Bg der nächsten
   Section.
   ============================================================ */

.wave-sep {
  display: block;
  width: 100%;
  height: 80px;
  /* Negative Top-Margin überlappt 1px in Section drüber → killt
     Subpixel-Seam zwischen Section drüber und SVG-Top.
     Negative Bottom-Margin zieht die Folge-Section 1px über die
     SVG-Unterkante → killt den Subpixel-Seam darunter. Folge-Section-
     bg == SVG-fill, daher unsichtbarer Overlap. Ohne das blitzt der
     Body-bg auf Mobile (preserveAspectRatio=none, 80→60px-Skalierung,
     fraktionale Device-Pixel-Position) als feine Linie durch. */
  margin-top: -1px;
  margin-bottom: -1px;
}

@media (max-width: 900px) {
  .wave-sep {
    height: 60px;
  }
}

/* From-* modifiers: background-color = previous section's color.
   SVG fill = next section's color. The wave shape forms the boundary. */
.wave-sep--from-petrol {
  background-color: var(--color-petrol);
}

.wave-sep--from-mint {
  background-color: var(--color-mint);
}

.wave-sep--from-offwhite {
  background-color: var(--color-offwhite);
}

/* Variants: gleiches viewBox 0 0 1440 80, unterschiedliche
   Schwingung. Im HTML als <path d="…"> direkt eingefügt — keine
   Wahl per CSS, sondern per Path-String. Drei Strings stehen unten
   in den Komponenten-Kommentaren bereit. */

/* Path-Varianten (jeweils viewBox="0 0 1440 80" preserveAspectRatio="none"):

   variant-a (sanft, eine Welle):
     M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z

   variant-b (asymmetrisch, Welle links höher):
     M0,30 C200,70 600,10 900,40 C1100,60 1300,20 1440,50 L1440,80 L0,80 Z

   variant-c (zwei Wellen, dramatischer):
     M0,50 C180,10 360,70 540,40 C720,10 900,60 1080,40 C1260,20 1440,50 1440,50 L1440,80 L0,80 Z

   fill="…" pro Wave manuell setzen = Bg-Hex der nächsten Section
   drunter (#0E2931 petrol / #2B7574 mint / #E2E2E0 offwhite).
*/