/* =========================================================
   IMMO Online Gutachten — Kanzlei-Editorial Relaunch 2026-06-04
   Ink-Navy + Messing. Ein rechnender Picker ist die Heldin.

   Design-Anker:
   - sullivan-cromwell.com (Serif-Display-Befund, Hairline-Editorial) — legal-corporate
   - manual.co (Picker-as-Hero, "Choose what to solve") — _progressive PFLICHT
   - stripe.com (Daten-Disziplin, ruhige Ergebnis-Spalte) — marketing-conversion
   Visuals: /srv/design-corpus/{legal-corporate,_progressive,marketing-conversion}/_visual/

   Refusals (enforced):
   1 kein farbiges <em>-Headline-Wort — Betonung nur Größe/Schnitt/Zeilenbruch
   2 kein SaaS-Blau als Allzweck — Messing ist der einzige warme Akzent
   3 keine Pill-Eyebrow — Hairline-Kicker
   4/5 kein wiederholtes "Eyebrow→Headline→4-Card→blaues Band" — Ledger/Editorial-Mix
   6 keine Stockfotos/Emojis — nur Portrait + ETW + Typo
   7 Struktur ≤8px Radius, keine Schatten-Stapel als Premium-Ersatz; Buttons dürfen Pill sein
   8 Inline-SVG immer mit width/height (globale 16px-Falle)
   ========================================================= */

:root{
  /* — Surfaces — */
  --bg:#ffffff;
  --bg-soft:#f4f2ee;          /* warmes Papier */
  --bg-soft-2:#ece7dd;
  --bg-ink:#0d1b2a;           /* tiefes Ink-Navy */
  --bg-ink-2:#13263b;
  --surface:#ffffff;
  --surface-soft:#faf8f4;

  /* — Ink / Text — */
  --ink:#0d1b2a;
  --ink-2:#1e3147;
  --ink-soft:#445064;
  --muted:#6b7686;
  --on-ink:#eef1f5;
  --on-ink-soft:#9fb0c4;

  /* — Lines — */
  --line:#e4ddd1;
  --line-soft:#efe9df;
  --line-ink:rgba(255,255,255,.14);

  /* — Der eine warme Akzent: IMMO-Orange (Live-Markenfarbe) — */
  --brass:#F38507;
  --brass-deep:#9a5308;        /* Polish: Messing-für-TEXT-auf-Hell — ≥4.5:1 auf Weiß/Creme (war #dc6a08=3.44) */
  --brass-text:#9a5308;        /* expliziter Alias für Messing-Text auf hellem Grund */
  --brass-bright:#ffa12e;
  --brass-tint:#FBE3C4;
  --orange:#F38507;
  --orange-deep:#ea531c;

  /* — Blau NUR strukturell/dezent — */
  --navy-link:#23456e;
  --navy-tint:#eef2f7;

  /* — Status (sparsam) — */
  --success:#2f7a52;
  --success-tint:#e8f1eb;
  --danger:#b4452e;
  --danger-tint:#f7ece8;

  /* — Legacy-Token-Aliasse: bestehende Klassen greifen darauf zu.
       Auf Messing/Ink umgebogen, damit kein Markup bricht. — */
  --brand:#F38507;            /* IMMO-Orange */
  --brand-hover:#dc6a08;
  --brand-2:#F38507;
  --brand-3:#ffa12e;
  --brand-tint:#FBE3C4;
  --accent:#F38507;
  --accent-soft:#FBE3C4;
  --gold:#F38507;

  /* — Type: Spectral (Display) + Hanken (Body) — fix, niemals Fraunces/Playfair/Inter — */
  --font-display:'Spectral',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',-apple-system,Segoe UI,Roboto,sans-serif;
  --fw-display:500;            /* HARTE Regel (Refusal 2): Display bleibt leicht, nie 600/700 */
  --fs-hero:clamp(2.6rem,6.4vw,5.6rem);
  --fs-h2:clamp(1.9rem,3.6vw,3rem);
  --fs-h3:clamp(1.15rem,1.6vw,1.4rem);
  --fs-kicker:.78rem;
  --tnum:"tnum" 1, "lnum" 1;  /* tabellarische Ziffern für Ledger/Preise */

  /* — Space / Radius — */
  --max:1180px;
  --radius:8px;
  --radius-lg:10px;
  --radius-xl:12px;
  --radius-pill:999px;
  --radius-cta:7px;           /* Inhaber: kantiger statt Pille — CTAs ~7px */
  --space-section:clamp(56px,8vw,104px);

  /* — D1: Layout-Container wächst auf großen Viewports (Lese-Spalten bleiben gecappt) — */
  --max-wide:1180px;
  --legal-measure:70ch;

  --shadow-sm:0 1px 2px rgba(13,27,42,.06);
  --shadow-md:0 8px 30px rgba(13,27,42,.08);
  --shadow-lg:0 24px 60px rgba(13,27,42,.12);
  --shadow-xl:0 24px 60px rgba(13,27,42,.12);

  --t:.2s ease;
}

/* Mobile-Kompaktierung: globaler Sektions-Rhythmus enger (Scroll-Länge) */
@media(max-width:680px){
  :root{--space-section:clamp(36px,7vw,52px)}
}
@media(max-width:480px){
  :root{--space-section:clamp(30px,8vw,44px)}
}
/* D1: 1920 nutzen — strukturelle Container verbreitern (ab 1500px), Lesespalten NICHT */
@media(min-width:1500px){
  :root{--max:1280px;--max-wide:1320px}
}
@media(min-width:1840px){
  :root{--max:1340px;--max-wide:1400px}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","calt";
}
img{max-width:100%;display:block;height:auto}
svg{flex-shrink:0}
svg:not([width]):not([height]){width:1em;height:1em}
a{color:var(--navy-link);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--brass-deep)}
/* Global-Fix 1: NIE mitten im Wort trennen — hyphens:manual + balance.
   hyphens:auto verlässt sich auf das (unzuverlässige) Browser-Wörterbuch und brach in den
   Legal-Fließtexten Wörter falsch ("Telekom-munikation", "Ge-setz") → site-weit manual,
   overflow-wrap:break-word nur als Sicherheitsnetz für echte Überlänge. */
h1,h2,h3,h4{font-family:var(--font-body);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0;color:var(--ink);overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
p{margin:0 0 1em;color:var(--ink-soft);hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.prose li,.legal__body li{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
strong{color:var(--ink)}
button{font:inherit}
::selection{background:var(--brass-tint);color:var(--ink)}

.container{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* Skip link */
.skip-link{position:fixed;left:14px;top:14px;background:var(--bg-ink);color:#fff;padding:12px 20px;border-radius:var(--radius);font-weight:600;z-index:200;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip-link:focus,.skip-link:focus-visible{clip:auto;clip-path:none;width:auto;height:auto;overflow:visible;white-space:normal;outline:3px solid var(--brass);outline-offset:2px}

/* =========================================================
   EDITORIAL PRIMITIVES — Kicker / Display / Hairline
   ========================================================= */
/* Hairline-Kicker ersetzt die Pill-Eyebrow überall */
.kicker,.section__eyebrow,.calc-step__kicker,.calc-result__kicker,.preview-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:var(--fs-kicker);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  background:none!important;border:0;padding:0;margin:0 0 18px;border-radius:0;
}
.kicker::before,.section__eyebrow::before,.calc-step__kicker::before,.calc-result__kicker::before{
  content:"";width:26px;height:2px;background:var(--brass);flex:0 0 auto;
}
/* Schritt-Caption ruhig, ohne Strich, ohne mit dem Header-Kicker zu konkurrieren */
.wizard__legend span{
  display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep);
  margin:0 0 2px;background:none;border:0;padding:0;
}
.preview-badge::before{content:"";width:18px;height:2px;background:var(--brass);flex:0 0 auto}
.preview-badge--gold::before{background:var(--brass)}

/* Serif-Display — endlich benutzt */
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.04;color:var(--ink)}

/* =========== MASTHEAD (Header v2 — Ink-Bühne, zweistufig) ===========
   Utility-Micro-Zeile scrollt weg; nur die Haupt-Bar ist sticky (Cassina-Prinzip).
   Architektonische Nav mit Hairline-Trennern. Scroll-Verdichtung. */
.mh{position:relative;z-index:200;background:var(--bg-ink);color:var(--on-ink)}
.mh-util{background:#0a1523;border-bottom:1px solid rgba(255,255,255,.07)}
.mh-util__wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
.mh-util__cert{display:inline-flex;align-items:center;gap:9px;min-width:0}
.mh-util__cert-t{color:var(--on-ink-soft);text-transform:uppercase;letter-spacing:.15em;font-size:.63rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-util__cert svg{color:var(--brass-bright);flex:0 0 auto}
.mh-util__contact{display:inline-flex;align-items:center;gap:12px;color:var(--on-ink-soft);font-size:.78rem;font-weight:500;flex:0 0 auto}
.mh-util__contact a{color:var(--on-ink);font-weight:600}
.mh-util__contact a:hover{color:var(--brass-bright)}
.mh-util__dot{width:3px;height:3px;border-radius:50%;background:var(--brass);display:inline-block}

.mh-bar{position:sticky;top:0;z-index:200;background:var(--bg-ink);transition:box-shadow .3s ease,background .3s ease}
/* Voll-breite Messing-Hairline unter der Bar — architektonisches Detail */
.mh-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(243,133,7,.55) 18%,rgba(243,133,7,.55) 82%,transparent)}
.mh-bar.is-scrolled{background:rgba(10,21,35,.86);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 10px 34px -14px rgba(0,0,0,.55)}
.mh-bar__wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:78px;transition:min-height .3s ease}
.mh-bar.is-scrolled .mh-bar__wrap{min-height:64px}

.mh-logo{display:inline-flex;align-items:center;gap:14px;flex:0 0 auto}
.mh-logo__img{display:block;height:52px;width:auto;transition:height .3s ease}
.mh-bar.is-scrolled .mh-logo__img{height:42px}
.mh-logo__tag{font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-ink-soft);padding-left:14px;border-left:1px solid rgba(255,255,255,.2);line-height:1.15}

.mh-nav{display:flex;align-items:center}
.mh-nav__list{list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0}
.mh-nav__item{display:flex}
.mh-nav__item + .mh-nav__item{border-left:1px solid rgba(255,255,255,.11)}
.mh-nav__link{display:inline-flex;align-items:center;padding:9px clamp(12px,1.1vw,18px);font-size:.9rem;font-weight:500;color:var(--on-ink-soft);position:relative;letter-spacing:.005em;white-space:nowrap}
.mh-nav__link:hover{color:#fff}
.mh-nav__link.is-active{color:#fff}
.mh-nav__link.is-active::after{content:"";position:absolute;left:clamp(12px,1.1vw,18px);right:clamp(12px,1.1vw,18px);bottom:-2px;height:2px;background:var(--brass)}
.mh-nav__cta-li{margin-left:16px}
.mh-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--radius-cta);font-weight:700;font-size:.88rem;color:#fff;background-color:var(--brass);background-image:linear-gradient(var(--brass),var(--brass));forced-color-adjust:none;transition:background-image var(--t),transform var(--t);white-space:nowrap;line-height:1}
.mh-cta svg{transition:transform var(--t)}
.mh-cta:link,.mh-cta:visited{color:#fff}
.mh-cta:hover{background-image:linear-gradient(var(--brass-deep),var(--brass-deep));color:#fff;transform:translateY(-1px)}
.mh-cta:hover svg{transform:translateX(3px)}

.mh-burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;color:#fff;position:relative;z-index:210}
.mh-burger span{display:block;width:24px;height:2px;background:currentColor;transition:transform var(--t),opacity var(--t)}
.mh-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mh-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.mh-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  /* Owner-Wunsch: mobil KEINE einzelne Telefonnummer oben rechts (wirkt verloren).
     Utility-Zeile komplett weg → Header ist eine solide, greifbare Ink-Bar.
     Telefon bleibt erreichbar über die Sticky-CTA unten + /kontakt. */
  .mh-util{display:none}
  .mh-bar{box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
  .mh-bar::after{opacity:1}
}
@media(max-width:1080px){.mh-logo__tag{display:none}}
@media(max-width:980px){
  .mh-burger{display:flex}
  .mh-logo__img{height:44px}
  .mh-bar.is-scrolled .mh-logo__img{height:40px}
  /* Vollflächiges Ink-Overlay-Menü, unabhängig von der Scroll-Position */
  .mh-nav__list{position:fixed;inset:0;z-index:180;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-ink);padding:calc(88px + env(safe-area-inset-top)) clamp(22px,6vw,40px) calc(30px + env(safe-area-inset-bottom));transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .3s ease;overflow-y:auto}
  .mh-nav__list.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .mh-nav__item{width:100%;border-bottom:1px solid rgba(255,255,255,.09)}
  .mh-nav__item + .mh-nav__item{border-left:0}
  .mh-nav__link{display:flex;width:100%;padding:17px 2px;font-size:1.06rem;color:var(--on-ink)}
  .mh-nav__link.is-active{color:var(--brass-bright)}
  .mh-nav__link.is-active::after{display:none}
  .mh-nav__cta-li{margin:18px 0 0;width:100%}
  .mh-cta{width:100%;justify-content:center;padding:16px 20px;font-size:1rem}
}
body.mh-open{overflow:hidden}

/* =========== BUTTONS =========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:var(--radius-cta);font-weight:600;font-size:.96rem;transition:var(--t);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;line-height:1}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn--primary{background:var(--brass);color:#fff}
.btn--primary:hover{background:var(--brass-deep);color:#fff;transform:translateY(-1px)}
.btn--secondary{background:var(--brass-tint);color:var(--brass-deep)}
.btn--secondary:hover{background:var(--bg-soft-2);color:var(--brass-deep)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-soft)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--large{padding:16px 32px;font-size:1.0rem}

/* THEME C: Doppel-CTA-Disziplin (Stripe) — primär gefüllt, sekundär 1px Outline,
   exakt gleiche Höhe, Baselines aligned. Gilt für nebeneinanderstehende CTA-Paare
   (kontakt Hero+Bottom, rechner Hero, CTA-Bänder). Mobile-Stacking bleibt unberührt. */
.hero__ctas,.example__ctas,.calc__intro-cta,.calc-done__ctas,.cta-band__ctas,.expert__ctas{align-items:stretch}
.hero__ctas .btn,.example__ctas .btn,.calc__intro-cta .btn,.calc-done__ctas .btn,.cta-band__ctas .btn,.expert__ctas .btn{min-height:52px}
.example__ctas .btn--outline,.calc__intro-cta .btn--ghost,.cta-band__ctas .btn--ghost,.expert__ctas .btn--outline{border-width:1px}

/* =========== CTA-SYSTEM: gemeinsame Micro-Interaction =========== */
.btn{position:relative;will-change:transform}
.btn svg{transition:transform var(--t)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* Primär: echte Tiefe + Pfeil-Geste */
.btn--primary{box-shadow:0 1px 2px rgba(138,99,34,.18)}
.btn--primary:hover{background:var(--brass-deep);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(138,99,34,.28)}
.btn--primary:active{transform:translateY(0);box-shadow:0 1px 2px rgba(138,99,34,.20)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--outline:hover{transform:translateY(-2px)}
.btn--outline:active,.btn--ghost:active{transform:translateY(0)}
.btn--ghost:hover{transform:translateY(-2px)}
.btn--large svg{width:19px;height:19px}

/* Sekundärer Text-Link mit Messing-Pfeil (entzerrt konkurrierende Pillen) */
.btn-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--ink);letter-spacing:.005em;padding:6px 2px;border:0;background:none;cursor:pointer;transition:color var(--t);white-space:nowrap}
.btn-link::after{content:"";width:18px;height:2px;background:var(--brass);transition:transform var(--t),background var(--t)}
.btn-link:hover{color:var(--brass-deep)}
.btn-link:hover::after{transform:translateX(4px);background:var(--brass-deep)}
.btn-link:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.btn-link--on-ink{color:#fff}
.btn-link--on-ink::after{background:var(--brass-bright)}
.btn-link--on-ink:hover{color:var(--brass-bright)}
.btn-link--on-ink:hover::after{background:var(--brass-bright)}
@media(max-width:560px){.btn-link{font-size:.92rem;min-height:44px}}

/* =========== SECTION =========== */
.section{padding:var(--space-section) 0}
.section--alt{background:var(--bg-soft)}
.section__head{max-width:760px;margin:0 0 clamp(36px,5vw,56px)}
.section__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);margin-bottom:18px;color:var(--ink);line-height:1.06;letter-spacing:-.01em}
.section__title em{color:inherit;font-style:normal}      /* Refusal 1: kein Farbwort */
.section__lead{font-size:clamp(1.02rem,1.2vw,1.15rem);color:var(--ink-soft);line-height:1.65;margin:0;max-width:62ch}

/* Zentrierte Variante nur dort, wo bewusst gewünscht (Thanks/404/Stub) */
.section--center .section__head,.thanks .section__head{text-align:center;margin-left:auto;margin-right:auto}

/* =========================================================
   HERO — Picker-as-Hero (progressive Geste, Manual.co)
   ========================================================= */
.hero{padding:clamp(52px,7.5vw,104px) 0 clamp(44px,6vw,80px);background:var(--bg);position:relative;border-bottom:1px solid var(--line);overflow:hidden}
/* Signature-Tiefe: sehr dezente warme Paper-/Ink-Vignette, kein Gradient-Kitsch */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% -8%, var(--bg-soft) 0%, rgba(244,242,238,0) 46%),
    radial-gradient(80% 70% at -6% 112%, rgba(13,27,42,.035) 0%, rgba(13,27,42,0) 50%)}
.hero__inner{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,40px);position:relative;z-index:1}
.hero__lead{max-width:940px;margin:0 0 clamp(34px,5vw,56px);position:relative}
.hero__kicker{margin-bottom:clamp(20px,2.6vw,30px)}
/* Aktenzeichen-Signatur: feine Messing-Haarlinie + Versal-Marginalie über dem Display */
.hero__kicker::after{content:"Az. RND · DIN EN ISO/IEC 17024";font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.24em;color:var(--muted);margin-left:14px;padding-left:14px;border-left:1px solid var(--line)}
@media(max-width:680px){.hero__kicker::after{display:none}}
.hero__lead .hero__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-hero);line-height:.95;letter-spacing:-.015em;color:var(--ink);margin:0 0 clamp(20px,2.6vw,28px);text-wrap:balance}
.hero__lead .hero__title em{font-style:normal;color:inherit}
/* Zweite Zeile: typografischer Kontrast über Größe, kleiner, ink-soft. Spectral 500, aufrecht, kein Farbwort. */
.hero__title .hero__title-2{display:block;font-style:normal;font-weight:500;font-size:.62em;line-height:1.04;color:var(--ink-soft);letter-spacing:-.01em;margin-top:.2em;text-wrap:balance}
.hero__sub{font-size:clamp(1.06rem,1.4vw,1.24rem);color:var(--ink-soft);max-width:62ch;line-height:1.62;margin:0}
.hero__sub strong{color:var(--ink);font-weight:600}

/* The picker (shared visual language with /rechner) — Held mit Kartenmasse */
.hero__picker{margin-top:clamp(8px,1.4vw,16px)}
.hero__picker-q{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:clamp(16px,2.2vw,24px);padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--line);position:relative}
.hero__picker-q::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--brass)}
.hero__picker-q h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.4rem,2.2vw,1.85rem);color:var(--ink);letter-spacing:-.01em;margin:0;line-height:1.08}
.hero__picker-q span{font-size:.88rem;color:var(--muted);font-weight:500}
.hero__picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,16px)}
.hero-tile{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,2.4vw,30px);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,1.8vw,26px) clamp(18px,1.6vw,22px);min-height:clamp(178px,16vw,210px);cursor:pointer;transition:border-color var(--t),box-shadow var(--t),transform var(--t),background var(--t);font-family:inherit;color:var(--ink);position:relative;overflow:hidden}
.hero-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.25,1)}
.hero-tile:hover{border-color:var(--brass);box-shadow:var(--shadow-md);transform:translateY(-3px);background:var(--surface-soft)}
.hero-tile:hover::before{transform:scaleX(1)}
.hero-tile:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.hero-tile__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hero-tile__ico{width:36px;height:36px;color:var(--ink-2);transition:color var(--t)}
.hero-tile__ico svg{width:36px;height:36px}
.hero-tile:hover .hero-tile__ico{color:var(--brass)}
.hero-tile__idx{font-family:var(--font-display);font-size:1.2rem;color:var(--brass);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.hero-tile strong{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.2;display:block}
.hero-tile small{font-size:.79rem;color:var(--muted);display:block;margin-top:4px;line-height:1.35}
.hero-tile__arrow{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--brass-deep);margin-top:6px;letter-spacing:.01em}
.hero-tile__arrow svg{width:15px;height:15px;transition:transform var(--t)}
.hero-tile:hover .hero-tile__arrow{color:var(--brass)}
.hero-tile:hover .hero-tile__arrow svg{transform:translateX(4px)}
@media(max-width:920px){.hero__picker-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.hero__picker-grid{grid-template-columns:1fr 1fr;gap:10px}}
@media(max-width:600px){
  /* Hero-Headline darf das lange Wort "Restnutzungsdauer." nicht abschneiden */
  .hero__lead .hero__title{font-size:clamp(2rem,8.4vw,2.9rem);line-height:1.0;letter-spacing:-.015em;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
  .hero__title .hero__title-2{font-size:.74em;margin-top:.32em}
  /* einspaltiger Full-Width-Stack, sichtbares Tap-Target + Prüfen-Affordance */
  .hero__picker-grid{grid-template-columns:1fr;gap:10px}
  .hero-tile{min-height:0;flex-direction:row;align-items:center;gap:14px;padding:16px 18px}
  .hero-tile__top{flex-direction:row;align-items:center;gap:12px;justify-content:flex-start;order:0;flex:0 0 auto}
  .hero-tile > span:not(.hero-tile__top):not(.hero-tile__arrow){flex:1 1 auto;min-width:0}
  .hero-tile__arrow{display:inline-flex;margin-top:0;flex:0 0 auto;order:3}
  .hero-tile__idx{font-size:1rem}
  /* Foto-Variante bleibt Foto-Karte (vertikal), NICHT die Zeilen-Variante */
  .hero-tile--photo{flex-direction:column;align-items:stretch;padding:0;gap:0}
  .hero-tile--photo .hero-tile__text{flex:1 1 auto;padding:12px 16px 2px}
  .hero-tile--photo .hero-tile__arrow{padding:0 16px 14px;order:initial}
}

/* =========== HERO-TILE → Foto-Karte (Haustyp-Foto-Gimmick) =========== */
.hero-tile--photo{padding:0;gap:0;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
.hero-tile--photo .hero-tile__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--surface-soft)}
.hero-tile--photo .hero-tile__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.25,1);filter:saturate(.96)}
.hero-tile--photo:hover .hero-tile__media img{transform:scale(1.05)}
.hero-tile--photo .hero-tile__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,0) 38%,rgba(13,27,42,.42) 100%);pointer-events:none}
.hero-tile--photo .hero-tile__badge{position:absolute;left:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:var(--radius);background:rgba(255,255,255,.92);color:var(--brass-deep);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:var(--t)}
.hero-tile--photo .hero-tile__badge svg{width:22px;height:22px}
.hero-tile--photo:hover .hero-tile__badge{background:var(--brass);color:#fff}
.hero-tile--photo .hero-tile__idx{position:absolute;top:10px;right:14px;z-index:2;color:#fff;text-shadow:0 1px 6px rgba(13,27,42,.5);font-size:1.15rem}
.hero-tile--photo .hero-tile__text{display:block;padding:14px 18px 4px}
.hero-tile--photo .hero-tile__arrow{margin:0;padding:0 18px 16px}
@media(max-width:520px){
  .hero-tile--photo{flex-direction:column;align-items:stretch}
  .hero-tile--photo .hero-tile__media{aspect-ratio:21/9}
  .hero-tile--photo .hero-tile__text{flex:none;padding:12px 16px 2px}
  .hero-tile--photo .hero-tile__arrow{display:inline-flex;padding:0 16px 14px;order:initial}
}

/* Hero example ledger — Editorial-Gegengewicht, bewusster Schluss des Heros */
.hero__ledger{margin-top:clamp(32px,4.4vw,52px);display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,68px);align-items:end;padding-top:clamp(30px,4vw,46px);border-top:1px solid var(--ink);position:relative}
.hero__ledger::before{content:"Befund · Beispiel";position:absolute;top:-1px;left:0;transform:translateY(-100%);padding:0 0 12px;font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center}
.hero__ledger-figure{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(3.4rem,9vw,6.2rem);line-height:.86;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.hero__ledger-figure span{white-space:normal}
.hero__ledger-figure span{display:block;font-family:var(--font-body);font-size:.84rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-deep);margin-top:14px}
.hero__ledger-rows{display:grid;gap:0;align-self:stretch}
.hero__ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.hero__ledger-row:last-child{border-bottom:0}
.hero__ledger-row span{color:var(--ink-soft)}
.hero__ledger-row strong{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.hero__ledger-row--accent strong{color:var(--brass-deep)}
.hero__ledger-note{grid-column:1/-1;font-size:.78rem;color:var(--muted);margin:6px 0 0}
@media(max-width:680px){.hero__ledger{grid-template-columns:1fr;gap:18px;align-items:stretch}}

/* Star rating row — Messing-Sterne statt bunter Pill */
.rating{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,4vw,40px);padding-top:24px;border-top:1px solid var(--line)}
.rating__stars{color:var(--brass);font-size:1.05rem;letter-spacing:3px;line-height:1}
.rating__text{font-size:.9rem;color:var(--ink-soft)}
.rating__text strong{color:var(--ink);font-weight:700}

/* =========================================================
   HOME HERO — fotografischer Split (Text links · Foto rechts)
   ========================================================= */
/* Showpiece-Hero: füllt die breite Leinwand (1920 kein 1180-Streifen), Headline dominiert */
.hero__split{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4.5vw,64px);display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(40px,4vw,64px);align-items:center;position:relative;z-index:1}
.hero__split .hero__content{min-width:0;max-width:760px}
.hero__split .hero__kicker{margin-bottom:clamp(18px,2.2vw,26px)}
/* Spectral voll ausgespielt: große, ruhige Display-Heldin in 500 — Squint-Test gewinnt eindeutig */
.hero__split .hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.9rem,4.5vw,4.7rem);line-height:.97;letter-spacing:-.015em;color:var(--ink);margin:0 0 clamp(20px,2.6vw,30px);hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}
.hero__split .hero__title-2{display:block;font-family:var(--font-display);font-style:normal;font-weight:500;font-size:.46em;line-height:1.1;color:var(--ink-2);letter-spacing:-.005em;margin-top:.34em;text-wrap:balance}
.hero__split .hero__sub{font-size:clamp(1.04rem,1.2vw,1.18rem);color:var(--ink-soft);max-width:52ch;line-height:1.62;margin:0}
.hero__split .hero__sub strong{color:var(--ink);font-weight:600}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(28px,3.2vw,38px)}
/* Stripe-Doppel-CTA: gefüllt + outline, gleiche Höhe, kantig (Inhaber-Direktive Hero) */
.hero__ctas .btn--primary{min-height:56px;border-radius:var(--radius);padding:0 30px}
.hero__ctas .btn-link{min-height:56px;display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--radius);padding:0 26px;color:var(--ink);font-weight:600;font-size:.96rem}
.hero__ctas .btn-link::after{display:none}
.hero__ctas .btn-link:hover{border-color:var(--brass);color:var(--brass-deep);background:var(--surface-soft)}
.hero__assurances{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(26px,3vw,34px);padding-top:clamp(22px,2.6vw,28px);border-top:1px solid var(--line)}
.hero__assurances span{display:inline-flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;color:var(--ink-soft);letter-spacing:.005em}
.hero__assurances svg{width:18px;height:18px;color:var(--brass);flex:0 0 auto}
.hero__credline{font-size:.82rem;color:var(--muted);line-height:1.55;margin:clamp(16px,1.8vw,20px) 0 0;max-width:56ch}
.hero__figure{position:relative;margin:0}
.hero__figure img{width:100%;height:clamp(360px,34vw,500px);object-fit:cover;object-position:50% 28%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);filter:saturate(.88) contrast(1.01)}
/* Befund-Karte entschieden über die Fotokante: weit überlappend, brass-Hairline, dominante weiße Ziffer */
.hero__figcard{position:absolute;left:clamp(-16px,-3vw,-56px);bottom:clamp(34px,5vw,64px);background:var(--bg-ink);color:#fff;padding:clamp(24px,2.2vw,32px) clamp(28px,2.6vw,40px);border-radius:var(--radius-lg);box-shadow:0 30px 60px -28px rgba(13,27,42,.62);max-width:min(78%,400px);overflow:hidden}
.hero__figcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--brass)}
.hero__figcard-tag{display:block;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:12px}
.hero__figcard strong{display:block;font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(3rem,4.6vw,4.2rem);line-height:.84;letter-spacing:-.015em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero__figcard-sub{display:block;font-size:.84rem;color:rgba(255,255,255,.76);margin-top:11px;line-height:1.4}
@media(max-width:980px){
  .hero__split{grid-template-columns:1fr;gap:clamp(32px,6vw,44px)}
  .hero__split .hero__content{max-width:none}
  .hero__split .hero__title{font-size:clamp(2.8rem,8vw,4.4rem)}
  .hero__figure img{height:clamp(340px,58vw,460px)}
}
@media(max-width:680px){
  .hero__split{padding:0 clamp(18px,5vw,28px)}
  .hero__split .hero__title{font-size:clamp(2.3rem,9.4vw,3.2rem);hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
  .hero__split .hero__title-2{font-size:.5em}
  .hero__ctas{gap:12px}
  .hero__ctas .btn,.hero__ctas .btn-link{flex:1 1 100%;justify-content:center}
  /* Kill-List home M8: Befund-Karte aus dem Foto lösen → eigener Block mit Abstand, Zahl dominant */
  .hero__figure{display:flex;flex-direction:column;gap:16px}
  .hero__figcard{position:static;left:auto;right:auto;bottom:auto;max-width:none;box-shadow:var(--shadow-md)}
  .hero__figcard strong{font-size:clamp(2.8rem,12vw,3.6rem)}
}

/* Picker-Sektion (progressive Geste) — eigener Block unter dem Foto-Hero, an die breite Hero-Leinwand angeglichen */
.picker-section .container{max-width:1200px;padding:0 clamp(18px,4.5vw,64px)}
.picker-section .hero__picker-grid{gap:clamp(14px,1.4vw,22px)}
.picker-section .hero-tile--photo .hero-tile__media{aspect-ratio:5/4}
.picker-section .hero-tile strong{font-size:1.12rem}
.picker-section .hero-tile small{font-size:.82rem}
.picker-section__note{max-width:1380px;margin:clamp(20px,2.4vw,28px) auto 0;font-size:.78rem;color:var(--muted);line-height:1.5}
@media(max-width:1080px){.picker-section .hero__picker-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.picker-section .hero__picker-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.picker-section .hero__picker-grid{grid-template-columns:1fr}}

/* =========================================================
   LEGACY HERO (pages.json: so-funktionierts/faq/portfolio/steuerberater)
   In das neue Kanzlei-Editorial überführt, Zahlen 1:1.
   ========================================================= */
/* Squint-Test (Kill-List Querschnitt 7): Headline dominiert, Befund-Karte schmaler, Gutter weiter */
.hero__grid{display:grid;grid-template-columns:1.42fr .78fr;gap:clamp(44px,6vw,84px);align-items:center;max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.hero .container.hero__grid{padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px)}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr;gap:36px}
  /* Gestapelte Befund-/Kontakt-Karte nicht über volle Breite blähen (Kill-List faq 7) */
  .hero__calc{max-width:520px}
}
.hero__content{min-width:0}
/* Eyebrow → Hairline-Kicker (Pille raus, Refusal 3) */
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 22px;font-size:var(--fs-kicker);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.hero__eyebrow::before{content:"";width:26px;height:2px;background:var(--brass);flex:0 0 auto}
.hero__eyebrow-dot{display:none}
.hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.7rem,6vw,4.9rem);line-height:.98;letter-spacing:-.015em;color:var(--ink);margin:0 0 22px;text-wrap:balance}
.hero__title em{color:inherit;font-style:normal}     /* Refusal 1 */
.hero__sub{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-soft);max-width:60ch;line-height:1.6;margin:0 0 32px}
.hero__sub strong{color:var(--ink);font-weight:600}
.hero__ctas{display:flex;gap:clamp(16px,2vw,26px);flex-wrap:wrap;align-items:center;margin-bottom:32px}
.hero__trust{display:flex;align-items:center;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.hero__trust-mark{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);color:var(--brass-deep);background:var(--surface)}
.hero__trust-text strong{display:block;color:var(--ink);font-size:.92rem;font-weight:700;line-height:1.3}
.hero__trust-text span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.4}
/* Calc card → Ink-Navy Ledger-Befund (kein blaues Bonbon) */
.hero__calc{background:var(--bg-ink);border:0;border-radius:var(--radius);padding:26px 26px 0;position:relative;overflow:hidden}
.hero__calc::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--brass)}
.hero__calc-badge{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-kicker);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-soft);background:none;border:0;padding:0;margin-bottom:18px}
.hero__calc-badge::before{content:"";width:18px;height:2px;background:var(--brass-bright)}
.hero__calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-ink);gap:12px}
.hero__calc-row:last-of-type{border-bottom:0}
.hero__calc-row span{font-size:.88rem;color:var(--on-ink-soft)}
.hero__calc-row strong{font-size:1rem;color:#fff;font-variant-numeric:tabular-nums;font-weight:700}
.hero__calc-row--muted span{color:var(--on-ink-soft);opacity:.85}
.hero__calc-row--muted strong{color:var(--on-ink);font-weight:600}
.hero__calc-row--diff strong{color:var(--brass-bright);font-size:1.08rem}
.hero__calc-total{margin:18px -26px 0;padding:24px 26px;background:rgba(255,255,255,.04);border-top:1px solid var(--line-ink);display:flex;flex-direction:column;gap:2px}
.hero__calc-total-label{font-size:.82rem;color:var(--on-ink-soft);font-weight:500}
.hero__calc-total-value{font-family:var(--font-display);font-size:2.1rem;font-weight:var(--fw-display);color:var(--brass-bright);font-variant-numeric:tabular-nums;line-height:1.05}
.hero__calc-total-note{font-size:.74rem;color:var(--on-ink-soft);opacity:.8;margin-top:4px}
.hero__calc-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px -26px 0;padding:15px;background:var(--brass);color:#fff;font-weight:700;font-size:.92rem;transition:var(--t)}
.hero__calc-cta svg{width:17px;height:17px;transition:transform var(--t)}
.hero__calc-cta:hover{background:var(--brass-bright);color:var(--ink)}
.hero__calc-cta:hover svg{transform:translateX(4px)}
@media(max-width:560px){.hero__calc{padding:20px 20px 0}.hero__calc-total{margin:14px -20px 0;padding:20px}.hero__calc-cta{margin:14px -20px 0}.hero__ctas .btn{flex:1 1 100%}}
/* Flat-Variante: Messing-Top-Bar weg, Hairline + Tabular tragen den Befund (Kill-List portfolio 1) */
.hero__calc--flat::before{display:none}
.hero__calc--flat{border:1px solid var(--line-ink);padding-top:24px}
/* Kontakt-Karte (faq): Schlüsselzahl ist KEINE Ersparnis → weiß, Brass bleibt CTA-reserviert (Kill-List faq 3) */
.hero__calc--contact .hero__calc-total-value{color:#fff;font-size:1.5rem}
.hero__calc--contact .hero__calc-row strong a{color:#fff}
.hero__calc--contact .hero__calc-row strong a:hover{color:var(--brass-bright)}

/* =========== TRUST BAR (Hairline-Logo-Leiste-Ersatz) =========== */
/* Hairline-Meta-Zeile statt 4 Icon-Zellen (Kill-List B/E · ein Bullet-System sitewide) */
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:16px 0}
.trustbar__wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(20px,3vw,34px)}
.trustbar__item{display:inline-flex;align-items:baseline;gap:0;color:var(--ink-soft);font-size:.8rem;font-weight:600;letter-spacing:.01em}
.trustbar__item svg{display:none}
.trustbar__item:not(:first-child)::before{content:"";display:inline-block;width:4px;height:4px;background:var(--ink-soft);opacity:.5;transform:rotate(45deg);margin-right:clamp(20px,3vw,34px);flex:0 0 auto}
@media(max-width:560px){.trustbar__item{font-size:.76rem}.trustbar__item:not(:first-child)::before{margin-right:20px}}

/* =========== EDITORIAL STATEMENT (Hassan) =========== */
.statement{background:var(--bg-soft)}
.statement__grid{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.statement__body .section__title{font-size:clamp(1.7rem,3vw,2.5rem)}
.statement__quote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.32;color:var(--ink);margin:0 0 24px;letter-spacing:-.005em}
.statement__quote em{font-style:normal;color:inherit}      /* Refusal 3: Messing nur für CTA + Schlüsselzahl */
.statement__meta{display:flex;flex-direction:column;gap:2px;font-size:.92rem;color:var(--ink-soft);border-left:2px solid var(--brass);padding-left:16px;margin-bottom:26px}
.statement__meta strong{color:var(--ink);font-weight:700;font-size:1rem}
.statement__points{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:11px}
.statement__points li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:.96rem;line-height:1.45}
/* Listen-Marker = Ink-Hairline-Strich (Refusal 3: Brass nicht als Bullet) */
.statement__points li::before{content:"";flex:0 0 auto;width:14px;height:1.5px;margin-top:.72em;background:var(--ink-soft)}
.statement__media{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;background:none;border:0;border-radius:0;padding:0}
.statement__media img{width:100%;max-width:none;height:clamp(380px,42vw,520px);aspect-ratio:auto;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);filter:none}
.statement__seal{position:static;width:100%;background:var(--bg-ink);color:var(--on-ink);padding:14px 18px;display:flex;align-items:center;gap:12px;max-width:none;border-radius:var(--radius)}
.statement__seal svg{width:30px;height:30px;color:var(--brass-bright);flex-shrink:0}
.statement__seal strong{display:block;font-size:.82rem;color:#fff;font-weight:700;line-height:1.2}
.statement__seal span{display:block;font-size:.72rem;color:var(--on-ink-soft);margin-top:2px}
@media(max-width:860px){.statement__grid{grid-template-columns:1fr;gap:36px}.statement__media{align-self:stretch}.statement__media img{max-width:none;height:clamp(280px,62vw,380px);margin:0}.statement__seal{max-width:none;width:100%}}

/* Tonwechsel: das Sachverständigen-Statement ist der eine dunkle Editorial-Beat im vertikalen Rhythmus */
.statement--ink{background:var(--bg-ink);position:relative;overflow:hidden}
.statement--ink::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 92% -10%,rgba(243,133,7,.08) 0%,rgba(243,133,7,0) 50%)}
.statement--ink .kicker{color:var(--on-ink-soft)}
.statement--ink .kicker::before{background:var(--brass-bright)}
.statement--ink .statement__quote{color:#fff}
.statement--ink .statement__quote em{color:#fff}
.statement--ink .statement__meta{color:var(--on-ink-soft);border-left-color:var(--brass-bright)}
.statement--ink .statement__meta strong{color:#fff}
.statement--ink .statement__points li{color:var(--on-ink)}
.statement--ink .statement__points li::before{background:var(--on-ink-soft)}
.statement--ink .btn-link{color:var(--on-ink)}
.statement--ink .btn-link::after{background:var(--brass-bright)}
.statement--ink .btn-link:hover{color:var(--brass-bright)}
.statement--ink .btn-link:hover::after{background:var(--brass-bright)}
/* DIA-Siegel auf Ink: heller, gerahmter Credential-Block (kein zweites Ink-im-Ink) */
.statement--ink .statement__seal{background:rgba(255,255,255,.06);border:1px solid var(--line-ink)}
.statement--ink .statement__media img{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* =========== LEDGER (Zahlen-Treatment: 1 Hero-Zahl + 3 Support, eine Baseline-Hairline) =========== */
.ledger{background:var(--surface)}
.ledger__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:0;border-top:1px solid var(--line);align-items:start}
.ledger__item{padding:clamp(26px,3vw,40px) clamp(20px,2vw,32px) 0;position:relative}
.ledger__item:not(:first-child)::before{content:"";position:absolute;left:0;top:clamp(30px,3.4vw,46px);bottom:0;width:1px;background:var(--line-soft)}
.ledger__figure{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.2rem,4vw,3rem);line-height:.92;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.ledger__item:first-child .ledger__figure{font-size:clamp(3rem,6vw,4.6rem);color:var(--brass-deep)}
.ledger__label{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:14px;line-height:1.4}
.ledger__src{display:block;font-size:.74rem;color:var(--muted);margin-top:6px;letter-spacing:.02em}
@media(max-width:760px){
  .ledger__grid{grid-template-columns:1fr 1fr;column-gap:clamp(16px,4vw,24px);row-gap:0}
  .ledger__item{padding:16px 0;border-bottom:1px solid var(--line-soft)}
  .ledger__item:first-child{grid-column:1/-1}
  .ledger__item:nth-last-child(-n+2):not(:first-child){border-bottom:0}
  .ledger__item::before{display:none!important}
  .ledger__item:first-child .ledger__figure{font-size:clamp(2.6rem,12vw,3.4rem)}
  .ledger__figure{font-size:clamp(1.7rem,7vw,2.2rem)}
  .ledger__label{margin-top:8px;font-size:.84rem}
}

/* =========== AfA-RECHENWEG-LEDGER (durchgerechnetes Befund-Beispiel, Refusal 6) =========== */
/* weiß zwischen den beigen Video-/Prozess-Beats → bricht die Beige-Monotonie (Tonwechsel-Rhythmus) */
.afa{background:var(--bg)}
.afa__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.afa__intro .section__title{font-size:clamp(1.7rem,3vw,2.5rem)}
.afa__intro p{max-width:46ch}
.afa__intro .btn{margin-top:6px}
.afa-ledger{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.afa-ledger__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:16px clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line);background:var(--surface-soft)}
.afa-ledger__head .kicker{margin:0;flex:0 0 auto}
.afa-ledger__case{font-size:.74rem;color:var(--muted);letter-spacing:.02em;flex:0 1 auto;white-space:nowrap}
/* In schmaler Spalte (rnd-hero): Header-Zeile darf die Meta unter den Kicker umbrechen lassen */
.rnd-hero__ledger .afa-ledger__head{justify-content:flex-start;column-gap:14px}
.afa-ledger__rows{padding:6px clamp(20px,2.6vw,30px) clamp(18px,2vw,24px)}
.afa-ledger__row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.afa-ledger__row:last-child{border-bottom:0}
.afa-ledger__row dt{color:var(--ink-soft);font-size:.92rem;line-height:1.4;margin:0}
.afa-ledger__row dd{margin:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:var(--tnum);white-space:nowrap}
.afa-ledger__row--op dt{color:var(--muted)}
.afa-ledger__row--result{margin-top:6px;padding:18px clamp(20px,2.6vw,30px);background:var(--bg-ink);border-bottom:0;align-items:center}
.afa-ledger__row--result dt{color:var(--on-ink-soft);font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
.afa-ledger__row--result dd{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;line-height:1;white-space:nowrap}
.afa-ledger__row--result dd em{font-style:normal;color:var(--brass-bright)}
.afa-ledger__note{margin:14px 0 0;font-size:.76rem;color:var(--muted);line-height:1.5}
@media(max-width:860px){.afa__grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:480px){.afa-ledger__row{flex-wrap:wrap;gap:2px}.afa-ledger__row dd{white-space:normal}}

/* =========== STATS → ECHTES vertikales Hairline-LEDGER (Kill-List rnd 1 / sofunktioniert 1) ===========
   Refusal 5 endgültig: KEINE 4-Spalten-Stat-Bar, KEINE Deko-Linien-Icons.
   Pro Zeile: große tnum-Display-Zahl LINKS, Label (+Quelle) RECHTS, Hairline zwischen den Zeilen,
   einspaltig untereinander gestapelt — wie ein Befund-Ledger. */
.stats{padding:var(--space-section) 0;background:var(--bg-soft)}
.stats__grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink);border-bottom:0}
.stat{display:grid;grid-template-columns:minmax(150px,220px) 1fr;align-items:baseline;column-gap:clamp(28px,5vw,72px);padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);position:static}
.stat:last-child{border-bottom:1px solid var(--ink)}
.stat::before{display:none}
.stat strong{display:block;font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--ink);line-height:.95;margin:0;font-variant-numeric:tabular-nums;font-feature-settings:var(--tnum);letter-spacing:-.015em}
.stat:first-child strong{color:var(--brass-deep)}
.stat span{font-size:.96rem;color:var(--ink-soft);font-weight:500;line-height:1.55;display:block;max-width:46ch;align-self:center}
@media(max-width:560px){
  .stat{grid-template-columns:1fr;row-gap:6px;padding:18px 0}
  .stat strong{font-size:clamp(2rem,9vw,2.6rem)}
  .stat span{font-size:.9rem;max-width:none}
}

/* =========== VIDEO =========== */
.video-section{padding:var(--space-section) 0;background:var(--bg-soft)}
.video-frame{max-width:960px;margin:0 auto;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-ink);box-shadow:none;aspect-ratio:16/9;border:1px solid var(--line)}
/* Ink-Sockel: oranges Illustrations-Thumbnail entsättigen/in Ink-Ton ziehen (off-brand 6. Farbe) */
.video-frame::after{content:"";position:absolute;inset:0;background:var(--bg-ink);mix-blend-mode:color;opacity:.42;pointer-events:none;z-index:1}
.video-frame.is-playing::after{display:none}
.video-player{width:100%;height:100%;display:block;object-fit:cover;background:var(--bg-ink);filter:saturate(.62) contrast(1.02);cursor:pointer}
.video-frame.is-playing .video-player{filter:none}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:var(--brass);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:var(--t);z-index:2}
.video-play svg{width:32px;height:32px;margin-left:5px}
.video-play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--brass-deep)}
.video-play[hidden]{display:none}
.video-captions{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:960px;margin:28px auto 0;border-top:1px solid var(--line)}
.video-caption{padding:18px 22px;border-right:1px solid var(--line)}
.video-caption:last-child{border-right:0}
.video-caption strong{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px;font-weight:700}
.video-caption span{font-size:.82rem;color:var(--ink-soft)}
@media(max-width:680px){.video-captions{grid-template-columns:1fr}.video-caption{border-right:0;border-bottom:1px solid var(--line)}.video-caption:last-child{border-bottom:0}.video-play{width:64px;height:64px}.video-play svg{width:26px;height:26px}}

/* =========== RND-HERO (S&C-Asymmetrie: Text links, Befund-Ledger rechts · Kill-List rnd 1) =========== */
.rnd-hero{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px);background:var(--bg)}
.rnd-hero__grid{display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(40px,5.5vw,80px);align-items:center}
.rnd-hero__intro{min-width:0;max-width:600px}
.rnd-hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,4.4vw,4rem);line-height:.98;letter-spacing:-.015em;color:var(--ink);margin:0 0 clamp(18px,2.4vw,26px);text-wrap:balance}
.rnd-hero__title-2{display:block;font-style:normal;font-weight:500;font-size:.58em;line-height:1.06;color:var(--ink-soft);margin-top:.22em}
.rnd-hero__intro .section__lead{margin-bottom:clamp(24px,3vw,30px)}
.rnd-hero__ledger{margin:0}
/* Kill-List rnd 3: Befund-Karten-Ergebnis (≈ 2.520 €) ~1.3× skalieren, Body-Copy etwas kleiner (Typ-Ratio) */
.rnd-hero__ledger .afa-ledger__row--result dd{font-size:clamp(2.4rem,4.6vw,3.4rem)}
.rnd-hero__ledger .afa-ledger__row dt{font-size:.86rem}
.rnd-hero__ledger .afa-ledger__row dd{font-size:.94rem}
@media(max-width:880px){.rnd-hero__grid{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}.rnd-hero__intro{max-width:none}}

/* =========== BENEFITS (Icon-Cards → text-led Hairline-Zweispalter mit Messing-Index) =========== */
.benefits{background:var(--surface)}
/* It-3: 2×2-Quadrant → asymmetrische Hairline-Editorial-Reihen (Kill-List rnd 2 / B).
   Eine Spalte, großer Messing-Index links als echte Spalte, Heading + Prosa rechts,
   Hairline-getrennt. Ungleiche Spaltenbreiten (Index/Text) brechen die Symmetrie. */
.benefits__grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--ink);counter-reset:benefit;max-width:920px}
.benefit-card{background:none;border-bottom:1px solid var(--line);padding:clamp(24px,2.8vw,34px) 0;transition:none;position:relative;counter-increment:benefit;display:grid;grid-template-columns:clamp(48px,6vw,76px) 1fr;column-gap:clamp(20px,3vw,40px);align-items:baseline}
.benefit-card:nth-child(odd){border-right:0}
.benefits__grid--alt{grid-template-columns:1fr}
.benefit-card:hover{background:none}
.benefit-card::before{content:counter(benefit,decimal-leading-zero);position:static;grid-row:1/3;font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--brass);font-variant-numeric:tabular-nums;line-height:.9;align-self:baseline}
/* Dekorative Line-Icons raus (Refusal: keine Icons in Card-Grids) */
.benefit-card__icon{display:none}
.benefit-card h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.28rem;margin-bottom:8px;color:var(--ink);line-height:1.2;grid-column:2}
.benefit-card p{color:var(--ink-soft);font-size:.96rem;line-height:1.6;margin:0;max-width:62ch;grid-column:2}
.benefit-card a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px}
.benefit-card a:hover{color:var(--brass-deep)}
@media(max-width:560px){.benefit-card{column-gap:16px}.benefit-card::before{font-size:1.7rem}}

/* =========== CONTACT HERO — 2-spaltig (Intro links, Ledger rechts · Kill-List C) =========== */
/* It-3 kontakt: Top-Padding der Hero-Section straffen, Headline dominant. */
.contact-hero{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(44px,6vw,84px);align-items:start}
section.section:has(> .container > .contact-hero){padding-top:clamp(28px,4vw,52px)}
/* It-3 kontakt: Headline ~1.4× größer, eigene linke Spalte, kein Mitten-im-Wort-Trenner */
/* Kill-List kontakt 1: H1 dominanter (seitengeskopt contact-hero) */
/* B1: „Sachverständigen" darf NIE mitten im Wort brechen — hyphens:none + saubere Wort-Umbrüche.
   max-inline-size weit genug für das längste Wort, balance bricht zwischen Wörtern. */
.contact-hero__intro .section__title{font-size:clamp(2.4rem,5.4vw,5.2rem);line-height:.98;letter-spacing:-.025em;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:keep-all;text-wrap:balance;max-inline-size:17ch;margin-bottom:0}
.contact-hero__intro .section__title em{font-style:normal;color:inherit}
.contact-hero__intro .section__lead{margin-top:clamp(18px,2.5vw,26px);max-width:50ch}
/* Kill-List kontakt D7: GEBOXTES Panel raus → volle Hairline-Reihen am Baseline-Grid.
   Schwere Ink-Top-Rule signalisiert „Ledger", Reihen flush ohne Fill/Border-Box. */
.contact-hero .contact-ledger{margin-top:.1em;background:none;border:0;border-top:2px solid var(--ink);padding:clamp(14px,2vw,20px) 0 0}
.contact-hero .contact-row{padding:clamp(18px,2.4vw,24px) clamp(0px,1.6vw,24px) clamp(18px,2.4vw,24px) 0}
/* Detailtext EINE Zeile, 14px (war 4-Zeilen-Wrap @11px) */
.contact-hero .contact-row__value span{font-size:.875rem;margin-top:5px;line-height:1.5;color:var(--ink-soft)}
/* Aktenzeichen-Signatur füllt den Leerraum unter dem Intro (Kill-List kontakt 1) */
.contact-sig{margin-top:clamp(28px,4vw,42px);padding-top:22px;border-top:1px solid var(--line)}
.contact-sig__kicker{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.contact-sig__kicker::before{content:"";width:22px;height:2px;background:var(--brass)}
.contact-sig dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 22px}
.contact-sig dt{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.contact-sig dd{margin:0;font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.6}
.contact-sig dd strong{color:var(--ink);font-weight:700}
@media(max-width:880px){.contact-hero{grid-template-columns:1fr;gap:32px}.contact-hero .contact-ledger{margin-top:0}}
/* Kill-List kontakt 3: „Lieber gleich loslegen"-Mini-Ledger — Werte bolden, Hairlines auf --line abdunkeln */
.contact-funnels .example__list li{border-bottom-color:var(--line)}
.contact-funnels .example__list strong{font-weight:700;color:var(--ink)}
/* Nacht-Iter: EINE entscheidende Zahl in Messing (Identitäts-Versprechen) — die erste Kennzahl */
.contact-funnels .example__list li:first-child strong{color:var(--brass-text);font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.15rem}

/* =========== CONTACT LEDGER (Hairline-Ledger statt 4 Icon-Cards) =========== */
.contact-ledger{display:grid;grid-template-columns:1fr;gap:0;counter-reset:cl}
.contact-row{display:grid;grid-template-columns:auto minmax(110px,150px) 1fr;align-items:baseline;gap:clamp(12px,1.6vw,22px);padding:clamp(20px,2.6vw,26px) 0;border-bottom:1px solid var(--line);counter-increment:cl;line-height:1.5}
.contact-row:first-child{padding-top:0}
.contact-row:last-child{border-bottom:0;padding-bottom:0}
/* It-4 kontakt: Indizes als echte Ledger-Spalte, deutlich größer als die Wert-Spalte (Kill-List kontakt 2) */
.contact-row__idx{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.6rem,3.6vw,3.4rem);color:var(--brass);font-variant-numeric:tabular-nums;line-height:.82;align-self:baseline;min-width:1.8ch}
/* Numeral comes from the literal 01-04 in markup; counter ::before removed to avoid doubling (critic iter-01). */
.contact-row__label{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.contact-row__value{color:var(--ink);font-size:1.02rem;line-height:1.5}
.contact-row__value a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:var(--t)}
.contact-row__value a:hover{color:var(--brass-deep);text-decoration-color:var(--brass)} /* Nacht-Fix: Messing-Underline nur auf Hover (Akzent-Sparsamkeit) */
.contact-row__value strong{color:var(--ink);font-weight:700}
.contact-row__value span{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:3px}
/* In der schmalen Ledger-Spalte: Label über Wert stapeln */
@media(max-width:1024px){
  .contact-row{grid-template-columns:auto 1fr;gap:4px 16px}
  .contact-row__value{grid-column:2/3}
}
@media(max-width:640px){
  .contact-row{grid-template-columns:auto 1fr;gap:6px 14px;padding:20px 0}
  .contact-row__idx{font-size:1.3rem}
  .contact-row__value{grid-column:2/3}
}

/* =========== EXAMPLE (zweispaltiges Editorial) =========== */
.example{background:var(--bg-soft)}
.example__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,64px);align-items:start}
.example__media{border-radius:var(--radius);overflow:hidden;position:relative;background:var(--surface);border:1px solid var(--line)}
.example__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.08)}
.example__badge{position:absolute;top:0;left:0;background:var(--bg-ink);color:#fff;font-weight:600;padding:8px 14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-radius:0 0 var(--radius) 0}
.example__list{list-style:none;padding:0;margin:24px 0 28px;border-top:1px solid var(--line)}
.example__list li{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft);gap:16px}
.example__list span{color:var(--ink-soft);font-size:.94rem}
.example__list strong{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;flex:0 0 auto} /* Nacht-Fix: Werte einzeilig (brachen @390 zweizeilig) */
.example__list span{min-width:0}
.example__highlight{border-bottom:1px solid var(--line)!important;padding-top:16px!important}
.example__highlight span{color:var(--ink)!important;font-weight:600}
/* .example__highlight strong = die EINE Schlüsselzahl je Block (z.B. "≈ 2.520 € / Jahr",
   "ab 1.100 € netto") → bleibt brass. */
.example__highlight strong{color:var(--brass-deep)!important;font-size:1.18rem;font-family:var(--font-display);font-weight:var(--fw-display)}
/* Global-Fix 2: Wort-Labels (keine Schlüsselzahl) NICHT brass — ruhiges Ink. */
.example__highlight--label strong{color:var(--ink)!important;font-size:1rem;font-family:var(--font-body);font-weight:700;letter-spacing:.01em}
.example__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.example__disclaimer{color:var(--muted);font-size:.8rem;margin:0;line-height:1.5}
.example .expert__points{margin:24px 0 28px}
/* Foto als Platte statt Sticker: Hairline-Inset, Badge schwebt nicht hart an die Kante (Kill-List portfolio 2) */
.example__media--inset{padding:10px;background:var(--surface);border:1px solid var(--line)}
.example__media--inset img{border-radius:2px}
.example__media--inset .example__badge{top:10px;left:10px;border-radius:0 0 var(--radius) 0}
@media(max-width:880px){.example__grid{grid-template-columns:1fr;gap:36px}}

/* =========== PROCESS (nummeriertes Editorial, nicht 4 Cards) =========== */
.process{background:var(--surface)}
.process__grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);max-width:900px}
.process__step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:baseline;padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line);text-align:left}
.process__num{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.4rem,4.5vw,3.6rem);color:var(--brass);line-height:.85;width:auto;height:auto;background:none;border-radius:0;display:block;margin:0;font-variant-numeric:tabular-nums}
.process__step h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.3rem;margin-bottom:6px;color:var(--ink)}
.process__step p{color:var(--ink-soft);font-size:.96rem;margin:0;max-width:60ch}
@media(max-width:560px){.process__step{grid-template-columns:auto 1fr;gap:18px}.process__num{font-size:2rem}}

/* =========== PRICING — echte Hairline-Preis-Ledger-Zeilen (Kill-List A) ===========
   Eine Zeile pro Objekttyp: Messing-Index + Label/Sub links, Preis rechts-bündig
   tabular, Hairline dazwischen. KEINE Cards, KEINE Elevation, KEINE Beliebt-Tier. */
.pricing{background:var(--bg-soft)}
.pricing__grid{display:flex;flex-direction:column;gap:0;max-width:920px;margin:0;border-top:1px solid var(--ink)}
.price-card{counter-increment:price;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:clamp(18px,3vw,40px);row-gap:6px;background:none;border:0;border-bottom:1px solid var(--line);padding:clamp(24px,3vw,32px) 0;position:relative;transition:none}
.pricing__grid{counter-reset:price}
.price-card:hover{background:none}
.price-card--featured{background:none}
/* Index */
.price-card::before{content:counter(price,decimal-leading-zero);grid-row:1/2;font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.05rem;color:var(--brass);font-variant-numeric:tabular-nums;line-height:1.3;align-self:baseline}
/* generische Line-Icons raus (text-/zahlengeführt) */
.price-card__icon{display:none!important}
.price-card__ribbon{grid-column:2/3;grid-row:2/3;justify-self:start;background:none;color:var(--brass-deep);font-size:.66rem;font-weight:700;padding:0;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border-radius:0;display:inline-flex;align-items:center;gap:8px;margin-top:2px;order:2}
.price-card__ribbon::before{content:"";width:16px;height:1.5px;background:var(--brass-deep)}
.price-card h3{grid-column:2/3;grid-row:1/2;font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.25rem,2vw,1.55rem);color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.01em}
.price-card__note{grid-column:2/3;grid-row:2/3;font-size:.86rem;color:var(--ink-soft);margin:2px 0 0;line-height:1.4}
/* Preis rechts-bündig, tabular */
.price-card__amount{grid-column:3/4;grid-row:1/2;display:flex;flex-direction:column;align-items:flex-end;text-align:right;margin:0}
.price-card__amount strong{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.9rem,3vw,2.5rem);color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.price-card__amount span{font-size:.74rem;color:var(--muted);margin-top:7px;letter-spacing:.01em}
.price-card__net{grid-column:3/4;grid-row:2/3;text-align:right;font-size:.78rem;color:var(--muted);margin:2px 0 0}
/* Leistungs-Liste als ruhige Meta-Zeile unter Label, kein Bonbon-Bullet */
/* It-3 portfolio: Feature-Listen entdrängen — mehr Zeilenabstand + 12px Spaltengap */
.price-card__list{grid-column:2/3;grid-row:3/4;list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px 12px}
.price-card__list li{color:var(--ink-soft);font-size:.84rem;padding-left:14px;position:relative;line-height:1.5;flex:0 1 calc(50% - 12px);min-width:200px}
.price-card__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--ink-soft);transform:none}
.price-card .btn,.price-card__link{grid-column:3/4;grid-row:3/4;justify-self:end;align-self:end;margin-top:14px}
.price-card .btn{width:auto;justify-content:center}
.price-card__link svg{width:16px;height:16px;transition:transform var(--t)}
.price-card__link:hover svg{transform:translateX(4px)}
.price-card__link::after{display:none}
@media(max-width:720px){
  .price-card .btn,.price-card__link{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:16px}
  .price-card{grid-template-columns:auto 1fr;row-gap:4px;padding:22px 0}
  .price-card__amount{grid-column:1/-1;grid-row:auto;align-items:flex-start;text-align:left;margin-top:12px;flex-direction:row;align-items:baseline;gap:10px}
  .price-card__amount span{margin-top:0}
  .price-card__net{grid-column:1/-1;grid-row:auto;text-align:left;margin-top:2px}
  .price-card__list{grid-column:1/-1;grid-row:auto}
  .price-card__ribbon{grid-column:1/-1;grid-row:auto}
  .price-card .btn{grid-column:1/-1;grid-row:auto;justify-self:stretch;width:100%;margin-top:16px}
}

/* =========== EXPERT (legacy two-col) =========== */
.expert{background:var(--surface)}
.expert__grid{display:grid;grid-template-columns:.78fr 1.3fr;gap:clamp(36px,5vw,64px);align-items:start;max-width:1100px;margin:0 auto}
/* DIA-Zert-Abzeichen ist ein Credential, KEIN Foto-Portrait: Sockel hugged das Badge,
   kein großes weißes Leerfeld; object-fit:contain bleibt (Kill-List steuerberater 1) */
.expert__media{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:none;border:0;border-radius:0;padding:0;max-width:280px}
.expert__media img{width:100%;max-width:260px;margin:0;display:block;aspect-ratio:auto;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-soft);padding:clamp(14px,1.6vw,20px);filter:none}
.expert__seal{position:static;width:100%;background:var(--bg-ink);color:var(--on-ink);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px;max-width:none}
.expert__seal svg{width:32px;height:32px;color:var(--brass-bright);flex-shrink:0}
.expert__seal strong{display:block;color:#fff;font-size:.82rem;font-weight:700;line-height:1.2}
.expert__seal span{display:block;color:var(--on-ink-soft);font-size:.72rem;margin-top:2px}
.expert__body h2{margin-bottom:8px;font-family:var(--font-display);font-weight:var(--fw-display)}
.expert__tagline{color:var(--ink-soft);font-weight:600;margin-bottom:24px;font-size:1rem}
.expert__points{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:13px}
.expert__points li{color:var(--ink);font-size:.98rem;display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.expert__points li::before{content:"";flex:0 0 auto;width:14px;height:1.5px;margin-top:.72em;background:var(--ink-soft)}
.expert__ctas{display:flex;gap:clamp(14px,2vw,22px);flex-wrap:wrap;align-items:center}
@media(max-width:880px){.expert__grid{grid-template-columns:1fr;gap:40px}.expert__media{max-width:300px}.expert__media img{max-width:300px}}

/* =========== FAQ (Hairline-Akkordeon mit Messing-Index, erste Zeile offen) =========== */
.faq{background:var(--bg-soft)}
.faq__lead{max-width:680px;margin:0 0 clamp(42px,6vw,64px)}
.faq__lead .kicker{margin-bottom:14px}
.faq__lead p{font-size:clamp(1.02rem,1.3vw,1.18rem);color:var(--ink-soft);line-height:1.6;margin:0;font-family:var(--font-display);font-weight:500;font-style:normal}
.faq__list{max-width:920px;margin:0;display:flex;flex-direction:column;border-top:1px solid var(--ink);counter-reset:faq}
.faq__item{background:none;border:0;border-bottom:1px solid var(--line);counter-increment:faq}
/* Frage führt: größer/fetter, Reihe ~20% enger (Ledger-Dichte) */
.faq__item summary{padding:14px 0;cursor:pointer;font-weight:600;font-size:1.15rem;list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:18px;color:var(--ink);font-family:var(--font-body);line-height:1.3;letter-spacing:-.005em}
.faq__item summary::-webkit-details-marker{display:none}
/* THEME A: Reihen-Index neutral Ink; Brass NUR auf der offenen (aktiven) Zeile */
.faq__item summary::before{content:counter(faq,decimal-leading-zero);font-family:var(--font-display);font-weight:var(--fw-display);font-size:1rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;line-height:1.3;transition:color var(--t)}
.faq__item[open] summary::before{color:var(--brass)}
/* +/−-Toggle: Ink-Hairline per Default, Brass NUR auf aktiver/offener Zeile (Refusal 3 / Kill-List faq 4) */
.faq__item summary::after{content:"";width:14px;height:14px;flex-shrink:0;align-self:center;position:relative;transition:transform var(--t),background var(--t)}
.faq__item summary::after{background:
  linear-gradient(var(--ink-soft),var(--ink-soft)) center/14px 2px no-repeat,
  linear-gradient(var(--ink-soft),var(--ink-soft)) center/2px 14px no-repeat}
.faq__item[open] summary::after{transform:rotate(135deg);background:
  linear-gradient(var(--brass),var(--brass)) center/14px 2.4px no-repeat,
  linear-gradient(var(--brass),var(--brass)) center/2.4px 14px no-repeat}
.faq__item summary:hover{color:var(--brass-deep)}
.faq__item summary:hover::after{background:
  linear-gradient(var(--brass),var(--brass)) center/14px 2px no-repeat,
  linear-gradient(var(--brass),var(--brass)) center/2px 14px no-repeat}
.faq__answer{padding:0 0 22px;margin-left:calc(1rem + 18px);color:var(--ink-soft);line-height:1.65;font-size:.97rem;max-width:64ch}
/* FAQ in betitelte Themengruppen mit Sub-Kicker (Kill-List faq 1) */
.faq__groups{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px);max-width:920px}
/* It-3 faq: full-width Hairline-Rule über jeder Gruppe, Kicker mit mehr Tracking */
.faq__group-head{margin:0 0 8px;padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--ink)}
.faq__group:first-child .faq__group-head{padding-top:0;border-top:0}
/* THEME A: Gruppen-Kicker neutral Ink — Brass bleibt auf aktiver Zeile/CTA reserviert */
.faq__group-kicker{display:inline-flex;align-items:center;gap:11px;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;font-variant-numeric:tabular-nums}
.faq__group-kicker::before{content:"";width:24px;height:2px;background:var(--ink-soft);flex:0 0 auto}
.faq__group-title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--ink);margin:0;line-height:1.1;letter-spacing:-.01em}
.faq__group .faq__list{counter-reset:faq;border-top:1px solid var(--line);margin-top:14px}
/* It-3 faq: Open-State Ink-Tint bricht die Reihen-Monotonie */
.faq__item[open]{background:var(--surface-soft);margin:0 calc(-1*clamp(14px,2vw,22px));padding:0 clamp(14px,2vw,22px)}
.faq__item[open] summary{color:var(--ink)}
/* Kill-List faq 2: auf der FAQ-Seite offener Antwort-State FLUSH auf Hairline (kein Card-Fill),
   damit die S&C-Flush-Hairline-Disziplin gewahrt bleibt (seitengeskopt, steuerberater bleibt unberührt) */
.faq-page .faq__item[open]{background:none;margin:0;padding:0}

/* It-4 faq-hero (Kill-List faq 1+4): H1 dominant (~1.3×), Kontaktkarte zu ruhiger
   Hairline-SCHIENE demoten — KEIN Box-Fill, KEIN Border-Rahmen, KEIN Orange-Trim.
   Reine Hairline-Reihen in der schmalen rechten Spalte. */
.faq-hero .hero__grid{grid-template-columns:1.72fr .66fr;align-items:start}
.faq-hero .hero__title{font-size:clamp(3rem,7vw,5.8rem);max-width:15ch}
.faq-hero .hero__sub{font-size:clamp(1rem,1.2vw,1.12rem);max-width:58ch}
.faq-hero .hero__calc{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:18px 0 0;box-shadow:none;overflow:visible}
.faq-hero .hero__calc::before{display:none}
.faq-hero .hero__calc-badge{color:var(--ink-2);background:none;border:0;padding:0;margin-bottom:14px}
.faq-hero .hero__calc-badge::before{background:var(--brass)}
.faq-hero .hero__calc-row{border-bottom-color:var(--line);padding:11px 0}
.faq-hero .hero__calc-row span{color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.faq-hero .hero__calc-row strong{color:var(--ink);font-weight:600;font-size:.95rem}
.faq-hero .hero__calc-row strong a{color:var(--ink)}
.faq-hero .hero__calc-row strong a:hover{color:var(--brass-deep)}
.faq-hero .hero__calc-row--diff strong{color:var(--ink)}
.faq-hero .hero__calc-total{background:none;border-top:1px solid var(--ink);margin:0;padding:16px 0 0;display:flex;flex-direction:column;gap:2px}
.faq-hero .hero__calc-total-label{color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.faq-hero .hero__calc-total-value{color:var(--ink);font-size:1.18rem;font-family:var(--font-display);font-weight:var(--fw-display)}
.faq-hero .hero__calc-total-note{color:var(--muted)}
@media(max-width:980px){.faq-hero .hero__grid{grid-template-columns:1fr}}
/* Kill-List faq 3: auf Mobile FAQ-Reihen VOR die Kontaktkarte — Hero-Schiene ausblenden,
   die kompakte Kontaktzeile wird am Ende der FAQ-Section (faq-contact--mobile) gezeigt. */
@media(max-width:560px){.faq-hero .hero__calc{display:none}}
/* Mobile-Kontaktschiene am Ende der FAQ-Liste (nur Mobile sichtbar) */
.faq-contact--mobile{display:none}
@media(max-width:560px){
  .faq-contact--mobile{display:block;margin-top:clamp(28px,6vw,40px);border-top:2px solid var(--ink);padding-top:16px}
  .faq-contact--mobile .faq-contact__kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
  .faq-contact--mobile .faq-contact__kicker::before{content:"";width:20px;height:2px;background:var(--brass)}
  .faq-contact--mobile dl{margin:0;display:flex;flex-direction:column}
  .faq-contact--mobile div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
  .faq-contact--mobile div:last-child{border-bottom:0}
  .faq-contact--mobile dt{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .faq-contact--mobile dd{margin:0;font-size:.92rem;font-weight:600;color:var(--ink);text-align:right}
  .faq-contact--mobile dd a{color:var(--ink)}
}
.faq__answer p{margin:0;color:var(--ink-soft)}
@media(max-width:560px){.faq__item summary{padding:16px 0;font-size:.98rem;gap:12px}.faq__answer{margin-left:0}}
/* Steuerberater-FAQ-Fragen ~1.15× + mehr Luft (Kill-List steuerberater 8) */
.faq--lg .faq__item summary{font-size:1.3rem;padding:18px 0}
@media(max-width:560px){.faq--lg .faq__item summary{font-size:1.05rem;padding:16px 0}}

/* FAQ 2-Spalter: Akkordeon links ~62%, ruhige Ink-Befund-Spalte rechts (Kill-List faq) */
.faq__split{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.faq__split .faq__list{max-width:none}
.faq__lead .kicker{margin-bottom:14px}
.faq__lead p{max-width:52ch;line-height:1.45}
/* Größere Messing-Index-Ziffer (×1.4) */
.faq__split .faq__item summary::before{font-size:1.28rem}
/* Ruhiges Ink-Detail-Panel im rechten Gutter */
.faq__aside{position:sticky;top:100px;background:var(--bg-ink);border-radius:var(--radius);padding:clamp(26px,3vw,34px);position:relative;overflow:hidden}
.faq__aside::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brass)}
.faq__aside-kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-kicker);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:16px}
.faq__aside-kicker::before{content:"";width:22px;height:2px;background:var(--brass-bright)}
.faq__aside h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.4rem;color:#fff;margin:0 0 10px;line-height:1.15}
.faq__aside p{color:var(--on-ink-soft);font-size:.92rem;line-height:1.6;margin:0 0 22px}
.faq__aside-ledger{display:flex;flex-direction:column;margin:0 0 22px;border-top:1px solid var(--line-ink)}
.faq__aside-ledger div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-ink)}
.faq__aside-ledger dt{margin:0;font-size:.8rem;color:var(--on-ink-soft)}
.faq__aside-ledger dd{margin:0;font-size:.94rem;font-weight:700;color:#fff;text-align:right}
.faq__aside-ledger dd a{color:#fff;font-weight:700}
.faq__aside-ledger dd a:hover{color:var(--brass-bright)}
.faq__aside-ledger .faq__aside-row--accent dd{font-family:var(--font-display);font-weight:var(--fw-display);color:var(--brass-bright);font-size:1.05rem}
.faq__aside .btn--primary{width:100%;justify-content:center}
@media(max-width:860px){
  .faq__split{grid-template-columns:1fr;gap:0}
  .faq__aside{position:static;margin-top:clamp(28px,4vw,40px)}
}

/* =========== CTA BAND (Ink-Navy mit Messing-Button, max 1×/Seite) =========== */
.cta-band{background:var(--bg-ink);padding:clamp(56px,7vw,88px) 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brass)}
.cta-band__wrap{max-width:880px}
.cta-band .kicker{color:var(--on-ink-soft)!important;margin-bottom:18px}
.cta-band .kicker::before{background:var(--brass-bright)}
.cta-band h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.8rem,3.6vw,2.7rem);color:#fff;margin-bottom:16px;line-height:1.08}
.cta-band h2 em{color:#fff;font-style:normal}
.cta-band p{color:var(--on-ink);font-size:1.06rem;margin-bottom:30px;max-width:52ch}
.cta-band__ctas{display:flex;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;align-items:center}
.cta-band .btn--primary{background:var(--brass);color:#fff}
.cta-band .btn--primary:hover{background:var(--brass-bright);color:var(--ink)}
.cta-band .btn--ghost{background:transparent;border-color:var(--line-ink);color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}

/* Größere, links-verankerte Display-Variante (Kill-List kontakt 2) */
.cta-band--lg h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.04}
.cta-band--lg .cta-band__ctas{justify-content:flex-start}

/* Zweispaltige CTA-Band-Variante: tote rechte Hälfte → Kontakt-Ledger (Kill-List steuerberater 3) */
.cta-band--split .cta-band__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.cta-band--split .cta-band__wrap{max-width:none;margin:0}
.cta-band__contact{border-left:1px solid var(--line-ink);padding-left:clamp(28px,4vw,52px)}
.cta-band__contact-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:14px}
.cta-band__contact-kicker::before{content:"";width:22px;height:2px;background:var(--brass-bright)}
.cta-band__contact-addr{font-size:.82rem;color:var(--on-ink-soft);margin:16px 0 0;line-height:1.5;opacity:.85}
@media(max-width:820px){
  .cta-band--split .cta-band__grid{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .cta-band__contact{border-left:0;border-top:1px solid var(--line-ink);padding-left:0;padding-top:clamp(24px,4vw,32px)}
}

/* Ink-getöntes Ledger-Panel für die "Vertrauen"-Spalte (Kill-List kontakt 3) */
.example__body--panel{background:var(--bg-ink);border-radius:var(--radius);padding:clamp(26px,3vw,36px);position:relative;overflow:hidden}
.example__body--panel::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brass)}
.example__body--panel .section__eyebrow{color:var(--on-ink-soft)}
.example__body--panel .section__title{color:#fff}
.example__body--panel .section__lead{color:var(--on-ink-soft)}
.example__body--panel .expert__points li{color:var(--on-ink)}
.example__body--panel .expert__points li::before{background:var(--on-ink-soft)}
/* Telefon + E-Mail als messing-umrandete Ledger-Zeile statt Ghost-Button */
.contact-line{display:flex;flex-direction:column;margin:8px 0 0;border-top:1px solid var(--line-ink)}
.contact-line a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-ink);color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.contact-line a:last-child{border-bottom:0}
.contact-line a span{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-soft)}
.contact-line a:hover{color:var(--brass-bright)}
.contact-line a:hover span{color:var(--brass-bright)}

/* Paper-Gap zwischen Ink-CTA-Band und Ink-Footer (verhindert dunkle Masse) */
.cta-footer-gap{height:clamp(40px,6vw,72px);background:var(--bg);border-top:1px solid var(--line)}

/* =========== It-3 KONTAKT: Funnel-Editorial gewichtsbalanciert ===========
   Linke "Lieber loslegen"-Spalte bekommt ein getöntes Papier-Panel, damit sie
   gegen das schwere Ink-Panel rechts nicht als dünne Liste wegkippt. */
.contact-funnels .example__grid{align-items:stretch}
.contact-funnels .example__body:not(.example__body--panel){
  background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,36px);position:relative;overflow:hidden}
.contact-funnels .example__body:not(.example__body--panel)::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ink)}
.contact-funnels .example__list{margin-bottom:26px}
/* Disziplinierter Stripe-Doppel-CTA: gleiche Höhe, kantig, primär gefüllt + sekundär outline */
.contact-funnels .example__ctas{gap:14px}
.contact-funnels .example__ctas .btn{flex:1 1 0;min-width:0;justify-content:center}
/* It-3 kontakt: Schluss-CTA-Band asymmetrisch (Messing-Rule + linksbündig) statt zentriert */
.cta-band--lg .cta-band__wrap{max-width:760px;margin:0;text-align:left;position:relative;padding-left:clamp(20px,3vw,34px)}
.cta-band--lg .cta-band__wrap::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--brass)}
@media(max-width:880px){.cta-band--lg .cta-band__wrap{padding-left:18px}}

/* =========== FOOTER =========== */
.footer{background:var(--bg-ink);color:var(--on-ink-soft);padding:clamp(46px,5vw,60px) 0 26px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:40px}
.footer__brand{font-weight:700;color:#fff;font-size:1.1rem;margin-bottom:16px;display:flex;align-items:center;gap:12px;letter-spacing:.01em}
.footer__brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius);background:rgba(255,255,255,.06);color:var(--brass-bright)}
.footer__brand-mark svg{width:20px;height:20px}
.footer__tag{color:var(--on-ink-soft);margin-bottom:14px;line-height:1.5;font-size:.92rem}
.footer__small{font-size:.85rem;color:var(--on-ink-soft);opacity:.8;line-height:1.6}
.footer h4{color:#fff;font-size:.84rem;margin-bottom:16px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer ul a{font-size:.9rem;color:var(--on-ink-soft)}
.footer ul a:hover{color:var(--brass-bright)}
.footer__hours{margin-top:18px;font-size:.84rem;color:var(--on-ink-soft);line-height:1.5;opacity:.85}
/* „Erreichbarkeit" an den Uppercase-Rhythmus der anderen Spalten-Header angleichen (Kill-List F) */
.footer__hours strong{display:block;margin-bottom:8px;color:#fff;font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:1}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--line-ink);font-size:.82rem;color:var(--on-ink-soft);opacity:.8}
/* Dev-Preview als Hairline-Kicker-Text, KEIN Rounded-Chip (Kill-List Querschnitt 6) */
.footer__dev{display:inline-flex;align-items:center;gap:9px;padding:0;border:0;border-radius:0;color:var(--on-ink-soft);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.footer__dev::before{content:"";width:18px;height:2px;background:var(--brass-bright);flex:0 0 auto}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* =========== MOBILE STICKY CTA =========== */
.mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;display:none;gap:10px;z-index:80;opacity:0;transform:translateY(calc(100% + 20px));transition:all .35s var(--t)}
.mobile-cta.is-visible{opacity:1;transform:none}
.mobile-cta__btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;border-radius:var(--radius-cta);font-weight:700;text-decoration:none;transition:var(--t);min-height:56px;box-shadow:var(--shadow-lg)}
.mobile-cta__btn svg{width:20px;height:20px;flex-shrink:0}
.mobile-cta__btn--primary{background:var(--brass);color:#fff}
.mobile-cta__btn--primary:hover{background:var(--brass-deep);color:#fff}
.mobile-cta__btn--call{flex:0 0 auto;width:56px;padding:0;background:var(--bg-ink);color:#fff}
@media(max-width:720px){.mobile-cta{display:flex}body.has-sticky-cta{padding-bottom:calc(104px + env(safe-area-inset-bottom))}}
body.is-wizard .mobile-cta{display:none!important}

/* =========== BACK TO TOP =========== */
.back-to-top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;background:var(--bg-ink);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:70;opacity:0;transform:translateY(20px) scale(.9);transition:var(--t);box-shadow:var(--shadow-lg)}
.back-to-top.is-visible{opacity:1;transform:none}
.back-to-top:hover{background:var(--brass);transform:translateY(-2px)}
.back-to-top svg{width:18px;height:18px}
/* Bis 1100px liegt rechts die Preisspalte bzw. der Wizard-Sticky-Strip (.wizard__sticky ist
   bis 1100px display:flex) - der Knopf sass genau darauf. Frueher nur bis 720px verschoben. */
@media(max-width:1100px){.back-to-top{right:16px;bottom:90px;width:42px;height:42px}}
/* Auf /gutachten-beauftragen liegt unten der Live-Festpreis-Strip (.wizard__sticky, bis 1100px
   sichtbar, ~98px hoch bei bottom:12px). Der Knopf sass mit 8px auf seiner Oberkante. */
@media(max-width:1100px){body:has(.wizard__sticky) .back-to-top{bottom:calc(124px + env(safe-area-inset-bottom))}}

/* =========================================================
   WIZARD — Stripe-Disziplin, Live-Ergebnis als Heldin
   ========================================================= */
.wizard{padding:clamp(26px,4vw,52px) 0 160px;background:var(--bg-soft)}
.wizard__container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding:0 clamp(18px,4vw,40px)}
.wizard__header{max-width:680px;margin:0 0 clamp(24px,3vw,32px)}
/* Squint: Wizard-H1 ~1.4× skaliert, Kicker-Abstand straffer (Kill-List gutachten 3) */
.wizard__header h1{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.9rem,5.6vw,4.6rem);margin:8px 0 12px;line-height:.98;letter-spacing:-.015em}
.wizard__header p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;max-width:58ch}
.wizard__layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}
@media(max-width:1100px){
  .wizard__layout{grid-template-columns:1fr;gap:24px;max-width:780px}
  /* Aktiver Step ZUERST, Ergebnis-Panel als Befund darunter (Kill-List beauftragen 5) */
  .wizard__main{width:100%;min-width:0;order:1}
  .wizard__aside{width:100%;order:2}
}

/* Progress bar */
.wizard__progress{position:relative;height:3px;background:var(--line);margin-bottom:28px;overflow:hidden}
.wizard__progress-fill{position:absolute;top:0;left:0;bottom:0;background:var(--brass);transition:width .6s cubic-bezier(.2,.7,.25,1)}

/* Step nav */
.wizard__nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:32px;flex-wrap:nowrap}
/* Editorial-Stepper: Brass-Index-Ziffer + Ink-Hairline-Progress statt SaaS-Kreise (Kill-List gutachten 2) */
.wizard__step{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;color:var(--ink);font-family:inherit;padding:6px 2px 2px;min-width:0;flex:0 0 auto;transition:var(--t);position:relative}
.wizard__step-num{width:auto;height:auto;border-radius:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.25rem;border:0;background:none;color:var(--muted);transition:var(--t);font-variant-numeric:tabular-nums;line-height:1}
.wizard__step::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--line);transition:background var(--t)}
.wizard__step-label{font-size:.78rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;color:var(--ink-2)}
.wizard__step.is-active{color:var(--ink)}
.wizard__step.is-active .wizard__step-num{color:var(--brass);font-size:1.7rem}
.wizard__step.is-active::after{background:var(--brass)}
.wizard__step.is-active .wizard__step-label{font-weight:700;color:var(--ink)}
.wizard__step.is-done .wizard__step-num{color:var(--brass-deep)}
.wizard__step.is-done::after{background:var(--brass-tint)}
/* Mobile: Stepper-Labels ausblenden (nowrap sprengte sonst bei 390px die Breite); aktiver Step steht in der Legend */
@media(max-width:560px){
  .wizard__step-label{display:none}
  .wizard__nav{gap:6px}
  .field-row{grid-template-columns:1fr;gap:14px}
}
.wizard__step-line{flex:1 1 auto;height:1px;background:var(--line);opacity:1;min-width:16px;max-width:56px;align-self:flex-end;margin-bottom:10px}
@media(max-width:720px){
  .wizard__nav{overflow-x:auto;justify-content:flex-start;gap:4px;margin:0 -16px 28px;padding:0 16px 6px;scrollbar-width:none}
  .wizard__nav::-webkit-scrollbar{display:none}
  .wizard__step-num{width:34px;height:34px;font-size:.86rem}
  .wizard__step-label{font-size:.7rem}
  .wizard__step-line{max-width:20px;min-width:12px}
}

/* Wizard pages */
.wizard__form{position:relative}
/* padding-top 0: verhindert das <legend>-Fieldset-Phantomband (Browser doppelt sonst
   padding-top unter der Legende). Oberer Abstand kommt aus .wizard__legend margin-top. */
.wizard__page{border:0;margin:0;padding:0;display:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 clamp(28px,3.5vw,44px) clamp(28px,3.5vw,44px)}
.wizard__page.is-active{display:flow-root;animation:fadeUp .3s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wizard__legend{float:none;width:100%;display:flex;flex-direction:column;gap:4px;margin:clamp(28px,3.5vw,44px) 0 clamp(16px,1.8vw,22px);padding:0 0 clamp(14px,1.4vw,18px);border-bottom:1px solid var(--line)}
.wizard__legend span{margin:0 0 2px}
.wizard__legend h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.55rem,2.4vw,1.95rem);margin:0;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
.wizard__intro{color:var(--ink-soft);font-size:.94rem;line-height:1.65;margin:-14px 0 26px;max-width:64ch}
.wizard__intro strong{color:var(--ink)}

/* Fields */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.field--hidden{display:none!important}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}
.field-row > .field{margin-bottom:0}
/* Kill-List gutachten: Form-Labels ruhiger (ink-soft + leichtes Tracking) — Stripe-Disziplin */
.field__label{font-size:.84rem;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;display:flex;align-items:center;gap:4px}
.field__label em{color:var(--danger);font-style:normal;font-weight:700}
.field__hint{font-size:.8rem;color:var(--muted);margin-top:2px}
.field__hint.is-valid{color:var(--success)}
.field__hint.is-error{color:var(--danger)}
/* It-3: Aktenzeichen-Felder — warme Hairline-Border (kein Fill), Navy-Fokus-Ring (Kill-List gutachten 1/8) */
.field input[type=text],.field input[type=number],.field input[type=email],.field input[type=tel],.field input[type=date],.field select,.field textarea{
  width:100%;background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;color:var(--ink);font:inherit;font-size:.96rem;transition:border-color var(--t),background var(--t),box-shadow var(--t);appearance:none;-webkit-appearance:none
}
.field input:hover:not(:focus),.field select:hover:not(:focus),.field textarea:hover:not(:focus){border-color:var(--ink-soft)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy-link);background:var(--surface);box-shadow:0 0 0 3px rgba(35,69,110,.14)}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{border-color:var(--danger);background:var(--danger-tint)}
.field textarea{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:transparent}
.field textarea:focus{box-shadow:0 0 0 3px rgba(35,69,110,.14);border-color:var(--navy-link)}
.field textarea{resize:vertical;min-height:90px;font-family:inherit}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7686'><path d='M10 14l-5-5h10z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}

/* Feldgruppen — entzerren die Feld-Wand in geführte Abschnitte */
.field-group{margin:0 0 30px}
.field-group:last-of-type{margin-bottom:0}
.field-group + .field-group{padding-top:28px;border-top:1px solid var(--line)}
.field-group__head{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.field-group__head h3{font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0;white-space:nowrap;flex:0 0 auto}
.field-group__head::after{content:"";flex:1 1 auto;height:1px;background:var(--line);align-self:center}
.field-group > .field:last-child,.field-group > .field-row:last-child{margin-bottom:0}

/* Type Cards (wizard radios) */
.type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:2px}
.type-card{position:relative;cursor:pointer}
.type-card input{position:absolute;inset:0;opacity:0;cursor:pointer}
.type-card__body{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);transition:var(--t);text-align:left;min-height:96px}
.type-card__body svg{width:22px;height:22px;color:var(--ink-2);transition:var(--t)}
.type-card__idx{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.15rem;color:var(--brass);font-variant-numeric:tabular-nums;line-height:1;transition:color var(--t)}
.type-card__body strong{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3}
.type-card:hover .type-card__body{border-color:var(--brass)}
.type-card:hover .type-card__body svg,.type-card:hover .type-card__idx{color:var(--brass-deep)}
.type-card input:checked + .type-card__body{background:var(--brass-tint);border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.type-card input:checked + .type-card__body svg,.type-card input:checked + .type-card__body .type-card__idx{color:var(--brass-deep)}
.type-card input:focus-visible + .type-card__body{outline:2px solid var(--brass);outline-offset:2px}

/* =========== TYPE-CARD → Foto-Karte (Objekttyp-Auswahl im Wizard) =========== */
.type-card--photo .type-card__body{padding:0;min-height:0;gap:0;overflow:hidden;display:flex;flex-direction:column}
.type-card--photo .type-card__media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--surface-soft)}
.type-card--photo .type-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.25,1);filter:saturate(.96)}
.type-card--photo:hover .type-card__media img{transform:scale(1.04)}
.type-card--photo .type-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,0) 50%,rgba(13,27,42,.34) 100%);pointer-events:none;transition:var(--t)}
/* Badge: kleiner, ruhiger, dezent */
.type-card--photo .type-card__badge{position:absolute;left:10px;bottom:10px;z-index:2;width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.92);color:var(--ink-2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:var(--t)}
.type-card--photo .type-card__badge svg{width:17px;height:17px}
/* Eine dekorative Ebene weniger: Index-Pille in der Foto-Karte ausblenden (Markup bleibt) */
.type-card--photo .type-card__idx{display:none}
.type-card--photo .type-card__row{display:flex;align-items:center;gap:0;padding:17px 16px 15px;background:var(--surface);transition:var(--t)}
.type-card--photo .type-card__row strong{font-size:.95rem}
.type-card--photo:hover .type-card__badge{background:var(--brass);color:#fff}
/* Klarer, kräftiger Auswahl-Zustand */
.type-card--photo input:checked + .type-card__body{box-shadow:inset 0 0 0 2px var(--brass);border-color:var(--brass)}
/* Selected = invertierte Ink-Platte + Messing-Rahmen (klarer Auswahl-Zustand) */
.type-card--photo input:checked + .type-card__body .type-card__row{background:var(--bg-ink);color:#fff}
.type-card--photo input:checked + .type-card__body .type-card__row strong{color:#fff}
.type-card--photo input:checked + .type-card__body .type-card__badge{background:var(--brass);color:#fff}
.type-card--photo input:checked + .type-card__body .type-card__media img{transform:scale(1.04)}
.type-card--photo input:checked + .type-card__body .type-card__media::after{background:linear-gradient(180deg,rgba(13,27,42,0) 40%,rgba(13,27,42,.42) 100%)}
@media(max-width:480px){.type-grid{grid-template-columns:1fr 1fr}}

/* Modernisierung */
.mod-list{display:flex;flex-direction:column;gap:10px}
.mod-row{display:grid;grid-template-columns:1.2fr 2fr;gap:18px;align-items:center;padding:16px 20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.mod-row__label{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:.94rem}
.mod-row__num{width:26px;height:26px;border-radius:50%;background:var(--brass-tint);color:var(--brass-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;flex-shrink:0;font-variant-numeric:tabular-nums}
.mod-row__selects{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mod-row__selects select{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:11px 14px;color:var(--ink);font:inherit;font-size:.88rem;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7686'><path d='M10 14l-5-5h10z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer;transition:var(--t)}
.mod-row__selects select:focus{outline:0;border-color:var(--navy-link);box-shadow:0 0 0 3px rgba(35,69,110,.12)}
.mod-row__selects select:disabled{opacity:.5;cursor:not-allowed;background-color:var(--bg-soft-2)}
@media(max-width:680px){.mod-row{grid-template-columns:1fr;gap:12px}}

/* Uploads */
.upload-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.upload{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.upload__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:12px}
.upload__head strong{font-size:.92rem;color:var(--ink)}
.upload__max{font-size:.76rem;color:var(--muted)}
.upload__drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 14px;background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--radius);cursor:pointer;transition:var(--t);text-align:center;min-height:110px}
.upload__drop:hover{border-color:var(--brass);background:var(--brass-tint)}
.upload__drop svg{width:26px;height:26px;color:var(--brass)}
.upload__hint{font-size:.84rem;color:var(--ink-soft)}
.upload__count{font-size:.76rem;color:var(--muted)}
.upload.has-files .upload__drop{border-color:var(--success);background:var(--success-tint)}
.upload.has-files .upload__count{color:var(--success);font-weight:600}
.upload__input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Consent */
.consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;cursor:pointer;line-height:1.5;font-size:.9rem;color:var(--ink-soft)}
.consent input[type=checkbox]{flex-shrink:0;margin-top:2px;width:18px;height:18px;accent-color:var(--brass);cursor:pointer}
.consent input[type=checkbox].is-invalid{outline:2px solid var(--danger);outline-offset:2px;border-radius:3px}
.consent a{color:var(--navy-link);text-decoration:underline}
.consent em{color:var(--danger);font-style:normal;font-weight:700}
.consent strong{color:var(--ink)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* Actions */
.wizard__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.wizard__actions > span{display:block}
/* Kill-List gutachten 2: erster Step — primärer CTA linksbündig unter den Feldern,
   kein zentriert-schwebendes Brass-Pill; sekundärer Textlink daneben */
.wizard__actions--first{justify-content:flex-start;align-items:center;gap:clamp(14px,2vw,24px)}
/* Sekundär-CTA als Stripe-Outline-Paar zum gefüllten Primär (nicht nackter Textlink) */
.wizard__actions-alt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:var(--radius-cta);color:var(--ink-soft);font-weight:600;transition:var(--t)}
.wizard__actions-alt:hover{color:var(--brass-deep);border-color:var(--ink-soft)}
@media(max-width:560px){.wizard__actions--first{flex-direction:column;align-items:stretch}.wizard__actions--first .btn-link{text-align:center}}
@media(max-width:560px){.wizard__actions{flex-direction:column-reverse}.wizard__actions .btn{width:100%}}

/* Preview aside — Heldin: Ink-Navy Ledger */
.wizard__aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px}
@media(max-width:1100px){.wizard__aside{position:static}}
.preview-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.preview-card--result,.preview-card:first-child{background:var(--bg-ink);border-color:var(--bg-ink)}
.preview-card--result .preview-card__head h3,.preview-card:first-child .preview-card__head h3{color:#fff}
.preview-card--result .preview-badge,.preview-card:first-child .preview-badge{color:var(--on-ink-soft)}
.preview-card--result .preview-row dt,.preview-card:first-child .preview-row dt{color:var(--on-ink-soft)}
.preview-card--result .preview-row dd,.preview-card:first-child .preview-row dd{color:#fff}
.preview-card--result .preview-row,.preview-card:first-child .preview-row{border-color:var(--line-ink)}
.preview-card--result .preview-divider,.preview-card:first-child .preview-divider{background:var(--line-ink)}
.preview-card__head{margin-bottom:6px;padding-bottom:16px;border-bottom:1px solid var(--line-ink)}
.preview-card__head h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.2rem;color:var(--ink);margin:0}
/* Bewusster Empty-State statt kaputter Skelett-Striche */
.preview-card__intro{margin:10px 0 0;font-size:.84rem;line-height:1.5;color:var(--on-ink-soft)}
.preview-card--price .preview-card__intro{color:var(--ink-soft)}

/* Seeded Beispiel-Befund (rein statisch, KEINE ids — wizard.js fasst ihn nie an).
   Gibt dem Ergebnis-Panel ab erstem Paint einen lebendigen Befund. */
.preview-seed{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-ink)}
.preview-seed__tag{display:inline-flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-soft);margin:0 0 12px}
.preview-seed__tag::before{content:"";width:16px;height:2px;background:var(--brass-bright)}
.preview-seed dl{margin:0;padding:0;display:flex;flex-direction:column}
.preview-seed div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-ink)}
.preview-seed div:last-child{border-bottom:0}
.preview-seed dt{margin:0;font-size:.82rem;color:var(--on-ink-soft)}
.preview-seed dd{margin:0;font-size:.92rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.preview-seed__hero dd{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.35rem;color:var(--brass-bright)}
.preview-seed__row--accent dd{color:var(--brass-bright)}
.preview-seed__note{margin:12px 0 0;font-size:.72rem;line-height:1.5;color:var(--on-ink-soft);opacity:.85}
/* Zwei Hero-Zahlen im Ink-Panel: RND + Gesamtpreis (Kill-List beauftragen 2) */
.preview-heroes{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 18px;border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)}
.preview-hero{padding:18px 0;display:flex;flex-direction:column;gap:8px}
.preview-hero--price{padding-left:20px;border-left:1px solid var(--line-ink)}
.preview-hero__label{font-size:.74rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--on-ink-soft);line-height:1.35}
/* Rule-of-one (Kill-List gutachten 4): RND + Preis weiß auf Ink, Brass NUR auf der Ersparnis-Zeile */
.preview-hero__fig{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.5rem,3vw,1.95rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
/* Bei 320px passte "833,00 €" nicht in eine Zeile - der Browser brach als letzte Massnahme
   mitten in der Zahl um, trotz geschuetztem Leerzeichen. Deshalb hier kleiner statt umbrechen. */
@media(max-width:360px){.preview-hero__fig{font-size:1.28rem}}
.preview-hero--price .preview-hero__fig{color:#fff}
@media(max-width:520px){.preview-hero--price{padding-left:14px}}
/* Ruhige Preis-Detailzeilen unter dem Befund, im selben Ink-Panel */
.preview-list--price{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-ink)}
.preview-list{margin:0;padding:0;display:flex;flex-direction:column;gap:0;position:relative}
.preview-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);gap:12px}
.preview-row:last-child{border-bottom:0}
.preview-row dt{color:var(--ink-soft);font-size:.85rem;font-weight:500;margin:0}
.preview-row dd{margin:0;color:var(--ink);font-size:.94rem;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.preview-row--hero{padding:14px 0;border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)!important;margin:6px 0}
.preview-row--hero dt{color:var(--on-ink-soft);font-weight:600}
.preview-row--hero dd{font-family:var(--font-display);font-size:1.4rem;color:var(--brass-bright)!important}
.preview-row--highlight dd{color:var(--brass-bright)!important;font-family:var(--font-display);font-size:1.2rem}
.preview-row--big{padding:12px 0;margin-top:4px}
.preview-row--big dt{font-size:.88rem}
.preview-row--big dd{font-size:1.2rem;color:#fff!important;font-weight:800}
.preview-row--total{padding:16px 0 4px;margin-top:8px;border-top:1.5px solid var(--brass);border-bottom:0!important}
.preview-row--total dt{color:var(--ink-2);font-weight:700}
.preview-row--total dd{color:var(--brass-deep);font-family:var(--font-display);font-size:1.85rem;font-weight:var(--fw-display);letter-spacing:-.01em}
.preview-card--price .preview-card__head h3{color:var(--ink)}
.preview-card--price .preview-card__head{border-bottom-color:var(--line)}
.preview-divider{height:1px;background:var(--line);margin:8px 0}
.preview-warn{margin-top:14px;padding:11px 14px 11px 32px;background:rgba(166,121,46,.14);border:1px solid var(--brass);border-radius:var(--radius);color:var(--brass-bright);font-size:.82rem;line-height:1.5;position:relative}
.preview-warn::before{content:"!";position:absolute;left:12px;top:11px;font-weight:800;color:var(--brass-bright);font-size:.92rem;line-height:1.5}
.preview-card--price{background:var(--surface)!important;border-color:var(--line)!important}
.preview-card--price .preview-row dt{color:var(--ink-soft)}
.preview-card--price .preview-row dd{color:var(--ink)}
.preview-card--price .preview-row{border-color:var(--line)}
.preview-hint{color:var(--ink-soft);font-size:.8rem;line-height:1.6;margin:0}
/* Kill-List gutachten 1: Sidebar-Ledger luftiger — mehr Zeilen-Leading, hellere Divider,
   nur RND (Hero) + Preis (Hero/Total) + Ersparnis (highlight) tragen Gewicht.
   Detailzeilen ruhiger (leichteres dd, gedämpfte Werte). */
.preview-card--result .preview-row{padding:13px 0;border-color:rgba(255,255,255,.08)}
.preview-card--result .preview-row dt{color:var(--on-ink-soft);font-size:.84rem}
.preview-card--result .preview-row dd{color:var(--on-ink);font-weight:500}
/* Schlüsselzeilen behalten volles Gewicht */
.preview-card--result .preview-row--highlight dd{color:var(--brass-bright)!important;font-weight:600}
.preview-card--result .preview-row--big dd{color:#fff!important;font-weight:800}

/* Wizard sticky mini bar */
.wizard__sticky{display:none}
@media(max-width:1100px){
  /* Befund-Strip: 3 Live-Zahlen (RND · Preis · Ersparnis), Messing-Rule oben, immer sichtbar */
  .wizard__sticky{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));background:var(--bg-ink);border:0;border-top:3px solid var(--brass);border-radius:var(--radius);padding:11px 16px;box-shadow:var(--shadow-lg);z-index:60;gap:12px;justify-content:space-between;align-items:stretch}
  .wizard__sticky-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0}
  .wizard__sticky-info + .wizard__sticky-info{padding-left:12px;border-left:1px solid var(--line-ink)}
  .wizard__sticky-info span{font-size:.6rem;color:var(--on-ink-soft);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wizard__sticky-info strong{font-size:1.02rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);font-weight:var(--fw-display)}
  .wizard__sticky-info--save strong{color:var(--brass-bright)}
}

/* Form loading state */
.wizard__form.is-submitting{pointer-events:none}
.wizard__form.is-submitting .wizard__page{opacity:.6}
.wizard__form .btn--primary[type=submit].is-loading{position:relative;color:transparent!important}
.wizard__form .btn--primary[type=submit].is-loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;margin:-10px 0 0 -10px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;top:20px;left:50%;transform:translate(-50%,-40px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 22px;color:var(--ink);font-size:.92rem;box-shadow:var(--shadow-lg);z-index:200;opacity:0;transition:all .35s var(--t);display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.toast--error{border-color:var(--danger);background:var(--danger-tint);color:var(--danger)}
.toast--error::before{content:"!";font-weight:800;font-size:1.1rem}
.toast--success{border-color:var(--success);background:var(--success-tint);color:var(--success)}
.toast--success::before{content:"\2713";font-size:1.1rem}

/* Thanks Page */
.thanks{padding:clamp(72px,10vw,128px) 0;background:var(--bg-soft);text-align:center;position:relative}
.thanks__wrap{max-width:700px;margin:0 auto}
.thanks__icon{width:96px;height:96px;margin:0 auto 32px;border-radius:50%;background:var(--success-tint);border:1.5px solid var(--success);display:flex;align-items:center;justify-content:center;color:var(--success);position:relative;animation:thanksPop .6s cubic-bezier(.34,1.56,.64,1) both}
.thanks__icon svg{width:56px;height:56px}
.thanks__circle{stroke-dasharray:180;stroke-dashoffset:180;animation:drawCircle 1s ease-out .3s forwards}
.thanks__check{stroke-dasharray:45;stroke-dashoffset:45;animation:drawCheck .5s ease-out 1.1s forwards}
@keyframes thanksPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.thanks .section__eyebrow{justify-content:center}
.thanks .section__title{font-family:var(--font-display);font-weight:var(--fw-display);margin-bottom:12px}
.thanks__cards{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:760px;margin:40px auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.thanks__card{background:var(--surface);padding:28px 30px;text-align:left;border-right:1px solid var(--line)}
.thanks__card:last-child{border-right:0}
.thanks__card h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:600}
.thanks__card--hi{background:var(--bg-ink)}
.thanks__card--hi h3{color:var(--brass-bright)}
.thanks__row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-soft);gap:12px;font-size:.9rem;color:var(--ink-soft)}
.thanks__row:last-child{border-bottom:0}
.thanks__row strong{color:var(--ink);font-variant-numeric:tabular-nums}
.thanks__card--hi .thanks__row{color:var(--on-ink-soft);border-color:var(--line-ink)}
.thanks__card--hi .thanks__row strong{color:#fff}
.thanks__row--big{padding:12px 0!important;border-bottom:0!important;border-top:1px solid var(--line-ink);margin-top:4px}
.thanks__row--big strong{font-family:var(--font-display);font-size:1.4rem;font-weight:var(--fw-display);color:var(--brass-bright)!important}
.thanks__total{max-width:520px;margin:36px auto;padding:24px 32px;background:var(--bg-ink);border-radius:var(--radius);display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.thanks__total span{color:var(--on-ink-soft);font-size:.9rem;font-weight:500}
.thanks__total strong{color:#fff;font-family:var(--font-display);font-size:2rem;font-weight:var(--fw-display);font-variant-numeric:tabular-nums}
.thanks__total em{font-size:.76rem;font-style:normal;color:var(--on-ink-soft);flex-basis:100%;text-align:right}
.thanks__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 24px}
.thanks__note{color:var(--muted);font-size:.86rem;line-height:1.6;max-width:520px;margin:0 auto}
.thanks__note a{color:var(--navy-link)}
@media(max-width:680px){.thanks__cards{grid-template-columns:1fr}.thanks__card{border-right:0;border-bottom:1px solid var(--line)}.thanks__card:last-child{border-bottom:0}.thanks__total strong{font-size:1.6rem}}

/* Stub pages */
.stub{min-height:50dvh;display:flex;align-items:center;background:var(--bg-soft);padding:var(--space-section) 0}
.stub .container{text-align:center;max-width:620px;margin:0 auto}
.stub .section__eyebrow{justify-content:center}
.stub h1{font-family:var(--font-display);font-weight:var(--fw-display);margin-bottom:14px}
.stub .btn{margin-top:24px}

/* Long-form prose (Impressum/Datenschutz) — S&C-Editorial, Maß HART gekappt (Kill-List F) */
:root{--legal-measure:42rem} /* ~66ch / 640px Prosaspalte */

/* S&C-Zweispalter: linke §-Index-/Meta-Rail als Gegengewicht, rechts die Prosa.
   Füllt das leere Gutter (impressum rechts / datenschutz links) mit Ruhe (Kill-List impressum/datenschutz). */
/* Nacht-Iter: Rail+Content-Block cappen & zentrieren — sonst klebt alles links und die rechte
   Canvas-Hälfte (~55%) bleibt @1440 tot. Symmetrische Ränder = bewusster Rand statt Leerlauf. */
.legal--railed{display:grid;grid-template-columns:minmax(0,210px) minmax(0,var(--legal-measure));gap:clamp(32px,5vw,80px);align-items:start;max-width:1010px;margin-inline:auto;position:relative}
.legal__rail{position:sticky;top:100px;border-top:1px solid var(--ink);padding-top:18px}
.legal__rail-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.legal__rail-kicker::before{content:"";width:22px;height:2px;background:var(--brass)}
.legal__rail dl{margin:0 0 22px;display:flex;flex-direction:column;gap:0}
.legal__rail dl > div{padding:9px 0;border-bottom:1px solid var(--line-soft)}
.legal__rail dl > div:last-child{border-bottom:0}
.legal__rail dt{margin:0;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.legal__rail dd{margin:2px 0 0;font-size:.86rem;color:var(--ink);line-height:1.45}
/* THEME F: TOC-Rail als nummeriertes Hairline-Ledger mit Rahmen (liest als Index, nicht als Rauschen) */
.legal__rail-index{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);counter-reset:lidx;display:flex;flex-direction:column;overflow:hidden}
.legal__rail-index li{counter-increment:lidx;font-size:.8rem;line-height:1.4;border-bottom:1px solid var(--line-soft)}
.legal__rail-index li:last-child{border-bottom:0}
.legal__rail-index a{display:grid;grid-template-columns:auto 1fr;gap:10px;color:var(--ink-soft);align-items:baseline;font-size:13px;font-weight:500;letter-spacing:.005em;text-transform:none;line-height:1.45;padding:9px 12px}
.legal__rail-index a::before{content:counter(lidx,decimal-leading-zero);font-weight:700;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:0}
.legal__rail-index a:hover{color:var(--brass-deep);background:var(--surface-soft)}
.legal--railed .legal__head,.legal--railed .prose,.legal--railed .legal__body{max-width:var(--legal-measure)}
.legal--railed .legal__foot-rule{max-width:var(--legal-measure)}
@media(max-width:880px){
  .legal--railed{grid-template-columns:1fr;gap:clamp(28px,4vw,36px);padding-left:clamp(18px,5vw,32px);padding-right:clamp(18px,5vw,32px)}
  .legal__rail{position:static;top:auto}
  .legal__rail-index{display:none}
  .legal__head .section__title{font-size:clamp(2rem,8vw,2.8rem)}
}
/* It-7 (Kill-List impressum/datenschutz, mobile 6.5): Rail stapelt am Handy ÜBER der H1
   → „Impressum"/„Datenschutzerklärung" rutscht unter den Fold. Reihenfolge umkehren:
   H1/Headline ZUERST (order), Rail/Meta darunter, Sprungnav am Handy aus. Display-only. */
@media(max-width:880px){
  .legal--railed{display:flex;flex-direction:column;gap:clamp(24px,5vw,34px)}
  .legal--railed .legal__body{order:1}
  .legal--railed .legal__rail{order:2;border-top:1px solid var(--line);padding-top:18px;margin-top:clamp(8px,2vw,16px)}
  .legal__rail-index{display:none}
  /* Erster Fold = Kicker + H1: Masthead-Rule darf nicht zwischen H1 und Lead springen */
  .legal--railed .legal__head{border-bottom:0;padding-bottom:0;margin-bottom:8px}
}
@media(max-width:768px){
  /* Lange Rechtstexte am Handy: 16px Lesemaß, ~1.6 Leading */
  .legal--railed .legal p,.legal--railed .prose p,
  .legal--railed .legal li,.legal--railed .prose li{font-size:16px;line-height:1.6}
  .legal--railed .legal__head-lead{font-size:1.06rem!important;line-height:1.55!important}
  /* Abschnitts-Hairlines sichtbarer (1.5px) + mehr Top-Margin je Heading */
  .legal--railed .legal h2,.legal--railed .prose h2{border-top-width:1.5px;padding-top:clamp(28px,7vw,38px)}
  .legal--railed .legal__masthead-rule{border-top-width:1.5px;margin-bottom:clamp(22px,5vw,30px)}
}
@media(max-width:560px){
  .legal--railed .legal__head .section__title{font-size:clamp(2.1rem,9.5vw,2.9rem);line-height:1.02;hyphens:none;-webkit-hyphens:none;text-wrap:balance}
  /* Rail-Meta-Zeilen am Handy als ruhige Tap-freundliche Liste */
  .legal--railed .legal__rail dl > div{padding:11px 0}
  /* It-7: doppelter Warm-CTA am Handy auf legal-Seiten → schwebende Leiste auf EINEN
     primären reduzieren (Call-Button raus), zu viel Warm-Akzent ≤360. Scope via :has. */
  main:has(.legal--railed) ~ .mobile-cta .mobile-cta__btn--call{display:none}
}
/* THEME F: H1-Floor @390 — Einzelwort „Datenschutzerklärung" bricht NIE mitten im Wort */
@media(max-width:400px){
  .legal--railed .legal__head .section__title{font-size:clamp(2rem,9vw,2.4rem)}
  /* Kontaktzeilen-Lesbarkeit: ≥44px Tap, 1.6 Leading, Brass nur auf dem Link */
  .legal p a{display:inline-flex;align-items:center;min-height:44px}
  .legal p{line-height:1.6}
}

/* THEME F: H1 sitzt sonst verwaist in totem Band → Section-Top-Padding der Legal-Seiten reduzieren */
section.section:has(.legal--railed){padding-top:clamp(34px,4.5vw,60px)}
.legal__head{max-width:var(--legal-measure);padding-bottom:clamp(28px,3.4vw,40px);border-bottom:1px solid var(--ink);margin-bottom:clamp(40px,5vw,60px)}
/* It-3 impressum/datenschutz: H1 ~1.3× dominanter, Kicker-zu-H1-Gap straffen */
.legal__head .section__eyebrow{margin-bottom:14px}
.legal__head .section__title{margin-bottom:0;font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:1.0;letter-spacing:-.02em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
/* R4-Fix: H1 dominant, aber Einzelwort "Impressum"/"Datenschutzerklärung" darf NIE mitten brechen */
.legal--impressum .legal__head .section__title{font-size:clamp(2.8rem,5vw,4rem)}
/* Kill-List impressum 2: linke Rail — Anchor-Nav weiter demoten (klein/muted), Meta ruhig */
.legal--impressum .legal__rail dd{color:var(--ink-soft);font-size:.82rem}
/* Lead differenziert: größer als Body, ink-2, klarer H1→Lead-Abstand (Kill-List datenschutz 2) */
.legal__head-lead{font-size:1.22rem!important;color:var(--ink-2)!important;line-height:1.55!important;max-width:46rem;margin:clamp(28px,4vw,52px) 0 0!important;font-family:var(--font-body)!important;font-style:normal!important}
.prose,.legal{max-width:var(--legal-measure)}
/* THEME F: Section-Headings auf Spectral 500, größer (≥ fs-h3), Major-Section = kräftige
   full-bleed Ink-Hairline. Titel sitzt nicht mehr flach gegen die H1.
   WICHTIG (visual-only): datenschutz trägt die Nummern bereits IM TEXT ("1. …") → KEIN CSS-Counter
   dort (sonst Doppel-Nummerierung). Nur impressum (Titel ohne Nummer) bekommt einen Brass-Index. */
.prose h2,.legal h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.55rem,2.5vw,2rem);margin:clamp(20px,2.6vw,30px) 0 14px;padding-top:clamp(38px,4.6vw,54px);border-top:1px solid var(--ink);color:var(--ink);position:relative;letter-spacing:-.01em;text-align:left;max-width:var(--legal-measure);line-height:1.14}
/* Neutraler Hairline-Tick für ALLE Legal-Headings (impressum wie datenschutz identisch ruhig).
   Kein CSS-Counter mehr: der floatete als lose Brass-Hochzahl über dem Titel (Regression 8→7.5);
   die Nummerierung trägt die TOC-Rail (01–0n). */
.prose h2::before,.legal h2::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--ink-soft)}
.legal h2:first-of-type{padding-top:0;border-top:0}
.legal h2:first-of-type::before{display:none}
.legal--impressum .legal__body h2:first-of-type::before{display:inline-block}
/* THEME F: EINE Atempause mittig gegen den monotonen Grau-Scroll (display-only, kein Markup).
   Mid-Section bekommt mehr Luft + eine Brass-Akzent-Haarlinie als bewussten Tonwechsel-Beat.
   datenschutz: nach Sektion 5 · impressum: mittig. Reiner Rhythmus, kein neuer Inhalt. */
.section--legal-tight .legal__body h2:nth-of-type(5),
.legal--impressum .legal__body h2:nth-of-type(4){
  margin-top:clamp(20px,3vw,40px);padding-top:clamp(52px,6vw,76px);border-top:2px solid var(--ink)
}
.section--legal-tight .legal__body h2:nth-of-type(5)::after,
.legal--impressum .legal__body h2:nth-of-type(4)::after{
  content:"";position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--brass)
}
.prose h3,.legal h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.18rem;margin:28px 0 10px;color:var(--ink);text-align:left;max-width:34ch;line-height:1.25}
.prose p,.legal p{line-height:1.6;color:var(--ink-soft);font-size:.96rem;max-width:var(--legal-measure)}
/* Datenschutz: Hero-Top-Padding ~25% runter (Kill-List datenschutz 2) */
.section--legal-tight{padding-top:clamp(40px,6vw,78px)}
/* Datenschutz-Tiefe (Bug #4): TOC-Rail als getöntes, messing-gekantetes Kontrastfeld
   gegen die lange Prosaspalte geschichtet — bewusstes Tiefe-Device statt Single-Plane.
   Sticky (Basis-Regel) bleibt: die Index-Karte begleitet den Scroll. Naked-Regel NACH den
   Mobile-Media-Queries platziert (FEHLER-019) → gilt bewusst auf allen Viewports. */
.section--legal-tight .legal__rail{
  background:var(--surface-soft);
  border-top:2px solid var(--brass);
  border-radius:var(--radius);
  padding:clamp(18px,1.8vw,24px) clamp(16px,1.6vw,20px) clamp(22px,2.2vw,26px);
  box-shadow:var(--shadow-md)}
.section--legal-tight .legal__rail-index{background:var(--bg)}
.legal p strong{color:var(--ink-2)}
/* Nacht-Iter: Legal-Links nicht systemblau — Ink mit Messing-Underline auf Hover (Identität) */
.legal a,.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:var(--t)}
.legal a:hover,.prose a:hover{color:var(--brass-deep);text-decoration-color:var(--brass)}
/* It-3 impressum: Body-/E-Mail-Links navy-strukturell (Brass nur Kicker-Index) */
.legal p a{color:var(--navy-link);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.legal p a:hover{color:var(--ink);text-decoration-color:var(--navy-link)}
/* Hairline + Spacing vor dem Ink-Footer */
.legal__foot-rule{border:0;border-top:1px solid var(--line);max-width:var(--legal-measure);margin:clamp(40px,5vw,64px) 0 0}
.legal--railed .legal__foot-rule{max-width:none}
/* Vollbreite-Hairline unter dem Masthead (Kill-List impressum 2) */
.legal__masthead-rule{border:0;border-top:1px solid var(--ink);margin:0 0 clamp(32px,4vw,48px)}
.legal--railed .legal__head{border-bottom:0;padding-bottom:clamp(10px,2vw,18px);margin-bottom:0}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* === HÄRTUNG: ein einziger Tastatur-Fokus-Ring sitewide (Messing) === */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0}
.hero-tile:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.type-card input:focus-visible + .type-card__body{outline:2px solid var(--brass);outline-offset:2px}
.faq__item summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.faq__item summary:focus:not(:focus-visible){outline:0}
.calc-back:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.calc-chip:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.thanks__circle,.thanks__check{stroke-dashoffset:0!important}}

/* =========================================================
   RECHNER — Kostenlose Ersteinschätzung (Schnellcheck)
   Picker + Teaser/Unlock + Gauge — Logik 1:1, Optik neu
   ========================================================= */
/* overflow-x:clip statt hidden — clip erzeugt KEINEN Scroll-Container und zwingt die
   andere Achse NICHT auf auto; damit bleibt position:sticky (Rechner-Befund, Wizard-Aside,
   Legal-TOC) funktionsfähig. hidden brach zuvor jedes sticky auf der ganzen Seite. */
html,body{overflow-x:clip;max-width:100vw}
body{-webkit-tap-highlight-color:rgba(166,121,46,.14)}

.calc{padding:clamp(28px,4vw,56px) 0 clamp(56px,8vw,96px);background:var(--bg);min-height:70vh}
/* Asymmetrisch links-gebunden + rechte Befund-Spalte (Kill-List C) */
.calc__wrap{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,32px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,320px);
  grid-template-areas:"intro aside" "card aside";
  column-gap:clamp(32px,5vw,72px);row-gap:clamp(20px,2.6vw,30px);align-items:start}
.calc__intro{grid-area:intro;margin:0;transition:opacity .4s ease}
.calc__card{grid-area:card}
.calc__aside{grid-area:aside}
.calc.is-result .calc__intro,.calc.is-result .calc__aside{display:none}
.calc.is-result .calc__wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"card";max-width:680px}
.calc.is-result{padding-top:clamp(24px,3vw,48px)}
.calc.is-result .calc__card{max-width:680px;margin:0 auto}
@media(max-width:880px){
  /* Picker direkt unter Intro in den Fold ziehen, Befund-Aside darunter */
  /* Nacht-Fix: eigene "assure"-Zeile — .calc__assure hatte keine grid-area (auto) und überlappte
     im Einspalter den Befund-Aside (DIN/BMF-Strip kollidierte mit der Notiz, unlesbar). */
  .calc__wrap{grid-template-columns:1fr;grid-template-areas:"intro" "card" "aside" "assure";max-width:680px}
  .calc__assure{grid-area:assure}
  .calc__intro{margin-bottom:4px}
  /* Kill-List rechner: Befund-Karte @≤880 mit Hairline-Top-Rule an den Fluss binden (nicht abgehängt) */
  .calc__aside{top:auto;margin-top:clamp(20px,4vw,28px)}
}

/* Befund-Aside als Ink-Karte mit weißer Display-Euro-Zahl, volle Rail-Höhe (Kill-List rechner 2) */
.calc__aside{background:var(--bg-ink);border-radius:var(--radius);padding:clamp(24px,2.4vw,30px);position:relative;overflow:hidden;border-top:0}
.calc__aside::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brass)}
.calc__aside-kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-kicker);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:14px}
.calc__aside-kicker::before{content:"";width:24px;height:2px;background:var(--brass-bright)}
/* It-3 rechner: Befund-Karten-Body kontrastreicher (--on-ink, +1px) */
.calc__aside-intro{font-size:.92rem;color:var(--on-ink);line-height:1.6;margin:0 0 18px}
.calc__aside-ledger{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line-ink)}
.calc__aside-ledger div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-ink)}
.calc__aside-ledger dt{font-size:.86rem;color:var(--on-ink);margin:0;line-height:1.4}
.calc__aside-ledger dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700;color:#fff;font-size:.94rem;white-space:nowrap}
.calc__aside-row--accent{border-bottom:0!important;padding-top:16px!important;align-items:center}
.calc__aside-row--accent dt{color:var(--on-ink-soft);font-weight:600}
/* Rechner-Befund-Zahl (≈2.520 €/a) als entscheidende Display-Ziffer dominanter (~1.6×) */
/* Nacht-Fix: kleiner gedeckelt, damit „≈ 2.520 €/a" in der schmalen Befund-Spalte nicht überläuft (€ wurde abgeschnitten) */
.calc__aside-row--accent dd{font-family:var(--font-display);font-size:clamp(2.15rem,2.6vw,2.6rem);color:var(--brass-bright);font-weight:var(--fw-display);line-height:.98;letter-spacing:-.02em;white-space:nowrap}
.calc__aside-note{font-size:.72rem;color:var(--on-ink-soft);opacity:.8;margin:14px 0 0;line-height:1.5}
.calc__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.6rem,6.2vw,4.4rem);letter-spacing:-.015em;line-height:.98;margin:10px 0 18px;text-wrap:balance}
.calc__title em{color:inherit;font-style:normal}
.calc__sub{font-size:clamp(1.02rem,1.3vw,1.18rem);color:var(--ink-soft);max-width:58ch;line-height:1.6;margin:0}
.calc__sub strong{color:var(--ink);font-weight:600}
/* Trust-Reihe → ruhige Hairline-Ledger-Zeile (statt 3 bunten Häkchen) */
/* USP-Reihe = EINE ruhige Hairline-Kicker-Zeile (Kill-List rechner 4), kein Pill/Häkchen-Trio */
.calc__usp{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(18px,3vw,30px);margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.calc__usp li{display:inline-flex;align-items:baseline;gap:0;font-size:.78rem;font-weight:700;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
/* Kill-List rechner: Assurance-Reihe mit dünnen vertikalen Hairline-Trennern rhythmisieren */
.calc__usp li:not(:first-child)::before{content:"";display:inline-block;align-self:center;width:1px;height:13px;background:var(--line);opacity:1;transform:none;margin-right:clamp(18px,3vw,30px);flex:0 0 auto}
.calc__usp svg{display:none}
/* Nacht-Iter: USP-Reihe @≤480 sauber stapeln statt hängendem 2-Zeilen-Umbruch ("Keine Verpflichtung") */
@media(max-width:480px){.calc__usp{flex-direction:column;gap:7px;align-items:flex-start}.calc__usp li:not(:first-child)::before{display:none}}
/* It-3 rechner: disziplinierter Stripe-Doppel-CTA unter der Assurance-Zeile (primär + ghost) */
.calc__intro-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(22px,3vw,30px)}
.calc__intro-cta .btn{flex:0 0 auto}
@media(max-width:880px){.calc__intro-cta .btn{flex:1 1 auto;justify-content:center}}

/* Card — gehärtete Papier-Plate: warmes Papier + Messing-Auftakt links + Ink-Haarlinie oben
   + dezenter Lift-Schatten + feine Grain-Textur (killt weiß-auf-weiß, gibt Tiefe). */
.calc__card{background:var(--surface-soft);border:1px solid var(--line);border-top:1.5px solid var(--ink);border-left:3px solid var(--brass);border-radius:var(--radius);box-shadow:0 22px 48px -34px rgba(13,27,42,.34);padding:clamp(24px,3.5vw,44px);position:relative;isolation:isolate}
.calc__card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:150px;opacity:.22;mix-blend-mode:multiply;border-radius:inherit}
.calc__card > .calc__progress,.calc__card > .calc__stage{position:relative;z-index:1}
.calc__progress{margin-bottom:clamp(24px,3vw,32px)}
.calc__bar{height:3px;background:var(--line);overflow:hidden}
.calc__bar-fill{height:100%;width:0;background:var(--brass);transition:width .5s cubic-bezier(.2,.7,.25,1)}
.calc__meta{display:flex;justify-content:flex-end;align-items:center;margin-top:11px;font-size:.82rem}
/* „IMMOBILIENART"-Label droppen — JS-getrieben, im DOM behalten */
.calc__meta span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.calc__meta span:last-child{color:var(--brass-deep);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:.78rem;text-transform:uppercase}

/* THEME A (rechner): Kicker-Strich + Chip-Index entsättigt auf Ink — Brass bleibt
   above-fold NUR auf CTA + Befund-Zahl (Aside-Ergebnis). Scoped, regressiert keine PASS-Seite. */
.calc .calc-step__kicker::before,.calc .calc__progress + .calc-step .calc-step__kicker::before{background:var(--ink-soft)}
.calc-chip__idx{color:var(--ink-2)}
.calc-chip:hover .calc-chip__idx,.calc-chip.is-selected .calc-chip__idx,
.calc-chip--type:hover .calc-chip__idx,.calc-chip--type.is-selected .calc-chip__idx{color:var(--brass-deep)}
.calc__meta span:last-child{color:var(--ink-2)}

/* Steps */
.calc-step{display:none}
.calc-step.is-active{display:block;animation:calcIn .35s cubic-bezier(.2,.7,.25,1)}
@keyframes calcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.calc-step__head{margin-bottom:24px}
.calc-step__kicker{margin-bottom:14px}
.calc-step__q{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.01em;line-height:1.12;margin:0;color:var(--ink)}

/* Chips / options */
.calc-opts{display:flex;flex-direction:column;gap:10px}
.calc-opts--type{display:grid;grid-template-columns:1fr;gap:10px}
.calc-chip{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;cursor:pointer;transition:transform .15s ease,border-color var(--t),background var(--t);font-family:inherit;min-height:66px}
.calc-chip:hover{border-color:var(--brass);background:var(--surface-soft);transform:translateY(-1px)}
.calc-chip:active{transform:translateY(0)}
.calc-chip.is-selected{border-color:var(--brass);background:var(--brass-tint);box-shadow:inset 0 0 0 1px var(--brass)}
.calc-chip__ico{width:34px;height:34px;flex-shrink:0;border-radius:0;background:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;transition:var(--t)}
.calc-chip__ico svg{width:30px;height:30px}
.calc-chip:hover .calc-chip__ico,.calc-chip.is-selected .calc-chip__ico{background:none;color:var(--brass-deep)}
/* Type-Chip Index-Ziffer statt dünnem Icon (Manual.co-Kartenmasse, Kill-List rechner 1) */
.calc-chip__idx{flex-shrink:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.4rem;color:var(--brass);font-variant-numeric:tabular-nums;line-height:1;width:34px;text-align:left;transition:color var(--t)}
.calc-chip--type{min-height:84px;align-items:center;padding:20px}
.calc-chip--type .calc-chip__main{gap:4px}
.calc-chip--type .calc-chip__main strong{font-size:1.08rem}
.calc-chip--type .calc-chip__main small{font-size:.84rem}
.calc-chip--type:hover .calc-chip__idx,.calc-chip--type.is-selected .calc-chip__idx{color:var(--brass-deep)}
.calc-chip__dot{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--bg-soft);border:1.5px solid var(--line);color:var(--brass-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.86rem;transition:var(--t);font-variant-numeric:tabular-nums}
.calc-chip:hover .calc-chip__dot,.calc-chip.is-selected .calc-chip__dot{background:var(--brass);border-color:var(--brass);color:#fff}
.calc-chip__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.calc-chip__main strong{font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.25}
.calc-chip__main small{font-size:.82rem;color:var(--muted)}
.calc-chip__check{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:var(--t)}
.calc-chip__check svg{width:15px;height:15px}
.calc-chip.is-selected .calc-chip__check{opacity:1;transform:scale(1)}
.calc-chip--opt .calc-chip__check{opacity:1;transform:none;background:transparent;border:1.5px solid var(--line);color:transparent}
.calc-chip--opt:hover .calc-chip__check{border-color:var(--brass)}
.calc-chip--opt.is-selected .calc-chip__check{background:var(--brass);border-color:var(--brass);color:#fff}

/* =========== CALC-CHIP --type → Foto-Karte (gleiche Sprache wie Home-Picker) =========== */
.calc-opts--type{grid-template-columns:repeat(2,1fr);gap:12px}
/* 5 Typen: Waisen-Tile in letzter Reihe vermeiden — letztes Tile spannt 2 Spalten (Kill-List rechner 5) */
.calc-opts--type .calc-chip--type:nth-child(5):last-child{grid-column:1/-1}
.calc-opts--type .calc-chip--type:nth-child(5):last-child .calc-chip__media{aspect-ratio:21/9}
@media(min-width:720px){
  .calc-opts--type{grid-template-columns:repeat(3,1fr)}
  /* bei 3-up sitzt das 5. Tile in Reihe 2 (4,5) — kein Span nötig */
  .calc-opts--type .calc-chip--type:nth-child(5):last-child{grid-column:auto}
  .calc-opts--type .calc-chip--type:nth-child(5):last-child .calc-chip__media{aspect-ratio:4/3}
}
.calc-chip--photo{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;overflow:hidden;position:relative}
.calc-chip--photo .calc-chip__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-soft)}
.calc-chip--photo .calc-chip__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.25,1);filter:saturate(.96)}
.calc-chip--photo:hover .calc-chip__media img{transform:scale(1.05)}
/* It-3 rechner: Scrim deutlich aufgehellt (Fotos nicht mehr matschig), Tontrennung erhöht */
.calc-chip--photo .calc-chip__media img{filter:saturate(1.02) contrast(1.03) brightness(1.02)}
.calc-chip--photo .calc-chip__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,0) 62%,rgba(13,27,42,.22) 100%);pointer-events:none}
/* It-3 rechner: Deko-Haus-Badge entfernt — Foto + Brass-Index tragen das Tile (Refusal: keine Deko-Icons) */
.calc-chip--photo .calc-chip__badge{display:none!important}
.calc-chip--photo .calc-chip__idx{position:absolute;top:8px;right:12px;z-index:2;width:auto;color:#fff;text-shadow:0 1px 6px rgba(13,27,42,.5);font-size:1.15rem}
.calc-chip--photo .calc-chip__main{flex:none;padding:15px 16px 16px;gap:3px}
.calc-chip--photo .calc-chip__main strong{font-size:1.08rem}
/* It-3 rechner: Tile-Subline sichtbarer — ink-soft, mehr Tracking */
.calc-chip--photo .calc-chip__main small{font-size:.84rem;color:var(--ink-soft);font-weight:500;letter-spacing:.01em;line-height:1.35}
.calc-chip--photo .calc-chip__check{position:absolute;top:8px;left:8px;z-index:2}
.calc-chip--photo.is-selected{box-shadow:inset 0 0 0 2px var(--brass);background:var(--surface)}
.calc-chip--photo.is-selected .calc-chip__main{background:var(--brass-tint)}

/* Step nav */
.calc-step__nav{margin-top:24px}
.calc-step__nav--split{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.calc-back{background:none;border:0;color:var(--ink-soft);font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;padding:8px 4px;transition:var(--t)}
.calc-back:hover{color:var(--brass-deep)}

/* Eckdaten fields */
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc-field{display:flex;flex-direction:column;gap:7px}
.calc-field__label{font-size:.88rem;font-weight:600;color:var(--ink)}
.calc-field__label em{color:var(--danger);font-style:normal}
.calc-field input{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 15px;font:inherit;font-size:16px;color:var(--ink);transition:var(--t);-webkit-appearance:none;appearance:none}
.calc-field input:focus{outline:0;border-color:var(--navy-link);box-shadow:0 0 0 3px rgba(35,69,110,.14)}
.calc-field input.is-invalid{border-color:var(--danger);background:var(--danger-tint)}
.calc-field__hint{font-size:.8rem;color:var(--muted)}
.calc-field__hint.is-error{color:var(--danger)}
@media(max-width:520px){.calc-fields{grid-template-columns:1fr}}

/* ===== Result ===== */
.calc-result__head{margin-bottom:24px}
.calc-result__kicker{margin-bottom:12px}
.calc-result__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.01em;margin:0;color:var(--ink)}

.calc-result__rnd{display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(24px,3vw,34px);background:var(--bg-ink);border:0;border-radius:var(--radius);margin-bottom:18px}
.calc-gauge{position:relative;width:clamp(150px,20vw,180px);height:clamp(150px,20vw,180px);flex-shrink:0}
.calc-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.calc-gauge__track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:11}
.calc-gauge__arc{fill:none;stroke:var(--brass-bright);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.25,1)}
.calc-gauge__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.calc-gauge__center strong{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.2rem);font-weight:var(--fw-display);color:#fff;line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.calc-gauge__center span{font-size:.66rem;font-weight:700;color:var(--brass-bright);text-transform:uppercase;letter-spacing:.12em;margin-top:6px}
.calc-result__rnd-text{flex:1;min-width:0}
.calc-result__badge{display:inline-block;font-size:.74rem;font-weight:700;color:var(--brass-bright);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.calc-result__rnd-text p{margin:0 0 8px;font-size:1.05rem;color:#fff;line-height:1.45}
.calc-result__rnd-text p strong{color:var(--brass-bright)}
.calc-result__hint{font-size:.88rem!important;color:var(--on-ink-soft)!important;line-height:1.5}
.calc-result__hint strong{color:#fff!important}
@media(max-width:560px){.calc-result__rnd{flex-direction:column;text-align:center;gap:18px;padding:26px 22px}}

/* Reveal / locked teaser */
.calc-reveal{position:relative}
.calc-reveal__grid{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}
.calc-reveal__sub{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-reveal__stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.calc-reveal__label{font-size:.8rem;color:var(--ink-soft);font-weight:500}
.calc-reveal__stat strong{font-family:var(--font-display);font-size:1.3rem;font-weight:var(--fw-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.calc-reveal__sub .calc-reveal__label{font-size:.78rem;color:var(--muted)}
.calc-reveal__stat--hero{padding:26px 28px;background:var(--brass-tint);border-color:var(--brass)}
.calc-reveal__stat--hero .calc-reveal__label{color:var(--brass-deep);font-weight:700;font-size:.8rem;letter-spacing:.02em;padding-right:118px}
.calc-reveal__stat--hero strong{color:var(--brass-deep);font-family:var(--font-display);font-size:clamp(2.6rem,6.5vw,3.6rem);font-weight:var(--fw-display);line-height:1}
/* lock affordance */
.calc-lock{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--brass-deep);background:rgba(255,255,255,.85);border:1px solid var(--brass);padding:5px 10px 5px 8px;border-radius:var(--radius-pill);transition:opacity .4s ease}
.calc-lock svg{width:14px;height:14px}
.calc-reveal.is-unlocked .calc-lock{opacity:0;pointer-events:none}
[data-lock]{transition:filter .6s ease,color .6s ease}
.calc-reveal:not(.is-unlocked) [data-lock]{filter:blur(7px);color:var(--ink-soft);user-select:none;pointer-events:none}
.calc-reveal:not(.is-unlocked) .calc-reveal__stat--hero [data-lock]{color:var(--brass-deep)}
[data-lock].is-revealed{animation:lockPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes lockPop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(max-width:520px){.calc-reveal__sub{grid-template-columns:1fr}}

/* Unlock form — Messing-CTA statt blau */
.calc-unlock{margin-top:18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,28px)}
.calc-unlock__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.calc-unlock__lockico{width:42px;height:42px;flex-shrink:0;border-radius:var(--radius);background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center}
.calc-unlock__lockico svg{width:22px;height:22px}
.calc-unlock__head strong{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:3px;font-family:var(--font-display);font-weight:var(--fw-display)}
.calc-unlock__head small{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.calc-unlock__fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.calc-unlock__fields .calc-field:first-child{grid-column:1/-1}
.calc-consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px;font-size:.86rem;color:var(--ink-soft);line-height:1.45;cursor:pointer}
.calc-consent input{flex-shrink:0;margin-top:2px;width:18px;height:18px;accent-color:var(--brass);cursor:pointer}
.calc-consent input.is-invalid{outline:2px solid var(--danger);outline-offset:2px;border-radius:3px}
.calc-consent a{color:var(--navy-link);text-decoration:underline}
.calc-consent em{color:var(--danger);font-style:normal}
.calc-unlock__btn{width:100%;justify-content:center}
.calc-unlock__btn.is-loading{position:relative;color:transparent!important}
.calc-unlock__btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;margin:-10px 0 0 -10px;animation:spin .7s linear infinite}
.calc-unlock__trust{text-align:center;font-size:.78rem;color:var(--muted);margin:14px 0 0}
@media(max-width:520px){.calc-unlock__fields{grid-template-columns:1fr}}

/* Done / success */
.calc-done{animation:calcIn .4s ease-out}
.calc-done__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.calc-done__icon{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--success-tint);border:1.5px solid var(--success);color:var(--success);display:flex;align-items:center;justify-content:center}
.calc-done__icon svg{width:22px;height:22px}
.calc-done h3{font-family:var(--font-display);font-size:1.4rem;font-weight:var(--fw-display);color:var(--ink);margin:0}
.calc-done p{font-size:1rem;color:var(--ink-soft);max-width:48ch;margin:0 0 22px;line-height:1.55}
.calc-done p strong{color:var(--ink)}
.calc-done__ctas{display:flex;gap:clamp(14px,2vw,22px);flex-wrap:wrap;align-items:center;margin-bottom:18px}
.calc-done__note{font-size:.8rem!important;color:var(--muted)!important;max-width:60ch;margin:0!important;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:520px){.calc-done__ctas .btn{width:100%}.calc-done__ctas .btn-link{align-self:flex-start}}

/* Assurance row — Hairline-Meta-Ledger, Icons raus (Kill-List B) */
.calc__assure{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(18px,3vw,30px);margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.calc__assure-item{display:inline-flex;align-items:baseline;gap:0;font-size:.78rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;position:relative}
.calc__assure-item:not(:first-child)::before{content:"";display:inline-block;width:4px;height:4px;background:var(--ink-soft);opacity:.5;transform:rotate(45deg);margin-right:clamp(18px,3vw,30px)}
.calc__assure-item svg{display:none}
@media(max-width:520px){.calc__assure{gap:8px 16px}.calc__assure-item{font-size:.74rem}.calc__assure-item:not(:first-child)::before{margin-right:16px}}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:820px){
  .container{padding:0 20px}
  .section{padding:clamp(48px,8vw,72px) 0}
  .section__head{margin:0 0 36px}
  .section__lead{font-size:.98rem}
  .topbar{padding:8px 0;font-size:.78rem}
  .topbar__wrap{justify-content:center;gap:8px}
  .nav__wrap{padding:13px 0;gap:12px}
  .nav__logo-text{overflow:hidden;text-overflow:ellipsis}
  .hero{padding:36px 0 44px}
  .hero__title{line-height:1.04}
  .hero__sub{font-size:1rem}
  .statement__grid,.expert__grid,.example__grid{gap:32px}
  .video-section{padding:48px 0}
  .footer{padding:48px 0 20px}
  .footer__grid{gap:28px;margin-bottom:28px}
  .footer__bottom{flex-direction:column;text-align:center;gap:10px;font-size:.76rem}
  .btn{padding:13px 22px;font-size:.94rem;min-height:48px}
  .btn--large{padding:14px 26px;font-size:.98rem}
  a,button,summary,label{min-height:44px}
  .nav__menu a{min-height:48px}
  .back-to-top{right:14px;bottom:84px;width:42px;height:42px}
  .wizard{padding:24px 0 140px}
  .wizard__layout{max-width:100%;gap:20px}
  .wizard__header{margin:0 0 28px}
  .wizard__page{padding:0 18px 22px}
  .field{margin-bottom:16px}
  .field-row{gap:14px;margin-bottom:16px}
  .field input[type=text],.field input[type=number],.field input[type=email],.field input[type=tel],.field input[type=date],.field select,.field textarea{font-size:16px;padding:14px;min-height:48px}
  .type-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .type-card__body{padding:14px 12px;min-height:88px}
  .upload-list{grid-template-columns:1fr;gap:12px}
  .wizard__actions{flex-direction:column-reverse;align-items:stretch;gap:10px;margin-top:24px;padding-top:20px}
  .wizard__actions .btn{width:100%;justify-content:center}
  .wizard__actions--first{flex-direction:column;align-items:stretch}
  .wizard__actions--first .btn-link{text-align:center;width:auto}
}

@media(max-width:760px){
  .topbar{display:none}
}

@media(max-width:560px){
  .container{padding:0 18px}
  .hero{padding:28px 0 36px}
  .section{padding:48px 0}
  .section__head{margin-bottom:28px}
  .price-card{padding:28px 22px}
  .expert__seal,.statement__seal{position:static;margin:16px auto 0;max-width:340px;border-radius:var(--radius)}
  .thanks{padding:64px 0}
  .thanks__icon{width:80px;height:80px;margin-bottom:24px}
  .thanks__icon svg{width:46px;height:46px}
  .thanks__total{padding:20px 22px}
  .mobile-cta{left:10px;right:10px;bottom:10px;gap:8px}
  .mobile-cta__btn{padding:14px 16px;font-size:.92rem;min-height:52px}
  .mobile-cta__btn--call{width:52px}
  body.has-sticky-cta{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .footer__grid{grid-template-columns:1fr;gap:32px}
}

@media(max-width:380px){
  .container{padding:0 16px}
  .nav__logo-text{font-size:.92rem}
  .btn{padding:12px 18px;font-size:.9rem}
}

/* =====================================================================
   SPEC 3 — Mobile-Kompaktierung (Scroll-Länge ≤680px), am Ende für Vorrang
   ===================================================================== */
@media(max-width:680px){
  /* Hero-Gesamtpadding straffen (gilt für Home + alle pages.json-Seiten) */
  .hero{padding:clamp(32px,7vw,52px) 0 clamp(28px,6vw,44px)}
  /* Hero-Foto niedriger */
  .hero__figure img{height:clamp(240px,48vw,300px);object-position:50% 32%}
  /* Sektions-Kopf enger an den Inhalt */
  .section__head{margin-bottom:clamp(22px,4vw,30px)}
  .section__lead{font-size:1rem;line-height:1.55}
  .section__title{margin-bottom:12px}
  /* Statement-Foto deckeln, Grid enger */
  .statement__media img{height:clamp(210px,48vw,260px)}
  .statement__grid{gap:24px}
  .statement__points{gap:8px;margin-bottom:22px}
  .statement__points li{font-size:.92rem}
  .expert__points{gap:9px;margin-bottom:24px}
  .expert__points li{font-size:.94rem}
  /* Prozess-Schritte dichter packen */
  .process__step{padding:18px 0;gap:16px;align-items:start}
  .process__num{font-size:1.9rem;line-height:.9}
  .process__step h3{font-size:1.12rem;margin-bottom:4px}
  .process__step p{font-size:.92rem}
  /* CTA-Band entschärfen */
  .cta-band{padding:clamp(34px,7vw,48px) 0}
  .cta-band h2{font-size:clamp(1.6rem,7vw,2.1rem);margin-bottom:12px}
  .cta-band--lg h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .cta-band p{font-size:.98rem;margin-bottom:22px}
  .cta-band__ctas .btn{flex:1 1 100%}
  .cta-footer-gap{height:clamp(28px,6vw,44px)}
  /* Preis-Ledger-Zeilen dichter */
  .price-card{padding:16px 0}
  .price-card__amount{margin-top:8px}
  .price-card__list{margin-top:10px;gap:5px 14px}
  .price-card .btn{margin-top:12px}
}

/* Picker-Kacheln: bis 480px 2-spaltig statt voll zu stapeln (kürzt Picker-Sektion).
   Foto-Variante bleibt vertikale Foto-Karte (NICHT die Zeilen-Variante). */
@media(max-width:600px){
  .hero__picker-grid{grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:380px){
  .hero__picker-grid{grid-template-columns:1fr;gap:8px}
}

/* === Critic-Fix 2026-06-05 (Picker-Foto-Karten: Titel-Umbruch + gleiche Hoehen + Index-Kontrast) === */
/* Lange Komposita (Eigentumswohnung/Mehrfamilienhaus) duerfen umbrechen statt am Kartenrand zu clippen */
.hero-tile__text strong,
.calc-chip--photo .calc-chip__main strong,
.type-card--photo .type-card__row strong{overflow-wrap:break-word;hyphens:manual;white-space:normal}
/* Gleiche Kartenhoehen trotz 1- vs 2-zeiliger Titel */
.calc-chip--photo .calc-chip__main{min-height:60px;justify-content:center}
.type-card--photo .type-card__row{min-height:50px}
.hero-tile--photo .hero-tile__text{min-height:46px}
/* Index als Ink-Chip statt nackt-weiss auf hellem Himmel (Kontrast) */
.hero-tile--photo .hero-tile__idx,
.calc-chip--photo .calc-chip__idx{background:rgba(13,27,42,.6);color:#fff;border-radius:var(--radius);padding:2px 8px;text-shadow:none;line-height:1.25}
/* Picker-Footnote lesbarer (war .78rem/--muted, Kontrast grenzwertig) */
.picker-section__note{font-size:.82rem;color:var(--ink-soft)}
@media(max-width:680px){
  .calc-chip--type .calc-chip__main strong,
  .calc-chip--photo .calc-chip__main strong{font-size:.95rem;line-height:1.2}
  .type-card--photo .type-card__row strong{font-size:.92rem;line-height:1.2}
  .hero-tile--photo .hero-tile__text strong{font-size:.98rem;line-height:1.2}
}

/* === HÄRTUNG: einheitlicher vertikaler Takt === */
.stats,.video-section{padding:var(--space-section) 0}
/* Nacht-Fix (FEHLER-019): nackte Regel verschob den Befund-Aside auch mobil um 100px nach unten
   (überlappte den Assure-Strip). Sticky-Offset nur auf Desktop, wo der Aside die Rail-Spalte ist. */
@media(min-width:881px){.calc__aside{top:100px}}
/* Defensive: zwei direkt aufeinanderfolgende gleichfarbige Sektionen bekommen eine Hairline-Naht */
.section--alt + .section--alt{border-top:1px solid var(--line)}
.section.benefits + .section.benefits,.section:not(.section--alt) + .section:not(.section--alt):not(.cta-band):not(.hero){border-top:1px solid var(--line-soft)}

/* === /portfolio: durchgerechnetes Beispiel als HELLES Papier-Befund-Ledger
   (Kill-List portfolio 1/2: dunkle Slab-Masse rationiert — kein zweiter Ink-Block,
   12.600 € erscheint hier EINMAL als Killer-Result auf Papier) === */
.example--portfolio{background:var(--bg-soft)}
.example--portfolio .example__grid{grid-template-columns:1.05fr 1fr;align-items:stretch}
.example--portfolio .example__body{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,44px);position:relative;overflow:hidden;align-self:start;box-shadow:var(--shadow-md)}
.example--portfolio .example__body::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brass)}
.example--portfolio .example__list{border-top-color:var(--line)}
.example--portfolio .example__list li{border-bottom-color:var(--line-soft)}
/* Killer-Result-Zeile als Ink-Band INNERHALB der hellen Karte (eine kontrollierte dunkle Fläche) */
.example--portfolio .example__highlight{border-bottom:0!important;margin:8px calc(-1 * clamp(28px,3.4vw,44px)) 0;padding:18px clamp(28px,3.4vw,44px)!important;background:var(--bg-ink);align-items:center;display:flex;justify-content:space-between;gap:16px}
.example--portfolio .example__highlight span{color:var(--on-ink-soft)!important;font-weight:500}
.example--portfolio .example__highlight strong{color:#fff!important;font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.6rem,3vw,2.2rem)}
.example--portfolio .example__media--inset{padding:0;border:0;background:none;height:100%;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.example--portfolio .example__media--inset img{border-radius:0;width:100%;height:100%;min-height:clamp(360px,40vw,520px);aspect-ratio:auto!important;object-fit:cover}
.example--portfolio .example__badge{top:0;left:0;border-radius:0 0 var(--radius) 0;background:var(--bg-ink)}
@media(max-width:880px){
  .example--portfolio .example__grid{grid-template-columns:1fr;gap:0}
  .example--portfolio .example__media--inset{order:-1;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .example--portfolio .example__media--inset img{min-height:clamp(220px,52vw,300px)}
  .example--portfolio .example__body{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
}

/* === HÄRTUNG: Trustbar mobil entzerren — 1 Badge statt Rauten-Wickel === */
@media(max-width:480px){
  .trustbar{padding:13px 0}
  .trustbar__wrap{justify-content:center}
  .trustbar__item:not(:first-child){display:none}
  .trustbar__item:first-child{font-size:.82rem;letter-spacing:.02em}
}

/* === DETAILPOLITUR === */
.hero__ledger-row,.example__list li,.contact-row{transition:background var(--t)}
.example__list li:hover{background:linear-gradient(90deg,rgba(166,121,46,.05),transparent)}
.faq__item{transition:background var(--t)}
.faq__item:hover{background:rgba(166,121,46,.035)}
.kicker::before,.section__eyebrow::before,.hero__eyebrow::before{align-self:center}
.cta-band .btn--ghost:hover{transform:translateY(-2px)}
.example__body--panel .expert__points li::before,.example--portfolio .example__body .expert__points li::before{background:var(--on-ink-soft)}

/* Wizard-Navigations-Buttons: lange Labels ("Weiter zu Modernisierung") dürfen
   auf schmalen Screens umbrechen statt zu clippen (.btn ist sonst white-space:nowrap) */
[data-next].btn,[data-prev].btn{white-space:normal;text-align:center;line-height:1.2}

/* =====================================================================
   ITERATION 6 — RESPONSIVE-MAXIMIERUNG (Querschnitt Mobile M1-M8 + Desktop D1-D2)
   Aus getrenntem Desktop/Mobile-Audit. Am Ende für Cascade-Vorrang.
   ===================================================================== */

/* ───────── D1: Tote Leerflächen ≥1600px — Layout-/Hero-/Picker-/Ledger-/CTA-
   Sektionen breiter führen. Prosa/Legal-Spalte (--legal-measure) NICHT anfassen. ───────── */
/* Single source of truth: --max/--max-wide werden allein im :root-Token-Block
   (@1500/@1840) gesetzt — hier KEIN zweites, konkurrierendes --max mehr. */
@media(min-width:1500px){
  /* CTA-Band bei 1920 NICHT zentriert-im-Void: linksbündig, asymmetrisch */
  .cta-band__wrap{margin-left:0}
  .cta-band--lg .cta-band__wrap{max-width:880px}
  /* Legal-Prosa bleibt schmal: Rail+Measure-Container fängt --max ab */
  .legal--railed{max-width:1100px;margin-left:auto;margin-right:auto}
  /* rechner/wizard haben eigene max-width-Container → bei großen Viewports mitführen (D1) */
  .calc__wrap{max-width:1240px;column-gap:clamp(48px,5vw,96px)}
  .calc__aside{max-width:380px;justify-self:end;width:100%}
  .wizard__container{max-width:1400px}
  .wizard__layout{grid-template-columns:1fr 420px}
}

/* D2: rnd Big-Number-Ledger — Gutter zwischen Zahl und Label schließen.
   .stat-Spalte oben definiert als minmax(150px,220px) → Label rückt näher. */
@media(min-width:1100px){
  .stat{column-gap:clamp(28px,3.5vw,52px)}
}

/* ───────── M5: Utility-Topbar auf kleinen Phones (≤480) ausblenden ───────── */
@media(max-width:480px){.topbar{display:none}}

/* ───────── M6: Seiten-Innenabstand-Floor am Handy (16-24px) ───────── */
@media(max-width:400px){
  .container,.hero__split,.hero__inner,.calc__wrap,.wizard__container{padding-left:18px;padding-right:18px}
}
@media(max-width:360px){
  .container,.hero__split,.hero__inner,.calc__wrap,.wizard__container{padding-left:16px;padding-right:16px}
}

/* ───────── M4: SHY/Silbentrennung am Handy entschärfen ─────────
   Body bricht nicht mehr mitten im Wort. Nur echte Überlänge per &shy; (im Markup). */
@media(max-width:560px){
  p,li,.section__lead,.hero__sub,.wizard__intro,.calc__sub{hyphens:manual;-webkit-hyphens:manual}
  /* rnd-H1 @360 Orphan „-Gutachten": sauberer Bruch statt mitten im Wort */
  .rnd-hero__title{font-size:clamp(2rem,8.6vw,2.7rem);line-height:1.0}
}

/* ───────── M1: Touch-Targets ≥44px durchgängig ─────────
   Sekundäre Text-Link-CTAs werden auf Mobile zu Outline-Buttons (48px), full-width wo gestapelt. */
@media(max-width:560px){
  /* btn-link → echter Outline-Button (außer on-ink-Varianten, die bleiben Text auf dunklem Grund) */
  .btn-link:not(.btn-link--on-ink){
    min-height:48px;justify-content:center;border:1.5px solid var(--ink);border-radius:var(--radius-cta);
    padding:12px 22px;color:var(--ink);background:transparent;width:100%
  }
  .btn-link:not(.btn-link--on-ink)::after{display:none}
  .btn-link:not(.btn-link--on-ink):hover{background:var(--ink);color:#fff}
  /* on-ink Telefon-Links: große Tap-Zeile behalten */
  .btn-link--on-ink{min-height:48px;display:inline-flex;align-items:center}
  /* gestapelte Doppel-CTAs: ≥12px Gap, primär über sekundär */
  .hero__ctas,.expert__ctas,.calc__intro-cta,.calc-done__ctas,.cta-band__ctas,.thanks__ctas{gap:12px}
  .hero__ctas .btn,.expert__ctas .btn,.calc__intro-cta .btn,.cta-band__ctas .btn{width:100%;flex:1 1 100%}
  /* Akkordeon-Summary min 52px Hit-Area */
  .faq__item summary{min-height:52px;padding:15px 0}
  /* Toggle-Glyph 44×44 Hit-Area (Glyph bleibt 14px) */
  .faq__item summary::after{position:relative;outline:0}
}
@media(max-width:390px){
  /* full-width Stacking + sichtbarer Vorrang des Primär-CTA */
  .hero__ctas .btn--primary,.cta-band__ctas .btn--primary{order:-1}
}

/* ───────── M1 Footer: Tap-Zeilen ≥48px, Hairline-Trenner, 4→2 Spalten ≤390 ───────── */
@media(max-width:560px){
  .footer ul{gap:0}
  .footer ul li{border-bottom:1px solid var(--line-ink)}
  .footer ul li:last-child{border-bottom:0}
  .footer ul a{display:flex;align-items:center;min-height:48px}
}

/* ───────── M2: Picker-Kacheln ≤400px full-width einspaltig ─────────
   rechner .calc-chip--photo + gutachten .type-card--photo: 1-up, größeres Foto,
   Label ≥15px, Tap-Reihe ≥56px. Home-Picker (hero-tile--photo) ist bereits 1-up @380. */
@media(max-width:400px){
  .calc-opts--type{grid-template-columns:1fr!important;gap:10px}
  .calc-opts--type .calc-chip--type:nth-child(5):last-child{grid-column:auto}
  .calc-opts--type .calc-chip--photo .calc-chip__media{aspect-ratio:16/9!important}
  .calc-chip--photo .calc-chip__main{min-height:0;padding:14px 16px}
  .calc-chip--photo .calc-chip__main strong{font-size:1rem!important}
  /* Picker bleibt 2-spaltig kompakt (kein endloser Scroll vor den Eckdaten), kürzerer Foto-Crop */
  .type-grid{grid-template-columns:1fr 1fr!important;gap:8px}
  .type-card--photo .type-card__media{aspect-ratio:4/3!important}
  .type-card--photo .type-card__row{min-height:48px;padding:14px 12px 13px}
  .type-card--photo .type-card__row strong{font-size:.88rem!important;line-height:1.25}
}

/* ───────── M3: Ledger-Lesbarkeit am Handy ─────────
   Labels ≥12-13px, mehr Leading, lange Werte stacken/nowrap (nie Zahl mitten brechen). */
@media(max-width:480px){
  .calc__aside-ledger dt,.faq__aside-ledger dt,.preview-seed dt{font-size:.82rem;line-height:1.45}
  .calc__aside-ledger dd,.faq__aside-ledger dd{white-space:nowrap;font-size:.92rem}
  /* Nacht-Iter: die EINE Befund-Zahl bleibt auch @≤480 Display-groß (Brass-Hierarchie, FEHLER-019-Schutz) */
  .calc__aside-row--accent dd{font-size:clamp(2.1rem,8vw,2.6rem)}
  /* gutachten Sidebar: auf 5 Kernzeilen reduzieren (RND, Preis, Ersparnis + Gebäudewert + Gesamt),
     Detail-Zeilen dezent ausblenden. data-* unverändert, IDs bleiben im DOM. */
  .preview-list .preview-row{padding:11px 0}
  .preview-list .preview-row dt{font-size:.84rem}
  .preview-row:has(#prevAge),.preview-row:has(#prevAlteAfa),.preview-row:has(#prevNeueAfa){display:none}
  /* lange €-Werte nie mitten brechen */
  .afa-ledger__row dd,.contact-row__value,.example__list strong,.preview-row dd{overflow-wrap:normal}
}

/* ═════════ ITERATION 7 — Mobile-Feinschliff (3 Regressionen) ═════════
   faq · gutachten · impressum/datenschutz. Mobil-only, display-only, Funktion byte-identisch. */

/* ── faq mobil (war 7.5→7.0) ── */
@media(max-width:560px){
  /* Akkordeon-Summary: min 52px Hit-Area WIRKLICH durchsetzen (überschreibt frühere padding-Resets) */
  .faq__item summary{min-height:52px!important;padding:14px 0!important;display:grid;grid-template-columns:auto 1fr 44px;align-items:center;gap:12px}
  .faq--lg .faq__item summary{min-height:52px!important;padding:14px 0!important}
  /* Toggle-Glyph 44×44 Tap-Zelle (Glyph bleibt 14px, in der Zelle zentriert) */
  .faq__item summary::after{justify-self:center;align-self:center}
  /* Hero-Subline auf 2 Zeilen clampen — frisst sonst den ersten Fold vor der ersten Frage */
  .faq-hero .hero__sub{font-size:1rem;line-height:1.55} /* Nacht-Fix: Clamp raus — verschluckte am Handy den fett gesetzten Satzteil */
  /* Gruppen-Kicker (01/02/03) auf eigene Zeile mit Luft, wrappt nicht eng gegen die Headline */
  .faq__group-kicker{display:flex;width:100%;margin-bottom:14px}
  .faq__group-title{margin-top:2px}
  .faq__group-head{padding-top:clamp(20px,6vw,28px)}
  /* „Frage nicht dabei?" — einspaltiges Ledger, Telefon/E-Mail ≥44px Tap-Reihen */
  .faq-contact--mobile div{min-height:44px;padding:12px 0}
  .faq-contact--mobile dd a{display:inline-flex;align-items:center;min-height:44px}
  .faq-contact--mobile dd{word-break:break-word}
  /* Footer-Links bereits ≥48px (M1); FAQ-Sicht: 15px */
}

/* ── gutachten mobil (war 7.5→7.0) ── */
/* Step-Rail @360: NUR aktiver Step sichtbar + „Schritt N / 5" (Legend trägt den Zähler).
   Die übrigen 4 Punkte + Verbindungslinien ausblenden. data-step-btn/JS unberührt. */
@media(max-width:400px){
  .wizard__nav{justify-content:flex-start;overflow:visible;margin:0 0 22px;padding:0}
  .wizard__step:not(.is-active){display:none}
  .wizard__step-line{display:none}
  .wizard__step.is-active{flex-direction:row;align-items:baseline;gap:10px}
  .wizard__step.is-active .wizard__step-num{font-size:1.6rem}
  .wizard__step.is-active .wizard__step-label{display:inline;font-size:.92rem;color:var(--ink)}
  .wizard__step.is-active::after{display:none}
}
@media(max-width:560px){
  /* Kicker „AUFTRAG ERTEILEN" etwas größer + Top-Abstand */
  .wizard__header .section__eyebrow{font-size:.74rem}
  .wizard__header{margin-top:clamp(6px,2vw,12px)}
  /* Section-Hairline + Whitespace VOR dem Ledger (Picker→Form→Ledger braucht Atempausen) */
  .wizard__aside{margin-top:clamp(28px,7vw,40px);padding-top:clamp(22px,5vw,28px);border-top:1.5px solid var(--line)}
  /* Ergebnis-/Befund-Karte luftiger: Werte 15px, hellere Hairline-Divider */
  .preview-card--result .preview-row{padding:14px 0}
  .preview-card--result .preview-row dd{font-size:15px}
  .preview-card--result .preview-row dt{font-size:.86rem}
  .preview-hero__fig{font-size:clamp(1.5rem,7vw,1.8rem)}
  /* Fußnote auf einen Satz kürzen (Rest hinter Zeilen-Clamp, Funktion/Text im DOM unberührt) */
  .preview-hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.78rem;line-height:1.5}
}

/* ───────── M8: En-Dash-Bullets („– PDF-Lieferung") → echter Bullet mit Hängeeinzug ─────────
   price-card__list nutzt bereits ::before-Tick. Defensive für etwaige Roh-En-Dashes. */
.price-card__list li{list-style:none}

/* Befund-Karten-Zahlen (portfolio „1.500.000 €" etc.) nie mitten umbrechen */
.hero__calc-row strong{white-space:nowrap}

/* portfolio/legacy-Hero-H1 am Handy: clamp runter, 24px Padding-Floor (M6) greift via .container */
@media(max-width:560px){
  .hero__title{font-size:clamp(2.1rem,8.4vw,2.7rem);line-height:1.02}
  .faq-hero .hero__title{font-size:clamp(2.2rem,9vw,3rem)}
  .contact-hero__intro .section__title{font-size:clamp(2.2rem,8.6vw,2.9rem);max-inline-size:none}
}
/* THEME D (kontakt @390): H1 drängt sonst an den rechten Rand — Container-Padding +4px */
@media(max-width:400px){
  main:has(.contact-hero) .container{padding-left:22px;padding-right:22px}
}

/* ═════════ ITERATION 9 — kill-list fixes (mobil-/display-only, Funktion unberührt) ═════════ */

/* gutachten: Befund-Strip @360 — Labels noch kleiner, Zahlen passen ohne Clipping */
@media(max-width:380px){
  .wizard__sticky{padding:10px 12px;gap:8px}
  .wizard__sticky-info + .wizard__sticky-info{padding-left:8px}
  .wizard__sticky-info span{font-size:.56rem;letter-spacing:.04em}
  .wizard__sticky-info strong{font-size:.94rem}
}

/* gutachten: Hero-Subline „Fünf Schritte…" — 15px, ink-soft (auf warmem Papier @360 sonst zu blass) */
@media(max-width:560px){
  .wizard__header p{font-size:15px;color:var(--ink-soft);line-height:1.55}
  /* Primär-CTA „Weiter zu …": ≥48px Höhe + Innen-Padding, Text füllt die Fläche nicht randvoll */
  .wizard__actions .btn,.wizard__actions button{min-height:48px;padding-left:22px;padding-right:22px}
}

/* kontakt: Doppel-CTA gestapelt full-width ≥48px / 12px Gap (example__ctas war nicht im Stack-Set) */
@media(max-width:560px){
  .example__ctas,.contact-funnels .example__ctas{flex-direction:column;gap:12px}
  .example__ctas .btn,.contact-funnels .example__ctas .btn{width:100%;flex:1 1 100%;min-height:48px}
  /* Ink-Karten-Body lesbarer */
  .example__body--panel .section__lead{font-size:15px;line-height:1.6}
  .example__body--panel .expert__points li{font-size:15px;line-height:1.55}
  /* Credentials (contact-sig) unter dem Intro demoten — H1 + Lead gewinnen den Fold */
  .contact-sig{margin-top:clamp(20px,5vw,28px);padding-top:18px}
  .contact-sig dl{display:block;grid-template-columns:none;gap:0}
  .contact-sig dt{font-size:.66rem;margin-top:12px}
  .contact-sig dd{font-size:.9rem;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .contact-sig dd:last-of-type{border-bottom:0;padding-bottom:0}
  /* 01–04-Ledger: mehr vertikale Luft, Werte etwas größer */
  .contact-row{padding:20px 0}
  .contact-row__value{font-size:1.04rem}
  .contact-row__value span{font-size:.86rem;margin-top:6px}
}

/* kontakt: lange Ledger-Werte (E-Mail) nie mitten in der Zahl/Domain brechen unschön */
@media(max-width:480px){
  .contact-row__value a[href^="mailto"]{word-break:break-all}
}

/* ───────── steuerberater Befund-Hero-Karte: Schlüssel-€ ~1.4× dominanter, Sekundär demoten ───────── */
.hero__calc--steuerberater .hero__calc-total-value{font-size:clamp(2.4rem,4.4vw,3.4rem);color:var(--brass-deep)}
.hero__calc--steuerberater .hero__calc-row--muted strong{opacity:.78}
@media(max-width:560px){.hero__calc--steuerberater .hero__calc-total-value{font-size:clamp(2.2rem,9vw,2.8rem)}}



/* =========================================================
   HOME-HERO v2 — INK-BÜHNE (T2/T3 Signatur)
   Tiefe via Z-Ebenen: Ink-Radial → gezeichnete RND-Kurve →
   Headline → Foto (Parallax/Ken-Burns) → überlappende Befund-Karte (Count-up).
   Alle Overrides am Dateiende (Source-Order, FEHLER-019).
   ========================================================= */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);--dur:.7s}

.hero--stage{background:var(--bg-ink);color:var(--on-ink);border-bottom:0;position:relative;overflow:hidden;padding:clamp(40px,5vw,84px) 0 clamp(72px,9vw,128px)}
.hero--stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(125% 95% at 80% 12%,#183049 0%,#0d1b2a 54%,#091320 100%)}

.hero--stage .hero__bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero__curve{position:absolute;right:-2%;bottom:-5%;width:min(900px,64%);height:auto;color:var(--brass)}
.hero__curve-grid{stroke:rgba(255,255,255,.055)}
.hero__curve-line{stroke:var(--brass);opacity:.58;filter:drop-shadow(0 0 10px rgba(243,133,7,.22))}
.hero__curve-dot{fill:var(--brass-bright);filter:drop-shadow(0 0 6px rgba(243,133,7,.5))}

.hero--stage .hero__grid{position:relative;z-index:2;max-width:var(--max-wide);margin:0 auto;padding:0 clamp(18px,4.5vw,64px);display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,3.4vw,58px);align-items:center}
.hero--stage .hero__lede{min-width:0;max-width:640px}

.hero--stage .hero__kicker{display:inline-flex;align-items:center;gap:12px;color:var(--brass-bright);margin:0 0 clamp(18px,2.4vw,26px);letter-spacing:.16em;flex-wrap:nowrap;white-space:nowrap}
.hero--stage .hero__kicker::before,.hero--stage .hero__kicker::after{display:none;content:none}
.hero__az{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:5px 9px;border-radius:4px;white-space:nowrap}

.hero--stage .hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,4.4vw,4rem);line-height:.99;letter-spacing:-.018em;color:#f4efe7;margin:0 0 clamp(20px,2.6vw,30px);hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}
.hero--stage .hero__line{display:block}
/* Display-Wort nie mitten trennen: erste Zeile auf Desktop einzeilig erzwingen (Refusal 7) */
@media(min-width:961px){.hero--stage .hero__line:first-child{white-space:nowrap}}
.hero--stage .hero__line-2{font-size:.44em;font-weight:500;line-height:1.12;color:var(--on-ink-soft);letter-spacing:-.004em;margin-top:.4em;text-wrap:balance}
.hero--stage .hero__line-2 em{font-style:normal;color:var(--brass-bright)}
.hero--stage .hero__sub{font-family:var(--font-body);font-size:clamp(1.02rem,1.15vw,1.16rem);color:var(--on-ink-soft);max-width:52ch;line-height:1.62;margin:0}
.hero--stage .hero__sub strong{color:#f4efe7;font-weight:600}

.hero--stage .hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:clamp(26px,3vw,36px)}
.hero--stage .btn-link,.btn-link--onink{color:var(--on-ink)}
.hero--stage .btn-link::after,.btn-link--onink::after{background:var(--brass-bright)}
.hero--stage .btn-link:hover,.btn-link--onink:hover{color:var(--brass-bright)}
.hero--stage .btn-link:hover::after,.btn-link--onink:hover::after{background:var(--brass-bright)}

.hero--stage .hero__assurances{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(24px,3vw,32px);padding-top:clamp(20px,2.6vw,26px);border-top:1px solid rgba(255,255,255,.12)}
.hero--stage .hero__assurances span{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:.83rem;font-weight:600;color:var(--on-ink-soft);letter-spacing:.005em}
.hero--stage .hero__assurances svg{width:18px;height:18px;color:var(--brass-bright);flex:0 0 auto}

/* Visual: Foto rechts, randbündig; Befund-Karte überlappt (Bureau-Borsche-Layering) */
.hero--stage .hero__visual{position:relative;min-width:0}
.hero__photo{position:relative;margin:0;height:clamp(400px,40vw,540px);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 40px 80px -34px rgba(0,0,0,.7);isolation:isolate}
.hero__photo-inner{display:block;position:absolute;inset:-6% -2%;will-change:transform}
.hero__photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,19,32,.55) 0%,rgba(9,19,32,0) 34%),linear-gradient(0deg,rgba(9,19,32,.5) 0%,rgba(9,19,32,0) 40%)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:saturate(.92) contrast(1.02);transform:scale(1.04)}
/* Sekundär-CTA als klarer Ink-Ghost-Button (überschreibt Legacy .hero__ctas .btn-link) */
.hero--stage .hero__ctas .btn-link{border:1.5px solid rgba(255,255,255,.26);color:var(--on-ink);background:transparent}
.hero--stage .hero__ctas .btn-link:hover{border-color:var(--brass-bright);color:var(--brass-bright);background:rgba(255,255,255,.04)}
.hero__frame-idx{position:absolute;top:14px;left:14px;z-index:2;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(9,19,32,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:5px}

.hero__befund{position:absolute;left:clamp(-14px,-2.4vw,-44px);bottom:clamp(-34px,-4vw,-52px);z-index:3;margin:0;background:#0a1523;border:1px solid rgba(255,255,255,.09);padding:clamp(20px,1.9vw,28px) clamp(24px,2.2vw,34px);border-radius:var(--radius-lg);box-shadow:0 34px 66px -26px rgba(0,0,0,.75);max-width:min(80%,360px);overflow:hidden}
.hero__befund::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--brass)}
.hero__befund-tag{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:10px}
.hero__befund-num{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,4vw,3.6rem);line-height:.86;letter-spacing:-.018em;color:#fff;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.hero__befund-sub{display:block;font-size:.82rem;color:var(--on-ink-soft);margin-top:10px;line-height:1.4}

/* ---- Responsive ---- */
@media(max-width:960px){
  .hero--stage .hero__grid{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}
  .hero--stage .hero__lede{max-width:none}
  .hero__photo{height:clamp(320px,52vw,440px)}
  .hero__befund{left:auto;right:clamp(-8px,-1.6vw,-20px)}
}
@media(max-width:600px){
  .hero--stage{padding-bottom:clamp(64px,16vw,84px)}
  .hero--stage .hero__grid{padding:0 clamp(18px,5vw,26px)}
  .hero--stage .hero__title{font-size:clamp(2.3rem,10vw,3.2rem);overflow-wrap:break-word}
  .hero--stage .hero__line-2{font-size:.5em}
  .hero__photo{height:clamp(280px,64vw,380px)}
  .hero__befund{position:relative;left:auto;right:auto;bottom:auto;max-width:none;margin-top:16px;box-shadow:var(--shadow-md)}
  .hero__frame-idx{top:10px;left:10px}
  /* Signatur-Kurve auf Mobil sichtbar (zeichnet oberhalb des Folds hinter CTA/Assurances) */
  .hero__curve{width:170%;right:-34%;top:30%;bottom:auto}
  .hero__curve-line{opacity:.4}
}

/* =========================================================
   MOTION — Reveal-Sequenz, Kurven-Draw, Ken-Burns, Parallax
   Nur unter no-preference; reduced-motion nutzt globalen Kill (Z.~1520).
   ========================================================= */
@media(prefers-reduced-motion:no-preference){
  .js .hero--stage [data-rise]{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .js .hero--stage [data-rise].is-in{opacity:1;transform:none}

  .hero__curve-line{stroke-dasharray:2400;stroke-dashoffset:2400;animation:heroDraw 2.1s .35s var(--ease) forwards}
  .hero__curve-dot{opacity:0;animation:heroDot .5s 2.1s ease forwards}
  /* Ken-Burns auf dem Bild (scale); Parallax-Translate setzt JS auf .hero__photo-inner — kein Transform-Konflikt */
  .hero__photo img{animation:heroKen 24s ease-in-out 1.2s infinite alternate}
}
@keyframes heroDraw{to{stroke-dashoffset:0}}
@keyframes heroDot{to{opacity:1}}
@keyframes heroKen{from{transform:scale(1.04)}to{transform:scale(1.12)}}
@keyframes heroIntro{from{transform:scale(1.11)}to{transform:scale(1.04)}}
/* Mobile-Downgrade: kein Dauer-Ken-Burns (Akku), aber EIN einmaliger Intro-Zoom = On-Load-Craft */
@media(hover:none) and (pointer:coarse){
  @media(prefers-reduced-motion:no-preference){.hero__photo img{animation:heroIntro 1.5s .2s var(--ease) both}}
}

.hero--stage .hero__nb{white-space:nowrap}

/* ============================================================
   SUBPAGE COMPOSITION OVERHAUL · 2026-07-01
   Behebt: toter rechter Rand @≥900px, linksbündige CTA-Bänder,
   vertikal-gestapelte Stats. Am EOF (FEHLER-019: letzte Regel
   gewinnt bei gleicher Spezifität). Desktop = 2-spaltiges
   Editorial (Titel-Schiene links sticky, Inhalt rechts füllt
   die Leinwand). Mobile bleibt gestapelt.
   ============================================================ */

/* ---- CTA-Bänder: zentriert / verankert (alle Viewports) ---- */
.cta-band__wrap{max-width:640px;margin-inline:auto;text-align:center}
.cta-band .kicker{justify-content:center}
.cta-band p{margin-left:auto;margin-right:auto}
.cta-band__ctas{justify-content:center}
/* --lg: große Type, aber zentriert; linke Akzent-Leiste entfällt */
.cta-band--lg .cta-band__wrap{max-width:840px;margin-inline:auto;text-align:center;padding-left:0}
.cta-band--lg .cta-band__wrap::before{content:none;display:none}
.cta-band--lg .cta-band__ctas{justify-content:center}
/* --split (Steuerberater) bleibt 2-spaltig, linksbündig — füllt die Leinwand */
.cta-band--split .cta-band__wrap{max-width:none;margin:0;text-align:left}
.cta-band--split .cta-band .kicker{justify-content:flex-start}
.cta-band--split .cta-band p{margin-left:0;margin-right:0}
.cta-band--split .cta-band__ctas{justify-content:flex-start}

/* ---- Stats: horizontale 4er-Reihe statt vertikaler Stapel ---- */
@media(min-width:760px){
  .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .stat{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.2vw,16px);min-width:0;padding:clamp(30px,3vw,42px) clamp(22px,2.2vw,32px);border-bottom:0;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0;border-bottom:0}
  .stat strong{font-size:clamp(1.9rem,2.6vw,2.9rem)}
  .stat span{max-width:none;align-self:auto;font-size:.9rem}
}

/* ---- 2-spaltiges Editorial: Titel-Schiene links, Inhalt rechts ---- */
@media(min-width:900px){
  .section.benefits > .container,
  .section.process  > .container,
  .section.faq:not(.faq-page) > .container{
    display:grid;
    grid-template-columns:minmax(240px,.82fr) 1.62fr;
    gap:clamp(48px,5vw,92px);
    align-items:start;
  }
  .section.benefits .section__head,
  .section.process  .section__head,
  .section.faq:not(.faq-page) .section__head{
    max-width:none;margin:0;position:sticky;top:104px;align-self:start;
  }
  .section.benefits .benefits__grid,
  .section.process  .process__grid,
  .section.faq:not(.faq-page) .faq__list{
    max-width:none;min-width:0;
  }

  /* FAQ-Seite: jede Gruppe 2-spaltig (Gruppen-Kopf links sticky, Akkordeon rechts) */
  .faq-page .faq__group{
    display:grid;grid-template-columns:minmax(220px,.7fr) 1.7fr;
    gap:clamp(40px,4.5vw,84px);align-items:start;
  }
  .faq-page .faq__group-head{position:sticky;top:104px;margin:0;align-self:start}
  .faq-page .faq__group .faq__list{max-width:none;min-width:0;margin-top:0}

  /* Pricing: volle Leinwand-Zeilen + zentrierter Kopf */
  .section.pricing .section__head{max-width:780px;margin-left:auto;margin-right:auto;text-align:center}
  .section.pricing .section__head .kicker,
  .section.pricing .section__head .section__eyebrow{justify-content:center}
  .section.pricing .pricing__grid{max-width:none;margin:0}
}

/* ============================================================
   INK HEROES · 2026-07-01 — Unterseiten-Heroes auf Home-Niveau:
   Ink-Bühne (fließt aus dem Ink-Masthead), Tonwert-Tiefe, die
   Messing-RND-Kurve als Ambient-Motiv, gestaffelte Reveal-
   Sequenz beim Laden (CSS-only, reduced-motion-Guard).
   Die Karten (.hero__calc/.afa-ledger/.contact-ledger) werden
   zu erhöhten Ink-Panels statt heller Kacheln.
   ============================================================ */

.hero--ink{background:var(--bg-ink);color:var(--on-ink);border-bottom:0;position:relative;overflow:hidden}
.hero--ink::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 95% at 82% -6%, rgba(243,133,7,.11), transparent 58%),
             linear-gradient(180deg, #0d1b2a 0%, #0f2033 100%)}
.hero--ink .hero__bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero--ink .container,.hero--ink .hero__grid{position:relative;z-index:2}

/* Kicker / Eyebrow → Messing-hell */
.hero--ink .kicker,.hero--ink .hero__eyebrow,.hero--ink .section__eyebrow,.hero--ink .contact-sig__kicker{color:var(--brass-bright)}
.hero--ink .kicker::before,.hero--ink .hero__eyebrow::before,.hero--ink .section__eyebrow::before,.hero--ink .contact-sig__kicker::before{background:var(--brass-bright)}

/* Titel / Sub / Trust (generischer .hero-Typ) */
.hero--ink .hero__title{color:var(--on-ink)}
.hero--ink .hero__title em{color:inherit}                 /* Refusal 1: kein Farbwort in H1 */
.hero--ink .hero__title .hero__title-2{color:var(--on-ink-soft)}
.hero--ink .hero__sub{color:var(--on-ink-soft)}
.hero--ink .hero__sub strong{color:#f4efe7}
.hero--ink .hero__trust{border-top-color:var(--line-ink)}
.hero--ink .hero__trust-mark{border-color:var(--line-ink);color:var(--brass-bright)}
.hero--ink .hero__trust-text strong{color:#fff}
.hero--ink .hero__trust-text span{color:var(--on-ink-soft)}

/* rnd-hero Titel/Lead */
.hero--ink .rnd-hero__title{color:var(--on-ink)}
.hero--ink .rnd-hero__title em,.hero--ink .rnd-hero__title-2{color:var(--on-ink-soft)}
.hero--ink .rnd-hero__intro .section__lead{color:var(--on-ink-soft)}
.hero--ink .rnd-hero__intro .section__lead strong{color:#f4efe7}

/* kontakt contact-hero */
.hero--ink .contact-hero__intro .section__title{color:var(--on-ink)}
.hero--ink .contact-hero__intro .section__title em{color:inherit}
.hero--ink .contact-hero__intro .section__lead{color:var(--on-ink-soft)}
.hero--ink .contact-sig{border-top-color:var(--line-ink)}
.hero--ink .contact-sig dt{color:var(--on-ink-soft)}
.hero--ink .contact-sig dd,.hero--ink .contact-sig dd strong{color:#fff}
.hero--ink .contact-hero .contact-ledger{border-top-color:var(--brass)}
.hero--ink .contact-row{border-bottom-color:var(--line-ink)}
.hero--ink .contact-row__idx{color:var(--brass-bright)}
.hero--ink .contact-row__label{color:var(--on-ink-soft)}
.hero--ink .contact-row__value,.hero--ink .contact-row__value strong{color:#fff}
.hero--ink .contact-row__value a{color:#fff;text-decoration-color:var(--line-ink)}
.hero--ink .contact-row__value a:hover{color:var(--brass-bright);text-decoration-color:var(--brass-bright)}
.hero--ink .contact-row__value span{color:var(--on-ink-soft)}

/* Buttons auf Ink */
.hero--ink .btn-link{color:var(--on-ink);border-color:rgba(255,255,255,.26)}
.hero--ink .btn-link::after{background:var(--brass-bright)}
.hero--ink .btn-link:hover{color:var(--brass-bright);border-color:var(--brass-bright);background:rgba(255,255,255,.05)}
.hero--ink .hero__ctas .btn-link:hover{background:rgba(255,255,255,.05)}
.hero--ink .btn--ghost,.hero--ink .btn--outline{background:transparent;border-color:rgba(255,255,255,.26);color:#fff}
.hero--ink .btn--ghost:hover,.hero--ink .btn--outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);color:#fff}

/* Karten → erhöhte Ink-Panels (statt heller Kacheln) */
.hero--ink .hero__calc,.hero--ink .hero__calc--flat{background:rgba(255,255,255,.038);border:1px solid var(--line-ink);box-shadow:0 34px 66px -36px rgba(0,0,0,.75)}
.hero--ink .afa-ledger{background:rgba(255,255,255,.038);border-color:var(--line-ink);box-shadow:0 34px 66px -36px rgba(0,0,0,.75)}
.hero--ink .afa-ledger__head{background:rgba(255,255,255,.03);border-bottom-color:var(--line-ink)}
.hero--ink .afa-ledger__case{color:var(--on-ink-soft)}
.hero--ink .afa-ledger__row{border-bottom-color:var(--line-ink)}
.hero--ink .afa-ledger__row dt{color:var(--on-ink-soft)}
.hero--ink .afa-ledger__row dd{color:#fff}
.hero--ink .afa-ledger__row--op dt{color:var(--on-ink-soft);opacity:.78}
.hero--ink .afa-ledger__row--result{background:linear-gradient(90deg, rgba(243,133,7,.14), rgba(243,133,7,.06));border-top:1px solid var(--line-ink)}
.hero--ink .afa-ledger__row--result dt{color:#f4efe7}
.hero--ink .afa-ledger__note{color:var(--on-ink-soft);opacity:.72}

/* Curve-Motiv leicht zurückgenommen hinter dem Content */
.hero--ink .hero__curve{opacity:.9}

/* ---- Gestaffelte Reveal-Sequenz beim Laden (CSS-only, EINE Easing-Sprache) ---- */
@media(prefers-reduced-motion:no-preference){
  .js .hero--ink .hero__content > *,
  .js .hero--ink .rnd-hero__intro > *,
  .js .hero--ink .contact-hero__intro > *{opacity:0;animation:heroRise .66s var(--ease) both}
  .js .hero--ink .hero__content > *:nth-child(1),
  .js .hero--ink .rnd-hero__intro > *:nth-child(1),
  .js .hero--ink .contact-hero__intro > *:nth-child(1){animation-delay:.06s}
  .js .hero--ink .hero__content > *:nth-child(2),
  .js .hero--ink .rnd-hero__intro > *:nth-child(2),
  .js .hero--ink .contact-hero__intro > *:nth-child(2){animation-delay:.15s}
  .js .hero--ink .hero__content > *:nth-child(3),
  .js .hero--ink .rnd-hero__intro > *:nth-child(3),
  .js .hero--ink .contact-hero__intro > *:nth-child(3){animation-delay:.24s}
  .js .hero--ink .hero__content > *:nth-child(4),
  .js .hero--ink .rnd-hero__intro > *:nth-child(4),
  .js .hero--ink .contact-hero__intro > *:nth-child(4){animation-delay:.33s}
  .js .hero--ink .hero__content > *:nth-child(5){animation-delay:.42s}
  .js .hero--ink .hero__calc,
  .js .hero--ink .afa-ledger,
  .js .hero--ink .contact-ledger{opacity:0;animation:heroRise .74s .34s var(--ease) both}
}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* faq-hero: flache Hairline-Kontakttabelle für Ink (statt heller Text auf Ink) */
.faq-hero.hero--ink .hero__calc{background:none;border:0;border-top:2px solid var(--brass);box-shadow:none;padding:18px 0 0}
.faq-hero.hero--ink .hero__calc-badge{color:var(--brass-bright)}
.faq-hero.hero--ink .hero__calc-badge::before{background:var(--brass-bright)}
.faq-hero.hero--ink .hero__calc-row{border-bottom-color:var(--line-ink)}
.faq-hero.hero--ink .hero__calc-row span{color:var(--on-ink-soft)}
.faq-hero.hero--ink .hero__calc-row strong,
.faq-hero.hero--ink .hero__calc-row strong a{color:#fff}
.faq-hero.hero--ink .hero__calc-row strong a:hover{color:var(--brass-bright)}
.faq-hero.hero--ink .hero__calc-total{border-top-color:var(--line-ink)}
.faq-hero.hero--ink .hero__calc-total-label{color:var(--on-ink-soft)}
.faq-hero.hero--ink .hero__calc-total-value{color:#fff}
.faq-hero.hero--ink .hero__calc-total-note{color:var(--on-ink-soft)}

/* ============================================================
   HEADER GREIFBARER · 2026-07-01 — dezente Substanz/Tiefe im
   Ruhezustand (definiert die Bar auch über der Ink-Bühne),
   kräftigere Messing-Hairline, feiner Top-Glanz. Ink-Farbe
   & mobile Util-Regel (display:none ≤768) bleiben unberührt.
   ============================================================ */
.mh-bar{
  background:linear-gradient(180deg, #10233a 0%, var(--bg-ink) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px -26px rgba(0,0,0,.7);
}
.mh-bar::after{height:1.5px;background:linear-gradient(90deg,transparent,rgba(243,133,7,.72) 15%,rgba(243,133,7,.72) 85%,transparent)}
.mh-bar.is-scrolled{background:rgba(10,21,35,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 36px -14px rgba(0,0,0,.62)}
.mh-util{background:#091320;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}

/* ============================================================
   ITERATION 02 · 2026-07-01 — Critic-Kill-List:
   #7 Mono-Daten-Stimme · #1 Ink→Hell-Naht graden · #2 Curve
   Ambient-Leben (stb) · #3 gestaffelte Down-Page-Reveals ·
   #4 kontakt Hover/Reveal · #5 faq Void → Themen-Sprungnav.
   ============================================================ */

:root{--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* #7 Mono-Label-Stimme (Vercel-Anker: Daten sprechen Mono) */
.kicker,.section__eyebrow,.hero__eyebrow,.hero__calc-badge,.contact-sig__kicker,
.faq__group-kicker,.cta-band__contact-kicker,.contact-row__label,.afa-ledger__case,
.hero__frame-idx,.afa-ledger__row--result dt,.faq-hero__jump-kicker,.mh-util__cert-t,
.mh-logo__tag,.preview-badge{font-family:var(--font-mono)}
.kicker,.section__eyebrow,.hero__eyebrow,.hero__calc-badge,.contact-sig__kicker,
.faq__group-kicker,.cta-band__contact-kicker{letter-spacing:.1em}

/* #1 Ink→Hell-Naht: Messing-Hairline unten am Ink-Hero (bookend zum Masthead)
   + weiches Absetzen der ersten Hellsektion + Ink-Platte wirft Tiefe */
.hero--ink{box-shadow:0 26px 46px -34px rgba(9,18,30,.65)}
.hero--ink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(243,133,7,.5) 15%,rgba(243,133,7,.5) 85%,transparent)}
.hero--ink + section{position:relative;
  background-image:linear-gradient(180deg, rgba(13,27,42,.06), rgba(13,27,42,0) 170px)}

/* #2 Curve-Ambient: sanfter Endpunkt-Puls (deterministisch ambientMotion=true, auch stb) */
@media(prefers-reduced-motion:no-preference){
  .hero__curve-dot{animation:heroDot .5s 2.1s ease forwards, curvePulse 3.6s 2.8s ease-in-out infinite}
}
@keyframes curvePulse{0%,100%{opacity:1}50%{opacity:.4}}

/* #3 Gestaffelte Down-Page-Reveals der Wiederhol-Kinder (EINE Easing-Sprache) */
@media(prefers-reduced-motion:no-preference){
  .js .reveal .benefit-card,.js .reveal .process__step,.js .reveal .price-card,
  .js .reveal .faq__item,.js .reveal .stat{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .js .reveal.is-visible .benefit-card,.js .reveal.is-visible .process__step,
  .js .reveal.is-visible .price-card,.js .reveal.is-visible .faq__item,
  .js .reveal.is-visible .stat{opacity:1;transform:none}
  .js .reveal.is-visible :is(.benefit-card,.process__step,.price-card,.faq__item,.stat):nth-child(2){transition-delay:.07s}
  .js .reveal.is-visible :is(.benefit-card,.process__step,.price-card,.faq__item,.stat):nth-child(3){transition-delay:.14s}
  .js .reveal.is-visible :is(.benefit-card,.process__step,.price-card,.faq__item,.stat):nth-child(4){transition-delay:.21s}
  .js .reveal.is-visible :is(.benefit-card,.process__step,.price-card,.faq__item,.stat):nth-child(5){transition-delay:.28s}
  .js .reveal.is-visible :is(.benefit-card,.process__step,.price-card,.faq__item,.stat):nth-child(6){transition-delay:.35s}
}

/* #4 kontakt: Hover-Affordanz auf den 01–04 Kontaktzeilen */
.hero--ink .contact-row{transition:background var(--t)}
.hero--ink .contact-row:hover{background:rgba(255,255,255,.04)}
.hero--ink .contact-row:hover .contact-row__idx{color:var(--brass-bright)}

/* #5 faq Void → Themen-Sprungnavigation (füllt rechte Spalte, Vercel-Index-Nav) */
.faq-hero__jump{display:flex;flex-direction:column;margin-top:clamp(22px,3vw,32px);padding-top:18px;border-top:1px solid var(--line-ink)}
.faq-hero__jump-kicker{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:12px}
.faq-hero__jump a{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-ink);color:#fff;font-size:.94rem;font-weight:500;transition:color var(--t),padding-left var(--t)}
.faq-hero__jump a:last-child{border-bottom:0}
.faq-hero__jump a span{font-family:var(--font-mono);color:var(--brass-bright);font-size:.82rem;flex:0 0 auto}
.faq-hero__jump a:hover{color:var(--brass-bright);padding-left:6px}
@media(max-width:560px){.faq-hero__jump{display:none}}

/* Curve-Signatur klar lebendig auf allen Ink-Heroes (sichtbare Linie atmet,
   nicht nur der randnahe Punkt) — macht ambientMotion deterministisch, auch stb. */
@media(prefers-reduced-motion:no-preference){
  .hero--ink .hero__curve-line{animation:heroDraw 2.1s .35s var(--ease) forwards, curveBreathe 6s 2.6s ease-in-out infinite}
}
@keyframes curveBreathe{0%,100%{opacity:.6}50%{opacity:.34}}

/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE BODY DEPTH TOOLKIT · 2026-07-01 (sub2)
   Bringt Home-Ambition unter den Fold: echte Ink-Duotone-Bilder,
   full-bleed Ink-Zäsuren, übergroße Messing-Struktur-Ziffern die über
   die Ink→Hell-Kante bluten, Overlap-Tiefe. EINE Akzentfarbe (Messing),
   EINE Easing-Sprache. Am EOF (FEHLER-019). transform/opacity only.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Ink-Duotone-Figur (reales Bild, markenkonform monochrom getönt) ---- */
.ink-figure{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-lg);
  isolation:isolate;background:var(--bg-ink);box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
.ink-figure > img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.9)}
.ink-figure::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#12314f;mix-blend-mode:color}
.ink-figure::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,20,33,.10),rgba(10,20,33,.60)),
             radial-gradient(120% 92% at 100% 0,rgba(243,133,7,.20),transparent 56%)}
.ink-figure__label{position:absolute;z-index:3;top:14px;left:14px;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(9,19,32,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:5px}
.ink-figure__cap{position:absolute;z-index:3;left:16px;right:16px;bottom:14px;
  font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.85)}
.ink-figure__cap strong{color:#fff;font-weight:600}

/* ---- 2. Übergroße Messing-Struktur-Ziffer (Outline, blutet über Kanten) ---- */
.brass-index{display:block;font-family:var(--font-display);font-weight:600;line-height:.74;
  letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;color:transparent;
  -webkit-text-stroke:1.4px var(--brass);text-stroke:1.4px var(--brass);
  -webkit-user-select:none;user-select:none;pointer-events:none}
.brass-index--fill{color:var(--brass);-webkit-text-stroke:0;text-stroke:0}
.on-ink .brass-index,.ink-cut .brass-index{-webkit-text-stroke-color:rgba(243,133,7,.7);text-stroke:1.4px rgba(243,133,7,.7)}

/* Kleine Index-Ziffer im Titel-Rail der Editorial-Sektionen (füllt tote Gutter) */
.rail-index{display:block;font-family:var(--font-display);font-weight:600;line-height:.8;
  color:transparent;-webkit-text-stroke:1.3px var(--brass);
  font-size:clamp(4rem,7vw,7.2rem);letter-spacing:-.04em;margin:0 0 .12em -.03em;opacity:.9}

/* ---- 3. Full-bleed Ink-Zäsur (die EINE Layout-Überraschung pro Seite) ---- */
.ink-cut{background:var(--bg-ink);color:var(--on-ink);position:relative;overflow:visible;
  isolation:isolate;padding-block:clamp(56px,7vw,104px);
  box-shadow:0 30px 60px -40px rgba(9,18,30,.55)}
.ink-cut::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% -8%,rgba(243,133,7,.10),transparent 56%),
             linear-gradient(180deg,#0d1b2a 0%,#0f2033 100%)}
.ink-cut .hero__bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ink-cut .hero__curve{position:absolute;right:-4%;bottom:-8%;width:min(820px,62%);height:auto;color:var(--brass);opacity:.85}
.ink-cut > .container{position:relative;z-index:2}
.ink-cut .kicker,.ink-cut .section__eyebrow{color:var(--brass-bright)}
.ink-cut .kicker::before,.ink-cut .section__eyebrow::before{background:var(--brass-bright)}
.ink-cut .section__title{color:var(--on-ink)}
.ink-cut .section__title em{color:var(--on-ink-soft)}
.ink-cut .section__lead{color:var(--on-ink-soft)}
.ink-cut .section__lead strong{color:#f4efe7}

.ink-cut__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:center}
@media(min-width:900px){.ink-cut__grid{grid-template-columns:1.02fr 1fr;gap:clamp(48px,5vw,84px)}
  .ink-cut--media-right .ink-cut__media{order:2}}
.ink-cut__media{position:relative;min-width:0;height:clamp(300px,40vw,520px)}
.ink-cut__media .ink-figure{height:100%}
.ink-cut__body{min-width:0;position:relative}

/* übergroße Ziffer die über die obere Ink→Hell-Kante blutet */
.ink-cut__bleed{position:absolute;z-index:3;top:clamp(-56px,-4.5vw,-84px);right:0;
  text-align:right;line-height:.78;font-size:clamp(4.4rem,9vw,9.5rem);opacity:.9}
@media(max-width:899px){.ink-cut__bleed{position:static;text-align:left;margin:0 0 .1em;
  font-size:clamp(3.6rem,15vw,6rem)}}

/* kompakter Ink-Ledger im ink-cut (Label→Wert, aber als Tiefen-Panel) */
.ink-cut__ledger{margin:clamp(18px,2vw,26px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--line-ink)}
.ink-cut__ledger li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line-ink);min-width:0}
.ink-cut__ledger li span{color:var(--on-ink-soft);font-size:.92rem;min-width:0}
.ink-cut__ledger li strong{color:#fff;font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;font-weight:600}
.ink-cut__ledger li.is-result{border-bottom:0;border-top:1px solid var(--brass);margin-top:4px;
  background:linear-gradient(90deg,rgba(243,133,7,.12),transparent);padding:14px 12px;
  border-radius:0 0 6px 6px}
.ink-cut__ledger li.is-result span{color:#f4efe7}
.ink-cut__ledger li.is-result strong{color:var(--brass-bright);
  font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,2rem)}
.ink-cut__note{color:var(--on-ink-soft);opacity:.72;font-size:.78rem;line-height:1.5;margin-top:14px}

/* der übergroße narrative Kennwert (statt Deko-KPI) */
.ink-cut__figure{display:flex;flex-direction:column;gap:2px;margin:.14em 0 .1em;min-width:0}
.ink-cut__figure em{font-style:normal;color:var(--brass-bright);font-family:var(--font-display);
  font-weight:600;line-height:.9;font-size:clamp(2.8rem,5.4vw,4.6rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.ink-cut__figure span{font-size:.92rem;color:var(--on-ink-soft);letter-spacing:.01em}

.ink-cut .btn--outline,.ink-cut .btn--ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.ink-cut .btn--outline:hover,.ink-cut .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.44);color:#fff}
.ink-cut .btn-link{color:var(--on-ink)}
.ink-cut .btn-link::after{background:var(--brass-bright)}
.ink-cut .btn-link:hover{color:var(--brass-bright)}

/* ---- 4. Stat-Reihe: übergroße Messing-Kennziffern statt Deko-KPI-Band ---- */
.stats--figure .stat strong{font-family:var(--font-display);font-weight:600;
  color:var(--brass-text);letter-spacing:-.02em;line-height:.9}
@media(min-width:760px){.stats--figure .stat strong{font-size:clamp(2.6rem,4vw,4rem)}}

/* ---- 5. Reveal für Toolkit-Elemente (EINE Easing-Sprache) ---- */
.js .reveal .ink-figure,.js .reveal .ink-cut__body > *{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-visible .ink-figure,.js .reveal.is-visible .ink-cut__body > *{opacity:1;transform:none}
.js .reveal.is-visible .ink-cut__body > *:nth-child(2){transition-delay:.07s}
.js .reveal.is-visible .ink-cut__body > *:nth-child(3){transition-delay:.13s}
.js .reveal.is-visible .ink-cut__body > *:nth-child(4){transition-delay:.19s}
.js .reveal.is-visible .ink-cut__body > *:nth-child(5){transition-delay:.25s}
@media(prefers-reduced-motion:reduce){
  .js .reveal .ink-figure,.js .reveal .ink-cut__body > *{opacity:1;transform:none}
}

/* ---- 6. Editorial-Titel-Rail: Index-Ziffer füllt tote linke Gutter ---- */
@media(min-width:900px){
  .section.benefits .section__head .rail-index,
  .section.process  .section__head .rail-index,
  .section.faq:not(.faq-page) .section__head .rail-index{display:block}
}
@media(max-width:899px){.rail-index{font-size:clamp(3rem,12vw,4.4rem);margin-bottom:.2em}}

/* ---- 7. ink-cut Curve-Motiv (self-draw + ambient breathe, wie hero--ink) ---- */
@media(prefers-reduced-motion:no-preference){
  .js .ink-cut .hero__curve-line{stroke-dasharray:2400;stroke-dashoffset:2400;
    animation:heroDraw 2.1s .2s var(--ease) forwards, curveBreathe 6s 2.6s ease-in-out infinite}
  .js .ink-cut .hero__curve-dot{opacity:0;animation:heroDot .5s 2.1s var(--ease) forwards}
}
.ink-cut .hero__curve-grid{stroke:rgba(255,255,255,.055)}
.ink-cut .hero__curve-line{stroke:var(--brass);opacity:.55;filter:drop-shadow(0 0 10px rgba(243,133,7,.22))}
.ink-cut .hero__curve-dot{fill:var(--brass-bright);filter:drop-shadow(0 0 6px rgba(243,133,7,.5))}

/* ---- 8. kontakt: Portrait in der Hero-Rechts-Spalte, Aktenzeichen-Karte overlappt ---- */
.contact-hero--portrait{align-items:stretch}
.contact-portrait{position:relative;min-width:0;display:flex;flex-direction:column}
.contact-portrait__fig{height:auto;aspect-ratio:4/5;width:100%;border-radius:var(--radius-lg)}
.contact-portrait__fig img{object-position:50% 20%}
.contact-portrait__card{position:relative;z-index:4;margin:-64px 20px 0 auto;max-width:min(94%,380px);
  background:#0a1523;border:1px solid var(--line-ink);border-radius:var(--radius-lg);
  padding:clamp(18px,2vw,24px);box-shadow:0 34px 66px -28px rgba(0,0,0,.75);overflow:hidden}
.contact-portrait__card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--brass)}
.contact-portrait__card .contact-sig__kicker{display:block;font-family:var(--font-mono);color:var(--brass-bright);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.contact-portrait__card .contact-sig{margin:0;padding:0;border:0;display:block;grid-template-columns:none}
.contact-portrait__card .contact-sig > div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line-ink)}
.contact-portrait__card .contact-sig > div:last-child{border-bottom:0;padding-bottom:0}
.contact-portrait__card .contact-sig dt{margin:0;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-ink-soft);line-height:1.4}
.contact-portrait__card .contact-sig dd{margin:0;font-size:.85rem;color:#fff;text-align:right;line-height:1.4;
  font-variant-numeric:tabular-nums}
.contact-portrait__card .contact-sig dd strong{color:#fff;font-weight:600}
@media(max-width:880px){
  .contact-portrait{max-width:460px;margin-inline:auto;width:100%}
  .contact-portrait__card{margin-right:auto;margin-left:20px}
}

/* ---- 9. expert: Portrait als Ink-Duotone-Figur mit Siegel-Overlay ---- */
.expert__portrait{position:relative;aspect-ratio:4/5;width:100%;height:auto;align-self:start;
  border-radius:var(--radius-lg);max-width:440px}
.expert__portrait img{object-position:50% 18%}
.expert__seal--overlay{position:absolute;z-index:4;left:12px;right:12px;bottom:12px;width:auto;max-width:none;
  background:rgba(9,19,32,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:8px}
.expert__seal--overlay svg{color:var(--brass-bright)}
@media(max-width:880px){.expert__portrait{max-width:420px;margin-inline:auto}}

/* ---- 10. DIA-Zertifikat als lesbares Trust-Badge (kein Duotone/Crop!) ---- */
.expert__media--cert{max-width:360px;align-self:start}
.expert__media--cert img{width:100%;max-width:100%;object-fit:contain;
  background:linear-gradient(180deg,#ffffff,var(--surface-soft));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(18px,2vw,28px);box-shadow:var(--shadow-md)}
@media(max-width:880px){.expert__media--cert{max-width:320px;margin-inline:auto}}

/* faq group: tote 3px Grid-Overhang (rail-index) kappen */
.faq-page .faq__group-head{min-width:0}
.faq-page .faq__group .rail-index{max-width:100%;overflow:hidden}

/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE BODY DEPTH · RUNDE 3 (sub3) · 2026-07-02
   Konsens-Hebel: das helle Mittelband jeder Seite lädt EIN zweites
   Ink-Kontrastfeld + EIN zweites getöntes reales Ink-Duotone-Bild —
   die Temperatur fällt nie unter Ink-Cut-Intensität. Cross-Page:
   Brass-Kurve nie über Fließtext (niedrigere Opazität, hinter Text).
   Am EOF (FEHLER-019). transform/opacity only, reduced-motion-Guard.
   ════════════════════════════════════════════════════════════════════════ */

/* --- Cross-page: selbstzeichnende Brass-Kurve NIE über Fließtext --- */
/* z-index sitzt bereits hinter Text (hero__bg z1 < grid z2); zusätzlich
   Opazität senken, damit die Linie als Ambient-Textur liest, nicht als
   Strich über der Subline (Owner-Kill-List: Kurve hinter die Subline). */
.hero--ink .hero__curve{opacity:.5}
.ink-cut .hero__curve{opacity:.42}
@keyframes curveBreathe{0%,100%{opacity:.5}50%{opacity:.3}}

/* --- 2. Ink-Feld pro Seite: „statement"-Komposition (Variante zum Ledger) --- */
/* nutzt die .ink-cut-Basis (bg/curve/farben), spiegelt aber die Anordnung
   und ersetzt den Zahlen-Ledger durch eine Hairline-Fakten-Liste → echter
   Rhythmus-Wechsel, kein wiederholtes Zahlenpanel. */
.ink-cut--statement .ink-cut__grid{align-items:center}
@media(min-width:900px){.ink-cut--statement .ink-cut__grid{grid-template-columns:1fr 1.04fr}}
.ink-cut__facts{margin:clamp(18px,2vw,26px) 0 0;padding:0;list-style:none}
.ink-cut__facts li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line-ink);min-width:0}
.ink-cut__facts li:first-child{border-top:1px solid var(--line-ink)}
.ink-cut__facts li svg{flex:0 0 auto;color:var(--brass-bright);margin-top:3px}
.ink-cut__facts li span{color:var(--on-ink-soft);font-size:.96rem;line-height:1.55;min-width:0}
.ink-cut__facts li strong{color:#fff;font-weight:600}
/* Statement-Bleed-Ziffer sitzt auf der Body-Seite oben, blutet über die Kante */
.ink-cut--statement .ink-cut__bleed{font-size:clamp(3.4rem,7vw,7rem);top:clamp(-46px,-3.6vw,-70px)}

/* --- 3. Portfolio: echte Eskalation (1 Objekt → ganzes Portfolio) --- */
.esc{margin:clamp(20px,2.4vw,30px) 0 0;display:grid;gap:clamp(16px,2vw,22px)}
.esc__row{display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;gap:clamp(12px,1.6vw,18px);
  align-items:center;min-width:0}
.esc__k{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-ink-soft);white-space:nowrap}
.esc__track{height:14px;border-radius:8px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--line-ink);overflow:hidden;position:relative;min-width:0}
.esc__fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--brass),var(--brass-bright));
  transform-origin:left center;transform:scaleX(var(--w,1))}
.esc__v{font-family:var(--font-display);font-weight:600;color:var(--brass-bright);
  white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(1.15rem,2vw,1.7rem);letter-spacing:-.01em}
.esc__row--base .esc__fill{background:rgba(243,133,7,.55)}
.esc__row--base .esc__v{color:#f4efe7;font-family:var(--font-body);font-weight:600;font-size:1rem}
.esc__delta{margin-top:2px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-top:14px;border-top:1px solid var(--brass)}
.esc__delta span{color:#f4efe7;font-size:.95rem}
.esc__delta strong{color:var(--brass-bright);font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.2rem);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
  .js .reveal .esc__fill{transform:scaleX(0)}
  .js .reveal.is-visible .esc__fill{transform:scaleX(var(--w,1));
    transition:transform 1.1s var(--ease)}
  .js .reveal.is-visible .esc__row:nth-child(2) .esc__fill{transition-delay:.14s}
}

/* --- 4. Curve-Echo: Signatur-Tiefe in einer HELLEN Mid-Section (so) --- */
.has-echo{position:relative;isolation:isolate}
.has-echo > .container{position:relative;z-index:2}
.echo-clip{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.curve-echo{position:absolute;z-index:0;pointer-events:none;right:-3%;bottom:-12%;
  width:min(720px,56%);height:auto;color:var(--brass)}
.curve-echo .ce-grid{stroke:rgba(13,27,42,.05)}
.curve-echo .ce-line{stroke:var(--brass);stroke-width:2.4;fill:none;opacity:.18;
  filter:drop-shadow(0 0 8px rgba(243,133,7,.14))}
.curve-echo .ce-dot{fill:var(--brass);opacity:.32}
@media(prefers-reduced-motion:no-preference){
  .js .has-echo .curve-echo .ce-line{stroke-dasharray:2600;stroke-dashoffset:2600}
  .js .has-echo.is-visible .curve-echo .ce-line{animation:heroDraw 2.3s .1s var(--ease) forwards}
}
@media(max-width:620px){.curve-echo{width:150%;right:-30%;bottom:auto;top:34%}}

/* --- 5. kontakt: Reveal-Choreografie im Body auf Home-Niveau --- */
@media(prefers-reduced-motion:no-preference){
  .js .reveal .contact-row,.js .reveal .example__body{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .reveal.is-visible .contact-row,.js .reveal.is-visible .example__body{opacity:1;transform:none}
  .js .reveal.is-visible .contact-row:nth-child(2),
  .js .reveal.is-visible .example__body:nth-child(2){transition-delay:.09s}
  .js .reveal.is-visible .contact-row:nth-child(3){transition-delay:.18s}
  .js .reveal.is-visible .contact-row:nth-child(4){transition-delay:.27s}
}
/* kontakt: rechte untere Kanal-Ecke verankern (Brass-Corner-Akzent) */
.contact-funnels .example__body--panel{position:relative}
.contact-funnels .example__body--panel .contact-line{position:relative;margin-top:auto;
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line-ink)}
.contact-funnels .example__body--panel .contact-line::before{content:"";position:absolute;
  right:0;top:-1px;width:64px;height:2px;background:var(--brass)}

/* --- 6. Zahl+Einheit: nur WERT-Zellen nowrap (v.a. @390 „≈ 2.520 € / a") --- */
.ink-cut__ledger li strong,.esc__v,.esc__delta strong,
.afa-ledger__row dd,.hero__calc-total-value,.hero__calc-row strong{white-space:nowrap}

/* --- 7. so-funktionierts: Ghost-Kapitel-Ziffer vs Schritt-01 Redundanz auflösen.
   Die vier Schritte tragen bereits 01–04 → die große Kapitel-Ghost-Ziffer der
   process-Sektion wird zur Wort-Marke statt einer zweiten „01". --- */
.section.process .section__head .rail-index{display:none}
.section.process .section__head .section__eyebrow{position:relative}

/* --- 8. scrub: sanfte Scroll-Choreografie am 2. Ink-Bild (stb) --- */
[data-scrub]{will-change:transform}
@media(prefers-reduced-motion:reduce){[data-scrub]{transform:none!important}}

/* --- 9. Mobile-Auflösung der 2. Ink-Felder (Overlap sauber stapeln) --- */
@media(max-width:899px){
  .ink-cut--statement .ink-cut__media{order:0;height:clamp(220px,58vw,320px)}
  .esc__row{grid-template-columns:1fr;gap:6px}
  .esc__track{order:3}
  .esc__row{align-items:start}
}

/* ════════════════════════════════════════════════════════════════════════
   SUB3-MOTION · scroll-CARRIED Signatur (Critic iter-03 kill-list #1–#3)
   Kern der Runde: die selbstzeichnende Brass-Kurve, das Curve-Echo und die
   Portfolio-Eskalation werden an den SCROLL gekoppelt (scrubbed), nicht nur
   beim Eintritt getriggert → die Seite bewegt sich BEIM Scrollen, nicht nur
   davor. CSS scroll-driven animations = Compositor, KEIN rAF, kein Layout-
   Thrash. @supports-Fallback auf die bestehende IO-/Load-Variante; das ganze
   Block liegt in prefers-reduced-motion:no-preference → reduced sieht die
   statischen Endzustände (Kurve gezeichnet, Balken voll). transform/stroke.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* #1 — Ink-Cut-Kurven zeichnen sich SCROLL-GEKOPPELT, während das jeweilige
       Ink-Feld durch den Viewport läuft (auf jeder Seite 2×). Ersetzt die
       Load-Draw+Breathe-Variante in unterstützenden Browsern. */
    .js .ink-cut .hero__curve-line{
      stroke-dasharray:2400;
      animation:scrubDraw2400 linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 62%;
    }
    .js .ink-cut .hero__curve-dot{
      opacity:0;
      animation:scrubDot linear both;
      animation-timeline:view();
      animation-range:cover 42% cover 72%;
    }

    /* #1 — Curve-Echo in der hellen so-Sektion ebenfalls scroll-gekoppelt. */
    .js .has-echo .curve-echo .ce-line{
      stroke-dasharray:2600;
      animation:scrubDraw2600 linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 58%;
    }

    /* Hero-Thesis-Linie bleibt bewusst LOAD-Draw + Breathe (erster Eindruck,
       ambient) — die scroll-CARRIED Signatur trägt über die 2 Ink-Cut-Kurven
       pro Seite (gleiches Brass-Motiv, mid-page) + Echo + Eskalation. So bleibt
       ambientMotion erhalten UND die Seite zeichnet beim Abwärtsscrollen. */

    /* #3 — Portfolio-Eskalation: die Balken WACHSEN scroll-gekoppelt 0→Ziel,
       während das ×5-Feld einläuft (Pin-Ersatz ohne JS). Named view-timeline
       auf .esc, die Fills referenzieren sie. */
    .esc{view-timeline:--escTL block}
    .js .reveal .esc__fill{
      animation:escGrow linear both;
      animation-timeline:--escTL;
      animation-range:entry 20% cover 56%;
    }
  }
}
@keyframes scrubDraw2400{from{stroke-dashoffset:2400}to{stroke-dashoffset:0}}
@keyframes scrubDraw2600{from{stroke-dashoffset:2600}to{stroke-dashoffset:0}}
@keyframes scrubHero{from{stroke-dashoffset:1500}to{stroke-dashoffset:0}}
@keyframes scrubDot{from{opacity:0}to{opacity:1}}
@keyframes escGrow{from{transform:scaleX(0)}to{transform:scaleX(var(--w,1))}}

/* #2 — kontakt Body-Choreografie verdichten: CTA-Band + Signatur einblenden,
   Hero-Duotone bekommt einen Scroll-Parallax-Moment (data-scrub via app.js).
   Die Hero-Kurve scrubbt bereits (hero--ink-Regel oben) → kontakt bewegt sich
   jetzt beim Scrollen, nicht nur der einmalige Count-up. */
.contact-funnels + .cta-band .cta-band__wrap{will-change:auto}

/* Nacht-Final: rechner-Befund-Aside auf Desktop sticky — jetzt wirksam, da overflow-x:clip (statt hidden)
   den globalen sticky-Kill behoben hat. Füllt den rechten Spalten-Void, begleitet den Wizard-Scroll.
   Höchste Source-Order = überschreibt die Basis-position:relative (FEHLER-019-bewusst). */
@media(min-width:1024px){ .calc__wrap > .calc__aside{ position:sticky; top:100px; align-self:start } }


/* =====================================================================
   HAUPTSPALTEN-ELEVATION — Tiefe & Motion (2026-07-02, no-rail)
   Owner-Auftrag: Tiefe/Layering + stärkere Motion NUR in der zentralen
   Inhaltsspalte. KEINE Marginalien-/Rand-Rail. Ink+Messing bleibt EIN
   Akzent. Alles transform/opacity; reduced-motion + coarse gedämpft.
   EOF => höchste Source-Order (FEHLER-019 bewusst).
   ===================================================================== */

:root{
  --shadow-float:0 44px 88px -36px rgba(9,18,30,.44), 0 12px 30px -16px rgba(9,18,30,.22);
  --shadow-lift:0 28px 58px -28px rgba(9,18,30,.32);
  --shadow-ink:0 46px 100px -44px rgba(0,0,0,.75);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --- Staggered sequence reveal (transform/opacity, kein CLS) --- */
@media(prefers-reduced-motion:no-preference){
  .js [data-seq] > *{opacity:0;transform:translateY(18px);
    transition:opacity .62s var(--ease), transform .62s var(--ease);will-change:opacity,transform}
  .js [data-seq] > .seq-in{opacity:1;transform:none;will-change:auto}
  .js [data-seq] > [aria-hidden="true"]{opacity:1;transform:none}
}

/* --- Textur: feines Grain auf den Ink-Flächen (~ Anti-Steril) --- */
.statement--ink, .cta-band{position:relative}
.statement--ink::after, .cta-band--echo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:150px 150px;opacity:.05;mix-blend-mode:overlay}
.statement--ink > .container{position:relative;z-index:2}

/* =====================================================================
   1) PICKER — schwebende Karten überlappen die Hero-Ink-Naht
   ===================================================================== */
/* DEFINITIV (Desktop+Mobil): picker ist eine normale HELLE Sektion mit DUNKLER Schrift bei JEDER
   Breite. Das frühere Ink-Band-Overlap (weiße Überschrift auf kurzem Ink-Band + negative margin)
   ließ die Überschrift unzuverlässig auf Hell landen (weiß-auf-hell) und wirkte "versetzt" - an
   Desktop wie Mobil. Tiefe kommt jetzt aus den schwebenden Karten (shadow-float), NICHT aus Overlap. */
.picker-section--lift{position:relative;z-index:4;margin-top:0;
  padding-top:clamp(40px,6vw,80px);background:var(--bg-soft)}
.picker-section--lift .section__head .kicker{color:var(--brass-text)}
.picker-section--lift .section__head .kicker::before{background:var(--brass)}
.picker-section--lift .section__head .section__title{color:var(--ink)}
.picker-section--lift .section__head .section__lead{color:var(--ink-soft)}
.picker-section--lift .hero__picker-grid{position:relative;z-index:2}
.picker-section--lift .hero-tile{background:var(--surface);border-color:transparent;
  box-shadow:var(--shadow-float);transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.picker-section--lift .hero-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift),0 0 0 1px var(--brass)}
.picker-section--lift .picker-section__note{color:var(--muted)}
@media(max-width:860px){
  .picker-section--lift{padding-top:clamp(28px,7vw,44px)}
}

/* =====================================================================
   2) STATEMENT (Ink) — Foto in Clip-Rahmen mit Scroll-Parallax + Index
   ===================================================================== */
.statement__media{position:relative}
.statement__ph{display:block;position:relative;overflow:hidden;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-ink);height:clamp(380px,42vw,520px)}
.statement__ph img{display:block;width:100%;height:116%;margin-top:-8%;object-fit:cover;
  border-radius:0;box-shadow:none;will-change:transform}
.statement--ink .statement__ph img{filter:none}
.statement__idx{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(13,27,42,.62);backdrop-filter:blur(4px);padding:6px 11px;border-radius:var(--radius)}
@media(max-width:860px){.statement__ph{height:clamp(280px,62vw,380px)}}
@media(prefers-reduced-motion:reduce),(hover:none) and (pointer:coarse){
  .statement__ph img{height:100%;margin-top:0}
}

/* =====================================================================
   3) AFA — Signatur-Geste: Ledger schwebt & rechnet sich beim Scrollen,
   übergroße Messing-Ghost-Ziffer blutet über die Sektionsnaht.
   ===================================================================== */
.afa--signature{position:relative;overflow:visible;isolation:isolate}
.afa--signature .container{position:relative;z-index:2}
.afa__ghost{position:absolute;z-index:0;right:clamp(-18px,-1vw,-6px);bottom:clamp(-64px,-6vw,-30px);
  font-family:var(--font-display);font-weight:600;font-size:clamp(9rem,26vw,30rem);line-height:.7;
  color:transparent;-webkit-text-stroke:1.5px rgba(243,133,7,.20);pointer-events:none;
  letter-spacing:-.03em;user-select:none}
.afa--signature .afa-ledger{box-shadow:var(--shadow-float);position:relative;z-index:2;
  transform:translateY(0);transition:box-shadow .5s var(--ease)}
.afa--signature .afa-ledger__row--result{position:relative;overflow:hidden}
.afa--signature .afa-ledger__row--result::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;background-image:var(--grain);background-size:150px 150px;opacity:.06;mix-blend-mode:overlay}
.afa--signature .afa-ledger__row--result dt,.afa--signature .afa-ledger__row--result dd{position:relative;z-index:1}
@media(max-width:900px){
  .afa__ghost{font-size:clamp(7rem,40vw,12rem);right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:-40px;opacity:.8}
}
@media(prefers-reduced-motion:reduce),(hover:none) and (pointer:coarse){
  .afa__ghost{transform:none!important}
  .afa--signature .afa__ghost{position:absolute}
}

/* =====================================================================
   4) PROCESS — flachste Sektion → übergroße Ghost-Ziffern als Layout-
   Träger, gestaffelte Schritte mit gerichteter Tiefe (kein Rail/Spine).
   ===================================================================== */
.process--depth .process__grid{max-width:960px;position:relative}
.process--depth .process__step{position:relative;grid-template-columns:clamp(96px,11vw,150px) 1fr;
  align-items:center;padding:clamp(26px,3.4vw,42px) 0;overflow:visible;
  transition:transform .5s var(--ease)}
.process--depth .process__num{position:relative;font-size:clamp(4.4rem,9vw,8rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.6px rgba(243,133,7,.55);letter-spacing:-.04em;
  transition:-webkit-text-stroke-color .5s var(--ease), color .5s var(--ease)}
.process--depth .process__step h3{font-size:clamp(1.3rem,1.9vw,1.6rem)}
.process--depth .process__step:hover{transform:translateX(6px)}
.process--depth .process__step:hover .process__num{color:rgba(243,133,7,.10);-webkit-text-stroke-color:var(--brass)}
.process--depth .process__step.seq-in .process__num{}
@media(max-width:680px){
  .process--depth .process__step{grid-template-columns:auto 1fr;gap:16px}
  .process--depth .process__num{font-size:clamp(3.2rem,15vw,4.4rem)}
  .process--depth .process__step:hover{transform:none}
}

/* =====================================================================
   5) PRICING — Kontrastfeld: die empfohlene Stufe wird ein Ink-Panel,
   das die Zeilen-Monotonie bricht (Layout-Überraschung) + schwebt.
   ===================================================================== */
.pricing__grid--depth{border-top:1px solid var(--ink);position:relative}
.pricing__grid--depth .price-card{transition:transform .5s var(--ease)}
.pricing__grid--depth .price-card--hi{background:var(--bg-ink);color:var(--on-ink);
  border-bottom:0;border-radius:var(--radius-lg);margin:6px 0;padding:clamp(26px,3.2vw,36px) clamp(22px,2.6vw,34px);
  box-shadow:var(--shadow-ink);position:relative;z-index:2}
.pricing__grid--depth .price-card--hi::after{content:"Empfohlen";position:absolute;top:0;right:clamp(22px,2.6vw,34px);
  transform:translateY(-50%);background:var(--brass);color:#fff;font-size:.6rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill)}
.pricing__grid--depth .price-card--hi::before{color:var(--brass-bright)}
.pricing__grid--depth .price-card--hi h3{color:#fff}
.pricing__grid--depth .price-card--hi .price-card__note{color:var(--on-ink-soft)}
.pricing__grid--depth .price-card--hi .price-card__amount strong{color:#fff}
.pricing__grid--depth .price-card--hi .price-card__amount span,
.pricing__grid--depth .price-card--hi .price-card__net{color:var(--on-ink-soft)}
.pricing__grid--depth .price-card--hi .price-card__list li{color:var(--on-ink)}
.pricing__grid--depth .price-card--hi .price-card__list li::before{background:var(--brass-bright)}
.pricing__grid--depth .price-card--hi .price-card__link{color:#fff}
.pricing__grid--depth .price-card--hi .price-card__link:hover{color:var(--brass-bright)}
@media(max-width:680px){
  .pricing__grid--depth .price-card--hi::after{right:16px}
}

/* =====================================================================
   6) CTA-BAND — bleeding Messing-Kurven-Echo (zentral/rechts, scrubbt),
   Grain, Inhalt darüber. Kein linker Spine.
   ===================================================================== */
.cta-band--echo{position:relative;overflow:hidden}
.cta-band--echo > .container{position:relative;z-index:2}
.cta-band__echo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  color:var(--brass);opacity:.5}
.cta-band__echo svg{position:absolute;right:-6%;bottom:-14%;width:min(1180px,88%);height:auto}
.cta-band__echo-line{stroke-dasharray:1500;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .cta-band--echo{view-timeline:--ctaTL block}
    .cta-band__echo-line{stroke-dashoffset:1500;animation:ctaDraw linear both;
      animation-timeline:--ctaTL;animation-range:entry 10% cover 70%}
    .cta-band__echo-dot{opacity:0;animation:scrubDot linear both;
      animation-timeline:--ctaTL;animation-range:cover 55% cover 75%}
  }
}
@keyframes ctaDraw{from{stroke-dashoffset:1500}to{stroke-dashoffset:0}}

/* --- DEPTH-2 Polish (post-critic iter-01, ±0.3 taste-wobble) --- */
/* Process weniger luftig: engere Schritt-Rhythmik (Critic #1). */
.process--depth .process__step{padding-block:clamp(18px,2.4vw,28px)}
/* Picker: EIN Betonungs-Beat auf den häufigsten Fall = erste Kachel (vermietete ETW),
   damit die 5er-Reihe eine Hierarchie hat statt Karten-Suppe (Critic #2). Kein Claim, nur
   permanenter Messing-Top-Akzent + feiner Ring = „hier starten". */
.picker-section--lift .hero-tile:first-child::before{transform:scaleX(1)}
.picker-section--lift .hero-tile:first-child{box-shadow:var(--shadow-lift),0 0 0 1.5px rgba(243,133,7,.42)}

/* =====================================================================
   SUBSEITEN-FEINSCHLIFF — Hauptspalten-Elevation über die 6 Content-
   Unterseiten (2026-07-02, no-rail). Zieht die gehobene Home-Sprache
   kohärent nach: Ink-Zäsuren als schwebende Platten die die Ink→Hell-
   Naht überlappen, Ledger die sich beim Scrollen berechnen (data-seq),
   Foto-Parallax (data-scrub), Count-up ohne Breiten-Jitter, Kurven-Echo
   am Schluss-CTA. EINE Akzentfarbe, EINE Easing-Sprache. transform/
   opacity only; reduced-motion + coarse gedämpft. EOF => Source-Order.
   ===================================================================== */

/* --- Ink-Cut = schwebende Ink-Platte (Bureau-Borsche-Tiefe). Die Messing-
   Struktur-Ziffer blutet bereits über die obere Naht; hier wird die Platte
   deutlicher abgehoben und die FOLGENDE Hellsektion überlappt die untere
   Naht = zweifache Ebenen-Tiefe an jeder Ink→Hell-Kante. --- */
.ink-cut{box-shadow:var(--shadow-float)}
.ink-cut + section{position:relative;z-index:3;
  margin-top:calc(-1 * clamp(16px,2.6vw,38px));
  box-shadow:0 -36px 64px -46px rgba(9,18,30,.36)}
.ink-cut + section > .container{position:relative;z-index:2}
@media(max-width:680px){
  .ink-cut + section{margin-top:calc(-1 * clamp(10px,3vw,20px))}
}

/* --- Count-up: tabellarische Ziffern, damit die Breite beim Hochzählen
   nicht springt (kein CLS/Jitter). Erbt Familie/Größe vom Eltern-Element. --- */
[data-countup]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --- Ledger-Zeilen berechnen sich beim Scrollen: is-result (die eigentliche
   Kennzahl) bekommt beim Stagger einen Hauch mehr Distanz = kleiner Schluss-
   akzent, ohne aus der EINEN Easing-Sprache auszubrechen. --- */
@media(prefers-reduced-motion:no-preference){
  .js .ink-cut__ledger[data-seq] > .is-result{will-change:opacity,transform}
}

/* --- Foto-Parallax auf den Ink-Duotone-Figuren: data-scrub driftet die
   ganze Figur vertikal (JS, transform-only). Auf Touch/reduced steht sie. --- */
@media(prefers-reduced-motion:reduce),(hover:none) and (pointer:coarse){
  .ink-figure[data-scrub],.contact-portrait__fig[data-scrub],
  [data-scrub]{transform:none!important}
}

/* =====================================================================
   FUNNEL-FEINSCHLIFF — Hauptspalten-Sprache DEZENT über die 2 Funnel-
   Seiten (/rechner + /gutachten-beauftragen). Conversion zuerst: der
   Wizard/das Formular bleibt ruhig, klar, schnell. Zieht nur die Tiefe/
   Textur/Reveal-Sprache kohärent nach — KEINE Motion auf Formular-Eingabe
   oder -Fokus, count-up NUR auf der statischen Befund-Zahl (nicht auf der
   Live-Berechnung die sich eh ändert). Additiv, EOF => Source-Order
   (FEHLER-019 bewusst). transform/opacity only; reduced-motion + coarse
   gedämpft. KEINE Rand-Rail / Randnummern / padding-left-Gutter.
   ===================================================================== */

/* --- 1) Seam-Tiefe: der helle Funnel-Inhalt tuckt sichtbar unter die
   Ink-Kopfzeile (weiche Schatten-Schwelle statt harter Kante = dieselbe
   Ink→Hell-Naht wie Home/Content, nur leiser). Reine Bemalung hinter
   dem Inhalt (z-0), Text bleibt gestochen (Wrap z-1). --- */
.calc,.wizard{position:relative}
.calc::before,.wizard::before{content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(56px,8vw,116px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,27,42,.085),rgba(13,27,42,0))}
.calc__wrap,.wizard__container{position:relative;z-index:1}
/* Funnel-Float: gerichteter Weit-Schatten (Lift) + KNACKIGE Nah-Schicht,
   damit die schwebende Ink-Platte schon oberhalb der Falz eindeutig
   abhebt (Critic-Nudge: Tiefe soll above-fold sofort lesen). */
:root{--shadow-funnel:0 40px 82px -34px rgba(9,18,30,.52),
  0 16px 34px -14px rgba(9,18,30,.30), 0 3px 9px -4px rgba(9,18,30,.22)}

/* --- 2) Ink-Aside = schwebende Ink-Platte: gerichteter Float-Schatten +
   feines Grain (dieselbe Textur/Licht-Sprache der Ink-Flächen auf Home/
   Content). Grain liegt HINTER dem Inhalt (Kinder z-1), damit die
   Befund-/Live-Zahlen gestochen bleiben. --- */
.calc__aside{box-shadow:var(--shadow-funnel)}
.calc__aside::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:150px 150px;opacity:.05;mix-blend-mode:overlay;
  border-radius:inherit}
.calc__aside > *{position:relative;z-index:1}

.wizard__aside .preview-card--result,.wizard__aside .preview-card:first-child{
  position:relative;box-shadow:var(--shadow-funnel);overflow:hidden}
.wizard__aside .preview-card--result::after,.wizard__aside .preview-card:first-child::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:150px 150px;opacity:.05;mix-blend-mode:overlay;
  border-radius:inherit}
.wizard__aside .preview-card--result > *,.wizard__aside .preview-card:first-child > *{
  position:relative;z-index:1}
/* Die weiße Preis-Karte bleibt flach/ruhig — nur die Ink-Platte bekommt Textur. */
.wizard__aside .preview-card--price::after{display:none}

/* --- 3) Count-up: tabellarische Ziffern (kein Breiten-Jitter, kein CLS).
   Die Befund-Zahl (statisch, ≈ 2.520 €/a) zählt beim Einscrollen hoch —
   exakt wie die Kennzahl auf Home/Content. Erbt Display-Font. Tabular-nums
   sind breiter als proportional → in der schmalen 260px-Befund-Spalte einen
   Hauch kleiner deckeln, damit „≈ 2.520 €/a" @1440 nicht über die dl-Kante
   läuft (gemessener Item-Overflow), aber weiterhin die dominante Ziffer bleibt. */
.calc__aside-row--accent dd[data-countup]{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;font-size:clamp(1.95rem,2.25vw,2.3rem)}

/* --- 4) Reveal-Sprache: [data-seq] staggert NUR statische Blöcke (Intro,
   Assurance-Reihe, Wizard-Kopf). Formular-Steps/Felder werden NIE über
   data-seq bewegt (die haben ihre eigene ruhige calcIn-Blende bzw. gar
   keine). Reduced/coarse + Safety-Net erben aus der zentralen Engine. --- */
@media(prefers-reduced-motion:no-preference){
  .js .calc__intro[data-seq] > *,
  .js .calc__assure[data-seq] > *,
  .js .wizard__header[data-seq] > *{will-change:opacity,transform}
}
/* Assurance-Reihe: die drei Belege bekommen einen Hauch gerichtete Tiefe
   beim Hover (Licht), damit die Reihe nicht flach bleibt — kein Layout-Shift. */
.calc__assure-item{transition:transform .4s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .calc__assure-item:hover{transform:translateY(-2px)}
}

/* --- Mobile: Seam-Tint schlanker, damit über der schmalen Spalte kein
   grauer Deckel entsteht; Float-Schatten der Ink-Platten weicher. --- */
@media(max-width:680px){
  .calc::before,.wizard::before{height:clamp(34px,7vw,60px);
    background:linear-gradient(180deg,rgba(13,27,42,.05),rgba(13,27,42,0))}
  .calc__aside,.wizard__aside .preview-card--result,
  .wizard__aside .preview-card:first-child{box-shadow:var(--shadow-lift)}
}

/* =====================================================================
   RESPONSIVE-QA BUILD 2026-07-02 — Owner: "mobil sichtbare Anzeigefehler".
   Alle Fixes mobil/tablet gescopt, additiv, EOF => höchste Source-Order
   (FEHLER-019 bewusst). Desktop NICHT angefasst. Marke/Fonts unberührt.
   ===================================================================== */

/* ---- FIX 1 (FEHLER-019, Owner-Hauptklasse): der Mobile-Outline-Button-
   Umbau `@media(max-width:560px) .btn-link:not(.btn-link--on-ink)`
   (Zeile ~2033) setzt color+border auf var(--ink) und gewinnt per
   Source-Order gegen die Ink-Kontext-Regeln (.statement--ink/.ink-cut/…
   .btn-link => --on-ink). Ergebnis: btn-links in Ink-Flächen werden mobil
   zu DUNKEL-auf-DUNKEL (Telefon-Link im Ink-Statement = unsichtbar).
   Hier für JEDE Ink-Fläche wieder heller Text + heller Rahmen. ---- */
@media(max-width:560px){
  .statement--ink .btn-link:not(.btn-link--on-ink),
  .ink-cut .btn-link:not(.btn-link--on-ink),
  .cta-band .btn-link:not(.btn-link--on-ink),
  .hero--stage .btn-link:not(.btn-link--on-ink),
  .hero--ink .btn-link:not(.btn-link--on-ink),
  .contact-hero .btn-link:not(.btn-link--on-ink),
  .example__body--panel .btn-link:not(.btn-link--on-ink),
  .example--portfolio .example__highlight .btn-link:not(.btn-link--on-ink),
  .faq__aside .btn-link:not(.btn-link--on-ink),
  .calc__aside .btn-link:not(.btn-link--on-ink),
  .thanks__card--hi .btn-link:not(.btn-link--on-ink),
  .pricing__grid--depth .price-card--hi .btn-link:not(.btn-link--on-ink){
    color:var(--on-ink);border-color:rgba(255,255,255,.30);background:transparent
  }
  .statement--ink .btn-link:not(.btn-link--on-ink):hover,
  .ink-cut .btn-link:not(.btn-link--on-ink):hover,
  .cta-band .btn-link:not(.btn-link--on-ink):hover,
  .hero--stage .btn-link:not(.btn-link--on-ink):hover,
  .hero--ink .btn-link:not(.btn-link--on-ink):hover,
  .contact-hero .btn-link:not(.btn-link--on-ink):hover,
  .example__body--panel .btn-link:not(.btn-link--on-ink):hover,
  .example--portfolio .example__highlight .btn-link:not(.btn-link--on-ink):hover,
  .faq__aside .btn-link:not(.btn-link--on-ink):hover,
  .calc__aside .btn-link:not(.btn-link--on-ink):hover,
  .thanks__card--hi .btn-link:not(.btn-link--on-ink):hover,
  .pricing__grid--depth .price-card--hi .btn-link:not(.btn-link--on-ink):hover{
    background:rgba(255,255,255,.06);color:var(--brass-bright);border-color:var(--brass-bright)
  }
}

/* ---- FIX 2: Tap-Targets der Kontakt-Karten-Links (.hero__calc--contact
   Telefon/E-Mail) waren auf Touch/Tablet nur ~20px hoch (gemessen faq@768).
   Auf Coarse-Pointer volle 44px Hit-Area, ohne Desktop zu berühren. ---- */
@media(pointer:coarse){
  .hero__calc-row a[href^="tel"],
  .hero__calc-row a[href^="mailto"]{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- FIX 3: Stats-4er-Reihe (.stats__grid repeat(4,1fr), min-760) ist im
   Tablet-Bereich zu eng für die breiteste Display-Serifen-Kennzahl
   ("ISO 17024") → letzte Spalte wurde am rechten Viewport-Rand
   abgeschnitten (gemessen rnd@768, right 776 > vw 768). Im Tablet-Bereich
   760-959px 2x2-Raster (doppelte Spaltenbreite, nichts schneidet). Ab 960px
   wieder 4er-Reihe (Desktop unberührt/abgenommen). ---- */
@media(min-width:760px) and (max-width:959px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stat strong{overflow-wrap:break-word;min-width:0}
}

/* =========================================================================
   RUNDE A (maxA, 2026-07-02) — Signatur-Scrub-Engine + globale Defekt-Fixes
   Rein additiv, EOF (Source-Order gewinnt bei gleicher Spezifität).
   ========================================================================= */

/* ---- A1: Hero-Messing-Lichtstreif (einmal beim Load über das Duotone-Foto) ---- */
.hero__sheen{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,201,128,.0) 42%,
    rgba(255,201,128,.55) 50%,rgba(255,168,64,.28) 55%,transparent 62%);
  transform:translateX(-120%)}
@media(prefers-reduced-motion:no-preference){
  .js .hero--stage .hero__sheen{opacity:1;animation:heroSheen 2.05s cubic-bezier(.5,.02,.35,1) .55s 1 both}
}
@keyframes heroSheen{0%{transform:translateX(-120%)}100%{transform:translateX(130%)}}

/* ================= SIGNATUR-SCRUB-ENGINE (.ledger-scrub) =================
   Wiederverwendbar. Markup-API:
   - Sektion .ledger-scrub  +  Pin-Wrapper [data-ledger-scrub] (2-spaltiges Grid)
   - .ledger-scrub__stage      = das gepinnte (sticky) Element (rechte Spalte)
   - [data-scrub-to]           = Zahl scrubbt from→to  (data-scrub-from/-decimals/-prefix/-suffix)
   - [data-scrub-bar]          = Balken scaleX from→to (--w gesetzt von der Engine)
   - .afa__intro (linke Spalte) scrollt normal
   Desktop (fine pointer, motion ok): Pin + Scroll-Scrub.
   Coarse/Mobil: kein Pin (statisch gestapelt) → Count-up beim Einscrollen (JS-Fallback).
   reduced-motion: Endzustand sofort (2.520 €, 4 %, 25 J.).
   ========================================================================= */
.afa--signature.ledger-scrub{overflow:visible}
.ledger-scrub .afa__grid{align-items:start}
@media(min-width:861px){
  .js .ledger-scrub .afa__grid[data-ledger-scrub]{
    min-height:calc(100vh + var(--ls-travel,58vh));
    grid-template-columns:1fr 1.05fr}
  .js .ledger-scrub__stage{position:sticky;top:var(--ls-top,13vh);align-self:start}
  .js .ledger-scrub .afa__intro{position:sticky;top:var(--ls-intro-top,16vh);align-self:start}
}
.ledger-scrub__stage{display:block}
.ledger-scrub__hint{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-deep);font-weight:600}
.ledger-scrub__hint svg{color:var(--brass)}
@media(prefers-reduced-motion:no-preference){
  .js .ledger-scrub__hint svg{animation:lsHintBob 1.9s ease-in-out infinite}
}
@keyframes lsHintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(max-width:860px){.ledger-scrub__hint{display:none}}

.afa-ledger--live{padding-bottom:6px}
/* Dials: AfA-Satz + RND, gemeißelte Kennzahlen */
.ls-dials{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.ls-dial{background:var(--surface);padding:18px clamp(18px,2.4vw,26px) 16px;display:flex;
  flex-direction:column;gap:5px;min-width:0}
.ls-dial--rnd{background:var(--surface-soft)}
.ls-dial__label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--note-paper)}
.ls-dial__val{font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:var(--tnum);white-space:nowrap}
.ls-dial__val data{color:var(--brass-deep)}
.ls-dial--rnd .ls-dial__val data{color:var(--ink)}
.ls-dial__meta{font-size:.7rem;line-height:1.35;color:var(--note-paper)}

/* Balken-Vergleich AfA bisher vs. neu */
.ls-bars{padding:16px clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:12px}
.ls-bar{display:grid;grid-template-columns:5.4rem 1fr auto;align-items:center;gap:12px}
.ls-bar__k{font-size:.76rem;color:var(--ink-soft);white-space:nowrap}
.ls-bar--neu .ls-bar__k{color:var(--ink);font-weight:600}
.ls-bar__track{height:12px;border-radius:3px;background:var(--bg-soft-2);overflow:hidden;min-width:0}
.ls-bar__fill{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--w,1));
  border-radius:3px;background:var(--ink-2)}
.ls-bar__fill--base{transform:scaleX(.5);background:var(--ink-soft);opacity:.55}
.ls-bar--neu .ls-bar__fill{background:linear-gradient(90deg,var(--brass-deep),var(--brass));
  transition:none}
.ls-bar__v{font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:var(--tnum);white-space:nowrap;
  justify-self:end;min-width:0}
.ls-bar__v data{font-variant-numeric:tabular-nums}

/* Ergebnis-Zeile (dunkel, Messing-Zahl) */
.afa-ledger--live .ls-result{margin-top:0}
.ls-result dd em{font-variant-numeric:tabular-nums;font-feature-settings:var(--tnum)}

/* Mobil/Tablet: kein Pin, sauber gestapelt */
@media(max-width:860px){
  .ledger-scrub .afa__grid{grid-template-columns:1fr;gap:30px;min-height:0}
  .ledger-scrub__stage{position:static}
  .ls-dial__val{font-size:clamp(1.8rem,7vw,2.4rem)}
}
@media(max-width:420px){
  .ls-bar{grid-template-columns:1fr;gap:4px}
  .ls-bar__track{grid-row:2}.ls-bar__v{justify-self:start}
}

/* ---- A2.2: Kontrast-Anhebung Meta/Disclaimer/Sekundärtext (≥4.5:1, DOM-verifiziert) ----
   Neue Tokens: --note-paper (auf Papier ≥5.7:1), --note-ink (auf Ink ≥8:1, OHNE opacity
   damit getComputedStyle die wahre effektive Farbe liefert). */
:root{--note-paper:#565f6d;--note-ink:#a9b8ca}
.picker-section__note,.picker-section--lift .picker-section__note,
.afa-ledger__note,.hero__ledger-note,.thanks__note,.calc-done__note,
.faq-hero .hero__calc-total-note{color:var(--note-paper)}
/* Ink-seitige Notizen: opacity raus, helleres Note-Token */
.hero__calc-total-note,.calc__aside-note,.preview-seed__note,
.hero--ink .afa-ledger__note,.ink-cut__note,
.statement--ink .statement__meta{color:var(--note-ink);opacity:1}
/* pricing-meta auf Ink-Panel */
.pricing__grid--depth .price-card--hi .price-card__note{color:var(--note-ink);opacity:1}

/* ---- A2.1: Messing-Kurven-Echo kreuzt NIE Text ----
   Desktop: strikt hinter Text (z-index 0, pointer-events none), an die untere
   rechte Ecke geankert, gedämpfte Opazität. <768px: komplett ausblenden
   (kein Verlaufen über Fließtext/CTAs/Tabellen). Kill der alten @620-Regel,
   die die Kurve auf top:34% in die Textspalte schob. ---- */
.curve-echo,.cta-band__echo{z-index:0!important;pointer-events:none!important}
.echo-clip{z-index:0!important;pointer-events:none!important}
.curve-echo .ce-line{opacity:.14}
.curve-echo .ce-dot{opacity:.26}
@media(min-width:769px){
  .curve-echo{right:-2%;bottom:-14%;top:auto;width:min(760px,58%)}
}
@media(max-width:768px){
  .curve-echo,.cta-band__echo{display:none!important}
}

/* ---- A2.3: Distinktiver Header bleibt mobil greifbar ----
   Credential-Slim-Leiste (PERSONENZERTIFIZIERT · ISO 17024) mobil BEHALTEN
   (Marke greifbar), nur die verlorene Einzel-Telefonnummer weg. Overlay-Menü
   ist bereits full-bleed Ink; zusätzlich markanter Messing-Auslauf. ---- */
@media(max-width:768px){
  .mh-util{display:block;background:#091320;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
  .mh-util__wrap{justify-content:center;min-height:32px}
  .mh-util__contact{display:none}
  .mh-util__cert{justify-content:center}
  .mh-util__cert-t{white-space:normal;text-align:center;font-size:.6rem;letter-spacing:.13em;
    color:#b9c6d6}
  /* markanter Ruhezustand statt "nur dunkle Bar": Messing-Hairline betont */
  .mh-bar::after{opacity:1;height:2px}
}
/* Overlay-Menü: Credential-Kopf + Kontakt-Fuß, damit es kein nackter Burger ist */
.mh-nav__ovl-top,.mh-nav__ovl-foot{display:none}
@media(max-width:980px){
  .mh-nav__ovl-top{display:flex;align-items:center;gap:9px;padding:0 2px 18px;margin-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--font-mono);font-size:.64rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright)}
  .mh-nav__ovl-top svg{flex:0 0 auto}
  .mh-nav__ovl-foot{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.1)}
  .mh-nav__ovl-foot a{color:#fff;font-family:var(--font-display);font-size:1.3rem;font-weight:500}
  .mh-nav__ovl-foot span{color:var(--on-ink-soft);font-size:.74rem}
}

/* ---- RUNDE A · Nachtrag: Kontrast (--muted global leicht dunkler → ≥4.5:1 auf
   allen hellen Gründen, DOM-verifiziert) + zwei Overflow-Quellen (FEHLER-008/019) ---- */
:root{--muted:#5d6774}   /* war #6b7686 (4.12 auf Papier) → 5.13 auf Papier, überall ≥4.5 */

/* Hero-Kicker durfte @360 nicht mehr umbrechen (white-space:nowrap) → 18px Overflow.
   Ab ≤420px umbrechen lassen (Az.-Chip + Label stapeln sauber). */
@media(max-width:420px){
  .hero--stage .hero__kicker{flex-wrap:wrap;white-space:normal;row-gap:6px}
}
/* FAQ-Summary-Grid: 1fr-Mittelspalte konnte unter min-content (langes Kompositum
   "Restnutzungsdauer-Gutachten") nicht schrumpfen → 14px Item-Overflow. minmax(0,1fr)
   + overflow-wrap lässt am Bindestrich umbrechen (kein Wort-Mitten-Bruch). */
.faq__item summary{grid-template-columns:auto minmax(0,1fr) auto;overflow-wrap:break-word}
@media(max-width:560px){.faq__item summary{grid-template-columns:auto minmax(0,1fr) auto}}
@media(max-width:900px){.faq__item summary{grid-template-columns:auto minmax(0,1fr) 44px}}

/* ---- RUNDE A · Nachtrag 2: FEHLER-008 — Flex/Grid-Items brauchen min-width:0,
   sonst sprengt min-content den Container (still von overflow-x:clip kaschiert).
   Betraf .faq__item (Item 382>354 @390 auf 5 Routen), .stat-Kennzahl, hero__visual. ---- */
.faq__list{min-width:0}
.faq__list .faq__item{min-width:0;max-width:100%}
.faq__answer,.faq__answer p{min-width:0;overflow-wrap:break-word}
.faq__groups,.faq__group{min-width:0}
.stat{min-width:0}
.stat strong{overflow-wrap:break-word;min-width:0}
.hero--stage .hero__visual{min-width:0}

/* ---- RUNDE A · Nachtrag 3: afa__ghost (×2) in der gepinnten Scrub-Sektion an die
   rechte Kante binden (right:0 statt negativ) → kein horizontaler Body-Bleed mehr
   (documentElement war bereits geclippt, jetzt auch body sauber). Vertikaler
   Bleed (bottom negativ) bleibt = kein h-Scroll. ---- */
.afa--signature.ledger-scrub .afa__ghost{right:0;left:auto}
@media(min-width:861px){
  .afa--signature.ledger-scrub .afa__ghost{bottom:auto;top:clamp(40px,10vh,120px)}
}

/* ======================================================================
   RUNDE B (maxB) — Signatur-Scrub ausgerollt auf 6 Content-Money-Pages
   + Tiefe-Devices. Overrides am Dateiende (Source-Order, FEHLER-019).
   Nur Ink #0d1b2a + Messing #F38507. Spectral (upright, kein Italic) + Hanken.
   ====================================================================== */

/* ---- GLOBAL-FINISH: Hero-Messing-Kurve nie über Text @≤768 ----
   Killt die alte @600-Regel (.hero__curve{top:30%}) per !important, weil
   .hero--stage .hero__curve (0,2,0) den bottom-Wert sonst behält → Kurve
   spannte top:30%..bottom:-5% quer über Headline/CTA/Trust. Jetzt bottom-
   geankert + stark gedimmt (bleibt Tiefe-Textur, kreuzt keinen Text). */
@media(max-width:768px){
  .hero__curve{top:auto!important;bottom:-4%!important;right:-20%!important;width:150%!important}
  .hero__curve-line{opacity:.16!important}
  .hero__curve-dot{opacity:.4!important}
  .hero__curve-grid{opacity:.5}
}

/* ---- Tiefe-Device: Full-bleed Duotone-Foto hinter einer Ink-Sektion ----
   Foto blutet über die Sektionskante (kein eingerahmtes Rechteck), Ink+Messing-
   Duotone (ink-figure-Rezept: grayscale+#12314f color-blend), dunkler Verlauf
   für Textlesbarkeit. Content/Ledger-Card überlappt die Foto-Kante = Layering. */
.bleed-stage{position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-ink);color:var(--on-ink)}
.bleed-stage__photo{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0;overflow:hidden}
.bleed-stage__photo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.6)}
.bleed-stage__photo::before{content:"";position:absolute;inset:0;background:#12314f;mix-blend-mode:color}
.bleed-stage__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,18,30,.74),rgba(9,18,30,.5) 42%,rgba(9,18,30,.84)),
             radial-gradient(120% 90% at 90% -6%,rgba(243,133,7,.16),transparent 55%)}
.bleed-stage > .container{position:relative;z-index:2}
.bleed-stage__cap{position:absolute;z-index:2;left:clamp(16px,4vw,44px);bottom:clamp(14px,2.4vw,26px);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.66);pointer-events:none;max-width:60%}

/* ---- Signatur-Scrub auf Ink-Bleed-Bühne: helle Ledger-Card schwebt über dem
   dunklen Duotone-Foto. Intro-Spalte explizit on-ink (NICHT via .on-ink-Cascade,
   damit die weiße Card ihre dunklen Zahlen behält). ---- */
.afa-scrub--ink{background:var(--bg-ink);color:var(--on-ink);
  padding-block:clamp(60px,8vw,120px);box-shadow:0 30px 60px -40px rgba(9,18,30,.55)}
.afa-scrub--ink .afa__intro .kicker{color:var(--brass-bright)}
.afa-scrub--ink .afa__intro .kicker::before{background:var(--brass-bright)}
.afa-scrub--ink .afa__intro .section__title{color:var(--on-ink)}
.afa-scrub--ink .afa__intro .section__title em{color:var(--brass-bright);font-style:normal}
.afa-scrub--ink .afa__intro .section__lead{color:var(--on-ink-soft)}
.afa-scrub--ink .afa__intro .section__lead strong{color:#f4efe7}
.afa-scrub--ink .ledger-scrub__hint{color:var(--brass-bright)}
.afa-scrub--ink .ledger-scrub__hint svg{color:var(--brass-bright)}
.afa-scrub--ink .btn--outline{border-color:rgba(255,255,255,.28);color:var(--on-ink)}
.afa-scrub--ink .btn--outline:hover{border-color:var(--brass-bright);color:var(--brass-bright);background:rgba(255,255,255,.04)}
/* Ghost-Ziffer auf Ink heller Messing-Outline */
.afa-scrub--ink .afa__ghost{-webkit-text-stroke-color:rgba(243,133,7,.62);color:transparent}
/* Card überlappt die Foto-Kante nach unten (Layering) */
.afa-scrub--ink .ledger-scrub__stage .afa-ledger{position:relative;z-index:3}
.afa-scrub--ink .afa-ledger__note{color:var(--note-ink);opacity:1}

/* ---- Mobil (@≤860): Tiefe HALTEN statt flach stapeln ----
   Ghost-Großziffer ~1,8× + eine bewusste Card/Foto-Überlappung erhalten. */
@media(max-width:860px){
  .afa-scrub--ink{padding-block:clamp(48px,12vw,72px)}
  .afa-scrub--ink .afa__ghost{font-size:clamp(11rem,58vw,17rem)!important;
    top:auto!important;bottom:-4%!important;left:50%!important;transform:translateX(-50%)!important;
    opacity:.5}
  /* Card überlappt die untere Foto-Kante (eine bewusste Überlappung @390) */
  .afa-scrub--ink .ledger-scrub__stage{margin-top:-8px}
  .bleed-stage__cap{position:static;margin-top:14px;max-width:none}
}

/* ---- so-funktionierts · Prozess-Scroll-Spine (ink-on-ink, Messing-Haarlinie,
   gepinnte angeschnittene Ghost-Spectral-Ziffer 01→04, Schritte bauen sich auf) ---- */
.process-spine{background:var(--bg-ink);color:var(--on-ink);position:relative;isolation:isolate;
  overflow:hidden;padding-block:clamp(56px,7vw,108px)}
.process-spine::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 92% at 10% -8%,rgba(243,133,7,.10),transparent 55%),
             linear-gradient(180deg,#0d1b2a 0%,#0f2033 100%)}
.process-spine > .container{position:relative;z-index:2}
.process-spine .section__eyebrow{color:var(--brass-bright)}
.process-spine .section__eyebrow::before{background:var(--brass-bright)}
.process-spine .section__title{color:var(--on-ink)}
.process-spine .section__title em{color:var(--brass-bright);font-style:normal}
.spine__lead{color:var(--on-ink-soft);max-width:40ch;margin:16px 0 0;line-height:1.62}
.spine__meter{position:relative;margin-top:clamp(26px,4vw,42px)}
.spine__ghost{display:block;font-family:var(--font-display);font-weight:600;line-height:.68;
  font-size:clamp(8.5rem,17vw,15rem);color:transparent;letter-spacing:-.045em;margin-left:-.05em;
  -webkit-text-stroke:1.7px rgba(243,133,7,.6);text-stroke:1.7px rgba(243,133,7,.6);
  font-variant-numeric:lining-nums tabular-nums;-webkit-user-select:none;user-select:none}
.spine__rail{display:block;height:3px;width:min(340px,86%);background:rgba(255,255,255,.12);
  border-radius:2px;overflow:hidden;margin-top:clamp(10px,1.6vw,18px)}
.spine__rail-fill{display:block;height:100%;width:100%;transform-origin:left;
  transform:scaleX(var(--w,.06));background:linear-gradient(90deg,var(--brass-deep),var(--brass-bright))}
.spine__meter-cap{display:block;margin-top:12px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass-bright)}
.spine__meter-cap data{font-variant-numeric:tabular-nums}
.spine__ghost-bg{display:none}
/* Schritte-Spalte: Messing-Haarlinie verbindet vertikal, Karten bauen sich auf */
.spine__steps{list-style:none;margin:0;padding:0 0 0 clamp(18px,2.2vw,26px);position:relative;
  display:flex;flex-direction:column;gap:clamp(16px,2.2vw,24px)}
.spine__steps::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(243,133,7,.5) 12%,rgba(243,133,7,.5) 88%,transparent)}
.spine__step{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,20px);align-items:start;
  padding:clamp(18px,2.2vw,26px);border:1px solid var(--line-ink);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035);position:relative;min-width:0}
.spine__step::before{content:"";position:absolute;left:calc(-1 * clamp(18px,2.2vw,26px) - 4px);
  top:clamp(24px,2.6vw,32px);width:9px;height:9px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 0 4px rgba(13,27,42,1),0 0 12px rgba(243,133,7,.5)}
.spine__step-idx{font-family:var(--font-mono);font-size:.82rem;font-weight:700;
  color:var(--brass-bright);letter-spacing:.08em;padding-top:2px}
.spine__step h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.42rem);
  color:#f4efe7;margin:0 0 8px;line-height:1.15;letter-spacing:-.01em}
.spine__step p{color:var(--on-ink-soft);font-size:.94rem;line-height:1.6;margin:0}
@media(min-width:861px){
  /* Runway kommt aus der (natürlich höheren) Schritte-Spalte, NICHT aus forced
     min-height → kein toter leerer Sockel unter der gepinnten Stage. */
  .js .spine__grid[data-ledger-scrub]{min-height:0!important;grid-template-columns:.92fr 1.08fr;
    gap:clamp(32px,5vw,80px)}
  .js .spine__stage{position:sticky;top:var(--ls-top,16vh);align-self:start}
  .spine__steps{gap:clamp(40px,13vh,150px);padding-block:5vh}
  .spine__step{min-height:14vh}
}
/* Mobil: kein Pin, aber Tiefe HALTEN — Ghost-Ziffer groß hinter dem Meter,
   erste Step-Karte überlappt bewusst die Ghost-Zone (eine Überlappung @390). */
@media(max-width:860px){
  .spine__grid{grid-template-columns:1fr;gap:8px}
  .spine__stage{position:static;text-align:left}
  .spine__ghost{font-size:clamp(9rem,46vw,14rem)}
  .spine__meter{margin-bottom:-18px}
  .spine__steps{margin-top:0;padding-left:20px}
  .spine__steps::before{left:2px}
}

/* ---- FAQ-Hero Kontakt-Panel: klare Karte statt Rand-Rail (kein Rand-Apparat).
   War border:0 + nur brass Top-Hairline → las sich wie eine rechte Rand-Rail.
   Jetzt vollwertige Ink-Karte mit Rahmen, Radius, Schatten + Messing-Kopfbalken. */
.faq-hero.hero--ink .hero__calc{background:rgba(255,255,255,.045);border:1px solid var(--line-ink);
  border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,30px);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.6);position:relative;overflow:hidden}
.faq-hero.hero--ink .hero__calc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--brass);z-index:1}
.faq-hero.hero--ink .hero__calc-badge{margin-top:4px}

/* FAQ Kontakt-Karte: lange E-Mail nie über die Kartenkante (Wrap statt Bleed). */
.faq-hero.hero--ink .hero__calc-row{flex-wrap:wrap;gap:2px 14px}
.faq-hero.hero--ink .hero__calc-row span{white-space:nowrap;flex:0 0 auto}
.faq-hero.hero--ink .hero__calc-row strong{min-width:0;flex:1 1 auto;text-align:right;
  overflow-wrap:anywhere;font-size:.92rem}
.faq-hero.hero--ink .hero__calc-row strong a{overflow-wrap:anywhere;word-break:break-word}

/* ---- kontakt · Hero-Diptychon: rechte Spalte füllt (kein toter Navy-Sockel @1440),
   Foto bis Spaltenhöhe (Parallax), Aktenzeichen-Plate Mask-Reveal, Az.-Wasserzeichen
   als 2. Tiefe-Ebene. @768 Rhythmus gelockert. ---- */
@media(min-width:881px){
  .contact-hero{align-items:stretch}
  .contact-portrait--fill{height:100%}
  .contact-portrait__fig--tall{aspect-ratio:auto;height:auto;flex:1 1 auto;min-height:clamp(460px,52vw,660px)}
  .contact-portrait__fig--tall img{height:100%}
  /* Plate tiefer in die vorher tote Zone, überlappt die untere Foto-Kante */
  .contact-portrait--fill .contact-portrait__card{margin-top:-96px}
}
/* Az.-Wasserzeichen (2. Tiefe-Ebene, angeschnitten, hinter Label) */
.contact-portrait__stamp{position:absolute;z-index:2;right:-.04em;bottom:-.14em;
  font-family:var(--font-display);font-weight:600;line-height:.7;font-size:clamp(6rem,12vw,11rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(243,133,7,.42);text-stroke:1.5px rgba(243,133,7,.42);
  letter-spacing:-.03em;pointer-events:none;-webkit-user-select:none;user-select:none}
/* Mask-Reveal der Aktenzeichen-Plate: Wisch von links (clip-path), transform-safe */
@media(prefers-reduced-motion:no-preference){
  .js .contact-portrait__card[data-mask]{clip-path:inset(0 0 0 100%);opacity:0;
    transition:clip-path .9s var(--ease-out),opacity .5s var(--ease-out)}
  .js .contact-portrait__card[data-mask].is-visible{clip-path:inset(0 0 0 0);opacity:1}
}
/* @768 (und darunter bis Stack): Hero-Rhythmus lockern (war gedrängt) */
@media(max-width:880px){
  section.section:has(> .container > .contact-hero){padding-top:clamp(32px,7vw,56px);
    padding-bottom:clamp(40px,8vw,64px)}
  .contact-hero{gap:clamp(38px,7vw,52px)}
  .contact-hero__intro .section__lead{margin-top:clamp(20px,3.4vw,30px)}
  .contact-hero .contact-ledger{margin-top:clamp(6px,2vw,16px)}
  .contact-portrait__fig--tall{min-height:0}
  .contact-portrait__stamp{font-size:clamp(5rem,20vw,8rem)}
}

/* ---- portfolio · Pricing-Tiefe: mittlere Karte = Ink-Kontrast-Panel (Refusal:
   flache Papiertasche). Badge neutral („Für Bestände" statt „Empfohlen", da
   Beispiel-Tiers, keine wählbaren Pakete). ---- */
.pricing__grid--pf .price-card--hi::after{content:"Für Bestände"}

/* ---- portfolio · durchgehende Messing-Spine: scroll-gescrubbte vertikale Linie
   am rechten Rand (fädelt die ganze Seite), NIE über Text (fixe Randposition,
   pointer-events none, erst ≥1200px, hinter Masthead z200). ---- */
.page-spine{display:none}
@media(min-width:1200px){
  .js .page-spine{display:block;position:fixed;top:16vh;bottom:16vh;
    right:clamp(20px,2.2vw,40px);width:2px;z-index:5;pointer-events:none}
}
.page-spine__track{position:absolute;inset:0;background:rgba(13,27,42,.12);border-radius:2px;overflow:hidden}
.page-spine__fill{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:top;
  transform:scaleY(var(--sp,0));background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep));
  box-shadow:0 0 10px rgba(243,133,7,.4)}
@media(prefers-reduced-motion:reduce){.page-spine__fill{transform:scaleY(1)}}

/* ---- steuerberater/portfolio · Zertifikat behandeln (war nacktes Stock-Weiß):
   Ink+Messing-Brand-Plate — Ink-Mat, Messing-Kopfbalken, warme Duotone-Tönung
   der Urkunde (grayscale→sepia/brass), bleibt lesbar, liest sich als kuratiertes
   Vertrauens-Objekt statt Stock. ---- */
.expert__media--cert{position:relative;isolation:isolate;max-width:360px;align-self:start;
  background:linear-gradient(180deg,#10233a,#0b1826);border:1px solid var(--line-ink);
  border-radius:var(--radius-lg);padding:clamp(15px,1.7vw,22px);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.6)}
.expert__media--cert::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--brass);z-index:3;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.expert__media--cert img{width:100%;max-width:100%;object-fit:contain;background:#f2ece1;
  border:0;border-radius:6px;padding:clamp(12px,1.5vw,20px);box-shadow:0 12px 26px -14px rgba(0,0,0,.5);
  filter:grayscale(1) sepia(.3) saturate(1.25) brightness(.99) contrast(1.03)}
@media(max-width:880px){.expert__media--cert{max-width:320px;margin-inline:auto}}

/* ---- maxB Gate-Fixes ---- */
/* 1) Signatur-Ghost sauber an die Sektionskante clippen (angeschnitten, kein
   Container-Overflow-Report). overflow-x:clip lässt position:sticky intakt
   (x-only, kein Scroll-Container). Höhere Spezifität schlägt .afa--signature{overflow:visible}. */
.afa--signature.ledger-scrub.afa-scrub--ink{overflow-x:clip}
/* 2) portfolio Ink-Kontrast-Preiskarte: Outline-Button war Ink-auf-Ink (unsichtbar,
   r1.00) → auf der --hi-Karte weiß umranden. */
.pricing__grid--depth .price-card--hi .btn--outline{color:#fff;border-color:rgba(255,255,255,.42)}
.pricing__grid--depth .price-card--hi .btn--outline:hover{color:var(--brass-bright);
  border-color:var(--brass-bright);background:rgba(255,255,255,.05)}

/* ---- kontakt · Aktenzeichen-Plate baut sich beim Scrollen auf (Scroll-Assemble,
   Antwort auf Critic RAISE_AMBITION: Motion trägt die Seite statt EINEM Entrance-
   Mask-Reveal). Reihen stempeln nach Scroll-Progress ein, Messing-Assembly-Haarlinie
   füllt kontinuierlich (--p), Siegel stempelt am Ende. transform/opacity only, CLS-frei. ---- */
.contact-portrait__card--az{overflow:hidden}
.contact-az__rule{display:block;height:2px;width:100%;margin:2px 0 14px;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden}
.contact-az__rule-fill{display:block;height:100%;width:100%;transform-origin:left;
  transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--brass-deep),var(--brass-bright));
  transition:transform .05s linear}
@media(prefers-reduced-motion:no-preference){
  .js .contact-portrait__card--az .contact-sig > div{opacity:0;transform:translateY(10px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
  .js .contact-portrait__card--az .contact-sig > div.is-on{opacity:1;transform:none}
}
/* Siegel: stempelt (scale+leichte Rotation) beim letzten Step ein */
.contact-az__seal{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-ink);font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass-bright)}
.contact-az__seal svg{flex:0 0 auto;color:var(--brass)}
@media(prefers-reduced-motion:no-preference){
  .js .contact-az__seal{opacity:0;transform:scale(.82) rotate(-4deg);transform-origin:left center;
    transition:opacity .4s var(--ease-out),transform .5s cubic-bezier(.2,1.4,.4,1)}
  .js .contact-az__seal.is-on{opacity:1;transform:none}
}
/* Assembly-Progress auch am Kartenrahmen (Messing-Kopfbalken wächst mit --p) */
.contact-hero__hint{margin-top:clamp(20px,3vw,30px)}
@media(max-width:880px){.contact-hero__hint{display:none}}
/* Mobil/coarse & reduced: alles sichtbar (Engine setzt is-on + --p:1) */

/* =====================================================================
   RUNDE C — Funnel (/rechner, /gutachten-beauftragen) + Legal
   (/impressum, /datenschutz). EOF = höchste Source-Order (FEHLER-019
   bewusst). Ink #0d1b2a + Messing #F38507 only. transform/opacity-Motion.
   ===================================================================== */

/* ---- /rechner: Befund-Plate füllt tote rechte Spalte + sticky durch den Wizard ---- */
@media(min-width:881px){
  .calc__wrap > .calc__aside{align-self:stretch;position:relative;top:auto;display:block}
  .calc__wrap > .calc__aside > .calc__aside-inner{position:sticky;top:100px;z-index:1;display:block}
}
/* Ghost-§7 (EStG-AfA-Paragraph) füllt den unteren Ink-Raum der gestreckten Plate — Tiefe, angeschnitten */
.calc__aside-mark{display:none}
@media(min-width:881px){
  .calc__wrap > .calc__aside > .calc__aside-mark{display:block;position:absolute;right:-.05em;bottom:5%;z-index:0;
    pointer-events:none;font-family:var(--font-display);font-weight:600;font-size:clamp(9rem,15vw,15rem);line-height:.6;
    color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.12);letter-spacing:-.05em;white-space:nowrap}
}

/* ---- /gutachten: fixe Befund-Leiste reserviert Platz (überdeckt nie Kachel/CTA) ---- */
@media(max-width:1100px){
  .wizard{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  html:has(#wizardForm){scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}

/* ---- /gutachten: Objekttyp-Fotos → Ink+Messing-Duotone (Projekt-Recipe) ---- */
.type-card--photo .type-card__media{background:var(--bg-ink);isolation:isolate}
.type-card--photo .type-card__media img{filter:grayscale(1) contrast(1.06) brightness(1);mix-blend-mode:luminosity;opacity:.96;-webkit-filter:grayscale(1) contrast(1.06) brightness(1)}
.type-card--photo .type-card__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(13,27,42,.30) 0%,rgba(13,27,42,0) 48%,rgba(243,133,7,.44) 100%);
  mix-blend-mode:screen}
/* Selected: Messing-Rahmen (schon inset) + Bild heller/messinger + invertierte Ink-Row (oben gesetzt) */
.type-card--photo input:checked + .type-card__body .type-card__media img{opacity:1;filter:grayscale(1) contrast(1.08) brightness(1.08);-webkit-filter:grayscale(1) contrast(1.08) brightness(1.08)}
.type-card--photo input:checked + .type-card__body .type-card__media::before{background:linear-gradient(150deg,rgba(13,27,42,.18) 0%,rgba(13,27,42,0) 42%,rgba(243,133,7,.64) 100%)}
.type-card--photo:hover .type-card__media::before{background:linear-gradient(150deg,rgba(13,27,42,.24) 0%,rgba(13,27,42,0) 46%,rgba(243,133,7,.56) 100%)}

/* ---- Legal (/impressum + /datenschutz): Ghost-Kapitelziffer füllt das tote linke Gutter
   (angeschnitten, hinter dem Content — KEIN Rand-Rail-Apparat) + scroll-gekoppelt aktiv ---- */
.legal__ghost-track{position:absolute;top:0;bottom:0;right:calc(100% + clamp(10px,2.4vw,44px));width:44vw;max-width:520px;pointer-events:none;z-index:0}
.legal__ghost-num{position:sticky;top:132px;display:block;text-align:right;
  font-family:var(--font-display);font-weight:600;font-size:clamp(9rem,20vw,19rem);line-height:.68;
  color:transparent;-webkit-text-stroke:1.4px rgba(13,27,42,.07);letter-spacing:-.05em;
  transform:translateX(16%);font-variant-numeric:tabular-nums;transition:opacity .5s var(--ease,ease)}
/* Content-Ebenen liegen bewusst über der Ghost-Ziffer */
.legal--railed > .legal__rail,.legal--railed > .legal__body{position:relative;z-index:1}
@media(max-width:1023px){.legal__ghost-track{display:none}}

/* TOC scroll-spy: aktiver Kapitel-Eintrag leuchtet Messing */
.legal__rail-index a.is-current{color:var(--brass-deep);background:var(--surface-soft)}
.legal__rail-index a.is-current::before{color:var(--brass-deep)}
.section--legal-tight .legal__rail-index a.is-current{background:var(--brass-tint)}

/* ---- Legal mobile: TOC als schlanke, sticky, horizontale Kapitel-Chip-Leiste OBEN
   (statt am Seitenende versteckt / display:none). Meta-dl am Handy raus (steht im Body). ---- */
@media(max-width:880px){
  .legal--railed{display:flex;flex-direction:column;align-items:stretch}
  .legal--railed .legal__body{order:2;width:100%;min-width:0}
  .legal--railed .legal__rail{order:1;width:100%;min-width:0;position:sticky;top:14px;z-index:38;margin:0 0 clamp(20px,4vw,28px);
    padding:8px 0;border-top:0;background:var(--bg);box-shadow:0 10px 18px -16px rgba(13,27,42,.5)}
  .section--legal-tight .legal--railed .legal__rail{background:var(--bg);border-top:0;border-radius:0;box-shadow:0 10px 18px -16px rgba(13,27,42,.5);padding:8px 0}
  .legal__rail .legal__rail-kicker,.legal__rail > dl{display:none}
  .legal__rail-index{display:flex;flex-direction:row;overflow-x:auto;gap:0;border:1px solid var(--line);border-radius:var(--radius);
    max-width:100%;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative}
  .legal__rail-index::-webkit-scrollbar{display:none}
  .legal__rail-index li{counter-increment:lidx;border-bottom:0;border-right:1px solid var(--line-soft);white-space:nowrap;flex:0 0 auto}
  .legal__rail-index li:last-child{border-right:0}
  .legal__rail-index a{padding:11px 15px;grid-template-columns:auto auto;gap:8px;min-height:44px;align-items:center}
  /* H1 bleibt im Fold: schlanke 1-Zeilen-Chipleiste (~46px), nicht die alte hohe Meta-Rail */
}

/* ---- /datenschutz: H1-Einzelwort „Datenschutzerklärung" bricht sauber, clippt NIE (≤600) ---- */
@media(max-width:600px){
  .section--legal-tight .legal__head .section__title em{display:block}
}

/* =====================================================================
   FINALE POLISH-RUNDE (EOF = höchste Source-Order, FEHLER-019 bewusst).
   Nur Ink #0d1b2a + Messing #F38507/#9a5308. transform/opacity only.
   ===================================================================== */

/* A4 — /impressum + /datenschutz: Legal-Grid füllt die Breite wieder aus
   (Basis .legal{max-width:42rem} @1470 kappte die 2-Spalten-Railed-Grid auf 672px →
   Body nur 390px, wirkte links-hängend). Höhere Spezifität gewinnt. */
.legal.legal--railed{max-width:964px}
@media(min-width:861px){
  .legal.legal--railed{grid-template-columns:minmax(0,196px) minmax(0,var(--legal-measure))}
}

/* A1+D — /rechner: Befund-Plate hugt jetzt ihren Inhalt (sticky, NICHT gestreckt) →
   keine tote Dunkelfläche mehr. §7 als dezentes, VOLLSTÄNDIGES Wasserzeichen. */
@media(min-width:881px){
  .calc__wrap > .calc__aside{align-self:start;position:sticky;top:100px;display:block;min-height:0}
  .calc__wrap > .calc__aside > .calc__aside-inner{position:static;top:auto}
  .calc__wrap > .calc__aside > .calc__aside-mark{
    font-size:clamp(3.4rem,4.4vw,4.8rem);right:.14em;bottom:.06em;line-height:.62;letter-spacing:.03em;
    -webkit-text-stroke:1.15px rgba(255,255,255,.17);text-stroke:1.15px rgba(255,255,255,.17)}
}
/* Trust-Fußzeile in der Plate — gibt Substanz + rahmt das §7-Zeichen (statt Leere) */
.calc__aside-cred{display:flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,24px);
  padding-top:16px;border-top:1px solid var(--line-ink);position:relative;z-index:1}
.calc__aside-cred svg{color:var(--brass-bright);flex:0 0 auto}
.calc__aside-cred span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-soft);line-height:1.35}

/* A/Runway — reduced-motion: kein Pin-Runway (kein Scrub) → Stage hugt Inhalt,
   keine künstliche Leere in der linken Spalte (so-funktionierts, home, rnd, steuer). */
@media(prefers-reduced-motion:reduce){
  /* Kein künstlicher Pin-Runway (kein Scrub), ABER Stage bleibt sticky (reines Layout) →
     linke Spalte folgt der Schritte-Spalte, nie eine tote Lücke. */
  .js .ledger-scrub .afa__grid[data-ledger-scrub]{min-height:0!important}
  @media(min-width:861px){
    .js .ledger-scrub__stage,.js .ledger-scrub .afa__intro{position:sticky;align-self:start}
  }
}

/* E5 — /steuerberater (+ alle bleed-stage): Duotone-Belichtung angehoben,
   Architektur wird lesbar; Overlay bleibt stark genug für weißen Text oben-links. */
.bleed-stage__photo img{filter:grayscale(1) contrast(1.02) brightness(.82);
  -webkit-filter:grayscale(1) contrast(1.02) brightness(.82)}
.bleed-stage__photo::after{
  background:linear-gradient(180deg,rgba(9,18,30,.66),rgba(9,18,30,.4) 46%,rgba(9,18,30,.74)),
             radial-gradient(120% 90% at 90% -6%,rgba(243,133,7,.15),transparent 55%)}
/* linke Textzone zusätzlich sanft abdunkeln (Lesbarkeit weißer Headline) */
.bleed-stage__photo::before{background:#12314f;mix-blend-mode:color}
.bleed-stage > .container::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,18,30,.5),rgba(9,18,30,0) 62%)}
.bleed-stage > .container{position:relative}

/* C — Topbar-Credential-Eyebrow: EINE Zeile auf Phones (kein 2-Zeilen-Gedränge). */
@media(max-width:560px){
  .mh-util__cert-wide{display:none}
  .mh-util__cert-t{white-space:nowrap;letter-spacing:.085em;font-size:.575rem;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mh-util__wrap{padding:4px 0;min-height:30px}
}

/* C — Legal-TOC-Chips (mobil): Scroll-Snap, kein Clip mitten im Wort, Puffer rechts. */
@media(max-width:760px){
  .legal__rail-index{scroll-snap-type:x proximity;scroll-padding-left:0;padding-right:2px}
  .legal__rail-index li{scroll-snap-align:start}
  .legal__rail-index li:first-child{scroll-snap-align:start}
  .legal__rail-index a{white-space:nowrap}
}

/* E — /(Home) Property-Typ-Karten: gleiches Ink+Messing-Duotone-Rezept wie /rechner-Picker. */
.hero-tile--photo .hero-tile__media{background:var(--bg-ink);isolation:isolate}
.hero-tile--photo .hero-tile__media img{filter:grayscale(1) contrast(1.05) brightness(1.03);
  -webkit-filter:grayscale(1) contrast(1.05) brightness(1.03);mix-blend-mode:luminosity;opacity:.97}
.hero-tile--photo .hero-tile__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(13,27,42,.30) 0%,rgba(13,27,42,0) 52%,rgba(243,133,7,.40) 100%);
  mix-blend-mode:screen}
.hero-tile--photo .hero-tile__badge,.hero-tile--photo .hero-tile__idx{z-index:2}
.hero-tile--photo:hover .hero-tile__media img{filter:grayscale(1) contrast(1.06) brightness(1.08);
  -webkit-filter:grayscale(1) contrast(1.06) brightness(1.08);opacity:1}

/* D — Masthead-Logo: vorgeschnittene Wortmarke (immo-logo-wordmark.webp, ohne die
   illegible eingebrannte Subline). Größenlogik bleibt bei .mh-logo__img @201/202/237. */

/* D — /faq: Hero-Kontaktkarte klar als eigenständiges Panel (nicht rail-artig). */
.faq__aside{box-shadow:var(--shadow-funnel,0 40px 90px -50px rgba(9,18,30,.7));
  border:1px solid rgba(255,255,255,.08)}

/* C — /datenschutz H1: sauberer Silbentrennungs-Umbruch statt Zwei-Wort-Bruch. */
.section--legal-tight .legal__head .section__title{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
@media(max-width:600px){
  .section--legal-tight .legal__head .section__title em{display:inline}
  .section--legal-tight .legal__head .section__title{font-size:clamp(2rem,8.4vw,2.6rem)}
}

/* C — /gutachten-beauftragen: fixe Summary-Bar reserviert genug Platz (Inhalt nie gefangen). */
@media(max-width:1100px){
  .wizard{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  html:has(#wizardForm){scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
}

/* Polish-Korrektur: brass-deep=#9a5308 ist für Text auf HELL gedacht; wo Messing-Text
   auf INK sitzt, bright bleiben (die restlichen Kontexte hatten das schon). */
.process-spine .ledger-scrub__hint,
.contact-hero .ledger-scrub__hint{color:var(--brass-bright)}
.hero__calc--steuerberater .hero__calc-total-value{color:var(--brass-bright)}

/* E — Duotone-Konsistenz Home: Hero-Foto + Interieur-Referenz bekommen dasselbe
   Ink+Messing-Duotone-Rezept wie alle anderen realen Fotos (design.md: Hero IST Duotone).
   grayscale-Bild + Ink-Color-Blend (::before) + Dunkel-Gradient & Messing-Eckglow (::after). */
.hero__photo{isolation:isolate}
.hero__photo img{filter:grayscale(1) contrast(1.05) brightness(1.06);
  -webkit-filter:grayscale(1) contrast(1.05) brightness(1.06)}
.hero__photo::before{background:#14324f;mix-blend-mode:color;z-index:1}
.hero__photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,19,32,.52) 0%,rgba(9,19,32,0) 34%),
             linear-gradient(0deg,rgba(9,19,32,.55) 0%,rgba(9,19,32,0) 42%),
             radial-gradient(96% 72% at 86% 92%,rgba(243,133,7,.30),transparent 56%)}

.statement--ink .statement__ph{isolation:isolate;position:relative}
.statement--ink .statement__ph img{filter:grayscale(1) contrast(1.05) brightness(1.04);
  -webkit-filter:grayscale(1) contrast(1.05) brightness(1.04)}
.statement--ink .statement__ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#14324f;mix-blend-mode:color}
.statement--ink .statement__ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(100% 80% at 88% 96%,rgba(243,133,7,.26),transparent 58%),
             linear-gradient(0deg,rgba(9,19,32,.42),transparent 46%)}

/* C — Mobile-Tiefe /impressum + /datenschutz @≤1023: Ghost-Kapitelziffer als EIN
   Overlap-Gerät HINTER den Head (statt flacher Stapel). overflow-x:clip global = kein Scroll. */
@media(max-width:1023px){
  .legal--railed{position:relative}
  .legal--railed .legal__ghost-track{display:block;position:absolute;top:-14px;left:-8px;right:auto;
    bottom:auto;width:auto;max-width:none;z-index:0;pointer-events:none}
  .legal--railed .legal__ghost-num{position:static;top:auto;transform:none;text-align:left;line-height:.66;
    font-size:clamp(8.5rem,44vw,15rem);-webkit-text-stroke:1.3px rgba(13,27,42,.10);
    text-stroke:1.3px rgba(13,27,42,.10)}
  .legal--railed .legal__head{position:relative;z-index:1}
}

/* Guertel gegen mitten in der Zahl umgebrochene Betraege (Content nutzt zusaetzlich &nbsp;). */
.price-card__amount strong,.price-card__net{white-space:nowrap}