/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   NF-R90 D – Landingpage Praxen (/websites/praxen/). Eigene, helle und bewusst ruhige Farbwelt:
   Warmweiß, Salbei, dunkles Petrol. Die NorthFrame-Navigation und der Footer bleiben dunkel und
   nutzen weiter die Tokens aus _shared/branche.css; diese Datei setzt nur eigene --pr-Variablen
   und Klassen mit Präfix pr-. Bewegung: weiches Tageslicht im Hero, minimale Bildbewegung, kurze
   Einblendungen (reveal aus _shared/branche.js) – bei reduzierter Bewegung alles statisch.
   Vorschau-Schirm nutzt die Schriften der Beispiel-Website (lokal, portfolio/physio-haldenstein/fonts/).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Fraunces";src:url("/portfolio/physio-haldenstein/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("/portfolio/physio-haldenstein/fonts/karla-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/portfolio/physio-haldenstein/fonts/karla-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

html[data-branche="praxen"]{
  --pr-bg:#faf7f2;--pr-bg-2:#f3eee6;--pr-weiss:#fffdf9;
  --pr-salbei:#a9bfae;--pr-salbei-hell:#e4ece6;--pr-salbei-tief:#7b9784;
  --pr-petrol:#1f4a52;--pr-petrol-tief:#173b42;--pr-petrol-hell:#2d5f69;
  --pr-text:#26363a;--pr-text-soft:#4b5c60;--pr-text-muted:#65767a;
  --pr-linie:rgba(31,74,82,.14);--pr-linie-weich:rgba(31,74,82,.08);
  --pr-schatten:0 28px 64px -34px rgba(31,74,82,.4);--pr-schatten-klein:0 12px 30px -18px rgba(31,74,82,.28);
  --pr-r:24px;
}
body{background:var(--pr-bg);color:var(--pr-text);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
.pr-main h1,.pr-main h2,.pr-main h3,.pr-main h4{color:var(--pr-petrol)}
.pr-main p,.pr-main li{text-wrap:pretty}
.pr-main :focus-visible,.pr-flach :focus-visible{outline:2px solid var(--pr-petrol);outline-offset:3px}
.pr-main img{height:auto}
/* Dunkle Glas-Navigation über hellem Grund: ein weicher Schatten trennt sie vom Warmweiß. */
.navbar .nav-inner{box-shadow:0 14px 34px -16px rgba(31,74,82,.45);border-color:rgba(255,255,255,.1)}

/* ── Grundbausteine ────────────────────────────────────────────────────────────────────────── */
.pr-abschnitt{padding:110px 0;position:relative}
.pr-abschnitt--ton{background:var(--pr-bg-2)}
.pr-abschnitt--salbei{background:var(--pr-salbei-hell)}
/* NF-R92: sichtbarer Raum im Dokumentfluss vor dem Anfrageblock (vorher 0) */
.pr-abschnitt--cta{padding-top:clamp(56px,6vw,88px);background:var(--pr-bg-2)}
.pr-auge{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pr-petrol-hell);margin-bottom:16px}
.pr-kopfzeile{max-width:780px;margin-bottom:56px}
.pr-main h2{font-size:clamp(2.1rem,3.6vw,3.15rem);letter-spacing:-.012em;line-height:1.08;margin-bottom:18px;text-wrap:balance}
.pr-desc{font-size:18px;line-height:1.75;color:var(--pr-text-soft);max-width:62ch}
.pr-desc+.pr-desc{margin-top:12px}
.pr-kennzeichnung{margin-top:16px;font-size:14px;color:var(--pr-text-muted);display:inline-flex;align-items:center;gap:8px}
.pr-kennzeichnung::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pr-salbei);flex:0 0 auto}

.pr-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:999px;background:var(--pr-petrol);color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;text-align:center}
.pr-knopf:hover{background:var(--pr-petrol-tief);transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(31,74,82,.6)}
.pr-knopf--leise{background:transparent;color:var(--pr-petrol);border-color:var(--pr-linie)}
.pr-knopf--leise:hover{background:var(--pr-salbei-hell);box-shadow:none}
.pr-knopf--hell{background:var(--pr-bg);color:var(--pr-petrol)}
.pr-knopf--hell:hover{background:#fff;color:var(--pr-petrol-tief)}
.pr-knopf--rahmen{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.pr-knopf--rahmen:hover{background:rgba(255,255,255,.1);box-shadow:none}
.pr-textlink{display:inline;font-weight:600;font-size:15px;color:var(--pr-petrol);text-decoration:underline;text-decoration-color:var(--pr-salbei);text-underline-offset:4px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s}
.pr-textlink span{margin-left:4px}
.pr-textlink .pr-voll,.pr-textlink .pr-knapp{margin-left:0}   /* NF-R108: Beschriftung des Vorschau-Verweises, nur der Pfeil traegt den Abstand */
.pr-textlink:hover{text-decoration-color:var(--pr-petrol)}
.pr-textlink--hell{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.pr-textlink--hell:hover{text-decoration-color:#fff}

/* ── Wegweiser (räumliche Orientierung, nur breite Bildschirme) ───────────────────────────── */
.pr-wegweiser{display:none}
@media(min-width:1560px){
  .pr-wegweiser{display:flex;position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:60;flex-direction:column;gap:2px;transition:opacity .3s}
  .pr-wegweiser.ist-weg{opacity:0;pointer-events:none}
  .pr-wegweiser a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--pr-text-muted);transition:color .2s,background .2s}
  .pr-wegweiser a:hover{color:var(--pr-petrol);background:rgba(255,253,249,.8)}
  .pr-wegweiser i{width:8px;height:8px;border-radius:50%;background:var(--pr-salbei);flex:0 0 auto;transition:background .2s,transform .2s}
  .pr-wegweiser a[aria-current="true"]{color:var(--pr-petrol)}
  .pr-wegweiser a[aria-current="true"] i{background:var(--pr-petrol);transform:scale(1.35)}
}

/* ── 1 Hero ────────────────────────────────────────────────────────────────────────────────── */
.pr-hero{position:relative;padding:172px 0 84px;overflow:hidden}
.pr-licht{position:absolute;inset:-30% -10% auto 20%;height:120%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side at 60% 40%,rgba(169,191,174,.42),rgba(169,191,174,0) 70%);filter:blur(18px);opacity:.9;
  animation:pr-licht 36s ease-in-out infinite alternate}
@keyframes pr-licht{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,5%,0) scale(1.08)}}
.pr-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center}
.pr-hero h1{font-size:clamp(2.5rem,4.4vw,3.95rem);letter-spacing:-.018em;line-height:1.05;margin-bottom:22px;max-width:15ch;text-wrap:balance}
.pr-lead{font-size:18.5px;line-height:1.72;color:var(--pr-text-soft);max-width:52ch;margin-bottom:30px}
.pr-hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.pr-hero-notiz{margin-top:18px;font-size:14px;color:var(--pr-text-muted);max-width:52ch}
.pr-buehne{position:relative;padding:20px 0 24px 12px}
.pr-buehne::before{content:"";position:absolute;inset:0 -8% 0 14%;border-radius:calc(var(--pr-r) + 14px);background:var(--pr-salbei-hell);z-index:0}
.pr-buehne-bild{position:relative;z-index:1;border-radius:var(--pr-r);overflow:hidden;box-shadow:var(--pr-schatten);aspect-ratio:4/3;margin:0}
.pr-buehne-bild img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%;animation:pr-atmen 40s ease-in-out infinite alternate}
@keyframes pr-atmen{from{transform:scale(1)}to{transform:scale(1.045)}}
.pr-chips{position:absolute;inset:0;z-index:2;pointer-events:none}
.pr-chip{position:absolute;display:inline-flex;flex-direction:column;gap:2px;padding:10px 15px;background:rgba(255,253,249,.94);border:1px solid var(--pr-linie-weich);border-radius:14px;box-shadow:var(--pr-schatten-klein);font-size:14.5px;line-height:1.35;color:var(--pr-text);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pr-chip b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pr-text-muted);font-weight:700}
.pr-chip--a{left:-6%;top:9%}
.pr-chip--b{right:-4%;top:38%}
.pr-chip--c{left:9%;bottom:6%}
.pr-chip--petrol{flex-direction:row;align-items:center;gap:8px;background:var(--pr-petrol);color:#fff;font-weight:600;border-color:transparent}
.pr-chip--petrol i{font-style:normal}

/* ── 2 Orientierung: Wege + Vorschau ───────────────────────────────────────────────────────── */
.pr-wege{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:start}
.pr-weg-liste{display:flex;flex-direction:column;gap:8px;position:sticky;top:110px}
.pr-weg{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;text-align:left;padding:20px 22px;border-radius:20px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:'Inter',sans-serif;transition:background .25s,border-color .25s,box-shadow .25s}
.pr-weg:hover{background:rgba(255,253,249,.75)}
.pr-weg[aria-selected="true"]{background:var(--pr-weiss);border-color:var(--pr-linie-weich);box-shadow:var(--pr-schatten-klein)}
.pr-weg-nr{grid-row:1/3;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--pr-salbei-tief);line-height:1.1;padding-top:2px}
.pr-weg[aria-selected="true"] .pr-weg-nr{color:var(--pr-petrol)}
.pr-weg-titel{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:600;color:var(--pr-petrol);line-height:1.15}
.pr-weg-frage{font-size:15px;color:var(--pr-text-muted);line-height:1.5;font-style:italic}
.pr-vorschau{min-width:0}
.pr-schirm{background:var(--pr-weiss);border:1px solid var(--pr-linie-weich);border-radius:22px;box-shadow:var(--pr-schatten);overflow:hidden}
.pr-schirm-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--pr-linie-weich);background:rgba(250,247,242,.9)}
.pr-schirm-marke{display:inline-flex;align-items:center;gap:8px;font-family:"Fraunces",Georgia,serif;font-size:14.5px;font-weight:600;color:var(--pr-petrol);white-space:nowrap}
.pr-schirm-marke svg{width:20px;height:20px}
.pr-schirm-nav{display:flex;gap:4px}
.pr-schirm-nav i{font-style:normal;font-family:"Karla",sans-serif;font-size:12.5px;color:var(--pr-text-muted);padding:5px 10px;border-radius:999px;transition:background .25s,color .25s}
.pr-schirm-nav i.ist-an{background:var(--pr-salbei-hell);color:var(--pr-petrol)}
.pr-schirm-body{padding:30px 34px 32px;min-height:420px;font-family:"Karla",sans-serif}
.pr-panel{animation:pr-auftauchen .4s ease}
html.pr-js .pr-panel:not(.ist-aktiv){display:none}
html:not(.pr-js) .pr-panel+.pr-panel{margin-top:32px;padding-top:32px;border-top:1px solid var(--pr-linie-weich)}
@keyframes pr-auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pr-mini-auge{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pr-petrol-hell);margin-bottom:8px}
.pr-mini-h{font-family:"Fraunces",Georgia,serif;font-size:1.7rem;font-weight:500;line-height:1.15;color:var(--pr-petrol);margin-bottom:18px;font-variation-settings:"SOFT" 60}
.pr-mini-liste{list-style:none;display:flex;flex-direction:column;gap:9px}
.pr-mini-liste li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding-bottom:9px;border-bottom:1px solid var(--pr-linie-weich);font-size:15px}
.pr-mini-liste b{color:var(--pr-petrol);font-weight:700}
.pr-mini-liste span{color:var(--pr-text-muted);font-size:14px}
.pr-mini-notiz{margin-top:18px;padding:11px 14px;border-radius:12px;background:var(--pr-salbei-hell);font-size:13.5px;color:var(--pr-text-soft);line-height:1.5}
.pr-mini-zwei{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:start}
.pr-mini-schritte{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.pr-mini-schritte li{position:relative;padding-left:34px;font-size:14px;color:var(--pr-text-muted);line-height:1.4}
.pr-mini-schritte li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--pr-petrol);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pr-mini-schritte b{display:block;color:var(--pr-petrol);font-size:15px}
.pr-mini-check{list-style:none;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--pr-bg-2)}
.pr-mini-check li{position:relative;padding-left:26px;font-size:14px;color:var(--pr-text)}
.pr-mini-check li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:5px;background:#fff;border:1px solid var(--pr-salbei)}
.pr-mini-check li::after{content:"";position:absolute;left:5px;top:5px;width:6px;height:3.5px;border-left:2px solid var(--pr-petrol);border-bottom:2px solid var(--pr-petrol);transform:rotate(-45deg)}
.pr-mini-zeiten{width:100%;border-collapse:collapse}
.pr-mini-zeiten th,.pr-mini-zeiten td{padding:9px 0;border-bottom:1px solid var(--pr-linie-weich);font-size:14.5px}
.pr-mini-zeiten th{text-align:left;font-weight:700;color:var(--pr-petrol)}
.pr-mini-zeiten td{text-align:right;color:var(--pr-text-muted);font-variant-numeric:tabular-nums}
.pr-mini-kontakt{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--pr-text-muted);line-height:1.5}
.pr-mini-kontakt b{color:var(--pr-petrol)}
.pr-mini-knopf{align-self:flex-start;display:inline-flex;padding:8px 16px;border-radius:999px;background:var(--pr-petrol);color:#fff;font-weight:700;font-size:13.5px}
.pr-vorschau-fuss{margin-top:18px;padding:0 6px}
.pr-vorschau-fuss p{display:none;font-size:15.5px;color:var(--pr-text-soft);line-height:1.65;margin-bottom:10px;max-width:60ch}
.pr-vorschau-fuss p.ist-an{display:block}
html:not(.pr-js) .pr-vorschau-fuss p{display:block}

/* ── 3 Vertrauen ───────────────────────────────────────────────────────────────────────────── */
.pr-vertrauen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:center}
.pr-portrait{position:relative;margin:0;padding:0 26px 30px 0}
.pr-portrait::before{content:"";position:absolute;inset:8% 0 0 12%;border-radius:calc(var(--pr-r) + 12px);background:var(--pr-salbei-hell);z-index:0}
.pr-portrait img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pr-r);box-shadow:var(--pr-schatten)}
.pr-portrait-karte{position:absolute;right:0;bottom:0;z-index:2;background:var(--pr-weiss);border:1px solid var(--pr-linie-weich);border-radius:18px;padding:16px 20px;box-shadow:var(--pr-schatten-klein);max-width:290px;font-size:14px;color:var(--pr-text-soft)}
.pr-portrait-karte b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--pr-petrol);line-height:1.1}
.pr-portrait-karte span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pr-petrol-hell);margin:4px 0 10px}
.pr-portrait-karte ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.pr-portrait-karte li{position:relative;padding-left:20px;line-height:1.4}
.pr-portrait-karte li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:5px;border-left:2px solid var(--pr-salbei-tief);border-bottom:2px solid var(--pr-salbei-tief);transform:rotate(-45deg)}
.pr-prinzipien{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.pr-prinzip{display:grid;grid-template-columns:auto 1fr;column-gap:20px;padding:24px 26px;border-radius:20px;background:var(--pr-weiss);border:1px solid var(--pr-linie-weich);box-shadow:var(--pr-schatten-klein)}
.pr-prinzip-nr{grid-row:1/3;font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:600;color:var(--pr-salbei-tief);line-height:1;padding-top:4px}
.pr-prinzip h3{font-size:1.45rem;margin-bottom:6px}
.pr-prinzip p{font-size:15.5px;line-height:1.65;color:var(--pr-text-soft)}

/* ── 4 Beispiel ────────────────────────────────────────────────────────────────────────────── */
.pr-beispiel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:64px;align-items:center}
.pr-geraete{position:relative;padding:0 14% 12% 0}
.pr-browser{border-radius:18px;overflow:hidden;background:var(--pr-weiss);border:1px solid var(--pr-linie-weich);box-shadow:var(--pr-schatten)}
.pr-browser-leiste{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--pr-bg-2);border-bottom:1px solid var(--pr-linie-weich)}
.pr-punkte{display:flex;gap:6px}
.pr-punkte i{width:9px;height:9px;border-radius:50%;background:var(--pr-linie);display:block}
.pr-adresse{flex:1;font-size:12.5px;color:var(--pr-text-muted);background:var(--pr-weiss);border-radius:999px;padding:5px 12px;text-align:center;letter-spacing:.02em}
.pr-browser img{width:100%;display:block}
.pr-phone{position:absolute;right:0;bottom:0;width:26%;border-radius:22px;padding:6px;background:var(--pr-petrol-tief);box-shadow:0 30px 60px -24px rgba(23,59,66,.7)}
.pr-phone img{width:100%;border-radius:17px;display:block}
.pr-gruende{display:flex;flex-direction:column;gap:22px}
.pr-grund h3{font-size:1.45rem;margin-bottom:6px}
.pr-grund p{font-size:15.5px;line-height:1.65;color:var(--pr-text-soft)}
.pr-beispiel-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ── 5 Vorbereitet ─────────────────────────────────────────────────────────────────────────── */
.pr-vorbereitet{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.pr-punkte-liste{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.pr-punkt{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start;padding:22px 24px;border-radius:20px;background:var(--pr-weiss);border:1px solid rgba(255,255,255,.8);box-shadow:var(--pr-schatten-klein)}
.pr-ikon{width:44px;height:44px;border-radius:14px;background:var(--pr-salbei-hell);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pr-ikon svg{width:22px;height:22px;fill:none;stroke:var(--pr-petrol);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pr-punkt h3{font-size:1.4rem;margin-bottom:5px}
.pr-punkt p{font-size:15.5px;line-height:1.65;color:var(--pr-text-soft)}
.pr-warten{position:relative;margin:0;padding:0 0 34px 22px}
.pr-warten::before{content:"";position:absolute;inset:10% 0 0 0;border-radius:calc(var(--pr-r) + 12px);background:rgba(255,253,249,.7);z-index:0}
.pr-warten img{position:relative;z-index:1;width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--pr-r);box-shadow:var(--pr-schatten)}
.pr-tafel{position:absolute;left:0;bottom:0;z-index:2;background:var(--pr-weiss);border:1px solid var(--pr-linie-weich);border-radius:18px;padding:16px 20px;box-shadow:var(--pr-schatten-klein);max-width:250px;font-size:14px;color:var(--pr-text-soft)}
.pr-tafel b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;color:var(--pr-petrol);line-height:1.1}
.pr-tafel span{display:block;font-size:12.5px;color:var(--pr-text-muted);margin:4px 0 10px}
.pr-tafel ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.pr-tafel li{position:relative;padding-left:24px}
.pr-tafel li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:4px;background:var(--pr-salbei-hell);border:1px solid var(--pr-salbei)}
.pr-tafel li::after{content:"";position:absolute;left:4px;top:6px;width:6px;height:3px;border-left:2px solid var(--pr-petrol);border-bottom:2px solid var(--pr-petrol);transform:rotate(-45deg)}

/* ── 6 Flyer ───────────────────────────────────────────────────────────────────────────────── */
.pr-flyer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pr-produkt-buehne{position:relative}
.pr-produkt-buehne::before{content:"";position:absolute;inset:6% 4% 12% 4%;border-radius:calc(var(--pr-r) + 14px);background:var(--pr-bg-2);z-index:0}
.pr-produkt{position:relative;z-index:1;display:block;width:100%;max-width:540px;aspect-ratio:1/1.02;margin:0 auto;perspective:1800px;background:none;border:0;padding:0;cursor:zoom-in;border-radius:20px}
.pr-produkt:focus-visible{outline-offset:6px}
.pr-blatt{position:absolute;top:3%;width:40%;border-radius:7px;overflow:hidden;background:#fff;box-shadow:0 34px 60px -26px rgba(31,74,82,.55),0 2px 8px rgba(31,74,82,.12);transition:transform .65s cubic-bezier(.22,.61,.36,1),left .65s cubic-bezier(.22,.61,.36,1),opacity .4s}
.pr-blatt img{width:100%;height:auto;display:block}
.pr-produkt[data-seite="vorne"] .pr-blatt--vorne,.pr-produkt[data-seite="hinten"] .pr-blatt--hinten{left:13%;z-index:2;transform:rotateY(-11deg) rotateX(2deg);opacity:1}
.pr-produkt[data-seite="vorne"] .pr-blatt--hinten,.pr-produkt[data-seite="hinten"] .pr-blatt--vorne{left:49%;z-index:1;transform:rotateY(-11deg) rotateX(2deg) translateY(7%) scale(.96);opacity:.94}
.pr-produkt:hover .pr-blatt{transform:rotateY(-8deg) rotateX(1.5deg)}
.pr-produkt[data-seite="vorne"]:hover .pr-blatt--hinten,.pr-produkt[data-seite="hinten"]:hover .pr-blatt--vorne{transform:rotateY(-8deg) rotateX(1.5deg) translateY(7%) scale(.96)}
.pr-produkt-zeile{position:relative;z-index:1;text-align:center;font-size:13.5px;color:var(--pr-text-muted);margin-top:10px}
.pr-flyer-inhalt{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.pr-flyer-inhalt div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--pr-linie-weich)}
.pr-flyer-inhalt dt{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pr-petrol-hell);padding-top:3px}
.pr-flyer-inhalt dd{font-size:15.5px;line-height:1.6;color:var(--pr-text-soft)}
.pr-flyer-steuerung{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px}
.pr-schalter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--pr-weiss);border:1px solid var(--pr-linie)}
.pr-schalter button{appearance:none;border:0;background:transparent;color:var(--pr-text-soft);font:500 14px/1 'Inter',sans-serif;padding:0 16px;min-height:38px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.pr-schalter button[aria-pressed="true"]{background:var(--pr-petrol);color:#fff}
.pr-schalter--hell{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.pr-schalter--hell button{color:#dfe8e7}
.pr-schalter--hell button[aria-pressed="true"]{background:#fff;color:var(--pr-petrol)}
.pr-schalter--hell button:focus-visible{outline-color:#fff}
.pr-flyer-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:26px}

/* ── 7 Umsetzung ───────────────────────────────────────────────────────────────────────────── */
.pr-schritte{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pr-schritt{position:relative;padding:28px 26px 30px;border-radius:20px;background:var(--pr-weiss);border:1px solid var(--pr-linie-weich);box-shadow:var(--pr-schatten-klein)}
.pr-schritt::before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--pr-salbei)}
.pr-schritt-nr{display:block;font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:600;color:var(--pr-salbei-tief);line-height:1;margin-bottom:12px}
.pr-schritt h3{font-size:1.35rem;margin-bottom:8px}
.pr-schritt p{font-size:15px;line-height:1.65;color:var(--pr-text-soft)}

/* ── 8 CTA ─────────────────────────────────────────────────────────────────────────────────── */
.pr-cta{position:relative;overflow:hidden;text-align:center;padding:72px 48px;border-radius:32px;background:var(--pr-petrol);color:#e6efee}
.pr-cta::before{content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;pointer-events:none;background:radial-gradient(closest-side,rgba(169,191,174,.35),rgba(169,191,174,0) 70%);filter:blur(20px)}
.pr-cta>*{position:relative}
.pr-main .pr-cta h2{color:#fff;margin-bottom:14px}
.pr-cta p{font-size:17.5px;line-height:1.7;max-width:56ch;margin:0 auto 30px;color:#d5e1e0}
.pr-cta-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pr-cta :focus-visible{outline-color:#fff}

/* ── 9 FAQ + Linkzeile ─────────────────────────────────────────────────────────────────────── */
.pr-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:56px;align-items:start}
.pr-faq{border-top:1px solid var(--pr-linie)}
.pr-faq details{border-bottom:1px solid var(--pr-linie)}
.pr-faq summary{list-style:none;cursor:pointer;padding:22px 52px 22px 0;position:relative;font-family:'Cormorant Garamond',serif;font-size:1.42rem;font-weight:600;color:var(--pr-petrol);line-height:1.2}
.pr-faq summary::-webkit-details-marker{display:none}
.pr-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--pr-salbei-hell);color:var(--pr-petrol);font-family:'Inter',sans-serif;font-size:22px;display:flex;align-items:center;justify-content:center}
.pr-faq details[open] summary::after{content:"–"}
.pr-faq details p{color:var(--pr-text-soft);font-size:16px;line-height:1.78;padding:0 52px 24px 0;max-width:68ch}
.pr-faq details a{color:var(--pr-petrol);text-decoration:underline;text-decoration-color:var(--pr-salbei);text-underline-offset:3px}
.pr-mehr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:64px;padding-top:28px;border-top:1px solid var(--pr-linie-weich)}
.pr-mehr span{font-size:14px;color:var(--pr-text-muted);margin-right:6px}
.pr-mehr a{font-size:14px;font-weight:500;color:var(--pr-text-soft);border:1px solid var(--pr-linie);border-radius:999px;padding:8px 16px;transition:all .2s;background:var(--pr-weiss)}
.pr-mehr a:hover{color:var(--pr-petrol);border-color:var(--pr-salbei-tief);background:var(--pr-salbei-hell)}
.pr-mehr a.pr-mehr-alle{color:var(--pr-petrol);border-color:var(--pr-petrol)}

/* ── Fenster (Dialoge) ─────────────────────────────────────────────────────────────────────── */
.pr-fenster,.pr-flach{border:0;padding:0;background:transparent;color:var(--pr-text)}
.pr-fenster:not([open]),.pr-flach:not([open]){display:none}
.pr-fenster::backdrop,.pr-flach::backdrop{background:rgba(18,42,47,.86);backdrop-filter:blur(6px)}
.pr-fenster{width:min(96vw,1400px);height:min(92vh,940px);max-width:none;max-height:none;border-radius:20px;overflow:hidden;background:var(--pr-bg);display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.pr-fenster-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 22px;background:var(--pr-petrol);color:#fff;flex:0 0 auto}
.pr-fenster-kopf p{margin:0;font-size:14px;color:#dfe8e7}
.pr-fenster-kopf strong{color:#fff}
.pr-fenster-aktionen{display:flex;align-items:center;gap:16px}
.pr-fenster-zu{appearance:none;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.pr-fenster-zu:hover{background:rgba(255,255,255,.22)}
.pr-fenster :focus-visible,.pr-flach :focus-visible{outline:2px solid #fff;outline-offset:2px}
.pr-fenster-rahmen{flex:1 1 auto;width:100%;border:0;background:#fff;min-height:0}
.pr-flach{max-width:min(96vw,1100px);width:100%}
.pr-flach-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 0 12px}
.pr-flach .pr-fenster-kopf{width:100%;border-radius:14px}
.pr-flach img{width:auto;max-width:100%;height:auto;max-height:76vh;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}

/* ── Einblendung (reveal aus _shared/branche.js), etwas kürzer und näher ───────────────────── */
.js-anim .reveal{transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.js-anim .reveal.in{transform:none}
/* NF-R92: zusammengehoerige Gruppen erscheinen leicht zeitversetzt, Text folgt dem Bild, Bildbuehnen mit minimaler
   Tiefe (scale .985 -> 1). Ein System (reveal aus _shared/branche.js); bei reduzierter Bewegung greift der
   !important-Rueckfall aus branche.css, alles steht sofort. */
.js-anim .pr-prinzip:nth-child(2),.js-anim .pr-punkt:nth-child(2),.js-anim .pr-grund:nth-child(2),.js-anim .pr-schritt:nth-child(2){transition-delay:.1s}
.js-anim .pr-prinzip:nth-child(3),.js-anim .pr-punkt:nth-child(3),.js-anim .pr-grund:nth-child(3),.js-anim .pr-schritt:nth-child(3){transition-delay:.2s}
.js-anim .pr-schritt:nth-child(4){transition-delay:.3s}
.js-anim .pr-vertrauen-text>.reveal:nth-child(2),.js-anim .pr-vorbereitet-text>.reveal:nth-child(2),.js-anim .pr-flyer-text>.reveal:nth-child(2),.js-anim .pr-hero-text>.reveal:nth-child(2){transition-delay:.08s}
.js-anim .pr-vertrauen-text>.reveal:nth-child(3),.js-anim .pr-vorbereitet-text>.reveal:nth-child(3),.js-anim .pr-flyer-text>.reveal:nth-child(3),.js-anim .pr-hero-text>.reveal:nth-child(3){transition-delay:.16s}
.js-anim .pr-flyer-text>.reveal:nth-child(4),.js-anim .pr-hero-text>.reveal:nth-child(4){transition-delay:.24s}
.js-anim .pr-flyer-text>.reveal:nth-child(5),.js-anim .pr-hero-text>.reveal:nth-child(5){transition-delay:.32s}
.js-anim .pr-flyer-text>.reveal:nth-child(6){transition-delay:.4s}
.js-anim .pr-portrait.reveal,.js-anim .pr-warten.reveal,.js-anim .pr-buehne.reveal,.js-anim .pr-produkt-buehne.reveal,.js-anim .pr-geraete.reveal{transform:translateY(18px) scale(.985);transition-duration:.85s}
.js-anim .pr-portrait.reveal.in,.js-anim .pr-warten.reveal.in,.js-anim .pr-buehne.reveal.in,.js-anim .pr-produkt-buehne.reveal.in,.js-anim .pr-geraete.reveal.in{transform:none}

/* ── Responsive ────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .pr-schritte{grid-template-columns:repeat(2,1fr)}
  .pr-beispiel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px}
}
@media(max-width:1024px){
  .pr-wege{grid-template-columns:1fr;gap:24px}
  .pr-weg-liste{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .pr-weg{flex:1 1 220px;padding:14px 16px;border-radius:16px}
  .pr-weg-frage{display:none}
  .pr-weg[aria-selected="true"] .pr-weg-frage{display:block;font-size:14px}
  .pr-weg-titel{font-size:1.3rem}
  .pr-weg-nr{font-size:1.2rem}
  .pr-vertrauen,.pr-beispiel,.pr-vorbereitet,.pr-flyer{grid-template-columns:1fr;gap:44px}
  .pr-portrait{max-width:520px}
  .pr-geraete{padding:0 12% 12% 0}
  .pr-warten{order:-1;max-width:640px}
}
@media(max-width:960px){
  .pr-abschnitt{padding:80px 0}
  .pr-abschnitt--cta{padding-top:56px}
  .pr-hero{padding:132px 0 60px}
  .pr-hero-grid{grid-template-columns:1fr;gap:44px}
  .pr-hero h1{max-width:none}
  .pr-buehne{padding:12px 0 18px 0;max-width:640px}
  .pr-chip--a{left:-2%;top:6%}
  .pr-chip--b{right:-2%}
  .pr-chip--c{left:4%;bottom:4%}
  .pr-kopfzeile{margin-bottom:40px}
  .pr-faq-grid{grid-template-columns:1fr;gap:28px}
  .pr-cta{padding:56px 28px}
  .pr-fenster{width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .pr-abschnitt{padding:64px 0}
  .pr-abschnitt--cta{padding-top:44px}
  .pr-hero{padding:118px 0 48px}
  .pr-lead{font-size:17px}
  .pr-hero-knoepfe .pr-knopf{width:100%}
  .pr-buehne-bild{aspect-ratio:4/3.4}
  .pr-chips{position:static;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:0 2px}
  .pr-chip{position:static;font-size:13.5px;padding:8px 12px}
  .pr-schirm-kopf{padding:12px 16px}
  .pr-schirm-nav{display:none}
  .pr-schirm-body{padding:22px 18px 24px;min-height:0}
  .pr-mini-h{font-size:1.4rem}
  .pr-mini-liste li{grid-template-columns:1fr;row-gap:2px}
  .pr-mini-zwei{grid-template-columns:1fr;gap:16px}
  .pr-portrait{padding:0 12px 24px 0}
  .pr-portrait-karte{position:static;max-width:none;margin-top:-30px;margin-left:16px;margin-right:0;width:calc(100% - 16px);z-index:2;position:relative}
  .pr-prinzip{grid-template-columns:1fr;padding:20px}
  .pr-prinzip-nr{grid-row:auto;padding-top:0;margin-bottom:6px}
  .pr-geraete{padding:0 0 14% 0}
  .pr-phone{width:34%;right:-6px}
  .pr-beispiel-knoepfe .pr-knopf{width:100%}
  .pr-punkt{grid-template-columns:1fr;padding:18px}
  .pr-tafel{position:relative;max-width:none;margin-top:-24px;margin-left:12px;width:calc(100% - 12px)}
  .pr-warten{padding:0}
  .pr-produkt{max-width:none}
  .pr-flyer-inhalt div{grid-template-columns:1fr;gap:4px}
  .pr-flyer-steuerung,.pr-flyer-knoepfe{gap:12px}
  .pr-flyer-knoepfe .pr-knopf,.pr-cta-knoepfe .pr-knopf{width:100%}
  .pr-schritte{grid-template-columns:1fr}
  .pr-cta{padding:48px 20px;border-radius:24px}
  .pr-faq summary{font-size:1.22rem;padding-right:46px}
  .pr-faq details p{padding-right:0}
  .pr-flach .pr-fenster-kopf{border-radius:0}
}

/* ── Reduzierte Bewegung ───────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .pr-licht,.pr-buehne-bild img{animation:none}
  .pr-panel{animation:none}
  .pr-blatt,.pr-knopf,.pr-weg,.pr-schalter button,.pr-schirm-nav i,.pr-mehr a{transition:none}
  .pr-knopf:hover{transform:none}
}

/* ══ NF-R117  SMARTPHONE (bis 767 px) ═══════════════════════════════════════════════════════════
   Erste eigene Smartphone-Runde; Tablet (ab 768 px) und Desktop bleiben unberührt - alles steht in dieser einen Stufe.
   Ruhige Hierarchie bleibt: große, klare Überschrift, gut lesbarer Fließtext, keine zusätzliche Bewegung. */
@media (max-width:767px){
  /* Hero: Aussage, Zielgruppe und Anfrageknopf im ersten Bild (320 x 568: Knopf endet bei rund 545 px statt bei rund
     640 px) - der Fließtext bleibt mit 16 px bewusst etwas größer als auf den anderen Branchenseiten. */
  .pr-hero{padding-top:100px}
  .pr-auge{margin-bottom:12px}
  .pr-hero h1{font-size:clamp(2.15rem,9.8vw,2.6rem);margin-bottom:16px}
  .pr-lead{font-size:16px;line-height:1.6;margin-bottom:22px}
  .pr-hero-knoepfe{gap:10px}
  .pr-hero-notiz{margin-top:14px;font-size:13.5px}

  /* Kapitel: Titel und Einleitungen etwas kompakter (vorher 18 px / 1,75). */
  .pr-main h2{font-size:clamp(1.95rem,8.6vw,2.4rem);margin-bottom:14px}
  .pr-desc{font-size:16px;line-height:1.65}
  .pr-kopfzeile{margin-bottom:30px}

  /* Beispiel: das Telefon ragt nicht mehr über den Inhaltsrand (vorher 6 px). */
  .pr-phone{right:0}

  /* Flyer: Umschalter Vorder-/Rückseite und "Flach ansehen" direkt unter dem Flyer (vorher nach Überschrift, Text und
     Inhaltsliste - der Flyer war beim Umschalten nicht mehr im Bild). Die Hülle tritt zurück (display:contents); die
     einzelnen Teile blenden weiter wie bisher ein. */
  .pr-flyer{gap:0}
  .pr-flyer-text{display:contents}
  .pr-produkt-buehne{order:0}
  .pr-flyer-steuerung{order:1;margin:18px 0 38px}
  .pr-flyer-text > .pr-auge{order:2}
  .pr-flyer-text > h2{order:3}
  .pr-flyer-text > .pr-desc{order:4}
  .pr-flyer-inhalt{order:5}
  .pr-flyer-knoepfe{order:6}

  /* Tippflächen mindestens 44 px */
  .pr-schalter button{min-height:44px}
  .pr-flyer-knoepfe .pr-textlink{display:inline-flex;align-items:center;min-height:44px}
  .pr-mehr a{display:inline-flex;align-items:center;min-height:44px}
}

/* ══ NF-R119  SMARTPHONE UND TABLET (bis 1024 px; Desktop ab 1025 px unberührt) ═══════════════════════════════════
   Idee: ein Wegweisersystem statt Kartenstapel. Ruhige Listen mit feinen Linien, eine Aussage pro Absatz, die Augenzeilen
   benennen nur noch das Kapitel (vorher wiederholten zwei davon wörtlich die Überschrift).
   Kurzfassungen: .pr-voll (Desktop, unverändert) und .pr-knapp stehen nebeneinander, die jeweils andere ist display:none.
   Knöpfe: gefülltes Petrol = "Website anfragen" (Hero, nach dem Beispiel, Formular); Linie = Beispiel ansehen/öffnen;
   Textlink mit Pfeil = Zusatzleistung dort, wo sie gezeigt wird (Flyer, Video).
   Einstieg: die drei Hinweisschilder im Hero stellen sich nacheinander auf - wie die Beschilderung im Praxisflur. */
.pr-knapp,.pr-nur-schmal{display:none}
@media (max-width:1024px){
  .pr-voll{display:none}
  .pr-knapp{display:inline}
  .pr-nur-schmal{display:flex}
  /* Tippflächen auch am Tablet: Schalter 44 px, freistehende Textlinks mit unsichtbar vergrößerter Fläche */
  .pr-schalter button{min-height:44px}
  .pr-vorschau-fuss .pr-textlink,.pr-flyer-knoepfe .pr-textlink{position:relative}
  .pr-vorschau-fuss .pr-textlink::before,.pr-flyer-knoepfe .pr-textlink::before{content:"";position:absolute;inset:-12px 0}
  /* NF-R108: der Verweis unter der Vorschau ist eine eigene, ruhige Aktion - eigene Zeile, kurze Beschriftung
     ("Weg im Beispiel ansehen", Langfassung ab 1025 px unveraendert), Pfeil fest am letzten Wort, kein Umbruch mitten im
     Satz. Bei 320 px rund 200 px breit - passt ohne Ueberlauf. */
  .pr-vorschau-fuss .pr-textlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:2px;white-space:nowrap}
  .pr-vorschau-fuss .pr-textlink span{margin-left:0}

  /* Listen statt Karten */
  .pr-prinzipien{gap:0;margin-top:26px}
  .pr-prinzip{grid-template-columns:auto 1fr;column-gap:18px;padding:18px 0;background:none;border:0;border-top:1px solid var(--pr-linie);border-radius:0;box-shadow:none}
  .pr-prinzip-nr{grid-row:1/3;margin:0;padding-top:4px;font-size:1.45rem}
  .pr-prinzip h3{font-size:1.3rem;margin-bottom:4px}
  .pr-prinzip p{font-size:15px}
  .pr-punkte-liste{gap:0;margin-top:26px}
  .pr-punkt{grid-template-columns:auto 1fr;column-gap:16px;padding:18px 0;background:none;border:0;border-top:1px solid rgba(31,74,82,.18);border-radius:0;box-shadow:none}
  .pr-punkt .pr-ikon{background:var(--pr-weiss)}
  .pr-punkt h3{font-size:1.3rem;margin-bottom:4px}
  .pr-punkt p{font-size:15px}

  /* Beispiel öffnen = Ansehen (Linie), die Hauptaktion folgt im Anschlussblock */
  .pr-beispiel-knoepfe .pr-knopf:not(.pr-knopf--leise){background:transparent;color:var(--pr-petrol);border-color:var(--pr-petrol)}
  .pr-beispiel-knoepfe .pr-knopf:not(.pr-knopf--leise):hover{background:var(--pr-salbei-hell);box-shadow:none}
  .pr-weiter{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(44px,7vw,64px);padding:24px 26px;border-radius:20px;background:var(--pr-salbei-hell)}
  .pr-weiter p{margin:0;font-size:15px;line-height:1.55;color:var(--pr-text-soft)}
  .pr-weiter p b{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.55rem;line-height:1.15;color:var(--pr-petrol)}

  /* Flyer: Zusatzleistung als Textlink, gezeigt wird sie direkt darüber */
  .pr-flyer-knoepfe{gap:8px 24px}
  .pr-flyer-knoepfe .pr-knopf{width:auto;min-height:44px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--pr-petrol);font-size:15px;text-decoration:underline;text-decoration-color:var(--pr-salbei);text-underline-offset:4px;text-decoration-thickness:1.5px}
  .pr-flyer-knoepfe .pr-knopf::after{content:'\2192' / '';text-decoration:none;margin-left:2px}
  .pr-flyer-knoepfe .pr-knopf:hover{background:none;transform:none;text-decoration-color:var(--pr-petrol)}

  /* Video: Ansehen ist Linie, die Anfrage steht als Textlink daneben (branche-video.css lädt später - daher body) */
  body .bv--praxen .bv-links .pr-knopf{background:transparent;color:var(--pr-petrol);border-color:var(--pr-petrol)}
  body .bv--praxen .bv-links .pr-knopf:hover{background:var(--pr-weiss);box-shadow:none}

  /* Kontakt: der Anfrageknopf sprang zum Formular direkt darunter */
  .pr-cta-knoepfe .pr-knopf--hell{display:none}
}
@media (max-width:1024px) and (prefers-reduced-motion:no-preference){
  .js-anim .pr-chip{animation:prSchild .6s cubic-bezier(.2,.7,.2,1) both}
  .js-anim .pr-chip--a{animation-delay:.55s}
  .js-anim .pr-chip--b{animation-delay:.8s}
  .js-anim .pr-chip--c{animation-delay:1.05s}
  .js-anim .pr-chip--petrol i{display:inline-block;animation:prPfeil .5s ease-in-out 1.7s 2 alternate}
  .pr-knopf:active{transform:scale(.98)}
}
@keyframes prSchild{from{opacity:0;transform:translateY(10px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes prPfeil{to{transform:translateX(4px)}}

/* ── Tablet (768-1024 px): Text und Bild wieder nebeneinander, Bild führt ─────────────────────────────────────────── */
@media (min-width:768px) and (max-width:1024px){
  .pr-hero{padding-top:128px}
  .pr-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center}
  .pr-hero h1{font-size:clamp(2.2rem,4.6vw,2.8rem);max-width:none}
  .pr-lead{font-size:16.5px;line-height:1.65}
  .pr-buehne{max-width:none;padding:12px 0 18px}
  .pr-buehne-bild{aspect-ratio:4/5}
  .pr-chip--a{left:-8%;top:8%}
  .pr-chip--b{right:-3%;top:44%}
  .pr-chip--c{left:-4%;bottom:6%}
  .pr-vertrauen{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
  .pr-portrait{max-width:none;position:sticky;top:100px;padding:0 14px 26px 0}
  .pr-portrait-karte{left:18px;max-width:none;padding:14px 16px}
  .pr-portrait-karte ul{display:none}
  .pr-gruende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .pr-grund h3{font-size:1.3rem}
  .pr-grund p{font-size:14.5px}
  .pr-beispiel-knoepfe{grid-column:1/-1;margin-top:0}
  .pr-vorbereitet{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
  .pr-warten{order:0;max-width:none;position:sticky;top:100px;padding:0 0 30px 16px}
  .pr-warten img{aspect-ratio:4/5}
  .pr-flyer{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
  .pr-flyer-inhalt div{grid-template-columns:92px 1fr}
}

/* ── Smartphone (bis 767 px) ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .pr-hero-knoepfe .pr-knopf{min-height:48px}
  /* Porträt quadratisch statt 4:5 (vorher ein ganzer Bildschirm Bild) */
  .pr-portrait img{aspect-ratio:1/1;object-position:50% 22%}
  .pr-prinzip{column-gap:14px}
  .pr-ikon{width:38px;height:38px;border-radius:12px}
  .pr-punkt{column-gap:14px}
  /* Die Tafel wiederholte die Liste daneben; die Inhaltsliste des Flyers zeigt der Umschalter selbst */
  .pr-tafel,.pr-flyer-inhalt{display:none}
  .pr-weiter{flex-direction:column;align-items:stretch;padding:22px 18px}
  .pr-weiter .pr-knopf{width:100%}
  /* Umsetzung als ruhige Zeitleiste */
  .pr-schritte{gap:0}
  .pr-schritt{padding:18px 0 18px 52px;background:none;border:0;border-top:1px solid var(--pr-linie);border-radius:0;box-shadow:none}
  .pr-schritt::before{display:none}
  .pr-schritt-nr{position:absolute;left:0;top:16px;font-size:1.7rem;margin:0}
  .pr-schritt h3{font-size:1.25rem;margin-bottom:4px}
  .pr-cta{padding:40px 20px}
  #kurzanfrage .bf-kopf p{display:none}
}

/* ══ NF-R105  SMARTPHONE: BEWEGUNG (bis 767 px) ══════════════════════════════════════════════════════════════════════
   Leitidee: Ruhe und Verlaesslichkeit. Weniger Weg, keine Perspektive, kein Drehen; Informationsgruppen gehen
   weich ineinander ueber, im Ablauf hebt sich der Schritt, der gerade gelesen wird, leise ab (Referenz Hers
   "What comes next": nummerierte Schritte mit ruhiger Trennung). Wegweiser = gemeinsame Abschnittsnavigation.
   Tablet/Desktop unberuehrt. */
@media (max-width:767px){
  /* Weniger Weg fuer alle Einblendungen: 10 px statt 24 px, Buehnen ohne Verkleinerung */
  .js-anim .reveal:not(.in){transform:translateY(10px)}
  .js-anim .pr-portrait.reveal:not(.in),.js-anim .pr-warten.reveal:not(.in),.js-anim .pr-produkt-buehne.reveal:not(.in),.js-anim .pr-geraete.reveal:not(.in){transform:translateY(10px)}
  /* Licht im Hero steht still (eine weichgezeichnete Flaeche ueber 120 % Hoehe lief endlos) */
  .pr-licht{animation:none}
  /* Die Hinweisschilder an der Empfangsaufnahme starten erst, wenn die Aufnahme zu sehen ist - nicht beim Laden */
  .js-anim .pr-buehne:not(.ist-da) .pr-chip{animation-play-state:paused}
  .pr-hero-text{transform-origin:50% 0}
  /* Ablauf: der gelesene Schritt hebt sich leise ab (Rahmen und Schatten), die anderen bleiben unveraendert lesbar */
  .pr-schritt{transition:box-shadow .5s ease,border-color .5s ease,transform .5s ease}
  .pr-schritte.pr-folge .pr-schritt.ist-fokus{border-color:var(--pr-salbei-tief);box-shadow:0 18px 40px -26px rgba(31,74,82,.45)}
  .pr-schritte.pr-folge .pr-schritt::before{transition:left .5s ease,right .5s ease,background-color .5s ease}
  .pr-schritte.pr-folge .pr-schritt.ist-fokus::before{left:0;right:0;background:var(--pr-petrol)}
}
/* Atmende Empfangsaufnahme nur, solange sie zu sehen ist (alle Breiten) */
.pr-buehne.pr-ruht .pr-buehne-bild img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .pr-hero-text{transform:none!important;opacity:1!important}
  .pr-schritt,.pr-schritt::before{transition:none}
}