/* ============================================================
   MÄRCHEN ONKLS — Stylesheet
   Build: v2.0 · 2026-05-09 · Mode A+ · 13 Sections + Layer-2-Divider
   Quelle: briefing/vorlage/Abschnitte/Seite 1.png … Seite 15.png
   ============================================================ */

/* ────────── @font-face (lokal, DSGVO) ────────── */

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("Bilder/fonts/zalando-sans-expanded/ZalandoSansExpanded-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("Bilder/fonts/zalando-sans-expanded/ZalandoSansExpanded-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url("Bilder/fonts/saira/Saira-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url("Bilder/fonts/saira/Saira-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: italic;
  font-display: swap;
}
/* Korr 2026-06-08: "Dot Matrix"-Akzentschrift entfernt (Kunden-Befund "80er
   Schriftart, gehoert da nicht rein"). Akzent-Glyphen (> / ›-Listen-Pfeile in
   Sec 06 + Sec 09) rendern jetzt in Saira. Font-Dateien aus Bilder/fonts/
   dot-matrix/ geloescht. */

/* ────────── :root — Design-Tokens ────────── */

:root {
  --ws-bg-color:        #000000;
  --ws-bg-secondary:    #050610;
  --ws-bg-elevated:     #0c0d18;
  --ws-text-color:      #ffffff;
  --ws-text-muted:      #c8cdd6;
  --ws-text-subtle:     #7a8190;
  --ws-divider:         rgba(255, 255, 255, 0.08);

  --ws-mo-blue-neon:    #5AB8FF;
  --ws-mo-blue-bright:  #0266F0;
  --ws-mo-blue-light:   #1855CC;
  --ws-mo-blue-mid:     #0037A9;
  --ws-mo-blue-deep:    #001A55;
  --ws-mo-blue-glow:    rgba(2, 102, 240, 0.45);
  --ws-mo-blue-soft:    rgba(2, 102, 240, 0.15);
  --ws-mo-steel-darkest: #0a0e16;
  --ws-mo-steel-dark:    #1a2434;
  --ws-mo-steel-mid:     #4a5e7a;
  --ws-mo-steel-light:   #b8cce6;
  --ws-mo-steel-bright:  #e8f0fa;

  --ws-font-headline:   "Zalando Sans Expanded", "Helvetica Neue", system-ui, sans-serif;
  --ws-font-body:       "Saira", "Helvetica Neue", system-ui, sans-serif;
  --ws-font-accent:     "Saira", "Helvetica Neue", monospace;

  --ws-fs-display:      clamp(3.25rem, 7.5vw, 6.5rem);
  --ws-fs-h1:           clamp(2.5rem, 5.5vw, 4.75rem);
  --ws-fs-h2:           clamp(2rem, 4vw, 3.25rem);
  --ws-fs-h3:           clamp(1.4rem, 2.4vw, 2rem);
  --ws-fs-body:         clamp(1rem, 1.15vw, 1.125rem);
  --ws-fs-small:        0.875rem;
  --ws-fs-caption:      0.75rem;

  /* ── Typo-Rollen-System (Typo-Unify 2026-06-09): EINE Quelle pro Rolle.
       Section-Headlines, Sublines und Body referenzieren diese Tokens statt
       eigener clamp()-Werte. Mins sind <= alle bisherigen Mobile-Werte ->
       kein neuer Umbruch/Overflow. Geometrie/Transforms bleiben unberuehrt. ── */
  --ws-role-h2-size:    clamp(1.55rem, 4.6vw, 3.5rem);   /* alle Section- + Scrub-Headlines, alle Breakpoints; Mobile-Min 1.55rem (~25px) — Hierarchie ueber Body/Subline (Typo-Fix 2026-06-09); < historischer 27px-Aufbruch-Wert -> kein Overflow */
  --ws-role-sub-size:   clamp(1.125rem, 1.9vw, 1.35rem); /* alle Sublines — Mobile-Min 1.125rem (18px) MUSS > Body-Min (16px) bleiben, sonst invertierte Hierarchie (Typo-Fix 2026-06-09) */
  --ws-role-body-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);  /* einheitlicher Body-Schatten (kraeftig + lesbar ueber Bild/All — Referenz Sec 09) */

  --ws-lh-tight:        1.05;
  --ws-lh-snug:         1.15;
  --ws-lh-normal:       1.55;
  --ws-letter-display:  -0.02em;
  --ws-letter-caption:  0.18em;

  --ws-space-2xs:       4px;
  --ws-space-xs:        8px;
  --ws-space-sm:        16px;
  --ws-space-md:        32px;
  --ws-space-lg:        64px;
  --ws-space-xl:        120px;
  --ws-space-2xl:       200px;
  --ws-section-padding: clamp(80px, 12vw, 160px);

  --ws-container-max:   1500px;
  --ws-container-pad:   clamp(24px, 5vw, 80px);

  --ws-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ws-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ws-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ws-dur-fast:        200ms;
  --ws-dur-base:        400ms;
  --ws-dur-slow:        800ms;
  --ws-dur-bg-drift:    60s;

  --ws-z-layer1:        10;
  --ws-z-layer2:        1;
  --ws-z-header:        100;
  --ws-z-sticky:        90;
}

/* ────────── Reset + Base ────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Korr 2026-06-08 (Kunden-Befund Firefox-Sprung, Folge zu 2026-06-06e Lenis-Guard):
   scroll-behavior: smooth ENTFERNT. Firefox laesst die CSS-Smooth-Scroll-Animation
   auf dem MAIN THREAD laufen — der wird pro Scroll-Frame vom Scrub-Canvas-Draw +
   ~10 getBoundingClientRect-Reads blockiert. Die Animation kann nicht fliessen und
   SNAPPT zum Zielpunkt, sobald der Thread frei wird → "springt zu einem Punkt
   weiter unten". Ohne smooth laeuft FF-Wheel rein ueber den Compositor (APZ) und ist
   gegen Main-Thread-Stalls immun. Keine In-Page-Anker (href="#") betroffen; Karussell
   nutzt explizites scrollBy({behavior:'smooth'}); Reduced-Motion war ohnehin auto. */
html { height: 100%; -webkit-text-size-adjust: 100%; overflow-anchor: none; }
/* Inner-Scroll-Container (iOS-Adressleisten-Fix, finale Variante 2026-06-08):
   Body scrollt NICHT (viewport-fixiert), #ws-scroll scrollt. iOS-Toolbar bleibt
   fix → GPU-Scrolling via -webkit-overflow-scrolling, KEIN Resize-Sprung, KEIN
   Lag. Einklappende Toolbar ist auf iOS nicht lag-frei machbar (Hauptthread +
   schwerer Scrub) — das ist der Industrie-Standard (Apple/GSAP frieren sie ebenso
   ein). User-Entscheid nach Test beider Varianten. */
body {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  background: var(--ws-bg-color);
  color: var(--ws-text-color);
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ws-scroll-container {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;   /* GPU-Momentum-Scrolling = glatt */
  overscroll-behavior-y: none;
  overflow-anchor: none;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ws-mo-blue-neon);
  outline-offset: 4px;
  border-radius: 2px;
}
::selection { background: var(--ws-mo-blue-neon); color: var(--ws-bg-color); }

.ws-container {
  width: 100%;
  max-width: var(--ws-container-max);
  margin-inline: auto;
  padding-inline: var(--ws-container-pad);
}

.ws-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--ws-dur-slow) var(--ws-ease-out),
              transform var(--ws-dur-slow) var(--ws-ease-out);
  will-change: opacity, transform;
}
.ws-reveal.is-visible { opacity: 1; transform: none; }
.ws-reveal[data-delay="1"] { transition-delay: 80ms; }
.ws-reveal[data-delay="2"] { transition-delay: 160ms; }
.ws-reveal[data-delay="3"] { transition-delay: 240ms; }
.ws-reveal[data-delay="4"] { transition-delay: 320ms; }
.ws-reveal[data-delay="5"] { transition-delay: 400ms; }
.ws-reveal[data-delay="6"] { transition-delay: 480ms; }

/* ────────── Header (fade-out beim Scrollen) ────────── */

.ws-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--ws-z-header);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: clamp(20px, 3vw, 48px);
  pointer-events: none;
  transition: opacity var(--ws-dur-base) var(--ws-ease-out),
              transform var(--ws-dur-base) var(--ws-ease-out);
}
.ws-header.is-hidden { opacity: 0; transform: translateY(-12px); }
.ws-header-logo { pointer-events: auto; display: inline-flex; }
.ws-header-logo img,
.ws-header-logo video {
  width: clamp(96px, 11vw, 168px);
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12%;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.6));
}

/* ────────── Section global ────────── */

.ws-sec {
  position: relative;
  padding-block: var(--ws-section-padding);
  background: var(--ws-bg-color);
  isolation: isolate;
}

/* Layer-2 Divider — Milchstrasse-Vollbild zwischen Sec 03 und Sec 04 */
.ws-layer-2-divider {
  position: relative;
  height: clamp(720px, 130svh, 1400px);
  background: var(--ws-bg-color);
  overflow: hidden;
  isolation: isolate;
}
.ws-layer-2-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("Bilder/milchstrasse-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}
.ws-layer-2-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ws-bg-color) 0%, transparent 25%, transparent 75%, var(--ws-bg-color) 100%);
  z-index: 1;
}
@keyframes ws-bg-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-6%); }
}

/* ────────── Footer ────────── */

.ws-footer {
  background: var(--ws-bg-color);
  /* Korr 16.3 (2026-05-16): grauer Trennstrich raus — Footer geht nahtlos aus schwarzer Flaeche ueber. */
  padding-block: var(--ws-space-md);
  padding-inline: var(--ws-container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ws-space-xs);
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-caption);
  letter-spacing: var(--ws-letter-caption);
  text-transform: uppercase;
  color: var(--ws-text-subtle);
}
/* Korr 16.1 (2026-05-15): zentriertes statisches MO-Logo im Footer (kleiner als Header-Logo). */
.ws-footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ws-space-sm);
}
.ws-footer-logo img,
.ws-footer-logo video {
  width: clamp(72px, 8vw, 96px);
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12%;
}
.ws-footer-nav {
  display: flex;
  align-items: center;
  gap: var(--ws-space-sm);
  flex-wrap: wrap;
  justify-content: center;
}
/* QA-Fix B3 (2026-06-06): Links waren 19px hoch — Touch-Pflicht >= 44px
   (core/mobile-ux.md). Padding + Negativ-Margin = groessere Hit-Area ohne
   sichtbare Layout-Aenderung. */
.ws-footer-link {
  transition: color var(--ws-dur-fast) var(--ws-ease-out);
  display: inline-block;
  padding: 13px 10px;
  margin: -13px -10px;
}
.ws-footer-link:hover { color: var(--ws-mo-blue-neon); }

/* ────────── Sticky Mail ────────── */

.ws-sticky-mail-wrap {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  /* Korr 16.10 (2026-05-17): z-index 10000 -> ueber Loader (9999). Im
     LOADING-State via body.ws-is-loading opacity 0 ausgeblendet, im
     READY/HIDDEN-State immer klar sichtbar (User: "Email-Button soll
     immer klar bleiben, nicht von halbtransparenter Loader-Flaeche
     verdeckt werden"). */
  z-index: 10000;
  /* Korr 2026-06-09: Button-Wanderung (.is-left) entfernt — der Sticky-Mail-Button
     bleibt jetzt durchgaengig unten rechts (User-Wunsch). Stattdessen weichen die
     Scrub-Texte (text-block--br) per groesserem bottom-Offset nach oben aus. */
  transition: opacity 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
body.ws-is-loading .ws-sticky-mail-wrap {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ws-sticky-mail-wrap { transition: opacity 600ms ease; }
}
.ws-sticky-mail-wrap .ws-mo-btn--circle {
  width: clamp(72px, 7vw, 88px);
  height: clamp(72px, 7vw, 88px);
}
.ws-sticky-mail-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MO-Button-Familie v9.9 (Royal-Blau 3D-Chrome-Glas)
   ============================================================ */

.ws-mo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;
  padding: 0;
  font-family: var(--ws-font-body);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a2030;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.7));
  transition: transform 240ms cubic-bezier(0.34, 1.5, 0.64, 1),
              filter   240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-mo-btn:hover, .ws-mo-btn:focus-visible {
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 18px rgba(2, 102, 240, 0.45))
          drop-shadow(0 0 36px rgba(90, 184, 255, 0.22));
}
.ws-mo-btn:active {
  transform: translateY(1px) scale(0.97);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 22px rgba(90, 184, 255, 0.55));
  transition-duration: 90ms;
}

.ws-mo-btn__rim-outer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -3;
  background:
    radial-gradient(ellipse 4% 65% at 3% 50%, rgba(255,255,255,0.92) 0%, rgba(245,250,255,0.55) 30%, rgba(220,235,250,0.22) 70%, transparent 100%),
    radial-gradient(ellipse 4% 65% at 97% 50%, rgba(255,255,255,0.9) 0%, rgba(245,250,255,0.5) 30%, rgba(220,235,250,0.2) 70%, transparent 100%),
    radial-gradient(ellipse 8% 80% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(248,252,255,0.7) 25%, rgba(225,238,252,0.4) 55%, rgba(200,220,240,0.15) 80%, transparent 100%),
    radial-gradient(ellipse 7% 75% at 50% 100%, rgba(255,255,255,0.92) 0%, rgba(238,246,252,0.6) 30%, rgba(210,228,245,0.28) 65%, transparent 100%),
    conic-gradient(
      from 270deg at 50% 50%,
      var(--ws-mo-steel-darkest) 0deg,
      var(--ws-mo-steel-mid) 25deg,
      var(--ws-mo-steel-light) 50deg,
      var(--ws-mo-blue-bright) 70deg,
      var(--ws-mo-blue-neon) 75deg,
      var(--ws-mo-blue-bright) 79deg,
      var(--ws-mo-blue-light) 85deg,
      var(--ws-mo-blue-mid) 95deg,
      var(--ws-mo-blue-light) 105deg,
      var(--ws-mo-blue-bright) 109deg,
      var(--ws-mo-blue-neon) 113deg,
      var(--ws-mo-blue-bright) 118deg,
      var(--ws-mo-steel-light) 135deg,
      var(--ws-mo-steel-mid) 160deg,
      var(--ws-mo-steel-darkest) 180deg,
      var(--ws-mo-steel-mid) 200deg,
      var(--ws-mo-steel-light) 220deg,
      var(--ws-mo-blue-bright) 240deg,
      var(--ws-mo-blue-neon) 247deg,
      var(--ws-mo-blue-bright) 252deg,
      var(--ws-mo-blue-light) 258deg,
      var(--ws-mo-blue-mid) 270deg,
      var(--ws-mo-blue-light) 282deg,
      var(--ws-mo-blue-bright) 288deg,
      var(--ws-mo-blue-neon) 293deg,
      var(--ws-mo-blue-bright) 300deg,
      var(--ws-mo-steel-light) 325deg,
      var(--ws-mo-steel-mid) 345deg,
      var(--ws-mo-steel-darkest) 360deg
    );
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.85), inset 0 0 0 2px rgba(20,28,42,0.5);
}
.ws-mo-btn--circle .ws-mo-btn__rim-outer {
  background:
    radial-gradient(ellipse 32% 7% at 50% 4%, rgba(255,255,255,1) 0%, rgba(248,252,255,0.85) 12%, rgba(230,242,252,0.5) 35%, rgba(200,222,242,0.2) 65%, transparent 100%),
    radial-gradient(ellipse 30% 7% at 50% 96%, rgba(255,255,255,0.95) 0%, rgba(245,250,255,0.7) 14%, rgba(218,232,248,0.42) 38%, rgba(190,210,235,0.18) 65%, transparent 100%),
    radial-gradient(ellipse 7% 32% at 96% 50%, rgba(255,255,255,1) 0%, rgba(248,252,255,0.8) 12%, rgba(228,240,250,0.45) 38%, rgba(200,222,242,0.18) 65%, transparent 100%),
    radial-gradient(ellipse 7% 32% at 4% 50%, rgba(255,255,255,1) 0%, rgba(248,252,255,0.8) 12%, rgba(228,240,250,0.45) 38%, rgba(200,222,242,0.18) 65%, transparent 100%),
    conic-gradient(
      from 270deg at 50% 50%,
      var(--ws-mo-steel-darkest) 0deg, var(--ws-mo-steel-dark) 18deg,
      var(--ws-mo-steel-mid) 35deg, var(--ws-mo-steel-darkest) 55deg,
      var(--ws-mo-blue-mid) 65deg, var(--ws-mo-blue-bright) 72deg,
      var(--ws-mo-blue-neon) 76deg, var(--ws-mo-blue-bright) 80deg,
      var(--ws-mo-steel-darkest) 88deg, var(--ws-mo-steel-mid) 92deg,
      var(--ws-mo-steel-darkest) 100deg, var(--ws-mo-blue-bright) 108deg,
      var(--ws-mo-blue-neon) 112deg, var(--ws-mo-blue-bright) 116deg,
      var(--ws-mo-blue-mid) 124deg, var(--ws-mo-steel-darkest) 145deg,
      var(--ws-mo-steel-mid) 162deg, var(--ws-mo-steel-darkest) 180deg,
      var(--ws-mo-steel-mid) 198deg, var(--ws-mo-steel-darkest) 215deg,
      var(--ws-mo-blue-mid) 235deg, var(--ws-mo-blue-bright) 244deg,
      var(--ws-mo-blue-neon) 248deg, var(--ws-mo-blue-bright) 252deg,
      var(--ws-mo-steel-darkest) 260deg, var(--ws-mo-steel-mid) 264deg,
      var(--ws-mo-steel-darkest) 272deg, var(--ws-mo-blue-bright) 280deg,
      var(--ws-mo-blue-neon) 290deg, var(--ws-mo-blue-bright) 296deg,
      var(--ws-mo-blue-mid) 305deg, var(--ws-mo-steel-darkest) 325deg,
      var(--ws-mo-steel-mid) 342deg, var(--ws-mo-steel-darkest) 360deg
    );
}
.ws-mo-btn__cut {
  position: absolute;
  z-index: -3;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,28,0.92) 0%, rgba(20,36,70,0.78) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 25%, black 75%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 25%, black 75%, transparent 100%);
}
.ws-mo-btn__cut--tl { top: 5px; left: 10%; right: 65%; }
.ws-mo-btn__cut--tr { top: 5px; left: 65%; right: 10%; }
.ws-mo-btn__cut--bl { bottom: 5px; left: 10%; right: 65%; }
.ws-mo-btn__cut--br { bottom: 5px; left: 65%; right: 10%; }
.ws-mo-btn__rim-inner {
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  z-index: -2;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.4) 0%, transparent 45%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, var(--ws-mo-steel-mid) 0%, var(--ws-mo-steel-dark) 50%, #2a3850 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.95);
}
.ws-mo-btn__core {
  position: absolute;
  inset: 13px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 22%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #ffffff 0%, #f8fafc 70%, #e8eef2 95%, #d2dae2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 0 0 4px rgba(2,102,240,0.32),
    inset 0 0 18px rgba(2,102,240,0.5),
    inset 0 0 38px rgba(0,55,169,0.25),
    inset 0 4px 10px rgba(255,255,255,0.85);
  overflow: hidden;
}
.ws-mo-btn__core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(90,184,255,0.55) 0%, rgba(2,102,240,0.78) 50%, rgba(0,55,169,0.88) 100%);
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 580ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.ws-mo-btn--dark .ws-mo-btn__core::before {
  background: linear-gradient(180deg, rgba(90,184,255,0.75) 0%, rgba(2,102,240,0.9) 50%, rgba(0,55,169,0.95) 100%);
}
.ws-mo-btn:hover .ws-mo-btn__core::before,
.ws-mo-btn:focus-visible .ws-mo-btn__core::before { opacity: 1; }
.ws-mo-btn:active .ws-mo-btn__core::before { opacity: 1; transition-duration: 150ms; }

.ws-mo-btn--with-badge .ws-mo-btn__core::before {
  opacity: 1;
  z-index: 2;
  background: linear-gradient(180deg, var(--ws-mo-blue-neon) 0%, var(--ws-mo-blue-bright) 50%, var(--ws-mo-blue-mid) 100%);
  inset: 0 0 0 auto;
  width: 56px;
  border-radius: 999px 0 0 999px;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transition: width 580ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-mo-btn--with-badge:hover .ws-mo-btn__core::before,
.ws-mo-btn--with-badge:focus-visible .ws-mo-btn__core::before { width: 100%; }

.ws-mo-btn__badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  z-index: 4;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  transition: right 580ms cubic-bezier(0.65, 0, 0.35, 1), filter 280ms ease-out;
}
.ws-mo-btn--with-badge:hover .ws-mo-btn__badge,
.ws-mo-btn--with-badge:focus-visible .ws-mo-btn__badge { right: calc(100% - 98px); }
.ws-mo-btn--with-badge:hover .ws-mo-btn__text-hover,
.ws-mo-btn--with-badge:focus-visible .ws-mo-btn__text-hover { opacity: 1; }

.ws-mo-btn--dark .ws-mo-btn__core {
  background:
    radial-gradient(circle at 50% 50%, rgba(90,184,255,0.55) 0%, rgba(2,102,240,0.42) 18%, rgba(0,55,169,0.25) 40%, transparent 72%),
    radial-gradient(ellipse at 50% 50%, #0a1422 0%, #04080e 65%, #000408 100%);
  box-shadow:
    0 0 0 1px rgba(90,184,255,1),
    0 0 4px rgba(90,184,255,0.85),
    0 0 10px rgba(2,102,240,0.55),
    inset 0 0 4px rgba(90,184,255,0.85),
    inset 0 0 12px rgba(2,102,240,0.45),
    inset 0 0 26px rgba(0,26,85,0.7);
}

.ws-mo-btn__text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  color: #1a2030;
  font-weight: 600;
  transition: opacity 280ms ease-out;
}
.ws-mo-btn__text--multiline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}
.ws-mo-btn__text--multiline > span { display: block; }
.ws-mo-btn__text-hover {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-30%, -50%);
  z-index: 3;
  white-space: nowrap;
  color: #ffffff;
  font-family: inherit;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out 220ms;
  text-shadow: 0 2px 6px rgba(0, 26, 85, 0.6);
}

.ws-mo-btn__icon {
  position: relative;
  z-index: 1;
  width: 52%;
  height: auto;
  color: #0a0c14;
}
.ws-mo-btn__icon path, .ws-mo-btn__icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ws-mo-btn--dark .ws-mo-btn__icon {
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(90,184,255,1)) drop-shadow(0 0 12px rgba(2,102,240,0.7));
}
.ws-mo-btn--dark .ws-mo-btn__icon path, .ws-mo-btn--dark .ws-mo-btn__icon rect {
  stroke-width: 2; stroke: #ffffff;
}

/* Form-Modifier */
.ws-mo-btn--pill {
  height: 112px;
  padding: 0 64px;
  border-radius: 999px;
  font-size: 24px;
  letter-spacing: 0.34em;
  min-width: 460px;
  justify-content: flex-start;
}
.ws-mo-btn--pill.ws-mo-btn--with-badge { padding: 0 130px 0 64px; }
.ws-mo-btn--rounded-rect {
  height: 112px;
  padding: 0 64px;
  border-radius: 32px;
  font-size: 22px;
  letter-spacing: 0.3em;
  min-width: 480px;
}
.ws-mo-btn--rounded-rect.ws-mo-btn--small {
  font-size: 14px;
  letter-spacing: 0.2em;
}
.ws-mo-btn--circle {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 24px;
}
.ws-mo-btn--circle .ws-mo-btn__rim-inner { inset: 14px; }
.ws-mo-btn--circle .ws-mo-btn__core      { inset: 17px; }

/* Badge */
.ws-mo-btn__badge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 56%,
      rgba(0,26,85,0.45) 60%,
      rgba(0,55,169,0.85) 65%,
      rgba(2,102,240,0.95) 70%,
      rgba(90,184,255,1) 74%,
      rgba(2,102,240,0.95) 78%,
      rgba(0,55,169,0.85) 84%,
      rgba(0,26,85,0.45) 92%,
      transparent 100%
    );
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}
.ws-mo-btn__badge-core {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(90,184,255,0.55) 0%, rgba(2,102,240,0.42) 18%, rgba(0,55,169,0.25) 40%, transparent 72%),
    radial-gradient(ellipse at 50% 50%, #0a1422 0%, #04080e 65%, #000408 100%);
  box-shadow:
    0 0 0 1px rgba(90,184,255,1),
    0 0 4px rgba(90,184,255,0.85),
    0 0 10px rgba(2,102,240,0.55),
    inset 0 0 4px rgba(90,184,255,0.85),
    inset 0 0 12px rgba(2,102,240,0.45),
    inset 0 0 26px rgba(0,26,85,0.7);
}
.ws-mo-btn__rocket {
  width: 42px;
  height: 42px;
  color: #fff;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 3px rgba(2,102,240,0.7));
}

.ws-mo-btn:focus-visible {
  outline: 2px solid var(--ws-mo-blue-bright);
  outline-offset: 8px;
}
.ws-mo-btn:focus:not(:focus-visible) { outline: none; }

@media (max-width: 760px) {
  .ws-mo-btn--pill, .ws-mo-btn--rounded-rect {
    height: 88px;
    padding: 0 40px;
    font-size: 16px;
    letter-spacing: 0.22em;
    min-width: 280px;
  }
  .ws-mo-btn--pill.ws-mo-btn--with-badge { padding: 0 100px 0 40px; }
  .ws-mo-btn__rim-inner { inset: 8px; }
  .ws-mo-btn__core      { inset: 11px; }
  .ws-mo-btn__cut       { height: 4px; }
  .ws-mo-btn__badge { width: 64px; height: 64px; right: 10px; }
  .ws-mo-btn__rocket { width: 32px; height: 32px; }
  .ws-mo-btn--circle { width: 144px; height: 144px; font-size: 12px; }
  .ws-mo-btn__text-hover { font-size: 18px; }
}

/* ============================================================
   Section 01 — Hero (Visual full-bleed + „VIDEO STARTEN")
   Vorlage: Seite 1
   ============================================================ */

.ws-sec-01-hero {
  min-height: 100svh;
  padding-block: 0;
  overflow: hidden;
}
.ws-sec-01-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ws-sec-01-bg video,
.ws-sec-01-bg::after {
  position: absolute;
  inset: 0;
}
.ws-sec-01-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-sec-01-bg::after {
  content: "";
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.05) 65%, rgba(0,0,0,0.85) 92%, #000 100%);
  z-index: 1;
}
.ws-sec-01-loop {
  opacity: 1;
  transition: opacity 500ms ease;
}
.ws-sec-01-hero.is-playing .ws-sec-01-loop {
  opacity: 0;
}
.ws-sec-01-main {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease 100ms;
  z-index: 2;
}
.ws-sec-01-hero.is-playing .ws-sec-01-main {
  opacity: 1;
  pointer-events: auto;
}
.ws-sec-01-cta-wrap {
  position: absolute;
  top: auto;
  bottom: clamp(48px, 11vh, 110px);
  left: 50%;
  transform: translate(-50%, 0);
  z-index: var(--ws-z-layer1);
  transition:
    opacity 420ms ease,
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.ws-sec-01-cta-wrap.is-hidden {
  opacity: 0;
  transform: translate(-50%, 90px);
  pointer-events: none;
}

/* Hero-Pill = nur visuell kleiner, Proportionen 1:1 (transform statt Layout-Override) */
.ws-sec-01-cta-wrap .ws-mo-btn--pill {
  transform: scale(0.72);
  transform-origin: center bottom;
}
@media (max-width: 760px) {
  .ws-sec-01-cta-wrap .ws-mo-btn--pill {
    transform: scale(0.78);
  }
}

/* Sticky-Mail: Icon größer + Metallring dünner (default 14/17px insets sind für 192px-Default
   ausgelegt, bei 88px-Button proportional zu dick → ~40 % schmaler). */
.ws-sticky-mail-wrap .ws-mo-btn__rim-inner { inset: 8px; }
.ws-sticky-mail-wrap .ws-mo-btn__core      { inset: 10px; }
.ws-sticky-mail-wrap .ws-mo-btn__icon {
  width: 80%;
}
.ws-sticky-mail-wrap .ws-mo-btn__icon path,
.ws-sticky-mail-wrap .ws-mo-btn__icon rect {
  stroke-width: 1.6;
}

/* ── Custom Video-Controls (Sec 01 Hauptvideo) ────────────────── */
.ws-vc {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 36px);
  transform: translate(-50%, 24px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.78), rgba(0, 26, 85, 0.62));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(90, 184, 255, 0.32);
  border-radius: 999px;
  box-shadow:
    0 8px 28px rgba(0, 26, 85, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: var(--ws-text-color);
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-caption);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 420ms ease 200ms,
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
  z-index: 3;
  max-width: calc(100% - 32px);
}
.ws-sec-01-hero.is-playing .ws-vc {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.ws-vc-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: background 220ms ease, color 220ms ease;
  flex-shrink: 0;
}
.ws-vc-btn:hover,
.ws-vc-btn:focus-visible {
  background: rgba(90, 184, 255, 0.18);
  color: var(--ws-mo-blue-neon);
  outline: none;
}
.ws-vc-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: none;
}
.ws-vc-playpause .ws-vc-icon--pause,
.ws-vc-mute .ws-vc-icon--volume {
  display: block;
}
.ws-sec-01-hero.is-paused .ws-vc-playpause .ws-vc-icon--play { display: block; }
.ws-sec-01-hero.is-paused .ws-vc-playpause .ws-vc-icon--pause { display: none; }
.ws-sec-01-hero.is-muted .ws-vc-mute .ws-vc-icon--muted { display: block; }
.ws-sec-01-hero.is-muted .ws-vc-mute .ws-vc-icon--volume { display: none; }

.ws-vc-timeline {
  position: relative;
  width: clamp(140px, 28vw, 240px);
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 1;
}
.ws-vc-timeline:focus-visible {
  outline: 2px solid var(--ws-mo-blue-neon);
  outline-offset: 4px;
}
.ws-vc-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--ws-mo-blue-neon), var(--ws-mo-blue-bright));
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(90, 184, 255, 0.55);
}
.ws-vc-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.ws-vc-volume {
  position: relative;
  width: clamp(54px, 10vw, 80px);
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.ws-vc-volume:focus-visible {
  outline: 2px solid var(--ws-mo-blue-neon);
  outline-offset: 4px;
}
.ws-vc-volume-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ws-sec-01-loop,
  .ws-sec-01-main,
  .ws-sec-01-cta-wrap,
  .ws-vc {
    transition: none;
  }
}
@media (max-width: 480px) {
  .ws-vc {
    gap: 8px;
    padding: 8px 12px;
  }
  .ws-vc-time {
    display: none;
  }
}

/* ============================================================
   Bridge 01→02 — schwarzer Spacer + Fade-Übergang
   Hero (Sec 01, Video) → Aufbruch (Sec 02, Rakete-BG)
   ============================================================ */

.ws-sec-bridge {
  width: 100%;
  background: #000;
  position: relative;
}
.ws-sec-bridge--01-02 {
  min-height: clamp(120px, 22svh, 280px);
}

/* Bridge 06→07 — Sec 06 (Galaxien, schwarz) zu Sec 07 (Navigation, dunkel mit BG-Bild).
   Etwas länger als 01→02 für visuelle Atempause nach dem dichten Scrub-Erlebnis. */
.ws-sec-bridge--06-07 {
  min-height: clamp(140px, 26svh, 320px);
  background: linear-gradient(to bottom, #000 0%, #000 65%, rgba(0, 0, 0, 0.6) 100%);
}

@media (max-width: 768px) {
  .ws-sec-bridge--01-02 {
    min-height: clamp(80px, 14svh, 160px);
  }
  .ws-sec-bridge--06-07 {
    min-height: clamp(100px, 18svh, 200px);
  }
}

/* ============================================================
   Section 11.5 — Fenster-Layer-Build (Bridge zwischen Sec 11 und Sec 12)
   Stand: nur Fenster-Ring zentriert, Rest schwarz. Sterne + Planet folgen.
   ============================================================ */
.ws-sec-11-5-fenster {
  position: relative;
  width: 100%;
  background: #000;
  /* Verkuerzter Top-Padding (40svh statt 100svh) — kleinerer Abstand zur
     vorherigen Section "Im Einsatz bewaehrt". */
  padding: 40svh 0 0 0;
}
.ws-sec-11-5-track {
  position: relative;
  min-height: 700svh;
}
.ws-sec-11-5-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ws-sec-11-5-fenster-img {
  display: block;
  width: auto;
  height: auto;
  /* Kleinere Base damit das Image bei Default-Scale 1.3 immer noch sauber in den
     100svh Sticky-Container passt (kein Top/Bottom-Crop). 65vmin × 1.3 ≈ 85vmin,
     70svh × 1.3 ≈ 91svh — beide unter 100. */
  max-width: min(65vmin, 720px);
  max-height: 70svh;
  object-fit: contain;
  position: relative;
  z-index: 3;
  transform-origin: center center;
  transform: scale(var(--ws-sec-11-5-scale, 1));
  will-change: transform;
}
/* Portal-Layer hinter dem Bullauge-Ring. Maskiert auf einen Kreis in der Mitte,
   dessen Radius scroll-driven mitwaechst (gleiche Geste wie das Bullauge selbst).
   Innerhalb des Kreises sind Sterne + Planet full-viewport-cover sichtbar. */
.ws-sec-11-5-portal {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Korr 2026-06-04 (Perf): STATISCHE Maske + transform: scale statt animiertem
     Masken-Radius (--ws-portal-radius entfernt). Der animierte Radius re-rasterte
     den Portal-Layer (inkl. Planet-Bild) jeden Frame — gleiche Fehlerklasse wie
     der Veil vor Folge 19, Mit-Ursache der Scroll-Abhacker beim Fenster-Zoom.
     24vmin × scale == exakt der alte radius=24*scale. Die Kinder werden
     gegenskaliert: Planet via --ws-portal-inv (netto 1.0), Text-Stack via
     Ratio-Scale + Origin-Kompensation (siehe dort). */
  -webkit-mask: radial-gradient(circle 24vmin at 50% 50%, #000 99%, transparent 100%);
          mask: radial-gradient(circle 24vmin at 50% 50%, #000 99%, transparent 100%);
  transform: scale(var(--ws-sec-11-5-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.ws-sec-11-5-stars,
.ws-sec-11-5-planet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
.ws-sec-11-5-stars {
  z-index: 1;
  /* Korr 13.7 (2026-05-16): Portal-Stars nutzen die GLEICHE Parallax-Var wie
     der Shared-BG (--ws-sterne-zone-y) → gleiche Image-Position in beiden
     Layern → seamless Uebergang Sec 11.5 → Sec 12, kein „zweiter Hintergrund". */
  object-position: center calc(50% - var(--ws-sterne-zone-y, 0%));
  transform: none;
}
.ws-sec-11-5-planet {
  /* z-index 3 = ueber Text-Stack: Text verschwindet hinter dem Planet wenn er
     nach unten slidet, statt darueber zu liegen. */
  z-index: 3;
  object-position: center bottom;
  /* Korr 2026-06-04: Gegen-Skalierung zum Portal-Scale (netto 1.0, Origin beide
     50%/50%). translateY bleibt UNVERAENDERT: rightmost-first → translate(Y)
     dann scale(1/s) dann Parent-scale(s) ⇒ Screen-Offset = Y (hebt sich auf). */
  transform: scale(var(--ws-portal-inv, 1)) translateY(var(--ws-planet-y, 0%));
}
/* Text-Stack im Sternenhimmel-Bereich (oberes Drittel des Portal-Kreises).
   3 Phasen-Texte slide-in-from-top → steady → slide-out-to-bottom. */
.ws-sec-11-5-text-stack {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Eigene, abgeschwaechte Scale-Var (text-scale): waechst weniger stark als
     das Bullauge, damit Text auch im max-zoomten Fenster lesbar bleibt.
     Korr 2026-06-04: Das Portal skaliert jetzt selbst (statische Maske, Perf).
     --ws-sec-11-5-text-scale ist deshalb die RATIO textScale/portalScale
     (JS), Netto-Scale am Screen = textScale wie vorher. --ws-text-stack-comp
     kompensiert den Origin-Versatz (Stack-Origin center 32% vs Portal-Origin
     50%): Delta = 18·(s−1)/s vh Desktop, 0 Mobile (Origin dort 50%). */
  transform: translateY(var(--ws-text-stack-comp, 0vh)) scale(var(--ws-sec-11-5-text-scale, 1));
  transform-origin: center 32%;
  will-change: transform;
}
.ws-sec-11-5-text {
  position: absolute;
  /* 35% = mittiger im Frame, klar im Sternen-Bereich oberhalb der Erdhorizont-
     Linie (~55% bei voll sichtbarem Planet). Nicht zu weit oben, sodass der
     Text nicht ueber den Bullauge-Ring laeuft. */
  top: 35%;
  left: 50%;
  width: max-content;
  max-width: min(72vmin, 720px);
  margin: 0;
  color: var(--ws-text-color);
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  transform: translate(-50%, var(--ws-text-y, 0vh));
  opacity: var(--ws-text-op, 0);
  will-change: transform, opacity;
}
/* Text 1 "Unser Angebot ..." — wie .ws-sec-11-headline, aber etwas kleiner
   damit es ins Fenster passt ohne ueber den Bullauge-Ring zu laufen. */
.ws-sec-11-5-text--1 {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
}
/* Text 2 "Besprechen Sie ..." — wie .ws-sec-11-body */
.ws-sec-11-5-text--2 {
  font-family: var(--ws-font-body);
  font-size: clamp(1.125rem, 1.45vw, 1.5rem);
  line-height: var(--ws-lh-snug);
  max-width: min(60vmin, 640px);
}
/* Text 3 "15 Min. for free ..." — wie .ws-sec-11-bullauge-label */
.ws-sec-11-5-text--3 {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.125rem, 2.4vw, 2rem);
  line-height: var(--ws-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ws-letter-display);
}
.ws-sec-11-5-text strong {
  display: block;
}
/* Korr 16.5 (2026-05-17, Mobile): Track-Hoehe von 700svh -> 400svh
   -> Bullauge-Zoom-Animation laeuft 43% schneller (weniger Scrollweg)
   + Text-Position 35% -> 45% (etwas unter Bullauge-Mitte, nicht mehr
   am oberen Bullauge-Rand). User-Befund 2026-05-17. */
@media (max-width: 768px) {
  .ws-sec-11-5-track {
    min-height: 400svh;
  }
  /* Text vertikal mittig im Bullauge: Stack-Scale-Origin auf die Mitte +
     Text via translateY(-50%) echt zentrieren. Vorher top:45% (Oberkante)
     + Origin 32% -> der vergroesserte Mehrzeiler wanderte nach unten.
     User-Wunsch 2026-06-02. */
  .ws-sec-11-5-text-stack {
    transform-origin: center 50%;
  }
  .ws-sec-11-5-text {
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--ws-text-y, 0vh)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-sec-11-5-track {
    min-height: 100svh;
  }
  .ws-sec-11-5-fenster-img {
    transform: scale(1);
  }
  .ws-sec-11-5-portal {
    -webkit-mask: radial-gradient(circle 35vmin at 50% 50%, #000 99%, transparent 100%);
    mask: radial-gradient(circle 35vmin at 50% 50%, #000 99%, transparent 100%);
    transform: none;
  }
}


/* ============================================================
   Section 02 — Aufbruch (Headline + Erde-Rakete-Visual)
   Vorlage: Seite 2 — schwarzer Sterne-BG + Erde links unten + Rakete startet
   ============================================================ */

.ws-sec-02-aufbruch {
  min-height: 100svh;
  padding-block: 0;
  overflow: hidden;
  position: relative;
}
.ws-sec-02-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ws-sec-02-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-sec-02-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 6%, transparent 18%, transparent 70%, #000 100%),
    linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.05) 65%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.ws-sec-02-inner {
  position: relative;
  z-index: var(--ws-z-layer1);
  min-height: 100svh;
  padding-top: clamp(110px, 14vh, 180px);
  padding-bottom: clamp(48px, 8vh, 96px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  row-gap: var(--ws-space-md);
}
@media (min-width: 900px) {
  .ws-sec-02-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(40px, 6vw, 100px);
  }
}
.ws-sec-02-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: var(--ws-lh-snug);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
  align-self: start;
  justify-self: start;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}
@media (min-width: 900px) {
  .ws-sec-02-headline {
    grid-column: 1 / 2;
  }
}
.ws-sec-02-headline span { display: block; }

.ws-sec-02-text-block {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-sm);
  max-width: 38ch;
  align-self: end;
  justify-self: start;
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}
@media (min-width: 900px) {
  .ws-sec-02-text-block {
    grid-column: 2 / 3;
    justify-self: end;
  }
}
.ws-sec-02-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.15vw, 1.125rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
  letter-spacing: 0;
  margin: 0;
}
.ws-sec-02-body {
  font-family: var(--ws-font-body);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: var(--ws-lh-normal);
  color: var(--ws-text-muted);
  margin: 0;
}

/* ============================================================
   Section 03 — Auf dem richtigen Kurs? (Asteroidenfeld)
   Vorlage: Seite 3
   ============================================================ */

.ws-sec-03-kurs {
  min-height: 110svh;
  padding-block: 0;
  overflow: hidden;
}
.ws-sec-03-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ws-sec-03-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-sec-03-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, #000 100%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.7) 100%);
}

/* ── Bridge zwischen Sektionen (schwarzer Übergang) ─────────────── */
.ws-bridge-dark {
  height: clamp(60px, 10vh, 120px);
  background: #000;
  width: 100%;
}
.ws-sec-03-inner {
  position: relative;
  z-index: var(--ws-z-layer1);
  min-height: 100svh;
  padding-top: clamp(110px, 14vh, 180px);
  padding-bottom: clamp(64px, 10vh, 120px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  row-gap: var(--ws-space-md);
}
@media (min-width: 900px) {
  .ws-sec-03-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(40px, 6vw, 100px);
  }
}
.ws-sec-03-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: var(--ws-lh-snug);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
  align-self: start;
  justify-self: start;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}
@media (min-width: 900px) {
  .ws-sec-03-headline {
    grid-column: 1 / 2;
  }
}
.ws-sec-03-headline span { display: block; }

.ws-sec-03-text-block {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-sm);
  max-width: 38ch;
  align-self: end;
  justify-self: start;
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}
@media (min-width: 900px) {
  .ws-sec-03-text-block {
    grid-column: 2 / 3;
    justify-self: end;
  }
}
.ws-sec-03-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.15vw, 1.125rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
  margin: 0;
}
.ws-sec-03-body {
  font-family: var(--ws-font-body);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: var(--ws-lh-normal);
  color: var(--ws-text-muted);
  margin: 0;
}

/* ============================================================
   Section 04 — Der Booster (Triebwerks-Visual + 3 Karten)
   Vorlage: Seite 5 — Triebwerks-Detail mit Glow
   Workaround: schwarzer BG + Triebwerks-Glow via CSS bis Asset geliefert
   ============================================================ */

.ws-sec-04-booster {
  min-height: 100svh;
  padding-block: clamp(40px, 6vh, 80px);
  overflow: hidden;
}
.ws-sec-04-engines {
  display: none;
}
.ws-sec-04-rakete {
  display: block;
  width: clamp(380px, 72vw, 880px);
  height: auto;
  margin: 0 auto clamp(20px, 3vh, 48px);
  pointer-events: none;
}
.ws-sec-04-inner {
  position: relative;
  z-index: var(--ws-z-layer1);
}
.ws-sec-04-header {
  text-align: center;
  margin-bottom: var(--ws-space-xl);
  max-width: 64ch;
  margin-inline: auto;
  padding-top: 0;
}
.ws-sec-04-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-fs-h1);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  margin-bottom: var(--ws-space-md);
}
.ws-sec-04-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
  margin-bottom: var(--ws-space-md);
}
.ws-sec-04-eyebrow {
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ws-text-color);
}
.ws-sec-04-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ws-space-md);
}
@media (min-width: 768px) {
  .ws-sec-04-grid { grid-template-columns: repeat(3, 1fr); }
}
.ws-sec-04-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--ws-divider);
  padding: var(--ws-space-lg);
  transition: border-color var(--ws-dur-base), background var(--ws-dur-base), transform var(--ws-dur-base);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ws-sec-04-card:hover {
  border-color: var(--ws-mo-blue-soft);
  background: rgba(8, 12, 24, 0.6);
  transform: translateY(-4px);
}
.ws-sec-04-card-title {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: var(--ws-fs-h3);
  line-height: var(--ws-lh-snug);
  text-transform: uppercase;
  margin-bottom: var(--ws-space-md);
  color: var(--ws-mo-blue-neon);
}
.ws-sec-04-card-body {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-normal);
  color: var(--ws-text-muted);
}

/* ============================================================
   Section 05 — Stabilisieren + 3 Säulen + Termin sichern
   Vorlage: Seite 6 (Astronaut-Cockpit) + Seite 7 (3 Bullaugen + CTA)
   ============================================================ */

.ws-sec-05-stabilisieren {
  min-height: 100svh;
  padding-block: clamp(40px, 6vh, 80px);
  overflow: hidden;
}
.ws-sec-05-bg {
  position: relative;
  /* Korr 2026-06-01: Full-Bleed über alle Viewports (vorher 94vw/1280px gedeckelt →
     schwarze Seitenränder) + bild-füllende Höhe je Viewport. Das Querformat-Bild füllt
     einen höheren (Hochkant-)Schirm nur via object-fit: cover; object-position hält den
     Astronauten/Cockpit (zentriert horizontal, unten vertikal) → es schneidet oben bzw.
     seitlich, nie den Astronauten. Höhen-Stufen weiter unten je Viewport. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 0;
  height: min(82vh, 900px);   /* Desktop-Default */
  overflow: hidden;
  z-index: 0;
}
.ws-sec-05-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;   /* horizontal mittig, vertikal unten (Astronaut bleibt) */
  margin: 0;
}
/* Top-Crop-Fade: weicher Übergang von Schwarz in das (ggf. oben abgeschnittene) Bild. */
.ws-sec-05-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 16vh, 200px);
  background: linear-gradient(to bottom, var(--ws-bg-color, #000) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
/* Korr 2026-06-07g (Mobile): User-Befund — schwarze Flaeche zwischen den
   Booster-Karten und dem Stabilisieren-Bild zu gross („20 % koennen bleiben").
   Die Luecke setzt sich zusammen aus: leerem Stage-Unterlauf des Booster-
   Viewports (~40svh, Teil der Sticky-Szene) + Bridge (60px) + Sec-05-Top-
   Padding + 16vh-Top-Fade des Bildes. Vier Hebel: Bridge schrumpft, Sec-05
   zieht sich per negativem Margin ueber den schwarzen Stage-Unterlauf
   (ab p≈0.97 — Booster-Text steht ab 0.965, Rakete ist oben raus; es wird
   nur Schwarz ueberdeckt), Top-Padding 0, Fade kompakter. Sec-05 ist
   position:relative + DOM-spaeter → paintet ueber dem Sticky-Track. */
@media (max-width: 768px) {
  .ws-bridge-dark { height: 12px; }
  /* Korr 2026-06-07h: fester -34svh-Pull schnitt auf Geraeten mit niedrigerem
     Viewport in die Booster-Karten (dort enden die Karten tiefer — der schwarze
     Unterlauf ist kleiner als auf dem 932px-Test-Viewport). Jetzt dynamisch:
     script.js (sizeSec05Pull) misst den echten Leerraum unter dem Booster-
     Inhalt und setzt --ws-sec05-pull = 80 % davon — 20 % bleiben IMMER stehen,
     Karten koennen nie angeschnitten werden. Fallback ohne JS: harmloser
     Mini-Pull. */
  .ws-sec-05-stabilisieren {
    margin-top: var(--ws-sec05-pull, -24px);
    padding-block-start: 0;
    z-index: 2;
  }
  .ws-sec-05-bg::before { height: 56px; }
}
/* Bild-füllende Höhe je Viewport (Korr 2026-06-02, User: "Den Kurs stabilisieren auf
   Tablet/Mobile Vollbild"). Querformat-Bild → höherer Schirm = stärkerer Seiten-Zoom via
   object-fit: cover; object-position 50% 100% hält Astronaut/Cockpit unten zentriert.
   Tablet + Mobile jetzt volle Viewport-Höhe (vorher 62svh / 46svh Teil-Höhe). */
@media (max-width: 1023px) {
  .ws-sec-05-bg { height: 100svh; }
}
@media (max-width: 768px) {
  .ws-sec-05-bg { height: 100svh; }
}
.ws-sec-05-inner {
  position: relative;
  z-index: var(--ws-z-layer1);
  margin-top: clamp(-140px, -10vw, -70px);
  padding-top: 0;
  padding-bottom: clamp(60px, 8vh, 120px);
}
.ws-sec-05-header {
  text-align: center;
  max-width: min(82ch, 100%);
  margin: 0 auto var(--ws-space-lg);
}
.ws-sec-05-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  margin-bottom: var(--ws-space-md);
}
.ws-sec-05-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
  /* Korr 4.1 (2026-05-15): Leerraum zwischen SL und Copy vergroessern. */
  margin: 0 0 var(--ws-space-md);
}
.ws-sec-05-body {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-muted);
  text-shadow: var(--ws-role-body-shadow);
  margin: 0 0 var(--ws-space-sm);
}
.ws-sec-05-body:last-of-type { margin-bottom: 0; }
/* ── Galaxy-Zone (galaxy.jpg full-bleed) mit alternierenden Inhalts-Baendern ──
   Korr 5.1 (2026-05-15): Bild dynamisch ueber alle 3 Flaechen → background-attachment: fixed,
   damit der galaxy-Bildausschnitt beim Scrollen stehenbleibt und die drei hellen Baender
   jeweils einen anderen Bildbereich enthuellen (mobile: scroll wegen iOS-fixed-Bug).
   Korr 5.2 (2026-05-15): Weisse Trennlinien (top/bottom + zwischen Baendern) entfernt. */
.ws-sec-05-galaxy-zone {
  position: relative;
  background-image: url("Bilder/galaxy.jpg");
  /* background-size: auto 220% — Bild-Hoehe = 2.2× Zone-Hoehe.
     Das Bild hat damit 120% der Zone-Hoehe als vertikalen Bewegungs-Spielraum.
     Resultat: BG verschiebt sich beim Scroll nur ~22% so schnell wie der
     Vordergrund (Text/Cards) → deutlicher Parallax-Look. */
  background-size: auto 175%;
  /* Parallax: --ws-sec-05-galaxy-progress (0→1) via JS gesetzt.
     (1 - progress) statt progress → BG-Bild bewegt sich GEGEN die Scroll-
     Richtung innerhalb der Zone. Das neutralisiert einen Teil der natuerlichen
     Zone-Verschiebung, sodass der BG im Viewport langsamer wirkt als der
     Vordergrund (~50% Speed-Ratio). Ohne Invertierung wuerde der BG schneller
     als der Vordergrund laufen. */
  background-position: 50% calc((1 - var(--ws-sec-05-galaxy-progress, 0.5)) * 100%);
  background-repeat: no-repeat;
  background-color: #000;
  margin-top: clamp(40px, 6vh, 80px);
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  .ws-sec-05-galaxy-zone {
    background-position: 50% 50%;
  }
}
.ws-sec-05-band-galaxy {
  height: clamp(120px, 22vh, 260px);
}
.ws-sec-05-band-dark {
  background: #000;
  padding: clamp(80px, 14vh, 160px) 0;
}
.ws-sec-05-band-dark:has(.ws-sec-05-pillars) {
  padding: clamp(100px, 16vh, 180px) 0;
}

.ws-sec-05-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
  justify-items: center;
}
@media (min-width: 768px) {
  .ws-sec-05-pillars { grid-template-columns: repeat(3, 1fr); }
}
/* Korr 2026-06-01: Tablet (769–1023) — 3. Säule lief über den rechten Rand. Ursache:
   die ws-nobreak-Zeile ("Bestehende Kunden binden —") erzwang per nowrap eine große
   Spalten-Mindestbreite (implizites min-width: auto), zusammen mit dem 7vw/120px-Gap →
   Reihe breiter als Container. Fix: kleinerer Gap + Spalten dürfen schrumpfen (min-width: 0)
   + nowrap aufheben (Text darf umbrechen) + etwas kleinere Card-Typo.
   Start bei 768 (nicht 769), da das 3-Spalten-Grid bereits ab min-width: 768 greift —
   sonst bleibt iPad-Portrait 768 ohne Fix und die 3. Säule läuft über. */
@media (min-width: 768px) and (max-width: 1023px) {
  .ws-sec-05-pillars { gap: clamp(12px, 1.8vw, 22px); }
  .ws-sec-05-pillar { min-width: 0; width: 100%; }
  /* Korr 2026-06-07f: User-Befund „Tablet-Boxen komisch formatiert (4 bzw. 3
     Zeilen)" — Ziel: exakt 2 Sinn-Zeilen pro Karte (Span = Zeile).
     Befund beim Nachmessen: Padding-/Font-Overrides dieses Blocks waren seit
     06-01 TOT — der Block steht VOR den Basis-Regeln (.ws-sec-05-card Padding
     28/36 + Korr-6.1-Typo weiter unten) und verlor per Source-Order bei
     gleicher Spezifitaet. Karte rendere real mit 36px-Seitenpadding (149px
     Textbreite) → jede Span brach um. Fix: Spezifitaet +1 Stufe
     (.ws-sec-05-pillar-Prefix), engeres Padding, Font + Letter-Spacing so
     bemessen, dass die laengste Zeile („Bestehende Kunden binden:", einzeilig
     gemessen) bei 768px mit Puffer passt. Render-gemessen 768/834/1023:
     alle 6 Spans einzeilig, kein Overflow. */
  .ws-sec-05-pillar .ws-sec-05-card { max-width: none; padding: 16px 10px; min-height: 112px; }
  .ws-sec-05-card .ws-nobreak { white-space: normal; }
  .ws-sec-05-pillar .ws-sec-05-card .ws-mo-btn__text--multiline > span { display: block; }
  .ws-sec-05-pillar .ws-sec-05-card .ws-mo-btn__text {
    font-size: clamp(0.56rem, 1.22vw, 0.74rem);
    letter-spacing: 0.02em;
  }
}

/* ── CTA-Zone: 3-spaltiges Grid (links Text · mitte Termin-Sichern · rechts Text) ── */
.ws-sec-05-cta-zone {
  text-align: center;
}
/* Korr 7.1 (2026-05-15): neue HL "Der Check-up zur Neuausrichtung" gross wie .ws-sec-05-headline. */
.ws-sec-05-cta-headline {
  text-align: center;
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
  margin: 0 auto clamp(28px, 5vh, 56px);
  max-width: min(28ch, 100%);
  text-wrap: balance;
}
.ws-sec-05-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vh, 48px);
  align-items: center;
  justify-items: center;
}
@media (min-width: 768px) {
  .ws-sec-05-cta-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(32px, 5vw, 80px);
  }
}
.ws-sec-05-cta-side {
  font-family: var(--ws-font-body);
  font-weight: 400;
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-muted);
  margin: 0;
  max-width: 22ch;
  text-align: center;
}
@media (min-width: 768px) {
  .ws-sec-05-cta-side--left { justify-self: end; }
  .ws-sec-05-cta-side--right { justify-self: start; }
}
.ws-sec-05-cta-line {
  display: block;
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}
/* Korr 7.2 (2026-05-15): "Kostenlose" inline im Copy-Text, weiss, leicht groesser, kursiv,
   kein Uppercase, kein Glow — bleibt weiterhin Akzent, aber dezent. */
.ws-sec-05-accent {
  display: inline;
  font-family: var(--ws-font-body);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15em;
  color: #ffffff;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
.ws-sec-05-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ws-space-md);
  text-align: center;
  width: 100%;
  max-width: 400px;
}
.ws-sec-05-card {
  cursor: default;
  width: 100%;
  max-width: 400px;
  /* Card-Proportionen statt Library-Button (Override min-width 480 + height 112) */
  min-width: 0;
  height: auto;
  min-height: 128px;
  padding: 28px 36px;
  border-radius: 26px;
}
.ws-sec-05-card .ws-mo-btn__core {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 55%, #e9eef3 100%);
}
/* Korr 6.1 (2026-05-15): Vorteils-Kacheln in Versalien + Em-Dash auf eigener Zeile
   mittig (Vorlage 03-vorteils-kachel-bindestrich.png). */
.ws-sec-05-card .ws-mo-btn__text {
  color: #0a0e16;
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(0.68rem, 0.78vw, 0.84rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  text-shadow: none;
}
.ws-sec-05-card .ws-mo-btn__text--multiline > span {
  display: block;
}
.ws-nobreak { white-space: nowrap; }
.ws-sec-05-card:hover .ws-mo-btn__text {
  color: #0a0e16;
}
@media (max-width: 760px) {
  .ws-sec-05-card {
    min-height: 104px;
    padding: 22px 24px;
    border-radius: 22px;
  }
  /* Korr 15.14 (2026-05-17, Mobile): Hintergrundbild full-width statt clamp(420px, 94vw, 1280px).
     Min 420 ragte auf 390-Viewport zentriert über den Section-Rand → wirkte links/rechts
     abgegrenzt. Jetzt 100% Section-Breite, keine min-width.
     Korr 16.4 (2026-05-17, Mobile): Section-padding-inline weg + BG-Container 100vw
     -> Bild reicht jetzt wirklich edge-to-edge (Section hatte vom .ws-sec-Block geerbtes
     Padding, das hat das Bild seitlich abgeschnitten). */
  .ws-sec-05-stabilisieren {
    padding-inline: 0;
  }
  .ws-sec-05-bg {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .ws-sec-05-bg img {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  /* Korr 16.24 (2026-05-19, Mobile): Headline "Den Kurs stabilisieren" war zu gross —
     "stabilisieren" ragte rechts ueber den Section-Rand. Font-Size + letter-spacing
     fuer Mobile reduziert (analog cta-headline). Default war --ws-fs-h1 (clamp gross).
     letter-spacing 0.12em -> 0.06em (0.12em mal 14+ Buchstaben war ein Hauptverursacher).
     Korr 16.26 (2026-05-19): clamp(1.75-2.5) war zu klein. Auf clamp(2-2.75) angehoben. */
  .ws-sec-05-headline {
    font-size: var(--ws-role-h2-size);
    letter-spacing: var(--ws-letter-display);
  }
  /* Korr 15.15 (2026-05-17, Mobile): CTA-Headline "Der Check-up zur Neuausrichtung" passte
     nicht in 1 Zeile / wurde abgeschnitten — Mobile-Font kleiner + letter-spacing reduziert.
     CTA-Circle-Button-Rand schmaler (inset rim-inner + core groesser) — User-Befund
     "Button-Rand etwas zu breit". */
  .ws-sec-05-cta-headline {
    font-size: var(--ws-role-h2-size);
    letter-spacing: var(--ws-letter-display);
  }
  .ws-sec-05-cta.ws-mo-btn--circle .ws-mo-btn__rim-inner { inset: 10px; }
  .ws-sec-05-cta.ws-mo-btn--circle .ws-mo-btn__core { inset: 13px; }
  /* Korr 2026-06-02: Mobile "Termin sichern" bleibt auf altem Wert — Vergroesserung
     nur Desktop + Tablet (User-Vorgabe). 144px-Circle traegt nicht mehr.
     Korr 2026-06-07f: Spezifitaet erhoeht (.ws-mo-btn--circle dazu). Die Basis-
     Vergroesserung (Korr 2026-06-02, weiter UNTEN im Stylesheet) gewann per
     Source-Order ueber diesen frueher stehenden Media-Override — der Sec-05-
     Button-Text blieb mobil 20px/0.10em („so dick", User-Befund) statt
     15px/0.18em wie der wirksame Sec-12-Override (der steht NACH seiner Basis). */
  .ws-sec-05-cta.ws-mo-btn--circle .ws-mo-btn__text {
    font-size: clamp(15px, 1.15vw, 18px);
    letter-spacing: 0.18em;
  }
}
.ws-sec-05-cta {
  display: flex;
  margin: 0 auto;
}
/* Korr 7.3 (2026-05-15): CTA-Button "Termin sichern" Text in Bold + groesser.
   Korr 2026-06-02: deutlich groesser auf Desktop + Tablet (User: "muss deutlich
   sichtbarer sein"). 192px-Circle (Kern ~158px) traegt das locker. letter-spacing
   leicht reduziert (0.18 -> 0.14em), damit "sichern" bei der groesseren Schrift
   nicht an den runden Kern-Rand stoesst. Mobile-Wert unveraendert via Override im
   @media (max-width: 768px)-Block. */
.ws-sec-05-cta .ws-mo-btn__text {
  font-weight: 800;
  font-size: clamp(20px, 1.6vw, 25px);
  letter-spacing: 0.10em;
}

/* ============================================================
   Sec-05 + Sec-12 CTA "Termin sichern" — Portal-Aktivierung Hover (2026-06-02)
   Leitidee: Chrom-Button = Andock-Schleuse/Triebwerk. Bei Hover dreht
   sich der Chrom-Bezel (Reflexe wandern um den Ring), der Neon-Blau-Ring
   im Kern zuendet heller auf, ein Glanz-Streifen faehrt einmal ueber den
   Kern, dazu staerkeres Heben + Halo. Nur auf diese Signature-Buttons
   gescoped. GPU-schonend (transform/opacity). Ersetzt das reine
   "groesser + Farbe" durch echte Mechanik.
   Korr 2026-06-04: auf Sec-12 "Jetzt andocken"-CTA erweitert (User-Wunsch:
   gleiche visuelle + Hover-Erscheinung wie Sec 05). Spin-Klasse heisst
   weiterhin ws-sec05-spin (geteilte Mechanik, siehe script.js).
   ============================================================ */

/* (1) Staerkeres Heben + Neon-Halo als beim Standard-Button */
.ws-sec-05-cta.ws-mo-btn:hover,
.ws-sec-05-cta.ws-mo-btn:focus-visible,
.ws-sec-12-cta.ws-mo-btn:hover,
.ws-sec-12-cta.ws-mo-btn:focus-visible {
  transform: translateY(-5px) scale(1.045);
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.78))
          drop-shadow(0 0 26px rgba(2, 102, 240, 0.6))
          drop-shadow(0 0 52px rgba(90, 184, 255, 0.32));
}

/* (2) Rotierender Chrom-Bezel — Andock-Schleuse spinnt an */
.ws-sec-05-cta .ws-mo-btn__rim-outer,
.ws-sec-12-cta .ws-mo-btn__rim-outer {
  will-change: transform;
}
/* Spin via JS-Klasse (nicht :hover) — damit beim Weg-Hovern der Rand
   weich auf 0deg zurueckdreht statt hart zu snappen (siehe script.js). */
.ws-sec-05-cta .ws-mo-btn__rim-outer.ws-sec05-spin,
.ws-sec-12-cta .ws-mo-btn__rim-outer.ws-sec05-spin {
  animation: ws-sec05-bezel-spin 9s linear infinite;
}
@keyframes ws-sec05-bezel-spin {
  to { transform: rotate(360deg); }
}

/* (3) Neon-Ring im Kern zuendet auf */
.ws-sec-05-cta .ws-mo-btn__core,
.ws-sec-12-cta .ws-mo-btn__core {
  transition: box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-sec-05-cta:hover .ws-mo-btn__core,
.ws-sec-05-cta:focus-visible .ws-mo-btn__core,
.ws-sec-12-cta:hover .ws-mo-btn__core,
.ws-sec-12-cta:focus-visible .ws-mo-btn__core {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 4px rgba(90, 184, 255, 0.95),
    inset 0 0 22px rgba(2, 102, 240, 0.85),
    inset 0 0 46px rgba(0, 55, 169, 0.5),
    inset 0 4px 10px rgba(255, 255, 255, 0.85);
}

/* (4) Specular-Sweep — Glanz-Streifen faehrt einmal ueber den Kern.
   Kern hat overflow:hidden -> Streifen wird auf die Kreisform geclippt. */
.ws-sec-05-cta .ws-mo-btn__core::after,
.ws-sec-12-cta .ws-mo-btn__core::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -40%;
  width: 45%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
  transform: translateX(-120%) rotate(8deg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.ws-sec-05-cta:hover .ws-mo-btn__core::after,
.ws-sec-05-cta:focus-visible .ws-mo-btn__core::after,
.ws-sec-12-cta:hover .ws-mo-btn__core::after,
.ws-sec-12-cta:focus-visible .ws-mo-btn__core::after {
  animation: ws-sec05-sweep 1s cubic-bezier(0.45, 0, 0.25, 1) 0.12s;
}
@keyframes ws-sec05-sweep {
  0%   { opacity: 0;    transform: translateX(-120%) rotate(8deg); }
  12%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateX(520%)  rotate(8deg); }
}

/* Reduced-Motion: keine Rotation/kein Sweep — statischer aufgezuendeter
   Zustand bleibt (Heben/Halo/Neon-Ring sind kein Bewegungs-Loop). */
@media (prefers-reduced-motion: reduce) {
  .ws-sec-05-cta .ws-mo-btn__rim-outer.ws-sec05-spin,
  .ws-sec-12-cta .ws-mo-btn__rim-outer.ws-sec05-spin { animation: none; }
  .ws-sec-05-cta:hover .ws-mo-btn__core::after,
  .ws-sec-05-cta:focus-visible .ws-mo-btn__core::after,
  .ws-sec-12-cta:hover .ws-mo-btn__core::after,
  .ws-sec-12-cta:focus-visible .ws-mo-btn__core::after { animation: none; opacity: 0; }
}

/* ============================================================
   Section 06 — Neue Galaxien ansteuern (3D-Parallax-Scrub)
   Konzept 2026-05-12: immersive Kamera-Rückwärts-Fahrt vorbei an 4
   Planeten (L→R→L→R: KI / Print / Digital / Virtuell). Headline
   fliegt groß rein, rückt leicht zurück, bleibt fix als Anker. Planeten
   tauchen seitlich groß auf, drift Richtung Bildmitte beim Verkleinern.
   Pattern: scroll-getriebene CSS-Transforms via wsScrollDriver (GPU),
   kein Frame-Sequenz-Scrub.
   ============================================================ */

.ws-sec-06-galaxien {
  background: #000;
  padding-block: 0;
  position: relative;
  overflow: visible;
}

.ws-sec-06-track {
  position: relative;
  /* Korr 2026-06-04: 700vh -> 650vh, zusammen mit PHASE_END 0.92 -> 0.98
     (script.js). Kuerzt den toten Scrollweg nach der Virtuell-Landung von
     ~64vh auf ~15vh; Animations-Tempo bleibt gleich. */
  min-height: 650svh;  /* svh — iOS-Adressleisten-stabil (2026-06-08) */
}

.ws-sec-06-sticky {
  position: sticky;
  top: 0;
  height: 100svh;  /* svh — iOS-Adressleisten-stabil (2026-06-08) */
  width: 100%;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  background: #000;
}

/* Layer 2 — 3D-Stage (Perspective-Child) — reiner schwarzer Raum, keine BG-Layer.
   z-index: 2 → Headline (z-index: 30) bleibt immer vor den Planeten.
   Hinweis: Info-Boxen sind DOM-Child von Planet → koennen nicht aus dem Stage-
   Stacking-Context ausbrechen ohne HTML-Refactor. Headline ueberdeckt deshalb
   bei KI/Print Teile der Info-Box. Akzeptierter Trade-off bis zu eventuellem
   Refactor (Info-Boxen ausserhalb der Stage). */
.ws-sec-06-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
}

/* ─── Headline-Anker (groß rein → leicht zurück → fix back) ─── */
.ws-sec-06-headline-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 30;
  pointer-events: none;
  transform: translate3d(0, 0, var(--ws-h-z, 0px)) scale(var(--ws-h-scale, 1.2));
  opacity: var(--ws-h-opacity, 1);
  transform-origin: center center;
  will-change: transform, opacity;
}
.ws-sec-06-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: 1.02;
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(12px, 1.4vw, 24px);
  max-width: min(560px, 50vw);
  text-shadow: 0 0 30px rgba(0, 22, 80, 0.7);
}
.ws-sec-06-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  color: var(--ws-text-color);
  margin: 0;
  letter-spacing: 0.04em;
  max-width: min(500px, 45vw);
  text-shadow: 0 0 24px rgba(0, 22, 80, 0.8);
}

/* ─── Planet (fliegt rein + parkt in Quadrant-Position) ─── */
.ws-sec-06-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  text-align: center;
  /* 3D-Fly-In-Transform: X / Y / Z + Rotate-Tilt + Scale via CSS-Vars (JS-getrieben) */
  transform:
    translate(-50%, -50%)
    translate3d(var(--ws-p-x, 0), var(--ws-p-y, 0), var(--ws-p-z, 0))
    rotate(var(--ws-p-rot, 0deg))
    scale(var(--ws-p-scale, 0));
  opacity: var(--ws-p-opacity, 0);
  transform-origin: center center;
  will-change: transform, opacity;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}

.ws-sec-06-planet-img {
  flex-shrink: 0;
  width: clamp(192px, 22vw, 312px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(47%);
  /* Korr 8.2 d (2026-05-15): Hover-Glow signalisiert Klickbarkeit (Cursor: pointer kommt vom Planet). */
  transition: filter 260ms ease-out, transform 260ms ease-out;
}
.ws-sec-06-planet:hover .ws-sec-06-planet-img,
.ws-sec-06-planet:focus-visible .ws-sec-06-planet-img {
  filter: drop-shadow(0 0 18px var(--ws-mo-blue-neon)) drop-shadow(0 0 36px rgba(90, 184, 255, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  .ws-sec-06-planet-img { transition: none; }
}
/* Links-Planeten gespiegelt — visuelle Variation, damit nicht alle Planeten
   identisch wirken (KI + Digital sind data-side=left) */
.ws-sec-06-planet[data-side="left"] .ws-sec-06-planet-img {
  transform: scaleX(-1);
}
.ws-sec-06-planet--ki .ws-sec-06-planet-img       { width: clamp(240px, 26vw, 384px); }
.ws-sec-06-planet--print .ws-sec-06-planet-img    { width: clamp(168px, 19vw, 264px); }
.ws-sec-06-planet--digital .ws-sec-06-planet-img  { width: clamp(180px, 20vw, 288px); }
.ws-sec-06-planet-img--saturn {
  border-radius: 0;
  clip-path: none;
  /* Korr 2026-06-07i (Kunden-Befund "springt rum"): `aspect-ratio: auto` allein
     überschrieb das UA-Mapping der width/height-Attribute → Image reservierte
     VOR dem Lazy-Load 0px Höhe und wuchs beim Laden um ~233px (gemessen,
     Pixel-7-Emulation). Auf iOS (kein Scroll-Anchoring) springt der Content
     unter dem Leser. `auto 900 / 900` = Spec-Semantik: vor Load 1:1
     reservieren, nach Load intrinsische Ratio (Rendering unverändert). */
  aspect-ratio: auto 900 / 900;
  /* Saturn-Image 900x900 (quadratisch). Width 38vw statt 45vw, damit Saturn-Bottom
     bei endY 18vh sicher im 100vh-Viewport bleibt. JS endX 35vw. */
  width: clamp(340px, 38vw, 1080px);
  /* Mask blendet den schwarzen Bildaussenbereich aus, sodass nur Saturn-Kugel +
     Ringe sichtbar sind. Verhindert dass das Image-Quadrat ueber Print zieht. */
  -webkit-mask-image: radial-gradient(ellipse 70% 48% at 50% 50%, #000 60%, transparent 95%);
  mask-image: radial-gradient(ellipse 70% 48% at 50% 50%, #000 60%, transparent 95%);
}
/* Virtuell Title hoeher gerueckt — Saturn ist viel taller als die anderen
   Planeten, bottom 18% wuerde Title unter den Viewport schieben. */
.ws-sec-06-planet--virtuell .ws-sec-06-planet-title {
  bottom: 38%;
  left: 60%;
}

/* ── Interaktiv-Badge — Plus/Minus-Toggle wie FAQ-Accordion ──
   Span-Element mit zwei pseudo-Strichen (horizontal + vertikal) bildet das +.
   Aktiv-State (Section hat is-info-<id> via JS): vertikaler Strich rotiert
   von 90° → 0°, beide Striche ueberlappen = sieht aus wie −. Sanfter
   Royal-Blau-Shimmer als Pulse-Glow rundet die Klickbarkeit ab. */
.ws-sec-06-planet { cursor: pointer; }
.ws-sec-06-planet-badge {
  position: absolute;
  top: 6%;
  right: 6%;
  width: clamp(30px, 2.6vw, 42px);
  height: clamp(30px, 2.6vw, 42px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,1) 0%, rgba(248,251,254,0.95) 55%, rgba(232,240,250,0.9) 100%);
  box-shadow:
    inset 0 0 0 1px var(--ws-mo-blue-bright),
    0 0 8px rgba(90, 184, 255, 0.45),
    0 0 18px rgba(2, 102, 240, 0.3);
  animation: ws-sec-06-badge-shimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 5;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.ws-sec-06-planet-badge::before,
.ws-sec-06-planet-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 1.5px;
  background: #0a0e16;
  border-radius: 999px;
  transform-origin: center center;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-sec-06-planet-badge::before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.ws-sec-06-planet-badge::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes ws-sec-06-badge-shimmer {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px var(--ws-mo-blue-bright),
      0 0 8px rgba(90, 184, 255, 0.45),
      0 0 18px rgba(2, 102, 240, 0.3);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px var(--ws-mo-blue-neon),
      0 0 14px rgba(90, 184, 255, 0.7),
      0 0 32px rgba(2, 102, 240, 0.45);
  }
}
/* Rechts-Planeten: Badge an Top-LEFT */
.ws-sec-06-planet[data-side="right"] .ws-sec-06-planet-badge {
  right: auto;
  left: 6%;
}
/* Saturn: Badge an dessen sichtbaren Kugel-Rand */
.ws-sec-06-planet--virtuell .ws-sec-06-planet-badge {
  top: 18%;
  right: auto;
  left: 14%;
}
/* Aktiv-State (Section hat is-info-<id>): vertikaler Strich rotiert auf 0°
   → beide Striche ueberlappen horizontal = sieht aus wie „−". */
.ws-sec-06-galaxien.is-info-ki       .ws-sec-06-planet--ki       .ws-sec-06-planet-badge::after,
.ws-sec-06-galaxien.is-info-print    .ws-sec-06-planet--print    .ws-sec-06-planet-badge::after,
.ws-sec-06-galaxien.is-info-digital  .ws-sec-06-planet--digital  .ws-sec-06-planet-badge::after,
.ws-sec-06-galaxien.is-info-virtuell .ws-sec-06-planet--virtuell .ws-sec-06-planet-badge::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
/* Hover: Badge leicht abdunkeln, Pulse pausieren */
.ws-sec-06-planet:hover .ws-sec-06-planet-badge,
.ws-sec-06-planet:focus-visible .ws-sec-06-planet-badge {
  opacity: 0.85;
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ws-sec-06-planet-badge { animation: none; }
  .ws-sec-06-planet-badge::before,
  .ws-sec-06-planet-badge::after { transition: none; }
}
/* Virtuell hinter die anderen Planeten — Saturn-Image ist quadratisch (900x900)
   mit schwarzem Aussenbereich, der ueber Print-Planet hinausragte. Hover/is-open
   ueberschreibt auf z-index 40, damit Info-Box weiterhin vorne liegt. */
.ws-sec-06-planet--virtuell {
  z-index: 3;
}

/* Title — überlagert den Planet im UNTEREN Drittel, bleibt immer sichtbar */
.ws-sec-06-planet-title {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-fs-h3);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
  /* Starker Multi-Layer-Shadow für Lesbarkeit auf bunten Planet-Texturen */
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(0, 0, 0, 0.8),
    0 0 6px rgba(0, 22, 80, 0.7);
}

/* Info-Layer — Top-Level Sibling der Stage (nicht Kind eines Planeten).
   z-index: 60 liegt ueber der Headline (30) und der Stage (2). Pointer-events
   off auf dem Layer; nur die aktive Info-Box selbst nimmt Klicks an. */
.ws-sec-06-info-layer {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
/* Info-Box — neu im Info-Layer (frueher Child eines Planeten). Position
   relativ zum Sticky-Container per Modifier-Klassen --ki/--print/etc.
   Sichtbar wenn Section die Klasse `is-info-<id>` traegt (JS-getrieben). */
.ws-sec-06-info {
  position: absolute;
  inset: auto;
  width: max-content;
  max-width: min(28ch, 40vw);
  /* Korr 2026-06-03: Booster-Box-Optik (Chrome-Card) statt dunkler Glas-Box.
     Padding > Core-Inset (13px), damit der Text klar auf der weissen Core-Flaeche
     sitzt. Box-Optik kommt aus den .ws-mo-btn__*-Spans (rim/cut/core). */
  padding: clamp(26px, 1.8vw, 34px) clamp(30px, 2.2vw, 44px);
  background: transparent;
  border: 0;
  border-radius: 26px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition:
    opacity var(--ws-dur-base) var(--ws-ease-out),
    visibility var(--ws-dur-base) var(--ws-ease-out),
    transform var(--ws-dur-base) var(--ws-ease-out),
    border-color var(--ws-dur-base) var(--ws-ease-out);
  pointer-events: none;
}
/* Position pro Planet — diagonal gegenueber des Planet-Centers Richtung
   Bildschirmmitte. Werte basieren auf Planet-Endpositionen aus JS:
   KI(-30,-28) Print(30,-28) Digital(-30,28) Virtuell(35,18). */
.ws-sec-06-info--ki       { top: 28vh; left: 24vw; transform-origin: top left; }
.ws-sec-06-info--print    { top: 28vh; right: 24vw; transform-origin: top right; }
.ws-sec-06-info--digital  { bottom: 18vh; left: 24vw; transform-origin: bottom left; }
.ws-sec-06-info--virtuell { bottom: 28vh; right: 12vw; transform-origin: bottom right; }

/* Sichtbarkeit: Section traegt `is-info-<id>` → entsprechende Info-Box ein. */
.ws-sec-06-galaxien.is-info-ki       .ws-sec-06-info--ki,
.ws-sec-06-galaxien.is-info-print    .ws-sec-06-info--print,
.ws-sec-06-galaxien.is-info-digital  .ws-sec-06-info--digital,
.ws-sec-06-galaxien.is-info-virtuell .ws-sec-06-info--virtuell {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}
.ws-sec-06-planet-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ws-font-body);
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  line-height: 1.45;
  /* Korr 2026-06-03: dunkler Text auf weisser Core-Flaeche (Booster-Box-Optik). */
  color: #1a2434;
  text-shadow: none;
  text-align: left;
}
.ws-sec-06-planet-list li {
  position: relative;
  padding-left: 1.4em;
}
.ws-sec-06-planet-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ws-font-accent);
  font-weight: 700;
  /* Korr 2026-06-03: Pfeile schwarz (User-Wunsch). */
  color: #0a0e16;
}

/* ── Booster-Box-Optik als wiederverwendbare Chrome-Card ──
   Genutzt von den Sec-06-Info-Boxen (desktop/tablet) UND dem Mobile-Info-Modal.
   Die .ws-mo-btn__*-Spans (rim-outer / cuts / rim-inner / core) liefern die
   metallische Box; der Inhalt liegt per z-index darueber. isolation:isolate
   haelt die negativen z-Indizes im eigenen Stacking-Context. */
.ws-mo-chrome-card { isolation: isolate; }
.ws-mo-chrome-card > .ws-mo-btn__rim-outer,
.ws-mo-chrome-card > .ws-mo-btn__cut,
.ws-mo-chrome-card > .ws-mo-btn__rim-inner,
.ws-mo-chrome-card > .ws-mo-btn__core { position: absolute; }
.ws-mo-chrome-card > .ws-mo-btn__rim-outer { z-index: -3; }
.ws-mo-chrome-card > .ws-mo-btn__cut       { z-index: -3; }
.ws-mo-chrome-card > .ws-mo-btn__rim-inner { z-index: -2; }
.ws-mo-chrome-card > .ws-mo-btn__core      { z-index: -1; }

/* ─── Mobile-Fallback (<1024) — statisches Layout, kein Scrub ─── */
@media (max-width: 1023px) {
  .ws-sec-06-track {
    min-height: 0;
  }
  .ws-sec-06-sticky {
    position: static;
    height: auto;
    overflow: visible;
    perspective: none;
    padding: clamp(60px, 10vw, 100px) var(--ws-space-md);
  }
  .ws-sec-06-stage {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vw, 64px);
    transform-style: flat;
  }
  .ws-sec-06-headline-wrap {
    position: static;
    inset: auto;
    transform: none;
    opacity: 1;
    order: 1;
  }
  .ws-sec-06-headline { font-size: var(--ws-role-h2-size); }
  .ws-sec-06-subline  { font-size: var(--ws-role-sub-size); }
  .ws-sec-06-planet {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(14px, 3vw, 22px);
  }
  .ws-sec-06-planet--ki      { order: 2; }
  .ws-sec-06-planet--print   { order: 3; }
  .ws-sec-06-planet--digital { order: 4; }
  .ws-sec-06-planet--virtuell{ order: 5; }
  .ws-sec-06-planet-img,
  .ws-sec-06-planet--ki .ws-sec-06-planet-img,
  .ws-sec-06-planet--print .ws-sec-06-planet-img,
  .ws-sec-06-planet--digital .ws-sec-06-planet-img {
    width: clamp(180px, 50vw, 280px);
  }
  .ws-sec-06-planet-img--saturn { width: clamp(220px, 60vw, 320px); }
  .ws-sec-06-info { max-width: 32ch; margin: 0; }
  .ws-sec-06-planet-list { align-items: flex-start; display: inline-flex; }
}

/* Korr 15.24 (2026-05-17, Mobile only): scroll-driven Reinfliegen (statt IO-Toggle).
   JS-IIFE `initSec06MobileScroll` setzt pro Element CSS-Variable --ws-reveal (0..1)
   basierend auf Element-Position im Viewport. CSS macht opacity + translateX
   per calc() — kontinuierliche Bewegung beim Scrollen.
   Korr 2026-06-01: Grenze 768 → 1023. Das Tablet-Band (769–1023) bekam vorher nur
   das gestapelte Fallback-Layout (Z. 2041), aber NICHT die Badge/Title-Verankerung
   auf dem Planeten + Reveal → Badges/Labels schwebten losgelöst (User-Befund "passt
   visuell garnichts"). Jetzt nutzt das ganze Band <1024 dieselbe funktionierende
   Mobile-Choreografie; ab 1024 greift weiter der 3D-Scrub. */
@media (max-width: 1023px) {
  .ws-sec-06-headline-wrap {
    opacity: var(--ws-reveal, 0);
    transform: translateY(calc((1 - var(--ws-reveal, 0)) * 24px));
    will-change: opacity, transform;
  }
  .ws-sec-06-planet {
    opacity: var(--ws-reveal, 0);
    will-change: opacity, transform;
  }
  /* Korr 15.26 (2026-05-17): Scale-Start 1.4 → 2.6 (viel größer beim Einflug).
     Planeten starten jetzt fast viewport-breit groß und schrumpfen zur End-Größe.
     Diagonal-Translate unverändert (KI links-oben, Print rechts-unten, etc.). */
  .ws-sec-06-planet--ki {
    transform:
      translate(calc((1 - var(--ws-reveal, 0)) * -110vw), calc((1 - var(--ws-reveal, 0)) * -8vw))
      scale(calc(2.6 - var(--ws-reveal, 0) * 1.6));
  }
  .ws-sec-06-planet--print {
    transform:
      translate(calc((1 - var(--ws-reveal, 0)) * 110vw), calc((1 - var(--ws-reveal, 0)) * 8vw))
      scale(calc(2.6 - var(--ws-reveal, 0) * 1.6));
  }
  .ws-sec-06-planet--digital {
    transform:
      translate(calc((1 - var(--ws-reveal, 0)) * -110vw), calc((1 - var(--ws-reveal, 0)) * 8vw))
      scale(calc(2.6 - var(--ws-reveal, 0) * 1.6));
  }
  .ws-sec-06-planet--virtuell {
    transform:
      translate(calc((1 - var(--ws-reveal, 0)) * 110vw), calc((1 - var(--ws-reveal, 0)) * -8vw))
      scale(calc(2.6 - var(--ws-reveal, 0) * 1.6));
  }
  /* Korr 15.22 (2026-05-17): Planet-Container auf Img-Breite limitieren + zentrieren,
     damit Badge (top-right) + Title (bottom-center) AUF dem Planet-Bild sitzen,
     nicht im äußeren leeren Container-Raum. */
  #ws-sec-06 .ws-sec-06-planet {
    position: relative;
    width: clamp(180px, 50vw, 280px);
    margin-left: auto;
    margin-right: auto;
  }
  #ws-sec-06 .ws-sec-06-planet--virtuell {
    width: clamp(220px, 60vw, 320px);
  }
  /* Korr 15.23 (2026-05-17): Planeten alternierend links/rechts versetzt
     (statt mittig). Plus Stage-Gap kleiner — wirken kompakter wenn versetzt. */
  #ws-sec-06 .ws-sec-06-stage { gap: clamp(20px, 4vw, 36px); }
  #ws-sec-06 .ws-sec-06-planet--ki       { margin-left: 4vw;  margin-right: auto; }
  #ws-sec-06 .ws-sec-06-planet--print    { margin-left: auto; margin-right: 4vw; }
  #ws-sec-06 .ws-sec-06-planet--digital  { margin-left: 4vw;  margin-right: auto; }
  #ws-sec-06 .ws-sec-06-planet--virtuell { margin-left: auto; margin-right: 4vw; }
  /* Korr 15.27 (2026-05-17): Headline → erster Planet mit größerem Abstand. */
  #ws-sec-06 .ws-sec-06-headline-wrap { margin-bottom: clamp(48px, 10vw, 96px); }
  /* Korr 16.29 (2026-05-19): Headline brach in 3 Zeilen statt 2 ("NEUE / GALAXIEN /
     ANSTEUERN" statt "NEUE GALAXIEN / ANSTEUERN"). 8vw-Schrift war so groß, dass
     "NEUE GALAXIEN" zusätzlich umbrach — der manuelle <br> wirkte nur zwischen
     Z2 und Z3. Fix: kleinere Mobile-Schrift + white-space: nowrap, damit nur
     der explizite <br> bricht. Subline bleibt unverändert.

     Korr 16.30 (2026-05-19): Folge-Befund — h2 durch nowrap zu max-content-Box
     geworden, blieb als Flex-Item linksbündig im Wrap (während Subline als
     Block-Element zentriert wirkte). Fix: align-self: center + explizites
     text-align: center, damit die Headline-Box wie die Subline horizontal
     mittig sitzt.

     Korr 16.31 (2026-05-19): User-Re-Test mit Vergleichs-Screenshots zeigte:
     gesamter Wrap nach rechts versetzt. Fix-Versuch mit width: 100% +
     align-self: stretch + text-align: center. → ERGEBNIS: Headline jetzt ganz
     LINKS, Subline rechts-mittig. `align-self: stretch` + `white-space: nowrap`
     ist offenbar Browser-inkonsistent gerendert.

     Korr 16.32 (2026-05-19): Sauberer Cut — Wrap im Mobile NICHT mehr Flex-
     Container, sondern `display: block`. Damit sind h2 + p normale Block-
     Elements im Block-Parent, `text-align: center` zentriert beide sicher.
     Außerdem: `.ws-sec-06-subline` Desktop-Constraint `max-width: min(500px, 45vw)`
     auf `100%` aufgehoben (45vw ist eine Editorial-Begrenzung, die Mobile mit
     `margin: 0` zur Asymmetrie führte). align-self entfernt (no-op auf Block).

     Korr 16.33 (2026-05-19, Iter 5 BRUTAL-FORCE): 16.29-16.32 griffen visuell
     nicht durch trotz korrekt erscheinendem CSS. Letzter Versuch mit MAXIMALER
     Spezifität (Section-ID + Klassen-Chain) + !important auf JEDE Property
     die Position/Centering beeinflusst. white-space: nowrap raus (Verdacht
     auf Browser-Inkonsistenz mit Flex-Layout). Schrift reduziert auf
     clamp(1.2rem, 5.5vw, 2rem) damit "NEUE GALAXIEN" auch ohne nowrap in
     eine Zeile passt (bei 360px = ~250px Textbreite vs ~310px Container).
     transform: none erzwungen (Reveal-Animation aus, falls translateY irgendwie
     X-Bias verursacht hat). Wenn das nicht greift → 100% Browser-Cache-Problem,
     Hard-Reload mit Strg+Shift+R nötig. */
  #ws-sec-06.ws-sec-06-galaxien .ws-sec-06-sticky .ws-sec-06-headline-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto clamp(48px, 10vw, 96px) auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
  #ws-sec-06.ws-sec-06-galaxien .ws-sec-06-headline-wrap > .ws-sec-06-headline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto clamp(12px, 1.4vw, 24px) auto !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: var(--ws-role-h2-size) !important;
    white-space: normal !important;
    position: static !important;
    transform: none !important;
  }
  #ws-sec-06.ws-sec-06-galaxien .ws-sec-06-headline-wrap > .ws-sec-06-subline {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    position: static !important;
    transform: none !important;
  }
  /* Korr 15.38 (2026-05-17): Clean Re-Build — alte Info-Layer-Logik auf Mobile
     komplett deaktiviert. Iter 15.27–15.37 haben gezeigt: die alte Architektur
     (Layer in Section → JS-Move zu body → Body-Class-Toggle → CSS-Position-
     Override mit !important-Stack → JS-Inline-Style mit setProperty) ist nicht
     mehr reparierbar. Mobile uebernimmt jetzt das neue `<div id="ws-mo-sec06-modal">`
     (Body-Sibling, eigenes Namespace `ws-mo-sec06-modal*`). Alte Info-Boxen
     bleiben fuer Desktop bestehen. */
  .ws-sec-06-info-layer,
  body > .ws-sec-06-info-layer {
    display: none;
  }
  #ws-sec-06 .ws-sec-06-planet-badge {
    top: 6%;
    right: 6%;
    left: auto;
    bottom: auto;
  }
  #ws-sec-06 .ws-sec-06-planet-title {
    position: absolute;
    bottom: 12%;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .ws-sec-06-headline-wrap,
  .ws-sec-06-planet,
  #ws-sec-06 .ws-sec-06-planet--ki,
  #ws-sec-06 .ws-sec-06-planet--print,
  #ws-sec-06 .ws-sec-06-planet--digital,
  #ws-sec-06 .ws-sec-06-planet--virtuell {
    opacity: 1;
    transform: none;
  }
}

/* Korr 2026-06-01: Tablet-Planeten ~50 % groesser als der Mobile-Default (User-Wunsch).
   Nur Band 769–1023 — Mobile (<=768) bleibt unveraendert. Container UND Img gleich gross,
   damit Badge (top-right) + Title (bottom-center) weiter auf dem Planeten ankern. */
@media (min-width: 769px) and (max-width: 1023px) {
  #ws-sec-06 .ws-sec-06-planet { width: clamp(360px, 52vw, 440px); }
  #ws-sec-06 .ws-sec-06-planet--virtuell { width: clamp(420px, 60vw, 500px); }
  #ws-sec-06 .ws-sec-06-planet-img,
  #ws-sec-06 .ws-sec-06-planet--ki .ws-sec-06-planet-img,
  #ws-sec-06 .ws-sec-06-planet--print .ws-sec-06-planet-img,
  #ws-sec-06 .ws-sec-06-planet--digital .ws-sec-06-planet-img {
    width: clamp(360px, 52vw, 440px);
  }
  #ws-sec-06 .ws-sec-06-planet-img--saturn { width: clamp(420px, 60vw, 500px); }
}

/* ─── Reduced Motion — Scrub aus, statisch ─── */
@media (prefers-reduced-motion: reduce) {
  .ws-sec-06-track {
    min-height: 0;
  }
  .ws-sec-06-sticky {
    position: static;
    height: auto;
    overflow: visible;
    perspective: none;
    padding: clamp(60px, 10vw, 100px) var(--ws-space-md);
  }
  .ws-sec-06-stage {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vw, 64px);
  }
  .ws-sec-06-headline-wrap,
  .ws-sec-06-planet {
    position: static;
    transform: none;
    opacity: 1;
  }
}

/* ============================================================
   Section 07 — Die richtige Navigation (Cockpit-Display)
   Vorlage: Seite 9 — Astronaut-Hand am Display + Headline links
   ============================================================ */

.ws-sec-07-navigation {
  min-height: 100svh;
  padding-block: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.ws-sec-07-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ws-sec-07-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 1;
}
.ws-sec-07-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 82% 88% at center, transparent 50%, rgba(0,0,0,0.6) 88%, #000 100%);
  z-index: 1;
  pointer-events: none;
}
.ws-sec-07-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0) 45%);
  z-index: 2;
}
.ws-sec-07-inner {
  position: relative;
  z-index: var(--ws-z-layer1);
  padding-top: clamp(48px, 7vh, 96px);
  padding-bottom: clamp(48px, 7vh, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.5vw, 80px);
  max-width: clamp(280px, 30vw, 580px);
  margin-inline: 0 auto;
}
.ws-sec-07-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  /* Korr 9.1 (2026-05-15): kein harter Zeilenumbruch mehr — natuerlich umbrechen via text-wrap. */
  text-wrap: balance;
}
.ws-sec-07-headline span { display: inline; }
.ws-sec-07-text-block {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 18px);
}
.ws-sec-07-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}
.ws-sec-07-body {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-normal);
  color: var(--ws-text-muted);
  text-shadow: var(--ws-role-body-shadow);
  max-width: 44ch;
}

/* Korr 15.41 (2026-05-17): Mobile Sec 07 — Headline → Bild full-width → Text.
   Update zu Korr 15.40: User-Wunsch Bild full-width statt nur rechts angedockt,
   Headline UEBER dem Bild, Subline + Body UNTER dem Bild.
   Trick: `.ws-sec-07-inner` auf `display: contents` — Inner-Container loest sich
   auf, Headline + text-block werden direkte Section-Children. Flex-Order regelt
   die Reihenfolge: Headline 1 / BG 2 / text-block 3. Bild mit `width: 100%;
   height: auto` nimmt natuerliche Aspect-Ratio bei voller Breite (kein crop).
   Vignette + Lese-Gradient bleiben aus (Desktop-spezifisch). */
@media (max-width: 768px) {
  .ws-sec-07-navigation {
    flex-direction: column;
    align-items: stretch;
    min-height: 100svh;
  }
  .ws-sec-07-inner {
    display: contents;
  }
  .ws-sec-07-headline {
    order: 1;
    padding-inline: var(--ws-container-pad);
    padding-top: clamp(40px, 6vh, 64px);
    margin: 0;
    font-size: var(--ws-role-h2-size);
  }
  /* Korr 16.4 (2026-05-17, Mobile): BG-Container 100vw + negative margin
     fuer edge-to-edge (vorher 100% innerhalb der Section, die padding-inline hatte). */
  .ws-sec-07-bg {
    order: 2;
    position: relative;
    inset: auto;
    width: 100vw;
    height: auto;
    flex-shrink: 0;
    margin-block: clamp(20px, 3.5vh, 36px);
    margin-inline: calc(50% - 50vw);
  }
  .ws-sec-07-bg img {
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: initial;
    display: block;
  }
  .ws-sec-07-bg::before,
  .ws-sec-07-bg::after {
    display: none;
  }
  .ws-sec-07-text-block {
    order: 3;
    padding-inline: var(--ws-container-pad);
    padding-bottom: clamp(40px, 6vh, 64px);
    gap: clamp(10px, 2vh, 16px);
  }
  .ws-sec-07-subline {
    font-size: var(--ws-role-sub-size);
  }
  .ws-sec-07-body {
    max-width: 100%;
    font-size: var(--ws-fs-body);
  }
}

/* ============================================================
   Section 08 — Fragen an den Operator (Unframe)
   Vorlage: Seite 10 — Pattern C (Stack vertikal):
     · Oben: schwarzer Headline-Block „FRAGEN AN DEN OPERATOR" links
     · Unten: Avatar-Frame mit Cockpit-BG (full-width, restliche Höhe)
   Pattern-Re-Build 2026-05-10 nach User-Befund (Pattern A → C — Headline
   gehört nicht aufs Avatar-Bild, sondern auf eigene schwarze Fläche oberhalb).
   ============================================================ */

.ws-sec-08-operator {
  position: relative;
  min-height: 130svh;
  padding: 0;
  overflow: hidden;
  background: var(--ws-bg-color);
  display: flex;
  flex-direction: column;
}
.ws-sec-08-headline {
  margin: 0;
  padding: clamp(200px, 28vh, 400px) clamp(20px, 4vw, 80px) clamp(32px, 5vh, 64px);
  max-width: 100%;
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
}
.ws-sec-08-mount {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--ws-bg-secondary);
  overflow: hidden;
}
.ws-sec-08-poster { position: absolute; inset: 0; }
.ws-sec-08-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ws-sec-08-poster-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ws-space-md);
  padding: clamp(40px, 6vh, 96px) clamp(20px, 5vw, 80px) clamp(32px, 5vh, 72px);
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}
.ws-sec-08-poster-overlay > * { pointer-events: auto; }
.ws-sec-08-consent-note {
  margin: 0;
  max-width: 56ch;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-small);
  line-height: var(--ws-lh-normal);
  color: var(--ws-text-muted);
}
.ws-sec-08-consent-note strong {
  color: var(--ws-text-color);
  font-weight: 600;
}
.ws-sec-08-mount.is-loaded .ws-sec-08-poster { display: none; }
.ws-sec-08-mount.is-loaded > div[id^="unframe-avatar-"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Load-Btn auf Hero-Pill-Skala (analog .ws-sec-01-cta-wrap .ws-mo-btn--pill) */
.ws-sec-08-load-btn {
  transform: scale(0.72);
  transform-origin: center bottom;
}
.ws-sec-08-load-btn:hover,
.ws-sec-08-load-btn:focus-visible {
  transform: scale(0.72) translateY(-3px);
}
.ws-sec-08-load-btn:active {
  transform: scale(0.72) translateY(1px);
}

@media (max-width: 768px) {
  .ws-sec-08-headline {
    padding: clamp(140px, 20vh, 240px) clamp(16px, 4vw, 32px) clamp(20px, 4vh, 40px);
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  .ws-sec-08-poster-overlay {
    padding: clamp(32px, 5vh, 56px) clamp(16px, 4vw, 32px) clamp(24px, 4vh, 48px);
    gap: var(--ws-space-sm);
  }
  .ws-sec-08-consent-note {
    max-width: 90%;
    font-size: 0.875rem;
  }
}

/* ============================================================
   Section 09 — Der Co-Pilot (Astronaut + 5 Bullets)
   Vorlage: Seite 11 — Astronaut rechts schwebend, Bullets links, Headline rechts oben
   ============================================================ */

.ws-sec-09-copilot {
  position: relative;
  min-height: 130svh;
  padding: 0;
  overflow: hidden;
  background: var(--ws-bg-color);
  display: flex;
  flex-direction: column;
}
.ws-sec-09-text {
  margin: 0;
  padding: clamp(112px, 16vh, 224px) clamp(20px, 4vw, 80px) clamp(32px, 5vh, 64px);
  text-align: right;
}
/* Korr 11.4 (2026-05-15): HL-SL-Abstand wie Sec 05 ("Den Kurs stabilisieren"), xs/sm -> md. */
.ws-sec-09-text > * + * { margin-top: var(--ws-space-md); }
.ws-sec-09-headline {
  margin: 0;
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
}
.ws-sec-09-subline {
  /* Korr 11.4 (2026-05-16): HL↔SL-Abstand = space-md (32px), gleich wie
     Sec 05 „Den Kurs stabilisieren". Vorher war hier `margin: 0;` das die
     `.ws-sec-09-text > * + *`-Regel mit gleicher Spezifitaet ueberschrieb
     (Source-Order: spaeter gewann) → 0 px Abstand statt 32 px. */
  margin: var(--ws-space-md) 0 0;
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}
.ws-sec-09-mount {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: #000;
  overflow: hidden;
}
/* Astronaut-Layer (Freisteller PNG) — verankert am rechten Mount-Rand, damit
   der Astronaut visuell nie vom rechten Rand weggeht. Fly-In via JS scroll-driven. */
.ws-sec-09-astronaut {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
/* picture als display:contents -> img bleibt direktes Flex-Child, alle img-Regeln
   + JS-Fly-In (querySelector '.ws-sec-09-astronaut img') greifen unveraendert.
   Mobile nutzt via <source> die vertikal zugeschnittene astronaut-mobile.png
   (kein transparenter Rand oben/unten -> keine schwarze Freiflaeche). */
.ws-sec-09-astronaut picture { display: contents; }
.ws-sec-09-astronaut img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
  will-change: transform, opacity;
  /* Skalierung wuchst nach links rein — rechter Rand bleibt verankert */
  transform-origin: right center;
}
@media (prefers-reduced-motion: reduce) {
  .ws-sec-09-bg img {
    transform: none;
    height: 100%;
    top: 0;
  }
  .ws-sec-09-astronaut img {
    transform: none;
  }
}
.ws-sec-09-list {
  position: absolute;
  inset: 0;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: clamp(64px, 10vh, 140px) 0;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-muted);
  /* Korr 11.6 (2026-05-16): Flex-Column mit justify-content: space-between →
     Items 1 + 5 oben/unten verankert, Items 2–4 dazwischen gleichmaessig
     verteilt. Damit sind die optischen LUECKEN zwischen den Items gleich
     gross, unabhaengig von der unterschiedlichen Text-Hoehe je Item. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.ws-sec-09-item {
  position: relative;
  padding-left: 1.6em;
  max-width: clamp(220px, 22vw, 360px);
  text-shadow: var(--ws-role-body-shadow);
}
.ws-sec-09-item::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ws-font-accent);
  font-weight: 700;
  /* Korr 11.3 (2026-05-15): Pfeile in Weiss (vorher Neon-Blau). */
  color: #ffffff;
}
/* Halbkreis um Astronaut (Astronaut sitzt etwa bei 70% x · 50% y im BG) — Bogen öffnet sich nach rechts.
   Korr 11.6 (2026-05-16): Vertikale Verteilung uebernimmt der Flex-Container
   (justify-content: space-between), individuelle X-Position pro Item via
   margin-left damit Halbkreis-Form um Astronaut erhalten bleibt. */
.ws-sec-09-item:nth-child(1) { margin-left: 28%; }
.ws-sec-09-item:nth-child(2) { margin-left: 8%; }
.ws-sec-09-item:nth-child(3) { margin-left: 3%; }
.ws-sec-09-item:nth-child(4) { margin-left: 8%; }
.ws-sec-09-item:nth-child(5) { margin-left: 28%; }

/* Korr 15.43 (2026-05-17): Mobile Sec 09 — Sticky-Astronaut + nummerierte
   Bullet-Cards fliegen rein. User-Wahl Konzept B (statt flacher Stack 15.42).
   Astronaut bleibt sticky im oberen Viewport-Bereich (45svh), Bullets als
   5 nummerierte Cards (01-05) scrollen darunter durch mit Reveal-Animation.
   Storytelling-Effekt: "Co-Pilot beobachtet die Mission-Punkte". */
@media (max-width: 768px) {
  .ws-sec-09-copilot {
    min-height: auto;
    overflow: visible;
  }
  .ws-sec-09-text {
    /* Korr 16.6 (2026-05-17): padding-top clamp(40, 6vh, 64) -> clamp(96, 14vh, 160)
       -> schwarze Freiflaeche zwischen Sec 08 Avatar und "DER CO-PILOT"-Headline
       (User: "soll zwischen Avatar und Headline schwarze Freiflaeche sein").
       Korr 16.35 (2026-05-19): padding-bottom clamp(20, 3.5vh, 28) -> clamp(4, 1vh, 12)
       — Astronaut war zu weit weg von Headline/Subline. Abstand jetzt ~4-12px.
       Korr 2026-06-03: padding-top etwas reduziert (160 -> 110) + z-index 2, damit
       der (jetzt overflow-visible) Astronaut hinter Headline/Subline bleeden kann. */
    position: relative;
    z-index: 2;
    padding: clamp(72px, 11vh, 120px) clamp(16px, 4vw, 32px) clamp(4px, 1vh, 12px);
    text-align: left;
  }
  .ws-sec-09-headline {
    font-size: var(--ws-role-h2-size);
  }
  .ws-sec-09-subline {
    font-size: var(--ws-role-sub-size);
  }
  .ws-sec-09-mount {
    flex: initial;
    display: block;
    overflow: visible;
  }
  /* STICKY-ASTRONAUT: bleibt im oberen Viewport-Bereich, waehrend Bullets
     darunter durchscrollen.
     Korr 16.5 (2026-05-17): height 45 -> 60svh + object-fit cover (statt contain)
     -> Astronaut nutzt die volle verfuegbare Container-Flaeche, kein "contained"-
     Letterboxing mehr (User-Befund: Astronaut zu klein).
     Korr 16.26 (2026-05-19): Cover-Fill-Pattern verworfen — Astronaut „wuchs nur
     in place", war links durch transform translateX(-22%) abgeschnitten. User-Wunsch:
     gleicher Fly-In wie Desktop (Freisteller flogt von off-right ins Bild, waechst
     dabei). Mobile-Container bleibt sticky+60svh, aber justify-content auf flex-end
     (right-anchored wie Desktop). Img-Mobile-Override entfernt — Base-CSS uebernimmt
     (height 100%, width auto, object-fit contain, object-position right center,
     transform-origin right center). JS-applyProgress macht translate3d+scale. */
  .ws-sec-09-astronaut {
    position: sticky;
    top: 0;
    inset: auto;
    width: 100%;
    /* Korr 2026-06-03: 100svh -> 58svh — kuerzere Sticky-Zone = deutlich weniger
       schwarze Flaeche ueber/unter dem Astronauten. overflow hidden -> visible:
       bei groesserer Skalierung wird der Astronaut NICHT abgeschnitten, sondern
       darf hinter Text/Cards bleeden (z-index 1, Text/Cards z-index 2 davor).
       Start-Scale im JS auf 1.0 (Astronaut fuellt die Hoehe sofort = kein Schwarz
       oben), End-Scale 1.5. */
    height: 58svh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    z-index: 1;
    overflow: visible;
  }
  /* Bullets als nummerierte Cards scrollen darunter */
  .ws-sec-09-list {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Korr 15.46 (2026-05-17): Gap zwischen Cards erhoeht (User-Wunsch). */
    gap: clamp(22px, 4vh, 36px);
    width: 100%;
    height: auto;
    /* Korr 2026-06-03: negativer margin-top zieht die erste Card hoch in die
       Astronaut-Zone hinein (Overlap) -> weniger schwarze Flaeche unter dem
       Astronauten. Cards liegen per z-index VOR dem Astronauten-Bild.
       Folge-Korr: -14svh -> -5svh — User wollte wieder etwas mehr Abstand
       zwischen Astronaut und erster Card. */
    margin-top: -5svh;
    padding: clamp(20px, 3vh, 32px) clamp(16px, 4vw, 32px) clamp(48px, 7vh, 80px);
    background: none;
    counter-reset: ws-sec-09-counter;
    z-index: 2;
  }
  .ws-sec-09-item,
  .ws-sec-09-item:nth-child(1),
  .ws-sec-09-item:nth-child(2),
  .ws-sec-09-item:nth-child(3),
  .ws-sec-09-item:nth-child(4),
  .ws-sec-09-item:nth-child(5) {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-left: 0;
    max-width: 100%;
    padding: clamp(18px, 2.6vh, 24px) clamp(18px, 4vw, 24px) clamp(18px, 2.6vh, 24px) clamp(72px, 17vw, 88px);
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--ws-mo-blue-soft, rgba(90, 184, 255, 0.35));
    counter-increment: ws-sec-09-counter;
    font-size: var(--ws-fs-body);
    line-height: var(--ws-lh-normal);
    text-shadow: none;
  }
  /* Korr 15.44 (2026-05-17): Counter als runder Badge (statt nur Text).
     User-Wunsch "rundere Zahlen". Body-Font statt Accent-Font fuer weichere
     Ziffern-Form. */
  .ws-sec-09-item::before {
    content: counter(ws-sec-09-counter);
    position: absolute;
    top: 50%;
    left: clamp(14px, 3.5vw, 20px);
    transform: translateY(-50%);
    width: clamp(42px, 10vw, 52px);
    height: clamp(42px, 10vw, 52px);
    border-radius: 50%;
    /* Korr 2026-06-03: kein Blau mehr (User-Wunsch). Weisser Ring, neutral-dunkle
       Fuellung, weisse Zahl, neutraler Schatten. */
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ws-font-body);
    font-weight: 700;
    font-size: clamp(1.15rem, 4.2vw, 1.4rem);
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================================
   Section 10 — Im Einsatz bewährt (Solar-Panel-Satellit)
   Vorlage: Seite 12 — Satellit mit rotierenden Logos auf Solar-Panels + Mars
   ============================================================ */

.ws-sec-10-bewaehrt {
  position: relative;
  min-height: 160svh;
  padding: 0;
  overflow: hidden;
  background: var(--ws-bg-color);
  display: flex;
  flex-direction: column;
}
.ws-sec-10-text {
  margin: 0;
  padding: clamp(112px, 16vh, 224px) clamp(20px, 4vw, 80px) clamp(32px, 5vh, 64px);
  text-align: left;
}
/* Korr 12.1 (2026-05-15): HL-SL-Abstand wie Sec 05/Sec 09, sm -> md. */
.ws-sec-10-text > * + * { margin-top: var(--ws-space-md); }
.ws-sec-10-headline {
  margin: 0;
  max-width: clamp(360px, 60vw, 920px);
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
}
.ws-sec-10-subline {
  /* Korr 12.1 (2026-05-16): HL↔SL-Abstand = space-md (32px), gleich wie
     Sec 05 „Den Kurs stabilisieren". Vorher war hier `margin: 0;` das die
     `.ws-sec-10-text > * + *`-Regel mit gleicher Spezifitaet ueberschrieb
     (Source-Order: spaeter gewann) → 0 px Abstand statt 32 px. */
  margin: var(--ws-space-md) 0 0;
  max-width: clamp(360px, 60vw, 920px);
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}
.ws-sec-10-mount {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  /* schwarz (statt --ws-bg-secondary #050610), damit kein bauechlicher Letterbox-
     Streifen oben/unten beim contain-Image entsteht. */
  background: #000;
  overflow: hidden;
}
.ws-sec-10-satellit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain statt cover, damit der Satellit (inkl. Solar-Panels oben) vollstaendig
     sichtbar ist. Section-Hoehe wurde auf 160svh erhoeht, damit das Mount genug
     vertikalen Platz hat. */
  object-fit: contain;
  object-position: center;
}

/* Korr 15.45 (2026-05-17): Mobile Sec 10 — GIF naeher an den Text.
   Vorher: Section min-height 160svh (Desktop) blieb aktiv, Mount `flex: 1`
   bekam 800+px Hoehe, GIF `object-fit: contain` rendert klein zentriert mit
   viel Leerraum oben → grosser Abstand zum Text. Fix: Section auto-hoch, Mount
   ohne flex-grow, GIF mit natuerlicher Aspect-Ratio (analog Sec 07/09). */
@media (max-width: 768px) {
  .ws-sec-10-bewaehrt {
    min-height: auto;
  }
  .ws-sec-10-text {
    /* Korr 15.46: padding-bottom + HL/SL-margin erhoeht (User-Wunsch).
       Korr 15.47 (2026-05-17): padding-top erhoeht — mehr Trenn-Abstand
       zwischen Sec 09 Co-Pilot und Sec 10 Im Einsatz bewaehrt. */
    padding: clamp(96px, 14vh, 160px) clamp(16px, 4vw, 32px) clamp(20px, 3.5vh, 32px);
  }
  .ws-sec-10-text > * + * {
    margin-top: var(--ws-space-lg, 40px);
  }
  .ws-sec-10-headline {
    font-size: var(--ws-role-h2-size);
    max-width: 100%;
  }
  .ws-sec-10-subline { max-width: 100%; }
  .ws-sec-10-mount {
    flex: initial;
    height: auto;
    /* Korr 15.46: extra Abstand zum Text.
       Korr 15.48 (2026-05-17): padding-bottom reduziert (User: schwarze
       Flaeche nach GIF zu gross). */
    padding-top: clamp(16px, 2.5vh, 28px);
    padding-bottom: clamp(16px, 2.5vh, 28px);
  }
  .ws-sec-10-satellit-img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: initial;
  }
}

/* ============================================================
   Section 11 — 15 Min. for free / Erstgespräch
   Vorlage: Seite 13 — Bullauge links + „UNSER ANGEBOT" rechts
   ============================================================ */

.ws-sec-11-pitch {
  position: relative;
  min-height: 110svh;
  padding: clamp(112px, 16vh, 224px) clamp(20px, 4vw, 80px) clamp(40px, 6vh, 80px);
  overflow: hidden;
  background: var(--ws-bg-color);
  display: flex;
  align-items: center;
}
.ws-sec-11-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  width: 100%;
  justify-items: center;
  text-align: center;
}
.ws-sec-11-bullauge {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(50vw, 95svh);
  max-width: 100%;
  justify-self: start;
  align-self: center;
  transform: translateX(-25%);
}
.ws-sec-11-bullauge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ws-sec-11-bullauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.125rem, 2.4vw, 2rem);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
  padding: 35% 28% 0 28%;
}
.ws-sec-11-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block-end: clamp(280px, 38vh, 600px);
  margin-inline-start: clamp(-280px, -14vw, -80px);
  text-align: left;
}
.ws-sec-11-text > * + * { margin-top: 0; }
.ws-sec-11-headline {
  margin: 0;
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.7vw, 3.125rem);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: var(--ws-text-color);
}
.ws-sec-11-body {
  margin: 0;
  max-width: 30ch;
  font-family: var(--ws-font-body);
  font-size: clamp(1.125rem, 1.45vw, 1.5rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}

@media (max-width: 768px) {
  .ws-sec-11-pitch {
    /* Korr 15.48 (2026-05-17): padding-top + min-height reduziert
       (User: schwarze Flaeche nach Sec 10 GIF zu gross). */
    padding: clamp(40px, 6vh, 64px) clamp(16px, 4vw, 32px) clamp(32px, 5vh, 64px);
    align-items: flex-start;
    min-height: auto;
  }
  .ws-sec-11-inner {
    grid-template-columns: 1fr;
    gap: var(--ws-space-lg);
  }
  .ws-sec-11-bullauge {
    width: min(85vw, 480px);
    transform: none;
    justify-self: center;
  }
  .ws-sec-11-bullauge-label {
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    padding: 24% 18% 0;
  }
  .ws-sec-11-headline { font-size: clamp(1.5rem, 6vw, 2.5rem); }
  .ws-sec-11-body { max-width: 100%; }
}

/* ============================================================
   Section 12 — Jetzt andocken (Andock-Elemente + Termin sichern)
   Vorlage: Seite 14 — Capsule links, Triebwerk rechts, Headline + Circle mittig
   ============================================================ */

.ws-sec-12-andocken {
  padding-block: var(--ws-section-padding);
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
}

/* ───────────── Sterne-Zone (Sec 11.5 + Sec 12 mit gemeinsamem BG) ─────────────
   .ws-sterne-zone-bg ist sticky-pinned ueber die ganze Zone → EIN Bild,
   das durch beide Sections durchgaengig sichtbar bleibt (kein zweiter BG).
   In Sec 11.5 verbirgt ein schwarzer Veil mit inverse-porthole-Mask den
   BG ausserhalb des Bullauges → Bullauge-Metapher bleibt.
   In Sec 12 ist der Veil weg → BG ueberall sichtbar mit gleicher Parallax. */
.ws-sterne-zone {
  position: relative;
}
/* BG position:fixed → von Anfang an am Viewport-Top, nicht erst wenn
   wrapper.top viewport.top erreicht. IO-Toggle .is-bg-visible steuert
   die Sichtbarkeit (nur waehrend Zone im Viewport). */
.ws-sterne-zone-bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100svh;
  width: 100%;
  /* z-index: -1 → BG haengt hinter allen Sections. Sec 11.5+12 sind
     transparent → BG scheint dort durch. Andere Sections (z.B. Sec 10
     mit eigenem Bild) verdecken den BG, sodass der BG dort nicht
     ueber den Section-Inhalt liegt. */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  /* Korr 2026-06-04: OFF-Richtung INSTANT (kein Fade). Beim Top-Exit (Zurueck-
     scrollen ueber den Pin-Start) gingen BG (280ms) + Veil (200ms) gleichzeitig
     in den Fade-out — der Veil war frueher weg als die Sterne -> Sterne-BG
     ploppte kurz VOLLFLAECHIG ohne Abdeckung auf (User-Befund). OFF instant =
     Sterne verschwinden im selben Frame wie der Pin endet. Die ON-Richtung
     behaelt den 280ms-Fade (Regel unten). */
  transition: none;
}
.ws-sterne-zone.is-bg-visible .ws-sterne-zone-bg {
  opacity: 1;
  /* ON-Richtung: sanftes Einblenden beim Sticky-Pin (wie bisher). */
  transition: opacity 280ms ease-out;
}
.ws-sterne-zone-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center calc(50% - var(--ws-sterne-zone-y, 0%));
}
.ws-sterne-zone > .ws-sec-11-5-fenster,
.ws-sterne-zone > .ws-sec-12-andocken {
  position: relative;
  z-index: 1;
}

/* Sec 11.5 Sticky-Inner transparent — der schwarze Veil drinnen
   uebernimmt die Schwarz-Abdeckung (mit Porthole-Loch). */
.ws-sterne-zone .ws-sec-11-5-fenster,
.ws-sterne-zone .ws-sec-11-5-sticky {
  background: transparent;
}
/* Padding-top der Section → margin-top auf Track verschoben, damit
   der Veil (erster Section-Child) am Section-Box-Top startet und keinen
   transparenten 40svh-Bereich darueber laesst.
   overflow: clip → Veil kann visuell nicht ueber Section-Bounds hinaus,
   verhindert dass der Veil beim Sticky-Release in Sec 12 sichtbar bleibt. */
.ws-sterne-zone .ws-sec-11-5-fenster {
  padding-top: 0;
  overflow: clip;
}
.ws-sterne-zone .ws-sec-11-5-track {
  margin-top: 40svh;
  position: relative;
  z-index: 2;
}

/* Schwarzer Veil mit INVERSE-Porthole-Maske → zeigt Schwarz UEBERALL ausser
   im Porthole-Kreis. Das Loch im Veil scaliert mit --ws-portal-radius
   (das gleiche Var, das auch die Portal-Maske skaliert) → wenn das
   Bullauge groesser wird, wird das Loch im Veil groesser → mehr vom
   gemeinsamen Sterne-BG wird sichtbar. */
.ws-sec-11-5-black-veil {
  position: fixed;
  top: 0;
  left: 0;
  height: 100svh;
  width: 100%;
  z-index: 1;
  background: #000;
  pointer-events: none;
  opacity: 0;
  /* OFF-Richtung: kurzer Fade (200 ms). Beim Sticky-Release fadet der Veil sanft weg
     (zusammen mit dem fruehen Abschalten bei pFen 0.86 in script.js). */
  transition: opacity 200ms ease;
  /* Korr 2026-06-03 (Perf): Das Loch wird NICHT mehr per animiertem Maskenradius
     pro Frame neu gerastert (Mobile-2fps-Killer), sondern per STATISCHER Maske +
     transform: scale() — GPU-composited. Der Veil liegt VOR dem einen geteilten
     Sterne-Hintergrund (.ws-sterne-zone-bg) und gibt ihn durch das wachsende Loch
     frei -> durchgehender Parallax-Hintergrund ueber Sec 11.5 + 12 bleibt erhalten.
     Basis-Radius 24vmin × scale entspricht exakt dem alten radius=24*scale.
     Die (durch das Upscaling leicht weiche) Lochkante wird vom Bullauge-Ring
     (Fenster-Img, gleiche Skalierung) verdeckt. */
  -webkit-mask: radial-gradient(circle 24vmin at 50% 50%, transparent 99%, #000 100%);
          mask: radial-gradient(circle 24vmin at 50% 50%, transparent 99%, #000 100%);
  transform: scale(var(--ws-sec-11-5-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.ws-sec-11-5-fenster.is-veil-visible .ws-sec-11-5-black-veil {
  opacity: 1;
  /* ON-Richtung: instant ohne Delay → Veil deckt sofort ab, BG faded ein. */
  transition: opacity 0ms 0ms;
}
/* Portal sitzt UEBER dem Veil (z-index 2 schon im Original). */
.ws-sec-12-andock-left,
.ws-sec-12-andock-right,
.ws-sec-12-inner {
  position: relative;
  z-index: 1;
}
.ws-sec-12-andock-left,
.ws-sec-12-andock-right {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* Korr 14.6 (2026-05-17): top 50% -> 58% — beide Module rücken auf Y-Höhe des CTA-Buttons
   „Termin sichern" (CTA sitzt im Inner-Flex unterhalb der Section-Mitte). */
.ws-sec-12-andock-left {
  left: 0;
  top: 58%;
  width: clamp(180px, 28vw, 460px);
  transform: translate(var(--ws-andock-x, -100%), -50%);
  transition: transform var(--ws-dur-fast) linear;
  will-change: transform;
  animation: ws-andock-wabble 6s var(--ws-ease-in-out) infinite;
}
.ws-sec-12-andock-right {
  right: 0;
  top: 58%;
  width: clamp(180px, 28vw, 460px);
  transform: translateY(-50%);
}
.ws-sec-12-andock-img-left,
.ws-sec-12-andock-img-right {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 80px rgba(0,212,255,0.18));
}
@keyframes ws-andock-wabble {
  0%, 100% { transform: translate(var(--ws-andock-x, 0), calc(-50% + 0px)); }
  50%      { transform: translate(var(--ws-andock-x, 0), calc(-50% - 8px)); }
}
.ws-sec-12-inner {
  position: relative;
  z-index: var(--ws-z-layer1);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ws-space-lg);
}
.ws-sec-12-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
}
.ws-sec-12-subline {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  color: var(--ws-text-color);
}
/* Korr 14.2 (2026-05-15): Text unter CTA jetzt wie SL — Versalien, Weiss, Headline-Font. */
.ws-sec-12-tag {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: #ffffff;
  /* Korr 2026-06-01: "Unverbindlich · Direkt · Zielgerichtet" einzeilig.
     Vorher brach es am 56ch-Inner-Container um.
     Korr 2026-06-12: einzeilig jetzt AUCH <= 480px (User-Befund Mobile) —
     statt white-space-Fallback skaliert die Schrift via vw mit, damit
     kein Overflow entsteht. */
  white-space: nowrap;
}
@media (max-width: 480px) {
  .ws-sec-12-tag { font-size: clamp(0.6rem, 3.4vw, 1rem); }
}
/* Korr 14.1 (2026-05-15): CTA-Button "Termin sichern" Text Bold + groesser (analog Sec 05).
   Korr 2026-06-04: Typo-Angleich an Sec 05 (Stand 2026-06-02) — Desktop + Tablet
   deutlich groesser, letter-spacing reduziert. Mobile-Wert unveraendert via
   Override im @media (max-width: 768px)-Block unten (analog Sec 05). */
.ws-sec-12-cta .ws-mo-btn__text {
  font-weight: 800;
  font-size: clamp(20px, 1.6vw, 25px);
  letter-spacing: 0.10em;
}
/* Korr 15.52 (2026-05-17): Mobile Button-Rand schmaler — analog Sec 05 Korr 15.15.
   User-Befund: Sec 12 "Termin sichern" hat zu breiten Rand auf Mobile,
   Sec 05 "Termin sichern" sieht besser aus → gleiche Werte uebernehmen.
   Korr 15.53 (2026-05-17): Andock-Module Mobile groesser + exakt gleiche Y-Hoehe
   (Wabble-Animation auf Left raus — verschoben Y bis zu 8px gegen Right).
   User-OK fuer Edge-Clipping. */
@media (max-width: 768px) {
  .ws-sec-12-cta.ws-mo-btn--circle .ws-mo-btn__rim-inner { inset: 10px; }
  .ws-sec-12-cta.ws-mo-btn--circle .ws-mo-btn__core { inset: 13px; }
  /* Korr 2026-06-04: Mobile "Termin sichern" bleibt auf altem Wert — Vergroesserung
     nur Desktop + Tablet (analog Sec 05, 144px-Circle traegt nicht mehr). */
  .ws-sec-12-cta .ws-mo-btn__text {
    font-size: clamp(15px, 1.15vw, 18px);
    letter-spacing: 0.18em;
  }
  .ws-sec-12-andock-left,
  .ws-sec-12-andock-right {
    width: clamp(260px, 60vw, 520px);
  }
  .ws-sec-12-andock-left {
    animation: none;
    transform: translate(var(--ws-andock-x, -100%), -50%);
  }
}

/* ============================================================
   Section 13 — Outro (Galaxie + Astronaut-Helm + Abschluss-Video)
   Vorlage: Seite 15 — Galaxie-BG + Helm-Detail links + „VIDEO STARTEN" mittig + Footer
   ============================================================ */

.ws-sec-13-outro {
  min-height: 100svh;
  padding-block: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-sec-13-bg { position: absolute; inset: 0; z-index: 0; }
.ws-sec-13-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.ws-sec-13-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%);
}
.ws-sec-13-helmet {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(160px, 24vw, 380px);
  z-index: 1;
  pointer-events: none;
  transform: translate(-15%, 12%);
}
.ws-sec-13-helmet-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,0.6));
}
.ws-sec-13-cta-wrap {
  position: relative;
  z-index: var(--ws-z-layer1);
}
.ws-sec-13-cta-wrap .ws-mo-btn--pill {
  transform: scale(0.7);
  transform-origin: center;
}
@media (max-width: 760px) {
  .ws-sec-13-cta-wrap .ws-mo-btn--pill { transform: scale(0.78); }
}
.ws-sec-13-outro.is-playing .ws-sec-13-cta-wrap,
.ws-sec-13-outro.is-playing .ws-sec-13-helmet { display: none; }
.ws-sec-13-outro.is-pending .ws-sec-13-cta-wrap { display: none; }
.ws-sec-13-outro.is-pending .ws-sec-13-pending { display: block; }
.ws-sec-13-outro .ws-sec-13-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ws-sec-13-pending {
  position: absolute;
  bottom: clamp(32px, 8vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ws-font-accent);
  font-size: var(--ws-fs-small);
  letter-spacing: var(--ws-letter-caption);
  color: var(--ws-text-color);
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--ws-mo-blue-soft);
  padding: var(--ws-space-xs) var(--ws-space-md);
  text-transform: uppercase;
  z-index: var(--ws-z-layer1);
}

/* ────────── Reduced Motion ────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ws-layer-2-divider::before { animation: none; }
  .ws-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   AUFBRUCH-SEQUENZ — Single-Sticky-Canvas-Scrub (Pattern B)
   Alle 4 Scrubs als kontinuierliche Frame-Sequenz im Canvas.
   Pflicht-Standards: scrub.md §2 + §12
   ============================================================ */

.ws-scrub-aufbruch {
  position: relative;
  height: 500svh;                   /* svh statt vh — iOS-Adressleisten-stabil (2026-06-08). 4 Segmente × ~125svh */
  background: transparent;          /* Track neutral — verhindert Release-Gap */
}

.ws-scrub-aufbruch__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #000;                 /* dunkler BG am Sticky-Inner */
  isolation: isolate;
}

.ws-scrub-aufbruch__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}

/* Fade-to-Black Overlay (Korr 2026-05-16): Canvas wird zum Booster-Uebergang schwarz
   ueberblendet, damit Galaxy-Frame nicht abrupt in Booster-Section springt. */
.ws-scrub-aufbruch__fadeout {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 5;
  opacity: var(--ws-scrub-fadeout-opacity, 0);
  pointer-events: none;
  will-change: opacity;
}

/* Brand-Logo IM Hero-Sticky (Korr 2026-06-01): position: sticky erzeugt einen
   eigenen Stacking-Context — ein fixed Header (Root z 100) liegt darum IMMER ueber
   der Hero-Schrift, egal welcher z-index im Sticky vergeben wird. Loesung: das Logo
   als Sticky-internen Layer ZWISCHEN Canvas (z 1) und Text-Stages (z 10) rendern.
   So liegt es vor dem All-Canvas, aber hinter der Headline. Der fixed Header wird
   dafuer ausgeblendet (er war ohnehin nur ueber dem Hero sichtbar). Fade-out beim
   Scrollen via JS (.is-hidden, gleicher Handler wie zuvor der Header). */
.ws-scrub-aufbruch__brand {
  position: absolute;
  top: clamp(20px, 3vw, 48px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(96px, 11vw, 168px);
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.6));
  transition: opacity 360ms var(--ws-ease-out), transform 360ms var(--ws-ease-out);
}
.ws-scrub-aufbruch__brand.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
}
/* Fixed Header auf der One-Pager-Startseite ausblenden — das Brand-Logo im Hero
   (s.o.) uebernimmt seine Rolle. Legal-Subpages haben kein .ws-scrub-aufbruch. */
.ws-header { display: none; }

/* ── Stage-Wrapper (Text-Overlays getriggert pro Segment-Ende) ── */
.ws-scrub-aufbruch__stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.ws-scrub-aufbruch__stage.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ws-scrub-aufbruch__stage-inner {
  width: 100%;
  height: 100%;                     /* WICHTIG: damit align-self end greift */
}

/* ── Text-Stage-Layout: Headline top-left + Text-Block bottom-right (wie Original Sec 02/03) ── */
.ws-scrub-aufbruch__stage-inner--text {
  /* Korr 2026-06-01 (kugelsicher): KEIN gemeinsames 2-Spalten-Grid mehr fuer Headline
     + Text-Block. Die breite ws-nobreak-Headline ("MARKETING-ZEITALTER") zwang das Grid
     auf schmaleren Screens zum Ueberlauf → rechter Text-Block abgeschnitten (3× gescheitert
     mit Spalten-Tuning). Loesung: Headline links im Flow (huggt linken Rand, 3 Zeilen via
     display:block-Spans, von ihrer Breite ungestoert), Text-Block ABSOLUT unten-rechts
     (fixer Rand-Abstand, gedeckelte Breite) → kann nie abgeschnitten werden, kollidiert nie
     mit der Headline. max-width: none = Rand-Hugging links wie Sec-07. */
  position: relative;
  height: 100%;
  padding-block: clamp(80px, 12vh, 160px);
  max-width: none;
}
.ws-scrub-aufbruch__headline--tl {
  /* Headline oben links am Innen-Rand (padding-inline der .ws-container, wie zuvor),
     von ihrer eigenen Breite getrieben (3-Zeilen-Komposition). */
  position: absolute;
  top: clamp(80px, 12vh, 160px);
  left: var(--ws-container-pad);
  margin: 0;
}
.ws-scrub-aufbruch__text-block--br {
  /* Bottom-right, unabhaengig von der Headline. right an den Innen-Rand (padding-inline
     der .ws-container), width gedeckelt → bleibt rechts neben der Headline, nie clipped. */
  position: absolute;
  right: var(--ws-container-pad);
  /* Korr 2026-06-09: bottom angehoben (vorher clamp(80px,12vh,160px)). Der Sticky-Mail-
     Button bleibt jetzt fix unten rechts (Wanderung entfernt); sein Oberkanten-Abstand
     vom Viewport-Boden ist max ~128px (bottom clamp(16,3vw,40) + Hoehe clamp(72,7vw,88)).
     Floor 150px haelt die unterste Textzeile mit ~22px Luft ueber dem Button. */
  bottom: clamp(150px, 16vh, 210px);
  width: clamp(220px, 22vw, 38ch);
  max-width: 38ch;
}

/* ── Typografie (gemeinsam für alle Stages) ── */
.ws-scrub-aufbruch__headline {
  font-family: var(--ws-font-headline);
  font-size: var(--ws-role-h2-size);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ws-text-color);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.65);
  align-self: start;
}
.ws-scrub-aufbruch__headline span { display: block; }
/* Korr 2026-06-07g: Mobile-only-<br> (z.B. "Marketing-" / "Zeitalter" in der
   Aufbruch-Headline) — Desktop unsichtbar, im Mobile-Block aktiviert. */
.ws-br-mobile { display: none; }
.ws-scrub-aufbruch__headline--center { text-align: center; }

.ws-scrub-aufbruch__text-block {
  color: var(--ws-text-color);
  /* Korr 2026-06-07e: Halo → knackige Kante + dezentes Ambient (wie Tease/Cue,
     Korr c/d). Lesbarkeit ueber dem Asteroidensturm traegt der Scrim (unten). */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}
/* Korr 2026-06-07e: Gerichteter Verlaufs-Scrim hinter der Textzone (User-Befund:
   weisser Text ueber hellem, unruhigem Asteroiden-Canvas schlecht lesbar; Option 1
   aus 3 gewaehlt — design-discipline §28 gerichteter Scrim statt Vollscrim/Blur).
   Radial-Ellipse, max ~45 % Abdunklung im Kern, weich auslaufend (0 bei 75 %),
   ragt grosszuegig ueber den Block hinaus → keine sichtbare Kante, kein Kasten.
   z-index -1 + isolation auf dem Block: Scrim liegt hinter dem Text, aber ueber
   dem Canvas. Kein backdrop-filter (Scrub-Canvas malt pro Frame — GPU-Kosten). */
.ws-scrub-aufbruch__text-block::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-80px, -8vw, -48px) clamp(-96px, -9vw, -56px);
  /* Korr 2026-06-07f: User-Befund „Linie/Box am Rand erkennbar". Ursache: bei
     ellipse 100% 100% ist der Gradient-Radius = volle Box-Breite — an der
     Box-Kante stand der Verlauf erst bei ~50 % (Rest-Deckung ~0.2) und wurde
     dort hart abgeschnitten. closest-side endet exakt an der Kante (Deckung 0)
     + mehr Zwischenstufen gegen Banding → randlos ausfadend. */
  background: radial-gradient(ellipse closest-side at center,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.38) 35%,
    rgba(0, 0, 0, 0.26) 55%,
    rgba(0, 0, 0, 0.14) 72%,
    rgba(0, 0, 0, 0.05) 87%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.ws-scrub-aufbruch__subline {
  font-family: var(--ws-font-body);
  font-size: var(--ws-role-sub-size);
  font-weight: 700;
  line-height: 1.32;
  margin-bottom: clamp(12px, 1.5vh, 18px);
}
.ws-scrub-aufbruch__subline--center {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.ws-scrub-aufbruch__body {
  font-size: var(--ws-fs-body);
  line-height: 1.55;
  color: var(--ws-text-muted);
}

/* ── Booster-Stage — Lift-Off-Choreografie am Scrub-Ende ──
   Layout 1:1 zur statischen Sec 04 (Header zentriert, 3 Karten mit border + leichtem Blur).
   Stage-Inner wird via --ws-booster-stage-y translateY-animiert (100vh -> 0 in Phase A).
   Stage-Opacity ist hier konstant 1 — Reveal lauft ueber die Translation, nicht ueber .is-active. */
.ws-scrub-aufbruch__stage[data-stage="booster"] {
  opacity: 1;
  pointer-events: auto;
  transition: none;
  /* Stage liegt fix im Viewport (kein translateY auf der Stage). Stattdessen
     animiert ein Mask-Image die sichtbare Form: ein radial-gradient mit
     verschiebbarem Center-Y. Center-Y faehrt von 200 % (Welle komplett unter
     dem Stage, nichts sichtbar) ueber 100 % (Welle erreicht Stage-Top mit
     Halbkreis-Bogen) bis ~80 % (Welle komplett ueber Stage-Top hinaus, Stage
     vollstaendig solid). Damit hat der wandernde Rand immer eine kurvige
     Halbkreis-Form ohne harte Rechteck-Kante. */
  background: #000;
  -webkit-mask-image: radial-gradient(
    ellipse 130% 95% at 50% var(--ws-booster-mask-y, 200%),
    #000 0%,
    #000 78%,
    rgba(0, 0, 0, 0.55) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 130% 95% at 50% var(--ws-booster-mask-y, 200%),
    #000 0%,
    #000 78%,
    rgba(0, 0, 0, 0.55) 92%,
    transparent 100%
  );
  will-change: mask-image;
  box-shadow: none;
}
.ws-scrub-aufbruch__stage-inner--booster {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* Padding-Top moderat groesser als Bottom — verschiebt den vertikal zentrierten
     Inhalt um wenige vh nach unten ohne die Cards unten ueber den Stage-Boden
     hinausragen zu lassen (sonst werden sie vom Bridge / Sec 05 ueberlagert). */
  padding-top: clamp(80px, 11vh, 160px);
  padding-bottom: clamp(40px, 6vh, 80px);
  /* Container-Werte identisch zu .ws-container — gleiche Card-Breite wie statische Sec 04,
     damit "KI-VIDEOS" einzeilig passt und alle drei Cards gleich hoch werden. */
  padding-inline: var(--ws-container-pad);
  max-width: var(--ws-container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  /* Eigene Translation fuer den Text — laeuft spaeter als der schwarze BG (Stage),
     damit der schwarze Layer schon steht, bevor Headline + Karten reinkommen. */
  transform: translateY(var(--ws-booster-text-y, 100vh));
  will-change: transform;
}
.ws-scrub-aufbruch__header {
  text-align: center;
  max-width: 64ch;
  margin-inline: auto;
  margin-bottom: var(--ws-space-xl, 64px);
}
.ws-scrub-aufbruch__headline--center {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: var(--ws-role-h2-size);
  line-height: var(--ws-lh-tight, 1.05);
  letter-spacing: var(--ws-letter-display, -0.02em);
  text-transform: uppercase;
  margin-bottom: var(--ws-space-md, 24px);
}
.ws-scrub-aufbruch__subline--center {
  font-family: var(--ws-font-body);
  font-weight: 700;
  font-size: var(--ws-role-sub-size);
  line-height: var(--ws-lh-snug, 1.32);
  color: var(--ws-text-color);
  max-width: 56ch;
  margin: 0 auto var(--ws-space-md, 24px);
  text-align: center;
}
.ws-scrub-aufbruch__eyebrow {
  margin-top: 0;
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ws-text-color);
  text-align: center;
}
.ws-scrub-aufbruch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ws-space-md, 24px);
  align-items: stretch;
  max-width: none;
  margin: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .ws-scrub-aufbruch__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Korr 3.5 + 3.6 (2026-05-15): Card-Title in Weiss + 3D-Tilt + Spotlight-Hover.
   Tilt: --ws-tilt-rx/ry via JS gesetzt (Mouse-Position normiert).
   Spotlight: --ws-spot-x/y via JS, radial-gradient als Highlight-Layer ueber Card. */
.ws-scrub-aufbruch__grid {
  perspective: 1200px;
}
.ws-scrub-aufbruch__card {
  position: relative;
  padding: var(--ws-space-lg, 32px);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--ws-divider, rgba(255, 255, 255, 0.12));
  border-radius: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 1;
  /* Tilt-Variablen — Default 0, JS schreibt Live-Werte beim mousemove */
  --ws-tilt-rx: 0deg;
  --ws-tilt-ry: 0deg;
  --ws-spot-x: 50%;
  --ws-spot-y: 50%;
  transform: perspective(1200px) rotateX(var(--ws-tilt-rx)) rotateY(var(--ws-tilt-ry));
  transform-style: preserve-3d;
  will-change: transform;
  /* Cards strecken sich auf die Hoehe der hoechsten Card im Grid-Row
     (analog statische Sec 04 — gleich grosse Boxen unabhaengig von Text-Laenge). */
  height: 100%;
  overflow: hidden;
  transition: border-color var(--ws-dur-base, 320ms), background var(--ws-dur-base, 320ms), transform 120ms ease-out;
}
/* Spotlight-Layer (radial-gradient folgt der Maus) */
.ws-scrub-aufbruch__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 280px at var(--ws-spot-x) var(--ws-spot-y), rgba(90, 184, 255, 0.22), rgba(90, 184, 255, 0) 70%);
  opacity: 0;
  transition: opacity 220ms ease-out;
  z-index: 1;
}
.ws-scrub-aufbruch__card > * {
  position: relative;
  z-index: 2;
}
.ws-scrub-aufbruch__card:hover {
  border-color: var(--ws-mo-blue-soft, rgba(90, 184, 255, 0.4));
  background: rgba(8, 12, 24, 0.6);
}
.ws-scrub-aufbruch__card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ws-scrub-aufbruch__card {
    transform: none;
    transition: border-color 200ms, background 200ms;
  }
  .ws-scrub-aufbruch__card:hover::before { opacity: 0; }
}
.ws-scrub-aufbruch__card-title {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: var(--ws-fs-h3);
  line-height: var(--ws-lh-snug, 1.32);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--ws-space-md, 24px);
  color: #ffffff;
}
.ws-scrub-aufbruch__card-body {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-normal, 1.55);
  color: var(--ws-text-muted);
}

/* ── Sec 04 Booster Cards — Chrome-Glass-Variant (gleiche Optik wie Sec 05 Pillars) ── */
/* Chrome-Layer-Spans gegen die ws-scrub-aufbruch__card > * Regel wieder absolut + negativ-z setzen */
.ws-sec-04-card > .ws-mo-btn__rim-outer,
.ws-sec-04-card > .ws-mo-btn__cut,
.ws-sec-04-card > .ws-mo-btn__rim-inner,
.ws-sec-04-card > .ws-mo-btn__core {
  position: absolute;
}
.ws-sec-04-card > .ws-mo-btn__rim-outer { z-index: -3; }
.ws-sec-04-card > .ws-mo-btn__cut       { z-index: -3; }
.ws-sec-04-card > .ws-mo-btn__rim-inner { z-index: -2; }
.ws-sec-04-card > .ws-mo-btn__core      { z-index: -1; }
.ws-scrub-aufbruch__card.ws-sec-04-card {
  background: transparent;
  border: 0;
  border-radius: 26px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  transform-style: flat;
  will-change: transform, filter;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4vh, 48px) clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  transition:
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 320ms ease;
}
.ws-scrub-aufbruch__card.ws-sec-04-card::before { display: none; }
.ws-scrub-aufbruch__card.ws-sec-04-card:hover {
  background: transparent;
  border-color: transparent;
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 18px rgba(2, 102, 240, 0.45))
          drop-shadow(0 0 36px rgba(90, 184, 255, 0.22));
}
.ws-scrub-aufbruch__card.ws-sec-04-card:hover::before { opacity: 0; }
.ws-sec-04-card:hover > .ws-mo-btn__core::before {
  opacity: 1;
}
.ws-sec-04-card .ws-scrub-aufbruch__card-title {
  color: #0a0e16;
  text-shadow: none;
  transition: color 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-sec-04-card .ws-scrub-aufbruch__card-body {
  color: #1a2434;
  transition: color 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-sec-04-card:hover .ws-scrub-aufbruch__card-title,
.ws-sec-04-card:hover .ws-scrub-aufbruch__card-body {
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .ws-scrub-aufbruch__card.ws-sec-04-card,
  .ws-scrub-aufbruch__card.ws-sec-04-card:hover { transform: none; }
  .ws-sec-04-card:hover > .ws-mo-btn__core::before { opacity: 0; }
  .ws-sec-04-card:hover .ws-scrub-aufbruch__card-title,
  .ws-sec-04-card:hover .ws-scrub-aufbruch__card-body { color: inherit; }
}

/* ── Rakete-Overlay — Phase A (Reinflug von unten, scale 1.3 -> 1.0)
   und Phase B (Rausflug ueber den oberen Rand, scale 1.0 konstant). ──
   transform-origin 50% 100% damit Skalierung von der Unterkante aus wirkt
   (Rakete waechst nach oben, Unterkante bleibt verankert). Werte aus JS. */
.ws-scrub-aufbruch__rakete {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  /* Korr 2026-05-16: Base-Hoehe groesser, damit 'scale 1.0 = 100 %' satt wirkt. */
  height: clamp(640px, 90vh, 1100px);
  transform:
    translateX(-50%)
    translateY(var(--ws-rakete-y, 85vh))
    scale(var(--ws-rakete-scale, 1.3));
  transform-origin: 50% 100%;
  /* z-index 20 — Rakete liegt VOR dem Booster-Layer (Stage z-index 10).
     Inhalt kommt hinter der Rakete von unten hoch, Rakete fliegt drueber raus. */
  z-index: 20;
  will-change: transform, opacity;
  /* Korr 2026-05-16: Opacity-Gate (JS setzt --ws-rakete-opacity). Default 0 damit die
     Rakete waehrend scrub1-3 NICHT durchscheint (bei scale 1.8 reicht translateY 85vh
     allein nicht aus, um sie komplett aus dem Viewport zu schieben). */
  opacity: var(--ws-rakete-opacity, 0);
  filter: drop-shadow(0 8px 48px rgba(0, 102, 240, 0.38));
  pointer-events: none;
}

/* ── Mobile (≤ 768 px) ── */
@media (max-width: 768px) {
  /* Korr 15.0 (2026-05-17): Mobile-Crop verschiebt Canvas nach rechts (Default 50% center
     schnitt Rakete bis scrub3 frame ~73 ab). Frames sind 16:9, Mobile ist 9:18 → cover
     skaliert an Höhe und schneidet ~560 px seitlich ab.
     Korr 16.4 (2026-05-17): object-position-x wird scroll-progressbasiert animiert
     (CSS-Var --ws-scrub-pos-x, gesetzt im JS initScrubAufbruchCanvas).
     Anfang (scrub1: Rakete-Anflug) = 70% (Rakete sitzt rechts → bleibt sichtbar)
     Ende (scrub2-4: Asteroidensturm + Galaxie) = 50% (zentral → User fliegt durch
     den Sturm statt daneben vorbei). User-Befund 2026-05-17. */
  .ws-scrub-aufbruch__canvas { object-position: var(--ws-scrub-pos-x, 70%) center; }
  .ws-scrub-aufbruch { height: 1000svh; }  /* svh — iOS-Adressleisten-stabil (2026-06-08) */
  .ws-scrub-aufbruch__stage-inner--text {
    /* Korr 2026-06-01: Base ist nicht mehr Grid (Desktop nutzt absolute Positionierung)
       → fuer Mobile Grid + statische Positionen wiederherstellen (Headline ueber Text). */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding-inline: clamp(20px, 5vw, 28px);
    padding-block: clamp(48px, 8vh, 88px);
    gap: clamp(20px, 3vh, 32px);
  }
  .ws-scrub-aufbruch__headline--tl {
    position: static;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1;
  }
  .ws-scrub-aufbruch__text-block--br {
    /* Korr 2026-06-07e: relative statt static — der Scrim-::before (inset,
       z-index -1) braucht den Block als Anker, Grid-Platzierung unveraendert. */
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: stretch;
    width: auto;
    max-width: 100%;
    /* QA-Fix B1 (2026-06-06): Sticky-Mail-Button (fixed, bottom ~16px, ~48px
       Circle) ueberlappte die letzte Textzeile (~68x20px gemessen, 390+430px).
       Clearance unter dem Text — Block ist align-self end im Grid, padding
       schiebt den Text ueber die Button-Zone. */
    padding-bottom: 76px;
  }
  /* Korr 15.16 (2026-05-17, Mobile): Aufbruch-/Kurs-Stage-Headline kleiner. Vorher
     clamp(2rem, 9vw, 3.25rem) → "Marketing-Zeitalter" wurde rechts abgeschnitten.
     Korr 16.7 (2026-05-17): nochmal kleiner — "STABILISIEREN" wurde am rechten
     Rand auf "STABILISIERE" abgeschnitten. clamp(1.5, 7vw, 2.5) -> (1.125, 5.5vw, 2).
     Korr 2026-06-07f: wieder groesser (User: „Header etwas zu klein") — 6.75vw,
     ohne Neu-Anordnung (Zeilen sind feste display:block-Spans).
     Korr 2026-06-07g: nochmals groesser (User: „immer noch zu klein" + Zeile
     lief in den Rand). Moeglich, weil "Marketing-Zeitalter" auf Mobile jetzt
     per .ws-br-mobile in 2 Zeilen bricht — laengste Zeile ist nur noch
     "Der Aufbruch" / "in ein neues" (12ch). Render-gemessen 360–768 ohne
     Clipping (echte Webfonts geladen). */
  .ws-scrub-aufbruch__headline { font-size: var(--ws-role-h2-size); }
  .ws-br-mobile { display: inline; }
  /* Korr 15.5 (2026-05-17): Booster-Stage-Inner kompakter + Top-Align statt Center.
     Vorher justify-center → Header („Der Booster") wurde oben aus dem Sticky-Container
     abgeschnitten (Inhalt + 3 Cards 1-spaltig > 100svh). Jetzt flex-start mit groesserem
     Top-Padding (Buffer fuer Rakete-Pass) + kompaktere Header/Card-Typo.
     Korr 15.13 (2026-05-17): Stage-Inner padding-inline 0 + max-width 100% — damit das
     Grid bis zum Viewport-Rand reichen kann. Header bekommt eigenes padding-inline. */
  .ws-scrub-aufbruch__stage-inner--booster {
    padding-inline: 0;
    max-width: 100%;
    justify-content: flex-start;
    padding-top: clamp(140px, 22vh, 220px);
    padding-bottom: clamp(20px, 3vh, 40px);
  }
  .ws-scrub-aufbruch__header {
    margin-bottom: clamp(16px, 2.5vh, 32px);
    padding-inline: clamp(16px, 4vw, 28px);
  }
  .ws-scrub-aufbruch__headline--center { font-size: var(--ws-role-h2-size); }
  .ws-scrub-aufbruch__subline--center {
    font-size: clamp(0.85rem, 3vw, 1rem);
    margin-bottom: clamp(8px, 1.5vh, 16px);
    line-height: 1.4;
  }
  .ws-scrub-aufbruch__eyebrow { font-size: clamp(0.75rem, 2.8vw, 0.9rem); }
  .ws-scrub-aufbruch__card { padding: clamp(14px, 3.5vw, 22px); }
  .ws-scrub-aufbruch__card-title { font-size: clamp(0.95rem, 4vw, 1.15rem); margin-bottom: 8px; }
  .ws-scrub-aufbruch__card-body { font-size: clamp(0.78rem, 3vw, 0.9rem); line-height: 1.45; }
  /* Korr 15.7 (2026-05-17, Mobile): Booster-Cards horizontaler Carousel statt 1-spaltig.
     User-Wunsch: nebeneinander + Auto-Slide nach links + Touch-Drag selber. Native
     overflow-x scroll + scroll-snap → Touch-Drag funktioniert ohne JS, Auto-Slide
     wird via JS-IIFE (initBoosterCarousel) gesetzt.
     Korr 15.13 (2026-05-17): margin-inline-Negativ-Trick raus (Stage-Inner hat jetzt
     padding-inline 0). Grid full-width mit eigenem padding-inline. */
  .ws-scrub-aufbruch__grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 12px;
    padding-block: 4px;
    padding-inline: clamp(16px, 4vw, 28px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .ws-scrub-aufbruch__grid::-webkit-scrollbar { display: none; }
  .ws-scrub-aufbruch__card {
    flex: 0 0 calc(100% - 48px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Korr 15.11 (2026-05-17): Maus-Drag-Cursor + user-select aus. JS toggelt
     cursor: grabbing waehrend Drag. Touch nutzt native overflow-scroll. */
  .ws-scrub-aufbruch__grid {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  /* Korr 15.12 (2026-05-17): Waehrend Mouse-Drag scroll-snap-type: none, sonst
     mandatory snappt sofort bei jedem pointermove-scrollLeft-Set → "switchy"
     statt smooth. Beim Release greift mandatory wieder + Browser snappt
     smooth zur nearest Card. Touch-Pfad unveraendert (kein .ws-is-dragging). */
  .ws-scrub-aufbruch__grid.ws-is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
  .ws-scrub-aufbruch__rakete { height: clamp(360px, 55vh, 620px); }
}

/* ── Tablet-Layer 769–1279 — Aufbruch-Sequenz (Korr 14.9 2026-05-17) ──
   Mobile-Override (max-width 768) deckt iPad-Portrait ab; Desktop-Layout greift erst
   ab 1280. Dazwischen läuft sonst Desktop, das bei 800–1024 zu üppig wirkt:
   • Text-Stage Gap + Padding-block reduziert (kompakteres 2×2-Pattern)
   • Headline mittlere Skala (zwischen Mobile 32–52 und Desktop 40–84)
   • Body-Block breiter (44ch statt 38ch — Tablet-Spalte schluckt es)
   • Booster-Inner Padding moderat, Cards-Gap + Card-Padding kompakter
   • Rakete-Höhe Tablet-Brücke zwischen Mobile (360–620) und Desktop (640–1100)
   Sub-Switch 769–1023 stellt die 3-Card-Reihe auf 1-spaltig (3 Cards bei 769–1023
   wären < 230 px breit mit 160 px Inhalt → unleserlich). */
@media (min-width: 769px) and (max-width: 1279px) {
  /* Korr 2026-06-01: Tablet nutzt dieselbe Absolut-Positionierung wie Desktop (Base) —
     kein Stack noetig, da der absolute Text-Block nie ueberlaeuft. Hier nur kleinere
     Headline-Typo + etwas knappere Top/Bottom-Offsets. */
  .ws-scrub-aufbruch__headline { font-size: var(--ws-role-h2-size); }
  .ws-scrub-aufbruch__headline--tl { top: clamp(60px, 9vh, 120px); }
  /* Korr 2026-06-09: angehoben analog Desktop — Button bleibt fix unten rechts. */
  .ws-scrub-aufbruch__text-block--br { bottom: clamp(145px, 15vh, 190px); }
  .ws-scrub-aufbruch__stage-inner--booster {
    padding-top: clamp(60px, 9vh, 120px);
    padding-bottom: clamp(32px, 5vh, 64px);
    padding-inline: clamp(28px, 4vw, 56px);
  }
  .ws-scrub-aufbruch__headline--center { font-size: var(--ws-role-h2-size); }
  .ws-scrub-aufbruch__subline--center { font-size: clamp(0.95rem, 1.3vw, 1.125rem); }
  .ws-scrub-aufbruch__grid { gap: clamp(16px, 2.4vw, 28px); }
  .ws-scrub-aufbruch__card { padding: clamp(20px, 2.6vw, 28px); }
  .ws-scrub-aufbruch__card-body { font-size: clamp(0.85rem, 1vw, 0.95rem); line-height: 1.5; }
  .ws-scrub-aufbruch__rakete { height: clamp(520px, 70vh, 880px); }
}
/* Tablet-Break-Helfer: erzwingt auf Tablet einen Umbruch in den Booster-Titeln
   (z.B. "Virtual" / "Reality"), damit alle 3 Titel gleich 2-zeilig sind und die
   Bodies auf gleicher Höhe starten. Auf Desktop/Mobile ausgeblendet → kein Break. */
.ws-mo-tbr { display: none; }
@media (min-width: 769px) and (max-width: 1023px) {
  /* Korr 2026-06-01: User-Wunsch — die 3 Booster-Karten NEBENEINANDER (vorher 1-spaltig).
     Kompaktere Card-Typo + Padding, damit sie auch bei Tablet-Portrait lesbar in eine Reihe passen. */
  .ws-scrub-aufbruch__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 20px); }
  .ws-scrub-aufbruch__card { padding: clamp(16px, 2.2vw, 22px); min-width: 0; }
  .ws-scrub-aufbruch__card-title {
    font-size: clamp(0.95rem, 1.9vw, 1.25rem);
    min-height: 2.6em;          /* 2 Zeilen reservieren → Bodies starten einheitlich */
  }
  .ws-scrub-aufbruch__card-title .ws-mo-tbr { display: inline; }  /* erzwingt 2-zeiligen Titel */
  .ws-scrub-aufbruch__card-body { font-size: clamp(0.78rem, 1.15vw, 0.9rem); line-height: 1.45; }
}

/* ── Reduced-Motion — Booster-Layer in finaler Position, Rakete ganz weg ── */
@media (prefers-reduced-motion: reduce) {
  .ws-scrub-aufbruch__stage { opacity: 1; pointer-events: auto; }
  .ws-scrub-aufbruch__stage[data-stage="booster"] { transform: none; }
  .ws-scrub-aufbruch__stage-inner--booster { transform: none; }
  .ws-scrub-aufbruch__rakete { display: none; }
}

/* ────────── Sec 12 — Andock-Manöver: Right-Slide + Light-Burst ────────── */
/* Korr 14.5 (2026-05-17): translateY(-50%) muss mit, sonst hängt Right tiefer als Left
   (Base-Regel `translateY(-50%)` wird hier sonst überschrieben → Höhenversatz). */
.ws-sec-12-andock-right {
  transform: translate(var(--ws-bog-d-andock-right-x, 0), -50%);
  will-change: transform;
}
.ws-sec-12-andocken { position: relative; }
/* Korr 14.7 (2026-05-17): Light-Burst-Pseudo entfernt (User-Befund: blauer Lichtpunkt
   über dem CTA war störend). Andock-Right-Slide bleibt erhalten. */
@media (prefers-reduced-motion: reduce) {
  .ws-sec-12-andock-right { transform: translateY(-50%); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Sec 06 Mobile Modal (Korr 15.38, 2026-05-17 — Clean Re-Build)
   Eigenstaendige Modal-Komponente, Body-Sibling. Ersetzt komplett die alte
   Section-interne Info-Layer-Logik auf Mobile. Mobile-only Block (768px).
   Position via JS-Inline-Style — keine fixed/abs-CSS-Magie noetig.
   ════════════════════════════════════════════════════════════════════════════ */
.ws-mo-sec06-modal[hidden] { display: none; }

/* Korr 2026-06-01: Gate 768 → 1023, damit das Info-Modal auch im Tablet-Band
   gestylt + sichtbar ist (passend zum JS-Handler-Gate). */
@media (max-width: 1023px) {
  .ws-mo-sec06-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    pointer-events: none;
  }
  .ws-mo-sec06-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: auto;
  }
  .ws-mo-sec06-modal__box {
    position: absolute;
    width: calc(100vw - 48px);
    max-width: 28rem;
    /* Korr 2026-06-03: Booster-Box-Optik (Chrome-Card) statt dunkler Glas-Box.
       Box-Optik kommt aus den .ws-mo-btn__*-Spans; Padding > Core-Inset (13px). */
    padding: 30px 26px 26px;
    background: transparent;
    border: 0;
    border-radius: 26px;
    box-shadow: none;
    color: #1a2434;
    overflow: hidden;
    pointer-events: auto;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
  }
  .ws-mo-sec06-modal__close {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 28px;
    line-height: 1;
    color: #0a0e16;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .ws-mo-sec06-modal__close:focus-visible {
    outline: 2px solid var(--ws-mo-blue-neon, #5AB8FF);
    outline-offset: 2px;
  }
  .ws-mo-sec06-modal__title {
    position: relative;
    z-index: 1;
    /* Korr 2026-06-03: Headline-Typo (wie Booster-Karten-Titel) statt Pixel-Accent. */
    font-family: var(--ws-font-headline);
    font-weight: 700;
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    margin: 0 0 14px 0;
    /* dunkler Titel auf weisser Core-Flaeche. */
    color: #0a0e16;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .ws-mo-sec06-modal__list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--ws-font-body);
    font-size: 0.98rem;
    line-height: 1.5;
    /* Korr 2026-06-03: dunkler Text auf weisser Core-Flaeche. */
    color: #1a2434;
  }
  .ws-mo-sec06-modal__list li {
    position: relative;
    padding-left: 1.4em;
  }
  .ws-mo-sec06-modal__list li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    /* Korr 2026-06-03: Pfeile schwarz (User-Wunsch). */
    color: #0a0e16;
    font-family: var(--ws-font-accent);
  }
}

/* ───────────── Loader-Overlay (Korr 16.2 — 2026-05-17) ─────────────
   Vollbild-Overlay direkt nach <body>. Blockt Scroll bis scrub1_hi
   (64 Frames, ~11 MB) preloaded. Logo zentral + Neonblau-Progressbar.

   Fade-Out (seamless Reveal):
     1. Logo wandert auf Header-Position (top = padding-block des Headers,
        Groesse = Header-Logo-Groesse). 600ms easeOutExpo.
     2. Progressbar fadet nach oben weg (opacity 0 + translateY(-30px)). 350ms.
     3. Loader-BG fadet (opacity 0). 500ms mit 200ms delay -> faengt erst an
        wenn Logo schon halb auf Header-Position ist.
     4. Nach 750ms: display:none (JS hide-Timeout).
   JS-Trigger via [data-state="done"], dann [data-state="hidden"]. */
/* Korr 16.8 (2026-05-17): Loader-Reveal-Konzept neu:
   - "ready" State: BG 50% transparent (statt 0%), Logo bleibt zentral mit
     kleiner Settle-Bewegung von -16px nach 0, Bar fadet nach UNTEN weg.
   - "hidden" State: Logo + BG fade-out, getriggert durch Scroll > 50px.
   - Scroll zurueck nach oben (<= 5px) -> data-state zurueck auf "ready".
*/
/* Korr 16.13 (2026-05-17): Rollback auf klassischen Loader. Persistent-Overlay-
   Konzept (50% transparent + Mid-Layer + Scroll-Watcher) zurueckgenommen.
   Loader fadet 1x komplett weg sobald Frames preloaded sind. Header + Hero
   uebernehmen danach. data-state="done" -> opacity 0, dann "hidden" -> display none. */
.ws-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #000;
  transition: opacity 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-loader[data-state="done"] {
  opacity: 0;
  pointer-events: none;
}
.ws-loader[data-state="hidden"] {
  display: none;
}

/* Korr 16.9 (2026-05-17): Mittel-Balken aus voll schwarzem Layer mit Mask-Fade
   an Ober- und Unterkante. Logo (160px) sitzt drin, der Balken ist 220px hoch
   (min Logo-Hoehe + 30px Padding je Seite). Im LOADING-State unsichtbar
   (loader-bg ist sowieso schon voll schwarz), im READY-State opacity 1
   -> Mitte voll schwarz, oben/unten 50% transparent durch loader-bg.
   Im HIDDEN-State wieder weg. */
/* Korr 16.13: Mid-Layer deaktiviert (persistent-Overlay-Konzept rueckgaengig).
   Div bleibt im DOM, ist aber nie sichtbar. */
.ws-loader-mid {
  display: none;
}
.ws-loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 12%;
  object-fit: contain;
  /* Default Loading: leicht oberhalb der Mitte -> beim "ready" Settle nach unten. */
  transform: translate(-50%, calc(-50% - 16px));
  opacity: 1;
  /* Korr 16.11 (2026-05-17): Logo opacity-Fade kuerzer (700ms ease-out) als
     Mid-Fade (1000ms easeInOut). Vorher gleiche Dauer + easing -> Logo wirkte
     wegen img-Persistenz subjektiv langsamer als der Balken. Jetzt verschwindet
     das Logo eher (700ms vs Mid 1000ms) und faded vor dem Balken weg.
     transform-Easing fuer Settle-Bewegung bleibt 1100ms easeOutQuint. */
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}
.ws-loader[data-state="done"] .ws-loader-logo,
.ws-loader[data-state="hidden"] .ws-loader-logo {
  transform: translate(-50%, -50%);
  opacity: 0;
}
.ws-loader-bar {
  position: absolute;
  top: calc(50% + 110px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ws-loader[data-state="done"] .ws-loader-bar,
.ws-loader[data-state="hidden"] .ws-loader-bar {
  opacity: 0;
  transform: translate(-50%, 30px);
  pointer-events: none;
}
.ws-loader-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--ws-mo-blue-neon, #5AB8FF);
  border-radius: 2px;
  transition: width 200ms ease-out;
  will-change: width;
}
body.ws-is-loading .ws-scroll-container {
  overflow: hidden;   /* Scroll-Lock während Loader — am Container */
}
@media (prefers-reduced-motion: reduce) {
  .ws-loader,
  .ws-loader-logo,
  .ws-loader-bar,
  .ws-loader-bar-fill {
    transition: none;
  }
}

/* ============================================================
   Scroll-Cue oben links (Korr 2026-06-06)
   Cue: weiss, "Scroll" + Puls-Linie, ab Load sichtbar, faded beim
   Scrollen wie das Brand-Logo (is-hidden via fadeTargets-Handler).
   Scroll-Tease ("Ey, dein Ernst?") entfernt — Korr 2026-06-07j,
   User-Wunsch, alle Geraete.
   ============================================================ */
.ws-scroll-cue {
  position: absolute;
  top: clamp(20px, 3vw, 48px);
  left: clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
  transition: opacity 360ms var(--ws-ease-out), transform 360ms var(--ws-ease-out);
}
.ws-scroll-cue.is-hidden {
  opacity: 0;
  transform: translateY(-12px);
}
.ws-scroll-cue__label {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffffff;
  /* Korr 2026-06-07d: gleicher Effekt wie Tease (Korr c) — Halo raus,
     knackige Kante + dezentes Ambient statt Blur-Fleck. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.ws-scroll-cue__line {
  width: 1px;
  height: clamp(28px, 4.5vh, 44px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  animation: ws-scroll-cue-pulse 1800ms ease-in-out infinite;
}
@keyframes ws-scroll-cue-pulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.5; }
}
/* Korr 2026-06-07 (Mobile): Scroll-Cue unten mittig statt oben links —
   User-Wunsch. Sticky-Mail-Button sitzt bottom-right (fixed, ~48px Circle),
   das zentrierte Cue kollidiert nicht. Hide-Fade nach unten statt oben
   (Richtung der Position). */
@media (max-width: 768px) {
  .ws-scroll-cue {
    top: auto;
    bottom: clamp(16px, 2.5vh, 28px);
    left: 0;
    right: 0;
  }
  .ws-scroll-cue.is-hidden { transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-scroll-cue { transition: none; }
  .ws-scroll-cue__line { animation: none; }
}