@charset "utf-8";
/* PHYSIOFORUM NEUENBUERG – Gestaltung
   -----------------------------------
   Das Logo ist ein diagonaler Keil. Diese Diagonale ist hier das durchgehende
   Motiv: Abschnittskanten, Eyebrow-Zeichen, Zahlenmarken. Sie ersetzt das
   Kachelraster als Gliederungsmittel, damit nicht wieder fuenf Kachelbloecke
   uebereinander stehen.

   Farbrollen (gemessen, nicht geschaetzt):
     --marke     traegt Flaechen und Ueberschriften-Akzente   7,24:1 auf Weiss
     --aktion    traegt AUSSCHLIESSLICH Klickbares            5,26:1 auf Weiss
     --tiefe     die dunkle Flaeche, heller Text darauf      14,26:1
   Wer die Aktionsfarbe fuer eine Flaeche benutzt, macht sie unbrauchbar. */

:root {
  /* Marke: aus assets/logo/logo-quelle.jpg gemessen (#3652A4, 40 % der Flaeche). */
  --marke: #3652a4;
  --marke-leucht: #092ef3;   /* Kampagnenblau [US 09/26], Kontrast 7,8:1 */
  --leucht-zart: #dde2fd;    /* dasselbe Blau, 86 % aufgehellt */
  --marke-tief: #2a4083;
  /* Zwei Rollen, zwei Variablen. --marke-hell traegt Linien und Rahmen auf
     hellem Grund (3,56:1 – reicht fuer Nicht-Text). Fuer TEXT auf den dunklen
     Flaechen ist derselbe Ton zu dunkel: als Eyebrow kam er auf 4,01:1 und
     auf dem hellen Ende des Hero-Verlaufs sogar auf 2,73:1. */
  --marke-hell: #6a86cd;
  --marke-auf-dunkel: #9db2e6;   /* 6,75:1 auf --tiefe, 4,60:1 auf --marke-tief */
  --marke-zart: #eef1fa;
  --marke-zart-2: #f7f8fd;
  --marke-rand: #d5ddf1;

  /* Die dunkle Flaeche. Aus der Marke abgeleitet, nicht neutral-schwarz –
     sonst faellt sie neben dem Blau als Fremdkoerper auf. */
  --tiefe: #1f2a44;
  --tiefe-2: #26325a;

  /* Aktionsfarbe: Smaragd. Deutlich getrennt vom Marken-Blau, damit ein Klick
     nie aussieht wie eine Flaeche. Auf der dunklen Flaeche kommt sie auf
     2,77:1 – dort traegt zusaetzlich der helle Ring (--ring). */
  --aktion: #0f7b57;
  --aktion-tief: #0b5f43;
  --aktion-hell: #16986c;
  --aktion-zart: #e6f4ee;
  --ring: 0 0 0 3px rgba(255, 255, 255, .2);

  /* Neutrale mit Indigo-Stich statt reinem Grau. */
  --grund: #ffffff;
  --grund-2: #f7f8fc;
  --grund-3: #eef0f7;
  --rand: #dfe3ee;
  --rand-stark: #c6cde0;
  /* Eigener Ton fuer Umrisse von Bedienelementen: 3,42:1 auf Weiss und
     3,03:1 auf der zartesten Markenflaeche. --rand-stark kam auf 1,59 und
     genuegt fuer Trennlinien, nicht fuer Knopfkonturen. */
  --rand-knopf: #7e8aae;

  --text: #16203a;          /* 14,7:1 auf Weiss */
  --text-2: #4d566e;        /* 7,6:1 auf Weiss  */
  /* Nebenangaben. #6b7490 erreichte auf reinem Weiss zwar 4,64:1, auf den
     getoenten Flaechen --grund-2 und --aktion-zart aber nur 4,37 bzw. 4,10.
     Gemessen wird gegen den Grund, auf dem der Text wirklich steht. */
  --text-3: #616a85;        /* 5,37:1 auf Weiss · 5,06 auf --grund-2 · 4,74 auf --aktion-zart */
  --text-invers: #ffffff;
  --text-invers-2: #ccd5ea; /* 10,4:1 auf --tiefe */

  /* Sora traegt die Ueberschriften: geometrisch, mit viel Luft. Fuer den
     Fliesstext bleibt Source Sans 3 – auf der Leistungsseite stehen ueber
     5.000 Zeichen, dafuer ist eine Textgrotesk die bessere Wahl. */
  --schrift-display: "Sora", "Trebuchet MS", system-ui, sans-serif;
  --schrift-text: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;

  /* Abstandsskala. Alles auf der Seite benutzt diese Werte – die Abnahme
     prueft, ob irgendwo ein krummer Zwischenwert eingeschlichen ist. */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 5.5rem;  --s10: 7rem;

  --r-klein: 8px;
  --r: 12px;
  --r-gross: 18px;
  --r-pille: 999px;

  --schatten: 0 1px 2px rgba(22, 32, 58, .05), 0 4px 14px rgba(22, 32, 58, .06);
  --schatten-hoch: 0 8px 30px rgba(22, 32, 58, .14);

  --breite: 1180px;
  --breite-text: 66ch;
  --kopf-hoehe: 76px;
  --logo-hoehe: 52px;

  /* Der Keil: eine Kante, ueberall derselbe Winkel. */
  --keil: 2.6vw;
}

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

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

html {
  /* Kein overflow-x:hidden – das wuerde position:sticky in der Kopfleiste
     aushebeln. Ueberstand wird an der Quelle begrenzt, nicht global gekappt. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

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

h1, h2, h3, h4 {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.032em;
  margin: 0 0 .62em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.4rem); }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

p { margin: 0 0 var(--s4); max-width: var(--breite-text);
    hyphens: auto; hyphenate-limit-chars: 10 4 4; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
li { margin-bottom: var(--s2); }
a { color: var(--marke-tief); }
a:hover { color: var(--marke); }
strong { font-weight: 700; }
img, svg, picture { max-width: 100%; }
img { height: auto; }        /* Beschnitten wird in der Pipeline, nicht hier */

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

.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (max-width: 560px) { .container { padding-inline: 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;
}
.springmarke {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--tiefe); color: #fff; padding: var(--s3) var(--s5);
  border-radius: var(--r-klein); text-decoration: none;
}
.springmarke:focus { top: var(--s3); color: #fff; }

/* ------------------------------------------------------------ Bedienelemente */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 48px;                     /* Tippflaeche, nie unter 44 px */
  padding: var(--s3) var(--s5);
  border: 2px solid transparent;
  border-radius: var(--r-pille);
  font-family: var(--schrift-display);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
/* Ein SVG mit viewBox, aber ohne width/height hat keine intrinsische Groesse.
   Als Flex-Kind rechnet es der Browser dann auf 0x0 herunter – gemessen waren
   alle Knopf-Zeichen unsichtbar, obwohl sie im Quelltext standen. */
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

.knopf--aktion { background: var(--aktion); color: #fff; }
.knopf--aktion:hover { background: var(--aktion-tief); color: #fff; }

.knopf--marke { background: var(--marke); color: #fff; }
.knopf--marke:hover { background: var(--marke-tief); color: #fff; }

.knopf--linie {
  background: transparent; color: var(--marke-tief);
  border-color: var(--rand-knopf);
}
.knopf--linie:hover { background: var(--marke-zart); border-color: var(--marke-hell); color: var(--marke-tief); }

/* Nur noch fuer das dunkle geteilte Band und den Fuss. Seit der Hero hell
   ist, waere eine weisse Kontur dort unsichtbar - genau das war sie auf der
   Karriereseite einen Bau lang. */
.knopf--auf-dunkel {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42);
}
.knopf--auf-dunkel:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.knopf--voll { width: 100%; }

.telefon-knopf .nummer {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;      /* eine Rufnummer wird nie umgebrochen */
}

/* Eyebrow: das Keil-Zeichen aus dem Logo als Marke vor der Zeile. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--schrift-display);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--marke-tief); margin-bottom: var(--s3);
}
.eyebrow::before {
  content: ""; width: 22px; height: 10px; flex: none;
  background: var(--marke);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.eyebrow--hell { color: var(--marke-auf-dunkel); }
.eyebrow--hell::before { background: var(--marke-auf-dunkel); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  color: var(--text-2);
  max-width: 58ch;
}

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

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kopf__innen {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--kopf-hoehe);
}
.kopf__logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.kopf__logo img {
  /* Feste Hoehe ueber Variable. height:100% in einem selbstbemessenen
     Flex-Element laesst das Logo in der Kopfleiste explodieren. */
  height: var(--logo-hoehe); width: auto; display: block;
}
.kopf__navi { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.kopf__navi a {
  font-family: var(--schrift-display); font-weight: 500; font-size: 1rem;
  color: var(--text); text-decoration: none;
  /* 11 px oben und unten ergeben mit der Zeilenhoehe 44 px Tippflaeche.
     Mit var(--s2) waren es 42 px – zwei Pixel unter der Marke. */
  padding: 11px var(--s2); min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.kopf__navi a::after {
  content: ""; position: absolute; left: var(--s2); right: 100%; bottom: 6px; height: 2px;
  background: var(--marke); transition: right .2s ease;
}
.kopf__navi a:hover::after, .kopf__navi a[aria-current="page"]::after { right: var(--s2); }
.kopf__navi a[aria-current="page"] { color: var(--marke-tief); font-weight: 700; }

.kopf__aktionen { display: flex; align-items: center; gap: var(--s3); flex: none; }
.kopf__telefon {
  display: inline-flex; flex-direction: column; justify-content: center;
  line-height: 1.15; min-height: 48px; padding: var(--s1) var(--s2);
  margin-inline: calc(-1 * var(--s2));   /* optisch buendig trotz Tippflaeche */
  border-radius: var(--r-klein);
  text-decoration: none; color: var(--text);
  font-family: var(--schrift-display);
}
.kopf__telefon:hover { background: var(--marke-zart-2); }
.kopf__telefon .klein {
  font-family: var(--schrift-text); font-size: .75rem; color: var(--text-3);
  letter-spacing: .04em; text-transform: uppercase;
}
.kopf__telefon .nummer { font-weight: 700; font-size: 1.125rem; color: var(--marke-tief); }
.kopf__telefon:hover .nummer { color: var(--marke); }

.kopf__schalter {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1px solid var(--rand); border-radius: var(--r-klein);
  cursor: pointer;
}
.kopf__schalter span, .kopf__schalter span::before, .kopf__schalter span::after {
  display: block; width: 20px; height: 2px; background: var(--text);
  margin-inline: auto; transition: transform .2s ease, opacity .2s ease;
}
.kopf__schalter span { position: relative; }
.kopf__schalter span::before { content: ""; position: absolute; top: -6px; }
.kopf__schalter span::after { content: ""; position: absolute; top: 6px; }
.kopf__schalter[aria-expanded="true"] span { background: transparent; }
.kopf__schalter[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .kopf__schalter { display: block; }
  .kopf__navi {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rand);
    box-shadow: var(--schatten-hoch); padding: var(--s3) var(--s5) var(--s5);
  }
  .kopf__navi[data-offen="ja"] { display: flex; }
  .kopf__navi a { padding: var(--s4) 0; justify-content: flex-start;
                  border-bottom: 1px solid var(--grund-3); }
  .kopf__navi a::after { display: none; }
  .kopf__aktionen { display: none; }
  .kopf { position: sticky; }
}

/* -------------------------------------------------------- Abschnittsrahmen */

.abschnitt { padding-block: var(--s9); }
.abschnitt--eng { padding-block: var(--s8); }
.abschnitt--grund2 { background: var(--grund-2); }
.abschnitt--zart { background: var(--marke-zart-2); }

.abschnitt__kopf { max-width: 62ch; margin-bottom: var(--s7); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf--mitte .eyebrow { justify-content: center; }
.abschnitt__kopf p:last-child { margin-bottom: 0; }

/* Die Keil-Kante zwischen zwei Flaechen. Nur oben ODER unten, nie beides –
   sonst wirkt der Abschnitt wie ein schief geschnittenes Band. */
.kante-oben { position: relative; }
.kante-oben::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--keil));
  height: var(--keil); background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ---------------------------------------------------------------- Startbild */
/* Hero-Archetyp: rein typografisch auf hellem Grund. Kein Foto darunter, keine
   Zweiteilung – der Text steht auf deckender Flaeche, Lesbarkeit ist kein
   Rechenproblem. Der Keil liegt als Flaeche hinter der rechten Spalte. */

.start-hero {
  position: relative; overflow: hidden;
  background: var(--grund);
  padding-block: var(--s9) var(--s10);
}
.start-hero > .container { position: relative; z-index: 2; width: 100%; }

/* Das Bewegungsmotiv. Es liegt hinter dem Inhalt und faengt den rechten Rand
   ab – deshalb reicht es ueber die volle Hoehe und wird rechts angeschnitten. */
.hero-bogen {
  position: absolute; right: -4%; top: 0; z-index: 0;
  width: 64%; height: 100%;
  pointer-events: none;
}

/* Die linke Spalte traegt eine 64-px-Headline, deren zweite Zeile
   "wieder leichter wird." am Stueck stehen muss. Bei 1.15fr fehlten dafuer
   zwanzig Pixel und das letzte Wort rutschte in eine eigene Zeile. */
.start-hero__raster {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--s8); align-items: center;
}
/* Die Eyebrow des Start-Heros traegt die Ortsangabe. Sie ist hier Information,
   keine Beschriftung, und deshalb deutlich groesser als die Eyebrows im Rest
   der Seite – die bleiben unveraendert. display:flex statt des geerbten
   inline-flex, damit der Abstand darunter aus der Marge kommt und nicht aus
   der Hoehe einer Zeilenbox. */
.start-hero .eyebrow {
  display: flex; width: fit-content;
  font-size: clamp(1rem, .9rem + .5vw, 1.3125rem);
  letter-spacing: .08em;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
/* Die Kurve ist so gelegt, dass "wieder leichter wird." bis hinunter zu 320 px
   in eine Zeile passt – sonst steht dort ein einzelnes Wort allein. */
.start-hero h1 {
  font-size: clamp(1.7rem, .95rem + 3.8vw, 4rem);
  line-height: 1.1;
  margin-bottom: var(--s6);
}
/* Umbruch nach "Bewegung" – aber nur, solange zwei Zeilen auch passen.
   Darunter laeuft die Zeile normal um. */
@media (min-width: 700px) {
  .start-hero h1 span { display: block; }
}
.start-hero__lead {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--text-2);
  max-width: 52ch;
  hyphens: none;   /* "Lymphdrai-nage" mitten im Leitsatz stoert den Lesefluss */
}
.start-hero .aktionszeile { margin-top: 2.5rem; }

.aktionszeile { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s3); margin-top: var(--s6); }
.aktionszeile__hinweis {
  width: 100%; margin: var(--s3) 0 0; font-size: .9375rem; color: var(--text-2);
}

/* Faktenkarte rechts: die drei Angaben, die man vor dem Anruf braucht. */
.faktenkarte {
  background: #fff; border: 1px solid var(--marke-rand); border-radius: var(--r-gross);
  padding: var(--s6); box-shadow: var(--schatten);
}
.faktenkarte dl { margin: 0; display: grid; gap: var(--s5); }
.faktenkarte dt {
  font-family: var(--schrift-display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s2);
}
.faktenkarte dd { margin: 0; font-size: 1rem; }
.faktenkarte dd .gross {
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.375rem;
  color: var(--marke-tief); display: block; line-height: 1.2;
}
.faktenkarte__zeiten { margin: 0; display: grid; gap: var(--s2); font-size: 1rem; }
.faktenkarte__zeiten div {
  display: flex; justify-content: space-between; gap: var(--s4);
  align-items: baseline;   /* sonst rutscht die Uhrzeit hoch, wenn der Tagesname umbricht */
}
.faktenkarte__zeiten dt, .faktenkarte__zeiten dd {
  font: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin: 0;
}
.faktenkarte__zeiten dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.faktenkarte__zusatz { margin-top: var(--s2); font-size: .9375rem; color: var(--text-3); }

@media (max-width: 900px) {
  .start-hero { padding-block: var(--s7) var(--s8); }
  .start-hero::before { display: none; }
  .start-hero__raster { grid-template-columns: 1fr; gap: var(--s6); }
  .start-hero .eyebrow { margin-bottom: var(--s4); }
  .start-hero h1 { margin-bottom: var(--s5); }
  .start-hero .aktionszeile { margin-top: var(--s6); }
}

/* ------------------------------------------------- Hero der Unterseiten */
/* Alle Unterseiten teilen exakt dieselbe Bauweise: dunkler Verlauf,
   Brotkrumen, Eyebrow, H1, Lead, Aktionszeile links, drei Kennzahlen rechts,
   gemeinsame Mindesthoehe. Jede Unterseite bekommt eine Aktionszeile –
   fehlt sie auf einer, ist deren Hero niedriger als die anderen. */

.seiten-hero {
  position: relative; overflow: hidden;
  background: var(--grund);
  color: var(--text);
  padding-block: var(--s7) var(--s8);
  /* Gemessen war der laengste Hero 540 px. Die gemeinsame Mindesthoehe haelt
     alle Unterseiten gleich hoch, sonst springt der Inhalt beim Wechsel. */
  min-height: 540px;
  display: flex; align-items: center;
}
/* Flex-Hero plus margin:auto im Container ruecken den Inhalt neben das
   Raster – deshalb hier ausdruecklich volle Breite. */
.seiten-hero > .container { position: relative; z-index: 2; width: 100%; }

.seiten-hero h1 { color: var(--text); margin-bottom: .5em; }
.seiten-hero .lead { color: var(--text-2); }
.seiten-hero__raster {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--s7); align-items: center;
}
.seiten-hero .aktionszeile { margin-top: var(--s6); }
.seiten-hero .aktionszeile__hinweis { color: var(--text-2); }

/* Weisse Karten auf dem Bogen. So traegt die rechte Haelfte Information
   statt nur Flaeche zu sein – und der Text steht auf deckendem Grund,
   nicht auf einem Verlauf. */
.kennzahlen { display: grid; gap: var(--s4); margin: 0; }
.kennzahlen div {
  background: #fff; border-radius: var(--r);
  padding: var(--s4) var(--s5);
  box-shadow: 0 1px 2px rgba(22, 32, 58, .05), 0 6px 22px rgba(22, 32, 58, .09);
}
.kennzahlen dt {
  font-family: var(--schrift-display); font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.6rem); line-height: 1.15;
  color: var(--marke-tief); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kennzahlen dd {
  margin: var(--s1) 0 0; font-size: .9375rem; color: var(--text-2);
  hyphens: auto; hyphenate-limit-chars: 10 4 4;
}

.brotkrumen { margin-bottom: var(--s5); font-size: .875rem; }
.brotkrumen ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0; padding: 0;
}
.brotkrumen li { margin: 0; display: flex; gap: var(--s2); align-items: center; }
.brotkrumen li + li::before { content: "›"; color: var(--rand-stark); }
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--marke-tief); text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--text-2); }

@media (max-width: 900px) {
  .seiten-hero { min-height: 0; padding-block: var(--s6) var(--s7); }
  .seiten-hero__raster { grid-template-columns: 1fr; gap: var(--s6); align-items: start; }
  .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  /* Der Bogen wuerde auf schmalen Bildschirmen hinter dem Text stehen. */
  .hero-bogen { width: 78%; right: -22%; opacity: .55; }
}

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

.infoleiste {
  background: var(--marke-zart-2);
  border-block: 1px solid var(--marke-rand);
  color: var(--text);
  padding-block: var(--s5);
}
.infoleiste__innen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5); align-items: center;
}
.infoleiste__punkt { display: flex; gap: var(--s3); align-items: flex-start; }
.infoleiste__punkt svg { flex: none; width: 22px; height: 22px; color: var(--marke); margin-top: 2px; }
.infoleiste__punkt b {
  display: block; font-family: var(--schrift-display); font-weight: 600;
  font-size: 1rem; color: var(--text);
}
.infoleiste__punkt span { font-size: .9375rem; color: var(--text-2); }
.infoleiste a { color: var(--marke-tief); }
@media (max-width: 820px) {
  .infoleiste__innen { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ------------------------------------------------------- Muster 1: Karten */

.karten {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* Bei vier Karten fuehrt auto-fit zwischendurch zu drei Spalten - dann steht
   die vierte allein. Zwei oder vier, nie drei. */
.karten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1120px) {
  .karten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .karten--vier { grid-template-columns: 1fr; }
}
.karte {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--r);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.karte:hover { border-color: var(--marke-hell); box-shadow: var(--schatten); transform: translateY(-2px); }
.karte__zeichen {
  width: 44px; height: 44px; border-radius: var(--r-klein);
  background: var(--marke-zart); color: var(--marke-tief);
  display: grid; place-items: center; flex: none;
}
.karte__zeichen svg { width: 24px; height: 24px; }
.karte h3 { margin: 0; }
.karte p { margin: 0; color: var(--text-2); font-size: 1rem; }

/* Bleiben zwei Karten in der letzten Reihe, werden sie mittig gesetzt:
   beide um eine halbe Spalte plus halben Abstand nach rechts. Nicht ueber
   die Spaltenzahl loesen – das macht die Abnahme blind. */
@media (min-width: 1001px) {
  .karten--vier > :nth-child(4):nth-last-child(1) { }
}

/* ------------------------------------------ Muster 2: Verzeichnisliste */
/* Fuer Aufzaehlungen, die als Kacheln zu monoton wuerden. Trennlinien statt
   Rahmen: eine kuerzere Zeile faellt nicht als halbleerer Kasten auf. */

.verzeichnis { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.verzeichnis > li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s5); align-items: start;
  padding-block: var(--s5);
  border-top: 1px solid var(--rand);
  margin: 0;
}
.verzeichnis > li:last-child { border-bottom: 1px solid var(--rand); }
.verzeichnis__zeichen {
  width: 44px; height: 44px; border-radius: var(--r-klein);
  background: var(--marke); color: #fff;
  display: grid; place-items: center;
}
.verzeichnis__zeichen svg { width: 22px; height: 22px; }
.verzeichnis h3 { margin: 0 0 .55em; font-size: 1.1875rem; }
.verzeichnis p { margin: 0; color: var(--text-2); }
@media (max-width: 600px) {
  .verzeichnis > li { grid-template-columns: 1fr; gap: var(--s3); }
}

/* --------------------------------------------------- Muster 3: Zeitband */
/* Der Ablauf als waagerechte Spur mit Zahlenmarken im Keil-Winkel. */

.zeitband { display: grid; gap: var(--s5); counter-reset: schritt; }
@media (min-width: 900px) {
  .zeitband { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
}
/* Vier statt fuenf Schritte – als Klasse, nicht als Inline-Stil. Ein
   inline gesetztes grid-template-columns schlaegt jede Media Query und
   erzwingt vier Spalten auch auf 320 px; genau das hat die Karriereseite
   unter 414 px ueberstehen lassen. */
@media (min-width: 900px) {
  .zeitband--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Die Zahlenmarke ist 36 px hoch und sitzt absolut oben. Der Textabstand
   muss groesser sein als die Marke, sonst laeuft die Ueberschrift hinein –
   mit var(--s6) = 32 px tat sie das um vier Pixel. */
.zeitband__schritt { position: relative; padding-top: var(--s7); }
.zeitband__schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--marke); color: #fff;
  font-family: var(--schrift-display); font-weight: 700; font-size: 1rem;
  border-radius: var(--r-klein) var(--r-klein) var(--r-klein) 0;
}
@media (min-width: 900px) {
  .zeitband__schritt::after {
    content: ""; position: absolute; left: 44px; right: calc(-1 * var(--s4)); top: 17px;
    height: 2px; background: var(--marke-rand);
  }
  .zeitband__schritt:last-child::after { display: none; }
}
.zeitband__schritt h3 { font-size: 1.0625rem; margin-bottom: .62em; }
.zeitband__schritt p { margin: 0; font-size: .9688rem; color: var(--text-2); }

/* --------------------------------------------- Muster 4: geteiltes Band */
/* Bild auf die eine Haelfte, deckende Textflaeche auf die andere. Ein Foto
   ueber die volle Breite mit Text darauf waere entweder unlesbar oder
   beschnitten – geteilt ist beides geloest. */

.geteilt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.geteilt__bild { position: relative; min-height: 320px; }
.geteilt__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.geteilt__text {
  background: var(--tiefe); color: var(--text-invers);
  padding: var(--s8) clamp(var(--s5), 4vw, var(--s8));
  display: flex; flex-direction: column; justify-content: center;
}
.geteilt__text h2 { color: #fff; }
.geteilt__text p { color: var(--text-invers-2); }
.geteilt__text .knopf--aktion { box-shadow: var(--ring); }
.geteilt__text .eyebrow { color: var(--marke-auf-dunkel); }
.geteilt__text .eyebrow::before { background: var(--marke-auf-dunkel); }

@media (max-width: 860px) {
  .geteilt { grid-template-columns: 1fr; }
  .geteilt__bild { min-height: 0; position: static; }
  /* Im gestapelten Zustand traegt das Bild seine echte Hoehe – nicht noch
     einmal beschneiden, das ist in der Pipeline schon passiert. */
  .geteilt__bild img { position: static; height: auto; }
  .geteilt__text { padding: var(--s7) var(--s5); }
}

/* --------------------------------------------- Muster 5: Leistungsgruppen */

.gruppe { border-top: 2px solid var(--marke-leucht); padding-top: var(--s5); margin-bottom: var(--s8); }
.gruppe:last-child { margin-bottom: 0; }
.gruppe__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s5) var(--s7); align-items: start; margin-bottom: var(--s6);
}
.gruppe__kopf h2 { margin: 0 0 .1em; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); }
.gruppe__kopf p { margin: 0; color: var(--text-2); }
.gruppe__kopf .gruppe__gilt { margin-top: var(--s5); }
/* Was fuer jeden Posten der Gruppe gilt, steht EINMAL hier – nicht in jeder
   Zeile wiederholt. Eine Leistungsseite hatte "Idealer Zielkunde" 20-mal. */
/* Achtung Spezifitaet: .gruppe__kopf p { margin: 0 } weiter unten hat
   (0,2,0) und schlaegt eine Regel auf .gruppe__gilt allein (0,1,0). Drei
   verschiedene margin-top-Werte blieben deshalb wirkungslos - der berechnete
   Wert war jedes Mal 0. Der Abstand steht darum in .gruppe__kopf .gruppe__gilt. */
.gruppe__gilt {
  display: flex; width: fit-content; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--marke-zart); border-radius: var(--r-pille);
  font-size: .9375rem; color: var(--marke-tief);
}
.gruppe__gilt svg { width: 16px; height: 16px; flex: none; }

.posten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 960px) {
  .posten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
  .posten--einspaltig { grid-template-columns: 1fr; }
}
.posten > li {
  margin: 0; padding-block: var(--s4);
  border-top: 1px solid var(--rand);
  display: flex; flex-direction: column; justify-content: center;
}
.posten b {
  display: block; font-family: var(--schrift-display); font-size: 1.0625rem;
  color: var(--text); margin-bottom: 2px;
}
.posten span { color: var(--text-2); font-size: .9688rem; }

@media (max-width: 960px) {
  .gruppe__kopf { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ------------------------------------------------------- Muster 6: Team */

.team-leitung {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7); align-items: start;
}
/* Name und Rolle lesen als Einheit, deshalb rueckt die Rollenzeile naeher an
   die Ueberschrift - aber nur so weit, dass sie nicht anklebt. */
.rollenzeile { color: var(--text-3); margin-top: -.2em; margin-bottom: var(--s5); }

.team-leitung__quali { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.team-leitung__quali li {
  margin: 0; padding-left: var(--s5); position: relative; font-size: .9688rem;
  color: var(--text-2);
}
.team-leitung__quali li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 6px; background: var(--marke-leucht);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@media (max-width: 940px) { .team-leitung { grid-template-columns: 1fr; gap: var(--s5); } }

/* Portraets. Die Quellen stammen von der alten Website und sind zwischen
   161 und 220 px gross. Die Anzeigegroesse bleibt deshalb bei 72 px (96 px
   bei der Praxisleitung) - so wird auch auf Bildschirmen mit doppelter
   Pixeldichte nichts hochgerechnet. Groesser gezeigt wuerden sie weich. */
.portraet {
  display: block; width: 72px; height: 72px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--marke-zart);
  box-shadow: 0 0 0 1px var(--marke-rand);
}
.portraet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portraet--gross { width: 96px; height: 96px; }

/* Wo kein brauchbares Foto vorliegt, stehen die Initialen - ein leerer
   Bildplatzhalter saehe schlechter aus als eine gesetzte Flaeche. */
.portraet--leer {
  display: grid; place-items: center;
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.375rem;
  color: var(--marke-tief); letter-spacing: .02em;
}

.leitung__kopf {
  display: flex; align-items: center; gap: var(--s5);
  margin-bottom: var(--s5);
}
.leitung__kopf h2 { margin: 0; }
/* Name und Rolle lesen als Einheit und stehen deshalb bewusst enger zusammen
   als die Abstandsregel sonst verlangt (gemessen 0,27x statt 0,42x der
   Schriftgroesse) - aber nicht auf Kante: ohne diesen Wert lagen sie 1 px
   auseinander, mit .5em waren es 6 px unter einer 40-px-Zeile. */
.leitung__kopf .rollenzeile { margin: .9em 0 0; }

.personen { list-style: none; margin: 0; padding: 0; }
.personen > li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s5); align-items: start;
  padding-block: var(--s5); border-top: 1px solid var(--rand); margin: 0;
}
.personen__text { display: grid; gap: var(--s2); }
.personen > li:last-child { border-bottom: 1px solid var(--rand); }
.personen__name {
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.125rem;
  margin: 0;
}
.personen__rolle { margin: 0 0 var(--s2); color: var(--text-3); font-size: .9375rem; }
/* Kleines Label ueber jeder Chip-Reihe. Ohne das waeren zertifizierte und
   nur fortgebildete Verfahren optisch dasselbe - und genau das ist der
   Unterschied, auf den es hier ankommt. */
.personen__label {
  margin: 0; font-family: var(--schrift-display);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.personen__marken {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: flex-start; align-content: flex-start;
  margin: 0; padding: 0; list-style: none;
}
.personen__marken li {
  margin: 0; padding: 3px var(--s3);
  background: var(--grund-3); border-radius: var(--r-pille);
  font-size: .8438rem; color: var(--text-2);
}
.personen__marken--fort li {
  background: none; border: 1px solid var(--rand); color: var(--text-3);
}

/* Stationen der Praxisleitung: eine Liste, kein Fliesstext. */
.stationen {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
}
.stationen li {
  position: relative; padding-left: var(--s5); margin: 0;
  color: var(--text-2); font-size: .9688rem;
}
.stationen li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 5px; background: var(--marke-leucht);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.team-leitung__quali--fort li::before { opacity: .45; }
@media (max-width: 820px) {
  .personen > li { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
}
@media (max-width: 460px) {
  .personen > li { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3) var(--s4); }
  .portraet { width: 56px; height: 56px; }
  .portraet--leer { font-size: 1.125rem; }
}

/* --------------------------------------------- Muster 8: Schwerpunkte */
/* Zickzack: Bild und Text wechseln die Seite. Bei drei Bloecken untereinander
   ist das ruhiger als drei gleich gebaute Reihen - und der Blick wandert von
   selbst weiter. */
.schwerpunkte { display: grid; gap: var(--s9); }
.schwerpunkt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7); align-items: center;
}
.schwerpunkt:nth-child(even) .schwerpunkt__bild { order: 2; }
.schwerpunkt__bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-gross);
}
.schwerpunkt h3 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .5em;
}
.schwerpunkt p { color: var(--text-2); }
.schwerpunkt__label {
  margin: var(--s5) 0 var(--s3); font-family: var(--schrift-display);
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}
.schwerpunkt__hilft {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s3);
}
.schwerpunkt__hilft li {
  position: relative; padding-left: var(--s5); margin: 0;
  font-size: .9375rem; color: var(--text-2);
}
.schwerpunkt__hilft li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 6px; background: var(--marke-leucht);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@media (max-width: 860px) {
  .schwerpunkte { gap: var(--s8); }
  .schwerpunkt { grid-template-columns: 1fr; gap: var(--s5); }
  .schwerpunkt:nth-child(even) .schwerpunkt__bild { order: 0; }
}

/* ------------------------------------------------- Muster 7: Raum-Kacheln */
/* Die drei Innenaufnahmen liegen nur in 250 px vor. Sie werden in genau
   dieser Groesse gezeigt und nicht hochgerechnet; die Reihe ist dadurch
   schmaler als der Container und steht mittig. Lieber drei ehrliche kleine
   Bilder als drei weiche grosse. */
.raeume {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(2, minmax(0, 250px));
  justify-content: center;
}
@media (min-width: 1100px) {
  .raeume { grid-template-columns: repeat(4, minmax(0, 250px)); }
}
.raeume figure { margin: 0; }
.raeume picture { display: block; }
.raeume img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); border: 1px solid var(--rand);
}
.raeume figcaption { margin-top: var(--s3); font-size: .9375rem; color: var(--text-2); }
.raeume figcaption b {
  display: block; font-family: var(--schrift-display); color: var(--text);
  margin-bottom: .2em;
}
@media (max-width: 560px) {
  .raeume { grid-template-columns: minmax(0, 250px); }
}

/* ------------------------------------------------------------ Werte-Band */

.werte { display: grid; gap: var(--s6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .werte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .werte { grid-template-columns: 1fr; } }
.werte div { border-top: 3px solid var(--marke-leucht); padding-top: var(--s4); }
.werte h3 { font-size: 1.0625rem; margin-bottom: .62em; }
.werte p { margin: 0; color: var(--text-2); font-size: .9688rem; }

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

.faq { display: grid; gap: 0; max-width: 80ch; }
.faq details {
  border-top: 1px solid var(--rand);
}
.faq details:last-of-type { border-bottom: 1px solid var(--rand); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s5); cursor: pointer; list-style: none;
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.0625rem;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 2px solid var(--marke); border-bottom: 2px solid var(--marke);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details > div { padding-bottom: var(--s5); }
.faq p { margin: 0; color: var(--text-2); max-width: 70ch; }

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

.weg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.weg__karte {
  background: var(--grund-2); border: 1px solid var(--rand); border-radius: var(--r-gross);
  padding: var(--s6);
}
.weg__adresse { font-style: normal; font-size: 1.125rem; line-height: 1.6; margin-bottom: var(--s5); }
.weg__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s3); }
.gruppe__gilt svg, .infoleiste__punkt svg, .hinweis svg { flex: none; }

.weg--formular { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.weg--kontakt { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 860px) {
  .weg { grid-template-columns: 1fr; gap: var(--s5); }
  .weg--formular, .weg--kontakt { grid-template-columns: 1fr; }
}

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

.formular { display: grid; gap: var(--s5); }
.formular__schritt { display: grid; gap: var(--s5); align-content: start; }
.formular__schritt[hidden] { display: none; }
.formular__fortschritt {
  display: flex; align-items: center; gap: var(--s3);
  font-size: .875rem; color: var(--text-3); margin-bottom: var(--s2);
}
.formular__fortschritt span { display: flex; align-items: center; gap: var(--s2); }
.formular__fortschritt i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grund-3); color: var(--text-3); font-style: normal;
  font-size: .75rem; font-weight: 700; font-family: var(--schrift-display);
}
.formular__fortschritt [data-aktiv="ja"] i { background: var(--marke); color: #fff; }
.formular__fortschritt [data-aktiv="ja"] { color: var(--text); font-weight: 600; }

.anliegen { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.anliegen label {
  position: relative; display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s5); min-height: 76px; justify-content: flex-start;
  background: #fff; border: 2px solid var(--rand); border-radius: var(--r);
  cursor: pointer; transition: border-color .16s ease, background-color .16s ease;
}
.anliegen label:hover { border-color: var(--marke-hell); background: var(--marke-zart-2); }
.anliegen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anliegen input:checked + .anliegen__inhalt { color: var(--marke-tief); }
.anliegen label:has(input:checked) { border-color: var(--marke); background: var(--marke-zart); }
.anliegen label:has(input:focus-visible) { outline: 3px solid var(--aktion); outline-offset: 2px; }
/* Genau drei Kacheln: die dritte laeuft ueber die Reihe, statt allein
   neben einer Luecke zu stehen. */
@media (min-width: 420px) {
  .anliegen > label:first-child:nth-last-child(3) ~ label:last-child {
    grid-column: 1 / -1;
  }
}

.anliegen__inhalt b { display: block; font-family: var(--schrift-display); font-size: 1rem; }
.anliegen__inhalt span { font-size: .875rem; color: var(--text-3); }
/* Der Notfall-Pfad schwenkt auf den Anruf um, statt ein Formular anzubieten. */
.anliegen label[data-notfall] {
  border-color: var(--aktion); background: var(--aktion-zart);
  grid-column: 1 / -1;                 /* nie als Einzelkarte in der Restreihe */
  flex-direction: row; align-items: center; gap: var(--s4);
  min-height: 60px;
}
.anliegen label[data-notfall] .anliegen__inhalt {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}

/* Bei gerader Kachelzahl geht das Raster ohne Rest auf - dann bleibt auch die
   Anruf-Kachel eine normale Kachel, statt sich ueber die ganze Reihe zu
   ziehen. Diese Regel MUSS nach der Regel darueber stehen: beide haben die
   Spezifitaet (0,2,1), bei Gleichstand gewinnt die spaetere. */
@media (min-width: 420px) {
  .anliegen--raster label[data-notfall] {
    grid-column: auto; flex-direction: column;
    justify-content: flex-start; min-height: 76px;
  }
  .anliegen--raster label[data-notfall] .anliegen__inhalt { display: block; }
}
.anliegen label[data-notfall] .anliegen__inhalt b { color: var(--aktion-tief); }

.feldpaar { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feld { display: flex; flex-direction: column; gap: var(--s2); }
.feld label { font-family: var(--schrift-display); font-weight: 600; font-size: .9375rem; }
.feld label .optional { color: var(--text-3); font-weight: 400; }
.feld input, .feld select, .feld textarea {
  font: inherit; color: var(--text);
  padding: var(--s3) var(--s4); min-height: 48px;
  background: #fff; border: 2px solid var(--rand); border-radius: var(--r-klein);
  transition: border-color .16s ease;
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--marke); outline: none; box-shadow: 0 0 0 3px var(--marke-zart);
}
.feld[data-fehler="ja"] input, .feld[data-fehler="ja"] select, .feld[data-fehler="ja"] textarea {
  border-color: #b3261e;
}
.feld__fehler { color: #b3261e; font-size: .875rem; min-height: 0; }
.feld__fehler:empty { display: none; }

.einwilligung { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.einwilligung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--marke); }
.einwilligung span { font-size: .9375rem; color: var(--text-2); }

.formular__fuss { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s3); align-items: center; }
.formular__meldung { font-size: .9375rem; }
.formular__meldung[data-art="fehler"] { color: #b3261e; }
.formular__meldung[data-art="erfolg"] { color: var(--aktion-tief); font-weight: 600; }

.formular-block {
  background: #fff; border: 1px solid var(--marke-rand); border-radius: var(--r-gross);
  padding: clamp(var(--s5), 3vw, var(--s7)); box-shadow: var(--schatten);
}

/* -------------------------------------------------------------- Pop-up */

.popup[hidden] { display: none; }
.popup {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: var(--s4);
}
.popup__grund { position: absolute; inset: 0; background: rgba(22, 32, 58, .55); }
.popup__fenster {
  position: relative; z-index: 1;
  width: min(640px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto;
  background: #fff; border-radius: var(--r-gross); box-shadow: var(--schatten-hoch);
  padding: clamp(var(--s5), 3vw, var(--s7));
}
.popup__schliessen {
  position: absolute; right: var(--s4); top: var(--s4);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grund-3); border: 0; cursor: pointer; color: var(--text);
  font-size: 1.25rem; line-height: 1;
}
.popup__schliessen:hover { background: var(--rand); }

/* ------------------------------------------------- Schwebende Elemente */
/* Hoechstens ZWEI Cluster – und nie beide gleichzeitig sichtbar: die Blase
   gehoert dem grossen Fenster, die Leiste dem kleinen. */

.blase {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 90;
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5) var(--s3) var(--s4);
  background: var(--aktion); color: #fff;
  border: 0; border-radius: var(--r-pille); cursor: pointer;
  text-decoration: none;
  font-family: var(--schrift-display); font-weight: 700; font-size: 1rem;
  /* Heller Ring: die Blase steht auch ueber dem dunklen Fuss, wo die
     Aktionsfarbe allein nur 2,77:1 gegen den Grund erreicht. */
  box-shadow: var(--schatten-hoch), var(--ring);
  transform: translateY(0); transition: transform .18s ease, background-color .18s ease;
}
.blase:hover { background: var(--aktion-tief); color: #fff; transform: translateY(-2px); }
.blase svg { width: 22px; height: 22px; flex: none; }

.mobilleiste {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--rand);
  box-shadow: 0 -4px 18px rgba(22, 32, 58, .1);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
}
.mobilleiste__innen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.mobilleiste .knopf { min-height: 50px; font-size: 1rem; padding-inline: var(--s3); }

@media (max-width: 760px) {
  .blase { display: none; }
  .mobilleiste { display: block; }
  body { padding-bottom: 74px; }
}

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

.fuss {
  background: var(--tiefe); color: var(--text-invers-2);
  padding-block: var(--s8) var(--s6); margin-top: 0;
}
.fuss__raster {
  display: grid; gap: var(--s7);
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  margin-bottom: var(--s7);
}
/* Das Logo ist selbst eine Flaeche aus blauem und weissem Keil. Auf dunklem
   Grund steht es deshalb auf einem weissen Feld – nicht invertiert. */
.fuss__logo {
  display: inline-block; background: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--r-klein); margin-bottom: var(--s4);
}
.fuss__logo img { height: 38px; width: auto; display: block; }
.fuss h4 {
  color: #fff; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--s4);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: var(--s2); }
.fuss a { color: var(--text-invers-2); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss address { font-style: normal; }
.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); justify-content: space-between;
  font-size: .875rem;
}
.fuss__unten p { margin: 0; }
@media (max-width: 860px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
@media (max-width: 520px) { .fuss__raster { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Rechtstexte */

.rechtstext { max-width: 76ch; }
.rechtstext h2 { font-size: 1.5rem; margin-top: var(--s7); margin-bottom: .62em; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: 1.125rem; margin-top: var(--s5); }
.rechtstext dl { display: grid; gap: var(--s3); margin: 0 0 var(--s5); }
.rechtstext dt { font-weight: 700; font-family: var(--schrift-display); }
.rechtstext dd { margin: 0 0 var(--s3); }

/* --------------------------------------------------------------- Karriere */
/* Auf der Karriereseite wird geduzt – der Ton wechselt, die Mechanik nicht. */

.karriere-gruppen {
  /* Sehr ungleich lange Listen: im Kachelraster bekaeme die kurze Gruppe
     unten ein Loch, und der Hoehenvergleich schluege nicht an, weil das
     Raster alle Hoehen angleicht. Spaltensatz statt Raster. */
  columns: 2; column-gap: var(--s7);
}
.karriere-gruppen > div { break-inside: avoid; margin-bottom: var(--s6); }
.karriere-gruppen h3 {
  font-size: 1.0625rem; margin-bottom: .7em;
  padding-bottom: var(--s2); border-bottom: 2px solid var(--marke);
}
.karriere-gruppen ul { list-style: none; margin: 0; padding: 0; }
.karriere-gruppen li {
  position: relative; padding-left: var(--s5); margin-bottom: var(--s2);
  font-size: .9688rem; color: var(--text-2);
}
.karriere-gruppen li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 6px; background: var(--marke-leucht);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@media (max-width: 820px) { .karriere-gruppen { columns: 1; } }

.gehaltskarte {
  background: var(--tiefe); color: #fff; border-radius: var(--r-gross);
  padding: var(--s6); display: grid; gap: var(--s3);
  /* Gestreckt statt oben angeheftet: neben der langen Textspalte stand die
     Karte sonst bei 62 % der Hoehe und liess darunter ein Loch. Eine
     deckende Farbflaeche darf die Spalte fuellen – eine Textspalte nicht. */
  align-self: stretch; align-content: center;
}
.gehaltskarte .zahl {
  font-family: var(--schrift-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); line-height: 1.15;
}
.gehaltskarte p { margin: 0; color: var(--text-invers-2); font-size: .9688rem; }

/* --------------------------------------------------------------- Hinweise */

.hinweis {
  display: flex; gap: var(--s3); align-items: flex-start;
  width: fit-content; max-width: 100%;
  padding: var(--s4) var(--s5);
  background: var(--leucht-zart); border-radius: var(--r);
  color: var(--text);
  font-size: .9688rem;
}
.hinweis svg { width: 20px; height: 20px; flex: none; color: var(--marke-leucht); margin-top: 2px; }
.hinweis p { margin: 0; max-width: 46ch; text-wrap: balance; color: inherit; }
.hinweis--aktion { background: var(--aktion-zart); color: var(--text); }
.hinweis--aktion svg { color: var(--aktion-tief); }
.hinweis--aktion b, .hinweis--aktion a { color: var(--text); }

.text-band { max-width: var(--breite-text); }
.zentriert { text-align: center; }
.abstand-oben { margin-top: var(--s6); }

/* ===================================================== Urheberzeile ===== */
/* Karte im Fuss: "Webseite umgesetzt von candidate-flow.de", Wortmarke, Sterne.
   Die Farbe muss spezifischer sein als .fuss a, sonst erbt die Karte die
   Linkfarbe der Fusszeile. */
.umsetzung { display: flex; justify-content: center; box-sizing: border-box;
             max-width: 100%; padding: 0.5rem 1rem 1.3rem; }
a.umsetzung__karte, a.umsetzung__karte:link, a.umsetzung__karte:visited,
a.umsetzung__karte:hover, a.umsetzung__karte:focus-visible {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45em;
  box-sizing: border-box; max-width: 100%; padding: 0.7rem 1.5rem;
  border-radius: 14px; text-align: center; text-decoration: none; color: inherit;
  border: 1px solid rgba(128, 128, 128, 0.32);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  background: rgba(128, 128, 128, 0.08);
  background: color-mix(in srgb, currentColor 6%, transparent); }
a.umsetzung__karte:hover { border-color: color-mix(in srgb, currentColor 34%, transparent); }
.umsetzung__satz { font-size: 0.8125rem; opacity: 0.74; }
/* Die Domain darf nie mitten im Wort umbrechen. */
.umsetzung__satz strong { font-weight: 700; opacity: 1; white-space: nowrap; }
.umsetzung__marke { height: 1.5em; width: auto; display: block; }
.umsetzung__sterne { height: 0.9em; width: auto; display: block; }