/* Figtree 400 800 normal latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/figtree-400-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree 400 800 normal latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/figtree-400-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 400 italic latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 400 italic latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 400 700 normal latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/source-sans-3-400-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 400 700 normal latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/source-sans-3-400-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   ALMA – Ambulante Lebenshilfe am Main
   Design-Fundament. Alle Farbwerte sind gegen WCAG 2.1 AA geprüft.
   Markenfarben stammen aus dem Logo: #F86049 Koralle, #249FD0 Main-Blau,
   #373B3A Anthrazit.
   ========================================================================= */

:root {
  /* ---- Marke: Koralle -------------------------------------------------- */
  /* 500 ist die Logofarbe. Sie hat auf Weiß nur 3,11:1 und ist deshalb
     ausschließlich Grafik- und Flächenfarbe, niemals Textfarbe.
     Für Text und Buttons dienen 700 (5,10:1) und 800 (7,12:1). */
  --coral-50: #fff5f3;
  --coral-100: #fde4df;
  --coral-500: #f86049;
  --coral-600: #e44b31;
  --coral-700: #c4402a;
  --coral-800: #9e3320;

  /* ---- Marke: Main-Blau ------------------------------------------------ */
  --blue-50: #f1f8fc;
  --blue-100: #dceef7;
  --blue-500: #249fd0;
  --blue-600: #1683b2;
  --blue-700: #136a90;
  --blue-900: #0c4157;

  /* ---- Neutral --------------------------------------------------------- */
  --ink: #373b3a;
  --ink-muted: #5c6462;
  --line: #dfe3e2;
  --sand: #faf8f5;
  --white: #ffffff;

  /* ---- Semantische Rollen ---------------------------------------------- */
  --bg: var(--white);
  --bg-soft: var(--sand);
  --bg-cool: var(--blue-50);
  --bg-warm: var(--coral-50);
  --text: var(--ink);
  --text-soft: var(--ink-muted);
  --border: var(--line);
  --accent: var(--coral-500);
  --accent-strong: var(--coral-700);
  --link: var(--blue-700);
  --focus: var(--coral-700);

  /* ---- Typografie ------------------------------------------------------ */
  --font-head: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Fließende Skala. Der Nutzer kann sie über den Schriftgrößen-Schalter
     zusätzlich um 12,5 % bzw. 25 % anheben (siehe [data-textsize]). */
  --step--1: clamp(0.94rem, 0.92rem + 0.1vw, 1rem);
  --step-0: clamp(1.06rem, 1rem + 0.25vw, 1.19rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.75vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);

  /* ---- Abstände: großzügig, 4-px-Raster -------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1.25rem;
  --space-m: 2rem;
  --space-l: 3rem;
  --space-xl: 4.5rem;
  --space-2xl: 6.5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Form ------------------------------------------------------------ */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgb(55 59 58 / 0.06), 0 2px 8px rgb(55 59 58 / 0.05);
  --shadow-m: 0 4px 12px rgb(55 59 58 / 0.07), 0 12px 32px rgb(55 59 58 / 0.07);
  --shadow-l: 0 8px 24px rgb(55 59 58 / 0.08), 0 24px 56px rgb(55 59 58 / 0.09);

  --container: 76rem;
  --container-narrow: 46rem;

  /* ---- Bewegung -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 240ms;

  /* ---- Ebenen ---------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* Schriftgrößen-Schalter (Barrierefreiheit). Skaliert alles, weil die
   gesamte Skala in rem rechnet. */
html[data-textsize="l"] { font-size: 112.5%; }
html[data-textsize="xl"] { font-size: 125%; }

/* =========================================================================
   Reset
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  /* Muss am Wurzelelement stehen, nicht nur am body: das geschlossene
     Mobilmenü ist position: fixed und wird von einer Begrenzung am body
     nicht erfasst. */
  overflow-x: clip;
}

body {
  margin: 0;
  /* clip statt hidden: schneidet waagerechten Ueberhang ab, ohne
     position: sticky im Kopfbereich zu zerstoeren. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Grundgröße für alle Icons. Ohne sie wächst ein frei stehendes SVG auf die
   volle Spaltenbreite. Spezifischere Regeln weiter unten gewinnen weiterhin. */
.icon { width: 1.25em; height: 1.25em; flex: none; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; }
h4 { font-size: var(--step-0); line-height: 1.35; }

p { margin: 0 0 var(--space-s); max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 var(--space-s); padding-left: 1.2em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--coral-500); }

strong { font-weight: 600; }
small { font-size: var(--step--1); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-l) 0; }

/* =========================================================================
   Fokus & Tastaturbedienung
   ========================================================================= */

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

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: var(--z-modal);
  background: var(--coral-700);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-s); }

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

/* =========================================================================
   Layout
   ========================================================================= */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--cool { background: var(--bg-cool); }
.section--warm { background: var(--bg-warm); }

.section__head { max-width: 44rem; margin-bottom: var(--space-l); }
.section__head--center { margin-inline: auto; text-align: center; }
/* Für Einleitungen, die sonst in zu viele kurze Zeilen zerfallen: mehr
   Breite, und die Schrift eine Stufe kleiner. Beides zusammen ist nötig –
   allein die Breite reicht nicht, weil ein Absatz sonst bei 68 Zeichen
   gedeckelt bleibt. */
.section__head--weit { max-width: 68rem; }
/* Doppelte Klasse, sonst gewinnt die allgemeine Regel weiter unten: sie
   hat dieselbe Gewichtung und steht später in der Datei. */
.section__head.section__head--weit p:not(.eyebrow) {
  font-size: var(--step-0);
  max-width: none;
}
/* :not(.eyebrow), sonst gewinnt diese Regel gegen .eyebrow und färbt die
   Dachzeile grau statt koralle. */
.section__head p:not(.eyebrow) { font-size: var(--step-1); color: var(--text-soft); }
.section__head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral-700);
  margin-bottom: var(--space-2xs);
}

/* Die Spaltenbreiten sind in rem angegeben und wachsen deshalb mit dem
   Schriftgrößen-Schalter mit. min(…, 100%) verhindert, dass eine Mindestbreite
   auf Stufe XL breiter wird als der Bildschirm – sonst entsteht auf kleinen
   Geräten waagerechtes Scrollen. */
.grid { display: grid; gap: var(--space-m); }
/* Zwei Spalten, und zwar wirklich zwei. Mit auto-fit und 19rem Mindestbreite
   passten in den 76rem breiten Container drei Spalten — vier Kacheln standen
   dann als 3 + 1 da, die letzte allein in der zweiten Reihe. Feste zwei
   Spalten ergeben ein 2x2 und geben jeder Kachel rund 570 px statt 340 px. */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 20rem sorgt dafür, dass auf üblichen Desktopbreiten höchstens drei Spalten
   entstehen – sonst bricht ein Sechser-Raster in 4 + 2 um. */
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-head);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--coral-700); color: var(--white); }
.btn--primary:hover { background: var(--coral-800); box-shadow: var(--shadow-m); }

.btn--secondary {
  background: transparent;
  color: var(--blue-700);
  border-color: var(--blue-700);
}
.btn--secondary:hover { background: var(--blue-700); color: var(--white); }

.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--on-dark { background: var(--white); color: var(--blue-900); }
.btn--on-dark:hover { background: var(--blue-50); }

.btn--outline-light { background: transparent; color: var(--white); border-color: rgb(255 255 255 / 0.6); }
.btn--outline-light:hover { background: rgb(255 255 255 / 0.12); border-color: var(--white); }

.btn--sm { min-height: 2.5rem; padding: 0.45rem 1.1rem; font-size: var(--step--1); }

.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* Textlink mit Pfeil – die sekundäre Aktion aus dem Hero */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
  min-height: 2.75rem;
}
.link-arrow span { text-decoration: underline; text-underline-offset: 0.2em; }
.link-arrow .icon {
  width: 1.6em; height: 1.6em;
  padding: 0.35em;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.link-arrow:hover .icon { transform: translateX(3px); background: var(--blue-500); color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }

/* =========================================================================
   Utility-Leiste + Kopfbereich
   ========================================================================= */

.utilitybar {
  background: var(--blue-900);
  color: var(--white);
  font-size: var(--step--1);
}
.utilitybar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-s);
  min-height: 2.75rem;
  padding-block: 0.35rem;
}
.utilitybar a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  color: var(--white);
  text-decoration: none;
  padding: 0.35rem 0;
}
.utilitybar a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.utilitybar .icon { width: 1.1em; height: 1.1em; opacity: 0.85; }

.textsize {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: auto;
}
.textsize__label { opacity: 0.85; }
.textsize__btn {
  /* 44 px: dieselbe Mindestgröße, die wir überall fordern. Gerade der
     Schalter für die Schriftgröße darf nicht schwer zu treffen sein. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--white);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--radius-s);
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.textsize__btn:hover { background: rgb(255 255 255 / 0.15); }
.textsize__btn[aria-pressed="true"] { background: var(--white); color: var(--blue-900); border-color: var(--white); }

.siteheader {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 4.75rem;
  padding-block: 0.6rem;
}

/* ---- Logo ---- */
.logo { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; text-decoration: none; color: var(--ink); }
.logo__mark { width: 2.9rem; height: auto; flex: none; }
.logo__type { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.logo__claim {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--ink-muted);
  margin-top: 0.22em;
}

/* ---- Navigation ---- */
.nav { display: flex; align-items: center; gap: var(--space-s); }
.nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--blue-50); color: var(--blue-700); }
.nav__link[aria-current="page"] { color: var(--coral-700); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0.85rem 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--coral-500);
}
.nav__item { position: relative; }
.nav__link { position: relative; }

/* Untermenü */
.nav__toggle {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.nav__chevron { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease); }
[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 17rem;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  z-index: var(--z-overlay);
}
.nav__sub[hidden] { display: none; }
.nav__sub a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-s);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  text-decoration: none;
}
.nav__sub a:hover { background: var(--blue-50); color: var(--blue-700); }
.nav__sub small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--text-soft); }

.navtoggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero { position: relative; overflow: hidden; background: var(--blue-50); }

/* Die Main-Welle aus dem Logo als übergroßes Wasserzeichen. */
.hero__watermark {
  position: absolute;
  left: -14%;
  bottom: -22%;
  width: min(62rem, 78%);
  color: var(--blue-500);
  opacity: 0.09;
  pointer-events: none;
  z-index: var(--z-base);
}

.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
}
/* Die Aufteilung richtet sich danach, wie viele Zeilen die Überschrift
   braucht. Mit der früheren Aufteilung (1 : 1,05) stand sie bei 1280 px in
   drei Zeilen und bei 1024 px sogar in vier – das wirkte klobig. */
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-l); }
}
@media (min-width: 78rem) {
  /* Ab hier reicht die Breite für zwei Zeilen: 748 px Spalte gegenüber
     707 px für die längste Zeile, also gut 5 % Reserve. Genug, damit ein
     anderer Schriftschnitt den Umbruch nicht zurückdreht. */
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); }
}

.hero__text h1 { margin-bottom: var(--space-s); }
/* Das Maß ist auf die Überschrift abgestimmt: der Vorspann läuft damit in
   zwei Zeilen von 691 und 680 Pixeln, die Überschrift darüber in 707 und
   671. Mit den früheren 34ch standen darunter vier deutlich kürzere Zeilen,
   was neben der breiten Überschrift unruhig wirkte. */
.hero__lead { font-size: var(--step-1); color: var(--ink); max-width: 62ch; }
.hero__actions { margin-top: var(--space-m); }

.hero__media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  aspect-ratio: 4 / 3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 62rem) {
  /* Die weiße Leiste liegt über dem Bild und verdeckte dort das Schuldach.
     Statt sie zu verschieben, bekommt die Karte oben einen Streifen extra
     Himmel: die Hintergrundfarbe ist dieselbe wie im Bild, der Übergang ist
     deshalb nicht zu sehen. Ein fester Wert statt eines Seitenverhältnisses,
     weil auch die Leiste eine feste Höhe hat. */
  .hero__media {
    aspect-ratio: auto;
    padding-top: 8.5rem;
    background: var(--blue-50);
  }
  .hero__media img { height: auto; }
}

/* Oben statt unten: unten im Aufmacherbild stehen die Figuren, die der Kasten
   sonst genau verdeckt. Oben ist Himmel. */
.hero__badge {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  right: var(--space-s);
  display: flex;
  align-items: center;
  /* Etwas knapper als früher: das Aufmacherbild ist schmaler geworden, damit
     die Überschrift in zwei Zeilen passt. Mit den alten Maßen nähme der
     Kasten ein gutes Drittel der Bildhöhe ein. */
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  box-shadow: var(--shadow-s);
}
.hero__badge .icon { width: 1.4rem; height: 1.4rem; color: var(--coral-700); flex: none; }
.hero__badge strong { display: block; font-family: var(--font-head); }

/* Welliger Abschluss zwischen zwei Flächen */
.wave-divider { display: block; width: 100%; height: clamp(2.5rem, 5vw, 5rem); }
.wave-divider path { fill: currentColor; }

/* =========================================================================
   Karten
   ========================================================================= */

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-m);
  background: var(--blue-100);
  color: var(--blue-700);
  margin-bottom: var(--space-s);
}
.card__icon .icon { width: 1.65rem; height: 1.65rem; }
.card__icon--warm { background: var(--coral-100); color: var(--coral-800); }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-soft); font-size: var(--step--1); }
.card__foot { margin-top: auto; padding-top: var(--space-s); }

/* Mehrere Fundstellen nebeneinander: sie sollen umbrechen dürfen und dabei
   auch untereinander Abstand halten. */
.card__foot--badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--blue-100); }
.card--link h3 a { color: inherit; text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.card--link { position: relative; }

.card--soon { background: var(--sand); border-style: dashed; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--blue-100);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
}
.badge--warm { background: var(--coral-100); }

/* =========================================================================
   Ablauf / Schritte
   ========================================================================= */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-m); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } }

.steps li { position: relative; margin: 0; padding-top: var(--space-s); border-top: 3px solid var(--blue-100); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin-bottom: var(--space-xs);
  border-radius: 50%;
  background: var(--coral-500);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
}
.steps h3 { font-size: var(--step-0); margin-bottom: 0.35rem; }
.steps p { font-size: var(--step--1); color: var(--text-soft); }

/* =========================================================================
   Zwei-Spalten-Block mit Bild
   ========================================================================= */

.split { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
  .split--reverse .split__media { order: 2; }
}
.split__media { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-m); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

.checklist { list-style: none; padding: 0; margin: var(--space-s) 0 0; display: grid; gap: 0.85rem; }
.checklist li { display: flex; gap: 0.75rem; margin: 0; }
.checklist .icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--coral-700); margin-top: 0.15em; }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { display: grid; gap: 0.75rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); overflow: hidden; }
.faq__item[open] { border-color: var(--blue-100); box-shadow: var(--shadow-s); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 1.15rem var(--space-s);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-0);
  cursor: pointer;
  list-style: none;
  min-height: 3.25rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--blue-50); }
.faq__q .icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--blue-700); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--space-s) var(--space-s); color: var(--text-soft); }
.faq__a p { font-size: var(--step--1); }

/* =========================================================================
   Abschluss-Band
   ========================================================================= */

.cta-band { position: relative; background: var(--blue-900); color: var(--white); overflow: hidden; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgb(255 255 255 / 0.85); font-size: var(--step-1); }
.cta-band__watermark {
  position: absolute;
  right: -8%;
  top: -30%;
  width: min(40rem, 60%);
  color: var(--white);
  opacity: 0.07;
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: var(--z-raised); text-align: center; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-m); }

/* =========================================================================
   Formulare
   ========================================================================= */

.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* align-content: start ist hier entscheidend. Ohne die Angabe verteilt das
   Raster die überschüssige Höhe (die Felder einer Zeile sind gleich hoch) auf
   seine Zeilen – ein Feld mit zwei Zeilen bekommt dann mehr ab als eines mit
   dreien, das Eingabefeld wächst und sitzt tiefer als sein Nachbar. */
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); }
.field .req { color: var(--coral-700); }
.field__hint { font-size: var(--step--1); color: var(--text-soft); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Browser rendern select mit einer eigenen Mindesthöhe; über die Zeilenhöhe
   allein bekommt man es nicht auf dieselbe Höhe wie ein input. Deshalb hier
   ein gemeinsames Maß in rem – es wächst mit dem Schriftgrößen-Schalter mit. */
.field input:not([type="checkbox"]),
.field select { height: 3.25rem; line-height: 1.35; }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--coral-700); }
.field__error { font-size: var(--step--1); color: var(--coral-800); font-weight: 600; }
.field__error:empty { display: none; }

.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; }
/* Die Beschriftung daneben schaltet mit, die tatsächliche Trefferfläche ist
   also deutlich größer als das Kästchen selbst. */
/* 1.6rem waren gemessen 26 Pixel. Fuer den Finger zu knapp, deshalb 1.9rem
   (30 Pixel); die Beschriftung daneben schaltet ohnehin mit. */
.checkbox input { width: 1.9rem; height: 1.9rem; min-height: 0; flex: none; margin-top: 0.05em; accent-color: var(--coral-700); }
.checkbox { padding-block: 0.35rem; }
.checkbox label { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); line-height: 1.55; }

/* Honeypot gegen Spam – für Menschen und Screenreader unsichtbar */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* =========================================================================
   Kontaktkacheln
   ========================================================================= */

.contact-tiles { display: grid; gap: var(--space-s); }
@media (min-width: 44rem) { .contact-tiles { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } }
.contact-tile {
  display: flex;
  gap: 0.9rem;
  padding: var(--space-s);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
.contact-tile .icon { width: 1.6rem; height: 1.6rem; color: var(--coral-700); flex: none; }
.contact-tile strong { display: block; font-family: var(--font-head); font-size: var(--step--1); color: var(--text-soft); font-weight: 600; }
.contact-tile a { display: inline-block; padding-block: 0.5rem; font-family: var(--font-head); font-weight: 600; font-size: var(--step-0); color: var(--ink); text-decoration: none; }
.contact-tile a:hover { color: var(--blue-700); text-decoration: underline; }

/* =========================================================================
   Fußbereich
   ========================================================================= */

.sitefooter { background: var(--ink); color: rgb(255 255 255 / 0.82); padding-block: var(--space-xl) var(--space-m); }
.sitefooter h2, .sitefooter h3 { color: var(--white); font-size: var(--step-0); margin-bottom: var(--space-xs); }
.sitefooter a { color: rgb(255 255 255 / 0.82); text-decoration: none; }
.sitefooter a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
.sitefooter ul { list-style: none; padding: 0; margin: 0; }
.sitefooter li { margin-bottom: 0.15rem; }
/* Fussbereichslinks auf eine bequeme Tippflaeche bringen: gemessen kamen
   sie auf 38 bis 41 Pixel Hoehe, die angestrebten 44 sind damit sicher. */
.sitefooter li a,
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.35rem;
}
.sitefooter .logo__name, .sitefooter .logo { color: var(--white); }
.sitefooter .logo__name { color: var(--white); }
.sitefooter .logo__claim { color: rgb(255 255 255 / 0.7); }

.footer-grid { display: grid; gap: var(--space-l); }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-size: var(--step--1);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-s); }
.footer-bottom li { margin: 0; }
.footer-bottom a { display: inline-block; padding-block: 0.72rem; }

/* =========================================================================
   Seitenkopf der Unterseiten
   ========================================================================= */

.pagehead { position: relative; background: var(--blue-50); overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.pagehead__watermark { position: absolute; right: -10%; bottom: -40%; width: min(44rem, 70%); color: var(--blue-500); opacity: 0.1; pointer-events: none; }
.pagehead__inner { position: relative; z-index: var(--z-raised); }
.pagehead p:not(.eyebrow) { font-size: var(--step-1); color: var(--text-soft); max-width: 52ch; }

.breadcrumb { font-size: var(--step--1); margin-bottom: var(--space-s); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--text-soft); }
.breadcrumb a { color: var(--text-soft); display: inline-block; padding-block: 0.6rem; }
.breadcrumb li + li::before { align-self: center; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Fließtext-Bereich für Rechtstexte */
.prose { max-width: var(--container-narrow); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.callout {
  padding: var(--space-s) var(--space-m);
  background: var(--blue-50);
  border-left: 4px solid var(--blue-500);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  margin-block: var(--space-m);
}
.callout--warm { background: var(--coral-50); border-left-color: var(--coral-500); }
/* h2 und h3 gleich gestaltet: die Überschriftenebene richtet sich nach der
   Stelle im Dokument, nicht nach dem gewünschten Aussehen. */
.callout h2, .callout h3 { font-size: var(--step-0); margin-bottom: 0.35rem; margin-top: 0; }
.callout p { font-size: var(--step--1); color: var(--text-soft); }

/* Platzhalter, die vor dem Livegang ersetzt werden müssen.
   Die Auswahl ist bewusst spezifisch genug, um auch gegen .sitefooter a und
   .utilitybar a zu gewinnen – sonst bleibt der Text dort weiss auf gelb. */
.todo,
a.todo,
.sitefooter a.todo,
.utilitybar a .todo {
  background: #fff8d6;
  border-bottom: 2px dotted #b8860b;
  color: #6b4e00;
  padding: 0 0.15em;
  font-weight: 600;
}

/* =========================================================================
   Mobile Navigation
   ========================================================================= */

@media (max-width: 74.99rem) {
  /* Ohne diese Zeile bleibt die Schublade in der Kopfzeile stecken.
     Ein backdrop-filter macht das Element zum Bezugsrahmen für alles, was
     darin position: fixed ist – die Schublade bekäme dann die Höhe der
     Kopfzeile (104 px) statt der des Fensters, und die Menüpunkte lägen
     unsichtbar darunter. Der Hintergrund ist zu 94 % deckend, die Unschärfe
     fehlt also kaum. */
  .siteheader { backdrop-filter: none; }

  .navtoggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-m) var(--space-s) var(--space-xl);
    background: var(--white);
    box-shadow: var(--shadow-l);
    overflow-y: auto;
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
  }
  /* Geschlossen: unsichtbar UND aus der Tabreihenfolge genommen. Ohne
     visibility bleiben die Links per Tastatur erreichbar, obwohl sie
     ausserhalb des Bildschirms stehen. */
  .nav {
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .nav[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  /* In der Schublade läuft jeder Eintrag über die volle Breite. Sonst
     endet die Trennlinie dort, wo das Wort aufhört. */
  .nav__link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    min-height: 3.25rem;
    font-size: var(--step-0);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__sub { position: static; min-width: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding-left: var(--space-s); background: var(--blue-50); }
  .nav__close { align-self: flex-end; margin-bottom: var(--space-s); }
  .nav .btn { margin-top: var(--space-s); }
  .navscrim {
    position: fixed;
    inset: 0;
    background: rgb(12 65 87 / 0.5);
    z-index: var(--z-overlay);
  }
  .navscrim[hidden] { display: none; }
  .hero__watermark { left: -30%; bottom: -10%; width: 120%; }
}

@media (min-width: 75rem) {
  .navtoggle, .nav__close, .navscrim { display: none !important; }
}

/* =========================================================================
   Bewegung nur, wenn gewünscht
   ========================================================================= */

/* Der Einblend-Effekt versteckt Inhalt. Das darf nur passieren, wenn auch
   sicher jemand da ist, der ihn wieder sichtbar macht: die Klasse "js" setzt
   ein winziges Skript im Seitenkopf. Ohne JavaScript, im Druck, im Lesemodus
   oder wenn ein Browser den Beobachter nicht bedient, steht der Text da.
   Vorher konnte eine ganze Seite weiß bleiben. */
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

@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;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* =========================================================================
   Druck
   ========================================================================= */

@media print {
  .utilitybar, .siteheader, .cta-band, .navscrim, .hero__watermark { display: none; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* =========================================================================
   Bildergalerie (Standortabschnitt)
   ========================================================================= */

.gallery { display: grid; gap: var(--space-s); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 60rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery__item--wide { grid-column: span 2; grid-row: span 2; }
}

.gallery__item {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-s);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery__item--wide img { aspect-ratio: 4 / 3; }

/* Ablaufschritte untereinander statt nebeneinander – für die Anfahrt, wo die
   Reihenfolge wichtiger ist als der Vergleich. */
@media (min-width: 48rem) {
  .steps--stacked { grid-template-columns: 1fr; gap: var(--space-s); }
}

/* Illustrationen füllen ihren Rahmen ohne Beschnitt: die Seitenverhältnisse
   sind auf die Bildplätze abgestimmt (Aufmacher 4:3, Inhaltsblöcke 3:2). */
.hero__media img[src$=".svg"],
.split__media img[src$=".svg"] { object-fit: contain; background: var(--blue-50); }

/* =========================================================================
   Wegskizze
   ========================================================================= */

/* Auf dem Handy wäre die Skizze auf Viewportbreite geschrumpft unlesbar
   (Beschriftungen unter 10 px). Deshalb behält sie eine Mindestbreite und
   bekommt einen eigenen waagerechten Scrollbereich – die Seite selbst
   scrollt weiterhin nicht seitwärts. Die drei Schritte darunter enthalten
   dieselbe Information als Text. */
.anfahrt-skizze {
  margin: 0 0 var(--space-l);
  overflow-x: auto;
  border-radius: var(--radius-m);
  -webkit-overflow-scrolling: touch;
}
.anfahrt-skizze img { width: 100%; min-width: 34rem; height: auto; }

.lang { display: inline-flex; align-items: center; gap: 0.15rem; }
.lang__label { opacity: 0.85; margin-inline-end: 0.35rem; }
.lang__item {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-s);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.lang__item:hover { background: rgb(255 255 255 / 0.16); text-decoration: none; }
.lang__item--aktiv { background: var(--white); color: var(--blue-900); }

@media (max-width: 47.99rem) {
  /* Auf dem Handy hat die Servicezeile keinen Platz für das Wort davor. */
  .lang__label { display: none; }
}

/* =========================================================================
   Fotoreihen (Standortseite)
   Zwei Blöcke: die Räume, darunter der Eingang. Alle Kacheln haben dasselbe
   Seitenverhältnis und dieselbe Breite – dadurch stehen sie symmetrisch,
   unabhängig davon, ob das Ausgangsfoto hoch oder quer ist.
   ========================================================================= */

.fotoreihe { display: grid; gap: var(--space-s); margin: 0; }
.fotoreihe--vier { grid-template-columns: repeat(2, 1fr); }
.fotoreihe--drei { grid-template-columns: 1fr; }
.fotoreihe--zwei { grid-template-columns: 1fr; }
.fotoreihe--wege { grid-template-columns: 1fr; }

/* Untereinander gestellt würde eine einzelne Kachel die ganze Spalte
   einnehmen: auf einem Tablet gemessen 936 x 700 Pixel für ein Foto. Der
   Deckel hält sie auf Bildgröße statt Aufmachergröße. */
@media (max-width: 47.99rem) {
  .fotoreihe--drei,
  .fotoreihe--wege { max-width: 26rem; }
}

@media (min-width: 48rem) {
  .fotoreihe--zwei { grid-template-columns: repeat(2, 1fr); }
  /* Zwischen Tablet und Laptop zwei nebeneinander statt einer pro Zeile. */
  .fotoreihe--drei { grid-template-columns: repeat(2, 1fr); }

  /* Zwei Fotos mit verschiedenem Format nebeneinander: gleiche Höhe statt
     gleicher Breite. Der Anteil an der Zeile ergibt sich aus dem
     Seitenverhältnis, das jede Abbildung als --v mitbringt. Dadurch stehen
     Ober- und Unterkante auf einer Linie und kein Bild muss beschnitten
     werden – bei gleicher Breite müsste eines von beiden beschnitten werden. */
  .fotoreihe--wege { display: flex; align-items: flex-start; }
  .fotoreihe--wege > figure { flex: var(--v) 1 0%; min-width: 0; }
}

@media (min-width: 62rem) {
  /* Die Zeile endet genau dort, wo oben die zweite Bürokachel endet: zwei
     Spalten des Rasters plus ein Abstand. Dadurch liegt ihre rechte Kante
     auf einer Rasterlinie der Reihe darüber, statt frei im Raum zu enden.
     Kein margin-inline: auto, damit beide Reihen an derselben Kante
     beginnen. */
  .fotoreihe--wege {
    max-width: calc((100% - 2 * var(--space-s)) / 3 * 2 + var(--space-s));
  }
}

.fotoreihe--wege .fotoreihe__bild { aspect-ratio: var(--v); }
@media (min-width: 62rem) {
  .fotoreihe--vier { grid-template-columns: repeat(4, 1fr); }
  .fotoreihe--drei { grid-template-columns: repeat(3, 1fr); }
}

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

/* Das Seitenverhältnis entspricht exakt dem Eingangsfoto (2409 : 1801).
   Nur so sitzt die Vektor-Markierung darauf pixelgenau. */
.fotoreihe__bild {
  position: relative;
  aspect-ratio: 2409 / 1801;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-s);
}
.fotoreihe__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fotoreihe__marke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fotoreihe__marke text {
  font-family: var(--font-head);
  font-weight: 700;
  fill: var(--white);
}

.fotoreihe figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* =========================================================================
   Gesetzesfundstellen, Fußnoten
   ========================================================================= */

/* Fundstellen sind anklickbar und führen zu einer Google-Suche. Damit das
   sichtbar ist, bekommen sie eine gepunktete Unterstreichung und ein kleines
   Zeichen für "öffnet in einem neuen Tab". */
.gesetz {
  color: var(--link);
  text-decoration: underline dotted;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
}
/* Kein nowrap auf der ganzen Fundstelle: "§18 Abs. 3 SGB VIII" ist am Stück
   rund 120 px breit und wanderte als Klotz in die nächste Zeile — davor blieb
   ein Loch von einem Drittel Zeilenbreite. Wo die Fundstelle nicht getrennt
   werden darf, stehen jetzt geschützte Leerzeichen im Text.
   Das geschützte Leerzeichen im content hält den Pfeil am letzten Wort; als
   inline-block wäre er umbruchfähig und könnte allein in einer Zeile landen. */
.gesetz::after {
  content: "\00a0↗";
  font-size: 0.78em;
}
.gesetz:hover { text-decoration-style: solid; background: var(--blue-50); }

sup.fn { font-size: 0.62em; font-weight: 700; color: var(--coral-700); }

.fussnote {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: 46ch;
  border-top: 1px solid var(--border);
  padding-top: var(--space-xs);
}
.fussnote sup { color: var(--coral-700); font-weight: 700; }

/* =========================================================================
   Fußbereich: Verweise als Verweise erkennbar, kompakter gesetzt
   ========================================================================= */

.sitefooter li { margin-bottom: 0; }
.sitefooter li a {
  display: inline-block;
  padding-block: 0.3rem;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 0.2em;
}
.sitefooter li a:hover { text-decoration-color: var(--white); }
.sitefooter h2, .sitefooter h3 { margin-bottom: 0.5rem; }

/* =========================================================================
   Schriftgröße als Aufklappmenü
   ========================================================================= */

.textsize { position: relative; margin-inline-end: auto; }

.textsize__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  color: var(--white);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-s);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.textsize__knopf:hover { background: rgb(255 255 255 / 0.15); }
.textsize__knopf[aria-expanded="true"] { background: var(--white); color: var(--blue-900); }

.textsize__popup {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 0.4rem);
  z-index: var(--z-overlay);
  min-width: 13rem;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  color: var(--ink);
}
.textsize__popup[hidden] { display: none; }
.textsize__titel {
  margin: 0.2rem 0.5rem 0.5rem;
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-soft);
}
.textsize__btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
  font: inherit;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}
.textsize__btn:hover { background: var(--blue-50); }
.textsize__btn[aria-pressed="true"] { background: var(--coral-700); color: var(--white); }
.textsize__btn b { font-family: var(--font-head); font-weight: 700; width: 1.6rem; text-align: center; }

/* =========================================================================
   Mobilmenü: robuster
   Die Schublade darf nicht davon abhängen, dass eine Übergangsanimation
   läuft. Deshalb erhält der offene Zustand eine höhere Spezifität als jede
   andere Regel, die transform setzt, und die Animation wird nur zusätzlich
   angeboten.
   ========================================================================= */

@media (max-width: 74.99rem) {
  .siteheader .nav[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
  }
  .nav {
    /* Eigener Scrollbereich: die Seite dahinter soll nicht mitscrollen. */
    overscroll-behavior: contain;
    background: var(--white);
  }
  /* Wenn der Nutzer weniger Bewegung möchte, gar nicht erst animieren. */
  @media (prefers-reduced-motion: reduce) {
    .nav { transition: none; }
  }
}

/* =========================================================================
   Handyansicht
   ========================================================================= */

@media (max-width: 47.99rem) {
  /* Servicezeile: umbrechen statt quetschen, Reihenfolge sinnvoll halten. */
  .utilitybar__inner {
    justify-content: flex-start;
    gap: 0.35rem 0.9rem;
    padding-block: 0.5rem;
  }
  .utilitybar { font-size: 0.9rem; }
  .textsize { margin-inline-end: 0; order: 3; }
  .lang { order: 1; }

  .siteheader__inner { min-height: 4rem; gap: 0.5rem; }
  .logo__mark { width: 2.4rem; }
  .logo__name { font-size: 1.25rem; }
  .logo__claim { font-size: 0.62rem; }

  .team__bild { width: 100%; }

  /* Dachzeile: "Teilhabeassistenz in Frankfurt am Main" sind 38 Großbuchstaben.
     Bei 15 px und 0,09 em Sperrung braucht das 386 px — mehr, als ein Handy
     hergibt. Kleiner gesetzt und enger gesperrt passt es auf eine Zeile; die
     vw-Stufe hält auch die längeren Übersetzungen (EN, RU) beisammen. */
  .eyebrow {
    font-size: clamp(0.72rem, 3.15vw, var(--step--1));
    letter-spacing: 0.05em;
  }

  /* Aufmacher: Bild zuerst schmaler, Text bekommt Vorrang. */
  .hero__inner { padding-block: var(--space-l); gap: var(--space-m); }
  /* Ohne Ausgleich endet die Einleitung im Aufmacher mit einer Restzeile
     von 149 px unter drei vollen Zeilen von 331 bis 359 px. balance verteilt
     die Wörter gleichmäßig auf dieselbe Zeilenzahl. */
  .hero__lead,
  .pagehead p:not(.eyebrow),
  .section__head p:not(.eyebrow) { text-wrap: balance; }

  .hero__lead { max-width: none; }
  .hero__badge { position: static; margin-top: var(--space-xs); box-shadow: none; }
  .hero__media { aspect-ratio: 4 / 3; }

  .btn-row { gap: var(--space-xs) var(--space-s); }
  .btn { width: 100%; justify-content: center; }
  .btn-row .link-arrow { width: 100%; justify-content: center; }

  .split, .steps { gap: var(--space-m); }
  .section__head { margin-bottom: var(--space-m); }

  /* Karten und Formulare bekommen etwas mehr Innenluft zurück. */
  .card { padding: var(--space-s); }
  .faq__q { padding: 1rem var(--space-s); }

  .footer-grid { gap: var(--space-m); }
  .footer-bottom { margin-top: var(--space-l); }
}

/* Auf sehr schmalen Geräten die größte Überschrift bändigen. */
@media (max-width: 26rem) {
  h1 { font-size: clamp(2rem, 1.2rem + 5vw, 2.6rem); }
  .container, .container--narrow { width: min(100% - 1.75rem, var(--container)); }
}

/* =========================================================================
   Porträt mit Bildunterschrift ("Wer wir sind")
   ========================================================================= */

.person { margin: 0; }
.person__bild {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-m);
  /* Hochkant, aber nicht überhoch: ein einzelnes Porträt soll den Abschnitt
     nicht dominieren. */
  aspect-ratio: 3 / 4;
  max-width: 24rem;
}
.person__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.person figcaption {
  margin-top: var(--space-xs);
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* =========================================================================
   Team ("Menschen, keine Personalnummern")
   Zwei Vorstellungen nebeneinander, jede mit quadratischem Porträt darüber.
   ========================================================================= */

.team {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .team { grid-template-columns: repeat(2, minmax(min(20rem, 100%), 1fr)); }
}

.team__person { margin: 0; }

.team__bild {
  /* Quadratisch, deshalb darf es auf dem Handy die ganze Spalte nehmen:
     Die Höhe wächst nicht über die Breite hinaus, und Bild und Text
     darunter enden auf derselben Kante. */
  width: min(22rem, 100%);
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-cool);
  box-shadow: var(--shadow-s);
  margin-bottom: var(--space-s);
}
.team__bild img { width: 100%; height: 100%; object-fit: cover; }

.team__person h3 { margin-bottom: 0.15rem; }

/* Die Funktion im Markenblau, im selben dunklen Ton wie die Links. Das helle
   Logoblau erreicht auf Weiß nur 3,1:1 und ist deshalb keine Textfarbe. */
.team__rolle {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--blue-700);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-s);
}

.person figcaption strong {
  font-family: var(--font-head);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
}
.person figcaption span {
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* Die Qualifikation im Markenblau. Genommen wird der dunkle Ton, nicht das
   helle Logoblau: auf Weiß erreicht er 6,3:1 und bleibt damit auch für
   kleine Schrift gut lesbar. */
.person figcaption .person__qualifikation {
  color: var(--blue-700);
  font-weight: 600;
}

/* Auf schmalen Fenstern steht das Porträt allein in der Spalte statt neben
   dem Text. Über die volle Breite geriete es dort zum Aufmacher: 3:4 auf
   372 px Breite sind fast 500 px Höhe, mehr als der halbe Bildschirm. Der
   Deckel hält es bei einer Porträtgröße und hält es zugleich scharf, weil
   die 900er Fassung dann reichlich Reserve hat. */
@media (max-width: 59.99rem) {
  /* Der Deckel sitzt auf der figure, nicht auf Bild und Text einzeln.
     Vorher war das Porträt auf 17rem gedeckelt, die Bildunterschrift lief
     über die volle Spalte: Die rechte Kante sprang unter dem Bild um über
     100 px nach außen. Jetzt bilden beide einen Block. */
  .person { max-width: 19rem; margin-inline: auto; }
  .person__bild { max-width: none; }
  .person figcaption { max-width: none; text-align: center; }
}

/* ---- Nur für diese Vorschaudatei ------------------------------------- */
html { background: #ffffff; color-scheme: light; }
.pv-page[hidden] { display: none; }
.pv-dock { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; }
.pv-note {
  position: relative; margin: 0; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem; background: var(--ink); color: #fff;
  border-radius: var(--radius-pill); font-family: var(--font-head);
  font-size: 0.82rem; font-weight: 600; box-shadow: var(--shadow-m);
}
.pv-note button {
  all: unset; cursor: pointer; padding: 0.35rem 0.5rem; border-radius: 6px;
  opacity: 0.85; min-height: 1.9rem; display: inline-flex; align-items: center; gap: 0.35rem;
}
.pv-note button:hover { opacity: 1; background: rgb(255 255 255 / 0.15); }
.pv-note button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv-menu {
  position: absolute; right: 0; bottom: calc(100% + 0.6rem);
  margin: 0; padding: 0.4rem; list-style: none; min-width: 15rem;
  max-height: min(26rem, calc(100vh - 8rem)); overflow-y: auto;
  background: var(--ink); border-radius: var(--radius-m); box-shadow: var(--shadow-l);
}
.pv-menu[hidden] { display: none; }
.pv-menu li { margin: 0; }
.pv-menu a {
  display: block; padding: 0.5rem 0.7rem; border-radius: 8px;
  color: rgb(255 255 255 / 0.86); text-decoration: none;
  font-family: var(--font-head); font-size: 0.84rem; font-weight: 600;
}
.pv-menu a:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.pv-menu a[aria-current="page"] { background: var(--coral-700); color: #fff; }
.pv-menu__trenner { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
@media print { .pv-dock { display: none; } }

/* =========================================================================
   Werkzeuge in der Kopfzeile: Schriftgröße

   Darüber lag früher eine eigene dunkle Servicezeile mit Telefonnummer,
   E-Mail, fünf Sprachkürzeln und dem Schriftgrößen-Schalter — eine ganze
   Zeile für Dinge, die die meisten Besucher nie anfassen. Telefon, E-Mail
   und Adresse stehen ohnehin im Fußbereich. Geblieben ist der Schalter für
   die Schriftgröße, rechts in der Kopfzeile.

   Weil die Kopfzeile dadurch zwei Elemente mehr trägt, klappt die
   Navigation schon ab 75rem ins Menü statt erst ab 62rem — sonst bricht
   sie auf Notebooks um.
   ========================================================================= */

.headertools { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
/* inline-flex, nicht Block: Sonst ist der Wrapper um den Zeilendurchschuss
   höher als sein Knopf und das Klappmenü (top: 100%) öffnet fünf Pixel
   tiefer als das daneben. */
.headertools .textsize { margin: 0; display: inline-flex; }

/* Diese Regeln überschreiben bewusst die Optik aus dem Abschnitt
   "Schriftgröße als Aufklappmenü" weiter oben: Die stammt aus der dunklen
   Servicezeile und setzt weiße Schrift auf durchsichtigem Grund — in der
   weißen Kopfzeile wäre der Knopf damit unsichtbar. */
.textsize__knopf {
  padding: 0.4rem 0.7rem;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: var(--step--1);
  white-space: nowrap;
}
.textsize__knopf:hover { background: var(--blue-50); border-color: var(--blue-500); }
.textsize__knopf[aria-expanded="true"] {
  background: var(--blue-900);
  color: var(--white);
  border-color: var(--blue-900);
}

/* Das Klappmenü hängt rechts an der Kopfzeile und öffnet nach innen, sonst
   ragt es über den rechten Fensterrand hinaus. */
.textsize__popup { inset-inline-start: auto; inset-inline-end: 0; }

/* Die Beschriftungen bleiben immer im Dokument — Screenreader und
   Sprachsteuerung brauchen sie —, sichtbar sind sie nur, wo Platz ist. */
.tool-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 75rem) {
  /* Auf dem Notebook ist die Kopfzeile knapp: Menüpunkte und Knopf dürfen
     nicht mitten im Wort umbrechen, lieber etwas enger stehen. */
  .nav__list { gap: 0.15rem; }
  .nav__link, .nav .btn { white-space: nowrap; }
}

@media (min-width: 75rem) {
  /* Der Zusatz unter dem Namen gehört auf eine Zeile, sonst wächst die
     Kopfzeile nur wegen eines Umbruchs. */
  .siteheader .logo { flex-shrink: 0; }
  .siteheader .logo__claim { white-space: nowrap; }
}

/* =========================================================================
   Schriftgrößen-Schalter in der Kopfzeile

   Er lag eine Zeit lang im Menü: Daneben stand damals die Sprachwahl, und
   zu dritt ließen die Knöpfe dem Namenszusatz keine 140 Pixel mehr — er
   brach auf drei Zeilen um. Die Sprachwahl ist weg, der Platz reicht
   wieder für Logo, Schriftgröße und Menü nebeneinander.
   ========================================================================= */

@media (max-width: 74.99rem) {
  /* Der Menü-Knopf gehört an den äußeren Rand, das Werkzeug davor. */
  .siteheader__inner .headertools { order: 2; margin-inline-start: auto; }
  .siteheader__inner .navtoggle[data-nav-toggle] { order: 3; }

  /* Enger als auf dem Desktop: Auf einem 390-px-Handy teilen sich die drei
     Elemente 362 Pixel, und der Namenszusatz braucht davon allein 141. */
  .headertools .textsize__knopf { padding-inline: 0.55rem; }
}

@media (max-width: 24rem) {
  /* Ab hier reicht es nicht mehr für Symbol und Wort: Auf 375 px fehlen
     sonst zwei Pixel und der Zusatz bricht um. Das Wort "Menü" bleibt für
     Screenreader im Dokument, sichtbar ist nur noch das Symbol. */
  .navtoggle[data-nav-toggle] .navtoggle__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .navtoggle[data-nav-toggle] { padding-inline: 0.75rem; }
}

@media (max-width: 22rem) {
  /* Auf 320 px und darunter zusätzlich das Logo eine Spur kleiner. */
  .logo__mark { width: 2.2rem; }
  .logo__claim { font-size: 0.58rem; }
}