/* Offerteformulier met rekenhulp (29-10-2026, Rogier: "elke offerte formulier moet met schuifbalken"): schuifregelaars
   links, het overzicht rechts, de gegevens eronder. Voor offerte-aanvragen/ en het formulier op elke modulepagina.
   calc-in, c-row, c-lbl, c-pair, c-sub, num, calc-out, total, stack-bar, lines en fine komen uit stijl.css. */
.of-calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"in out" "geg out";gap:0;padding:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-2)}
.of-calc > .calc-in{grid-area:in}
.of-calc > .calc-out{grid-area:out;display:block;border-radius:0 var(--r-xl) var(--r-xl) 0}
.of-out{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.of-geg{grid-area:geg;padding:28px;border-top:1px solid var(--line);display:grid;gap:18px;min-width:0}
.of-geg h3,.calc-h h2,.calc-h h3{font:800 1.25rem/1.2 var(--f-d);margin:0}
.of-kort{margin:-12px 0 0;font-size:.9375rem;color:var(--ink-2)}
.of-calc .c-row[hidden],.of-calc .lines li[hidden],.of-calc .form-msg[hidden],.of-calc .c-note[hidden],.of-calc .stack-bar[hidden],.of-calc .out-meta[hidden],.of-calc .fine[hidden]{display:none}
.of-calc fieldset.c-row{border:0;margin:0;padding:0;min-width:0}
.of-calc legend.c-lbl{padding:0;margin-bottom:10px;font:600 .9375rem/1.4 var(--f-b)}
.c-row > .seg{justify-self:start;flex-wrap:wrap}
.c-opts{gap:12px}
.c-opts .chk{align-items:flex-start}
.c-opts .chk input{margin-top:2px}
.c-opts small,.c-row .chk small{display:block;color:var(--ink-3);font-size:.8125rem}
.c-mig{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:12px}
.c-mig label{display:grid;gap:6px;font-size:.8125rem;color:var(--ink-3);font-weight:500}
.c-dot--u{background:var(--blue)} .c-dot--w{background:var(--mint)} .c-dot--m{background:var(--warn)} .c-dot--s{background:var(--ink-3)}
.c-dot--h{background:repeating-linear-gradient(135deg,var(--mint) 0 3px,var(--mint-soft) 3px 6px)}
.c-dot--c{background:repeating-linear-gradient(135deg,var(--blue) 0 3px,var(--blue-soft) 3px 6px)}
.c-dot--b{background:repeating-linear-gradient(135deg,var(--warn) 0 3px,var(--warn-soft) 3px 6px)}
.c-dot--k{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ok)}
.c-dot--o{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.sb-u{background:var(--blue)} .sb-w{background:var(--mint)} .sb-m{background:var(--warn)} .sb-s{background:var(--ink-3)}
.sb-h{background:repeating-linear-gradient(135deg,var(--mint) 0 4px,var(--mint-soft) 4px 8px)}
.sb-c{background:repeating-linear-gradient(135deg,var(--blue) 0 4px,var(--blue-soft) 4px 8px)}
.sb-b{background:repeating-linear-gradient(135deg,var(--warn) 0 4px,var(--warn-soft) 4px 8px)}
.lines .neg .v{color:var(--ok-ink)}
.lines .v{white-space:nowrap}
.total--ov b{font-size:clamp(1.6rem,1.4rem + .8vw,2.1rem)}
.out-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 0;border-block:1px solid var(--line)}
.out-meta span{display:block;font-size:.8125rem;color:var(--ink-3)}
.out-meta b{font:600 1rem/1.3 var(--f-m);font-variant-numeric:tabular-nums}
.c-note{margin:0;font-size:.8125rem;line-height:1.45;color:var(--warn-ink);background:var(--warn-soft);padding:8px 10px;border-radius:8px}
.of-calc .fine{margin:0}
.of-geg .form-f{border-top:1px solid var(--line);padding-top:18px}
.of-geg .form-f p{margin:0}
@media (max-width:1060px){
  .of-calc{grid-template-columns:minmax(0,1fr);grid-template-areas:"in" "out" "geg"}
  .of-calc > .calc-out{border-left:0;border-top:1px solid var(--line);border-radius:0}
  .of-out{position:static}
}
@media (max-width:560px){.of-calc > .calc-in,.of-geg,.of-calc > .calc-out{padding:20px}}