/*! =============================================================
    Kim Wheelz — Stylesheet

    Farben: Königsblau #305CDE · Softschwarz #1A1A1A · Softweiß #F7F5F2
    Typo:   Archivo (Display) · IBM Plex Sans (Text) · IBM Plex Mono (Daten)

    -------------------------------------------------------------
    Verwendete Fremdinhalte und ihre Lizenzen
    -------------------------------------------------------------

    SCHRIFTEN (selbst gehostet unter assets/fonts/)

    Archivo · SIL Open Font License 1.1
    Copyright 2020 The Archivo Project Authors
    https://github.com/Omnibus-Type/Archivo

    IBM Plex Sans, IBM Plex Mono · SIL Open Font License 1.1
    Copyright (c) 2017 IBM Corp. with Reserved Font Name "Plex"
    https://github.com/IBM/plex

    ICONS (als SVG-Sprite in den HTML-Dateien eingebettet)

    Lucide · ISC License
    Copyright (c) 2026 Lucide Icons and Contributors
    https://lucide.dev
    Permission to use, copy, modify, and/or distribute this software for
    any purpose with or without fee is hereby granted, provided that the
    above copyright notice and this permission notice appear in all copies.

    Sieben dieser Icons stammen aus dem Feather-Projekt und sind
    zusätzlich MIT-lizenziert · Copyright (c) 2013-present Cole Bemis
    (alert-circle, arrow-up-right, chevron-down, circle-help,
     clipboard-list, clock, x)

    Simple Icons · CC0 1.0 Universal (gemeinfrei)
    https://simpleicons.org — Instagram, TikTok
    Die Marken selbst bleiben Eigentum ihrer jeweiligen Inhaber.

    Vollständige Lizenztexte: LICENSES.md im Projektverzeichnis.
    ============================================================= */

/* ---------- 1. Schriften ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('../assets/fonts/plexsans-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('../assets/fonts/plexsans-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('../assets/fonts/plexsans-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Marke
     Der Akzent war ursprünglich Petrol (#0E4D5C); daher die Namen der
     Tokens. Inzwischen ist er Königsblau. Die Namen sind absichtlich
     stehen geblieben, weil sie an rund hundert Stellen im Stylesheet
     vorkommen — der Wert zählt, nicht der Name. */
  --petrol:       #305CDE;
  --ink:          #1A1A1A;
  --paper:        #F7F5F2;

  /* Abgeleitet. Die helleren Stufen sind nicht nach HSL-Helligkeit
     gewählt, sondern nach Kontrast auf dem Seitengrund: Blau leuchtet
     bei gleicher Helligkeit rund dreimal schwächer als das frühere
     Türkis. So stimmt die Lesbarkeit von Zahlen und Icons weiter. */
  --petrol-lit:   #5B7FEC;   /* heller — Glows, Links (5,2:1) */
  --petrol-glow:  #89A4F5;   /* Spitzlicht (7,9:1) */
  --petrol-deep:  #142661;   /* Tiefe Flächen */
  --ink-deep:     #101010;   /* durchgehender Seitengrund */

  /* Flächen auf dem Grund — nur Helligkeit, keine zweite Farbe */
  --surface:      rgba(247, 245, 242, 0.038);
  --surface-hi:   rgba(247, 245, 242, 0.065);

  /* Text — eine Skala, kein Hell/Dunkel-Paar mehr */
  --text:         #F7F5F2;
  --text-mute:    rgba(247, 245, 242, 0.66);
  --text-faint:   rgba(247, 245, 242, 0.55);

  --line:         rgba(247, 245, 242, 0.10);
  --line-strong:  rgba(247, 245, 242, 0.16);

  /* Typo */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* Mono nur noch für echte Zahlen und Datenlabels — Fließtext und
     Hinweiszeilen laufen in der Textschrift. */
  --f-mono:    'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Maße */
  --wrap:      1180px;
  --wrap-slim: 780px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --sec-y:     clamp(5rem, 11vw, 9.5rem);
  --sec-y-cta: clamp(1.75rem, 3.5vw, 2.75rem);  /* vor einem CTA-Band */
  --pad-card:  clamp(1.5rem, 1.15rem + 1vw, 2rem);
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 3. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  background: var(--ink-deep);
  color: var(--text);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--petrol-glow);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--petrol); color: var(--paper); }

/* ---------- 4. Typo-Skala ---------- */
h1, h2, h3, .h-display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.05rem, 1.5rem + 2.3vw, 3.45rem);
  font-weight: 850;
  font-stretch: 116%;
}
h2 {
  font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.85rem);
}
h3 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

p { text-wrap: pretty; }

/* Kicker über Überschriften — Mono, weil er Ordnung markiert */
.kicker {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Abstand für die feste Navigation über jedem Sprungziel */
:target,
section[id],
main[id] {
  scroll-margin-top: clamp(4.5rem, 9vh, 6.25rem);
}

/* ---------- 5. Layout-Helfer ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--slim { max-width: var(--wrap-slim); }

.section { padding-block: var(--sec-y); position: relative; z-index: 1; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* clip, nicht hidden — hidden erzeugt einen Scroll-Container */
.section--clip { overflow-x: clip; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.62;
  color: var(--text-mute);
  max-width: 62ch;
}

.stack > * + * { margin-top: 1.15em; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--petrol);
  color: var(--paper);
  border-radius: var(--r-sm);
  transition: top 0.2s;
}

.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------------
   Durchgehendes Licht

   Die gesamte Seite liegt auf EINER Lichtebene über die volle
   Dokumenthöhe. Kein Abschnitt hat einen eigenen Hintergrund und
   keine eigene Dekoration — damit kann zwischen zwei Abschnitten
   gar keine Kante entstehen. Die Akzente sind über die Seitenhöhe
   in Prozent verteilt, laufen also beim Scrollen ineinander.
   ------------------------------------------------------------------ */
.page-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Acht weiche Akzente über die Seitenhöhe verteilt. Der letzte steigt
     ganz dezent vom unteren Seitenrand auf und liegt damit im Footer. */
  background:
    radial-gradient(78% 14% at 16% 4%,   rgba(91, 127, 236, 0.05), transparent 84%),
    radial-gradient(72% 13% at 88% 12%,  rgba(48, 92, 222, 0.06),   transparent 84%),
    radial-gradient(74% 12% at 10% 25%,  rgba(91, 127, 236, 0.08), transparent 80%),
    radial-gradient(68% 11% at 84% 38%,  rgba(48, 92, 222, 0.12),   transparent 80%),
    radial-gradient(76% 12% at 20% 52%,  rgba(91, 127, 236, 0.07), transparent 80%),
    radial-gradient(64% 10% at 88% 65%,  rgba(48, 92, 222, 0.11),   transparent 80%),
    radial-gradient(72% 11% at 14% 78%,  rgba(91, 127, 236, 0.07), transparent 80%),
    radial-gradient(104% 8% at 50% 100%, rgba(48, 92, 222, 0.11),   transparent 82%);
}

/* Bewegte Flächen — nur im obersten Bildschirm, dort trägt die Bewegung */
.page-light span {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(64px) saturate(118%);
  will-change: transform;
}
.page-light span:nth-child(1) {
  width: 52vw; height: 52vh; left: 0%;  top: 2vh;
  opacity: 0.1;
  background: radial-gradient(circle, var(--petrol-lit) 0%, transparent 72%);
  animation: drift-a 26s ease-in-out infinite;
}
.page-light span:nth-child(2) {
  width: 48vw; height: 50vh; right: 2%; top: 12vh;
  opacity: 0.09;
  background: radial-gradient(circle, var(--petrol) 0%, transparent 72%);
  animation: drift-b 32s ease-in-out infinite;
}
.page-light span:nth-child(3) {
  width: 40vw; height: 40vh; left: 28%; top: 44vh;
  background: radial-gradient(circle, var(--petrol-glow) 0%, transparent 68%);
  opacity: 0.05;
  animation: drift-c 38s ease-in-out infinite;
}

/* Feines Korn — fixiert, deckt nur das Sichtfeld statt der ganzen Seite */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(9%, 7%, 0) scale(1.12); }
  66%      { transform: translate3d(-6%, 4%, 0) scale(0.94); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-11%, 9%, 0) scale(0.9); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
  40%      { transform: translate3d(13%, -8%, 0) scale(1.15); }
  75%      { transform: translate3d(-8%, -3%, 0) scale(1.02); }
}

/* Einheitlicher Kopf einer Sektion: Badge → Überschrift → Einleitung.
   Ersetzt die vorherigen Inline-Abstände im Markup. */
.section__head h2,
.story__text h2,
.stories__intro h2 {
  margin-block: 1.35rem 1.1rem;
}
/* Nur die direkten Kinder zurücksetzen — sonst überschreibt diese Regel
   auch den Absatzabstand innerhalb von .stack (höhere Gewichtung). */
.section__head > .lede,
.section__head > .stack {
  margin-top: 0;
}

/* Abbindender Satz am Ende einer Sektion */
.section__kicker {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Erster Inhaltsblock nach dem Sektionskopf */
.cards,
.trust,
.timeline,
.faq {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* ---------- 6. Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 10px;
  border-radius: 100px;
  /* Deckende Basis, damit der halbtransparente Verlauf auch auf hellem
     Grund trägt — die Optik der Vorlage bleibt erhalten. */
  background-color: var(--ink);
  background-image: linear-gradient(rgba(34, 34, 34, 0.5), var(--petrol));
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.3;
  text-align: left;
}
.badge svg,
.badge img { width: 18px; height: 18px; flex: none; }
.badge svg { stroke-width: 2.2; }

/* ---------- 7. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn__glow {
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(100deg, var(--petrol) 0%, var(--petrol-lit) 42%, var(--petrol-glow) 70%, var(--petrol) 100%);
  opacity: 0.55;
  filter: blur(9px);
  transition: opacity 0.45s var(--ease);
}
/* Heller Streifen, der von links nach rechts über den Knopf läuft */
.btn__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: btn-glanz 5s linear infinite;
}
/* Der Streifen zieht einmal durch und bleibt dann rechts außerhalb
   stehen. Der Rücksprung passiert beim Schleifenwechsel und ist
   deshalb nicht zu sehen — ein Keyframe zurück würde ihn sichtbar
   wieder nach links wandern lassen. */
@keyframes btn-glanz {
  0%        { transform: translateX(-120%); }
  35%       { transform: translateX(120%); }
  100%      { transform: translateX(120%); }
}

.btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.55rem; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease); }

.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__glow { opacity: 1; }
.btn:hover svg { transform: translate(2px, -2px); }

.btn--lg { padding: 1.15rem 2rem; font-size: 1.02rem; }

/* Auf hellem Grund */
/* --onlight bleibt als Alias bestehen, damit vorhandenes Markup gültig ist */
.btn--onlight { background: var(--ink); }

/* Zurückhaltend */
.btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.btn--ghost:hover { opacity: 1; }
.btn--ghost .btn__glow { display: none; }

/* Inline-CTA-Band zwischen den Sektionen */
/* Das CTA-Band gehört zur Sektion darüber — oben also eng, unten
   der normale Abstand zur nächsten Sektion. */
.cta-inline {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.section:has(+ .cta-inline),
.gallery:has(+ .cta-inline) {
  padding-bottom: var(--sec-y-cta);
}
.cta-inline__note {
  margin-top: 0.9rem;
  font-family: var(--f-body);
  font-size: 0.88rem;
  color: var(--text-mute);
}

/* ---------- 7c. Kopfzeilen-Knopf mit wanderndem Rahmen ----------
   Der Rahmen ist ein Konus-Verlauf, dessen Winkel animiert wird. Damit
   ein Winkel überhaupt animierbar ist, muss er über @property als
   solcher deklariert sein — sonst behandelt der Browser ihn als Text
   und springt statt zu drehen.

   Aufbau nach Vorlage: Fläche über padding-box, Rahmen über border-box,
   dazu Punktmuster, Innenschimmer und ein atmendes Leuchten beim Hover.
   ------------------------------------------------------------------ */
@property --kw-winkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --kw-versatz {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --kw-anteil {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --kw-schein {
  syntax: "<color>";
  initial-value: #F7F5F2;
  inherits: false;
}

.btn--shiny {
  --grund:       var(--ink);
  --grund-fein:  #232020;
  --leuchte:     var(--petrol-lit);
  --leuchte-fein: var(--petrol-glow);
  --takt:        3s;
  --kantenmass:  2px;
  --uebergang:   800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--paper);
  background:
    linear-gradient(var(--grund), var(--grund)) padding-box,
    conic-gradient(
      from calc(var(--kw-winkel) - var(--kw-versatz)),
      transparent,
      var(--leuchte) var(--kw-anteil),
      var(--kw-schein) calc(var(--kw-anteil) * 2),
      var(--leuchte) calc(var(--kw-anteil) * 3),
      transparent calc(var(--kw-anteil) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--grund-fein);
  transition: var(--uebergang);
  transition-property: --kw-versatz, --kw-anteil, --kw-schein;
}

/* Der eigene Glanzstreifen und das Akzent-Leuchten entfallen hier.
   Ebenso der Pfeil-Versatz aus .btn:hover svg — die Vorlage kennt beim
   Überfahren nur den wandernden Rahmen. */
.btn--shiny .btn__glow,
.btn--shiny .btn__shine { display: none; }
.btn--shiny:hover { transform: none; }
.btn--shiny:hover svg { transform: none; }
.btn--shiny:active { translate: 0 1px; }

.btn--shiny::before,
.btn--shiny::after,
.btn--shiny .btn__label::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

/* Punktmuster, das der Rahmendrehung folgt */
.btn--shiny::before {
  --feld: calc(100% - var(--kantenmass) * 3);
  --punkt: 2px;
  --raster: calc(var(--punkt) * 2);
  width: var(--feld);
  height: var(--feld);
  background: radial-gradient(
    circle at var(--punkt) var(--punkt),
    var(--paper) calc(var(--punkt) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--raster) var(--raster);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--kw-winkel) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--kw-winkel) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit;
  opacity: 0.35;
  z-index: -1;
}

/* Innenschimmer, dreht sich mit */
.btn--shiny::after {
  --lauf: kw-schimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--leuchte), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: 0.55;
}

/* Bewusst NICHT positioniert: sonst bezieht sich das Leuchten unten
   auf das Label statt auf den Knopf, passt hinein und zeigt seine
   Ecken als Viereck. Unpositioniert wird es größer als der Knopf und
   der runde Rand schneidet die Ecken weg. z-index greift trotzdem,
   weil .btn ein Flex-Container ist. */
.btn--shiny .btn__label { position: static; z-index: 1; }

/* Atmendes Leuchten von unten, nur beim Überfahren */
.btn--shiny .btn__label::before {
  --feld: calc(100% + 1rem);
  width: var(--feld);
  height: var(--feld);
  box-shadow: inset 0 -1ex 2rem 4px var(--leuchte);
  opacity: 0;
  transition: opacity var(--uebergang);
  animation: calc(var(--takt) * 1.5) kw-atmen linear infinite;
}

/* Zwei Läufe übereinander: der zweite ruht und startet erst beim Hover */
.btn--shiny,
.btn--shiny::before,
.btn--shiny::after {
  --lauf: kw-drehung linear infinite;
  animation: var(--lauf) var(--takt),
             var(--lauf) calc(var(--takt) / 0.4) reverse paused;
  animation-composition: add;
}
.btn--shiny::after { --lauf: kw-schimmer linear infinite; }

.btn--shiny:hover,
.btn--shiny:focus-visible {
  --kw-anteil: 20%;
  --kw-versatz: 95deg;
  --kw-schein: var(--leuchte-fein);
}
.btn--shiny:hover,
.btn--shiny:hover::before,
.btn--shiny:hover::after,
.btn--shiny:focus-visible,
.btn--shiny:focus-visible::before,
.btn--shiny:focus-visible::after {
  animation-play-state: running;
}
.btn--shiny:hover .btn__label::before,
.btn--shiny:focus-visible .btn__label::before { opacity: 1; }

@keyframes kw-drehung  { to { --kw-winkel: 360deg; } }
@keyframes kw-schimmer { to { rotate: 360deg; } }
@keyframes kw-atmen    { from, to { scale: 1; } 50% { scale: 1.2; } }

/* ---------- 7b. Liquid-Glass-Knopf (nur Abschluss-CTA) ----------
   Nach dem Vorbild der Vorlage: keine Füllung, sondern eine Schale aus
   gestapelten Innenschatten, die Kanten wie geschliffenes Glas wirken
   lässt, dazu eine brechende Ebene über dem Hintergrund.
   ------------------------------------------------------------------ */
.btn--liquid {
  background: transparent;
  border: 0;
  overflow: visible;
  transition: transform 0.3s var(--ease);
}
.btn--liquid:hover { transform: scale(1.05); }
.btn--liquid:active { transform: scale(0.99) translateY(1px); }

/* Glanzstreifen, Leuchten und Pfeil-Versatz entfallen hier — die
   Vorlage kennt beim Überfahren nur das Skalieren. */
.btn--liquid .btn__glow,
.btn--liquid .btn__shine { display: none; }
.btn--liquid:hover svg { transform: none; }

/* Schale: Lichtkanten oben links, kräftige Kante unten rechts */
.btn__shell {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.09),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(0, 0, 0, 0.15);
}

/* Brechende Ebene. Die SVG-Verzerrung wird nicht von jedem Browser
   im backdrop-filter gezeichnet — Unschärfe und Sättigung stehen
   deshalb als tragfähige Grundlage davor. */
.btn__refract {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  pointer-events: none;
  z-index: 0;
  -webkit-backdrop-filter: blur(3px) saturate(150%);
  backdrop-filter: blur(3px) saturate(150%);
}
@supports (backdrop-filter: url("#kw-glas")) {
  .btn__refract {
    -webkit-backdrop-filter: url("#kw-glas") blur(1px) saturate(150%);
    backdrop-filter: url("#kw-glas") blur(1px) saturate(150%);
  }
}

.btn--liquid .btn__label { z-index: 2; }

/* ---------- 9. Navigation ---------- */
.nav {
  position: fixed;
  inset: 0px 0px auto;
  z-index: 100;
  padding-block: 1rem;
  transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease), border-color 0.35s var(--ease), padding 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(16, 16, 16, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
  padding-block: 0.6rem;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--paper);
  flex: 0 0 auto;
}

/* Der viewBox ist auf die Buchstaben zugeschnitten, das Seitenverhältnis
   liegt damit bei 2,03 : 1. Ein quadratischer Kasten würde die Zeichnung
   wieder auf die Höhe herunterrechnen — deshalb hier passend breit. */
.nav__logo svg {
  width: 44px;
  height: 22px;
  fill: currentcolor;
}

.nav__logo-text {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Pillenleiste mit gleitendem Marker: der Marker parkt beim aktiven
   Abschnitt und wandert beim Überfahren zum jeweiligen Punkt. */
.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 4px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(247, 245, 242, 0.04);
}

.nav__marker {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(150deg, rgba(91, 127, 236, 0.55), rgba(48, 92, 222, 0.75));
  border: 1px solid rgba(137, 164, 245, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: left 0.34s var(--ease), width 0.34s var(--ease), opacity 0.25s var(--ease);
}
.nav__links.is-hovered .nav__marker { opacity: 1; }

.nav__links a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: 100px;
  font-size: 0.85rem;
  color: var(--text-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.nav__links a:hover,
.nav__links a.is-active {
  color: var(--text);
}

.nav__cta {
  flex: 0 0 auto;
  padding: 0.7rem 1.15rem;
  font-size: 0.85rem;
}

.nav__toggle {
  display: none;
  padding: 0.5rem;
  color: var(--paper);
  border-radius: var(--r-sm);
}

/* Beide Symbole teilen sich dieselbe Rasterzelle, damit der Knopf beim
   Wechsel nicht springt. Gedreht wird gegenläufig — die Striche drehen
   raus, das Kreuz dreht rein. */
.nav__toggle svg {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.nav__kreuz { opacity: 0; transform: rotate(-45deg); }

.nav__toggle[aria-expanded="true"] .nav__balken { opacity: 0; transform: rotate(45deg); }

.nav__toggle[aria-expanded="true"] .nav__kreuz { opacity: 1; transform: none; }

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vh, 8rem) clamp(3rem, 6vh, 4.5rem);
  color: var(--text);
}

.hero > .wrap { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-block: 1.35rem 1.2rem; }

.hero__sub {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 46ch;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 46ch;
}

.hero__trust strong { color: var(--paper); font-weight: 600; }

.hero__trust svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--petrol-glow);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.6rem;
  margin-top: 1.9rem;
}

.vsl {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(48, 92, 222, 0.5), rgba(16, 16, 16, 0.85)),
    var(--ink);
  display: grid;
  place-items: center;
  gap: 0.9rem;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 32px 70px -30px;
}

.vsl__inner {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}

.vsl__play {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(247, 245, 242, 0.1);
  border: 1px solid rgba(247, 245, 242, 0.24);
  backdrop-filter: blur(6px);
}

.vsl__play::after {
  content: "";
  width: 0px;
  height: 0px;
  margin-left: 5px;
  border-left: 17px solid var(--paper);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.vsl__label {
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ---------- 11. Spotlight-Karten (Häufige Probleme) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.15rem;
}

/* Karten unter "Häufige Probleme" und "Warum es funktioniert" — eine
   gemeinsame Regel, damit beide nicht auseinanderlaufen. Der Lichtkegel
   folgt dem Zeiger; --x/--y setzt das JavaScript in lokalen Koordinaten. */
.glow-card,
.trust__item {
  --border-size: 1px;
  --spot: 300px;
  --radius: 18px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--pad-card);
  border-radius: var(--radius);
  border: var(--border-size) solid rgba(247, 245, 242, 0.09);
  background-color: rgba(247, 245, 242, 0.035);
  background-image: radial-gradient(
    var(--spot) var(--spot) at calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
    rgba(137, 164, 245, 0.14), transparent 70%
  );
  background-repeat: no-repeat;
  transition: border-color 0.3s var(--ease);
}

.glow-card::before,
.trust__item::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: inherit;
  background-image: radial-gradient(
    calc(var(--spot) * 0.7) calc(var(--spot) * 0.7) at calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
    var(--petrol-glow), transparent 72%
  );
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

/* Icon-Kacheln: eine Regel für alle drei Sektionen. */
.glow-card__icon,
.trust__icon,
.timeline__zahl {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 1.2rem;
  background: linear-gradient(150deg, rgba(91, 127, 236, 0.3), rgba(48, 92, 222, 0.18));
  border: 1px solid rgba(137, 164, 245, 0.22);
  color: var(--petrol-glow);
}

.glow-card__icon svg,
.trust__icon svg,
.timeline__node svg {
  width: 21px;
  height: 21px;
  animation: icon-wackeln 3s ease-in-out infinite;
}

/* Leichtes Kippen und Wachsen, wie auf der PA-Seite */
@keyframes icon-wackeln {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.1) rotate(5deg); }
}

.glow-card h3,
.trust__item h3 { margin-bottom: 0.75rem; }

.glow-card p,
.trust__item p {
  color: var(--text-mute);
  font-size: 0.97rem;
  line-height: 1.62;
}

/* ---------- 12. Story + Sticky-Video ---------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.02fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.story__text { max-width: 60ch; }

.story__text h2 { margin-block: 1.4rem 1.6rem; }

.story__text p:not(.badge) { margin-bottom: 1.15rem; color: var(--text-mute); }

.story__text p.is-lead {
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 500;
}

.story__pull {
  margin-block: 2.25rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--petrol-lit);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text);
}

.story__sticky { position: sticky; top: clamp(5.5rem, 12vh, 7.5rem); }

.transform {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  box-shadow: rgba(20, 38, 97, 0.55) 0px 30px 60px -34px;
}

.transform__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.transform__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ersatz für das Video: dieselbe Fläche, wird beim Scrollen Bild für
   Bild ausgetauscht. Liegt über dem Video und unter dem Standbild — das
   blendet sich weg, sobald entweder das Video oder die Einzelbilder
   tragen. */
.transform__frames {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.transform__video.is-frames .transform__frames { opacity: 1; }

.transform__poster {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s var(--ease);
}

.transform__video.is-ready .transform__poster { opacity: 0; }

.transform__meter {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 2.5rem 1.25rem 1.15rem;
  background: linear-gradient(transparent, rgba(7, 11, 24, 0.9) 55%);
  color: var(--paper);
}

.transform__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
}

.transform__kg {
  font-family: var(--f-display);
  font-weight: 850;
  font-stretch: 118%;
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.transform__kg span {
  font-size: 0.42em;
  margin-left: 0.12em;
  letter-spacing: 0px;
}

.transform__years {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 245, 242, 0.82);
  text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px;
  text-align: right;
}

.transform__rail {
  position: relative;
  height: 3px;
  margin-top: 0.85rem;
  border-radius: 3px;
  background: rgba(247, 245, 242, 0.16);
  overflow: hidden;
}

.transform__fill {
  position: absolute;
  inset: 0px auto 0px 0px;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--petrol), var(--petrol-glow));
}





/* ---------- 13. Warum es funktioniert ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 1.15rem;
}

/* ---------- 14. Erfolgsgeschichten (angeheftet) ---------- */
.stories { padding-block: 0px; }

/* Höhe der Bahn = ein Bildschirm für die Bühne + ein Schritt je Karte.
   --story-count muss der Kartenzahl entsprechen. */
.stories__track {
  --story-step: 220px;
  --story-count: 4;
  position: relative;
  height: calc(100vh + var(--story-count) * var(--story-step));
}

.stories__stage {
  position: sticky;
  top: 0px;
  height: 100vh;
  padding-top: clamp(3.5rem, 8vh, 5.5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.stories__grid {
  display: grid;
  grid-template-columns: minmax(0px, 0.92fr) minmax(0px, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

.stories__intro h2 { margin-block: 1.35rem 1.1rem; }

.stories__intro .lede { max-width: 44ch; }

.stories__dots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
}

.stories__dot {
  width: 10px;
  height: 10px;
  padding: 0px;
  border-radius: 100px;
  background: var(--line-strong);
  transition: width 0.45s var(--ease), background 0.45s var(--ease);
}

.stories__dot:hover { background: var(--petrol-lit); }

.stories__dot.is-active { width: 40px; background: var(--petrol-glow); }

.stories__hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--text-faint);
  transition: opacity 0.4s var(--ease);
}

.stories__hint svg {
  width: 15px;
  height: 15px;
  animation: 2.4s ease-in-out 0s infinite normal none running nudge;
}

.stories__track.is-last .stories__hint { opacity: 0; }

@keyframes nudge {
  0%,
  100% { transform: translateY(0px); }
  50% { transform: translateY(3px); }
}

.stories__deck { position: relative; min-height: clamp(340px, 46vh, 440px); }

.story-card {
  position: absolute;
  inset: 0px;
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: rgba(0, 0, 0, 0.8) 0px 30px 60px -34px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateX(46px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  z-index: 0;
}

.story-card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
}

.story-card.is-past { transform: translateX(-46px) scale(0.94); }

.story-card--coach {
  background: linear-gradient(150deg, rgba(48, 92, 222, 0.85), rgba(20, 38, 97, 0.92));
  border-color: rgba(137, 164, 245, 0.28);
}

.story-card__metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.story-card__from { color: var(--text-faint); }

.story-card__to { color: var(--text); }

.story-card__arrow {
  width: 17px;
  height: 17px;
  color: var(--petrol-glow);
  transform: rotate(45deg);
  align-self: center;
}

.story-card__delta {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.6rem;
  border-radius: 100px;
  background: rgba(137, 164, 245, 0.14);
  border: 1px solid rgba(137, 164, 245, 0.26);
  color: var(--petrol-glow);
}

.story-card--coach .story-card__delta {
  background: rgba(247, 245, 242, 0.14);
  border-color: rgba(247, 245, 242, 0.28);
  color: var(--paper);
}

.story-card--coach .story-card__arrow { color: var(--paper); }

.story-card__span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.story-card--coach .story-card__span { color: rgba(247, 245, 242, 0.66); }

.story-card__quote {
  position: relative;
  flex: 1 1 0%;
  margin: 1.5rem 0px 0px;
  padding-left: 2.1rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.36;
  letter-spacing: -0.015em;
  color: var(--text);
}

.story-card__mark {
  position: absolute;
  left: 0px;
  top: 0.1em;
  width: 22px;
  height: 22px;
  color: var(--petrol-glow);
  opacity: 0.6;
}

.story-card--coach .story-card__mark { color: var(--paper); opacity: 0.6; }

.story-card__rule {
  height: 1px;
  border: 0px;
  margin: 1.5rem 0px 1.25rem;
  background: var(--line-strong);
}

.story-card--coach .story-card__rule { background: rgba(247, 245, 242, 0.26); }

.story-card__who {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.story-card__avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(91, 127, 236, 0.16);
  border: 1px solid rgba(137, 164, 245, 0.24);
  color: var(--petrol-glow);
}

.story-card__avatar svg { width: 21px; height: 21px; }

.story-card__avatar--photo { background: none; border-color: rgba(247, 245, 242, 0.3); }

.story-card__avatar--photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.story-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.story-card__id {
  display: grid;
  gap: 0.15rem;
  min-width: 0px;
}

.story-card__id strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.story-card__id span {
  font-family: var(--f-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-mute);
}

.story-card--coach .story-card__id span { color: rgba(247, 245, 242, 0.78); }




/* ---------- 15. Bildergalerien (Alltag / Bühne) ----------
   Vier Bilder auf einem Kreis. Der Ring dreht sich mit dem Scrollen,
   im Stillstand langsam weiter. Unter 720 px fällt die räumliche
   Darstellung weg — dort ist eine wischbare Reihe angenehmer.
   ------------------------------------------------------------------ */
.gallery {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.gallery__stage {
  --card-w: clamp(180px, 22vw, 290px);
  --card-h: calc(var(--card-w) * 4 / 3);
  --r: clamp(215px, 27vw, 380px);
  position: relative;
  height: calc(var(--card-h) + clamp(2rem, 6vw, 5rem));
  perspective: 1700px;
  perspective-origin: 50% 45%;
  cursor: grab;
  touch-action: pan-y;      /* senkrecht scrollen bleibt möglich */
  user-select: none;
}
.gallery__stage.is-dragging { cursor: grabbing; }
.gallery__stage img { pointer-events: none; }

.gallery__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.gallery__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.85);
  transform: rotateY(var(--a)) translateZ(var(--r));
  /* kein backface-visibility: die hinteren Karten sollen sichtbar
     bleiben und nur über die Deckkraft zurücktreten */
  transition: opacity 0.35s linear;
}

.gallery__item picture { display: block; width: 100%; height: 100%; }

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* ---------- 16. Vorgehensweise — Zeitstrahl ---------- */
/* Mittige Achse, Karten wechselseitig links und rechts, dazwischen der
   Knoten mit dem Icon. Die Karten kippen gemeinsam zum Zeiger — das JS
   setzt --kipp-x/--kipp-y am .timeline-Element, das Vorzeichen dreht sich
   je Seite. Die Achse füllt sich am Scroll-Fortschritt (--tl-fortschritt).
   Fläche, Rahmen und Lichtkegel der Karte kommen aus der gemeinsamen
   Regel bei .glow-card — hier steht nur, was den Zeitstrahl ausmacht. */
.timeline {
  --tl-spur:    clamp(4.5rem, 7vw, 6rem);   /* Gasse: mindestens Knoten + Ring (68 px) */
  --tl-knoten:  54px;
  --tl-neigung: 3deg;                        /* größter Kippwinkel */
  position: relative;
  display: grid;
  row-gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Achse — an den Enden ausgeblendet, damit keine harte Kante entsteht */
.timeline__spine {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(
    rgba(137, 164, 245, 0) 0%,
    rgba(137, 164, 245, 0.2) 7%,
    rgba(137, 164, 245, 0.2) 93%,
    rgba(137, 164, 245, 0) 100%
  );
  pointer-events: none;
}

.timeline__fill {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(var(--tl-fortschritt, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(var(--petrol-lit), var(--petrol-glow));
  box-shadow: 0px 0px 14px rgba(137, 164, 245, 0.45);
}

/* Ungerade Karten links, gerade rechts. Eine einzige Rasterspalte, die
   Karte nimmt darin die halbe Breite und wird an den Rand gestellt — mit
   zwei echten Spalten würden zwei Karten in dieselbe Zeile rutschen und
   ihre Knoten übereinander liegen. */
.timeline__item {
  position: relative;
  width: calc(50% - var(--tl-spur) / 2);
  justify-self: start;
  --tl-seite: 1;
}

.timeline__item:nth-of-type(even) {
  justify-self: end;
  --tl-seite: -1;
}

/* Knoten sitzt in der Gasse, also eine halbe Spurbreite neben der Karte */
.timeline__node {
  position: absolute;
  top: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  right: calc(var(--tl-spur) / -2);
  transform: translateX(50%);
  z-index: 2;
  width: var(--tl-knoten);
  height: var(--tl-knoten);
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Deckende Basis: der halbtransparente Verlauf allein würde die Achse
     durch den Knoten hindurch zeigen. background-color, nicht die Kurzform
     — die würde das background-image gleich wieder löschen. */
  background-color: var(--ink-deep);
  background-image: linear-gradient(150deg, rgba(91, 127, 236, 0.42), rgba(48, 92, 222, 0.3));
  border: 1px solid rgba(137, 164, 245, 0.28);
  color: var(--petrol-glow);
  /* Der erste Schatten stanzt den Knoten aus der Achse aus */
  box-shadow: 0px 0px 0px 7px var(--ink-deep), 0px 0px 22px rgba(137, 164, 245, 0.16);
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.timeline__item:nth-of-type(even) .timeline__node {
  right: auto;
  left: calc(var(--tl-spur) / -2);
  transform: translateX(-50%);
}

.timeline__node svg { width: 22px; height: 22px; }

.timeline__item:hover .timeline__node,
.timeline__item:focus-within .timeline__node {
  border-color: rgba(137, 164, 245, 0.6);
  box-shadow: 0px 0px 0px 7px var(--ink-deep), 0px 0px 30px rgba(137, 164, 245, 0.4);
}

/* Fläche und Rahmen standen vorher in der gemeinsamen Regel bei
   .glow-card — die brachte aber den Lichtkegel mit, der hier zu viel
   war. Deshalb jetzt eigenständig.
   Neigung: rotateY dreht seitenverkehrt, damit beide Spalten zum
   Zeiger schauen statt voneinander weg. */
.timeline__card {
  position: relative;
  overflow: hidden;
  padding: var(--pad-card);
  border-radius: 18px;
  border: 1px solid rgba(247, 245, 242, 0.09);
  background-color: rgba(247, 245, 242, 0.035);
  transform:
    perspective(1000px)
    rotateY(calc(var(--kipp-x, 0) * var(--tl-seite, 1) * var(--tl-neigung)))
    rotateX(calc(var(--kipp-y, 0) * -1 * var(--tl-neigung)));
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease), translate 0.3s var(--ease),
              border-color 0.3s var(--ease);
}

/* Anheben beim Überfahren, leicht von der Achse weg */
.timeline__item:hover .timeline__card {
  translate: calc(var(--tl-seite, 1) * -6px) -6px;
  border-color: rgba(137, 164, 245, 0.34);
}

/* Zahlenkachel: Aussehen und Abstand aus der gemeinsamen Icon-Regel oben,
   aber ohne das Wackeln — das hängt dort an den svg-Kindern, eine Zahl
   ist keins. */
.timeline__zahl {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.timeline__card h3 { margin-bottom: 0.75rem; }

.timeline__card p {
  margin: 0px;
  color: var(--text-mute);
  font-size: 0.97rem;
  line-height: 1.62;
}

/* Fortschrittsbalken am Kartenfuß */
.timeline__bar {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--petrol-lit), var(--petrol-glow));
  transition: width 0.5s var(--ease);
}

.timeline__item:hover .timeline__bar,
.timeline__item:focus-within .timeline__bar { width: 100%; }

/* Einblenden von der jeweiligen Seite statt nur von unten */
.timeline__item.reveal { transform: translate3d(calc(var(--tl-seite, -1) * -34px), 22px, 0px); }

.timeline__item.reveal.is-in { transform: none; }

/* ---------- 17. FAQ ---------- */
/* Aufbau wie auf der PA-Seite: jede Frage ein eigener Kasten mit Rahmen,
   leicht aufgehellter Fläche und 10 px Abstand, dahinter ein schräger
   Lichtschein. Die Vorlage clippt den Schein am Listenkasten — hier läuft
   er frei aus, sonst entstünde genau die harte Kante, die es auf dieser
   Seite nirgends geben soll. Seitlich hält .section--clip ihn im Rahmen. */
.faq { position: relative; }

.faq::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(837px, 100%);
  height: 300px;
  transform: translate(-50%, -50%) rotate(-24.7deg);
  background: radial-gradient(ellipse at center,
    rgba(91, 127, 236, 0.42) 0%,
    rgba(16, 16, 16, 0.15) 55%,
    rgba(16, 16, 16, 0) 100%);
  opacity: 0.32;
  pointer-events: none;
}

.faq__item {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.faq__item:last-child { margin-bottom: 0px; }

.faq__item:hover { border-color: var(--line-strong); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.faq__q svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--petrol-glow);
  transition: transform 0.35s var(--ease);
}

.faq__item.is-open .faq__q svg { transform: rotate(180deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility linear 0.4s;
}

.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }

.faq__a p {
  padding: 0px 1.5rem 1.4rem;
  color: var(--text-mute);
  max-width: 68ch;
}

.faq__a p.is-pending {
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--petrol-glow);
}

/* ---------- 18. Abschluss-CTA ----------
   Kasten mit Akzentfarbe in zwei gegenüberliegenden Ecken, dazu das
   Logo-Icon schräg im Hintergrund. Nach dem Vorbild der PA-Seite.
   ------------------------------------------------------------------ */
.close {
  position: relative;
  z-index: 1;
  color: var(--text);
}

.close__box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: fit-content;
  max-width: min(100%, 900px);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  background: linear-gradient(
    149deg,
    var(--petrol) 0%,
    rgba(16, 16, 16, 0.8) 29%,
    rgba(16, 16, 16, 0.8) 74%,
    var(--petrol) 100%
  );
  text-align: center;
}

/* Logo-Icon als Wasserzeichen */
.close__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Hier stand 150 %, das war aber wirkungslos: die Reset-Regel
     "img, svg, video { max-width: 100% }" deckelt jede Breite darüber.
     Seit der viewBox auf die Buchstaben zugeschnitten ist, füllt die
     Zeichnung diese 100 % auch wirklich aus — gedreht ragt sie über die
     Kanten und wird beschnitten, wie gedacht. Für mehr müsste hier
     zusätzlich max-width: none stehen. */
  width: 100%;
  aspect-ratio: 2268.31 / 1119.09;
  transform: translate(-50%, -50%) rotate(15deg);
  color: var(--paper);
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

.close h2 {
  max-width: 16ch;
  margin-inline: auto;
  margin-block: 1.35rem 1.1rem;
  font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3.1rem);
}

.close__sub {
  margin-inline: auto;
  max-width: 42ch;
  font-size: clamp(1.02rem, 1rem + 0.35vw, 1.18rem);
  color: var(--text-mute);
}

.close__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* ---------- 19. Footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  color: var(--text-mute);
  overflow: hidden;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.footer > * { position: relative; z-index: 2; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}

.footer__brand svg {
  width: 150px;
  height: auto;
  fill: var(--paper);
  margin-bottom: 1.1rem;
}

.footer__brand p {
  font-size: 0.93rem;
  max-width: 34ch;
  line-height: 1.65;
}

.footer h4 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 1rem;
}

.footer__links {
  display: grid;
  gap: 0.7rem;
  font-size: 0.93rem;
}

.footer__links a { text-decoration: none; transition: color 0.2s; }

.footer__links a:hover { color: var(--petrol-glow); }

.footer__contact {
  display: grid;
  gap: 0.85rem;
  font-size: 0.93rem;
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Kontaktzeilen: Icon sitzt in einem eigenen Kästchen (Vorbild PA) */
.footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  border: 1px solid rgba(137, 164, 245, 0.28);
  background: rgba(48, 92, 222, 0.28);
  color: var(--petrol-glow);
}

.footer__contact svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.footer__contact a { text-decoration: none; transition: color 0.2s; }

.footer__contact a:hover { color: var(--petrol-glow); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
}

.footer__social { display: flex; gap: 0.4rem; }

.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}

.footer__social a:hover {
  color: var(--petrol-glow);
  border-color: var(--petrol-lit);
  transform: translateY(-2px);
}

.footer__social svg { width: 17px; height: 17px; }

.footer__legal { display: flex; gap: 1.25rem; }

.footer__legal a { text-decoration: none; transition: color 0.2s; }

.footer__legal a:hover { color: var(--petrol-glow); }

/* ---------- 20. Schriftzug ---------- */
.wordmark {
  display: block;
  width: 100%;
  margin-bottom: -2%;
}

.wordmark svg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  cursor: crosshair;
}

.wordmark text {
  font-family: var(--f-display);
  font-weight: 850;
  font-stretch: 122%;
  font-size: 34px;
  letter-spacing: -0.02em;
}

/* ---------- 21. Einwilligung ---------- */
.cookie {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 200;
  margin-inline: auto;
  max-width: 560px;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: rgba(16, 16, 16, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: rgba(0, 0, 0, 0.75) 0px 28px 60px -24px;
  color: var(--text);
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease), visibility 0.4s;
}

.cookie.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.cookie__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.cookie__head svg {
  width: 20px;
  height: 20px;
  color: var(--petrol-glow);
}

.cookie__head h2 {
  font-size: 1.02rem;
  font-stretch: 108%;
  letter-spacing: -0.015em;
}

.cookie p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-mute);
}

.cookie p a { color: var(--petrol-glow); }

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.cookie__actions .btn {
  flex: 1 1 auto;
  padding: 0.75rem 1.2rem;
  font-size: 0.88rem;
}

/* ---------- 22. Rechtstexte ---------- */
.legal-head {
  padding-block: clamp(7rem, 15vh, 10rem) clamp(2.5rem, 5vw, 4rem);
  color: var(--text);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.legal-head > .wrap { position: relative; z-index: 2; }

.legal-head h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.8rem); margin-top: 1.25rem; }

.legal-head p {
  margin-top: 1rem;
  color: var(--text-mute);
  font-family: var(--f-body);
  font-size: 0.92rem;
}

.legal {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
}

.legal h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}

.legal h2:first-of-type {
  margin-top: 0px;
  border-top: 0px;
  padding-top: 0px;
}

.legal h3 { margin-top: 1.85rem; margin-bottom: 0.6rem; }

.legal p,
.legal li { color: var(--text-mute); }

.legal p { margin-bottom: 1rem; }

.legal a { color: var(--petrol-glow); text-underline-offset: 3px; }

.legal ul {
  margin-bottom: 1rem;
  display: grid;
  gap: 0.5rem;
}

.legal ul li { position: relative; padding-left: 1.25rem; }

.legal ul li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--petrol-glow);
}

.legal address {
  font-style: normal;
  padding: var(--pad-card);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.legal__toc {
  padding: var(--pad-card);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 3rem;
}

.legal__toc h2 {
  all: unset;
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-mute);
}


.legal__toc ol {
  margin: 1rem 0px 0px;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.94rem;
}

.legal__toc a { text-decoration: none; }

.legal__toc a:hover { text-decoration: underline; }

/* ---------- 23. Scroll-Einblendung ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal:nth-child(2) { transition-delay: 0.07s; }

.reveal:nth-child(3) { transition-delay: 0.14s; }

.reveal:nth-child(4) { transition-delay: 0.21s; }

p.badge {
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  margin: 0px;
}

@media (max-width: 720px) {
  /* Kartenstapel: jede Karte bleibt oben kleben, die nächste schiebt
     sich darüber und lässt vom Vorgänger einen Streifen stehen. */
  .gallery__stage {
    --stack-top: 5.25rem;
    --stack-peek: 15px;
    /* Gerade so viel, dass die letzte Karte andocken kann — danach
       läuft die Sektion sofort weiter. Bei 0 hätte sie keinen
       Klebeweg und würde die Position nie erreichen. */
    --stack-hold: 30px;
    --stack-gap: 6vh;        /* Scrollweg zwischen zwei Karten */
    --stack-count: 4;
    height: auto;
    perspective: none;
    cursor: auto;
    padding-inline: var(--gutter);
  }
  .gallery__ring {
    position: static;
    display: block;
    transform: none !important;
    transform-style: flat;
  }
  /* Sticky wird von der CONTENT-Box des Elternelements begrenzt —
     padding zählt dort nicht mit. Ohne echten Inhalt hinter der letzten
     Karte endet der Ring genau an deren Unterkante, sie hätte null
     Klebeweg und würde nie andocken. Dieses Feld schafft ihn. */
  .gallery__ring::after {
    content: "";
    display: block;
    height: var(--stack-hold);
  }
  .gallery__item {
    position: sticky;
    top: calc(var(--stack-top) + var(--i) * var(--stack-peek));
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    /* Sticky löst bei "top + Höhe der Margin-Box" aus. Da die tops
       bewusst gestaffelt sind, würden die Karten sonst nacheinander
       abheben und die Lücken beim Verlassen zusammenquetschen. Die
       obere Karte bekommt deshalb genau so viel mehr Abstand, wie ihr
       top tiefer liegt — dann lösen sich alle vier gleichzeitig. */
    margin: 0 0 calc(
      var(--stack-gap) +
      (var(--stack-count) - 1 - var(--i)) * var(--stack-peek)
    );
    transform: none !important;
    opacity: 1 !important;
    box-shadow: 0 -14px 34px -18px rgba(0, 0, 0, 0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: Kreis auflösen, Bilder nebeneinander */
  .gallery__stage { height: auto; perspective: none; }
  .gallery__ring {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    transform: none !important;
  }
  .gallery__item {
    position: static;
    margin: 0;
    width: auto;
    height: auto;
    aspect-ratio: 3 / 4;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .stories { padding-block: var(--sec-y); }
  .stories__track { height: auto; }
  .stories__stage {
    position: static;
    height: auto;
    padding-top: 0px;
    display: block;
    overflow: visible;
  }
  .stories__grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2.25rem;
  }
  .stories__deck {
    min-height: 0px;
    display: grid;
    gap: 1rem;
    margin-top: 0px;
  }
  .story-card,
  .story-card.is-active,
  .story-card.is-past {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .stories__dots,
  .stories__hint { display: none; }
}

/* Kartenstapel für die Erfolgsgeschichten — gleicher Aufbau und gleiche
   Tokens wie bei der Galerie: jede Karte klebt oben, die nächste schiebt
   sich darüber und lässt vom Vorgänger einen Streifen stehen.
   Steht bewusst hinter dem Block darüber, der die Karten erst aus der
   absoluten Lage holt. */
@media (max-width: 900px) {
  .stories__deck {
    --stack-top: 5.25rem;
    --stack-peek: 15px;
    --stack-hold: 30px;
    --stack-gap: 6vh;
    --stack-count: 4;
    display: block;
  }

  /* Sticky wird von der CONTENT-Box des Elternelements begrenzt. Ohne
     Inhalt hinter der letzten Karte endet der Stapel genau an deren
     Unterkante — sie hätte null Klebeweg und würde nie andocken. */
  .stories__deck::after {
    content: "";
    display: block;
    height: var(--stack-hold);
  }

  .stories__deck .story-card:nth-child(1) { --i: 0; }
  .stories__deck .story-card:nth-child(2) { --i: 1; }
  .stories__deck .story-card:nth-child(3) { --i: 2; }
  .stories__deck .story-card:nth-child(4) { --i: 3; }

  .story-card,
  .story-card.is-active,
  .story-card.is-past {
    position: sticky;
    top: calc(var(--stack-top) + var(--i) * var(--stack-peek));
    /* Sticky löst bei "top + Höhe der Margin-Box" aus. Da die tops
       gestaffelt sind, würden die Karten sonst nacheinander abheben.
       Die obere bekommt deshalb genau so viel mehr Abstand, wie ihr
       top tiefer liegt — dann lösen sich alle vier gleichzeitig. */
    margin: 0px 0px calc(
      var(--stack-gap) +
      (var(--stack-count) - 1 - var(--i)) * var(--stack-peek)
    );
    box-shadow: 0px -14px 34px -18px rgba(0, 0, 0, 0.9);
    /* Gestapelt müssen die Karten decken, sonst scheint die darunter
       durch. background-color plus -image, nicht die Kurzform. */
    background-color: var(--ink-deep);
    background-image: linear-gradient(var(--surface), var(--surface));
  }

  .story-card--coach {
    background-color: var(--petrol-deep);
    background-image: linear-gradient(150deg, rgba(48, 92, 222, 0.85), rgba(20, 38, 97, 0.92));
  }
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__inner { gap: 0.75rem; }
  .nav__cta { padding: 0.6rem 1rem; font-size: 0.8rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero { min-height: 0px; }
  .story__grid { grid-template-columns: 1fr; }
  .story__sticky { position: static; margin-top: 2.5rem; }
  .transform__video { aspect-ratio: 16 / 9; }
  /* Achse wandert an den linken Rand, alle Karten daneben.
     58 px Einzug = 22 px Achse + halber Knoten (22 px) + Luft. */
  .timeline {
    --tl-knoten: 44px;
    padding-left: 58px;
  }
  .timeline__spine { left: 21px; transform: none; }
  .timeline__item,
  .timeline__item:nth-of-type(even) { width: auto; justify-self: stretch; }
  .timeline__node,
  .timeline__item:nth-of-type(even) .timeline__node {
    left: -36px;
    right: auto;
    transform: translateX(-50%);
  }
  .timeline__node svg { width: 19px; height: 19px; }
  .timeline__item:hover .timeline__card { translate: 0px -4px; }
  /* Seitliches Einfliegen ergibt einspaltig keinen Sinn mehr */
  .timeline__item.reveal { transform: translateY(22px); }
}

@media (max-width: 660px) {
  .nav__cta { display: none; }
  .nav__logo svg { width: 38px; height: 19px; }
  .nav__logo-text { font-size: 0.95rem; }
}

@media (max-width: 620px) {
  .timeline { --tl-knoten: 38px; padding-left: 48px; }
  .timeline__spine { left: 18px; }
  .timeline__node,
  .timeline__item:nth-of-type(even) .timeline__node { left: -29px; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cookie__actions .btn { flex: 1 1 100%; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- 24. Mobilmenü ---------- */
/* Mobilmenü nach dem Vorbild der PA-Seite: kein Vollbildschirm mehr,
   sondern ein Feld direkt unter der Kopfzeile. Weil es die Seite nicht
   mehr verdeckt, entfallen die Scroll-Sperre und der Schließen-Knopf —
   der Menüknopf schaltet um. Den Abstand nach oben setzt das JavaScript
   als --nav-hoehe, damit er auch stimmt, wenn die Kopfzeile beim
   Scrollen schmaler wird. */
.navmenu {
  position: fixed;
  top: calc(var(--nav-hoehe, 68px) + 0.5rem);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(16, 16, 16, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

.navmenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* :not(.btn), sonst überschreibt diese Regel Schriftgröße und Farbe
   des Knopfes im Menü. */
.navmenu a:not(.btn) {
  font-size: 1rem;
  color: var(--text-mute);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.navmenu a:not(.btn):hover,
.navmenu a:not(.btn):focus-visible { color: var(--petrol-glow); }

.navmenu .btn { margin-top: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .page-light span { animation: none; }
  .timeline { --tl-neigung: 0deg; }
  .timeline__fill { height: 100%; }
  .timeline__item.reveal { transform: none; }
  /* Kein Kartenstapel — die Erfolgsgeschichten laufen schlicht untereinander */
  .story-card,
  .story-card.is-active,
  .story-card.is-past { position: static; margin: 0px 0px 1rem; }
  .stories__deck::after { display: none; }
}

@media print {
  .nav,
  .cookie,
  .navmenu,
  .page-light,
  .page-grain,
  .wordmark,
  .cta-inline { display: none !important; }
  body { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }
  .section { padding-block: 1.5rem; }
}