/* ===== Verbouwingsramer v2: maximale eenvoud ===== */
.kmk-vb .kmk-grid{display:block}
.kmk-select{width:100%;font-family:var(--f-body);font-size:14px;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer}

/* levende uitkomst, plakt bovenaan in beeld */
.vb-live{position:sticky;top:8px;z-index:5;background:var(--navy);color:#fff;border-radius:16px;padding:18px 22px;margin:0 0 22px;text-align:center;box-shadow:0 10px 30px rgba(13,43,69,.22)}
.vb-live__label{display:block;font-size:12.5px;opacity:.82;margin-bottom:4px;letter-spacing:.02em}
.vb-live__bedrag{display:block;font-family:var(--f-head);font-size:26px;font-weight:800;line-height:1.15}
.vb-live__sub{display:block;font-size:12.5px;opacity:.85;margin-top:6px;line-height:1.45}

/* stap-blokken */
.vb-stap{margin:0 0 26px}
.vb-stap__kop{display:flex;align-items:center;gap:11px;margin:0 0 4px}
.vb-stap__nr{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--f-head);font-size:15px;font-weight:800}
.vb-stap__kop h2{margin:0;font-family:var(--f-head);font-size:19px;color:var(--navy)}
.vb-optioneel{font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--muted);background:var(--papier-2);padding:2px 9px;border-radius:999px;vertical-align:middle}
.vb-stap__hint{font-size:13.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}

/* ruimte-tegels: groot en tikbaar */
.vb-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kmk-vb[class] .vb-tegels button{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--navy)!important;background:#fff!important;border:1.5px solid var(--border)!important;border-radius:13px!important;padding:18px 10px!important;min-height:64px;cursor:pointer;text-align:center;transition:all .14s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;line-height:1.25}
.kmk-vb[class] .vb-tegels button:hover{border-color:var(--blue)!important;transform:translateY(-1px)}
.kmk-vb[class] .vb-tegels button.on{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important;box-shadow:0 4px 14px rgba(13,43,69,.20)}
.vb-tegels button .vb-tegel__vink{font-size:12px;opacity:0;transition:opacity .14s}
.vb-tegels button.on .vb-tegel__vink{opacity:1}

/* gekozen ruimte-kaarten met kwaliteit en oppervlakte */
.vb-ruimtekaart{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:0 0 12px;background:#fff;box-shadow:0 2px 8px rgba(13,43,69,.05)}
.vb-ruimtekaart__kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.vb-ruimtekaart__kop b{font-family:var(--f-head);font-size:16px;color:var(--navy)}
.vb-ruimtekaart__prijs{font-family:var(--f-head);font-size:15px;color:var(--blue);font-weight:700}
.vb-wis{background:none;border:0;color:#B4462A;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0;margin-left:12px}
.vb-kwal{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:6px 0 0}
.kmk-vb[class] .vb-kwal button{font-size:13px;font-weight:600;color:var(--navy)!important;background:#fff!important;border:1.5px solid var(--border)!important;border-radius:10px!important;padding:11px 6px!important;cursor:pointer;text-align:center;transition:all .13s;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.kmk-vb[class] .vb-kwal button small{font-size:11px;font-weight:400;color:var(--muted)}
.kmk-vb[class] .vb-kwal button.on{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.kmk-vb[class] .vb-kwal button.on small{color:rgba(255,255,255,.8)}
.vb-opp-rij{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--ink)}
.vb-opp-rij label{color:var(--muted)}
.vb-opp-rij .kmk-geld{max-width:120px}
.vb-opp-hint{font-size:12px;color:var(--muted);margin-top:6px}

/* keuzekaarten voor zelfwerkzaamheid (grote, met uitleg) */
.vb-keuzekaarten{display:grid;gap:10px}
.kmk-vb[class] .vb-keuzekaarten button{font-family:var(--f-body);text-align:left;background:#fff!important;border:1.5px solid var(--border)!important;border-radius:13px!important;padding:15px 17px!important;cursor:pointer;transition:all .14s;display:block;width:100%}
.kmk-vb[class] .vb-keuzekaarten button:hover{border-color:var(--blue)!important}
.kmk-vb[class] .vb-keuzekaarten button.on{border-color:var(--navy)!important;background:var(--papier-2)!important;box-shadow:0 0 0 2px var(--navy) inset}
.vb-keuzekaarten button b{display:block;font-size:14.5px;color:var(--navy);font-weight:700;margin-bottom:3px}
.vb-keuzekaarten button span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}

/* verfijn-sectie */
.vb-fijn{display:grid;gap:14px;margin-bottom:14px}
.vb-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink);cursor:pointer}
.vb-check input{width:18px;height:18px;margin-top:1px;accent-color:var(--blue);flex:0 0 auto}
.vb-check small{color:var(--muted)}
.vb-losse{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:6px}
.vb-losse summary{padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;background:var(--papier-2);list-style:none}
.vb-losse summary::-webkit-details-marker{display:none}
.vb-losse summary::before{content:"+ ";font-weight:800;color:var(--blue)}
.vb-losse[open] summary::before{content:"\2013 "}
.vb-losse__in{padding:14px 16px}
.vb-toevoeg{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin:8px 0}
.vb-rij{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--border-soft)}
.vb-rij b{color:var(--navy)}

/* eindresultaat-blok */
.vb-tot{background:var(--papier-2);border:1px solid var(--border);border-radius:13px;padding:15px 18px;margin:14px 0}
.vb-tot .vb-totrij{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.vb-tot .vb-totrij.groot{font-family:var(--f-head);font-size:16px;color:var(--navy);font-weight:800;border-top:1px solid var(--border);margin-top:6px;padding-top:10px}
.vb-splits{font-size:12.5px;color:var(--muted);margin:10px 0;line-height:1.55}
.vb-bron{background:var(--papier-2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-size:11.5px;color:var(--muted);margin:12px 0;line-height:1.55}

@media(max-width:560px){
  .vb-tegels{grid-template-columns:repeat(2,1fr)}
  .vb-live__bedrag{font-size:23px}
}
@media(max-width:360px){
  .vb-tegels{grid-template-columns:1fr}
  .vb-kwal{grid-template-columns:1fr}
}

/* klus-tegels: zelfde stijl, iets compacter */
.kmk-vb[class] .vb-tegels--klus button{min-height:54px;padding:13px 8px!important;font-size:13.5px}
/* variant-keuze binnen een kluskaart */
.vb-var{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 0}
.kmk-vb[class] .vb-var button{font-size:12.5px;font-weight:600;color:var(--navy)!important;background:#fff!important;border:1.5px solid var(--border)!important;border-radius:999px!important;padding:7px 13px!important;cursor:pointer;transition:all .13s}
.kmk-vb[class] .vb-var button.on{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
/* aantal-stepper op ruimtekaarten */
.vb-aantal{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px}
.vb-aantal label{color:var(--muted)}
.kmk-vb[class] .vb-aantal button{width:32px;height:32px;border-radius:9px!important;border:1.5px solid var(--border)!important;background:#fff!important;color:var(--navy)!important;font-size:16px;font-weight:700;cursor:pointer;padding:0!important;display:grid;place-items:center}
.vb-aantal b{font-family:var(--f-head);min-width:20px;text-align:center;color:var(--navy)}