/* ============================================================
   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: "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: "Dot Matrix";
  src: url("../Bilder/fonts/dot-matrix/DOTMATRI.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ────────── :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:     "Dot Matrix", "Saira", 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;

  --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; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  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;
  min-height: 100vh;
}
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 {
  width: clamp(96px, 11vw, 168px);
  height: auto;
  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);
  border-top: 1px solid var(--ws-divider);
  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);
}
.ws-footer-nav {
  display: flex;
  align-items: center;
  gap: var(--ws-space-sm);
  flex-wrap: wrap;
  justify-content: center;
}
.ws-footer-link { transition: color var(--ws-dur-fast) var(--ws-ease-out); }
.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);
  z-index: var(--ws-z-sticky);
}
.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);
}

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

/* ============================================================
   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;
  width: 100%;
  margin-bottom: 0;
  z-index: 0;
}
.ws-sec-05-bg img {
  display: block;
  width: clamp(420px, 94vw, 1280px);
  height: auto;
  margin: 0 auto;
}
.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: 600;
  font-size: var(--ws-fs-h1);
  line-height: var(--ws-lh-tight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--ws-space-md);
}
.ws-sec-05-subline {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
  margin: 0 0 var(--ws-space-xs);
}
.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);
  margin: 0 0 var(--ws-space-xs);
}
.ws-sec-05-body:last-of-type { margin-bottom: 0; }
/* ── Galaxy-Zone (galaxy.jpg full-bleed) mit alternierenden Inhalts-Baendern ── */
.ws-sec-05-galaxy-zone {
  position: relative;
  background-image: url("../Bilder/galaxy.jpg");
  background-size: cover;
  background-position: center;
  background-color: #000;
  margin-top: clamp(40px, 6vh, 80px);
  /* Trennlinien: Zone-Anfang + -Ende */
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
/* Trennlinien zwischen jedem Band */
.ws-sec-05-galaxy-zone > * + * {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.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-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); }
}

/* ── CTA-Zone: 3-spaltiges Grid (links Text · mitte Termin-Sichern · rechts Text) ── */
.ws-sec-05-cta-zone {
  text-align: center;
}
.ws-sec-05-cta-intro {
  text-align: center;
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--ws-text-color);
  margin: 0 auto clamp(28px, 5vh, 56px);
  max-width: 56ch;
}
.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: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
  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);
}
.ws-sec-05-accent {
  display: block;
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--ws-mo-blue-neon);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block: clamp(2px, 0.4vh, 6px);
  text-shadow: 0 0 18px rgba(90, 184, 255, 0.35);
}
.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: 92px;
  padding: 20px 36px;
  border-radius: 26px;
}
.ws-sec-05-card .ws-mo-btn__core {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 55%, #e9eef3 100%);
}
.ws-sec-05-card .ws-mo-btn__text {
  color: #0a0e16;
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(0.74rem, 0.84vw, 0.9rem);
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-shadow: none;
}
.ws-sec-05-card:hover .ws-mo-btn__text {
  color: #0a0e16;
}
@media (max-width: 760px) {
  .ws-sec-05-card {
    min-height: 80px;
    padding: 16px 24px;
    border-radius: 22px;
  }
}
.ws-sec-05-cta-intro {
  text-align: center;
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--ws-text-color);
  margin-bottom: var(--ws-space-lg);
  max-width: 56ch;
  margin-inline: auto;
}
.ws-sec-05-cta {
  display: flex;
  margin: 0 auto;
}

/* ============================================================
   Section 06 — Neue Galaxien ansteuern (4 Planeten)
   Vorlage: Seite 8 — Galaxie-BG + 4 Planeten mit Bullet-Listen
   ============================================================ */

.ws-sec-06-galaxien {
  background: #000;
  padding-block: 0;
  overflow: hidden;
}
.ws-sec-06-stage {
  position: relative;
  width: 100%;
  min-height: clamp(1800px, 220svh, 2400px);
  max-width: 1600px;
  margin: 0 auto;
}

/* Center Headline — flexbox-zentrierung mit padding-top für Y-Verschiebung
   (transform-frei → kein Konflikt mit .ws-reveal.is-visible { transform: none }) */
.ws-sec-06-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(220px, 20%, 480px);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.ws-sec-06-headline {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--ws-space-md);
  max-width: min(560px, 50vw);
}
.ws-sec-06-subline {
  font-family: var(--ws-font-headline);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  color: var(--ws-text-color);
  margin: 0;
  letter-spacing: 0.02em;
  max-width: min(560px, 50vw);
}

/* Item — Planet + Text-Block */
.ws-sec-06-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 32px);
  z-index: 2;
}
.ws-sec-06-planet-img {
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  /* tighter clip als border-radius (verbirgt den weißen Halo am oberen/unteren Bildrand) */
  clip-path: circle(47%);
  transition: transform var(--ws-dur-slow) var(--ws-ease-out);
}
.ws-sec-06-planet-img--xl {
  width: clamp(260px, 30vw, 420px);
}
.ws-sec-06-planet-img--sm {
  width: clamp(120px, 13vw, 170px);
}
.ws-sec-06-planet-img--saturn {
  border-radius: 0;
  width: clamp(480px, 52vw, 720px);
  aspect-ratio: auto;
  clip-path: none; /* Saturn behält volle Form mit Ringen */
}
/* Item-spezifische Größen-Overrides — Differenzierung wie im Screenshot */
.ws-sec-06-item--digital .ws-sec-06-planet-img { width: clamp(200px, 20vw, 280px); }
.ws-sec-06-item--print .ws-sec-06-planet-img   { width: clamp(240px, 24vw, 340px); }
.ws-sec-06-item--ki .ws-sec-06-planet-img      { width: clamp(400px, 42vw, 580px); }
.ws-sec-06-item:hover .ws-sec-06-planet-img {
  transform: rotate(4deg) scale(1.03);
}

/* Text-Block */
.ws-sec-06-text {
  max-width: 22ch;
}
.ws-sec-06-planet-title {
  font-family: var(--ws-font-headline);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 var(--ws-space-2xs);
}
.ws-sec-06-planet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ws-font-body);
  font-size: clamp(0.72rem, 0.82vw, 0.88rem);
  line-height: 1.4;
  color: var(--ws-text-muted);
}
.ws-sec-06-planet-list li {
  position: relative;
  padding-left: 1.1em;
}
.ws-sec-06-planet-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ws-font-accent);
  font-weight: 700;
  color: var(--ws-mo-blue-neon);
}

/* Quadranten-Positionen Desktop (≥1024) — Höhen über volle Section-Höhe gestreckt */
@media (min-width: 1024px) {
  /* PRINT klein, rechts oben — Planet leicht nach unten versetzt (visuell, Text-Y bleibt), Text vor dem Planeten + weiter rechts */
  .ws-sec-06-item--print   { top: 20%;  right: 18%; flex-direction: column; align-items: flex-start; gap: 8px; }
  .ws-sec-06-item--print .ws-sec-06-planet-img { position: relative; z-index: 1; transform: translateY(100px); }
  .ws-sec-06-item--print:hover .ws-sec-06-planet-img { transform: translateY(100px) rotate(4deg) scale(1.03); }
  /* Text-Override siehe weiter unten (Zeile mit margin-top: -1vw) — kombinierte Regel */
  /* KI groß, links oberes Drittel (Planet ragt links raus) */
  .ws-sec-06-item--ki      { top: 26%; left: -6%; }
  /* DIGITAL kleinster, links unteres Drittel */
  .ws-sec-06-item--digital { bottom: 24%; left: 14%; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  /* VIRTUELL Saturn am größten, rechts unten — vollständig sichtbar (kein Bleed nach unten) */
  .ws-sec-06-item--virtuell { bottom: 4%; right: -6%; flex-direction: row-reverse; align-items: center; }
  .ws-sec-06-item--virtuell .ws-sec-06-text { margin-right: clamp(0px, 1vw, 20px); margin-top: -10vw; }
  .ws-sec-06-item--print .ws-sec-06-text   { margin-left: clamp(200px, 18vw, 340px); margin-top: -1vw; position: relative; z-index: 2; }
  .ws-sec-06-item--digital .ws-sec-06-text { margin-left: clamp(20px, 3vw, 40px); }
}

/* Mobile-Fallback (<1024) — 1-Spalt, statisch, kompakt */
@media (max-width: 1023px) {
  .ws-sec-06-stage {
    min-height: 0;
    padding: clamp(60px, 10vw, 100px) var(--ws-space-md);
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vw, 64px);
  }
  .ws-sec-06-center {
    position: static;
    transform: none;
    width: 100%;
    order: 1;
    pointer-events: auto;
  }
  .ws-sec-06-item {
    position: static;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(14px, 3vw, 22px);
  }
  .ws-sec-06-item--ki      { order: 2; }
  .ws-sec-06-item--print   { order: 3; }
  .ws-sec-06-item--digital { order: 4; }
  .ws-sec-06-item--virtuell{ order: 5; }
  .ws-sec-06-planet-img--xl     { width: clamp(180px, 50vw, 280px); }
  .ws-sec-06-planet-img--sm     { width: clamp(120px, 30vw, 170px); }
  .ws-sec-06-planet-img--saturn { width: clamp(220px, 60vw, 320px); }
  .ws-sec-06-text { max-width: 32ch; margin: 0; }
  .ws-sec-06-planet-list { align-items: flex-start; display: inline-flex; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ws-sec-06-planet-img,
  .ws-sec-06-item:hover .ws-sec-06-planet-img {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   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: clamp(2rem, 4.4vw, 3.75rem);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
}
.ws-sec-07-headline span { display: block; }
.ws-sec-07-text-block {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 18px);
}
.ws-sec-07-subline {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  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);
  max-width: 44ch;
}

/* ============================================================
   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;
}
.ws-sec-09-text > * + * { margin-top: var(--ws-space-sm); }
.ws-sec-09-headline {
  margin: 0;
  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-09-subline {
  margin: 0;
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  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: var(--ws-bg-secondary);
  overflow: hidden;
}
.ws-sec-09-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ws-sec-09-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ws-sec-09-list {
  position: absolute;
  inset: 0;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}
.ws-sec-09-item {
  position: absolute;
  padding-left: 1.6em;
  max-width: clamp(220px, 22vw, 360px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.ws-sec-09-item::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ws-font-accent);
  font-weight: 700;
  color: var(--ws-mo-blue-neon);
}
/* Halbkreis um Astronaut (Astronaut sitzt etwa bei 70% x · 50% y im BG) — Bogen öffnet sich nach rechts. */
.ws-sec-09-item:nth-child(1) { left: 28%; top: 10%; }
.ws-sec-09-item:nth-child(2) { left: 8%;  top: 28%; }
.ws-sec-09-item:nth-child(3) { left: 3%;  top: 50%; transform: translateY(-50%); }
.ws-sec-09-item:nth-child(4) { left: 8%;  top: 72%; }
.ws-sec-09-item:nth-child(5) { left: 28%; top: 90%; transform: translateY(-100%); }

@media (max-width: 768px) {
  .ws-sec-09-text {
    padding: clamp(80px, 12vh, 144px) clamp(16px, 4vw, 32px) clamp(20px, 4vh, 40px);
  }
  .ws-sec-09-headline { font-size: clamp(1.5rem, 6vw, 2.5rem); }
  .ws-sec-09-bg img { object-position: 70% center; }
  .ws-sec-09-list {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ws-space-md);
    width: 100%;
    height: 100%;
    padding: clamp(32px, 5vh, 64px) clamp(16px, 4vw, 32px);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
  }
  .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: static;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
  }
}

/* ============================================================
   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: 130svh;
  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;
}
.ws-sec-10-text > * + * { margin-top: var(--ws-space-sm); }
.ws-sec-10-headline {
  margin: 0;
  max-width: clamp(360px, 60vw, 920px);
  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-10-subline {
  margin: 0;
  max-width: clamp(360px, 60vw, 920px);
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  line-height: var(--ws-lh-snug);
  color: var(--ws-text-color);
}
.ws-sec-10-mount {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--ws-bg-secondary);
  overflow: hidden;
}
.ws-sec-10-satellit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .ws-sec-10-text {
    padding: clamp(80px, 12vh, 144px) clamp(16px, 4vw, 32px) clamp(20px, 4vh, 40px);
  }
  .ws-sec-10-headline {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    max-width: 100%;
  }
  .ws-sec-10-subline { max-width: 100%; }
}

/* ============================================================
   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: 2fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  width: 100%;
}
.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 {
    padding: clamp(80px, 12vh, 144px) clamp(16px, 4vw, 32px) clamp(32px, 5vh, 64px);
    align-items: flex-start;
  }
  .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;
}
.ws-sec-12-andock-left,
.ws-sec-12-andock-right {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.ws-sec-12-andock-left {
  left: 0;
  top: 50%;
  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: 50%;
  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-fs-display);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-letter-display);
  text-transform: uppercase;
}
.ws-sec-12-subline {
  font-family: var(--ws-font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--ws-text-color);
}
.ws-sec-12-tag {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-small);
  letter-spacing: var(--ws-letter-caption);
  text-transform: uppercase;
  color: var(--ws-text-subtle);
}

/* ============================================================
   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; }
}