/* ==========================================================================
   PHYSIOtherapie Susanne Funk-Gauckler — shared stylesheet
   Phase 1: tokens, fonts, reset, base typography, home page components.
   Phase 2: breadcrumb, team profile components — shared across every page.
   Every colour and every size comes from a token. No literal values below
   the :root block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — local only, no external request
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "D-DIN";
  src: url("../fonts/d-din-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN";
  src: url("../fonts/d-din-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* colours — fixed token set, unchanged */
  --marke: #babc3d;        /* surface only, NEVER text */
  --marke-dunkel: #6b6c23; /* brand as text and link, 5.5:1 */
  --tinte: #3f3f3d;        /* headings, 10.6:1 */
  --text: #666565;         /* body copy, 5.8:1 */
  --flaeche: #f3f3ec;      /* quiet sections, olive tinted */
  --weiss: #ffffff;

  /* derived colours — mixed from the tokens above, no new literals */
  --linie: color-mix(in srgb, var(--tinte) 16%, var(--weiss));
  --linie-stark: color-mix(in srgb, var(--tinte) 32%, var(--weiss));
  --marke-flaeche-rand: color-mix(in srgb, var(--marke) 72%, var(--tinte));
  --schatten-farbe: color-mix(in srgb, var(--tinte) 12%, transparent);
  --flaeche-transluzent: color-mix(in srgb, var(--flaeche) 92%, transparent);
  /* Ein "Ton" sind hier 6 Prozentpunkte Weissanteil. Erste Fassung 82 %,
     dann dreimal je zwei Toene abgedunkelt auf 46 % (11.08.2026). */
  --grau-hell: color-mix(in srgb, var(--weiss) 46%, var(--tinte));

  /* type families */
  --font-display: "D-DIN", system-ui, -apple-system, sans-serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* type scale — fluid */
  --fs-025: 0.6875rem; /* kleinste Stufe, nur fuer den Bildhinweis */
  --fs-050: 0.75rem;
  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1rem;
  --fs-400: clamp(1.0625rem, 0.99rem + 0.3vw, 1.1875rem);
  --fs-500: clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem);
  --fs-600: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
  --fs-700: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --fs-800: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --fs-900: clamp(2.125rem, 1.3rem + 4.1vw, 4.25rem);

  /* line heights */
  --lh-eng: 1.1;
  --lh-mittel: 1.3;
  --lh-weit: 1.65;

  /* letter spacing */
  --ls-eng: -0.015em;
  --ls-normal: 0;
  --ls-weit: 0.08em;

  /* weights */
  --fw-normal: 400;
  --fw-fett: 700;

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3rem, 2rem + 5vw, 5rem);
  --space-9: clamp(4rem, 2.5rem + 7vw, 7rem);

  /* measures */
  --measure: 64ch;
  --wrap: 75rem;
  --radius: 2px;
  --linie-staerke: 1px;
  --fokus-staerke: 3px;
  --fokus-abstand: 2px;
  --klickflaeche: 44px;
  --leiste-hoehe: 3.5rem;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-text);
  font-size: var(--fs-400);
  font-weight: var(--fw-normal);
  line-height: var(--lh-weit);
  color: var(--text);
  background-color: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* ── Grid- und Flex-Kinder dürfen schrumpfen ──────────────────
   Grid-Elemente haben min-width: auto und werden nie schmaler als
   ihre Min-Content-Breite. overflow-wrap: break-word verhindert
   sichtbaren Überlauf, verkleinert die Min-Content-Breite aber
   NICHT — ein langes Versal-Kompositum bleibt für die
   Breitenberechnung ein Block. Folge: die Spur wächst über den
   Container hinaus, die Seite scrollt seitwärts, und auf keinem
   Screenshot ist etwas davon zu sehen.                            */

.focus-item,
.team-item,
.verfahren__item {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   4. Base typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  line-height: var(--lh-eng);
  color: var(--tinte);
  letter-spacing: var(--ls-eng);
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-800);
}

h2 {
  font-size: var(--fs-700);
}

h3 {
  font-size: var(--fs-600);
}

h4 {
  font-size: var(--fs-500);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--marke-dunkel);
  text-decoration-thickness: var(--linie-staerke);
  text-underline-offset: var(--fokus-abstand);
}

a:hover {
  text-decoration-thickness: var(--fokus-staerke);
}

strong,
b {
  font-weight: var(--fw-fett);
  color: var(--tinte);
}

/* --------------------------------------------------------------------------
   5. Focus — always visible, never removed
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--fokus-staerke) solid var(--marke-dunkel);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   6. Skip link
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background-color: var(--tinte);
  color: var(--weiss);
  font-family: var(--font-display);
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Layout helpers
   -------------------------------------------------------------------------- */

/* Visible to screen readers, invisible on screen. Neither display:none nor
   visibility:hidden — both remove the text from the accessibility tree.
   The 1px values are the established idiom here, not design measurements. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-8);
}

.section--quiet {
  background-color: var(--flaeche);
}

.measure {
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   8. Top bar — phone number
   -------------------------------------------------------------------------- */

.topbar {
  background-color: var(--tinte);
  color: var(--weiss);
  font-size: var(--fs-200);
}

/* Der Innenabstand steckt seit dem 16.08.2026 in der Klickflaeche des
   Links darunter, nicht mehr hier -- sonst addierten sich beide und die
   Leiste waere von 37 auf 60 px gewachsen. So sind es 44 px.
   Das row-gap traegt den Fall, dass Ort und Rufnummer umbrechen. */
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: flex-end;
  min-height: var(--space-6);
  padding-block: 0;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--weiss);
  font-family: var(--font-display);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  font-size: var(--fs-100);
  text-decoration: none;
}

/* Nur der Link, nicht der Ortsname daneben: "Kirchheim unter Teck" ist
   ein <span> und keine Klickflaeche. Die Rufnummer ist auf dem Handy die
   wahrscheinlichste Handlung der ganzen Seite und mass bis zum
   16.08.2026 nur 21 px (mindestens 44 gefordert). */
a.topbar__item {
  min-height: var(--klickflaeche);
}

a.topbar__item:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--linie-staerke);
}

/* Zwei Symbole, ein Verhalten. .icon-mail ist am 10.08.2026 dazugekommen
   (Kontaktkarte, Abschnitt 26) und wird bewusst hier mitdefiniert statt
   dort erneut — zwei Definitionen desselben Verhaltens driften auseinander.
   Kein bestehendes Element traegt .icon-mail, die Ergaenzung kann keine
   abgenommene Seite erreichen. */
.icon-phone,
.icon-mail {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. Header — logo left, navigation right
   -------------------------------------------------------------------------- */

.header {
  border-bottom: var(--linie-staerke) solid var(--linie);
  background-color: var(--weiss);
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.header__logo {
  display: block;
  flex-shrink: 0;
}

.header__logo img {
  width: 13rem;
  height: auto;
}

/* Hamburger-Umschalter, nur unter 700px sichtbar (siehe Media Query
   unten) — zwei SVGs übereinander, CSS blendet je nach aria-expanded
   die passende ein. Kein Icon-Font, kein externes Bild, wie beim
   Telefonsymbol. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--klickflaeche);
  height: var(--klickflaeche);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
}

.icon-menu {
  width: 1.5em;
  height: 1.5em;
}

.icon-menu--zu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu--offen {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu--zu {
  display: block;
}

/* Mobil-zuerst eingeklappt: erst per Klick (nav.js setzt .ist-offen)
   oder ab 700px (Media Query unten) sichtbar. */
.nav__list {
  display: none;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
}

.nav__list.ist-offen {
  display: flex;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding-inline: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
}

.nav__link:hover {
  color: var(--marke-dunkel);
}

.nav__link[aria-current="page"] {
  color: var(--marke-dunkel);
  box-shadow: inset 0 calc(var(--fokus-staerke) * -1) 0 0 var(--marke);
}

/* eingeklappt gestapelt: dünne Trennlinie zwischen den vier Punkten,
   sonst kein Unterschied zur Nav-Optik selbst */
.nav__list.ist-offen li + li {
  border-top: var(--linie-staerke) solid var(--linie);
}

/* Ab hier passt die volle Navigation neben das Logo in eine Zeile —
   gemessen: bei 660px stand sie noch als eigene Zeile darunter, ab
   700px daneben. Umschalter verschwindet, Liste ist unabhängig von
   .ist-offen immer sichtbar. */
@media (min-width: 700px) {
  .nav-toggle {
    display: none;
  }

  .nav__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    width: auto;
  }

  .nav__list li + li {
    border-top: none;
  }
}

/* --------------------------------------------------------------------------
   10. Hero — the claim is the one loud element of the page
   -------------------------------------------------------------------------- */

/* No bottom border here: the section that follows carries --flaeche, and
   the change of surface already separates the two. A line on top of that
   would read as a second, competing edge. */
.hero {
  padding-block: var(--space-8) var(--space-7);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* Left column: claim, subline and the two introductory sentences. The two
   sentences sit close enough to read as one block — the greeting is short
   and would look stranded on its own. The heading keeps its wider gap. */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Plain body copy, both sentences. The claim is the one loud element on
   this page; the greeting in particular carries no information and is
   not emphasised. */
.hero__intro {
  max-width: var(--measure);
  margin: 0;
}

.claim {
  font-size: calc(var(--fs-900) * 0.85);
  line-height: var(--lh-eng);
  letter-spacing: var(--ls-eng);
  color: var(--tinte);
}

.claim-sub {
  font-family: var(--font-text);
  font-size: var(--fs-500);
  font-weight: var(--fw-normal);
  line-height: var(--lh-mittel);
  letter-spacing: var(--ls-normal);
  color: var(--text);
  max-width: var(--measure);
  /* geerbtes hyphens: auto von h1 abschalten — kein Wort in diesem Satz
     soll je mit Bindestrich getrennt werden, auch nicht bei 320px */
  hyphens: none;
}

/* Hero mit Foto-Hintergrund, nur auf index.html (§5: nur die Startseite
   hat den Hero). Bewusst als Regel im Stylesheet, nicht als Inline-Style
   auf der Seite — ein Inline-style-Attribut mit background-image wird von
   der eigenen CSP verworfen (default-src 'self', kein unsafe-inline für
   Styles). Ausprobiert und am leeren Hero-Hintergrund erkannt. */
.hero--foto {
  background-image: url("../img/foto-empfang.webp");
  background-size: cover;
  background-position: center;
}

/* Halbtransparente Fläche hinter Anspruch und Einleitungstext, damit der
   Kontrast auf dem Foto derselbe bleibt wie vorher auf freiem Grund. */
.hero--foto .hero__text {
  background-color: var(--flaeche-transluzent);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* Kopfbild auf den Unterseiten: ein Bild in der Wrap-Breite, oben in
   main, vor dem ersten Abschnitt. Eigenständige Klasse statt .wrap auf
   demselben Element mit einer Breitenklasse zu kombinieren (§6-Falle). */
.kopfbild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  margin-block: var(--space-6) 0;
}

/* Kopfbild mit Titel darüber, wenn das Foto allein zu massiv wirkt: die
   Überschrift bricht die Fläche auf und übernimmt die Rolle, die sonst
   ein eigener Abschnitt darunter hätte. Gleiche Fläche wie beim
   Hero-Foto (--flaeche-transluzent), gleicher Kontrast, geprüft. */
.kopfbild-box {
  position: relative;
  margin-block: var(--space-6) 0;
}

.kopfbild-box .kopfbild {
  margin-block: 0;
}

/* Mobil-zuerst: die Box steht unter dem Bild, nicht darauf — bei 16:9
   sind das bei 320px nur 180px Bildhöhe, ein vierzeiliger Text hätte
   das Foto fast vollständig verdeckt. Erst ab 600px, wo das Bild auch
   in der Breite mehr Raum für die Box neben sich lässt, wird daraus
   ein Overlay unten links. */
.kopfbild-titel {
  background-color: var(--flaeche);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}

.kopfbild-titel h1 {
  margin: 0 0 var(--space-3);
}

.kopfbild-titel p {
  color: var(--text);
  margin: 0;
}

/* Störer im Hero — rundes, leicht gedrehtes Abzeichen auf dem Foto.

   Bewusst KEIN position: absolute in einer Hero-Ecke. Gemessen bei
   1280px: unter Text und Öffnungszeiten-Karte bleiben nur 48 bis 69px
   freie Fotofläche — ein Abzeichen dieser Größe läge dort zwangsläufig
   auf der Karte und verdeckte den „Termin vereinbaren"-Knopf.

   Stattdessen ist es ein eigenes Rasterelement: ab 900px eine eigene
   Zeile über die volle Breite, rechtsbündig; darunter stapelt es wie
   alles andere im Hero. Der Hero wächst dadurch um die Höhe des
   Abzeichens, statt dass etwas überdeckt wird. Keine Zahlenakrobatik,
   die bei anderer Textlänge wieder kippt.

   Seit 14.08.2026 liegt diese Zeile ab 900px OBEN statt unten — siehe
   den Block unter @media (min-width: 900px). Unterhalb von 900px
   bleibt das Abzeichen am Ende des Hero: dort gibt es kein „unten
   rechts", das Raster ist einspaltig und der Störer steht mittig. Ihn
   dort nach oben zu holen, hiesse ihn über die h1 zu setzen und den
   Anspruch aus dem ersten Bildschirm zu schieben. */
.stoerer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* Durchmesser und Polster so knapp wie möglich: gemessen ist die
     längste Zeile („Unterstützung") 111px breit, „MEHR ERFAHREN" 108px.
     Bei 9.5rem und space-3 bleibt auf deren Höhe noch Luft — im Kreis
     steht auf Texthöhe weniger Breite zur Verfügung als der Durchmesser
     suggeriert, deshalb wird an der Sehne gerechnet, nicht am Radius. */
  width: 9.5rem;
  height: 9.5rem;
  padding: var(--space-3);
  border-radius: 50%;
  background-color: var(--marke);
  border: var(--fokus-staerke) solid var(--weiss);
  box-shadow: 0 var(--space-1) var(--space-4) var(--schatten-farbe);
  text-align: center;
  text-decoration: none;
  color: var(--tinte);
  /* einspaltig mittig — links am Rand hängend wirkt ein rundes Zeichen
     wie abgerutscht. Ab 900px übersteuert justify-self: end. */
  justify-self: center;
  /* rückt 10px näher an die Nachbarelemente, oben wie unten */
  margin-block: -10px;
}

.stoerer__gross {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-fett);
  line-height: var(--lh-eng);
  letter-spacing: var(--ls-eng);
  /* §6: Jedes Element, das seine font-size setzt, setzt auch sein
     letter-spacing — sonst erbt es einen Pixelwert aus dem Elternteil. */
}

.stoerer__klein {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
}

/* Die Drehung erst ab 600px: darunter steht das Abzeichen mittig unter
   dem Hero-Text, und ein schiefes Element ohne Foto daneben wirkt wie
   ein Fehler statt wie ein Störer. */
@media (min-width: 600px) {
  .stoerer {
    rotate: -8deg;
    transition: rotate 0.2s;
  }

  .stoerer:hover {
    rotate: -4deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stoerer {
    transition: none;
  }
}

/* opening hours card next to the claim */

.hours {
  border: var(--linie-staerke) solid var(--linie);
  border-top: var(--fokus-staerke) solid var(--marke);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-block: 20px;
  background-color: var(--weiss);
  /* the card decides its own layout, not the viewport */
  container-type: inline-size;
  /* Unterkante buendig mit .hero__text, statt oben (.hero__inner: start) */
  align-self: end;
}

.hours__title {
  font-size: var(--fs-500);
  margin-bottom: var(--space-4);
}

/* opening hours: one row per weekday, never grouped. Tuesday has no
   morning slot and that gap has to be visible at a glance. */

.hours__table {
  width: 100%;
  margin-bottom: var(--space-5);
  border-collapse: collapse;
  font-size: var(--fs-300);
}

.hours__table th,
.hours__table td {
  text-align: left;
  padding: 0;
}

/* mobile: stack day and times, the table borders would not fit 320px */
.hours__table tr {
  display: block;
  padding-block: var(--space-3);
  border-bottom: var(--linie-staerke) solid var(--linie);
}

.hours__table tr:last-child {
  border-bottom: 0;
}

.hours__day {
  display: block;
  color: var(--tinte);
  font-weight: var(--fw-fett);
  font-family: var(--font-display);
}

.hours__slot {
  display: block;
  color: var(--text);
  white-space: nowrap;
}

/* Filler for a free half day. Stacked there is only ever one time per day,
   so the dash would say nothing — it appears once the columns do. */
.hours__dash {
  display: none;
  color: var(--text);
}

/* Wide enough card: day, morning and afternoon get their own column, so
   the missing Tuesday morning shows up as a real gap. Narrow cards keep
   the stacked layout above. */
@container (min-width: 23rem) {
  .hours__table tr {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    padding-block: var(--space-2);
  }

  .hours__dash {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--klickflaeche);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--linie-staerke) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

/* brand surface always carries dark type — white on --marke is 2.03:1 */
.button--marke {
  background-color: var(--marke);
  color: var(--tinte);
  border-color: var(--marke-flaeche-rand);
  width: 100%;
}

.button--marke:hover {
  background-color: var(--marke-flaeche-rand);
  color: var(--weiss);
}

.button--linie {
  background-color: var(--weiss);
  color: var(--tinte);
  border-color: var(--linie-stark);
}

.button--linie:hover {
  border-color: var(--tinte);
  color: var(--marke-dunkel);
}

/* Breite nach Inhalt statt nach Container. .button--marke traegt width: 100%,
   weil es bisher nur in der Oeffnungszeiten-Karte und im Formular steht und
   dort seine Spalte fuellen soll. Im Fliesstext (unterstuetzung.html) waere
   das ein Knopf ueber die ganze Zeilenbreite von .measure — auf 1280px rund
   700px breit fuer zwei Woerter.

   Muss NACH .button--marke stehen: gleiche Spezifitaet (0,1,0), es gewinnt
   die spaetere Regel. Wird sie je nach oben verschoben, wirkt sie nicht mehr,
   ohne dass irgendwo ein Fehler erscheint. */
.button--auto {
  width: auto;
}

/* --------------------------------------------------------------------------
   12. Focus areas — the four blocks that carry the middle of the page
   -------------------------------------------------------------------------- */

.focus__head {
  margin-bottom: var(--space-7);
}

.focus__list {
  display: grid;
  gap: var(--space-5);
}

.focus-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--weiss);
  border: var(--linie-staerke) solid var(--linie);
  border-left: var(--fokus-staerke) solid var(--marke);
  border-radius: var(--radius);
}

.focus-item__title {
  font-size: var(--fs-600);
  margin: 0;
}

.focus-item__title a {
  color: var(--tinte);
  text-decoration: none;
}

.focus-item__title a:hover {
  color: var(--marke-dunkel);
  text-decoration: underline;
  text-decoration-thickness: var(--fokus-abstand);
}

.focus-item__text {
  font-size: var(--fs-300);
  margin: 0;
}

/* Die kleinste Klickflaeche der Seite, bis zum 16.08.2026. Dieselbe Klasse
   ist dabei VERSCHIEDEN hoch gewesen, je nach Umgebung: in .focus-item
   wird der Link zum Flex-Element und bekam die volle Zeilenhoehe (25 px),
   in .team-item blieb er ein gewoehnlicher Inline-Link und mass nur die
   Schrifthoehe (17 px). Beide jetzt auf 44 px.
   align-items: flex-end statt center -- der gewonnene Platz liegt damit
   ueber dem Text und liest sich als Abstand, nicht als Loch am Kartenboden.
   width: fit-content, sonst wuerde die Klickflaeche als Flex-Element die
   ganze Kartenbreite einnehmen. */
.focus-item__more {
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;
  min-height: var(--klickflaeche);
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  text-decoration: none;
}

.focus-item__more:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--fokus-abstand);
}

/* --------------------------------------------------------------------------
   13. Team teaser
   -------------------------------------------------------------------------- */

.team__list {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-6);
}

.team-item {
  padding-top: var(--space-4);
  border-top: var(--fokus-staerke) solid var(--linie);
}

.team-item__name {
  font-size: var(--fs-500);
  margin-bottom: var(--space-1);
}

.team-item__role {
  font-size: var(--fs-300);
  margin: 0;
}

/* placeholder states what is missing — it is the request for content.
   Used by the photo placeholders on team.html. */
.placeholder {
  display: inline-block;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--linie-staerke) dashed var(--linie-stark);
  border-radius: var(--radius);
  font-size: var(--fs-200);
  line-height: var(--lh-mittel);
}

/* --------------------------------------------------------------------------
   14. Closing block on brand surface — dark type only
   -------------------------------------------------------------------------- */

.cta {
  background-color: var(--marke);
  padding-block: var(--space-8);
}

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.cta__title {
  font-size: var(--fs-700);
  color: var(--tinte);
  margin: 0;
}

/* inline-flex wegen des Hörersymbols vor der Nummer — dasselbe Inline-SVG
   wie in der Kopfleiste, Größe in em, deshalb wächst es mit --fs-700 mit.
   Der visually-hidden Text ist absolut positioniert und wird kein
   Flex-Element; das gap wirkt allein zwischen Symbol und Nummer. */
.cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-700);
  font-weight: var(--fw-fett);
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
}

.cta__phone:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--fokus-staerke);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--tinte);
  color: var(--weiss);
  padding-block: var(--space-7);
  font-size: var(--fs-300);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
}

.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--weiss);
  margin-bottom: var(--space-3);
}

/* zweite Überschrift in derselben Spalte — Praxis + Kontakt */
.footer__title--zweit {
  margin-top: var(--space-6);
}

.footer p {
  margin: 0;
}

.footer a {
  color: var(--weiss);
}

/* Die E-Mail-Adresse steht allein in ihrem Absatz und ist deshalb eine
   eigenstaendige Klickflaeche -- 21 px bis zum 16.08.2026. Der
   Attributselektor greift sie, ohne dass in 19 HTML-Dateien eine Klasse
   ergaenzt werden muesste.
   Die tel:-Nummer eine Zeile darueber steht MITTEN IM SATZ ("Telefon
   07021 8605-650") und bleibt bewusst unberuehrt: WCAG 2.5.8 nimmt Links
   im Fliesstext ausdruecklich aus, und ein 44 px hoher Textlink wuerde
   den Absatz auseinanderreissen. */
.footer a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
}

/* Legal links — a fixed part of the footer on every page.
   White on --tinte measures 10.55:1, well past WCAG AA. */
.footer__legal {
  margin-top: var(--space-6);
  border-top: var(--linie-staerke) solid var(--linie-stark);
}

.footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.footer__legal-list li {
  display: flex;
  align-items: center;
}

/* Small type, but the tap target stays at the 44px floor. */
.footer__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding-inline: var(--space-1);
  font-size: var(--fs-200);
  color: var(--weiss);
}

.footer__legal-sep {
  padding-inline: var(--space-3);
  font-size: var(--fs-200);
  color: var(--weiss);
}

/* Mitgliedschaften — dritte Fussspalte.
   Zwei bestätigte Verbände, ausgezeichnet als Liste, weil es eine ist. */
.footer__memberships {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}

/* Jedes Verbandszeichen ist ein Link, und der Link ist zugleich die helle
   Fläche, auf der es steht.
   Beide Logos sind für hellen Grund gezeichnet: der bvo-Schriftzug in
   Dunkelgrau (#575756), Physio Deutschland in Dunkelblau (#14387F). Auf
   --tinte misst der bvo-Schriftzug 1,46 : 1 und ist damit unlesbar. Eine
   invertierte Fassung gibt es nur für das Bundeslogo, nicht für den
   Landesverband Baden-Württemberg. Statt die Marke umzufärben bekommt
   jedes Zeichen eine helle Fläche — der Weg, den Markenrichtlinien für
   dunklen Grund vorsehen.
   Fläche plus Innenabstand ergeben zugleich die Klickfläche; das
   min-height hält die 44px auch dann, wenn die Höhe je geändert wird. */
.membership__link {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: var(--klickflaeche);
  padding: var(--space-2) var(--space-3);
  background-color: var(--flaeche);
  border-radius: var(--radius);
  text-decoration: none;
}

/* Feste Höhe, damit beide Zeichen gleich hoch stehen — unabhängig von
   ihrem Seitenverhältnis. 2,25rem sind 36px: das bvo-Logo liegt nur als
   PNG mit 75px Höhe vor, mehr wäre auf HiDPI-Schirmen hochskaliert. */
.membership__logo {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* --------------------------------------------------------------------------
   16. Sticky call bar — mobile only
   -------------------------------------------------------------------------- */

.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--leiste-hoehe);
  padding: var(--space-2) var(--space-4);
  background-color: var(--marke);
  border-top: var(--linie-staerke) solid var(--marke-flaeche-rand);
  box-shadow: 0 calc(var(--space-1) * -1) var(--space-3) var(--schatten-farbe);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
}

/* keep the sticky bar from covering the end of the page */
body {
  padding-bottom: var(--leiste-hoehe);
}

/* --------------------------------------------------------------------------
   17. Breadcrumb — auf jeder Seite ausser index.html
   -------------------------------------------------------------------------- */

/* Wie bei .topbar__inner: der Innenabstand ist seit dem 16.08.2026 in die
   Klickflaeche der Links gewandert. Die Zeile misst dadurch 44 statt 49 px
   -- sie wird also kompakter, obwohl das Ziel von 25 auf 44 px waechst. */
.breadcrumb {
  padding-block: 0;
  font-size: var(--fs-200);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
}

/* Trennzeichen hängt am vorangehenden Eintrag, nie am folgenden — sonst
   rutscht es beim Zeilenumbruch an den Anfang der neuen Zeile.
   „x" / "" unterdrückt den generierten Inhalt im Accessibility-Tree
   (per CDP geprüft: ohne die Alt-Angabe wird der Text vorgelesen). */
.breadcrumb__list li:not(:last-child)::after {
  content: "›" / "";
  padding-inline: var(--space-2);
  color: var(--text);
}

/* Die 44 px stehen hier und nicht am Innenabstand der Zeile darueber --
   beides zusammen gehoert, sonst schrumpft die Zeile, ohne dass das Ziel
   waechst. Genau das ist beim Einbau am 16.08.2026 zuerst passiert. */
.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  color: var(--marke-dunkel);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--linie-staerke);
}

.breadcrumb [aria-current="page"] {
  color: var(--tinte);
}

/* --------------------------------------------------------------------------
   18. Team-Profil — Foto, Kurztext, Tabellen, Qualifikationsliste
   -------------------------------------------------------------------------- */

/* Porträt im Seitenverhältnis 4:5, oben in jeder Karte. Gilt für das
   fertige Foto wie für den noch offenen Platzhalter — beide belegen
   denselben Platz, damit die Karten gleich hoch bleiben, solange noch
   nicht alle Fotos vorliegen. */
.team-item__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.team-item__photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Einzeiliger Satz bei Ursel Schott-Müller und Wolfgang Gauckler */
.team-item__text {
  font-size: var(--fs-300);
  margin-top: var(--space-2);
}

/* Sichtbare Überschrift vor den ausführlichen Profilen */
.profile-intro {
  margin-bottom: var(--space-6);
}

/* Trennt die Profile optisch, ohne Farbe zu wechseln — beide Profile
   stehen auf demselben Grund, damit keine Person hervorgehoben wirkt. */
.profile-divider {
  border-top: var(--linie-staerke) solid var(--linie);
}

/* Werdegang, Vorträge, Dozententätigkeit — zweispaltig Jahr | Ereignis */
.profile-table {
  width: 100%;
  margin-block: var(--space-5);
  border-collapse: collapse;
  font-size: var(--fs-300);
}

.profile-table tr {
  display: block;
  padding-block: var(--space-3);
  border-bottom: var(--linie-staerke) solid var(--linie);
}

.profile-table tr:last-child {
  border-bottom: 0;
}

.profile-table th,
.profile-table td {
  display: block;
  text-align: left;
  padding: 0;
}

.profile-table th {
  color: var(--tinte);
  font-weight: var(--fw-fett);
  font-family: var(--font-display);
}

/* Allgemeine Aufzählung mit markenfarbenem Punkt */
.list-bullets {
  margin-block: var(--space-4);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-bullets li {
  list-style: disc;
}

.list-bullets li::marker {
  color: var(--marke-dunkel);
}

/* Hinweis direkt unter einer h4, gleiche Schriftgroesse wie .profile-table
   (Werdegang/Vortraege/Dozententaetigkeit) -- keine eigene Fliesstextgroesse. */
.qualifikationen-hinweis {
  margin-top: 3px;
  font-size: var(--fs-300);
}

/* --------------------------------------------------------------------------
   19. Therapien — sieben Verfahren als Folge von Abschnitten
   -------------------------------------------------------------------------- */

/* einspaltig bis 900px (Grid mit einer Spur), ab 900px zwei Spalten —
   siehe Breakpoints unten. gap ersetzt die frühere margin-top-Kette, damit
   der Abstand in beiden Layouts aus derselben Regel kommt. */
.verfahren {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* Zeilenlänge je Spalte weiter über --measure begrenzen, auch wenn die
   Spalte selbst meist schon schmaler ist. */
.verfahren__item {
  max-width: var(--measure);
}

.verfahren__item > p {
  margin-top: var(--space-3);
}

/* Schwerpunktseiten (Osteopathie, Manuelle Therapie, CMD, Bobath) — h1 plus
   Fliesstext, keine Zwischenüberschriften */
.prose h1 {
  margin-bottom: var(--space-6);
}

.prose p + p {
  margin-top: var(--space-4);
}

/* h2-Abstand in .prose — nachgeruestet am 08.08.2026.

   Diese Regel gab es schon einmal und wurde am 31.07.2026 wieder
   entfernt, mit der Begruendung, sie sei wirkungslos: Auf kontakt.html,
   damals der einzigen .prose-Seite mit h2, eroeffnete jedes h2 einen
   eigenen .prose-Block in eigener section und war dort erstes Kind —
   ein Vortext, an dem es haette kleben koennen, existierte nicht.
   Gemessen wurde das damals sauber: Regel eingebaut, 39 Screenshots
   verglichen, 0 Abweichungen.

   Mit unterstuetzung.html trifft die Begruendung nicht mehr zu. Dort
   steht ein h2 mitten im Fliesstext desselben .prose-Blocks und klebte
   ohne diese Regel am Absatz darueber. Der erste Fall macht aus einer
   wirkungslosen Regel eine noetige.

   Lange Rechtstexte nutzen weiterhin .legal in Abschnitt 25. */
.prose h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose h2:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   20. Schwerpunktseiten — Verweise auf die übrigen Verfahren
   -------------------------------------------------------------------------- */

.related-links__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-6);
}

.related-links__list li {
  display: flex;
  align-items: center;
}

/* siehe .breadcrumb__list — gleiches Prinzip, gleiche Begründung */
.related-links__list li:not(:last-child)::after {
  content: "·" / "";
  padding-inline: var(--space-3);
  color: var(--text);
}

.related-links__list a,
.related-links__all {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding-inline: var(--space-1);
}

/* "Alle Therapien" ist kein Schwerpunkt, sondern der Weg eine Ebene
   höher — eigenes Element ausserhalb der Liste, kein Trennpunkt davor */
.related-links__all {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   21. Kontaktseite — Anschrift, Anfahrt, Formular
   -------------------------------------------------------------------------- */

/* Text mit Bild daneben. Mobil steht das Bild unter dem Text, ab 900px
   rechts daneben — darunter wäre die Textspalte zu schmal für eine
   lesbare Zeilenlänge. Die Textspalte begrenzt ihre Zeilenlänge selbst
   über --measure, statt .measure zusätzlich zu setzen (§6-Falle:
   Zentrier- und Breitenklasse nie auf demselben Element). */
.text-bild {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.text-bild__text {
  max-width: var(--measure);
  min-width: 0;
}

.text-bild__bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .text-bild {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* Anfahrtsskizze, Seitenverhältnis 400 x 370. Gilt für das fertige Bild
   wie für den Platzhalter. */
.route-sketch {
  display: block;
  width: 100%;
  max-width: 25rem;
  aspect-ratio: 400 / 370;
  margin-block: var(--space-4) var(--space-5);
}

.route-sketch.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Hinweis über dem Nachrichtenfeld — eigener Kasten, gleiche Betonung wie
   .focus-item (linker Rand in Markenfarbe), damit er als Hinweis erkennbar
   ist und nicht wie ein weiterer Fliesstext-Absatz übersehen wird. */
.form__hint {
  font-size: var(--fs-300);
  padding: var(--space-4);
  background-color: var(--weiss);
  border-left: var(--fokus-staerke) solid var(--marke);
  border-radius: var(--radius);
}

.form__pflichthinweis {
  font-size: var(--fs-300);
  margin-bottom: var(--space-5);
}

/* Zweispaltig ab 600px: die vier kurzen Felder stehen paarweise
   nebeneinander, Nachricht, Hinweis, Checkbox und Knopf über die volle
   Breite. Einspaltig war das Formular sonst sehr hoch — sechs
   gestapelte Zeilen für Angaben, die zusammen in vier Zeilen passen. */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* alles, was nicht eines der vier kurzen Felder ist, läuft über beide
   Spalten — im einspaltigen Fall wirkungslos */
.form__hint,
.form__row--nachricht,
.form__row--checkbox,
.form__honeypot,
.form button {
  grid-column: 1 / -1;
}

.form__label {
  font-size: var(--fs-300);
  font-weight: var(--fw-fett);
  color: var(--tinte);
}

/* Sichtbare Pflichtfeld-Kennzeichnung — die Erklärung dazu steht einmal
   in .form__pflichthinweis, nicht bei jedem Feld erneut. aria-hidden, weil
   das required-Attribut den Status für Screenreader bereits trägt. */
.form__required {
  color: var(--marke-dunkel);
}

.form__input {
  width: 100%;
  min-height: var(--klickflaeche);
  padding: var(--space-3);
  border: var(--linie-staerke) solid var(--linie-stark);
  border-radius: var(--radius);
  background-color: var(--weiss);
  font-size: var(--fs-400);
}

.form__textarea {
  min-height: 10rem;
  resize: vertical;
}

/* .form__row setzt flex-direction: column fuer die uebrigen Felder --
   hier explizit auf row zurueckgesetzt, sonst bleibt das Kaestchen ueber
   dem Text stehen statt daneben. min-height sorgt fuer die 44px
   Klickflaeche, auch wenn der Text nur eine Zeile lang ist. */
.form__row--checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--klickflaeche);
}

.form__row--checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
  flex-shrink: 0;
}

/* align-self: stretch dehnt die Klickflaeche des Labels auf die volle
   Zeilenhoehe (mindestens 44px) aus, ohne den Text selbst zu
   zentrieren -- er bleibt oben, buendig zur ersten Zeile des
   Kaestchens. min-width: 0 verhindert, dass das Flex-Element nicht
   unter seinen Inhalt schrumpft. */
.form__row--checkbox label {
  align-self: stretch;
  min-width: 0;
  font-size: var(--fs-300);
}

.form button[type="submit"] {
  justify-self: start;
}

@media (min-width: 600px) {
  .form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-5);
  }
}

/* Honeypot — für alle unsichtbar, auch für Screenreader (aria-hidden auf dem
   Wrapper, tabindex/autocomplete auf dem Feld selbst). Bewusst nicht über
   .visually-hidden, die ist für Vorlesetexte gedacht, nicht zum Verstecken
   eines Fallenfelds. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   22. Breakpoints — 600 / 900 / 1200
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .wrap {
    padding-inline: var(--space-6);
  }

  /* ab hier genug Raum, damit die Box als Overlay auf dem Foto liegt,
     statt darunter zu stehen (siehe Basis-Regel weiter oben) */
  .kopfbild-titel {
    position: absolute;
    left: var(--space-5);
    bottom: var(--space-5);
    max-width: min(calc(100% - var(--space-5) * 2), 34rem);
    background-color: var(--flaeche-transluzent);
    margin-top: 0;
  }

  .kopfbild-titel--rechts {
    left: auto;
    right: var(--space-5);
  }

  .kopfbild-titel--oben {
    top: var(--space-5);
    bottom: auto;
  }

  .focus__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .verfahren {
    gap: var(--space-6);
  }

  /* four people: 2x2 here, four columns from 1200px */
  .team__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-table tr {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
  }

  .profile-table th,
  .profile-table td {
    display: block;
    padding: 0;
  }
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr);
    gap: var(--space-7);
  }

  /* Eigene Zeile ÜBER Text und Karte, rechtsbündig auf dem Foto —
     umgestellt am 14.08.2026, vorher lag diese Zeile unter beiden.
     margin-right rückt es 10px von der Inhaltskante nach links.

     Die Zeilen stehen ausdrücklich da, statt sich aus der Reihenfolge
     im HTML zu ergeben: Im Quelltext bleibt der Störer hinter Anspruch
     und Öffnungszeiten stehen. Ihn im HTML nach vorn zu ziehen wäre
     der kürzere Weg gewesen und der falsche — dann läse ein
     Screenreader „Wir suchen Unterstützung" vor der h1, und eine
     Stellenanzeige stünde vor dem Anspruch der Praxis. */
  .stoerer {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    margin-right: 10px;
  }

  /* Text und Karte rücken gemeinsam eine Zeile nach unten. Beide
     bekommen dieselbe Zeile, damit sie um denselben Betrag wandern und
     ihre Oberkanten auf einer Linie bleiben — ohne die zweite Angabe
     würde die Karte automatisch in Zeile 3 rutschen. */
  .hero__text {
    grid-row: 2;
    grid-column: 1;
  }

  .hours {
    grid-row: 2;
    grid-column: 2;
  }

  .focus__list {
    gap: var(--space-7);
  }

  /* zwei Spalten für die sieben weiteren Verfahren, oben ausgerichtet statt
     gestreckt — jeder Abschnitt bleibt unabhängig, ungleiche Höhen sind
     in Ordnung */
  .verfahren {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    align-items: start;
  }

  /* Spalte 3 folgt ihrer Inhaltsbreite (zwei schmale, gestapelte Logos)
     statt eine gleich grosse Spur wie 1 und 2 zu bekommen — gemessen:
     der Logoinhalt ist nur rund 115px breit, eine 1fr-Spur liess dort
     bis zu 190px Leerraum stehen. Spalten 1 und 2 teilen sich den Rest
     weiterhin gleich. */
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, max-content);
  }

  /* the call bar is a phone affordance, not a desktop one */
  .callbar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .focus-item {
    padding: var(--space-7);
  }

  .team__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   23. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */

@media print {
  .topbar,
  .callbar,
  .nav {
    display: none;
  }

  body {
    padding-bottom: 0;
    color: var(--tinte);
  }
}

/* --------------------------------------------------------------------------
   25. Rechtstexte — Inhaltsverzeichnis und lange Gliederung
   Rein additiv. Beide Klassen sind neu. .toc nutzt nur datenschutz.html,
   .legal beide Rechtsseiten: datenschutz.html und impressum.html. Keine
   bereits abgenommene Seite kann von diesen Regeln erreicht werden, weil
   keine von ihnen eine der beiden Klassen traegt. Bestehende Regeln
   bleiben unberuehrt.

   Warum .legal und nicht eine Regel auf .prose: Das Impressum braucht
   Abstaende fuer 18 h2. Eine .prose-h2-Regel haette auch kontakt.html
   getroffen, eine bereits abgenommene Seite. Gleichartiges gleich
   darzustellen heisst hier, beide Rechtstexte dieselbe Klasse tragen zu
   lassen — nicht, eine dritte Seite mitzuveraendern.
   -------------------------------------------------------------------------- */

/* Inhaltsverzeichnis. Die Abschnittsnummern stehen im Linktext, nicht im
   Listenmarker: die Nummerierung des Textes springt (3a, 4a, 4b), ein
   automatischer Marker wuerde 1 bis 15 zaehlen und den Nummern
   widersprechen, auf die spaeter verwiesen wird. */
.toc {
  margin-block: var(--space-5) var(--space-7);
  padding: var(--space-4) var(--space-5);
  background-color: var(--flaeche);
  border-left: var(--fokus-staerke) solid var(--marke);
  border-radius: var(--radius);
}

.toc__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Klickflaeche mindestens 44px, auch bei einzeiligen Eintraegen; lange
   Ueberschriften duerfen umbrechen und wachsen dann darueber hinaus. */
.toc__link {
  display: flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding-block: var(--space-1);
  font-size: var(--fs-300);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-mittel);
}

/* Rechtstext: Abstaende fuer die Gliederungsebenen. h2 und h3 setzen hier
   keine eigene font-size, deshalb auch keine eigene letter-spacing-Angabe
   — sie behalten die Werte der Basisregel. */
.legal h1 {
  margin-bottom: var(--space-5);
}

.legal h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}

.legal h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   26. Kontaktkarte — Telefon, E-Mail und Formularlink als ein Block
   Rein additiv. Alle drei Klassen sind neu, keine bestehende Seite traegt
   sie; nur unterstuetzung.html nutzt den Block. Bauprinzip uebernommen von
   .toc (Abschnitt 25): ruhige Flaeche, Markenstreifen links, gleicher
   Radius — Gleichartiges gleich darstellen.

   Bewusst <ul>/<li> statt <p>: .prose p + p (Abschnitt 19) wuerde sonst
   innerhalb der Karte greifen und den Abstand doppelt setzen, einmal ueber
   margin und einmal ueber gap.
   -------------------------------------------------------------------------- */

.contact-card {
  margin-block: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background-color: var(--flaeche);
  border-left: var(--fokus-staerke) solid var(--marke);
  border-radius: var(--radius);
}

.contact-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Eigene font-size, deshalb eigenes letter-spacing (ein geerbter
   Laufweiten-Pixelwert folgt der font-size des Elternteils, nicht der
   eigenen). min-height haelt die Klickflaeche auf 44px. */
.contact-card__row {
  font-size: var(--fs-500);
  letter-spacing: var(--ls-normal);
}

/* Symbol und Text liegen IM Link, wie in der Kopfleiste — sonst waere die
   Klickflaeche nur die Texthoehe und bliebe unter den geforderten 44px.
   inline-flex statt flex: die Flaeche endet am Text, nicht am Kartenrand.

   align-items: flex-start statt center, weil die E-Mail-Adresse bei 320px
   zweizeilig umbricht (am Bindestrich). Zentriert saesse das Briefsymbol
   dann zwischen beiden Zeilen und gehoerte optisch zu keiner. Die
   Klickflaeche kommt hier aus padding-block statt aus min-height: mit
   min-height wuerde flex-start den Text oben an den Rand der 44px druecken.
   Gemessen: 47 bis 51px je Breite, siehe HANDOFF. */
.contact-card__link {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

/* Das Symbol auf die Mitte der ERSTEN Zeile heben, nicht auf die Mitte des
   ganzen Links. Halbe Differenz zwischen Zeilenhoehe und Symbolhoehe; die
   Zeilenhoehe kommt aus dem Token, damit der Wert mitwandert, wenn sich
   --lh-weit je aendert. Kein 1lh, das braeuchte Safari 16.4 aufwaerts. */
.contact-card__link > svg {
  margin-block-start: calc((var(--lh-weit) * 1em - 1em) / 2);
}

/* Ohne min-width: 0 waere dieses Flex-Element nie schmaler als die
   Min-Content-Breite von "info@physio-funk-gauckler.de" und wuechse bei
   320px aus der Karte heraus. */
.contact-card__text {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   27. Bildhinweis — kleine Angabe IM Bild, unten in der rechten Ecke
   Rein additiv, alle drei Klassen sind neu. Sie stehen an den vier Portraets
   und am Kopfbild auf kontakt.html; alle fuenf Aufnahmen sind per KI
   aufgewertet (Abschnitt 18). Keine abgenommene Seite erreicht die Regeln.

   Kein Kasten, kein Schatten — die Schrift traegt sich ueber die Farbe, und
   die richtet sich nach dem Bildgrund an genau dieser Stelle. Deshalb zwei
   Fassungen: --mittel fuer helle Ecken, --hell fuer dunkle. Gemessen im
   tatsaechlichen Labelbereich (55 x 14 px, 4 px von der Kante):

     Ursel Schott-Mueller   Grund (49, 45, 45)     hell   9,92 : 1
     Wolfgang Gauckler      Grund (45, 52, 71)     hell   9,04 : 1
     Heike Rapp             Grund (217,220,220)    mittel 4,21 : 1
     Kopfbild kontakt.html  Grund (212,207,204)    mittel 3,76 : 1
     Susanne Funk-Gauckler  Grund (181,181,112)    mittel 2,71 : 1

   Die beiden dunklen Bilder liegen damit weit ueber AA, die hellen darunter —
   bei Susanne Funk-Gauckler am deutlichsten, weil dort der olivgruene
   Hintergrund steht und nicht die weisse Bluse. Wer das heben will, ohne die
   Farbwahl aufzugeben: --tinte statt --text ergibt dort 4,65 : 1.

   Eigene font-size, deshalb eigenes letter-spacing (Abschnitt 6).
   -------------------------------------------------------------------------- */

/* Umbenannt von .image-note auf .bild-label (15.09.2026) — die Klasse
   traegt seither zwei Rollen: einen Urhebervermerk (sichtbar) und den
   KI-Hinweis (auf Wunsch unsichtbar, Modifier .bild-label--ki). */
.image-frame {
  position: relative;
}

.bild-label {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  font-size: var(--fs-025);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-mittel);
  color: var(--grau-hell);
}

.bild-label--ki {
  /* Auf Wunsch unsichtbar geschaltet (13.09.2026), Markup und Regeln
     oben bleiben unangetastet fuer eine schnelle Rueckkehr. */
  display: none;
}