/* ==========================================================================
   Ergotherapie Ackermann — Stylesheet
   Seitenhintergrund #FBFBF0, abgesetzte Abschnitte #F5F5DC, Karten reinweiß.
   Grün (#286E23) & Gelbgrün (#BCCE00) als Akzente
   Zilla Slab (Überschriften) + Source Sans 3 (Fließtext)
   Google Fonts selbst gehostet (assets/fonts) — keine Verbindung zu Google-Servern

   Animationen: gezielt und sparsam. Eine Bewegungsidee (fade-up) in zwei
   Anwendungen — .animate-in beim Laden, [data-reveal] beim Hereinscrollen.
   Hover-/Focus-Zustände sind Mikrointeraktionen und zählen nicht dazu.
   ========================================================================== */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/zilla-slab-500.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/zilla-slab-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-700.woff2") format("woff2");
}

:root {
  --color-white: #ffffff;
  --color-green: #286e23;
  --color-green-dark: #1c4f18;
  --color-lime: #bcce00;
  --color-lime-deep: #6f7a00;
  /* Aufgehellter Akzent für TEXT auf grüner Fläche:
     #bcce00 auf #286e23 erreicht nur 3.58:1, dieser Ton 4.58:1 (WCAG AA) */
  --color-lime-soft: #dae473;
  --color-text: #23261f;
  --color-text-soft: #4f554a;
  /* Etwas dunkler als --color-text-soft: dieser Ton steht über dem Hero-Foto
     und liegt dort gemessen bei 9,35:1 */
  --color-text-hero: #333a30;
  /* Seitenhintergrund und abgesetzte Abschnitte (Vorgabe Auftraggeberin).
     Gemessene Kontraste auf #fbfbf0 / #f5f5dc: Fließtext 14,7 / 13,9:1,
     --color-text-soft 7,4 / 7,0:1, --color-green 6,0 / 5,7:1 — alle WCAG AA.
     Karten bleiben reinweiß, damit sie sich weiter abheben. */
  --color-bg-page: #fbfbf0;
  --color-bg-tint: #f5f5dc;
  --color-border: #e0e5d2;
  /* Dieselben Farben als RGB-Kanäle: nur so lassen sich Verläufe und
     Glaseffekte mit Alpha aus Tokens bauen (rgba(var(--…), .94)).
     Ohne diese Tripel standen dort hart kodierte Literale. */
  --color-bg-page-rgb: 251, 251, 240;
  --color-bg-tint-rgb: 245, 245, 220;
  --color-green-rgb: 40, 110, 35;
  --color-white-rgb: 255, 255, 255;
  /* Fehlerzustand Formulare: 7,54:1 auf Weiß, 7,02:1 auf der eigenen
     Tönung — beide Werte nachgerechnet, nicht geschätzt */
  --color-error: #a32020;
  --color-error-bg: #fdf5f4;
  --color-backdrop: rgba(24, 31, 22, 0.72);
  --color-glass: rgba(var(--color-white-rgb), 0.92);

  --font-heading: "Zilla Slab", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --container-width: 1160px;
  --measure: 66ch;
  --radius: 16px;
  --shadow-soft: 0 14px 40px -18px rgba(28, 79, 24, 0.35);
  --shadow-lift: 0 22px 48px -20px rgba(28, 79, 24, 0.45);
  --transition: 200ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: Sprungziele (#kontakt, Skip-Link, TOC-Anker) landen
   sonst hinter dem Sticky-Header */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
/* height:auto ist nötig, damit das height-Attribut im HTML die
   per CSS gesetzten Seitenverhältnisse nicht überschreibt */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* [hidden] muss auch gegen display-Regeln wie .btn (inline-flex) gewinnen —
   JS blendet darüber Bedienelemente ein, die ohne JavaScript nutzlos wären */
[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-page);
  line-height: 1.7;
  font-size: 1.06rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.18;
  color: var(--color-green);
  text-wrap: balance;
  /* Notbremse für deutsche Komposita: „Datenschutzerklärung" ist bei 2rem
     314 px breit und sprengte bei 320 px Viewport die Seite in den
     Horizontalscroll (WCAG 1.4.10). Greift nur, wenn ein einzelnes Wort
     nicht passt, ändert also nichts an bestehenden Umbrüchen. */
  overflow-wrap: break-word;
}

/* Auf schmalen Screens darf getrennt werden, statt hart im Wort zu brechen.
   Braucht lang="de" am <html> (ist gesetzt). Bewusst nur hier: auf großen
   Screens sollen Display-Überschriften unzertrennt bleiben. */
@media (max-width: 480px) {
  h1, h2, h3 { hyphens: auto; }
}

h1 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.28rem; }

/* Rechtstexte enthalten Wortmonster wie „Auftragsverarbeitungsvertrag".
   Sie passen aktuell, aber nicht mehr bei 280 px oder starkem Zoom. */
.legal-content p, .legal-content li { overflow-wrap: break-word; }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-2); }

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Lesbarkeit: Fließtext nie breiter als angenehme Zeilenlänge */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-2); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-top: var(--space-2); }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--color-lime-deep); }
.prose h2 { margin-top: var(--space-3); }
.prose h3 { margin-top: var(--space-3); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-white);
  background: var(--color-green);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.24rem);
  color: var(--color-text-soft);
  max-width: 54ch;
  line-height: 1.6;
}

/* Quellenangaben unter übernommenen Texten */
.text-source { font-size: 0.92rem; color: var(--color-text-soft); }

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
/* Fokusring in Grün statt Gelbgrün: #bcce00 auf Weiß erreicht nur 1.75:1
   und wäre für Tastaturnutzer kaum sichtbar. Grün liegt bei 6.28:1. */
.btn:focus-visible { outline: 3px solid var(--color-green); outline-offset: 3px; }
.btn-primary { background: var(--color-green); color: var(--color-white); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--color-green-dark); box-shadow: var(--shadow-lift); }
.btn-outline { background: rgba(var(--color-bg-page-rgb), .75); border-color: var(--color-green); color: var(--color-green); }
.btn-outline:hover { background: var(--color-green); color: var(--color-white); }
/* Heller Button für grüne Flächen (Kontakt-Box) */
.btn-light { background: var(--color-white); color: var(--color-green-dark); }
.btn-light:hover { background: var(--color-lime-soft); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Mehrere Buttons nebeneinander */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

a:focus-visible,
button:focus-visible { outline: 3px solid var(--color-green); outline-offset: 3px; border-radius: 4px; }
/* Innerhalb grüner Flächen wäre ein grüner Ring unsichtbar.
   Der Primär-Button bleibt grün umrandet — er steht auf weißem Grund. */
.contact-info a:focus-visible,
.contact-info button:focus-visible { outline-color: var(--color-white); }

.text-link {
  color: var(--color-green);
  font-weight: 600;
  border-bottom: 2px solid var(--color-lime);
  padding-bottom: 0.08rem;
  transition: color var(--transition), border-color var(--transition);
}
.text-link:hover { color: var(--color-green-dark); border-color: var(--color-green); }

/* Pfeil-Mikrointeraktion */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* min-height statt Padding: 44 px Tippfläche, ohne den Textabstand
     nach oben zu verschieben */
  min-height: 44px;
  font-weight: 700;
  color: var(--color-green);
  margin-top: var(--space-2);
}
.arrow-link::after {
  content: "→";
  transition: transform var(--transition);
}
.arrow-link:hover::after { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 0.96 statt 0.94 + backdrop-filter: blur(10px). Der Blur kostete bei
     jedem Scroll-Frame eine Neukomposition über die volle Breite und war
     bei 94 % Deckkraft praktisch unsichtbar. */
  background: rgba(var(--color-bg-page-rgb), 0.96);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.7rem;
  /* Der Header darf breiter laufen als der 1160er-Inhalt: acht Menüpunkte
     plus Social-Icons brauchen einzeilig ~1160 px netto (Menüpunkte 687 px
     + 7 Gaps + Brand + Icons) — im 1160er-Deckel bräche die Zeile um */
  max-width: 1320px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 34 px statt 28: das Icon soll den 44er-Kreis sichtbar ausfüllen
   (die Grafik selbst ist zusätzlich randlos zugeschnitten) */
.brand-badge img { width: 34px; height: 34px; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--color-green);
  line-height: 1.15;
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.71rem;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

.main-nav { display: flex; align-items: center; gap: 0.65rem; }

/* Instagram/LinkedIn dauerhaft im Sticky-Header sichtbar */
.header-socials { display: flex; gap: 0.5rem; align-items: center; }
/* 40 px statt 34: größere Tippfläche. Der Header hat dafür Platz, seit ein
   Menüpunkt entfallen ist. Unter 520 px wird wieder verkleinert, dort ist
   die Zeile physisch voll (gemessen: bei 320 px bleiben 0 px Luft). */
.header-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border);
  color: var(--color-green);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.header-socials a:hover {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-green-dark);
  transform: translateY(-2px);
}
.header-socials svg { width: 17px; height: 17px; fill: currentColor; }
/* Unterhalb des Nav-Breakpoints stehen die Icons links vom Burger */
@media (max-width: 1219.98px) { .header-socials { order: -1; } }
/* Schmale Screens: Untertitel raus (steht im Footer), Markenname etwas
   kleiner und kompaktere Icons — sonst quetschen die Header-Socials den
   Markennamen auf drei Zeilen. 36 px erfüllen WCAG 2.5.8 (24 px Minimum);
   die 44 px aus 2.5.5 sind hier nicht erreichbar, ohne den Praxisnamen
   oder den Menü-Button zu opfern. */
/* Die Zeile ist bei 320 px auf den Pixel voll. Gerechnet mit 272 px
   Innenbreite: Badge 40 + Lücke 9 + Icons 2×36 + 6 + Nav-Lücke 10 +
   Burger 44 = 181, für den Markennamen bleiben 91 px — „Ergotherapie"
   braucht bei 1rem rund 85. Wer hier etwas vergrößert, muss nachmessen. */
@media (max-width: 519.98px) {
  .brand-name { font-size: 1rem; }
  .brand-name small { display: none; }
  .brand { gap: 0.55rem; }
  .brand-badge { width: 40px; height: 40px; }
  .brand-badge img { width: 30px; height: 30px; }
  .header-socials { gap: 0.35rem; }
  .header-socials a { width: 36px; height: 36px; }
  .header-socials svg { width: 16px; height: 16px; }
}
/* Unter 320 px (z. B. Galaxy Fold außen) reicht die Zeile für Marke,
   Menü-Button UND Social-Icons nicht mehr — gemessen: bei 300 px fehlen
   13 px. Dann treten die Icons zurück, im Footer stehen sie weiterhin.
   Ohne diese Regel schiebt der Header die ganze Seite in den
   Horizontalscroll. Die 320 px selbst sind die Prüfbreite von WCAG 1.4.10
   und funktionieren MIT Icons. */
@media (max-width: 319.98px) {
  .header-socials { display: none; }
}
.nav-links {
  display: none;
  align-items: center;
  /* 1.05rem statt 1.35rem: mit den Header-Socials bricht die Navigation
     sonst am 1220er-Breakpoint um. Gemessen: Brand 251 + Menüpunkte 687
     + 7 Gaps + Icons 76 müssen in 1157 px passen — mit 1.05rem bleiben
     ~17 px Puffer, mit 1.2rem exakt 0 */
  gap: 1.05rem;
  list-style: none;
}
.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--color-green); border-color: var(--color-lime); }
/* Farbe explizit: .nav-links a (0,1,1) würde sonst den weißen
   Button-Text des Kontakt-Buttons dunkel überschreiben */
.nav-links .btn { padding: 0.55rem 1.25rem; font-size: 0.92rem; border-bottom: none; color: var(--color-white); }
.nav-links .btn:hover { border-color: transparent; color: var(--color-white); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* 44 px: empfohlene Mindestgröße für Tippziele */
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-green);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Im aufgeklappten Menü sind die Einträge Tippziele und keine Textlinks:
   48 px hoch statt 35 px. Der Abstand wandert dafür ins Padding, sonst
   würde das Menü über die Bildschirmhöhe hinauslaufen. */
.nav-links.is-open a:not(.btn) { padding-block: 0.6rem; min-height: 44px; align-items: center; display: flex; }
.nav-links.is-open .btn { margin-top: 0.4rem; }
.nav-links.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-page);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 1220px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
}

/* ---------- Hero Startseite (Bild ab Menü, nach unten ausblendend) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(3rem, 7vw, 4.5rem);
  min-height: clamp(27rem, 66vh, 38rem);
  display: flex;
  align-items: center;
}
/* Container muss als Flex-Item die volle Breite behalten,
   sonst schrumpft er auf Inhaltsbreite und der Text rutscht in die Mitte */
.hero > .container { width: 100%; }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Heller Schleier: oben transparent (Bild sichtbar), unten deckend in der
   Seitenhintergrundfarbe = fade. Der Ton MUSS die Seitenfarbe sein, sonst
   entsteht unten am Bildende eine sichtbare Kante. Deshalb hier das
   RGB-Tripel-Token und keine Literale. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(var(--color-bg-page-rgb), 0.28) 0%,
      rgba(var(--color-bg-page-rgb), 0.42) 38%,
      rgba(var(--color-bg-page-rgb), 0.86) 76%,
      rgba(var(--color-bg-page-rgb), 1) 100%),
    linear-gradient(to right,
      rgba(var(--color-bg-page-rgb), 0.88) 0%,
      rgba(var(--color-bg-page-rgb), 0.62) 42%,
      rgba(var(--color-bg-page-rgb), 0.10) 78%,
      rgba(var(--color-bg-page-rgb), 0) 100%);
}
.hero-copy { max-width: 40rem; }
.hero-copy h1 { color: var(--color-green-dark); }
.hero-copy .lead { color: var(--color-text-hero); }
.hero-signature {
  margin-top: var(--space-3);
  font-weight: 700;
  color: var(--color-green-dark);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-4);
}

/* Auf schmalen Screens steht Text komplett über dem Bild -> stärkerer Schleier */
@media (max-width: 1023px) {
  .hero-bg::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--color-bg-page-rgb), 0.55) 0%,
        rgba(var(--color-bg-page-rgb), 0.72) 45%,
        rgba(var(--color-bg-page-rgb), 0.94) 80%,
        rgba(var(--color-bg-page-rgb), 1) 100%);
  }
  /* 30 % horizontal: im schmalen Hochkant-Ausschnitt bleibt sonst nur die Lücke
     zwischen Annette und dem Schimmel stehen und ihr Kopf fällt aus dem Bild. */
  .hero-bg img { object-position: 30% 30%; }
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.page-hero {
  padding-block: clamp(2.25rem, 5vw, 3.25rem) clamp(1.75rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, var(--color-bg-tint) 0%, var(--color-bg-page) 100%);
}
.page-hero .lead { margin-top: var(--space-2); }

/* ---------- Sections ---------- */
section { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
/* Folgen zwei Abschnitte mit gleichem (weißem) Hintergrund aufeinander,
   würde sich der Abstand sonst verdoppeln. Muss auf beiden Seiten geprüft
   werden — sonst verliert auch ein weißer Abschnitt nach einem farbigen
   (z. B. Grundlagen nach Angebote) fälschlich seinen oberen Abstand und
   rückt an die Farbkante heran. */
section:not(.section-tint):not(.section-warm):not(.contact-section)
  + section:not(.section-tint):not(.section-warm):not(.contact-section) { padding-top: 0; }
.container + .container { margin-top: var(--space-4); }
.section-tint { background: var(--color-bg-tint); }
/* Gleicher Ton wie .section-tint. Beide Klassen bleiben bestehen, weil sie
   im HTML dokumentieren, welche Sektion die Footer-Naht bestimmt. */
.section-warm { background: var(--color-bg-tint); }
.section-head { max-width: var(--measure); margin-bottom: var(--space-4); }
.section-head p { color: var(--color-text-soft); margin-top: var(--space-2); }

/* Bild/Text nebeneinander — Text bleibt lesebreit.
   minmax(0, 1fr) statt 1fr ist hier tragend: Grid-Spuren haben sonst eine
   min-content-Untergrenze, und `overflow-wrap: break-word` senkt die
   min-content-Breite laut Spezifikation NICHT. Ein Wort wie
   „Gleichgewichtstraining" hat die Spur dadurch über den Container hinaus
   gedehnt und die ganze Seite in den Horizontalscroll geschoben. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Einspaltig (unter 900 px) lief das Bild sonst über die volle Containerbreite.
   Der Deckel dagegen saß bis Juli 2026 als `max-height: 26rem` am Bild — mit
   `object-fit: cover` hat das aber **beschnitten statt verkleinert**: bei 700 px
   Viewport fielen 13 %, bei 860 px 30 % der Bildhöhe weg. Auf
   `ueber-die-praxis.html` verschwand damit die untere Zeile des Klingelschilds.
   Der Deckel gehört deshalb auf die Breite, genau wie unten bei `.portrait`.
   34.6rem ≈ 554 px ergibt bei 4:3 rund 415 px Höhe, also dieselbe Obergrenze
   wie vorher — nur ohne Beschnitt. Im zweispaltigen Layout ist die Spur mit
   ~530 px ohnehin schmaler, dort ändert sich nichts. */
.split-media { max-width: 34.6rem; margin-inline: auto; }
/* Hochformat: die Breite wird begrenzt, damit 4:5 nicht am max-height
   hängenbleibt und das Bild faktisch quadratisch beschnitten wird */
.split-media.portrait { max-width: 25rem; margin-inline: auto; }
.split-media.portrait img { aspect-ratio: 4 / 5; max-height: 32rem; }
/* Foto füllt die volle Höhe der Textspalte (Jobs). Erst ab zwei Spalten
   sinnvoll — einspaltig bleibt das natürliche Seitenverhältnis. */
@media (min-width: 900px) {
  .split-media--fill { align-self: stretch; }
  .split-media--fill img { height: 100%; max-height: none; aspect-ratio: auto; }
}
.split-body { max-width: var(--measure); }
.split-body > * + * { margin-top: var(--space-2); }
.split-body h2 + p { margin-top: var(--space-2); }
.split-body ul { padding-left: 1.25rem; }
.split-body li + li { margin-top: 0.4rem; }
.split-body li::marker { color: var(--color-lime-deep); }

/* Zwei Textspalten ohne Bild: oben ausrichten, damit die
   Überschriften auf einer Linie stehen statt vertikal zu schwimmen */
.split--top { align-items: start; }

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.reverse .split-media { order: 2; }
}

/* ---------- Karten ---------- */
.card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover,
.card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-lime);
}
.card > img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
/* Galerie aus Hochformat-Aufnahmen (Räume): 4:5 statt 4:3 */
.gallery-portrait .card > img { aspect-ratio: 4 / 5; }
/* Karten mit Pfeil-Link sind komplett klickbar (unsichtbar vergrößerte Linkfläche);
   der leichte Bild-Zoom ist ein Hover-Übergang, keine Seiten-Animation */
.card-body .arrow-link::before { content: ""; position: absolute; inset: 0; }
.card img { transition: transform var(--transition); }
.card:hover img,
.card:focus-within img { transform: scale(1.04); }
.card-body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 0.5rem; }
.card-body p { color: var(--color-text-soft); font-size: 1rem; }
.card-body .arrow-link { margin-top: auto; padding-top: var(--space-2); }

/* Therapiemittel als Icon-Kacheln statt nackter Aufzählung */
ul.tool-grid {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
@media (min-width: 480px) { ul.tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-grid li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-weight: 600;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tool-grid li:hover { border-color: var(--color-lime); box-shadow: var(--shadow-soft); }
.tool-grid li + li { margin-top: 0; } /* neutralisiert .split-body li + li im Grid */
.tool-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-lime);
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tool-icon svg { width: 22px; height: 22px; }

/* Zweispaltige Liste (z. B. Weiterbildungen) */
@media (min-width: 680px) {
  .columns-list { columns: 2; column-gap: var(--space-4); }
  .columns-list li { break-inside: avoid; }
}

/* Häkchen-Liste (Jobs) */
ul.check-list { list-style: none; padding-left: 0; }
.check-list li { position: relative; padding-left: 1.7rem; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-green);
  font-weight: 700;
}

/* Faktenzeile */
.facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Kein farbiger Seitenbalken mehr: der Akzent sitzt jetzt als kurze Linie
   unter der Kennzahl. Typografische Unterstreichung statt Karten-Reiter. */
.fact strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-green);
  line-height: 1.2;
}
.fact strong::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.45rem;
  margin-bottom: 0.55rem;
  background: var(--color-lime);
}
.fact span { color: var(--color-text-soft); font-size: 0.98rem; }

.offer-block {
  border-top: 1px solid var(--color-border);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.offer-block:first-of-type { border-top: none; padding-top: 0; }
/* Steht eine Abschnittsüberschrift davor, wäre die Trennlinie eine Dopplung */
.section-head + .offer-block { border-top: none; padding-top: 0; }
/* In Angebotsblöcken tragen h3 die Blocküberschrift und brauchen mehr Gewicht */
.offer-block h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

/* Deutlich erkennbarer Platzhalter für Inhalte, die noch nicht freigegeben sind.
   Absichtlich auffällig: er soll vor dem Livegang nicht übersehen werden. */
.placeholder {
  border: 2px dashed var(--color-text-soft);
  border-radius: 12px;
  padding: var(--space-2);
  background: var(--color-white);
  color: var(--color-text-soft);
}
.placeholder strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

/* ---------- Animationen: gezielt und sparsam ----------
   Es gibt eine einzige Bewegungsidee (fade-up) in zwei Anwendungen:
   .animate-in blendet den Seitenkopf beim Laden ein, [data-reveal] blendet
   einzelne Blöcke beim Hereinscrollen ein. Kein Dauerlauf, keine parallelen
   Effekte. Reduzierte Bewegungspräferenz schaltet beides ab. */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.animate-in {
  animation: fade-up 750ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

/* Scroll-Einblendung (Progressive Enhancement): .is-pending setzt
   ausschließlich script.js — ohne JavaScript bleibt nichts unsichtbar.
   fill-mode ist bewusst „backwards" und nicht „both": mit forwards würde
   der Endzustand transform:none den Hover-Effekt der Karten blockieren. */
.is-pending { opacity: 0; }
.is-revealed { animation: fade-up 700ms cubic-bezier(0.22, 0.7, 0.3, 1) backwards; }
/* Karten eines Rasters erscheinen leicht versetzt, nicht alle gleichzeitig */
.card-grid > *:nth-child(2).is-revealed { animation-delay: 110ms; }
.card-grid > *:nth-child(3).is-revealed { animation-delay: 220ms; }

/* Reduzierte Bewegungspräferenz: Bewegung aus, Feedback bleibt.
   Ein globales transition-duration: 0.01ms würde auch Farb- und
   Fokuswechsel abschalten — also gerade das nützliche Feedback, das
   niemandem Beschwerden macht. Stattdessen: Animationen aus,
   Transitions auf nicht-bewegende Eigenschaften begrenzt und die
   dekorativen Hover-Verschiebungen auf null gesetzt. Der Burger behält
   seine Transform (Zustandsanzeige), nur ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-in { animation: none; }
  .is-pending { opacity: 1; }
  .is-revealed { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, outline-color,
                         box-shadow, opacity, fill, stroke !important;
  }
  .btn:hover,
  .card:hover, .card:focus-within,
  .card:hover img, .card:focus-within img,
  .header-socials a:hover, .footer-socials a:hover,
  .contact-info .socials a:hover { transform: none; }
  .arrow-link:hover::after { transform: none; }
}

/* ---------- Kontakt ---------- */
/* Kein align-items: start — die grüne Info-Box und die Formular-Karte
   sollen auf gleicher Höhe abschließen (Grid-Default: stretch) */
.contact-section .container {
  display: grid;
  gap: var(--space-4);
}
.contact-info {
  background: var(--color-green);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.contact-info h2, .contact-info h3 { color: var(--color-white); }
.contact-info a { color: var(--color-lime-soft); font-weight: 700; }
.contact-info a:hover { text-decoration: underline; }
.contact-info .addr { margin-top: var(--space-2); color: rgba(255,255,255,0.92); }
.contact-info .socials { display: flex; gap: 0.65rem; margin-top: var(--space-3); }
.contact-info .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--color-white-rgb), 0.14);
  transition: background var(--transition), transform var(--transition);
}
.contact-info .socials a:hover { background: var(--color-lime); transform: translateY(-2px); }
.contact-info .socials svg { width: 20px; height: 20px; fill: currentColor; color: var(--color-white); }
.contact-info .socials a:hover svg { color: var(--color-green-dark); }
/* Farbe explizit: .contact-info a (Spezifität 0,1,1) würde sonst
   den .btn-light-Text lime-soft färben — unlesbar auf Weiß */
.contact-info .btn-light { margin-top: var(--space-3); color: var(--color-green-dark); }
.contact-info .btn-light:hover { color: var(--color-green-dark); }
.contact-info .btn-light svg { fill: none; stroke: currentColor; }

.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-soft);
}
.form-row { margin-bottom: var(--space-2); }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.94rem; }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(var(--color-green-rgb), 0.16);
}
/* Für Tastaturnutzer reicht der 16-%-Schein nicht: gemessen 1,26:1 gegen
   Weiß. Deshalb derselbe 3-px-Ring wie bei den Auswahlfeldern (6,03:1).
   Muss nach der :focus-Regel stehen, sonst gewinnt dort outline: none. */
.form-row input:focus-visible,
.form-row textarea:focus-visible {
  outline: 3px solid var(--color-green);
  outline-offset: 2px;
}
/* Nur vertikal — horizontales Ziehen würde das Formular-Layout sprengen */
.form-row textarea { resize: vertical; }
/* Eine Karte, die allein in der Sektion steht, würde sonst über die
   gesamte Containerbreite laufen (Bewerbungskarte auf jobs.html) */
.form-card--narrow { max-width: 46rem; }

/* Die Auswahlgruppen (.form-choice, Radio-Buttons) sind mit dem
   Bewerbungsformular entfallen (Juli 2026) — sie standen nur dort. Die
   Regeln samt Begründung stehen in CLAUDE.md, falls wieder eins kommt. */

.form-note { font-size: 0.9rem; color: var(--color-text-soft); margin-top: var(--space-2); }
.form-success {
  display: none;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-lime);
  border-radius: 10px;
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-green-dark);
}
.form-success.is-visible { display: block; }

/* Fehlermeldung des Versands. Steht im Formular (das nur bei ERFOLG
   ausgeblendet wird), ist per role="alert" ausgezeichnet und ersetzt das
   frühere window.alert: das war nicht nachlesbar, nicht ans Formular
   gebunden und in einer festen Anredeform. Farbe allein trägt die
   Bedeutung nicht — Rahmen, Fläche und Text kommen dazu. */
.form-error {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-error);
  border-radius: 10px;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-weight: 600;
}
/* Pflichtfeld-Sternchen: aria-hidden im HTML, weil Screenreader das
   required-Attribut ohnehin ankündigen */
.req { color: var(--color-error); font-weight: 700; }

.hidden-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Bewerbung per E-Mail (jobs.html). Steht seit Juli 2026 anstelle des
   Bewerbungsformulars in derselben .form-card, deshalb hier und nicht
   weiter unten. */
.apply-card { text-align: center; }
/* .btn-row ist ein Flex-Container, text-align erreicht die Buttons nicht */
.apply-card .btn-row { justify-content: center; }
.apply-lead { color: var(--color-text-soft); }
.apply-mail {
  margin-top: 0.35rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.apply-mail a {
  /* Die Adresse ist hier die Hauptaktion, nicht ein Link im Fließtext:
     inline-block plus Padding bringt sie auf 44 px Tippfläche. */
  display: inline-block;
  padding-block: 0.55rem;
  color: var(--color-green-dark);
  font-weight: 600;
  /* Bei 320 px passt die Adresse in keine Zeile. Sie bricht von selbst am
     Bindestrich („info@ackermann-" / „ergotherapie.de"); anywhere ist nur
     das Netz für noch schmalere Kästen und starken Zoom. */
  overflow-wrap: anywhere;
}
.apply-mail a:hover { color: var(--color-green); }

@media (min-width: 900px) {
  .contact-section .container { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* Fördermittelhinweis — bewusst klein und zurückhaltend, kein eigener
   Marketing-Block, nur die Pflichtangabe */
.funding-section { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.funding-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.funding-note {
  max-width: 46ch;
  text-align: center;
  font-size: 0.94rem;
  color: var(--color-text-soft);
}
.funding-notice img {
  width: 100%;
  max-width: 280px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  /* Nur Fallback-Fläche, solange das Foto lädt — die eigentliche Fläche
     ist das Koppel-Foto in .footer-bg mit hellem Verlaufsfilter */
  background: var(--color-bg-page);
  color: var(--color-text);
  /* Oberhalb der Inhalte bleibt eine reine Foto-Zone, bevor der Text beginnt.
     Auf Kundenwunsch (Juli 2026) deutlich schmaler als zuvor (war
     clamp(190px, 24vw, 260px)) — das Foto bleibt sichtbar, der Leerraum
     zwischen letzter Sektion und Footer-Inhalt schrumpft aber spürbar. */
  --footer-foto: clamp(110px, 13vw, 150px);
  /* Farbe direkt am oberen Rand — muss zur jeweils vorausgehenden Sektion
     passen, sonst entsteht am Übergang ein Farbsprung. Default =
     Seitenhintergrund #fbfbf0 (die meisten Seiten haben dort eine ungefärbte
     Sektion); .footer--seam-* überschreibt das für Seiten mit
     .section-warm/.section-tint direkt davor. */
  --footer-seam: var(--color-bg-page-rgb);
  padding-block: var(--footer-foto) clamp(3rem, 7vw, 4.5rem);
}
/* .section-warm und .section-tint haben denselben Ton, beide Klassen
   bleiben aber bestehen: sie dokumentieren im HTML, welche Sektion den
   Übergang bestimmt. */
.footer--seam-warm,
.footer--seam-tint { --footer-seam: var(--color-bg-tint-rgb); }
/* Das Foto füllt den kompletten Footer. Ein einziger, durchgehender Verlauf
   von oben (deckend, Nahtfarbe der Vorsektion) nach unten (durchsichtiger).
   Die untere Grenze ist mit 90 % keine willkürliche Zahl: gegen den
   dunkelsten Punkt dieses Fotos (nahe Schwarz) liegt der WCAG-Kontrast von
   Dunkelgrün-Text erst ab ~90 % Deckkraft zuverlässig über 4,5:1 — bei
   30-50 % fällt er auf 1,1-1,6:1 und wird unlesbar (gemessen, nicht
   geschätzt). Mehr Durchsicht ist mit dieser Textfarbe auf diesem Foto
   nicht sicher möglich. */
.footer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.footer-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 30 %: so bleiben die Köpfe von Team und Pferden im Bild */
  object-position: 50% 30%;
}
/* Hochformat-Variante unter 700 px: 58 % horizontal, sonst ist der Schimmel
   rechts angeschnitten. Mehr nach rechts schneidet der Frau das Gesicht ab. */
@media (max-width: 699.98px) { .footer-bg img { object-position: 58% 30%; } }
.footer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(var(--footer-seam), 1) 0%,
    rgba(var(--footer-seam), 0.9) 100%);
}
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.footer-brand .brand-name { color: var(--color-green); }
.footer-brand .brand-name small { color: var(--color-text-soft); }
.footer-brand p {
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  max-width: 34ch;
  /* balance statt des globalen pretty: der Satz ist kurz genug (drei Zeilen),
     und pretty richtet nur die letzte Zeile, ließ davor aber 223/261/207 px
     stehen. Wo balance fehlt, greift wieder der normale Umbruch. */
  text-wrap: balance;
}
.site-footer h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-green);
  margin-bottom: var(--space-2);
}
.site-footer ul { list-style: none; }
/* Die Kontaktdaten im Footer sind für einen Teil der Patientinnen und
   Patienten die wichtigste Aktion der Seite. Vorher waren die Links
   24 px hoch; das Padding bringt sie auf 44 px, der Zeilenabstand wandert
   dafür aus dem margin ins padding. */
.site-footer li { margin-bottom: 0.15rem; }
.site-footer li a { display: inline-block; padding-block: 0.5rem; }
.site-footer a { color: var(--color-text); transition: color var(--transition); }
.site-footer a:hover { color: var(--color-green); }
.footer-socials { display: flex; gap: 0.65rem; margin-top: var(--space-2); }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px: im Footer ist genug Platz, anders als in der Kopfzeile */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border);
  color: var(--color-green);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.footer-socials a:hover { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-green-dark); transform: translateY(-2px); }
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--color-text-soft);
}

/* Zwischenschritt mit zwei Spalten. Vier Spalten ab 700 px waren zu früh:
   die Markenspalte war dort nur 161 px breit und der Absatz brach in sechs
   Zeilen (bei 900 px in vier, mit 106-px-Rest). Gemessen, nicht geschätzt. */
@media (min-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 1.7fr statt 1.4fr: erst damit trägt die Markenspalte den Absatz bei 900 px
   in drei Zeilen, statt eine vierte mit einem Wort zu erzeugen. */
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); } }

/* ---------- Rechtstexte ---------- */
.legal-content { max-width: var(--measure); }
.legal-content h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: 1.35rem; }
.legal-content p { margin-bottom: var(--space-2); }
.legal-content ul { padding-left: 1.25rem; margin-bottom: var(--space-2); }
.legal-content li { margin-bottom: 0.35rem; }
.legal-content a.text-link { word-break: break-word; }

/* Inhaltsverzeichnis (Datenschutzerklärung) */
.toc {
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.toc-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
  color: var(--color-green);
  margin-bottom: 0.6rem;
}
.toc ol { list-style: none; padding: 0; margin: 0; }
@media (min-width: 680px) { .toc ol { columns: 2; column-gap: var(--space-4); } }
.toc li { break-inside: avoid; margin: 0; }
/* Sprungmarken sind eine Linkliste, keine Links im Satz: 44 px Tippfläche
   wie im Footer-Menü */
.toc a { display: inline-block; padding-block: 0.5rem; color: var(--color-green); font-weight: 600; }
.toc a:hover { text-decoration: underline; }

/* ---------- Lightbox (Galerie) — natives <dialog>, bewusst ohne Animation ---------- */
.figure-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 62rem);
}
.lightbox::backdrop { background: var(--color-backdrop); }
.lightbox figure {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox-caption { padding: 0.75rem 1.1rem; font-size: 0.95rem; color: var(--color-text-soft); }
/* ---------- Team-Karten und Personen-Dialoge (Über uns) ---------- */
/* Porträts im Hochformat; die Karten selbst bleiben gleich groß */
.team-grid .card > img { aspect-ratio: 4 / 5; }
.team-card .card-body h2 { font-size: 1.45rem; }
.team-role {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-lime-deep);
  margin-top: 0.2rem;
}
/* margin-bottom sichert den Abstand zum Button, der per auto nach unten
   rutscht — so stehen die Buttons aller drei Karten auf einer Linie */
.team-card .team-text { margin-top: var(--space-2); margin-bottom: var(--space-3); }
.team-card .card-body .btn { margin-top: auto; align-self: flex-start; }

.person-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 44rem);
}
.person-dialog::backdrop { background: var(--color-backdrop); }
.person-dialog-inner {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
/* Der Schließen-Button liegt außerhalb des Scrollbereichs und bleibt
   deshalb auch bei langen Texten sichtbar */
.person-dialog-scroll {
  max-height: 82vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.person-dialog-scroll > * + * { margin-top: var(--space-2); }
.person-dialog-scroll h2 { padding-right: 3rem; }
.person-dialog-scroll h3 { margin-top: var(--space-3); }
.person-dialog-scroll ul { padding-left: 1.25rem; }
.person-dialog-scroll li + li { margin-top: 0.4rem; }
.person-dialog-scroll li::marker { color: var(--color-lime-deep); }

.lightbox-close,
.dialog-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--color-glass);
  color: var(--color-green-dark);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}
.lightbox-close:hover,
.dialog-close:hover { background: var(--color-lime); }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.center-block { margin-inline: auto; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-green);
  color: var(--color-white);
  padding: 0.7rem 1.1rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Die Druckregeln gehörten zum „Infoblatt drucken"-Button der aufgelösten
   Seite „Was ist Ergotherapie" und sind mit ihm entfallen. */