/* ============================================================
   Chiropraktik & Osteopathie Sinsheim
   Stylesheet, Stand 24.08.2026
   Schriften lokal eingebunden (kein externer Aufruf, DSGVO)
   ============================================================ */

/* --- Schriften ------------------------------------------------ */
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Light.woff2")format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Regular.woff2")format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-SemiBold.woff2")format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Bold.woff2")format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Black.woff2")format("woff2");
  font-weight:900;font-style:normal;font-display:swap}

/* --- Design-Tokens (Brand Manual 2022) ------------------------ */
:root{
  --gold:#D4CA00; --gold-80:#DCD333; --gold-40:#EEEA99; --gold-20:#F6F4CC;
  --ink:#363C42; --ink-2:#5E636A; --ink-3:#666B72; --ink-4:#8A8F94;
  --ground:#FAFAF6; --surface:#FFFFFF; --raised:#F3F3EA;
  --line:#E4E4D8; --line-soft:#EEEEE3;
  /* Dunkle Flaechen: eigene Tokens, damit sie NICHT mit dem Theme kippen.
     --ink ist eine Textfarbe und darf nie als Hintergrund dienen. */
  --inv-bg:#363C42; --inv-fg:#FAFAF6; --inv-fg2:#B9BEB8; --inv-line:rgba(255,255,255,.13);
  --shadow-s:0 1px 2px rgba(54,60,66,.05);
  --shadow-m:0 1px 2px rgba(54,60,66,.05),0 10px 28px -14px rgba(54,60,66,.18);
  --r-l:28px; --r-m:20px; --r-s:12px;
  /* Abstand zwischen zwei Blöcken innerhalb eines Abschnitts */
  --gap-b:clamp(22px,3vw,34px);
  --head:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1120px;
  /* Warnrot. Nur fuer Rahmen und Linien, nie als Textfarbe. */
  --stop:#C0392B;
}
/* DARK-TOKENS-START */
/* Drei Zustaende, damit der Schalter in beide Richtungen gewinnt:
   :root oben        = hell
   Systemvorgabe     = dunkel, aber nur wenn der Besucher nicht "hell" gewaehlt hat
   [data-theme=dark] = ausdrueckliche Wahl des Besuchers
   Ohne den :not()-Schutz wuerde die Systemvorgabe die Wahl "hell" ueberstimmen. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#EDEDE5; --ink-2:#B6BAB2; --ink-3:#989D96; --ink-4:#7C817B;
  --ground:#1D2024; --surface:#262A2F; --raised:#2E3338;
  --line:#3A4046; --line-soft:#31363B;
  --inv-bg:#12151A; --inv-fg:#EDEDE5; --inv-fg2:#A8ADA7; --inv-line:rgba(255,255,255,.14);
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);}}
:root[data-theme="dark"]{
  --ink:#EDEDE5; --ink-2:#B6BAB2; --ink-3:#989D96; --ink-4:#7C817B;
  --ground:#1D2024; --surface:#262A2F; --raised:#2E3338;
  --line:#3A4046; --line-soft:#31363B;
  --inv-bg:#12151A; --inv-fg:#EDEDE5; --inv-fg2:#A8ADA7; --inv-line:rgba(255,255,255,.14);
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);}
/* DARK-TOKENS-END */

/* --- Grundlagen ---------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;padding-bottom:76px}
@media (min-width:860px){body{padding-bottom:0}}
h1,h2,h3,h4{font-family:var(--head);margin:0;text-wrap:balance}
/* h1 auf 700 statt 900: Montserrat Black traegt deutlich dicker auf als Gotham Black,
   die Print-Schrift der Marke. Bei 48px ist das die einzige Stelle, an der der
   Schriftwechsel sichtbar wird. 700 trifft Gotham Black am genauesten.
   Gemessen und belegt am 15.09.2026, siehe 08_Designvergleiche/2026-09-15 Gotham im Vergleich.
   Gewicht 900 bleibt fuer Zahlen und Preise (.prog-price, .line-foot b, .step-n) --
   dort ist der Unterschied bei 34px und darunter nicht mehr zu sehen. */
h1{font-weight:700;font-size:clamp(29px,5.6vw,48px);line-height:1.08;letter-spacing:-.02em}
h2{font-weight:700;font-size:clamp(22px,3.4vw,32px);line-height:1.2;letter-spacing:-.01em}
h3{font-weight:700;font-size:19px;line-height:1.32}
h4{font-weight:600;font-size:16px}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#363C42;padding:12px 20px;
  border-radius:0 0 10px 0;font-family:var(--head);font-weight:700;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Layout --------------------------------------------------- */
.container{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4.5vw,40px)}
.narrow{max-width:780px}
section{padding:clamp(42px,6.2vw,78px) 0}
section+section{border-top:1px solid var(--line-soft)}
.sec-top{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(22px,3.6vw,36px)}
/* Blockabstand im Abschnitt. Vorher trug jeder Block seinen eigenen Inline-Abstand –
   oder gar keinen, dann klebte er am Block darüber. Eine Regel für alle Fälle.
   .hero-grid ausgenommen, weil dort die Kinder Rasterzellen sind. */
section > .container:not(.hero-grid) > * + *{margin-top:var(--gap-b)}
/* Der Abschnittskopf bringt seinen Abstand nach unten schon mit. */
section > .container > .sec-top + *{margin-top:0}
/* Fußnote gehört optisch zum Block darüber und bleibt deshalb dicht dran. */
.fine{font-size:15.5px;color:var(--ink-3);max-width:74ch}
section > .container > .fine{margin-top:13px}

/* --- Karte mit Einwilligung ----------------------------------
   Vor der Zustimmung ist der Rahmen leer und der Hinweis liegt darin.
   Nach der Zustimmung wird das iframe befuellt und der Hinweis verschwindet. */
/* Vor der Zustimmung liegt der Hinweis im Textfluss und bestimmt die Hoehe – so
   wird auf schmalen Bildschirmen nichts abgeschnitten. Erst wenn die Karte
   geladen ist, bekommt der Rahmen das Seitenverhaeltnis 16:9. */
.mapwrap{position:relative;border-radius:var(--r-m);overflow:hidden;
  background:var(--raised);border:1px solid var(--line)}
.mapwrap.map-an{height:220px}
/* Das leere iframe bleibt ausgeblendet – sonst liegt es unsichtbar ueber dem
   Hinweis und faengt den Klick auf den Knopf ab. */
.mapwrap iframe{display:none}
.mapwrap.map-an iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
.mapoff{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(20px,4vw,38px);min-height:clamp(180px,26vw,300px);justify-content:center}
.mapwrap.map-an .mapoff{display:none}
.mapoff p{font-size:16px;color:var(--ink-2);max-width:56ch}
/* "Route oeffnen" steht ausserhalb von .mapwrap und bleibt deshalb auch nach
   dem Laden der Karte sichtbar und klickbar. Der Knopf gehoert optisch zur Karte,
   deshalb dichter dran als der normale Blockabstand. Die Regel braucht denselben
   Aufbau wie die Blockabstand-Regel oben, sonst gewinnt diese (gemessen: 34 px
   statt der gewuenschten 14). */
section > .container > .map-route{margin-top:14px}
.map-pin{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#363C42;background:var(--gold);
  padding:4px 9px;border-radius:6px}
.eyebrow{font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.gold-rule{height:6px;width:76px;background:var(--gold);border-radius:3px}
.lead{font-size:clamp(18px,2.2vw,21px);color:var(--ink-2);max-width:64ch}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:16px}
.prose p{color:var(--ink-2)}
/* Gliederungsebene und Groesse sind zwei verschiedene Dinge.
   Die Ebene (h2/h3) ergibt sich aus der Stellung im Dokument, die Groesse aus
   dem Baustein, in dem die Ueberschrift steht. Solange die Groesse am
   Elementtyp haengt, aendert jede Korrektur der Gliederung das Aussehen – und
   dann laesst man die Gliederung lieber falsch. Deshalb hier beides getrennt.
   In einer 68 Zeichen schmalen Textspalte waere die globale h2 mit bis zu
   32px zu laut; 22px gliedert genauso deutlich und bleibt ruhig. */
.prose h2{font-size:22px;line-height:1.3;letter-spacing:-.005em;font-weight:700}
.prose h2,.prose h3{margin-top:12px;color:var(--ink)}
.prose a{color:var(--ink);text-decoration-color:var(--gold);text-decoration-thickness:2px;
  text-underline-offset:3px}

/* --- Kopfzeile ------------------------------------------------ */
.bar{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:1px solid var(--line-soft)}
@supports (backdrop-filter:blur(10px)){
  .bar{background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px)}}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px clamp(18px,4.5vw,40px);max-width:var(--wrap);margin:0 auto}

/* Logo in der Kopfzeile: ZWEI Dateien, eine je Farbmodus.
   Warum nicht eine: Die Wortmarke ist ein Bild, ihre Farbe laesst sich nicht ueber
   ein CSS-Token umstellen. logo.svg hat die Schrift in Anthrazit (#363C42) – auf dem
   dunklen Grund #1D2024 sind das 1,47:1, praktisch unlesbar. logo-invers.svg hat sie
   in Weiss: 16,35:1. Bis zum 04.09.2026 stand im Kopf immer logo.svg.
   Dieselben drei Zustaende wie bei den Farbtokens, damit der Schalter in beide
   Richtungen gewinnt. Die ausgeblendete Datei ist display:none und liegt damit auch
   nicht im Accessibility-Baum – der Alternativtext wird also nicht doppelt gelesen.
   Die Fusszeile ist immer dunkel und setzt logo-invers.svg direkt, ohne Klasse. */
.bar .brand{display:flex;align-items:center}
.bar .brand .logo-dunkel{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bar .brand .logo-hell{display:none}
  :root:not([data-theme="light"]) .bar .brand .logo-dunkel{display:block}}
:root[data-theme="dark"] .bar .brand .logo-hell{display:none}
:root[data-theme="dark"] .bar .brand .logo-dunkel{display:block}
:root[data-theme="light"] .bar .brand .logo-hell{display:block}
:root[data-theme="light"] .bar .brand .logo-dunkel{display:none}
.brand{display:block;width:min(220px,50vw);flex:none}
.brand img{display:block;width:100%}
nav.desk{display:none;gap:20px;align-items:center}
nav.desk a:not(.btn){font-family:var(--head);font-weight:600;font-size:14px;
  color:var(--ink-2);text-decoration:none;padding:5px 0;border-bottom:2px solid transparent}
nav.desk a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--gold)}
nav.desk a:not(.btn)[aria-current=page]{color:var(--ink);border-bottom-color:var(--gold)}
@media (min-width:1020px){nav.desk{display:flex}.brand{width:250px}}

/* Umschalter hell/dunkel. Sitzt direkt in .bar-in und ist deshalb auch auf
   dem Handy sichtbar, wo nav.desk ausgeblendet ist. 44 px Trefferflaeche. */
.theme-btn{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;padding:0;
  transition:color .12s,border-color .12s}
.theme-btn:hover{color:var(--ink);border-color:var(--gold)}
.theme-btn svg{width:20px;height:20px;display:block}
/* Es ist immer nur ein Symbol sichtbar: im hellen Modus der Mond (= "dunkel
   einschalten"), im dunklen die Sonne. */
.theme-btn .i-moon{display:block}
.theme-btn .i-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
/* Ohne JavaScript bringt der Schalter nichts – dann ist er ausgeblendet. */
html:not(.js) .theme-btn{display:none}

/* --- Buttons -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--head);
  font-weight:700;font-size:16px;padding:15px 26px;border-radius:999px;text-decoration:none;
  border:2px solid transparent;cursor:pointer}
.btn-1{background:var(--gold);color:#363C42;box-shadow:0 6px 18px -8px rgba(212,202,0,.7)}
.btn-2{background:transparent;color:var(--ink);border-color:var(--ink-4)}
.btn-2:hover{border-color:var(--ink-2)}
.btn-sm{padding:11px 20px;font-size:15px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* --- Platzhalter (vor Livegang entfernen) --------------------- */
.x{background:var(--gold-20);border-bottom:2px dotted var(--gold-80);font-family:var(--head);
  font-weight:600;font-size:.9em;padding:1px 5px;border-radius:4px;color:var(--ink);
  overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* DARK-X-START */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .x{background:#35361C;border-bottom-color:#6A6B2A}}
:root[data-theme="dark"] .x{background:#35361C;border-bottom-color:#6A6B2A}
/* DARK-X-END */
.ph{margin:0;background:var(--raised);border:2px dashed var(--line);border-radius:var(--r-m);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;
  text-align:center;min-height:128px}
/* Echtes Foto. Gleiche Rundung und gleiche Flaeche wie der Platzhalter, damit
   der Wechsel Platzhalter -> Foto das Layout nicht verschiebt. */
.foto{margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--raised)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.person .foto{height:auto}
@media (max-width:759px){.person .foto{width:110px;height:auto;align-self:stretch;
  border-right:2px solid var(--line)}}
.ph-tag{font-family:var(--head);font-weight:700;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#363C42;background:var(--gold);padding:3px 8px;border-radius:5px}
.ph-txt{font-size:14.5px;color:var(--ink-3);max-width:34ch;line-height:1.4}

/* --- Hero ----------------------------------------------------- */
.hero{padding-top:clamp(30px,4.6vw,56px)}
.hero-grid{display:grid;gap:clamp(26px,4vw,50px);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero-txt{display:flex;flex-direction:column;gap:19px}
.hero h1 .sub{color:var(--ink-2);font-weight:300;display:block;font-size:.58em;letter-spacing:0;
  margin-top:8px;line-height:1.25}
.hero-media{position:relative}
.hero-media .ph{aspect-ratio:4/3;min-height:0}
.hero-blob{position:absolute;left:-14px;bottom:-16px;width:38%;aspect-ratio:1;background:var(--gold);
  border-radius:var(--r-l);z-index:-1}
.claim{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-family:var(--head);
  font-weight:700;font-size:clamp(15px,2vw,18px);letter-spacing:.04em}
.claim i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px}
.chip{font-family:var(--head);font-weight:600;font-size:13px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2);padding:7px 13px;border-radius:999px}
/* Im Eroeffnungsband stehen Preise in den Chips. Der neue Preis muss sich vom
   alten abheben, deshalb dunkler statt nur fett. */
.chip strong{color:var(--ink);font-weight:700}

/* --- Karten --------------------------------------------------- */
.cards{display:grid;gap:18px}
@media (min-width:640px){.cards.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:900px){.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:25px 26px 27px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:11px}
.card p{color:var(--ink-2);font-size:16.5px}
.card.link{text-decoration:none}
.card.link:hover{border-color:var(--gold-80);box-shadow:var(--shadow-m)}
.card .more{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);margin-top:auto;
  padding-top:6px}
.card .more::after{content:" →"}

/* --- Tags / Listen -------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 17px;
  font-size:15.5px}
/* --- Auswaehlbare Beschwerden ---------------------------------
   Die Knoepfe sehen aus wie die .tag-Pillen, sind aber echte <button> mit
   aria-pressed. Angetippt werden sie golden: Anthrazit auf Gold ist 6,6:1 und
   damit das einzige zulaessige Gold-Paar im Brand Manual (Weiss auf Gold waere
   1,7:1 und faellt durch). */
.wahl{display:flex;flex-wrap:wrap;gap:10px}
.wahl button{font-family:var(--body);font-size:15.5px;line-height:1.3;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;
  gap:9px;text-align:left}
.wahl button::before{content:"+";font-family:var(--head);font-weight:700;font-size:16px;
  color:var(--ink-3);flex:none}
.wahl button:hover{border-color:var(--gold-80)}
.wahl button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);
  color:#363C42;font-weight:600}
.wahl button[aria-pressed="true"]::before{content:"\2713";color:#363C42}
/* Ohne JavaScript koennen die Knoepfe nichts tun – dann sind sie weg und alle
   Absaetze stehen offen da. So fehlt keine Information. */
html:not(.js) .wahl{display:none}

.antworten{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-s)}
.antworten-leer{color:var(--ink-3);font-size:16.5px;max-width:58ch}
.antwort{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.antwort:first-of-type{padding-top:0;margin-top:0;border-top:none}
.antwort h3,.antwort h4{font-size:17.5px;line-height:1.32;font-weight:700;margin-bottom:9px}
.antwort p{color:var(--ink-2);font-size:16.5px}
.antwort p + p{margin-top:9px}
.antwort strong{color:var(--ink)}
/* Warnhinweis. Rot steckt nur im Rahmen, nicht in der Schrift: eine rote
   Textfarbe faellt im Dunkelmodus unter 4,5:1 durch. Gleiche Bildsprache wie die
   roten Kaesten auf den Beschwerdeseiten. */
.antwort .arzt{background:var(--raised);border-left:4px solid var(--stop);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:13px 17px;margin-top:13px;font-size:16px;
  color:var(--ink-2)}
.antwort .arzt strong{color:var(--ink)}
/* Mit JavaScript sind die Absaetze zunaechst zu. .zuerst setzt das Skript auf den
   ersten SICHTBAREN Absatz – :first-of-type kennt nur die Reihenfolge im Markup
   und wuerde die Trennlinie an der falschen Stelle weglassen. */
html.js .antwort{display:none}
html.js .antwort.an{display:block}
html.js .antwort.zuerst{padding-top:0;margin-top:0;border-top:none}

.honest{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:22px 26px;display:flex;flex-direction:column;gap:10px}
.honest p{color:var(--ink-2);font-size:17px}
.honest strong{color:var(--ink)}
/* Der Hinweiskasten traegt auf den Beschwerdeseiten eine h2 – er ist dort die
   erste Gliederungsebene unter der h1. Mit der globalen h2-Groesse (bis 32px)
   wuerde er die Seite dominieren, obwohl er ein Einschub ist. 22px ist dieselbe
   Groesse wie .prose h2 – auf einer Beschwerdeseite stehen beide nebeneinander
   auf derselben Gliederungsebene und muessen deshalb gleich gross sein. */
.honest h2{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.005em}
.honest h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:0}
.checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.checks li{padding-left:26px;position:relative;font-size:16.5px;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-radius:3px;background:var(--gold)}
.checks strong{color:var(--ink)}

/* --- Ablauf / Stationen --------------------------------------- */
.steps{display:grid;gap:2px;background:var(--line-soft);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden}
@media (min-width:900px){.steps.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps.s5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.step{background:var(--surface);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px}
.step.key{background:var(--raised)}
.step-n{font-family:var(--head);font-weight:900;font-size:14px;color:var(--ink-3)}
.step.key .step-n{color:#363C42;background:var(--gold);width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center}
.step p{font-size:15.5px;color:var(--ink-2)}
/* Kachelueberschriften: gleiche Groesse, gleich welche Ebene sie tragen.
   Siehe die Begruendung bei .prose h2. */
.card>h2,.card>h3,.step>h2,.step>h3{font-size:19px;line-height:1.32;
  font-weight:700;letter-spacing:0}
.timeline{display:grid;gap:2px;background:var(--line-soft);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;grid-template-columns:minmax(0,1fr) 2fr 2fr minmax(0,1fr)}
@media (max-width:660px){.timeline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tl{padding:18px 16px 20px;background:var(--surface);display:flex;flex-direction:column;gap:5px}
.tl.hi{background:var(--gold)}.tl.hi .tl-n,.tl.hi .tl-m{color:#363C42}
.tl.dk{background:var(--inv-bg)}.tl.dk .tl-n{color:var(--inv-fg)}
.tl.dk .tl-m{color:var(--inv-fg2)}
.tl-n{font-family:var(--head);font-weight:700;font-size:15px}
.tl-m{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* --- Preise --------------------------------------------------- */
.ptab{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:var(--shadow-s)}
.ptab table{width:100%;border-collapse:collapse;font-size:16.5px}
.ptab th,.ptab td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.ptab th{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ptab tbody tr:last-child td{border-bottom:none}
.ptab td.n{font-family:var(--head);font-weight:700;white-space:nowrap}
.ptab td.p{font-family:var(--head);font-weight:700;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:18px}
.ptab td.d{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:15px}
.ptab td small{display:block;color:var(--ink-3);font-size:14.5px;margin-top:3px;line-height:1.4}
.progs{display:grid;gap:18px}
@media (min-width:880px){.progs{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
.prog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.prog.best{border-color:var(--gold);border-width:2px;box-shadow:var(--shadow-m)}
.prog-top{padding:24px 24px 18px;display:flex;flex-direction:column;gap:6px;position:relative}
.prog .pill{position:absolute;top:-1px;right:16px;background:var(--gold);color:#363C42;
  font-family:var(--head);font-weight:700;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:0 0 8px 8px}
.prog h3{font-size:22px;letter-spacing:.09em}
.prog-sub{font-size:15px;color:var(--ink-3)}
.prog ul{margin:0;padding:0 24px;list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.prog li{padding-left:20px;position:relative;font-size:16px;color:var(--ink-2)}
.prog li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;
  background:var(--gold)}
.prog-foot{padding:20px 24px 24px;margin-top:auto;display:flex;flex-direction:column;gap:3px}
/* Streichpreis seit 29.09.2026 zweizeilig: Bezeichnung oben, Betrag darunter.
   Vorher lief die Durchstreichung ueber die ganze Zeile - bei RESET passte das
   auf eine Zeile, bei BALANCE und TRANSFORM brach es um und der Strich lief
   durch einen Bindestrich am Zeilenende. Die drei Kacheln standen dadurch
   unterschiedlich hoch. Jetzt hat jede Kachel genau zwei Zeilen, und
   durchgestrichen ist nur noch der Betrag - was auch sachlich richtiger ist.

   Bezeichnung und Betrag sind ZWEI eigene Flex-Kinder von .prog-foot, nicht
   ineinander verschachtelt. Grund: So haengt der Zeilenumbruch nicht davon ab,
   ob HTML und CSS denselben Stand haben. Am 29.09.2026 lag kurzzeitig neues CSS
   mit alter HTML auf dem Server - verschachtelt sah das falsch aus, nebeneinander
   bleiben es in jedem Fall zwei Zeilen. */
.prog-val{font-size:14.5px;color:var(--ink-3);line-height:1.35;text-decoration:none}
.prog-cut{font-size:14.5px;color:var(--ink-3);line-height:1.35;
  text-decoration:line-through;white-space:nowrap}
.prog-price{font-family:var(--head);font-weight:900;font-size:34px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.prog-note{font-size:14px;color:var(--ink-3);margin-top:3px}
.rules{display:grid;gap:18px}
@media (min-width:780px){.rules{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.rule-b{border-radius:var(--r-m);padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.rule-b.gold{background:var(--gold);color:#363C42}
.rule-b.gold h3{color:#363C42}.rule-b.gold p{color:#4A4E44}
.rule-b.gold .x{background:#fff;border-bottom-color:#9A9440;color:#363C42}
.rule-b.plain{background:var(--surface);border:1px solid var(--line)}
.rule-b.plain p{color:var(--ink-2)}

/* --- Infusionslinien ------------------------------------------ */
.lines{display:grid;gap:18px}
@media (min-width:820px){.lines{grid-template-columns:repeat(3,minmax(0,1fr))}}
.line{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.line-top{padding:20px 24px;border-bottom:1px solid var(--line-soft)}
.line-top h2,.line-top h3{font-size:20px;line-height:1.32;font-weight:700;letter-spacing:.11em}
.line-top span{font-size:14.5px;color:var(--ink-3);display:block;margin-top:3px}
.line ul{margin:0;padding:20px 24px;list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}
.line li{font-size:16px;color:var(--ink-2);padding-left:19px;position:relative}
.line li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;
  background:var(--gold)}
/* Preis ueber dem Hinweis, geaendert am 16.09.2026.
   Vorher standen beide nebeneinander in einer Flexzeile. Der Preis war dabei ein
   schrumpfbares Flexelement und brach deshalb bei JEDER Breite zwischen Zahl und
   Euro-Zeichen um – auch bei 1440px, wo 300px frei waren. Untereinander laeuft der
   Preis einzeilig und der Hinweis passt von 390px bis 1440px in eine Zeile.
   flex:0 0 auto und white-space:nowrap halten den Preis auch dann zusammen, wenn
   diese Zeile spaeter wieder nebeneinander gesetzt werden sollte. */
.line-foot{padding:0 24px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.line-foot b{font-family:var(--head);font-weight:900;font-size:30px;line-height:1.15;
  font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.line-foot span{font-size:14.5px;color:var(--ink-3)}

/* --- Team -----------------------------------------------------
   Die Kacheln sind bewusst schmal: drei Portraits brauchen keine 350 px
   Breite, um zu wirken, und in der Reihe wirken sie als Gruppe.
   Reihenfolge im Markup: Foto, Name, Fachgebiet. Der Name steht damit auf
   allen drei Kacheln auf derselben Hoehe. Vorher stand das Fachgebiet oben
   und war bei zwei von drei Personen zweizeilig – dadurch rutschten die
   Namen gegeneinander. Das laesst sich nicht mit gleichen Hoehen loesen,
   nur mit der Reihenfolge: was unterschiedlich lang ist, gehoert nach
   unten, wo darunter nichts mehr kommt. */
.team{display:grid;gap:16px;max-width:730px}
@media (min-width:760px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Zwei Behandler statt drei (12.10.2026): gleiche Kachelbreite, nur zwei Spalten.
   Ohne das stuende die dritte Spalte leer und die Reihe waere aus dem Lot. */
.team-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:481px}}
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--shadow-s)}
/* Das Seitenverhaeltnis kommt als Inline-Stil aus PH() und gewinnt gegen jede
   Regel hier – deshalb steht es im Markup auf 1/1 und nicht in dieser Datei. */
.person .ph{border:none;border-radius:0;border-bottom:2px dashed var(--line);min-height:0}
.person-txt{padding:15px 18px 17px;display:flex;flex-direction:column;gap:5px}
.person-txt h2,.person-txt h3{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:0}
/* Goldener Strich zwischen Name und Fachgebiet – derselbe Akzent wie in den
   Abschnittskoepfen, nur klein. Er gibt der Kachel eine Grundlinie, an der
   das Auge alle drei Namen auf einer Hoehe liest. */
.person-txt .role{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.55;
  position:relative;margin-top:3px;padding-top:10px}
/* Feste Breite, damit der Strich auf allen drei Kacheln gleich aussieht –
   auch dort, wo das Fachgebiet zweizeilig umbricht. */
.person-txt .role::before{content:"";position:absolute;top:0;left:0;
  width:26px;height:2px;background:var(--gold);border-radius:2px}
.person-txt p{color:var(--ink-2);font-size:15.5px}
/* Taetigkeiten unter der Haupttaetigkeit: eine je Zeile, ohne Trennzeichen.
   Begruendung: Ein Trennzeichen im Fliesstext steht mal mitten in der Zeile und
   mal am Zeilenende - wo umgebrochen wird, haengt von der Kachelbreite ab und
   ist nicht vorhersehbar. Ohne Trennzeichen stellt sich die Frage nicht.
   Der Abstand kommt aus gap, nicht aus line-height: So bleibt ein langer
   Eintrag wie "US-amerikanische Chiropraktik" intern eng gesetzt, waehrend
   zwischen den Eintraegen Luft steht. */
/* Klarstellung unter der Taetigkeitsliste, neu am 30.09.2026. Anlass ist das
   Anwaltsgutachten: Wird ein Physiotherapeut als einer von drei Behandlern
   gezeigt, kann der Eindruck entstehen, er erbringe auch die Leistungen, die
   im Praxisnamen stehen (Paragraf 5 UWG). Die Zeile steht bewusst klein und
   ruhig - sie ist eine Klarstellung, keine Warnung. */
.person-txt .klarst{display:block;margin-top:8px;font-size:13px;line-height:1.45;
  color:var(--ink-3)}
.person-txt .taetig{font-family:var(--head);font-weight:400;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;
  margin-top:11px;display:flex;flex-direction:column;gap:7px}
/* Auf dem Handy stehen die drei Kacheln untereinander. Mit quadratischem Foto
   waeren das rund 1100 px Scrollstrecke fuer drei Namen. Deshalb hier
   nebeneinander: Foto links, Name und Fachgebiet rechts – ein Drittel der Hoehe.
   Der Motivtext im Fotoplatz ist ausgeblendet, weil er in 110 px unlesbar ist;
   im Markup bleibt er stehen, damit die Shotlist ihn weiter findet. */
@media (max-width:759px){
  .person{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:stretch}
  /* Breite UND Hoehe fest: nur dann wird das Seitenverhaeltnis aus dem
     Inline-Stil ignoriert. Mit nur einem der beiden Werte rechnet der Browser
     den anderen aus dem Verhaeltnis und der Kasten laeuft aus seiner Spalte –
     gemessen 161 px, danach 121 px in einer 110-px-Spalte. */
  .person .ph{width:110px;height:auto;min-height:110px;min-width:0;align-self:stretch;
    overflow:hidden;padding:8px;border-bottom:none;border-right:2px dashed var(--line)}
  .person .ph-txt{display:none}
  .person-txt{padding:14px 16px;justify-content:center}
}

/* --- FAQ ------------------------------------------------------ */
.faq{display:flex;flex-direction:column;gap:10px}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden}
details[open]{border-color:var(--gold-80)}
summary{cursor:pointer;padding:19px 24px;font-family:var(--head);font-weight:600;font-size:17px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:700;font-size:23px;color:var(--ink-3);line-height:1}
details[open] summary::after{content:"\2013"}
details .a{padding:0 24px 22px;color:var(--ink-2);font-size:16.5px;max-width:72ch}
details .a p+p{margin-top:10px}

/* --- Kontakt / Anfahrt ---------------------------------------- */
.here{display:grid;gap:22px}
@media (min-width:880px){.here{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Zwei echte Spalten ueber ALLE Zeilen hinweg.
   Frueher war jede .info-Zeile ein eigenes Flex-Kaestchen mit min-width:104px am
   Label. Ein Label, das breiter ist als 104px (SPRECHZEITEN misst 112,4px),
   schob dann nur seinen eigenen Wert nach rechts – die Wertespalte stand nicht
   mehr untereinander. Deshalb liegt das Raster jetzt auf der Liste und die
   Zeilen-Container werden mit display:contents aufgeloest. max-content nimmt die
   Breite des laengsten Labels, egal welches spaeter dazukommt.
   align-items:baseline setzt Label und Wert auf eine gemeinsame Schriftlinie –
   das ersetzt das fruehere padding-top:3px und stimmt auch dann, wenn im Wert
   ein gelber Platzhalter (.x, 0.9em) statt normalem Text steht.
   align-content:start ist noetig, weil .info-list ein Grid-Item in .here ist und
   damit auf die Hoehe des danebenstehenden Formulars gestreckt wird. Ohne diese
   Zeile verteilt das Raster die ueberschuessige Hoehe auf die Zeilenabstaende –
   die Liste zoege sich auf dem Desktop auseinander. */
.info-list{display:grid;grid-template-columns:max-content minmax(0,1fr);
  column-gap:18px;row-gap:15px;align-items:baseline;align-content:start}
.info{display:contents}
.info-k{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.info-v{font-size:16.5px}
/* Telefon- und E-Mail-Link waren 20 px hoch, der Abstand zum naechsten Bedienelement
   23 px - ein Pixel unter der Schwelle von WCAG 2.5.8 (Zielgroesse, Stufe AA).
   inline-block plus 2 px oben und unten macht 24 px daraus. */
.info-v a{display:inline-block;padding-block:2px}
/* Schmale Geraete: nebeneinander wird die Wertespalte zu eng, also Label
   ueber den Wert. Das Raster wird dafuer wieder aufgeloest. */
@media (max-width:559px){
  .info-list{display:flex;flex-direction:column;gap:17px}
  .info{display:block}
  .info-k{display:block;margin-bottom:4px}}
.towns{display:grid;gap:12px}
@media (min-width:700px){.towns{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.town{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 18px;font-size:15.5px}
.town b{font-family:var(--head);font-weight:700}
.town span{color:var(--ink-3);display:block;font-size:14.5px;margin-top:2px}

/* --- Formular ------------------------------------------------- */
form.contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:26px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-s)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--head);font-weight:600;font-size:14px}
.field .hint{font-size:14px;color:var(--ink-3)}
.field input,.field textarea{font-family:var(--body);font-size:16.5px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--ground);color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--gold);outline:2px solid var(--gold-40)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.consent input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--gold)}
.formnote{font-size:14.5px;color:var(--ink-3)}
/* Honigtopf. Nicht display:none – manche Bots erkennen das und lassen das Feld
   dann in Ruhe. Stattdessen aus dem Sichtfeld geschoben, fuer Screenreader per
   aria-hidden am Elternelement ausgenommen und aus der Tabreihenfolge genommen. */
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --- Ankuendigungsband ----------------------------------------
   Schmaler Streifen ueber der Kopfzeile, auf allen Seiten. Anthrazit auf Gold
   ist 6,6:1 und damit das einzige zulaessige Gold-Paar aus dem Brand Manual –
   Weiss auf Gold waere 1,7:1 und faellt durch. */
.ank{display:block;background:var(--gold);color:#363C42;text-decoration:none;
  font-family:var(--body);font-size:15px;line-height:1.45;
  padding:11px clamp(18px,4.5vw,40px);text-align:center}
.ank strong{font-family:var(--head);font-weight:700}
.ank-mehr{white-space:nowrap;font-family:var(--head);font-weight:700;
  border-bottom:2px solid rgba(54,60,66,.45);padding-bottom:1px}
.ank:hover .ank-mehr{border-bottom-color:#363C42}
/* Die Kopfzeile klebt beim Scrollen oben. Das Band soll mitscrollen und
   verschwinden – sonst frisst es dauerhaft Hoehe auf dem Handy. */
@media (max-width:640px){.ank{font-size:14px}
  .ank-lang{display:none}}

/* --- CTA-Band ------------------------------------------------- */
.band{background:var(--inv-bg);color:var(--inv-fg);border-radius:var(--r-l);
  padding:clamp(28px,4.4vw,50px);display:flex;flex-direction:column;gap:17px;align-items:flex-start}
.band h2{color:var(--inv-fg)}
.band p{color:var(--inv-fg2);max-width:58ch}
.band .btn-2{color:var(--inv-fg);border-color:rgba(255,255,255,.45)}
.band .btn-2:hover{border-color:var(--inv-fg)}
.band .eyebrow{color:var(--gold)}

/* --- Fusszeile ------------------------------------------------ */
footer.site{background:var(--inv-bg);color:var(--inv-fg2);padding:clamp(38px,5vw,60px) 0 32px}
.foot-grid{display:grid;gap:30px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.5fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
footer.site .brand{width:240px;margin-bottom:14px}
/* h2 statt h4 seit 16.09.2026: Die Fusszeile sprang von h2 auf h4 und liess damit
   eine Ebene aus - fuer die Ueberschriftenliste im Screenreader eine Luecke. Der
   Rang ist jetzt richtig, die Groesse kommt wie vorher aus dieser Regel. */
footer.site h2{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inv-fg2);margin-bottom:13px}
footer.site a{color:var(--inv-fg);text-decoration:none;font-size:16px}
footer.site a:hover{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sister{margin-top:16px;font-size:15px;color:var(--inv-fg2);line-height:1.55}
.legal{border-top:1px solid var(--inv-line);margin-top:32px;padding-top:22px;display:flex;
  flex-wrap:wrap;gap:10px 26px;font-size:14.5px;color:var(--inv-fg2)}

/* --- Brotkrumen ----------------------------------------------- */
.crumbs{font-size:14.5px;color:var(--ink-3);padding:16px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li:not(:last-child)::after{content:"›";padding-left:6px;color:var(--ink-4)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* --- Mobile Aktionsleiste ------------------------------------- */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1px;background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.sticky a{background:var(--surface);color:var(--ink);text-decoration:none;padding:16px 10px;
  text-align:center;font-family:var(--head);font-weight:700;font-size:15.5px}
.sticky a.call{background:var(--gold);color:#363C42}
@media (min-width:860px){.sticky{display:none}}

/* --- Druck ---------------------------------------------------- */
@media print{.bar,.sticky,.band,footer.site{display:none}
  body{padding:0;font-size:11pt;background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}}

/* --- Fett-Leicht-Mix (Brand Manual) ----------------------------
   Der hervorgehobene Wortteil fett, der Rest leicht, in Versalien. Die Marke
   macht es auf der Visitenkarte selbst vor: PHYSIOtherapie, ERGOtherapie.
   Bewusst NUR an den drei Leistungsnamen - überall sonst wäre es Dekoration
   statt System.

   WARUM DIESE REGEL GANZ UNTEN STEHT: `.card>h3` weiter oben ist genauso
   spezifisch wie eine Klasse am Element. Bei Gleichstand gewinnt die spätere
   Regel. Steht dieser Block weiter oben, bleibt die Überschrift still fett -
   sichtbar wird der Fehler nur im Screenshot, nicht im Code. */
h1.mix,h2.mix,h3.mix{font-weight:300;text-transform:uppercase;letter-spacing:.015em}
h1.mix b,h2.mix b,h3.mix b{font-weight:700}