.cfg{
  /* lokale namen, gekoppeld aan tokens.css (geen nieuwe kleuren) */
  --blauw:var(--dusty); --blauw-licht:var(--dusty-licht);
  --charcoal:#181819;        /* huisstijl Charcoal, alleen voor de tooltip */
  --bg:var(--wit); --vlak:var(--mist); --border:var(--linnen);
  --tekst-zacht:#6E695E;     /* = tokens --steen; hier niet via var, want .cfg overschrijft --steen */
  --steen:var(--steen-deco);
  --chipvlak:var(--mist); --chipvlak-hover:var(--dusty-licht);
  --radius:6px;}
.cfg *{box-sizing:border-box}
.cfg{font-family:var(--font-tekst);font-size:14px;line-height:1.5;color:var(--tekst);
  background:var(--bg);-webkit-font-smoothing:antialiased}
.cfg button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.cfg button:disabled{cursor:default}
.cfg :focus-visible{outline:2px solid var(--actie);outline-offset:2px;border-radius:4px}
.cfg svg{display:block}
.cfg .app{display:flex;height:100vh;height:100dvh;position:relative;overflow:hidden}
.cfg .canvas{flex:1;min-width:0;position:relative;background:var(--bg)}
.cfg .tekenvlak{position:absolute;inset:24px 24px 96px 24px;display:grid;place-items:center}
.cfg .tekenvlak svg{width:100%;height:100%;}
.cfg .tekenvlak [data-canvas-seg]{cursor:pointer}
.cfg .rendernotitie{position:absolute;top:16px;left:22px;right:22px;margin:0;z-index:5;
  font-size:11px;color:var(--tekst-zacht);letter-spacing:.01em}
@media (max-width:899px){.cfg .rendernotitie{top:6px;left:14px;right:14px;font-size:10px}
}
.cfg .tools{position:absolute;left:20px;bottom:18px;display:flex;gap:6px;z-index:5}
.cfg .tools button{display:flex;flex-direction:column;align-items:center;gap:4px;
  width:62px;padding:8px 2px;border-radius:var(--radius);color:var(--walnut)}
.cfg .tools button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .tools button span{font-size:11px;color:var(--tekst-zacht)}
.cfg .tools button:hover{background:var(--vlak)}
.cfg .tools button[aria-pressed="true"]{background:var(--vlak);box-shadow:inset 0 0 0 1px var(--border)}
.cfg .tools button[aria-pressed="true"] span{color:var(--walnut)}
.cfg .tools button:disabled{opacity:.35}
.cfg .tools button:disabled:hover{background:none}
.cfg .pil{position:absolute;right:22px;bottom:22px;z-index:5;display:flex;align-items:center;gap:8px;
  padding:9px 16px;background:var(--wit);border:1px solid var(--border);border-radius:var(--radius);
  font-size:12.5px;color:var(--walnut);box-shadow:0 2px 10px rgba(24,24,25,.08)}
.cfg .pil:hover{border-color:var(--steen)}
.cfg .pil svg{width:15px;height:15px;stroke:var(--messing);fill:none;stroke-width:1.6;stroke-linecap:round}
.cfg .kantelchip{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:8px;max-width:min(92%,520px);
  padding:8px 14px;background:var(--wit);border:1px solid var(--messing);border-radius:var(--radius);
  font-size:12px;color:var(--walnut)}
.cfg .kantelchip svg{width:15px;height:15px;flex:none;stroke:var(--messing);fill:none;stroke-width:1.6;stroke-linecap:round}
.cfg .kantelchip[hidden]{display:none}
.cfg .klapknop{position:absolute;top:50%;right:440px;transform:translate(50%,-50%);z-index:30;
  width:30px;height:30px;border-radius:50%;background:var(--wit);border:1px solid var(--border);
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(24,24,25,.10);transition:right .28s ease}
.cfg .klapknop svg{width:13px;height:13px;stroke:var(--walnut);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.cfg .app.dicht .klapknop{right:14px}
.cfg .app.dicht .klapknop svg{transform:rotate(180deg)}
.cfg .paneel{width:440px;flex:0 0 440px;display:flex;flex-direction:column;background:var(--wit);
  border-left:1px solid var(--border);transition:margin-right .28s ease}
.cfg .app.dicht .paneel{margin-right:-440px;visibility:hidden;transition:margin-right .28s ease, visibility 0s .28s}
.cfg .greep{display:none}
.cfg .paneelkop{padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.cfg .kicker{display:none}
.cfg .paneelkop h1{margin:0 0 4px;font-family:var(--font-display);font-weight:400;font-size:17px;line-height:1.3;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--walnut)}
.cfg .uitleg{margin:0 0 12px;font-size:12px;color:var(--tekst-zacht)}
.cfg .voortgang{display:flex;align-items:center;gap:8px}
.cfg .vdots{display:flex;gap:5px}
.cfg .vdots span{width:22px;height:4px;border-radius:2px;background:var(--linnen)}
.cfg .vdots span.klaar{background:var(--steen)}
.cfg .vdots span.nu{background:var(--actie)}
.cfg .vlabel{font-size:11px;color:var(--tekst-zacht)}
.cfg .secties{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;
  padding:14px 20px 26px;scroll-behavior:smooth;background:var(--vlak)}
.cfg .intro{position:relative;border-radius:var(--radius);padding:4px 30px 4px 2px;margin-bottom:14px}
.cfg .intro p{margin:0;font-size:12px;line-height:1.55;color:var(--tekst-zacht)}
.cfg .intro strong{font-weight:600;color:var(--tekst)}
.cfg .introx{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:var(--tekst-zacht)}
.cfg .introx:hover{background:var(--wit)}
.cfg .introx svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cfg .intro[hidden]{display:none}
.cfg .zonekop{display:flex;align-items:baseline;gap:10px;margin:18px 2px 8px}
.cfg .zonekop h2{margin:0;font-size:13px;font-weight:600;color:var(--walnut)}
.cfg .zonesub{font-size:11px;color:var(--tekst-zacht)}
.cfg .zonekop.rustig h2{color:var(--tekst-zacht)}
.cfg .kaart{background:var(--wit);border:1px solid var(--linnen);border-radius:var(--radius);
  margin-bottom:10px;transition:background .2s,box-shadow .2s,border-color .2s}
.cfg .kaart.leeg:not(.open):hover{border-color:var(--steen)}
.cfg .kaart.af{background:var(--wit);border:1px solid var(--dusty);box-shadow:inset 3px 0 0 var(--dusty)}
.cfg .kaart.af:not(.open):hover{border-color:var(--actie)}
.cfg .kaart.af .knaam,.cfg .kaart.af .kprijs,.cfg .kaart.af .kicoon{color:var(--walnut)}
.cfg .kaart.open{background:var(--wit);border-color:transparent;box-shadow:0 2px 12px rgba(24,24,25,.07)}
.cfg .kvink{display:none;position:absolute;top:-8px;left:-5px;z-index:8;width:20px;height:20px;
  border-radius:50%;background:var(--wit);place-items:center;
  box-shadow:0 1px 3px rgba(24,24,25,.14)}
.cfg .kvink svg{width:11px;height:11px;stroke:var(--actie);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .kaart.af .kvink{display:grid}
.cfg .koprij{position:relative}
.cfg .kaartkop{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;
  width:100%;text-align:left;padding:13px 14px;border-radius:var(--radius)}
.cfg .kaart.seg .kaartkop{grid-template-columns:40px 1fr 26px 72px;gap:10px}
.cfg .kaart.open .koprij{position:sticky;top:-14px;z-index:6;background:var(--wit);
  border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;
  transition:margin .18s ease,border-radius .18s ease}
.cfg .kaart.open .koprij.vast{margin-inline:-21px;padding-inline:21px;border-radius:0;
  box-shadow:0 1px 0 var(--border)}
.cfg .kicoon{width:40px;height:40px;color:var(--walnut)}
.cfg .kicoon svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .ktekst{min-width:0}
.cfg .knaam{display:flex;align-items:center;gap:6px;font-weight:600;font-size:17px;line-height:1.25}
.cfg .ksamen{display:block;margin-top:2px;font-size:11.5px;color:var(--tekst-zacht);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg .ksamen.badges{display:flex;gap:4px;margin-top:5px;overflow:hidden;text-overflow:clip}
.cfg .bdg{flex:none;padding:2.5px 9px;border-radius:var(--radius);background:var(--walnut);color:var(--wit);
  font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1.45;white-space:nowrap}
.cfg .kaart.leeg .bdg{background:var(--chipvlak);color:var(--tekst-zacht)}
.cfg .chev{width:16px;height:16px;justify-self:end;display:grid;place-items:center}
.cfg .chev svg{width:16px;height:16px;stroke:var(--walnut);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cfg .kaart.leeg .chev{width:26px;height:26px;border:1px solid var(--linnen);border-radius:50%}
.cfg .kaart.leeg .chev svg{width:13px;height:13px}
.cfg .kaart.open .chev svg{transform:rotate(180deg)}
.cfg .kprijs{font-size:12.5px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--tekst)}
.cfg .kaart.leeg .kprijs{color:var(--tekst-zacht)}
.cfg .segdel{position:absolute;top:-8px;right:-5px;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--wit);border:0;color:var(--tekst-zacht);
  box-shadow:0 1px 3px rgba(24,24,25,.14);
  opacity:0;transition:opacity .15s,color .15s;z-index:8}
.cfg .koprij:hover .segdel,.cfg .segdel:focus-visible{opacity:1}
.cfg .segdel:hover{color:var(--walnut)}
.cfg .segdel svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg .koprij.vast .segdel{display:none}
.cfg .kaartbody{padding:0 14px 6px}
.cfg .kaartbody[hidden]{display:none}
.cfg .sub{padding:15px 0 13px}
.cfg .subkop{display:flex;align-items:center;gap:6px;margin:0 0 9px;font-size:12px;font-weight:600}
.cfg .subkop .meerprijs{font-weight:400;font-size:11px;color:var(--tekst-zacht)}
.cfg .hint{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--tekst-zacht)}
.cfg .sub.rustig .subkop{color:var(--tekst-zacht)}
.cfg .tip{width:16px;height:16px;flex:none;border-radius:50%;border:1px solid var(--tekst-zacht);
  color:var(--tekst-zacht);font-size:11px;font-weight:600;font-family:var(--font-tekst);
  display:inline-grid;place-items:center;line-height:1;vertical-align:middle}
.cfg .tip:hover{border-color:var(--walnut);color:var(--walnut)}
.cfg #zweef{position:fixed;z-index:99;max-width:240px;padding:9px 12px;background:var(--walnut);
  color:var(--wit);font-size:11px;line-height:1.5;border-radius:6px;pointer-events:none}
.cfg #zweef[hidden]{display:none}
.cfg .veldrij{display:flex;align-items:center;gap:8px}
.cfg .veldrij input{width:110px;padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius);
  font:inherit;font-size:13.5px;color:var(--tekst);background:var(--wit)}
.cfg .veldrij input:focus{outline:2px solid var(--actie);outline-offset:1px;border-color:var(--actie)}
.cfg .eenheid{font-size:12px;color:var(--tekst-zacht)}
.cfg .melding{display:flex;gap:7px;align-items:flex-start;margin-top:9px;padding:8px 11px;
  border:1px solid var(--messing);border-radius:var(--radius);background:var(--wit);font-size:12px;line-height:1.5;color:var(--walnut)}
.cfg .melding svg{width:14px;height:14px;flex:none;margin-top:1px;stroke:var(--messing);fill:none;
  stroke-width:1.6;stroke-linecap:round}
.cfg .melding[hidden]{display:none}
.cfg .chips{display:flex;flex-wrap:wrap;gap:7px}
.cfg .chip{padding:7px 13px;border:1px solid transparent;border-radius:var(--radius);background:var(--chipvlak);
  font-size:12.5px;color:var(--tekst);transition:background .12s,border-color .12s}
.cfg .chip:hover{background:var(--chipvlak-hover)}
.cfg .chip.sel{border-color:var(--actie);box-shadow:0 0 0 1px var(--actie);background:var(--wit);
  color:var(--actie-donker);font-weight:600}
.cfg .chip:disabled{opacity:.35;cursor:not-allowed}
.cfg .chip:disabled:hover{background:var(--chipvlak)}
.cfg .tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:12px 6px}
.cfg .tcel{position:relative;display:flex;justify-content:center}
.cfg .tegel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px;width:100%}
.cfg .tring{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid transparent;
  background:transparent;display:grid;place-items:center;transition:border-color .12s,box-shadow .12s,background .12s}
.cfg .tring svg{width:38px;height:38px;stroke:var(--walnut);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .tegel:hover .tring{border-color:var(--border)}
.cfg .tegel.sel .tring{border-color:var(--actie);box-shadow:0 0 0 1.5px var(--actie)}
.cfg .tlabel{font-size:11px;line-height:1.35;text-align:center;color:var(--tekst)}
.cfg .tsub{display:block;font-size:11px;color:var(--tekst-zacht)}
.cfg .vink{position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;
  background:var(--actie);display:none;place-items:center;box-shadow:0 0 0 2px var(--wit)}
.cfg .vink svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfg .tegel.sel .vink,.cfg .staalknop.sel .vink{display:grid}
.cfg .tel{position:absolute;top:-2px;left:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--walnut);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--wit)}
.cfg .tmin{position:absolute;top:46px;left:50%;margin-left:13px;width:21px;height:21px;border-radius:50%;
  background:var(--wit);border:1px solid var(--border);display:grid;place-items:center;
  color:var(--walnut);z-index:2;box-shadow:0 1px 4px rgba(24,24,25,.12)}
.cfg .tmin:hover{border-color:var(--steen)}
.cfg .tmin svg{width:9px;height:9px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg .tegel.slot{opacity:.35;cursor:not-allowed}
.cfg .tegel.slot .tring{background:var(--vlak);border-color:var(--border)}
.cfg .slotje{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;
  background:var(--wit);border:1px solid var(--border);display:grid;place-items:center}
.cfg .slotje svg{width:9px;height:9px;stroke:var(--tekst-zacht);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .stalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px 4px}
.cfg .staalknop{display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px}
.cfg .staal{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  transition:box-shadow .12s}
.cfg .staalknop:hover .staal{border-color:var(--steen)}
.cfg .staalknop.sel .staal{border-color:var(--actie);box-shadow:0 0 0 2px var(--actie)}
.cfg .staalknop .tlabel{font-size:11px}
.cfg .meterrij{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.cfg .meter{flex:1;height:6px;border-radius:3px;background:var(--vlak);border:1px solid var(--border);overflow:hidden}
.cfg .meter i{display:block;height:100%;background:var(--steen);transition:width .2s}
.cfg .meter.vol i{background:var(--messing)}
.cfg .metertekst{font-size:11px;color:var(--tekst-zacht);white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg .posrij{display:flex;align-items:center;justify-content:space-between}
.cfg .posrij .subkop{margin:0}
.cfg .posknoppen{display:flex;gap:6px}
.cfg .posknoppen button{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  display:grid;place-items:center;color:var(--walnut)}
.cfg .posknoppen button:hover:not(:disabled){border-color:var(--steen)}
.cfg .posknoppen button:disabled{opacity:.3}
.cfg .posknoppen svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .gekozen{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:14px 0 10px}
.cfg .glabel{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-zacht)}
.cfg .gwaarde{display:block;margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.45}
.cfg .gprijs{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Stap 1 compacter (Nico, 4 sep 2026): muur en plafond naast elkaar, vier plaatsingstegels op een rij, zodat Volgende boven de vouw blijft. */
.cfg .subrij{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.cfg #b-s1 .sub{padding:9px 0 7px}
.cfg #b-s1 .subkop{margin-bottom:6px}
.cfg #b-s1 .veldrij input{padding:7px 10px}
.cfg #b-s1 .melding{margin-top:0;margin-bottom:6px}
.cfg #b-s1 .tegels{grid-template-columns:repeat(4,1fr);gap:6px 4px}
.cfg #b-s1 .tegel{gap:4px}
.cfg #b-s1 .tring{width:48px;height:48px}
.cfg #b-s1 .tring svg{width:30px;height:30px}
.cfg #b-s1 .tlabel{font-size:11px;line-height:1.25}
.cfg #b-s1 .gekozen{padding:6px 0 5px}
.cfg #b-s1 .volgende{margin:0 0 6px}
.cfg .paneelkop{padding:14px 20px 10px}
.cfg .intro{margin-bottom:10px}
.cfg #z-s1{margin-top:10px}
.cfg #k-s1 .kaartkop{padding:11px 14px}
.cfg .volgende{display:flex;align-items:center;gap:6px;margin:2px 0 10px;padding:8px 13px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--wit);font-size:12px;color:var(--walnut);font-weight:500}
.cfg .volgende:hover{border-color:var(--steen)}
.cfg .volgende svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .plusrij{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;width:100%;
  text-align:left;padding:13px 14px;margin-bottom:10px;border:1px dashed var(--steen);
  border-radius:var(--radius);color:var(--tekst)}
.cfg .plusrij:hover:not(:disabled){border-color:var(--walnut);background:var(--vlak)}
.cfg .plusrij:disabled{opacity:.5;border-color:var(--border);cursor:not-allowed}
.cfg .plusrij .kicoon svg{stroke:var(--walnut)}
.cfg .plusrij:disabled .kicoon svg{stroke:var(--steen)}
.cfg .plusrij strong{font-weight:600;font-size:13.5px}
.cfg .plusrij .ksamen{white-space:normal}
.cfg .ovz{margin-top:20px;border-top:1px solid var(--border);padding-top:14px}
.cfg .ovz h2{margin:0 2px 4px;font-size:15px;font-weight:600;color:var(--walnut)}
.cfg .ovz .zonesub{display:block;margin:0 2px 8px}
.cfg .ovzrij{border-bottom:0}
.cfg .ovzkop{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 2px}
.cfg .ovzkop .naam{flex:1;font-size:12.5px;font-weight:500}
.cfg .ovzkop .prijs{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.cfg .ovzkop svg{width:12px;height:12px;stroke:var(--tekst-zacht);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cfg .ovzrij.uit .ovzkop svg{transform:rotate(180deg)}
.cfg .ovzdetail{padding:0 2px 10px}
.cfg .ovzdetail[hidden]{display:none}
.cfg .ovzdetail .r{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0 2.5px 20px;
  font-size:11.5px;color:var(--tekst-zacht)}
.cfg .ovzdetail .r span:last-child{font-variant-numeric:tabular-nums}
.cfg .nul{color:var(--tekst-zacht);font-weight:400}
.cfg .subbar{border-top:1px solid var(--border);background:var(--wit);padding:12px 20px 14px}
.cfg .subrij{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cfg .subrij .klein{font-size:11px;color:var(--tekst-zacht);font-weight:400}
.cfg .subrij strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.cfg .subknoppen{display:flex;gap:8px}
.cfg #hart{width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--walnut)}
.cfg #hart:hover{border-color:var(--steen)}
.cfg #hart svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cfg #hart[aria-pressed="true"] svg{fill:var(--messing);stroke:var(--messing)}
.cfg .primair{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:12px 16px;background:var(--actie);color:var(--wit);border-radius:var(--radius);
  font-size:15px;font-weight:500;text-decoration:none}
.cfg .primair:hover{background:var(--actie-donker)}
.cfg .primair svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .overlay{position:fixed;inset:0;z-index:90;background:rgba(24,24,25,.4);
  display:grid;place-items:center;padding:20px}
.cfg .overlay[hidden]{display:none}
.cfg .dialoog{position:relative;width:min(440px,100%);max-height:86vh;overflow-y:auto;
  background:var(--wit);border-radius:var(--radius);padding:26px 26px 22px}
.cfg .dialoog .kicker{margin-bottom:8px}
.cfg .dialoog h2{margin:0 0 14px;font-size:16px;font-weight:600}
.cfg .dialoog ol{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.cfg .dialoog li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:12.5px;line-height:1.55}
.cfg .dialoog li b{display:block;font-weight:600}
.cfg .stapnr{width:26px;height:26px;border-radius:50%;background:var(--vlak);border:1px solid var(--border);
  display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--walnut)}
.cfg .dialoog .naschrift{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--vlak);
  font-size:11.5px;color:var(--tekst-zacht);line-height:1.55}
.cfg .dsluit{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:var(--tekst-zacht)}
.cfg .dsluit:hover{background:var(--vlak);color:var(--walnut)}
.cfg .dsluit svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cfg #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:95;
  max-width:min(88vw,420px);padding:10px 18px;background:var(--walnut);color:var(--wit);
  font-size:13px;line-height:1.45;border-radius:var(--radius);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s}
.cfg #toast.zichtbaar{opacity:1}
@media (max-width:899px){.cfg .klapknop{display:none}
.cfg .app{display:block}
.cfg .canvas{position:absolute;inset:0;height:100dvh}
.cfg .tekenvlak{inset:16px 12px auto 12px;height:52dvh;place-items:start center}
.cfg .tools{left:12px;bottom:auto;top:calc(52dvh + 24px)}
.cfg .pil{right:12px;bottom:auto;top:calc(52dvh + 30px)}
.cfg .kantelchip{top:10px}
.cfg .paneel{position:absolute;left:0;right:0;top:0;height:100dvh;width:auto;flex:none;margin:0;
    border-left:0;border-top:1px solid var(--border);border-radius:16px 16px 0 0;
    box-shadow:0 -10px 34px rgba(24,24,25,.16);z-index:40;
    transform:translateY(var(--sheetY,calc(100dvh - 148px)));transition:transform .26s ease;
    touch-action:none}
.cfg .paneel.sleept-sheet{transition:none}
.cfg .greep{display:flex;order:0;justify-content:center;padding:9px 0 3px;cursor:grab;flex:none}
.cfg .greep i{width:42px;height:4px;border-radius:2px;background:var(--linnen)}
.cfg .subbar{order:1;border-top:0;border-bottom:1px solid var(--vlak);padding:6px 18px 12px;flex:none}
.cfg .paneelkop{order:2}
.cfg .secties{order:3;padding-bottom:180px}
}
@media (min-width:900px){.cfg .paneel{--sheetY:0 !important}
}


/* ---------- inbedding in de site-schil ---------- */
.cfg{position:relative}
.cfg .app{height:calc(100dvh - 77px);min-height:600px}
.cfg h3{letter-spacing:0;line-height:1.35}
.cfg .staal{padding:0}
.cfg .veldrij{grid-template-columns:none}
@media (max-width:899px){
  .cfg{height:100dvh;overflow:hidden}
  .cfg .app{height:100%;min-height:0}
}

/* ---------- 3D-preview met vergelijkschuif ---------- */
.cfg .vlak3d,.cfg .abwrap{position:absolute;inset:24px 24px 96px 24px}
.cfg .vlak3d{pointer-events:none;clip-path:inset(0 0 0 var(--ab,50%));background:var(--bg)}
.cfg .vlak3d.orbit{pointer-events:none;cursor:default}
.cfg .vlak3d canvas{display:block;width:100%;height:100%}
.cfg .abwrap{pointer-events:none;z-index:4}
.cfg .ab{position:absolute;top:0;bottom:0;left:var(--ab,50%);width:0}
.cfg .ab .lijn{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--walnut);opacity:.5}
.cfg .ab .greep3d{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:36px;height:36px;
  border-radius:50%;background:var(--wit);border:1px solid var(--border);box-shadow:0 2px 10px rgba(24,24,25,.14);
  display:grid;place-items:center;cursor:ew-resize;pointer-events:auto;touch-action:none}
.cfg .ab .greep3d svg{width:16px;height:16px;stroke:var(--walnut);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfg .ab .greep3d:hover{border-color:var(--steen)}
/* De labels staan in de onderhoeken van de box, niet aan de lijn: zo blijven ze
   in beeld als de schuif helemaal links of rechts staat. */
.cfg .abwrap .lbl{position:absolute;bottom:6px;z-index:2;font-size:12px;font-weight:500;color:var(--walnut);background:rgba(255,255,255,.88);border:1px solid var(--border);
  padding:5px 9px;border-radius:var(--radius);pointer-events:auto;cursor:pointer;white-space:nowrap}
.cfg .abwrap .lbl:hover{border-color:var(--steen)}
.cfg .abwrap .lbl.links{left:0}
.cfg .abwrap .lbl.rechts{right:0}
.cfg .abwrap .lbl.aan{background:var(--walnut);color:var(--wit);border-color:var(--walnut)}
.cfg .legenda3d{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:flex;gap:12px;
  align-items:center;font-size:11px;color:var(--tekst-zacht);background:rgba(255,255,255,.92);
  padding:6px 8px 6px 12px;border-radius:var(--radius);border:1px solid var(--border);white-space:nowrap}
.cfg .legenda3d i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cfg .legenda3d .echt i{background:var(--linnen);border:1px solid var(--steen-deco)}
.cfg .legenda3d .blok i{background:var(--wit);border:1px dashed var(--steen-deco)}
.cfg .legenda3d .knop3d{font-size:11px;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);color:var(--walnut);background:var(--wit)}
.cfg .legenda3d .knop3d:hover{border-color:var(--steen)}
.cfg .legenda3d .knop3d[aria-pressed="true"]{background:var(--actie);border-color:var(--actie);color:var(--wit)}
.cfg .legenda3d .tip3d{color:var(--steen)}
@media (max-width:899px){
  .cfg .vlak3d,.cfg .abwrap{inset:16px 12px auto 12px;height:52dvh}
  .cfg .legenda3d{bottom:auto;top:calc(52dvh + 84px);max-width:calc(100% - 24px);flex-wrap:wrap;white-space:normal;justify-content:center}
}
@media (max-width:1100px) and (min-width:900px){
  .cfg .legenda3d{bottom:auto;top:52px}
}

/* ---------- bouwronde 16 sep 2026 ---------- */
.cfg .kaart.seg .koprij{display:flex;align-items:center}
.cfg .kaart.seg .kaartkop{flex:1;min-width:0;padding-left:4px}
.cfg .segsleep{flex:none;align-self:stretch;width:22px;margin-left:6px;display:grid;place-items:center;
  color:var(--steen);cursor:grab;touch-action:none;border-radius:6px}
.cfg .segsleep:hover{color:var(--walnut);background:var(--vlak)}
.cfg .segsleep svg,.cfg .inrsleep svg{width:10px;height:14px;fill:currentColor;stroke:none}
.cfg .kaart.seg{transition:background .2s,box-shadow .2s,border-color .2s,transform .16s ease}
.cfg .sleept{transition:none!important;position:relative;z-index:20;box-shadow:0 8px 24px rgba(24,24,25,.18)!important;cursor:grabbing}
.cfg .inrlijst{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cfg .inrrij{display:grid;grid-template-columns:22px 24px 1fr auto;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;background:var(--wit);border:1px solid var(--linnen);border-radius:var(--radius);
  font-size:12px;transition:transform .16s ease}
.cfg .inrrij.vast{background:var(--vlak);border-style:dashed;color:var(--tekst-zacht)}
.cfg .inrsleep{width:22px;height:26px;display:grid;place-items:center;color:var(--steen);cursor:grab;touch-action:none;border-radius:5px}
.cfg .inrsleep:hover{color:var(--walnut);background:var(--vlak)}
.cfg .inrsleep.leeg{cursor:default}
.cfg .inricoon svg{width:24px;height:24px;stroke:var(--walnut);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cfg .inrhoogte{font-size:11px;color:var(--tekst-zacht);font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg .inrlijst.nee .sleept{outline:1.5px solid var(--messing);background:var(--wit)}
.cfg .chip[aria-disabled="true"]{opacity:.4;cursor:help}
.cfg .chip[aria-disabled="true"]:hover{background:var(--chipvlak)}
.cfg .tegel.slot{cursor:help}
.cfg .plusrij.uit{opacity:.5;border-color:var(--border);cursor:help}
.cfg .tiptegel{position:absolute;top:47px;left:50%;margin-left:-34px;z-index:2;background:var(--wit)}
.cfg #zweef .zicoon{display:block;width:52px;height:52px;margin:2px 0 6px}
.cfg #zweef .zicoon svg{width:52px;height:52px;stroke:#fff;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* D8: productfoto van de leverancier in de info-knop (Hettich) */
.cfg #zweef.metfoto{max-width:260px}
.cfg #zweef .zfoto{display:block;width:160px;height:160px;object-fit:cover;margin:2px 0 8px;border-radius:4px;background:#fff}
.cfg .volgt{color:var(--walnut);border-bottom:1px dashed var(--messing);font-weight:500;font-size:11px;margin-left:6px}
.cfg .hulplink{margin:14px 2px 0;font-size:11.5px;color:var(--tekst-zacht)}
.cfg .hulplink a{color:var(--actie-donker);text-decoration:underline;text-underline-offset:2px}
.cfg .afwerkregel{margin:6px 0 0}
.cfg .afwerkchip{border-color:var(--messing)}
.cfg.kantel-aan .afwerkchip{top:58px}
.cfg .boven{position:absolute;top:40px;left:22px;z-index:6;width:220px;background:rgba(255,255,255,.95);
  border:1px solid var(--border);border-radius:var(--radius)}
.cfg .bovenkop{display:flex;justify-content:space-between;align-items:center;width:100%;padding:7px 10px;
  font-size:12px;font-weight:600;color:var(--walnut)}
.cfg .bovenkop svg{width:12px;height:12px;stroke:var(--walnut);fill:none;stroke-width:1.8;transition:transform .2s}
.cfg .boven.dicht .bovenbody{display:none}
.cfg .boven.dicht .bovenkop svg{transform:rotate(-90deg)}
.cfg .bovenbody{padding:0 10px 9px}
.cfg #boven-svg svg{width:100%;height:auto}
.cfg .bovenlegenda{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;font-size:11px;color:var(--tekst-zacht)}
.cfg .bovenlegenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cfg .veldrij input,.cfg #b-s1 .veldrij input{width:96px;height:34px;padding:0 10px;font-size:13px}
@media (max-width:899px){
  /* Op de configuratorpagina scrollt de sitekop mee weg: anders houdt hij 200 px van het scherm bezet (M2). */
  .cfg-pagina .nav{position:static}
  .cfg .rendernotitie{display:none}
  .cfg{height:calc(100dvh - var(--kopH,0px))}
  .cfg .canvas{height:100%}
  .cfg .paneel{height:100%;transform:translateY(var(--sheetY,calc(100% - 148px)))}
  .cfg .tekenvlak,.cfg .vlak3d,.cfg .abwrap{height:44%}
  .cfg .tools{top:calc(44% + 22px)}
  /* Mobiel: Zo werkt het naar de hoek rechtsboven, zodat de 3D-knop (M3) naast het gereedschap in beeld blijft. */
  .cfg .pil{top:20px;bottom:auto;right:12px;padding:7px 12px;font-size:12px}
  .cfg .legenda3d{top:calc(44% + 26px);bottom:auto;left:auto;right:12px;transform:none;max-width:none;
    background:none;border:0;padding:0}
  .cfg .legenda3d .echt,.cfg .legenda3d .blok{display:none}
  .cfg .paneelkop .uitleg{display:none}
  .cfg .paneelkop{padding:8px 18px 8px}
  .cfg .paneelkop .kicker{display:none}
  .cfg .boven{top:20px;left:12px;width:180px}
  .cfg .intro p{font-size:11px;line-height:1.45}
}

/* ---------- site-v2 (16 sep 2026) ---------- */
.cfg-pagina{overflow:hidden}
@media (max-width:899px){.cfg-pagina{overflow:auto}}
.cfg-pagina main{display:block}
.cfg :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius)}
.cfg .veldrij input:focus{outline:none;box-shadow:var(--focus);border-color:var(--actie)}
.cfg .chip.sel{box-shadow:inset 0 0 0 1px var(--actie)}
.cfg .paneelkop{background:var(--wit)}
.cfg .gekozen .glabel{text-transform:none;letter-spacing:0;font-size:12px}
.cfg .subbar .subrij strong{font-size:19px}
.cfg .ovzdetail .r{font-size:12px}
/* bevestiging winkelmand */
.cfg .mandklaar{text-align:left}
.cfg .mandklaar h2{margin:6px 0 6px;font-size:18px;font-weight:600;color:var(--walnut)}
.cfg .mandklaar p{margin:0 0 18px;font-size:14px;color:var(--tekst-zacht)}
.cfg .mandvink{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mist)}
.cfg .mandvink svg{width:16px;height:16px;stroke:var(--actie);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfg .mandklaar-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.cfg .mandklaar-knoppen .primair{flex:1 1 180px}
.cfg .mandklaar-knoppen .primair:hover{color:var(--wit)}
.cfg .secundair{flex:1 1 180px;min-height:46px;padding:12px 16px;border:1px solid var(--actie);border-radius:var(--radius);
  color:var(--actie);font-size:15px;font-weight:500;background:var(--wit)}
.cfg .secundair:hover{background:var(--mist)}
@media (max-width:899px){
  .cfg-pagina .nav{position:static}
}
/* Op de configurator zelf is de hoofdactie van de nav overbodig; de winkelmand blijft. */
.cfg-pagina .nav .nav__cta{display:none}
@media (max-width:899px){
  /* Mobiel (M2): de voortgang zegt al waar je bent; de kop blijft voor schermlezers. */
  .cfg .paneelkop h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cfg #z-s1{margin:4px 2px 6px}
  .cfg .secties{padding-top:8px}
}

/* ---------- klikdoelen op touch (lane C, 18 sep 2026) ----------
   Minimaal 44 x 44. Waar het beeld klein moet blijven (info-rondje, sheetgreep)
   krijgt de knop een onzichtbaar groter raakvlak via ::after. */
@media (max-width:899px),(pointer:coarse){
  .cfg .tip:not(.tiptegel){position:relative;z-index:2}
  .cfg .tip::after{content:"";position:absolute;inset:-16px;border-radius:50%}
  .cfg .greep{position:relative}
  .cfg .greep::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
  .cfg .ab .greep3d{width:44px;height:44px}
  .cfg .abwrap .lbl{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px}
  .cfg .bovenkop{min-height:44px}
  .cfg .pil{min-height:44px}
  .cfg .veldrij input,.cfg #b-s1 .veldrij input{height:44px}
  .cfg .chip{min-height:44px}
  .cfg .segsleep,.cfg .inrsleep{position:relative}
  .cfg .segsleep,.cfg .inrsleep,.cfg .segdel,.cfg .tmin{z-index:2}
  .cfg .segsleep::after,.cfg .inrsleep::after,.cfg .segdel::after,.cfg .tmin::after{content:"";position:absolute;
    left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
}
/* Smalle telefoons (320 tot 400): subtotaalbalk op twee regels in plaats van vier,
   zodat de sheet meer ruimte houdt voor de keuzes. */
@media (max-width:400px){
  .cfg .subrij .klein{display:block;font-size:10.5px}
  .cfg .subbar .primair{font-size:14px;white-space:nowrap;padding-left:12px;padding-right:12px}
}

/* ---------- mobiele ronde (W5, 21 sep 2026) ----------
   1. Het paneel is zo hoog als het zichtbare deel, zodat de keuzes in elke stand tot
      onderaan scrollen. Eerst was het paneel 100% hoog en schoof het omlaag: in de halve
      stand viel de onderste 455 px van de keuzes (en de knop Volgende) buiten beeld.
   2. Subtotaal en winkelmandknop op één regel, zodat de keuzes meer ruimte krijgen.
   3. Tekening 40% in plaats van 44%: de wand wordt op de telefoon door de breedte begrensd. */
@media (max-width:899px){
  .cfg .paneel{height:calc(100% - var(--sheetY,0px))}
  .cfg .secties{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .cfg .tekenvlak,.cfg .vlak3d,.cfg .abwrap{height:40%}
  .cfg .tools{top:calc(40% + 22px)}
  .cfg .legenda3d{top:calc(40% + 26px)}
  .cfg .subbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:4px 16px 10px}
  .cfg .subbar .subrij{display:flex;flex-direction:column-reverse;align-items:flex-start;margin:0;gap:0}
  .cfg .subbar .subrij > span{font-size:10.5px;line-height:1.3;color:var(--tekst-zacht)}
  .cfg .subbar .subrij .klein{display:none}
  .cfg .subbar .subrij strong{font-size:19px;line-height:1.15;white-space:nowrap}
  .cfg .subbar .subknoppen{min-width:0}
  .cfg .subbar .primair{min-width:0;font-size:14px;padding-left:12px;padding-right:12px;white-space:nowrap}
  .cfg .subbar #mand-label{overflow:hidden;text-overflow:ellipsis}
}
/* Onder 360 px botste Maten met Kijk in de kast (19 px op 320). Smallere gereedschapsknoppen. */
@media (max-width:359px){
  .cfg .tools{gap:2px;left:8px}
  .cfg .tools button{width:52px;padding-left:0;padding-right:0}
  .cfg .tools button span{font-size:10px}
  .cfg .legenda3d{right:8px}
}

/* 25 sep 2026: vijf stappen, inspiratie-link (K27), servermeldingen */
.cfg .inspiratielink{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;line-height:1.4;
  color:var(--actie-donker);text-decoration:none}
.cfg .inspiratielink svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cfg .inspiratielink span{text-decoration:underline;text-underline-offset:2px}
.cfg .inspiratielink:hover span{color:var(--walnut)}
.cfg .ovznoot{margin:10px 2px 0}
.cfg .mandklaar p.klein{font-size:12px;color:var(--messing-donker,#8A5A00);margin-top:-8px}
.cfg .ovz .melding{margin-top:12px}