/* ERGONOVA - "Praezise Waerme" v3. Self-hosted Fonts, OKLCH aus Seed #9b141b.
   Keine Em-Dashes, AAA-Latte 7:1 (verifiziert). Motion: scroll-driven + prefers-reduced-motion.
   Mobile-Nav: <details>-Overlay (no-JS-fest), app.js verbessert (Esc/Close).
   Absolute Asset-Pfade (/fonts, /assets) -> identisch fuer / und die Rechts-Routen. */

@font-face { font-family:"Bricolage"; src:url("/ergonova/fonts/bricolage.woff2") format("woff2"); font-weight:200 800; font-display:swap}
@font-face { font-family:"Hanken"; src:url("/ergonova/fonts/hanken.woff2") format("woff2"); font-weight:300 800; font-display:swap}
/* Metrik-gematchte Fallbacks (browser-gemessen): belegen denselben Platz wie der Web-Font ->
   kein Umbruch-/Hoehen-Sprung je nach Font-Ladezustand/OS (Cross-Device-Konsistenz). */
@font-face{font-family:"Bricolage-Fallback";src:local("Arial");size-adjust:100.6%;ascent-override:92.5%;descent-override:26.8%;line-gap-override:0%}
@font-face{font-family:"Hanken-Fallback";src:local("Arial");size-adjust:100.5%;ascent-override:102.4%;descent-override:31%;line-gap-override:0%}

:root {
  --paper: oklch(0.976 0.006 80);
  --paper-2: oklch(0.945 0.010 80);
  --ink: oklch(0.23 0.018 45);
  --ink-soft: oklch(0.40 0.020 50);
  --rot: oklch(0.505 0.185 27);        /* bright: NUR grosse/fette Display-Akzente (AAA-large) */
  --rot-ink: oklch(0.40 0.16 28);      /* kleiner Rot-Text + Button-Flaeche (AAA 7:1) */
  --rot-deep: oklch(0.33 0.135 28);    /* Button-Hover */
  --korridor: oklch(0.36 0.14 28);     /* getraenkte Rot-Flaeche (weisser Text AAA) */
  --stuetze: oklch(0.55 0.035 235);
  --linie: oklch(0.23 0.018 45 / 0.14);
  --d: "Bricolage","Bricolage-Fallback",system-ui,sans-serif;
  --b: "Hanken","Hanken-Fallback",system-ui,-apple-system,sans-serif;
  --step--1: clamp(0.80rem,0.74rem + 0.3vw,0.88rem);
  --step-0: clamp(1.06rem,1.0rem + 0.35vw,1.2rem);
  --step-1: clamp(1.3rem,1.15rem + 0.7vw,1.6rem);
  --step-2: clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3: clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --step-4: clamp(2.8rem,2.0rem + 4vw,5rem);
  --step-5: clamp(3.4rem,2.2rem + 6vw,7rem);
  --step-6: clamp(4.5rem,2.5rem + 8vw,9.5rem);
  /* Hoehen-Budget (GO-HERO-HOEHEN-BUDGET B2; Marken-Korridor ergonova: editorial-
     grosszuegig, Display-Cap 12.5svh): auf normalen Screens bindet weiter der
     vw-Clamp (kein Groessenverlust); nur auf KURZEN Viewports greift der svh-Cap. */
  --hero: clamp(2.7rem,1.5rem + 5.4vw,6.4rem);
  --top-h: 5.5rem; /* reale Header-Hoehe (~87px), fuer das Fold-Budget des Heros */
  --mx: clamp(1.25rem,0.6rem + 3vw,5rem);
  --gap: clamp(2rem,1rem + 3vw,4rem);
  --sec: clamp(5rem,3rem + 8vw,11rem)}

* { box-sizing:border-box; margin:0}
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body {
  background:var(--paper); color:var(--ink); font-family:var(--b);
  font-size:var(--step-0); line-height:1.55; font-weight:380; letter-spacing:-0.005em;
  overflow-x:hidden;
  background-image: radial-gradient(120% 80% at 100% 0%, #f2ece4 0%, transparent 55%);
  background-image:radial-gradient(120% 80% at 100% 0%, oklch(0.945 0.012 70) 0%, transparent 55%)}
img { max-width:100%; height:auto; display:block}
a { color:inherit}
.wrap { max-width:1320px; margin-inline:auto; padding-inline:var(--mx); position:relative}
section { padding-block:var(--sec); position:relative; z-index:2}

body::before {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.4;
  background-image:url("/ergonova/assets/grain.png"); background-size:160px 160px}

.kicker { font-family:var(--b); font-weight:600; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.22em; color:var(--rot-ink); display:inline-flex; align-items:center; gap:0.7rem}
.kicker::before { content:""; width:2.2rem; height:2px; background:var(--rot-ink); display:inline-block}
h1,h2,h3 { font-family:var(--d); font-weight:280; line-height:1.02; letter-spacing:-0.02em; overflow-wrap:break-word; hyphens:auto}
h2 { font-size:var(--step-4); margin-block:0.6em 0.5em; max-width:18ch}
h3 { font-size:var(--step-2); font-weight:360; letter-spacing:-0.015em}
.lead { font-size:var(--step-1); line-height:1.4; max-width:34ch; color:var(--ink-soft); font-weight:360}
p { max-width:60ch}
strong,.mk { font-weight:740; letter-spacing:-0.01em; color:var(--ink)}
em { font-style:normal; color:var(--rot)}

.btn { display:inline-flex; align-items:center; gap:0.6rem; background:var(--rot-ink); color: #fcfaf6; color:oklch(0.985 0.005 80); font-family:var(--b); font-weight:640; font-size:var(--step-0); padding:0.95rem 1.6rem; border-radius:2px; text-decoration:none; letter-spacing:-0.01em; transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s; min-height:48px}
.btn:hover { transform:translateY(-2px); background:var(--rot-deep)}
.arr { transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arr { transform:translateX(5px)}
.btn--ghost { background:transparent; color:var(--ink); border:1.5px solid var(--linie)}
.btn--ghost:hover { background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ============ HEADER ============ */
.top { position:sticky; top:0; z-index:100}
.top::before { content:""; position:absolute; inset:0; background: rgba(249, 247, 243, 0.92); background:oklch(0.976 0.006 80 / 0.92); border-bottom:1px solid transparent; opacity:0}
@supports (animation-timeline: scroll()) {
  .top::before { animation:hdr linear both; animation-timeline:scroll(root); animation-range:40px 160px}}
@keyframes hdr { to { opacity:1; border-bottom-color:var(--linie)}}
.top-row { display:flex; align-items:center; justify-content:space-between; padding-block:clamp(1rem,0.7rem + 0.8vw,1.5rem); position:relative; z-index:2}
.brand { font-family:var(--d); font-weight:760; font-size:var(--step-1); letter-spacing:-0.03em; text-decoration:none; display:inline-flex; align-items:center}
.brand b { color:var(--rot); font-weight:760}
.brand .dot { width:0.42rem; height:0.42rem; border-radius:50%; background:var(--rot); display:inline-block; margin-left:0.35rem; margin-bottom:-0.05rem}

.desk-nav { display:flex; gap:clamp(1.2rem,0.6rem + 1.4vw,2.4rem); align-items:center}
.desk-nav a { text-decoration:none; font-size:var(--step--1); letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); position:relative; padding-block:0.45rem}
.desk-nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--rot-ink); transition:right .3s cubic-bezier(.2,.7,.2,1)}
.desk-nav a:not(.nav-cta):hover { color:var(--ink)}
.desk-nav a:not(.nav-cta):hover::after { right:0}
.nav-cta { color:var(--rot-ink) !important; border:1.5px solid var(--rot-ink); border-radius:2px; padding:0.55rem 1rem !important; display:inline-flex; gap:0.4rem; align-items:center; transition:background .3s,color .3s}
.nav-cta:hover { background:var(--rot-ink); color: #fefbf8 !important; color:oklch(0.99 0.005 80) !important}
.nav-cta .arr { font-size:0.9em}

/* Marken-Hooks fuers Header-Modul (RUNDE4-S-A-Referenz-Rollout): ergonova-Look 1:1 uebernommen */
.sf-mnav summary{font-size:var(--step--1);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;color:var(--ink);z-index:210;padding:0.5rem 0.2rem}
.sf-mnav-bars{width:26px;height:2.5px}
.sf-mnav-bars::before,.sf-mnav-bars::after{width:26px;height:2.5px;top:-8px}
.sf-mnav-bars::after{top:8px}
.sf-mnav-panel{--sf-mnav-bg:var(--paper);--sf-mnav-ink:var(--ink);background-image:radial-gradient(100% 60% at 100% 0%, #f2e9e2, transparent 60%);background-image:radial-gradient(100% 60% at 100% 0%, oklch(0.94 0.014 65), transparent 60%);justify-content:flex-start}
.sf-mnav-nav a{font-family:var(--d);font-weight:300;font-size:clamp(2.2rem,11vw,3.2rem);letter-spacing:-0.02em;min-height:0;padding:0.5rem 0;border-bottom:1px solid var(--linie)}
.sf-mnav-nav a:active{color:var(--rot-ink)}
.sf-mnav-panel .m-panel-cta{margin-top:1.6rem;justify-content:center;font-size:var(--step-1)}
.sf-mnav-panel .m-panel-foot{margin-top:auto;padding-top:2rem;display:flex;justify-content:space-between;align-items:center;font-size:var(--step--1);letter-spacing:0.04em;color:var(--ink-soft)}
.sf-mnav-panel .m-panel-foot a{font-family:var(--d);font-weight:700;color:var(--rot-ink);text-decoration:none;font-size:var(--step-1)}

/* ============ HERO ============ */
/* Header ist position:sticky (liegt IM Fluss, belegt seine Hoehe bereits) -> Hero braucht NUR
   Atemraum, KEINE Header-Clearance. Frueher clamp(7rem..11rem) doppelte die 87px Header-Hoehe
   -> ~30% des Folds tot. Fix: kleines Padding (Header-Hoehe nicht doppelt zaehlen). */
.hero { padding-top:clamp(1.2rem,0.6rem + 2vw,3rem); padding-bottom: min(2.5rem,4vh); padding-bottom:min(2.5rem,4svh); min-height: calc(100vh - var(--top-h)); min-height:calc(100svh - var(--top-h)); display:grid; align-content:center}
.hero-claim { font-family:var(--d); font-weight:240; font-size:var(--hero); line-height:0.99; letter-spacing:-0.035em; margin-block: min(1.4rem,2vh) 0; margin-block:min(1.4rem,2svh) 0; font-variation-settings:"wght" 250}
.hero-claim .pop { font-weight:800; color:var(--rot); font-variation-settings:"wght" 800}
@keyframes settle { from { transform:translateY(0.28em)} to { transform:none}}
.hero-bottom { display:flex; gap:var(--gap); align-items:flex-end; justify-content:space-between; flex-wrap:wrap; margin-top: min(2.6rem,3.5vh); margin-top:min(2.6rem,3.5svh)}
.hero-bottom .lead { margin:0}
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.hero-meta { display:flex; gap:clamp(1.6rem,1rem + 2vw,3.4rem); margin-top: min(3rem,4vh); margin-top:min(3rem,4svh); border-top:1px solid var(--linie); padding-top: min(1.4rem,2vh); padding-top:min(1.4rem,2svh); flex-wrap:wrap}
.hero-meta div { display:flex; flex-direction:column}
.hero-meta b { font-family:var(--d); font-size:var(--step-2); font-weight:760; color:var(--rot); line-height:1}
.hero-meta span { font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); margin-top:0.4rem}
/* Kompakt-Zone kurze Laptops: NUR hier greifen die svh-Caps (Basis bleibt pur,
   damit die Riesen-Moment-Decke auf normalen Screens unberuehrt ist). */
@media (max-height:50rem){
  .hero { --hero: min(clamp(2.7rem,1.5rem + 5.4vw,6.4rem), 11svh); padding-top: min(1.5rem,2vh); padding-top:min(1.5rem,2svh); padding-bottom: min(1.5rem,2.5vh); padding-bottom:min(1.5rem,2.5svh)}
  .hero-bottom { margin-top: min(2rem,2.5vh); margin-top:min(2rem,2.5svh)}
  .hero-meta { margin-top: min(2.2rem,3vh); margin-top:min(2.2rem,3svh); padding-top: min(1rem,1.5vh); padding-top:min(1rem,1.5svh)}}
/* Bildband = eigener zweiter Beat unter dem Fold-Hero (Markup aus dem Hero gezogen);
   Hoehe budgetiert: aspect-ratio bleibt, aber nie hoeher als ~3/4 Screen. */
.hero-band { margin-top: clamp(2rem,4vh,4rem); margin-top:clamp(2rem,4svh,4rem); position:relative; max-width:1620px; margin-inline:auto; padding-inline:clamp(0rem,-1rem + 2vw,1rem)}
.hero-band img { width:100%; aspect-ratio:16/6.2; max-height: min(76vh,44rem); max-height:min(76svh,44rem); object-fit:cover; border-radius:3px; box-shadow: 0 24px 50px -40px rgba(36, 26, 22, 0.55); box-shadow:0 24px 50px -40px oklch(0.23 0.018 45 / 0.55)}
.hero-band::after { content:""; position:absolute; left:clamp(0rem,-1rem + 2vw,1rem); right:clamp(0rem,-1rem + 2vw,1rem); bottom:0; height:45%; background: linear-gradient(transparent, rgba(25, 15, 11, 0.62)); background:linear-gradient(transparent, oklch(0.18 0.02 40 / 0.62)); border-radius:0 0 3px 3px; pointer-events:none}
.hero-band figcaption { position:absolute; left:clamp(1.5rem,3vw,3rem); bottom:clamp(1.2rem,3vw,2.4rem); z-index:2; color: #fefbf7; color:oklch(0.99 0.006 80); font-size:var(--step--1); letter-spacing:0.04em; text-shadow: 0 2px 14px rgba(25, 15, 10, 0.85); text-shadow:0 2px 14px oklch(0.18 0.02 45 / 0.85)}
.hero-band figcaption span { display:block; font-family:var(--d); font-weight:700; font-size:var(--step-1); text-transform:none; letter-spacing:-0.01em}

/* ============ KORRIDOR ============ */
.korridor { background:var(--korridor); color: #f8f5ef; color:oklch(0.97 0.008 80); border-radius:4px}
.korridor .kicker, .korridor .kicker::before { color: #f8f5ef; color:oklch(0.97 0.008 80); background-color: #f8f5ef; background-color:oklch(0.97 0.008 80)}
.korridor .kicker { background:none}
.korridor h2 { color: #fbf8f4; color:oklch(0.98 0.006 80); max-width:22ch}
.korridor .lead { color: #f9ece1; color:oklch(0.95 0.02 60)}
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3.5rem; counter-reset:s}
.step { padding:0 1.6rem; border-left: 1px solid rgba(248, 245, 239, 0.3); border-left:1px solid oklch(0.97 0.008 80 / 0.30); counter-increment:s}
.step:first-child { padding-left:0; border-left:0}
.step .num::before { content:"0" counter(s); font-family:var(--d); font-weight:800; font-size:min(var(--step-4),12vw); line-height:1; opacity:0.96}
.step h3 { color: #fbf8f4; color:oklch(0.98 0.006 80); margin-top:0.7rem; font-size:var(--step-1); font-weight:600}
.step p { color: #f9ece1; color:oklch(0.95 0.02 60); font-size:var(--step-0); margin-top:0.55rem; max-width:26ch}
.faden { height:3px; background: rgba(248, 245, 239, 0.3); background:oklch(0.97 0.008 80 / 0.3); margin-top:3.5rem; position:relative; overflow:hidden}
.faden::after { content:""; position:absolute; inset:0; background: #fbf8f4; background:oklch(0.98 0.006 80); transform:scaleX(0); transform-origin:left}
@supports (animation-timeline: view()) { .faden::after { animation:grow linear both; animation-timeline:view(); animation-range:entry 10% cover 55%}}
@keyframes grow { to { transform:scaleX(1)}}

/* ============ PRODUKTWELTEN ============ */
.welten { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:3.5rem}
.welt { display:flex; flex-direction:column}
.welt-head { aspect-ratio:4/3; border-radius:3px; overflow:hidden; position:relative; display:grid; place-items:end start; padding:1.4rem}
/* Foto fuellt die Kachel; die Farbverlaeufe unten bleiben als Ladeflaeche darunter stehen. */
.welt-head img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Leichter Scrim: nur damit die Fotounterkante nicht hart abreisst. Er traegt
   den Kontrast der Ziffer NICHT -- das tut die Plakette unten. */
.welt-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:45%; background: linear-gradient(transparent, rgba(25, 15, 11, 0.34)); background:linear-gradient(transparent, oklch(0.18 0.02 40 / 0.34)); pointer-events:none}
.welt--a .welt-head { background: linear-gradient(135deg, #f1eae3, #e7dcd2); background:linear-gradient(135deg, oklch(0.94 0.012 70), oklch(0.90 0.018 65))}
.welt--b .welt-head { background: linear-gradient(135deg, rgba(180, 117, 72, 0.2), rgba(184, 94, 49, 0.32)); background:linear-gradient(135deg, oklch(0.62 0.10 55 / 0.20), oklch(0.58 0.13 45 / 0.32))}
.welt--c .welt-head { background: linear-gradient(135deg, rgba(103, 126, 140, 0.22), rgba(96, 116, 137, 0.3)); background:linear-gradient(135deg, oklch(0.58 0.035 235 / 0.22), oklch(0.55 0.04 250 / 0.30))}
/* Ziffer als Plakette auf --paper. Bewusst KEIN Text direkt auf dem Foto und kein
   Schleier-Kontrast: ueber einem Foto haengt der Wert am Motiv, und axe legt so
   einen Fall in "incomplete" statt in "violations" -- gruen ohne Belegwert.
   Hier ist es dasselbe Paar wie Seitengrund/Fliesstext, also messbar und AAA. */
.welt-ix { font-family:var(--d); font-weight:800; font-size:var(--step-3); line-height:1; color:var(--ink); background:var(--paper); padding:0.1em 0.28em 0.16em; border-radius:2px; position:relative; z-index:2}
.welt h3 { margin-top:1.3rem}
.welt p { color:var(--ink-soft); margin-top:0.5rem; font-size:var(--step-0)}

/* ============ NUTZEN ============ */
.nutzen { background:var(--ink); color:var(--paper); border-radius:4px}
.nutzen .kicker, .nutzen .kicker::before { color: #f9b189; color:oklch(0.82 0.10 50); background-color: #f9b189; background-color:oklch(0.82 0.10 50)}
.nutzen .kicker { background:none}
.nutzen h2 { color:var(--paper); max-width:24ch}
.nutzen .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:3rem}
.nutzen .grid3 p { color: #dbd7d0; color:oklch(0.88 0.01 80)}
.nutzen .grid3 b { display:block; font-family:var(--d); font-weight:700; font-size:var(--step-2); color:var(--paper); margin-bottom:0.5rem}

/* ============ MENSCH ============ */
.mensch-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center}
.mensch-img { border-radius:3px; overflow:hidden; box-shadow: 0 18px 40px -28px rgba(36, 26, 22, 0.45); box-shadow:0 18px 40px -28px oklch(0.23 0.018 45 / 0.45)}
.mensch-img img { aspect-ratio:5/4; object-fit:cover; width:100%}
.jahr { font-family:var(--d); font-weight:800; color:var(--rot); font-size:var(--step-2); margin-top:1rem}

/* ============ STIMMEN ============ */
.stimmen .rate { display:flex; align-items:baseline; gap:1rem; margin-top:1rem; flex-wrap:wrap}
.stimmen .rate b { font-family:var(--d); font-weight:800; font-size:var(--step-6); color:var(--rot); line-height:0.92}
.stimmen .sterne { color:var(--rot); font-size:var(--step-2); letter-spacing:0.1em}
.stimmen .rate-n { color:var(--ink-soft)}
.zitate { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:3rem}
.zitat { border-top:2px solid var(--rot-ink); padding-top:1.6rem}
.zitat blockquote { font-family:var(--d); font-weight:300; font-size:var(--step-2); line-height:1.2; letter-spacing:-0.015em; color:var(--ink)}
.zitat cite { display:block; margin-top:1.2rem; font-style:normal; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft)}

/* ============ KONTAKT ============ */
.kontakt .big { font-family:var(--d); font-weight:240; font-size:var(--step-5); line-height:1.0; max-width:16ch; letter-spacing:-0.03em}
.kontakt .big em { font-weight:800}
.kontakt .hero-cta { margin-top:2rem}
.napwrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:3rem; border-top:1px solid var(--linie); padding-top:2rem}
.napwrap > div { min-width:0}
.nap a { text-decoration:none}
.nap .row { display:block; font-size:var(--step-1); margin-bottom:0.6rem; overflow-wrap:anywhere}
.nap a.row:hover { color:var(--rot-ink)}
.nap .lbl { font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-soft); display:block; margin-bottom:0.6rem}

footer { border-top:1px solid var(--linie)}
footer .wrap { display:flex; justify-content:space-between; padding-block:2.4rem; font-size:var(--step--1); color:var(--ink-soft); flex-wrap:wrap; gap:1rem 2rem; align-items:baseline}
footer .foot-links { display:flex; gap:0.4rem 1.4rem; flex-wrap:wrap}
footer a { display:inline-block; padding:0.4rem 0.1rem; text-decoration:underline; text-underline-offset:3px; min-height:24px}
footer a:hover { color:var(--ink)}

/* ============ RECHTS-SEITEN (Impressum/Datenschutz) ============ */
.legal { padding-top:clamp(2.5rem,1.5rem + 3vw,5rem); max-width:760px}
.legal h1 { font-size:var(--step-4); margin-block:1rem 0.4rem}
.legal h2 { font-size:var(--step-2); max-width:none; margin-block:2.2rem 0.6rem}
.legal p, .legal address { font-size:var(--step-0); color:var(--ink-soft); margin-bottom:0.9rem; max-width:64ch; font-style:normal}
.legal p strong { color:var(--ink)}
.legal a { color:var(--rot-ink); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding-block:.32em; margin-block:-.32em}
.legal-kontakt { margin:1.4rem 0 0.9rem}
.legal-kontakt p { margin-bottom:0.6rem}
.legal-kontakt a { display:inline-block; padding:0.35rem 0.1rem}
.legal .zurueck { display:inline-block; margin-top:2.5rem; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft); text-decoration:none; padding:0.3rem 0}
.legal dl { margin:0 0 0.9rem}
.legal dt { font-weight:740; color:var(--ink); font-size:var(--step-0); margin-top:0.8rem}
.legal dd { margin:0; color:var(--ink-soft); font-size:var(--step-0)}

/* ============ 404 ============ */
.nf { min-height:80vh; display:grid; place-items:center; text-align:center}
.nf .kicker { justify-content:center}
.nf h1 { font-size:var(--step-4); margin-block:1rem 0.6rem; max-width:14ch}
.nf p { margin:0 auto 1.6rem; max-width:40ch; color:var(--ink-soft)}
.nf .tel { margin-top:1.6rem; font-size:var(--step--1)}
.nf .tel a { color:var(--rot-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:0.3rem 0.1rem}

/* ============ REVEALS ============ */
/* Bewusst statisch: scroll-getriebene Per-Sektion-Reveals kosteten ~0.9s styleLayout auf
   Mobil (LH-Befund) und drueckten Perf unter 90. Die Signatur-Motion bleibt: Hero-Settle,
   der Korridor-Faden als Scroll-Fortschritt und die Hover-Crafts. */
.reveal { opacity:1}
.hero-claim, .kontakt .big { overflow-wrap:break-word}

/* ============ RESPONSIVE ============ */
@media (max-width:56.25rem) {
  .desk-nav { display:none}
  .hero-bottom { flex-direction:column; align-items:flex-start}
  .steps { grid-template-columns:1fr 1fr; gap:2.4rem 1.4rem}
  .welten, .nutzen .grid3, .mensch-grid, .zitate, .napwrap { grid-template-columns:1fr}
  .hero-band img { aspect-ratio:3/2.4}}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important}}
/*COMPAT-FALLBACK-GENERIERT v1 (REALITAETS-AUDIT K1) - nicht von Hand pflegen*/
@supports not (color: oklch(0% 0 0)) {
  :root { --paper: #f9f7f3; --paper-2: #f0ece5; --ink: #241a16; --ink-soft: #51453e; --rot: #b72121; --rot-ink: #8a0509; --rot-deep: #6a0003; --korridor: #760909; --stuetze: #5e7583; --linie: rgba(36, 26, 22, 0.14); }
  .hero { --hero: min(clamp(2.7rem,1.5rem + 5.4vw,6.4rem), 11vh); }
}

/*SF-MNAV-CSS v1 START - generiert (header-modul.mjs), nicht von Hand pflegen*/
.sf-mnav{display:none;position:relative;z-index:1001}
.sf-mnav summary{position:relative;z-index:1002;list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.55rem;min-height:44px;min-width:44px;padding:0.5rem 0.35rem;font-weight:600;color:var(--sf-mnav-toggle,currentColor)}
.sf-mnav summary::-webkit-details-marker{display:none}
.sf-mnav summary:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.sf-mnav-bars{position:relative;display:block;width:24px;height:2px;background:currentColor;transition:background .25s}
.sf-mnav-bars::before,.sf-mnav-bars::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .3s}
.sf-mnav-bars::before{top:-7px}.sf-mnav-bars::after{top:7px}
.sf-mnav[open] .sf-mnav-bars{background:transparent}
.sf-mnav[open] .sf-mnav-bars::before{transform:translateY(7px) rotate(45deg)}
.sf-mnav[open] .sf-mnav-bars::after{transform:translateY(-7px) rotate(-45deg)}
.sf-mnav:not([open]) .sf-mnav-panel{display:none}
.sf-mnav-panel{position:fixed;inset:0;z-index:1000;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:5.5rem var(--sf-mnav-pad,1.5rem) 2.5rem;background:var(--sf-mnav-bg,#1c1c1c);color:var(--sf-mnav-ink,#fff)}
.sf-mnav-nav{display:flex;flex-direction:column;align-items:stretch;gap:0.2rem}
.sf-mnav-nav a{color:inherit;text-decoration:none;padding:0.55rem 0;min-height:44px;display:inline-flex;align-items:center;font-size:var(--sf-mnav-linksize,1.6rem)}
.sf-mnav-nav a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (max-width:56.25rem){.sf-mnav{display:block}}
@media (prefers-reduced-motion:reduce){.sf-mnav-bars,.sf-mnav-bars::before,.sf-mnav-bars::after{transition:none}}
/*SF-MNAV-CSS v1 END*/






/*USER-SETTINGS-GENERIERT v1 (REALITAETS-AUDIT K2) START - nicht von Hand pflegen*/
:root{color-scheme:only light}
p,li,dd,dt,address,figcaption,blockquote,summary,th,td{overflow-wrap:anywhere}
@media (forced-colors: active){a[class*="btn"],a[class*="cta"],[class*="cta"] a,button,.btn,.hs-btn,.head-cta,.hero__cta,.nav-cta,.m-panel-cta{border:2px solid ButtonText}}
:is(.translated-ltr,.translated-rtl) .site-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:.4rem}
h1,h2,h3{text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.sf-reveal-init .reveal{opacity:0;transform:translateY(1.6rem);transition:opacity .6s ease,transform .6s ease}
.sf-reveal-init .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sf-reveal-init .reveal{opacity:1;transform:none;transition:none}}
@media (max-width: 32.5rem){
.site-head,.head-end,header .wrap,header nav{flex-wrap:wrap;row-gap:.4rem;min-width:0}
.site-head>*,.head-end>*,header .wrap>*{min-width:0}
section>.wrap,main .wrap{min-width:0;max-width:100%}
main :is([class*=wrap],[class*=grid])>*{min-width:0}
:is(.kicker,[class*=kicker],[class*=badge],[class*=stars],[class*=award],[class*=zitat],cite,.ln,[class*=team-copy]){white-space:normal;overflow-wrap:anywhere;flex-wrap:wrap;min-width:0}
h1,h2,h3,summary{overflow-wrap:anywhere}
:is([class*=preis-row],[class*=step],[class*=voice],[class*=stack],[class*=field],[class*=period],.num){min-width:0;max-width:100%;flex-wrap:wrap}
:is([class*=ctas],[class*=cta-row],[class*=actions],[class*=buttons]){flex-wrap:wrap;min-width:0}
a[class*=btn],a[class*=cta],button{white-space:normal;max-width:100%;min-width:0}
img,svg,video{max-width:100%;height:auto}
}
/*USER-SETTINGS-GENERIERT v1 END*/
/*SF-FORM-CSS START (nicht von Hand pflegen)*/
.sf-form{--sf-ink:var(--tinte,var(--ink,#1a1a1a));--sf-line:var(--rose-line,var(--linie,#d9c9d2));--sf-accent:var(--beere-tief,var(--kupfer,var(--accent,#841628)));--sf-bad:#b00020;display:block;max-width:min(44rem,100%)}
.sf-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem}
.sf-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sf-field--voll{grid-column:1/-1}
.sf-field label{font-weight:600;font-size:.95rem;color:var(--sf-ink)}
.sf-opt{font-weight:400;opacity:.6;font-size:.85em}
.sf-field input,.sf-field textarea{font:inherit;color:var(--sf-ink);padding:.7em .85em;border:1.5px solid var(--sf-line);border-radius:.6rem;background:#fff;min-height:44px;transition:border-color .18s ease,box-shadow .18s ease;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.sf-field textarea{resize:vertical;min-height:7rem}
.sf-field input:focus-visible,.sf-field textarea:focus-visible{outline:none;border-color:var(--sf-accent);box-shadow:0 0 0 3px rgba(36,26,22,.16);box-shadow:0 0 0 3px color-mix(in oklab,var(--sf-accent) 22%,transparent)}
.sf-field [aria-invalid=true]{border-color:var(--sf-bad);box-shadow:0 0 0 3px rgba(176,0,32,.16);box-shadow:0 0 0 3px color-mix(in oklab,var(--sf-bad) 18%,transparent)}
.sf-err{color:var(--sf-bad);font-size:.85rem;min-height:1.1em;margin:0}
.sf-err:empty{min-height:0}
.sf-hint{color:var(--sf-ink);opacity:.6;font-size:.82rem;margin:0}
.sf-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.5rem}
.sf-submit{cursor:pointer;font:inherit;font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.7em;border:0;border-radius:100px;background:var(--sf-accent);color:#fff;min-height:48px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;box-shadow:0 6px 20px rgba(36,26,22,.28);box-shadow:0 6px 20px color-mix(in oklab,var(--sf-accent) 32%,transparent)}
.sf-submit:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 26px rgba(36,26,22,.34);box-shadow:0 10px 26px color-mix(in oklab,var(--sf-accent) 38%,transparent)}
.sf-submit:active{transform:translateY(0)}
.sf-submit:focus-visible{outline:3px solid var(--sf-accent);outline:3px solid color-mix(in oklab,var(--sf-accent) 45%,transparent);outline-offset:3px}
.sf-arr{transition:transform .18s ease}
.sf-submit:hover .sf-arr{transform:translateX(3px)}
.sf-submit[aria-busy=true]{opacity:.75;cursor:progress;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.sf-submit,.sf-arr{transition:none}.sf-submit:hover{transform:none}}
.sf-reply{margin:0;font-size:.9rem;opacity:.75;color:var(--sf-ink)}
.sf-privacy{margin:1rem 0 0;font-size:.8rem;opacity:.7;color:var(--sf-ink);max-width:40em}
/* Tap-Ziel >=24px fuer den Datenschutz-Link (aaa-tap-Fund 2026-07-09: 17px hoch).
   inline-block + padding-block hebt die Trefferflaeche ohne sichtbare Layout-Aenderung. */
.sf-privacy a{display:inline-block;padding-block:.35em;margin-block:-.35em;text-underline-offset:2px}
.sf-form__status{margin:0}.sf-form__status:empty{display:none}
.sf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sf-form-lead{margin:1.75rem 0 1rem}
@media (max-width:34rem){.sf-form__grid{grid-template-columns:1fr}}
.sf-form{--sf-accent:#9b141b}
/*SF-FORM-CSS END*/
/*SF-REVIEWS-CSS START (nicht von Hand pflegen)*/
.sf-reviews{--sf-ink:var(--tinte,var(--ink,#1a1a1a));--sf-line:var(--rose-line,var(--linie,#d9d2c9));--sf-accent:var(--beere-tief,var(--kupfer,var(--accent,#841628)));margin:2rem 0;max-width:44rem;color:var(--sf-ink)}
.sf-reviews__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em .6em;margin:0 0 .75rem}
.sf-reviews__wert{font-size:1.35em;font-weight:700;letter-spacing:-.01em}
.sf-reviews__sterne{color:var(--sf-accent);letter-spacing:.08em}
.sf-reviews__n{opacity:.75;font-size:.92em}
.sf-reviews__link{margin-left:auto;font-size:.88em;color:inherit;text-underline-offset:2px;display:inline-block;padding-block:.35em;margin-block:-.35em}
.sf-reviews__liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.sf-reviews__zitat{border-left:2px solid var(--sf-line);padding:.15rem 0 .15rem 1rem}
.sf-reviews__text{margin:0;font-size:.98em;line-height:1.55}
.sf-reviews__meta{margin:.4rem 0 0;font-size:.82em;opacity:.7}
.sf-reviews__meta cite{font-style:normal;font-weight:600}
@media (max-width:34rem){.sf-reviews__link{margin-left:0}}
/*SF-REVIEWS-CSS END*/


/* Konzeptstudie-Flag (Paritaet zur Feder-Demo): Hinweis-Landmark ganz oben.
   Paper auf Ink >= 7:1; Akzent oklch(0.82 0.07 30) auf Ink ~7.8:1. */
.studio-flag{background:var(--ink);color:var(--paper);font-family:var(--b);font-weight:600;font-size:.72rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:.5rem 1rem}
.studio-flag b{color:oklch(0.82 0.07 30);font-weight:700}