/* =========================================================================
   360° Therapie Kesselsdorf — Markenschicht über dem Template-Stylesheet.

   ZWEI SCHICHTEN, ZWEI REGELN — seit dem 18.09.2026:

   (1) FARBE, SCHRIFT, INHALT sind weiter GEMESSEN, nicht geschätzt.
       Quelle: 01_QUELLE/messwerte/*.json (Chromium, 1440 px und 390 px),
       zusammengefasst in 01_QUELLE/stil-inventar.md. Zusammenlegungen sind
       in 01_QUELLE/entscheidungen.md Teil A einzeln begründet.

   (2) FORM, TIEFE UND RHYTHMUS folgen der Vorlage NICHT mehr.
       Julian am 18.09.2026: das Design sei „an manchen Stellen sehr
       langweilig, stumpf, starr und nicht modern". Damit ist die
       Vorlagentreue für Radius, Schatten, Abstandsrhythmus, Raster und
       Bildbänder AUFGEHOBEN. Jede solche Abweichung steht in
       01_QUELLE/entscheidungen.md **Teil G** mit Vorher/Nachher-Wert und
       ist hier am Kommentar „G-n" erkennbar.
       Wer das nicht weiß, baut die Gestaltungsrunde zurück.

   Reihenfolge: style.css (Template) zuerst, danach diese Datei.
   Der :root-Block unten ist die EINZIGE Stelle mit Farbwerten.
   ========================================================================= */

@import url('../fonts/_fontface.css');

/* ---------- Design-Tokens (gemessen) ---------- */
:root {
  /* Farben */
  --color-primary:      #009FE3;   /* Aktion — Flächen, Rahmen, Logo */
  /* Dasselbe Blau als TEXT erreicht auf Weiß nur 2,97:1 und auf #F7F8F9
     2,79:1 — WCAG AA verlangt 4,5:1 (gemessen 18.09.2026: 727 Textstellen
     auf 49 Seiten). #0079AD ist derselbe Farbton, nur dunkler: 4,84:1 bzw.
     4,55:1. Flächen und Knöpfe behalten bewusst #009FE3 — Julians
     Entscheidung vom 18.09.2026, damit der Farbeindruck der Marke bleibt.
     Weiße Schrift auf blauer Fläche bleibt damit bei 2,97:1: offen als Ü-29. */
  --color-primary-text: #0079AD;   /* Markenblau für Text und Links */
  --color-primary-dark: #007FB8;   /* abgeleitet für :hover, kein neuer Markenton */
  /* G-37: die blaue Fläche IMMER DANN, wenn WEISSE Schrift darauf liegt —
     Knopf, Monogramm im Team, Zahl am FAQ-Thema, Kurs-Etikett, Sprungmarke,
     angetippter Kurs-Chip. Wo kein weißer Text draufliegt (Logo, Rahmen,
     Aufzählungspunkte, Fortschrittspunkte), bleibt #009FE3. Das ist die
     Trennlinie von Julians Entscheidung: nicht „Knöpfe gegen Rest", sondern
     „mit weißer Schrift gegen ohne". */
  --color-knopf:        #007DB2;   /* blaue Fläche MIT weißer Schrift — siehe G-37 */
  --color-knopf-dark:   #00668F;   /* dessen :hover, aus --color-knopf abgeleitet */
  --color-accent:       #545454;   /* Überschriften, Kopf, Sekundär-Knopf */
  --color-accent-dark:  #3D3D3D;
  --color-highlight:    #FFCC00;   /* Hervorhebung IN Überschriften, auf DUNKLEM Grund */
  /* G-36 / Ü-12 erledigt (Julians Entscheidung 18.09.2026, abends).
     #FFCC00 auf Weiß erreicht 1,49:1 — WCAG AA verlangt für diese
     Schriftgröße 3:1. Betroffen waren fünf Überschriften-Wörter auf vier
     Seiten („360°", „Vier", „Fragen", „uns"), gemessen an den echten
     Pixeln mit 03_DEPLOY/pruefe-text-auf-bild.mjs.

     Ein dunkleres Gelb schied aus: Gelb wird beim Abdunkeln zu Ocker und
     verliert damit genau das, wofür es steht. Stattdessen richtet sich die
     Hervorhebung nach dem Grund, auf dem sie steht — auf hellem Grund
     nimmt sie das Markenblau (dasselbe #0079AD wie jeder andere Text,
     4,84:1), auf dunklen Bändern bleibt sie gelb und erreicht dort 8,9:1.

     Die Marke verliert dabei nichts: Auf den Bildbändern, wo das Gelb am
     stärksten wirkt, bleibt es unverändert. Auf Weiß war es ohnehin kaum
     lesbar — dort war es nie ein Markenzeichen, sondern ein blasser Fleck. */
  --color-highlight-hell: #0079AD;   /* Hervorhebung auf HELLEM Grund */
  --color-text:         #60656F;   /* Body */
  --color-muted:        #666666;   /* kleiner Fließtext in Karten */
  --color-heading:      #545454;
  --color-card-title:   #404040;
  /* 18.09.2026 von #888888 auf #6F6F6F: #888 ergibt auf Weiß 3,54:1 und auf
     der hellen Fläche #F7F8F9 nur 3,33:1 — beides unter den 4,5:1, die
     WCAG AA für Text dieser Größe verlangt (172 Textstellen auf 45
     Seiten, gemessen). #6F6F6F liegt bei 5,02:1 bzw. 4,70:1 und bleibt
     ein zurückhaltendes Grau. Keine Markenfarbe — reiner Metaton. */
  --color-meta:         #6F6F6F;
  --color-bg:           #ffffff;
  --color-surface:      #F7F8F9;
  --color-surface-2:    #E6E9EA;   /* Testimonial-Fläche */
  --color-border:       #F0F0F0;   /* Leistungskarte */
  --color-border-2:     #F5F5F5;   /* Prozesskarte */
  --color-footer:       #60656F;
  --color-white:        #ffffff;
  --color-social:       #69727D;   /* Fuss-Icons, gemessen */
  --color-primary-soft: #B9E4F7;   /* nur :hover-Andeutung, aus --color-primary aufgehellt */
  --color-input-border: #DDE1E4;
  --color-scrollthumb:  #D5D8DC;
  --color-faq:          #0E3B43;   /* Fragefarbe im Akkordeon, gemessen */
  --color-schwarz:      #000000;   /* Fliesstext im Karriere-Arbeitsplatz, gemessen */

  /* Sektions-Overlays.
     --ov-hero ist weiter der gemessene Wert der Vorlage und in Gebrauch.
     Die drei anderen sind es NICHT mehr: die Bänder tragen seit dem
     18.09.2026 Verläufe statt Flächen (G-20). Die Werte bleiben als Beleg
     dessen stehen, was die Vorlage hatte — wer vergleicht, findet sie
     hier. Sie werden von keiner Regel mehr gelesen. */
  --ov-hero:     linear-gradient(112deg, #ffffff 0%, rgba(242, 41, 91, 0) 100%);
  --ov-stimmen:  #545454;   /* Vorlagenwert, seit G-20 ungenutzt */
  --ov-karriere: #60656F;   /* Vorlagenwert, seit G-20 ungenutzt */
  --ov-faq:      linear-gradient(rgba(255, 255, 255, 0) 0%, #545454 100%);  /* dito */

  /* Schrift */
  --font-body: 'Exo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Maße */
  --container: 1140px;            /* gemessen: x150 … x1290 bei 1440 px */
  --container-narrow: 820px;
  --radius:    12px;              /* Karten */
  --radius-lg: 16px;              /* große Flächen */
  --radius-xl: 20px;              /* Testimonial, Karriere-Kachel */

  /* G-1  Eine Formensprache für ALLES, was man anfassen kann.
     Vorher: Karten 12–20 px rund, Knöpfe und Eingabefelder Radius 0. In
     derselben Bildschirmansicht standen weiche Karten neben scharfkantigen
     Knöpfen — das ist der stärkste einzelne Grund, warum die Seite „starr"
     wirkt. 10 px ist die ruhige Mitte: deutlich weicher als 0, aber weit
     entfernt von der Pillenform, die für eine Therapiepraxis zu verspielt
     wäre. Der Wert gilt ab jetzt für Knopf, Eingabefeld und Auswahlfeld. */
  --radius-knopf: 10px;

  /* G-2  Tiefe im RUHEZUSTAND, nicht erst beim Zeigen.
     Vorher trugen die Karten nur einen 1-px-Rahmen in #F0F0F0 und bekamen
     ihren Schatten erst bei :hover. Auf dem Handy gibt es kein :hover —
     dort blieb jede Karte bis zuletzt flach. Die zwei Ebenen (enger harter
     Saum + weiter weicher Schein) sind derselbe Trick, den jede aktuelle
     Oberfläche benutzt: der Saum trennt die Karte vom Grund, der Schein
     hebt sie an. Beide in der Grau-Note der Marke (#545454), nicht in
     Schwarz — Schwarz wirkt auf Weiß schmutzig. */
  --shadow:     0 10px 30px rgba(84, 84, 84, .08);
  --shadow-lg:  0 18px 50px rgba(84, 84, 84, .14);
  --schatten-ruhe:  0 1px 2px rgba(84, 84, 84, .06), 0 8px 24px rgba(84, 84, 84, .07);
  --schatten-hebt:  0 2px 4px rgba(84, 84, 84, .08), 0 18px 44px rgba(84, 84, 84, .16);
  /* Der farbige Schein unter dem Hauptknopf: nimmt das Markenblau auf,
     statt es grau zu untermalen. Nur bei :hover/:focus-visible. */
  --schatten-knopf: 0 8px 22px rgba(0, 159, 227, .34);

  /* G-3  Abstands-RHYTHMUS statt Gleichtakt.
     Vorher hatte JEDE Sektion padding-block: 96px. Gleiche Abstände über
     zehn Abschnitte hinweg lesen sich wie ein Formular: Es gibt kein
     Atmen, keine Gruppierung, nichts, was zusammengehört. Drei Stufen
     genügen, um Gruppen zu bilden — groß für eigenständige Kapitel,
     mittel für den Normalfall, eng für Abschnitte, die zum Vorherigen
     gehören. clamp() koppelt den Wert an die Fensterbreite: am Telefon
     wird aus 96 px nicht ein starres 56, sondern ein mitwachsendes Maß. */
  --raum-gross:  clamp(72px, 9vw, 128px);
  --raum:        clamp(56px, 7vw, 96px);
  --raum-eng:    clamp(40px, 5vw, 64px);

  /* G-4  Eine einzige Bewegungskurve für die ganze Seite.
     Vorher: neun verschiedene `transition`-Angaben mit .1s/.15s/.18s/.2s/
     .25s/.35s/.5s, alle `ease`. Das ist kein Rhythmus, das ist Zufall.
     Zwei Tempi reichen: kurz für alles unter dem Finger, ruhig für alles,
     was Fläche bewegt. Die Kurve steigt schnell an und läuft weich aus —
     dadurch wirkt die Seite wach, nicht träge. */
  --kurve: cubic-bezier(.2, .7, .3, 1);
  --tempo-kurz: .18s;
  --tempo-ruhig: .32s;
}

/* ---------- Grundwerte (gemessen: body 19/31.35 px, #60656F) ---------- */
body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 31.35px;
  color: var(--color-text);
  background: var(--color-bg);
}
@media (max-width: 700px) {
  body { font-size: 18px; line-height: 29.7px; }   /* gemessen bei 390 px */
}

h1, h2, h3, h4 { color: var(--color-heading); font-family: var(--font-body); }
p { color: inherit; }
a { color: var(--color-primary-text); }

.container { max-width: var(--container); padding-inline: 20px; }
@media (min-width: 900px) { .container { padding-inline: 0; } }

/* Das hidden-Attribut muss staerker sein als jede eigene display-Regel.
   Der Browser setzt `[hidden] { display: none }` nur in seiner Grundvorlage;
   jede Klasse mit eigenem `display` schlaegt das. Genau daran scheiterte der
   Bewerbungs-Funnel: die Knoepfe tragen `.btn { display: inline-flex }`,
   also blieben „Zurueck" auf Schritt 1 und „Bewerbung absenden" auf JEDEM
   Schritt sichtbar — eine unfertige Bewerbung war jederzeit absendbar. Die
   Einzelfall-Pflaster (`.kurswahl__eintrag[hidden]`, `.consent[hidden]`)
   zeigen, dass die Falle schon mehrfach zugeschnappt ist; hier einmal
   grundsaetzlich. */
[hidden] { display: none !important; }

/* Hervorhebung in Überschriften — im Original ein <span> in Gelb.
   G-36: auf hellem Grund blau, auf dunklem Grund gelb. Der Normalfall ist
   hell (Weiß ist der Seitenhintergrund); die Ausnahmen sind die
   Bildbänder, der Fuß und alles, was `--light` trägt. Die Ausnahme steht
   deshalb unten und nicht der Normalfall. */
.hl { color: var(--color-highlight-hell); }

/* Auf dunklem Grund bleibt die Hervorhebung gelb. Die Wähler decken jede
   Stelle ab, an der die Seite auf dunkel umschaltet:
   · --light   an Überschrift und Kicker (Bildbänder, Karriere-Kachel)
   · .site-footer, .sektion--bild ohne hellen Kasten darin */
.h-sektion--light .hl,
.h-kurs--light .hl,
.kicker--light .hl,
.site-footer .hl,
.stimmen-kopf--dunkel .hl { color: var(--color-highlight); }

/* Kicker/Eyebrow über Überschriften.
   Bug B-7 der Vorlage: sie rendert das mobil mit 34 px. Hier korrigiert.

   G-8  19 px w400 → 14 px w700 mit 1,6 px Sperrung.
   Der Kicker der Vorlage war exakt so groß wie der Fließtext (19 px) und
   genauso schwer (w400). Er sah damit nicht aus wie ein Vorspann, sondern
   wie ein verirrter erster Satz — auf der Startseite achtmal. Ein Kicker
   funktioniert über das Gegenteil: klein, schwer, gesperrt. Das schafft
   die Stufe zur Überschrift, die vorher fehlte, und gibt der Überschrift
   ihre Wucht zurück, ohne dass sie größer werden muss. */
.kicker {
  display: block; margin: 0 0 14px;
  font-size: 14px; font-weight: 700; line-height: 20px;
  letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--color-accent);
}
.kicker--light { color: var(--color-white); }
@media (max-width: 700px) { .kicker { font-size: 13px; line-height: 18px; letter-spacing: 1.4px; } }

/* Überschriften — gemessene Werte, nicht die Template-clamp()-Skala */
.h-hero {
  margin: 0; font-size: 45px; font-weight: 900; line-height: 63px;
  text-transform: uppercase; color: var(--color-accent);
}
.h-sektion { margin: 0; font-size: 36px; font-weight: 900; line-height: 46.8px; color: var(--color-accent); }
.h-kurs    { margin: 0; font-size: 48px; font-weight: 900; line-height: 55.2px; text-transform: uppercase; letter-spacing: -.5px; color: var(--color-accent); }
.h-sektion--light, .h-kurs--light { color: var(--color-white); }
@media (max-width: 700px) {
  .h-hero    { font-size: 36px; line-height: 50.4px; }
  .h-sektion { font-size: 32px; line-height: 41.6px; }
  .h-kurs    { font-size: 32px; line-height: 41.6px; }
}

.lead-360 { font-size: 19px; line-height: 31.35px; color: var(--color-text); margin: 16px 0 0; }
.lead-360--light { color: var(--color-white); }
@media (max-width: 700px) { .lead-360 { font-size: 18px; line-height: 29.7px; } }

/* ---------- Knöpfe ----------
   Schrift, Höhe und Farbe sind weiter gemessen (52 px, 16px w700 UPPERCASE,
   ls .5). Form und Verhalten nicht mehr — siehe G-5 und G-6. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 16px 35px; border: 0;
  /* G-5  Radius 0 → 10 px. Siehe G-1: der scharfkantige Knopf neben der
     runden Karte war der auffälligste Stilbruch der Seite. */
  border-radius: var(--radius-knopf);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 20px;
  text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
  cursor: pointer;
  /* G-6  Der Knopf reagiert, statt nur die Farbe zu wechseln.
     Vorher: `background-color .2s` und ein `transform`, das nirgends
     gesetzt wurde — der Knopf hob sich also nie. Jetzt hebt er sich um
     2 px und bekommt einen Schein in seiner eigenen Farbe; beim Drücken
     sinkt er wieder ein. Das ist die Rückmeldung, die ein Mensch von
     einem Knopf erwartet und deren Fehlen die Seite tot wirken lässt. */
  transition: background-color var(--tempo-kurz) var(--kurve),
              box-shadow var(--tempo-kurz) var(--kurve),
              transform var(--tempo-kurz) var(--kurve);
}
.btn:active { transform: translateY(1px); }
/* Ein Fokusring, der auf JEDEM Grund sichtbar bleibt: der weiße Saum
   trennt den blauen Ring vom Knopf, falls der Knopf selbst blau ist.
   Vorher erbte der Knopf nur den Umriss des Browsers, der auf dunklen
   Bändern praktisch unsichtbar war. */
.btn:focus-visible {
  outline: 3px solid var(--color-primary-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-white);
}
/* G-37 / Ü-29 erledigt (Julians Entscheidung 18.09.2026, abends).
   Weiß auf #009FE3 erreicht 2,97:1; für Knopfschrift dieser Größe
   verlangt WCAG AA 4,5:1. Betroffen war jeder „Termin vereinbaren"-Knopf
   auf allen 50 Seiten — also die wichtigste Handlung der ganzen Website.

   #007DB2 ist derselbe Farbton, nur dunkler, und erreicht 4,54:1. Die
   Entscheidung gilt AUSSCHLIESSLICH für die Knopffläche: Logo, Rahmen,
   Chips, Zahlen im Fuß und jede andere Fläche behalten #009FE3, damit der
   Farbeindruck der Marke bleibt. Auf einer Knopffläche ist der Unterschied
   zwischen beiden Tönen kaum auszumachen. */
.btn--primary { background: var(--color-knopf); color: var(--color-white); }
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-knopf-dark); color: var(--color-white); text-decoration: none;
  box-shadow: var(--schatten-knopf); transform: translateY(-2px);
}
.btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--color-white), var(--schatten-knopf); }
.btn--dark { background: var(--color-accent); color: var(--color-white); padding: 16px 45px; }   /* gemessen: 16/45 */
.btn--dark:hover, .btn--dark:focus-visible {
  background: var(--color-accent-dark); color: var(--color-white); text-decoration: none;
  box-shadow: 0 8px 22px rgba(84, 84, 84, .28); transform: translateY(-2px);
}
.btn--ghost { background: transparent; color: var(--color-white); border: 2px solid var(--color-white); }
.btn--ghost:hover { background: var(--color-white); color: var(--color-accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}
/* G-7  Knopfreihe: 16 px Lücke war für zwei gleich schwere Knöpfe zu eng
   und liess sie wie ein zerschnittener Balken aussehen; am Telefon
   stapelten sie mit 16 px Luft und wirkten verloren. 14/18 px trennt die
   beiden sauber, ohne sie auseinanderzureissen. */
.btn-reihe { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; }
.btn-reihe--zentriert { justify-content: center; }
/* Am Telefon laufen die Knöpfe über die volle Breite. Vorher standen sie
   linksbündig in wechselnder Breite („TERMIN VEREINBAREN" 265 px gegen
   „ZU DEN KURSEN" 205 px) — eine Treppe, kein Paar. */
@media (max-width: 560px) {
  .btn-reihe { flex-direction: column; align-items: stretch; }
  .btn-reihe .btn { width: 100%; }
}

/* Textlink „Mehr dazu" — 15px w700 #009FE3, lh 24.8 */
.mehr {
  display: inline-block; font-size: 15px; font-weight: 700; line-height: 24.8px;
  color: var(--color-primary-text); text-decoration: none;
}
.mehr::after { content: ' \2192'; }
.mehr:hover { text-decoration: underline; }

/* ---------- Kopf (gemessen: 110 px, #545454) ---------- */
/* G-25  Der Kopf trennt sich vom Inhalt.
   Er steht `sticky` über der Seite und lief bisher ohne jede Kante über
   die Bildbänder — dort, wo das Band selbst grau ist, verschwamm die
   Grenze zwischen Kopf und Seite. Ein sehr flacher Schatten genügt; er
   fällt auf weißem Grund kaum auf und trennt über den Bändern sauber. */
.site-header {
  background: var(--color-accent); border: 0; position: sticky; top: 0; z-index: 900;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .10), 0 6px 20px rgba(0, 0, 0, .08);
}
.header-inner { min-height: 110px; gap: 24px; }
.logo-360 { display: flex; align-items: center; margin-right: auto; }
.logo-360 img { width: 197px; height: auto; }
@media (max-width: 900px) { .logo-360 img { width: 150px; } }

.site-nav ul { gap: 28px; }
.site-nav a {
  font-size: 19px; font-weight: 400; line-height: 20px; color: var(--color-white); text-decoration: none;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--color-highlight); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--color-highlight); }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { background: var(--color-white); }

/* ---------- Sektionen ----------
   G-9  Feste 96 px → mitwachsender Rhythmus in drei Stufen (siehe G-3).
   `--raum` deckt den Normalfall ab und liefert bei 1440 px dieselben 96 px
   wie vorher; am Telefon läuft es auf 56 px hinaus — auch das wie vorher.
   Neu sind die beiden anderen Stufen: `--sektion--gross` für Kapitel, die
   für sich stehen, `--sektion--eng` für Abschnitte, die zum Vorherigen
   gehören. Erst der Unterschied zwischen den Stufen erzeugt Gruppen. */
.sektion { padding-block: var(--raum); }
.sektion--gross { padding-block: var(--raum-gross); }
.sektion--eng { padding-block: var(--raum-eng); }

/* G-11  Sektionskopf als Bauteil statt als Inline-Angabe.
   Vorher standen die Sektionsköpfe der Startseite als `style="..."` im
   Markup: einmal `text-align:center;max-width:760px;margin:0 auto 80px`,
   einmal `max-width:640px`, einmal gar nichts. Drei Muster für dieselbe
   Sache — und jedes davon liess bei 1140 px Containerbreite zwischen
   380 und 500 px Fläche rechts ungenutzt. Genau diese Löcher sind es,
   die eine Seite „leer und starr" aussehen lassen.

   Drei Varianten, die den Raum unterschiedlich füllen:
   · Grundform   — linksbündig, Text auf 62 Zeichen begrenzt (Lesebreite)
   · --geteilt   — Überschrift links, Einleitung rechts daneben; füllt die
                   volle Containerbreite und ist das Muster, das eine Seite
                   am schnellsten modern aussehen lässt
   · --mitte     — zentriert, für Abschnitte ohne Fließtext daneben */
.sektion-kopf { max-width: 62ch; margin: 0 0 var(--raum-eng); }
.sektion-kopf > .lead-360 { margin-top: 18px; }

/* Der geteilte Kopf braucht Kicker und Überschrift in EINEM Behälter.
   Der erste Anlauf ließ beide als eigene Rasterkinder stehen und wies
   ihnen Zeile 1 und 2 derselben Spalte zu. Das funktioniert nicht: die
   vierzeilige Einleitung daneben spannt beide Zeilen, und ein Element,
   das mehrere Zeilen überspannt, dehnt sie — auch dann, wenn sie als
   `min-content` angelegt sind. Gemessen standen zwischen Kicker und
   Überschrift 60 px statt der gewollten 26 px. Mit dem Behälter sind es
   zwei Rasterkinder in EINER Zeile, und das Problem entfällt. */
.sektion-kopf--geteilt {
  max-width: none;
  display: grid; gap: 24px 64px; grid-template-columns: 1fr;
}
.sektion-kopf__titel { min-width: 0; }
@media (min-width: 900px) {
  .sektion-kopf--geteilt {
    /* 7:5 — die Überschrift bekommt mehr Gewicht als der Beitext, und der
       Beitext landet bei rund 60 Zeichen Zeilenlänge. */
    grid-template-columns: 7fr 5fr;
    /* Die Einleitung sitzt auf der Grundlinie der Überschrift, nicht oben —
       sonst schwebt sie im Nichts. */
    align-items: end;
  }
  .sektion-kopf--geteilt > .lead-360 { margin-top: 0; padding-bottom: 6px; }
}

.sektion-kopf--mitte { max-width: 760px; margin-inline: auto; text-align: center; }
.sektion-kopf--mitte > .lead-360 { margin-inline: auto; }

/* Sektion mit Bild + Overlay. Die Overlay-Werte sind exakt die gemessenen. */
.sektion--bild { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.sektion--bild > .container { position: relative; z-index: 2; }
.sektion--bild::before { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Bildfokus fuer Baender, in denen ein Hochformat-Foto liegt. `cover` +
   `center` schneidet dort ueber 70 % der Hoehe weg und trifft die Mitte —
   bei einem Portraitfoto ist die Mitte der Hals. Auf der Karriereseite
   endete das Band deshalb mit einem am Mund abgeschnittenen Gesicht.
   15 % holt den Kopf vollstaendig ins Bild (am Foto ausgemessen). */
.sektion--bild-kopf { background-position: center 15%; }
/* G-20  Die Bildbänder: Verlauf statt Flächendeckung.
   Alle drei Bänder lagen unter einer gleichmäßig deckenden grauen Fläche.
   Das Ergebnis war dreimal dasselbe milchige Grau — man erkannte weder
   die Praxis noch das Team, und drei verschiedene Fotos sahen aus wie
   ein und dieselbe Textur. Wer ein Foto so weit abdeckt, kann es auch
   weglassen; genau das meint „stumpf".

   Ein Verlauf löst dieselbe Aufgabe besser: Er deckt DORT, wo Schrift
   steht, und lässt das Bild dort stehen, wo keine steht. Die Werte sind
   an der jeweiligen Textlage ausgemessen, nicht geraten.

   Die Deckung über dem Text ist dabei überall GESTIEGEN, nicht gesunken
   (Karriere .80 → .88 an der Textkante) — der Kontrast wird also besser,
   während das Bild sichtbarer wird. Nachgemessen mit
   03_DEPLOY/pruefe-breite-und-kontrast.mjs. */

/* Stimmen: die Karten stehen mittig, das Band braucht links und rechts
   keine Deckung. Oben trägt es die Überschrift, unten nichts mehr. */
.ov-stimmen::before {
  background: linear-gradient(180deg,
    rgba(84, 84, 84, .74) 0%,
    rgba(84, 84, 84, .52) 42%,
    rgba(84, 84, 84, .30) 100%);
}

/* Karriere: Text und Knopf stehen rechts, das Video links. In der Mitte
   darf das Teamfoto durch — dort ist es am dichtesten. */
.ov-karriere::before {
  /* Die Kante bei 30/40 % ist an der Textlage ausgemessen, nicht geschätzt:
     die Videokachel links endet bei 510 px, der Textblock beginnt bei
     575 px von 1440 px. Zwischen beiden liegt der einzige Streifen, in dem
     das Teamfoto ohne Rücksicht auf Schrift durchkommen darf.

     Der Ton wird nach rechts DUNKLER (#60656F → #494D55), statt nur
     dichter zu werden. Grund: Weiß auf #60656F erreicht 4,87:1 — das ist
     die Obergrenze, die dieser Grauton überhaupt hergibt, und sobald ein
     helles Gesicht durchscheint, fällt der Wert darunter. Gemessen mit
     03_DEPLOY/pruefe-text-auf-bild.mjs lag die Einleitung bei 3,90:1.
     Weiß auf #494D55 erreicht 7,16:1 und hat damit Luft nach unten. */
  background: linear-gradient(96deg,
    rgba(96, 101, 111, .60) 0%,
    rgba(96, 101, 111, .44) 30%,
    rgba(73, 77, 85, .90)  40%,
    rgba(73, 77, 85, .94)  100%);
}

/* FAQ: Überschrift und Knöpfe stehen mittig OBEN, darunter läuft das Band
   aus. Vorher lief der Verlauf genau andersherum (oben durchsichtig, unten
   #545454) — die Überschrift stand im hellen Teil und der dunkle Teil trug
   keine Schrift. Deshalb war „Fragen zum Ablauf?" grau auf hellem Foto. */
.ov-faq::before {
  background: linear-gradient(180deg,
    rgba(84, 84, 84, .86) 0%,
    rgba(84, 84, 84, .74) 55%,
    rgba(84, 84, 84, .52) 100%);
}

/* ---------- Hero (gemessen: 590 px, Video + Verlauf 112deg, opacity .25) ---------- */
.hero-360 { position: relative; isolation: isolate; min-height: 590px; display: flex; align-items: center; overflow: hidden; }
.hero-360__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-360::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--ov-hero);
  opacity: .25;
}
/* Lesbarkeit über bewegtem Bild: die Vorlage hat den Text auf einer hellen
   Stelle. Ein zweiter, sehr weicher Verlauf sichert den Kontrast auch dann,
   wenn das Video an dieser Stelle dunkel wird — Kontrast ist Pflicht (Gate 6).

   G-17  Der Schleier schützt jetzt den Text, statt das Bild zu löschen.
   Vorher lief er von .82 über .55 (bei 45 %) auf 0 (bei 78 %). Weil der
   Textblock bis rund 60 % der Fensterbreite reicht, musste der Schleier
   über die ganze Fläche hoch bleiben — und hat das Video dabei so weit
   ausgebleicht, dass rechts nur noch ein grauer Schemen übrig war. Der
   Hero sah aus wie eine leere weiße Fläche mit einem Schatten darin.

   Jetzt hält er über dem Text MEHR (.94 statt .82, also besserer
   Kontrast) und fällt dahinter schnell ab (ab 58 % auf 0 bei 76 %). Das
   Bild wird rechts wieder sichtbar, ohne dass die Schrift etwas verliert.
   Die Kante bei 58/76 % ist an der Textbreite ausgemessen: der Block ist
   720 px breit und beginnt bei 150 px, endet also bei 870 von 1440 px. */
.hero-360::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.95) 42%,
    rgba(255,255,255,.72) 58%,
    rgba(255,255,255,0)   76%);
}

/* G-35  FEHLER: Die Köpfe der Unterseiten sind über dem Foto unlesbar.

   „Über uns", „Kontakt", „Karriere", „FAQ" und „Kurse" tragen seit A-6/A-10
   ein Foto statt des Hero-Videos — und erbten den Schleier der Startseite.
   Der ist auf das Video zugeschnitten: er fällt ab 58 % ab, weil dort im
   Video das Motiv steht. Die Überschriften der Unterseiten sind aber
   länger als die der Startseite. „EIN TEAM. VIER FACHRICHTUNGEN." läuft
   bis 62 % der Fensterbreite, also mitten in den ungeschützten Teil.

   An den echten Pixeln gemessen (03_DEPLOY/pruefe-text-auf-bild.mjs):
   2,19:1 für die Überschrift, 2,08:1 für die Einleitung, nötig wären 3
   bzw. 4,5. Im Bild sieht man es sofort: „FACHRICHTUNGEN." steht auf den
   Gesichtern des Teamfotos. Über alle Unterseiten waren es 17 Stellen.

   Ein Foto ist außerdem etwas anderes als ein Video: das Video der
   Startseite läuft dunkel und ruhig, die Teamfotos sind hell und
   kleinteilig — auf ihnen verliert dunkler Text viel schneller.

   Der Schleier hält deshalb auf den Fotoköpfen länger (bis 66 %) und
   läuft weicher aus (bis 88 %). Rechts bleibt ein Achtel des Bildes
   unangetastet; das Foto ist weiter zu sehen, die Schrift steht aber
   nicht mehr darauf. Nur für `--bild` — der Video-Hero der Startseite
   behält seine Kante, dort steht das Motiv rechts.
   Die Regel steht NICHT hier, sondern rund 1000 Zeilen weiter unten beim
   Block A-6/A-10 — dort liegt die Fassung, die tatsächlich gilt. Der
   erste Anlauf hat sie hier gesetzt und war wirkungslos; die Messung
   meldete danach exakt dieselben 17 Stellen wie vorher. Wer sie sucht:
   `grep -n "hero-360--bild::after" marke.css`. */
.hero-360__inhalt { position: relative; z-index: 2; max-width: 720px; padding-block: 72px; }
/* G-22  Die Einleitung im Hero endet vor der Kante des Schleiers.
   Sie lief über die vollen 720 px des Blocks, also bis x=870 von 1440 px.
   Genau dort fällt der Schleier ab und das Video kommt durch — gemessen
   4,47:1 gegen die geforderten 4,5:1. Statt den Schleier weiter nach
   rechts zu ziehen (was das Bild wieder auslöschen würde) endet der Satz
   jetzt früher: 56 Zeichen sind auch die Zeilenlänge, die sich am besten
   liest. 720 px bei 19 px Schrift waren rund 85 Zeichen — deutlich über
   dem, was für einen Fließtext gut ist. */
.hero-360 .lead-360 { max-width: 56ch; }
@media (max-width: 700px) {
  .hero-360 { min-height: 0; }
  .hero-360__inhalt { padding-block: 56px; }
  .hero-360::after { background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.78) 100%); }
}

/* G-18  FEHLER: Wer „Bewegung reduzieren" eingeschaltet hat, sah einen
   vollkommen leeren Hero.
   Das Zusammenspiel war: marke.js lädt die Videoquelle bei
   `prefers-reduced-motion` gar nicht erst — richtig so, dann greift das
   `poster`-Bild des <video>-Elements. Diese Regel hat das Element aber
   zusätzlich auf `display: none` gesetzt und damit auch das Standbild
   entfernt. Übrig blieb weiße Fläche: keine Praxis, kein Bild, nichts.

   Betroffen ist keine Randgruppe — „Bewegung reduzieren" steht bei iOS
   und macOS in den Bedienungshilfen weit oben und wird bei Migräne,
   Schwindel und Reisekrankheit eingeschaltet. Auf der Website einer
   Therapiepraxis ausgerechnet diese Menschen vor eine leere Seite zu
   setzen, ist der schwerste der hier gefundenen Fehler.

   Das Element bleibt jetzt stehen. Ohne Quelle zeigt <video> sein Poster —
   ein Standbild, das sich nicht bewegt. Genau das ist gewollt. */
@media (prefers-reduced-motion: reduce) {
  .hero-360__video { display: block; }
}

/* ---------- Hinweiskarten (gemessen: 555×346, Radius 16, Polster 40) ---------- */
.hinweise { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hinweise { grid-template-columns: 1fr 1fr; } }
.hinweis { background: var(--color-white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.hinweis__label { display: inline-block; font-size: 13px; font-weight: 700; line-height: 21.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary-text); }
.hinweis__datum { display: block; margin-top: 12px; font-size: 14px; line-height: 23.1px; color: var(--color-meta); }
.hinweis__titel { margin: 8px 0 0; font-size: 22px; font-weight: 800; line-height: 28.6px; letter-spacing: -.3px; text-transform: uppercase; color: var(--color-card-title); }
.hinweis__text  { margin: 12px 0 20px; font-size: 15px; font-weight: 400; line-height: 24px; color: var(--color-muted); }
@media (max-width: 700px) {
  .hinweis { padding: 28px; }
  .hinweis__titel { font-size: 19px; line-height: 24.7px; }
}

/* ---------- Leistungskarten (gemessen: 266×423, Radius 12, Rahmen 1px #F0F0F0) ----------

   G-12  Sieben Karten in EINEM Raster statt in zwei.
   Vorher lagen die vier ersten Leistungen in einem Vierer- und die drei
   restlichen in einem Dreierraster darunter. Folge: Reihe 1 hatte 266 px
   breite Karten, Reihe 2 rund 363 px — und weil die Bilder `3/2` sind,
   sprangen mit der Breite auch die Bildhöhen (177 px gegen 242 px). Zwei
   Reihen desselben Abschnitts sahen aus wie zwei verschiedene Bausteine.

   Jetzt ein Raster aus acht gleich breiten Spuren. Jede Karte belegt
   zwei davon, ist also immer ein Viertel breit. Die letzte Reihe beginnt
   eine halbe Karte eingerückt und steht damit mittig unter der ersten —
   ohne Loch am Rand und ohne dass eine Karte aus der Reihe fällt. */
.leistungen { display: grid; gap: 25px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .leistungen { grid-template-columns: repeat(4, 1fr); } }
.leistungen--drei { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .leistungen--drei { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 900px) {
  .leistungen--sieben { grid-template-columns: repeat(8, 1fr); }
  .leistungen--sieben > * { grid-column: span 2; }
  /* Die fünfte Karte öffnet die zweite Reihe um eine halbe Kartenbreite
     versetzt; die beiden folgenden schließen an. 3 Karten × 2 Spuren = 6,
     bleiben 2 Spuren, je eine links und rechts. */
  .leistungen--sieben > :nth-child(5) { grid-column: 2 / span 2; }
}

.leistung {
  display: flex; flex-direction: column; background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
  /* G-13  Tiefe im Ruhezustand (siehe G-2). Am Telefon gibt es kein
     :hover — dort blieb jede dieser Karten bis zuletzt vollkommen flach. */
  box-shadow: var(--schatten-ruhe);
  transition: box-shadow var(--tempo-ruhig) var(--kurve),
              transform var(--tempo-ruhig) var(--kurve),
              border-color var(--tempo-ruhig) var(--kurve);
}
.leistung:hover, .leistung:focus-within {
  box-shadow: var(--schatten-hebt); transform: translateY(-4px);
  border-color: var(--color-primary-soft);
}
@media (prefers-reduced-motion: reduce) {
  .leistung, .leistung:hover { transition: none; transform: none; }
}
.leistung__bild {
  aspect-ratio: 3 / 2; width: 100%; object-fit: cover;
  /* G-14  Das Bild wächst beim Zeigen leicht mit, statt still zu stehen.
     `overflow: hidden` an der Karte hält es im Rahmen. Eine sehr kleine
     Bewegung (3 %), die aus einer Abbildung eine anfassbare Kachel macht. */
  transition: transform var(--tempo-ruhig) var(--kurve);
}
.leistung:hover .leistung__bild { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .leistung__bild, .leistung:hover .leistung__bild { transition: none; transform: none; }
}
.leistung__body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.leistung__titel { margin: 0; font-size: 18px; font-weight: 800; line-height: 21.6px; text-transform: uppercase; color: var(--color-card-title); }
.leistung__text  { margin: 14px 0 20px; font-size: 14px; font-weight: 400; line-height: 21px; color: var(--color-muted); flex: 1; }

/* Wisch-Slider mit Anschnitt für schmale Geräte (Entscheidung B-4).
   Reine CSS-Lösung — kein JavaScript, deshalb ohne JS voll bedienbar. */
@media (max-width: 700px) {
  .swipe {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc(78% - 12px);      /* 22 % Anschnitt = „da kommt noch was" */
    gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    padding-inline: 20px; margin-inline: -20px; padding-bottom: 8px;
  }
  .swipe > * { scroll-snap-align: start; }
  .swipe::-webkit-scrollbar { height: 4px; }
  .swipe::-webkit-scrollbar-thumb { background: var(--color-scrollthumb); border-radius: 999px; }
}

/* ---------- Patientenstimmen (gemessen: Fläche #E6E9EA, Radius 20, Polster 40) ---------- */
.stimmen { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px)  { .stimmen { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stimmen { grid-template-columns: repeat(3, 1fr); } }

/* G-15  Fünf Stimmen im Dreierraster: die zweite Reihe stand mit zwei
   Karten links und einem 363 px breiten Loch rechts — der Abschnitt sah
   aus, als fehle dort etwas. Derselbe Kniff wie bei den Leistungen
   (G-12): sechs Spuren, jede Karte zwei, die vierte beginnt auf Spur 2.
   Die untere Reihe steht damit mittig unter der oberen. */
@media (min-width: 900px) {
  .stimmen--fuenf { grid-template-columns: repeat(6, 1fr); }
  .stimmen--fuenf > * { grid-column: span 2; }
  .stimmen--fuenf > :nth-child(4) { grid-column: 2 / span 2; }
}
.stimmen > * { min-width: 0; }
/* `display:flex` ist Absicht: die Karten einer Reihe sind unterschiedlich
   lang („Freundlich, kompetent und menschlich." gegen sechs Zeilen). Ohne
   flex + margin-top:auto stehen die Namen auf unterschiedlicher Hoehe und
   die Reihe wirkt schief. */
.stimme {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-white); border-radius: var(--radius-xl);
  padding: 30px 30px 26px; box-shadow: var(--shadow);
}
.stimme__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stimme__sterne { color: var(--color-highlight); font-size: 18px; letter-spacing: 2px; }
.stimme__quelle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--color-meta);
}
.stimme__quelle svg { width: 16px; height: 16px; flex: none; }
.stimme__zitat { margin: 0; flex: 1; }
.stimme__text { margin: 16px 0 20px; font-size: 16px; line-height: 25.6px; color: var(--color-accent); }
/* G-16  Ein kurzes Zitat wird groß gesetzt.
   In einer Rasterreihe sind alle Karten gleich hoch. „Freundlich,
   kompetent und menschlich." (39 Zeichen) stand deshalb neben einer
   Karte mit sechs Zeilen und liess darunter 120 px weiße Fläche — es sah
   nach einem Fehler aus, nicht nach einer kurzen Empfehlung. In 24 px
   füllt derselbe Satz die Karte und wird zur Aussage, die er ist. Die
   Schwelle zieht PHP anhand der Zeichenzahl, nicht die Hand. */
.stimme__text--gross {
  font-size: 24px; line-height: 34px; font-weight: 500;
  letter-spacing: -.2px; color: var(--color-heading);
}
@media (max-width: 700px) { .stimme__text--gross { font-size: 21px; line-height: 30px; } }
.stimme__autor {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--color-border);
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted);
}

/* ---------- Kursband (gemessen: Karte 1140×506, rgba(255,255,255,.96), Radius 16, Polster 60) ----------

   G-26  Die Karte gibt das Band frei.
   Sie war 1140 px breit, also genau so breit wie der Container, und
   deckte das Foto vom Kurstraining bis auf einen schmalen Rand ab. Ein
   Bild, das man nicht sieht, kann man auch weglassen — und die weiße
   Fläche über die volle Breite war einer der Orte, an denen die Seite
   „leer" wirkte. Auf 760 px begrenzt und links gesetzt, bleibt rechts
   ein Drittel des Bandes für das Bild. Das ist derselbe Aufbau wie im
   Hero, wodurch beide Abschnitte zusammengehören statt zu konkurrieren. */
.kursband {
  background: rgba(255, 255, 255, .96); border-radius: var(--radius-lg);
  padding: 60px; box-shadow: var(--shadow-lg);
  max-width: 760px;
}
@media (max-width: 700px) { .kursband { padding: 32px 24px; max-width: none; } }
.kurs-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; padding: 0; list-style: none; }
.kurs-chip {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--color-border);
  border-radius: 999px; background: var(--color-surface);
  font-size: 13px; font-weight: 700; line-height: 21.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-primary-text);
  transition: background-color var(--tempo-kurz) var(--kurve),
              color var(--tempo-kurz) var(--kurve),
              border-color var(--tempo-kurz) var(--kurve);
}
a.kurs-chip:hover, a.kurs-chip:focus-visible { background: var(--color-knopf); color: var(--color-white); border-color: var(--color-primary-text); text-decoration: none; }

/* G-27  „+ Weitere Kurse" sah aus wie ein weiterer Kursname.
   In der Reihe RÜCKENFIT · REHASPORT · QIGONG · TABATA · + WEITERE KURSE
   trug der letzte Eintrag dieselbe Form wie die vier davor — nur war er
   als einziger anklickbar. Wer die Kursliste suchte, sah dort einen Kurs
   namens „Weitere Kurse". Der Chip trägt jetzt die Markenfarbe als Rahmen
   und einen Pfeil: er sieht aus wie ein Weg, nicht wie ein Kurs. */
.kurs-chip--weiter {
  background: var(--color-white); border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.kurs-chip--weiter::after { content: ' \2192'; }
@media (prefers-reduced-motion: reduce) { .kurs-chip { transition: none; } }

/* ---------- Ablauf/Prozess (gemessen: Karte 555×220, Radius 12, Rahmen #F5F5F5, Polster 40) ---------- */
.ablauf { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ablauf { grid-template-columns: 1fr 1fr; } }
.schritt { display: flex; gap: 24px; background: var(--color-white); border: 1px solid var(--color-border-2); border-radius: var(--radius); padding: 40px; }
.schritt__nr { flex: none; font-size: 46px; font-weight: 900; line-height: 46px; letter-spacing: -1px; color: var(--color-primary-text); }
.schritt__titel { margin: 0; font-size: 19px; font-weight: 800; line-height: 22.8px; text-transform: uppercase; color: var(--color-accent); }
.schritt__text { margin: 12px 0 0; font-size: 16px; font-weight: 400; line-height: 25.6px; color: var(--color-muted); }
@media (max-width: 700px) {
  .schritt { padding: 26px; gap: 16px; }
  .schritt__nr { font-size: 38px; line-height: 38px; }
  .schritt__titel { font-size: 16px; line-height: 19.2px; }
}

/* ---------- Karriere-Band ---------- */
.karriere-kachel { max-width: 560px; margin-left: auto; }
/* Karriere-Band mit Hochkant-Video links (A-3). Die Kachel verliert im
   Zweispalter ihr `margin-left:auto` — sonst klebte sie am rechten Rand
   und riss eine Luecke zwischen Video und Text auf. */
.karriere-band { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .karriere-band { grid-template-columns: 360px 1fr; gap: 64px; } }
.karriere-band > * { min-width: 0; }
.karriere-band .karriere-kachel { max-width: 620px; margin-left: 0; }

/* ---------- Fuß (gemessen: 240 px, #60656F, Text 19px weiß) ---------- */
/* `margin-top` und `border-top` muessen hier ausdruecklich zurueckgesetzt
   werden: style.css (laedt VOR marke.css) gibt `.site-footer` ein
   `margin-top: var(--space-5)` = 64 px aus der Grundvorlage mit. Der
   Aussenabstand liegt ausserhalb der Fussfarbe, dort scheint der weisse
   <body> durch — genau der sinnlose weisse Balken vor dem Fuss, auf allen
   49 Seiten, am deutlichsten dort, wo der letzte Abschnitt grau ist. */
.site-footer { background: var(--color-footer); color: var(--color-white); padding-block: 48px; margin-top: 0; border-top: 0; }
.site-footer a { color: var(--color-white); text-decoration: none; font-size: 19px; line-height: 31.35px; }
.site-footer a:hover { color: var(--color-highlight); text-decoration: underline; }
.footer-360 { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .footer-360 { grid-template-columns: auto 1fr auto; } }
.footer-360__logo img { width: 200px; height: auto; }
.footer-360__recht { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.footer-360__meta { font-size: 19px; line-height: 31.35px; color: var(--color-white); opacity: .9; margin: 0; }
.footer-360__social { display: flex; gap: 20px; }
.footer-360__social a { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; color: var(--color-social); }
.footer-360__social a:hover { color: var(--color-highlight); }
.footer-360__social svg { width: 30px; height: 30px; fill: currentColor; }

/* ---------- Feste Handlungsleiste auf dem Handy (Entscheidung B-5) ---------- */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: none; gap: 1px; background: rgba(84, 84, 84, .2);
  transform: translateY(100%); transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.aktionsleiste.ist-sichtbar { transform: translateY(0); }
.aktionsleiste a { flex: 1; min-height: 56px; border-radius: 0; }
/* Die feste Leiste liegt UEBER der Seite. Ohne Polster verdeckt sie am
   Seitenende die Fusszeile — und dort stehen seit dem 02.09.2026 Impressum,
   Datenschutz und der KI-Hinweis an ihrem einzigen Fundort. Wer sie antippt,
   loest stattdessen den Anruf aus. Das Polster ist die Leistenhoehe (56 px)
   plus der Bereich, den iPhones unten freihalten. */
@media (max-width: 700px) {
  .aktionsleiste { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .aktionsleiste { transition: none; } }

/* ---------- Philosophie: Video links, Text rechts (Design-Vorlage) ---- */
.philo { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .philo { grid-template-columns: 1fr 1fr; gap: 64px; } }
.philo > * { min-width: 0; }

/* ---------- Video mit 2-Klick-Zustimmung (partials/video.php) ----------
   Das Vorschaubild liegt lokal; erst der Klick holt das iframe von
   youtube-nocookie.com. Deshalb ist der Platzhalter ein echtes <img> und
   kein Hintergrundbild — ein <img> traegt Alt-Text und kann `object-fit`. */
.video-consent {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--color-accent); box-shadow: var(--shadow-lg);
}
.video-consent--16-9 { aspect-ratio: 16 / 9; }
.video-consent--9-16 { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
.video-consent__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.video-consent__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(18, 20, 24, .18) 0%, rgba(18, 20, 24, .30) 55%, rgba(18, 20, 24, .82) 100%);
}
/* Der Abspielknopf gehoert in die MITTE des Bildes — der Hinweistext haengt
   unten. Ohne die absolute Positionierung des Hinweises schiebt er den Knopf
   nach oben und der Kasten sieht schief aus. */
.video-consent__inhalt {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; padding: 24px;
}
.video-consent__knopf {
  border: 0; background: none; padding: 0; cursor: pointer; line-height: 0;
  border-radius: 14px; transition: transform .15s ease;
}
.video-consent__knopf svg { width: 86px; height: 61px; }
.video-consent__knopf-flaeche { fill: #212121; fill-opacity: .82; transition: fill .15s ease, fill-opacity .15s ease; }
.video-consent__knopf:hover .video-consent__knopf-flaeche,
.video-consent__knopf:focus-visible .video-consent__knopf-flaeche { fill: #FF0000; fill-opacity: 1; }
.video-consent__knopf:hover { transform: scale(1.05); }
.video-consent__knopf:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 4px; }
.video-consent__hinweis {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  margin: 0; text-align: center;
  font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .92);
}
.video-consent__hinweis a { color: var(--color-white); text-decoration: underline; }
.video-consent__extern { display: block; margin-top: 6px; font-weight: 700; }
.video-consent__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) {
  .video-consent__knopf svg { width: 64px; height: 45px; }
  .video-consent__hinweis { font-size: 12px; line-height: 18px; }
}

/* ---------- Fachbereichs-Seiten ---------- */
.bereich-hero { background: var(--color-surface); padding-block: 64px; }
.bereich-inhalt { max-width: 820px; }
.bereich-inhalt p { font-size: 19px; line-height: 31.35px; color: var(--color-text); margin: 0 0 20px; }
.bereich-inhalt h2 { font-size: 26px; font-weight: 800; line-height: 34px; color: var(--color-accent); margin: 40px 0 14px; }
.bereich-inhalt ul { margin: 0 0 24px; padding-left: 0; list-style: none; }
.bereich-inhalt li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 17px; line-height: 27px; color: var(--color-muted); }
.bereich-inhalt li::before { content: ''; position: absolute; left: 8px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.unterseiten { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .unterseiten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .unterseiten { grid-template-columns: repeat(3, 1fr); } }
.unterseiten a {
  display: block; padding: 16px 20px; background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: 16px; font-weight: 600; color: var(--color-accent); text-decoration: none;
}
.unterseiten a:hover { border-color: var(--color-primary-text); color: var(--color-primary-text); text-decoration: none; }

/* ---------- Team ---------- */
.team-360 { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .team-360 { grid-template-columns: repeat(2, 1fr); } }
.person { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 32px; }
.person__name { margin: 0; font-size: 22px; font-weight: 800; line-height: 28.6px; color: var(--color-card-title); }
.person__rolle { margin: 6px 0 16px; font-size: 15px; font-weight: 700; color: var(--color-primary-text); }
.person__quals { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.person__quals li { font-size: 13px; line-height: 21.5px; padding: 4px 12px; border-radius: 999px; background: var(--color-surface); color: var(--color-muted); }
/* Portraet einer Fachleitung — gleiche Masse wie das Monogramm, damit der
   Kopf der Karte nicht springt, je nachdem ob ein Foto zugeordnet ist. */
.person__foto {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover; object-position: 50% 30%;
}

/* ---------- Team: alle Mitarbeitenden (Kundenwunsch 15.09.2026) ---------- */
.mitarbeiter-raster {
  display: grid; gap: 20px; margin-top: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .mitarbeiter-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mitarbeiter-raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .mitarbeiter-raster { grid-template-columns: repeat(4, 1fr); } }
.mitarbeiter {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 24px; text-align: center;
}
.mitarbeiter__foto,
.mitarbeiter__monogramm {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; display: block;
}
.mitarbeiter__foto { object-fit: cover; object-position: 50% 30%; }
.mitarbeiter__monogramm {
  background: var(--color-knopf); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; letter-spacing: .5px;
}
.mitarbeiter__name {
  margin: 0 0 10px; font-size: 17px; font-weight: 800; line-height: 24px;
  color: var(--color-card-title);
}
.mitarbeiter__quals { margin: 0; padding: 0; list-style: none; }
.mitarbeiter__quals li {
  font-size: 13px; line-height: 20px; color: var(--color-muted); margin-bottom: 4px;
}

/* ---------- Kurse: Wochenplan + Buchungsstrecke ---------- */
.kursplan { width: 100%; border-collapse: collapse; }
.kursplan th, .kursplan td { border: 1px solid var(--color-border); padding: 14px 16px; text-align: left; vertical-align: top; }
.kursplan th { background: var(--color-accent); color: var(--color-white); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.kursplan td { font-size: 15px; line-height: 24px; color: var(--color-muted); }
.kursplan__zeit { display: block; font-weight: 700; color: var(--color-primary-text); }
.kursplan__preis { display: block; font-size: 12px; color: var(--color-muted); }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.buchung { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .buchung { grid-template-columns: 2fr 1fr; } }
.buchung__schritt { margin: 0 0 18px; display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 800; color: var(--color-accent); }
.buchung__nr { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

.tagwahl { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 24px; list-style: none; padding-left: 0; }
.tagwahl::-webkit-scrollbar { display: none; }
.tagwahl { scrollbar-width: none; }
.tagwahl__btn {
  flex: none; padding: 12px 22px; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-white); color: var(--color-muted); font-family: var(--font-body);
  font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tagwahl__btn[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.tagwahl__btn:hover { border-color: var(--color-primary-text); }

.kurswahl { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0 0 8px; padding: 0; list-style: none; }
@media (min-width: 700px) { .kurswahl { grid-template-columns: repeat(2, 1fr); } }
.kurswahl__label { display: block; cursor: pointer; height: 100%; }
.kurswahl__radio { position: absolute; opacity: 0; width: 0; height: 0; }
/* `display: block` ist hier PFLICHT, nicht Kosmetik: die Karte ist ein
   <span> und damit von Haus aus inline. Ein inline-Kasten nimmt weder
   `height` an noch draengt er Nachbarn weg, und sein Rahmen wird an JEDEM
   Zeilenumbruch neu angesetzt. Zusammen mit dem Kind `.kurswahl__kopf`
   (display:flex) zerfiel die Karte in sieben Bruchstuecke: blaue
   Rahmenfetzen quer durch den Text, Zeit-Marke und Beschreibung
   uebereinander. Betraf Kursbuchung UND Bewerbungs-Funnel. */
.kurswahl__karte {
  display: block;
  height: 100%; border: 2px solid var(--color-border); border-radius: var(--radius); background: var(--color-white);
  padding: 20px; transition: border-color .2s ease, box-shadow .2s ease;
}
.kurswahl__label:hover .kurswahl__karte { border-color: var(--color-primary-soft); }
.kurswahl__radio:checked + .kurswahl__karte { border-color: var(--color-primary-text); box-shadow: 0 10px 15px -3px rgba(0, 159, 227, .2); }
.kurswahl__radio:focus-visible + .kurswahl__karte { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.kurswahl__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kurswahl__name { margin: 0; font-size: 18px; font-weight: 800; line-height: 21.6px; color: var(--color-card-title); }
.kurswahl__haken { flex: none; width: 22px; height: 22px; color: var(--color-primary-text); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .2s ease; }
.kurswahl__radio:checked + .kurswahl__karte .kurswahl__haken { opacity: 1; transform: scale(1); }
.kurswahl__zeit { display: inline-block; margin: 10px 0; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary-text); }
/* ebenfalls ein <span>: ohne `block` setzt sich die Beschreibung in dieselbe
   Zeile wie die Zeit-Marke und schiebt sich ueber sie. */
.kurswahl__text { display: block; margin: 0; font-size: 14px; line-height: 21px; color: var(--color-muted); }
.kurswahl__kosten { display: block; margin-top: 10px; font-size: 13px; color: var(--color-meta); }

.zusammenfassung { position: sticky; top: 130px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.zusammenfassung h3 { margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); font-size: 20px; font-weight: 900; color: var(--color-accent); }
.zusammenfassung dt { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-meta); }
.zusammenfassung dd { margin: 4px 0 18px; font-size: 17px; font-weight: 700; color: var(--color-accent); }
@media (max-width: 999px) { .zusammenfassung { position: static; } }

/* Ohne JavaScript ist die Tagesauswahl unnötig — dann werden ALLE Kurse
   gezeigt. Progressive Enhancement: die Seite ist ohne JS vollständig. */
.ohne-js .tagwahl { display: none; }
.kurswahl__eintrag[hidden] { display: none; }

/* ---------- Sanftes Einblenden — nur dezent, respektiert reduced-motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.js-aus .reveal { opacity: 1; transform: none; }

/* ---------- Formulare ---------- */
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="date"], .form select, .form textarea {
  font-family: var(--font-body); font-size: 16px;
  /* G-23  Dieselbe Rundung wie die Knöpfe (10 px statt 12 px). Alles, was
     man anfassen kann, trägt jetzt dieselbe Form; die 12 px bleiben den
     Karten, die man nur ansieht. Der Unterschied ist klein, aber im
     Formular stehen Feld und Absendeknopf direkt untereinander — dort
     fiel er auf. */
  border-radius: var(--radius-knopf);
  border: 1px solid var(--color-input-border); padding: 14px 16px; width: 100%; background: var(--color-white); color: var(--color-accent);
  /* G-24  Das Feld zeigt, dass es angefasst wird: der Rahmen nimmt beim
     Tippen die Markenfarbe an und bekommt einen weichen Ring. Vorher gab
     es nur den Umriss des Browsers beim Tastatur-Fokus — wer mit der Maus
     in ein Feld klickte, sah gar keine Rückmeldung. Auf einer Seite, auf
     der Menschen Kursbuchungen und Bewerbungen abschicken, ist das der
     Unterschied zwischen „ich bin hier richtig" und Unsicherheit. */
  transition: border-color var(--tempo-kurz) var(--kurve),
              box-shadow var(--tempo-kurz) var(--kurve);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, .18);
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--color-scrollthumb); }
@media (prefers-reduced-motion: reduce) {
  .form input, .form select, .form textarea { transition: none; }
}
.form label { font-size: 15px; font-weight: 700; color: var(--color-accent); }
/* [K] 15.09.2026 — zwei Felder nebeneinander, aber erst wenn Platz dafuer ist.
   Vorher stand das Raster als inline-style im HTML: auf 390 px blieben die zwei
   Spalten stehen und schnitten lange Beschriftungen ab („Behandlungseinhe…").
   Ein inline-style laesst sich von keiner Media Query ueberschreiben — deshalb
   als Klasse, nicht als Korrektur obendrauf. */
.form-paar { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-paar { grid-template-columns: 1fr 1fr; } }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }

/* ---------- Barrierefreiheit ---------- */
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.sektion--bild :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--color-highlight); }
.skip-link { background: var(--color-knopf); color: var(--color-white); }

/* ---------- Leistungsseite: wechselndes Zwei-Spalten-Raster ---------- */
@media (min-width: 900px) {
  .bereich-raster { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 899px) {
  /* Auf schmalen Geräten steht das Bild immer über dem Text —
     die order-Angaben aus dem Desktop-Wechsel dürfen hier nicht greifen. */
  .bereich-raster > * { order: 0 !important; }
  .bereich-raster > *:last-child { order: -1 !important; }
}

/* =========================================================================
   Nachjustierung aus Gate 7 (19.08.2026) — jeder Wert stammt aus dem
   Bericht in 03_DEPLOY/design-diff/, nicht aus dem Augenmaß.

   ACHTUNG, 18.09.2026: Dieser Block steht WEIT HINTER den Bauteilregeln
   und schlägt sie deshalb alle. Er ist der Ort, an dem die Vorlagentreue
   durchgesetzt wurde — und damit der Ort, an dem Julians Aufhebung vom
   18.09. greifen muss. Wer hier oben eine Regel ändert und die Wirkung
   nicht sieht, sucht den Grund mit hoher Wahrscheinlichkeit HIER.

   Die Werte, die reine Vorlagentreue waren, sind unten einzeln als G-n
   abgelöst. Alles andere ist geblieben.
   ========================================================================= */

/* G-28  Kicker-Abstand 30 px → 14 px.
   Der Wert stammt aus einer Vorlage, in der der Kicker 19 px groß war und
   wie ein eigener Absatz wirkte. Seit er 14 px klein und gesperrt ist
   (G-8), gehört er zur Überschrift — 30 px rissen ihn davon los, und
   genau diese Lücke sah auf jeder Seite nach einem Fehler aus. */
.h-hero + .lead-360, .h-sektion + .lead-360, .h-kurs + .lead-360 { margin-top: 30px; }
.hero-360__inhalt .btn-reihe { margin-top: 46px; }

/* Knöpfe: die Quelle zentriert den Text und unterstreicht die Textlinks */
.btn { text-align: center; }
.mehr { text-decoration: underline; }
.kurs-chip { text-decoration: none; }

/* G-29  Der unterstrichene Knopf im Kursband.
   „KURSPLAN & ANMELDUNG" stand als einziger Knopf der ganzen Seite
   unterstrichen da — weil die Vorlage es so hatte. Ein Knopf ist eine
   Fläche, ein Link ist unterstrichener Text; beides zugleich sieht nach
   einem Versehen aus und war es in der Vorlage vermutlich auch. Die
   Chips daneben trugen dieselbe Unterstreichung, obwohl sie als Pillen
   gestaltet sind. Beides raus — die Knöpfe der Seite sehen jetzt überall
   gleich aus. */

/* Der Kursband-Knopf ist im Original 58 px hoch (Zeilenhöhe 26,4 px) */
.kursband .btn { min-height: 58px; line-height: 26.4px; }

/* Hero-Knöpfe sind im Original beide 327 px breit */
@media (min-width: 900px) {
  .hero-360__inhalt .btn-reihe .btn { min-width: 327px; }
}

/* Sprungmarke trägt im Original die Fließtextfarbe */
.skip-link { color: var(--color-text); background: var(--color-white); }
.skip-link:focus { background: var(--color-knopf); color: var(--color-white); }

/* Patientenstimmen — Kopf (A-2, umgebaut 20.08.).
   Die Vorlage setzt die Ueberschrift in eine helle Karte (gemessen: 562×315,
   #E6E9EA, Radius 20, Polster 40) und hat DARUNTER keine Rezensionen. Der
   Nachbau hat welche, und die brauchen Breite. Die Kachel steht deshalb
   mittig ueber dem Band — Farbe, Radius und Polster bleiben gemessen. */
.stimmen-kopf {
  max-width: 720px; margin: 0 auto 48px; text-align: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-xl); padding: 40px;
}
@media (max-width: 700px) { .stimmen-kopf { padding: 28px; margin-bottom: 32px; } }
.stimmen-kopf .lead-360 { color: var(--color-text); }
.stimmen-kopf .kicker--light, .stimmen-kopf .h-sektion--light { color: var(--color-accent); }
.stimmen-kopf .lead-360--light { color: var(--color-text); }

/* Bewertungs-Zusammenfassung. Zeigt NUR belegte Angaben: die Anzahl aus dem
   Trustindex-Block der Vorlage. Der Schnitt bleibt leer, bis die Praxis ihn
   nennt (Ü-11) — eine erfundene Note waere auf einer Heilberufs-Seite ein
   handfestes Problem, nicht nur unsauber. */
.stimmen-quelle {
  margin: 20px 0 0; font-size: 15px; line-height: 24px; color: var(--color-muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.stimmen-quelle__sterne { color: var(--color-highlight); font-size: 17px; letter-spacing: 2px; }
.stimmen-quelle strong { color: var(--color-accent); }

/* Fuß: zwei Spalten wie im Original (Rechtsseiten links, Vermerk rechts) */
.footer-360__recht { flex-direction: column; gap: 4px; }

/* ---- Gate-7-Runde 2: Abstände exakt aus den Messwerten ---------------- */
/* G-30  Sektionspolster: starre 120 px → Rhythmus in drei Stufen.
   Hier lag der eigentliche Grund, warum die Seite sich wie ein Formular
   las: ZEHN Abschnitte mit exakt demselben Polster, oben wie unten. Diese
   Regel hat auch das erste, sanftere Raster (G-9) wieder überschrieben —
   nachgemessen war der Abstand danach weiter bei 120 px.

   Die Stufen kommen aus --raum-gross/--raum/--raum-eng und wachsen mit der
   Fensterbreite. Bei 1440 px liefert `--raum-gross` rund 128 px (also etwa
   die 120 der Vorlage), `--raum` rund 96 px und `--raum-eng` rund 64 px.
   Am Telefon landen sie bei 72/56/40 px statt bei starren 64 px.
   Erst der Unterschied zwischen den Stufen bildet Gruppen. */
.sektion { padding-block: var(--raum); }
.sektion--gross { padding-block: var(--raum-gross); }
.sektion--eng { padding-block: var(--raum-eng); }

/* G-32  Zwei weiße Abschnitte hintereinander atmen einmal, nicht zweimal.
   Stoßen zwei Sektionen ohne eigene Fläche aneinander, addieren sich ihre
   Polster: unten 120 + oben 120 = 240 px weiße Fläche zwischen zwei
   Absätzen. Auf der Startseite kam das mehrfach vor, auf den Bereichsseiten
   in jedem zweiten Abschnitt — und jedes Mal bricht die Seite dort
   auseinander, weil nichts mehr zusammengehört, was 240 px auseinander
   liegt.

   Ein Bildband braucht diese Regel nicht: seine Fläche trennt schon.
   Deshalb greift sie nur, wenn BEIDE Nachbarn weiß sind. 96 + 64 = 160 px
   statt 240 px — immer noch ein deutlicher Schnitt, aber einer, den man
   als Absatz liest und nicht als Ende der Seite.

   Die Regel braucht kein Markup und wirkt dadurch auf allen 51 Seiten,
   auch auf denen, die niemand einzeln angefasst hat. */
.sektion:not(.sektion--bild) + .sektion:not(.sektion--bild) {
  padding-top: var(--raum-eng);
}

/* Knopfreihe: 46 px unter dem Fließtext (gemessen an drei Stellen). */
.btn-reihe { margin-top: 46px; }

/* Der Kursband-Knopf ist links ausgerichtet, nicht zentriert. */
.kursband .btn { text-align: left; }

/* G-31  Leistungs-Kopf: 60 px Kicker-Abstand → 16 px.
   Derselbe Grund wie G-28, nur doppelt so weit. Zwischen „UNSERE
   LEISTUNGEN" und „Therapie in Wilsdruff" stand eine Lücke von 60 px;
   die beiden gehören zusammen und lesen sich erst als Paar, wenn sie
   auch beieinander stehen. Der Abstand, der die Gruppe vom Raster
   trennt, sitzt jetzt am Sektionskopf (`--raum-eng`), nicht am Kicker. */
.kicker--weit { margin-bottom: 16px; }

/* Hinweiskarten: die Innenabstände der Quelle, damit die Karte auf ihre
   gemessenen 346 px kommt (40 + 21,5 + 36,5 + 23,1 + 13 + 28,6 + 13,4
   + 72 + 32 + 24,8 + 40). */
.hinweis__label { margin-bottom: 36px; }
.hinweis__datum { margin-top: 0; margin-bottom: 13px; }
.hinweis__titel { margin-bottom: 13px; }
.hinweis__text  { margin: 0 0 32px; }

/* Das frueher hier stehende 2:1-Raster (.stimmen-band) ist mit A-2 entfallen:
   es presste die Karten in eine ~270 px schmale Spalte. Die Karten nutzen
   jetzt die volle Containerbreite, siehe .stimmen weiter oben. */

/* Die Knopfreihe des FAQ-Bandes sitzt in der Quelle in einem 540 px
   breiten, transparenten Behälter mit 20 px Eckenradius. */
.knopfhuelle { display: inline-flex; gap: 16px; border-radius: 20px; background: transparent; }
@media (min-width: 900px) { .knopfhuelle { width: 540px; } }

/* ---- Gate-7-Runde 3: die Handy-Werte (390 px), alle gemessen ---------- */
@media (max-width: 700px) {
  /* Kursband */
  .h-kurs { line-height: 36.8px; }
  .kursband p { font-size: 15px !important; line-height: 24px !important; }

  /* Ablauf-Karten */
  .schritt__text { font-size: 14px; line-height: 22.4px; }

  /* Fuß: 18 px, zentriert */
  .site-footer a, .footer-360__meta { font-size: 18px; line-height: 29.7px; }
  .footer-360 { text-align: center; }
  .footer-360__recht { align-items: center; }
  .footer-360__logo img { margin-inline: auto; }
  .footer-360__social { justify-content: center; }

  /* Hero-Knöpfe füllen die Breite (gemessen: 350 px auf 390 px Viewport) */
  .hero-360__inhalt .btn-reihe { flex-direction: column; align-items: stretch; }
  .hero-360__inhalt .btn-reihe .btn { width: 100%; }

  /* Die Kopf-Kachel der Stimmen fuellt auf dem Handy die Breite (frueher auf
     330 px gedeckelt — das galt fuer die seitliche Anordnung, die es mit A-2
     nicht mehr gibt). */
  .stimmen-kopf { max-width: 100%; }

  /* Der Knopf-Behälter des FAQ-Bandes: erster Knopf über die volle Breite */
  .knopfhuelle { flex-direction: column; width: 100%; }
  .knopfhuelle .btn:first-child { width: 100%; }
}

/* =========================================================================
   Karriereseite — Maße aus 01_QUELLE/messwerte/karriere-1440.json
   ========================================================================= */
.kar-raster { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .kar-raster { grid-template-columns: 1fr 1fr; } }
.kar-bild { margin: 0; }
.kar-bild img { width: 100%; height: auto; border-radius: var(--radius); }
.kar-bild figcaption { margin-top: 16px; text-align: center; font-size: 19px; line-height: 31.35px; color: var(--color-text); }

/* Acht Gründe: 4 Spalten, zentriert (Titel 18/23,4 w800 #009FE3) */
.gruende { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gruende { grid-template-columns: repeat(4, 1fr); } }
.grund { text-align: center; }
.grund__titel { margin: 0; font-size: 18px; font-weight: 800; line-height: 23.4px; color: var(--color-primary-text); }
.grund__text  { margin: 14px 0 0; font-size: 14px; font-weight: 400; line-height: 21.7px; color: var(--color-muted); }

/* Listen: 16/25,6 px, Punkte in Markenblau */
.kar-h3 { margin: 0 0 24px; font-size: 26px; font-weight: 800; line-height: 31.2px; color: var(--color-primary-text); text-align: center; }
.kar-h3--gross { font-size: 30px; line-height: 36px; color: var(--color-heading); }
.kar-liste { margin: 0; padding: 0; list-style: none; }
.kar-liste li {
  position: relative; padding-left: 30px; margin-bottom: 16px;
  font-size: 16px; font-weight: 400; line-height: 25.6px; color: var(--color-muted);
}
.kar-liste li::before {
  content: ''; position: absolute; left: 6px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);
}
.kar-liste--zwei { columns: 1; }
@media (min-width: 900px) { .kar-liste--zwei { columns: 2; column-gap: 40px; } .kar-liste--zwei li { break-inside: avoid; } }

.h-sektion--blau { color: var(--color-primary-text); }

.kar-kontakt { margin: 24px 0 0; padding: 0; list-style: none; }
.kar-kontakt li { font-size: 22px; line-height: 36.3px; color: var(--color-text); }
.kar-kontakt b { font-weight: 700; }
.kar-kontakt a { color: inherit; }

.kar-eindruecke { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.kar-eindruck { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

.kar-bewerbung__titel { text-align: center; color: var(--color-accent-dark); }
.kar-bewerbung__hinweis { text-align: center; font-size: 19px; line-height: 31.35px; color: var(--color-text); margin: 24px 0 0; }

/* --- Funnel: mehrstufig, aber ohne JavaScript vollständig -------------
   Ohne JS sind ALLE Schritte sichtbar und das Formular sendet ganz normal.
   Erst marke.js blendet sie einzeln ein und zeigt „Nächster Bereich". */
.funnel__frage { font-size: 20px; font-weight: 600; line-height: 20px; color: var(--color-muted); margin-bottom: 20px; display: block; }
.funnel .kurswahl__name { font-size: 15px; font-weight: 500; color: var(--color-muted); text-transform: none; }
.funnel__navigation { display: flex; flex-wrap: wrap; gap: 16px; }
.funnel__fortschritt { display: flex; gap: 8px; margin-bottom: 28px; list-style: none; padding: 0; }
.funnel__punkt { flex: 1; height: 6px; border-radius: 999px; background: var(--color-border); }
.funnel__punkt.ist-aktiv { background: var(--color-primary); }

/* =========================================================================
   FAQ, Kontakt und Danke — Werte aus den Messwerten der jeweiligen Seite
   ========================================================================= */

/* FAQ-Akkordeon: Frage 18,67/30,8 px w600 in #0E3B43, 50 px Abstand */
.faq__item { margin-bottom: 50px; border: 0; }
.faq__q {
  font-size: 18.6667px; font-weight: 600; line-height: 30.8px;
  color: var(--color-faq); cursor: pointer; list-style: none;
  padding: 0 0 0 8px; display: flex; gap: 14px; align-items: baseline;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before { content: '+'; color: var(--color-primary-text); font-weight: 800; }
.faq__item[open] .faq__q::before { content: '–'; }
.faq__a p { font-size: 16px; line-height: 25.6px; color: var(--color-muted); margin: 12px 0 0 30px; }

/* Öffnungszeiten: 16/26,4 px, Tag w600 #545454, Zeit w400 #666,
   geschlossene Tage in #888 mit blauem „Geschlossen" (14/23,1 px w600) */
.hours th, .hours td { font-size: 16px; line-height: 26.4px; padding: 12px 0 !important; }
.hours th { font-weight: 600 !important; color: var(--color-accent) !important; }
.hours td { color: var(--color-muted) !important; }
.hours tr.ist-zu th { color: var(--color-meta) !important; }
.hours tr.ist-zu td { font-size: 14px; line-height: 23.1px; font-weight: 600; color: var(--color-primary-text) !important; }
.hours + p { font-size: 13px !important; line-height: 19.5px !important; }

/* Danke-Seite: Überschrift 50/65 px, Fließtext 20/33 px */
.danke .h-hero { font-size: 50px; line-height: 65px; }
.danke__text { font-size: 20px; line-height: 33px; color: var(--color-text); }
.danke .form label { font-size: 20px; font-weight: 600; color: var(--color-muted); line-height: 20px; }
.danke .form__group--check label,
.danke fieldset label label { font-size: 15px; font-weight: 500; }
.danke .btn { font-size: 20px; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---- Gate-7-Runde 4 ---------------------------------------------------- */
/* Weiße Tafel über dem Foto — die Quelle setzt den Text nicht direkt aufs
   Bild (nachgerechnet am Screenshot: Hintergrund an der Textstelle
   rgb(255,255,255)). */
.kar-tafel { background: var(--color-white); border-radius: var(--radius-lg); padding: 56px; }
@media (max-width: 700px) { .kar-tafel { padding: 28px; } }
.lead-360--schwarz { color: var(--color-accent-dark); }

/* Aufgaben/Profil: im Original zwei 473-px-Spalten */
@media (min-width: 1000px) {
  .kar-raster--473 { grid-template-columns: repeat(2, 473px); justify-content: space-between; align-items: start; }
}

/* Handy-Werte der Karriereseite (gemessen bei 390 px) */
@media (max-width: 700px) {
  .kar-liste li { font-size: 14px; line-height: 22.4px; }
  .kar-kontakt li { font-size: 18px; line-height: 29.7px; }
  .kar-eindruecke { grid-auto-columns: 78%; }
}

/* B-19: die Quelle setzt in zwei Bändern weißen Text auf ein Foto mit zu
   schwachem Overlay — nachgerechnet 3,44:1 (FAQ) und 4,08:1 (Karriere),
   nötig sind 4,5:1. Die Overlays sind deshalb kräftiger. Zu geringer
   Kontrast ist ein Bug, kein Designmerkmal. */
.ov-karriere::before { opacity: .93; }
.ov-faq::before { background: linear-gradient(rgba(84, 84, 84, .35) 0%, rgba(84, 84, 84, .82) 28%, rgba(84, 84, 84, .86) 70%, rgba(84, 84, 84, .97) 100%); }
/* Nachgezogen mit A-5 (20.08.): das Band ist von 477 auf seine Quellhoehe
   von 790 px gewachsen, die Schrift liegt dadurch weiter oben — dort war
   der Verlauf noch fast durchsichtig. Nachgerechnet am Screenshot
   (Luminanz-Perzentile, hellstes Zwanzigstel): Fliesstext 3,41:1 statt
   4,5:1, das gelbe „Fragen" 2,45:1 statt 3,0:1. Der Verlauf hat jetzt
   einen dunklen Halt genau ueber dem Textbereich (28-70 %) und bleibt am
   oberen Rand hell, damit das Foto nicht zur Flaeche wird. */

/* Dritter Fall derselben Klasse, beim B-19-Durchgang uebersehen: das
   Karten-Band der Karriereseite traegt seine Ueberschrift in Markenblau
   OHNE Tafel direkt auf dem Foto. Blau ist eine helle Schriftfarbe — unter
   dem alten 50-%-Grau lag die Zeile bei gemessenen 2,3:1 und verschwand
   ueber dem hellen Gesicht im Bild ganz. Ein flaechiges Dunkel wuerde das
   Foto toeten, deshalb ein Verlauf: dunkel genau dort, wo die Zeile steht,
   nach unten hin wieder durchsichtig, damit das Bild hinter der Karte
   sichtbar bleibt. */
.ov-karte::before {
  background: linear-gradient(rgba(18, 20, 24, .88) 0%, rgba(18, 20, 24, .84) 26%, rgba(84, 84, 84, .55) 46%, rgba(84, 84, 84, .5) 100%);
}

/* =========================================================================
   Gate 3 + Gate 6: Bedienbarkeit auf dem Handy
   ========================================================================= */

/* Tipp-Flächen mindestens 44 px hoch (Apple/Google-Mindestmaß). Ohne das
   trifft auf einem Handy niemand zuverlässig den Link. */
.site-nav a, .footer-360__recht a, .breadcrumb a, .breadcrumb span,
.mehr, .kurs-chip, .unterseiten a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.mehr { padding-block: 10px; }
.site-nav a { padding-block: 12px; }
.footer-360__recht a { padding-block: 7px; }
.breadcrumb a, .breadcrumb span { padding-block: 12px; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.faq__q { min-height: 44px; }
.stimme__autor, .footer-360__social a { min-height: 44px; }

/* Kein Seitwärtsscrollen: das zweispaltige Stimmen-Band braucht mehr als
   1024 px, sonst laufen 562 px Karte + Rezensionen aus dem Bild. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .stimmen-band { grid-template-columns: 1fr; }
}
/* Lange Fachbegriffe brechen um, statt die Seite breit zu machen. */
.bereich-inhalt, .bereich-inhalt li, .bereich-inhalt p, .breadcrumb {
  overflow-wrap: anywhere; word-break: normal;
}
.tabelle-scroll, .swipe { max-width: 100%; }
img, video { max-width: 100%; }

/* =========================================================================
   Gate 3 — die zwei echten Ursachen des Seitwärtsscrollens
   ========================================================================= */

/* 1) Raster-Kinder brauchen `min-width: 0`. Ohne das nimmt ein Kind seine
      Mindest-Inhaltsbreite an und macht die ganze Seite breiter — auf dem
      Handy lief die Kursbuchung dadurch 102 px aus dem Bild. */
.buchung > *, .kar-raster > *, .bereich-raster > *, .stimmen-band > *,
.leistungen > *, .gruende > *, .team-360 > *, .ablauf > *, .hinweise > * { min-width: 0; }

/* 2) Die Gründe-Kacheln brauchen auf sehr schmalen Geräten eine Spalte. */
@media (max-width: 479px) { .gruende { grid-template-columns: 1fr; } }

/* Tipp-Flächen: auch Telefon-, Mail- und Rechtslinks im Fließtext. */
a[href^="tel:"], a[href^="mailto:"],
.form label a, .legal a, .bereich-inhalt a, .kar-kontakt a {
  display: inline-block; padding-block: 12px;
}
.logo-360 { min-height: 44px; }

/* Honigtopf wirklich unsichtbar — er ist kein Bedienelement und darf in
   keiner Prüfung als zu kleine Tipp-Fläche zählen. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Auch der Datenschutz-Link IM Einwilligungs-Kästchen ist eine Tipp-Fläche.
   Das `padding-block` vergroessert die Tipp-Flaeche — es vergroessert aber
   auch die ZEILE, in der der Link steht: ein `inline-block` geht mit seiner
   ganzen Randbox in die Zeilenhoehe ein. Gemessen: die erste Textzeile des
   Datenschutz-Kaestchens sass dadurch 12 px tiefer als die des Kaestchens
   darueber, das Haekchen stand 14,9 px daneben (A-11, Meldung Julian 20.08.).
   Der negative Aussenabstand nimmt der Zeile genau das wieder, was das
   Polster ihr gibt — die Tipp-Flaeche bleibt, die Zeile wird wieder normal. */
.form__group--check label a, .form__group--check a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* Haekchen und erste Textzeile auf eine Linie (A-11).
   Zeilenhoehe 31,35 px, Kaestchen 13 px hoch -> (31,35 - 13) / 2 = 9,2 px.
   `.35rem` (5,6 px) aus der Grundvorlage setzte das Kaestchen zu hoch. */
.form__group--check input[type="checkbox"], .form__group--check input[type="radio"] { margin-top: 9px; }
@media (max-width: 700px) {
  /* Fliesstext ist dort 29,7 px hoch -> (29,7 - 13) / 2 = 8,4 px. */
  .form__group--check input[type="checkbox"], .form__group--check input[type="radio"] { margin-top: 8px; }
}
/* … und der im Einwilligungstext der Karte (partials/map.php). */
.map-consent__text a, .consent__text a { display: inline-block; padding-block: 12px; }

/* Lange deutsche Komposita („Triggerpunktbehandlung") passen bei 320 px in
   keine 32-px-Überschrift. Ohne Trennung schiebt ein einziges Wort die ganze
   Seite zur Seite — die Trennung greift, weil <html lang="de"> gesetzt ist. */
.h-hero, .h-sektion, .h-kurs, .kar-h3, .leistung__titel, .hinweis__titel,
.grund__titel, .schritt__titel, .person__name, .faq__q {
  overflow-wrap: break-word; hyphens: auto;
}
/* Dieselbe Klemme auf den Rechtsseiten: deren Ueberschriften tragen keine
   Klasse, standen deshalb nicht in der Liste oben. Gemessen bei 320 px:
   „Verbraucherstreitbeilegung" ist 309 px breit in einer 280-px-Spalte und
   schob das Impressum 9 px aus dem Bild. Die langen Links (ODR-Plattform,
   E-Mail-Adressen) brauchen zusaetzlich einen Umbruch an beliebiger Stelle,
   weil eine URL kein Trennmuster hat. */
.legal h1, .legal h2, .legal h3, .legal p, .legal li {
  overflow-wrap: break-word; hyphens: auto;
}
.legal a { overflow-wrap: anywhere; }

/* =========================================================================
   Gate-7-Runde 5 — alle Werte aus den Berichten in 03_DEPLOY/design-diff/
   ========================================================================= */

/* Danke-Seite: die FRAGE ist 20/600, die ANTWORT-Optionen sind 15/500.
   Vorher galt 20/600 für beides — dadurch waren 16 Stellen zu groß. */
.danke .form legend { font-size: 20px; font-weight: 600; line-height: 20px; color: var(--color-muted); }
.danke .form label  { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--color-muted); }

/* Kontakt: Überschrift „Öffnungszeiten" 28/36,4 w800; Tabelle mobil 15 px */
.kontakt-h2 { font-size: 28px; font-weight: 800; line-height: 36.4px; color: var(--color-accent); }
@media (max-width: 700px) { .hours th, .hours td { font-size: 15px; } }

/* Karriere: der Fließtext im Arbeitsplatz-Band ist in der Quelle reines
   Schwarz, nicht das dunkle Grau der Überschriften. */
.lead-360--schwarz { color: var(--color-schwarz); }
@media (max-width: 700px) {
  .lead-360--schwarz { font-size: 18px; line-height: 29.7px; }
  .grund { max-width: 268px; margin-inline: auto; }
}

/* Fuß auf dem Handy: 30 px zwischen den beiden Rechtslinks */
@media (max-width: 700px) { .footer-360__recht { gap: 12px; } }

/* Der Knopf-Behälter behält seinen Eckenradius auch einspaltig. */
@media (max-width: 700px) { .knopfhuelle { border-radius: 20px; } }

/* =========================================================================
   Gate-7-Runde 6 — zwei handfeste Fehler im eigenen Stylesheet
   ========================================================================= */

/* 1) `.leistungen` setzt ein 2-Spalten-Raster, `.swipe` setzt Spaltenfluss.
      Beide sind Ein-Klassen-Selektoren, beide galten gleichzeitig — daraus
      wurde ein zweispaltiges Wisch-Raster mit doppelt hohen Karten
      (gemessen 854 px statt 403 px). Der Spaltenfluss muss das Raster
      ausdrücklich abräumen. */
@media (max-width: 700px) {
  .swipe { grid-template-columns: none !important; }
}

/* 2) Der Innenrand auf dem Handy ist in der Quelle NICHT einheitlich:
      die Hero-Knoepfe sind 350 px breit (= 20 px Rand), die helle Karte der
      Patientenstimmen 320 px (= 35 px Rand). Elementor-Wildwuchs. Wir bleiben
      bei 20 px und geben der Karte ihre eigene Breite — so stimmen beide. */
@media (max-width: 700px) {
  .stimmen-kopf { max-width: 320px; }
  /* Auf dem Handy ist der Kopf in der Quelle KEINE Karte: Hintergrund
     transparent, kein Eckenradius, kein Polster. */
  .stimmen-kopf { background: transparent; border-radius: 0; padding: 0; }
  /* G-33  Hero-Knöpfe am Telefon: 62 px Lücke → 14 px.
     Der Wert 62 px stammt aus der Vorlage. Zwei gestapelte Knöpfe mit
     62 px Luft dazwischen lesen sich nicht als Paar, sondern als zwei
     Angebote, die nichts miteinander zu tun haben — und der zweite
     („Zu den Kursen") rutscht dadurch am Telefon unter die Kante.
     14 px hält sie zusammen und lässt trotzdem genug Platz zum
     Danebentippen. */
  .hero-360__inhalt .btn-reihe { gap: 14px; }
}

/* =========================================================================
   A-5 — Abschluss-Band „Fragen zum Ablauf?" (20.08.2026)
   ------------------------------------------------------------------------
   Diese Regel steht bewusst am DATEIENDE und mit zwei Klassen im Wähler.
   `.sektion { padding-block: 120px }` steht weiter oben ein zweites Mal
   (Gate-7-Runde 2) — bei gleicher Spezifität gewinnt die spätere Regel.
   Genau daran ist `.sektion--eng` wirkungslos geworden; dieselbe Falle wird
   hier nicht noch einmal aufgestellt.
   ========================================================================= */
/* G-34  Das FAQ-Band: 276,5 px Polster → --raum-gross (rund 128 px).

   Die alte Begründung stimmt nicht mehr. Sie lautete: „Mit 120 px wäre das
   Band nur 477 px hoch — das Hintergrundfoto (1920x1280) müsste dann 483 px
   seiner Höhe wegwerfen und schnitte den Kopf der Mitarbeiterin an."

   Nachgemessen am 18.09.2026 ist das Bandfoto **1920 × 685**, nicht
   1920 × 1280. Es ist beim Bildumbau am 15.09. auf Bandformat zugeschnitten
   worden; der Kommentar hat diesen Schritt nicht mitbekommen. Bei 1440 px
   Breite ist das Foto damit 514 px hoch — das Band war mit 790 px also
   nicht zu niedrig für sein Bild, sondern ZU HOCH. `cover` musste das Foto
   auf 2214 px Breite hochziehen und hat dabei 774 px seitlich abgeschnitten,
   also gut ein Drittel des Motivs.

   Sichtbar war davon die Folge: 237 px Inhalt in einem 790 px hohen Band,
   darunter 290 px leere Fläche. Der Abschluss der Startseite bestand zur
   Hälfte aus Nichts.

   --raum-gross ergibt bei 1440 px rund 128 px Polster und damit ein Band
   von etwa 493 px — fast genau die 514 px, die das Foto von sich aus hat.
   Der Beschnitt geht damit gegen null, und der Text steht in einem Band,
   das zu ihm passt. Am Telefon wächst der Wert mit, statt auf 120 px
   festzuhängen. */
@media (min-width: 900px) {
  .sektion--bild.ov-faq { padding-block: var(--raum-gross); }
}

/* =========================================================================
   A-6 / A-10 — Kopfbereich der Unterseiten mit Foto (20.08.2026)
   ------------------------------------------------------------------------
   „Über uns" und „Kontakt" hatten als Kopf nur eine graue Fläche
   (`background: var(--color-surface)`), während die Startseite ein Video
   trägt. Julian: „Hero ohne Hintergrundbild".
   Aufbau wie beim Start-Kopf, nur mit einem Foto statt des Videos: darüber
   liegen dieselben zwei Verläufe (`::before` 112deg und `::after` weiß von
   links) — dadurch bleibt die dunkle Schrift lesbar und die Seite sieht aus
   wie die Startseite, nicht wie eine Fremdseite.
   Der Bildausschnitt (`background-position`) ist je Foto ausgemessen, nicht
   geschätzt: siehe Kommentar an den Modifikatoren.
   ========================================================================= */
.hero-360--bild {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 900px) { .hero-360--bild { min-height: 440px; } }

/* Der weiße Verlauf reicht auf dem Foto weiter nach rechts als über dem
   Video: das Team-Foto ist heller und kontrastreicher als der Video-Standbild,
   und der Fließtext läuft bis x720.

   G-35  Die Absicht stimmte, die Werte trugen sie nicht. Bei 72 % lag die
   Deckung nur noch bei 30 %, ab 100 % bei 5 % — und genau dort stehen die
   Überschriften der Unterseiten. „EIN TEAM. VIER FACHRICHTUNGEN." läuft
   bis 62 % der Fensterbreite und stand damit auf den Gesichtern des
   Teamfotos.

   An den echten Pixeln gemessen (03_DEPLOY/pruefe-text-auf-bild.mjs,
   18.09.2026): Überschrift 2,19:1, Einleitung 2,08:1, Kicker 3,77:1 —
   nötig wären 3 bzw. 4,5. Über „Über uns", „Kontakt", „Karriere", „FAQ"
   und „Kurse" summierte sich das auf 17 Stellen.

   Jetzt hält der Verlauf bis 66 % und läuft bis 92 % aus. Rechts bleibt
   knapp ein Zehntel des Fotos unangetastet — das Team ist weiter zu
   sehen, die Schrift steht nur nicht mehr darauf. */
.hero-360--bild::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.96) 48%,
    rgba(255,255,255,.90) 66%,
    rgba(255,255,255,.44) 80%,
    rgba(255,255,255,0)   92%);
}
@media (max-width: 700px) {
  .hero-360--bild::after { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 62%, rgba(255,255,255,.82) 100%); }
}

/* =========================================================================
   A-9, Teil 2 — das Menü hat einen siebten Eintrag bekommen (20.08.2026)
   ------------------------------------------------------------------------
   Die Grundvorlage schaltet erst unter 720 px auf das Klappmenü um. Mit
   sieben Einträgen braucht die Menüleiste aber rund 618 px; zusammen mit
   Logo (150) und Abstand (24) sind das 792 px. Gemessen bei 720 px: das
   Logo wurde von 150 px auf **34 px** zusammengedrückt — es war nur noch
   ein Streifen. Deshalb schaltet das Klappmenü jetzt schon unter 900 px,
   und das Logo darf grundsätzlich nicht mehr schrumpfen.
   ========================================================================= */
.logo-360 { flex: none; }

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--color-accent);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 8px 20px 16px; }
  .site-nav a { display: block; padding: 12px 0; font-size: 18px; }
}

/* =========================================================================
   A-8 — Über uns: die Bausteine, die der Seite gefehlt haben (20.08.2026)
   ------------------------------------------------------------------------
   Struktur abgeschaut bei den Bausteinen aus
   `_MASTER/Skills/Redesign/assets/blocks.html` (`facts` / `focus-grid2` /
   `cards`) — Farben, Radien und Schatten kommen ausschliesslich aus den
   Tokens oben. Kein fremder Farbwert.
   ========================================================================= */

/* ---- Zahlenband („facts") ---------------------------------------------- */
.zahlenband { background: var(--color-accent); padding-block: 56px; }
.zahlen {
  display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 900px) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.zahl { text-align: center; }
.zahl__wert {
  display: block; font-size: 52px; font-weight: 900; line-height: 1;
  letter-spacing: -1px; color: var(--color-highlight);
}
.zahl__label {
  display: block; margin-top: 12px; font-size: 15px; line-height: 22px;
  color: var(--color-white);
}
@media (max-width: 700px) {
  .zahlenband { padding-block: 40px; }
  .zahl__wert { font-size: 40px; }
  .zahl__label { font-size: 14px; line-height: 20px; }
}

/* ---- Drei Haltungen („focus-grid2") ------------------------------------ */
.haltungen { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 900px) { .haltungen { grid-template-columns: repeat(3, 1fr); } }
.haltung {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius); padding: 36px 32px 34px;
}
.haltung__nr {
  display: block; font-size: 15px; font-weight: 900; letter-spacing: 2px;
  color: var(--color-primary-text); margin-bottom: 14px;
}
.haltung__titel {
  margin: 0; font-size: 20px; font-weight: 800; line-height: 26px;
  color: var(--color-card-title);
}
.haltung__text { margin: 14px 0 0; font-size: 16px; line-height: 25.6px; color: var(--color-muted); }

/* ---- „Alles unter einem Dach" (Karten-Einstiege) ----------------------- */
.dach { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px)  { .dach { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dach { grid-template-columns: repeat(3, 1fr); } }
.dach__link {
  display: block; height: 100%; background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 26px 24px 24px; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dach__link:hover, .dach__link:focus-visible {
  border-color: var(--color-primary-text); box-shadow: var(--shadow);
  transform: translateY(-3px); text-decoration: none;
}
.dach__kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-primary-text);
}
.dach__name {
  display: block; margin-top: 8px; font-size: 19px; font-weight: 800;
  line-height: 24px; color: var(--color-card-title);
}
.dach__text { display: block; margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .dach__link:hover { transform: none; } }

/* ---- Team-Karten ------------------------------------------------------- */
.person__kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.person__monogramm {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  background: var(--color-knopf); color: var(--color-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; letter-spacing: .5px;
}
.person__intro, .person__text { font-size: 16px; line-height: 25.6px; color: var(--color-muted); margin: 0 0 16px; }
.person__label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-primary-text); margin: 24px 0 10px;
}
.person__liste { margin: 0; padding: 0; list-style: none; }
.person__liste li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 15px; line-height: 24px; color: var(--color-muted);
}
.person__liste li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary);
}

/* ---- A-7: „Weiterlesen" ------------------------------------------------
   <details> statt JavaScript: ohne Skript aufklappbar, der Text steht
   trotzdem im Quelltext (Suchmaschine liest ihn). Der Marker der
   Browser-Grundvorlage wird entfernt, sonst steht ein Dreieck vor dem
   Knopf; WebKit braucht dafuer den eigenen Pseudoelement-Waehler. */
.mehr-lesen { margin-top: 8px; }
.mehr-lesen__knopf {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; padding: 12px 0;
  font-size: 15px; font-weight: 700; color: var(--color-primary-text);
}
.mehr-lesen__knopf::-webkit-details-marker { display: none; }
.mehr-lesen__knopf::after {
  content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.mehr-lesen[open] .mehr-lesen__knopf::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mehr-lesen__knopf:hover, .mehr-lesen__knopf:focus-visible { color: var(--color-primary-dark); }
.mehr-lesen__zu { display: none; }
.mehr-lesen[open] .mehr-lesen__auf { display: none; }
.mehr-lesen[open] .mehr-lesen__zu  { display: inline; }
.mehr-lesen__inhalt { padding-top: 8px; border-top: 1px solid var(--color-border); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .mehr-lesen__knopf::after { transition: none; } }

.hinweis-klein { margin: 32px 0 0; font-size: 15px; line-height: 24px; color: var(--color-meta); }
.hinweis-klein a { color: var(--color-primary-text); }

/* ---- Praxis-Eindrücke -------------------------------------------------- */
.eindruecke { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
@media (min-width: 900px) { .eindruecke { grid-template-columns: repeat(3, 1fr); } }
.eindruck { margin: 0; }
.eindruck__bild {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); display: block;
}
@media (max-width: 899px) { .eindruck:last-child { display: none; } }

/* Rundgang (04.09.2026): hier werden ALLE sechs Bilder gebraucht — die Zeile
   darueber blendet auf schmalen Fenstern sonst das letzte aus. Hoehere
   Spezifitaet (0,2,1) schlaegt sie, unabhaengig von der Reihenfolge. */
@media (max-width: 899px) { .eindruecke--rundgang .eindruck:last-child { display: block; } }
.eindruck__titel {
  margin-top: 10px; font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--color-muted);
}

/* ---- Zwei-Spalten-Block (Anmeldung + Weiterweg) ------------------------ */
.zwei-spalten { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .zwei-spalten { grid-template-columns: 1fr 1fr; gap: 64px; } }
.zwei-spalten > * { min-width: 0; }
.weiterweg {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 40px 36px;
}
@media (max-width: 700px) { .weiterweg { padding: 28px 24px; } }
.weiterweg__liste { margin: 24px 0 0; padding: 0; list-style: none; }
.weiterweg__liste li {
  position: relative; padding-left: 30px; margin-bottom: 16px;
  font-size: 16px; line-height: 25.6px; color: var(--color-muted);
}
.weiterweg__liste li::before {
  content: ''; position: absolute; left: 6px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-highlight);
}
.weiterweg__liste strong { color: var(--color-accent); }

/* =========================================================================
   A-4 — „So läuft Ihre Therapie bei uns ab" (20.08.2026)
   ------------------------------------------------------------------------
   Nachbau des Bausteins `steps-scroll` aus
   `_MASTER/Skills/Redesign/assets/base.css` — Struktur uebernommen, Farben
   und Radien ausschliesslich aus den Tokens dieses Projekts.
   Ohne JavaScript und bei `prefers-reduced-motion` sind ALLE Schritte voll
   sichtbar; die Hervorhebung ist nur eine Zugabe, kein Informationstraeger.
   ========================================================================= */
.ablauf-scroll { display: grid; gap: 40px; grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 1000px) { .ablauf-scroll { grid-template-columns: 480px 1fr; gap: 72px; align-items: start; } }
.ablauf-scroll > * { min-width: 0; }
@media (min-width: 1000px) { .ablauf-scroll__bild { position: sticky; top: 150px; } }
.ablauf-scroll__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-lg);
}
.ablauf-scroll__karte {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; margin-top: -48px; margin-inline: 24px; position: relative; z-index: 2;
}
.ablauf-scroll__karte-titel { margin: 0; font-size: 17px; font-weight: 800; color: var(--color-accent); }
.ablauf-scroll__karte-text  { margin: 8px 0 16px; font-size: 15px; line-height: 24px; color: var(--color-muted); }
.ablauf-scroll__karte .btn { width: 100%; }

.ablauf-schritte { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ablauf-schritt {
  position: relative; padding: 0 0 40px 62px;
  border-left: 2px solid var(--color-border);
  margin-left: 21px;
  opacity: 1;                     /* Grundzustand: alles sichtbar */
  transition: opacity .35s ease;
}
.ablauf-schritt:last-child { border-left-color: transparent; padding-bottom: 0; }
.ablauf-schritt__nr {
  position: absolute; left: -22px; top: -4px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-white); border: 2px solid var(--color-primary);
  color: var(--color-primary-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; letter-spacing: .5px;
  transition: background .25s ease, color .25s ease;
}
.ablauf-schritt__titel { margin: 6px 0 0; font-size: 19px; font-weight: 800; line-height: 24px; text-transform: uppercase; color: var(--color-accent); }
.ablauf-schritt__text  { margin: 12px 0 0; font-size: 16px; line-height: 25.6px; color: var(--color-muted); }
.ablauf-schritt__hinweis {
  margin: 14px 0 0; padding: 12px 16px;
  background: var(--color-surface); border-left: 3px solid var(--color-highlight);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px; line-height: 24px; color: var(--color-accent);
}
.ablauf-schritt .mehr { display: inline-block; margin-top: 14px; }

/* Nur mit JavaScript: der Schritt im Blickfeld tritt hervor, die anderen
   treten zurueck. Die Klasse `js-schritte` setzt marke.js selbst — ohne
   Skript greift keine dieser Regeln. */
/* G-21  FEHLER: Die Abblendung machte drei von vier Schritten unlesbar.
   `opacity: .55` auf den ganzen Schritt legt sich auch über die Schrift.
   Aus #666666 auf Weiß (5,74:1) wird dadurch rechnerisch #A6A6A6 — rund
   2,6:1 und damit klar unter den 4,5:1, die WCAG AA verlangt. Wer die
   Liste überfliegen wollte, statt sie Schritt für Schritt zu scrollen,
   las drei Viertel des Abschnitts in Hellgrau auf Weiß.

   Gefunden hat das keine Prüfung: pruefe-breite-und-kontrast.mjs liest
   `getComputedStyle(el).color` und prüft `opacity === '0'`. Eine
   Teildeckung am ELTERNELEMENT verrechnet es nicht — für das Werkzeug
   stand dort weiterhin sattes #666666.

   Der Fokus-Effekt bleibt, er wandert nur von der Schrift auf die
   Randmarkierung: Nummer und Linie treten zurück, der Text bleibt in
   jedem Zustand voll lesbar. Die Aufmerksamkeit lenkt jetzt die Farbe,
   nicht die Sichtbarkeit. */
.js-schritte .ablauf-schritt { opacity: 1; }
.js-schritte .ablauf-schritt__nr {
  background: var(--color-white); border-color: var(--color-border);
  color: var(--color-meta); opacity: .75;
}
.js-schritte .ablauf-schritt.ist-dran { border-left-color: var(--color-primary-text); }
.js-schritte .ablauf-schritt.ist-dran .ablauf-schritt__nr {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-white); opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .js-schritte .ablauf-schritt { opacity: 1; transition: none; }
  .ablauf-schritt__nr { transition: none; }
}
@media (max-width: 999px) {
  .ablauf-scroll__karte { margin-inline: 16px; }
  .ablauf-schritt { padding-left: 52px; padding-bottom: 32px; }
}

/* =========================================================================
   A-9 — FAQ-Seite (20.08.2026)
   ========================================================================= */
.faq-kopf { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; margin-bottom: 48px; }
@media (min-width: 1000px) { .faq-kopf { grid-template-columns: 1fr 320px; gap: 40px; } }
.faq-themen__zahl {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--color-knopf); color: var(--color-white);
  font-size: 12px; font-weight: 700; line-height: 18px;
}
.faq-suche input[type="search"] {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px;
  color: var(--color-text); background: var(--color-white);
  border: 1px solid var(--color-input-border); border-radius: var(--radius);
}
.faq-suche input[type="search"]:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.faq-suche__treffer { margin: 8px 0 0; min-height: 22px; font-size: 14px; line-height: 22px; color: var(--color-meta); }

/* Gruppentitel deutlich GROESSER als die Fragen darunter (28 gegen 18,7 px):
   vorher standen 20-px-Titel neben 18,7-px-Fragen — auf einer Zeile Abstand
   war die Hierarchie kaum lesbar, die Seite wirkte gequetscht (Julian,
   21.08.2026). Mehr Luft zwischen den Gruppen leistet die Gliederung mit. */
.faq-gruppe + .faq-gruppe { margin-top: 88px; }
.faq-gruppe__titel {
  margin: 0 0 28px; padding-bottom: 16px;
  border-bottom: 2px solid var(--color-primary);
  font-size: 28px; font-weight: 800; line-height: 36px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--color-accent);
}
@media (max-width: 700px) {
  .faq-gruppe + .faq-gruppe { margin-top: 64px; }
  .faq-gruppe__titel { font-size: 23px; line-height: 30px; }
}
.faq-leer { margin: 32px 0 0; font-size: 17px; line-height: 27px; color: var(--color-muted); }

.faq-rest {
  display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center;
  margin-top: 64px; padding: 40px 36px;
  background: var(--color-surface); border-radius: var(--radius-lg);
}
@media (min-width: 1000px) { .faq-rest { grid-template-columns: 1fr auto; gap: 48px; } }
@media (max-width: 700px)  { .faq-rest { padding: 28px 24px; } }

/* Der Abstand von 50 px zwischen zwei Fragen ist am Original gemessen — dort
   standen zehn Fragen in EINER Liste. Auf der gruppierten Seite (18 Fragen,
   vier Bloecke mit eigener Ueberschrift) zieht er die Seite unnoetig lang;
   die Gruppentitel uebernehmen die Gliederung, die vorher der Abstand leisten
   musste. Innerhalb einer Gruppe deshalb 22 px. */
.faq-gruppe .faq__item { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--color-border); }
.faq-gruppe .faq__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* =========================================================================
   A-12 — Fachbereichs- und Behandlungsseiten (20.08.2026)
   ========================================================================= */

/* Kopfband mit Foto. Aufbau wie `.hero-360--bild`, nur flacher: eine
   Unterseite braucht keinen 440-px-Kopf, sie soll schnell beim Text sein. */
.bereich-kopf--bild {
  position: relative; isolation: isolate;
  background-size: cover; background-repeat: no-repeat;
  background-color: var(--color-surface);
  padding-block: 72px;
}
.bereich-kopf--bild::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 46%, rgba(255,255,255,.42) 74%, rgba(255,255,255,.10) 100%);
}
.bereich-kopf--bild > .container { position: relative; z-index: 2; }
@media (max-width: 899px) {
  .bereich-kopf--bild::before { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 60%, rgba(255,255,255,.86) 100%); }
}
.bereich-kopf__inhalt { max-width: 720px; }
.bereich-kopf__h1 { font-size: 40px; line-height: 52px; margin-top: 0; }
@media (max-width: 700px) { .bereich-kopf__h1 { font-size: 30px; line-height: 40px; } }
.bereich-kopf .breadcrumb { margin-bottom: 20px; font-size: 14px; }

/* Zwei Spalten: Text und die mitlaufende Karte. */
.bereich-layout { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .bereich-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } }
.bereich-layout > * { min-width: 0; }
.bereich-layout .bereich-inhalt { max-width: 720px; }

.bereich-karte {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius); padding: 28px 26px;
  box-shadow: var(--shadow);
}
@media (min-width: 1000px) { .bereich-karte { position: sticky; top: 150px; } }
.bereich-karte__titel {
  margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-primary-text);
}
.bereich-karte__liste { margin: 0; }
.bereich-karte__liste dt {
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--color-meta); margin-top: 16px;
}
.bereich-karte__liste dt:first-child { margin-top: 0; }
.bereich-karte__liste dd { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--color-accent); }
.bereich-karte__liste dd a { color: var(--color-primary-text); }
.bereich-karte__aktionen { display: grid; gap: 10px; margin-top: 24px; }
.bereich-karte__aktionen .btn { width: 100%; }

/* Aufzählungen als Häkchen-Raster statt als Punkte untereinander.
   Kacheln bewusst mit Luft (14/18 px Polster, 16-px-Schrift): die erste
   Fassung war mit 15-px-Schrift und 10-px-Polster „sehr klein und
   gequetscht" (Julian, 21.08.2026). Der Haken sitzt in einer weichen
   Farbscheibe und ist vertikal MITTIG — die alte feste top-Position brach
   bei zweizeiligen Einträgen aus der Achse. */
.bereich-inhalt .haken-raster {
  display: grid; gap: 14px 18px; grid-template-columns: 1fr;
  margin: 0 0 28px; padding: 0; list-style: none;
  /* [K] 15.09.2026 — alle Zeilen gleich hoch. Vorher richtete sich jede Zeile
     nach ihrem laengsten Eintrag: ein einzeiliger Punkt ergab eine flache
     Kachel, ein zweizeiliger eine hohe, und die Felder fluchteten nicht.
     `1fr` auf den impliziten Zeilen gibt allen Kacheln dieselbe Hoehe. */
  grid-auto-rows: 1fr;
}
@media (min-width: 700px) { .bereich-inhalt .haken-raster { grid-template-columns: 1fr 1fr; } }
.bereich-inhalt .haken-raster li {
  position: relative; display: flex; align-items: center; min-height: 56px;
  padding: 14px 18px 14px 58px; margin: 0;
  background: var(--color-surface); border-radius: var(--radius);
  font-size: 16px; line-height: 25px; color: var(--color-accent);
}
.bereich-inhalt .haken-raster li::before {
  content: ''; position: absolute; left: 16px; top: 50%;
  width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: rgba(0, 159, 227, .14);
}
.bereich-inhalt .haken-raster li::after {
  content: ''; position: absolute; left: 24px; top: 50%;
  width: 12px; height: 7px; margin-top: -5px;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}

/* Verwandte Seiten als Karten. */
.unterkarten { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px)  { .unterkarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .unterkarten { grid-template-columns: repeat(3, 1fr); } }
.unterkarte a {
  display: block; height: 100%; background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 22px 22px 20px; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.unterkarte a:hover, .unterkarte a:focus-visible {
  border-color: var(--color-primary-text); box-shadow: var(--shadow);
  transform: translateY(-3px); text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .unterkarte a:hover { transform: none; } }
.unterkarte__kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-primary-text); margin-bottom: 6px;
}
.unterkarte__titel { display: block; font-size: 18px; font-weight: 800; line-height: 24px; color: var(--color-card-title); }
.unterkarte__text  { display: block; margin-top: 10px; font-size: 15px; line-height: 23px; color: var(--color-muted); }
/* „Mehr erfahren →" macht die Karte als Weg erkennbar — vorher endete sie
   mit einem abgerissenen Satz und ohne Handlungshinweis (21.08.2026).
   Der Pfeil rueckt beim Hover nach, die Karte hebt sich ohnehin. */
.unterkarte__mehr {
  display: block; margin-top: 14px;
  font-size: 14px; font-weight: 700; letter-spacing: .3px;
  color: var(--color-primary-text);
}
.unterkarte a:hover .unterkarte__mehr { text-decoration: underline; }
/* C-2: die herausgestellten Wege (Säuglings- und Erwachsenenosteopathie,
   Personaltraining) sollen nicht in der Liste verschwinden. */
.unterkarte--gross a { border-left: 3px solid var(--color-primary); background: var(--color-white); }
@media (min-width: 1000px) { .unterkarte--gross { grid-column: span 1; } }
.unterkarte--gross .unterkarte__titel { font-size: 20px; line-height: 26px; }

.weiterweg--breit { max-width: 820px; }

/* Zwischenüberschriften, die auf der Altseite als Absatz gesetzt waren. */
.bereich-inhalt .bereich-zwischentitel {
  margin: 32px 0 12px; font-size: 19px; font-weight: 800; line-height: 26px;
  color: var(--color-primary-text);
}
.bereich-inhalt .bereich-zwischentitel:first-child { margin-top: 0; }
/* Die Brotkrume trennt mit einem eigenen <span>; der Leerraum darin faellt
   beim Rendern weg, deshalb der Abstand als Regel statt als Leerzeichen. */
.breadcrumb span[aria-hidden] { margin-inline: 4px; }

/* Tipp-Flächen in Fliesstext: dieselbe Lösung wie beim Einwilligungs-Kästchen
   (A-11). Das Polster vergrössert die Fläche, der gleich grosse negative
   Aussenabstand nimmt der Zeile wieder, was das Polster ihr geben würde —
   sonst reisst der Zeilenabstand an dieser einen Zeile auf.
   Gemessen bei 320 px: „Heilpraxis" in der Karte 20 px, „Karriereseite" im
   Hinweistext 20 px, die beiden Links im Video-Hinweis 16 bzw. 18 px. */
.bereich-karte__liste dd a,
.hinweis-klein a { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* Im Video-Hinweis ist die Schrift kleiner (12/18 px auf dem Handy), 12 px
   Polster ergaeben dort nur 42 px — gemessen von Gate 3. Deshalb 14 px. */
.video-consent__hinweis a { display: inline-block; padding-block: 14px; margin-block: -14px; }

/* Auswahlfelder in Safari/WebKit: dort ignoriert das native Bedienelement
   Polster UND `min-height` und ist nur **26 px** hoch (gemessen auf /kontakt
   in WebKit; in Chromium sind es 48 px). Auf dem iPhone ist das eine zu
   kleine Tipp-Flaeche. Nur mit `appearance: none` laesst WebKit die eigene
   Hoehe zu — dann fehlt aber der Pfeil, deshalb einer als Hintergrundbild.
   Es ist ein Daten-URI, also kein zusaetzlicher Aufruf und mit der strengen
   Regel `img-src 'self' data:` vereinbar. */
.form select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23545454' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* =========================================================================
   Bildfokus-Korrekturen (21.08.2026) — Koepfe lagen im Beschnitt.
   Die Team-Fotos tragen die Koepfe im oberen Drittel; 'center' schnitt sie
   in den 550-900px-Baendern an der Stirn ab (je Band gemessen). Zwei Klassen
   im Waehler und ans Dateiende — wie bei .sektion--bild.ov-faq (Konvention).
   ========================================================================= */
/* 21.08.2026, Runde 3: Diese beiden Bänder zeigen jetzt die `-band`-Zuschnitte
   (Köpfe mittig). Die hier zuvor stehenden Prozentwerte 8 % / 30 % stammten aus
   Runde 2 und würden den fertigen Ausschnitt wieder verschieben — `center` ist
   bei einer Band-Variante immer der richtige Wert. */
.sektion--bild.ov-karriere,
.sektion--bild.ov-karte    { background-position: center; }

/* =========================================================================
   Bildbänder: Bandhöhe an die Breite koppeln (21.08.2026, Runde 3)
   ------------------------------------------------------------------------
   Der Fehler, den das hier behebt (Julian, 21.08.: „schneidet immer noch den
   Kopf des Kindes ab"): Bei FESTER Bandhöhe schrumpft der sichtbare Anteil
   des Fotos, je breiter der Bildschirm wird. Gemessen an /faq: 1440 px zeigen
   46,5 % der Bildhöhe, 1920 px nur noch 34,9 %, 2560 px 26 %. Ein einzelner
   `background-position`-Wert kann das nicht auffangen — nachgerechnet über
   1024–2560 px gab es für 9 von 10 Bändern GAR KEINEN Wert, bei dem kein Kopf
   den Rand kreuzt. Runde 2 hat deshalb nur Symptome verschoben.

   Die Lösung hat zwei Hälften, die zusammengehören:
   1. Höhe = fester Anteil der Breite  ->  das Band hat auf JEDER Breite
      dasselbe Seitenverhältnis (34vw = 1:2,94).
   2. Dazu ein Foto im passenden Zuschnitt (`*-band.webp`, 1:2,8, Köpfe mittig
      mit >=7 % Rand, erzeugt aus dem Original).
   Damit sind rechnerisch 95 % der Zuschnitthöhe sichtbar, mittig — die Köpfe
   liegen mit Sicherheitsabstand innerhalb, unabhängig von der Fensterbreite.
   `background-position` bleibt deshalb schlicht `center`; die alte Wertetabelle
   je Foto ist ersatzlos entfallen.

   Unter ~1265 px greift der Mindestwert: das Band wird dann relativ höher als
   1:2,94, das Foto also seitlich beschnitten statt oben/unten — Köpfe bleiben
   vollständig. Zwei Klassen im Wähler und ans Dateiende (Konvention, siehe
   .sektion--bild.ov-faq).
   ========================================================================= */
@media (min-width: 900px) {
  .hero-360.hero-360--bild        { min-height: max(460px, 34vw); }
  .bereich-kopf.bereich-kopf--bild { min-height: max(430px, 32vw); display: flex; align-items: center; }
  .bereich-kopf.bereich-kopf--bild > .container { width: 100%; }
}
.hero-360.hero-360--bild,
.bereich-kopf.bereich-kopf--bild { background-position: center; }

/* =========================================================================
   Seitenfuß, neu gebaut (21.08.2026, Runde 3)
   ------------------------------------------------------------------------
   Julian: „Mir gefällt der Footer gar nicht … die Social-Media-Icons sieht man
   kaum, weil das grau auf grau ist." Nachgemessen: #69727D auf #60656F sind
   **1,20 : 1**. WCAG 1.4.11 verlangt für Bedienelemente 3 : 1 — der Wert kam
   aus der Vorlage und war dort schon falsch.

   Was dieser Block anders macht:
   • Symbole in Weiß auf einer aufgehellten Scheibe -> rund 5 : 1 statt 1,2 : 1,
     dazu 48 px Scheibe in einer 54-px-Tippfläche (Touch-Ziel bleibt erfüllt).
   • Vier Spalten mit dem, wonach in einer Praxis gesucht wird: Adresse,
     Telefon, Öffnungszeiten, Seitenübersicht. Vorher trugen 1076 px Fußbreite
     nur ~230 px Inhalt, der Rest war Loch.
   • Titel in Weiß mit gelber Akzentlinie darunter — gelbe SCHRIFT wäre auf
     diesem Grund nur 3,87 : 1 und damit für 13-px-Versalien zu schwach.
   • Eigene Unterzeile auf abgedunkeltem Grund für Copyright, Rechtsseiten und
     den Hinweis nach Art. 50 KI-VO (der auf der Seite komplett fehlte).
   Die alten `.footer-360__*`-Regeln weiter oben sind damit unbenutzt; sie
   bleiben nur stehen, um die Vorlagen-Messwerte nachvollziehbar zu halten.
   ========================================================================= */
.site-footer { padding-block: 0; }

.fuss {
  display: grid; gap: 40px; grid-template-columns: 1fr;
  padding-block: 64px 56px; align-items: start;
}
@media (min-width: 760px)  { .fuss { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; } }
@media (min-width: 1080px) { .fuss { grid-template-columns: 1.35fr 1fr 1.25fr .85fr; gap: 56px 44px; padding-block: 76px 60px; } }

.fuss__logo img { width: 200px; height: auto; }
.fuss__claim {
  margin: 20px 0 0; max-width: 34ch;
  font-size: 16px; line-height: 27px; color: rgba(255,255,255,.9);
}

/* Spaltentitel: klein, ruhig, mit einer kurzen Akzentlinie als Trenner. */
.site-footer .fuss__titel {
  margin: 0 0 20px; padding-bottom: 12px; position: relative;
  font-family: inherit; font-size: 13px; line-height: 20px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--color-white);
}
.site-footer .fuss__titel::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 3px; border-radius: 2px; background: var(--color-highlight);
}

/* Kontaktspalte ---------------------------------------------------------- */
.fuss__adresse { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.fuss__adresse > span { font-size: 16px; line-height: 27px; color: rgba(255,255,255,.9); }
.site-footer .fuss__zeile {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; font-size: 16px; line-height: 24px; color: var(--color-white);
}
.fuss__zeile:first-of-type { margin-top: 14px; }
.fuss__ikon { width: 17px; height: 17px; flex: none; fill: var(--color-highlight); }
.site-footer .fuss__weg {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--color-white);
}
.site-footer .fuss__weg:hover, .site-footer .fuss__weg:focus-visible { text-decoration: underline; }

/* Öffnungszeiten --------------------------------------------------------- */
.fuss__zeiten {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  font-size: 16px; line-height: 26px;
}
.fuss__zeiten dt { font-weight: 700; color: var(--color-white); white-space: nowrap; }
.fuss__zeiten dd { margin: 0; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuss__notiz {
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14px; line-height: 23px; color: rgba(255,255,255,.85);
}
.fuss__notiz strong { color: var(--color-white); }

/* Seitenübersicht -------------------------------------------------------- */
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.site-footer .fuss__liste a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 16px; line-height: 24px; color: rgba(255,255,255,.92);
}
.site-footer .fuss__liste a:hover, .site-footer .fuss__liste a:focus-visible {
  color: var(--color-white); text-decoration: underline;
}

/* Symbole: das eigentliche Ärgernis ------------------------------------- */
.fuss__social { display: flex; gap: 12px; margin-top: 26px; }
/* Abrechnungswege — schliesst die Luecke unter den Symbolen mit einer Angabe,
   die vor dem Erstkontakt wirklich gesucht wird. */
.fuss__kassen {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14px; line-height: 23px; color: rgba(255,255,255,.85);
}
.site-footer .fuss__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  color: var(--color-white);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.site-footer .fuss__social a:hover, .site-footer .fuss__social a:focus-visible {
  background: var(--color-white); border-color: var(--color-white);
  color: var(--color-footer); transform: translateY(-2px); text-decoration: none;
}
.fuss__social svg { width: 24px; height: 24px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-footer .fuss__social a { transition: none; }
  .site-footer .fuss__social a:hover { transform: none; }
}

/* Unterzeile ------------------------------------------------------------- */
.fuss-unten { background: rgba(0,0,0,.20); }
.fuss-unten__inhalt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  padding-block: 22px;
}
.fuss-unten__recht { margin: 0; font-size: 14px; line-height: 24px; color: rgba(255,255,255,.86); }
.fuss-unten__nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer .fuss-unten__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; line-height: 24px; color: rgba(255,255,255,.92);
}
.site-footer .fuss-unten__nav a:hover, .site-footer .fuss-unten__nav a:focus-visible {
  color: var(--color-white); text-decoration: underline;
}
/* Hinweis nach Art. 50 KI-VO: genau einmal, dezent, dauerhaft sichtbar. */
.fuss-unten__ki {
  display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto;
  font-size: 13px; line-height: 21px; color: rgba(255,255,255,.78);
}
.fuss-unten__ki img { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) {
  .fuss-unten__inhalt { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fuss-unten__ki { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Kopfbaender und Bildsektionen: kleinere Datei fuer kleine Fenster
   (15.09.2026)

   Ein Hintergrundbild kennt kein `srcset`. Die Baender liegen 1920 px breit
   vor und gingen bisher auch an Telefone — obwohl dort nie mehr als rund
   400 CSS-Pixel dargestellt werden. Weil das Kopfband auf jeder Seite das
   groesste Element ist, war das genau der Wert, den Google als Ladezeit misst.

   Die beiden Dateien setzt `bild_hintergrund_style()` als Variablen in den
   Inline-Style; umgeschaltet wird hier. Grenze 760 px: darunter liegen die
   Telefone (bis 430 CSS-Pixel, bei dreifacher Dichte 1290 echte Punkte — die
   1200er-Stufe deckt das), darueber beginnt das zweispaltige Layout.

   Fehlt eine 1200er-Datei, traegt `--bild-klein` dasselbe Bild wie
   `--bild-gross`, das Ergebnis ist dann das alte Verhalten.
   -------------------------------------------------------------------------- */
.hero-360--bild,
.sektion--bild,
.bereich-kopf--bild {
  background-image: var(--bild-gross);
}
@media (max-width: 759px) {
  .hero-360--bild,
  .sektion--bild,
  .bereich-kopf--bild {
    background-image: var(--bild-klein, var(--bild-gross));
  }
}

/* --------------------------------------------------------------------------
   Silbentrennung: nur lange Woerter (15.09.2026)

   `hyphens: auto` weiter oben ist noetig — ohne Trennung schiebt
   „Triggerpunktbehandlung" bei 320 px die ganze Seite zur Seite. Der Browser
   trennt damit aber auch dort, wo es nicht noetig ist: Auf `/kurse` stand am
   Telefon „Unsere Woche auf ei-nem Blick", und in einer 32-px-Ueberschrift
   faellt so ein Trennstrich sofort auf.

   `hyphenate-limit-chars: 8 4 3` heisst: erst ab acht Zeichen trennen, und
   dann nur, wenn mindestens vier Zeichen vor und drei nach dem Strich bleiben.
   „einem" (5) bleibt damit ganz, „Triggerpunktbehandlung" (22) wird weiter
   getrennt.

   Browser ohne Unterstuetzung ignorieren die Zeile und verhalten sich wie
   bisher — die Regel kann also nichts kaputt machen.
   -------------------------------------------------------------------------- */
.h-hero, .h-sektion, .h-kurs, .kar-h3, .leistung__titel, .hinweis__titel,
.grund__titel, .schritt__titel, .person__name, .faq__q,
.legal h1, .legal h2, .legal h3, .legal p, .legal li {
  hyphenate-limit-chars: 8 4 3;
}

/* G-19  In den GROSSEN Überschriften erst ab zwölf Zeichen trennen.
   Die Grenze 8 4 3 trennt „THERAPIE" (genau acht Zeichen) zu „THERA-PIE".
   In der 36-px-Zeile der Startseite stand am Telefon also ein Trennstrich
   mitten im Markennamen — in der ersten Zeile, die ein Besucher sieht.

   Die Trennung bleibt, sie setzt nur später ein: „Triggerpunktbehandlung"
   (22) und „Terminvereinbarung" (18) werden weiter getrennt, und genau
   dafür ist die Regel am 15.09. eingeführt worden. Wörter zwischen acht
   und elf Zeichen — THERAPIE, KESSELSDORF, Logopädie — bleiben ganz.
   Sie passen bei 320 px in eine Zeile; nachgemessen, nicht geschätzt.

   Nur für die drei großen Stufen. Kartentitel und Rechtstexte behalten
   die enge Grenze: dort ist die Schrift klein, der Platz knapp und ein
   Trennstrich fällt kaum auf. */
.h-hero, .h-sektion, .h-kurs {
  hyphenate-limit-chars: 12 5 4;
}

/* =========================================================================
   Kursportal (15.09.2026) — Karte mit Gruppe, Plaetzen und Preis; Schritt 3
   „Bezahlung" mit je einem Block pro Kurs. Mit JavaScript ist nur der Block
   des gewaehlten Kurses sichtbar (.is-aktiv), ohne JavaScript stehen alle
   Bloecke untereinander (.ohne-js bleibt am Container) — die Seite ist so
   auch ohne Skript vollstaendig bedienbar.
   ========================================================================= */
.kursplan__voll { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--color-surface); font-size: 12px; font-weight: 700; color: var(--color-meta); }
.kurswahl__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.kurswahl__badge { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--color-knopf); color: var(--color-white); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.kurswahl__badge--reha { background: var(--color-accent); }
.kurswahl__plaetze { font-size: 13px; font-weight: 700; color: var(--color-primary-text); }
.kurswahl__plaetze--voll { color: var(--color-meta); }
.kurswahl__preis { display: block; margin-top: 10px; font-size: 18px; font-weight: 800; color: var(--color-accent); }
/* --color-meta (#888) ergibt auf Weiß nur 3,54:1 und liegt damit unter den
   4,5:1, die WCAG AA für Text dieser Größe verlangt. Seit dem 18.09. steht
   hier mehr als „inkl. MwSt.": Umfang und Steuerangabe des Kurses. */
.kurswahl__preis-info { font-size: 12px; font-weight: 400; color: var(--color-muted); }

.buchung__box { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; }
@media (max-width: 599px) { .buchung__box { padding: 20px; } .buchung__box > div > div:first-child { grid-template-columns: 1fr !important; } }

.zahlung { display: grid; gap: 16px; }
.zahlung__kurs { margin: 0; padding: 24px 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); min-width: 0; }
.zahlung__legend { padding: 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--color-primary-text); }
.buchung:not(.ohne-js) .zahlung__kurs:not(.is-aktiv) { display: none; }
.buchung:not(.ohne-js) .zahlung__legend { display: none; }
.zahlung__hinweis { margin: 0 0 16px; padding: 14px 18px; border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-surface); font-size: 15px; line-height: 24px; color: var(--color-muted); }
.zahlung__hinweis--voll { border-left-color: var(--color-accent); }
.zahlung__frage { margin: 20px 0 10px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-accent); }
.zahlung__frage:first-of-type { margin-top: 0; }
.zahlung__optionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zahlung__option { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 2px solid var(--color-border); border-radius: var(--radius); cursor: pointer; background: var(--color-white); min-height: 48px; }
.zahlung__option:hover { border-color: var(--color-primary-soft); }
.zahlung__option:has(input:checked) { border-color: var(--color-primary-text); box-shadow: 0 6px 12px -4px rgba(0, 159, 227, .2); }
.zahlung__option:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.zahlung__option input { flex: none; margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--color-primary-text); }
.zahlung__option-text { flex: 1 1 auto; font-size: 15px; line-height: 23px; color: var(--color-accent); min-width: 0; }
.zahlung__option-info { display: block; font-size: 14px; line-height: 21px; color: var(--color-muted); font-weight: 400; }
.zahlung__option { flex-wrap: wrap; }
.zahlung__option-preis { flex: none; font-size: 17px; font-weight: 800; color: var(--color-accent); white-space: nowrap; text-align: right; }
/* Steuerzusatz und „keine Zahlung online“ unter den Betrag: als Teil der
   nowrap-Spalte haben sie am Telefon die Seite nach rechts geschoben. */
.zahlung__option-steuer { display: block; font-size: 13px; line-height: 19px; font-weight: 400; color: var(--color-muted); white-space: normal; }
/* Am Telefon rutscht die Preisspalte unter den Text. Dann fluchtet sie mit
   ihm statt rechts zu kleben — 32 px sind Radio (18) plus Abstand (14). */
@media (max-width: 599px) {
  .zahlung__option-preis { width: 100%; text-align: left; padding-left: 32px; margin-top: 2px; }
}
.zahlung__kurs .form__group--check { margin-top: 16px; }
.zahlung__kurs .form__group--check[hidden] { display: none; }
@media (max-width: 599px) { .zahlung__kurs { padding: 18px; } }

/* =========================================================================
   Gestaltungsrunde, zweite Runde (18.09.2026) — die Unterseiten, die
   42 Bereichsseiten und der Fuß. Die erste Runde (G-1 bis G-38) hat die
   Startseite und die seitenübergreifenden Bauteile erfasst; alles hier
   sind die Stellen, die dabei durchgerutscht sind.

   Der Block steht bewusst am DATEIENDE. Alles davor wird von den beiden
   Nachtragsblöcken („Nachjustierung aus Gate 7", Runden A-5/A-6/A-10)
   überschrieben — daran sind am 18.09. drei Änderungen nacheinander
   wirkungslos geblieben.
   ========================================================================= */

/* G-39  Sektionsköpfe der Unterseiten.
   Zehn Abschnitte auf /ueber-uns, /kurse und /leistungen trugen ihren Kopf
   als <div style="max-width:760px"> bzw. 820px im Markup. Bei 1140 px
   Containerbreite blieben dadurch je 320 bis 380 px rechts ungenutzt —
   dasselbe Muster, das auf der Startseite G-11 behoben hat, nur nie auf die
   Unterseiten übertragen. Die Einleitung stand jeweils SCHMAL UNTER der
   Überschrift statt daneben.
   `--klein` hält die 26px/34px, die vorher als Inline-Stil am <h2> hingen:
   dieselbe Größe wie bisher, nur nicht mehr 14-mal einzeln im Markup. */
.h-sektion--klein { font-size: 26px; line-height: 34px; }

/* G-40  Das Loch rechts unten in den Haken-Listen der Bereichsseiten.
   Gemessen über alle 42 Seiten: 56 Haken-Listen, davon 26 mit ungerader
   Anzahl. Im Zweispalter steht deren letzter Eintrag allein links und
   daneben eine leere Kachelfläche — bei einer Liste mit nur EINEM Eintrag
   (kommt vor) ist die halbe Breite leer. Derselbe Fall wie G-12 und G-15
   auf der Startseite, dort über die mittige letzte Reihe gelöst. Hier
   passt das Spannen besser: eine Aufzählung liest sich von links, ein
   mittig gerückter Punkt bräche die Haken-Flucht. */
@media (min-width: 700px) {
  .bereich-inhalt .haken-raster > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* G-41  Die Haken-Kacheln waren zu hoch für ihren Inhalt.
   56 px Mindesthöhe und 14 px Polster für einen einzeiligen Eintrag wie
   „Fango": eine Liste mit 14 Punkten baute damit rund 560 px auf und las
   sich als graue Wand. Der Text bleibt bei 16px/25px — nur die Luft um ihn
   herum schrumpft. Dafür bekommt die Liste nach OBEN mehr Abstand: sie ist
   eine eigene Gruppe im Text und soll nicht am Absatz davor kleben (G-3,
   derselbe Gedanke eine Ebene tiefer). */
.bereich-inhalt .haken-raster { gap: 10px 16px; margin: 8px 0 32px; }
.bereich-inhalt .haken-raster li { min-height: 48px; padding: 11px 18px 11px 52px; }
.bereich-inhalt .haken-raster li::before { left: 14px; width: 26px; height: 26px; margin-top: -13px; }
.bereich-inhalt .haken-raster li::after  { left: 21px; }

/* G-42  G-13 nachgezogen: zwei Kartenbauteile waren flach geblieben.
   G-13 hat am 18.09. den Ruhe-Schatten eingeführt, weil es am Telefon kein
   :hover gibt und jede Karte dort flach blieb. Die Regel traf aber nur
   `.leistung`. `.unterkarte` (das Kartenraster am Fuß JEDER der 42
   Bereichsseiten) und `.dach__link` (die Fachbereichs-Kacheln auf
   /ueber-uns und /leistungen) haben ihren Schatten weiter erst bei :hover
   bekommen — auf dem Telefon also nie. */
.unterkarte a, .dach__link {
  box-shadow: var(--schatten-ruhe);
  transition: box-shadow var(--tempo-ruhig) var(--kurve),
              transform var(--tempo-ruhig) var(--kurve),
              border-color var(--tempo-ruhig) var(--kurve);
}
.unterkarte a:hover, .unterkarte a:focus-visible,
.dach__link:hover, .dach__link:focus-visible {
  box-shadow: var(--schatten-hebt);
}

/* G-43  „Mehr erfahren →" stand auf jeder Karte woanders.
   Die Karten einer Reihe sind gleich hoch, ihre Texte aber verschieden
   lang. Mit `margin-top: 14px` hing der Hinweis am Textende und sprang
   dadurch von Karte zu Karte um bis zu 23 px — gemessen auf
   /bereiche/physiotherapie. `auto` schiebt ihn auf den Kartenboden, und
   die Reihe bekommt eine gemeinsame untere Linie. */
.unterkarte a { display: flex; flex-direction: column; }
.unterkarte__mehr { margin-top: auto; padding-top: 16px; }

/* G-44  Der Fuß baute unnötig tief.
   Gemessen bei 1440 px: 584 px hoch, und die höchste Spalte war mit 360 px
   „Schnell zu" — sieben Einträge à 44 px untereinander. Die 44 px sind die
   Mindestgröße eines Ziels und bleiben; stattdessen läuft die Liste ab
   1080 px zweispaltig, was aus sieben Zeilen vier macht.
   Die vier Spuren bleiben dabei UNVERÄNDERT. Der erste Versuch hat die
   Logo-Spur verschmälert, um „Schnell zu" zu verbreitern — das machte den
   Fuß nur 27 px flacher statt 77: der Claim brach dann auf vier statt zwei
   Zeilen um, und die Logo-Spalte wurde mit 333 px selbst zur höchsten.
   Gemessen braucht die Öffnungszeiten-Spalte 284 px bei 283 px Spur, steht
   also bereits einen Pixel über ihrem Platz; sie anzuzapfen hätte den Fuß
   seitlich aufgeschoben ([[lehre-laengerer-text-sprengt-nowrap-spalte]]).
   In der vorhandenen Spur von 193 px stehen zwei Spalten à 88 px — der
   längste Eintrag („Leistungen") misst 82 px. Nachgemessen, nicht
   geschätzt: eine Zeile, die umbricht, würde die Liste über 176 px treiben. */
@media (min-width: 1080px) {
  .fuss__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}

/* G-46  Die FAQ-Seite war die längste ununterbrochene Fläche der Website.
   Gemessen bei 1440 px: 3797 px am Stück ohne Bild, Karte oder farbige
   Fläche — von direkt unter dem Kopf bis zum Seitenende. Das ist die
   längste solche Strecke aller 50 Seiten. Inhalt sind 20 Fragen in vier
   Themengruppen, alle auf weißem Grund, getrennt nur durch 88 px Abstand
   und eine 1 px starke Linie je Frage.

   (Die Werte der alten Regel stimmen weiterhin — sie wurden für „18 Fragen,
   vier Blöcke" gewählt, und es sind heute 20 in vier. Das Problem ist nicht
   ein veralteter Wert, sondern dass Abstand allein über fast vier Meter
   Bildschirmhöhe keine Gliederung trägt.)

   Die Gruppen werden deshalb zu weißen Karten auf hellem Grund. Wichtig
   dabei: der TEXT steht weiterhin auf Weiß, der Kontrast ändert sich also
   an keiner Stelle — nur der Grund unter den Karten wird grau. Die 88 px
   Abstand zwischen den Gruppen können dafür auf 24 px zurück, weil jetzt
   die Fläche trennt und nicht mehr die Lücke. Mit 28 px Innenpolster
   gleicht sich beides fast genau aus: die Seite bleibt so lang wie vorher
   und ist trotzdem in acht sichtbare Blöcke gegliedert. */
.sektion:has(.faq-liste) { background: var(--color-surface); }
.faq-gruppe {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--schatten-ruhe);
}
.faq-gruppe + .faq-gruppe { margin-top: 24px; }
@media (max-width: 700px) {
  .faq-gruppe { padding: 22px 20px; }
  .faq-gruppe + .faq-gruppe { margin-top: 16px; }
}
/* Zwei Bauteile im selben Abschnitt tragen selbst `--color-surface` und
   wären auf dem neuen Grund unsichtbar geworden: die Themen-Chips über der
   Liste und der Abschlusskasten „Deine Frage war nicht dabei?". Beide
   wechseln auf Weiß. Ohne diese zwei Zeilen verschwindet die Sprungleiste
   der Seite spurlos im Hintergrund. */
.sektion:has(.faq-liste) .kurs-chip { background: var(--color-white); }
.faq-rest { background: var(--color-white); }

/* =========================================================================
   Gestaltungsrunde, dritte Runde (18.09.2026) — Kopfbänder, Kontaktseite,
   Bildreihen, Kopfleiste, Kennzahlen (G-47 bis G-51)
   ------------------------------------------------------------------------
   Anlass: Julian, drittes Mal derselbe Wortlaut — „langweilig, stumpf,
   starr, nicht modern". Diesmal mit Blick auf den Screenshot jeder Seite
   bei 1440 und 390 px: das erste, was auf JEDER der 50 Seiten zu sehen ist,
   ist das Kopfband — und das war nach zwei Runden immer noch ein fast
   weißes Rechteck mit einem grauen Schemen rechts. Der weiße Schleier
   (G-17, G-35) hat die Schrift lesbar gemacht, indem er das Foto gelöscht
   hat. Beides zugleich geht nur, wenn die Schrift ihren EIGENEN Grund
   mitbringt.

   Alle Regeln dieser Runde stehen hier am Dateiende — Pflicht, siehe die
   Falle in Teil G von entscheidungen.md (die Nachtragsblöcke davor
   überschreiben alles).
   ========================================================================= */

/* G-47  Kopfband: die Schrift steht auf einer eigenen Fläche, das Foto
   bleibt sichtbar.
   Vorher: Schleier .96 → 0 über das ganze Band, das Foto war rechts ein
   Rest von einem Sechstel. Jetzt: der Schleier fällt auf .35 → 0 zurück
   (nur noch Sicherung gegen ein sehr helles Foto), und `__inhalt` wird zu
   einer Karte — 94 % Weiß mit Weichzeichner dahinter, Radius, Schatten.
   Das ist exakt der Aufbau des Kursbandes (G-26), das nach Runde 1 der
   stärkste Abschnitt der Startseite war. Der Kontrast hängt damit nicht
   mehr vom Foto ab: die Schrift steht immer auf Weiß.
   Ein kurzer blauer Strich über dem Kicker ersetzt die Deko, die die
   Seite sonst nirgends hat — ein Zeichen, nicht ein Muster. */
.hero-360::before { opacity: .12; }
.hero-360::after,
.hero-360--bild::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,.38) 0%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,0)   74%);
}
.bereich-kopf--bild::before {
  background: linear-gradient(100deg,
    rgba(255,255,255,.38) 0%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,0)   74%);
}
.hero-360__inhalt,
.bereich-kopf__inhalt {
  position: relative; z-index: 2;
  box-sizing: border-box;
  max-width: 760px;
  margin-block: 56px;
  padding: 44px 48px 48px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-360__inhalt::before,
.bereich-kopf__inhalt::before {
  content: ''; display: block; width: 44px; height: 4px; border-radius: 2px;
  background: var(--color-primary); margin-bottom: 18px;
}
.hero-360__inhalt .btn-reihe,
.bereich-kopf__inhalt .btn-reihe { margin-top: 32px; }
.bereich-kopf--bild { padding-block: 24px; }
.bereich-kopf__inhalt .breadcrumb { margin-bottom: 14px; }
@media (min-width: 900px) {
  .bereich-kopf.bereich-kopf--bild { min-height: max(400px, 30vw); }
}
@media (max-width: 899px) {
  .bereich-kopf--bild::before {
    background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 100%);
  }
}
@media (max-width: 700px) {
  .hero-360::after,
  .hero-360--bild::after {
    background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 100%);
  }
  .hero-360__inhalt,
  .bereich-kopf__inhalt { margin-block: 28px; padding: 26px 22px 28px; }
  .hero-360__inhalt::before,
  .bereich-kopf__inhalt::before { margin-bottom: 14px; }
  .hero-360__inhalt .btn-reihe,
  .bereich-kopf__inhalt .btn-reihe { margin-top: 24px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-360__inhalt, .bereich-kopf__inhalt { background: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* G-48  Bildreihen auf /leistungen: das Foto bekommt eine Bühne.
   Sechs Abschnitte, jeweils Text neben einem Foto — das Foto war ein
   Rechteck mit 12 px Radius und nichts sonst. Jetzt: 16 px Radius,
   Hebeschatten und dahinter eine leicht versetzte Fläche im hellen
   Markenblau (`--color-primary-soft`). Die Fläche ist Deko, kein Text,
   und braucht deshalb keinen Kontrastwert. Versatz immer nach AUSSEN
   (links stehendes Foto → nach links unten, rechts → nach rechts unten),
   damit die Textspalte frei bleibt. Nur ab 900 px; darunter stehen Foto
   und Text untereinander und der Versatz würde in den Rand laufen. */
.bild-buehne { position: relative; }
.bild-buehne > img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--schatten-hebt);
}
@media (min-width: 900px) {
  .bild-buehne::before {
    content: ''; position: absolute; z-index: 0;
    inset: 24px -20px -20px 24px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft); opacity: .55;
  }
  .bild-buehne--links::before { inset: 24px 24px -20px -20px; }
  .sektion:has(.bild-buehne) { overflow-x: clip; }
}

/* G-49  Kopfleiste: ein Knopf für den Termin.
   Am Telefon steht seit G-45 auf jeder Seite „Termin" in der festen
   Leiste — am Schreibtisch gab es nichts dergleichen; die Kopfleiste war
   sieben Textlinks. Jeder Abschnitt der Seite endet mit „Termin
   vereinbaren", nur der Ort, der immer sichtbar ist, hatte ihn nicht.
   Erst ab 1200 px: die Leiste braucht 197 (Logo) + 618 (Menü) + 24 + 24
   (Lücken) + 174 (Knopf) = 1037 px; darunter würde das Logo schrumpfen,
   das A-9 ausdrücklich verbietet. */
.header-cta { display: none; }
@media (min-width: 1200px) {
  .header-cta {
    display: inline-flex; align-items: center;
    padding: 12px 22px; min-height: 44px;
    font-size: 14px; line-height: 20px; letter-spacing: .4px;
  }
}

/* G-50  Kontaktseite: aus einer Textwand werden Karten.
   Gemessen war /kontakt die längste ununterbrochene Fläche der Website —
   4993 px ab direkt unter dem Kopf ohne Bild, Karte oder farbigen Grund.
   Praxisdaten, vier Postfächer, Öffnungszeiten, Anmeldung, Absage und
   Anfahrt standen als eine Spalte Fließtext untereinander. Jeder dieser
   Blöcke ist eine eigene Frage („Wann habt ihr offen?", „Wie sage ich
   ab?") — und bekommt jetzt eine eigene Karte. Zwölf Spuren: drei Karten
   à 4, zwei Hinweise à 6, Anfahrt über 12 mit Karte und Text nebeneinander.
   Hinweiskarten tragen den gelben Strich des Ablauf-Abschnitts der
   Startseite (dort seit A-13), damit „wichtig" überall gleich aussieht. */
.kontakt-raster { display: grid; gap: 20px; grid-template-columns: 1fr; }
.kontakt-karte {
  min-width: 0; padding: 28px 28px 30px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--schatten-ruhe);
}
.kontakt-karte__titel {
  margin: 0 0 14px; font-size: 22px; line-height: 30px; font-weight: 800;
  letter-spacing: -.2px; color: var(--color-accent);
}
.kontakt-karte address { font-style: normal; }
.kontakt-karte p { margin: 0 0 12px; }
.kontakt-karte p:last-child { margin-bottom: 0; }
.kontakt-karte .hours { width: 100%; max-width: none; border-collapse: collapse; }
.kontakt-karte .hours th, .kontakt-karte .hours td { padding: 9px 0 !important; border-bottom: 1px solid var(--color-border); }
.kontakt-karte .hours tr:last-child th, .kontakt-karte .hours tr:last-child td { border-bottom: 0; }
.kontakt-karte__notiz { margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--color-meta); }
.kontakt-mails { list-style: none; margin: 0; padding: 0; }
.kontakt-mails li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.kontakt-mails li:last-child { border-bottom: 0; }
.kontakt-mails a { display: block; font-weight: 700; overflow-wrap: anywhere; }
.kontakt-mails__wofuer { display: block; margin-top: 2px; font-size: 14px; line-height: 22px; color: var(--color-meta); }
.kontakt-karte--hinweis {
  background: var(--color-surface); border-color: transparent; box-shadow: none;
  border-left: 4px solid var(--color-highlight);
}
.kontakt-karte--hinweis ul { margin: 0 0 12px; padding-left: 20px; }
.kontakt-karte--hinweis li { margin-bottom: 6px; }
.kontakt-anfahrt { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
.kontakt-anfahrt__text p { margin: 0 0 6px; }
.kontakt-anfahrt__text ul { margin: 0 0 16px; padding-left: 20px; }
@media (min-width: 720px) {
  .kontakt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt-karte--anfahrt { grid-column: 1 / -1; }
  .kontakt-anfahrt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 1000px) {
  .kontakt-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .kontakt-karte { grid-column: span 4; }
  .kontakt-karte--hinweis { grid-column: span 6; }
  .kontakt-karte--anfahrt { grid-column: 1 / -1; }
}

/* G-51  Kennzahlen unter dem Hero der Startseite.
   Die Zahlen gibt es seit A-14 auf /ueber-uns, gezählt aus den Daten
   (Fachbereiche, Behandlungsangebote, Kurse, Google-Bewertungen). Auf
   der Startseite, wo sie am meisten tragen, fehlten sie. Eine flache
   weiße Leiste direkt unter dem Kopfband, vier Werte mit Trennlinien —
   kein zweites dunkles Band (das der Über-uns-Seite bleibt, wie es ist).
   Kein `.sektion`, damit die Nachbarschaftsregel G-32 nicht greift. */
.fakten { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.fakten__liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.fakt {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 12px; border-bottom: 1px solid var(--color-border);
}
.fakt:nth-child(odd) { border-right: 1px solid var(--color-border); }
.fakt:nth-last-child(-n+2) { border-bottom: 0; }
.fakt__wert {
  font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.5px;
  color: var(--color-primary-text);
}
.fakt__label { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--color-meta); }
@media (min-width: 900px) {
  .fakten__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fakt { padding: 26px 16px; border-bottom: 0; border-right: 1px solid var(--color-border); }
  .fakt:last-child { border-right: 0; }
}

/* G-47, Nachtrag: die Hero-Knöpfe passen nebeneinander in die Karte.
   Der Vorlagenwert von 327 px Mindestbreite je Knopf (Zeile ~1089) galt
   für einen 720 px breiten Textblock ohne Polster. In der Karte bleiben
   760 − 96 = 664 px, zwei Knöpfe brauchen 672 — der zweite rutschte auf
   der Startseite in eine eigene Zeile, auf den Unterseiten (820 px per
   Inline-Stil) nicht. Ein Knopfpaar, das mal neben-, mal untereinander
   steht, ist genau die Uneinheitlichkeit, die G-7 beseitigt hat. */
@media (min-width: 900px) {
  .hero-360__inhalt .btn-reihe .btn { min-width: 0; padding-inline: 34px; }
}
/* /leistungen setzt seinen Kopf mittig (Inline-Stil). Der Strich folgt. */
.hero-360__inhalt[style*="text-align:center"]::before { margin-inline: auto; }

/* =========================================================================
   PREISLISTE (22.09.2026) — Blocktyp 'preisliste' auf den Bereichsseiten.
   Anlass: Das Personaltraining stand mit „Konditionen auf Anfrage" auf der
   Seite; die Praxis hat die Preise am 22.09.2026 genannt. Ein Preis, den
   man erfragen muss, ist auf einer Selbstzahlerleistung eine Hürde — und
   nach § 3 PAngV gehört der Endpreis dorthin, wo das Angebot steht.

   Bewusst eine Liste, keine Tabelle: drei Spalten brechen am Telefon. Name
   und Detail stehen links untereinander, der Preis rechts daneben — das
   hält auch bei 320 px Breite, weil der Preis kurz ist.

   Steht am DATEIENDE, weil in dieser Datei spätere Regeln frühere schlagen
   (siehe Kopf und die Nachjustierungsblöcke oberhalb).
   ========================================================================= */
.preisliste {
  margin: 28px 0;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* Ruhe-Schatten wie bei den übrigen Karten seit G-13: am Telefon gibt es
     kein :hover, also muss die Karte auch unberührt als Fläche lesbar sein. */
  box-shadow: var(--schatten-ruhe);
}
.preisliste__titel {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-card-title);
}
.preisliste__posten { margin: 0; padding: 0; list-style: none; }
.preisliste__posten-eintrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.preisliste__posten-eintrag:last-child { border-bottom: 0; padding-bottom: 0; }
.preisliste__sache { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preisliste__name {
  font-weight: 600;
  color: var(--color-card-title);
}
.preisliste__detail { font-size: 14px; line-height: 20px; color: var(--color-meta); }
.preisliste__preis {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  /* Markenblau als TEXT: #0079AD, nicht #009FE3 — auf Weiß 4,84:1. */
  color: var(--color-primary-text);
  white-space: nowrap;
}
.preisliste__fussnote {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-meta);
}
@media (min-width: 720px) {
  .preisliste { padding: 32px; }
}

/* Die Preisliste steht IM Inhaltsbereich der Fachbereichsseiten und erbt
   dessen Listen- und Absatzregeln (Zeile ~865): einen blauen Punkt vor jedem
   Eintrag, 30 px Einzug und 19 px Fließtext. Im Screenshot vom 22.09.2026
   standen die Punkte vor „109 €" und die Fußnote so groß wie der Haupttext.

   `.bereich-inhalt` steht hier mit davor, weil eine Klasse allein zu schwach
   wäre: `.bereich-inhalt li::before` wiegt schwerer als `.preisliste li::before`
   — die spätere Stelle in der Datei genügt nur bei gleicher Spezifität. */
.bereich-inhalt .preisliste__posten-eintrag { padding-left: 0; margin-bottom: 0; font-size: 16px; line-height: 24px; color: var(--color-text); }
.bereich-inhalt .preisliste__posten-eintrag::before { content: none; }
.bereich-inhalt .preisliste__posten { margin: 0; }
.bereich-inhalt .preisliste__name { font-size: 17px; line-height: 25px; color: var(--color-card-title); }
.bereich-inhalt .preisliste__detail { font-size: 14px; line-height: 20px; color: var(--color-meta); }
.bereich-inhalt .preisliste__preis { font-size: 20px; line-height: 28px; color: var(--color-primary-text); }
.bereich-inhalt .preisliste__fussnote { font-size: 14px; line-height: 22px; color: var(--color-meta); margin: 16px 0 0; }
.bereich-inhalt .preisliste__titel { font-size: 20px; line-height: 28px; color: var(--color-card-title); margin: 0 0 4px; }

/* Zahlungsoption: der Text darf die Zeile nicht sprengen (22.09.2026).
   Mit `flex: 1 1 auto` teilt Flexbox die Zeilen nach der INHALTSBREITE auf —
   bei `flex-wrap: wrap` bricht ein langer Text auf eine eigene Zeile, bevor
   flex-shrink überhaupt greift. Sichtbar wurde das mit der dritten Option
   („Einzeltermin im Kurs", Hinweis auf § 20 SGB V): Radio, Beschriftung und
   Preis standen untereinander statt nebeneinander, während die beiden
   kürzeren Optionen darüber sauber in einer Zeile blieben. Kein Messwert
   hat das gemeldet — es stand im Screenshot.

   `flex-basis: 0` macht die Textspalte unabhängig von ihrer Inhaltsbreite;
   sie nimmt, was nach Radio und Preis übrig ist. Am Telefon bleibt der
   Umbruch erhalten: dort setzt die Regel oben den Preis auf `width: 100%`. */
.zahlung__option .zahlung__option-text { flex: 1 1 0; }

/* =========================================================================
   28.09.2026 — Widerrufsfunktion (§ 356a BGB): „Vertrag widerrufen" im Fuss
   jeder Seite HERVORGEHOBEN (gesetzliche Anforderung), nicht als einer von
   drei gleich aussehenden Rechtslinks.
   ========================================================================= */
.site-footer .fuss-unten__nav a.fuss-unten__widerruf {
  padding: 0 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px;
  font-weight: 700;
}

/* =========================================================================
   28.09.2026 — Befunde der Seitenpruefung vor dem Go-Live
   ========================================================================= */
/* Patientenstimmen am Telefon: Seit das Band ein dunkles Foto traegt, stand
   der graue Kopftext ohne Karte direkt darauf (kaum lesbar). Die Karte, die
   der Desktop schon hat, gilt jetzt auch mobil. */
@media (max-width: 700px) {
  .stimmen-kopf {
    max-width: 100%; background: var(--color-surface-2);
    border-radius: var(--radius-xl); padding: 28px;
  }
}
/* Danke-Seite: `.danke .btn` (Vorlage, 20 px ohne Versalien) traf auch den
   Knopf in der Kopfleiste; dort gilt der Stil aller anderen Seiten. */
.danke .site-header .btn {
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
/* Aktionsleiste am Telefon: „Termin" sass 6 px tiefer als „Anrufen"
   (Innenabstand 16 gegen 12 px). Beide mittig in derselben Hoehe. */
.aktionsleiste a { display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
/* Listen und Absaetze auf Bereichsseiten: lange Komposita wie
   „Hyperaktivitätsstörung" brachen ohne Trennstrich mitten im Wort. */
.bereich-inhalt li, .bereich-inhalt p { overflow-wrap: break-word; hyphens: auto; }
/* Kursplan am Telefon: Hinweis, dass die Tabelle seitlich weitergeht. */
.tabelle-hinweis { display: none; }
@media (max-width: 700px) {
  .tabelle-hinweis { display: block; margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--color-meta); }
}
/* FAQ-Kopf: Karte rechts, Bildausschnitt so, dass Kind und Therapeutin links
   frei stehen (vorher beide hinter der Karte, Meldung Julian 21.08.). */
@media (min-width: 900px) {
  /* Gerechnet: Personen im Bild bei 22 bis 66 % der Bildbreite. Mit Bildbreite
     125 % der Seite, rechtsbuendig, liegen beide Gesichter links von 60 %, wo
     die Karte (max. 440 px) beginnt; bei 1440 und 1920 px nachgesehen. */
  .hero-360--karte-rechts .hero-360__inhalt { max-width: 440px !important; margin-left: auto; }
  .hero-360--bild.hero-360--karte-rechts { background-size: 125% auto; background-position: right 25%; }
}