/* ============================================================
   PHYSIOPARK: Restschicht (vormals "Schwung", 01.10.2026)

   Lädt NACH style.css. Bei gleicher Spezifität gewinnt deshalb diese
   Datei; wo style.css schärfer formuliert, wird hier gleich scharf
   formuliert, nie mit !important.

   05.10.2026, Rückbau auf das Mockup: Julian hat das Canva-Mockup der
   Karriereseite als verbindlich erklärt ("wenn du das häufiger tust,
   braucht unser Designteam gefühlt nichts zu erstellen"). Die Leitidee
   "Bogen über dem Y" ist gestrichen, mit ihr Bogenrahmen, Linie mit
   Punkt, Kreisbogen, drehender Ring, asymmetrische Ecken, Hover-Füllung,
   Kino-Bühne, Zitatkarte ohne Rahmen und Abschnittskopf zweispaltig.
   Was hier bleibt, kennt das Mockup oder trägt Praxisangaben:
     S1  Bühne: gerundetes Hochformat auf bg-hell.webp wie die Karriereseite,
         stumme Schleife im Bild
     S2  Leitsatz
     S3  Weiche und Themenwahl (Formen)
     S4  Dunkelgrüne Bänder auf bg-gruen.webp
     S10 Praxisangaben: Zeitentafel, Anfahrt, Preise
   S6 (Bildstrecke) und die Stimmenkarten hat Paket C am 05.10.2026 durch
   die Mockup-Bauteile in bauteile.css ersetzt.
     S8  Schmal
     S9  Bewegung reduzieren

   Ecken nur aus var(--bogen-*), 12px, 14px, 50% oder 999px.
   Farben ausschliesslich über die Token aus style.css, Abschnitt 1.
   ============================================================ */

:root {
  /* Karriereseite: 96 bis 110 px zwischen den Abschnitten */
  --abschnitt-luft: clamp(64px, 7vw, 104px);
}

/* Rhythmus: mehr Luft zwischen den Abschnitten, damit grosse Bausteine
   statt vieler kleiner wirken. */
.abschnitt { padding: var(--abschnitt-luft) 0; }
.abschnitt-schmal { padding: calc(var(--abschnitt-luft) * .8) 0; }

/* ============================================================
   S1  BÜHNE
   ============================================================ */

.seite-hero.buehne {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 7vw, 104px);
  /* Das Originalbild aus dem Mockup, wie .hero der Karriereseite: weiche
     Grünflecken auf fast weissem Grund, kein Orange, kein Bogen. */
  background: var(--papier-warm) url("../img/bg-hell.webp") center / cover no-repeat;
  overflow: hidden;
}
.seite-hero.buehne .seite-hero-grid {
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
/* Gemessen 05.10.2026: bei 1.08fr/.92fr blieben der H1 nur 565 px, sie lief
   auf 5 bis 6 Zeilen. 1.25fr/.75fr gibt 654 px Text und ein Bild von rund
   394 px Breite (Mockup bei 1366: rund 400 px). */
@media (min-width: 961px) {
  .seite-hero.buehne .seite-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}
.seite-hero.buehne h1 {
  font-size: var(--grad-h1);
  margin: var(--m5) 0 var(--m5);
}
.seite-hero.buehne .subline { font-size: clamp(1.1rem, .45vw + 1rem, 1.3rem); max-width: 31em; }
.seite-hero.buehne .btn-reihe { margin-top: var(--m8); }
.buehne-ohne-bild .buehne-text { max-width: 820px; }

/* Rahmen wie .hero-bild der Karriereseite: Hochformat 4:5, gleichmässig
   gerundet, weicher Schatten (Mockup rund 400 x 505 bei 1366 px). */
.buehne-bild {
  position: relative;
  margin: 0;
}
.buehne-rahmen {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--schatten-2);
  background: var(--karte-hell);
}
.seite-hero.buehne .buehne-rahmen img,
.buehne-rahmen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 0;
  box-shadow: none;
}
.buehne-rahmen video { opacity: 0; transition: opacity 900ms var(--kurve-aus); }
.buehne-rahmen video.laeuft { opacity: 1; }

/* Auftritt beim Laden: seit 06.10.2026 in bewegung.css B2 (Zeile für Zeile,
   Foto ohne Einblendung, damit der Ladewert nicht leidet). */

/* ============================================================
   S2  LEITSATZ
   Die Abschnittsmarke bleibt der kurze grüne Strich aus style.css, wie im
   Mockup. Einen Bogen gibt es seit 05.10.2026 nirgends mehr.
   ============================================================ */

/* Leitsatz direkt unter der Bühne. Seit 05.10.2026 wie die Beizeile im
   Mockup (Lora kursiv), nicht mehr als zweite Überschrift in Montserrat 600. */
.leitsatz {
  position: relative;
  font-family: var(--font-sub);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, .5vw + 1rem, 1.35rem);
  line-height: 1.55;
  color: var(--tinte);
  max-width: 40em;
  margin-bottom: var(--m6);
}
.fliess .leitsatz { margin-bottom: var(--m6); }
/* Ein Abschnitt, der nur mit dem Leitsatz beginnt, braucht weniger Luft
   nach oben, sonst klafft unter der Bühne ein Loch. */
.abschnitt:has(> .container-eng > .leitsatz:first-child) {
  padding-block: calc(var(--abschnitt-luft) * .55);
}

/* ============================================================
   S3  WEICHE UND THEMENWAHL
   Hover wie die Teamliste der Karriereseite: Rahmen grün, Schatten,
   leichtes Anheben. Die Füllung aus dem Punkt ist am 05.10.2026 entfallen.
   ============================================================ */

.weiche { gap: var(--m5); }
.weiche-karte {
  min-height: 132px;
  padding: var(--m6) var(--m8) var(--m6) var(--m6);
  border-radius: var(--bogen-karte);
}
.weiche-karte::before { display: none; }  /* Seitenbalken aus 7.1: Kleinkram */

/* Themenwahl: das eigene Thema als achte Kachel. Vorher stand es als
   eigener Abschnitt darunter, und das Raster hatte sieben Kacheln in vier
   Spalten mit einer Lücke rechts unten. */
.wahl-eigen {
  text-decoration: none;
  /* Tiefgrün, nicht Dunkelgrün: #E9F3D8 auf #4E7B08 ergab 4,39:1 und das
     Leuchtgrün 3,76:1 (gemessen 01.10.2026). */
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  border-radius: var(--bogen-karte);
  overflow: hidden;
  isolation: isolate;
}
.wahl-eigen:hover { border-color: var(--gruen-nacht); background: var(--gruen-nacht); box-shadow: var(--schatten-3); }
.wahl .wahl-plus {
  position: absolute;
  left: var(--m5); top: var(--m5);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 28px;
  text-align: center;
}
.wahl-eigen strong { color: #fff; }
.wahl-eigen span { color: #E9F3D8; }
.wahl-eigen .weiter { display: inline-flex; margin-top: var(--m3); color: var(--gruen-leuchte); font-size: .76rem; }

/* ============================================================
   S4  DUNKELGRÜNE BÄNDER
   Wie .vorteile der Karriereseite: das Originalbild bg-gruen.webp über
   #4E7B08, kein Verlauf ins Nachtgrün, kein Ring. Die Tönung von 12 %
   darüber hält Schrift am hellsten Punkt des Lichthofs über 4,5:1
   (gemessen 05.10.2026 an den Bildpunkten: Weiss 4,42 ohne, 4,97 mit,
   #F2F8E6 4,58, #ECF9D6 4,52).
   ============================================================ */

.zahlen,
.cta-band,
.abschnitt-tief {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(36, 57, 10, .12), rgba(36, 57, 10, .12)),
    url("../img/bg-gruen.webp") center / cover no-repeat,
    #4E7B08;
}
.zahlen::before,
.cta-band::before,
.abschnitt-tief::before,
.zahlen::after,
.cta-band::after,
.abschnitt-tief::after { content: none; }
.zahlen { padding: var(--abschnitt-luft) 0; }
.zahl strong { font-size: clamp(2.2rem, 3.4vw, 3.6rem); letter-spacing: -.02em; white-space: nowrap; }
.cta-band { padding: calc(var(--abschnitt-luft) * .9) 0; }
.cta-band h2 { font-size: var(--grad-h2); }

/* S6 (Bildstrecke) am 05.10.2026 entfernt: ersetzt durch das
   Bildkarussell aus dem Mockup (bauteile.css K4, main.js Baustein I). */

/* S7 (Bewegung an der Scrollposition: Parallax-Zoom bild-tiefe, drehender
   Bogen) am 05.10.2026 entfernt. Das Mockup kennt keinen Parallax-Zoom, und
   scale(1.12) schnitt jedem Bild ein Fünftel der Fläche weg. */


/* ============================================================
   S10  PRAXISANGABEN (01.10.2026, Antworten aus der Praxis)
   ============================================================ */

/* Zeitentafel: Rezeption und Behandlung nebeneinander, weil man genau
   das vergleicht. Der heutige Tag wird per Skript markiert. */
.zeiten-tafel {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-2);
  padding: var(--m4) var(--m6) var(--m6);
  max-width: 760px;
}
.zeiten-tafel table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.zeiten-tafel thead th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gruen-link);
  text-align: left;
  padding: var(--m3) var(--m3);
  border-bottom: 2px solid var(--linie-stark);
}
.zeiten-tafel tbody th,
.zeiten-tafel td {
  padding: 14px var(--m3);
  border-bottom: 1px solid var(--linie);
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
.zeiten-tafel tbody th { font-weight: 600; }
.zeiten-tafel tbody tr:last-child th,
.zeiten-tafel tbody tr:last-child td { border-bottom: 0; }
.zeiten-tafel tr.heute th,
.zeiten-tafel tr.heute td { background: var(--karte-hell); }
.zeiten-tafel tr.heute th::after {
  content: "heute";
  margin-left: 10px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gruen-tief);
  border-radius: var(--bogen-pille);
  padding: 3px 9px;
  vertical-align: 2px;
}
.zeiten-hinweis {
  margin-top: var(--m4);
  font-family: var(--font-sub);
  font-style: italic;
  color: var(--tinte);
}

/* Anfahrt: Linienkürzel wie an der Haltestelle */
.anfahrt { list-style: none; display: grid; gap: var(--m3); margin: var(--m5) 0; }
.anfahrt li { display: flex; gap: var(--m3); align-items: baseline; }
.anfahrt-linie {
  flex: none;
  min-width: 42px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .74rem;
  color: #fff;
  background: var(--gruen-tief);
  border-radius: var(--bogen-knopf);
  padding: 4px 6px;
}

/* Dauerwahl der Preise: reines CSS über :checked, läuft ohne Skript */
.preis-wahl {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--m8);
  align-items: center;
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-2);
  padding: var(--m10);
  margin-bottom: var(--m12);
}
.preis-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preis-knoepfe { display: flex; flex-wrap: wrap; gap: var(--m2); grid-column: 1; }
.preis-knoepfe label {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--gruen-link);
  border: 2px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
  padding: 10px 18px;
  transition: background var(--zeit-tipp) linear, color var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear;
}
.preis-knoepfe label:hover { border-color: var(--gruen-dunkel); }
#dauer-30:checked ~ .preis-knoepfe [for="dauer-30"],
#dauer-40:checked ~ .preis-knoepfe [for="dauer-40"],
#dauer-45:checked ~ .preis-knoepfe [for="dauer-45"],
#dauer-60:checked ~ .preis-knoepfe [for="dauer-60"] { background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff; }
#dauer-30:focus-visible ~ .preis-knoepfe [for="dauer-30"],
#dauer-40:focus-visible ~ .preis-knoepfe [for="dauer-40"],
#dauer-45:focus-visible ~ .preis-knoepfe [for="dauer-45"],
#dauer-60:focus-visible ~ .preis-knoepfe [for="dauer-60"] { outline: 3px solid var(--orange-aktion); outline-offset: 3px; }
.preis-anzeige { grid-column: 2; grid-row: 1 / span 2; text-align: center; }
.preis-wert { display: none; }
#dauer-30:checked ~ .preis-anzeige [data-dauer="30"],
#dauer-40:checked ~ .preis-anzeige [data-dauer="40"],
#dauer-45:checked ~ .preis-anzeige [data-dauer="45"],
#dauer-60:checked ~ .preis-anzeige [data-dauer="60"] { display: block; animation: buehne-steigt 420ms var(--kurve-aus); }
.preis-wert strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gruen-dunkel);
}
.preis-wert span { display: block; margin-top: var(--m2); font-family: var(--font-sub); font-style: italic; color: var(--tinte); }
.preis-gilt { grid-column: 1; font-size: .94rem; }
.preis-gilt p + p { margin-top: var(--m3); color: var(--tinte-leise); }
html:not(.js) .preis-wert { display: block; }

/* Angebotskarten unter der Tabelle */
.karten-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m5); margin-top: var(--m8); }
.karte-angebot {
  border-radius: var(--bogen-karte);
  background: var(--gruen-tief);
  color: #E9F3D8;
  padding: var(--m6) var(--m8);
}
.karte-angebot strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: #fff; }

@media (max-width: 760px) {
  .preis-wahl { grid-template-columns: 1fr; padding: var(--m6); }
  .preis-anzeige { grid-column: 1; grid-row: auto; }
  .preis-gilt { grid-column: 1; }
  .karten-paar { grid-template-columns: 1fr; }
  .zeiten-tafel { padding: var(--m3); }
  .zeiten-tafel tbody th, .zeiten-tafel td { padding: 12px 8px; font-size: .94rem; }
  .zeiten-tafel tr.heute th::after { display: block; width: max-content; margin: 4px 0 0; }
}

/* ============================================================
   S8  SCHMAL
   ============================================================ */

@media (max-width: 960px) {
  .seite-hero.buehne .seite-hero-grid { grid-template-columns: 1fr; gap: var(--m10); }
  .seite-hero.buehne .buehne-bild { order: -1; max-width: 560px; }
  /* 4:3 wie die Karriereseite am Handy: Personen bleiben ganz im Bild,
     und Pille, Überschrift und Knopf passen noch in die erste Ansicht. */
  .buehne-rahmen { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .seite-hero.buehne { padding-top: var(--m6); }
  .weiche-karte { min-height: 0; padding-right: var(--m10); }
}

/* ============================================================
   S9  BEWEGUNG REDUZIEREN
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .buehne-rahmen video { display: none; }
}

/* Nachträge 01.10.2026 */
.tafel-notiz { margin-top: var(--m3); font-size: .92rem; color: var(--tinte-leise); }
.aussage-zeitraum { margin-top: var(--m12); }
.termin-datum { font-family: var(--font-head); font-size: 1.15rem; color: var(--gruen-dunkel); margin: var(--m2) 0; }
.aussage-link { margin-top: var(--m3); }

/* Stimmen aus dem Team (.stimmen/.stimme) am 05.10.2026 entfernt:
   Zeitlos /team/ nutzt jetzt den Team-Umschalter (bauteile.css K2). */

/* ============================================================
   S11  ZWEITE RUNDE (01.10.2026, nach unabhängiger Prüfung)
   ============================================================ */

/* Umschalter als drei Fallkarten. Der Schieber aus style.css 7.2 mass die
   Knopfbreite vor dem Laden der Schrift: "…DNUNGSBEDARF" stand weiss auf
   Hellgrün, und mobil scrollten zwei von drei Reitern unsichtbar weg. */
.umschalter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--m4);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  width: 100%;
}
.umschalter .schieber { display: none; }
.umschalter button {
  white-space: normal;
  text-align: left;
  font-size: .86rem;
  line-height: 1.35;
  padding: var(--m5) var(--m6);
  min-height: 76px;
  background: #fff;
  border: 2px solid var(--linie-stark);
  border-radius: var(--bogen-karte);
  color: var(--gruen-link);
  transition: background var(--zeit-wechsel) linear, border-color var(--zeit-wechsel) linear, color var(--zeit-wechsel) linear, transform var(--zeit-wechsel) var(--kurve-aus);
}
.umschalter button:hover { border-color: var(--gruen-dunkel); transform: translateY(-2px); }
.umschalter button[aria-selected="true"],
html:not(.js) .umschalter button[aria-selected="true"] {
  background: var(--gruen-tief);
  border-color: var(--gruen-tief);
  color: #fff;
  box-shadow: var(--schatten-2);
}

/* Bühnen bis 05.10.2026 oben ausgerichtet, damit Brotkrume und Pille überall
   an derselben Stelle stehen (Prüfung: 161 bis 263 px). Gegenprüfung
   06.10.2026: Auf Seiten ohne Knöpfe blieben unter dem Text bis 227 px leer,
   die Bühne wirkte unfertig. Jetzt wie das Mockup und die Karriereseite
   (.hero-grid align-items: center): Text mittig zum Bild, auf allen Seiten
   nach derselben Regel. */
.seite-hero.buehne .seite-hero-grid { align-items: center; }
.seite-hero.buehne .buehne-text { padding-top: 0; }

/* Verzahnung: Ring raus, Karten bündig (12 px Versatz durch align-items) */
.verzahnung { grid-template-columns: 1fr 1fr; gap: var(--m6); align-items: stretch; }
.verzahnung-mitte { display: none; }

/* Serifen nur in Beizeilen, nicht in Kartentiteln */
.zusage h3, .fall-rand strong { font-family: var(--font-text); font-weight: 700; font-style: normal; }

@media (max-width: 960px) {
  .verzahnung { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Brotkrume mobil nur als Weg zurück zur Elternseite */
  .krume li { display: none; }
  .krume li:nth-last-child(2) { display: block; }
  .krume li:nth-last-child(2)::before { content: "‹ "; color: var(--gruen-link); margin: 0; }
  .krume li:only-child { display: none; }
}

/* Anfahrt: Kürzel links, Text als ein Block (mobil brach die Liste in drei
   schmale Spalten und lief 68 px über den Rand) */
.anfahrt li { display: block; position: relative; padding-left: 58px; }
.anfahrt-linie { position: absolute; left: 0; top: 1px; }

/* Vier Leistungskarten als 2 x 2 statt 3 + 1 mit leerer Restreihe */
.leistungen:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .leistungen:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* Hervorhebung im Fliesstext der Randkarte bleibt im Satz.
   .fall-rand strong (style.css 15b) setzte auch "28 Tage gültig" als Block,
   die nächste Zeile begann mit einem Punkt. */
.fall-rand p strong { display: inline; font-family: inherit; font-size: inherit; margin: 0; }

@media (max-width: 560px) {
  /* Zeiten mobil einzeilig */
  .zeiten-tafel table { font-size: .86rem; }
  .zeiten-tafel tbody th, .zeiten-tafel td { padding: 11px 5px; white-space: nowrap; }
  .zeiten-tafel thead th { padding: 8px 5px; font-size: .66rem; letter-spacing: .04em; }
  /* Preistabellen: Preisspalte bleibt im Bild */
  .preistabelle { font-size: .84rem; }
  .preistabelle th, .preistabelle td { padding: 9px 6px; }
  .preistabelle td:first-child { hyphens: auto; overflow-wrap: anywhere; }
  .preistabelle td:nth-last-child(2) { white-space: nowrap; }
}

/* 05.10.2026: Bei 360 px stand die Zeitentafel 26 px über ihre Karte.
   Gemessen: mit Bis-Strich, 12 px Rand, Zellschrift .86rem (13,8 px) und
   Kopf ohne Laufweite passt sie genau (Tabelle 286 px in 286 px). */
@media (max-width: 400px) {
  .zeiten-tafel { padding-inline: 12px; }
  .zeiten-tafel tbody th, .zeiten-tafel td { padding-inline: 4px; font-size: .86rem; }
  .zeiten-tafel thead th { letter-spacing: 0; }
}