:root{font-family:'Segoe UI',Arial,sans-serif;color:#1e2925;background:#f4f4f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}a{color:inherit}.top{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,24px);background:#14231e;color:#fff}.brand{display:flex;gap:12px;align-items:center;font-weight:800}.brand-logo{width:54px;height:54px;object-fit:cover;border-radius:10px;display:block}.brand-name{font-size:18px;letter-spacing:.02em;color:#fff}.top-link{text-decoration:none;font-size:13px;color:#e5d1b6}.layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);gap:30px;max-width:1660px;margin:0 auto;padding:38px 4vw 64px}.visual{min-width:0;position:sticky;top:24px;align-self:start}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:800;color:#ad7541}.visual h1{font:800 clamp(34px,3.8vw,61px)/1.1 Manrope,Arial,sans-serif;letter-spacing:-.05em;margin:14px 0}.visual h1 em{font-style:normal;color:#b18453}.intro{max-width:600px;line-height:1.7;color:#67716c;margin-bottom:26px}.stage{position:relative;height:min(55vw,565px);min-height:360px;overflow:hidden;border-radius:19px;background:radial-gradient(circle at 50% 28%,#f9f7f1,#e4e5df 75%);box-shadow:0 18px 45px #1b2b2112}.stage canvas{width:100%;height:100%;display:block;touch-action:none}.stage-top,.stage-bottom{position:absolute;display:flex;justify-content:space-between;align-items:center;gap:10px;left:20px;right:20px;pointer-events:none}.stage-top{top:20px}.stage-bottom{bottom:18px;color:#52605a;font-size:11px}.stage-top span{background:#fffffff0;border-radius:100px;padding:9px 13px;font-size:11px;font-weight:700;box-shadow:0 3px 14px #00000008}.stage-top .live-pill{color:#2f7b53}.stage-bottom button{pointer-events:auto;border:1px solid #d8ddd6;background:#ffffffdf;border-radius:100px;padding:9px 13px;color:#324239}.stage-loading{position:absolute;inset:0;display:grid;place-items:center;color:#52605a;font-size:14px}.notice{margin-top:13px;font-size:12px;color:#788079}.panel{background:white;border-radius:19px;box-shadow:0 15px 45px #1d33200d;padding:27px 30px;align-self:start}.panel-title span{font-size:11px;color:#a57845;letter-spacing:.2em;font-weight:800}.panel h2{font:800 25px 'Segoe UI',Arial,sans-serif;letter-spacing:-.04em;margin:8px 0 14px}.section{border-top:1px solid #e9ece8;padding:23px 0}.section h3{display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 15px}.section h3 span{display:grid;place-items:center;width:27px;height:27px;background:#edf2ed;color:#467153;border-radius:50%;font-size:10px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice-grid.three{grid-template-columns:repeat(3,1fr)}.choice-grid button{border:1px solid #dfe4dc;border-radius:10px;padding:13px 8px;background:#fafbf9;text-align:center;font-weight:700;font-size:13px;color:#344039;transition:.12s}.choice-grid button small{display:block;color:#7b837b;font-weight:400;font-size:11px;margin-top:4px}.choice-grid button.active{border:2px solid #286345;background:#eff6ef;color:#1e5336;padding:12px 7px}.hint{color:#818a81;font-size:12px;line-height:1.6;margin:10px 0 0}.module-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}.module-label{flex:0 0 64px;font-size:12px;font-weight:700;color:#56635a}.module-row select,.section>select{flex:1;width:100%;padding:11px 12px;background:#fafbf9;border:1px solid #dfe4dc;border-radius:9px;color:#273b2f}.field-label{display:block;font-size:12px;font-weight:700;margin:15px 0 7px}.check{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:17px}.check input{accent-color:#296343}.quote{border-radius:14px;background:#172b20;color:#fff;padding:24px;margin-top:4px}.quote-head{display:flex;justify-content:space-between;font-size:12px;color:#c2d2c7}.quote strong{display:block;font:800 clamp(34px,3vw,44px) 'Segoe UI',Arial,sans-serif;letter-spacing:-.06em;margin:12px 0 3px}.quote p{color:#c0cfc4;font-size:12px;line-height:1.6}.quote details{border-top:1px solid #ffffff29;margin:20px 0 0;padding:15px 0}.quote summary{cursor:pointer;font-size:12px}.price-line{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#d8e4da;font-size:12px}.primary,.secondary{width:100%;border-radius:9px;padding:14px;font-weight:800;font-size:13px}.primary{background:#d9a66a;color:#1b271d;border:0;margin-top:7px}.secondary{border:1px solid #6e8474;color:#f1f5ef;background:transparent;margin-top:9px}.fine{text-align:center;font-size:10px!important;margin-bottom:0}footer{border-top:1px solid #e1e6df;text-align:center;padding:25px;color:#6f796f;font-size:12px}@media(max-width:990px){.layout{grid-template-columns:1fr;gap:25px}.visual{position:static}.stage{height:460px}.panel{max-width:760px;width:100%;margin:auto}}@media(max-width:540px){.top{padding:0 17px}.top-link{font-size:11px}.layout{padding:24px 12px 42px}.visual h1{font-size:37px}.stage{height:350px;min-height:350px}.stage-bottom{font-size:9px;left:9px;right:9px}.stage-top{left:10px;right:10px}.panel{padding:19px 16px}.choice-grid.three button{font-size:11px;padding:11px 3px}}
/* Aanpassingen voor 1 t/m 4 vaste modulebreedtes en de nieuwe samenstelling. */
.choice-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:13px}
.choice-grid.four button{white-space:nowrap;padding-left:4px;padding-right:4px}
.section .hint.lead{margin:-4px 0 11px;color:#647266}
.composition{font-weight:650;font-size:13px!important;color:#edf5eb!important;line-height:1.75!important;margin:14px 0 10px}
.summary-line{margin:6px 0 12px!important;color:#d7e5d9!important}
.quote .fine{color:#b3c6b8!important;line-height:1.65!important;text-align:left}
.module-label{flex:0 0 99px}
.module-label small{display:block;font-size:10px;color:#7f8b80;font-weight:400;margin-top:3px}
 .egg-options{padding:16px;background:#f5f7f3;border:1px solid #e0e7df;border-radius:12px;margin:15px 0}.egg-options h4{font-size:13px;margin:0 0 12px}.egg-options[hidden]{display:none}.egg-options .check{line-height:1.5;margin-top:15px}
@media(max-width:540px){.choice-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.module-row{align-items:stretch;flex-direction:column;gap:4px}.module-label{flex:0 0 auto}.panel{padding:19px 16px}}

/* V29: compactere, bredere opmaak voor de VDB-website.
   De 3D-constructie en prijsberekening blijven identiek aan V28. */
:root{background:#fff}
body{background:#fff}
.top{height:62px;padding-inline:clamp(18px,2.5vw,44px)}
.brand-logo{width:43px;height:43px}
.layout{max-width:1760px;width:100%;grid-template-columns:minmax(0,1.52fr) minmax(395px,1fr);gap:clamp(18px,2.1vw,34px);padding:clamp(16px,2vw,28px) clamp(14px,2.4vw,42px) 38px}
.visual{top:12px}
.visual h1{font-size:clamp(30px,2.85vw,48px);line-height:1.08;margin:7px 0 9px}
.eyebrow{font-size:10px}
.intro{margin:0 0 15px;line-height:1.45;font-size:14px}
.stage{height:clamp(385px,38vw,525px);min-height:0;border-radius:16px;box-shadow:0 12px 30px #1b2b2110}
.stage-top{top:14px;left:16px;right:16px}
.stage-bottom{bottom:12px;left:16px;right:16px}
.notice{margin-top:8px;line-height:1.45}
.panel{padding:20px 23px;border:1px solid #eff0ea;box-shadow:0 10px 30px #1d33200a}
.panel h2{font-size:23px;margin:5px 0 9px}
.section{padding:16px 0}
.section h3{margin-bottom:12px}
.choice-grid button{padding-top:11px;padding-bottom:11px}
.choice-grid button.active{padding-top:10px;padding-bottom:10px}
.egg-options{padding:13px;margin:11px 0}
.quote{padding:19px}
/* Als de configurator in Jouwweb staat, voorkomen we dubbele site-header en footer. */
body.embedded .top,body.embedded footer{display:none}
body.embedded .layout{max-width:none;padding:14px clamp(12px,2vw,28px) 26px}
body.embedded .visual h1{font-size:clamp(28px,2.4vw,40px)}
body.embedded .intro{margin-bottom:12px}
@media(max-width:1050px){
  .layout{grid-template-columns:1fr;gap:18px;padding:19px 18px 36px}
  .visual{position:static}
  .stage{height:clamp(355px,48vw,480px)}
  .panel{max-width:none;width:100%;margin:0}
  body.embedded .layout{padding:10px 12px 24px}
}
@media(max-width:540px){
  .top{height:60px}
  .layout{padding:15px 10px 25px}
  .visual h1,body.embedded .visual h1{font-size:32px}
  .intro{font-size:13px}
  .stage{height:230px;min-height:0}
  .stage-bottom{font-size:9px;left:9px;right:9px}
  .stage-top{left:10px;right:10px}
  .panel{padding:16px 14px}
  .choice-grid.three button{font-size:11px}
  body.embedded .layout{padding:8px 8px 20px}
}

/* V44: offerte via e-mail, zonder extern mailprogramma. */
.email-form{margin-top:10px;padding:14px;border:1px solid #ffffff29;border-radius:10px;background:#102219}
.email-form[hidden]{display:none}
.email-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.email-form label{display:block;color:#dbe8dd;font-size:11px;font-weight:700;margin-top:9px}
.email-form input,.email-form textarea{display:block;width:100%;margin-top:5px;padding:10px 11px;border:1px solid #6e8474;border-radius:8px;background:#fff;color:#1e2925;font:inherit;font-size:13px}
.email-form textarea{resize:vertical;min-height:74px}
.email-form .primary{margin-top:12px}
.email-status{margin:9px 0 0!important;color:#e5d1b6!important;text-align:center;font-size:11px!important}
@media(max-width:540px){.email-grid{grid-template-columns:1fr}}

/* V107: afzonderlijk selecteerbare klapvleugels */
.wing-options .check{margin-top:10px;color:#394b40}
.wing-options[hidden]{display:none}
/* V102: extra tussenplank als losse optie onder een gewone kastdeur. */
.module-block{margin-bottom:11px}
.module-block .module-row{margin-bottom:0}
.module-extra{margin:7px 0 0 111px;color:#56635a;font-size:12px}
@media(max-width:540px){.module-extra{margin-left:0;margin-top:7px}}