/* ═══════════════════════════════════════════════════════════════════
   SEITENKOMPOSITIONEN — jede Seite eine eigene Idee

   Externes Review vom 05.08.2026: "Jede Seite sieht aus wie Logo,
   Breadcrumb, Headline, Text, Bild, Button — immer wieder. Das Gehirn
   lernt nach zwei Seiten: ah, immer gleich. Dadurch verlieren selbst
   gute Bilder ihre Wirkung."

   Der Befund trifft, und die Ursache lag nicht im gemeinsamen Raster —
   das bleibt. Sie lag darin, dass jede Seite mit demselben Bausteinsatz
   bestückt war: Anker rechts, Text links, eine Aktion. Fünf Seiten, ein
   Bauplan.

   Diese Datei gibt jeder Seite eine eigene Bauform INNERHALB der
   gemeinsamen Kante.

     Für Bewerber   Magazinstrecke — Aufmacher, Vorspann, Auszug

   Weitere Seiten folgen; jede bekommt ihre eigene Sektion hier.
   ═════════════════════════════════════════════════════════════════ */

/* ─── Magazinstrecke: der Aufmacher ────────────────────────────────
   Das Bild trägt den Titel, statt neben ihm zu stehen. Es läuft über
   die volle Fensterbreite, der Titel liegt darin. Das ist der Unterschied
   zwischen einer Reportage und einem Seitenkopf mit Illustration. */
.mag-opener { padding-block-start: clamp(1rem, 2vw, 2rem); }
.mag-opener .breadcrumb { margin-block-end: clamp(1.2rem, 3vw, 2rem); }

.mag-plate {
  position: relative;
  margin: 0 0 clamp(1.8rem, 4vw, 3rem);
  isolation: isolate;
}
.mag-plate picture { display: block; }
.mag-plate img {
  display: block;
  width: 100%;
  height: clamp(340px, 58svh, 620px);
  object-fit: cover;
  object-position: 62% 48%;
}
/* Der Titel liegt im Bild und braucht einen Grund, auf dem er steht —
   keine Platte, sondern ein Verlauf aus der unteren Bildkante. */
.mag-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(9, 28, 31, 0.86) 0%, rgba(9, 28, 31, 0.55) 32%, transparent 68%);
}
.mag-plate-text {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 4vw, 3rem) var(--pad);
  max-width: var(--wrap);
  margin-inline: auto;
}
.mag-eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.mag-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
  max-width: 18ch;
}
.mag-title em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: #a8e07a;
}
/* Der Bildnachweis sitzt an der Bildkante, nicht unter der Abbildung —
   in einer Strecke steht er dort, wo er nicht stört. */
.mag-credit {
  position: absolute;
  z-index: 2;
  top: 0.7rem;
  right: var(--pad);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Vorspann ─────────────────────────────────────────────────────
   Größer als Fließtext, kleiner als der Titel, und die Aktion steht
   daneben statt darunter — so beginnt eine Strecke, nicht ein Formular. */
.mag-lead-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .mag-lead-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.mag-standfirst {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--petrol);
  max-width: 46ch;
}
.mag-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0;
  padding-block-start: 0.35rem;
}

/* ─── Auszug ───────────────────────────────────────────────────────
   Die Stelle, an der die Strecke einmal laut wird. Bewusst ohne
   Anführungszeichen und ohne Kasten — die Größe trägt allein. */
.mag-pullquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--petrol);
  max-width: 15ch;
  text-wrap: balance;
}
.mag-pullquote em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--green-dark);
}
.mag-pullnote {
  margin-block-start: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gray);
  max-width: 34ch;
}

@media (max-width: 860px) {
  .mag-plate img { height: clamp(300px, 52svh, 460px); object-position: 56% 46%; }
  .mag-lead-row { margin-inline-start: 0; }
  .mag-actions { padding-block-start: 0; }
}

/* ═══ FÜR UNTERNEHMEN — Leitstand ════════════════════════════════
   Die Seite wirkte wie eine zweite Bewerberseite: gleicher Bauplan,
   ein Bild rechts, das sich als Wartezimmer las. Beides ist weg.

   Stattdessen zeigt sie, wie ein Bedarf bei uns aussieht — als ein
   Satz, der sich aus den vier Angaben zusammensetzt, die wir für den
   ersten Schritt brauchen. Bewusst KEIN Dashboard: keine Karten, keine
   Status-Farben, keine Kennzahlen. Ein Leitstand ist ruhig; er zeigt
   Zustand, er blinkt nicht.

   Sachlicher als die Bewerberstrecke, aber nicht kalt: die Werte
   stehen in der Displayschrift, die Feldnamen klein darüber. Das ist
   die Umkehrung des Magazinaufmachers — dort trägt das Bild, hier
   trägt die Information. */

.ls-opener { padding-block-end: clamp(2.5rem, 6vw, 4.5rem); }
.ls-label {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--green-dark);
}
.ls-note {
  margin-block-start: clamp(1.2rem, 2.5vw, 1.8rem);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--gray);
  max-width: 46ch;
}
.ls-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.2rem, 2.5vw, 2rem);
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* ═══ ÜBER UNS — Herkunftsstrecke ════════════════════════════════
   Externes Review: "Das Gebäude ist schön. Aber warum? Ich verstehe
   nicht, was es mir erzählen soll." Das Motiv ist entfernt.

   Diese Seite braucht kein Bild, sondern eine Haltung, die trägt.
   Vier Sätze, jeder groß, jeder mit einem knappen Beleg darunter.

   Die Folge wird von oben nach unten leiser: der erste Satz trägt, die
   folgenden ordnen ein. Das ist die dritte eigene Bauform — bei
   Bewerbern trägt das Bild, bei Unternehmen die Information, hier die
   Aussage selbst. */

.uu-creed {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  max-width: 58ch;
}
.uu-creed > li {
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-block-start: 1px solid rgba(24, 60, 63, 0.14);
}
.uu-creed > li:first-child { border-block-start: 0; padding-block-start: 0; }

.uu-creed-line {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--petrol);
  text-wrap: balance;
}
.uu-creed-line em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--green-dark);
}
/* Die Abstufung: der erste Satz ist die Ansage, die folgenden ordnen
   ein. Ohne sie wären es vier gleich laute Claims untereinander —
   genau das Muster, das das Review kritisiert hat. */
/* Die Folge wird leiser, aber der letzte Satz bleibt lesbar. Die
   vorherige Staffel war fuer vier Saetze gerechnet; mit dem fuenften
   (regionale Teams) fiel der letzte auf Fliesstextgroesse. */
.uu-creed > li:nth-child(1) .uu-creed-line { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
.uu-creed > li:nth-child(2) .uu-creed-line { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.uu-creed > li:nth-child(3) .uu-creed-line { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.uu-creed > li:nth-child(n+4) .uu-creed-line { font-size: clamp(1.3rem, 2.3vw, 1.9rem); }

.uu-creed-note {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray);
  max-width: 52ch;
}

@media (max-width: 860px) {
  .uu-creed { margin-inline-start: 0; }
}

/* ═══ STANDORTE — Netz aus echten Orten ══════════════════════════
   Externes Review: "Das Landschaftsbild ist hübsch. Aber es erzählt
   nichts über Standorte." Das Motiv ist entfernt.

   Die Orte tragen sich selbst. Eine durchgehende Achse läuft von Nord
   nach Süd, jeder Ort ist ein Knoten darauf, Hamburg als Zentrale
   markiert. Das ist die Versorgungslinie aus der Startseite in ihrer
   sachlichsten Rolle: sie verbindet reale Orte in belegter Reihenfolge.

   Keine Karte, keine Deutschland-Silhouette, keine Distanzen — die
   Reihenfolge nach Breitengrad ist die einzige Aussage, die stimmt.

   Vierte eigene Bauform: hier trägt die Ordnung. */

.lo-list {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0 0 0 clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
  max-width: 62ch;
}
/* Die Achse. Sie beginnt und endet an den äußersten Orten, nicht an der
   Listenkante — sonst wäre sie eine Rahmenlinie statt einer Verbindung. */
.lo-list::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.9em;
  bottom: 0.9em;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(24, 60, 63, 0.28) 8%, rgba(24, 60, 63, 0.28) 92%, transparent);
}
.lo-list > li {
  position: relative;
  /* Einspaltig, nicht dreispaltig.
     Die bestehende Regel in sections.css legte drei feste Spalten
     (14rem / 1fr / 20rem) — in der schmalen mittleren Spalte brach jede
     Adresse wortweise um ("Goe-thestr. 61, 19053 Schwe-rin"). Auf einer
     Achse liest sich ein Ort ohnehin als Block, nicht als Tabellenzeile. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.25rem !important;
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  border-bottom: 0;
}
/* Trennlinie zwischen den Orten, aber nicht unter dem letzten. */
.lo-list > li + li { border-block-start: 1px solid rgba(24, 60, 63, 0.12); }
/* Der Knoten auf der Achse. */
.lo-list > li::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.6rem, 3vw, 2.4rem) + 1px);
  top: 1.15em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--petrol);
  opacity: 0.5;
}
/* Die Zentrale ist ein offener Ring statt eines Punktes — sichtbar
   anders, ohne eine zweite Farbe einzuführen. */
.lo-list > li:has(.lo-role)::before {
  width: 11px;
  height: 11px;
  left: calc(-1 * clamp(1.6rem, 3vw, 2.4rem) - 2px);
  top: 0.95em;
  background: var(--paper);
  border: 2px solid var(--green-dark);
  opacity: 1;
}

.lo-city {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--petrol);
}
.lo-role {
  margin-inline-start: 0.6ch;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.62em;
  color: var(--green-dark);
  letter-spacing: 0;
}
.lo-addr {
  font-size: 0.9rem;
  color: var(--gray);
}
.lo-reach {
  font-size: 0.9rem;
  color: var(--gray);
}
.lo-reach a {
  color: var(--petrol);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in srgb, var(--petrol) 28%, transparent);
  padding-block-end: 1px;
}
.lo-reach a:hover { border-block-end-color: var(--petrol); }

@media (max-width: 860px) {
  .lo-list { margin-inline-start: 0; }
}

/* ═══ JOBS — Werkzeug statt Tabelle ══════════════════════════════
   Externes Review: die Seite wirkt wie eine Tabelle. Der Grund liegt
   nicht in der Liste, sondern davor: Suche, Filterchips, Demo-Hinweis
   und Ergebniszahl standen als vier gleichrangige Blöcke untereinander,
   bevor die erste Stelle kam.

   Ein Werkzeug hat einen Griff und ein Ergebnis. Der Suchbereich wird
   deshalb als zusammenhängende Einheit gesetzt und durch eine Kante vom
   Ergebnis getrennt — nicht durch eine weitere Überschrift.

   Fünfte Bauform: hier trägt die Funktion. */

.jobs-search-v2 {
  padding-block-end: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 68ch;
}
/* Die Filterchips gehören zum Suchfeld, nicht zur Liste — enger
   Abstand nach oben, deutlicher nach unten. */
.jobs-filter-chips {
  margin-block-start: clamp(0.9rem, 2vw, 1.3rem);
}

/* Ergebnisbereich: eine Kante trennt Werkzeug von Ergebnis — kein
   zweiter Kapitelabstand. Der gemeinsame Rhythmus setzt hier oben und
   unten je bis zu 7rem, was zwischen Filterchips und erster Stelle eine
   Leerflaeche von ueber 200px ergab. Leere ist nicht Ruhe. */
.chapter--jobs-results { padding-block-start: 0 !important; }
.chapter--jobs-page { padding-block-end: clamp(1rem, 2vw, 1.6rem) !important; }
.chapter--jobs-results > .wrap > :first-child { margin-block-start: 0; }

/* Zähler und Demo-Hinweis stehen in einer Zeile statt in zwei Blöcken.
   Beide sind Angaben zum Ergebnis, nicht eigene Abschnitte. */
.jobs-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(0.9rem, 2vw, 1.3rem);
  border-block-start: 1px solid rgba(24, 60, 63, 0.16);
}
.jobs-meta-row .jobs-count,
.jobs-meta-row .jobs-preview-note {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}

/* Die Liste selbst: Beruf zuerst, Ort und Modell als Orientierung, die
   Kondition zurückgenommen. Sie ist eine Angabe, nicht das Argument. */
.jobs-list-v2 { margin-inline-start: var(--text-indent); }

@media (max-width: 860px) {
  .jobs-search-v2,
  .jobs-meta-row,
  .jobs-list-v2 { margin-inline-start: 0; }
}

/* ═══ JOBDETAIL — Stellenakte ════════════════════════════════════
   Die Seite ist bereits eine Akte: Identität, Fakten, Kapitel,
   Bewerbungsweg. Was fehlte, war der Takt — zwischen Kapitelnavigation
   und erstem Faktenblock lagen über 150px Leerfläche, weil der
   gemeinsame Kapitelrhythmus zweimal griff.

   Kein Bild: eine Stellenakte braucht keins, und ein dekoratives würde
   von den Fakten ablenken, die hier die Aufgabe sind. */
.jd2-hero { padding-block-end: clamp(0.8rem, 1.6vw, 1.2rem) !important; }
.jd2-facts { padding-block-start: clamp(1.2rem, 2.4vw, 1.8rem) !important; }

/* ═══ TEXTZOOM 200 % — die zwei offenen Befunde ══════════════════
   Auf 320px mit verdoppelter Schriftgröße behielten Initiativbewerbung
   (32px) und Impressum (6px) horizontalen Overflow.

   Ursache in beiden Fällen: Inhalte, die ihre Mindestbreite aus einem
   langen zusammenhängenden String beziehen — E-Mail-Adressen,
   Paragraphenketten, Formularhinweise. `anywhere` senkt die
   min-content-Breite tatsächlich; `break-word` tut das nicht. */
@media (max-width: 400px) {
  .lg-doc,
  .lg-doc *,
  form,
  form *,
  fieldset,
  legend,
  label,
  .field-hint,
  .form-note { overflow-wrap: anywhere; min-width: 0; }

  /* Definitionslisten in Rechtstexten halten sonst zwei Spalten. */
  .lg-doc dl,
  .lg-doc dt,
  .lg-doc dd { display: block; width: auto; }
}

/* Der Wrap der Formularseite behielt bei 200 % Textzoom auf 320px eine
   Innenbreite von 339px bei 294px verfügbarem Raum — die Ursache liegt
   nicht in einem einzelnen Kind, sondern in der Summe aus Feldbreiten,
   Beschriftungen und Hinweistexten, die alle ihre Mindestbreite halten.
   Ein Grid- oder Flex-Container gibt diese Mindestbreite nur frei, wenn
   man sie ihm ausdrücklich nimmt. */
@media (max-width: 400px) {
  .chapter--form-page .wrap,
  .chapter--form-page .wrap > *,
  .chapter--form-page form,
  .chapter--form-page form > * { min-width: 0; max-width: 100%; }
  .chapter--form-page .wrap { overflow-wrap: anywhere; }
}

/* Der frühere `overflow-x: clip` für die Formularseiten ist entfallen.
   Er begrenzte 19px Überstand bei 320px und 200 % Textzoom, ohne die
   Ursache zu treffen — die lag in der Markerspalte des Kapitelkopfs:
   `--marker-col` rechnet in rem und wächst bei doppelter Schrift auf
   192px, während der Viewport bei 320px bleibt. Die Formularseiten
   bauen ihren Kopf jetzt ohne Markerspalte, damit ist der Überstand
   verschwunden statt abgeschnitten. */

/* Standorte: nach dem Entfernen des Panoramas blieb zwischen Einstieg
   und Ortsliste eine Lücke von zwei vollen Kapitelabständen — das Bild
   hatte sie vorher gefüllt. Die Liste ist der Inhalt dieser Seite, sie
   soll früher beginnen. */
.chapter--info-page:has(+ section .lo-list) { padding-block-end: clamp(0.5rem, 1.2vw, 1rem); }
section:has(> .wrap > .lo-list) { padding-block-start: clamp(1rem, 2.4vw, 1.8rem); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE CONVERSION — die Entscheidung gehört in den ersten Blick

   Gemessen am 05.08.2026: Auf 320×568 lag auf Startseite und
   Bewerberseite KEINE Handlung im ersten Viewport. Die zwei Wege der
   Startseite standen bei 750px und 852px, der Bewerber-CTA bei 687px.
   Auf 390×844 lagen sie am äußersten Rand (833/913 bzw. 799).

   Wer auf dem Telefon nicht sofort zwischen "Job finden" und "Personal
   anfragen" wählen kann, bekommt die Wahl gar nicht.

   Die Korrektur nimmt Höhe, wo sie nichts trägt — Bildband und
   Innenabstände —, nicht Inhalt.
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .auftakt-v2 {
    /* Vorher 120px Kopf + 30svh Bildband + volle Kapitelabstände.
       Das Bildband bleibt als Stimmung, aber es darf die Entscheidung
       nicht aus dem Bild schieben. */
    min-height: auto;
    padding-block-start: calc(96px + 22svh);
    padding-block-end: clamp(2rem, 5vw, 3rem);
  }
  .hero-stage { height: 34svh; }
  .auftakt-v2 .said { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .auftakt-v2 .said-over { margin-block-end: 0.4rem; }
  .auftakt-v2 .auftakt-band { margin-block: 1.1rem; }
  .auftakt-v2 .said-under { margin-block: 1rem; font-size: 1rem; }
  .auftakt-v2 .hero-credit { margin-block-start: 1.4rem; }

  /* Die zwei Wege sind die Entscheidung. Sie stehen enger und tragen
     eine sichtbare Kante — zwei gleiche grüne Buttons wären ein
     KI-UI-Muster und würden die Wahl zur Doppelung machen. */
  .ways-v2 { gap: 0; margin-block-start: 1.2rem; }
  .way-v2 {
    padding-block: 0.85rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.18);
  }
  .way-v2:last-child { border-block-end: 1px solid rgba(255, 255, 255, 0.18); }
  .way-v2 .w-title { font-size: 1.02rem; line-height: 1.25; }
  .way-v2 .w-meta { font-size: 0.72rem; letter-spacing: 0.1em; }
}

@media (max-width: 380px) {
  /* Auf 320px reicht auch das nicht: dort trägt das Bildband nur noch
     als Andeutung, damit die Entscheidung sicher im Bild bleibt. */
  .auftakt-v2 { padding-block-start: calc(88px + 14svh); }
  .hero-stage { height: 24svh; }
  .auftakt-v2 .said { font-size: clamp(2rem, 10.5vw, 2.6rem); }
  .auftakt-v2 .said-under { font-size: 0.94rem; }
  .auftakt-v2 .auftakt-band { margin-block: 0.9rem; }
}

/* ─── Bewerberseite: Aufmacher verdichten ──────────────────────────
   Breadcrumb und Kopfbereich beanspruchten allein 150px, das Bild
   weitere 439px. Titel, Vorspann und Aktion lagen danach außerhalb. */
@media (max-width: 700px) {
  .mag-opener { padding-block-start: 0.5rem; }
  .mag-opener .breadcrumb { margin-block-end: 0.8rem; font-size: 0.8rem; }
  .mag-plate { margin-block-end: 1.2rem; }
  .mag-plate img { height: clamp(210px, 30svh, 300px); }
  .mag-title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .mag-plate-text { padding: 1.1rem var(--pad); }
  .mag-standfirst { font-size: 1.02rem; line-height: 1.45; }
  .mag-lead-row { gap: 1rem; }
  .mag-actions { gap: 0.7rem; }
}

/* Das Reveal-Timing stand hier ein zweites Mal (14px/0.45s) und
   überschrieb die Werte aus style.css (28px/0.7s) allein aufgrund der
   Ladereihenfolge. Zwei Definitionen derselben Klasse an zwei Orten —
   jetzt gibt es genau eine, in style.css, mit --rv-dauer und --rv-stufe
   als Tokens.

   Die Regeln für .story-figure und .page-anchor sind ebenfalls
   entfallen: beide Klassen kommen in keiner erzeugten Seite mehr vor,
   seit die Startseite die Kapitel mit den Bildfiguren verloren hat. */

/* ═══ TYPOGRAFISCHE VARIATION ════════════════════════════════════
   Externes Review: "Fast jede Aussage folgt derselben Formel: Grotesk
   + grüne Serifenkursive + Punkt. Das ist ein starkes Markenelement,
   wird aber so häufig eingesetzt, dass es zur Schablone wird."

   Gemessen: alle sieben Hauptüberschriften bauen identisch.

   Zwei Seiten weichen jetzt ab — ohne neue Schrift, nur mit anderer
   Verwendung der vorhandenen zwei. Die Kopplung "grün heißt kursiv"
   ist damit aufgehoben: Grün kann auch ohne Kursive betonen, und die
   Serife kann auch ohne Grün tragen. */

/* ─── Standorte: ganz Grotesk ──────────────────────────────────────
   Die sachlichste Seite bekommt die sachlichste Schrift. Die Betonung
   bleibt — sie liegt jetzt in der Farbe, nicht in Schnitt und Schrift. */
.chapter--info-page:has(+ section .lo-list) h1 em,
.chapter--info-page:has(~ section .lo-list) h1 em {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--green-dark);
}

/* ─── Über uns: ganz Serife ────────────────────────────────────────
   Die redaktionellste Seite bekommt die redaktionellste Schrift — aber
   aufrecht, nicht kursiv. Eine Haltung wird behauptet, nicht geflüstert. */
/* Die Ueberschrift folgt `.st-h1` wie auf allen Seiten. Vorher war der
   ganze Satz in der Serifenkursive gesetzt — damit trug die Seite ihre
   eine erlaubte Kursive schon in der Ueberschrift auf, und der Kontrast
   zum <em> war weg. */

/* In den Haltungssätzen bleibt die Kursive nur dort, wo sie wirklich
   betont — nicht in jedem der vier Sätze. */
.uu-creed > li:nth-child(2) .uu-creed-line em,
.uu-creed > li:nth-child(3) .uu-creed-line em {
  font-family: var(--font-display);
  font-style: normal;
}

/* ─── Unternehmen: Beispiel und Fortsetzung ────────────────────────
   Externes Review: "Der Beispielsatz kann irrtümlich wie bereits
   ausgefüllte Formulardaten wirken" und "Nach dem CTA fehlt ein
   sichtbarer Grund weiterzuscrollen." */
.ls-example {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-inline-start: 0.4ch;
}
.ls-next {
  margin-block-start: clamp(1.6rem, 3.5vw, 2.4rem);
}
.ls-next a {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  min-height: 44px;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gray);
  text-decoration: none;
}
.ls-next a::after {
  content: '↓';
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.6;
}
.ls-next a:hover { color: var(--petrol); }

/* ─── Kontakt: die zwei Wege sind Aktionen, keine Textzeilen ───────
   Externes Review: "Die beiden Zielgruppenpfade sehen eher wie
   Textzeilen als wie klare Aktionen aus." */
.kt-ways > * {
  display: grid;
  gap: 0.3rem;
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  border-block-start: 1px solid rgba(24, 60, 63, 0.16);
  text-decoration: none;
  min-height: 44px;
}
.kt-ways > *:last-child { border-block-end: 1px solid rgba(24, 60, 63, 0.16); }
.kt-ways a { color: var(--petrol); }
.kt-ways a:hover { background: rgba(113, 191, 68, 0.045); }

@media (max-width: 860px) {
  .ls-next { margin-inline-start: 0; }
}

/* ─── Care Portal: Linien zurück, Umschalter eindeutig ─────────────
   Externes Review: "Die großen Kreislinien konkurrieren mit Inhalt und
   Links" und der Umschalter "wirkt wie ein unvollständiger Segmented
   Control". */
.care-arc-main { opacity: 0.42; }
.care-arc-sub { opacity: 0.14 !important; }
.care-arc-thin { opacity: 0.18 !important; }

.care-audience {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 3px;
}
.care-choose {
  min-height: 44px;
  padding-inline: clamp(0.9rem, 2.5vw, 1.4rem);
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.care-choose[aria-pressed="true"] {
  background: var(--green);
  color: #0e2629;
  font-weight: 500;
}
.care-choose:hover:not([aria-pressed="true"]) { color: #fff; }
.care-choose:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ─── Jobdetail: die Kapitelleiste zeigt, dass sie weitergeht ──────
   Sie scrollt auf 320 und 390px horizontal — korrekt und gewollt, aber
   ohne sichtbaren Hinweis weiß niemand, dass rechts mehr steht. Ein
   Verlauf an der Kante ist die leiseste Lösung: kein Pfeil, kein
   Ornament, nur die Andeutung, dass der Inhalt nicht endet. */
@media (max-width: 700px) {
  .jd2-sr-nav {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  /* Am Ende der Leiste verschwindet die Maske, damit der letzte Eintrag
     nicht dauerhaft angeschnitten bleibt. */
  .jd2-sr-nav:has(a:last-child:focus-visible) {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Die Metaangaben über der Headline auf das Nötige kürzen. */
  .jd2-meta-v3 { font-size: 0.72rem; letter-spacing: 0.06em; }
}

/* ═══ VERBLEIBENDE REVIEW-PUNKTE ═════════════════════════════════ */

/* ─── Jobs: Filterchips mit eindeutigen Zuständen ──────────────────
   Externes Review: "Filterchips sind visuell sehr zurückhaltend;
   aktiver und inaktiver Zustand müssten eindeutig sein."

   Der aktive Zustand war bereits grün gefüllt — das Problem lag beim
   inaktiven: transparent auf transparentem Grund mit einer 20%-Linie
   liest sich nicht als Schaltfläche. */
.jobs-filter-chips button {
  background: var(--white);
  border-color: rgba(24, 60, 63, 0.34);
  color: var(--petrol);
  /* 44px, nicht 40: 40 war gegen die falsche Schwelle geprueft. Die
     sichtbare Pillenform bleibt kompakt, die Trefferflaeche gehoert
     eindeutig zum Element und ueberlappt keine Nachbarn — der
     Zeilenabstand der Chipreihe traegt sie mit. */
  min-height: 44px;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.jobs-filter-chips button:hover:not([aria-pressed="true"]) {
  border-color: var(--green-dark);
  background: rgba(113, 191, 68, 0.07);
}
.jobs-filter-chips button:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}
/* Aktiv bleibt gefüllt, bekommt aber zusätzlich Gewicht — Farbe allein
   ist kein ausreichendes Unterscheidungsmerkmal. */
.jobs-filter-chips button[aria-pressed="true"] {
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ─── Standorte: Sprungleiste ──────────────────────────────────────
   Acht Orte sind auf dem Telefon eine lange Strecke ohne Übersicht.
   Die Leiste zeigt alle auf einen Blick und springt zum gewählten. */
/* Die Ortsleiste ist der Kompass der Nord-Süd-Reise: sie bleibt unter dem
   Header stehen (sticky) und markiert per Scrollspy (js/motion.js) den Ort,
   bei dem der Leser gerade ist. Einzeilig und seitlich scrollbar, damit sie
   auf dem Telefon nur eine Zeile Höhe kostet und nichts verdeckt. Ohne
   JavaScript: normale Sprungleiste ohne Markierung. */
.lo-jump {
  position: sticky;
  top: 81px;                /* Höhe des sticky .site-header */
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0.4rem 0.5rem;
  margin-block-end: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-block: 0.55rem clamp(0.7rem, 1.5vw, 0.9rem);
  border-block-end: 1px solid rgba(24, 60, 63, 0.14);
  background: var(--paper);
}
.lo-jump::-webkit-scrollbar { display: none; }
.lo-jump a { flex: none; }
.lo-jump a[aria-current] {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: var(--white);
}
.lo-jump a {
  display: inline-flex;
  align-items: center;
  /* 44px, nicht 40: gemessen lagen alle acht Sprunglinks unter der
     Mindest-Trefferflaeche. Auf dem Telefon ist diese Leiste der
     Haupteinstieg in die Ortsliste — sie muss sicher treffbar sein. */
  min-height: 44px;
  padding-inline: 0.75rem;
  border: 1px solid rgba(24, 60, 63, 0.26);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--petrol);
  text-decoration: none;
  background: var(--white);
}
.lo-jump a:hover { border-color: var(--green-dark); background: rgba(113,191,68,0.07); }
.lo-jump a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
/* Der Sprung landet nicht unter der Kopfleiste. */
.lo-list .lo-city { scroll-margin-block-start: 100px; }

/* ─── Startseite: die rote Markierung im Schichtband erklären ──────
   Externes Review: "Die rote Bedeutung im Schichtband ist nicht
   unmittelbar verständlich." Die Legende sagte nur "— offen", ohne
   Bezug zur Farbe. */
.gap-swatch {
  display: inline-block;
  width: 12px;
  height: 7px;
  margin-inline-end: 0.5ch;
  border-radius: 1px;
  background: #c8452f;
  vertical-align: baseline;
}

/* ─── CTA-System: die dritte Stufe ─────────────────────────────────
   Externes Review: "Fast alle Hauptaktionen sind derselbe grüne
   Pillenbutton. Sekundäraktionen erscheinen häufig als kleine, weit
   entfernte Textlinks. Damit fehlen Zwischenstufen."

   Es gibt jetzt drei Stufen:
     .btn-primary   der eine Vollbutton je Bildschirm
     .cta-inline    die lokale Abschnittsaktion — Text mit Kante, kein
                    Button, aber klar als Aktion erkennbar
     .action-line   die redaktionelle Textzeile
   Der Sticky-CTA der Stellenakte bleibt der Sonderfall für den
   transaktionalen Mobilfluss. */
.cta-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.55ch;
  min-height: 44px;
  padding-inline: 0.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--petrol);
  text-decoration: none;
  border-block-end: 1px solid var(--green-dark);
  padding-block-end: 2px;
}
.cta-inline::after {
  content: '→';
  font-size: 0.9em;
  color: var(--green-dark);
  transition: transform 0.18s var(--ease);
}
.cta-inline:hover::after { transform: translateX(3px); }
.cta-inline:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }

@media (max-width: 860px) {
  .lo-jump { margin-inline-start: 0; }
}

/* Der Kontakt-Vertrauensanker (.kt-promise) ist am 05.08.2026 NICHT
   entstanden: das Einfuegeskript suchte `<p class="kt-direct">`, im
   Markup steht aber `<div class="kt-direct">`. Das HTML blieb deshalb
   unveraendert, waehrend hier bereits Regeln standen — totes CSS fuer
   eine Klasse, die es nicht gibt. Entfernt.

   Der Review-Punkt "Kontaktseite braucht einen Vertrauensanker" bleibt
   damit offen und ist als solcher dokumentiert. */

/* Die Legendenzeile des Schichtbands: das Farbfeld trägt die Farbe, der
   Text bleibt hell und lesbar. Vorher stand die Erklärung selbst in Rot
   auf Dunkelgrün — inhaltlich richtig, aber mit zu wenig Kontrast für
   Mikrotypografie. Kein zusätzlicher Kasten, das Raster bleibt. */
.auftakt-v2 .shiftband-legend .gap-note {
  color: rgba(255, 255, 255, 0.72) !important;
  display: inline-flex;
  align-items: center;
}