/* ── STILT moduleconfigurator — opmaak in stilt.nl-huisstijl (zelfde tokens als de schuttingconfigurator) ── */
.stmc{--g:#074238;--g2:#2B5F4C;--g3:#92B284;--o:#E66025;--o2:#cf5219;--creme:#FFF9EF;--zand:#F1ECE2;--lijn:#E2DBCD;--tekst:#12120D;--grijs:#6B6B63;--rood:#B3261E;
--kop:"Elizeth Condensed Medium","Roboto Condensed","Arial Narrow",sans-serif;
--sub:"Gamay Heading Semi bold","Gamay Body",system-ui,sans-serif;
--body:"Gamay Body",system-ui,-apple-system,"Segoe UI",sans-serif;
font-family:var(--body);color:var(--tekst);font-size:16px;line-height:1.55;background:#fff;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.stmc *,.stmc *::before,.stmc *::after{box-sizing:inherit}
.stmc img{max-width:100%;display:block}
.stmc button{font-family:inherit}
.stmc-wrap{max-width:1320px;margin:0 auto;padding:0 20px 90px}
.stmc-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* kop */
.stmc-kop{padding:28px 0 16px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:flex-end;justify-content:space-between}
.stmc-kop h1{font-family:var(--kop);color:var(--g);font-size:52px;line-height:.95;letter-spacing:1px;margin:0 0 8px;text-transform:uppercase}
.stmc-kop p{margin:0;max-width:640px;color:#3C3C35}
.stmc-trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--grijs);align-items:center}
.stmc-trust b{color:var(--o);letter-spacing:2px;font-weight:400}
@media(max-width:600px){.stmc-kop h1{font-size:38px}}

/* raster: 3D groot bovenaan/rechts, stappen links */
.stmc-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);gap:32px;align-items:start}
.stmc-links{min-width:0}
.stmc-rechts{position:sticky;top:16px;min-width:0}
@media(max-width:1000px){.stmc-grid{grid-template-columns:minmax(0,1fr);gap:18px}.stmc-rechts{position:static;order:-1}}

/* 3D-paneel */
.stmc-paneel{border:1px solid var(--lijn);background:#fff}
.stmc-3d{position:relative;height:460px;background:radial-gradient(ellipse at 50% 35%,#FFFFFF 0,#F6F6F4 55%,#E9E8E4 100%);overflow:hidden;cursor:grab}
.stmc-3d:active{cursor:grabbing}
.stmc-3d canvas{width:100%!important;height:100%!important}
@media(max-width:1000px){.stmc-3d{height:min(58vw,420px);min-height:280px}}
.stmc-labels{position:absolute;inset:0;pointer-events:none}
.stmc-label{position:absolute;left:0;top:0;background:rgba(255,255,255,.92);color:var(--g);font-family:var(--sub);font-size:12px;padding:2px 7px;border:1px solid var(--lijn);white-space:nowrap;transition:opacity .2s}
.stmc-3d-knoppen{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.stmc-3d-knoppen button,.stmc-3d-hint{background:rgba(255,255,255,.92);border:1px solid var(--lijn);color:var(--g);font-family:var(--sub);font-size:12px;padding:6px 9px;cursor:pointer;border-radius:0;line-height:1;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:6px}
.stmc-3d-knoppen button:hover,.stmc-3d-knoppen button[aria-pressed="true"]{background:var(--g);color:#fff;border-color:var(--g)}
.stmc-3d-hint{position:absolute;left:10px;bottom:10px;pointer-events:none;color:var(--grijs)}
.stmc-3d-laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--grijs);font-size:14px}
.stmc-3d-modules{position:absolute;left:10px;top:10px;display:flex;gap:4px;flex-wrap:wrap;max-width:60%}
.stmc-3d-modules button{background:rgba(255,255,255,.92);border:1px solid var(--lijn);color:var(--g);font-family:var(--sub);font-size:12px;width:26px;height:26px;padding:0;cursor:pointer;border-radius:50%;line-height:1}
.stmc-3d-modules button[aria-pressed="true"]{background:var(--o);border-color:var(--o);color:#fff}

/* totaal onder het 3D-paneel */
.stmc-totaal{padding:14px 18px;border-top:1px solid var(--lijn);display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center}
.stmc-totaal-naam{font-family:var(--sub);font-size:15px;color:var(--g)}
.stmc-totaal-maten{font-size:13px;color:var(--grijs)}
.stmc-totaal-prijs{font-family:var(--kop);font-size:34px;color:var(--g);line-height:1;text-align:right;letter-spacing:.5px}
.stmc-totaal-sub{font-size:12px;color:var(--grijs);text-align:right;grid-column:2}
.stmc-totaal-sub .stmc-pill{margin-left:4px}
.stmc-pill{display:inline-block;background:var(--zand);color:var(--g2);font-family:var(--sub);font-size:11px;padding:2px 7px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}
.stmc-pill.oranje{background:var(--o);color:#fff}
.stmc-knoppen{padding:0 18px 16px;display:flex;gap:10px;flex-wrap:wrap}
.stmc-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border:2px solid var(--o);background:var(--o);color:#fff;font-family:var(--sub);font-size:15px;cursor:pointer;border-radius:0;text-transform:none;letter-spacing:0;line-height:1.2;text-decoration:none;flex:1 1 auto}
.stmc-knop:hover{background:var(--o2);border-color:var(--o2);color:#fff}
.stmc-knop.licht{background:#fff;color:var(--g);border-color:var(--g)}
.stmc-knop.licht:hover{background:var(--g);color:#fff}
.stmc-knop[disabled]{opacity:.5;cursor:not-allowed}
.stmc-knop-klein{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:2px solid var(--g);background:#fff;color:var(--g);font-family:var(--sub);font-size:14px;cursor:pointer;border-radius:0;text-transform:none;letter-spacing:0;line-height:1.2;text-decoration:none}
.stmc-knop-klein:hover{background:var(--g);color:#fff}
.stmc-knop-klein.oranje{border-color:var(--o);background:var(--o);color:#fff}
.stmc-knop-klein.oranje:hover{background:var(--o2);border-color:var(--o2)}

/* stappen */
.stmc-stappen{border:1px solid var(--lijn);background:var(--creme)}
.stmc-stap{border-bottom:1px solid var(--lijn)}
.stmc-stap:last-child{border-bottom:0}
.stmc-stap-kop{width:100%;display:flex;align-items:center;gap:14px;padding:15px 20px;background:none;border:0;cursor:pointer;text-align:left;color:var(--tekst);border-radius:0;box-shadow:none;text-transform:none;letter-spacing:0;line-height:1.3;font-size:16px}
.stmc-stap-kop:hover,.stmc-stap-kop:focus{background:#fff;border:0;color:var(--tekst);outline:none}
.stmc-stap-kop:focus-visible{outline:2px solid var(--o);outline-offset:-2px}
.stmc-nr{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--g3);color:var(--g);display:flex;align-items:center;justify-content:center;font-family:var(--sub);font-size:14px;background:#fff}
.stmc-stap[data-klaar="1"] .stmc-nr{background:var(--g);border-color:var(--g);color:#fff}
.stmc-stap-tekst{flex:1 1 auto;min-width:0}
.stmc-stap-tekst strong{display:block;font-family:var(--sub);font-size:17px;color:var(--g);text-transform:none}
.stmc-stap-tekst span{display:block;font-size:13px;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stmc-pijl{flex:0 0 auto;transition:transform .25s;color:var(--g)}
.stmc-stap[data-open="1"] .stmc-pijl{transform:rotate(180deg)}
.stmc-stap-body{display:none;padding:2px 20px 24px}
.stmc-stap[data-open="1"] .stmc-stap-body{display:block}
.stmc-hint{font-size:13.5px;color:var(--grijs);margin:0 0 14px}
.stmc-sub{font-family:var(--sub);font-size:14px;color:var(--g);margin:20px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.stmc-sub:first-child{margin-top:0}
.stmc-volgende{margin-top:18px;display:flex;justify-content:flex-end}

/* keuzekaarten */
.stmc-kaarten{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.stmc-kaarten.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stmc-kaarten.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stmc-kaarten.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:640px){.stmc-kaarten.k3,.stmc-kaarten.k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stmc-kaart{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid var(--lijn);padding:12px;cursor:pointer;transition:border-color .18s,box-shadow .18s;text-align:left;font:inherit;color:inherit;border-radius:0;width:100%;line-height:1.4}
.stmc-kaart:hover{border-color:var(--g3);box-shadow:0 4px 16px rgba(7,66,56,.08)}
.stmc-kaart[aria-pressed="true"]{border-color:var(--g);box-shadow:0 4px 16px rgba(7,66,56,.12)}
.stmc-kaart:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.stmc-kaart[disabled]{opacity:.45;cursor:not-allowed}
.stmc-fig{width:100%;height:78px;background:var(--zand);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.stmc-fig svg{width:100%;height:100%}
.stmc-fig.foto{padding:0;height:110px}
.stmc-fig.foto img{width:100%;height:100%;object-fit:cover}
.stmc-fig.staal{padding:0;height:52px}
.stmc-kaart-naam{display:block;font-family:var(--sub);font-size:15px;line-height:1.25;color:var(--g)}
.stmc-kaart-uitleg{display:block;font-size:12.5px;color:var(--grijs);line-height:1.4;margin-top:2px}
.stmc-kaart-prijs{margin-top:auto;font-family:var(--sub);font-size:14px;color:var(--o);padding-top:2px}
.stmc-kaart-prijs.rustig{color:var(--g2)}
.stmc-vink{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;display:none;align-items:center;justify-content:center}
.stmc-kaart[aria-pressed="true"] .stmc-vink{display:flex}
.stmc-badge{position:absolute;top:8px;left:8px;background:var(--o);color:#fff;font-family:var(--sub);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;z-index:1}
.stmc-badge.groen{background:var(--g)}
.stmc-kaarten.lijst .stmc-kaart{flex-direction:row;align-items:center;gap:14px;padding:10px 14px}
.stmc-kaarten.lijst .stmc-fig{flex:0 0 54px;width:54px;height:54px;padding:4px}
.stmc-kaarten.lijst .stmc-kaart-tekst{flex:1 1 auto;min-width:0}
.stmc-kaarten.lijst .stmc-kaart-prijs{margin-top:0;flex:0 0 auto;white-space:nowrap}
.stmc-kaarten.lijst .stmc-vink{top:50%;right:auto;left:-9px;transform:translateY(-50%)}
.stmc-schakel{display:inline-flex;border:2px solid var(--lijn);background:#fff;flex-wrap:wrap}
.stmc-schakel button{border:0;background:none;padding:9px 14px;font-family:var(--sub);font-size:14px;color:var(--g);cursor:pointer;border-radius:0;text-transform:none;letter-spacing:0;line-height:1.2}
.stmc-schakel button[aria-pressed="true"]{background:var(--g);color:#fff}
.stmc-maatveld{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--lijn);background:#fff;padding:0 12px 0 0}
.stmc-maatveld input{width:96px;min-height:44px;border:0;padding:8px 12px;font:inherit;font-size:16px;color:var(--g);background:none}
.stmc-maatveld span{font-family:var(--sub);font-size:14px;color:var(--g)}
.stmc-schakel button:hover{background:var(--zand)}
.stmc-schakel button[aria-pressed="true"]:hover{background:var(--g)}
.stmc-staal{display:block;width:100%;height:100%;background:var(--zand)}

/* module-indeling (stap 2) */
.stmc-indeling{display:grid;gap:8px;margin-bottom:14px}
.stmc-mod{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;border:2px solid var(--lijn);padding:8px 10px;cursor:pointer}
.stmc-mod[data-actief="1"]{border-color:var(--o)}
.stmc-mod:hover{border-color:var(--g3)}
.stmc-mod-nr{width:26px;height:26px;border-radius:50%;background:var(--g);color:#fff;font-family:var(--sub);font-size:13px;display:flex;align-items:center;justify-content:center}
.stmc-mod[data-actief="1"] .stmc-mod-nr{background:var(--o)}
.stmc-mod-fig{width:44px;height:36px;background:var(--zand);padding:2px}
.stmc-mod-fig svg{width:100%;height:100%}
.stmc-mod-tekst{min-width:0}
.stmc-mod-tekst strong{display:block;font-family:var(--sub);font-size:14px;color:var(--g);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stmc-mod-tekst span{display:block;font-size:12px;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stmc-mod-acties{display:flex;gap:4px}
.stmc-mod-acties button{width:30px;height:30px;border:1px solid var(--lijn);background:#fff;color:var(--g);cursor:pointer;border-radius:0;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.stmc-mod-acties button:hover{background:var(--g);color:#fff;border-color:var(--g)}
.stmc-mod-acties button[disabled]{opacity:.3;cursor:not-allowed}
.stmc-mod-acties button.rood:hover{background:var(--rood);border-color:var(--rood)}
.stmc-mod-opties{background:#fff;border:2px solid var(--o);border-top:0;padding:12px 14px;margin-top:-8px;display:grid;gap:8px}
.stmc-lengte-balk{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--grijs);margin:6px 0 12px;gap:10px;flex-wrap:wrap}
.stmc-lengte-balk b{font-family:var(--sub);color:var(--g);font-weight:400;font-size:15px}
.stmc-lengte-balk .stmc-pill{margin-left:6px}

/* vinkjes-opties */
.stmc-opties{display:grid;gap:8px}
.stmc-optie{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--lijn);padding:11px 14px;cursor:pointer;transition:border-color .18s}
.stmc-optie.uit{cursor:default;opacity:.7;background:var(--zand,#f4efe6)}
.stmc-optie:hover{border-color:var(--g3)}
.stmc-optie[data-aan="1"]{border-color:var(--g)}
.stmc-optie input{margin:4px 0 0;accent-color:var(--g);flex:0 0 auto;width:18px;height:18px}
.stmc-optie-tekst{flex:1 1 auto;min-width:0}
.stmc-optie-tekst strong{display:block;font-family:var(--sub);font-size:15px;color:var(--g);font-weight:400}
.stmc-optie-tekst span{display:block;font-size:12.5px;color:var(--grijs);line-height:1.4}
.stmc-optie-prijs{flex:0 0 auto;font-family:var(--sub);font-size:14px;color:var(--o);white-space:nowrap}

/* overzicht */
.stmc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.stmc-tabs button{border:1.5px solid var(--lijn);background:#fff;color:var(--g);font-family:var(--sub);font-size:13px;padding:6px 12px;cursor:pointer;border-radius:0;text-transform:none;letter-spacing:0;line-height:1.2}
.stmc-tabs button[aria-pressed="true"]{background:var(--g);border-color:var(--g);color:#fff}
.stmc-tekening{background:#fff;border:2px solid var(--lijn);padding:10px}
.stmc-tekening svg{width:100%;height:auto;display:block}
.stmc-tabel{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.stmc-tabel th,.stmc-tabel td{padding:7px 10px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.stmc-tabel th{font-family:var(--sub);font-weight:400;color:var(--g);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;background:var(--zand)}
.stmc-tabel td.r,.stmc-tabel th.r{text-align:right;white-space:nowrap}
.stmc-tabel tr.totaal td{font-family:var(--sub);color:var(--g);font-size:16px;border-top:2px solid var(--g);border-bottom:0}
.stmc-tabel tr.groep td{background:var(--creme);font-family:var(--sub);color:var(--g2);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.stmc-tabel-wrap{overflow-x:auto;border:2px solid var(--lijn)}
.stmc-indicatief{font-size:12.5px;color:var(--grijs);margin:10px 0 0}
.stmc-melding{margin:10px 0 0;padding:10px 14px;background:var(--zand);border-left:3px solid var(--g);font-size:13.5px}
.stmc-melding.fout{border-color:var(--rood);background:#FBEDEB}
.stmc-melding.ok{border-color:var(--g);background:#EAF3EC}
.stmc-formulier{display:grid;gap:10px;margin-top:12px;background:#fff;border:2px solid var(--lijn);padding:14px}
.stmc-formulier label{font-family:var(--sub);font-size:13px;color:var(--g);display:grid;gap:4px}
.stmc-formulier input,.stmc-formulier textarea{font:inherit;font-size:15px;padding:9px 10px;border:1.5px solid var(--lijn);border-radius:0;width:100%;background:#fff;color:var(--tekst)}
.stmc-formulier input:focus,.stmc-formulier textarea:focus{outline:2px solid var(--o);outline-offset:-2px;border-color:var(--o)}
.stmc-formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.stmc-formulier .rij{grid-template-columns:1fr}}
/* aanvraagformulier (vaste opzet 4-10): Naam | Telefoon, E-mail breed, Postcode | Huisnummer; één kolom onder 480 px */
.stmc-velden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"naam tel" "email email" "adres adres" "straat straat";gap:10px}
.stmc-velden .v-naam{grid-area:naam}.stmc-velden .v-email{grid-area:email}.stmc-velden .v-tel{grid-area:tel}.stmc-velden .v-adres{grid-area:adres}.stmc-velden .v-straat{grid-area:straat}
.stmc-velden .v-straat:empty{display:none}
.stmc-pcnr,.stmc-straatplaats{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px}
.stmc-straatplaats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:2px}
.stmc-adres{margin:-2px 0 0;font-size:14px;color:var(--g)}
.stmc-adres.zoek{color:var(--grijs);font-size:13px;margin-bottom:8px}
.stmc-vraag{display:grid;gap:6px;margin-top:4px}
.stmc-vraag>span{font-family:var(--sub);font-size:13px;color:var(--g)}
.stmc-vraag .stmc-chips{gap:6px}
.stmc-formulier label.leeg{color:var(--rood)}
.stmc-formulier label.leeg input{border-color:var(--rood)}
.stmc-vraag.leeg>span{color:var(--rood)}
.stmc-vraag.leeg .stmc-chip{border-color:var(--rood)}
@media(max-width:479px){.stmc-velden{grid-template-columns:minmax(0,1fr);grid-template-areas:"naam" "email" "tel" "adres" "straat"}.stmc-straatplaats{grid-template-columns:minmax(0,1fr)}}
.stmc-deel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--grijs)}
.stmc-deel input{flex:1 1 220px;font-size:12.5px;padding:7px 9px;border:1.5px solid var(--lijn);border-radius:0;color:var(--grijs);background:#fff;min-width:0}

/* uitleg onderaan */
.stmc-uitleg{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--lijn);padding-top:28px}
@media(max-width:820px){.stmc-uitleg{grid-template-columns:minmax(0,1fr)}}
.stmc-uitleg h3{font-family:var(--kop);font-size:24px;color:var(--g);margin:0 0 8px;letter-spacing:.5px;text-transform:uppercase;line-height:1}
.stmc-uitleg p,.stmc-uitleg li{font-size:14px;color:#3C3C35;margin:0}
.stmc-uitleg ol,.stmc-uitleg ul{margin:0;padding-left:18px;display:grid;gap:4px}

/* mobiele onderbalk: prijs + volgende stap, altijd in beeld in het ontwerp-scherm (80 % van de bezoekers is mobiel) */
.stmc-balk{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--g);box-shadow:0 -6px 24px rgba(7,66,56,.12);padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));display:none;align-items:center;justify-content:space-between;gap:10px;z-index:60}
.stmc-balk>div{min-width:0}
.stmc-balk strong{display:block;font-family:var(--kop);font-size:24px;color:var(--g);line-height:1;white-space:nowrap}
.stmc-balk span{display:block;font-size:11.5px;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stmc-balk .stmc-knop-klein{min-height:48px;padding:10px 14px;font-size:15px;flex:0 0 auto;justify-content:center}
@media(max-width:1000px){.stmc[data-scherm="ontwerp"] .stmc-balk{display:flex}}

/* Kies-scherm (voorselectie + AI) */
.stmc-kies-intro{padding:8px 0 18px}
.stmc-eyebrow{display:block;font-family:var(--sub);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--o);margin-bottom:6px}
.stmc-kies-intro h2{font-family:var(--kop);font-size:40px;color:var(--g);margin:0 0 8px;line-height:1;text-transform:uppercase;letter-spacing:.5px}
.stmc-kies-intro p{margin:0;max-width:680px;color:#3C3C35}
.stmc-kies-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:28px;align-items:start}
@media(max-width:1000px){.stmc-kies-grid{grid-template-columns:minmax(0,1fr)}}
.stmc-blok{border:1px solid var(--lijn);background:var(--creme);padding:16px 18px;margin-bottom:12px}
.stmc-blok h3{font-family:var(--sub);font-size:16px;color:var(--g);margin:0 0 10px;font-weight:400}
.stmc-blok h3 small{display:block;font-family:var(--body);font-size:12.5px;color:var(--grijs);margin-top:2px}
.stmc-chips{display:flex;flex-wrap:wrap;gap:8px}
.stmc-chip{border:2px solid var(--lijn);background:#fff;color:var(--g);font-family:var(--sub);font-size:14px;padding:8px 14px;cursor:pointer;border-radius:0;line-height:1.2;text-transform:none;letter-spacing:0}
.stmc-chip:hover{border-color:var(--g3)}
.stmc-chip.aan{background:var(--g);border-color:var(--g);color:#fff}
.stmc-chip.klein{font-family:var(--body);font-size:12.5px;padding:6px 10px;color:#3C3C35}
.stmc-ai{border:2px dashed var(--g3);background:#fff}
.stmc-ai textarea{width:100%;font-family:var(--body);font-size:15px;padding:10px 12px;border:2px solid var(--lijn);border-radius:0;background:#fff;color:var(--tekst);margin-bottom:10px;resize:vertical}
.stmc-ai textarea:focus{outline:2px solid var(--o);outline-offset:-2px;border-color:var(--o)}
.stmc-kies-acties{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.stmc-kies-acties .stmc-knop{flex:0 0 auto;align-self:flex-start}
.stmc-kies-rechts h3{font-family:var(--kop);font-size:26px;color:var(--g);margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px;line-height:1}
.stmc-kies-rechts h3 small{font-family:var(--body);font-size:13px;color:var(--grijs);text-transform:none;letter-spacing:0;margin-left:8px}
.stmc-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:1px solid var(--lijn);background:#fff;padding:12px 14px;margin-bottom:12px}
@media(max-width:640px){.stmc-filters{grid-template-columns:minmax(0,1fr)}}
.stmc-filters label{display:grid;gap:4px;font-family:var(--sub);font-size:12.5px;color:var(--g)}
.stmc-filters label b{font-weight:400;color:var(--o)}
.stmc-filters select{font:inherit;font-size:13px;padding:6px 8px;border:1.5px solid var(--lijn);border-radius:0;background:#fff;color:var(--tekst)}
.stmc-filters input[type=range]{width:100%;accent-color:var(--o);margin:0}
.stmc-startpunten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:640px){.stmc-startpunten{grid-template-columns:minmax(0,1fr)}}
.stmc-startpunt{border:2px solid var(--lijn);background:#fff;display:flex;flex-direction:column}
.stmc-startpunt.past{border-color:var(--g)}
.stmc-thumb{background:radial-gradient(ellipse at 50% 35%,#FFFFFF 0,#F6F6F4 55%,#E9E8E4 100%);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;color:var(--grijs);font-family:var(--sub);overflow:hidden}
.stmc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stmc-startpunt-body{padding:12px 14px 14px;display:grid;gap:5px}
.stmc-startpunt-naam{font-family:var(--sub);font-size:16px;color:var(--g)}
.stmc-startpunt-maat{font-size:13px;color:var(--o);font-family:var(--sub)}
.stmc-startpunt-uitleg{font-size:12.5px;color:var(--grijs);line-height:1.4}
.stmc-startpunt .stmc-knop-klein{margin-top:6px;justify-self:start}
.stmc-terug{margin:0 0 12px}

.stmc [hidden]{display:none!important}

/* montageblok onderaan */
.stmc-montage{margin-top:36px;border:1px solid var(--lijn);background:var(--creme);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:0;align-items:stretch}
@media(max-width:820px){.stmc-montage{grid-template-columns:minmax(0,1fr)}}
.stmc-montage-tekst{padding:26px 28px}
.stmc-montage-tekst h3{font-family:var(--kop);font-size:32px;color:var(--g);margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px;line-height:1}
.stmc-montage-tekst p{margin:0 0 10px;font-size:14.5px;color:#3C3C35;max-width:60ch}
.stmc-montage-tekst ol{margin:0 0 10px;padding-left:20px;display:grid;gap:4px;font-size:14px;color:#3C3C35}
.stmc-montage-video{background:#EDE8DE;display:flex;align-items:center;justify-content:center;min-height:220px;padding:14px}
.stmc-montage-video iframe,.stmc-montage-video video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#EDE8DE}
.stmc-video-plaats{text-align:center;color:var(--grijs);font-family:var(--sub);display:grid;gap:4px}
.stmc-video-plaats small{font-family:var(--body);font-size:12.5px}

/* opslaan-met-deal */
.stmc-knop.stmc-deal{flex-direction:column;gap:2px;padding:15px 20px;text-align:center}
.stmc-knop.stmc-deal span{font-size:16px}
.stmc-knop.stmc-deal small{font-family:var(--body);font-size:12px;opacity:.9;font-weight:400}

/* ── advies marketingpartij (okt 2026): babystapjes, meest gekozen, uitleg-i, anchoring, mobiel-first ── */
.stmc-vanaf{font-family:var(--sub);color:var(--g);font-size:15px;flex-basis:100%}
.stmc[data-scherm="kies"] .stmc-vanaf{display:none}   /* het kies-scherm toont de vanafprijs al groot in de intro */
.stmc-vanaf strong{font-family:var(--kop);font-size:30px;color:var(--o);letter-spacing:.5px;font-weight:400;line-height:1;margin:0 2px}
.stmc-vanaf small{font-family:var(--body);font-size:12.5px;color:var(--grijs)}
.stmc-anker{font-family:var(--sub);color:var(--g);font-size:17px;margin:0 0 8px!important}
.stmc-anker b{font-family:var(--kop);font-size:34px;color:var(--o);font-weight:400;letter-spacing:.5px;line-height:1}
.stmc-anker small{font-family:var(--body);font-size:13px;color:var(--grijs)}
.stmc-startpunt-prijs{font-family:var(--sub);font-size:13px;color:var(--grijs)}
.stmc-startpunt-prijs b{font-family:var(--kop);font-size:24px;color:var(--o);font-weight:400;letter-spacing:.5px;line-height:1}
.stmc-startpunt-maat{color:var(--grijs)!important;font-family:var(--body)!important}
.stmc-stapteller{display:block;font-family:var(--sub);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--o);margin:0 0 10px}
.stmc-stapteller + .stmc-sub{margin-top:0}
.stmc-sub.klein{display:flex;align-items:center;gap:6px;margin-top:6px}
/* 'Meest gekozen' op de standaardkeuze */
.stmc-pop{position:absolute;top:-11px;left:10px;background:var(--o);color:#fff;font-family:var(--sub);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;line-height:1.5;z-index:2;white-space:nowrap}
.stmc-kaart.pop{border-color:var(--g3)}
.stmc-kaart.pop[aria-pressed="true"]{border-color:var(--g)}
.stmc-kaarten{padding-top:2px}
/* uitleg-i met voor- en nadelen */
.stmc-info{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--g);color:var(--g);background:#fff;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:help}
.stmc-info::after{content:"";position:absolute;inset:-9px}
.stmc-info:hover,.stmc-info:focus-visible{background:var(--g);color:#fff;outline:none}
.stmc-kaart.met-info .stmc-kaart-prijs{padding-right:32px}
.stmc-kaarten.lijst .stmc-info{position:relative;right:auto;bottom:auto;flex:0 0 26px}
.stmc-kaarten.lijst .stmc-kaart.met-info .stmc-kaart-prijs{padding-right:0}
.stmc-uitlegpop{position:fixed;right:24px;bottom:24px;z-index:70;width:min(380px,calc(100vw - 32px));background:#fff;border:2px solid var(--g);padding:14px 44px 14px 16px;box-shadow:0 12px 32px rgba(7,66,56,.2);font-size:13.5px;line-height:1.45;animation:stmc-op .25s ease-out}
@keyframes stmc-op{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stmc-uitlegpop{animation:none}}
.stmc-uitlegpop>b{display:block;font-family:var(--sub);font-weight:400;font-size:16px;color:var(--g);margin-bottom:6px}
.stmc-uitlegpop span{display:block;font-family:var(--sub);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.stmc-uitlegpop .voor span{color:var(--g2)}
.stmc-uitlegpop .tegen span{color:var(--o2)}
.stmc-uitlegpop ul{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.stmc-uitlegpop li{padding-left:18px;position:relative;color:#3C3C35}
.stmc-uitlegpop .voor li::before{content:"+";position:absolute;left:2px;color:var(--g2);font-weight:700}
.stmc-uitlegpop .tegen li::before{content:"–";position:absolute;left:2px;color:var(--o2);font-weight:700}
.stmc-uitlegpop .x{position:absolute;right:2px;top:2px;width:44px;height:44px;background:none;border:0;font-size:24px;line-height:1;color:var(--g);cursor:pointer;padding:0;border-radius:0}
/* babystapjes: "Meer opties (n)" */
.stmc-meer{margin-top:12px;border:1.5px dashed var(--lijn)}
.stmc-meer[data-open="1"]{border-style:solid;background:rgba(255,255,255,.55)}
.stmc-meer-kop{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:none;border:0;border-radius:0;cursor:pointer;font-family:var(--sub);font-size:14px;color:var(--g);text-align:left;text-transform:none;letter-spacing:0;line-height:1.3;box-shadow:none}
.stmc-meer-kop:hover,.stmc-meer-kop:focus{background:#fff;color:var(--g);border:0;outline:none}
.stmc-meer-kop:focus-visible{outline:2px solid var(--o);outline-offset:-2px}
.stmc-meer-kop small{font-family:var(--body);color:var(--grijs);font-size:13px}
.stmc-stap .stmc-meer .stmc-meer-kop .stmc-pijl{transform:none}
.stmc-stap .stmc-meer[data-open="1"]>.stmc-meer-kop .stmc-pijl{transform:rotate(180deg)}
.stmc-meer-body{padding:6px 14px 14px}
.stmc-meer-body>.stmc-sub:first-child{margin-top:4px}
/* stap 6: Hobson+1 en vaste prijs */
.stmc-vast{margin:0;font-size:14px;color:var(--grijs)}
.stmc-vast b{font-family:var(--kop);font-size:26px;color:var(--g);font-weight:400;letter-spacing:.5px}
.stmc-vast span{display:block;font-family:var(--sub);color:var(--o2)}
.stmc-hobson .stmc-knop{min-height:50px}
.stmc-hobson .stmc-knop.licht{flex:0 1 auto;border-width:1.5px;font-size:14px}
.stmc-offerte-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.stmc-indicatief a{color:var(--g)}
/* teamcockpit (?admin=1) */
.stmc-team{position:fixed;right:16px;bottom:16px;z-index:65;min-height:44px;padding:10px 16px;background:var(--g);color:#fff;border:0;border-radius:0;font-family:var(--sub);font-size:14px;cursor:pointer;box-shadow:0 6px 20px rgba(7,66,56,.25)}
.stmc-team:hover{background:var(--g2);color:#fff}

/* tablet en telefoon: onderbalk neemt "Volgende" en "Offerte" over, tikdoelen minstens 44 px */
@media(max-width:1000px){
.stmc-volgende,.stmc-alleen-breed{display:none}
/* 3D: aanzichtknoppen als rij ónder het model (tikbaar), modulebolletjes en muis-hint weg */
.stmc-3d-canvas{inset:0 0 56px 0!important}
.stmc-3d-hint,.stmc-3d-modules{display:none}
.stmc-3d-knoppen{flex-direction:row;top:auto;bottom:8px;left:8px;right:8px;gap:4px}
.stmc-3d-knoppen button{flex:1 1 0;min-height:44px;justify-content:center;font-size:13px;padding:6px 4px}
.stmc-uitlegpop{left:16px;right:16px;bottom:16px;width:auto}
.stmc[data-scherm="ontwerp"] .stmc-uitlegpop{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.stmc[data-scherm="ontwerp"] .stmc-team{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.stmc-chip,.stmc-schakel button,.stmc-tabs button,.stmc-knop-klein{min-height:44px}
.stmc-chip.klein{min-height:44px}
.stmc-mod-acties button{width:44px;height:44px}
.stmc-filters select,.stmc-filters input[type=range]{min-height:44px}
.stmc-formulier input,.stmc-formulier textarea,.stmc-ai textarea{font-size:16px;min-height:46px}
.stmc-deel input{min-height:44px;font-size:14px}
.stmc-optie{padding:13px 14px}
.stmc-optie input{width:22px;height:22px;margin-top:2px}
}
/* telefoon: kaarten onder elkaar als rij (icoon links, prijs rechts), compacte kop, 3D bovenaan met beperkte hoogte */
@media(max-width:640px){
.stmc-wrap{padding:0 16px 96px}
.stmc-kop{padding:18px 0 10px}
.stmc[data-scherm="ontwerp"] .stmc-kop{padding:12px 0 8px}
.stmc[data-scherm="ontwerp"] .stmc-kop h1{font-size:28px;margin:0}
.stmc[data-scherm="ontwerp"] .stmc-kop p,.stmc[data-scherm="ontwerp"] .stmc-trust{display:none}
.stmc-kies-intro h2{font-size:32px}
.stmc-3d{height:min(78vw,320px);min-height:260px}
.stmc-totaal{padding:10px 14px}
.stmc-totaal-prijs{font-size:28px}
.stmc-knoppen{padding:0 14px 12px}
.stmc-knop.stmc-deal{padding:10px 14px}
.stmc-knop.stmc-deal span{font-size:15px}
.stmc-stap-kop{padding:13px 14px;gap:12px;min-height:56px}
.stmc-stap-body{padding:2px 14px 20px}
.stmc-blok{padding:14px}
.stmc-kaarten.k2,.stmc-kaarten.k3,.stmc-kaarten.k4{grid-template-columns:minmax(0,1fr)}
.stmc-kaarten .stmc-kaart{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;min-height:64px}
.stmc-kaarten .stmc-fig,.stmc-kaarten .stmc-fig.foto,.stmc-kaarten .stmc-fig.staal{flex:0 0 54px;width:54px;height:54px;padding:3px}
.stmc-kaarten .stmc-fig.foto,.stmc-kaarten .stmc-fig.staal{padding:0}
.stmc-kaarten .stmc-kaart-tekst{flex:1 1 auto;min-width:0}
.stmc-kaarten .stmc-kaart-prijs{margin-top:0;flex:0 0 auto;text-align:right;max-width:34%;font-size:13.5px;padding:0!important;white-space:normal!important}
.stmc-kaart-naam,.stmc-kaart-uitleg{overflow-wrap:anywhere}
.stmc-kaarten .stmc-info{position:relative;right:auto;bottom:auto;flex:0 0 26px}
.stmc-kaarten .stmc-badge{top:-11px;left:auto;right:10px}
.stmc-kaarten .stmc-vink{top:50%;right:auto;left:-9px;transform:translateY(-50%)}
.stmc-mod{grid-template-columns:auto 44px minmax(0,1fr);row-gap:6px}
.stmc-mod-acties{grid-column:1/-1;justify-content:flex-end;gap:6px}
.stmc-mod-opties{padding:12px 10px}
.stmc-mod-opties .stmc-schakel{display:flex}
.stmc-mod-opties .stmc-schakel button{flex:1 1 auto}
.stmc-meer-body{padding:6px 10px 12px}
.stmc-hobson .stmc-knop,.stmc-hobson .stmc-knop.licht{flex:1 1 100%}
.stmc-montage-tekst{padding:20px 16px}
.stmc-tabs button{flex:1 1 auto}
}
/* smalle telefoons (360 px): de modulelijst en het optieblok mogen nooit breder worden dan het scherm */
.stmc-indeling,.stmc-mod-opties,.stmc-opties{grid-template-columns:minmax(0,1fr)}
/* veelgestelde vragen onder een optie (kamado-pootjes) */
.stmc .stmc-faq { margin: -4px 0 10px; font-size: .92rem; }
.stmc .stmc-faq summary { cursor: pointer; font-weight: 600; color: var(--stmc-groen, #074238); padding: 6px 0; }
.stmc .stmc-faq dl { margin: 4px 0 0; } .stmc .stmc-faq dt { font-weight: 600; margin-top: 8px; } .stmc .stmc-faq dd { margin: 2px 0 0; }
.stmc .stmc-let { color: #8a5a00; font-weight: 600; }
/* AR-venster */
.stmc .stmc-ar { position: fixed; inset: 0; z-index: 100003; background: rgba(7, 66, 56, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.stmc .stmc-ar-kaart { background: #fff9ef; border-radius: 14px; padding: 18px; width: min(560px, 100%); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.stmc .stmc-ar-qr { display: flex; justify-content: center; padding: 10px; background: #fff; border-radius: 12px; }

/* link uit de offertemail (?toon=scroll|pdf): vanaf de eerste pixel een laadscherm, niet eerst de configurator (Stijn 5-10) */
html.stmc-direkt body{overflow:hidden}
html.stmc-direkt::after{content:'Je offerte wordt geladen…';position:fixed;inset:0;z-index:99999;background:#F3EFE6;display:flex;align-items:center;justify-content:center;color:#074238;font:600 17px "Gamay Heading Semi bold","Gamay Body",system-ui,sans-serif;letter-spacing:.03em;animation:stmc-laden 1.4s ease-in-out infinite}
@keyframes stmc-laden{50%{color:rgba(7,66,56,.45)}}

/* het thema van stilt.nl zet op elke knop hoofdletters en white-space:nowrap: lange knoppen (o.a. "Bewaar je ontwerp…")
   liepen op de telefoon buiten beeld en maakten de pagina horizontaal scrollbaar (Stijn 6-10, live gemeten op 390 px) */
.stmc button,.stmc .stmc-knop,.stmc .stmc-knop-klein{white-space:normal;text-transform:none;letter-spacing:normal;max-width:100%}

/* het thema van stilt.nl maakt de achtergrond van knoppen doorzichtig: "Offerte aanvragen" en "Bewaar je ontwerp" waren
   daardoor geen herkenbare knop meer (Stijn 6-10). Kleuren hier vastzetten. */
.stmc .stmc-knop{background:var(--o)!important;border-color:var(--o)!important;color:#fff!important}
.stmc .stmc-knop:hover{background:var(--o2)!important;border-color:var(--o2)!important}
.stmc .stmc-knop.licht{background:#fff!important;border-color:var(--g)!important;color:var(--g)!important}
.stmc .stmc-knop.licht:hover{background:var(--g)!important;color:#fff!important}
.stmc .stmc-knop-klein{background:#fff!important;border-color:var(--g)!important;color:var(--g)!important}
.stmc .stmc-knop-klein:hover{background:var(--g)!important;color:#fff!important}
.stmc .stmc-knop-klein.oranje{background:var(--o)!important;border-color:var(--o)!important;color:#fff!important}

/* verstuurscherm over het formulier: meteen zichtbaar na de klik, daarna "Bedankt" (Stijn 6-10: drie keer gedrukt) */
.stmc-formulier{position:relative}
.stmc-verstuur{position:fixed;inset:0;z-index:100001;background:rgba(255,249,239,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;color:var(--g);font-family:var(--sub)}
.stmc-verstuur b{font-size:20px;font-weight:400}.stmc-verstuur small{font-family:var(--body);font-size:14px;color:var(--grijs);max-width:360px}
.stmc-verstuur-draai{width:34px;height:34px;border:3px solid var(--lijn);border-top-color:var(--o);border-radius:50%;animation:stmc-draai .8s linear infinite}
@keyframes stmc-draai{to{transform:rotate(360deg)}}
.stmc-verstuur-vink{width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}

/* Direct bestellen: rustige tweede keuze onder het offerteformulier */
.stmc-direct{margin-top:18px;padding:14px 16px;border:1.5px dashed var(--lijn);background:#fff;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.stmc-direct>div{flex:1 1 260px;display:grid;gap:3px;font-size:13.5px;color:var(--grijs)}.stmc-direct b{font-family:var(--sub);font-weight:400;color:var(--g);font-size:15px}
.stmc-direct .stmc-knop{flex:0 1 auto}

/* Direct bestellen onder "Vraag je offerte aan": groen zodat hij opvalt (Stijn 6-10) */
.stmc .stmc-knop.groen{background:var(--g)!important;border-color:var(--g)!important;color:#fff!important}
.stmc .stmc-knop.groen:hover{background:var(--g2)!important;border-color:var(--g2)!important}
.stmc-knop.stmc-direct-rechts{flex-direction:column;gap:2px;padding:12px 20px;text-align:center;width:100%}
.stmc-knop.stmc-direct-rechts span{font-size:16px}.stmc-knop.stmc-direct-rechts small{font-family:var(--body);font-size:12px;opacity:.9}
.stmc-knop[hidden]{display:none!important}
.stmc-knop.stmc-deal{width:100%}

/* telefoon en tablet (Stijn 6-10): de 3D blijft bovenin staan, alleen de opties scrollen eronder. Prijs, "Vraag je
   offerte aan" en "Direct bestellen" staan daar al in de vaste onderbalk en in stap 6, dus hier niet nog een keer. */
@media(max-width:1000px){
  .stmc[data-scherm="ontwerp"] .stmc-rechts{position:sticky;top:0;z-index:6;background:#fff;box-shadow:0 6px 12px -8px rgba(0,0,0,.25)}
  .stmc[data-scherm="ontwerp"] .stmc-rechts .stmc-totaal,.stmc[data-scherm="ontwerp"] .stmc-rechts .stmc-knoppen{display:none}
  .stmc[data-scherm="ontwerp"] .stmc-3d{height:min(52vw,250px);min-height:190px}
  .stmc[data-scherm="ontwerp"] .stmc-stap{scroll-margin-top:calc(max(190px,min(52vw,250px)) + 60px)}
}
@media(min-width:1001px){.stmc-stap{scroll-margin-top:16px}}

/* startpunten in stap 1: 3D-afbeelding zodra die klaar is, tot dan het icoontje */
.stmc-fig .stmc-fig-3d{display:block;width:100%;height:100%;object-fit:contain}
.stmc-fig .stmc-fig-3d:not([src]){display:none}
.stmc-fig .stmc-fig-3d[src]~svg{display:none}

/* ── eenvoudige opzet (v2, 8 okt 2026; Komma-feedback): alles onder [data-ui="2"], de klassieke opzet blijft ongemoeid ── */
/* ruimte onder de laatste opties = hoogte onderbalk (48 knop + 18 rand/padding) + iPhone-thuisbalk + lucht (Stijn 10-10) */
.stmc[data-ui="2"]{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
html:has(.stmc[data-ui="2"][data-scherm="ontwerp"]){scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
/* Smartsupp-chat van stilt.nl (inline bottom:24px, ballon 96px) boven de onderbalk, anders ligt hij op "Volgende".
   Het open chatvenster op de telefoon (bottom:0, schermvullend) blijft ongemoeid. */
body:has(.stmc[data-ui="2"][data-scherm="ontwerp"]) #smartsupp-widget-container [style*="bottom: 24px"]{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
body:has(.stmc[data-ui="2"][data-scherm="ontwerp"]) #smartsupp-widget-container [style*="bottom: 96px"]{bottom:calc(156px + env(safe-area-inset-bottom,0px))!important}
.stmc[data-ui="2"] .stmc-terug,.stmc[data-ui="2"] .stmc-uitleg,.stmc[data-ui="2"] .stmc-3d-modules,
.stmc[data-ui="2"] .stmc-3d-knoppen [data-view="zij"],.stmc[data-ui="2"] .stmc-3d-knoppen [data-view="achter"],
.stmc[data-ui="2"] .stmc-direct-rechts{display:none!important}
/* stappenbalk: één dunne regel, huidige stap oranje onderstreept */
.stmc[data-ui="2"] .stmc2-balk{display:flex;gap:2px;border-bottom:1px solid var(--lijn);margin:0 0 18px;overflow-x:auto;scrollbar-width:none}
.stmc[data-ui="2"] .stmc2-balk::-webkit-scrollbar{display:none}
.stmc[data-ui="2"] .stmc2-balk button{flex:1 0 auto;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none;padding:10px 10px 9px;margin:0 0 -1px;font-family:var(--sub);font-size:14px;line-height:1.2;color:var(--grijs);cursor:pointer;text-transform:none;letter-spacing:0;white-space:nowrap;min-height:0}
.stmc[data-ui="2"] .stmc2-balk button small{font-size:11px;margin-right:5px;opacity:.7}
.stmc[data-ui="2"] .stmc2-balk button[data-klaar="1"]{color:var(--g)}
.stmc[data-ui="2"] .stmc2-balk button[aria-current="step"]{color:var(--g);border-bottom-color:var(--o)}
.stmc[data-ui="2"] .stmc2-balk button:hover{color:var(--g);background:none}
/* één stap tegelijk, zonder kaders eromheen */
.stmc[data-ui="2"] .stmc2-stap>h2{font-family:var(--kop);font-size:30px;line-height:1;color:var(--g);margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px;font-weight:400}
.stmc[data-ui="2"] .stmc-paneel .stmc-knoppen{display:none}
.stmc[data-ui="2"] .stmc-balk .stmc2-offerte{background:#fff;color:var(--o);border:2px solid var(--o);min-height:48px}
.stmc[data-ui="2"] .stmc-balk .stmc2-offerte:hover{background:var(--o);color:#fff}
.stmc[data-ui="2"] .stmc-balk .stmc2-offerte[hidden]{display:none}
@media(max-width:700px){.stmc[data-ui="2"] .stmc-balk .stmc2-offerte{display:none}}
/* onderbalk ook op de computer: prijs links, Vorige en Volgende rechts */
.stmc[data-ui="2"][data-scherm="ontwerp"] .stmc-balk{display:flex}
.stmc[data-ui="2"] .stmc-balk{gap:10px}
.stmc[data-ui="2"] .stmc-balk>div{flex:1 1 auto}
@media(min-width:1001px){.stmc[data-ui="2"] .stmc-balk{padding-left:max(14px,calc(50% - 600px));padding-right:max(14px,calc(50% - 600px))}}
.stmc[data-ui="2"] .stmc-balk .stmc2-vorige{background:none;border:0;color:var(--g);text-decoration:underline;text-underline-offset:3px;box-shadow:none;padding:10px 6px}
@media(max-width:480px){.stmc[data-ui="2"] .stmc-balk .stmc2-vorige{font-size:0;padding:10px 4px}.stmc[data-ui="2"] .stmc-balk .stmc2-vorige::before{content:"\2190";font-size:22px}}
/* laptop (Stijn 9-10): het 3D-paneel staat vast in beeld, alleen het menu links scrolt (tot het einde). De configurator
   vult het scherm boven de onderbalk; bij elke stapwissel schuift de pagina hem in beeld (naarBoven in app.js). */
@media(min-width:1001px){
  .stmc[data-ui="2"][data-scherm="ontwerp"] .stmc-grid{height:calc(100vh - 96px);min-height:560px;align-items:stretch}
  .stmc[data-ui="2"][data-scherm="ontwerp"] .stmc-links{overflow-y:auto;overscroll-behavior:contain;padding-right:10px;scrollbar-gutter:stable;scrollbar-width:thin}
  .stmc[data-ui="2"][data-scherm="ontwerp"] .stmc-rechts{position:static;align-self:start}
  .stmc[data-ui="2"][data-scherm="ontwerp"] .stmc-3d{height:min(460px,calc(100vh - 250px));min-height:340px}
}
/* startscherm */
.stmc[data-ui="2"] .stmc2-kies-kop h2{font-family:var(--kop);font-size:36px;line-height:1;color:var(--g);margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px;font-weight:400}
.stmc[data-ui="2"] .stmc2-kies-kop p{margin:0 0 14px;color:#3C3C35;max-width:640px}
.stmc[data-ui="2"] .stmc2-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.stmc[data-ui="2"] .stmc2-filter>span{font-family:var(--sub);color:var(--g);font-size:15px}
.stmc[data-ui="2"] .stmc2-startpunten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.stmc[data-ui="2"] .stmc2-startpunten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.stmc[data-ui="2"] .stmc2-startpunten{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.stmc[data-ui="2"] .stmc2-sp{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#fff;border:1px solid var(--lijn);border-radius:0;padding:0 0 12px;cursor:pointer;color:var(--tekst);text-transform:none;letter-spacing:0;line-height:1.3;box-shadow:none;min-height:0;font-size:14px;transition:border-color .15s,box-shadow .15s}
.stmc[data-ui="2"] .stmc2-sp:hover,.stmc[data-ui="2"] .stmc2-sp:focus-visible{border-color:var(--g);box-shadow:0 4px 14px rgba(7,66,56,.12);background:#fff;color:var(--tekst)}
.stmc[data-ui="2"] .stmc2-sp-beeld{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/2;background:#F5F3EE;margin:0 0 8px;overflow:hidden;font-size:34px;color:var(--g3)}
.stmc[data-ui="2"] .stmc2-sp-beeld img{width:100%;height:100%;object-fit:contain}
.stmc[data-ui="2"] .stmc2-sp-naam,.stmc[data-ui="2"] .stmc2-sp-maat,.stmc[data-ui="2"] .stmc2-sp-prijs{padding:0 12px}
.stmc[data-ui="2"] .stmc2-sp-naam{font-family:var(--sub);font-size:15px;color:var(--g)}
.stmc[data-ui="2"] .stmc2-sp-maat{font-size:12.5px;color:var(--grijs)}
.stmc[data-ui="2"] .stmc2-sp-prijs{font-size:12.5px;color:var(--grijs);margin-top:2px}
.stmc[data-ui="2"] .stmc2-sp-prijs b{font-family:var(--kop);font-size:22px;color:var(--o);font-weight:400;letter-spacing:.5px}
.stmc[data-ui="2"] .stmc2-sp-pop{position:absolute;top:8px;left:8px;background:var(--o);color:#fff;font-family:var(--sub);font-size:11px;padding:3px 7px}
.stmc[data-ui="2"] .stmc2-sp.leeg .stmc2-sp-beeld{background:#fff;border-bottom:1px dashed var(--lijn)}
.stmc[data-ui="2"] .stmc2-ai{margin:18px 0 0;border-top:1px solid var(--lijn);padding-top:12px}
.stmc[data-ui="2"] .stmc2-ai summary{cursor:pointer;font-family:var(--sub);color:var(--g);font-size:15px}
.stmc[data-ui="2"] .stmc2-ai textarea{width:100%;margin:10px 0 0;box-sizing:border-box;font:inherit;padding:10px;border:1px solid var(--lijn)}
/* overzicht */
.stmc[data-ui="2"] .stmc2-keuzes{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--lijn)}
.stmc[data-ui="2"] .stmc2-keuzes li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn)}
.stmc[data-ui="2"] .stmc2-keuzes li>span{min-width:0}
.stmc[data-ui="2"] .stmc2-keuzes b{display:block;font-family:var(--sub);font-weight:400;color:var(--g);font-size:14px}
.stmc[data-ui="2"] .stmc2-keuzes li>span>span{display:block;font-size:13px;color:var(--grijs)}
.stmc[data-ui="2"] .stmc2-wijzig{background:none;border:0;padding:4px 0;color:var(--g);text-decoration:underline;text-underline-offset:3px;font-size:13px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0;min-height:0;flex:0 0 auto}
.stmc[data-ui="2"] .stmc2-totaal{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.stmc[data-ui="2"] .stmc2-totaal span{font-size:13px;color:var(--grijs)}
.stmc[data-ui="2"] .stmc2-totaal b{font-family:var(--kop);font-size:34px;color:var(--g);font-weight:400;line-height:1}
.stmc[data-ui="2"] .stmc2-totaal em{font-style:normal;background:var(--o);color:#fff;font-family:var(--sub);font-size:12px;padding:3px 7px}
.stmc[data-ui="2"] .stmc2-details{border-bottom:1px solid var(--lijn);padding:8px 0}
.stmc[data-ui="2"] .stmc2-details summary{cursor:pointer;font-family:var(--sub);color:var(--g);font-size:14px;padding:4px 0}
.stmc[data-ui="2"] .stmc2-details[open] summary{margin-bottom:8px}
.stmc[data-ui="2"] .stmc2-redenen{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
@media(max-width:560px){.stmc[data-ui="2"] .stmc2-redenen{grid-template-columns:minmax(0,1fr)}}
.stmc[data-ui="2"] .stmc2-redenen li{position:relative;padding-left:22px;font-size:13px;color:var(--grijs);line-height:1.35}
.stmc[data-ui="2"] .stmc2-redenen li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--g);font-weight:700}
.stmc[data-ui="2"] .stmc2-redenen b{display:block;font-family:var(--sub);font-weight:400;color:var(--g);font-size:14px}

/* ── STILT moduleconfigurator — offerte (pdf-pagina's en scroll-offerte), prefix .stmo ──
   De overlays hangen aan <body>, buiten .stmc: daarom staan de huisstijl-tokens hier nog een keer.
   Opzet en maatvoering volgen de offerte van de Buitenkamerontwerper (.a4 / .ofs). */
.stmo{--g:#074238;--g2:#2B5F4C;--diep:#0B3A31;--o:#E66025;--o2:#C94F19;--creme:#FFF9EF;--zand:#F3EFE6;--lijn:#E2DBCD;--tekst:#12120D;--grijs:#5f6660;
--kop:"Elizeth Condensed Medium","Roboto Condensed","Arial Narrow",sans-serif;
--sub:"Gamay Heading Semi bold","Gamay Body",system-ui,sans-serif;
--body:"Gamay Body",system-ui,-apple-system,"Segoe UI",sans-serif;
font-family:var(--body);color:var(--tekst);line-height:1.5;-webkit-font-smoothing:antialiased;box-sizing:border-box;text-align:left}
.stmo *,.stmo *::before,.stmo *::after{box-sizing:inherit}
.stmo button{font-family:inherit;border-radius:0;text-transform:none;letter-spacing:0;box-shadow:none;line-height:1.2}
.stmo-logo{display:block;height:28px;width:auto;color:var(--o)}
html.stmo-open,html.stmo-open body{overflow:hidden}

/* knoppen */
.stmo-knop,.stmo-knop:link,.stmo-knop:visited{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 20px;border:2px solid var(--o);background:var(--o);color:#fff!important;font-family:var(--sub);font-size:15px;cursor:pointer;text-decoration:none;text-align:center}
.stmo-knop:hover,.stmo-knop:focus{background:var(--o2);border-color:var(--o2);color:#fff!important;text-decoration:none!important}   /* het thema van stilt.nl kleurt links oranje: tekst bleef onleesbaar op de knop (7-10) */
.stmo-knop.lijn,.stmo-knop.lijn:link,.stmo-knop.lijn:visited{background:transparent;color:var(--g)!important;border-color:var(--g)}
.stmo-knop.lijn:hover{background:var(--g);color:var(--creme)!important}

/* ── pdf-offerte: A4-pagina's onder elkaar ── */
.stmo-pdf{position:fixed;inset:0;z-index:100000;overflow-y:auto;background:var(--zand);-webkit-overflow-scrolling:touch}
.stmo-pdf__balk{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:10px clamp(12px,3vw,28px);background:var(--creme);border-bottom:1px solid var(--lijn)}
.stmo-pdf__titel{display:flex;align-items:center;gap:14px;font-family:var(--sub);color:var(--g);font-size:14px}
.stmo-pdf__knoppen{display:flex;flex-wrap:wrap;gap:8px}
.stmo-pdf__knoppen .stmo-knop{min-height:40px;padding:7px 14px;font-size:14px}
.stmo-pdf__paginas{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 12px 60px}

.stmo-a4{width:210mm;max-width:100%;min-height:297mm;background:var(--creme);color:var(--tekst);padding:15mm 15mm 18mm;box-shadow:0 6px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:9px;position:relative;font-size:10.5pt;line-height:1.4}
.stmo-a4 h2{font-family:var(--kop);font-size:25pt;line-height:1;color:var(--g);text-transform:uppercase;letter-spacing:.01em;margin:4px 0 2px;font-weight:400}
.stmo-a4 h3{font-family:var(--sub);font-size:12pt;color:var(--g);margin:6px 0 2px;font-weight:400;text-transform:none}
.stmo-a4 .blok h3,.stmo-a4 .afspraak h3{margin-top:0}
.stmo-a4 p{margin:0}
.stmo-a4 ul,.stmo-a4 ol{margin:0;padding-left:18px}
.stmo-a4 li{margin:2px 0}
.stmo-a4 a{color:var(--g)}
.stmo-a4 .eyebrow,.stmo .eyebrow{font-family:var(--sub);font-size:8pt;letter-spacing:.14em;text-transform:uppercase;color:var(--o)}
.stmo-a4 .klein{font-size:8.5pt;color:var(--grijs)}
.stmo-a4 .link{word-break:break-all}
.stmo-a4 .pil{display:inline-block;background:var(--zand);color:var(--g2);font-family:var(--sub);font-size:7.5pt;padding:1px 6px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}
.stmo-a4 .kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.stmo-a4 .kop .stmo-logo{height:34px}
.stmo-a4 .kop-r{text-align:right;line-height:1.3}
.stmo-a4 .hero{background:var(--zand);overflow:hidden;aspect-ratio:16/9}
.stmo-a4 .hero img,.stmo-a4 .beeld img{width:100%;height:100%;object-fit:cover;display:block}
.stmo-a4 .hero.svg{aspect-ratio:auto;padding:10px;background:#fff;border:1px solid var(--lijn)}
.stmo-a4 .hero.svg svg,.stmo-a4 .tekening svg{display:block;width:100%;height:auto}
.stmo-a4 .tekening svg{max-height:62mm;width:auto;max-width:100%;margin:0 auto}   /* hoge ontwerpen (bar) mogen de pagina niet laten overlopen */
.stmo-a4 .beelden{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stmo-a4 .beelden.drie{grid-template-columns:1fr 1fr 1fr}
.stmo-a4 .beeld{background:var(--zand);overflow:hidden;aspect-ratio:4/3;position:relative}
.stmo-a4 .beeld span,.stmo-a4 .tekening>span{position:absolute;left:8px;bottom:6px;font-family:var(--sub);font-size:8pt;color:var(--g);background:rgba(255,249,239,.88);padding:1px 7px}
.stmo-a4 .tekening{position:relative;background:#fff;border:1px solid var(--lijn);padding:8px 10px 22px}
.stmo-a4 .tekening>div{max-width:150mm;margin:0 auto}
.stmo-a4 table{width:100%;border-collapse:collapse;font-size:9.5pt}
.stmo-a4 th,.stmo-a4 td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--lijn);vertical-align:top}
.stmo-a4 th{font-family:var(--sub);font-size:8pt;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);font-weight:400}
.stmo-a4 td.n,.stmo-a4 th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stmo-a4 tr.tot td{font-weight:bold;border-top:2px solid var(--g);border-bottom:0}
.stmo-a4 .modtabel td.nr span{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;align-items:center;justify-content:center;font-family:var(--sub);font-size:9pt}
.stmo-a4 .opttabel td:first-child{width:27%}.stmo-a4 .opttabel td:nth-child(2){width:41%}
.stmo-a4 .blok{background:var(--zand);padding:10px 12px}
.stmo-a4 .blok.groen{background:var(--g);color:var(--creme)}
.stmo-a4 .blok.groen h3,.stmo-a4 .blok.groen .klein,.stmo-a4 .blok.groen td{color:var(--creme)}
.stmo-a4 .blok.groen td{border-bottom-color:rgba(255,249,239,.22)}
.stmo-a4 .blok.groen .klein{opacity:.85;margin-top:8px}
.stmo-a4 .blok .prijs{font-family:var(--kop);font-size:26pt;line-height:1.05;letter-spacing:.5px}
.stmo-a4 .twee{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.stmo-a4 .twee.breed-smal{grid-template-columns:1.5fr 1fr}
.stmo-a4 .twee>.blok{height:100%}
.stmo-a4 .drie-stappen{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.stmo-a4 .drie-stappen>div{background:var(--zand);padding:9px 11px;display:flex;flex-direction:column;gap:2px;font-size:9.5pt}
.stmo-a4 .drie-stappen b{font-family:var(--sub);font-weight:400;color:var(--g);font-size:11pt}
.stmo-a4 .drie-stappen .nr{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--o);color:#fff;align-items:center;justify-content:center;font-family:var(--sub);font-size:9pt}
.stmo-a4 .afspraak{background:var(--zand);padding:10px 12px}
.stmo-a4 .afspraak .drie-stappen>div{background:var(--creme)}
.stmo-a4 .cta-rij{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.stmo-a4 .cta-knop{display:inline-block;background:var(--o);color:#fff;border:2px solid var(--o);padding:8px 16px;font-family:var(--sub);font-size:10.5pt;text-decoration:none}
.stmo-a4 .cta-knop.stil{background:transparent;border-color:var(--creme);color:var(--creme)}
.stmo-a4 .voet{position:absolute;left:15mm;right:15mm;bottom:7mm;display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--sub);font-size:7.5pt;color:var(--grijs);border-top:1px solid var(--lijn);padding-top:4px}
.stmo-a4 .voet .stmo-logo{height:13px}
/* alleen op het scherm: een A4 is bij het printen zelf 794 px breed en zou anders de mobiele opmaak krijgen */
@media screen and (max-width:820px){
  .stmo-a4{min-height:0;padding:22px 16px 14px;font-size:14px}
  .stmo-a4 h2{font-size:30px}.stmo-a4 h3{font-size:16px}
  .stmo-a4 table{font-size:13px}.stmo-a4 .klein{font-size:12px}
  .stmo-a4 .twee,.stmo-a4 .twee.breed-smal,.stmo-a4 .drie-stappen,.stmo-a4 .beelden.drie{grid-template-columns:1fr}
  /* voet onder de inhoud, niet er overheen (Stijn 6-10: de voet stond door de tekst) */
  .stmo-a4 .voet{position:static;margin-top:22px;flex-wrap:wrap;font-size:10px}
  .stmo-a4 .opttabel td:first-child,.stmo-a4 .opttabel td:nth-child(2){width:auto}
  /* pdf-offerte op de telefoon (Stijn 5-10, zoals de Buitenkamerontwerper): pagina's lopen mee met de schermbreedte */
  .stmo-pdf__paginas{padding:10px 0 32px;gap:10px}
  .stmo-a4{width:100%;box-shadow:none}
  .stmo-a4 td,.stmo-a4 th{overflow-wrap:break-word}
  /* keuzetabel: keuze over de volle breedte, daaronder "hoe het eruitziet" en "wat je zelf doet" naast elkaar */
  .stmo-a4 .opttabel tr{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;border-bottom:1px solid var(--lijn);padding:6px 0}
  .stmo-a4 .opttabel td,.stmo-a4 .opttabel th{border:0;padding:2px 0}
  .stmo-a4 .opttabel td:first-child,.stmo-a4 .opttabel th:first-child{grid-column:1/-1}
  .stmo-a4 img,.stmo-a4 svg,.stmo-a4 iframe{max-width:100%}
  .stmo-a4 .tekening svg{max-height:none;width:100%;height:auto}
  .stmo-a4 .kop{flex-wrap:wrap}
  .stmo-pdf__balk{padding:8px 12px}.stmo-pdf__titel .stmo-logo{height:22px}
  .stmo-pdf__knoppen{width:100%}.stmo-pdf__knoppen .stmo-knop{flex:1 1 auto;min-height:44px}
}
/* print: alleen de pagina's; de pagina eronder (configurator, thema) doet niet mee */
@media print{
  html.stmo-print,html.stmo-print body{overflow:visible!important;height:auto!important;background:#fff!important}
  html.stmo-print body>*:not(.stmo-pdf){display:none!important}
  html.stmo-print .stmo-pdf{position:static;overflow:visible;background:#fff}
  html.stmo-print .stmo-pdf__balk{display:none!important}
  html.stmo-print .stmo-pdf__paginas{padding:0;gap:0;display:block}
  html.stmo-print .stmo-a4{width:210mm;max-width:none;min-height:296mm;padding:15mm 15mm 18mm;font-size:10.5pt;box-shadow:none;page-break-after:always;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html.stmo-print .stmo-a4:last-child{page-break-after:auto;break-after:auto}
  @page{size:A4;margin:0}
}

/* ── scroll-offerte ── */
.stmo-ofs{position:fixed;inset:0;z-index:100000;overflow-y:auto;overflow-x:hidden;background:#F1ECE2;font-size:17px;transition:background .5s}
.stmo-ofs--donker{background:var(--diep)}
.stmo-ofs__canvas{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 40%,#FBF8F1 0,#F1ECE2 60%,#E6DFD1 100%)}
.stmo-ofs__canvas::before{content:'';position:absolute;inset:0;background:var(--diep);opacity:0;transition:opacity .6s;pointer-events:none}
.stmo-ofs--donker .stmo-ofs__canvas::before{opacity:1}
/* het verhuisde 3D-vak vult de hele overlay (stijl.css houdt in de configurator onderin ruimte vrij) */
.stmo-ofs__canvas>.stmc-3d-canvas{position:absolute!important;inset:0!important}
.stmo-ofs__canvas canvas{position:relative;width:100%!important;height:100%!important;display:block}
.stmo-ofs__svg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12vh 6vw}
.stmo-ofs__svg svg{width:min(900px,100%);height:auto;background:#fff}
.stmo-ofs__voortgang{position:fixed;top:0;left:0;height:4px;width:0;background:var(--o);z-index:8}
.stmo-ofs__top{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,4vw,40px) 12px;pointer-events:none}
.stmo-ofs__top>*{pointer-events:auto}
.stmo-ofs__top .stmo-logo{transition:color .4s}
.stmo-ofs--donker .stmo-ofs__top .stmo-logo{color:var(--creme)}
.stmo-ofs__topmeta{font-family:var(--sub);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);background:rgba(255,249,239,.82);padding:4px 12px;transition:color .4s,background .4s}
.stmo-ofs--donker .stmo-ofs__topmeta{color:rgba(255,249,239,.85);background:rgba(11,58,49,.55)}
.stmo .stmo-ofs__sluit{border:2px solid var(--g);background:var(--creme);color:var(--g);padding:8px 14px;font-family:var(--sub);font-size:13px;cursor:pointer}
.stmo .stmo-ofs__sluit:hover{background:var(--g);color:var(--creme)}
.stmo-ofs__nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.stmo .stmo-ofs__nav button{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;background:none;border:0;padding:5px 0;cursor:pointer}
.stmo-ofs__nav button i{width:10px;height:10px;border-radius:50%;background:rgba(7,66,56,.28);transition:transform .2s,background .2s}
.stmo-ofs__nav button span{font-family:var(--sub);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--g);background:rgba(255,249,239,.92);padding:2px 8px;opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;pointer-events:none}
/* labels alleen bij aanwijzen: een vast label van het actieve hoofdstuk valt over de kaart rechts */
.stmo-ofs__nav:hover button span{opacity:1;transform:none}
.stmo-ofs__nav button.aan i{background:var(--o);transform:scale(1.4)}
.stmo-ofs--donker .stmo-ofs__nav button i{background:rgba(255,249,239,.4)}
.stmo-ofs--donker .stmo-ofs__nav button.aan i{background:var(--o)}
.stmo-ofs__flow{position:relative;z-index:2;pointer-events:none}
.stmo-h{min-height:150vh;display:flex;align-items:flex-start;padding:20vh clamp(16px,5vw,76px) 0}
.stmo-h--start{min-height:100vh;align-items:flex-end;padding-top:0;padding-bottom:10vh}
.stmo-h--rechts{justify-content:flex-end;padding-right:clamp(16px,7vw,110px)}
.stmo-h--eind{justify-content:center;align-items:flex-end;min-height:115vh;padding-top:0;padding-bottom:9vh}
/* montage (Stijn 6-10): langere hoofdstukken, de bakwagen en de modules lopen mee met het scrollen */
.stmo-h--montage{min-height:230vh}
.stmo-kaart,.stmo-hero,.stmo-eind{pointer-events:auto}
.stmo-kaart{width:min(440px,100%);background:var(--creme);padding:24px 26px 22px;border-top:5px solid var(--o);box-shadow:0 24px 60px rgba(7,40,34,.22);position:sticky;top:max(84px,11vh);max-height:calc(100vh - 110px);overflow-y:auto;opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease}
.stmo-kaart.in{opacity:1;transform:none}
.stmo-hero{max-width:600px}
.stmo-hero p{font-size:1.08rem;max-width:500px;margin:0 0 6px;color:#3C3C35}
.stmo-eyebrow{font-family:var(--sub);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--o)}
.stmo-ofs h1,.stmo-ofs h2{font-family:var(--kop);text-transform:uppercase;color:var(--g);line-height:1;margin:6px 0 12px;font-weight:400;letter-spacing:.5px}
.stmo-ofs h1{font-size:clamp(2.4rem,6.2vw,4.5rem)}
.stmo-ofs h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.stmo-kaart h3{font-family:var(--sub);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--g);margin:10px 0 4px;font-weight:400}
.stmo-kaart p{margin:0 0 12px;color:#3C3C35;font-size:.95em}
.stmo-hero__prijs{margin-top:12px}
.stmo-hero__prijs b{font-family:var(--kop);font-size:2.4rem;color:var(--o);display:block;line-height:1;font-weight:400}
.stmo-hero__prijs span{color:var(--grijs);font-size:.92em}
.stmo .stmo-scrollcue{margin-top:18px;border:2px solid var(--g);background:transparent;color:var(--g);font-family:var(--sub);letter-spacing:.06em;text-transform:uppercase;font-size:14px;padding:10px 18px;cursor:pointer;animation:stmo-wip 1.8s ease-in-out infinite}
.stmo .stmo-scrollcue:hover{background:var(--g);color:var(--creme)}
@keyframes stmo-wip{0%,100%{transform:none}50%{transform:translateY(5px)}}
.stmo .stmo-meer{display:flex;align-items:center;gap:10px;margin-top:6px;border:0;background:none;color:var(--g);font-family:var(--sub);font-size:15px;cursor:pointer;padding:4px 0;text-align:left}
.stmo-meer::before{content:'+';flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--o);color:var(--o);font-size:18px;line-height:1}
.stmo .stmo-meer:hover{color:var(--o2)}
.stmo-meer:hover::before{background:var(--o);color:#fff}
.stmo .stmo-meer.licht{color:var(--creme)}
.stmo-maten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.stmo-maten div{background:var(--zand);padding:8px 10px}
.stmo-maten dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);font-family:var(--sub)}
.stmo-maten dd{margin:0;font-family:var(--kop);font-size:1.35rem;color:var(--g)}
.stmo-rijen{list-style:none;margin:2px 0 12px;padding:0}
.stmo-rijen li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--lijn);font-size:.95em}
.stmo-rijen li:first-child{border-top:1px solid var(--lijn)}
.stmo-rijen li small{display:block;color:var(--grijs);font-size:.86em;line-height:1.35}
.stmo-rijen li b{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:400;font-family:var(--sub);color:var(--g)}
.stmo .stmo-kijk{flex:none;width:42px;height:42px;padding:0;border:2px solid var(--g);background:transparent;color:var(--g);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.stmo-kijk svg{width:22px;height:22px;flex:none}
.stmo .stmo-kijk:hover{background:var(--g);color:var(--creme)}
.stmo .stmo-kijk.aan{background:var(--o);border-color:var(--o);color:#fff}
.stmo-tip{font-size:.85em;color:var(--grijs);display:flex;align-items:center;gap:6px;margin:0 0 8px}
.stmo-tip svg{width:16px;height:16px;color:var(--g)}
.stmo-twee{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.stmo-twee ul{margin:0;padding-left:18px;font-size:.92em}
.stmo-twee li{margin:3px 0}
.stmo-ofs .stmo-knop{min-height:52px;padding:10px 24px;font-family:var(--kop);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
.stmo-ofs .stmo-knop.lijn,.stmo-ofs .stmo-knop.lijn:link,.stmo-ofs .stmo-knop.lijn:visited{color:var(--creme)!important;border-color:var(--creme)}
.stmo-ofs .stmo-knop.lijn:hover{background:var(--creme);color:var(--g)!important}
.stmo-eind{text-align:center;max-width:760px}
.stmo-ofs .stmo-eind h2{color:var(--creme);font-size:clamp(2.6rem,5.4vw,4.2rem)}
.stmo-eind h2 small{font-family:var(--sub);font-size:.3em;letter-spacing:.1em;color:rgba(255,249,239,.75)}
.stmo-eind p{color:rgba(255,249,239,.88);margin:0 auto 18px;max-width:560px}
.stmo-eind__knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px}
.stmo-eind__meer{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:center}
/* zweefbalk tijdens het inzoomen op een detail */
.stmo-terug{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:16px;background:var(--g);color:var(--creme);padding:12px 14px 12px 20px;box-shadow:0 14px 40px rgba(0,0,0,.3);width:max-content;max-width:min(760px,calc(100vw - 32px));animation:stmo-op .3s ease-out}
.stmo-terug b{font-family:var(--kop);text-transform:uppercase;font-size:1.1rem;display:block;line-height:1.1;font-weight:400;letter-spacing:.5px}
.stmo-terug span{font-size:.84em;opacity:.9;display:block;line-height:1.35}
.stmo .stmo-terug button{flex:none;border:2px solid var(--creme);background:transparent;color:var(--creme);padding:9px 14px;font-family:var(--sub);text-transform:uppercase;letter-spacing:.05em;font-size:13px;cursor:pointer}
.stmo .stmo-terug button:hover{background:var(--creme);color:var(--g)}
.stmo-ofs--kijkt .stmo-kaart{opacity:.25}
.stmo-ofs--kijkt .stmo-kaart:hover{opacity:1}
@keyframes stmo-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes stmo-op{from{transform:translate(-50%,30px);opacity:0}to{transform:translateX(-50%);opacity:1}}
/* "Meer info": paneel met tabbladen, daarin de pagina's van de pdf-offerte */
.stmo-la{position:fixed;inset:0;z-index:20;display:flex;justify-content:flex-end}
.stmo .stmo-la__scherm{position:absolute;inset:0;border:0;background:rgba(7,40,34,.5);cursor:pointer}
.stmo-la__paneel{position:relative;width:min(700px,100%);height:100%;display:flex;flex-direction:column;background:var(--creme);box-shadow:-20px 0 60px rgba(0,0,0,.25);animation:stmo-in .28s ease-out}
.stmo-la__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:14px 8px 0 18px;border-bottom:1px solid var(--lijn)}
.stmo-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.stmo-tabs::-webkit-scrollbar{display:none}
.stmo .stmo-tabs button{flex:none;border:0;border-bottom:3px solid transparent;background:none;padding:10px 10px 9px;font-family:var(--sub);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);cursor:pointer;white-space:nowrap}
.stmo .stmo-tabs button.aan{color:var(--g);border-bottom-color:var(--o)}
.stmo .stmo-tabs button:hover{color:var(--g)}
.stmo .stmo-la__sluit{flex:none;border:0;background:none;font-size:30px;line-height:1;color:var(--g);cursor:pointer;padding:4px 10px 8px}
.stmo-la__inhoud{padding:20px 24px calc(40px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;font-size:15px}
.stmo-la__inhoud h2{font-size:1.9rem}
.stmo-bezig{color:var(--grijs);padding:30px 0}
.stmo-noot{font-size:.9em;color:var(--grijs);margin:14px 0 0}
.stmo .stmo-nootknop{border:0;background:none;color:var(--g);text-decoration:underline;cursor:pointer;font-size:inherit;padding:0}
.stmo-faq details{border-bottom:1px solid var(--lijn);padding:10px 0}
.stmo-faq summary{cursor:pointer;font-family:var(--sub);color:var(--g)}
.stmo-faq p{margin:8px 0 0;color:#3C3C35}
/* pdf-pagina in het paneel: geen vel, geen voet, vloeiende breedte */
.stmo-la .stmo-a4--los{width:auto;min-height:0;padding:0;box-shadow:none;background:transparent;font-size:14px}
.stmo-la .stmo-a4--los h2{font-size:1.9rem}
.stmo-la .stmo-a4--los table{font-size:13.5px}
.stmo-la .stmo-a4--los .klein{font-size:12px}
.stmo-la .stmo-a4--los .twee,.stmo-la .stmo-a4--los .twee.breed-smal{grid-template-columns:1fr}
.stmo-la .stmo-a4--los .tekening>div{max-width:none}
/* mobiel: 3D vast bovenin (45 % van het scherm), de hoofdstukken scrollen eronder door */
@media(max-width:759px){
  .stmo-ofs{font-size:16px}
  .stmo-ofs__canvas{bottom:auto;height:45vh;z-index:3;box-shadow:0 6px 18px rgba(7,40,34,.14)}
  .stmo-ofs__top{z-index:9;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px}
  .stmo-ofs__top .stmo-logo{height:22px}
  .stmo-ofs__topmeta,.stmo-ofs__nav{display:none}
  .stmo .stmo-ofs__sluit{padding:6px 10px;font-size:12px}
  .stmo-ofs__voortgang{z-index:10}
  .stmo-ofs__flow{padding-top:45vh}
  .stmo-h,.stmo-h--start,.stmo-h--eind,.stmo-h--rechts{min-height:0;display:block;padding:18px 14px 36vh}
  .stmo-h--start{padding-top:22px}
  .stmo-h--eind{padding-bottom:60px}
  .stmo-h.stmo-h--montage{padding-bottom:24px;min-height:150vh}   /* min-height i.p.v. padding: dan kan de kaart meeschuiven (sticky) */
  .stmo-h--montage .stmo-kaart{position:sticky;top:calc(45vh + 10px);max-height:calc(55vh - 20px);overflow-y:auto}
  .stmo-kaart{position:static;width:100%;max-height:none;opacity:1;transform:none;box-shadow:0 10px 30px rgba(7,40,34,.14);padding:20px 18px}
  .stmo-ofs--kijkt .stmo-kaart{opacity:1}
  .stmo-eind{margin:0 auto}
  .stmo-terug{bottom:12px;flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px;width:calc(100vw - 24px)}
  .stmo-la__inhoud{padding:16px 16px 40px}
}
/* veelgestelde vragen (kamado-pootjes) */
.stmo .faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; margin: 0 0 10px; }
.stmo .faq dt { font-weight: 700; margin-top: 6px; }
.stmo .faq dd { margin: 0; }

/* ── STILT moduleconfigurator — verkoopcockpit (alleen voor het team), prefix .stck ──
   Zelfde opzet als #cockpit van de Buitenkamerontwerper. Hangt aan <body>, dus eigen tokens. */
.stck{--g:#074238;--o:#E66025;--creme:#FFF9EF;--zand:#F3EFE6;--rand:#d9d2c3;--grijs:#5f6660;
--kop:"Elizeth Condensed Medium","Roboto Condensed","Arial Narrow",sans-serif;
--sub:"Gamay Heading Semi bold","Gamay Body",system-ui,sans-serif;
--body:"Gamay Body",system-ui,-apple-system,"Segoe UI",sans-serif;
position:fixed;inset:0;z-index:100001;background:var(--zand);overflow:auto;color:#1f2a26;font-family:var(--body);font-size:15.5px;line-height:1.5;box-sizing:border-box;text-align:left;-webkit-overflow-scrolling:touch}
.stck *,.stck *::before,.stck *::after{box-sizing:inherit}
html.stck-open,html.stck-open body{overflow:hidden}
.stck-in{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.stck-kop{background:var(--g);color:var(--creme);margin:0 -20px 16px;padding:12px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:2}
.stck-kop h2{color:var(--creme);font-family:var(--kop);font-weight:400;font-size:1.5rem;letter-spacing:.5px;text-transform:uppercase;margin:0;line-height:1.1}
.stck-kop .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.stck button{font-family:var(--sub);font-size:13.5px;border-radius:0;cursor:pointer;text-transform:none;letter-spacing:0;line-height:1.2;box-shadow:none}
.stck-kop button{background:var(--o);color:#fff;border:2px solid var(--o);padding:7px 14px}
.stck-kop button.stil{background:transparent;border-color:var(--creme);color:var(--creme)}
.stck-kop button.stil:hover{background:var(--creme);color:var(--g)}
.stck h3{color:var(--g);font-family:var(--sub);font-weight:400;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;margin:22px 0 8px}
.stck .klein{font-size:.86rem;color:var(--grijs);margin:6px 0 0}
.stck-melding{background:#FFF1E8;border:1px solid var(--o);border-left:5px solid var(--o);padding:10px 14px;font-size:.92rem}
.stck-melding b{color:#B4440F}
.stck-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
.stck-kaart{background:var(--creme);border:1px solid var(--rand);padding:10px 12px}
.stck-kaart b{display:block;font-family:var(--kop);font-weight:400;font-size:1.6rem;line-height:1.15;color:var(--g);letter-spacing:.5px}
.stck-kaart small{color:var(--grijs);display:block;font-size:.8rem;line-height:1.3}
.stck-kaart.oranje{background:var(--o);border-color:var(--o)}
.stck-kaart.oranje b,.stck-kaart.oranje small{color:#fff}
.stck-kaart.leidraad ol{margin:0;padding-left:20px}
.stck-kaart.leidraad li{margin:5px 0}
.stck-kaart.leidraad li b{display:inline;font:inherit;font-weight:700;color:var(--g);letter-spacing:0}
.stck-klant{background:var(--creme);border:1px solid var(--rand);padding:10px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}
.stck-kort{display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap;background:var(--creme);border:1px solid var(--rand);padding:10px 14px}
.stck-kort label{flex:1 1 320px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stck-kort input[type=range]{flex:1;min-width:140px;accent-color:var(--o)}
.stck-kort .onder{color:var(--o);font-weight:700}
.stck-tip{background:var(--creme);border:1px solid var(--rand);border-left:5px solid var(--o);padding:9px 12px;margin:8px 0;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.stck-tip.bespaar{border-left-color:var(--g)}
.stck-tip .d{font-weight:700;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.stck-tip small{color:var(--grijs);display:block;font-weight:400;font-size:.86rem}
.stck table{width:100%;border-collapse:collapse;background:var(--creme);font-size:.9rem}
.stck th,.stck td{padding:6px 9px;border-bottom:1px solid #e6e0d3;text-align:left;vertical-align:top}
.stck th{background:#e9e3d6;font-family:var(--sub);font-weight:400;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.stck td.n,.stck th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.stck td small{color:var(--grijs)}
.stck tr.groep td{background:#efe9dc;font-weight:700}
.stck-links input{width:100%;font:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--rand);background:#fff;border-radius:0}
.stck-code{position:fixed;inset:0;z-index:100002;background:rgba(7,66,56,.92);display:flex;align-items:center;justify-content:center;padding:16px;font-family:"Gamay Body",system-ui,sans-serif}
.stck-code form{background:#FFF9EF;padding:22px;max-width:360px;width:100%;display:grid;gap:10px;color:#1f2a26}
.stck-code b{font-family:"Gamay Heading Semi bold",system-ui,sans-serif;font-weight:400;color:#074238;font-size:1.1rem}
.stck-code input{font:inherit;padding:9px;border:1.5px solid #d9d2c3;border-radius:0}
.stck-code button{font:inherit;background:#E66025;color:#fff;border:0;padding:10px;cursor:pointer;border-radius:0}
@media(max-width:640px){.stck-tip{grid-template-columns:1fr}.stck-tip .d{text-align:left}.stck table{font-size:.8rem}.stck th:last-child,.stck td:last-child{display:none}}
@media print{
  html.stck-open,html.stck-open body{overflow:visible!important;height:auto!important;background:#fff!important}
  html.stck-open body>*:not(.stck){display:none!important}
  html.stck-open .stck{position:static;background:#fff;overflow:visible}
  html.stck-open .stck-kop{position:static;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html.stck-open .stck-kop .r{display:none}
  html.stck-open .stck-tip,html.stck-open .stck-kaart{break-inside:avoid}
}