/* Physio Steiner · Website · Stylesheet
   Grundlage: Brandbook 2.2 und Hi-Fi-Entwurf (02-design/physio-steiner-hifi.html), Stand 29. September 2026.
   Aufbau: 1 Tokens · 2 Schrift · 3 Grundlagen · 4 Bausteine aus dem Hi-Fi · 5 Website-Ergänzungen · 6 Tablet · 7 Smartphone · 8 Druck

   Farbregel: Signalorange nur für Route, Ziel-Punkt und Markierungen. Nie als Text, nie auf Nebel. Fokusrahmen nachtblau (weiss auf dunklen Flächen), damit der Kontrast mindestens 3:1 beträgt.
   Einziger Hauptknopf: «Termin buchen» in Nachtblau. Auf dem Smartphone nur in der fixierten Leiste. */

/* ---------- 1 Tokens (aus 02-design/brand-tokens-v2.css) ---------- */
:root{
  --ps-nachtblau:#17233B;      /* Text, Knöpfe, dunkle Flächen */
  --ps-nachtblau-hell:#2A3A5C; /* Hover von Knöpfen */
  --ps-orange:#FF5A1F;         /* nur Route, Ziel-Punkt, Markierungen */
  --ps-schiefer:#566172;       /* Nebentext, Rahmen von Formularfeldern */
  --ps-weiss:#FFFFFF;
  --ps-nebel:#EEF2F5;          /* Flächen, Abschnitte */
  --ps-linie:#D6DDE5;          /* Trennlinien */
  --ps-hell:#C9D3DE;           /* Nebentext auf Nachtblau */
  --ps-font:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --ps-h1:clamp(36px,5vw,56px);
  --ps-h2:clamp(28px,3.4vw,36px);
  --ps-h3:clamp(18px,1.8vw,20px);
  --ps-text:clamp(17px,1.2vw,18px);
  --ps-radius:4px;
  --ps-max-breite:1200px;
}

/* ---------- 2 Schrift: Schibsted Grotesk, variabel 400 bis 900, selbst gehostet (SIL Open Font License) ---------- */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 3 Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;font-family:var(--ps-font);font-size:var(--ps-text);line-height:1.6;color:var(--ps-nachtblau);background:var(--ps-weiss);-webkit-font-smoothing:antialiased}
a{color:var(--ps-nachtblau)}
:focus-visible{outline:3px solid var(--ps-nachtblau);outline-offset:3px}
.dark :focus-visible{outline-color:var(--ps-weiss)}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ps-nachtblau);color:var(--ps-weiss);padding:12px 18px;border-radius:var(--ps-radius);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.demo-hinweis{margin:0;background:var(--ps-nebel);color:var(--ps-schiefer);font-size:13px;line-height:1.4;text-align:center;padding:7px 16px}

/* ---------- 4 Bausteine aus dem Hi-Fi ---------- */
.wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ps-schiefer)}
.h1{font-size:var(--ps-h1);font-weight:850;letter-spacing:-.03em;line-height:1.02}
.h2{font-size:var(--ps-h2);font-weight:800;letter-spacing:-.025em;line-height:1.06}
/* Überschriften: Umbruch nach Sinnschritten. Wortgruppen mit   verbunden, Zeilen ausgeglichen, keine Silbentrennung */
.h1,.h2,.h3,h3,.eyebrow,.quote q{text-wrap:balance;hyphens:manual}
.h3{font-size:var(--ps-h3);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.lead{font-size:20px;color:var(--ps-schiefer);max-width:38ch}
p,.lead{text-wrap:pretty}
.muted{color:var(--ps-schiefer)}
.small{font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;font-family:var(--ps-font);font-weight:600;font-size:17px;border-radius:4px;border:0;cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap}
.btn-p{background:var(--ps-nachtblau);color:var(--ps-weiss)!important}
.btn-p:hover{background:var(--ps-nachtblau-hell)}
.btn-w{background:var(--ps-weiss);color:var(--ps-nachtblau)!important}
.lnk{padding-block:3px;font-weight:600;text-decoration:underline;text-decoration-color:var(--ps-orange);text-decoration-thickness:2px;text-underline-offset:6px;cursor:pointer}
.dark .lnk{color:var(--ps-weiss)}
.wm{font-weight:850;letter-spacing:-.025em;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer}
.wm{display:inline-flex;align-items:center;padding-block:2px}
.wm img{display:block;flex:none;height:.9912em;width:7.1152em}
.sec{padding-block:112px}
.sec.nebel{background:var(--ps-nebel)}
.sec.dark{background:var(--ps-nachtblau);color:var(--ps-weiss)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:48px;max-width:720px}

/* Kopfzeile */
.hd{display:flex;align-items:center;gap:32px;padding-block:22px;border-bottom:1px solid var(--ps-linie)}
.hd .wm{font-size:25px}
.nav{display:flex;gap:28px;margin-left:auto;font-size:16px;font-weight:500}
.nav a{text-decoration:none;cursor:pointer;padding-block:4px}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ps-orange);text-decoration-thickness:2px;text-underline-offset:8px}
.hd .btn{padding:12px 18px;font-size:16px}
.menubtn{display:none;margin-left:auto;font:inherit;font-weight:600;font-size:16px;background:none;border:1.5px solid var(--ps-nachtblau);border-radius:4px;padding:8px 14px;color:var(--ps-nachtblau);cursor:pointer}
.mnav{display:none;flex-direction:column;border-bottom:1px solid var(--ps-linie);background:var(--ps-weiss)}
.mnav a{padding:16px 20px;border-top:1px solid var(--ps-linie);text-decoration:none;font-weight:500;cursor:pointer}
.mnav a.cta{font-weight:700}
.mnav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ps-orange);text-decoration-thickness:2px;text-underline-offset:6px}

/* Einstieg */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;padding-block:72px 64px}
.hero .txt{display:flex;flex-direction:column;gap:22px}
.cta-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.weichen{display:flex;flex-direction:column;gap:6px;padding-top:20px;margin-top:8px;border-top:1px solid var(--ps-linie);font-size:15px;color:var(--ps-schiefer)}
.weichen a{font-weight:600;color:var(--ps-nachtblau)}
.ph{position:relative;display:flex;align-items:flex-end;border-radius:4px;overflow:hidden;background:
  radial-gradient(120% 90% at 70% 20%,rgba(255,255,255,.35),transparent 60%),linear-gradient(165deg,#CBD5E0,#9CAABD)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero .ph{aspect-ratio:4/5}

/* Route */
.route-sec{padding-block:24px 104px}
.route-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.route svg{display:block;width:100%;height:auto;overflow:visible}
.route text{font-family:var(--ps-font);fill:var(--ps-nachtblau)}
.route text.t{font-size:15px;font-weight:700}
.route text.d{font-size:13px;fill:var(--ps-schiefer)}
.vroute{display:none;flex-direction:column;padding-left:22px;border-left:3px solid var(--ps-orange);margin-left:8px}
.vroute div{position:relative;padding:2px 0 22px;display:flex;flex-direction:column;gap:2px}
.vroute div::before{content:"";position:absolute;left:-33px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--ps-weiss);border:3px solid var(--ps-orange)}
.vroute div:first-child::before{border-color:var(--ps-nachtblau)}
.vroute div:last-child{padding-bottom:0}
.vroute div:last-child::before{background:var(--ps-orange)}
.vroute b{font-size:17px}
.vroute span{font-size:15px;color:var(--ps-schiefer)}
.route-foot{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:28px;font-size:16px}

/* Ziele */
.goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.goal{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.goal .ph{aspect-ratio:4/3;border-radius:0}
.goal .gbody{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.mk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ps-schiefer);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mk::before{content:"";width:30px;height:12px;background:linear-gradient(var(--ps-orange),var(--ps-orange)) left center/20px 3px no-repeat,radial-gradient(circle,var(--ps-orange) 4.5px,transparent 5px) right center/12px 12px no-repeat}
.goal p{font-size:16px;color:var(--ps-schiefer)}
.goal .lnk{margin-top:auto;padding-top:10px;font-size:16px}

/* Über mich */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.about .ph{aspect-ratio:4/5}
.about .txt{display:flex;flex-direction:column;gap:20px;max-width:560px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:20px;border-top:1px solid var(--ps-linie)}
.facts div{display:flex;flex-direction:column;gap:2px}
.facts b{font-size:28px;font-weight:850;letter-spacing:-.02em;line-height:1.1}
.facts span{font-size:14px;color:var(--ps-schiefer);line-height:1.35}

/* Zitat */
.quote{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:end}
.quote q{font-size:34px;font-weight:750;letter-spacing:-.02em;line-height:1.2;quotes:"«" "»"}
.quote .who{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ps-schiefer)}
.quote .who::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ps-nachtblau);flex:none}

/* Entscheidungshilfe */
.help{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--ps-linie);border-radius:4px;overflow:hidden;background:var(--ps-weiss)}
.help .q{grid-column:1/-1;background:var(--ps-nachtblau);color:var(--ps-weiss);padding:18px 24px;font-weight:700;font-size:20px}
.help .opt{padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.help .opt+.opt{border-left:1px solid var(--ps-linie)}
.help .opt small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ps-schiefer);font-weight:600}
.help .opt p{font-size:16px;color:var(--ps-schiefer)}
.help .opt .lnk{font-size:16px;margin-top:6px}
.help-foot{margin-top:24px;font-size:15px;color:var(--ps-schiefer)}

/* Pakete */
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pack{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:12px}
.pack .big{font-size:56px;font-weight:850;letter-spacing:-.03em;line-height:1}
.pack .big small{font-size:20px;font-weight:600;letter-spacing:0;color:var(--ps-schiefer);margin-left:8px}
.pack ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:16px}
.pack .price{display:flex;align-items:baseline;gap:10px;padding-top:14px;margin-top:4px;border-top:1px solid var(--ps-linie)}
.pack .price b{font-size:30px;font-weight:850;letter-spacing:-.02em;line-height:1}
.pack .price span{font-size:14px;color:var(--ps-schiefer)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid var(--ps-nachtblau);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}

/* Geschichte */
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center}
.story .ph{aspect-ratio:3/2}
.story .txt{display:flex;flex-direction:column;gap:16px}
.story ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.story li{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:16px;border-top:1px solid var(--ps-linie);padding-top:12px}
.story li b{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ps-schiefer);font-weight:600;padding-top:3px}

/* Abschluss */
.final{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.final .txt{display:flex;flex-direction:column;gap:18px}
.final p{color:#C9D3DE;max-width:46ch}
.final .side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.final .side span{color:#C9D3DE;font-size:15px}
.final .fsvg{width:100%;max-width:420px;height:auto}

/* Fusszeile */
.ft{background:var(--ps-weiss);border-top:1px solid var(--ps-linie);padding-block:64px 104px}
.ft-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:40px}
.ft .wm{font-size:26px}
.ft p,.ft li{font-size:15px;color:var(--ps-schiefer)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ft ul a{display:inline-block;padding-block:3px;text-decoration:none;cursor:pointer;color:var(--ps-nachtblau);font-size:15px}
.ft ul a:hover{text-decoration:underline;text-decoration-color:var(--ps-orange)}
.ft h2{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ps-schiefer);font-weight:600;margin-bottom:10px}
.nl{display:flex;gap:8px;margin-top:12px}
.nl input{flex:1;min-width:0;width:100%;font:inherit;font-size:15px;border:1.5px solid var(--ps-schiefer);border-radius:4px;padding:11px 12px;background:var(--ps-weiss);color:var(--ps-nachtblau)}
.nl button{font:inherit;font-weight:600;font-size:15px;border:1.5px solid var(--ps-nachtblau);background:var(--ps-weiss);color:var(--ps-nachtblau);border-radius:4px;padding:10px 14px;cursor:pointer}
.ft-bottom{margin-top:48px;padding-top:20px;border-top:1px solid var(--ps-linie);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--ps-schiefer)}

/* WhatsApp und Smartphone-Leiste */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:20;background:var(--ps-weiss);border:1.5px solid var(--ps-nachtblau);border-radius:999px;padding:11px 18px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 6px 18px rgba(23,35,59,.15);cursor:pointer}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ps-weiss);border-top:1px solid var(--ps-linie);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
.mbar .btn{flex:1;padding:14px 16px}
.mbar .wa{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ps-nachtblau);border-radius:999px;padding:12px 14px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}

/* So läuft’s */
.demo{display:inline-block;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ps-schiefer);border:1px dashed var(--ps-schiefer);border-radius:3px;padding:2px 7px;line-height:1.4}
.quote .demo{margin-top:10px}
.nw{white-space:nowrap}
.cost{border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--ps-weiss)}
.cost-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding-top:14px;border-top:1px solid var(--ps-linie)}
.cost-row div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cost-row b{font-size:18px}
.cost-row span{font-size:15px;color:var(--ps-schiefer);line-height:1.4}
.cost .amt{font-size:40px;font-weight:850;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--ps-nachtblau)}
.cost .amt-s{font-size:26px}
.cost p{font-size:15px;color:var(--ps-schiefer);line-height:1.5}
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.part{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:10px}
.part .n{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ps-schiefer)}
.part p{font-size:16px;color:var(--ps-schiefer)}
.sb-foot{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px;align-items:center;margin-top:24px;background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:28px}
.sb-foot .txt{display:flex;flex-direction:column;gap:12px}
.sb-foot .btn{justify-self:end}
.promise{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.promise::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--ps-orange);margin-top:9px}
.between{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;margin-top:48px;padding-top:32px;border-top:1px solid var(--ps-linie)}
.between .txt{display:flex;flex-direction:column;gap:12px}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fit-col{border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px}
.fit-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fit-col li{position:relative;padding-left:26px;font-size:17px;text-wrap:pretty}
.fit-col li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.fit-col.yes li::before{background:var(--ps-orange)}
.fit-col.no li::before{border:2.5px solid var(--ps-nachtblau)}
.fit-col .lnk{font-size:16px;white-space:nowrap}
.faq{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:4px 28px;max-width:880px}
.faq details+details{border-top:1px solid var(--ps-linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:20px 0;font-weight:700;font-size:19px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:600;font-size:24px;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 22px;display:flex;flex-direction:column;gap:10px;max-width:66ch}
.faq .ans p{font-size:17px}
.faq .ans .ph-t{color:var(--ps-schiefer)}

/* Ziel-Seiten, Über mich, Verordnung, Zuweisende, Kontakt */
.sec.tight{padding-block:80px}
.hero.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.hero.rev .ph{order:-1}
.hero .ph.land{aspect-ratio:3/2}
.big{font-size:22px;line-height:1.5;color:var(--ps-nachtblau)}
.scene{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start}
.scene .txt{display:flex;flex-direction:column;gap:18px}
.card-list{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:18px}
.card-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.card-list li{position:relative;padding-left:26px;font-size:16px;color:var(--ps-schiefer);line-height:1.5;text-wrap:pretty}
.card-list li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--ps-orange)}
.card-list li b{display:block;color:var(--ps-nachtblau);font-size:17px;line-height:1.35;margin-bottom:2px}
.others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.other{display:flex;flex-direction:column;gap:8px;background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:24px;text-decoration:none;cursor:pointer}
.other b{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.other .muted{font-size:16px}
.other .go{margin-top:auto;padding-top:6px;font-weight:600;font-size:16px;text-decoration:underline;text-decoration-color:var(--ps-orange);text-decoration-thickness:2px;text-underline-offset:6px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.split .head{display:flex;flex-direction:column;gap:12px}
.split .txt{display:flex;flex-direction:column;gap:18px;max-width:640px}
.cv{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:6px 28px;max-width:880px}
.cv>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px 0;align-items:baseline}
.cv>div+div{border-top:1px solid var(--ps-linie)}
.cv b{font-size:22px;font-weight:850;letter-spacing:-.01em;line-height:1.2}
.cv span{display:flex;flex-direction:column;gap:2px;font-weight:600}
.cv small{font-size:15px;font-weight:400;color:var(--ps-schiefer)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gallery .ph{aspect-ratio:4/3}
.focus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.focus>div{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:8px}
.focus p{font-size:16px;color:var(--ps-schiefer)}
.call{border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--ps-weiss)}
.call .row0{display:flex;flex-direction:column;gap:2px}
.call .row0 span{font-size:15px;color:var(--ps-schiefer)}
.call .num{font-size:36px;font-weight:850;letter-spacing:-.02em;line-height:1.1;text-decoration:none;white-space:nowrap}
.call .row{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid var(--ps-linie);font-size:16px}
.call .row span{font-size:15px;color:var(--ps-schiefer);line-height:1.45}
.call .row .lnk{align-self:flex-start}
.parts.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
.band{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px;align-items:center;background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:28px}
.band .txt{display:flex;flex-direction:column;gap:10px}
.band p{font-size:16px;color:var(--ps-schiefer);max-width:60ch}
.band .lnk{justify-self:end}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.box{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px}
.box p{font-size:17px}
.box ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:16px}
.ways{margin-top:32px}
.skizze{margin-top:22px}
#h-bu{hyphens:none}
.hours{margin:0;display:flex;flex-direction:column}
.hours>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--ps-linie);font-size:16px}
.hours dt{font-weight:600}
.hours dd{margin:0;text-align:right}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;max-width:880px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.fld.full{grid-column:1/-1}
.fld input,.fld textarea{font:inherit;font-weight:400;font-size:17px;border:1.5px solid var(--ps-schiefer);border-radius:4px;padding:12px 14px;background:var(--ps-weiss);color:var(--ps-nachtblau);width:100%;min-width:0}
.fld textarea{min-height:110px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ps-schiefer)}
.fld .btn{align-self:flex-start}
.btn-o{background:var(--ps-weiss);color:var(--ps-nachtblau)!important;border:1.5px solid var(--ps-nachtblau)}
.tel{font-size:34px;font-weight:850;letter-spacing:-.02em;line-height:1.1;color:var(--ps-weiss)!important;text-decoration:none;white-space:nowrap}

/* Buchung (Buchungssystem) */
.bhead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start;padding-block:64px 48px}
.bhead .txt{display:flex;flex-direction:column;gap:18px}
.hint-box{border:1px solid var(--ps-linie);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:10px;background:var(--ps-weiss)}
.hint-box p{font-size:16px;color:var(--ps-schiefer)}
.hint-box .lnk{align-self:flex-start;font-size:16px}
.hint-box .sep{padding-top:14px;margin-top:6px;border-top:1px solid var(--ps-linie)}
.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:112px}
.bstep{background:var(--ps-weiss);border:1px solid var(--ps-linie);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px}
.bstep .n{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ps-schiefer)}
.bstep .lnk{align-self:flex-start;font-size:16px}
.bstep>.btn{align-self:flex-start}
.bstep .form{gap:14px 16px}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slot{font:inherit;font-size:15px;text-align:left;border:1.5px solid var(--ps-linie);border-radius:4px;background:var(--ps-weiss);color:var(--ps-nachtblau);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;line-height:1.35}
.slot b{font-size:16px}
.slot[aria-pressed="true"]{border-color:var(--ps-nachtblau);box-shadow:inset 0 0 0 1.5px var(--ps-nachtblau)}
.pick{display:flex;flex-direction:column;gap:10px}
.opt-r{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--ps-linie);border-radius:4px;padding:12px 14px;font-size:16px;cursor:pointer}
.opt-r input{width:18px;height:18px;margin-top:4px;accent-color:var(--ps-nachtblau);flex:none}
.opt-r b{display:block}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--ps-nachtblau);flex:none}
.conf{margin:0;display:flex;flex-direction:column}
.conf>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--ps-linie);font-size:16px}
.conf dt{color:var(--ps-schiefer);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding-top:3px}
.conf dd{margin:0}
#page-buchung[data-mode="sb"] .bk-pk,#page-buchung[data-mode="pk"] .bk-sb{display:none!important}
body.seite-buchung .mbar .btn{display:none}
body.seite-buchung .mbar .wa{flex:1}

/* ---------- Smartphone (Container-Abfrage) ---------- */
/* ---------- 5 Website-Ergänzungen ---------- */
.dark .eyebrow{color:var(--ps-hell)}
.stack{display:flex;flex-direction:column;gap:10px}
.about .lnk{align-self:flex-start}
.quote-who{display:flex;flex-direction:column;gap:6px}
.ideas{display:flex;flex-direction:column;gap:22px}
.ideas .h2{max-width:720px}
.ideas p{max-width:52ch}
/* Ziel-Karten: die ganze Karte ist klickbar */
.goal{position:relative}
.goal .lnk::after{content:"";position:absolute;inset:0}
.goal:hover{border-color:var(--ps-schiefer)}
.other:hover{border-color:var(--ps-schiefer)}
.chip:hover{background:var(--ps-nebel)}
/* Links in Fliesstext und Fusszeile */
.ft p a{display:inline-block;padding-block:3px;color:inherit;text-decoration-color:var(--ps-linie);text-underline-offset:3px}
.ft p a:hover{text-decoration-color:currentColor}
.nl button:hover,.btn-o:hover{background:var(--ps-nebel)}
.btn-w:hover{background:var(--ps-nebel)}
/* Formulare */
.form-status{margin-top:10px;font-size:15px;color:var(--ps-schiefer)}
.form-status:empty{display:none}
.fld input:focus-visible,.fld textarea:focus-visible,.nl input:focus-visible{outline:3px solid var(--ps-nachtblau);outline-offset:1px}
/* Termine als Auswahlfelder (Buchung) */
.slots,.pick{border:0;padding:0;margin:0;min-width:0}
.slot{position:relative}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot:has(input:checked){border-color:var(--ps-nachtblau);box-shadow:inset 0 0 0 1.5px var(--ps-nachtblau)}
.slot:has(input:focus-visible){outline:3px solid var(--ps-nachtblau);outline-offset:2px}
.book .bstep:target,.bstep:focus-within{border-color:var(--ps-schiefer)}
/* Rechtstexte */
.legal{max-width:760px;padding-block:64px 112px;display:flex;flex-direction:column;gap:18px}
.legal h2{font-size:var(--ps-h3);font-weight:700;letter-spacing:-.01em;line-height:1.25;margin-top:18px}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal .muster{border:1px dashed var(--ps-schiefer);border-radius:var(--ps-radius);padding:14px 16px;font-size:15px;color:var(--ps-schiefer)}
/* 404 */
.notfound{padding-block:96px 112px;display:flex;flex-direction:column;gap:20px;max-width:720px}

/* ---------- 6 Tablet und kleine Laptops ---------- */
@media (max-width:1100px){
  .route svg{display:none}
  .vroute{display:flex;margin-top:16px}
  .route-sec{padding-block:8px 88px}
}
@media (max-width:1040px){
  .nav{display:none}
  .hd .btn{margin-left:auto}
  .menubtn{display:inline-flex;margin-left:0}
  .no-js .mnav,.mnav.open{display:flex}
  .parts.p4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .focus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-grid>:last-child{grid-column:1/-1;max-width:420px}
}
@media (max-width:900px){
  .wrap{padding-inline:32px}
  .hero,.bhead,.about,.story,.final,.scene,.split{gap:40px}
  .sec{padding-block:96px}
  .book{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 7 Smartphone (bis 720 px) ---------- */
@media (max-width:720px){
  .wrap{padding-inline:16px}
  html{scroll-padding-bottom:96px}
  .hd{padding-block:14px;gap:12px}
  .hd .wm{font-size:21px}
  .hd .btn{display:none}
  .menubtn{margin-left:auto}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .h1{font-size:36px}
  .h2{font-size:28px}
  .h3{font-size:18px}
  .lead{font-size:18px}
  .sec{padding-block:72px}
  .sec-head{margin-bottom:32px}
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:32px 40px}
  .hero .ph{aspect-ratio:4/3}
  .hero .btn-hero{display:none}
  .route-sec{padding-block:8px 72px}
  .route svg{display:none}
  .vroute{display:flex;margin-top:16px}
  .goals{grid-template-columns:1fr;gap:16px}
  .about{grid-template-columns:1fr;gap:28px}
  .about .ph{aspect-ratio:1/1}
  .facts{grid-template-columns:minmax(0,1fr);gap:10px}
  .facts div{flex-direction:row;align-items:baseline;gap:12px}
  .facts b{font-size:22px;min-width:88px}
  .quote{grid-template-columns:1fr;gap:20px}
  .quote q{font-size:25px}
  .help{grid-template-columns:1fr}
  .help .opt+.opt{border-left:0;border-top:1px solid var(--ps-linie)}
  .packs{grid-template-columns:1fr;gap:16px}
  .pack .big{font-size:44px}
  .story{grid-template-columns:1fr;gap:28px}
  .story li{grid-template-columns:1fr;gap:2px}
  .final{grid-template-columns:1fr;gap:28px}
  .final .fsvg{display:none}
  .ft{padding-block:48px 56px}
  .demo-hinweis{font-size:12px;padding:6px 16px}
  .ft-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .wa-float{display:none}
  .mbar{display:flex}
  .cost{padding:22px}
  .cost .amt{font-size:34px}
  .cost .amt-s{font-size:24px}
  .parts{grid-template-columns:1fr;gap:12px}
  .sb-foot{grid-template-columns:1fr;gap:16px;padding:22px}
  .sb-foot .btn{display:none}
  .between{grid-template-columns:1fr;gap:12px;margin-top:32px;padding-top:24px}
  .fit{grid-template-columns:1fr;gap:16px}
  .fit-col{padding:22px}
  .fit-col li{font-size:16px}
  .faq{padding:0 18px}
  .faq summary{font-size:17px;padding:16px 0}
  .faq .ans p{font-size:16px}
  .sec.tight{padding-block:56px}
  .hero.rev{grid-template-columns:minmax(0,1fr)}
  .hero.rev .ph{order:0}
  .hero .ph.land{aspect-ratio:3/2}
  .hero .cta-row .small{flex-basis:100%;margin-top:-16px}
  .big{font-size:19px}
  .scene,.split{grid-template-columns:minmax(0,1fr);gap:28px}
  .card-list{padding:22px}
  .others,.cols2,.gallery,.focus,.book,.form,.bhead{grid-template-columns:minmax(0,1fr);gap:16px}
  .parts.p4{grid-template-columns:minmax(0,1fr)}
  .cv{padding:4px 18px}
  .cv>div{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .cv b{font-size:18px}
  .call,.box,.bstep,.hint-box,.band,.focus>div{padding:22px}
  .call .num{font-size:30px}
  .band{grid-template-columns:minmax(0,1fr);gap:14px}
  .band .lnk{justify-self:start}
  .conf>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .tel{font-size:28px}
  .bhead{padding-block:32px;gap:24px}
  .book{padding-bottom:72px}
  .bstep>.btn{align-self:stretch}
  .skizze{margin-top:16px}
  #h-bu{hyphens:manual}
}

/* Bewegung reduzieren: kein sanftes Scrollen */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- 8 Druck ---------- */
@media print{
  .skip,.demo-hinweis,.nav,.mnav,.menubtn,.hd .btn,.wa-float,.mbar,.nl,.route svg .fsvg{display:none!important}
  .vroute{display:flex!important}
  .route svg{display:none!important}
  .sec{padding-block:32px}
  .sec.dark{background:none;color:var(--ps-nachtblau)}
  .dark .lnk,.dark .eyebrow,.final p,.final .side span{color:var(--ps-nachtblau)!important}
  .final .fsvg{display:none}
  a[href^="tel:"]::after,a[href^="mailto:"]::after{content:""}
}

/* Datenschutz: Newsletter-Einwilligung, Formularhinweise, Tabelle der Empfänger */
.nl-check{margin-top:12px}
.nl-hint{margin:8px 0 0;font-size:15px;color:var(--ps-schiefer)}
.form-hint{grid-column:1/-1;margin:0;font-size:15px;color:var(--ps-schiefer)}
.legal table{border-collapse:collapse;width:100%;font-size:15px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--ps-linie)}
.legal thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ps-schiefer);font-weight:600}
.legal tbody th{font-weight:600}
@media (max-width:720px){
  .legal thead{display:none}
  .legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal tr{padding:12px 0;border-bottom:1px solid var(--ps-linie)}
  .legal th,.legal td{padding:0;border:0}
}