/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Physiotherapie Haldenstein – Konzeptbeispiel von NorthFrame (fiktiver Betrieb).
   Helle, ruhige Praxis-Website: Warmweiß, Salbei, dunkles Petrol. Typografie: Fraunces (Titel,
   variabel, weich) und Karla (Lesetext). Alle Schriften und Bilder lokal, keine externen Requests.
   Ohne JavaScript bleibt alles sichtbar; bei reduzierter Bewegung entfallen alle Übergänge.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#faf7f2;--ton:#f3eee6;--weiss:#fffdf9;
  --salbei:#a9bfae;--salbei-hell:#e4ece6;--salbei-tief:#7b9784;
  --petrol:#1f4a52;--petrol-tief:#173b42;--petrol-hell:#2d5f69;
  --text:#26363a;--text-soft:#4b5c60;--text-muted:#65767a;
  --linie:rgba(31,74,82,.14);--linie-weich:rgba(31,74,82,.08);
  --schatten:0 26px 60px -34px rgba(31,74,82,.38);--schatten-klein:0 12px 30px -18px rgba(31,74,82,.3);
  --r:24px;--r-klein:14px;
  --titel:"Fraunces",Georgia,serif;--lese:"Karla","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--text);font-family:var(--lese);font-size:17.5px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--titel);font-weight:500;line-height:1.08;color:var(--petrol);font-optical-sizing:auto;font-variation-settings:"SOFT" 60,"WONK" 0;letter-spacing:-.005em;text-wrap:balance}
p{text-wrap:pretty}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:6px}
.ph-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph-skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--petrol);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;transition:top .2s}
.ph-skip:focus{top:14px}
.ph-container{max-width:1180px;margin:0 auto;padding:0 28px}
.ph-anker{display:block;position:relative;top:-110px;visibility:hidden}

/* ── Knöpfe ────────────────────────────────────────────────────────────────────────────────── */
.ph-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:999px;background:var(--petrol);color:#fff;font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.ph-knopf:hover{background:var(--petrol-tief);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(31,74,82,.6)}
.ph-knopf--leise{background:transparent;color:var(--petrol);border-color:var(--linie)}
.ph-knopf--leise:hover{background:var(--salbei-hell);box-shadow:none}
.ph-knopf--kopf{min-height:44px;padding:9px 20px;font-size:15px}

/* ── Kopf ──────────────────────────────────────────────────────────────────────────────────── */
.ph-kopf{position:sticky;top:0;z-index:100;background:rgba(250,247,242,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linie-weich)}
.ph-kopf-inner{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px}
.ph-logo{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;padding:4px 0}
.ph-marke{width:40px;height:40px}
.ph-logo-text{display:flex;flex-direction:column;line-height:1.05;font-family:var(--titel);font-size:19px;color:var(--petrol)}
.ph-logo-text strong{font-weight:600}
.ph-logo-text span{font-weight:400;font-size:16px;color:var(--text-soft)}
.ph-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.ph-nav a{padding:9px 13px;border-radius:999px;font-weight:500;font-size:15.5px;color:var(--text-soft);transition:background .2s,color .2s}
.ph-nav a:hover{background:var(--salbei-hell);color:var(--petrol)}
.ph-nav a.ist-aktiv{color:var(--petrol);background:var(--salbei-hell)}
.ph-nav .ph-nav-cta{display:none}
.ph-burger{display:none;width:44px;height:44px;border:1px solid var(--linie);border-radius:12px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}
.ph-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--petrol);transition:transform .25s,opacity .25s}
.ph-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ph-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ph-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ──────────────────────────────────────────────────────────────────────────────────── */
.ph-hero{position:relative;padding:64px 0 40px;overflow:hidden}
.ph-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60%;height:90%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(169,191,174,.35),rgba(169,191,174,0) 72%);filter:blur(10px)}
.ph-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr);gap:56px;align-items:center}
.ph-auge{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol-hell);margin-bottom:16px}
.ph-hero h1{font-size:clamp(2.4rem,4vw,3.7rem);margin-bottom:22px}
.ph-lead{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.7;color:var(--text-soft);max-width:48ch;margin-bottom:30px}
.ph-hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.ph-hero-bild{position:relative}
.ph-hero-bild::before{content:"";position:absolute;inset:8% -6% -8% 10%;border-radius:calc(var(--r) + 12px);background:var(--salbei-hell);z-index:0}
.ph-hero-bild img{position:relative;z-index:1;width:100%;aspect-ratio:16/10.5;object-fit:cover;border-radius:var(--r);box-shadow:var(--schatten)}
.ph-kurz{list-style:none;margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:var(--weiss);border:1px solid var(--linie-weich);border-radius:var(--r);padding:22px 26px;box-shadow:var(--schatten-klein)}
.ph-kurz li{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:2px solid var(--salbei)}
.ph-kurz-k{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.ph-kurz-w{font-size:15.5px;color:var(--text);line-height:1.5}
.ph-kurz-w a{color:var(--petrol);text-decoration:underline;text-decoration-color:var(--salbei);text-underline-offset:3px}
.ph-kurz-w a:hover{text-decoration-color:var(--petrol)}

/* ── Abschnitte ────────────────────────────────────────────────────────────────────────────── */
.ph-abschnitt{padding:100px 0}
.ph-abschnitt--ton{background:var(--ton)}
.ph-abschnitt--salbei{background:var(--salbei-hell)}
.ph-kopfzeile{max-width:760px;margin-bottom:52px}
.ph-kopfzeile h2,.ph-zeiten-grid h2,.ph-kontakt-grid h2,.ph-fragen-grid h2{font-size:clamp(2rem,3.5vw,3rem);margin-bottom:18px}
.ph-desc{font-size:18px;line-height:1.75;color:var(--text-soft);max-width:62ch}
.ph-desc+.ph-desc{margin-top:14px}

/* Leistungsnavigator */
.ph-navigator{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:36px;align-items:start}
.ph-nav-liste{display:flex;flex-direction:column;gap:6px;position:sticky;top:96px}
.ph-nav-punkt{display:grid;grid-template-columns:auto 1fr;column-gap:16px;text-align:left;padding:16px 20px;border-radius:18px;border:1px solid transparent;background:transparent;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.ph-nav-punkt:hover{background:rgba(255,255,255,.7)}
.ph-nav-punkt[aria-selected="true"]{background:var(--weiss);border-color:var(--linie-weich);box-shadow:var(--schatten-klein)}
.ph-nav-nr{grid-row:1/3;font-family:var(--titel);font-size:1.35rem;color:var(--salbei-tief);line-height:1.2;padding-top:2px}
.ph-nav-punkt[aria-selected="true"] .ph-nav-nr{color:var(--petrol)}
.ph-nav-name{font-weight:700;font-size:18px;color:var(--petrol)}
.ph-nav-kurz{font-size:14.5px;color:var(--text-muted);line-height:1.45}
.ph-panel{background:var(--weiss);border:1px solid var(--linie-weich);border-radius:var(--r);padding:40px 44px;box-shadow:var(--schatten-klein)}
.ph-panel+.ph-panel{margin-top:20px}
.js .ph-panel:not(.ist-aktiv){display:none}
.js .ph-panel.ist-aktiv{animation:ph-auftauchen .35s ease}
html:not(.js) .ph-nav-liste{display:none}
@keyframes ph-auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ph-panel h3{font-size:2rem;margin-bottom:16px}
.ph-eckdaten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;margin:0 0 20px;padding:14px 0;border-top:1px solid var(--linie-weich);border-bottom:1px solid var(--linie-weich)}
.ph-eckdaten dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px}
.ph-eckdaten dd{font-size:15px;line-height:1.45;color:var(--text)}
.ph-panel p{color:var(--text-soft);margin-bottom:14px;max-width:64ch}
.ph-wissen{margin-top:22px;background:var(--salbei-hell);border-radius:16px;padding:20px 24px}
.ph-wissen h4{font-family:var(--lese);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol-hell);margin-bottom:10px}
.ph-wissen ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ph-wissen li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.55;color:var(--text)}
.ph-wissen li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:50%;background:var(--salbei-tief)}

/* Team */
.ph-team{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ph-person{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:26px;background:var(--weiss);border:1px solid var(--linie-weich);border-radius:var(--r);padding:24px;box-shadow:var(--schatten-klein)}
.ph-person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.ph-person h3{font-size:1.7rem;margin-bottom:4px}
.ph-rolle{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-hell);margin-bottom:14px}
.ph-person-text p{color:var(--text-soft);font-size:16px}
.ph-quali{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:6px}
.ph-quali li{position:relative;padding-left:22px;font-size:15px;color:var(--text)}
.ph-quali li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:6px;border-left:2px solid var(--salbei-tief);border-bottom:2px solid var(--salbei-tief);transform:rotate(-45deg)}
.ph-empfang-hinweis{margin-top:28px;padding:18px 24px;border-left:3px solid var(--salbei);background:rgba(255,255,255,.6);border-radius:0 16px 16px 0;color:var(--text-soft);font-size:16px;max-width:900px}
.ph-empfang-hinweis strong{color:var(--petrol)}

/* Praxisräume */
.ph-galerie{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-auto-rows:minmax(150px,auto);gap:18px}
.ph-galerie-bild{position:relative;display:block;width:100%;padding:0;border:0;background:var(--ton);border-radius:20px;overflow:hidden;cursor:zoom-in;box-shadow:var(--schatten-klein)}
.ph-galerie-bild--gross{grid-row:1/4}
.ph-galerie-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ph-galerie-bild:hover img{transform:scale(1.025)}
.ph-galerie-bild:focus-visible{outline-offset:4px}
.ph-galerie-titel{position:absolute;left:14px;bottom:14px;background:rgba(250,247,242,.92);color:var(--petrol);font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:999px}
.ph-galerie-bild--gross{aspect-ratio:16/10.3}
.ph-galerie-bild:not(.ph-galerie-bild--gross){aspect-ratio:3/2}
.ph-merkmale{list-style:none;margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ph-merkmale li{padding:16px 18px;border-radius:16px;background:var(--ton);font-size:15px;color:var(--text-soft);line-height:1.5}
.ph-merkmale b{display:block;color:var(--petrol);font-size:15.5px;margin-bottom:3px}

/* Erster Besuch */
.ph-besuch{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:22px;align-items:start}
.ph-karte{background:var(--weiss);border-radius:var(--r);padding:32px 30px;box-shadow:var(--schatten-klein);border:1px solid rgba(255,255,255,.7)}
.ph-karte h3{font-size:1.55rem;margin-bottom:18px}
.ph-ablauf{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:16px}
.ph-ablauf li{position:relative;padding-left:46px;font-size:15.5px;color:var(--text-soft);line-height:1.6}
.ph-ablauf li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:1px;width:32px;height:32px;border-radius:50%;background:var(--petrol);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.ph-ablauf b{display:block;color:var(--petrol);font-size:16.5px;margin-bottom:2px}
.ph-liste{list-style:none;display:flex;flex-direction:column;gap:10px}
.ph-liste li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55;color:var(--text)}
.ph-liste li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;background:var(--salbei-hell);border:1px solid var(--salbei)}
.ph-liste li::after{content:"";position:absolute;left:6px;top:7px;width:7px;height:4px;border-left:2px solid var(--petrol);border-bottom:2px solid var(--petrol);transform:rotate(-45deg)}
.ph-liste--klein li{font-size:14.5px;padding-left:0}
.ph-liste--klein li::before,.ph-liste--klein li::after{display:none}
.ph-liste--klein b{color:var(--petrol)}
.ph-klein{margin-top:18px;font-size:14.5px;color:var(--text-muted);line-height:1.6}
.ph-skizze{width:100%;height:auto;border-radius:14px;margin-bottom:16px}
.ph-adresse{font-style:normal;font-size:15.5px;line-height:1.55;color:var(--text);margin-bottom:12px}

/* Sprechzeiten */
.ph-zeiten-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ph-zeiten{width:100%;border-collapse:separate;border-spacing:0;background:var(--weiss);border:1px solid var(--linie-weich);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten-klein)}
.ph-zeiten th,.ph-zeiten td{padding:15px 24px;font-size:16.5px;border-bottom:1px solid var(--linie-weich)}
.ph-zeiten tr:last-child th,.ph-zeiten tr:last-child td{border-bottom:0}
.ph-zeiten th{text-align:left;font-weight:600;color:var(--petrol)}
.ph-zeiten td{text-align:right;color:var(--text-soft);font-variant-numeric:tabular-nums}
.ph-zeiten tr.ist-heute th,.ph-zeiten tr.ist-heute td{background:var(--salbei-hell);color:var(--petrol)}
.ph-zeiten tr.ist-heute th::after{content:"heute";margin-left:10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol-hell);vertical-align:middle}

/* Terminweg: drei Schritte, kompakt */
.ph-weg{list-style:none;counter-reset:w;margin-top:28px;display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:var(--weiss);border:1px solid var(--linie-weich);border-radius:var(--r-klein)}
.ph-weg li{position:relative;padding-left:40px;font-size:15px;line-height:1.55;color:var(--text-soft)}
.ph-weg li::before{counter-increment:w;content:counter(w);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:var(--salbei-hell);color:var(--petrol);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.ph-weg b{display:block;color:var(--petrol);font-size:15.5px;margin-bottom:1px}
.ph-weg a{color:var(--petrol);text-decoration:underline;text-decoration-color:var(--salbei);text-underline-offset:3px}
.ph-weg a:hover{text-decoration-color:var(--petrol)}

/* Kontakt + Formular */
.ph-kontakt-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}
.ph-kontakt-liste{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ph-kontakt-liste dt{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.ph-kontakt-liste dd{font-size:16.5px;color:var(--text);line-height:1.5;overflow-wrap:anywhere}
.ph-formular{background:var(--weiss);border:1px solid var(--linie-weich);border-radius:var(--r);padding:36px;box-shadow:var(--schatten-klein);display:flex;flex-direction:column;gap:18px}
.ph-formular h3{font-size:1.7rem}
.ph-formular-hinweis{font-size:14.5px;color:var(--text-muted);line-height:1.6;padding:12px 16px;background:var(--salbei-hell);border-radius:12px}
.ph-formular-hinweis strong{color:var(--petrol)}
.ph-feld{display:flex;flex-direction:column;gap:6px}
.ph-feld label,.ph-tage legend{font-size:14.5px;font-weight:700;color:var(--petrol)}
.ph-feld input,.ph-feld select{min-height:50px;padding:12px 16px;border:1px solid var(--linie);border-radius:12px;background:#fff;font-size:16px;transition:border-color .2s,box-shadow .2s}
.ph-feld input:focus-visible,.ph-feld select:focus-visible{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(31,74,82,.16)}
.ph-feld input[aria-invalid="true"]{border-color:#b04a3a}
.ph-tage{border:0;display:flex;flex-wrap:wrap;gap:8px}
.ph-tage legend{margin-bottom:8px}
.ph-tage label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--linie);border-radius:999px;cursor:pointer;font-size:15px;background:#fff}
.ph-tage label:has(input:checked){background:var(--salbei-hell);border-color:var(--salbei-tief);color:var(--petrol)}
.ph-tage input{accent-color:var(--petrol);width:16px;height:16px}
.ph-formular .ph-knopf{align-self:flex-start}
.ph-formular-status{display:none;padding:14px 16px;border-radius:12px;background:var(--salbei-hell);color:var(--petrol);font-size:15px;line-height:1.5}
.ph-formular-status.ist-sichtbar,.ph-formular-status:not(:empty){display:block}
.ph-formular-status.ist-fehler{background:#f7e6e2;color:#8c3527}

/* Fragen */
.ph-fragen-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:56px;align-items:start}
.ph-faq{border-top:1px solid var(--linie)}
.ph-faq details{border-bottom:1px solid var(--linie)}
.ph-faq summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;position:relative;font-family:var(--titel);font-size:1.4rem;color:var(--petrol);font-weight:500;line-height:1.25}
.ph-faq summary::-webkit-details-marker{display:none}
.ph-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--salbei-hell);color:var(--petrol);font-family:var(--lese);font-size:22px;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.ph-faq details[open] summary::after{content:"–"}
.ph-faq details p{color:var(--text-soft);font-size:16px;line-height:1.75;padding:0 48px 22px 0;max-width:66ch}

/* Fuß */
.ph-fuss{background:var(--petrol-tief);color:#d3dedd;padding:64px 0 28px;margin-top:20px}
.ph-fuss-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;font-size:15.5px;line-height:1.7}
.ph-fuss-marke{font-family:var(--titel);font-size:1.5rem;color:#fff;margin-bottom:8px}
.ph-fuss-titel{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--salbei);margin-bottom:8px}
.ph-fuss a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.ph-fuss a:hover{text-decoration-color:#fff;color:#fff}
.ph-fuss a:focus-visible{outline-color:#fff}
.ph-fuss-zeile{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:#a9bbba}
.ph-demo{font-size:13.5px;line-height:1.6;color:#cbd8d7}
.ph-demo a{color:#fff}

/* Galerie-Lupe */
.ph-lupe{border:0;padding:0;background:transparent;max-width:min(96vw,1500px);width:100%}
.ph-lupe::backdrop{background:rgba(20,45,50,.86);backdrop-filter:blur(6px)}
.ph-lupe-inner{position:relative;padding:60px 12px 16px}
.ph-lupe img{width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ph-lupe-text{text-align:center;color:#e6eeed;font-size:15px;margin-top:12px}
.ph-lupe-zu{position:absolute;top:8px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ph-lupe-zu:hover{background:rgba(255,255,255,.22)}
.ph-lupe-zu:focus-visible{outline-color:#fff}

/* Einblendung: nur mit Skript und erlaubter Bewegung */
.js .ph-ein{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.js .ph-ein.ist-da{opacity:1;transform:none}

/* ── Responsive ────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .ph-navigator{grid-template-columns:1fr;gap:20px}
  .ph-nav-liste{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .ph-nav-punkt{grid-template-columns:auto 1fr;padding:12px 16px;border-radius:14px;flex:1 1 200px}
  .ph-nav-kurz{display:none}
  .ph-nav-nr{grid-row:auto;font-size:1.1rem}
  .ph-team{grid-template-columns:1fr}
  .ph-besuch{grid-template-columns:1fr 1fr}
  .ph-karte--anfahrt{grid-column:1/-1}
}
@media(max-width:960px){
  .ph-nav{display:none}
  .ph-knopf--kopf{display:none}
  .ph-burger{display:flex}
  .js .ph-nav.ist-offen{display:flex;position:fixed;inset:73px 0 0 0;flex-direction:column;align-items:stretch;gap:4px;padding:20px 24px;background:rgba(250,247,242,.98);border-top:1px solid var(--linie-weich);z-index:99;overflow:auto}
  .js .ph-nav.ist-offen a{font-size:1.25rem;padding:14px 18px;border-radius:14px}
  .js .ph-nav.ist-offen .ph-nav-cta{display:inline-flex;justify-content:center;margin-top:12px;background:var(--petrol);color:#fff;font-weight:600}
  .ph-hero{padding-top:36px}
  .ph-hero-grid{grid-template-columns:1fr;gap:34px}
  .ph-hero-bild::before{inset:10% -4% -6% 8%}
  .ph-kurz{grid-template-columns:1fr 1fr;margin-top:36px}
  .ph-abschnitt{padding:72px 0}
  .ph-galerie{grid-template-columns:1fr 1fr}
  .ph-galerie-bild--gross{grid-row:auto;grid-column:1/-1}
  .ph-merkmale{grid-template-columns:1fr 1fr}
  .ph-zeiten-grid,.ph-kontakt-grid,.ph-fragen-grid{grid-template-columns:1fr;gap:32px}
  .ph-fuss-grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .ph-container,.ph-kopf-inner{padding-left:18px;padding-right:18px}
  .ph-logo-text{font-size:17px}
  .ph-kurz{grid-template-columns:1fr;padding:18px 20px;gap:14px}
  .ph-person{grid-template-columns:1fr;padding:18px}
  .ph-person img{max-width:260px}
  .ph-besuch{grid-template-columns:1fr}
  .ph-karte{padding:26px 22px}
  .ph-galerie{grid-template-columns:1fr}
  .ph-merkmale{grid-template-columns:1fr}
  .ph-panel{padding:28px 22px}
  .ph-eckdaten{grid-template-columns:1fr 1fr}
  .ph-hero-knoepfe{flex-direction:column;align-items:stretch}
  .ph-hero-knoepfe .ph-knopf--leise{border-color:transparent;background:transparent;text-decoration:underline;text-decoration-color:var(--salbei);text-underline-offset:4px;min-height:44px}
  .ph-weg{padding:18px 16px}
  .ph-formular{padding:24px 20px}
  .ph-kontakt-liste{grid-template-columns:1fr}
  .ph-zeiten th,.ph-zeiten td{padding:13px 16px;font-size:15.5px}
  .ph-faq summary{font-size:1.2rem}
  .ph-abschnitt{padding:60px 0}
}

/* ── Reduzierte Bewegung ───────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js .ph-ein{opacity:1;transform:none}
  .ph-galerie-bild:hover img{transform:none}
}

/* ══ NF-R119 Smartphone und Tablet (nur bis 1024 px; Desktop ab 1025 px unberührt) ══════════════════════════════ */
/* 961-1024 px: volle Navigation ohne Umbruch ("Erster Besuch" stand zweizeilig) */
@media (min-width:961px) and (max-width:1024px){
  .ph-kopf-inner{gap:14px}
  .ph-nav a{padding:9px 9px;font-size:14.5px;white-space:nowrap}
}
@media (max-width:960px){
  /* geöffnetes Menü schließt bündig an den Kopf an (Kopf ist 77 px hoch, das Menü begann bei 73 px) */
  .js .ph-nav.ist-offen{inset:77px 0 0 0}
}
@media (max-width:640px){
  /* Leistungsreiter und Paneltitel ragten auf 320 px um rund 30 px über den Rand (seitliches Scrollen) */
  .ph-navigator{grid-template-columns:minmax(0,1fr)}
  .ph-nav-punkt{flex:1 1 100%;min-width:0}
  .ph-panel h3{font-size:clamp(1.55rem,8vw,2rem);overflow-wrap:break-word;hyphens:auto}
}