/* ============================================================
   r13  BAUTEILE (13.10.2026)
   Rückmeldung Julian zu „Das erwartet Sie“: Der grün gefüllte Eintrag
   darf bleiben, aber wer mit der Maus auf einen anderen Eintrag geht,
   erwartet, dass etwas passiert. Deshalb wandert die grüne Füllung auf
   den Eintrag unter der Maus (R6). Die Praxiskarten sind eine ruhige
   Karte mit einem Rahmen, die ganz zur Praxis führt (R4).

     R3  Verweis mit Pfeilkreis (.weiter-kreis), wie auf der Karriere
     R4  Praxiskarte (.praxis-karte): Berliner Start (.start-praxen) und
         Zeitlos Start und Samstag (.z-praxen, bauen.py praxis_karte)
     R6  Wandernde Hervorhebung ([data-wander], r13-bauteile.js)
   Eingebunden nach allen r12-Dateien (bauen.py R13_CSS, R13_JS).
   Faktenkarte, Seitenleisten-Vorteile, Behandlungszeiten und die
   Hover-Effekte der Karten stehen wieder an ihren alten Stellen
   (style.css, bauteile.css, r12-popup.css, r12-zeitlos.css Z1).
   ============================================================ */

/* ---------- R3  VERWEIS MIT PFEILKREIS ----------
   Derselbe Verweis wie auf der Karriere (r12-karriere.css H11): Wort und
   gefüllter Pfeilkreis, beim Zeigen orange und einen Schritt nach rechts. */
.weiter.weiter-kreis { gap: 12px; white-space: nowrap; }
.weiter.weiter-kreis::after {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--gruen-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--zeit-wechsel) var(--kurve-aus), background-color var(--zeit-wechsel) linear;
}
.weiter.weiter-kreis:hover::after { width: 36px; background-color: var(--orange-aktion); transform: translateX(3px); }

/* ---------- R4  PRAXISKARTE ----------
   Eine Karte, ein Rahmen: feine Linie und weicher Schatten, gleich an
   beiden Karten. Kein Kasten im Kasten: Das Telefon ist eine Textzeile mit
   kleinem Symbol, der Weg zur Praxis ein Verweis mit Pfeilkreis. Beide
   stehen im Fuß der Karte über einer feinen Linie, in beiden Karten auf
   derselben Höhe (Subgrid, Wunsch der Teamliste). Die ganze Karte führt
   zur Praxisseite (der Verweis spannt sich über die Karte), das Telefon
   bleibt eigener Anruf-Verweis darüber. Hover nur, weil die Karte
   wirklich anklickbar ist: Schatten, Foto zoomt leicht, Pfeil wird orange. */
.praxis-karte {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-1);
  overflow: hidden;
  transition: box-shadow 320ms var(--kurve-aus), border-color 320ms linear;
}
.praxis-karte :is(.saeule-bild, .z-praxis-bild) { position: relative; overflow: hidden; }
.praxis-karte :is(.saeule-bild, .z-praxis-bild) img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--kurve-aus);
}
/* Ortspille auf dem Foto: weiß, ohne zweiten Rand */
.praxis-karte :is(.start-praxis-ort, .z-praxis-ort) {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  margin: 0;
  width: max-content;
  gap: 8px;
  padding: 5px 13px;
  font-size: .78rem;
  border-color: transparent;
  background: #fff;
  box-shadow: 0 4px 14px rgba(36, 57, 10, .16);
}
.praxis-karte :is(.start-praxis-ort, .z-praxis-ort)::before { width: 9px; height: 9px; }
.praxis-karte h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.18rem, 1.7vw, 1.4rem);
  line-height: 1.25;
  color: var(--tinte);
  margin: 0;
}
.praxis-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--m3) var(--m5);
  margin-top: var(--m5);
  padding-top: var(--m5);
  border-top: 1px solid var(--linie);
}
.praxis-tel {
  position: relative;
  z-index: 2;                          /* über dem Kartenverweis */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
}
.praxis-tel svg { width: 18px; height: 18px; flex: none; color: var(--gruen-dunkel); }
.praxis-tel:hover { color: var(--gruen-dunkel); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Der Verweis spannt sich über die ganze Karte. position: static, sonst
   bezieht sich die Fläche auf den Verweis selbst (.weiter ist relativ). */
.praxis-ziel { position: static; }
.praxis-ziel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.praxis-karte:has(.praxis-ziel:focus-visible) { outline: 3px solid var(--orange-aktion); outline-offset: 3px; }
.praxis-ziel:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .praxis-karte:hover { box-shadow: var(--schatten-3); border-color: var(--linie-stark); }
  .praxis-karte:hover :is(.saeule-bild, .z-praxis-bild) img { transform: scale(1.035); }
  .praxis-karte:hover .praxis-ziel::after { background-color: var(--orange-aktion); transform: translateX(3px); }
}
.praxis-karte:active { box-shadow: var(--schatten-2); }

/* Berliner Startseite: Bild, Anschrift, Satz, Fuß */
.start-praxen .saeule-bild { aspect-ratio: 16 / 10; }
.start-praxen .saeule-bild img { object-position: 50% 30%; }
.start-praxen .saeule-text { display: flex; flex-direction: column; padding: var(--m6) var(--m6) var(--m6); }
.start-praxen .saeule-text h3 { margin-bottom: var(--m3); }
.start-praxen .saeule-text > p { flex: 1 1 auto; margin: 0; font-size: var(--grad-s); }
@supports (grid-template-rows: subgrid) {
  .saeulen.start-praxen { grid-template-rows: repeat(4, auto); row-gap: 0; }
  .start-praxen > .praxis-karte { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .start-praxen .saeule-bild { grid-row: 1; }
  .start-praxen .saeule-text { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .start-praxen .praxis-fuss { align-self: end; }
}
@media (max-width: 760px) {
  .saeulen.wisch.start-praxen .saeule-bild { aspect-ratio: 4 / 3; }
  .saeulen.wisch.start-praxen .saeule-text { padding: var(--m5); }
}

/* Zeitlos (Start und Samstag): Bild, Name, Anschrift, Zeiten, Fuß */
.z-praxen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--m8);
}
.z-praxis {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: var(--m4);
  align-content: start;
  padding-bottom: var(--m6);
}
.z-praxis > :not(.z-praxis-bild) { margin-inline: var(--m6); min-width: 0; }
.z-praxis-bild { aspect-ratio: 4 / 3; margin-bottom: var(--m2); }
.z-praxis h3 { align-self: end; }
.z-praxis-adresse { display: flex; gap: var(--m3); align-items: flex-start; margin: 0; 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 .praxis-fuss { margin-top: var(--m1); align-self: end; }
@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 { padding-bottom: var(--m5); }
  .z-praxis > :not(.z-praxis-bild) { margin-inline: var(--m5); }
}

/* ---------- R6  WANDERNDE HERVORHEBUNG ----------
   Listen, in denen ein Eintrag grün gefüllt ist, die übrigen gleich:
     .kp-vorteile ul      Karriere-Seitenleiste „Das erwartet Sie“
                          (Berlin und Zeitlos, bauen.py karriere_hinweis_bauen)
     .vorteile-karte      /physiotherapie-ergotherapie-pflegeheim/ (.gehalt-box)
     .z-wege              Zeitlos /preise/ „Wenn Sie mehr Zeit brauchen“
   Ausgangszustand wie bisher (.kp-vorteil-stark, .gehalt-box, .z-weg-preis
   grün). Zeigt die Maus auf einen anderen Eintrag, wandert das Grün dorthin
   und bleibt dort, wenn die Maus die Liste verlässt; am Handy wandert es
   beim Antippen.
   Ohne Skript leistet das CSS den Kern: Eintrag unter der Maus grün, der
   Ausgangseintrag solange normal. r13-bauteile.js setzt .wander-js und
   führt .wander-an (bleibt auf dem zuletzt gewählten Eintrag). Bei
   data-wander="gleiten" gleitet eine grüne Fläche (.wander-flaeche) von
   Eintrag zu Eintrag, sonst blenden die Einträge über. Die Einträge sind
   keine Verweise: kein Fokus, kein Hand-Zeiger.
   Farben im grünen Zustand wie beim bisher gefüllten Eintrag:
     Seitenleiste und Wege  #FFF auf #4E7B08   5,1:1
     Pflege                 #24390A auf #91C73D 6,1:1 */
[data-wander] {                        /* Vorgaben, schwächer als die Bauteile darunter */
  --w-zeit: 220ms;
  --w-grund-aus: transparent;
  --w-titel-aus: var(--tinte);
  --w-text-aus: var(--tinte-weich);
}
.kp-vorteile ul[data-wander] { --w-grund-an: var(--gruen-dunkel); --w-titel-an: #fff; --w-text-an: #fff; }
.vorteile-karte[data-wander] { --w-grund-an: var(--gruen); --w-titel-an: var(--gruen-nacht); --w-text-an: var(--gruen-nacht); }
.z-wege[data-wander] {
  --w-grund-aus: #fff; --w-grund-an: var(--gruen-dunkel);
  --w-rand-aus: var(--gruen); --w-rand-an: var(--gruen-dunkel);
  --w-titel-an: #fff; --w-text-an: #F2F8E6;
}
/* Gleitende Fläche: die Einträge selbst bleiben durchsichtig */
:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander].wander-gleiten { --w-grund-an: transparent; }

:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander] > :is(li, .gehalt-box, .fakt, .z-weg-karte) {
  --w-grund: var(--w-grund-aus);
  --w-rand: var(--w-rand-aus, transparent);
  --w-titel: var(--w-titel-aus);
  --w-text: var(--w-text-aus);
  position: relative;
  z-index: 1;                          /* über der gleitenden Fläche */
  cursor: default;
  background-color: var(--w-grund);
  transition: background-color var(--w-zeit) linear, border-color var(--w-zeit) linear,
              opacity var(--zeit-ruhig) var(--kurve-aus), transform var(--zeit-ruhig) var(--kurve-aus);
}
:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander] > :is(li, .gehalt-box, .fakt, .z-weg-karte) strong {
  color: var(--w-titel);
  transition: color var(--w-zeit) linear;
}
:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander] > :is(li, .gehalt-box, .fakt, .z-weg-karte) > span:not(.badge) {
  color: var(--w-text);
  transition: color var(--w-zeit) linear;
}

/* Grün: ohne Skript der Ausgangseintrag, solange die Maus auf keinem
   anderen Eintrag steht, und der Eintrag unter der Maus; mit Skript der
   Eintrag mit .wander-an. */
:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander]:not(.wander-js):not(:has(> :is(li, .gehalt-box, .fakt, .z-weg-karte):hover)) > :is(.kp-vorteil-stark, .gehalt-box, .z-weg-preis),
:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander]:not(.wander-js) > :is(li, .gehalt-box, .fakt, .z-weg-karte):hover,
:is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander] > .wander-an {
  --w-grund: var(--w-grund-an);
  --w-rand: var(--w-rand-an, transparent);
  --w-titel: var(--w-titel-an);
  --w-text: var(--w-text-an);
}

/* Seitenleiste: alle Einträge gleich gebaut, damit die Füllung auf jedem
   gleich sitzt. Trennlinie bleibt 1 px stark und wird neben dem grünen
   Eintrag durchsichtig (vorher border-top: 0, das ruckte um 1 px). */
.kp-vorteile ul[data-wander] > li { border-radius: 0; }   /* sonst biegt sich die Trennlinie an den Enden */
.kp-vorteile ul[data-wander] > li + li { border-top: 1px solid var(--linie); }
.kp-vorteile ul[data-wander]:not(.wander-js):not(:has(> li:hover)) > .kp-vorteil-stark,
.kp-vorteile ul[data-wander]:not(.wander-js):not(:has(> li:hover)) > .kp-vorteil-stark + li,
.kp-vorteile ul[data-wander]:not(.wander-js) > li:hover,
.kp-vorteile ul[data-wander]:not(.wander-js) > li:hover + li,
.kp-vorteile ul[data-wander] > .wander-an,
.kp-vorteile ul[data-wander] > .wander-an + li { border-top-color: transparent; border-radius: 10px; }

/* Pflege: Ausgangseintrag und Fakten mit gleichem Innenabstand, damit die
   Füllung jeden Eintrag gleich fasst. Der erste Eintrag sitzt wie bisher. */
.vorteile-karte[data-wander] { padding-bottom: var(--m4); }
.vorteile-karte[data-wander] > :is(.gehalt-box, .fakt) {
  margin: 0;
  padding: var(--m4) var(--m5);
  border-radius: 10px;
}
.vorteile-karte[data-wander] > :is(.gehalt-box, .fakt) + :is(.gehalt-box, .fakt) { margin-top: var(--m1); }
.vorteile-karte[data-wander] > :is(.gehalt-box, .fakt) strong { margin-bottom: 3px; }
@media (max-width: 760px) {
  .vorteile-karte[data-wander] { padding-bottom: var(--m2); }
  .vorteile-karte[data-wander] > :is(.gehalt-box, .fakt) { padding: var(--m3) var(--m4); }
}

/* Zeitlos-Wege: zwei Karten, die grüne blendet über (Grund und Rand). */
.z-wege[data-wander] > .z-weg-karte { border-color: var(--w-rand); }

/* Die gleitende Fläche (r13-bauteile.js legt sie in den Kartenrahmen) */
.wander-flaeche {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
  transition: transform 240ms var(--kurve-aus), width 240ms var(--kurve-aus), height 240ms var(--kurve-aus);
}
.wander-flaeche.wander-sofort { transition: none; }
.kp-vorteile > .wander-flaeche { background: var(--gruen-dunkel); }
.vorteile-karte > .wander-flaeche { background: var(--gruen); }

@media (prefers-reduced-motion: reduce) {
  .wander-flaeche { transition: none; }
  :is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander] > :is(li, .gehalt-box, .fakt, .z-weg-karte),
  :is(.kp-vorteile ul, .vorteile-karte, .z-wege)[data-wander] > :is(li, .gehalt-box, .fakt, .z-weg-karte) :is(strong, span) { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .praxis-karte :is(.saeule-bild, .z-praxis-bild) img,
  .weiter.weiter-kreis::after { transition: none; }
  .praxis-karte:hover :is(.saeule-bild, .z-praxis-bild) img { transform: none; }
  .praxis-karte:hover .praxis-ziel::after,
  .weiter.weiter-kreis:hover::after { transform: none; }
}

/* R7  Zwei Abschnitte mit gleichem Grund (Prüfrunde 13.10.2026)
   Unterer plus oberer Abstand ergaben 202 px Weißraum ohne sichtbare
   Trennung (Über uns zweimal, Fortbildungen einmal; auf Über uns entsteht
   das Paar, weil die Stimme der Geschäftsführung bis zur Freigabe in der
   Kundenansicht fehlt). Der zweite Abschnitt rückt auf rund 140 px heran. */
main > .abschnitt-hell + .abschnitt-hell:not(.start-wege-abschnitt),
main > .abschnitt-creme + .abschnitt-creme { padding-top: calc(var(--abschnitt-luft, 64px) * .38); }
/* Tempelhof-Karte der Berliner Startseite (Prüfrunde 13.10.2026): das Gesicht
   sitzt im oberen Drittel des Hochformats */
.praxis-karte img[src$="/start-karte-tempelhof-kletterwand.webp"] { object-position: 50% 12%; }
/* Dasselbe Foto auf Danke und 404 in der Wegkarte (Nachprüfung 13.10.2026) */
.weg-karte img[src$="/start-karte-tempelhof-kletterwand.webp"] { object-position: 50% 12%; }