:root{
  --paper:#DBEAFC;
  --panel:#FFFFFF;
  --ink:#132039;
  /* --navy ist bewusst NICHT Teil des Dark-Mode-Umschaltens: ein paar
     Flächen (Footer, Konfigurator-Summary, aktiver Akku-Pill, Video-
     Unterlegungen) sind by design immer dunkles Marken-Navy, unabhängig
     vom Theme. --ink dagegen ist die "Text"-Rolle und wird unten unter
     html.dark umdefiniert. */
  --navy:#132039;
  /* Beide Blautöne 1:1 aus images/logo.png gesampelt (äußerer/innerer Bogen) —
     ersetzen die vorherigen, deutlich blasseren Blau-Werte. --steel = das
     kräftigere Kobaltblau, --volt = das hellere Neon-Cyan-Blau. Orange
     (--signal*) bleibt unverändert die zentrale Highlight-Farbe. */
  --steel:#0057C4;
  --steel-soft:#CFEFFF;
  --signal:#FF5A1F;
  --signal-dark:#E14A14;
  --signal-hot:#FF3D0A;
  --volt:#00C2FF;
  --graphite:#44607C;
  --line:#82B4EB;
  --blue-glow:rgba(0,194,255,0.35);
  --radius:14px;
  --wrap:1180px;
}

/* ===================================================================
   DARK MODE — per .theme-toggle im Header umschaltbar (siehe script.js/
   initThemeToggle), Zustand in localStorage. --navy und --signal* bleiben
   bewusst unverändert (siehe Kommentar oben bei --navy); alle anderen
   Rollen bekommen dunkle Gegenstücke. Ein paar Flächen, die nicht über
   diese Variablen laufen (Header-Hintergrund, das Glas-Panel bei den
   technischen Daten), werden weiter unten an Ort und Stelle überschrieben.
   =================================================================== */
html.dark{
  --paper:#0B1626;
  --panel:#16233F;
  --ink:#EAF2FB;
  --steel:#3D9BFF;
  --steel-soft:#15335C;
  --volt:#22D3FF;
  --graphite:#93AAC4;
  /* War #28405F (~1.5:1 auf --panel, ~1.7:1 auf --paper) — WCAG verlangt
     mind. 3:1 für UI-Ränder. Karten/Pills/Checkboxen, deren Hintergrund
     oft gleich der Seite ist, waren dadurch praktisch randlos. Jetzt
     ~4.1:1 auf --panel, ~4.8:1 auf --paper. */
  --line:#5E84BC;
  --blue-glow:rgba(0,194,255,0.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

html{
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
  transition:background-color .25s ease, color .25s ease;
}

.grid-wash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,87,196,0.09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(0,87,196,0.09) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(180deg, black, black 55%, transparent 100%);
          mask-image: linear-gradient(180deg, black, black 55%, transparent 100%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift{
  0%{ background-position:0 0, 0 0; }
  100%{ background-position:64px 64px, 64px 64px; }
}

h1,h2,h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.92;
  margin:0;
  color:var(--ink);
}
.mono{ font-family:'JetBrains Mono', monospace; }
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
}
a{color:inherit;}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative; z-index:2; }

/* ===================================================================
   FLOW STAGE — durchgehender Flugpfad über die gesamte Dokumenthöhe.
   Wird von script.js (initFlowPath) berechnet und bei Scroll aktualisiert.
   =================================================================== */
.flow-stage{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}
.flow-svg{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
.flow-path{
  fill:none; stroke:var(--steel); stroke-width:2.5;
  stroke-dasharray:3 12; stroke-linecap:round;
  opacity:0.4;
}
.flow-plane{
  position:absolute; top:0; left:0;
  width:40px;
  will-change:transform;
}
/* Position (.flow-plane) UND Rotation (.flow-plane-icon) werden beide
   1:1 pro Scroll-Frame per JS gesetzt, ohne CSS-Transition — die Wende-
   Drehung ist direkt an die zurückgelegte Scroll-Strecke gekoppelt
   (siehe script.js/updatePlane, turnProgress), nicht an eine feste Zeit. */
.flow-plane-icon{
  display:block; width:100%; height:auto;
  transform-origin:50% 50%;
  filter:drop-shadow(0 8px 18px rgba(0,87,196,0.45));
}

.flow-gap{
  position:relative;
  height:170px;
  display:flex; align-items:center;
  overflow:hidden;
  z-index:2;
}
.flow-gap--lg{ height:240px; }
.waypoint-num{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:clamp(80px,13vw,190px);
  color:rgba(0,87,196,0.07);
  line-height:1;
  user-select:none;
  z-index:1;
  white-space:nowrap;
}
/* Fixe dunkelblaue Farbe bei sehr geringer Deckkraft — auf dem hellen
   --paper der Wolke im Light Mode als blasse "Geisterzahl" gedacht.
   Auf dem dunklen --paper im Dark Mode wurde dieselbe Farbe fast
   unsichtbar (dunkel auf dunkel). Dort auf ein helles Blau umkehren,
   damit die Zahl als Wasserzeichen genauso sichtbar bleibt. */
html.dark .waypoint-num{ color:rgba(93,180,255,0.16); }
.waypoint-connector{
  position:absolute; top:50%; height:0;
  border-top:2px dashed var(--steel);
  opacity:0.5;
  z-index:1;
  pointer-events:none;
}
.waypoint-label{
  position:relative; z-index:2;
  margin-left:auto; margin-right:6vw;
  font-size:11px; letter-spacing:0.16em;
  color:var(--steel);
  background:var(--paper);
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 0 16px var(--blue-glow);
}
@media (max-width: 720px){
  .flow-gap{ height:110px; }
  .flow-gap--lg{ height:150px; }
  .waypoint-label{ margin-right:20px; font-size:9.5px; padding:5px 10px; }
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'JetBrains Mono', monospace;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; text-decoration:none;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--signal); color:#fff; box-shadow:0 6px 0 var(--signal-dark); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--signal-dark); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--navy); color:#fff; }
.btn-glow{ animation: btnGlow 2.6s ease-in-out infinite; }
@keyframes btnGlow{
  0%,100%{ box-shadow:0 6px 0 var(--signal-dark), 0 0 22px rgba(255,90,31,0.15); }
  50%{ box-shadow:0 6px 0 var(--signal-dark), 0 0 34px rgba(255,90,31,0.55); }
}
.btn-ghost-light{ border-color:#fff; color:#fff; }
/* color hier bewusst --navy statt --ink: der Hover-Hintergrund ist fest
   Weiss (Button liegt immer auf dunklem Video), der Text muss also auch
   im Dark Mode fest dunkel bleiben statt auf die helle Theme-Textfarbe
   umzuschalten. */
.btn-ghost-light:hover{ background:#fff; color:var(--navy); }

/* ---------- NAV ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(223,236,252,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background-color .25s ease, border-color .25s ease; }
html.dark header{ background:rgba(11,22,38,0.86); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; }
.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.logo-mark{ width:34px; height:34px; object-fit:contain; flex:none; }
/* Eigener, dynamischerer Font nur für den Wortmark-Schriftzug im Header —
   Rajdhani statt der sonst für Headings genutzten Big Shoulders Display,
   plus leichter Schräglauf für mehr Bewegung/Tempo (passt zum
   Flug-Thema). Bleibt bewusst vom generischen Headings-Font der Seite
   getrennt, damit die Marke eigenständig wirkt. */
.logo-text{
  display:inline-block;
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:0.01em;
  text-transform:uppercase;
  transform:skewX(-9deg);
}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; padding:0;
  border-radius:50%; border:1.5px solid var(--line);
  background:var(--panel); color:var(--ink);
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.theme-toggle:hover{ border-color:var(--steel); transform:translateY(-1px); }
.theme-toggle .icon-moon{ display:none; }
html.dark .theme-toggle .icon-sun{ display:none; }
html.dark .theme-toggle .icon-moon{ display:block; }
/* Ersetzt den früheren Strich (.dash) im Header-Logo. Position fliegt
   kontinuierlich per Scroll-Fortschritt nach links über den Schriftzug
   hinaus (script.js/initLogoPlane, kein CSS-Transition — bleibt 1:1 mit
   dem Scrollen). z-index sorgt dafür, dass es dabei sichtbar ÜBER dem
   Text liegt statt dahinter. Nase zeigt nach links (Flugrichtung). */
.logo-plane{ position:relative; z-index:1; width:27px; height:auto; transform:rotate(90deg); }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:14px; text-decoration:none; color:var(--graphite); font-weight:500; transition:color .15s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-cta{ display:inline-flex; }
.burger{ display:none; background:none; border:none; cursor:pointer; padding:6px; flex:none; }
.burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  /* Header bleibt sticky sichtbar, solange der Hero-Bereich läuft, und
     schiebt sich dann per Klasse (siehe script.js/initMobileHeaderHide)
     nach oben aus dem Bild — reversibel beim Zurückscrollen in den Hero. */
  header{ transition:transform .35s ease; }
  header.header-hidden{ transform:translateY(-100%); }
}

/* ===================================================================
   HERO — VIDEO, full-bleed
   =================================================================== */
.hero-video{
  position:relative; min-height:94vh; display:flex; align-items:center;
  padding:120px 0 60px; overflow:hidden; isolation:isolate;
}
.hero-video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy); }
.hero-video-bg video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.hero-video-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(19,32,57,0.72), rgba(19,32,57,0.5) 45%, rgba(19,32,57,0.9)); }
.hero-grid-wash{ position:absolute; z-index:2; opacity:0.5; }
.hero-content{ position:relative; z-index:3; max-width:720px; }
.hero-video .eyebrow{ color:var(--volt); }
.hero-video .eyebrow::before{ background:var(--signal-hot); }
.hero-video h1{ color:#fff; font-size:clamp(46px, 7.6vw, 96px); text-shadow:0 8px 40px rgba(0,0,0,0.5); }
.hero-video h1 .accent{ color:var(--signal-hot); text-shadow:0 0 26px rgba(255,61,10,0.55); }
.hero-video .lede{ color:#DCE6EE; font-size:17px; max-width:46ch; margin:22px 0 30px; line-height:1.6; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.hero-video .hero-meta{ color:var(--volt); font-size:12.5px; letter-spacing:0.03em; }
.hero-video .hero-meta span:not(:last-child)::after{ content:"·"; margin:0 10px; color:rgba(255,255,255,0.25); }

.live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--signal-hot); margin-right:2px;
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(255,61,10,0.55); }
  70%{ box-shadow:0 0 0 9px rgba(255,61,10,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,61,10,0); }
}
.scroll-cue{
  position:absolute; z-index:3; left:50%; bottom:28px; transform:translateX(-50%);
  color:#fff; font-size:10.5px; letter-spacing:0.2em; opacity:0.75;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue span{
  width:1px; height:34px; background:linear-gradient(180deg, #fff, transparent);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ opacity:0.2; } 50%{ opacity:1; } 100%{ opacity:0.2; } }

/* ===================================================================
   INTRO / PRODUKT-REVEAL — asymmetrisch, überlappend
   =================================================================== */
.intro-bleed{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items:center;
  min-height:86vh;
  margin-top:-24px;
  z-index:2;
}
.intro-media{
  position:relative; z-index:1;
  height:78vh;
  clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(19,32,57,0.4);
}
.intro-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.intro-copy{
  position:relative; z-index:2;
  margin-left:-9vw;
  background:var(--panel);
  padding:52px 48px;
  border-radius:var(--radius);
  box-shadow:0 30px 60px -24px rgba(19,32,57,0.28), 0 0 50px -10px rgba(0,194,255,0.25);
}
.display-huge{ font-size:clamp(38px, 6.2vw, 76px); }
.display-huge .accent{ color:var(--signal); }
.intro-copy .lede{ color:var(--graphite); font-size:16px; margin:20px 0 0; max-width:36ch; line-height:1.6; }
.intro-meta{ margin-top:22px; font-size:11.5px; color:var(--steel); }
.intro-meta span:not(:last-child)::after{ content:"·"; margin:0 10px; color:var(--line); }

@media (max-width: 980px){
  .intro-bleed{ grid-template-columns:1fr; min-height:auto; margin-top:-20px; }
  .intro-media{ height:50vh; clip-path:polygon(0 0, 100% 0, 100% 91%, 0 100%); }
  /* Papierfalz-Kante: der obere Schnitt der Karte führt die Diagonale des
     Bild-Ausschnitts direkt fort (links tiefer/mehr weggeschnitten, rechts
     bis ganz oben), statt sich als abgerundetes Rechteck zufällig mit dem
     schrägen Foto zu überlappen. Passend dazu keine Rundung mehr — wirkt
     wie eine gefaltete/gerissene Papierkante statt einer Karte. */
  .intro-copy{
    margin-left:0; margin-top:-46px; padding:48px 26px 36px;
    border-radius:0;
    clip-path:polygon(0 9%, 100% 0, 100% 100%, 0 100%);
  }
}

/* ===================================================================
   FOLDS — asymmetrisch, überlappende Fotos
   =================================================================== */
.folds-flow{
  position:relative;
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap:0;
  align-items:center;
  padding:40px 0 60px;
}
.folds-copy-float{
  position:relative; z-index:2;
  max-width:480px;
  /* margin statt padding: schiebt die Box nur nach rechts, ohne ihre
     eigene (auf 480px gedeckelte) Innenbreite zu verkleinern. Mit
     padding-left fraß der mit dem Viewport wachsende Wert sich direkt in
     die fix gedeckelte max-width hinein — auf sehr breiten Screens blieb
     dadurch kaum noch Platz für den Text (siehe Git-Historie).
     Zusätzlich nach oben gedeckelt (min(560px, ...)): die Grid-Spalte
     (0.85fr) wächst langsamer als diese Formel — ohne Deckel würde die
     Box ab ~7500px Viewport-Breite erneut gegen 0 laufen. Ab ca. 2240px
     bleibt der Rand jetzt konstant, die Box landet einfach bei ihrer
     regulären max-width von 480px, egal wie breit der Screen noch wird. */
  margin-left:min(560px, max(28px, calc((100vw - var(--wrap)) / 2 + 28px)));
}
.folds-copy-float p{ color:var(--graphite); font-size:15.5px; line-height:1.7; margin:0 0 16px; }
.folds-copy-float ul{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
.folds-copy-float li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink); }
.folds-copy-float li::before{ content:"✈"; color:var(--signal); flex:none; }

.folds-photos-float{ position:relative; height:520px; }
.photo-float{
  position:absolute;
  border-radius:var(--radius);
  overflow:hidden;
  border:2px solid rgba(0,194,255,0.3);
  box-shadow:0 30px 60px -20px rgba(19,32,57,0.35);
}
.photo-float img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-float-a{ width:56%; height:70%; top:0; right:8%; transform:rotate(-3deg); z-index:2; }
.photo-float-b{ width:46%; height:52%; bottom:0; right:36%; transform:rotate(4deg); z-index:1; }
.photo-float .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(19,32,57,0.92), rgba(19,32,57,0));
  color:#fff; font-size:11.5px; letter-spacing:0.03em;
}
@media (max-width: 980px){
  .folds-flow{ grid-template-columns:1fr; }
  .folds-copy-float{ padding-left:28px; padding-right:28px; max-width:none; margin-left:0; margin-bottom:40px; }
  .folds-photos-float{ height:400px; padding:0 28px; }
  .photo-float-a{ width:70%; right:0; }
  .photo-float-b{ width:56%; right:24%; }
}

/* ===================================================================
   HOW IT WORKS — horizontal durchscrollbarer, gepinnter Abschnitt
   =================================================================== */
.steps-scroll{ position:relative; height:340vh; }
.steps-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--panel);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.steps-head{
  flex:none; width:min(38vw, 460px);
  padding:0 40px 0 max(28px, calc((100vw - var(--wrap)) / 2 + 28px));
  z-index:2;
  background:linear-gradient(90deg, var(--panel) 70%, transparent);
}
.steps-head h2{ font-size:clamp(28px,3.4vw,44px); margin-top:6px; }
.scroll-hint{ margin-top:22px; font-size:11px; color:var(--steel); letter-spacing:0.06em; }
.steps-track{
  display:flex; gap:28px; align-items:center;
  padding-right:12vw;
  will-change:transform;
}
.step-panel{
  flex:none; width:min(60vw, 480px); height:min(56vh, 420px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.step-panel-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.step-panel::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(19,32,57,0.9), rgba(19,32,57,0.35) 55%, rgba(19,32,57,0.1));
}
.step-panel-num{
  position:absolute; top:28px; left:32px; z-index:2;
  font-size:64px; font-weight:700; color:rgba(255,255,255,0.35);
  line-height:1;
}
.step-panel h3{ font-family:'Space Grotesk', sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:24px; margin-bottom:12px; position:relative; z-index:2; color:#fff; }
.step-panel p{ margin:0; font-size:14.5px; color:#D7E3EC; line-height:1.6; max-width:42ch; position:relative; z-index:2; }

/* Punkt-Indikator fürs Mobile-Karussell, siehe script.js/initStepsCarousel.
   Auf Desktop unsichtbar (Karten laufen dort per Scroll-Pinning durch). */
.steps-dots{ display:none; }
.steps-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--line); border:none; padding:0; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.steps-dot.is-active{ background:var(--signal); transform:scale(1.4); }

@media (max-width: 900px){
  .steps-scroll{ height:auto; }
  .steps-sticky{ position:static; height:auto; overflow:visible; flex-direction:column; align-items:stretch; padding:60px 0 24px; }
  .steps-head{ width:auto; padding:0 28px; background:none; margin-bottom:28px; }
  .steps-track{
    flex-direction:row; padding:0 28px 10px; transform:none !important; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .steps-track::-webkit-scrollbar{ display:none; }
  .step-panel{
    width:min(84vw, 380px); height:min(60vh, 440px); flex:none;
    scroll-snap-align:center; padding:28px;
  }
  .steps-dots{ display:flex; justify-content:center; gap:9px; margin-top:18px; }
}

/* ===================================================================
   SPECS — full-bleed Bild + schwebendes Panel
   =================================================================== */
.specs-flow{ position:relative; min-height:62vh; display:flex; align-items:center; overflow:hidden; }
.specs-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.9); }
.specs-flow::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(19,32,57,0.55), rgba(19,32,57,0.05) 55%); }
.specs-panel{
  position:relative; z-index:2;
  margin-left:max(28px, calc((100vw - var(--wrap)) / 2 + 28px));
  width:min(90vw, 420px);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  border-left:3px solid var(--volt);
  padding:36px;
  box-shadow:0 30px 60px -20px rgba(19,32,57,0.4), 0 0 60px -12px rgba(0,194,255,0.35);
  transition:background-color .25s ease;
}
html.dark .specs-panel{ background:rgba(11,22,38,0.88); }
.specs-panel .spec-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.specs-panel .spec-row:last-child{ border-bottom:none; }
.specs-panel .k{ color:var(--steel); text-transform:uppercase; font-size:11px; letter-spacing:0.04em; }
.specs-panel .v{ color:var(--ink); text-align:right; }
@media (max-width: 900px){
  .specs-flow{ min-height:auto; padding:60px 0; display:block; }
  .specs-bg{ position:static; height:280px; margin-bottom:-40px; }
  .specs-flow::after{ display:none; }
  .specs-panel{ margin:0 28px; width:auto; }
}
@media (max-width: 400px){
  .specs-panel .spec-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .specs-panel .v{ text-align:left; }
}

/* ---------- TRUST STRIP (unverändert genutzt an anderer Stelle, hier entfernt) ---------- */

/* ---------- SECTION shell (für einfachere Abschnitte) ---------- */
.section{ padding:70px 0; position:relative; z-index:2; }
.section-head{ position:relative; max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(28px, 3.6vw, 42px); }
.section-head p{ color:var(--graphite); font-size:15.5px; margin-top:16px; line-height:1.6; }

/* ---------- IN THE BOX — gestreute Anordnung ---------- */
.box-scatter{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px 18px;
  padding-top:14px;
}
.box-scatter .box-item{
  background:var(--panel);
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  display:flex; align-items:center; gap:14px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1.4), border-color .2s ease;
}
.box-scatter .box-item:nth-child(3n+1){ transform:translateY(-10px); }
.box-scatter .box-item:nth-child(3n+2){ transform:translateY(16px); }
.box-scatter .box-item:nth-child(3n){ transform:translateY(-4px); }
.box-scatter .box-item:hover{ transform:translateY(4px) scale(1.02); border-color:var(--signal); }
.box-icon{ flex:none; width:42px; height:42px; border-radius:10px; background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.box-scatter .box-item span:last-child{ font-size:14.5px; font-weight:500; }
.box-note{ margin-top:34px; font-size:12.5px; color:var(--graphite); font-family:'JetBrains Mono', monospace; }
@media (max-width: 720px){
  .box-scatter{ grid-template-columns:1fr; }
  .box-scatter .box-item{ transform:none !important; }
}

/* ---------- WHO IT'S FOR — überlappender Stapel ---------- */
.who-stack{ position:relative; display:flex; flex-direction:column; gap:0; max-width:780px; }
.who-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 32px;
  box-shadow:0 20px 40px -20px rgba(19,32,57,0.3);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.who-a{ margin-left:0; z-index:1; }
.who-b{ margin-left:8%; margin-top:-24px; z-index:2; }
.who-c{ margin-left:16%; margin-top:-24px; z-index:3; }
.who-card:hover{ transform:translateY(-6px); border-color:var(--volt); box-shadow:0 20px 40px -20px rgba(19,32,57,0.3), 0 0 40px -10px rgba(0,194,255,0.4); }
.who-card .tag{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--signal); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:12px; display:block; }
.who-card h3{ font-family:'Space Grotesk', sans-serif; text-transform:none; letter-spacing:0; font-size:19px; font-weight:700; margin-bottom:10px; }
.who-card p{ margin:0; font-size:14px; color:var(--graphite); line-height:1.6; max-width:50ch; }
@media (max-width: 720px){
  .who-b, .who-c{ margin-left:0; margin-top:16px; transform:none; }
  .who-a{ transform:none; }
}

/* ---------- SHOP / CONFIGURATOR — "Landebahn" ---------- */
.shop-landing{
  position:relative;
  background:var(--panel);
  clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%);
  padding-top:100px;
  border-top:1px solid var(--line);
}
.configurator{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start; }
.config-options{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:34px; }
.option-title{ font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--steel); margin:0 0 16px; font-weight:700; }
.option-note{ margin:14px 0 0; font-size:12.8px; color:var(--graphite); line-height:1.55; }
.pill-group{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  flex:1 1 140px; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:14px 16px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel);
  cursor:pointer; font-family:'Space Grotesk', sans-serif; text-align:left;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.pill:hover{ border-color:var(--steel); transform:translateY(-1px); }
.pill .pill-main{ font-weight:700; font-size:14.5px; color:var(--ink); }
.pill .pill-sub{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--graphite); }
.pill.is-active{ background:var(--navy); border-color:var(--volt); box-shadow:0 0 0 3px rgba(0,194,255,0.22); }
.pill.is-active .pill-main{ color:#fff; }
.pill.is-active .pill-sub{ color:var(--volt); }
.check-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); cursor:pointer; }
.option-group .check-row:first-of-type{ margin-top:16px; }
.check-row input[type="checkbox"]{ position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.check-box{ width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line); background:var(--panel); position:relative; flex:none; transition:background .15s ease, border-color .15s ease; }
.check-box::after{ content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; }
.check-row input:checked ~ .check-box{ background:var(--signal); border-color:var(--signal); }
.check-row input:checked ~ .check-box::after{ opacity:1; }
.check-row input:focus-visible ~ .check-box{ outline:2px solid var(--steel); outline-offset:2px; }
.check-label{ display:flex; flex-direction:column; gap:2px; }
.check-label strong{ font-size:14.5px; font-weight:700; }
.check-label small{ font-size:12.5px; color:var(--graphite); }
.check-price{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--steel); white-space:nowrap; }
.config-summary{ position:sticky; top:96px; background:var(--navy); color:#fff; border-radius:var(--radius); padding:30px; border:1px solid rgba(0,194,255,0.35); box-shadow:0 0 50px -14px rgba(0,194,255,0.5); }
.config-summary .option-title{ color:var(--volt); }
.summary-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; min-height:24px; }
.summary-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:#D7E3EC; }
.summary-row .price{ font-family:'JetBrains Mono', monospace; color:#fff; }
.summary-total{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; margin-bottom:20px; border-top:1px solid rgba(255,255,255,0.18); border-bottom:1px solid rgba(255,255,255,0.18); font-size:15px; font-weight:700; }
.summary-total #summary-total{ font-size:22px; color:var(--signal); }
.buy-btn{ width:100%; justify-content:center; }
.buy-btn[disabled]{ opacity:0.65; cursor:progress; transform:none !important; }
.summary-meta{ margin:14px 0 0; font-size:11px; color:#8FA6B8; text-align:center; letter-spacing:0.03em; }
.summary-error{ margin:12px 0 0; font-size:12.5px; color:#FF9B7A; text-align:center; }
@media (max-width: 980px){
  .configurator{ grid-template-columns:1fr; }
  .config-summary{ position:static; }
}
@media (max-width: 560px){
  .config-options{ padding:22px; }
  /* .pill-group wechselt hier auf flex-direction:column — die
     Hauptachse dreht sich also von horizontal auf vertikal. Die
     Basis-Regel ".pill{ flex:1 1 140px }" ist als Mindest-BREITE für die
     Reihen-Anordnung gedacht; in der Spalten-Anordnung würde dieselbe
     140px-Basis sonst zur Mindest-HÖHE (siehe .pill weiter oben) und die
     Buttons wirken riesig. Daher hier explizit zurücksetzen. */
  .pill-group{ flex-direction:column; }
  .pill{ flex:1 1 auto; }
}

/* ---------- CTA BAND — Video ---------- */
.cta-band{ position:relative; padding:120px 0; overflow:hidden; color:#fff; text-align:center; }
.cta-band-video{ background:var(--navy); }
.cta-band-video .hero-video-bg{ z-index:0; }
.cta-band .bg{ position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(19,32,57,0.55), rgba(19,32,57,0.94)); z-index:1; }
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band .eyebrow{ justify-content:center; color:var(--volt); }
.cta-band h2{ color:#fff; font-size:clamp(34px, 5vw, 58px); }
.cta-band p{ color:#C9D8E4; max-width:52ch; margin:18px auto 34px; font-size:15.5px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
footer{ position:relative; z-index:2; background:var(--navy); color:#AEC1D2; padding:60px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12); }
@media (max-width: 720px){
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .foot-tag{ max-width:none; }
}
.foot-logo{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:26px; color:#fff; letter-spacing:0.03em; display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.foot-logo .dash{ width:26px; height:3px; background:var(--signal); border-radius:2px; transform:skewX(-20deg); }
.foot-tag{ font-size:13.5px; max-width:32ch; line-height:1.6; }
footer h4{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
footer ul a{ text-decoration:none; color:#AEC1D2; font-size:13.8px; }
footer ul a:hover{ color:#fff; }
footer ul li{ font-size:13.2px; line-height:1.5; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12px; color:#7E93A6; flex-wrap:wrap; gap:10px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===================================================================
   TEXT-CLOUDS — dezente Wolken-PNGs hinter frei stehenden Textblöcken
   (ohne eigenen deckenden Panel-Hintergrund). Das .flow-plane-Icon läuft
   über die ganze Seite z-index:-1 hinter dem Content her (siehe oben) —
   bei Textblöcken ohne eigene Box scheint es sonst direkt hinter den
   Buchstaben durch, was schwer lesbar wirkt. Position/Opacity werden
   NICHT per CSS-Transition/.is-visible-Klasse animiert, sondern 1:1
   proportional zur Scroll-Position live berechnet (script.js/
   initTextClouds — gleiches Prinzip wie das .flow-plane-Icon). width/top
   unten sind nur der Ausgangszustand vor dem ersten JS-Update — sobald
   das jeweilige Bild geladen ist, vermisst initTextClouds den
   abzudeckenden Textblock direkt (inkl. Marge) und setzt width/top
   passend als Inline-Style. Das ersetzt die vorher fest geschätzten
   Prozentwerte, die bei viel Zeilenumbruch auf schmalen Screens den Text
   nicht mehr zuverlässig abdeckten.
   =================================================================== */
.text-cloud{
  position:absolute; top:50%; z-index:-1;
  width:95%; height:auto;
  pointer-events:none; user-select:none;
  opacity:0;
  will-change:transform, opacity;
}
.text-cloud-left{ left:-6%; transform:translate(-60%,-50%); }
.text-cloud-right{ right:-6%; transform:translate(60%,-50%); }
/* Die Wolken-PNGs sind fest weiss (kein Theme-Bezug) — der Text darüber
   muss also unabhängig vom Theme immer die (dunkle) Light-Mode-Farbe
   behalten, sonst ist er im Dark Mode auf der weiterhin weissen Wolke
   unlesbar. --ink/--graphite/--steel hier lokal auf die Light-Mode-Werte
   zurücksetzen, statt sie global auf hell umschalten zu lassen — wirkt
   automatisch auf Eyebrow, Titel, Fliesstext und Liste in diesen drei
   Blöcken, da alle Kind-Elemente diese Variablen referenzieren. */
html.dark .folds-copy-float,
html.dark #in-the-box .section-head,
html.dark #who-for .section-head{
  --ink:#132039;
  --graphite:#44607C;
  --steel:#0057C4;
}

/* "Selbst gestalten" (.folds-copy-float) ist deutlich länger als die
   section-head-Blöcke — eine mittig zentrierte Wolke pro Seite deckt da
   nur den mittleren Streifen ab. Deshalb hier eigene, größere Wolke oben
   (deckt die Überschrift, fliegt von links ein) und eine zweite unten
   (deckt Fließtext/Liste, fliegt von rechts ein). Ziel-X-Position beim
   Einfliegen kommt als data-end-x direkt vom <img> (siehe initTextClouds).
   =================================================================== */
.folds-copy-float .text-cloud-left{ top:22%; width:190%; }
.folds-copy-float .text-cloud-right{ top:78%; width:155%; }

/* "Lieferumfang" (#in-the-box .section-head) ebenfalls größer, damit
   mehr von Eyebrow + Überschrift abgedeckt ist. */
#in-the-box .text-cloud-left{ width:170%; }
#in-the-box .text-cloud-right{ width:170%; }

/* "Geeignet für" (#who-for .section-head) ebenfalls größer. */
#who-for .text-cloud-left{ width:170%; }
#who-for .text-cloud-right{ width:170%; }

@media (prefers-reduced-motion: reduce){
  .grid-wash, .live-dot, .btn-glow, .scroll-cue span{ animation:none !important; }
}