/* ============================================================
   styles.css — LP Medizintechnik · Uwe Weller Feinwerktechnik (v2)
   Design-Leitidee: „Technische Zeichnung / Messprotokoll"
   (design/DESIGN-SYSTEM.md). Tokens: Quelle tokens.css —
   Duplikat im Inline-Critical-CSS von index.html mitpflegen!
   ============================================================ */

/* ---------- Fonts (lokal, font-display: swap) ---------- */
@font-face{font-family:'Soho Gothic';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/sohogothic-thin.woff2') format('woff2'),url('../fonts/sohogothic-thin.woff') format('woff')}
@font-face{font-family:'Soho Gothic';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/sohogothic-light.woff2') format('woff2'),url('../fonts/sohogothic-light.woff') format('woff')}
@font-face{font-family:'Soho Gothic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/sohogothic-regular.woff2') format('woff2'),url('../fonts/sohogothic-regular.woff') format('woff')}
@font-face{font-family:'Soho Gothic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/sohogothic-medium.woff2') format('woff2'),url('../fonts/sohogothic-medium.woff') format('woff')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/oswald-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ---------- Tokens (Kopie aus tokens.css) ---------- */
:root{--magenta-500:#cc0099;--magenta-600:#a3007a;--magenta-050:#faf0f7;--ink:#000;--ink-body:#181c20;--ink-soft:#5c6870;--steel-700:#354553;--paper:#fff;--paper-tint:#f4f5f7;--dark-950:#101418;--dark-800:#1c2228;--line:#d9d9db;--line-strong:#949496;--on-dark:#eef1f4;--on-dark-soft:#9aa7b2;--ok:#1c7a3d;--err:#b3261e;--font-brand:"Soho Gothic","Oswald",ui-sans-serif,system-ui,sans-serif;--font-num:"Oswald","Soho Gothic",ui-sans-serif,sans-serif;--font-mono:ui-monospace,"SF Mono","Menlo","Consolas","Liberation Mono",monospace;--fw-thin:200;--fw-light:300;--fw-reg:400;--fw-med:500;--fs-hero:clamp(2.35rem,5.4vw,4.75rem);--fs-h2:clamp(1.9rem,4vw,3.4rem);--fs-h3:clamp(1.25rem,2vw,1.625rem);--fs-lead:clamp(1.1rem,1.6vw,1.35rem);--fs-body:1.0625rem;--fs-small:.9375rem;--fs-mono:.8125rem;--fs-num:clamp(3.5rem,9vw,8.5rem);--lh-display:1.02;--lh-body:1.55;--ls-mono:.08em;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--section-y:clamp(6rem,13vw,12rem);--wrap:1400px;--pad-x:clamp(1.25rem,4vw,3rem);--gutter:clamp(1rem,2.5vw,2rem);--radius:0;--shadow-line:0 1px 0 var(--line);--shadow-float:0 12px 40px rgb(16 20 24/.10);--ring:2px solid var(--magenta-500);--header-h:72px}

/* ---------- Basis ---------- */
h1,h2,h3,h4{font-weight:var(--fw-thin);color:var(--ink);line-height:var(--lh-display);margin:0}
h2{font-size:var(--fs-h2);letter-spacing:-.005em}
h3{font-size:var(--fs-h3);font-weight:var(--fw-med);line-height:1.25}
p{margin:0 0 1em}
strong,b{font-weight:var(--fw-med)}
.med{font-weight:var(--fw-med)}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--steel-700);font-variant-numeric:tabular-nums}
.mono a{color:inherit}
::selection{background:var(--magenta-500);color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip-link:focus{left:0}

/* Anker unter Sticky-Header */
:where(section[id],[id].sec){scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- Sektionen / Zeichnungsrahmen ---------- */
.sec{padding-block:var(--section-y);background:var(--paper);position:relative;overflow:clip}
.sec-tint{background:var(--paper-tint)}
.sec-dark{background:var(--dark-950);color:var(--on-dark)}
.sec-dark h2,.sec-dark h3{color:var(--on-dark)}
.sec-dark .mono{color:var(--on-dark-soft)}
.sec-head{position:relative;max-width:60rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec-sub{font-size:var(--fs-lead);color:var(--ink-soft);margin:14px 0 0;max-width:52ch}
.sec-dark .sec-sub{color:var(--on-dark-soft)}
/* Rasterlinie: Label sitzt AUF der gepunkteten Messskala (Marken-Echo) */
.sec-label{position:relative;margin:0 0 22px;padding-right:16px;display:inline-block;background:inherit}
.sec-head::before{content:"";position:absolute;top:.55em;left:0;right:calc(-1*var(--pad-x));height:2px;background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 2px,transparent 2px 7px);opacity:.75}
.sec .sec-head .sec-label{background:var(--paper)}
.sec-tint .sec-head .sec-label{background:var(--paper-tint)}
.sec-dark .sec-head .sec-label{background:var(--dark-950)}
/* Zeichnungskopf-Ziffer (Oswald-Halbton) */
.sec-no{position:absolute;top:-.35em;right:-.06em;z-index:0;font-family:var(--font-num);font-weight:300;font-size:var(--fs-num);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none}
.sec-no-dark{-webkit-text-stroke:1px var(--dark-800)}
.sec-head>*{position:relative;z-index:1}
.sec-head .sec-no,.sec-head>.sec-no{position:absolute;z-index:0}
.sec-bridge{margin-top:var(--sp-7);font-size:var(--fs-lead);color:var(--ink-soft)}
.capsule-dark{border-left-color:var(--dark-800);color:var(--on-dark-soft)}

/* ---------- Hero-Ergänzungen ---------- */
.hero-fig{max-width:520px;justify-self:end}
.hero-fig picture{display:block}
.hero-mass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mass-line,.mass-tick{stroke:var(--steel-700);stroke-width:1.25;opacity:.8}
.js .hero-mass .mass-line{stroke-dasharray:400;stroke-dashoffset:400;animation:massdraw 1.1s ease .35s forwards}
@keyframes massdraw{to{stroke-dashoffset:0}}
.mass-label{position:absolute;right:2%;bottom:-8px;margin:0;background:var(--paper);padding:4px 10px;border:1px dotted var(--line-strong)}
.trustbar{border-top:1px dotted var(--line-strong);background:var(--paper)}
.trustbar .wrap{padding-block:14px}
.trustbar p{margin:0}
.btn-nav{padding:12px 18px;font-size:.92rem;min-height:44px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.sec-dark .btn-ghost{color:var(--on-dark);border-color:var(--on-dark)}

/* ---------- S2 Timeline ---------- */
.timeline{list-style:none;margin:var(--sp-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gutter);position:relative}
.timeline::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 2px,transparent 2px 7px)}
.timeline li{position:relative;padding-top:26px}
.timeline li::before{content:"";position:absolute;top:2px;left:0;width:13px;height:13px;background:var(--paper-tint);border:1.5px solid var(--steel-700)}
.tl-year{display:block;font-family:var(--font-num);font-weight:500;font-size:1.6rem;color:var(--ink);margin-bottom:6px}
.tl-txt{font-size:var(--fs-small);color:var(--ink-body)}
.mixrow{margin-top:var(--sp-8);max-width:46rem}
.mixlead{font-weight:var(--fw-med);color:var(--ink)}
.mix{margin:0;display:grid;gap:10px}
.mix-item{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px}
.mix-item dt{font-size:var(--fs-small)}
.mix-item dd{margin:0;display:flex;align-items:center;gap:12px}
.mix-bar{display:block;height:12px;width:var(--v);min-width:6px;background:var(--steel-700);flex:0 0 auto;max-width:calc(100% - 60px)}
.mix-medical .mix-bar{background:var(--magenta-500)}
.mix-medical dt{font-weight:var(--fw-med)}
.mixnote{margin-top:var(--sp-5);color:var(--ink-soft)}

/* ---------- Card-Primitive „Protokollkarte" ---------- */
.card{background:var(--paper);border:1px dotted var(--line-strong);padding:clamp(1.4rem,3vw,2.2rem)}
.card-label{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-tint .card{background:var(--paper)}

/* ---------- S3 Angebot (Overlap-Editorial) ---------- */
.offer{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;margin-top:clamp(2.5rem,6vw,4rem)}
.offer-fig{margin:0;grid-row:1}
.offer-card{grid-row:1;z-index:1;box-shadow:var(--shadow-float)}
.offer-l .offer-fig{grid-column:1/7}
.offer-l .offer-card{grid-column:6/13}
.offer-r .offer-fig{grid-column:7/13}
.offer-r .offer-card{grid-column:1/8}
.offer-c .offer-card-wide{grid-column:2/12;box-shadow:none}
.offer h3{margin:0 0 10px}
.offer p:last-child{margin-bottom:0}
.scope-quote{margin:18px 0 0;padding:16px 18px;background:var(--paper-tint);border-left:2px solid var(--magenta-500)}
.scope-quote p{margin:0 0 8px;font-size:var(--fs-small)}
.scope-quote cite{font-style:normal}
.cta-echo{margin-top:16px}

/* ---------- S4 Scope ---------- */
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px dotted var(--line-strong);background:var(--paper);max-width:56rem}
.scope-col{padding:clamp(1.4rem,3vw,2.2rem)}
.scope-col+.scope-col{border-left:1px dotted var(--line-strong)}
.scope-h{margin:0 0 14px}
.scope-list{list-style:none;margin:0;padding:0}
.scope-list li{padding:9px 0 9px 26px;border-bottom:1px solid var(--line);position:relative}
.scope-list li:last-child{border-bottom:0}
.scope-yes li::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:5px;border-left:1.5px solid var(--steel-700);border-bottom:1.5px solid var(--steel-700);transform:rotate(-45deg)}
.scope-no li{color:var(--ink-soft)}
.scope-no li::before{content:"";position:absolute;left:4px;top:18px;width:10px;height:1.5px;background:var(--line-strong)}
.scope-close{margin-top:var(--sp-6);max-width:56rem;font-size:var(--fs-lead);color:var(--ink-body)}

/* ---------- S5 Scrollytelling ---------- */
.seq-sec{padding-bottom:0}
.seq{position:relative}
.seq-sticky{padding-bottom:var(--section-y)}
.seq-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--gutter);align-items:center}
.seq-stage{position:relative;margin:0;max-width:560px;width:100%}
.seq-stage picture{display:block}
.seq-poster,.seq-canvas{width:100%;aspect-ratio:1/1;height:auto;display:block}
.seq-canvas{position:absolute;inset:0;opacity:0}
.seq-canvas.is-ready{opacity:1}
.seq-cap{display:block;margin-top:10px;text-transform:none;letter-spacing:.04em}
.seq-hint{opacity:0;transition:opacity .4s}
.js .seq.is-scrub .seq-hint{opacity:1}
.seq-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.9rem,1.8vh,1.4rem)}
.seq-step{border-left:1px dotted var(--line-strong);padding-left:18px}
.seq-step p{margin:6px 0 0;font-size:var(--fs-small)}
.step-label{display:block}
.js .is-scrub .seq-step{opacity:.38;transition:opacity .35s,border-color .35s}
.js .is-scrub .seq-step.on{opacity:1;border-left-color:var(--magenta-500)}
.js .is-scrub .seq-step.on .step-label{color:var(--magenta-500)}
.seq-progress{height:2px;background:var(--line);margin-top:var(--sp-6);display:none}
.seq-progress-fill{display:block;height:100%;width:0;background:var(--magenta-500)}
.js .is-scrub .seq-progress{display:block}
/* Scrub aktiv (JS setzt .is-scrub nur ≥900px, ohne reduced-motion/saveData): */
.js .seq.is-scrub{height:340vh}
.js .seq.is-scrub .seq-sticky{position:sticky;top:var(--header-h);height:calc(100dvh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding-bottom:0}

/* ---------- S6 Präzisionsbeweis ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.proof{margin:0;position:relative}
.proof-a{grid-column:1/8}
.proof-b{grid-column:8/13;margin-top:var(--sp-9)}
.proof-c{grid-column:3/9;margin-top:calc(-1*var(--sp-8))}
.callout{display:flex;align-items:center;gap:10px;margin-top:10px}
.callout-line{flex:0 0 34px;height:1.5px;background:var(--steel-700);position:relative}
.callout-line::before,.callout-line::after{content:"";position:absolute;top:-4px;width:1.5px;height:9px;background:var(--steel-700)}
.callout-line::before{left:0}
.callout-line::after{right:0}
.callout .mono{text-transform:none;letter-spacing:.05em}

/* ---------- S7 Messraum ---------- */
.mess-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--gutter)*1.6);align-items:start}
.mess-table table{width:100%;border-collapse:collapse;background:var(--paper);border:1px dotted var(--line-strong)}
.mess-table caption{text-align:left;padding:0 0 10px}
.mess-table th,.mess-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-small);vertical-align:top}
.mess-table th{font-weight:var(--fw-med);border-bottom:1.5px solid var(--steel-700)}
.mess-table tr:last-child td{border-bottom:0}
.mess-table td.mono{text-transform:none}
.mess-note{margin-top:14px;color:var(--ink-soft);font-size:var(--fs-small)}
.mess-fig{margin:0}
.fig-note{display:block;margin-top:8px;text-transform:none;letter-spacing:.04em;color:var(--ink-soft)}

/* ---------- S8 Kennzahlen (dunkel) — Slot-Machine-Reel ---------- */
.num{font-family:var(--font-num);font-weight:300;line-height:1;color:var(--on-dark);font-variant-numeric:tabular-nums}
.unit{font-family:var(--font-mono);color:var(--magenta-500)}
/* Basis-/Fallback-Layout (kein JS, reduced-motion): einfache Liste */
.kpi-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-7)}
.kpi{display:flex;flex-direction:column-reverse;gap:6px}
.kpi-num{display:flex;align-items:baseline;gap:8px;font-size:clamp(3rem,7vw,6rem)}
.kpi-num .num{font-size:inherit}
.kpi-num .unit{font-size:1rem}
.kpi-label{font-size:var(--fs-small);color:var(--on-dark-soft)}
.kpi-progress{display:none;margin-top:var(--sp-7)}
.kpi-intro{max-width:34rem}
/* Reel-Zustand (nur mit JS, ohne reduced-motion) */
.js .kpi-sec.is-reel{padding-top:0}
.js .kpi-sec.is-reel .kpi-scroll{height:calc(100dvh + (var(--kpi-count) - 1) * 60vh);position:relative}
.js .kpi-sec.is-reel .kpi-sticky{position:sticky;top:0;height:100dvh;display:flex;align-items:center;overflow:clip}
.js .kpi-sec.is-reel .kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);width:100%;align-items:center}
.js .kpi-sec.is-reel .kpi-reel{position:relative;height:100dvh}
.js .kpi-sec.is-reel .kpi-list{display:block;position:absolute;inset:0;gap:0}
.js .kpi-sec.is-reel .kpi{position:absolute;top:50%;left:0;right:0;flex-direction:column-reverse;gap:12px;transform-origin:0 50%;will-change:transform,opacity;backface-visibility:hidden}
.js .kpi-sec.is-reel .kpi-num{font-size:clamp(4.5rem,13vw,12rem);gap:14px;letter-spacing:-.02em}
.js .kpi-sec.is-reel .kpi-num .unit{font-size:clamp(.9rem,1.4vw,1.25rem)}
.js .kpi-sec.is-reel .kpi-num .unit-pre{font-family:var(--font-num);font-size:.55em;color:var(--on-dark-soft);align-self:center}
.js .kpi-sec.is-reel .kpi-label{font-size:clamp(1rem,1.5vw,1.35rem);color:var(--on-dark-soft);letter-spacing:.02em}
.js .kpi-sec.is-reel .kpi.on .kpi-label{color:var(--on-dark)}
.js .kpi-sec.is-reel .kpi.on .unit{color:var(--magenta-500)}
.js .kpi-sec.is-reel .kpi-progress{display:block;margin-top:clamp(1.5rem,4vw,3rem)}
.js .kpi-sec.is-reel .kpi-idx{color:var(--magenta-500)}
/* Grid-Grundlage der Sektion nur ohne Reel */
.kpi-grid{display:grid}
.ctaband{margin-top:var(--sp-9);border-top:1px dotted var(--line-strong)}
.ctaband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5);padding-block:var(--sp-7)}
.ctaband-txt{margin:0;font-size:var(--fs-lead);max-width:46ch}
.ctaband-txt strong{color:var(--on-dark)}

/* ---------- S9 Anwendungsfelder ---------- */
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.field-card{padding:0;display:flex;flex-direction:column}
.field-fig{margin:0;border-bottom:1px dotted var(--line-strong);background:var(--paper-tint)}
.field-card>.card-label{margin:18px 22px 8px;padding-bottom:8px}
.field-card>p:not(.card-label){margin:0 22px 20px;font-size:var(--fs-small)}
.field-card>h3{margin:0 22px 8px}
.field-card-open{justify-content:center;padding:clamp(1.4rem,3vw,2.2rem);background:var(--paper-tint)}
.field-card-open .card-label{margin:0 0 12px}
.field-card-open p{margin:0 0 12px}

/* ---------- S10 Standort — Anfahrts-Bemaßung (Zeitschiene) ---------- */
.zeitschiene{margin:clamp(2rem,5vw,3.5rem) 0 0;background:var(--paper);border:1px dotted var(--line-strong);padding:clamp(1.6rem,4vw,3rem) clamp(1.6rem,5vw,4rem) clamp(1.2rem,3vw,2rem)}
.zs-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;margin-bottom:clamp(3.5rem,8vw,6rem)}
.zs-cap{text-transform:none;letter-spacing:.05em;color:var(--ink)}
.zs-limit{color:var(--ink);border:1px solid var(--line-strong);padding:5px 12px;letter-spacing:.08em}
.zs-scale{position:relative;height:clamp(210px,25vw,270px)}
.zs-rail{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--steel-700);transform-origin:left}
.zs-rail::before,.zs-rail::after{content:"";position:absolute;top:-6px;width:2px;height:14px;background:var(--steel-700)}
.zs-rail::before{left:0}.zs-rail::after{right:0}
/* Ruler-Gradationen (nur Ticks; 2 h beschriftet) */
.zs-grad{position:absolute;left:calc(var(--t)*100%);top:50%}
.zs-grad i{position:absolute;left:0;top:0;width:1px;height:9px;background:var(--line-strong);transform:translate(-50%,-50%)}
.zs-grad b{position:absolute;left:0;top:16px;transform:translateX(-50%);color:var(--ink-soft);white-space:nowrap}
.zs-end i{height:15px;background:var(--steel-700)}
/* Nullpunkt Wetzlar (einziges Magenta) */
.zs-origin{position:absolute;left:0;top:50%}
.zs-dot{position:absolute;left:0;top:0;width:15px;height:15px;background:var(--magenta-500);transform:translate(-50%,-50%) rotate(45deg)}
.zs-origin-lbl{position:absolute;left:16px;top:20px;display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.zs-origin-lbl b{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.12em;color:var(--ink)}
.zs-origin-lbl .mono{color:var(--magenta-500);text-transform:none}
/* Städte als Maß-Callouts, abwechselnd oben/unten */
.zs-city{position:absolute;left:calc(var(--t)*100%);top:50%}
.zs-node{position:absolute;left:0;top:0;width:10px;height:10px;background:var(--paper);border:1.5px solid var(--steel-700);transform:translate(-50%,-50%) rotate(45deg)}
.zs-ext{position:absolute;left:0;width:0;border-left:1px dotted var(--line-strong)}
.zs-lbl{position:absolute;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
.zs-name{font-weight:var(--fw-med);color:var(--ink);font-size:1.0625rem}
.zs-time{text-transform:none;letter-spacing:.06em;color:var(--ink-soft)}
.zs-city.up .zs-ext{bottom:6px;height:60px}
.zs-city.up .zs-lbl{bottom:74px;flex-direction:column-reverse}
.zs-city.down .zs-ext{top:6px;height:60px}
.zs-city.down .zs-lbl{top:74px}
.fig-note{margin-top:clamp(1.5rem,4vw,2.4rem)}
/* Reveal-Choreografie (nur mit JS; ohne JS ist alles im Endzustand sichtbar) */
.js .zeitschiene .zs-rail{transform:scaleX(0)}
.js .zeitschiene.in .zs-rail{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.22,.8,.26,1)}
.js .zeitschiene .zs-dot,.js .zeitschiene .zs-origin-lbl,.js .zeitschiene .zs-grad,.js .zeitschiene .zs-node{opacity:0}
.js .zeitschiene.in .zs-dot{opacity:1;transition:opacity .4s ease .35s}
.js .zeitschiene.in .zs-origin-lbl{opacity:1;transition:opacity .5s ease .5s}
.js .zeitschiene.in .zs-grad{opacity:1;transition:opacity .4s ease calc(.3s + var(--t)*.5s)}
.js .zeitschiene .zs-ext{height:0!important}
.js .zeitschiene .zs-lbl{opacity:0;transform:translateX(-50%) translateY(8px)}
.js .zeitschiene.in .zs-node{opacity:1;transition:opacity .35s ease calc(.5s + var(--ci)*.14s)}
.js .zeitschiene.in .zs-city.up .zs-ext{height:60px!important;transition:height .5s cubic-bezier(.22,.8,.26,1) calc(.6s + var(--ci)*.14s)}
.js .zeitschiene.in .zs-city.down .zs-ext{height:60px!important;transition:height .5s cubic-bezier(.22,.8,.26,1) calc(.6s + var(--ci)*.14s)}
.js .zeitschiene.in .zs-lbl{opacity:1;transform:translateX(-50%) translateY(0);transition:opacity .5s ease calc(.75s + var(--ci)*.14s),transform .5s cubic-bezier(.22,.8,.26,1) calc(.75s + var(--ci)*.14s)}
/* Fuß-Bereich */
.standort-foot{margin-top:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--gutter)*1.6);align-items:start}
.person-name{font-size:var(--fs-h3);font-weight:var(--fw-med);color:var(--ink);margin:0 0 2px}
.person-role{color:var(--ink-soft);margin:0 0 14px;font-size:var(--fs-small)}
.person-line{margin:0 0 14px}
.person-contact{font-size:1.15rem;font-weight:var(--fw-med);margin:0 0 14px;line-height:1.7}
.person-contact a{text-decoration:none}
.person-contact a:hover{color:var(--magenta-500)}
.person-note{margin:0;color:var(--ink-soft);font-size:var(--fs-small)}

/* ---------- S11 Readiness ---------- */
.ready-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--gutter)*1.6);align-items:start}
.ready-list{list-style:none;margin:0;padding:0}
.ready-list li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.ready-list li:first-child{padding-top:0}
.ready-no{flex:0 0 34px}
.doc-card{background:var(--paper-tint)}
.doc-title{font-size:var(--fs-h3);font-weight:var(--fw-med);color:var(--ink);margin:0 0 6px}
.doc-meta{margin:0 0 14px;text-transform:none;letter-spacing:.04em}
.scope-quote-doc{background:var(--paper);margin-bottom:18px}
.ready-formel{margin-top:var(--sp-8);max-width:62rem;font-size:var(--fs-lead);color:var(--ink);border-top:1px dotted var(--line-strong);padding-top:var(--sp-6)}
.ready-grenze{max-width:62rem;color:var(--ink-soft)}

/* ---------- S12 Stepper ---------- */
.stepper{list-style:none;margin:0;padding:0;counter-reset:step;position:relative;display:grid;gap:0}
.stepper::before{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;background-image:repeating-linear-gradient(180deg,var(--line-strong) 0 2px,transparent 2px 7px)}
.step{position:relative;padding:14px 0 14px 58px}
.step-no{position:absolute;left:0;top:12px;width:36px;height:36px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--steel-700);font-size:.95rem}
.step p{margin:6px 0}
@supports (animation-timeline: view()){
  .js .stepper::after{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:var(--magenta-500);transform-origin:top;transform:scaleY(0);animation:stepgrow linear both;animation-timeline:view();animation-range:entry 20% cover 70%}
  @keyframes stepgrow{to{transform:scaleY(1)}}
}

/* ---------- S13 Formular ---------- */
.form-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:calc(var(--gutter)*1.4);align-items:start}
.anfrage-form{padding:clamp(1.6rem,3.5vw,2.6rem)}
.form-progress{margin:0 0 10px}
.form-dots{list-style:none;display:flex;gap:6px;margin:0 0 26px;padding:0}
.form-dots li{width:34px;height:3px;background:var(--line)}
.form-dots li.on{background:var(--magenta-500)}
.hp-wrap{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.fstep{border:0;padding:0;margin:0;min-inline-size:0}
.fstep legend{font-size:var(--fs-h3);font-weight:var(--fw-med);color:var(--ink);padding:0;margin-bottom:18px}
.js .fstep{display:none}
.js .fstep.on{display:block}
.fgroup{margin-bottom:22px}
.fgroup-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.flabel{display:block;font-weight:var(--fw-med);font-size:var(--fs-small);color:var(--ink);margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--line-strong);background:var(--paper);font-size:var(--fs-small);transition:border-color .15s,background .15s}
.chip:hover span{border-color:var(--steel-700)}
.chip input:checked+span{border:1.5px solid var(--ink);background:var(--paper-tint);font-weight:var(--fw-med)}
.chip input:focus-visible+span{outline:var(--ring);outline-offset:2px}
.finput{width:100%;border:1px solid var(--line-strong);background:var(--paper);padding:13px 14px;font:inherit;font-size:var(--fs-body);color:var(--ink-body);border-radius:0;min-height:48px}
.finput:focus{border-color:var(--ink);outline:var(--ring);outline-offset:2px}
textarea.finput{resize:vertical;min-height:110px}
.finput-file{padding:10px}
.fhint{margin:8px 0 0;font-size:.85rem;color:var(--ink-soft)}
.fconsent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);cursor:pointer}
.fconsent input{width:18px;height:18px;margin-top:3px;accent-color:var(--magenta-500)}
.fnav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.fnav .btn:only-child{margin-left:auto}
.fback{background:none;border:0;font:inherit;font-size:var(--fs-small);color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:12px 4px}
.fback:hover{color:var(--ink)}
.form-msg{margin:20px 0 0;padding:14px 16px;border:1px dotted var(--line-strong);font-size:var(--fs-small)}
.form-msg.ok{border-color:var(--ok);color:var(--ok)}
.form-msg.err{border-color:var(--err);color:var(--err)}
.field-err{border-color:var(--err)!important}
.person-compact .person-name{font-size:1.25rem}

/* ---------- S14 FAQ ---------- */
.faq{max-width:56rem}
.faq details{background:var(--paper);border:1px dotted var(--line-strong);margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.08rem;font-weight:var(--fw-med);margin:0}
.faq summary::after{content:"+";font-family:var(--font-num);font-size:1.5rem;color:var(--steel-700);flex:0 0 auto;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details>p{padding:0 22px 20px;margin:0;max-width:66ch}
.faq-close{margin-top:var(--sp-7);color:var(--ink-soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark-950);color:var(--on-dark)}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:calc(var(--gutter)*1.5);padding-block:var(--sp-8)}
.footer-logo{background:#fff;padding:8px 10px;width:118px;height:auto}
.footer-addr{margin-top:16px;text-transform:none;letter-spacing:.04em;color:var(--on-dark-soft);line-height:1.8}
.footer-nav{display:flex;flex-direction:column;gap:10px}
.footer-nav a{color:var(--on-dark);text-decoration:none;font-size:var(--fs-small);width:fit-content}
.footer-nav a:hover{color:var(--magenta-500)}
.footer-cta p{margin:0 0 12px;font-size:var(--fs-lead);color:var(--on-dark)}
.footer-base{border-top:1px solid var(--dark-800);padding-block:18px}
.footer-base p{margin:0;color:var(--on-dark-soft)}

/* ---------- Parallax-Mikroversatz (Freisteller) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js [data-parallax] picture{animation:pfloat linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes pfloat{from{transform:translateY(22px)}to{transform:translateY(-22px)}}
  }
}

/* ---------- Reveals (IO, .js-gegated — Basis im Critical-CSS) ---------- */
.js [data-reveal]{transition-delay:var(--rd,0s)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .proof-c{margin-top:0}
}
@media (max-width:899px){
  .seq-grid{grid-template-columns:1fr}
  .seq-stage{max-width:460px;margin-inline:auto}
  /* Im Mobile-Scrub nur die aktive Stufe zeigen (alle 5 stehen im DOM) */
  .js .is-scrub .seq-steps li{display:none}
  .js .is-scrub .seq-steps li:first-child,.js .is-scrub .seq-steps li.on{display:block}
  .js .is-scrub .seq-steps li:first-child:not(.on)~li.on~li{display:none}
  .offer{display:block}
  .offer-fig{max-width:420px;margin-bottom:-40px}
  .offer-r .offer-fig{margin-left:auto}
  .offer-card{position:relative;margin-inline:var(--sp-4)}
  .mess-grid,.standort-foot,.ready-grid,.form-grid{grid-template-columns:1fr}
  /* Zeitschiene vertikal: Rail links, Städte als Zeilen nach rechts */
  .zs-head{margin-bottom:1.6rem;flex-direction:column;gap:8px;align-items:flex-start}
  .zs-scale{height:auto;min-height:430px;margin-top:1.6rem;padding:0}
  .zs-rail{left:10px;right:auto;top:0;bottom:0;width:2px;height:100%}
  .zs-rail::before,.zs-rail::after{left:-6px;top:auto;width:14px;height:2px}
  .zs-rail::before{top:0}.zs-rail::after{bottom:0;top:auto}
  .zs-grad{left:10px;top:calc(var(--t)*100%)}
  .zs-grad i{width:9px;height:1px}
  .zs-grad b{left:16px;top:0;transform:translateY(-50%)}
  .zs-origin{left:10px;top:0}
  .zs-origin-lbl{left:22px;top:0;transform:translateY(-50%)}
  .zs-city{left:10px;top:calc(var(--t)*100%)}
  .zs-city .zs-lbl{left:22px;top:0!important;bottom:auto!important;transform:translateY(-50%);flex-direction:column!important;align-items:flex-start!important}
  .zs-city .zs-ext{top:0!important;bottom:auto!important;left:0;width:12px;height:0;border-left:0;border-top:1px dotted var(--line-strong);transform:translateY(-50%)}
  .js .zeitschiene .zs-rail{transform:scaleY(0);transform-origin:top}
  .js .zeitschiene.in .zs-rail{transform:scaleY(1)}
  .js .zeitschiene .zs-lbl{transform:translateY(-50%) translateX(8px)}
  .js .zeitschiene.in .zs-city .zs-ext{height:0!important;width:12px!important}
  .js .zeitschiene.in .zs-lbl{transform:translateY(-50%) translateX(0)}
  .mess-fig{order:-1;max-width:560px}
  /* KPI-Reel: auf Mobil vertikal stapeln (Intro über Reel) */
  .js .kpi-sec.is-reel .kpi-grid{grid-template-columns:1fr;gap:2rem;align-content:center}
  .js .kpi-sec.is-reel .kpi-reel{height:52vh}
  .js .kpi-sec.is-reel .kpi-num{font-size:clamp(3.6rem,20vw,7rem)}
  .kpi-intro{max-width:none}
  .field-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .proof-a,.proof-b,.proof-c{grid-column:1/-1;margin-top:0}
  .proof-b{max-width:70%}
  .proof-c{margin-left:auto;max-width:85%}
  .timeline{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--gutter)}
  .timeline::before{display:none}
  .timeline li{border-top:2px dotted var(--line-strong);padding-top:16px}
  .timeline li::before{display:none}
  .scope-grid{grid-template-columns:1fr}
  .scope-col+.scope-col{border-left:0;border-top:1px dotted var(--line-strong)}
  .fgroup-2col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .sec-no{font-size:clamp(3rem,14vw,5rem)}
}
@media (max-width:520px){
  .num{font-size:2.6rem}
  .ctaband-in{flex-direction:column;align-items:flex-start}
  .hero-cta{gap:var(--sp-4)}
  .btn{width:100%;text-align:center}
  .btn-nav{width:auto}
  .fnav{flex-wrap:wrap}
  .fnav .btn{width:100%}
}

/* ============================================================
   Feedback-Runde 1 (2026-07-02): Intro-Canvas, Whitespace,
   Stack-Cards, Scroll-Animationen, Fixes
   ============================================================ */

/* Nav-CTA: weißer Text + echte Innenabstände (überschreibt .nav a) */
.nav a.btn-nav{color:#fff;padding:13px 24px}
.nav a.btn-nav:hover{color:#fff}

/* Mehr Luft zwischen Textebenen */
.sec-head{margin-bottom:clamp(2.6rem,6vw,4.5rem)}
.sec-sub{margin-top:20px}
.capsule{margin-bottom:clamp(2.2rem,5vw,3.6rem);padding-left:18px}
.sec-label{margin-bottom:28px}

/* Stepper: Magenta-Linie hinter den Nummernkästen */
.stepper::before,.stepper::after{z-index:0}
.step{z-index:1}
.step-no{z-index:2}

/* Präzisions-Collage: Captions nie überlappt */
.proof .callout{position:relative;z-index:3;background:inherit}
.proof-a,.proof-b{z-index:2}
.proof-c{z-index:1;margin-top:calc(-1*var(--sp-6))}
.sec .proof .callout{background:var(--paper);padding:6px 10px 6px 0;width:fit-content}

/* Vier Standbeine: prägnant + scroll-animiert */
.mixrow{max-width:none;margin-top:var(--sp-9)}
.mixlead{font-size:var(--fs-h3);font-weight:var(--fw-med);margin-bottom:var(--sp-6)}
.mix{gap:18px;max-width:72rem}
.mix-item{grid-template-columns:minmax(150px,220px) 1fr;gap:20px}
.mix-item dt{font-size:var(--fs-lead);font-weight:var(--fw-light)}
.mix-medical dt{font-weight:var(--fw-med)}
.mix-bar{height:clamp(20px,3vw,34px)}
.mix-item .mono{font-family:var(--font-num);font-size:clamp(1.2rem,2.2vw,1.9rem);letter-spacing:0;color:var(--ink)}
.mix-medical .mono{color:var(--magenta-500)}
.js .mix-bar{width:0;transition:width 1.1s cubic-bezier(.22,.8,.26,1)}
.js .mixrow.in .mix-bar{width:var(--v)}
.js .mixrow.in .mix-item:nth-child(2) .mix-bar{transition-delay:.12s}
.js .mixrow.in .mix-item:nth-child(3) .mix-bar{transition-delay:.24s}
.js .mixrow.in .mix-item:nth-child(4) .mix-bar{transition-delay:.36s}
.mixnote{margin-top:var(--sp-7);font-size:var(--fs-lead)}

/* Timeline: Linie zeichnet sich, Marker ploppen nacheinander */
.js .timeline::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,.8,.26,1)}
.js .timeline.in::before{transform:scaleX(1)}
.js .timeline li{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .timeline.in li{opacity:1;transform:none}
.js .timeline.in li:nth-child(1){transition-delay:.1s}
.js .timeline.in li:nth-child(2){transition-delay:.28s}
.js .timeline.in li:nth-child(3){transition-delay:.46s}
.js .timeline.in li:nth-child(4){transition-delay:.64s}
.js .timeline.in li:nth-child(5){transition-delay:.82s}
.js .timeline.in li:nth-child(6){transition-delay:1s}

/* Wort-Reveal für Headlines (JS teilt in .w-Spans) */
.js .rl .w{display:inline-block;overflow:clip;vertical-align:top}
.js .rl .w>span{display:inline-block;transform:translateY(115%);transition:transform .65s cubic-bezier(.22,.8,.26,1);transition-delay:calc(var(--wi)*45ms)}
.js .rl.in .w>span,.js .in .rl .w>span{transform:none}

/* Leistung: gestapelte Sticky-Cards */
.offer-stack{display:grid;gap:var(--sp-6)}
.offer-card2{position:sticky;top:calc(var(--header-h) + 28px + var(--oi,0)*18px);background:var(--paper);border:1px dotted var(--line-strong);box-shadow:0 -18px 50px rgb(16 20 24/.08);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:0;min-height:min(560px,66vh)}
.offer-card2 .oc-fig{margin:0;background:var(--paper-tint);border-right:1px dotted var(--line-strong);display:grid;place-items:center;overflow:clip}
.offer-card2 .oc-fig img{width:100%;height:100%;object-fit:contain;padding:clamp(1rem,3vw,2.5rem)}
.offer-card2 .oc-body{padding:clamp(1.8rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.offer-card2 h3{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 16px}
.offer-card2 .card-label{margin-bottom:18px}
.offer-card2:nth-child(even) .oc-fig{order:2;border-right:0;border-left:1px dotted var(--line-strong)}
@media (max-width:899px){.offer-card2{grid-template-columns:1fr;min-height:0;position:static}.offer-card2 .oc-fig{order:0!important;border:0;border-bottom:1px dotted var(--line-strong);min-height:240px}}

/* Galerie-Marquee (reale Weller-Medizinteile, scroll-gekoppelt) */
.galerie{padding-block:calc(var(--section-y)*.6);background:var(--paper);overflow:clip;border-top:1px dotted var(--line-strong);border-bottom:1px dotted var(--line-strong)}
.gal-track{display:flex;gap:var(--sp-6);width:max-content;padding-inline:var(--pad-x)}
.gal-item{margin:0;flex:0 0 auto;width:clamp(240px,26vw,400px)}
.gal-item img{width:100%;height:auto;background:var(--paper-tint)}
.gal-item figcaption{margin-top:8px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .gal-track{animation:galdrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes galdrift{from{transform:translateX(0)}to{transform:translateX(min(-28%,calc(100vw - 100%)))}}
  }
}

/* Intro: Apple-like Scroll-Sequenz als Seitenauftakt */
.intro{position:relative;background:var(--paper)}
.js .intro.is-scrub{height:380vh}
.intro-pin{position:relative;display:grid;align-content:start;justify-items:center;padding:calc(var(--header-h) + 2vh) var(--pad-x) 6vh}
.js .intro.is-scrub .intro-pin{position:sticky;top:0;height:100dvh;overflow:clip}
.intro-stage{position:relative;width:min(1000px,76vw);margin-inline:auto}
.intro-stage picture{display:block}
.intro-poster,.intro-canvas{width:100%;aspect-ratio:1920/1080;height:auto;display:block}
.intro-canvas{position:absolute;inset:0;opacity:0}
.intro-canvas.is-ready{opacity:1}
.intro-phase{max-width:820px;text-align:center;margin-inline:auto}
.intro-phase .kicker{margin-bottom:18px}
.intro-h1{font-size:clamp(1.9rem,4vw,3.6rem);font-weight:var(--fw-thin);line-height:var(--lh-display);letter-spacing:-.01em;color:var(--ink);margin:0}
.intro-h1 .med{font-weight:var(--fw-med)}
.intro-sub{font-size:var(--fs-lead);color:var(--ink-soft);max-width:58ch;margin:18px auto 0}
.intro .numline{justify-content:center;margin:0 0 26px}
.intro .hero-cta{justify-content:center}
.intro .capsule{text-align:left;margin:22px auto 0;max-width:60ch}
/* Ohne JS/Scrub: Phasen normal gestapelt mit Luft */
.intro-phase{margin-block:5vh}
/* Mit Scrub: Phasen überlagern die Stage und snappen per Klasse */
.js .intro.is-scrub .intro-phase{position:absolute;left:50%;transform:translate(-50%,12px);opacity:0;transition:opacity .45s cubic-bezier(.22,.8,.26,1),transform .45s cubic-bezier(.22,.8,.26,1);pointer-events:none;margin:0;width:min(860px,88vw)}
.js .intro.is-scrub .intro-phase.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.js .intro.is-scrub .intro-stage{margin-top:16vh}
.js .intro.is-scrub .ip-1{top:7vh}
.js .intro.is-scrub .ip-1 .capsule{display:none}
.js .intro.is-scrub .ip-2{bottom:13vh}
.js .intro.is-scrub .ip-3{bottom:13vh}
/* Visueller Scroll-Indikator: vertikale Gradient-Linie, animiert, kein Text */
.intro-scrollhint{position:absolute;bottom:2.2vh;left:50%;transform:translateX(-50%);display:none;width:2px;height:56px;overflow:hidden}
.intro-scrollhint span{display:block;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,var(--steel-700) 45%,var(--magenta-500) 100%);animation:hintflow 2.1s cubic-bezier(.45,0,.25,1) infinite}
@keyframes hintflow{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
.js .intro.is-scrub .intro-scrollhint{display:block}
/* Beat-Versatz der Stage: Beat 1 → 10 % nach unten (Luft unter der H1),
   ab Beat 2 → 15 % nach oben (Luft über den unteren Texten + Scroll-Indikator) */
.js .intro.is-scrub .intro-stage{transition:transform .75s cubic-bezier(.22,.8,.26,1)}
.js .intro.is-scrub[data-beat="0"] .intro-stage{transform:translateY(10%)}
.js .intro.is-scrub[data-beat="1"] .intro-stage,
.js .intro.is-scrub[data-beat="2"] .intro-stage{transform:translateY(-15%)}
.intro-trust{border-top:1px dotted var(--line-strong)}
.intro-trust .wrap{padding-block:14px}
.intro-trust p{margin:0}
@media (max-width:899px){
  .js .intro.is-scrub{height:300vh}
  .intro-stage{width:100vw}
  .js .intro.is-scrub .ip-1{top:max(8vh,6vh)}
  .intro-h1{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .js .intro.is-scrub .intro-phase{width:92vw}
}

/* ---------- Header-Zustände: transparent im Intro, solide danach ---------- */
.site-header{transition:background-color .35s ease,border-color .35s ease}
.brand img{transition:width .35s ease,height .35s ease}
.hdr-quick{display:none;margin-left:auto;align-items:center;gap:clamp(14px,2.4vw,30px)}
.hdr-tel{text-decoration:none;font-size:.95rem;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.hdr-tel:hover{color:var(--magenta-500)}
@keyframes hdrfade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Zustand A — im Intro („vor Scroll"): kein Hintergrund/Border, Logo +30 %, nur Tel + CTA */
.js .site-header.hdr-top{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.js .site-header.hdr-top .brand img{width:153px;height:66px}
.js .site-header.hdr-top .nav{display:none}
.js .site-header.hdr-top .nav-toggle{display:none}
.js .site-header.hdr-top .hdr-quick{display:flex;animation:hdrfade .4s ease both}
/* Zustand B — aus dem Intro gescrollt: Nav-Punkte einblenden, Tel-Gruppe weg */
.js .site-header:not(.hdr-top) .nav{animation:hdrfade .45s ease both}
@media (max-width:999px){
  .js .site-header:not(.hdr-top) .nav{animation:none}
  .js .site-header.hdr-top .brand img{width:140px;height:60px}
}
@media (max-width:479px){
  .hdr-tel{display:none}
  .hdr-quick .btn-nav{padding:11px 14px;font-size:.85rem}
}

/* ---------- S1b Leitgedanke (Introtext, Zeile für Zeile scroll-gescrubbt) ---------- */
.leitgedanke{background:var(--paper);padding-block:calc(var(--section-y)*.9)}
.lg-text{max-width:40vw;margin:0 auto;text-align:center;font-size:clamp(1.25rem,1.85vw,1.6rem);line-height:1.62;font-weight:var(--fw-light);color:var(--ink-body)}
.lg-text .il{display:block}
@media (max-width:899px){.lg-text{max-width:86vw;font-size:1.2rem}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .lg-text .il{opacity:0;transform:translateY(26px);animation:lgline linear both;animation-timeline:view();animation-range:entry calc(14% + var(--li)*8%) entry calc(42% + var(--li)*8%)}
    @keyframes lgline{to{opacity:1;transform:none}}
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .js .seq.is-scrub{height:auto}
  .js .seq.is-scrub .seq-sticky{position:static;height:auto}
  .seq-canvas{display:none}
  .js .intro.is-scrub{height:auto}
  .js .intro.is-scrub .intro-pin{position:static;height:auto;overflow:visible}
  .js .intro.is-scrub .intro-phase{position:static;transform:none;opacity:1;margin-block:5vh;width:auto}
  .intro-canvas{display:none}
  .js .timeline::before{transform:none;transition:none}
  .js .timeline li{opacity:1;transform:none}
  .js .mix-bar{width:var(--v);transition:none}
  .js .rl .w>span{transform:none;transition:none}
  .js .hero-mass .mass-line{stroke-dashoffset:0;animation:none}
  /* KPI-Reel: nie pinnen, statische Liste (JS setzt is-reel bei reduced ohnehin nicht) */
  .js .kpi-sec.is-reel{padding-block:var(--section-y)}
  .js .kpi-sec.is-reel .kpi-scroll{height:auto}
  .js .kpi-sec.is-reel .kpi-sticky{position:static;height:auto;display:block}
  .js .kpi-sec.is-reel .kpi-list,.js .kpi-sec.is-reel .kpi{position:static;transform:none;opacity:1}
  .js .kpi-sec.is-reel .kpi-reel{height:auto}
  /* Zeitschiene: Reveal wird (via .in) sofort/instant gesetzt — keine Spezial-Overrides nötig */
}