/* =========================================================================
   PhysioMobil Lüneburg
   Stylesheet nach PLAN.md v2.2
   Reihenfolge: Fonts, Tokens, Reset, Layout, Komponenten, Header/Footer,
   Sektionen, Seiten, Motion, Print
   ========================================================================= */

/* ---------- 1. Schriften (lokal, DSGVO) ---------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-var.woff2') format('woff2-variations');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Metrik-angepasste Fallbacks: verhindern Layout-Sprung beim Font-Swap (CLS) */
@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial');
  size-adjust: 107.76%;
  ascent-override: 86.30%;
  descent-override: 25.06%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 106.26%;
  ascent-override: 91.17%;
  descent-override: 22.70%;
  line-gap-override: 0%;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* Struktur und Text */
  --navy-900: #0E2A45;
  --navy-700: #14406B;
  --navy-600: #1B5185;
  --blue-600: #1B75BC;
  --blue-700: #1A6FB3;
  /* Augenbraue auf hellem Grund. #1B75BC erreicht auf der Eisflaeche nur
     4,47:1 und liegt damit unter 4,5:1, auf der neuen Hero-Flaeche sogar
     nur 3,57:1. Diese Stufe schafft ueberall mindestens 5:1
     (Weiss 7,02, Eis 6,46, Hero 5,13) und bleibt erkennbar blau. */
  --blue-800: #155C94;
  --cyan-400: #29ABE2;
  --cyan-200: #A9DFF4;
  /* Cyan als Schrift auf Navy: #29ABE2 erreicht dort nur 4,06:1 und liegt
     damit unter den geforderten 4,5:1 fuer kleine Schrift. Diese Aufhellung
     ist die kleinste, die 4,5:1 auf #14406B schafft und auch dann noch
     genuegt, wenn ein Foto hinter der Flaeche liegt (4,97:1).
     Fuer Flaechen, Linien und Symbole bleibt --cyan-400, dort genuegt 3:1. */
  --cyan-text: #42B5E5;
  --ice-50: #EDF7FC;
  --ink-800: #24384A;
  --on-navy-muted: #BCD2E4;
  --white: #FFFFFF;

  /* CTA-Akzent, zweistufig, ausschliesslich fuer Termin-Aktionen */
  --cta-600: #0F766E;
  --cta-700: #115E59;
  --cta-300: #5EEAD4;
  --cta-100: #D7F0EC;

  /* Signalfarben (nur Formular-Fehler) */
  --error-700: #A3231B;
  --error-50: #FDEDEC;

  /* Rahmen, die eine Komponente begrenzen: erfuellt 3:1 auf Weiss (3,30)
     und auf Ice (3,04), siehe WCAG 1.4.11 und PLAN 5.1 */
  --rand-kontrast: #7790A9;

  /* Schrift */
  --font-head: 'Bricolage Grotesque', 'Bricolage Fallback', Arial, sans-serif;
  --font-text: 'Inter', 'Inter Fallback', Arial, sans-serif;

  --fs-body: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-small: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-h1: clamp(2.3rem, 1.4rem + 4.2vw, 4rem);
  --fs-h1-sub: clamp(2rem, 1.3rem + 3vw, 3rem);
  --fs-h2: clamp(1.65rem, 1.25rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  /* Runde 2, Punkt 15: der Hero-Eyebrow traegt zwei der drei Aussagen, die
     der Kunde auf den ersten Blick sichtbar haben will (mobile Physiotherapie,
     Lueneburg und Umgebung). 13 Pixel waren dafuer zu klein. */
  --fs-eyebrow: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);

  /* Layout */
  /* Inhaltsbreite: 1280 statt 1160, damit grosse Bildschirme wirklich genutzt
     werden. Die Lesbarkeit schuetzt weiterhin die Absatzbreite von 65 Zeichen.
     Kopfzeile und Inhalt teilen dieselbe Breite, damit die Marke mit der
     Ueberschrift darunter fluchtet. */
  --container: 1280px;
  --container-header: 1280px;
  --pad-page: clamp(1rem, 4vw, 2.5rem);
  /* Runde 2, Punkt 4: der untere Wert galt bis 800 Pixel Breite und damit
     auf jedem Handy. 64 Pixel ueber und unter neun Abschnitten sind allein
     1150 Pixel Weg. Der Mindestwert sinkt deshalb auf 44 Pixel. Ab 550 Pixeln
     greift wieder 8vw, Tablet und Desktop bleiben also unveraendert. */
  --sect-pad: clamp(2.75rem, 8vw, 7rem);
  /* Ein gemeinsamer Spaltenabstand fuer alle zweispaltigen Bloecke, damit
     die zweite Spalte auf jeder Sektion auf derselben Achse beginnt. */
  --gap-spalten: clamp(1.75rem, 3.5vw, 3.5rem);
  --band-pad: clamp(2rem, 5vw, 4.5rem);
  --header-h: 68px;
  --stickybar-h: 64px;

  --radius-card: 16px;
  --radius-img: 20px;
  --radius-pill: 999px;

  /* Zwei Ebenen statt einer: die enge Ebene setzt die Karte auf die Flaeche,
     die weite gibt Tiefe. Auf Weiss ist eine einlagige Karte sonst kaum vom
     Untergrund zu unterscheiden. */
  --shadow-card: 0 1px 2px rgba(20, 64, 107, .06), 0 10px 34px -8px rgba(20, 64, 107, .16);
  --shadow-card-hover: 0 2px 4px rgba(20, 64, 107, .08), 0 18px 46px -10px rgba(20, 64, 107, .24);

  /* z-index-Skala (PLAN 5.7) */
  --z-stickybar: 90;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

@media (min-width: 1180px) {
  :root { --header-h: 88px; }
}

/* ---------- 3. Reset und Basis ------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--white);
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(27, 117, 188, .18);
}

/* Sticky-Leiste verdeckt sonst Footer-Pflichtlinks (PLAN 5.5) */
body:not(.page-kontakt):not(.page-danke) {
  padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  body { padding-bottom: 0 !important; }
}

body.menu-open { overflow: hidden; }

/* Lange deutsche Komposita (Dienstleistungs-Informationspflichten-Verordnung,
   Bewegungstherapie) sprengen sonst schmale Viewports. */
p, li, dd, dt, address, figcaption,
h1, h2, h3, h4, summary, .lead, .chip, .btn {
  overflow-wrap: break-word;
}
.prose p, .prose li, .accordion__body p, .service-block__inner p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.1;
  color: var(--navy-700);
  margin: 0 0 .5em;
  text-wrap: balance;
  min-width: 0;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.022em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.015em; line-height: 1.12; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }

p { margin: 0 0 1rem; max-width: 65ch; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .35rem; }

/* #1B75BC erreicht auf der Eisflaeche nur 4,47:1 und verfehlt 4,5:1 damit
   knapp. Eine Stufe dunkler ist kaum zu sehen und schafft 4,87:1 auf Eis
   und 5,29:1 auf Weiss. */
a { color: var(--blue-700); text-underline-offset: .18em; }
a:hover { color: var(--navy-700); }

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

strong, b { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.tel-nr { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 4. Layout-Hilfen --------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

.section { padding-block: var(--sect-pad); }
.section--ice { background: var(--ice-50); }
.section--navy { background: var(--navy-700); color: var(--white); }
.section--tight { padding-block: var(--band-pad); }
/* Sektionen mit absoluter Deko brauchen Clipping (PLAN 5.7) */
.section--deco { position: relative; overflow-x: clip; }

/* Sektion mit Foto hinter der Farbflaeche.
   Das Foto wird multipliziert statt ueberdeckt. Multiplikation kann eine
   Flaeche nur dunkler machen, nie heller. Dadurch ist der Kontrast jeder
   hellen Schrift darauf rechnerisch immer mindestens so hoch wie auf der
   Vollton-Flaeche, unabhaengig davon, welches Foto eingesetzt wird. */
/* Weicher Rand nach aussen, damit die Flaeche als Block gelesen wird und
   das Motiv in den Ecken nicht gegen die Schrift arbeitet. */

.section--navy h2,
.section--navy h3 { color: var(--white); }
.section--navy p { color: var(--on-navy-muted); }

.lead { font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem); color: var(--ink-800); }
.section--navy .lead { color: var(--on-navy-muted); }

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--blue-800);
  margin: 0 0 .75rem;
  display: block;
}
.section--ice .eyebrow { color: var(--blue-800); }
.section--navy .eyebrow { color: var(--cyan-text); }

.section-head { max-width: 44rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.section--navy .section-head { max-width: 52rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: var(--z-skip);
  background: var(--navy-900);
  color: var(--white);
  padding: .85rem 1.5rem;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--white); }

/* ---------- 5. Buttons und Chips ----------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn svg { flex: none; width: 20px; height: 20px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

@media (max-width: 767.98px) {
  .btn { width: 100%; min-height: 56px; }
  .btn-row .btn { width: 100%; }
}

/* ------------------------------------------------------------------------
   Die beiden Handlungsaufforderungen, Arbeitsanweisung Runde 2, Punkt 2.
   Es gibt genau zwei, und jede sieht auf der ganzen Website gleich aus:

     .btn--cta   "Termin anfragen"  primaer,   immer Petrol gefuellt
     .btn--call  "Anrufen"          sekundaer, immer die offene Fassung

   Vorher waren es fuenf Fassungen (btn--cta, btn--cta-light, btn--on-navy
   fuer den Termin, btn--call und btn--call-outline fuer den Anruf), und in
   der Anrufleiste war die Gewichtung sogar vertauscht: der Anruf trug die
   Flaeche, der Termin nur den Umriss. Genau das hat der Kunde beanstandet.
   ------------------------------------------------------------------------ */

/* Primaer: Termin anfragen. Eine Farbe, ohne Ausnahme. */
.btn--cta {
  background: var(--cta-600);
  color: var(--white);
}
.btn--cta:hover { background: var(--cta-700); color: var(--white); }

/* Auf Navy steht Petrol nur mit 1,93:1 gegen den Grund, der Knopf verliert
   dort seine Kante. Die Fuellfarbe bleibt trotzdem dieselbe, weil der Kunde
   eine Farbe fuer den primaeren Weg verlangt. Den fehlenden Kantenkontrast
   liefert ein heller Rahmen, gemessen 9,8:1 gegen Navy. */
.section--navy .btn--cta,
.cta-band .btn--cta,
.stickybar .btn--cta {
  border-color: rgba(255, 255, 255, .85);
}

/* Sekundaer: Anrufen. Immer offen, nie gefuellt, damit der Anruf den Termin
   nicht ueberstimmt. Die weisse Fuellung ist deckend, der Kontrast haengt
   also auch ueber einem Foto nicht vom Motiv ab. */
.btn--call {
  background: var(--white);
  border-color: var(--blue-600);
  color: var(--blue-700);
}
.btn--call:hover { background: var(--blue-600); color: var(--white); }

.section--navy .btn--call,
.cta-band .btn--call,
.stickybar .btn--call {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: var(--white);
}
.section--navy .btn--call:hover,
.cta-band .btn--call:hover,
.stickybar .btn--call:hover { background: var(--white); color: var(--navy-700); }

/* Kein CTA, sondern ein weiterfuehrender Knopf auf dunklem Grund
   (zum Beispiel "Alle Leistungen im Detail"). Bleibt bewusst zurueckhaltend. */
.btn--on-navy {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: var(--white);
}
.btn--on-navy:hover { background: var(--white); color: var(--navy-700); }

.section--navy .btn:focus-visible,
.stickybar .btn:focus-visible,
.site-footer a:focus-visible { outline-color: var(--cyan-400); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.section--ice .textlink { color: var(--blue-700); }
.textlink svg { width: 18px; height: 18px; }
.textlink:hover svg { transform: translateX(3px); }
.textlink svg { transition: transform .18s ease; }

/* Chips: statisch vs. interaktiv muss unterscheidbar sein (PLAN 5.5) */
.chip {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--ice-50);
  border: 1px solid var(--rand-kontrast);
  color: var(--navy-700);
  font-size: var(--fs-small);
  font-weight: 500;
}
.section--ice .chip { background: var(--white); }

.chip--link {
  background: var(--white);
  border: 1.5px solid var(--blue-600);
  color: var(--blue-600);
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.chip--link:hover { background: var(--blue-600); color: var(--white); }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.chip-list li { margin: 0; }

/* ---------- 6. Karten, Listen, Badge ------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid rgba(20, 64, 107, .09);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2rem);
}
/* Hover-Lift nur auf verlinkten Karten (PLAN 5.5) */
a.card { text-decoration: none; color: inherit; display: block; transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.plus-list { list-style: none; padding: 0; margin: 0; }
.plus-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
.plus-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 1.1rem; height: 1.1rem;
  background: currentColor;
  color: var(--blue-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section--navy .plus-list li::before { color: var(--cyan-400); }
.plus-list b, .plus-list strong { display: block; color: var(--navy-700); }
.section--navy .plus-list b { color: var(--white); }

.badge-round {
  position: absolute;
  top: 6%;
  right: 4%;
  width: clamp(104px, 26%, 148px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--navy-700);
  border: 4px solid var(--white);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(.875rem, .8rem + .35vw, 1rem);
  line-height: 1.2;
  padding: .5rem;
  transform: rotate(2deg);
  box-shadow: 0 6px 20px rgba(14, 42, 69, .18);
}
/* Aussage steht mobil bereits in der Vertrauenszeile (PLAN 5.5) */
/* Unter 480 Pixeln war der runde Beleg am Portrait ausgeblendet, weil er
   dort ueber dem Gesicht sass. Punkt 10 verlangt aber ausdruecklich, dass
   "Staatlich examiniert seit 2012" deutlich sichtbar bleibt. Statt ihn zu
   verstecken, wandert er auf schmalen Geraeten unter das Bild und wird zu
   einer ruhigen Zeile in voller Breite. */
@media (max-width: 479px) {
  .badge-round {
    position: static;
    width: auto;
    aspect-ratio: auto;
    margin-top: .9rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    line-height: 1.3;
    text-align: center;
    box-shadow: none;
  }
}

/* ---------- 7. Bilder und Platzhalter ------------------------------------ */

.media {
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--ice-50);
}
/* Zwischen .media und img liegt ueberall ein <picture>. Ohne eigene Hoehe
   loest height:100% am Bild gegen "auto" auf, dann bestimmt das
   Seitenverhaeltnis der Datei die Hoehe und nicht der Rahmen. */
.media picture { display: block; width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x5 { aspect-ratio: 4 / 5; }
/* Breites Band ueber die volle Inhaltsbreite. Ein 3:2-Bild waere dort ueber
   700 Pixel hoch und wuerde den Abschnitt sprengen. */

/* Signaturform fuer Hero und Portraet (PLAN 5.4).
   Eine echte Blob-Maske schnitt oben in den Kopfbereich des Portraets.
   Diese Form bleibt oben gerade und nimmt den Logo-Schwung unten links auf. */
.media--blob {
  border-radius: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px)
                 clamp(18px, 3vw, 28px) clamp(48px, 11vw, 104px);
}

.media-frame { position: relative; }

/* ---------- 8. Header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid rgba(20, 64, 107, .08);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(20, 64, 107, .10); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.25rem);
  min-height: var(--header-h);
  width: 100%;
  max-width: var(--container-header);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

/* ---------- 8.1 Wort-Bild-Marke ---------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex: none;
  min-width: 0;
}
/* Die echte Bildmarke ist 192 zu 168, also etwas breiter als hoch. Die
   Hoehe gibt den Ton an, die Breite ergibt sich daraus: bei fester Breite
   UND Hoehe waere sie gestaucht. */
.brand__mark { height: 40px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 2px; line-height: 1; min-width: 0; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy-700);
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand__city {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-600);
  white-space: nowrap;
}
/* Auf sehr schmalen Geraeten bleibt nur die Bildmarke, damit der Header
   einzeilig bleibt (gemessen, nicht geschaetzt). */
@media (max-width: 399px) {
  .brand__text { display: none; }
}
/* Zwischen 400 und 520 px wird es sonst zu eng: Marke etwas kompakter. */
@media (max-width: 519px) {
  .brand__mark { height: 36px; }
  .brand__name { font-size: 1.125rem; }
  .brand__city { font-size: .625rem; letter-spacing: .16em; }
}

/* ---------- 8.2 Aktionen rechts ---------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  margin-left: auto;
}

/* Beide Schaltflaechen teilen exakt dieselben Masse. Feste Hoehe statt
   min-height, damit sie unabhaengig von der Textlaenge gleich gross sind. */
.header-call,
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 46px;
  padding-inline: 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.header-call svg,
.header-cta svg { width: 18px; height: 18px; flex: none; }

/* Sekundaer wie ueberall: offene Fassung. Vorher war dieser Knopf voll
   blau gefuellt und damit auf dem Handy das lauteste Element der Seite,
   lauter als der primaere Weg "Termin anfragen". */
.header-call {
  background: var(--white);
  border-color: var(--blue-600);
  color: var(--blue-700);
}
.header-call:hover { background: var(--blue-600); color: var(--white); }
.header-call__nr { display: none; }

.header-cta {
  display: none;
  background: var(--cta-600);
  color: var(--white);
}
.header-cta:hover { background: var(--cta-700); color: var(--white); }

.header-nav { display: none; }

/* ---------- 8.3 Menue (natives details/summary, laeuft ohne JS) --------- */

.mobile-nav { flex: none; display: flex; }
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ice-50);
  color: var(--navy-700);
  cursor: pointer;
  list-style: none;
}
.burger::-webkit-details-marker { display: none; }
.burger::marker { content: ""; }
.burger:hover { background: var(--cyan-200); }
.burger svg { width: 24px; height: 24px; }
.burger__close { display: none; }
.mobile-nav[open] .burger__open { display: none; }
.mobile-nav[open] .burger__close { display: block; }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  background: var(--white);
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem var(--pad-page) calc(2rem + env(safe-area-inset-bottom, 0px));
}
.mobile-menu ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.mobile-menu li { margin: 0; border-bottom: 1px solid rgba(20, 64, 107, .12); }
.mobile-menu a {
  display: flex;
  align-items: center;
  padding: 1.05rem .25rem;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
  min-height: 56px;
}
/* Nur die Navigationsliste, nicht die Aktionen darunter. Auf der Kontaktseite
   traegt der Terminknopf ebenfalls aria-current, weil sein Ziel dieselbe Seite
   ist. Ungebunden faerbte diese Regel seine Schrift blau auf Teal (1,13:1) und
   setzte den Markierungsbalken in den Knopf hinein. */
.mobile-menu ul a[aria-current="page"],
.page-start .mobile-menu .nav-start,
.page-leistungen .mobile-menu .nav-leistungen,
.page-ueber-mich .mobile-menu .nav-ueber-mich,
.page-faq .mobile-menu .nav-faq,
.page-kontakt .mobile-menu .nav-kontakt { color: var(--blue-600); }

.mobile-menu ul a[aria-current="page"]::before,
.page-start .mobile-menu .nav-start::before,
.page-leistungen .mobile-menu .nav-leistungen::before,
.page-ueber-mich .mobile-menu .nav-ueber-mich::before,
.page-faq .mobile-menu .nav-faq::before,
.page-kontakt .mobile-menu .nav-kontakt::before {
  content: "";
  width: 4px;
  align-self: stretch;
  margin-right: .75rem;
  margin-block: .35rem;
  background: var(--blue-600);
  border-radius: 2px;
}

.mobile-menu__aktionen { display: grid; gap: .75rem; margin-bottom: 1.25rem; }

/* Die Regel ".mobile-menu a" weiter oben ist spezifischer als ".btn" und hat
   den beiden Aktionen die Typografie der Navigationsliste aufgezwungen:
   22px statt 17px, 4px statt 25,6px Innenabstand seitlich, daraus 64px Hoehe.
   Sie hat ausserdem die Schriftfarbe auf Navy gesetzt, wodurch die
   Terminaktion dunkelblau auf dunklem Teal stand und nur 1,97:1 erreichte.
   Hier gilt wieder die Typografie der Knoepfe. */
.mobile-menu__aktionen .btn {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  padding: .75rem 1.25rem;
  min-height: 52px;
}
.mobile-menu__aktionen .btn--cta { color: var(--white); }
.mobile-menu__aktionen .btn--call { color: var(--blue-700); }
.mobile-menu__note {
  font-size: var(--fs-small);
  color: #4B5C6B;
  margin: 0;
}

/* ---------- 8.4 Desktop ab 1180 px --------------------------------------
   Gemessen: Marke plus Navigation plus Aktionen mit ausgeschriebener Nummer
   brauchen 1062px. Ab 1180px stehen 1100px zur Verfuegung, darunter waere
   der Kopf zu breit. Bis dahin uebernimmt das Menue. */

@media (min-width: 1180px) {
  .mobile-nav { display: none !important; }

  /* Navigation nimmt die Mitte ein, dadurch verteilt sich der Platz
     gleichmaessig statt sich rechts zu stauen. */
  .header-nav {
    display: flex;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .header-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.2vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .header-nav li { margin: 0; }
  .header-nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--navy-700);
    text-decoration: none;
    white-space: nowrap;
  }
  .header-nav a:hover { color: var(--blue-600); }

  /* Aktiv-Markierung: JS setzt aria-current, body-Klasse ist der Fallback */
  .header-nav a[aria-current="page"],
  .page-start .header-nav .nav-start,
  .page-leistungen .header-nav .nav-leistungen,
  .page-ueber-mich .header-nav .nav-ueber-mich,
  .page-faq .header-nav .nav-faq,
  .page-kontakt .header-nav .nav-kontakt { color: var(--blue-600); }

  .header-nav a[aria-current="page"]::after,
  .page-start .header-nav .nav-start::after,
  .page-leistungen .header-nav .nav-leistungen::after,
  .page-ueber-mich .header-nav .nav-ueber-mich::after,
  .page-faq .header-nav .nav-faq::after,
  .page-kontakt .header-nav .nav-kontakt::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 3px;
    background: var(--blue-600);
    border-radius: 2px;
  }

  .header-actions { gap: .625rem; margin-left: 0; }
  .header-cta { display: inline-flex; }
  .header-call, .header-cta { height: 48px; padding-inline: 1.35rem; font-size: 1.0625rem; }

  .brand__mark { height: 46px; }
  .brand__name { font-size: 1.4rem; }
  .brand__city { font-size: .75rem; }
}

/* Ausgeschriebene Nummer, sobald sie passt. Gemessen: ab 480px bleibt der
   Kopf einzeilig, darunter ist zu wenig Platz und es bleibt beim Wort. */
@media (min-width: 480px) {
  .header-call__nr { display: inline; }
  .header-call__label { display: none; }
}

/* ---------- 9. Sticky-Call-Leiste (mobil) -------------------------------- */

.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-stickybar);
  display: flex;
  gap: .6rem;
  padding: .45rem var(--pad-page) calc(.45rem + env(safe-area-inset-bottom, 0px));
  background: var(--navy-900);
  border-top: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 -2px 10px rgba(14, 42, 69, .18);
}
.stickybar .btn {
  flex: 1;
  min-height: 46px;
  padding: .5rem .75rem;
  font-size: 1rem;
  width: auto;
}
/* Die Gewichtung folgt der ganzen Website: der Termin traegt die Flaeche,
   der Anruf steht daneben in der offenen Fassung. Beide bleiben gleich gross
   und gleich gut zu treffen. */

/* Auf sehr schmalen Geraeten passt "Termin anfragen" knapp nicht in eine Zeile
   und die Leiste wird durch den Umbruch zwoelf Pixel hoeher. Weniger seitlicher
   Innenabstand loest das, die Trefferflaeche bleibt volle Knopfbreite. */
@media (max-width: 359px) {
  .stickybar .btn { padding-inline: .5rem; }
  /* "Anrufen" ist kurz, "Termin anfragen" lang. Gleich breite Knoepfe zwingen
     den laengeren Text in zwei Zeilen und machen die Leiste zwoelf Pixel
     hoeher. Hier bekommt jeder nur so viel Platz, wie er braucht. */
  .stickybar .btn--call { flex: 0 1 auto; }
}
.stickybar .btn:hover { transform: none; }
/* Ausblenden per body-Klasse, Markup bleibt identisch (PLAN 5.5) */
.page-kontakt .stickybar,
.page-danke .stickybar,
.menu-open .stickybar { display: none; }
/* Ab 768 Pixeln verschwindet die feste Anrufleiste. Bis 1179 Pixel war damit
   weder sie noch der Knopf "Termin anfragen" in der Kopfzeile sichtbar: in
   diesem ganzen Band fuehrte der Weg zum Termin nur ueber das Menue. Der
   Knopf blendet deshalb genau dort ein, wo die Leiste verschwindet, und
   nicht erst ab 1180. */
@media (min-width: 768px) {
  .stickybar { display: none; }
  .header-cta { display: inline-flex; }
}

/* ---------- 10. CTA-Band ------------------------------------------------- */

.cta-band {
  background: var(--navy-700);
  color: var(--white);
  padding-block: var(--band-pad);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  overflow-x: clip;
}
.cta-band h2 { color: var(--white); margin-bottom: .35rem; }
.cta-band__sub { color: var(--on-navy-muted); max-width: 40rem; margin-bottom: 1.5rem; }
.cta-band__note {
  color: var(--on-navy-muted);
  font-size: var(--fs-small);
  margin: .35rem 0 0;
  max-width: 40rem;
}
/* Loest die frueher direkt im HTML gesetzte Farbe ab, siehe --cyan-text. */
.cta-band__note a { color: var(--cyan-text); }
.cta-band .btn-row { margin-bottom: 0; }
/* Rechte Kante auf der rechten Kante des Inhalts, Unterkante im freien
   Streifen darunter. Die Rechnung: der Inhaltsbereich ist zentriert und auf
   --container gedeckelt, dazu sein eigener Innenabstand. */
.cta-band__deco,
.section__schwung {
  --kante-inhalt: calc((100% - min(100%, var(--container))) / 2 + var(--pad-page));
}

.cta-band__deco {
  position: absolute;
  right: var(--kante-inhalt);
  bottom: clamp(.75rem, 2.5vw, 2rem);
  width: min(340px, 30vw);
  opacity: .18;
  pointer-events: none;
}
@media (max-width: 899px) { .cta-band__deco { display: none; } }

/* ---------- 11. Footer --------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-muted);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  font-size: var(--fs-small);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; } }

.site-footer h2 {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--on-navy-muted);
  margin: 0 0 .9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .3rem; }
/* Runde 2, Punkt 15: die Links waren 20 Pixel hoch und damit unter der
   Mindestflaeche von WCAG 2.2 AA (24 Pixel). Der Innenabstand hebt sie auf
   32 Pixel, ohne die Schrift oder das Bild der Fusszeile zu aendern. Der
   Aussenabstand der Zeilen sinkt im Gegenzug, die Fusszeile wird dadurch
   nicht hoeher. */
.site-footer a {
  display: inline-block;
  padding-block: .32rem;
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 2px; color: var(--white); }
.site-footer p { color: var(--on-navy-muted); max-width: 32ch; }

.footer-brand__mark { height: 44px; width: auto; margin-bottom: .75rem; }
.footer-brand__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--white);
  display: block;
  line-height: 1.1;
}
.footer-brand__city {
  font-size: .625rem;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--cyan-text);
  display: block;
  margin-bottom: .75rem;
}
.footer-note { font-size: 1rem; margin-top: .5rem; }

.site-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  font-size: 1rem;
}
.site-footer__bottom p { margin: 0; max-width: none; }

/* ---------- 12. Hero ----------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Grundton, liegt unter dem Foto und traegt die Flaeche, falls das Bild
     nicht laedt. Bewusst durchgehend getoent statt nach Weiss auslaufend,
     damit Hero und die weisse Sektion darunter nicht zu einer Flaeche
     verschmelzen. */
  background: linear-gradient(178deg, #E4F1F9 0%, var(--ice-50) 46%, #F3FAFD 100%);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
}

/* Auf sehr flachen Bildschirmen (etwa 320 x 568) schob der grosszuegige
   obere Innenabstand den Anrufknopf hinter die feste Anrufleiste: der Knopf
   endete bei 523 Pixeln, die Leiste begann bei 510. Auf solchen Geraeten
   ruecken die Innenabstaende zusammen, damit beide Handlungswege beim Laden
   vollstaendig im Bild stehen. */
@media (max-height: 640px) and (max-width: 767.98px) {
  .hero { padding-block: 1.5rem 1.75rem; }
  .hero__grid { gap: 1.25rem; }
}


/* Ebene 1: das Raumfoto, randlos, ohne eigene Aussage.
   aria-hidden, weil es reine Flaechenwirkung ist und nichts erklaert. */
.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
/* Das picture-Element liegt zwischen Huelle und Bild. Ohne eigene Hoehe
   loest height:100% am img gegen "auto" auf und das Bild wird zu hoch. */
.hero__bild picture { display: block; width: 100%; height: 100%; }
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 46%;
}

/* Ebene 2: der Schleier. Zwei Verlaeufe uebereinander.
   Oben liegt der Textschleier: dort, wo Schrift steht, deckt er nahezu
   vollstaendig, damit der Kontrast exakt so hoch bleibt wie ohne Foto.
   Nach rechts oeffnet er sich, dort steht das Portraet und dort darf der
   Raum sichtbar werden. Unten liegt der Farbschleier in den Hausfarben. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(207, 227, 242, .965) 0%,
    rgba(207, 227, 242, .94) 40%,
    rgba(207, 227, 242, .66) 62%,
    rgba(207, 227, 242, .34) 100%);
}
/* Ab dem zweispaltigen Aufbau wandert der Schleier von oben nach links:
   die Textspalte nimmt 55 Prozent ein, bis dorthin deckt er voll. */
@media (min-width: 1024px) {
  .hero::before {
    /* Die Textspalte endet gemessen bei 52 Prozent der Breite. Bis 54
       Prozent deckt der Schleier deshalb fast voll, erst danach oeffnet
       er sich. Geprueft mit tools/hero-pruefen.py. */
    background: linear-gradient(96deg,
      rgba(207, 227, 242, .965) 0%,
      rgba(207, 227, 242, .94) 54%,
      rgba(207, 227, 242, .55) 68%,
      rgba(207, 227, 242, .18) 84%,
      rgba(207, 227, 242, .08) 100%);
  }
}

.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
/* Split erst ab 1024 px, davor gestapelt mit Text zuerst (PLAN 7.1) */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 55fr 45fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.hero h1 { margin-bottom: 1rem; }
.hero__sub { font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem); color: var(--ink-800); margin-bottom: 1.75rem; }

/* Ab 768 px einzeilig mit Trennpunkten (PLAN 7.1) */
@media (min-width: 768px) {
}

/* Grosse, sehr blasse Schwungform fuer weisse Abschnitte.

   Die beiden Boegen im Markup sind KREISBOEGEN um denselben Mittelpunkt
   (150, -23.44), Radien 199.4 und 176.4. Nur so sind sie wirklich parallel:
   der Abstand ist die Differenz der Radien und damit ueberall gleich.

   Vorher waren es zwei Bezierkurven mit unabhaengigen Kontrollpunkten. Zwei
   Bezierkurven laufen nie parallel, ausser man rechnet die Parallele aus.
   Gemessen schwankte ihr Abstand zwischen 6,5 und 0,1 Einheiten bei
   Strichstaerke 5 bis 6, auf dem letzten Drittel lagen beide Striche also
   ineinander. Wer die Form aendert, aendert die Radien, nicht die Kurven. */
.section__schwung {
  position: absolute;
  right: var(--kante-inhalt);
  bottom: clamp(1rem, 3vw, 2.5rem);
  /* Die Form bleibt in der rechten Spalte und stoesst nicht an die Bildkarte
     links. Gemessen bei 1440 Pixeln: Karte endet bei x=810, die Striche
     beginnen bei x=860, also 50 Pixel Luft. Bei 1024 sind es 51. */
  width: min(460px, 34vw);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.section--deco > .container { position: relative; z-index: 1; }
/* Unter 1024 Pixeln stapelt sich der zweispaltige Block zu einer Spalte.
   Dann gibt es rechts keinen freien Streifen mehr, und die Form laege auf
   dem Text. Gemessen bei 900, 820 und 768 Pixeln: sie beruehrte jedes Mal
   den Satz "Gesetzlich Versicherte sind als Selbstzahler willkommen".
   Eine Zierform, fuer die kein Platz da ist, wird weggelassen. */
@media (max-width: 1023.98px) { .section__schwung { display: none; } }

.hero__media { position: relative; z-index: 1; }

/* Arbeitsanweisung Runde 2, Punkt 1: das Portrait mobil 15 bis 20 Prozent
   kompakter, damit die Handlungswege frueher sichtbar werden. 82 Prozent
   Breite ergeben bei gleichem Seitenverhaeltnis 18 Prozent weniger Hoehe.
   Gemessen bei 375 Pixeln Fensterbreite: 429 auf 351 Pixel. */
@media (max-width: 767.98px) {
  .hero__media .media { max-width: 82%; margin-inline: auto; }
}

/* Der Startbereich bleibt bis 1023 Pixel einspaltig gestapelt. Ohne eigene
   Grenze wuchs das Portrait dort mit der Fensterbreite mit und war bei 900
   Pixeln 828 Pixel breit und 1035 hoch, also hoeher als der halbe Bildschirm.
   Gemessen 768 Pixel: 707 auf 420, 900 Pixel: 828 auf 420. Der feste Deckel
   haelt es im Tabletband in derselben Groessenordnung wie auf dem Handy. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__media .media { max-width: 420px; margin-inline: auto; }
}
/* Farbiger statt neutraler Schatten: das Portraet steht dadurch im Raum,
   statt auf der Flaeche zu kleben. */
.hero__media .media {
  box-shadow: 0 2px 6px rgba(14, 42, 69, .06),
              0 26px 56px -22px rgba(14, 42, 69, .38);
}
/* Der runde Beleg braucht auf dem Foto einen eigenen Rand, sonst laeuft er
   im hellen Hintergrund aus. */
.hero__media .badge-round { box-shadow: 0 6px 20px rgba(14, 42, 69, .28); }

/* ---------- 12b. Fakten-Leiste am Hero-Fuss ------------------------------ */

/* Schliesst den Hero nach unten ab und traegt die vier Belege, die vorher
   als Haekchenzeile in der Textspalte standen. Randlos ueber die volle
   Breite, damit die Seite nicht direkt von Hero auf Weiss springt. */
.fakten {
  background: linear-gradient(180deg, #DCEDF7 0%, #E6F3FA 100%);
  border-block: 1px solid rgba(20, 64, 107, .13);
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
}
.fakten__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  .fakten__liste { grid-template-columns: repeat(4, 1fr); }
}
.fakten__liste li {
  margin: 0;
  min-width: 0;
  padding-left: clamp(.9rem, 2vw, 1.25rem);
  border-left: 3px solid var(--cyan-400);
}
.fakten__wert {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem);
  line-height: 1.25;
  color: var(--navy-700);
}
.fakten__text {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-800);
  margin-top: .15rem;
}

/* ---------- 13. Feature + Liste (Startseite 7.2) ------------------------- */

.feature-grid { display: grid; gap: var(--gap-spalten); align-items: start; }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: 3fr 2fr; } }

/* Diese Karte steht auf reinem Weiss. Ein Hauch Eisblau nach unten setzt sie
   vom Untergrund ab, ohne dass ein Rahmen noetig waere. */
.feature-card {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 58%, #F5FAFD 100%);
}
.feature-card__body { padding: clamp(1.5rem, 3vw, 2rem); }
.feature-card h3 { margin-bottom: .5rem; }
.feature-card p { margin-bottom: 0; }

/* ---------- 14. Leitsatz-Band -------------------------------------------- */

.quote-band { text-align: left; }
.quote-band blockquote {
  margin: 0;
  max-width: 46rem;
}
.quote-band q, .quote-band__text {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.35rem);
  line-height: 1.25;
  color: var(--navy-700);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.quote-band cite {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--blue-700);
}
.quote-band__mark {
  width: 44px; height: 44px;
  margin-bottom: 1rem;
  color: var(--cyan-400);
}

/* ---------- 15. Schritte (7.4) ------------------------------------------- */

.steps { display: grid; gap: 2rem; --schritt-gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--schritt-gap); }

  /* Die Verbindung gehoert an die Schritte selbst, nicht als durchgehender
     Balken hinter die Sektion. Sonst beginnt sie neben dem ersten Kreis und
     laeuft hinter dem letzten Kreis ins Leere.
     Sie startet 14 px hinter dem eigenen Kreis und endet 14 px vor dem
     naechsten, deshalb der negative Wert in Hoehe des Spaltenabstands. */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 70px;
    right: calc(14px - var(--schritt-gap));
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cyan-400) 0 9px, transparent 9px 18px);
  }
}
.step { position: relative; z-index: 1; }
.step__nr {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue-600);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border: 4px solid var(--white);
}
.section--ice .step__nr { border-color: var(--ice-50); }
.step h3 { margin-bottom: .4rem; }
.step p { margin-bottom: 0; }

/* ---------- 16. Leistungs-Kacheln auf Navy (Runde 2, Punkt 3) ------------

   Loest die fruehere .service-list ab. Die lag als blosse Textliste auf dem
   Hintergrundfoto; dessen helles Band stand genau hinter "Manuelle
   Lymphdrainage" und "Rueckenschule" und hat die beiden Eintraege
   ausgewaschen. Gemessen: 7,49 dort gegen 12,11 bei den Eintraegen auf
   dunklem Grund, also eine Schwankung von 38 Prozent innerhalb derselben
   Liste. Ein staerkeres Abdunkeln haette die Schwankung nur gedaempft.
   Deckende Kacheln nehmen sie ganz heraus: der Textgrund ist jetzt fest,
   unabhaengig davon, welche Bildstelle darunter liegt.
   ------------------------------------------------------------------------ */

.leistungsgruppen {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.leistungsgruppe__titel {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 .75rem;
}

.kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .625rem;
}
/* Auf dem Handy eine Kachel je Zeile, damit die Liste ueberflogen werden
   kann. Ab Tablet zwei, ab Desktop drei Spalten. */
@media (min-width: 640px)  { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }

.kachel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  height: 100%;
  /* 64 Pixel Mindesthoehe: deutlich ueber der geforderten Antippflaeche,
     auch wenn der Nutzen nur eine Zeile braucht. */
  min-height: 64px;
  padding: .9rem 2.6rem .9rem 1.1rem;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 2px solid transparent;
  text-decoration: none;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.kachel::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  background: var(--blue-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.kachel__name {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--navy-900);
}
.kachel__nutzen {
  font-size: var(--fs-small);
  line-height: 1.35;
  /* Der Hausfarbwert fuer Fliesstext statt eines gedaempften Grautons.
     Die Rangfolge traegt die Schriftstaerke, nicht ein schwacher Kontrast:
     12,07:1 statt 7,36:1, und die Zielgruppe liest viel mit aelteren Augen. */
  color: var(--ink-800);
}
.kachel:hover,
.kachel:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
}
.kachel:hover::after,
.kachel:focus-visible::after { opacity: 1; transform: translateX(3px); }

/* Ergaenzende Gruppe: offene Kacheln statt gefuellter. Traegt weniger
   Gewicht als die therapeutischen Kernleistungen, bleibt aber gleich gross
   und gleich gut zu treffen. Der Rahmen steht mit 5,6:1 gegen Navy. */
.leistungsgruppe--ergaenzend .kachel {
  background: transparent;
  border-color: rgba(255, 255, 255, .42);
}
.leistungsgruppe--ergaenzend .kachel__name  { color: var(--white); }
.leistungsgruppe--ergaenzend .kachel__nutzen { color: var(--on-navy-muted); }
.leistungsgruppe--ergaenzend .kachel::after { background: var(--cyan-400); }
.leistungsgruppe--ergaenzend .kachel:hover,
.leistungsgruppe--ergaenzend .kachel:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .75);
}

.btn-row--zentriert { justify-content: center; }

/* Beschriftung der Einsatzgebiet-Karte. Als CSS statt als font-Attribute im
   SVG, damit die Schriftgroesse mit der Seite mitwaechst und die Karte auf
   dem Handy lesbar bleibt (Arbeitsanweisung Punkt 11 und Punkt 15). */
.karte__ort {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  fill: #175C93;
}
.karte__mitte {
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 700;
  fill: var(--navy-900);
}

/* Angehoerigenkarte (Arbeitsanweisung Punkt 7). Stand vorher als
   style-Attribut im Quelltext. */
/* Punkt 7: kompakter UND moderner. Kompakter war die Karte schon, an der
   Optik hatte sich nichts geaendert. Sie nimmt jetzt dieselbe Formensprache
   auf wie die Leistungskacheln: weisse Flaeche, ruhige Kante, oben ein
   farbiger Streifen als Aufmacher und ein Symbol neben der Ueberschrift.
   Der Streifen ist reine Dekoration und traegt keine Aussage. */
.card--angehoerige {
  /* Keine eigene Hoechstbreite: die Karte steht unter einem zweispaltigen
     Abschnitt, der die volle Breite des Inhaltsbereichs nutzt. Mit 52rem
     endete ihre rechte Kante mitten im Nichts und sie wirkte wie ein
     versehentlich stehengebliebener Kasten. Die Zeilenlaenge des Textes
     wird stattdessen im Inhalt selbst begrenzt. */
  margin-top: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  border-color: rgba(20, 64, 107, .14);
}
.card--angehoerige::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

/* Volle Kartenbreite heisst nicht volle Zeilenlaenge: ueber 75 Zeichen
   verliert man beim Zurueckspringen die Zeile. Gilt nur ab Tablet, auf dem
   Handy ist die Karte ohnehin schmaler als diese Grenze. */
@media (min-width: 768px) {
  .card--angehoerige > p,
  .card--angehoerige .plus-list { max-width: 68ch; }
}

.angehoerige__kopf {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .75rem;
}
.angehoerige__kopf h3 { margin: 0; }
.angehoerige__symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ice-50);
  color: var(--blue-700);
}
.angehoerige__symbol svg { width: 24px; height: 24px; }

@media (max-width: 479px) {
  /* Auf sehr schmalen Geraeten wandert das Symbol ueber die Ueberschrift,
     sonst bleiben der zweizeiligen Frage nur noch gut 200 Pixel. */
  .angehoerige__kopf { flex-direction: column; align-items: flex-start; gap: .6rem; }
}
/* Knopfreihe als letztes Element eines Blocks, ohne Abstand nach unten. */
.btn-row--schluss { margin-bottom: 0; }

/* Vertrauensbereich (Arbeitsanweisung Punkt 13). Die Auszeichnungen liegen
   schon bereit, damit spaetere echte Rezensionen nur noch eingesetzt werden
   muessen und nichts nachgebaut werden muss. */
.stimmen { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.stimme {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius-card);
  border: 1px solid rgba(20, 64, 107, .12);
}
/* #B8860B stand mit 3,25:1 gegen die weisse Kachel. Punkt 15 verlangt hohe
   Kontraste, fuer Text sind 4,5:1 noetig. #8A6400 erreicht 5,38:1 und bleibt
   im selben Goldton. */
.stimme__sterne { margin: 0 0 .4rem; color: #8A6400; letter-spacing: .1em; }
.stimme blockquote { margin: 0 0 .5rem; }
.stimme blockquote p { margin: 0; }
.stimme__quelle { margin: 0; font-size: var(--fs-small); color: var(--ink-800); }

/* Portraitplatz auf der Seite "Ueber mich". Stand vorher als style-Attribut
   im Quelltext. */
.media--schmal { max-width: 26rem; margin-inline: auto; }

/* Bildplatz, der auf dem Handy nicht die volle Spaltenbreite einnehmen soll.
   Gleiche Begrenzung wie beim Hero-Portrait (Arbeitsanweisung Punkt 4). */
@media (max-width: 767.98px) {
  .media--gedeckelt { max-width: 72%; margin-inline: auto; }
}

/* ---------- 17. Split-Sektionen ------------------------------------------ */

.split { display: grid; gap: var(--gap-spalten); align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-left .split__media { order: -1; }
}
.split__body p:last-child { margin-bottom: 0; }

/* ---------- 18. Einsatzgebiet -------------------------------------------- */

.area { display: grid; gap: var(--gap-spalten); align-items: center; }
@media (min-width: 900px) { .area { grid-template-columns: 42% 1fr; } }
.area__map { width: 100%; max-width: 380px; margin-inline: auto; }

/* ---------- 19. Akkordeon (FAQ) ------------------------------------------ */

.accordion { border-top: 1px solid var(--rand-kontrast); }
.accordion details {
  border-bottom: 1px solid var(--rand-kontrast);
}
.accordion summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding: 1.05rem .5rem 1.05rem 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  font-weight: 600;
  color: var(--navy-700);
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::marker { content: ""; }
.accordion summary:hover { background: var(--ice-50); }
.section--ice .accordion summary:hover { background: var(--white); }
.accordion summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 24px; height: 24px;
  background: var(--blue-600);
  transition: transform .15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 3rem 1.5rem 0; }
.accordion__body p:last-child { margin-bottom: 0; }

.faq-group { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.faq-group h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); }

/* ---------- 20. Leistungen-Seite ----------------------------------------- */

.service-block { padding-block: clamp(2.5rem, 5vw, 4rem); }
.service-block--alt { background: var(--ice-50); }
.service-block__inner { max-width: 65ch; }
.service-block__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; min-width: 0; }
.service-block__head h2 { flex: 1 1 auto; min-width: 0; }
.service-block__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--white);
  color: var(--blue-600);
  box-shadow: var(--shadow-card);
}
.service-block__icon svg { width: 28px; height: 28px; }
.service-block__head h2 { margin: 0; }

.service-facts { display: grid; gap: 1.5rem; margin-block: 1.75rem; }
@media (min-width: 768px) { .service-facts { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.service-facts h3 {
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--blue-700);
  margin-bottom: .6rem;
}
.service-facts ul { list-style: none; padding: 0; margin: 0; }
.service-facts li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; }
.service-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan-400);
}

/* ---------- 21. Timeline (Ueber mich) ------------------------------------ */

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 1.75rem;
  margin: 0;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 7px; top: .55em;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--blue-600);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--blue-600);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 13px; top: 1.9em;
  bottom: -.4em;
  width: 2px;
  background: rgba(27, 117, 188, .28);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline b { display: block; color: var(--navy-700); font-family: var(--font-head); font-size: 1.125rem; }

.photo-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .photo-row { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 22. Kontakt und Formular ------------------------------------- */

.contact-grid { display: grid; gap: var(--gap-spalten); align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; } }

.contact-info__phone {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem);
  color: var(--navy-700);
  text-decoration: none;
  margin-bottom: .35rem;
}
.contact-info__phone:hover { color: var(--blue-600); }
.contact-info__phone svg { width: 32px; height: 32px; color: var(--blue-600); flex: none; }

.info-block { margin-bottom: 2rem; }
.info-block h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.375rem); margin-bottom: .6rem; }

.price-note {
  background: var(--cta-100);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.35rem;
  color: var(--cta-700);
  font-size: var(--fs-small);
}
.price-note p { margin: 0; color: inherit; }
.price-note b { color: inherit; }

.form-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  max-width: 36rem;
}
.availability {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--cta-100);
  color: var(--cta-700);
  border-radius: var(--radius-pill);
  padding: .4rem 1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 1rem;
}
.availability::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cta-600);
  flex: none;
}

.field { margin-bottom: 1.25rem; }
.field > label,
.field-group legend {
  display: block;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: .4rem;
  font-size: var(--fs-small);
}
.field__hint {
  display: block;
  font-size: 1rem;
  color: #4B5C6B;
  font-weight: 400;
  margin-top: -.25rem;
  margin-bottom: .45rem;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink-800);
  background: var(--white);
  border: 1.5px solid #7B8C9B;
  border-radius: 10px;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--blue-600); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--blue-600); }

.field--error input,
.field--error textarea { border-color: var(--error-700); background: var(--error-50); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .4rem;
  color: var(--error-700);
  font-size: 1rem;
  font-weight: 600;
}
.field__error svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; }

.field-group { border: 0; padding: 0; margin: 0 0 1.25rem; }
.option-list { display: grid; gap: .5rem; }
@media (min-width: 480px) { .option-list--2col { grid-template-columns: 1fr 1fr; } }

.option {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .5rem .85rem;
  border: 1.5px solid var(--rand-kontrast);
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-small);
}
.option:hover { border-color: var(--blue-600); background: var(--ice-50); }
.option input { width: 24px; height: 24px; accent-color: var(--blue-600); flex: none; margin: 0; }
.option:has(input:checked) { border-color: var(--blue-600); background: var(--ice-50); }

/* Als label.consent statt nur .consent: die Regel .field > label weiter oben
   hat dieselbe Spezifitaet und wuerde sonst gewinnen. Sie setzt display auf
   block, womit der Abstand zwischen Kaestchen und Text wirkungslos blieb, und
   sie vererbt Fettschrift an einen langen Einwilligungstext. Beides hier
   ausdruecklich zurueckgeholt. */
label.consent {
  display: flex;
  gap: .75rem;
  font-weight: 400;
  margin-bottom: 0;
  align-items: flex-start;
  padding: 1rem;
  background: var(--ice-50);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
}
.consent input { width: 24px; height: 24px; accent-color: var(--cta-600); flex: none; margin: .1rem 0 0; }

.form-error-summary {
  background: var(--error-50);
  border: 2px solid var(--error-700);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--error-700);
}
.form-error-summary h2 { color: var(--error-700); font-size: 1.125rem; margin-bottom: .5rem; }
.form-error-summary ul { margin: 0; padding-left: 1.25rem; }
.form-error-summary a { color: var(--error-700); font-weight: 600; }

/* ---------- Sicherheitsabfrage ------------------------------------------- */

.captcha__zeile {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.captcha__bild {
  border: 1.5px solid var(--rand-kontrast);
  border-radius: 10px;
  background: var(--white);
  max-width: 100%;
  height: auto;
}
.captcha__neu {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .5rem 1rem;
  border: 2px solid var(--blue-600);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--blue-600);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.captcha__neu:hover { background: var(--blue-600); color: var(--white); }
.captcha__neu svg { width: 20px; height: 20px; flex: none; }

#f-captcha {
  max-width: 15rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.captcha__hilfe {
  font-size: 1rem;
  color: #4B5C6B;
  margin: .75rem 0 0;
}

/* Honeypot: unsichtbar, aber nicht per display:none (Autofill-Schutz) */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-submit { margin-top: 1.5rem; }
.form-submit .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.form-legal { font-size: 1rem; color: #4B5C6B; margin-top: 1rem; }

/* Danke-Seite */
.danke { padding-block: clamp(3rem, 8vw, 6rem); }
.danke__icon {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cta-100);
  color: var(--cta-700);
  margin-bottom: 1.5rem;
}
.danke__icon svg { width: 38px; height: 38px; }
/* Die Ueberschrift bekommt beim Laden den Fokus, damit Vorleseprogramme die
   Bestaetigung ansagen. Chrome zeichnet dazu einen Rahmen, und wer das
   Formular mit der Maus abgeschickt hat, sieht einen Kasten um die
   Schlagzeile und haelt ihn fuer einen Fehler. Auf der Vorschau gemessen:
   outline solid 3px rgb(27, 117, 188).
   Der Fokus bleibt, nur der Rahmen geht. Das ist zulaessig, weil eine
   Ueberschrift mit tabindex="-1" nicht in der Tabulatorfolge steht und
   damit kein bedienbares Element im Sinne von WCAG 2.4.7 ist. */
.danke h1:focus,
.danke h1:focus-visible { outline: none; }

/* ---------- 23. Einfache Textseiten (Recht, 404) ------------------------- */

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.25rem; }
.prose address { font-style: normal; margin-bottom: 1rem; }

/* Unuebersehbare Markierung fuer Angaben, die der Kunde noch liefern muss.
   Vor dem Livegang muss diese Klasse im gesamten Projekt verschwunden sein. */
.platzhalter {
  background: #FFF3CD;
  color: #66500A;
  padding: .1em .45em;
  border-radius: 4px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.error-page { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; }
.error-page__code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3.5rem, 10vw, 6rem);
  /* Stand in --cyan-200 und erreichte damit nur 1,44:1 gegen Weiss. Auch
     grosse Schrift braucht 3:1. --cyan-400 reicht mit 2,62:1 ebenfalls nicht,
     nachgerechnet. --blue-600 kommt auf 4,86:1 und ist die naechste Hausfarbe,
     die die Grenze sicher haelt. */
  color: var(--blue-600);
  line-height: 1;
  margin-bottom: .5rem;
}
.error-page .btn-row { justify-content: center; }

/* ---------- 24. Reveals und Motion --------------------------------------- */

/* Ohne JS ist alles sichtbar (PLAN 6.2) */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .orbit-draw path {
  stroke-dasharray: var(--dash, 600);
  stroke-dashoffset: var(--dash, 600);
  animation: orbit-in 1.2s ease .2s forwards;
}
@keyframes orbit-in { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .orbit-draw path { stroke-dashoffset: 0; }
}

/* ---------- 25. Feinschliff Handy ----------------------------------------
   Alles hier wirkt ausschliesslich unter 768px, ab 768px ist die Seite
   unveraendert. Angefasst werden nur Groessen, Innenabstaende und
   Schriftschnitte. Farben, Schriftfamilien, Raster, Abstaende zwischen den
   Sektionen und die Reihenfolge bleiben, wie sie sind.

   Grundlage sind Messungen aller neun Seiten bei 375px Breite. Wo ein Wert an
   einer Grenze steht, ist sie genannt: Fliesstext bleibt bei 18px, blockartige
   Bedienelemente bleiben ueber 44px hoch, Kontrast bleibt ueber 4,5:1.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  /* Knoepfe waren 56px hoch, obwohl der Inhalt nur 48,4px braucht: 17px
     Schrift mit gemessener Zeilenhoehe 20,4px, dazu 12px Innenabstand oben und
     unten und 2px Rahmen. Damit war der Knopf auf dem Handy hoeher als
     derselbe Knopf am Rechner (52px) und hoeher als der Anrufknopf im Kopf
     direkt darueber (46px). 48px ist keine willkuerliche Zahl, sondern die
     Hoehe, die die Seite an anderer Stelle schon benutzt (FAQ-Aufklapper,
     Knopf der Sicherheitsabfrage). Die Untergrenze waeren 44px, die nutze ich
     bei dieser Zielgruppe bewusst nicht aus.

     Schnitt 600 ist das Schwerste, was Inter hier ueberhaupt hergibt, die
     Schrift ist mit 400 bis 600 eingebunden. Auf einer gefuellten Pille wirkt
     das schwer. 500 rendert als echtes Medium und steht immer noch deutlich
     ueber dem Fliesstext mit 400. Der Schriftschnitt geht nicht in die
     Kontrastrechnung ein, an den Kontrastwerten aendert sich nichts. */
  .btn { min-height: 48px; font-weight: 500; }

  /* Aktionen im Menue auf dieselbe Hoehe wie alle anderen Knoepfe. Das eigene
     font-weight ist noetig, weil .mobile-menu a spezifischer ist als .btn. */
  .mobile-menu__aktionen .btn { min-height: 48px; font-weight: 500; }

  /* Menueeintraege waren mit 22px die lauteste Schrift im ganzen Panel und
     erbten zusaetzlich die Zeilenhoehe des Fliesstextes (1,65). Daraus wurden
     70px je Eintrag und 350px allein fuer die fuenf Punkte. Jetzt 20px mit
     eigener Zeilenhoehe. Die Mindesthoehe von 56px bleibt bestehen und
     bestimmt das Ergebnis, die Trefferflaeche wird also nicht kleiner. */
  .mobile-menu a { font-size: 1.25rem; line-height: 1.2; padding: .8rem .25rem; }

  /* Anrufleiste: die Knoepfe bleiben bei 46px, kleiner will ich sie bei
     Menschen ab siebzig nicht machen. Die gewuenschte Hoehe kommt deshalb aus
     dem Polster der Leiste, nicht aus der Trefferflaeche. */
  .stickybar { padding: .35rem var(--pad-page) calc(.35rem + env(safe-area-inset-bottom, 0px)); }
  .stickybar .btn { font-weight: 500; }
  /* Platz, den der Seitenfuss fuer die Leiste freihaelt, an die neue Hoehe
     angepasst: 1px Rahmen plus 5,6 plus 46 plus 5,6 ergibt 58,2px. */
  :root { --stickybar-h: 60px; }

  /* Die Ueberschrift war mit 38,2px bei Zeilenhoehe 1,05 der einzige echte
     Ausreisser der Skala und lief auf zwei Seiten in einen fast fugenlosen
     Block. Diese Kurve trifft bei 768px genau den bisherigen Wert, am Umbruch
     springt also nichts, und wird nur zu kleinen Geraeten hin ruhiger. */
  :root { --fs-h1: clamp(2.125rem, 0.9rem + 5.25vw, 4rem); }
  h1 { line-height: 1.15; }

  /* Zwischenueberschriften standen im schwersten Schnitt 800 und sprangen ohne
     Zwischenstufe auf 600 bei h3. 700 liegt im eingebundenen Bereich der
     Hausschrift (600 bis 800) und nimmt die Wucht auf dem Handy heraus. */
  h2 { font-weight: 700; line-height: 1.2; }

  /* Die Augenbraue war mit 13,2px die kleinste inhaltstragende Schrift der
     Seite und steht ausgerechnet als erste Zeile ueber der Ueberschrift.
     Runde 2: die Hausgroesse selbst wurde auf mindestens 15 Pixel angehoben
     (--fs-eyebrow ganz oben). Diese Zeile stand mit 14 Pixeln dagegen und hat
     die Anhebung auf dem Handy wieder aufgehoben. Sie entfaellt deshalb.
     Auf der Startseite traegt die Vorzeile zwei der drei Aussagen, die der
     Kunde im ersten Blick sehen will. */

  /* Die Fragezeilen im Akkordeon sind in der Ueberschriftenschrift gesetzt,
     erbten aber die Zeilenhoehe des Fliesstextes. Zweizeilige Fragen wurden
     dadurch 91px hoch. Die Mindesthoehe von 48px bleibt unberuehrt. */
  .accordion summary { line-height: 1.3; }

  /* Abschnittsueberschriften auf der Kontaktseite waren mit 18,7px nur 0,6px
     groesser als der Fliesstext und lasen sich nicht mehr als Ueberschrift. */
  .info-block h2 { font-size: 1.25rem; }

  /* Die acht Sprungmarken der Leistungsseite standen bei 375px in sechs Zeilen
     und nahmen 380px ein, also 47 Prozent des ersten Bildschirms. Sie wirkten
     dadurch wie eine zweite Knopfreihe, bevor ueberhaupt Inhalt kam. Kompakter
     gesetzt passen zwei je Zeile. Die Mindesthoehe von 44px kommt aus
     .chip--link und bleibt unberuehrt, die Trefferflaeche wird also nicht
     kleiner, nur schmaler. */
  .chip-nav .chip--link { font-size: 1.0625rem; padding-inline: .75rem; }

  /* Zwei Bedienelemente lagen unter der Beruehrflaeche, die diese Zielgruppe
     braucht: die Marke im Kopf (36px) und freistehende Handlungslinks (30px).
     Beide bekommen 44px, ohne dass sich ihr Aussehen aendert. */
  .brand { min-height: 44px; min-width: 44px; }
  .textlink { min-height: 44px; }
}

/* ---------- 26. Druck ---------------------------------------------------- */

/* Kleines rundes Bild neben den Kontaktdaten auf der Kontaktseite. */
.wer-ruft-an { display: flex; align-items: center; gap: 1.1rem; }
.wer-ruft-an img {
  flex: none;
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
}
.wer-ruft-an p { margin: 0; font-size: var(--fs-small); }
.wer-ruft-an b { display: block; color: var(--navy-700); }

/* Runde 2, Punkt 15: einzeln stehende Links in den Kontaktbloecken waren nur
   21 Pixel hoch. Der Innenabstand hebt sie ueber die 24 Pixel von WCAG 2.2 AA,
   ohne die Schrift zu vergroessern. */
.info-block > p > a[href^="mailto:"] {
  display: inline-block;
  padding-block: .3rem;
}

/* ---------- 24b. WhatsApp als dritter Kontaktweg -------------------------

   Punkt 2 der Arbeitsanweisung legt genau zwei Handlungswege fest: den
   Termin als primaeren, den Anruf als sekundaeren. WhatsApp ist keiner von
   beiden und bekommt deshalb weder die Petrolflaeche des primaeren noch die
   blaue Kante des sekundaeren, sondern eine eigene, ruhige Fassung.

   Die Hausfarbe von WhatsApp (#25D366) steht nur mit 1,98:1 gegen Weiss und
   taugt weder als Rand noch als Schrift. Genommen wird deshalb das dunklere
   #128C7E aus demselben Farbsatz: 4,14:1 gegen Weiss, damit ueber den 3:1
   fuer Raender und Symbole. Die Beschriftung bleibt im Navy der Website und
   steht damit bei 10,4:1.
   ------------------------------------------------------------------------ */

.wa-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .7rem 1.4rem;
  margin-top: .25rem;
  border: 2px solid #128C7E;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy-900);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.wa-knopf svg { flex: none; width: 22px; height: 22px; color: #128C7E; }
.wa-knopf:hover { background: #128C7E; color: var(--white); transform: translateY(-2px); }
.wa-knopf:hover svg { color: var(--white); }
.wa-knopf:active { transform: translateY(0); }

.wa-hinweis {
  margin-top: .6rem;
  font-size: var(--fs-small);
  color: var(--ink-800);
}

@media (max-width: 767.98px) {
  .wa-knopf { width: 100%; min-height: 56px; }
}

/* Verweise in einem Adressblock (Impressum, Datenschutz) standen als reine
   Textzeilen mit 21 Pixeln Hoehe und lagen damit unter den 24 Pixeln aus
   WCAG 2.2 AA. Derselbe Innenabstand wie bei den uebrigen Kontaktangaben. */
address a {
  display: inline-block;
  padding-block: .3rem;
}
/* Die Zeilen im Adressblock sind mit <br> getrennt. Durch den Innenabstand
   stiessen zwei untereinander stehende Verweise direkt aneinander, gemessen
   0 Pixel zwischen E-Mail und WhatsApp. Etwas mehr Zeilenhoehe schafft den
   geforderten Abstand zwischen anklickbaren Elementen. */
address { line-height: 2; }

/* ---------- 25b. Dichte auf dem Handy (Runde 2, Punkt 4) -----------------

   Der Kunde will die mobile Gesamtlaenge um 15 bis 20 Prozent kuerzen, die
   Seite aber gleichzeitig fuer aeltere Patienten gut lesbar halten. Beides
   geht nur ueber die Abstaende, nicht ueber Schriftgroesse oder Zeilenhoehe.
   Schriftgroesse bleibt deshalb unveraendert, die Zeilenhoehe sinkt nur von
   1,65 auf 1,58 und damit nicht unter den Wert, der fuer laengere Texte
   empfohlen wird. Alles Weitere sind Aussenabstaende.
   Ab 768 Pixeln gilt wieder der alte Rhythmus.
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
  body { line-height: 1.58; }
  p { margin-bottom: .85rem; }
  .plus-list li { margin-bottom: .7rem; }
  .lead { margin-bottom: .9rem; }

  /* Abschnittskoepfe und Knopfreihen */
  .btn-row { gap: .75rem; margin-bottom: 1.1rem; }
  .hero__sub { margin-bottom: 1.35rem; }

  /* Die drei Schritte: der Kreis darf kleiner sein, die Trefferflaeche
     haengt nicht an ihm. */
  .step__nr { width: 46px; height: 46px; font-size: 1.25rem; margin-bottom: .6rem; }

  /* Leistungsseite: Bloecke und ihre beiden Faktenlisten enger stellen. */
  .service-block { padding-block: 2rem; }
  .service-facts { gap: 1rem; margin-block: 1.1rem; }

  /* Inhaltsbilder nehmen auf dem Handy sonst die volle Spaltenbreite und
     kosten je Bild rund 240 Pixel Hoehe. */
  .service-block .media--3x2,
  .photo-row .media--3x2 { max-width: 78%; margin-inline: auto; }

  /* Karten etwas enger, ohne die Antippflaeche anzutasten. */
  .card { padding: 1.25rem; }
  .kacheln { gap: .5rem; }
  .kachel { min-height: 60px; padding-block: .75rem; }

  /* FAQ: zwanzig Fragen mal ein paar Pixel summieren sich. Die Trefferflaeche
     bleibt ueber 48 Pixel, nur die Luft darum wird knapper. */
  .accordion summary { padding-block: .8rem; }
  .accordion__body { padding: 0 2rem 1.1rem 0; }
  .faq-group { margin-bottom: 2rem; }

  /* Kleines rundes Bild neben den Kontaktdaten. */
  .wer-ruft-an { display: flex; align-items: center; gap: 1rem; }
}

/* Der Satz fasst alle drei Schritte zusammen. Er braucht sichtbaren Abstand
   nach oben, sonst liest er sich auf dem Handy als Teil des dritten. */
.schritte__schluss { margin-top: clamp(1.25rem, 3vw, 2rem); }

/* ---------- 26. Hilfsklassen statt style-Attributen ---------------------

   Die Content-Security-Policy erlaubt unter style-src nur 'self'. Ein
   style-Attribut im Quelltext wird vom Browser deshalb verworfen, und zwar
   still: die Seite sieht einfach anders aus als gedacht, ohne Fehlermeldung.
   Diese Klassen ersetzen die letzten dreizehn solcher Attribute.
   Wer neue Abstaende braucht, nimmt eine Klasse, kein style-Attribut.
   Geprueft von tools/csp-pruefung.py.
   ------------------------------------------------------------------------ */

.lead--mittig { margin-inline: auto; }
.textblock { max-width: 44rem; }
.accordion--schmal { max-width: 52rem; }
.abstand-oben { margin-top: 1.5rem; }
.abstand-oben-klein { margin-top: 1rem; }
.media--abstand-unten { margin-bottom: 1.5rem; }
.plus-list--ohne-einzug { padding-left: 0; }

/* ---------- 27. Einwilligung fuer externe Inhalte ------------------------
   Das Banner ist bewusst kein Sperrbildschirm. Es sitzt unten, die Seite
   bleibt darueber lesbar und bedienbar. Ablehnen und Zustimmen sind gleich
   gross, gleich weit vorn und gleich gut zu treffen: eine Zustimmung, die
   durch Gestaltung erzwungen wird, ist keine.
   ------------------------------------------------------------------------ */

.einwilligung {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 250;                      /* ueber dem Menue (200), unter dem
                                        Sprunglink (300) */
  padding: var(--pad-page);
  padding-block-start: 1.25rem;
  background: var(--white);
  border-block-start: 3px solid var(--blue-600);
  box-shadow: 0 -8px 40px -12px rgba(20, 64, 107, .35);
}

.einwilligung__kasten {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: .9rem;
}

.einwilligung__titel {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--navy-700);
}

.einwilligung__text { margin: 0; }
.einwilligung__text p {
  margin: 0 0 .5rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-800);
}
.einwilligung__text p:last-child { margin-bottom: 0; }

.einwilligung__liste {
  margin: 0 0 .5rem;
  padding-left: 1.2rem;
  font-size: var(--fs-small);
  color: var(--ink-800);
}

.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Der Ablehnen-Knopf hat dieselbe Groesse und dieselbe Schrift wie der
   Zustimmen-Knopf. Unterschiedlich ist nur die Farbe, damit beide
   auseinanderzuhalten sind. Gemessen: Schrift 5,29:1 gegen Weiss, Rahmen
   4,86:1. Der Zustimmen-Knopf kommt auf 5,47:1. Keiner der beiden ist
   unauffaelliger gestaltet als der andere. */
.btn--ablehnen {
  background: var(--white);
  border-color: var(--blue-600);
  color: var(--blue-700);
}
.btn--ablehnen:hover { background: var(--ice-50); color: var(--blue-800); }

.einwilligung__mehr,
.einwilligung-dialog__widerruf {
  min-height: 44px;
  padding: .5rem .25rem;
  border: 0;
  background: none;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.einwilligung__mehr:hover,
.einwilligung-dialog__widerruf:hover { color: var(--navy-700); }

.einwilligung__fuss {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-800);
}
.einwilligung__fuss a {
  display: inline-block;
  padding-block: .3rem;              /* 24 Pixel Trefferhoehe, WCAG 2.2 AA */
  color: var(--blue-700);
}

/* Solange das Banner steht, wuerde die feste Anrufleiste auf dem Handy
   davor liegen und beides waere halb verdeckt. Sie kommt sofort zurueck,
   sobald die Entscheidung gefallen ist, und ist nur einen Tipp entfernt. */
body.einwilligung-offen .stickybar { display: none; }

/* Auf flachen Bildschirmen wuerde der Hinweis sonst die ganze Seite
   verdecken. Auf der Vorschau gemessen: 575 von 568 Pixeln auf einem
   320er-Telefon, 414 von 360 quer gehalten. Ein Hinweis, der alles
   zudeckt, draengt zur Zustimmung und gilt als unzulaessige Gestaltung. */
@media (max-height: 640px) {
  .einwilligung { padding-block: .8rem; }
  .einwilligung__kasten { gap: .55rem; }
  .einwilligung__titel { font-size: 1.125rem; }
  /* Sicherheitsnetz fuer den Fall, dass spaeter mehrere Dienste eingebunden
     werden und die Liste laenger wird: dann scrollt der Text, die Knoepfe
     bleiben sichtbar. */
  .einwilligung__text { max-height: 40vh; overflow-y: auto; }
}

/* Zweispaltig, sobald genug Breite da ist. Die zweite Bedingung fasst das
   quer gehaltene Telefon: dort ist Breite reichlich und Hoehe knapp, die
   Knoepfe gehoeren dann neben den Text und nicht darunter. */
@media (min-width: 900px), (min-width: 600px) and (max-height: 520px) {
  .einwilligung__kasten {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 2.5rem;
  }
  .einwilligung__titel { grid-column: 1; }
  .einwilligung__text { grid-column: 1; grid-row: 2; }
  .einwilligung__fuss { grid-column: 1; grid-row: 3; }
  .einwilligung__knoepfe {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: stretch;
  }
  .einwilligung__knoepfe .btn { width: 100%; }
}

/* ---- Einstellungsdialog ---- */

.einwilligung-dialog {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-page);
  background: rgba(14, 42, 69, .6);
}

.einwilligung-dialog__kasten {
  position: relative;
  width: min(44rem, 100%);
  max-height: min(85vh, 48rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card-hover);
}
.einwilligung-dialog__kasten:focus { outline: none; }
.einwilligung-dialog__kasten > h2 {
  margin: 0 2.5rem .5rem 0;
  font-size: var(--fs-h3);
  color: var(--navy-700);
}

.einwilligung-gruppe {
  padding-block: 1.1rem;
  border-block-start: 1px solid var(--rand-kontrast);
}
.einwilligung-gruppe h3 {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--navy-700);
}
.einwilligung-gruppe p {
  margin: .4rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-800);
}
.einwilligung-gruppe__klein { color: #4A5C6E; }

.einwilligung-gruppe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.einwilligung-gruppe__fest {
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--cta-100);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--cta-700);
}

.einwilligung-schalter {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--blue-700);
  cursor: pointer;
}
.einwilligung-schalter input {
  width: 24px;
  height: 24px;
  accent-color: var(--cta-600);
  cursor: pointer;
}

.einwilligung-name { white-space: nowrap; font-weight: 600; }

.einwilligung-dialog__fuss {
  margin-block-start: 1.25rem;
  font-size: var(--fs-small);
}
.einwilligung-dialog__fuss a {
  display: inline-block;
  padding-block: .3rem;
  color: var(--blue-700);
}

.einwilligung-dialog__stand {
  margin: 1.1rem 0 0;
  font-size: var(--fs-small);
  color: #4A5C6E;
}

.einwilligung-dialog__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 1.5rem;
}

.einwilligung-dialog__widerruf { margin-block-start: .5rem; }

.einwilligung-dialog__zu {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy-700);
  cursor: pointer;
}
.einwilligung-dialog__zu:hover { background: var(--ice-50); }

body.einwilligung-dialog-offen { overflow: hidden; }

/* ---- Platzhalter anstelle eines fremden Inhalts ---- */

.pm-platzhalter {
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 2px dashed var(--rand-kontrast);
  border-radius: var(--radius-card);
  background: var(--ice-50);
  text-align: center;
}
.pm-platzhalter__titel {
  margin: 0 0 .5rem;
  font-size: var(--fs-h3);
  color: var(--navy-700);
}
.pm-platzhalter p {
  margin: 0 auto .75rem;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-800);
}
.pm-platzhalter__klein { color: #4A5C6E; }
.pm-platzhalter__fuss { margin-block-start: .9rem; }
.pm-platzhalter__fuss a {
  display: inline-block;
  padding-block: .3rem;
  color: var(--blue-700);
}

@media print {
  .site-header, .stickybar, .mobile-menu, .cta-band, .site-footer nav,
  /* Reine Flaechenbilder kosten im Druck nur Farbe und bringen nichts. */
  .form-card, .skip-link, .einwilligung, .einwilligung-dialog,
  .hero__bild, .section__schwung { display: none !important; }
  .hero::before { display: none !important; }
  .hero { background: none !important; }
  .fakten { background: none !important; border-block-color: #999 !important; }
  body { padding: 0; font-size: 12pt; color: #000; background: #fff; }
  .container { max-width: none; padding: 0; }
  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
  .contact-info__phone { font-size: 24pt; }
  .section, .hero { padding-block: 1rem; }
}