/* =========================================================================
   myPhysio, Stylesheet der Code-Website (Rebuild der WordPress-Staging, 10/2026)

   LEITIDEE „Farbbewegung“ (Brandkit myPhysio, Folien 1, 6, 9, 10, 11)
   Das Bildzeichen ist eine Figur aus überlappenden, durchscheinenden Farbblättern
   in den fünf Markenfarben; der „Brand Anchor“ ist ein Verlauf durch dieselben
   Farben. Daraus werden zwei sparsame Gestaltungsmittel:
     1. Farbblätter: große, durchscheinende Blattformen als Hintergrundakzent in
        der Bühne und an einzelnen Bändern (nie hinter Fließtext).
     2. Der Farbverlauf als feine Linie: unter der Kopfleiste, unter Überzeilen,
        als Fortschrittsbalken.
   Alles andere bleibt ruhig: viel Weiß, ein heller Kühlton, Blau für Vertrauen,
   Gelb für den einen wichtigsten Knopf („Termin anfragen“).

   WAS VON DER STAGING-SEITE BLEIBT (Wiedererkennbarkeit)
     Montserrat für Überschriften mit dem Zweiklang leicht + fett, Open Sans für
     Text, Pillen-Knöpfe in Versalien, Gelb für „Termin anfragen“, Blau für
     „Standort finden“, weiche Karten mit 20 px Rundung, Bandwechsel Weiß/Kühlton.

   KONTRAST: Jede Farbe trägt ihren nachgerechneten Wert (WCAG 2.1, relative
   Leuchtdichte). Das Markenblau #1397D8 erreicht auf Weiß nur 3,26:1 und steht
   deshalb nur in großer Schrift und als Fläche/Grafik; Text und Knöpfe mit
   weißer Schrift nehmen das tiefere Blau #1470A8 (5,37:1). Die Staging-Seite
   setzte blaue Überzeilen in 20 px mit 3,19:1, das ist hier korrigiert.

   AUFBAU
     A Tokens · B Basis · C Raster & Bänder · D Kopf & Menü · E Knöpfe & Titel
     F Bühne · G Bausteine · H Startseite · I Beschwerde-Finder · J Standorte
     K Leistungsfinder · L Leistungsseiten · M Preise · N Zeitleiste & Partner
     O FAQ, Kontakt, Rechtstexte · P Dialog & Aktionsleiste · Q Fuß
     R Bewegung · S Kleine Breiten
   ========================================================================= */

/* =========================================================================
   A · TOKENS (die einzige Stelle mit Farbwerten)
   ========================================================================= */
:root {
  /* Marke, Brandkit Folie 10/11 */
  --blau:        #1397D8;  /* 3,26:1 auf Weiß: nur Fläche, Grafik, Schrift ab 24 px */
  --blau-tief:   #1470A8;  /* 5,37:1 auf Weiß, 4,99:1 auf --kuehl: Text, Links, Knopffläche */
  --blau-nacht:  #0E5A87;  /* 7,07:1 auf Weiß: Hover von --blau-tief */
  --gruen:       #7CC105;  /* Grafik */
  --gruen-dunkel:#149921;  /* Grafik, Rand */
  --gruen-text:  #0F6B1A;  /* 6,05:1 auf --gruen-hauch */
  --gruen-hauch: #E9F6EA;
  --gelb:        #EDBF00;  /* Fläche des Hauptknopfs; --tinte darauf 8,1:1 */
  --gelb-hover:  #F5D04A;
  --rot:         #D80927;  /* 5,27:1 auf Weiß: Kartenmarke, Pflichtzeichen */
  --orange:      #E24D03;  /* Grafik */
  --violett:     #7E2BA5;  /* Grafik */
  --tuerkis:     #17CC82;  /* Grafik */

  --tinte:       #2B2B2B;  /* 14,4:1 auf Weiß: Überschriften stark */
  --text-stark:  #3D3D3D;  /* 10,9:1: Überschriften */
  --text:        #5D5D5D;  /* 6,58:1 auf Weiß, 6,12:1 auf --kuehl: Fließtext (Brandkit-Grau) */
  --text-leise:  #6B6B6B;  /* 5,33:1 auf Weiß, 4,95:1 auf --kuehl: Nebentext */
  --weiss:       #FFFFFF;
  --kuehl:       #F4F7F9;  /* Bandfläche (Staging: #F4F7F9) */
  --kuehl-blau:  #EAF4FB;  /* heller Markenton für Hervorhebungen */
  --linie:       #DDE5EC;
  --linie-stark: #8A97A3;  /* 3,05:1 auf Weiß: Feldrand (WCAG 1.4.11) */
  --linie-blau:  #B9D7EC;  /* Rand geöffneter Aufklappzeilen */
  --linie-fuss:  #CFE0EE;
  --gelb-hauch:  #FFF6D1;
  --gelb-text:   #6B5600;  /* 7,0:1 auf --gelb-hauch */
  --koerper:     #CFE3F2;  /* Figur im Beschwerde-Finder */
  --rhein:       #9CCBEA;
  --rhein-hell:  #C7E2F4;
  --schatten-farbe: 20, 61, 92;

  --verlauf: linear-gradient(90deg, #1397D8 0%, #17CC82 22%, #7CC105 40%, #EDBF00 58%, #E24D03 76%, #D80927 88%, #7E2BA5 100%);

  /* Schrift */
  --font-heading: "Montserrat", "Montserrat Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Open Sans", "Open Sans Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent:  var(--font-heading);

  /* Skala. Sechs Überschriftengrößen, nicht mehr (Gate 8). */
  --f-h1:    clamp(2.25rem, 4.4vw, 4rem);       /* 36 → 64 */
  --f-h2:    clamp(1.75rem, 3vw, 2.625rem);     /* 28 → 42 */
  --f-h3:    clamp(1.25rem, 1.6vw, 1.5rem);     /* 20 → 24 */
  --f-h4:    1.125rem;                          /* 18 */
  --f-zahl:  clamp(3rem, 6vw, 5rem);            /* 48 → 80, Zahlenband */
  --f-lead:  clamp(1.125rem, 1.35vw, 1.3125rem);/* 18 → 21 */
  --f-body:  clamp(1.0625rem, 1.15vw, 1.1875rem);/* 17 → 19 */
  --f-small: 1rem;
  --f-micro: .875rem;
  --f-btn:   .9375rem;

  /* Form */
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --schatten:       0 12px 32px rgba(var(--schatten-farbe), .08);
  --schatten-hoch:  0 22px 48px rgba(var(--schatten-farbe), .16);
  --schatten-leise: 0 6px 18px rgba(var(--schatten-farbe), .06);

  /* Raster */
  --wrap: 1240px;
  --wrap-schmal: 780px;
  --pad: 20px;
  --bandpad: clamp(64px, 8vw, 120px);
  --gap: clamp(20px, 2.4vw, 32px);
  --kopfhoehe: 84px;

  /* Aliasse für Formulare, Admin, Plugins (eine Wortquelle, keine zweite Palette) */
  --navy: var(--text-stark);
  --ink: var(--tinte);
  --graphit: var(--text);
  --red-ink: #B4061F;            /* 6,9:1 auf Weiß: Fehlermeldungen */
  --ice: var(--kuehl-blau);
  --ice-soft: var(--kuehl);
  --ice-line: var(--linie);
  --line: var(--linie);
  --line-soft: var(--linie);
  --gap-klein: 12px;
  --container: var(--wrap);
  --color-bg: var(--weiss);
  --color-text: var(--tinte);
  --color-muted: var(--text-leise);
  --color-primary: var(--blau-tief);
  --color-primary-dark: var(--blau-nacht);
  --color-surface: var(--kuehl);
  --color-border: var(--linie);
  --color-accent: var(--gelb);
  --shadow: var(--schatten);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}
@media (min-width: 760px)  { :root { --pad: 32px; } }
@media (min-width: 1200px) { :root { --pad: 48px; } }
@media (max-width: 1359px) { :root { --kopfhoehe: 72px; } }

/* =========================================================================
   B · BASIS
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopfhoehe) + 24px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--f-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-stark);
  margin: 0;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* Zweiklang der Staging-Seite: Grundtext leicht, <b>-Teil fett (gemessen 45/300 + 45/700) */
h1 { font-size: var(--f-h1); font-weight: 500; line-height: 1.12; }
h2 { font-size: var(--f-h2); font-weight: 300; line-height: 1.2; }
h3 { font-size: var(--f-h3); font-weight: 700; line-height: 1.3; }
h4 { font-size: var(--f-h4); font-weight: 700; line-height: 1.35; }
h1 b, h2 b { font-weight: 700; color: var(--tinte); }
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: .75em; }
p, li, dd, td, th, figcaption, summary { overflow-wrap: break-word; }

/* Silbentrennung NUR am Handy und nur für lange Wörter. Stefans Anmerkungen 22
   und 33: „myPhy-sio“ und „Ner-vensystem“ entstanden aus hyphens:auto mit
   kurzen Mindestlängen. Hier: Wörter unter 10 Zeichen werden nie getrennt
   (schützt „myPhysio“), mindestens 4 Zeichen vor und nach der Trennstelle
   (verhindert „Ner-vensystem“). */
@media (max-width: 760px) {
  h1, h2, h3, p, li, dd, td, th, summary {
    -webkit-hyphens: auto; hyphens: auto;
    -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 10 4 4;
  }
}
.marke { -webkit-hyphens: none; hyphens: none; white-space: nowrap; }

a { color: var(--blau-tief); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--blau-nacht); }
/* Links im Fließtext ohne Farbe erkennbar (WCAG 1.4.1) */
main p a:not(.btn), main li a:not(.btn):not(.chip):not(.karte__link), main dd a { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--blau-tief);
  outline-offset: 3px;
  border-radius: 6px;
}
.fuss :focus-visible, .band--dunkel :focus-visible { outline-color: var(--gelb); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blau-tief); color: var(--weiss); padding: .8rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.text-mitte { text-align: center; }
[hidden] { display: none !important; }

.vorschaustreifen {
  margin: 0; padding: 8px var(--pad); text-align: center;
  background: var(--kuehl-blau); color: var(--text-stark);
  font-family: var(--font-heading); font-size: var(--f-micro); font-weight: 600;
  border-bottom: 1px solid var(--linie);
}

/* =========================================================================
   C · RASTER & BÄNDER
   ========================================================================= */
.wrap, .container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.wrap--schmal, .container--narrow { max-width: calc(var(--wrap-schmal) + 2 * var(--pad)); }
.band { position: relative; padding-block: var(--bandpad); }
.band--kuehl { background: var(--kuehl); }
.band--blau  { background: var(--kuehl-blau); }
.band--eng   { padding-block: clamp(40px, 5vw, 72px); }
.band--oben-null { padding-top: 0; }
.band--weich {
  /* Weicher Farbhauch wie die Pastellverläufe der Staging-Seite, aber dezenter */
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(19, 151, 216, .08), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(124, 193, 5, .07), transparent 60%),
    var(--kuehl);
}
.section { padding-block: var(--bandpad); }

.raster { display: grid; gap: var(--gap); }
@media (min-width: 700px)  { .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.split { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--bild-rechts > :first-child { order: 2; }
  .split--oben { align-items: start; }
}

/* Bandkopf: Überzeile + Zweiklang-Titel + Vorspann */
.bandkopf { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.bandkopf--mitte { margin-inline: auto; text-align: center; }
.bandkopf--mitte .kicker::after { margin-inline: auto; }
.bandkopf p { font-size: var(--f-lead); line-height: 1.6; color: var(--text); }

/* =========================================================================
   D · KOPF & MENÜ
   Eine weiße, klebende Leiste. Logo links, Menü, Social-Symbole und der
   gelbe Terminknopf rechts. Darunter die Verlaufslinie der Marke.
   Stefans Anmerkung 2: Social-Symbole oben und „angepinnt“, also in der
   klebenden Leiste selbst (auf der Staging-Seite scrollten sie weg).
   ========================================================================= */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  transition: box-shadow .25s ease;
}
.kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--verlauf); opacity: .9;
}
.kopf.ist-gescrollt { box-shadow: 0 8px 24px rgba(var(--schatten-farbe), .10); }
.kopf__in {
  height: var(--kopfhoehe);
  display: flex; align-items: center; gap: 12px;
  max-width: 1480px; margin-inline: auto; padding-inline: var(--pad);
  transition: height .25s ease;
}
.kopf.ist-gescrollt .kopf__in { height: calc(var(--kopfhoehe) - 12px); }
.kopf__logo { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; }
.kopf__logo img { width: clamp(140px, 10.5vw, 168px); height: auto; }
@media (max-width: 420px) { .kopf__logo img { width: 140px; } }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: 2px; }
.nav__punkt { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 9px;
  font-family: var(--font-heading); font-size: .875rem; font-weight: 600;
  color: var(--text-stark); text-decoration: none; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.nav__link:hover { color: var(--blau-tief); background: var(--kuehl); }
.nav__link[aria-current="page"], .nav__punkt.ist-aktiv > .nav__link { color: var(--blau-tief); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--verlauf); border-radius: 2px;
}
.nav__pfeil { width: 10px; height: 6px; transition: transform .2s ease; }
.nav__unter {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 260px;
  display: grid; gap: 2px; padding: 10px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__punkt:hover > .nav__unter, .nav__punkt:focus-within > .nav__unter, .nav__punkt.ist-offen > .nav__unter {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__punkt:hover .nav__pfeil, .nav__punkt.ist-offen .nav__pfeil { transform: rotate(180deg); }
.nav__unter a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text-stark); text-decoration: none; font-size: .9375rem;
}
.nav__unter a:hover { background: var(--kuehl-blau); color: var(--blau-tief); }
.nav__unter .extern-zeichen { width: 12px; height: 12px; color: var(--text-leise); flex: 0 0 auto; }

.kopf__social { display: flex; gap: 2px; }
.kopf__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 44px; color: var(--text-stark); border-radius: var(--radius-pill);
}
.kopf__social a:hover { color: var(--blau-tief); background: var(--kuehl); }
.kopf__social svg { width: 19px; height: 19px; }
.kopf__cta { flex: 0 0 auto; }

.burger {
  display: none; margin-left: auto;
  align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linie); border-radius: var(--radius-pill); background: var(--weiss);
  font-family: var(--font-heading); font-weight: 700; font-size: .9375rem; color: var(--text-stark);
  text-decoration: none;
}
.burger__striche { position: relative; width: 18px; height: 12px; }
.burger__striche::before, .burger__striche::after, .burger__striche span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
}
.burger__striche::before { top: 0; }
.burger__striche span { top: 5px; }
.burger__striche::after { bottom: 0; }

/* 1360 bis 1439 px (häufigste Laptop-Breite 1366): Menü enger, sonst ragt der
   Terminknopf 3 px aus dem Fenster (gemessen 01.10.2026). */
@media (min-width: 1360px) and (max-width: 1439px) {
  .nav__link { padding: 0 7px; }
  .kopf__in { gap: 8px; }
}
@media (max-width: 1359px) {
  .nav, .kopf__social { display: none; }
  .burger { display: inline-flex; }
  .kopf__cta { margin-left: 4px; }
}
@media (max-width: 560px) {
  .kopf .kopf__cta { display: none; }   /* am Handy übernimmt die Aktionsleiste unten */
}

/* Menü-Panel (Handy/Tablet). Ohne Skript öffnet es über :target. */
.panel {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: var(--weiss);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  overflow-y: auto; overscroll-behavior: contain;
}
.panel:target, .panel.ist-offen { opacity: 1; transform: none; visibility: visible; }
.panel__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--kopfhoehe); padding-inline: var(--pad); border-bottom: 1px solid var(--linie);
}
.panel__kopf img { width: 150px; }
.panel__zu {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linie); border-radius: var(--radius-pill);
  color: var(--text-stark); font-weight: 700; text-decoration: none; background: var(--weiss);
}
.panel__nav { padding: 12px var(--pad) 24px; }
.panel__nav > ul > li { border-bottom: 1px solid var(--linie); }
.panel__nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem;
  color: var(--text-stark); text-decoration: none;
}
.panel__nav a[aria-current="page"] { color: var(--blau-tief); }
.panel__unter { padding: 0 0 12px 14px; border-left: 3px solid var(--kuehl-blau); margin-bottom: 8px; }
.panel__unter a { min-height: 44px; font-size: 1rem; font-weight: 500; }
.panel__fuss { margin-top: auto; padding: 20px var(--pad) 32px; background: var(--kuehl); display: grid; gap: 16px; }
.panel__social { display: flex; gap: 8px; }
.panel__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--weiss); color: var(--text-stark);
}
.panel__social svg { width: 22px; height: 22px; }
body.menue-offen { overflow: hidden; }

/* =========================================================================
   E · KNÖPFE & TITEL
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-size: var(--f-btn); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; line-height: 1.2;
  text-align: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Gelb = „Termin anfragen“ (Staging: gelbe Pille mit dunkler Schrift) */
.btn--gelb, .btn--primary { background: var(--gelb); color: var(--tinte); box-shadow: 0 8px 20px rgba(237, 191, 0, .28); }
.btn--gelb:hover, .btn--primary:hover { background: var(--gelb-hover); color: var(--tinte); }
/* Blau = „Standort finden“. Tiefes Blau statt Markenblau: weiß darauf 5,37:1 */
.btn--blau, .btn--secondary { background: var(--blau-tief); color: var(--weiss); }
.btn--blau:hover, .btn--secondary:hover { background: var(--blau-nacht); color: var(--weiss); }
.btn--rand, .btn--ghost { background: transparent; color: var(--blau-tief); border-color: var(--blau-tief); }
.btn--rand:hover, .btn--ghost:hover { background: var(--blau-tief); color: var(--weiss); }
.btn--hell { background: var(--weiss); color: var(--blau-tief); }
.btn--hell:hover { background: var(--kuehl-blau); color: var(--blau-nacht); }
.btn--sm, .btn--klein { min-height: 44px; padding: 10px 18px; font-size: .8125rem; }
.btn--gross { min-height: 58px; padding: 16px 34px; font-size: 1rem; }
.btn--voll { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.knopfreihe--mitte { justify-content: center; }

.kicker {
  display: inline-block; margin: 0 0 14px;
  font-family: var(--font-heading); font-size: .875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blau-tief);
}
.kicker::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: 10px;
  background: var(--verlauf); border-radius: 3px;
}
.lead { font-size: var(--f-lead); line-height: 1.6; color: var(--text); }

/* Externer Link: kleines Pfeilsymbol, Name sagt „neuer Tab“ */
.extern-zeichen { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; margin-left: 4px; }

/* =========================================================================
   F · BÜHNE (Kopfbereich aller Seiten, überall gleich gesetzt)
   Regel aus den Korrekturrunden: „Heros auf allen Seiten exakt gleich
   gesetzt, mit mehr Leben, aber clean.“ Text links, Medium rechts in einem
   großen, abgerundeten Rahmen, Farbblätter dahinter. Am Handy Medium oben.
   ========================================================================= */
.buehne { position: relative; overflow: hidden; padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 96px); background: var(--weiss); }
.buehne__in { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) { .buehne__in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } }
.buehne__text { max-width: 640px; }
.buehne__text h1 { margin-bottom: 0; }
.buehne__lead { font-size: var(--f-lead); line-height: 1.6; margin-top: 22px; max-width: 560px; }
.buehne__medium { position: relative; }
.buehne__rahmen {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3; background: var(--kuehl-blau); box-shadow: var(--schatten-hoch);
  isolation: isolate;
}
.buehne__rahmen img, .buehne__rahmen video { width: 100%; height: 100%; object-fit: cover; }
.buehne__rahmen::after {
  /* feiner Glanz am unteren Rand, damit Bedienelemente auf hellen Bildern stehen */
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent);
}
@media (max-width: 959px) {
  .buehne__medium { order: -1; }
  .buehne__rahmen { aspect-ratio: 16 / 10; border-radius: var(--radius); }
}
/* Anschnitt (Aufwertung 01.10.2026): Ab 960 px läuft das Medium bis an den
   rechten Fensterrand, nur die linke Seite ist gerundet. Größer und ruhiger als
   ein Kasten, und eigen genug, um nicht wie Physio Pace (Vollbild) oder
   Ambulant Physio (Bild mit Textkarte) zu wirken. .buehne schneidet den
   Überstand ab, deshalb entsteht keine Scrollbreite. */
@media (min-width: 960px) {
  .buehne { padding-block: clamp(40px, 4vw, 64px) clamp(88px, 8vw, 128px); }
  .buehne__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .buehne__medium { margin-right: calc((min(100vw, var(--wrap) + 2 * var(--pad)) - 100vw) / 2 - var(--pad)); }
  .buehne__rahmen { aspect-ratio: auto; height: clamp(440px, 38vw, 620px); border-radius: 56px 0 0 56px; }
  .buehne__rahmen::before {
    /* Markenverlauf als feine Kante an der gerundeten Seite */
    content: ""; position: absolute; z-index: 2; left: 0; top: 56px; bottom: 56px; width: 5px;
    background: linear-gradient(180deg, #1397D8, #17CC82, #7CC105, #EDBF00, #E24D03, #D80927, #7E2BA5);
    border-radius: 0 5px 5px 0; opacity: .9; pointer-events: none;
  }
  .buehne .video-steuer { right: max(16px, calc((100vw - var(--wrap)) / 2 - 8px)); }
}
/* Am Handy steht das Medium randlos oben, unten gerundet */
@media (max-width: 959px) {
  .buehne { padding-top: 0; }
  .buehne__medium { margin-inline: calc(-1 * var(--pad)); }
  .buehne__rahmen { border-radius: 0 0 var(--radius-lg) var(--radius-lg); aspect-ratio: 4 / 3; box-shadow: none; }
}
@media (min-width: 600px) and (max-width: 959px) { .buehne__rahmen { aspect-ratio: 16 / 9; } }
/* Am Handy liegt die Plakette unten links über der Kante; der Pause-Knopf
   wandert deshalb nach oben rechts, sonst verdeckt ihn die Plakette. */
@media (max-width: 959px) {
  .buehne .video-steuer { top: 16px; bottom: auto; right: calc(var(--pad) + 4px); width: 44px; height: 44px; }
  .plakette { right: auto; max-width: calc(100% - 2 * var(--pad) - 8px); }
}

/* Google-Note als Glasplakette oben links im Medium (nur Startseite, Zahl aus config) */
.buehne__note {
  position: absolute; z-index: 3; left: 28px; top: 28px;
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px;
  background: rgba(255, 255, 255, .9); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: var(--schatten); color: var(--text-stark); text-decoration: none; font-family: var(--font-heading);
  transition: transform .2s ease, box-shadow .2s ease;
}
.buehne__note:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); color: var(--text-stark); }
.buehne__note-wert { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--tinte); }
.buehne__note-sterne { display: flex; gap: 2px; color: var(--gelb); }
.buehne__note-sterne svg { width: 14px; height: 14px; }
.buehne__note-text { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 600; line-height: 1.2; }
@media (max-width: 959px) { .buehne__note { left: calc(var(--pad) + 4px); top: 16px; padding: 8px 12px 8px 10px; } .buehne__note-wert { font-size: 1.375rem; } }
/* Video-Steuerung (WCAG 2.2.2: bewegter Inhalt über 5 s braucht Pause) */
.video-steuer {
  position: absolute; z-index: 2; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--tinte); box-shadow: var(--schatten);
}
.video-steuer:hover { background: var(--weiss); }
.video-steuer svg { width: 18px; height: 18px; }
.video-steuer .icon-play { display: none; }
.video-steuer[aria-pressed="true"] .icon-play { display: block; }
.video-steuer[aria-pressed="true"] .icon-pause { display: none; }

/* Plakette über dem Medium (nur belegte Angaben, z. B. Zahl der Standorte) */
.plakette {
  position: absolute; z-index: 3; left: -18px; bottom: 28px;
  display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  font-family: var(--font-heading); color: var(--text-stark);
}
.plakette__zahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; background: var(--kuehl-blau);
  font-size: 1.375rem; font-weight: 800; color: var(--blau-tief);
}
.plakette__text { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
@media (max-width: 959px) { .plakette { left: calc(var(--pad) + 4px); bottom: -22px; } }
@media (min-width: 960px) { .plakette { left: -28px; bottom: 40px; } }

/* Farbblätter: Deko, durchscheinend, multiplizierend wie im Logo */
.blaetter { position: absolute; z-index: 0; pointer-events: none; }
.blaetter svg { width: 100%; height: 100%; overflow: visible; }
.blaetter use, .blaetter path { mix-blend-mode: multiply; }
.buehne .blaetter { width: min(62vw, 820px); aspect-ratio: 1; right: -14vw; top: -18%; opacity: .55; }
.buehne .blaetter--zwei { width: min(36vw, 420px); left: -12vw; right: auto; top: auto; bottom: -30%; opacity: .35; }
.band .blaetter { width: min(40vw, 520px); aspect-ratio: 1; opacity: .28; }

/* Brotkrumen unter der Bühne (Unterseiten) */
.pfad { font-size: var(--f-micro); margin-bottom: 18px; color: var(--text-leise); }
.pfad ol { display: flex; flex-wrap: wrap; gap: 6px; }
.pfad li + li::before { content: "/"; margin-right: 6px; color: var(--linie-stark); }
.pfad a { display: inline-block; padding: 12px 4px; margin: -12px -4px; color: var(--text-leise); text-decoration: none; }
.pfad a:hover { color: var(--blau-tief); text-decoration: underline; }

/* =========================================================================
   G · BAUSTEINE
   ========================================================================= */
/* Karte */
.karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-leise); padding: clamp(24px, 2.6vw, 36px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.karte h3 { margin-bottom: 10px; }
.karte p { font-size: var(--f-small); line-height: 1.65; }
.karte--link:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); border-color: transparent; }
/* Tippfläche mind. 44 px (Gate 3): Polster ohne Einfluss auf den Zeilenfluss; die ganze Karte bleibt klickbar */
.karte__link { padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: none; }
.karte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.karte__link:focus-visible { outline: none; }
.karte__link:focus-visible::after { outline: 3px solid var(--blau-tief); outline-offset: 3px; }
.karte__mehr {
  margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: .875rem; font-weight: 700; color: var(--blau-tief);
}
.karte__mehr svg { width: 18px; height: 10px; transition: transform .2s ease; }
/* Einzelner Weiterlesen-Link unter einem Absatz, Tippfläche 44 px */
.link-pfeil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-heading); font-size: .9375rem; font-weight: 700; color: var(--blau-tief); text-decoration: none; }
.link-pfeil svg { width: 18px; height: 10px; transition: transform .2s ease; }
.link-pfeil:hover { text-decoration: underline; }
.link-pfeil:hover svg { transform: translateX(4px); }
.karte--link:hover .karte__mehr svg { transform: translateX(4px); }

.karte--foto { padding: 0; overflow: hidden; }
.bild-fehlt { display: block; width: 100%; height: 100%; min-height: 160px; background: var(--kuehl-blau); }
.karte__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kuehl-blau); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.karte--link:hover .karte__bild img { transform: scale(1.05); }
.karte__text { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.4vw, 30px); }

/* Symbolkreis in Karten */
.symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 18px; border-radius: 18px;
  background: var(--kuehl-blau); color: var(--blau-tief);
}
.symbol svg { width: 26px; height: 26px; }
.symbol--gelb { background: var(--gelb-hauch); color: var(--gelb-text); }
.symbol--gruen { background: var(--gruen-hauch); color: var(--gruen-text); }

/* Zahlenband */
.zahlen { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zahl {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(28px, 3vw, 44px) 20px; background: var(--weiss);
  border-radius: var(--radius); border: 1px solid var(--linie); box-shadow: var(--schatten-leise);
}
.zahl__wert {
  display: block; font-family: var(--font-heading); font-size: var(--f-zahl);
  font-weight: 800; line-height: 1; color: var(--blau); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.zahl__label {
  display: block; margin-top: 14px; font-family: var(--font-heading); font-weight: 700;
  font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-stark);
}
.zahl::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 4px;
  background: var(--verlauf); border-radius: 4px 4px 0 0;
}
/* Startseite: die drei Zahlen als eine Leiste, die in die Bühne hineinragt */
.band--zahlen { position: relative; z-index: 2; }
@media (min-width: 960px) { .band--zahlen { margin-top: calc(-1 * clamp(40px, 6vw, 88px)); } }
/* Am Handy: drei flache Zeilen (Zahl links, Bezeichnung rechts) statt drei hoher Kästen */
@media (max-width: 759px) {
  .band--zahlen .zahl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; text-align: left; }
  .band--zahlen .zahl__wert { font-size: 2.25rem; white-space: nowrap; }
  .band--zahlen .zahl__label { margin-top: 0; text-align: right; font-size: .8125rem; }
  .band--zahlen .zahl::after { display: none; }
}
.band--zahlen .zahlen {
  gap: 0; background: var(--weiss); border-radius: var(--radius-lg);
  border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); overflow: hidden;
}
.band--zahlen .zahl { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.band--zahlen .zahl + .zahl { border-top: 1px solid var(--linie); }
@media (min-width: 760px) {
  .band--zahlen .zahl + .zahl { border-top: 0; border-left: 1px solid var(--linie); }
}
.band--zahlen .zahl::after { left: 50%; right: auto; width: 0; transition: width .9s cubic-bezier(.2, .7, .2, 1) .2s, left .9s cubic-bezier(.2, .7, .2, 1) .2s; }
.band--zahlen .zahl.ist-da::after, html:not(.js) .band--zahlen .zahl::after { left: 25%; width: 50%; }

/* Punkte (Vertrauensmerkmale) */
.punkte { display: grid; gap: 28px 32px; }
@media (min-width: 620px) { .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.punkt { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.punkt .symbol { width: 52px; height: 52px; margin: 0; border-radius: 16px; }
.punkt h3 { font-size: var(--f-h4); margin-bottom: 6px; }
.punkt p { font-size: var(--f-small); line-height: 1.6; color: var(--text-leise); }

/* Chips (Filter, Ortswahl) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--linie); border-radius: var(--radius-pill); background: var(--weiss);
  font-family: var(--font-heading); font-size: .875rem; font-weight: 600; color: var(--text-stark);
  text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { border-color: var(--blau-tief); color: var(--blau-tief); }
.chip[aria-pressed="true"], .chip.ist-aktiv { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--weiss); }
.chip__zahl { font-size: .75rem; opacity: .8; }
/* Im aktiven (blauen) Chip volle Deckkraft: mit .8 nur 4,03 : 1 (axe, 01.10.2026) */
.chip[aria-pressed="true"] .chip__zahl, .chip.ist-aktiv .chip__zahl,
[aria-selected="true"] > .chip__zahl { opacity: 1; }
/* Brühl: grün statt blau beim Darüberfahren (Stefans Anmerkung 12) */
.chip--gruen:hover, .chip--gruen:focus-visible { background: var(--gruen-hauch); border-color: var(--gruen-dunkel); color: var(--gruen-text); }

/* Suchfeld */
.suchfeld { position: relative; }
.suchfeld input {
  width: 100%; min-height: 56px; padding: 14px 54px 14px 52px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-pill); background: var(--weiss);
  font-size: 1rem; color: var(--tinte);
}
.suchfeld input:focus { outline: 3px solid var(--blau-tief); outline-offset: 2px; border-color: var(--blau-tief); }
.suchfeld__lupe { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--text-leise); pointer-events: none; }
.suchfeld__leeren {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-leise);
}

/* Häkchenliste */
.haken { display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 32px; font-size: var(--f-small); line-height: 1.55; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--kuehl-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%231470A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Hinweiskasten */
.hinweis {
  padding: 18px 22px; border-left: 4px solid var(--blau); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--kuehl-blau); font-size: var(--f-small); color: var(--text-stark);
}

/* Bildstapel (Warum-Band) */
.bildstapel { position: relative; display: grid; gap: 18px; }
.bildstapel img { width: 100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--schatten); }
@media (min-width: 960px) {
  .bildstapel { grid-template-columns: 1.2fr 1fr; align-items: end; }
  .bildstapel img:first-child { aspect-ratio: 4 / 5; }
  .bildstapel img:last-child { aspect-ratio: 4 / 5; margin-bottom: 48px; }
}

/* =========================================================================
   H · STARTSEITE
   ========================================================================= */
/* Bento „Ganzheitliche Bewegung“: drei Fotokarten, die erste doppelt hoch.
   Weißer Text auf einem Verlauf, der unten fast deckend ist (Text steht nur dort). */
.bento { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__karte--gross { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(290px, auto)); }
  .bento__karte--gross { grid-column: 1; grid-row: 1 / span 2; }
}
.bento__karte {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 340px; border-radius: var(--radius-lg); background: var(--blau-nacht); color: var(--weiss);
  box-shadow: var(--schatten); transition: transform .3s ease, box-shadow .3s ease;
}
.bento__bild { position: absolute; inset: 0; z-index: -2; }
.bento__bild picture, .bento__bild img { width: 100%; height: 100%; object-fit: cover; }
.bento__bild img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.bento__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.bento__film.ist-an { opacity: 1; }
.bento__karte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 34, 52, 0) 18%, rgba(10, 34, 52, .55) 50%, rgba(10, 34, 52, .92) 100%);
}
.bento__karte::after {
  /* Markenverlauf wächst beim Darüberfahren unten über die Karte */
  content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 0; z-index: 1;
  background: var(--verlauf); transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.bento__karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.bento__karte:hover::after, .bento__karte:focus-within::after { width: 100%; }
.bento__karte:hover .bento__bild img { transform: scale(1.06); }
.bento__text { padding: clamp(24px, 2.8vw, 40px); max-width: 560px; }
.bento__nr { display: block; margin-bottom: 10px; font-family: var(--font-heading); font-size: .875rem; font-weight: 800; letter-spacing: .14em; color: var(--gelb); }
.bento__karte h3 { color: var(--weiss); margin-bottom: 8px; }
.bento__karte .karte__link, .bento__karte .karte__link:hover { color: var(--weiss); }
.bento__karte--gross h3 { font-size: var(--f-h2); }
.bento__karte p { font-size: var(--f-small); line-height: 1.6; color: rgba(255, 255, 255, .92); }
.bento__karte .karte__mehr { color: var(--weiss); padding-top: 14px; }
.bento__karte .karte__link:focus-visible::after { outline-color: var(--gelb); }
@media (min-width: 1000px) { .bento__karte--gross { min-height: 600px; } }

/* „Was führt dich zu uns?“: vier Fotokarten, rechte Spalte versetzt (Staging) */
.ziele { display: grid; gap: var(--gap); }
@media (min-width: 760px) {
  .ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ziele > :nth-child(even) { transform: translateY(56px); }
  .ziele { padding-bottom: 56px; }
}
@media (min-width: 1200px) { .ziele { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ziele > :nth-child(even) { transform: translateY(40px); } }

/* Stimmen (Google-Bewertungen) */
.stimmen__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.gesamtnote {
  display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten-leise); border: 1px solid var(--linie);
}
.gesamtnote__wert { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; color: var(--tinte); line-height: 1; }
.gesamtnote__sterne { display: flex; gap: 2px; color: var(--gelb); }
.gesamtnote__sterne svg { width: 18px; height: 18px; }
.gesamtnote__text { font-size: var(--f-micro); color: var(--text-leise); line-height: 1.4; }
.stimmen__spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 22px; margin-inline: -4px;
  scrollbar-width: thin;
}
@media (min-width: 1100px) { .stimmen__spur { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
.stimme {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; background: var(--weiss); border-radius: var(--radius); border: 1px solid var(--linie);
  box-shadow: var(--schatten-leise);
}
.stimme__sterne { display: flex; gap: 2px; color: var(--gelb); }
.stimme__sterne svg { width: 16px; height: 16px; }
.stimme blockquote { margin: 0; font-size: var(--f-small); line-height: 1.65; color: var(--text); white-space: pre-line; }
.stimme footer { margin-top: auto; font-family: var(--font-heading); font-weight: 700; color: var(--text-stark); font-size: .9375rem; }
.stimme footer span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--f-micro); color: var(--text-leise); }
.spur-steuer { display: flex; gap: 10px; }
.spur-steuer button {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-stark);
}
.spur-steuer button:hover { border-color: var(--blau-tief); color: var(--blau-tief); }
.spur-steuer svg { width: 18px; height: 18px; }
.spur-fortschritt { position: relative; height: 4px; margin: 4px 4px 0; border-radius: 4px; background: var(--linie); overflow: hidden; }
.spur-fortschritt span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--verlauf); transition: transform .15s linear; }
.stimmen__spur { scrollbar-width: none; }
.stimmen__spur::-webkit-scrollbar { display: none; }
.stimme { transition: transform .25s ease, box-shadow .25s ease; }
.stimme:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.rechtshinweis { margin-top: 18px; font-size: var(--f-micro); color: var(--text-leise); }

/* Karriere-Teaser */
.karriere {
  position: relative; overflow: hidden; display: grid; gap: 0; align-items: stretch;
  background: var(--weiss); border-radius: var(--radius-lg); box-shadow: var(--schatten); border: 1px solid var(--linie);
}
@media (min-width: 900px) { .karriere { grid-template-columns: 1.05fr 1fr; } }
.karriere__text { padding: clamp(32px, 5vw, 64px); }
.karriere__bild { min-height: 280px; }
.karriere__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Film im Karriere-Band: selbst gehostet, ein Klick startet mit Ton (Agenturregel Video) */
.karriere__film { position: relative; display: grid; place-items: center; padding: clamp(16px, 2.6vw, 36px); background: var(--kuehl-blau); }
.karriere__film video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--blau-nacht); box-shadow: var(--schatten); }
.film__start { display: none; }
.js .film__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border: 0; border-radius: 50%;
  background: var(--gelb); color: var(--tinte); box-shadow: var(--schatten-hoch);
  transition: transform .2s ease, background-color .2s ease;
}
.js .film__start:hover { background: var(--gelb-hover); transform: translate(-50%, -50%) scale(1.06); }
.js .film__start:focus-visible { outline: 3px solid var(--blau-tief); outline-offset: 4px; }
.film__start svg { width: 30px; height: 30px; margin-left: 4px; }
.karriere__film.laeuft .film__start { display: none; }

/* =========================================================================
   I · BESCHWERDE-FINDER „Wo tut es dir weh?“
   Ohne Skript: Regionen als Liste mit Links. Mit Skript: Körperfigur mit
   Punkten, Panel mit Krankheitsbildern und Leistungen.
   ========================================================================= */
.finder { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .finder { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); } }
.finder__figur { position: relative; max-width: 420px; margin-inline: auto; width: 100%; }
.finder__figur svg { width: 100%; height: auto; }
.finder__koerper { fill: url(#finder-verlauf); }
.finder__glieder { fill: none; stroke: url(#finder-verlauf); }
.finder__figur svg { overflow: visible; }
.finder__punkt.ist-aktiv circle.ring { fill: rgba(237, 191, 0, .35); }
.finder__bereich:not([hidden]) { animation: einblenden .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.finder__leine { stroke: var(--linie-stark); stroke-width: 1.5; stroke-dasharray: 3 4; }
.finder__punkt.ist-aktiv circle.kern { fill: var(--gelb); stroke: var(--tinte); }
.finder__punkt { cursor: pointer; }
.finder__punkt circle.ring { fill: rgba(19, 151, 216, .16); transform-box: fill-box; transform-origin: center; animation: puls 2.4s ease-out infinite; }
.finder__punkt circle.kern { fill: var(--weiss); stroke: var(--blau-tief); stroke-width: 4; transition: fill .2s ease; }
.finder__punkt:hover circle.kern, .finder__punkt[aria-pressed="true"] circle.kern { fill: var(--gelb); stroke: var(--tinte); }
.finder__punkt:focus { outline: none; }
.finder__punkt:focus-visible circle.kern { stroke: var(--tinte); stroke-width: 6; }
.finder__etikett { font-family: var(--font-heading); font-size: 15px; font-weight: 700; fill: var(--text-stark); pointer-events: none; }
@keyframes puls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.finder__wahl { margin-bottom: 20px; }
.finder__panel {
  min-height: 320px; padding: clamp(24px, 3vw, 40px); background: var(--weiss);
  border-radius: var(--radius-lg); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.finder__panel h3 { font-size: var(--f-h3); margin-bottom: 8px; }
.finder__gruppe + .finder__gruppe { margin-top: 26px; }
.finder__gruppe h4 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 12px; }
.finder__links { display: grid; gap: 10px; }
@media (min-width: 560px) { .finder__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.finder__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--kuehl);
  color: var(--text-stark); font-weight: 600; text-decoration: none; font-size: var(--f-small);
  transition: background-color .2s ease, color .2s ease;
}
.finder__links a:hover { background: var(--kuehl-blau); color: var(--blau-tief); }
.finder__links svg { width: 18px; height: 10px; flex: 0 0 auto; }
.finder__start { color: var(--text-leise); }
.finder__hinweis { margin-top: 22px; font-size: var(--f-micro); color: var(--text-leise); }

/* =========================================================================
   J · STANDORTE: eigene Karte (SVG, ohne Fremdserver), Suche, Liste
   ========================================================================= */
.ortsfinder { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 1000px) { .ortsfinder { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.karte-region {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--kuehl-blau);
  border: 1px solid var(--linie); box-shadow: var(--schatten);
}
@media (min-width: 1000px) { .karte-region { position: sticky; top: calc(var(--kopfhoehe) + 24px); } }
.karte-region svg { width: 100%; height: auto; }
.karte-region .land { fill: var(--kuehl-blau); }
.karte-region .rhein { fill: none; stroke: var(--rhein); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.karte-region .rhein-mitte { fill: none; stroke: var(--rhein-hell); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.karte-region .ortname { font-family: var(--font-heading); font-size: 17px; font-weight: 700; fill: var(--text-stark); }
.karte-region .ortname--klein { font-size: 13px; font-weight: 600; fill: var(--text-leise); }
.pin { cursor: pointer; }
.pin .pin__form { fill: var(--blau-tief); stroke: var(--weiss); stroke-width: 3; transition: fill .2s ease, transform .2s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.pin .pin__nr { font-family: var(--font-heading); font-size: 13px; font-weight: 800; fill: var(--weiss); pointer-events: none; }
.pin:hover .pin__form, .pin.ist-aktiv .pin__form { fill: var(--rot); transform: scale(1.18); }
.pin--gruen:hover .pin__form, .pin--gruen.ist-aktiv .pin__form { fill: var(--gruen-dunkel); }
.pin:focus { outline: none; }
.pin:focus-visible .pin__form { stroke: var(--tinte); stroke-width: 5; }
.pin.ist-gedimmt { opacity: .35; }
.karte-region__quelle { position: absolute; right: 10px; bottom: 8px; font-size: .75rem; color: var(--text-leise); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 8px; }
.karte-region__du { fill: var(--gelb); stroke: var(--tinte); stroke-width: 3; }

.ortsfinder__steuer { display: grid; gap: 16px; margin-bottom: 24px; }
.ortsfinder__zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ortsfinder__zeile .suchfeld { flex: 1 1 260px; }
.ortsfinder__meldung { font-size: var(--f-small); color: var(--text-stark); min-height: 1.5em; }
.ortsfinder__meldung.ist-fehler { color: var(--red-ink); font-weight: 700; }

.ortsliste { display: grid; gap: 14px; }
.ortsgruppe__titel { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin: 14px 0 2px; }
.ort {
  position: relative; display: grid; gap: 10px; padding: 22px 24px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-leise); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ort.ist-aktiv { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(19, 151, 216, .18), var(--schatten); }
.ort--gruen.ist-aktiv { border-color: var(--gruen-dunkel); box-shadow: 0 0 0 3px rgba(20, 153, 33, .18), var(--schatten); }
.ort__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ort h3 { font-size: var(--f-h4); }
.ort__nr {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--blau-tief); color: var(--weiss);
  font-family: var(--font-heading); font-size: .8125rem; font-weight: 800; vertical-align: 2px;
}
.ort--gruen .ort__nr { background: var(--gruen-dunkel); }
.ort__abstand { font-family: var(--font-heading); font-weight: 700; color: var(--blau-tief); font-size: .9375rem; white-space: nowrap; }
.ort address { font-style: normal; font-size: var(--f-small); line-height: 1.55; }
.ort__marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marke-etikett {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--kuehl-blau); color: var(--blau-tief); font-size: .75rem; font-weight: 700; font-family: var(--font-heading);
}
.marke-etikett--gelb { background: var(--gelb-hauch); color: var(--gelb-text); }
.chip.ist-gewaehlt { background: var(--kuehl-blau); border-color: var(--blau-tief); color: var(--blau-tief); }
.chip--gruen.ist-gewaehlt { background: var(--gruen-hauch); border-color: var(--gruen-dunkel); color: var(--gruen-text); }
[data-ortsliste]:not([hidden]) { margin-top: 20px; }
[data-ortsliste] .ort { animation: einblenden .4s cubic-bezier(.2, .7, .2, 1); }
.ort__aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ort__aktionen .btn { min-height: 44px; padding: 10px 16px; font-size: .75rem; }

/* =========================================================================
   K · LEISTUNGSFINDER (/physiotherapie/)
   ========================================================================= */
.lfinder__steuer {
  position: sticky; top: calc(var(--kopfhoehe) - 1px); z-index: 20;
  display: grid; gap: 14px; padding: 16px 0 18px; margin-bottom: 18px;
  background: linear-gradient(var(--kuehl) 85%, rgba(244, 247, 249, 0));
}
@media (min-width: 900px) { .lfinder__steuer { grid-template-columns: minmax(260px, 380px) 1fr; align-items: center; } }
.lfinder__chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
.lfinder__chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .lfinder__chips { flex-wrap: wrap; overflow: visible; } }
.lfinder__raster { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .lfinder__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lfinder__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lkarte__art { position: absolute; z-index: 1; left: 14px; top: 14px; }
.lfinder__leer { padding: 40px; text-align: center; background: var(--weiss); border-radius: var(--radius); border: 1px dashed var(--linie-stark); }
.lfinder__zahl { font-size: var(--f-small); color: var(--text-leise); margin: 0 0 10px; }

/* Zielrad (/physiotherapie/): fünf Therapieziele wie das Rad der Staging-Seite.
   Ohne Skript: Liste mit allen Texten. Mit Skript (.ist-bereit): Wahl im Rad oder per Knopf,
   der Text steht in der Mitte des Rads. */
.zielrad { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1040px; margin: clamp(40px, 5vw, 72px) auto 8px; }
@media (min-width: 860px) { .zielrad { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
.zielrad__bild { position: relative; width: min(100%, 420px); margin-inline: auto; aspect-ratio: 1; }
.zielrad__bild svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zielrad__teil { cursor: pointer; }
.zielrad__teil path { fill: var(--kuehl-blau); transition: fill .25s ease; }
.zielrad__teil text { fill: var(--blau-tief); font-family: var(--font-heading); font-weight: 700; font-size: 17px; letter-spacing: .02em; pointer-events: none; }
.zielrad__teil:hover path { fill: var(--linie-blau); }
.zielrad__teil.ist-aktiv path { fill: var(--blau-tief); }
.zielrad__teil.ist-aktiv text { fill: var(--weiss); }
.zielrad__mitte {
  position: absolute; inset: 32%; display: none; place-items: center; margin: 0; text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: .875rem; line-height: 1.45; color: var(--text-stark);
}
.zielrad.ist-bereit .zielrad__mitte { display: grid; }
.zielrad__liste ul { display: grid; gap: 12px; margin-top: 12px; }
.zielrad__liste li p { margin: 6px 0 0; font-size: var(--f-small); color: var(--text-leise); }
.zielrad.ist-bereit .zielrad__liste li p { display: none; }
.zielrad__wahl {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--linie);
  border-radius: var(--radius-pill); background: var(--weiss); font-family: var(--font-heading); font-size: .9375rem;
  font-weight: 700; color: var(--text-stark); transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.zielrad__wahl:hover { border-color: var(--blau-tief); color: var(--blau-tief); }
.zielrad__wahl[aria-pressed="true"] { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--weiss); }
.zielrad:not(.ist-bereit) .zielrad__wahl { pointer-events: none; border: 0; padding: 0; min-height: 0; background: none; color: var(--text-stark); }

/* =========================================================================
   L · LEISTUNGSSEITEN
   ========================================================================= */
.inhaltsnav {
  position: sticky; top: calc(var(--kopfhoehe) - 1px); z-index: 20;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.inhaltsnav ul { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.inhaltsnav ul::-webkit-scrollbar { display: none; }
.inhaltsnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; white-space: nowrap;
  border-radius: var(--radius-pill); color: var(--text-stark); text-decoration: none;
  font-family: var(--font-heading); font-size: .875rem; font-weight: 600;
}
.inhaltsnav a:hover { background: var(--kuehl); color: var(--blau-tief); }
.inhaltsnav a.ist-aktiv { background: var(--kuehl-blau); color: var(--blau-tief); }
.fortschritt { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--verlauf); }

.prosa h2 { margin-bottom: 18px; }
.prosa h2 + p { margin-top: 0; }
.prosa p + h2 { margin-top: 44px; }
.prosa .haken { margin: 18px 0 8px; }
.medienrahmen { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--schatten-hoch); aspect-ratio: 4 / 3; background: var(--kuehl-blau); }
.medienrahmen img, .medienrahmen video { width: 100%; height: 100%; object-fit: cover; }
.medienrahmen__marke {
  position: absolute; z-index: 2; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.92);
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700; color: var(--text-stark);
}
.medienrahmen__marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); }

.vorteile { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vorteil { padding: 28px; background: var(--weiss); border-radius: var(--radius); border: 1px solid var(--linie); }
.vorteil__nr { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: var(--blau); margin-bottom: 12px; }
.vorteil h3 { font-size: var(--f-h4); margin-bottom: 8px; }
.vorteil p { font-size: var(--f-small); line-height: 1.6; }

.einsatz { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .einsatz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einsatz .karte h3 { font-size: var(--f-h4); margin-bottom: 16px; }

/* Aufklappzeilen (FAQ) */
.fragen { display: grid; gap: 12px; max-width: 920px; margin-inline: auto; }
.frage { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.frage summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 64px 20px 24px; min-height: 64px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; color: var(--text-stark);
  display: flex; align-items: center;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: var(--kuehl-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke='%231470A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: transform .25s ease;
}
.frage[open] summary::after { transform: rotate(180deg); }
.frage summary:hover { color: var(--blau-tief); }
.frage__txt { padding: 0 24px 22px; font-size: var(--f-small); line-height: 1.7; }
.frage[open] { border-color: var(--linie-blau); box-shadow: var(--schatten-leise); }

/* Abschlussbox */
.abschluss {
  position: relative; overflow: hidden; text-align: center; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  background: var(--kuehl-blau); border-radius: var(--radius-lg);
}
.abschluss > * { position: relative; z-index: 1; }
.abschluss p { max-width: 720px; margin-inline: auto; font-size: var(--f-lead); line-height: 1.6; }
.abschluss h2 { margin-bottom: 18px; }

/* Querverweise „Das könnte dich auch interessieren“ */
.querverweise { display: grid; gap: 14px; }
@media (min-width: 700px) { .querverweise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ablauf in Schritten (Hub, „Dein Weg zur Besserung“) */
.schritte { position: relative; display: grid; gap: var(--gap); margin-top: 8px; }
@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritte::before { content: ""; position: absolute; top: 28px; left: 17%; right: 17%; height: 3px; background: var(--verlauf); opacity: .55; border-radius: 3px; }
}
.schritt { position: relative; text-align: center; padding: 0 12px; }
.schritt__nr {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--weiss);
  border: 3px solid var(--blau); font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800; color: var(--blau-tief);
}
.schritt h3 { font-size: var(--f-h4); margin-bottom: 8px; }
.schritt p { font-size: var(--f-small); line-height: 1.65; max-width: 360px; margin-inline: auto; }
.karte h4 { margin-bottom: 8px; }
.abschluss .blaetter { width: 340px; aspect-ratio: 610 / 766; right: -90px; top: -110px; opacity: .3; }
.band .blaetter { position: absolute; }

/* =========================================================================
   M · PREISE & PREISRECHNER
   ========================================================================= */
.reiter { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 4px; padding: 5px; border-radius: var(--radius-pill); background: var(--weiss); border: 1px solid var(--linie); }
@media (max-width: 420px) { .reiter { border-radius: var(--radius); } .reiter button, .reiter a { flex: 1 1 auto; justify-content: center; padding: 8px 14px; } }
.reiter button, .reiter a {
  min-height: 44px; padding: 8px 20px; border: 0; border-radius: var(--radius-pill); background: transparent;
  font-family: var(--font-heading); font-weight: 700; font-size: .875rem; color: var(--text-stark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.reiter [aria-selected="true"], .reiter .ist-aktiv { background: var(--blau-tief); color: var(--weiss); }
.preistabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: var(--radius); overflow: hidden; }
.preistabelle th, .preistabelle td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--linie); font-size: var(--f-small); }
.preistabelle thead th { font-family: var(--font-heading); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); background: var(--kuehl); }
.preistabelle td:last-child, .preistabelle th:last-child { text-align: right; white-space: nowrap; }
.preistabelle tbody tr:hover { background: var(--kuehl); }
.preistabelle .betrag { font-family: var(--font-heading); font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; }
.preistabelle__rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
.preise__kopf { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.rechner {
  display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); background: var(--weiss);
  border-radius: var(--radius-lg); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.rechner__zeile { display: grid; gap: 12px; }
@media (min-width: 700px) { .rechner__zeile { grid-template-columns: 1fr 140px; align-items: end; } }
.rechner label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: .875rem; color: var(--text-stark); margin-bottom: 6px; }
.rechner select, .rechner input {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-sm); background: var(--weiss); font-size: 1rem; color: var(--tinte);
}
.rechner__summe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 16px;
  border-top: 2px solid var(--linie);
}
.rechner__summe strong { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--tinte); font-variant-numeric: tabular-nums; }
.rechner__posten { display: grid; gap: 8px; font-size: var(--f-small); }
.rechner__posten li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--linie); }
.rechner__posten button { border: 0; background: transparent; color: var(--red-ink); font-weight: 700; min-height: 32px; }
.rechner__hinweis { font-size: var(--f-micro); color: var(--text-leise); }

/* =========================================================================
   N · ZEITLEISTE & PARTNER
   ========================================================================= */
.zeitleiste { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px 4px 24px; }
.zeitleiste::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 3px; background: var(--verlauf); opacity: .6; border-radius: 3px; }
.zeitpunkt { position: relative; scroll-snap-align: start; padding-top: 38px; }
.zeitpunkt::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--weiss); border: 4px solid var(--blau);
}
.zeitpunkt--heute::before { border-color: var(--gelb); background: var(--gelb); }
.zeitpunkt__jahr { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--blau-tief); margin-bottom: 10px; }
.zeitpunkt__karte { padding: 22px; background: var(--weiss); border-radius: var(--radius); border: 1px solid var(--linie); box-shadow: var(--schatten-leise); height: calc(100% - 46px); }
.zeitpunkt__karte h3 { font-size: var(--f-h4); margin-bottom: 8px; }
.zeitpunkt__karte p { font-size: var(--f-small); line-height: 1.6; }

.partner-raster { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .partner-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .partner-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partner-kachel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 170px; padding: 22px; text-align: center; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text-stark); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
a.partner-kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.partner-kachel img { max-height: 76px; width: auto; object-fit: contain; }
.partner-kachel span { font-family: var(--font-heading); font-weight: 700; font-size: .875rem; }

/* =========================================================================
   O · FAQ, KONTAKT, RECHTSTEXTE
   ========================================================================= */
.faq-steuer { display: grid; gap: 16px; max-width: 920px; margin: 0 auto 28px; }
.faq-gruppe + .faq-gruppe { margin-top: 44px; }
.faq-gruppe__titel { max-width: 920px; margin: 0 auto 16px; font-size: var(--f-h3); }

.wege { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.weg { position: relative; padding: clamp(28px, 3.4vw, 44px); background: var(--weiss); border-radius: var(--radius-lg); border: 1px solid var(--linie); box-shadow: var(--schatten-leise); }
.weg--empfohlen { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(19, 151, 216, .14), var(--schatten); }
.weg__etikett { position: absolute; top: -14px; left: 28px; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--gelb); color: var(--tinte); font-family: var(--font-heading); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.rechtstext { max-width: 860px; margin-inline: auto; }
.rechtstext h2 { font-size: var(--f-h3); font-weight: 700; margin: 44px 0 14px; }
.rechtstext h3 { font-size: var(--f-h4); margin: 26px 0 10px; }
.rechtstext p, .rechtstext li { font-size: var(--f-small); line-height: 1.75; }
.rechtstext ul { margin: 0 0 1em; display: grid; gap: 6px; }
.rechtstext ul li { position: relative; padding-left: 20px; }
.rechtstext ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--blau); }
.rechtstext dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: var(--f-small); margin: 0 0 1em; }
.rechtstext dt { font-weight: 700; color: var(--text-stark); }
.rechtstext dd { margin: 0; }
.firmenblock { padding: 24px 28px; margin-bottom: 20px; border-radius: var(--radius); background: var(--kuehl); }
.firmenblock h3 { margin-top: 0; }
.ki-transparenz { display: flex; align-items: flex-start; gap: 14px; margin-top: 8px; }
.ki-transparenz img { flex: none; width: 22px; height: 22px; margin-top: .3em; }
.rechtstext__inhalt { margin: 0 0 32px; padding: 22px 26px; border-radius: var(--radius); background: var(--kuehl); }
.rechtstext__inhalt ol { margin: 0; padding-left: 1.4em; columns: 2 220px; column-gap: 32px; }
.rechtstext__inhalt li { font-size: var(--f-small); line-height: 1.9; }
.rechtstext .rechtstext__inhalt li { padding-left: 0; }
.rechtstext .rechtstext__inhalt li::before { content: none; }
.rechtstext__stand { margin-top: 40px; color: var(--text-leise); }
.firmenblock h2 { margin-top: 0; }

/* Kontakt: zwei Wege, Durchwahlen direkt auf der Seite */
.weg h3 { margin-bottom: 10px; }
.weg .knopfreihe { margin-top: 22px; }
.telefonliste.telefonliste--seite { max-height: none; overflow: visible; margin: 18px -14px 0; padding: 0; }
.kontakt__hinweis { max-width: 920px; margin: 28px auto 0; }
.chip__pin { width: 16px; height: 16px; flex: none; color: var(--blau-tief); }
.chip[aria-pressed="true"] .chip__pin, .chip.ist-aktiv .chip__pin { color: inherit; }

/* FAQ: Reiter erst mit Skript; dann tragen sie die Gruppentitel */
.faq-reiter { justify-self: center; flex-wrap: wrap; justify-content: center; border-radius: var(--radius); }
.faq-meldung { min-height: 1.5em; text-align: center; font-size: var(--f-small); color: var(--text-leise); }
[data-faq]:has(.faq-reiter:not([hidden])) .faq-gruppe__titel { display: none; }
[data-faq]:has(.faq-reiter:not([hidden])) .faq-gruppe + .faq-gruppe { margin-top: 0; }

/* Partner: Filter mittig, Kacheln füllen ihre Rasterzelle */
.chips--mitte { justify-content: center; }
.partner-filter { margin-bottom: 32px; }
.partner-raster > li { display: flex; }
.partner-raster .partner-kachel { flex: 1; }

/* Weitere Leistungen: Herkunft externer Angebote */
.karte__quelle {
  margin-bottom: 10px; font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise);
}

/* =========================================================================
   P · DIALOG (Online-Rezeption, Telefonwahl) & AKTIONSLEISTE
   ========================================================================= */
.dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
  border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); color: var(--text);
}
.dialog::backdrop { background: rgba(18, 32, 44, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 0 28px; }
.dialog__kopf h2 { font-size: var(--f-h3); font-weight: 700; }
.dialog__zu {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kuehl);
  display: inline-flex; align-items: center; justify-content: center; color: var(--tinte);
}
.dialog__zu svg { width: 18px; height: 18px; }
.dialog__inhalt { padding: 16px 28px 28px; }
.dialog__inhalt p { font-size: var(--f-small); }
.dialog--termin.ist-geladen { width: min(480px, calc(100vw - 16px)); height: min(760px, calc(100dvh - 16px)); }
.dialog--termin.ist-geladen .dialog__inhalt { padding: 0; height: calc(100% - 64px); }
.dialog__rahmen { width: 100%; height: 100%; border: 0; display: block; }
.dialog__knoepfe { display: grid; gap: 10px; margin-top: 20px; }
.dialog__klein { font-size: var(--f-micro); color: var(--text-leise); margin-top: 16px; }
.telefonliste { display: grid; gap: 4px; max-height: 60dvh; overflow-y: auto; margin: 8px -8px 0; padding: 0 8px; }
.telefonliste a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px;
  border-radius: var(--radius-sm); color: var(--text-stark); text-decoration: none; font-size: var(--f-small);
}
.telefonliste a:hover { background: var(--kuehl); }
.telefonliste strong { font-family: var(--font-heading); }
.telefonliste span { color: var(--blau-tief); font-weight: 700; white-space: nowrap; }

.aktionsleiste {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  display: none; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(var(--schatten-farbe), .14);
  transform: translateY(110%); transition: transform .3s ease;
}
.aktionsleiste.ist-sichtbar { transform: none; }
.aktionsleiste a, .aktionsleiste button {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 6px 8px; border-radius: var(--radius-sm); border: 0;
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700; text-decoration: none; color: var(--text-stark); background: var(--kuehl);
}
.aktionsleiste svg { width: 20px; height: 20px; }
.aktionsleiste .aktionsleiste__termin { background: var(--gelb); color: var(--tinte); flex-direction: row; gap: 8px; font-size: .8125rem; }
@media (max-width: 760px) {
  .aktionsleiste { display: grid; }
  body.hat-aktionsleiste { padding-bottom: 80px; }
}

/* =========================================================================
   Q · FUSS
   ========================================================================= */
.fuss { position: relative; background: var(--kuehl-blau); color: var(--text); padding-top: clamp(56px, 7vw, 96px); }
.fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--verlauf); }
.fuss__raster { display: grid; gap: 40px; }
@media (min-width: 760px)  { .fuss__raster { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss__logo img { width: 190px; }
.fuss__claim { margin-top: 18px; font-size: var(--f-small); max-width: 340px; }
.fuss h2 { font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-stark); margin-bottom: 16px; }
.fuss ul { display: grid; gap: 4px; }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-size: var(--f-small); }
.fuss li a:hover { color: var(--blau-tief); text-decoration: underline; }
.fuss__social { display: flex; gap: 10px; margin-top: 22px; }
.fuss__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--weiss); color: var(--text-stark); box-shadow: var(--schatten-leise);
}
.fuss__social a:hover { color: var(--blau-tief); }
.fuss__social svg { width: 20px; height: 20px; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  margin-top: 56px; padding-block: 24px 32px; border-top: 1px solid var(--linie-fuss); font-size: var(--f-micro); color: var(--text-leise);
}
.fuss__unten a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--text-leise); }

/* =========================================================================
   R · BEWEGUNG
   Nur dezent, nur wenn erwünscht. Ohne Skript ist alles sichtbar
   (.js wird erst von main.js an <html> gesetzt).
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js [data-reveal].ist-da { opacity: 1; transform: none; }
  .js [data-reveal="2"] { transition-delay: .08s; }
  .js [data-reveal="3"] { transition-delay: .16s; }
  .js [data-reveal="4"] { transition-delay: .24s; }
  .blaetter--schweben svg { animation: schweben 18s ease-in-out infinite alternate; }
  @keyframes schweben { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-2%, 3%, 0) rotate(6deg); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .finder__punkt circle.ring { display: none; }
}

/* =========================================================================
   S · KLEINE BREITEN
   ========================================================================= */
@media (max-width: 560px) {
  .knopfreihe .btn { width: 100%; }
  .btn { padding-inline: 20px; }
  .ort__aktionen .btn { flex: 1 1 auto; }
  .preistabelle th, .preistabelle td { padding: 12px 14px; }
  .frage summary { padding: 18px 58px 18px 18px; font-size: 1rem; }
  .frage__txt { padding: 0 18px 18px; }
}

/* Admin-Kopf trägt die Website-Gestalt (Agenturregel 30.09.2026) */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--weiss); box-shadow: 0 8px 24px rgba(var(--schatten-farbe), .08); }
.site-header .logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: var(--text-stark); text-decoration: none; }
.site-header .logo span { color: var(--blau-tief); font-weight: 600; }