/* ============================================================
   PHYSIOPARK Berlin — Karriereseite
   Nachbau Canva-Mockup (Brandkit 15.png), Brand Guidelines:
   Hellgrün #91C73D · Orange #F88246 · Dunkelgrün #4E7B08
   Dunkelgrau #7D7D7F · Hellgrau #D9D9D9
   Montserrat (Headlines) · Lora Italic (Sublines) · Inter (Text)

   VERLAUFSFLÄCHEN (seit 02.09.2026)
   Die weichen Verläufe hinter Hero, „In 3 Schritten", „Dein neuer
   Arbeitsplatz", der Vorteile-Sektion und den Schritt-Karten waren bis dahin
   mit radial-gradient nachgebaut. Jetzt liegen die Originale aus dem Mockup
   als bg-hell.webp und bg-gruen.webp vor (je 1440×960, zusammen 17 KB).
   Der Nachbau war nicht nur ungenau, er war messbar schlechter: Weißer Text
   stand auf dem CSS-Glow bei 3,58:1 (Vorteile) bzw. 3,72:1 (Schritt-Karten)
   und verfehlte damit die 4,5:1 der WCAG. Auf dem echten Bild sind es 5,00:1,
   im hellsten Fleck 4,41:1 — deshalb steht bei .schritt-karte eine
   verschobene background-position.
   ============================================================ */

:root {
  --gruen: #91C73D;
  --gruen-dunkel: #4E7B08;
  --gruen-mittel: #578E14;
  /* Überschriftengrün, 03.09.2026 — nach Messung, nicht nach Gefühl.
     Das Brand-Hellgrün #91C73D ist als FLÄCHE einwandfrei, als große Schrift
     aber nicht lesbar: gegen die hellste Stelle des Hero-Verlaufs (Luminanz
     0,978) nur 1,97:1, gefordert sind 3:1. Auf dem dunkelgrünen Verlaufsbild
     (dunkelste Stelle 0,156) kommt es von der anderen Seite auf 2,57:1.
     Deshalb zwei Töne, je nach Untergrund — beide so nah am Brand-Grün wie
     die Messung es zulässt:
       --gruen-auf-hell    #66941C  → 3,54:1 auf dem Hero
       --gruen-auf-dunkel  #C8E89A  → 3,31:1 auf dem grünen Band
     Zum zweiten Wert: #B8DE7F kam rechnerisch auf 3,35:1, aus den Bildpunkten
     aber nur auf 2,95:1 — der schlechteste Punkt des Verlaufs liegt nicht
     dort, wo die Rechnung gegen die dunkelste Stelle ihn vermutet. #D5EFB0
     hätte 3,59:1 erreicht, sah neben der weißen ersten Zeile aber selbst weiß
     aus und hätte den grünen Akzent gekostet. #C8E89A ist der grünste Ton, der
     die Grenze noch hält.
     Für Flächen, Rahmen und Punkte bleibt #91C73D unverändert. */
  --gruen-auf-hell: #66941C;
  --gruen-auf-dunkel: #C8E89A;
  --orange: #F88246;
  --grau-text: #55565A;
  --grau-flow: #6E6F72;
  --hellgrau: #D9D9D9;
  --creme: #FAFBF4;
  --karte-hell: #F3F8E8;
  /* Fokusfarbe: Das Brand-Orange erreicht gegen Weiß nur 2,54:1 und taugt als
     Fokusrahmen nicht (WCAG 1.4.11 verlangt 3:1). #D2551A ist derselbe
     Farbton, abgedunkelt auf 4,15:1 gegen Weiß und 3,82:1 gegen die hellgrüne
     Fläche einer gewählten Kachel. Für Flächen — die Knöpfe — bleibt das
     helle Brand-Orange unverändert. */
  --fokus: #D2551A;
  /* Grundtöne der beiden Verlaufsbilder, aus den Dateien selbst gemessen.
     Sie stehen als background-color UNTER dem Bild: Kommt das WebP nicht an
     (alter Browser, abgebrochener Ladevorgang), bleibt die Fläche trotzdem
     in der richtigen Farbe statt weiß. */
  --bg-hell-grund: #FBFFF4;
  --bg-gruen-grund: #4E7B08;
  --font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sub: 'Lora', Georgia, serif;
  --font-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(85, 86, 90, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* <picture> verschwindet aus dem Layout — 03.09.2026, nach einem Fehler von mir.
   Beim Umstellen der Bilder auf WebP wurde jedes <img> in ein <picture> gewickelt.
   Damit war nicht mehr das Bild das Kind seines Elternelements, sondern der
   Wrapper. Sichtbar wurde das sofort in der Galerie: `.galerie-slider img`
   setzt `flex: 0 0 auto`, doch das Flex-Kind war jetzt das <picture> — ohne
   diese Regel, also mit flex-shrink 1. Alle acht Bilder wurden auf einen
   Bruchteil ihrer Breite zusammengedrückt und ließen sich nicht mehr scrollen.
   `display: contents` nimmt den Wrapper aus dem Kasten-Baum: Das <img> ist
   wieder direktes Kind, und jede vorhandene CSS-Regel greift unverändert.
   Deshalb steht die Regel hier oben und nicht bei der Galerie — sie betrifft
   ausnahmslos jedes <picture> der Seite. */
picture { display: contents; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  font-family: var(--font-text);
  color: var(--grau-flow);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto — sonst erzwingt das height-Attribut (CLS-Schutz) die volle Pixelhöhe,
   sobald CSS nur die Breite setzt (z. B. .bild-1 { width: 78% }) */
img { max-width: 100%; height: auto; display: block; }

/* Mockup gemessen: Content-Breite ~967px (Ränder bei x=203 auf 1366) */
.container { max-width: 1018px; margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  padding: 10px 22px; /* Mockup gemessen: Button ~218x35px */
  line-height: 1.25;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
  /* #B15D32 statt Brand-Orange #F88246 — 03.09.2026.
     Weiß auf dem hellen Orange ergab 2,54:1; die Bewerben-Knöpfe waren damit
     ausgerechnet an den Stellen am schlechtesten lesbar, auf die geklickt
     werden soll. #B15D32 ist keine neue Farbe: Das Projekt hatte den Ton
     bereits für Orange-Text nachgerechnet (siehe .fortschritt-punkte). Als
     Fläche kommt er auf 4,69:1.
     Das helle Brand-Orange bleibt überall dort, wo es reine Fläche ohne Text
     ist — die Punkte in den Badges, die Schritt-Nummern, der Satzpunkt in den
     Überschriften, der Play-Kreis. Dort trägt es keine Information. */
  /* 05.10.2026: #C1500F wie physiopark.berlin und Zeitlos. Gleicher Farbton,
     aber näher am Brand-Orange (LCh-Buntheit 69 statt 50, #B15D32 wirkte
     rostbraun), Kontrast praktisch gleich: 4,75:1 statt 4,69:1. */
  background: #C1500F;
  color: #fff;
  box-shadow: 0 6px 16px rgba(193, 80, 15, .30);
}
.btn-primary:hover { background: #A24109; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(193, 80, 15, .40); }
/* Schrift und Rahmen im Primärton (05.10.2026, wie die Website). Weisser
   Grund: auf den grünen Flecken von bg-hell.webp kam #C1500F nur auf 4,24:1,
   auf Weiss 4,75:1. Ein Rahmen in #F88246 verfehlt mit 2,54:1 die 3:1. */
.btn-outline {
  background: #fff;
  color: #C1500F;
  border-color: #C1500F;
}
.btn-outline:hover { background: #C1500F; color: #fff; }

/* ---------- Badges (Pill mit Punkt) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--gruen-dunkel);
  border: 2px solid var(--gruen);
  border-radius: 999px;
  padding: 8px 22px;
  background: rgba(255, 255, 255, .75);
}
.badge::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* ---------- Headlines ---------- */
.headline {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
  color: var(--grau-text);
}
.headline .zeile-gruen { color: var(--gruen-auf-hell); font-weight: 400; }
.headline .punkt { color: var(--orange); }
.sub-strich {
  width: 90px; height: 4px;
  background: var(--gruen);
  border-radius: 2px;
  margin-bottom: 22px;
}

/* ---------- Sprunglink ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  padding: 12px 22px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
/* Das Sprungziel selbst darf keinen Rahmen bekommen — der Fokus sitzt dort nur,
   damit die Tastatur mitspringt. */
main:focus { outline: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 255, 244, .92); /* Grundton von bg-hell.webp — der Header verschmilzt mit dem Hero */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(145, 199, 61, .12);
}
/* 06.10.2026: Flucht wie physiopark.berlin und Zeitlos (dort .header-inner,
   --kopf-hoehe). Mit 1280 px und 18 px Polster saß das Logo bei 1440 px auf
   x=104 und der Kopf war 81 px hoch, die Dachleiste darüber aber auf x=84.
   Beim Wechsel zwischen den drei Auftritten sprang das Logo um 20 px. Jetzt
   1320 px, 13 px Polster, 78 px Mindesthöhe; schmaler siehe Ende der Datei. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 78px;
}
.header-logo img { height: 44px; width: auto; }
.main-nav { display: flex; gap: 34px; align-items: center; }
.main-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau-text);
  text-decoration: none;
  transition: color .15s;
}
.main-nav a:hover { color: var(--gruen-dunkel); }
.main-nav a.aktiv { font-weight: 700; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 3px;
  background: var(--grau-text);
  border-radius: 2px;
  margin: 5px 0;
}

/* ---------- Hero ---------- */
.hero {
  /* Der Verlauf aus dem Mockup, jetzt als Originalbild statt als Nachbau
     (siehe „Verlaufsflächen" oben). Die Farbe darunter ist der gemessene
     Grundton des Bildes: Lädt das WebP nicht, bleibt die Fläche richtig. */
  background: var(--bg-hell-grund) url("../img/bg-hell.webp") center / cover no-repeat;
  padding: 72px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  /* 05.10.2026: Deckel 3.2rem, damit "DEINE KARRIERE." wie im Mockup in
     einer Zeile steht (bei 3.4rem: 4 Zeilen bei 1366). */
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin: 26px 0 14px;
}
.hero-subline {
  font-family: var(--font-sub);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--grau-text);
  margin-bottom: 20px;
}
.hero-text { max-width: 430px; margin-bottom: 34px; font-size: .95rem; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
/* 06.10.2026: Bei 1366 px ergaben 218 + 14 + 257 px genau die 489 px der
   Spalte, der zweite Knopf rutschte unter den ersten. Im Mockup und auf
   physiopark.berlin stehen beide nebeneinander. */
.hero-buttons .btn-outline { padding-left: 18px; padding-right: 18px; }
.hero-bild img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4 / 5; /* Mockup: Hochformat ~405x506 */
  object-fit: cover;
  object-position: center 20%;
}

/* ---------- Das erwartet dich ---------- */
.erwartet { padding: 110px 0; background: #fff; }
.erwartet-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: start;
}
.erwartet-bilder .bild-1 {
  width: 78%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.erwartet-bilder .bild-2 {
  position: relative;
  width: 62%;
  margin: -38% 0 0 auto;
  border-radius: var(--radius);
  border: 6px solid #fff;
  box-shadow: var(--shadow);
}
.erwartet-cta { margin-top: 40px; text-align: center; }
.erwartet h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 20px; }
.erwartet-intro { max-width: 470px; margin-bottom: 36px; font-size: .95rem; }

.vorteile-karte {
  border: 2px solid var(--gruen);
  border-radius: 18px;
  background: linear-gradient(170deg, #FCFEF7, #F4F9EA);
  padding: 46px 34px 34px;
  position: relative;
  box-shadow: 0 14px 34px rgba(145, 199, 61, .18);
}
.vorteile-karte .badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
}
.gehalt-box {
  background: linear-gradient(170deg, #9FCE59, #93C844); /* Mockup gemessen */
  border-radius: 10px;
  color: #fff;
  padding: 16px 22px;
  margin-bottom: 26px;
}
.gehalt-box strong {
  font-family: var(--font-sub);
  font-style: normal;
  font-weight: 600;
  font-size: 1.1rem;
  color: #2E4A05;
  display: block;
}
/* Bis 03.09.2026 stand die Subline mockup-treu in Weiß. Aus den Bildpunkten
   gemessen waren das 1,84:1 — der mit Abstand schlechteste Wert der ganzen
   Seite, bei 14,7 px Schriftgröße, wo 4,5:1 ohne Ausnahme gelten. Weiß ließ
   sich nicht retten: heller geht nicht, und der Verlauf darunter ist mit
   Luminanz 0,50 zu hell.
   Die Lösung kommt ohne neue Farbe aus — die Hauptzeile derselben Box steht
   längst in #2E4A05. Die Subline übernimmt sie und kommt damit auf 5,1:1.
   Die Box wirkt dadurch geschlossener, nicht anders. */
.gehalt-box span { font-family: var(--font-sub); font-size: .92rem; color: #2E4A05; }
.fakt { margin-bottom: 24px; }
.fakt:last-child { margin-bottom: 0; }
.fakt strong {
  font-family: var(--font-sub);
  font-style: normal;
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--grau-text);
  display: block;
  margin-bottom: 4px;
}
.fakt span { font-family: var(--font-sub); font-size: .95rem; color: var(--grau-flow); }

/* ---------- Deine Vorteile (dunkelgrüner Slider) ---------- */
.vorteile {
  background: var(--bg-gruen-grund) url("../img/bg-gruen.webp") center / cover no-repeat;
  padding: 100px 0 90px;
  color: #fff;
}
.vorteile-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 54px;
}
.vorteile h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: #fff; }
/* Mockup: ganze Zeile in Brand-Hellgrün #93C844, Kontrast über die Strichstärke (im/PARK fett) */
.vorteile h2 .zeile-2 { color: var(--gruen-auf-dunkel); font-weight: 600; }
.vorteile h2 .zeile-2 strong { color: var(--gruen-auf-dunkel); font-weight: 800; }
.vorteile .sub-strich { background: #C8EB82; }

.slider-pfeile { display: flex; gap: 14px; }
.pfeil-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex: none;
}
.pfeil-btn:hover { background: rgba(255, 255, 255, .15); }

.karten-slider {
  display: flex;
  gap: 24px; /* Mockup gemessen */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.karten-slider::-webkit-scrollbar { display: none; }
.karten-slider:focus-visible, .galerie-slider:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 4px;
}
.v-karte {
  flex: 0 0 268px; /* Mockup gemessen: Kartenbreite 268px */
  scroll-snap-align: start;
  background: #E2EFCC; /* Mockup gemessen: flat #E1EECB, kein Verlauf */
  border-radius: 16px;
  padding: 26px 24px 30px;
  color: var(--grau-flow);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.v-karte .badge { font-size: .82rem; padding: 6px 16px; margin-bottom: 26px; background: #fff; }
.v-karte h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--grau-text);
  margin-bottom: 12px;
  line-height: 1.3;
}
.v-karte p { font-size: .84rem; line-height: 1.55; color: #626366; }

.slider-balken {
  height: 6px;
  background: rgba(255, 255, 255, .35);
  border-radius: 3px;
  margin-top: 34px;
  overflow: hidden;
}
.slider-balken .fortschritt {
  height: 100%;
  width: 25%;
  background: var(--gruen);
  border-radius: 3px;
  transition: transform .25s ease, width .25s ease;
}
.vorteile .slider-balken { background: rgba(255, 255, 255, .5); }
.vorteile .slider-balken .fortschritt { background: var(--gruen); }
.vorteile-cta { text-align: center; margin-top: 52px; }

/* ---------- Echte Einblicke / Team ---------- */
.team {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
}
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Eigene, kleinere Datei statt team-bg: Diese Fläche liegt unter
     opacity .18 — Detailtreue ist dort nicht wahrnehmbar, das Gewicht schon.
     900 px breit bei Qualität 40 ergibt 42 KB statt 149 KB. team-bg.webp bleibt
     in voller Qualität bestehen, weil stimmen.html dasselbe Motiv als
     Video-Vorschaubild voll sichtbar zeigt.

     Drei Stufen, absteigend: Der Browser nimmt die letzte, die er versteht.
     Ohne die erste Zeile bliebe die Fläche in einem Browser ohne image-set
     leer — und zwar lautlos, ohne Fehlermeldung. Mockup: Person mittig-rechts. */
  background: url("../img/team-flaeche.jpg") 65% 30% / cover no-repeat;
  background-image: -webkit-image-set(url("../img/team-flaeche.webp") type("image/webp"), url("../img/team-flaeche.jpg") type("image/jpeg"));
  background-image: image-set(url("../img/team-flaeche.webp") type("image/webp"), url("../img/team-flaeche.jpg") type("image/jpeg"));
  opacity: .18;
}
.team::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.55) 100%);
}
.team .container { position: relative; z-index: 1; }
.team-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Mockup: linke Spalte breiter — „Echte Einblicke" einzeilig */
  gap: 50px;
  align-items: start;
}
.team h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 20px; }
.team-intro { max-width: 430px; margin-bottom: 36px; font-size: .95rem; }

.team-liste { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.team-person {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: rgba(255, 255, 255, .9);
  border: 2px solid var(--hellgrau);
  border-radius: 12px;
  padding: 14px 20px;
  cursor: pointer;
  font-family: var(--font-text);
  transition: border-color .15s, box-shadow .15s;
}
/* Porträt statt Punkt: Seit die drei echten Stimmen von physiopark.berlin
   übernommen sind, steht hier das Gesicht der Person. <picture> wird das
   Flex-Kind — nicht das <img> —, deshalb sitzt flex: none am Wrapper. */
.team-person picture { flex: none; display: block; line-height: 0; }
.team-person .portraet {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--hellgrau);
  transition: border-color .15s;
}
.team-person strong { display: block; font-size: 1.05rem; color: var(--grau-text); font-weight: 700; }
.team-person span { font-size: .82rem; color: var(--grau-flow); }
.team-person.aktiv {
  border-color: var(--gruen);
  box-shadow: 0 8px 20px rgba(145, 199, 61, .25);
}
.team-person.aktiv .portraet { border-color: var(--gruen); }

.zitat-karte {
  position: relative;
  border: 2px solid var(--gruen-dunkel);
  border-radius: 18px;
  background: rgba(252, 254, 247, .96);
  padding: 54px 42px 40px;
  box-shadow: var(--shadow);
}
.zitat-karte .badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
  font-size: .85rem;
}
.zitat-karte .badge em { font-style: normal; font-weight: 500; }
.anfz {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--gruen);
  margin-bottom: 10px;
}
.zitat-text {
  font-style: italic;
  font-size: 1.02rem;
  color: var(--grau-text);
  margin-bottom: 26px;
}
.zitat-autor strong { display: block; font-size: 1.05rem; color: var(--grau-text); }
.zitat-autor span { font-size: .85rem; }
.team-cta { text-align: center; margin-top: 34px; } /* Mockup: Button mittig unter der Zitat-Karte */

/* ---------- 3 Schritte ---------- */
.schritte {
  background: var(--bg-hell-grund) url("../img/bg-hell.webp") center / cover no-repeat;
  padding: 110px 0;
  text-align: center;
}
.schritte .sub-strich { margin: 0 auto 22px; }
.schritte h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.schritte h2 .zeile-1 { color: var(--gruen-auf-hell); font-weight: 800; }
.schritte h2 .zeile-2 { color: var(--gruen-auf-hell); font-weight: 400; }
.schritte-intro { max-width: 460px; margin: 20px auto 64px; font-size: .92rem; }
.schritte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  max-width: 980px;
  margin: 0 auto;
}
.schritt-karte {
  position: relative;
  /* 78% statt center: Der hellste Fleck des Bildes liegt bei x≈22 %, dort steht
     weißer Text nur noch bei 4,41:1. Rechts davon sind es durchgehend 5,00:1 —
     der weiße Fließtext in den Karten bleibt damit über der 4,5:1-Grenze. */
  background: var(--bg-gruen-grund) url("../img/bg-gruen.webp") 78% 50% / cover no-repeat;
  border: 2px solid var(--gruen);
  border-radius: 14px;
  color: #fff;
  padding: 52px 26px 40px;
  box-shadow: 0 14px 30px rgba(78, 123, 8, .3);
}
.schritt-nummer {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: 999px;
  padding: 7px 26px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gruen-dunkel);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.schritt-nummer::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
}
.schritt-karte h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.schritt-karte p { font-size: .86rem; line-height: 1.55; color: #fff; } /* Mockup: weiß */
.schritte-cta { margin-top: 60px; }

/* ---------- Fakten-Zeile im Hero (07.09.2026) ----------
   Drei Angaben statt eines weiteren Satzes. Jede steht auch weiter unten auf der
   Seite; hier stehen sie zusätzlich dort, wo jemand aus einer Anzeige zuerst
   hinsieht. Die erste war bis zum 07.09. die Gehaltsspanne, seit deren
   Entfernung steht dort „Seit 1985". */
.hero-fakten {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  /* Gemessen 07.09.2026: ohne margin-bottom stand der Fließtext mit 0 px Abstand
     direkt unter „Festgehalt / je Behandlung / Urlaub" — die Zahlenreihe und der
     Absatz lasen sich als ein Block. Gilt für jede Breite, nicht nur fürs Handy. */
  margin: 18px 0 26px;
}
.hero-fakten li { display: flex; flex-direction: column; line-height: 1.2; }
.hero-fakten strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--gruen-auf-hell);   /* 3,54:1 auf dem Hero-Verlauf, wie die Überschrift */
}
.hero-fakten span { font-size: .78rem; color: var(--grau-flow); }

/* ---------- Mitlaufende Aktionsleiste, nur Handy (07.09.2026) ----------
   Standardmäßig aus. Sichtbar wird sie erst über die Klasse, die main.js setzt,
   und nur unterhalb von 760 px. So bleibt sie auf dem Rechner grundsätzlich weg,
   auch wenn das Skript sie einblendet. */
.handy-leiste { display: none; }
@media (max-width: 760px) {
  .handy-leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #E4EED2;
    box-shadow: 0 -6px 22px rgba(85, 86, 90, .14);
    transform: translateY(120%);
    transition: transform .25s ease;
  }
  .handy-leiste.ist-sichtbar { transform: none; }
  .handy-leiste-cta { flex: 1; text-align: center; padding: 12px 16px; }
  /* Mindestens 44 px Kantenlänge — darunter ist ein Ziel mit dem Daumen nicht
     zuverlässig zu treffen. */
  .handy-leiste-anruf {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 56px;
    min-height: 46px;
    padding: 4px 8px;
    border: 2px solid var(--orange);
    border-radius: 6px;
    color: #B15D32;              /* 4,68:1 auf Weiß */
    text-decoration: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .handy-leiste-anruf svg { width: 17px; height: 17px; }
  /* Solange die Leiste steht, darf sie das Seitenende nicht verdecken. */
  body.hat-handy-leiste { padding-bottom: 74px; }
}

/* ---------- Offene Stellen (07.09.2026, zweite Fassung) ----------
   Steht direkt hinter dem Hero: Wer aus einer Anzeige kommt, will als Erstes
   wissen, welche Stelle gemeint ist. Seit der zweiten Fassung sind es genau drei
   Karten — Punkt 6 der Recruiting-IST-Analyse, nicht mehr die sechs Anzeigen des
   Jobportals. Die Begründung steht im Markup. */
.stellen { padding: 96px 0; background: var(--creme); }
.stellen h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 16px; }
.stellen h2 .zeile-1 { color: var(--grau-text); font-weight: 800; }
.stellen h2 .zeile-2 { color: var(--gruen-auf-hell); font-weight: 400; }
.stellen-intro { max-width: 620px; font-size: .95rem; margin-bottom: 44px; }

/* Seit dem 07.09.2026 sind es drei Karten statt vier, deshalb auto-fit statt der
   festen zwei Spalten: In den 970-px-Container passen drei Karten nebeneinander
   (3 × 260 + 2 × 22 = 824), sie stehen also in einer Reihe. Wird das Fenster
   schmaler, bricht das Raster von selbst auf zwei und dann auf eine Spalte. Mit
   der alten Regel `repeat(2, 1fr)` hätte die dritte Karte allein in der zweiten
   Reihe gestanden und wie ein Nachtrag gewirkt — genau das, was bei vier Karten
   vermieden werden sollte. */
.stellen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.stellen-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E4EED2;
  border-radius: 18px;
  padding: 26px 24px 24px;
  box-shadow: 0 10px 26px rgba(85, 86, 90, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stellen-karte:hover {
  transform: translateY(-3px);
  border-color: var(--gruen);
  box-shadow: 0 16px 36px rgba(85, 86, 90, .13);
}
/* Die Badge der Seite ist auf einen hellen Verlauf gerechnet; auf der weißen
   Karte wirkt ihre halbtransparente Fläche schmutzig. Hier deckend. */
.stellen-karte .badge {
  font-size: .78rem;
  padding: 5px 15px;
  background: #F1F8E4;
  align-self: flex-start;
}
.stellen-karte h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.16rem;
  line-height: 1.25;
  color: var(--grau-text);
  margin: 16px 0 12px;
}
.stellen-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .84rem;
  color: var(--grau-flow);      /* 5,02:1 auf Weiß */
  margin-bottom: 14px;
}
.stellen-meta span { display: inline-flex; align-items: center; gap: 6px; }
.stellen-meta svg { width: 15px; height: 15px; flex: none; color: var(--gruen-dunkel); }
/* Die Klasse .stellen-gehalt stand hier bis zum 07.09.2026 und trug die
   Gehaltsspanne auf zwei der drei Karten. Die Spanne ist auf Kundenentscheidung
   von der ganzen Seite entfernt worden; die Regel hatte danach keinen Nutzer
   mehr und ist mitgegangen. Ohne sie stehen die Aufzählungspunkte 16 px höher —
   die Springer-Karte sah schon vorher so aus. */
.stellen-punkte { list-style: none; margin-bottom: 22px; }
.stellen-punkte li {
  position: relative;
  padding-left: 24px;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 9px;
}
.stellen-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 3px solid var(--gruen);
}
/* margin-top:auto schiebt die Aktionen ans Kartenende — sonst stehen die Knöpfe
   auf unterschiedlicher Höhe, sobald eine Karte eine Aufzählungszeile mehr hat. */
.stellen-aktionen {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.stellen-link {
  font-size: .85rem;
  font-weight: 600;
  color: #3F6606;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stellen-link:hover { color: var(--gruen-dunkel); }

.stellen-initiativ {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding: 28px 30px;
  border: 2px dashed #C7DCA0;
  border-radius: 18px;
  background: #fff;
}
.stellen-initiativ h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.14rem;
  color: var(--grau-text);
  margin-bottom: 8px;
}
.stellen-initiativ p { font-size: .9rem; max-width: 560px; }
.stellen-initiativ-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ---------- Bewerbungs-Funnel ----------
   Sektionsfläche seit 07.09.2026 in Creme statt Weiß. Der Funnel steht jetzt in
   einer weißen Karte; auf weißem Grund wäre sie unsichtbar gewesen. Die
   gemessenen Kontrastwerte dieser Sektion gelten unverändert: #FAFBF4 hat
   Luminanz 0,978 und ist damit derselbe Untergrund, gegen den die Grüntöne im
   Hero bereits gerechnet wurden. */
.bewerben { padding: 110px 0; background: var(--creme); }
.bewerben-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
/* Die linke Spalte läuft auf dem Desktop mit, statt oben zu kleben: Der Funnel
   ist nach dem Umbau höher als der Text daneben. */
@media (min-width: 981px) {
  .bewerben-text { position: sticky; top: 110px; }
}
.funnel-karte {
  background: #fff;
  border: 1px solid #E4EED2;
  border-radius: 20px;
  padding: 34px 32px 30px;
  box-shadow: 0 18px 44px rgba(85, 86, 90, .10);
}
.bewerben h2 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  /* Diese Überschrift trägt keine .zeile-Klasse und wäre bei der
     Kontrastrunde am 03.09. fast durchgerutscht — gefunden erst durch die
     Messung über ALLE grünen Textknoten, nicht über die Klassenliste. */
  color: var(--gruen-auf-hell);
}
.bewerben h2 .zeile-3 { font-weight: 400; }
.bewerben-hinweis { margin-top: 26px; max-width: 380px; font-size: .92rem; }

/* Vertrauensanker in der linken Spalte — sie war vorher leer. */
.bewerben-anker { list-style: none; margin-top: 38px; max-width: 380px; }
.bewerben-anker li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 22px;
}
.bewerben-anker li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--gruen);
}
.bewerben-anker strong {
  display: block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  color: var(--grau-text);
  margin-bottom: 2px;
}
.bewerben-anker span { font-size: .88rem; line-height: 1.5; }

/* ---------- Fortschritt ---------- */
.funnel-fortschritt { margin-bottom: 32px; }
.fortschritt-punkte {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 10px;
}
/* Alle Farben hier sind nachgerechnet, nicht geschätzt. Die Schrift ist mit
   11,5 px klein — für sie gilt die 4,5:1-Grenze ohne Ausnahme. Das
   Brand-Orange #F88246 schafft auf Weiß nur 2,54:1 und war als Textfarbe
   unbrauchbar; #B15D32 ist dasselbe Orange, so weit abgedunkelt, dass es
   4,68:1 erreicht. Für Flächen (Knöpfe) bleibt das helle Orange unverändert. */
.fortschritt-punkte li {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grau-flow);        /* #6E6F72 = 5,02:1 — der Schritt, der noch kommt */
  transition: color .2s ease;
}
.fortschritt-punkte li.erledigt { color: #3F6606; }   /* 6,74:1 */
.fortschritt-punkte li.aktiv { color: #B15D32; }      /* 4,68:1 */
/* Der aktive Schritt darf nicht allein an der Farbe erkennbar sein — deshalb
   der Strich darunter, und die erledigten tragen ein Häkchen. */
.fortschritt-punkte li.aktiv span { border-bottom: 2px solid #B15D32; padding-bottom: 2px; }
.fortschritt-punkte li.erledigt span::before { content: "✓ "; }
.fortschritt-schiene {
  height: 6px;
  background: #E4EED2;
  border-radius: 3px;
  overflow: hidden;
}
/* Dunkelgrün statt Hellgrün: #91C73D auf der Schiene sind nur 1,67:1, der
   Balken war praktisch nicht vom Untergrund zu unterscheiden. #4E7B08
   erreicht 4,20:1. */
.fortschritt-fuellung {
  height: 100%;
  width: 25%;
  background: var(--gruen-dunkel);
  border-radius: 3px;
  transition: width .35s ease;
}

/* ---------- Kachel-Auswahl statt Dropdown ----------
   Das Radio bleibt ein echtes Radio: Pfeiltasten, Screenreader und der Betrieb
   ohne JavaScript funktionieren damit von selbst. Es ist nur nicht zu sehen —
   `opacity: 0` statt `display: none`, sonst wäre es auch für die Tastatur weg. */
.kachel-gruppe { border: none; margin-bottom: 30px; }
.kachel-gruppe:last-of-type { margin-bottom: 0; }
.funnel-frage {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.24rem;
  line-height: 1.3;
  color: var(--grau-text);
  margin-bottom: 6px;
  padding: 0;
}
.funnel-hilfe { font-size: .86rem; margin-bottom: 18px; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel-breit { grid-column: 1 / -1; }
/* Eine ausgeblendete Kachel MUSS verschwinden: `display` aus `.kachel` (0,1,0)
   schlägt die Vorgabe des Browsers für `[hidden]` (die gar keine Spezifität hat).
   Ohne diese Regel stand die Ergotherapie-Kachel weiter da, obwohl das Skript sie
   auf hidden gesetzt hatte — gemessen am 07.09.2026: hidden=true, display=grid. */
/* Marken-R (Kundenhinweis 08.09.2026). <sup> allein wäre zu groß und würde die
   Zeilenhöhe aufziehen: Der Standard setzt 0,83em und hebt über `vertical-align:
   super` an, was in einer 1,2rem-Zeile sichtbar mitwandert. Fester Wert plus
   `line-height: 0` hält die Zeile ruhig. */
.marken-r {
  font-size: .58em;
  vertical-align: super;
  line-height: 0;
  font-weight: inherit;
  letter-spacing: 0;
}

.kachel[hidden] { display: none; }

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  min-height: 66px;
  padding: 14px 16px 15px;
  /* Nicht --hellgrau (#D9D9D9): Der Rahmen ist die einzige Kante, an der man
     die Kachel als bedienbares Feld erkennt, und lag bei 1,41:1 gegen das Weiß
     dahinter. WCAG 1.4.11 verlangt für solche Kanten 3:1 — #8E9093 sind 3,20:1. */
  border: 2px solid #8E9093;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.kachel input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  top: 0; left: 0;
  margin: 0;
  cursor: pointer;
}
/* Das Zeichen vor der Beschriftung, seit 07.09.2026. Es trägt keine eigene
   Aussage — die steht im Text darunter — und ist deshalb im Markup mit
   aria-hidden ausgezeichnet: Ein Screenreader liest die Kachel unverändert. */
.kachel-ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #EFF7E1;
  color: var(--gruen-dunkel);
  margin-bottom: 9px;
  transition: background .15s ease, color .15s ease;
}
.kachel-ico svg { width: 20px; height: 20px; }
.kachel:has(input:checked) .kachel-ico,
.kachel.gewaehlt .kachel-ico { background: var(--gruen-dunkel); color: #fff; }
.kachel-titel {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .98rem;
  color: var(--grau-text);
  line-height: 1.25;
}
.kachel-zusatz { font-size: .8rem; color: var(--grau-flow); line-height: 1.3; }
.kachel:hover { border-color: var(--gruen); background: #FAFDF4; }
.kachel:hover:not(.gewaehlt) { transform: translateY(-2px); }
/* Fokus: Der alte Rahmen der Formularfelder lag bei 1,18:1 und war praktisch
   unsichtbar. Orange auf Weiß sind 2,9:1 — zusammen mit dem 3 px breiten
   Versatz ist der Fokus eindeutig zu sehen. */
.kachel:focus-within {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-color: var(--gruen);
}
/* Doppelt abgesichert: :has() für Browser, die es können, plus die Klasse,
   die das Skript setzt. Fällt eines aus, greift das andere. */
.kachel:has(input:checked),
.kachel.gewaehlt {
  border-color: var(--gruen-dunkel);
  background: #F1F8E4;
  transform: none;
}
/* Der gewählte Zustand darf nicht nur an der Farbe hängen. Der Haken liegt
   seit 07.09. dauerhaft im Markup und wird nur ein- und ausgeblendet — sonst
   erscheint er hart, während die Kachel weich umfärbt. */
.kachel::after {
  content: "✓";
  position: absolute;
  top: 10px; right: 11px;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--gruen-dunkel);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.kachel:has(input:checked)::after,
.kachel.gewaehlt::after { opacity: 1; transform: scale(1); }

/* Die Rückmeldung auf die zuletzt gegebene Antwort. Sie steht seit 07.09.2026
   über der nächsten Frage statt unter der beantworteten und bleibt damit
   lesbar. Solange sie leer ist, belegt sie keinen Platz. */
.funnel-antwort {
  font-size: .88rem;
  line-height: 1.5;
  color: #3F6606;              /* 6,74:1 auf #F1F8E4 */
  background: #F1F8E4;
  border-left: 3px solid var(--gruen);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 24px;
}
.funnel-antwort:empty { display: none; }
/* Die Klasse setzt das Skript bei jedem Wechsel neu. Ohne den Umweg über eine
   Klasse liefe die Animation nur beim ersten Aufbau der Seite: Ein geänderter
   Textinhalt startet keine CSS-Animation. */
.funnel-antwort.ist-neu { animation: funnel-schritt-auf .3s ease backwards; }

.funnel-schritt-anzeige {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  margin-bottom: 22px;
}
.feld-optional { font-weight: 400; color: var(--grau-flow); font-size: .85em; }
.formfeld { margin-bottom: 22px; }
/* Zwei kurze Felder nebeneinander (Vor-/Nachname, PLZ und Ausbildung): Der
   Funnel bleibt so trotz der zusätzlichen Pflichtangaben gleich lang.
   align-items: end richtet die Unterkanten aus, also die Eingabefelder. Ohne
   das stand das rechte Feld tiefer, sobald seine Beschriftung zweizeilig wurde —
   und sie wechselt seit 07.09. mit der Antwort aus Schritt 1. */
.formfeld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: end; }
.formfeld label {
  display: block;
  font-size: .92rem;
  color: var(--grau-text);
  margin-bottom: 8px;
}
.formfeld input,
.formfeld select,
.formfeld textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--grau-text);
  border: 1.5px solid var(--gruen-mittel); /* Mockup: schlanker Rahmen */
  border-radius: 6px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(85, 86, 90, .07);
}
/* Der bisherige Fokus war ein hellgrüner Schein bei 1,18:1 gegen das Weiß des
   Feldes — auf einem normalen Bildschirm nicht zu erkennen. Jetzt derselbe
   orange Rahmen wie bei den Kacheln, damit der Fokus im ganzen Formular
   gleich aussieht. */
.formfeld input:focus-visible,
.formfeld select:focus-visible,
.formfeld textarea:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-color: var(--gruen-dunkel);
}
.formfeld input:focus,
.formfeld select:focus,
.formfeld textarea:focus { border-color: var(--gruen-dunkel); }

/* Ein Feld, das der Server oder die Prüfung beanstandet hat. */
.formfeld.hat-fehler input,
.formfeld.hat-fehler select { border-color: #B3401A; }
.feld-fehler {
  display: block;
  font-size: .82rem;
  line-height: 1.4;
  color: #B3401A;
  margin-top: 6px;
}

/* Dateifeld für den freiwilligen Lebenslauf (07.09.2026). Der Standardknopf des
   Browsers sieht in jedem Browser anders aus und passt nirgends zum Formular;
   ::file-selector-button färbt genau diesen Knopf, ohne das Feld nachzubauen —
   ein nachgebautes Dateifeld verliert Tastaturbedienung und Screenreader-Text. */
.formfeld-datei input[type="file"] {
  width: 100%;
  font-family: var(--font-text);
  font-size: .92rem;
  color: var(--grau-text);
  border: 1.5px dashed var(--gruen-mittel);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
}
.formfeld-datei input[type="file"]::file-selector-button {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: #C1500F;          /* 4,75:1 gegen Weiß, wie die übrigen Knöpfe (05.10.2026) */
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
}
.formfeld-datei input[type="file"]:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
.feld-hinweis {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: #5D5D5D;               /* 6,58:1 gegen Weiß */
  margin-top: 7px;
}

.formfeld-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .84rem;
  margin-bottom: 26px;
}
/* flex: none — ohne das drückt der lange Label-Text das Kästchen zusammen:
   gemessen 13 statt 18 px breit, also gequetscht und schwer zu treffen.
   22 px sind zugleich näher an der Mindestgröße für Fingertipps. */
.formfeld-checkbox input {
  flex: none;
  margin-top: 2px;
  width: 22px; height: 22px;
  accent-color: var(--gruen-dunkel);
}
.formfeld-checkbox input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Der Link in der Einwilligung stand bis 07.09.2026 im Browser-Blau: Für ihn
   gab es keine Farbregel, während die Fußnote darunter längst grün war. Genau
   dieser eine Link führt zur Datenschutzinformation und war der einzige, der
   nicht nach dieser Seite aussah. #3F6606 sind 6,74:1 auf Weiß. */
.formfeld-checkbox label a { color: #3F6606; }

/* Auf dem Handy steht die Hauptaktion oben — sie kommt im Quelltext zuerst.
   Auf dem Desktop sitzt „Zurück" wieder links, wie man es erwartet. */
.funnel-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 34px;
}
.funnel-buttons .btn { text-align: center; }
@media (min-width: 561px) {
  .funnel-buttons { flex-direction: row; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .funnel-buttons .btn-outline { order: -1; }
}
.funnel-schritt { display: none; }
.funnel-schritt.aktiv { display: block; }

/* Ein Schritt kommt von unten herein, die Kacheln darin kurz nacheinander.
   Wichtig: animation-fill-mode ist `backwards`, nicht `both`. Mit `both` bliebe
   der Endzustand der Animation (transform: none) als gesetzter Wert stehen und
   hätte das transform des :hover überschrieben — die Kacheln hätten sich nach
   dem ersten Schrittwechsel nicht mehr angehoben. */
@keyframes funnel-schritt-auf {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes funnel-kachel-auf {
  from { opacity: 0; transform: translateY(9px); }
}
.funnel-schritt.aktiv { animation: funnel-schritt-auf .3s ease backwards; }
.funnel-schritt.aktiv .kachel {
  animation: funnel-kachel-auf .32s ease backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* Die drei Zeilen unter dem Formular. Sie beantworten, was kurz vor dem
   Absenden aufkommt, und stehen deshalb dort und nicht im Fließtext daneben. */
.funnel-vertrauen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EAF0DC;
}
.funnel-vertrauen li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--grau-flow);   /* 5,02:1 auf Weiß */
}
.funnel-vertrauen svg { width: 15px; height: 15px; color: var(--gruen-dunkel); flex: none; }

.funnel-erfolg {
  display: none;
  text-align: center;
  border: 2px solid var(--gruen);
  border-radius: 18px;
  background: linear-gradient(170deg, #FCFEF7, #F0F7E0);
  padding: 52px 36px;
}
.erfolg-haken {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  background: var(--gruen-dunkel);
  color: #fff;
}
.erfolg-haken svg { width: 28px; height: 28px; }
.funnel-erfolg h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.funnel-fehler {
  display: none;
  color: #B3401A;
  background: #FDEEE6;
  border: 1px solid var(--orange);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .88rem;
  margin-top: 18px;
}
.funnel-fussnote {
  font-size: .78rem;
  line-height: 1.5;
  color: #5D5D5D; /* dezent über die Farbe, nicht über die Deckkraft — sonst sinkt der Kontrast mit */
  margin-top: 22px;
}
.funnel-fussnote a { color: #3F6606; }

/* Honeypot — für Menschen unsichtbar */
.hp-feld { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Galerie / Dein neuer Arbeitsplatz ---------- */
.arbeitsplatz {
  background: var(--bg-hell-grund) url("../img/bg-hell.webp") center / cover no-repeat;
  padding: 100px 0 90px;
}
.arbeitsplatz-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}
.arbeitsplatz h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-align: right; }
/* Bedienelemente brauchen 3:1 gegen ihre Umgebung (WCAG 1.4.11) — für Rahmen
   und Pfeilzeichen gilt das ebenso wie für Text. #91C73D kam auf 2,0:1. */
.arbeitsplatz .pfeil-btn { border-color: var(--gruen-auf-hell); color: var(--gruen-auf-hell); }
.arbeitsplatz .pfeil-btn:hover { background: rgba(145, 199, 61, .12); }
.galerie-slider {
  display: flex;
  gap: 18px; /* Mockup gemessen */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie-slider::-webkit-scrollbar { display: none; }
.galerie-slider img {
  flex: 0 0 auto;
  height: 220px; /* Mockup gemessen */
  width: auto;
  border-radius: 12px;
  scroll-snap-align: start;
  box-shadow: 0 10px 24px rgba(85, 86, 90, .15);
  /* Die globale Regel `img { max-width: 100% }` ist für Fließtextbilder
     richtig, im waagerechten Slider aber falsch: Bei 390 px Bildschirmbreite
     wurde galerie-2 (Original 1200 × 600) auf die Containerbreite von 342 px
     gequetscht und stand dann bei 342 × 220 statt 440 × 220 — sichtbar in die
     Breite gestaucht. Hier gibt es nichts zu begrenzen, es wird ja gescrollt. */
  max-width: none;
}
.arbeitsplatz .slider-balken { background: #DCE8C2; }

/* ---------- Footer ---------- */
.site-footer {
  background: #E0EECA; /* Mockup gemessen */
  padding: 64px 0 48px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-logo img { height: 58px; width: auto; }
.footer-nav { display: flex; flex-direction: column; gap: 14px; }
.footer-nav a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #446B07; /* nicht --gruen-dunkel: #4E7B08 ergibt auf #E2ECC8 nur 4,1:1 */
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }
/* KI-Transparenzhinweis (07.09.2026).
   Die Regel hieß bis heute .ai-hinweis und war tote CSS: Im Markup stand sie auf
   keiner der vier Seiten, die Icon-Datei fehlte, der Hinweis war schlicht nicht da.
   Er steht jetzt als Abschnitt 8 in bewerbung-datenschutz.html — der Ort, an dem
   die Agenturregel ihn neben dem Impressum vorsieht. Das Impressum liegt auf
   physiopark.berlin und ist von hier aus nicht änderbar; der Satz dafür geht mit
   der Übergabe an den Kunden.
   Keine opacity: Deckkraft senkt den Kontrast unsichtbar mit. Die Farbe steht am
   Absatz selbst, nicht nur am Kasten — gemessen wurde nach dem Einbau #6E6F72
   statt des gesetzten Werts, weil die Absatzregel des Rechtstextes gewinnt.
   #5D5D5D ergibt auf Weiß 6,58:1 — nachgerechnet, nicht geschätzt. Das Icon
   trägt seine Abstufung in der SVG. */
.ki-transparenz {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 10px;
}
.ki-transparenz p { color: #5D5D5D; }
.ki-transparenz img { flex: none; width: 22px; height: 22px; margin-top: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .erwartet-grid, .team-grid, .bewerben-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Das Bild fraß 420 px der ersten Bildschirmseite (gemessen 390×844): Badge,
     Überschrift und Knopf passten dahinter nicht mehr gemeinsam ins Bild.
     Deshalb liegt es oben und wird beschnitten.

     07.09.2026, zweiter Anlauf: Die Deckelung auf 200 px war zu scharf. Aus
     einem 4:5-Bild (1000×1250) wurde bei 342 px Breite ein Streifen von
     342×200 — also 1,71:1 aus 0,8:1, gut zwei Drittel der Höhe weggeschnitten.
     Mit object-position 16 % lagen beide Gesichter außerhalb: von der Seniorin
     blieb der Hinterkopf, vom Therapeuten die Stirn. Jetzt 3:2 (228 px bei
     342 px Breite) und der Ausschnitt tiefer angesetzt — gemessen liegen die
     Gesichter zwischen 25 % und 55 % der Bildhöhe, die 38 % holen sie in den
     Rahmen. Beim Ändern der Bilddatei diesen Wert nachmessen, nicht raten. */
  .hero-bild { order: -1; }
  .hero-bild img {
    max-height: none;
    /* 05.10.2026: 4:3 wie die Bühnen von physiopark.berlin und Zeitlos.
       Bei 342 px Breite 257 px hoch, die Gesichter (25 bis 55 % der
       Bildhöhe) bleiben mit 38 % im Rahmen. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 38%;
  }
  /* Die Knöpfe rücken auf dem Handy VOR den Fließtext. Gemessen bei 390×844
     stand der erste Bewerben-Knopf bei 913 px, also unter der ersten
     Bildschirmseite; der beschreibende Absatz davor kostet allein rund 110 px.
     Badge, Überschrift, die drei Zahlen und der Knopf stehen jetzt zusammen im
     ersten Bild, der Fließtext direkt darunter. Verschoben wird nur ein Absatz,
     also nichts Fokussierbares: Die beiden Knöpfe behalten ihre Reihenfolge
     zueinander, die Tastaturreihenfolge ändert sich durch den Umbau nicht. */
  .hero-grid > div:first-child { display: flex; flex-direction: column; }
  .hero-grid > div:first-child > .hero-text { order: 6; margin-top: 22px; }
  /* Die Knöpfe standen ohne jeden Abstand an der Zahlenreihe (gemessen: 0 px),
     weil .hero-fakten kein margin-bottom hat und der Absatz, der sonst dazwischen
     lag, per order nach unten gewandert ist. */
  .hero-grid > div:first-child > .hero-buttons { order: 5; margin-top: 30px; }
  .schritte-grid { grid-template-columns: 1fr; gap: 44px; max-width: 420px; }
  .vorteile-kopf, .arbeitsplatz-kopf { flex-direction: column; align-items: flex-start; }
  .arbeitsplatz h2 { text-align: left; }
  .team-cta { text-align: center; }
}
@media (max-width: 560px) {
  .formfeld-paar { grid-template-columns: 1fr; gap: 0; }

  /* Die drei Kennzahlen lagen als Flex-Zeile mit Umbruch: zwei passten
     nebeneinander, die dritte fiel allein in eine zweite Zeile und stand darunter
     wie ein vergessener Rest. Als Raster steht die erste bewusst über der vollen
     Breite, die beiden kürzeren darunter nebeneinander. Die Reihe muss deshalb
     DREI Einträge haben — bei zweien bekäme der erste die volle Breite und der
     zweite stünde allein darunter, also genau der Zustand, den diese Regel
     beseitigt. */
  .hero-fakten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  .hero-fakten li:first-child { grid-column: 1 / -1; }

  /* Auswahlkacheln im Bewerbungsformular: Das zweispaltige Raster ging bei fünf
     Feldern nicht auf — zwei nebeneinander, eines halb allein mit leerer Spalte
     daneben, zwei über die volle Breite. Drei verschiedene Breiten unter-
     einander, dazu „Noch in / Ausbildung" im Umbruch. Auf dem Handy steht jetzt
     eine Kachel je Zeile, Zeichen und Beschriftung nebeneinander: gleiche
     Breite, ruhige Liste, größere Tippfläche. */
  .kacheln { grid-template-columns: 1fr; gap: 10px; }
  /* Raster statt Flex mit Umbruch: Bei Flex rutschte jeder Titel, der breiter
     als der Rest der Zeile war („Abschluss aus dem Ausland"), unter das Zeichen
     — in derselben Liste standen die Beschriftungen dann an zwei verschiedenen
     Kanten. Im Raster hat das Zeichen eine eigene Spalte über beide Zeilen,
     Beschriftung und Zusatz stehen darüber und darunter an derselben Kante. */
  .kachel {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-height: 0;
    padding: 13px 15px;
  }
  /* Alle drei Teile ausdrücklich setzen. Mit `grid-row: 1 / -1` allein landete
     der Zusatz in der 38 px schmalen Zeichenspalte und brach dort Wort für Wort
     um — bei impliziten Zeilen zählt -1 noch nicht die zweite Zeile mit. */
  .kachel-ico { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  /* Platz für das Häkchen oben rechts, damit es nie auf der Beschriftung liegt. */
  .kachel-titel { grid-column: 2; grid-row: 1; padding-right: 26px; }
  .kachel-zusatz { grid-column: 2; grid-row: 2; padding-right: 26px; }

  /* Nach der Bildkorrektur begann der Bewerben-Knopf bei y 831 von 844 sichtbaren
     Pixeln — er stand also faktisch unter der Kante. Statt das Bild wieder
     kleinzudrücken, sind die Zwischenräume oben gestrafft: Der Hero fängt höher
     an, die Spalten stehen enger, und die Auszeichnung über der Überschrift
     passt in eine Zeile statt in zwei. Gemessen bringt das rund 80 px zurück,
     ohne dass irgendwo etwas aneinander klebt. */
  .hero-grid { gap: 30px; }
  .hero .badge {
    font-size: .72rem;
    padding: 8px 14px;
    letter-spacing: .03em;
  }
  .hero h1 { margin-top: 18px; }
  .hero-subline { margin-bottom: 14px; }
  /* Unten 0: Der Abstand zu den Knöpfen kommt hier von .hero-buttons, sonst
     addieren sich beide auf 56 px und schieben den Knopf aus dem ersten Bild. */
  .hero-fakten { margin: 14px 0 0; }
}
/* Das Menü klappt bei 960 px zusammen, nicht erst bei 760 px. Gemessen: Bei
   880 px bricht „ÜBER UNS" auf zwei Zeilen und das Logo wird gegen den ersten
   Menüpunkt gedrückt, bei 761 px überlappen beide. Sauber sitzt die Leiste erst
   ab etwa 910 px — 960 ist zugleich der Punkt, an dem die Seite ohnehin auf
   einspaltig umschaltet. */
@media (max-width: 960px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--creme);
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid rgba(145, 199, 61, .2);
  }
  .main-nav.offen { display: flex; }
  .nav-toggle { display: block; }
}
@media (max-width: 760px) {
  /* Kurzform, deshalb steht sie hier und nicht bei den übrigen Handy-Regeln
     weiter oben: Sie liegt später in der Datei und würde ein dortiges
     padding-top wieder überschreiben. 24 statt 40 px, damit der Bewerben-Knopf
     ins erste Bild rückt. */
  .hero { padding: 24px 0 64px; }
  .erwartet, .team, .schritte, .bewerben { padding: 72px 0; }
  .zitat-karte { padding: 48px 24px 32px; }
  .zitat-karte .badge, .vorteile-karte .badge { white-space: normal; width: max-content; max-width: 90%; }
  /* Auf dem Handy bleibt für die Karte sonst zu wenig Innenbreite: Zwei
     Kacheln nebeneinander plus 2×32 px Polster ergaben Kacheln unter 130 px. */
  .funnel-karte { padding: 24px 18px 22px; border-radius: 16px; }
  .kacheln { gap: 10px; }
  .kachel { padding: 12px 13px 13px; }
  .kachel-ico { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 7px; }
  .kachel-ico svg { width: 17px; height: 17px; }
  /* Fünf Beschriftungen passen nebeneinander nur, wenn sie kleiner werden und
     die Sperrung fällt. Der Balken darunter zeigt den Fortschritt ohnehin. */
  .fortschritt-punkte li { font-size: .63rem; letter-spacing: .02em; }
  .stellen { padding: 68px 0; }
  .stellen-grid { grid-template-columns: 1fr; }
  .stellen-initiativ { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .stellen-initiativ-aktionen { align-items: stretch; }
  .stellen-initiativ-aktionen .btn { text-align: center; }
}

/* ============================================================
   Danke-Seite (danke.html)
   Bewusst dieselben Bausteine wie die Karriereseite: Hero-Anmutung,
   Schritt-Karten, Footer. Die Danke-Seite ist der Moment, in dem der
   Bewerber zum ersten Mal etwas von uns zurückbekommt — sie soll wie
   dieselbe Praxis aussehen, nicht wie eine Systemmeldung.
   ============================================================ */
.danke {
  background: var(--bg-hell-grund) url("../img/bg-hell.webp") center / cover no-repeat;
  padding: 92px 0 84px;
}
.danke-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.danke-karte { max-width: 700px; }
.danke-bild img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 30%;
}
.danke-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3F6606; /* dunkler als --gruen-dunkel: auf #F8FCF1 sind das 7,4:1 */
  background: rgba(145, 199, 61, .18);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 22px;
}
.danke h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 22px; }
.danke-text { font-size: 1.02rem; max-width: 620px; }
.danke-text strong { font-weight: 700; }

.danke-hilfe { background: #fff; padding: 64px 0 84px; }
.danke-hilfe p { font-size: .92rem; color: var(--grau-text); max-width: 640px; }
.danke-hilfe a { color: #3F6606; }

/* Zwei Knöpfe nebeneinander (Danke-Seite) — auf der Karriereseite steht dort nur einer. */
.schritte-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Fehlerseite des Handlers ohne JavaScript nutzt dieselben Bausteine. */
.danke-aktionen { margin-top: 28px; }
/* 404.html (06.10.2026): zwei Knöpfe, die bei 320 px sauber untereinander
   umbrechen statt mit dem Wortabstand als einzigem Abstand. */
.fehler-aktionen { display: flex; flex-wrap: wrap; gap: 12px 16px; }

/* ============================================================
   Einwilligungsbanner (nur sichtbar, wenn in tracking.js eine ID steht)
   ============================================================ */
.consent-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 999;
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(85, 86, 90, .22);
}
.consent-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 24px;
  max-width: 1018px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.consent-text {
  flex: 1 1 380px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--grau-text);
  margin: 0;
}
.consent-text a { color: #3F6606; }
.consent-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
/* Ablehnen muss gleichwertig erreichbar sein — kein versteckter Textlink. */
.consent-buttons .btn { white-space: nowrap; }

@media (max-width: 960px) {
  .danke-grid { grid-template-columns: 1fr; gap: 40px; }
  .danke-bild { order: -1; }
}
@media (max-width: 760px) {
  .danke { padding: 56px 0 56px; }
  .danke-hilfe { padding-top: 48px; }
  .danke-hilfe { padding-bottom: 56px; }
  .consent-inner { padding: 18px; gap: 16px; }
  .consent-buttons { width: 100%; }
  .consent-buttons .btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Stimmen aus dem Team (stimmen.html) — 03.09.2026
   Eigene Seite, weil der QR-Code im gedruckten Bewerber-Notizheft ein Ziel
   braucht, das sich nie wieder ändert. Ein Sprungziel (#team) auf der
   Karriereseite wäre dafür zu fragil: Es verschwindet mit jeder Umsortierung
   der Startseite, ohne dass es jemand bemerkt.

   Die Blöcke stehen bewusst am Dateiende. Sie benutzen dieselben Bausteine wie
   die übrigen Sektionen (.badge, .anfz, .zitat-text, Typo-Skala der h2), damit
   die Seite nicht wie ein Fremdkörper wirkt.
   ============================================================ */

.stimmen-kopf {
  background: var(--bg-hell-grund) url("../img/bg-hell.webp") center / cover no-repeat;
  padding: 118px 0 72px;
}
.stimmen-kopf h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 24px; }
.stimmen-intro { max-width: 620px; font-size: 1rem; }

/* ---------- Video ---------- */
.stimmen-video { padding: 84px 0 0; }
.stimmen-video h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 30px; }
.stimmen-video h2 .zeile-1 { color: var(--gruen-auf-hell); font-weight: 800; }
.stimmen-video h2 .zeile-2 { color: var(--gruen-auf-hell); font-weight: 400; }

.video-rahmen {
  position: relative;
  border: 2px solid var(--gruen-dunkel);
  border-radius: 18px;
  overflow: hidden;
  background: var(--grau-text);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}
.video-rahmen img,
.video-rahmen iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.video-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  /* Der Schleier dient nur der Optik — er darf kein Textträger sein. Ein
     halbdurchlässiger Grund über einem Foto hat keinen berechenbaren Kontrast:
     Über einer hellen Bildstelle käme Weiß auf 55 % Schwarz nur auf 2,07:1.
     Damit Weiß rechnerisch über 4,5:1 bleibt, bräuchte es 83 % Deckkraft — das
     wäre kein Vorschaubild mehr. Deshalb steht die Beschriftung unten in einem
     nahezu deckenden Balken (siehe .video-label). */
  background: rgba(38, 39, 41, .34);
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
  color: #fff;
}
.video-start:hover { background: rgba(38, 39, 41, .45); }
.video-start:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }
.video-ikon {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  flex: none;
}
.video-ikon::before {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent #fff;
}
/* Der Balken ist zu 94 % deckend. Selbst wenn darunter eine rein weiße
   Bildstelle liegt, kommt seine Luminanz nur auf 0,074 — weißer Text darauf
   steht damit bei mindestens 8,5:1, unabhängig vom Vorschaubild. Gemessen an
   der gerenderten Seite: 14,95:1 (Zeile) bzw. 11,85:1 (Kleintext). */
.video-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 20px;
  background: rgba(38, 39, 41, .94);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
}
.video-label small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: .82rem;
  /* Nicht per opacity abdunkeln — das senkt den Kontrast unsichtbar mit.
     #E4E5E6 auf dem Schleier ergibt 8,4:1. */
  color: #E4E5E6;
}
/* Der Knopf richtet den Kreis mittig aus; der Balken sitzt absolut am Fuß.
   Ohne diesen Ausgleich säße der Kreis optisch zu tief. */
.video-start { padding-bottom: 34px; }
.video-hinweis {
  margin-top: 16px;
  font-size: .84rem;
  color: var(--grau-text);
}
.video-hinweis a { color: #3F6606; }

/* ---------- Zitate ---------- */
.stimmen-liste { padding: 84px 0 96px; }
.stimmen-liste h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 56px; }
.stimmen-liste h2 .zeile-1 { color: var(--gruen-auf-hell); font-weight: 800; }
.stimmen-liste h2 .zeile-2 { color: var(--gruen-auf-hell); font-weight: 400; }

/* Drei Stimmen in einem Zweispalter: Die Zitate sind zu lang für drei schmale
   Spalten (der Satz bräche dort auf vier bis fünf Wörter je Zeile). Die dritte
   Karte steht deshalb mittig in der zweiten Reihe, in der Breite einer Spalte —
   statt links angeschlagen mit einer leeren Fläche daneben. */
.stimmen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 52px 34px;
}
.stimme-karte:nth-child(3) {
  grid-column: 1 / -1;
  width: calc(50% - 17px);
  justify-self: center;
}
.stimme-karte {
  position: relative;
  border: 2px solid var(--gruen-dunkel);
  border-radius: 18px;
  background: rgba(252, 254, 247, .96);
  padding: 54px 34px 34px;
  box-shadow: var(--shadow);
}
.stimme-karte .badge {
  position: absolute;
  top: -22px;
  left: 28px;
  background: #fff;
  font-size: .85rem;
}
.stimme-karte .badge em { font-style: normal; font-weight: 500; }
.stimme-karte .zitat-text { margin-bottom: 22px; }
.stimme-karte .zitat-autor { display: flex; align-items: center; gap: 14px; }
.stimme-karte .zitat-autor picture { flex: none; display: block; line-height: 0; }
.stimme-karte .portraet {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--gruen);
}

/* ---------- Abschluss ---------- */
.stimmen-cta {
  background: var(--bg-gruen-grund) url("../img/bg-gruen.webp") 78% 50% / cover no-repeat;
  padding: 90px 0;
  text-align: center;
}
.stimmen-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: #fff; margin-bottom: 20px; }
.stimmen-cta h2 .zeile-1,
.stimmen-cta h2 .zeile-2 { color: #fff; }
.stimmen-cta h2 .zeile-2 { font-weight: 600; }
.stimmen-cta p { max-width: 520px; margin: 0 auto 34px; color: #fff; font-size: .96rem; }
.stimmen-cta-knoepfe { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.stimmen-cta .btn-outline { background: transparent; border-color: #fff; color: #fff; }
.stimmen-cta .btn-outline:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 760px) {
  .stimmen-kopf { padding: 92px 0 56px; }
  .stimmen-video { padding-top: 60px; }
  .stimmen-liste { padding: 60px 0 72px; }
  .stimmen-liste h2 { margin-bottom: 46px; }
  /* minmax(0, 1fr) statt 1fr: Die automatische Mindestbreite einer Rasterspalte
     richtet sich nach ihrem Inhalt. Gemessen bei 320 px war die Spalte dadurch
     319,6 px breit, obwohl das Raster nur 272 px hat — die Karte lief 24 px über
     den rechten Rand. Mit der 0 als Minimum darf die Spalte schrumpfen. */
  .stimmen-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .stimme-karte:nth-child(3) { width: auto; }
  .stimme-karte .portraet { width: 56px; height: 56px; }
  /* Auf der schmalen Karte bricht die Auszeichnung sonst über den Rand hinaus. */
  .stimme-karte .badge { position: static; transform: none; display: inline-flex; margin-bottom: 18px; white-space: normal; }
  /* Gemessen bei 320 px: In der Karte lief der Inhalt 10 px über ihren
     Innenraum — lange Wörter („Geschäftsführung") brechen ohne diese Regel
     nicht. Die Seite selbst lief nicht über, deshalb fiel es der reinen
     Seitenmessung nicht auf. */
  .stimme-karte { padding: 28px 22px 28px; overflow-wrap: anywhere; }
  .video-ikon { width: 62px; height: 62px; }
  .video-ikon::before { border-width: 12px 0 12px 19px; }
  .video-label { font-size: 1rem; }
  .stimmen-cta { padding: 66px 0; }
  .stimmen-cta-knoepfe .btn { flex: 1 1 auto; }
}

/* Zwei Knöpfe unter der Zitat-Karte, seit die Team-Sektion auf stimmen.html
   weiterführt. Steht hinter der Media Query von oben, damit die Ausrichtung
   auch auf schmalen Breiten erhalten bleibt. */
/* Zwei Knöpfe untereinander, gleich breit. Nebeneinander passen sie in die
   rechte Spalte nur bis 1440 px und brechen darunter ungleich lang um — das
   sah nach Versehen aus. Gemessen: 218 px und 229 px in einer 480-px-Spalte. */
.team-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.team-cta .btn { min-width: 250px; text-align: center; }

/* ============================================================
   Rechtstextseite (bewerbung-datenschutz.html) — 03.09.2026
   Bewusst schmale Zeilenlänge und ruhige Typografie: Der Text muss lesbar
   sein, nicht beworben werden. Keine Verlaufsflächen, keine Auszeichnungen.
   ============================================================ */

.rechtstext { padding: 118px 0 96px; }
.rechtstext .container { max-width: 760px; }
.rechtstext h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 24px; }
.rechtstext-intro {
  font-size: 1rem;
  color: var(--grau-text);
  padding-bottom: 28px;
  border-bottom: 2px solid var(--hellgrau);
  margin-bottom: 12px;
}
.rechtstext h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gruen-dunkel);
  margin: 40px 0 12px;
}
.rechtstext p { margin-bottom: 14px; }
.rechtstext ul { margin: 0 0 16px 22px; }
.rechtstext li { margin-bottom: 9px; }
.rechtstext strong { color: var(--grau-text); }
/* #3F6606 statt Brand-Hellgrün: 6,9:1 auf Weiß. Das helle Grün käme auf 2,0:1
   und wäre als Fließtext-Link nicht erkennbar.
   `:not(.btn)` ist nicht kosmetisch: Ohne die Ausnahme greift diese Regel
   (Spezifität 0,1,1) auch auf den Knopf am Seitenende und schlägt dort die
   weiße Knopfschrift aus `.btn` (0,1,0). Gemessen waren das 1,44:1 —
   dunkelgrüne Schrift auf dunklem Orange, praktisch unlesbar. */
.rechtstext a:not(.btn) { color: #3F6606; }
.rechtstext a:not(.btn):hover { text-decoration: none; }
.rechtstext-cta { margin-top: 48px; }

@media (max-width: 760px) {
  .rechtstext { padding: 92px 0 64px; }
  .rechtstext h2 { margin-top: 32px; }
}

/* ============================================================
   Kontrast-Nachzug 03.09.2026 — Eigenkonsistenz, keine Designänderung
   Das Projekt hat die Regel schon: Brand-Orange als FLÄCHE bleibt hell,
   Brand-Orange als TEXT wird auf #B15D32 abgedunkelt (siehe .fortschritt-punkte,
   dort nachgerechnet: 4,68:1 statt 2,54:1). Drei Stellen folgten dieser eigenen
   Regel noch nicht. (Nachtrag vom selben Tag: Die Knopffläche selbst wurde
   anschließend ebenfalls auf #B15D32 gezogen — siehe .btn-primary.)
   ============================================================ */

/* Der Rahmen bleibt Brand-Orange, nur die Schrift wird dunkler. Nebeneinander
   gehalten ist der Unterschied kaum zu sehen; lesbar ist erst die zweite.
   Gemessen: 2,50:1 vorher, 4,69:1 jetzt. */
.btn-outline { color: #C1500F; }   /* 05.10.2026, vorher #B15D32 */

/* Der Skip-Link taucht nur bei Tastaturbedienung auf und steht in keinem
   Mockup. Weiß auf hellem Orange ergab 2,54:1 — ausgerechnet das Element für
   Menschen, die auf Tastatur angewiesen sind, war das am schlechtesten lesbare
   der Seite. Auf Dunkelgrün sind es gemessene 5,05:1. */
.skip-link { background: var(--gruen-dunkel); }

/* WCAG 2.2 (2.5.8) verlangt 24 × 24 CSS-Pixel für Klickziele. Die Footer-Links
   lagen bei 23 px — ein Pixel zu wenig, und auf dem Handy stehen sie dicht
   untereinander. Das Polster vergrößert die Fläche, nicht die Schrift. */
.footer-nav a { display: inline-block; padding: 4px 0; }

/* ============================================================
   Belege / Auszeichnungen — 03.09.2026
   Die Siegel lagen als Dateien im Projekt und wurden nirgends genutzt. Sie
   stehen jetzt direkt vor dem Bewerbungsweg: Ein Beleg wirkt dort, wo die
   Entscheidung fällt, nicht im Fuß der Seite.
   ============================================================ */

/* ---------- Stimmen im Video (08.09.2026) ----------
   Drei Hochformat-Aufnahmen im Reel-Maß 9:16, wie sie vom Kunden kommen.
   Die Höhe steht über aspect-ratio UND über width/height am <video> fest —
   sonst springt das Layout, sobald das Poster geladen ist. */
.videos { padding: 96px 0; background: var(--creme); }
.videos-kopf { max-width: 640px; margin-bottom: 40px; }
.videos-kopf h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.videos-kopf h2 .zeile-2 { color: var(--gruen-auf-hell); font-weight: 400; }
.videos-kopf p { font-size: .95rem; color: var(--grau-text); }
.videos-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}
.video-el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #1d2a10;   /* Ton der Aufnahmen, damit vor dem Poster kein Weiß blitzt */
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(30, 45, 10, .13);
}
.video-el:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.video-titel { margin: 14px 0 2px; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.video-dauer { font-size: .84rem; color: var(--grau-text); }

@media (max-width: 900px) {
  .videos { padding: 68px 0; }
  .videos-kopf { margin-bottom: 28px; }
  /* Auf dem Handy nebeneinander schieben statt untereinander stapeln: Drei
     9:16-Videos übereinander sind rund 1700 px Scrollstrecke. Dasselbe Muster
     wie im Vorteile-Karussell, deshalb vertraut. Das Scrollen bleibt im
     Kasten, die Seite selbst läuft nicht über. */
  .videos-liste {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .videos-liste > li { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .videos-liste { grid-auto-columns: 82%; }
}

.belege { padding: 96px 0; background: #fff; }
.belege-inner {
  display: grid;
  /* 380 statt 420 px für die Textspalte, und 32 statt 44 px Abstand zwischen
     den Siegeln: Bei 420/44 brauchte die Reihe 504 px und hatte nur 494 —
     das dritte Siegel rutschte in eine zweite Zeile und die Reihe wirkte
     wie ein Versehen. Gemessen bei 1440 px Fensterbreite. */
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 48px;
  align-items: center;
}
.belege h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 18px; }
.belege h2 .zeile-1 { color: var(--gruen-auf-hell); font-weight: 800; }
.belege h2 .zeile-2 { color: var(--gruen-auf-hell); font-weight: 400; }
.belege-text p { font-size: .95rem; max-width: 380px; }
.belege-liste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  list-style: none;
  flex-wrap: wrap;
}
/* Die Siegel sind fremde Marken — sie werden nicht eingefärbt, nicht
   beschnitten und nicht verzerrt. Nur eine gemeinsame Höhe, damit die Reihe
   ruhig wirkt; die Breite ergibt sich aus dem jeweiligen Seitenverhältnis. */
.belege-liste img { height: 104px; width: auto; max-width: none; display: block; }
.belege-liste li:last-child img { height: 128px; } /* BEST100 ist hochformatig */

/* Links in der Belegspalte und an den Siegeln.
   Ohne diese beiden Regeln standen sie im Browser-Blau (#0000EE) und mit dem
   Chrome-Standardfokus da — als einzige Links der Seite. Derselbe Fehler ist
   im Projekt schon einmal an der Fußnote des Formulars aufgetreten. */
.belege-text a,
.belege-quelle a { color: var(--gruen-dunkel); text-underline-offset: 3px; }
/* Der Hover verstaerkt die Unterstreichung, statt die Farbe zu wechseln.
   Ein Wechsel auf --fokus (#D2551A) sah richtig aus, misst gegen Weiss aber
   nur 4,16:1 und liegt damit unter den 4,5:1 fuer Fliesstext — der Link waere
   im Hover schlechter lesbar geworden als davor. #4E7B08 hat 5,05:1. */
.belege-text a:hover,
.belege-quelle a:hover { color: var(--gruen-dunkel); text-decoration-thickness: 2px; }
.belege-text a:focus-visible,
.belege-quelle a:focus-visible,
.belege-liste a:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
.belege-liste a { display: block; }
.belege-liste a:hover img { opacity: .82; }

/* kununu-Bewertung. Die Sterne sind zwei Lagen desselben Symbols: unten die
   leere Reihe, darüber dieselbe Reihe gefüllt, auf 82 % beschnitten
   (4,1 von 5). Kein Widget, kein Fremdskript, keine Einwilligung nötig.

   Hintergrund ist WEISS, nicht Creme: .belege trägt background: #fff.
   Gegen Weiß misst der gefüllte Stern #D2551A 4,16:1, liegt also über den
   3:1 für grafische Elemente. Die leere Reihe war zuerst eine graue Fläche
   (#D8DBD5) und kam damit auf 1,40:1 gegen Weiß und 2,97:1 gegen den
   gefüllten Stern — die Grenze zwischen „voll" und „leer", also genau die
   Information, war knapp nicht erkennbar. Sie ist jetzt eine Kontur in
   #8E9093 (3,20:1 gegen Weiß), dieselbe Farbe wie die Kachelrahmen.
   Die Sterne sind aria-hidden, die Angabe steht als Text daneben. */
.kununu-wertung {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px;
}
.sterne {
  --stern: 21px;
  position: relative;
  flex: none;
  width: calc(var(--stern) * 5);
  height: var(--stern);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9093' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size: var(--stern) var(--stern);
  background-repeat: repeat-x;
  overflow: hidden;
}
.sterne-voll {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D2551A'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size: var(--stern) var(--stern);
  background-repeat: repeat-x;
}
.kununu-wertung figcaption { font-size: .92rem; line-height: 1.4; color: var(--grau-text); }
.kununu-wertung figcaption strong { color: var(--gruen-dunkel); font-size: 1.05rem; }
.kununu-wertung figcaption span { display: block; font-size: .84rem; }
.belege-quelle { font-size: .92rem; }

@media (max-width: 900px) {
  .belege { padding: 68px 0; }
  .belege-inner { grid-template-columns: 1fr; gap: 36px; }
  .belege-text p { max-width: none; }
  .belege-liste { gap: 32px; justify-content: flex-start; }
  .belege-liste img { height: 78px; }
  .belege-liste li:last-child img { height: 96px; }
}

/* Bewerber-Hotline unter dem Funnel-Hinweis. Bewusst zurückhaltend: Der Funnel
   bleibt der Hauptweg, die Nummer ist das Angebot für alle, die vorher reden
   wollen. #3F6606 ergibt 6,9:1 auf hellem Grund. */
.bewerben-hotline { margin-top: 14px; font-size: .92rem; }
.bewerben-hotline a { color: #3F6606; font-weight: 600; white-space: nowrap; }

/* ============================================================
   05.10.2026: Umbrüche und Bildzuschnitt (Paket A)
   ============================================================ */
/* Stimmen-Pillen: "Thema:" am kleinen Handy weglassen, sonst zweizeilig. */
@media (max-width: 420px) {
  .pille-vorsatz { display: none; }
  /* Gemessen bei 360 px: "Deine Vorteile auf einen Blick" und
     "Ansprechbare Geschäftsführung" brachen zweizeilig um. */
  .badge { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .zitat-karte .badge, .vorteile-karte .badge { max-width: calc(100% - 16px); }
  .stimme-karte .badge { font-size: .78rem; }
}
/* Videoplakat: Gesichter sitzen oben im Hochkantfoto. 06.10.2026: bei 15 %
   fehlte der vorderen Person das halbe Gesicht, erst 35 % zeigt beide ganz
   (gegengerechnet 15/35/50 %). */
.video-rahmen img.plakat-fokus { object-position: 50% 35%; }

/* ============================================================
   Nachbesserung nach der Gegenprüfung, 06.10.2026
   ============================================================ */

/* Wahlkarten im Funnel: Strichsymbol im Pastellquadrat ist die verbotene
   Symbolkachel (Agenturregel 02.10.2026). Die Symbole bleiben im Markup
   (aria-hidden), werden aber nicht mehr gezeigt: die Kachel ist schon eine
   gerahmte Karte mit Häkchen bei Auswahl, die Beschriftung trägt allein.
   Ein oranger Punkt an ihrer Stelle stand gemessen als loser Fleck über dem
   Titel und wurde deshalb verworfen. */
.kachel-ico { display: none; }
@media (max-width: 560px) {
  .kachel { grid-template-columns: minmax(0, 1fr); }
  .kachel-titel, .kachel-zusatz { grid-column: 1; }
}

/* Gestrichelte Rahmen kennt das Mockup nicht: Karte mit grünem Rahmen. */
.stellen-initiativ { border: 2px solid var(--gruen); }
.formfeld-datei input[type="file"] { border-style: solid; }

/* Drei helle Flächen hintereinander (Schritte, Bewerben, Arbeitsplatz).
   Im Mockup steht „Jetzt ohne Lebenslauf bewerben" auf Weiss. */
.bewerben { background: #fff; }

/* Am Handy dieselbe H2-Stufe wie physiopark.berlin (--grad-h2 unten 1,6rem).
   Mit 1,9rem standen bei 360 px Einzelwörter allein in der Zeile
   („Diese Stellen / sind / gerade offen."). */
@media (max-width: 420px) {
  .erwartet h2, .vorteile h2, .team h2, .schritte h2, .stellen h2,
  .arbeitsplatz h2, .stimmen-video h2, .stimmen-liste h2, .stimmen-cta h2,
  .videos-kopf h2, .belege h2, .bewerben h2 { font-size: 1.6rem; }
}

/* ============================================================
   DACHLEISTE (06.10.2026)
   Dieselbe Leiste wie auf physiopark.berlin und physiopark-zeitlos.de
   (dort assets/css/bauteile.css, Abschnitt K7). Werte als Hex, weil
   diese Seite andere Token-Namen führt. Wer hier ändert, ändert dort mit.
   ============================================================ */
.bereichsleiste { background: #33530A; position: relative; z-index: 51; }
.bereichsleiste-innen {
  display: flex;
  align-items: stretch;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 38px;
}
.bereich {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;                            /* sonst Lücke zwischen Text und Zusatz */
  padding: 8px 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  transition: color .14s linear;
}
.bereich:hover { color: #fff; }
.bereich:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bereich.aktiv { color: #fff; font-weight: 700; }
.bereich.aktiv::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gruen);
}
.bereich-karriere { margin-left: auto; color: #fff; }
.bereich-karriere::before {
  content: "";
  margin-right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.bereich-pille {
  margin-left: 10px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .66rem;
  letter-spacing: .06em;
  background: rgba(255, 255, 255, .1);
}
@media (max-width: 1120px) { .bereichsleiste-innen { padding-left: 16px; padding-right: 16px; } }
/* Zusatz nur, wo Platz ist: bei 768 px ragte die Leiste mit ihm 4 px über. */
@media (max-width: 860px) { .bereich-lang { display: none; } }
@media (max-width: 400px) { .bereich-fuer { display: none; } }
@media (max-width: 520px) {
  .bereichsleiste-innen { gap: 16px; min-height: 36px; }
  .bereich { font-size: .66rem; letter-spacing: .04em; }
  .bereich-pille { display: none; }
}
@media print { .bereichsleiste { display: none !important; } }

/* Kopf in derselben Flucht wie die Dachleiste (06.10.2026). Steht hier am
   Ende, damit keine frühere Kopfregel ihn überschreibt. Unter 1120 px 16 px
   Seitenpolster wie die Leiste darüber, unter 760 px 70 px Mindesthöhe wie
   --kopf-hoehe auf physiopark.berlin. Der Burger bekommt 46 × 46 px wie dort:
   vorher 42 × 45, damit war der Kopf am Handy 1 px niedriger als drüben. */
@media (max-width: 1120px) { .header-inner { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 760px) {
  .header-inner { min-height: 70px; }
  .nav-toggle { min-width: 46px; min-height: 46px; }
}

/* ============================================================
   FUSSVERWEISE AUF DIE SCHWESTERSEITEN (06.10.2026)
   Wie .footer-auftritte auf physiopark.berlin und Zeitlos: zwei leise Pillen
   unter dem Logo, gleiche Registerkarte. Bewusst nur im Fuß und nicht im
   Handymenü, das bleibt nach der Entscheidung vom 07.09. ohne Ausgänge.
   Farbe #33530A auf #E0EECA mit weißem Schleier (Mischton #F3F8EA):
   8,2:1, nachgerechnet.
   ============================================================ */
.footer-marke { display: flex; flex-direction: column; gap: 20px; }
/* Untereinander statt nebeneinander: Nebeneinander waren beide Pillen 700 px
   breit, die Linkspalte rechts passte bei 1440 px nicht mehr daneben und
   rutschte unter das Logo (gemessen 06.10.2026). */
.footer-auftritte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-auftritte a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.3;
  color: #33530A;
  text-decoration: none;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(51, 83, 10, .18);
  border-radius: 999px;
  padding: 7px 15px;
  transition: background .14s linear, transform .2s ease-out;
}
.footer-auftritte a:hover { background: #fff; transform: translateY(-2px); }
.footer-auftritte a:focus-visible { outline: 2px solid #33530A; outline-offset: 2px; }
.footer-auftritte svg { width: 15px; height: 15px; flex: none; }
@media (prefers-reduced-motion: reduce) { .footer-auftritte a:hover { transform: none; } }