/* Krankengymnastik Voß – Gestaltung
   ---------------------------------------------------------------------------
   Steckbrief aus dem Onboarding: eher hell, eher minimalistisch, eher modern,
   sehr bodenständig, sehr seriös, Animationen dezent, Primärfarbe Blau.

   Daraus: helle Grundfläche mit Blaustich, feine Linien statt Schatten, kleine
   Radien, eine ruhige Serif für Überschriften und eine sachliche Grotesk für
   Fließtext. Farbe trägt die Typografie und die Linien, nicht die Flächen.
   Das Orange stammt aus dem Logo und bleibt dem Terminweg vorbehalten.
*/

/* ------------------------------------------------------------------ Schriften */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-italic.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-ext-italic.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* --------------------------------------------------------------------- Marken */

:root {
  /* Das Blau des Logos reicht von #05318F ueber #2AAAF2 bis #063AAF. Die erste
     Fassung nahm nur die dunkle Seite und wirkte dadurch schwer - jetzt traegt
     das Hellblau sichtbar mit. Das Logo-Orange bleibt der warme Akzent fuer
     Eyebrows und Kanten, nicht die Farbe des Hauptknopfs. */
  --marke: #175788;
  --marke-tief: #0e3c62;
  /* Die dunkle Markenflaeche. Getrennt von --marke-tief, weil die beiden
     Unterschiedliches leisten: --marke-tief ist die kontrastreichere Variante
     der Markenfarbe (im Dunkelmodus also HELLER), --tiefe ist die Flaeche, auf
     der heller Text steht - die muss in beiden Modi dunkel bleiben. Beides in
     eine Variable zu legen hat im Dunkelmodus Info-Leiste, Hero, Kennzahlenband
     und Fuss hellblau eingefaerbt; der helle Text darauf kam auf 1,02:1. */
  --tiefe: #10456e;
  /* Das Hellblau des Logos, unveraendert. */
  --marke-leucht: #2aaaf2;
  --marke-hell: #4a95c8;
  --marke-zart: #dcedfb;
  --marke-zart-2: #eff7fe;
  --akzent: #c2712a;
  --akzent-tief: #9a5620;
  --akzent-zart: #f0e2d2;
  /* Auf dunklem Grund: aufgehellt statt abgedunkelt. Der Wert muss auf dem
     HELLSTEN Ende des Verlaufs halten, nicht nur auf dem dunkelsten. */
  --akzent-hell: #ffd9ae;

  /* Warmes Papier statt kaltem Weiss. Die Neutralen liegen auf der warmen
     Seite, damit das Blau als kuehler Gegenpol wirkt. */
  --grund: #fbf8f3;
  --grund-alt: #f3ede4;
  --flaeche: #ffffff;
  --flaeche-2: #f3ede4;
  --flaeche-3: #eae1d4;
  --linie: #e5ddd0;
  --linie-stark: #d3c8b6;
  --text: #15252e;
  --text-leise: #5c6b74;
  --auf-dunkel: #f7f3ec;
  --auf-dunkel-leise: #dce9f1;

  /* Abstands-Skala. Alles auf der Seite benutzt ausschliesslich diese Werte. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;

  /* Grosszuegige Radien: Pillen fuer Bedienelemente, weiche Ecken fuer Flaechen. */
  --radius: 16px;
  --radius-klein: 10px;
  --radius-gross: 24px;
  --radius-pille: 999px;

  /* Weite, weiche Schatten statt harter Linien - das traegt die Ruhe. */
  --schatten-klein: 0 2px 8px rgba(21, 37, 46, 0.06);
  --schatten: 0 14px 38px -16px rgba(21, 37, 46, 0.22);
  --schatten-gross: 0 36px 90px -40px rgba(21, 37, 46, 0.38);

  --breite: 1200px;
  --breite-text: 66ch;

  --kopf-hoehe: 84px;
  /* Das Logo traegt Schriftzug und Wortmarke - unter 56 px wird
     "Krankengymnastik" zu einem grauen Balken. */
  --logo-hoehe: 62px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --grotesk: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --ueber: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --marke: #7fc4ec;
    --marke-tief: #a8dbf5;
    --tiefe: #102b3f;
    --marke-leucht: #2aaaf2;
    --marke-hell: #4a95c8;
    --marke-zart: #17324a;
    --marke-zart-2: #142a3e;
    --akzent: #e29552;
    --akzent-tief: #eeb27c;
    --akzent-zart: #33251a;
    --akzent-hell: #ffd9ae;

    --grund: #12191d;
    --flaeche: #19232a;
    --grund-alt: #1d2830;
    --flaeche-2: #1d2830;
    --flaeche-3: #26333c;
    --linie: #2b3941;
    --linie-stark: #3c4d57;
    --text: #ecf1f4;
    --text-leise: #a3b3bc;

    --schatten-klein: 0 2px 8px rgba(0, 0, 0, 0.4);
    --schatten: 0 14px 38px -16px rgba(0, 0, 0, 0.6);
    --schatten-gross: 0 36px 90px -40px rgba(0, 0, 0, 0.75);
  }
}

/* ---------------------------------------------------------------- Grundlagen */

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

html {
  /* Kein overflow-x: hidden – das killt position: sticky in der Kopfleiste.
     Ueberstand wird an der Quelle begrenzt, nicht global abgeschnitten. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.modal-offen { overflow: hidden; }

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

a { color: var(--marke); text-underline-offset: 3px; }
a:hover { color: var(--marke-tief); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  /* Leichtes Gewicht in grossen Graden: die Display-Serif traegt dann die
     Anmutung, ohne zu droehnen. */
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  font-optical-sizing: auto;
  /* "Physiotherapeut/in" und "Selbstverstaendlichkeiten" passen bei 320 px in
     keine Zeile und schoben die Seite seitlich auf - "break-word" bricht sie
     dort. Automatische Silbentrennung ist hier aber falsch: sie zerlegte in
     grossen Graden auch Woerter, die bequem in die naechste Zeile gepasst
     haetten ("Weiterentwi-ckeln"). */
  overflow-wrap: break-word;
  hyphens: manual;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 500; }
h4 { font-size: 1.08rem; font-weight: 500; }

/* Ein hervorgehobener Teilsatz in der Hauptueberschrift: kursiv und in der
   Markenfarbe. Das ist der Blickfang der Startseite. */
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--marke);
}

p { margin: 0 0 var(--s4); max-width: var(--breite-text); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }

:focus-visible {
  outline: 3px solid var(--marke-hell);
  outline-offset: 2px;
  border-radius: 3px;
}

.zur-hauptseite {
  position: absolute;
  left: -9999px;
  top: 0;
  /* Feste Farben statt var(--marke): im Dunkelmodus hellt das Blau auf und
     weisser Text darauf kam nur noch auf 2,2:1. */
  background: #062a68;
  color: #ffffff;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-klein);
  z-index: 200;
}
@media (prefers-color-scheme: dark) {
  .zur-hauptseite { background: #dbe7f8; color: #08182f; }
}
.zur-hauptseite:focus { left: var(--s4); top: var(--s4); }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.abschnitt { padding-block: var(--s9); }
.abschnitt--eng { padding-block: var(--s8); }
.abschnitt--schmal { padding-block: var(--s7); }
/* Warme Zwischenflaeche */
.abschnitt--flaeche { background: var(--grund-alt); }
/* Reines Weiss, abgesetzt durch feine Kanten */
.abschnitt--karte { background: var(--flaeche); border-block: 1px solid var(--linie); }
/* Dunkles Band - traegt Kennzahlen und Zwischenrufe */
.abschnitt--dunkel {
  background: linear-gradient(120deg, #0d3a5e 0%, var(--tiefe) 55%, #17629b 100%);
  color: var(--auf-dunkel);
}
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel h2 em { color: var(--akzent-hell); }
.abschnitt--dunkel .lead,
.abschnitt--dunkel p { color: var(--auf-dunkel-leise); }
.abschnitt--dunkel .eyebrow { color: var(--akzent-hell); }

@media (max-width: 720px) {
  .abschnitt { padding-block: var(--s8); }
}

.eyebrow {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 0.76rem;
  font-weight: 600;
  /* Sehr weite Sperrung - das allein macht aus einer Zeile eine Auszeichnung. */
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--akzent-tief);
  margin: 0 0 var(--s4);
}

.lead {
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.24rem);
  line-height: 1.6;
  color: var(--text-leise);
  max-width: 56ch;
}

.abschnitt__kopf { margin-bottom: var(--s6); }
.abschnitt__kopf p { margin-bottom: 0; }

/* ------------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 50px;
  padding: 0.95em 1.7em;
  border: 1px solid transparent;
  border-radius: var(--radius-pille);
  font-family: var(--grotesk);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ueber), background var(--ueber),
              border-color var(--ueber), color var(--ueber), box-shadow var(--ueber);
}
.knopf:hover { transform: translateY(-1px); }

/* Der Hauptweg ist die Marke, nicht der Akzent: ein durchgehend oranger Knopf
   waere lauter als die ganze uebrige Seite. */
.knopf--haupt {
  background: var(--marke);
  border-color: var(--marke);
  color: #fff;
  box-shadow: var(--schatten-klein);
}
.knopf--haupt:hover {
  background: var(--marke-tief);
  border-color: var(--marke-tief);
  color: #fff;
  box-shadow: var(--schatten);
}

.knopf--marke {
  background: var(--marke);
  border-color: var(--marke);
  color: #fff;
  box-shadow: var(--schatten-klein);
}
.knopf--marke:hover { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }

.knopf--akzent {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  box-shadow: var(--schatten-klein);
}
.knopf--akzent:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #fff; }

.knopf--rand {
  background: var(--flaeche);
  border-color: var(--linie-stark);
  color: var(--text);
}
.knopf--rand:hover { border-color: var(--marke); color: var(--marke); }

.knopf--hell {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.knopf--hell:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

.knopf--breit { width: 100%; }
/* Bei 320 px passte "Terminvereinbarung" mit Zeichen nicht mehr in die Zeile. */
.knopf { max-width: 100%; }
@media (max-width: 400px) {
  .knopf { padding-inline: 1.2em; font-size: 0.94rem; }
  .aktionen { width: 100%; }
  .aktionen .knopf { flex: 1 1 100%; }
}
.knopf[disabled] { opacity: 0.6; cursor: progress; }

.knopf__zeichen { flex: none; width: 1.05em; height: 1.05em; }

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  .knopf--marke, .knopf--marke:hover,
  .knopf--haupt, .knopf--haupt:hover { color: #0b1c25; }
  .knopf--akzent, .knopf--akzent:hover { color: #23150a; }
}

/* -------------------------------------------------------------- Info-Leiste */

/* Oeffnungszeiten, Adresse und Rufnummer stehen ueber allem anderen - das sind
   die drei Angaben, wegen derer Patienten eine Praxisseite ueberhaupt oeffnen. */
.infoleiste {
  background: var(--tiefe);
  color: var(--auf-dunkel-leise);
  font-size: 0.85rem;
}
.infoleiste__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
  min-height: 44px;
}
.infoleiste__punkt {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  /* Adresse und Rufnummer sind antippbar - unter 44 px trifft man sie nicht. */
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.infoleiste a.infoleiste__punkt:hover { color: #fff; }
.infoleiste__punkt svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }
.infoleiste__telefon { margin-left: auto; font-weight: 600; color: var(--auf-dunkel); }

@media (max-width: 860px) {
  .infoleiste__adresse { display: none; }
  .infoleiste__telefon { margin-left: auto; }
}
@media (max-width: 480px) {
  .infoleiste { font-size: 0.8rem; }
}

/* ---------------------------------------------------------------- Kopfleiste */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--grund) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ueber), background var(--ueber), box-shadow var(--ueber);
}
.kopf.ist-gescrollt {
  border-bottom-color: var(--linie);
  background: color-mix(in srgb, var(--grund) 97%, transparent);
  box-shadow: var(--schatten-klein);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--kopf-hoehe);
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
/* Feste Hoehe ueber eine Variable – nie height: 100 % in einem Flex-Kind. */
.kopf__marke .logo { height: var(--logo-hoehe); width: auto; display: block; }

/* Der Schriftzug des Logos ist dunkelblau und auf dunklem Grund nicht mehr zu
   lesen. Statt ihn umzufaerben stehen beide Fassungen im HTML; sichtbar ist
   immer nur eine. Beide Regeln brauchen dieselbe Spezifitaet, sonst gewinnt
   die allgemeinere und es stehen zwei Logos nebeneinander. */
.kopf__marke > .logo-hell { display: block; }
.kopf__marke > .logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  .kopf__marke > .logo-hell { display: none; }
  .kopf__marke > .logo-dunkel { display: block; }
}

.kopf__aktionen { display: flex; align-items: center; gap: var(--s3); }
.kopf__aktionen .knopf { min-height: 44px; padding: 0.75em 1.35em; font-size: 0.92rem; }

.navi { display: flex; align-items: center; gap: var(--s5); }
.navi__liste {
  display: flex;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navi__liste li { margin: 0; }
.navi__link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: var(--s2) 0;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.navi__link:hover { color: var(--marke); }
.navi__link[aria-current="page"] { color: var(--marke); border-bottom-color: var(--marke); }

.navi-schalter {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-pille);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.navi-schalter svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .kopf__innen { gap: var(--s3); }
  .navi-schalter { display: inline-flex; }
  .navi {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    display: none;
    padding: var(--s4) clamp(1.15rem, 4vw, 2.5rem) var(--s5);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
  }
  .navi.ist-offen { display: block; }
  .navi__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navi__liste li + li { border-top: 1px solid var(--linie); }
  .navi__link { padding: var(--s3) 0; border-bottom: none; font-size: 1.05rem; }
  .navi__link[aria-current="page"] { border-bottom: none; }
}

@media (max-width: 620px) {
  .kopf__aktionen .knopf span { display: none; }
  :root { --logo-hoehe: 44px; --kopf-hoehe: 70px; }
}

/* -------------------------------------------------------------- Start-Hero */

.start-hero {
  position: relative;
  /* Oben weniger als unten: der Kopf sitzt direkt darueber, 6,5rem Abstand
     liessen die Ueberschrift wie abgerutscht wirken. Unten bleibt der grosse
     Abstand, dort folgt das Kennzahlenband. */
  padding-block: var(--s7) var(--s9);
  overflow: hidden;
}
/* Sehr weicher warmer Schein hinter der Ueberschrift - gibt der grossen
   Flaeche Tiefe, ohne ein Zierelement zu sein. */
.start-hero::before {
  content: "";
  position: absolute;
  top: -22%;
  left: -12%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--marke-zart) 0%, transparent 62%);
  opacity: 0.7;
  pointer-events: none;
}
.start-hero > .container { position: relative; z-index: 1; }

.start-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* Die Bildspalte ist nur etwa halb so hoch wie die Textspalte. Mittig
   ausgerichtet lagen davon 145 px als Leerraum oben - das Bild schien vom
   Kopf abgeloest. Jetzt beginnt es oben und wird um die Hoehe der Zeile
   "Praxis in Bochum-Wiemelhausen" nach unten versetzt, sodass seine Oberkante
   mit der Ueberschrift fluchtet. Der verbleibende Raum liegt unten, wo die
   Karte ohnehin aus dem Rahmen ragt. */
.start-hero__bild {
  align-self: start;
  margin-top: 2.6rem;
}

.start-hero__text h1 { margin-bottom: var(--s5); max-width: 15ch; }
.start-hero .aktionen { margin-top: var(--s6); }

.start-hero__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--linie);
  list-style: none;
  padding-left: 0;
}
.start-hero__fakten li { margin: 0; }
.start-hero__fakten b {
  display: block;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--marke);
}
.start-hero__fakten span { font-size: 0.88rem; color: var(--text-leise); }

/* Bildseite: grosse Flaeche mit weichem Schatten und einer Karte, die an der
   Unterkante heraussteht. */
.start-hero__bild {
  position: relative;
  margin-bottom: var(--s6);
}
.start-hero__rahmen {
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-gross);
  overflow: hidden;
}
.start-hero__rahmen svg,
.start-hero__rahmen img { width: 100%; display: block; }

.bild-karte {
  position: absolute;
  left: clamp(-1.75rem, -2vw, -1rem);
  bottom: -2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s4);
  max-width: 300px;
  padding: var(--s4) var(--s5);
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.bild-karte__zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--akzent-zart);
  color: var(--akzent-tief);
}
.bild-karte__zeichen svg { width: 20px; height: 20px; }
.bild-karte b { display: block; font-size: 0.97rem; margin-bottom: 2px; }
.bild-karte span { font-size: 0.85rem; color: var(--text-leise); line-height: 1.4; }

@media (max-width: 900px) {
  .start-hero__raster { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig steht das Bild ganz oben - der Versatz aus der zweispaltigen
     Ansicht waere hier nur zusaetzlicher Abstand unter dem Kopf. */
  .start-hero__bild { order: -1; margin-top: 0; margin-bottom: var(--s7); }
  .start-hero__text h1 { max-width: none; }
}
@media (max-width: 560px) {
  .bild-karte { left: var(--s4); right: var(--s4); max-width: none; }
}

/* ------------------------------------------------------- Unterseiten-Heros */

/* Alle Unterseiten teilen sich exakt diesen Baustein: gleiche Mindesthoehe,
   gleiche Struktur, gleiche Aktionszeile. Sonst springen die Seiten. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 360px;
  padding-block: var(--s8);
  background: linear-gradient(140deg, #0d3a5e 0%, var(--tiefe) 42%, #17629b 100%);
  color: var(--auf-dunkel);
  overflow: hidden;
}
.page-hero::after {
  /* Weicher Lichtschein aus der oberen rechten Ecke statt eines Rasters -
     dieselbe Ruhe wie im hellen Start-Hero, nur umgekehrt. */
  content: "";
  position: absolute;
  top: -45%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(42, 170, 242, 0.34) 0%, transparent 66%);
  pointer-events: none;
}
/* Flex-Hero: der Container braucht volle Breite, sonst sitzt der Inhalt
   dank margin:auto neben dem Raster der uebrigen Seite. */
.page-hero > .container { width: 100%; position: relative; z-index: 1; }

.page-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  /* Mittig statt unten: an der Unterkante ausgerichtet sammelte sich der
     gesamte Hoehenunterschied ueber der Faktenspalte - auf der Karriereseite
     mit ihrer vierzeiligen Ueberschrift waren das 220 px Leerraum. */
  align-items: center;
}

.page-hero h1 { color: #fff; }
.page-hero h1 em { color: var(--akzent-hell); }
.page-hero .eyebrow { color: var(--akzent-hell); }

/* Auf dem dunklen Hero traegt der Hauptweg Weiss: ein blauer Knopf auf blauem
   Grund verschwindet - gemessen waren es 1,6:1. */
.page-hero .knopf--haupt,
.abschnitt--dunkel .knopf--haupt {
  background: #fff;
  border-color: #fff;
  color: var(--tiefe);
}
.page-hero .knopf--haupt:hover,
.abschnitt--dunkel .knopf--haupt:hover {
  background: var(--auf-dunkel);
  border-color: var(--auf-dunkel);
  color: var(--tiefe);
}
.page-hero .lead {
  color: var(--auf-dunkel-leise);
  margin-bottom: 0;
  /* Mehr Luft zur Ueberschrift und eine Zeilenlaenge, die den Vorspann am
     Schreibtisch auf zwei Zeilen haelt. Ohne die Begrenzung lief er ueber die
     volle Spaltenbreite und wurde dreizeilig - die linke Heroseite wirkte
     dadurch textlastig. */
  /* s6 statt s5: der untere Abstand der Ueberschrift ist selbst 1,5rem, und
     angrenzende Aussenabstaende fallen zusammen - mit s5 haette sich optisch
     nichts geaendert. */
  margin-top: var(--s6);
  /* 58ch statt 46: bei 46 lief der Karriere-Vorspann in eine dritte Zeile.
     Gemessen ist er ab 56ch zweizeilig, die Spaltenbreite begrenzt ihn nach
     oben ohnehin. */
  max-width: 58ch;
}
.page-hero .aktionen { margin-top: var(--s6); }

.brotkrumen { font-size: 0.85rem; margin-bottom: var(--s4); color: var(--auf-dunkel-leise); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.brotkrumen li { margin: 0; display: flex; gap: var(--s2); align-items: center; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; }
.brotkrumen li + li::before { content: "›"; opacity: 0.65; }
.brotkrumen a { color: var(--auf-dunkel-leise); }
.brotkrumen a:hover { color: #fff; }
.brotkrumen [aria-current] { color: #fff; }

.page-hero__zahlen {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-hero__zahlen li {
  margin: 0;
  padding-left: var(--s5);
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}
.page-hero__zahlen b {
  /* Wie im Kennzahlenband stehen hier auch Woerter, nicht nur Zahlen. Sobald
     eines davon zweizeilig umbricht - "Alle Kassen" tut das in schmalen
     Spalten - sitzen die Beschriftungen daneben unterschiedlich hoch. Die
     Mindesthoehe von zwei Zeilen und die Ausrichtung an der Unterkante halten
     sie auf einer Linie. */
  display: flex;
  align-items: flex-end;
  min-height: 2.2em;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.35em;
  /* "anywhere" statt "break-word": nur damit schrumpft das Flex-Kind unter
     seine natuerliche Wortbreite. Netz fuer Faelle, die die Spaltenbreite
     oben nicht abfaengt. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.page-hero__zahlen span { font-size: 0.88rem; color: var(--auf-dunkel-leise); }

@media (max-width: 860px) {
  .page-hero { min-height: 0; }
  .page-hero__raster { grid-template-columns: minmax(0, 1fr); }
  .page-hero__zahlen {
    /* 165 statt 150 px: bei 560 px passten sonst drei Spalten nebeneinander,
       und "Barrierefrei" ragte aus seiner Spalte. Mit der groesseren
       Mindestbreite bleiben es zwei Spalten - lieber umbrechen als trennen. */
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    padding-top: var(--s5);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ------------------------------------------------------------ Kennzahlenband */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.kennzahlen li {
  margin: 0;
  padding-inline: var(--s3);
}
.kennzahlen li + li { border-left: 1px solid rgba(247, 243, 236, 0.16); }
.kennzahlen b {
  display: block;
  font-family: var(--serif);
  /* Kleiner als bei reinen Zahlen: hier stehen Woerter, und "Kindertherapie"
     ist das laengste davon. Bei 2,2rem brach es mit Trennstrich um, waehrend
     die Nachbarn einzeilig blieben. Die feste Mindesthoehe von zwei Zeilen
     sorgt dafuer, dass die Beschriftungen darunter fluchten - egal ob der Wert
     ein- oder zweizeilig umbricht. */
  display: flex;
  /* Oben ausgerichtet: "Erwachsenentherapie" braucht zwei Zeilen, alle
     anderen Werte eine. An der Unterkante ausgerichtet begann dieser eine
     Wert deshalb hoeher als seine Nachbarn. Oben fluchten die Oberkanten,
     und weil die Mindesthoehe zwei Zeilen umfasst, fluchten die
     Beschriftungen darunter weiterhin. */
  align-items: flex-start;
  justify-content: center;
  min-height: 2.3em;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--akzent-hell);
  margin-bottom: 0.5em;
  /* Seit hier Woerter statt Zahlen stehen: "Hausbesuche" passte bei 320 px
     nicht mehr in die Spalte. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.kennzahlen span {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.72);
  /* Bruchstelle ja, automatische Silbentrennung nein: gesperrte Versalien
     trennte der Browser zu "EI-NEM DACH". Die Labels sind stattdessen kurz
     genug gehalten. */
  overflow-wrap: break-word;
  hyphens: manual;
}

@media (max-width: 900px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
  .kennzahlen li:nth-child(odd) { border-left: none; }
  .kennzahlen span { font-size: 0.76rem; letter-spacing: 0.04em; }
}

/* ---------------------------------------------------------------- Zwischenruf */

/* Ein mittig gesetzter Satz - der zweite Anker der Startseite neben dem
   Kennzahlenband. Bewusst schmal: der Satz soll wirken, nicht der Absatz
   darunter. Auf heller Markenflaeche statt dunkel: drei dunkle Baender auf
   einer Seite waren zu schwer. */
.abschnitt--marke {
  background: linear-gradient(150deg, var(--marke-zart-2) 0%, var(--marke-zart) 100%);
}
.abschnitt--marke .eyebrow { color: var(--marke); }
.abschnitt--marke h2 em { color: var(--marke-leucht); }

.zwischenruf {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.zwischenruf h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  margin-bottom: var(--s5);
}
.zwischenruf .lead { margin-inline: auto; margin-bottom: 0; }

/* ------------------------------------------------------------------ Zeitband */

/* Rhythmuswechsel Nr. 1: der Behandlungsweg laeuft als Band, nicht als Kacheln. */
.zeitband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: schritt;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zeitband li {
  position: relative;
  margin: 0;
  padding: var(--s7) var(--s5) var(--s5);
  border-top: 1px solid var(--linie-stark);
}
.zeitband li::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute;
  top: -19px;
  left: var(--s5);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--marke);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  box-shadow: 0 0 0 6px var(--grund);
}
.zeitband li:first-child { border-top-color: var(--marke); }
.zeitband h3 { margin-bottom: var(--s2); }
.zeitband p { margin: 0; font-size: 0.97rem; color: var(--text-leise); }

@media (prefers-color-scheme: dark) {
  .zeitband li::before { color: #0b1c25; }
}
/* Auf warmen Zwischenflaechen muss der Ring um die Ziffer die Flaeche treffen. */
.abschnitt--flaeche .zeitband li::before { box-shadow: 0 0 0 6px var(--grund-alt); }
.abschnitt--karte .zeitband li::before { box-shadow: 0 0 0 6px var(--flaeche); }

/* Das Bewerbungsformular steht ueber die volle Breite, aber nicht ueber die
   ganze Seite - Formularzeilen ueber 800 px sind muehsam auszufuellen. */
.bewerbung-formular {
  max-width: 820px;
  margin-inline: auto;
  margin-top: var(--s8);
}

@media (max-width: 900px) {
  .zeitband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .zeitband { grid-template-columns: minmax(0, 1fr); }
  .zeitband li { padding-inline: var(--s4); }
  .zeitband li::before { left: var(--s4); }
}

/* -------------------------------------------------------------- Schwerpunkte */

/* Rhythmuswechsel Nr. 2: abwechselnde Zeilen statt Kachelraster.
   Die Karten sind unterschiedlich lang – im Raster gaebe das Loecher. */
.schwerpunkt {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.schwerpunkt + .schwerpunkt { border-top: 1px solid var(--linie); }
/* Jeder zweite Block spiegelt die Anordnung. Dabei muessen auch die
   Spaltenbreiten mitspiegeln, sonst landet das Bild einmal in der schmalen
   und einmal in der breiten Spalte - mit den gezeichneten Motiven sprang es
   dadurch zwischen 454 und 615 px. Bild bleibt jetzt immer die schmalere
   Spalte, der Text die breitere. */
.schwerpunkt:nth-child(even) .schwerpunkt__bild { order: 2; }
.schwerpunkt:nth-child(even) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.schwerpunkt__bild {
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
/* Die Illustrationen tragen feste width/height im SVG - ohne diese Regel
   stehen sie in Originalgroesse in einem breiteren Kasten und lassen rechts
   einen weissen Streifen stehen. */
.schwerpunkt__bild svg,
.gruppen-karte svg,
.start-hero__rahmen svg { width: 100%; height: auto; display: block; }
/* Die Schwerpunktbilder bringen ihre eigene Papierfarbe mit und fuellen den
   Kasten randlos. width/height im <img> halten den Platz frei, bevor das Bild
   da ist. */
.schwerpunkt__bild img { width: 100%; height: auto; display: block; }
.schwerpunkt__kurz {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--akzent-tief);
  margin-bottom: var(--s3);
}
.schwerpunkt__punkte {
  list-style: none;
  padding: 0;
  margin: var(--s4) 0 0;
  display: grid;
  gap: var(--s2);
}
.schwerpunkt__punkte li {
  position: relative;
  margin: 0;
  padding-left: var(--s5);
  font-size: 0.97rem;
  color: var(--text-leise);
}
.schwerpunkt__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--akzent);
}

@media (max-width: 860px) {
  /* Auch der gespiegelte Block muss hier einspaltig werden. Die Regel oben
     traegt mit :nth-child(even) die hoehere Spezifitaet - ohne diese Zeile
     behaelt jeder zweite Schwerpunkt zwei Spalten und schiebt seine Liste
     ueber den Bildschirmrand. */
  .schwerpunkt,
  .schwerpunkt:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .schwerpunkt:nth-child(even) .schwerpunkt__bild { order: 0; }
}

/* -------------------------------------------------- Leistungen: Verzeichnis */

/* Rhythmuswechsel Nr. 3: Verzeichnisliste mit Trennlinien statt 24 Kacheln.
   Was fuer alle Eintraege einer Gruppe gilt, steht einmal im Gruppenkopf. */
.gruppe + .gruppe { margin-top: clamp(2.5rem, 5vw, 4rem); }

.gruppe__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s5) clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--linie-stark);
}
.gruppe__kopf h2 { margin: 0 0 var(--s3); }
.gruppe__anzahl {
  display: block;
  font-size: 0.86rem;
  color: var(--text-leise);
}
.gruppe__anzahl b {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--marke);
}
.gruppe__kopf p { margin: 0; }
.gruppe__hinweis {
  margin-top: var(--s3) !important;
  padding-left: var(--s4);
  border-left: 2px solid var(--akzent);
  font-size: 0.94rem;
  color: var(--text-leise);
}

.verzeichnis { list-style: none; margin: 0; padding: 0; }
.verzeichnis li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s2) clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linie);
}
.verzeichnis dt, .verzeichnis__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
}
.verzeichnis__text { color: var(--text-leise); font-size: 0.97rem; }

/* Der Gruppenkopf stapelt frueher als die Verzeichniszeilen: nebeneinander
   waren Ueberschriftsspalte und Textspalte bei 768 px deutlich ungleich lang. */
@media (max-width: 860px) {
  .gruppe__kopf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .verzeichnis li { grid-template-columns: minmax(0, 1fr); }
}

/* Kompakte Fassung auf der Startseite: nur Namen, in Spalten gesetzt. */
.kurzliste {
  columns: 3 200px;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
}
.kurzliste li {
  break-inside: avoid;
  margin: 0;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.97rem;
}

.gruppen-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
}
.gruppen-karte {
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-klein);
  transition: transform var(--ueber), box-shadow var(--ueber), border-color var(--ueber);
}
.gruppen-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
  border-color: var(--marke-zart);
}
.gruppen-karte h3 { margin-bottom: var(--s2); }

/* Drei Karten in zwei Spalten: die dritte steht sonst allein links. Sie laeuft
   dann ueber die ganze Reihe und richtet ihren Inhalt quer an. Mittig setzen
   wurde verworfen - eine mittige Einzelkarte wirkt verloren. */
@media (min-width: 700px) and (max-width: 1023px) {
  .gruppen-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gruppen-karten > .gruppen-karte:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
    gap: var(--s4) var(--s5);
    align-items: start;
  }
  .gruppen-karten > .gruppen-karte:last-child:nth-child(odd) > * { margin-bottom: 0; }
  .gruppen-karten > .gruppen-karte:last-child:nth-child(odd) .kurzliste {
    columns: 1;
    margin-top: 0;
  }
}
.gruppen-karte p { font-size: 0.97rem; color: var(--text-leise); margin-bottom: var(--s4); }
/* Haengt unten in der Karte: das Raster streckt alle Karten einer Reihe auf
   dieselbe Hoehe, ohne das klafft unter der kuerzesten Liste eine Luecke. */
.gruppen-karte__mehr {
  font-size: 0.94rem;
  font-weight: 600;
  margin-top: auto;
  padding-top: var(--s4);
  margin-bottom: 0;
}

/* --------------------------------------------------------------- Faktenliste */

/* Rhythmuswechsel Nr. 4: Tabelle statt Karten. */
.fakten {
  width: 100%;
  /* Ohne feste Tabellenbreite zwingt der laengste Zellinhalt die Spalte breiter,
     und die Tabelle ragt aus ihrer Karte. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.99rem;
}
.fakten th, .fakten td { overflow-wrap: anywhere; hyphens: auto; }
.fakten th, .fakten td {
  text-align: left;
  vertical-align: top;
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--linie);
}
.fakten th {
  width: 34%;
  font-family: var(--grotesk);
  font-weight: 600;
  color: var(--text);
}
.fakten td { color: var(--text-leise); }

@media (max-width: 620px) {
  .fakten, .fakten tbody, .fakten tr, .fakten th, .fakten td { display: block; width: auto; }
  .fakten th { padding-bottom: 0; border-bottom: none; }
  .fakten td { padding-top: var(--s1); }
}

/* --------------------------------------------------------------------- Splits */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.split--weit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }

@media (max-width: 1059px) {
  .split, .split--weit { grid-template-columns: minmax(0, 1fr); }
}

.karte {
  padding: var(--s6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-klein);
}
.karte h3 { margin-bottom: var(--s3); }
.karte p:last-child { margin-bottom: 0; }

.hinweiskarte {
  padding: var(--s6);
  background: var(--akzent-zart);
  border: 1px solid transparent;
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hinweiskarte h3 { color: var(--akzent-tief); }
.hinweiskarte p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- Kontakt */

/* Die Selbstbeschreibung des Inhabers aus dem Onboarding. */
.inhaber__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--akzent-tief);
}

/* Kopf einer Inhaber-Karte: rundes Portraet links, Name und Funktion rechts.
   Auf beiden Seiten dieselbe Zeile - "Ueber uns" und Karriereseite zeigen
   denselben Menschen, das soll auch gleich aussehen. */
.karte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}
/* Neben dem Bild braucht "Physiotherapeut" rund 9rem. Bleibt weniger uebrig,
   rutscht der Name unter das Bild statt mitten im Wort umzubrechen. */
.karte__kopf > :not(.portraet) { flex: 1 1 9rem; min-width: 0; }
.karte__kopf h3 { margin-bottom: var(--s1); }
.karte__kopf p,
.karte__kopf .karte__funktion { margin-bottom: 0; }

.portraet {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  /* Ring statt Rahmen: liegt innerhalb der Kante, verschiebt also nichts, und
     nimmt in beiden Farbschemata die Linienfarbe an. */
  box-shadow: 0 0 0 1px var(--linie), var(--schatten-klein);
}

.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.kontaktliste li { margin: 0; display: grid; gap: var(--s1); }
.kontaktliste dt, .kontaktliste .kontaktliste__label {
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.kontaktliste a, .kontaktliste .kontaktliste__wert {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
  font-weight: 500;
  text-decoration: none;
  /* "voss@koerperakademie.com" schiebt die Karte sonst auf. "break-word"
     statt "anywhere": die Adresse traegt hinter dem @ eine erlaubte
     Umbruchstelle (siehe mail_text in build.py), gebrochen wird nur, wenn es
     ohne sie nicht geht. Zuvor blieb ein einzelnes "m" auf der zweiten
     Zeile stehen. */
  overflow-wrap: break-word;
}
.kontaktliste .kontaktliste__wert { color: var(--text); }
/* Browser ruecken <dd> von sich aus um 40 px ein. Das war hier nie gewollt:
   die Werte standen versetzt unter ihren Beschriftungen, und der Platz fehlte
   der laengsten Adresse - "voss@koerperakademie.com" brach deshalb um,
   obwohl sie in die Karte gepasst haette. */
.kontaktliste dd { margin: 0; }

/* Der Dreiklang: untereinander mit Trennlinien. In zwei Spalten nahm jeder
   Punkt unterschiedlich viel Platz ein, und die ungerade Anzahl liess den
   letzten allein stehen. In einer Spalte sind alle Zeilen gleich aufgebaut,
   die Nummer traegt die Ordnung. */
.dreiklang {
  counter-reset: dreiklang;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.dreiklang li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  margin: 0;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--linie);
  counter-increment: dreiklang;
}
.dreiklang li::before {
  content: counter(dreiklang);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--marke);
}
.dreiklang h3 { margin-bottom: var(--s2); }
.dreiklang p { margin: 0; max-width: 68ch; color: var(--text-leise); }

/* Die vier Leitprinzipien: numerierte Liste in zwei Spalten, gleiche Optik wie
   das Zeitband, aber ohne die waagerechte Linie - hier gibt es keine
   Reihenfolge in der Zeit. */
.grundsaetze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--s6) var(--s7);
  counter-reset: grundsatz;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grundsaetze li { margin: 0; counter-increment: grundsatz; }
.grundsaetze h3 { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.grundsaetze h3::before {
  content: counter(grundsatz);
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--marke);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
}
.grundsaetze p { margin: 0; color: var(--text-leise); }

/* ----------------------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--linie); }
.faq details {
  border-bottom: 1px solid var(--linie);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
  padding: var(--s5) 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary:hover { color: var(--marke); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--marke);
  border-bottom: 2px solid var(--marke);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--ueber);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin: 0 0 var(--s5); color: var(--text-leise); }

/* ------------------------------------------------------------------ Formular */

/* Zusammenhalten, was nicht getrennt gelesen werden darf: Rufnummern und
   Begriffe wie "Vier-Tage-Woche". Die Klasse stand schon im Markup, hatte aber
   keine Regel - im Pop-up brach "0234 72210" zwischen Vorwahl und Nummer um. */
.nicht-trennen { white-space: nowrap; }

.formular-huelle {
  /* Das Formular steht mal ueber die halbe Seitenbreite, mal im Pop-up. Die
     Kacheln und Felder darin richten sich deshalb nach der CONTAINER-Breite,
     nicht nach der Fensterbreite - eine Media Query hat hier vier Spalten in
     eine 490 px schmale Spalte gesetzt und den Text aus den Kacheln geschoben. */
  container-type: inline-size;
  container-name: formular;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

.schritt-anzeige { margin-bottom: var(--s5); }
.schritt-anzeige__balken {
  height: 4px;
  background: var(--flaeche-3);
  border-radius: var(--radius-pille);
  overflow: hidden;
}
.schritt-anzeige__fuellung {
  height: 100%;
  width: 50%;
  background: var(--marke);
  transition: width var(--ueber);
}
.schritt-anzeige__text {
  display: block;
  margin-top: var(--s2);
  font-size: 0.82rem;
  color: var(--text-leise);
}

.kacheln {
  display: grid;
  /* Acht Kacheln teilen sich glatt in 1, 2 und 4 Spalten - drei Spalten
     liessen eine halbe letzte Reihe stehen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s5);
}
@container formular (min-width: 400px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container formular (min-width: 880px) {
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kachel { position: relative; }
.kachel input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.kachel span {
  display: flex;
  flex-direction: column;
  /* Mittig: die Kacheln sind gleich hoch, ihre Beschriftungen aber
     unterschiedlich lang. Oben ausgerichtet blieb unter kurzen Texten ein
     Loch, mit fester Titelhoehe klaffte es zwischen Titel und Unterzeile.
     Beides faellt weg, wenn der Block in der Mitte sitzt: der Rest verteilt
     sich gleichmaessig auf oben und unten. */
  justify-content: center;
  gap: var(--s2);
  min-height: 84px;
  height: 100%;
  padding: var(--s4) var(--s5);
  /* Lange Fachwoerter wie "Gesundheitssport" sonst ueber die Kachelkante.
     Aber ohne automatische Silbentrennung: die hat aus "Wenn Sie nicht in
     die Praxis kommen können" ein "Pra-xis" gemacht. "break-word" bricht nur
     Woerter, die allein nicht in die Zeile passen - kurze Woerter rutschen
     stattdessen ganz in die naechste Zeile. */
  overflow-wrap: break-word;
  hyphens: manual;
  background: var(--grund-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: border-color var(--ueber), background var(--ueber), box-shadow var(--ueber);
}
.kachel span b { font-size: 0.98rem; font-weight: 600; line-height: 1.3; }

.kachel span small { font-size: 0.86rem; line-height: 1.4; color: var(--text-leise); }
.kachel:hover span { border-color: var(--linie-stark); box-shadow: var(--schatten-klein); }
.kachel input:checked + span {
  background: var(--marke-zart);
  border-color: var(--marke);
}
.kachel input:focus-visible + span { outline: 3px solid var(--marke-hell); outline-offset: 2px; }

.felder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s5);
}
@container formular (min-width: 440px) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feld { display: grid; gap: var(--s2); }
.feld--breit { grid-column: 1 / -1; }
/* Ein einzelnes Feld ueber einer Feldreihe: ohne diesen Abstand stossen die
   Beschriftungen der Reihe direkt an das Feld darueber. */
.feld--abstand { margin-bottom: var(--s5); }
.feld label { font-size: 0.9rem; font-weight: 600; }
/* Das Sternchen ist klein und muss trotzdem 4,5:1 erreichen - der helle
   Akzentton kam auf Weiss nur auf 3,7:1. */
.feld label .pflicht,
.einwilligung label .pflicht { color: var(--akzent-tief); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--s3) var(--s4);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 1rem;
  transition: border-color var(--ueber), box-shadow var(--ueber);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-zart);
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld__fehler { font-size: 0.85rem; color: #c02121; min-height: 0; }
.feld__hinweis { font-size: 0.84rem; color: var(--text-leise); margin: 0; }

/* Datei-Auswahl: der native Knopf sieht in jedem Browser anders aus, deshalb
   bekommt das Feld denselben Rahmen wie die uebrigen Eingaben. */
.feld input[type="file"] {
  padding: var(--s3);
  font-size: 0.94rem;
  cursor: pointer;
}
.feld input[type="file"]::file-selector-button {
  margin-right: var(--s4);
  padding: 0.55em 1.1em;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-pille);
  background: var(--grund-alt);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.feld input[type="file"]::file-selector-button:hover { border-color: var(--marke); }
.feld[data-fehler="ja"] input,
.feld[data-fehler="ja"] select,
.feld[data-fehler="ja"] textarea { border-color: #c02121; }
@media (prefers-color-scheme: dark) {
  .feld__fehler { color: #ff9a9a; }
  .feld[data-fehler="ja"] input,
  .feld[data-fehler="ja"] select,
  .feld[data-fehler="ja"] textarea { border-color: #ff9a9a; }
}

.einwilligung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  margin-bottom: var(--s4);
  font-size: 0.9rem;
  color: var(--text-leise);
}
.einwilligung input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--marke); }
.einwilligung .feld__fehler { grid-column: 2; }

/* Rueckmeldung, auf welche Stelle sich die Bewerbung bezieht. */
.gewaehlte-stelle {
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  background: var(--marke-zart);
  border-radius: var(--radius-klein);
  font-size: 0.95rem;
}
.gewaehlte-stelle[hidden] { display: none; }

.honig-feld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}
.formular__hinweis { font-size: 0.86rem; color: var(--text-leise); margin: var(--s4) 0 0; }
/* Die Fehlerabsaetze stehen leer im Markup, damit eine Meldung sie ohne
   Sprung fuellen kann. Ihr Aussenabstand blieb dabei stehen und riss unter
   den Auswahlkacheln eine Luecke von 16 px auf, die niemand erklaeren kann. */
.feld__fehler:empty { margin: 0; }

.meldung {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--radius-klein);
  font-size: 0.95rem;
}
.meldung--erfolg { background: color-mix(in srgb, var(--marke) 12%, var(--flaeche)); border: 1px solid var(--marke); }
.meldung--fehler { background: color-mix(in srgb, #c02121 10%, var(--flaeche)); border: 1px solid #c02121; }

.schnell-hinweis {
  margin-bottom: var(--s4);
  padding: var(--s4);
  background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche));
  border: 1px solid var(--akzent);
  border-radius: var(--radius-klein);
  font-size: 0.95rem;
}
.schnell-hinweis p { margin-bottom: var(--s3); }
.schnell-hinweis p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------- Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--s4);
}
.modal[hidden] { display: none; }
.modal__grund {
  position: absolute;
  inset: 0;
  background: rgba(12, 49, 81, 0.55);
  backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}
.modal__fenster {
  position: relative;
  width: min(740px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  /* Der Rand war mit 24 px zu knapp: die vier Auswahlkacheln sind selbst
     Flaechen mit eigener Kante und klebten am Fensterrand. */
  padding: clamp(2rem, 4vw, 2.75rem);
  background: var(--grund);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-gross);
}
.modal__schliessen {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}
/* Im Pop-up ist das Fenster selbst schon der Kasten - die Huelle darf darin
   nicht als zweiter erscheinen. Hier fehlte box-shadow: der Schatten der
   Basisregel blieb stehen und zeichnete um die transparente Flaeche einen
   weichen Rahmen mit 24 px Radius. Der sah wie ein eigener weisser Kasten
   aus, an dessen Kante die Auswahlkacheln und der Weiter-Knopf klebten -
   und kein Padding am Fenster konnte daran etwas aendern, weil die Kante
   innerhalb des Paddings lag. */
.modal__fenster .formular-huelle {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.modal__fenster h2 { padding-right: 52px; }

/* ------------------------------------------------------ Schwebende Elemente */

/* Genau zwei Cluster, beide mit Text. Kein Reiter am Rand, kein nackter
   Icon-Kreis, kein Pfeil-nach-oben. */
.schwebend-anfrage {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 54px;
  padding: var(--s3) var(--s6);
  background: var(--marke);
  border: none;
  border-radius: var(--radius-pille);
  box-shadow: var(--schatten);
  color: #fff;
  font-family: var(--grotesk);
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--ueber), background var(--ueber), box-shadow var(--ueber);
}
/* Ausgeblendet, sobald ein Formular oder der Fuss im Blick ist - siehe
   verdrahteSchweber() in app.js. Nicht display:none, damit der Uebergang
   weich bleibt und nichts springt. */
.schwebend--weg {
  opacity: 0;
  /* visibility zusaetzlich: opacity haengt an der Transition, und die laeuft
     in gedrosselten Tabs nicht. Ohne diese Zeile blieb der Knopf dort sichtbar
     und nur nicht mehr klickbar - schlimmer als beides zusammen. */
  visibility: hidden;
  transform: translateY(0.75rem);
  pointer-events: none;
}
.schwebend-anfrage, .mobil-leiste {
  /* visibility bewusst ohne Uebergang: mit Transition haengt sie an der
     Animation, und die laeuft in gedrosselten Tabs nicht - dort blieb der
     Knopf sichtbar. So schaltet sie sofort, das Weichzeichnen uebernimmt
     opacity. */
  transition: opacity var(--ueber), transform var(--ueber);
}

.schwebend-anfrage:hover {
  background: var(--marke-tief);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--schatten-gross);
}
.schwebend-anfrage svg { width: 18px; height: 18px; flex: none; }

.seite-kontakt .schwebend-anfrage { display: none; }

.mobil-leiste { display: none; }

@media (max-width: 720px) {
  .schwebend-anfrage { display: none; }
  .mobil-leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--linie);
    border-top: 1px solid var(--linie);
  }
  .mobil-leiste a, .mobil-leiste button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 56px;
    padding: var(--s3);
    background: var(--flaeche);
    border: none;
    color: var(--text);
    font-family: var(--grotesk);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .mobil-leiste a { background: var(--marke); color: #fff; }
  .mobil-leiste svg { width: 18px; height: 18px; flex: none; }
  body { padding-bottom: 57px; }
}

@media (prefers-color-scheme: dark) {
  .schwebend-anfrage, .schwebend-anfrage:hover { color: #0b1c25; }
  .mobil-leiste a { color: #0b1c25; }
}

/* --------------------------------------------------------------- Karriere */

.stelle-kopf {
  display: grid;
  /* Sechs Angaben: 1, 2 oder 3 Spalten gehen auf, fuenf nicht. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-klein);
}
/* "align-content: start" ist noetig, weil die Zellen im aeusseren Raster
   gleich hoch werden: ohne die Regel verteilt das innere Raster den
   ueberschuessigen Platz auf seine Zeilen, und "Ab sofort" rutschte neben dem
   zweizeiligen Umfang nach unten. */
.stelle-kopf div { display: grid; align-content: start; gap: var(--s1); }
.stelle-kopf dt, .stelle-kopf b {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.stelle-kopf dd, .stelle-kopf span {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}
@media (min-width: 560px) { .stelle-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stelle-kopf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Eine Stelle als eigener Block - bei zwei offenen Stellen muss auf einen Blick
   klar sein, wo die eine aufhoert und die andere anfaengt. */
.stelle + .stelle {
  margin-top: var(--s9);
  padding-top: var(--s8);
  border-top: 1px solid var(--linie-stark);
}
.stelle__kopf { margin-bottom: var(--s6); }
.stelle__kopf h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  margin-bottom: var(--s3);
}
.stelle__kurz {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
  color: var(--text-leise);
  max-width: 56ch;
  margin: 0;
}
.stelle h4 {
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 2px solid var(--marke-zart);
  color: var(--marke);
}

/* Vier Gruppen in Leserichtung, bewusst OHNE Kachelrahmen: die Gruppen sind
   unterschiedlich lang, und ohne Kasten faellt eine kuerzere nicht als
   halbleere Flaeche auf. */
.vorteile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s7) var(--s6);
}
@media (min-width: 720px) {
  .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vorteilsgruppe h3 {
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 2px solid var(--marke-zart);
  color: var(--marke);
}
.vorteilsgruppe .aufzaehlung { gap: var(--s3); }
.vorteilsgruppe .aufzaehlung li { font-size: 0.99rem; color: var(--text-leise); }

.karte__funktion {
  margin-top: calc(var(--s4) * -0.5);
  margin-bottom: var(--s5);
  font-family: var(--serif);
  font-style: italic;
  color: var(--akzent-tief);
}

.aufzaehlung {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  /* Sonst laufen die Punkte bei gestapelten Spalten ueber die volle Seitenbreite. */
  max-width: var(--breite-text);
}
.aufzaehlung li {
  position: relative;
  margin: 0;
  padding-left: var(--s5);
}
.aufzaehlung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 2px;
  background: var(--marke);
}

/* ------------------------------------------------------------------ Rechts */

.rechtstext { max-width: var(--breite-text); }
.rechtstext h2 { margin-top: var(--s7); }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { margin-top: var(--s5); }
.rechtstext ul { padding-left: 1.15rem; }
.rechtstext address { font-style: normal; margin-bottom: var(--s4); }

/* -------------------------------------------------------------------- Fuss */

.fuss {
  padding-block: var(--s8) var(--s5);
  background: var(--tiefe);
  color: var(--auf-dunkel-leise);
  font-size: 0.95rem;
}
@media (prefers-color-scheme: dark) {
  .fuss { border-top: 1px solid var(--linie); }
}
.fuss a { color: var(--auf-dunkel); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss h2, .fuss h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--s3); }

.fuss__raster {
  display: grid;
  /* Vier Spalten statt drei: die Seitenliste trug bis 27.08.2026 acht
     Eintraege - fuenf Seiten und drei Leistungsgruppen in einer Liste. Die
     Spalte war dadurch doppelt so hoch wie die Markenspalte daneben, und
     inhaltlich standen Seiten und Anwendungen ununterscheidbar untereinander.
     Getrennt sind die vier Bloecke ungefaehr gleich hoch. */
  /* Die Kontaktspalte bekommt mehr Breite als die beiden Linklisten: bei
     gleichen Spalten brach "info@krankengymnastik-voss.de" mitten in der
     Adresse um. */
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.fuss__raster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fuss__raster li { margin: 0; }
/* Im Fuss steht die vollstaendige Fassung mit Claim - dort ist genug Platz. */
.fuss__marke .logo { height: 88px; width: auto; margin-bottom: var(--s4); }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s5);
  font-size: 0.88rem;
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.fuss__unten li { margin: 0; }

/* Zwischenstufe: vier Spalten brauchen Breite, eine einzige waere auf dem
   Tablet zu leer. */
@media (max-width: 1000px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fuss__raster { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* Der Recruiting-Hinweis auf der Startseite. Bewerber kommen ueber die
   Meta-Anzeigen direkt auf die Karriereseite - dieser Hinweis ist fuer die,
   die auf der Startseite landen. Er steht hinter dem Praxisabschnitt und
   bewusst nicht im Hero: dort haette er dem Termin-CTA Aufmerksamkeit
   genommen.

   Zwei Fassungen davor: erst auf --grund-alt, also derselben Farbe wie der
   Abschnitt darueber - ging unter. Dann als randloses Band ueber die volle
   Breite - wirkte kahl, und der Knopf am rechten Rand lag unter der
   schwebenden Pille. Jetzt eine Karte im Container: der Knopf hat Abstand zum
   Fensterrand, und die Flaeche ist ein bewusstes Element statt eines
   Balkens. */
.recruiting { padding-block: var(--s6); }
.recruiting__karte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  padding: var(--s5) var(--s6);
  background: var(--marke-zart);
  border: 1px solid color-mix(in srgb, var(--marke) 22%, transparent);
  border-radius: var(--radius);
}
.recruiting__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--marke);
}
.recruiting__zeichen svg { width: 22px; height: 22px; }
/* Der Inhalt nimmt den Rest, damit der Knopf rechts steht und bei wenig
   Platz als Ganzes umbricht. */
.recruiting__inhalt { flex: 1 1 16rem; }
/* Der Knopf haelt Abstand zur rechten Kante: dort schwebt die Anfrage-Pille,
   und beide sollen sichtbar bleiben, ohne sich zu ueberlagern. Die Pille
   beginnt rund 230 px vor dem Fensterrand, die Karte liegt selbst schon
   72 px innen - 11rem zusaetzlich halten den Knopf davor. */
.recruiting__karte .knopf { margin-right: clamp(0rem, 9vw, 11rem); }
@media (max-width: 720px) {
  /* Dort gibt es keine Pille, sondern die Leiste am unteren Rand. */
  .recruiting__karte .knopf { margin-right: 0; }
}
.recruiting__zeile {
  margin: 0 0 2px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  color: var(--tiefe);
}
.recruiting__text { margin: 0; font-size: 0.95rem; color: var(--text-leise); }

@media (prefers-color-scheme: dark) {
  .recruiting__zeile { color: var(--auf-dunkel); }
  .recruiting__zeichen { background: var(--grund); color: var(--marke-hell); }
}

/* ------------------------------------------------------------------ Karte */

.maps { display: grid; gap: var(--s3); }