/* =========================================================================
   marke.css — PHYSIOMED SÜD, HAUPTSEITE (physiomed-sued.de)
   =========================================================================
   Jeder Wert ist GEMESSEN (01_QUELLE/messwerte/*.json, stil-inventar.md);
   bewusste Abweichungen: 01_QUELLE/entscheidungen.md.
   Beide Domains dieses Kunden teilen das Branding (Stil-Inventare
   abgeglichen 19.08.2026) — wer Token ändert, gleicht mit haupt/ ab.

   ⛔ Regeln, die schon Geld gekostet haben:
   1. NICHT auf die Skala einrasten — abweichende gemessene Werte als
      CSS-Variable ans Element.
   2. Rand-Resets NUR in :where().
   ========================================================================= */

@import url('../fonts/_fontface.css');

/* =========================================================================
   1 · Token
   ========================================================================= */
:root {
  /* --- Farben (stil-inventar.md, beide Domains) ------------------------- */
  --farbe-creme:        #FEF5E0;  /* Kopfband, Pillen, Karten, Fusstext */
  --farbe-creme-dunkel: #F0E6C5;  /* Fuss-Ueberschriften */
  --farbe-braun:        #7B562E;  /* Fussband, Stellen-Pillen-Text */
  --farbe-orange:       #E99B2F;  /* DIE Akzentfarbe: alle grossen Knoepfe */
  --farbe-orange-matt:  #D7A052;  /* Funnel-Knopf + aktiver Schrittpunkt (gemessen 215,160,82) */
  --farbe-text:         #111111;  /* Ueberschriften, Knopftext */
  --farbe-text-grau:    #4A4A4A;  /* Fliesstext (Body-Grundwert) */
  --farbe-text-leise:   #7A7A7A;  /* Absaetze der Wer/Vision-Abschnitte */
  --farbe-weiss:        #FFFFFF;
  --farbe-icon:         #69727D;  /* Social-Icons */
  --farbe-gruen-basis:  #9FC011;  /* Basisfarbe unterm Stellen-Foto (gemessen) */

  /* --- Schrift-Rollen (je Element gemessen, Startseite 1440) ------------- */
  --schrift-text:    'Inter', system-ui, -apple-system, sans-serif;
  --schrift-display: 'IBM Plex Serif', Georgia, serif;
  --schrift-knopf:   'Manrope', 'Inter', system-ui, sans-serif;
  --schrift-liste:   'Roboto', 'Inter', system-ui, sans-serif;

  /* --- Groessen (Regelfaelle) -------------------------------------------- */
  --fs-h1:      42px;  /* Hero · lh 70 · fw 400 */
  --lh-h1:      70px;
  --fs-h2:      48px;  /* Regelfall · lh 52.8 · fw 600 */
  --lh-h2:    52.8px;
  --fs-h2-band: 60px;  /* Foto-Baender („Unser Ziel", „Arbeitsplatz") · lh 60 · fw 400 */
  --fs-h3:      40px;  /* lh 56 · fw 600 */
  --lh-h3:      56px;
  --fs-h4:      25px;  /* FAQ-Fragen, Fuss-h6 · lh 35 · fw 600 */
  --lh-h4:      35px;
  --fs-karte:   32px;  /* Vorteils-Titel · lh 44.8 · fw 600 */
  --lh-karte: 44.8px;
  --fs-body:    18px;  /* lh 30.6 */
  --lh-body:  30.6px;
  --fs-knopf:   20px;  /* fw 600 Manrope */
  --fs-pille:   25px;  /* Stellen-Pillen · fw 500 Manrope */
  --fs-klein:   15px;

  /* --- Masse -------------------------------------------------------------- */
  --breite-inhalt: 1216px;  /* gemessen: Inhalt x=112–1328 */
  --breite-schmal: 1200px;  /* FAQ x=120–1320 */
  --rand-seite:      40px;
  --kopf-hoehe:     135px;  /* gemessen: Kopfband 1440×135 */

  /* --- Radien / Knoepfe ---------------------------------------------------- */
  --r-knopf:  30px;   /* orange Knoepfe ×42 */
  --r-pille:  50px;   /* Stellen-Pillen ×57 */
  --r-karte:  20px;   /* Vorteils-Karten 357×367 */
}

/* =========================================================================
   2 · Reset — AUSSCHLIESSLICH in :where()
   ========================================================================= */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) { margin: 0; }
:where(ul, ol) { padding-left: 0; list-style: none; }
:where(img, picture, svg, video) { display: block; max-width: 100%; height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
*, *::before, *::after { box-sizing: border-box; }

/* =========================================================================
   3 · Grundlage
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
/* Unterseiten stehen auf Creme, nur die Startseite/LP auf Weiss (gemessen);
   dort ist auch der Kopf-Menuepunkt grau statt braun. */
body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--farbe-text-grau);
  background: var(--farbe-creme);   /* gemessen: body ist auf ALLEN Seiten Creme */
}
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--farbe-braun);
  color: var(--farbe-creme);   /* gemessen: #FEF5E0 */
  box-shadow: 0 0 0 2px var(--farbe-orange);
}
.sprungmarke:focus { left: 0; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =========================================================================
   4 · Typografie
   ========================================================================= */
h1, .h1 { font-family: var(--schrift-display); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 400; color: var(--farbe-weiss); }
h2, .h2 { font-family: var(--schrift-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--farbe-text); }
h3, .h3 { font-family: var(--schrift-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--farbe-text); }
h4, .h4 { font-family: var(--schrift-display); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; color: var(--farbe-text); }
/* Das orange Akzentwort in H2 („Wer WIR sind!") — gemessen: fw 700, orange. */
h2 .akzent { color: var(--farbe-orange); font-weight: 700; }
strong, b { font-weight: 700; }

/* =========================================================================
   5 · Knoepfe
   =========================================================================
   Gemessen: 207×42, Radius 30, Grund #E99B2F, Text 20/600 Manrope #111111.
   ========================================================================= */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-knopf);
  /* GEMESSEN auf der Hauptdomain: matt #D7A052 mit WEISSEM Text, 205×40,
     Innenabstand 10/25. Das kraeftige #E99B2F trägt nur der Hero-Knopf der
     Karriereseiten — dort per .knopf--kraeftig. */
  background: var(--farbe-orange-matt);
  color: var(--farbe-weiss);
  min-height: 40px;
  padding: 10px 25px;
  font-family: var(--schrift-knopf);
  font-size: var(--fs-knopf); line-height: 20px; font-weight: 600;
  text-align: center; cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.knopf--kraeftig { background: var(--farbe-orange); color: var(--farbe-text); min-height: 42px; padding: 11px 24px; }
.knopf:hover  { filter: brightness(1.06); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 3px solid var(--farbe-braun); outline-offset: 3px; }

/* =========================================================================
   6 · Kopfbereich
   =========================================================================
   Gemessen: Band 1440×135, Creme mit Textur (physiomed-header-bg.jpg),
   Logo-Banner 211×41 + rundes Icon 50×50, EIN Menuepunkt „Karriere" 18/300.
   ========================================================================= */
.kopf {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  min-height: var(--kopf-hoehe);
  padding-inline: 40px;
  background: url('/assets/img/seite/physiomed-header-bg.webp') left top / cover no-repeat,
              var(--farbe-creme);
}
.kopf__inhalt {
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: 1360px; margin-inline: auto;
}
.kopf__logo img { width: 211px; height: 41px; object-fit: contain; }
.kopf__nav { margin-left: auto; }
.kopf__nav a {
  display: block; padding-block: 15px;
  font-size: 18px; line-height: 20px; font-weight: 300;
  color: var(--farbe-text-grau);   /* gemessen: alle grau … */
}
.kopf__nav a[aria-current='page'] { color: var(--farbe-braun); }   /* … nur die aktive braun */
.kopf__liste { display: flex; align-items: center; gap: 28px; margin: 0; }
.kopf__nav a:hover { text-decoration: underline; }

/* „Nach oben scrollen" — Astra-Element der Quelle. */
.nach-oben {
  position: fixed; right: 30px; bottom: 30px; z-index: 30;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 2px;
  background: var(--farbe-braun); color: var(--farbe-weiss); cursor: pointer;
}
.nach-oben[hidden] { display: none; }
.nach-oben:focus-visible { outline: 3px solid var(--farbe-orange); outline-offset: 2px; }

/* =========================================================================
   7 · Fussbereich
   =========================================================================
   Gemessen: Band 1440×230, Braun #7B562E. Drei Spalten (Standort Rudow ·
   Standort Altglienicke · Rechtliches), h6 25/35 in #F0E6C5, Text 18/30.6
   in #FEF5E0, Social-Icons 36×36.
   ========================================================================= */
.fuss {
  padding: 25px var(--rand-seite);   /* gemessen (1440): footer 6298, h6 6323 */
  background: var(--farbe-braun);
  color: var(--farbe-creme);
}
.fuss__inhalt {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  /* GEMESSEN (1440): Spalten bei x=86 / 495 / 904, Icon-Spalte bei 1313
     (36 breit) — also Raster 409 und Inhalt 86..1349 = 1263 breit. Der
     Spalt bleibt klein, weil die Spalte 400 braucht: „STANDORT
     ALTGLIENICKE" steht in der Quelle hier EINZEILIG und erst bei 390 px
     zweizeilig. Mit 40 Spalt (374 Spalte) brach es schon am Grossbild um. */
  gap: 9px; max-width: 1263px; margin-inline: auto;
}
.fuss__titel {
  font-family: var(--schrift-display);
  font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600;
  letter-spacing: 2px;                 /* gemessen */
  text-transform: uppercase;           /* gemessen — und der Grund, warum
     „Standort Altglienicke" bei 390 px ZWEIZEILIG steht: als Versalien passt
     es nicht mehr in die 342 px breite Spalte. Ohne diese Zeile fehlten dem
     Fussband 35 px Hoehe. */
  color: var(--farbe-creme-dunkel);
}
.fuss ul { margin-top: 10px; }
/* GEMESSEN: Zeilenraster 35 bei Zeilenhoehe 30.6 (1440) bzw. 33 bei 28.9
   (390) — also 4.4 px Luft zwischen den Zeilen, nicht 0. Mit 0 fehlten dem
   Fuss auf jeder der 21 Seiten rund 90 px Hoehe. */
.fuss li + li { margin-top: 4.4px; }
/* Die Quelle setzt die Zeilen als FLEX-Element — ihr Messrechteck ist damit
   die ganze Zeilenbox (28.9 px), nicht die Glyphenhoehe (19.6 px) eines
   eingebetteten <a>. Ohne das misst Gate 7 zwischen unseren Zeilen 14 statt
   4 px Luft, obwohl das Raster identisch ist. */
.fuss li > a { display: block; }
.fuss a:hover { text-decoration: underline; }
.fuss__sozial { display: flex; flex-direction: column; gap: 0; }
.fuss__sozial a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--farbe-icon); }
.fuss__sozial svg { width: 20px; height: 20px; fill: currentColor; }

/* =========================================================================
   8 · Hero
   =========================================================================
   Gemessen: Foto 1440×900 ab y=85 (unters Kopfband), dann Hintergrund-VIDEO
   (Sekunde 3–22, auch mobil). H1 42/70 weiss zentriert (y=227), Unterzeile
   18/18 (411), YouTube-Karte 396×223 (478), Knopf 207×42 (771).
   ========================================================================= */
.hero {
  position: relative;
  margin-top: -50px;            /* gemessen: Foto beginnt bei y=85, Kopf endet 135 */
  padding: 142px var(--rand-seite) 172px;  /* gemessen: H1 y=227; Knopf endet 813, Band 985 */
  background: url('/assets/img/seite/20241127-ak-04616-enhanced-nr-scaled.webp') center / cover no-repeat;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.hero__video {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__inhalt { position: relative; z-index: 1; max-width: 960px; margin-inline: auto; }
.hero__unter {
  margin-top: 44px;             /* gemessen: H1 endet 297+70, Zeile 411 */
  font-size: 18px; line-height: 18px;
  color: var(--farbe-weiss);
}
.hero__video-karte {
  position: relative; display: block;
  width: 396px; max-width: 100%;
  aspect-ratio: 396 / 223;
  margin: 49px auto 0;          /* gemessen: Zeile endet 429, Karte 478 */
  padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: none;
}
.hero__video-karte img { width: 100%; height: 100%; object-fit: cover; }
.hero__video-karte:focus-visible { outline: 3px solid var(--farbe-orange); outline-offset: 3px; }
.hero__play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--farbe-orange); color: var(--farbe-text);
  display: grid; place-items: center; transition: transform .18s ease;
}
.hero__video-karte:hover .hero__play { transform: scale(1.08); }
.hero__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.hero__iframe-halter { width: 396px; max-width: 100%; aspect-ratio: 396/223; margin: 49px auto 0; border-radius: 12px; overflow: hidden; }
.hero__iframe-halter iframe { width: 100%; height: 100%; border: 0; }
.hero__knopf { margin-top: 70px; }  /* gemessen: Karte endet 701, Knopf 771 */

/* =========================================================================
   9 · „Alle Stellen im Überblick"
   =========================================================================
   Gemessen: Band 1440×697 (y 985), Foto stack-of-hands (cover) auf Basis-
   gruen, ::before-Overlay SCHWARZ 0.55. H2 48 weiss zentriert (1055),
   h3 40 (1138), vier Creme-Pillen r50 ×57 zentriert (1254–1572),
   Text 25/500 Manrope braun.
   ========================================================================= */
.stellen {
  position: relative;
  padding: 70px var(--rand-seite) 108px;   /* gemessen */
  background: url('/assets/img/seite/stack-of-hands-stock.webp') center / cover no-repeat,
              var(--farbe-gruen-basis);
  isolation: isolate;
  text-align: center;
}
.stellen::before {
  content: ''; position: absolute; inset: 0;
  background: #000000; opacity: .55; z-index: -1;
}
.stellen h2 { color: var(--farbe-weiss); }
.stellen h3 { margin-top: 27px; color: var(--farbe-weiss); }  /* gemessen: H2 endet 1108, h3 1138 */
.stellen__liste {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  margin-top: 60px;             /* gemessen: h3 endet 1194, Pille 1254 */
}
/* Gemessene Pillenbreiten der Quelle (391/600/592/312) — ihre Spans sind
   breiter als Text+2×25; die Mindestbreite bildet das ab. */
.stellen__liste li:nth-child(1) .stellen__pille { min-width: 391px; }
.stellen__liste li:nth-child(2) .stellen__pille { min-width: 600px; }
.stellen__liste li:nth-child(3) .stellen__pille { min-width: 592px; }
.stellen__liste li:nth-child(4) .stellen__pille { min-width: 312px; }
.stellen__pille {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 57px;
  padding: 16px 25px;               /* gemessen: Innenabstand 25 */
  border-radius: var(--r-pille);
  background: var(--farbe-creme);
  font-family: var(--schrift-knopf);
  font-size: var(--fs-pille); line-height: 25px; font-weight: 500;
  color: var(--farbe-braun);
}
a.stellen__pille { transition: filter .18s ease; }
a.stellen__pille:hover { filter: brightness(.96); }

/* =========================================================================
   10 · Bewerbungs-Funnel (.bwb) — Startseite + LP
   =========================================================================
   Gemessen: weisses Band (1682). „Deine Bewerbung" 40/700 #7A7A7A zentriert
   (1744), Hinweis kursiv 18/18 (1832), Punkte 30×30 bei x=151/705/1259
   (1919; aktiv #D7A052), Labels 20/600 #666666 Inter (Abstand ~114),
   Knopf 210×40 r30 #D7A052 Text 19/600 Manrope (2438).
   ========================================================================= */
.bwb { padding: 62px var(--rand-seite) 91px; }
.bwb__titel {
  font-family: var(--schrift-display);
  font-size: 40px; line-height: 56px; font-weight: 700;
  color: var(--farbe-text-leise);
  text-align: center;
}
.bwb__hinweis { margin-top: 32px; line-height: 18px; text-align: center; color: #000000; }
.bwb__meldung {
  max-width: var(--breite-inhalt); margin: 24px auto 0;
  padding: 16px 20px; border-radius: 4px; background: var(--farbe-creme);
  text-align: center;
}
.bwb__form { max-width: 1140px; margin: 57px auto 0; padding: 0; }
.bwb__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bwb__punkte {
  display: flex; justify-content: space-between;
  margin: 0 0 62px; padding: 0; list-style: none;   /* gemessen: Hinweis->Label2 240 */
}
.bwb__punkt {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-orange-matt);
  color: var(--farbe-text); font-size: 14px;
}
.bwb__punkt--aktiv { background: var(--farbe-orange-matt); color: var(--farbe-weiss); }
.bwb__stufe { margin: 0; padding: 0; border: 0; }
.bwb__feld  { margin-top: 11px; }   /* gemessen (Diff): Label-zu-Label 62 */
.bwb__feld:first-of-type { margin-top: 0; }
.bwb__label {
  display: block;
  font-size: 20px; line-height: 30.6px; font-weight: 600;
  color: #666666;               /* gemessen — eigener Ton, nur im Funnel */
}
.bwb__eingabe {
  display: block; width: 100%; min-height: 40px;
  margin-top: 10px; padding: 8px 14px;
  border: 1px solid #D5D8DC; border-radius: 4px;
  background: var(--farbe-weiss); font-size: var(--fs-body);
}
.bwb__eingabe:focus-visible { outline: 3px solid var(--farbe-orange); outline-offset: 2px; }
.bwb__fehler { display: block; margin-top: 6px; color: #B00020; font-size: 14px; }
.bwb__zustimmung { display: flex; gap: 12px; align-items: flex-start; }
.bwb__zustimmung a { text-decoration: underline; }
.bwb__knopfzeile { display: flex; gap: 16px; margin-top: 20px; justify-content: center; }
.bwb__weiter {
  display: block; flex: none; min-height: 40px;
  padding: 0 25px; border: 0; border-radius: var(--r-knopf);   /* gemessen: 210×40 zentriert */
  background: var(--farbe-orange-matt); color: var(--farbe-text);
  font-family: var(--schrift-knopf);
  font-size: 19px; line-height: 19px; font-weight: 600;
  cursor: pointer;
}
.bwb__weiter:hover { filter: brightness(1.05); }
.bwb__weiter[hidden] { display: none; }
.bwb__zurueck {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--farbe-orange-matt);
}

/* =========================================================================
   11 · „Wer wir sind!" / „Unsere Vision" (Bild-Text-Wechsel)
   =========================================================================
   Gemessen: weisse Baender (2569 ×629 · 3198 ×553). Foto 648×433 auf einer
   Seite (x=112), Text auf der anderen (x=880, Breite 448). H2 mit orangenem
   Akzentwort, Absatz 18/30.6 #7A7A7A, Knopf darunter.
   ========================================================================= */
.wechsel { padding: 60px var(--rand-seite) 40px; }
.wechsel--getauscht { padding-bottom: 28px; }   /* gemessen: Knopf->Ziel-H2 371 */
.wechsel__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 648px) minmax(0, 448px);
  justify-content: space-between; align-items: center;
  gap: 60px;
  max-width: var(--breite-inhalt); margin-inline: auto;
}
.wechsel--getauscht .wechsel__inhalt { grid-template-columns: minmax(0, 448px) minmax(0, 648px); }
.wechsel--getauscht .wechsel__foto { order: 2; }
.wechsel--getauscht .wechsel__text { order: 1; }
.wechsel__foto { width: 100%; height: auto; aspect-ratio: 648 / 433; object-fit: cover; border-radius: 12px; }
.wechsel__text p { margin-top: 25px; color: var(--farbe-text-leise); }  /* gemessen: H2 endet 2687, Text 2712 */
.wechsel__text .wechsel__knopf { margin-top: 84px; }   /* gemessen (Wer wir) */
.wechsel--getauscht .wechsel__text .wechsel__knopf { margin-top: 60px; }   /* gemessen (Vision) */

/* =========================================================================
   12 · Foto-Band „Unser Ziel? Gemeinsam mehr erreichen"
   =========================================================================
   Gemessen: Band 1440×900 Creme-Basis (3751) mit ::before-Foto (AK_04616)
   + dunkler Schicht; H2 60/60 fw400 weiss zentriert (4049), Unterzeile
   20/30.6 weiss (4149), Knopf (4280).
   ========================================================================= */
.ziel {
  position: relative;
  padding: 328px var(--rand-seite) 329px;  /* gemessen: Kasten 900, Knopf->Vorteile 400 */
  background: var(--farbe-creme);
  isolation: isolate;
  text-align: center;
}
.ziel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #000000 url('/assets/img/seite/20241127-ak-04616-enhanced-nr-scaled.webp') center / cover no-repeat;
}
.ziel h2 { font-size: var(--fs-h2-band); line-height: 60px; font-weight: 400; color: var(--farbe-weiss); }
.ziel__unter { margin-top: 40px; font-size: 20px; color: var(--farbe-weiss); }  /* gemessen: H2 endet 4109, Zeile 4149 */
.ziel__knopf { margin-top: 70px; }   /* gemessen: Zeile endet 4180, Knopf-Text 4291 */

/* =========================================================================
   13 · „Deine Vorteile bei uns" (6 Karten)
   =========================================================================
   Gemessen: weiss (4651/4877). H2 zentriert (4711), Unterzeile 22/300
   (4793), Karten 357×367 r20 Creme, 3 Spalten (x=144/541/939, Luecke 40),
   zweite Reihe y=5483 (Abstand 139?  5483-5344=139), Titel 32/44.8 span,
   Text 18/30.6 #4A4A4A. Knopf zentriert (5960).
   ========================================================================= */
.vorteile { padding: 60px var(--rand-seite) 0; text-align: center; }
.vorteile__knopfband { padding: 41px var(--rand-seite) 49px; background: var(--farbe-weiss); text-align: center; }  /* gemessen: Streifen 1440×132 */
.vorteile__unter { margin-top: 30px; font-size: 22px; font-weight: 300; color: var(--farbe-text-leise); }
.vorteile__karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 357px));
  justify-content: center; gap: 139px 40px;
  max-width: var(--breite-inhalt); margin: 100px auto 0;   /* gemessen: Unterzeile endet 4824, Karte 4977 (mit Titel-Ueberhang) */
}
.vorteile__karte {
  position: relative;
  min-height: 367px;
  padding: 30px;                        /* gemessen */
  border-radius: var(--r-karte);
  background: var(--farbe-creme);
}
.vorteile__titel {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--fs-karte); line-height: var(--lh-karte); font-weight: 600;
  color: var(--farbe-text);
}
.vorteile__text { margin-top: 24px; }
.vorteile__knopf { margin-top: 0; }

/* =========================================================================
   14 · „Deine Aufgaben" / „Das bringst du mit" (Foto-Band, Listen)
   =========================================================================
   Gemessen: Band ab 6062 (weiss-Basis) mit ::before-Foto AK_04866 + dunkler
   Schicht. H2 48 weiss links (x=112), Listen rechts (x=605, Breite 763):
   je Punkt Emoji-SVG 18×18 + strong-Vorspann (Roboto 700) + Text
   (Roboto 400) 18/30.6 weiss; Zeilenabstand ~79.
   ========================================================================= */
.aufgaben {
  position: relative;
  padding: 60px var(--rand-seite) 78px;   /* gemessen: Kasten 749, Liste->Arbeitsplatz 144 */
  background: var(--farbe-weiss);
  isolation: isolate;
}
.aufgaben::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(206,24,24,0) url('/assets/img/seite/20241127-ak-04866-enhanced-nr-scaled.webp') center / cover no-repeat;   /* Literal der Quelle */
}
.aufgaben__block {
  display: grid;
  grid-template-columns: minmax(0, 313px) minmax(0, 763px);
  justify-content: space-between;
  gap: 60px;
  max-width: var(--breite-inhalt); margin-inline: auto;
}
.aufgaben__block + .aufgaben__block { margin-top: 118px; }
.aufgaben__block h2 { color: var(--farbe-weiss); }
.aufgaben__liste { font-family: var(--schrift-liste); color: var(--farbe-weiss); }
.aufgaben__liste li { position: relative; padding-left: 30px; }
.aufgaben__liste li + li { margin-top: 18px; }   /* gemessen: Absatz->Absatz 49 bei einzeiligen Punkten */
.aufgaben__liste img.emoji {
  position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px;
}
.aufgaben__liste strong { font-weight: 700; }

/* =========================================================================
   15 · „Dein zukünftiger Arbeitsplatz?" (Creme-Band mit Galerie-Slider)
   =========================================================================
   Gemessen: Band 1440×703 Creme (6812). H2 60/400 zentriert (6872), dann
   ein BILD-LAUFBAND: 12 Kacheln 480×321 nebeneinander (y=6972) — ein
   Endlos-Slider. Nachbau: dieselben Kacheln als Laufband (CSS-Animation,
   pausiert bei prefers-reduced-motion und :hover). Knopf zentriert (7382).
   ========================================================================= */
.arbeitsplatz {
  padding: 60px 0 91px;   /* gemessen: Kasten 703 */
  background: var(--farbe-creme);
  text-align: center;
  overflow: hidden;
}
.arbeitsplatz h2 { font-size: var(--fs-h2-band); line-height: 60px; font-weight: 400; }
.arbeitsplatz__band {
  display: flex; gap: 0;
  width: max-content;
  margin-top: 40px;              /* gemessen: H2 endet 6932, Bilder 6972 */
  animation: arbeitsplatz-lauf 60s linear infinite;
}
.arbeitsplatz__band:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .arbeitsplatz__band { animation: none; } }
.arbeitsplatz__band img { width: 480px; height: 321px; object-fit: cover; flex: none; }
@keyframes arbeitsplatz-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.arbeitsplatz__knopf { margin-top: 89px; }  /* gemessen: Bilder enden 7293, Knopf 7382 */

/* =========================================================================
   16 · „Du hast Fragen?" (Kontakt)
   =========================================================================
   Gemessen: weisses Band (7514 ×702). Links (x=112): h3 40/56 (7608),
   Zeile 18/30.6 (7694), Name/Tel/Mail 26/36.4 (7756/7842/7929),
   Knopf 240×42 (8080). Rechts Foto 389×582 (7574).
   ========================================================================= */
.fragen { padding: 60px var(--rand-seite) 86px; }
.fragen__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 648px) minmax(0, 389px);
  justify-content: space-between;
  gap: 60px;
  max-width: var(--breite-inhalt); margin-inline: auto;
}
.fragen__text { padding-top: 94px; }           /* gemessen: Band 7514, h3 7608 */
.fragen__text > p { margin-top: 30px; }        /* gemessen: h3 endet 7664, Zeile 7694 */
.fragen__kontakt { margin-top: 32px; }
.fragen__kontakt li {
  font-family: var(--schrift-display);   /* gemessen: IBM Plex Serif */
  font-size: 26px; line-height: 36.4px;
  color: var(--farbe-text);
}
.fragen__kontakt li + li { margin-top: 50px; } /* gemessen: 7756 → 7842 → 7929 */
.fragen__kontakt a:hover { text-decoration: underline; }
.fragen__text > .fragen__knopf { margin-top: 80px; }   /* gemessen: Mail->Knopf 92, Knopf->Prozess 165 */
.fragen__foto { width: 389px; max-width: 100%; height: auto; aspect-ratio: 389 / 582; object-fit: cover; border-radius: 12px; }

/* =========================================================================
   17 · „So läuft der Bewerbungsprozess ab:" (Foto-Band, 6 Schritte)
   =========================================================================
   Gemessen: Band 1440×700 (8216) mit Foto AK_03591 (cover) + dunkler
   Schicht. H2 45/49.5 fw600 weiss zentriert (8276), sechs Zeilen 29/29
   fw600 links (x=187, Abstand 60, mit Nummern-Punkten davor).
   ========================================================================= */
.prozess {
  position: relative;
  padding: 60px var(--rand-seite) 183px;   /* gemessen */
  isolation: isolate;
}
.prozess::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
              url('/assets/img/seite/20241127-ak-03591-enhanced-nr-scaled.webp') center / cover no-repeat;
}
.prozess h2 { font-size: 45px; line-height: 49.5px; font-weight: 600; color: var(--farbe-weiss); text-align: center; }
.prozess__liste { max-width: 1152px; margin: 72px auto 0; }
.prozess__liste li + li { margin-top: 25px; }   /* gemessen */
.prozess__liste .prozess__text { display: block; flex: 1; padding: 15px; }  /* gemessen: Text-Span 60 hoch, innen 15 */
.prozess__kreis {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--farbe-orange);
}
.prozess__liste a {
  display: flex; align-items: center;
  font-family: var(--schrift-text);      /* gemessen: Inter, nicht Serif */
  font-size: 29px; line-height: 29px; font-weight: 600;
  color: var(--farbe-weiss);
}
.prozess__liste a:hover { text-decoration: underline; }


/* =========================================================================
   18 · FAQ
   =========================================================================
   Gemessen: Creme-Band (8916 ×981). H2 48 zentriert (9036), fuenf weisse
   Zeilen 1200 breit (x=120), Frage h4 25/35 links mit Aufklapp-Symbol;
   Antworten zugeklappt (faq-ausgeschnitten.md).
   ========================================================================= */
.faq { padding: 120px var(--rand-seite) 110px; background: var(--farbe-creme); }
.faq h2 { text-align: center; }
/* Hauptdomain-/faq/: WEISSES Band 1440×462, ZWEI Spalten — H2 x120 w480 links,
   Akkordeon x600 w720 rechts, beide beginnen auf derselben Hoehe (y1114).
   Einspaltig untereinander war das Band 504 statt 462 px hoch. */
.faq--haupt {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 720px);
  justify-content: center; align-items: start;
  background: var(--farbe-weiss); padding-block: 100px;
}
.faq--haupt .faq__h2 { text-align: left; }
.faq--haupt .faq__liste { max-width: none; margin: 0; }
.faq__frage { font-size: 25px; line-height: 35px; font-weight: 600; }   /* gemessen */
/* Gemessen: Eintrag = Rahmenkasten (1 px #111, Radius 5, ohne Innenabstand)
   um einen Creme-Kasten mit 15 px Innenabstand — 35 Zeile + 30 + 2 = 67 hoch. */
.faq__liste--schmal .faq__eintrag {
  background: var(--farbe-creme); border: 1px solid var(--farbe-text); border-radius: 5px;
}
.faq__liste--schmal .faq__eintrag summary { padding: 15px; }
.faq__liste--schmal .faq__eintrag + .faq__eintrag { margin-top: 13px; }
.faq__liste { max-width: var(--breite-schmal); margin: 60px auto 0; }  /* gemessen: 85 Text-zu-Text */
.faq__eintrag { background: var(--farbe-weiss); }
.faq__eintrag + .faq__eintrag { margin-top: 20px; }   /* gemessen: 9202+120=9322 → 9342 */
.faq__eintrag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 25px 30px;
  cursor: pointer; list-style: none;
}
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.faq__eintrag summary::after {
  content: '+'; flex: none;
  font-family: var(--schrift-display); font-size: 28px; color: var(--farbe-orange);
}
.faq__eintrag[open] summary::after { content: '–'; }
.faq__antwort { padding: 0 30px 25px; }

/* =========================================================================
   19 · Danke-Seite + Rechtstexte
   ========================================================================= */
.dnk { padding: 130px var(--rand-seite) 134px; text-align: center; }  /* gemessen (1440): Name->Vorfuss 234 */
.dnk__titel {
  font-family: var(--schrift-display);
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600;
  color: var(--farbe-text);
}
.dnk__titel--zwei { margin-top: 20px; }
.dnk__text { max-width: 800px; margin: 40px auto 0; }
.dnk__knopf { margin-top: 40px; }

.recht { padding: 60px var(--rand-seite) 78px; background: var(--farbe-weiss); }  /* gemessen (1440): Textende->Vorfuss-h2 184 */
.recht__inhalt { max-width: var(--breite-schmal); margin-inline: auto; overflow-wrap: break-word; }
.recht__inhalt > * + * { margin-top: 18px; }
.recht__inhalt ul { padding-left: 20px; list-style: disc; }
.recht__inhalt h2 { font-size: 48px; line-height: 52.8px; }
.recht__inhalt > h2 { margin-top: 22px; }  /* gemessen: Absatzende->h2 22 */
/* ⚠ BUG DER ALTSEITE (Register C): Links und die „Konzept"-Überschrift stehen
   dort in CREME AUF WEISS (Kontrast ~1,1:1, praktisch unsichtbar). Hier in
   Markenbraun — Kontrast-Bugs werden korrigiert, nicht übernommen. */
.recht__inhalt a { color: var(--farbe-braun); text-decoration: underline; }
.recht__titel {
  font-family: var(--schrift-display);
  font-size: 64px; line-height: 70.4px; font-weight: 600;  /* gemessen: wie die H1 */
  color: var(--farbe-text);
}

/* =========================================================================
   20 · Schmale Bildschirme — deckelt Festbreiten; gemessene 390er-Werte.
   ========================================================================= */
@media (max-width: 1240px) {
  .kopf__inhalt, .fuss__inhalt { max-width: 100%; }
  .wechsel__inhalt,
  .wechsel--getauscht .wechsel__inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aufgaben__block { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .fragen__inhalt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .vorteile__karten { grid-template-columns: repeat(2, minmax(0, 357px)); gap: 60px 40px; }
}

@media (max-width: 900px) {
  :root {
    --fs-h1:      31px;   /* gemessen (390): 31/31 */
    --lh-h1:      31px;
    --fs-h2:      32px;   /* gemessen: 32/35.2 */
    --lh-h2:    35.2px;
    --fs-h2-band: 40px;   /* gemessen: 40/40 */
    --fs-h3:      28px;   /* gemessen: 28/39.2 */
    --lh-h3:    39.2px;
    --fs-body:    17px;   /* gemessen: body 17 */
    --lh-body:  28.9px;
    --rand-seite: 20px;
    --kopf-hoehe: 100px;  /* gemessen: Kopfband 390×100 */
  }
  .hero { margin-top: -50px; padding: 150px var(--rand-seite) 60px; }
  .hero__knopf { margin-top: 60px; }
  .stellen__pille {
    min-height: 49px;
    padding: 12px 30px;
    font-size: 20px; line-height: 20px;   /* gemessen (390): Pillen 49/66 hoch */
  }
  .wechsel__inhalt,
  .wechsel--getauscht .wechsel__inhalt { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wechsel--getauscht .wechsel__foto { order: 0; }
  .wechsel--getauscht .wechsel__text { order: 1; }
  .ziel { padding: 200px var(--rand-seite) 60px; }
  .vorteile__karten { grid-template-columns: minmax(0, 1fr); gap: 80px; margin-top: 80px; }
  .vorteile__karte { min-height: 0; }
  .aufgaben__block { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .aufgaben__block + .aufgaben__block { margin-top: 60px; }
  .arbeitsplatz__band img { width: 300px; height: 200px; }
  .fragen__inhalt { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fragen__kontakt li { font-size: 22px; line-height: 30.8px; }
  .fragen__kontakt li + li { margin-top: 30px; }
  .fragen__knopf { margin-top: 40px; }
  .prozess__liste a { font-size: 24px; line-height: 24px; }
  .faq__liste { margin-top: 50px; }
  .faq__eintrag summary h4 { font-size: 17px; line-height: 23.8px; }  /* gemessen (390) */
  .faq__frage { font-size: 21px; line-height: 29.4px; }   /* gemessen (390) */
  .faq__liste--schmal .faq__eintrag summary { padding: 20px; }
  .faq__liste--schmal .faq__eintrag + .faq__eintrag { margin-top: 12px; }
  /* Gemessen (390): Band 620–1226 mit 24er Rand, H2 684–754, Akkordeon ab 805 —
     einspaltig, die zwei Spalten des Grossbildschirms entfallen. */
  /* `.faq.faq--haupt`, nicht `.faq--haupt`: weiter unten steht ein
     `.faq { padding-bottom: 20px }` fuer die Karriereseiten — bei gleicher
     Spezifitaet gewinnt das spaetere und der untere Rand waere wieder 20. */
  .faq.faq--haupt { grid-template-columns: minmax(0, 1fr); padding: 64px 24px; }
  .faq--haupt .faq__liste { margin-top: 51px; }
  .bwb__knopfzeile { flex-direction: column; align-items: center; }
  .bwb__weiter { flex: none; width: 100%; max-width: 320px; }
  /* Fuss (390): einspaltig und ALLES zentriert (gemessen). */
  .fuss { text-align: center; }
  .fuss__inhalt { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* GEMESSEN (390): Icons 32×32 bei x=136/179/221 — also 11 px Luft. */
  .fuss__sozial { flex-direction: row; justify-content: center; gap: 11px; }
  .fuss__sozial a { width: 32px; height: 32px; }
}

@media (max-width: 360px) {
  .kopf__logo img { width: 170px; height: auto; }
  .hero__video-karte, .hero__iframe-halter { width: 100%; }
  /* Die 370-px-Pillen der Quelle sprengen Kleinstgeraete — Gate 3 fand 25 px
     Seitwaertsscrollen bei 320 px. Mindestbreiten hier aufheben. */
  .stellen__liste li .stellen__pille,
  .stellen__liste li:nth-child(n) .stellen__pille { min-width: 0; max-width: 100%; }
}

/* =========================================================================
   21 · Unterseiten-Bausteine (nach dem ersten Bau ergaenzt)
   ========================================================================= */
/* Seitenkopf der Unterseiten: Panorama-Foto 1440×530 ab y=85 (unters
   Kopfband), H1 64/70.4 fw600 WEISS zentriert bei y=305. */
.seitenkopf {
  position: relative;
  margin-top: -50px;
  padding: 220px var(--rand-seite) 240px;
  isolation: isolate;
  text-align: center;
}
.seitenkopf {
  background: url('/assets/img/seite/190223-physiomed-sued-215-scaled.webp') center / cover no-repeat;
}
.seitenkopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #141004; opacity: .8;
}
.seitenkopf h1 {
  font-size: 64px; line-height: 70.4px; font-weight: 600;
  color: var(--farbe-weiss);
}

/* „Sie haben Fragen?"-Vorfussblock der Unterseiten (Quelle: Impressum/Danke). */
.vorfuss {
  position: relative;
  /* GEMESSEN (startseite-1440): Band 4576–5007, H2 4676, Knopf endet 4907.
     Oben wie unten 100 — die 90 stammten aus einer Gegenrechnung fuer den
     10 px zu grossen Knopfabstand darunter, der jetzt selbst stimmt. */
  padding: 100px var(--rand-seite);
  isolation: isolate;
  text-align: center;
  color: var(--farbe-weiss);
  background: url('/assets/img/seite/190223-physiomed-sued-497-scaled.webp') center / cover no-repeat;
}
.vorfuss::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #141004; opacity: .8;    /* gemessen: rgb(20,16,4) 0.8 */
}
.vorfuss__inhalt { max-width: 700px; margin-inline: auto; }
.vorfuss h2 { color: var(--farbe-weiss); }
.vorfuss p { margin-top: 30px; font-size: 15px; line-height: 26px; }  /* gemessen */
/* GEMESSEN als ELEMENTabstand 30 (1440: Absatz 4759 dreizeilig -> 4837,
   Knopf 4867 · 390: Absatz 5410 fuenfzeilig -> 5525, Knopf 5555).
   Die frueheren 40 waren der TEXT-Rechteck-Abstand — dazwischen liegt die
   halbe Zeilenluft. Wer den Rechteckwert als Rand setzt, baut sie doppelt. */
.vorfuss__knopf { margin-top: 30px !important; }
.vorfuss .knopf {
  min-height: 40px;
  padding: 10px 25px;
  min-width: 160px;                        /* gemessen: 160×40 — deren Manrope rendert breiter */
  background: var(--farbe-orange-matt);   /* gemessen: 160×40, matt, WEISSER Text */
  color: var(--farbe-weiss);
  font-size: 20px; line-height: 20px;
}

/* Danke-Seite — gemessen: Adresse 20/500 #111 (270), Titel 50 braun (350),
   Zeile 27/27 braun (432), Foto ab 532, Name 18/400 braun (1122). */
.dnk__adresse { font-size: 20px; font-weight: 500; color: var(--farbe-text); }
.dnk__titel { font-size: 50px; color: var(--farbe-braun); margin-top: 49px; }
.dnk__zeile { margin-top: 30px; font-size: 27px; line-height: 27px; color: var(--farbe-braun); }
.dnk__bild {
  width: 420px; max-width: 100%; height: auto;
  margin: 44px auto 0; border-radius: 12px;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.dnk__name { margin-top: 24px; font-size: 18px; font-weight: 400; color: var(--farbe-braun); }

/* FactorialHR-Klick-zu-Laden (LP) */
.factorial {
  max-width: 900px; margin: 50px auto 0;
  padding: 40px; border-radius: 12px;
  background: var(--farbe-creme);
  color: var(--farbe-text-grau);
}
.factorial p + p { margin-top: 24px; }
.factorial__iframe { width: 100%; min-height: 1400px; border: 0; background: var(--farbe-weiss); border-radius: 12px; }

@media (max-width: 900px) {
  .seitenkopf { padding: 80px var(--rand-seite) 40px; }
  .seitenkopf h1 { font-size: 40px; }
}

/* =========================================================================
   22 · Unterseiten schmal (390, gemessen) — MUSS nach Abschnitt 21 stehen,
   sonst gewinnen die spaeter definierten Desktop-Regeln die Kaskade.
   ========================================================================= */
@media (max-width: 900px) {
  .seitenkopf { padding: 150px var(--rand-seite) 54px; }   /* gemessen: Kasten 244, H1->Titel 114 */
  .seitenkopf h1 { font-size: 36px; line-height: 39.6px; }
  .recht__titel { font-size: 36px; line-height: 39.6px; }
  .recht__inhalt h2 { font-size: 32px; line-height: 35.2px; }
  .dnk { padding: 90px var(--rand-seite) 134px; }   /* gemessen (390): Name->Vorfuss 198 = 134 + 64 */
  .dnk__adresse { font-size: 17px; }
  .dnk__titel { font-size: 33px; }
  .dnk__zeile { font-size: 21px; line-height: 21px; }
  .dnk__name { font-size: 17px; }
  /* GEMESSEN (390): Band 5281–5659, H2 5345, Knopf endet 5595 → 64 oben
     wie unten. 87/31 war eine Gegenrechnung fuer den Knopfabstand. */
  .vorfuss { padding: 64px 24px; }
  .vorfuss p { font-size: 14px; line-height: 23px; }
  .vorfuss .knopf { padding: 10px 20px; min-width: 150px; }   /* gemessen (390): 150×40 */
  /* GEMESSEN (390): Band 5659, erste h6 5676; Innenrand 23.4 (nicht 24) —
     die 0.6 px entscheiden, ob „Waßmannsdorfer Chaussee 5, 12355 Berlin"
     in eine Zeile passt. In der Quelle passt es NICHT. */
  .fuss { padding: 17px 23.4px; }
  .recht { padding-bottom: 52px; }                     /* gemessen (390): Textende->Vorfuss 116 = 52 + 64 */
  .fuss__inhalt { gap: 20px; }   /* gemessen (390): Blockende 5876.9 -> naechste h6 5897 */
  .factorial { padding: 24px; }
}

/* --- Startseite/LP schmal (390, gemessen) — ans Dateiende (Kaskade!) ------ */
@media (max-width: 900px) {
  .hero__unter { font-size: 17px; }
  .stellen__pille { font-size: 17px; line-height: 17px; }
  .stellen__liste li .stellen__pille { min-width: 0; }   /* mobil bestimmen Inhalt+Rand */
  .bwb__titel { font-size: 28px; line-height: 39.2px; }
  .bwb__label { font-size: 15px; }
  .ziel h2 { line-height: 40px; }
  .vorteile__unter { font-size: 17px; line-height: 25.5px; }
  .vorteile__titel { font-size: 24px; line-height: 33.6px; }
  .aufgaben__liste { font-size: 19px; }   /* gemessen: mobil GROESSER als Desktop */
  .arbeitsplatz h2 { line-height: 40px; }
  .fragen__kontakt li { font-size: 20px; line-height: 28px; }
  .prozess h2 { font-size: 26px; line-height: 28.6px; }
  .prozess__liste a .prozess__text,
  .prozess__liste a { font-size: 20px; line-height: 20px; }
  .hero__knopf { margin-top: 37px; }
  .hero { padding-bottom: 167px; }
  .stellen { padding-bottom: 20px; }
  .bwb__punkte { margin-bottom: 76px; }
  .bwb { padding-bottom: 21px; }
  .wechsel { padding-bottom: 20px; }
  .wechsel--getauscht { padding-bottom: 72px; }
  .ziel { padding-bottom: 262px; }
  .vorteile__karten { margin-top: 187px; gap: 191px; }
  .vorteile__knopfband { padding: 100px var(--rand-seite) 100px; }
  /* Aufgaben (390, aus Quell-y berechnet): li 298 breit, Zeilengap 18,
     Block-zu-Block 49, Band-pt 84 / pb 52. */
  .aufgaben { padding: 84px 26px 52px; }
  .aufgaben__liste { margin-top: 0; }   /* der Grid-gap liefert die 30 */
  .aufgaben__liste li { padding-left: 40px; padding-right: 45px; }   /* Fliessbreite 253 — bester Kompromiss der Umbruch-Grenzfaelle */
  .aufgaben__liste li + li { margin-top: 18px; }
  .aufgaben__block + .aufgaben__block { margin-top: 49px; }
  .stellen__liste .stellen__pille { padding: 16px 25px; }   /* gemessen: Innenabstand 25 */
  .stellen__liste li:nth-child(1) .stellen__pille { min-width: 286px; }
  .stellen__liste li:nth-child(2) .stellen__pille { min-width: 370px; max-width: 100%; }
  .stellen__liste li:nth-child(3) .stellen__pille { min-width: 370px; max-width: 100%; }
  .stellen__liste li:nth-child(4) .stellen__pille { min-width: 232px; }
  .bwb__weiter { width: auto; max-width: none; padding: 0 25px; }
  .wechsel { padding-bottom: 1px; }
  .wechsel--getauscht { padding-bottom: 20px; }
  .arbeitsplatz { padding: 54px 0 48px; }
  .arbeitsplatz__knopf { margin-top: 104px; }
  .fragen { padding-top: 84px; }
  .fragen__text { padding-top: 0; }
  .fragen__kontakt { margin-top: 87px; }
  .fragen__kontakt li + li { margin-top: 99px; }
  .prozess__liste { margin-top: 40px; }
  .prozess { padding-bottom: 234px; }
  .faq { padding-bottom: 20px; }
  .stellen { padding-bottom: 18px; }
  .ziel { padding-top: 252px; padding-bottom: 262px; }
  .ziel__unter { margin-top: 30px; }
  .vorteile__karten { margin-top: 152px; gap: 120px; }
  .vorteile__karte { padding: 65px 30px; }
  .vorteile__knopfband { padding: 65px var(--rand-seite); }
}

/* =========================================================================
   30 · HAUPTSEITE physiomed-sued.de — eigene Bausteine
   =========================================================================
   Token, Kopf, Fuss und die Karriere-Bausteine oben gelten unveraendert
   (ein Branding, gemessen). Hier nur, was die Hauptdomain zusaetzlich hat.
   ========================================================================= */

/* --- Startseite: Hero (Band 85–1275, Foto AK_04284 + dunkle Schicht) ------ */
.sh-hero {
  position: relative;
  margin-top: -50px;
  min-height: 1190px;                       /* gemessen: Band y85–1275 */
  display: flex; align-items: flex-start;
  padding: 250px var(--rand-seite) 300px;   /* gemessen: H1 bei y=335 */
  isolation: isolate;
  text-align: center;
  background: url('/assets/img/seite/20241127-ak-04284-enhanced-nr-scaled.webp') center / cover no-repeat;
}
.sh-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #141004; opacity: .7;   /* gemessen */
}
.sh-hero h1 { font-size: 64px; line-height: 70.4px; font-weight: 600; color: var(--farbe-weiss); }
.sh-hero__unter { margin-top: 40px; font-size: 15px; line-height: 26px; color: var(--farbe-weiss); }
.sh-hero__knopf { margin-top: 50px; }

/* --- Startseite: „Unser Einfluss" (weisse Karte 1181×304 bei y=1125) ------ */
.sh-einfluss { padding: 0 var(--rand-seite); margin-top: -150px; position: relative; z-index: 2; }
.sh-einfluss__karte {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 40px; align-items: center;
  max-width: 1181px; margin-inline: auto;
  padding: 60px; background: var(--farbe-weiss);
}
.sh-einfluss__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: center; }
.sh-einfluss__wert {
  display: block;
  font-family: var(--schrift-text);   /* gemessen: Inter, nicht Serif */
  font-size: 50px; line-height: 55px; font-weight: 800;
  color: var(--farbe-braun);
}
/* Gemessen: die Zahl ist zentriert, das LABEL linksbuendig. */
.sh-einfluss__label { display: block; font-size: 16px; line-height: 40px; color: var(--farbe-text-grau); text-align: left; }

/* --- Startseite: „Alles auf einen Blick" (Karten 393×396 mit Foto) ------- */
.sh-wahl { padding: 141px var(--rand-seite) 100px; text-align: center; }   /* gemessen: 206 nach den Kennzahlen */
.sh-wahl__lead { margin-top: 20px; }   /* gemessen: Ueberschrift->Lead 20 */
.sh-wahl__karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 393px));
  justify-content: center; gap: 30px;
  margin-top: 60px;
}
.sh-wahl__karte {
  position: relative;
  min-height: 396px;
  padding: 45px;                            /* gemessen: Karte 393×396, Innenabstand 45 */
  isolation: isolate;
  text-align: left;
  color: var(--farbe-weiss);
  background: var(--karte-bild) center / cover no-repeat;
}
.sh-wahl__karte::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #141004; opacity: .55;
}
.sh-wahl__karte h3 { font-size: 40px; line-height: 56px; color: var(--farbe-weiss); }
.sh-wahl__karte p { margin-top: 20px; color: var(--farbe-weiss); }
.sh-wahl__knopf { margin-top: 20px; }   /* gemessen: Text endet 2002, Link 2022 */
/* Gemessen: transparent, 135×26, Radius 0, Text ZENTRIERT — kein Knopf.
   Die 26 px sind 20 (Zeile) + 4 (Innenabstand unten) + 2 (Unterstrich in
   #F0E6C5, Rahmenfarbe der Quelle). Ohne diese Linie zaehlt das Messwerkzeug
   den Link gar nicht als Flaeche — dann paart es den ersten Karten-Link mit
   dem Team-KNOPF (185×40, orange, r30) und meldet sechs Scheinfehler. */
/* `block`, nicht `inline-block`: als Zeilenelement setzt der Grundlinienabgleich
   den Link 4 px tiefer, als die Marge vorgibt — genau diese 4 px fehlten oben. */
.sh-wahl__knopf a {
  display: block; width: 135px;
  padding: 0 0 4px;
  border-bottom: 2px solid var(--farbe-creme-dunkel);
  background: none; border-radius: 0;
  font-family: var(--schrift-knopf);
  font-size: 20px; line-height: 20px; font-weight: 600;
  color: var(--farbe-creme-dunkel);   /* gemessen: #F0E6C5 */
  text-align: center;
}
/* Gemessen: die Textzeile der Quelle ist 20 px hoch (Zeilenhoehe), nicht die
   Schriftkastenhoehe eines inline-Spans — der Span traegt den Text als Block. */
.sh-wahl__knopf a span { display: block; }
.sh-wahl__knopf a:hover { text-decoration: underline; }

/* --- Startseite: „Warum" / „25+ Jahre" (Text-Foto-Paare) ------------------ */
.sh-warum { padding: 100px var(--rand-seite) 60px; background: var(--farbe-weiss); }
.sh-jahre { padding: 60px var(--rand-seite) 124px; background: var(--farbe-weiss); }   /* gemessen: Absatzende 3054, Team-Band 3178 */
.sh-warum__inhalt, .sh-jahre__inhalt {
  display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 560px);
  justify-content: space-between; align-items: center; gap: 60px;
  max-width: var(--breite-inhalt); margin-inline: auto;
}
/* Gemessen: Text und Foto beginnen beide bei y2293 — oben buendig. Zentriert
   rutschte die H2 um 17 px nach unten, weil unser Absatz eine Zeile kuerzer
   umbricht als der der Quelle. (Bei „25+/Jahre" bleibt es bei zentriert:
   dort steht die Zahl in der Quelle zweizeilig neben der h3.) */
.sh-warum__inhalt { align-items: start; }
.sh-warum__text p { margin-top: 20px; }   /* gemessen */
.sh-warum__foto, .sh-jahre__foto {
  width: 100%; height: auto; object-fit: cover; border-radius: 12px;
}
.sh-jahre__zahl {
  font-family: var(--schrift-display);
  font-size: 85px; line-height: 85px; font-weight: 800;
  color: var(--farbe-braun);
}
.sh-jahre__text h3 { margin-top: 10px; font-size: 40px; line-height: 56px; }
.sh-jahre__absatz { margin-top: 77px; font-size: 15px; line-height: 26px; }   /* gemessen */

/* --- Startseite: Team-Band (Foto 1440×877, weisse Karte 600×677) --------- */
.sh-team {
  position: relative;
  padding: 100px var(--rand-seite);
  isolation: isolate;
  background: url('/assets/img/seite/190223-physiomed-sued-630-scaled.webp') center / cover no-repeat;
}
.sh-team::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #141004; opacity: .4; }
.sh-team__karte {
  max-width: 600px;
  padding: 50px;                     /* gemessen: Karte 600×677, Innenabstand 50 */
  background: var(--farbe-weiss);
}
.sh-team__karte p { margin-top: 20px; }   /* gemessen */
/* Spezifitaet: `.sh-team__karte p` (0-1-1) schlaegt `.sh-team__knopf` (0-1-0) —
   der Knopf bekam sonst die 20 der Absaetze statt seiner gemessenen 30. */
.sh-team__karte .sh-team__knopf { margin-top: 30px; }   /* gemessen: Absatz endet 3834, Knopf 3864 */

/* --- Startseite: Patientenstimmen (braunes Band) ------------------------- */
.sh-stimmen {
  padding: 60px var(--rand-seite) 152px;   /* gemessen: Absatzende 4424, Band endet 4576 */
  background: var(--farbe-braun);
  color: var(--farbe-weiss);
  text-align: center;
}
.sh-stimmen h2 { color: var(--farbe-weiss); }
.sh-stimmen p { max-width: 900px; margin: 20px auto 0; color: var(--farbe-weiss); }   /* gemessen */

/* --- Behandlungsseiten: Panorama-Kopf mit Inhaltsverzeichnis ------------- */
.bhd-kopf {
  position: relative;
  margin-top: -50px;
  padding: 120px var(--rand-seite) 100px;  /* gemessen (1440): Band 85 · Verzeichnis 205 · H1 627–697 · Band endet 798 */
  isolation: isolate;
  color: var(--farbe-weiss);
  background: var(--farbe-orange-matt);   /* gemessen: mattes Band #D7A052 */
}
.bhd-kopf__inhalt { max-width: var(--breite-schmal); margin-inline: auto; }
.bhd-kopf h1 { font-size: 64px; line-height: 70.4px; font-weight: 600; color: var(--farbe-weiss); }
.bhd-kopf__unter { margin-top: 30px; color: var(--farbe-weiss); }
.bhd-kopf__knopf { margin-top: 30px; }
/* Gemessen wird am TEXT-Rechteck, gesetzt wird am ELEMENT: zwischen beiden
   liegt die halbe Zeilenluft (bei 16/30,6 sind das 5,3 px). Quelle 1440:
   letzte Verzeichniszeile endet 546, H1 beginnt 627 -> Rechteckabstand 81,
   Elementabstand 76. Wer die 81 direkt setzt, baut 5 px zu viel ein. */
.bhd-kopf__verzeichnis { margin-bottom: 76px; }
.bhd-kopf__vz-titel {
  display: block;
  font-family: var(--schrift-text);   /* gemessen: Inter, nicht Serif */
  font-size: 25px; line-height: 30.6px;
  color: var(--farbe-weiss);
}
.bhd-kopf__verzeichnis ul { margin-top: 57px; }   /* gemessen: Rechteck 205 -> 298 = 62, Element 57 */
.bhd-kopf__verzeichnis li + li { margin-top: 15px; }
.bhd-kopf__verzeichnis a { font-size: 16px; line-height: 30.6px; color: var(--farbe-weiss); }
.bhd-kopf__verzeichnis a:hover { text-decoration: underline; }
.bhd-kopf--einfach { padding-block: 150px; text-align: center; }
/* Gemessen (/kontakt/): Fotoband 1440×410 mit ::before rgb(17,17,17) 0.5,
   H1 220 px unter der Bandkante. */
.bhd-kopf--foto {
  background: url('/assets/img/seite/190223-physiomed-sued-497-scaled.webp') center / cover no-repeat;
  padding: 220px var(--rand-seite) 120px;
}
.bhd-kopf--foto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #111111; opacity: .5; }

/* --- Behandlungsseiten: Inhaltsband ------------------------------------- */
.bhd { padding: 60px 30px; background: var(--farbe-weiss); }   /* gemessen: Bandrand 30 */
/* Gemessen (1440): Innenkasten x30 W1380 mit 30 ringsum -> Text x60 W1320.
   `max-width: 1320` machte daraus x90 W1260: 60 px zu schmal, und damit brach
   JEDER laengere Absatz eine Zeile frueher um als in der Quelle. Genau daraus
   kam die zu hohe Kastenhoehe des Inhaltsbands (1485 statt 1319).
   Der Innenkasten traegt auch OBEN und UNTEN 30 (Quelle: y858 h1199 im Band
   y798 h1319) — ohne sie schluckte die Randzusammenfassung den h2-Abstand. */
.bhd__inhalt { max-width: 1380px; margin-inline: auto; padding: 30px; overflow-wrap: break-word; }
/* Alle Abstaende sind ELEMENT-Abstaende, aus der Quelle zurueckgerechnet.
   Die frueheren 28/44/23/42/10 waren die gemessenen TEXT-Rechteck-Abstaende —
   je Blockgrenze rund 9,6 px Zeilenluft zu viel, ueber einen Absatzstapel
   summiert das auf gut 180 px. Gemessen (Atemtherapie + Krankengymnastik):
   Block zu Block 17,2–19,6 · vor h2/h3 38,2–39,6 · h2 vor Liste 37,4 ·
   Listenpunkte OHNE Zwischenabstand (luecklose 30,6er-Zeilen). */
.bhd__inhalt > * + * { margin-top: 18px; }
.bhd__inhalt > :first-child { margin-top: 0; }   /* h2 sitzt buendig am Innenrand */
.bhd__inhalt h2 { color: var(--farbe-braun); margin-top: 39px; }
.bhd__inhalt h2 + ul { margin-top: 37px; }
.bhd__inhalt h3 { color: var(--farbe-braun); font-size: 40px; line-height: 56px; margin-top: 39px; }
.bhd__inhalt ul { padding-left: 40px; list-style: disc; }   /* gemessen: Punkttext x100 gegen Absatz x60 */
.bhd__inhalt li + li { margin-top: 0; }
.bhd__inhalt a { color: var(--farbe-braun); text-decoration: underline; }
.bhd__knopf { margin-top: 40px; }
/* Der CTA-Knopf steht IM Quell-Body (als Link) — er bekommt hier die
   gemessene Knopfform: 232×40, Radius 30, Grund #D7A052, Text 20/600
   Manrope WEISS zentriert. */
/* Spezifitaet: `.bhd__inhalt a` (0-1-1) schlaegt `.bhd__cta` (0-1-0) — der
   CTA verlor sonst Farbe und Unterstreichung an die Fliesstext-Regel. */
.bhd__inhalt a.bhd__cta {
  background: var(--farbe-orange-matt);
  color: var(--farbe-weiss);
  text-decoration: none;
  min-height: 40px;
  padding: 10px 25px;
}
.bhd__inhalt a.bhd__cta:hover { filter: brightness(1.05); }
/* Nur /krankengymnastik-am-geraet/: dort steht in der Quelle vor dem Knopf
   eine Leerzeile (Absatzhoehe 30,6 + Blockabstand 18). Gemessen: der Knopf
   sitzt 67,6 statt 18,4 unter dem letzten Absatz, das Inhaltsband ist
   entsprechend 1283 statt 1235 hoch. Eine leere <p> waere 0 px hoch und
   wuerde nichts bewirken — deshalb als Abstand am Knopf. */
.bhd__inhalt a.bhd__cta--weit { margin-top: 66px; }

/* --- /physiotherapie/: Intro, Akkordeon, Preise -------------------------- */
/* Die Quelle hat hier KEIN eigenes Band — links steht der Seitengrund (Creme,
   Unterseiten-Standard). Ein eigener Creme-Grund am Abschnitt sieht gleich aus,
   erzeugt aber bei 390 px eine zweite Flaeche mit demselben Text und denselben
   Massen wie der weisse Kasten: das Messwerkzeug paart dann die Quelle mit dem
   Band statt mit dem Kasten und meldet „Hintergrundfarbe weiss vs. creme". */
.pht { padding: 0; display: flex; justify-content: flex-end; }
/* Gemessen: weisser Kasten in der RECHTEN Bildschirmhaelfte (x720 w720),
   Innenabstand 108 — der Kasten selbst traegt Weiss, nicht das Band. */
.pht__inhalt { width: 720px; max-width: 100%; padding: 108px; background: var(--farbe-weiss); }
.pht__frage { font-size: 34px; line-height: 37.4px; color: var(--farbe-braun); }   /* gemessen */
.pht__inhalt p { margin-top: 18px; }   /* gemessen: Absatz zu Absatz 23 (davon 4,5 Halbdurchschuss) */
.pht__inhalt > p:first-of-type { margin-top: 20px; }
/* Spezifitaet: `.pht__inhalt p` (0-1-1) schlaegt `.pht__knopf` (0-1-0) — der
   Knopf bekam sonst die Absatz-Marge. `p:last-of-type + .pht__knopf` griff nie,
   weil der Knopf-Absatz selbst der letzte <p> ist. */
.pht__inhalt .pht__knopf { margin-top: 47px; }   /* gemessen: Absatz endet 1270, Knopf 1317 */

.lst { padding: 60px var(--rand-seite); background: var(--farbe-weiss); }
.lst__inhalt { max-width: var(--breite-schmal); margin-inline: auto; }
.lst__inhalt > h2 { color: var(--farbe-orange-matt); text-align: center; }   /* gemessen */
.lst__knopf { margin-top: 59px; text-align: center; }   /* gemessen: Akkordeon endet 3039, Knopf 3098 */
/* Gemessen: das Akkordeon ist 782 px breit und ZENTRIERT (nicht 1200). */
.lst__akkordeon { max-width: 782px; margin: 31px auto 0; }
/* Gemessen: Titelpitch = Titelhoehe + 22 (1440: 30,6+22 = 52,6 · 390: 58+22 = 80).
   In der Quelle sind das 11 px Innenabstand oben und unten und KEINE Trennlinie —
   keine einzige Akkordeon-Zeile taucht in den Flaechen der Quelle auf, eine
   Randlinie wuerde sie dort hinbringen. Der Titel darf 341-34-11 = 296 px breit
   werden (bei 390 gemessen), deshalb steht das Zeichen absolut statt im Fluss:
   als Flex-Element ass es 33 px und liess jeden zweiten Titel eine Zeile
   zusaetzlich umbrechen. */
.lst__eintrag summary {
  position: relative;
  display: flex; align-items: center;
  padding: 11px 11px 11px 34px;
  cursor: pointer; list-style: none;
}
.lst__eintrag summary::-webkit-details-marker { display: none; }
.lst__eintrag summary::after {
  content: '+'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--farbe-orange-matt);
}
.lst__eintrag[open] summary::after { content: '–'; }
/* Gemessen: 18/400 in #1F2124 — nicht fett, nicht schwarz. */
.lst__titel { font-size: 18px; line-height: 30.6px; font-weight: 400; color: #1F2124; }
/* Gemessen: der Kasten sitzt ohne Abstand unter der Zeile, hat KEINEN eigenen
   Innenabstand (0/0/0/0) und 1 px Rand. Die 30 ringsum traegt ein Kasten
   DARIN (in der Quelle ein Element ohne Grund und Rand, deshalb taucht es in
   den Flaechen nicht auf) — der Absatz ist 720 statt 780 px breit und bricht
   dadurch dreizeilig um wie in der Quelle. */
.lst__text {
  margin-top: 0; padding: 0;
  border: 1px solid #D5D8DC;
}
.lst__innen { padding: 30px 30px 47px; }
.lst__mehr { margin-top: 18px; }   /* gemessen: Absatz mb 18, Link sitzt 4 tiefer (Grundlinie) */
.lst__mehr a { color: var(--farbe-orange-matt); }
.lst__mehr a:hover { text-decoration: underline; }

/* Gemessen: Creme-Band; die Liste hat NULL Zwischenabstaende (lueckenlose
   30,6er-Zeilen), Unterpreise sind 40 px eingerueckt. */
.prs { padding: 60px var(--rand-seite); background: var(--farbe-creme); }   /* gemessen: Band 3198–4049, Text 3258–3989 */
.prs__inhalt { max-width: var(--breite-schmal); margin-inline: auto; }
.prs__lead { margin-top: 30px; }
.prs__liste { margin-top: 18px; }   /* gemessen: Lead endet 3463, erster Posten 3481 */
/* Gemessen: die Liste ist um 40 px eingerueckt (1440: Posten x160 bei Textrand
   120 · 390: x64 bei Rand 24), Zusatzzeile und Preis noch einmal um 40
   (x200 bzw. x104). Ohne die Einrueckung sind die Zeilen 40–80 px breiter und
   drei Posten brechen eine Zeile weniger um — bei 390 fehlten so 87 px. */
.prs__liste { padding-left: 40px; }
.prs__liste li + li { margin-top: 0; }
.prs__zusatz, .prs__wert { margin-top: 0; margin-left: 40px; }
.prs__hinweis { margin-top: 17px; }   /* gemessen: letzter Posten endet 3941, Textkasten endet 3989 */

/* --- /medizinische-trainingstherapie/ ------------------------------------ */
/* Gemessen (1440): weisses Band y85 h993 — es liegt wie der Behandlungskopf
   50 px UNTER der Kopfbandkante. Spalte 600 breit und ZENTRIERT (h2 x420),
   Ueberschrift 48/52.8/600 IBM Plex Serif in #111 — nicht die globale
   h1-Regel (42/70/400 WEISS: weisse Schrift auf weissem Band). */
.mtt {
  position: relative;
  margin-top: -50px;
  isolation: isolate;
  padding: 120px var(--rand-seite);
  background: var(--farbe-weiss);
}
.mtt__inhalt { max-width: 600px; margin-inline: auto; text-align: center; }
.mtt__inhalt h1 {
  font-family: var(--schrift-display);
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600;
  color: var(--farbe-text);
}
.mtt__inhalt p { margin-top: 16px; }   /* gemessen: h2 endet 310.6, Absatz beginnt 326.2 */
/* Als Flex-Kasten ist die Zeile exakt so hoch wie der Knopf (40) — im
   Textfluss haengt sonst die Unterlaenge der Grundschrift darunter und
   verschiebt das Foto um rund 9 px. */
.mtt__inhalt .mtt__knopf { display: flex; justify-content: center; margin-top: 45px; }
/* Gemessen: Knopfkasten 308×40 bei Innenabstand 25 — der Text allein traegt
   nur 258. Ohne min-width blieb der Kasten 30 px zu schmal. */
.mtt__knopf .knopf { min-width: 308px; }
.mtt__foto { display: block; width: 600px; max-width: 100%; height: auto; margin: 85px auto 0; border-radius: 12px; }

/* --- /ueber-uns/ --------------------------------------------------------- */
/* Seitenkopf: eigene Fassung DIESER Seite (gemessen: Band 85–627 = 542 hoch,
   Inhaltsspalte 552 breit, H1 dadurch zweizeilig bei y=305, Unterzeile 20
   darunter, Bandfuss 100). Die gemeinsamen .bhd-kopf-Regeln bleiben
   unangetastet — sie tragen die Behandlungsseiten, die dort anders messen. */
.uu-kopf { padding-block: 220px 100px; }
.uu-kopf__inhalt { max-width: 552px; margin-inline: auto; }
.uu-kopf__unter { margin-top: 20px; }   /* gemessen: H1-Ende 446 -> Unterzeile 466 */

/* Gemessen: „Darauf legen wir Wert" steht nur 30 px unter dem Intro-Foto —
   der Bandwechsel liegt dazwischen, deshalb 0 unten / 30 oben. */
.uu-intro { padding: 60px var(--rand-seite) 0; background: var(--farbe-weiss); }
/* Gemessen: einspaltig ZENTRIERT 600 breit, Foto 600×401 UNTER dem Text (y687 -> 973). */
.uu-intro__inhalt { max-width: 600px; margin-inline: auto; text-align: center; }
.uu-intro__text p { margin-top: 20px; }
.uu-intro__foto { width: 600px; max-width: 100%; height: auto; margin: 60px auto 0; border-radius: 12px; }

.uu-werte { padding: 30px var(--rand-seite) 60px; background: var(--farbe-creme); text-align: center; }
.uu-werte__karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 387px));
  justify-content: center; gap: 20px;      /* gemessen */
  margin-top: 119px;                       /* gemessen: H2 -> Kartenoberkante */
}
.uu-werte__karte { padding: 30px; background: var(--farbe-weiss); }
.uu-werte__karte img { width: 60px; height: 60px; margin-inline: auto; border-radius: 50%; }
.uu-werte__karte h3 { margin-top: 6px; font-size: 25px; line-height: 35px; }   /* gemessen */
.uu-werte__karte p { margin-top: 21px; }                                       /* gemessen */

/* Gemessen: Band 2204–3280 (Innenabstand 100), H2-Ende 2357 -> Kartenoberkante
   2437, Karten 380 breit mit 50 Innenabstand (Textspalte 278). */
.uu-merkmale { padding: 100px var(--rand-seite); background: var(--farbe-weiss); text-align: center; }
.uu-merkmale__karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 380px));
  justify-content: center; gap: 30px;
  margin-top: 80px;
}
/* Gemessen: Karte TRANSPARENT (kein Creme), Icon 92 px ueber dem Titel,
   Titel 40/56 LINKSbuendig (mobil 28/39.2), Innenabstand 50 (mobil 20). */
.uu-merkmale__karte { padding: 50px; background: none; text-align: center; }
.uu-merkmale__karte img { width: 92px; height: 92px; margin-inline: auto; border-radius: 50%; }
.uu-merkmale__karte h3 { margin-top: 25px; font-size: 40px; line-height: 56px; text-align: left; }
.uu-merkmale__karte p { margin-top: 20px; text-align: left; }

/* Gemessen: zweispaltig — H2 links (x120 w480) 103 px unter der Bandkante,
   Fliesstext rechts (x880 w440, 15/26 px) buendig mit der Bandkante.
   Band 3281–4282: oben 0, unten 100. */
.uu-partner { padding: 0 var(--rand-seite) 100px; background: var(--farbe-weiss); }
.uu-partner__inhalt {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 440px);
  justify-content: space-between; column-gap: 60px; row-gap: 0;
  max-width: var(--breite-inhalt); margin-inline: auto;
}
.uu-partner h2 { grid-column: 1; margin-top: 103px; }
.uu-partner__lead { grid-column: 2; font-size: 15px; line-height: 26px; }
/* Gemessen: neun Logos in 3×3, Spaltenbreite 240, Zeilenhoehen 216/191/105
   (Block 3620–4182, 79 unter dem Fliesstext). */
.uu-partner__logos {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 240px));
  justify-content: center; justify-items: center; align-items: center;
  gap: 25px 40px; margin-top: 79px;
}
.uu-partner__logos img { width: auto; max-width: 240px; max-height: 216px; height: auto; }

/* Gemessen: WEISSES Band, Karten in Creme (im Nachbau war es vertauscht);
   H2 60/66 fw500 mit letter-spacing -2px. */
.uu-historie { padding: 60px var(--rand-seite); background: var(--farbe-weiss); }
.uu-historie h2 { text-align: center; font-size: 60px; line-height: 66px; font-weight: 500; letter-spacing: -2px; }
/* Gemessen: Schiene bei x=720, Karten 451 breit bei x=216 bzw. x=773
   (Inhaltsbreite 1008, Zwischenraum 106). Die ERSTE Station steht LINKS —
   deshalb ist die Grundrichtung row-reverse und nicht row. */
.uu-historie__liste { position: relative; max-width: 1008px; margin: 60px auto 0; }
.uu-historie__station { position: relative; }
.uu-historie__liste::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px; background: var(--farbe-orange-matt);
}
.uu-historie__station { display: flex; align-items: flex-start; gap: 106px; flex-direction: row-reverse; }
.uu-historie__station--rechts { flex-direction: row; }
.uu-historie__station + .uu-historie__station { margin-top: 30px; }
.uu-historie__karte {
  width: 451px; max-width: 100%;
  padding: 40px; background: var(--farbe-creme);   /* gemessen */
  text-align: right;
}
.uu-historie__station--rechts .uu-historie__karte { text-align: left; }
.uu-historie__karte h3 {
  font-size: 40px; line-height: 56px; font-weight: 600;
  color: var(--farbe-braun);                        /* gemessen */
}
/* Gemessen: das Jahr steht am Desktop AUSSERHALB der Karte an der Schiene,
   30 px Inter fw400 braun und ZENTRIERT (in beiden Richtungen). */
.uu-historie__jahr {
  flex: 1;
  font-size: 30px; line-height: 30.6px; font-weight: 400;
  color: var(--farbe-braun); text-align: center;
}
.uu-historie__karte p { margin-top: 10px; }

/* Gemessen: Text x=240 w=456 LINKS, Foto 302×453 rechts — in BEIDEN Bloecken
   gleich, Oberkanten buendig. Bandpolster 100/40 bzw. 40/100 (zwischen den
   beiden Bloecken liegen 80, vor dem Vorfuss 100). */
.uu-leitung { padding: 100px var(--rand-seite) 40px; background: var(--farbe-weiss); }
.uu-leitung--zweite { padding-block: 40px 100px; }
.uu-leitung__inhalt {
  display: grid; grid-template-columns: minmax(0, 456px) minmax(0, 302px);
  justify-content: space-between; column-gap: 60px; align-items: start;
  max-width: 960px; margin-inline: auto;
}
.uu-leitung__foto { width: 302px; max-width: 100%; height: auto; border-radius: 12px; }
.uu-leitung__text p { margin-top: 20px; }   /* gemessen: H2-Ende 7277 -> Text 7297 */

/* --- /kontakt/ ----------------------------------------------------------- */
.kt-form { padding: 30px var(--rand-seite) 60px; background: var(--farbe-weiss); }   /* gemessen: Kopfband endet 495, Vorspann 525 */
/* Gemessen: Vorspann x120 w1200, Formular x150 w1140 (390: x24 w342 / x30 w320) —
   das Formular ist schmaler als der Vorspann und beide breiter als 900. */
.kt-form__inhalt { max-width: var(--breite-schmal); margin-inline: auto; }
.kt-form__lead { text-align: center; }   /* gemessen */
.kt-form__form { max-width: 1140px; margin: 40px auto 0; }
.kt-form__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kt-form__feld { margin-top: 20px; }
/* Gemessen: 18/400 in #111111 — nicht 20/600 grau. Der Beschriftungskasten ist
   41 px hoch (30,6 Zeile + 10 unten), Beschriftung zu Beschriftung 111. */
.kt-form__label {
  display: block; padding-bottom: 10px;
  font-size: 18px; line-height: 30.6px; font-weight: 400; color: var(--farbe-text);
}
/* Gemessen: Beschriftungsende -> naechste Beschriftung 70 = 10 + Feld 40 + 20. */
.kt-form__eingabe {
  display: block; width: 100%; min-height: 40px;
  margin-top: 10px; padding: 4px 14px;
  border: 1px solid #D5D8DC; border-radius: 4px;
  background: var(--farbe-weiss); font-size: var(--fs-body);
}
/* Gemessen (1440 und 390 gleich): Beschriftungsende -> Einwilligungstext 146
   = 10 + Textfeld 116 + 20. Das Feld hat eine feste Hoehe, keine Zeilenzahl. */
.kt-form__eingabe--flaeche { height: 116px; }
.kt-form__eingabe:focus-visible { outline: 3px solid var(--farbe-orange); outline-offset: 2px; }
.kt-form__fehler { display: block; margin-top: 6px; color: #B00020; font-size: 14px; }
/* Gemessen: der Einwilligungstext ist in der Quelle ein ZEILEN-Element — sein
   Kasten ist 193 px hoch, wo sieben Zeilen 231 ergaeben (1440: 52 statt 61).
   Genau so misst der Abgleich auch unseren Text, sobald er nicht mehr
   Flex-Element ist; das Kaestchen steht dann davor in derselben Zeile. */
.kt-form__zustimmung { display: block; }
.kt-form__zustimmung input { margin-right: 12px; }
.kt-form__zustimmung { color: var(--farbe-text); }
.kt-form__zustimmung a { color: #000000; text-decoration: underline; }   /* gemessen */
.kt-form__meldung { margin-top: 24px; padding: 16px 20px; border-radius: 4px; background: var(--farbe-creme); }
.kt-form__knopfzeile { margin-top: 30px; }
.kt-form__knopfzeile .knopf { border-radius: 44px; padding: 10px 15px; }   /* gemessen: 103×40, r44 */

.kt-orte { padding: 60px var(--rand-seite) 79px; background: var(--farbe-weiss); }   /* gemessen: Anfahrttext endet 2864, Vorfussband 2943 */
.kt-orte__inhalt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px; max-width: var(--breite-inhalt); margin-inline: auto;
}
.kt-orte__karte { padding: 40px; background: var(--farbe-creme); }
.kt-orte__karte h2 { color: var(--farbe-braun); }   /* gemessen */
.kt-orte__firma { margin-top: 20px; font-weight: 400; color: var(--farbe-text); }   /* gemessen */
/* Gemessen: die drei Adresszeilen sind h5 — 28/600 IBM Plex Serif, #111111. */
.kt-orte__zeile {
  font-family: var(--schrift-display);
  font-size: 28px; line-height: 39.2px; font-weight: 600;
  color: var(--farbe-text);
}
.kt-orte__zeile + .kt-orte__zeile { margin-top: 20px; }   /* gemessen: 1965->1985, 2024->2045 */
.kt-orte__firma + .kt-orte__zeile { margin-top: 30px; }   /* gemessen: Firma endet 1857, erste Zeile 1887 */
.kt-orte__zeile a:hover { text-decoration: underline; }
.kt-orte__knopf { margin-top: 30px; }
.kt-orte__anfahrt { max-width: var(--breite-inhalt); margin: 60px auto 0; text-align: center; }
.kt-orte__anfahrt p + p { margin-top: 18px; }   /* gemessen: 2688->2706, 2737->2755, 2786->2803 */

/* Der frueher hier stehende .kws-Block ist entfallen: Abschnitt 32 definiert
   dieselben Klassen vollstaendig und spaeter. Die Doppelung hat aktiv Schaden
   angerichtet — `.kws__inhalt p` (0,1,1) schlug `.kws__titel` (0,1,0) und
   setzte die Abschnittsueberschriften auf Fliesstextgroesse. */

/* --- Schmale Bildschirme (Hauptseiten-Bausteine) ------------------------- */
@media (max-width: 1240px) {
  .sh-wahl__karten     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uu-werte__karten,
  .uu-merkmale__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Gemessen (390): Band 50–642, H1 170, Unterzeile 279, Knopf 355–395. */
  .sh-hero { min-height: 592px; padding: 120px var(--rand-seite) 247px; }
  .sh-hero h1 { font-size: 36px; line-height: 39.6px; }   /* gemessen (390) */
  .sh-hero__unter { margin-top: 30px; font-size: 14px; line-height: 23px; }
  .sh-hero__knopf { margin-top: 30px; }   /* gemessen (390): Unterzeile endet 325, Knopf 355 */
  .sh-einfluss__wert { font-size: 32px; line-height: 35.2px; }
  .sh-einfluss__label { margin-top: 8px; font-size: 14px; line-height: 22.4px; }
  .sh-jahre__absatz { font-size: 14px; line-height: 23px; }
  /* Gemessen (390): die Karte ist ein VOLLBREITES Band direkt unter dem Hero
     (x0 y642 w390 h478, Innenabstand 50/30) — sie ragt nicht mehr hinein. */
  .sh-einfluss { margin-top: 0; padding-inline: 0; }
  .sh-einfluss__karte { grid-template-columns: minmax(0, 1fr); gap: 50px; padding: 50px 30px; }
  .sh-einfluss__karte h2 { font-size: 28px; line-height: 30.8px; text-align: center; }   /* gemessen (390) */
  .sh-einfluss__zahlen { grid-template-columns: minmax(0, 1fr); gap: 50px; }   /* gemessen: Kennzahl zu Kennzahl 93 */
  /* Gemessen (390): Kartenband endet 1120, H2 1183, Karten 1365–2331, Weissband 2415. */
  .sh-wahl { padding: 63px var(--rand-seite) 84px; }
  .sh-wahl__karten { grid-template-columns: minmax(0, 1fr); gap: 35px; margin-top: 39px; }
  .sh-wahl__karte { min-height: 0; padding: 20px; }   /* gemessen (390): 342×318/289, Innenabstand 20 */
  .sh-wahl__karte h3 { font-size: 28px; line-height: 39.2px; }   /* gemessen (390) */
  .sh-warum { padding: 64px var(--rand-seite) 30px; }   /* gemessen (390): Weissband 2415, H2 2479 */
  .sh-jahre { padding: 30px var(--rand-seite) 64px; }   /* gemessen (390): Absatz endet 3842, Band 3906 */
  .sh-warum__inhalt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sh-jahre__inhalt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Gemessen (390): das Foto steht VOR „25+", nicht dahinter (y3244–3513,
     „25+" 3514). Am Grossbildschirm bleibt es rechts neben dem Text. */
  .sh-jahre__foto { order: -1; }
  .sh-jahre__zahl { font-size: 60px; line-height: 60px; }
  .sh-jahre__text h3 { font-size: 28px; line-height: 39.2px; }
  .sh-jahre__absatz { margin-top: 20px; }   /* gemessen (390): h3 endet 3592, Absatz 3612 */
  .sh-team { padding-block: 64px; }   /* gemessen (390): Band 3906–4758, Karte 3970–4694 */
  .sh-team__karte { padding: 30px; }
  .sh-stimmen { padding: 64px var(--rand-seite) 138px; }   /* gemessen (390): Band 4758–5281, Absatz endet 5143 */

  .bhd-kopf { padding-block: 60px; }
  .bhd-kopf h1 { font-size: 36px; line-height: 39.6px; }
  .bhd-kopf--einfach { padding-block: 90px; }
  .bhd__inhalt h2 { font-size: 32px; line-height: 35.2px; }
  .bhd__inhalt h3 { font-size: 28px; line-height: 39.2px; }
  .pht { padding: 0; }
  /* Gemessen (390): vollbreiter weisser Kasten x0 y873 w390 h806, Rand 30. */
  .pht__inhalt { max-width: none; margin-left: 0; padding: 30px; }
  .pht__frage { font-size: 28px; line-height: 30.8px; }   /* gemessen (390) */
  .pht__inhalt p { margin-top: 18px; }
  .pht__inhalt > p:first-of-type { margin-top: 10px; }
  .pht__inhalt .pht__knopf { margin-top: 17px; }   /* gemessen (390): Absatz endet 1593, Knopf 1610 */
  /* Gemessen (390): Band 1680–3638 ohne eigenen Rand — 20 oben, 90 unten. */
  .lst { padding: 20px var(--rand-seite) 90px; }
  .lst__akkordeon { max-width: 341px; margin-top: 25px; }   /* gemessen (390): Eintrag x25 w341 */
  .lst__knopf { margin-top: 35px; }   /* gemessen (390): Akkordeon endet 3473, Knopf 3508 */
  .lst__titel { font-size: 18px; line-height: 28.9px; }   /* gemessen (390) */
  .lst__inhalt > h2 { text-align: left; }
  /* Gemessen (390): Band 3638–4881, Rand 24 (Textbreite 342), H2 3668,
     Vorspann 3733–4051, erster Posten 4053. */
  .prs { padding: 30px 24px; }
  .prs__liste { margin-top: 2px; }
  /* Gemessen (390): Band 50–685, h2 beginnt 113.8, Textbreite 342 (Rand 24). */
  .mtt { padding: 64px 24px; }
  .mtt__knopf .knopf { min-width: 298px; padding: 10px 20px; }   /* gemessen (390): 298×40 */
  .mtt__foto { width: 171px; margin-top: 79px; }                 /* gemessen (390): Foto 171 breit, y480 */

  /* Gemessen (390): Kopfband 50–420, H1 36/39.6 zweizeilig bei 170. */
  .uu-kopf { padding-block: 120px 64px; }
  /* Zwei Klassen, weil die spaeter stehende Regel `.bhd-kopf h1` (Abschnitt
     „Behandlungsseiten schmal") bei gleicher Spezifitaet sonst gewinnt. */
  .uu-kopf.bhd-kopf h1 { font-size: 36px; line-height: 39.6px; }
  .uu-intro__foto { width: 211px; margin-top: 40px; }   /* gemessen (390): 211×141 bei y839 */
  .uu-werte__karten { grid-template-columns: minmax(0, 1fr); }
  /* Gemessen (390): Karten 342 breit, Innenabstand 20, Kartenabstand 40. */
  .uu-merkmale { padding-block: 60px; }
  .uu-merkmale__karten { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 60px; }
  .uu-merkmale__karte { padding: 20px; }
  .uu-merkmale__karte h3 { font-size: 28px; line-height: 39.2px; }
  .uu-historie { padding-inline: 0; }   /* gemessen (390): Karten stehen bei x=95 */
  .uu-historie h2 { padding-inline: var(--rand-seite); font-size: 30px; line-height: 36px; }
  .uu-historie__liste::before { display: none; }
  /* Gemessen (390): Jahr, Titel und Text stehen in EINER Cremekarte 285 breit
     bei x=95 mit 30 Innenabstand — das Jahr also INNEN oben, ohne Zwischenraum
     zur Ueberschrift. */
  .uu-historie__station,
  .uu-historie__station--rechts {
    flex-direction: column; gap: 0;
    width: 285px; margin-left: 95px;
    padding: 30px; background: var(--farbe-creme);
  }
  /* Zwei Ausreisser der Quelle, beide gemessen und beide sichtbar: unter der
     Karte „2005" stehen 17 px mehr Luft (Kasten 213 bei unveraendertem
     Innenabstand 30 — deshalb Aussenabstand, nicht Polster), und die Karte
     „2014" ist 302 statt 285 breit (Text dadurch zweizeilig, Kasten 196). Die
     Quelle steht dort 7 px ueber dem Fensterrand — das wird NICHT nachgebaut,
     der linke Einzug faengt die Breite ab (Gate 3 sonst: Seitwaertsscrollen). */
  .uu-historie__station:nth-child(2) .uu-historie__karte { margin-bottom: 17px; }
  .uu-historie__station:nth-child(8) { width: 302px; margin-left: 78px; }
  .uu-historie__karte,
  .uu-historie__station--rechts .uu-historie__karte {
    width: 100%; padding: 0; background: none; text-align: left;
  }
  .uu-historie__karte h3 { font-size: 28px; line-height: 39.2px; }
  .uu-historie__jahr,
  .uu-historie__station--rechts .uu-historie__jahr {
    order: -1; flex: none; padding: 0; background: none;
    line-height: 28.9px; text-align: left;
  }
  /* Gemessen (390): Band 4521–5924, H2 buendig oben, Logos einspaltig 181
     breit (Block 950 hoch), Bandfuss 65. */
  .uu-partner { padding-bottom: 65px; }
  .uu-partner__inhalt { grid-template-columns: minmax(0, 1fr); }
  .uu-partner h2, .uu-partner__lead { grid-column: 1; }
  .uu-partner h2 { margin-top: 0; }
  .uu-partner__lead { margin-top: 15px; font-size: 14px; line-height: 23px; }
  .uu-partner__logos { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 40px; }
  .uu-partner__logos img { max-width: 181px; max-height: 181px; }
  /* Gemessen (390): Text ueber Foto, Foto volle Textbreite; Bandkopf 83. */
  .uu-leitung { padding-block: 83px 40px; }
  .uu-leitung--zweite { padding-block: 40px; }
  .uu-leitung__inhalt { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .uu-leitung__foto { width: 100%; }

  /* Gemessen (390): Formularband ohne eigenen Rand oben (Kopfband endet 294,
     Vorspann 294); Ortsband 1670–3867, H2 1744, Anfahrttext endet 3790. */
  .kt-form { padding: 0 24px 60px; }   /* gemessen (390): Vorspann x24 w342 */
  .kt-form__form { max-width: 330px; margin-inline: 0; }   /* gemessen (390): Beschriftung x30 w330 */
  .kt-orte { padding: 50px var(--rand-seite) 77px; }
  .kt-orte__inhalt { grid-template-columns: minmax(0, 1fr); }
  .kt-orte__karte { padding: 24px; }
  .kt-form__label { font-size: 17px; line-height: 28.9px; }   /* gemessen (390) */
  .kt-orte__zeile { font-size: 20px; line-height: 28px; }      /* gemessen (390) */
  .kt-orte__firma { margin-top: 29px; }
  .kt-orte__zeile + .kt-orte__zeile { margin-top: 20px; }
  .bhd-kopf--foto { padding: 120px var(--rand-seite) 60px; }
}

/* --- Behandlungsseiten schmal (390, gemessen) — ans Dateiende (Kaskade) --- */
@media (max-width: 900px) {
  .bhd-kopf { padding: 70px var(--rand-seite) 60px; }
  /* NUR die Behandlungsseiten mit Inhaltsverzeichnis. `--einfach` (FAQ,
     Kontakt, Physiotherapie, Ueber uns) gehoert anderen und behaelt die
     Zeile darueber unveraendert — deshalb :not() statt einer neuen Regel. */
  .bhd-kopf:not(.bhd-kopf--einfach) { padding-block: 70px 20px; }   /* gemessen (390): Band 50–708, H1 655–688 */
  .bhd-kopf:not(.bhd-kopf--einfach) .bhd-kopf__inhalt { overflow-wrap: break-word; }
  .bhd-kopf__verzeichnis { margin-bottom: 57px; }
  /* Gemessen (390): die Quelle setzt die Grundzeilenhoehe auf 28.9 — auch im
     Verzeichnis. Mit 30.6 waechst jede der bis zu elf Zeilen um 1,7 px. */
  .bhd-kopf__vz-titel,
  .bhd-kopf__verzeichnis a { line-height: 28.9px; }
  /* NUR die Behandlungskoepfe messen 30/33; `--einfach` (Kontakt, FAQ,
     Physiotherapie) misst dort 36/39.6 und wurde von dieser Regel
     mitgerissen, weil sie spaeter steht als die 36er-Regel weiter oben. */
  .bhd-kopf:not(.bhd-kopf--einfach) h1 { font-size: 30px; line-height: 33px; }
  /* Gemessen (390): das Inhaltsband traegt KEINEN eigenen Rand (Band y708
     h2408 ohne Innenabstand), nur der Innenkasten mit 30 ringsum. Mit den
     60/30 des Grossbildschirms blieben dem Text 270 statt 330 px Breite —
     jeder Absatz wurde dadurch mehrere Zeilen zu hoch. */
  .bhd { padding: 0; }
  .bhd__inhalt a.bhd__cta { padding: 10px 20px; }   /* gemessen (390): Knopf 222×40 */
  .bhd__inhalt a.bhd__cta--weit { margin-top: 61px; }   /* gemessen (390): Leerzeile 28,9 + Blockabstand 18 */
}

/* =========================================================================
   31 · Mobil-Navigation (MUSS am Dateiende stehen — Kaskade)
   =========================================================================
   Gemessen: Bei 390 px zeigt die Quelle KEINEN Navigationslink, nur den
   Burger. Ohne diese Regel paart Gate 7 die sechs Menuelinks gegen die
   H1 und die Kartentitel — dutzende Scheinfehler auf jeder Seite.
   ========================================================================= */
@media (max-width: 900px) {
  .kopf__nav { display: none; }
  .kopf__nav--offen {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 16px 20px; background: var(--farbe-creme); z-index: 20;
  }
  .kopf__nav--offen .kopf__liste { flex-direction: column; align-items: flex-start; gap: 14px; }
  .kopf__schalter {
    display: inline-flex; margin-left: auto; padding: 8px;
    border: 0; background: none; color: var(--farbe-braun); cursor: pointer;
  }
}
.kopf__schalter { display: none; }

/* =========================================================================
   32 · /karriere/ der HAUPTdomain — eigene Fassung
   =========================================================================
   ⚠ NICHT die Bausteine der Karriere-Subdomain wiederverwenden: die Quelle
   der Hauptdomain setzt hier Roboto/Montserrat auf WEISS statt IBM Plex auf
   Foto. Gemessen (karriere-1440.json / -390.json).
   ========================================================================= */
/* Baender (gemessen 1440): Titelband 130 hoch, danach das Listenband — in
   Summe 2509–2895 bzw. 4049–4587. Als eine Sektion gebaut: oben 40, unten 18
   (die Anforderungsliste schliesst mit 48). */
.kva { padding: 40px var(--rand-seite) 18px; background: var(--farbe-weiss); }
.kva--anforderungen { padding-bottom: 48px; }
.kva__block { max-width: 1065px; margin-inline: auto; }
/* Abschnittsueberschriften sind <b>, nicht h2/h3: Roboto 700, 42/70 zentriert,
   Farbe #7A7A7A (y2559 · y3054 · y4099 · y4669). */
.kva__titel, .kws__titel {
  font-family: var(--schrift-liste);
  font-size: 42px; line-height: 70px; font-weight: 700;
  color: var(--farbe-text-leise);
  text-align: center;
}
/* Zwei Spalten, SPALTENWEISE gefuellt (gemessen: Spalte 1 x=165, Spalte 2
   x=720, je 510 breit, Zeilenabstand 18). Ein einziges Raster waere falsch:
   es fuellt zeilenweise und richtet die Zeilen aneinander aus — die Quelle
   laesst jede Spalte fuer sich fliessen. Deshalb zwei Listen. */
.kva__spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 510px));
  justify-content: space-between; gap: 18px 45px;
  margin-top: 20px;   /* gemessen: Titelende -> erster Punkt 31 (inkl. Durchschuss) */
}
.kva__liste {
  display: grid; gap: 18px;
  font-family: var(--schrift-liste);
  color: var(--farbe-text-grau);
}
/* Der Texttraeger der Quelle ist der ABSATZ, nicht ein <span> darin: nur so
   misst Gate 7 dieselbe Kastenhoehe (zwei Zeilen = 61, nicht 52) — und nur so
   stimmen alle daraus abgeleiteten Zwischenraeume. Das Emoji laeuft INLINE
   mit, die Folgezeilen stehen deshalb nicht eingerueckt. */
.kva__punkt { margin: 0; }
.kva__punkt img.emoji {
  display: inline-block; width: 18px; height: 18px;
  margin-right: 7px; vertical-align: -3px;   /* gemessen: Absatz x=165, <strong> x=190 */
}
.kva__punkt strong { font-weight: 700; }

/* Weisses Knopfband zwischen Vorteilen und „Wer wir sind" (gemessen:
   1440×120 bei y2894, Knopf 205×40 dreissig darunter). */
.kva__cta { padding: 30px var(--rand-seite) 50px; background: var(--farbe-weiss); text-align: center; }

/* „Wer wir sind": Creme-Band 3014–4049, Roboto 20/30.6 zentriert. */
.kws { padding: 30px var(--rand-seite) 70px; background: var(--farbe-creme); }
.kws__inhalt { max-width: var(--breite-schmal); margin-inline: auto; text-align: center; }
.kws__text { margin-top: 20px; font-family: var(--schrift-liste); font-size: 20px; line-height: 30.6px; }
.kws__titel + .kws__text { margin-top: 0; }   /* gemessen: Titelende 3113.5 -> Absatz 3114 */
.kws__knopf { margin-top: 60px; }
/* Bildstreifen zwischen letztem Absatz und Knopf (gemessen: acht Aufnahmen,
   drei sichtbar à 400×267, Streifen 3612–3879). Der Balken wird versteckt —
   sichtbar wuerde er die gemessenen Bandhoehen um seine Dicke verfehlen. */
.kws__galerie {
  display: grid; grid-auto-flow: column; grid-auto-columns: 400px;
  margin-top: 20px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.kws__galerie::-webkit-scrollbar { display: none; }
.kws__galerie li { scroll-snap-align: start; }
.kws__galerie img { width: 400px; height: 267px; object-fit: cover; }

/* Schlussblock: Band 4587–5598 (Innenabstand 68/100). */
.kws--schluss { padding: 68px var(--rand-seite) 100px; }
/* Schlusszeilen: Montserrat 300, Spalte 483 breit (gemessen y4739/4781/4823). */
.kws--schluss .kws__text {
  max-width: 483px; margin-inline: auto;
  font-family: 'Montserrat', var(--schrift-text);
  font-size: 16px; line-height: 26px; font-weight: 300;
}
.kws--schluss .kws__titel + .kws__text { margin-top: 11px; }
.kws--schluss .kws__text + .kws__text { margin-top: 16px; }
.kws--schluss .kws__knopf { margin-top: 56px; }
/* Wertegrafik unter dem Knopf (gemessen: 362×512 bei y4985). */
.kws__werte { display: block; width: 362px; max-width: 100%; height: auto; margin: 40px auto 0; }

/* Das Prozessband misst auf /karriere/ anders als auf /karriere-v2/ und
   /krankengymnastik/ (H2-Ende -> erster Schritt 11 statt 72, Bandfuss 244
   statt 183). Eigener Modifikator statt Aenderung an .prozess — die Klasse
   traegt zwei fremde Seiten. */
.kva-prozess { padding-bottom: 244px; }
.kva-prozess .prozess__liste { margin-top: 11px; }

@media (max-width: 900px) {
  .kva__titel, .kws__titel { font-size: 26px; line-height: 31px; }
  .kws--schluss .kws__titel { line-height: 50px; }   /* gemessen (390): 26/50, zweizeilig */
  .kva__block { max-width: 332px; }                  /* gemessen (390): Absatz x=29 w=332 */
  .kva__spalten { grid-template-columns: minmax(0, 1fr); }
  /* Gemessen (390): die Punkte sind GROESSER als am Desktop — 19/28.9. */
  .kva__liste { font-size: 19px; line-height: 28.9px; }
  .kws { padding-bottom: 40px; }
  .kws__inhalt { max-width: 312px; }                 /* gemessen (390): x=39 w=312 */
  .kws__text { font-size: 16px; line-height: 28.9px; margin-top: 16px; }
  /* Gemessen (390): der Bildstreifen laeuft ueber die volle Fensterbreite. */
  .kws__galerie { grid-auto-columns: 390px; margin-top: 16px; margin-inline: -39px; }
  .kws__galerie img { width: 390px; height: 261px; }
  .kws--schluss { padding-block: 78px; }
  .kws--schluss .kws__inhalt { max-width: 332px; }   /* gemessen (390): x=29 w=332 */
  .kws--schluss .kws__text { max-width: none; font-size: 20px; line-height: 26px; }
  .kws--schluss .kws__text + .kws__text { margin-top: 20px; }
  .kws--schluss .kws__knopf { margin-top: 60px; }
  .kws__werte { width: 390px; max-width: none; margin-inline: -29px; }
  .kva-prozess { padding-bottom: 323px; }
  .kva-prozess .prozess__liste { margin-top: 10px; }
}