/* ==========================================================================
   Leandro Orfeo – Personal Trainer & Athletiktrainer
   Haupt-Stylesheet
   --------------------------------------------------------------------------
   Reihenfolge:
     1. Reset & Basis
     2. Typografie
     3. Layout-Primitives
     4. Bewegung (Reveal, Reduced Motion)
     5. Buttons & Links
     6. Navigation
     7. Hero
     8. Bausteine (Karten, Ticker, Zahlen, Akkordeon, Steps ...)
     9. Sektionen
    10. Footer
    11. Utilities
   ========================================================================== */

@import url('tokens.css');
@import url('fonts.css');

/* ==========================================================================
   1. RESET & BASIS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h, 68px) + var(--sp-5));
  scroll-behavior: smooth;
  /* Verhindert horizontales Wackeln durch abgeschnittene Deko-Elemente. */
  overflow-x: hidden;
}

body {
  min-height: 100svh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul[class], ol[class] { list-style: none; padding: 0; }

:target { scroll-margin-top: calc(var(--nav-h, 68px) + var(--sp-5)); }

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Sichtbar nur bei Tastaturbedienung – springt an den Inhalt. */
.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--radius-s);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   2. TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Display – die grossen, gestauchten Versalien. Kern des "Bold Athletic".
   overflow-wrap ist hier kein Schoenheitsdetail, sondern Pflicht: deutsche
   Komposita wie ATHLETIKTRAINING oder FUSSBALLSPIELER sind laenger als jede
   Kartenbreite und wuerden sonst aus dem Layout laufen. */
.display {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display), 'wght' 900;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.display--xl { font-size: var(--display-l); }
.display--l  { font-size: var(--display-m); }
.display--m  { font-size: var(--display-s); }

/* Konturschrift – fuer Akzentwoerter in Headlines. */
.outline {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.16vw, 2.5px) var(--text);
  paint-order: stroke fill;
}
.outline--accent { -webkit-text-stroke-color: var(--accent); }

.accent-text { color: var(--accent); }
.invert-text { color: var(--accent-bright); }

/* Kleine Grossbuchstaben-Marke ueber Ueberschriften. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: '';
  width: clamp(20px, 4vw, 42px);
  height: 2px;
  background: currentColor;
}
.eyebrow--invert { color: var(--invert-fg); }

.lead {
  font-size: var(--step-1);
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 60ch;
}

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: var(--step--1); }

/* ==========================================================================
   3. LAYOUT-PRIMITIVES
   ========================================================================== */

.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.container--tight { width: min(100% - var(--gutter) * 2, var(--container-tight)); }

.section { padding-block: var(--section-y); position: relative; overflow-x: clip; }

/* Sektion mit abgesetzter Flaeche und feiner Trennkante oben. */
.section--raised {
  background: linear-gradient(180deg, var(--ink-raised) 0%, var(--ink) 100%);
  border-top: 1px solid var(--line);
}

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head--center { text-align: center; margin-inline: auto; max-width: 62ch; }
.section-head--center .eyebrow { justify-content: center; }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* ==========================================================================
   4. BEWEGUNG
   --------------------------------------------------------------------------
   Grundregel: Ohne JavaScript ist alles sofort sichtbar. Die Reveal-Zustaende
   greifen nur, wenn <html> die Klasse .js traegt (wird inline gesetzt).
   Wer "Bewegung reduzieren" im System aktiviert hat, bekommt die Seite
   vollstaendig, aber statisch.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal='left']  { transform: translate3d(-32px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(32px, 0, 0); }
.js [data-reveal='scale'] { transform: scale(0.94); }
.js [data-reveal='clip']  {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Gestaffelte Kinder – Verzoegerung kommt aus dem Index (JS setzt --i). */
.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* Endlos-Laufband. Zwei identische Spuren, die zweite schliesst die Luecke. */
.ticker {
  --ticker-dur: 34s;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-6);
  padding-right: var(--sp-6);
  animation: ticker-scroll var(--ticker-dur) linear infinite;
}
.ticker--reverse .ticker__track { animation-direction: reverse; }
.ticker:hover .ticker__track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* Scroll-getriebene Effekte – nur wo unterstuetzt, sonst passiert nichts.  */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-slow {
      animation: parallax-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 100%;
    }
    @keyframes parallax-rise {
      from { transform: translate3d(0, 7%, 0); }
      to   { transform: translate3d(0, -7%, 0); }
    }

    .scroll-progress {
      animation: progress-grow linear both;
      animation-timeline: scroll(root block);
      transform-origin: 0 50%;
    }
    @keyframes progress-grow {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

/* Ein Schalter fuer alles. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .ticker__track { animation: none; transform: none; }
  .ticker { mask-image: none; }
}

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 1.05em 1.9em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 92, 'wght' 800;
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  box-shadow: 0 0 0 0 var(--accent-glow);
}

/* Lichtwisch von links nach rechts beim Hover. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .38) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }

.btn:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px var(--accent-glow);
}
.btn:active { transform: translateY(0) scale(.985); }

.btn--lg {
  padding: 1.2em 2.4em;
  font-size: var(--step-1);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 2px solid var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--ghost::after { display: none; }

.btn--invert { --btn-bg: var(--invert-fg); --btn-fg: var(--accent); }
.btn--invert:hover { background: #000; box-shadow: 0 14px 34px -14px rgb(0 0 0 / .5); }

.btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* Textlink mit Unterstrich, der beim Hover durchlaeuft. */
.link {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; color: var(--accent); }

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */

.nav {
  --nav-h: 68px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Erst nach dem Scrollen bekommt die Leiste einen Hintergrund. */
.nav.is-stuck {
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 80, 'wght' 900;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.nav__brand span { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 1.6vw, var(--sp-6));
}
.nav__links a {
  position: relative;
  color: var(--text-dim);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--text); }
.nav__links a:hover::after, .nav__links a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.nav__cta { padding: 0.72em 1.4em; font-size: var(--step--1); }

/* Duenner Fortschrittsbalken am unteren Rand der Navigation. */
.nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- Burger + Mobilmenue ----------------------------------------------- */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
}
.nav__burger span {
  display: block;
  position: relative;
  width: 22px; height: 2px;
  background: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__burger span::before, .nav__burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--text);
  transition: transform var(--dur) var(--ease-out);
}
.nav__burger span::before { top: -7px; }
.nav__burger span::after  { top: 7px; }

.nav__burger[aria-expanded='true'] span { background: transparent; }
.nav__burger[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span::after  { transform: translateY(-7px) rotate(-45deg); }

.nav__panel {
  position: fixed;
  inset: var(--nav-h, 68px) 0 0 0;
  z-index: var(--z-overlay);
  background: var(--ink);
  padding: var(--sp-7) var(--gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  overflow-y: auto;
  /* Standard: geschlossen und aus dem Tab-Fluss. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
.nav__panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.nav__panel a {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 85, 'wght' 800;
  font-size: var(--step-4);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__panel a::after { content: '→'; color: var(--accent); }
.nav__panel .btn { margin-top: var(--sp-4); }
.nav__panel .btn::after { content: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__burger { display: flex; }
}

/* Sperrt den Hintergrund, solange das Menue offen ist. */
body.is-locked { overflow: hidden; }

/* ==========================================================================
   7. STICKY-CTA (nur Mobil)
   --------------------------------------------------------------------------
   Auf dem Handy ist der wichtigste Button immer erreichbar. Erscheint erst,
   wenn der Hero durchgescrollt ist, damit er den Einstieg nicht verdeckt.
   ========================================================================== */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; padding: 0.95em 1em; font-size: var(--step--1); }

@media (max-width: 760px) {
  .sticky-cta { display: flex; }
  /* Platz schaffen, damit der Balken nichts verdeckt. */
  body { padding-bottom: 76px; }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h, 68px) + clamp(1.25rem, 0.7rem + 2vw, 2.25rem));
  padding-bottom: clamp(2.5rem, 1rem + 4vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

/* Das Hero-Bild wird an die Fensterhoehe gekoppelt, nicht an die Spaltenbreite.
   Sonst waechst der Hero auf grossen Bildschirmen ueber den Viewport hinaus und
   die Zielgruppen-Weiche darunter wird nie angeschnitten sichtbar. */
/* Die Headline laeuft ueber die volle Containerbreite - nur dort ist Platz
   fuer wirklich grosse Typografie. Darunter erst die zweispaltige Zeile. */
.hero__head { margin-bottom: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem); }

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: end;
}
@media (max-width: 900px) {
  .hero__body { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .hero .media--portrait {
    height: min(46vh, 440px);
    width: auto;
    margin-inline-start: auto;
  }
}

/* Auf dem Handy darf das Bild den Hero nicht auf die doppelte Bildschirmhoehe
   treiben - sonst sieht der Besucher den ersten Button nur nach dem Scrollen. */
@media (max-width: 900px) {
  .hero .media--portrait {
    height: 38vh;
    width: auto;
    margin-inline: auto;
  }
  .hero__trust { gap: var(--sp-2) var(--sp-5); }
  .hero__note { margin-bottom: var(--sp-5); }
}

/* Farbschleier + Rasterlinien im Hintergrund. Rein dekorativ. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58% 52% at 76% 10%, color-mix(in oklab, var(--accent) 7%, transparent) 0%, transparent 62%),
    radial-gradient(50% 50% at 4% 92%, rgb(255 255 255 / .028) 0%, transparent 62%);
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px);
  opacity: .35;
  mask-image: radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 78%);
}

.hero__title { margin-bottom: 0; }
/* Die Zeilen der Headline treppen leicht ein, das wirkt dynamischer. */
.hero__title .line { display: block; }
.hero__title .line--2 { padding-left: clamp(0px, 3vw, 2.5rem); }

.hero__sub {
  font-size: var(--step-1);
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.hero__actions { margin-bottom: var(--sp-6); }

/* Vertrauensleiste direkt unter den Buttons. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--text-dim);
  font-weight: 500;
}
.hero__trust svg { width: 1.05em; height: 1.05em; color: var(--accent); flex: none; }

/* --- Bildrahmen --------------------------------------------------------- */
.media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--portrait  { aspect-ratio: 3 / 4; }
.media--square    { aspect-ratio: 1 / 1; }
.media--wide      { aspect-ratio: 16 / 9; }
.media--landscape { aspect-ratio: 4 / 3; }

/* Diagonaler Anschnitt, die Signaturform der Seite. */
.media--cut {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), calc(100% - 3.5rem) 100%, 0 100%);
}

/* Volt-Rahmen, der hinter dem Bild hervorschaut. */
.media--framed { overflow: visible; border: 0; background: none; }
.media--framed::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 62%;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-l) 0;
  z-index: -1;
}
.media--framed img {
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
}

.media__caption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
}

/* ==========================================================================
   9. BAUSTEINE
   ========================================================================== */

/* --- Karte -------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
/* Volt-Schimmer folgt dem Mauszeiger. Koordinaten setzt main.js. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 0%),
    var(--accent-soft), transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card h3 {
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--step-2);
  font-variation-settings: "wdth" 92, "wght" 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.card p { color: var(--text-dim); font-size: var(--step-0); }

.card--accent { border-color: var(--accent-line); }

/* Invertierte Karte - gefuellte Akzentflaeche mit dunklem Text.
   Wird sparsam eingesetzt: Vereinsangebot, empfohlene Stufe. */
.card--invert {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.card--invert::before { display: none; }
.card--invert p { color: var(--invert-dim); }
.card--invert .card__icon {
  background: var(--invert-line);
  color: var(--invert-fg);
  border-color: var(--invert-line);
}
.card--invert:hover { border-color: var(--invert-bg); }

/* Klickbare Karte: der ganze Block wird zur Linkflaeche. */
.card--link { text-decoration: none; color: inherit; }
.card--link .card__more {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card--link .card__more span { transition: transform var(--dur) var(--ease-out); }
.card--link:hover .card__more span { transform: translateX(4px); }

/* --- Zahlenband --------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--ink-raised-2);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  text-align: center;
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 78, "wght" 900;
  font-size: var(--step-6);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* --- Ablauf-Schritte ---------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.step {
  position: relative;
  counter-increment: step;
  padding: clamp(1.6rem, 1rem + 1.8vw, 2.4rem);
  padding-top: clamp(3.2rem, 2rem + 3vw, 4.2rem);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Grosse Schrittnummer als Wasserzeichen. */
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.15em;
  right: var(--sp-4);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 76, "wght" 900;
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--line-strong);
  pointer-events: none;
}
.step h3 {
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--step-2);
  text-transform: uppercase;
  font-variation-settings: "wdth" 90, "wght" 800;
  margin-bottom: var(--sp-3);
}
.step p { color: var(--text-dim); }

/* --- Akkordeon (FAQ) ---------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}
.faq__item[open] { border-color: color-mix(in oklab, var(--accent) 32%, transparent); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 94, "wght" 700;
  font-size: var(--step-1);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(225deg) translate(-3px, -3px); }

.faq__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-dim); max-width: 68ch; }

/* --- Lizenz-Chips ------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 600;
}
.chip svg { width: 1em; height: 1em; color: var(--accent); flex: none; }

/* --- Laufband-Wort ------------------------------------------------------ */
.ticker__word {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80, "wght" 900;
  font-size: clamp(2.2rem, 1rem + 5.5vw, 5rem);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}
.ticker__word--fill { color: var(--accent); -webkit-text-stroke: 0; }
.ticker__dot { color: var(--accent); font-size: clamp(1.2rem, 3vw, 2.4rem); }

/* ==========================================================================
   10. SEKTIONEN
   ========================================================================== */

/* --- Zielgruppen-Weiche -------------------------------------------------
   Der wichtigste strukturelle Baustein: Privatkunden und Vereine werden
   direkt nach dem Hero getrennt, damit sich keine der beiden Gruppen
   durch fremde Inhalte scrollen muss.
   ------------------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-5);
}

.split__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(320px, 40vw, 440px);
  padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
/* Farbfeld faehrt beim Hover von unten ein. */
.split__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, var(--panel-glow, var(--accent-soft)) 100%);
  opacity: 0;
  transform: translateY(18%);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.split__panel:hover { transform: translateY(-5px); border-color: var(--panel-color, var(--accent)); }
.split__panel:hover::before { opacity: 1; transform: none; }

.split__panel--privat { --panel-color: var(--accent); --panel-glow: var(--accent-soft); }

/* Der Vereinspfad wird invertiert statt eingefaerbt: gefuellte Akzentflaeche
   mit dunklem Text. Das setzt den B2B-Weg deutlich ab, ohne eine zweite
   Signalfarbe einzufuehren - und signalisiert "das ist das Hauptgeschaeft". */
.split__panel--vereine {
  --panel-color: var(--invert-fg);
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.split__panel--vereine::before { display: none; }
.split__panel--vereine p { color: var(--invert-dim); }
.split__panel--vereine .split__list li { color: var(--invert-dim); }
.split__panel--vereine .split__list li::before { background: var(--accent); }
.split__panel--vereine .split__tag { border-color: var(--invert-line); color: var(--invert-dim); }
.split__panel--vereine:hover { border-color: var(--invert-fg); }

.split__tag {
  align-self: flex-start;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--panel-color);
  color: var(--panel-color);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.split__panel h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 84, "wght" 900;
  font-size: var(--step-4);
  text-transform: uppercase;
  line-height: 0.98;
  margin-bottom: var(--sp-4);
  overflow-wrap: break-word;
  hyphens: auto;
}
.split__panel p { color: var(--text-dim); max-width: 40ch; }

.split__list {
  margin: var(--sp-5) 0 var(--sp-6);
  display: grid;
  gap: var(--sp-2);
}
.split__list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--step-0);
  color: var(--text-dim);
}
.split__list li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 0.62em;
  background: var(--panel-color);
  transform: rotate(45deg);
}

.split__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92, "wght" 800;
  font-size: var(--step-1);
  text-transform: uppercase;
  color: var(--panel-color);
}
.split__go span { transition: transform var(--dur) var(--ease-out); }
.split__panel:hover .split__go span { transform: translateX(6px); }

/* --- Zwei-Spalten-Block mit Bild ---------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.duo--reverse > *:first-child { order: 2; }
@media (max-width: 760px) {
  .duo--reverse > *:first-child { order: 0; }
}

/* --- Zitat / Leitsatz ---------------------------------------------------- */
.quote {
  position: relative;
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.quote p {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 88, "wght" 800;
  font-size: var(--step-3);
  line-height: 1.18;
  text-transform: uppercase;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.quote cite {
  display: block;
  margin-top: var(--sp-4);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Abschluss-CTA ------------------------------------------------------ */
.cta-final {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%),
    var(--ink-raised);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  text-align: center;
}
.cta-final h2 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 82, "wght" 900;
  font-size: var(--display-s);
  text-transform: uppercase;
  line-height: 0.94;
  margin-bottom: var(--sp-5);
  overflow-wrap: break-word;
}
.cta-final p { color: var(--text-dim); max-width: 52ch; margin: 0 auto var(--sp-6); font-size: var(--step-1); }

/* Feine Kontaktzeile unter dem Hauptbutton. */
.cta-alt {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--step--1);
  color: var(--text-dim);
}
.cta-alt a { color: var(--text); text-decoration: none; font-weight: 600; }
.cta-alt a:hover { color: var(--accent); }

/* --- Kontaktkanaele als Kacheln ----------------------------------------- */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4);
}
.channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.channel:hover { border-color: var(--accent); transform: translateY(-3px); }
.channel__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  color: var(--accent);
}
.channel__icon svg { width: 1.4rem; height: 1.4rem; }
.channel strong { display: block; font-size: var(--step-0); }
.channel span { font-size: var(--step--1); color: var(--text-faint); }

/* --- Hinweisbox (ehrlicher Platzhalter, z. B. bei Bewertungen) ---------- */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--ink-raised-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: var(--step-0);
}
.notice svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--accent); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.footer h4 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
  font-weight: 700;
}
.footer ul { display: grid; gap: var(--sp-3); }
.footer a { color: var(--text-dim); text-decoration: none; font-size: var(--step-0); }
.footer a:hover { color: var(--accent); }

.footer__brand {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80, "wght" 900;
  font-size: var(--step-4);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.footer__brand span { color: var(--accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Feiner Trennstrich mit Volt-Punkt in der Mitte. */
.rule {
  height: 1px;
  background: var(--line);
  position: relative;
}
.rule::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Drucken: Deko raus, Text lesbar. */
@media print {
  .nav, .sticky-cta, .ticker, .hero__bg, .hero__grid-lines { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .card, .step, .split__panel { border-color: #999; background: #fff; }
}

/* ==========================================================================
   13. REDAKTIONELLE LISTEN STATT KARTEN
   --------------------------------------------------------------------------
   Die alte Seite bestand fast nur aus Textkarten auf dunklem Grund - dadurch
   wirkte alles gleich wichtig und flach. Karten werden deshalb nur noch dort
   eingesetzt, wo sie eine echte Funktion haben (die Zielgruppen-Weiche, weil
   man dort eine Auswahl trifft). Alles andere laeuft ueber Haarlinien,
   Nummern und Weissraum.
   ========================================================================== */

/* --- Leistungsliste ------------------------------------------------------ */
.feature-list { display: grid; gap: 0; }
@media (min-width: 820px) {
  .feature-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); }
}

/* Bild oben, darunter Nummer und Text. Bewusst ein Block statt einer
   Rasterzeile - sonst laege das Bild als schmale erste Spalte daneben. */
.feature-list__item {
  position: relative;
  display: block;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease-out);
}

/* Die Trennlinie ist ein eigenes Element, damit sie sich beim Scrollen
   von links nach rechts zeichnen kann. Als border-top ginge das nicht. */
.feature-list__item::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp-4); right: var(--sp-4);
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-out), background-color var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .feature-list.is-in .feature-list__item::before,
html:not(.js) .feature-list__item::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .feature-list__item::before { transform: scaleX(1); transition: none; }
}

.feature-list__item:hover { background: var(--ink-raised-2); }
.feature-list__item:hover::before { background: var(--accent); }

.feature-list__no {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 76, 'wght' 900;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1em;
  transition: transform var(--dur) var(--ease-back, var(--ease-out));
}
.feature-list__item:hover .feature-list__no { transform: translateY(-3px) scale(1.12); }

/* Pfeil, der beim Ueberfahren hereinfaehrt. */
.feature-list__item h3::after {
  content: '→';
  display: inline-block;
  margin-left: 0.4em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.feature-list__item:hover h3::after { opacity: 1; transform: none; }

/* --- Bild je Leistung ---------------------------------------------------
   Frueher lag hier ein Vorschaubild, das dem Mauszeiger folgte. Auf dem Handy
   war das wirkungslos - dort gibt es kein Ueberfahren, also sah man nie ein
   Bild. Jetzt ist das Bild fest sichtbar und bewegt sich von selbst.
   ---------------------------------------------------------------------- */
.feature-list__media {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
}
.feature-list__media img { width: 100%; height: 100%; object-fit: cover; }

.feature-list__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}

@media (prefers-reduced-motion: no-preference) {
  /* Langsamer Bildschwenk. Der negative Verzoegerungswert startet jedes Bild
     an einer anderen Stelle, damit die vier nicht im Gleichschritt laufen. */
  .feature-list__media img {
    animation: ken-burns 20s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 0) * -5s);
    will-change: transform;
  }
  @keyframes ken-burns {
    from { transform: scale(1.03) translate3d(-1.2%, -1.2%, 0); }
    to   { transform: scale(1.13) translate3d(1.6%, 1.6%, 0); }
  }
}

/* ==========================================================================
   14. ANIMATIONEN
   --------------------------------------------------------------------------
   Alles hier ist Zierde mit Zweck: Bewegung lenkt den Blick dorthin, wo die
   naechste Entscheidung getroffen wird. Regeln, die nicht gebrochen werden:
   · Es wird ausschliesslich transform und opacity animiert (Compositor).
   · Die Hero-Headline startet NIE mit opacity:0 - sie ist der LCP-Kandidat.
     Sie faehrt nur hoch, ist also von der ersten Millisekunde an gemalt.
   · Alles laeuft auch ohne JavaScript. Ohne JS fehlt nur die Bewegung.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero-Headline: Zeilen fahren aus ihrer Maske hoch ---------------- */
  .hero__title .line {
    display: block;
    overflow: hidden;
  }
  .hero__title .line > span {
    display: block;
    animation: line-rise 900ms var(--ease-out) backwards;
  }
  .hero__title .line:nth-child(1) > span { animation-delay: 60ms; }
  .hero__title .line:nth-child(2) > span { animation-delay: 170ms; }
  .hero__title .line:nth-child(3) > span { animation-delay: 280ms; }

  @keyframes line-rise {
    from { transform: translate3d(0, 105%, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }

  /* Alles unter der Headline darf ganz normal einblenden. */
  .hero__sub,
  .hero__actions,
  .hero__note,
  .hero__trust {
    animation: fade-up 800ms var(--ease-out) backwards;
  }
  .hero__sub     { animation-delay: 420ms; }
  .hero__actions { animation-delay: 520ms; }
  .hero__note    { animation-delay: 600ms; }
  .hero__trust   { animation-delay: 680ms; }

  @keyframes fade-up {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Hintergrund-Schleier driftet langsam ----------------------------- */
  .hero__bg {
    animation: mesh-drift 30s var(--ease-in-out) infinite alternate;
    will-change: transform;
  }
  @keyframes mesh-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
    to   { transform: translate3d(3%, 3%, 0) scale(1.14); }
  }

  /* --- Bild atmet beim Scrollen (nur wo unterstuetzt) ------------------- */
  @supports (animation-timeline: view()) {
    .media--parallax img {
      animation: img-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes img-drift {
      from { transform: scale(1.12) translate3d(0, -2.5%, 0); }
      to   { transform: scale(1.12) translate3d(0, 2.5%, 0); }
    }

  }

  /* --- Ueberschriften: Woerter treppen herein --------------------------- */
  .js [data-words] .word {
    display: inline-block;
    transform: translate3d(0, 0.5em, 0);
    opacity: 0;
    transition:
      transform 700ms var(--ease-out),
      opacity 700ms var(--ease-out);
    transition-delay: calc(var(--w, 0) * 55ms);
  }
  .js [data-words].is-in .word { transform: none; opacity: 1; }
}

/* --- FAQ: weich aufklappen statt springen -------------------------------
   grid-template-rows 0fr -> 1fr ist der einzige Weg, eine Hoehe von "auto"
   zu animieren, ohne sie in JavaScript auszurechnen. */
.faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.faq__item[open] .faq__a-wrap { grid-template-rows: 1fr; }
.faq__a-wrap > div { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .faq__a-wrap { transition: none; }
}

/* --- Magnetischer Button ------------------------------------------------
   Der Button folgt dem Zeiger minimal. Werte kommen aus main.js. */
.btn--magnetic {
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
  transition: transform 260ms var(--ease-out), background-color var(--dur-fast), box-shadow var(--dur);
}
.btn--magnetic:hover { transition-duration: 90ms; }

/* --- Laufender Rahmen um den Abschluss-CTA ------------------------------ */
.cta-final { position: relative; }
.cta-final::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg 260deg,
    var(--accent) 300deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-final::after { animation: spin-border 6s linear infinite; }
  @keyframes spin-border { to { --angle: 360deg; } }
}

/* ==========================================================================
   15. KONTAKTFORMULAR
   --------------------------------------------------------------------------
   Die Seite hat kein Backend (GitHub Pages liefert nur Dateien aus). Das
   Formular sammelt die Angaben deshalb im Browser und uebergibt sie fertig
   formuliert an WhatsApp oder das E-Mail-Programm. Es werden keine Daten
   an einen Server gesendet und nichts gespeichert - das haelt die
   Datenschutzerklaerung kurz und die Antwortzeit niedrig.
   ========================================================================== */

.form {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7em; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

/* Auswahl als Chips statt als Dropdown - ein Klick statt drei. */
.choice { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-out);
}
.choice label:hover { border-color: var(--accent); }
.choice input:checked + label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.choice input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 3px; }

.form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.form__hint { font-size: var(--step--1); color: var(--text-faint); }

/* Bestaetigung nach dem Absenden. */
.form__done {
  display: none;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius);
}
.form__done.is-visible { display: flex; }
.form__done svg { width: 1.5rem; height: 1.5rem; color: var(--accent); flex: none; }

/* ==========================================================================
   16. FITNESS-CHECK
   --------------------------------------------------------------------------
   Ein mehrstufiger Fragebogen mit vier Klickfragen. Zweck ist nicht die
   Datenerhebung, sondern das Micro-Commitment: wer vier Fragen beantwortet
   hat, bricht am Ende deutlich seltener ab als jemand, der vor einem leeren
   Kontaktformular sitzt. Die Antworten werden am Ende in die Nachricht
   geschrieben, damit Leandro sofort weiss, worum es geht.

   Es verlaesst nichts den Browser, bis der Nutzer auf "Absenden" klickt.
   ========================================================================== */

.quiz {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  background: var(--ink-raised-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

/* --- Fortschritt --------------------------------------------------------- */
.quiz__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.quiz__count {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.quiz__bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.quiz__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* --- Schritte ------------------------------------------------------------
   Alle Schritte liegen uebereinander im selben Raster. Der aktive ist
   sichtbar, die anderen sind ausgeblendet und nicht fokussierbar. */
.quiz__steps { display: grid; }
.quiz__step {
  grid-area: 1 / 1;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--dir, 24px), 0, 0);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
  pointer-events: none;
}
.quiz__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}

.quiz__q {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 88, 'wght' 800;
  font-size: var(--step-3);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: var(--sp-3);
  overflow-wrap: break-word;
  hyphens: auto;
}
.quiz__hint { color: var(--text-dim); font-size: var(--step-0); margin-bottom: var(--sp-5); }

/* --- Antwortkacheln ------------------------------------------------------ */
.quiz__options { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .quiz__options--2 { grid-template-columns: 1fr 1fr; } }

.quiz__options input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.quiz__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.quiz__opt:hover { border-color: var(--accent); transform: translateX(3px); }

/* Der Marker links fuellt sich, wenn gewaehlt. */
.quiz__opt::before {
  content: '';
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.quiz__options input:checked + .quiz__opt {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.quiz__options input:checked + .quiz__opt::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.quiz__options input:focus-visible + .quiz__opt { outline: 3px solid var(--accent); outline-offset: 3px; }

.quiz__opt small { display: block; font-weight: 400; color: var(--text-faint); font-size: var(--step--1); }

/* --- Steuerung ----------------------------------------------------------- */
.quiz__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.quiz__back {
  color: var(--text-faint);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-2) 0;
  transition: color var(--dur-fast);
}
.quiz__back:hover { color: var(--text); }
.quiz__back[hidden] { visibility: hidden; display: block; }

/* --- Ergebnis ------------------------------------------------------------ */
.quiz__result-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.quiz__badge {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.quiz__badge svg { width: 1.5rem; height: 1.5rem; }

.quiz__summary {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quiz__summary div { display: flex; gap: var(--sp-4); font-size: var(--step-0); }
.quiz__summary dt { color: var(--text-faint); min-width: 9rem; flex: none; }
.quiz__summary dd { margin: 0; font-weight: 600; }

/* Mikro-Copy direkt unter den Hero-Buttons. Laut Recherche der wirksamste
   einzelne Satz der Seite: er nimmt die Angst vor dem Klick. */
.hero__note {
  margin-top: calc(var(--sp-5) * -1);
  margin-bottom: var(--sp-6);
  max-width: 46ch;
}

/* ==========================================================================
   17. TEXTSEITEN (Impressum, Datenschutz, Ueber mich)
   ========================================================================== */

.page-head {
  padding-top: calc(var(--nav-h, 68px) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-5); }

.prose h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 90, 'wght' 800;
  font-size: var(--step-3);
  text-transform: uppercase;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  overflow-wrap: break-word;
  hyphens: auto;
}
.prose h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 94, 'wght' 700;
  font-size: var(--step-1);
  margin-top: var(--sp-6);
}
.prose p, .prose li { color: var(--text-dim); }
.prose strong { color: var(--text); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--sp-2); }
.prose li { padding-left: 0.2em; }
.prose address { font-style: normal; color: var(--text); line-height: 1.9; }

/* Markiert Stellen, die Leandro noch selbst ausfuellen muss. */
.todo {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-s);
  background: color-mix(in oklab, #FFB020 22%, transparent);
  border: 1px dashed #FFB020;
  color: #FFD48A;
  font-weight: 600;
  font-size: 0.95em;
}

.callout {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-left: 3px solid #FFB020;
  border-radius: var(--radius);
  background: var(--ink-raised-2);
}
.callout p { color: var(--text-dim); margin: 0; }
.callout strong { display: block; color: var(--text); margin-bottom: var(--sp-2); }

/* ==========================================================================
   18. LIZENZ-EXPLORER
   --------------------------------------------------------------------------
   Sechs Lizenzen als reine Liste waren tot. Jetzt: links die Liste, rechts
   das zugehoerige Zertifikat. Beim Wechseln blendet das Bild ueber. Das ist
   auch inhaltlich richtig - laut Recherche ist ein sichtbares Zertifikat im
   Athletiksegment der Standard-Ersatz fuer fehlende Kundenstimmen.
   ========================================================================== */

.lic {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 900px) {
  .lic { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: start; }
}

/* --- Liste --------------------------------------------------------------- */
.lic__list { display: grid; }

.lic__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  padding: clamp(1rem, 0.7rem + 0.9vw, 1.4rem) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-radius: var(--radius);
  color: inherit;
  transition: background-color var(--dur) var(--ease-out);
}
.lic__item::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp-4); right: var(--sp-4);
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 800ms var(--ease-out), background-color var(--dur);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .lic__list.is-in .lic__item::before,
html:not(.js) .lic__item::before { transform: scaleX(1); }

.lic__item:hover { background: var(--ink-raised-2); }
.lic__item[aria-selected='true'] { background: var(--ink-raised-2); }
.lic__item[aria-selected='true']::before { background: var(--accent); }

/* Der Haken fuellt sich, wenn die Lizenz ausgewaehlt ist. */
.lic__check {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: var(--text-faint);
  transition: all var(--dur) var(--ease-out);
}
.lic__check svg { width: 0.85rem; height: 0.85rem; }
.lic__item[aria-selected='true'] .lic__check,
.lic__item:hover .lic__check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.lic__name {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 92, 'wght' 700;
  font-size: var(--step-1);
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
  transition: color var(--dur) var(--ease-out);
}
.lic__meta { display: block; font-size: var(--step--1); color: var(--text-faint); margin-top: 2px; }
.lic__item[aria-selected='true'] .lic__name { color: var(--accent); }

/* Kleiner Pfeil rechts, nur bei Auswahl sichtbar. */
.lic__arrow {
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lic__item[aria-selected='true'] .lic__arrow { opacity: 1; transform: none; }
@media (max-width: 899px) { .lic__arrow { display: none; } }

/* --- Bildseite ----------------------------------------------------------- */
.lic__stage {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-raised-2);
}
@media (min-width: 900px) {
  .lic__stage { position: sticky; top: calc(var(--nav-h, 68px) + var(--sp-6)); }
}

/* Alle Bilder liegen uebereinander, nur das aktive ist sichtbar. */
.lic__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out);
}
.lic__shot img { width: 100%; height: 100%; object-fit: cover; }
.lic__shot.is-active { opacity: 1; transform: none; }

.lic__caption {
  position: absolute;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  color: var(--text-dim);
}
.lic__caption strong { display: block; color: var(--text); font-size: var(--step-0); }

@media (prefers-reduced-motion: reduce) {
  .lic__shot { transition: none; }
  .lic__item::before { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   19. ZEITSTRAHL – aktiv statt statisch
   --------------------------------------------------------------------------
   Die Linie zeichnet sich beim Scrollen, und jeder Schritt schaltet sich
   ein, sobald er erreicht ist: Punkt fuellt sich, Nummer wird zum Akzent,
   Text hellt auf. Dadurch liest sich der Ablauf als Fortschritt statt als
   vier gleichrangige Absaetze.
   ========================================================================== */

.timeline { position: relative; }

/* Grundlinie und Fortschrittslinie liegen auf Hoehe der Punkte. */
.timeline__rail {
  position: absolute;
  top: 7px;
  left: 0; right: 0;
  height: 2px;
  background: var(--line);
  display: none;
}
.timeline__progress {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
}
.timeline.is-animated .timeline__progress { transform: scaleX(0); }
@media (min-width: 860px) { .timeline__rail { display: block; } }

/* Auf Mobil laeuft die Linie senkrecht neben den Schritten. */
@media (max-width: 859px) {
  .timeline { padding-left: var(--sp-6); }
  .timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--line);
  }
}

.timeline__step { padding-top: var(--sp-6); }
.timeline__step::before { display: none; }

/* Der Punkt auf der Linie. */
.timeline__step::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-raised);
  border: 2px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
@media (max-width: 859px) {
  .timeline__step { padding-top: 0; padding-bottom: var(--sp-2); }
  .timeline__step::after { top: 4px; left: calc(var(--sp-6) * -1); }
}

/* Standard: alles vollstaendig lesbar, Punkt gefuellt. */
.timeline__step::after { background: var(--accent); border-color: var(--accent); }

/* Nur wenn die Schritt-fuer-Schritt-Animation nachweislich laeuft, wird
   zurueckgenommen, was noch nicht erreicht ist. */
.timeline.is-animated .timeline__step::after {
  background: var(--ink-raised);
  border-color: var(--line-strong);
}
.timeline.is-animated .timeline__step.is-active::after {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

.timeline__no {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 78, 'wght' 900;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--text-faint);
  margin: var(--sp-5) 0 var(--sp-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease-out);
}
@media (max-width: 859px) { .timeline__no { margin-top: 0; } }

.timeline__no { color: var(--accent); }
.timeline.is-animated .timeline__no { color: var(--text-faint); }
.timeline.is-animated .timeline__step.is-active .timeline__no { color: var(--accent); }

.timeline__step h3 { transition: color var(--dur) var(--ease-out); }
.timeline.is-animated .timeline__step h3 { color: var(--text-dim); }
.timeline.is-animated .timeline__step.is-active h3 { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .timeline__progress { transform: scaleX(1); }
  .timeline__step { opacity: 1; }
}

/* ==========================================================================
   20. TEST-PARCOURS – interaktive Infografik
   --------------------------------------------------------------------------
   Vier Tests, vier schematische Szenen. Wer einen Test auswaehlt, sieht die
   Bewegung abgespielt statt sie nur beschrieben zu bekommen. Das ersetzt
   Referenzen durch Nachvollziehbarkeit: ein Vereinstrainer erkennt in drei
   Sekunden, was auf seinem Platz passieren wuerde.

   Bewusst NICHT automatisch weiterschaltend - rotierende Inhalte werden
   nachweislich kaum wahrgenommen und ziehen dem Leser den Text weg.
   ========================================================================== */

.parcours {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
@media (min-width: 940px) {
  .parcours { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
}

/* --- Bühne --------------------------------------------------------------- */
.parcours__stage {
  position: relative;
  aspect-ratio: 8 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%),
    var(--ink-raised-2);
}
@media (min-width: 940px) {
  .parcours__stage { position: sticky; top: calc(var(--nav-h, 68px) + var(--sp-6)); }
}

/* Feines Raster als Platzandeutung. */
.parcours__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .5;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%);
}

.parcours__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.parcours__scene.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Gemeinsame Zeichen-Stile der Szenen. */
.pc-line   { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.pc-track  { stroke: var(--line-strong); stroke-width: 3; fill: none; stroke-linecap: round; }
.pc-accent { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; }
.pc-dot    { fill: var(--accent); }
.pc-cone   { fill: var(--text-faint); }
.pc-label  { fill: var(--text-faint); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.pc-label--on { fill: var(--accent); }
.pc-title  { fill: var(--text); font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .08em; }

/* --- Abspiel-Animationen -------------------------------------------------
   Laufen nur, wenn die Szene aktiv ist UND gerade abgespielt wird. Dadurch
   laesst sich die Wiedergabe per Klick neu starten. */
@media (prefers-reduced-motion: no-preference) {

  /* Alle Szenen teilen sich denselben Takt von 3,6 s und laufen endlos.
     Am Ende jedes Durchlaufs blendet die Bewegung kurz aus und setzt
     unsichtbar zurueck - sonst wuerde der Laeufer sichtbar zurueckspringen. */

  .is-playing .pc-runner { animation: pc-run 3.6s cubic-bezier(.3, .05, .3, 1) infinite; }
  @keyframes pc-run {
    0%   { offset-distance: 0%;   opacity: 0; }
    7%   { offset-distance: 0%;   opacity: 1; }
    58%  { offset-distance: 100%; opacity: 1; }
    80%  { offset-distance: 100%; opacity: 0; }
    100% { offset-distance: 0%;   opacity: 0; }
  }

  /* Bahn zeichnet sich, bleibt stehen, verschwindet, faengt von vorn an. */
  .is-playing .pc-draw {
    stroke-dasharray: var(--len, 900);
    animation: pc-draw 3.6s var(--ease-out) infinite;
  }
  @keyframes pc-draw {
    0%   { stroke-dashoffset: var(--len, 900); opacity: 1; }
    45%  { stroke-dashoffset: 0; opacity: 1; }
    80%  { stroke-dashoffset: 0; opacity: 1; }
    92%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: var(--len, 900); opacity: 0; }
  }

  /* Tore und Marken leuchten nacheinander auf, wenn der Laeufer sie passiert. */
  .is-playing .pc-gate {
    animation: pc-flash 3.6s var(--ease-out) infinite;
    animation-delay: calc(var(--g, 0) * 480ms);
  }
  @keyframes pc-flash {
    0%, 6%    { opacity: .3; }
    14%       { opacity: 1; }
    75%       { opacity: 1; }
    92%, 100% { opacity: .3; }
  }

  .is-playing .pc-pulse {
    animation: pc-pulse 1.8s var(--ease-out) infinite;
    animation-delay: calc(var(--g, 0) * 300ms);
  }
  @keyframes pc-pulse {
    0%   { transform: scale(.7); opacity: .8; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  .is-playing .pc-rise { animation: pc-rise 3.6s var(--ease-out) infinite; }
  @keyframes pc-rise {
    0%   { transform: translateY(70px); opacity: 0; }
    30%  { transform: none; opacity: 1; }
    80%  { transform: none; opacity: 1; }
    95%, 100% { transform: none; opacity: 0; }
  }

  .is-playing .pc-sway {
    animation: pc-sway 2.6s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  @keyframes pc-sway {
    0%, 100% { transform: rotate(-2.5deg); }
    50%      { transform: rotate(2.5deg); }
  }
}

/* Ohne Bewegung: Endzustand direkt zeigen, nichts bleibt unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .pc-runner { offset-distance: 100%; }
  .pc-draw   { stroke-dasharray: none; }
  .pc-gate, .pc-rise { opacity: 1; }
  .pc-pulse  { opacity: .3; }
}

/* --- Auswahlliste --------------------------------------------------------- */
.parcours__list { display: grid; }

.parcours__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  width: 100%;
  text-align: left;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-radius: var(--radius);
  color: inherit;
  border-top: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.parcours__item:hover { background: var(--ink-raised-2); }
.parcours__item[aria-selected='true'] {
  background: var(--ink-raised-2);
  border-top-color: var(--accent);
}

.parcours__no {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 76, 'wght' 900;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.parcours__item[aria-selected='true'] .parcours__no { color: var(--accent); transform: scale(1.08); }

.parcours__name {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 92, 'wght' 800;
  font-size: var(--step-2);
  text-transform: uppercase;
  line-height: 1.05;
  overflow-wrap: break-word;
  hyphens: auto;
  margin-bottom: var(--sp-2);
}
.parcours__text { color: var(--text-dim); font-size: var(--step-0); }

/* Was der Verein danach in der Hand haelt - erscheint nur beim aktiven Test. */
.parcours__out {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.parcours__item[aria-selected='true'] .parcours__out { grid-template-rows: 1fr; }
.parcours__out > span { overflow: hidden; }
.parcours__out em {
  display: block;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-strong);
  font-style: normal;
  font-size: var(--step--1);
  color: var(--accent);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .parcours__out { transition: none; }
}

.parcours__replay {
  margin-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-fast);
}
.parcours__replay:hover { color: var(--accent); }
.parcours__replay svg { width: 1em; height: 1em; }

/* ==========================================================================
   21. ZEITSTRAHL – laufendes Signal
   --------------------------------------------------------------------------
   Der Ablauf soll sich bewegen, ohne dass jemand etwas tun muss. Ein
   Lichtpunkt laeuft dauerhaft die Linie entlang, die Stationen blitzen auf,
   wenn er sie passiert. Kein Hover, kein Klick, kein Scroll noetig - das
   funktioniert auf dem Handy genauso wie am Rechner.
   ========================================================================== */

.timeline__rail { overflow: visible; }

/* Der Wagen ist 100 % breit; ihn um 100 % zu verschieben bewegt den Punkt
   exakt ueber die ganze Schiene. So wird nur transform animiert. */
.timeline__carrier {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.timeline__spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent),
              0 0 22px 6px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* Schweif hinter dem Punkt. */
.timeline__spark::before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 96px;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(270deg, color-mix(in oklab, var(--accent) 85%, transparent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .timeline__carrier { animation: rail-travel 4.4s cubic-bezier(.5, 0, .5, 1) infinite; }
  @keyframes rail-travel {
    0%        { transform: translateX(0); }
    88%, 100% { transform: translateX(100%); }
  }

  /* Die Stationen blitzen auf, wenn das Signal sie erreicht. */
  .timeline__step::after { animation: dot-ping 4.4s ease-out infinite; }
  .timeline__steps > :nth-child(1) { --t: 0s; }
  .timeline__steps > :nth-child(2) { --t: 1.1s; }
  .timeline__steps > :nth-child(3) { --t: 2.2s; }
  .timeline__steps > :nth-child(4) { --t: 3.3s; }
  .timeline__step::after { animation-delay: var(--t, 0s); }

  @keyframes dot-ping {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
    6%       { transform: scale(1.5); box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent); }
    24%      { transform: scale(1); }
  }

  /* Auf Mobil laeuft das Signal senkrecht. */
  @media (max-width: 859px) {
    .timeline__carrier { animation-name: rail-travel-y; }
    @keyframes rail-travel-y {
      0%        { transform: translateY(0); }
      88%, 100% { transform: translateY(100%); }
    }
    .timeline__spark::before {
      right: auto; left: 50%;
      top: auto; bottom: 50%;
      width: 3px; height: 96px;
      transform: translateX(-50%);
      background: linear-gradient(0deg, color-mix(in oklab, var(--accent) 85%, transparent), transparent);
    }
  }
}

/* Ohne Bewegung bleibt der Punkt am Anfang stehen - sichtbar, aber ruhig. */
@media (prefers-reduced-motion: reduce) {
  .timeline__carrier, .timeline__step::after { animation: none; }
}

/* Auf Mobil braucht der Wagen eine eigene senkrechte Schiene. */
@media (max-width: 859px) {
  .timeline__rail {
    display: block;
    top: 8px; bottom: 8px;
    left: 7px; right: auto;
    width: 2px; height: auto;
  }
  .timeline__progress { display: none; }
}

/* ==========================================================================
   22. AUTOMATISCHER DURCHLAUF (Parcours & Lizenzen)
   --------------------------------------------------------------------------
   Beide Bausteine schalten von selbst weiter, damit sie auch ohne Maus und
   ohne Klick etwas zeigen. Sobald jemand selbst auswaehlt, hoert das auf -
   ab dann fuehrt der Nutzer, nicht die Seite.
   ========================================================================== */

.autoplay-bar {
  position: relative;
  height: 2px;
  margin-top: var(--sp-4);
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.autoplay-bar span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.autoplay-bar.is-running span { animation: autoplay-fill var(--dwell, 5s) linear forwards; }
@keyframes autoplay-fill { to { transform: scaleX(1); } }

/* Ist der Durchlauf gestoppt, verschwindet der Balken lautlos. */
.autoplay-bar.is-off { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .autoplay-bar { display: none; }
}