/* ============================================================
   Preihs Digital — „Blauer Werksdruck"
   Editorial-technisches Design: Papier, Tinte, Messwerte.
   ============================================================ */

/* ---------- Fonts (self-hosted, DSGVO-sauber) ---------- */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-v38-latin_latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-v38-latin_latin-ext-500italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-v38-latin_latin-ext-600italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-v4-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-v4-latin_latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-v4-latin_latin-ext-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-v4-latin_latin-ext-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-v20-latin_latin-ext-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#F4F1E9;
  --paper-2:#ECE8DC;
  --ink:#131720;
  --ink-2:#0D1119;
  --text:#1A1E28;
  --muted:#575C68;
  --text-inv:#EDEAE2;
  --muted-inv:#A9AEBB;
  --blue:#2458D4;
  --blue-deep:#1B44A8;
  --blue-bright:#6E9BFF;
  --line:rgba(19,23,32,.16);
  --line-strong:rgba(19,23,32,.34);
  --line-inv:rgba(237,234,226,.16);
  --line-inv-strong:rgba(237,234,226,.35);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',monospace;
  --pad:clamp(20px,4vw,48px);
  --sec:clamp(88px,11vw,150px);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--paper);overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
strong{font-weight:600}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--blue-bright)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;font-family:var(--mono);font-size:.85rem}
.skip-link:focus{left:0}

.container{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ---------- Typo-Werkzeuge ---------- */
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:14px;margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--blue);flex:none}
.dark .eyebrow{color:var(--blue-bright)}
.dark .eyebrow::before{background:var(--blue-bright)}

.display{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.015em;font-size:clamp(2rem,4.6vw,3.45rem);text-wrap:balance}
.display em{font-style:italic;font-weight:500;color:var(--blue)}
.dark .display em{color:var(--blue-bright)}

.sec-head{max-width:820px;margin-bottom:clamp(44px,6vw,72px)}
.sec-head .sub{margin-top:22px;font-size:1.13rem;color:var(--muted);max-width:62ch}
.dark .sec-head .sub{color:var(--muted-inv)}

.dark{background:var(--ink);color:var(--text-inv)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 30px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;cursor:pointer}
.btn .arr{transition:transform .2s ease;display:inline-block}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--text);background:rgba(19,23,32,.045)}
.dark .btn-outline{color:var(--text-inv);border-color:var(--line-inv-strong)}
.dark .btn-outline:hover{border-color:var(--text-inv);background:rgba(237,234,226,.07)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:20;background:rgba(244,241,233,.97);border-bottom:1px solid var(--line)}
.header-inner{max-width:1240px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:28px;height:72px}
.brand{flex:none;display:flex;align-items:center}
.brand img{width:172px;height:auto}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:6px}
.main-nav a{display:inline-block;padding:10px 13px;text-decoration:none;font-size:.98rem;font-weight:500;color:var(--text);border-bottom:2px solid transparent;transition:color .2s ease}
.main-nav a:hover{color:var(--blue)}
.header-right{display:flex;align-items:center;gap:20px}
.header-tel{font-family:var(--mono);font-size:.88rem;text-decoration:none;color:var(--muted);white-space:nowrap}
.header-tel:hover{color:var(--blue)}
.header-cta{min-height:44px;padding:10px 22px;font-size:.95rem;white-space:nowrap}
.nav-toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;color:var(--text)}
.back-link{margin-left:auto;text-decoration:none;font-weight:500;color:var(--muted)}
.back-link:hover{color:var(--blue)}

/* Mobile-Menü */
.menu-overlay{position:fixed;inset:0;z-index:15;background:var(--paper);display:flex;flex-direction:column;justify-content:flex-start;padding:110px var(--pad) 48px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.menu-open .menu-overlay{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.menu-overlay nav a{display:block;padding:13px 0;font-family:var(--serif);font-size:clamp(1.7rem,6vw,2.4rem);font-weight:500;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line)}
.menu-overlay nav a:hover{color:var(--blue)}
.menu-foot{margin-top:38px;display:flex;flex-direction:column;gap:10px}
.menu-foot a{font-family:var(--mono);font-size:.9rem;color:var(--muted);text-decoration:none}

/* ============================================================
   HERO — Tinte, Serif-These, Foto als montierte Tafel
   ============================================================ */
.hero{background:var(--ink);color:var(--text-inv);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 32%}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,13,19,.96) 0%,rgba(10,13,19,.88) 38%,rgba(10,13,19,.52) 68%,rgba(10,13,19,.32) 100%),
  linear-gradient(rgba(10,13,19,.28) 55%,rgba(10,13,19,.8) 100%)}
.hero-content{position:relative;max-width:680px;padding-block:clamp(84px,10vw,150px) clamp(56px,7vw,96px)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.55rem,5.8vw,4.7rem);line-height:1.04;letter-spacing:-.02em}
.hero h1 .row{display:block}
.hero h1 em{font-style:italic;color:var(--blue-bright)}
.hero .lead{margin-top:30px;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted-inv);max-width:56ch}
.hero .lead strong{color:var(--text-inv)}
.hero-ctas{margin-top:38px;display:flex;flex-wrap:wrap;gap:16px}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--muted-inv)}

/* Messwert-Strip */
.kpi-strip{position:relative;border-top:1px solid var(--line-inv);display:grid;grid-template-columns:repeat(4,1fr)}
.kpi{padding:26px 26px 34px 0;border-right:1px solid var(--line-inv)}
.kpi:last-child{border-right:0}
.kpi+.kpi{padding-left:26px}
.kpi .n{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:500;line-height:1;color:var(--text-inv);font-variant-numeric:tabular-nums}
.kpi .n em{font-style:normal;color:var(--blue-bright)}
.kpi .l{margin-top:10px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-inv);line-height:1.5}

/* ============================================================
   STATEMENT + LOGO-REGISTER — Papier
   ============================================================ */
.statement-sec{padding-block:var(--sec) 0}
.statement{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.25;letter-spacing:-.01em;max-width:22ch}
.statement .fig{font-style:italic;color:var(--blue);white-space:nowrap}
.statement-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(36px,5vw,72px);align-items:end}
.statement-aside{font-size:1.02rem;color:var(--muted);border-left:1px solid var(--line-strong);padding-left:26px;max-width:38ch}
.statement-aside .mono-note{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}

.logo-register{margin-top:clamp(56px,7vw,88px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.logo-register-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.logo-grid{display:grid;grid-template-columns:repeat(8,1fr)}
.logo-cell{display:flex;align-items:center;justify-content:center;padding:26px 18px;border-right:1px solid var(--line);min-height:100px}
.logo-cell:nth-child(8n){border-right:0}
.logo-cell:nth-child(-n+8){border-bottom:1px solid var(--line)}
.logo-cell img{max-height:44px;width:auto;max-width:100%;filter:grayscale(1) brightness(.5) contrast(1.05);opacity:.75;transition:filter .25s ease,opacity .25s ease}
.logo-cell:hover img{filter:none;opacity:1}

/* ============================================================
   PROBLEM — Befund-Ledger
   ============================================================ */
.problem{padding-block:var(--sec)}
.ledger{border-top:1px solid var(--line-strong)}
.ledger-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:baseline;padding:clamp(28px,3.6vw,44px) 0;border-bottom:1px solid var(--line)}
.ledger-row .fig{font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,7vw,5.4rem);line-height:.95;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ledger-row .fig sup{font-size:.45em;vertical-align:super}
.ledger-row h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.25}
.ledger-row p{color:var(--muted);max-width:44ch}
.ledger-src{padding-top:16px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   LEISTUNGEN — Zwei Hebel, geteilte Bühne (Tinte)
   ============================================================ */
.leistungen{background:var(--ink);color:var(--text-inv);padding-block:var(--sec)}
.hebel-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-inv)}
.hebel{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;gap:20px}
.hebel:first-child{border-right:1px solid var(--line-inv)}
.hebel img{width:100%;aspect-ratio:10/6.4;object-fit:cover}
.hebel-tag{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright)}
.hebel h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.hebel p{color:var(--muted-inv)}
.hebel ul{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.hebel li{position:relative;padding-left:30px;color:var(--text-inv);font-size:1.01rem}
.hebel li::before{content:"—";position:absolute;left:0;color:var(--blue-bright);font-weight:600}
.fundament{border:1px solid var(--line-inv);border-top:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.fundament img{width:100%;height:100%;object-fit:cover;min-height:240px}
.fundament-copy{padding:clamp(30px,4vw,52px)}
.fundament-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.2vw,1.9rem);margin:14px 0 12px}
.fundament-copy p{color:var(--muted-inv);max-width:58ch}

/* ============================================================
   VERSPRECHEN — Foto-Band
   ============================================================ */
.promise{position:relative;color:#fff;overflow:hidden}
.promise-bg{position:absolute;inset:0}
.promise-bg img{width:100%;height:100%;object-fit:cover}
.promise-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,17,25,.86),rgba(13,17,25,.76))}
.promise .display em{color:var(--blue-bright)}
.promise-inner{position:relative;text-align:center;padding-block:clamp(90px,12vw,160px);max-width:900px;margin:0 auto}
.promise .display{font-size:clamp(2.1rem,5vw,3.8rem);color:#fff}
.promise p.sub{margin-top:20px;font-size:1.1rem;color:rgba(237,234,226,.85)}
.promise .eyebrow{justify-content:center;color:var(--blue-bright)}
.promise .eyebrow::before{background:var(--blue-bright)}
.promise .eyebrow::after{content:"";width:34px;height:1px;background:var(--blue-bright);flex:none}

/* ============================================================
   METHODE — Verfahrensschritte mit Lauflinie
   ============================================================ */
.methode{padding-block:var(--sec)}
.steps{position:relative}
.step{display:grid;grid-template-columns:64px minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,52px);padding-block:clamp(36px,4.6vw,60px);position:relative}
.step:not(:last-child)::before{content:"";position:absolute;left:31px;top:78px;bottom:-24px;width:1px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform 1.1s ease .35s}
.step.in:not(:last-child)::before{transform:scaleY(1)}
.step-no{width:64px;height:64px;border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--muted);background:var(--paper);position:relative;z-index:1;transition:border-color .5s ease .2s,color .5s ease .2s}
.step.in .step-no{border-color:var(--blue);color:var(--blue)}
.step-copy .step-tag{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.step-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:14px}
.step-copy p{color:var(--muted);max-width:52ch}
.step-copy ul{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.step-copy li{position:relative;padding-left:28px;font-size:1rem}
.step-copy li::before{content:"—";position:absolute;left:0;color:var(--blue);font-weight:600}
.step-media{position:relative}
.step-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.step-media figcaption{margin-top:10px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px}

/* ============================================================
   ERGEBNISSE — Dossier mit Punktlinien
   ============================================================ */
.ergebnisse{background:var(--paper-2);padding-block:var(--sec)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.case{background:var(--paper);border:1px solid var(--line);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:18px;transition:border-color .25s ease,transform .25s ease}
.case:hover{border-color:var(--line-strong)}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:40px}
.case-top img{max-height:34px;width:auto}
.case-top .branche{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.case .fig{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,5.4vw,4.6rem);line-height:.95;color:var(--blue);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.case .fig-l{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.case h3{font-family:var(--serif);font-weight:500;font-size:1.28rem;line-height:1.3}
.case dl{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.case dl div{display:flex;align-items:baseline;gap:8px;font-size:.95rem}
.case dt{color:var(--muted);flex:none}
.case dl div::after{content:"";order:2;flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px)}
.case dd{order:3;font-weight:600;font-variant-numeric:tabular-nums}
.case .roles{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.case-more{margin-top:clamp(36px,5vw,56px);display:flex;justify-content:center}

/* ============================================================
   KUNDENSTIMMEN — dunkle Videobühne
   ============================================================ */
.stimmen{background:var(--ink);color:var(--text-inv);padding-block:var(--sec)}
.stimmen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.video-card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line-inv)}
.video-card video,.video-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;height:auto}
.video-embed{position:relative;aspect-ratio:16/9;background:#000}
.video-embed img{width:100%;height:100%;object-fit:cover}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card figcaption{padding:18px 20px 20px;border-top:1px solid var(--line-inv)}
.v-name{font-family:var(--serif);font-weight:500;font-size:1.12rem}
.v-firm{color:var(--muted-inv);font-size:.92rem;margin-top:2px}
.v-result{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright);margin-top:12px}

/* ============================================================
   REFERENZEN — Register
   ============================================================ */
.referenzen{padding-block:var(--sec)}
.ref-table{border-top:1px solid var(--line-strong)}
.ref-row{display:grid;grid-template-columns:repeat(4,1fr)}
.ref-item{display:flex;flex-direction:column;gap:14px;justify-content:center;padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,26px);border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:130px}
.ref-item:nth-child(4n){border-right:0}
.ref-item img{max-height:40px;width:auto;align-self:flex-start;filter:grayscale(1) brightness(.5) contrast(1.05);opacity:.78;transition:filter .25s ease,opacity .25s ease}
.ref-item:hover img{filter:none;opacity:1}
.ref-item span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ref-note{margin-top:26px;color:var(--muted);max-width:70ch}
.ref-note a{color:var(--blue);font-weight:600}

/* ============================================================
   VERGLEICH — Gegenüberstellung
   ============================================================ */
.compare{background:var(--paper-2);padding-block:var(--sec)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;border:1px solid var(--line);background:var(--paper)}
.cmp{padding:clamp(28px,3.4vw,44px);border-right:1px solid var(--line)}
.cmp:last-child{border-right:0}
.cmp .tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.cmp h3{font-family:var(--serif);font-weight:500;font-size:1.42rem;margin-bottom:22px}
.cmp ul{display:flex;flex-direction:column}
.cmp li{padding:13px 0 13px 32px;position:relative;border-top:1px solid var(--line);font-size:.99rem;color:var(--muted)}
.cmp li::before{position:absolute;left:0;top:13px;font-family:var(--mono);font-weight:600}
.cmp li.no::before{content:"✕";color:#A34040}
.cmp.featured{background:var(--ink);color:var(--text-inv);margin:-1px;position:relative}
.cmp.featured .tag{color:var(--blue-bright)}
.cmp.featured li{color:var(--text-inv);border-top-color:var(--line-inv)}
.cmp.featured li.yes::before{content:"✓";color:var(--blue-bright)}
.cmp .cta-row{margin-top:28px}

/* ============================================================
   VORAUSSETZUNGEN — Prüfliste + Stempel
   ============================================================ */
.kriterien{background:var(--ink);color:var(--text-inv);padding-block:var(--sec);position:relative;overflow:hidden}
.kriterien-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.kriterien-intro p{color:var(--muted-inv);margin-top:20px;max-width:46ch}
.stamp{margin-top:40px;width:150px;height:150px;position:relative;color:var(--blue-bright)}
.stamp svg{width:100%;height:100%}
.krit-list{counter-reset:krit;border-top:1px solid var(--line-inv-strong)}
.krit-list li{counter-increment:krit;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line-inv)}
.krit-list li::before{content:counter(krit,decimal-leading-zero);font-family:var(--mono);font-size:.95rem;color:var(--blue-bright);padding-top:4px}
.krit-list strong{display:block;font-family:var(--serif);font-weight:500;font-size:1.28rem;margin-bottom:8px}
.krit-list span{color:var(--muted-inv);font-size:.99rem}

/* ============================================================
   BROSCHÜRE
   ============================================================ */
.brochure{padding-block:var(--sec)}
.brochure-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:1px solid var(--line-strong)}
.brochure-copy{padding:clamp(30px,4vw,56px)}
.brochure-copy p.intro{color:var(--muted);max-width:56ch;margin-top:16px}
.brochure-points{margin-top:26px;display:flex;flex-direction:column;gap:11px;max-width:56ch}
.brochure-points li{display:flex;align-items:baseline;gap:10px;font-size:1rem}
.brochure-points li::before{content:"—";color:var(--blue);font-weight:600}
.brochure-cta{background:var(--blue);color:#fff;padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.brochure-cta h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.3}
.brochure-cta .btn{align-self:flex-start}
.brochure-cta .hint{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;color:rgba(255,255,255,.85)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--paper-2);padding-block:var(--sec)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:start}
.faq-list{border-top:1px solid var(--line-strong)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--serif);font-weight:500;font-size:1.16rem;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--blue);flex:none;transition:transform .25s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--blue)}
.faq-list details p{padding:0 4px 24px;color:var(--muted);max-width:66ch}
.faq-side p{color:var(--muted);margin-top:18px;max-width:40ch}
.faq-side .btn{margin-top:26px}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt{background:var(--ink);color:var(--text-inv);padding-block:var(--sec);position:relative;overflow:hidden}
.kontakt::before{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(110,155,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(110,155,255,.045) 1px,transparent 1px);
  background-size:72px 72px;pointer-events:none}
.kontakt-inner{position:relative;max-width:860px;margin:0 auto;text-align:center}
.kontakt .eyebrow{justify-content:center}
.kontakt .display{font-size:clamp(2.2rem,5vw,3.8rem)}
.kontakt p.lead{margin:26px auto 0;font-size:1.14rem;color:var(--muted-inv);max-width:58ch}
.kontakt .btn{margin-top:38px}
.kontakt-lines{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-inv);border:1px solid var(--line-inv);max-width:640px;margin-inline:auto}
.kontakt-lines>div{background:var(--ink);padding:22px 18px}
.kontakt-lines .cap{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-inv);margin-bottom:8px}
.kontakt-lines a{font-family:var(--mono);font-size:1rem;color:var(--text-inv);text-decoration:none}
.kontakt-lines a:hover{color:var(--blue-bright)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink-2);color:var(--muted-inv);border-top:1px solid var(--line-inv);padding:52px 0 40px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line-inv)}
.footer-top img{width:150px;height:auto}
.footer-nav{display:flex;gap:26px;flex-wrap:wrap}
.footer-nav a{text-decoration:none;color:var(--muted-inv);font-size:.95rem}
.footer-nav a:hover{color:var(--text-inv)}
.footer-legal{padding-top:26px;display:flex;flex-direction:column;gap:14px}
.footer-legal p{font-size:.85rem;line-height:1.6;max-width:110ch}

/* ============================================================
   Unterseiten-Hero
   ============================================================ */
.page-hero{background:var(--ink);color:var(--text-inv);padding-block:clamp(70px,9vw,120px)}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.06;letter-spacing:-.02em}
.page-hero h1 em{font-style:italic;color:var(--blue-bright)}
.page-hero .sub{margin-top:24px;font-size:1.14rem;color:var(--muted-inv);max-width:62ch}
.cta-band{padding-block:0 var(--sec);background:var(--paper)}
.cta-card{background:var(--ink);color:var(--text-inv);text-align:center;padding:clamp(50px,7vw,90px) var(--pad)}
.cta-card .display{color:var(--text-inv)}
.cta-card p{margin:20px auto 0;color:var(--muted-inv);max-width:56ch}
.cta-card .btn{margin-top:34px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1360px){
  .header-tel{display:none}
}
@media (max-width:1140px){
  .main-nav a{padding:10px 9px;font-size:.94rem}
}
@media (max-width:1020px){
  .main-nav{display:none}
  .nav-toggle{display:flex}
  .hero-bg img{object-position:62% 30%}
  .hero-bg::after{background:
    linear-gradient(90deg,rgba(10,13,19,.94) 0%,rgba(10,13,19,.86) 55%,rgba(10,13,19,.62) 100%),
    linear-gradient(rgba(10,13,19,.3) 55%,rgba(10,13,19,.85) 100%)}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .kpi{border-right:0;border-bottom:1px solid var(--line-inv);padding:20px 0}
  .kpi+.kpi{padding-left:0}
  .kpi:nth-child(odd){border-right:1px solid var(--line-inv);padding-right:20px}
  .kpi:nth-child(even){padding-left:20px}
  .kpi:nth-last-child(-n+2){border-bottom:0}
  .statement-grid{grid-template-columns:1fr;align-items:start}
  .statement-aside{max-width:56ch}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .logo-cell:nth-child(8n){border-right:1px solid var(--line)}
  .logo-cell:nth-child(4n){border-right:0}
  .logo-cell:nth-child(-n+12){border-bottom:1px solid var(--line)}
  .hebel-grid{grid-template-columns:1fr}
  .hebel:first-child{border-right:0;border-bottom:1px solid var(--line-inv)}
  .fundament{grid-template-columns:1fr}
  .fundament img{max-height:320px}
  .case-grid{grid-template-columns:1fr;max-width:640px}
  .stimmen-grid{grid-template-columns:1fr 1fr}
  .compare-grid{grid-template-columns:1fr}
  .cmp{border-right:0;border-bottom:1px solid var(--line)}
  .cmp:last-child{border-bottom:0}
  .cmp.featured{margin:0}
  .kriterien-grid{grid-template-columns:1fr}
  .brochure-card{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .ref-row{grid-template-columns:1fr 1fr}
  .ref-item:nth-child(4n){border-right:1px solid var(--line)}
  .ref-item:nth-child(2n){border-right:0}
}
@media (max-width:640px){
  body{font-size:1rem}
  .header-inner{gap:12px;height:62px}
  .brand img{width:132px}
  .header-cta{padding:9px 14px;font-size:.86rem;min-height:40px}
  .header-cta .cta-long{display:none}
  .header-right{gap:8px;margin-left:auto}
  .nav-toggle{width:44px;height:44px}
  .step{grid-template-columns:1fr;gap:18px}
  .step:not(:last-child)::before{display:none}
  .step-no{width:52px;height:52px}
  .step-media{order:3}
  .stimmen-grid{grid-template-columns:1fr}
  .ledger-row{grid-template-columns:1fr;gap:10px}
  .ledger-row p{max-width:none}
  .kontakt-lines{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
  .brochure-cta .btn{align-self:stretch}
  .case-more .btn{width:100%}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .logo-cell:nth-child(4n){border-right:1px solid var(--line)}
  .logo-cell:nth-child(2n){border-right:0}
  .logo-cell:nth-child(-n+14){border-bottom:1px solid var(--line)}
  .ref-row{grid-template-columns:1fr}
  .ref-item{border-right:0!important}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn .arr{transition:none}
  .stamp svg{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}