/* ==========================================================================
   Praxis-Website Denise Zöhrer
   Übersetzt aus dem Design-System "Denise Zöhrer Design System" (claude.ai/design)
   nach statischem HTML/CSS. Tokens wörtlich übernommen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften — self-hosted, KEIN Google-Fonts-CDN.
   Die dynamische Einbindung von Google Fonts ohne Einwilligung wurde als
   DSGVO-Verstoß gewertet (LG München I, 3 O 17493/20). Die Dateien liegen
   unter assets/fonts/ und werden vom eigenen Server ausgeliefert.

   Lora und Raleway, Variable Fonts, Latin-Subset, SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-italic-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway-variable.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens — Farben
   -------------------------------------------------------------------------- */
:root {
  --farbe-grund: #F7F4EF;        /* warmes Beige, Seitenhintergrund */
  --farbe-flaeche: #FFFFFF;      /* Karten, Formular, abgesetzte Blöcke */
  --farbe-flaeche-warm: #EFEAE2; /* zweite Grundfläche für Sektionswechsel */
  --farbe-text: #3A3A36;         /* warmes Dunkelgrau, Fließtext */
  /* Sekundärtext. Gegenüber dem Design-System minimal abgedunkelt (war #6B6B63):
     der Originalton hielt 4,5:1 nur auf dem hellen Grund, nicht auf der warmen
     Fläche (4,49) und nicht auf Salbei-hell (4,44) — beides kommt in Fußzeile und
     Karten-Attribution vor. #65655C hält überall mindestens 4,86:1. */
  --farbe-text-leise: #65655C;
  --farbe-akzent: #6E7F6F;       /* Salbeigrün: Linien, Icons, Akzente */
  --farbe-akzent-tief: #5C6B5D;  /* Salbei dunkel: Text, Links, Button-Füllung */
  --farbe-akzent-hell: #E6EBE3;  /* Salbei-Fläche für Chips, Zitatblöcke */
  --farbe-linie: #DFD9CF;        /* Trennlinien, Rahmen */
  --farbe-fehler: #9C4A3C;       /* ruhiges Terrakotta, nur Formular-Fehler */
  --farbe-stempel: #9C4A3C;      /* Stempel-Rostrot (Samstags, Preis) */
  --text-auf-akzent: #FFFFFF;

  /* Typografie */
  --schrift-display: 'Lora', Georgia, 'Times New Roman', serif;
  --schrift-text: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --groesse-text: 1.0625rem;   /* 17px Minimum */
  --groesse-klein: 0.9375rem;
  --groesse-mini: 0.8125rem;
  --groesse-h1: clamp(2.25rem, 5vw, 3rem);
  --groesse-h2: clamp(1.75rem, 3.5vw, 2.25rem);
  --groesse-h3: 1.375rem;
  --groesse-zitat: clamp(1.5rem, 3vw, 2rem);
  --zeilenhoehe-text: 1.65;
  --zeilenhoehe-titel: 1.25;
  /* 57ch, nicht 68: die ch-Einheit misst die Breite der Ziffer 0, der
     Raleway-Fliesstext laeuft schmaler. In 68ch passten real 84 Zeichen
     pro Zeile (gemessen mit deutschem Textmuster), Richtwert sind 65 bis
     75. 57ch ergeben real rund 70. Wer den Wert anhebt, macht die Zeilen
     wieder zu lang. */
  --lesebreite: 57ch;
  --laufweite-kicker: 0.14em;
  --gewicht-titel: 500;

  /* Raum */
  --abstand-2xs: 4px;
  --abstand-xs: 8px;
  --abstand-s: 12px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  --abstand-xl: 32px;
  --abstand-2xl: 48px;
  --abstand-3xl: 64px;
  --abstand-4xl: 96px;
  --abstand-5xl: 128px;
  --abstand-sektion: clamp(64px, 9vw, 120px);
  --trefferflaeche: 44px;
  --inhalt-breite: 1080px;

  /* Wirkung */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-pill: 999px;
  --schatten-weich: 0 8px 30px rgba(60, 70, 60, 0.06);
  --schatten-kopf: 0 2px 16px rgba(58, 58, 54, 0.08);
  --dauer: 350ms;
  --kurve: cubic-bezier(.25, .6, .3, 1);
  --fokus-ring: 2px solid var(--farbe-akzent);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-text);
  background: var(--farbe-grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-titel);
  line-height: var(--zeilenhoehe-titel);
  color: var(--farbe-text);
}

a {
  color: var(--farbe-akzent-tief);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--farbe-akzent) 45%, transparent);
  text-underline-offset: 3px;
}
a:hover { color: var(--farbe-akzent-tief); text-decoration-color: currentColor; }

:focus-visible { outline: var(--fokus-ring); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--farbe-akzent-hell); }

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

/* --------------------------------------------------------------------------
   Layout-Grundlagen
   -------------------------------------------------------------------------- */
.inhalt {
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: 24px;
}

.sektion { padding-block: var(--abstand-sektion); }
.warm { background: var(--farbe-flaeche-warm); }
section[id] { scroll-margin-top: 120px; }

.prosa p {
  max-width: var(--lesebreite);
  margin: 0 0 1.25em;
}
.prosa p:last-child { margin-bottom: 0; }

.mitte { text-align: center; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--farbe-flaeche);
  padding: 14px 20px;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Kopfbereich
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--farbe-grund);
  transition: box-shadow var(--dauer) var(--kurve);
}
/* Beim Scrollen kommt nur ein Schatten dazu, die Höhe bleibt gleich. */
.kopf.beschattet { box-shadow: var(--schatten-kopf); }

/* Der Kopf darf breiter laufen als der Textkörper: die vier Menüpunkte tragen
   lange deutsche Bezeichnungen und passen im 1080er-Raster nicht in eine Zeile. */
.kopf .inhalt { max-width: 1240px; }

.kopf-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.kopf-marke { text-decoration: none; }

/* --------------------------------------------------------------------------
   Wortmarke: typografisches Zeichen "DZ" neben Name und Berufsbezeichnung.
   Schlichter Schriftzug in der Hausschrift, kein Handschrift-Logo.

   Kein flex-shrink: 0. Sonst kann die Kopfzeile nicht schrumpfen und das
   Dokument bekommt bei starkem Zoom eine horizontale Bildlaufleiste
   (WCAG 1.4.10 Reflow, geprüft bei 320px Breite).
   -------------------------------------------------------------------------- */
.wortmarke { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.wortmarke-zeichen {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-tief);
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
}
.wortmarke-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Name und Berufsbezeichnung stehen IMMER und in immer derselben Größe.
   Kein Schrumpfen beim Scrollen: Das hatte den Kopf niedriger gemacht,
   wodurch die Umschaltschwelle sofort wieder unterschritten wurde und die
   Wortmarke hin und her sprang. */
.wortmarke-name {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--farbe-text);
  line-height: 1.2;
  white-space: nowrap;
}
.wortmarke-beruf {
  font-family: var(--schrift-text);
  font-size: 0.8125rem;
  color: var(--farbe-text-leise);
  letter-spacing: 0.01em;
  white-space: nowrap; /* neben der vollen Navigation einzeilig halten */
}

.nav-liste {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap; /* das Menü bleibt einzeilig, sonst greift der Burger */
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--farbe-text);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve);
}
.nav-link:hover { color: var(--farbe-akzent-tief); background: var(--farbe-akzent-hell); }
.nav-link.aktiv {
  color: var(--farbe-akzent-tief);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--farbe-akzent);
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0; /* sonst quetscht das Flex-Layout auf schmalen Geräten die Trefferfläche */
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-s);
  background: var(--farbe-flaeche);
  cursor: pointer;
  color: var(--farbe-akzent-tief);
}
.burger .icon-schliessen { display: none; }
.burger[aria-expanded="true"] .icon-schliessen { display: block; }
.burger[aria-expanded="true"] .icon-oeffnen { display: none; }

.mobil-menue { display: none; }

/* Schwelle empirisch bestimmt: Bei 1101px blieben nur 2px Reserve zwischen
   Wortmarke und Menü. Unter 1180px übernimmt deshalb der Burger. */
/* Auf schmalen Geräten und bei starkem Zoom darf die Wortmarke umbrechen,
   damit das Dokument keine horizontale Bildlaufleiste bekommt
   (WCAG 1.4.10 Reflow). Die Berufsbezeichnung bleibt dabei stehen, sie wird
   nur etwas kleiner gesetzt, damit der Kopf nicht das halbe Display füllt. */
@media (max-width: 700px) {
  .wortmarke-name,
  .wortmarke-beruf { white-space: normal; }
  .wortmarke-name { font-size: 1.125rem; }
  .wortmarke-beruf { font-size: 0.75rem; line-height: 1.35; }

  /* Die zweizeilige Berufsbezeichnung macht den Kopf hier rund 100px hoch.
     Die Sprungmarken müssen mehr Abstand lassen, sonst verschwindet eine
     angesprungene Überschrift knapp hinter dem Kopf. */
  section[id] { scroll-margin-top: 140px; }
}

@media (max-width: 1180px) {
  .nav-desktop { display: none; }
  .burger { display: inline-flex; }
  .mobil-menue[data-offen="true"] {
    display: block;
    background: var(--farbe-grund);
    border-top: 1px solid var(--farbe-linie);
    box-shadow: var(--schatten-kopf);
  }
  .mobil-menue ul {
    list-style: none;
    margin: 0;
    padding: 12px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobil-menue a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 17px;
    font-weight: 600;
    color: var(--farbe-text);
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   Hero — große Aussage links, Porträt rechts, auf getöntem Band.
   Aufbau nach den Referenzen von designtiger.at.
   -------------------------------------------------------------------------- */
.hero {
  /* Als Variable, weil das Hero-Foto die Polsterung nach oben und unten
     wieder aufheben muss, um bis an die Bandkanten zu reichen. */
  --hero-polster: clamp(48px, 7vw, 88px);
  background: var(--farbe-flaeche-warm);
  padding-block: var(--hero-polster);
}

.raster-hero {
  position: relative;   /* Bezug für die absolut liegenden Stempel */
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}


.hero-text h1 {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  line-height: 1.18;
  text-wrap: balance;
}

.hero-praxis {
  margin: 20px 0 0;
  /* Groesser und in der vollen Textfarbe statt leise (Wunsch Denise): die
     Adresse ist das Ortssignal des Heros und stand vorher zu weit hinten. */
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--farbe-text);
}

/* Der Wrapper ist standardmaessig transparent: am Handy bleiben Adresse und
   Knopfreihe direkte Flex-Kinder von .hero-text, damit die dortige
   Reihenfolge-Umkehr (order: 1) unveraendert greift. */
.hero-kontaktzeile { display: contents; }

@media (min-width: 901px) {
  /* Adresse und Knopf in EINER Zeile. Untereinander las sich der Knopf wie
     eine Wiederholung des Kopfzeilen-Knopfes, der im selben Blickfeld steht. */
  .hero-kontaktzeile {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .hero-kontaktzeile .hero-praxis,
  .hero-kontaktzeile .button-reihe--hero { margin-top: 0; }
  /* Die Adresse darf schrumpfen, der Knopf nicht: wird die Spalte schmal,
     bricht die Adresse eine Zeile mehr um, statt den Knopf unter sich zu
     schieben. Reicht der Platz gar nicht, greift flex-wrap und beide stehen
     wieder untereinander. */
  .hero-kontaktzeile .hero-praxis { flex: 0 1 auto; min-width: 0; }
  .hero-kontaktzeile .button-reihe--hero { flex: 0 0 auto; }
}

.button-reihe--hero {
  justify-content: flex-start;
  margin-top: 34px;
}

/* Beide Knöpfe gleich breit und nebeneinander. flex-basis 0 teilt den Platz
   gleichmäßig, min-width: max-content verhindert, dass die Beschriftung
   dabei umbricht: passt die Zeile nicht mehr, rutschen sie sauber
   untereinander statt in zweizeilige Knöpfe zu zerfallen.
   Der Deckel hält sie auf breiten Spalten in vernünftiger Größe. */
.button-reihe--hero .button {
  flex: 1 1 0;
  min-width: max-content;
  max-width: 260px;
  padding-inline: 20px;
}

.foto-platzhalter--hero {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
}

@media (max-width: 900px) {
  .raster-hero { grid-template-columns: 1fr; }
  .foto-platzhalter--hero { aspect-ratio: 3 / 2; max-width: 520px; }
  .button-reihe--hero { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Sektionskopf: Kicker + Überschrift
   -------------------------------------------------------------------------- */
.kicker {
  margin: 0 0 12px;
  font-family: var(--schrift-text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--laufweite-kicker);
  color: var(--farbe-akzent-tief);
}
.sektion-titel {
  margin: 0;
  font-size: var(--groesse-h2);
  text-wrap: balance;
}
.unter-titel {
  margin: 0;
  font-size: var(--groesse-h3);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  min-height: var(--trefferflaeche);
  height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}
.button--l { height: 54px; padding: 0 34px; font-size: 1.0625rem; }

.button--primaer { background: var(--farbe-akzent-tief); color: var(--text-auf-akzent); }
.button--primaer:hover { background: #4F5C50; color: var(--text-auf-akzent); }

.button--sekundaer {
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent-tief);
  border-color: var(--farbe-akzent);
}
.button--sekundaer:hover { background: var(--farbe-akzent-hell); }

.button-reihe {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   Zitate
   -------------------------------------------------------------------------- */
.zitat {
  margin: 0;
  text-align: center;
  max-width: 760px;
}
.zitat--flaeche {
  padding: 48px 56px;
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
}
.zitat blockquote {
  margin: 0;
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--groesse-zitat);
  line-height: 1.45;
  color: var(--farbe-text);
  text-wrap: balance;
}
.zitat figcaption {
  margin-top: 18px;
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
  letter-spacing: 0.02em;
}
.zitat-block { display: flex; justify-content: center; }

/* Satir-Zitat nach dem Hero, ohne Kasten (Wunsch Denise). Gleicher
   Hintergrund wie Hero darueber und "Mein Angebot" darunter: sonst steht
   das Band als hellerer Streifen zwischen zwei warmen Flaechen und die
   Seite wirkt gestreift. So laeuft der Hero ruhig ins Zitat aus, der erste
   Farbwechsel kommt erst bei "Ablauf und Kosten". Oben knapper als unten,
   damit das Zitat optisch am Hero haengt. */
.zitat-band {
  background: var(--farbe-flaeche-warm);
  /* Unten KEIN eigenes Polster: die folgende Sektion bringt ihr volles
     Polster (--abstand-sektion) mit. Beides zusammen ergab gemessen 216px
     Leere unter dem Zitat, waehrend Sektionen sonst mit einem Polster
     aneinandergrenzen. Oben nur ein knapper Abstand zum Hero. */
  padding-block: clamp(32px, 5vw, 56px) 0;
}

@media (max-width: 600px) {
  .zitat--flaeche { padding: 32px 24px; }
}

/* --------------------------------------------------------------------------
   Begriffs-Cloud — NICHT klickbar, deshalb bewusst ohne Hover-Zustand
   -------------------------------------------------------------------------- */
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}
.chip {
  display: inline-block;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  line-height: 1.4;
  border-radius: var(--radius-pill);
  list-style: none;
}
.chip--m { padding: 8px 18px; font-size: 1rem; }
.chip--l { padding: 11px 22px; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Karten und Flächen
   -------------------------------------------------------------------------- */
.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  padding: 32px;
  box-shadow: var(--schatten-weich);
}
.karte--l { padding: 48px; }
.karte h4 {
  margin: 0 0 12px;
  font-size: var(--groesse-h3);
}
/* Karten-Absaetze brauchen einen eigenen Deckel: die Karten tragen im HTML
   kein .prosa, die Lesebreite von dort greift also nicht. Einspaltig (jedes
   Fenster bis 980px) lief der Text sonst ueber die volle Spaltenbreite, bei
   900px waren das gemessene 91 Zeichen pro Zeile. */
.karte p {
  max-width: var(--lesebreite); margin: 0 0 1em; line-height: var(--zeilenhoehe-text); }
.karte p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .karte--l { padding: 28px 22px; }
}

/* Bildrahmen — trägt das Foto, beschneidet es auf das Seitenverhältnis */
.bild-rahmen {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--farbe-akzent-hell);
}
.bild-rahmen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bild-rahmen--hero { aspect-ratio: 4 / 5; }

/* Hochformat, nicht quadratisch: das Quadrat war durch die Breite der
   Quelle gedeckelt und endete an den Schultern. */
.bild-rahmen--klein { aspect-ratio: 4 / 5; }

/* Hero-Foto ab Desktop: randlos bis an die rechte Fensterkante und über die
   volle Höhe des Bands, links weich auslaufend.

   Die Polsterung des Bands wandert dafür auf die Textspalte. Damit ist die
   Zeilenhöhe des Rasters das Maximum aus Texthöhe und Bildhöhe, und das
   Foto steht mit align-self: stretch immer exakt auf beiden Bandkanten.
   Ein negativer margin-block täte das nur, solange das Bild höher ist als
   der Text: zwischen etwa 900 und 1150 px ist es das nicht.

   Der Ausbruch nach rechts ist der halbe Überhang des Fensters über den
   Inhaltsstreifen plus dessen Innenabstand; max(0px, …) fängt schmale
   Fenster ab, in denen der Streifen schon die volle Breite hat. Die paar
   Pixel, die 100vw über die Scrollleiste hinausschießt, schluckt
   overflow-x: clip.

   Der Verlauf greift bewusst nur über die linken 18 Prozent. Weiter wäre
   er dort, wo die zweite Person sitzt, und würde sie wegblenden.

   Er läuft über eine Maske, nicht über einen aufgelegten Farbkeil:
   so verblasst das Foto in die tatsächliche Hintergrundfarbe, ohne dass die
   Farbe an zwei Stellen gepflegt werden müsste. Browser ohne Maske zeigen
   das Foto mit harter Kante, verlieren also nichts an Information. */
@media (min-width: 901px) {
  .hero {
    overflow-x: clip;
    padding-block: 0;
    /* Ausbruch nach rechts: halber Fensterüberhang über den Inhaltsstreifen
       plus dessen Innenabstand. max(0px, …) für schmale Fenster. */
    --hero-ausbruch: calc(max(0px, (100vw - var(--inhalt-breite)) / 2) + 24px);
    /* KEINE min-height: die Bandhöhe kommt allein vom Text. */
  }

  /* Der Hero bekommt eine etwas breitere Buehne als die Textsektionen:
     volle Textspalte (600) + Luecke (88) + Foto (504) brauchen 1192px, die
     1080 der uebrigen Sektionen wuerden die Textspalte zusammendruecken und
     die Ueberschrift eng umbrechen lassen. Nur hier, alles andere bleibt
     bei --inhalt-breite. */
  .hero .inhalt { max-width: 1240px; }

  .raster-hero {
    display: flex;
    align-items: stretch;
    /* Text und Foto als ZUSAMMENHAENGENDE Gruppe mit festem Abstand, mittig
       im Fenster. Vorher zog space-between plus Randueberhang das Foto an
       die Fensterkante; auf breiten Monitoren riss das eine riesige Luecke
       zwischen Text und Foto (Rueckmeldung Dominik). Jetzt bleibt der
       Abstand konstant, egal wie breit der Monitor ist; links und rechts
       der Gruppe steht ruhiges Beige. */
    justify-content: center;
    gap: clamp(40px, 4vw, 88px);
  }

  /* Textinhalt vertikal zentrieren. Meist ist das Band genau so hoch wie die
     Textspalte (das Foto folgt ihr, siehe unten), dann ist die Zentrierung
     neutral. Nur wenn das Foto die Mindesthoehe erzwingt (sehr kurzer Text),
     ist das Band etwas hoeher als der Text; dann verteilt die Zentrierung die
     wenigen Extra-Pixel symmetrisch statt sie unten zu lassen. */
  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Samstags-Stempel im oberen Wandbereich des Fotos (Foto sitzt rechts).
     right in Bildkanten-Nähe, aber außerhalb der 16%-Verlaufszone links;
     top im hellen Bereich über Denises Kopf. */
  .stempel--hero { top: 30px; left: 28px; bottom: auto; right: auto; font-size: 0.875rem; }

  /* Feste Textbreite, bewusst nicht flex-wachsend: der Rest der Zeile gehoert
     dem Foto. Die Spaltenhoehe (Inhalt + Polster) gibt die Bandhoehe vor, an
     der sich das Foto ausrichtet. */
  .hero-text {
    flex: 0 1 auto;
    width: clamp(440px, 42vw, 600px);
    padding-block: var(--hero-polster);
  }

  /* Die Bandhoehe folgt der HOEHE DER TEXTSPALTE daneben, nicht einer festen
     Zahl und nicht dem Fenster. Der Textblock bringt seine Hoehe aus Inhalt
     plus --hero-polster mit; das Foto steht per align-self: stretch genau so
     hoch daneben. Dadurch ist der Abstand ueber und unter dem Text IMMER nur
     das Polster, nie eine grosse Leere, egal ob die Ueberschrift zwei oder
     vier Zeilen bricht und egal auf welcher Aufloesung.

     Der Trick, der das ohne JavaScript moeglich macht: das <picture> liegt
     absolut im Rahmen (weiter unten). Ein normales <img> braechte seine
     Eigenhoehe ein und triebe das Band auf die volle Bildhoehe; absolut
     liegend traegt es nichts zur Rahmenhoehe bei, der Rahmen folgt also
     sauber der Textspalte. min-height haelt das Foto lang genug fuer einen
     guten Ausschnitt, wenn der Text sehr kurz ist; max-width haelt es auf
     breiten Monitoren portraitnah statt querformatig. */
  .bild-rahmen--hero {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    align-self: stretch;
    /* 600px Mindesthoehe: exakt die Fotogroesse der bewaehrten Version
       (504x600). Ist die Textspalte hoeher, waechst das Foto mit. */
    min-height: 600px;
    /* Breite aus der Hoehe im Verhaeltnis 0,84: Das Foto bleibt damit nah am
       4:5 der Aufnahme, object-fit: cover schneidet also kaum vertikal und
       Denises Kopf ist auf jeder Bandhoehe sicher. Ein breiteres Foto wuerde
       das Bild staerker hochskalieren und oben den Kopf abschneiden. Der
       Preis ist etwas Beige rechts auf sehr breiten Monitoren, wie in der
       urspruenglichen Fassung. */
    aspect-ratio: 84 / 100;
    border-radius: 0;
    background: none;
    overflow: hidden;
  }
  /* Weicher Auslauf an der linken Kante ins Beige neben dem Text. Die Maske
     liegt auf dem picture, NICHT auf dem Rahmen: so kann der Stempel als
     absolutes Kind des Rahmens unmaskiert und voll deckend darauf liegen. */
  .bild-rahmen--hero picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%);
            mask-image: linear-gradient(to right, transparent 0%, #000 8%);
  }
  .bild-rahmen--hero img { object-position: 50% 38%; }
}


@media (max-width: 900px) {
  .bild-rahmen--hero { max-width: 420px; margin-inline: auto; }
}

/* Foto-Platzhalter (leere Fläche, falls kein Bild vorliegt) */
.foto-platzhalter {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  padding: 16px;
}
.foto-platzhalter span {
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
  color: var(--farbe-akzent-tief);
  letter-spacing: 0.02em;
}
.foto-platzhalter--gross { max-width: 560px; aspect-ratio: 3 / 2; }
.foto-platzhalter--klein { aspect-ratio: 1 / 1; }
.foto-platzhalter--klein span { font-size: 0.8125rem; }

/* Karten-Platzhalter (nie ein iframe — DSGVO) */
.karte-platzhalter {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 300px;
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  padding: 40px 24px 56px;
  text-align: center;
}
.karte-platzhalter address {
  font-style: normal;
  font-family: var(--schrift-text);
  color: var(--farbe-text);
  line-height: 1.5;
  margin-top: 6px;
}
.karte-platzhalter address strong { font-weight: 600; }
.karte-platzhalter .route {
  margin-top: 14px;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--farbe-akzent-tief);
}
.karte-platzhalter .attribution {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--schrift-text);
  font-size: 0.75rem;
  color: var(--farbe-text-leise);
}

/* Krisen-Hinweis */
.krisen-hinweis {
  background: var(--farbe-flaeche);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 24px 28px;
  box-shadow: var(--schatten-weich);
  max-width: 640px;
}
.krisen-hinweis .titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1rem;
}
.krisen-hinweis p:last-child { margin: 0; font-size: 1rem; }
.krisen-hinweis a { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Raster
   -------------------------------------------------------------------------- */
.raster-therapie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.raster-listen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.raster-kontakt { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.raster-uebermich { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; }

@media (max-width: 980px) {
  .raster-therapie,
  .raster-listen,
  .raster-kontakt,
  .raster-uebermich { grid-template-columns: 1fr; }

  /* Einspaltig wird die Karte so breit wie der Inhaltsstreifen. Der Text
     darin ist auf Lesebreite gedeckelt, die Karte selbst wird deshalb
     mitgedeckelt und mittig gestellt, sonst klebt schmaler Text links in
     einem sehr breiten Kasten. 64px = Innenabstand der Karte beidseitig. */
  .raster-therapie .karte {
    max-width: calc(var(--lesebreite) + 64px);
    margin-inline: auto;
  }
}

/* Aufzählungen mit feinem Salbei-Ring (vorher ein Strich, den Denise als zu
   hart empfand). Ein Ring statt einer vollen Scheibe: leiser, und er
   wiederholt die runden Formen von Knopf und Wortmarke. */
ul.punkte {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ul.punkte li {
  position: relative;
  padding-left: 22px;
  max-width: var(--lesebreite);
}
ul.punkte li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--farbe-akzent);
  border-radius: 50%;
}

/* Sichtbare Kennzeichnung offener Inhalte */
.platzhalter {
  background: var(--farbe-akzent-hell);
  color: var(--farbe-text);
  border-radius: 4px;
  padding: 1px 7px;
}

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */
.formular { display: flex; flex-direction: column; gap: 20px; }
/* Ohne diese Regel bliebe das Formular bei Erfolg sichtbar: das flex von
   oben ueberschreibt das native [hidden]-Attribut, das JS versteckt es dann
   nur scheinbar, und der "Wird gesendet"-Knopf haengt neben dem Dank. */
.formular[hidden] { display: none; }
/* Absende-Knopf zentriert, mit etwas Luft nach oben. */
.formular-aktion { display: flex; justify-content: center; margin-top: 8px; }
.formular-titel { margin: 0; font-size: var(--groesse-h3); }
.formular .hinweis-oben {
  margin: 0;
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
}

/* Sammelmeldung über dem Formular, wird per role="alert" angesagt */
.formular-meldung {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--farbe-fehler);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: #FBF3F1;
  color: var(--farbe-fehler);
  font-size: var(--groesse-klein);
  font-weight: 600;
}
.formular-meldung[hidden] { display: none; }

.feld { display: flex; flex-direction: column; gap: 8px; }
.feld label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--farbe-text);
}
.feld label .optional { font-weight: 400; color: var(--farbe-text-leise); }
.feld input,
.feld textarea {
  padding: 0 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  color: var(--farbe-text);
  width: 100%;
}
.feld input { height: 48px; }
.feld textarea { padding: 12px 14px; line-height: var(--zeilenhoehe-text); resize: vertical; }
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border: 1.5px solid var(--farbe-fehler); }

.fehler-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--farbe-fehler);
}
.fehler-text[hidden] { display: none; }

.checkbox-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.55;
  cursor: pointer;
  min-height: var(--trefferflaeche);
}
.checkbox-zeile input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--farbe-akzent-tief);
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox-fehler { margin: 6px 0 0 32px; }

/* Honigtopf gegen Bots: aus dem Blickfeld und aus der Tastaturreihenfolge,
   aber nicht display:none, weil manche Bots genau darauf prüfen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-danke { text-align: center; }
.formular-danke .formular-titel { margin: 0 0 10px; }
.formular-danke p { margin: 0; color: var(--farbe-text-leise); }
.formular-danke:focus-visible { outline: var(--fokus-ring); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.fusszeile {
  padding: 48px 0 40px;
  border-top: 1px solid var(--farbe-linie);
}
.fusszeile .inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--farbe-text-leise);
  line-height: 1.7;
}
.fusszeile strong { color: var(--farbe-text); }
.fusszeile nav { display: flex; gap: 24px; }
.fusszeile nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Bewegung — dezent, und vollständig abschaltbar
   -------------------------------------------------------------------------- */
.einblende {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--kurve), transform .4s var(--kurve);
}
.einblende.sichtbar { opacity: 1; transform: none; }

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

/* Ohne JavaScript bleibt der Inhalt sichtbar */
.kein-js .einblende { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Rechtstext-Seiten (Impressum, Datenschutz) — bewusst zurückgenommen
   -------------------------------------------------------------------------- */
.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: var(--groesse-h3); margin: 48px 0 14px; }
.rechtstext h3 { font-size: 1.125rem; margin: 32px 0 10px; }
.rechtstext p, .rechtstext li { font-size: var(--groesse-klein); max-width: var(--lesebreite); }
.rechtstext p { margin: 0 0 1em; }
/* Stand-Zeile am Ende von Impressum und Datenschutz: klein und leise */
.rechtstext .stand { margin-top: 40px; font-size: var(--groesse-mini); color: var(--farbe-text-leise); }
.rechtstext ul { padding-left: 20px; }
.rechtstext li { margin-bottom: .5em; }
.rechtstext address {
  font-style: normal;
  margin: 0 0 1em;
  font-size: var(--groesse-klein);
  line-height: 1.7;
}
.rechtstext .zurueck { display: inline-flex; align-items: center; min-height: 44px; }
.entwurfs-hinweis {
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  padding: 20px 24px;
  margin: 0 0 40px;
  font-size: var(--groesse-klein);
}
.entwurfs-hinweis p { margin: 0; }


/* ==========================================================================
   ERGÄNZUNGEN

   Zwei Grundregeln dieser Datei:
   1. Es gibt KEINE Inline-Styles im HTML. Die Content-Security-Policy erlaubt
      nur style-src 'self', Inline-Attribute würden verworfen. Die Klassen hier
      ersetzen die früheren style-Attribute.
   2. Farben für SVG kommen über CSS (color + stroke="currentColor"), niemals
      als stroke="var(--…)" im Attribut. Dort ist var() ungültig und der Strich
      fällt auf "none" zurück, das Icon verschwindet unsichtbar.

   Der dekorative Aufbau von zuvor (Wellen zwischen den Sektionen, Salbeizweige,
   Papierkorn-Textur, Rundbogen-Fotos, Foto-Tönung, Initiale, große Zitat-
   Anführungszeichen, organische Chip-Ecken) wurde auf Wunsch wieder entfernt:
   zu verspielt und zu unruhig für diese Praxis. Wer ihn ansehen will, findet
   den Stand im Git-Tag "pre-rueckbau".
   ========================================================================== */

/* Auswahlfarbe: Textfarbe mitgeben, sonst erbt sie in manchen Browsern einen
   Systemwert und wird auf Salbei-hell unlesbar. */
::selection { background: var(--farbe-akzent-hell); color: var(--farbe-text); }

/* --------------------------------------------------------------------------
   Akzentschrift für den Hero.
   Cormorant Garamond Italic: kalligrafisch und geschwungen, aber ein echter
   Werksatz-Schnitt und keine Handschrift. Self-hosted wie alle Schriften, auf
   151 Zeichen verkleinert (13 KB statt 293 KB). SIL Open Font License.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   SVG-Farben (Ersatz für das ungültige stroke="var(…)")
   -------------------------------------------------------------------------- */
.icon-akzent { color: var(--farbe-akzent); }
.icon-akzent-tief { color: var(--farbe-akzent-tief); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-text h1 {
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

/* Die hervorgehobenen Worte: eigene Schrift, eigene Farbe, etwas größer.
   Salbei-TIEF und nicht Salbei, weil der hellere Ton auf der warmen Fläche
   nur 3,56:1 hält und damit durchfiele. */
.titel-akzent {
  font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.16em;   /* gleicht die kleinere x-Höhe von Cormorant aus */
  color: var(--farbe-akzent-tief);
}

/* Hero auf dem Telefon: Foto zuerst.

   Vorher stand es unter Titel, Adresse und beiden Knöpfen und begann erst bei
   542 px. Auf einem Telefon bleiben nach den Browserleisten rund 700 px
   nutzbar; sichtbar waren davon 158 px, und das war Wand und Stirn. Das Band
   war mit 1036 px höher als der Bildschirm.

   Dieser Block steht bewusst HIER und nicht bei den übrigen Hero-Regeln weiter
   oben: eine Media Query erhöht die Spezifität nicht, und sowohl
   .bild-rahmen--hero { aspect-ratio } als auch .hero-text h1 { font-size }
   werden weiter unten in der Datei noch einmal gesetzt. Ein Block oberhalb
   davon würde stillschweigend überschrieben. */
@media (max-width: 900px) {
  /* Oben knapper, weil direkt darunter das Foto steht. 16 statt 24 px
     holt den primären Knopf auf 320 px breiten Geräten wieder über die
     Falz, nachdem das Foto für die zweite Person höher geworden ist.
     Gemessen liegt seine Unterkante bei 8 px Polsterung auf 320, 390 und
     430 px Breite bei 694 bis 697 von 700 px. */
  .hero { padding-block: 8px 40px; }

  /* Nur die Anzeigereihenfolge. Der Quelltext bleibt unangetastet,
     Screenreader und Tastatur laufen weiter Text vor Bild.
     Randlos von Fensterkante zu Fensterkante: margin-inline hebt die
     24 px Innenabstand des Inhaltsstreifens auf. Das bringt auf einem
     390er Gerät 48 px mehr Bildbreite, also rund 14 Prozent mehr Größe
     für alles im Bild, auch für die zweite Person.

     1:1 statt 4:5, weil in der Quelle Denises Gesicht oben und die zweite
     Person unten sitzt. Ein flaches Format kann nicht beides fassen; das
     Quadrat reicht bis 1755 der Quelle hinunter und damit über Kopf und
     Schulter der zweiten Person.

     KEIN Verlauf mobil, anders als am Desktop. Er lag genau über der
     zweiten Person und hat sie weggeblendet, also das Gegenteil dessen
     bewirkt, wozu er da ist. Randlos braucht er auch keine Kante
     aufzuweichen: das Bild endet an der Fensterkante. */
  .bild-rahmen--hero {
    order: -1;
    aspect-ratio: 1 / 1;
    max-width: none;
    margin-inline: -24px;
    border-radius: 0;
  }
  /* Mobil kein Verlauf (Foto randlos, kein Beschnitt nötig). */
  .bild-rahmen--hero picture {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* 28 statt 36 px spart zwei Zeilen, ohne am Text zu kürzen. */
  .hero-text h1 { font-size: 1.75rem; }

  /* Die Adresszeile rutscht unter die Knöpfe, damit der Buchen-Knopf über
     der Falz bleibt, nachdem das randlose Quadrat 105 px mehr Höhe
     braucht. Gestrichen wird sie nicht, sie ist ein Vertrauens- und
     Ortssignal. Nur die Anzeigereihenfolge ändert sich, der Quelltext
     bleibt Titel, Adresse, Knöpfe; die Adresse enthält nichts
     Anklickbares, die Tabreihenfolge bleibt also unberührt. */
  .hero-text { display: flex; flex-direction: column; }
  .hero-praxis { order: 1; margin-top: 28px; }
  .button-reihe--hero { margin-top: 20px; }

  /* Volle Breite: größere Trefferfläche für den Daumen, und die Rangfolge
     der beiden Knöpfe wird deutlicher. Der Deckel von 260 px stammt vom
     Desktop. */
  .button-reihe--hero .button { flex: 1 1 100%; max-width: none; }
}

/* Ab Tablet-Breite ist randlos falsch: das Quadrat wächst mit der Fläche
   mit und wäre auf 768 px ein 768er Block, der den ganzen Schirm füllt.
   Dort also wieder ein begrenztes, mittiges Bild mit Ecken. */
@media (min-width: 561px) and (max-width: 900px) {
  .bild-rahmen--hero {
    max-width: 480px;
    margin-inline: auto;
    border-radius: var(--radius-m);
  }
}

/* --------------------------------------------------------------------------
   Sektionsköpfe und Abstände (ersetzen die früheren Inline-Styles)
   -------------------------------------------------------------------------- */
.sektion-kopf { margin-bottom: 40px; }

/* Feine Linie vor dem Kicker */
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--farbe-akzent);
}

.unter-titel--kapitel { margin: 48px 0 16px; }
.unter-titel--liste { margin: 0 0 18px; }

.prosa--folge { margin-top: 1.25em; }
.prosa--vor-raster { margin-bottom: 36px; }

.cloud-titel { margin: 80px 0 40px; text-align: center; }
.cloud-titel--nach { margin: 96px 0 24px; text-align: left; }
.cloud-wrap { display: flex; justify-content: center; }

/* Die Begriffs-Cloud braucht Luft, sonst klebt sie zusammen und wirkt wie ein
   Block statt wie eine lockere Aufzählung. Mehr Abstand zwischen den Chips,
   etwas mehr Innenraum je Chip und eine breitere Zeile, damit die Umbrüche
   gleichmäßiger fallen. */
.cloud {
  gap: 14px 12px;
  max-width: 820px;
}
.chip--m { padding: 10px 20px; }
.chip--l { padding: 12px 24px; }

.zitat-block--nachlauf { margin-top: 88px; }

.adresse {
  font-style: normal;
  margin: 28px 0;
  line-height: 1.6;
}
.adresse strong {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: 1.1875rem;
}

.zeiten-titel { margin: 0 0 12px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Praxis und Kontakt: vier gestapelte Blöcke statt zwei Spalten.

   Vorher standen Anfahrt, Buchungskalender, Krisen-Hinweis und Formular
   nebeneinander und haben sich gegenseitig die Aufmerksamkeit genommen.
   Jetzt hat jede Aufgabe ihren eigenen Block, ihre eigene Breite und Luft
   dazwischen: Praxis, Buchung, Nachricht, Notfall.
   -------------------------------------------------------------------------- */
.kontakt-block { margin-top: clamp(56px, 7vw, 88px); }
/* Der erste Block schliesst direkt an den Sektionskopf an.
   :first-of-type ginge hier fehl, weil der Sektionskopf ebenfalls ein div ist
   und damit schon "das erste div" belegt. */
.sektion-kopf + .kontakt-block { margin-top: 0; }

/* Buchung und Notfall stehen mittig und schmäler, damit sie ruhig wirken. */
.kontakt-block--mittig { max-width: 760px; margin-inline: auto; }
/* Linksbuendig statt mittig (Wunsch Denise): mittig sass der Block als
   einzige Spalte eingerueckt, waehrend alles darueber links ausgerichtet
   ist. Jetzt fluchtet er mit dem uebrigen Inhalt. */
.kontakt-block--schmal { max-width: 680px; margin-inline: 0; }

.block-titel { margin: 0 0 20px; text-align: center; }
.prosa--mittig p { margin-inline: auto; }

/* Kontaktwege als Liste statt Fliesstext: knapper und ueberschaubarer
   (Wunsch Denise). Bewusst linksbuendig, auch im sonst mittigen Block. */
.kontakt-wege-titel {
  margin: 0 0 14px;
  font-size: var(--groesse-h3);
}
.kontakt-wege { text-align: left; }
.kontakt-wege li { max-width: none; }
/* Etwas Luft zur Formular-Karte darunter, die sonst direkt an der Liste
   klebt (gemessen 0px). Bewusst knapp: die Karte gehoert sichtbar zu den
   Kontaktwegen darueber. */
#nachricht-einleitung { margin-bottom: 28px; }

/* Der Formular-Block ist das Sprungziel der "Termin vereinbaren"-Knoepfe. */
#termin { scroll-margin-top: 120px; }

/* Praxis: Text links, Karte rechts. Die Karte trägt sich selbst und braucht
   keine feste Höhe mehr, sie füllt die Spalte. */
.raster-praxis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .raster-praxis { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  #buchung { scroll-margin-top: 140px; }
}

.raster-listen { margin-top: 64px; }

/* Ausdrücklich an eine Mindestbreite gebunden. Ohne die Media Query würde
   diese Regel die weiter oben stehende Umbruch-Regel bei 980px aushebeln
   (gleiche Spezifität, spätere Stelle gewinnt) und das Raster bliebe auf
   schmalen Geräten zweispaltig. */
@media (min-width: 981px) {
  /* 280 statt 220: zusammen mit dem Hochformat ist Denise damit deutlich
     größer zu sehen, ohne dass die Spalte dem Text die Breite nimmt. */
  .raster-uebermich { grid-template-columns: 280px 1fr; }

  /* Der Text bricht früher um, damit die Spalte etwa so hoch wird wie das
     Foto daneben. Der Zeilenfall war mit 76 Zeichen ohnehin zu lang: 55 bis
     65 gelten als bequem lesbar, darüber verliert das Auge beim Rücksprung
     die Zeile. Die Höhe hängt am Text, bei einer Änderung des Absatzes muss
     dieser Wert nachgezogen werden. */
  .raster-uebermich .prosa { max-width: 56ch; }
}

@media (max-width: 980px) {
  .raster-uebermich .bild-rahmen--klein { max-width: 280px; }
}

/* --------------------------------------------------------------------------
   Einbettungen, die erst auf Klick laden (Karte, Buchungskalender)

   Die Vorschau sieht aus wie ein Platzhalter, trägt aber einen Knopf. Erst
   dieser Klick stellt die Verbindung zu Google beziehungsweise TIMIFY her.
   Ohne das würde beim Seitenaufruf die IP-Adresse jeder Besucherin ungefragt
   übertragen, die Seite bräuchte ein Cookie-Banner und die Zusage der
   Datenschutzerklärung wäre gebrochen.
   -------------------------------------------------------------------------- */
.einbettung {
  position: relative;
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.einbettung-vorschau {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 320px;
  padding: 36px 24px;
  text-align: center;
}
.einbettung-vorschau address {
  font-style: normal;
  font-family: var(--schrift-text);
  color: var(--farbe-text);
  line-height: 1.5;
}
.einbettung-vorschau address strong { font-weight: 600; }
.einbettung-titel {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: var(--groesse-h3);
}
.einbettung-knopf { margin-top: 6px; }
.einbettung-hinweis {
  margin: 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--farbe-text-leise);
}
.einbettung-hinweis--wichtig {
  color: var(--farbe-text);
  font-weight: 600;
}
.einbettung-vorschau .route {
  margin-top: 4px;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--farbe-akzent-tief);
}
.einbettung-rahmen {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}
.einbettung--geladen { background: var(--farbe-flaeche); }

/* Buchungskasten. Bewusst KEINE Einbettung: Eine Terminbuchung bei einer
   Psychotherapeutin ist ein Gesundheitsdatum, deshalb fuehrt ein sichtbarer
   Link auf die Seite des Anbieters statt eines iframes im eigenen Rahmen.
   Siehe docs/dsgvo-karte-und-buchung.md. */
.buchung-kasten {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 36px 28px;
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  text-align: center;
}
.buchung-kasten .einbettung-hinweis { max-width: 44ch; }
.buchung-inaktiv {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: var(--groesse-h3);
  color: var(--farbe-text);
}

/* --------------------------------------------------------------------------
   Icons der Therapie-Karten: ein Mensch im Umfeld, zwei Verbundene, ein
   Dreieck aus Verbindungen. Bewusst abstrakt, damit niemand bewertet wird.
   -------------------------------------------------------------------------- */
.karte-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 0 14px;
  /* fill und stroke MÜSSEN hier stehen: ohne sie faellt SVG auf die
     Voreinstellung zurueck und zeichnet schwarze Flaechen statt Linien. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--farbe-akzent);
}

/* --------------------------------------------------------------------------
   Status-Seiten (danke, fehler) — ersetzen die früheren Inline-Styles
   -------------------------------------------------------------------------- */
.status-haupt {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.inhalt--schmal { max-width: 640px; }

/* Zentrierte Lesespalte fuer Sektionen, die nur aus Text bestehen.
   Die Absaetze behalten ihre Lesebreite (68ch); statt links im breiten
   Container anzuschlagen und rechts ~200px Leere zu lassen, steht die
   ganze Spalte mittig im Fenster. +48px = beidseitiger Innenabstand. */
.inhalt--lese { max-width: calc(var(--lesebreite) + 48px); }
.karte--zentriert { text-align: center; }
.status-icon { margin: 0 auto 18px; color: var(--farbe-akzent); }
.status-titel { margin: 0 0 14px; font-size: var(--groesse-h2); }
.status-absatz { margin: 0 0 8px; }
.status-hinweis {
  margin: 0 0 32px;
  color: var(--farbe-text-leise);
  font-size: var(--groesse-klein);
}
.status-schluss { margin: 0 0 28px; }
.krisen-hinweis--nachgestellt { margin: 32px auto 0; }

/* --------------------------------------------------------------------------
   Rechtstext-Seiten
   -------------------------------------------------------------------------- */
.rechtstext .sektion-titel { margin: 0 0 32px; }
.zurueck-zeile { margin-top: 48px; }

/* --------------------------------------------------------------------------
   Rückmeldung Denise, Runde 1 (nur Desktop; Mobil folgt gesondert)

   Dieser Block steht bewusst am Dateiende. Mehrere der hier gesetzten
   Eigenschaften werden weiter oben schon einmal vergeben, und eine Media
   Query erhöht die Spezifität nicht: eine frühere Stelle bliebe wirkungslos.
   -------------------------------------------------------------------------- */

/* Zitat im Hero. BEWUSST NICHT Cormorant: der Titel-Akzent darunter ist
   Cormorant kursiv in Salbei-tief. Dieselbe Stimme für zwei verschiedene
   Dinge nimmt dem Akzent im Titel seine Auszeichnungswirkung. Das Zitat
   spricht deshalb in Lora kursiv und Textfarbe, die Salbei-Kante links
   markiert es als Zitat. Quelle leise dahinter, nicht darunter, sonst
   kostet sie eine dritte Zeile über der Falz. */

/* Stempel-Baustein: echter Text in Gummistempel-Optik. Kräftiger einfacher
   Rahmen, leichte Rundung, Sperrschrift, satte Rostrot-Farbe, leicht gedreht.
   Kein gestrichelter Rand, keine Kreise (das wirkte wie ein Rabatt-Sticker).
   Einmal definiert, für Samstags-Hinweis und Preis verwendet. */
.stempel {
  display: inline-block;
  padding: 8px 16px;
  border: 2.5px solid var(--farbe-stempel);
  border-radius: 8px;
  color: var(--farbe-stempel);
  background: transparent;
  font-family: var(--schrift-text);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
  transform: rotate(-6deg);
}

/* Samstags-Stempel: liegt absolut auf dem Foto. Standardkoordinaten für den
   Mobil-/Basisfall (Foto oben, randlos); Desktop und Flach setzen eigene
   Werte. Der Bezug ist die relativ gesetzte .raster-hero. */
.stempel--hero {
  position: absolute;
  z-index: 2;
  white-space: nowrap;   /* je Zeile nicht umbrechen; der Umbruch kommt vom <br> */
  text-align: center;
  font-size: 0.8125rem;
  /* Dezenter heller Grund, damit der Stempel auf jedem Bildbereich lesbar
     ist und sich abhebt, ohne dass die Position vom Bildinhalt abhängt.
     Nicht voll deckend, so schimmert das Foto durch und es wirkt wie
     aufgestempelt statt wie ein Kasten. Nie über Denises Gesicht. */
  background: rgba(247, 244, 239, 0.82);
}

@media (min-width: 901px) {

  /* Zitat und Pille machen den Hero-Text rund 100px höher und schöben den
     Buchen-Knopf von 757 auf 823, auf einem Laptop mit etwa 800px sichtbarer
     Höhe also unter die Falz. Die Abstände werden deshalb gestrafft,
     gestrichen wird nichts. */
  .hero-praxis { margin-top: 16px; }
  .button-reihe--hero { margin-top: 26px; }

  /* Sprungziele: vorher 120px starre Marke PLUS bis zu 120px Sektionspolster
     ergaben nach einem Menüklick 240px Leere über der Rubrik, davon 165px
     unterhalb der Kopfzeile. Die Rechnung zieht das jeweils gültige Polster
     wieder ab, sodass die Rubrik gemessen immer bei 124px landet, also 49px
     unter der 75px hohen Kopfzeile, und zwar unabhängig davon, wie groß das
     Polster bei der aktuellen Fensterbreite gerade ist.
     Der Wert bleibt dabei stets positiv, es wird also nie Inhalt verdeckt. */
  section[id] { scroll-margin-top: calc(124px - var(--abstand-sektion)); }

  /* Unterüberschriften haben kein eigenes Polster, sie brauchen die volle
     Kopfhöhe plus etwas Luft. */
  #kosten,
  #frequenz,
  #absage-schweigepflicht,
  #praxiszeiten { scroll-margin-top: 108px; }
}

@media (max-width: 900px) {
  /* Falz-Bilanz: das Zitat oben kostet Hoehe. Statt das grosse 1:1-Foto zu
     beschneiden (Kopf oben, zweite Person unten, vertraegt keinen Schnitt)
     werden die Zwischenraeume gestrafft. Der Rasterabstand Foto zu Text
     ist der groesste Brocken. */
  .raster-hero { gap: 10px; }
  .hero { padding-block: 0 36px; }
  .hero-text h1 { margin-top: 0; }
  .hero-praxis { margin-top: 6px; }
  .button-reihe--hero { margin-top: 6px; }

  /* Samstags-Stempel auf dem randlosen Foto oben, im hellen Wandbereich
     rechts der Bildmitte, klar neben Denises Kopf. */
  .stempel--hero { bottom: 16px; right: 14px; font-size: 0.75rem; padding: 6px 12px; }
}

/* Honorar-Box. Ruhige, vollflaechige Hervorhebung im Textfluss, unter dem
   Kostentext. Bewusst OHNE Akzentkante/Strich (Wunsch): eine geschlossene
   Box mit heller Salbei-Flaeche und weichen Ecken hebt den Preis dezent
   hervor, ohne nach Sticker auszusehen. Reine Grafik, im HTML aria-hidden. */
/* Preis-Stempel. Gleicher Baustein, aber der Betrag steht in der
   Serifenschrift und nicht in Versalien. Im Fluss zwischen den Absätzen
   zentriert; ab Desktopbreite rückt er über eine eigene Regel rechts neben
   den Kostentext. */
.stempel--preis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 40px auto;
  padding: 14px 26px;
  text-transform: none;
  letter-spacing: 0;
  transform: rotate(-4deg);
}
.stempel--preis-betrag {
  font-family: var(--schrift-display);
  font-size: 1.75rem;
  line-height: 1.1;
}
.stempel--preis-detail {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Flache Fenster (Laptops mit hoher Skalierung): NUR das Textspalten-Polster
   wird verschlankt (48 statt 88px). Damit bleibt das Band bei den 600px des
   Fotos statt darueber hinauszuwachsen, und der Knopf steht auf einem
   620px-Fenster wieder ueber der Falz (gemessen: 614 statt 639). Schrift,
   Fotogroesse und Aufbau bleiben identisch zur grossen Ansicht. */
@media (min-width: 901px) and (max-height: 760px) {
  .hero-text { padding-block: 48px; }
}

/* Die fruehere grosse Flach-Fenster-Sonderregel (Fensterhoehe fuellen,
   Ueberschrift verkleinern) ist ENTFERNT (27.08.2026). Sie fuellte den Hero auf Fensterhoehe und
   verkleinerte die Ueberschrift auf 2,25rem; auf skalierten Laptops wurde der
   Titel dadurch klein und zweizeilig, und um den kurzen Text blieb Leere
   (Denises Rueckmeldung). Seit die Bandhoehe der Textspalte folgt und das
   Foto fest 600px hoch ist, sieht der Hero auf flachen Fenstern von selbst
   aus wie ueberall sonst; die Sonderbehandlung haette ihn nur wieder
   verzerrt. */

/* Buchen-Knopf in der Kopfzeile: der primaere Handlungsknopf bleibt beim
   Scrollen erreichbar, statt nur im Hero und ganz unten zu existieren.

   Der Breakpoint ist gemessen, nicht geschaetzt. Marke (370), Navigation
   (642) und Knopf (150) plus zwei Abstaende brauchen 1210px; der Kopf hatte
   aber nur 1240 minus 48 Innenabstand, also 1192 zur Verfuegung. Der Knopf
   haette bei JEDER Fensterbreite 18px ueberlaufen. Deshalb hier beides:
   der Kopf laeuft ab diesem Punkt bis 1300 statt 1240, und die Menuepunkte
   ruecken enger zusammen. Gemessen bleiben damit 43px Luft bei 1280px
   Fensterbreite. */
.kopf-cta { display: none; }

/* Ab 1360 statt 1280: Der Kopf ist auf max-width 1300 gedeckelt, es stehen
   also NIE mehr als 1252px Inhalt zur Verfuegung. Mit dem laengeren Knopf
   ("Erstgespraech vereinbaren", 216px statt 150px) braucht die Zeile 1228px,
   die aber erst ab rund 1348px Fensterbreite wirklich anliegen. Darunter
   drueckte der Knopf in den Randabstand. Zwischen 1280 und 1359 zeigt der
   Kopf deshalb nur Marke und Menue; der Handlungsknopf steht dort im Hero
   direkt darunter, es geht nichts verloren. */
@media (min-width: 1360px) {
  /* 1340 statt 1300 seit 01.10.2026: "Psychotherapeutin in Fachausbildung unter
     Lehrsupervision" ist 54px breiter als die alte Bezeichnung. Bei 1300 lief der
     Knopf deshalb bei jeder Fensterbreite 30px in den Randabstand. Mit 1340
     (1292px Inhalt) gemessen bei 1360 und 1920: 29px Luft je Seite. */
  .kopf .inhalt { max-width: 1340px; }
  /* 6px statt 8px: Der Knopf heisst seit der Umbenennung "Erstgespraech
     vereinbaren" und ist damit 224 statt 150px breit. Weil der Kopf bei
     max-width 1300 gedeckelt ist, stehen IMMER nur 1252px Inhalt zur
     Verfuegung, unabhaengig von der Fensterbreite; der laengere Knopf lief
     deshalb bei jeder Breite ueber. Die zwei Pixel je Seite an vier
     Menuepunkten plus vier am Knopf bringen die noetige Luft zurueck.
     Gemessen bleiben so wieder rund 30px frei. */
  .nav-link { padding: 0 6px; }

  .kopf-cta {
    display: inline-flex;
    flex-shrink: 0;
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------- Handy: Hero entlasten

   Auf dem kleinen Schirm stand unter dem Knopf noch die Praxisadresse. Sie
   kostete dort 86px und liess dem Knopf nur 6px Luft zur Ueberschrift, der
   Startbildschirm wirkte dadurch vollgeraeumt (Rueckmeldung Denise).

   Die Adresse entfaellt hier nur in der ANZEIGE: Sie steht unveraendert im
   Quelltext und weiter unten im Abschnitt "Praxis und Kontakt" vollstaendig,
   samt Telefonnummer, dazu in den strukturierten Daten. Fuer die lokale Suche
   geht also nichts verloren, und am Desktop bleibt sie im Hero stehen.

   Die 6px-Straffung oben stammte aus der Zeit, als das Satir-Zitat noch im
   Hero stand und Hoehe kostete. Das ist laengst nicht mehr so; mit den
   gewonnenen 86px bekommt der Knopf wieder Luft nach oben und unten. */
@media (max-width: 700px) {
  .hero-praxis { display: none; }
  .button-reihe--hero { margin-top: 26px; margin-bottom: 12px; }
}