/*!
 * FLOW Physiotherapie Nürnberg - Website-Stylesheet
 * Konzept, Design und Umsetzung: FLOW Physiotherapie Nürnberg
 * (c) 2021-2026 FLOW Physiotherapie Nürnberg. Alle Rechte vorbehalten.
 */

/* Selbst gehostete Schriften (vormals Google-Fonts-CDN). Quelle: Google Fonts,
   Lizenz: SIL Open Font License. Lokal ausgeliefert, keine Verbindung zu Google. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens ============ */
:root {
  /* Markengruen bleibt unveraendert. Ergaenzt sind zwei abgeleitete Toene,
     weil #78BE20 mittelhell ist: weisse Schrift darauf erreicht nur 2.12:1
     (WCAG AA verlangt 4.5:1 fuer Fliesstext, 3:1 fuer grosse Schrift).
     - auf gruener Flaeche liegt jetzt --navy statt --white  -> 5.02:1
     - --teal-bright ersetzt --teal-dark als Hover auf gruenen Flaechen,
       weil --navy auf --teal-dark nur 3.28:1 erreicht                 -> 5.75:1
     - --teal-text ist die Textvariante fuer gruene Schrift auf hellem
       Grund, wo --teal (2.12:1) und --teal-dark (3.24:1) durchfallen  -> 5.18:1 */
  --teal: #78BE20;
  --teal-dark: #60981A;
  --teal-bright: #82CB26;
  --teal-text: #4A7314;
  --on-teal: #373a3b;
  --mint: #DEF5E7;
  --navy: #373a3b;
  --navy-2: #2c2e2f;
  --text: #373a3b;
  /* Am 21.08.2026 von #7a7d7e abgedunkelt: Der alte Ton erreichte auf den
     hellen Flaechen nur 3,84:1 (Karten) bzw. 3,48:1 (Abschnittshintergrund)
     und lag damit unter den 4,5:1, die fuer Fliesstext empfohlen sind.
     #686b6c ist der kleinste Schritt, der beide Faelle loest (4,97 / 4,51)
     und den Ton weiterhin klar vom Haupttext #373a3b abhebt. Speist
     --surface-text-muted und --on-page-text-muted in beiden Themes. */
  --text-light: #686b6c;
  --white: #f1f7fb;
  --border: #e3e8ea;
  --radius: 28px;
  --shadow: 0 20px 45px -20px rgba(24, 60, 70, 0.25);
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* theme-dependent (default = brand-dark) */
  --page-bg: var(--navy);
  --page-bg-2: var(--navy-2);
  --on-page-text: var(--white);
  --on-page-text-muted: #b9bec1;
  --surface: var(--white);
  --surface-text: var(--text);
  --surface-text-muted: var(--text-light);
  --surface-border: var(--border);
  /* Gruene Schrift direkt auf dem Seitengrund. Auf dunklem Grund traegt das
     helle Markengruen (5.02:1), auf hellem Grund muss die dunklere
     Textvariante einspringen - siehe Light-Theme unten. */
  --accent-on-page: var(--teal);
}

:root[data-theme="light"] {
  --page-bg: var(--white);
  --page-bg-2: #e6ecef;
  --on-page-text: var(--navy);
  --on-page-text-muted: var(--text-light);
  --surface: var(--white);
  --surface-text: var(--text);
  --surface-text-muted: var(--text-light);
  --surface-border: var(--border);
  --accent-on-page: var(--teal-text);
}

* { box-sizing: border-box; }

/* [hidden] verlaesslich machen: Das Browser-Standardstylesheet setzt dafuer
   nur `display: none` mit sehr niedriger Spezifitaet - jede eigene Regel mit
   Klassenselektor (z. B. `.service-card { display: block }`) gewinnt und das
   Element bleibt sichtbar. Genau das ist am 21.08.2026 passiert: Die drei
   nachladbaren Leistungskacheln standen trotz `hidden` von Anfang an im
   Raster. Betroffen waeren ebenso die Ausfallschutz-Karten auf kurse.html
   waehrend des Ladens. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--on-page-text);
  background: var(--page-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--on-page-text); margin: 0 0 .6em; line-height: 1.2; }
p { margin: 0 0 1em; color: var(--on-page-text-muted); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; position: relative; }
.center { text-align: center; }

.eyebrow {
  display: inline-block;
  color: var(--accent-on-page);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .75rem;
}
.eyebrow.center { display: block; }
.section-title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-lead { max-width: 620px; margin: 0 auto 2.5rem; color: var(--on-page-text-muted); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  /* Flacher als zuvor (.8em) und mit eigener Zeilenhoehe statt der 1.65 aus
     dem body - die trieb die Buttonhoehe auf rund 53px. Jetzt ~41px. Durch
     die geringere Hoehe wirkte der bisherige Radius von 18px fast schon
     vollrund, daher gleich konsequent auf Pillenform. */
  padding: .6em 1.6em;
  line-height: 1.25;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
  /* <button> erbt weder Schrift noch Hintergrund vom Dokument: Ohne diese
     zwei Zeilen steht ein .btn als Button in Arial auf dem grauen
     Systemhintergrund, waehrend derselbe .btn als <a> korrekt aussieht.
     Aufgefallen am 21.08.2026 am Knopf "Alle Leistungen ansehen".
     background-color statt der Kurzform, damit .btn-primary & Co. ihre
     eigene Flaeche weiterhin ohne !important setzen koennen. */
  font-family: inherit;
  background-color: transparent;
}
/* Fuer lange Beschriftungen: .btn haelt sonst mit white-space: nowrap alles
   in einer Zeile, und auf 320px ragte "Zu den ausfuehrlichen Beschreibungen"
   335px breit ueber den Rand hinaus. Hier darf der Text stattdessen
   umbrechen und die Pille zweizeilig werden. */
.btn-umbruch { white-space: normal; max-width: 100%; text-align: center; }

.btn-primary { background: var(--teal); color: var(--on-teal); box-shadow: 0 12px 24px -10px rgba(120,190,32,.5); }
.btn-primary:hover { background: var(--teal-bright); transform: translateY(-2px); }
.btn-outline { border-color: var(--navy); color: var(--surface-text); }
.btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-outline-light { border-color: rgba(241,247,251,.5); color: var(--on-page-text); }
.btn-outline-light:hover { background: rgba(241,247,251,.12); border-color: var(--on-page-text); transform: translateY(-2px); }

:root[data-theme="light"] .btn-outline-light { border-color: rgba(55,58,59,.35); }
:root[data-theme="light"] .btn-outline-light:hover { background: rgba(55,58,59,.08); }
.btn-lg { padding: .78em 2rem; font-size: 1rem; }

/* ============ Header ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled { background: rgba(55, 58, 59, .9); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -16px rgba(0,0,0,.4); border-color: rgba(241,247,251,.08); }

/* Im hellen Theme bleibt der Header auch beim Scrollen hell (Nutzerwunsch
   21.08.2026) - vorher bekam er dieselbe dunkle Flaeche wie im Dunkelmodus
   und kippte beim Scrollen sichtbar um. Damit gelten die dunklen Text- und
   Symbolfarben unten jetzt durchgehend, nicht mehr nur solange der Header
   transparent ist. */
:root[data-theme="light"] .site-header.scrolled {
  background: rgba(241, 247, 251, .92);
  box-shadow: 0 8px 24px -16px rgba(12, 30, 24, .28);
  border-color: rgba(55, 58, 59, .10);
}

:root[data-theme="light"] .site-header .logo,
:root[data-theme="light"] .site-header .main-nav a,
:root[data-theme="light"] .site-header .header-phone,
:root[data-theme="light"] .site-header .lang-switch,
:root[data-theme="light"] .site-header .theme-toggle { color: var(--navy); }
:root[data-theme="light"] .site-header .lang-switch { border-color: rgba(55,58,59,.25); background: rgba(55,58,59,.06); }
:root[data-theme="light"] .site-header .lang-switch:hover { background: rgba(55,58,59,.16); }
:root[data-theme="light"] .site-header .nav-toggle span { background: var(--navy); }
:root[data-theme="light"] .site-header .theme-toggle { border-color: rgba(55,58,59,.25); background: rgba(55,58,59,.06); }
:root[data-theme="light"] .site-header .theme-toggle:hover { background: rgba(55,58,59,.16); }
/* Der Header liegt im hellen Theme immer auf hellem Grund - erst transparent
   ueber dem Hero, dann auf der hellen Scroll-Flaeche. Das helle Markengruen
   erreicht dort nur 2.12:1, deshalb durchgehend die dunklere Textvariante
   fuer Logo-Zusatz und Aktionssymbole. */
:root[data-theme="light"] .site-header .logo-label span,
:root[data-theme="light"] .site-header .header-phone svg,
:root[data-theme="light"] .site-header .header-maps svg,
:root[data-theme="light"] .site-header .header-booking svg { color: var(--teal-text); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 1.2rem; }

/* .logo ist jetzt IMMER eine Zeile (Icon | Wortmarke) - auf allen
   Breakpoints, auch dort wo die Wortmarke selbst intern zweizeilig
   stapelt (siehe .logo-label unten). Das haelt das Wellen-Icon links
   neben dem Text statt es mit in den Stapel zu ziehen. */
.logo { display: flex; align-items: center; gap: .55rem; color: var(--white); }
/* Sauberer Vektor-Export (viewBox 0 0 2612.26 3169.95, Seitenverhaeltnis
   0.824), s. brand-assets/logo-mark/flow_logo_v_bright.svg.
   fill="currentColor" im Pfad uebernimmt automatisch die Logo-Farbe -
   dieselbe Regel, die schon Hell-/Dunkelmodus und den Scroll-Zustand des
   Headers fuer den Textteil steuert, gilt damit ohne weiteres Zutun
   auch fuers Icon. */
.logo-mark { height: 2rem; aspect-ratio: 2612.26 / 3169.95; flex-shrink: 0; display: block; }
.logo-label { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; display: flex; align-items: baseline; gap: .35rem; }
.logo-label span { font-family: var(--font-body); font-weight: 400; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }

.main-nav ul { display: flex; gap: 1.8rem; }
.main-nav a { font-weight: 500; color: var(--white); position: relative; padding: .3rem 0; white-space: nowrap; }
/* "Flow" ist immer der erste Menuepunkt (Link zur Startseite) - nur er wird
   in Versalien dargestellt, um ihn als Markennamen abzuheben. text-transform
   statt Grossbuchstaben im HTML, damit der zugrundeliegende Text "Flow"
   bleibt (Screenreader lesen ihn als Wort, nicht buchstabiert). */
.main-nav ul li:first-child a { text-transform: uppercase; letter-spacing: .03em; }
/* Unterstreichung ueber transform statt width: gleiche Optik, aber die
   Animation laeuft auf der Compositor-Ebene statt eine Layout-Berechnung
   je Frame auszuloesen. transform-origin links, damit sie wie zuvor von
   links nach rechts aufzieht. */
.main-nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
/* a.lang-switch-mobile statt .lang-switch-mobile: .lang-switch (Basisregel
   weiter unten, gleiche Spezifitaet 0,1,0) setzt display:flex und stand -
   rein durch spaetere Position im Stylesheet - bislang im Cascade-Gleichstand
   vorn, wodurch der mobile Sprachumschalter auch auf Desktop-Breite als
   eigene Zeile unter der Nav auftauchte (gemeldetes "zweizeiliges Menu" mit
   "grossem Button"). Element+Klasse (0,1,1) macht den Vorrang unabhaengig
   von der Reihenfolge im Stylesheet robust. */
.mobile-nav-cta, a.lang-switch-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.header-phone { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--white); white-space: nowrap; }
.header-phone svg { color: var(--teal); }
.header-maps { display: none; align-items: center; }
.header-maps svg { color: var(--teal); }
.header-booking { display: none; align-items: center; }
.header-booking svg { color: var(--teal); }

/* Sprachumschalter (seit 08.08.2026, siehe UEBERGABE.md): dieselbe
   Rand-/Hintergrundoptik wie .theme-toggle, nur als Pille statt Kreis, damit
   "DE"/"EN" reinpasst. Auf Mobile uebernimmt .lang-switch-mobile, siehe
   Regeln oben und im Breakpoint weiter unten - identisches Muster zu
   .mobile-nav-cta/.header-actions .btn-primary, damit nichts doppelt zu
   sehen ist. */
.lang-switch { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .7rem; border-radius: 999px; border: 1px solid rgba(241,247,251,.25); background: rgba(241,247,251,.06); color: var(--white); font-weight: 700; font-size: .82rem; letter-spacing: .02em; flex-shrink: 0; transition: background .2s ease; }
.lang-switch:hover { background: rgba(241,247,251,.16); }

.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(241,247,251,.25); background: rgba(241,247,251,.06); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease; }
.theme-toggle:hover { background: rgba(241,247,251,.16); }
/* Zweiter Theme-Toggle im Burger-Menue - per Default (Desktop) ausgeblendet,
   erscheint erst im <=1150px-Breakpoint, wo der im Header dafuer verschwindet
   (siehe dort). Spart Platz in der ohnehin schon engen mobilen Kopfzeile. */
.nav-theme-toggle { display: none; }
.icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Hero ============ */
.hero { position: relative; padding: 190px 0 120px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--page-bg) 0%, var(--page-bg) 40%, color-mix(in srgb, var(--page-bg) 0%, transparent) 85%),
    linear-gradient(to top, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 0%, transparent) 45%);
  transition: background .35s ease;
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.hero-glow-1 { top: -220px; right: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(120,190,32,.35), transparent 70%); }
.hero-glow-2 { bottom: -260px; left: -180px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(222,245,231,.12), transparent 70%); }
.hero-glow-3 { top: 20%; right: -220px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(120,190,32,.25), transparent 70%); }
.hero-inner { position: relative; z-index: 1; }
.hero-inner > * { max-width: 780px; }
.hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.hero-line1 { display: inline-block; max-width: 100%; white-space: nowrap; }
.typewriter { color: var(--accent-on-page); display: inline-block; white-space: nowrap; }
.tw-cursor { display: inline-block; margin-left: 2px; animation: blink 1s step-end infinite; font-weight: 300; }
@keyframes blink { 50% { opacity: 0; } }
.hero-lead { font-size: 1.08rem; max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* ============ Reveal ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============ Services ============ */
.services { background: var(--page-bg-2); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.service-card {
  display: block; background: var(--surface); border: none; border-radius: var(--radius); padding: 2rem 1.7rem; text-align: left;
  cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; box-shadow: var(--shadow); font-family: inherit;
}
.service-card:hover { transform: translateY(-6px); }
.service-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--mint); color: var(--teal-text); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.service-card h3 { color: var(--surface-text); font-size: 1.1rem; }
.service-card p { color: var(--surface-text-muted); font-size: .9rem; margin: 0; }

/* ============ About ============ */
.about { padding-bottom: 0; overflow: hidden; }
.about-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; position: relative; z-index: 1; padding-bottom: 96px; }
.value-list { display: grid; gap: 1.1rem; margin: 1.6rem 0 1.8rem; }
.value-list li { display: flex; gap: .9rem; align-items: flex-start; }
.value-list .check { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: var(--on-teal); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; margin-top: .1rem; }
.value-list strong { color: var(--on-page-text); font-family: var(--font-head); }
.value-list p { margin: .2rem 0 0; font-size: .9rem; }

/* Verlauf bewusst tiefer als das Markengruen: das Panel traegt weissen Text
   (Zitat 1.15rem/600 - nach WCAG kein "grosser" Text, also 4.5:1 noetig).
   Auf --teal erreicht Weiss nur 2.12:1, auf --teal-dark 3.24:1. Mit
   --teal-text/#3C5D10 sind es 5.18:1 bzw. 7.03:1. Anthrazitschrift kam hier
   nicht in Frage, weil ueber dem Verlauf ein Foto liegt und dunkle Schrift
   darauf unruhig wird. */
.about-panel { position: relative; background: linear-gradient(150deg, var(--teal-text), #3C5D10); border-radius: var(--radius); padding: 2.6rem; overflow: hidden; box-shadow: var(--shadow); }
.about-panel-bg { position: absolute; inset: 0; z-index: 0; }
.about-panel-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-panel-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(74,115,20,.86), rgba(60,93,16,.86)); }
.about-panel-glow { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: rgba(241,247,251,.18); border-radius: 50%; z-index: 1; }
.about-panel-icon { width: 70px; height: 70px; border-radius: 22px; background: rgba(241,247,251,.18); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; position: relative; z-index: 1; }
.about-panel-quote { color: var(--white); font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; position: relative; z-index: 1; margin: 0; }

.stats-strip { background: var(--page-bg-2); padding: 56px 0; border-top: 1px solid rgba(241,247,251,.08); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat-num { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--on-page-text); }
.stat-suffix { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--accent-on-page); }
.stat-item p { margin: .3rem 0 0; font-size: .85rem; }

/* ============ Process ============ */
.process { background: var(--page-bg); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.process-step { background: var(--surface); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); position: relative; }
.process-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: var(--on-teal);
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 800;
  margin-bottom: 1rem;
}
.process-step h3 { color: var(--surface-text); font-size: 1.05rem; }
.process-step p { color: var(--surface-text-muted); font-size: .88rem; margin: 0; }

/* ============ Courses ============ */
.courses { background: var(--page-bg-2); }
.filter-bar { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter-btn { background: rgba(241,247,251,.06); border: 1px solid rgba(241,247,251,.18); padding: .6em 1.3em; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--on-page-text-muted); cursor: pointer; transition: all .2s ease; }
.filter-btn.active, .filter-btn:hover { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }

/* Rueckmeldung nach der Rueckkehr von der Wix-Bezahlseite (Erfolg/Abbruch
   einer Kursbuchung), siehe zeigeBuchungsstatus() in wix.js. */
.buchung-status-banner {
  padding: .9em 1.2em; border-radius: 14px; font-weight: 600; font-size: .95rem;
  margin: 0 0 1.3rem;
}
.buchung-status-banner.ist-erfolg { background: var(--mint); color: var(--teal-text); }
.buchung-status-banner.ist-abbruch { background: rgba(229, 72, 77, .09); color: #e5484d; }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.course-card { background: var(--surface); border-radius: var(--radius); padding: 1.7rem; transition: transform .25s ease, box-shadow .25s ease; box-shadow: var(--shadow); }
.course-card:hover { transform: translateY(-4px); }
.course-tag { display: inline-block; background: var(--mint); color: var(--teal-text); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .3em .8em; border-radius: 999px; margin-bottom: .8rem; }
.course-card h3 { color: var(--surface-text); font-size: 1.1rem; }
.course-card p { color: var(--surface-text-muted); font-size: .9rem; margin: 0; }
.course-card.hide { display: none; }

/* Buchbare Kurskachel (aus dem Hub gerendert). Eigene Modifier-Klasse, weil
   die schlichte .course-card ohne Bild auch auf der Startseite und als
   Ausfallschutz in kurse.html steht - deren Innenabstand bleibt unberuehrt. */
.course-card-book { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.course-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(140deg, var(--mint), #cfe8dc);
  flex: none;
}
.course-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.course-card-book:hover .course-media img { transform: scale(1.045); }
/* Platzhalter, solange im Hub kein Bild hinterlegt ist - haelt das Raster
   ruhig, statt einzelne Kacheln ohne Bildflaeche stehen zu lassen. */
.course-media-mark {
  position: absolute; top: 50%; left: 50%; width: 34%; max-width: 92px;
  transform: translate(-50%, -50%); color: var(--teal); opacity: .22;
}
.course-body { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.course-body .course-tag { align-self: flex-start; margin-bottom: .2rem; }
.course-body h3 { margin: 0; }
/* Die Beschreibungen kommen aus dem Hub und reichen von einem Satz bis zu
   ueber 2000 Zeichen. Ohne Begrenzung zieht ein einziger langer Text seine
   ganze Rasterzeile auf ueber 1500px Hoehe. In der Uebersicht stehen daher
   zwei Zeilen; den vollen Text zeigt die Detailansicht. */
.course-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Beginn und freie Plaetze. Bewusst leiser als das Kategorie-Etikett, damit
   die Kachel eine Rangfolge behaelt: Etikett, Titel, dann Status. */
.course-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.course-chip {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  padding: .3em .75em; border-radius: 999px;
  background: rgba(55, 58, 59, .06); color: var(--surface-text-muted);
}
.course-chip.is-frei::before, .course-chip.is-voll::before, .course-chip.is-offen::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
/* Eigener Rotton fuer "ausgebucht" - das Markengruen ist hier belegt. */
.course-chip.is-voll { color: #a8342a; background: rgba(168, 52, 42, .09); }

/* ---- Ladeplatzhalter (Skeleton) ----
   Steht auf kurse.html im Raster, bis wix.js die echten Kurse eingesetzt hat.
   Der Wischer laeuft ueber background-position, nicht ueber Breite oder
   Position - so bleibt die Animation auf der GPU und loest kein Neu-Layout
   aus. */
.course-card.is-skeleton { cursor: default; pointer-events: none; }
.skeleton-block, .skeleton-line {
  display: block;
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    rgba(55, 58, 59, .07) 30%,
    rgba(55, 58, 59, .13) 50%,
    rgba(55, 58, 59, .07) 70%
  );
  background-size: 300% 100%;
  animation: skeleton-wisch 1.6s ease-in-out infinite;
}
/* Absolut statt height:100%: .course-media traegt aspect-ratio 16/10, und
   ein Kind mit prozentualer Hoehe macht daraus eine zirkulaere Berechnung -
   die Flaeche wurde dann fast quadratisch statt 16:10. */
.skeleton-block { position: absolute; inset: 0; border-radius: 0; }
.skeleton-line { height: .78rem; margin-bottom: .55rem; }
.skeleton-line.is-tag { width: 42%; height: .68rem; margin-bottom: .9rem; border-radius: 999px; }
.skeleton-line.is-titel { width: 82%; height: 1.05rem; margin-bottom: .8rem; }
.skeleton-line.is-kurz { width: 64%; margin-bottom: .2rem; }
.skeleton-line.is-chip { width: 6.5rem; height: 1.35rem; border-radius: 999px; margin-bottom: 0; }
.skeleton-line.is-preis { width: 4.5rem; height: 1.05rem; margin-bottom: 0; }
.skeleton-line.is-knopf { width: 7rem; height: 2.1rem; border-radius: 999px; margin-bottom: 0; margin-left: auto; }

@keyframes skeleton-wisch {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
/* Wer Bewegung reduziert haben moechte, sieht ruhige Flaechen - dass etwas
   laedt, sagt die Statuszeile ohnehin. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-block, .skeleton-line { animation: none; }
}

/* Nur fuer Screenreader: die Ladeansage neben den stummen Platzhaltern. */
.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;
}

.course-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .3em;
  background: none; border: 0; padding: 0;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  color: var(--teal-text); cursor: pointer;
}
.course-more svg { transition: transform .2s ease; }
.course-more:hover svg { transform: translateX(3px); }
.course-card-book { cursor: pointer; }

/* ---- Detailansicht ---- */
.course-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--surface-text);
  box-shadow: 0 40px 90px -35px rgba(12, 30, 24, .65);
  overflow: hidden;
}
.course-dialog::backdrop { background: rgba(20, 32, 28, .6); backdrop-filter: blur(3px); }
.course-dialog-inner { max-height: inherit; overflow-y: auto; }
.course-dialog-media { aspect-ratio: 21 / 9; }
.course-dialog-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(241, 247, 251, .92); color: var(--navy);
  box-shadow: 0 6px 16px -6px rgba(12, 30, 24, .5);
  transition: background .2s ease, transform .2s ease;
}
.course-dialog-close:hover { background: var(--white); transform: scale(1.06); }
.course-dialog-body { padding: 1.7rem 1.8rem 1.9rem; display: flex; flex-direction: column; gap: .6rem; }
.course-dialog-body .course-tag { align-self: flex-start; margin-bottom: 0; }
.course-dialog-body h2 { font-size: 1.4rem; margin: 0; color: var(--surface-text); }
/* Kurzfassung als Vorspann, etwas kraeftiger als der Fliesstext darunter. */
.course-dialog-lead {
  font-family: var(--font-head); font-weight: 500; font-size: 1.02rem; line-height: 1.5;
  color: var(--surface-text); margin: .4rem 0 0;
}
/* Zeilenumbrueche aus dem Hub-Text bleiben erhalten. */
.course-dialog-text { white-space: pre-line; color: var(--surface-text-muted); font-size: .95rem; margin: .3rem 0 0; }
.course-dialog-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--surface-border);
}
.course-dialog-foot .btn { margin-left: auto; }

/* Terminliste in der Detailansicht. Zwei Spalten (Datum | Uhrzeit), damit die
   Uhrzeiten untereinander stehen und die Liste auch bei zehn Zeilen ruhig
   wirkt. Auf schmalen Geraeten rutscht die Uhrzeit unter das Datum. */
.course-dates { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--surface-border); }
.course-dates h3 { color: var(--surface-text); font-size: 1.05rem; margin-bottom: .7rem; }
.course-dates ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.course-dates li {
  display: grid; grid-template-columns: minmax(0, 11.5rem) auto;
  gap: .2rem .8rem; align-items: baseline;
  padding: .38rem 0; font-size: .92rem;
  border-bottom: 1px solid var(--surface-border);
}
.course-dates li:last-child { border-bottom: 0; }
.course-date-tag { font-weight: 600; color: var(--surface-text); }
.course-date-time { color: var(--surface-text-muted); }
.course-dates-rest { margin: .7rem 0 0; font-size: .85rem; color: var(--surface-text-muted); }

/* Buchungsblock in der Detailansicht. Felder und Reihen nutzen die
   bestehenden .form-group/.form-row-Stile des Kontaktformulars. */
.course-book { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--surface-border); }
.course-book h3 { color: var(--surface-text); font-size: 1.05rem; margin-bottom: .9rem; }
.course-book .form-group { margin-bottom: .9rem; }
.course-book input.invalid { border-color: #e5484d; }
.course-book-hinweis { color: var(--surface-text-muted); font-size: .85rem; margin: .2rem 0 1rem; }
/* Freiwilliger Anmelde-Hinweis ueber dem Formular. Bewusst leise gehalten -
   er ist ein Angebot, keine Huerde vor der Buchung. */
.course-book-login { color: var(--surface-text-muted); font-size: .85rem; margin: -.3rem 0 1.1rem; line-height: 1.55; }
.course-book-login-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 700; color: var(--teal-text);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.course-book-login-link:disabled { opacity: .55; cursor: default; }
/* Kompakte Zusammenfassung statt dreier vorausgefuellter Felder, wenn jemand
   angemeldet bucht. Die Felder stecken darunter und klappen bei Bedarf auf. */
.course-book-ich {
  color: var(--surface-text); font-size: .92rem; line-height: 1.55;
  margin: 0 0 1rem; padding: .7rem .9rem;
  background: rgba(55, 58, 59, .05); border-radius: 12px;
}
.course-book-status { color: #e5484d; font-weight: 600; font-size: .88rem; margin: .8rem 0 0; min-height: 1em; }

@media (max-width: 560px) {
  .course-dialog { width: calc(100vw - 24px); border-radius: 22px; }
  .course-dialog-media { aspect-ratio: 16 / 10; }
  .course-dialog-body { padding: 1.4rem 1.4rem 1.6rem; }
  .course-dialog-body h2 { font-size: 1.2rem; }
  .course-dates li { grid-template-columns: 1fr; }
}
.course-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem 1rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--surface-border);
}
.course-price { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--surface-text); }
/* Textpreise wie "Preis und Termine auf Anfrage" sind laenger und duerfen
   nicht wie ein Betrag wirken. */
.course-price.is-text { font-family: var(--font-body); font-weight: 500; font-size: .85rem; color: var(--surface-text-muted); }
.btn-sm { padding: .45em 1.2em; font-size: .85rem; }
.course-foot .btn-sm { margin-left: auto; }

/* ============ Trust strip ============ */
.trust-strip { background: var(--page-bg); padding: 40px 0; border-top: 1px solid rgba(241,247,251,.08); border-bottom: 1px solid rgba(241,247,251,.08); }
.trust-marquee { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trust-track { display: flex; align-items: center; gap: 1.4rem; width: max-content; animation: trust-scroll 26s linear infinite; }
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-item { font-family: var(--font-head); font-weight: 700; color: var(--on-page-text-muted); font-size: .95rem; white-space: nowrap; }
.trust-divider { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
@keyframes trust-scroll {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}

/* ============ Advantages ============ */
.advantages { background: var(--page-bg); }
.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; }
.advantage-card { background: var(--surface); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; }
.advantage-card h3 { color: var(--surface-text); }
.advantage-card p { color: var(--surface-text-muted); font-size: .92rem; }
.advantage-card ul { display: grid; gap: .55rem; margin: 0 0 1.6rem; flex-grow: 1; }
.advantage-card li { color: var(--surface-text-muted); font-size: .88rem; padding-left: 1.4rem; position: relative; }
.advantage-card li::before { content: '✓'; position: absolute; left: 0; color: var(--teal-text); font-weight: 700; }
.advantage-highlight { background: var(--navy); border: 1px solid var(--teal); transform: scale(1.04); }
.advantage-highlight h3, .advantage-highlight p, .advantage-highlight li { color: var(--white); }
.advantage-highlight li { color: #cfebdd; }
.advantage-highlight li::before { color: var(--teal); }
/* .btn-outline ist fuer helle Kachel-Hintergruende ausgelegt (dunkler Rand,
   dunkler Text) - auf der dunklen .advantage-highlight-Kachel waeren Rand
   und Text sonst genau die Hintergrundfarbe. Betrifft "Individuelle
   Physiotherapie" und "Praeventions- & Trainingskurse", sobald sie zufaellig
   hervorgehoben werden ("Fuer Ihr Unternehmen" nutzt btn-primary, das auf
   jedem Hintergrund funktioniert). */
.advantage-highlight .btn-outline { border-color: rgba(241,247,251,.5); color: var(--white); }
.advantage-highlight .btn-outline:hover { background: rgba(241,247,251,.12); border-color: var(--white); }
.advantage-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--teal); color: var(--on-teal); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .4em 1.1em; border-radius: 999px; }

/* ============ Testimonials ============ */
.testimonials { background: var(--page-bg-2); }
/* padding rundum: .testi-card traegt --shadow (Blur 45px, Spread -20px,
   Offset-y 20px - reicht unten bis ~48px, oben ~5px, seitlich ~25px ueber
   den Kartenrand hinaus). Ohne dieses Padding schneidet overflow:hidden
   den Schatten glatt an der eckigen Box-Kante ab, obwohl die Karte selbst
   runde Ecken hat - das war als "Schatten/Ecken nicht schoen, links/rechts
   abgeschnitten" gemeldet. Seitliches Padding allein wuerde beim Sliden
   einen Streifen der Nachbarkarte durchblitzen lassen (die Karten liegen
   im Track ohne Zwischenraum aneinander) - deshalb zusaetzlich eine
   Masken-Ausblendung an den seitlichen Raendern, dasselbe Prinzip wie bei
   .trust-marquee weiter oben: Statt eines harten Schnitts verblasst der
   Rand weich, sowohl der Kartenschatten als auch ein eventuell
   durchscheinender Nachbar-Rand. */
/* Seit 21.08.2026 ein frei wischbares Karussell statt eines Sliders, der
   pro Klick genau eine Karte weiterschob ("wie Netflix-Kacheln",
   Nutzerwunsch): natives horizontales Scrollen mit Snap-Punkten. Das bringt
   auf dem Handy echte Wisch-Traegheit mit, funktioniert am Trackpad und mit
   Tastatur, und braucht dafuer kein eigenes Touch-Handling mehr.
   Die Randmaske bleibt - sie laesst die angeschnittene naechste Karte weich
   auslaufen, was den Kachel-Eindruck sogar verstaerkt. */
.testi-slider {
  max-width: 1180px; margin: 0 auto; padding: 10px 28px 48px;
  overflow-x: auto; overflow-y: hidden;
  /* proximity statt mandatory: Bei mandatory rastet der Browser nach jedem
     Layout-Shift zwingend auf den naechstgelegenen Punkt - lud die
     Webschrift nach, stand der Slider ploetzlich auf Karte 2, ohne dass
     jemand gewischt hatte (gemessen 341px direkt nach dem Laden). proximity
     rastet beim Wischen genauso sauber ein, laesst aber freies Scrollen zu
     und springt nicht von selbst. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* kein versehentliches Zurueckblaettern */
  scrollbar-width: none;          /* Firefox */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.testi-slider::-webkit-scrollbar { display: none; } /* Chrome, Safari */
@media (prefers-reduced-motion: reduce) {
  .testi-slider { scroll-behavior: auto; }
}
/* Flex-Standard "stretch" (kein align-items-Override mehr): Alle 10
   Rezensionskarten werden dadurch automatisch auf die Hoehe der laengsten
   Karte im Track gestreckt - einheitliche Kartenhoehe, und die Track-Hoehe
   ist dadurch konstant, egal welche Karte gerade sichtbar ist. Frueher gab
   es hier align-items:flex-start plus einer JS-Funktion (main.js), die die
   Track-Hoehe pro Slide auf die jeweils aktive Karte gesetzt hat - dadurch
   aenderte sich die Seitenhoehe bei jedem Kartenwechsel (auf Nutzerwunsch
   am 14.08.2026 entfernt, siehe main.js). */
/* Kein transform mehr - die Position bestimmt jetzt die Scrollposition des
   Sliders. Der Abstand kommt ueber gap statt ueber Kartenraender, damit die
   Snap-Punkte genau auf den Kartenkanten sitzen. */
.testi-track { display: flex; gap: 1.3rem; }
.testi-card {
  /* Auf breiten Schirmen stehen so rund drei Karten nebeneinander, die
     vierte schaut angeschnitten herein - genau der Kachel-Eindruck. Auf dem
     Handy fuellt eine Karte fast die Breite, die naechste lugt hervor und
     zeigt, dass es weitergeht. */
  /* Bezug ist die Bildschirmbreite, nicht der Flex-Container: 82% des
     Containers ergaben auf 375px nur 222px Karte (59% des Bildes) - zu
     schmal fuer eine Rezension. 78vw sind dort 292px, die naechste Karte
     lugt trotzdem sichtbar herein. */
  flex: 0 0 min(340px, 78vw);
  /* start statt center: Sonst kann die erste Karte nie ganz links stehen -
     beim Laden waere gleich Karte 3 die "aktive", und die Punkte zeigten
     eine Position an, die niemand angefahren hat. */
  scroll-snap-align: start;
  background: var(--surface); border-radius: var(--radius);
  padding: 2.4rem; text-align: center; box-shadow: var(--shadow);
}
.stars { color: #ffc94a; letter-spacing: .2em; font-size: 1.1rem; margin-bottom: 1rem; }
.testi-card p { color: var(--surface-text-muted); font-size: 1.02rem; }
/* Seit 22.08.2026 auf vier Zeilen begrenzt (Nutzerwunsch: die Kacheln waren
   "riesig", weil eine einzelne 734-Zeichen-Rezension per align-items:stretch
   (siehe Kommentar bei .testi-track) die Hoehe aller zehn Karten mitzog -
   auch die mit nur 153 Zeichen. Der Karten-Klick oeffnet die volle Rezension
   in .testi-dialog (main.js), das Verkuerzen selbst ist reiner CSS-Zuschnitt,
   am Text aendert sich nichts. */
.testi-text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.testi-more {
  display: inline-flex; align-items: center; gap: .3em;
  background: none; border: 0; padding: 0; margin-top: .7rem;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  color: var(--teal-text); cursor: pointer;
}
.testi-more:hover { text-decoration: underline; }
/* Karten mit sichtbarem "Mehr lesen" sind als Ganzes klickbar (main.js) -
   nur bei denen macht der Zeigercursor auf der gesamten Flaeche Sinn. Karten,
   deren Text ohnehin in vier Zeilen passt, bleiben unklickbar (kein
   .has-more, kein Cursor, kein Dialog mit nichts Neuem darin). */
.testi-card.has-more { cursor: pointer; }
.testi-author { font-family: var(--font-head); font-weight: 700; color: var(--surface-text); margin-top: 1rem; }
.testi-author span { color: var(--text-light); font-weight: 400; font-size: .85rem; }
/* Pflicht-Kennzeichnung unter dem Bewertungs-Slider (HWG/UWG). */
.testi-hinweis { font-size: .78rem; color: var(--on-page-text-muted); margin: 1.2rem auto 0; max-width: 560px; }

/* ---- Volle Rezension (Dialog) ---- */
.testi-dialog {
  width: min(560px, calc(100vw - 32px));
  border: none; border-radius: var(--radius); padding: 0;
  background: var(--surface); box-shadow: var(--shadow);
}
.testi-dialog::backdrop { background: rgba(20, 32, 28, .6); backdrop-filter: blur(3px); }
.testi-dialog-close {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--page-bg); color: var(--surface-text); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.testi-dialog-close:hover { background: var(--white); transform: scale(1.06); }
.testi-dialog-inner { padding: 2.4rem; text-align: center; }
.testi-dialog-inner p { color: var(--surface-text-muted); font-size: 1.02rem; white-space: pre-line; }
@media (max-width: 480px) {
  .testi-dialog-inner { padding: 2rem 1.4rem; }
}

.testi-controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; }
.testi-btn { display: flex; align-items: center; justify-content: center; line-height: 1; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(241,247,251,.25); background: none; color: var(--on-page-text); cursor: pointer; font-size: 1.1rem; padding: 0; transition: background .2s ease; }
.testi-btn:hover { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.testi-dots { display: flex; gap: .5rem; }
.testi-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(241,247,251,.3); cursor: pointer; border: none; padding: 0; }
.testi-dot.active { background: var(--teal); width: 22px; border-radius: 4px; transition: width .25s ease; }

:root[data-theme="light"] .testi-btn { border-color: rgba(55,58,59,.25); }
:root[data-theme="light"] .testi-dot { background: rgba(55,58,59,.3); }

/* ============ Contact ============ */
.contact { background: var(--page-bg); }
.contact-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; }
.contact-list { display: grid; gap: .9rem; margin-top: 1.5rem; }
.contact-list a { color: var(--accent-on-page); font-weight: 700; }
.contact-list li { color: var(--on-page-text-muted); }
/* Adresse als Routen-Link: Die Anschrift bleibt ruhig wie der uebrige
   Listentext, den Anstoss gibt das kleine "Route planen" dahinter. */
.contact-list a.contact-maps { color: inherit; font-weight: 500; text-decoration: none; }
.contact-list a.contact-maps:hover { color: var(--accent-on-page); }
.contact-maps-cta {
  display: inline-flex; align-items: center; gap: .3em;
  margin-left: .5em; white-space: nowrap;
  color: var(--accent-on-page); font-weight: 700; font-size: .88em;
}
.contact-maps-cta svg { flex: none; }
.contact-maps:hover .contact-maps-cta { text-decoration: underline; text-underline-offset: 3px; }

.contact-form { background: var(--surface); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { margin-bottom: 1.2rem; display: flex; flex-direction: column; }
.form-group label { font-weight: 700; font-size: .85rem; margin-bottom: .4rem; color: var(--surface-text); }
.form-group input, .form-group textarea, .form-group select {
  border: 1px solid var(--surface-border); border-radius: 14px; padding: .8em 1em; font-family: var(--font-body); font-size: .95rem; resize: vertical; transition: border-color .2s ease, box-shadow .2s ease; background: var(--white); color: var(--text);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--teal-text); box-shadow: 0 0 0 3px rgba(120,190,32,.18); }
.form-group.invalid input, .form-group.invalid textarea { border-color: #e5484d; }
.form-error { color: #e5484d; font-size: .78rem; min-height: 1.1em; margin-top: .3rem; }
.form-success { display: none; color: var(--teal-text); font-weight: 700; margin: 1rem 0 0; }
.form-success.show { display: block; }
/* Dieselbe Zeile traegt auch Fehlermeldungen (Versand fehlgeschlagen). */
.form-success.is-error { color: #e5484d; }
.char-counter { font-size: .76rem; color: var(--surface-text-muted); text-align: right; margin-top: .3rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--surface-text-muted); margin: .4rem 0 1.4rem; cursor: pointer; }
.checkbox-row input { margin-top: .2rem; accent-color: var(--teal-text); }
.checkbox-row a { color: var(--teal-text); font-weight: 700; }

/* ============ Footer ============ */
.site-footer { background: var(--navy-2); color: #c7ccce; padding-top: 64px; }
.footer-inner { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1fr; gap: 2.5rem; padding-bottom: 48px; border-bottom: 1px solid rgba(241,247,251,.1); }
.footer-brand p { color: #9aa0a2; margin-top: .8rem; max-width: 300px; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(241,247,251,.08); color: #c7ccce; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.footer-social a:hover { background: var(--teal); color: var(--on-teal); }
/* Das IFK-Logo traegt seine eigenen Farben (blaue Schrift, tuerkiser Kreis) und
   ist ein Verbandszeichen, darf also nicht umgefaerbt werden. Blau direkt auf
   dem dunklen Footer erreicht nur 1.9:1 - deshalb steht es auf einer hellen
   Flaeche, wie auf der bisherigen Seite auch (6.7:1). */
.footer-ifk { display: inline-block; margin-top: 1.4rem; background: var(--white); border-radius: 16px; padding: .75rem .95rem; line-height: 0; transition: transform .2s ease; }
.footer-ifk:hover { transform: translateY(-2px); }
.footer-ifk img { width: 96px; height: auto; display: block; }
.footer-col h4 { color: var(--white); font-size: .95rem; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { padding: 24px 0; text-align: center; font-size: .82rem; color: #8a8f91; }

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 25, 35, .6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 900;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal-box { background: var(--white); border-radius: var(--radius); padding: 2.4rem; max-width: 460px; width: 100%; position: relative; transform: translateY(16px); transition: transform .25s ease; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
.modal-backdrop.show .modal-box { transform: translateY(0); }
.modal-box h3 { color: var(--navy); }
.modal-box p { color: var(--text-light); }
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--text-light); cursor: pointer; }

/* ============ Back to top ============ */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal); color: var(--on-teal); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(120,190,32,.6); opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease; z-index: 400;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }

/* ============ Page hero (secondary pages) ============ */
.page-hero { padding: 168px 0 64px; text-align: center; overflow: hidden; }
.page-hero .section-lead { margin-left: auto; margin-right: auto; }
/* Der gruene Verlauf (hero-glow-1) bleibt auf den Unterseiten im Dunkelmodus
   bestehen (frueherer Wunsch: "auf Unterseiten soll der Verlauf bleiben"),
   verschwindet aber im Hellmodus - dort sass er als dunkelgruener Fleck auf
   hellem Grund und wirkte unpassend, genau wie zuvor schon auf der
   Startseite (dort ganz entfernt). .hero-glow-2 (dezenter mintfarbener
   Verlauf unten) ist davon nicht betroffen. */
:root[data-theme="light"] .page-hero .hero-glow-1 { display: none; }

/* ============ Team ============ */
.team-section { background: var(--page-bg-2); }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.team-card { background: var(--surface); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.team-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.team-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--teal); color: var(--on-teal);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; flex-shrink: 0;
}
/* Fotografierte Mitglieder: Kreis bleibt gleich groß, zeigt statt Initialen
   ein Foto (object-fit:cover schneidet automatisch passend zu, unabhängig
   vom Seitenverhältnis der Quelldatei). */
.team-avatar-photo { padding: 0; overflow: hidden; background: var(--mint); }
.team-avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card h3 { color: var(--surface-text); font-size: 1.1rem; margin: 0; }
.team-role { display: block; color: var(--teal-text); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.team-card p { color: var(--surface-text-muted); font-size: .92rem; margin: 0 0 .8rem; }
.team-card p:last-child { margin-bottom: 0; }

.references-section { background: var(--page-bg); }
.references-list { display: grid; gap: 1rem; margin-top: 1rem; }
.reference-item { background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow); color: var(--surface-text-muted); font-size: .92rem; }
.reference-item strong { display: block; color: var(--surface-text); font-family: var(--font-head); margin-bottom: .3rem; }

/* ============ Leistungen (detail page) ============ */
.service-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.service-detail-card { background: var(--surface); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); scroll-margin-top: 110px; }
.service-detail-card h2 { color: var(--surface-text); font-size: 1.25rem; }
.service-detail-card p { color: var(--surface-text-muted); font-size: .95rem; margin: 0; }

/* ============ Vorschau-Sperre ============
   Zeigt vorschau.js statt der Seite, solange nicht freigeschaltet ist. Der
   Body wird dabei komplett ersetzt, deshalb steht hier alles Noetige selbst
   drin und nichts haengt an Klassen der eigentlichen Seite. */
.vorschau-sperre { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--page-bg); }
.vorschau-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.6rem 2.2rem; max-width: 440px; width: 100%; text-align: center; }
.vorschau-mark { width: 44px; height: auto; color: var(--teal-text); margin-bottom: 1.2rem; }
.vorschau-box h1 { color: var(--surface-text); font-size: 1.4rem; margin: 0 0 .7rem; }
.vorschau-box p { color: var(--surface-text-muted); font-size: .92rem; margin: 0; }
.vorschau-box a { color: var(--teal-text); text-decoration: underline; }
.vorschau-form { display: flex; gap: .6rem; margin-top: 1.6rem; }
.vorschau-form input { flex: 1; min-width: 0; padding: .8em 1em; border: 1px solid var(--surface-border); border-radius: 999px; font-family: var(--font-body); font-size: .95rem; color: var(--surface-text); background: var(--white); }
.vorschau-form input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.vorschau-form .btn { flex-shrink: 0; }
.vorschau-fehler { color: #e5484d; font-weight: 600; font-size: .88rem; margin: .9rem 0 0; min-height: 1em; }
@media (max-width: 420px) {
  .vorschau-form { flex-direction: column; }
}

/* ============ Rechtliches (Impressum/Datenschutz) ============ */
.legal { background: var(--page-bg); }
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { color: var(--on-page-text); font-size: 1.3rem; margin: 2.4rem 0 .8rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { color: var(--on-page-text); font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
.legal-content p { color: var(--on-page-text-muted); font-size: .95rem; }
.legal-content ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1em; }
.legal-content li { color: var(--on-page-text-muted); font-size: .95rem; margin-bottom: .4em; }
.legal-content a:not(.btn) { color: var(--accent-on-page); text-decoration: underline; }
.legal-content strong { color: var(--on-page-text); }
/* Das Muster-Widerrufsformular (agb.html) enthaelt Unterstrich-Linien als
   Ausfuellfelder. Ohne diese Regel laufen sie auf schmalen Displays aus dem
   Textblock heraus, weil "____" ein einziges unteilbares Wort ist. */
.widerruf-formular { overflow-wrap: anywhere; }
.footer-legal { display: flex; justify-content: center; gap: 1.2rem; margin-top: .6rem; }
.footer-legal a:hover { color: var(--teal); }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .about-inner, .contact-inner { grid-template-columns: 1fr; }
  .service-grid, .process-grid, .advantage-grid, .course-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .advantage-highlight { transform: none; }
}
@media (max-width: 1150px) {
  /* Hoehe folgt jetzt dem Inhalt (Links + Button), statt immer den ganzen
     Bildschirm bis zum unteren Rand abzudunkeln - nur so viel wird ueberdeckt
     wie das Menue tatsaechlich braucht. max-height ist ein Sicherheitsnetz
     fuer sehr niedrige Viewports (z.B. Querformat auf dem Handy), dann
     scrollt der Inhalt statt ueber den Bildschirmrand hinauszuwachsen.
     top/left/right bleiben bewusst explizit (nicht ueber bottom abgeleitet):
     sobald der Header beim Scrollen seinen eigenen backdrop-filter bekommt,
     wuerde er sonst zum Containing Block fuer dieses position:fixed-Element
     werden und bottom:0 bezoege sich auf den 84px hohen Header statt auf den
     Viewport. Der :has()-Fix weiter unten verhindert das ohnehin schon fuers
     Blur-Rendering, aber explizite Werte hier machen die Groesse zusaetzlich
     unabhaengig davon. */
  .main-nav {
    position: fixed; top: 84px; left: 0; right: 0; bottom: auto;
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    display: flex; flex-direction: column; gap: .3rem;
    background: rgba(55, 58, 59, .74);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-top: 1px solid rgba(241,247,251,.12);
    border-bottom-left-radius: 24px; border-bottom-right-radius: 24px;
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);
    transform: translateX(100%); transition: transform .3s ease; padding: 2rem; overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: .3rem; font-size: 1.15rem; }
  .main-nav a {
    display: block; padding: .95rem 1.1rem; border-radius: 14px;
    transition: background .2s ease, color .2s ease;
  }
  /* The desktop underline-on-hover doesn't suit a full-width glass list -
     a chip-style highlight (below) replaces it here instead. */
  .main-nav a::after { display: none; }
  .main-nav a:hover, .main-nav a:active, .main-nav a.active {
    background: color-mix(in srgb, var(--teal) 18%, transparent);
    color: var(--teal);
  }
  .nav-toggle { display: flex; }

  /* Sitzt jetzt direkt unter dem letzten Menuepunkt statt am unteren
     Bildschirmrand festgepinnt (margin-top:auto entfernt) - der Abstand
     zum letzten Link kommt automatisch vom gap:.3rem auf .main-nav, ist
     also identisch zum Abstand zwischen den Links selbst. Keine eigene
     Optik mehr (kein Button/Highlight, kein Icon) - erbt bewusst exakt
     dieselbe .main-nav a-Regel wie Start/Leistungen/etc., damit es sich
     nicht mehr von den anderen Menuepunkten abhebt. */
  .mobile-nav-cta, a.lang-switch-mobile { display: block; font-size: 1.15rem; }
  /* .lang-switch bringt seine Desktop-Pillen-Optik mit (feste Hoehe,
     Mindestbreite, Rand, Hintergrund, Zentrierung per Flex) - im Menue
     soll der Sprachumschalter aber genauso aussehen wie .mobile-nav-cta:
     ein normaler Listeneintrag ohne eigene Form. Ohne diesen Reset blieb
     die feste height:40px stehen, waehrend die Textzeile durch die
     .main-nav a-Padding hoeher wurde als die Box - dadurch lief der Text
     oben aus der Pille heraus statt zentriert zu stehen, und die Zeile war
     nicht so hoch wie die uebrigen Menuepunkte. */
  a.lang-switch-mobile {
    height: auto; min-width: 0; padding: .95rem 1.1rem;
    border: none; background: none; font-weight: 500; letter-spacing: normal;
  }

  /* Utility-Toggle oben rechts im Panel, unabhaengig vom Flex-Gap der Links
     positioniert (das fixed-positionierte .main-nav ist selbst der
     Positionierungskontext fuer position:absolute-Kinder). */
  .nav-theme-toggle { position: absolute; top: 1.1rem; right: 1.1rem; }

  /* The slide-out panel always has a translucent dark glass background,
     regardless of theme or whether the header behind it has been scrolled -
     so its links (and the theme-toggle icon) must always stay light,
     overriding the light-theme header colours meant for the header bar
     itself. Ohne .scrolled-Ausnahme: seit 21.08.2026 setzt das helle Theme
     die dunklen Kopfzeilenfarben durchgehend, sonst stuenden die Menuelinks
     im gescrollten Zustand dunkel auf dunklem Glas. */
  :root[data-theme="light"] .site-header .main-nav a,
  :root[data-theme="light"] .site-header .nav-theme-toggle {
    color: var(--white); border-color: rgba(241,247,251,.25); background: rgba(241,247,251,.06);
  }
  :root[data-theme="light"] .site-header .nav-theme-toggle:hover { background: rgba(241,247,251,.16); }

  /* Kernursache des Unschaerfe-Bugs beim Scrollen bei geoeffnetem Menue:
     .site-header.scrolled bekommt selbst einen backdrop-filter und wird
     dadurch zum Containing Block fuer sein position:fixed-Kind .main-nav.
     Dessen EIGENER backdrop-filter samplet dann faelschlich nur noch den
     winzigen 84px hohen Header-Bereich statt des ganzen Bildschirms - das
     Menue wirkt "wieder scharf" und der Text darauf wird unlesbar. Fix:
     der Header verliert seinen backdrop-filter genau dann, wenn das Menue
     offen ist, wodurch .main-nav wieder ganz normal den Viewport als
     Containing Block bekommt. Der Header bleibt dabei durch background
     weiterhin dunkel/deckend, nur der Blur-Effekt pausiert kurz. */
  .site-header.scrolled:has(.main-nav.open) {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  /* Reduced header (mobile + tablet, wherever the burger nav is active):
     Wortmarke stapelt (FLOW / Physiotherapie), Icon bleibt links daneben -
     siehe Kommentar bei .logo weiter oben, warum das Stapeln jetzt an
     .logo-label haengt statt an .logo selbst. Theme toggle, phone, maps,
     booking + burger visible */
  .logo-label { flex-direction: column; align-items: flex-start; gap: 0; font-size: 1.35rem; line-height: 1.2; }
  .logo-label span { font-size: .72rem; }
  .logo-mark { height: 2.9rem; }
  /* Das Icon braucht Platz neben Logo, Aktionsicons und Burger - der
     bisherige 1.2rem-Abstand in .header-inner reichte auf schmalen
     Handys nicht mehr, der Burger-Button ragte ueber den rechten Rand
     hinaus (bei 375px 14px, bei 360px 10px). Statt das neue Icon zu
     verkleinern (wuerde nicht mehr zur Vorlage passen) oder eines der
     bestehenden Aktionsicons zu entfernen, wird nur der ohnehin schon
     reduzierte Header enger gestellt - deckt damit 352px+ sauber ab
     (gemessen: bei 360px 8px Reserve). Fuer die schmaleren Breiten
     darunter zieht der Theme-Toggle zusaetzlich ins Menue um, siehe
     die eigene @media-Regel weiter unten. */
  .header-inner { gap: .4rem; }
  .header-actions { gap: .4rem; margin-left: auto; }
  .logo { gap: .4rem; }
  .header-actions .btn-primary, .header-actions .lang-switch { display: none; }
  .header-phone span { display: none; }
  .header-maps { display: flex; }
  .header-booking { display: flex; }
  .header-phone svg, .header-maps svg, .header-booking svg { width: 25px; height: 25px; }

  /* Hero background image: on narrower screens the text column spans almost
     the full width, so the desktop gradient (opaque only up to 40%) left too
     much of the image showing through behind the text - keep it opaque/tinted
     across nearly the whole width via the gradient below. The source photo is
     a wide 4749x1695 panorama where all the actual content (patient, therapist,
     equipment) sits in roughly the right 17% of the frame; the rest is a plain
     white wall. object-fit:cover only ever shows a narrow ~19-40% wide slice of
     that width on these breakpoints, so object-position must be pushed all the
     way to the right edge - anything closer to center just crops into the
     empty wall and shows no recognisable photo content at all.

     Opacity was originally 72%/55%/30%, which hid the photo almost entirely
     (measured luminance std-dev ~6, essentially a flat block) in both themes -
     confirmed too strong in light theme (page-bg there is near-white, nearly
     identical to the surrounding page and the photo's own wall tones, so the
     whole box became indistinguishable from empty page) and, per explicit
     request, relaxed further in dark theme too even though white hero text on
     this light photo is a harder pairing: at 60%/40%/22%, measured against the
     actual h1/lead text positions, h1 contrast drops from 3.6 to 2.74 (below
     the 3:1 WCAG AA-large guideline) while photo visibility roughly triples
     (std-dev 5.9 -> 15.6). Traded deliberately in favour of showing some of
     the photo; same values happen to work for both themes so one rule covers
     both instead of a per-theme override. */
  .hero-bg img { object-position: 100% center; }
  .hero-bg::after {
    background:
      linear-gradient(100deg, var(--page-bg) 0%, var(--page-bg) 60%, color-mix(in srgb, var(--page-bg) 40%, transparent) 100%),
      linear-gradient(to top, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 22%, transparent) 55%);
  }
}
/* Auf Smartphone-Breiten zieht der Theme-Toggle ins Burger-Menue um; ab
   431px (Tablets, Querformat) bleibt er oben in der Kopfzeile.
   Grenze am 21.08.2026 auf Nutzerwunsch von 359px auf 430px angehoben:
   Rein rechnerisch passte die Kopfzeile ab 360px zwar (gemessenes Minimum
   352px), aber auf einem iPhone 15 (393px) stand sie sichtbar zu gedraengt.
   430px deckt alle aktuellen iPhones bis Pro Max ab. Der Umzugsort ist
   derselbe wie zuvor: .nav-theme-toggle oben rechts im Menuepanel. */
@media (max-width: 430px) {
  .header-actions .theme-toggle { display: none; }
  .nav-theme-toggle { display: flex; width: 34px; height: 34px; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }

  /* Die h1 braucht auf dem Handy eine Zeile mehr (rotierendes Wort steht
     separat), wodurch der zweite CTA-Button unter die Falz rutschte. Oben
     und unten etwas Luft rausnehmen und den Fliesstext eine Spur kompakter
     setzen holt den Button wieder in den sichtbaren Bereich. */
  .hero { padding-top: 112px; padding-bottom: 84px; }
  .hero-lead { font-size: 1rem; line-height: 1.55; }
  .hero-cta { margin-top: 1.15rem; }

  /* Auf dem Handy passt "Ganzheitliche <Wort>" nicht nebeneinander - das JS
     musste die ganze h1 bis auf ~55% herunterskalieren, wodurch die Über-
     schrift deutlich kleiner wirkte als der Rest der Seite. Stattdessen
     bekommt das rotierende Wort eine eigene Zeile, dann muss nur noch das
     Wort selbst passen und die Schriftgröße bleibt nahe am Basiswert. */
  .hero-line1 { white-space: normal; }
  .hero-word-static { display: block; }
  /* Etwas kleiner als frueher (war 8.4vw): Auf 393px-Geraeten (iPhone 15)
     blieben beim laengsten rotierenden Wort "Krankengymnastik" nur 4px
     Puffer zum Container-Padding - zu wenig, der Text stand faktisch am
     Rand. Mit 7.4vw sind es rund 40px. */
  .hero h1 { font-size: clamp(1.8rem, 7.4vw, 2.6rem); }
  .service-grid, .process-grid, .advantage-grid, .course-grid, .team-grid, .service-detail-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============ Cookie-Einwilligung ============ */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem;
  padding: 1.1rem 1.6rem;
  background: var(--surface); color: var(--surface-text);
  box-shadow: 0 -16px 40px -20px rgba(0, 0, 0, .35);
  border-top: 1px solid var(--border);
}
.consent-banner p { margin: 0; color: var(--surface-text-muted); font-size: .88rem; max-width: 62ch; flex: 1 1 320px; }
.consent-banner p a { color: var(--teal-text); font-weight: 700; }
.consent-banner-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
/* "Nur notwendige" und "Alle akzeptieren" gleich gross und gleich betont -
   keine der beiden Entscheidungen ist optisch abgewertet. */
.consent-banner-knoepfe .btn { padding: .55em 1.3em; font-size: .88rem; }
.consent-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-weight: 700; font-size: .85rem; color: var(--surface-text); text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--surface-text);
  box-shadow: 0 40px 90px -35px rgba(12, 30, 24, .65);
  overflow: hidden;
}
.consent-dialog::backdrop { background: rgba(20, 32, 28, .6); backdrop-filter: blur(3px); }
.consent-dialog-inner { max-height: inherit; overflow-y: auto; padding: 1.9rem 2rem 2.1rem; }
.consent-dialog-inner h2 { font-size: 1.3rem; margin: 0 0 .5rem; color: var(--surface-text); }
.consent-dialog-inner > p { color: var(--surface-text-muted); font-size: .92rem; margin: 0 0 1.3rem; }
.consent-dialog-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(241, 247, 251, .92); color: var(--navy);
  box-shadow: 0 6px 16px -6px rgba(12, 30, 24, .5);
  transition: background .2s ease, transform .2s ease;
}
.consent-dialog-close:hover { background: var(--white); transform: scale(1.06); }

.consent-liste { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.5rem; }
.consent-zeile {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--surface-border);
  cursor: pointer;
}
.consent-zeile.is-fest { cursor: default; opacity: .85; }
.consent-zeile-text { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.consent-zeile-text strong { color: var(--surface-text); font-size: .95rem; }
.consent-zeile-text span { color: var(--surface-text-muted); font-size: .84rem; }
.consent-zeile input { margin-top: .2rem; width: 20px; height: 20px; accent-color: var(--teal-text); flex: none; }

.consent-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; }

@media (max-width: 640px) {
  .consent-banner { padding: 1rem 1.1rem; }
  .consent-banner-knoepfe { width: 100%; justify-content: flex-start; }
  .consent-banner-knoepfe .btn { flex: 1 1 auto; }
  .consent-dialog { width: calc(100vw - 24px); border-radius: 22px; }
  .consent-dialog-inner { padding: 1.5rem 1.4rem 1.7rem; }
}