/* Die gemeinsame Sprache der umgebauten Seiten.
 *
 * Das `st-`-Praefix stand urspruenglich fuer "Startseite". Seit die
 * Startseite die Referenz fuer die uebrigen Seiten ist, heisst es
 * "Standardabschnitt": jede umgebaute Seite baut aus denselben Teilen,
 * damit nicht zehn Seiten dieselbe Ueberschriftenregel kopieren.
 *
 * Enthalten: Satzbreite, Abschnittsrhythmus, Ueberschriften, die
 * Zweispalte, die Punktliste und die Dreiergruppe. Was eine Seite
 * darueber hinaus braucht, steht in ihrem eigenen Stylesheet.
 */

:root {
  /* Eine Satzbreite fuer die ganze Website: 66 Zeichen. Alles, was
     Fliesstext ist, haelt sich daran — auch in zweispaltigen Bloecken. */
  --st-measure: 66ch;
}

/* ---------- Abschnittsrhythmus ---------------------------------- */

.st-section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }

/* ---------- Ueberschriften -------------------------------------- */

.st-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--petrol);
  max-width: 20ch;
  margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* Serifenkursive: hoechstens einmal pro Abschnitt, deshalb liegt sie
   auf dem <em> der Ueberschrift und nirgends sonst automatisch. */
.st-h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--green-dark);
}
.st-h3,
.st-two h3,
.st-trio h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  color: var(--petrol);
  margin-block-end: 0.6rem;
}

.st-lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: var(--st-measure);
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Zweispalte ------------------------------------------ */

/* `minmax(0, 1fr)` statt `1fr`: ein Grid-Item hat `min-width: auto` und
   schrumpft sonst nie unter sein laengstes Wort. Bei 200 % Textzoom
   sprengte "Arbeitnehmerueberlassung" die Spalte um 44px. */
.st-two {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) {
  /* Zwei Achsen — das Maximum pro Abschnitt. */
  .st-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Dreiergruppe ---------------------------------------- */

.st-trio {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .st-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st-trio > * { max-width: var(--st-measure); }
.st-trio p { line-height: 1.55; }

/* ---------- Punktliste ------------------------------------------ */

.st-list {
  /* Die globale Regel schaltet den Marker nur fuer `ul[class]` ab. */
  list-style: none;
  margin-block-end: 1.5rem;
  max-width: var(--st-measure);
}
.st-list li {
  position: relative;
  padding-inline-start: 1.4rem;
  padding-block: 0.55rem;
  line-height: 1.5;
  border-block-start: 1px solid var(--line);
  /* `anywhere` statt `break-word`: nur `anywhere` senkt auch die
     min-content-Breite, an der das Grid seine Spalte misst. */
  overflow-wrap: anywhere;
}
.st-list li:first-child { border-block-start: none; padding-block-start: 0; }
/* Informationsfunktion, keine Dekoration: der Punkt ersetzt den
   list-style, den `ul[class]` global abschaltet. */
.st-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.3rem;
  inset-block-start: 1.25em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-dark);
}
.st-list li:first-child::before { inset-block-start: 0.7em; }

/* ---------- Aktionsgruppe --------------------------------------- */

.st-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

/* Kais Review (08.10.2026): Die beiden Bewerberwege waren im Einstieg
   optisch zu klein. Nur hier werden sie bewusst zur grossen Entscheidung,
   ohne alle CTA-Gruppen der Website aufzublasen. */
.bw-actions--prominent {
  gap: clamp(0.8rem, 1.8vw, 1.1rem);
}
.bw-actions--prominent .btn {
  min-height: 64px;
  min-width: min(100%, 15rem);
  padding: 1.2rem clamp(2rem, 3.5vw, 2.8rem);
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  font-weight: 600;
}
.bw-actions--prominent .btn-ghost {
  box-shadow: inset 0 0 0 2px var(--line);
}

/* ---------- Mobile ---------------------------------------------- */

@media (max-width: 600px) {
  /* Nebeneinander waeren zwei gleich wichtige Aktionen je nach
     Textlaenge unterschiedlich breit. */
  .st-actions .btn { flex: 1 1 100%; text-align: center; }
  .st-h2 { max-width: none; }
}

/* ---------- Seitenkopf einer Unterseite -------------------------- */

/* Monospace ist Metadaten vorbehalten: die Zeile sagt, wo man ist und
   worum es geht — sie ist keine Aussage, sondern eine Angabe. */
.st-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-block-end: 0.9rem;
}

.st-h1 {
  font-family: var(--font-display);
  /* Der Deckel lag bei 4rem, waehrend der Auftakt der Startseite auf
     4.6rem geht. Auf einer Unterseite wirkte die Hauptaussage dadurch
     kleiner als das, was sie ankuendigt. */
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--petrol);
  max-width: 16ch;
  margin-block-end: clamp(1rem, 2vw, 1.4rem);
}
.st-h1 em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--green-dark);
}

/* Nachsatz zu einem Abschnitt: die Einschraenkung, die zur Aussage
   gehoert. Steht unter der Gruppe, auf die sie sich bezieht. */
.st-note {
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--fs-sm);
  color: var(--gray);
  max-width: var(--st-measure);
}

/* ---------- Nummerierte Schritte --------------------------------- */

/* Die Ziffer traegt die Reihenfolge, deshalb steht sie da — sie ist
   keine Kapitelnummer und keine Dekoration. */
.st-steps {
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .st-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st-steps li {
  counter-increment: schritt;
  position: relative;
  padding-block-start: 3.25rem;
  max-width: var(--st-measure);
}
/* Dieselbe Ziffer wie im Ablauf der Startseite. Vorher trug sie hier
   einen Unterstrich statt eines Kreises — zwei Formen fuer dieselbe
   Reihenfolge, je nachdem auf welcher Seite man stand. */
.st-steps li::before {
  content: counter(schritt);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  background: var(--green-dark);
  border-radius: 50%;
}
.st-steps p { line-height: 1.55; }

/* Fortschritts-Familie auf Schrittfolgen: der Schritt, an dem der Leser
   beim Scrollen gerade ist (data-active aus js/motion.js), steht voll —
   die anderen treten ruhig zurück. Der grüne Nummernkreis des aktiven
   Schritts wird so von selbst zum Anker. Ohne JavaScript oder bei
   reduced-motion gibt es kein data-active: alle Schritte voll sichtbar. */
.st-steps[data-progress] > li { transition: opacity 0.35s var(--ease); }
.st-steps[data-active] > li { opacity: 0.45; }
.st-steps[data-active="1"] > li:nth-child(1),
.st-steps[data-active="2"] > li:nth-child(2),
.st-steps[data-active="3"] > li:nth-child(3),
.st-steps[data-active="4"] > li:nth-child(4) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .st-steps[data-active] > li { opacity: 1; transition: none; }
}

/* ---------- Direkter Draht --------------------------------------- */

.st-direkt {
  margin-block-start: 1.25rem;
  font-size: var(--fs-lede);
}
.st-direkt a {
  font-family: var(--font-display);
  white-space: nowrap;
}
.st-hours {
  font-size: var(--fs-sm);
  color: var(--gray);
  margin-inline-start: 0.5rem;
}

/* ---------- Bildplatzhalter -------------------------------------- */

/* Bis zur Fotoproduktion sind alle Motive KI-generiert. Die Bildzeile
   sagt das an jedem Motiv — nicht nur im Register. */
.st-motiv,
.bw-motiv {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.st-motiv img,
.bw-motiv img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: 50% 46%;
  border-radius: var(--radius-sm);
}
/* Das Motiv zeigt zwei Menschen; ihre Gesichter liegen im oberen
   Drittel. Bei 50% 46% schnitt der Banner sie weg und zeigte Haende. */
.bw-motiv img { object-position: 50% 26%; }
/* Bis 860px liefert <source> die Hochformat-Variante (540x720): die
   Koepfe beginnen bei ~14% der Hoehe, 26% schnitt sie oben knapp an. */
@media (max-width: 860px) {
  .bw-motiv img { object-position: 50% 16%; }
}

/* Die Kennzeichnung muss lesbar sein, nicht laut. Versalien mit weitem
   Sperrsatz gaben ihr mehr Gewicht als der Bildunterschrift auf der
   Startseite — dieselbe Aussage, zwei Lautstaerken. */
.st-motiv figcaption,
.bw-motiv figcaption {
  margin-block-start: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--gray);
  max-width: 42ch;
  opacity: 0.85;
}
@media (max-width: 700px) {
  .st-motiv img,
  .bw-motiv img { aspect-ratio: 3 / 2; }
  .st-hours { display: block; margin-inline-start: 0; }
}

/* Vier Schritte statt drei: bei vier Elementen wuerde die Dreierspalte
   umbrechen und einen einzelnen Rest in eine zweite Reihe stellen. */
@media (min-width: 900px) {
  .st-steps--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Kontakt: Reihenfolge auf dem Telefon ----------------- */

/* Der Anruf steht mobil vor den zwei Wegen. Wer auf dem Telefon eine
   Kontaktseite oeffnet, will meist telefonieren — die beiden Wegbloecke
   schoben die Nummer sonst rund 700px nach unten. */
@media (max-width: 760px) {
  .kt-v2 .wrap { display: flex; flex-direction: column; }
  .kt-v2 .breadcrumb { order: 1; }
  .kt-v2 .st-eyebrow { order: 2; }
  .kt-v2 .st-h1     { order: 3; }
  .kt-v2 .kt-direct { order: 4; }
  .kt-v2 .kt-ways   { order: 5; }
}

/* Der belegte Vertrauensanker: regionale Weiterleitung. Stand vorher
   als vierte Zeile einer Definitionsliste — richtig, aber unauffindbar. */
.kt-anker {
  margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--green-dark);
  line-height: 1.55;
  max-width: var(--st-measure);
}

/* Statusmarke an einem angekuendigten Dokument. Sie sagt, dass die
   Datei noch nicht existiert — deshalb steht sie an der Zeile und
   nicht als Schaltflaeche, die nichts tut. */
.dl-state {
  display: inline-block;
  margin-inline-start: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Lokale Sprungnavigation eines Informationsdokuments. Dieselbe Form
   wie die Standort-Sprungleiste: Trefferflaeche 44px, kein Ornament. */
/* Scrollspy (js/motion.js, nav[data-spy]): der Link des Abschnitts, in dem
   der Leser gerade steht, ist markiert — in der sticky Desktop-Nebenspalte
   echte Orientierung. aria-current trägt den Zustand auch für Screenreader.
   Ohne JavaScript: keine Markierung, Navigation unverändert. */
.tp-jump a[aria-current] {
  color: var(--green-deep);
  font-weight: 600;
}
.tp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-block: clamp(1.5rem, 3vw, 2rem);
  padding-block: 0.5rem;
  border-block: 1px solid var(--line);
}
.tp-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--green-dark);
}

/* ---------- Formulare bei sehr schmalem Viewport ----------------- */

/* Bei 320px und 200 % Textzoom blieben von 320px nur 116px Feldbreite:
   Wrap-Polster (40px), Kartenpolster (48px) und Feldpolster (32px)
   rechnen alle in rem und wachsen mit der Schrift, der Viewport nicht.
   Die Felder waren erreichbar, aber kaum noch beschreibbar.

   Deshalb hier Polster in px statt rem — nur unter 420px, wo der Platz
   tatsaechlich knapp ist. Ueberall sonst bleibt die rem-Skalierung. */
@media (max-width: 420px) {
  .form-card { padding-inline: 14px; }
  .field input,
  .field textarea,
  .field select { padding-inline: 12px; }
  .kt-form-section .wrap,
  .pa-form-section .wrap,
  .ib-form-section .wrap { padding-inline: 14px; }
}

/* Bei 200 % Textzoom auf 320px passt die Telefonnummer nicht mehr in
   eine Zeile. `nowrap` haelt sie sonst zusammen und schiebt 11px aus
   dem Dokument. Ab 420px bleibt sie ungebrochen — dort ist Platz. */
@media (max-width: 420px) {
  .st-direkt a,
  .st-end-call a,
  .st-hours { white-space: normal; }
}

/* ---------- Trefferflaechen ------------------------------------- */

/* Kurze Woerter ergeben schmale Links. "Start" in der Brotkrumen-Zeile
   mass 31px, Inline-Links in Formularlabels 18px Hoehe. Beide bleiben
   im Textfluss — die Flaeche waechst ueber Polster, nicht ueber
   display:block, das den Satz zerreissen wuerde. */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.checkbox-row label a,
.field label a,
.st-note a,
.job-fallback a {
  display: inline-block;
  padding-block: 0.7rem;
}

/* Dieselbe Regel fuer die verbleibenden Inline-Links im Fliesstext und
   die schmalen Sprungziele der Stellenakte. */
.jd2-sr-nav a { min-width: 44px; justify-content: center; }
.kt-lines a,
.tp-v2 p a,
.jd2 .field label a { display: inline-block; padding-block: 0.7rem; }

/* ═══ ÜBER-UNS-MARKENBÜHNE — AllcuraMed → Fokus → QUIP ══════════════
   Eine Bühne, drei klar unterscheidbare Zustände, aus EINEM DOM:
   · Basis (ohne JS / reduced-motion): statische Szenenfolge, alles sichtbar.
   · ≥1120px + JS + Bewegung (.uu-story--stage): Sticky-Bühne — Hintergrund
     fließt cream→Petrol, die Szenen wechseln zustandsweise, das Fokuswort
     tritt nacheinander ins Zentrum, eine Grundlinie zieht mit. Steuergröße:
     scroll-gekoppelter Fortschritt --sp + data-phase/data-focus. Nur
     transform/opacity, kein Scroll-Hijack.
   · 768–1119px / mobil + JS (.uu-story--linear): lineare Szenenfolge mit
     sanftem Reveal, keine gestauchte Desktop-Bühne. */

.uu-story { --sp: 0; position: relative; background: var(--cream); }
.uu-story-head { padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(1.4rem, 3vw, 2.4rem); }

/* ---- gemeinsame Bausteine ---------------------------------------- */
.uu-scene-kick {
  margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-dark);
}
.uu-scene-brand { margin: 0; line-height: 0; }
.uu-scene-brand img { width: clamp(200px, 26vw, 280px); height: auto; display: block; }
.uu-scene-line {
  margin: clamp(1.1rem, 2.5vw, 1.7rem) 0 0; max-width: 24ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--petrol); text-wrap: balance; hyphens: none; overflow-wrap: normal;
}
.uu-scene-line em { font-family: var(--font-editorial); font-style: italic; color: var(--green-dark); }
.uu-scene-line--sm {
  max-width: 42ch; font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-lede); line-height: 1.5; letter-spacing: 0; color: var(--gray);
  /* Lange Komposita trennen nur an gesetzten weichen Trennstellen (&shy; im
     Markup: Arbeitnehmer-überlassung, Bundes-agentur) — kein falsches
     „Bun-desagentur". overflow-wrap nur als Extremsicherung bei Textzoom. */
  hyphens: manual; overflow-wrap: break-word;
}
.uu-scene-cap {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0; max-width: 34ch;
  font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--gray);
  hyphens: none;
}
/* Fokus-Wörter (Basis: lesbare Folge) */
.uu-focus { list-style: none; margin: clamp(0.5rem,1.5vw,1rem) 0 0; padding: 0; }
.uu-focus-item { display: flex; align-items: baseline; gap: clamp(0.55rem, 2vw, 1.4rem);
  padding-block: clamp(0.5rem, 1.5vw, 0.9rem); border-block-start: 1px solid rgba(24,60,63,0.14); }
.uu-focus-item:first-child { border-block-start: 0; padding-top: 0; }
.uu-focus-nr { flex: none; font-family: var(--font-mono); font-size: var(--fs-mono-s);
  color: var(--green-dark); letter-spacing: 0.06em; }
.uu-focus-word { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 5.2vw, 3.1rem); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--petrol); hyphens: none; overflow-wrap: normal; word-break: keep-all; }
/* QUIP-Abschluss als Beziehungskomposition: AllcuraMed (kleiner) →
   „Teil der" → QUIP (größer), räumlich als ein Block. Ein kurzer grüner
   Steg verbindet beide Marken. AllcuraMed bleibt klar sichtbar, tritt aber
   hierarchisch zurück. */
.uu-bond { display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.7rem, 2vw, 1.1rem); margin: clamp(0.4rem, 2vw, 1rem) 0 0; }
.uu-bond-acm { margin: 0; line-height: 0; position: relative; }
.uu-bond-acm img { width: clamp(150px, 17vw, 178px); height: auto; display: block; }
/* Verbindungssteg zwischen den beiden Marken */
.uu-bond-acm::after { content: ''; position: absolute; left: 50%; bottom: calc(-1 * clamp(0.7rem, 2vw, 1.1rem));
  width: 2px; height: clamp(0.7rem, 2vw, 1.1rem); background: var(--green);
  opacity: 0.7; transform: translateX(-50%); }
.uu-quip { display: inline-flex; flex-direction: column; align-items: center;
  gap: clamp(0.4rem,1.2vw,0.7rem);
  margin: 0; text-decoration: none; line-height: 0;
  opacity: 0.96; transition: opacity 0.3s var(--ease); }
.uu-quip:hover, .uu-quip:focus-visible { opacity: 1; }
.uu-quip:focus-visible { outline: 2px solid var(--green); outline-offset: 8px; border-radius: 3px; }
.uu-quip-vor { font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1; color: #dfece7; }
.uu-quip img { width: clamp(205px, 22vw, 270px); height: auto; display: block; }
.uu-quip-note { margin: clamp(1rem, 2.4vw, 1.4rem) 0 0; max-width: 44ch;
  font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: 0.05em;
  line-height: 1.5; color: rgba(255,255,255,0.55); hyphens: manual; overflow-wrap: break-word; }

/* dekorative Bühnenteile: nur im Stage-Modus sichtbar */
.uu-bg, .uu-baseline { display: none; }

/* ---- BASIS: statische Szenenfolge (No-JS / reduced-motion / mobil / tablet)
   Zentrierte, komponierte Fassung — füllt auch das Tablet (kein linksbündiger
   Rest mit leerer rechter Hälfte). Die Szenen stehen mittig, Logos und Wörter
   zentriert; ein kurzer grüner Steg verbindet sie. */
.uu-scenes { position: relative; text-align: center; }
.uu-scene { position: relative; padding-block: clamp(2.4rem, 6vw, 3.4rem);
  max-width: 42ch; margin-inline: auto; }
.uu-scene--marke { padding-top: 0; }
.uu-scene-brand img, .uu-scene-line, .uu-scene-cap { margin-inline: auto; }
.uu-focus { display: inline-block; text-align: left; }
/* Verbindungsmotiv zwischen den Szenen: kurzer grüner Steg, mittig */
.uu-scene + .uu-scene::before { content: ''; position: absolute; left: 50%;
  transform: translateX(-50%); top: 0; width: 2px; height: clamp(1.8rem, 5vw, 2.8rem);
  background: var(--green-dark); opacity: 0.5; }
/* Szene 3 trägt schon in der Basis die Petrol-Fläche (Zustandswechsel auch
   ohne Bewegung sichtbar); weiße QUIP-Wortmarke passt dazu. */
.uu-scene--gruppe { background: var(--petrol); color: #dfe9e7;
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.6rem, 5vw, 3rem);
  border-radius: 5px; max-width: 52ch; }
.uu-scene--gruppe::before { display: none; }
.uu-scene--gruppe .uu-scene-kick { color: var(--green); }
.uu-scene--gruppe .uu-scene-line--sm { color: #b9cdc8; margin-inline: auto; }
.uu-scene--gruppe .uu-quip-note { margin-inline: auto; }
/* Schmale Telefone: etwas weniger horizontales Innenpadding, damit die
   Petrol-Karte mehr Textbreite hat (weniger Umbruchzwang), ohne höher zu
   werden. */
@media (max-width: 430px) {
  .uu-scene--gruppe { padding-inline: clamp(1.05rem, 4.5vw, 1.6rem); }
}
@media (max-width: 360px) {
  /* Extremschmal + Textzoom: etwas weniger Padding und eine Spur kleinere
     Rechtszeile, damit lange Komposita an der weichen Trennstelle brechen
     (Arbeitnehmer-überlassung) statt per overflow-wrap mitten im Wort. */
  .uu-scene--gruppe { padding-inline: 0.85rem; }
  .uu-scene--gruppe .uu-scene-line--sm { font-size: clamp(0.98rem, 4.4vw, 1.15rem); }
}

/* Mobile/Tablet (nicht Stage): sehr zurückhaltende Flächennuance hinter
   Kapitel 2 hebt es leicht von Kapitel 1 ab — keine Karte, kein zweites
   Petrol-Feld. Als Pseudo-Element realisiert, damit es die Breite der
   Fokuswörter NICHT verändert (kein Overflow). */
.uu-story:not(.uu-story--stage) .uu-scene--fokus { position: relative; }
.uu-story:not(.uu-story--stage) .uu-scene--fokus::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%); width: min(100%, 44ch);
  top: clamp(0.4rem, 2vw, 1rem); bottom: clamp(0.4rem, 2vw, 1rem);
  background: rgba(64, 115, 35, 0.05);
}
.uu-story:not(.uu-story--stage) .uu-scene--fokus > * { position: relative; z-index: 1; }

/* sanftes Reveal nur im Linear-Modus (JS + Bewegung erlaubt) */
.uu-story--linear .uu-scene { opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.uu-story--linear .uu-scene.uu-in { opacity: 1; transform: none; }

/* ═══ ≥1120px — STICKY-MARKENBÜHNE ════════════════════════════════ */
@media (min-width: 1120px) {
  .uu-story--stage .uu-story-head { padding-bottom: 0; position: relative; z-index: 3; }

  .uu-story--stage .uu-track { height: 360vh; }
  /* Zwei Zeilen: Inhalt (1fr, zentriert) und ein RESERVIERTES Band für die
     Grundlinie (auto). So kann die Linie den Inhalt strukturell nie
     schneiden — kein fester bottom-Offset, der bei kurzer Viewporthöhe in
     den Text läuft. */
  .uu-story--stage .uu-stage { position: sticky; top: 0; height: 100vh;
    overflow: hidden; display: grid; grid-template-rows: 1fr auto; }

  /* Hintergrund cream → Petrol (flächig, ruhig) — spannt beide Zeilen */
  .uu-story--stage .uu-bg { display: block; position: absolute; inset: 0; z-index: 0; }
  .uu-story--stage .uu-bg-cream, .uu-story--stage .uu-bg-petrol { position: absolute; inset: 0; }
  .uu-story--stage .uu-bg-cream { background: var(--cream); }
  .uu-story--stage .uu-bg-petrol {
    background: radial-gradient(130% 100% at 50% 34%, var(--petrol) 0%, var(--petrol-deep) 100%);
    opacity: clamp(0, calc((var(--sp) - 0.72) * 6), 1); }

  /* Grundlinie im eigenen Band (Zeile 2), zieht mit dem Fortschritt.
     margin-top garantiert ≥ Abstand zum Inhalt, margin-bottom hebt sie vom
     unteren Rand ab; das Verbindungsmotiv bleibt sichtbar und geht in die
     CTA über. */
  .uu-story--stage .uu-baseline { display: block; grid-row: 2; position: relative; z-index: 2;
    width: min(58vw, 720px); height: 2px; margin: 2.5rem auto clamp(8vh, 10vh, 96px);
    background: rgba(24,60,63,0.16); }
  .uu-story[data-phase="3"].uu-story--stage .uu-baseline { background: rgba(255,255,255,0.20); }
  .uu-story--stage .uu-baseline-fill { position: absolute; inset: 0; background: var(--green-dark);
    transform: scaleX(var(--sp)); transform-origin: left; }
  .uu-story[data-phase="3"].uu-story--stage .uu-baseline-fill { background: var(--green); }

  /* Inhalt in Zeile 1; Szenen füllen sie und werden per Zustand ge-crossfadet. */
  .uu-story--stage .uu-scenes { grid-row: 1; position: relative; z-index: 2; width: 100%;
    max-width: 1120px; margin-inline: auto; min-height: 0; }
  /* padding-top hält die zentrierte Komposition unter dem fixierten Header.
     Nicht-aktive Szenen: opacity 0 + pointer-events:none (nicht
     visibility:hidden), damit der Inhalt im Accessibility-Tree lesbar bleibt;
     die Tab-Reihenfolge steuert js/story.js über tabindex. */
  .uu-story--stage .uu-scene { position: absolute; inset: 0; max-width: none; padding: 4.5rem 6vw 0;
    display: grid; align-content: center; text-align: center; justify-items: center;
    opacity: 0; pointer-events: none; transform: translateY(16px);
    transition: opacity 0.24s var(--ease), transform 0.45s var(--ease); }
  .uu-story--stage .uu-scene::before { display: none; }
  .uu-story--stage .uu-scene--gruppe { background: none; color: #eef5f2; border-radius: 0; margin: 0; max-width: none; }
  /* Eintretende Szene: leicht verzögert und etwas länger — die alte
     Aussage ist damit schon deutlich verblasst (0.32s), bevor die neue
     voll da ist. So konkurrieren nie zwei vollständige Aussagen, ohne dass
     ein leerer Zwischenframe entsteht. Symmetrisch beim Rückwärtsscrollen. */
  .uu-story[data-phase="1"].uu-story--stage .uu-scene--marke,
  .uu-story[data-phase="2"].uu-story--stage .uu-scene--fokus,
  .uu-story[data-phase="3"].uu-story--stage .uu-scene--gruppe {
    opacity: 1; pointer-events: auto; transform: none;
    transition: opacity 0.3s var(--ease) 0.18s, transform 0.55s var(--ease) 0.08s; }

  .uu-story--stage .uu-scene-brand img { width: clamp(280px, 30vw, 400px); }
  /* Große Aussage nur in Kapitel 1; die Rechtszeile in Kapitel 3 bleibt
     sekundär (var(--fs-lede) aus der Basis) und zentriert. */
  .uu-story--stage .uu-scene--marke .uu-scene-line { max-width: 22ch; font-size: clamp(1.8rem, 3vw, 2.7rem); }
  .uu-story--stage .uu-scene--gruppe .uu-scene-line--sm { max-width: 40ch; margin-inline: auto; }

  /* Fokus: stabile Reihenfolge (Pflege · Medizin · Assistenz). Das aktive
     Wort tritt groß ins Rampenlicht, die anderen bleiben als ruhige Spur
     zurück — die Hierarchie wandert sichtbar nach unten. Die font-size
     wechselt nur bei den drei Zustandswechseln (nicht pro Scrollframe). */
  .uu-story--stage .uu-scene--fokus { align-content: center; }
  .uu-story--stage .uu-focus { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: clamp(0.3rem, 1vh, 1rem); width: 100%; margin: 0; min-height: 44vh; }
  .uu-story--stage .uu-focus-item { border: 0; padding: 0; gap: 0.7rem; opacity: 0.28;
    transition: opacity 0.5s var(--ease); }
  .uu-story--stage .uu-focus-item .uu-focus-nr { align-self: flex-start; margin-top: 0.55em; opacity: 0.75; }
  .uu-story--stage .uu-focus-word { font-size: 1.75rem; line-height: 1;
    transition: font-size 0.55s var(--ease); }
  .uu-story[data-focus="1"].uu-story--stage .uu-focus-item[data-w="1"],
  .uu-story[data-focus="2"].uu-story--stage .uu-focus-item[data-w="2"],
  .uu-story[data-focus="3"].uu-story--stage .uu-focus-item[data-w="3"] { opacity: 1; }
  .uu-story[data-focus="1"].uu-story--stage .uu-focus-item[data-w="1"] .uu-focus-word,
  .uu-story[data-focus="2"].uu-story--stage .uu-focus-item[data-w="2"] .uu-focus-word,
  .uu-story[data-focus="3"].uu-story--stage .uu-focus-item[data-w="3"] .uu-focus-word {
    font-size: clamp(3.2rem, 7.5vw, 5.4rem); }
  .uu-story--stage .uu-scene--fokus .uu-scene-kick { position: absolute; top: 12%; left: 50%;
    transform: translateX(-50%); }
  .uu-story--stage .uu-scene-cap { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    opacity: 0; transition: opacity 0.5s var(--ease); }
  .uu-story[data-focus="3"].uu-story--stage .uu-scene-cap { opacity: 1; }

  /* Phase 3: AllcuraMed → „Teil der" → QUIP als eine Beziehungskomposition.
     QUIP dominiert, AllcuraMed bleibt klar sichtbar, aber kleiner. */
  .uu-story--stage .uu-bond { gap: clamp(0.9rem, 1.6vh, 1.4rem); margin-top: 0; }
  .uu-story--stage .uu-bond-acm img { width: clamp(160px, 15vw, 190px); }
  .uu-story--stage .uu-quip img { width: clamp(250px, 24vw, 300px); }
  .uu-story--stage .uu-quip-note { margin-inline: auto; text-align: center; }

  /* Handoff-Linie in den Abschluss */
  .uu-ende { position: relative; }
}

/* Handoff-Steg (alle Breiten): dünne grüne Linie von der Story in die CTA */
.uu-ende-tie { display: block; width: 2px; height: clamp(2rem, 5vw, 3.2rem);
  background: linear-gradient(var(--green-dark), rgba(64,115,35,0)); margin: 0 auto; }

/* ---- Barrierefreiheit / Fallbacks -------------------------------- */
@media (forced-colors: active) { .uu-quip { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .uu-quip, .uu-story--linear .uu-scene, .uu-story--stage .uu-scene,
  .uu-story--stage .uu-focus-item, .uu-story--stage .uu-baseline-fill { transition: none; }
}

/* ---------- Formseiten: Zweispalter ab 1100px ------------------- */

/* Ein schmales Formular in einer leeren Desktopflaeche wirkt wie ein
   Rest. Ab 1100px steht daneben, was jemand braucht, um es auszufuellen:
   was gefragt wird, wer sich meldet, wie man stattdessen anruft.
   Sieben zu vier Spalten — das Formular bleibt die Hauptsache.
   Darunter einspaltig, dann steht die Nebenspalte hinter dem Formular. */
.form-raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1100px) {
  .form-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  /* Die Nebenspalte laeuft mit, solange das Formular laenger ist. */
  .form-neben { position: sticky; top: 96px; }
}

.form-neben > * + * { margin-block-start: clamp(1.5rem, 3vw, 2rem); }
.form-neben h2,
.form-neben h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--petrol);
  margin-block-end: 0.5rem;
}
.form-neben p { font-size: var(--fs-sm); line-height: 1.6; color: var(--gray); max-width: 46ch; }
.form-neben a { font-weight: 500; }

/* Angaben, die das Formular abfragt — als Liste, nicht als Kartenwand. */
.form-neben dl { display: grid; gap: 0.7rem; }
.form-neben dl > div {
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--line);
}
.form-neben dl > div:first-child { border-block-start: 0; padding-block-start: 0; }
.form-neben dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.form-neben dd { font-size: 0.95rem; line-height: 1.45; color: var(--petrol); margin-block-start: 0.15rem; }

.form-neben-block {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(24, 60, 63, 0.14);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.form-neben-block a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
}

/* Kopf und Formular gehoeren zusammen: zwei aufeinanderfolgende
   `.st-section` addieren ihre Innenabstaende zu rund 170px Leere
   zwischen Vorspann und erstem Feld. Der Formularblock ruecht deshalb
   naeher an seinen Kopf. */
.kt-form-section,
.pa-form-section,
.ib-form-section { padding-block-start: 0; }
.chapter--form-page,
.kt-v2 { padding-block-end: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- Standorte: Liste und internationale Einordnung ------- */

.lo-raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  /* Die Ortsliste bleibt die Hauptsache und behaelt ihre Scanbarkeit. */
  .lo-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .lo-neben { position: sticky; top: 96px; }
}
.lo-neben h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--petrol);
  margin-block-end: 0.5rem;
}
.lo-neben > p { font-size: var(--fs-sm); line-height: 1.6; color: var(--gray); max-width: 46ch; }
.lo-neben .loc {
  padding-block: 0.8rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.lo-neben .loc strong { display: block; font-family: var(--font-display); color: var(--petrol); }
.lo-neben-note { margin-block-start: 0.9rem; font-size: 0.8rem; color: var(--gray); }

/* ---------- Transparenz: Inhalt links, Antworten rechts ---------- */

.tp-raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .tp-raster { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
  .tp-neben { position: sticky; top: 96px; }
  /* Die Sprungleiste steht als Spalte, nicht als Band ueber dem Text. */
  .tp-neben .tp-jump {
    display: grid;
    gap: 0;
    border-block: 0;
    margin-block: 0;
    padding-block: 0;
  }
  .tp-neben .tp-jump a { border-block-end: 1px solid var(--line); }
  /* Aktive Kante in der sticky Spalte: eine ruhige 2px-Linie wandert mit
     dem gelesenen Abschnitt. */
  .tp-neben .tp-jump a {
    padding-inline-start: 0.6rem;
    border-inline-start: 2px solid transparent;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .tp-neben .tp-jump a[aria-current] { border-inline-start-color: var(--green-dark); }
}
.tp-neben-titel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-block-end: 0.6rem;
}
/* Lesbare Zeilenlaenge und deutlich engere Abstaende zwischen den
   Fragen — vorher lag zwischen zwei Antworten ein voller
   Abschnittsabstand. */
.tp-antworten > * { max-width: 68ch; }
.tp-antworten h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--petrol);
  margin-block: clamp(1.75rem, 3vw, 2.25rem) 0.6rem;
  padding-block-start: clamp(1.5rem, 2.5vw, 2rem);
  border-block-start: 1px solid var(--line);
}
.tp-antworten h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.tp-antworten p { line-height: 1.65; }
.tp-antworten p + p { margin-block-start: 0.7rem; }

/* ---------- Downloads: die angekuendigten Dokumente -------------- */

.dl-liste { display: grid; gap: 0; max-width: var(--st-measure); }
.dl-liste > div {
  padding-block: 0.9rem;
  border-block-start: 1px solid var(--line);
}
.dl-liste > div:first-child { border-block-start: 0; padding-block-start: 0; }
.dl-liste dt {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--petrol);
}
.dl-liste dd { margin-block-start: 0.15rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--gray); }
/* Die Zielgruppe ist eine Angabe zum Dokument, keine Ueberschrift. */
.dl-fuer {
  display: inline-block;
  margin-inline-start: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
  white-space: nowrap;
}


/* ---------- Stellenkarte ------------------------------------------
   Eine Stelle sieht ueberall gleich aus: Startseite, /fuer-bewerber/,
   /jobs/ und die Empfehlungen im Jobdetail.

   Vorher gab es zwei Sprachen fuer dieselbe Sache — Karten auf der
   Startseite (.hs-stelle in start.css) und Textzeilen in der Liste
   (.job-line in experience.css, ausdruecklich "kein Card-Frame"). Wer
   von der Startseite in die Liste klickte, landete in einem anderen
   Produkt. Ausserdem lud /fuer-bewerber/ die Kartenstile gar nicht:
   dort rendete stellen.js unformatierten Text auf dunklem Grund.

   Beruf gross, die Fakten als eigene Marken darunter, die Aktion
   sichtbar. */
.stellen-liste {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .stellen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stellen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ergebniswechsel-Familie (js/jobs.js): beim Filtern tritt die alte Liste
   sichtbar zurück, neue Karten treten kurz gestaffelt an (40 ms je Karte).
   Kein Blitzen, keine künstliche Wartezeit; reduced-motion: alles sofort. */
#job-list.laedt { opacity: 0.35; transition: opacity 0.2s var(--ease); }
#job-list { transition: opacity 0.2s var(--ease); }
.stelle--neu {
  animation: stelle-auf 0.32s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes stelle-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #job-list.laedt, #job-list { transition: none; opacity: 1; }
  .stelle--neu { animation: none; }
}

.stelle {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--petrol);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.stelle:hover,
.stelle:focus-visible {
  border-color: var(--green-dark);
  box-shadow: 0 8px 28px rgba(22, 56, 60, 0.09);
  color: var(--petrol);
}
.stelle-titel {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* Der Ort steht vor den Marken und traegt die Einrichtung mit — in der
   Liste ist er das zweite Suchkriterium nach dem Beruf. */
.stelle-ort {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--gray);
}
.stelle-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: auto;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--petrol);
  background: var(--green-tint);
  border-radius: 999px;
}
.marke--geld { background: var(--petrol-tint); font-weight: 500; }
.stelle-aktion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--green-dark);
}
.stelle:hover .stelle-aktion .arr { transform: translateX(3px); }
.stelle-aktion .arr { transition: transform var(--speed) var(--ease); }
.stellen-fehler { padding-block: 1.25rem; color: var(--gray); }

/* Kopf und Abbinder eines Stellenblocks. Standen in css/stellen.css,
   die sonst nur die abgeloeste Textzeile (.job-row) enthielt und mit
   ihr entfallen ist. Farben jetzt fuer hellen Grund — der Block auf
   /fuer-bewerber/ stand vorher als einziger auf dunklem. */
.st-jobs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-block-end: clamp(1.5rem, 3vw, 2rem);
}
.st-jobs-head .st-h2 { margin-block-end: 0; }

/* Monospace bleibt Metadaten vorbehalten — der Demo-Hinweis ist genau
   das: eine Angabe ueber die Herkunft der Daten, kein Fliesstext. */
.st-demo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--gray);
  max-width: 44ch;
}

.st-jobs-action { margin-block-start: clamp(1.5rem, 3vw, 2rem); }


/* ---------- Zielgruppenzonen ------------------------------------- */

/* `section-tint` (#f3efe7) unterscheidet sich vom Papierton (#faf8f4)
   um vier Prozent. Als Rhythmus reicht das nicht: mehrere Abschnitte
   hintereinander sehen gleich aus, obwohl sie verschiedene Dinge sagen.
   Diese beiden Zonen tragen dieselbe Zuordnung wie das Menue — gruen
   fuer den Bewerberweg, Petrol fuer den Einrichtungsweg — und stehen
   je Seite genau einmal, damit sie eine Zaesur bleiben und nicht zur
   Tapete werden. */
.section-gruen { background: var(--green-tint); }
.section-petrol { background: var(--petrol-tint); }

/* ---------- Standorte: Foto und Kontakt als Einheit ------------- */

/* Jede Niederlassung ist ein realer Ort. Bild und Daten gehoeren
   zusammen; der Rhythmus (jede zweite Zeile gespiegelt) traegt die
   Nord-Sued-Achse, ohne Karte und ohne erfundene Geografie. */
.lo-orte {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}
.lo-ort {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  /* Header (81px) + sticky Ortsleiste (~55px) + Luft */
  scroll-margin-block-start: 152px;
}
/* Mobile-DOM-Reihenfolge ist zugleich die geforderte Lesereihenfolge:
   Ort, Bild, Adresse, Telefon, E-Mail. */
@media (min-width: 760px) {
  .lo-ort {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: 'bild kopf' 'bild daten';
    grid-template-rows: auto 1fr;
    gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .lo-ort-city { grid-area: kopf; align-self: end; }
  .lo-ort-bild { grid-area: bild; grid-row: 1 / 3; }
  .lo-ort-daten { grid-area: daten; }
  /* Kontrollierter Wechsel: jede zweite Zeile spiegelt die Seiten. */
  .lo-ort:nth-child(even) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: 'kopf bild' 'daten bild';
  }
}
.lo-ort-bild { margin: 0; }
.lo-ort-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--radius);
  background: var(--cream);
}
/* Mobil: das gestapelte 4/5-Hochformat trieb die Seite auf ~8 Bildschirme
   (7025px). Ein kürzeres Landschaftsformat halbiert die Bildhöhe — das Foto
   bleibt echt, object-fit:cover schneidet nur anders. Engere Modulabstände
   dazu. Desktop behält 4/5 (dort steht das Bild neben den Daten). */
@media (max-width: 759px) {
  .lo-ort-bild img { aspect-ratio: 16 / 10; object-position: 50% 42%; }
  .lo-orte { gap: clamp(1.6rem, 5vw, 2.4rem); }
}
/* Fokus je Motiv: Schild/Eingang im Bild halten, Nebensaechliches
   (Spiegelung, Nachbargebaeude) aus der Mitte schieben. */
#ort-berlin   .lo-ort-bild img { object-position: 50% 32%; }
#ort-muenchen .lo-ort-bild img { object-position: 62% 42%; }
#ort-schwerin .lo-ort-bild img { object-position: 38% 46%; }
#ort-aachen   .lo-ort-bild img { object-position: 42% 50%; }
#ort-luebeck  .lo-ort-bild img { object-position: 50% 58%; }

.lo-ort-city {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--petrol);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.lo-ort-role {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-tint);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  align-self: center;
}
.lo-ort-addr {
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--gray);
  margin-block: 0.6rem 0.9rem;
}
.lo-ort-reach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
/* Der Anruf ist die klare lokale Aktion: als Flaeche, nicht als Link
   unter vielen. Trefferflaeche >= 44px. */
.lo-ort-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.lo-ort-tel:hover,
.lo-ort-tel:focus-visible { background: var(--green-deep); color: var(--white); }
.lo-ort-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-deep);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.lo-ort-maps {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  color: var(--gray);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
.lo-ort-maps:hover,
.lo-ort-maps:focus-visible { color: var(--green-deep); }
.lo-ort-maps::before {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Internationale Anlaufstellen — ruhiger Abschluss unter den Orten. */
.lo-intl {
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  padding-block-start: clamp(1.5rem, 4vw, 2.25rem);
  border-block-start: 1px solid var(--line);
  max-width: var(--st-measure);
}
.lo-intl h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--petrol);
  margin-block-end: 0.5rem;
}
.lo-intl > p { color: var(--gray); line-height: 1.6; }
.lo-intl-list { list-style: none; margin-block: 1rem; }
.lo-intl-list li {
  padding-block: 0.7rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--gray);
}
.lo-intl-list strong { font-family: var(--font-display); color: var(--petrol); margin-inline-end: 0.35rem; }
.lo-intl-note { font-size: 0.8rem; color: var(--gray); }