/* Physiotherapie Sievers · style.css
   Leitidee „Ruhe in der Bewegung“: viel Raum, eine weiche Serif, Petrol als einziger Signalton.
   Bewegung kommt aus drei Quellen: das Hero-Foto öffnet sich beim Scrollen zum Fenster (medien-expansion-scroll),
   die Kapitel färben den Raum um (theme-farbwechsel-scroll), Seiten schieben sich richtungsbewusst ineinander
   (vt-cross-document-mpa + richtungsbewusste-uebergaenge). Alles andere steht.
   Nur Variablen aus tokens.css. */

/* ---------- Leitmotiv Uferlinie: die Praxis liegt am Okerufer ----------
   Eine Linie wie ein Flussufer trennt die Kapitel (gewellte Kante plus Hochwasserlinie),
   schneidet das Hero-Foto, trägt den Ablauf, zeichnet im Fuß den Lauf der Oker
   und ist die Kante, mit der eine neue Seite über die alte wischt. */
@property --auf { syntax: '<length>'; inherits: false; initial-value: 0px; }
:root {
  --hg: var(--farbe-grund);
  --vg: var(--farbe-text);
  --vg-2: var(--farbe-text-2);
  --vg-titel: var(--farbe-marke-tief);
  --linie-akt: var(--farbe-linie);
  --knopf-grund: var(--farbe-marke);
  --knopf-grund-hover: var(--farbe-marke-tief);
  --knopf-text: var(--farbe-auf-marke);
  --fokus-akt: var(--farbe-marke-tief);
  --kopf-h: 72px;
  --inhalt: min(var(--raster-max), 100vw - 2 * var(--raster-rand));
  --ufer-h: clamp(36px, 4.6vw, 72px);  /* abgeleitet: Höhe der Uferkante zwischen zwei Kapiteln */
  --ufer-a: 26px;                       /* abgeleitet: Ausschlag der Uferkante am Hero-Foto */
  --groesse-wort: clamp(2.75rem, 1rem + 6vw, 7rem); /* Abweichung: eine Schau-Zeile je Seite, keine h1 */
  --groesse-liste: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  color-scheme: light;
}
/* Kapitel tragen ihre Fläche selbst; die Farben der Schrift folgen der Fläche */
[data-thema] { background: var(--hg); color: var(--vg); }
[data-thema="hell"] { --hg: var(--farbe-grund); }
[data-thema="flaeche"] { --hg: var(--farbe-flaeche-hell); }
[data-thema="marke"] {
  --hg: var(--farbe-marke);
  --vg: var(--farbe-auf-marke);
  --vg-2: var(--farbe-auf-marke-2);
  --vg-titel: var(--farbe-auf-marke);
  --linie-akt: rgb(245 247 247 / .22);
  --knopf-grund: var(--farbe-grund);
  --knopf-grund-hover: #FFFFFF;
  --knopf-text: var(--farbe-marke-tief);
  --fokus-akt: var(--farbe-akzent);
}

/* Uferkante: die Fläche des Kapitels greift mit gewellter Kante in das vorige,
   darüber eine dünne Hochwasserlinie, die sich beim Scrollen zeichnet; beide fließen mit dem Scroll seitlich. */
.ufer { position: relative; z-index: 1; }
.ufer::before, .ufer::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(1px - var(--ufer-h)); height: var(--ufer-h); pointer-events: none;
  -webkit-mask: var(--ufer-maske) 0 0 / 1600px 100% repeat-x; mask: var(--ufer-maske) 0 0 / 1600px 100% repeat-x;
}
.ufer::before { --ufer-maske: url(bilder/ufer-flaeche.svg); background: var(--hg); }
.ufer::after { --ufer-maske: url(bilder/ufer-linie.svg); background: var(--farbe-marke-mittel); opacity: .55; }
.ufer[data-vorher="marke"]::after { background: var(--farbe-auf-marke-2); }
.ufer[data-thema="marke"]::after { opacity: .7; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ufer::before { animation: ufer-fluss linear both; animation-timeline: view(); animation-range: cover; }
    .ufer::after { animation: ufer-fluss linear both, ufer-zeichnen linear both; animation-timeline: view(), view(); animation-range: cover, entry 10% entry 100%; }
  }
}
@keyframes ufer-fluss { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -360px 0; mask-position: -360px 0; } }
@keyframes ufer-zeichnen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + var(--raum-5)); interpolate-size: allow-keywords; }
body {
  margin: 0; min-height: 100svh;
  background: var(--hg); color: var(--vg);
  font-family: var(--schrift-text); font-size: var(--groesse-text); line-height: var(--zeilenhoehe-text);
  font-optical-sizing: auto; font-kerning: normal;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--schrift-headline); font-weight: 400; color: var(--vg-titel); text-wrap: balance; font-variation-settings: 'opsz' 24; }
h1 { font-size: min(var(--groesse-h1), 10vw); line-height: 1.05; letter-spacing: -0.015em; }
h1, h2, .hilfe__wort, .weiter__titel, .menue__liste a { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 10 4 4; }
h2 { font-size: var(--groesse-h2); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--groesse-h3); line-height: 1.25; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
::selection { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
time, .ziffern { font-variant-numeric: tabular-nums; }

/* Fokus als Gestaltung (fokus-stil-system) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fokus-akt); outline-offset: var(--fokus-abstand); border-radius: 4px; }
.knopf:focus-visible, .kopf__menue:focus-visible, .rund:focus-visible { border-radius: var(--radius-button); }
main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }

.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: var(--raum-4); top: var(--raum-3); z-index: 100; padding: var(--raum-3) var(--raum-5); border-radius: var(--radius-button); background: var(--farbe-marke-tief); color: var(--farbe-auf-marke); text-decoration: none; translate: 0 -200%; transition: translate var(--dauer-m) var(--ease-aus); }
.sprung:focus-visible { translate: 0 0; transition-timing-function: var(--ease-ein); outline-color: var(--farbe-akzent); }

.raster {
  width: var(--inhalt); margin-inline: auto;
  display: grid; grid-template-columns: repeat(var(--raster-spalten), minmax(0, 1fr)); column-gap: var(--raster-spalt);
}
.raster > * { grid-column: 1 / -1; }
.kapitel { position: relative; padding-block: var(--raum-sektion); }

/* ---------- Kleine Bausteine ---------- */
/* unterstreichung-varianten: Linie wächst von links, beim Verlassen läuft sie nach rechts aus */
.linie { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size var(--dauer-l) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  a:hover > .linie, a.linie:hover { background-size: 0 1px; background-position: 100% 100%; }
}
/* pfeil-icon-button, Variante linie */
.pfeil-link { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; text-decoration: none; font-weight: 500; color: var(--vg-titel); }
.pfeil-link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pfeil-link__schaft { stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset var(--dauer-l) var(--ease); }
.pfeil-link__spitze { transition: translate var(--dauer-l) var(--ease); translate: -4px 0; }
@media (hover: hover) and (pointer: fine) {
  .pfeil-link:hover .pfeil-link__schaft { stroke-dashoffset: 0; }
  .pfeil-link:hover .pfeil-link__spitze { translate: 0 0; }
}
.pfeil-link:focus-visible .pfeil-link__schaft { stroke-dashoffset: 0; }
.pfeil-link:focus-visible .pfeil-link__spitze { translate: 0 0; }

/* button-zustaende */
.knopf {
  position: relative; display: inline-grid; place-items: center; min-height: var(--button-hoehe); padding: 0 var(--raum-6);
  border: 0; border-radius: var(--radius-button); background: var(--knopf-grund); color: var(--knopf-text);
  font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dauer-xs) var(--ease), color var(--dauer-m) linear, scale var(--dauer-xs) var(--ease);
}
.knopf--klein { min-height: 44px; padding: 0 var(--raum-5); font-size: var(--groesse-klein); }
.knopf--hell { --knopf-grund: var(--farbe-grund); --knopf-grund-hover: #FFFFFF; --knopf-text: var(--farbe-marke-tief); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--knopf-grund-hover); } }
.knopf:active { scale: .97; }
.knopf__ebene { grid-area: 1 / 1; transition: opacity var(--dauer-m) var(--ease), translate var(--dauer-m) var(--ease); }
.knopf__laden, .knopf__haken { opacity: 0; }
.knopf__laden svg, .knopf__haken svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knopf__laden circle { stroke-dasharray: 40 60; transform-origin: center; animation: drehen 700ms linear infinite paused; }
.knopf__haken path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dauer-l) var(--ease-ein) 80ms; }
.knopf[data-state="loading"] { pointer-events: none; }
.knopf[data-state="loading"] .knopf__label, .knopf[data-state="erfolg"] .knopf__label { opacity: 0; translate: 0 -4px; }
.knopf[data-state="loading"] .knopf__laden { opacity: 1; }
.knopf[data-state="loading"] .knopf__laden circle { animation-play-state: running; }
.knopf[data-state="erfolg"] { background: var(--farbe-erfolg); color: var(--farbe-auf-marke); }
.knopf[data-state="erfolg"] .knopf__haken { opacity: 1; }
.knopf[data-state="erfolg"] .knopf__haken path { stroke-dashoffset: 0; }
@keyframes drehen { to { rotate: 1turn; } }

.tel-link { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; font-weight: 500; text-decoration: none; color: var(--vg-titel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel-link svg, .kopf__tel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

.status { display: flex; align-items: baseline; gap: var(--raum-2); font-size: var(--groesse-klein); color: var(--vg-2); }
.status__punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; translate: 0 -1px; }
[data-zustand="offen"] .status__punkt { background: #1E8A5A; box-shadow: 0 0 0 3px rgb(30 138 90 / .18); }
[data-zustand="bald"] .status__punkt { background: var(--farbe-akzent); box-shadow: 0 0 0 3px rgb(255 199 118 / .3); }

.platzhalter { background: var(--farbe-akzent); color: var(--farbe-akzent-text); border-radius: 4px; padding: 0 .35em; font-size: .92em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.platzhalter-flaeche { display: grid; align-items: end; padding: var(--raum-5); background: var(--ton, var(--farbe-flaeche)); color: var(--farbe-text-2); font-size: var(--groesse-klein); }
.platzhalter-flaeche span { max-width: 22ch; }
.hinweis-block { padding: var(--raum-4) var(--raum-5); border-radius: var(--radius-klein); background: #FFF2DC; color: var(--farbe-akzent-text); font-size: var(--groesse-klein); }

/* Glossar-Begriff mit Hovercard (Signatur hovercard-interest-invoker) */
.begriff { padding: 0; border: 0; background: none; cursor: help; color: inherit; text-decoration: underline dotted 1.5px; text-underline-offset: .22em; font: inherit; }
.begriff.zeigt { text-decoration-style: solid; }
.hc {
  position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 24px)); padding: var(--raum-5);
  border: 0; border-radius: var(--radius-gross); background: var(--farbe-karte); color: var(--farbe-text);
  box-shadow: var(--schatten-karte); font-size: var(--groesse-klein); line-height: 1.55;
  position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; margin-block: var(--raum-3);
  opacity: 0; translate: 0 var(--weg);
  transition: opacity var(--dauer-m) var(--ease-aus), translate var(--dauer-m) var(--ease-aus), overlay var(--dauer-m) allow-discrete, display var(--dauer-m) allow-discrete;
}
.hc:popover-open { opacity: 1; translate: 0 0; transition-duration: var(--dauer-l); transition-timing-function: var(--ease-ein); }
@starting-style { .hc:popover-open { opacity: 0; translate: 0 var(--weg); } }
.hc__wort { font-family: var(--schrift-headline); font-size: 1.25rem; color: var(--farbe-marke-tief); margin-bottom: var(--raum-2); }
.hc__mehr { display: inline-block; margin-top: var(--raum-3); color: var(--farbe-marke); font-weight: 500; }

/* Masken für Zeilen (intro-ohne-wartezeit, split-mask-reveal) */
.zeile { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.zeile > span { display: block; }
.zeile--zweit { color: var(--farbe-marke-mittel); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; height: var(--kopf-h); background: var(--farbe-grund); view-transition-name: kopf; transition: box-shadow var(--dauer-l) var(--ease);
  /* Der Kopf bleibt hell, auch wenn ein Kapitel den Raum umfärbt: Telefon und Termin immer gleich lesbar */
  --vg: var(--farbe-text); --vg-2: var(--farbe-text-2); --vg-titel: var(--farbe-marke-tief); --linie-akt: var(--farbe-linie);
  --knopf-grund: var(--farbe-marke); --knopf-grund-hover: var(--farbe-marke-tief); --knopf-text: var(--farbe-auf-marke); --fokus-akt: var(--farbe-marke-tief); color: var(--vg); }
.kopf.ist-gescrollt { box-shadow: 0 1px 0 var(--linie-akt); }
.kopf__innen { height: 100%; width: min(1440px, 100vw - 2 * var(--raster-rand)); margin-inline: auto; display: flex; align-items: center; gap: var(--raum-6); }
.marke { display: inline-flex; align-items: baseline; gap: var(--raum-3); text-decoration: none; color: var(--vg-titel); min-height: 44px; align-items: center; }
.marke__name { font-family: var(--schrift-headline); font-size: 1.625rem; letter-spacing: -0.01em; line-height: 1; }
.marke__zusatz { font-size: var(--groesse-klein); color: var(--vg-2); }
.nav { margin-inline: auto; }
.nav__liste { display: flex; gap: var(--raum-2); }
.nav__a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--raum-3); text-decoration: none; color: var(--vg); font-size: var(--groesse-klein); font-weight: 500; }
.nav__text { position: relative; }
.nav__a::after { content: ''; position: absolute; left: var(--raum-3); right: var(--raum-3); bottom: 8px; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale var(--dauer-l) var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav__a:not([aria-current]):hover::after { scale: 1 1; transform-origin: left; } }
.nav__strich { position: absolute; left: var(--raum-3); right: var(--raum-3); bottom: 6px; height: 2px; border-radius: 2px; background: var(--farbe-marke); view-transition-name: nav-strich; }
.kopf__tel { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; text-decoration: none; font-weight: 500; font-size: var(--groesse-klein); font-variant-numeric: tabular-nums; color: var(--vg-titel); white-space: nowrap; }
.kopf__menue { display: none; align-items: center; gap: var(--raum-2); min-height: 44px; padding: 0 var(--raum-4); border: 1px solid var(--linie-akt); border-radius: var(--radius-button); background: transparent; color: var(--vg-titel); cursor: pointer; font-size: var(--groesse-klein); font-weight: 500; }
.kopf__menue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (max-width: 1099px) { .nav { display: none; } .kopf__menue { display: inline-flex; } .kopf__innen { gap: var(--raum-4); } .kopf__tel { margin-left: auto; } }
@media (max-width: 699px) { :root { --kopf-h: 64px; } .kopf__tel, .marke__zusatz { display: none; } .kopf__termin { margin-left: auto; padding-inline: var(--raum-4); } }
@media (max-width: 389px) { .kopf__termin { display: none; } .kopf__menue { margin-left: auto; } }

/* Menü als natives dialog (menue-choreografie-wipe-clip, ruhig: eine Fläche, Zeilen aus Masken) */
.menue { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--farbe-marke); color: var(--farbe-auf-marke); overscroll-behavior: contain; }
.menue::backdrop { background: transparent; }
.menue[open] { clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-xl) var(--ease-ein); }
@starting-style { .menue[open] { clip-path: inset(0 0 100% 0); } }
.menue.ist-zu { clip-path: inset(0 0 100% 0); transition: clip-path calc(var(--dauer-xl) * var(--aus-faktor)) var(--ease-aus); }
.menue__innen { min-height: 100%; width: min(1440px, 100vw - 2 * var(--raster-rand)); margin-inline: auto; display: grid; grid-template-rows: var(--kopf-h) 1fr auto; padding-bottom: var(--raum-7); }
.menue__kopf { display: flex; align-items: center; justify-content: space-between; }
.marke--hell, .marke--hell .marke__zusatz { color: var(--farbe-auf-marke); }
.kopf__menue--zu { display: inline-flex; color: var(--farbe-auf-marke); border-color: rgb(245 247 247 / .35); }
.menue__liste { align-self: center; display: grid; gap: var(--raum-2); padding-block: var(--raum-7); }
.menue__liste a { display: block; text-decoration: none; font-family: var(--schrift-headline); font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--farbe-auf-marke); }
.menue__liste a[aria-current] { color: var(--farbe-akzent); }
.menue__maske { display: block; overflow: clip; padding-bottom: .06em; }
.menue__maske > span { display: inline-block; }
.menue[open] .menue__maske > span { animation: zeile-hoch var(--dauer-xl) var(--ease-ein) both; animation-delay: calc(var(--dauer-m) + var(--i, 0) * var(--stagger) * 2); }
.menue__fuss { display: grid; gap: var(--raum-2); }
.menue__fuss .status { color: var(--farbe-auf-marke-2); }
.menue__tel { font-family: var(--schrift-headline); font-size: 2rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.menue :focus-visible { outline-color: var(--farbe-akzent); }

/* ---------- Held (Startseite): Foto öffnet sich beim Scrollen zum Fenster (medien-expansion-scroll) ---------- */
.held { position: relative; z-index: 1; }
.held__raster { width: var(--inhalt); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); align-items: center; padding-block: clamp(32px, 6vh, 72px) clamp(40px, 7vh, 88px); min-height: calc(100svh - var(--kopf-h)); }
.held__text { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; display: grid; gap: var(--raum-6); align-content: center; container-type: inline-size; }
.held__text h1 { font-size: min(var(--groesse-h1), 10.5cqi); }
.held__satz { max-width: 44ch; font-size: var(--groesse-gross); color: var(--vg-2); }
.held__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4) var(--raum-6); }
.held__platz { display: none; }
.held__bild { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf-h) - 2 * clamp(32px, 6vh, 72px)); width: 100%; justify-self: end; border-radius: var(--radius-gross); overflow: hidden; background: var(--farbe-flaeche); }
.held__bild picture, .held__bild img { width: 100%; height: 100%; }
.held__bild img { object-fit: cover; object-position: 38% 50%; }
.held__schleier { position: absolute; inset: 0; background: rgb(0 40 38 / var(--schleier, 0)); pointer-events: none; }
.held__wort { display: none; }
@media (max-width: 699px) {
  .held__raster { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: var(--raum-6); align-items: start; padding-top: var(--raum-6); }
  .held__text, .held__bild, .held__platz { grid-column: 1; }
  .held__bild, .held__platz { grid-row: 2; }
  .held__bild { aspect-ratio: 4 / 5; max-height: none; }
}

/* Mit Bühne (seite.js setzt .ist-buehne): Spur hält die Bühne, das Bild liegt über der ganzen Bühne
   und wird per clip-path auf den Platz im Raster zugeschnitten; der Scroll öffnet es zum Vollbild. */
.ist-buehne .held__spur { height: calc(var(--spur, 320) * 1svh); }
.ist-buehne .held__buehne { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); overflow: clip; }
.ist-buehne .held__raster { height: 100%; min-height: 0; }
.ist-buehne .held__platz { display: block; grid-column: 8 / 13; grid-row: 1; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf-h) - 2 * clamp(32px, 6vh, 72px)); width: 100%; justify-self: end; }
.ist-buehne .held__text { opacity: calc(1 - var(--p-text, 0)); translate: 0 calc(var(--p-text, 0) * -48px); }
.ist-buehne .held__bild {
  position: absolute; inset: 0; z-index: 1; max-height: none; aspect-ratio: auto; border-radius: 0; background: none;
  clip-path: inset(calc(var(--i-o, 0px) * var(--q, 1) + var(--auf)) calc(var(--i-r, 0px) * var(--q, 1) + var(--auf)) calc(var(--i-u, 0px) * var(--q, 1) + var(--auf)) calc(var(--i-l, 0px) * var(--q, 1) + var(--auf)) round calc(var(--radius-gross) * var(--q, 1) + var(--auf) * 2));
}
.ist-buehne .held__bild img { object-position: 50% 50%; transform: translateX(calc(var(--q, 1) * var(--schub, 0px))); }
.ist-buehne .held__wort {
  display: block; position: absolute; z-index: 3; left: max(var(--raster-rand), (100vw - var(--raster-max)) / 2); right: var(--raster-rand); bottom: clamp(40px, 9vh, 112px);
  margin: 0; font-family: var(--schrift-headline); font-size: var(--groesse-wort); line-height: .98; letter-spacing: -0.025em; color: #FBFBFA; text-shadow: 0 1px 40px rgb(0 30 28 / .35);
}
.ist-buehne .held__wort .zeile > span { translate: 0 calc((1 - var(--p-wort, 0)) * 150%); }
.ist-buehne .held__wort .zeile:nth-child(2) > span { translate: 0 calc((1 - var(--p-wort2, 0)) * 150%); }
@media (max-width: 699px) {
  .ist-buehne .held__platz { grid-column: 1; grid-row: 2; aspect-ratio: auto; height: 100%; min-height: 220px; max-height: none; }
  .ist-buehne .held__raster { grid-template-rows: auto 1fr; padding-bottom: var(--raum-5); }
}

/* Das Foto wird an der linken Kante vom Ufer geschnitten; der Ausschlag geht beim Öffnen auf null.
   clip-path: shape() rechnet mit denselben Einzügen wie inset(); ohne shape() bleibt die Rundung. */
.held__bild {
  --T: calc(var(--i-o, 0px) * var(--q, 1) + var(--auf)); --R: calc(var(--i-r, 0px) * var(--q, 1) + var(--auf));
  --B: calc(var(--i-u, 0px) * var(--q, 1) + var(--auf)); --L: calc(var(--i-l, 0px) * var(--q, 1) + var(--auf));
  --A: calc(var(--ufer-a) * var(--q, 1)); --H: (100% - var(--T) - var(--B));
}
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .held__bild, .ist-buehne .held__bild {
    clip-path: shape(from var(--L) var(--T), line to calc(100% - var(--R)) var(--T), line to calc(100% - var(--R)) calc(100% - var(--B)), line to var(--L) calc(100% - var(--B)),
      curve to calc(var(--L) + var(--A) * .2) calc(var(--T) + var(--H) * .5) with calc(var(--L) + var(--A)) calc(var(--T) + var(--H) * .84) / calc(var(--L) - var(--A) * .45) calc(var(--T) + var(--H) * .64),
      curve to var(--L) var(--T) with calc(var(--L) + var(--A) * .95) calc(var(--T) + var(--H) * .32) / calc(var(--L) + var(--A) * .15) calc(var(--T) + var(--H) * .1), close);
  }
}

/* Intro ohne Wartezeit: Zeilen steigen aus Masken, das Foto öffnet sich weich, Nebenteile folgen (nur beim ersten Aufruf im Tab voll) */
@media (prefers-reduced-motion: no-preference) {
  [data-intro="voll"] .titel-maske .zeile > span { animation: zeile-hoch var(--dauer-xxl) var(--ease-bild) both; animation-delay: calc(80ms + var(--i, 0) * 80ms); }
  [data-intro="voll"] .titel-maske .zeile:nth-child(2) > span { --i: 1; }
  [data-intro="voll"] .titel-maske .zeile:nth-child(3) > span { --i: 2; }
  [data-intro="voll"] .auftakt { animation: auftauchen var(--dauer-xl) var(--ease-ein) both; animation-delay: calc(260ms + var(--v, 0) * 60ms); }
  [data-intro="voll"] .held__bild { animation: fenster-auf var(--dauer-xxl) var(--ease-bild) 120ms both; }
  [data-intro="voll"].ist-buehne .held__bild { animation: fenster-auf var(--dauer-xxl) var(--ease-bild) 120ms both, fenster-weit calc(var(--dauer-xxl) * 1.3) var(--ease-bild) 60ms both; }
  [data-intro="voll"] .kopf__innen > * { animation: auftauchen var(--dauer-xl) var(--ease-ein) both; animation-delay: 320ms; }
  [data-intro="kurz"] .titel-maske .zeile > span { animation: zeile-hoch var(--dauer-xl) var(--ease-ein) both; animation-delay: calc(var(--dauer-m) + var(--i, 0) * 50ms); }
  [data-intro="kurz"] .titel-maske .zeile:nth-child(2) > span { --i: 1; }
  [data-intro="kurz"] .titel-maske .zeile:nth-child(3) > span { --i: 2; }
}
@keyframes zeile-hoch { from { transform: translateY(108%); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(var(--weg)); } }
@keyframes fenster-auf { from { opacity: .001; filter: saturate(.7); } }
@keyframes fenster-weit { from { --auf: 56px; } }

/* ---------- Kapitel, das über die Bühne fährt (section-overlap-uebergang, runde Kante) ---------- */
.kapitel--ueber { z-index: 2; }
.ist-buehne .kapitel--ueber { margin-top: calc(-100svh + var(--kopf-h)); }

/* ---------- Wobei wir helfen: große Liste, Bild daneben wechselt (Zeiger oder Fokus) ---------- */
.hilfe__titel { grid-column: 1 / 6; margin-bottom: var(--raum-8); }
.hilfe__liste { grid-column: 1 / 8; counter-reset: h; border-top: 1px solid var(--linie-akt); }
.hilfe__liste li { border-bottom: 1px solid var(--linie-akt); }
.hilfe__eintrag { display: grid; grid-template-columns: 1fr auto 24px; align-items: baseline; gap: var(--raum-2) var(--raum-5); padding: var(--raum-5) 0; text-decoration: none; color: var(--vg-titel); transition: color var(--dauer-xs) var(--ease); }
.hilfe__wort { font-family: var(--schrift-headline); font-size: var(--groesse-liste); line-height: 1.08; letter-spacing: -0.015em; transition: translate var(--dauer-l) var(--ease); }
.hilfe__fach { font-size: var(--groesse-klein); color: var(--vg-2); white-space: nowrap; }
.hilfe__eintrag svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; align-self: center; }
.hilfe__eintrag .pfeil-link__schaft { stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset var(--dauer-l) var(--ease); }
.hilfe__eintrag .pfeil-link__spitze { translate: -4px 0; transition: translate var(--dauer-l) var(--ease); }
.hilfe__eintrag.ist-aktiv .hilfe__wort, .hilfe__eintrag:focus-visible .hilfe__wort { translate: var(--raum-3) 0; }
.hilfe__eintrag.ist-aktiv .pfeil-link__schaft, .hilfe__eintrag:focus-visible .pfeil-link__schaft { stroke-dashoffset: 0; }
.hilfe__eintrag.ist-aktiv .pfeil-link__spitze, .hilfe__eintrag:focus-visible .pfeil-link__spitze { translate: 0 0; }
.hilfe__liste.hat-aktiv .hilfe__eintrag:not(.ist-aktiv) { color: var(--vg-2); }
.hilfe__vorschau { grid-column: 9 / 13; grid-row: 2 / 4; }
.vorschau { position: sticky; top: calc(var(--kopf-h) + var(--raum-7)); aspect-ratio: 4 / 5; border-radius: var(--radius-gross); overflow: hidden; background: var(--farbe-flaeche); }
.vorschau__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(100% 0 0 0); transition: opacity var(--dauer-m) var(--ease-aus), clip-path 0s linear var(--dauer-m); }
.vorschau__bild.ist-aktiv { opacity: 1; clip-path: inset(0 0 0 0); z-index: 1; transition: opacity var(--dauer-xs) linear, clip-path var(--dauer-xxl) var(--ease-bild); }
.hilfe__mehr { grid-column: 1 / 8; margin-top: var(--raum-6); }
@media (max-width: 899px) {
  .hilfe__titel, .hilfe__liste, .hilfe__mehr { grid-column: 1 / -1; }
  .hilfe__vorschau { display: none; }
  .hilfe__eintrag { grid-template-columns: 1fr 20px; }
  .hilfe__fach { grid-column: 1; grid-row: 2; }
  .hilfe__eintrag svg { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------- Ablauf auf Petrol: die vier Schritte liegen auf der Uferlinie, die sich mit dem Scroll zeichnet
   (prozess-timeline-wachsende-linie, als Flusslauf) ---------- */
.ablauf .raster { row-gap: var(--raum-5); }
.ablauf__titel { grid-column: 1 / 7; }
.ablauf__mitbringen { grid-column: 8 / 13; align-self: end; color: var(--vg-2); }
.flusslauf { grid-column: 1 / -1; position: relative; margin-top: var(--raum-7); }
.flusslauf__linie { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.flusslauf__linie path { fill: none; vector-effect: non-scaling-stroke; }
.flusslauf__bett { stroke: var(--linie-akt); stroke-width: 10; stroke-linecap: round; }
.flusslauf__lauf { stroke: var(--farbe-akzent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.schritte { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schritt { position: relative; display: grid; gap: var(--raum-3); align-content: start; padding: 152px var(--raum-6) 0 0; }
.schritt__punkt { position: absolute; left: -7px; top: calc(var(--y) * 1px - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--hg); box-shadow: inset 0 0 0 1.5px var(--farbe-akzent); transition: background-color var(--dauer-l) var(--ease), scale var(--dauer-l) var(--ease); }
.schritt:first-child .schritt__punkt { left: 0; }
.schritt.ist-erreicht .schritt__punkt { background: var(--farbe-akzent); }
.schritt h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); color: var(--vg-titel); }
.schritt p { color: var(--vg-2); max-width: 30ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .flusslauf__lauf { animation: lauf-zeichnen linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  }
}
@keyframes lauf-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 899px) {
  .ablauf__titel, .ablauf__mitbringen { grid-column: 1 / -1; }
  .flusslauf__linie { display: none; }
  .schritte { grid-template-columns: 1fr; gap: var(--raum-7); padding-left: var(--raum-7); }
  .schritte::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: var(--farbe-akzent); opacity: .6; }
  .schritt { padding: 0; }
  .schritt__punkt, .schritt:first-child .schritt__punkt { top: 8px; left: calc(-1 * var(--raum-7)); }
}

/* ---------- Bild-Reveal per clip-path, einmalig beim Eintritt (clip-path-bild-reveal, Vorhang) ---------- */
.bild-blende { overflow: hidden; border-radius: var(--radius-gross); background: var(--farbe-flaeche); }
.bild-blende img { width: 100%; height: 100%; object-fit: cover; }
/* Der Vorhang liegt auf dem Bild selbst: IntersectionObserver beobachtet die ungeschnittene Figur */
@media (prefers-reduced-motion: no-preference) {
  .js .bild-blende { background: transparent; }
  .js .bild-blende:not(.ist-offen) > img { clip-path: inset(100% 0 0 0); scale: 1.06; }
  .js .bild-blende.ist-offen > img { clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-xxl) var(--ease-bild), scale calc(var(--dauer-xxl) * 1.4) var(--ease-bild); }
}

/* ---------- Haus und Kurse (Start): ein Kapitel statt zwei ---------- */
.haus .raster { row-gap: var(--raum-8); align-items: start; }
.haus__kurse { grid-column: 1 / 7; display: grid; gap: var(--raum-4); justify-items: start; }
.haus__satz { color: var(--vg-2); font-size: var(--groesse-gross); max-width: 38ch; }
.haus__karte { grid-column: 8 / 13; grid-row: 1 / 3; display: grid; gap: var(--raum-3); text-decoration: none; color: var(--vg-titel); font-weight: 500; }
.haus__skizze { width: 100%; height: auto; aspect-ratio: 6 / 5; border-radius: var(--radius-gross); }
.haus__karte-zeile { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; }
.haus__karte svg:not(.haus__skizze) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .haus__karte:hover .pfeil-link__schaft { stroke-dashoffset: 0; } .haus__karte:hover .pfeil-link__spitze { translate: 0 0; } }
.haus__raum { grid-column: 1 / 7; display: grid; gap: var(--raum-3); justify-items: start; padding-top: var(--raum-6); border-top: 1px solid var(--vg-titel); }
.haus__raum h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
.haus__raum p { color: var(--vg-2); }
.naechste { width: 100%; margin-block: var(--raum-4) var(--raum-2); border-top: 1px solid var(--linie-akt); }
.naechste li { display: grid; grid-template-columns: 6.5rem 4rem 1fr auto; gap: var(--raum-4); align-items: baseline; padding: var(--raum-4) 0; border-bottom: 1px solid var(--linie-akt); }
.naechste .naechste__leer { display: block; color: var(--vg-2); }
.naechste__tag { color: var(--vg-2); font-size: var(--groesse-klein); }
.naechste__zeit { font-variant-numeric: tabular-nums; font-weight: 500; }
.naechste__name { font-family: var(--schrift-headline); font-size: 1.5rem; color: var(--vg-titel); }
.naechste__platz { justify-self: end; font-size: var(--groesse-klein); color: var(--vg-2); }
@media (max-width: 899px) {
  .haus__kurse, .haus__raum { grid-column: 1 / -1; }
  .haus__karte { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 699px) {
  .naechste li { grid-template-columns: auto 1fr; gap: 0 var(--raum-4); }
  .naechste__name { grid-column: 1 / -1; }
  .naechste__platz { justify-self: start; grid-column: 1 / -1; }
}
.kurs__jetzt, .marke-jetzt { display: inline-block; padding: 0 .5em; border-radius: 999px; background: var(--farbe-akzent); color: var(--farbe-akzent-text); font-size: .8125rem; font-weight: 500; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding-block: clamp(40px, 7vh, 96px) var(--raum-7); }
.seitenkopf .raster { row-gap: var(--raum-6); align-items: end; }
.pfad { grid-column: 1 / -1; font-size: var(--groesse-klein); color: var(--vg-2); }
.pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
.pfad li { display: inline-flex; align-items: center; min-height: 32px; }
.pfad li + li::before { content: '/'; margin-right: var(--raum-2); color: var(--linie-akt); }
.pfad a { text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.seitenkopf h1 { grid-column: 1 / 9; }
.seitenkopf__satz { grid-column: 9 / 13; color: var(--vg-2); font-size: var(--groesse-gross); }
@media (max-width: 899px) { .seitenkopf h1, .seitenkopf__satz { grid-column: 1 / -1; } }

/* ---------- Behandlungen ---------- */
.b-liste { grid-column: 1 / -1; display: grid; gap: var(--raum-10); }
.b-eintrag { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-5); align-items: start; scroll-margin-top: calc(var(--kopf-h) + var(--raum-6)); }
.b-eintrag__bild { grid-column: 1 / 5; aspect-ratio: 4 / 5; border-radius: var(--radius-gross); overflow: hidden; }
.b-eintrag__bild img { width: 100%; height: 100%; object-fit: cover; }
.b-eintrag__text { grid-column: 6 / 12; display: grid; gap: var(--raum-4); align-content: start; padding-top: var(--raum-4); }
.b-eintrag:nth-child(even) .b-eintrag__bild { grid-column: 9 / 13; grid-row: 1; }
.b-eintrag:nth-child(even) .b-eintrag__text { grid-column: 2 / 8; grid-row: 1; }
.b-eintrag h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.b-eintrag__fach { color: var(--vg-2); }
.b-eintrag__antwort { font-size: var(--groesse-gross); max-width: 46ch; }
.fakten-zeile { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); padding-top: var(--raum-4); border-top: 1px solid var(--linie-akt); color: var(--vg-2); font-size: var(--groesse-klein); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .b-liste { gap: var(--raum-9); }
  .b-eintrag__bild, .b-eintrag:nth-child(even) .b-eintrag__bild { grid-column: 1 / 9; grid-row: auto; }
  .b-eintrag__text, .b-eintrag:nth-child(even) .b-eintrag__text { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
}

/* FAQ mit Suche (akkordeon-hoehe-auto, Variante faq) */
.fragen .raster { row-gap: var(--raum-6); }
.fragen__kopf { grid-column: 1 / 5; display: grid; gap: var(--raum-5); align-content: start; }
.fragen__kopf { position: sticky; top: calc(var(--kopf-h) + var(--raum-6)); align-self: start; }
.fragen__liste { grid-column: 6 / 13; }
.suche { display: grid; gap: var(--raum-2); }
.suche label { font-size: var(--groesse-klein); font-weight: 500; }
.suche input { min-height: 48px; padding: 0 var(--raum-4); border: 1px solid var(--farbe-feld); border-radius: var(--radius-klein); background: var(--farbe-karte); color: var(--farbe-text); }
.themen { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-4); font-size: var(--groesse-klein); }
.themen a { min-height: 44px; display: inline-flex; align-items: center; }
.themen a.ist-leer { opacity: .5; }
.thema { font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--vg-2); margin: var(--raum-7) 0 var(--raum-2); }
.thema:first-child { margin-top: 0; }
.eintrag { border-bottom: 1px solid var(--linie-akt); }
.eintrag summary { display: grid; grid-template-columns: 1fr 28px; gap: var(--raum-4); align-items: center; min-height: 64px; padding: var(--raum-4) 0; cursor: pointer; list-style: none; font-family: var(--schrift-headline); font-size: 1.375rem; line-height: 1.3; color: var(--vg-titel); }
.eintrag summary::-webkit-details-marker { display: none; }
.eintrag__zeichen { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie-akt); }
.eintrag__zeichen::before, .eintrag__zeichen::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13.5px; height: 1px; background: currentColor; transition: rotate var(--dauer-l) var(--ease); }
.eintrag__zeichen::after { rotate: 90deg; }
.eintrag[open] .eintrag__zeichen::after { rotate: 0deg; }
.eintrag::details-content { block-size: 0; overflow: clip; transition: block-size calc(var(--dauer-l) * var(--aus-faktor)) var(--ease-aus), content-visibility calc(var(--dauer-l) * var(--aus-faktor)) allow-discrete; }
.eintrag[open]::details-content { block-size: auto; transition-duration: var(--dauer-l); transition-timing-function: var(--ease-ein); }
.eintrag__inhalt { padding: 0 var(--raum-8) var(--raum-5) 0; display: grid; gap: var(--raum-3); max-width: 62ch; }
.preise { width: 100%; font-size: var(--groesse-klein); }
.preise th, .preise td { padding: var(--raum-2) 0; border-bottom: 1px solid var(--linie-akt); text-align: left; font-weight: 400; }
.preise td { text-align: right; white-space: nowrap; }
.klein { font-size: var(--groesse-klein); color: var(--vg-2); }
.leer { padding: var(--raum-5) 0; color: var(--vg-2); }
::highlight(treffer) { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
@media (max-width: 899px) { .fragen__kopf, .fragen__liste { grid-column: 1 / -1; position: static; } }

/* ---------- Leistungsseite (leistungsseite-antwort-zuerst, Variante praxis) ---------- */
.leistung-kopf { padding-block: clamp(40px, 7vh, 88px) 0; }
.leistung-kopf .raster { row-gap: var(--raum-6); }
.leistung-kopf h1 { grid-column: 1 / 10; }
.leistung-kopf__alltag { display: block; color: var(--farbe-marke-mittel); }
.leistung-bild { grid-column: 1 / -1; aspect-ratio: 21 / 9; border-radius: var(--radius-gross); overflow: hidden; margin-top: var(--raum-5); }
.leistung-bild img, .leistung-bild .platzhalter-flaeche { width: 100%; height: 100%; object-fit: cover; }
.antwort { padding-block: var(--raum-sektion) 0; }
.antwort .raster { row-gap: var(--raum-7); }
.antwort__text { grid-column: 1 / 8; display: grid; gap: var(--raum-6); justify-items: start; }
.antwort__text p { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.5; max-width: 40ch; color: var(--vg-titel); }
.fakten { grid-column: 9 / 13; display: grid; align-content: start; font-size: var(--groesse-klein); border-top: 1px solid var(--vg-titel); }
.fakten div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--raum-3); padding: var(--raum-4) 0; border-bottom: 1px solid var(--linie-akt); }
.fakten dt { color: var(--vg-2); }
.fakten dd { margin: 0; font-variant-numeric: tabular-nums; }
.bloecke { padding-block: var(--raum-sektion); }
.block { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); padding-block: var(--raum-7); border-top: 1px solid var(--linie-akt); }
.block > h2 { grid-column: 1 / 5; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.block > div { grid-column: 6 / 13; display: grid; gap: var(--raum-4); max-width: 62ch; }
.block h3 { font-size: 1.25rem; margin-top: var(--raum-3); }
.balken { display: flex; gap: 3px; height: 10px; border-radius: 6px; overflow: hidden; }
.balken span { background: var(--farbe-marke); opacity: .35; }
.balken span:nth-child(3) { opacity: 1; }
.balken-legende { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); font-size: var(--groesse-klein); color: var(--vg-2); }
.balken-legende b { font-weight: 500; color: var(--vg); font-variant-numeric: tabular-nums; }
.ansprech { display: flex; gap: var(--raum-5); align-items: center; }
.ansprech .kachel { width: 88px; flex: none; }
.ansprech__name { font-family: var(--schrift-headline); font-size: 1.5rem; color: var(--vg-titel); }
.geprueft { grid-column: 1 / -1; font-size: var(--groesse-klein); color: var(--vg-2); padding-top: var(--raum-5); }
@media (max-width: 899px) {
  .leistung-kopf h1, .antwort__text, .fakten { grid-column: 1 / -1; }
  .leistung-bild { aspect-ratio: 4 / 3; }
  .block > h2, .block > div { grid-column: 1 / -1; }
  .block > div { margin-top: var(--raum-4); }
}
/* Nächste Behandlung: großer Link, Bild wandert als geteiltes Element auf die nächste Seite */
.weiter { padding-block: 0 var(--raum-sektion); }
.weiter__link { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); align-items: end; padding-top: var(--raum-6); border-top: 1px solid var(--vg-titel); text-decoration: none; color: var(--vg-titel); }
.weiter__label { grid-column: 1 / 5; font-size: var(--groesse-klein); color: var(--vg-2); align-self: start; }
.weiter__titel { grid-column: 1 / 9; font-family: var(--schrift-headline); font-size: var(--groesse-liste); line-height: 1.05; letter-spacing: -0.015em; }
.weiter__bild { grid-column: 10 / 13; grid-row: 1 / 3; aspect-ratio: 4 / 5; border-radius: var(--radius-gross); overflow: hidden; }
.weiter__bild img, .weiter__bild .platzhalter-flaeche { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dauer-xxl) var(--ease-bild); }
@media (hover: hover) and (pointer: fine) { .weiter__link:hover .weiter__bild img { scale: 1.03; } }
@media (max-width: 699px) { .weiter__titel, .weiter__label { grid-column: 1 / 9; } .weiter__bild { grid-column: 9 / 13; } }

/* ---------- Kurse ---------- */
.woche { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--vg-titel); }
.tag { padding: var(--raum-4) var(--raum-4) var(--raum-6) 0; border-right: 1px solid var(--linie-akt); }
.tag + .tag { padding-left: var(--raum-4); }
.tag:last-child { border-right: 0; }
.tag h2 { font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: 500; color: var(--vg-2); margin-bottom: var(--raum-5); }
.tag[data-heute] h2::after { content: ' · heute'; color: var(--farbe-marke); }
.tag ol { display: grid; gap: var(--raum-5); }
.kurs { display: grid; gap: 2px; }
.kurs time { font-variant-numeric: tabular-nums; font-weight: 500; }
.kurs__name { font-family: var(--schrift-headline); font-size: 1.375rem; line-height: 1.2; color: var(--vg-titel); }
.kurs__platz { font-size: var(--groesse-klein); color: var(--vg-2); }
.kurs__platz--voll { color: var(--farbe-akzent-text); }
@media (max-width: 899px) {
  .woche { grid-template-columns: 1fr; }
  .tag, .tag + .tag { border-right: 0; border-bottom: 1px solid var(--linie-akt); padding: var(--raum-4) 0 var(--raum-5); display: grid; grid-template-columns: 7rem 1fr; }
  .tag h2 { margin: 0; }
}
.kursarten { grid-column: 1 / -1; margin-top: var(--raum-sektion); }
.kursart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); padding-block: var(--raum-7); border-top: 1px solid var(--linie-akt); align-items: baseline; }
.kursart h2 { grid-column: 1 / 6; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.kursart p { grid-column: 6 / 10; }
.kursart dl { grid-column: 10 / 13; font-size: var(--groesse-klein); display: grid; gap: var(--raum-2); color: var(--vg-2); }
.kursart dd { margin: 0; color: var(--vg); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .kursart h2, .kursart p, .kursart dl { grid-column: 1 / -1; margin-top: var(--raum-3); } }

/* ---------- Praxis: Räume mit stehendem Bild (split-screen-sticky-seiten, Variante bild) ---------- */
.raeume .raster { align-items: start; }
.raeume__bild { grid-column: 1 / 7; position: sticky; top: calc(var(--kopf-h) + var(--raum-6)); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf-h) - 2 * var(--raum-6)); border-radius: var(--radius-gross); overflow: hidden; background: var(--farbe-flaeche); }
.raeume__bild > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dauer-m) var(--ease-aus), clip-path 0s var(--dauer-m); clip-path: inset(100% 0 0 0); }
.raeume__bild > .ist-aktiv { opacity: 1; clip-path: inset(0); z-index: 1; transition: opacity var(--dauer-xs) linear, clip-path var(--dauer-xxl) var(--ease-bild); }
.raeume__liste { grid-column: 8 / 13; }
.raum { min-height: 62svh; display: grid; align-content: center; gap: var(--raum-4); padding-block: var(--raum-7); }
.raum:first-child { min-height: 50svh; align-content: start; padding-top: var(--raum-8); }
.raum h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); transition: color var(--dauer-l) var(--ease); }
.raum p { color: var(--vg-2); max-width: 36ch; font-size: var(--groesse-gross); }
.raum__klein-bild { display: none; }
.js .raum:not(.ist-aktiv) h2 { color: var(--vg-2); }
@media (max-width: 899px) {
  .raeume__bild { display: none; }
  .raeume__liste { grid-column: 1 / -1; }
  .raum, .raum:first-child { min-height: 0; padding-block: var(--raum-6); }
  .raum__klein-bild { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-gross); overflow: hidden; }
  .raum__klein-bild > * { width: 100%; height: 100%; object-fit: cover; }
  .js .raum:not(.ist-aktiv) h2 { color: var(--vg-titel); }
}

/* Team ohne Gesichter: Kacheln mit Initialen bis zu echten Fotos mit Einwilligung (team-ueber-mich-layout, raster) */
.team .raster { row-gap: var(--raum-6); }
.team__kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--raum-5); margin-bottom: var(--raum-6); }
.filter { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.filter button { min-height: 44px; padding: 0 var(--raum-4); border: 1px solid var(--linie-akt); border-radius: var(--radius-button); background: transparent; color: var(--vg); cursor: pointer; font-size: var(--groesse-klein); transition: background-color var(--dauer-xs) var(--ease), color var(--dauer-xs) var(--ease); }
.filter button[aria-pressed="true"] { background: var(--vg-titel); color: var(--hg); border-color: var(--vg-titel); }
.personen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-8) var(--raster-spalt); }
.person { display: grid; gap: var(--raum-2); align-content: start; }
.person[hidden] { display: none; }
.kachel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-gross); overflow: hidden; background: var(--ton, var(--farbe-flaeche)); display: grid; place-items: center; margin-bottom: var(--raum-3); }
.kachel span { font-family: var(--schrift-headline); font-size: clamp(3rem, 2rem + 4vw, 6rem); letter-spacing: -0.03em; color: var(--farbe-marke-tief); opacity: .85; }
.person h3 { font-size: 1.5rem; }
.person__rolle { color: var(--vg-2); font-size: var(--groesse-klein); }
.person__mehr { font-size: var(--groesse-klein); }
@media (max-width: 899px) { .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .personen { grid-template-columns: 1fr; } .kachel { aspect-ratio: 3 / 2; } }

/* Stimmen: ein großes Zitat mit Echtheitshinweis (testimonials-neu-gedacht zitat, bewertungsprofil-mit-echtheitshinweis pille) */
.stimme .raster { row-gap: var(--raum-6); }
.stimme blockquote { grid-column: 1 / 11; font-family: var(--schrift-headline); font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); line-height: 1.18; letter-spacing: -0.012em; color: var(--vg-titel); text-wrap: balance; }
.stimme blockquote p::before { content: '„'; }
.stimme blockquote p::after { content: '“'; }
.stimme figcaption { grid-column: 1 / 7; color: var(--vg-2); }
.stimme__profil { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-5); padding-top: var(--raum-5); border-top: 1px solid var(--linie-akt); font-size: var(--groesse-klein); color: var(--vg-2); }
.pille { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; padding: 0 var(--raum-4); border: 1px solid var(--linie-akt); border-radius: var(--radius-button); color: var(--vg); font-variant-numeric: tabular-nums; }
.pille__sterne { letter-spacing: .08em; color: var(--farbe-marke); }

/* ---------- Termin und Kontakt ---------- */
.wege { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster-spalt); }
.weg { display: grid; gap: var(--raum-5); align-content: start; padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-gross); background: var(--farbe-karte); box-shadow: inset 0 0 0 1px var(--farbe-linie); min-height: 100%; scroll-margin-top: calc(var(--kopf-h) + var(--raum-5)); }
.weg--tel { background: var(--farbe-marke); color: var(--farbe-auf-marke); box-shadow: none; --vg-titel: var(--farbe-auf-marke); --vg-2: var(--farbe-auf-marke-2); --fokus-akt: var(--farbe-akzent); }
.weg h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.weg__nummer { font-family: var(--schrift-headline); font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; font-variant-numeric: tabular-nums; color: var(--farbe-auf-marke); }
.weg--tel .status { color: var(--farbe-auf-marke-2); font-size: var(--groesse-text); }
.weg__zeiten { font-size: var(--groesse-klein); color: var(--farbe-auf-marke-2); }
@media (max-width: 899px) { .wege { grid-template-columns: 1fr; } }
.buchung { position: relative; display: grid; gap: var(--raum-4); }
.buchung__daten { color: var(--vg-2); font-size: var(--groesse-klein); max-width: 46ch; }
.buchung__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4) var(--raum-5); }
.buchung iframe { width: 100%; height: 520px; border: 0; border-radius: var(--radius-klein); background: var(--farbe-grund); }
.buchung.ist-geladen .buchung__platzhalter { display: none; }
.buchung__status { font-size: var(--groesse-klein); color: var(--vg-2); }
.haken { display: inline-flex; align-items: center; gap: var(--raum-3); min-height: 44px; cursor: pointer; font-size: var(--groesse-klein); }
.haken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.haken__kasten { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--farbe-feld); display: grid; place-items: center; transition: background-color var(--dauer-xs) var(--ease); }
.haken__kasten svg { width: 14px; height: 14px; fill: none; stroke: var(--farbe-auf-marke); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dauer-l) var(--ease-ein); }
.haken input:checked + .haken__kasten { background: var(--farbe-marke); box-shadow: none; }
.haken input:checked + .haken__kasten svg { stroke-dashoffset: 0; }
.haken input:focus-visible + .haken__kasten { outline: 2px solid var(--fokus-akt); outline-offset: 3px; }

.zeiten-tabelle { width: 100%; font-size: var(--groesse-text); }
.zeiten-tabelle th, .zeiten-tabelle td { padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-akt); text-align: left; font-weight: 400; }
.zeiten-tabelle thead th { font-size: var(--groesse-klein); color: var(--vg-2); }
.zeiten-tabelle tr[data-heute] th, .zeiten-tabelle tr[data-heute] td { font-weight: 500; color: var(--vg-titel); }
.zeiten-tabelle tr[data-heute] th::after { content: ' heute'; font-size: var(--groesse-klein); color: var(--farbe-marke); font-weight: 400; }
.sonder { margin-top: var(--raum-4); font-size: var(--groesse-klein); }
.sonder__marke { padding: 0 .5em; border-radius: 999px; background: var(--farbe-akzent); color: var(--farbe-akzent-text); font-weight: 500; margin-right: var(--raum-2); }
.zeiten .raster, .kontakt .raster { row-gap: var(--raum-6); }
.zeiten h2, .kontakt h2 { grid-column: 1 / 5; }
.zeiten__inhalt { grid-column: 6 / 13; }
@media (max-width: 899px) { .zeiten h2, .kontakt h2, .zeiten__inhalt { grid-column: 1 / -1; } }

.formular { grid-column: 6 / 13; display: grid; gap: var(--raum-feld); max-width: 560px; }
.feld { display: grid; gap: var(--raum-2); }
.feld label, .feld legend { font-weight: 500; font-size: var(--groesse-klein); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: var(--raum-3) var(--raum-4); border: 1px solid var(--farbe-feld); border-radius: var(--radius-klein); background: var(--farbe-karte); color: var(--farbe-text); transition: border-color var(--dauer-xs) var(--ease), box-shadow var(--dauer-xs) var(--ease); }
.feld textarea { min-height: 112px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--fokus-akt); outline-offset: 2px; }
.feld.hat-fehler input { border-color: var(--farbe-fehler); box-shadow: inset 0 0 0 1px var(--farbe-fehler); }
.feld__fehler { color: var(--farbe-fehler); font-size: var(--groesse-klein); min-height: 0; }
.feld__fehler span { display: block; animation: auftauchen var(--dauer-l) var(--ease-ein); }
.feld__hinweis, .feld__frei { font-size: var(--groesse-klein); color: var(--vg-2); font-weight: 400; }
.feld--wahl { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }
.feld--wahl legend { width: 100%; margin-bottom: var(--raum-2); }
.wahl { display: inline-flex; align-items: center; gap: var(--raum-3); min-height: 44px; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl__kreis { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--farbe-feld); transition: box-shadow var(--dauer-l) var(--ease-ein); }
.wahl input:checked + .wahl__kreis { box-shadow: inset 0 0 0 7px var(--farbe-marke); }
.wahl input:focus-visible + .wahl__kreis { outline: 2px solid var(--fokus-akt); outline-offset: 3px; }
.formular__recht { font-size: var(--groesse-klein); color: var(--vg-2); }
.formular .knopf { justify-self: start; }
.formular__meldung { min-height: 1.6em; font-size: var(--groesse-klein); }
.formular__meldung.ist-fehler { color: var(--farbe-fehler); }
.formular__meldung.ist-ok { color: var(--farbe-erfolg); }
@media (max-width: 899px) { .formular { grid-column: 1 / -1; } }

.anfahrt .raster { row-gap: var(--raum-6); align-items: start; }
.anfahrt h2 { grid-column: 1 / 5; }
.karte { grid-column: 1 / 8; position: relative; aspect-ratio: 6 / 5; border-radius: var(--radius-gross); overflow: hidden; background: var(--farbe-flaeche-hell); }
.karte__bild { width: 100%; height: 100%; }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte__leiste { position: absolute; left: var(--raum-4); right: var(--raum-4); bottom: var(--raum-4); display: flex; gap: var(--raum-4); align-items: center; padding: var(--raum-3) var(--raum-4); border-radius: var(--radius-klein); background: var(--farbe-karte); color: var(--farbe-text); font-size: .875rem; box-shadow: var(--schatten-karte); }
.karte.ist-geladen .karte__leiste { display: none; }
.anfahrt__text { grid-column: 9 / 13; display: grid; gap: var(--raum-5); align-content: start; }
.anfahrt__adresse { font-family: var(--schrift-headline); font-size: 1.75rem; line-height: 1.25; color: var(--vg-titel); }
.wege-liste { display: grid; border-top: 1px solid var(--linie-akt); }
.wege-liste div { padding: var(--raum-4) 0; border-bottom: 1px solid var(--linie-akt); display: grid; gap: var(--raum-1); }
.wege-liste dt { font-weight: 500; }
.wege-liste dd { margin: 0; color: var(--vg-2); }
@media (max-width: 899px) { .anfahrt h2, .karte, .anfahrt__text { grid-column: 1 / -1; } .karte { aspect-ratio: 4 / 3; } .karte__leiste { flex-direction: column; align-items: start; } }

/* ---------- Textseiten und Fehlerseite ---------- */
.text-seite { width: min(720px, 100vw - 2 * var(--raster-rand)); margin-inline: auto; padding-block: clamp(40px, 7vh, 88px) var(--raum-sektion); display: grid; gap: var(--raum-4); }
.text-seite .pfad { margin-bottom: var(--raum-5); }
.text-seite h1 { margin-bottom: var(--raum-5); }
.text-seite h2 { font-size: 1.5rem; margin-top: var(--raum-6); }
.text-seite ul { list-style: disc; padding-left: 1.2em; display: grid; gap: var(--raum-2); }
.fehler { min-height: 70svh; display: grid; place-content: center start; gap: var(--raum-6); width: var(--inhalt); margin-inline: auto; padding-block: var(--raum-sektion); }
.fehler h1 { font-size: var(--groesse-wort); line-height: 1; letter-spacing: -0.03em; max-width: 12ch; }
.fehler p { font-size: var(--groesse-gross); color: var(--vg-2); }
.fehler__wege { display: flex; flex-wrap: wrap; gap: var(--raum-4) var(--raum-6); align-items: center; }

/* ---------- Fuß ---------- */
.fuss { position: relative; z-index: 2; background: var(--farbe-marke); color: var(--farbe-auf-marke); padding-top: var(--raum-sektion);
  --vg-titel: var(--farbe-auf-marke); --vg-2: var(--farbe-auf-marke-2); --linie-akt: rgb(245 247 247 / .22); --fokus-akt: var(--farbe-akzent); }
.fuss__innen { width: var(--inhalt); margin-inline: auto; display: grid; gap: var(--raum-9); }
.fuss__gross { display: grid; grid-template-columns: 1fr auto; gap: var(--raum-5) var(--raster-spalt); align-items: end; }
.fuss__satz { grid-column: 1 / -1; font-family: var(--schrift-headline); font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.fuss__tel { font-family: var(--schrift-headline); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); text-decoration: none; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fuss__status { grid-column: 1; color: var(--farbe-auf-marke-2); }
.fuss__gross .knopf { grid-column: 2; grid-row: 2 / 4; }
.fuss__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); padding-top: var(--raum-6); border-top: 1px solid var(--linie-akt); font-size: var(--groesse-klein); color: var(--farbe-auf-marke-2); }
.fuss__spalten > div { display: grid; gap: var(--raum-2); align-content: start; }
.fuss__titel { color: var(--farbe-auf-marke); font-weight: 500; }
.fuss__spalten a { color: var(--farbe-auf-marke); }
.fuss__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--raum-3) var(--raum-6); font-size: var(--groesse-klein); color: var(--farbe-auf-marke-2); }
.fuss__leiste ul { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }
.fuss__leiste a { color: var(--farbe-auf-marke); display: inline-flex; min-height: 44px; align-items: center; }
.oker { display: block; width: 100%; height: clamp(140px, 15.3vw, 220px); margin-top: calc(-1 * var(--raum-6)); overflow: visible; }
.oker path { fill: none; }
.oker__bett { stroke: rgb(245 247 247 / .07); stroke-width: 34; stroke-linecap: round; }
.oker__lauf { stroke: var(--farbe-auf-marke-2); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.oker__punkt circle { fill: var(--farbe-auf-marke); }
.oker__punkt--bus circle { fill: var(--farbe-auf-marke-2); }
.oker__hof { fill: rgb(255 199 118 / .22) !important; }
.oker__punkt:not(.oker__punkt--bus) circle:not(.oker__hof) { fill: var(--farbe-akzent); }
.oker text { font-family: var(--schrift-text); font-size: 15px; fill: var(--farbe-auf-marke-2); text-anchor: middle; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .oker__lauf { animation: lauf-zeichnen linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@media (max-width: 899px) { .fuss__spalten { grid-template-columns: 1fr; gap: var(--raum-6); } .fuss__gross { grid-template-columns: 1fr; } .fuss__gross .knopf { grid-column: 1; grid-row: auto; justify-self: start; } }

/* Mobile Kontaktleiste (mobile-bottom-navigation, kontakt) */
.leiste-mobil { display: none; }
@media (max-width: 699px) {
  .leiste-mobil { position: fixed; left: var(--raum-3); right: var(--raum-3); bottom: max(var(--raum-3), env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--raum-1); padding: var(--raum-1); border-radius: var(--radius-button); background: var(--farbe-marke-tief); box-shadow: 0 10px 30px -10px rgb(0 40 38 / .5); transition: translate var(--dauer-l) var(--ease), opacity var(--dauer-m) var(--ease); view-transition-name: leiste; }
  .leiste-mobil a { display: flex; align-items: center; justify-content: center; gap: var(--raum-2); min-height: 48px; border-radius: var(--radius-button); color: var(--farbe-auf-marke); text-decoration: none; font-size: .9375rem; font-weight: 500; }
  .leiste-mobil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
  .leiste-mobil__haupt { background: var(--farbe-grund); color: var(--farbe-marke-tief) !important; }
  .leiste-mobil :focus-visible { outline-color: var(--farbe-akzent); }
  .leiste-mobil.ist-weg { translate: 0 calc(100% + 24px); opacity: 0; pointer-events: none; }
  body { padding-bottom: 88px; }
}

/* ---------- Seitenwechsel (vt-cross-document-mpa + richtungsbewusste-uebergaenge) ----------
   Typen setzt seite.js im pagereveal: tiefer (Übersicht → Detail), hoeher (zurück nach oben), vor/rueck (gleiche Ebene). */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: var(--dauer-xl); }
::view-transition-old(root) { animation: vt-raus calc(var(--dauer-xl) * var(--aus-faktor)) var(--ease-aus) both; }
::view-transition-new(root) { animation: vt-rein var(--dauer-xl) var(--ease-ein) both; }
::view-transition-old(kopf), ::view-transition-new(kopf), ::view-transition-old(leiste), ::view-transition-new(leiste) { animation: none; }
::view-transition-group(nav-strich) { animation-duration: var(--dauer-xl); animation-timing-function: var(--ease); }
::view-transition-group(held) { animation-duration: var(--dauer-xxl); animation-timing-function: var(--ease-bild); }
::view-transition-old(held), ::view-transition-new(held) { height: 100%; object-fit: cover; overflow: clip; }
::view-transition-image-pair(held) { isolation: auto; }
::view-transition-new(held) { animation: none; }
::view-transition-new(held):only-child { animation: vt-rein var(--dauer-xl) var(--ease-ein) both; }
::view-transition-old(held):only-child { animation: vt-raus calc(var(--dauer-xl) * var(--aus-faktor)) var(--ease-aus) both; }
::view-transition-old(held) { animation: vt-aus var(--dauer-l) var(--ease-aus) both; }
/* Gerichteter Wisch mit Uferkante: die neue Seite schiebt sich deckend über die alte (keine zwei Textebenen übereinander),
   die alte weicht ein Stück zurück. vor/rueck seitlich, tiefer von unten, hoeher von oben. */
html:active-view-transition-type(vor, rueck, tiefer, hoeher)::view-transition-group(root) { animation-duration: var(--dauer-xxl); }
html:active-view-transition-type(vor, rueck, tiefer, hoeher)::view-transition-new(root) { animation: vt-wisch var(--dauer-xxl) var(--ease-bild) both; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html:active-view-transition-type(vor)::view-transition-new(root) { --von: 0% 0; --bis: 100% 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M500 0C470 18 530 34 492 52S468 86 505 100H1000V0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M500 0C470 18 530 34 492 52S468 86 505 100H1000V0Z'/%3E%3C/svg%3E"); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; }
html:active-view-transition-type(rueck)::view-transition-new(root) { --von: 100% 0; --bis: 0% 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M500 0C530 18 470 34 508 52S532 86 495 100H0V0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M500 0C530 18 470 34 508 52S532 86 495 100H0V0Z'/%3E%3C/svg%3E"); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; }
html:active-view-transition-type(tiefer)::view-transition-new(root) { --von: 0 0%; --bis: 0 100%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 500C18 470 34 530 52 492S86 468 100 505V1000H0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 500C18 470 34 530 52 492S86 468 100 505V1000H0Z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 250%; mask-size: 100% 250%; }
html:active-view-transition-type(hoeher)::view-transition-new(root) { --von: 0 100%; --bis: 0 0%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 500C18 530 34 470 52 508S86 532 100 495V0H0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 500C18 530 34 470 52 508S86 532 100 495V0H0Z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 250%; mask-size: 100% 250%; }
html:active-view-transition-type(vor)::view-transition-old(root) { animation: vt-weg-links var(--dauer-xxl) var(--ease-bild) both; }
html:active-view-transition-type(rueck)::view-transition-old(root) { animation: vt-weg-rechts var(--dauer-xxl) var(--ease-bild) both; }
html:active-view-transition-type(tiefer)::view-transition-old(root) { animation: vt-weg-oben var(--dauer-xxl) var(--ease-bild) both; }
html:active-view-transition-type(hoeher)::view-transition-old(root) { animation: vt-weg-unten var(--dauer-xxl) var(--ease-bild) both; }
@keyframes vt-wisch { from { -webkit-mask-position: var(--von); mask-position: var(--von); } to { -webkit-mask-position: var(--bis); mask-position: var(--bis); } }
@keyframes vt-weg-links { to { transform: translateX(-6%); filter: brightness(.9); } }
@keyframes vt-weg-rechts { to { transform: translateX(6%); filter: brightness(.9); } }
@keyframes vt-weg-oben { to { transform: translateY(-5%); filter: brightness(.9); } }
@keyframes vt-weg-unten { to { transform: translateY(5%); filter: brightness(.9); } }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; } }
@keyframes vt-aus { to { opacity: 0; } }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .vorschau__bild, .raeume__bild > * { clip-path: none !important; transition: opacity 150ms linear !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  ::view-transition-old(root) { animation: vt-raus 120ms linear both !important; }
  ::view-transition-new(root) { animation: vt-rein 150ms linear both !important; }
  .menue[open], .menue.ist-zu { transition: none; }
}

/* ---------- Kontrastmodus ---------- */
@media (forced-colors: active) {
  .knopf, .kopf__menue, .filter button, .pille, .weg, .hc, .karte__leiste, .leiste-mobil, .eintrag__zeichen, .fuss { border: 1px solid CanvasText; }
  .nav__strich, .flusslauf__lauf, .schritt.ist-erreicht .schritt__punkt, .status__punkt { background: Highlight; forced-color-adjust: none; }
  .filter button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .held__schleier, .oker { display: block; width: 100%; height: clamp(140px, 15.3vw, 220px); margin-top: calc(-1 * var(--raum-6)); overflow: visible; }
.oker path { fill: none; }
.oker__bett { stroke: rgb(245 247 247 / .07); stroke-width: 34; stroke-linecap: round; }
.oker__lauf { stroke: var(--farbe-auf-marke-2); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.oker__punkt circle { fill: var(--farbe-auf-marke); }
.oker__punkt--bus circle { fill: var(--farbe-auf-marke-2); }
.oker__hof { fill: rgb(255 199 118 / .22) !important; }
.oker__punkt:not(.oker__punkt--bus) circle:not(.oker__hof) { fill: var(--farbe-akzent); }
.oker text { font-family: var(--schrift-text); font-size: 15px; fill: var(--farbe-auf-marke-2); text-anchor: middle; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .oker__lauf { animation: lauf-zeichnen linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
  .platzhalter-flaeche, .kachel { border: 1px solid CanvasText; }
  .ufer::before, .ufer::after { display: none; }
  .flusslauf__lauf { stroke: CanvasText; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .menue, .leiste-mobil, .held__bild, .hilfe__vorschau, .karte__leiste, .buchung, .filter, [popover], [data-fundus-beispiel], .oker { display: block; width: 100%; height: clamp(140px, 15.3vw, 220px); margin-top: calc(-1 * var(--raum-6)); overflow: visible; }
.oker path { fill: none; }
.oker__bett { stroke: rgb(245 247 247 / .07); stroke-width: 34; stroke-linecap: round; }
.oker__lauf { stroke: var(--farbe-auf-marke-2); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.oker__punkt circle { fill: var(--farbe-auf-marke); }
.oker__punkt--bus circle { fill: var(--farbe-auf-marke-2); }
.oker__hof { fill: rgb(255 199 118 / .22) !important; }
.oker__punkt:not(.oker__punkt--bus) circle:not(.oker__hof) { fill: var(--farbe-akzent); }
.oker text { font-family: var(--schrift-text); font-size: 15px; fill: var(--farbe-auf-marke-2); text-anchor: middle; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .oker__lauf { animation: lauf-zeichnen linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
  .ist-buehne .held__spur { height: auto; }
  .kapitel { padding-block: 18pt; }
  body { background: #fff; color: #000; }
}