/* ==========================================================================
   Webseite 01 · Physiotherapie Theresa Tschiderer, Innsbruck (Demo)
   Gemeinsame Gestaltung für alle Seiten der Webseite.

   Grundlinie: designvorlagen/landingpages/UEBERARBEITUNG.md, Abschnitt 2
   (gemessen nach MESSUNGEN.md, Klasse D): Weiß und ein kühles Hellgrau, eine
   Grotesk (Mona Sans), genau eine Akzentfarbe, Ecken 20 und 32 px, Knöpfe rund,
   ein klebender Abschnitt je Seite.

   Bewegung: <html data-bewegung="starr|mittel|dynamisch">, ?bewegung= in der
   Adresse überschreibt (siehe Kopf jeder Seite). „Bewegung reduzieren" am Gerät
   gewinnt immer.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Farbe ---------- */
  /* Grundlage ist das „moderne System" Microsoft Loop (loop.cloud.microsoft/learn, gemessen
     25.09.2026, siehe designvorlagen/designmuster/MESSUNGEN.md). Die Akzentfarbe kommt aus dem
     Logo der Praxis, der Schimmer ist nur Flieder: ruhiger, passend zu einer Praxis. */
  --weiss: #ffffff;
  --grau: #f2f2f8;               /* abgesetzte Abschnitte: Loop #ededf5 zu 72 % auf Weiß */
  --linie: #e0e0e0;
  --text: #242424;
  --text-auf-flaeche: #3a3a3a;   /* kleine Schrift auf den Pastellverläufen, mind. 5,4 : 1 */
  --leise: #616161;              /* 6,2 : 1 auf Weiß, 5,6 : 1 auf Grau */
  --still: #707070;              /* nur für große Schrift, 4,4 : 1 auf Grau */
  --akzent: #6443a0;             /* Violett aus dem Logo, die eine Akzentfarbe: 7,6 : 1 auf Weiß, 6,9 : 1 auf Grau */
  --akzent-tief: #4b3280;        /* Links auf hellen Flächen, Knopf beim Überfahren: 10,2 : 1 auf Weiß */
  --akzent-hell: #f1edf8;        /* Grund für Gewähltes, Akzent-tief darauf 8,8 : 1 */
  --dunkel: #0e1024;             /* der eine Dunkelton: Nachtblau für Terminleiste und Fuß */
  --dunkel-leise: #b9b8d6;       /* 9,8 : 1 auf Nachtblau */

  /* ---------- Flächen und Schatten (Loop) ---------- */
  --verlauf-hell: linear-gradient(160deg, #f4f1fa 0%, #e6dff3 100%);      /* heller Flieder, nur für leere Bildrahmen */
  --schein-kopf:                                                            /* weiches Licht oben hinter der ganzen Seite */
    radial-gradient(42% 24rem at 6% 26rem, rgb(222 213 243 / .55), transparent 72%),
    radial-gradient(48% 26rem at 94% 4rem, rgb(214 204 238 / .60), transparent 72%);
  --schatten: 0 0 2px rgb(0 0 0 / .08), 0 8px 16px rgb(0 0 0 / .12);
  --schatten-hoch: 0 0 8px rgb(0 0 0 / .10), 0 14px 28px rgb(0 0 0 / .14);
  --schatten-flach: 0 0 2px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .10);

  /* ---------- Schrift ---------- */
  --schrift: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gewicht-titel: 600;

  /* ---------- Maße ---------- */
  --breite: 78.75rem;            /* 1260 px Inhaltsbreite */
  --rand: clamp(1rem, 4.5vw, 3rem);
  --abschnitt: clamp(4.5rem, 2.5rem + 6vw, 8rem);   /* 72 px Handy, 128 px Computer (gestrafft nach Prüfer) */
  --kopf: 4rem;
  --ecke: 20px;                  /* Karten, Kacheln */
  --ecke-gross: 32px;            /* große Bilder */
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 1rem); }
body {
  margin: 0;
  background: var(--schein-kopf), var(--weiss);   /* läuft vollständig aus, auch hinter der Kopfzeile */
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.5;
  font-kerning: normal;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
strong { font-weight: 600; }

h1, h2, h3 { font-weight: var(--gewicht-titel); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.375rem); line-height: 1.07; letter-spacing: -.006em; }
h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.875rem); line-height: 1.15; }

.behaelter { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); }
/* Graue Abschnitte gehen weich in Weiß über statt mit einer Kante: Die Farben fließen. */
.grau { background: linear-gradient(to bottom, transparent, var(--grau) 7rem, var(--grau) calc(100% - 7rem), transparent); }
/* Vor der dunklen Terminleiste bleibt das Grau bis zur Kante: Grau zu Nachtblau als Verlauf wirkt schmutzig. */
.grau:has(+ .dunkel) { background: linear-gradient(to bottom, transparent, var(--grau) 7rem); }
/* Absätze ausgewogen umbrechen: kein einzelnes Wort allein in der letzten Zeile */
.lead, .held-satz { text-wrap: pretty; }
.lead { margin-top: 1.25rem; max-width: 38em; font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); color: var(--leise); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink {
  position: absolute; left: var(--rand); top: -4rem; z-index: 30;
  background: var(--text); color: var(--weiss); padding: .75rem 1.1rem; border-radius: 999px; text-decoration: none;
}
.sprunglink:focus { top: .75rem; }

/* ---------- Knöpfe und Pfeil-Links ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  border-radius: 999px; border: 1.5px solid var(--akzent);
  background: var(--akzent); color: var(--weiss);
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.knopf-hell { background: var(--weiss); border-color: var(--weiss); color: var(--dunkel); }
.knopf-hell:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }
.knopf-klein { min-height: 2.5rem; padding: .55rem 1.1rem; font-size: 1rem; }

.pfeil-link {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--akzent); font-weight: 600; text-decoration: none;
}
.pfeil-link::after { content: "→"; transition: transform .3s var(--ease); }
.pfeil-link:hover { text-decoration: underline; }
.pfeil-link:hover::after { transform: translateX(.2em); }

/* ---------- Kopfzeile: bleibt oben, Milchglas mit festem Grund als Ausweichlösung ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgb(255 255 255 / .94);
  border-bottom: 1px solid rgb(0 0 0 / .07);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf {
    background: rgb(255 255 255 / .74);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.kopf-innen { display: flex; align-items: center; gap: 1.5rem; min-height: var(--kopf); }
.marke { display: grid; line-height: 1.1; text-decoration: none; margin-right: auto; }
.marke-logo { display: block; width: auto; height: 2.875rem; }   /* Logo der Praxis, 46 px hoch */
@media (max-width: 30rem) { .marke-logo { height: 2.375rem; } }
/* Marke als Text, falls eine Praxis kein Logo hat */
.marke-name { font-weight: 650; font-size: 1.125rem; letter-spacing: -.01em; }
.marke-zusatz { font-size: .8125rem; color: var(--leise); letter-spacing: .01em; }
.kopf-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.kopf-nav a { font-size: 1rem; text-decoration: none; color: var(--text); }
.kopf-nav a:hover, .kopf-nav a[aria-current] { color: var(--akzent); }
.kopf-nav a[aria-current] { font-weight: 600; }
.menue-knopf {
  display: none; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem 1rem; border: 1.5px solid var(--akzent); border-radius: 999px;
  background: var(--weiss); color: var(--akzent-tief); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}

@media (max-width: 63.99rem) {
  .kopf-innen { flex-wrap: wrap; padding-block: .6rem; }
  .kopf-termin { display: none; }
  /* Ohne JavaScript stehen die Links unter der Marke. Mit JavaScript klappt ein Knopf sie auf. */
  .kopf-nav { flex-basis: 100%; }
  .kopf-nav ul { gap: .5rem 1.25rem; padding-bottom: .25rem; }
  .js .menue-knopf { display: inline-flex; }
  .js .kopf-nav { display: none; }
  .js .kopf[data-offen] .kopf-nav { display: block; padding-block: .75rem 1.25rem; }
  .js .kopf[data-offen] .kopf-nav ul { flex-direction: column; gap: 0; }
  .js .kopf[data-offen] .kopf-nav a { display: block; padding: .8rem 0; font-size: 1.25rem; border-bottom: 1px solid var(--linie); }
}

/* ---------- Erster Bildschirm ----------
   Der eine Regelbruch der Startseite: das Bild hängt über die Abschnittsgrenze
   in den grauen Abschnitt darunter. Links und rechts bleibt es in der Inhaltsbreite. */
.held { padding-top: clamp(2.5rem, 1rem + 5vw, 5.5rem); position: relative; z-index: 1; }
.held-raster { display: grid; gap: 2.5rem; align-items: center; }
.dachzeile { font-size: 1rem; font-weight: 600; color: var(--akzent); margin-bottom: 1.25rem; }
.held-satz { margin-top: 1.5rem; max-width: 30em; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); color: var(--leise); }
.held-aktion { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.tel-link { color: var(--text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tel-link span { color: var(--akzent); font-weight: 600; }
.tel-link:hover span { text-decoration: underline; }
.held-bild { border-radius: var(--ecke-gross); overflow: hidden; background: var(--grau); aspect-ratio: 5 / 4; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; }
.nach-held { padding-top: var(--abschnitt); }
/* Breit: Das Bild wächst mit der Höhe des Textes und hängt immer genau 7rem über die Grenze.
   Der Text hält unten Abstand, damit kein Knopf auf der Kante zum grauen Abschnitt sitzt.
   Flacher als sein eigenes Format wird das Bild dabei nie. */
@media (min-width: 60rem) {
  .held-raster { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(3rem, 5vw, 5.5rem); }
  .held-text { padding-bottom: clamp(2.5rem, 1rem + 3vw, 4rem); }
  .held .held-bild { align-self: stretch; aspect-ratio: auto; margin-bottom: -7rem; }   /* auch gegen das Format eines Bildrahmens */
  .nach-held { padding-top: calc(var(--abschnitt) + 7rem); }
}
@media (max-width: 59.99rem) {
  .held { padding-bottom: 3rem; }
}

/* ---------- Wo tut es weh? (Auswahl nach Körperstelle) ---------- */
.auswahl { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 2rem; }
.auswahl-liste { display: none; }
.js .auswahl-liste { display: flex; }
.auswahl-tab {
  font: inherit; font-weight: var(--gewicht-titel); cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--still); text-align: left;
}
.auswahl-tab:hover { color: var(--text); }
.auswahl-tab[aria-selected="true"] {
  color: var(--text);
  text-decoration: underline; text-decoration-color: var(--akzent);
  text-decoration-thickness: .08em; text-underline-offset: .18em;
}
.auswahl-panel {
  background: var(--weiss); border-radius: var(--ecke); box-shadow: var(--schatten);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  display: grid; align-content: center; gap: 1rem;
}
.js .auswahl-panel[hidden] { display: none; }
.auswahl-panel h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
/* Mit JavaScript nennt der gewählte Reiter die Stelle schon, die Tafel ist über aria-labelledby
   mit ihm verbunden. Die Überschrift braucht es nur ohne JavaScript, wenn alle Stellen untereinander stehen. */
.js .auswahl-panel h3 { display: none; }
.auswahl-panel .typisch { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); max-width: 34em; }
.auswahl-panel .passend { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); font-size: 1rem; color: var(--leise); }
.auswahl-panel .pfeil-link { font-size: 1.25rem; }
.auswahl-zusatz { margin-top: 2rem; color: var(--leise); }
.auswahl-zusatz a { color: var(--akzent); font-weight: 600; }
@media (min-width: 60rem) {
  .auswahl { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(2.5rem, 5vw, 5rem); }
  .js .auswahl-liste { flex-direction: column; gap: .35rem; }
  .auswahl-tab { font-size: clamp(2.5rem, 1.6rem + 2vw, 3.5rem); line-height: 1.12; letter-spacing: -.01em; }
  .auswahl-panel { min-height: 21rem; }
}
/* Schmal: Die Stellen brechen in eine zweite Zeile um. Keine waagrecht rollende Leiste,
   die am Bildrand abgeschnitten aussieht. */
@media (max-width: 59.99rem) {
  .js .auswahl-liste { flex-wrap: wrap; gap: .5rem; }
  .auswahl-tab {
    flex: none;
    font-size: 1.0625rem; min-height: 2.75rem; padding: .55rem 1.1rem;
    border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--text);
  }
  .auswahl-tab[aria-selected="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); text-decoration: none; }
}

/* ---------- Behandlungen als Kachelraster: eine große, zwei kleine, eine breite ---------- */
.bento { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 1rem; }
.kachel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; min-height: 18rem;
  border-radius: var(--ecke);
  background: var(--dunkel);     /* lädt ein Foto nicht, bleibt die weiße Schrift lesbar */
  color: var(--weiss); text-decoration: none;
}
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Verlauf unter der Schrift, damit sie auf jedem Foto lesbar bleibt (mind. 4,5 : 1) */
.kachel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(14 16 36 / .80) 0%, rgb(14 16 36 / .40) 45%, rgb(14 16 36 / 0) 70%);
}
.kachel-text { display: grid; gap: .5rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); max-width: 34em; }
.kachel-titel { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); font-weight: var(--gewicht-titel); line-height: 1.1; }
.kachel-titel::after { content: "→"; display: inline-block; margin-left: .3em; transition: transform .3s var(--ease); }
.kachel:hover .kachel-titel::after { transform: translateX(.15em); }
.kachel-satz { font-size: 1.0625rem; color: rgb(255 255 255 / .9); }
.kachel:focus-visible { outline-offset: 4px; }
/* Kachel ohne Foto: hellgrau wie die übrigen Kästen, dunkle Schrift, Pfeil in der Akzentfarbe */
.kachel-hell { background: var(--grau); color: var(--text); }
.kachel-hell::before { display: none; }
.kachel-hell .kachel-satz { color: var(--leise); }
.kachel-hell .kachel-titel::after { color: var(--akzent); }
.kachel-punkte { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 clamp(1.25rem, 1rem + 1.2vw, 2rem) clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.kachel-punkte span { padding: .5rem 1rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 1rem; color: var(--text); }
.kachel-breit { flex-wrap: wrap; align-content: flex-end; }
.kachel-breit .kachel-text { flex: 1 1 26rem; }
.alle-link { margin-top: 2rem; }
@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel-gross, .kachel-breit { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(16rem, auto) minmax(16rem, auto) auto; }
  .kachel { grid-column: span 5; }
  .kachel-gross { grid-column: span 7; grid-row: span 2; min-height: 34rem; }
  .kachel-breit { grid-column: 1 / -1; min-height: 11rem; align-items: flex-end; }
  .kachel-breit .kachel-text { max-width: 40em; }
  .kachel-breit .kachel-punkte { justify-content: flex-end; flex: 0 1 auto; margin-left: auto; }
}

/* ---------- Klebender Abschnitt: das Bild bleibt stehen, die Schritte laufen ---------- */
.weg-raster { display: grid; gap: 2.5rem; }
.weg-bild { border-radius: var(--ecke-gross); overflow: hidden; aspect-ratio: 4 / 5; background: var(--linie); }
.weg-bild img { width: 100%; height: 100%; object-fit: cover; }
.weg-bildtext { font-size: 1rem; color: var(--leise); padding-top: .9rem; max-width: 30em; }
/* Schritte ohne durchgehenden Strich: nur der kurze violette Strich je Schritt.
   Er zeichnet sich beim ersten Erscheinen einmal von oben nach unten (siehe Bewegung). */
.weg-schritte { margin-top: 2.5rem; }
.weg-schritte li { position: relative; padding: 0 0 2.75rem 2rem; }
.weg-schritte li:last-child { padding-bottom: 0; }
.weg-schritte li::before {
  content: ""; position: absolute; left: 0; top: .3rem; width: 3px; height: 2.1rem; border-radius: 3px; background: var(--akzent);
}
.weg-schritte h3 { margin-bottom: .6rem; }
.weg-schritte p { max-width: 32em; color: var(--leise); }
.weg-schritte-kurz { margin-top: 0; }
@media (min-width: 60rem) {
  .weg-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .weg-bild-spalte { position: sticky; top: calc(var(--kopf) + 2rem); }
  .weg-bild { max-height: calc(100vh - var(--kopf) - 4rem); }
  .weg-schritte li { min-height: 18vh; padding-bottom: 2.5rem; }   /* gestrafft: die Schritte stehen näher beisammen */
  .weg-schritte-kurz li { min-height: 0; padding-bottom: 2.5rem; }
}
/* Schmal: Hochformat behalten (Menschen im Bild, Köpfe oben), aber nicht bildschirmbreit */
@media (max-width: 59.99rem) {
  .weg-bild-spalte { width: min(100%, 26rem); }
}

/* ---------- Beispielrechnung ---------- */
.rechnung { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 1rem; }
.posten { background: var(--grau); border-radius: var(--ecke); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); display: grid; gap: .5rem; align-content: center; }
.betrag { font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.5rem); font-weight: var(--gewicht-titel); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.posten p:last-child { color: var(--leise); }
.posten-summe { background: var(--grau); }
.posten-summe .betrag { color: var(--akzent); }
.posten-summe p:last-child { color: var(--akzent-tief); }   /* 9,1 : 1 auf Grau */
.rechnung-hinweis { margin-top: 1.5rem; max-width: 44em; color: var(--leise); font-size: 1rem; }
.rechnung-hinweis a { color: var(--akzent); font-weight: 600; white-space: nowrap; }
@media (min-width: 48rem) {
  .rechnung { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posten { min-height: 11rem; }
}

/* ---------- Über mich ---------- */
.ueber-raster { display: grid; gap: 2.5rem; align-items: center; }
.ueber-bild { border-radius: var(--ecke-gross); overflow: hidden; aspect-ratio: 4 / 5; background: var(--grau); }
.ueber-bild img { width: 100%; height: 100%; object-fit: cover; }
.fakten { margin-top: 2rem; display: grid; gap: 1.25rem 2rem; }
.fakten li { display: grid; gap: .15rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.fakten strong { font-size: 1.125rem; }
.fakten span { color: var(--leise); font-size: 1rem; }
.ueber-text .pfeil-link { margin-top: 2rem; }
@media (min-width: 48rem) { .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ueber-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); } }
/* Schmal: das Porträt im Hochformat nicht bildschirmbreit, sonst wird es fast 1000 px hoch */
@media (max-width: 59.99rem) { .ueber-raster > .bild-platzhalter, .ueber-raster > .ueber-bild { width: min(100%, 26rem); } }

/* ---------- Bildrahmen für Fotos, die im Kundenprojekt kommen ---------- */
.bild-platzhalter {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: var(--format, 4 / 5);
  border-radius: var(--ecke-gross); overflow: hidden;
  background:
    var(--verlauf-hell);
}
.bild-platzhalter figcaption {
  margin: 1rem; padding: .6rem .8rem; max-width: calc(100% - 2rem);
  background: rgb(255 255 255 / .92); border-radius: 12px; font-size: 1rem; line-height: 1.35; color: var(--text);
}

/* ---------- Häufige Fragen: schmale Spalte, aber an derselben linken Kante wie alles andere ---------- */
.fragen-liste { margin-top: 2.5rem; max-width: 52rem; }
.fragen-liste details { border-bottom: 1px solid var(--linie); }
.fragen-liste summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); font-weight: 600;
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--grau);
  font-size: 1.375rem; font-weight: 400; color: var(--akzent); transition: transform .3s var(--ease);
}
.fragen-liste details[open] summary::after { transform: rotate(45deg); }
.fragen-liste details p { padding-bottom: 1.5rem; max-width: 40em; color: var(--leise); }

/* ---------- Termin (dunkel) und Fuß ---------- */
.dunkel { background: var(--dunkel); color: var(--weiss); }
.termin-raster { display: grid; gap: 2rem 4rem; align-items: start; }
.termin-raster > div > p { margin-top: 1.25rem; max-width: 30em; color: var(--dunkel-leise); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); }
.termin-wege { display: grid; gap: 1rem; justify-items: start; }
.tel-gross { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: var(--gewicht-titel); letter-spacing: -.01em; text-decoration: none; }
.tel-gross:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.termin-zeiten { color: var(--dunkel-leise); }
.dunkel :focus-visible { outline-color: var(--weiss); }
@media (min-width: 60rem) { .termin-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.fuss { background: var(--dunkel); color: var(--dunkel-leise); font-size: 1rem; }
.fuss a { color: var(--weiss); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; gap: 2.5rem; padding-block: 3.5rem 2.5rem; border-top: 1px solid rgb(255 255 255 / .14); }
.fuss-marke { color: var(--weiss); font-weight: 650; font-size: 1.125rem; }
.fuss h2 { font-size: 1rem; font-weight: 600; color: var(--weiss); margin-bottom: .75rem; letter-spacing: 0; }
.fuss li + li { margin-top: .4rem; }
.fuss address { font-style: normal; margin-top: .5rem; line-height: 1.6; }
.fuss-demo { padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / .14); }
.fuss-zeile { width: 100%; max-width: none; text-align: center; padding: 1.25rem 1rem 1.5rem; font-size: .9375rem; color: var(--dunkel-leise); }
@media (min-width: 48rem) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fuss-raster { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); } }

/* ---------- Unterseiten ---------- */
.brotkrumen { padding-top: 1.5rem; font-size: 1rem; color: var(--leise); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.brotkrumen li + li::before { content: "›"; margin-right: .5rem; color: var(--still); }
.brotkrumen a { color: var(--leise); }
.brotkrumen [aria-current] { color: var(--text); }
.seiten-held { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (max-width: 59.99rem) {
  .seiten-held .held-bild { aspect-ratio: 3 / 2; }   /* breit richtet sich das Bild nach dem Text, siehe „Erster Bildschirm" */
}

.chips { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.chips li { padding: .65rem 1.2rem; border-radius: 999px; background: var(--weiss); font-size: 1.0625rem; box-shadow: var(--schatten-flach); }

/* Ablauf in drei Schritten; die Linie zeichnet sich, sobald sie ins Bild kommt */
.ablauf { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 2rem; position: relative; }
.ablauf li { position: relative; padding-top: 1.75rem; }
.ablauf li::before {
  content: ""; position: absolute; top: 0; left: 0; width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--weiss); border: 3px solid var(--akzent);
}
.ablauf h3 { margin-bottom: .6rem; }
.ablauf p { color: var(--leise); max-width: 26em; }
.ablauf-dauer { display: block; margin-top: .75rem; font-size: 1rem; font-weight: 600; color: var(--akzent); }
@media (min-width: 60rem) {
  .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .ablauf::before {
    content: ""; position: absolute; top: .3rem; left: .5rem; right: 0; height: 3px; background: var(--akzent-hell);
    transform-origin: left center;
  }
}
/* Schmal: dieselbe Zeitleiste senkrecht. Der Kreis steht links neben der Überschrift, ein
   hellvioletter Strich verbindet ihn mit dem nächsten Kreis (statt Kreise, die allein schweben). */
@media (max-width: 59.99rem) {
  .ablauf { gap: 2.25rem; }
  .ablauf li { padding-top: 0; padding-left: 2.25rem; }
  .ablauf li::before { top: .5rem; }
  .ablauf li:not(:last-child)::after {
    content: ""; position: absolute; left: calc(.375rem - 1.5px); top: 1.25rem; bottom: -2.75rem;
    width: 3px; border-radius: 3px; background: var(--akzent-hell); transform-origin: top center;
  }
}

.selbst { display: grid; gap: 2rem; }
.selbst-liste { display: grid; gap: 1rem; }
.selbst-liste li { background: var(--weiss); border-radius: var(--ecke); padding: 1.5rem 1.75rem; box-shadow: var(--schatten); }
.selbst-liste strong { display: block; font-size: 1.1875rem; margin-bottom: .35rem; }
.selbst-liste span { color: var(--leise); }
@media (min-width: 60rem) {
  .selbst { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .selbst-kopf { position: sticky; top: calc(var(--kopf) + 2rem); }
}

.warnung { margin-top: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--ecke); background: var(--weiss); border: 1.5px solid var(--text); }
.warnung strong { display: block; margin-bottom: .35rem; }

.eckdaten { margin-top: 2.5rem; display: grid; gap: 1rem; }
.eckdaten div { display: grid; align-content: center; padding: 1.5rem 1.75rem; border-radius: var(--ecke); background: var(--weiss); box-shadow: var(--schatten-flach); }
.eckdaten-grau div { box-shadow: none; }
.eckdaten-grau div { background: var(--grau); }
.eckdaten dt { color: var(--leise); font-size: 1rem; }
.eckdaten dd { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: var(--gewicht-titel); line-height: 1.15; margin-top: .35rem; }
@media (min-width: 48rem) { .eckdaten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.weitere { margin-top: 2.5rem; display: grid; gap: 1rem; }
.weitere a {
  display: grid; gap: .35rem; padding: 1.5rem 1.75rem; border-radius: var(--ecke);
  background: var(--weiss); box-shadow: var(--schatten); text-decoration: none;
  transition: box-shadow .3s var(--ease);
}
.weitere a:hover { box-shadow: var(--schatten-hoch); }
.weitere strong { font-size: 1.25rem; }
.weitere strong::after { content: "\00a0→"; color: var(--akzent); }   /* geschütztes Leerzeichen: der Pfeil bleibt beim letzten Wort */
.weitere span { color: var(--leise); font-size: 1rem; }
/* Drei Karten nebeneinander erst breit; darunter eine Karte je Zeile, sonst wird der Text zu eng */
@media (min-width: 60rem) { .weitere { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Seitenkopf ohne Bild (Übersichten, Kontakt, Rechtliches) ---------- */
.seiten-kopf { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); padding-bottom: 1rem; }
.seiten-kopf .held-satz { max-width: 36em; }
.abschnitt-knapp { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-bottom: var(--abschnitt); }

/* Erster Bildschirm mit Feld statt Foto (Neurologie, Knie): zeigt die drei Schwerpunkte.
   Weiß mit weichem Schatten wie die übrigen Karten, Inhalt mittig. Der Schatten hält die Form
   sichtbar, wo das Feld in den grauen Abschnitt darunter hängt. */
.held-feld { background: var(--weiss); box-shadow: var(--schatten); color: var(--text); display: grid; align-content: center; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.seiten-held .held-feld { aspect-ratio: auto; min-height: 22rem; }
.held-feld ul { display: grid; gap: 1.25rem; }
.held-feld li { display: grid; gap: .2rem; }
.held-feld li + li { padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.held-feld strong { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: var(--gewicht-titel); line-height: 1.1; }
.held-feld span { color: var(--leise); font-size: 1rem; }

/* ---------- Hinweiskasten (Hausbesuche, Zusatzversicherung, Gerüst) ---------- */
.hinweis-kasten { margin-top: 2.5rem; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); border-radius: var(--ecke); background: var(--grau); max-width: 52rem; }
.grau :is(.hinweis-kasten, .posten, .kachel-hell) { background: var(--weiss); box-shadow: var(--schatten); }
.hinweis-kasten strong { display: block; font-size: 1.25rem; margin-bottom: .4rem; color: var(--akzent-tief); }
.hinweis-kasten p { color: var(--text); }
.hinweis-kasten a { color: var(--akzent-tief); font-weight: 600; }

/* ---------- Preise ---------- */
.preisliste { margin-top: 2.5rem; display: grid; gap: 1rem; }
.preisliste div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.4rem 1.75rem; border-radius: var(--ecke); background: var(--weiss); }
.preisliste dt { max-width: 22em; }
.preisliste dt span { display: block; color: var(--leise); font-size: 1rem; }
.preisliste dd { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: var(--gewicht-titel); white-space: nowrap; }
.preis-hinweis { margin-top: 1.25rem; color: var(--leise); font-size: 1rem; }
@media (min-width: 60rem) { .preisliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Werdegang ---------- */
/* Zeitleiste wie „Ihr Weg zur Therapie": je Station ein kurzer violetter Strich, kein durchgehender */
.werdegang { margin-top: 2.5rem; max-width: 46rem; }
.werdegang li { position: relative; padding: 0 0 2.25rem 2rem; }
.werdegang li:last-child { padding-bottom: 0; }
.werdegang li::before { content: ""; position: absolute; left: 0; top: .25rem; width: 3px; height: 1.9rem; border-radius: 3px; background: var(--akzent); }
.werdegang .jahr { display: block; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: var(--gewicht-titel); color: var(--akzent); line-height: 1.2; }
.werdegang p { margin-top: .35rem; color: var(--leise); }

/* ---------- Grundsätze: eine große, zwei kleine Kacheln ---------- */
.grundsaetze { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 1rem; }
.grundsaetze li { border-radius: var(--ecke); background: var(--grau); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); display: grid; align-content: center; gap: .6rem; min-height: 14rem; }
.grundsaetze strong { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); font-weight: var(--gewicht-titel); line-height: 1.1; }
.grundsaetze span { color: var(--leise); max-width: 30em; }
@media (min-width: 60rem) {
  .grundsaetze { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grundsaetze li:first-child { grid-column: span 7; grid-row: span 2; min-height: 30rem; }
  .grundsaetze li { grid-column: span 5; }
}

/* ---------- Praxis (Bild und Text) ---------- */
.praxis-raster { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .praxis-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- Kontakt und Anfrage ---------- */
.kontakt-raster { display: grid; gap: 2.5rem; align-items: start; }
.anfrage { background: var(--grau); border-radius: var(--ecke); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); scroll-margin-top: calc(var(--kopf) + 1rem); }
.anfrage h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.anfrage-hinweis { margin-top: .75rem; color: var(--leise); max-width: 32em; }
.formular { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
.feld { display: grid; gap: .45rem; }
.feld label { font-weight: 600; font-size: 1rem; }
.feld input, .feld select {
  font: inherit; font-size: 1.0625rem; color: var(--text);
  min-height: 3rem; padding: .7rem .9rem; border-radius: 12px;
  border: 1.5px solid var(--still); background: var(--weiss); width: 100%;
}
.feld input:focus-visible, .feld select:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.feld-hilfe { font-size: 1rem; color: var(--leise); }
.formular .knopf { justify-self: start; margin-top: .5rem; }
.formular-datenschutz { font-size: 1rem; color: var(--leise); }
.formular-datenschutz a { color: var(--akzent); font-weight: 600; }
.formular-meldung:empty { position: absolute; }   /* leer: kein Abstand im Raster, für Bildschirmleser trotzdem da */
.formular-meldung:not(:empty) { padding: 1rem 1.25rem; border-radius: 12px; background: var(--akzent-hell); color: var(--akzent-tief); font-weight: 600; }
.kontakt-wege { display: grid; gap: 1.75rem; }
.kontakt-wege h2 { font-size: 1rem; font-weight: 600; color: var(--leise); letter-spacing: 0; }
.kontakt-wege .gross { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: var(--gewicht-titel); text-decoration: none; letter-spacing: -.01em; }
.kontakt-wege .gross:hover { text-decoration: underline; }
.kontakt-wege p { margin-top: .35rem; }
.kontakt-wege a:not(.gross) { color: var(--akzent); font-weight: 600; }
@media (min-width: 60rem) { .kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); } }

.anfahrt-raster { display: grid; gap: 2.5rem; align-items: start; }
.anfahrt-liste { display: grid; gap: 1rem; }
.anfahrt-liste li { background: var(--weiss); border-radius: var(--ecke); padding: 1.4rem 1.75rem; }
.anfahrt-liste strong { display: block; font-size: 1.1875rem; margin-bottom: .3rem; }
.anfahrt-liste span { color: var(--leise); }
.anschrift { font-style: normal; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.45; margin-top: 1.25rem; }
.demo-meldung:not(:empty) { margin-top: .75rem; font-size: 1rem; color: var(--akzent-tief); }
@media (min-width: 60rem) { .anfahrt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- Rechtstexte: schmale Spalte an derselben linken Kante wie die Überschrift ---------- */
.rechtstext > * { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); margin-top: 2.75rem; }
.rechtstext p, .rechtstext ul { margin-top: .75rem; }
.rechtstext ul { list-style: disc; padding-left: 1.25rem; }
.rechtstext a { color: var(--akzent); font-weight: 600; }
.angaben { margin-top: 2rem; display: grid; gap: 0; }
.angaben div { display: grid; gap: .2rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--linie); }
.angaben dt { color: var(--leise); font-size: 1rem; }
@media (min-width: 48rem) { .angaben div { grid-template-columns: 15rem 1fr; } }
.luecke { background: var(--akzent-hell); color: var(--akzent-tief); padding: 0 .3em; border-radius: 4px; }

/* ==========================================================================
   Bewegung
   starr      nichts bewegt sich, nur Knöpfe und Links reagieren
   mittel     Inhalte gleiten ein (24 px, 0,6 s), Bilder ziehen sich beim
              Erscheinen zusammen (104 % auf 100 %), Knöpfe geben nach,
              die Auswahl wechselt weich, die Ablauf-Linie zeichnet sich,
              die Striche neben Schritten zeichnen sich einmal von oben nach unten
   dynamisch  dazu: Bilder wachsen beim Scrollen mit, die Kopfzeile wird
              schmaler, Beträge zählen hoch
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root.js:not([data-bewegung="starr"]) [data-auftritt] { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  :root.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-sichtbar) { opacity: 0; transform: translateY(24px); }

  :root.js:not([data-bewegung="starr"]) .bild-auftritt img { transition: transform 1.4s var(--ease); }
  :root.js:not([data-bewegung="starr"]) .bild-auftritt:not(.ist-sichtbar) img { transform: scale(1.04); }

  :root:not([data-bewegung="starr"]) .held-text > * { animation: rein .9s var(--ease) both; }
  :root:not([data-bewegung="starr"]) .held-text > :nth-child(2) { animation-delay: .08s; }
  :root:not([data-bewegung="starr"]) .held-text > :nth-child(3) { animation-delay: .16s; }
  :root:not([data-bewegung="starr"]) .held-text > :nth-child(4) { animation-delay: .24s; }

  :root:not([data-bewegung="starr"]) .knopf { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); }
  :root:not([data-bewegung="starr"]) .knopf:active { transform: scale(.97); }

  :root:not([data-bewegung="starr"]) .kachel img { transition: transform .9s var(--ease); }
  :root:not([data-bewegung="starr"]) .kachel:hover img { transform: scale(1.035); }

  :root.js:not([data-bewegung="starr"]) .auswahl-panel:not([hidden]) { animation: wechsel .45s var(--ease) both; }

  :root.js:not([data-bewegung="starr"]) .ablauf::before { transition: transform 1.1s var(--ease) .15s; }
  :root.js:not([data-bewegung="starr"]) .ablauf:not(.linie-da)::before { transform: scaleX(0); }
  /* schmal: die senkrechten Verbindungsstriche zeichnen sich nacheinander von oben nach unten */
  :root.js:not([data-bewegung="starr"]) .ablauf li::after { transition: transform .8s var(--ease) .15s; }
  :root.js:not([data-bewegung="starr"]) .ablauf li:nth-child(2)::after { transition-delay: .45s; }
  :root.js:not([data-bewegung="starr"]) .ablauf:not(.linie-da) li::after { transform: scaleY(0); }

  /* Die Striche neben den Schritten zeichnen sich einmal von oben nach unten, sobald der
     Schritt ins Bild kommt. Danach stehen sie ruhig und gleich lang neben ihrer Überschrift. */
  :root.js:not([data-bewegung="starr"]) :is(.weg-schritte, .werdegang) li::before { transform-origin: top; transition: transform .7s var(--ease) .2s; }
  :root.js:not([data-bewegung="starr"]) :is(.weg-schritte, .werdegang) li:not(.ist-sichtbar)::before { transform: scaleY(0); }
}
@keyframes rein { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes wechsel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Große Bilder wachsen beim Hereinscrollen auf ihre volle Größe */
    :root[data-bewegung="dynamisch"] .weg-bild,
    :root[data-bewegung="dynamisch"] .kachel-gross {
      animation: wachsen linear both; animation-timeline: view(); animation-range: entry 0% cover 35%;
    }
    /* Das erste Bild zieht beim Wegscrollen leicht auf */
    :root[data-bewegung="dynamisch"] .held-bild img {
      animation: aufziehen linear both; animation-timeline: view(); animation-range: exit 0% exit 100%;
    }
  }
  @supports (animation-timeline: scroll()) {
    /* Die Kopfzeile wird in den ersten 200 px schmaler */
    :root[data-bewegung="dynamisch"] .kopf-innen {
      animation: schmaler linear both; animation-timeline: scroll(root); animation-range: 0 200px;
    }
  }
}
@keyframes wachsen { from { transform: scale(.94); } to { transform: none; } }
@keyframes aufziehen { from { transform: none; } to { transform: scale(1.08); } }
@keyframes schmaler { from { min-height: 4.5rem; } to { min-height: 3.5rem; } }

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-auftritt] { opacity: 1 !important; transform: none !important; }
  .kopf { position: static; }
  .js .auswahl-panel[hidden] { display: grid; }
}