/* ============================================================
   PHYSIOPARK — Gestaltungsschicht "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.

   Leitidee: der Bogen über dem Y im Logo. Das Brandkit nennt ihn den
   "dynamischen Schwung" (Beweglichkeit, Heilung, Fortschritt), der
   orangefarbene Punkt sorgt für den Blickfang. Daraus wird hier:
     S1  Bühne: gleich gesetzt auf JEDER Seite, Bild im Bogenrahmen,
         eine Linie wächst um den Rahmen und endet im Punkt
     S2  Abschnittsmarke: der grüne Strich wird zum kleinen Bogen mit Punkt
     S3  Wegkarten: beim Überfahren füllt sich die Karte aus dem Punkt heraus
     S4  Dunkelgrüne Bühnen (Brandkit: "kontraststarker Hintergrund für
         interaktive Web-Sections") mit grossen Bögen
     S5  Kino-Bühne für das selbst gehostete Werbevideo
     S6  Bildstrecke aus den Shootings
     S7  Bewegung an der Scrollposition (nur wo der Browser es kann)
     S8  Schmal
     S9  Bewegung reduzieren

   Bewusst NICHT: Laufband, Wellenkante, drehendes Siegel. Das sind die
   Zeichen anderer Agenturseiten (Regel: Redesigns dürfen sich nicht ähneln).

   Farben ausschliesslich über die Token aus style.css, Abschnitt 1.
   ============================================================ */

:root {
  --schwung-abstand: 18px;
  --schwung-strich: 2.5px;
  --rahmen-bogen: 46%;
  --abschnitt-luft: clamp(76px, 8.5vw, 128px);
  --grad-h1: clamp(2.1rem, 1.9vw + 1.35rem, 3.2rem);
  --grad-h2: clamp(1.9rem, 2.2vw + 1.05rem, 3rem);
}

/* 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; }
.headline { letter-spacing: -.005em; line-height: 1.06; }

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

.seite-hero.buehne {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 7vw, 104px);
  background:
    radial-gradient(ellipse 48% 62% at 6% 30%, rgba(145, 199, 61, .16), transparent 68%),
    radial-gradient(ellipse 34% 46% at 96% 92%, rgba(248, 130, 70, .10), transparent 66%),
    var(--papier-warm);
  overflow: hidden;
}
/* Der grosse Schwung im Hintergrund: ein einziger Kreisbogen, von dem nur
   das obere Stück im Bild liegt. */
.seite-hero.buehne::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150vw;
  aspect-ratio: 1;
  left: -30vw;
  top: 86%;
  border-radius: 50%;
  border: 1.5px solid rgba(145, 199, 61, .34);
  pointer-events: none;
}

.seite-hero.buehne .seite-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.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: obere linke Ecke = Bogen über dem Y */
.buehne-bild {
  position: relative;
  margin: var(--schwung-abstand);
}
.buehne-rahmen {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--rahmen-bogen) var(--bogen-gross) var(--bogen-gross) var(--bogen-gross);
  overflow: hidden;
  box-shadow: var(--schatten-3);
  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;
  border-radius: 0;
  box-shadow: none;
}
.buehne-rahmen video { opacity: 0; transition: opacity 900ms var(--kurve-aus); }
.buehne-rahmen video.laeuft { opacity: 1; }

/* Die Linie um den Rahmen: linker und oberer Rand eines Pseudo-Kastens,
   der den Rahmen um den Abstand übersteht. Gleicher Eckbogen wie der
   Rahmen, also läuft sie parallel. Rechts endet sie bei 84 % im Punkt,
   unten läuft sie weich aus. */
.schwung {
  position: absolute;
  inset: calc(var(--schwung-abstand) * -1);
  border: var(--schwung-strich) solid transparent;
  border-left-color: var(--gruen);
  border-top-color: var(--gruen);
  border-radius: var(--rahmen-bogen) 0 0 0;
  clip-path: inset(0 16% 0 0);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  pointer-events: none;
}
.schwung-punkt {
  position: absolute;
  top: calc(var(--schwung-abstand) * -1);
  left: calc(var(--schwung-abstand) * -1 + .84 * (100% + var(--schwung-abstand) * 2));
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(248, 130, 70, .16);
  pointer-events: none;
}

/* Kennzahl auf dem Bühnenbild */
.buehne-bild .hero-marke {
  right: auto;
  left: -34px;
  bottom: 30px;
  z-index: 2;
  border: 1px solid var(--linie);
}

/* Auftritt beim Laden: Text steigt, Rahmen deckt sich auf, Linie wächst,
   Punkt setzt. Ohne Bewegungswunsch steht alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  .buehne-text > * { animation: buehne-steigt 900ms var(--kurve-aus) both; }
  .buehne-text > :nth-child(2) { animation-delay: 80ms; }
  .buehne-text > :nth-child(3) { animation-delay: 160ms; }
  .buehne-text > :nth-child(4) { animation-delay: 240ms; }
  .buehne-text > :nth-child(5) { animation-delay: 320ms; }
  .buehne-rahmen { animation: buehne-deckt-auf 1100ms var(--kurve-aus) 120ms both; }
  .schwung { animation: schwung-waechst 1400ms var(--kurve-weich) 450ms both; }
  .schwung-punkt { animation: punkt-setzt 520ms cubic-bezier(.34, 1.56, .64, 1) 1850ms both; }
  .buehne-bild .hero-marke { animation: buehne-steigt 800ms var(--kurve-aus) 1300ms both; }
}
@keyframes buehne-steigt { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes buehne-deckt-auf {
  from { clip-path: inset(100% 0 0 0 round var(--rahmen-bogen) var(--bogen-gross) var(--bogen-gross) var(--bogen-gross)); }
  to   { clip-path: inset(0 0 0 0 round var(--rahmen-bogen) var(--bogen-gross) var(--bogen-gross) var(--bogen-gross)); }
}
/* Wächst von unten links den Bogen hinauf nach rechts */
@keyframes schwung-waechst {
  0%   { clip-path: inset(70% 100% 0 0); }
  45%  { clip-path: inset(0 70% 0 0); }
  100% { clip-path: inset(0 16% 0 0); }
}
@keyframes punkt-setzt { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }

/* ============================================================
   S2  ABSCHNITTSMARKE
   Bewusst NICHT umgestaltet: Ein Bogen mit Punkt über jeder Überschrift
   war Julian am 01.10.2026 "viel zu häufig". Der grüne Strich aus
   style.css bleibt. Der Bogen gehört nur an die Bühne.
   ============================================================ */

/* Leitsatz direkt unter der Bühne: der erste Satz trägt die Seite.
   Ersetzt das style-Attribut, das bis 01.10.2026 auf sechs Seiten stand. */
.leitsatz {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.32rem, 1.1vw + 1rem, 1.8rem);
  line-height: 1.38;
  letter-spacing: -.01em;
  color: var(--tinte);
  margin-bottom: var(--m8);
}
.fliess .leitsatz { margin-bottom: var(--m8); }

/* ============================================================
   S3  WEGKARTEN: Füllung aus dem Punkt
   ============================================================ */

.weiche { gap: var(--m5); counter-reset: weg; }
.weiche-karte {
  counter-increment: weg;
  isolation: isolate;
  min-height: 132px;
  padding: var(--m6) var(--m8) var(--m6) var(--m6);
  border-radius: var(--bogen-karte) var(--bogen-karte) var(--bogen-karte) 48px;
}
.weiche-karte::before { display: none; }  /* Seitenbalken aus 7.1 und Nummern entfallen: Kleinkram */
.weiche-karte::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 40px;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* Gleicher Grund wie .wahl-eigen: der Prüfer sieht Hover-Zustände nie */
  background: var(--gruen-tief);
  transform: translate(50%, -50%) scale(0);
  transition: transform 620ms var(--kurve-aus);
}
.weiche-karte:hover,
.weiche-karte:focus-visible { border-color: var(--gruen-tief); transform: translateY(-4px); box-shadow: var(--schatten-3); }
.weiche-karte:hover::after,
.weiche-karte:focus-visible::after { transform: translate(50%, -50%) scale(26); }
.weiche-karte strong,
.weiche-karte span span { transition: color var(--zeit-wechsel) linear; }
.weiche-karte:hover strong,
.weiche-karte:focus-visible strong { color: #fff; }
.weiche-karte:hover span span,
.weiche-karte:focus-visible span span { color: #E9F3D8; }
.weiche-karte:hover .symbol,
.weiche-karte:focus-visible .symbol { background: rgba(255, 255, 255, .16); color: var(--gruen-leuchte); }
.weiche-karte:hover .pfeil,
.weiche-karte:focus-visible .pfeil { color: #fff; }

/* 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) var(--bogen-karte) var(--bogen-karte) 48px;
  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ÜHNEN
   ============================================================ */

.zahlen,
.cta-band,
.abschnitt-tief {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Ein deckender Verlauf als Grund. Der Lichtschein liegt in ::before;
     als zweite Hintergrundschicht mit 'transparent' rechnete quelle/pruefen.js
     den Grund als Weiss (128 Scheinbefunde am 01.10.2026). */
  background: linear-gradient(160deg, #4E7B08 0%, #3B5E07 52%, #2A4406 100%);
}
.zahlen::before,
.cta-band::before,
.abschnitt-tief::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(145, 199, 61, .22), transparent 60%);
  pointer-events: none;
}
.zahlen::after,
.cta-band::after,
.abschnitt-tief::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 120vw;
  max-width: 1700px;
  aspect-ratio: 1;
  right: -46%;
  top: 30%;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 235, 130, .22);
  box-shadow: 0 0 0 70px rgba(200, 235, 130, .035);
  pointer-events: 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: clamp(2rem, 3vw + 1rem, 3.4rem); }

/* Bento: der grosse Eckbogen kehrt auf der grossen Karte wieder */
.bento { grid-auto-rows: clamp(230px, 22vw, 290px); }
.bento-karte.gross { border-radius: 120px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte); }

/* Zitatkarte: Bogen statt Rahmen */
.zitat-karte {
  border: 0;
  border-radius: 90px var(--bogen-gross) var(--bogen-gross) var(--bogen-gross);
  box-shadow: var(--schatten-3);
}
.zitat-karte::before {
  content: "";
  position: absolute;
  inset: -14px auto auto -14px;
  width: 120px; height: 120px;
  border: 2.5px solid var(--gruen);
  border-color: var(--gruen) transparent transparent var(--gruen);
  border-radius: 50%;
  transform: rotate(0deg);
  pointer-events: none;
}

/* ============================================================
   S5  KINO-BÜHNE: Werbevideo, selbst gehostet
   Nur ein Play-Knopf, kein Text, keine Minutenangabe (Agenturregel).
   ============================================================ */

.kino {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 120px var(--bogen-gross) var(--bogen-gross) var(--bogen-gross);
  overflow: hidden;
  background: var(--gruen-nacht);
  box-shadow: var(--schatten-3);
}
.kino img,
.kino video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kino::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(36, 57, 10, .05), rgba(36, 57, 10, .45));
  transition: opacity var(--zeit-wechsel) linear;
  pointer-events: none;
}
.kino.spielt::after { opacity: 0; }
.kino-knopf {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: clamp(84px, 9vw, 116px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--gruen-dunkel);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  transition: transform var(--zeit-wechsel) var(--kurve-aus), background var(--zeit-tipp) linear;
}
.kino-knopf svg { width: 34%; height: 34%; margin-left: 8%; }
.kino-knopf::before {
  /* Der Ring: ein Bogen mit Punkt, der beim Überfahren einmal umläuft */
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--gruen-leuchte);
  border-right-color: var(--gruen-leuchte);
  transition: transform 900ms var(--kurve-aus);
}
.kino-knopf:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.kino-knopf:hover::before { transform: rotate(180deg); }
.kino.spielt .kino-knopf,
.kino.spielt > img { display: none; }

.kino-abschnitt .split { align-items: center; }

/* ============================================================
   S6  BILDSTRECKE
   ============================================================ */

.bildstrecke {
  display: flex;
  gap: var(--m5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  --strecke-rand: max(var(--m6), calc((100vw - var(--breite-breit)) / 2 + var(--m6)));
  padding: 6px var(--strecke-rand) 22px;
  /* Ohne den Einrastabstand rastet das erste Bild am Fensterrand ein und
     die Strecke beginnt links ausserhalb der Inhaltskante (01.10.2026). */
  scroll-padding-inline: var(--strecke-rand);
  margin: 0;
  cursor: grab;
}
.bildstrecke::-webkit-scrollbar { display: none; }
.bildstrecke.zieht { cursor: grabbing; scroll-snap-type: none; }
.bildstrecke figure {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  position: relative;
}
.bildstrecke img {
  height: clamp(260px, 30vw, 420px);
  width: auto;
  max-width: none;
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-2);
  user-select: none;
  -webkit-user-drag: none;
}
.bildstrecke figure:nth-child(3n + 1) img { border-radius: 90px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte); }
.bildstrecke figcaption {
  margin-top: var(--m3);
  font-family: var(--font-sub);
  font-style: italic;
  font-size: .95rem;
  color: var(--tinte);
  max-width: 34ch;
}
.strecke-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--m8); margin-bottom: var(--m10); }
.strecke-kopf .abschnitt-kopf { margin-bottom: 0; }
html:not(.js) .strecke-kopf .slider-pfeile { display: none; }

/* ============================================================
   S7  BEWEGUNG AN DER SCROLLPOSITION
   Nur wo der Browser es nativ kann. Fällt es aus, fehlt nichts.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Nur Bilder in einem Rahmen, der beschneidet. Am 01.10.2026 ragte ein
       vergrössertes Bild aus .split-bild und machte sechs Seiten bei 768 px
       19 px zu breit. Mehrbild-Anordnungen (.split-versetzt) bleiben still. */
    .split-bild:has(> img:only-child) {
      overflow: hidden;
      border-radius: var(--bogen-gross);
      box-shadow: var(--schatten-2);
    }
    .split-bild > img:only-child { box-shadow: none; border-radius: 0; }
    .split-bild > img:only-child,
    .bento-karte img,
    .kino > img {
      animation: bild-tiefe linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .zahlen::after,
    .cta-band::after,
    .abschnitt-tief::after {
      animation: bogen-dreht linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes bild-tiefe { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.12) translateY(3%); } }
@keyframes bogen-dreht { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* ============================================================
   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: 6px;
  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-radius: 90px var(--bogen-gross) var(--bogen-gross) var(--bogen-gross);
  box-shadow: var(--schatten-3);
  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) var(--bogen-karte) var(--bogen-karte) 48px;
  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.4rem; color: #fff; text-transform: uppercase; }

@media (max-width: 760px) {
  .preis-wahl { grid-template-columns: 1fr; padding: var(--m6); border-radius: 56px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte); }
  .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; }
  .buehne-rahmen { aspect-ratio: 5 / 4; }
  :root { --schwung-abstand: 12px; --rahmen-bogen: 40%; }
  .buehne-bild .hero-marke { position: absolute; left: auto; right: -6px; bottom: -22px; margin: 0; max-width: 230px; padding: 12px 16px; }
  .buehne-bild .hero-marke strong { font-size: 1.5rem; }
  .bento-karte.gross { border-radius: 70px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte); }
  /* Feste Zeilenhöhe aus style.css liess lange Titel oben anstossen
     (390 px, 01.10.2026). Mindesthöhe statt fester Höhe. */
  .bento { grid-auto-rows: minmax(250px, auto); }
  .bento-inhalt { padding-top: var(--m16); }
  .strecke-kopf { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .seite-hero.buehne { padding-top: var(--m6); }
  .seite-hero.buehne::before { width: 260vw; left: -80vw; top: 40%; }
  .weiche-karte { min-height: 0; padding-right: var(--m10); }
  .kino { border-radius: 60px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte); }
  .zitat-karte { border-radius: 56px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte); }
}

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

@media (prefers-reduced-motion: reduce) {
  .weiche-karte::after { transition: none; }
  .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: nur Funktion, nie ein Name (Wunsch der Praxis
   wegen Abwerbung, 01.10.2026) */
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m6); }
.stimme {
  margin: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 70px var(--bogen-karte) var(--bogen-karte) var(--bogen-karte);
  box-shadow: var(--schatten-2);
  padding: var(--m10) var(--m8) var(--m8);
  display: flex;
  flex-direction: column;
  gap: var(--m5);
}
.stimme blockquote p { font-style: italic; font-size: 1.04rem; line-height: 1.6; color: var(--tinte); }
.stimme blockquote p::before { content: "„"; color: var(--gruen); font-weight: 800; }
.stimme blockquote p::after { content: "“"; color: var(--gruen); font-weight: 800; }
.stimme figcaption { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gruen-link); }
@media (max-width: 900px) { .stimmen { grid-template-columns: 1fr; } }

/* ============================================================
   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) var(--bogen-karte) var(--bogen-karte) 36px;
  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);
}

/* Bento: Foto oben frei, Abdunklung nur, wo Text steht. ACHTUNG: deckung()
   in quelle/pruefen.js bildet genau diese Stopps nach. Beide zusammen ändern. */
.bento-karte::after {
  background: linear-gradient(180deg, rgba(35, 52, 8, 0) 0%, rgba(35, 52, 8, .35) 30%, rgba(35, 52, 8, .84) 58%, rgba(35, 52, 8, .94) 100%);
}
/* Bildausschnitt je Kachel: Köpfe und Hände im Bild, nicht Hinterkopf oder Rumpf */
.bento-karte[href="/aerzte/"] img { object-position: center 64%; }
.bento-karte[href="/fortbildungen/"] img { object-position: center 6%; }
.bento-karte[href="/pflegeeinrichtungen/verordnungsmanagement/"] img { object-position: center 30%; }

/* Bühnen oben ausrichten: Brotkrume und Pille stehen auf jeder Seite an
   derselben Stelle, egal wie lang die Überschrift ist (Prüfung: 161 bis 263 px) */
.seite-hero.buehne .seite-hero-grid { align-items: start; }
.seite-hero.buehne .buehne-text { padding-top: var(--m6); }

/* 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) {
  /* Zahlenschild deckte mobil das Bühnenfoto ab; die Zahl steht im Zahlenband */
  .buehne-bild .hero-marke { display: none; }
  .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; }
  /* Der grosse Hintergrundbogen lief mobil durch die Textzeilen */
  .seite-hero.buehne::before { 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; } }

/* Abschnittskopf zweispaltig, sobald es einen Einleitungstext gibt:
   links Überschrift, rechts Text. Vorher blieb die rechte Hälfte leer. */
@media (min-width: 961px) {
  .abschnitt-kopf:has(> h2 + p):not(.strecke-kopf .abschnitt-kopf) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: var(--m16);
    align-items: end;
  }
  .abschnitt-kopf:has(> h2 + p):not(.strecke-kopf .abschnitt-kopf) > .sub-strich { grid-column: 1; grid-row: 1; }
  .abschnitt-kopf:has(> h2 + p):not(.strecke-kopf .abschnitt-kopf) > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .abschnitt-kopf:has(> h2 + p):not(.strecke-kopf .abschnitt-kopf) > p { grid-column: 2; grid-row: 2; margin: 0; padding-bottom: 6px; }
  .abschnitt-kopf:has(> h2 + p):not(.strecke-kopf .abschnitt-kopf) > p + p { grid-row: 3; margin-top: var(--m3); }
}

/* 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; }
}