/* ============================================================
   r12-berlin.css, Gestaltungsrunde 12.10.2026, Paket „Berlin-Unterseiten“
   Aufgaben aus der Anpassungsliste des Teams: W01 Barrierefreiheit, W03 Kontakt (Weißraum unter der Bühne), W04 Ärztinnen und Ärzte (Abstand Bühne zu Abschnitt 2), weitere Seiten von physiopark.berlin ausser Start, Über uns und Team.

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

   Jede Regel ist auf physiopark.berlin begrenzt (data-auftritt) und,
   wo sie nur eine Seite betrifft, auf deren data-seite. Die neuen
   Klassen (.mit-foto, .bw-pfad, .dauer) stehen nur in den Quellen
   40, 45, 48 und 58 dieses Pakets.

     RB1  Bühne bis Abschnitt 2 gleich (W03, W04)
     RB2  Schrittkarten mit Foto (Mockup-Schrittkarte + Fotokarte, G13, G14)
     RB3  Schrittpfad: Linie und Karten folgen dem Scrollen (G12)
     RB4  Pflegeeinrichtungen: Bildausschnitte am Handy
     RB5  Ärztinnen und Ärzte: Praxisteil mit Bild, Schlussband
     RB6  Fortbildungen: Dauerbalken in den Formaten, Themenwahl am Handy
     RB7  Kontakt: Wegkarten und Anschriften mit Foto
     RB8  Barrierefreiheit: Lesbarkeit der Textseite
   ============================================================ */

/* ============================================================
   RB1  BÜHNE BIS ABSCHNITT 2 GLEICH (W03, W04)
   Ursache des Weißraums: schwung.css S12 gibt .buehne-text je Breitenband
   eine feste Mindesthöhe (505, 520, 352, 536 px), damit jede Bühne gleich
   hoch ist. Pille und H1 stehen aber schon ohne sie auf jeder Seite an
   derselben Stelle (Text oben, am Handy Bild zuerst mit festem 4:3).
   Die Mindesthöhe glich nur die Unterkante an, und kurze Bühnentexte
   bekamen darunter bis zu 292 px Leere (Anfrage 390 px: 356 px Lücke
   zwischen Knopf und erstem Inhalt, Ärzte 173, Pflege 156).
   Ohne Mindesthöhe ist die Lücke überall Bühnenluft unten plus
   Abschnittsluft oben, also das Maß zwischen zwei Abschnitten:
   2 × --abschnitt-luft (128 px bei 390, 134 bei 961, 202 bei 1440).
   Gemessen mit scratchpad/bw/luecke.js, Werte im Ergebnis des Pakets.
   ============================================================ */
[data-auftritt="berlin"] .seite-hero.buehne-gleich .buehne-text { min-height: 0; }

/* ============================================================
   RB2  SCHRITTKARTEN MIT FOTO
   Die grüne Schrittkarte des Mockups (K3, Pille „● 01“ auf der Kante)
   trägt oben ein randloses Foto wie die Karten im Bildkarussell. Alle
   Karten einer Reihe haben ein Foto im selben Format, damit Etikett und
   Titel auf einer Höhe stehen (G13). Am Handy bleibt es die Wischreihe
   aus bauteile.css K6, jetzt mit Bild (G14).
   ============================================================ */
[data-auftritt="berlin"] .schritt-karte.mit-foto {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 var(--m8);
}
[data-auftritt="berlin"] .schritt-karte.mit-foto > .schritt-foto {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: calc(var(--bogen-karte) - 2px) calc(var(--bogen-karte) - 2px) 0 0;
  margin: 0 0 var(--m6);
  box-shadow: none;
}
[data-auftritt="berlin"] .schritt-karte.mit-foto > :not(.schritt-foto, .schritt-nummer) { padding-inline: var(--m6); }
[data-auftritt="berlin"] .schritt-karte.mit-foto > .schritt-nummer { z-index: 2; }
/* Lange Titel in schmalen Karten (961 px, vier Spalten): Trennstellen
   stehen als ­ in der Quelle, nie mitten im Wort abgeschnitten. */
[data-auftritt="berlin"] .schritt-karte.mit-foto h3 { hyphens: manual; overflow-wrap: break-word; }
@media (min-width: 961px) and (max-width: 1099px) {
  [data-auftritt="berlin"] .schritt-karte.mit-foto > :not(.schritt-foto, .schritt-nummer) { padding-inline: var(--m4); }
}
/* Ausschnitte je Motiv: Gesichter bleiben im 4:3 */
[data-auftritt="berlin"] .schritt-foto[src$="/pflegeheim-1.webp"] { object-position: 50% 30%; }
[data-auftritt="berlin"] .schritt-foto[src$="/verwaltung-abstimmung.webp"] { object-position: 50% 40%; }
[data-auftritt="berlin"] .schritt-foto[src$="/verwaltung-schreibtisch.webp"] { object-position: 50% 45%; }
[data-auftritt="berlin"] .schritt-foto[src$="/verwaltung-arbeitsplatz.webp"] { object-position: 50% 40%; }
[data-auftritt="berlin"] .schritt-foto[src$="/leistung-neurologie-1.webp"] { object-position: 50% 25%; }
@media (max-width: 760px) {
  [data-auftritt="berlin"] .schritt-karte.mit-foto { padding-bottom: var(--m6); }
  [data-auftritt="berlin"] .schritt-karte.mit-foto > .schritt-foto { margin-bottom: var(--m5); }
  [data-auftritt="berlin"] .schritt-karte.mit-foto > :not(.schritt-foto, .schritt-nummer) { padding-inline: var(--m5); }
}

/* ============================================================
   RB3  SCHRITTPFAD (G12)
   r12-berlin.js setzt .pfad-an an die Reihe und .erreicht an jede Karte,
   die der Leser erreicht hat: am Rechner nach dem Scrollweg, am Handy
   nach dem, was in der Wischreihe zu sehen ist. Eine Linie verbindet die
   Pillen und füllt sich bis zur letzten erreichten Karte. Noch nicht
   erreichte Karten stehen entsättigt da und bekommen ihre Farbe, wenn
   der Pfad sie erreicht.
   Ohne Skript, bei „Bewegung reduzieren“ und im Druck fehlt .pfad-an:
   alle Karten stehen in voller Farbe, keine Linie.
   Nur filter und die Pille ändern sich, damit das Einblenden aus
   bewegung.css (opacity, translate) unberührt bleibt.
   ============================================================ */
[data-auftritt="berlin"] .bw-pfad { position: relative; }
[data-auftritt="berlin"] .bw-pfad > li { position: relative; z-index: 1; }
[data-auftritt="berlin"] .bw-pfad.pfad-an::before,
[data-auftritt="berlin"] .bw-pfad.pfad-an::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--pfad-oben, 26px);
  left: var(--pfad-links, 0px);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  pointer-events: none;
}
[data-auftritt="berlin"] .bw-pfad.pfad-an::before {
  width: var(--pfad-laenge, 0px);
  background: #DCE8C2;               /* Linie des Mockup-Sliders */
}
[data-auftritt="berlin"] .bw-pfad.pfad-an::after {
  width: var(--pfad-laenge, 0px);
  background: var(--gruen);
  transform-origin: left center;
  transform: scaleX(var(--pfad-anteil, 0));
  transition: transform 520ms var(--kurve-aus);
}
[data-auftritt="berlin"] .bw-pfad.pfad-an.pfad-umbruch::before,
[data-auftritt="berlin"] .bw-pfad.pfad-an.pfad-umbruch::after { display: none; }

[data-auftritt="berlin"] .bw-pfad.pfad-an > .schritt-karte {
  filter: saturate(.4) brightness(1.08);
  transition: filter 700ms var(--kurve-aus), box-shadow 700ms var(--kurve-aus);
  box-shadow: 0 8px 20px rgba(78, 123, 8, .12);
}
[data-auftritt="berlin"] .bw-pfad.pfad-an > .schritt-karte.erreicht {
  filter: none;
  box-shadow: 0 14px 30px rgba(78, 123, 8, .3);
}
[data-auftritt="berlin"] .bw-pfad.pfad-an > .schritt-karte .schritt-nummer::before {
  transition: transform 420ms var(--kurve-aus), background-color 420ms linear;
  background: var(--linie);
}
[data-auftritt="berlin"] .bw-pfad.pfad-an > .schritt-karte.erreicht .schritt-nummer::before {
  background: var(--orange);
  animation: rb-punkt 620ms var(--kurve-aus) 1;
}
@keyframes rb-punkt {
  0% { transform: scale(1); }
  45% { transform: scale(1.8); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-auftritt="berlin"] .bw-pfad.pfad-an > .schritt-karte { filter: none; transition: none; }
  [data-auftritt="berlin"] .bw-pfad.pfad-an::after { transition: none; }
  [data-auftritt="berlin"] .bw-pfad.pfad-an > .schritt-karte .schritt-nummer::before { animation: none; background: var(--orange); }
}
@media print {
  [data-auftritt="berlin"] .bw-pfad > .schritt-karte { filter: none !important; }
  [data-auftritt="berlin"] .bw-pfad::before,
  [data-auftritt="berlin"] .bw-pfad::after { display: none !important; }
}

/* ============================================================
   RB4  PFLEGEEINRICHTUNGEN
   ============================================================ */
/* Umschalter Physio | Ergo: im 16:10 der Handyansicht schnitt der
   Ausschnitt bei 55 % beiden Personen den Kopf ab (Foto vorher/t). */
[data-seite="/physiotherapie-ergotherapie-pflegeheim/"] .fach-bild[src$="/strecke-rollator.webp"] { object-position: 50% 12%; }
[data-seite="/physiotherapie-ergotherapie-pflegeheim/"] .fach-bild[src$="/strecke-ergo-steckbrett.webp"] { object-position: 50% 40%; }
@media (max-width: 760px) {
  [data-seite="/physiotherapie-ergotherapie-pflegeheim/"] .fach-bild { aspect-ratio: 4 / 3; }
  /* Verordnungsmanagement: das Hochformat stand am Handy 430 px hoch,
     die Planungstafel und die Mitarbeiterin bleiben im 5:4 ganz im Bild. */
  [data-seite="/physiotherapie-ergotherapie-pflegeheim/"] #verordnungsmanagement .split-bild img { aspect-ratio: 5 / 4; object-position: 50% 45%; }
  [data-seite="/physiotherapie-ergotherapie-pflegeheim/"] #angehoerige .split-bild img { aspect-ratio: 5 / 4; object-position: 50% 40%; }
}

/* ============================================================
   RB5  ÄRZTINNEN UND ÄRZTE
   Praxisteil bekommt ein Bild (Therapeut mit älterem Patienten in der
   Praxis Friedenau), die Leistungen stehen als Liste daneben.
   ============================================================ */
[data-seite="/aerzte/"] #praxen .split-bild img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
[data-seite="/aerzte/"] #praxen .haken-liste { margin-top: var(--m6); }
@media (max-width: 760px) {
  [data-seite="/aerzte/"] #praxen .split-bild img { aspect-ratio: 4 / 3; object-position: 50% 28%; }
}

/* ============================================================
   RB6  FORTBILDUNGEN
   Dauerbalken: acht Felder für die acht Stunden eines Seminartags, so
   viele grün wie das Format dauert. Auffrischung: ein Feld voll, das
   zweite halb (1 oder 2 Std.). Reihe: mehrere Module, je zwei Felder mit
   Abstand. Rein darstellend (aria-hidden), die Dauer steht in der Pille.
   ============================================================ */
[data-auftritt="berlin"] .format .dauer {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 216px;
  margin: 0 auto var(--m5);
}
[data-auftritt="berlin"] .format .dauer i {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: #E7EFD6;
  transform-origin: left center;
}
[data-auftritt="berlin"] .format .dauer i.voll { background: var(--gruen); }
[data-auftritt="berlin"] .format .dauer i.halb { background: linear-gradient(90deg, var(--gruen) 50%, #E7EFD6 50%); }
[data-auftritt="berlin"] .format .dauer i.modul { background: var(--gruen-mittel); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-auftritt="berlin"] .format .dauer i:is(.voll, .halb, .modul) { transform: scaleX(0); transition: transform 520ms var(--kurve-aus); }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:is(.voll, .halb, .modul) { transform: none; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(2) { transition-delay: 70ms; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(3) { transition-delay: 140ms; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(4) { transition-delay: 210ms; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(5) { transition-delay: 280ms; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(6) { transition-delay: 350ms; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(7) { transition-delay: 420ms; }
  [data-auftritt="berlin"] .format .dauer.dauer-da i:nth-child(8) { transition-delay: 490ms; }
}

/* Themenwahl im Anfrageformular: am Handy standen sieben Kacheln mit je
   zwei Zeilen untereinander (rund 800 px Schritt 1). Jetzt zwei Spalten,
   nur der Titel; die Kurzbeschreibung steht oben in den Themenkarten. */
@media (max-width: 560px) {
  [data-seite="/fortbildungen/"] #anfrage-fortbildung .wahl-raster:has(input[type="checkbox"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m2);
  }
  [data-seite="/fortbildungen/"] #anfrage-fortbildung .wahl:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 10px 10px 42px;
  }
  [data-seite="/fortbildungen/"] #anfrage-fortbildung .wahl:has(input[type="checkbox"]) .haken { left: 12px; top: 50%; margin-top: -11px; width: 22px; height: 22px; }
  [data-seite="/fortbildungen/"] #anfrage-fortbildung .wahl:has(input[type="checkbox"]) strong {
    margin: 0;
    font-size: .9rem;
    line-height: 1.25;
    hyphens: manual;           /* Trennstellen als ­ in 45-fortbildungen.html */
    overflow-wrap: break-word;
  }
  [data-seite="/fortbildungen/"] #anfrage-fortbildung .wahl:has(input[type="checkbox"]) > span:not(.haken) { display: none; }
}

/* ============================================================
   RB7  KONTAKT
   Wegkarten mit Foto (Bauteil .weg-karte.mit-bild aus seiten.css, wie die
   Stellenkarten), Anschriften als Fotokarten. Zwischen Anschriften
   (creme) und Formular (hell) wechselt jetzt der Grund, vorher standen
   zwei helle Abschnitte mit 202 px Leere aneinander.
   ============================================================ */
[data-seite="/kontakt/"] .wegweiser .weg-karte.mit-bild { padding-top: 0; }
[data-seite="/kontakt/"] .weg-karte-bild { aspect-ratio: 16 / 9; margin-bottom: var(--m3); }
[data-seite="/kontakt/"] .weg-karte-bild[src$="/verwaltung-planung.webp"] { object-position: 50% 42%; }
[data-seite="/kontakt/"] .weg-karte-bild[src$="/startwahl-karriere.webp"] { object-position: 50% 28%; }
[data-seite="/kontakt/"] .tafel-block.mit-bild { padding-top: 0; overflow: hidden; }
[data-seite="/kontakt/"] .tafel-bild {
  display: block;
  width: calc(100% + 2 * var(--rb-tafel-rand, var(--m6)));
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0 calc(-1 * var(--rb-tafel-rand, var(--m6))) var(--m5);
}
[data-seite="/kontakt/"] .tafel-bild[src$="/praxis-friedenau-fassade.webp"] { object-position: 50% 30%; }
[data-seite="/kontakt/"] .tafel-bild[src$="/praxis-tempelhof-empfang-2.webp"] { object-position: 50% 45%; }

/* ============================================================
   RB8  BARRIEREFREIHEIT
   Die Textseite hat keine Bühne. Absätze und Listen bekommen dieselben
   Abstände wie Impressum und Datenschutz, die Kontaktangaben eine Karte.
   ============================================================ */
[data-seite="/barrierefreiheit/"] .textseite .kontakt-angaben {
  background: var(--karte-hell);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m5) var(--m6);
}

/* Kennenlerngespräch: Im 4:3 der Handybühne stand der Kopf der Bewohnerin
   an der Oberkante angeschnitten. */
@media (max-width: 960px) {
  [data-seite="/physiotherapie-ergotherapie-pflegeheim/anfrage/"] .seite-hero .buehne-rahmen img { object-position: 50% 0%; }
}

/* ============================================================
   RB9  KOPF BEI 320 PX GESCROLLT (Nachbesserung zu G09, gehört
   inhaltlich zu seiten.css R12, dorthin verschoben)
   style.css 431 setzt das Logo im geschrumpften Kopf auf 44 px Höhe und
   schlägt mit .geschrumpft die schmaleren Werte aus seiten.css (40 px
   unter 420, 36 px unter 341). Bei 320 px wuchs das Logo nach 24 px
   Scrollweg von 119 auf 145 px Breite, der Burger ragte 13 px über den
   Rand, das Dokument war 333 px breit (auch auf main gemessen).
   Gilt für physiopark.berlin und physiopark-zeitlos.de, weil beide
   denselben Kopf haben und diese Datei laden.
   ============================================================ */
/* Umgezogen nach seiten.css R12 (Logo am Handy), beim Zusammenführen
   12.10.2026; dieselbe Regel hatte auch Paket Global. */

/* ============================================================
   RB10  NACHBESSERUNG NACH DER HANDYPRÜFUNG (12.10.2026)
   Befunde der Prüfung „berlin“ bei 390 und 1440 px. Jede Regel auf
   physiopark.berlin begrenzt, seitenbezogene auf data-seite.
   ============================================================ */

/* Fortbildungen: neues Bühnenbild (pflegeheim-1, hochkant). Köpfe oben
   im Bild halten, im 4:3 am Handy wie im 4:5 am Rechner. */
[data-seite="/fortbildungen/"] .seite-hero .buehne-rahmen img { object-position: 50% 0; }
/* Pflege, kleines Collagebild: Der Bewohnerin fehlte der Kopf */
[data-auftritt="berlin"] .erwartet-bilder img[src$="/strecke-kniebeuge.webp"] { object-position: 50% 0; }

/* Themenkarten als Fotokarten (G14): Bild oben, Nummer als Pille auf
   dem Bild, darunter Titel und Satz. Dieselbe Karte wie im Mockup-Slider
   (bauteile.css K1), nur mit Bildkopf. */
[data-auftritt="berlin"] .v-karte.v-foto { padding: 0 0 var(--m6); overflow: hidden; }
[data-auftritt="berlin"] .v-foto-bild {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--m5);
  background: #CFE2AE;
}
[data-auftritt="berlin"] .v-foto-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 900ms var(--kurve-aus);
}
[data-auftritt="berlin"] .v-foto-bild::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(36, 57, 10, 0), rgba(36, 57, 10, .3));
  pointer-events: none;
}
[data-auftritt="berlin"] .v-foto-bild .badge {
  position: absolute;
  left: var(--m4);
  bottom: var(--m4);
  z-index: 1;
  margin: 0;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .22);
}
[data-auftritt="berlin"] .v-karte.v-foto > :is(h3, p) { padding-inline: var(--m5); }
[data-auftritt="berlin"] .v-foto-bild img[src$="/strecke-aufstehen.webp"] { object-position: 50% 0; }
[data-auftritt="berlin"] .v-foto-bild img[src$="/strecke-rollator.webp"] { object-position: 50% 10%; }
[data-auftritt="berlin"] .v-foto-bild img[src$="/heim-bewegung.webp"] { object-position: 60% 25%; }
[data-auftritt="berlin"] .v-foto-bild img[src$="/gangtraining.webp"] { object-position: 50% 45%; }
[data-auftritt="berlin"] .v-foto-bild img[src$="/strecke-begleitung.webp"] { object-position: 50% 48%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-auftritt="berlin"] .v-karte.v-foto:hover .v-foto-bild img { transform: scale(1.05); }
}

/* Formate: Dauerbalken grösser und kräftiger, damit die Karten auch ohne
   Foto etwas zeigen (G14). */
[data-auftritt="berlin"] .format .dauer { max-width: 260px; gap: 5px; margin-bottom: var(--m6); }
[data-auftritt="berlin"] .format .dauer i { height: 18px; border-radius: 5px; background: #E3EDD0; }
[data-auftritt="berlin"] .format .dauer i.voll { background: linear-gradient(180deg, #A2D457, var(--gruen-dunkel)); }
[data-auftritt="berlin"] .format .dauer i.halb { background: linear-gradient(90deg, var(--gruen-dunkel) 50%, #E3EDD0 50%); }
[data-auftritt="berlin"] .format .dauer i.modul { background: linear-gradient(180deg, #C6E393, var(--gruen)); }

/* RB6b  Formate mit Foto (Abnahme 12.10.2026, G14): Am Handy war die
   Wischreihe reiner Text. Foto randlos oben wie RB2, die Dauerpille sitzt
   weiter auf der Kante, darunter Balken, Titel und Satz. */
[data-auftritt="berlin"] .formate .format.mit-foto { padding: 0 0 var(--m6); }
[data-auftritt="berlin"] .format.mit-foto > .format-foto {
  display: block; width: 100%; max-width: none; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%;
  border-radius: calc(var(--bogen-karte) - 2px) calc(var(--bogen-karte) - 2px) 0 0;
  margin: 0 0 var(--m6);
}
[data-auftritt="berlin"] .format.mit-foto > .format-pille { z-index: 2; }
[data-auftritt="berlin"] .format.mit-foto > :is(h3, p) { padding-inline: var(--m6); }
[data-auftritt="berlin"] .format.mit-foto > .dauer { width: calc(100% - 2 * var(--m6)); }
[data-auftritt="berlin"] .format-foto[src$="/pflegeheim-2.webp"] { object-position: 50% 40%; }
[data-auftritt="berlin"] .format-foto[src$="/heim-transfer.webp"] { object-position: 50% 8%; }
[data-auftritt="berlin"] .format-foto[src$="/fortbildung-mobilitaet.webp"] { object-position: 50% 55%; }
@media (max-width: 760px) {
  [data-auftritt="berlin"] .format.mit-foto > .format-foto { margin-bottom: var(--m5); }
  [data-auftritt="berlin"] .format.mit-foto > :is(h3, p) { padding-inline: var(--m5); }
  [data-auftritt="berlin"] .format.mit-foto > .dauer { width: calc(100% - 2 * var(--m5)); }
}

/* Faktenkarte (Pillenbox) überall wie auf der Startseite (S03, G13):
   Titel Montserrat 700, Text Inter. Vorher auf Pflege und Fortbildungen
   in Lora, das Team las das als andere Schriftart. */
[data-auftritt="berlin"] .vorteile-karte .fakt strong,
[data-auftritt="berlin"] .vorteile-karte .gehalt-box strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
}
[data-auftritt="berlin"] .vorteile-karte .fakt span,
[data-auftritt="berlin"] .vorteile-karte .gehalt-box > span {
  font-family: var(--font-text);
  font-size: .95rem;
  line-height: 1.55;
}

/* Schrittkarten mit Foto am Handy: Die Karten einer Wischreihe sind so
   hoch wie die längste. Den Rest nimmt das Foto, nicht ein leeres Grün
   unter dem Text (Pflege, Ärzte, Team). */
@media (max-width: 760px) {
  [data-auftritt="berlin"] .schritt-karte.mit-foto > .schritt-foto { flex: 1 0 auto; }
}

/* Ärzte, Einleitung „Verordnungen für Bewohnerinnen und Bewohner“: am
   Handy linksbündig wie die übrigen Abschnitte */
@media (max-width: 760px) {
  [data-seite="/aerzte/"] #pflege .schritte-kopf { text-align: left; }
  [data-seite="/aerzte/"] #pflege .schritte-kopf .sub-strich { margin-left: 0; }
  [data-seite="/aerzte/"] #pflege .schritte-kopf p + p { margin-top: var(--m3); }
}

/* Kontakt: Formular in einer Karte wie die Anfragen, Anliegen als
   Auswahlkacheln (Bauteil .z-formkarte und .z-wahl aus r12-zeitlos.css,
   dort für das Terminformular). Am Handy zwei Spalten. */
[data-seite="/kontakt/"] .z-wahl.k-anliegen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-seite="/kontakt/"] .z-formkarte textarea { min-height: 140px; }
@media (max-width: 760px) {
  [data-seite="/kontakt/"] .z-wahl.k-anliegen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-seite="/kontakt/"] .z-wahl.k-anliegen label { padding: 9px 10px 9px 34px; font-size: .88rem; }
  [data-seite="/kontakt/"] .z-wahl.k-anliegen label::before { left: 11px; }
}
[data-seite="/kontakt/"] .seite-hero .buehne-rahmen img { object-position: 50% 20%; }
[data-seite="/kontakt/"] .weg-karte-bild[src$="/start-karte-friedenau.webp"] { object-position: 50% 30%; }

/* Danke und 404: Wegweiser mit Foto wie auf der Startseite (r12-start.css
   ST3, .start-karten). Drei Karten ab 761 px nebeneinander. */
@media (min-width: 761px) {
  :is([data-seite="/danke/"], [data-seite="/404.html"]) .start-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is([data-seite="/danke/"], [data-seite="/404.html"]) .start-karte-bild { aspect-ratio: 16 / 10; }
}

/* ============================================================
   RB11  HANDYMENÜ UND FUSS (Handyprüfung 12.10.2026, G10, G15)
   ============================================================ */
/* Unter der Liste des Handymenüs: Fotokarte Karriere und die beiden
   Praxistelefone (bauen.py nav_zusatz_bauen). Am Rechner nicht da. */
.nav-zusatz { display: none; }
@media (max-width: 960px) {
  [data-auftritt="berlin"] .nav-zusatz { display: block; margin-top: var(--m8); }
  [data-auftritt="berlin"] .nav-zusatz-karriere {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 168px;
    padding: var(--m5);
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: var(--gruen-tief);
    box-shadow: var(--schatten-2);
  }
  [data-auftritt="berlin"] .nav-zusatz-karriere img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
  }
  [data-auftritt="berlin"] .nav-zusatz-karriere::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(36, 57, 10, 0) 25%, rgba(36, 57, 10, .85) 100%);
  }
  [data-auftritt="berlin"] .nav-zusatz-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 56px; }
  [data-auftritt="berlin"] .nav-zusatz-text .badge { background: #fff; margin-bottom: 4px; }
  [data-auftritt="berlin"] .nav-zusatz-text strong {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  [data-auftritt="berlin"] .nav-zusatz-text > span:last-child { font-size: .86rem; color: #EAF3DA; }
  [data-auftritt="berlin"] .nav-zusatz-pfeil {
    position: absolute; right: var(--m5); bottom: var(--m5);
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--orange-aktion);
    color: #fff;
  }
  [data-auftritt="berlin"] .nav-zusatz-pfeil svg { width: 18px; height: 18px; }
  [data-auftritt="berlin"] .nav-zusatz-titel {
    margin: var(--m6) 0 var(--m3);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinte-weich);
  }
  [data-auftritt="berlin"] .nav-zusatz-tel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m3); }
  [data-auftritt="berlin"] .nav-zusatz-tel a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    border: 1.5px solid var(--gruen);
    border-radius: var(--bogen-pille);
    background: #fff;
    color: var(--gruen-dunkel);
    text-decoration: none;
    font-size: .8rem;
    line-height: 1.25;
  }
  [data-auftritt="berlin"] .nav-zusatz-tel a > svg {
    flex: none;
    width: 30px; height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: var(--gruen-dunkel);
    color: #fff;
  }
  [data-auftritt="berlin"] .nav-zusatz-tel span { display: flex; flex-direction: column; white-space: nowrap; }
  [data-auftritt="berlin"] .nav-zusatz-tel strong { font-family: var(--font-head); font-weight: 700; font-size: .84rem; }
  [data-auftritt="berlin"] .nav-zusatz a:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; }
}
@media (max-width: 359px) {
  [data-auftritt="berlin"] .nav-zusatz-tel { grid-template-columns: 1fr; }
}

/* Fuss am Handy: eine Spalte, Gruppen als Klappzeilen (r12-berlin.js RJ3),
   Empfangszeiten als kleine Tabelle, von der Karriere nur Telefon und
   Knopf „Alle offenen Stellen“. */
@media (max-width: 760px) {
  [data-auftritt="berlin"] .footer-grid.footer-r12 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marke" "praxen" "pflege" "unternehmen" "karriere";
    gap: var(--m6);
  }
  [data-auftritt="berlin"] .footer-r12 .footer-praxen { grid-template-columns: 1fr 1fr; gap: var(--m4); }
  [data-auftritt="berlin"] .footer-r12 .footer-zeiten {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    margin-top: 6px;
    font-size: .8rem;
  }
  [data-auftritt="berlin"] .footer-r12 .footer-zeiten-titel { grid-column: 1 / -1; margin: 0 0 2px; }
  [data-auftritt="berlin"] .footer-r12 .footer-zeit { display: contents; }
  [data-auftritt="berlin"] .footer-r12 .fz-trenner { display: none; }
  [data-auftritt="berlin"] .footer-r12 .fz-tage { font-weight: 600; white-space: nowrap; }
  [data-auftritt="berlin"] .footer-r12 .fz-uhr { white-space: nowrap; font-variant-numeric: tabular-nums; }
  [data-auftritt="berlin"] .footer-spalte-karriere .footer-nav { display: none; }
  [data-auftritt="berlin"] .footer-spalte-karriere .footer-hotline { margin-top: 0; }

  [data-auftritt="berlin"] .fuss-klapp .footer-unter,
  [data-auftritt="berlin"] .fuss-klapp .footer-spalte > h3 { margin: 0; }
  [data-auftritt="berlin"] .fuss-klapp .footer-spalte-praxen .footer-unter { margin-top: var(--m6); }
  [data-auftritt="berlin"] .fuss-klapp-knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 2px;
    border: 0;
    border-top: 1px solid rgba(51, 83, 10, .18);
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  [data-auftritt="berlin"] .fuss-klapp .footer-spalte:not(.footer-spalte-praxen) > h3 .fuss-klapp-knopf { border-bottom: 0; }
  [data-auftritt="berlin"] .fuss-klapp-zeichen {
    position: relative;
    flex: none;
    width: 14px; height: 14px;
  }
  [data-auftritt="berlin"] .fuss-klapp-zeichen::before,
  [data-auftritt="berlin"] .fuss-klapp-zeichen::after {
    content: "";
    position: absolute;
    left: 0; top: 6px;
    width: 14px; height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--zeit-tipp) var(--kurve-aus);
  }
  [data-auftritt="berlin"] .fuss-klapp-zeichen::after { transform: rotate(90deg); }
  [data-auftritt="berlin"] .fuss-klapp-knopf[aria-expanded="true"] .fuss-klapp-zeichen::after { transform: rotate(0deg); }
  [data-auftritt="berlin"] .fuss-klapp-knopf:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 2px; }
  [data-auftritt="berlin"] .fuss-klapp .footer-nav:not([hidden]) { padding: 4px 2px var(--m4); }
  [data-auftritt="berlin"] .fuss-klapp .footer-nav.footer-nav-reihe { grid-template-columns: 1fr 1fr; }
  [data-auftritt="berlin"] .fuss-klapp .footer-spalte-karriere { border-top: 1px solid rgba(51, 83, 10, .18); padding-top: var(--m5); }
  [data-auftritt="berlin"] .fuss-klapp .footer-spalte:not(.footer-spalte-praxen):not(.footer-spalte-karriere) { margin-top: calc(-1 * var(--m6)); }
}
@media (max-width: 359px) {
  [data-auftritt="berlin"] .footer-r12 .footer-praxen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-auftritt="berlin"] .fuss-klapp-zeichen::before,
  [data-auftritt="berlin"] .fuss-klapp-zeichen::after { transition: none; }
}
[data-auftritt="berlin"] .fuss-klapp .footer-nav[hidden] { display: none !important; }
[data-seite="/kontakt/"] .z-wahl.k-anliegen label { hyphens: manual; overflow-wrap: break-word; min-width: 0; }
/* Offenes Handymenü bis ganz unten deckend: Die Höhe rechnet ab der
   gemessenen Kopfkante (bauteile.js T1); mit gebrochenen Pixeln blieb auf
   der Startseite unten eine Zeile Seitentext sichtbar. Ein Schatten in der
   Menüfarbe deckt den Rest. */
@media (max-width: 960px) {
  [data-auftritt="berlin"] .main-nav.offen { box-shadow: 0 48px 0 0 var(--papier-warm); }
}