/* ==========================================================================
   style.css · Physiotherapie Alexandra Schade, Kirchzarten
   Verbindung aus dem bisherigen Auftritt der Praxis (Raleway, Dunkelgrün,
   grünes Band auf den Unterseiten, Bild und Text im Wechsel) und den Bauteilen
   des Entwurfs vom Juli 2026 (Einstieg mit Praxisfoto, Karten mit weichem
   Schatten, Kontaktreihe mit goldenen Symbolen); seit 16.10.2026 Leistungsüberblick
   mit zwei Gruppen, darunter Praxisbilder, BEMER und Osteopathie kurz.
   Technik aus dem Grundgerüst des Skills website-builder (Regeln T4 bis T27).

   Inhalt
    1  Tokens und Schrift
    2  Reset und Basis
    3  Typografie und Hilfsklassen
    4  Layout
    5  Kopf und Navigation
    6  Handy-Menü
    7  Knöpfe und Textlinks
    8  Einstieg der Startseite und Praxisfilm
    9  Grünes Band und Brotkrumen (Unterseiten)
   10  Karten und Symbolkreise
   11  Praxis: Einleitung, Räume, Detailreihe, Anfahrt
   12  Bild und Text im Wechsel
   13  Leistungen: Überblick, Liste, BEMER, Osteopathie
   14  Patientenstimmen
   15  Über mich, Eindrücke
   16  Kontakt und Formular
   17  Anfahrt auf der Kirchzarten-Seite und Grafik
   18  Häufige Fragen
   19  Abschlussband
   20  Fuß
   21  Cookie-Hinweis und Meldungen
   22  Rechtsseiten und 404
   23  Breiten ab 40, 48, 52, 64 rem
   24  Rückfälle: reduzierte Bewegung, ohne Skript
   25  Druck
   ========================================================================== */

/* 1 · Tokens und Schrift ------------------------------------------------- */
:root {
  color-scheme: light;
  --gruen: #255c3c;              /* Markenfarbe der Praxis */
  --gruen-dunkel: #1b4530;
  --gruen-hauch: #eef3ef;        /* Hover- und Markierungsfläche */
  --gruen-zart: rgba(37, 92, 60, .1);   /* Symbolkreise, Jahreszahlen, Schwerpunkte */
  --gold: #de9a29;               /* Logofarbe: Linien, Punkte und Ziersymbole, nie Text auf Weiß */
  --text: #1f2a24;
  --text-gedaempft: #4d5a52;
  --flaeche: #ffffff;
  --flaeche-hauch: #f2f6f2;      /* getönte Abschnitte */
  --flaeche-grau: #f3f3f1;       /* Fuß */
  --linie: #dfe3df;
  --linie-karte: #e2eae4;
  --fehler: #b3261e;
  --text-auf-gruen: #ffffff;
  --text-auf-gruen-gedaempft: #e3ece6;

  --schrift: "Raleway", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --radius-sm: .625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.75rem;
  --radius-pill: 9999px;
  --schatten-karte: 0 6px 24px rgba(28, 72, 47, .1);
  --schatten-karte-hover: 0 12px 32px rgba(28, 72, 47, .16);
  --schatten-klein: 0 8px 18px -12px rgba(20, 35, 27, .55);
  --schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
  --schatten-lg: 0 24px 60px -20px rgba(0, 0, 0, .35);

  --container: 72rem;
  --lesebreite: 40rem;
  --abstand-abschnitt: clamp(2.75rem, 5.5vw, 4.5rem);
  --abstand-block: clamp(1.75rem, 4vw, 2.5rem);
  --dauer: .2s;
  --kurve: cubic-bezier(.2, .7, .2, 1);

  /* Kopf: zwei Tokens (T12) */
  --header-bar-h: 4.5rem;
  --header-h: var(--header-bar-h);

  /* z-Skala (T13): Hinweis < Menü < Kopf < Meldungen */
  --z-cookie: 120;
  --z-nav-mobile: 130;
  --z-header: 140;
  --z-toast: 210;
}

/* Raleway, SIL Open Font License, lokal ausgeliefert (T26): nur die genutzten Schnitte */
@font-face { font-family: "Raleway"; src: url("assets/fonts/raleway-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("assets/fonts/raleway-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("assets/fonts/raleway-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* 2 · Reset und Basis ---------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + .75rem);   /* kein scroll-margin-top zusätzlich (T12) */
}
html.smooth-scroll { scroll-behavior: smooth; }        /* setzt script.js erst nach dem ersten Sprung (T21) */
body {
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--flaeche);
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gruen); text-underline-offset: .18em; }
a:hover { color: var(--gruen-dunkel); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: .25rem; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }

/* 3 · Typografie und Hilfsklassen ---------------------------------------- */
h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-weight: 700; }   /* Safari unter 17 trennt nur mit Präfix (T31) */
h2 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); margin-bottom: .9rem; }
h3 { font-size: 1.2rem; margin-bottom: .5rem; }
p, li, dd, address { overflow-wrap: anywhere; }
p + p { margin-top: .9rem; }
.lead { font-size: 1.16rem; text-wrap: pretty; }
a[href^="tel:"] { font-variant-numeric: lining-nums tabular-nums; }
.prose { max-width: var(--lesebreite); }
.prose p + h3 { margin-top: 1.4rem; }
.sprunglink { position: absolute; left: 1rem; top: -6rem; z-index: var(--z-toast); background: var(--flaeche); padding: .6rem 1rem; border-radius: var(--radius-md); box-shadow: var(--schatten); }
.sprunglink:focus { top: 1rem; }
.symbol { width: 1.25rem; height: 1.25rem; flex: none; }

/* 4 · Layout ------------------------------------------------------------- */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--abstand-abschnitt); }
.section--hauch { background: var(--flaeche-hauch); }
.section--erster { padding-top: clamp(1.75rem, 4vw, 3rem); }
.section-titel { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* 5 · Kopf und Navigation ------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow var(--dauer) var(--kurve);
}
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .25); }
.header-inner { height: var(--header-bar-h); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.marke { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--gruen); text-decoration: none; min-width: 0; }
.marke img { width: 2.75rem; height: 2.75rem; flex: none; }
.marke-text { display: grid; line-height: 1.15; text-transform: uppercase; letter-spacing: .06em; min-width: 0; }
/* Der Name bleibt ganz. Notbremse nur, damit ein zu langer Name nie unter die Knöpfe läuft: höchstens zwei Zeilen,
   dann „…“. Greift sie, meldet layout-check einen FEHLER (T12). 2 px Polster links, damit der Beschnitt
   den Fuß des ersten Buchstabens nicht abschneidet; der Text steht unverändert */
.marke-name { font-weight: 700; font-size: .86rem; color: var(--gruen); min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; margin-inline-start: -2px; padding-inline-start: 2px; }
.marke-zusatz { font-size: .74rem; color: var(--text-gedaempft); }
.nav-haupt { display: none; }
.nav-haupt > ul { display: flex; align-items: center; gap: .1rem; list-style: none; }
.nav-haupt a {
  display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: .5rem .6rem;
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.nav-haupt a:hover { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.nav-haupt a[aria-current="page"] { background: var(--gruen); color: #fff; }
.kopf-aktionen { display: flex; align-items: center; gap: .5rem; flex: none; }
.burger { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--linie); background: var(--flaeche); color: var(--gruen); }
/* Drei Linien werden beim Öffnen zum X und beim Schließen zurück (G4); nur transform und opacity, die Dauer folgt
   --dauer, bei reduzierter Bewegung greift die Rückfallregel unten */
.burger-linien { position: relative; display: block; width: 1.25rem; height: 1rem; }
.burger-linien > span {
  position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .26s var(--kurve), opacity .18s var(--kurve);
}
.burger-linien > span:nth-child(1) { transform: translateY(-6px); }
.burger-linien > span:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded="true"] .burger-linien > span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-linien > span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger[aria-expanded="true"] .burger-linien > span:nth-child(3) { transform: rotate(-45deg); }

/* 6 · Handy-Menü: Karte auf abgedunkeltem Grund (T13) -------------------- */
.nav-mobile {
  position: fixed; inset: 0; z-index: var(--z-nav-mobile);
  display: flex; justify-content: flex-start; flex-direction: column;
  background: rgba(16, 22, 18, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: calc(var(--header-bar-h) + .5rem) 1rem calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dauer) var(--kurve), visibility 0s linear var(--dauer);
}
.nav-mobile.is-open { opacity: 1; visibility: visible; transition: opacity var(--dauer) var(--kurve), visibility 0s; }
.nav-mobile-inner {
  margin: auto; width: 100%; max-width: 24rem;
  background: var(--flaeche); border-radius: var(--radius-xl); box-shadow: var(--schatten-lg);
  padding: 1.1rem 1rem 1.3rem;
  transform: translateY(8px); transition: transform var(--dauer) var(--kurve);
}
.nav-mobile.is-open .nav-mobile-inner { transform: none; }
.nav-mobile ul { list-style: none; }
.nav-mobile ul a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: .6rem .8rem; border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.nav-mobile ul a[aria-current="page"] { color: var(--gruen); background: var(--gruen-hauch); }
.nav-mobile-aktionen { display: grid; gap: .6rem; margin-top: 1rem; }
.nav-mobile-aktionen .btn[aria-current="page"] { background: var(--gruen-hauch); color: var(--gruen-dunkel); }   /* Lage und Anfahrt auf der eigenen Seite */
body.menue-offen { overflow: hidden; }

/* 7 · Knöpfe und Textlinks ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.4rem; border-radius: var(--radius-pill);
  font-weight: 700; text-decoration: none; line-height: 1.2;
  border: 2px solid transparent;
  transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.btn:active { transform: translateY(1px); }
.btn-primaer { background: var(--gruen); color: #fff; box-shadow: 0 4px 14px rgba(37, 92, 60, .3); }
.btn-primaer:hover { background: var(--gruen-dunkel); color: #fff; }
.btn-sekundaer { background: transparent; color: var(--gruen); border-color: var(--gruen); }
.btn-sekundaer:hover { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.btn-hell { background: #fff; color: var(--gruen); }
.btn-hell:hover { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.btn-rand-hell { background: transparent; color: #fff; border-color: #fff; }
.btn-rand-hell:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn .symbol { width: 1.1rem; height: 1.1rem; }
.kopf-aktionen .btn { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; box-shadow: none; }
/* Handy zuerst: Anruf-Knopf nur mit Hörer (48 × 48 px), die Beschriftung bleibt für Vorleseprogramme
   und erscheint ab 28 rem und ohne Skript (T12). Nur für Vorleseprogramme sichtbar, ohne !important, damit es sich aufheben lässt. */
.kopf-aktionen .kopf-anruf { width: 48px; height: 48px; padding: 0; }
.kopf-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.btn-row--mitte { justify-content: center; }
.textlink { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 700; text-decoration: none; }
.textlink:hover { text-decoration: underline; }
.textlink .symbol { width: 1rem; height: 1rem; }
.link-stapel { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: .6rem; }

/* 8 · Einstieg der Startseite und Praxisfilm ------------------------------ */
.hero {
  padding: calc(var(--header-h) + clamp(1.75rem, 5vw, 3.25rem)) 0 clamp(2.25rem, 6vw, 4.25rem);
  background: linear-gradient(180deg, var(--flaeche-hauch) 0%, var(--flaeche) 100%);
}
.hero-raster { display: grid; gap: 2rem; align-items: center; }
.hero-knoepfe { display: grid; gap: .75rem; margin-top: 1.6rem; }
.hero-raster > * { min-width: 0; }
.hero h1 { font-size: clamp(1.95rem, 5.4vw, 2.85rem); line-height: 1.15; -webkit-hyphens: manual; hyphens: manual; }
.hero-leitsatz { margin-top: .9rem; line-height: 1.35; font-size: clamp(1.15rem, 2.4vw, 1.3rem); font-weight: 600; color: var(--gruen); }
.hero h1 .zeile { display: block; }
/* Logo und Praxisname statt des Hinweises „nur für private Krankenkassen …“; am Handy mit Praxisfoto,
   weil der Einstieg dort sonst kein Bild zeigt (Kundin und Leonard, 17.10.2026). Ab 48 rem zeigt die Detailreihe das Motiv. */
.hero-marke { max-width: 34rem; margin-top: 1rem; overflow: hidden; background: var(--flaeche); border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); }
.hero-marke-bild { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.hero-marke-name { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; }
.hero-marke-logo { width: 3.5rem; height: 3.5rem; flex: none; }
.hero-marke-text { display: grid; min-width: 0; line-height: 1.2; }
.hero-marke-zeile1 { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-gedaempft); }
.hero-marke-zeile2 { font-size: 1.3rem; font-weight: 700; color: var(--gruen); }
/* Bewertungskarte unter dem Film, linksbündig und nur so breit wie ihr Inhalt (Leonard, 24.09.2026) */
.bewertung {
  display: grid; justify-items: start; gap: .1rem; width: fit-content; max-width: 100%; margin: 1rem 0 0;
  padding: .7rem 1.1rem .1rem; background: var(--flaeche); border: 1px solid var(--linie-karte);
  border-radius: var(--radius-md); box-shadow: var(--schatten-karte);
}
.bewertung-kopf { line-height: 1.4; }
.bewertung-links .textlink { min-height: 34px; }
.bewertung-adresse {
  display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 40px; margin-top: .2rem;
  border-top: 1px solid var(--linie-karte); font-weight: 600; font-size: .98rem; color: var(--text); text-decoration: none;
}
.bewertung-adresse:hover { color: var(--gruen-dunkel); text-decoration: underline; }
.bewertung-adresse .symbol { width: 1.1rem; height: 1.1rem; color: var(--gruen); }
.bewertung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.bewertung-kopf strong { font-size: 1.1rem; }
.google-g { width: 1.15rem; height: 1.15rem; flex: none; }
.sterne { display: inline-flex; gap: .1rem; color: var(--gold); }
.sterne svg { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.bewertung-anzahl { font-size: .95rem; color: var(--text-gedaempft); }
.bewertung-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.film {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; max-width: 40rem; margin-inline: auto;
  border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); background: #13201a;
  color: #fff; text-decoration: none;
}
.film img { width: 100%; height: 100%; object-fit: cover; }
/* Abspielknopf als weißer Ring mit weißem Dreieck, innen durchsichtig (Leonard, 24.09.2026);
   ein weicher Schatten hält Ring und Dreieck auch auf hellen Bildstellen sichtbar */
.film-kreis {
  position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%; border: 3px solid #fff; background: transparent; color: #fff;
  display: grid; place-items: center; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
  transition: transform var(--dauer) var(--kurve);
}
.film-kreis .symbol { width: 1.7rem; height: 1.7rem; margin-left: .25rem; fill: currentColor; }
.film:hover .film-kreis { transform: scale(1.06); background: rgba(255, 255, 255, .15); }
.film-hinweis {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .75rem; text-align: center;
  background: rgba(255, 255, 255, .94); color: var(--text); font-size: .88rem; font-weight: 700;
}
.video-player { width: 100%; max-width: 40rem; height: auto; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); background: #000; }

/* 9 · Grünes Band und Brotkrumen (Unterseiten) ---------------------------- */
.band {
  background: var(--gruen); color: var(--text-auf-gruen); text-align: center;
  padding: calc(var(--header-h) + 1.25rem) 0 1.3rem;
  border-bottom: 3px solid var(--gold);            /* die Goldlinie aus dem Logo, einmal je Seite */
}
.band h1 { font-size: clamp(1.15rem, 2.5vw, 1.6rem); letter-spacing: .07em; text-transform: uppercase; color: var(--text-auf-gruen); }
.band p { margin-top: .35rem; color: var(--text-auf-gruen-gedaempft); font-size: 1rem; }
.band--seite { text-align: left; padding-bottom: 1.6rem; }
.band--seite h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); letter-spacing: 0; text-transform: none; }
.brotkrumen { margin-bottom: .5rem; font-size: .92rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.brotkrumen li { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-auf-gruen-gedaempft); }
.brotkrumen li + li::before { content: "›"; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-auf-gruen); }
.brotkrumen a:hover { color: var(--text-auf-gruen); text-decoration-thickness: 2px; }

/* 10 · Karten und Symbolkreise -------------------------------------------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie-karte); border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); overflow: hidden; }
.karte-inhalt { padding: clamp(1.25rem, 3vw, 1.6rem); }
.karte-inhalt h3 { color: var(--gruen); margin-bottom: .6rem; }
.karte-inhalt p { font-size: 1rem; }
.rund-symbol { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--gruen-zart); color: var(--gruen); flex: none; }
.rund-symbol .symbol { width: 1.35rem; height: 1.35rem; }
.foto-karte { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); }

/* 11 · Praxis: Einleitung, Räume, Detailreihe, Anfahrt --------------------- */
.praxis-intro { display: grid; gap: 1.75rem; align-items: center; margin-bottom: var(--abstand-block); }
.praxis-intro > * { min-width: 0; }
.praxis-intro .foto-karte { max-width: min(32rem, 100%); margin-inline: auto; }
.person { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.person img { width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--flaeche-hauch); flex: none; }
.person p { display: grid; line-height: 1.35; }
.person strong { font-size: 1.05rem; }
.person p span { font-size: .92rem; color: var(--text-gedaempft); }
.raeume { display: grid; gap: 1.4rem; }
.raum { display: grid; }
.raum > * { min-width: 0; }
.raum img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }   /* einspaltig ohne height: 100 %, sonst streckt Safari das Bild über den Text (T30) */
.detail-band { display: none; }                      /* auf dem Handy ausgeblendet (Leonard, 24.09.2026) */
.detailreihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.detailreihe img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--schatten-klein); }
.anfahrt-leiste { display: grid; gap: 1rem; justify-items: start; margin-top: var(--abstand-block); padding: clamp(1.25rem, 3vw, 1.6rem); }
.anfahrt-leiste > * { min-width: 0; }
.anfahrt-leiste .rund-symbol { width: 3rem; height: 3rem; }
.anfahrt-leiste h3 { color: var(--gruen); margin-bottom: .3rem; }
.anfahrt-leiste p { font-size: 1rem; }

/* 12 · Bild und Text im Wechsel ------------------------------------------ */
.wechsel { display: grid; gap: 1.25rem 3rem; align-items: center; }
.wechsel > * { min-width: 0; }
.wechsel + .wechsel { margin-top: clamp(2.25rem, 5vw, 3.75rem); }
.foto { width: 100%; max-width: min(36rem, 100%); border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); margin-inline: auto; }
.foto--schmal { max-width: min(28rem, 100%); }
.foto--hoch { max-width: min(25rem, 100%); }

/* 13 · Leistungen: Überblick, Praxisbilder, BEMER und Osteopathie --------- */
/* Bild, Karte mit zwei Gruppen, Bild wie auf der bisherigen Website; BEMER und Selbstzahler-Hinweis klein (Leonard, 16.10.2026) */
.section-einleitung { max-width: var(--lesebreite); margin: calc(-1 * clamp(.5rem, 1.5vw, 1.25rem)) auto clamp(1.5rem, 3vw, 2.25rem); text-align: center; text-wrap: pretty; }
.leistungen-ueberblick { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.leistungen-ueberblick > * { min-width: 0; }
.leistungen-ueberblick .leistungen-liste { grid-column: 1 / -1; order: -1; }
.leistungen-ueberblick img { width: 100%; max-width: min(16rem, 100%); justify-self: center; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); }
.leistungen-liste { padding: clamp(1.4rem, 3vw, 1.9rem); }
.gruppen-titel { display: flex; align-items: center; gap: .7rem; color: var(--gruen); font-size: 1.2rem; margin-bottom: .35rem; }
.gruppen-text { color: var(--text-gedaempft); font-size: 1rem; margin-bottom: .9rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li { background: var(--flaeche); border: 1px solid var(--linie-karte); border-radius: var(--radius-pill); padding: .45rem 1.05rem; font-size: .98rem; font-weight: 600; overflow-wrap: normal; }
.chips + .gruppen-titel { margin-top: 1.6rem; }
.leistungen-hinweis { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linie-karte); font-size: .95rem; color: var(--text-gedaempft); }
.leistungen-hinweis .symbol { color: var(--gruen); margin-top: .15rem; }
/* Unter dem Überblick: links Bilder aus der Praxis, rechts BEMER und Osteopathie kurz mit Link (Leonard, 16.10.2026) */
.leistungen-mehr { display: grid; gap: 1rem; margin-top: var(--abstand-block); }
.leistungen-mehr > * { min-width: 0; }
.leistungen-mehr img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--schatten-karte); }
.leistungen-mehr img { object-position: 60% 50%; }
.zusatz-karte { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: clamp(1.3rem, 3vw, 1.75rem); }
.zusatz-karte p { font-size: 1rem; }
.zusatz-karte p + p { margin-top: .3rem; }
.zusatz-karte .textlink { margin-top: .35rem; }
.leistungen-fuss { justify-content: center; margin-top: 2rem; }

/* 14 · Patientenstimmen -------------------------------------------------- */
.stimmen { display: grid; gap: 1.25rem; max-width: 52rem; margin-inline: auto; }
.stimme { display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.4rem, 3.5vw, 2.1rem); }
.stimme blockquote { flex-grow: 1; }
.stimme-zeichen { display: block; width: 2rem; height: 2rem; margin-bottom: .6rem; color: rgba(37, 92, 60, .35); }
.stimme blockquote p { font-size: 1.02rem; }
.stimme figcaption { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; }
.stimme figcaption img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; flex: none; }
.stimme cite { display: block; font-style: normal; font-weight: 700; }
.stimme .rolle { display: block; font-size: .92rem; color: var(--text-gedaempft); }
.stimmen-hinweis { max-width: 52rem; margin: 1.25rem auto 0; font-size: .95rem; color: var(--text-gedaempft); text-align: center; }   /* § 5b Abs. 3 UWG (R8) */

/* 15 · Über mich, Eindrücke --------------------------------------------- */
.ueber-raster { display: grid; gap: 2rem; align-items: start; }
.ueber-raster > * { min-width: 0; }
.ueber-portraet { max-width: min(32rem, 100%); margin-inline: auto; }
.eindruecke-titel { text-align: center; margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem; font-size: 1.35rem; }
.eindruecke { columns: 2; column-gap: .75rem; }
.eindruecke img { width: 100%; margin-bottom: .75rem; border-radius: var(--radius-md); break-inside: avoid; }

/* 16 · Kontakt und Formular ---------------------------------------------- */
.kontakt-reihe { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .75rem; text-align: center; margin-bottom: var(--abstand-block); }
.kontakt-reihe > li { min-width: 0; }
.kontakt-punkt { display: block; height: 100%; padding: .75rem .5rem; border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
a.kontakt-punkt:hover { background: var(--gruen-hauch); color: var(--text); }
a.kontakt-punkt:hover strong { color: var(--gruen); }
.kontakt-punkt .symbol { display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto .55rem; color: var(--gold); }
.kontakt-punkt strong { display: block; font-size: 1.02rem; }
.kontakt-wert { display: block; font-size: .98rem; line-height: 1.5; overflow-wrap: anywhere; }
.kontakt-haupt { display: grid; gap: 1.4rem; align-items: start; }
.kontakt-haupt > * { min-width: 0; }
.formular-karte { padding: clamp(1.4rem, 3vw, 1.9rem); }
.formular-karte .person { margin: 0 0 1.25rem; }
.ort-karte { display: flex; flex-direction: column; }
.ort-karte > * { min-width: 0; }
.ort-karte .karte-inhalt { flex-grow: 1; background: var(--flaeche-hauch); }
.ort-karte .btn-row { margin-top: 1rem; }
.ort-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.formular { display: grid; gap: 1rem; margin-top: .5rem; }
.feld { display: grid; gap: .35rem; }
.feld label { font-weight: 600; }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 16px; min-height: 48px;
  padding: .7rem .9rem; border: 1px solid #7f8b84; border-radius: var(--radius-sm);
  background: var(--flaeche); color: var(--text);
}
.feld textarea { min-height: 112px; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--gruen); outline-offset: 1px; }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--fehler); }
.feld-fehler { color: var(--fehler); font-size: .95rem; }
.zustimmung { display: flex; gap: .75rem; align-items: flex-start; }
.zustimmung input { width: 24px; height: 24px; margin-top: .15rem; flex: none; accent-color: var(--gruen); }
.form-note { font-size: .95rem; color: var(--text-gedaempft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 17 · Anfahrt auf der Kirchzarten-Seite und Grafik (T16) ----------------- */
.anfahrt-karten { display: grid; gap: 1rem; }
.anfahrt-karte { padding: 1.5rem; }
.anfahrt-karte h3 { margin: .8rem 0 .4rem; }
.anfahrt-karte p { font-size: 1rem; }
.finden-karte { background: var(--flaeche-hauch); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.ort-liste { list-style: none; display: grid; gap: .85rem; margin-top: 1.25rem; }
.ort-liste li { display: flex; align-items: center; gap: .85rem; }
.ort-liste li > span:last-child { display: grid; line-height: 1.4; min-width: 0; }
.ort-liste strong { font-size: .95rem; }
.ort-liste a { display: inline-flex; align-items: center; min-height: 28px; font-weight: 600; }
.ort-liste .rund-symbol { background: var(--flaeche); }
.grafik { margin-top: 1.5rem; }
.grafik-flaeche { overflow-x: auto; }
.grafik figcaption { margin-top: .6rem; color: var(--text-gedaempft); font-size: .95rem; }
.nur-breit { display: none; }
.nur-schmal .grafik-flaeche svg { width: 100%; max-width: min(24rem, 100%); height: auto; margin-inline: auto; }

/* 18 · Häufige Fragen ---------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 52rem; margin-inline: auto; }
.faq-item { background: var(--flaeche); border: 1px solid var(--linie-karte); border-radius: var(--radius-md); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: 1rem 1.25rem; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--gruen); transition: transform var(--dauer) var(--kurve); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 1.25rem 1.25rem; }

/* 19 · Abschlussband (dunkles Band: jeder Text deklariert, T18) ---------- */
.abschluss { background: var(--gruen); color: var(--text-auf-gruen); text-align: center; padding-block: var(--abstand-abschnitt); }
.abschluss h2, .abschluss p, .abschluss a:not(.btn) { color: var(--text-auf-gruen); }
.abschluss p { max-width: 36rem; margin-inline: auto; color: var(--text-auf-gruen-gedaempft); }
.abschluss .btn-hell { box-shadow: none; }

/* 20 · Fuß --------------------------------------------------------------- */
.site-footer { background: var(--flaeche-grau); border-top: 1px solid var(--linie); padding-block: 2.5rem 1.25rem; font-size: .98rem; }
.fuss-raster { display: grid; gap: 1.75rem; }
.fuss-raster > * { min-width: 0; }
.fuss-marke img { width: 9rem; border-radius: var(--radius-md); }
.fuss-marke p { margin-top: .75rem; color: var(--text-gedaempft); }
.fuss-titel { font-size: 1rem; color: var(--gruen); margin-bottom: .4rem; }
.site-footer address { font-style: normal; }
.site-footer ul { list-style: none; }
.site-footer a, .fuss-knopf { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.site-footer a:hover, .fuss-knopf:hover { text-decoration: underline; color: var(--gruen-dunkel); }
.fuss-unten { margin-top: 1.75rem; padding-top: .75rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 0 1.25rem; justify-content: space-between; align-items: center; font-size: .92rem; color: var(--text-gedaempft); }
.fuss-unten p + p { margin-top: 0; }
.footer-credit a { color: var(--text-gedaempft); }

/* 21 · Cookie-Hinweis und Meldungen (T14) -------------------------------- */
.cookie-banner {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(100% - 1.5rem, 56rem); z-index: var(--z-cookie);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-lg); box-shadow: var(--schatten-lg);
  padding: 1rem 1.15rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner { display: flex; flex-direction: column; gap: .75rem; }
.cookie-banner-copy { flex: 1 1 auto; min-width: 0; }
.cookie-banner-title { font-size: 1rem; margin-bottom: .2rem; }
.cookie-banner-text { font-size: .87rem; line-height: 1.5; color: var(--text-gedaempft); }
.cookie-banner-actions { display: flex; gap: .6rem; }
.cookie-banner-actions .btn { flex: 1 1 0; min-height: 44px; padding: .55rem 1rem; font-size: .95rem; box-shadow: none; }
.toasts { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: .5rem; width: min(100% - 2rem, 28rem); pointer-events: none; }
.toast { background: var(--gruen-dunkel); color: #fff; padding: .8rem 1rem; border-radius: var(--radius-md); box-shadow: var(--schatten-lg); }

/* 22 · Rechtsseiten und 404 ---------------------------------------------- */
.rechtsseite { padding-block: clamp(1.75rem, 4vw, 3rem) var(--abstand-abschnitt); }
.rechtsseite h2 { font-size: 1.35rem; margin-top: 2rem; }
.rechtsseite h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.rechtsseite ul { padding-left: 1.2rem; margin: .6rem 0; }
.rechtsseite li + li { margin-top: .3rem; }
.seite-404 { padding-top: calc(var(--header-h) + 3rem); padding-bottom: var(--abstand-abschnitt); min-height: 60vh; }
.seite-404 ul { list-style: none; margin-top: 1rem; }

/* 23 · Breiten ----------------------------------------------------------- */
@media (min-width: 28rem) {
  /* Anruf-Knopf mit Beschriftung: Name und Unterzeile einzeilig brauchen beschriftet 427 px, 28 rem (448 px) lässt 21 px Luft (T12) */
  .kopf-aktionen .kopf-anruf { width: auto; height: auto; padding: .5rem 1rem; }
  .kopf-knopf-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
}
@media (min-width: 40rem) {
  .hero-knoepfe { grid-template-columns: repeat(2, max-content); justify-content: start; }
  .cookie-banner-inner { flex-direction: row; align-items: center; }
  .cookie-banner-actions { flex-wrap: nowrap; flex: none; }
  .cookie-banner-actions .btn { flex: none; }
  .eindruecke { columns: 3; }
  .ort-karte { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; }
  .ort-karte img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 48rem) {
  /* Einstieg: Praxisfoto hinter heller Schicht (Entwurf Juli 2026); einspaltig gleichmäßig hell für den Text */
  .hero {
    background-image: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)), url("assets/hero-hintergrund.webp");
    background-size: cover;
    background-position: 55% 35%;
  }
  .detail-band { display: block; padding-top: clamp(1.25rem, 3vw, 2rem); }
  .hero-marke { width: fit-content; }
  .hero-marke-bild { display: none; }
  .praxis-intro { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .anfahrt-leiste { grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; }
  .leistungen-mehr { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; align-items: stretch; }
  /* Die Karte bestimmt die Zeilenhöhe, das Bild füllt sie (height 0 + min-height 100 %), damit ein Hochkantbild die Zeile nicht streckt */
  .leistungen-mehr img { grid-row: span 2; height: 0; min-height: 100%; aspect-ratio: auto; }   /* ein Bild über beide Karten (Leonard, 16.10.2026) */
  .zusatz-karte { min-height: 15rem; justify-content: center; }
  .wechsel { grid-template-columns: 1fr 1fr; }
  .wechsel--bild-rechts > .wechsel-bild { order: 2; }
  .wechsel--text-bild { grid-template-columns: 1.1fr .9fr; }
  .anfahrt-karten { grid-template-columns: repeat(3, 1fr); }
  .ueber-raster { grid-template-columns: 2fr 3fr; gap: 2.75rem; }
  .fuss-raster { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
@media (min-width: 52rem) {
  .nur-breit { display: block; }
  .nur-schmal { display: none; }
}
@media (min-width: 64rem) {
  .nav-haupt { display: block; }
  .burger { display: none; }
  .nav-mobile { display: none; }
  /* Einstieg höher; Foto links hinter dem Film sichtbar, rechts deckend für den Text (Leonard, 24.09.2026) */
  .hero {
    display: grid; align-content: center; min-height: min(50rem, 100vh); min-height: min(50rem, 100svh);   /* vh für Browser ohne svh (Chrome unter 108, Samsung unter 21) */
    background-image:
      linear-gradient(270deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .84) 42%, rgba(255, 255, 255, .42) 100%),
      url("assets/hero-hintergrund.webp");
  }
  /* Zwei Zeilen im Raster, Film und Bewertung links, Text und Knöpfe rechts (Leonard, 24.09.2026):
     Film und Überschrift beginnen oben bündig, Bewertungskarte und Knöpfe stehen in einer
     gemeinsamen Zeile und schließen oben und unten bündig ab. Im HTML bleibt der Text vorn. */
  .hero-raster { grid-template-columns: 1fr 1.4fr; column-gap: 2.75rem; row-gap: 1.25rem; align-items: start; }
  .hero-text, .hero-medien { display: contents; }
  /* Die Textspalte reicht um den Zeilenabstand nach unten bis an die Knöpfe; der Hinweis steht mit
     automatischen Abständen genau in der Mitte zwischen Leitsatz und Knöpfen (Leonard, 24.09.2026) */
  .hero-kopf { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; margin-bottom: -1.25rem; container-type: inline-size; }
  .hero-kopf .hero-marke { margin-block: auto; }
  .hero-marke-logo { width: 4.25rem; height: 4.25rem; }
  .hero h1 { text-box: trim-start cap alphabetic; font-size: min(2.75rem, 3.4vw); font-size: min(2.85rem, 6.6cqi); }   /* vw zuerst für Browser ohne cqi (Safari unter 16, ältere iPads): sonst passt die nicht umbrechende Zeile nicht in die Spalte (T31) */
  .hero h1 .zeile:first-child { white-space: nowrap; }       /* „Privatpraxis für Physiotherapie“ in einer Zeile */
  .hero-knoepfe { grid-column: 2; grid-row: 2; align-self: stretch; margin-top: 0; grid-auto-rows: 1fr; align-items: stretch; }
  .hero-medien .film { grid-column: 1; grid-row: 1; width: 100%; }
  .bewertung { grid-column: 1; grid-row: 2; align-self: stretch; justify-self: end; margin: 0; }   /* rechtsbündig unter dem Film */
  .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .stimmen-hinweis { max-width: none; }
  .raum { grid-template-columns: 5fr 6fr; }
  .raum:nth-child(even) img { order: 2; }
  .raum img { height: 100%; aspect-ratio: auto; }   /* zweispaltig: eine Zeile, das Bild füllt sie */
  .leistungen-ueberblick { grid-template-columns: 1fr 2fr 1fr; align-items: stretch; }
  .leistungen-ueberblick .leistungen-liste { grid-column: auto; order: 0; }
  .leistungen-ueberblick img { height: 100%; max-width: none; aspect-ratio: auto; }
  .kontakt-reihe { grid-template-columns: repeat(4, 1fr); }
  .kontakt-haupt { grid-template-columns: 1.5fr .8fr; align-items: stretch; }
  .ort-karte { display: flex; }
  .ort-karte img { height: auto; }
  .eindruecke { columns: 4; }
}
/* Schmale Handys (unter 24 rem): Cookie-Karte flacher wie in der Vorlage, Text unverändert. Knöpfe bleiben
   mindestens 44 px hoch und gleich breit; die Karte misst so bis 288 px höchstens etwa 180 px (T14) */
@media (max-width: 23.99rem) {
  .cookie-banner { padding: .75rem .9rem; }
  .cookie-banner-inner { gap: .5rem; }
  .cookie-banner-title { margin-bottom: .1rem; }
  .cookie-banner-text { line-height: 1.4; }
  .cookie-banner-actions { gap: .5rem; }
  .cookie-banner-actions .btn { padding: .25rem .5rem; font-size: .9rem; line-height: 1.15; }
}
/* Unterzeile nur, solange der Name einzeilig bleibt: neben dem Hörer-Knopf ab 355 px (gemessen 354,7 px) */
@media (max-width: 22.2rem) {
  .marke-zusatz { display: none; }
}
/* Sehr schmal (unter 19 rem, etwa 360 px bei 125 % Zoom): Logo, Abstände und Laufweite kleiner, damit der Name
   ganz bleibt, auch mit Mindestschrift 16 px ab 280 px (T12) */
@media (max-width: 19rem) {
  .header-inner { gap: .5rem; }
  .marke { gap: .4rem; }
  .marke img { width: 2rem; height: 2rem; }
  .marke-name { letter-spacing: .02em; }
}
/* Große Schrift auf schmalen Handys (unter 16 rem: Chrome-Schriftgröße „groß“ bis 319 px; bei normaler Schrift erst
   unter 256 px): Logo, Abstände, Name und Knopfpolster noch kleiner, damit der Name ganz bleibt (T12) und nichts
   seitlich scrollt (T11) */
@media (max-width: 15.99rem) {
  .header-inner, .kopf-aktionen { gap: .35rem; }
  .marke { gap: .25rem; }
  .marke img { width: 1.25rem; height: 1.25rem; }
  .marke-name { font-size: .8rem; }
  .btn-row .btn { padding-inline: .8rem; }
}
/* Sehr große Systemschrift (neuere Chrome-Fassungen auf Android setzen sie als Seitenzoom um; 200 % auf 412 px ergeben
   etwa 206 px): Seitenrand schmaler, Knopftext darf umbrechen, das Logo im Kopf weicht, damit der Name ganz bleibt und
   nichts seitlich scrollt (T11, T12, T31) */
@media (max-width: 13.5rem) {
  .container { width: min(100% - 1.25rem, var(--container)); }
  .marke img { display: none; }
  .btn { padding-inline: .75rem; text-align: center; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }   /* „OpenStreetMap“ ist breiter als die Karte */
  .kopf-aktionen .kopf-anruf { width: 44px; height: 44px; }
}

/* 24 · Rückfälle --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html, html.smooth-scroll { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
@media (scripting: none) {
  .burger, .nav-mobile, .nur-mit-skript { display: none !important; }
  .nav-haupt { display: block; }
  .nav-haupt > ul { flex-wrap: wrap; }
  .header-inner { height: auto; min-height: var(--header-bar-h); flex-wrap: wrap; padding-block: .5rem; }
  /* Der ausgeschriebene Kopf ist höher als --header-h und stünde fixiert über h1 und Sprungzielen: ohne Skript im Fluss (T8) */
  :root { --header-h: 0px; }
  .site-header { position: relative; }
  /* Ohne Skript steht das Menü offen im Kopf und der Anruf-Knopf in eigener Zeile: Platz für Hörer und Beschriftung (T8, T12) */
  .kopf-aktionen .kopf-anruf { width: auto; height: auto; padding: .5rem 1rem; }
  .kopf-knopf-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
}

/* 25 · Druck ------------------------------------------------------------- */
@media print {
  .site-header, .nav-mobile, .burger, .cookie-banner, .toasts, .site-footer, .btn, .btn-row, form, .film-kreis, .film-hinweis { display: none !important; }
  body::before { content: "Physiotherapie Alexandra Schade · Bahnhofstraße 5, 79199 Kirchzarten · Telefon 0152 38923334"; display: block; border-bottom: 1px solid #000; padding-bottom: 4mm; margin-bottom: 6mm; font-size: 10pt; }
  .hero { padding-top: 0; background: none; }
  .band { padding-top: 0; background: none; color: #000; border: 0; }
  .band h1, .band p, .brotkrumen a, .brotkrumen li { color: #000; }
  .karte { box-shadow: none; }
  .wechsel, .hero-raster, .praxis-intro, .raum, .leistungen-ueberblick, .ueber-raster, .kontakt-haupt, .ort-karte { display: block; }
  img { max-height: 85mm; object-fit: contain; }
  .faq-item, .stimme, .raum, .leistungen-liste, .zusatz-karte { page-break-inside: avoid; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}