/* Entwurf 27a (Claude Design, 13.10.2026) – Startseite responsive: unter 900 px das Handy-Layout aus 25a,
   ab 900 px Desktop (Abschnitt am Ende). Quelle: design/webseite/27a/design_handoff_startseite_responsive/.
   Grün bewusst NICHT aus dem Entwurf: Knöpfe mit weißer Schrift in --bedien (#537F70), nicht #5B8C7B. */

@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-display: swap; src: url(schrift/alegreya-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url(schrift/caveat-600.woff2) format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-display: swap; src: url(schrift/alegreya-sans-500.woff2) format("woff2"); }

:root {
  --gruen-dunkel: #4A7666;
  --gruen: #537F70;                     /* Linien und Symbole – gleiches Grün wie --bedien (Andreas 2026-10-13: #5B8C7B war zu hell) */
  --bedien: #537F70;                    /* Knöpfe mit weißer Schrift: 4,53:1 – wie Buchungskalender, Entscheidung 2026-10-11 */
  --gruen-hell: #EAF3EF;
  --gruen-linie: #D9E6E0;
  --gruen-hover: #DCEBE4;               /* Hover der hellen Flächen (27a) */
  --sand: #F4F1EA;
  --sand-linie: #F0ECE4;
  --sand-rand: #E8E3D8;
  --haarlinie: #E3DCCD;
  --kopflinie: #EEEAE2;
  --fastweiss: #FDFCFA;
  --text: #3D3A36;
  --text-2: #605F59;
  --text-3: #6B665E;
  --text-4: #74736D;
  --text-5: #9B9A94;
  --titel: "Alegreya Sans", sans-serif;
  --fliess: "Segoe UI", Arial, Helvetica, sans-serif;
  --schreib: "Caveat", "Segoe Print", cursive;   /* Handschrift für „vom Verstehen her / vom Spüren her“ (Entwurf 1d) */
  /* Wellen zwischen den Modulen (Entwurf 7a/1d); Farben der Linie = --gruen */
  --welle-linie: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2025.04%20L8%2024.64%20L16%2024.18%20L24%2023.68%20L32%2023.12%20L40%2022.54%20L48%2021.93%20L56%2021.31%20L64%2020.68%20L72%2020.06%20L80%2019.45%20L88%2018.87%20L96%2018.32%20L104%2017.81%20L112%2017.35%20L120%2016.95%20L128%2016.62%20L136%2016.35%20L144%2016.16%20L152%2016.04%20L160%2016.00%20L168%2016.04%20L176%2016.16%20L184%2016.35%20L192%2016.62%20L200%2016.96%20L208%2017.36%20L216%2017.82%20L224%2018.32%20L232%2018.88%20L240%2019.46%20L248%2020.07%20L256%2020.69%20L264%2021.32%20L272%2021.94%20L280%2022.55%20L288%2023.13%20L296%2023.68%20L304%2024.19%20L312%2024.65%20L320%2025.05%20L328%2025.38%20L336%2025.65%20L344%2025.84%20L352%2025.96%20L360%2026.00%20L368%2025.96%20L376%2025.84%20L384%2025.65%20L392%2025.38%20L400%2025.04%20%22%20fill%3D%22none%22%20stroke%3D%22%23537F70%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
  --welle-weiss: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20y%3D%2220%22%20width%3D%22400%22%20height%3D%2220%22%20fill%3D%22%23F4F1EA%22%2F%3E%3Cpath%20d%3D%22M0%2020%20C%2066%2020%20133%2013%20200%2020%20S%20333%2027%20400%2020%20V40%20H0Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  --welle-linie-sand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2025.04%20L8%2024.64%20L16%2024.18%20L24%2023.68%20L32%2023.12%20L40%2022.54%20L48%2021.93%20L56%2021.31%20L64%2020.68%20L72%2020.06%20L80%2019.45%20L88%2018.87%20L96%2018.32%20L104%2017.81%20L112%2017.35%20L120%2016.95%20L128%2016.62%20L136%2016.35%20L144%2016.16%20L152%2016.04%20L160%2016.00%20L168%2016.04%20L176%2016.16%20L184%2016.35%20L192%2016.62%20L200%2016.96%20L208%2017.36%20L216%2017.82%20L224%2018.32%20L232%2018.88%20L240%2019.46%20L248%2020.07%20L256%2020.69%20L264%2021.32%20L272%2021.94%20L280%2022.55%20L288%2023.13%20L296%2023.68%20L304%2024.19%20L312%2024.65%20L320%2025.05%20L328%2025.38%20L336%2025.65%20L344%2025.84%20L352%2025.96%20L360%2026.00%20L368%2025.96%20L376%2025.84%20L384%2025.65%20L392%2025.38%20L400%2025.04%20%22%20fill%3D%22none%22%20stroke%3D%22%23537F70%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%20transform%3D%22translate%280%2C-3.5%29%22%2F%3E%3C%2Fsvg%3E");
  --welle-sand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020%20C%2066%2020%20133%2013%20200%2020%20S%20333%2027%20400%2020%20V44%20H0Z%22%20fill%3D%22%23F4F1EA%22%20transform%3D%22translate%280%2C-3.5%29%22%2F%3E%3C%2Fsvg%3E");
  --welle-sandlinie: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020%20C%2066%2020%20133%2013%20200%2020%20S%20333%2027%20400%2020%22%20fill%3D%22none%22%20stroke%3D%22%23EBE6DA%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  /* Fotokante an der Welle (Baustein .bild-welle): gleiche Kurve wie die Standardwellen (B) bzw. die Sandwelle (B um 3,5 px höher), als Maske */
  --maske-oben-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020%20C%2066%2020%20133%2013%20200%2020%20S%20333%2027%20400%2020%20V40%20H0Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --maske-oben-b35: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016.5%20C%2066%2016.5%20133%209.5%20200%2016.5%20S%20333%2023.5%20400%2016.5%20V40%20H0Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --maske-unten-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020%20C%2066%2020%20133%2013%20200%2020%20S%20333%2027%20400%2020%20V-10%20H0Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --maske-unten-b35: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016.5%20C%2066%2016.5%20133%209.5%20200%2016.5%20S%20333%2023.5%20400%2016.5%20V-10%20H0Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --breite: 40rem;                       /* bis Desktop gestaltet ist: Inhalt mittig, nicht breiter */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.neu { margin: 0; background: #fff; font-family: var(--fliess); color: var(--text); -webkit-font-smoothing: antialiased; }
.neu img { display: block; max-width: 100%; }
.neu a { color: var(--gruen-dunkel); text-underline-offset: .2em; }
.neu a:hover { color: var(--bedien); }
.neu :focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.neu :is(h1, h2, h3, p, ul, ol, blockquote, figure) { margin: 0; }
.neu :is(h1, h2, h3) { font-family: var(--titel); font-weight: 500; text-wrap: balance; }
.neu p { text-wrap: pretty; }
/* Sanfte Silbentrennung im linksbündigen Lesetext (Andreas 2026-10-31): nur lange Wörter (ab 10 Zeichen, mind. 5 vor und 4 nach
   der Trennung), damit der rechte Rand ruhiger fließt. Nicht in Mittigem, Hero, Titelsatz und Handschrift. */
.neu .modul :is(p, li) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 5 4; }
.neu .modul :is(.zentriert, .schrift-titel, .schrift-handschrift, .hero-koerper) :is(p, li),
.neu .modul-hero :is(p, li), .neu .modul p.rolle { -webkit-hyphens: manual; hyphens: manual; }
.symbol { display: block; }
.springen { position: absolute; left: -999px; }
.springen:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; }

/* ---------------------------------------------------------------- Kopfleiste */

.kopfleiste { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--kopflinie); background: #fff; transition: translate .25s ease; }
/* Runterscrollen blendet aus, Hochscrollen wieder ein (Skript in seite-neu.php) */
.kopfleiste.weg { translate: 0 -100%; }
@media (prefers-reduced-motion: reduce) { .kopfleiste { transition: none; } }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kopfleiste .marke { margin-right: auto; }
.wortmarke { font-family: var(--titel); font-weight: 500; font-size: 13px; letter-spacing: .16em; color: var(--text-3); }
.neu .kopf-termin { background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; font-size: 15px;
  padding: 12px 16px; border-radius: 12px; text-decoration: none; }
.burger > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column;
  justify-content: center; gap: 5px; padding: 0 11px; }
.burger > summary::-webkit-details-marker { display: none; }
.burger > summary span { height: 1.6px; background: var(--text); }
.burger nav { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; display: flex; flex-direction: column;
  padding: 8px 0 16px; background: #fff; border-bottom: 1px solid var(--kopflinie); box-shadow: 0 12px 24px rgb(60 50 30 / .08); }
.burger nav a { padding: 12px 22px; font-size: 17px; color: var(--text); text-decoration: none; }
/* Menü nach Vault-Sitemap: Bereiche zum Aufklappen (immer nur einer offen, S-5), darunter Einzellinks,
   Erstgespräch als Knopf, „English“ klein. Langes Menü scrollt in sich, nicht die Seite. */
.burger nav { max-height: calc(100dvh - var(--kopf-h, 69px)); overflow-y: auto; overscroll-behavior: contain; }
.menue-bereich summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; font-size: 17px; color: var(--text); }
.menue-bereich summary::-webkit-details-marker { display: none; }
.menue-bereich summary::after { content: "›"; font-size: 20px; line-height: 1; color: var(--text-5); rotate: 90deg; }
.menue-bereich[open] summary::after { rotate: -90deg; }
.menue-bereich > div { display: flex; flex-direction: column; padding: 0 0 8px; }
.burger .menue-bereich a { padding: 9px 22px 9px 38px; font-size: 16px; color: var(--text-2); }
.burger nav a[aria-current="page"] { color: var(--gruen-dunkel); font-weight: 600; }
.menue-hinweis { padding: 6px 22px 4px 38px; font-size: 14px; line-height: 1.5; color: var(--text-4); }
.burger .menue-hinweis a { padding: 0; font-size: inherit; color: var(--gruen-dunkel); text-decoration: underline; }
.burger nav .menue-erstgespraech { margin: 12px 22px 4px; padding: 14px 18px; border-radius: 12px; background: var(--bedien);
  color: #fff; font-weight: 600; text-align: center; }
.burger nav .menue-erstgespraech:hover { background: var(--gruen-dunkel); color: #fff; }
.burger nav .menue-sprache { margin-bottom: 18px; }   /* „EN“ normal groß, Luft nur zum Knopf darunter (Andreas 17.10.) */

/* ---------------------------------------------------------------- Module: strikt Weiß/Sand im Wechsel */

.modul { --modul-farbe: #fff; position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 56px max(22px, (100% - var(--breite)) / 2); background: var(--modul-farbe); }
.modul-sand { --modul-farbe: var(--sand); }
.modul-eng { padding-inline: max(16px, (100% - var(--breite)) / 2); }

/* Trenner zwischen den Modulen: Sandwelle + grüne Wellenlinie (Entwurf 7a, Claude Design 18.10.2026), ab dem zweiten Modul
   (nicht am Hero). Die Welle ragt 20 px über die Modulkante; Weiß-Modul nach Sand malt die Sandfläche mit (Rechteck). */
.modul:not(.modul-hero, .modul-seitenkopf)::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -20px; height: 40px;
  pointer-events: none; background-size: 100% 40px, 100% 40px; background-position: center; background-repeat: no-repeat;
  background-image: var(--welle-linie), var(--welle-weiss); }
.modul-hero + .modul:not(.modul-sand)::before { background-image: var(--welle-linie), none; }
.unterseite .modul-seitenkopf-start + .modul:not(.modul-sand)::before,
main:has(> .modul:last-child:not(.modul-sand)) + .fuss-neu::before { background-image: var(--welle-linie), var(--welle-sandlinie); }   /* Footer unter einem weißen Modul: dasselbe */
/* Unterseite startet mit einem weißen Modul („falsch herum“): zur grünen Linie kommt die Sandwelle – auf der Kante der übrigen Sandwellen,
   aber als Linie (etwas dunkleres Sand #EBE6DA, 2 px) hinter der grünen, nicht als Fläche (Andreas 20.10.) */
.modul-sand:not(.modul-hero, .modul-seitenkopf)::before {
  background-image: var(--welle-linie-sand), var(--welle-sand); }

.modul h2 { font-size: 29px; line-height: 1.15; }
.modul p { font-size: 16px; line-height: 1.62; color: var(--text); }   /* Fließtext dunkel (Andreas 2026-10-28: mehr Kontrast, liest sich besser) */

/* Zwei Spalten (Desktop) – am Handy lösen sich die Hüllen auf, alles steht untereinander wie in 25a */
.zweispaltig, .spalte, .hero-karte, .hero-kopf, .hero-koerper { display: contents; }
.hero-marke { display: none; }

/* Hero */
.modul-hero { padding-top: 40px; padding-bottom: 56px; }
.hero-kopf > p { line-height: normal; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); }
.modul-hero h1 { font-size: 42px; line-height: 1.04; }
.hero-koerper > p { font-size: 17px; }
.knoepfe + p > a, .tk-hinweis > a { display: inline-block; }   /* Link unter einem Knopf (z. B. „10 Minuten am Telefon“) bricht nie mitten im Text, sondern beginnt notfalls in einer neuen Zeile – überall, wo auf .knoepfe ein Absatz folgt */
/* Startseite am Handy: Wald hinter dem Hero wie im Kinesiologie-Kopf (Andreas 17.10.2026); Desktop bleibt Bambus.
   Bildhöhe fest wie dort (Kopf ≈ 1060 px hoch), sonst wäre der Wald im kürzeren Hero kleiner und blasser. */
@media (max-width: 899px) {
  .modul-hero { background: linear-gradient(180deg, rgb(255 255 255 / .35) 0, rgb(255 255 255 / .85) 560px, #fff 1010px),
      #fff url(wald-hintergrund.webp) center top / auto 1060px no-repeat; }
}

/* Einstieg übers Menü oder per Link/Anzeige: einstieg.js setzt .einstieg-menue; der Seitenkopf zeigt je eine der beiden Dachzeilen. */
.einstieg-menue .nur-landung, :root:not(.einstieg-menue) .nur-menue { display: none; }

/* Buttons */
.neu .knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.neu .button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; padding: 0 22px; background: var(--bedien); color: #fff; border-radius: 13px;
  text-align: center; text-decoration: none; font-weight: 600; font-size: 17px; }
.neu .button:hover { background: var(--gruen-dunkel); color: #fff; }
.neu .button-zweit { min-height: 54px; background: var(--gruen-hell); color: var(--gruen-dunkel); }
.neu .button-zweit:hover { background: var(--gruen-hover); color: var(--gruen-dunkel); }
.button-unterzeile { font-size: 13px; font-weight: 400; opacity: .88; }
/* Ein einzelner Knopf im Hero steht mittig in begrenzter Breite; der Text darunter ist ein gewöhnlicher Absatz */
.neu :is(.hero-koerper, .zentriert) .knoepfe > .button:only-child { flex: none; width: min(100%, 420px); margin-inline: auto; box-sizing: border-box; }

/* ::: titel – Absatz in Titelschrift wie eine Überschrift, aber ohne H2 (Schlusssatz der Startseite) */
.modul .schrift-titel { max-width: 600px; }
.modul .schrift-titel p { font-family: var(--titel); font-size: 25px; line-height: 1.3; font-weight: 500; color: var(--text); text-wrap: balance; }
@media (min-width: 900px) { .modul .schrift-titel p { font-size: clamp(25px, 2.6vw, 32px); } }

/* Chips */
.chips ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; background: #fff; border-radius: 999px; padding: 11px 16px; font-size: 16px;
  color: var(--text); text-decoration: none; }
.modul > h2 { margin-bottom: 0; }
/* Desktop etwas mehr Luft (Andreas 2026-10-31, zum Modulabstand von 20 px): unter der Überschrift und ::: titel +6, vor und nach Chips +6, Raster +10 davor und +16 danach
   (nicht in den Zellen). Band und Foto-Module haben ihr ## als Dachzeile – ausgenommen. Handy bleibt. */
@media (min-width: 900px) {
  .modul:not(.modul-band, .modul-bild-voll, .modul-bild-oben) > h2:not(:last-child),
  .modul .schrift-titel:not(:last-child) { margin-bottom: 6px; }
  .modul:not(.modul-band, .modul-bild-voll, .modul-bild-oben) > .zentriert > h2:not(:last-child) { margin-bottom: 10px; }   /* .zentriert hat 16 px Abstand statt 20 */
  .modul .chips { margin-block: 6px; }
  .modul .raster:not(.kreis) { margin-block: 10px 16px; }
}

/* „Was du hier bekommst“: zentriert, 2×2-Raster mit Haarlinien */
.modul-mitte { padding-top: 72px; padding-bottom: 80px; align-items: center; gap: 22px; text-align: center; }
.modul-mitte h2 { font-size: 27px; }
.modul-mitte .symbol { margin-inline: auto; }
.raster { align-self: stretch; position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.raster::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 1px; background: var(--haarlinie); }
.raster::after { content: ""; position: absolute; top: 50%; left: 20px; right: 20px; height: 1px; background: var(--haarlinie); }
.zelle { padding: 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.zelle h3 { font-size: 20px; line-height: 1.15; }
.zelle .symbol { width: 52px; height: 52px; }   /* etwas größer als die 44 px des Bausteins (Andreas 2026-10-31) */
/* Optisch mittig in der Zelle (Andreas 2026-10-31): das Symbol bringt oben ~10 px Weißraum aus seiner Zeichenfläche mit, daher oben
   weniger Polster als unten – sichtbar gleich viel Luft zur Linie darüber und darunter. Titel und Unterzeile rücken als Einheit zusammen. */
.zelle:has(.symbol) { padding-top: 17px; padding-bottom: 26px; }
.zelle h3 + p { margin-top: -4px; }
.zelle p { font-size: 14px; line-height: 1.45; color: var(--text); }

/* Zwei Zugänge: Grafik skaliert mit der Breite (gezeichnet auf 346 px) */
.zwei-zugaenge { --u: calc(100cqw / 346); position: relative; container-type: inline-size; width: 100%;
  max-width: 420px; margin: 8px auto; aspect-ratio: 346 / 318; }
.zwei-zugaenge > * { position: absolute; }
.zz-bogen { inset: 0; width: 100%; height: 100%; }
.zz-titel { top: 0; width: calc(170 * var(--u)); text-align: center; font-family: var(--titel);
  font-size: calc(15 * var(--u)); line-height: 1.2; color: var(--gruen-dunkel); }
.zz-titel.zz-links { left: calc(-2 * var(--u)); }
.zz-titel.zz-rechts { left: calc(178 * var(--u)); }
.neu .zz-bild { top: calc(40 * var(--u)); width: calc(128 * var(--u)); height: calc(128 * var(--u)); border-radius: 50%;
  object-fit: cover; object-position: center 25%; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gruen); }
.zz-bild.zz-links { left: calc(19 * var(--u)); }
.zz-bild.zz-rechts { left: calc(199 * var(--u)); }
.zz-mitte { left: 50%; top: calc(256 * var(--u)); translate: -50% 0; white-space: nowrap; font-family: var(--titel);
  font-size: calc(32 * var(--u)); line-height: 1.1; font-weight: 500; }
.zweispaltig:has(.zwei-zugaenge) > .spalte:last-child > p { font-size: 15px; color: var(--text); }

/* Rechtstext (Vertrag, Patienteninformation): nur Hülle für die Buchung, auf der Seite fließt der Inhalt wie direkt im Modul */
.rechtstext { display: contents; }
/* Dokumenttitel und Untertitel braucht nur das Buchungsfenster; auf der Seite steht der Titel schon im Seitenkopf */
.rechtstext > h2:first-child, .rechtstext > h2:first-child + p { display: none; }
/* Rechtsseiten (seitenart: rechtliches): Abschnittsüberschriften so groß wie die FAQ-Fragen, mit Luft davor */
.rechtliches :is(.modul, .rechtstext) > h3 { font-size: 22px; line-height: 1.2; margin-top: 16px; }
@media (min-width: 900px) { .rechtliches :is(.modul, .rechtstext) > h3 { font-size: 26px; } }

/* Kästen: im Sand-Modul weiß, im weißen Modul sandfarben (Krisenhinweis) */
.neu .kasten { border-radius: 14px; padding: 16px 18px; background: #fff; }
.neu .kasten p { font-size: 15px; line-height: 1.6; }
.nb { white-space: nowrap; }   /* {{ nb: … }} im Markdown: kein Zeilenumbruch innerhalb */
/* Zwei Zugänge (9d): Caroline rund, Andreas als gerader Rahmen (Rechteck mit runden Ecken) */
.zugang-bild { display: block; flex: none; overflow: hidden; border-radius: 50%; }
.neu .zugang-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.neu .zugang:nth-child(even) .zugang-bild img { object-position: 52% 30%; }
.modul:not(.modul-sand) .kasten { background: var(--sand); border: 1px solid var(--sand-rand); }
.modul:not(.modul-sand) .kasten p { line-height: 1.65; color: var(--text); }

/* Drei Schritte */
.preisliste { margin: 8px 0; }
.preisliste > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--sand-rand); }
.preisliste > div:first-child { border-top: 1px solid var(--sand-rand); }
.preisliste dt { font-size: 16px; line-height: 1.4; color: var(--text); }
.preisliste .hinweis { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.preisliste dd { margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; color: var(--text); }
@media (min-width: 900px) {
  .preisliste dt { font-size: 18px; }
  .preisliste .hinweis { font-size: 15px; }
  .preisliste dd { font-size: 19px; }
}
.schritte ol { --abstand: 22px; list-style: none; padding: 0; position: relative; display: flex; flex-direction: column;
  gap: var(--abstand); counter-reset: schritt; }
/* Linie von Kreis zu Kreis, endet am letzten (Andreas 17.10.: lief unter Schritt 3 weiter) */
.schritte li:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 34px;
  bottom: calc(-1 * var(--abstand)); width: 1.5px; background: var(--gruen-linie); }
.schritte li { position: relative; padding-left: 48px; min-height: 34px; font-size: 15px; line-height: 1.6; color: var(--text); counter-increment: schritt; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Wo fange ich an? */
.einstieg { display: flex; flex-direction: column; gap: 16px; }
.einstieg h3 { font-family: var(--fliess); font-size: 16px; font-weight: 600; line-height: 1.4; }
.einstieg-zeile { position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; row-gap: 3px;
  align-items: center; padding: 14px 40px 14px 14px; border: 1px solid var(--sand-linie); border-radius: 14px; background: var(--fastweiss); }
.einstieg-zeile > .komponenten { grid-row: 1 / span 2; }
.einstieg-zeile > h3 { align-self: end; }
.einstieg-zeile > p { align-self: start; }
/* Leistungssymbole wie im Buchungskalender (Runde 30): Logo-Formen in Salbei, ohne Kreis */
.ikon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.einstieg-zeile::after, .kachel::after { content: "›"; color: var(--text-5); font-size: 20px; }
.einstieg-zeile::after { position: absolute; right: 16px; top: 50%; translate: 0 -50%; }
.einstieg-zeile h3 a { color: var(--text); text-decoration: none; }
.einstieg-zeile h3 a::before { content: ""; position: absolute; inset: 0; border-radius: 14px; }   /* ganze Zeile klickbar */
.einstieg-zeile p { font-size: 14px; line-height: normal; color: var(--gruen-dunkel); }
.einstieg-karte { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; row-gap: 10px; align-items: center;
  padding: 14px; border-radius: 16px; background: #fff; }
.einstieg-karte > :not(:first-child, h3) { grid-column: 1 / -1; }   /* alles außer Symbol und Titel volle Breite */
.einstieg-karte p { font-size: 14px; line-height: 1.55; }
/* Karte mit Terminen wie die Zeilen: Symbol links über Titel und Unterzeile, Termine darunter, „Mehr über …“ in der Textspalte */
.einstieg-karte { row-gap: 3px; }
.einstieg-karte > .komponenten:first-child { grid-row: 1 / span 2; }
.einstieg .einstieg-karte > h3 { grid-column: 2; grid-row: 1; align-self: end; }
.einstieg .einstieg-karte > h3 + p { grid-column: 2; grid-row: 2; align-self: start; line-height: normal; color: var(--gruen-dunkel); }
.einstieg .einstieg-karte > .komponenten:not(:first-child) { grid-row: 3; margin-top: 12px; }   /* die Terminkacheln (Baustein-Hülle) */
.einstieg .einstieg-karte > p:has(> a:only-child) { grid-column: 2; grid-row: 4; margin-top: 10px; line-height: normal; color: var(--gruen-dunkel); }
.kacheln { display: flex; flex-direction: column; gap: 10px; }
.neu .kachel { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--sand-linie);
  border-radius: 14px; background: var(--fastweiss); color: var(--text); text-decoration: none; }
.kachel-datum { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--gruen-hell); display: flex;
  flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-size: 11px; color: var(--gruen-dunkel); }
.kachel-datum b { font-size: 19px; font-weight: 600; }
.kachel-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.kachel-text b { font-size: 16px; font-weight: 600; }
.kachel-text span { font-size: 14px; color: var(--text-4); }

/* Termine im Seitenkopf („{{ termin-karten }}“): Datumskacheln wie im Modul „Gruppenabende“ (.kachel), jeder Abend klappt
   (<details>) die Optionen auf. Handy: untereinander, danach Erstgespräch und „Lieber einzeln?“; Desktop: drei Spalten.
   Alle Texte stehen im Markdown (Argumente der Komponente), hier nur Gestaltung. */
.termin-karten { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 460px; margin: 8px auto 0; text-align: left; }
.tk-titel { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--text-3); }
.tk-tag { border: 1px solid var(--sand-linie); border-radius: 14px; background: var(--fastweiss); overflow: hidden; }
.tk-tag > summary.kachel { border: 0; background: none; list-style: none; cursor: pointer; }
.tk-tag > summary.kachel::-webkit-details-marker { display: none; }
.tk-tag[open] > summary.kachel::after { transform: rotate(90deg); }
.tk-aus { opacity: .45; cursor: default; }
.tk-rollen { padding: 0 8px 4px; }
.tk-rolle { display: flex; align-items: center; gap: 12px; padding: 14px 10px; border-top: 1px solid #EEE9DF; color: inherit; text-decoration: none; }
.tk-rolle:hover { background: #fff; }
.tk-rolle.tk-aus { opacity: .45; cursor: default; }
.tk-rolle.tk-aus:hover { background: none; }
.tk-rolle .tk-rname { flex: 1; font-weight: 600; font-size: 16px; color: #2F2C28; }
.tk-rolle .tk-preis { font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.tk-d { display: none; }   /* nur auf den Desktop-Zetteln */
.tk-zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 22px; margin: 16px 0 4px; font-size: 16px; text-align: center; }
.tk-alle[hidden] { display: none; }
.tk-einzeln { margin: 14px 0 4px; font-size: 16px; text-align: center; }
@media (max-width: 899px) {
  /* Handy: erst die Termine, dann das Erstgespräch, darunter „Lieber einzeln?“ (Andreas 2026-10-22). Die Hüllen lösen sich
     auf (display: contents), damit Termine, Knöpfe und Link als Geschwister im Seitenkopf mit order sortiert werden. */
  .hero-koerper .komponenten:has(> .termin-karten), .termin-karten { display: contents; }
  .tk-termine { order: 1; width: 100%; max-width: 460px; }
  .hero-koerper:has(.termin-karten) .knoepfe { order: 2; }
  .tk-einzeln { order: 3; align-self: center; }
  .tk-zeile { order: 3; align-self: center; }
  .hero-koerper:has(.termin-karten) .seitenkopf-bild { order: 4; }
}
@media (min-width: 900px) {
  .hero-koerper .komponenten:has(> .termin-karten) { align-self: center; width: 100%; max-width: 960px; margin: 18px auto 0; }
  .termin-karten { max-width: 960px; align-items: center; }
  .tk-termine { width: 100%; }
  .tk-titel { margin-bottom: 14px; font-size: 16px; text-align: center; }
  .termin-karten .kacheln { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
  .termin-karten .kacheln > * { flex: 1 1 0; min-width: 250px; max-width: 300px; }
  /* Kalenderzettel: Wochentag, großes Datum, Uhrzeit; der Abend klappt darunter die Optionen auf */
  .termin-karten .kacheln { gap: 24px; }
  .tk-tag, .termin-karten .kachel.tk-aus { border: 0; border-radius: 24px; background: #fff; box-shadow: 0 6px 24px rgb(61 58 54 / .08); }
  .termin-karten .kachel { position: relative; flex-direction: column; align-items: center; gap: 4px; padding: 22px 18px; text-align: center; }
  .termin-karten .kachel::after { position: absolute; right: 16px; top: 16px; font-size: 18px; }
  .termin-karten .kachel-datum, .termin-karten .kachel-text { display: none; }
  .tk-d { display: block; }
  .termin-karten .tk-wt { font-size: 16px; color: var(--gruen-dunkel); }
  .termin-karten .tk-dat { margin: 2px 0 4px; font-family: var(--titel); font-weight: 500; font-size: 32px; line-height: 1.15; color: var(--text); }
  .termin-karten .tk-sub { font-size: 14px; color: #6F6E68; }
  .tk-rollen { padding: 0 6px 8px; }
  .tk-rolle { padding: 14px 12px; }
  .tk-einzeln { display: none; }
  .tk-zeile { margin-top: 18px; font-size: 18px; }
}
  .termin-zeile .tz-titel { flex-basis: auto; }
  .termin-zeile .tz-titel::after { content: ":"; }
}

/* Sind wir die Richtigen? */
.passt { display: flex; flex-direction: column; gap: 22px; }
.passt > div { display: flex; flex-direction: column; gap: 8px; }
.passt p { color: var(--text); line-height: normal; }
.passt ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passt li { position: relative; padding-left: 17px; font-size: 15px; line-height: 1.55; }
.passt li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }
.passt .teil-2 li { color: var(--text-2); }
.passt .teil-2 li::before { background: none; border: 1.5px solid var(--text-5); }

/* Abschluss: Übergang wie alle anderen Module (Welle, kein Signet mehr – Andreas 18.10.2026) */
.modul-abschluss { padding-top: 70px; }
.modul-abschluss > p:first-child { font-family: var(--titel); font-size: 25px; line-height: 1.3; font-weight: 500; color: var(--text); text-wrap: balance; }

/* Fuß */
.fuss-neu { padding-top: 52px; padding-bottom: 40px; gap: 12px; }
.fuss-neu p { font-size: 14px; line-height: 1.6; }
.fuss-neu a { text-decoration: none; }
.fuss-links-neu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; }   /* Handy: bricht um statt einer Zeile über den Rand */

/* Hover aus 27a (am Handy ohne Wirkung) */
.neu .chips a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.einstieg-zeile:hover, .neu .kachel:hover { border-color: var(--gruen-linie); background: #fff; }

/* ================================================================ Startseite am Handy (Entwurf „Startseite Handy final“,
   Claude Design 19.10.2026; Quelle design/webseite/mitte-praxis Startseite Handy-handoff.zip). Wie Desktop 1d: Kopfleiste
   durchscheinend mit Welle über dem Wald, alle Abschnitte einspaltig, Karten „Zwei Zugänge“ statt Bogen-Grafik,
   größere Schrift (Titel 34 px, Text 17 px), Fuß weiß. Unterseiten bleiben wie sie sind. */
@media (max-width: 899px) {
  body.neu { --kopf-h: 72px; }
  body.neu .kopfleiste { height: var(--kopf-h); padding: 6px 8px 16px 16px; background: none; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; }   /* Weichzeichner liegt nur auf ::before (mit Welle); sonst dunkler Rand unter der Welle auf Unterseiten */
  body.neu .kopfleiste::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(255 255 255 / .72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    --welle-kopf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20V5%20Q%20100%20-3%20200%205%20T%20400%205%20V0Z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat, var(--welle-kopf) 0 100% / 100% 10px no-repeat;
    mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat, var(--welle-kopf) 0 100% / 100% 10px no-repeat; }
  body.neu .kopfleiste .symbol { width: 30px; height: 30px; }
  body.neu .kopf-termin { padding: 11px 16px; }

  body.neu .modul { gap: 20px; padding: 64px 22px; }  /* Wie am Desktop: Überschrift am Modulanfang näher an der Welle (80 %, Andreas 2026-10-31) – sichtbar ≈ 70 / 58 / 40 px */
  body.neu .modul:not(.modul-hero, .modul-abschluss, .fuss-neu, .modul-band, .modul-bild-voll, .modul-bild-oben, .modul-nur-bild):has(> h2:first-child, > .zentriert:first-child > h2:first-child) { padding-top: 51px; }
  body.neu .modul h2 { font-size: 34px; line-height: 1.1; }
  :where(body.neu) .modul p { font-size: 17px; }   /* niedrige Gewichtung: Kästen, Zeilen, Zellen setzen ihre eigene */

  /* Hero: Wald hinter Kopfleiste und Hero, läuft nach unten in Weiß aus */
  body.neu .modul-hero { margin-top: calc(-1 * var(--kopf-h)); gap: 14px; padding: 160px 22px 72px;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .4) 34%, rgb(255 255 255 / .9) 66%, #fff 100%),
      #fff url(wald-hintergrund.webp) center top / cover no-repeat; }
  body.neu .hero-kopf > p { font-size: 12px; font-weight: 600; color: #3D5F53; }   /* dunkler auf dem Wald (Entwurf) */
  body.neu .modul-hero h1 { font-size: 40px; }
  body.neu .hero-koerper > p { font-size: 17px; line-height: 1.6; color: var(--text); }
  /* Einleitungstext näher am Titel als am Knopf (Gesetz der Nähe, Andreas 2026-10-31): sichtbar ≈ 26 / 33 statt 35 / 29 px */
  body.neu .hero-koerper > p:first-child { margin-top: -5px; }
  body.neu .hero-koerper .knoepfe { margin-top: 16px; }

  /* Was dich herführt: Titel, Satz, Schlagworte */
  .modul-anliegen .chips a { font-size: 17px; }

  /* Was du hier bekommst */
  .modul-mitte { align-items: stretch; }
  .modul-mitte h2 { text-align: center; }
  .zelle h3 { font-size: 22px; }
  .modul .zelle p { font-size: 16px; line-height: 1.45; }

  /* Zwei Zugänge (Entwurf 9d am Handy): Name oben neben dem Bild, Andreas gespiegelt (Bild rechts, gekippt) */
  .modul-zugaenge { gap: 28px; }
  .modul-zugaenge > p { color: var(--text); }
  .zugaenge { display: grid; gap: 20px; margin-top: 12px; }
  .zugang { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 18px; background: #fff; }
  .zugang-kopf { display: flex; align-items: center; gap: 16px; }
  .zugang:nth-child(even) .zugang-kopf { flex-direction: row-reverse; }
  .zugang:nth-child(even) .zugang-kopf > div { align-items: flex-end; text-align: right; }
  .zugang-bild { width: 88px; height: 88px; }
  .zugang:nth-child(even) .zugang-bild { height: 97px; border-radius: 20px; }
  .zugang-kopf > div { display: flex; flex-direction: column; gap: 2px; }
  .zugang h3 { font-size: 32px; line-height: 1.1; }
  .zugang .rolle { font-family: var(--schreib); font-weight: 600; font-size: clamp(22px, 7vw, 30px); line-height: 1; color: var(--gruen-dunkel); }
  .modul .zugang > p { color: var(--text); }
  .neu .modul-zugaenge .kasten { margin-top: 8px; padding: 0; background: none; }
  .neu .modul-zugaenge .kasten p { font-size: 17px; color: var(--text); }

  /* Unser Weg */
  .schritte ol { --abstand: 26px; margin: 6px 0; }
  .schritte li { font-size: 17px; }

  /* Wo fange ich an: die Reihenfolge bestimmt das Markdown, kein order in der CSS */
  .modul-start .einstieg-karte { padding: 16px; }
  .modul-start .einstieg h3 { font-size: 17px; }
  .modul-start .einstieg-zeile p, .modul-start .einstieg-karte p { font-size: 16px; }
  .modul-start .einstieg-zeile::after, .modul-start .kachel::after { font-size: 22px; }
  .modul-start .kachel-datum { font-size: 13px; }
  .modul-start .kachel-datum b { font-size: 21px; }
  .modul-start .kachel-text b { font-size: 17px; }
  .modul-start .kachel-text span { font-size: 16px; }

  /* Sind wir die Richtigen */
  body.neu .modul-richtige { padding-bottom: 96px; }
  body.neu .passt { display: flex; flex-direction: column; gap: 32px; }
  .passt li { font-size: 17px; }
  .passt li::before { top: 9px; }
  .modul-richtige .kasten p { font-size: 17px; }

  /* Abschluss */
  body.neu .modul-abschluss { gap: 16px; padding: 70px 22px 56px; }
  body.neu .modul-abschluss > p + p { font-size: 16px; }
  .modul-abschluss > .knoepfe { margin-top: 8px; }

  /* Fuß: weiß, alles mittig untereinander */
  body.neu .fuss-neu { align-items: center; gap: 12px; padding: 64px 22px 40px; text-align: center; }
  body.neu .fuss-neu .marke { flex-direction: column; gap: 12px; }
  body.neu .fuss-neu .symbol { width: 30px; height: 30px; }
  body.neu .fuss-neu .wortmarke { font-size: 15px; }
  body.neu .fuss-neu p, body.neu .fuss-links-neu { font-size: 16px; }

  /* Menü (alle Seiten am Handy): ganzer Bildschirm statt Klappliste; Marke und × bleiben oben stehen */
  html:has(.burger[open]) { overflow: hidden; }
  .kopfleiste:has(.burger[open]) .kopf-termin { visibility: hidden; }
  .kopfleiste .marke, .burger > summary { position: relative; z-index: 2; }
  .burger[open] > summary span { display: none; }
  .burger[open] > summary::after { content: "×"; align-self: center; font-size: 26px; line-height: 1; color: var(--text); }
  .burger nav { top: 0; z-index: 1; height: 100vh; height: 100dvh; max-height: none;
    padding: calc(var(--kopf-h) + 24px) 16px 28px; border: 0; box-shadow: none;
    background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .burger nav > a:not(.menue-erstgespraech, .menue-sprache), .menue-bereich summary { padding: 14px 0; font-family: var(--titel);
    font-weight: 400; font-size: 25px; letter-spacing: .01em; color: var(--text); border-bottom: 1px solid var(--kopflinie); }
  .menue-bereich summary::after { font-size: 24px; font-weight: 400; color: var(--text-4); }
  .menue-bereich[open] summary { border-bottom: 0; padding-bottom: 6px; color: var(--gruen-dunkel); }
  .menue-bereich[open] { border-bottom: 1px solid var(--kopflinie); }
  .burger .menue-bereich > div { padding-bottom: 14px; }
  .burger .menue-bereich a { padding: 8px 0 8px 2px; font-size: 17px; color: var(--text-2); }
  .menue-hinweis { padding-left: 16px; }
  .burger nav .menue-sprache { padding: 16px 0 0; margin-bottom: 0; }
  .burger nav .menue-erstgespraech { display: flex; align-items: center; justify-content: center; min-height: 58px; margin: auto 0 0;
    padding: 0 18px; border-radius: 13px; font-size: 17px; }
}

/* ================================================================ Desktop ab 900 px (Entwurf 27a)
   Abschnitte als Bänder über die volle Breite, Inhalt in einem 1040-px-Container. Bewusst NICHT aus 27a übernommen:
   Knopf-Grün (#5B8C7B → --bedien) und die großen Übergangs-Marken 52/10 px (Andreas 12.10.: zu schwer). */
@media (min-width: 900px) {
  :root { --rand: clamp(22px, 5vw, 56px); --kopf-h: 73px; }
  body.neu { --kopf-h: 82px; }

  /* Kopfleiste: durchscheinend über dem Bambus, Inhalt im Container */
  .kopfleiste { gap: 14px; padding: 14px max(var(--rand), (100% - 1152px) / 2 + var(--rand));   /* wie Entwurf 7a: Inhalt 1040 px + Rand je Seite */
    background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom-color: rgb(238 234 226 / .7); }
  /* Startseite (Entwurf 1d): die Unterkante der Kopfleiste ist eine sanfte Welle. Hintergrund, Unschärfe und Maske liegen auf
     einem Pseudoelement, damit das aufgeklappte Menü nicht mit abgeschnitten wird. */
  body.neu .kopfleiste { padding-bottom: 24px; background: none; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.neu .kopfleiste::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(255 255 255 / .72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    --welle-kopf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200V10Q100%200%20200%2010T400%2010V0Z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 19px) no-repeat, var(--welle-kopf) calc(50% + 158px) bottom / 1800px 20px repeat-x;
    mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 19px) no-repeat, var(--welle-kopf) calc(50% + 158px) bottom / 1800px 20px repeat-x; }
  body.neu .burger nav { top: calc(100% + 24px); }
  .kopfleiste .symbol { width: 34px; height: 34px; }
  .kopfleiste .wortmarke { font-size: 14px; }
  .neu .kopf-termin { padding: 12px 18px; }
  /* Menü klappt unter den drei Balken auf, rechtsbündig, statt über die ganze Breite */
  .burger { position: relative; }
  .burger nav { top: calc(100% + 14px); left: auto; right: 0; min-width: 300px; padding: 8px 0;
    max-height: calc(100dvh - var(--kopf-h) - 24px);
    border: 1px solid var(--kopflinie); border-radius: 14px; }

  .modul { gap: 20px; padding: clamp(56px, 7vw, 96px) max(var(--rand), (100% - 1040px) / 2 + var(--rand)); }
  .modul h2 { font-size: clamp(28px, 3vw, 38px); }
  /* Startseite: Lesebereich links und rechts begrenzt (Entwurf 7a) – Module als 1040-px-Spalte auf Weiß, Wellen enden an den Kanten */
  body.neu .modul:not(.modul-hero) { max-width: 1040px; margin-inline: auto; box-sizing: border-box;
    padding-inline: max(var(--rand), (min(100%, 1040px) - var(--innen, 1040px)) / 2 + var(--rand)); }
  /* Entwurf 1d: alle Abschnitte gleich hoch gepolstert, Titel 42 px mittig */
  body.neu .modul:not(.modul-hero, .modul-abschluss, .fuss-neu) { padding-block: clamp(64px, 7vw, 96px); }
  /* Beginnt das Modul mit einer Überschrift, rückt sie näher an die Welle (80 % des Polsters, Andreas 2026-10-31): sichtbar
     Text davor → Welle ≈ 100, Welle → Überschrift ≈ 80, Überschrift → Text ≈ 50 px – die Überschrift gehört zu ihrem Abschnitt,
     statt in der Mitte zwischen zwei Abschnitten zu schweben. */
  body.neu .modul:not(.modul-hero, .modul-abschluss, .fuss-neu, .modul-band, .modul-bild-voll, .modul-bild-oben, .modul-nur-bild):has(> h2:first-child, > .zentriert:first-child > h2:first-child) {
    padding-top: calc(clamp(64px, 7vw, 96px) * .8); }
  body.neu .modul h2 { font-size: 42px; line-height: 1.1; text-align: center; }

  /* Hero nach Entwurf „Startseite Desktop 1d“ (Claude Design 19.10.2026): der Wald steht als feste Fläche hinter der ganzen Seite
     (Körper), die Module scrollen als 1040-px-Spalte darüber. Der Hero ist eine Spalte ohne Karte: oben durchsichtig auf dem
     Wald, nach unten ein Verlauf in Weiß; Signet, Dachzeile, Titel, Text und Knöpfe mittig. */
  .modul-hero { align-items: center; justify-content: flex-start; padding: clamp(28px, 5vh, 56px) var(--rand) 0; background: none; }
  body.neu { background: #fff url(wald-hintergrund.webp) center top / cover fixed no-repeat; }
  /* Unterseite im Startseiten-Design (Frontmatter „design: start“): Seitenkopf wie der Hero – durchsichtig auf dem festen Wald, nach unten Weiß */
  .hero-karte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; width: 100%; max-width: 1040px;
    padding: clamp(40px, 6vh, 64px) var(--rand) 80px;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .4) 30%, rgb(255 255 255 / .86) 72%, #fff 100%); }
  .hero-kopf, .hero-koerper { display: contents; }
  .hero-marke { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; }
  .hero-kopf .wortmarke { font-size: 20px; letter-spacing: .2em; padding-left: .2em; color: var(--text); text-align: center; }
  .modul-hero h1 { font-size: clamp(38px, 4.4vw, 54px); max-width: 760px; color: var(--text); text-wrap: balance; margin-bottom: 40px; }
  .hero-koerper > p { font-size: 18px; max-width: 600px; color: var(--text); }
  /* Knöpfe am Desktop: Termin buchen (hell) links, Erstgespräch (dunkel) rechts – im Markdown bleibt das Erstgespräch zuerst (Handy oben); Andreas 21.10.2026 */
  .hero-koerper .knoepfe { flex-direction: row-reverse; align-self: stretch; width: 100%; max-width: 720px; margin: 6px auto 0; gap: 12px; }
  .hero-koerper .knoepfe > * { flex: 1; min-height: 62px; }
  .hero-koerper .knoepfe > :first-child { flex: 1.3; }
  /* Feinschliff Desktop (Andreas 2026-10-31, „als Grafiker verrunden“): Der Einleitungstext ist so groß wie der Fließtext (vorher 18 < 20)
     und gehört sichtbar zum Titel (Abstand 32 statt 56 px, vorher näher am Knopf als am Titel). Terminkacheln in den Größen der
     früheren Startseite (18/16 px) – bei 20-px-Fließtext wirkten sie zu klein. Chips bleiben 16 px (größer: drei Reihen mit Waise). */
  .modul-hero h1 { margin-bottom: 16px; }
  .hero-koerper > p { font-size: 20px; line-height: 1.6; max-width: 640px; }
  .modul:not(.modul-hero) .kachel-datum { width: 58px; height: 58px; font-size: 13px; }
  .modul:not(.modul-hero) .kachel-datum b { font-size: 21px; }
  .modul:not(.modul-hero) .kachel-text b { font-size: 18px; }
  .modul:not(.modul-hero) .kachel-text span { font-size: 16px; }


  /* Baukasten „::: zweispaltig“ (Teile durch ---): am Desktop zwei Spalten, Titel steht darüber; „::: zweispaltig tauschen“:
     der erste Teil steht rechts. Am Handy untereinander in der Reihenfolge des .md. Die Startseite nutzt sie derzeit nicht
     (alle Module einspaltig, Reihenfolge = .md); Kinesiologie ja. Andere Reihenfolge am Desktop: nur hier, nie je Modul. */
  .zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));   /* fest zwei: Unterseiten-Module sind nur 648 px breit */
    gap: clamp(24px, 5vw, 72px); align-items: start; }
  .spalte { display: flex; flex-direction: column; gap: 16px; }
  .zweispaltig.tauschen > .spalte:first-child { order: 2; }

  /* Was dich herführt (Entwurf 1d): Titel, Satz, Schlagworte untereinander, 760 px */
  .modul-anliegen { --innen: 760px; }
  .modul-anliegen > p { font-size: 20px; }
  .modul-anliegen .chips a { font-size: 18px; }

  /* Was du hier bekommst (Entwurf 1d): Signet, Titel, 2×2-Raster in einer Spalte (700 px) */
  .modul-mitte { --innen: 700px; }
  .modul-mitte { align-items: center; }
  .modul-mitte .raster { align-self: stretch; }
  .zelle { padding: 22px 14px; }
  .zelle h3 { font-size: 22px; }
  .zelle p { font-size: 16px; }

  /* Zwei Zugänge (Entwurf 1d): zwei Karten */
  .modul-zugaenge { gap: 28px; }
  .modul-zugaenge > p { margin-inline: auto; max-width: 620px; font-size: 20px; color: var(--text); text-align: center; }
  .zugaenge { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 800px; margin: 12px auto 0; }
  .zugang { display: grid; grid-template-columns: 152px 1fr; grid-template-rows: auto auto; align-content: center;
    column-gap: 40px; row-gap: 14px; padding: 36px 44px; border-radius: 18px; background: #fff; }
  .zugang-kopf { display: contents; }
  .zugang-bild { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 152px; height: 152px; }
  .zugang-kopf > div { grid-column: 2; align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .zugang h3 { font-size: 30px; line-height: 1.1; }
  .zugang .rolle { font-family: var(--schreib); font-weight: 600; font-size: 32px; line-height: 1; color: var(--gruen-dunkel); }
  .modul .zugang > p { grid-column: 2; font-size: 18px; color: var(--text); }
  /* Andreas gespiegelt: Bild rechts, Text rechtsbündig */
  .zugang:nth-child(even) { grid-template-columns: 1fr 152px; text-align: right; }
  .zugang:nth-child(even) .zugang-bild { grid-column: 2; height: 168px; border-radius: 34px; }
  .zugang:nth-child(even) .zugang-kopf > div { grid-column: 1; flex-direction: row-reverse; }
  .modul .zugang:nth-child(even) > p { grid-column: 1; }
  .neu .modul-zugaenge .kasten { max-width: 640px; margin: 8px auto 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
  .neu .modul-zugaenge .kasten p { font-size: 19px; line-height: 1.62; color: var(--text); }

  .schritte ol { --abstand: 26px; }

  /* Unser Weg in drei Schritten (Entwurf 1d): Titel, Satz, Schritte, Link untereinander, 760 px */
  .modul-weg { --innen: 760px; }
  .modul-weg > p { font-size: 20px; }
  .modul-weg .schritte { margin: 6px 0; }
  .modul-weg .schritte li { font-size: 17px; }

  /* Wo fange ich an (Entwurf 1d): eine Spalte, 760 px; die Reihenfolge bestimmt das Markdown */
  .modul-start { --innen: 760px; }
  .modul-start .einstieg { display: flex; flex-direction: column; gap: 16px; }
  .modul-start .einstieg-karte { padding: 16px; border-radius: 16px; }
  .modul-start .einstieg h3 { font-size: 18px; }
  .modul-start .einstieg-zeile p, .modul-start .einstieg-karte p { font-size: 16px; }
  .modul-start .einstieg-zeile::after, .modul-start .kachel::after { font-size: 22px; }
  .modul-start .kachel-datum { font-size: 13px; }
  .modul-start .kachel-datum b { font-size: 21px; }
  .modul-start .kachel-text b { font-size: 18px; }
  .modul-start .kachel-text span { font-size: 16px; }

  /* Sind wir die Richtigen (Entwurf 1d): 900 px, größere Schrift */
  .modul-richtige { --innen: 900px; padding-bottom: 96px; }
  .passt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 346px), 1fr)); gap: clamp(24px, 5vw, 72px); }
  .passt p { font-size: 20px; }
  .passt li { font-size: 18px; }
  .passt li::before { top: 10px; }
  .modul-richtige .kasten p { font-size: 17px; }

  /* Abschluss: Text links, Knöpfe rechts, unten bündig */
  .modul-abschluss { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 346px), 1fr));
    column-gap: clamp(24px, 5vw, 72px); row-gap: 16px; align-items: end;
    padding-top: clamp(70px, 8vw, 110px); padding-bottom: clamp(56px, 7vw, 96px); }
  .modul-abschluss > p { grid-column: 1; }
  .modul-abschluss > .knoepfe { grid-column: 2; grid-row: 1 / span 2; }
  .modul-abschluss > p:first-child { font-size: clamp(25px, 2.6vw, 32px); }

  /* Fuß in einer Zeile (Unterseiten) */
  .fuss-neu { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 32px; row-gap: 12px;
    padding-top: 52px; padding-bottom: 40px; }
  /* Fuß der Startseite: weiß mit Welle wie am Handy (Entwurf „Startseite Handy final“, 19.10.2026; vorher Sand), alles mittig untereinander */
  body.neu .fuss-neu { flex-direction: column; flex-wrap: nowrap; align-items: center; text-align: center;
    gap: 12px; padding: clamp(64px, 7vw, 96px) var(--rand) 40px; }
  body.neu .fuss-neu .marke { flex-direction: column; gap: 12px; }
  body.neu .fuss-neu .wortmarke { font-size: 15px; }
  body.neu .fuss-neu p, body.neu .fuss-links-neu { font-size: 16px; }
}

.neu .fehler { background: #fde8e0; color: #8a2d0c; padding: .1em .4em; border-radius: 4px; }

/* ================================================================ Terminbuchung als Popup (nur Desktop)
   Andreas 2026-10-13. Skript in seite-neu.php, Inhalt = Buchungsseite im iframe (?popup). Hintergrund und Schatten
   wie die Dialoge der Buchung. Feste Größe, ändert sich bei keinem Schritt (Andreas 2026-10-13): 1064 px hoch,
   höchstens bis 32 px vor den Fensterrand; Breite im Verhältnis 9 : 16 (bei voller Höhe 599 px; vorher Handyformat
   9 : 19,5 = 491 px, Andreas: zu schmal),
   aber nie schmaler als 375 px (iPhone mini, Bezugsgerät der Buchung) – gilt bei Fenstern unter ~880 px Höhe.
   „Wie erreichen wir dich?“ (Einzelsitzung, neu) samt Fehlermeldung passt ohne Scrollen (1053 px gemessen);
   längere Seiten (Vertrag) scrollen im Popup. Ändert sich die Seite, neu messen. */
.buchung { width: fit-content; max-width: calc(100vw - 32px); max-height: none; padding: 0; border: 0;
  border-radius: 32px; background: var(--sand); box-shadow: 0 30px 80px rgb(47 44 40 / .3); overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0; translate: 0 16px; scale: .98;
  transition: opacity .25s ease-out, translate .25s ease-out, scale .25s ease-out, display .25s, overlay .25s;
  transition-behavior: allow-discrete; }
.buchung:is([open]):where(:not([data-schliesst])) { opacity: 1; translate: 0 0; scale: 1;
  @starting-style { opacity: 0; translate: 0 16px; scale: .98; } }
.buchung iframe { display: block; width: auto; min-width: 375px; max-width: 100%; aspect-ratio: 9 / 16; border: 0;
  height: min(1064px, calc(100vh - 64px)); height: min(1064px, calc(100dvh - 64px)); }
/* Ladehinweis, solange die Buchung im Rahmen noch nicht geladen ist (seite-neu.js) */
.buchung-hinweis { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; background: var(--sand); color: var(--text); text-align: center; font-size: 17px; }
.buchung[data-laedt] .buchung-hinweis { display: flex; }
.buchung-hinweis p { margin: 0; }
.buchung-hinweis button, .buchung-hinweis a { padding: 6px 4px; font: inherit; color: var(--gruen-dunkel); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.buchung::backdrop { background: rgb(47 44 40 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  overflow: hidden; overscroll-behavior: contain;
  transition: background-color .25s ease-out, backdrop-filter .25s ease-out, display .25s, overlay .25s;
  transition-behavior: allow-discrete; }
.buchung:is([open]):where(:not([data-schliesst]))::backdrop { background: rgb(47 44 40 / .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  @starting-style { background: rgb(47 44 40 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .buchung, .buchung iframe { translate: none; scale: none; transition-duration: .1s; }
}


/* Methodenseite Kinesiologie – Ergänzung zu neu.css (Claude Design, 17.10.2026).
   Gewählt: 1b Kopf mit Bild unten · 2b Einstieg ohne Symbol · 3b Personenkasten · 4c Organe im Kreis · 5b FAQ.
   Keine neuen Tokens/Farben. Zum Einbau ans Ende von neu.css hängen; die Desktop-Teile stehen je in eigener @media. */


/* ---------------------------------------------------------------- 1b  ::: seitenkopf bild-unten
   Markdown: ![…](…) im Block → <figure class="seitenkopf-bild"><img></figure> als letztes Kind. */
.modul-seitenkopf-start .seitenkopf-bild { width: 100%; max-width: 1040px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; }
.neu .seitenkopf-bild img { width: 100%; height: 100%; object-fit: cover; }
.modul-seitenkopf-start.bild-unten { padding-bottom: 22px; }
.bild-unten .seitenkopf-bild { margin-top: 4px; }   /* + 18 px Lücke = 22 px unter den Knöpfen/Fakten */
@media (min-width: 900px) {
  .modul-seitenkopf-start .seitenkopf-bild { aspect-ratio: 16 / 7; border-radius: 24px; }
  .modul-seitenkopf-start.bild-unten { padding-bottom: 32px; }
  .bild-unten .seitenkopf-bild { margin-top: 22px; }
}
/* nur bis das Foto da ist */
.seitenkopf-bild.platzhalter { display: flex; align-items: center; justify-content: center; border: 1px solid var(--sand-rand);
  background: repeating-linear-gradient(135deg, var(--kopflinie) 0 1px, var(--sand) 1px 9px); }
.seitenkopf-bild.platzhalter span { font: 12px ui-monospace, Menlo, monospace; color: var(--text-3); background: var(--fastweiss);
  padding: 6px 10px; border-radius: 6px; }

/* ---------------------------------------------------------------- 2b  ::: einstieg ohne Symbol → eine Spalte */
.einstieg-zeile:not(:has(.ikon, .komponenten)) { grid-template-columns: 1fr; padding-left: 18px; }

/* ---------------------------------------------------------------- 3b  ::: person (ersetzt bild-text)
   Konverter: <img>, dann h3 + erster Absatz in <div class="person-kopf"> (Absatz bekommt .rolle), Rest folgt. */
.person { display: grid; grid-template-columns: 76px 1fr; gap: 14px 16px; align-items: center; padding: 20px;
  border-radius: 14px; background: #fff; }
.modul:not(.modul-sand) .person { background: var(--sand); }
.neu .person > img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.person-kopf { display: flex; flex-direction: column; gap: 3px; }
.person h3 { font-size: 23px; line-height: 1.1; }
.modul .person .rolle { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.person > p { grid-column: 1 / -1; }
.modul .person > p { font-size: 15px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.person > .knoepfe { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--sand-linie); }
@media (min-width: 900px) { .person { max-width: 640px; } }

/* ---------------------------------------------------------------- 4c  ::: raster kreis  (genau fünf Zellen)
   Gezeichnet auf 346 × 300: Ring Mitte (173|160), r 92; Punkte bei −90°, −18°, 54°, 126°, 198°.
   Reihenfolge = Reihenfolge im Markdown (Leber, Herz, Milz, Lunge, Niere). */
.raster.kreis { display: block; align-self: center; width: 100%; max-width: 420px; aspect-ratio: 346 / 300; margin: 8px 0; }
.raster.kreis::before { left: 23.41%; top: 22.67%; right: auto; bottom: auto; width: 53.18%; height: auto; aspect-ratio: 1;
  border: 2px solid var(--gruen); border-radius: 50%; background: none; }   /* 2 px Punkt-Grün (Andreas 17.10.: 1 px kaum sichtbar) */
.raster.kreis::after, .raster.kreis > .zelle::after { content: none; }
.raster.kreis > .zelle { position: absolute; padding: 0; gap: 1px; white-space: nowrap; }
.raster.kreis > .zelle::before { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gruen); box-shadow: 0 0 0 4px var(--modul-farbe); }
.raster.kreis h3 { font-size: 20px; line-height: 1.1; }
.raster.kreis p { font-size: 14px; }
/* oben: Text über dem Punkt */
.raster.kreis > .zelle:nth-child(1) { left: 50%; top: 22.67%; translate: -50% calc(-100% - 14px); }
.raster.kreis > .zelle:nth-child(1)::before { left: 50%; top: calc(100% + 9.5px); translate: -50% 0; }
/* rechts: Text rechts vom Punkt */
.raster.kreis > .zelle:nth-child(2) { left: 75.29%; top: 43.83%; translate: 14px -50%; align-items: flex-start; text-align: left; }
.raster.kreis > .zelle:nth-child(2)::before { left: -18.5px; top: 50%; translate: 0 -50%; }
/* unten rechts / unten links: Text unter dem Punkt */
.raster.kreis > .zelle:nth-child(3) { left: 65.61%; top: 78.17%; translate: -50% 14px; }
.raster.kreis > .zelle:nth-child(4) { left: 34.39%; top: 78.17%; translate: -50% 14px; }
.raster.kreis > .zelle:is(:nth-child(3), :nth-child(4))::before { left: 50%; top: -18.5px; translate: -50% 0; }
/* links: Text links vom Punkt */
.raster.kreis > .zelle:nth-child(5) { left: 24.71%; top: 43.83%; translate: calc(-100% - 14px) -50%; align-items: flex-end; text-align: right; }
.raster.kreis > .zelle:nth-child(5)::before { right: -18.5px; top: 50%; translate: 0 -50%; }



/* ---------------------------------------------------------------- ::: fragen themen  (Andreas 17.10.2026)
   Themen zum Aufklappen statt Link auf eine andere Seite: Titel + Unterzeile im Kopf, darin 2–3 Sätze und erst
   dann der Link zur Spezialseite. Alle zu, sonst wie die FAQ. */
.fragen.themen .frage-unter { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--text-3); }


/* ---------------------------------------------------------------- Unterseiten im Startseiten-Design („design: start“)
   (Andreas 19.10.2026): am Desktop alles wie die aktuelle Startseite (Entwurf 1d). Der Seitenkopf wird dort als Startseiten-Hero
   ausgegeben (bausteine.php, .modul-seitenkopf-start) und braucht hier nichts; Abschnitte als 760-px-Lesespalte mit den Textgrößen der
   Startseite (Absatz 20, Listen 18, Schritte wie „Unser Weg“, Kasten 17). Steht nach den Unterseiten-Regeln, damit es gewinnt. */
@media (min-width: 900px) {

  .unterseite .modul:not(.modul-seitenkopf, .modul-abschluss) { --innen: 760px; }
  .neu:not(.unterseite) .modul:not(.modul-hero, .modul-band) { --innen: 760px; }   /* Startseite: Lesespalte wie die Unterseiten (Andreas 2026-10-31) */
  .neu :is(.modul, .rechtstext) > p, .zentriert > p { font-size: 20px; }
  .neu .frage-inhalt > p { font-size: 20px; }   /* Antworten so breit und groß wie der Fließtext darüber */
  .neu .modul .schritte { margin: 6px 0; }
  .neu .modul .schritte li { font-size: 17px; }
  .neu .modul .kasten p { font-size: 17px; }
}
/* Aufzählungen im Fließtext wie die Absätze daneben (Andreas 19.10.: Schrift wechselte mitten im Abschnitt) */
.unterseite :is(.modul, .rechtstext) > ul li { font-size: 17px; line-height: 1.62; color: var(--text); }
@media (min-width: 900px) { .unterseite :is(.modul, .rechtstext) > ul li { font-size: 20px; } }
/* Aufzählungen in aufgeklappten Fragen wie die Antwort-Absätze (Andreas 24.10.: Ausbildungsliste war kleiner) */
.frage-inhalt > ul { max-width: 596px; padding-bottom: 22px; }
.frage-inhalt > ul li { font-size: 17px; line-height: 1.65; color: var(--text); }
@media (min-width: 900px) { .neu .frage-inhalt > ul li { font-size: 20px; } }
/* Punkte und Abstände wie „Passt zu dir“ statt Browser-Standard (Andreas 2026-11-03: 40 px Einzug, mehrzeilige Punkte liefen ineinander);
   Abstand zwischen den Punkten = halber Absatzabstand, Punkt mittig auf der ersten Zeile */
:is(.unterseite :is(.modul, .rechtstext), .frage-inhalt) > ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 10px; }
:is(.unterseite :is(.modul, .rechtstext), .frage-inhalt) > ul li { position: relative; padding-left: 1.1em; }
:is(.unterseite :is(.modul, .rechtstext), .frage-inhalt) > ul li::before { content: ""; position: absolute; left: 0; top: calc(.81em - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }

/* ---------------------------------------------------------------- Zentrale Bausteine (Entwurf „Angst Panik Seite“, Claude Design 19.10.2026)
   Gelten für jede Seite von selbst – kein Modul-Zusatz nötig (Regeln W-1 … W-10, design/basis/website-module.md):
   ::: fragen            – Akkordeon: Titel Alegreya, schlichtes + / – ohne Kreis, Haarlinien dazwischen; alle zu (Zusatz „offen“: erste offen).
   ::: modul …           – Farbe wechselt automatisch Sand/Weiß (bausteine.php); Wellen, Sandlinie am Anfang und vor dem Footer folgen daraus.
   ::: modul + person    – steht ein Personenbild ≥ 900 px allein in seinem Modul, wird es automatisch zum Band (.modul-band, Foto bündig an den Wellen). */
.fragen { display: flex; flex-direction: column; }
.frage { border-top: 1px solid #D9D1BF; }
.frage:first-child { border-top: 0; }
.frage summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 16px 0; }
.frage summary::-webkit-details-marker { display: none; }
.frage h3 { font-size: 22px; font-weight: 500; line-height: 1.2; text-align: left; }
.frage summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; line-height: 1; color: var(--text); }
.frage[open] summary::after { content: "–"; }   /* zuklappen mit Minus, nicht mit x (Andreas 17.10.) */
.frage summary:hover h3 { color: var(--gruen-dunkel); }
.frage-inhalt > p { max-width: 596px; padding: 0 0 22px; font-size: 17px; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.frage-inhalt > p + p { margin-top: -6px; }
@media (min-width: 900px) {
  .frage summary { padding: 20px 0; }
  .frage h3 { font-size: 26px; }
}

/* ---------------------------------------------------------------- Bild an der Welle (.bild-welle, W-5): EIN Baustein für jedes Modul
   bausteine.php (bild_welle()) setzt am Foto .bild-welle + .bw-oben und/oder .bw-unten = an welcher Kante es an einer Welle liegt.
   Der Baustein schneidet das Foto dort auf die Sandkante (W-2; Masken --maske-*-b/-b35 im 40-px-Feld, Breite = Modulbreite 100cqw,
   darum beginnt das Foto an der linken Modulkante), legt es über die Wellenfläche (z 3) und die grüne Linie darüber (::after, z 4).
   Farben aus den Nachbarn: Oberkante nach der eigenen Farbe, Unterkante nach der des nächsten Moduls – nichts pro Seite.
   Das Modul legt nur fest, wo das Foto steht: an einer Welle ragt es 20 px darunter (margin bzw. inset -20px), sodass das Feld
   (20 px über bis 20 px unter der Modulkante) auf dem Foto liegt. Prüfen: python tools/kante-pruefen.py (≤ 0,5 px, 1920 und 500 px).
   Verworfen: Masken je Modultyp (9 Sitzungen Nacharbeit), eigene Handy-Kurve (Sinus 400×20, bis 13 px neben der Sandkante),
   die Welle des nächsten Moduls vor das Foto heben (mit Sandstreifen deckte sie die Unterkante ab, W-15). */
.modul { --bw-kante-oben: var(--maske-oben-b); --bw-kante-unten: var(--maske-unten-b); --bw-fuell: var(--welle-weiss); --bw-linie: var(--welle-linie); }
.modul-sand { --bw-kante-oben: var(--maske-oben-b35); --bw-fuell: var(--welle-sand); --bw-linie: var(--welle-linie-sand); }
.modul:has(+ .modul-sand) { --bw-kante-unten: var(--maske-unten-b35); }
.modul:has(.bild-welle) { container-type: inline-size; }
.bild-welle { position: relative; z-index: 3; --bw-o: 0px; --bw-u: 0px; --bw-maske-oben: none; --bw-maske-unten: none;   /* Ebenen überlappen 1 px: keine Haarlinie an der Naht */
  -webkit-mask: var(--bw-maske-oben) top left / 100cqw 40px no-repeat, linear-gradient(#000, #000) 0 var(--bw-o) / 100% calc(100% - var(--bw-o) - var(--bw-u)) no-repeat,
    var(--bw-maske-unten) bottom left / 100cqw 40px no-repeat;
  mask: var(--bw-maske-oben) top left / 100cqw 40px no-repeat, linear-gradient(#000, #000) 0 var(--bw-o) / 100% calc(100% - var(--bw-o) - var(--bw-u)) no-repeat,
    var(--bw-maske-unten) bottom left / 100cqw 40px no-repeat; }
.bild-welle.bw-oben { --bw-o: 39px; --bw-maske-oben: var(--bw-kante-oben); }
.bild-welle.bw-unten { --bw-u: 39px; --bw-maske-unten: var(--bw-kante-unten); }
/* An jeder Welle, an der ein Foto liegt, malt ::before nur die Fläche (unter dem Foto) und ::after die grüne Linie (über dem Foto) */
body.neu .modul:has(.bw-oben)::before, body.neu .modul:has(.bw-unten) + .modul::before { background-image: var(--bw-fuell); }
body.neu .modul:has(.bw-oben)::after, body.neu .modul:has(.bw-unten) + .modul::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; top: -20px;
  height: 40px; pointer-events: none; background: var(--bw-linie) center / 100% 40px no-repeat; }

/* Personenband (W-5): Foto mit .bild-welle oben und unten; Farben und Kanten kommen aus dem Baustein. */
body.neu .modul.modul-band { display: grid; grid-template-columns: 1fr; gap: 16px 0; padding: 0; }
body.neu .modul-band .person { display: contents; }
body.neu .modul-band .person > img { grid-row: 1; width: 100%; height: auto; max-width: none; border-radius: 0; margin: -20px 0 16px; }   /* oben 20 px unter die Welle */
body.neu .modul-band > h2 { grid-row: 2; padding-inline: 22px; font-family: var(--fliess); font-size: 13px; font-weight: 400; line-height: normal;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); text-align: left; }
body.neu .modul-band .person-kopf { grid-row: 3; padding-inline: 22px; gap: 16px; }
body.neu .modul-band .person h3 { font-size: 40px; line-height: 1.05; font-weight: 500; }
body.neu .modul-band .person .rolle { font-family: var(--schreib); font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--gruen-dunkel); text-wrap: balance; }
body.neu .modul-band .person > p { grid-column: 1; grid-row: 4; padding: 0 22px; font-size: 16px; line-height: 1.55; color: var(--text); }
body.neu .modul-band .person > p + p { grid-row: 5; padding-bottom: 64px; }   /* Link-Absatz („Mehr über …“) unter dem Text, wo sonst Knöpfe stehen */
body.neu .modul-band .person > p:last-child { padding-bottom: 64px; }   /* nur ein Textabsatz, keine Knöpfe: Abstand zur Welle darunter wie sonst */
body.neu .modul-band .person > .knoepfe { grid-column: 1; grid-row: 5; padding: 0 22px 64px; border-top: 0; }
@media (min-width: 900px) {
  /* Foto 420 × 650 bündig links, unter den Wellen oben und unten; Text mittig daneben (Leerzeilen 1fr oben/unten halten die Zeilen eng) */
  body.neu .modul.modul-band { grid-template-columns: 420px 1fr; grid-template-rows: 1fr repeat(4, auto) 1fr; align-items: start; gap: 20px 0; padding: 0; background: var(--modul-farbe); }
  body.neu .modul-band .person > img { grid-column: 1; grid-row: 1 / -1; height: 670px; margin: -20px 0; object-fit: cover; object-position: center 15%; }
  body.neu .modul-band > h2 { grid-column: 2; grid-row: 2; padding: 0 56px 0 64px; margin-bottom: -4px; }
  body.neu .modul-band .person-kopf { grid-column: 2; grid-row: 3; padding: 0 56px 0 64px; gap: 20px; }
  body.neu .modul-band .person h3 { font-size: 52px; }
  body.neu .modul-band .person .rolle { font-size: 36px; }
  body.neu .modul-band .person > p { grid-column: 2; padding: 0 56px 0 64px; font-size: 17px; }
  body.neu .modul-band .person > p + p, body.neu .modul-band .person > p:last-child { padding-bottom: 0; }
  body.neu .modul-band .person > .knoepfe { grid-column: 2; grid-row: 5; padding: 0 56px 0 64px; }
}

/* Personenband im Querformat (.person-quer, automatisch bei einem Foto, das breiter als hoch ist).
   Desktop: Foto in der Breite des normalen Lesebereichs, Format 1392 × 596, runde Ecken, Text darunter in zwei Spalten
   (Name + Qualifikation | Leitsatz + Knopf). Handy: wie das Hochformat-Band; die untere Fotokante folgt der oberen
   (gleiche Welle, nicht gespiegelt). */
body.neu .modul-band-quer .person > img { height: 400px; object-fit: cover; object-position: 46% 8%; }
@media (min-width: 900px) {
  body.neu .modul.modul-band-quer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 8px 48px; align-items: start;
    padding: clamp(64px, 7vw, 96px) 56px; }   /* Foto = Modulbreite minus 56 px Rand (Vorlage Andreas) */
  body.neu .modul-band-quer .person > img { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 1392 / 596; margin: 0 0 24px;
    border-radius: 22px; object-position: center 28%; -webkit-mask: none; mask: none; z-index: 0; }   /* Desktop: im Lesebereich, nicht an der Welle */
  body.neu .modul.modul-band-quer > h2 { grid-column: 1; grid-row: 2; padding: 0; margin: 0; }
  body.neu .modul-band-quer .person-kopf { display: contents; }
  body.neu .modul-band-quer .person h3 { grid-column: 1; grid-row: 3; margin: 0; }
  body.neu .modul.modul-band-quer .person .rolle { grid-column: 2; grid-row: 3; font-size: 34px; }
  body.neu .modul.modul-band-quer .person > p { grid-column: 1; grid-row: 4; padding: 0; font-size: 17px; }
  body.neu .modul.modul-band-quer .person > p + p { grid-column: 2; grid-row: 4; margin-top: 12px; }
  body.neu .modul.modul-band-quer .person > .knoepfe { grid-column: 2; grid-row: 4; padding: 0; margin-top: 12px; }
}

/* Vollbild-Modul („::: modul bild-voll“ + ::: karte-milchglas-links): das Foto füllt das ganze Modul, oben UND unten auf die Wellenkante
   zugeschnitten (Baustein .bild-welle, Foto läuft 20 px unter jede Welle); die Textkarte liegt darüber. Der Hintergrund ist
   ein ruhiger Verlauf aus den gemessenen Randfarben des Fotos (je Variante die Seite, an der das Foto endet), damit nichts abreißt.
   Am Desktop: Karte links (Milchglas), Gesicht rechts.
   Wellenlinien kommen aus dem Baustein (eine eigene Linie lief daneben und quer übers Foto, Andreas 2026-10-21). */
body.neu .modul.modul-bild-voll:not(.modul-hero) { padding: 0; gap: 0; background: var(--modul-farbe); }
body.neu .modul-bild-voll .bildvoll { display: block; position: relative; max-width: none; padding: 0; background: none; }
body.neu .modul-bild-voll .bildvoll-bild { overflow: hidden; background: #b1b3b2; }
body.neu .modul-bild-voll .bildvoll-bild img { display: block; max-width: none; border-radius: 0; }
body.neu .modul-bild-voll .bildvoll-bild .nur-desktop { display: none; }   /* Foto je Gerät: Handy-Foto am Handy, Desktop-Foto ab 900 px (sonst überdeckt das zweite das erste) */
@media (min-width: 900px) { body.neu .modul-bild-voll .bildvoll-bild .nur-desktop { display: block; } body.neu .modul-bild-voll .bildvoll-bild .nur-handy { display: none; } }
body.neu .modul-bild-voll .karte { display: flex; flex-direction: column; gap: 18px; }
body.neu .modul-bild-voll .karte > h2 { font-family: var(--fliess); font-size: 13px; font-weight: 400; line-height: normal; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gruen-dunkel); text-align: left; }
body.neu .modul-bild-voll .karte h3 { font-size: 40px; line-height: 1.05; font-weight: 500; }
body.neu .modul-bild-voll .karte > p { padding: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
body.neu .modul-bild-voll .karte > .knoepfe { padding: 8px 0 0; }


@media (max-width: 899px) {
  /* Handy: Foto ganze Breite mit Wellenrand oben und unten, darunter die Karte auf der Modulfarbe */
  body.neu .modul.modul-bild-voll:not(.modul-hero) { padding-bottom: 56px; }
  body.neu .modul-bild-voll .bildvoll-bild { aspect-ratio: 4 / 3; margin: -20px 0 20px; }
    body.neu .modul-bild-voll .bildvoll-foto { width: 100%; height: 100%; object-fit: cover; object-position: 46% 12%; }
  body.neu .modul-bild-voll .karte { padding: 0 22px; }
}
@media (min-width: 900px) {
  /* Feste Maße statt Fensterbreite (Andreas 2026-10-21): Karte 380 px breit, Modul mind. 720 px hoch und mit der Karte
     wachsend – die Karte passt immer hinein, Foto und Modul ändern sich nicht mit dem Fenster. */
  body.neu .modul-bild-voll .bildvoll { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 720px;
    padding: 24px clamp(40px, 8.5cqw, 140px); }
  body.neu .modul-bild-voll .bildvoll-bild { position: absolute; inset: -20px 0; }
  body.neu .modul-bild-voll .bildvoll-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  body.neu .modul-bild-voll .karte { position: relative; z-index: 5; width: 380px; padding: 40px 44px 44px; border-radius: 28px; gap: 22px; }
  body.neu .modul-bild-voll .karte > p { font-size: 17px; }
  body.neu .modul-bild-voll .karte h3 { font-size: 38px; }

  /* Gesicht rechts, Milchglas-Karte links (Hintergrund scheint durch; Andreas 2026-10-21: Variante 7b gewählt). Das Foto ist fertig komponiert
     (Hintergrund, Ausblendung, Abstände im Bild) – hier kein Verlauf und keine Maske mehr. */
  body.neu .modul-bild-voll .bildvoll { justify-content: flex-start; }
  body.neu .modul-bild-voll .karte-milchglas-links, body.neu .modul-bild-voll .karte-milchglas-rechts { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 18px 50px rgba(36, 36, 32, .14); }
}

/* Foto allein („::: modul bild-voll“ ohne weiteren Inhalt, Paartherapie 2026-10-28): das ganze Foto über die volle Modulbreite, oben und unten
   auf die Sandkante zugeschnitten (Baustein .bild-welle); die grüne Linie bleibt bewusst versetzt darüber. Das Foto läuft 20 px
   unter jede Welle (margin -20px), die Modulhöhe ergibt sich daraus = Fotohöhe − 40 px – für jedes Seitenverhältnis, Handy wie Desktop. */
body.neu .modul.modul-nur-bild { padding: 0; gap: 0; }
body.neu .modul-nur-bild .nurbild { margin: -20px 0; max-width: none; }
body.neu .modul-nur-bild .nurbild img { display: block; width: 100%; height: auto; max-width: none; border-radius: 0; }

/* ::: zentriert – Inhalt eines Moduls mittig (Kinesiologie-Schluss, Andreas 21.10.2026): Überschrift, Text, Knöpfe nebeneinander (Desktop) */
.zentriert { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.zentriert > p { max-width: 600px; }
.zentriert .knoepfe { align-self: stretch; margin-top: 8px; }
@media (min-width: 900px) {
  .zentriert .knoepfe { flex-direction: row-reverse; max-width: 720px; width: 100%; margin: 12px auto 4px; gap: 12px; }
  .zentriert .knoepfe > * { flex: 1; min-height: 62px; }
  .zentriert .knoepfe > :first-child { flex: 1.3; }
}

/* ::: klein | mittel | gross | handschrift – Schrift im .md wählen statt im CSS (Andreas 21.10.2026). Gilt für Absätze und Listen darin;
   „mittel“ ist der normale Fließtext (zum Zurücksetzen, z. B. in ::: zentriert). Lässt sich mit ::: zentriert verschachteln. */
.modul .schrift-klein :is(p, li) { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.modul .schrift-mittel :is(p, li) { font-size: 17px; line-height: 1.62; color: var(--text); }
.modul .schrift-gross :is(p, li) { font-size: 21px; line-height: 1.45; color: var(--text); }
.modul .schrift-handschrift :is(p, li) { font-family: var(--schreib); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--gruen-dunkel); }
@media (min-width: 900px) {
  .modul .schrift-klein :is(p, li) { font-size: 16px; }
  .modul .schrift-mittel :is(p, li) { font-size: 20px; }
  .modul .schrift-gross :is(p, li) { font-size: 25px; }
  .modul .schrift-handschrift :is(p, li) { font-size: 34px; }
}

/* ::: desktop / ::: handy – Inhalt nur auf dem jeweiligen Gerät (Grenze 900 px wie überall) */
.nur-desktop { display: none; }
@media (min-width: 900px) { .nur-desktop { display: revert; } .nur-handy { display: none; } }

/* „::: zweispaltig karten“ (Andreas 2026-10-22, Familienaufstellung „Zwei Wege“): zwei Karten, Sand und Hellgrün, mit
   Etikett (### als Pille auf der oberen Kante) und je einer großen runden Ecke; am Desktop nebeneinander, die zweite
   versetzt und über die Lesebreite hinaus bis an die 1040-px-Spalte; am Handy untereinander. Listen ohne Punkte. */
.zweispaltig.karten { display: flex; flex-direction: column; gap: 52px; margin-top: 30px; }
.zweispaltig.karten > .spalte { display: flex; flex-direction: column; gap: 18px; position: relative;
  background: var(--sand); border-radius: 40px 32px 28px 67px; padding: 56px 28px 36px; }
.zweispaltig.karten > .spalte:nth-child(2) { background: var(--gruen-hell); border-radius: 40px 67px 32px 28px; }
/* Auf sandigem Modul wäre die Sand-Karte unsichtbar: dort Weiß und etwas kräftigeres Hellgrün (Andreas 2026-10-22) */
.modul-sand .zweispaltig.karten > .spalte { background: #fff; }
.modul-sand .zweispaltig.karten > .spalte:nth-child(2) { background: var(--gruen-hover); }
.zweispaltig.karten h3 { position: absolute; top: 0; left: 24px; transform: translateY(-50%); margin: 0;
  padding: 11px 22px; border-radius: 26px; background: #7A9B8F; color: #fff;   /* Beschriftung, kein Knopf: Knopffarbe nur für Klickbares (Andreas 2026-10-28, W-14; 25.–28.10. war es --bedien) */
  max-width: calc(100% - 40px); box-sizing: border-box; font: 500 22px/1.15 var(--titel); }
.zweispaltig.karten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.zweispaltig.karten :is(li, p) { margin: 0; padding: 0; font-size: 17px; line-height: 1.6; }   /* Absätze (z. B. Link unten) so groß wie die Liste */
.zweispaltig.karten li::before { content: none; }
.zweispaltig.karten + .zentriert { margin-top: 28px; }
@media (min-width: 900px) {
  .unterseite .zweispaltig.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start;
    margin: 44px min(0px, (var(--innen, 1040px) - min(100vw, 1040px)) / 2) 0; }
  .zweispaltig.karten > .spalte { gap: 28px; padding: 92px 64px 60px 80px; border-radius: 72px 56px 48px 140px; }
  .zweispaltig.karten > .spalte:nth-child(2) { margin-top: 108px; border-radius: 80px 140px 56px 48px; }
  .zweispaltig.karten h3 { left: 56px; max-width: calc(100% - 88px); padding: 15px 30px; border-radius: 34px; font-size: 28px; }
  .zweispaltig.karten ul { gap: 24px; }
  .zweispaltig.karten :is(li, p) { font-size: 20px; line-height: 1.75; }
  /* Landeplatz unter den Karten: Abstand wie zwischen Absätzen eines Moduls, Knopf so breit wie das Erstgespräch im Abschlussblock */
  .zweispaltig.karten + .zentriert { margin-top: 44px; }
  .zweispaltig.karten + .zentriert .knoepfe { justify-content: center; }
  .zweispaltig.karten + .zentriert .knoepfe > .button { flex: 0 1 400px; }
}

/* „::: zweispaltig karten glas“ (Psychosomatik, Andreas 2026-10-24): gleiche Anordnung und grüne Etikett-Pille wie „karten“, aber Farbe und Form
   der Milchglas-Karte (Mitte-Foto-Modul): weiß halbtransparent mit Unschärfe, Schatten, überall dieselbe Rundung. Familienaufstellung bleibt Sand/Hellgrün. */
.zweispaltig.karten.glas > .spalte, .zweispaltig.karten.glas > .spalte:nth-child(2),
.modul-sand .zweispaltig.karten.glas > .spalte, .modul-sand .zweispaltig.karten.glas > .spalte:nth-child(2) {
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border-radius: 28px; box-shadow: 0 0 0 1px rgba(232, 227, 216, .9), 0 18px 50px rgba(36, 36, 32, .14); }
/* Etikett mittig auf der Oberkante, Innenabstand links = rechts (Andreas 2026-10-24) */
.zweispaltig.karten.glas h3 { left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 32px); text-align: center; }
.zweispaltig.karten.glas > .spalte { padding-inline: 28px; }
@media (min-width: 900px) {
  .zweispaltig.karten.glas > .spalte, .zweispaltig.karten.glas > .spalte:nth-child(2) { border-radius: 28px; padding: 88px 40px 52px; }
  .zweispaltig.karten.glas h3 { left: 50%; max-width: calc(100% - 32px); }
}

/* Karte rechts: Foto liegt links, Karte rechtsbündig im Modul */
@media (min-width: 900px) {
  body.neu .modul-bild-voll .bildvoll:has(.karte-milchglas-rechts) { justify-content: flex-end; }
  body.neu .modul-bild-voll .bildvoll:has(.karte-milchglas-rechts) .bildvoll-foto { object-position: left center; }
}

/* Karte rechts (Traumatherapie, Andreas 2026-10-22): wenig durchsichtiges Milchglas; zwei Knöpfe ({{ button }} in einem Absatz) in einer Zeile,
   gleichmäßig verteilt, mit grünem Rand – kräftiger als der helle Zweitknopf, leiser als der gefüllte Knopf des Infocalls. */
@media (min-width: 900px) {
  body.neu .modul-bild-voll .karte-milchglas-rechts { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(32px) saturate(1.05);
    backdrop-filter: blur(32px) saturate(1.05); box-shadow: 0 18px 50px rgba(36, 36, 32, .16); }
}
body.neu .modul-bild-voll .karte-milchglas-rechts > .knoepfe { flex-direction: row; gap: 12px; margin: 0; padding: 0; }
body.neu .modul-bild-voll .karte-milchglas-rechts > .knoepfe > .button { flex: 1 1 0; min-height: 48px; padding: 0 12px; border-radius: 12px;
  background: var(--gruen-hell); box-shadow: inset 0 0 0 1.5px var(--gruen); color: var(--gruen-dunkel); font-size: 15px; }
body.neu .modul-bild-voll .karte-milchglas-rechts > .knoepfe > .button:hover { background: var(--gruen-hover); }

/* Foto-oben-Modul („::: modul bild-oben“ + ::: text-unten, Traumatherapie, Andreas 2026-10-22, Entwurf 10a): breites Foto oben, darunter links Zitat und Text,
   rechts Namen und zwei Knöpfe. Das Foto wird oben auf die Wellenkante zugeschnitten (Baustein .bild-welle, läuft 20 px unter die Welle);
   die sichtbare Fläche zwischen den Wellenmitten ist exakt der Zuschnitt des Entwurfs (Ausschnitt x 0–2300, y 166–1449 des Originals 2458×1565,
   Seitenverhältnis 2300:1283): das Bild wird nicht per object-fit beschnitten, sondern so skaliert und verschoben, dass der Ausschnitt die Fläche füllt.
   Die Unterkante des Fotos hat dieselbe Welle wie die Oberkante (Andreas 2026-10-23, .bw-unten, läuft 20 px über den Text); Zuschnitt wie am Handy:
   Ausschnitt x 44–1971, y 119–1564 des Originals = genau das Handy-Foto, Format 1927:1445 (Andreas 2026-10-23). */
body.neu .modul.modul-bild-oben { padding: 0; gap: 0; background: var(--modul-farbe); container-type: inline-size; }
body.neu .modul-bild-oben .bildoben { position: relative; }
body.neu .modul-bild-oben .bildoben-bild { overflow: hidden; background: #b1b3b2; }
body.neu .modul-bild-oben .bildoben-foto { position: absolute; display: block; max-width: none; border-radius: 0; }
body.neu .modul-bild-oben .bildoben-foto.nur-desktop { display: none; }   /* Foto je Gerät: Handy-Zuschnitt am Handy, Desktop-Foto ab 900 px */
@media (min-width: 900px) { body.neu .modul-bild-oben .bildoben-foto.nur-desktop { display: block; } body.neu .modul-bild-oben .bildoben-foto.nur-handy { display: none; } }
body.neu .modul-bild-oben .text-unten-rechts > * { text-align: left; margin: 0; max-width: none; }
body.neu .modul-bild-oben .text-unten { display: grid; gap: 28px; padding: 36px 22px 56px; }
body.neu .modul-bild-oben .text-unten-links .schrift-handschrift p { font-size: 34px; line-height: 1.12; margin: 0 0 14px; }
body.neu .modul-bild-oben .text-unten-links > p { font-size: 17px; line-height: 1.6; color: var(--text); }
body.neu .modul-bild-oben .text-unten-rechts { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid #D9D1BF; }
body.neu .modul-bild-oben .text-unten-rechts > h2 { font-family: var(--fliess); font-size: 13px; font-weight: 400; line-height: normal; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gruen-dunkel); }
body.neu .modul-bild-oben .text-unten-rechts > h3 { font-size: 36px; line-height: 1.05; font-weight: 500; }
body.neu .modul-bild-oben .text-unten-rechts > .knoepfe { flex-direction: row; gap: 12px; margin: 0; padding: 4px 0 0; }
body.neu .modul-bild-oben .text-unten-rechts > .knoepfe > .button { flex: 1 1 0; min-height: 56px; padding: 0 12px;
  border-radius: 14px; background: var(--gruen-hell); box-shadow: inset 0 0 0 1.5px var(--gruen); color: var(--gruen-dunkel); font-size: 18px; font-weight: 500; }
body.neu .modul-bild-oben .text-unten-rechts > .knoepfe > .button:hover { background: var(--gruen-hover); }

@media (max-width: 899px) {
  /* Handy: Foto ganze Breite, Wellenkante oben und unten (Baustein), darunter der Text untereinander */
  body.neu .modul-bild-oben .bildoben-bild { aspect-ratio: 4 / 3; margin: -20px 0 0; }
  body.neu .modul-bild-oben .bildoben-foto { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
}
@media (min-width: 900px) {
  /* Fläche zwischen Wellenmitte oben und gerader Unterkante = Entwurfs-Ausschnitt; das Maskenfeld ragt oben 20 px über die Modulkante */
  body.neu .modul-bild-oben .bildoben-bild { height: calc(100cqw * 1445 / 1927 + 40px); margin: -20px 0 -20px; }
  body.neu .modul-bild-oben .bildoben-foto { left: calc(-100cqw * 44 / 1927); width: calc(100cqw * 2458 / 1927); height: auto; top: calc(20px - 100cqw * 119 / 1927); }
  body.neu .modul-bild-oben .text-unten { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; align-items: center; max-width: 1560px; margin: 0 auto;
    padding: clamp(40px, 4.4cqw, 70px) clamp(40px, 6.2cqw, 120px) clamp(56px, 5.5cqw, 90px); }
  body.neu .modul-bild-oben .text-unten-links { padding-right: clamp(40px, 5.6cqw, 90px); }
  body.neu .modul-bild-oben .text-unten-links .schrift-handschrift p { font-size: clamp(34px, 2.95cqw, 46px); margin-bottom: 18px; }
  body.neu .modul-bild-oben .text-unten-links > p { font-size: clamp(17px, 1.35cqw, 21px); line-height: 1.75; }
  body.neu .modul-bild-oben .text-unten-rechts { padding: 14px 0 14px clamp(40px, 4.6cqw, 72px); border-top: 0; border-left: 1px solid #D9D1BF; gap: 18px; }
  body.neu .modul-bild-oben .text-unten-rechts > h2 { font-size: clamp(13px, 1.2cqw, 18px); }
  body.neu .modul-bild-oben .text-unten-rechts > h3 { font-size: clamp(34px, 2.8cqw, 44px); }
  body.neu .modul-bild-oben .text-unten-rechts > .knoepfe { gap: 16px; padding-top: 10px; }
  body.neu .modul-bild-oben .text-unten-rechts > .knoepfe > .button { min-height: clamp(56px, 4.5cqw, 70px); border-radius: 16px; font-size: clamp(18px, 1.45cqw, 22px);
    box-shadow: inset 0 0 0 2px var(--gruen); }
}

/* Portraitkarten (Traumatherapie, Variante A, Andreas 2026-10-23): zwei weiße Karten mit runden Ecken, oben das Foto im Querformat,
   darunter Name, Rolle (Handschrift) und Kurztext wie auf der Startseite. Handy: untereinander. */
.portraitkarten { display: grid; gap: 20px; margin-top: 12px; }
.portraitkarte { display: flex; flex-direction: column; gap: 20px; padding: 12px 12px 28px; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px #E6E0D2, 0 10px 30px rgba(36, 36, 32, .07); }   /* auch im weißen Modul als Karte erkennbar */
.portraitkarte-bild { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 2; }
body.neu .portraitkarte-bild img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; object-position: center 30%; }
.portraitkarte-text { display: flex; flex-direction: column; gap: 10px; padding: 0 14px; }
.portraitkarte-text > div { display: flex; flex-direction: column; gap: 2px; }
.portraitkarte h3 { font-size: 34px; line-height: 1.1; text-align: left; }
.portraitkarte .rolle { font-family: var(--schreib); font-weight: 600; font-size: 30px; line-height: 1; color: var(--gruen-dunkel); text-align: left;
  margin-block: 3px; }   /* minimal Luft um die Handschrift (Andreas 2026-10-31); Desktop 4 px */
/* Text vor und nach den Karten bleibt normaler Lesetext (Breite, Größe, Ausrichtung wie jeder Absatz im Modul); nur der Abstand zu den Karten */
body.neu .modul > .portraitkarten + p { margin-top: 12px; }
.portraitkarte-text > p { font-size: 17px; line-height: 1.6; color: var(--text); text-align: left; margin: 0; max-width: none; }
@media (min-width: 900px) {
  /* Nur die Karten werden breiter als der Lesebereich (bis 1000 px, Rand ≥ 32 px); Überschrift und Text im Modul behalten die Lesebreite.
     Inhaltsbreite des Moduls = --innen − 2 × --rand, die Karten ragen je Seite um die Differenz zur Kartenbreite heraus. */
  .portraitkarten { grid-template-columns: 1fr 1fr; align-self: stretch; width: auto; max-width: none; gap: 28px; margin-top: 20px;
    margin-inline: min(0px, (var(--innen, 1040px) - 2 * var(--rand) - min(1000px, 100vw - 64px)) / 2); }
  .portraitkarte { padding: 16px 16px 40px; border-radius: 28px; }
  .portraitkarte-bild { border-radius: 20px; }
  .portraitkarte-text { padding: 0 24px; gap: 12px; }
  .portraitkarte h3 { font-size: 38px; }   /* leichter (Andreas 2026-11-01, voller Name): Name 44→38, Handschrift 38→32 */
  .portraitkarte .rolle { font-size: 32px; margin-block: 4px; }
  .portraitkarte-text > p { font-size: 20px; line-height: 1.65; }
  /* Beide Karten auf gemeinsamen Zeilen (Andreas 2026-10-31): „Methoden“, die Liste und der Link stehen nebeneinander auf einer Höhe,
     auch wenn ein Kurztext länger ist – über ein Subgrid statt zufällig versetzt. Zeilen: Foto + Teile des Kartentexts
     (Name, Text, Link = 4; mit Methoden: Name, Text, „Methoden“, Liste, Link = 6). */
  .portraitkarte { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 12px; }
  .portraitkarten:has(.fragen) .portraitkarte { grid-row: span 6; }
  .portraitkarte-text { display: contents; }
  .portraitkarte-text > * { padding-inline: 24px; }
  .portraitkarte-bild { margin-bottom: 8px; }   /* 12 + 8 = 20 px Foto → Name wie bisher */
}
/* Fotokarte (Paartherapie, „Worum es bei uns geht“, Andreas 2026-10-28): eine weiße Karte, Foto oben bündig mit runden Ecken, darunter ein Satz.
   Lesebreite, mittig; im weißen Modul über Rand erkennbar wie die Portraitkarten. */
.fotokarte { display: flex; flex-direction: column; width: 100%; max-width: 520px; margin: 24px auto 0; overflow: hidden; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px #E6E0D2, 0 10px 30px rgba(36, 36, 32, .07); }
.fotokarte-bild { display: block; aspect-ratio: 1.6 / 1; overflow: hidden; }
body.neu .fotokarte-bild img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; object-position: center 30%; }
.fotokarte-text { padding: 20px 26px 22px; }
.fotokarte-text > p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text); text-align: left; max-width: none; }
@media (min-width: 900px) { .fotokarte { max-width: 560px; margin-top: 32px; } .fotokarte-text > p { font-size: 20px; } }
/* Methoden zum Aufklappen auf der Karte (::: fragen themen im Kartentext; Traumatherapie, Andreas 2026-10-24) */
/* „Methoden“ ist die Überschrift der Liste: näher an der ersten Methode als am Text darüber (Andreas 2026-10-31; vorher 39 / 32 px sichtbar) */
.portraitkarte-text > p:has(+ .fragen) { margin-top: 14px; color: var(--text); }
.portraitkarte .fragen { margin-top: -11px; }   /* Desktop -14 px: sichtbar je ≈ 22 px */
.portraitkarte .frage h3 { font-size: 21px; }
.portraitkarte .frage summary { padding: 12px 0; }
body.neu .portraitkarte .frage-inhalt > p { font-size: 16px; padding-bottom: 16px; }
@media (min-width: 900px) {
  .portraitkarte .frage h3 { font-size: 23px; }
  .portraitkarte .fragen { margin-top: -14px; }
  body.neu .portraitkarte .frage-inhalt > p { font-size: 17px; }
}

/* Entwurfs-Umschalter (::: varianten, seite-neu.js): schwebende Leiste unten rechts, nur zum Vergleichen */
.varianten-leiste { position: fixed; z-index: 50; right: 16px; bottom: 16px; display: flex; gap: 4px; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 6px 24px rgba(36, 36, 32, .22); font: 500 14px/1 var(--fliess, sans-serif); }
.varianten-leiste button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.varianten-leiste button[aria-pressed="true"] { background: var(--bedien); color: #fff; }

/* Kontaktformular (/kontakt/, system/kontakt.php): Karte und Felder wie die Buchung – Beschriftung steht im Feld (Runde 32, design/basis/formulare.md) */
.kontaktkarte { width: 100%; max-width: 560px; margin-inline: auto; padding: 28px 22px 24px; border-radius: 24px; background: #fff; box-sizing: border-box; }
.modul-weiss .kontaktkarte { background: var(--sand); }
.kontaktkarte h2 { margin: 0 0 6px; font-size: 26px; text-align: left; }
.kontaktkarte p { margin: 0; }
.kontaktkarte p.kontakt-einleitung { margin-bottom: 14px; font-size: 15px; line-height: 1.5; color: #605F59; }
.kontaktkarte .fx { position: relative; margin-top: 10px; }
.kontaktkarte .fx label { position: absolute; left: 15px; top: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: #605F59; pointer-events: none; }
.kontaktkarte :is(input[type=text], input[type=email], input[type=tel], select, textarea) { display: block; width: 100%; box-sizing: border-box;
  padding: 27px 15px 9px; border: 1px solid #9C9182; border-radius: 13px; background: #FDFCFA; font: inherit; font-size: 16px; color: #2F2C28; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.kontaktkarte textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.kontaktkarte select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #FDFCFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23605F59' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.kontaktkarte :is(input, select, textarea):focus { border-color: #5B8C7B; box-shadow: 0 0 0 4px rgb(91 140 123 / .14); }
.kontaktkarte [aria-invalid="true"] { border-color: #A0533A; background-color: #FBF0EC; }
.kontaktkarte p.kontakt-fehler { margin: 6px 2px 0; font-size: 14px; line-height: 1.4; color: #A0533A; }
.kontaktkarte p.kontakt-fehler-oben { margin: 0 0 12px; padding: 10px 14px; border-radius: 13px; background: #FBF0EC; }
.kontakt-knopf { display: block; width: 100%; margin-top: 22px; padding: 15px; border: 0; border-radius: 13px; background: var(--bedien); color: #fff;
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.kontakt-knopf:hover { background: var(--gruen-dunkel); }
.kontakt-ds { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; }
.kontakt-ds input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--bedien); cursor: pointer; }
.kontaktkarte .kontakt-ds label { position: static; font-size: 14px; font-weight: 400; line-height: 1.5; color: #4F4D48; pointer-events: auto; cursor: pointer; }
.kontaktkarte .kontakt-ds [aria-invalid="true"] { outline: 2px solid #A0533A; outline-offset: 2px; }
.modul p.kontakt-weg { max-width: 560px; margin: 18px auto 0; font-size: 16px; text-align: center; }
.kontakt-danke h2 { margin-bottom: 10px; }
.kontakt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bewertungen (Entwurf 2026-11-01, bewertungen.php): Stimmen als weiße Karten wie die Portraitkarten, Sterne im Praxisgrün
   (keine neue Farbe), darunter eine Sternezeile mit Link auf /bewertungen/. Handy untereinander, Desktop drei nebeneinander. */
.stimmen { display: grid; gap: 16px; margin-top: 12px; }
.stimme { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; margin: 0; padding: 22px 22px 20px;
  border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #E6E0D2, 0 10px 30px rgba(36, 36, 32, .07); text-align: left; }
.stimme { min-width: 0; }                                   /* Grid-Kind: lange Wörter dürfen die Karte nicht verbreitern */
.stimme blockquote { display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.stimme blockquote { font-size: 17px; line-height: 1.6; }
.stimme blockquote p { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0; max-width: none; }
.stimme blockquote p:first-child::before { content: "„"; }
.stimme blockquote p:last-child::after { content: "“"; }
.stimme figcaption { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 12px; border-top: 1px solid var(--haarlinie); }
.stimme-wer { font-family: var(--titel); font-weight: 500; font-size: 19px; color: var(--text); }
.stimme-zusatz { font-size: 14px; color: var(--text-3); }
.stimme-bei + .stimme-jahr::before { content: " · "; }
/* Kacheln mit gekürztem Text (Andreas 2026-11-01: drei Kacheln, nicht so lang): höchstens 6 Zeilen, unten ausgeblendet,
   „weiter lesen …“ aus stimmen.js klappt die Kachel auf. Ohne Skript steht der ganze Text da. */
.js .stimmen-kurz .stimme blockquote.gekuerzt:not(.offen) { max-height: calc(6 * 1.6em); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.stimme-mehr { align-self: flex-start; margin-top: -6px; padding: 10px 0; border: 0; background: none; color: var(--gruen-dunkel);
  font: inherit; font-size: 16px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.stimme-mehr:hover { color: var(--bedien); }
.sterne-zeichen { color: var(--gruen-dunkel); letter-spacing: .08em; }
.sterne-klein { flex-basis: 100%; font-size: 14px; line-height: 1; }
.neu .modul .sterne-zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin-top: 16px;
  font-size: 16px; color: var(--text-2); text-align: center; }
.sterne-zeile .sterne-zeichen { font-size: 20px; }
.sterne-zeile strong { font-weight: 600; color: var(--text); }
/* Seite „Alle Bewertungen“: Filter als runde Knöpfe, ohne Skript (Radio + :has) */
.modul .schrift-klein h4 { scroll-margin-top: 90px; margin: 0 0 6px; font-family: var(--titel); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--text); }
.neu .modul .bewertungen-hinweis { margin: 6px auto 0; max-width: 640px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.bewertungen-hinweis > summary { list-style: none; cursor: pointer; }
.bewertungen-hinweis > summary::-webkit-details-marker { display: none; }
.bewertungen-hinweis .mehr { color: var(--gruen-dunkel); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.bewertungen-hinweis .mehr::after { content: ' ›'; }
.bewertungen-hinweis[open] .mehr::after { content: ' ‹'; }
.neu .modul .bewertungen-hinweis > p { margin: 10px 0 0; text-align: left; font-size: inherit; line-height: inherit; color: inherit; }
.bewertungen-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 8px; }
.bewertungen-filter label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--gruen-linie); background: #fff; color: var(--gruen-dunkel); font-size: 16px; cursor: pointer; }
.bewertungen-filter label span { color: var(--text-4); font-size: 14px; }
.bewertungen-filter input { position: absolute; opacity: 0; pointer-events: none; }
.bewertungen-filter label:has(input:checked) { background: var(--bedien); border-color: var(--bedien); color: #fff; }
.bewertungen-filter label:has(input:checked) span { color: #fff; }
.bewertungen-filter label:has(input:focus-visible) { outline: 3px solid var(--gruen); outline-offset: 3px; }
.bewertungen-alle:has(input[value="caroline"]:checked) .stimme:not([data-person="caroline"]),
.bewertungen-alle:has(input[value="andreas"]:checked) .stimme:not([data-person="andreas"]) { display: none; }
@media (min-width: 900px) {
  .stimmen { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; align-self: stretch; width: auto; max-width: none;
    margin-inline: min(0px, (var(--innen, 1040px) - 2 * var(--rand) - min(1000px, 100vw - 64px)) / 2); }
  .stimmen-liste { grid-template-columns: repeat(2, 1fr); align-items: start; }   /* ohne Skript: zeilenweise nach Datum (links, rechts) */
  .stimmen-liste.versetzt { grid-auto-rows: 4px; row-gap: 0; }   /* 4 px (nicht 1): Firefox kappt ein Raster bei 10 000 Zeilen, die Liste ist über 12 000 px hoch */   /* nur wenn stimmen.js gemessen hat (Klasse „versetzt“): Karten füllen die jeweils kürzere Spalte (stimmen.js setzt --zeilen), ungefähr nach Datum von oben nach unten, kaum Lücken */
  .stimmen-liste.versetzt .stimme { grid-row-end: span var(--zeilen, 1); }
  .stimme { padding: 28px 28px 24px; }
  .stimme blockquote, .stimme blockquote p { font-size: 18px; }
}

/* Stimmen-Modul (Fassung „Karten“, Andreas 2026-11-01): Überschrift „Was unsere Klient:innen sagen“ und kleine Sternezeile
   zentriert, darunter Karten wie die Portraitkarten (Grundstil .stimme: weiß, im weißen Modul Sand). Zitat dunkel, Sterne im
   Praxisgrün, Name in der Titelschrift, „bei Caroline · 2026“ grau dahinter. Mehr als drei Stimmen laufen als Karussell. */
.stimmen-block { display: grid; gap: 28px; }
.stimmen-block > * { min-width: 0; }
.neu .modul .stimmen-block > .sterne-zeile { margin: -8px 0 0; }
.modul:not(.modul-sand) .stimmen-block .stimme { background: var(--sand); }
.stimmen-block .stimmen { margin: 0; }
.stimmen-block .stimme figcaption { gap: 4px 8px; padding-top: 0; border-top: 0; }
.stimmen-block .stimme-wer { font-size: 22px; }
.stimmen-block .stimme-zusatz { font-size: 16px; }
.stimmen-block .stimme blockquote, .stimmen-block .stimme blockquote p { font-size: 18px; line-height: 1.6; }
.js .stimmen-block .stimme blockquote.gekuerzt:not(.offen) { max-height: calc(6 * 1lh); }

/* Karussell: Band zum Wischen, das Skript lässt es durchlaufen; Handy eine Karte, Desktop drei. Der Innenabstand lässt Platz
   für die Schatten der Karten und ist schmaler als der Kartenabstand, sonst schaute die nächste Karte herein. */
.stimmen-block .stimmen-karussell { position: relative; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; padding: 8px 20px 36px; margin: -8px -20px -36px; scroll-padding-inline: 20px; }
/* Während des Gleitens ragen halbe Karten über den Bandrand: weich ausblenden statt hart abschneiden (Ruhelage liegt im Innenabstand) */
.stimmen-karussell { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
.js .stimmen-karussell { scrollbar-width: none; }
.js .stimmen-karussell::-webkit-scrollbar { display: none; }
.stimmen-karussell .stimme { flex: 0 0 100%; scroll-snap-align: start; }
.neu .modul .stimmen-alle { margin: 0; text-align: center; font-size: 18px; }
.stimmen-steuerung { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: -4px; }
.stimmen-steuerung button { display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.stimmen-steuerung .stimmen-pause { margin-left: 6px; color: var(--gruen-dunkel); }
.stimmen-pause svg { display: block; }
.stimmen-pause .sym-play, .stimmen-pause[aria-pressed="true"] .sym-pause { display: none; }
.stimmen-pause[aria-pressed="true"] .sym-play { display: block; }
.stimmen-pause:hover { color: var(--bedien); }
.stimmen-steuerung button:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.stimmen-punkt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen-linie); }
.stimmen-punkt.an::before { background: var(--gruen-dunkel); }

@media (max-width: 899px) {
  .stimmen-block .stimmen:not(.stimmen-karussell) { gap: 16px; }
}
@media (min-width: 900px) {
  body.neu .modul.modul:has(> .komponenten > .stimmen-block) { --innen: 1040px; }   /* drei Karten brauchen die volle Breite */
  .stimmen-block .stimmen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; margin-inline: 0; }
  .stimmen-karussell .stimme { flex-basis: calc((100% - 48px) / 3); }
}