.ontwerp { border:1px solid var(--lijn); border-radius:16px; background:#fff; overflow:hidden; margin:18px 0; color:var(--inkt); }
.ontwerp-kop { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--lijn); }
.ontwerp-kop h3 { margin:0; font-size:18px; }
.ontwerp-badge { font-size:var(--t-fijn); font-weight:600; padding:5px 9px; border-radius:20px; background:#e9f1f4; color:#24495a; }
.ontwerp-beeld { padding:16px; background:#f3f6f5; }
.ontwerp-beeld svg { display:block; width:100%; height:auto; max-height:400px; }
.ontwerp-beeld p { margin:10px 0 0; font-size:var(--t-fijn); line-height:1.5; color:#49616a; }
.ontwerp-velden { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:18px; }
.ontwerp-veld { min-width:0; }
.ontwerp-veld label, .ontwerp-veld legend { display:block; margin-bottom:7px; color:var(--inkt); font-size:var(--t-klein); font-weight:600; }
.ontwerp-veld input[type=number], .ontwerp-veld select { min-height:44px; width:100%; box-sizing:border-box; border:1px solid #9eafba; background:#fff; color:var(--inkt); border-radius:8px; padding:9px 12px; font:inherit; }
.ontwerp-veld input[type=range] { width:100%; min-height:44px; accent-color:var(--merk); margin:0; cursor:pointer; }
.ontwerp-veld fieldset { border:0; padding:0; margin:0; min-width:0; }
.ontwerp-kleuren { display:flex; flex-wrap:wrap; gap:7px; }
.ontwerp-kleuren button { min-height:44px; padding:7px 9px; display:flex; align-items:center; gap:6px; border:1px solid #adbbc4; border-radius:8px; color:var(--inkt); background:#fff; cursor:pointer; font:inherit; font-size:var(--t-fijn); }
.ontwerp-kleuren button[aria-pressed=true] { outline:2px solid var(--merk); outline-offset:1px; }
.ontwerp-kleuren i { width:16px; height:16px; border-radius:50%; border:1px solid #788993; background:var(--staal); }
/* Binnenkant in dezelfde kleur (K1, 28 sep 2026): een vinkje van 44 px hoog. */
.ontwerp-veld .ontwerp-binnen { display:flex; align-items:center; gap:9px; min-height:44px; margin:8px 0 0; font-weight:500; cursor:pointer; }
.ontwerp-veld .ontwerp-binnen[hidden] { display:none; }
.ontwerp-binnen input { flex:none; width:18px; height:18px; margin:0; accent-color:var(--merk); }
.ontwerp-noot { grid-column:1/-1; margin:0; font-size:var(--t-fijn); line-height:1.55; color:#49616a; }
.ontwerp-aanpassen { color:var(--merk); border:0; background:none; padding:7px 0; min-height:44px; text-decoration:underline; font:inherit; font-size:var(--t-fijn); cursor:pointer; }
.ontwerp button:focus-visible, .ontwerp input:focus-visible, .ontwerp select:focus-visible, .tabelwrap:focus-visible { outline:3px solid var(--merk); outline-offset:3px; }
.ontwerp-dak-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); gap:24px; margin-top:24px; align-items:start; }
.ontwerp-dak-layout .ontwerp { margin:0; }
.ontwerp-prijs { border-radius:16px; background:var(--nacht-diep); color:#fff; padding:26px; }
.ontwerp-prijs h3, .ontwerp-prijs p { color:inherit; }
.ontwerp-prijs .sub { color:#cbd8e2; }
.ontwerp-prijs #dkPrijs { font-family:var(--display); font-size:38px; font-weight:750; margin:8px 0; }
.ontwerp-prijs .stepper { background:#fff; width:max-content; max-width:100%; }
.ontwerp-status { grid-column:1/-1; font-size:var(--t-fijn); color:#49616a; margin:0; }
.ontwerp-uitklap { margin-top:16px; }
.ontwerp-uitklap > summary { font-size:var(--t-klein); }
.ontwerp-kiezen { display:block; margin-top:16px; font-size:var(--t-klein); }
.ontwerp-kiezen select { display:block; width:100%; margin-top:7px; padding:10px 12px; min-height:44px; border:1px solid #9eafba; border-radius:8px; background:#fff; color:var(--inkt); font:inherit; }
.maandlasten-cta { font-size:var(--t-klein); line-height:1.6; margin:18px 0 0; padding-top:15px; border-top:1px solid currentColor; border-color:color-mix(in srgb,currentColor 18%,transparent); }
.maandlasten-cta a { color:inherit; font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.formulier .maandlasten-wens { display:flex; align-items:center; min-height:44px; gap:10px; margin:18px 0; font-size:var(--t-klein); line-height:1.5; cursor:pointer; }
.formulier .maandlasten-wens input { flex:none; width:18px; height:18px; min-height:0; margin:2px 0 0; padding:0; accent-color:var(--warm); }
/* De betaalkeuze (28 sep 2026; woorden PP7b 29 sep): "Betaalwijze" met
   "Uit eigen middelen" of "Met een lening", twee rondjes. Alleen de vraag,
   geen rente of bedrag. */
.formulier .betaalwens { border:0; padding:0; margin:18px 0; min-width:0; }
.formulier .betaalwens legend { font-size:var(--t-klein); font-weight:600; margin:0 0 4px; padding:0; }
.formulier .betaalwens .maandlasten-wens { margin:4px 0; }
@media (max-width:700px) { .ontwerp-dak-layout { grid-template-columns:1fr; } .ontwerp-velden { gap:14px; padding:14px; } .ontwerp-beeld { padding:10px; } .ontwerp-kop { padding:14px; } }
@media (max-width:390px) { .ontwerp-velden { grid-template-columns:1fr; } }
@media print { .ontwerp-velden input[type=range], .ontwerp-kleuren { display:none; } .ontwerp { break-inside:avoid; } }