/* Ava Mentis – Fassung 2
   Wellen, Blobs, Linienzeichnungen, geteiltes Menü; Palette aus dem eigenen Logo: Petrol der Wortmarke
   für Text und Linien, die Wärme aus dem Schwung (Rosé, Apricot, Sonne) als Flächen.
   Dazu Doppelrand, Pillen-Buttons mit Pfeil im Kreis, Überzeilen als Pille, Papierkörnung,
   weiche Einblendung, Vollbild-Menü. */

/* ------------------------------------------------------------------ Schriften (selbst gehostet) */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
/* Montserrat als Ersatz der Display-Schrift (Darstellung „Lesbare Schrift“): verkleinert auf die x-Höhe der Cormorant,
   damit Überschriften, Navigation und Hero-Titel in ihren Zeilen bleiben */
@font-face { font-family: "Montserrat Lesbar"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 80%; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Lesbar"; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 80%; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Lesbar"; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 80%; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Lesbar"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 80%; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ Design-Tokens (aus dem Logo) */

:root {
  /* Wortmarke */
  --farbe-tinte: #005a6c;
  --farbe-tinte-tief: #00434f;
  --farbe-text: #34565f;
  /* Schwung: Rosé – Apricot – Sonne */
  --farbe-rose: #fc829e;
  --farbe-rose-tiefer: #f76a8b;
  --farbe-apricot: #fcb5a8;
  --farbe-sonne: #fdd485;
  --farbe-sonne-tiefer: #fbc960;
  /* aufgehellte Flächen */
  --grund: #fffdfa;
  --hauch-apricot: #fdf5f0;
  --hauch-rose: #fdeef1;
  --hauch-sonne: #fef7e6;
  /* Zartgelb der Illu-Blobs, bevor ihr Abschnitt die Bildschirmmitte passiert (40 % Sonne auf Weiß) */
  --sonne-zart: #feeece;
  --linie-zart: rgba(0, 90, 108, 0.12);
  /* Rand von Bedienelementen (Formularfelder, Schalter, Auswahl-Pillen): mind. 3 : 1 zum Grund (WCAG 1.4.11) */
  --linie-feld: rgba(0, 90, 108, 0.65);
  --feld: #ffffff;

  --schwung: linear-gradient(90deg, #fc829e 0%, #fcb5a8 50%, #fdd770 100%);
  /* derselbe Verlauf, sehr dezent: Fläche beim Überfahren der Unterpunkte in der Navigation */
  --schwung-zart: linear-gradient(90deg, rgba(252, 130, 158, 0.13) 0%, rgba(252, 181, 168, 0.13) 50%, rgba(253, 215, 112, 0.16) 100%);
  /* derselbe Verlauf geneigt und etwas kräftiger: Fläche der Schalen (Doppelrand) beim Überfahren */
  --schwung-zart-schraeg: linear-gradient(120deg, rgba(252, 130, 158, 0.24) 0%, rgba(252, 181, 168, 0.24) 50%, rgba(253, 215, 112, 0.3) 100%);
  /* Pastelltöne des Sofas in der Praxis (kühles Graublaugrün, Farbton 182°) in vier Helligkeiten:
     Fläche der Termin-Bänder, aufgelockert durch weiche Lichtflecken */
  --hauch-sofa: #e7eeef;
  --hauch-sofa-licht: #f3f7f7;
  --hauch-sofa-mittel: #dde8e9;
  --hauch-sofa-tief: #d4e2e2;

  --schrift-display: "Cormorant Garamond", "Gilda Display", Georgia, serif;
  --schrift-text: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  --t-zitat: clamp(2.1rem, 1.3rem + 2.6vw, 3.1rem);
  --t-titel-gross: clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem);
  --t-titel: clamp(2.05rem, 1.5rem + 1.8vw, 2.75rem);
  --t-karte: clamp(1.7rem, 1.45rem + 0.6vw, 2rem);
  --t-einleitung: 1.125rem;
  --t-text: 1rem;
  --t-klein: 0.8125rem;

  --breite-inhalt: 1200px;
  --breite-weit: 1440px;
  --breite-text: 760px;
  --rand: clamp(20px, 4vw, 40px);
  /* Sichere Ränder (Notch, Kamera-Aussparung, Home-Indikator; viewport-fit=cover): ohne Aussparung 0 */
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  --links-sicher: env(safe-area-inset-left, 0px);
  --rechts-sicher: env(safe-area-inset-right, 0px);
  --abstand-abschnitt: clamp(96px, 10vw, 160px);

  --radius-schale: 2rem;
  --abstand-schale: 8px;
  --radius-kern: calc(var(--radius-schale) - var(--abstand-schale));
  --radius-bild: 1.5rem;
  --schatten-weich: 0 30px 60px -30px rgba(0, 67, 79, 0.18), 0 8px 18px -12px rgba(0, 67, 79, 0.08);

  --kurve: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ------------------------------------------------------------------ Grundlagen */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--grund); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.7;
  font-variant-numeric: lining-nums; /* Cormorant setzt sonst Mediävalziffern: „1“ sieht aus wie „I“ */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Papierkörnung: fest stehend, damit beim Scrollen nichts neu gezeichnet werden muss. Unter der Kopfleiste (z-index 40):
   Safari 26 färbt den Bereich hinter der Statusleiste nach der obersten festen Ebene am oberen Rand – die Körnung
   hat keine Hintergrundfarbe, darüber schien dort sonst der Seiteninhalt durch */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Nur iOS: schmaler deckender Streifen ganz oben in der Grundfarbe. Safari 26 liest die Farbe für den Bereich hinter
   Uhr und Dynamic Island beim Laden aus der obersten festen Ebene am oberen Rand – die Kopfleiste ist dann über dem
   Hero noch durchsichtig, also dient dieser Streifen als Farbquelle (mind. 3 px hoch, 80 % breit, oben bündig) */
.statusleiste { display: none; }
@supports (-webkit-touch-callout: none) {
  .statusleiste {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100; pointer-events: none;
    background-color: var(--grund);
  }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--farbe-tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--farbe-apricot); transition: color 0.4s var(--kurve), text-decoration-color 0.4s var(--kurve); }
a:hover { color: var(--farbe-tinte-tief); text-decoration-color: var(--farbe-rose); }

/* Fokusrahmen in Petrol (7,8 : 1 auf dem Grund; Rosé erreichte nur 2,4 : 1), auf dunklen Flächen in Weiß (11 : 1) */
:focus-visible { outline: 2px solid var(--farbe-tinte); outline-offset: 3px; border-radius: 6px; }
:is(.band:not(.band--sofa), .fuss) :focus-visible { outline-color: #fff; }
/* Markierter Text im Gelb des Logos; die Schrift wird Tinte, damit sie auch auf Petrol-Flächen lesbar bleibt */
::selection { background: var(--farbe-sonne); color: var(--farbe-tinte-tief); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--farbe-tinte); }

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--farbe-tinte);
  letter-spacing: 0.002em;
}

.visuell-versteckt {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sprunglink {
  position: absolute; left: 12px; top: 0; translate: 0 -150%; z-index: 100;
  background: var(--farbe-tinte); color: #fff; padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.sprunglink:focus { translate: 0 12px; }

.rahmen {
  width: 100%; max-width: calc(var(--breite-inhalt) + 2 * var(--rand)); margin-inline: auto;
  padding-left: max(var(--rand), var(--links-sicher)); padding-right: max(var(--rand), var(--rechts-sicher));
}
.rahmen--weit { max-width: calc(var(--breite-weit) + 2 * var(--rand)); }
.rahmen--schmal { max-width: calc(var(--breite-text) + 2 * var(--rand)); }

/* Sicherheitsnetz: nichts darf seitlich über den Bildschirm ragen – sonst wird das Layout-Fenster auf Handys
   breiter und der feste Kopf mit dem Menü-Knopf rutscht aus dem Bild. clip statt hidden: kein Scrollcontainer */
main { overflow-x: clip; }

/* ------------------------------------------------------------------ Einblenden beim Scrollen */

.js [data-erscheinen] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 0.9s var(--kurve), transform 0.9s var(--kurve), filter 0.9s var(--kurve);
  transition-delay: var(--verzug, 0ms);
}
.js [data-erscheinen].ist-sichtbar { opacity: 1; transform: none; filter: none; }
/* Fotoblöcke ohne Unschärfe: blur auf großen Bildflächen ruckelt auf Handys */
.js [data-erscheinen]:has(img) { filter: none; }

/* ------------------------------------------------------------------ Typografische Bausteine */

/* Überzeile als kleine weiße Pille mit dezentem Schatten und Punkt im Logo-Schwung – überall gleich.
   Inline-Block statt Flex: bricht der Text um, bleibt der Punkt direkt vor dem ersten Wort.
   Umbrechende Überzeilen schrumpft seite.js auf die längste Zeile; max-width ist der Rückfall ohne JavaScript */
.overline {
  display: inline-block; text-wrap: balance;
  padding: 5px 13px 5px 11px; margin: 0 0 1.1em;
  background: #fff; border-radius: 999px;
  box-shadow: 0 4px 14px -8px rgba(0, 67, 79, 0.14), 0 0 0 1px rgba(0, 90, 108, 0.035);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase;
}
html:not(.js) .overline { max-width: 85%; }
.overline::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 0.1em; border-radius: 50%; background: var(--schwung); }

.titel-gross { font-size: var(--t-titel-gross); font-weight: 400; }
.titel { font-size: var(--t-titel); font-weight: 500; }
.titel-karte { font-size: var(--t-karte); font-weight: 500; margin-bottom: 0.3em; }

.leitsatz {
  font-family: var(--schrift-display); font-size: var(--t-zitat); font-weight: 300;
  line-height: 1.14; margin: 0 0 0.6em; color: var(--farbe-tinte);
}
.leitsatz strong { font-weight: 600; }

.einleitung { font-size: var(--t-einleitung); line-height: 1.65; }

.zentriert { text-align: center; }
.zentriert .rahmen--schmal, .zentriert.rahmen--schmal { margin-inline: auto; }

/* ------------------------------------------------------------------ Knöpfe: Pille, das Symbol gleitet beim Überfahren herein */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 7px 26px;
  background: var(--farbe-tinte); color: #fff;
  border: 0; border-radius: 999px;
  box-shadow: 0 14px 30px -16px rgba(0, 67, 79, 0.55);
  font-family: var(--schrift-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform 0.5s var(--kurve), background-color 0.5s var(--kurve), box-shadow 0.5s var(--kurve);
}
/* Hover-Zustände der Knöpfe nur bei echtem Zeiger: auf Touchgeräten blieben sie nach dem Antippen stehen */
@media (hover: hover) { .knopf:hover { background: var(--farbe-tinte-tief); color: #fff; box-shadow: 0 18px 36px -16px rgba(0, 67, 79, 0.6); } }
.knopf:active { transform: scale(0.98); }
.knopf svg { width: 16px; height: 16px; flex: none; }
.knopf__pfeil {
  display: inline-flex; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.5s var(--kurve), margin-left 0.5s var(--kurve), opacity 0.4s var(--kurve);
}
.knopf:focus-visible .knopf__pfeil { max-width: 16px; margin-left: 10px; opacity: 1; }
@media (hover: hover) { .knopf:not(:disabled):hover .knopf__pfeil { max-width: 16px; margin-left: 10px; opacity: 1; } }
.knopf__vorne {
  display: inline-flex; max-width: 16px; margin-right: 10px; opacity: 1; overflow: hidden;
  transition: max-width 0.5s var(--kurve), margin-right 0.5s var(--kurve), opacity 0.3s var(--kurve);
}
.knopf:focus-visible .knopf__vorne:not(.knopf__vorne--fest) { max-width: 0; margin-right: 0; opacity: 0; }
@media (hover: hover) { .knopf:hover .knopf__vorne:not(.knopf__vorne--fest) { max-width: 0; margin-right: 0; opacity: 0; } }

/* Zwei Beschriftungen übereinander, die breitere bestimmt die Breite; beim Überfahren wechseln sie */
.knopf__wechsel { display: inline-grid; }
.knopf__wechsel > span { grid-area: 1 / 1; transition: opacity 0.4s var(--kurve), transform 0.5s var(--kurve); }
.knopf__wechsel > span + span { opacity: 0; transform: translateY(60%); }
.knopf:focus-visible .knopf__wechsel > span:first-child { opacity: 0; transform: translateY(-60%); }
.knopf:focus-visible .knopf__wechsel > span + span { opacity: 1; transform: none; }
@media (hover: hover) {
  .knopf:hover .knopf__wechsel > span:first-child { opacity: 0; transform: translateY(-60%); }
  .knopf:hover .knopf__wechsel > span + span { opacity: 1; transform: none; }
}

.knopf--sonne { background: var(--farbe-sonne); color: var(--farbe-tinte); box-shadow: 0 14px 30px -18px rgba(214, 160, 40, 0.7); }
@media (hover: hover) { .knopf--sonne:hover { background: var(--farbe-sonne-tiefer); color: var(--farbe-tinte); } }

.knopf--hell { background: #fff; color: var(--farbe-tinte-tief); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45); }
@media (hover: hover) { .knopf--hell:hover { background: var(--hauch-sonne); color: var(--farbe-tinte-tief); } }

/* Rosé mit weißer Schrift für alle Termin-Knöpfe (außer im Fußbereich).
   Bewusst gewählt, obwohl Weiß auf Rosé nur 2,4 : 1 erreicht */
.knopf--rose { background: var(--farbe-rose); color: #fff; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45); }
@media (hover: hover) { .knopf--rose:hover { background: var(--farbe-rose-tiefer); color: #fff; } }

.knopf--leise { background: #fff; color: var(--farbe-tinte); box-shadow: 0 0 0 1px var(--linie-zart); }
@media (hover: hover) { .knopf--leise:hover { background: var(--hauch-apricot); color: var(--farbe-tinte); } }

.knopf--klein { min-height: 46px; padding: 5px 20px; font-size: 0.78rem; }
.knopf--breit { width: 100%; }

.knopf-gruppe { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.zentriert .knopf-gruppe { justify-content: center; }
.knopf-gruppe--stapel { flex-direction: column; gap: 22px; }
.zentriert .knopf-gruppe--stapel { align-items: center; }

.pfeillink {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--farbe-tinte);
}
.pfeillink svg { width: 16px; height: 16px; transition: transform 0.5s var(--kurve); }
.pfeillink:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------ Doppelrand: Schale und Kern */

.schale {
  padding: var(--abstand-schale);
  border-radius: var(--radius-schale);
  background: rgba(0, 90, 108, 0.035);
  box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.07);
}
.abschnitt--creme .schale { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.06); }
/* Beim Überfahren blendet der geneigte Schwung-Verlauf über der Schalenfläche ein (eigene Ebene, weil sich ein Verlauf
   nicht weich überblenden lässt) – nur bei Angebotskarten, Bildkarten (reagieren auf die ganze Spalte), Anlaufstellen,
   FAQ-Hinweiskasten und Kontaktformular; mobil bei Angebots- und Bildkarten zusammen mit dem Zoom beim Scrollen
   (ist-aktiv, siehe Handy-Abschnitt) */
.karten > .schale, .bildkarte .schale, .notfall > .schale, .hinweiskasten, .formular-schale { position: relative; isolation: isolate; }
.karten > .schale::before, .bildkarte .schale::before, .notfall > .schale::before, .hinweiskasten::before, .formular-schale::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--schwung-zart-schraeg); opacity: 0; transition: opacity 0.5s var(--kurve);
}
.karten > .schale:hover::before, .bildkarte:hover .schale::before, .notfall > .schale:hover::before,
.hinweiskasten:hover::before, .formular-schale:hover::before { opacity: 1; }
.kern {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-kern);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), var(--schatten-weich);
}
.schale--bild { --radius-schale: calc(var(--radius-bild) + var(--abstand-schale)); }
.schale--bild img { border-radius: var(--radius-bild); }

/* ------------------------------------------------------------------ Kopfbereich */

.kopf { background: transparent; position: relative; z-index: 40; }
.kopf__innen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px; min-height: 156px; }
.kopf__logo { display: block; width: 236px; }
.kopf__logo img { width: 100%; }

.navigation > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.2vw, 36px); }
.navigation--links > ul { justify-content: flex-end; }
.navigation--rechts > ul { justify-content: flex-start; }
.navigation > ul > li { position: relative; }
.navigation > ul > li > a {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding-block: 8px;
  font-family: var(--schrift-display); font-size: 1.28rem; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; text-decoration: none; color: var(--farbe-tinte); white-space: nowrap;
}
.navigation > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--schwung); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--kurve);
}
.navigation > ul > li > a:hover::after, .navigation > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Unterpunkte: Glas-Karte unter dem Hauptpunkt, beim Überfahren oder per Tastatur (focus-within) sichtbar */
.navigation__chevron { width: 12px; height: 12px; opacity: 0.6; transition: rotate 0.5s var(--kurve); }
.navigation li:hover .navigation__chevron, .navigation li:focus-within .navigation__chevron { rotate: 180deg; }
.navigation__unter {
  position: absolute; top: calc(100% + 8px); left: -14px; z-index: 45; min-width: 230px;
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px;
  background: rgba(255, 253, 250, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 1.25rem; box-shadow: 0 0 0 1px var(--linie-zart), var(--schatten-weich);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity 0.4s var(--kurve), translate 0.5s var(--kurve), visibility 0s linear 0.4s;
}
/* Brücke über den Spalt, damit die Karte beim Hinüberfahren offen bleibt */
.navigation__unter::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.navigation li:hover > .navigation__unter, .navigation li:focus-within > .navigation__unter { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
/* Esc schließt die Karte (seite.js, ist-zu), bis Zeiger oder Fokus den Punkt verlassen (WCAG 1.4.13) */
.navigation li.ist-zu > .navigation__unter { opacity: 0; visibility: hidden; translate: 0 8px; transition-delay: 0s; }
.navigation__unter a {
  position: relative; display: block; padding: 9px 14px; border-radius: 0.75rem; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--farbe-tinte);
}
/* Hover-Fläche im dezenten Schwung-Verlauf – gemeinsam für Unterpunkte der Navigation, Sprung-Pillen, Kontaktleiste,
   Nach-oben-Knopf und die Auswahl-Pillen im Kontaktformular. Eigene Ebene, weil sich ein Verlauf nicht weich überblenden lässt; isolation hält sie über einem
   eigenen Hintergrund (Pillen) und unter der Schrift */
.navigation__unter a, .pillen a, .kontaktleiste a, .nach-oben, .pillenwahl span { isolation: isolate; }
.navigation__unter a::before, .pillen a::before, .kontaktleiste a::before, .nach-oben::before, .pillenwahl span::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--schwung-zart); opacity: 0; transition: opacity 0.4s var(--kurve);
}
.pillen a::before, .nach-oben::before, .pillenwahl span::before { inset: 3px; } /* weißer Abstand zur Kontur, wie die Kreise der Kontaktleiste in ihrer Glaspille */
.navigation__unter a:focus-visible { color: var(--farbe-tinte); }
.navigation__unter a:focus-visible::before, .pillen a:focus-visible::before,
.kontaktleiste a:focus-visible::before, .nach-oben:focus-visible::before { opacity: 1; }
/* Hover nur bei echtem Zeiger: auf Touchgeräten bliebe er nach dem Antippen stehen (hier und bei Pillen,
   Kontaktleiste und Nach-oben-Knopf unten) */
@media (hover: hover) {
  .navigation__unter a:hover { color: var(--farbe-tinte); }
  .navigation__unter a:hover::before, .pillen a:hover::before, .kontaktleiste a:hover::before, .nach-oben:hover::before,
  .pillenwahl label:hover input:not(:checked) + span::before { opacity: 1; }
}

.menue-knopf { display: none; }
.mobilmenue { display: none; }

/* ------------------------------------------------------------------ Abschnitte und Übergänge */

.abschnitt { padding-block: var(--abstand-abschnitt); position: relative; }
.abschnitt--eng { padding-block: calc(var(--abstand-abschnitt) * 0.45); }
.abschnitt--creme { background: var(--hauch-apricot); }
.abschnitt--vanille { background: var(--hauch-sonne); }
.abschnitt--ohne-oben { padding-top: 0; }
.abschnitt--ohne-unten { padding-bottom: 0; }

.welle { display: block; width: 100%; height: clamp(60px, 7.5vw, 120px); line-height: 0; }
.welle svg { width: 100%; height: 100%; display: block; overflow: visible; }
.welle .welle__flaeche { fill: var(--hauch-apricot); }
.welle .welle__linie { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0.9; }
.welle--unten { transform: scaleY(-1); }

/* ------------------------------------------------------------------ Zeichnungen und Blobs */

.zeichnung { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung * { vector-effect: non-scaling-stroke; }

.motiv { position: relative; width: 220px; aspect-ratio: 1 / 0.9; margin: 0 auto 28px; color: var(--farbe-tinte); }
.motiv--klein { width: 150px; margin-bottom: 18px; }
.motiv__blob { position: absolute; inset: 4% 8% 2% 2%; width: 90%; height: 94%; fill: var(--sonne-zart); transition: fill 0.8s var(--kurve); }
/* Illu-Blobs: zartgelb, bis ihr Abschnitt bzw. ihre Karte die Bildschirmmitte passiert hat (ist-gelb, seite.js),
   danach dauerhaft vollgelb. Ohne JavaScript gleich vollgelb. */
.ist-gelb .motiv__blob, html:not(.js) .motiv__blob { fill: var(--farbe-sonne); }
.motiv__linie { position: absolute; inset: 0; width: 100%; height: 100%; }
.motiv--weiss { color: #fff; }

/* ------------------------------------------------------------------ Startseite: Hero */

.hero { padding-top: 6px; padding-bottom: 0; position: relative; }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.hero__bild img { width: 100%; aspect-ratio: 645 / 600; object-fit: cover; object-position: 60% 30%; }
.hero__text { position: relative; padding-top: 40px; padding-bottom: 70px; max-width: 34rem; }
.hero__text > * { position: relative; z-index: 1; }
/* Anführungszeichen der Headline: hängt im linken Rand neben der ersten Zeile, etwas über die Großbuchstaben hinaus;
   die Headline bleibt bündig mit Überzeile und Text. Das Zeichen braucht samt Abstand rund 0,4 seiner Schriftgröße
   (--zitat); reicht der Seitenrand (--links) dafür nicht, rückt der Hero-Text um den fehlenden Platz ein
   (--zitat-einzug, Hero-Abschnitt unten). */
.hero-voll .leitsatz::before {
  content: "\201C"; position: absolute; right: calc(100% + 0.06em); top: -0.11em; pointer-events: none;
  font-family: var(--schrift-display); font-weight: 400; font-size: var(--zitat); line-height: 1;
  background: var(--schwung); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.6;
}
.hero__name { font-size: 1.0625rem; font-weight: 500; line-height: 1.55; margin-top: 1.5em; color: var(--farbe-tinte); }
.hero__knopf { margin-top: 1.8em; }
/* Wird es auf dem Handy eng (schmale Geräte, größere Textabstände), bricht der Termin-Knopf ausgewogen um, statt über
   den Rand zu ragen. Auf Tablet und im Querformat bleibt er einzeilig (siehe hero-voll unten) */
.hero__knopf .knopf { text-align: center; text-wrap: balance; }


/* ------------------------------------------------------------------ Bild und Text nebeneinander */

.bild-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.bild-text--oben { align-items: start; }
.bild-text--oben .bild-text__bild { margin-top: 12px; }
.bild-text--gespiegelt .bild-text__bild { order: 2; }
.bild-text__bild { position: relative; }
.bild-text__bild img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.bild-text__bild--hoch img { aspect-ratio: 4 / 4.6; }
.bild-text__bild--quadrat img { aspect-ratio: 1; }
.bild-text__bild .motiv { position: absolute; width: 170px; left: -56px; bottom: -48px; margin: 0; z-index: 2; }
.bild-text--gespiegelt .bild-text__bild .motiv { left: auto; right: -56px; }
/* Bis der Rahmen außen genug Luft hat, ragt der Blob weniger weit über das Bild hinaus (sonst über den Bildschirm) */
@media (min-width: 768px) and (max-width: 1320px) {
  .bild-text__bild .motiv { left: -24px; }
  .bild-text--gespiegelt .bild-text__bild .motiv { left: auto; right: -24px; }
}

/* Startseite „Privatpraxis“: Foto und Text als eine Karte (wie der Seitenkopf der Unterseiten) – eine Schale mit
   weißem Kern, das Foto läuft weich in den Textbereich aus. Im Foto: Christina 24–83 % der Breite (Tasse bis 86 %),
   Kopf ab 10 %, Hände bei 55–65 % der Höhe. */
.praxis-karte {
  position: relative; isolation: isolate; gap: 0;
  padding: var(--abstand-schale); border-radius: var(--radius-schale);
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.06);
}
.praxis-karte::before {
  content: ""; position: absolute; inset: var(--abstand-schale); z-index: -2; border-radius: var(--radius-kern);
  background: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), var(--schatten-weich);
}
.praxis-karte > .bild-text__bild { margin: 0; }
.praxis-karte .bild-text__bild .schale { position: relative; padding: 0; overflow: hidden; background: none; box-shadow: none; }
.praxis-karte .bild-text__bild img { max-width: none; border-radius: 0; }
/* Spezifischer als die Bild-Text-Regeln des Handy-Abschnitts (Einrückung, Schalen-Rand), die hier nicht gelten */
.abschnitt .praxis-karte .punkte-karte.schale { margin-inline: 0; padding: 0; background: none; box-shadow: none; }
.praxis-karte .punkte-karte .kern { padding: 0; background: none; box-shadow: none; }

/* Tablet und Handy: Foto oben über die ganze Kartenbreite, von oben bis unter die Hände gezeigt; es läuft nach unten
   um 3° geneigt und weich (in Stufen) aus. Bei 177° endet der Verlauf an der unteren rechten Ecke; an der linken
   Unterkante ist er rund 5 % früher – deshalb ist das Foto ab 95 % ganz durchsichtig. Tablets quer ab 960 px
   bekommen die Desktop-Aufteilung (unten), weil das Foto in voller Breite dort zu groß würde. */
@media (max-width: 959px), (max-width: 1200px) and (max-aspect-ratio: 1/1) {
  .praxis-karte { grid-template-columns: minmax(0, 1fr); --weich: 160px; }
  .praxis-karte .bild-text__bild .schale { border-radius: var(--radius-kern) var(--radius-kern) 0 0; }
  .praxis-karte .bild-text__bild img {
    width: 100%; aspect-ratio: 1 / 1.1; max-height: 85vh; max-height: 85svh; object-fit: cover; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(177deg, #000 calc(95% - var(--weich)), rgba(0, 0, 0, 0.9) calc(95% - var(--weich) * 0.75), rgba(0, 0, 0, 0.6) calc(95% - var(--weich) * 0.5), rgba(0, 0, 0, 0.25) calc(95% - var(--weich) * 0.25), transparent 95%);
    mask-image: linear-gradient(177deg, #000 calc(95% - var(--weich)), rgba(0, 0, 0, 0.9) calc(95% - var(--weich) * 0.75), rgba(0, 0, 0, 0.6) calc(95% - var(--weich) * 0.5), rgba(0, 0, 0, 0.25) calc(95% - var(--weich) * 0.25), transparent 95%);
  }
  /* Text beginnt erst, wo das Foto ganz ausgeblendet ist */
  .abschnitt .praxis-karte > :not(.bild-text__bild) {
    position: relative; margin-top: 4px;
    padding: 0 clamp(24px, 5vw, 56px) clamp(32px, 5vw, 56px);
  }
  .praxis-karte .punkte-karte { margin-top: 8px; }
}
@media (max-width: 767px) {
  .praxis-karte { --weich: 100px; }
}

/* Desktop: Foto links über die ganze Kartenhöhe, reicht ein Stück unter den Textbereich und läuft dort mit 6°
   Neigung aus, nach unten ebenso. Links an der Lampe angeschnitten und so groß, dass der Verlauf erst rechts neben
   Christina beginnt. Bei 84° beziehen sich die Prozentwerte auf die obere rechte Ecke: bis 125 px davor ist das Foto
   an der ganzen rechten Kante durchsichtig (Neigung über die Bildhöhe ≈ 0,1 × 1100 px). */
@media (min-width: 1201px), (min-width: 960px) and (min-aspect-ratio: 1/1) {
  .praxis-karte { --bildbreite: calc(50% + 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .praxis-karte > .bild-text__bild {
    position: absolute; top: var(--abstand-schale); bottom: var(--abstand-schale); left: var(--abstand-schale);
    width: var(--bildbreite); z-index: -1;
  }
  .praxis-karte .bild-text__bild .schale { height: 100%; border-radius: var(--radius-kern) 0 0 var(--radius-kern); }
  .praxis-karte .bild-text__bild img {
    position: absolute; top: 0; left: -27%; width: 126%; height: auto; aspect-ratio: auto;
    /* nie höher als die Karte: dann unten angeschnitten, der untere Verlauf sitzt weiter an der Kartenkante */
    max-height: 100%; object-fit: cover; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(84deg, #000 calc(100% - 290px), rgba(0, 0, 0, 0.85) calc(100% - 245px), rgba(0, 0, 0, 0.5) calc(100% - 200px), rgba(0, 0, 0, 0.15) calc(100% - 155px), transparent calc(100% - 125px)),
      linear-gradient(180deg, #000 calc(100% - 200px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(84deg, #000 calc(100% - 290px), rgba(0, 0, 0, 0.85) calc(100% - 245px), rgba(0, 0, 0, 0.5) calc(100% - 200px), rgba(0, 0, 0, 0.15) calc(100% - 155px), transparent calc(100% - 125px)),
      linear-gradient(180deg, #000 calc(100% - 200px), transparent 100%);
    mask-composite: intersect;
  }
  .praxis-karte > :not(.bild-text__bild) {
    grid-column: 2; position: relative;
    padding: clamp(48px, 4.5vw, 72px) clamp(40px, 4vw, 64px) clamp(48px, 4.5vw, 72px) clamp(64px, 6vw, 96px);
  }
  .praxis-karte .punkte-karte { margin-top: 48px; }
}
/* Tablet quer: schmalere Textspalte – Text etwas dichter, damit die Karte nicht weit unter das Foto hinauswächst */
@media (min-width: 960px) and (max-width: 1200px) and (min-aspect-ratio: 1/1) {
  .praxis-karte .titel { font-size: 1.85rem; }
  .praxis-karte .punkte-karte { margin-top: 32px; }
  .praxis-karte .punkte { gap: 32px; }
  .praxis-karte .punkt { padding-top: 78px; --ziffer-hub: -30px; }
  .praxis-karte .punkt::before { font-size: 7.5rem; top: -6px; }
  .praxis-karte .punkte-karte__fuss { margin-top: 32px; }
  .praxis-karte > :not(.bild-text__bild) { padding-block: 40px; padding-left: 56px; }
}

/* ------------------------------------------------------------------ Nummerierte Punkte */

.punkte-karte .kern { padding: clamp(34px, 4vw, 52px) clamp(28px, 4vw, 52px); }
.punkte-karte__fuss { margin-top: 44px; }
.punkte { list-style: none; margin: 0; padding: 0; counter-reset: punkt; display: grid; gap: 56px; }
.punkte--quer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); }
/* Ziffer liegt in Ruhe halb hinter der Überzeile; aktiv rückt sie um --ziffer-hub nach oben und steht dann
   frei – Abstand zur Überzeile und zum vorigen Punkt sind darauf abgestimmt */
.punkt { counter-increment: punkt; position: relative; padding-top: 98px; --ziffer-hub: -42px; }
.punkt::before {
  content: counter(punkt); position: absolute; left: -4px; top: -10px; z-index: 0;
  font-family: var(--schrift-display); font-weight: 400; font-size: 9.5rem; line-height: 1;
  background: var(--schwung); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.62;
}
/* Beim Überfahren rückt die Ziffer über die Überzeile, ist ganz zu sehen und wird kräftiger. */
.punkt::before { transition: translate 0.6s var(--kurve), opacity 0.6s var(--kurve); }
.punkt:hover::before { translate: 0 var(--ziffer-hub, -26px); opacity: 1; }
.punkt > * { position: relative; z-index: 1; }
.punkt .overline { margin-bottom: 0.8em; }

/* ------------------------------------------------------------------ Karten */

.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
/* Angebotskarten: Karte wird beim Überfahren leicht größer, die Schale behält ihre Farbe. Vergrößert wird über
   scale statt transform, weil transform zum Einblenden beim Scrollen gehört. */
.karten > .schale { transition: scale 0.6s var(--kurve); }
.js .karten > .schale[data-erscheinen] {
  transition: opacity 0.9s var(--kurve), transform 0.9s var(--kurve), filter 0.9s var(--kurve), scale 0.6s var(--kurve);
  transition-delay: var(--verzug, 0ms), var(--verzug, 0ms), var(--verzug, 0ms), 0s;
}
.karten > .schale:hover { scale: 1.03; }
/* Illustrationen der Angebotskarten: zusätzlich zum Scrollen auch beim Überfahren der Karte vollgelb */
.karten > .schale:hover .motiv__blob { fill: var(--farbe-sonne); }
/* „Mehr erfahren“ der Angebotskarten im Logo-Verlauf: dezent, beim Überfahren (Karte oder Knopf), per Tastatur und
   auf dem Handy in der Bildschirmmitte deutlicher (Logo-Farben mit gut halber Deckkraft – voll wirkte es zu grell). Der kräftige Verlauf liegt als eigene Ebene darüber, weil sich
   Verläufe nicht weich überblenden lassen. Schrift Tinte-tief: auch auf dem Rosé-Anfang mind. 4,5 : 1 */
.karten .knopf--sonne {
  position: relative; isolation: isolate; color: var(--farbe-tinte-tief); box-shadow: none;
  background: linear-gradient(90deg, rgba(252, 130, 158, 0.2) 0%, rgba(252, 181, 168, 0.2) 50%, rgba(253, 215, 112, 0.26) 100%);
}
.karten .knopf--sonne::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(252, 130, 158, 0.5) 0%, rgba(252, 181, 168, 0.5) 50%, rgba(253, 215, 112, 0.6) 100%);
  opacity: 0; transition: opacity 0.5s var(--kurve);
}
.karten .knopf--sonne:focus-visible::before { opacity: 1; }
@media (hover: hover) {
  .karten .knopf--sonne:hover { background: linear-gradient(90deg, rgba(252, 130, 158, 0.2) 0%, rgba(252, 181, 168, 0.2) 50%, rgba(253, 215, 112, 0.26) 100%); color: var(--farbe-tinte-tief); }
  .karten > .schale:hover .knopf--sonne { box-shadow: 0 14px 30px -20px rgba(252, 130, 158, 0.45); }
  .karten > .schale:hover .knopf--sonne::before { opacity: 1; }
}

/* Beim Scrollen: Punkt bzw. Angebotskarte auf Höhe der Bildschirmmitte bekommt ist-aktiv (seite.js) und
   zeigt denselben Zustand wie beim Überfahren – überall dort, wo die Elemente untereinander stehen */
.punkte:not(.punkte--quer) .punkt.ist-aktiv::before { translate: 0 var(--ziffer-hub, -26px); opacity: 1; }
@media (max-width: 767px) {
  .punkte--quer .punkt.ist-aktiv::before { translate: 0 var(--ziffer-hub, -26px); opacity: 1; }
  .karten > .schale.ist-aktiv, .bildkarten > .bildkarte.ist-aktiv { scale: 1.03; }
  .karten > .schale.ist-aktiv::before, .bildkarte.ist-aktiv .schale::before { opacity: 1; }
  .karten > .schale.ist-aktiv .knopf--sonne { box-shadow: 0 14px 30px -20px rgba(252, 130, 158, 0.45); }
  .karten > .schale.ist-aktiv .knopf--sonne::before { opacity: 1; }
}
.karte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px clamp(22px, 2.6vw, 38px) 34px; }
.karte p { margin-bottom: 1em; }
.karte__fuss { margin-top: auto; padding-top: 14px; }
.karte .overline { margin-bottom: 1.2em; }

/* ------------------------------------------------------------------ Bildkarten mit überlappendem Etikett */

.bildkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); }
.bildkarte { margin: 0; }
/* Beim Überfahren leicht größer wie die Angebotskarten; scale statt transform, weil transform zum Einblenden gehört */
.bildkarten > .bildkarte { transition: scale 0.6s var(--kurve); }
.js .bildkarten > .bildkarte[data-erscheinen] {
  transition: opacity 0.9s var(--kurve), transform 0.9s var(--kurve), filter 0.9s var(--kurve), scale 0.6s var(--kurve);
  transition-delay: var(--verzug, 0ms), var(--verzug, 0ms), var(--verzug, 0ms), 0s;
}
.bildkarten > .bildkarte:hover { scale: 1.03; }
.bildkarte__bild { position: relative; margin-bottom: 56px; }
.bildkarte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bildkarte__etikett {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  min-width: 60%; padding: 10px 28px; background: #fff; border-radius: 999px;
  box-shadow: var(--schatten-weich), 0 0 0 1px rgba(0, 90, 108, 0.06);
  font-family: var(--schrift-display); font-size: 1.8rem; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap;
  color: var(--farbe-tinte);
}
.bildkarte figcaption { text-align: center; padding-inline: 8px; }

/* ------------------------------------------------------------------ Seitenkopf der Unterseiten */

/* Foto und Titel als ein Element: eine gemeinsame Schale, das Foto läuft nach unten weich in den Grund des
   Titelbereichs aus. Der Titel blendet nicht ein – der Verlauf liegt auf ihm und gehört zum Bild */
.seitenkopf {
  position: relative; width: min(calc(100% - 2 * clamp(12px, 1.4vw, 20px)), calc(var(--breite-weit) - 60px)); margin-inline: auto;
  padding: var(--abstand-schale); border-radius: 2.25rem;
  background: rgba(0, 90, 108, 0.035); box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.07), var(--schatten-weich);
}
.seitenkopf__bild .schale { padding: 0; background: none; box-shadow: none; }
.seitenkopf__bild img { width: 100%; height: clamp(300px, 42vw, 580px); object-fit: cover; border-radius: calc(2.25rem - 8px) calc(2.25rem - 8px) 0 0; }
/* Verlauf um 3° geneigt und weich beschleunigt (smoothstep in zehn Stufen) statt linear – sonst zeigen sich Stufen
   und eine Kante am Ende. --schraeg: Versatz, den die Neigung über die Kartenbreite erzeugt (sin 3° ≈ 0,052); bis dahin
   bleibt der Verlauf durchsichtig, damit die Oberkante des Titelbereichs über die ganze Breite unsichtbar ist.
   --weich: Länge des Übergangs. Der Titelbereich reicht so weit ins Bild, dass die Bildunterkante auch an der weniger
   weit fortgeschrittenen Seite voll bedeckt ist (Schräge + Übergang); der Text beginnt in der Mitte bei rund 90 %. */
.seitenkopf__titel {
  --schraeg: calc(min(100vw, calc(var(--breite-weit) - 60px)) * 0.052);
  --weich: 160px;
  position: relative; z-index: 2; text-align: center;
  margin-top: calc(-1 * (var(--schraeg) + var(--weich)));
  padding: calc(var(--schraeg) / 2 + var(--weich) * 0.8) clamp(18px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
  border-radius: 0 0 calc(2.25rem - 8px) calc(2.25rem - 8px);
  background: linear-gradient(177deg,
    rgba(255, 253, 250, 0) 0,
    rgba(255, 253, 250, 0) var(--schraeg),
    rgba(255, 253, 250, 0.028) calc(var(--schraeg) + var(--weich) * 0.1),
    rgba(255, 253, 250, 0.104) calc(var(--schraeg) + var(--weich) * 0.2),
    rgba(255, 253, 250, 0.216) calc(var(--schraeg) + var(--weich) * 0.3),
    rgba(255, 253, 250, 0.352) calc(var(--schraeg) + var(--weich) * 0.4),
    rgba(255, 253, 250, 0.5) calc(var(--schraeg) + var(--weich) * 0.5),
    rgba(255, 253, 250, 0.648) calc(var(--schraeg) + var(--weich) * 0.6),
    rgba(255, 253, 250, 0.784) calc(var(--schraeg) + var(--weich) * 0.7),
    rgba(255, 253, 250, 0.896) calc(var(--schraeg) + var(--weich) * 0.8),
    rgba(255, 253, 250, 0.972) calc(var(--schraeg) + var(--weich) * 0.9),
    var(--grund) calc(var(--schraeg) + var(--weich)));
}
.js .seitenkopf__titel[data-erscheinen] { opacity: 1; transform: none; filter: none; }
.seitenkopf__titel h1 { font-size: var(--t-titel-gross); font-weight: 400; margin: 0; }
.seitenkopf__titel p { margin: 8px 0 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--farbe-tinte); }


.pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pillen a {
  position: relative; display: inline-flex; align-items: center; padding: 9px 24px; background: #fff; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--linie-zart);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.5s var(--kurve), color 0.5s var(--kurve), box-shadow 0.5s var(--kurve), transform 0.5s var(--kurve), padding 0.5s var(--kurve);
}
.pillen a:focus-visible { color: var(--farbe-tinte); transform: translateY(-1px); padding-inline: 19px 11px; }
@media (hover: hover) { .pillen a:hover { color: var(--farbe-tinte); transform: translateY(-1px); padding-inline: 19px 11px; } }
/* Text mittig; beim Überfahren erscheint der Pfeil direkt neben dem Wort, Text und Pfeil stehen zusammen
   mittig. Der Innenabstand gibt dafür insgesamt 18 px ab (12 px Pfeil + 6 px Abstand), die Pille behält
   ihre Breite und die Nachbarn verrutschen nicht. Links 19, rechts 11 px: der Pfeil ist leichter als
   der Text, deshalb sitzt die Gruppe optisch ausgeglichen 4 px rechts der Mitte. */
.pillen svg { width: 12px; height: 12px; flex: none; max-width: 0; margin-left: 0; opacity: 0; transform: translateY(-4px);
  transition: max-width 0.5s var(--kurve), margin-left 0.5s var(--kurve), opacity 0.4s var(--kurve), transform 0.5s var(--kurve); }
.pillen a:focus-visible svg { max-width: 12px; margin-left: 6px; opacity: 1; transform: translateY(-1px); }
@media (hover: hover) { .pillen a:hover svg { max-width: 12px; margin-left: 6px; opacity: 1; transform: translateY(-1px); } }
/* Sprung-Pillen im Titelkasten der Angebotsseite */
.seitenkopf__titel .pillen { margin-top: 20px; }

/* ------------------------------------------------------------------ Angebote */

.angebot-kopf .leitsatz { margin-bottom: 0.45em; }
.angebot-kopf > .knopf { margin-top: 1em; }
/* Eckdaten als Unterzeile unter dem Titel; die Bezeichnung steht als Tooltip am Symbol */
.eckdaten {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  margin: 0 0 1.4em; font-size: 0.9375rem; font-weight: 400; line-height: 1.35; color: var(--farbe-tinte);
}
.eckdaten__posten { display: inline-flex; align-items: center; gap: 8px; }
.eckdaten__symbol { position: relative; display: inline-flex; cursor: help; }
.eckdaten__symbol svg { width: 20px; height: 20px; flex: none; }
.eckdaten__bezeichnung {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  padding: 4px 10px; border-radius: 999px; background: var(--farbe-tinte); color: #fff;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--kurve), transform 0.4s var(--kurve);
}
/* Der Tooltip ist ein Kind des Symbols: mit Brücke über den Spalt bleibt er beim Hinüberfahren offen, Esc schließt
   ihn (seite.js, ist-zu). Nur durchsichtig, nie versteckt: Screenreader lesen „Dauer“ bzw. „Preis“ immer mit */
.eckdaten__bezeichnung::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.eckdaten__symbol:hover .eckdaten__bezeichnung { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.eckdaten__symbol.ist-zu .eckdaten__bezeichnung { opacity: 0; pointer-events: none; }
/* Mehrere Gruppen (Erstsitzung, Folgetermine): Raster, damit Dauer und Preis untereinander stehen */
/* Die Wertespalten dürfen schrumpfen (Umbruch im Wert), damit es auf schmalen Handys mit größeren Textabständen passt */
.eckdaten:has(.eckdaten__gruppe) { display: grid; grid-template-columns: max-content repeat(2, minmax(0, max-content)); justify-content: start; gap: 6px clamp(14px, 4vw, 26px); }
.eckdaten__gruppe .eckdaten__posten { min-width: 0; }
.eckdaten__gruppe { display: contents; }
.eckdaten__gruppe strong { font-weight: 600; }

.themen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 4vw, 60px); margin-top: 56px; }
.thema { text-align: center; }
.thema__symbol { position: relative; width: 88px; height: 80px; margin: 0 auto 16px; color: var(--farbe-tinte); }
.thema__symbol .motiv__blob { inset: 0; width: 100%; height: 100%; }
.thema__symbol svg.zeichnung { position: absolute; inset: 15px 19px; width: calc(100% - 38px); height: calc(100% - 30px); }
.thema h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.3em; }
.thema p { font-size: 0.9375rem; }

/* Ausklappbare Zusatzinhalte unter einem Angebot: Textknopf mittig unter dem Angebot, Chevron dreht beim Öffnen */
.ausklapp > summary { list-style: none; }
.ausklapp > summary::-webkit-details-marker { display: none; }
.ausklapp__knopf {
  display: flex; align-items: center; gap: 10px; width: fit-content; margin: clamp(44px, 5vw, 64px) auto 0; padding: 10px 4px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--farbe-tinte); cursor: pointer;
}
.ausklapp__knopf svg { width: 18px; height: 18px; transition: translate 0.5s var(--kurve), rotate 0.5s var(--kurve); }
@media (hover: hover) { .ausklapp__knopf:hover svg { translate: 0 2px; } }
.ausklapp[open] .ausklapp__knopf svg { rotate: 180deg; }
@media (hover: hover) { .ausklapp[open] .ausklapp__knopf:hover svg { translate: 0 -2px; } }
.ausklapp__weniger, .ausklapp[open] .ausklapp__mehr { display: none; }
.ausklapp[open] .ausklapp__weniger { display: inline; }
.ausklapp > .rahmen { margin-top: clamp(80px, 8vw, 112px); scroll-margin-top: calc(112px + var(--oben)); } /* unter dem festen Kopf */
/* Aufgeklappt steht „Weniger anzeigen“ am Ende der Zusatzinhalte (statt oben) und darunter der Termin-Knopf,
   der dafür aus dem Angebotstext verschwindet. Ohne JavaScript bleibt das summary oben, der untere Knopf entfällt */
.ausklapp__zu { border: 0; background: none; font-family: inherit; }
html:not(.js) .ausklapp__zu { display: none; }
.js .ausklapp[open] > summary { display: none; }
.ausklapp > .rahmen:focus { outline: none; }
.ausklapp__termin { display: flex; justify-content: center; margin-top: 20px; }
/* Der aufklappende Inhalt schneidet ab (overflow clip, siehe unten): Platz für den Knopfschatten innen schaffen –
   auch für den größeren beim Überfahren (reicht rund 40 px tief) – und außen wieder abziehen, damit der Abstand
   zur Welle gleich bleibt */
.ausklapp__termin { padding-bottom: 48px; }
.ausklapp[open] { margin-bottom: -48px; }
section:has(> .ausklapp[open]) .angebot-kopf > .knopf { display: none; }
/* Weiches Auf- und Zuklappen, wo der Browser ::details-content kennt; sonst klappt es ohne Übergang */
.ausklapp { interpolate-size: allow-keywords; }
.ausklapp::details-content {
  block-size: 0; opacity: 0; overflow: clip;
  transition: block-size 0.7s var(--kurve), opacity 0.6s var(--kurve), content-visibility 0.7s allow-discrete;
}
.ausklapp[open]::details-content { block-size: auto; opacity: 1; }

.fragenliste { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(20px, 3vw, 32px); }
/* Flex: einzeilige Fragen stehen senkrecht mittig, wenn die Nachbarbox zweizeilig ist */
.fragenliste li {
  position: relative; display: flex; align-items: center; padding: 20px 24px 20px 64px; background: #fff; border-radius: 1.25rem;
  box-shadow: 0 0 0 1px var(--linie-zart);
  font-family: var(--schrift-display); font-size: 1.45rem; font-weight: 500; line-height: 1.3; color: var(--farbe-tinte);
}
.fragenliste li::before {
  content: "?"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--farbe-sonne); font-size: 1.4rem; font-weight: 600; color: var(--farbe-tinte);
}

/* ------------------------------------------------------------------ Petrol-Band */

.band {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background:
    radial-gradient(42% 70% at 12% 20%, rgba(252, 130, 158, 0.16), transparent 70%),
    radial-gradient(40% 70% at 88% 85%, rgba(253, 212, 133, 0.14), transparent 70%),
    var(--farbe-tinte-tief);
  padding-block: clamp(96px, 9vw, 140px);
}
.band h2, .band h3, .band .leitsatz, .band strong, .band a:not(.knopf) { color: #fff; }
.band .leitsatz { font-size: clamp(2rem, 1.3rem + 2.2vw, 2.8rem); max-width: 28ch; margin-inline: auto; }
.band p { max-width: 640px; margin-inline: auto; color: rgba(255, 255, 255, 0.86); }
.band .knopf { margin-top: 1.6em; }
.band__schwung { position: absolute; top: 0; height: 100%; width: clamp(160px, 22vw, 320px); color: rgba(255, 255, 255, 0.28); pointer-events: none; }
.band__schwung--links { left: 0; }
.band__schwung--rechts { right: 0; transform: scaleX(-1); }
.band__schwung .zeichnung { stroke-width: 1.2; }
.band .motiv { margin-bottom: 18px; }
/* Band mit Foto (Über mich, „Ava Mentis“, im Pastellton des Sofas): Text linksbündig neben dem Praxisbild; helle
   Schale ums Foto, Schwung in Petrol. Nur der rechte Schwung – er liegt hinter dem Foto, der linke kreuzte den Text */
.band--bild { text-align: left; }
.band--bild .leitsatz, .band--bild p { margin-inline: 0; }
.band--bild .schale { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.08); }
.band--sofa .band__schwung { color: rgba(0, 90, 108, 0.22); }


/* Termin-Band im Pastellton des Praxis-Sofas: Schrift in Petrol statt Weiß */
.band--sofa {
  background:
    radial-gradient(48% 70% at 14% 22%, var(--hauch-sofa-licht) 0%, transparent 70%),
    radial-gradient(40% 65% at 86% 78%, var(--hauch-sofa-tief) 0%, transparent 72%),
    radial-gradient(34% 55% at 62% 12%, var(--hauch-sofa-mittel) 0%, transparent 70%),
    radial-gradient(38% 60% at 30% 92%, var(--hauch-sofa-mittel) 0%, transparent 70%),
    var(--hauch-sofa);
  color: var(--farbe-tinte-tief);
}
.band--sofa h2, .band--sofa h3, .band--sofa .leitsatz, .band--sofa strong, .band--sofa a:not(.knopf), .band--sofa p { color: var(--farbe-tinte-tief); }
/* „Abendrot“: warmer Apricot-Hauch mit Rosé- und Sonnenlicht wie das Wandbild in der Praxis – Über mich, „Ava Mentis“.
   Schrift wie im Sofa-Band in Tinte-tief */
.band--abendrot {
  background:
    radial-gradient(48% 72% at 12% 20%, rgba(252, 130, 158, 0.28), transparent 70%),
    radial-gradient(44% 72% at 88% 85%, rgba(253, 212, 133, 0.5), transparent 70%),
    radial-gradient(38% 58% at 60% 10%, rgba(252, 181, 168, 0.34), transparent 70%),
    #fbeee6;
}
.gesicht { display: block; width: 196px; height: 196px; margin: 0 auto 26px; overflow: visible; }
/* Weiß statt Gelb: Gelb biss sich mit dem kühlen Sofa-Ton des Bandes */
.gesicht__rahmen { fill: #fff; }

/* ------------------------------------------------------------------ FAQ */

/* Titel in eigener Zeile über den Fragen: Akkordeon und Hinweiskasten beginnen auf derselben Höhe */
.faq-raster { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: clamp(36px, 6vw, 90px); align-items: start; }
.faq-titel { grid-column: 1; margin-bottom: 30px; }
.faq-raster .akkordeon { grid-column: 1; }
.faq-raster .hinweiskasten { grid-column: 2; grid-row: 2; }

.akkordeon { display: grid; gap: 10px; }
.akkordeon details {
  border-radius: 1.25rem; background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px var(--linie-zart);
  transition: background-color 0.5s var(--kurve), box-shadow 0.5s var(--kurve);
}
.akkordeon details:hover { background: #fff; }
.akkordeon details[open] { background: #fff; box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.06), var(--schatten-weich); }
.akkordeon summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 22px 20px 26px;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase;
  color: var(--farbe-tinte);
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--hauch-sonne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005a6c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.6s var(--kurve), background-color 0.6s var(--kurve);
}
/* Knopf: geschlossen zartgelb, beim Überfahren und geöffnet vollgelb */
.akkordeon summary:hover::after, .akkordeon summary:focus-visible::after { background-color: var(--farbe-sonne); }
.akkordeon details[open] summary::after { transform: rotate(45deg); background-color: var(--farbe-sonne); }
.akkordeon__antwort { padding: 0 26px 26px; max-width: 68ch; }
.akkordeon__antwort ul { margin: 0 0 1em; padding-left: 1.2em; }

/* Sprungziel aus dem Fußbereich („Abgrenzung zur Psychotherapie“): Abstand zum festen Kopf */
.hinweiskasten { scroll-margin-top: calc(var(--kopf-platz, 120px) + var(--oben) + 24px); }
.hinweiskasten .kern { text-align: center; padding: 42px clamp(24px, 3vw, 40px); }
.hinweiskasten .motiv { width: 120px; }
.hinweiskasten h2 { font-size: 1.8rem; }
.hinweiskasten p { font-size: 0.9375rem; }
.hinweiskasten .knopf-gruppe { flex-direction: column; align-items: center; margin-top: 24px; }

/* ------------------------------------------------------------------ Kontakt */

/* Formular links und breiter, Kontaktangaben rechts */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.kontakt-info__bild { position: relative; max-width: 420px; margin-bottom: 40px; }
.kontakt-info__bild img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.kontakt-info__bild .motiv { position: absolute; width: 150px; right: -50px; bottom: -40px; margin: 0; z-index: 2; }

.kontakt-liste { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 18px; }
.kontakt-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
/* overflow: visible – sonst schneidet Chrome den Inhalt runder SVGs auf den inneren Kreis zu */
.kontakt-liste svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; overflow: visible; background: var(--farbe-sonne); color: var(--farbe-tinte); }
.kontakt-liste strong { display: block; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }

.siegel { display: flex; gap: 16px; align-items: center; margin-top: 38px; font-size: var(--t-klein); line-height: 1.5; }
.siegel img { width: 84px; height: 84px; border-radius: 50%; flex: none; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--linie-zart); }

.formular-schale .kern { padding: clamp(28px, 4vw, 48px); }
.formular__titel { margin: 0 0 28px; }
.formular { display: grid; gap: 22px; }
.formular label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; color: var(--farbe-tinte); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular textarea {
  width: 100%; min-height: 54px; padding: 14px 18px;
  background: var(--grund); color: var(--farbe-text);
  border: 0; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--linie-feld);
  font: inherit;
  transition: box-shadow 0.5s var(--kurve), background-color 0.5s var(--kurve);
}
.formular textarea { min-height: 180px; resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--farbe-tinte), 0 0 0 4px rgba(252, 130, 158, 0.18); }
.formular__einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.875rem; }
.formular__einwilligung input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--farbe-tinte); }
.formular__hinweis { font-size: var(--t-klein); }
/* Falle für Bots: für Menschen unsichtbar und nicht erreichbar, muss leer bleiben (prüft kontakt/senden.php) */
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Rückmeldung nach dem Absenden als gut sichtbarer Kasten: Dank nach dem Versand über den Server, sonst Hinweis aufs
   E-Mail-Programm */
.formular__status:empty { display: none; }
.formular__kasten {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: 1.25rem; background: var(--hauch-sonne);
  box-shadow: inset 0 0 0 1px rgba(253, 212, 133, 0.7);
  animation: cookie-ein 0.7s var(--kurve) both;
}
.formular__kasten > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; overflow: visible; background: var(--farbe-sonne); color: var(--farbe-tinte); }
.formular__kasten strong { display: block; margin: 2px 0 4px; font-size: 1rem; line-height: 1.4; color: var(--farbe-tinte); }
.formular__kasten p { margin: 0 0 0.5em; font-size: 0.875rem; line-height: 1.6; }
.formular__kasten p:last-child { margin-bottom: 0; }
.formular__rueckfall { color: var(--farbe-text); }
.formular__kopieren {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--farbe-tinte);
  text-decoration: underline; text-decoration-color: var(--farbe-apricot); text-underline-offset: 3px;
}
.formular__kopieren:hover { text-decoration-color: var(--farbe-rose); }

/* Angebote als Ankreuz-Pillen, Mehrfachauswahl; das Kästchen selbst ist unsichtbar, bleibt aber bedienbar */
.formular__auswahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.formular__auswahl legend { padding: 0; margin-bottom: 2px; font-size: 0.875rem; font-weight: 600; color: var(--farbe-tinte); }
/* Hinweis direkt unter der Frage, vor den Auswahl-Pillen */
.formular__auswahl .formular__hinweis { margin: 0 0 12px; }
.pillenwahl { display: flex; flex-wrap: wrap; gap: 10px; }
.formular .pillenwahl label, .darstellung .pillenwahl label { position: relative; margin: 0; font-weight: 500; cursor: pointer; }
.pillenwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pillenwahl span {
  position: relative; display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie-feld);
  transition: background-color 0.4s var(--kurve), box-shadow 0.4s var(--kurve);
}
/* Gewählt: Petrol gefüllt, Schrift weiß (7,8 : 1) – erkennbar an „gefüllt“ statt „leer“, nicht nur an der Farbe */
.pillenwahl input:checked + span { background: var(--farbe-tinte); color: #fff; box-shadow: none; }
.pillenwahl input:focus-visible + span { outline: 2px solid var(--farbe-tinte); outline-offset: 2px; }

/* Senden: beim Überfahren Rosé; gesperrt nur während des Versands (seite.js) */
.formular .knopf:focus-visible { background: var(--farbe-rose); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45); }
@media (hover: hover) { .formular .knopf:not(:disabled):hover { background: var(--farbe-rose); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45); } }
.knopf:disabled, .knopf:disabled:hover { background: var(--farbe-tinte); opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

.kontakt-teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; margin: 48px 0 44px; }
.kontakt-teaser svg { width: 56px; height: 56px; padding: 14px; margin: 0 auto 14px; border-radius: 50%; overflow: visible; background: var(--farbe-sonne); color: var(--farbe-tinte); }
.kontakt-teaser strong { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 6px; }

/* ------------------------------------------------------------------ Hilfreiche Links */

.notfall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: 48px; }
.notfall .karte { text-align: left; align-items: flex-start; }
.notfall__nummer { font-family: var(--schrift-display); font-size: 2.2rem; font-weight: 600; line-height: 1.1; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; margin: 2px 0 14px; color: var(--farbe-tinte); }
.notfall__nummer svg { width: 26px; height: 26px; flex: none; }

.buecher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin-top: 44px; }
.buch { padding: 30px 0; border-top: 1px solid var(--linie-zart); }
.buch h3 { font-size: 1.65rem; font-weight: 600; margin-bottom: 0.35em; }
/* Buchtitel: beim Überfahren wächst der Schwung-Unterstrich von links wie in der Navigation (als Hintergrund, damit
   er auch über mehrzeilige Titel läuft); rechts der Pfeil für die externe Seite wie bei den Termin-Knöpfen */
.buch h3 a {
  text-decoration: none; padding-bottom: 4px;
  background: var(--schwung) no-repeat 0 100% / 0 2px; transition: background-size 0.6s var(--kurve);
}
.buch h3 a:hover, .buch h3 a:focus-visible { background-size: 100% 2px; text-decoration: none; }
.buch__ende { white-space: nowrap; }
.buch h3 svg { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.28em; vertical-align: 0.02em; transition: translate 0.5s var(--kurve); }
.buch h3 a:hover svg, .buch h3 a:focus-visible svg { translate: 2px -2px; }
.buch p { font-size: 0.9375rem; }

/* ------------------------------------------------------------------ Textseiten */

.textseite h1 { font-size: clamp(2.1rem, 1.6rem + 1.5vw, 2.8rem); font-weight: 600; margin-bottom: 0.8em; }
.textseite h2 { font-size: 1.5rem; font-weight: 600; margin: 1.8em 0 0.4em; }
.textseite h3 { font-size: 1.25rem; font-weight: 600; margin: 1.6em 0 0.4em; }
.textseite h4 { font-family: var(--schrift-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; margin: 1.4em 0 0.4em; }
.textseite p, .textseite li { font-size: 0.9375rem; }
.textseite ul { margin: 0 0 1em; padding-left: 1.2em; }
.textseite li { margin-bottom: 0.5em; }
.textseite li::marker { color: var(--farbe-rose); }
.textseite address { font-style: normal; }
/* Noch auszufüllende Angaben (z. B. in der Datenschutzerklärung): Absatz mit Kontur links, die Werte selbst in
   farbiger Schrift – bis sie ersetzt sind */
.platzhalter { border-left: 3px solid var(--farbe-rose); padding-left: 16px; }
.platzhalter mark { background: none; color: var(--farbe-rose-tiefer); }

/* ------------------------------------------------------------------ Schwebende Kontaktleiste (Glaspille) */

.kontaktleiste {
  position: fixed; right: calc(14px + var(--rechts-sicher)); top: 50%; transform: translateY(-50%); z-index: 30;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: rgba(255, 253, 250, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.08), 0 20px 40px -20px rgba(0, 67, 79, 0.35);
}
.kontaktleiste a {
  position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
  color: var(--farbe-tinte); transition: background-color 0.5s var(--kurve), color 0.5s var(--kurve), transform 0.5s var(--kurve);
}
.kontaktleiste a:focus-visible { color: var(--farbe-tinte); transform: scale(1.06); }
@media (hover: hover) { .kontaktleiste a:hover { color: var(--farbe-tinte); transform: scale(1.06); } }
.kontaktleiste svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ Fußbereich */

.fuss {
  color: #fff; padding-block: 76px 40px; font-size: 0.9375rem;
  background:
    radial-gradient(38% 60% at 90% 10%, rgba(252, 181, 168, 0.14), transparent 70%),
    var(--farbe-tinte-tief);
}
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--farbe-apricot); }
/* Logo mit Adresse | Seiten | Netzwerk | Termin (rechts, Knöpfe nebeneinander) */
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.95fr) minmax(0, 1.95fr); gap: 36px; align-items: start; }
.fuss__logo { width: 210px; max-width: 100%; filter: brightness(0) invert(1); }
/* Eingerückt auf die Kante des Schriftzugs: „Ava“ beginnt im 210 px breiten Logo bei rund 22 px */
.fuss__praxis address { font-style: normal; margin-top: 22px; padding-left: 22px; }
.fuss__praxis strong { font-weight: 700; color: #fff; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss__termin p { font-weight: 700; font-size: 1.125rem; line-height: 1.35; margin-bottom: 18px; }
/* Raster statt Flex: beide Knöpfe nebeneinander und so breit wie der breitere */
.fuss__termin .knopf-gruppe { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
/* kleiner als die übrigen Knöpfe, damit beide in die Spalte passen */
.fuss__termin .knopf { white-space: nowrap; min-height: 40px; padding: 4px 16px; font-size: 0.6875rem; }
.fuss__termin .knopf svg { width: 14px; height: 14px; }
.fuss__termin .knopf__vorne { max-width: 14px; margin-right: 8px; }
.fuss .knopf, .fuss .knopf:hover { text-decoration: none; }
/* Tinte-Knopf auf Tinte-tief: heller Saum, damit er sich abhebt; beim Überfahren kräftiger statt dunkler */
.fuss .knopf:not(.knopf--rose):not(.knopf--hell) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
@media (hover: hover) { .fuss .knopf:not(.knopf--rose):not(.knopf--hell):hover { background: var(--farbe-tinte); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); } }
.fuss__titel { display: block; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-bottom: 12px; }
.fuss__verband img { width: 84px; height: 84px; border-radius: 50%; background: #fff; margin-bottom: 14px; }
.fuss__verband p { font-size: var(--t-klein); line-height: 1.5; max-width: 26ch; }
.fuss__schluss { margin-top: 56px; }
/* Urheberhinweis unten rechts in der Termin-Spalte: bewusst zurückhaltend (60 % Deckkraft, noch 5 : 1), beim Überfahren deutlicher.
   Die Spalte ist so breit wie ihr Inhalt und so hoch wie die höchste Spalte; der Hinweis sitzt unten,
   bündig mit der rechten Kante der Knöpfe. */
.fuss__termin { align-self: stretch; width: fit-content; display: flex; flex-direction: column; align-items: flex-start; }
/* margin-bottom: Grundlinie auf die letzte Zeile der Nachbarspalten heben (deren Zeilenhöhe reicht tiefer) */
.fuss__urheber { margin-top: auto; margin-bottom: 5px; padding-top: 32px; align-self: flex-end; }
.fuss__urheber a { display: inline-flex; align-items: baseline; gap: 12px; opacity: 0.6; font-size: 0.6875rem; letter-spacing: 0.08em; transition: opacity 0.5s var(--kurve); }
.fuss__urheber a:hover, .fuss__urheber a:focus-visible { opacity: 0.9; text-decoration: none; }
.fuss__urheber img { width: 132px; height: auto; }
.fuss__schluss ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px; font-size: var(--t-klein); }

/* ------------------------------------------------------------------ Nach oben
   Erscheint, sobald die erste Bildschirmhöhe verlassen ist (Marke + IntersectionObserver in seite.js).
   Ohne JavaScript bleibt er verborgen. */

.nach-oben-marke { position: absolute; top: 0; left: 0; width: 1px; height: 100vh; pointer-events: none; }
.kopf-marke { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.nach-oben {
  position: fixed; right: calc(14px + var(--rechts-sicher)); bottom: calc(clamp(14px, 2vw, 28px) + var(--unten)); z-index: 30;
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 253, 250, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(0, 90, 108, 0.08), 0 20px 40px -20px rgba(0, 67, 79, 0.35);
  color: var(--farbe-tinte);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.5s var(--kurve), transform 0.5s var(--kurve), visibility 0s linear 0.5s, background-color 0.5s var(--kurve), color 0.5s var(--kurve);
}
.nach-oben[data-sichtbar] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nach-oben:focus-visible { color: var(--farbe-tinte); }
.nach-oben svg { width: 22px; height: 22px; transition: transform 0.5s var(--kurve); }
@media (hover: hover) { .nach-oben:hover { color: var(--farbe-tinte); } .nach-oben:hover svg { transform: translateY(-2px); } }

/* ------------------------------------------------------------------ Cookie-Hinweis und Einstellungen */

/* Ohne JavaScript hätte der Knopf keine Funktion, deshalb erscheint er nur mit */
.nur-mit-js { display: none; }
.js .nur-mit-js { display: block; }
.fuss__cookies { padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.fuss__cookies:hover { text-decoration: underline; text-decoration-color: var(--farbe-apricot); }

/* Schwebende Karte unten links, rechts neben dem Knopf „Darstellung anpassen“ (14 + 50 + 14 px), damit der auch beim
   ersten Besuch sichtbar bleibt; die drei Knöpfe sind bewusst gleich gewichtet */
.cookie-banner {
  position: fixed; left: calc(78px + var(--links-sicher)); bottom: calc(clamp(12px, 2vw, 28px) + var(--unten)); z-index: 60;
  width: min(420px, calc(100vw - 92px)); padding: 22px 24px 20px;
  background: var(--grund); border-radius: 1.5rem; color: var(--farbe-text);
  box-shadow: 0 0 0 1px var(--linie-zart), 0 30px 60px -24px rgba(0, 67, 79, 0.35);
  font-size: var(--t-klein); line-height: 1.55;
  animation: cookie-ein 0.7s var(--kurve) both;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 14px; }
.cookie-banner__titel { display: flex; align-items: center; gap: 10px; font-family: var(--schrift-display); font-size: 1.35rem; color: var(--farbe-tinte); }
.cookie-banner__titel svg { width: 22px; height: 22px; }
.cookie-banner__knoepfe, .cookie-dialog__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .knopf, .cookie-dialog .knopf { flex: 1 1 auto; }
@keyframes cookie-ein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cookie-dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 28px clamp(20px, 4vw, 36px);
  border: 0; border-radius: 1.75rem; background: var(--grund); color: var(--farbe-text);
  box-shadow: 0 40px 80px -30px rgba(0, 67, 79, 0.45);
}
.cookie-dialog::backdrop { background: rgba(0, 67, 79, 0.45); }
.cookie-dialog__kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.cookie-dialog h2 { margin: 0; font-size: 1.8rem; }
.cookie-dialog__zu { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--farbe-tinte); cursor: pointer; transition: background-color 0.4s var(--kurve); }
.cookie-dialog__zu:hover { background: var(--hauch-sonne); }
.cookie-dialog__zu svg { width: 20px; height: 20px; }
.cookie-dialog__hinweis { font-size: var(--t-klein); }
.cookie-liste { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }

/* Schalter: das Kästchen bleibt bedienbar, sichtbar ist die Bahn */
.schalter { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--linie-zart); cursor: pointer; font-size: 0.875rem; line-height: 1.5; }
.schalter strong { display: block; color: var(--farbe-tinte); }
.schalter input { position: absolute; left: 16px; top: 16px; opacity: 0; width: 1px; height: 1px; }
.schalter__bahn { position: relative; width: 44px; height: 24px; margin-top: 2px; border-radius: 999px; background: var(--linie-zart); box-shadow: inset 0 0 0 1.5px var(--linie-feld); transition: background-color 0.4s var(--kurve); }
.schalter__bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 67, 79, 0.3); transition: translate 0.4s var(--kurve); }
.schalter input:checked + .schalter__bahn { background: var(--farbe-tinte); }
.schalter input:checked + .schalter__bahn::after { translate: 20px 0; }
.schalter input:disabled + .schalter__bahn { opacity: 0.55; }
.schalter:has(input:disabled) { cursor: default; }
.schalter input:focus-visible + .schalter__bahn { outline: 2px solid var(--farbe-tinte); outline-offset: 3px; }

/* ------------------------------------------------------------------ Darstellung anpassen (Barrierefreiheit)
   Runder Knopf unten links, bewusst kräftig in Petrol (er muss für alle auffindbar sein, auch weil „Hoher Kontrast“
   den Kontrast der Rosé-Knöpfe liefert), darüber ein nicht modales Panel mit Textgröße und
   Schaltern. Die Wirkung der Einstellungen steht am Dateiende („Einstellungen der Darstellung“). Ohne JavaScript
   hätte der Knopf keine Funktion und bleibt verborgen. */

.darstellung-knopf {
  position: fixed; left: calc(14px + var(--links-sicher)); bottom: calc(clamp(14px, 2vw, 28px) + var(--unten)); z-index: 30;
  display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  background: var(--farbe-tinte); color: #fff; cursor: pointer;
  /* weißer Ring: hebt ihn auch vom Petrol des Fußbereichs ab */
  box-shadow: 0 0 0 2px #fff, 0 14px 30px -12px rgba(0, 67, 79, 0.6);
  transition: background-color 0.5s var(--kurve), transform 0.5s var(--kurve);
}
html:not(.js) .darstellung-knopf { display: none; }
.darstellung-knopf svg { width: 28px; height: 28px; stroke-width: 2; }
.darstellung-knopf[aria-expanded="true"] { background: var(--farbe-tinte-tief); }
.darstellung-knopf:focus-visible { transform: scale(1.06); }
@media (hover: hover) { .darstellung-knopf:hover { background: var(--farbe-tinte-tief); transform: scale(1.06); } }
/* Im Vollbild-Menü stören Knopf und Panel nur */
body.menue-offen :is(.darstellung-knopf, .darstellung, .vorlesen-leiste, .lesehilfe) { display: none; }

.darstellung {
  position: fixed; left: calc(14px + var(--links-sicher)); bottom: calc(clamp(14px, 2vw, 28px) + 62px + var(--unten)); z-index: 61;
  width: min(390px, calc(100vw - 28px)); max-height: calc(100dvh - 110px - var(--unten)); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px 18px;
  background: var(--grund); border-radius: 1.5rem; color: var(--farbe-text);
  box-shadow: 0 0 0 1px var(--linie-zart), 0 30px 60px -24px rgba(0, 67, 79, 0.35);
  font-size: 0.875rem; line-height: 1.5;
}
.darstellung[hidden] { display: none; }
.darstellung__kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.darstellung h2 { margin: 0; font-size: 1.6rem; }
.darstellung h2:focus:not(:focus-visible) { outline: none; }
.darstellung [hidden] { display: none !important; }
.darstellung__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.darstellung__gruppe + .darstellung__gruppe { margin-top: 14px; }
.darstellung__gruppe legend { padding: 0; margin-bottom: 8px; font-weight: 600; color: var(--farbe-tinte); }
.darstellung .pillenwahl span { min-width: 76px; padding: 11px 18px; text-align: center; font-weight: 500; }
.darstellung .cookie-liste { margin: 14px 0; gap: 8px; }
.darstellung .schalter { padding: 12px 14px; }
.darstellung .schalter input { left: 14px; top: 14px; }
.darstellung__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
/* Vorlesen: erst sichtbar, wenn der Browser eine Sprachausgabe hat (seite.js) */
.darstellung__vorlesen { display: grid; gap: 12px; justify-items: start; margin: 0 0 16px; padding: 14px; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--linie-zart); }
.darstellung__vorlesen .darstellung__gruppe { margin: 0; }
.darstellung__hinweis { margin: 0; font-size: var(--t-klein); }

/* Vorlese-Leiste: bleibt stehen, solange vorgelesen wird – neben dem Knopf (Desktop) bzw. darüber (Handy) */
.vorlesen-leiste {
  position: fixed; left: calc(78px + var(--links-sicher)); bottom: calc(clamp(14px, 2vw, 28px) + var(--unten)); z-index: 30;
  display: flex; gap: 4px; padding: 3px;
  background: rgba(255, 253, 250, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 999px; box-shadow: 0 0 0 1px var(--linie-feld), 0 20px 40px -20px rgba(0, 67, 79, 0.35);
}
.vorlesen-leiste[hidden] { display: none; }
.vorlesen-leiste button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--farbe-tinte); cursor: pointer;
  font-family: var(--schrift-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 0.4s var(--kurve);
}
.vorlesen-leiste button:first-child { background: var(--farbe-tinte); color: #fff; }
@media (hover: hover) { .vorlesen-leiste button:hover { background: var(--hauch-sonne); } .vorlesen-leiste button:first-child:hover { background: var(--farbe-tinte-tief); } }
.vorlesen-leiste svg { width: 16px; height: 16px; stroke-width: 2; }
.vorlesen-leiste__weiter, .vorlesen-leiste[data-angehalten] .vorlesen-leiste__anhalten { display: none; }
.vorlesen-leiste[data-angehalten] .vorlesen-leiste__weiter { display: inline; }
/* Absatz, der gerade vorgelesen wird: Rahmen in Petrol, auf den dunklen Bändern in Weiß */
.wird-vorgelesen { outline: 3px solid var(--farbe-tinte); outline-offset: 6px; border-radius: 4px; background-color: rgba(0, 90, 108, 0.06); scroll-margin-block: 120px; }
.band:not(.band--sofa) .wird-vorgelesen { outline-color: #fff; background-color: rgba(255, 255, 255, 0.08); }

/* Lesehilfe: Lineal bzw. Maske auf Höhe von Zeiger oder Fokus (--y, seite.js); Klicks gehen hindurch */
.lesehilfe { position: fixed; inset: 0; z-index: 55; pointer-events: none; forced-color-adjust: none; --y: 33vh; --band: 2.6em; }
.lesehilfe > div { position: absolute; left: 0; right: 0; }
.lesehilfe__band { top: calc(var(--y) - var(--band) / 2); height: var(--band); }
.lesehilfe__oben { top: 0; height: max(0px, calc(var(--y) - var(--band) / 2)); }
.lesehilfe__unten { top: calc(var(--y) + var(--band) / 2); bottom: 0; }
.d-lesehilfe-lineal .lesehilfe__band { background: rgba(0, 90, 108, 0.08); border-bottom: 3px solid var(--farbe-tinte); }
.d-lesehilfe-maske .lesehilfe { --band: 7em; }
.d-lesehilfe-maske .lesehilfe :is(.lesehilfe__oben, .lesehilfe__unten) { background: rgba(0, 34, 40, 0.55); }
.d-lesehilfe-maske .lesehilfe__band { box-shadow: inset 0 0 0 2px var(--farbe-tinte); }

/* ------------------------------------------------------------------ Mobil und Tablet */

@media (max-width: 1200px) {
  /* Kopf bleibt oben stehen, damit das Menü immer erreichbar ist. Ab dem ersten Scrollen (kopf-marke,
     seite.js) bekommt er eine helle Fläche und wird schmaler; auf Handys schrumpft dabei das Logo. */
  .kopf, .kopf--ueber-bild { position: fixed; top: 0; left: 0; right: 0; padding-top: var(--oben); transition: background-color 0.5s var(--kurve), box-shadow 0.5s var(--kurve); }
  .ausklapp > .rahmen { scroll-margin-top: calc(100px + var(--oben)); } /* unter dem festen Kopf */
  /* Deckend statt durchscheinend: Safari 26 färbt den Bereich hinter Uhr und Dynamic Island nur mit der Farbe
     einer deckenden festen Kopfleiste ein – sonst scrollt der Inhalt dort sichtbar durch */
  .kopf[data-gescrollt] { background: var(--grund); box-shadow: 0 1px 0 var(--linie-zart), 0 12px 30px -24px rgba(0, 67, 79, 0.35); }
  body:not(:has(.kopf--ueber-bild)) main { padding-top: calc(var(--kopf-platz, 96px) + var(--oben)); }
  .kopf__innen { grid-template-columns: auto 1fr; min-height: 96px; gap: 16px; transition: min-height 0.5s var(--kurve); }
  /* Bei offenem Menü stehen Kopf und Logo wieder in voller Größe; beim Schließen schrumpfen sie, solange gescrollt ist */
  body:not(.menue-offen) .kopf[data-gescrollt] .kopf__innen { min-height: 72px; }
  .navigation { display: none; }
  .kopf__logo { width: 172px; position: relative; z-index: 60; transition: width 0.5s var(--kurve); }
  body:not(.menue-offen) .kopf[data-gescrollt] .kopf__logo { width: 140px; }

  /* Hamburger aus zwei Linien, die sich zum X drehen */
  .menue-knopf {
    display: inline-flex; justify-self: end; position: relative; z-index: 60;
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 1px var(--linie-zart);
    transition: background-color 0.5s var(--kurve), box-shadow 0.5s var(--kurve);
  }
  /* Gescrollt steht der Kopf auf deckendem Grund: dort braucht der Knopf keinen eigenen Kreis mehr
     (bei offenem Menü bleibt er, das Menü liegt halbtransparent über der Seite) */
  body:not(.menue-offen) .kopf[data-gescrollt] .menue-knopf { background-color: transparent; box-shadow: none; }
  .menue-knopf .linie {
    position: absolute; left: 15px; right: 15px; height: 1.5px; border-radius: 2px; background: var(--farbe-tinte);
    transition: transform 0.6s var(--kurve), top 0.6s var(--kurve);
  }
  .menue-knopf .linie:first-child { top: 21px; }
  .menue-knopf .linie:last-child { top: 30px; }
  .menue-knopf[aria-expanded="true"] .linie:first-child { top: 25.5px; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .linie:last-child { top: 25.5px; transform: rotate(-45deg); }

  /* Liste per margin-block: auto mittig – bei Überlänge (Unterpunkte, kleine Handys) bleibt sie oben und scrollt */
  .mobilmenue {
    display: flex; position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(120px + var(--oben)) max(var(--rand), var(--rechts-sicher)) calc(60px + var(--unten)) max(var(--rand), var(--links-sicher));
    background: rgba(255, 253, 250, 0.86); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden; transition: opacity 0.6s var(--kurve), visibility 0s linear 0.6s;
  }
  .mobilmenue[data-offen] { opacity: 1; visibility: visible; transition: opacity 0.6s var(--kurve), visibility 0s; }
  .mobilmenue > ul { list-style: none; margin: auto 0; padding: 0; width: 100%; display: grid; gap: 4px; }
  .mobilmenue li { overflow: hidden; }
  .mobilmenue a {
    display: block; padding: 8px 0; text-decoration: none;
    font-family: var(--schrift-display); font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 400; line-height: 1.15; color: var(--farbe-tinte);
    transform: translateY(48px); opacity: 0;
    transition: transform 0.8s var(--kurve), opacity 0.8s var(--kurve);
  }
  .mobilmenue[data-offen] a { transform: none; opacity: 1; }
  .mobilmenue > ul > li:nth-child(1) a { transition-delay: 0.06s; }
  .mobilmenue > ul > li:nth-child(2) a { transition-delay: 0.12s; }
  .mobilmenue > ul > li:nth-child(3) a { transition-delay: 0.18s; }
  .mobilmenue > ul > li:nth-child(4) a { transition-delay: 0.24s; }
  .mobilmenue > ul > li:nth-child(5) a { transition-delay: 0.30s; }
  .mobilmenue > ul > li:nth-child(6) a { transition-delay: 0.36s; }
  .mobilmenue a[aria-current="page"] { font-style: italic; }
  /* Unterpunkte als kleine umbrechende Zeile unter dem Hauptpunkt; sie fahren mit ihm ein */
  .mobilmenue__unter { list-style: none; margin: -2px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
  .mobilmenue .mobilmenue__unter a {
    padding: 6px 0; font-family: var(--schrift-text); font-size: 0.75rem; font-weight: 600; line-height: 1.4;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .mobilmenue a[aria-current="page"]::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 14px; border-radius: 50%; background: var(--schwung); vertical-align: middle; }
  body.menue-offen { overflow: hidden; }

  /* Seitenkopf auf Tablet und Handy: über die ganze Breite, ohne Rundungen; von der Schale bleibt nur die Kante oben,
     unten geht der Titelbereich ohne Rand und Schatten in die Seite über (gleicher Grund) */
  .seitenkopf {
    width: 100%; padding: var(--abstand-schale) 0 0; border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(0, 90, 108, 0.07);
  }
  .seitenkopf__bild img, .seitenkopf__titel { border-radius: 0; }

  .karten, .bildkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karten > :last-child:nth-child(odd), .bildkarten > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 560px; justify-self: center; width: 100%; }
  /* Tablet: drei Spalten, Termin als eigene Zeile darunter */
  .fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .fuss__termin { grid-column: 1 / -1; }
  .faq-raster, .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .faq-raster { row-gap: clamp(36px, 6vw, 90px); }
  .faq-titel { margin-bottom: 0; }
  .faq-raster .hinweiskasten { grid-column: 1; grid-row: auto; }
}

@media (max-width: 767px) {
  /* Handy: beim ersten Laden größeres Logo, beim Scrollen schrumpft es auf die normale Größe */
  :root { --kopf-platz: 120px; }
  .kopf__innen { min-height: 120px; }
  .kopf__logo { width: 210px; }
  :root { --abstand-abschnitt: 72px; }
  .hero__raster, .bild-text { grid-template-columns: minmax(0, 1fr); }
  .bild-text--gespiegelt .bild-text__bild { order: 0; }
  /* gespiegelt eigens genannt: die Regel oben ist spezifischer und schöbe den Blob sonst über den Rand */
  .bild-text__bild .motiv, .bild-text--gespiegelt .bild-text__bild .motiv { width: 120px; left: auto; right: -6px; bottom: -36px; }
  .hero { padding-top: 0; }
  .hero__text { padding-top: 64px; padding-bottom: 70px; max-width: none; }
  .karten, .bildkarten, .themen, .punkte--quer, .notfall, .buecher, .fragenliste, .kontakt-teaser { grid-template-columns: minmax(0, 1fr); }
  .karten > :last-child:nth-child(odd), .bildkarten > :last-child:nth-child(odd) { max-width: none; }
  /* Handy: Ziffer etwas kleiner und mehr Luft zwischen den Punkten – die hochrückende Ziffer (Scrollen)
     steht dann frei zwischen vorigem Text und Überzeile, statt an beiden zu kleben */
  .punkte, .punkte--quer { gap: 52px; }
  .punkt { padding-top: 92px; --ziffer-hub: -30px; }
  /* Ziffer eingerückt statt bündig mit dem Text: steht sonst wie über den Rand geschoben */
  .punkt::before { left: 14px; top: 4px; font-size: 7.5rem; }
  /* Fließtext linksbündig wie am Desktop; zentriert bleibt nur Kurzes (Abschnittsköpfe, Karten, Band, Fuß) */
  .bildkarte figcaption { text-align: left; }
  .hinweiskasten .kern { text-align: left; }
  .hinweiskasten .motiv { margin-left: 0; }
  .brief { text-align: left; }
  /* Text unter einem Foto bündig mit dem Fotorand, nicht mit dem Schalenrand: um den Innenabstand der Schale
     einrücken. Eine Schale in der Textspalte (Punkte-Karte) bleibt bündig mit der Fotoschale. */
  .bild-text > :not(.bild-text__bild) { padding-inline: var(--abstand-schale); }
  .kontakt-info > :not(.kontakt-info__bild) { margin-left: var(--abstand-schale); }
  .bild-text > :not(.bild-text__bild) > .schale { margin-inline: calc(-1 * var(--abstand-schale)); }
  /* Termin-Knopf unter einem Angebot mittig, als Abschluss des Blocks */
  .angebot-kopf > .knopf { display: flex; width: fit-content; margin: 36px auto 0; }
  /* Seitenkopf: kürzerer Übergang, weil das Foto niedriger ist */
  .seitenkopf__bild img { height: 300px; }
  .seitenkopf__titel { --weich: 110px; }
  .fragenliste li { font-size: 1.3rem; }
  .nur-ab-tablet { display: none; } /* z. B. Überzeile über „Ich freue mich darauf, Sie kennenzulernen“ */
  .fuss__raster { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .fuss__praxis address { padding-left: 0; }
  .fuss__termin .knopf-gruppe { grid-auto-flow: row; }
  .fuss__termin { width: auto; align-items: center; }
  .fuss__urheber { align-self: center; margin-bottom: 0; }
  .fuss__logo, .fuss__verband img, .fuss__verband p { margin-inline: auto; }
  .kontakt-info { text-align: left; }
  .kontakt-info__bild { margin-inline: auto; }
  .kontakt-info__bild .motiv { right: -6px; }
  .faq-raster .akkordeon { text-align: left; }
  /* FAQ wie die Buchempfehlungen: Fragen durch feine Linien getrennt statt als einzelne Kästen, Frage in der
     Titelschrift; auf- und zuklappbar bleiben sie */
  .akkordeon { gap: 0; }
  .akkordeon details, .akkordeon details:hover, .akkordeon details[open] {
    background: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--linie-zart);
  }
  .akkordeon details:last-child { border-bottom: 1px solid var(--linie-zart); }
  .akkordeon summary {
    padding: 22px 0; gap: 16px;
    font-family: var(--schrift-display); font-size: 1.45rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; text-transform: none;
  }
  .akkordeon__antwort { padding: 0 0 26px; }
  /* mehr Luft zwischen den untereinander stehenden Angebots- und Bildkarten */
  .karten { gap: 48px; }
  .bildkarten { gap: 64px; }

  .kontaktleiste {
    top: auto; bottom: calc(12px + var(--unten)); left: 50%; right: auto; transform: translateX(-50%);
    flex-direction: row; gap: 18px; padding: 6px 14px;
  }
  .kontaktleiste a { width: 48px; height: 48px; }
  .cookie-banner { left: 12px; right: 12px; width: auto; bottom: 84px; }
  .nach-oben { right: calc(12px + var(--rechts-sicher)); bottom: calc(18px + var(--unten)); width: 46px; height: 46px; }
  .darstellung-knopf { left: calc(12px + var(--links-sicher)); bottom: calc(18px + var(--unten)); width: 46px; height: 46px; }
  .darstellung { left: calc(8px + var(--links-sicher)); right: calc(8px + var(--rechts-sicher)); width: auto; bottom: calc(76px + var(--unten)); max-height: calc(100dvh - 96px - var(--unten)); }
  .vorlesen-leiste { left: calc(12px + var(--links-sicher)); bottom: calc(76px + var(--unten)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-erscheinen] { opacity: 1; transform: none; filter: none; }
}

@media print {
  .kontaktleiste, .nach-oben, .darstellung-knopf, .darstellung, .vorlesen-leiste, .lesehilfe, .cookie-banner, .menue-knopf, .mobilmenue, .welle, body::after { display: none !important; }
  .band, .fuss { background: none; color: var(--farbe-text); }
}

/* ------------------------------------------------------------------ Startseite: Hero über die volle Bildschirmhöhe
   Querformat: Bild füllt den Bildschirm, Text steht links im Weißraum des Bildes.
   Hochformat: Das Bild hat dort keinen seitlichen Weißraum. Deshalb füllt es den oberen Teil
   und läuft nach unten in Weiß aus, der Text steht im Weiß darunter (dasselbe Prinzip, vertikal). */

/* Desktop: Kopf bleibt beim Scrollen stehen. Ganz oben wie gestaltet (auf der Startseite durchsichtig über dem
   Hero), ab dem ersten Scrollen (kopf-marke, seite.js) helle Fläche, niedriger, kleineres Logo */
@media (min-width: 1201px) {
  .kopf, .kopf--ueber-bild { position: fixed; top: 0; left: 0; right: 0; padding-top: var(--oben); transition: background-color 0.5s var(--kurve), box-shadow 0.5s var(--kurve); }
  .kopf[data-gescrollt] {
    background: rgba(255, 253, 250, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--linie-zart), 0 12px 30px -24px rgba(0, 67, 79, 0.35);
  }
  body:not(:has(.kopf--ueber-bild)) main { padding-top: calc(156px + var(--oben)); }
  .kopf__innen { transition: min-height 0.5s var(--kurve); }
  .kopf[data-gescrollt] .kopf__innen { min-height: 88px; }
  .kopf__logo { transition: width 0.5s var(--kurve); }
  .kopf[data-gescrollt] .kopf__logo { width: 168px; }
}

.hero-voll {
  --kopf-hoehe: calc(156px + var(--oben));
  --welle-hoehe: clamp(60px, 7.5vw, 120px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  /* Bildgeometrie (breites Bild 2389 × 1344, Christina von 55 % bis 77,5 % der Bildbreite):
     --rw  dargestellte Bildbreite bei object-fit: cover
     --ox  Bildversatz: Christinas rechte Kante sitzt 96 px vor dem rechten Rand (Platz für die Kontaktleiste),
           ohne dass links oder rechts eine Lücke entsteht
     --links  linke Kante der Textspalte */
  --hero-h: 100vh; --hero-h: 100svh;
  --rw: max(100vw, calc(var(--hero-h) * 2389 / 1344));
  --ox: clamp(calc(100vw - var(--rw)), calc(100vw - 96px - var(--rw) * 0.775), 0px);
  --links: calc(max(0px, (100vw - 1440px - 2 * var(--rand)) / 2) + max(var(--rand), var(--links-sicher)));
  --zitat: clamp(5.5rem, 3rem + 5vw, 8.5rem);
  --zitat-einzug: max(0px, calc(var(--zitat) * 0.4 + 12px - var(--links)));
  padding: calc(var(--kopf-hoehe) + 24px) 0 calc(var(--welle-hoehe) + 48px);
  background: var(--grund);
}
.hero-voll__bild { position: absolute; inset: 0; z-index: -2; }
.hero-voll__bild picture { display: block; height: 100%; }
.hero-voll__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ox) 30%; }
/* Sichert die Lesbarkeit, wenn der Weißraum bei engeren Formaten schmaler wird */
.hero-voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 253, 250, 0.92) 0%, rgba(255, 253, 250, 0.7) 30%, rgba(255, 253, 250, 0) 56%);
}
.hero-voll__inhalt { width: 100%; }
/* Textspalte endet 32 px vor Christinas Arm */
.hero-voll .hero__text { max-width: min(36rem, calc(var(--ox) + var(--rw) * 0.55 - var(--links) - var(--zitat-einzug) - 32px)); padding: 0; margin-left: var(--zitat-einzug); }
.hero-voll .leitsatz { font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.6rem); }
.hero-voll .welle { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: var(--welle-hoehe); }

@media (max-width: 1200px) {
  .hero-voll { --kopf-hoehe: calc(96px + var(--oben)); overflow: visible; z-index: 3; }
}

/* Sehr niedrige Querformate (Handy quer): kompakter, damit der Hero möglichst in den Bildschirm passt */
@media (orientation: landscape) and (max-height: 520px) {
  .hero-voll { --kopf-hoehe: calc(84px + var(--oben)); --zitat: 4rem; padding: calc(var(--kopf-hoehe) + 4px) 0 calc(var(--welle-hoehe) + 12px); }
  /* Kopf so niedrig wie --kopf-hoehe (die große Handy-Kopfleiste unter 768 px überlappte sonst den Hero-Text) */
  .kopf__innen { min-height: 84px; }
  .kopf__logo { width: 150px; }
  /* Überzeile entfällt wie auf niedrigen Handys hochkant – das Logo steht direkt darüber. Sie ist die H1 der
     Startseite: nur optisch verstecken (wie .visuell-versteckt), damit Screenreader und Suchmaschinen sie behalten.
     !important bei der Größe, weil seite.js Überzeilen eine Breite setzt */
  .hero-voll .overline { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; box-shadow: none; }
  .hero-voll .leitsatz { font-size: 1.75rem; margin-bottom: 0.35em; }
  .hero-voll .einleitung { font-size: 0.9375rem; line-height: 1.5; }
  .hero-voll .hero__name { font-size: 0.875rem; margin-top: 0.8em; }
  .hero-voll .hero__knopf { margin-top: 1em; }
  /* Termin-Knopf einzeilig: die Textspalte ist hier schmaler als der Knopf in normaler Größe (er ragt ins Bild) */
  .hero-voll .hero__knopf .knopf { padding-inline: 20px; font-size: 0.8125rem; letter-spacing: 0.04em; white-space: nowrap; }
  /* Cookie-Hinweis kompakt, damit er auf Handys im Querformat nicht den ganzen Bildschirm füllt */
  .cookie-banner { width: min(600px, calc(100vw - 24px)); padding: 14px 18px; }
  .cookie-banner__titel { display: none; }
  .cookie-banner p { margin-bottom: 10px; }
}
/* Schmale Querformate (iPhone SE, viele Android-Handys): Die Textspalte neben Christina ist hier so schmal, dass
   der Text mehr Zeilen braucht – etwas kleinere Schrift, damit der Termin-Knopf noch in den Bildschirm passt */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 799px) {
  .hero-voll .leitsatz { font-size: 1.55rem; }
  .hero-voll .einleitung { font-size: 0.875rem; }
  .hero-voll .hero__name { font-size: 0.8125rem; margin-top: 0.6em; }
}

/* Startseite, Fenster höher als breit: Text oben, Bild füllt den Rest des Bildschirms.
   Das Bild wird gezielt vergrößert dargestellt, damit Christina groß genug ist:
   --rh / --rw   dargestellte Bildhöhe und -breite
   --bild-links  linke Kante des dargestellten Bildes
   Der Bildkasten rückt mit negativem Abstand unter den Text, sodass Christinas Kopf
   (26 % der Bildhöhe) immer 24 px unter dem Textende beginnt – unabhängig davon, wie der Text umbricht.
   Der Bereich über dem Kopf ist helle Wand und läuft oben in die Grundfarbe aus. */
@media (max-aspect-ratio: 1/1) {
  .hero-voll {
    /* breites Bild (2389 × 1344): Christina 55–77,5 % der Breite, Mitte bei 66 % */
    --rh: calc(100vw * 1.35);
    --rw: calc(var(--rh) * 2389 / 1344);
    --bild-links: calc(100vw * 0.66 - var(--rw) * 0.66);
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 100vh; min-height: 100svh;
    overflow: visible; z-index: 3;
    padding: calc(var(--kopf-hoehe) + clamp(20px, 4vw, 48px)) 0 0;
  }
  .hero-voll::before { background: none; }
  .hero-voll__inhalt { position: relative; z-index: 1; order: 1; }
  .hero-voll .hero__text { max-width: 44rem; }
  .hero-voll .leitsatz { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); }
  .hero-voll .einleitung { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem); line-height: 1.55; max-width: 34rem; }
  .hero-voll .hero__name { font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); margin-top: 1em; }

  .hero-voll__bild {
    position: relative; inset: auto; z-index: 0; order: 2;
    flex: 1 0 auto; height: auto; min-height: calc(var(--rh) * 0.56);
    margin-top: calc(24px - var(--rh) * 0.26);
    overflow: hidden;
  }
  .hero-voll__bild picture { position: absolute; inset: 0; height: auto; }
  .hero-voll__bild img {
    position: absolute; top: 0; left: var(--bild-links);
    width: var(--rw); height: var(--rh); max-width: none; object-fit: fill; object-position: 0 0; /* Versatz des Querformats aufheben */
  }
  .hero-voll__bild::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--grund) 0, rgba(255, 253, 250, 0) calc(var(--rh) * 0.2));
  }

}
/* Tablet hochkant (768 px bis Seitenverhältnis 1 : 1): Der Text ist hier schmaler als der Platz neben Christina.
   Deshalb liegt das Bild wie im Querformat hinter dem Text: unten bündig, sodass Christina bis zur Welle zu sehen
   ist, ihre rechte Kante 24 px vor dem Rand. Der Text steht senkrecht mittig links und endet 32 px vor ihrem Arm
   (Christina: 55–77,5 % der Bildbreite). */
@media (max-aspect-ratio: 1/1) and (min-width: 768px) {
  .hero-voll {
    --rh: calc(100vw * 1.1);
    --rw: calc(var(--rh) * 2389 / 1344);
    --bild-links: calc(100vw - 24px - var(--rw) * 0.775);
    --christina-links: calc(100vw - 24px - var(--rw) * 0.225);
    /* Höchstens so hoch, dass das Bild oben knapp unter dem Kopf beginnt – in hohen Fenstern bliebe darüber
       sonst leerer Grund; der nächste Abschnitt rückt dann ins Bild */
    min-height: min(100vh, calc(var(--kopf-hoehe) + var(--rh) * 0.9));
    min-height: min(100svh, calc(var(--kopf-hoehe) + var(--rh) * 0.9));
    justify-content: center;
    padding: calc(var(--kopf-hoehe) + 24px) 0 calc(var(--welle-hoehe) + 48px);
  }
  .hero-voll__bild { position: absolute; inset: 0; z-index: 0; flex: none; height: auto; min-height: 0; margin: 0; }
  .hero-voll__bild img { top: auto; bottom: 0; }
  /* oben: Bildkante weich in den Grund; links: heller Schleier für die Lesbarkeit, endet vor Christina */
  .hero-voll__bild::after {
    background:
      linear-gradient(180deg, var(--grund) calc(100% - var(--rh)), rgba(255, 253, 250, 0) calc(100% - var(--rh) * 0.78)),
      linear-gradient(90deg, rgba(255, 253, 250, 0.94) 0, rgba(255, 253, 250, 0.8) calc(var(--christina-links) - 140px), rgba(255, 253, 250, 0) calc(var(--christina-links) - 8px));
  }
  .hero-voll .hero__text { --spalte: calc(var(--christina-links) - 32px - var(--links) - var(--zitat-einzug)); max-width: min(44rem, var(--spalte)); }
  /* „Wenn das Leben gerade“ braucht das 9,2-Fache der Schriftgröße und soll in einer Zeile stehen */
  .hero-voll .leitsatz { font-size: min(clamp(2rem, 1.2rem + 3.4vw, 3.6rem), calc(var(--spalte) / 9.4)); }
  .hero-voll .hero__knopf .knopf { padding-inline: 20px; white-space: nowrap; }
}

/* Unter 768 px: Hochkant-Bild (1152 × 2025) in voller Breite, Christina zuerst.
   Das Bild läuft ab rund 78 % seiner Höhe selbst in die Grundfarbe aus (in Photoshop angelegt),
   der Text liegt ab 84 % auf dem ausgeblendeten Bereich. */
@media (max-aspect-ratio: 1/1) and (max-width: 767px) {
  .hero-voll {
    /* 86 % der Breite, rechtsbündig; der linke Rand läuft per Maske in den Seitengrund aus */
    --rw: 86vw;
    --rh: calc(var(--rw) * 2025 / 1152);
    --bild-links: calc(100vw - var(--rw));
    padding-top: 0; min-height: 0;
  }
  /* Bild rückt um 3 % nach unten, damit der Kopf (Haaransatz bei 12,5 %) unter dem Menü-Knopf beginnt; der Text
     beginnt bei 82 %. Nur noch Rückfallebene für Browser ohne Container-Query-Einheiten (siehe unten) */
  .hero-voll__bild { order: 1; flex: none; height: calc(var(--rh) * 0.97); min-height: 0; margin-top: 0; }
  .hero-voll__bild img {
    top: calc(var(--rh) * 0.03);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%);
  }
  .hero-voll__inhalt { order: 2; margin-top: calc(var(--rh) * -0.15); padding-block: 0 calc(var(--welle-hoehe) + 24px); }
  .hero-voll .leitsatz { font-size: clamp(1.85rem, 1.2rem + 3vw, 2.6rem); margin-bottom: 0.4em; }
  .hero-voll .einleitung { font-size: 0.9688rem; margin-bottom: 0; }
  .hero-voll .hero__name { margin-top: 0.8em; }
  .hero-voll .hero__knopf { margin-top: 1.2em; }
  .hero-voll .welle { z-index: 2; }
  /* Links ist kein Rand frei: kein Anführungszeichen, kein Einzug */
  .hero-voll { --zitat-einzug: 0px; }
  .hero-voll .leitsatz::before { display: none; }
}
/* Handys hochkant, mit Container-Query-Einheiten: Der Hero ist genau einen Bildschirm hoch (100svh, also mit
   eingeblendeten Browserleisten), der Text steht unten, sodass der Termin-Knopf immer ohne Scrollen zu sehen ist.
   Der Bildbereich füllt den Platz darüber (100cqh) und das Bild ragt unter den Text, der auf einem hellen Verlauf
   steht. Gesicht und Hals bleiben immer frei: Christinas Haaransatz liegt bei 12,5 % der Bildhöhe, der Hals endet
   bei rund 44 %. Der Kopf beginnt --kopf-frei unter der Oberkante (unter Logo und Menü-Knopf), der Hals endet
   also bei --kopf-frei + 31,5 % der Bildhöhe. Reicht der Platz über dem Text dafür nicht, wird das Bild kleiner. */
@supports (height: 1cqh) {
  @media (max-aspect-ratio: 1/1) and (max-width: 767px) {
    .hero-voll {
      --kopf-frei: calc(92px + var(--oben));
      --verlauf: 80px;
      min-height: 100vh; min-height: 100svh;
      overflow: clip;
    }
    /* Mindesthöhe: Platz für ein Porträt von 330 px Bildhöhe (0,315 × 330 px ≈ 104 px bis zum Halsende) */
    .hero-voll__bild {
      flex: 1 1 0; height: auto; min-height: calc(var(--kopf-frei) + 104px + var(--verlauf));
      container-type: size; overflow: visible;
    }
    .hero-voll__bild::after { display: none; }
    .hero-voll__bild img {
      --bh: min(calc(86vw * 2025 / 1152), calc((100cqh - var(--verlauf) - var(--kopf-frei)) / 0.315));
      top: calc(var(--kopf-frei) - var(--bh) * 0.125); left: auto; right: 0;
      width: calc(var(--bh) * 1152 / 2025); height: var(--bh);
      /* links und oben weich in den Grund – oben, falls das verkleinerte Bild unter den Seitenrand rückt */
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 12%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 12%);
      mask-composite: intersect;
    }
    .hero-voll__inhalt { margin-top: 0; }
    /* Heller Verlauf hinter dem Text: beginnt --verlauf über dem Text, auf Höhe des Textes fast deckend */
    .hero-voll__inhalt::before {
      content: ""; position: absolute; left: 0; right: 0; top: calc(var(--verlauf) * -1); bottom: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(180deg, rgba(255, 253, 250, 0) 0, rgba(255, 253, 250, 0.3) calc(var(--verlauf) * 0.4), rgba(255, 253, 250, 0.85) var(--verlauf), var(--grund) calc(var(--verlauf) + 140px));
    }
  }
  /* Niedrige Handys (z. B. iPhone SE mit Browserleisten): kompakter, damit das Porträt groß genug bleibt.
     Die Überzeile entfällt – das Logo steht direkt darüber –, der Verlauf über dem Text wird kürzer. */
  @media (max-aspect-ratio: 1/1) and (max-width: 767px) and (max-height: 800px) {
    .hero-voll { --verlauf: 56px; }
    .hero-voll .overline { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; box-shadow: none; } /* H1: nur optisch versteckt, siehe oben */
    .hero-voll .leitsatz { font-size: 1.7rem; margin-bottom: 0.35em; }
    .hero-voll .einleitung { font-size: 0.9rem; line-height: 1.5; }
    .hero-voll .hero__name { font-size: 0.875rem; line-height: 1.45; margin-top: 0.7em; }
    .hero-voll .hero__knopf { margin-top: 1em; }
  }
}
/* Schmale Handys: Termin-Knopf im Hero etwas kompakter, damit die Beschriftung in eine Zeile passt */
@media (max-width: 480px) {
  .hero__knopf .knopf { padding-inline: 18px; font-size: 0.75rem; letter-spacing: 0.03em; }
}

/* Kontaktleiste unten zentriert, solange das Fenster höher als breit ist (rechts mittig läge sie auf dem Gesicht) */
@media (max-aspect-ratio: 1/1) {
  .kontaktleiste {
    top: auto; bottom: calc(12px + var(--unten)); left: 50%; right: auto; transform: translateX(-50%);
    flex-direction: row; gap: 18px; padding: 6px 14px;
  }
  .kontaktleiste a { width: 48px; height: 48px; }
  /* Erst nach dem ersten Bildschirm einblenden, damit sie den Termin-Knopf im Hero nicht verdeckt */
  .js .kontaktleiste { transition: opacity 0.5s var(--kurve), transform 0.5s var(--kurve), visibility 0s linear 0.5s; }
  /* … und am Seitenende wieder ausblenden, damit sie die Rechtslinks nicht verdeckt (kein Freiraum unter dem Fußbereich nötig) */
  .js .kontaktleiste:not([data-sichtbar]), .js .kontaktleiste[data-am-ende] { opacity: 0; visibility: hidden; transform: translate(-50%, 16px); }
  .js .kontaktleiste[data-sichtbar]:not([data-am-ende]) { transition-delay: 0s; }
  /* Platz für den Nach-oben-Knopf unter den Rechtslinks – in der Farbe des Fußbereichs statt als heller Streifen */
  .fuss { padding-bottom: 84px; }
}

/* Niedrige Querformate (Handy quer): Leiste unten würde den Hero-Text verdecken – senkrecht an den rechten Rand */
@media (orientation: landscape) and (max-height: 520px) {
  .kontaktleiste {
    top: 50%; bottom: auto; left: auto; right: calc(10px + var(--rechts-sicher)); transform: translateY(-50%);
    flex-direction: column; gap: 2px; padding: 4px;
  }
  .kontaktleiste a { width: 42px; height: 42px; }
  .kontaktleiste svg { width: 22px; height: 22px; }
}

/* Sehr schmale Handys hochkant: Kontaktleiste enger, damit sie den Knopf „Darstellung anpassen“ links nicht berührt */
/* Hochformat: Die Kontaktleiste steht unten mittig – die Vorlese-Leiste deshalb über dem Knopf statt daneben */
@media (max-aspect-ratio: 1/1) {
  .vorlesen-leiste { left: calc(12px + var(--links-sicher)); bottom: calc(clamp(14px, 2vw, 28px) + 62px + var(--unten)); }
}
@media (max-aspect-ratio: 1/1) and (max-width: 380px) {
  .kontaktleiste { gap: 8px; }
}

/* ------------------------------------------------------------------ Einstellungen der Darstellung
   Gesetzt von seite.js bzw. dem Inline-Skript im Kopf an <html> (Panel: Abschnitt „Darstellung anpassen“).
   Ohne gespeicherte Auswahl sind d-kontrast und d-ruhig an, wenn das System mehr Kontrast bzw. weniger Bewegung
   wünscht. */

/* Textgröße: alle Schriftgrößen sind rem-basiert und wachsen mit */
html[data-d-text="125"] { font-size: 125%; }
html[data-d-text="150"] { font-size: 150%; }
/* Die Termin-Knöpfe im Fußbereich stehen sonst einzeilig und ragen bei großer Schrift über schmale Handys */
html[data-d-text] .fuss__termin .knopf { white-space: normal; }
/* Lange Wörter („Gesprächspsychotherapie“) passen bei großer Schrift nicht in schmale Spalten: trennen, notfalls umbrechen */
html[data-d-text] :is(main, .fuss) { hyphens: auto; overflow-wrap: anywhere; }
/* Hauptpunkte der Desktop-Navigation bleiben in Grundgröße (1.28rem bei 16 px): sie sind ohnehin groß gesetzt und
   liefen sonst neben dem Logo aus dem Fenster. Unterpunkte und Burgermenü wachsen mit */
html[data-d-text] .navigation > ul > li > a { font-size: 20.5px; }

/* Lesbare Schrift: serifenlos auch in Überschriften, Navigation und Hero */
.d-schrift { --schrift-display: "Montserrat Lesbar", var(--schrift-text); }
.d-schrift .mobilmenue a[aria-current="page"] { font-style: normal; text-decoration: underline; text-underline-offset: 6px; }

/* Mehr Abstand: Werte aus WCAG 1.4.12 (Zeilenhöhe 1,5, Absätze 2, Wörter 0,16 und Buchstaben 0,12 der Schriftgröße) */
.d-abstand :is(main, .fuss, .darstellung) :is(p, li, address, dd, .schalter) { line-height: 1.8; letter-spacing: 0.12em; word-spacing: 0.16em; }
.d-abstand :is(main, .fuss) p:not(:last-child) { margin-bottom: 2em; }
.d-abstand :is(h1, h2, h3, h4) { line-height: 1.35; }

/* Hoher Kontrast: Rosé weicht Petrol (Knöpfe mit weißer Schrift 7,8 : 1), Fließtext tiefer, Linien kräftiger,
   ruhige Flächen ohne Körnung, Lichtflecken und Glas */
.d-kontrast {
  --farbe-text: var(--farbe-tinte-tief);
  --farbe-rose: var(--farbe-tinte);
  --farbe-rose-tiefer: var(--farbe-tinte-tief);
  --linie-zart: rgba(0, 67, 79, 0.5);
}
.d-kontrast body::after { display: none; }
.d-kontrast a { text-decoration-color: currentColor; }
.d-kontrast .band { background: var(--farbe-tinte-tief); }
.d-kontrast .band--sofa { background: var(--hauch-sofa); }
.d-kontrast .band p { color: #fff; }
.d-kontrast .band--sofa p { color: var(--farbe-tinte-tief); }
.d-kontrast .fuss { background: var(--farbe-tinte-tief); }
.d-kontrast .fuss__titel, .d-kontrast .fuss__urheber a { opacity: 1; }
.d-kontrast .overline { box-shadow: 0 0 0 1px var(--farbe-tinte); }
.d-kontrast .knopf--rose { box-shadow: none; }
.d-kontrast :is(.kontaktleiste, .nach-oben) {
  background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 2px var(--farbe-tinte);
}
.d-kontrast :is(.darstellung, .cookie-banner) { box-shadow: 0 0 0 2px var(--farbe-tinte), 0 30px 60px -24px rgba(0, 67, 79, 0.35); }

/* Bewegung aus: dieselben Regeln wie bei „Bewegung reduzieren“ im System (siehe prefers-reduced-motion oben) */
html.d-ruhig { scroll-behavior: auto; }
.d-ruhig *, .d-ruhig *::before, .d-ruhig *::after { transition: none !important; animation: none !important; }
.d-ruhig [data-erscheinen] { opacity: 1; transform: none; filter: none; }

/* Links hervorheben: immer unterstrichen (Knöpfe ausgenommen), Fokusrahmen 3 px statt 2 px */
.d-links a:not(.knopf):not(.sprunglink) { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: currentColor; text-underline-offset: 4px; }
.d-links :focus-visible, .d-links .schalter input:focus-visible + .schalter__bahn, .d-links .pillenwahl input:focus-visible + span { outline-width: 3px; }

/* Windows-Kontrastmodus: Systemfarben, Knopf und Panel mit sichtbarem Rand */
@media (forced-colors: active) {
  .darstellung-knopf, .darstellung { border: 2px solid ButtonText; }
  .darstellung-knopf[aria-expanded="true"] { border-color: Highlight; }
  .schalter__bahn { border: 1px solid ButtonText; }
  .schalter input:checked + .schalter__bahn { background: Highlight; }
  .pillenwahl input:checked + span { outline: 2px solid Highlight; }
}