/* ═══════════ MODERN CSS RESET ═══════════ */

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

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal, 1.6);
}

/* Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt keine
   Animationen. Betrifft Vestibularstörungen und ist ein Lighthouse-/BFSG-Punkt.
   Nicht auf 0 setzen, sondern auf 0.01ms: sonst feuern onTransitionEnd-Handler
   nicht mehr und JS, das darauf wartet, bleibt hängen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

textarea {
  white-space: revert;
}

/* ═══════════ FONTS (self-hosted, DSGVO) ═══════════ */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 400 700; /* Variable Font — deckt 400/500/600/700 ab */
  font-style: normal;
  font-display: swap;
}

/* ═══════════ CUSTOM PROPERTIES ═══════════ */
/* Marke Tim Haaf — Farben gemessen aus Logo + Mappe (briefing.md §5) */

:root {
  --color-primary: #0d6869;        /* Teal: Akzente, Buttons, Card-Koepfe */
  --color-primary-hover: #0a5254;
  --color-navy: #001e40;           /* Headlines, Wortmarke */
  --color-text: #001e40;
  --color-text-soft: #3b506b;      /* Fliesstext auf hellem Grund */
  --color-text-muted: #5c6e84;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f3f1;         /* Creme-Flaechen (Mappe-Grund) */
  --color-creme: #f4f3f1;          /* v5: Creme für Hintergruende */
  --color-tint: #e7edee;           /* Zitat-Boxen, helle Panels */
  --color-teal-soft: #e3eeee;      /* v5: Teal-soft Hintergrund */
  --color-border: #e4e1db;
  --color-line: #dde6e6;           /* v5: Linien-Farbe */
  --color-gold: #fbbc04;           /* v5: Google-Sterne gelb */
  --color-success: #107c41;
  --color-error: #b3261e;

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --section-pad: clamp(5.75rem, 11.5vw, 10.75rem);

  --container-max: 76rem;
  --container-padding: 2rem;

  /* v5: weniger Rundungen */
  --radius: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;   /* Cookie-Modal (_cookie-consent.css) — war nie definiert, die Zeile fiel still aus */
  --radius-pill: 999px;
}

/* ═══════════ BODY ═══════════ */

/* Basis-Schrift 19px: Zielgruppe 45-70 + Hanken wirkt bei gleicher Größe kleiner als Poppins (x-Höhe) */
html {
  font-size: 118.75%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-soft);
  background-color: var(--color-bg);
  line-height: 1.6;
  /* Footer bleibt unten, auch wenn die Seite kurz ist. Ohne das rutscht er auf
     inhaltsarmen Seiten (Fehler, Danke, 404) mitten ins Bild und darunter klafft
     leere Flaeche. Der Hauptbereich dehnt sich stattdessen auf den Rest aus. */
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-navy);
  font-weight: 700; /* Hanken Grotesk Bold — 600 wirkt bei Hanken zu leicht (Alex) */
}

h2 {
  /* Fluid statt fest: Bei 2,2rem passte auf dem Handy kein laengeres Wort mehr in
     die Zeile, und die Silbentrennung sprang an ("gemeinsa-men Training"). Die
     Trennung selbst bleibt richtig und noetig, sie soll nur nicht der Normalfall
     sein. Untergrenze bewusst nicht kleiner: Zielgruppe 45 bis 70. */
  font-size: clamp(1.65rem, 5.2vw, 2.2rem);
  line-height: 1.2;
}

/* ═══════════ CONTAINER ═══════════ */

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

/* ═══════════ PROSE ═══════════ */

/* Text-/Rechtsseiten (page.njk: Impressum, Datenschutz, …): konsistenter vertikaler
   Abstand zu Nav und Footer. .page hatte zuvor kein Padding → Inhalt klebte am Footer. */
.page { padding-block: clamp(3rem, 6vw, 5rem); }
.page > .prose > :first-child { margin-block-start: 0; }

.prose h1 { font-size: 2.25rem; line-height: 1.2; margin-block: var(--space-lg) var(--space-md); }
.prose h2 { font-size: 1.75rem; line-height: 1.25; margin-block: var(--space-lg) var(--space-sm); }
.prose h3 { font-size: 1.375rem; line-height: 1.3; margin-block: var(--space-lg) var(--space-sm); }
.prose p { margin-block-end: var(--space-md); }
.prose ul, .prose ol { margin-block-end: var(--space-md); padding-inline-start: var(--space-lg); }
.prose li { margin-block-end: var(--space-xs); }
.prose blockquote {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--space-md);
  color: var(--color-text-muted);
  margin-block-end: var(--space-md);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  padding: 0.125em 0.25em;
  border-radius: var(--radius);
}
.prose pre {
  background: var(--color-bg-alt);
  padding: var(--space-md);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-block-end: var(--space-md);
}
.prose pre code {
  background: none;
  padding: 0;
}

/* ═══════════ HEADINGS ═══════════ */

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  text-wrap: balance;
  /* Deutsche Komposita mit Bindestrich trennen statt hart umbrechen (braucht
     lang="de" am html-Element). Ohne das bricht z.B. "Suchmaschinenoptimierung"
     in schmalen Containern mitten im Wort ohne Bindestrich. */
  hyphens: auto;
  /* Aber erst ab echten Bandwurmwoertern. Ohne diese Grenze trennt der Browser
     auch normale Woerter, sobald text-wrap: balance die Zeilen ausgleichen will:
     Auf dem Handy stand "Erfahrungen aus dem gemeinsa-men Training", obwohl das
     Wort ungetrennt in die Zeile gepasst haette. 14 Zeichen Mindestlaenge laesst
     "gemeinsamen" (11) in Ruhe und trennt "Suchmaschinenoptimierung" (24)
     weiterhin. Die zweite und dritte Zahl sind die Mindestzeichen vor und nach
     dem Bindestrich, damit keine Zwei-Buchstaben-Schnipsel entstehen.
     Wo der Browser die Eigenschaft nicht kennt, bleibt es beim bisherigen
     Verhalten, es geht also nichts verloren. */
  hyphenate-limit-chars: 14 5 5;
}

/* ═══════════ LINKS ═══════════ */

a {
  color: var(--color-primary);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--color-primary-hover);
}

/* ═══════════ SKIP LINK ═══════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ═══════════ BUTTON ═══════════ */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────
   Responsive Images — Base Styles
   Add these rules to your main stylesheet.
   Required for proper responsive behavior and CLS prevention.
   ───────────────────────────────────────────────────────── */

/* Core responsive image behavior + CLS prevention */
img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* Ensure <picture> wrapper doesn't break layout */
picture {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Hero Image — Optional utility class
   Apply to the hero <img> or wrapping <picture> element.
   Use with eleventy:pictureattr:class="hero-image" on the <img>.
   ───────────────────────────────────────────────────────── */
.hero-image {
  inline-size: 100%;
}

.hero-image img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────
   Content Images — Optional styling
   Images within the main content column.
   ───────────────────────────────────────────────────────── */
.content img,
.prose img {
  border-radius: var(--radius-sm);
  margin-block: 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   Thumbnail / Card Images — Optional
   For card grid layouts with fixed aspect ratio.
   ───────────────────────────────────────────────────────── */
.card-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ═══════════ SECTION SYSTEM v5 ═══════════ */

/* Jede Sektion traegt die HAELFTE des Abstands. Zwei benachbarte ergeben
   zusammen --section-pad, und jede farbige Flaeche hat dadurch garantiert
   Innenabstand. Wichtig: NIE eine Sektion auf padding-block-start: 0 setzen,
   um Doppelabstaende zu vermeiden. Genau daran ist es frueher gescheitert,
   weil jede neue getoente Klasse in einer Ausnahmeliste nachgetragen werden
   musste und beim Vergessen ihr Inhalt an der Farbkante klebte. */
.section {
  padding-block: calc(var(--section-pad) / 2);
}

/* Section backgrounds */
.section--hero {
  background-color: var(--color-teal-soft);
}

.section--ziel {
  background-color: var(--color-creme);
}

.section--zitat {
  background-color: var(--color-teal-soft);
}

.section--ablauf {
  background-color: var(--color-creme);
}

.section--ueber {
  background-color: var(--color-teal-soft);
}

/* Padding collapse rules (aus CLAUDE.md) */
.section + .section--ziel,
.section + .section--zitat,
.section + .section--ablauf,
.section + .section--ueber {
  padding-block-start: calc(var(--section-pad) / 2);
}

.section:has(+ .section--ziel),
.section:has(+ .section--zitat),
.section:has(+ .section--ablauf),
.section:has(+ .section--ueber) {
  padding-block-end: calc(var(--section-pad) / 2);
}

.section--ziel + .section,
.section--zitat + .section,
.section--ablauf + .section,
.section--ueber + .section {
  padding-block-start: calc(var(--section-pad) / 2);
}

.section--ziel:has(+ .section),
.section--zitat:has(+ .section),
.section--ablauf:has(+ .section),
.section--ueber:has(+ .section) {
  padding-block-end: calc(var(--section-pad) / 2);
}

/* Netzwerk ist ungetoent und steht zwischen ungetoenten Nachbarn. Ohne eigene
   Kollaps-Regel bekaeme jede Kante volles Padding = doppelter Abstand.
   Deshalb an beiden Kanten halbieren, Summe bleibt --section-pad. */
.section--netzwerk {
  padding-block: calc(var(--section-pad) / 2);
}
.section--netzwerk + .section {
  padding-block-start: calc(var(--section-pad) / 2);
}
.section:has(+ .section--netzwerk) {
  padding-block-end: calc(var(--section-pad) / 2);
}

/* Hero: oben grosszuegig, unten normales halbes Padding (Beine sind IM Bild geschnitten) */
.section--hero {
  padding-block: clamp(3.6rem, 5.5vw, 5rem) 0; /* Bild reicht bis zur Unterkante */
  overflow: hidden;
}

/* Erster Block nach dem Hero: gleiches (halbes) Top-Padding wie alle anderen
   Blöcke, damit es konsistent ist (vorher volles Padding = optisch groesser). */
.section--hero + .section {
  padding-block-start: calc(var(--section-pad) / 2);
}

/* Kontakt-Panel bringt eigene Farbfläche mit — Abstand zur weißen Vorgänger-Sektion teilen */
.section:has(+ .section--kontakt) {
  padding-block-end: calc(var(--section-pad) / 2);
}

.section--kontakt {
  padding-block: calc(var(--section-pad) / 2);
}

/* Letzte Sektion vor dem Footer: voller Abstand nach unten. Vorher ergab sich
   das zufaellig daraus, dass .section volles Padding trug und es niemand
   reduzierte. Jetzt ist es eine bewusste Regel. */
.section:last-of-type,
.cta-sec:last-of-type {
  padding-block-end: var(--section-pad);
}

/* Section header */
.section__header {
  text-align: center;
  margin-block-end: 3.6rem;
}

/* Eyebrow */
.eyebrow {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.82rem;
  font-weight: 600;
  margin-block-end: 0.7rem;
}

/* Buttons
   WICHTIG: inline-block statt inline-flex. Bei inline-flex wird das Icon-SVG
   zum eigenen Flex-Item und wandert bei umbrechendem Label (mobil, langes Label)
   an den rechten Rand. inline-block laesst Label + Icon zusammen im Textfluss. */
.btn {
  display: inline-block;
  text-align: center;
  text-wrap: balance;
  line-height: 1.35;
  padding: 0.95rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.02rem;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

/* Icon fliesst inline direkt hinter dem Label (statt eigenes Flex-Item).
   Der Abstand kommt aus margin-inline-start, nicht mehr aus gap. Im HTML darf
   KEIN Leerzeichen vor dem <svg> stehen, sonst bricht das Icon allein um. */
.btn svg {
  display: inline-block;
  vertical-align: -0.15em;
  margin-inline-start: 0.5em;
}

/* Homepage-Hero-Buttons bleiben bewusst Flex (gleiche Hoehe, Phone-Chip daneben):
   dort kommt der Icon-Abstand aus gap -> margin hier neutralisieren (kein Doppelabstand). */
.hero__buttons .btn svg {
  margin-inline-start: 0;
}

.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(13, 104, 105, 0.3);
  background-color: var(--color-primary-hover);
  color: #ffffff;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* Stars */
.stars {
  color: var(--color-gold);
  letter-spacing: 0.1em;
}

/* ═══════════ HERO v5 ═══════════ */

.hero {
  display: grid;
  gap: 4rem;
  align-items: end;
}

.hero > * {
  min-width: 0; /* Grid-Blowout verhindern (min-width: auto) */
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero__content {
  align-self: center;
  padding-block: 1rem 3.5rem;
}

@media (max-width: 899px) {
  .hero__content {
    padding-block: 1rem 2rem;
  }
}

/* Kicker = echte H1 (SEO), optisch klein wie Eyebrow */
.hero__kicker {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.9rem;
  max-width: 30rem;
}

/* Display = optischer Titel (Absatz, kein H-Tag) */
.hero__display {
  hyphens: manual; /* "Gesundheitsorientiertes" nicht mit Trennstrich brechen */
  font-size: clamp(2.1rem, 4.2vw, 3.15rem);
  line-height: 1.1;
  color: var(--color-navy);
  font-weight: 700;
  /* letzter Wert = optische Korrektur: rundes G buendig zur flachen Kicker-Kante */
  margin: 0 0 1.2rem -0.045em;
}

.hero__display em {
  font-style: normal;
  color: var(--color-primary);
}

.hero__intro {
  font-size: 1.2rem;
  max-width: 31rem;
  margin-block-end: 2rem;
  color: #33475e;
}

/* CTA-Zone: zwei Wege (Button + Anruf) als Gruppe, EINE Mikro-Zeile, dann Luft */
.hero__buttons {
  display: flex;
  align-items: stretch;
  gap: 1.1rem;
  margin-block-end: 1.1rem;
  flex-wrap: wrap;
}

/* Beide Hero-Buttons exakt gleich hoch: min-height ueber der natuerlichen Btn-Hoehe,
   damit sie auch beim Umbruch (schmaler Hero) identisch bleiben, Inhalt zentriert. */
.hero__buttons > a {
  min-height: 3.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.hero__buttons .btn {
  gap: 0.5rem;
}

.hero__phone-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: transparent;
  border: 1.5px solid rgba(13, 104, 105, 0.4);
  border-radius: 10px;
  padding: 0.45rem 2.4rem 0.45rem 1.7rem;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.hero__phone-chip:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.5);
}

.hero__phone-chip svg {
  flex: none;
  color: var(--color-primary);
}

.hero__phone-chip b {
  display: block;
  color: var(--color-navy);
  font-size: 1.02rem;
  line-height: 1.15;
}

.hero__phone-chip small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.1;
}

.hero__reassure {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.7rem;
  list-style: none;
  padding: 0;
  margin: 2.4rem 0 0;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.98rem;
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.hero__facts svg {
  flex: none;
}

.hero__stage {
  position: relative;
  align-self: end;
  display: flex;
  justify-content: center;
}

.hero__circle {
  position: absolute;
  inset: auto 0 -1px 50%;
  translate: -50% 0;
  z-index: 0;
  width: min(30rem, 100%);
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.4;
}

.hero__stage img {
  /* Bild groesser (--hero-scale), aber Kopf bleibt fix und die SEKTIONSHOEHE
     bleibt konstant bei `base` (950px = gutes Padding): der negative Bottom-Margin
     (= base * -(scale-1)) hebt die Mehrhoehe aus dem Layout, sie ragt unten raus
     und wird vom overflow:hidden der .section--hero geschnitten (Beinanschnitt).
     Getrimmtes Bild (schmale Bbox) → width:auto bleibt < Spalte → KEINE max-width-Klemme, keine Verzerrung. */
  --hero-base: clamp(34rem, 55vw, 50rem);
  --hero-scale: 1.4;
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: calc(var(--hero-base) * var(--hero-scale));
  max-width: 100%;
  margin: 0 auto calc(var(--hero-base) * (1 - var(--hero-scale)));
  filter: drop-shadow(0 18px 30px rgba(0, 30, 64, 0.16));
}

.hero__trust {
  position: absolute;
  left: 0;
  bottom: 7.5rem;
  z-index: 3; /* immer VOR dem Bild */
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #ffffff;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 16px 32px rgba(0, 30, 64, 0.14);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-navy);
}

.hero__trust b {
  display: block;
  color: var(--color-navy);
  font-size: 0.98rem;
  line-height: 1.25;
}

.hero__trust small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

@media (max-width: 899px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero__stage {
    max-width: 24rem;
    margin-inline: auto;
  }

  .hero__stage img {
    /* Mobile: volles Bild, kein Anschnitt, kein negativer Margin */
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .hero__circle {
    width: min(20rem, 92%);
  }
}

/* ═══════════ WARUM (Magazin-Kacheln) ═══════════ */

.warum-kopf {
  max-width: 40rem;
  margin-block-end: 3rem;
}

.warum-kopf p {
  margin-block-start: 1rem;
}

.kacheln-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 1000px) {
  .kacheln-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════ VORTEILE-CARDS (Mappe-Stil S.3) ═══════════ */
.vorteile-kopf {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
}
.vorteile-kopf .eyebrow {
  justify-content: center;
}
.vorteile-intro {
  margin-top: 1.1rem;
  color: var(--color-text-soft);
  line-height: 1.6;
  max-width: 44rem;
  margin-inline: auto;
}
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  max-width: 62rem;
  margin-inline: auto;
  align-items: stretch; /* gleiche Kartenhoehe -> Header buendig */
}
@media (max-width: 900px) {
  .vorteile-grid {
    grid-template-columns: 1fr;
    max-width: 30rem;
    margin-inline: auto;
  }
}
.vorteile-card {
  background: var(--color-creme);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 30, 64, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vorteile-card__head {
  background: var(--color-primary);
  color: #ffffff;
  padding: 1.6rem 1.25rem 1.35rem;
  min-height: 9.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
}
.vorteile-card__icon {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  color: #ffffff;
}
.vorteile-card__icon svg {
  width: 100%;
  height: 100%;
}
.vorteile-card__titles b {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.vorteile-card__titles span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.92rem;
  opacity: 0.85;
}
.vorteile-card__list {
  list-style: none;
  margin: 0;
  padding: 1.4rem 1.5rem 1.6rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  flex: 1; /* fuellt die Karte -> gleiche Hoehe */
}
.vorteile-card__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-navy);
  font-weight: 600;
}
.vorteile-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-primary);
}

@media (max-width: 640px) {
  .kacheln-grid {
    grid-template-columns: 1fr;
  }
  /* Hero-CTA: langer Label ("Kostenloses Kennenlernen") soll einzeilig bleiben.
     Ursache des Umbruchs war das grosse horizontale Padding (2rem), nicht die
     Schrift. Padding reduzieren + nowrap statt Text kuerzen. */
  .hero__buttons .btn {
    padding-inline: 1.2rem;
    font-size: 1rem;
    white-space: nowrap;
  }
}

.kachel img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin-block-end: 1.1rem;
}

.kachel h3 {
  margin-block-end: 0.4rem;
  font-size: 1.2rem;
  color: var(--color-navy);
  font-weight: 600;
}

.kachel p {
  font-size: 0.98rem;
  color: var(--color-text-soft);
}

/* ═══════════ ZIELGRUPPE ═══════════ */

.ziel-split {
  display: grid;
  grid-template-columns: minmax(0, 540px) 1fr;
  gap: 6rem;
  align-items: center;
  padding-inline-start: clamp(0rem, 4vw, 3.5rem);
}

@media (max-width: 1000px) {
  .ziel-split {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-inline-start: 0;
  }
}

.ziel__foto {
  position: relative;
  width: 100%;
  max-width: 540px;
}

.ziel__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0, 30, 64, 0.16);
  display: block;
}

.stat-card {
  position: absolute;
  right: -1rem;
  bottom: 1.6rem;
  background: #ffffff;
  border-radius: var(--radius);
  padding: 0.95rem 1.3rem;
  box-shadow: 0 16px 32px rgba(0, 30, 64, 0.16);
}

.stat-card b {
  display: block;
  color: var(--color-primary);
  font-size: 1.4rem;
  line-height: 1.1;
}

.stat-card span {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.ziel__content h2 {
  margin-block-end: 1.2rem;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-navy);
}

.ziel__content p {
  margin-block-end: 1rem;
  color: var(--color-text-soft);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.6rem;
  display: grid;
  gap: 0.7rem;
}

.check-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #ffffff;
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  color: var(--color-navy);
  font-weight: 500;
}

.check-list svg {
  flex: none;
  margin-top: 4px;
}

/* ═══════════ LEISTUNGEN SELECTOR ═══════════ */

.leist-kopf {
  max-width: 40rem;
  margin-block-end: 3rem;
}
.leist-kopf p:not(.eyebrow) {
  margin-block-start: 1rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.selector {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 1000px) {
  .selector {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.selector__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.selector__item {
  display: block;
  width: 100%;
  padding: 1.3rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text-muted);
  transition: background 0.15s;
  text-align: left;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}

.selector__item h3 {
  font-size: 1.4rem;
  color: inherit;
  font-weight: 600;
  margin: 0;
}

/* Kurzbeschreibung unter JEDER Headline (nicht nur aktiv) -> fuellt die Luecken */
.selector__item small {
  display: block;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.35;
  margin-top: 0.3rem;
}

.selector__item:hover {
  background: var(--color-creme);
}

.selector__item--active {
  background: var(--color-teal-soft);
  color: var(--color-navy);
}

.selector__item--active small {
  color: var(--color-primary);
  font-weight: 600;
}

.selector__display {
  position: relative;
}

.selector__slide {
  display: none;
  position: relative;
}

.selector__slide--active {
  display: block;
}

.selector__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  min-height: 27rem;
  box-shadow: 0 24px 48px rgba(0, 30, 64, 0.16);
}

.selector__info {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1.3rem;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  box-shadow: 0 16px 32px rgba(0, 30, 64, 0.16);
}

.selector__info b {
  color: var(--color-primary);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.selector__info p {
  font-size: 1rem;
  color: var(--color-text-soft);
  margin-top: 0.3rem;
}

.selector__info a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98rem;
  display: inline-block;
  margin-top: 0.6rem;
}

@media (max-width: 1000px) {
  .selector__list {
    order: 2;
  }

  .selector__display {
    order: 1;
  }

  .selector__slide img {
    min-height: 20rem;
  }
}

/* ═══════════ ZITAT ═══════════ */

.zitat-stage {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.zitat-stage blockquote {
  font-size: clamp(1.45rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--color-navy);
  font-weight: 500;
  text-wrap: balance;
  margin: 0 0 2rem;
}

.zitat__author {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.zitat__author img {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 30, 64, 0.18);
}

.zitat__author b {
  display: block;
  color: var(--color-navy);
  font-size: 1rem;
}

.zitat__author span {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ═══════════ REVIEWS ═══════════ */

.reviews-kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-block-end: 2.6rem;
  flex-wrap: wrap;
}

.google-badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-creme);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
  text-decoration: none;
  color: var(--color-navy);
}

.google-badge b {
  color: var(--color-navy);
  font-size: 1.05rem;
  display: block;
  line-height: 1.2;
}

.google-badge small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* ---- Bewertungen als Schieber ----
   Grundlage ist scroll-snap, nicht JavaScript. Ohne Skript bleibt es eine
   wischbare Reihe, in der alle Rezensionen erreichbar sind; das Skript ergaenzt
   Pfeile, Punkte und Zaehler. Deshalb steht hier auch keine Regel, die Slides
   versteckt: Was das JS nicht einblendet, faellt weg, nicht der Inhalt. */
.reviews-slider {
  position: relative;
}

.reviews-slider__viewport {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Blendet die Systemleiste aus, gescrollt wird trotzdem. */
  scrollbar-width: none;
  /* Fokusrahmen der Tastaturbedienung nicht am Kartenrand abschneiden. */
  padding: 4px;
  margin: -4px;
}

.reviews-slider__viewport::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-slider__viewport {
    scroll-behavior: auto;
  }
}

.review-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  /* Bildspalte fest, Textspalte nimmt den Rest. Faellt das Bild weg, bleibt
     eine Spalte uebrig und die Karte funktioniert unveraendert (siehe unten). */
  /* Die Bildspalte ist bewusst schmal gehalten, damit sie zusammen mit der
     Kartenhoehe (rund 450 bis 520px) ungefaehr im Hochformat 3:4 steht. Genau in
     dem Verhaeltnis kommen Fotos vom Handy, ein solches Bild fuellt die Flaeche
     also nahezu vollstaendig aus: kein Rand, fast kein Beschnitt.
     NICHT ueber aspect-ratio loesen: Die Spaltenbreite steht fest, bevor die
     Zeilenhoehe berechnet ist, die Zelle faellt dann auf ihre Mindestbreite
     zurueck (gemessen: 200px statt 340px). */
  grid-template-columns: minmax(0, clamp(240px, 30%, 360px)) minmax(0, 1fr);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Ohne Bild: eine Spalte, damit der Text nicht in der halben Karte klebt. */
.review-slide:not(:has(.review-slide__media)) {
  grid-template-columns: 1fr;
}

/* Die Hoehe der Karte bestimmt der Text, nicht das Bild. Deshalb liegt das Bild
   absolut in seiner Zelle: Stuende es im Fluss, zoege ein Hochformat die ganze
   Karte auf ein Vielfaches (gemessen: 1224px statt 426px), und Tim laedt im
   Backend Bilder in beliebigem Format hoch. Die Mindesthoehe verhindert den
   umgekehrten Fall, dass ein sehr kurzes Zitat das Bild zur Briefmarke staucht. */
/* Die Hoehe der Karte bestimmt der Text, nicht das Bild. Deshalb liegt das Bild
   absolut in seiner Zelle: Stuende es im Fluss, zoege ein Hochformat die ganze
   Karte auf ein Vielfaches (gemessen: 1224px statt 426px), und Tim laedt im
   Backend Bilder in beliebigem Format hoch. */
.review-slide__media {
  position: relative;
  min-block-size: 300px;
}

.review-slide__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* cover, weil die Zelle jetzt selbst hochkant ist: Ein 3:4-Foto fuellt sie exakt,
     es entsteht also weder Rand noch Beschnitt. Nur ungewoehnliche Formate werden
     an den Kanten angeschnitten, und das faellt bei einem Personenfoto seitlich
     kaum auf. Verzerrt wird nie. */
  object-fit: cover;
  /* Etwas oberhalb der Mitte, damit bei einem sehr hohen Bild der Kopf im Bild
     bleibt statt als Erstes wegzufallen. */
  object-position: 50% 35%;
  display: block;
}

.review-slide__body {
  padding: 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-slide__mark {
  color: var(--color-primary);
  line-height: 1;
  margin-block-end: 0.7rem;
}

/* Ausgefuellt statt als Kontur. Lucide liefert alle Icons als Strichzeichnung
   (fill: none, stroke: currentColor); hier wird das umgedreht. Der Pfad ist
   geschlossen, die Fuellung ergibt also die satte Komma-Form, die man von
   Zitatzeichen kennt, waehrend die duenne Kontur neben dem Text verloren wirkte. */
.review-slide__mark svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
  stroke: none;
}

.review-slide .stars {
  font-size: 1rem;
  display: block;
  margin-block-end: 0.9rem;
}

.review-slide__text p {
  font-size: 1rem;
  color: var(--color-text-soft);
  margin-block-end: 0.9rem;
}

.review-slide__text p:last-child {
  margin-block-end: 0;
}

.review-slide__author {
  margin-block-start: 1.4rem;
}

.review-slide__author b {
  color: var(--color-navy);
  font-size: 1rem;
  display: block;
}

.review-slide__author span {
  color: var(--color-primary);
  font-size: 0.9rem;
}

/* Pfeile. Sitzen ausserhalb der Karte, damit sie den Text nicht verdecken. */
.reviews-slider__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-line);
  background: #ffffff;
  color: var(--color-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}

.reviews-slider__nav svg {
  width: 22px;
  height: 22px;
}

.reviews-slider__nav:hover:not(:disabled) {
  background: var(--color-primary);
  color: #ffffff;
}

.reviews-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.reviews-slider__nav--prev {
  left: -22px;
}

.reviews-slider__nav--next {
  right: -22px;
}

.reviews-slider__leiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block-start: 1.4rem;
}

.reviews-slider__punkte {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reviews-slider__punkt {
  inline-size: 9px;
  block-size: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-line);
  cursor: pointer;
  transition: inline-size var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s);
}

.reviews-slider__punkt[aria-selected="true"] {
  inline-size: 26px;
  background: var(--color-primary);
}

.reviews-slider__zaehler {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

/* Mobil: Bild oben, Text darunter. Nebeneinander waere beides zu schmal, und
   ein angeschnittenes Hochformat neben drei Zeilen Text sieht gequetscht aus. */
@media (max-width: 820px) {
  .review-slide {
    grid-template-columns: 1fr;
  }

  .review-slide__media {
    min-block-size: 0;
    aspect-ratio: 16 / 10;
  }

  .review-slide__body {
    padding: 1.6rem 1.5rem;
  }

  /* Mobil KEIN Schieber, sondern Karten untereinander.
     Grund, gemessen am 14.08.2026: In der Flex-Reihe werden alle Karten auf die
     Hoehe der laengsten gezogen. Bei 390px Breite ergab das 1037px pro Karte,
     waehrend die kuerzeste Bewertung nur 213px Text hat: 824px Leerraum, in dem
     ein paar Zeilen Zitat schwimmen. Die Hoehe stattdessen freizugeben hilft
     nicht, dann springt die Seite bei jedem Blaettern.
     Gestapelt loest sich beides: Jede Karte ist so hoch wie ihr Text, und auf
     dem Handy scrollt man ohnehin, statt zu wischen. Die Bedienelemente werden
     dann nicht nur ausgeblendet, das Skript baut sie gar nicht erst auf
     (siehe reviews-slider.js). */
  .reviews-slider__viewport {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
  }

  .review-slide {
    scroll-snap-align: none;
    margin-block-end: 1rem;
  }

  .review-slide:last-child {
    margin-block-end: 0;
  }

  .reviews-slider__nav,
  .reviews-slider__leiste {
    display: none;
  }
}

/* ═══════════ ABLAUF ═══════════ */

.ablauf__cta {
  text-align: center;
  margin-block-start: 2.6rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}

@media (max-width: 1000px) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

.step-card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 1.8rem 1.2rem 1.5rem;
  position: relative;
  text-align: center;
}

.step-card__num {
  position: absolute;
  top: -1.05rem;
  left: 50%;
  translate: -50% 0;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 8px;
  padding: 0.3rem 0.9rem;
  box-shadow: 0 0 0 6px var(--color-creme);
}

.step-card h3 {
  font-size: 1.05rem;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--color-navy);
  font-weight: 600;
  hyphens: none;
}

.step-card p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ═══════════ ÜBER TIM ═══════════ */

.ueber-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4.5rem;
  align-items: center;
}

@media (max-width: 1000px) {
  .ueber-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.ueber__stage {
  position: relative;
  text-align: center;
}

.ueber__circle {
  display: none; /* kein Kreis mehr — sauberes gerahmtes Foto */
}

.ueber__stage img {
  /* Realistisches gerahmtes Foto (Tim im Trainingsraum): kein Anschnitt, kein Schweben */
  position: relative;
  width: min(100%, 23rem);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(0, 30, 64, 0.18);
  margin-inline: auto;
  display: block;
}

.ueber__content h2 {
  margin-block-end: 1.2rem;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-navy);
}

.ueber__content p {
  color: var(--color-text-soft);
  margin-block-end: 1.6rem;
}

.quali-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr; /* alle Boxen gleich hoch (Alex: ungleiche Groessen sahen schlecht aus) */
  gap: 1rem;
  margin: 1.6rem 0 1.9rem;
}

@media (max-width: 640px) {
  .quali-badges {
    grid-template-columns: 1fr;
  }
}

.quali-badge {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.98rem;
  box-shadow: 0 6px 16px rgba(0, 30, 64, 0.06);
  min-width: 0;
}

.quali-badge svg {
  flex: none;
  stroke: var(--color-primary);
}

/* ═══════════ EINZUGSGEBIET ═══════════ */

.gebiet-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 1000px) {
  .gebiet-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.gebiet__karte {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  aspect-ratio: 400 / 366;
  overflow: visible;
}

.gebiet__karte svg {
  width: 100%;
  height: 100%;
}

.gebiet__content h2 {
  margin-block-end: 1.2rem;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-navy);
}

.gebiet__content p {
  color: var(--color-text-soft);
}

.gebiet__liste {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  color: var(--color-navy);
  font-weight: 500;
}

@media (max-width: 520px) {
  .gebiet__liste {
    grid-template-columns: 1fr; /* "Hochtaunuskreis" sprengt sonst die halbe Spalte */
  }
}

.gebiet__liste li {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.gebiet__liste svg {
  flex: none;
}

.gebiet__note {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ═══════════ KONTAKT ═══════════ */

.kontakt-panel {
  --kontakt-pad: 3.5rem;
  background: var(--color-primary);
  border-radius: var(--radius);
  padding: var(--kontakt-pad);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: start;
  color: #ffffff;
}
/* Grid-Blowout verhindern: Formular-Inputs erzwingen sonst Ueberbreite (mobil) */
.kontakt-panel > * {
  min-width: 0;
}

@media (max-width: 1000px) {
  .kontakt-panel {
    grid-template-columns: 1fr;
    padding: 2.5rem;
    gap: 2.5rem;
  }
}

.kontakt-panel h2 {
  color: #ffffff;
  margin-block-end: 0.9rem;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 600;
}

.kontakt-panel__lead {
  color: rgba(255, 255, 255, 0.9);
  margin-block-end: 1.8rem;
}

.kontakt-panel__phone {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  color: #ffffff;
  text-decoration: none;
  margin-block-end: 1rem;
  min-width: 0;
}
.kontakt-panel__phone span {
  min-width: 0;
}
.kontakt-panel__phone small {
  overflow-wrap: anywhere;
}

.kontakt-panel__phone:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.kontakt-panel__phone svg {
  flex: none;
}

.kontakt-panel__phone b {
  display: block;
  font-size: 1.05rem;
}

.kontakt-panel__phone small {
  color: rgba(255, 255, 255, 0.78);
}

.kontakt-panel__mail {
  display: inline-block;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  margin-block-end: 1rem;
  word-break: break-word;
}
.kontakt-panel__mail:hover {
  color: #ffffff;
  opacity: 0.85;
}

.kontakt-panel__hint {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.kontakt-panel__form {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: 0 24px 48px rgba(0, 20, 40, 0.2);
}

/* ═══════════ FOCUS STATES ═══════════ */

.btn:focus-visible,
.selector__item:focus-visible,
.hero__trust:focus-visible,
.google-badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ═══════════ REDUCED MOTION ═══════════ */

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

  .btn--primary:hover {
    transform: none;
  }
}
/* ═══════════ PREIS-TEASER + FAQ (Abstands-Regeln) ═══════════ */
/* Preise (weiss) direkt nach einer weissen Sektion: einfacher Abstand.
   Ausnahme: nach getoenten Sektionen (z.B. Ablauf creme) volles Top-Padding,
   sonst klebt der weisse Block an der Farbkante. */
/* (entfallen: Halbes Padding ist jetzt der Standard, kein Nullsetzen noetig) */

/* FAQ getoente Sektion + Farbkanten */
.section--faq {
  background-color: var(--color-bg-alt);
}

.section + .section--faq {
  padding-block-start: calc(var(--section-pad) / 2);
}

.section:has(+ .section--faq) {
  padding-block-end: calc(var(--section-pad) / 2);
}

/* ═══════════ PREIS-TEASER (Variante A: Preis + Icon-Kacheln) ═══════════ */
.preis-kopf {
  max-width: 46rem;
  margin-block-end: 2rem;
}
.preis-kopf h2 {
  margin-block-end: 0.8rem;
}
.preis-lead {
  color: var(--color-text-soft);
  line-height: 1.6;
}

.preis-priceRow {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin-block-end: 1.6rem;
}
.preis-priceBig {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.preis-priceBig > div {
  min-width: 0;
}
.preis-pc {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--color-teal-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.preis-pc svg {
  width: 1.55rem;
  height: 1.55rem;
}
.preis-priceBig b {
  display: block;
  font-size: 1.55rem;
  color: var(--color-navy);
  line-height: 1.1;
}
.preis-priceBig b small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.preis-priceBig > div > span {
  display: block;
  margin-block-start: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.preis-cta {
  white-space: nowrap;
}

.preis-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-end: 1.4rem;
}
.preis-term {
  padding: 0.4rem 0.2rem;
}
.preis-term__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-end: 0.6rem;
}
.preis-term b {
  color: var(--color-navy);
}
.preis-term p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}
.preis-chip {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--color-teal-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.preis-chip svg {
  width: 1.4rem;
  height: 1.4rem;
}
.preis-chip--solid {
  background: var(--color-primary);
  color: #ffffff;
}
.preis-flex {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--color-tint);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
}
.preis-flex b {
  display: block;
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-block-end: 0.2rem;
}
.preis-flex p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .preis-terms {
    grid-template-columns: 1fr;
  }
  .preis-priceRow {
    flex-direction: column;
    align-items: stretch;
  }
  .preis-cta {
    text-align: center;
    white-space: normal;
  }
}

/* ═══════════ FAQ ═══════════ */
.faq-list {
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  gap: 0.8rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-navy);
}

.faq-item__chevron {
  flex: none;
  transition: transform 0.2s;
}

.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item__body {
  padding: 0 1.4rem 1.25rem;
}

.faq-item__body p {
  margin: 0;
  color: var(--color-text-soft);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}



/* ═══════════ HERO-QUALI (integrierte Leiste am Hero) ═══════════ */
.hero__quali {
  margin: 1.6rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(0, 30, 64, 0.12);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
}

.hero__quali-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.3;
  min-width: 0;
}

.hero__quali-item svg {
  flex: none;
}

@media (max-width: 860px) {
  .hero__quali {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .hero__quali {
    grid-template-columns: 1fr;
  }
}

/* Preis-Karte: Wert-Karte ohne Zahl */
.preis__card-title {
  font-weight: 600;
  color: var(--color-navy);
  font-size: 1.05rem;
  margin: 0 0 1.3rem;
}

.preis__card-note {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ═══════════ KONTAKT: Unterschrift + grosses angeschnittenes Bild ═══════════ */
.kontakt-panel__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.kontakt-panel__left > * {
  max-width: 100%;
}

.kontakt-panel {
  align-items: stretch;
}

/* Persona-Zeile unten: Bild links (angeschnitten) + Unterschrift rechts daneben */
.kontakt-panel__persona {
  margin-block-start: auto;
  padding-block-start: 2rem;
  display: flex;
  align-items: flex-end;
  gap: 1.6rem;
  width: 100%;
}

.kontakt-panel__figure {
  flex: none;
  width: min(250px, 52%);
  margin-block-end: calc(-1 * var(--kontakt-pad, 3.5rem));
}

.kontakt-panel__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.kontakt-panel__sign {
  flex: 1;
  min-width: 0;
  padding-block-end: 2.2rem;
}

.kontakt-panel__sign img {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  opacity: 0.95;
}

/* ═══════════ MOBILE-FEINSCHLIFF (Kunden-QA 2026-07-08) ═══════════ */
@media (max-width: 768px) {
  /* #3/#18/#26 Hero-Bild kompakter + Beine ueberm Knie angeschnitten (feste Buehnenhoehe) */
  .hero {
    gap: 1.5rem;
  }
  .hero__stage {
    max-width: 17rem;
    height: 25rem;
    overflow: hidden;
    align-self: end;
  }
  .hero__stage img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
  }
  .hero__trust {
    bottom: 2.4rem;
  }
  .hero__circle {
    width: min(16rem, 90%);
  }

  /* #4 Text im Block unter dem Hero (Vorteile) linksbuendig statt zentriert */
  .vorteile-kopf {
    text-align: left;
    margin-inline: 0;
    max-width: none;
  }
  .vorteile-kopf .eyebrow {
    justify-content: flex-start;
  }
  .vorteile-intro {
    margin-inline: 0;
    max-width: none;
  }

  /* #5 + #8 Leistungen: Selector -> gestapelte Karten (kein Tab-Umschalten mobil,
     alle Bilder sichtbar, Info als Karte unter dem Bild statt verdeckendes Overlay) */
  .selector {
    display: block;
  }
  .selector__list {
    display: none;
  }
  /* Jede Leistung = eine Karte: Bild oben, Text sauber darunter (kein Overlap) */
  .selector__slide {
    display: block !important;
    margin-bottom: 1.6rem;
    background: #ffffff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 30, 64, 0.1);
  }
  .selector__slide:last-child {
    margin-bottom: 0;
  }
  .selector__slide img {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    box-shadow: none;
  }
  .selector__info {
    position: static;
    inset: auto;
    margin: 0;
    padding: 1.15rem 1.3rem 1.4rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .selector__info b {
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-navy);
  }

  /* #10/#22/#25 Einzugsgebiet-Map: full-bleed volle Breite (fast zum Rand),
     aspect-ratio EXAKT wie viewBox -> KEIN Letterbox, KEIN Abschneiden, alle Labels sichtbar */
  .gebiet__karte {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 400 / 366;
  }
  .gebiet__content {
    padding-inline: 1.2rem;
  }

  /* #12/#17/#24 Kontakt-Box breit (schmaler Container-Rand) MIT genug Innenabstand */
  .kontakt-panel {
    --kontakt-pad: 1.4rem;
    padding: 1.4rem;
    gap: 0;
  }
  .kontakt-panel__form {
    padding: 1.4rem;
  }
  .section--kontakt > .container {
    padding-inline: 0.5rem;
  }
  /* Tim-Bild: Unterkoerper-Schnitt genau am Formular-Oberrand (kein Ueberragen, kein Abstand) */
  .kontakt-panel__figure {
    margin-block-end: 0;
  }
  .kontakt-panel__persona {
    padding-block-start: 1.2rem;
  }
}

/* Sehr schmale Geraete (<=360px, z.B. iPhone SE 1. Gen): Hero-Trust-Karte kompakt halten */
@media (max-width: 360px) {
  .hero__trust {
    white-space: normal;
    max-width: 11.5rem;
    padding: 0.6rem 0.85rem;
    bottom: 1.6rem;
  }
  .hero__trust b {
    font-size: 0.88rem;
  }
  .hero__trust small {
    font-size: 0.74rem;
  }
}

@media (max-width: 640px) {
  /* #6 Ablauf: mehr Abstand zwischen gestapelten Schritten (Nummer-Pille ragt oben raus) */
  .steps-grid {
    gap: 2.7rem;
  }

  /* #7 + #9 + #11 Icon-links-Bloecke -> Icon oben + zentriert (durchgaengiges Mobil-Muster) */
  .preis-priceBig {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .preis-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .kontakt-panel__phone {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: stretch;
    gap: 0.6rem;
  }
}

/* ═══════════ NETZWERK (Partner aus Medizin und Therapie) ═══════════ */
.netzwerk-kopf {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
}
.netzwerk-kopf .eyebrow {
  justify-content: center;
}
.netzwerk-kopf p {
  margin-top: 1.1rem;
  color: var(--color-text-soft);
  line-height: 1.6;
  max-width: 44rem;
  margin-inline: auto;
}
.netzwerk-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 1.4rem;
}
.netzwerk-card {
  flex: 1 1 16rem;
  max-width: 20rem;
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.6rem;
  box-shadow: var(--lp-shadow);
}
.netzwerk-card__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-teal-soft);
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.netzwerk-card__ic svg {
  width: 26px;
  height: 26px;
}
.netzwerk-card h3 {
  color: var(--color-navy);
  font-size: 1.08rem;
  margin: 0 0 0.45rem;
  min-width: 0;
  hyphens: auto;
}
.netzwerk-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  min-width: 0;
  hyphens: auto;
}
.netzwerk-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  margin: 2.8rem 0 0;
  padding: 0;
}
.netzwerk-logos li {
  flex: 0 0 auto;
}
.netzwerk-logos img {
  max-height: 46px;
  width: auto;
  display: block;
}
.netzwerk-note {
  margin: 2.2rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
@media (max-width: 560px) {
  .netzwerk-card {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ═══════════ LANDINGPAGE-SYSTEM (Tim Haaf) ═══════════ */
/* Design-Basis: freigegebener Mock rueckentraining.html. Tokens aus _base.css. */
:root {
  --lp-shadow: 0 16px 40px rgba(0, 30, 64, 0.09);
  --lp-shadow-sm: 0 8px 24px rgba(0, 30, 64, 0.07);
  --lp-backdrop: #bfe1df; /* heller Teal-Backdrop hinter Hero-Bild */
}

/* ---- Sektions-Hintergründe (Rhythmus weiß / creme / teal-soft) ---- */
.section--soft {
  background: var(--color-creme);
}
.section--tint {
  background: var(--color-teal-soft);
}

/* ---- Breadcrumb ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-block-end: 1.3rem;
}
.crumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--color-primary);
}
.crumbs [aria-current="page"] {
  color: var(--color-navy);
  font-weight: 600;
}
.crumbs svg {
  opacity: 0.5;
  flex: none;
}

/* ---- Section-Header (Eyebrow + H2 + Intro) ---- */
.sec-head {
  max-width: 44rem;
  margin-bottom: 2.6rem;
}
.sec-head--center {
  margin-inline: auto;
  text-align: center;
}
.sec-head .eyebrow {
  margin-bottom: 0.6rem;
}
.sec-head h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  color: var(--color-navy);
}
.sec-head p {
  margin: 0.8rem 0 0;
  color: var(--color-text-soft);
}

/* ═══════════ LANDING-HERO (zentriert, z.B. Kontaktseite) ═══════════ */
.section--lhero {
  background: var(--color-teal-soft);
}
.lhero {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.lhero--center {
  grid-template-columns: 1fr;
  max-width: 46rem;
  text-align: center;
}
.lhero--center .eyebrow,
.lhero--center .lhero__cta,
.lhero--center .lhero__facts {
  justify-content: center;
}
.section--lhero-center .crumbs {
  justify-content: center;
}
.lhero__title {
  font-size: clamp(2.05rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-navy);
  font-weight: 700;
  margin: 0.4rem 0 1.1rem;
}
.lhero__title em {
  font-style: normal;
  color: var(--color-primary);
}
.lhero__intro {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #33475e;
  max-width: 34rem;
  margin-block-end: 1.8rem;
}
.lhero--center .lhero__intro {
  margin-inline: auto;
}
.lhero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}
.lhero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.05rem;
}
.lhero__phone svg {
  color: var(--color-primary);
  flex: none;
}
.lhero__phone:hover {
  color: var(--color-primary);
}
.lhero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.98rem;
}
.lhero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lhero__facts svg {
  flex: none;
}
.lhero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--lp-shadow);
  display: block;
}

/* ═══════════ SERVICE-HERO (Variante A: Bild in Karte + heller Backdrop) ═══════════ */
.section--shero {
  background: var(--color-teal-soft);
  padding-block: clamp(2.2rem, 4vw, 3.4rem) clamp(3.4rem, 6vw, 5rem);
}
.section--shero .crumbs {
  margin-block-end: 0.9rem;
}
.shero {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.shero__title {
  font-size: clamp(2.1rem, 4vw, 3.05rem);
  line-height: 1.08;
  color: var(--color-navy);
  font-weight: 800;
  margin: 0.7rem 0 1.1rem;
}
.shero__title em {
  font-style: normal;
  color: var(--color-primary);
}
.shero__intro {
  font-size: 1.16rem;
  line-height: 1.6;
  color: #33475e;
  max-width: 33rem;
  margin-block-end: 1.9rem;
}
.shero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.shero__phone-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border-radius: 11px;
  border: 1.5px solid rgba(13, 104, 105, 0.35);
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.shero__phone-chip svg {
  color: var(--color-primary);
  flex: none;
}
.shero__phone-chip:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.5);
}
.shero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 1.5rem;
  text-decoration: none;
  color: var(--color-navy);
  font-size: 0.98rem;
}
.shero__stars {
  color: var(--color-gold, #fbbc04);
  letter-spacing: 0.05em;
}
.shero__rating b {
  font-weight: 800;
}
.shero__rating:hover {
  color: var(--color-primary);
}
.shero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.96rem;
}
.shero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.shero__facts svg {
  color: var(--color-primary);
  flex: none;
}
.shero__media {
  position: relative;
}
.shero__frame {
  position: relative;
}
.shero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(1.3rem, 1.3rem);
  background: var(--lp-backdrop);
  border-radius: 16px;
}
.shero__frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 24px 48px rgba(0, 30, 64, 0.18);
}
.shero__qcard {
  position: absolute;
  z-index: 2;
  left: -0.9rem;
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 14px 34px rgba(0, 30, 64, 0.16);
  max-width: 17.5rem;
}
.shero__qcard-ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-teal-soft);
  color: var(--color-primary);
}
.shero__qcard-ic svg {
  display: block;
}
/* Nur der Text-span, NICHT der Icon-Badge-span (sonst wird .shero__qcard-ic zu block -> Icon nicht zentriert) */
.shero__qcard div b {
  display: block;
  color: var(--color-navy);
  font-size: 0.95rem;
  line-height: 1.25;
}
.shero__qcard div span {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

/* ═══════════ WOCHENPLAN-GRAFIK (Trainingsrhythmus) ═══════════ */
.wplan {
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--lp-shadow-sm);
  border: 1px solid var(--color-line);
  margin-bottom: 2.4rem;
}
.wplan__head {
  margin-bottom: 1.4rem;
}
.wplan__head b {
  display: block;
  color: var(--color-navy);
  font-size: 1.12rem;
}
.wplan__head span {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.wplan__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
}
.wplan__day {
  border-radius: 12px;
  padding: 0.85rem 0.7rem;
  border: 1px solid var(--color-line);
  min-width: 0;
  text-align: center;
}
.wplan__abbr {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
}
.wplan__what {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  hyphens: auto;
}
.wplan__day .wplan__what {
  color: var(--color-text-soft);
}
.wplan__day .wplan__abbr {
  color: var(--color-navy);
}
.wplan__day--a {
  background: var(--color-teal-soft);
  border-color: var(--color-teal-soft);
}
.wplan__day--t {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.wplan__day--t .wplan__abbr {
  color: #ffffff;
}
.wplan__day--t .wplan__what {
  color: rgba(255, 255, 255, 0.88);
}
.wplan__note {
  margin: 1.3rem 0 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
@media (max-width: 860px) {
  .wplan__row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 520px) {
  .wplan__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════ TEXT-SPALTEN (2 Absaetze nebeneinander) ═══════════ */
.txt-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-bottom: 2.6rem;
}
.txt-cols p {
  margin: 0;
  color: var(--color-text-soft);
  line-height: 1.7;
  min-width: 0;
}
@media (max-width: 820px) {
  .txt-cols {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

/* ═══════════ INTRO-SPLIT (Text + Bild) ═══════════ */
.intro-split {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.intro-split__media {
  order: -1;
  min-width: 0;
}
.intro-split__body {
  min-width: 0;
}
.intro-split--flip .intro-split__media {
  order: 2;
}
.intro-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--lp-shadow);
  display: block;
}
.intro-split__body .eyebrow {
  margin-bottom: 0.6rem;
}
.intro-split__body h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--color-navy);
  margin-bottom: 1rem;
}
.intro-split__body .lead,
.intro-split__body p {
  color: var(--color-text-soft);
  line-height: 1.7;
  margin: 0 0 1rem;
  font-size: 1.02rem;
}
.intro-split__body p:last-child {
  margin: 0;
}
.intro-split__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════ ANATOMIE (Bild + Legende) ═══════════ */
.anat {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.anat__fig {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: var(--lp-shadow-sm);
}
.anat__fig img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.anat__fig--photo {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.anat__fig--photo img {
  border-radius: var(--radius);
  box-shadow: var(--lp-shadow);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.anat__legend .eyebrow {
  margin-bottom: 1.3rem;
}
.legrow {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
}
.legrow__dot {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  margin-top: 0.35rem;
}
.legrow h4 {
  color: var(--color-navy);
  font-size: 1.06rem;
  margin: 0 0 0.25rem;
}
.legrow p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--color-text-soft);
}
.anat__note {
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ═══════════ ÜBUNGS-KARTEN (Pill oben) ═══════════ */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1.4rem;
  margin-top: 2.6rem;
}
.ex-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 2rem 1.5rem 1.6rem;
  box-shadow: var(--lp-shadow);
}
.ex-card__num {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(13, 104, 105, 0.3);
}
.ex-card h4 {
  color: var(--color-navy);
  font-size: 1.08rem;
  margin: 0 0 0.4rem;
}
.ex-card p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--color-text-soft);
}

/* ═══════════ INFO-SPLIT (Bild + Text mit Checks) ═══════════ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.split--flip .split__media {
  order: 2;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--lp-shadow);
  display: block;
}
.split__body .eyebrow {
  margin-bottom: 0.5rem;
}
.split__body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  color: var(--color-navy);
  margin: 0.3rem 0 1rem;
}
.split__body p {
  color: var(--color-text-soft);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.checks li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 600;
  color: var(--color-navy);
  min-width: 0;
}
.checks li > span {
  min-width: 0;
  hyphens: auto;
}
.checks svg {
  flex: none;
  color: var(--color-primary);
  margin-top: 0.2rem;
}
/* Die drei Wege unter dem Erholungstext: untereinander statt nebeneinander, damit
   sie als Aufzählung lesbar bleiben, und mit deutlichem Abstand zum Absatz darüber
   (Kundenwunsch Tim, 01.08.2026). Ersetzt die früheren Inline-Styles im Template.
   Seit Tims Korrektur vom 05.08.2026 steht die Liste in der Textspalte statt unter
   der ganzen Sektion, deshalb margin-inline 0: Sie beginnt an derselben linken Kante
   wie der Text darüber und wie die Haken-Liste der Sektion darunter. */
.checks--wege {
  inline-size: fit-content;
  max-inline-size: 46rem;
  margin-block-start: clamp(2.4rem, 4.5vw, 3.4rem);
  margin-inline: 0;
}
.checks--wege li {
  font-weight: 400;
}
.checks--wege strong {
  color: var(--color-navy);
}

.note-box {
  display: flex;
  gap: 0.85rem;
  background: var(--color-tint);
  border-radius: 14px;
  padding: 1.15rem 1.3rem;
  margin-top: 1.6rem;
}
.note-box svg {
  flex: none;
  color: var(--color-primary);
  margin-top: 0.15rem;
}
.note-box p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* ═══════════ FEHLER-LISTE (eine Karte, Zeilen) ═══════════ */
.fehler-liste {
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--lp-shadow);
  border: 1px solid var(--color-line);
  max-width: 52rem;
  margin-inline: auto;
  overflow: hidden;
}
.fehler-row {
  display: flex;
  gap: 1.1rem;
  padding: 1.6rem 1.9rem;
  align-items: flex-start;
}
.fehler-row + .fehler-row {
  border-top: 1px solid var(--color-line);
}
.fehler-row__x {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fbeaea;
  color: #c0485c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fehler-row__x svg {
  display: block;
}
.fehler-row h4 {
  color: var(--color-navy);
  font-size: 1.06rem;
  margin: 0 0 0.25rem;
}
.fehler-row p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

/* ═══════════ INFO-PANELS (getönt, Icon-Box) ═══════════ */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.panel {
  background: var(--color-teal-soft);
  border-radius: 16px;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  min-width: 0;
}
.panel h3,
.panel p {
  hyphens: auto;
}
.panel__ic {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--color-primary);
  margin-bottom: 1.1rem;
}
.panel__ic svg {
  display: block;
  /* Der icon-Shortcode entfernt width/height, damit die Groesse aus dem
     Container kommt. Ohne feste Groesse fuellt das SVG den ganzen Container
     und wirkt doppelt so gross wie die handgezeichneten Inline-Icons. */
  width: 24px;
  height: 24px;
}
.panel h3 {
  color: var(--color-navy);
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}
.panel p {
  color: #33475e;
  line-height: 1.6;
  margin: 0 0 0.8rem;
  font-size: 0.98rem;
}
.panel p:last-child {
  margin: 0;
}

/* ═══════════ CTA-BOX (abgesetzte Box, solides Teal) ═══════════ */
.cta-sec {
  background: #ffffff;
}
.cta-box {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  border-radius: 22px;
  padding: clamp(2.6rem, 5vw, 3.8rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  box-shadow: 0 30px 60px rgba(0, 20, 42, 0.22);
}
.cta-box__ic {
  width: 62px;
  height: 62px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  margin: 0 auto 1.4rem;
}
.cta-box__ic svg {
  display: block;
}
.cta-box .eyebrow {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.6rem;
}
.cta-box h2 {
  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
}
.cta-box__txt {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  max-width: 38rem;
  margin: 0 auto 1.9rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
}
.btn--onteal {
  background: #ffffff;
  color: var(--color-primary);
  font-weight: 700;
}
.btn--onteal:hover {
  background: var(--color-creme);
  color: var(--color-primary);
}
.cta-phone {
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  font-size: 1.05rem;
}
.cta-phone:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  .shero,
  .anat,
  .split,
  .intro-split,
  .lhero {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .split--flip .split__media {
    order: 0;
  }
  /* Mobil IMMER Text vor Bild: der erste Block folgt direkt auf den Hero,
     sonst steht Bild auf Bild und der Einstieg besteht nur aus Fotos. */
  .intro-split__media,
  .intro-split--flip .intro-split__media {
    order: 2;
    max-width: 30rem;
  }
  .intro-split__body {
    order: 1;
  }
  .shero__media,
  .lhero__media {
    max-width: 25rem;
    margin-inline: auto;
    width: 100%;
  }
  .shero__frame::before {
    transform: translate(1rem, 1rem);
  }
}
@media (max-width: 720px) {
  .ex-grid,
  .panels {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .shero__title {
    font-size: clamp(1.9rem, 8vw, 2.35rem);
  }
  .shero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .shero__cta .btn,
  .shero__phone-chip {
    justify-content: center;
  }
  .shero__frame::before {
    transform: translate(0.7rem, 0.7rem);
  }
  .shero__qcard {
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    max-width: none;
  }
  .cta-actions {
    flex-direction: column;
  }
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════ KONTAKT-MODAL ═══════════ */
.cmodal{border:none;border-radius:18px;padding:0;max-width:31rem;width:calc(100% - 2rem);margin:auto;max-height:calc(100dvh - 3rem);overflow-y:auto;box-shadow:0 30px 80px rgba(0,20,42,.4);color:var(--color-navy)}
.cmodal::backdrop{background:rgba(0,20,42,.55);backdrop-filter:blur(2px)}
.cmodal__head{background:var(--color-teal-soft);padding:1.6rem 1.7rem 1.4rem;position:relative}
.cmodal__head .eyebrow{margin-bottom:.3rem}
.cmodal__head h2{margin:.2rem 0 0;font-size:1.5rem;color:var(--color-navy)}
.cmodal__lead{margin:.6rem 0 0;color:var(--color-text-soft);font-size:.96rem;line-height:1.5}
.cmodal__x{position:absolute;top:1rem;right:1rem;width:2.3rem;height:2.3rem;border:none;background:#fff;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;color:var(--color-navy);box-shadow:0 4px 12px rgba(0,30,64,.14)}
.cmodal__x svg{display:block}
.cmodal__x:hover{background:var(--color-creme)}
.cmodal__form{padding:1.5rem 1.7rem 1.8rem;display:grid;gap:1rem}
.cmodal__field label{display:block;font-size:.85rem;font-weight:700;color:var(--color-navy);margin-bottom:.35rem}
.cmodal__field label span{font-weight:500;color:var(--color-text-muted)}
.cmodal__field input,.cmodal__field textarea{width:100%;padding:.8rem .95rem;border:1px solid var(--color-line);border-radius:10px;font:inherit;font-size:1rem;background:#fff}
.cmodal__field input:focus,.cmodal__field textarea:focus{outline:2px solid var(--color-primary);border-color:var(--color-primary)}
.cmodal__form .btn{justify-content:center;margin-top:.2rem}
.cmodal__note{color:var(--color-text-muted);text-align:center;font-size:.82rem}
@media(max-width:600px){.cmodal{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.cmodal__form{align-content:start}}

/* ═══════════ ALLTAGS-KARTEN (Übung → Nutzen im Alltag) ═══════════ */
.alltag-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 1.4rem;
  margin-top: 2.6rem;
}
.alltag-card {
  flex: 1 1 19rem;
  max-width: 23rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--lp-shadow);
  padding: 1.4rem 1.3rem 1.5rem;
}
/* Kopf: Übungsname + was sie kräftigt */
.alltag-card__head {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
}
.alltag-card__head b {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-navy);
  hyphens: auto;
}
.alltag-card__head span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--color-primary);
}
/* Bildpaar: Übung → Alltag, mit Pfeil dazwischen */
.alltag-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.9rem;
}
.alltag-shot {
  min-width: 0;
  text-align: center;
}
.alltag-shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: var(--color-creme);
}
.alltag-shot__cap {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.alltag-pair__arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-primary);
  background: #ffffff;
}
/* Nutzen im Alltag */
.alltag-card__use {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  min-width: 0;
}
.alltag-card__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-tint);
  color: var(--color-primary);
}
.alltag-card__ic svg {
  width: 19px;
  height: 19px;
}
.alltag-card h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--color-navy);
  margin: 0;
  min-width: 0;
  hyphens: auto;
}
.alltag-card__txt {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  min-width: 0;
  hyphens: auto;
}
@media (max-width: 560px) {
  .alltag-card {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ═══════════ SEKTIONS-KOLLAPS (kein doppeltes Padding zwischen Landing-Blöcken) ═══════════ */
/* (entfallen: siehe _sections.css, halbes Padding ist der Standard) */
.section--lp + .section--lp.section--tint,
.section--lp + .section--lp.section--soft,
.section--lp + .section--lp.section--mech,
.section--lp.section--tint + .section--lp,
.section--lp.section--soft + .section--lp,
.section--lp.section--mech + .section--lp {
  padding-block-start: calc(var(--section-pad) / 2);
}
.section--lp:has(+ .section--lp.section--tint),
.section--lp:has(+ .section--lp.section--soft),
.section--lp:has(+ .section--lp.section--mech),
.section--lp.section--tint:has(+ .section--lp),
.section--lp.section--soft:has(+ .section--lp),
.section--lp.section--mech:has(+ .section--lp) {
  padding-block-end: calc(var(--section-pad) / 2);
}
/* Hero -> erster Content-Block: halbes Padding */
.section--shero + .section--lp {
  padding-block-start: calc(var(--section-pad) / 2);
}
/* FAQ -> CTA-Box: Abstand ausgewogen teilen (statt faq voll + cta null) */
.section--faq:has(+ .cta-sec) {
  padding-block-end: calc(var(--section-pad) / 2);
}
.section--faq + .cta-sec {
  padding-block-start: calc(var(--section-pad) / 2);
}

/* ═══════════ ZAHNRAD-GRAFIK (Haltung als gekoppeltes System) ═══════════ */

.section--mech {
  background-color: var(--color-navy);
  color: #ffffff;
}
.section--mech .eyebrow {
  color: #8fdedc;
}
.section--mech h2 {
  color: #ffffff;
}
.section--mech .sec-head p {
  color: rgba(255, 255, 255, 0.76);
}

.mech {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.mech__stage {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.mech__svg {
  width: 100%;
  max-width: 22rem;
  max-height: 32rem;
  width: auto;
  height: auto;
  display: block;
  /* Animierte Teile auf einen eigenen Layer heben, sonst rastert Mobile pro Frame neu */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Die Figur wird per Skelett-Deformation in assets/js/haltung.js verformt,
   die Zahnraeder werden dort ebenfalls positioniert und gedreht. Hier steht
   deshalb nur noch, was das Rendering betrifft. */
.mech__svg {
  --mech-p: 0;
}

/* Die Arm-Kerben liegen als eigene Flaechen ueber der Figur und muessen die
   Sektionsfarbe tragen, damit sie als Trennlinie gelesen werden. Deshalb hier
   und nicht als fill-Attribut im Markup: aendert sich der Sektionshintergrund,
   zieht die Kerbe mit. */
.mech__kerbe {
  fill: var(--color-navy);
}

@media (prefers-reduced-motion: reduce) {
  .mech__svg {
    animation: none !important;
  }
}

/* Legende */
.mech__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.mech__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding-block: 1.05rem;
  border-block-end: 1px solid rgba(143, 222, 220, 0.18);
}
.mech__row:first-child {
  padding-block-start: 0;
}

.mech__dot {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(143, 222, 220, 0.14);
  border: 1px solid rgba(143, 222, 220, 0.4);
  color: #8fdedc;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

.mech__row h3 {
  color: #ffffff;
  font-size: 1.08rem;
  margin: 0 0 0.3rem;
  hyphens: auto;
}
.mech__row p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
  hyphens: auto;
}

.mech__note {
  margin-top: 1.3rem;
  color: #8fdedc;
  font-size: 0.98rem;
  line-height: 1.6;
  hyphens: auto;
}

@media (max-width: 800px) {
  .mech {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .mech__svg {
    max-width: 23rem;
  }
}

/* ═══════════ ERHOLUNG: Illustration neben Text ═══════════ */
.erholung-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.erholung-split__fig {
  min-width: 0;
}
.erholung-split__fig img {
  width: 100%;
  height: auto;
  max-width: 24rem;
  display: block;
  margin-inline: auto;
}
.erholung-split__body {
  min-width: 0;
}
.erholung-split__body p {
  hyphens: auto;
}
.erholung-split__body p + p {
  margin-block-start: 1rem;
}

@media (max-width: 800px) {
  .erholung-split {
    grid-template-columns: 1fr;
  }
  .erholung-split__fig img {
    max-width: 18rem;
  }
}

/* ═══════════ CONTENT-PAGE (Über mich) ═══════════ */
/* Design-Basis: freigegebener Mock ueber-mich-redesign-v2.html.
   Tokens aus _base.css (Poppins/Hanken via --font-sans, echte Farb-Tokens). */

/* ---- Sektions-Basis + Farb-Rhythmus ---- */
.cp-sec {
  padding-block: var(--section-pad);
}
.cp-sec--tint {
  background: var(--color-teal-soft);
}
.cp-sec--creme {
  background: var(--color-creme);
}
.cp-sec--navy {
  background: var(--color-navy);
}

/* Padding-Kollaps: jede Grenze ist ein Farbwechsel -> halbes Padding je Seite,
   Block-Abstand bleibt = --section-pad (Kante sitzt optisch mittig). */
.cp-hero + .cp-sec,
.cp-sec + .cp-sec {
  padding-block-start: calc(var(--section-pad) / 2);
}
.cp-sec:has(+ .cp-sec) {
  padding-block-end: calc(var(--section-pad) / 2);
}

/* ═══════════ HERO (flach, zweispaltig, teal-soft, kein Bild/Verlauf) ═══════════ */
.cp-hero {
  background: var(--color-teal-soft);
  padding-block: clamp(2.8rem, 5vw, 4.4rem) clamp(3.2rem, 6vw, 5rem);
}
.cp-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cp-hero__col {
  min-width: 0;
}
.cp-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  margin: 0.7rem 0 0;
}
.cp-hero h1 em {
  font-style: normal;
  color: var(--color-primary);
}
.cp-hero__lead {
  font-size: 1.16rem;
  line-height: 1.6;
  color: #33475e;
  max-width: 33rem;
  margin: 1.1rem 0 0;
}
.cp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

/* Facts-Karte statt Bild */
.cp-facts {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 1.7rem 1.7rem 1.5rem;
  box-shadow: 0 24px 50px rgba(0, 30, 64, 0.12);
  min-width: 0;
}
.cp-facts__t {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 1.1rem;
}
.cp-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cp-facts li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.cp-facts__ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--color-teal-soft);
  display: grid;
  place-items: center;
  color: var(--color-primary);
}
.cp-facts__ic svg {
  display: block;
}
.cp-facts li b {
  display: block;
  color: var(--color-navy);
  font-size: 1rem;
  line-height: 1.3;
}
.cp-facts li span {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.cp-facts__rate {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.96rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.cp-facts__rate b {
  color: var(--color-navy);
  font-weight: 800;
}
.cp-facts__rate:hover {
  color: var(--color-primary);
}
.cp-stars {
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

/* ═══════════ STORY (Bild mit Teal-Backdrop links, Text rechts) ═══════════ */
.cp-story {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cp-story__media {
  position: relative;
  min-width: 0;
  max-width: 24rem;
  justify-self: center;
  width: 100%;
}
.cp-story__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 22px 50px rgba(0, 30, 64, 0.15);
  display: block;
}
.cp-story__media::before {
  content: "";
  position: absolute;
  inset: 20px -18px -18px 20px;
  background: var(--color-teal-soft);
  border-radius: var(--radius);
  z-index: 0;
}
.cp-story__body {
  min-width: 0;
}
.cp-story__body h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.35rem);
  color: var(--color-navy);
  margin: 0.55rem 0 1rem;
}
.cp-story__body p {
  margin: 0 0 1rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}
.cp-sig {
  height: 54px;
  width: auto;
  margin-top: 0.4rem;
}

/* ═══════════ ZITAT-BAND (navy) ═══════════ */
.cp-quote__inner {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.cp-quote__mark {
  font-size: 7rem;
  line-height: 0.6;
  color: var(--color-primary);
  opacity: 0.65;
  font-family: Georgia, serif;
  height: 2.4rem;
}
.cp-quote p {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0.4rem 0 1rem;
  line-height: 1.35;
  text-wrap: balance;
}
.cp-quote cite {
  font-style: normal;
  color: #9fc4c4;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

/* ═══════════ QUALIFIKATION (Karten mit Teal-Oberkante) ═══════════ */
.cp-creds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
}
.cp-cred {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  box-shadow: 0 12px 30px rgba(0, 30, 64, 0.07);
  display: flex;
  gap: 1.1rem;
  min-width: 0;
}
.cp-cred > div {
  min-width: 0;
}
.cp-cred h3,
.cp-cred p {
  hyphens: auto;
}
.cp-cred__ic {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-primary);
  display: grid;
  place-items: center;
  color: #ffffff;
}
.cp-cred__ic svg {
  display: block;
}
.cp-cred h3 {
  font-size: 1.14rem;
  color: var(--color-navy);
  margin: 0.15rem 0 0.4rem;
}
.cp-cred p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* ═══════════ ANSATZ (creme Karten mit großer Ghost-Nummer) ═══════════ */
.cp-vals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.cp-val {
  background: var(--color-creme);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.cp-val__n {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.22;
  line-height: 0.8;
}
.cp-val__ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(0, 30, 64, 0.08);
  margin-bottom: 1rem;
}
.cp-val__ic svg {
  display: block;
}
.cp-val h3 {
  font-size: 1.2rem;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}
.cp-val p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ═══════════ FÜR WEN (Persona-Karten, runde Teal-Badges) ═══════════ */
.cp-who {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  max-width: 52rem;
  margin-inline: auto;
}
.cp-who__i {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  min-width: 0;
}
.cp-who__ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-teal-soft);
  display: grid;
  place-items: center;
  color: var(--color-primary);
}
.cp-who__ic svg {
  display: block;
}
.cp-who__i b {
  color: var(--color-navy);
  font-size: 1.02rem;
}
.cp-who__i div span {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

/* ═══════════ PREISE: MARKTMODELL (Text + Highlight-Karte) ═══════════ */
.cp-model {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  margin-top: 1.6rem;
}
.cp-model__text {
  min-width: 0;
}
.cp-model__text p {
  margin: 0 0 1rem;
  color: var(--color-text-soft);
  line-height: 1.75;
}
.cp-model__text p:last-child {
  margin-bottom: 0;
}
.cp-model__text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cp-model__card {
  background: var(--color-teal-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  min-width: 0;
}
.cp-model__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.cp-model__ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--color-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0, 30, 64, 0.08);
}
.cp-model__ic svg {
  display: block;
}
.cp-model__head b {
  color: var(--color-navy);
  font-size: 1.14rem;
  font-weight: 700;
}
.cp-model__card > p {
  margin: 0;
  color: var(--color-navy);
  font-size: 1rem;
  line-height: 1.65;
}

/* ═══════════ PREISE: NAVY TRANSPARENZ-BAND ═══════════ */
.cp-sec--navy .eyebrow {
  color: #7fbcbc;
}
.cp-band {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.cp-band h2 {
  color: #ffffff;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  margin: 0.5rem 0 0.9rem;
  text-wrap: balance;
}
.cp-band p {
  margin: 0;
  color: #c3d3e0;
  font-size: 1.06rem;
  line-height: 1.65;
}

/* ═══════════ PREISE: 5-SCHRITTE-ABLAUF (Grafik) ═══════════ */
.cp-flow {
  --flow-gap: clamp(1rem, 2.5vw, 1.9rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--flow-gap);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cp-step {
  position: relative;
  text-align: center;
  min-width: 0;
}
/* Verbindungslinie zwischen den Badge-Mitten (gap-agnostisch) */
.cp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  width: calc(100% + var(--flow-gap));
  height: 0;
  border-top: 2px dashed var(--color-primary);
  opacity: 0.34;
  z-index: 0;
}
.cp-step__badge {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 1.15rem;
  background: var(--color-primary);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px rgba(13, 104, 105, 0.28);
}
.cp-step__badge svg {
  display: block;
}
.cp-step__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-navy);
  box-shadow: 0 2px 7px rgba(0, 30, 64, 0.22);
  font-size: 0.85rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  box-shadow: 0 4px 10px rgba(0, 30, 64, 0.18);
}
.cp-step__body {
  min-width: 0;
}
.cp-step h3 {
  font-size: 1.06rem;
  color: var(--color-navy);
  margin: 0 0 0.35rem;
}
.cp-step p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

/* ═══════════ PREISE: ORGANISATORISCHES (icon-freie Karten, weicher Schatten) ═══════════ */
.cp-org {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 1.8rem;
}
.cp-orgcard {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.55rem 1.6rem;
  box-shadow: 0 12px 30px rgba(0, 30, 64, 0.07);
  min-width: 0;
}
.cp-orgcard h3 {
  font-size: 1.08rem;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}
.cp-orgcard p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ═══════════ PREISE: KRANKENKASSE-NOTIZEN (sachlich) ═══════════ */
.cp-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
  margin-top: 1.6rem;
}
.cp-note {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 12px 30px rgba(0, 30, 64, 0.07);
  min-width: 0;
}
.cp-note b {
  display: block;
  color: var(--color-navy);
  font-size: 1.06rem;
  margin-bottom: 0.45rem;
}
.cp-note p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ═══════════ PREISE: FAQ-AKKORDEON (Content-Page-Stil) ═══════════ */
.cp-faq {
  max-width: 48rem;
  margin: 1.8rem auto 0;
}
.cp-faq__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #ffffff;
  margin-bottom: 0.8rem;
  overflow: hidden;
}
.cp-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
}
.cp-faq__item summary::-webkit-details-marker {
  display: none;
}
.cp-faq__item h3 {
  font-size: 1.04rem;
  color: var(--color-navy);
  margin: 0;
}
.cp-faq__chev {
  flex: none;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}
.cp-faq__item[open] .cp-faq__chev {
  transform: rotate(180deg);
}
.cp-faq__body {
  padding: 0 1.4rem 1.25rem;
}
.cp-faq__body p {
  margin: 0;
  color: var(--color-text-soft);
  line-height: 1.7;
}
.cp-faq__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 960px) {
  .cp-hero__grid,
  .cp-story {
    grid-template-columns: 1fr;
  }
  .cp-facts {
    max-width: 28rem;
  }
  .cp-story__media {
    max-width: 26rem;
  }
  .cp-vals {
    grid-template-columns: 1fr;
  }
  .cp-org {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  /* 5-Schritte-Ablauf: vertikale Timeline */
  .cp-flow {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 32rem;
    margin-inline: auto;
  }
  .cp-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.1rem;
    text-align: left;
    padding-bottom: 2.2rem;
  }
  .cp-step:not(:last-child)::after {
    top: 64px;
    left: 31px;
    width: 0;
    height: calc(100% - 64px);
    border-top: 0;
    border-left: 2px dashed var(--color-primary);
  }
  .cp-step__badge {
    margin: 0;
  }
  .cp-step__body {
    padding-top: 0.6rem;
  }
}
@media (max-width: 720px) {
  .cp-creds {
    grid-template-columns: 1fr;
  }
  .cp-model {
    grid-template-columns: 1fr;
  }
  .cp-notes {
    grid-template-columns: 1fr;
  }
  .cp-org {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .cp-who {
    grid-template-columns: 1fr;
  }
  .cp-org {
    grid-template-columns: 1fr;
  }
  .cp-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .cp-hero__cta .btn,
  .cp-hero__cta .shero__phone-chip {
    justify-content: center;
    text-align: center;
  }
}

/* ═══════════ KONTAKT: SPLIT (Direktkontakt + Formularkarte) ═══════════ */
.cp-contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.6rem);
  align-items: start;
  margin-top: 1.8rem;
}
.cp-contact__info {
  min-width: 0;
}
.cp-contact__lead {
  margin: 0 0 0.4rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}
.cp-channels {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.cp-channel {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
a.cp-channel:hover {
  border-color: var(--color-primary);
}
.cp-channel__ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-teal-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
}
.cp-channel__ic svg {
  display: block;
}
.cp-channel__txt {
  min-width: 0;
}
.cp-channel__l {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-text-soft);
}
.cp-channel__v {
  display: block;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
}
a.cp-channel:hover .cp-channel__v {
  color: var(--color-primary);
}
.cp-contact__form {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: 0 24px 50px rgba(0, 30, 64, 0.1);
  min-width: 0;
}

/* ═══════════ KONTAKT: EINZUGSGEBIET-CHIPS ═══════════ */
.cp-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.8rem;
  max-width: 44rem;
  margin-inline: auto;
}
.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-navy);
}
.cp-chip svg {
  color: var(--color-primary);
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .cp-contact {
    grid-template-columns: 1fr;
  }
}

/* ═══════════ NAVIGATION v5 ═══════════ */

.site-header {
  border-bottom: 1px solid #eee;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 70px;
  width: auto;
  display: block;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .nav-logo img {
    height: 56px;
    transform: translateY(-2px);
  }
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-inline-end: 2.5rem;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list a,
.nav-dropdown-toggle {
  color: var(--color-text-soft);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.nav-list a:hover,
.nav-dropdown-toggle:hover {
  color: var(--color-primary);
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 30, 64, 0.12);
  border-radius: var(--radius);
  padding: 0.5rem;
  min-width: 200px;
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  color: var(--color-text-soft);
  text-decoration: none;
  font-weight: 500;
}

.nav-dropdown-menu a:hover {
  background: var(--color-teal-soft);
  color: var(--color-navy);
}

/* Right side */
.nav-right {
  display: flex;
  align-items: center;
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  margin-right: 2.3rem;
}

.nav-phone svg {
  color: var(--color-primary);
}

.btn--nav {
  padding: 0.6rem 1.4rem;
  font-size: 0.98rem;
}

/* Mobile burger — sauberer, SOFORTIGER Wechsel Striche <-> X, KEINE Animation.
   Jede Transition/Transformation erzeugte auf iOS-Safari einen "Stern"-Zwischenzustand.
   Deshalb: fester 44x44-Button, Striche und X per display umschalten (kein Zwischenbild). */
.nav-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-burger__bar {
  width: 24px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
}

.nav-burger__x {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  color: var(--color-navy);
  display: none;
}
.nav-burger[aria-expanded="true"] .nav-burger__bar {
  display: none;
}
.nav-burger[aria-expanded="true"] .nav-burger__x {
  display: block;
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0, 30, 64, 0.12);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
  z-index: 99;
}

.mobile-nav.is-open {
  max-height: 80vh;
  overflow-y: auto;
}

.mobile-nav__list {
  list-style: none;
  padding: 1rem;
  margin: 0;
}

.mobile-nav__list a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius);
}

.mobile-nav__list a:hover {
  background: var(--color-teal-soft);
}

.mobile-nav__cta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.mobile-nav__cta .btn {
  width: 100%;
  justify-content: center;
}

/* Mobile breakpoint */
@media (max-width: 900px) {
  .nav-center {
    display: none;
  }

  .nav-right .nav-phone span {
    display: none;
  }

  .nav-right .btn--nav {
    display: none;
  }

  /* Aktionen (Telefon) nach rechts zum Burger gruppieren statt mittig */
  .nav-right {
    margin-left: auto;
  }

  /* Telefon mobil nur als Icon, mit Abstand zum Burger + groesserem Touch-Target */
  .nav-phone {
    margin-right: 0.7rem;
    padding: 0.4rem;
  }

  .nav-phone svg {
    width: 21px;
    height: 21px;
  }

  .nav-burger {
    display: flex;
  }
}

/* Focus states */
.nav-list a:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-phone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* ═══════════ FOOTER (Redesign) ═══════════ */
.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.72);
  border-top: 3px solid var(--color-primary);
  font-size: 0.98rem;
}

/* Brand links breit, Menue-Spalten nach rechts orientiert (auto-Breite, rechtsbuendig gruppiert) */
/* Symmetrisches Padding: Brand-Block sitzt mittig zwischen Footer-Oberkante und Trennlinie */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  column-gap: 4.5rem;
  row-gap: 2.4rem;
  align-items: start;
  padding-block: 3.5rem;
}

.footer-brand {
  max-width: 30rem;
  align-self: center;
}
.footer-logo {
  height: 118px;
  width: auto;
  display: block;
  margin-bottom: 1.1rem;
}
.footer-brand p {
  margin: 0 0 1rem;
  max-width: 30ch;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.footer-stars-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.94rem;
}
.footer-stars-link .stars {
  color: var(--color-gold, #fbbc04);
  font-size: 0.9rem;
}
.footer-stars-link b {
  font-weight: 800;
}
.footer-stars-link:hover {
  color: #ffffff;
}

/* Menue-Spalten leicht nach unten versetzt (Headings sonst zu hoch neben dem zentrierten Brand-Block) */
.footer-col {
  padding-block-start: 1.4rem;
}
/* Spaltentitel sind Navigations-Labels, KEINE Ueberschriften (kein h1-h6) — haelt den Dokument-Outline sauber */
.footer-col__title {
  color: #ffffff;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.2rem 0 1rem;
  font-weight: 700;
}
.footer-col a,
.footer-col address {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-style: normal;
  line-height: 1.5;
  padding-block: 0.2rem;
}
.footer-col a:hover {
  color: #ffffff;
}
.footer-address {
  margin-bottom: 0.4rem;
}
.footer-cta {
  display: inline-flex !important;
  align-items: center;
  background: var(--color-primary);
  color: #ffffff !important;
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.footer-cta:hover {
  background: #0f7d7e;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
}
.footer-legal p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
}
.footer-legal__links {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
.footer-legal__links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.footer-legal__links a:hover {
  color: #ffffff;
}
.footer-cookie-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.footer-cookie-btn:hover {
  color: #ffffff;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-col {
    padding-block-start: 0;
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: 2.4rem 1.8rem;
  }
  .footer-logo {
    margin-inline: auto;
  }
  .footer-brand p {
    margin-inline: auto;
  }
  .footer-legal {
    flex-direction: column;
    text-align: center;
  }
}

/* ═══════════ LEAD FORM v5 ═══════════ */

.lead-form h3 {
  margin-bottom: 1.2rem;
  font-size: 1.25rem;
  color: var(--color-navy);
  font-weight: 600;
}

.form-field {
  margin-bottom: 1.05rem;
}

.form-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--color-line);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-navy);
  background: #ffffff;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.lead-form__turnstile {
  min-height: 65px; /* Layout-Shift vermeiden, bis das Widget lädt */
  margin-bottom: 0.8rem;
}

.lead-form__noscript {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #666);
}

.form-submit {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.form-reassure {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
/* ═══════════ BLOG POST ═══════════ */

.post__header {
  margin-block-end: var(--space-lg);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.post__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-block-start: var(--space-sm);
}

/* ═══════════ COOKIE CONSENT OVERRIDES ═══════════ */

:root {
  --cc-bg: var(--color-bg);
  --cc-text: var(--color-text);
  --cc-btn-primary-bg: var(--color-primary);
  --cc-btn-primary-text: var(--color-on-primary);
  --cc-btn-primary-hover-bg: var(--color-primary-hover);
  --cc-btn-secondary-bg: var(--color-bg-alt);
  --cc-btn-secondary-text: var(--color-text);
  --cc-btn-secondary-hover-bg: var(--color-border);
  --cc-toggle-bg-on: var(--color-primary);
  --cc-link: var(--color-primary);
  --cc-link-hover: var(--color-primary-hover);
  --cc-cookie-category-block-bg: var(--color-bg-alt);
  --cc-overlay-bg: var(--color-overlay);
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--radius-xl);
}

.site-footer__cookie-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer__cookie-btn:hover {
  color: var(--color-primary);
}