/* ==========================================================================
   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 — CLAUDE.md section 8, 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);

  /* 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-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.
   Siehe CLAUDE.md Abschnitt 6.                                   */

.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);
}

.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: var(--space-2);
}

.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;
}

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

.icon-phone {
  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;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
}

.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);
}

/* --------------------------------------------------------------------------
   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);
}

/* 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.png");
  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;
}

/* 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);
  background-color: var(--weiss);
  /* the card decides its own layout, not the viewport */
  container-type: inline-size;
}

.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);
}

/* --------------------------------------------------------------------------
   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;
}

.focus-item__more {
  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);
}

/* 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.
   Die offiziellen Logodateien fehlen noch; bis dahin steht je Eintrag
   ein Platzhalter nach Abschnitt 18 der CLAUDE.md. */
.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
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--space-3);
  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);
}

.breadcrumb__link {
  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
   -------------------------------------------------------------------------- */

/* Foto-Platzhalter im Seitenverhältnis 4:5 (800 x 1000), oben in jeder Karte */
.team-item__photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-3);
  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);
}

/* --------------------------------------------------------------------------
   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);
}

/* Keine h2-Regel fuer .prose — sie waere wirkungslos. Auf kontakt.html,
   der einzigen .prose-Seite mit h2, eroeffnet jedes h2 einen eigenen
   .prose-Block in eigener section und ist dort erstes Kind; ein Vortext,
   an dem es kleben koennte, existiert nicht. Gemessen am 31.07.2026:
   Regel eingebaut, 39 Screenshots verglichen, 0 Abweichungen — deshalb
   wieder entfernt. Lange Rechtstexte nutzen .legal in Abschnitt 25. */

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */

/* Anfahrtsskizze, Seitenverhältnis 400 x 370 nach reference/bilder-nachfordern.md.
   Gleiches Muster wie .team-item__photo.placeholder: eigenes aspect-ratio,
   Text zentriert. */
.route-sketch.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 25rem;
  aspect-ratio: 400 / 370;
  margin-block: var(--space-4) var(--space-5);
  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);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

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

.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 (siehe CLAUDE.md Abschnitt 6). */
.form__row--checkbox label {
  align-self: stretch;
  min-width: 0;
  font-size: var(--fs-300);
}

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

/* 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);
  }

  .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;
  }

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

  /* 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);
}