/* NEUreut Physio — Stylesheet
   Entwurf VALO Studio · 03.09.2026 · Farbwelt gewechselt 15.09.2026
   Farbwelt: Eisblau & Weiß, Licht-Fassung (Entscheidung Jan, 15.09.2026 abends, Blatt B3 der sechsten Runde;
   Herleitung und Vergleichsblätter in dokumente/Farbwechsel-2026-09-15.md). Licht heißt: keine dunkle
   Vollfläche mehr. Kopf und Fahrt tragen helle Träger mit dunkler Schrift, Karriere, Kontakt und Fuß sind
   Kapitel in --warm, Knöpfe, Reiter und Ankündigungszeile stehen in --creme.
   Ein Wechsel ist weiterhin ein Austausch der sechs Werte in :root; danach
   python3 werkzeuge/kontrast.py --port 8741 laufen lassen, das liest die Werte von hier.
   Gerechnet: Tinte auf Weiß 9,97:1 · Akzent auf Weiß 5,30:1 · gedämpft 6,03:1 · Tinte auf Eisblau 9,05:1 · Tinte auf Signal 7,35:1 · Tinte auf Warm 8,56:1 */

:root{
  /* --- Farbwelt · Eisblau & Weiß, Licht-Fassung --- */
  --grund:#FFFFFF;
  --dunkel:#2A4655;
  --akzent:#1F7398;
  --flaeche:#EEF5F9;
  --gedaempft:#4F6673;
  /* Signalfläche — nur als Fläche unter dunkler Schrift, nie als Schriftfarbe (Muster I4).
     Tinte darauf: 7,35:1 */
  --signal:#BFE3F2;
  /* Licht-Fassung (15.09.2026): drei weitere Rollen. --warm trägt Karriere, Kontakt und Fuß (Tinte darauf 8,56:1),
     --creme trägt gefüllte Knöpfe, Randreiter und Ankündigungszeile (Tinte darauf 9,3:1), --rand-knopf ist
     die Kante der Creme-Knöpfe auf Weiß. */
  --warm:#E6EFF5;
  --creme:#F6F2EA;
  --rand-knopf:color-mix(in srgb, var(--dunkel) 32%, var(--creme));
  /* Ableitungen */
  --linie:color-mix(in srgb, var(--dunkel) 14%, transparent);
  --linie-stark:color-mix(in srgb, var(--dunkel) 26%, transparent);
  /* Tiefe: seit der Licht-Fassung ein heller Träger, eine Stufe heller als das Papier. Trägt dunkle
     Schrift auf Film und Foto, ohne dass das Motiv zugedeckt wird. Beim Farbwechsel folgt der Wert dem Grund. */
  --tiefe:color-mix(in srgb, var(--grund) 94%, #fff);

  --schrift-kopf:Fraunces, Georgia, "Times New Roman", serif;
  --schrift-text:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rand:clamp(1.15rem, 4.5vw, 3.5rem);
  --breit:1240px;
  --mittig:960px;
  /* Kante statt Rundung (12.09.2026, Entscheidung Jan „A · Kante"): 3 px lesen als
     geschnitten, nicht als Framework-Voreinstellung (J-Verräter 8, 15). */
  --radius:3px;
  --luft:clamp(3.5rem, 9vw, 8rem);
  /* Größenleiter für Abstände innerhalb eines Abschnitts (Muster K, 10.09.2026).
     Drei Stufen mit klarem Abstand zueinander statt zehn ähnlicher Inline-Werte.
     Verhältnis 1 : 2,3 : 4 — dadurch ist jede Stufe als eigene Stufe lesbar. */
  --eng:.7rem;
  --mittel:1.6rem;
  --weit:2.8rem;
}

/* Zurücksetzen — bewusst mit :where(), damit die Spezifität 0 bleibt
   und spätere Regeln wie .kopf{position:sticky} nicht ausgestochen werden (Lesson D32). */
:where(*){box-sizing:border-box}
:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,video,svg){display:block; max-width:100%}
:where(a){color:inherit}
:where(button,input,select,textarea){font:inherit; color:inherit}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--grund); color:var(--dunkel);
  font-family:var(--schrift-text); font-size:clamp(1rem, .96rem + .18vw, 1.09rem);
  line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Bausteine ---------- */
.mitte{width:100%; max-width:var(--breit); margin-inline:auto; padding-inline:var(--rand)}
.schmal{max-width:var(--mittig)}
.abschnitt{padding-block:var(--luft)}
.abschnitt--knapp{padding-block:calc(var(--luft) * .55)}
.abschnitt--oben0{padding-top:0}
.trennlinie{border-top:1px solid var(--linie)}

h1,h2,h3,.serif{font-family:var(--schrift-kopf); font-weight:500; line-height:1.1; letter-spacing:-.018em; text-wrap:balance}
h1{font-size:clamp(2.5rem, 6.2vw, 5.1rem)}
h2{font-size:clamp(1.95rem, 4vw, 3.1rem)}
/* Größenleiter (15.09.2026, K2): fünf Stufen bei 1440 px, 72 / 50 / 36 / 24,8 / 17,4 px,
   jede mindestens Faktor 1,39 von der nächsten. Alle Zwischentitel und Leitabsätze teilen
   sich die vierte Stufe; vorher lagen sechs Rollen zwischen 20 und 23 px. */
h3{font-size:clamp(1.25rem, 1.7vw, 1.55rem); line-height:1.22}
p{max-width:64ch; text-wrap:pretty}
.gross{font-size:clamp(1.25rem, 1.7vw, 1.55rem); line-height:1.45}
.klein{font-size:.775rem; letter-spacing:.17em; text-transform:uppercase; color:var(--gedaempft); font-weight:500}
.leise{color:var(--gedaempft)}
strong,b{font-weight:600}

a.text{color:var(--akzent); text-underline-offset:.22em; text-decoration-thickness:1px}
a.text:hover{text-decoration-thickness:2px}

/* ---------- Knöpfe ----------
   Umbau 12.09.2026 (Jans Wahl „A · Kante"). Vorher fünf Formen im Umlauf — Pille mit Rand,
   Pille dunkel, Pille creme, Pille gold, dazu die Griffe am Rand —, alle mit Pfeil im Knopf
   und alle mit Hover-Lift: J-Verräter 8, 9 und 10 auf einmal.
   Jetzt EINE Form, geschnitten statt gerundet, mit drei Füllungen für drei Gründe.
   Beim Überfahren läuft die Füllung von unten hoch; nichts hebt ab, nichts schiebt sich.
   Der Pfeil ist raus: was passiert, sagt das Wort.
   Versal-Fassung seit 15.09.2026 (Entscheidung Jan, nach Vergleich dreier Fassungen am Bild):
   0,8 rem Großbuchstaben, 0,13 em gesperrt, 1,5 px Kante ohne Rundung. Karten, Bildfelder und
   Eingabefelder behalten --radius; in der Leiste gilt .nav .knopf (kleiner, enger). */
.knopf{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  padding:1.05rem 1.75rem; border-radius:0;
  border:1.5px solid var(--dunkel); background:none; color:var(--dunkel);
  transition:color .32s;
}
.knopf::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0; z-index:-1;
  background:var(--dunkel); transition:height .32s cubic-bezier(.2,.7,.3,1);
}
.knopf:hover,.knopf:focus-visible{color:var(--grund)}
.knopf:hover::before,.knopf:focus-visible::before{height:100%}
/* Gefüllt: dieselbe Bewegung, nur andersherum — die Gegenfarbe läuft hoch. */
/* Gefüllt heißt seit der Licht-Fassung: Creme mit gerechneter Kante, beim Überfahren läuft Eisblau hoch. */
.knopf--voll{background:var(--creme); border-color:var(--rand-knopf); color:var(--dunkel)}
.knopf--voll::before{background:var(--signal)}
.knopf--voll:hover,.knopf--voll:focus-visible{color:var(--dunkel); border-color:var(--signal)}
/* Hell: der erste Knopf im Kopf. Seit 15.09.2026 spät in Hellblau, damit die zwei Wege eine Reihenfolge haben (ein Signalknopf je Abschnitt, I4). */
.knopf--hell{background:var(--signal); border-color:var(--signal); color:var(--dunkel)}
.knopf--hell::before{background:var(--creme)}
.knopf--hell:hover,.knopf--hell:focus-visible{color:var(--dunkel); border-color:var(--creme)}
/* Signalknopf: höchstens einer je Abschnitt (Muster I4) */
.knopf--signal{background:var(--signal); border-color:var(--signal); color:var(--dunkel); font-weight:600}
.knopf--signal::before{background:var(--dunkel)}
.knopf--signal:hover,.knopf--signal:focus-visible{color:var(--signal)}
/* Die Umriss-Sonderregeln für dunkle Flächen sind mit der Licht-Fassung entfallen (15.09.2026): es gibt keine mehr. */
@media (prefers-reduced-motion:reduce){
  .knopf::before{transition:none}
}

/* ---------- Kopfzeile ---------- */
.infozeile{
  background:var(--creme); color:var(--dunkel);
  font-size:.8rem; letter-spacing:.02em;
  display:flex; gap:2.2rem; justify-content:center; flex-wrap:wrap;
  padding:.55rem var(--rand);
}
.infozeile b{color:var(--dunkel); font-weight:600}
@media(max-width:820px){
  .infozeile{gap:1.2rem; font-size:.76rem; padding-block:.45rem}
  .infozeile span:nth-child(n+2){display:none}
}

.kopf{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .4s, transform .45s cubic-bezier(.4,0,.2,1);
}
.kopf.kopf--geraendert{border-bottom-color:var(--linie)}
.kopf.kopf--weg{transform:translateY(-102%)}
.kopf__innen{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem}
.marke{display:flex; align-items:center; gap:.62rem; text-decoration:none; flex:none}
.marke svg{width:34px; height:34px; flex:none}
.marke__wort{font-family:var(--schrift-kopf); font-size:1.2rem; line-height:1; letter-spacing:-.02em}
.marke__wort b{font-weight:700}
.marke__wort span{font-weight:400}
.marke__zusatz{display:block; font-family:var(--schrift-text); font-size:.5rem; letter-spacing:.24em; font-weight:600; color:var(--akzent); margin-top:.3rem}

.nav{display:flex; align-items:center; gap:.2rem}
.nav a{
  text-decoration:none; font-size:.9rem; padding:.5rem .62rem; border-radius:2px; white-space:nowrap;
  transition:background .25s;
}
.nav a:not(.knopf):hover{background:var(--flaeche)}
.nav a[aria-current=page]{color:var(--akzent)}
/* Telefonnummer in der Leiste (12.09.2026, Mechanik aus Bogomolets Clinic). Die Fuge davor ist
   deutlich größer als die zwischen den Menüpunkten, damit Nummer und Knopf als eigene Gruppe lesen (K6). */
.nav__tel{font-variant-numeric:tabular-nums; font-weight:500; margin-left:1.4rem; letter-spacing:.01em}
.nav__tel:hover{background:var(--flaeche)}
@media(max-width:1240px) and (min-width:901px){.nav__tel{display:none}}
/* Der Knopf in der Leiste bleibt klein (K6): die Höhe der Leiste bestimmt die Wortmarke, nicht der Knopf.
   Versal-Fassung (15.09.2026): kleiner und enger gesperrt als im Rumpf, sonst läuft die Leiste bei 1280 px über. */
.nav .knopf{margin-left:.35rem; padding:.62rem .95rem; font-size:.72rem; letter-spacing:.1em}
@media(max-width:1320px) and (min-width:901px){.nav a:not(.knopf){padding:.5rem .5rem} .nav__tel{margin-left:.9rem}}

.menuknopf{display:none; border:1.5px solid var(--linie-stark); background:none; border-radius:0; padding:.5rem .9rem; font-size:.9rem; cursor:pointer}
@media(max-width:900px){
  .nav{position:fixed; inset:0 0 auto; top:0; background:var(--grund); flex-direction:column; align-items:stretch;
       padding:5.5rem var(--rand) 2.5rem; gap:.2rem; transform:translateY(-100%); transition:transform .45s cubic-bezier(.4,0,.2,1);
       height:100dvh; overflow-y:auto; z-index:70}
  .nav[data-offen=ja]{transform:none}
  .nav a{font-family:var(--schrift-kopf); font-size:1.7rem; padding:.55rem 0; border-bottom:1px solid var(--linie)}
  .nav .knopf{margin:1.4rem 0 0; font-family:var(--schrift-text); font-size:1rem; border-bottom:1px solid var(--dunkel)}
  .menuknopf{display:block; position:relative; z-index:80}
}

/* ---------- Fuß ---------- */
.fuss{background:var(--warm); color:var(--dunkel); padding-block:calc(var(--luft) * .8) 2.5rem; margin-top:var(--luft)}
/* Endet die Seite mit einem warmen Kapitel, schließt der Fuß ohne Weißstreifen an (15.09.2026, Verbesserungen E). */
main:has(> section:last-of-type.abschnitt--dunkel) + .fuss{margin-top:0; border-top:1px solid color-mix(in srgb, var(--dunkel) 14%, transparent)}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--akzent)}
.fuss__gitter{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem 2rem}
@media(max-width:900px){.fuss__gitter{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fuss__gitter{grid-template-columns:1fr}}
.fuss h4{font-family:var(--schrift-text); font-size:.775rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500; color:var(--gedaempft); margin-bottom:1rem}
.fuss li{margin-bottom:.5rem; font-size:.94rem}
.fuss .marke{color:var(--dunkel)}
.fuss .marke__zusatz{color:var(--akzent)}
.fuss__claim{margin-top:1.1rem; max-width:34ch; font-size:.95rem}  /* zuvor Inline-Style in der Hülle, 15.09.2026 */
.fuss__unten{margin-top:3rem; padding-top:1.5rem; border-top:1px solid color-mix(in srgb, var(--dunkel) 18%, transparent);
             display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; font-size:.83rem;
             color:var(--gedaempft)}
.fuss__hinweis{max-width:70ch; font-size:.83rem; line-height:1.55; color:var(--gedaempft); margin-top:1rem}

/* ---------- Raster ---------- */
.gitter{display:grid; gap:clamp(1.1rem, 2.5vw, 2rem)}
.gitter--2{grid-template-columns:repeat(2,1fr)}
.gitter--3{grid-template-columns:repeat(3,1fr)}
.gitter--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.gitter--3,.gitter--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gitter--2,.gitter--3,.gitter--4{grid-template-columns:1fr}}

.zwei{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem, 5vw, 5rem); align-items:start}
@media(max-width:900px){.zwei{grid-template-columns:minmax(0,1fr); gap:1.6rem}}
.klebt{position:sticky; top:7rem}
@media(max-width:900px){.klebt{position:static}}

/* ---------- Karten ---------- */
.karte{
  background:color-mix(in srgb, var(--flaeche) 55%, transparent);
  border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .4s, transform .5s cubic-bezier(.2,.7,.3,1);
}
.karte:hover{border-color:var(--linie-stark)}
.karte__bild{aspect-ratio:4/3; overflow:hidden; background:var(--flaeche)}
.karte__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.karte:hover .karte__bild img{transform:scale(1.045)}
/* Bildwelt angleichen (15.09.2026, spät): die Renderings sind warm und leicht bräunlich, die Seite lichtes Blau und Weiß.
   Fünf Prozent heller und zwölf Prozent entsättigt setzen alle Inhaltsbilder in dieselbe Luft; der Film im Kopf hat seinen eigenen Filter. */
main img:not(.auftakt__film img){filter:brightness(1.05) saturate(.88) contrast(.98)}
.karte__text{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.karte__text .klein{margin-bottom:.1rem}
.karte__text p{font-size:.96rem; color:var(--gedaempft)}

a.karte{text-decoration:none}
/* Kein Anheben beim Überfahren (J-Verräter 9): die Kante wird deutlich, mehr nicht. */
a.karte:hover{border-color:var(--dunkel)}

/* Bildplatzhalter — sichtbar, solange kein Motiv da ist */
.platz--leer{
  background:repeating-linear-gradient(135deg, var(--flaeche) 0 12px, color-mix(in srgb, var(--flaeche) 60%, var(--grund)) 12px 24px);
  display:grid; place-items:center; color:var(--gedaempft); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:1rem;
}

/* ---------- Stellenband ----------
   Direkt unter dem Kopf, auf Champagner: die Praxis sucht Personal, und das ist nach
   Jans Vorgabe der Hauptzweck der Seite. Champagner kommt sonst nirgends als Fläche vor,
   deshalb liest das Band als eigene Stimme und nicht als weiterer Abschnitt.
   Saphir auf Champagner: 9,12:1. */
.stellenband{background:var(--signal); color:var(--dunkel)}
.stellenband__innen{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3rem 2.4rem;
  align-items:center; padding-block:1.25rem}
.stellenband .klein{grid-column:1; color:color-mix(in srgb, var(--dunkel) 62%, transparent)}
.stellenband__satz{
  grid-column:1; font-family:var(--schrift-kopf); font-weight:500; line-height:1.24; letter-spacing:-.012em;
  font-size:clamp(1.25rem, 1.7vw, 1.55rem); max-width:none;
}
.stellenband__satz span{color:color-mix(in srgb, var(--dunkel) 60%, transparent)}
.stellenband .knopf{grid-column:2; grid-row:1 / 3}
@media(max-width:820px){
  .stellenband__innen{grid-template-columns:minmax(0,1fr); gap:.5rem; padding-block:1.3rem}
  .stellenband .knopf{grid-column:1; grid-row:auto; justify-self:stretch; margin-top:.4rem}
}

/* ---------- Kennzahl ----------
   Umbau 12.09.2026 (Jans Wahl): vorher vier gleich große Zahlen in einer Reihe direkt
   unter dem Auftakt — das Kennzahlenband, nach dem niemand gefragt hat (J-Verräter 20),
   noch dazu in vier gleichen Teilen (J-Verräter 19). Jetzt trägt eine Zahl die Stelle,
   die anderen Angaben stehen im Satz daneben, wo sie zum Argument gehören. */

/* ---------- Fakten ----------
   Für Seiten, auf denen vier Angaben zusammengehören und keine davon die anderen
   überragt (Rezept, Leistungen, Karriere). Vorher standen sie als Vierer-Kennzahlenband
   nebeneinander — vier gleich große Kacheln, von denen zwei gar keine Zahl enthielten
   (J-Verräter 19, 20). Jetzt dieselbe Zeilenform wie die Wege auf der Startseite:
   Angabe links, Satz rechts, Haarlinie dazwischen. Eine Zeilenform auf der ganzen Seite. */
.fakten{border-top:1px solid var(--linie)}
.fakten > div{display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.25rem 1.8rem; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--linie)}
.fakten b{font-family:var(--schrift-kopf); font-weight:500; font-size:clamp(1.25rem, 1.7vw, 1.55rem); line-height:1.22}
.fakten span{font-size:.98rem; color:var(--gedaempft); max-width:60ch}
.abschnitt--dunkel .fakten,
.abschnitt--dunkel .fakten > div{border-color:color-mix(in srgb, var(--dunkel) 18%, transparent)}
.abschnitt--dunkel .fakten span{color:var(--gedaempft)}
@media(max-width:700px){.fakten > div{grid-template-columns:1fr}}

/* ---------- Zitat ---------- */
.zitat{background:var(--flaeche); padding-block:var(--luft)}
/* Das Maß von 22ch gilt der einzelnen großen Stimme, nicht den Stimmen im Feld. */
.zitat > .mitte > blockquote{font-family:var(--schrift-kopf); font-size:clamp(1.5rem,2.6vw,2.25rem); font-weight:500; line-height:1.22; letter-spacing:-.018em; max-width:22ch; margin-top:1.2rem}
.zitat cite{display:block; margin-top:1.6rem; font-style:normal; font-size:.93rem; color:var(--gedaempft)}

/* ---------- Ablauf ---------- */
.ablauf{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.6rem; counter-reset:s}
@media(max-width:900px){.ablauf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ablauf{grid-template-columns:1fr}}
.schritt{counter-increment:s; padding-top:1.4rem; border-top:2px solid var(--linie-stark)}
.schritt::before{content:counter(s,decimal-leading-zero); display:block; font-family:var(--schrift-kopf); font-size:.95rem; color:var(--akzent); margin-bottom:.7rem}
.schritt h3{margin-bottom:.5rem}
.schritt p{font-size:.95rem; color:var(--gedaempft)}

/* ---------- Preistabelle ---------- */
.preise{width:100%; border-collapse:collapse; margin-top:1.5rem}
.preise caption{text-align:left; font-size:.775rem; letter-spacing:.17em; text-transform:uppercase; color:var(--gedaempft); font-weight:500; padding-bottom:.9rem}
.preise th,.preise td{text-align:left; padding:.95rem .8rem; border-bottom:1px solid var(--linie); vertical-align:top}
.preise thead th{font-size:.775rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gedaempft); font-weight:500}
.preise td:last-child,.preise th:last-child{text-align:right; white-space:nowrap}
.preise tbody th{font-weight:600}
.preise tbody th span{display:block; font-weight:400; font-size:.9rem; color:var(--gedaempft); margin-top:.2rem; max-width:44ch}
.preis{font-family:var(--schrift-kopf); font-size:1.15rem; font-weight:500}
@media(max-width:560px){
  .preise th,.preise td{padding:.8rem .4rem}
  .preise th:first-child,.preise td:first-child{padding-left:0}
  .preise th:last-child,.preise td:last-child{padding-right:0}
  .preise thead th{letter-spacing:.06em}
}

/* ---------- Formular ---------- */
.formular{display:grid; gap:1.1rem}
.feld{display:grid; gap:.4rem}
.feld label{font-size:.85rem; font-weight:500}
.feld input,.feld textarea,.feld select{
  border:1px solid var(--linie-stark); background:color-mix(in srgb, var(--grund) 60%, #fff);
  border-radius:3px; padding:.8rem .95rem; font-size:1rem; transition:border-color .25s, box-shadow .25s;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none; border-color:var(--dunkel); box-shadow:0 0 0 3px color-mix(in srgb, var(--dunkel) 12%, transparent);
}
.feld textarea{min-height:8rem; resize:vertical}
.feld--zwei{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.1rem}
@media(max-width:620px){.feld--zwei{grid-template-columns:minmax(0,1fr)}}
.feld > input,.feld > textarea,.feld > select{width:100%; min-width:0}
.hinweis{font-size:.83rem; color:var(--gedaempft); max-width:52ch}
.wahl{display:flex; flex-wrap:wrap; gap:.5rem}
.wahl label{
  border:1px solid var(--linie-stark); border-radius:2px; padding:.5rem 1rem; font-size:.9rem; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.wahl input{position:absolute; opacity:0; pointer-events:none}
.wahl input:checked + span, .wahl label:has(input:checked){background:var(--signal); color:var(--dunkel); border-color:var(--signal)}
.wahl label:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb, var(--dunkel) 18%, transparent)}

/* ---------- Auszeichnung / Merkmale ---------- */
.merkmale{display:grid; gap:.85rem}
/* 15.09.2026: vorher ein Raster auto/1fr, in dem ein <strong> am Zeilenanfang zur eigenen
   Rasterzelle wurde und rechts außen stand, der Text darunter (Karriere, Stelle). Jetzt fließt
   der Punkt als Block, der Strich hängt absolut davor (Lesson D66). */
.merkmale li{position:relative; padding-left:1.5rem; font-size:.98rem}
/* Gedankenstrich statt Deko-Punkt (J-Verräter 7). */
.merkmale li::before{content:"–"; color:var(--akzent); position:absolute; left:0; top:0; line-height:inherit}

/* ---------- Bewegung ---------- */
.z{display:block; overflow:hidden}
.z > span{display:block; padding-bottom:.14em; margin-bottom:-.14em; transform:translateY(104%); transition:transform .95s cubic-bezier(.16,1,.3,1)}
.sichtbar .z > span, .z.sichtbar > span{transform:none}
.z > span:nth-child(1){transition-delay:.02s}

/* Einblendbewegung — seit 12.09.2026 nur noch im Auftakt jeder Seite.
   Vorher trug fast jedes Element der Seite diese Klasse: 406 Stück über zwölf Seiten,
   alle mit derselben Dauer und derselben Richtung. Das ist J-Verräter 29 („alles blendet
   gleich ein") und nach H1 auch das schwächere der beiden Bewegungsbudgets: ein
   orchestrierter Moment schlägt Streusel über die ganze Seite. Geblieben sind die
   Staffelung im Kopfbereich, die Zeilenenthüllung .z in der Schlagzeile, das Wachsen
   .waechst an wenigen Bildern und die Fahrt durch die Räume, die eine Bewegung abbildet
   statt sie zu dekorieren. */
.auf{opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.auf.sichtbar{opacity:1; transform:none}
.auf--2{transition-delay:.09s} .auf--3{transition-delay:.18s} .auf--4{transition-delay:.27s}

.waechst{clip-path:inset(0 11% 0 11% round var(--radius)); transform:scale(1.05); transition:clip-path 1.25s cubic-bezier(.16,1,.3,1), transform 1.25s cubic-bezier(.16,1,.3,1)}
.waechst.sichtbar{clip-path:inset(0 0 0 0 round var(--radius)); transform:none}

html:not(.js) .auf{opacity:1; transform:none}
html:not(.js) .z > span{transform:none}
html:not(.js) .waechst{clip-path:none; transform:none}

@media (prefers-reduced-motion:reduce){
  .auf,.z > span,.waechst{transition:none !important; opacity:1 !important; transform:none !important; clip-path:none !important}
}

/* ================= Kopfbereich mit Video ================= */
.auftakt{position:relative; min-height:min(94svh, 860px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate}
.auftakt__film{position:absolute; inset:0; z-index:-2}
.auftakt__film img,.auftakt__film video{width:100%; height:100%; object-fit:cover}
/* Textträger statt Verlauf über das ganze Bild (Design-Pattern G1) */
.auftakt__schleier{
  position:absolute; inset:0; z-index:-1;
  /* Zwei Ebenen statt einer: der waagerechte Trager sichert den Text (Muster G1),
     der senkrechte Verlauf bindet den Fuss an den nachsten Abschnitt an.
     Werte gegen die echten Bildpixel nachgerechnet, siehe werkzeuge/kontrast.py */
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--dunkel) 84%, transparent) 0%,
      color-mix(in srgb, var(--dunkel) 76%, transparent) 42%,
      color-mix(in srgb, var(--dunkel) 30%, transparent) 76%,
      color-mix(in srgb, var(--dunkel) 18%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--dunkel) 78%, transparent) 0%,
      color-mix(in srgb, var(--dunkel) 52%, transparent) 40%,
      color-mix(in srgb, var(--dunkel) 30%, transparent) 75%,
      color-mix(in srgb, var(--dunkel) 22%, transparent) 100%);
}
@media(max-width:900px){
  /* Auf schmalen Schirmen fuellt der Text die ganze Breite — dann tragt nur der senkrechte Verlauf */
  .auftakt__schleier{background:linear-gradient(to top,
    color-mix(in srgb, var(--dunkel) 90%, transparent) 0%,
    color-mix(in srgb, var(--dunkel) 84%, transparent) 45%,
    color-mix(in srgb, var(--dunkel) 74%, transparent) 100%)}
}
.auftakt__innen{position:relative; color:var(--dunkel); padding-block:clamp(3rem,9vw,6rem); width:100%}
.auftakt h1{color:var(--dunkel); max-width:15ch}
/* Volle Tinte: mit 75 % lag die Zeile auf dem hellen Träger bei 3,31:1 (gemessen 15.09.2026). */
.auftakt .klein{color:var(--dunkel)}
.auftakt .gross{color:color-mix(in srgb, var(--dunkel) 88%, transparent); max-width:46ch; margin-top:1.3rem}

/* Videoband mit drei Clips (12.09.2026, Aufbau nach Marple Physiotherapy, Farbwelt eigen).
   Das Standbild trägt ohne Skript und auf schmalen Schirmen; das Skript legt zwei Videoebenen
   darüber und blendet sie weich durch.

   Umbau 12.09.2026 (Jans Wahl „B · Träger statt Schleier"): vorher lag der Film entfärbt
   unter einer flächigen 76-%-Saphir-Decke — vom Clip blieb blauer Nebel, und es war
   derselbe Schleier über allem (J-Verräter 6). Jetzt bleibt der Film farbig, nur leicht
   zurückgenommen; getragen wird die Schrift von einem schrägen Keil aus Tiefe, der links
   steht und nach rechts ausläuft (G1, E10). Wo Text liegt, ist der Grund gerechnet;
   wo kein Text liegt, sieht man den Film. */
.auftakt--film .auftakt__film img,.auftakt--film .auftakt__video{filter:saturate(.85) contrast(1.02) brightness(1.0)}
.auftakt__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease}
.auftakt__video--da{opacity:1}
/* Die Stops sind nicht geschätzt, sondern gegen den hellsten denkbaren Filmpunkt
   gerechnet: werkzeuge/kontrast.py misst jede Textzeile auf allen drei Clips.
   Bis 50 % der Verlaufsachse trägt der Keil, danach fällt er in 30 % auf null —
   das rechte Drittel des Films bleibt unbedeckt. */
.auftakt--film .auftakt__schleier{background:
  linear-gradient(103deg,
    color-mix(in srgb, var(--tiefe) 94%, transparent) 0%,
    color-mix(in srgb, var(--tiefe) 92%, transparent) 40%,
    color-mix(in srgb, var(--tiefe) 72%, transparent) 52%,
    color-mix(in srgb, var(--tiefe) 22%, transparent) 62%,
    transparent 70%),
  linear-gradient(to top, color-mix(in srgb, var(--tiefe) 60%, transparent) 0%, transparent 30%)}
/* Schmale Schirme: der Text füllt die Breite, dann trägt nur der senkrechte Verlauf —
   oben bleibt trotzdem ein Streifen Film offen. */
@media(max-width:900px){.auftakt--film .auftakt__schleier{background:
  linear-gradient(to top,
    color-mix(in srgb, var(--tiefe) 94%, transparent) 0%,
    color-mix(in srgb, var(--tiefe) 90%, transparent) 46%,
    color-mix(in srgb, var(--tiefe) 62%, transparent) 84%,
    color-mix(in srgb, var(--tiefe) 40%, transparent) 100%)}}
.auftakt--film{align-items:center; min-height:min(92svh, 820px)}
.auftakt--film .auftakt__innen{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
/* Der Filmkopf trägt eine Aussage in zwei Zeilen. Das Maß ist nicht frei gewählt:
   die zweite Zeile darf nicht über die halbe Verlaufsachse des Trägers hinauslaufen,
   sonst steht sie im unbedeckten Teil des Films (K17). */
.auftakt--film h1{max-width:15ch; font-size:clamp(2.4rem,5vw,4.5rem)}
.auftakt--film .gross{max-width:34ch}
/* Knopfpaar (Mechanik aus Memory Clinic): zwei gleich schwere Wege, kein Signalknopf. */
.paar{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.1rem}
.paar .knopf{min-width:14rem; padding-block:1rem; font-size:1.02rem}
@media(max-width:52rem){
  .paar .knopf{flex:1 1 100%; min-width:0}
}

.laufband{position:absolute; left:0; bottom:0; height:2px; background:var(--akzent); width:var(--fortschritt,0%); z-index:2; transition:width .12s linear}

/* ================= Fahrt durch die Räume ================= */
.fahrt{position:relative}
.fahrt__buehne{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center start}
.fahrt__szene{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.fahrt__szene[data-aktiv=ja]{opacity:1}
.fahrt__szene img,.fahrt__szene .platz--leer{width:100%; height:100%; object-fit:cover}
.fahrt__szene::after{
  content:""; position:absolute; inset:0;
  /* Derselbe Träger wie im Kopfbereich (12.09.2026): vorher lag über den Räumen ein
     senkrechter Verlauf, der oben fast durchsichtig war — die Überschrift stand damit
     in der hellsten Zone des Fotos. Jetzt trägt der Keil links den Text, rechts bleibt
     der Raum offen. */
  background:
    linear-gradient(103deg,
      color-mix(in srgb, var(--tiefe) 94%, transparent) 0%,
      color-mix(in srgb, var(--tiefe) 92%, transparent) 42%,
      color-mix(in srgb, var(--tiefe) 55%, transparent) 52%,
      transparent 60%),
    linear-gradient(to top, color-mix(in srgb, var(--tiefe) 55%, transparent) 0%, transparent 26%);
}
@media(max-width:900px){
  .fahrt__szene::after{background:linear-gradient(to top,
    color-mix(in srgb, var(--tiefe) 94%, transparent) 0%,
    color-mix(in srgb, var(--tiefe) 86%, transparent) 50%,
    color-mix(in srgb, var(--tiefe) 50%, transparent) 100%)}
}
/* Breite in rem, nicht in ch: 24ch bezog sich auf die 17-px-Grundschrift und ergab bei 1440 px eine Spalte von 200 px, ein Wort je Zeile (behoben 12.09.2026). */
.fahrt__text{position:relative; z-index:3; color:var(--dunkel); width:100%; max-width:var(--breit); margin-inline:auto; padding-inline:var(--rand)}
.fahrt__text{display:grid}
/* Drei Zeilen, je Raum eine; sie liegen im selben Rasterfeld und blenden mit der Szene. */
.fahrt__zeile{grid-area:1 / 1; opacity:0; transition:opacity .6s ease; pointer-events:none}
.fahrt__zeile[data-aktiv=ja]{opacity:1; pointer-events:auto}
.fahrt__zeile > *{max-width:32rem}
html:not(.js) .fahrt__zeile{opacity:1; grid-area:auto}
html:not(.js) .fahrt__zeile + .fahrt__zeile{margin-top:2rem}
/* Volle Tinte: auf dem hellen Träger lag die Zeile mit 72 % bei 3,84:1 (gemessen 15.09.2026). */
.fahrt__text p.klein{color:var(--dunkel); margin-bottom:.9rem}
.fahrt__text h2{color:var(--dunkel); max-width:15ch}
/* Satz in vollem Creme: bei 85 % lag Raum 1 mit 4,18:1 unter der Schwelle für Kleintext (gemessen 15.09.2026). */
.fahrt__text .satz{margin-top:1rem; color:var(--dunkel); max-width:38ch}
.fahrt__marken{position:absolute; left:var(--rand); bottom:2.2rem; display:flex; gap:.5rem; z-index:4}
.fahrt__marken i{width:26px; height:2px; background:color-mix(in srgb, var(--dunkel) 35%, transparent); display:block; border-radius:99px; transition:background .5s}
.fahrt__marken i[data-aktiv=ja]{background:var(--dunkel)}
html:not(.js) .fahrt__buehne{position:static; height:auto}
html:not(.js) .fahrt__szene{position:relative; opacity:1; min-height:60svh}
@media (prefers-reduced-motion:reduce){
  .fahrt__buehne{position:static; height:auto}
  .fahrt__szene{position:relative; opacity:1; min-height:60svh}
  .fahrt__szene + .fahrt__szene{margin-top:1rem}
  .fahrt__zeile{opacity:1; grid-area:auto}
  .fahrt__zeile + .fahrt__zeile{margin-top:2rem}
}

/* ================= Seitenkopf (Unterseiten) ================= */
.seitenkopf{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3.5rem)}
.seitenkopf h1{max-width:17ch}
.seitenkopf .gross{margin-top:1.4rem; max-width:52ch; color:var(--gedaempft)}
/* Zwei weitere Kopfformen (15.09.2026, Verbesserungen G), damit nicht elf Seiten denselben Bau haben.
   Bild-Anschnitt: das Foto steht vor dem Text, ohne Rundung, in voller Breite. Höhe ohne
   aspect-ratio, damit kein max-height nötig wird (K8, D47). */
.seitenkopf--bild{padding-top:0}
.seitenkopf__bild{height:clamp(300px, 52vh, 600px); overflow:hidden; margin-bottom:clamp(2.2rem,5vw,4rem)}
.seitenkopf__bild img{width:100%; height:100%; object-fit:cover}
/* Kennzahl-Kopf: eine Zahl auf der h2-Stufe neben der Schlagzeile, darunter ihre Bedeutung.
   Die Zahl bleibt unter der h1, der Kopf behält eine große Stimme (K3). */
.seitenkopf--zahl .mitte{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem clamp(2rem,6vw,6rem); align-items:end}
.seitenkopf--zahl .brotkrume,.seitenkopf--zahl .klein,.seitenkopf--zahl h1,.seitenkopf--zahl .gross{grid-column:1}
.seitenkopf__zahl{grid-column:2; grid-row:2 / 5; align-self:end; padding-bottom:.35rem; max-width:14rem; border-left:1px solid var(--linie-stark); padding-left:clamp(1.2rem,2.5vw,2rem)}
.seitenkopf__zahl b{display:block; font-family:var(--schrift-kopf); font-weight:500; font-size:clamp(1.95rem, 4vw, 3.1rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.seitenkopf__zahl span{display:block; margin-top:.6rem; font-size:.93rem; color:var(--gedaempft)}
@media(max-width:820px){
  .seitenkopf--zahl .mitte{grid-template-columns:minmax(0,1fr)}
  .seitenkopf__zahl{grid-column:1; grid-row:auto; border-left:0; padding-left:0; padding-top:1.2rem; border-top:1px solid var(--linie-stark); max-width:none}
}
.brotkrume{font-size:.83rem; color:var(--gedaempft); margin-bottom:1.4rem}
.brotkrume a{text-decoration:none}
.brotkrume a:hover{color:var(--akzent)}

/* Steckbrief-Kasten */
.kasten{background:var(--flaeche); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem)}
.kasten h3{margin-bottom:.8rem}
.kasten dl{display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.4rem; font-size:.95rem; margin-top:1rem}
.kasten dt{color:var(--gedaempft)}
.kasten dd{font-weight:500}

/* Team */
.person{display:flex; flex-direction:column; gap:.9rem}
.person__bild{aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--flaeche)}
.person__bild img,.person__bild .platz--leer{width:100%; height:100%; object-fit:cover}
.person h3{font-size:1.15rem}
.person .rolle{font-size:.85rem; color:var(--akzent); font-weight:500}
.person p{font-size:.92rem; color:var(--gedaempft)}

/* Stellen-Liste */
.stelle{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
        padding:1.6rem 0; border-bottom:1px solid var(--linie); text-decoration:none; transition:padding-left .35s}
.stelle:hover{padding-left:.6rem}
.stelle__daten{display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.88rem; color:var(--gedaempft); margin-top:.4rem}

/* ================= Karriere: dunkler Kopf markiert den Tonwechsel ================= */
.seitenkopf--dunkel{background:var(--warm); color:var(--dunkel); padding-bottom:clamp(3rem,6vw,5rem)}
.seitenkopf--dunkel h1{color:var(--dunkel)}
.seitenkopf--dunkel .gross{color:color-mix(in srgb, var(--dunkel) 84%, transparent)}
.seitenkopf--dunkel .klein,.seitenkopf--dunkel .brotkrume{color:color-mix(in srgb, var(--dunkel) 66%, transparent)}

/* Monogramm-Kachel statt Porträtfoto — hält die Regel „keine erkennbaren Gesichter"
   ein und wird beim echten Kunden 1:1 durch sein Foto ersetzt. */
.monogramm{
  aspect-ratio:3/4; border-radius:var(--radius); display:grid; place-items:center;
  background:linear-gradient(150deg, var(--flaeche), color-mix(in srgb, var(--flaeche) 55%, var(--grund)));
  border:1px solid var(--linie); position:relative; overflow:hidden;
}
.monogramm span{
  font-family:var(--schrift-kopf); font-size:clamp(2.4rem,4.5vw,3.4rem); font-weight:500;
  color:color-mix(in srgb, var(--dunkel) 34%, transparent); letter-spacing:-.03em;
}
.monogramm::after{
  content:""; position:absolute; inset:auto -20% -42% -20%; height:70%;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--akzent) 16%, transparent), transparent 68%);
}

/* ================= Ankündigungsleiste ================= */
.infozeile__neu b{
  background:var(--signal); color:var(--dunkel); border-radius:0;
  padding:.1rem .5rem; margin-right:.45rem; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
}
.infozeile__neu a{color:var(--dunkel); text-underline-offset:.2em}
.infozeile__neu a:hover{text-decoration-thickness:2px}

/* ================= Schnellkontakt am Rand =================
   Umbau 12.09.2026 (Jans Wahl „bleiben, aber umgebaut"). Vorher zwei gerundete
   Symbolknöpfe, deren Wort erst beim Überfahren herauskam — ein Symbol statt eines
   Wortes (J-Verräter 13) und eine fünfte Knopfform (J-Verräter 8).
   Jetzt zwei senkrechte Reiter, die an der Kante kleben und das Wort tragen; die Form
   kommt vom Vorbild marplephysio.com, wo der Reiter „CONTACT" ebenso am Rand steht.
   Die Schrift steht senkrecht, deshalb bleibt der Reiter schmal und verdeckt nichts. */
.griff{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:1px;
}
.griff__knopf{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:var(--creme); color:var(--dunkel); border-left:1px solid var(--linie);
  padding:1.3rem .58rem; transition:color .32s;
}
.griff__knopf::before{
  content:""; position:absolute; inset:0 0 0 auto; width:0; z-index:-1;
  background:var(--signal); transition:width .32s cubic-bezier(.2,.7,.3,1);
}
.griff__knopf:hover,.griff__knopf:focus-visible{color:var(--dunkel)}
.griff__knopf:hover::before,.griff__knopf:focus-visible::before{width:100%}
.griff__knopf--signal{background:var(--signal); color:var(--dunkel)}
.griff__knopf--signal::before{background:var(--dunkel)}
.griff__knopf--signal:hover,.griff__knopf--signal:focus-visible{color:var(--signal)}
.griff__text{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
@media(max-width:900px){
  /* Auf dem Handy liegt derselbe Reiter waagerecht am unteren Rand, wo der Daumen ist. */
  .griff{top:auto; bottom:0; right:0; left:0; transform:none; flex-direction:row; gap:0}
  .griff__knopf{flex:1; padding:.95rem}
  .griff__knopf::before{inset:auto 0 0 0; width:auto; height:0; transition:height .32s cubic-bezier(.2,.7,.3,1)}
  .griff__knopf:hover::before,.griff__knopf:focus-visible::before{height:100%}
  .griff__knopf + .griff__knopf{border-left:1px solid var(--linie)}
  .griff__text{writing-mode:horizontal-tb; transform:none; font-size:.85rem; letter-spacing:.1em}
  .fuss{padding-bottom:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  .griff__knopf,.griff__knopf::before{transition:none}
}

/* ================= Selbstauswahl nach Anliegen =================
   Umbau 12.09.2026 (Jans Wahl): vorher vier gleich große Kästen mit Radius, Hover-Lift
   und den Nummern 01–04 an vier Wegen, die keine Reihenfolge haben (J-Verräter 9, 21).
   Jetzt Zeilen mit Haarlinie: Anliegen links, Satz in der Mitte, Ziel rechts.
   Beim Überfahren hebt sich nichts, die Geschwister treten zurück. */
.wege{border-top:1px solid var(--linie)}
.weg{
  display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;
  gap:.3rem 1.8rem; align-items:baseline; text-decoration:none;
  padding:1.3rem 0; border-bottom:1px solid var(--linie);
  transition:opacity .3s, padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.wege:hover .weg{opacity:.42}
.weg:hover,.weg:focus-visible{opacity:1; padding-left:.7rem}
.weg__satz{font-family:var(--schrift-kopf); font-size:clamp(1.25rem, 1.7vw, 1.55rem); line-height:1.22; font-weight:500}
.weg p{font-size:.98rem; color:var(--gedaempft); margin:0; max-width:56ch}
.weg__ziel{font-size:.9rem; font-weight:500; white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:2px}
@media(max-width:900px){
  .weg{grid-template-columns:minmax(0,1fr); gap:.45rem; padding:1.15rem 0}
  .weg__ziel{white-space:normal; justify-self:start; margin-top:.3rem}
}
@media (prefers-reduced-motion:reduce){.wege:hover .weg{opacity:1}.weg:hover{padding-left:0}}

/* ================= Einwand-Zeilen im Kopfbereich =================
   Untereinander statt in einer Reihe mit Deko-Punkten (12.09.2026). Aufbau von
   physiozentrum-moeller.de übernommen — die Seite, die der Kunde mag: direkt unter der
   Schlagzeile die drei Zweifel, die vom Anruf abhalten, erst danach der Knopf.
   Kein Häkchen, kein Punkt, ein kurzer Strich in Champagner (J-Verräter 7). */
.belege{
  display:flex; flex-direction:column; gap:.6rem; margin-top:1.7rem;
  font-size:1rem; color:var(--dunkel);
}
.belege span{display:grid; grid-template-columns:1.5rem 1fr; align-items:baseline}
.belege span::before{content:""; width:.85rem; height:1px; background:var(--akzent); align-self:center}

/* ================= Fragen und Antworten ================= */
.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  cursor:pointer; list-style:none; padding:1.3rem 3rem 1.3rem 0; position:relative;
  font-family:var(--schrift-kopf); font-size:clamp(1.25rem, 1.7vw, 1.55rem); font-weight:500; line-height:1.3;
}
.frage summary::-webkit-details-marker{display:none}
/* Plus statt Chevron (J2/13, 15.09.2026): zwei Striche in Akzent, beim Öffnen dreht der senkrechte zum Minus. */
.frage summary::before,.frage summary::after{
  content:""; position:absolute; top:50%; background:var(--akzent); transition:transform .35s;
}
.frage summary::before{right:.6rem; width:.9rem; height:1.5px; transform:translateY(-50%)}
.frage summary::after{right:calc(.6rem + .45rem - .75px); width:1.5px; height:.9rem; transform:translateY(-50%)}
.frage[open] summary::after{transform:translateY(-50%) rotate(90deg)}
.frage summary:hover{color:var(--akzent)}
.frage__text{padding:0 3rem 1.4rem 0}
.frage__text p{font-size:.98rem; color:var(--gedaempft); margin-bottom:.7rem}
.frage__text p:last-child{margin-bottom:0}

/* ================= Stimmen =================
   Umbau 12.09.2026: drei gleich große Kästen nebeneinander machten aus drei sehr
   unterschiedlich langen Stimmen wieder eine Matrix (J-Verräter 46, dazu Kasten und
   Rundung aus J9/J15). Jetzt trägt die lange Stimme die linke Spalte über die volle
   Höhe, die beiden kurzen stehen rechts darunter — ungleich gewichtet, weil sie
   ungleich lang sind. Kein Kasten, eine Linie über jeder Stimme. */
.stimmen{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.5vw,3rem); align-items:start}
.stimmen__kurz{display:flex; flex-direction:column; gap:clamp(1.6rem,3vw,2.4rem)}
@media(max-width:900px){.stimmen{grid-template-columns:1fr; gap:1.8rem}}
.stimme{display:flex; flex-direction:column; gap:.9rem; padding-top:1.1rem; border-top:1px solid var(--linie-stark)}
.stimme blockquote{font-family:var(--schrift-kopf); font-size:1rem; line-height:1.38; font-weight:500; margin:0; max-width:44ch}
.stimme--lang blockquote{font-size:clamp(1.25rem, 1.7vw, 1.55rem); line-height:1.36; max-width:52ch}
.stimme cite{font-style:normal; font-size:.88rem; color:var(--gedaempft); margin-top:auto}

/* ================= Ratgeber ================= */
.beitrag{display:flex; flex-direction:column; gap:.6rem; text-decoration:none; height:100%}
.beitrag__bild{aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; background:var(--flaeche)}
.beitrag__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.beitrag:hover .beitrag__bild img{transform:scale(1.04)}
.beitrag h3{margin-top:.4rem}
.beitrag p{font-size:.94rem; color:var(--gedaempft)}
.beitrag__meta{font-size:.8rem; color:var(--gedaempft); letter-spacing:.06em}

/* Persönlicher Satz je Person — trägt die familiäre Note */
.person .zitatlein{
  font-family:var(--schrift-kopf); font-size:.98rem; line-height:1.35; color:var(--dunkel);
  border-left:2px solid var(--akzent); padding-left:.75rem; margin-top:.2rem;
}

/* ---------- Signature-Motiv „Die Linie schreibt das N" (03.09.2026) ----------
   Ein durchgehender Strich, dessen Kehrpunkte die Abschnitte tragen. Die Form kommt
   aus dem Signet, dem offenen N. Auf hellem Grund Altgold, auf dunklem Champagner.
   Die helle Fassung liegt in einer zweiten Ebene ÜBER den Abschnitten, weil deren
   Hintergrund sonst darüber malt. */
/* Beide Ebenen liegen ÜBER den Abschnitten: jeder Abschnitt mit eigener Fläche
   (Zitat, dunkle Strecke, Fahrt) würde die Spur sonst verdecken. Der Strich ist
   dünn und zurückgenommen, läuft in den Außenrändern und quert nur unter Textblöcken. */
.spur{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible}
.spur--hell{z-index:4}
.spur path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.spur .grat{stroke:color-mix(in srgb, var(--dunkel) 9%, transparent); stroke-width:1.5}
.spur .grat--hell{stroke:color-mix(in srgb, var(--grund) 20%, transparent); stroke-width:1.5}
.spur .zug{stroke:var(--akzent); stroke-width:2.2; opacity:.62}
.spur .zug--hell{stroke:var(--signal); stroke-width:2.2; opacity:.8}
.spur .knoten{fill:var(--grund); stroke:var(--akzent); stroke-width:2; opacity:0; transition:opacity .55s ease}
.spur .knoten.an{opacity:.85}
.spur .knoten--hell{stroke:var(--akzent); fill:var(--warm)}
main{position:relative}
main > section{position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){.spur .knoten{opacity:.85; transition:none}}

/* Die Strecke, über die der Zug quert, bekommt unten Luft für die Linie. */
[data-kreuz]{padding-bottom:calc(var(--luft) * 1.35)}

/* ---------- Größenleiter als Klassen (10.09.2026, Muster K) ----------
   Ersetzt die Inline-Abstände in den Seitenrümpfen. Wer hier einen vierten Wert
   braucht, hat wahrscheinlich ein Struktur- und kein Abstandsproblem. */
.eng{margin-top:var(--eng)}
.mittel{margin-top:var(--mittel)}
.weit{margin-top:var(--weit)}
.kopfluft{margin-bottom:var(--weit)}
.kopfluft--knapp{margin-bottom:var(--mittel)}
/* 15.09.2026 (Verbesserungen H): die letzten 92 Inline-Werte der Seitenrümpfe laufen über diese
   Klassen. Werte zwischen den Stufen wurden auf die nächste Stufe gezogen, nicht neu erfunden. */
.kopfluft--eng{margin-bottom:var(--eng)}
.kurz{max-width:20ch}
.ablauf--eins{grid-template-columns:1fr}

/* Bildflächen: deckendes Bild im Rahmen, statt neunmal dieselben drei Inline-Werte. */
.deckt{width:100%; height:100%; object-fit:cover}
.bildfeld{border-radius:var(--radius); overflow:hidden}
.bildfeld--breit{aspect-ratio:16/9}
.bildfeld--hoch{aspect-ratio:16/10}
.bildfeld--band{aspect-ratio:16/7}

/* Dunkler Abschnitt als Bauteil, nicht als Inline-Farbpaar. */
/* „dunkel“ heißt seit der Licht-Fassung: das warme Kapitel. Der Klassenname bleibt, weil zwölf Rümpfe und bewegung.js ihn tragen (N18). */
.abschnitt--dunkel{background:var(--warm); color:var(--dunkel)}
.abschnitt--dunkel h2,
.abschnitt--dunkel h3{color:var(--dunkel)}
.abschnitt--dunkel p{color:color-mix(in srgb, var(--dunkel) 88%, transparent)}
.abschnitt--dunkel .klein{color:color-mix(in srgb, var(--grund) 68%, transparent)}

/* Abschnitt auf ruhiger Farbfläche — das Gegenkapitel nach Muster J1. */
.abschnitt--flaeche{background:var(--flaeche)}

/* Die Fahrt durch die Räume trägt ihre Länge als Token, nicht als Inline-Höhe. */
/* 15.09.2026: von 340 auf 220 svh; drei Räume, drei Zeilen, kein Tunnel mehr (Verbesserungen A). */
.fahrt{--fahrt-hoehe:220svh; height:var(--fahrt-hoehe)}


/* Leistungen als Textliste (12.09.2026, Mechanik aus Elevate Medical): zwei Spalten,
   Linien statt Kacheln, kein Symbol. Für Ältere lesbar, für Junge nicht altbacken. */
.leistungsliste{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4.5rem); border-top:1px solid var(--linie-stark)}
@media(max-width:700px){.leistungsliste{grid-template-columns:1fr}}
.leistungsliste li{border-bottom:1px solid var(--linie-stark)}
.leistungsliste a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:baseline;
  padding:1.05rem .2rem 1.05rem 0; text-decoration:none; transition:padding-left .3s;
}
.leistungsliste a:hover{padding-left:.5rem}
.leistungsliste__was{font-family:var(--schrift-kopf); font-size:clamp(1.25rem, 1.7vw, 1.55rem); font-weight:500; letter-spacing:-.01em; line-height:1.2}
.leistungsliste__wozu{grid-column:1; font-size:.93rem; color:var(--gedaempft); margin-top:.2rem}
.leistungsliste__pfeil{grid-column:2; grid-row:1 / 3; align-self:center; color:var(--akzent); transition:transform .3s}
.leistungsliste a:hover .leistungsliste__pfeil{transform:translateX(4px)}

/* Zweite Kopfform: Kapitelzahl neben der Überschrift (Muster J6/5, 10.09.2026).
   Nicht jeder Abschnitt bekommt sie — nur die zwei, die wirklich ein Kapitel sind. */
/* Die Zahl steht über dem Kopf, nicht daneben: daneben verschiebt sie die
   Textachse des Abschnitts, und der folgende Absatz stünde falsch. */
.kapitelkopf{display:block}
.kapitelkopf h2{margin-top:.15rem}

/* Auf dunklem Grund tragen Textlinks die Signalfarbe, nicht das Altgold. */
.abschnitt--dunkel a.text{color:var(--akzent)}

/* Auf der ruhigen Farbfläche kehren die Wege-Karten um: heller Grund auf Fläche. */
/* Karten auf der Farbfläche: heller Grund, aber mit sichtbarer Kante.
   Ohne Linie stünde die Karte nur mit 1,18:1 gegen ihren Grund, und sie ist ein
   anklickbares Element. Die Linie liegt bei 3,08:1 und erfüllt damit WCAG 1.4.11. */
/* Auf der Farbfläche braucht die Haarlinie etwas mehr Kraft, sonst verschwindet sie
   im helleren Grund (K11, auf Zeilen statt Karten übertragen 12.09.2026). */
.abschnitt--flaeche .wege,
.abschnitt--flaeche .weg{border-color:color-mix(in srgb, var(--dunkel) 22%, var(--flaeche))}

/* Prototyp-Hinweis bei Formularen (15.09.2026): siehe bewegung.js, Ende der Datei */
.proto-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,.8rem);opacity:0;background:var(--dunkel);color:var(--grund);padding:.9rem 1.2rem;border-radius:4px;max-width:min(90vw,34rem);font-size:.95rem;line-height:1.4;transition:opacity .3s,transform .3s;pointer-events:none;z-index:60}
.proto-toast.zeigt{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.proto-toast{transition:none}}