/* ============================================================
   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 ---------- */
.z-praxen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: var(--m8);
}
.z-praxis {
  position: relative;               /* hält .nur-vorleser in der Wischreihe, sonst 585 px Dokumentbreite */
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: var(--m4);
  align-content: start;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-2);
  padding-bottom: var(--m6);
  overflow: hidden;
  transition: box-shadow 220ms var(--kurve-aus), border-color 220ms linear, transform 220ms var(--kurve-aus);
}
.z-praxis > :not(.z-praxis-bild) { margin-inline: var(--m6); min-width: 0; }
.z-praxis:hover { border-color: var(--gruen); box-shadow: var(--schatten-3); }
.z-praxis-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--m2); }
.z-praxis-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-praxis-bild::after {
  content: "";
  position: absolute; inset: 55% 0 0;
  background: linear-gradient(transparent, rgba(36, 57, 10, .35));
  pointer-events: none;
}
.z-praxis-ort {
  position: absolute; left: var(--m5); bottom: var(--m5); z-index: 1;
  background: #fff;
  box-shadow: 0 6px 18px rgba(36, 57, 10, .25);
}
.z-praxis h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--tinte);
  align-self: end;
}
.z-praxis-adresse { display: flex; gap: var(--m3); align-items: flex-start; font-size: 1rem; color: var(--tinte); line-height: 1.5; }
.z-praxis-adresse svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gruen-dunkel); }
.z-praxis-adresse small { display: block; font-size: .88rem; color: var(--tinte-weich); margin-top: 2px; }
.z-praxis-tel {
  justify-self: start;
  display: inline-flex; align-items: center; gap: var(--m3);
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  color: var(--gruen-dunkel);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid var(--linie-stark);
  padding-bottom: 2px;
  transition: border-color var(--zeit-wechsel) linear;
}
.z-praxis-tel:hover { border-bottom-color: var(--gruen-dunkel); }
.z-praxis-tel svg { width: 22px; height: 22px; flex: none; }
.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; }
.z-woche li.heute { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; box-shadow: 0 8px 18px rgba(78, 123, 8, .3); }
.z-woche li.heute b { color: #fff; }  /* Kontrast 12.10.: Leuchtgrün auf #4E7B08 nur 3,76:1 */
.z-praxis-knopf { justify-self: stretch; display: flex; justify-content: center; width: auto; text-align: center; margin-top: var(--m2); }
@media (min-width: 761px) {
  .z-praxis-bild { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .z-praxen.wisch {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 340px);
    column-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) 18px;
  }
  .z-praxen.wisch::-webkit-scrollbar { display: none; }
  .z-praxen.wisch > * { scroll-snap-align: start; }
  .z-praxis { box-shadow: var(--schatten-1); }
  .z-praxis > :not(.z-praxis-bild) { margin-inline: var(--m5); }
  .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: sieben Karten, 4 + 3 ab Rechnerbreite */
@media (min-width: 1100px) {
  [data-auftritt="zeitlos"][data-seite="/leistungen/"] #behandlungsliste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1099px) {
  [data-auftritt="zeitlos"][data-seite="/leistungen/"] #behandlungsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 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%; }
  [data-auftritt="zeitlos"][data-seite="/"] .seite-hero .buehne-rahmen img { object-position: 50% 30%; }
}

/* ---------- 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; }
@media (prefers-reduced-motion: no-preference) {
  .z-puls::after {
    content: "";
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--orange-aktion);
    animation: z-puls 1.8s var(--kurve-aus) infinite;
  }
}
@keyframes z-puls { from { opacity: .9; scale: .5; } to { opacity: 0; scale: 1.5; } }
@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; }
}