/* ============================================================
   r12-zeitlos.css, Gestaltungsrunde 12.10.2026, Paket „Zeitlos“
   Aufgaben aus der Anpassungsliste des Teams: alle Seiten von physiopark-zeitlos.de: W02 Unsere Praxen (Start), W05 Preise, W06 Termin, Abschnitt Tablet und App (S04) auf dem Zeitlos-Start.

   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.

   Geltung: Jede Regel hängt an einer z-Klasse (nur in quelle/inhalte-zeitlos/
   und in praxis_karte in bauen.py) oder an [data-auftritt="zeitlos"]. Auf
   physiopark.berlin und der Karriere ändert diese Datei nichts.

     Z1  Praxiskarten (Start, W02): exakt gleich gebaut, Zeilen per subgrid
     Z2  Fotokarten (Leistungen, Weitere, Übersicht): Bild oben, Pille auf der Kante
     Z3  Tablet und App (S04): dunkelgrüner Slider, Nummer in der Karte
     Z4  Zwei Querkarten (Preise, After Work)
     Z5  Schrittkarten mit Scrollanimation (G12)
     Z6  Preise (W05): Umschalter, Formel, Dauerwahl, Preisliste, Filter
     Z7  Termin (W06): Nummernkarten ohne Abschneiden, Formular als Karte
     Z8  Praxisseiten, Leistungsseiten, After Work, Samstag (G13 bis G15)
     Z9  Befunde der Handyprüfung 12.10.2026 (scratchpad pruef-zeitlos):
         Bühnenabstand, Karriere-Reiter in der Handyleiste, Preisleiste,
         Fotos in Wischreihen, Praxisseiten, Karriere-Karte, Fuß, After
         Work, Nach-oben-Knopf, Handymenü
   ============================================================ */

/* ---------- Z1  PRAXISKARTEN: Karte seit 13.10.2026 r13-bauteile.css R4 ----------
   Hier bleiben nur die Behandlungszeiten: fünf gleiche Tageskästchen
   (seit 14.10.2026 ohne grün gefüllten heutigen Tag). */
.z-woche-titel {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich);
  margin-bottom: var(--m2);
}
.z-woche ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.z-woche li {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 2px 9px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--karte-hell);
  font-variant-numeric: tabular-nums;
  font-size: .82rem; line-height: 1.25; color: var(--tinte);
  transition: background var(--zeit-wechsel) linear, color var(--zeit-wechsel) linear;
}
.z-woche li b { font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gruen-dunkel); margin-bottom: 2px; }
@media (max-width: 760px) {
  .z-woche li { font-size: .74rem; padding: 7px 1px 8px; }
}

/* ---------- Z2  FOTOKARTEN ----------
   Gleiches Layout überall auf Zeitlos (G13): Start, Leistungsübersicht und
   „Weitere Leistungen“. Bild randlos oben (seiten.css .weg-karte.mit-bild),
   die Pille sitzt auf der Bildkante wie im Mockup. */
[data-auftritt="zeitlos"] .weg-karte.mit-bild { padding: 0 var(--m6) var(--m6); gap: var(--m3); }
[data-auftritt="zeitlos"] .weg-karte.mit-bild .weg-karte-bild {
  width: calc(100% + 2 * var(--m6));
  margin: 0 calc(-1 * var(--m6)) 0;
  background: var(--karte-hell);
}
[data-auftritt="zeitlos"] .weg-karte.mit-bild > .badge {
  position: relative; z-index: 1;
  align-self: flex-start;
  margin-top: calc(-1 * var(--m3) - 17px);
  max-width: 100%;
  white-space: nowrap;
  background: #fff;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .14);
}
[data-auftritt="zeitlos"] .weg-karte.mit-bild h3 { font-size: min(var(--grad-h3), 1.15rem); }
[data-auftritt="zeitlos"] .weg-karte.mit-bild p { font-size: .93rem; }
@media (min-width: 761px) {
  .z-fotokarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .z-fotokarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.z-mitte { text-align: center; }

/* Leistungsübersicht: seit 13.10.2026 Leistungswahl, Stil in r14-runde.css */
/* Die Suche zeigt Treffer als Liste: dort ohne Foto, damit sie kurz bleibt */
[data-auftritt="zeitlos"] .wisch.ist-liste .weg-karte.mit-bild { padding-top: var(--m5); }
[data-auftritt="zeitlos"] .wisch.ist-liste .weg-karte-bild { display: none; }
[data-auftritt="zeitlos"] .wisch.ist-liste .weg-karte.mit-bild > .badge { margin-top: 0; box-shadow: none; }

/* Weitere Leistungen auf den Leistungsseiten: Fotokarten, 4 je Reihe */
@media (max-width: 760px) {
  [data-auftritt="zeitlos"] .behandlung-weitere .weg-karte.mit-bild { padding: 0 var(--m5) var(--m5); }
  [data-auftritt="zeitlos"] .behandlung-weitere .weg-karte.mit-bild .weg-karte-bild { width: calc(100% + 2 * var(--m5)); margin-inline: calc(-1 * var(--m5)); }
}

/* ---------- Z3  TABLET UND APP ---------- */
.z-digital .v-karte { position: relative; min-height: 270px; }
.z-digital .z-v-nr {
  position: absolute; bottom: var(--m4); right: var(--m5);
  font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: rgba(78, 123, 8, .2);
  font-variant-numeric: tabular-nums;
}
.z-digital .v-karte p { font-size: .95rem; padding-bottom: var(--m10); }
@media (min-width: 1100px) {
  /* vier Karten passen ganz: dann kein Wischen, die Pfeile ruhen */
  .z-digital .v-karte { flex-basis: calc((100% - 3 * var(--m6)) / 4); }
}

/* ---------- Z4  ZWEI QUERKARTEN ---------- */
.z-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m6); }
.z-duo .weg-karte.z-quer {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
[data-auftritt="zeitlos"] .z-duo .z-quer .weg-karte-bild {
  width: 100%; height: 100%; margin: 0;
  aspect-ratio: auto; min-height: 100%;
  object-fit: cover;
}
.z-quer-text { display: flex; flex-direction: column; gap: var(--m3); padding: var(--m6); }
.z-quer-text .badge { align-self: flex-start; }
.z-quer-text p { flex: 1; }
@media (max-width: 860px) {
  .z-duo { grid-template-columns: 1fr; gap: var(--m4); }
}
@media (max-width: 480px) {
  .z-duo .weg-karte.z-quer { grid-template-columns: 104px minmax(0, 1fr); }
  .z-quer-text { padding: var(--m4) var(--m4) var(--m4) var(--m4); gap: var(--m2); }
  .z-quer-text h3 { font-size: 1.05rem; }
  .z-quer-text p { font-size: .88rem; line-height: 1.5; }
  .z-quer-text .weiter { font-size: .7rem; letter-spacing: .06em; }
}

/* ---------- Z5  SCHRITTKARTEN ---------- */
@media (min-width: 761px) {
  .z-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.z-schritt-nummern { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--m2); margin-top: var(--m4); }
.z-schritt-nummern a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: var(--bogen-pille);
  color: #fff; text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .03em;
  transition: background var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear;
}
.z-schritt-nummern a:hover, .z-schritt-nummern a:focus-visible { background: rgba(255, 255, 255, .16); border-color: #fff; }
.z-schritt-nummern svg { width: 15px; height: 15px; }

/* G12: Schritte auf Zeitlos kommen beim Scrollen deutlich nacheinander,
   die Pille springt nach der Karte auf. Nur mit Bewegung und Skript
   (html.js.bw aus frueh.js), sonst steht alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  [data-auftritt="zeitlos"] .schritte-reihe[data-bw="reihe"] { --bw-staffel: 190ms; }
  .js.bw [data-auftritt="zeitlos"] .schritte-reihe[data-bw="reihe"]:not(.bw-da) > * { translate: 0 34px; }
  .js.bw [data-auftritt="zeitlos"] .schritte-reihe[data-bw="reihe"]:not(.bw-da) .schritt-nummer { scale: .4; opacity: 0; }
  [data-auftritt="zeitlos"] .schritte-reihe[data-bw="reihe"]:not(.bw-fertig) .schritt-nummer {
    transition: scale 520ms var(--kurve-feder), opacity 260ms linear;
    transition-delay: calc(240ms + var(--bw-i, 0) * 190ms);
  }
  [data-auftritt="zeitlos"] .schritte-reihe .schritt-karte { transition: box-shadow 260ms var(--kurve-aus), translate 260ms var(--kurve-aus); }
  [data-auftritt="zeitlos"] .schritte-reihe.bw-fertig .schritt-karte:hover { translate: 0 -4px; box-shadow: 0 20px 38px rgba(78, 123, 8, .38); }
}
@media (max-width: 760px) {
  .js.bw [data-auftritt="zeitlos"] .schritte-reihe.wisch[data-bw="reihe"]:not(.bw-da) > * { translate: none; }
}

/* ---------- Z6  PREISE (W05) ---------- */
.z-preise { padding-top: var(--m12); overflow-x: clip; }   /* clip statt hidden: die Leiste bleibt sticky */
.z-tarif-leiste {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 8px);
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: var(--m2);
  margin: 0 auto var(--m12);
  padding: var(--m3) 0;
}
.z-tarif-leiste::before {
  content: "";
  position: absolute; inset: 0 -100vmax;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 200ms linear;
  z-index: -1;
}
.z-tarif-leiste.klebt::before { opacity: 1; box-shadow: 0 8px 18px rgba(51, 83, 10, .08); }
.z-tarif-frage {
  font-family: var(--font-sub); font-style: italic; font-size: 1.05rem; color: var(--tinte);
}
.z-tarif-wahl.umschalter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 620px);
  margin: 0;
  padding: 6px;
  gap: 4px;
  background: #fff;
  border: 1.5px solid var(--linie-stark);
  border-radius: 22px;
  box-shadow: var(--schatten-2);
  overflow: hidden;
}
/* schwung.css S11 macht aus .umschalter drei Fallkarten; hier ist es ein
   Segmentschalter (Mockup-Umschalter), deshalb alles ausdrücklich gesetzt. */
.z-tarif-wahl.umschalter button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: var(--gruen-dunkel);
  text-align: center;
  text-transform: none; letter-spacing: 0;
  white-space: normal;
  min-width: 0;
  transform: none;
}
.z-tarif-wahl.umschalter button:hover { background: var(--karte-hell); transform: none; }
.z-tarif-wahl.umschalter button[aria-selected="true"] { background: var(--gruen-dunkel); color: #fff; box-shadow: 0 6px 16px rgba(78, 123, 8, .3); }
.z-tarif-wahl button strong { font-family: var(--font-head); font-weight: 800; font-size: 1rem; line-height: 1.15; }
.z-tarif-wahl button small { font-family: var(--font-text); font-weight: 500; font-size: .76rem; color: var(--tinte-weich); transition: color var(--zeit-wechsel) linear; }
.z-tarif-wahl button[aria-selected="true"] small { color: #fff; }  /* Kontrast 12.10.: #E6F2D2 nur 4,33:1 */
.z-tarif-wahl button:focus-visible { outline: 3px solid var(--orange-aktion); outline-offset: 2px; }
html:not(.js) .z-tarif-leiste { position: static; }
html:not(.js) .z-tafel { padding-top: var(--m12); border-top: 1px solid var(--linie); }

.z-tafel .abschnitt-kopf { margin-bottom: var(--m8); }
.z-block { margin-top: var(--m12); }
.z-block-titel {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--tinte); line-height: 1.25;
  margin-bottom: var(--m3);
}
.z-block-text { margin-bottom: var(--m6); max-width: 62ch; }
.z-block .rechner { margin-top: var(--m4); }

/* Formel: 10 € + 10 % = Ihr Anteil, eine Karte mit drei Gliedern */
.z-formel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: stretch;
  gap: var(--m3);
}
.z-formel-glied {
  display: flex; flex-direction: column; gap: var(--m2);
  padding: var(--m6) var(--m5);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-1);
}
.z-formel-glied .gross { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--gruen-dunkel); }
.z-formel-glied .klein { font-size: .9rem; line-height: 1.45; color: var(--tinte-weich); }
.z-formel-ergebnis { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); box-shadow: 0 14px 30px rgba(78, 123, 8, .28); }
.z-formel-ergebnis .gross { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.z-formel-ergebnis .klein { color: #F2F8E6; }
.z-formel-zeichen {
  align-self: center;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff; border: 2px solid var(--gruen);
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--orange-aktion);
}
.z-merk {
  margin-top: var(--m6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--m3) var(--m5);
  padding: var(--m5) var(--m6);
  border-radius: var(--bogen-karte);
  background: var(--karte-hell);
  border: 1px dashed var(--linie-stark);
}
.z-merk p { flex: 1 1 320px; font-size: .95rem; color: var(--tinte); }
@media (max-width: 760px) {
  /* Zeile 1: 10 € + 10 %, Zeile 2: =, Zeile 3: Ihr Anteil */
  .z-formel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: var(--m2); }
  .z-formel-glied { padding: var(--m5) var(--m4); }
  .z-formel .z-gleich { grid-column: 1 / -1; justify-self: center; }
  .z-formel-ergebnis { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--m4); }
  .z-formel-ergebnis .gross { flex: none; }
  .z-formel-zeichen { width: 34px; height: 34px; font-size: 1.1rem; }
}

/* Dauerwahl Privat: Preis groß, ohne Skript über :checked */
.z-dauer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "kopf anzeige" "gilt gilt";
  gap: var(--m6) var(--m10);
  padding: var(--m8);
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-gruen);
}
.z-dauer-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.z-dauer-kopf { grid-area: kopf; align-self: center; }
.z-dauer-frage, .z-klein-titel {
  font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich);
  margin-bottom: var(--m3);
}
.z-dauer-knoepfe, .z-mt-knoepfe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px; padding: 4px;
  background: var(--karte-hell);
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
}
.z-dauer-knoepfe label, .z-mt-knoepfe label {
  text-align: center;
  padding: 10px 4px;
  border-radius: var(--bogen-pille);
  font-family: var(--font-head); font-weight: 800; font-size: .86rem;
  color: var(--gruen-dunkel);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--zeit-wechsel) var(--kurve-aus), color var(--zeit-wechsel) linear, box-shadow var(--zeit-wechsel) linear;
}
.z-dauer-knoepfe label:hover, .z-mt-knoepfe label:hover { background: #fff; }
#pd-30:checked ~ .z-dauer-kopf [for="pd-30"],
#pd-40:checked ~ .z-dauer-kopf [for="pd-40"],
#pd-45:checked ~ .z-dauer-kopf [for="pd-45"],
#pd-60:checked ~ .z-dauer-kopf [for="pd-60"],
#md-30:checked ~ .z-mt-knoepfe [for="md-30"],
#md-40:checked ~ .z-mt-knoepfe [for="md-40"],
#md-60:checked ~ .z-mt-knoepfe [for="md-60"] {
  background: var(--gruen-dunkel); color: #fff; box-shadow: 0 6px 14px rgba(78, 123, 8, .3);
}
#pd-30:focus-visible ~ .z-dauer-kopf [for="pd-30"],
#pd-40:focus-visible ~ .z-dauer-kopf [for="pd-40"],
#pd-45:focus-visible ~ .z-dauer-kopf [for="pd-45"],
#pd-60:focus-visible ~ .z-dauer-kopf [for="pd-60"],
#md-30:focus-visible ~ .z-mt-knoepfe [for="md-30"],
#md-40:focus-visible ~ .z-mt-knoepfe [for="md-40"],
#md-60:focus-visible ~ .z-mt-knoepfe [for="md-60"] { outline: 3px solid var(--orange-aktion); outline-offset: 2px; }
.z-dauer-anzeige { grid-area: anzeige; align-self: center; text-align: center; }
.z-dauer-wert { display: none; }
.z-dauer-wert strong {
  display: block;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1;
  color: var(--gruen-dunkel);
  font-variant-numeric: tabular-nums;
}
.z-dauer-wert span { display: block; margin-top: var(--m2); font-family: var(--font-sub); font-style: italic; color: var(--tinte); }
#pd-30:checked ~ .z-dauer-anzeige [data-dauer="30"],
#pd-40:checked ~ .z-dauer-anzeige [data-dauer="40"],
#pd-45:checked ~ .z-dauer-anzeige [data-dauer="45"],
#pd-60:checked ~ .z-dauer-anzeige [data-dauer="60"] { display: block; animation: z-preis-ein 420ms var(--kurve-aus); }
html:not(.js) .z-dauer-wert { display: block; margin-bottom: var(--m3); }
@keyframes z-preis-ein { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.z-dauer-gilt { grid-area: gilt; border-top: 1px solid var(--linie); padding-top: var(--m6); }
.z-chips { list-style: none; margin: 0 0 var(--m6); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.z-chips li {
  padding: 6px 12px;
  border-radius: var(--bogen-pille);
  background: var(--karte-hell);
  border: 1px solid var(--linie);
  font-size: .86rem; color: var(--tinte);
}
.z-ergo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--m4); }
.z-ergo li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--m3);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  font-size: .9rem; color: var(--tinte);
  transition: background var(--zeit-wechsel) linear, border-color var(--zeit-wechsel) linear, color var(--zeit-wechsel) linear;
}
.z-ergo li b { font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--gruen-dunkel); white-space: nowrap; }
/* Die gewählte Dauer hebt die passende Ergotherapie hervor */
.z-dauer:has(#pd-30:checked) .z-ergo li[data-dauer="30"],
.z-dauer:has(#pd-45:checked) .z-ergo li[data-dauer="45"],
.z-dauer:has(#pd-60:checked) .z-ergo li[data-dauer="60"] { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; }
.z-dauer:has(#pd-30:checked) .z-ergo li[data-dauer="30"] b,
.z-dauer:has(#pd-45:checked) .z-ergo li[data-dauer="45"] b,
.z-dauer:has(#pd-60:checked) .z-ergo li[data-dauer="60"] b { color: #fff; } /* Abnahme 12.10.: gruen-leuchte kam bei 12,8 px nur auf 3,76:1, Weiss auf 5,05:1 */
.z-dauer-notiz { margin-top: var(--m5); font-size: .88rem; color: var(--tinte-leise); }
@media (max-width: 760px) {
  .z-dauer { grid-template-columns: 1fr; grid-template-areas: "kopf" "anzeige" "gilt"; padding: var(--m6) var(--m5); gap: var(--m5); }
  .z-dauer-anzeige { padding: var(--m2) 0; }
  .z-ergo { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .z-dauer-knoepfe label, .z-mt-knoepfe label { font-size: .78rem; padding-inline: 2px; }
}

/* Filterpillen */
.z-filter { display: flex; flex-wrap: wrap; gap: var(--m2); margin-bottom: var(--m5); }
.z-filter button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: var(--bogen-pille);
  border: 1.5px solid var(--linie-stark);
  background: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  color: var(--gruen-dunkel);
  cursor: pointer;
  transition: background var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear, color var(--zeit-tipp) linear;
}
.z-filter button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); transition: background var(--zeit-tipp) linear; }
.z-filter button:hover { border-color: var(--gruen-dunkel); }
.z-filter button[aria-pressed="true"] { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; }
.z-filter button[aria-pressed="true"]::before { background: var(--orange); }
.z-filter button:focus-visible { outline: 3px solid var(--orange-aktion); outline-offset: 2px; }
html:not(.js) .z-filter { display: none; }
@media (max-width: 760px) {
  /* Pillen als eine wischbare Zeile statt drei Zeilen Knöpfe */
  .z-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--m6)); padding: 2px var(--m6) 4px; }
  .z-filter::-webkit-scrollbar { display: none; }
  .z-filter button { flex: none; }
}

/* Preisliste: jede Zeile eine Karte, Preis groß rechts */
.z-preisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m2); }
.z-preisliste > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--m2) var(--m5);
  padding: var(--m4) var(--m5);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 14px;
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.z-preisliste > li:hover { border-color: var(--gruen); box-shadow: var(--schatten-1); }
.z-preisliste > li[hidden] { display: none; }
.z-preisliste > li.z-neu { animation: z-zeile-ein 340ms var(--kurve-aus) both; }
@keyframes z-zeile-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.z-pl-name { font-weight: 600; color: var(--tinte); line-height: 1.4; }
.z-pl-dauer {
  justify-self: end;
  font-size: .8rem; color: var(--gruen-dunkel);
  padding: 4px 10px;
  border-radius: var(--bogen-pille);
  background: var(--karte-hell);
  white-space: nowrap;
}
.z-pl-dauer.z-leer { padding: 0; background: none; }
.z-pl-preis {
  min-width: 5.6em;
  text-align: right;
  font-family: var(--font-head); font-weight: 800; font-size: 1.2rem;
  color: var(--gruen-dunkel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Massage oder Training: Dauer in der Zeile wählbar */
.z-pl-wahl { position: relative; }
.z-mt-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.z-mt-knoepfe { grid-template-columns: repeat(3, auto); padding: 3px; background: var(--karte-hell); }
.z-mt-knoepfe label { padding: 6px 10px; font-size: .78rem; }
.z-mt-wert { display: none; }
#md-30:checked ~ .z-pl-preis [data-dauer="30"],
#md-40:checked ~ .z-pl-preis [data-dauer="40"],
#md-60:checked ~ .z-pl-preis [data-dauer="60"] { display: inline; }
html:not(.js) .z-mt-wert { display: block; }
.z-mt-was { margin-top: var(--m3); }
@media (max-width: 760px) {
  .z-preisliste > li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name preis" "dauer preis"; padding: var(--m4); column-gap: var(--m3); row-gap: 6px; }
  .z-pl-name { grid-area: name; font-size: .95rem; }
  .z-pl-dauer { grid-area: dauer; justify-self: start; }
  .z-pl-dauer.z-leer { display: none; }
  .z-pl-preis { grid-area: preis; font-size: 1.15rem; min-width: 0; }
  .z-pl-wahl { grid-template-areas: "name preis" "dauer dauer"; }
}

/* Mehr Zeit: zwei Wege, Karten der 5er- und 10er-Karte */
.z-wege, .z-karten-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m5); }
.z-weg-karte {
  position: relative;
  display: flex; flex-direction: column; gap: var(--m2);
  padding: var(--m10) var(--m6) var(--m6);
  border-radius: var(--bogen-karte);
  background: #fff;
  border: 2px solid var(--gruen);
  box-shadow: var(--schatten-gruen);
}
.z-weg-karte .badge { position: absolute; top: 0; left: var(--m6); transform: translateY(-50%); background: #fff; }
.z-weg-karte strong { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--tinte); }
.z-weg-karte span:not(.badge) { color: var(--tinte-weich); }
.z-weg-preis { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.z-weg-preis strong { color: #fff; }
.z-weg-preis span:not(.badge) { color: #F2F8E6; }
.z-wege { margin-top: var(--m4); padding-top: 14px; }
.z-karten-paar { margin-top: var(--m10); }
.z-ticket {
  position: relative;
  display: flex; flex-direction: column; gap: var(--m2);
  padding: var(--m6) var(--m6) var(--m6) var(--m8);
  border-radius: var(--bogen-karte);
  background: linear-gradient(135deg, var(--gruen-tief), var(--gruen-dunkel));
  color: #fff;
  overflow: hidden;
}
/* Abriss wie bei einer Karte zum Abstempeln: Halbkreise links und rechts */
.z-ticket::before, .z-ticket::after {
  content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: #fff;
}
.z-ticket::before { left: -11px; }
.z-ticket::after { right: -11px; }
.z-ticket strong { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: #fff; }
.z-ticket span { color: #F2F8E6; }
@media (max-width: 560px) {
  .z-wege, .z-karten-paar { grid-template-columns: 1fr; gap: var(--m8) var(--m4); }
  .z-karten-paar { gap: var(--m3); }
}

/* ---------- Z7  TERMIN (W06) ----------
   Ursache des Abschneidens: .weg-nummer ist inline-flex ohne Umbruch, „030
   85 40 71 30 anrufen“ war bei 1,35rem 310 px breit, die Karte bei 320 px
   nur 230 px innen (overflow: hidden schnitt ab). Jetzt bricht der Satz
   vor „anrufen“ um, die Nummer selbst bleibt zusammen. */
/* Am Rechner stehen die Karten in der linken Spalte (rund 385 px): untereinander statt nebeneinander */
[data-auftritt="zeitlos"][data-seite="/termin/"] .nummern-paar { grid-template-columns: minmax(0, 1fr); gap: var(--m3); }
[data-auftritt="zeitlos"][data-seite="/termin/"] .nummern-paar .weg-karte { padding: var(--m5) var(--m6); }
[data-auftritt="zeitlos"][data-seite="/termin/"] .nummern-paar .weg-nummer { flex-wrap: wrap; row-gap: 0; font-size: clamp(1.15rem, 5.4vw, 1.5rem); max-width: 100%; }
[data-auftritt="zeitlos"][data-seite="/termin/"] .weg-nummer .z-nr { white-space: nowrap; }
[data-auftritt="zeitlos"][data-seite="/termin/"] .weg-nummer .z-anrufen { font-size: .62em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Z7b  Standortkarten mit Foto (Abnahme 12.10.2026, Agenturregel Wischreihe).
   Rechner: untereinander in der linken Spalte, Foto als schmaler Streifen
   links. Handy: Wischreihe (bauteile.css K6), Foto oben, Text darunter. */
[data-auftritt="zeitlos"][data-seite="/termin/"] .nummern-paar .weg-karte.z-standort {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0; padding: 0;
}
[data-auftritt="zeitlos"] .z-standort-bild {
  display: block; width: 100%; height: 100%; max-width: none; min-height: 100%;
  object-fit: cover; object-position: 50% 35%;
}
[data-auftritt="zeitlos"] .z-standort-text { display: flex; flex-direction: column; gap: 2px; padding: var(--m5) var(--m6); min-width: 0; }
@media (max-width: 760px) {
  /* Die Rechnerregel oben (eine Spalte) gilt am Handy nicht: dort Wischreihe */
  [data-auftritt="zeitlos"][data-seite="/termin/"] .nummern-paar.wisch { grid-template-columns: none; gap: var(--m4); }
  [data-auftritt="zeitlos"][data-seite="/termin/"] .nummern-paar .weg-karte.z-standort { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  [data-auftritt="zeitlos"] .z-standort-bild { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  [data-auftritt="zeitlos"] .z-standort-text { padding: var(--m4) var(--m5) var(--m5); }
}

.z-formkarte {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-3);
  padding: var(--m8);
  overflow: hidden;
}
.z-formkarte::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--gruen), var(--gruen-dunkel));
}
.z-form-kopf { display: flex; align-items: center; gap: var(--m3); margin-bottom: var(--m6); }
.z-form-kopf strong { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--tinte); line-height: 1.2; }
.z-form-kopf small { display: block; font-size: .86rem; color: var(--tinte-weich); font-weight: 400; margin-top: 2px; }
.z-wahl-feld { border: 0; padding: 0; margin: 0 0 var(--m6); min-width: 0; }
.z-wahl-feld legend { display: block; font-size: .96rem; font-weight: 500; color: var(--tinte); margin-bottom: 8px; padding: 0; }
.z-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.z-wahl label {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: 52px;
  padding: 9px 12px 9px 38px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 12px;
  background: #fff;
  font-weight: 600; font-size: .93rem; line-height: 1.25; color: var(--tinte);
  cursor: pointer;
  transition: border-color var(--zeit-tipp) linear, background var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.z-wahl label small { font-weight: 400; font-size: .78rem; color: var(--tinte-weich); }
.z-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.z-wahl label::before {
  content: "";
  position: absolute; left: 13px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%;
  border: 2px solid var(--linie-stark);
  background: #fff;
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.z-wahl label:hover { border-color: var(--gruen-dunkel); }
.z-wahl label:has(input:checked) { border-color: var(--gruen-dunkel); background: var(--karte-hell); box-shadow: 0 6px 16px rgba(78, 123, 8, .14); }
.z-wahl label:has(input:checked)::before { border-color: var(--gruen-dunkel); box-shadow: inset 0 0 0 3px #fff; background: var(--gruen-dunkel); }
.z-wahl label:has(input:focus-visible) { outline: 3px solid var(--orange-aktion); outline-offset: 2px; }
/* Kurze Wahl (Zeitfenster, Verordnung): Pillen, die so breit sind wie ihr Wort */
.z-wahl.z-wahl-kurz { display: flex; flex-wrap: wrap; gap: 8px; }
.z-wahl-kurz label { min-height: 44px; padding: 8px 18px; font-size: .9rem; border-radius: var(--bogen-pille); flex-direction: row; align-items: center; }
.z-wahl-kurz label::before { display: none; }
.z-wahl-kurz label:has(input:checked) { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; }
.z-formkarte .formfeld input { padding: 14px 15px; border-color: var(--linie-stark); background: #FCFEF8; }
.z-formkarte .formfeld input:hover, .z-formkarte .formfeld input:focus { border-color: var(--gruen-dunkel); background: #fff; }
.z-formkarte .formfeld-checkbox { background: var(--karte-hell); border-radius: 12px; padding: var(--m4); font-size: .84rem; line-height: 1.5; }
.z-formkarte [data-senden] { width: 100%; padding-block: 16px; font-size: .9rem; }
@media (max-width: 760px) {
  .z-formkarte { padding: var(--m6) var(--m5); border-radius: var(--bogen-karte); box-shadow: var(--schatten-2); }
  .z-wahl { grid-template-columns: 1fr; }
}

/* ---------- Z8  PRAXIS- UND LEISTUNGSSEITEN ---------- */
/* Leistungsliste der Praxisseiten: am Rechner zwei Spalten statt 16 Zeilen untereinander */
@media (min-width: 900px) {
  [data-auftritt="zeitlos"] #leistungen .leistungs-liste { columns: 2; column-gap: var(--m12); }
  [data-auftritt="zeitlos"] #leistungen .leistungs-liste > li { break-inside: avoid; }
}
/* Anfahrt (Schrittkarten mit S+U, U, P): hell statt dunkel, damit die
   drei Wege nicht mit den Ablauf-Schritten verwechselt werden */
[data-auftritt="zeitlos"] .anfahrt-reihe .schritt-karte {
  background: #fff; color: var(--tinte); border-color: var(--gruen); box-shadow: var(--schatten-gruen);
}
[data-auftritt="zeitlos"] .anfahrt-reihe .schritt-karte h3 { color: var(--tinte); }
[data-auftritt="zeitlos"] .anfahrt-reihe .schritt-karte p { color: var(--tinte-weich); }
@media (min-width: 761px) {
  [data-auftritt="zeitlos"] .anfahrt-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Leistungsliste am Handy gekürzt (r12-zeitlos.js Z8), der Rest folgt auf Knopfdruck */
.leistungs-liste.z-gekuerzt > li:nth-child(n+8) { display: none; }
.leistungs-liste.z-gekuerzt { -webkit-mask-image: linear-gradient(#000 calc(100% - 70px), transparent); mask-image: linear-gradient(#000 calc(100% - 70px), transparent); }
.z-mehr-knopf { display: flex; width: 100%; justify-content: center; margin-top: var(--m4); }
.z-mehr-knopf[hidden] { display: none; }
/* Fotokarten ohne Absatz („Weitere Leistungen“): „Ansehen“ sitzt unten, in allen Karten der Reihe auf gleicher Höhe */
[data-auftritt="zeitlos"] .weg-karte.mit-bild > .weiter { margin-top: auto; padding-top: var(--m2); }
/* Im Markup steht die Überschrift zuerst (Vorleser, Ton-Gate: <a><h3> ist ein
   Name, keine Dublette). Sichtbar kommen Bild und Pille davor. */
[data-auftritt="zeitlos"] .weg-karte.mit-bild > .weg-karte-bild { order: -2; }
[data-auftritt="zeitlos"] .weg-karte.mit-bild > .badge { order: -1; }
/* Praxisseiten: Abstand zwischen Überschrift und Text im Abschnitt „Praxis“ wie überall */
[data-auftritt="zeitlos"] #praxis .headline + .fliess { margin-top: var(--m5); }

/* ============================================================
   Z9  HANDYPRÜFUNG 12.10.2026
   Befunde aus der Prüfung aller Zeitlos-Seiten bei 390 und 1440 px.
   Alles hängt an [data-auftritt="zeitlos"] oder an einer z-Klasse.
   ============================================================ */

/* ---------- Z9a  Gleicher Abstand unter der Bühne (W03/W04 sinngemäß) ----------
   Wie physiopark.berlin RB1: ohne die feste Mindesthöhe des Textblocks
   (schwung.css S12). Gemessen vorher bei 390 px 153 bis 309 px Leere vom
   letzten Knopf bis zum ersten Inhalt, je Seite anders. Jetzt am Handy
   überall 32 px Bühnenluft plus 40 px Abschnittsluft = 72 px, am Rechner
   wie bisher zweimal --abschnitt-luft (202 px bei 1440, dort war es
   schon gleich). */
[data-auftritt="zeitlos"] .seite-hero.buehne-gleich .buehne-text { min-height: 0; }
@media (max-width: 760px) {
  [data-auftritt="zeitlos"] .seite-hero.buehne { padding-bottom: 32px; }
  [data-auftritt="zeitlos"] .seite-hero.buehne + section { padding-top: 40px; }
  /* Preise: die Leiste bringt 12 px eigenes Polster mit */
  [data-auftritt="zeitlos"] .seite-hero.buehne + .z-preise { padding-top: 28px; }
  /* Am Handy steht das Bild über dem Text: Zeilen ausgleichen, damit keine
     Präposition allein am Ende der dunklen Zeile steht */
  [data-auftritt="zeitlos"] .seite-hero .headline { text-wrap: balance; }
}

/* Neurologie: im 4:3 der Handybühne war das Gesicht der Patientin am
   linken Rand halb angeschnitten */
@media (max-width: 960px) {
  [data-auftritt="zeitlos"][data-seite="/leistungen/neurologische-therapie/"] .seite-hero .buehne-rahmen img { object-position: 22% 38%; }
  [data-auftritt="zeitlos"][data-seite="/termin/"] .seite-hero .buehne-rahmen img { object-position: 50% 30%; }
  /* 13.10.2026: bei 30 % fehlte dem Therapeuten am Handy die Stirn */
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .buehne-rahmen img { object-position: 50% 8%; }
}

/* ---------- Z9b  Karriere am Handy in der Handyleiste (P03) ----------
   Der Reiter stand bei 390 px mittig am rechten Rand über dem Inhalt und
   verdeckte Preise und Satzenden. Seit dem Zusammenführen der Nachbesserungen
   (12.10.2026) gilt auf beiden Domains eine Lösung: r12-popup.js setzt links
   in die Handyleiste einen Chip mit Teamgesicht und Zahl der Stellen
   (r12-popup.css, .kp-chip), der Reiter fällt am Handy dort weg. Der Chip
   steht nur, solange die Leiste steht. Hier bleibt nur, was Zeitlos
   zusätzlich braucht: Lange Ziele („Tempelhof 030 85 40 71 30“ auf After
   Work) passen neben dem Chip nur etwas enger gesetzt und ohne Symbol. */
@media (max-width: 760px) {
  body[data-auftritt="zeitlos"] .handy-leiste.mit-kp-chip .handy-leiste-cta {
    padding-inline: 10px;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  body[data-auftritt="zeitlos"] .handy-leiste.mit-kp-chip .handy-leiste-cta svg { display: none; }
}
/* Unter 360 px ist neben dem Chip nur Platz für rund 150 px. „Tempelhof
   030 85 40 71 30“ bricht dort in zwei Zeilen um (Ort, Nummer), statt
   über den Knopfrand zu laufen (Merge-Prüfung 12.10.2026, 320 px). */
@media (max-width: 359px) {
  body[data-auftritt="zeitlos"] .handy-leiste.mit-kp-chip .handy-leiste-cta {
    white-space: normal;
    flex-wrap: wrap;
    align-content: center;
    gap: 0 .3em;
    letter-spacing: .02em;
    font-size: .7rem;
  }
  .handy-leiste-cta .leiste-nr { white-space: nowrap; }
}

/* ---------- Z9c  Preise: Umschalter klebt mit Grund (W05) ----------
   Die Leiste klebte ohne Hintergrund, die Frage „Wählen Sie Ihren Fall“
   schrieb sich über den Text darunter. Jetzt setzt r12-zeitlos.js Z6 den
   Klebepunkt so, dass die Frage unter den Kopf rutscht und nur die drei
   Knöpfe stehen bleiben; .klebt kommt, sobald die Leiste angedockt ist,
   und gibt ihr den Grund in Seitenfarbe mit weichem Schatten. */
.z-tarif-leiste.klebt::before {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 22px rgba(51, 83, 10, .10);
}
[data-auftritt="zeitlos"] .z-preise [id] { scroll-margin-top: calc(var(--kopf-hoehe, 72px) + 104px); }
@media (max-width: 760px) {
  .z-tarif-leiste { margin-bottom: var(--m10); }
  .z-tarif-wahl.umschalter button { padding: 8px 4px; }
  .z-tarif-wahl button strong { font-size: .94rem; }
  .z-tarif-wahl button small { font-size: .72rem; }
}

/* Zuzahlungsrechner: Zahl mit Tausenderpunkt (r12-zeitlos.js Z6b) */
.rechner-zahl.z-zahl-format { position: relative; }
.z-zahl-anzeige {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.rechner-zahl.z-zahl-format input:not(:focus) { color: transparent; caret-color: transparent; }
.rechner-zahl.z-zahl-format input:focus + .einheit + .z-zahl-anzeige,
.rechner-zahl.z-zahl-format input:focus ~ .z-zahl-anzeige { visibility: hidden; }

/* ---------- Z9d  Fotos in Schrittkarten (G14) ----------
   Bauteil wie physiopark.berlin RB2: die grüne Schrittkarte des Mockups
   trägt oben ein randloses Foto, die Pille „● 01“ sitzt auf der Kante.
   .z-ausschnitte (Leistungsseiten): EIN Motiv je Reihe, jede Karte zeigt
   einen anderen Ausschnitt (oben, Mitte, unten), am Rechner liest es sich
   wie eine Bildfolge, am Handy wechselt der Ausschnitt beim Wischen. Das
   Bild stand vorher klein in Abschnitt 2 (198 × 248 px am Handy). */
[data-auftritt="zeitlos"] .schritt-karte.mit-foto {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 var(--m8);
  overflow: visible;
}
[data-auftritt="zeitlos"] .schritt-karte.mit-foto > .schritt-foto {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 10;
  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="zeitlos"] .schritt-karte.mit-foto > :not(.schritt-foto, .schritt-nummer) { padding-inline: var(--m6); }
[data-auftritt="zeitlos"] .schritt-karte.mit-foto > .schritt-nummer { z-index: 2; }
[data-auftritt="zeitlos"] .schritt-karte.mit-foto h3 { hyphens: manual; overflow-wrap: break-word; }
[data-auftritt="zeitlos"] .z-ausschnitte > li:nth-child(1) > .schritt-foto { object-position: 50% 8%; }
[data-auftritt="zeitlos"] .z-ausschnitte > li:nth-child(2) > .schritt-foto { object-position: 50% 52%; }
[data-auftritt="zeitlos"] .z-ausschnitte > li:nth-child(3) > .schritt-foto { object-position: 50% 96%; }
[data-auftritt="zeitlos"] .z-ausschnitte > li:nth-child(4) > .schritt-foto { object-position: 50% 74%; }
/* Start: drei verschiedene Fotos, Gesichter im Bild */
[data-auftritt="zeitlos"] .z-mit-fotos .schritt-foto { object-position: 50% 30%; }
/* /termin/ (Abnahme 12.10.2026): Hände am Fuß, Füße auf dem Kissen im Bild */
[data-auftritt="zeitlos"] .z-mit-fotos .schritt-foto[src$="/leistung-manuelle-therapie.webp"] { object-position: 50% 72%; }
[data-auftritt="zeitlos"] .z-mit-fotos .schritt-foto[src$="/strecke-theraband.webp"] { object-position: 50% 60%; }
@media (max-width: 760px) {
  [data-auftritt="zeitlos"] .schritt-karte.mit-foto { padding-bottom: var(--m6); }
  [data-auftritt="zeitlos"] .schritt-karte.mit-foto > .schritt-foto { margin-bottom: var(--m5); }
  [data-auftritt="zeitlos"] .schritt-karte.mit-foto > :not(.schritt-foto, .schritt-nummer) { padding-inline: var(--m5); }
}

/* Tablet und App: Foto oben, Nummer klein in der Pille, kein leerer
   Kartenrest mehr (vorher 270 px Mindesthöhe, Nummer unten rechts) */
.z-digital .v-karte.mit-foto { min-height: 0; padding-top: 0; overflow: hidden; }
.z-digital .v-karte.mit-foto .v-foto {
  display: block;
  width: calc(100% + 2 * var(--m5));
  max-width: none;
  margin: 0 calc(-1 * var(--m5)) 0;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 30%;
}
.z-digital .v-karte.mit-foto .badge { position: relative; z-index: 1; margin-top: -17px; box-shadow: 0 6px 16px rgba(36, 57, 10, .18); margin-bottom: var(--m4); }
.z-digital .v-karte.mit-foto .badge::before { display: none; }
.z-digital .v-karte.mit-foto .z-v-nr {
  position: static;
  font-size: inherit;
  line-height: inherit;
  color: var(--orange-aktion);
}
.z-digital .v-karte.mit-foto p { padding-bottom: 0; }

/* ---------- Z9e  Anfahrt: Fotokarte vorn (G14) ---------- */
[data-auftritt="zeitlos"] .anfahrt-foto {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-gruen);
  list-style: none;
}
[data-auftritt="zeitlos"] .anfahrt-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}
[data-auftritt="zeitlos"] .anfahrt-foto::after {
  content: "";
  position: absolute; inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(24, 40, 6, .78));
}
[data-auftritt="zeitlos"] .anfahrt-foto-text {
  position: absolute; left: var(--m5); right: var(--m5); bottom: var(--m5); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: #fff;
}
[data-auftritt="zeitlos"] .anfahrt-foto-text .badge { background: #fff; margin-bottom: var(--m2); }
[data-auftritt="zeitlos"] .anfahrt-foto-text strong { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
[data-auftritt="zeitlos"] .anfahrt-foto-text > span:last-child { font-size: .95rem; color: #F2F8E6; }
/* Abnahme 12.10.2026 (G14): Foto und Wege als EINE Karte statt Wischreihe
   aus einer Fotokarte und drei Textkarten (bauen.py praxis_anfahrt). */
[data-auftritt="zeitlos"] .anfahrt-tafel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-top: var(--m4);
  background: #fff;
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-gruen);
  overflow: hidden;
}
[data-auftritt="zeitlos"] .anfahrt-tafel .anfahrt-foto { min-height: 300px; border-radius: 0; box-shadow: none; }
[data-auftritt="zeitlos"] .anfahrt-wege {
  list-style: none; margin: 0; padding: var(--m4) var(--m10);
  display: grid; align-content: center;
}
[data-auftritt="zeitlos"] .anfahrt-wege li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--m5); align-items: center;
  padding-block: var(--m5);
  border-top: 1px solid var(--linie);
}
[data-auftritt="zeitlos"] .anfahrt-wege li:first-child { border-top: 0; }
[data-auftritt="zeitlos"] .anfahrt-mittel {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 10px; border-radius: 999px;
  background: var(--karte-hell); border: 1.5px solid var(--gruen);
  color: var(--gruen-dunkel); font-family: var(--font-head); font-weight: 800; font-size: .95rem;
}
[data-auftritt="zeitlos"] .anfahrt-weg { display: flex; flex-direction: column; gap: 2px; }
[data-auftritt="zeitlos"] .anfahrt-weg strong { color: var(--tinte); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
[data-auftritt="zeitlos"] .anfahrt-weg > span { color: var(--tinte-weich); font-size: .95rem; line-height: 1.5; }
@media (max-width: 760px) {
  [data-auftritt="zeitlos"] .anfahrt-tafel { grid-template-columns: minmax(0, 1fr); }
  [data-auftritt="zeitlos"] .anfahrt-tafel .anfahrt-foto { min-height: 0; aspect-ratio: 4 / 3; }
  [data-auftritt="zeitlos"] .anfahrt-wege { padding: var(--m2) var(--m5); }
  [data-auftritt="zeitlos"] .anfahrt-wege li { grid-template-columns: 54px minmax(0, 1fr); gap: var(--m4); padding-block: var(--m4); }
  [data-auftritt="zeitlos"] .anfahrt-mittel { height: 38px; font-size: .85rem; }
  [data-auftritt="zeitlos"] .anfahrt-weg strong { font-size: 1rem; }
  [data-auftritt="zeitlos"] .anfahrt-weg > span { font-size: .9rem; }
}

/* ---------- Z9f  Karriere-Karte (Praxis- und Leistungsseiten) ----------
   Ersetzt die Pille mit Strich-Link. Eine Fotokarte, ganz antippbar, mit
   Pille, Satz und Knopf, wie die Karriere-Tafel der Teamseite, nur hell,
   weil auf den Praxisseiten das grüne Schlussband direkt folgt. */
.z-karriere { padding-block: calc(var(--abschnitt-luft) * .6); }
.z-karriere-karte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  overflow: hidden;
  background: linear-gradient(170deg, #FCFEF7, #F0F7E2);
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-gruen);
  color: var(--tinte);
  text-decoration: none;
  transition: transform var(--zeit-wechsel) var(--kurve-aus), box-shadow var(--zeit-wechsel) var(--kurve-aus);
}
.z-karriere-karte:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(78, 123, 8, .26); }
.z-karriere-karte:focus-visible { outline: 3px solid var(--orange-aktion); outline-offset: 3px; }
.z-karriere-bild { position: relative; min-height: 240px; overflow: hidden; }
.z-karriere-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
  transition: scale 600ms var(--kurve-aus);
}
.z-karriere-karte:hover .z-karriere-bild img { scale: 1.04; }
.z-karriere-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--m3);
  padding: var(--m10) var(--m10) var(--m10) var(--m8);
}
.z-karriere-pille { gap: 8px; background: #fff; }
.z-karriere-pille::before { display: none; }
.z-puls {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange-aktion);
  flex: none;
}
.z-karriere-titel {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.25;
  color: var(--tinte);
}
.z-karriere-satz { font-size: .95rem; line-height: 1.55; color: var(--tinte-weich); max-width: 46ch; }
.z-karriere-knopf { margin-top: var(--m3); gap: 10px; }
.z-karriere-knopf svg { width: 17px; height: 17px; transition: translate var(--zeit-tipp) var(--kurve-aus); }
.z-karriere-karte:hover .z-karriere-knopf svg { translate: 4px 0; }
/* Pulsring am Punkt entfernt 14.10.2026: Dauerbewegung ohne Anlass irritiert. */
@media (max-width: 760px) {
  .z-karriere-karte { grid-template-columns: 1fr; }
  .z-karriere-bild { min-height: 0; aspect-ratio: 16 / 10; }
  .z-karriere-text { padding: var(--m6) var(--m5) var(--m6); }
  .z-karriere-knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .z-karriere-karte, .z-karriere-karte:hover, .z-karriere-karte:hover .z-karriere-bild img { transform: none; scale: none; transition: none; }
}

/* ---------- Z9g  Praxisseiten (W02) ----------
   Leistungen mit eigener Seite als Fotokarten, die ganze Liste klappt
   darunter auf (r12-zeitlos.js Z8). Raum als Bildkarussell (bauteile.css
   K4) mit Fortschrittslinie und Pfeilkreisen, Team mit Foto. */
.z-praxis-karten { margin-bottom: var(--m8); }
@media (min-width: 1100px) {
  .z-praxis-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.leistungs-liste.z-zu { display: none; }
.z-liste-knopf { display: flex; margin-inline: auto; }
.z-liste-knopf[hidden] { display: none; }
.z-raum { display: flex; flex-direction: column; gap: var(--m5); min-width: 0; }
.z-raum .galerie-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.z-raum .galerie-slider::-webkit-scrollbar { display: none; }
.z-raum .galerie-slider figure img { height: clamp(260px, 26vw, 360px); }
.z-raum-fuss { display: flex; align-items: center; gap: var(--m5); }
.z-raum-fuss .slider-balken { flex: 1; margin: 0; }
.z-raum-fuss .slider-pfeile { flex: none; }
.ohne-blaettern .z-raum-fuss { display: none; }
@media (max-width: 760px) {
  .z-raum .galerie-slider { margin-inline: calc(-1 * var(--m6)); padding: 0 var(--m6) 6px; scroll-padding-inline: var(--m6); }
  .z-raum .galerie-slider figure img { height: 300px; }
}
[data-auftritt="zeitlos"] .z-praxis-team .split-bild img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%; width: 100%; height: auto; border-radius: var(--bogen-gross); }
@media (min-width: 961px) {
  [data-auftritt="zeitlos"] .z-praxis-team .split { align-items: center; }
}

/* ---------- Z9h  Fuß am Handy (G10) ----------
   Vorher 1657 px hoch, Zweispalter brachen um. Jetzt: Praxen als zwei
   kompakte Karten, die übrigen Gruppen als Akkordeon (r12-zeitlos.js Z9),
   ohne Skript alles offen. */
[data-auftritt="zeitlos"] .footer-satz { font-size: .9rem; line-height: 1.5; color: #42501F; margin-bottom: var(--m3); }
[data-auftritt="zeitlos"] .footer-satz a { color: #33530A; }
@media (max-width: 760px) {
  [data-auftritt="zeitlos"] .footer-grid.footer-r12 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marke" "praxen" "karriere" "pflege" "unternehmen";
    gap: var(--m6);
  }
  [data-auftritt="zeitlos"] .footer-r12 .footer-praxen { grid-template-columns: 1fr 1fr; gap: var(--m3); }
  [data-auftritt="zeitlos"] .footer-praxis {
    padding: var(--m4);
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(78, 123, 8, .18);
    border-radius: 14px;
    font-size: .86rem;
  }
  [data-auftritt="zeitlos"] .footer-praxis .footer-zeiten { font-size: .78rem; line-height: 1.55; }
  [data-auftritt="zeitlos"] .footer-zeiten-titel { display: block; margin-bottom: 2px; }
  [data-auftritt="zeitlos"] .footer-nav.footer-nav-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
  [data-auftritt="zeitlos"] .footer-nav.footer-nav-reihe a {
    padding: 7px 13px;
    border: 1px solid rgba(78, 123, 8, .3);
    border-radius: var(--bogen-pille);
    font-size: .84rem;
    text-decoration: none;
  }
  [data-auftritt="zeitlos"] .footer-marke .footer-claim { margin-bottom: 0; }
  /* Akkordeon */
  [data-auftritt="zeitlos"] .z-fuss-klapp > h3 { margin: 0; }
  [data-auftritt="zeitlos"] .z-fuss-knopf {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: var(--m3) 0;
    background: none; border: 0; border-top: 1px solid rgba(78, 123, 8, .2);
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
    cursor: pointer;
  }
  [data-auftritt="zeitlos"] .z-fuss-knopf svg { width: 18px; height: 18px; transition: rotate var(--zeit-wechsel) var(--kurve-aus); }
  [data-auftritt="zeitlos"] .z-fuss-knopf[aria-expanded="true"] svg { rotate: 180deg; }
  [data-auftritt="zeitlos"] .z-fuss-klapp:not(.offen) > :not(h3) { display: none; }
  [data-auftritt="zeitlos"] .z-fuss-klapp.offen > :not(h3) { margin-top: var(--m2); }
}
@media (max-width: 360px) {
  [data-auftritt="zeitlos"] .footer-r12 .footer-praxen { grid-template-columns: 1fr; }
}

/* ---------- Z9i  After Work: Terminkarte im Kartenstil, Themen mit Foto ---------- */
.z-abend-karte { font-family: var(--font-text); }
.z-abend-zeit {
  display: flex; align-items: center; gap: var(--m4);
  padding: var(--m5) var(--m6);
  margin-bottom: var(--m6);
  border-radius: var(--bogen-karte);
  background: #fff;
  border: 1px solid var(--linie);
}
.z-abend-zeit strong {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3rem); line-height: 1;
  color: var(--gruen-dunkel);
  font-variant-numeric: tabular-nums;
}
.z-abend-zeit span { font-size: .9rem; line-height: 1.35; color: var(--tinte-weich); }
.z-abend-liste { margin: 0; }
.z-abend-liste li { display: flex; flex-direction: column; gap: 1px; }
.z-abend-liste li strong { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--tinte); }
.z-abend-liste li span { font-size: .9rem; color: var(--tinte-weich); }
@media (min-width: 961px) {
  .z-abend-themen .split { align-items: center; }
}

/* Neurologie, Kasten „Außerhalb der Praxen“: Pille wie „Wann sie hilft“ */
[data-auftritt="zeitlos"] .aussage-etikett > .badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: #fff;
  margin: 0;
}

/* ---------- Z9j  Nach oben am Handy ----------
   Lag über Kalenderfeld, Formularknopf, Telefonknopf im Schlussband und
   „Alle offenen Stellen“ im Fuß. Am Handy tritt er zurück, solange ein
   Formular, das Schlussband oder der Fuß im Bild ist (r12-zeitlos.js Z10);
   solange die Handyleiste steht, ruht er ohnehin (bewegung.css B6). */
@media (max-width: 760px) {
  html.z-oben-ruht body[data-auftritt="zeitlos"] .nach-oben { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- Z9k  Handymenü: die beiden Praxen als Fotokarten ---------- */
.nav-praxen { display: none; }
@media (max-width: 960px) {
  [data-auftritt="zeitlos"] .nav-praxen {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--m3);
    padding: var(--m6) 0 var(--m8);
  }
  [data-auftritt="zeitlos"] .nav-praxis {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--linie); border-radius: 14px; background: #fff;
    box-shadow: var(--schatten-1);
  }
  [data-auftritt="zeitlos"] .nav-praxis img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  [data-auftritt="zeitlos"] .nav-praxis a { text-decoration: none; color: var(--tinte); }
  [data-auftritt="zeitlos"] .nav-praxis-name { display: block; padding: 10px 12px 2px; font-family: var(--font-head); font-weight: 800; font-size: .9rem; }
  [data-auftritt="zeitlos"] .nav-praxis-tel {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 12px 12px;
    font-size: .84rem; font-weight: 600; color: var(--gruen-dunkel) !important;
  }
  [data-auftritt="zeitlos"] .nav-praxis-tel svg { width: 15px; height: 15px; }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  [data-auftritt="zeitlos"] .main-nav > * { transition: opacity 260ms linear, translate 360ms var(--kurve-aus); }
  html:not(.menue-offen) body[data-auftritt="zeitlos"] .main-nav > * { opacity: 0; translate: 0 10px; }
  html.menue-offen body[data-auftritt="zeitlos"] .main-nav > :nth-child(2) { transition-delay: 40ms; }
  html.menue-offen body[data-auftritt="zeitlos"] .main-nav > :nth-child(3) { transition-delay: 80ms; }
  html.menue-offen body[data-auftritt="zeitlos"] .main-nav > :nth-child(4) { transition-delay: 120ms; }
  html.menue-offen body[data-auftritt="zeitlos"] .main-nav > :nth-child(5) { transition-delay: 160ms; }
  html.menue-offen body[data-auftritt="zeitlos"] .main-nav > :nth-child(6) { transition-delay: 200ms; }
}

/* ---------- Z9l  Danke, 404: drei Fotokarten ---------- */
@media (min-width: 761px) {
  .z-fotokarten.z-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Samstag: Formularspalte mit Überschrift statt Bühnentext (seit 12.10.
   steht die H1 in der Bühne wie auf jeder Seite) */
[data-auftritt="zeitlos"][data-seite="/samstag/"] .kampagne-start .headline + p { margin-top: var(--m5); }
[data-auftritt="zeitlos"][data-seite="/samstag/"] .kampagne-start .notiz-leise { margin-top: var(--m4); }
[data-auftritt="zeitlos"] .z-samstag-familie .split-bild img { border-radius: var(--bogen-gross); }
@media (max-width: 760px) {
  [data-auftritt="zeitlos"] :is(.z-abend-themen, .z-samstag-familie) .split-bild img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
}
/* Nur ein Raumbild (Friedenau): volle Spaltenbreite statt kleines Hochformat */
.z-raum .galerie-slider figure:only-child { width: 100%; }
.z-raum .galerie-slider figure:only-child img { width: 100%; height: auto; max-height: 560px; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 760px) {
  .z-raum .galerie-slider figure:only-child img { aspect-ratio: 4 / 3; height: auto; }
}

/* Z11  Kopfknopf „Termin vereinbaren“ ruht, solange die Bühne denselben
   Knopf zeigt (r12-zeitlos.js Z11, Agenturregel keine doppelten Knöpfe). */
/* Nur ab 961 px: darunter steht der Knopf im aufgeklappten Menü und muss
   dort immer da sein (style.css „Mobiles Menü“). */
@media (min-width: 961px) {
  .z-kopftermin-ruht .site-header .nav-knopf[href="/termin/"] {
    visibility: hidden; opacity: 0; pointer-events: none;
  }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .site-header .nav-knopf[href="/termin/"] { transition: opacity 220ms ease, visibility 0s linear 0s; }
  .z-kopftermin-ruht .site-header .nav-knopf[href="/termin/"] { transition: opacity 220ms ease, visibility 0s linear 220ms; }
}

/* ---------- Z4b  QUERKARTEN ALS WISCHREIHE (Abnahme 12.10.2026) ----------
   Agenturregel: Kachelreihen unter 760 px als Wischreihe mit Anschnitt und
   Fortschrittslinie. .wisch bekommt die Linie aus bauteile.js (P1); die
   Liste der Reihentypen in bauteile.css kennt .z-duo nicht, deshalb hier. */
@media (max-width: 760px) {
  .z-duo.wisch {
    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;
  }
  .z-duo.wisch .weg-karte.z-quer { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  [data-auftritt="zeitlos"] .z-duo.wisch .z-quer .weg-karte-bild { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* ---------- Z12  START: HINWEIS „PRAXIS WÄHLEN“ (Restpunkte 13.10.2026) ----------
   Die Bühne des Zeitlos-Starts zeigte nicht, dass es weitergeht: bei
   390 x 844 endete sie bei 859 px, die nächste Überschrift stand bei 923,
   bei 1440 x 900 sah man unter der Bühne nur Weiß, weil die Überschrift erst
   beim Scrollen einblendet. Jetzt wie auf physiopark.berlin (r12-start.css
   ST1, gleiche Gestaltung, eigene Klassen): Hinweis mit Pfeilkreis, der
   dreimal wippt, darunter der Anschnitt der Praxiswahl. Der Hinweis ersetzt
   den Rahmenknopf „Praxis wählen“ (gleiches Ziel #praxen, keine doppelten
   Knöpfe). Am Handy wird das Bühnenbild flacher (16:9 wie die Karriere-
   bühne mit Eckdaten, seiten.css), auf niedrigen Handys (667 px) fällt es
   weg, sonst passt kein Hinweis in den ersten Bildschirm. Der erste
   Abschnitt nach der Bühne steht ohne Einblendung sofort da. */
.z-weiter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gruen-link);
  border-radius: var(--bogen-feld);
  transition: opacity var(--zeit-wechsel) linear;
}
.z-weiter-kreis {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gruen);
  background: rgba(255, 255, 255, .8);
  color: var(--gruen-dunkel);
  transition: background var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear;
}
.z-weiter-kreis svg { width: 20px; height: 20px; }
.z-weiter:hover .z-weiter-kreis { background: rgba(145, 199, 61, .16); border-color: var(--gruen-dunkel); }
.z-weiter:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .z-weiter-kreis svg { animation: z-wippen 1.6s cubic-bezier(.45, 0, .55, 1) .8s 3; }
}
@keyframes z-wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
/* Wer schon scrollt, braucht den Hinweis nicht mehr (r12-zeitlos.js Z12) */
.z-gescrollt .z-weiter { opacity: 0; pointer-events: none; }

/* Erster Abschnitt nach der Bühne: sofort sichtbar, ohne Einblendung */
.js.bw body[data-auftritt="zeitlos"][data-seite="/"] #praxen [data-bw]:not(.bw-da),
.js.bw body[data-auftritt="zeitlos"][data-seite="/"] #praxen [data-bw]:not(.bw-da) > * {
  opacity: 1; translate: none; scale: none; clip-path: none;
}

/* Rechner: Hinweis mittig an der Unterkante der Bühne, wie die Türen auf
   physiopark.berlin; die Praxiswahl rückt näher, ihre Überschrift beginnt
   im ersten Bildschirm (1440 x 900). */
@media (min-width: 961px) {
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .z-weiter {
    position: absolute;
    left: 50%;
    bottom: clamp(14px, 1.8vw, 26px);
    translate: -50% 0;
  }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne + section { padding-top: clamp(44px, 4.4vw, 64px); }
}
@media (min-width: 961px) and (max-height: 860px) {
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne { padding-top: 32px; }
}
/* Tablet und Handy: Hinweis mittig unter dem Terminknopf */
@media (max-width: 960px) {
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .z-weiter {
    display: flex;
    width: fit-content;
    margin: 10px auto 0;
  }
}
@media (max-width: 760px) {
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne .buehne-rahmen {
    aspect-ratio: auto;
    height: clamp(120px, calc(100svh - 652px), 230px);
  }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne .seite-hero-grid { row-gap: 28px; }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne { padding-bottom: 8px; }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne + section { padding-top: 34px; }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .z-weiter { gap: 10px; padding: 6px 10px; }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .z-weiter-kreis { width: 36px; height: 36px; }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .z-weiter-kreis svg { width: 17px; height: 17px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero.buehne .buehne-bild { display: none; }
}

/* ---------- Z13  RESTPUNKTE 13.10.2026: Praxisseiten, Termin ---------- */
/* Team und Karriere-Karte sind beide weiß: zwischen „Das Team von
   PHYSIOPARK“ und der Karte standen 155 px (390) und 186 px (1440) Leere,
   zwei volle Abschnittsränder plus Kopfabstand. Jetzt liest es sich als ein
   Abschnitt mit dem Abstand eines Abschnittsrands. */
[data-auftritt="zeitlos"] .z-praxis-team + .z-karriere { padding-top: 0; }
[data-auftritt="zeitlos"] .z-praxis-team .abschnitt-kopf { margin-bottom: 0; }
/* Termin, Etikett „Termin absagen“ (vorher „Wenn Sie nicht kommen können“,
   brach bei 390 px zweizeilig und saß schief): kurz und immer einzeilig */
[data-auftritt="zeitlos"] .aussage .aussage-pille { white-space: nowrap; }

/* ---------- Z14  PREISE, RESTPUNKTE 13.10.2026 (W05) ----------
   Teamliste: am Handy „richtig langweilig und basic“, gewünscht etwas
   Hochwertiges. Preise und Zahlen unverändert, nur die Gestalt:
   a) Formel unter 480 px untereinander: Zahl links, Satz rechts, die
      Zeichen + und = sitzen auf der Fuge zwischen den Gliedern. Vorher
      schnitt die Spalte bei 320 und 360 px „Behandlungen“ ab (Inhalt 98 px,
      Platz 73 px).
   b) Preislisten als eine Karte mit dichten Zeilen: Leistung links, Dauer
      klein darunter, Preis rechts, feine Linie dazwischen. Vorher 11 Einzel-
      karten mit Pille, rund 1000 px am Handy.
   c) „Gilt für“ als ruhige Liste mit Haken statt ausgefranster Pillen
      (eine davon zweizeilig).
   d) Fotoanker oben in der Preiskarte, Pille auf der Bildkante wie bei
      den Fotokarten der übrigen Seiten. */

/* a) Formel */
@media (max-width: 479px) {
  .z-formel { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .z-formel-glied {
    display: grid;
    grid-template-columns: 4.9rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--m4);
    padding: var(--m5) var(--m5);
  }
  .z-formel-glied .gross { font-size: 1.85rem; }
  .z-formel-glied .klein { font-size: .9rem; }
  .z-formel .z-formel-zeichen {
    grid-column: auto;
    justify-self: center;
    position: relative; z-index: 1;
    width: 34px; height: 34px;
    margin: -10px 0;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(36, 57, 10, .12);
  }
  .z-formel-ergebnis { grid-column: auto; }
  .z-formel-ergebnis .gross { font-size: 1.3rem; line-height: 1.15; }
}

/* b) Preislisten: eine Karte, dichte Zeilen */
.z-preisliste {
  gap: 0;
  padding: 0 var(--m6);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-1);
  overflow: hidden;              /* schneidet die Linie unter der letzten Zeile ab */
}
.z-preisliste > li {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name preis" "dauer preis";
  align-items: center;
  gap: 3px var(--m5);
  padding: 15px 0;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
}
.z-preisliste > li:hover { border-color: var(--linie); box-shadow: none; }
.z-preisliste .z-pl-name { grid-area: name; font-size: .98rem; font-weight: 600; line-height: 1.35; }
.z-preisliste .z-pl-dauer {
  grid-area: dauer; justify-self: start;
  padding: 0; background: none; border-radius: 0;
  font-size: .82rem; color: var(--tinte-weich);
}
.z-preisliste .z-pl-dauer.z-leer { display: none; }
.z-preisliste .z-pl-preis {
  grid-area: preis; align-self: center;
  min-width: 0;
  font-size: 1.12rem;
  letter-spacing: -.01em;
}
.z-preisliste .z-pl-wahl { grid-template-areas: "name preis" "dauer preis"; }
.z-preisliste .z-pl-wahl .z-mt-knoepfe { margin-top: 6px; padding: 3px; background: var(--karte-hell); border-radius: var(--bogen-pille); }
@media (min-width: 900px) {
  /* Am Rechner zwei Spalten, sonst stünde der Preis 900 px neben der Leistung */
  #z-liste-privat { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--m12); padding-inline: var(--m8); }
  .z-preisliste[aria-labelledby="z-zubuch-titel"] { max-width: 760px; padding-inline: var(--m8); }
}
@media (max-width: 760px) {
  .z-preisliste { padding: 0 var(--m5); }
  .z-preisliste > li { padding: 13px 0; column-gap: var(--m3); }
  .z-preisliste .z-pl-name { font-size: .94rem; }
  .z-preisliste .z-pl-preis { font-size: 1.05rem; }
}
/* Filter: Abstand zur Karte etwas enger, die Pillen gehören zur Liste */
.z-block .z-filter { margin-bottom: var(--m4); }

/* c) Gilt für: Liste mit Haken */
.z-chips.z-gilt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--m6);
  margin-bottom: var(--m6);
}
.z-chips.z-gilt li {
  position: relative;
  padding: 9px 0 9px 26px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--tinte);
}
.z-chips.z-gilt li::before {
  content: "";
  position: absolute; left: 2px; top: 13px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gruen-dunkel);
  border-bottom: 2px solid var(--gruen-dunkel);
  rotate: -45deg;
}
.z-chips.z-gilt li.z-lang { grid-column: 1 / -1; }
@media (max-width: 899px) {
  .z-chips.z-gilt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .z-chips.z-gilt { grid-template-columns: minmax(0, 1fr); }
  .z-chips.z-gilt li { padding-block: 8px; font-size: .9rem; }
}

/* d) Fotoanker der Preiskarte */
.z-dauer { grid-template-areas: "foto foto" "kopf anzeige" "gilt gilt"; overflow: hidden; }
.z-dauer-foto {
  grid-area: foto;
  position: relative;
  margin: calc(-1 * var(--m8)) calc(-1 * var(--m8)) 0;
}
.z-dauer-foto img {
  display: block;
  width: 100%; max-width: none;
  height: auto;
  aspect-ratio: 21 / 6;
  object-fit: cover;
  object-position: 50% 46%;
}
.z-dauer-pille {
  position: absolute;
  left: var(--m8); bottom: 0;
  translate: 0 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(36, 57, 10, .16);
  white-space: nowrap;
}
.z-dauer-kopf { padding-top: var(--m4); }
@media (max-width: 760px) {
  .z-dauer { grid-template-areas: "foto" "kopf" "anzeige" "gilt"; }
  .z-dauer-foto { margin: calc(-1 * var(--m6)) calc(-1 * var(--m5)) 0; }
  .z-dauer-foto img { aspect-ratio: 16 / 8; }
  .z-dauer-pille { left: var(--m5); }
  .z-dauer-kopf { padding-top: var(--m3); }
}
html:not(.js) .z-dauer-foto { display: block; }
/* Rechner: Foto als linke Spalte neben Dauerwahl und Preis. Als Streifen
   über 970 px Breite schnitt es Köpfe an. Tablet: Streifen etwas höher. */
@media (min-width: 761px) and (max-width: 1099px) {
  .z-dauer-foto img { aspect-ratio: 2 / 1; object-position: 50% 44%; }
}
@media (min-width: 1100px) {
  .z-dauer {
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "foto kopf anzeige" "gilt gilt gilt";
    column-gap: var(--m8);
  }
  .z-dauer-foto { margin: calc(-1 * var(--m8)) 0 0 calc(-1 * var(--m8)); }
  .z-dauer-foto img { height: 100%; aspect-ratio: auto; min-height: 200px; object-position: 50% 40%; }
  .z-dauer-pille { top: var(--m5); bottom: auto; left: var(--m5); translate: none; }
  .z-dauer-kopf { padding-top: 0; }
}

/* ---------- Z15  Gesamtdurchsicht 13.10.2026: Karriere-Karte bei 320 px ----------
   Die Karte schnitt auf zehn Seiten Pille, Titel und Knopf rechts ab
   (Inhalt 294 px, Platz 268 px): Pille ohne Umbruch, „Physiotherapeutinnen“
   in 1,2rem breiter als die Spalte. */
@media (max-width: 760px) {
  .z-karriere-karte { grid-template-columns: minmax(0, 1fr); }
  .z-karriere-text { min-width: 0; }
}
@media (max-width: 359px) {
  .z-karriere-text { padding: var(--m5) var(--m4) var(--m5); }
  .z-karriere-pille { font-size: .68rem; letter-spacing: 0; padding-inline: 10px; gap: 6px; }
  .z-karriere-titel { font-size: 1.06rem; hyphens: auto; -webkit-hyphens: auto; }
  .z-karriere-satz { font-size: .9rem; }
  .z-karriere-knopf { padding-inline: var(--m4); }
}

/* ---------- Z15  /samstag/ am Handy: Formular früher (Prüfrunde 13.10.2026) ----------
   Lucas 08.10.: einfache Landingpage für die Anzeigen, besser als das
   Kontaktformular. Der Senden-Knopf stand bei 390 px erst bei y 2404 (fast
   drei Bildschirme). Die Einleitung links wiederholt Bühnenzeile und
   Formularkopf; am Handy fällt sie weg, der Samstagshinweis bleibt. */
@media (max-width: 760px) {
  [data-auftritt="zeitlos"][data-seite="/samstag/"] .kampagne-start .kontakt-grid > div:first-child > :not(.notiz-leise) { display: none; }
  [data-auftritt="zeitlos"][data-seite="/samstag/"] .kampagne-start { padding-top: var(--m6); }
  /* ohne Samstagshinweis (Kundenansicht, bis Lucas die Samstage bestätigt) ist die Spalte leer */
  [data-auftritt="zeitlos"][data-seite="/samstag/"] .kampagne-start .kontakt-grid > div:first-child:not(:has(.notiz-leise)) { display: none; }
}