/* =====================================================================
   ENTWURF B · „Gips & Beton“ (hell)
   Helle Grauverläufe aus Gips, Beton und Stahl, Grafit nur für Schrift
   und feine Linien. Ein Akzent: die Laserlinie (Kreuzlinienlaser im
   Trockenbau). Wird nach site.css und modules.css geladen.
   ===================================================================== */
:root{
  /* Grundtöne: leicht kühles Gipsgrau */
  --bg:#EEF0EE; --surface:#FFFFFF; --surface-2:#E7EAE7; --surface-3:#DADED9;
  --ink:#16191C; --ink-2:#4A5057; --ink-3:#6E757C; --ink-4:#A3A9AF;
  --line:#D6DAD6; --line-strong:#BCC2BD; --grid:#DEE2DE; --grid-fine:#E7EAE7;
  /* Kompatibilität: es gibt keine dunklen Flächen mehr, „dark“ zeigt auf Beton */
  --dark:#DDE1DD; --dark-2:#E7EAE7; --dark-3:#D0D5D1; --on-dark:#16191C; --on-dark-2:#4A5057; --dark-line:#C8CEC9;
  /* Akzent: Laser-Grün (Standard) */
  --accent:#C4F042; --accent-deep:#9ACB17; --accent-ink:#16191C; --accent-text:#456C00; --accent-wash:#EDF7CF; --accent-glow:rgba(160,214,30,.45); --accent-rgb:196,240,66;
  /* Verläufe */
  --grad-light:linear-gradient(180deg,#F8F9F8 0%,#E7EAE7 100%);
  --grad-concrete:linear-gradient(160deg,#F6F7F6 0%,#E5E8E5 55%,#D8DDD9 100%);
  --grad-beton:linear-gradient(168deg,#E6E9E6 0%,#D6DBD7 100%);
  --grad-steel:linear-gradient(180deg,#FFFFFF 0%,#F0F2F0 100%);
  --grad-stage:radial-gradient(110% 90% at 66% 34%,#FFFFFF 0%,#F0F2F0 42%,#DCE0DC 100%);
  --grad-dark:var(--grad-beton);
  /* Radien & Schatten */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --shadow:0 1px 0 rgba(22,25,28,.04), 0 22px 50px -32px rgba(22,25,28,.32);
  --shadow-lift:0 2px 0 rgba(22,25,28,.04), 0 30px 64px -30px rgba(22,25,28,.36);
  /* Alte Namen auf das neue System abbilden */
  --paper:var(--surface); --paper-2:var(--surface-2); --paper-3:var(--surface-3);
  --yellow:var(--accent); --yellow-deep:var(--accent-deep); --yellow-wash:var(--accent-wash); --yellow-text:var(--accent-text);
  --black:#16191C; --on-ink:#16191C; --on-ink-2:#4A5057; --ink-line:#C8CEC9; --anthrazit:#2B3036;
  --glass:rgba(244,246,244,.82);
  --gridline:rgba(22,25,28,.055);
}
html[data-accent="orange"]{--accent:#FF6A2B;--accent-deep:#E2541A;--accent-ink:#16191C;--accent-text:#B13F00;--accent-wash:#FFE8DC;--accent-glow:rgba(255,106,43,.4);--accent-rgb:255,106,43}
html[data-accent="kupfer"]{--accent:#CF915E;--accent-deep:#B07542;--accent-ink:#16191C;--accent-text:#7E4A1F;--accent-wash:#F5E8DC;--accent-glow:rgba(207,145,94,.4);--accent-rgb:207,145,94}
html[data-accent="mono"]{--accent:#2B3036;--accent-deep:#16191C;--accent-ink:#FFFFFF;--accent-text:#16191C;--accent-wash:#E1E4E6;--accent-glow:rgba(43,48,54,.25);--accent-rgb:43,48,54}
body{background:var(--bg);color:var(--ink)}

/* ---------- Grundlagen ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(var(--accent-rgb),.5);color:var(--ink)}
h1,h2,h3{color:var(--ink)}
h1,h2{font-weight:300;font-stretch:116%;letter-spacing:-.035em}
.sec h2,.page-hero h1,.hero-b h1,.hero-b h2,.cta-band h2{background:linear-gradient(180deg,#121417 0%,#3A4046 74%,#727980 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec h2 b,.page-hero h1 b{font-weight:600}
.lead{color:var(--ink-2)}
a:hover{text-decoration-color:var(--accent-deep)}
.skip{background:var(--accent)}
.eyebrow{color:var(--ink-3);letter-spacing:.18em}
.eyebrow::before{width:18px;height:2px;background:var(--accent-deep);box-shadow:0 0 10px var(--accent-glow);border-radius:2px}
.hl,.tape{background:none;transform:none;box-shadow:inset 0 -.14em 0 var(--accent);padding:0 .04em;font-weight:inherit}
.link-arrow:hover{text-decoration-color:var(--accent-deep)}

/* ---------- Buttons ---------- */
.btn{--b:var(--accent);--c:var(--accent-ink);--bd:transparent;border-radius:999px;border-width:1px;min-height:50px;padding:0 24px;font-weight:600;letter-spacing:-.005em;box-shadow:0 1px 0 rgba(22,25,28,.08),0 8px 22px -14px var(--accent-glow);transition:background-color .2s,box-shadow .25s,transform .15s,color .2s,border-color .2s}
.btn:hover{--b:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.22),0 12px 30px -12px var(--accent-glow);transform:translateY(-1px)}
.btn--dark{--b:var(--ink);--c:#FFFFFF;--bd:var(--ink);box-shadow:0 10px 24px -16px rgba(22,25,28,.6)}
.btn--dark:hover{--b:#2B3036;box-shadow:0 14px 30px -16px rgba(22,25,28,.55)}
.btn--ghost{--b:rgba(255,255,255,.55);--c:var(--ink);--bd:var(--line-strong);box-shadow:none}
.btn--ghost:hover{--b:#FFFFFF;--bd:var(--ink);box-shadow:0 10px 24px -18px rgba(22,25,28,.4)}
.sec--dark .btn--ghost,.pillar--dark .btn--ghost{--b:rgba(255,255,255,.55);--c:var(--ink);--bd:var(--line-strong)}
.btn--sm{min-height:40px;padding:0 16px}

/* ---------- Header ---------- */
.site-header{background:rgba(238,240,238,.8);border-bottom:1px solid rgba(22,25,28,.07);transition:background-color .3s,border-color .3s}
.menu a,.menu button{font-weight:500;border-radius:999px;padding:9px 13px}
.menu a:hover,.menu button:hover{box-shadow:none;background:rgba(22,25,28,.05)}
.menu a[aria-current="page"]{box-shadow:none;background:rgba(22,25,28,.07)}
.brand-mark .lm-a{fill:var(--accent-deep)}
.brand-text b{font-weight:560}
.nav > .btn{min-height:42px}
.burger{border-radius:999px;border-width:1px;background:rgba(255,255,255,.6)}
.dropdown{border-radius:var(--r-xl);border-color:var(--line);box-shadow:var(--shadow-lift)}
.dropdown a:hover{background:var(--surface-2)}
.dropdown a.dd-card--y{background:var(--accent-wash);border-color:rgba(var(--accent-rgb),.6)}
/* über der Bühne: nur etwas transparenter */
.site-header.is-dark{background:rgba(244,246,244,.62);border-bottom-color:rgba(22,25,28,.05)}

/* ---------- Sektionen ---------- */
.sec--gips{background:var(--grad-concrete)}
/* „Beton“: etwas dunkleres Grau mit feinem Raster, statt dunkler Flächen */
.sec--dark,.pillar--dark{--on-dark:var(--ink);--on-dark-2:var(--ink-2);--on-ink:var(--ink);--on-ink-2:var(--ink-2);--ink-line:var(--line-strong);--dark-line:var(--line-strong)}
.sec--dark{background:var(--grad-beton);color:var(--ink);position:relative;isolation:isolate;border-top:1px solid rgba(22,25,28,.06);border-bottom:1px solid rgba(255,255,255,.6)}
.sec--dark::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:62.5px 62.5px;-webkit-mask-image:radial-gradient(90% 80% at 50% 30%,#000 30%,transparent 85%);mask-image:radial-gradient(90% 80% at 50% 30%,#000 30%,transparent 85%)}
.sec--dark .lead,.sec--dark p{color:var(--ink-2)}
.sec--dark h3{color:var(--ink)}
.sec--dark .eyebrow{color:var(--ink-3)}
.sec--line{border-top:1px solid var(--line)}
.bp{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:62.5px 62.5px}
.laser-rule{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--accent-deep) 20%,var(--accent-deep) 80%,transparent);box-shadow:0 0 14px var(--accent-glow)}
.pillar--dark{background:var(--grad-beton);color:var(--ink);border-color:var(--line-strong)}

/* ---------- Karten & Bausteine ---------- */
.card,.svc,.ref,.review,.calc-teaser,.tool,.quick,.finder,.receipt,.calc-card,.pillar,.tool-cards,.faq details{border-color:var(--line)!important}
.card,.ref,.review{border-radius:var(--r-lg);box-shadow:var(--shadow)}
.svc{border-radius:0;transition:background-color .2s}
.svc:hover{background:var(--surface)}
.svc-grid{border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.tool,.quick,.finder,.receipt{border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lift)}
.tool__head,.quick__head,.finder__head{border-bottom:1px solid var(--line);background:var(--grad-steel)}
.tool__price,.fres-price,.tool__price--big{border:1px solid rgba(var(--accent-rgb),.6);background:var(--accent-wash)}
.tool__note{border-left-color:var(--accent-deep)}
.calc-teaser{border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width:640px){ .calc-teaser{box-shadow:var(--shadow)} .quick{box-shadow:var(--shadow)} }
.feature .ico{border:1px solid var(--line);background:var(--surface);border-radius:12px}
.sec--dark .feature .ico{background:var(--surface);border-color:var(--line);color:var(--ink)}
.steps li::before{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);box-shadow:0 0 0 6px var(--bg)}
.sec--gips .steps li::before{box-shadow:0 0 0 6px #E9ECE9}
.review .av{background:var(--surface-2);border:1px solid var(--line-strong)}
.review .stars{color:var(--ink)}
.badge{border-radius:999px}
.badge--y{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.note{border-left-color:var(--accent-deep)}
.chip{border-width:1px;border-color:var(--line-strong);border-radius:999px;background:rgba(255,255,255,.55)}
.chip:hover{background:var(--surface);border-color:var(--ink)}
.places a:hover{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.faq details[open] summary::after{background-color:var(--accent)}
.kv{border-color:var(--line);border-radius:var(--r-md)}
.kv .hl{background:var(--accent-wash)}
.kv .hl dd{color:var(--ink)}

/* Formularbausteine */
.seg label{border-width:1px;border-color:var(--line-strong);font-weight:500;background:rgba(255,255,255,.6)}
.seg input:checked + label{background:var(--ink);color:#FFFFFF;border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
input[type=range].range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent-deep) var(--p),var(--line-strong) var(--p))}
input[type=range].range::-moz-range-track{height:3px;border-radius:2px;background:var(--line-strong)}
input[type=range].range::-moz-range-progress{height:3px;border-radius:2px;background:var(--accent-deep)}
input[type=range].range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8.5px;background:#FFFFFF;border:1px solid var(--ink);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.4)}
input[type=range].range::-moz-range-thumb{width:18px;height:18px;background:#FFFFFF;border:1px solid var(--ink);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.4)}
.switch .tg{border-width:1px}
.switch input:checked ~ .tg{background:var(--ink);border-color:var(--ink)}
.switch input:checked ~ .tg::after{background:var(--accent)}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.35)}
.stepper button:hover{background:var(--surface-2)}

/* Rechner, Werkzeuge, Finder */
.calc-no{background:var(--ink);color:#FFFFFF;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.4)}
.calc-presets button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.calc-tile:hover{background:var(--surface);border-color:var(--ink);box-shadow:var(--shadow)}
.calc-tile:hover .plus{background:var(--accent);border-color:transparent}
.receipt{background:var(--surface);color:var(--ink);position:relative}
.receipt::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,var(--accent-deep) 25%,var(--accent-deep) 75%,transparent);box-shadow:0 0 14px var(--accent-glow)}
.receipt__top{background:var(--grad-concrete);color:var(--ink);border-bottom:1px solid var(--line)}
.receipt__top .mono,.receipt__top small{color:var(--ink-3)}
.receipt__range .sep{color:var(--accent-text)}
.calc-mbar{background:rgba(250,251,250,.94)!important;color:var(--ink)!important;border-top:1px solid var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.calc-mbar small{color:var(--ink-3)!important}
.w3-variants button[aria-pressed="true"],.sl-q button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.fopt:hover,.fopt:focus-visible{background:var(--surface);border-color:var(--ink);box-shadow:var(--shadow)}
.fopt svg .y,.tool-card svg.ic .y{fill:var(--accent)}
.tool-card:hover{background:var(--surface)}
.qladder li.past{background:var(--accent-wash)}
.qladder li.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.wfl-svg .z1{fill:var(--accent-wash);stroke:var(--accent-deep)}
.wfl-svg .z2{fill:var(--accent);fill-opacity:.55}
.wfl-legend .z1{background:var(--accent-wash);border-color:var(--accent-deep)}
.wfl-legend .z2{background:var(--accent);opacity:.7}
.db__bands i.on,.cmp__band{background:var(--accent);border-color:transparent}

/* ---------- 3D-Bühne (hell, Glas-HUD) ---------- */
.stage{background:var(--grad-stage);border-color:var(--line)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:62.5px 62.5px;-webkit-mask-image:radial-gradient(80% 70% at 60% 60%,#000 20%,transparent 80%);mask-image:radial-gradient(80% 70% at 60% 60%,#000 20%,transparent 80%)}
.stage canvas{z-index:1}
.stage .labels,.stage .hud-top,.stage .hud-bottom{z-index:2}
.hud-step{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:5px 10px}
.hud-title{color:var(--ink)}
.hud-bar span{background:rgba(22,25,28,.12)}
.hud-bar b{background:var(--accent-deep);box-shadow:0 0 10px var(--accent-glow)}
.callout{background:rgba(255,255,255,.9);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 20px -12px rgba(22,25,28,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.callout::before{background:var(--accent-deep);box-shadow:0 0 8px var(--accent-glow)}
.icon-btn{background:rgba(255,255,255,.75);border-color:var(--line-strong);color:var(--ink)}
.icon-btn:hover{background:#FFFFFF;border-color:var(--ink)}
.drag-hint{color:var(--ink-3)}
.stage-ctrl{background:rgba(255,255,255,.78);border-color:var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 30px -20px rgba(22,25,28,.4)}
.stage-ctrl .btn--dark{--b:var(--accent);--c:var(--accent-ink);--bd:var(--accent)}
.swatches{background:rgba(255,255,255,.78);border-color:var(--line)}
.swatches-label{color:var(--ink-3)}

/* ---------- Szenen-Tabs ---------- */
.scene-tabs{border:1px solid var(--line-strong);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.scene-tab{font-weight:500;color:var(--ink)}
.scene-tab:hover{background:rgba(22,25,28,.05)}
.scene-tab[aria-selected="true"]{background:var(--ink);color:#FFFFFF;box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- CTA, Footer ---------- */
.cta-band{background:var(--grad-beton);color:var(--ink);border-top:0}
.cta-band::before{background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px)!important;background-size:62.5px 62.5px!important}
.cta-band::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-deep) 30%,var(--accent-deep) 70%,transparent);box-shadow:0 0 18px var(--accent-glow)}
.cta-band p{color:var(--ink-2)}
.cta-band .btn{--b:var(--accent);--c:var(--accent-ink);--bd:var(--accent)}
.cta-band .btn--ghost{--b:rgba(255,255,255,.6);--c:var(--ink);--bd:var(--line-strong)}
.site-footer{--on-ink:var(--ink);--on-ink-2:var(--ink-3);--ink-line:var(--line-strong);background:linear-gradient(180deg,#E3E6E3 0%,#D9DDD9 100%);color:var(--ink);border-top:1px solid var(--line-strong)}
.site-footer a:hover{text-decoration-color:var(--accent-deep)}
.site-footer .brand-mark{color:var(--ink)}
.site-footer .brand-mark .lm-a{fill:var(--accent-deep)}
.sister{border-color:var(--line-strong)!important;background:rgba(255,255,255,.55)}
.sister:hover{border-color:var(--ink)!important}
.pillar-tag{background:var(--accent);color:var(--accent-ink);border-radius:999px}
.page-hero{background:var(--grad-concrete)}
.page-hero.bp{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--grad-concrete);background-size:62.5px 62.5px,62.5px 62.5px,auto}
.art-frame{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--shadow)}
.consent{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--shadow-lift)}
.m-cta .btn{border-radius:999px}

/* =====================================================================
   HERO B: Vollbild-Bühne in Gipsgrau, Glas-Karten scrollen darüber
   ===================================================================== */
.hero-b{position:relative;background:var(--bg);color:var(--ink);margin-top:calc(-1 * var(--header-h));isolation:isolate}
.hero-b__intro{position:absolute;top:0;left:0;right:0;height:100svh;min-height:640px;z-index:3;pointer-events:none}
.hero-b__intro .wrap{height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--header-h) + 24px);padding-bottom:96px}
.hero-b__copy{max-width:600px;pointer-events:auto}
.hero-b .eyebrow{color:var(--ink-3)}
.hero-b h1{margin:22px 0 22px;font-size:clamp(3rem,6.8vw,6.4rem);line-height:.9;font-weight:250;font-stretch:122%;letter-spacing:-.045em}
.hero-b h1 .l1,.hero-b h1 .l2x{display:block}
.hero-b h1 .l2x{font-weight:500}
.hero-b h1 .laser{position:relative;display:inline-block;color:var(--ink);-webkit-text-fill-color:var(--ink);background:none}
.hero-b h1 .laser::after{content:"";position:absolute;left:0;right:-.1em;bottom:.06em;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25),0 0 22px 2px var(--accent-glow);transform-origin:0 50%;animation:laserin 1.4s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes laserin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-b .sub{font-family:var(--f-display);font-weight:300;font-stretch:110%;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.3;color:var(--ink);max-width:30em}
.hero-b .lead{color:var(--ink-2);font-size:1rem;max-width:34em;margin-top:14px}
.hero-b .picker{margin-top:28px}
.hero-b .picker-label{color:var(--ink-3)}
.hero-b .hero-actions{margin-top:24px}
.hero-b__facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid rgba(22,25,28,.12);list-style:none;padding-left:0}
.hero-b__facts li{display:flex;flex-direction:column;gap:2px}
.hero-b__facts b{font-family:var(--f-display);font-weight:300;font-stretch:118%;font-size:1.6rem;line-height:1;color:var(--ink);letter-spacing:-.02em}
.hero-b__facts span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hero-b__cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);pointer-events:none}
.hero-b__cue i{width:1px;height:38px;background:linear-gradient(var(--accent-deep),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-b__stage{position:sticky;top:0;height:100svh;min-height:640px;z-index:1;overflow:hidden;background:var(--grad-stage)}
.hero-b__stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:62.5px 62.5px;-webkit-mask-image:radial-gradient(70% 70% at 66% 58%,#000 15%,transparent 78%);mask-image:radial-gradient(70% 70% at 66% 58%,#000 15%,transparent 78%)}
.hero-b__stage .stage-stack{position:absolute;inset:0;height:auto;margin:0}
.hero-b__stage .stage{position:absolute;inset:0;height:100%;border:0;border-radius:0;background:transparent}
.hero-b__stage .stage::after{display:none}
.hero-b__stage .hud-top{top:calc(var(--header-h) + 18px);left:auto;right:max(24px,var(--gutter-r));width:min(380px,40vw);align-items:flex-end;text-align:right}
.hero-b__stage .hud-line{justify-content:flex-end}
.hero-b__stage .hud-bottom{left:auto;right:max(24px,var(--gutter-r));bottom:84px;width:auto}
.hero-b__hudtabs{position:absolute;right:max(24px,var(--gutter-r));bottom:24px;z-index:4}
.hero-b__hudtabs .scene-tab{min-height:34px;font-size:.84rem;padding:0 13px}
.hero-b__vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(238,240,238,.94) 0%,rgba(238,240,238,.62) 30%,rgba(238,240,238,0) 54%),linear-gradient(0deg,rgba(238,240,238,.75),rgba(238,240,238,0) 20%)}
.hero-b__steps{position:relative;z-index:3;margin-top:-100svh;padding-top:100svh;padding-bottom:16vh;pointer-events:none}
.hero-b__steps .scene-steps{max-width:470px}
.hero-b .steps-head{pointer-events:auto;padding:0 0 10vh}
.hero-b .steps-head h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:12px 0 10px}
.hero-b .steps-head p{color:var(--ink-2)}
.hero-b .bsteps{list-style:none;margin:0;padding:0}
.hero-b .bstep{min-height:88vh;display:flex;flex-direction:column;justify-content:center;border:0;padding:0;max-width:none}
.bcard{pointer-events:auto;background:rgba(255,255,255,.74);border:1px solid rgba(22,25,28,.08);border-radius:22px;padding:26px 26px 22px;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 34px 70px -40px rgba(22,25,28,.45);transition:border-color .3s,box-shadow .3s,transform .3s}
.bstep.is-active .bcard{border-color:rgba(var(--accent-rgb),.9);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.45),0 34px 80px -40px rgba(22,25,28,.5),0 0 50px -24px var(--accent-glow)}
.hero-b .bstep-no{background:rgba(255,255,255,.7);color:var(--ink-3);border:1px solid var(--line-strong);border-radius:999px}
.hero-b .bstep.is-active .bstep-no{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hero-b .bstep.is-done .bstep-no{background:var(--surface-2);color:var(--ink)}
.hero-b .bstep h3{color:var(--ink);margin:14px 0 8px;font-size:clamp(1.45rem,2.2vw,1.9rem)}
.hero-b .bstep:not(.is-active):not(.is-done) h3{color:var(--ink-2)}
.hero-b .bstep p{color:var(--ink-2)}
.hero-b .tools{margin-top:12px}
.hero-b .tools em{color:var(--ink-3)}
.hero-b .tools span{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.hero-b .bstep-done{pointer-events:auto;min-height:70vh;border-top:0;justify-content:center;max-width:none}
.hero-b .bstep-done .bcard{width:100%}
.hero-b .bstep-done h3{color:var(--ink)}
.hero-b .bstep-done p{color:var(--ink-2)}
.hero-b .link-arrow{color:var(--ink)}
@media (max-width:900px){
  .hero-b{display:flex;flex-direction:column}
  .hero-b__intro{position:relative;height:auto;min-height:0}
  .hero-b__intro .wrap{padding-top:calc(var(--header-h) + 28px);padding-bottom:30px}
  .hero-b__cue{display:none}
  .hero-b__stage{top:var(--header-h);height:46svh;min-height:300px;z-index:4;box-shadow:0 18px 30px -22px rgba(22,25,28,.45);border-bottom:1px solid var(--line)}
  .hero-b__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:5;background:linear-gradient(90deg,transparent,var(--accent-deep) 50%,transparent);opacity:.7}
  .hero-b__vignette{background:linear-gradient(0deg,rgba(238,240,238,.55),rgba(238,240,238,0) 28%)}
  .hero-b__stage .hud-top{left:16px;right:16px;width:auto;top:14px;align-items:flex-start;text-align:left}
  .hero-b__stage .hud-line{justify-content:flex-start}
  .hero-b__stage .hud-bottom{left:16px;right:auto;bottom:14px}
  .hero-b__hudtabs{display:none}
  .hero-b__steps{margin-top:0;padding-top:20px;padding-bottom:8vh}
  .hero-b .bstep{min-height:58svh}
  .hero-b .steps-head{padding-bottom:4vh}
  .bcard{background:rgba(255,255,255,.9)}
}

/* ---------- Ticker ---------- */
.ticker{background:linear-gradient(180deg,#E4E7E4,#DCE0DC);color:var(--ink-2);border-top:1px solid var(--line-strong);border-bottom:1px solid rgba(255,255,255,.7);overflow:hidden;position:relative}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#E0E3E0,rgba(224,227,224,0) 12%,rgba(224,227,224,0) 88%,#E0E3E0)}
.ticker__track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker__track span{display:inline-flex;align-items:center;gap:14px;padding:16px 22px;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker__track span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-deep);box-shadow:0 0 10px var(--accent-glow)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker__track{animation:none} .hero-b h1 .laser::after{animation:none} .hero-b__cue i{animation:none} }

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:14px}
.bento__tile{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-xl);background:var(--grad-steel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;overflow:hidden;min-width:0;transition:transform .25s,box-shadow .25s,border-color .25s}
a.bento__tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);text-decoration:none}
.bento__tile h3{font-family:var(--f-display);font-weight:300;font-stretch:118%;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.02;letter-spacing:-.03em}
.bento__tile p{color:var(--ink-2)}
.b-a{grid-column:span 2;grid-row:span 2}
.b-b{grid-column:span 2}
.bento-beton{background:var(--grad-beton);border-color:var(--line-strong)}
.bento-beton::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:31.25px 31.25px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%);pointer-events:none}
.bento-beton > *{position:relative}
.bento-beton .btn--ghost{--b:rgba(255,255,255,.6)}
.bento-accent{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.bento-accent p{color:var(--accent-ink);opacity:.78}
.bento-accent .big-arrow{margin-top:auto;align-self:flex-end;width:64px;height:64px;border-radius:50%;background:var(--accent-ink);color:var(--accent);display:grid;place-items:center;transition:transform .25s}
.bento-accent:hover .big-arrow{transform:rotate(-45deg)}
.bento-accent .big-arrow svg{width:26px;height:26px}
.b-tag{align-self:flex-start;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid currentColor;opacity:.75}
.b-list{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--line)}
.bento-beton .b-list,.bento-beton .b-list a{border-color:rgba(22,25,28,.12)}
.b-list a{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.b-list a:hover span{color:var(--accent-text)}
.b-list span{font-weight:600;display:flex;flex-direction:column;gap:2px;min-width:0}
.b-list small{font-weight:400;font-size:.84rem;opacity:.7}
.b-list b{font-family:var(--f-mono);font-weight:500;font-size:.86rem;white-space:nowrap}
.b-list em{font-style:normal;font-size:.68rem;margin-left:5px;opacity:.7}
.b-list svg{width:16px;height:16px}
.b-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.b-cols .b-list{margin-top:0}
.b-mini{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.93rem}
.b-mini li{display:flex;align-items:center;gap:10px}
.b-mini li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-deep)}
.bento .row{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1000px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .b-a,.b-b{grid-column:span 2} .b-a{grid-row:auto} }
@media (max-width:600px){ .bento{grid-template-columns:1fr} .b-a,.b-b{grid-column:auto} .b-cols{grid-template-columns:1fr} }

/* ---------- Ablauf mit Laserlinie ---------- */
.steps{position:relative}
@media (min-width:901px){ .steps::before{content:"";position:absolute;left:27px;right:27px;top:27px;height:1px;background:linear-gradient(90deg,var(--accent-deep),rgba(var(--accent-rgb),.15));box-shadow:0 0 12px var(--accent-glow)} }
.steps li::before{z-index:1}

/* ---------- Akzent-Umschalter (nur Vorschau) ---------- */
.accent-switch{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 18px 36px -20px rgba(22,25,28,.45)}
.accent-switch b{font-family:var(--f-mono);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.accent-switch button{width:26px;height:26px;border-radius:50%;border:2px solid #FFFFFF;background:var(--c);cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--line-strong)}
.accent-switch button[aria-checked="true"]{box-shadow:0 0 0 2px var(--ink)}
@media (max-width:700px){ .accent-switch{bottom:calc(84px + env(safe-area-inset-bottom,0px))} .accent-switch b{display:none} }

/* ---------- Einsatzgebiet-Karte (Radar, hell) ---------- */
.zmap-card{border-radius:var(--r-xl);overflow:hidden;background:#F7F8F7;box-shadow:var(--shadow-lift);border:1px solid var(--line)}
.zmap{display:block;width:100%;height:auto}
.zmap .zm-bg{fill:#F7F8F7}
.zmap .zm-gridline{fill:none;stroke:rgba(22,25,28,.06);stroke-width:1}
.zmap .zm-z2{fill:rgba(22,25,28,.025);stroke:rgba(22,25,28,.28);stroke-dasharray:4 6}
.zmap .zm-ring{fill:none;stroke:rgba(22,25,28,.08)}
.zmap .zm-axis{stroke:rgba(22,25,28,.07)}
.zmap .zm-z1{stroke:var(--accent-deep);stroke-width:1.5}
.zmap .zm-z1a{stop-color:var(--accent);stop-opacity:.42}
.zmap .zm-z1b{stop-color:var(--accent);stop-opacity:.1}
.zmap .zm-swa{stop-color:var(--accent);stop-opacity:0}
.zmap .zm-swb{stop-color:var(--accent);stop-opacity:.4}
.zmap .zm-sweep{animation:zm-rot 9s linear infinite}
@keyframes zm-rot{to{transform:rotate(-360deg)}}
.zmap text{font-family:var(--f-body)}
.zmap .zm-mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.zmap .zm-lab1{fill:var(--accent-text)}
.zmap .zm-lab2,.zmap .zm-note{fill:var(--ink-3)}
.zmap .zm-dot{fill:var(--ink)}
.zmap .zm-dot2{fill:var(--ink-4)}
.zmap .zm-t{fill:var(--ink);font-size:15px;font-weight:600;paint-order:stroke;stroke:#F7F8F7;stroke-width:4;stroke-linejoin:round}
.zmap .zm-t2{fill:var(--ink-3);font-size:12px;font-weight:500;paint-order:stroke;stroke:#F7F8F7;stroke-width:4;stroke-linejoin:round}
.zmap a:hover .zm-t,.zmap a:focus .zm-t{fill:var(--accent-text)}
.zmap .zm-base{fill:var(--accent);stroke:var(--ink);stroke-width:2}
.zmap .zm-basel{fill:var(--ink);paint-order:stroke;stroke:#F7F8F7;stroke-width:4}
.zmap .zm-pulse{fill:none;stroke:var(--accent-deep);stroke-width:1.5;transform-origin:0 0;animation:zm-pulse 2.4s ease-out infinite}
@keyframes zm-pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.zmap .zm-sweep,.zmap .zm-pulse{animation:none}}

/* Mineralwolle im Wand-3D: gedecktes Ocker statt Signalgelb */
.m-mw{background-color:#D9C28A;background-image:repeating-linear-gradient(115deg,rgba(176,148,84,.55) 0 2px,transparent 2px 9px),repeating-linear-gradient(65deg,rgba(240,226,190,.6) 0 2px,transparent 2px 11px);box-shadow:inset 0 0 0 1px rgba(120,96,40,.22)}

/* ---------- Branchen (Komplettausbau) ---------- */
.br-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.br-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 22px 20px;border-radius:var(--r-xl);background:var(--grad-steel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.br-card::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:var(--accent-deep);box-shadow:0 0 14px var(--accent-glow);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.br-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-strong);text-decoration:none}
a.br-card:hover::after,a.br-card:focus-visible::after{transform:scaleX(1)}
.br-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--grad-concrete);border:1px solid var(--line);color:var(--ink);transition:background-color .25s,color .25s,border-color .25s}
a.br-card:hover .br-ico{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.br-card h3{font-family:var(--f-display);font-weight:400;font-stretch:112%;font-size:1.32rem;line-height:1.08;letter-spacing:-.02em;margin-top:6px;text-wrap:balance}
.br-card p{color:var(--ink-2);font-size:.93rem;line-height:1.5}
.br-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.br-tags i{font-style:normal;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;padding:4px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.br-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}
.br-go svg{width:16px;height:16px;transition:transform .25s}
a.br-card:hover .br-go svg{transform:translateX(4px)}
.br-card--cta{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.br-card--cta p{color:var(--accent-ink);opacity:.78}
.br-card--cta::after{background:var(--accent-ink);box-shadow:none}
.br-kicker{align-self:flex-start;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid currentColor;opacity:.8}
@media (max-width:1100px){ .br-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .br-grid{grid-template-columns:1fr} .br-card{padding:18px} }

/* ---------- Hero: Modelle wechseln automatisch ---------- */
.hero-b__stage .stage-stack{transition:opacity .38s ease,transform .38s ease}
.hero-b__stage.is-fading .stage-stack{opacity:0;transform:scale(.985)}
.hero-b .scene-tab{position:relative;overflow:hidden}
.hero-b.is-rotating .scene-tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 rgba(var(--accent-rgb),.22)}
.hero-b.is-rotating .scene-tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform-origin:0 50%;transform:scaleX(var(--rot,0));transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){ .hero-b__stage .stage-stack{transition:none} }