/* =========================================================
   DOKA’S Immobilien (/immobilien/) – Seiten-Stile
   Baut auf base.css + b.css (Tokens: :root = Nacht, :root[data-theme="day"] = Tag) + marke.css auf.
   Farben NUR über Tokens bzw. color-mix() aus Tokens → Tag und Nacht funktionieren automatisch.
   Szenen-Farben (Haus, Himmel, Raum) als eigene Variablen unten, je Modus aus den Tokens abgeleitet.
   Keine Inline-Styles nötig (CSP: style-src 'self'); JS setzt nur CSS-Variablen/transform per CSSOM.
   ========================================================= */

/* ---------- Szenen-Tokens (Nacht = Standard) ---------- */
.immo{
  --sky-a:color-mix(in oklab,var(--bg) 82%,var(--pl) 18%);
  --sky-b:color-mix(in oklab,var(--bg-3) 55%,var(--pl) 45%);
  --sky-glow:color-mix(in oklab,var(--gd) 26%,transparent);
  --far:color-mix(in oklab,var(--bg-2) 75%,var(--pl) 25%);
  --far-2:color-mix(in oklab,var(--bg) 85%,var(--pl) 15%);
  --lawn:color-mix(in oklab,var(--pt) 50%,var(--bg-2));
  --lawn-2:color-mix(in oklab,var(--pt) 34%,var(--bg));
  --lawn-hi:color-mix(in oklab,var(--pt-2) 40%,var(--bg-2));
  --earth:color-mix(in oklab,var(--pl) 34%,var(--bg-2));
  --earth-2:color-mix(in oklab,var(--pl) 22%,var(--bg));
  --wall:color-mix(in oklab,var(--pl) 88%,var(--tx) 12%);
  --wall-2:color-mix(in oklab,var(--pl) 62%,var(--bg));
  --wall-top:color-mix(in oklab,var(--pl) 70%,var(--tx) 30%);
  --wall-old:color-mix(in oklab,var(--pl) 40%,var(--tx-3) 60%);
  --wall-old-2:color-mix(in oklab,var(--wall-old) 62%,var(--bg));
  --wall-new:color-mix(in oklab,var(--pl-2) 85%,var(--tx) 15%);
  --wall-new-2:color-mix(in oklab,var(--pl-2) 60%,var(--bg));
  --trim:color-mix(in oklab,var(--tx) 88%,var(--pl));
  --roof:color-mix(in oklab,var(--bg-4) 70%,var(--pl) 30%);
  --roof-2:color-mix(in oklab,var(--bg-4) 55%,var(--bg));
  --roof-reet:color-mix(in oklab,var(--gd-3) 62%,var(--bg-3));
  --roof-reet-2:color-mix(in oklab,var(--gd-3) 42%,var(--bg));
  --roof-neu:color-mix(in oklab,var(--bg) 80%,var(--pt) 20%);
  --roof-old:color-mix(in oklab,var(--roof) 70%,var(--tx-3) 30%);
  --win:var(--gd-2);
  --win-off:color-mix(in oklab,var(--bg) 70%,var(--pt) 30%);
  --win-glow:color-mix(in oklab,var(--gd-2) 45%,transparent);
  --frame:var(--trim);
  --door:color-mix(in oklab,var(--bg-3) 60%,var(--pl) 40%);
  --tree:color-mix(in oklab,var(--pt) 72%,var(--bg));
  --tree-2:color-mix(in oklab,var(--pt) 60%,var(--pt-2) 40%);
  --trunk:color-mix(in oklab,var(--pl) 40%,var(--bg));
  --deck:color-mix(in oklab,var(--gd-3) 50%,var(--bg-3));
  --deck-2:color-mix(in oklab,var(--gd-3) 34%,var(--bg));
  --patch:color-mix(in oklab,var(--tx-3) 70%,var(--bg-4));
  --sun:color-mix(in oklab,var(--gd-2) 75%,#fff);
  --moon:color-mix(in oklab,var(--tx) 82%,var(--gd-2));
  --cloud:color-mix(in oklab,var(--tx) 10%,transparent);
  --panel:color-mix(in oklab,var(--bg) 70%,var(--pt) 30%);
  --panel-ln:color-mix(in oklab,var(--pt-2) 70%,transparent);
  --mine:var(--gd-2);
  --room-wall:color-mix(in oklab,var(--tx-3) 42%,var(--bg-3));
  --room-wall-2:color-mix(in oklab,var(--tx-3) 30%,var(--bg-2));
  --room-floor:color-mix(in oklab,var(--tx-3) 30%,var(--bg-4));
  --room-new:color-mix(in oklab,var(--tx) 80%,var(--gd-2) 20%);
  --room-new-2:color-mix(in oklab,var(--tx) 64%,var(--pl) 20%);
  --room-ceil-new:color-mix(in oklab,var(--tx) 88%,var(--bg));
  --room-wood:color-mix(in oklab,var(--gd-3) 65%,var(--bg-3));
  --room-wood-2:color-mix(in oklab,var(--gd) 55%,var(--bg-3));
  --room-accent:color-mix(in oklab,var(--pl) 80%,var(--bg));
  --room-sofa:color-mix(in oklab,var(--pt) 75%,var(--bg-2));
  --room-sofa-2:color-mix(in oklab,var(--pt) 55%,var(--bg));
  --room-outside:color-mix(in oklab,var(--bg) 70%,var(--pl) 30%);
}
:root[data-theme="day"] .immo{
  --sky-a:color-mix(in oklab,var(--pt-2) 26%,var(--bg));
  --sky-b:color-mix(in oklab,var(--gd-2) 18%,var(--bg));
  --sky-glow:color-mix(in oklab,var(--gd-2) 30%,transparent);
  --far:color-mix(in oklab,var(--pt) 30%,var(--bg-3));
  --far-2:color-mix(in oklab,var(--pt) 18%,var(--bg-2));
  --lawn:color-mix(in oklab,var(--pt) 52%,color-mix(in oklab,var(--gd-2) 30%,var(--bg-3)));
  --lawn-2:color-mix(in oklab,var(--pt) 62%,var(--bg-4));
  --lawn-hi:color-mix(in oklab,var(--pt) 30%,var(--bg));
  --earth:color-mix(in oklab,var(--pl) 58%,var(--tx) 42%);
  --earth-2:color-mix(in oklab,var(--pl) 40%,var(--tx) 60%);
  --wall:color-mix(in oklab,var(--pl) 82%,var(--bg) 18%);
  --wall-2:color-mix(in oklab,var(--pl) 76%,var(--tx) 24%);
  --wall-top:color-mix(in oklab,var(--pl) 50%,var(--bg));
  --wall-old:color-mix(in oklab,var(--pl) 34%,var(--tx-3) 66%);
  --wall-new:color-mix(in oklab,var(--pl) 70%,var(--gd-2) 12%);
  --wall-new-2:color-mix(in oklab,var(--pl) 70%,var(--tx) 30%);
  --trim:var(--bg);
  --roof:color-mix(in oklab,var(--tx) 82%,var(--pl) 18%);
  --roof-2:color-mix(in oklab,var(--tx) 92%,#000);
  --roof-reet:color-mix(in oklab,var(--gd-2) 70%,var(--bg-4));
  --roof-reet-2:color-mix(in oklab,var(--gd-3) 80%,var(--tx));
  --roof-neu:color-mix(in oklab,var(--tx) 90%,var(--pt) 10%);
  --win:color-mix(in oklab,var(--pt) 30%,var(--bg));
  --win-off:color-mix(in oklab,var(--pt) 40%,var(--bg-3));
  --win-glow:transparent;
  --door:color-mix(in oklab,var(--tx) 70%,var(--pl) 30%);
  --tree:color-mix(in oklab,var(--pt) 88%,var(--tx));
  --tree-2:color-mix(in oklab,var(--pt) 75%,var(--gd-2) 25%);
  --trunk:color-mix(in oklab,var(--pl) 60%,var(--tx));
  --deck:color-mix(in oklab,var(--gd-2) 60%,var(--bg-3));
  --deck-2:color-mix(in oklab,var(--gd-3) 70%,var(--tx));
  --patch:color-mix(in oklab,var(--bg-4) 60%,var(--tx-3));
  --sun:color-mix(in oklab,var(--gd-2) 55%,#fff);
  --cloud:color-mix(in oklab,#fff 85%,transparent);
  --panel:color-mix(in oklab,var(--tx) 70%,var(--pt) 30%);
  --panel-ln:color-mix(in oklab,var(--pt) 40%,var(--bg));
  --mine:var(--gd);
  --room-wall:color-mix(in oklab,var(--tx-3) 45%,var(--bg-4));
  --room-wall-2:color-mix(in oklab,var(--tx-3) 55%,var(--bg-4));
  --room-floor:color-mix(in oklab,var(--tx-3) 50%,var(--bg-4));
  --room-new:color-mix(in oklab,var(--bg) 90%,var(--gd-2) 10%);
  --room-new-2:color-mix(in oklab,var(--bg-3) 85%,var(--pl) 15%);
  --room-ceil-new:var(--bg);
  --room-wood:color-mix(in oklab,var(--gd-2) 55%,var(--bg-3));
  --room-wood-2:color-mix(in oklab,var(--gd) 45%,var(--bg-3));
  --room-accent:color-mix(in oklab,var(--pl) 75%,var(--bg));
  --room-sofa:color-mix(in oklab,var(--pt) 80%,var(--bg));
  --room-sofa-2:color-mix(in oklab,var(--pt) 90%,var(--tx));
  --room-outside:color-mix(in oklab,var(--pt) 22%,var(--bg));
}

/* ---------- Kopf: wie Startseite (marke--hdr ab 900 px, darunter marke--hero/--mnav), hier 6 Menüpunkte ---------- */
.immo .hdr-actions{gap:6px}
.immo .nav a{padding:0 9px;font-size:14px}
.immo .nav a::after{left:10px;right:10px}
.immo .nav ul{gap:0}
.immo .marke--hero{margin:0 0 16px}
/* marke.css (lädt nach b.css) setzt .marke{display:inline-grid} – hier die Sichtbarkeit je Breite festhalten */
.immo .marke--hdr{display:none}
@media (min-width:900px){.immo .marke--hdr{display:inline-grid}.immo .marke--hero{display:none}}
/* volle Navigation erst ab 1280 px (dort blendet b.css den Logo-Text bis 1439 px aus), darunter Menü-Knopf */
@media (min-width:1100px) and (max-width:1279.98px){
  .immo .nav{display:none}
  .immo .burger{display:grid}
  .immo .mnav{display:flex}
  .immo .hdr-actions{margin-left:auto}
}
@media (min-width:1280px) and (max-width:1439.98px){.immo .hdr-tel{display:none}}
.immo .hdr-tel span{display:none}
.immo .mnav.is-open .mnav-list li:nth-child(7) a{transition-delay:.54s}

/* ---------- Original-Logo (marke.css: .brand-logo.logo-immo, Farben per Theme) ---------- */
.immo .logo{gap:10px}
.immo .hdr .logo .brand-logo{width:52px;margin-block:-2px}
@media (max-width:899.98px){.immo .hdr .logo .brand-logo{width:48px}}
.immo .foot .logo .brand-logo{width:92px}
.immo .foot .logo{gap:14px}

/* ---------- Hero ---------- */
.ih{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--hdr-top) + 64px + clamp(20px,4vw,44px)) 0 clamp(36px,5vw,72px)}
.ih-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ih-glow{position:absolute;inset:0;background:
  radial-gradient(55% 55% at 78% 38%,color-mix(in oklab,var(--pl) 34%,transparent),transparent 72%),
  radial-gradient(45% 40% at 8% 95%,color-mix(in oklab,var(--gd) 16%,transparent),transparent 70%),
  radial-gradient(40% 35% at 30% 0%,color-mix(in oklab,var(--pt) 16%,transparent),transparent 70%)}
.ih-grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:58px 58px;
  -webkit-mask-image:radial-gradient(60% 70% at 72% 40%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 72% 40%,#000,transparent 75%)}
.ih-grid-wrap{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
@media (min-width:1024px){.ih-grid-wrap{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.ih-text{display:grid;justify-items:start;min-width:0}
.ih-eyebrow{display:inline-block;padding:7px 15px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gd);
  background:var(--glass);border:1px solid color-mix(in oklab,var(--gd) 35%,transparent)}
.ih-eyebrow .live-dot{margin:-2px 10px 0 0}
@media (max-width:520px){.ih-eb-more{display:none}}
.ih-title{margin-top:16px;max-width:20ch;font-size:clamp(2.05rem,1.15rem + 3.5vw,3.95rem);line-height:1.04;letter-spacing:-.022em;font-weight:500}
.ih-title em{font-weight:400;color:var(--pl-3)}
:root[data-theme="day"] .ih-title em{color:var(--pl-2)}
.ih-title .split-word{overflow:visible}
.ih-claim{margin-top:14px;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.25rem,1rem + 1vw,1.85rem);line-height:1.2;color:var(--tx)}
.ih-claim-sub{font-style:normal;font-family:var(--font-alt);font-size:.62em;font-weight:700;letter-spacing:.02em;color:var(--tx-2);white-space:nowrap}
.ih-lead{margin-top:14px;max-width:56ch;font-size:clamp(.98rem,.93rem + .25vw,1.1rem);line-height:1.6;color:var(--tx-2)}
.ih-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.ih-trust{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.ih-trust li,.ih-trust a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 8px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--tx);background:var(--glass);border:1px solid var(--ln)}
.ih-trust li:has(a){padding:0;border:0;background:none}
.ih-trust a{transition:border-color .3s}
.ih-trust a:hover{border-color:color-mix(in oklab,var(--gd) 60%,transparent)}
.ih-trust .i{width:26px;height:26px;padding:5px;border-radius:50%;color:var(--gd);background:color-mix(in oklab,var(--gd) 14%,transparent)}
@media (max-width:520px){
  .ih-cta{width:100%}
  .ih-cta .btn{flex:1 1 100%;white-space:normal}
}
.ih-stage{position:relative;min-width:0;margin:calc(clamp(190px,46vw,240px) * .66) 0 0}
/* Logo-Medaillon: liegt halb über der Szenen-Karte; alle Bewegungen nur transform/opacity an Hüll-Elementen */
.ih-medal{--mw:clamp(190px,46vw,240px);position:absolute;z-index:6;left:calc(50% - var(--mw) / 2);top:calc(var(--mw) * -.7);width:var(--mw);aspect-ratio:1;pointer-events:none}
@media (min-width:1024px){
  .ih-medal{--mw:clamp(220px,19vw,290px);left:calc(var(--mw) * -.28);top:calc(var(--mw) * -.3)}
  .ih-stage{margin-top:0}
}
.ih-medal-in,.ih-medal-float{position:absolute;inset:0}
.js .ih-medal-in{animation:medal-in 1.2s var(--ease-out) .35s both}
.ih-medal-float{animation:medal-float 7s ease-in-out infinite}
.ih-medal-disc{position:absolute;inset:9%;border-radius:50%;overflow:hidden;display:grid;place-items:center;isolation:isolate;
  background:radial-gradient(circle at 34% 28%,color-mix(in oklab,var(--bg-3) 85%,var(--logo-immo-gold,var(--gd)) 15%),var(--bg-2) 62%,var(--bg) 100%);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.75),0 0 0 1px color-mix(in oklab,var(--logo-immo-gold,var(--gd)) 45%,transparent),inset 0 1px 0 var(--hi,rgba(255,255,255,.06))}
:root[data-theme="day"] .ih-medal-disc{background:radial-gradient(circle at 34% 28%,#fff,var(--bg) 60%,var(--bg-3) 100%);box-shadow:0 30px 60px -30px rgba(60,40,50,.5),0 0 0 1px color-mix(in oklab,var(--logo-immo-gold,var(--gd)) 40%,transparent)}
.ih-medal-disc .brand-logo{width:88%}
.ih-medal-shine{position:absolute;inset:-30%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:translateX(-80%);animation:medal-shine 7s ease-in-out 1.6s infinite}
:root[data-theme="day"] .ih-medal-shine{background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%)}
.ih-medal-ring{position:absolute;inset:4.5%;border-radius:50%;border:1px solid color-mix(in oklab,var(--logo-immo-gold,var(--gd)) 35%,transparent)}
.ih-medal-orbit{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 58%,color-mix(in oklab,var(--logo-immo-gold,var(--gd)) 25%,transparent) 70%,var(--logo-immo-gold,var(--gd)) 82%,transparent 84%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:sc-spin 9s linear infinite}
.ih-medal-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--logo-immo-gold,var(--gd)) 34%,transparent),transparent 72%);animation:medal-glow 4.8s ease-in-out infinite}
:root[data-theme="day"] .ih-medal-glow{background:radial-gradient(closest-side,color-mix(in oklab,var(--gd-2) 26%,transparent),transparent 72%)}
@keyframes medal-in{from{opacity:0;transform:scale(.6) rotate(-25deg)}}
@keyframes medal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes medal-glow{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes medal-shine{0%,62%{transform:translateX(-80%)}84%,100%{transform:translateX(80%)}}
.js .ih-medal:not(.in-view) *{animation-play-state:paused!important}
.ih-ticker{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:var(--tx);background:color-mix(in oklab,var(--bg) 72%,transparent);border:1px solid var(--ln-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ih-ticker-l{text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--gd)}
.ih-steps{display:flex;gap:4px}
.ih-steps li{padding:4px 10px;border-radius:999px;color:var(--tx-2);transition:background .4s,color .4s}
.ih-steps li.is-on{color:var(--on-gold);background:var(--btn-gold,var(--grad-gold))}
@media (max-width:420px){.ih-ticker-l{display:none}}

/* ---------- Szenen-Karte (Himmel folgt Tag/Nacht) ---------- */
.scene-card{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;aspect-ratio:600/470;border:1px solid var(--ln-2);
  background:radial-gradient(70% 55% at 78% 22%,var(--sky-glow),transparent 70%),linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 78%);
  box-shadow:var(--shadow),inset 0 1px 0 color-mix(in oklab,var(--tx) 8%,transparent)}
.scene-card--hero{border-radius:30px}
.scene{position:absolute;inset:0}
.scene svg{width:100%;height:100%;display:block;overflow:visible}
.scene-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.scene-tag{position:absolute;right:12px;top:12px;z-index:3;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--tx);
  background:color-mix(in oklab,var(--bg) 70%,transparent);border:1px solid var(--ln-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Himmel */
.sc-sun,.sc-moon,.sc-stars{transition:transform 1.4s var(--ease-out),opacity 1.1s ease}
.sc-sun-core{fill:var(--sun)}
.sc-sun-halo{fill:var(--sun);opacity:.22}
.sc-sun-rays{stroke:var(--sun);stroke-width:2.4;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center;animation:sc-spin 40s linear infinite}
.sc-moon{fill:var(--moon)}
.sc-star{fill:var(--tx);animation:sc-twinkle 3.2s ease-in-out infinite}
.sc-star:nth-child(3n){animation-delay:-1.1s}
.sc-star:nth-child(3n+1){animation-delay:-2.2s}
:root:not([data-theme="day"]) .sc-sun{transform:translateY(120px);opacity:0}
:root[data-theme="day"] .sc-moon{transform:translateY(-60px);opacity:0}
:root[data-theme="day"] .sc-stars{opacity:0}
.sc-cloud{fill:var(--cloud);animation:sc-drift 46s linear infinite}
.sc-cloud.is2{animation-duration:62s;animation-delay:-30s}
.sc-far{fill:var(--far)}
.sc-far-2{fill:var(--far-2)}
.sc-mill{stroke:var(--far-2);stroke-width:1.6;fill:none;stroke-linecap:round}
:root[data-theme="day"] .sc-mill{stroke:color-mix(in oklab,var(--tx) 40%,var(--bg))}
.sc-rotor{transform-box:fill-box;transform-origin:center;animation:sc-spin 7s linear infinite}
.sc-rotor.is2{animation-duration:9s;animation-delay:-3s}
.sc-rotor circle{fill:none;stroke:none}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes sc-drift{from{transform:translateX(-140px)}to{transform:translateX(760px)}}

/* Grundstück (Diorama) */
.sc-top{fill:var(--lawn)}
.sc-l{fill:var(--earth)}
.sc-r{fill:var(--earth-2)}
.sc-rim{fill:none;stroke:color-mix(in oklab,var(--lawn-hi) 80%,transparent);stroke-width:1.2}
.sc-grass{stroke:var(--lawn-hi);stroke-width:1.2;stroke-linecap:round;fill:none;opacity:.7}
.sc-path{fill:color-mix(in oklab,var(--deck) 60%,var(--lawn))}
.sc-pave{fill:color-mix(in oklab,var(--far) 70%,var(--lawn))}
.sc-shadow{fill:color-mix(in oklab,#000 22%,transparent)}
:root[data-theme="day"] .sc-shadow{fill:color-mix(in oklab,var(--tx) 12%,transparent)}

/* Haus: Flächen */
.h-scale{transform-origin:300px 300px;transition:transform .8s cubic-bezier(.34,1.45,.64,1)}
.obj{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.45,.64,1);pointer-events:none}
.scene[data-art="wohnung"] .obj-wohnung,.scene[data-art="efh"] .obj-efh,.scene[data-art="dhh"] .obj-dhh,.scene[data-art="mfh"] .obj-mfh{opacity:1;transform:none}
.h-body .f-l{fill:var(--wall)}
.h-body .f-r,.r-gab{fill:var(--wall-2)}
.h-body .f-t{fill:var(--wall-top)}
.h-body .f-l,.h-body .f-r,.r-gab,.r-f,.r-b{transition:fill .9s ease}
.r-f{fill:var(--roof)}
.r-b{fill:var(--roof-2)}
.r-edge{fill:none;stroke:var(--trim);stroke-width:1.6;stroke-linejoin:round;opacity:.75}
.r-flat .f-t{fill:var(--roof)}
.r-flat .f-l{fill:var(--roof-2)}
.r-flat .f-r{fill:var(--roof-2)}
.r-flat-in{fill:var(--roof-2)}
.h-chim .f-l{fill:var(--wall-2)}
.h-chim .f-r{fill:color-mix(in oklab,var(--wall-2) 70%,#000)}
.h-chim .f-t{fill:var(--roof-2)}
.h-band{fill:none;stroke:var(--trim);stroke-width:1.2;opacity:.35}
.ghost{opacity:.5}
.ghost .f-l,.ghost.f-l{fill:color-mix(in oklab,var(--wall) 40%,var(--far))}
.ghost .f-r{fill:color-mix(in oklab,var(--wall-2) 40%,var(--far))}
.ghost .r-f,.ghost.r-f{fill:color-mix(in oklab,var(--roof) 60%,var(--far))}
.dhh-wall{fill:none;stroke:var(--trim);stroke-width:1.4;opacity:.5}

/* Fenster & Tür */
.w-g{fill:var(--win);transition:fill .9s ease}
.w-g.is-off{fill:var(--win-off)}
:root[data-theme="day"] .w-g.is-off{fill:var(--win)}
.w-f{fill:none;stroke:var(--frame);stroke-width:1.1;opacity:.8}
.w-o{fill:none;stroke:var(--frame);stroke-width:1.5;stroke-linejoin:round;transition:stroke .6s}
.w-sill{fill:none;stroke:var(--frame);stroke-width:2;stroke-linecap:round;opacity:.7}
.w-glow{fill:var(--win-glow);opacity:.0;transition:opacity 1s}
:root:not([data-theme="day"]) .w-glow{opacity:.55}
.h-door{fill:var(--door);transition:fill .6s}
.h-door-o{fill:none;stroke:var(--frame);stroke-width:1.4}
.h-knob{fill:var(--gd-2)}
.h-canopy{fill:var(--roof)}
.w-mine .w-o{stroke:var(--mine);stroke-width:2.4}
.w-mine .w-g{fill:var(--mine)}
.h-pin{fill:var(--gd);animation:h-bob 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.h-pin-dot{fill:var(--bg)}
.h-pin-t{font:800 11px var(--font-alt);letter-spacing:.06em;fill:var(--tx);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
@keyframes h-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.h-balc{fill:none;stroke:var(--trim);stroke-width:1.3}
.h-body .h-canopy .f-l,.h-body .h-canopy .f-r,.h-body .h-canopy .f-t{fill:var(--roof)}
.h-body .h-balc-b .f-l,.h-body .h-balc-b .f-r,.h-body .h-balc-b .f-t{fill:var(--trim)}
.h-balc-f{fill:color-mix(in oklab,var(--trim) 18%,transparent)}

/* Ausstattung */
.scene[data-aus="gehoben"]{--door:var(--gd);--frame:color-mix(in oklab,var(--gd-2) 80%,var(--trim))}
.scene[data-aus="einfach"]{--frame:color-mix(in oklab,var(--trim) 55%,var(--wall-2))}
.a-geh{opacity:0;transition:opacity .6s}
.scene[data-aus="gehoben"] .a-geh{opacity:1}
.a-lamp{fill:var(--gd-2)}
.a-lamp-glow{fill:var(--gd-2);opacity:.25}
:root:not([data-theme="day"]) .a-lamp-glow{opacity:.5}
.a-box{fill:color-mix(in oklab,var(--pl-3) 60%,var(--gd-2))}

/* Baujahr: Reetdach (alt) / dunkles Dach (neu) */
.scene[data-era="alt"]{--roof:var(--roof-reet);--roof-2:var(--roof-reet-2)}
.scene[data-era="neu"]{--roof:var(--roof-neu)}
.e-reet{fill:none;stroke:color-mix(in oklab,var(--roof-reet-2) 70%,transparent);stroke-width:1;opacity:0;transition:opacity .8s}
.scene[data-era="alt"] .e-reet{opacity:.8}

/* Zustand */
.z-old,.z-mod,.z-new{opacity:0;transition:opacity .7s ease}
.scene[data-zustand="renovierungsbeduerftig"]{--wall:var(--wall-old);--wall-2:var(--wall-old-2);--roof:var(--roof-old);--win:var(--win-off)}
.scene[data-zustand="renovierungsbeduerftig"] .z-old{opacity:1}
.scene[data-zustand="modernisiert"] .z-mod,.scene[data-zustand="neuwertig"] .z-mod{opacity:1}
.scene[data-zustand="neuwertig"]{--wall:var(--wall-new);--wall-2:var(--wall-new-2)}
.scene[data-zustand="neuwertig"] .z-new{opacity:1}
.z-patch{fill:var(--patch);opacity:.85}
.z-crack{fill:none;stroke:color-mix(in oklab,var(--bg) 70%,#000);stroke-width:1.3;stroke-linejoin:round}
.z-weed{fill:none;stroke:color-mix(in oklab,var(--lawn-hi) 70%,var(--gd-3));stroke-width:1.3;stroke-linecap:round}
.z-shutter{fill:color-mix(in oklab,var(--patch) 80%,var(--bg));stroke:var(--bg);stroke-width:.6}
.z-hole{fill:color-mix(in oklab,var(--bg) 70%,#000)}
.z-panel{fill:var(--panel);stroke:var(--panel-ln);stroke-width:.8}
.z-gloss{fill:#fff;opacity:0}
.scene[data-zustand="neuwertig"] .z-gloss{animation:z-gloss 3.6s ease-in-out infinite}
.z-gloss.is2{animation-delay:-1.2s!important}
@keyframes z-gloss{0%,100%{opacity:0}45%{opacity:.22}}
.z-spark{fill:var(--gd-2);transform-box:fill-box;transform-origin:center;animation:z-tw 2.4s ease-in-out infinite}
.z-spark:nth-child(2){animation-delay:-.8s}
.z-spark:nth-child(3){animation-delay:-1.6s}
.z-spark:nth-child(4){animation-delay:-.4s}
@keyframes z-tw{0%,100%{transform:scale(.2) rotate(0deg);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}

/* Extras: Garage, Garten, Keller, Küche */
.x{transition:opacity .45s ease,transform .75s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:scale(.4,0)}
.scene[data-garage="1"] .x-garage,.scene[data-garten="1"] .x-garten,.scene[data-keller="1"] .x-keller,.scene[data-kueche="1"] .x-kueche{opacity:1;transform:none}
.x-garten{transition:opacity .5s ease}
.scene:not([data-garten="1"]) .x-garten{opacity:0}
.x-garten .x-tree:nth-child(2){transition-delay:.08s}
.x-garten .x-tree:nth-child(3){transition-delay:.16s}
.x-garage .f-l{fill:var(--wall)}
.x-garage .f-r{fill:var(--wall-2)}
.x-garage .f-t{fill:var(--roof)}
.x-gdoor{fill:color-mix(in oklab,var(--trim) 75%,var(--wall-2))}
.x-gline{fill:none;stroke:color-mix(in oklab,var(--wall-2) 70%,transparent);stroke-width:1}
.x-car .f-l{fill:var(--pt-2)}
.x-car .f-r{fill:var(--pt)}
.x-car .f-t{fill:color-mix(in oklab,var(--pt-2) 60%,var(--tx))}
.x-slot{fill:none;stroke:color-mix(in oklab,var(--trim) 60%,transparent);stroke-width:1.4;stroke-dasharray:4 4}
.x-tree{transition:transform .7s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:50% 100%}
.scene:not([data-garten="1"]) .x-tree{transform:scale(0)}
.x-crown{fill:var(--tree)}
.x-crown-2{fill:var(--tree-2)}
.x-trunk{fill:none;stroke:var(--trunk);stroke-width:3;stroke-linecap:round}
.x-bush{fill:var(--tree-2)}
.x-flower{fill:var(--pl-3)}
.x-flower.is-g{fill:var(--gd-2)}
.x-deck .f-t{fill:var(--deck)}
.x-deck .f-l,.x-deck .f-r{fill:var(--deck-2)}
.x-plank{fill:none;stroke:var(--deck-2);stroke-width:.8;opacity:.8}
.x-para{fill:var(--pl-2)}
.x-para-2{fill:var(--pl)}
.x-pole{fill:none;stroke:var(--trim);stroke-width:1.4}
.x-keller{transform:translateY(14px);transform-origin:50% 0}
.x-kf{fill:color-mix(in oklab,var(--gd) 12%,transparent)}
.x-ke{fill:none;stroke:var(--gd-2);stroke-width:1.5;stroke-dasharray:5 4;stroke-linecap:round;animation:x-dash 1.6s linear infinite}
@keyframes x-dash{to{stroke-dashoffset:-18}}
.x-kt{font:800 10.5px var(--font-alt);letter-spacing:.14em;fill:var(--gd-2);text-transform:uppercase}
:root[data-theme="day"] .x-ke{stroke:var(--gd)}
:root[data-theme="day"] .x-kt{fill:var(--gd)}
.x-kueche{transform:none;opacity:0}
.x-kglow{fill:color-mix(in oklab,var(--gd-2) 70%,#fff)}
.x-steam{fill:none;stroke:color-mix(in oklab,var(--tx) 50%,transparent);stroke-width:2;stroke-linecap:round;animation:x-steam 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.x-steam.is2{animation-delay:-.8s}
.x-steam.is3{animation-delay:-1.6s}
:root[data-theme="day"] .x-steam{stroke:color-mix(in oklab,var(--tx-3) 60%,transparent)}
@keyframes x-steam{0%{transform:translateY(6px) scaleY(.6);opacity:0}40%{opacity:.9}100%{transform:translateY(-10px) scaleY(1.1);opacity:0}}

/* Animationen nur, wenn sichtbar (immo.js setzt .in-view) */
.js .scene-card:not(.in-view) *,.js .waage-card:not(.in-view) *{animation-play-state:paused!important}

/* ---------- Leistungen ---------- */
.il::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 40% at 50% 0%,color-mix(in oklab,var(--pl) 20%,transparent),transparent 70%)}
.il-grid{display:grid;gap:12px}
.il-card{display:grid;align-content:start;gap:8px;padding:clamp(18px,2.2vw,26px);border-radius:22px;overflow:hidden}
.il-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--gd);background:color-mix(in oklab,var(--gd) 13%,transparent);border:1px solid color-mix(in oklab,var(--gd) 30%,transparent);margin-bottom:4px}
.il-ico .i{width:24px;height:24px}
.il-kicker{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gd)}
.il-card h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem)}
.il-card p:not(.il-kicker){font-size:.96em;max-width:52ch}
.il-card .link-arrow{margin-top:2px;justify-self:start;color:var(--gd)}
.il-card .link-arrow:hover{color:var(--tx)}
.il-card--gold{border-color:color-mix(in oklab,var(--gd) 40%,transparent);background:radial-gradient(90% 80% at 100% 0%,color-mix(in oklab,var(--gd) 16%,transparent),transparent 65%),linear-gradient(180deg,var(--glass-2),var(--glass))}
@media (min-width:700px){.il-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.il-card--gold{grid-column:1/-1}}
@media (min-width:1024px){
  .il-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .il-card{grid-column:span 2}
  .il-card--wide{grid-column:span 3}
  .il-card--gold{grid-column:span 2}
}

/* ---------- Rechner: Rahmen ---------- */
.calc{overflow:clip}
.calc-bgfx{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 85% 30%,color-mix(in oklab,var(--pl) 22%,transparent),transparent 70%),radial-gradient(40% 40% at 5% 80%,color-mix(in oklab,var(--pt) 14%,transparent),transparent 70%)}
.calc--b .calc-bgfx{background:radial-gradient(45% 50% at 15% 30%,color-mix(in oklab,var(--gd) 12%,transparent),transparent 70%),radial-gradient(40% 40% at 95% 80%,color-mix(in oklab,var(--pl) 18%,transparent),transparent 70%)}
.calc-nojs{display:block;padding:18px 20px;border-radius:18px;font-size:15px;color:var(--tx)}
.calc-nojs a{color:var(--gd);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.js .calc-nojs{display:none}
html:not(.js) .calc-panel{display:none}
.calc-panel{display:grid;gap:16px;padding:clamp(12px,2vw,24px);border-radius:28px;background:linear-gradient(180deg,var(--glass-2),var(--glass))}
.calc-side{display:contents}
.calc-visual{order:-2;min-width:0}
.calc-result{order:-1}
.calc-inputs{display:grid;gap:18px;align-content:start;min-width:0;padding:4px}
@media (min-width:1024px){
  .calc-panel{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(20px,2.6vw,36px);align-items:start}
  .calc-side{display:grid;gap:14px;grid-column:2;grid-row:1;position:sticky;top:88px;align-content:start}
  .calc-inputs{grid-column:1;grid-row:1;padding:8px 4px}
  .calc-visual{order:0}
  .calc-result{order:0}
  /* Lohnt sich + Renovierung: Bild unter den Eingaben, Ergebnis rechts mitlaufend */
  .calc--b .calc-side,.calc--c .calc-side{display:contents}
  .calc--b .calc-inputs,.calc--c .calc-inputs{grid-column:1;grid-row:1}
  .calc--b .calc-visual,.calc--c .calc-visual{grid-column:1;grid-row:2}
  .calc--b .calc-result,.calc--c .calc-result{grid-column:2;grid-row:1/span 2;position:sticky;top:88px;align-self:start}
}
.calc-panel.is-loading .calc-inputs,.calc-panel.is-loading .calc-result{opacity:.4;pointer-events:none}
.calc-err{padding:14px 16px;border-radius:14px;font-size:14.5px;font-weight:600;color:var(--tx);background:color-mix(in oklab,#E86D7D 14%,transparent);border:1px solid color-mix(in oklab,#E86D7D 45%,transparent)}

/* ---------- Bedienelemente ---------- */
.ctl{display:grid;gap:9px;min-width:0;border:0}
.ctl-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);padding:0}
legend.ctl-label{float:left;width:100%;margin-bottom:9px}
legend.ctl-label+*{clear:both}
.ctl-hint{font-size:13px;line-height:1.45;color:var(--tx-3)}
.ctl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ctl-out{font-family:var(--font-serif);font-size:1.45rem;line-height:1;color:var(--tx);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;display:inline-block;transition:color .3s}
.ctl-out.is-bump{animation:out-bump .35s var(--ease-out)}
@keyframes out-bump{40%{transform:translateY(-3px);color:var(--gd)}}
.ctl-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px}
.ctl-pair{display:grid;gap:18px}
@media (min-width:640px) and (max-width:1023.98px),(min-width:1240px){.ctl-pair{grid-template-columns:1fr 1fr}}
.ctl-collapse{transition:opacity .4s,filter .4s}
.ctl-collapse.is-off{opacity:.38;filter:grayscale(1)}
.ctl-collapse.is-off .ctl-hint{display:block}

/* Stepper-Knöpfe */
.stp{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tx);background:var(--glass-2);border:1px solid var(--ln-2);transition:border-color .3s,background .3s,transform .2s}
.stp .i{width:18px;height:18px}
.stp:hover{border-color:color-mix(in oklab,var(--gd) 70%,transparent);color:var(--gd)}
.stp:active{transform:scale(.92)}
.stp:disabled{opacity:.35;cursor:not-allowed}
.stepper{display:inline-grid;grid-template-columns:44px 64px 44px;align-items:center;gap:6px;justify-self:start;padding:4px;border-radius:999px;background:var(--glass);border:1px solid var(--ln)}
.num{width:64px;min-height:44px;text-align:center;font-family:var(--font-serif);font-size:1.45rem;color:var(--tx);background:transparent;border:0;border-radius:10px;font-variant-numeric:lining-nums tabular-nums;-moz-appearance:textfield;appearance:textfield}
.num::-webkit-inner-spin-button,.num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.num:focus-visible{outline:2px solid var(--gd-2);outline-offset:0}

/* Schieberegler */
.rng{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.rng:focus{outline:none}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--gd-3),var(--gd) 60%,var(--gd-2)) 0 0/var(--p) 100% no-repeat,var(--ln-2)}
.rng::-moz-range-track{height:8px;border-radius:8px;background:var(--ln-2)}
.rng::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--gd-3),var(--gd) 60%,var(--gd-2))}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--grad-gold);border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--gd),0 8px 18px -6px color-mix(in oklab,var(--gd) 80%,transparent);transition:transform .2s var(--ease-out),box-shadow .2s}
.rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--grad-gold);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--gd)}
.rng:hover::-webkit-slider-thumb{transform:scale(1.08)}
.rng:active::-webkit-slider-thumb{transform:scale(1.18)}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gd-2)}
.rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gd-2)}

/* Segment-Knöpfe (Radios) */
.segs{--n:4;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:var(--glass);border:1px solid var(--ln)}
.segs--3{--n:3}
@media (max-width:560px){.segs--4{--n:2}}
.segs-ind{position:absolute;left:0;top:0;z-index:0;width:0;height:0;border-radius:12px;pointer-events:none;opacity:0;
  background:var(--btn-gold,var(--grad-gold));box-shadow:0 10px 24px -10px color-mix(in oklab,var(--gd) 80%,transparent),inset 0 1px 0 color-mix(in oklab,#fff 35%,transparent);
  transition:transform .55s var(--ease-out),width .55s var(--ease-out),height .55s var(--ease-out),opacity .3s}
.segs.has-ind .segs-ind{opacity:1}
.seg-o{position:relative;z-index:1;display:block;min-width:0;cursor:pointer}
.seg-o input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg-o span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:100%;min-height:48px;padding:8px 6px;border-radius:12px;font-size:13.5px;font-weight:700;line-height:1.2;text-align:center;color:var(--tx-2);-webkit-hyphens:manual;hyphens:manual;transition:color .35s}
.segs--ico .seg-o span{min-height:72px}
.seg-o .i{width:24px;height:24px;color:var(--gd);transition:color .35s,transform .45s var(--ease-out)}
.seg-o:hover span{color:var(--tx)}
.seg-o input:checked+span{color:var(--on-gold)}
.seg-o input:checked+span .i{color:var(--on-gold);transform:translateY(-2px) scale(1.08)}
.segs:not(.has-ind) .seg-o input:checked+span{background:var(--btn-gold,var(--grad-gold))}
.seg-o input:focus-visible+span{outline:2px solid var(--gd-2);outline-offset:2px}

/* Auswahl-Kärtchen (Checkboxen) */
.tgls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tgl{position:relative;display:block;cursor:pointer;min-width:0}
.tgl input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tgl span{position:relative;display:flex;align-items:center;gap:10px;height:100%;min-height:52px;padding:8px 40px 8px 10px;border-radius:14px;font-size:13.5px;font-weight:700;line-height:1.25;color:var(--tx);
  background:var(--glass);border:1px solid var(--ln-2);transition:border-color .3s,background .3s,transform .3s var(--ease-out)}
.tgl span>.i{width:30px;height:30px;padding:6px;border-radius:9px;color:var(--gd);background:color-mix(in oklab,var(--gd) 12%,transparent);transition:background .3s,color .3s}
.tgl:hover span{border-color:color-mix(in oklab,var(--gd) 55%,transparent);transform:translateY(-1px)}
.tgl-ck{position:absolute;right:10px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1.5px solid var(--ln-2);transition:background .3s,border-color .3s,transform .4s var(--ease-out)}
.tgl-ck::after{content:"";position:absolute;left:6px;top:4px;width:6px;height:10px;border-right:2px solid var(--on-gold);border-bottom:2px solid var(--on-gold);transform:rotate(45deg) scale(0);transition:transform .3s var(--ease-out)}
.tgl input:checked+span{border-color:var(--gd);background:color-mix(in oklab,var(--gd) 13%,transparent)}
.tgl input:checked+span>.i{color:var(--on-gold);background:var(--btn-gold,var(--grad-gold))}
.tgl input:checked+span .tgl-ck{background:var(--btn-gold,var(--grad-gold));border-color:var(--gd);transform:scale(1.05)}
.tgl input:checked+span .tgl-ck::after{transform:rotate(45deg) scale(1)}
.tgl input:focus-visible+span{outline:2px solid var(--gd-2);outline-offset:3px}

/* Auswahlliste */
.sel{position:relative}
.sel select{-webkit-appearance:none;appearance:none;width:100%;min-height:50px;padding:0 46px 0 16px;border-radius:14px;font-size:16px;font-weight:700;color:var(--tx);background:var(--glass);border:1px solid var(--ln-2);cursor:pointer;transition:border-color .3s}
.sel select:hover{border-color:color-mix(in oklab,var(--gd) 55%,transparent)}
.sel select:focus-visible{outline:2px solid var(--gd-2);outline-offset:2px}
.sel select option{color:var(--tx);background:var(--bg-2)}
.sel .i{position:absolute;right:16px;top:50%;margin-top:-10px;width:20px;height:20px;color:var(--gd);pointer-events:none}

/* ---------- Ergebnis ---------- */
.calc-result{position:relative;display:grid;gap:10px;align-content:start;min-width:0;padding:clamp(16px,2vw,22px);border-radius:22px;
  background:linear-gradient(160deg,color-mix(in oklab,var(--gd) 9%,transparent),transparent 55%),color-mix(in oklab,var(--bg-2) 70%,transparent);border:1px solid color-mix(in oklab,var(--gd) 28%,var(--ln))}
.calc-res-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2)}
.calc-res-val{min-height:1.15em;font-family:var(--font-serif);font-size:clamp(1.85rem,1.2rem + 2.3vw,2.85rem);line-height:1.1;letter-spacing:-.01em;color:var(--tx)}
.calc-res-sub{font-size:14px;color:var(--tx-2)}
.calc-res-sub b{color:var(--tx)}
.calc-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:4px}
.calc-act .link-arrow{color:var(--gd)}
.calc-act .link-arrow:hover{color:var(--tx)}
@media (max-width:520px){.calc-act .btn{width:100%}}
.calc-note{font-size:12.5px;line-height:1.5;color:var(--tx-3)}

/* Odometer (rollende Ziffern) */
.odo{display:inline-flex;align-items:flex-end;flex-wrap:wrap;max-width:100%;font-variant-numeric:lining-nums tabular-nums;line-height:1.12}
.odo-d{position:relative;display:inline-block;height:1.12em;overflow:hidden}
.odo-s{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.2,.85,.25,1.04)}
.odo-s>span{display:block;height:1.12em;line-height:1.12em;text-align:center}
.odo-c{display:inline-block;height:1.12em;line-height:1.12em}
.odo-c.is-sep{color:var(--gd);padding:0 .12em}
.odo-c.is-sp{width:.22em}
.odo-c.is-cur{color:var(--gd);padding-left:.14em}
.odo-c.is-ca{font-size:.5em;align-self:center;height:auto;line-height:1;margin-right:.35em;font-family:var(--font-alt);font-weight:800;letter-spacing:.06em;color:var(--tx-2);text-transform:uppercase}
.odo--sm{font-size:clamp(1.15rem,1rem + .6vw,1.45rem)}
.odo.is-flash{animation:odo-flash 1s var(--ease-out)}
@keyframes odo-flash{30%{text-shadow:0 0 18px color-mix(in oklab,var(--gd-2) 70%,transparent)}}

/* Rechenweg */
.calc-how{border-radius:14px;border:1px solid var(--ln);background:var(--glass)}
.calc-how summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px 6px 14px;cursor:pointer;font-size:14px;font-weight:700;color:var(--tx);border-radius:14px}
.calc-how summary::-webkit-details-marker{display:none}
.calc-how summary .i{color:var(--gd);width:19px;height:19px}
.calc-how summary .pm{margin-left:auto;width:30px;height:30px}
.calc-how[open] .pm{transform:rotate(180deg);background:var(--gd);border-color:var(--gd)}
.calc-how[open] .pm::before,.calc-how[open] .pm::after{background:var(--on-gold)}
.calc-how[open] .pm::after{transform:rotate(0deg)}
.calc-steps{display:grid;gap:6px;padding:0 14px 14px;counter-reset:st}
.calc-steps li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:var(--tx-2);counter-increment:st}
.calc-steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--gd);border:1px solid color-mix(in oklab,var(--gd) 45%,transparent)}
.calc-steps b{color:var(--tx);font-weight:700}

/* Lohnt sich: drei Wege */
.ways{display:grid;gap:8px}
.way{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:11px 13px;border-radius:16px;background:var(--glass);border:1px solid var(--ln);transition:border-color .5s,background .5s,box-shadow .5s}
.way-h{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--tx)}
.way-h .i{width:20px;height:20px;color:var(--gd)}
.way-v{justify-self:end;color:var(--tx)}
.way-anfrage{font-family:var(--font-serif);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.12;color:var(--gd-tx,var(--gd))}
.way-bar{grid-column:1/-1;height:8px;border-radius:8px;background:var(--ln);overflow:hidden}
.way-bar i{display:block;height:100%;border-radius:inherit;background:color-mix(in oklab,var(--tx-3) 80%,transparent);transform-origin:left;transform:scaleX(var(--w,0));transition:transform .9s var(--ease-out),background .5s}
.way-n{grid-column:1/-1;font-size:12.5px;line-height:1.4;color:var(--tx-3)}
@media (max-width:520px){
  .way{grid-template-columns:1fr;padding-top:13px}
  .way-v{justify-self:start}
}
.way.is-lead{border-color:var(--gd);background:linear-gradient(160deg,color-mix(in oklab,var(--gd) 16%,transparent),var(--glass) 70%);box-shadow:0 14px 34px -22px color-mix(in oklab,var(--gd) 90%,transparent)}
.way.is-lead .way-bar i{background:var(--grad-gold)}
.way.is-lead::after{content:"rechnerisch vorn";position:absolute;right:12px;top:-10px;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--on-gold);background:var(--btn-gold,var(--grad-gold))}
.ways-lead{font-size:14.5px;line-height:1.5;color:var(--tx)}
.ways-lead b{color:var(--gd)}

/* Basis-Kärtchen (B) */
.basis{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 10px 10px 10px;border-radius:16px;background:var(--glass);border:1px solid var(--ln)}
.basis-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--gd);background:color-mix(in oklab,var(--gd) 12%,transparent)}
.basis p{display:grid;gap:2px;min-width:0}
.basis small{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.basis b{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.basis-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:800;color:var(--gd);border:1px solid color-mix(in oklab,var(--gd) 35%,transparent);white-space:nowrap;transition:background .3s}
.basis-link:hover{background:color-mix(in oklab,var(--gd) 12%,transparent)}
.basis-link .i{width:16px;height:16px}
@media (max-width:420px){.basis{grid-template-columns:auto minmax(0,1fr)}.basis-link{grid-column:1/-1;justify-self:start}}

/* Waage */
.waage-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--ln);background:radial-gradient(70% 70% at 50% 30%,color-mix(in oklab,var(--gd) 12%,transparent),transparent 70%),color-mix(in oklab,var(--bg-2) 60%,transparent)}
.waage{display:block;width:100%;height:auto;max-height:300px;margin-inline:auto}
.wg-s1{stop-color:var(--gd-2)}
.wg-s2{stop-color:var(--gd)}
.wg-s3{stop-color:var(--gd-3)}
.wg-shadow{fill:color-mix(in oklab,#000 25%,transparent)}
:root[data-theme="day"] .wg-shadow{fill:color-mix(in oklab,var(--tx) 10%,transparent)}
.wg-stand{fill:url(#wg-gold)}
.wg-base{fill:url(#wg-gold)}
.wg-beam{transform-origin:200px 58px}
.wg-bar{fill:url(#wg-gold)}
.wg-end{fill:var(--gd-2)}
.wg-pivot{fill:var(--bg-3);stroke:var(--gd);stroke-width:2}
.wg-pivot-in{fill:var(--gd-2)}
.wg-str{fill:none;stroke:color-mix(in oklab,var(--gd) 70%,transparent);stroke-width:1.4}
.wg-dish{fill:color-mix(in oklab,var(--gd) 35%,var(--bg-3));stroke:var(--gd);stroke-width:1.5}
.wg-coin{fill:url(#wg-gold);stroke:color-mix(in oklab,var(--gd-3) 80%,#000);stroke-width:.8;transition:opacity .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.wg-coin.is-off{opacity:0;transform:translateY(-26px)}
.wg-lbl{font:800 12.5px var(--font-alt);letter-spacing:.12em;text-transform:uppercase;fill:var(--tx-2)}
.wg-pan.is-lead .wg-lbl{fill:var(--gd)}
.wg-pan.is-lead .wg-dish{stroke-width:2.4}

/* Kostenliste (C) */
.cost-list{display:grid;gap:2px}
.cost-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--ln);font-size:13.5px;line-height:1.35;color:var(--tx-2)}
.cost-list li b{color:var(--tx);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cost-list li.is-zero{opacity:.45}
.cost-list li:last-child{border-bottom:0}

/* ---------- Vorher / Nachher ---------- */
.ba{position:relative;overflow:hidden;border-radius:22px;aspect-ratio:480/300;border:1px solid var(--ln-2);background:var(--bg-3);box-shadow:var(--shadow);touch-action:pan-y}
.room{position:absolute;inset:0;width:100%;height:100%;display:block}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut,45%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--cut,45%);width:2px;margin-left:-1px;background:var(--grad-gold-v);box-shadow:0 0 18px color-mix(in oklab,var(--gd-2) 80%,transparent);pointer-events:none;z-index:2}
.ba-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;color:var(--on-gold);background:var(--btn-gold,var(--grad-gold));border:3px solid var(--bg);box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.ba-knob .i{width:22px;height:22px}
.ba-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:300px}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:3px solid var(--gd-2);outline-offset:3px}
.ba-tag{position:absolute;top:12px;z-index:2;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;
  color:var(--tx);background:color-mix(in oklab,var(--bg) 70%,transparent);border:1px solid var(--ln-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ba-tag--l{left:12px}
.ba-tag--r{right:12px;color:var(--on-gold);background:var(--btn-gold,var(--grad-gold));border-color:transparent}

/* Raum vorher */
.rm-ceil{fill:color-mix(in oklab,var(--room-wall) 80%,var(--tx-3))}
.rm-wall-l{fill:var(--room-wall-2)}
.rm-wall-r{fill:var(--room-wall-2)}
.rm-wall-b{fill:var(--room-wall)}
.rm-floor{fill:var(--room-floor)}
.rm-board{fill:none;stroke:color-mix(in oklab,var(--room-floor) 60%,#000);stroke-width:1.4}
.rm-win-old rect{fill:color-mix(in oklab,var(--room-outside) 70%,var(--tx-3))}
.rm-win-old path,.rm-win-old rect{stroke:color-mix(in oklab,var(--room-wall) 50%,#000);stroke-width:3}
.rm-stain{fill:color-mix(in oklab,var(--room-wall) 70%,#000);opacity:.35}
.rm-peel{fill:color-mix(in oklab,var(--room-wall) 60%,var(--tx-3));opacity:.9}
.rm-crack{fill:none;stroke:color-mix(in oklab,var(--room-wall) 40%,#000);stroke-width:1.4}
.rm-cable{fill:none;stroke:color-mix(in oklab,var(--room-wall) 30%,#000);stroke-width:1.5}
.rm-bulb{fill:color-mix(in oklab,var(--gd-2) 40%,var(--room-wall))}
.rm-box path{fill:color-mix(in oklab,var(--gd-3) 45%,var(--room-floor))}
.rm-box .rm-box-top{fill:color-mix(in oklab,var(--gd-3) 30%,var(--room-wall))}
.rm-box .rm-box-side{fill:color-mix(in oklab,var(--gd-3) 30%,var(--room-floor))}
.rm-chair path{fill:none;stroke:color-mix(in oklab,var(--room-floor) 40%,#000);stroke-width:4;stroke-linecap:round}

/* Raum nachher (reagiert auf data-paket / data-konzept / data-moebel / data-deko / data-reinigung am .ba) */
.room--nachher *{transition:opacity .6s ease,fill .8s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.rm-n.rm-ceil{fill:var(--room-ceil-new)}
.rm-n.rm-wall-l,.rm-n.rm-wall-r{fill:var(--room-new-2)}
.rm-n.rm-wall-b{fill:var(--room-new)}
.rm-n.rm-floor{fill:var(--room-wood)}
.rm-board-n{stroke:color-mix(in oklab,var(--room-wood) 70%,#000);stroke-width:1;opacity:.6}
.rm-skirt{fill:none;stroke:var(--room-ceil-new);stroke-width:3}
.ba[data-paket="interior"] .rm-n.rm-wall-l,.ba[data-paket="interior"] .rm-n.rm-wall-r{fill:color-mix(in oklab,var(--room-wall-2) 55%,var(--room-new-2))}
.ba[data-paket="interior"] .rm-n.rm-wall-b{fill:color-mix(in oklab,var(--room-wall) 55%,var(--room-new))}
.ba[data-paket="interior"] .rm-n.rm-floor,.ba[data-paket="auffrischen"] .rm-n.rm-floor{fill:var(--room-floor)}
.rm-parkett{fill:url(#rm-herring);opacity:0}
.ba[data-paket="renovieren"] .rm-parkett,.ba[data-paket="komplett"] .rm-parkett{opacity:.55}
.rm-herr{fill:none;stroke:color-mix(in oklab,var(--room-wood-2) 80%,#000);stroke-width:.9}
.rm-accent{fill:var(--room-accent);opacity:0}
.ba[data-konzept="1"] .rm-accent{opacity:1}
.rm-win-glass{fill:var(--room-outside)}
.rm-win-frame,.rm-win-out{fill:none;stroke:var(--room-ceil-new);stroke-width:4}
.ba:not([data-paket="komplett"]) .rm-win-frame,.ba:not([data-paket="komplett"]) .rm-win-out{stroke:color-mix(in oklab,var(--room-wall) 50%,var(--room-ceil-new))}
.rm-curtains path{fill:color-mix(in oklab,var(--gd-2) 45%,var(--room-new))}
.rm-curtains .rm-rod{fill:none;stroke:var(--gd);stroke-width:2.5}
.rm-pics rect{fill:color-mix(in oklab,var(--room-new) 70%,var(--tx));stroke:var(--gd);stroke-width:3}
.rm-pic-art{fill:none;stroke:var(--pl-2);stroke-width:2;stroke-linejoin:round}
.rm-shelf path{fill:none;stroke:var(--room-wood-2);stroke-width:4;stroke-linecap:round}
.rm-book{fill:var(--pl-2)}
.rm-book-2{fill:var(--gd)}
.rm-rug{fill:color-mix(in oklab,var(--pl) 45%,var(--room-wood))}
.rm-sofa-back{fill:var(--room-sofa-2)}
.rm-sofa-seat{fill:var(--room-sofa)}
.rm-sofa-leg{fill:none;stroke:var(--room-wood-2);stroke-width:4;stroke-linecap:round}
.rm-cushion{fill:var(--gd-2)}
.rm-cushion-2{fill:var(--pl-3)}
.rm-table ellipse{fill:var(--room-wood-2)}
.rm-table path{fill:none;stroke:var(--room-wood-2);stroke-width:3}
.rm-pot{fill:color-mix(in oklab,var(--room-ceil-new) 70%,var(--gd))}
.rm-leaf{fill:color-mix(in oklab,var(--pt) 80%,var(--pt-2))}
.rm-lamp-shade{fill:var(--gd)}
.rm-lamp-cable{fill:none;stroke:var(--gd-3);stroke-width:1.5}
.rm-glow-s1{stop-color:var(--gd-2);stop-opacity:.55}
.rm-glow-s2{stop-color:var(--gd-2);stop-opacity:0}
.rm-lamp-glow{fill:url(#rm-glow)}
:root[data-theme="day"] .rm-lamp-glow{opacity:.45}
.rm-shine path{fill:var(--gd-2);transform-box:fill-box;transform-origin:center;animation:z-tw 2.2s ease-in-out infinite}
.rm-shine path:nth-child(2){animation-delay:-.7s}
.rm-shine path:nth-child(3){animation-delay:-1.4s}
.rm-shine path:nth-child(4){animation-delay:-1s}
/* Ein-/Ausblenden der Gestaltungs-Elemente */
.rm-pics,.rm-curtains,.rm-plant,.rm-cushion,.rm-sofa,.rm-table,.rm-shelf,.rm-rug,.rm-lamp,.rm-shine{transform-box:fill-box;transform-origin:50% 100%}
.ba:not([data-deko="1"]) .rm-pics,.ba:not([data-deko="1"]) .rm-curtains,.ba:not([data-deko="1"]) .rm-plant,.ba:not([data-deko="1"]) .rm-cushion{opacity:0;transform:scale(.6) translateY(10px)}
.ba:not([data-moebel="1"]) .rm-sofa,.ba:not([data-moebel="1"]) .rm-table,.ba:not([data-moebel="1"]) .rm-shelf{opacity:0;transform:scale(.7) translateY(14px)}
.ba:not([data-konzept="1"]) .rm-rug{opacity:0;transform:scaleX(.4)}
.ba[data-paket="interior"]:not([data-konzept="1"]) .rm-lamp,.ba[data-paket="auffrischen"]:not([data-konzept="1"]) .rm-lamp{opacity:0;transform:translateY(-30px)}
.ba:not([data-reinigung="1"]) .rm-shine{opacity:0}
.ba-after.is-cut .room--nachher *{transition:none}

/* ---------- Mini-Ergebnis (Handy) ---------- */
.calc-peek{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:79;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 14px;border-radius:999px;pointer-events:none;
  color:var(--tx);background:color-mix(in oklab,var(--bg-2) 90%,transparent);border:1px solid var(--gd);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translate(-50%,16px);transition:opacity .35s,transform .45s var(--ease-out);white-space:nowrap}
.calc-peek.is-on{opacity:1;transform:translate(-50%,0)}
.calc-peek-l{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2)}
.calc-peek-v{font-family:var(--font-serif);font-size:1.05rem;font-weight:500;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.calc-peek-b{padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--gd);border:1px dashed var(--gd)}
.nav-open .calc-peek{opacity:0}
@media (max-width:380px){.calc-peek-l{display:none}}
@media (min-width:861px){.calc-peek{bottom:18px}}
@media (min-width:1024px){.calc-peek{display:none}}

/* ---------- Zertifikat ---------- */
.zert::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45% 55% at 20% 45%,color-mix(in oklab,var(--gd) 14%,transparent),transparent 70%),radial-gradient(40% 50% at 90% 70%,color-mix(in oklab,var(--pl) 18%,transparent),transparent 70%)}
.zert-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:1024px){.zert-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.zert-show{position:relative;justify-self:center;width:min(100%,420px);perspective:1100px}
.zert-frame{position:relative;display:block;width:100%;padding:12px;border-radius:12px;cursor:zoom-in;color:inherit;
  background:linear-gradient(145deg,var(--gd-2),var(--gd-3) 35%,var(--gd) 62%,var(--gd-2) 82%,var(--gd-3));
  box-shadow:0 50px 90px -45px rgba(0,0,0,.75),0 0 0 1px color-mix(in oklab,var(--gd-3) 60%,transparent),0 0 60px -20px color-mix(in oklab,var(--gd) 60%,transparent)}
.zert-mat{position:relative;display:block;padding:clamp(12px,2.4vw,20px);border-radius:4px;overflow:hidden;background:var(--bg-3);box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
.zert-mat img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.zert-glare{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;transition:opacity .5s;
  background:radial-gradient(60% 50% at var(--mx,30%) var(--my,20%),rgba(255,255,255,.75),transparent 60%)}
.zert-frame:hover .zert-glare,.zert-frame:focus-visible .zert-glare{opacity:1}
.zert-zoom{position:absolute;right:20px;bottom:20px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--tx);
  background:color-mix(in oklab,var(--bg) 78%,transparent);border:1px solid var(--ln-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .35s var(--ease-out)}
.zert-zoom .i{width:16px;height:16px;color:var(--gd)}
.zert-frame:hover .zert-zoom{transform:translateY(-3px)}
.zert-frame:focus-visible{outline:3px solid var(--gd-2);outline-offset:5px}
.zert-seal{position:absolute;right:-18px;top:-22px;width:clamp(86px,12vw,112px);aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
.zert-seal svg{width:100%;height:100%;animation:sc-spin 28s linear infinite}
.zs-r{fill:var(--gd);stroke:var(--gd-2);stroke-width:2}
.zs-r2{fill:none;stroke:color-mix(in oklab,var(--on-gold) 55%,transparent);stroke-width:1}
.zs-t{font:800 10.5px var(--font-alt);letter-spacing:.12em;fill:var(--on-gold)}
.zs-star{fill:var(--on-gold)}
@media (max-width:480px){.zert-seal{right:-6px;top:-16px}}
.zert-text{display:grid;gap:14px;justify-items:start;min-width:0}
.zert-text>p:not(.eyebrow):not(.zert-h){max-width:60ch}
.zert-facts{display:grid;gap:8px;width:100%}
.zert-facts>div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:10px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--ln)}
.zert-facts dt{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gd)}
.zert-facts dt .i{width:17px;height:17px}
.zert-facts dd{font-size:14.5px;line-height:1.45;color:var(--tx)}
.zert-facts dd small{color:var(--tx-3);font-size:12.5px}
@media (max-width:520px){.zert-facts>div{grid-template-columns:1fr}}
.zert-h{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2);margin-top:4px}
.zert-chips{display:flex;flex-wrap:wrap;gap:7px;counter-reset:zc}
.zert-chips li{counter-increment:zc;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--tx);background:var(--glass);border:1px solid var(--ln);transition:border-color .3s,transform .3s var(--ease-out)}
.zert-chips li::before{content:counter(zc,decimal-leading-zero);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:10.5px;font-weight:800;color:var(--gd);background:color-mix(in oklab,var(--gd) 13%,transparent)}
.zert-chips li:hover{border-color:color-mix(in oklab,var(--gd) 55%,transparent);transform:translateY(-2px)}
.zert-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:520px){.zert-act .btn{flex:1 1 100%}}

/* Dialog (große Ansicht) */
.zert-dlg{margin:auto;padding:0;border:0;background:transparent;color:var(--tx);max-width:min(94vw,780px);max-height:96dvh;overflow:visible}
.zert-dlg::backdrop{background:rgba(8,5,7,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zert-dlg[open]{animation:dlg-in .5s var(--ease-out)}
.zert-dlg[open]::backdrop{animation:dlg-fade .4s ease}
@keyframes dlg-in{from{opacity:0;transform:translateY(24px) scale(.96)}}
@keyframes dlg-fade{from{opacity:0}}
.zert-dlg-in{display:grid;gap:10px;padding:10px;border-radius:20px;background:var(--bg-2);border:1px solid var(--ln-2);box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.zert-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 0 10px}
.zert-dlg-head p{font-size:13.5px;font-weight:700;color:var(--tx-2);line-height:1.35}
.zert-close{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tx);background:var(--glass-2);border:1px solid var(--ln-2);transition:transform .3s,border-color .3s}
.zert-close:hover{transform:rotate(90deg);border-color:var(--gd)}
.zert-close .i{width:20px;height:20px}
.zert-dlg-img{overflow:auto;border-radius:10px;max-height:calc(96dvh - 84px)}
.zert-dlg-img img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(96dvh - 84px);margin-inline:auto;border-radius:8px}

html.dlg-open{overflow:hidden}

/* ---------- Formular: Rechner-Chip ---------- */
.rchip{display:grid;gap:10px}
.rchip-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:16px;background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--gd) 8%,transparent) 0 10px,transparent 10px 20px),var(--glass);border:1px dashed color-mix(in oklab,var(--gd) 60%,transparent);transition:opacity .3s}
.rchip-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--on-gold);background:var(--btn-gold,var(--grad-gold))}
.rchip-card p{display:grid;gap:3px;min-width:0}
.rchip-card small{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gd)}
.rchip-card b{font-size:15px;color:var(--tx)}
.rchip-card span{font-size:13px;line-height:1.45;color:var(--tx-2);overflow-wrap:anywhere}
.rchip.is-off .rchip-card{opacity:.4}
.rchip-opt label{font-weight:600}
.rchip.is-new .rchip-card{animation:rchip-in .8s var(--ease-out)}
@keyframes rchip-in{from{transform:translateY(10px) scale(.97);opacity:0;box-shadow:0 0 0 0 color-mix(in oklab,var(--gd) 60%,transparent)}60%{box-shadow:0 0 0 8px transparent}}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .sc-sun-rays,.sc-star,.sc-cloud,.sc-rotor,.z-spark,.x-ke,.x-steam,.h-pin,.rm-shine path,.zert-seal svg,.z-gloss,.ih-medal-in,.ih-medal-float,.ih-medal-shine,.ih-medal-orbit,.ih-medal-glow{animation:none!important}
  .odo-s,.h-scale,.obj,.x,.x-tree,.room--nachher *,.segs-ind,.way-bar i,.wg-coin{transition:none!important}
}

/* =========================================================
   Rundum-Service (Kundinnen-Konzept 29.10.2026)
   ========================================================= */
.rundum{position:relative}
.rs-list{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;counter-reset:rs;position:relative}
.rs-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:18px 18px 18px 16px}
.rs-num{grid-row:span 2;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;font-family:var(--font-serif);font-size:20px;color:var(--on-gold);background:var(--btn-gold,var(--grad-gold));box-shadow:0 8px 20px -10px rgba(201,164,92,.6)}
.rs-ico{position:absolute;right:16px;top:16px;color:var(--gd);opacity:.55}
.rs-ico .i{width:24px;height:24px}
.rs-step h3{font-size:1.15rem;margin:2px 36px 0 0}
.rs-step p{font-size:14.5px;line-height:1.55;margin:0}
.rs-step--gold{border-color:var(--gd-ln-2,var(--ln-2))}
.rs-foot{display:grid;gap:18px;align-items:center;margin-top:clamp(20px,3vw,34px)}
.rs-quote{margin:0;padding:6px 0 6px 18px;border-left:2px solid var(--gd)}
.rs-quote p{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.15rem,.9rem + 1vw,1.55rem);line-height:1.35;color:var(--tx)}
.rs-cta{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:700px){.rs-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .rs-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-foot{grid-template-columns:minmax(0,1fr) auto}
}
/* „Lohnt sich?“: Aufwerten als Rundum-Service kennzeichnen (Zahlen unverändert) */
.way-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;color:var(--on-gold);background:var(--btn-gold,var(--grad-gold))}
.way-plus{grid-column:1/-1;display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--tx-2)}
.way-plus a{color:var(--gd-tx,var(--gd));font-weight:700}
.calc-res-hint{font-size:.78em;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tx-3)}