/* ============================================================
   PHYSIOPARK: Bauteile aus dem Mockup (Paket C, 05.10.2026)

   Lädt NACH style.css und schwung.css. Hier steht nichts Erfundenes:
   jedes Bauteil gibt es im Canva-Mockup der Karriereseite (Brandkit
   15.png) und auf der Karriereseite selbst. Klassennamen wie dort
   (01_karriereseite/website/assets/css/style.css), die Werte auf die
   Token dieser Website abgebildet. Julian, 05.10.2026: Das Mockup ist
   verbindlich, mehr Leben nur aus seinen Bauteilen.

     K1  Dunkelgrüner Slider     .vorteile, .karten-slider, .v-karte
     K2  Team-Umschalter         .team-bereich, .zitat-karte .zitat-badge
     K3  Schrittkarten           .schritte-reihe, .schritt-karte, .schritt-nummer
                                 hell: .formate .format mit .format-pille
     K4  Bildkarussell           .galerie-kopf, .galerie-slider figure
     K5  "Das erwartet dich"     .erwartet, .erwartet-bilder, .gehalt-box
     K6  Wischreihe (Handy)      .wisch + .wisch-balken (bauteile.js P)
     S   Fallwahl als Liste      .fall-wahl, .umschalter-liste
     Z   Abstände statt style="" .abstand-*, .sprung-abstand

   Verhalten in bauteile.js (Bausteine P, Q, R, S). Ohne Skript bleibt
   alles lesbar: Reihen scrollen nativ, Tafeln stehen untereinander.
   ============================================================ */

/* ============================================================
   K6  WISCHREIHE
   Agenturregel 02.10.2026: Kachelreihen laufen am Handy seitlich, mit
   Anschnitt der nächsten Kachel und Fortschrittslinie, nie untereinander.
   Vorbild myPhysio (.wisch + fortschrittAn), die Linie aber in der
   Mockup-Form (.slider-balken, grün auf #DCE8C2).
   Ab 761 px gilt das Raster der jeweiligen Reihe unverändert.
   ============================================================ */

.wisch-balken { display: none; }

@media (max-width: 760px) {
  /* :is() hält die Spezifität bei zwei Klassen, damit die 1fr-Regeln
     in style.css (Abschnitt 10, 560 und 760 px) hier verlieren. */
  .wisch:is(.weiche, .bento, .wegweiser, .zusagen, .leistungen, .tafel-raster, .formate, .schritte-reihe),
  .leistungen.wisch:has(> :nth-child(4):last-child) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 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;
  }
  /* Karten mit Pille auf der Oberkante: die Reihe schneidet sonst die
     Pille ab (overflow-x: auto beschneidet auch senkrecht). */
  .wisch:is(.formate, .schritte-reihe) { padding-top: 30px; }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > * { scroll-snap-align: start; min-width: 0; }
  .wisch > [hidden] { display: none; }

  .wisch-balken { display: block; margin-top: var(--m3); }
  .wisch-balken[hidden] { display: none; }

  /* Zusagen sind am Rechner eine Tabelle mit 1-px-Fugen. Als Wischreihe
     braucht jede Zusage ihren eigenen Rahmen. */
  .zusagen.wisch { background: none; border: 0; border-radius: 0; }
  .zusagen.wisch > .zusage { border: 1px solid var(--linie); border-radius: var(--bogen-karte); }

  /* Weiche: die Karte trägt Pille, Satz und Pfeil untereinander */
  .weiche.wisch .weiche-karte { height: 100%; align-items: start; }

  /* Finder auf /behandlungen/: Wer sucht, will Treffer lesen, nicht wischen. */
  .wisch.ist-liste:is(.wegweiser) {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }
  .wisch.ist-liste + .wisch-balken { display: none; }
}

/* Auf dunklem Grund wie die Karriereseite (.vorteile .slider-balken) */
.abschnitt-tief .slider-balken,
.vorteile .slider-balken { background: rgba(255, 255, 255, .5); }

/* ============================================================
   K1  DUNKELGRÜNER SLIDER (Mockup "Deine Vorteile")
   Kopf links, zwei Pfeilkreise rechts, Karten im Schnappraster,
   Fortschrittslinie darunter, ein orangefarbener Knopf mittig.
   Grund wie die Bänder in schwung.css S4: bg-gruen.webp mit 12 %
   Tönung (weisse Schrift am hellsten Punkt 4,97:1).
   ============================================================ */

.vorteile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--abschnitt-luft, var(--m24)) 0;
  color: #fff;
  background:
    linear-gradient(rgba(36, 57, 10, .12), rgba(36, 57, 10, .12)),
    url("../img/bg-gruen.webp") center / cover no-repeat,
    var(--gruen-dunkel);
}
.vorteile-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--m8);
  margin-bottom: var(--m12);
}
.vorteile h2 { font-size: var(--grad-h2); color: #fff; }
.vorteile h2 .zeile-gruen { color: var(--gruen-leuchte); }
.vorteile .sub-strich { background: var(--gruen-leuchte); }
.vorteile-intro { max-width: 560px; margin-top: var(--m4); color: #F2F8E6; }

.vorteile .pfeil-btn {
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}
.vorteile .pfeil-btn:hover { background: rgba(255, 255, 255, .15); }

/* Am Anfang oder Ende der Reihe: Pfeil sichtbar ruhig (aria-disabled) */
.pfeil-btn[aria-disabled="true"] { opacity: .4; cursor: default; transform: none; }
.pfeil-btn[aria-disabled="true"]:hover { background: transparent; transform: none; }
.pfeil-btn:focus-visible,
.karten-slider:focus-visible,
.galerie-slider:focus-visible {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 4px;
}
.vorteile .pfeil-btn:focus-visible,
.vorteile .karten-slider:focus-visible { outline-color: #fff; }

.karten-slider {
  display: flex;
  gap: var(--m6);                    /* Mockup gemessen: 24 px */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 4px 12px;
  margin: -4px -4px 0;
  scroll-padding-inline: 4px;        /* sonst rastet die erste Karte 4 px versetzt ein */
  border-radius: var(--bogen-karte);
}
.karten-slider::-webkit-scrollbar { display: none; }
.v-karte {
  /* Mockup: drei Karten ganz, die vierte etwa zu einem Drittel. Feste 268 px
     liessen bei 1366 px nur 8 px der vierten Karte stehen (06.10.2026), das
     sah nach Darstellungsfehler aus. Jetzt teilt sich die Reihe in 3,4
     Karten, nie schmaler als die 268 px des Mockups. */
  flex: 0 0 max(268px, calc((100% - 3 * var(--m6)) / 3.4));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #E2EFCC;               /* Mockup gemessen, wie Karriereseite */
  border-radius: var(--bogen-karte);
  padding: var(--m6) var(--m5) var(--m8);
  color: var(--tinte);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
/* "Verordnungsmanagement" ist das längste Wort einer Pille: bei 268 px
   Kartenbreite passt es mit diesem Innenabstand gerade noch. */
.v-karte .badge { font-size: .78rem; padding: 6px 14px; gap: 8px; margin-bottom: var(--m6); background: #fff; max-width: 100%; }
.v-karte .badge::before { width: 9px; height: 9px; }
.v-karte h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--tinte);
  margin-bottom: var(--m3);
  hyphens: manual;
  overflow-wrap: break-word;
}
/* --tinte statt --tinte-weich: auf #E2EFCC kam #6E6F72 nur auf 4,2:1 */
.v-karte p { font-size: .92rem; line-height: 1.55; color: var(--tinte); }
.v-karte a { color: var(--gruen-link); }
.v-karte .weiter { margin-top: auto; padding-top: var(--m4); }
.vorteile-cta { text-align: center; margin-top: var(--m12); }

/* ============================================================
   K2  TEAM-UMSCHALTER (Mockup "Echte Einblicke")
   Namensliste links, gerahmte Zitatkarte rechts, Pille auf der Kante.
   ============================================================ */

.team-bereich h2 { font-size: var(--grad-h2); margin-bottom: var(--m5); }
.team-bereich .zitat-karte {
  border: 2px solid var(--gruen-dunkel);
  border-radius: 18px;               /* Karriereseite .zitat-karte */
  background: #fff;
  padding: var(--m12) var(--m10) var(--m10);
  margin-top: 22px;                  /* Platz für die Pille auf der Kante */
}
.zitat-karte .zitat-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  background: #fff;
  font-size: .85rem;
  color: var(--tinte);
}
.pille-vorsatz { font-weight: 800; margin-right: .3em; }
.zitat-badge .zitat-thema-wert { font-weight: 500; }
.team-person:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 4px; }

/* Ohne Hintergrundfoto auf Zeitlos /team/: Fläche wie die Startseite,
   aber kürzer gesetzt, die Seite hat davor schon Bilder. */
.team-bereich.team-kompakt { padding: var(--abschnitt-luft, var(--m24)) 0; }

/* ============================================================
   K3  SCHRITTKARTEN (Mockup "In 3 Schritten")
   Dunkelgrüne Karte, grüner Rahmen, Pille "● 01" auf der Kante.
   ============================================================ */

.schritte-kopf { text-align: center; margin-left: auto; margin-right: auto; }
.schritte-kopf .sub-strich { margin-left: auto; margin-right: auto; }
.schritte-reihe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--m10) + 8px) var(--m6);
  padding-top: 26px;                 /* die Pille ragt 24 px über die Karte */
  margin: 0;
}
@media (min-width: 961px) {
  .schritte-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.schritt-karte {
  position: relative;
  background: var(--gruen-dunkel);   /* weiss darauf 5,1:1 */
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
  color: #fff;
  text-align: center;
  padding: var(--m12) var(--m6) var(--m8);
  box-shadow: 0 14px 30px rgba(78, 123, 8, .3);
}
.schritt-nummer,
.format-pille {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-pille);
  padding: 7px 22px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--gruen-dunkel);
}
.schritt-nummer::before,
.format-pille::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.schritt-etikett {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--m3);
}
.schritt-karte h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #fff;
  margin-bottom: var(--m3);
}
.schritt-karte p { font-size: .9rem; line-height: 1.55; color: #fff; }

/* Formate auf /fortbildungen/ und /fortbildungen/themen/: dieselbe Karte
   hell (weiss, grüner Rahmen), die Pille trägt die Dauer. */
.formate { padding-top: 26px; row-gap: calc(var(--m10) + 8px); }
.formate .format {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
  padding: var(--m12) var(--m6) var(--m6);
  box-shadow: var(--schatten-gruen);
}
.formate .format .format-pille { font-size: .95rem; padding: 6px 18px; }
.formate .format h3 { margin-bottom: var(--m2); hyphens: manual; }
.formate .format p { flex: 1 1 auto; }
/* Ohne wandernden Strich, dafür unterstrichen wie .weiter-hell: in der
   schmalen Karte bricht "Dieses Format anfragen" sonst um und der Strich
   hängt allein rechts daneben. */
.formate .format .weiter {
  display: inline;
  margin-top: var(--m5);
  font-size: .74rem;
  line-height: 1.7;
  text-decoration: underline;
  text-decoration-color: var(--gruen);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.formate .format .weiter::after { display: none; }
.formate .format .weiter:hover { text-decoration-color: var(--gruen-dunkel); }

/* ============================================================
   K4  BILDKARUSSELL (Mockup "Dein neuer Arbeitsplatz")
   Pfeilkreise links, Überschrift rechtsbündig, Bilder 12 px gerundet,
   Fortschrittslinie darunter. Baustein I in main.js blättert und zeichnet.
   ============================================================ */

.galerie-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m8);
  margin-bottom: var(--m10);
}
.galerie-kopf .abschnitt-kopf { margin: 0 0 0 auto; text-align: right; }
.galerie-kopf .abschnitt-kopf .sub-strich { margin-left: auto; }
.galerie-kopf .abschnitt-kopf p { margin-left: auto; max-width: 48ch; }
/* Ohne Skript blättern die Pfeile nicht: dann gibt es sie nicht. */
html:not(.js) .galerie-kopf .slider-pfeile,
html:not(.js) .vorteile-kopf .slider-pfeile { display: none; }

.galerie-slider { gap: var(--m5); padding-bottom: 6px; }
.galerie-slider figure {
  flex: 0 0 auto;
  width: min-content;
  margin: 0;
  scroll-snap-align: start;
}
.galerie-slider figure img {
  /* 06.10.2026: bei 320 px Höhe passten auf 1366 px genau vier Hochformate,
     vom fünften blieben 16 bis 28 px. 300 px lässt rund ein Drittel stehen. */
  height: clamp(220px, 23vw, 300px);
  width: auto;
  max-width: none;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(85, 86, 90, .15);
}
.galerie-slider figcaption {
  margin-top: var(--m3);
  font-family: var(--font-sub);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tinte);
}

/* ============================================================
   K5  "DAS ERWARTET DICH" (Mockup, Karriereseite .erwartet)
   Zwei versetzte Fotos links, rechts Überschrift, Text und die
   gerahmte Faktenkarte mit grün hinterlegter erster Zeile.
   ============================================================ */

.erwartet-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--m16);
  align-items: start;
}
.erwartet-grid h2 { font-size: var(--grad-h2); }
/* Mit Knopfzeile (Zeitlos #karriere, 06.10.2026): Knöpfe links unter den
   Fotos wie im Mockup, der Text läuft rechts über beide Zeilen. */
.erwartet-grid:has(> .erwartet-knoepfe) {
  grid-template-areas: "bilder text" "knoepfe text";
  grid-template-rows: auto 1fr;
  row-gap: var(--m10);
}
/* Benannte Felder nur mit Knopfzeile: ohne grid-template-areas legte der
   Browser sonst neue Spuren an und verschob K5 auf der Berliner Startseite. */
.erwartet-grid:has(> .erwartet-knoepfe) > .erwartet-bilder { grid-area: bilder; }
.erwartet-grid:has(> .erwartet-knoepfe) > .erwartet-text { grid-area: text; }
.erwartet-grid > .erwartet-knoepfe { grid-area: knoepfe; align-self: start; justify-content: center; }
.erwartet-text .fliess { margin: var(--m5) 0 var(--m10); max-width: 34em; }
.erwartet-text .vorteile-karte { margin-top: var(--m10); }   /* Platz für die Pille auf der Kante */

/* Geometrie der Karriereseite: grosses Hochformat, das zweite Foto
   überlappt unten rechts mit weissem Rand. */
.erwartet-bilder.split-versetzt .bild-1 {
  width: 78%;
  border-radius: 14px;
  box-shadow: var(--schatten-2);
}
.erwartet-bilder.split-versetzt .bild-2 {
  position: relative;
  width: 62%;
  margin: -38% 0 0 auto;
  border-radius: 14px;
  border: 6px solid #fff;
  box-shadow: var(--schatten-3);
}
/* Zwei Hochformate (/pflegeeinrichtungen/verordnungsmanagement/) */
.erwartet-bilder.paar-hoch .bild-1 { width: 70%; }
.erwartet-bilder.paar-hoch .bild-2 { width: 54%; margin-top: -56%; }

.gehalt-box {
  background: var(--gruen);
  border-radius: 10px;
  padding: var(--m4) var(--m5);
  margin-bottom: var(--m6);
  color: var(--gruen-nacht);         /* 6,1:1 auf #91C73D */
}
.gehalt-box strong {
  display: block;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--gruen-nacht);
}
.gehalt-box > span { font-family: var(--font-sub); font-size: .95rem; color: var(--gruen-nacht); }
/* Die Zahl im Titel zählt hoch (main.js D) und erbt Schrift und Farbe des
   Titels; .fakt span aus style.css gilt nur für die Unterzeile. */
.gehalt-box strong .zahl-wert,
.fakt strong .zahl-wert { font: inherit; color: inherit; }

.erwartet-siegel {
  display: flex;
  align-items: center;
  gap: var(--m4);
  flex-wrap: wrap;
  margin-top: var(--m8);
}
.erwartet-siegel img { height: 64px; width: auto; }
.erwartet-siegel p { flex: 1 1 220px; font-size: .92rem; line-height: 1.5; color: var(--tinte-weich); margin: 0; }

@media (max-width: 960px) {
  .erwartet-grid { grid-template-columns: 1fr; gap: var(--m10); }
  .erwartet-grid:has(> .erwartet-knoepfe) { grid-template-areas: "bilder" "text" "knoepfe"; grid-template-rows: none; }
  .erwartet-grid > .erwartet-knoepfe { justify-content: flex-start; }
  .erwartet-bilder { max-width: 520px; }
  .erwartet-bilder.split-versetzt .bild-1 { width: 72%; }
  .erwartet-bilder.split-versetzt .bild-2 { width: 62%; margin-top: -36%; }
  .erwartet-bilder.paar-hoch .bild-1 { width: 66%; }
  .erwartet-bilder.paar-hoch .bild-2 { width: 54%; margin-top: -52%; }
}

/* ============================================================
   S  FALLWAHL ALS LISTE (/aerzte/, Form des Team-Umschalters)
   Links die drei Fälle senkrecht wie die Namensliste im Mockup,
   rechts die Tafel. Die Zusammenfassung ist die gerahmte Karte mit
   der Pille auf der Kante.
   ============================================================ */

.umschalter.umschalter-liste {
  display: flex;
  flex-direction: column;
  gap: var(--m3);
  margin: 0;
  max-width: 420px;
}
.umschalter.umschalter-liste button {
  display: flex;
  align-items: center;
  gap: var(--m4);
  min-height: 0;
  padding: 16px 20px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--tinte);
  background: #fff;
  border: 2px solid #D9D9D9;
  border-radius: 12px;
  box-shadow: none;
}
.umschalter.umschalter-liste button::before {
  content: "";
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gruen);
  flex: none;
}
.umschalter.umschalter-liste button:hover { border-color: var(--linie-stark); transform: translateX(4px); }
html .umschalter.umschalter-liste button[aria-selected="true"] {
  background: #fff;
  color: var(--tinte);
  border-color: var(--gruen);
  box-shadow: var(--schatten-gruen);
}
.umschalter.umschalter-liste button[aria-selected="true"]::before { background: var(--orange); }
.umschalter.umschalter-liste button:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 4px; }

.fall-wahl { display: grid; gap: var(--m10); }
@media (min-width: 961px) {
  .fall-wahl { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--m12); align-items: start; }
}
.fall-wahl .fall { grid-template-columns: 1fr; gap: var(--m10); }
.fall-wahl .fall-rand {
  position: relative;
  background: #fff;
  border: 2px solid var(--gruen-dunkel);
  border-radius: 18px;
  padding: var(--m10) var(--m8) var(--m8);
  margin-top: 22px;
  box-shadow: var(--schatten-2);
}
.fall-rand .fall-pille {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  white-space: nowrap;
  background: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  color: var(--tinte);
}
@media (max-width: 420px) {
  .fall-rand .fall-pille { white-space: normal; font-size: .78rem; padding: 6px 14px; }
}

/* ============================================================
   Z  ABSTÄNDE STATT style="" (CSP ohne 'unsafe-inline')
   Raster aus style.css, Abschnitt 1 (--m2 bis --m12).
   ============================================================ */

.abstand-m2 { margin-top: var(--m2); }
.abstand-m3 { margin-top: var(--m3); }
.abstand-m4 { margin-top: var(--m4); }
.abstand-m5 { margin-top: var(--m5); }
.abstand-m6 { margin-top: var(--m6); }
.abstand-m8 { margin-top: var(--m8); }
.abstand-m10 { margin-top: var(--m10); }
.abstand-m12 { margin-top: var(--m12); }
.abstand-unten-m12 { margin-bottom: var(--m12); }
.sprung-abstand { scroll-margin-top: 100px; }
.ohne-zeiger { cursor: default; }
.breite-text { max-width: 720px; }
.breite-lesen { max-width: 820px; }
.h2-gross { font-size: var(--grad-h2); }
/* Kleiner Zwischentitel in Kontakt- und Terminkarten */
.karten-zwischentitel {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tinte);
  margin-bottom: 10px;
}
.text-fett-sub { font-family: var(--font-sub); font-weight: 700; color: var(--tinte); }
.notiz-leise { font-size: var(--grad-s); color: var(--tinte-leise); }
.text-096 { font-size: .96rem; }

/* ============================================================
   MOBIL UND RUHIG
   ============================================================ */

@media (max-width: 760px) {
  .vorteile-kopf { flex-direction: column; align-items: flex-start; gap: var(--m5); margin-bottom: var(--m8); }
  .karten-slider {
    gap: var(--m4);
    margin-inline: calc(-1 * var(--m6));
    padding: 4px var(--m6) 12px;
    scroll-padding-inline: var(--m6);
    border-radius: 0;
  }
  .v-karte { flex-basis: min(84%, 300px); }

  .galerie-kopf { flex-direction: column-reverse; align-items: flex-start; gap: var(--m5); }
  .galerie-kopf .abschnitt-kopf { margin: 0; text-align: left; }
  .galerie-kopf .abschnitt-kopf .sub-strich { margin-left: 0; }
  .galerie-kopf .abschnitt-kopf p { margin-left: 0; }
  .galerie-slider {
    margin-inline: calc(-1 * var(--m6));
    padding: 0 var(--m6) 6px;
    scroll-padding-inline: var(--m6);
  }
  .galerie-slider figure img { height: 260px; }
  /* Querformate wären bei 260 px Höhe 325 px breit, vom nächsten Bild
     blieben 21 px. Schmaler gesetzt, ganz sichtbar, nicht beschnitten. */
  .galerie-slider figure.quer img { height: auto; width: min(68vw, 290px); }

  .team-bereich .zitat-karte { padding: var(--m10) var(--m6) var(--m6); }
  .schritt-karte { padding: var(--m10) var(--m5) var(--m6); }
  /* Zeitlos /team/: unter 750 px Höhe, die Seite hat davor schon zwei
     Abschnitte mit Text und Bildern (gemessen 05.10.2026: vorher 816 px). */
  .team-bereich.team-kompakt { padding: var(--m10) 0; }
  .team-kompakt .team-grid { gap: var(--m5); }
  .team-kompakt .team-liste { margin-top: var(--m5); gap: var(--m2); }
  .team-kompakt .team-person { padding: 8px 14px; }
  .team-kompakt .team-person strong { font-size: 1rem; }
  .team-kompakt .anfz { font-size: 2.2rem; margin-bottom: var(--m2); }
  .team-kompakt .zitat-text { margin-bottom: var(--m4); }
}

@media (max-width: 420px) {
  .pille-vorsatz { display: none; }
  .zitat-karte .zitat-badge { font-size: .78rem; padding: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .karten-slider, .galerie-slider, .wisch { scroll-behavior: auto; }
  .wisch-balken .fortschritt,
  .slider-balken .fortschritt { transition: none; }
  .umschalter.umschalter-liste button:hover { transform: none; }
}

/* ============================================================
   NACHBESSERUNG 06.10.2026 (Gegenprüfung)
   ============================================================ */

/* /unternehmen/ Geschäftsführung: zwei Porträts als Paar neben dem Text,
   auch am Handy nebeneinander statt 200 px linksbündig. */
.gf-split .abschnitt-kopf { margin-bottom: 0; }
.personen-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m6); }
.personen-paar .person img { max-width: none; }
@media (max-width: 760px) {
  .gf-split { gap: var(--m8); }
  .personen-paar { gap: var(--m4); }
  .personen-paar .person img { max-width: none; }
  .personen-paar .person strong { font-size: .92rem; }
  .personen-paar .person span { font-size: .88rem; }
}

/* Schlussband (.cta-band) nach Mockup "Deine Vorteile im Physiopark Berlin":
   kurze Linie über der Überschrift, Zeile 1 weiss und fett, Zeile 2
   hellgrün und dünn, oranger Schlusspunkt wie im dunklen Slider. */
.cta-band .sub-strich { margin-inline: auto; background: var(--gruen-leuchte); }
.cta-band .headline .zeile-gruen { color: var(--gruen-leuchte); }
.cta-band .headline .punkt { color: var(--orange); }

/* Telefonnummern brechen nicht mitten in der Nummer um
   (gemessen: "030 23 53 / 46 26" im Schlussband bei 1366 px). */
a[href^="tel:"] { white-space: nowrap; }

/* Formen, die das Mockup nicht kennt (vor dem Umbau entstanden):
   Seitenstreifen und gestrichelte Rahmen werden zur hellen Karte mit
   grünem Rahmen bzw. zum normalen Kartenrahmen. */
.fall-schritt {
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-feld);
  background: #fff;
}
.merk {
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
}
.weiche-nachsatz,
.finder-leer { border: 1px solid var(--linie-stark); }

/* Randkarte neben dem Text nicht auf die Höhe der Textspalte strecken
   (/erster-termin/ "Was Sie mitbringen": untere Hälfte war leer). */
.weg-tafel .fall-rand { height: auto; align-self: start; }

/* Team-Umschalter: alle Stimmen stehen im Markup. Mit Skript zeigt die
   Karte nur die gewählte; ohne Skript stehen alle untereinander, die
   wirkungslosen Knöpfe und die Themenpille entfallen. */
html.js .stimme-inhalt:not(.aktiv) { display: none; }
html:not(.js) .team-bereich .team-liste,
html:not(.js) .zitat-karte .zitat-badge { display: none; }
html:not(.js) .stimme-inhalt + .stimme-inhalt { margin-top: var(--m6); padding-top: var(--m6); border-top: 1px solid var(--linie); }
.wisch:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 2px; }

/* ============================================================
   K7  DACHLEISTE, KARRIERE IM MENÜ, KARRIERE-HINWEIS (06.10.2026)
   Rückmeldung Lucas Fichter: Die Auftritte sollen wie EINE Website
   wirken, und Karriere muss so präsent sein wie „Jobportal“ auf der
   Altseite. Formen nur aus dem Mockup: Pille mit Orangepunkt,
   gerahmte Karte mit grünem Rand (Faktenkarte), oranger Knopf.
   Die Leiste steht mit denselben Klassen auch auf der Karriereseite
   (01_karriereseite/website/assets/css/style.css, Abschnitt Dachleiste).
   Verhalten in bauteile.js, Baustein T.
   ============================================================ */

.bereichsleiste {
  background: var(--gruen-tief);
  position: relative;
  z-index: 101;                       /* über dem klebenden Kopf (100) */
}
.bereichsleiste-innen {
  display: flex;
  align-items: stretch;
  gap: var(--m8);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--m6);
  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);    /* 7,5:1 auf #33530A */
  text-decoration: none;
  transition: color var(--zeit-tipp) 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: var(--bogen-pille);
  padding: 2px 10px;
  font-size: .66rem;
  letter-spacing: .06em;
  background: rgba(255, 255, 255, .1);
}
.bereich-karriere:hover .bereich-pille { background: rgba(255, 255, 255, .2); }

@media (max-width: 1120px) {
  .bereichsleiste-innen { padding-left: var(--m4); padding-right: var(--m4); }
}
/* 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: var(--m4); min-height: 36px; }
  .bereich { font-size: .66rem; letter-spacing: .04em; }
  .bereich-pille { display: none; }
}

/* Karriere als Menüpunkt: fett und mit dem Orangepunkt der Pillen. */
.nav-punkt > a.nav-karriere { font-weight: 700; }
.nav-punkt > a.nav-karriere::before,
.nav-bereiche a.nav-karriere::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* Im Klappmenü stehen die Punkte auf „Abstand dazwischen“ (Pfeil rechts).
   Beim Karriere-Punkt risse das Punkt und Wort auseinander. */
@media (max-width: 960px) {
  .nav-punkt > a.nav-karriere { justify-content: flex-start; gap: 10px; }
}

/* Die anderen Bereiche im Klappmenü. Auf breiten Schirmen genügt die Leiste. */
.nav-bereiche { display: none; }
@media (max-width: 960px) {
  .nav-bereiche { display: block; margin-top: var(--m6); }
  .nav-bereiche .klapp-kopf {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gruen-link);           /* 7,4:1 wie .nav-klapp .klapp-kopf; --gruen-mittel hatte 3,82:1 */
    margin: 0 0 var(--m2);
  }
  .nav-bereiche a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--linie);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    color: var(--tinte);
    text-decoration: none;
  }
  /* Der Kopf klebt erst, wenn die Leiste weggescrollt ist. Die Menühöhe
     rechnet deshalb ab der gemessenen Unterkante des Kopfs (bauteile.js T1). */
  .main-nav { height: calc(100dvh - var(--menue-oben, var(--kopf-hoehe))); }
}

/* Karriere auf der Berliner Startseite (Team-Abschnitt) und auf Zeitlos (K5) */
.team-bereich .team-grid > div > .badge,
.erwartet-text > .badge { margin-bottom: var(--m5); }
.team-karriere { margin-top: var(--m8); align-items: center; }

/* Der Karriere-Hinweis. Keine Sperrfläche, kein Fokusraub: eine Karte, die
   man übergehen kann. Unten links, weil rechts der Knopf „nach oben“ sitzt. */
.karriere-hinweis {
  position: fixed;
  left: var(--m6);
  bottom: var(--m6);
  z-index: 95;
  width: min(370px, calc(100vw - 2 * var(--m4)));
  padding: var(--m6) var(--m6) var(--m5);
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
  box-shadow: 0 18px 44px rgba(36, 57, 10, .22);
  opacity: 0;
  transform: translateY(18px);
  /* Unsichtbar heisst auch unklickbar: mit opacity 0 allein fing die Karte
     über dem Fuß weiter Klicks ab (Gegenprüfung 06.10.2026). */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--zeit-wechsel) var(--kurve-aus),
              transform var(--zeit-ruhig) var(--kurve-aus),
              visibility 0s linear var(--zeit-wechsel);
}
.karriere-hinweis[hidden] { display: none; }
.karriere-hinweis.sichtbar {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.karriere-hinweis-zu {
  position: absolute;
  top: 8px; right: 8px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinte);
  cursor: pointer;
}
.karriere-hinweis-zu:hover { background: var(--karte-hell); }
.karriere-hinweis-zu svg { width: 20px; height: 20px; }
.karriere-hinweis-titel {
  margin: var(--m4) 0 var(--m2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--tinte);
}
/* --gruen-dunkel statt #66941C: 5,05:1 statt 3,61:1, die Zeile ist Normalschrift unter 24 px. */
.karriere-hinweis-titel .zeile-gruen { color: var(--gruen-dunkel); font-weight: 400; }
.karriere-hinweis-text {
  margin: 0 0 var(--m5);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinte-weich);
}
.karriere-hinweis-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m3) var(--m5);
}
html.karriere-hinweis-offen .nach-oben { opacity: 0; visibility: hidden; }

@media (max-width: 600px) {
  .karriere-hinweis {
    left: var(--m4); right: var(--m4); bottom: var(--m4);
    width: auto;
    padding: var(--m5) var(--m5) var(--m4);
  }
  /* Am Handy nur Pille, Titel und Knöpfe: mit dem Satz deckte die Karte
     gut 40 Prozent des Bildschirms ab (gemessen 06.10.2026, 390 px). */
  .karriere-hinweis-titel { font-size: 1.08rem; margin: var(--m3) 0 var(--m4); padding-right: 36px; }
  .karriere-hinweis-text { display: none; }
  .karriere-hinweis .btn { padding-left: 18px; padding-right: 18px; }
}
/* Bei 320 px lag das Schließkreuz auf der Pille (gemessen 06.10.2026). */
@media (max-width: 359px) {
  .karriere-hinweis .badge-klein { letter-spacing: 0; gap: 6px; padding-left: 10px; padding-right: 10px; }
  .karriere-hinweis-zu { top: 2px; right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .karriere-hinweis { transition: none; transform: none; }
}
@media print {
  .bereichsleiste, .karriere-hinweis { display: none !important; }
}