/* =========================================================================
   Interaktive Module & Preisrechner
   ========================================================================= */

/* ---------- Dachgeschoss-Ausbau (Scrollytelling) ---------- */
.dg-scroll{position:relative;height:340vh}
.dg-sticky{position:sticky;top:calc(73px + env(safe-area-inset-top,0px));height:calc(100vh - 73px);display:flex;align-items:center}
.dg{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;width:100%}
.dg-figure{position:relative;background:linear-gradient(180deg,#FFFFFF 0%, #F7F8F6 100%);border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;max-width:100%}
.dg-figure svg{display:block;width:100%;height:auto;max-height:calc(100vh - 170px)}
.dg-figure .dg-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--putz)}
.dg-figure .dg-bar i{display:block;height:100%;width:0;background:var(--gelb)}
.dg-figure .dg-tag{position:absolute;top:14px;left:14px;font-family:var(--f-mono);font-size:.75rem;background:#fff;border:1px solid var(--linie);border-radius:6px;padding:5px 9px;color:var(--fg-2)}
.dg-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.dg-panel h2{font-size:var(--t-2xl)}
.dg-now{border-left:3px solid var(--gelb);padding:4px 0 4px 16px;min-height:132px}
.dg-now .dg-meta{font-family:var(--f-mono);font-size:.78rem;color:var(--zink);text-transform:uppercase;letter-spacing:.06em}
.dg-now .dg-title{font-family:var(--f-display);font-weight:340;font-stretch:118%;font-size:2rem;line-height:1.05;margin:4px 0 6px;letter-spacing:-.02em}
.dg-now .dg-desc{color:var(--fg-2)}
.dg-steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.dg-steps button{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--linie);background:#fff;border-radius:999px;padding:7px 12px;font:600 .88rem/1 var(--f-body);color:var(--fg-2);cursor:pointer;transition:.15s}
.dg-steps button .mono{font-size:.72rem;color:var(--zink)}
.dg-steps button.done{color:var(--anthrazit);border-color:#c9ced0}
.dg-steps button.on{background:var(--anthrazit);border-color:var(--anthrazit);color:#fff}
.dg-steps button.on .mono{color:var(--gelb)}
.dg-controls{display:flex;gap:12px;align-items:center}
.dg-controls .range{flex:1}
.dg-hint{font-size:.85rem;color:var(--zink);display:flex;gap:8px;align-items:center}
.dg-hint svg{width:16px;height:16px}
.dg-static .dg-figure svg{max-height:none}
@media (max-width: 900px){
  .dg-scroll{height:auto}
  .dg-sticky{position:static;height:auto;display:block}
  .dg{grid-template-columns:1fr}
  .dg-now{min-height:0}
}

/* ---------- Vorher / Nachher ---------- */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linie);background:#fff;user-select:none;touch-action:pan-y;max-width:100%}
.ba svg{display:block;width:100%;height:auto}
.ba-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:0;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--gelb)}
.ba-handle::after{content:"";position:absolute;top:50%;left:-22px;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6' fill='none' stroke='%231D2124' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible ~ .ba-handle::after{outline:3px solid var(--anthrazit);outline-offset:2px}
.ba-lab{position:absolute;top:12px;font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.92);border:1px solid var(--linie);border-radius:6px;padding:5px 9px;pointer-events:none}
.ba-lab.l{left:12px}.ba-lab.r{right:12px}

/* ---------- 3D-Wand ---------- */
.w3d{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.w3-stage{position:relative;height:clamp(320px,42vw,470px);perspective:1500px;perspective-origin:50% 40%;background-color:var(--paper-2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid-fine) 1px,transparent 1px),linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px);background-size:60px 60px,60px 60px,12px 12px,12px 12px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:grab;touch-action:none;max-width:100%}
.w3-stage.grab{cursor:grabbing}
.w3-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:9%;height:22px;border-radius:50%;background:radial-gradient(ellipse, rgba(29,33,36,.18), transparent 70%)}
.w3-scene{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;transition:transform .08s linear}
.w3-grp{position:absolute;left:0;top:0;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s}
.w3-grp.dim{opacity:.18}
.w3-box{position:absolute;transform-style:preserve-3d}
.w3-f{position:absolute;left:0;top:0;backface-visibility:hidden}
.m-gkb.fr,.m-gkb.bk{background-color:#ECEDEA;background-image:radial-gradient(circle, #8E979C 1.3px, transparent 1.7px),linear-gradient(90deg, rgba(47,110,158,.18) 0 2px, transparent 2px);background-size:75px 50px, 100% 100%;background-position:18px 12px, 50% 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.m-gkf.fr,.m-gkf.bk{background-color:#F0DEDB;background-image:radial-gradient(circle, #8E979C 1.3px, transparent 1.7px),linear-gradient(90deg, rgba(194,65,45,.35) 0 2px, transparent 2px);background-size:75px 50px, 100% 100%;background-position:18px 12px, 50% 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.m-gkbi.fr,.m-gkbi.bk{background-color:#CFE0CB;background-image:radial-gradient(circle, #6F7F72 1.3px, transparent 1.7px);background-size:75px 50px;background-position:18px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.m-gkb.sd,.m-gkb.tp,.m-gkf.sd,.m-gkf.tp,.m-gkbi.sd,.m-gkbi.tp{background:#F7F6F1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.m-gkf.sd,.m-gkf.tp{background:#F4ECE9}
.m-cw{background:linear-gradient(90deg,#9AA4AA,#D9DFE2 45%,#A6AFB5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.m-cw.tp{background:linear-gradient(180deg,#B9C1C6,#E4E8EA)}
.m-mw{background-color:#F6C543;background-image:repeating-linear-gradient(115deg, rgba(223,166,34,.75) 0 2px, transparent 2px 9px),repeating-linear-gradient(65deg, rgba(255,231,166,.7) 0 2px, transparent 2px 11px);box-shadow:inset 0 0 0 1px rgba(160,110,0,.25)}
.m-sw{background-color:#C3AC6E;background-image:repeating-linear-gradient(115deg, rgba(140,118,60,.7) 0 2px, transparent 2px 8px),repeating-linear-gradient(65deg, rgba(225,210,160,.6) 0 2px, transparent 2px 10px);box-shadow:inset 0 0 0 1px rgba(90,70,20,.25)}
.m-mauer.fr,.m-mauer.bk{background-color:#D8D2C9;background-image:linear-gradient(#C6BDB1 2px, transparent 2px),linear-gradient(90deg,#C6BDB1 2px, transparent 2px);background-size:60px 25px, 60px 50px;background-position:0 0, 0 0}
.m-mauer.sd,.m-mauer.tp{background:repeating-linear-gradient(45deg,#D7D1C8 0 4px,#B8AFA4 4px 6px)}
.w3-hint svg{width:16px;height:16px}
.w3-hint{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:.74rem;color:var(--zink);display:flex;gap:6px;align-items:center;pointer-events:none}
.w3-reset{position:absolute;right:12px;top:12px;border:1px solid var(--linie);background:#fff;border-radius:6px;font:600 .8rem var(--f-body);padding:6px 10px;cursor:pointer}
.w3-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.w3-variants{display:flex;flex-wrap:wrap;gap:6px}
.w3-variants button{border:1.5px solid var(--line-strong);background:var(--paper);border-radius:999px;min-height:40px;padding:0 14px;font:600 .9rem var(--f-body);cursor:pointer;color:var(--ink)}
.w3-variants button[aria-pressed="true"]{background:var(--yellow);border-color:var(--ink);color:var(--ink)}
.w3-legend{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.w3-legend li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--putz);font-size:.92rem;cursor:default;border-radius:4px}
.w3-legend li.on{background:var(--gelb-hell)}
.w3-legend .sw{width:22px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.w3-legend .mono{font-size:.8rem;color:var(--zink)}
.w3-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-md);overflow:hidden}
.w3-facts div{background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.w3-facts span{font-size:.76rem;color:var(--zink);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em}
.w3-facts b{font-size:1rem}
.w3-note{color:var(--fg-2);font-size:.95rem}
.w3-small{font-size:.8rem;color:var(--zink)}
@media (max-width: 900px){ .w3d{grid-template-columns:1fr} }

/* ---------- Streiflicht ---------- */
.sl{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.sl-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linie);background:#EDEDE9;touch-action:none;cursor:crosshair;max-width:100%}
.sl-fig svg{display:block;width:100%;height:auto}
.sl-fig .tag{position:absolute;left:12px;top:12px;font-family:var(--f-mono);font-size:.74rem;background:rgba(255,255,255,.9);border:1px solid var(--linie);border-radius:6px;padding:5px 9px;pointer-events:none}
.sl-q{display:flex;gap:6px;flex-wrap:wrap}
.sl-q button{flex:1;min-width:64px;border:1.5px solid var(--line-strong);background:var(--paper);border-radius:8px;padding:10px 8px;font-family:var(--f-display);font-weight:420;font-stretch:115%;font-size:1.25rem;cursor:pointer;color:var(--ink)}
.sl-q button[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.sl-panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.sl-title{font-family:var(--f-display);font-weight:360;font-stretch:116%;font-size:1.7rem;line-height:1.05;letter-spacing:-.02em}
.sl-desc{color:var(--fg-2)}
@media (max-width: 900px){ .sl{grid-template-columns:1fr} }

/* ---------- Decken-Simulation ---------- */
.dk{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.dk-fig{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linie);background:#fff;max-width:100%}
.dk-fig svg{display:block;width:100%;height:auto}
.dk-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.dk-out{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-md);overflow:hidden}
.dk-out div{background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.dk-out span{font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--zink)}
.dk-out b{font-family:var(--f-display);font-size:1.45rem;font-weight:380;font-stretch:115%;line-height:1.05;letter-spacing:-.02em}
@media (max-width: 900px){ .dk{grid-template-columns:1fr} }

/* ---------- Preisrechner ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
.calc-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.calc-step{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:18px}
.calc-step > header{display:flex;gap:14px;align-items:center}
.calc-no{flex:none;width:40px;height:40px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-family:var(--f-display);font-weight:400;font-stretch:118%;font-size:1.2rem;border:1.5px solid var(--ink)}
.calc-step h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.calc-step > header p{color:var(--fg-2);font-size:.95rem;margin-top:2px}
.calc-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.calc-presets .mono{font-size:.78rem;color:var(--zink);margin-right:4px}
.calc-presets button{border:1px dashed var(--zink-hell);background:var(--gips);border-radius:999px;padding:8px 13px;font:600 .88rem var(--f-body);cursor:pointer}
.calc-presets button:hover{border-style:solid;border-color:var(--anthrazit)}
.calc-presets button[aria-pressed="true"]{background:var(--yellow);border:1px solid var(--ink)}
.calc-add{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1100px){ .calc-add{grid-template-columns:repeat(3,minmax(0,1fr))} }
.calc-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1.5px solid var(--linie);background:#fff;border-radius:var(--r-md);padding:14px 14px 13px;cursor:pointer;font:inherit;color:inherit;transition:.15s}
.calc-tile svg{width:42px;height:42px;color:var(--anthrazit);margin-bottom:4px}
.calc-tile b{font-size:1rem;line-height:1.2}
.calc-tile small{color:var(--zink);font-size:.82rem;line-height:1.3}
.calc-tile .plus{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--gips);display:grid;place-items:center;font-weight:700;transition:.15s}
.calc-tile:hover{border-color:var(--ink);background:var(--yellow-wash);transform:translateY(-2px)}
.calc-tile:hover .plus{background:var(--yellow);border:1px solid var(--ink)}
.calc-tile:active{transform:scale(.98)}
@media (max-width: 700px){ .calc-add{grid-template-columns:1fr 1fr} }
.calc-positions{display:flex;flex-direction:column;gap:14px}
.calc-empty{border:1.5px dashed var(--linie);border-radius:var(--r-md);padding:22px;text-align:center;color:var(--fg-2)}
.calc-card{border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);overflow:hidden}
.calc-card.new{animation:popin .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popin{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
.calc-card__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px 12px 16px;background:var(--gips);border-bottom:1px solid var(--linie)}
.calc-ico svg{width:36px;height:36px;display:block}
.calc-card__t .mono{font-size:.74rem;color:var(--zink)}
.calc-card__t h3{font-size:1.4rem}
.calc-card__sum{text-align:right;display:flex;flex-direction:column}
.calc-card__sum b{font-family:var(--f-display);font-weight:420;font-stretch:115%;font-size:1.3rem;line-height:1;letter-spacing:-.02em}
.calc-card__sum small{font-size:.72rem;color:var(--zink)}
.calc-x{width:34px;height:34px;border-radius:8px;border:1px solid var(--linie);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--fg-2)}
.calc-x svg{width:16px;height:16px}
.calc-x:hover{border-color:var(--rot);color:var(--rot)}
.calc-card__grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;padding:18px}
.calc-draw{position:sticky;top:100px;align-self:start}
.calc-draw{display:flex;flex-direction:column;gap:10px}
.calc-draw svg{width:100%;height:auto;background:var(--gips);border-radius:var(--r-md);border:1px solid var(--linie);aspect-ratio:320/150}
.calc-label{font-size:.9rem!important;padding:9px 11px!important}
.calc-fields{display:flex;flex-direction:column;gap:16px;min-width:0}
.calc-opts{border:1px solid var(--linie);border-radius:var(--r-md);padding:2px 14px}
.calc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.calc-stp{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--linie);border-radius:var(--r-md);padding:10px 12px}
.calc-stp b{display:block;font-size:.95rem}
.calc-stp small{display:block;color:var(--zink);font-size:.78rem;line-height:1.3}
.calc-help{border:1px dashed var(--zink-hell);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.calc-help > .mono{font-size:.76rem;color:var(--zink)}
.calc-area{font-size:.95rem}
.calc-area b{font-size:1.05rem}
@media (max-width: 760px){ .calc-card__grid{grid-template-columns:1fr} .calc-steps{grid-template-columns:1fr} .calc-draw{max-width:420px} }
.calc-ctx{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.calc-ctx .full{grid-column:1/-1}
@media (max-width: 640px){ .calc-ctx{grid-template-columns:1fr} }
.calc-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.calc-form .full{grid-column:1/-1}
@media (max-width: 640px){ .calc-form{grid-template-columns:1fr} }
.calc-file{border:1.5px dashed var(--zink-hell);border-radius:var(--r-md);padding:16px;display:flex;gap:14px;align-items:center;background:var(--gips);cursor:pointer}
.calc-file input{position:absolute;opacity:0;width:1px;height:1px}
.calc-file svg{width:34px;height:34px;flex:none}
.calc-file small{display:block;color:var(--zink)}
.calc-file:focus-within{outline:3px solid var(--gelb);outline-offset:2px}
.calc-msg{border-radius:var(--r-sm);padding:12px 14px;font-size:.95rem;background:var(--gips)}
.calc-msg.err{background:#FBE9E5;color:#7A2414}
.calc-msg.ok{background:#E3F4EC;color:#0F5A3B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.calc-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.receipt{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:10px 10px 0 var(--yellow)}
.receipt__top{background:var(--anthrazit);color:#fff;padding:20px 22px 18px}
.receipt__top .mono{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#AEB6BC}
.receipt__range{font-family:var(--f-display);font-weight:300;font-stretch:118%;font-size:2.3rem;line-height:1;margin:10px 0 8px;letter-spacing:-.03em;display:flex;flex-wrap:wrap;gap:0 .3em}
.receipt__range .sep{color:var(--gelb)}
.receipt__top small{color:#C3C9CD;font-size:.82rem}
.receipt__lv{max-height:340px;overflow:auto;border-bottom:1px dashed var(--linie)}
.receipt table{width:100%;border-collapse:collapse;font-size:.84rem}
.receipt td{padding:9px 10px;border-bottom:1px solid var(--putz);vertical-align:top}
.receipt td:first-child{padding-left:16px;color:var(--zink);font-size:.74rem;white-space:nowrap}
.receipt td:last-child{padding-right:16px;text-align:right;white-space:nowrap;font-weight:600}
.receipt td small{display:block;color:var(--zink);font-size:.74rem;margin-top:3px}
.receipt tr.ex td{background:#FAFAF8;color:var(--fg-2);font-weight:500}
.receipt__sum{padding:12px 16px 16px;display:flex;flex-direction:column;gap:5px;font-size:.88rem}
.receipt__sum div{display:flex;justify-content:space-between;gap:10px}
.receipt__sum .tot{font-weight:700;font-size:1rem;border-top:1px solid var(--linie);padding-top:8px;margin-top:3px}
.receipt__foot{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.receipt__foot p{font-size:.78rem;color:var(--zink);line-height:1.45}
.calc-badge{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;background:var(--gelb-hell);border:1px solid #efce74;border-radius:var(--r-md);padding:10px 12px}
.calc-badge b{display:block}
@media (max-width: 1080px){ .calc{grid-template-columns:1fr} .calc-side{position:static} .receipt__lv{max-height:none} }
.calc-mbar{display:none}
@media (max-width: 1080px){
  .calc-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;align-items:center;gap:12px;justify-content:space-between;padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);background:var(--ink);color:var(--paper);transform:translateY(110%);transition:transform .25s}
  .calc-mbar.show{transform:none}
  .calc-mbar b{font-family:var(--f-display);font-weight:340;font-stretch:118%;font-size:1.35rem;line-height:1;letter-spacing:-.02em}
  .calc-mbar small{display:block;color:#AEB6BC;font-size:.74rem}
  .calc-page{padding-bottom:84px}
}
.q-info{border:1px solid var(--linie);border-radius:var(--r-md);padding:14px 16px;background:var(--gips);font-size:.9rem}
.q-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0 0}
.q-info dt{font-weight:500;font-family:var(--f-display);font-stretch:115%;font-size:1.1rem}
.q-info dd{margin:0;color:var(--fg-2)}

body[data-page="rechner"] .m-cta{display:none!important}
body[data-page="rechner"].has-mcta{padding-bottom:0}

/* ===================================================== Leistungs-Finder */
.finder{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-lg);box-shadow:10px 10px 0 var(--yellow);overflow:hidden}
.finder__head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 22px;border-bottom:1.5px solid var(--ink);background:var(--paper-2);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.finder__bar{display:flex;gap:6px;width:min(160px,36%)}
.finder__bar i{flex:1;height:3px;border-radius:2px;background:var(--line-strong);transition:background-color .25s}
.finder__bar i.on{background:var(--ink)}
.finder__body{padding:clamp(18px,3vw,30px)}
.finder__body h3{font-size:var(--t-xl);margin-bottom:18px;font-weight:400}
.fopts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fopts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fopt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;transition:border-color .15s,background-color .15s,transform .15s;min-width:0}
.fopt:hover,.fopt:focus-visible{border-color:var(--ink);background:var(--yellow-wash);text-decoration:none}
.fopt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fopt b{font-weight:650;font-size:1rem;line-height:1.25}
.fopt small{color:var(--ink-2);font-size:.85rem;line-height:1.4}
.fopt__no{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.fopt svg{width:30px;height:30px;color:var(--ink)}
.fopt svg .y{fill:var(--yellow)}
.finder__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 22px;border-top:1px dashed var(--line-strong);font-family:var(--f-mono);font-size:.74rem;color:var(--ink-2);min-height:48px}
.finder__back{background:none;border:0;font:inherit;font-family:var(--f-mono);font-size:.78rem;color:var(--ink);cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.fres{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px 28px;align-items:end}
.fres-main h3{font-size:var(--t-2xl);margin:10px 0 10px;font-weight:300}
.fres-main h3:focus{outline:none}
.fres-main p{color:var(--ink-2)}
.fres-for{font-family:var(--f-mono);font-size:.78rem;margin-top:10px}
.fres-price{border:1.5px solid var(--ink);border-radius:var(--r-md);padding:18px 20px;background:var(--yellow-wash)}
.fres-price b{display:block;font-family:var(--f-display);font-weight:300;font-stretch:118%;font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.03em;line-height:1.05;margin:8px 0}
.fres-price small{display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);line-height:1.45}
.fres-act{grid-column:1/-1;display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
@media (max-width:980px){.fopts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fopts--3{grid-template-columns:1fr}.fres{grid-template-columns:1fr}.fopt{padding:13px}.fopt svg{width:26px;height:26px}}

/* ========================================================== Werkzeuge */
.tool{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:10px 10px 0 var(--yellow)}
.tool__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:13px 22px;border-bottom:1.5px solid var(--ink);background:var(--paper-2);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.tool__body{padding:clamp(18px,3vw,30px)}
.tool__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,48px);align-items:start}
.tool__in{display:flex;flex-direction:column;gap:20px;min-width:0}
.tool__out{display:flex;flex-direction:column;gap:18px;min-width:0}
.tool__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool__note{font-size:.88rem;color:var(--ink-2);background:var(--paper-2);border-left:3px solid var(--yellow);padding:10px 14px;border-radius:0 6px 6px 0}
.tool__foot{margin-top:clamp(22px,3vw,30px);padding-top:clamp(20px,3vw,26px);border-top:1px dashed var(--line-strong);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px 40px;align-items:start}
.tool__list{list-style:none;margin:12px 0 0;padding:0}
.tool__list li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.tool__list b{font-family:var(--f-mono);font-weight:500;white-space:nowrap}
.tool__price{border:1.5px solid var(--ink);border-radius:var(--r-md);padding:18px 20px;background:var(--yellow-wash);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tool__price b{font-family:var(--f-display);font-weight:300;font-stretch:118%;font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.03em;line-height:1.05}
.tool__price small{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);line-height:1.45}
.tool__price .btn{margin-top:8px}
.tool .seg label{min-height:40px;font-size:.88rem;padding:6px 14px;line-height:1.25}
.inp-unit{display:flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--paper);overflow:hidden}
.inp-unit:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--yellow-wash)}
.inp-unit input{flex:1;min-width:0;border:0;background:transparent;padding:12px 12px;font:inherit;font-family:var(--f-mono);font-size:1rem;color:var(--ink)}
.inp-unit input:focus{outline:none}
.inp-unit span{padding:0 12px;font-family:var(--f-mono);color:var(--ink-2);font-size:.9rem}
.checks{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.checks legend{font-weight:650;font-size:.93rem;margin-bottom:8px;padding:0}
.checks label{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:.93rem;cursor:pointer}
.checks input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.kv{display:grid;gap:0;margin:0;border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden}
.kv--4{grid-template-columns:repeat(4,minmax(0,1fr))}.kv--3{grid-template-columns:repeat(3,minmax(0,1fr))}.kv--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kv > div{padding:12px 14px;border-left:1px solid var(--line);min-width:0}
.kv > div:first-child{border-left:0}
.kv dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.kv dd{margin:0;font-weight:650;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.kv .hl{background:var(--yellow)}
.kv .hl dt{color:var(--ink)}
.rec{display:flex;flex-direction:column;gap:12px}
.rec h3{font-size:var(--t-xl);font-weight:400}
.rec p{color:var(--ink-2)}
.rec .row{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;margin-top:4px}
/* Wohnfläche */
.wfl-fig{border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--paper);background-image:linear-gradient(var(--grid-fine) 1px,transparent 1px),linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px);background-size:12px 12px}
.wfl-svg{display:block;width:100%;height:auto}
.wfl-svg .z0{fill:url(#wfl-hatch)}
.wfl-svg .hatch{stroke:var(--ink-4);stroke-width:1.4}
.wfl-svg .z1{fill:var(--yellow-wash);stroke:var(--yellow-deep);stroke-width:.8}
.wfl-svg .z2{fill:var(--yellow);fill-opacity:.75}
.wfl-svg .shell{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.wfl-svg .attic{fill:none;stroke:var(--ink-4);stroke-width:1.5;stroke-dasharray:5 5}
.wfl-svg .floor{stroke:var(--ink);stroke-width:1.5}
.wfl-svg .guide{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4}
.wfl-svg .dim{stroke:var(--ink-3);stroke-width:1}
.wfl-svg text{font-family:var(--f-mono);font-size:12px;fill:var(--ink-2)}
.wfl-svg .c{text-anchor:middle}
.wfl-svg .e{text-anchor:end}
.wfl-svg .pct{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle}
.wfl-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--ink-2)}
.wfl-legend li{display:flex;align-items:center;gap:8px}
.wfl-legend i{width:16px;height:16px;border-radius:3px;border:1px solid var(--line-strong)}
.wfl-legend .z0{background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 3px,var(--ink-4) 3px,var(--ink-4) 4px)}
.wfl-legend .z1{background:var(--yellow-wash);border-color:var(--yellow-deep)}
.wfl-legend .z2{background:var(--yellow)}
/* Schallschutz-Skala */
.db{position:relative;padding:34px 0 26px}
.db__scale{position:relative;height:18px;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.db__scale span{position:absolute;top:0;transform:translateX(-50%)}
.db__scale span:first-child{transform:none}.db__scale span:last-child{transform:translateX(-100%)}
.db__bands{position:relative;height:30px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--paper-2),var(--paper-2) calc(100%/7 - 1px),var(--line) calc(100%/7 - 1px),var(--line) calc(100%/7));border:1px solid var(--line-strong)}
.db__bands i{position:absolute;top:4px;bottom:4px;border-radius:4px;background:var(--paper-3);border:1px solid var(--line-strong);transition:background-color .25s}
.db__bands i.on{background:var(--yellow);border-color:var(--ink)}
.db__target{position:absolute;top:22px;bottom:16px;width:0;border-left:2px solid var(--ink);transition:left .35s cubic-bezier(.2,.8,.2,1)}
.db__target b{position:absolute;top:-24px;left:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:.72rem;font-weight:500;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:4px}
.db__unit{position:absolute;right:0;bottom:0;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
/* Angebotsvergleich */
.cmp{padding:34px 0 4px}
.cmp__track{position:relative;height:30px;border-radius:6px;border:1px solid var(--line-strong);background:linear-gradient(90deg,#E8F1EA,var(--paper-2) 35%,var(--paper-2) 65%,#F6E4E1)}
.cmp__band{position:absolute;top:4px;bottom:4px;background:var(--yellow);border:1px solid var(--ink);border-radius:4px;transition:left .3s,width .3s}
.cmp__mark{position:absolute;top:-8px;bottom:-8px;width:0;border-left:2px solid var(--ink);transition:left .35s cubic-bezier(.2,.8,.2,1)}
.cmp__mark b{position:absolute;top:-24px;left:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:.72rem;font-weight:500;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:4px}
.cmp__ticks{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);margin-top:8px}
[data-state="lo"] .rec h3{color:var(--ink)}
[data-state="hi"] .rec h3::before,[data-state="lo"] .rec h3::before,[data-state="ok"] .rec h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;vertical-align:middle;background:var(--ok)}
[data-state="hi"] .rec h3::before{background:var(--err)}
[data-state="lo"] .rec h3::before{background:var(--yellow-deep)}
/* Spachtelstufen-Leiter */
.qladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.qladder li{border:1px solid var(--line-strong);border-radius:8px;padding:12px;background:var(--paper);display:flex;flex-direction:column;gap:4px;transition:background-color .25s,border-color .25s;min-width:0}
.qladder li:nth-child(1){min-height:84px}.qladder li:nth-child(2){min-height:104px}.qladder li:nth-child(3){min-height:124px}.qladder li:nth-child(4){min-height:144px}
.qladder b{font-family:var(--f-display);font-weight:300;font-stretch:118%;font-size:1.7rem;line-height:1}
.qladder span{font-size:.74rem;color:var(--ink-2);line-height:1.3;overflow-wrap:anywhere}
.qladder li.past{background:var(--yellow-wash)}
.qladder li.on{background:var(--yellow);border-color:var(--ink)}
.qladder li.on span{color:var(--ink)}
/* Werkzeug-Kacheln */
.tool-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.tool-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-left:1px solid var(--line-strong);color:var(--ink);text-decoration:none;transition:background-color .15s;min-width:0}
.tool-card:first-child{border-left:0}
.tool-card:hover{background:var(--yellow-wash);text-decoration:none}
.tool-card .n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-3)}
.tool-card svg.ic{width:36px;height:36px}
.tool-card svg.ic .y{fill:var(--yellow)}
.tool-card h3{font-size:1.15rem;font-weight:500}
.tool-card p{color:var(--ink-2);font-size:.92rem;flex:1}
.tool-card .go{font-weight:650;font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.tool-card .go svg{width:16px;height:16px}
.tool-nav{display:flex;flex-wrap:wrap;gap:8px}
.tool-sec{scroll-margin-top:calc(var(--header-h) + 16px)}
@media (max-width:980px){.tool__grid,.tool__foot{grid-template-columns:1fr}.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card:nth-child(3){border-left:0}.tool-card:nth-child(n+3){border-top:1px solid var(--line-strong)}}
@media (max-width:560px){.tool-cards{grid-template-columns:1fr}.tool-card{border-left:0}.tool-card:nth-child(n+2){border-top:1px solid var(--line-strong)}.kv--4{grid-template-columns:repeat(2,minmax(0,1fr))}.kv--4 > div:nth-child(3){border-left:0}.kv--4 > div:nth-child(n+3){border-top:1px solid var(--line)}.kv--3{grid-template-columns:1fr}.kv--3 > div{border-left:0}.kv--3 > div + div{border-top:1px solid var(--line)}.tool__pair{grid-template-columns:1fr}.qladder span{display:none}.qladder li{min-height:0!important;padding:10px}.qladder li:nth-child(1){height:56px}.qladder li:nth-child(2){height:68px}.qladder li:nth-child(3){height:80px}.qladder li:nth-child(4){height:92px}}
.tool-explain{margin-top:clamp(32px,4vw,52px)}
.tool-explain h3{font-size:var(--t-lg);font-weight:500;margin-bottom:10px}
.tool-explain p,.tool-explain ul{color:var(--ink-2);margin:0 0 12px;max-width:62ch}
.tool-explain ul{padding-left:1.1em}
.tool-explain li{margin-bottom:6px}
.tool-explain strong{color:var(--ink)}
.tool-explain a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow-deep);text-underline-offset:3px}
.tool__hint{font-size:.84rem;color:var(--ink-2);margin-top:-10px}
.tool__price--big b{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.tool__price--big{background:var(--yellow-wash)}