/* ==========================================================================
 * AllcuraMed Experience Design System — V3
 * ==========================================================================
 *
 * Basis fuer den Awwwards-Redesign auf feature/startpage-awwwards-redesign.
 * Overlay-Layer ueber style.css / sections.css / home.css — die aeltere Basis
 * bleibt als Legacy-Fallback bestehen; Experience-Regeln greifen wo die
 * .chapter-Container aktiv sind.
 *
 * Aufbau:
 *   1) Design-Tokens (Fonts, Farben, Spacing, Grid)
 *   2) Kapitel-Container (.chapter mit data-chapter="I"…)
 *   3) Kapitel-Kopf (Nummer + Titel + Meta-Zeile, Mono-Data)
 *   4) Composed-Grid-Modifier
 *   5) Editorial-Bausteine (Fokusnennung, Randnote, Data-Row)
 *   6) Bindeglieder zur bestehenden Care-Nodes/Supply-Line
 *
 * Freeze-kritisch: keine Aenderung an Care-Nodes-JS, Supply-Line-JS oder
 * Story-State-Backbone. Story-Anchors bleiben, Motion bleibt.
 */

/* ==========================================================================
 * 1) Design-Tokens
 * ========================================================================== */
:root {
  /* Mono-Font-Stack: system-safe, kein zusaetzlicher Web-Font. */
  --font-mono: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas,
    "Liberation Mono", "Roboto Mono", monospace;

  /* Erweiterte Skala fuer Editorial-Momente. */
  --fs-display-xl: clamp(3rem, 8vw, 6.5rem);      /* Hero-These, Kapitel-Auftakte */
  --fs-display-l: clamp(2.2rem, 5.5vw, 4rem);     /* Kapitel-Titel */
  --fs-display-m: clamp(1.6rem, 3.2vw, 2.6rem);   /* Sub-Kapitel */
  --fs-body: clamp(1rem, 1.35vw, 1.15rem);        /* Erzaehl-Text */
  --fs-lede: clamp(1.1rem, 1.6vw, 1.3rem);        /* Lede-Text unter Titel */
  --fs-mono-s: clamp(0.72rem, 0.95vw, 0.82rem);   /* Kapitel-Nummer, Meta */
  --fs-mono-m: clamp(0.85rem, 1.05vw, 0.95rem);   /* Data-Row */

  /* Kapitel-Abstaende, dichter als Alt-Sektionen. */
  --chapter-pad-y: clamp(4.5rem, 9vw, 8rem);
  --chapter-pad-y-tight: clamp(3rem, 6vw, 5rem);
  --chapter-gap-inner: clamp(2rem, 4vw, 3.5rem);

  /* Editorial-Container-Breiten. */
  --wrap-narrow: min(720px, 92vw);
  --wrap-standard: min(1080px, 92vw);
  --wrap-wide: min(1240px, 92vw);
}

/* ==========================================================================
 * 2) Kapitel-Container
 * ========================================================================== */
.chapter {
  position: relative;
  padding-block: var(--chapter-pad-y);
}
.chapter[data-chapter-tight] {
  padding-block: var(--chapter-pad-y-tight);
}
.chapter .wrap {
  max-width: var(--wrap-wide);
  padding-inline: var(--pad, clamp(1.1rem, 4vw, 2rem));
}
.chapter[data-wrap="narrow"] .wrap { max-width: var(--wrap-narrow); }
.chapter[data-wrap="standard"] .wrap { max-width: var(--wrap-standard); }

/* Auftakt-Kapitel: eigene Kopfsetzung mit XL-Display-Font */
.chapter--auftakt .chapter-title {
  max-width: none;
  font-size: var(--fs-display-xl);
  line-height: 1;
}
@media (max-width: 480px) {
  .chapter--auftakt .chapter-title {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    line-height: 1.02;
    hyphens: auto;
    word-break: normal;
  }
}

/* Einrichtungs-Kapitel: kompakter Fachbereich-Absatz */
.chapter--einrichtungen .col-narrow-l .chapter-title em.emph {
  color: var(--green-dark);
}

/* Kapitel-Trennlinie oben — dezent, nur wenn tatsaechlich Kapitel-Wechsel */
.chapter[data-chapter-sep="top"]::before {
  content: '';
  position: absolute;
  left: clamp(1.1rem, 4vw, 2rem);
  right: clamp(1.1rem, 4vw, 2rem);
  top: 0;
  height: 1px;
  background: rgba(24, 60, 63, 0.14);
}

/* ==========================================================================
 * 3) Kapitel-Kopf
 * ========================================================================== */
.chapter-head {
  display: grid;
  /* Feste Markenspalte statt `auto`.
     Gemessen am 04.08.2026: mit `auto` richtete sich die Spaltenbreite
     nach der Laenge des Labels, und die Headline begann auf jeder Seite
     woanders — bei 1440px auf acht verschiedenen Positionen zwischen
     148px und 404px ("Ueber uns" kurz, "Jobs · Beispielstellen" lang).
     Das liest sich nicht als Gestaltung, sondern als Zufall.
     Mit fester Spalte startet jede Seite auf derselben Kante. */
  grid-template-columns: var(--marker-col) minmax(0, 1fr);
  column-gap: var(--marker-gap);
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Unter der Zweispaltigkeit hat die Marke keinen Platz mehr neben dem
   Titel — sie ruecht darueber und die Kante wird wieder buendig. */
@media (max-width: 860px) {
  .chapter-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }
}

/* Kapitel-Nummer als Mono-Editorial-Marker (roemische Zahl) */
.chapter-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  padding-top: 0.2em;
  white-space: nowrap;
}

.chapter-kicker {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--fs-mono-m);
  color: var(--gray);
  margin: 0 0 0.6rem;
}
.chapter-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--petrol);
  text-wrap: balance;
  margin: 0;
  max-width: 22ch;
}
.chapter-title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--green-dark);
}
.chapter-lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink);
  max-width: 48ch;
  margin: clamp(0.8rem, 1.5vw, 1.2rem) 0 0;
}

/* Meta-Zeile: Mono-Kette fuer Rolle · Standort · Modell — Betriebs-Voice */
.chapter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(0.8rem, 1.5vw, 1.2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.7);
}
.chapter-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.chapter-meta > * + *::before {
  content: '·';
  margin-right: 0.4em;
  color: rgba(24, 60, 63, 0.35);
}

@media (max-width: 720px) {
  .chapter-head {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
  }
  .chapter-num { padding-top: 0; }
  .chapter-title { font-size: clamp(1.9rem, 8vw, 2.6rem); max-width: 20ch; }
}

/* ==========================================================================
 * 4) Composed-Grid
 * ========================================================================== */
.composed {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(0.75rem, 1.5vw, 1.5rem);
  row-gap: clamp(2rem, 4vw, 3rem);
}
.composed > .col-full { grid-column: 1 / -1; }
.composed > .col-l    { grid-column: 1 / span 7; }
.composed > .col-r    { grid-column: 8 / span 5; }
.composed > .col-c    { grid-column: 3 / span 8; }
.composed > .col-narrow-l { grid-column: 1 / span 5; }
.composed > .col-narrow-r { grid-column: 8 / span 5; }
.composed > .col-wide-r   { grid-column: 5 / span 8; }
.composed > .col-margin { grid-column: 1 / span 2; }
.composed > .col-body   { grid-column: 3 / span 9; }

@media (max-width: 900px) {
  .composed { display: block; }
  .composed > * { margin-block-end: clamp(1.5rem, 5vw, 2rem); }
  .composed > *:last-child { margin-block-end: 0; }
}

/* ==========================================================================
 * 5) Editorial-Bausteine
 * ========================================================================== */

/* Betont-Aussage im Fließtext, ersetzt Bullet-Highlight */
.emph {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--green-dark);
}

/* Data-Row: Serif-Label + Mono-Wert nebeneinander */
.data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.2rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.2rem);
  border-block-end: 1px solid rgba(24, 60, 63, 0.14);
}
.data-row:first-child { border-block-start: 1px solid rgba(24, 60, 63, 0.14); }
.data-row .data-label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--petrol);
  letter-spacing: -0.01em;
}
.data-row .data-value {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  color: var(--green-dark);
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .data-row {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }
  .data-row .data-value {
    text-align: left;
    font-size: 0.78rem;
  }
}

/* Randnote: kleine Marginalie unter oder neben Body-Text */
.marginnote {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.6);
  margin-top: 1.2rem;
  display: block;
}

/* Weg-Zeile: nummerierter Schritt als typografische Zeile statt Bullet */
.way-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: baseline;
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-block-end: 1px solid rgba(24, 60, 63, 0.14);
}
.way-step:first-child { border-block-start: 1px solid rgba(24, 60, 63, 0.14); }
.way-step .step-no {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--green-dark);
  line-height: 1;
}
.way-step .step-body {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
}
.way-step .step-body strong {
  font-family: var(--font-display);
  color: var(--petrol);
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}
.way-step .step-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.55);
  white-space: nowrap;
}

/* Zwei-Wege-Block: statt Hero-Toggle raeumliche Trennung */
.two-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.two-ways .way {
  display: block;
  padding-block-start: clamp(1.2rem, 2.5vw, 2rem);
  border-block-start: 1px solid rgba(24, 60, 63, 0.25);
  text-decoration: none;
  color: inherit;
}
.two-ways .way > * {
  display: block;
}
.two-ways .way-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.6rem;
}
.two-ways .way-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1.05;
  color: var(--petrol);
  margin: 0 0 0.9rem;
  max-width: 14ch;
}
.two-ways .way-lede {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.3rem;
  max-width: 32ch;
}
.two-ways .way-link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--green-dark);
  padding-bottom: 0.2em;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.two-ways .way-link:hover,
.two-ways .way-link:focus-visible {
  color: var(--petrol);
  border-bottom-color: var(--petrol);
}
.two-ways .way-link .arr { margin-left: 0.4em; }

@media (max-width: 720px) {
  .two-ways {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }
}

/* ==========================================================================
 * 6z) Umbruch langer Woerter.
 *
 *     Hier stand bis 03.08.2026 `overflow-wrap: anywhere` auf allem inkl.
 *     Ueberschriften. Das bricht deutsche Komposita an beliebiger Stelle
 *     OHNE Trennstrich: "Arbeitnehmerueberl|assung", "Karrie|reschritt".
 *
 *     Jetzt zweistufig:
 *     - Fliesstext bekommt `hyphens: auto` (html lang="de" ist gesetzt, also
 *       trennt der Browser nach deutschen Regeln, mit Trennstrich) und
 *       `overflow-wrap: break-word` — das greift nur, wenn ein einzelnes Wort
 *       breiter als sein Container ist, statt an jeder beliebigen Stelle.
 *     - `anywhere` bleibt nur dort, wo Zeichenketten wirklich untrennbar sind
 *       und keine Silben haben: URLs, E-Mail-Adressen, Registernummern.
 * ========================================================================== */
/* Fließtext trennt NICHT automatisch — deutsche Auto-Silbentrennung wirkt
   unfertig und griff bis 1440 ("Pra-xen" im Hero). hyphens:manual respektiert
   nur gesetzte weiche Trennstellen; overflow-wrap:break-word bleibt als
   Sicherheitsnetz, falls ein einzelnes Wort breiter als sein Container ist
   (nur dann, nicht an jeder Stelle). Rechtsseiten (.lg-doc) behalten unten
   bewusst hyphens:auto für sehr lange Fachbegriffe. */
main p, main li, main dd, main dt, main td,
main span, main .jd2-fact-value, main .jd2-fact-secondary .v {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* Display-Groessen nie automatisch trennen — ein Trennstrich in einer 90px-
   Headline liest sich wie ein Bindestrich im Markennamen. Sie sind kurz
   genug, dass break-word als Sicherheitsnetz reicht. */
/* hyphens:none nur auf echte Display-Groessen. h3/h4 sitzen in Karten und
   Sidebars mit schmalen Containern — dort ist eine saubere Silbentrennung
   besser als ein Overflow. Bei Textzoom 200% lief sonst
   "Fortbildungsmanagement" 22px aus dem Viewport (/fuer-unternehmen/). */
main h1, main h2, main .chapter-title, main .way-title {
  /* anywhere statt break-word: break-word bricht ein Wort erst, wenn es
     allein in der Zeile nicht passt — es senkt aber die min-content-Breite
     NICHT. Der Kopf-Container erbte deshalb die Wortbreite und wurde bei
     200% Textzoom 502px breit in einem 390px-Viewport ('Niederlassungen'
     auf /standorte/, 153px Overflow-X). anywhere wirkt auf die
     intrinsische Mindestbreite, der Container schrumpft mit.
     hyphens:none bleibt: grosse Headlines sollen keinen Trennstrich
     tragen, das war und ist die gestalterische Entscheidung. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
main h3, main h4 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* Echte untrennbare Tokens: keine Silben, also darf hier ueberall brechen. */
main a[href^="mailto:"], main a[href^="http"], main code, main .mono-id {
  overflow-wrap: anywhere;
}

/* Bewusste Ausnahmen, die WEITER automatisch trennen dürfen: Datenlabels/
   Chips und Vergleichszellen mit langen Komposita (Arbeitnehmerüberlassung,
   Personalvermittlung, Pflegefachkräfte) in engen Containern, sowie die
   Rechtsseiten-Absätze — dort ist ein sauberer Trennstrich besser als
   Überbreite bei Textzoom. */
main .marke, main .un-key, main .un-val,
.lg-doc p, .lg-doc li {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Kurze und interaktive Elemente NIE automatisch trennen: Buttons (erben
   hyphens:auto vom umgebenden <p class="st-actions">), Formular-Labels,
   Eyebrows/Kicker, Weg-Beschriftungen. Sie sind kurz genug, ganze Wörter
   zu tragen — eine Silbentrennung in einem Button liest sich unfertig.
   Gefunden über tests/test_no_ugly_hyphenation.mjs (19.08.2026). */
main .btn, main button, main label,
main .st-eyebrow, main .uu-scene-kick, main .eyebrow, main .kicker, main .st-kicker,
main .weg-marke, main .weg-aktion, main .lo-jump a, main .breadcrumb {
  hyphens: none;
  -webkit-hyphens: none;
}


/* ==========================================================================
 * 6a) Care Portal V3 — Editorial-Kompositionen statt simple Linkliste
 *     (in experience.css, nicht style.css: Cascade-Vertrag)
 * ========================================================================== */

.care-tracks--v3 {
  position: relative;
  padding-inline-start: clamp(2.5rem, 6vw, 4rem);
}

/* Versorgungslinie im Portal als Wegführung — CSS-only, keine SVG */
.care-supply-line {
  display: block;
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.5rem);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(51, 89, 29, 0.55) 8%,
    rgba(51, 89, 29, 0.55) 92%,
    transparent 100%
  );
  pointer-events: none;
}

/* Kicker-Typografie im Portal. Trug bis 04.08.2026 zusaetzlich eine
   roemische Kapitelnummer — der letzte Rest der Nummerierung, die auf
   allen anderen Seiten bereits entfernt war. */
.care-tracks--v3 .care-track-kicker {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  font-weight: 500;
}
.care-tracks--v3 .care-track-headline {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  margin-top: 0.4rem;
  max-width: 18ch;
}

/* Editorial-Links — kein simple Linkliste-Look mehr */
.care-tracks--v3 .care-links { display: block; margin-top: 1.1rem; }
.care-tracks--v3 .care-links li {
  border-top: none;
  border-bottom: 1px solid rgba(24, 60, 63, 0.15);
}
.care-tracks--v3 .care-links li:first-child {
  border-top: 1px solid rgba(24, 60, 63, 0.15);
}
.care-tracks--v3 .care-links li:last-child { border-bottom: 1px solid rgba(24, 60, 63, 0.15); }
.care-tracks--v3 .care-links a {
  display: grid;
  /* minmax(0,...) statt 1fr auto: die auto-Spalte (Meta, Mono mit
     Sperrung) kann nicht unter ihre min-content-Breite schrumpfen und
     hat das Portal bei 320px auf 447px aufgeblaeht. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 0.4rem 1rem;
  padding: clamp(0.85rem, 1.6vw, 1.2rem) 0.2rem;
  text-decoration: none;
  color: var(--petrol);
  transition: color 0.25s var(--ease);
}
.care-tracks--v3 .care-links a:hover,
.care-tracks--v3 .care-links a:focus-visible {
  color: var(--green-deep);
}
/* Vorruecken per transform statt padding — padding rechnet bei jeder
   Mausbewegung das Grid neu. Gleiches Muster wie .way-v2 und .job-row. */
.care-tracks--v3 .care-link-title { transition: transform 0.25s var(--ease); }
.care-tracks--v3 .care-links a:hover .care-link-title,
.care-tracks--v3 .care-links a:focus-visible .care-link-title { transform: translateX(0.6rem); }

@media (max-width: 460px) {
  /* Nebeneinander bleibt hier nichts lesbar: Meta unter den Titel. */
  .care-tracks--v3 .care-links a { grid-template-columns: 1fr; gap: 0.15rem; }
  /* Deutsche Komposita brechen sonst nicht: 'Initiativbewerbung senden'
   war bei 320px und 200% Textzoom 294px breit in einer 210px-Spalte,
   'Personal fuer verlaessliche Versorgung' 288px in 222px. Silbentrennung
   wie auf den Rechtstexten und der Schweiz-Seite — kein break-word, damit
   nicht mitten im Wort ohne Trennstrich umbrochen wird. */
.care-tracks--v3 .care-link-title,
.care-tracks--v3 .care-track-headline,
.care-tracks--v3 .care-track-kicker {
  hyphens: auto;
  -webkit-hyphens: auto;
}

.care-tracks--v3 .care-link-meta { grid-column: 1; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .care-tracks--v3 .care-link-title { transition: none; }
}
.care-tracks--v3 .care-link-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  grid-column: 1;
}
.care-tracks--v3 .care-link-meta {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.85vw, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.55);
  grid-column: 2;
  align-self: baseline;
  padding-top: 0.35em;
  /* Kein white-space: nowrap. Die Meta-Zeile lag zweispaltig neben dem
     Titel und durfte nicht brechen — bei 200% Textzoom wurde sie 564px
     breit in einer 280px-Spalte und trieb das Portal auf 628px bei 390px
     Viewport (238px Overflow, WCAG 1.4.4). Gemessen am 04.08.2026:
     nowrap entfernen bringt das Portal auf 390, ebenso das Entfernen des
     Meta-Textes — zwei unabhaengige Belege fuer dieselbe Ursache.
     Der Umbruch am Mittelpunkt ist haesslicher als eine Zeile, aber
     erreichbar; ein abgeschnittener Link ist es nicht. */
  overflow-wrap: break-word;
}
.care-tracks--v3 .care-links a[data-care-primary] .care-link-title {
  color: var(--green-deep);
  font-weight: 600;
}
.care-tracks--v3 .care-links a[data-care-primary] .care-link-meta {
  color: var(--green-dark);
}

/* Aktuelle Seite als grüner Marker (via JS: data-care-current="true") */
.care-tracks--v3 .care-links a[data-care-current="true"] {
  background: linear-gradient(to right, rgba(113, 191, 68, 0.08), transparent 60%);
  padding-inline-start: 0.6rem;
}
.care-tracks--v3 .care-links a[data-care-current="true"] .care-link-title {
  color: var(--green-deep);
}
.care-tracks--v3 .care-links a[data-care-current="true"] .care-link-meta::before {
  content: 'hier · ';
  color: var(--green-dark);
  font-weight: 500;
}

@media (max-width: 720px) {
  .care-tracks--v3 { padding-inline-start: 1.8rem; }
  .care-supply-line { left: 4px; width: 2px; }
  .care-tracks--v3 .care-link-title { font-size: 1.05rem; }
  .care-tracks--v3 .care-link-meta { font-size: 0.68rem; }
}

/* ==========================================================================
 * Kapitel II · Menschen — Fachbereichs-Klammer als typografische Ebene
 * ========================================================================== */
.chapter--menschen .people-berufe-list {
  list-style: none;
  padding: 0;
  margin: clamp(0.8rem, 1.5vw, 1.2rem) 0 0;
  border-left: 1px solid rgba(24, 60, 63, 0.25);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
}
.chapter--menschen .people-berufe-list li {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--petrol);
  line-height: 1.25;
}
.chapter--menschen .people-berufe-list li:nth-child(2) { color: var(--green-dark); }
.chapter--menschen .people-berufe-list li:nth-child(5) { color: var(--green-dark); }
.chapter--menschen .people-emph {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--petrol);
  margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
  max-width: 26ch;
}

/* ==========================================================================
 * Kapitel III · Lücken — Editorial-Setzung von Story + Emphase
 * ========================================================================== */
.chapter--luecken .gap-story {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--gray);
  max-width: 44ch;
  margin: clamp(1rem, 2vw, 1.5rem) 0;
}
.chapter--luecken .gap-emph {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--petrol);
  max-width: 48ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}
.chapter--luecken .gap-emph em.emph {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
 * Kapitel VIII · Standorte — Kontakt-Editorial statt Card-Reihe
 * ========================================================================== */
.chapter--standorte .loc-contact-v3 {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.chapter--standorte .loc-teams-line {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--petrol);
  line-height: 1.3;
  margin: 0;
  max-width: 26ch;
}
.chapter--standorte .loc-central {
  display: grid;
  gap: 0.3rem;
}
.chapter--standorte .loc-tel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--petrol);
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 0.2rem;
}
.chapter--standorte .loc-tel:hover,
.chapter--standorte .loc-tel:focus-visible { color: var(--green-deep); }
.chapter--standorte .loc-mail {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  color: var(--green-dark);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-top: 0.4rem;
}
.chapter--standorte .loc-mail:hover,
.chapter--standorte .loc-mail:focus-visible { color: var(--green-deep); text-decoration: underline; }
.chapter--standorte .loc-hours {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.6);
  margin-top: 0.4rem;
}
.chapter--standorte .loc-more {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* ==========================================================================
 * Kapitel IX · Abschluss — Zwei-Wege-Editorial auf Dark-Background
 * ========================================================================== */
.chapter--abschluss {
  padding-block: clamp(5rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
}
.chapter--abschluss .chapter-num,
.chapter--abschluss .chapter-kicker,
.chapter--abschluss .chapter-title {
  color: var(--paper);
}
.chapter--abschluss .chapter-title em {
  color: var(--green);
}
.chapter--abschluss .chapter-kicker {
  color: rgba(255, 255, 255, 0.75);
}
.chapter--abschluss .chapter-num {
  color: var(--green);
}
.chapter--abschluss .two-ways {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.chapter--abschluss .two-ways .way {
  border-block-start-color: rgba(255, 255, 255, 0.35);
  color: var(--paper);
}
.chapter--abschluss .two-ways .way-label {
  color: var(--green);
}
.chapter--abschluss .two-ways .way-title {
  color: var(--paper);
}
.chapter--abschluss .two-ways .way-title em.emph {
  color: var(--green);
}
.chapter--abschluss .two-ways .way-lede {
  color: rgba(255, 255, 255, 0.78);
}
.chapter--abschluss .two-ways .way-link {
  color: var(--green);
  border-bottom-color: var(--green);
}
.chapter--abschluss .two-ways .way-link:hover,
.chapter--abschluss .two-ways .way-link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.chapter--abschluss .final-tel {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.2rem;
}
.chapter--abschluss .final-tel em.emph {
  color: var(--green);
}
.chapter--abschluss .final-tel a {
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
}
.chapter--abschluss .final-tel a:hover,
.chapter--abschluss .final-tel a:focus-visible { color: var(--green); }
.chapter--abschluss .final-hours {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
 * Jobs-Übersicht V3 — Editorial-Zeilen statt Card-Wand
 * ========================================================================== */
.chapter--jobs-page .breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.6);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.chapter--jobs-page .breadcrumb a { color: inherit; text-decoration: none; }
.chapter--jobs-page .breadcrumb a:hover { color: var(--green-deep); }

.jobs-search-v3 {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 720px;
}
.jobs-search-v3 .jobs-search-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: end;
}
.jobs-search-v3 .jobs-search-field {
  display: block;
}
.jobs-search-v3 .jobs-search-field .marginnote {
  margin-top: 0;
  margin-bottom: 0.3rem;
}
.jobs-search-v3 .jobs-search-field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(24, 60, 63, 0.25);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
}
.jobs-search-v3 .jobs-search-field input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green-dark);
}
.jobs-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.jobs-filtergruppen {
  display: grid;
  gap: 0.9rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.jobs-filtergruppe .marginnote {
  display: block;
  margin: 0 0 0.35rem;
}
.jobs-filtergruppe .jobs-filter-chips { margin-top: 0; }
.jobs-filter-chips button {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(24, 60, 63, 0.2);
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.jobs-filter-chips button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.jobs-filter-chips button:hover:not([aria-pressed="true"]) {
  color: var(--green-dark);
  border-color: var(--green-dark);
}

@media (max-width: 640px) {
  .jobs-search-v3 .jobs-search-row {
    grid-template-columns: 1fr;
  }
}

.chapter--jobs-results {
  padding-block-start: 0;
}
/* Der Beispieldaten-Hinweis als redaktionelle Zeile, nicht als Kasten.
   Vorher: getoente Flaeche mit 3px-Akzentbalken links — die Form, an der
   man KI-generierte Oberflaechen sofort erkennt, und der einzige Kasten
   dieser Art auf der ganzen Website. Der Hinweis ist inhaltlich wichtig
   (die Stellen sind Beispieldaten) und bleibt deshalb; er spricht jetzt
   nur in derselben Sprache wie die Bildnachweise: feine Oberlinie,
   kleine Schrift, kein Rahmen, keine Tonung. */
.jobs-preview-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid rgba(24, 60, 63, 0.16);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.85rem;
  color: var(--gray);
  max-width: var(--measure);
}
.jobs-preview-note strong {
  color: var(--petrol);
  font-weight: 500;
}
.jobs-preview-note .jpn-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px dashed var(--green-dark);
  margin-top: 0.4rem;
}
.jobs-preview-note p { margin: 0; color: var(--ink); line-height: 1.5; }
.jobs-preview-note strong { color: var(--green-deep); }

.jobs-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.65);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Die Stellenliste nutzt die gemeinsame Stellenkarte aus seiten.css.
   Hier stand die Editorial-Zeile ohne Rahmen (.job-line/.jl-*). */

.jobs-load-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.jobs-empty {
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(24, 60, 63, 0.15);
  border-radius: 8px;
  text-align: center;
  max-width: 560px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.jobs-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--petrol);
  margin: 0 0 0.6rem;
}


/* ==========================================================================
 * Jobdetail V3-Abgleich — Editorial-Kopf, Rest der Stellenakte bleibt
 * ========================================================================== */
.chapter--jobdetail-page .breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.6);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.chapter--jobdetail-page .breadcrumb a { color: inherit; text-decoration: none; }
.chapter--jobdetail-page .breadcrumb a:hover { color: var(--green-deep); }
.chapter--jobdetail-page .jd2-chapter-head {
  align-items: baseline;
}
.chapter--jobdetail-page .jd2-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
}
.chapter--jobdetail-page .jd2-demo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-style: italic;
  color: var(--green-dark);
}
.chapter--jobdetail-page .jd2-demo-kicker .jpn-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px dashed var(--green-dark);
  display: inline-block;
}
.chapter--jobdetail-page .jd2-meta-v3 {
  margin-top: clamp(0.8rem, 1.5vw, 1.2rem);
}


/* Landscape 844×390: Care Portal kompakter, damit alles ohne Scrollfalle passt */
@media (max-height: 500px) and (orientation: landscape) {
  .care-portal .care-core { padding-top: clamp(0.5rem, 2vw, 1rem); }
  .care-portal .care-question { font-size: clamp(1.4rem, 3.5vw, 2rem); }
  .care-tracks--v3 { padding-block: clamp(1rem, 2vw, 1.5rem); }
  .care-tracks--v3 .care-track-headline { font-size: 1.4rem; }
  .care-tracks--v3 .care-links a { padding-block: 0.6rem; }
}


/* ==========================================================================
 * 6) Bindeglieder zur Motion (Care-Nodes + Supply-Line bleiben)
 * ========================================================================== */

/* Kapitel-Uebergangs-Trennstelle: leichter typografischer Break, kein
   grafisches Divider-SVG mehr. Alte .arc-divider bleibt in style.css,
   wird aber im Redesign nicht mehr verwendet. */

.chapter-transition {
  position: relative;
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.chapter-transition::before {
  content: '';
  display: block;
  width: 1px;
  height: clamp(3rem, 6vw, 5rem);
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(24, 60, 63, 0.35), transparent);
}

/* Reduced Motion: keine Ueberraschungen */
@media (prefers-reduced-motion: reduce) {
  .chapter { transition: none; }
}

/* Forced Colors */
@media (forced-colors: active) {
  .chapter[data-chapter-sep="top"]::before,
  .data-row,
  .way-step,
  .two-ways .way,
  .chapter-transition::before {
    border-color: CanvasText;
    background: CanvasText;
  }
  .chapter-num,
  .chapter-meta,
  .marginnote,
  .step-meta,
  .data-value,
  .two-ways .way-label,
  .two-ways .way-link {
    color: CanvasText;
  }
}


/* ==========================================================================
 * 8) Trefferflaechen — WCAG 2.5.5 (44x44) bzw. 2.5.8 (24x24 Minimum).
 *
 *    Messung vom 03.08.2026: 18–36 interaktive Elemente pro Seite lagen
 *    unter 44px. Am kritischsten die Consent-Checkbox mit 18x18px — das
 *    letzte Element vor dem Absenden und das kleinste im ganzen Formular.
 *
 *    Bewusst ueber echtes Padding geloest, nicht ueber negative ::after-
 *    Overlays: Overlays koennen bei eng gestapelten Links unsichtbar
 *    ueberlappen und dann den Nachbarlink ausloesen. Lieber eine Zeile
 *    hoeher als ein Klick daneben.
 * ========================================================================== */

/* Kontaktdaten stehen fast immer allein in einer Zeile — hier ist ein
   groesserer Zeilenkasten unproblematisch und verbessert die Lesbarkeit. */
a[href^="tel:"], a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Footer-Links sind gestapelt: vertikales Padding statt Overlay. */
.site-footer a {
  display: inline-block;
  padding-block: 0.55rem;
}
.site-footer a[href^="tel:"], .site-footer a[href^="mailto:"] { padding-block: 0.55rem; }

/* Breadcrumb steht horizontal — hier reicht vertikales Padding, die
   Trennzeichen dazwischen halten die Links ausreichend auseinander. */
.breadcrumb a {
  display: inline-block;
  padding-block: 0.7rem;
}

/* Consent-Checkbox: visuell 20px (die Optik soll nicht klobig werden),
   Trefferflaeche ueber das umschliessende Label auf volle Zeilenhoehe.
   Das Label ist per for= verknuepft und schaltet die Checkbox mit. */
.checkbox-row { padding-block: 0.5rem; }
.checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  margin-block-start: 0.15rem;
}
.checkbox-row label {
  /* KEIN display:flex — ein Flex-Container macht die Textzeile zu einem
     anonymen Flex-Item, das nicht mehr am Wort umbricht. Auf 320px lief
     das Consent-Label dadurch 26px aus dem Viewport (Regressionslauf
     03.08.2026, /kontakt/ + /personalanfrage/ @ 320x568).
     Die 44px Trefferflaeche entsteht hier ueber Padding. */
  min-height: 44px;
  display: block;
  padding-block: 0.55rem;
  cursor: pointer;
}

/* Filter-Chips: 0.4rem Padding ergab 30px Hoehe. */
.jobs-filter-chips button { min-height: 44px; padding-inline: 1rem; }

/* Burger war 48x42 — zwei Pixel unter der Schwelle. */
.burger { min-height: 44px; min-width: 44px; align-items: center; }

/* Nachzug nach der ersten Messung: diese Komponenten lagen bei 38-43px,
   also knapp unter der Schwelle. Alle sind echte Bedienelemente, keine
   Fliesstext-Links — hier ist die volle Trefferflaeche unstrittig. */
.orbit-mode-switch a, .orbit-mode-switch button,
.orbit-actions .btn-back,
.cat-row .chip,
.jd2-sr-nav a,
.jd2-back-link a,
.jd2-contact-lines a,
.direct-links a,
.loc a,
.wrap.legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Desktop-Navigation lag bei 38px Hoehe (144 Vorkommen im Regressionslauf).
   Breadcrumb-Links je nach Kontext bei 38-43px. */
.main-nav a:not(.btn), .breadcrumb a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
 * Care Portal — Schrumpfkette bei schmalen Viewports (04.08.2026)
 *
 * Gemessen bei 320px: das Portal war 467px breit, 147px Overflow-X.
 * Ursache war keine einzelne Regel, sondern eine Kette von Grid-Containern,
 * die alle eine implizite auto-Spalte hatten — und eine auto-Spalte kann
 * nicht unter die min-content-Breite ihrer Kinder schrumpfen. Jeder
 * Container hat die Mindestbreite seines Kindes nach oben durchgereicht:
 * Link (Titel + gesperrtes Mono-Meta nebeneinander) -> li -> ul -> section
 * -> tracks -> portal.
 *
 * Deshalb hier gesammelt und am Dateiende, wo keine spaetere Regel mehr
 * dagegen haelt: jedes Glied der Kette darf schrumpfen, und unterhalb von
 * 460px steht das Meta unter dem Titel statt daneben.
 * ========================================================================== */
.care-portal .care-tracks,
.care-portal .care-track,
.care-portal .care-links,
.care-portal .care-links li { min-width: 0; }
.care-portal .care-tracks,
.care-portal .care-track { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 460px) {
  .care-portal .care-tracks--v3 .care-links a {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  .care-portal .care-tracks--v3 .care-link-meta {
    grid-column: 1;
    padding-top: 0;
  }
}

/* ==========================================================================
 * Einstieg der Unterseiten — zentraler Fix (04.08.2026)
 *
 * .chapter bringt padding-block: var(--chapter-pad-y) mit, auf 1440 sind
 * das 128px. Auf der Startseite ist das der Kapitel-Rhythmus zwischen
 * neun Sektionen. Auf den Unterseiten ist die erste Sektion aber die
 * erste ueberhaupt: sie steht direkt unter dem Header, und darunter
 * folgt erst noch der Breadcrumb. Gemessen auf /fuer-bewerber/: 128px
 * leere Flaeche zwischen Header-Unterkante und dem ersten Zeichen.
 *
 * Der Fix gehoert hierher und nicht in elf Einzelseiten. Die erste
 * Sektion im <main> bekommt oben einen Einstiegsabstand statt eines
 * Kapitelabstands. Der Auftakt der Startseite ist ausgenommen: er
 * zentriert seinen Inhalt vertikal und braucht die Hoehe.
 * ========================================================================== */
main > .chapter:first-child:not(.auftakt-v2) {
  padding-top: clamp(1.5rem, 3.5vw, 3rem);
}
/* Der Breadcrumb steht als erstes im Wrap und bringt seinen eigenen
   Abstand mit — er darf ihn nicht zum Sektionsabstand addieren. */
main > .chapter:first-child .breadcrumb { margin-top: 0; }

/* Impressum und Datenschutz nutzen eine nackte <section> ohne .chapter —
   deren Standardabstand kommt aus css/style.css. Gleiche Behandlung. */
main > section:first-child:not(.chapter):not([class*="hero"]) {
  padding-top: clamp(1.5rem, 3.5vw, 3rem);
}

/* Zwischen Suchbereich und Ergebnisliste standen zwei Kapitel-Abstaende
   uebereinander: das untere Padding der Such-Sektion plus das obere der
   Ergebnis-Sektion. Gemessen ~150px leere Flaeche zwischen Filter-Chips
   und Hinweis. Die beiden gehoeren zusammen, also ruecken sie zusammen. */
.chapter--jobs-page { padding-bottom: clamp(1rem, 2.5vw, 2rem); }
.chapter--jobs-results { padding-top: clamp(1.2rem, 3vw, 2.2rem); }

/* Die zentrierte CTA-Lede trennte einzelne Woerter ueber die Zeile
   ('Beispielstel-len'), weil die letzte Zeile knapp nicht passte.
   balance verteilt die Zeilen, statt das letzte Wort zu zerlegen.
   Betrifft alle Seiten mit cta-banner, nicht nur die Schweiz-Seite. */
.cta-banner .lede { text-wrap: balance; }

/* ─── Textzoom-Vertrag ──────────────────────────────────────────────
   Bei 200% Textzoom liefen 78 von 1008 QA-Laeufen mit Overflow-X. Die
   Verursacher waren durchweg derselbe Typ: Meta-Typografie mit
   white-space: nowrap und Buttons, deren Text nicht umbrechen darf.
   Bei normaler Schrift passen sie in eine Zeile — nowrap ist dort
   Kosmetik. Bei doppelter Schrift ist es ein Overflow. Deshalb hier
   zentral zurueckgenommen statt an neun Stellen einzeln.
   Gemessen am 04.08.2026, Runner scripts/global-qa.mjs. */
.chapter-num,
.way-step .step-meta,
.dl-state, .kt-way-meta, .nf-way-meta,
.jd2-sr-nav a, .jd2-fact-secondary .k {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Buttons: der Text darf umbrechen, bevor der Button aus dem Viewport
   laeuft. 'Personalbedarf vorbereiten →' war bei 390px und 200% Zoom
   101px zu breit. */
.btn {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

/* Deutsche Komposita sind das eigentliche Textzoom-Problem dieser
   Website: 'Arbeitnehmerueberlassung', 'Kinderkrankenpflege',
   'Unternehmensbroschuere' sind bei doppelter Schriftgroesse breiter
   als ein 390px-Viewport. overflow-wrap allein hilft nicht — es bricht
   erst, wenn gar nichts mehr geht, und dann ohne Trennstrich.
   hyphens:auto braucht lang="de" (ist gesetzt) und trennt sauber.
   Gemessen: 'Kinderkrankenpflege' als Chip 356px -> 279px. */
.kicker, label,
.chapter-num,
.jobs-filter-chips .chip,
.un-services dt,
.dl-name,
.step-line .lbl {
  max-inline-size: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Die Wurzel des Textzoom-Overflows: nicht einzelne Elemente, sondern
   die Ueberschriften. Ein Grid- oder Flex-Container kann nicht unter die
   min-content-Breite seiner Kinder schrumpfen — und 'Niederlassungen'
   oder 'automatisiert' sind bei doppelter Schrift breiter als ein
   390px-Viewport. Der Container wurde 502px breit, alle Geschwister
   erbten die Breite, und das Dokument lief ueber.
   Gemessen: standorte 153px, home 69px, transparenz 49px Overflow-X.
   Die Website ist durchgehend lang="de" — Silbentrennung ist hier die
   richtige Antwort, nicht break-word ohne Trennstrich. */
/* Kopf-Container duerfen schrumpfen */
.section-head, .chapter-head, .head-row > * {
  min-inline-size: 0;
}

/* Das Orbit-Panel bezog seine Spaltenbreite aus dem min-content seines
   Inhalts und stand dadurch bei 200% Textzoom 34px ueber die Stage
   hinaus — der Text 'Schritt 1 von 4' wurde rechts abgeschnitten.
   Gemessen 04.08.2026, 390px Viewport. */
.orbit-panel,
.orbit-panel .step-line,
.orbit-panel .lbl {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

/* ─── Footer: Linkzeilen statt Aufzählung ───────────────────────────
   Der Footer trug vor jedem Link einen Listenpunkt und las sich wie
   eine technische Sitemap. Gruppen tragen jetzt über Überschrift und
   Weißraum, nicht über Marker. */
.site-footer ul,
.site-footer ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li { display: block; }
.site-footer li + li { margin-top: 0.1rem; }

.site-footer a {
  display: block;
  padding: 0.62rem 0;
  text-decoration: none;
  /* Trefferfläche über die volle Spaltenbreite, nicht nur am Wort. */
  min-height: 44px;
  line-height: 1.5;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Gruppenüberschriften bekommen Luft statt einer Linie darunter. */
.site-footer h3,
.site-footer .footer-head {
  margin-bottom: 0.35rem;
}

@media (max-width: 760px) {
  /* Mobil laufen die Gruppen untereinander — mit einer Haarlinie
     dazwischen, damit sie nicht ineinanderfließen. */
  .site-footer .footer-col + .footer-col,
  .site-footer nav + nav {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .site-footer a { padding: 0.55rem 0; }
}