/* ============================================================
   r12-karriere.css, Gestaltungsrunde 12.10.2026, Paket „Karriere“
   Aufgaben aus der Anpassungsliste des Teams: K01 eigener Kopf mit Rückweg, K02 Unterleiste und Unterseiten raus, K03 Initiativbewerbung raus, K04 Arbeitsmodelle, K05 Hero-Bild, K06 Satz oben, K07 Bewerbungsformular, K08 Karriere wirkt klein.

   Eingebunden von quelle/bauen.py (R12_PAKETE) auf allen Seiten von karriere.physiopark.berlin (KARRIERE_R12, Stempel KARRIERE_V), nach allen
   bestehenden Dateien, mit ?v=-Stempel (STEMPEL_DATEIEN).
   Nur dieses Paket schreibt in diese Datei. Gemeinsame Bauteile
   (bauteile.css/js, bewegung.css/js, seiten.css) zuerst wiederverwenden;
   Mockup Brandkit 15.png ist verbindlich. Skripte nie inline (CSP),
   prefers-reduced-motion respektieren.
   Leer ausgeliefert vom Strukturpaket A, 12.10.2026.
   ============================================================ */

/* ============================================================
   B1  K01 EIGENER KOPF DER KARRIERE (Strukturpaket B, 12.10.2026)
   Vorbild karriere.ambulant-physio.de: Marke, Weg zurück zur Website,
   Knopf. Kein Hauptmenü, keine Unterleiste, kein Burger
   (bauen.py karriere_kopf_bauen). Der Knopf „Jetzt bewerben“ behält
   Form und Farbe aus seiten.css V1 (.kopf-karriere.kopf-bewerben).
   Handy: Logo, „Website“, „Bewerben“ auf einer Mittellinie; unter
   380 px wird der Rückweg zum Pfeilkreis (aria-label bleibt voll).
   ============================================================ */
.site-header-karriere .header-inner { gap: var(--m6); }
.karriere-marke {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.karriere-marke-wort {
  padding-left: 14px;
  border-left: 1.5px solid var(--linie-stark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  line-height: 1;
  white-space: nowrap;
}
.karriere-kopf-nav { margin-left: auto; display: flex; align-items: center; }
.kopf-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
  background: rgba(255, 255, 255, .7);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--zeit-tipp) linear, background var(--zeit-tipp) linear, color var(--zeit-tipp) linear;
}
.kopf-zurueck-pfeil { width: 17px; height: 17px; flex: none; transition: transform var(--zeit-wechsel) var(--kurve-aus); }
.kopf-zurueck:hover { border-color: var(--gruen-dunkel); background: #fff; color: var(--gruen-link); }
.kopf-zurueck:hover .kopf-zurueck-pfeil { transform: translateX(-3px); }
.kopf-zurueck:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 3px; }
.site-header-karriere .kopf-bewerben { margin-left: 0; }

@media (max-width: 960px) {
  .site-header-karriere .header-inner { gap: var(--m3); }
  .karriere-marke { gap: 10px; }
  .karriere-marke-wort { padding-left: 10px; font-size: .72rem; letter-spacing: .12em; }
  .kopf-zurueck { min-height: 40px; padding: 0 12px 0 9px; font-size: .72rem; gap: 6px; }
  .site-header-karriere .kopf-bewerben { min-height: 40px; justify-content: center; }
}
/* Bis 520 px steht „Karriere“ klein unter dem Logo statt daneben: Logo,
   Rückweg und Knopf passen sonst bei 390 px nicht auf eine Linie
   (gemessen 12.10.2026: 448 px breit). */
@media (max-width: 520px) {
  .kopf-zur { display: none; }
  .karriere-marke { flex-direction: column; align-items: flex-start; gap: 3px; }
  .karriere-marke-wort {
    padding-left: 0;
    border-left: 0;
    font-size: .6rem;
    letter-spacing: .22em;
  }
  .site-header-karriere .header-logo img { height: 34px; }
}
/* Unter 380 px: Pfeilkreis statt Wort, sonst ragt der Kopf bei 320 px
   über das Fenster */
@media (max-width: 379px) {
  .kopf-zurueck { width: 40px; padding: 0; justify-content: center; }
  .kopf-zurueck-wort { display: none; }
}
@media (max-width: 340px) {
  .site-header-karriere .header-logo img { height: 31px; }
  .site-header-karriere .header-inner { gap: var(--m2); }
}
@media (prefers-reduced-motion: reduce) {
  .kopf-zurueck, .kopf-zurueck-pfeil { transition: none; }
  .kopf-zurueck:hover .kopf-zurueck-pfeil { transform: none; }
}

/* ============================================================
   B2  K02/K04 STARTSEITE: Arbeitsmodelle, Gehalt und Leistungen
   ============================================================ */
/* Fehlt-Schild unter dem grünen Slider (nur Vorschau) */
#arbeitsmodelle .slider-balken + p { margin-top: var(--m6); }

/* Gehalt und Leistungen: Kopf und Bild links, Aufklappliste rechts, oben bündig */
.split-oben { align-items: start; }
#gehalt .split-bild { margin-top: var(--m8); }
#gehalt .split-bild img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
#gehalt .aufklapp-inhalt .haken-liste { margin: var(--m2) 0 var(--m4); }
#gehalt .aufklapp-inhalt p + p { margin-top: var(--m4); }
@media (max-width: 960px) {
  #gehalt > .split { row-gap: var(--m8); }
  #gehalt .split-bild { margin-top: var(--m6); }
  #gehalt .split-bild img { aspect-ratio: 16 / 10; }
}

/* Praktikum: Text und Bild, darunter vier Karten als Wischreihe.
   Am Handy flaches Bild, sonst wäre der Abschnitt 1,8 Bildschirmhöhen
   lang (gemessen 12.10.2026, Agenturregel „bündeln statt stapeln“). */
#praktikum .btn-reihe { margin-top: var(--m8); }
/* Kopfbild flacher, die vier Bildkarten darunter tragen jetzt mit (K08) */
@media (min-width: 961px) {
  #praktikum .praktikum-kopf { align-items: center; }
  #praktikum .split-bild img { aspect-ratio: 5 / 4; object-position: 50% 35%; }
}
@media (max-width: 960px) {
  #praktikum .split-bild img { aspect-ratio: 16 / 10; object-position: 50% 40%; }
}

/* Stimmen und Belege als Wischreihe: ohne scroll-padding schnappte Chrome
   die erste Karte an den Fensterrand (gemessen 12.10.2026 bei 390 px:
   Karte bei x = 0 statt am Seitenrand) */
@media (max-width: 760px) {
  .stimmen-reihe.wisch, .belegzeile.wisch { scroll-padding-inline: var(--m6); }
}

/* ============================================================
   GESTALTUNGSPAKET KARRIERE (12.10.2026): K05, K07, K08, G12 bis G15
   Alles hier gilt nur auf karriere.physiopark.berlin (die Datei lädt
   nirgends sonst). Seitenbezogenes hängt an body[data-seite]. Formen nur
   aus dem Mockup (Brandkit 15.png): Fotokarte, Pille mit Orangepunkt,
   dunkelgrüne Schrittkarte mit Pille auf der Kante, Pfeilkreis,
   Fortschrittslinie.

     K1  Bühne der Startseite (K05): Teamfoto im 5:4-Rahmen, nichts beschnitten
     K2  Stellenkarten: Foto, Pille auf dem Foto, gleiche Zeilen (G13)
     K3  Arbeitsorte als Fotokarten (G14)
     K4  Arbeitsmodelle: Modellname groß
     K5  Praktikum: Karten mit Bild (G14), Stimmen mit Teamfoto
     K6  Zeitleiste: Schrittkarten leuchten beim Scrollen auf (G12)
     K8  Bewerben: Gesicht neben dem Formular
     K9  Stellenseiten: Bühnenbild am Handy ohne Kopfschnitt
   Das Formular (K07) steht in karriere.css F1.
   ============================================================ */

/* ---------- K1  Bühne der Startseite (K05) ----------
   Das Foto ist 5:4 (1200 × 960). Im 4:5-Rahmen der übrigen Bühnen
   fielen die beiden Außenpersonen halb heraus, deshalb hier ein
   Querrahmen in Bildformat: keine Person, kein Kopf beschnitten.
   Pille und H1 bleiben, wo sie auf allen Bühnen stehen (gleiche
   Polsterung, Text oben). */
body[data-seite="/"] .seite-hero.buehne .buehne-rahmen {
  aspect-ratio: 5 / 4;
  border-radius: var(--bogen-gross);
  box-shadow: 0 24px 60px rgba(51, 83, 10, .20);
}
body[data-seite="/"] .seite-hero.buehne .buehne-rahmen img { object-position: 50% 50%; }
@media (min-width: 961px) {
  body[data-seite="/"] .seite-hero.buehne .seite-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(40px, 4vw, 56px);
  }
}
@media (max-width: 960px) {
  body[data-seite="/"] .seite-hero.buehne .buehne-bild { max-width: none; }
  body[data-seite="/"] .seite-hero.buehne:has(.eckdaten) .buehne-rahmen { aspect-ratio: 5 / 4; }
}

/* ---------- K2  Stellenkarten (Start und „Weitere offene Stellen“) ----------
   Foto oben, Pille „● 01“ auf dem Foto, darunter Titel, Ort und Umfang,
   Satz, unten der Pfeilkreis. Ab 761 px stehen Titel, Eckzeile, Satz und
   Verweis aller Karten einer Reihe auf gleicher Höhe (Unterraster). */
.stellen-reihe .weg-karte.mit-bild {
  padding: 0 var(--m6) var(--m6);
  gap: var(--m2);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
}
.stellen-reihe .weg-karte-bild {
  aspect-ratio: 5 / 4;
  object-position: 50% 30%;
  margin-bottom: var(--m4);
}
.stellen-reihe .weg-karte.mit-bild > .badge {
  position: absolute;
  top: var(--m4);
  left: var(--m4);
  margin: 0;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .18);
}
.stellen-reihe .weg-karte h3 { font-size: 1.24rem; margin: 0; }
.stellen-reihe .weg-karte h3 + p {
  font-size: .86rem;
  line-height: 1.45;
  color: var(--gruen-link);
}
.stellen-reihe .weg-karte h3 + p strong { color: var(--gruen-link); }
.stellen-reihe .weg-karte .weiter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--m3);
  padding-top: var(--m4);
  border-top: 1px solid var(--linie);
  color: var(--gruen-link);
}
/* Pfeilkreis aus dem Mockup statt der Linie */
.stellen-reihe .weg-karte .weiter::after {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--gruen-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--zeit-wechsel) var(--kurve-aus), background-color var(--zeit-wechsel) linear;
}
.stellen-reihe .weg-karte:hover .weiter::after,
.stellen-reihe .weg-karte:focus-visible .weiter::after {
  width: 40px;
  background-color: var(--orange-aktion);
  transform: translateX(3px);
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .stellen-reihe { grid-auto-rows: auto; }
    .stellen-reihe .weg-karte.mit-bild {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: var(--m2);
    }
    .stellen-reihe .weg-karte .weiter { align-self: end; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .stellen-reihe .weg-karte .weiter::after { transition: none; }
  .stellen-reihe .weg-karte:hover .weiter::after { transform: none; }
}

/* ---------- K3  Arbeitsorte als Fotokarten (G14) ---------- */
.orte-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m8);
}
.ort-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  overflow: hidden;
  box-shadow: var(--schatten-1);
}
.ort-bild { position: relative; }
.ort-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
}
.ort-bild .badge {
  position: absolute;
  left: var(--m5);
  bottom: var(--m5);
  margin: 0;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .18);
}
.ort-text { padding: var(--m8) var(--m8) var(--m6); }
.ort-text h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin-bottom: var(--m4);
}
.ort-text .haken-liste li { font-size: .98rem; }
@media (max-width: 760px) {
  .orte-paar.wisch {
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 340px);
    grid-template-columns: none;
    gap: var(--m4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--m6);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--m6));
    padding: 4px var(--m6) 14px;
  }
  .orte-paar.wisch::-webkit-scrollbar { display: none; }
  .orte-paar.wisch > * { scroll-snap-align: start; min-width: 0; }
  .ort-bild img { aspect-ratio: 4 / 3; }
  .ort-bild .badge { left: var(--m4); bottom: var(--m4); }
  .ort-text { padding: var(--m5) var(--m5) var(--m4); }
  .ort-text h3 { margin-bottom: var(--m3); }
  .ort-text .haken-liste li { font-size: .92rem; }
}

/* ---------- K4  Arbeitsmodelle: der Modellname trägt die Karte ---------- */
#arbeitsmodelle .v-karte { min-height: 250px; padding: var(--m6) var(--m6) var(--m8); }
#arbeitsmodelle .v-karte h3 { margin: var(--m2) 0 var(--m4); }
.modell-vor {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gruen-link);
}
.modell-wort {
  display: block;
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.4vw + 1.1rem, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--gruen-dunkel);
  text-transform: uppercase;
}
#arbeitsmodelle .v-karte p { font-size: 1rem; }
@media (max-width: 760px) {
  #arbeitsmodelle .v-karte { min-height: 220px; }
}

/* ---------- K5  Praktikum: Karten mit Bild (G13, G14) ----------
   Gleiche Form wie die Stellenkarten: Foto oben, Pille auf dem Foto. */
#praktikum .zusagen.bild-karten {
  background: none;
  border: 0;
  border-radius: 0;
}
@media (min-width: 761px) {
  #praktikum .zusagen.bild-karten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--m6);
    overflow: visible;
  }
}
.bild-karten .zusage.mit-bild {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--m6) var(--m6);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--schatten-1);
}
.bild-karten .zusage-bild {
  display: block;
  width: calc(100% + 2 * var(--m6));
  max-width: none;
  margin: 0 calc(-1 * var(--m6)) var(--m5);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bild-karten .zusage.mit-bild > .badge {
  position: absolute;
  top: var(--m4);
  left: var(--m4);
  margin: 0;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .18);
}
.bild-karten .zusage h3 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  margin-bottom: var(--m2);
}
@media (max-width: 960px) and (min-width: 761px) {
  #praktikum .zusagen.bild-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bild-karten .zusage.mit-bild { padding: 0 var(--m5) var(--m5); }
  .bild-karten .zusage-bild { width: calc(100% + 2 * var(--m5)); margin: 0 calc(-1 * var(--m5)) var(--m4); }
  #praktikum .zusagen.wisch > .zusage { border-radius: var(--bogen-gross); }
}

/* Stimmen: Kopf neben dem Teamfoto, Zitate als Karten mit großem
   Anführungszeichen (Mockup „Echte Einblicke“: Zitatkarte mit „99“) */
.stimmen-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--m12);
  align-items: center;
  margin-bottom: var(--m12);
}
.stimmen-kopf .abschnitt-kopf { margin-bottom: 0; }
.stimmen-bild { margin: 0; }
.stimmen-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-2);
}
#stimmen .stimme {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--m12) var(--m8) var(--m6);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
}
#stimmen .stimme::before {
  content: "\201D";
  position: absolute;
  top: 14px;
  left: var(--m8);
  height: 40px;
  overflow: hidden;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 4.4rem;
  line-height: .9;
  color: var(--gruen);
}
#stimmen .stimme blockquote { font-size: 1.12rem; }
#stimmen .stimme figcaption {
  margin-top: auto;
  padding-top: var(--m5);
  display: flex;
  align-items: center;
  gap: 10px;
}
#stimmen .stimme figcaption::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}
@media (max-width: 960px) {
  .stimmen-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--m6); margin-bottom: var(--m8); }
}
@media (max-width: 760px) {
  #stimmen .stimme { padding: var(--m10) var(--m5) var(--m5); }
  #stimmen .stimme::before { left: var(--m5); top: 10px; font-size: 4rem; }
  #stimmen .stimme blockquote { font-size: 1.04rem; }
}

/* ---------- K6  Zeitleiste (G12) ----------
   Die dunkelgrünen Schrittkarten aus dem Mockup in Ablaufrichtung, mit
   Verbindungslinie zwischen den Pillen. Mit Skript (r12-karriere.js Z,
   Klasse .zl-an) stehen die Karten zuerst hell und leuchten beim Scrollen
   der Reihe nach grün auf, die Linie zur nächsten Station füllt sich.
   Ohne Skript, bei reduzierter Bewegung und im Druck: alle grün.
   Rechner: eine Reihe bis fünf Stationen, sechs als 3 + 3.
   Handy: untereinander, die Linie läuft senkrecht von Karte zu Karte. */
.zeitleiste {
  --zl-luecke: var(--m10);
  counter-reset: none;
  column-gap: var(--zl-luecke);
}
.zeitleiste > .schritt-karte {
  transition: background-color 520ms var(--kurve-aus), color 520ms var(--kurve-aus),
              border-color 520ms linear, box-shadow 520ms var(--kurve-aus);
}
/* Verbindung zur nächsten Station */
.zeitleiste > .schritt-karte:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: calc(100% + var(--zl-luecke));
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gruen-dunkel) 50%, var(--linie-stark) 50%) right / 200% 100% no-repeat;
  transition: background-position 700ms var(--kurve-weich);
}
.zeitleiste > .schritt-karte.zl-weiter::after,
html:not(.zl-an) .zeitleiste > .schritt-karte::after { background-position: left; }
.zeitleiste > .schritt-karte { isolation: auto; }
.zeitleiste { position: relative; z-index: 0; }
@media (min-width: 961px) {
  .zeitleiste:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .zeitleiste:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zeitleiste:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Reihenende: keine Linie aus dem Raster hinaus */
  .zeitleiste:has(> li:nth-child(6):last-child) > li:nth-child(3)::after { display: none; }
  .zeitleiste:has(> li:nth-child(5):last-child) > .schritt-karte { padding-inline: var(--m5); }
  .zeitleiste:has(> li:nth-child(5):last-child) .schritt-karte h3 { font-size: 1.05rem; hyphens: manual; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .zeitleiste > li:nth-child(2n)::after { display: none; }
}
@media (max-width: 760px) {
  .zeitleiste {
    --zl-luecke: var(--m10);
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--zl-luecke) + 8px);
    padding-top: 26px;
  }
  .zeitleiste > .schritt-karte { padding: var(--m10) var(--m6) var(--m6); }
  .zeitleiste > .schritt-karte:not(:last-child)::after {
    top: 100%;
    left: 50%;
    width: 3px;
    height: calc(var(--zl-luecke) + 8px);
    margin: 0 0 0 -1.5px;
    background: linear-gradient(180deg, var(--gruen-dunkel) 50%, var(--linie-stark) 50%) bottom / 100% 200% no-repeat;
  }
  .zeitleiste > .schritt-karte.zl-weiter::after,
  html:not(.zl-an) .zeitleiste > .schritt-karte::after { background-position: top; }
}
/* Vor dem Aufleuchten: helle Karte, grüner Rahmen, dunkle Schrift
   (lesbar, nur noch nicht „erreicht“) */
html.zl-an .zeitleiste > .schritt-karte:not(.zl-da) {
  background: #fff;
  border-color: var(--linie-stark);
  box-shadow: none;
}
html.zl-an .zeitleiste > .schritt-karte:not(.zl-da) :is(h3, p) { color: var(--tinte); }
html.zl-an .zeitleiste > .schritt-karte:not(.zl-da) .schritt-nummer { border-color: var(--linie-stark); }
html.zl-an .zeitleiste > .schritt-karte :is(h3, p) { transition: color 520ms var(--kurve-aus); }
@media (prefers-reduced-motion: reduce) {
  .zeitleiste > .schritt-karte, .zeitleiste > .schritt-karte::after { transition: none; }
}
@media print {
  html.zl-an .zeitleiste > .schritt-karte:is(:not(.zl-da), .zl-da) { background: var(--gruen-dunkel); }
}

/* ---------- K8  Bewerben: ein Gesicht neben dem Formular ---------- */
.bewerben-gesicht {
  margin: var(--m8) 0 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--m5);
  align-items: center;
  max-width: 440px;
  padding: var(--m4);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
}
.bewerben-gesicht img {
  display: block;
  width: 112px;
  height: 140px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--bogen-karte);
}
.bewerben-gesicht figcaption { font-size: .92rem; line-height: 1.5; color: var(--tinte-weich); }
.bewerben-gesicht strong { display: block; font-family: var(--font-head); color: var(--tinte); font-size: 1rem; }
@media (max-width: 980px) {
  .bewerben-gesicht { margin-top: var(--m6); grid-template-columns: 76px minmax(0, 1fr); gap: var(--m4); padding: var(--m3); }
  /* R21: Porträt 4:5 mit Luft über dem Kopf; im Kreis oben ansetzen, damit
     der Kopf ganz drin bleibt. */
  .bewerben-gesicht img { width: 76px; height: 76px; border-radius: 50%; object-position: 50% 8%; }
}

/* ---------- K9  Stellenseiten: Bühnenbild am Handy ---------- */
@media (max-width: 760px) {
  body[data-seite^="/stellen/"] .seite-hero.buehne:has(.eckdaten) .buehne-rahmen { aspect-ratio: 4 / 3; }
  body[data-seite^="/stellen/"] .seite-hero.buehne .buehne-rahmen img { object-position: 50% 18%; }
}
.zeitleiste + p { margin-top: var(--m6); }
/* Beim Zusammenführen mit Paket Global (12.10.2026): In fünf Spalten brach
   „E-Mail“ bei 1440 px am Bindestrich (Befund Global B8). Die Zeitleiste
   bleibt einreihig, das Wort bleibt zusammen. */
.zeitleiste .zl-wort { white-space: nowrap; }

/* ---------- K10  Stellenseiten „Das bekommst Du“ (G13, G14) ----------
   Seit der Handyprüfung 12.10.2026 Fotokarten wie die Praktikumskarten
   (K5 .bild-karten): Bild oben, Nummer als Pille auf dem Bild, Titel,
   Satz. Vorher hellgrüne Textkarten mit großer Nummer, ohne Bild. */
.zusagen.bild-karten { background: none; border: 0; border-radius: 0; }
@media (min-width: 761px) {
  body[data-seite^="/stellen/"] #leistungen .zusagen.bild-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--m6);
    overflow: visible;
  }
}
@media (max-width: 760px) {
  .zusagen.bild-karten.wisch > .zusage { border-radius: var(--bogen-gross); }
}

/* Zeitleiste am Handy etwas dichter: sechs Stationen „Dein Tag“ */
@media (max-width: 760px) {
  .zeitleiste { --zl-luecke: var(--m8); }
  .zeitleiste > .schritt-karte { padding: var(--m8) var(--m5) var(--m5); }
  .zeitleiste .schritt-karte h3 { margin-bottom: var(--m2); }
}

/* Belege auf der Startseite: Urkunde und Siegel größer (K08) */
body[data-seite="/"] #belege .belegzeile li { padding: var(--m5) var(--m6); gap: var(--m5); }
body[data-seite="/"] #belege .belegzeile img { width: 76px; border-radius: 8px; }

/* ============================================================
   H  HANDYPRÜFUNG 12.10.2026 (Befunde Karriere bei 390 und 1440 px)
     H1  Arbeitsmodelle als Fotokarten (G14), am Rechner alle vier im Raster
     H3  Zeitleiste: nur die aktuelle Station grün, Handy links bündig, Bildanker
     H4  Schlanker Fuß der Karriere (G10, bauen.py karriere_fuss_bauen)
     H5  Knopf „nach oben“ nicht über dem Formular, hell auf Dunkelgrün
     H6  Kontaktschritt: Ablagefläche für den Lebenslauf, Zwischenzeile (K07)
     H7  Belege als gleiche Bildkarten (G13)
     H8  Gehalt und Leistungen als Umschalter mit Bild je Thema
     H9  Ablauf im Formularblock der Stellenseiten (dieselben Schrittkarten)
     H10 Kopfknopf der Stellenseiten erst nach der Bühne, nur ab 761 px
     H11 Verweis mit Pfeilkreis statt Linie
     H12 Kleinteile: Quellenzeile, Stellenkarten-Meta, Zeitspannen,
         Bildstreifen der Funnelseiten am Handy
   ============================================================ */

/* ---------- H1  Arbeitsmodelle als Fotokarten ---------- */
#arbeitsmodelle .v-karte.mit-bild {
  min-height: 0;
  padding: 0 0 var(--m6);
  overflow: hidden;
}
.v-karte-bild {
  position: relative;
  align-self: stretch;
  margin-bottom: var(--m5);
  overflow: hidden;
}
.v-karte-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms var(--kurve-aus);
}
.v-karte-bild .badge {
  position: absolute;
  top: var(--m4);
  left: var(--m4);
  margin: 0;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .22);
}
#arbeitsmodelle .v-karte.mit-bild > :is(h3, p) { padding-inline: var(--m6); }
#arbeitsmodelle .v-karte.mit-bild h3 { margin: 0 0 var(--m3); }
@media (hover: hover) {
  #arbeitsmodelle .v-karte.mit-bild:hover .v-karte-bild img { transform: scale(1.04); }
}
/* Am Rechner passten 3,4 Karten, die vierte war am Containerrand hart
   abgeschnitten („FAMIL / BALA“). Ab 1200 px stehen alle vier, Pfeile und
   Linie entfallen von selbst (bewegung.js W5b, .ohne-blaettern). */
@media (min-width: 1200px) {
  #arbeitsmodelle .v-karte { flex-basis: calc((100% - 3 * var(--m6)) / 4); }
}
@media (max-width: 760px) {
  #arbeitsmodelle .v-karte.mit-bild > :is(h3, p) { padding-inline: var(--m5); }
  #arbeitsmodelle .modell-wort { font-size: 1.6rem; }
}

/* ---------- H3  Zeitleiste ---------- */
/* Erreicht, aber nicht mehr aktuell: hell mit grünem Rand */
html.zl-an .zeitleiste > .schritt-karte.zl-da:not(.zl-jetzt) {
  background: #fff;
  border-color: var(--gruen);
  box-shadow: none;
}
html.zl-an .zeitleiste > .schritt-karte.zl-da:not(.zl-jetzt) :is(h3, p) { color: var(--tinte); }
/* Bildanker: nur in der einspaltigen Zeitleiste (bis 960 px). Am Rechner
   stünde eine Karte mit Bild in der Reihe höher als die übrigen. */
.zeitleiste .schritt-bild { display: none; }
@media (max-width: 760px) {
  .zeitleiste > .schritt-karte { text-align: left; }
  .zeitleiste > .schritt-karte .schritt-nummer { left: var(--m5); transform: translateY(-50%); }
  .zeitleiste > .schritt-karte:not(:last-child)::after { left: calc(var(--m5) + 44px); }
  .zeitleiste > .schritt-karte.mit-bild { padding-top: 0; }
  .zeitleiste .schritt-bild {
    display: block;
    width: calc(100% + 2 * var(--m5));
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 calc(-1 * var(--m5)) var(--m6);
    border-radius: calc(var(--bogen-karte) - 2px) calc(var(--bogen-karte) - 2px) 0 0;
  }
}

/* ---------- H4  Fuß der Karriere ---------- */
/* 22.10.2026 (Rückmeldung-4): drei Spalten, „Unsere Praxen“ ist entfallen */
.footer-grid.footer-karriere {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--m10);
}
.footer-karriere .footer-spalte-karriere .footer-hotline { margin-top: var(--m5); }
.footer-praxis-zeile { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--m4) !important; }
.footer-praxis-zeile .footer-praxis-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.footer-praxis-zeile .footer-praxis-name:hover { text-decoration: underline; }
.footer-karriere .footer-marke .footer-logo img { height: 46px; }
.footer-karriere .footer-claim { font-size: .88rem; }
@media (max-width: 1099px) {
  .footer-grid.footer-karriere { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m8) var(--m6); }
}
@media (max-width: 760px) {
  /* Karriere zuerst über die ganze Breite, dann Praxen und Websites
     nebeneinander, die Marke zuletzt und klein */
  .footer-grid.footer-karriere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m6) var(--m5); }
  .footer-karriere .footer-spalte-karriere { grid-column: 1 / -1; }
  .footer-karriere > .footer-spalte:not(.footer-spalte-karriere) { grid-column: 1 / -1; }
  .footer-karriere .footer-spalte-karriere .footer-nav { gap: 8px; }
  .footer-karriere .footer-marke {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--m2) var(--m5);
    align-items: center;
    padding-top: var(--m5);
    border-top: 1px solid rgba(51, 83, 10, .2);
  }
  .footer-karriere .footer-marke .footer-logo img { height: 38px; margin: 0; }
  .footer-karriere .footer-claim { margin: 0; font-size: .82rem; }
  .footer-karriere .footer-verwaltung { grid-column: 1 / -1; margin-top: var(--m2); font-size: .86rem; }
  .site-footer-karriere { padding-top: var(--m12); }
  .site-footer-karriere .footer-schluss { margin-top: var(--m8); }
}

/* ---------- H5  Knopf „nach oben“ ---------- */
html.oben-weg .nach-oben { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); }
html.oben-hell .nach-oben { background: #fff; color: var(--gruen-dunkel); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
html.oben-hell .nach-oben:hover { background: #F1F8E4; }

/* ---------- H6  Kontaktschritt ---------- */
.formfeld-trenner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 2px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
}
.formfeld-trenner::before,
.formfeld-trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie-stark); }
.formfeld-trenner::before { flex: 0 0 18px; }
.datei-titel {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .86rem;
  color: var(--tinte);
}
/* Das Dateifeld bleibt fokussier- und bedienbar, sichtbar ist die Fläche */
html.js .funnel-karte .datei-eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
html:not(.js) .datei-flaeche .datei-zeichen,
html:not(.js) .datei-flaeche .datei-worte { display: none; }
html.js .datei-flaeche {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 14px 18px;
  border: 2px dashed var(--linie-stark);
  border-radius: 16px;
  background: var(--papier-warm);
  cursor: pointer;
  transition: border-color var(--zeit-tipp) linear, background-color var(--zeit-tipp) linear;
}
html.js .datei-flaeche:hover { border-color: var(--gruen); background: #F3F9E8; }
.datei-flaeche:has(.datei-eingabe:focus-visible) {
  outline: 2px solid var(--gruen-dunkel);
  outline-offset: 2px;
  border-color: var(--gruen-dunkel);
}
.datei-zeichen {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gruen-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5'/%3E%3Cpath d='m7 9.5 5-5 5 5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 6px 14px rgba(51, 83, 10, .22);
}
.datei-worte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.datei-aufruf { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--tinte); }
.datei-name { font-size: .82rem; color: var(--tinte-weich); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formfeld-datei.hat-datei .datei-flaeche { border-style: solid; border-color: var(--gruen); background: var(--kachel-gewaehlt); }
.formfeld-datei.hat-datei .datei-zeichen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.formfeld-datei.hat-datei .datei-name { color: var(--tinte); font-weight: 600; }
.datei-weg {
  margin-top: 8px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gruen-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.datei-weg[hidden] { display: none; }
.datei-weg:focus-visible { outline: 2px solid var(--gruen-dunkel); outline-offset: 3px; }

/* ---------- H7  Belege als gleiche Bildkarten ---------- */
.beleg-karten {
  list-style: none;
  margin: var(--m8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 300px));
  gap: var(--m6);
}
.belege-team .beleg-karten { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m5); }
.beleg-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  overflow: hidden;
  box-shadow: var(--schatten-1);
}
.beleg-bild { aspect-ratio: 4 / 5; background: #F1F8E4; overflow: hidden; }
.beleg-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.beleg-bild-siegel { display: grid; place-items: center; padding: 14%; }
.beleg-bild-siegel img { width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(36, 57, 10, .18)); }
.beleg-bild-zahl {
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gruen-dunkel);
}
.beleg-zahl { font-size: 3.6rem; font-weight: 800; line-height: 1; }
.beleg-text { margin: 0; padding: var(--m5) var(--m5) var(--m6); font-size: var(--grad-s); line-height: 1.5; }
.beleg-text strong { display: block; margin-bottom: 4px; font-family: var(--font-head); color: var(--tinte); line-height: 1.3; }
@media (max-width: 760px) {
  .beleg-karten, .belege-team .beleg-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m4); }
  .beleg-text { padding: var(--m4); font-size: .8rem; }
  .beleg-text strong { font-size: .9rem; }
  .beleg-zahl { font-size: 2.6rem; }
}

/* ---------- H8  Gehalt und Leistungen als Umschalter ----------
   Umschalter und Tafeln aus style.css 7.2 (main.js E). Je Thema links
   ein Bild, rechts der Text; am Handy Bild oben, die Reiter laufen
   seitlich mit Anschnitt. */
/* Pillenleiste wie die Pillen im Mockup. Der Umschalter der Website ist
   seit schwung.css eine Antwortkachel-Reihe; hier sind es Themenreiter,
   also Pillen in einer Zeile, am Handy seitlich wischbar mit Anschnitt. */
#gehalt .gehalt-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: auto;
  max-width: none;
  margin: 0 0 var(--m8);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
#gehalt .gehalt-wahl button {
  flex: none;
  min-height: 46px;
  padding: 10px 22px;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  background: #fff;
  border: 2px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
  color: var(--gruen-dunkel);
  box-shadow: none;
}
#gehalt .gehalt-wahl button:hover { border-color: var(--gruen-dunkel); }
#gehalt .gehalt-wahl button[aria-selected="true"] {
  background: var(--gruen-dunkel);
  border-color: var(--gruen-dunkel);
  color: #fff;
  box-shadow: 0 6px 16px rgba(51, 83, 10, .25);
}
#gehalt .gehalt-wahl button:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; }
.gehalt-tafel.aktiv {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--m10);
  align-items: start;
  padding: var(--m6);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
}
.gehalt-bild { margin: 0; border-radius: var(--bogen-karte); overflow: hidden; }
.gehalt-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gehalt-text { padding: var(--m2) var(--m4) var(--m2) 0; }
.gehalt-text h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin-bottom: var(--m4);
}
.gehalt-text .haken-liste { margin: 0 0 var(--m4); }
.gehalt-text p + p { margin-top: var(--m4); }
.tafel-trenner { border: 0; border-top: 1px solid var(--linie); margin: var(--m6) 0; }
html:not(.js) .gehalt-tafel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--m8); }
@media (max-width: 960px) {
  .gehalt-tafel.aktiv, html:not(.js) .gehalt-tafel { grid-template-columns: minmax(0, 1fr); gap: var(--m5); padding: var(--m4); }
  .gehalt-text { padding: 0 var(--m2) var(--m3); }
}
@media (max-width: 760px) {
  #gehalt .gehalt-wahl {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--m6));
    padding: 4px var(--m6) 8px;
    scroll-padding-inline: var(--m6);
  }
  #gehalt .gehalt-wahl::-webkit-scrollbar { display: none; }
  #gehalt .gehalt-wahl button { padding: 10px 18px; min-height: 44px; }
  .gehalt-bild img { aspect-ratio: 16 / 10; }
  .gehalt-text h3 { font-size: 1.12rem; }
}

/* ---------- H9  Ablauf im Formularblock der Stellenseiten ----------
   Dieselben Schrittkarten wie auf /, immer untereinander (schmale Spalte
   neben dem Formular), links bündig. */
.bewerben-text .zeitleiste-kurz {
  --zl-luecke: var(--m8);
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: calc(var(--zl-luecke) + 8px);
  max-width: 460px;
  margin-top: var(--m8);
  padding-top: 26px;
}
.bewerben-text .zeitleiste-kurz > .schritt-karte { text-align: left; padding: var(--m8) var(--m5) var(--m5); }
.bewerben-text .zeitleiste-kurz .schritt-nummer { left: var(--m5); transform: translateY(-50%); }
.bewerben-text .zeitleiste-kurz .schritt-karte h3 { font-size: 1.04rem; margin-bottom: var(--m2); }
.bewerben-text .zeitleiste-kurz > .schritt-karte:not(:last-child)::after {
  top: 100%;
  left: calc(var(--m5) + 44px);
  width: 3px;
  height: calc(var(--zl-luecke) + 8px);
  margin: 0 0 0 -1.5px;
  background: linear-gradient(180deg, var(--gruen-dunkel) 50%, var(--linie-stark) 50%) bottom / 100% 200% no-repeat;
}
.bewerben-text .zeitleiste-kurz > .schritt-karte.zl-weiter::after,
html:not(.zl-an) .bewerben-text .zeitleiste-kurz > .schritt-karte::after { background-position: top; }
.bewerben-text .zeitleiste-kurz + p { margin-top: var(--m5); }

/* ---------- H10 Kopfknopf der Stellenseiten ---------- */
.site-header-karriere .kopf-bewerben.kopf-spaet {
  transition: opacity var(--zeit-wechsel) var(--kurve-aus), transform var(--zeit-wechsel) var(--kurve-aus), visibility var(--zeit-wechsel);
}
html:not(.buehne-vorbei) .site-header-karriere .kopf-bewerben.kopf-spaet {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}
@media (max-width: 760px) {
  .site-header-karriere .kopf-bewerben.kopf-spaet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header-karriere .kopf-bewerben.kopf-spaet { transition: none; transform: none; }
}

/* ---------- H11 Verweis mit Pfeilkreis ----------
   Die wachsende Linie (.weiter::after) rutschte am Handy nach dem Umbruch
   an den rechten Rand und las sich wie das Minus eines Aufklappers, auf
   der Danke-Seite wie ein Gedankenstrich. Jetzt der Pfeilkreis der
   Stellenkarten, direkt am Text. */
.weiter.weiter-kreis { gap: 12px; white-space: nowrap; }
/* 23.10.2026: „Arbeitsmodelle und Benefits entdecken“ (Lucas) ist am Handy
   breiter als der Bildschirm (36 px Überlauf bei 390 px), dort umbrechen. */
@media (max-width: 480px) { .weiter.weiter-kreis { white-space: normal; line-height: 1.5; } }
.weiter.weiter-kreis::after {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--gruen-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--zeit-wechsel) var(--kurve-aus), background-color var(--zeit-wechsel) linear;
}
.weiter.weiter-kreis:hover::after { width: 36px; background-color: var(--orange-aktion); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .weiter.weiter-kreis::after { transition: none; }
  .weiter.weiter-kreis:hover::after { transform: none; }
}

/* ---------- H12 Kleinteile ---------- */
.stimme-quelle {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .82rem;
  color: var(--tinte-weich);
}
/* Stellenkarten: Ort und Umfang je eine Zeile, Umfang bricht nie um */
.weg-karte .weg-karte-meta strong,
.weg-karte .weg-karte-meta span { display: block; }
.weg-karte .weg-karte-meta span { white-space: nowrap; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .stellen-reihe .weg-karte.mit-bild { row-gap: var(--m3); }
    .stellen-reihe .weg-karte h3 { min-height: calc(3 * 1.3em); }
  }
}
.zeit-am-stueck { white-space: nowrap; }
/* Funnelseiten am Handy: schmaler Bildstreifen der Stelle über der
   Überschrift, das Formular bleibt im ersten Bildschirm */
@media (max-width: 980px) {
  .funnel-kopf-grid > div:first-child { display: flex; flex-direction: column; }
  .funnel-kopf-grid > div:first-child .funnel-kopf-bild {
    display: block;
    order: -1;
    margin: 0 0 var(--m4);
    border-radius: var(--bogen-karte);
  }
  .funnel-kopf-grid > div:first-child .funnel-kopf-bild img { aspect-ratio: 16 / 7; height: 140px; width: 100%; object-position: 50% 22%; }
}
@media (max-width: 760px) {
  .funnel-kopf-grid > div:first-child .funnel-kopf-bild img { height: 120px; }
}
/* Tablet (13.10.2026): 140 px Höhe bei 772 px Breite zeigten nur die Stirn */
@media (min-width: 761px) and (max-width: 980px) {
  .funnel-kopf-grid > div:first-child .funnel-kopf-bild img { height: 220px; object-position: 50% 20%; }
}

/* ------------------------------------------------------------
   Abnahme 12.10.2026 (G14): Stimmen mit Bild. Das Foto zeigt Ort oder
   Material, nie ein Gesicht (00-start.html, Abschnitt 5). Randlos oben,
   Zitat und Funktion darunter; am Handy die Wischreihe wie bisher.
   ------------------------------------------------------------ */
#stimmen .stimme.mit-bild {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  padding: 0;
  overflow: hidden;
}
#stimmen .stimme.mit-bild > .stimme-bild {
  grid-column: 1; grid-row: 1 / span 3;
  display: block; width: 100%; height: 100%; min-height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
#stimmen .stimme.mit-bild::before { position: static; grid-column: 2; grid-row: 1; height: 52px; padding: var(--m6) var(--m6) 0; box-sizing: content-box; }
#stimmen .stimme.mit-bild > blockquote { grid-column: 2; grid-row: 2; padding: var(--m3) var(--m6) 0; }
#stimmen .stimme.mit-bild > figcaption { grid-column: 2; grid-row: 3; padding: var(--m5) var(--m6) var(--m6); }
/* Ausschnitt je Bild. Bis 13.10.2026 griffen diese Regeln nicht, weil
   „#stimmen .stimme.mit-bild > .stimme-bild“ spezifischer ist (am Handy
   zeigte heim-flur nur Beine). Jetzt mit derselben Kette plus Attribut. */
#stimmen .stimme.mit-bild > .stimme-bild[src$="/heim-flur.webp"] { object-position: 50% 0; }
#stimmen .stimme.mit-bild > .stimme-bild[src$="/strecke-theraband.webp"] { object-position: 50% 62%; }
#stimmen .stimme.mit-bild > .stimme-bild[src$="/praxis-tempelhof-empfang-2.webp"] { object-position: 30% 55%; }
/* Bis 1100 px Foto oben statt links: zwischen 761 und 1100 px standen zwei
   Karten nebeneinander und das Foto war nur 134 px breit (13.10.2026) */
@media (max-width: 1100px) {
  #stimmen .stimme.mit-bild { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  #stimmen .stimme.mit-bild > .stimme-bild { grid-row: 1; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  #stimmen .stimme.mit-bild::before { grid-column: 1; grid-row: 2; height: 44px; padding: var(--m4) var(--m5) 0; }
  #stimmen .stimme.mit-bild > blockquote { grid-column: 1; grid-row: 3; padding: var(--m2) var(--m5) 0; }
  #stimmen .stimme.mit-bild > figcaption { grid-column: 1; grid-row: 4; padding: var(--m4) var(--m5) var(--m5); }
}

/* ============================================================
   R13  STARTSEITE GEBÜNDELT (13.10.2026, Teamliste „viel zu viel
   Inhalt, kein roter Faden“). Elf Abschnitte wurden acht, siehe Kopf
   von quelle/inhalte-karriere/00-start.html.
     R13.1  Praktikum als Band unter den Stellenkarten
     R13.2  Gehalt: Kriterien als Aufklapper, Bild am Handy flacher
     R13.3  Wer wir sind und Stimmen in einem Abschnitt
     R13.4  Belege: gleich hohe Karten über die volle Breite (H7)
     R13.5  Ablauf am Handy dicht, Pille links neben dem Text
     R13.6  Arbeitsmodelle am Handy ohne Pfeilknöpfe (gewischt wird ohnehin)
   ============================================================ */

/* ---------- R13.1  Praktikum als Band ---------- */
.praktikum-band {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--m8);
  align-items: start;
  margin-top: var(--m10);
  padding: var(--m6);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
}
.praktikum-band-bild { margin: 0; border-radius: var(--bogen-karte); overflow: hidden; }
.praktikum-band-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
.praktikum-band-text { padding: var(--m2) var(--m4) 0 0; }
.praktikum-band-text h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-h3);
  line-height: 1.25;
  color: var(--tinte);
  margin: 0 0 var(--m3);
}
.praktikum-band-text > p + p { margin-top: var(--m3); }
.praktikum-klapp { margin-top: var(--m5); }
.praktikum-klapp .haken-liste { margin: var(--m2) 0 var(--m4); }
.praktikum-band .btn-reihe { margin-top: var(--m6); }
@media (max-width: 760px) {
  .praktikum-band { grid-template-columns: minmax(0, 1fr); gap: var(--m4); margin-top: var(--m8); padding: var(--m4); }
  .praktikum-band-bild { display: none; }
  .praktikum-band-text { padding: 0 var(--m2) var(--m2); }
  .praktikum-band-text h3 { font-size: 1.15rem; }
  .praktikum-klapp .aufklapp-knopf { padding: var(--m4) 0; font-size: 1rem; }
}

/* ---------- R13.2  Gehalt ---------- */
.gehalt-klapp { margin-top: var(--m2); }
.gehalt-klapp .haken-liste { margin: var(--m2) 0 var(--m4); }
@media (max-width: 760px) {
  .gehalt-bild img { aspect-ratio: 2 / 1; }
  .gehalt-klapp .aufklapp-knopf { padding: var(--m4) 0; font-size: 1rem; }
  .gehalt-tafel .tafel-trenner { margin: var(--m5) 0; }
}

/* ---------- R13.3  Wer wir sind und Stimmen ----------
   Oben Familie und Geschäftsführung, darunter die Stimmen. Die erste Karte
   ist das Zitat der Geschäftsführerin (nur Vorschau, data-offen): ohne Foto,
   dunkelgrün, am Rechner über die volle Breite der Reihe. */
#stimmen .gf-split { align-items: center; margin-bottom: var(--m12); }
#stimmen .stimme.stimme-gf { background: var(--gruen-dunkel); color: #fff; border: 0; }
#stimmen .stimme.stimme-gf::before { color: var(--gruen); }
#stimmen .stimme.stimme-gf blockquote, #stimmen .stimme.stimme-gf blockquote p { color: #fff; }
#stimmen .stimme.stimme-gf figcaption { color: #fff; }
@media (min-width: 761px) {
  #stimmen .stimmen-reihe > .stimme-gf { grid-column: 1 / -1; }
  #stimmen .stimme.stimme-gf blockquote { max-width: 70ch; }
}
@media (max-width: 760px) {
  #stimmen .gf-split { gap: var(--m6); margin-bottom: var(--m8); }
}

/* ---------- R13.4  Belege (ersetzt H7 auf /) ----------
   Vorher: am Rechner drei Karten zu je höchstens 300 px auf drei Vierteln
   der Breite, am Handy zwei nebeneinander und die kununu-Karte allein mit
   leerer rechter Hälfte und eigener Höhe. Jetzt teilen sich die Karten die
   volle Breite (drei oder, in der Kundenansicht ohne kununu, zwei), Bild
   links, Text rechts; am Handy volle Breite untereinander, alle gleich hoch. */
#belege .beleg-karten {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  gap: var(--m6);
}
#belege .beleg-karte {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  align-items: center;
}
/* Bildzelle ohne aspect-ratio: Mit Seitenverhältnis und gestreckter Höhe
   rechnet der Browser die Breite aus der Höhe und das Bild läuft über den
   Text, sobald eine Karte höher wird (Vorschau-Schild unter kununu). */
#belege .beleg-bild { aspect-ratio: auto; align-self: stretch; width: 100%; height: auto; min-height: 150px; }
#belege .beleg-bild-siegel { padding: 12%; }
#belege .beleg-bild img[src*="arbeitgeber-award"] { object-position: 30% 50%; }
#belege .beleg-bild-siegel img { height: 100%; max-height: 170px; }
#belege .beleg-text { padding: var(--m5); }
@media (min-width: 761px) and (max-width: 1100px) {
  #belege .beleg-karte { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  #belege .beleg-bild { align-self: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  #belege .beleg-karten { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--m4); }
  #belege .beleg-karte { grid-template-columns: 112px minmax(0, 1fr); }
  #belege .beleg-bild { min-height: 112px; }
  #belege .beleg-bild-siegel img { max-height: 110px; }
  #belege .beleg-text { padding: var(--m4); font-size: .85rem; }
  #belege .beleg-text strong { font-size: .95rem; }
  #belege .beleg-zahl { font-size: 2.2rem; }
  #belege .beleg-bild-zahl { font-size: .85rem; }
}

/* ---------- R13.5  Ablauf am Handy ----------
   Fünf Karten mit der Pille auf der Kante waren am Handy 1,4 Bildschirme
   hoch. Jetzt steht die Pille links in der Zeile des Titels, der Satz
   darunter über die volle Breite; die Linie läuft senkrecht von Pille zu
   Pille. Gilt für / und /bewerben/danke/. */
@media (max-width: 760px) {
  #ablauf .zeitleiste { --zl-luecke: var(--m3); row-gap: var(--m3); padding-top: 0; }
  #ablauf .zeitleiste > .schritt-karte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--m3);
    align-items: center;
    padding: var(--m4) var(--m5);
  }
  #ablauf .zeitleiste > .schritt-karte .schritt-nummer {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding: 4px 11px;
    gap: 6px;
    font-size: .88rem;
  }
  #ablauf .zeitleiste .schritt-karte h3 { grid-column: 2; grid-row: 1; font-size: 1.02rem; margin: 0; }
  #ablauf .zeitleiste .schritt-karte p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--m2); font-size: .88rem; line-height: 1.5; }
  #ablauf .zeitleiste > .schritt-karte:not(:last-child)::after {
    top: calc(var(--m4) + 28px);
    left: calc(var(--m5) + 32px);
    width: 3px;
    height: calc(100% - 28px - var(--m4) + var(--m3) + var(--m4));
    margin: 0 0 0 -1.5px;
    z-index: -1;
  }
}

/* Kurzablauf neben dem Formular (Start und Stellenseiten) am Handy in
   derselben dichten Form */
@media (max-width: 760px) {
  .bewerben-text .zeitleiste-kurz { --zl-luecke: var(--m3); row-gap: var(--m3); padding-top: 0; margin-top: var(--m6); }
  .bewerben-text .zeitleiste-kurz > .schritt-karte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--m3);
    align-items: center;
    padding: var(--m4) var(--m5);
  }
  .bewerben-text .zeitleiste-kurz .schritt-nummer {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding: 4px 11px;
    gap: 6px;
    font-size: .88rem;
  }
  .bewerben-text .zeitleiste-kurz .schritt-karte h3 { grid-column: 2; grid-row: 1; font-size: 1.02rem; margin: 0; }
  .bewerben-text .zeitleiste-kurz .schritt-karte p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--m2); font-size: .88rem; line-height: 1.5; }
  .bewerben-text .zeitleiste-kurz > .schritt-karte:not(:last-child)::after {
    top: calc(var(--m4) + 28px);
    left: calc(var(--m5) + 32px);
    height: calc(100% - 28px - var(--m4) + var(--m3) + var(--m4));
    z-index: -1;
  }
}

/* ---------- R13.6  Arbeitsmodelle am Handy ---------- */
@media (max-width: 760px) {
  /* Startseite am Handy: Luft zwischen den Abschnitten 48 statt 64 px,
     unter den Abschnittsköpfen 32 statt 48 px */
  body[data-seite="/"] main { --abschnitt-luft: var(--m12); }
  body[data-seite="/"] main .abschnitt-kopf { margin-bottom: var(--m8); }
  .praktikum-klapp .aufklapp-inhalt p { margin: var(--m2) 0 0; }
  #arbeitsmodelle .slider-pfeile { display: none; }
  #arbeitsmodelle .v-karte-bild img { aspect-ratio: 16 / 10; }
  /* Stellenkarten am Handy: Foto flacher, die Karte trägt Titel, Ort, Satz */
  .stellen-reihe .weg-karte-bild { aspect-ratio: 16 / 11; }
  #stimmen .stimme.mit-bild > .stimme-bild { aspect-ratio: 2 / 1; }
}

/* Zwei Abschnitte mit gleichem Grund (Nachprüfung 13.10.2026): auf den
   Funnelseiten /bewerben/… standen zwei Creme-Abschnitte mit 200 px Lücke
   ohne sichtbare Trennung. Gleiche Regel wie r13-bauteile.css R7 auf Berlin
   und Zeitlos (die Karriere lädt r13-bauteile.css nicht). */
main > .abschnitt-hell + .abschnitt-hell,
main > .abschnitt-creme + .abschnitt-creme { padding-top: calc(var(--abschnitt-luft, 64px) * .38); }

/* ---------- R20  Rückmeldung-4 Lucas Fichter (22.10.2026) ----------
   Satz unter den Arbeitsmodellen (noch im grünen Band), Unterüberschriften
   im Reiter Ausstattung, Benefits-Liste ab 1100 px zweispaltig, damit der
   Reiter nicht länger wird als das Bild daneben. */
.modelle-schluss {
  max-width: 720px;
  margin-top: var(--m8);
  color: #F2F8E6;
  font-size: 1.02rem;
  line-height: 1.6;
}
.modelle-schluss-link {
  display: inline;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gruen-leuchte);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.modelle-schluss-link:hover { text-decoration-color: #fff; }
.modelle-schluss-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 2px; }
.gehalt-text .tafel-unter {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  margin: var(--m5) 0 var(--m2);
}
.gehalt-text h3 + .tafel-unter { margin-top: 0; }
.gehalt-text .benefits-liste li + li { margin-top: var(--m2); }

/* Stellenseiten „Was Dich erwartet und was Du mitbringst“ (R20, 22.10.2026):
   zwei weiße Karten nebeneinander, am Handy untereinander (je fünf Zeilen,
   zusammen gut eine Bildschirmhöhe). Ersetzt die Zeitleiste „Dein Tag“. */
.stelle-blick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m6);
  margin-top: var(--m8);
}
.stelle-blick-karte {
  padding: var(--m8) var(--m8) var(--m6);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
}
.stelle-blick-karte h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin-bottom: var(--m5);
}
.stelle-blick-karte .haken-liste { margin: 0; }
.stelle-blick-karte .haken-liste li + li { margin-top: var(--m3); }
@media (max-width: 860px) {
  .stelle-blick { grid-template-columns: minmax(0, 1fr); gap: var(--m4); margin-top: var(--m6); }
  .stelle-blick-karte { padding: var(--m6) var(--m5) var(--m5); }
  .stelle-blick-karte h3 { font-size: 1.15rem; margin-bottom: var(--m4); }
}
.gehalt-text p + .haken-liste { margin-top: var(--m4); }
.gehalt-tafel.tafel-ohne-bild.aktiv,
html:not(.js) .gehalt-tafel.tafel-ohne-bild { grid-template-columns: minmax(0, 1fr); }
.tafel-ohne-bild .gehalt-text { padding: var(--m2) var(--m4); }
/* R21 (23.10.2026, Rückmeldung-5 Lucas Fichter: „die letzten beiden Absätze
   links und rechts sind zu weit unten“): Das Raster legte die Punkte paarweise
   in Zeilen. Ein einzeiliger Punkt neben einem zweizeiligen ließ ein Loch, die
   letzten beiden Punkte rutschten darunter. Jetzt zwei Spalten, die jede für
   sich fließen: gleicher Abstand zwischen allen Punkten, keine Löcher. */
@media (min-width: 900px) {
  .tafel-ohne-bild .benefits-liste { display: block; columns: 2; column-gap: var(--m10); }
  .tafel-ohne-bild .benefits-liste li { break-inside: avoid; margin: 0 0 var(--m3); }
  .tafel-ohne-bild .benefits-liste li + li { margin-top: 0; }
}
/* Umschalter der Stellenkarten nur am Handy */
.stelle-blick-wahl { display: none; }
@media (min-width: 861px) {
  .stelle-blick-karte[hidden] { display: block; }
}
@media (max-width: 860px) {
  /* Pillen wie im Reiter-Abschnitt #gehalt der Startseite */
  .stelle-blick-wahl {
    display: flex; gap: var(--m2); padding: 0; background: none; border: 0;
    border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: var(--m2);
  }
  .stelle-blick-wahl .schieber { display: none; }
  .stelle-blick-wahl button {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 12px; text-align: center;
    font-family: var(--font-head); font-weight: 700; font-size: .78rem;
    letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
    background: #fff; border: 2px solid var(--linie-stark);
    border-radius: var(--bogen-pille); color: var(--gruen-dunkel); box-shadow: none;
  }
  .stelle-blick-wahl button[aria-selected="true"] {
    background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff;
    box-shadow: 0 6px 16px rgba(51, 83, 10, .25);
  }
  .stelle-blick-wahl button:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; }
  /* Der Kartentitel steht schon auf dem Umschalter */
  .stelle-blick-karte h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.benefits-liste li { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 960px) {
  .tafel-ohne-bild .gehalt-text { padding: var(--m2) var(--m2) var(--m3); }
}