/* Lotrecht Physiotherapie: Petrol wie die Wand im Behandlungsraum, Gipsweiß, Bernstein wie die Bandscheiben
   und das gelbe Übungsband. Atkinson Hyperlegible für den Text, weil viele Patienten älter sind und schlecht sehen. */
@font-face{font-family:"Familjen Grotesk";src:url(../fonts/familjen-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --nacht:#0F2A31; --nacht-2:#173A43; --gips:#EEF2F1; --flaeche:#FFFFFF; --tinte:#11252C; --tinte-weich:#4A5D63;
  --band:#E8A33A; --band-text:#8A570C; --hell:#EAF0EE; --hell-weich:#A9BEBF;
  --linie:rgba(17,37,44,.14); --linie-hell:rgba(234,240,238,.16);
  --f-display:"Familjen Grotesk",system-ui,sans-serif; --f-text:"Atkinson Hyperlegible",system-ui,sans-serif;
  --rand:clamp(16px,4vw,48px); --breite:1240px; --kopf:68px;
  --ms-accent:#E8A33A; --ms-on:#0F2A31; --ms-font:var(--f-text);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--gips);color:var(--tinte);font:400 18px/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:var(--band-text);text-underline-offset:.2em;text-decoration-thickness:1.5px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--band);outline-offset:3px}
.weit{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.augenbraue{display:block;font:700 .82rem/1.3 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--band-text)}
.dunkel .augenbraue{color:var(--band)}
.leise{color:var(--tinte-weich)}
[hidden]{display:none!important}
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:10px;background:var(--tinte);color:#fff;
  font:700 1rem/1.15 var(--f-text);text-decoration:none;border:0;cursor:pointer;flex:none;transition:background-color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.knopf:hover{background:var(--nacht-2);transform:translateY(-1px)}
.knopf--band{background:var(--band);color:var(--nacht)}
.knopf--band:hover{background:#F2B65A}
.knopf--rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte)}
.knopf--rand:hover{background:var(--tinte);color:#fff}
.dunkel .knopf--rand{color:var(--hell);box-shadow:inset 0 0 0 2px var(--hell)}
.dunkel .knopf--rand:hover{background:var(--hell);color:var(--nacht)}
.knopf--gross{min-height:56px;padding:15px 26px;font-size:1.06rem}

/* Kopf */
.kopf{position:sticky;top: var(--hit-h,0px);z-index:50;height: var(--kopf);display:flex;align-items:center;gap:20px;padding:0 var(--rand);
  background:color-mix(in oklab,var(--nacht) 90%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:var(--hell);border-bottom:1px solid var(--linie-hell)}
.marke{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;flex:none}
.marke__zeichen{width:30px;height:38px;flex:none}
.marke span{font:600 1.36rem/1 var(--f-display);letter-spacing:-.03em}
.marke small{display:block;font:400 .76rem/1.2 var(--f-text);letter-spacing:.01em;color:var(--hell-weich);margin-top:4px}
.kopf__nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.kopf__nav a{padding:9px 13px;border-radius:8px;color:var(--hell);text-decoration:none;font-weight:700;font-size:.97rem}
.kopf__nav a:hover{background:rgba(234,240,238,.09)}
.kopf__nav a[aria-current]{background:rgba(234,240,238,.13)}
.kopf__tel{color:var(--hell-weich)!important;font-variant-numeric:tabular-nums;font-weight:400!important}
.kopf .knopf{background:var(--band);color:var(--nacht)}
.kopf .knopf:hover{background:#F2B65A}
.kopf__menue{display:none}
@media (max-width:900px){
  .kopf__nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--rand) 16px;background:var(--nacht);
    border-bottom:1px solid var(--linie-hell);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
  .kopf__nav.offen{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s}
  .kopf__nav a{padding:15px 4px;border-radius:0;border-bottom:1px solid var(--linie-hell)}
  .kopf__menue{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;padding:0 16px;border-radius:8px;background:none;border:2px solid var(--hell);
    font:700 .94rem/1 var(--f-text);color:var(--hell);cursor:pointer}
  .kopf__menue[aria-expanded="true"]{background:var(--hell);color:var(--nacht)}
}
@media (max-width:480px){.marke small{display:none}.kopf{gap:10px}.kopf .knopf{padding:10px 13px;font-size:.92rem;min-height:44px}.kopf__menue{padding:0 12px}}
@media (max-width:370px){.marke__zeichen{display:none}}

/* Unterseiten */
.seitenkopf{position:relative;background:var(--nacht);color:var(--hell);padding:80px 0 120px}
.seitenkopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(238,242,241,0),var(--gips));pointer-events:none}
.seitenkopf > .weit{position:relative;z-index:1}
@media (max-width:700px){.seitenkopf{padding:44px 0 100px}}
.seitenkopf h1{font-size:clamp(2.6rem,1.4rem + 4.4vw,4.8rem);margin:14px 0 18px;max-width:16ch}
.seitenkopf p{font-size:1.18rem;color:var(--hell-weich);max-width:38rem}
.seitenkopf a{color:var(--band)}

/* Fuß */
.fuss{background:var(--nacht);color:var(--hell-weich);padding:52px 0 36px;font-size:.97rem}
.fuss__innen{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:1.1fr 1.5fr 1.2fr;gap:24px 44px;align-items:start}
.fuss a{color:var(--hell)}
.fuss .marke{color:var(--hell)}
.fuss__klein{grid-column:1/-1;border-top:1px solid var(--linie-hell);padding-top:18px;font-size:.86rem}
.fuss :focus-visible{outline-color:#fff}
@media (max-width:760px){.fuss__innen{grid-template-columns:1fr}}
.hit-fuss{padding-bottom:64px}

/* Auswahl-Chips (Rezeptseite, Wirbelsäule) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:10px;border:2px solid var(--linie);background:var(--flaeche);
  font:700 .98rem/1.1 var(--f-text);color:var(--tinte);cursor:pointer;transition:border-color .2s,background-color .2s}
.chip:hover{border-color:var(--tinte)}
.chip[aria-pressed="true"],.chip:has(input:checked){border-color:var(--tinte);background:var(--tinte);color:#fff}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:focus-visible){outline:3px solid var(--band);outline-offset:3px}