/* Huisstijl Van Thiel United, gelijk aan thiel.nl (YOOtheme-child custom.css, 13-10-2026):
   Open Sans tekst #262a2f, Oswald 700 koppen in gewone schrijfwijze (geen hoofdletters), navy #002e54;
   vlak ontwerp: rechte hoeken, geen schaduwen of verlopen; knoppen primair #0072ce (hover #00457c),
   secundair #eaf3fc met navy tekst (hover transparant met navy rand); velden met rand #a1adb8. */
/* Lettertypen zelf gehost (variabel, alleen Latijn): sneller dan Google Fonts, privacyvriendelijk en offline beschikbaar. Licentie: assets/fonts/OFL-*.txt */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/open-sans-latin-wght.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/oswald-latin-wght.woff2) format('woff2')}
:root{
  --navy:#002E54;--blue:#0072CE;--blue7:#00457C;--lblue:#EAF3FC;--steel:#D1DBE5;--orange:#E87722;
  --ink:#262a2f;--muted:#5f6a74;--line:#d1dbe5;--field:#a1adb8;--bg:#fff;--card:#fff;
  --green:#2f9e63;--red:#dc3545;
  --shadow:none;
  --r:0;--rb:0;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;
  background:var(--bg);color:var(--ink);font-family:'Open Sans',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:0;font-family:'Oswald',sans-serif;font-weight:700;color:var(--navy);letter-spacing:normal;line-height:1.2;text-wrap:balance}   /* v0.196: geen weeswoord in koppen (AGENTS.md) */
h2{font-size:17px;margin-bottom:10px}   /* v0.84: kaarttitels kleiner, overal gelijk (calculator, shop, mandje) */
button,input,select,textarea{font-family:inherit;font-size:13px}
a{color:var(--blue)}

/* kopbalk */
.top{flex:0 0 auto;background:var(--navy);box-shadow:0 7px 29px rgba(38,42,47,.15);position:relative;z-index:2;color:#fff}
/* Kopruimte boven het logo (--kopruimte): de veilige inset van de statusbalk (in de browser meestal 0). v0.209 (Stefan 24-10):
   in de geïnstalleerde app geen witte strook en geen witte statusbalk meer (die gaven op de calculator en ingelogd een witte
   waas); de strook heeft de kleur van de kop, de statusbalk is navy met witte tekst (theme-color #002E54, black-translucent),
   zoals de site in Safari. Geschiedenis: v0.177/v0.178/v0.182 zetten hier wit, tot 56 px extra. */
html{--kopruimte:env(safe-area-inset-top,0px)}
.top::before{content:"";display:block;height:var(--kopruimte);background:var(--navy)}
@media screen and (max-width:900px){
  html.pwa-standalone .top{background:var(--navy);background-image:none;box-shadow:none;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
}
.top .in{max-width:1360px;margin:0 auto;padding:12px 40px;display:flex;align-items:center;gap:24px}
.top img.logo{height:54px;width:auto;display:block;transition:height .2s}
/* kop zoals thiel.nl (v0.82): menu-items, Contact, mandje, klantlogin en de taalvlag helemaal rechts */
.logolink{display:block;flex:none}
.hnav{display:flex;align-items:center;gap:26px;margin-left:auto}
.hnav a,.hnav button{color:#fff;font:500 16px/1.2 'Open Sans',sans-serif;text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;white-space:nowrap}
.hnav a:hover,.hnav button:hover,.hnav .actief{color:#94cfff}
.hcontact{background:var(--blue);color:#fff;font:500 16px/1 'Open Sans',sans-serif;padding:14px 18px;text-decoration:none;white-space:nowrap}
.hcontact:hover{background:var(--blue7)}
html.klantlogin-uit:not(.klant) .klantlogin{display:none!important}   /* v0.227: klantlogin uit (beheer); ingelogd (html.klant) blijft Uitloggen staan */
.hbtn{position:relative;color:#fff;background:transparent;border:0;width:40px;height:40px;display:inline-grid;place-items:center;cursor:pointer;text-decoration:none;flex:none}
.hbtn svg,.hbtn .thiel-ui-icon{width:23px;height:23px}
.hbtn:hover{color:#94cfff}
/* v0.157 (plan §1.4): ingelogd = initialen of "Beheer" in plaats van het icoon */
.hbtn.met-naam,.top .right .hbtn.met-naam{width:auto;min-width:44px;padding:0 6px}
.hbtn.met-naam>.thiel-ui-icon{display:none}
.hnaam{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:1.5px solid currentColor;border-radius:15px;font-size:12.5px;font-weight:800;letter-spacing:.04em;line-height:1;white-space:nowrap}
.hbtn .cnt{position:absolute;top:0;right:-5px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;line-height:18px;text-align:center;padding:0 4px}
.htaal{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:#fff;font:500 16px/1 'Open Sans',sans-serif;cursor:pointer;white-space:nowrap;padding:8px 0}
.htaal img{width:21px;height:14px;display:block}
.htaal:hover{color:#94cfff}
@media (min-width:1101px) and (max-width:1200px){.hnav{gap:18px}.hnav a,.hnav button,.hcontact,.htaal{font-size:15px}.top .in{gap:16px}}
/* v0.103: de kop is overal dezelfde vaste navy balk als op de site (styles/site.css .kop); de transparante kop over de shopfoto
   van v0.82 is weg, zodat de shop geen andere website lijkt (Stefan 15-10) */
.top .title{font-family:'Oswald',sans-serif;font-weight:700;font-size:23px;letter-spacing:normal;border-left:2px solid rgba(255,255,255,.25);padding-left:16px;line-height:1.05}
.top .title small{display:block;font-family:'Open Sans',sans-serif;font-weight:500;color:#94cfff;font-size:12px;letter-spacing:normal;text-transform:none;margin-top:3px;line-height:1.2}
.top .right{margin-left:0;display:flex;align-items:center;gap:18px;flex:0 0 auto}   /* v0.113: menu tegen het rechterblok aan, gelijk aan de site (.rechts) */
.top .title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:var(--rb);overflow:hidden}
.lang button{background:transparent;color:#cfe3f5;border:0;padding:6px 10px;font-weight:700;font-size:12px;cursor:pointer;letter-spacing:.5px}
.lang button.aan{background:var(--blue);color:#fff}
.ibtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--rb);height:37px;padding:0 12px;font-weight:700;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ibtn:hover{background:var(--blue);border-color:var(--blue)}
.ibtn svg,.ibtn .thiel-ui-icon{width:16px;height:16px}
.ibtn[hidden],#btnInstall{display:none!important}   /* v0.83: installeren alleen via het menu */
a.ibtn{text-decoration:none}
.mbtn{background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:var(--rb);height:38px;padding:0 15px;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:inherit}
.mbtn:hover{background:var(--blue7);border-color:var(--blue7)}
.mbtn:disabled{opacity:.45;cursor:not-allowed}
.mbtn svg,.mbtn .thiel-ui-icon{width:17px;height:17px;flex:none}
.mbtn .cnt{background:#fff;color:var(--blue);border-radius:0;padding:0 7px;font-size:11.5px;font-weight:800;min-width:20px;text-align:center;line-height:18px}

/* mobiele kop en menu zoals thiel.nl (tm-header-mobile + uk-offcanvas-bar uit custom.css): alleen ≤ 900 px */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mkop{display:none;margin-left:auto;align-items:center;gap:18px}
.vlag{background:transparent;border:0;padding:6px;cursor:pointer;display:inline-flex}
.vlag img{width:24px;height:16px;display:block}
.hamb{background:transparent;border:0;width:40px;height:40px;padding:9px 6px;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:space-between}
.hamb>span:not(.sr){display:block;height:2px;background:#fff;width:100%}
.hamb:hover>span:not(.sr){background:#94cfff}
.ocv-overlay{position:fixed;inset:0;background:rgba(0,30,56,.55);z-index:40}   /* v0.133: donkerblauw waas i.p.v. grijs; menu effen navy zonder foto, compacter (Stefan 17-10) */
.ocv{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);z-index:41;background:var(--navy);overflow:hidden auto;
  padding:calc(64px + var(--kopruimte)) 24px 24px 28px;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;border-left:3px solid var(--blue)}
.ocv[hidden],.ocv-overlay[hidden]{display:none}
.ocv>*{position:relative}
.ocv-sluit{position:absolute;top:calc(14px + var(--kopruimte));right:14px;background:transparent;border:0;color:#fff;width:40px;height:40px;padding:6px;cursor:pointer}
.ocv-sluit svg,.ocv-sluit .thiel-ui-icon{width:28px;height:28px}
.ocv-nav{list-style:none;margin:0;padding:0}
.ocv-nav li{margin:0}
.ocv-nav a,.ocv-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;padding:8px 0;
  font:500 16px/1.3 'Open Sans',Arial,sans-serif;color:#fff;text-decoration:none;cursor:pointer}
.ocv-nav a:hover,.ocv-nav a:focus-visible,.ocv-nav button:hover,.ocv-nav button:focus-visible{color:#94cfff}
.ocv-nav li.actief>a{font-weight:600}
.ocv-nav a.contact{color:#94cfff;font-weight:600}   /* v0.103: als op de site */
.ocv-nav button[hidden]{display:none}
.ocv-nav .cnt{background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:0 7px;line-height:20px;min-width:22px;text-align:center}
.ocv-nav.tweede{border-top:1px solid rgba(255,255,255,.2);padding-top:10px}   /* v0.109: het shopblok onder de site-items, als op de site */
.ocv-nav .sub{list-style:none;margin:0;padding:0}
.ocv-nav .sub a{padding:5px 0 5px 16px;font-size:14.5px;color:#9fb3c6}
.ocv-nav .sub a:hover{color:#94cfff}
body.menu-open{overflow:hidden}

/* scrollgebied */
.wrap{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;display:flex;flex-direction:column}
/* v0.133 (Stefan 17-10): de voet staat altijd onderaan, ook op een korte pagina; geen wit onder de blauwe voet */
.wrap>*{flex-shrink:0}
.wrap .in{max-width:1360px;margin:0 auto;padding:18px 40px 24px}
.wrap>.in{flex:1 0 auto;width:100%;margin-bottom:24px}   /* v0.133: de inhoud vult de ruimte, de voet zakt naar onderen */
/* pagina's (v0.82): Shop → Steigercalculator → Offertemandje */
.pg,.shophero{display:none}
body[data-pagina=shop] .pg[data-pg=shop],body[data-pagina=configurator] .pg[data-pg=configurator],body[data-pagina=mandje] .pg[data-pg=mandje],body[data-pagina=account] .pg[data-pg=account],body[data-pagina=beheer] .pg[data-pg=beheer]{display:block}
body[data-pagina=shop] .shophero{display:flex}   /* v0.103: flex, de titel staat onderin de band */
body:not([data-pagina=configurator]) .bnav{display:none!important}
/* v0.103: de band boven de shop is de paginakop van de site (styles/site.css .paginakop): 260 px foto met waas, kruimelpad en
   titel onderin, op een telefoon alleen de titelbalk; zo sluit de shop aan op de rest (Stefan 15-10) */
.shophero{position:relative;background:#0b2a47 url(../login/poster.webp) center 40%/cover no-repeat;color:#fff;min-height:260px;align-items:flex-end}   /* v0.128: geen display:flex meer hier, anders won deze regel van .shophero{display:none} en stond de band "Shop" ook boven klantkaart, mandje, calculator en beheer */
.shophero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,46,84,.35),rgba(0,46,84,.75))}
.shophero .hin{position:relative;width:100%;max-width:1360px;margin:0 auto;padding:48px 40px 36px}
.shophero h1{color:#fff;font-size:clamp(30px,3.6vw,46px);line-height:1.15;margin:0}
.kruimel{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin:0 0 4px}
.kruimel button{background:none;border:0;padding:0;color:var(--blue);font:inherit;cursor:pointer}
.kruimel button:hover{text-decoration:underline}
.pgtitel{font-size:30px;margin:0 0 14px}
.pgtitel small{display:block;font-family:'Open Sans',sans-serif;font-weight:500;font-size:13px;color:var(--muted);margin-top:2px}
.pgtitel small a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}   /* v0.149: "Hoe werkt het?" naar de infopagina */
/* v0.114: de calculator laadt pas bij het openen (scripts/calculator.js); tot dan een korte melding, bij een fout met een knop */
body.calc-laadt .pg[data-pg=configurator] .grid,body.calc-laadt .bnav{display:none!important}
/* v0.150 (review Codex #130, CLS 0,32–0,42 mobiel): zolang de calculator laadt houdt de pagina minstens een scherm hoogte vast,
   zodat de voet onder de vouw begint en niet eerst in beeld staat en dan wegspringt; ook na het laden, anders schuift de voet
   op desktop (waar de calculator korter dan een scherm kan zijn) alsnog omhoog */
body[data-pagina=configurator] .pg[data-pg=configurator]{min-height:100vh;min-height:100svh}
html[data-start=configurator] body:not([data-pagina]) #wrap>.in{min-height:100vh;min-height:100svh}   /* eerste frame, vóórdat app.js de pagina kiest (scripts/start.js) */
.calcstatus{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:6px 0 14px;padding:14px 16px;border:1px solid var(--line);background:#f4f7fa;color:var(--muted);font-size:13.5px}
.calcstatus[hidden]{display:none}
.calcstatus.fout{color:var(--ink);border-color:#f0c2c7;background:#fdf3f4}
.calcstatus .spin{width:16px;height:16px;flex:none;border:2px solid var(--steel);border-top-color:var(--blue);border-radius:50%;animation:calcdraai .8s linear infinite}
@keyframes calcdraai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.calcstatus .spin{animation:none}}
@media print{.calcstatus{display:none!important}}
.cfgtegel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);width:100%;text-align:left;border:1px solid var(--line);background:#fff;padding:0;margin:0 0 18px;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.cfgtegel:hover{border-color:var(--blue);box-shadow:0 8px 22px rgba(0,46,84,.1)}
.cfgbeeld{display:grid;place-items:center;background:#f4f7fa;padding:14px;min-height:230px}
.cfgbeeld svg{width:100%;height:auto;max-height:260px}
.cfgbeeld:empty{min-height:273px}   /* v0.114: de tekening komt pas na de eerste weergave; de ruimte staat al vast (gemeten hoogte van het tegelscherm v0.113), geen verspringing */
@media (max-width:640px){.cfgbeeld:empty{min-height:365px}}
.cfgtekst{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:24px 28px}
.cfgtekst b{font-family:'Oswald',sans-serif;font-size:28px;font-weight:700;color:var(--navy);line-height:1.1}
.cfgtekst>span:not(.mbtn){color:var(--ink);font-size:14px;max-width:520px}
.cfgtekst .mbtn{margin-top:4px}
.mpkop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mpkop .pgtitel{margin:0}
.mpgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.mpleeg{padding:30px 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.grid{display:grid;grid-template-columns:minmax(320px,4.6fr) minmax(360px,7.4fr);gap:18px;align-items:start}
.grid>section{min-width:0} /* anders rekt de tabel het hele grid op (mobiel) */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.card .sub{color:var(--muted);font-size:12px;margin:-6px 0 12px}

/* formulier */
.fg{display:grid;grid-template-columns:1fr 130px;gap:6px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.fg:last-of-type{border-bottom:0}
.fg label{font-size:12px;font-weight:600;color:var(--navy)}
[data-titel]{cursor:help}
.fg .help{grid-column:1/-1;color:var(--muted);font-size:11.5px;margin-top:-2px}
.fg input,.fg select,.gt input,.frm input,.frm textarea{border:1px solid var(--field);background:#fff;border-radius:var(--rb);padding:5px 8px;height:32px;font-size:12.5px;color:var(--ink);font-weight:500;width:100%}
.fg select{font-weight:600;color:var(--navy)}
.fg input[type=number]{text-align:right}   /* getallen rechts, net als in de tabellen (v0.84) */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}   /* getallen echt rechts (v0.84) */
.gt{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.gt col.c0{width:20px}.gt col.c2,.gt col.c3{width:19%}   /* v0.93: vloeren naar de tweede rij, lengte en hoogte breder */
.gt input{min-width:0}
.gt th{text-align:left;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--navy);padding:4px 6px 6px 0;font-weight:700;vertical-align:bottom}
.gt td{padding:3px 6px 3px 0;vertical-align:middle}
.gt td.nr{color:var(--muted);font-weight:700;width:22px;text-align:right;padding-right:8px}
.gt input{height:29px;padding:3px 6px;font-size:12px}
.gt input.num{text-align:right;width:100%}
.gt th:nth-child(3),.gt th:nth-child(4),.gt th:nth-child(5){text-align:right;padding-right:13px;white-space:normal;overflow:visible;vertical-align:bottom;line-height:1.15}   /* koppen van getalkolommen rechts, boven het getal (v0.84) */
.gt tr.actief td.nr{color:var(--blue)}
/* v0.86: per gevel een blok — maten bovenaan, eronder de uitgangspunten van die gevel */
.gt tbody.gv{border-top:1px solid var(--line)}.gt tbody.gv:first-of-type{border-top:0}
.gt tr.gvset td{padding:0 6px 8px 0}
.gvs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;background:#f6f9fc;border:1px solid var(--line);padding:6px 7px}
.gvs label{display:flex;flex-direction:column;gap:2px;font-size:10.5px;font-weight:700;color:var(--muted);min-width:0}
.gvs label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gvs input,.gvs select{height:28px;border:1px solid var(--field);background:#fff;border-radius:var(--rb);padding:2px 6px;font-size:12px;color:var(--navy);font-weight:600;width:100%;min-width:0}
.gvs input{text-align:right}
.gt td.dupcel{white-space:nowrap}
.gt button.weg{border:1px solid var(--field);background:#fff;width:28px;height:30px;cursor:pointer;color:var(--red);font-size:16px;line-height:1;padding:0;margin-left:3px}
.gt button.weg:hover{background:#fdecec;border-color:var(--red)}
.gvplus{margin:8px 0 2px;height:32px;font-size:12.5px}.gvplus svg,.gvplus .thiel-ui-icon{margin-right:2px}
.gvplus[disabled]{opacity:.45;cursor:not-allowed}
.knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vbkort{display:none}
.vbchips{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.chip{border:1px solid var(--lblue);background:var(--lblue);color:var(--navy);border-radius:var(--rb);padding:3px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.chip:hover{background:transparent;border-color:var(--navy)}
.acties4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border:1px solid var(--lblue);background:var(--lblue);border-radius:var(--rb);color:var(--navy);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;min-width:0;white-space:nowrap}
.abtn svg,.abtn .thiel-ui-icon{width:16px;height:16px;flex:none}
.abtn:hover{background:transparent;border-color:var(--navy)}
.abtn.wis{color:#c82333;background:#fdf1f2;border-color:#fdf1f2}
.abtn.wis:hover{background:#fdf1f2;border-color:var(--red)}
.xbtn[hidden]{display:none}   /* v0.149: anders stond "Beginstand" er altijd, ook zonder dat de tekening gedraaid was */
.xbtn{border:1px solid var(--lblue);background:var(--lblue);border-radius:var(--rb);padding:7px 12px;cursor:pointer;color:var(--navy);font-weight:600;font-size:12.5px;height:38px;display:inline-flex;align-items:center;gap:6px;font-family:inherit;text-decoration:none}
.xbtn:hover{background:transparent;border-color:var(--navy)}
.xbtn.wis{color:#c82333;background:#fdf1f2;border-color:#fdf1f2}
.xbtn.wis:hover{background:#fdf1f2;border-color:var(--red)}
.pbtn{background:var(--navy);color:#fff;border:0;border-radius:var(--rb);height:37px;padding:0 16px;font-weight:700;cursor:pointer}
.pbtn:hover{background:var(--blue7)}

/* uitkomst */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 17px;box-shadow:var(--shadow);min-height:82px}
.kpi .lbl{font-size:13px;font-weight:600;color:var(--muted)}
.kpi .big{font-family:'Oswald',sans-serif;font-size:29px;font-weight:600;color:var(--navy);margin-top:4px;line-height:1;white-space:nowrap}
.kpi .big small{font-size:15px;color:var(--muted);font-weight:500;margin-left:3px}
.kpi.hero{background:var(--navy);border-color:var(--navy);color:#fff}
.kpi.hero .lbl,.kpi.hero .big,.kpi.hero .big small{color:#fff}
.staatkop{font-size:11.5px;color:var(--ink2,#3d4b5c);font-weight:500;margin:-4px 0 10px;line-height:1.45;background:none}   /* v0.234: eigen klasse; .kop is de navy kopbalk van site.css (gaf deze regel een donkerblauwe achtergrond) */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.fchip{display:inline-flex;align-items:center;gap:7px;background:var(--lblue);border:1px solid var(--steel);border-radius:0;padding:3px 11px;font-size:11.5px;color:var(--navy);font-weight:600}
.warn{background:#fdf3e7;border:1px solid #f0d9bb;border-left:3px solid var(--orange);border-radius:var(--rb);padding:8px 12px;margin:0 0 10px;font-size:12.5px;color:#7a3e0a}
.rol{overflow-x:auto}
.dt{width:100%;border-collapse:collapse;font-size:12px}
.dt th{background:var(--navy);color:#fff;text-align:left;padding:6px 7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.dt td{padding:3px 7px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap;line-height:1.5}
.dt td.oms{max-width:0;width:100%;white-space:normal;line-height:1.3}   /* v0.89: omschrijving loopt door op een volgende regel */
.dt tr:nth-child(even) td{background:#f8fbfe}
.dt td.n,.dt th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dt td.code{font-weight:600;color:var(--navy);white-space:nowrap;font-size:11.5px;font-variant-numeric:tabular-nums}
/* productfoto's: wit vlak met rand, zoals in een webshop; negatieve marge zodat de regelhoogte gelijk blijft */
.thumb{display:inline-block;vertical-align:middle;flex:none;object-fit:contain;background:#fff;border:1px solid #ddd;border-radius:0;box-sizing:border-box}
.dt td.code .thumb{margin:-2px 8px -2px 0}   /* v0.245 (Stefan 28-10): 22 px binnen de rij, niet meer over de groepskop of de totaalregel */
.thumb.leeg{background:repeating-linear-gradient(90deg,#efe3cf 0 3px,#e5d4b9 3px 5px);border-color:#e5d4b9}
.dt td.aant{font-size:12px;font-weight:500;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt tr.tot td{font-weight:700;background:var(--lblue);border-top:2px solid var(--steel)}
.dt tr.hout td.code{color:#7a5a2a}
.noot{color:var(--muted);font-size:11.5px;margin:10px 0 0;line-height:1.5}
.disc{margin-top:10px;padding:8px 12px;border-left:3px solid var(--blue);background:#f8fbfe;font-size:12.5px;color:var(--navy);font-weight:600}
.acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,10px);background:var(--navy);color:#fff;padding:11px 18px;font-weight:600;font-size:13px;opacity:0;pointer-events:none;z-index:70;transition:opacity .25s,transform .25s;box-shadow:0 8px 24px rgba(0,46,84,.25);max-width:calc(100vw - 32px)}
.toast.aan{opacity:1;transform:translate(-50%,0)}
.toast.fout{background:var(--red)}

/* klant/project, verschilmelding, gevel kopiëren, CSV */
.klantrij{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:2px 0 8px;border-bottom:1px solid var(--line)}
.klantrij label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--navy)}
.klantrij input{border:1px solid var(--field);background:#fff;border-radius:var(--rb);padding:5px 8px;height:32px;color:var(--ink);font-weight:500;width:100%;min-width:0;text-transform:none;letter-spacing:0;font-size:12.5px}
.diff{min-height:0;margin:-6px 0 10px;font-size:12.5px;font-weight:600;color:var(--navy);background:var(--lblue);border:1px solid var(--steel);border-radius:var(--rb);padding:6px 10px;opacity:0;transition:opacity .4s;display:none}
.diff.aan{display:block;opacity:1}
.diff b{font-family:'Oswald',sans-serif;font-weight:600}
.gt col.c5{width:62px}
.gt td.dupcel{padding-right:0;text-align:center}
.gt button.dup[hidden]{display:none}
.gt button.dup{border:1px solid var(--field);background:#fff;border-radius:0;width:28px;height:30px;cursor:pointer;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;padding:0}
.gt button.dup:hover{background:var(--lblue);border-color:var(--blue)}
.gt button.dup svg,.gt button.dup .thiel-ui-icon{width:14px;height:14px}
.xbtn.xls{color:#1D6F42;border-color:#bfe0cb;background:#f2faf5}
.xbtn.xls:hover{background:#e3f4e9;border-color:#1D6F42}

/* schets, weergave, groepen, aannames */
.schetskaart{padding:14px 16px 10px}
.kophead .seg,.kophead .eenhsw{margin-left:4px}.kophead .seg button{padding:4px 9px;font-size:11.5px}
.schetskop{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.btn3d{height:31px;padding:4px 10px;margin-right:auto}
.btn3d svg,.btn3d .thiel-ui-icon{width:17px;height:17px}
.beta{display:inline-block;border:1px solid currentColor;color:var(--blue);font:700 9.5px/1 'Open Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:3px 5px;vertical-align:middle}
/* draaibaar 3D-model (beta) in een pop-up; canvas vult het kader */
.m3d{position:fixed;inset:0;z-index:50;background:rgba(0,20,40,.55);display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
.m3d[hidden]{display:none}
.m3d-kader{background:#fff;width:min(1240px,100%);height:100%;max-height:880px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.m3d-kop{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.m3d-kop h2{margin:0;font-size:19px;margin-right:auto;display:flex;align-items:center;gap:10px}
.m3d-opslaan{height:38px;background:var(--blue)}.m3d-opslaan:hover{background:var(--blue7)}
.m3d-gevel{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);font-size:13px}
.m3d-gevel select{border:1px solid var(--field);height:34px;padding:0 8px;font-weight:500;font-size:12.5px;color:var(--navy);background:#fff;min-width:240px;max-width:440px}
.m3d-gevel[hidden]{display:none}
.m3d-sluit{background:transparent;border:0;width:40px;height:40px;padding:6px;color:var(--navy);cursor:pointer}
.m3d-sluit svg,.m3d-sluit .thiel-ui-icon{width:26px;height:26px}
.m3d-doek{flex:1 1 auto;min-height:0;position:relative;background:#f6f8fa;cursor:grab}
.m3d-doek:active{cursor:grabbing}
.m3d-doek canvas{display:block;position:absolute;inset:0;touch-action:none}
.m3d-lijf{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;position:relative}
/* 3D-werkplek (v0.83): paneel links met dezelfde invoer als de calculator */
.m3d-paneel{overflow-y:auto;border-right:1px solid var(--line);padding:6px 14px 14px;background:#fff;font-size:12.5px}
.m3dp{padding:10px 0;border-bottom:1px solid var(--line)}
.m3dp h3{font-size:15px;margin:0 0 7px}
.m3dp .m3d-gevel{display:block}.m3dp .m3d-gevel select{width:100%;min-width:0;max-width:none}
.m3dp-rij3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:7px}
.m3dp-rij3 label{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3dp-v{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:8px;padding:3px 0;font-weight:600;color:var(--navy);font-size:12px}
.m3d-paneel input,.m3d-paneel select{height:30px;border:1px solid var(--field);background:#fff;padding:0 7px;font-size:12.5px;color:var(--ink);width:100%;min-width:0}
.m3dp-rij3 input{text-align:center}
.m3d-paneel input,.m3dp-v:not(.m3dp-breed) select{text-align:center;text-align-last:center}   /* v0.241 (Stefan 28-10): waarden in het midden, zoals in de gevelregel; in de smalle rij lengte · hoogte · vloeren blijft de eenheid kort */
.m3dp-acc{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:5px}
.m3dp-acc li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 8px;background:#f8fafc}
.m3dp-acc li span{flex:1;min-width:0;display:flex;flex-direction:column}
.m3dp-acc li b{font-size:12.5px;color:var(--navy)}.m3dp-acc li small{color:var(--muted);font-size:11px}
.m3dp-acc li.leeg{color:var(--muted);background:none;border-style:dashed;font-size:12px}
.m3dp-acc .del{border:0;background:none;color:var(--red);font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.m3dp-add{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:6px}
.m3dp-add #m3dAccType{grid-column:1/-1}.m3dp-add [hidden]{display:none}
.m3dp-add .mbtn{height:30px;padding:0 10px;justify-content:center;font-size:12.5px}
.m3dp-noot{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.35}
.m3dp-sleep{margin:8px 0 0;font-size:11.5px;color:var(--navy);line-height:1.4;background:#eaf3fc;padding:6px 8px}
.linkknop{border:0;background:none;padding:0;color:var(--blue);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.m3dp-som{padding-top:10px;color:var(--navy);font-size:12px}
.m3dp-som dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;margin:0}
.m3dp-som dt{font-weight:600;color:var(--muted)}.m3dp-som dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.m3dp-tot{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-weight:700;font-size:13px}
.m3dp-tot span:first-child{color:var(--muted);font-weight:600;margin-right:auto}
.m3dp-tot b{color:var(--blue);font-family:'Oswald',sans-serif;font-size:16px}
/* v0.87: accessoires als regels onder het model; dezelfde regels in de calculator (#accRijen) */
.m3d-acc{grid-column:1/-1;border-top:1px solid var(--line);padding:8px 14px 10px;background:#fff;min-width:0}
.m3d-acckop{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:7px}
.m3d-acckop h3{margin:0;font-size:15px}.m3d-acckop h3 small{font-family:'Open Sans',sans-serif;font-weight:600;font-size:12px;color:var(--muted)}
.m3d-accsleep{font-size:11.5px;color:var(--muted);margin-left:auto}
/* v0.89 (Stefan: geen half lege regels): één regel per accessoire — foto · naam · uitvoering · aantal */
.accrijen{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:5px}
.accr{display:grid;grid-template-columns:30px minmax(0,1fr) 96px auto;align-items:center;gap:7px;border:1px solid var(--line);padding:3px 6px;background:#fff;min-width:0;min-height:38px}
.accr.zonder .accnm{grid-column:span 2}
.accr.aan{border-color:#9cc3e8;background:#f3f8fd;box-shadow:inset 3px 0 0 var(--blue)}
.accr .thumb{border:1px solid #ddd;background:#fff;object-fit:contain}
.accnm{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.accnm b{font-size:12px;color:var(--navy);font-weight:600;line-height:1.2;hyphens:auto;overflow-wrap:break-word}   /* nooit afkappen (v0.89): hoogstens twee regels, anders kleiner (pasTweeRegels) */
.accsub{display:flex;align-items:center;min-width:0;font-size:10.5px;color:var(--muted)}
.accsub small{font-size:10.5px;line-height:1.2}
.accvar{height:26px;border:1px solid var(--field);background:#fff;font-size:11.5px;color:var(--ink);padding:0 3px;width:100%;min-width:0}
.accmeer{font-size:10.5px;white-space:nowrap}
.stap{display:flex;align-items:stretch;height:28px}
.stap button{width:26px;border:1px solid var(--field);background:#fff;color:var(--navy);font-size:16px;line-height:1;cursor:pointer;padding:0}
.stap button:hover:not(:disabled){background:#eaf3fc}.stap button:disabled{color:#b8c2cc;cursor:default}
.stap .accn{width:38px;border:1px solid var(--field);border-left:0;border-right:0;text-align:right;padding:0 6px;font:inherit;font-size:13px;font-weight:700;color:var(--navy);min-width:0}
.accr.aan .accn{color:var(--blue)}
.acckaart .kophead{display:flex;align-items:center;gap:10px}
.accgevel{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy)}
.accgevel[hidden]{display:none}
.accgevel select{height:30px;border:1px solid var(--field);background:#fff;font-size:12px;color:var(--ink);padding:0 6px;max-width:200px}
.acckaart .noot{margin:8px 0 0}
.m3d-maat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer}
.m3d-maat input{width:15px;height:15px;accent-color:var(--blue);margin:0}
.m3d-pknop{display:none}
.m3d-melding{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted);font-size:14px}
.m3d-melding:empty{display:none}
.m3d-voet{margin:0;padding:8px 16px;font-size:12px;color:var(--muted);display:flex;gap:6px 18px;flex-wrap:wrap;border-top:1px solid var(--line)}
.m3d-beta{margin-left:auto}
@media (max-width:900px){.m3d-lijf{grid-template-columns:minmax(0,1fr)}.m3d-pknop{display:inline-flex}
  .m3d-acc{padding:6px 0 8px}.m3d-acckop{padding:0 12px;margin-bottom:5px;flex-wrap:nowrap;align-items:center}.m3d-accsleep{display:none}
  .m3d-acckop h3{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.m3d-acckop .linkknop{font-size:12px;white-space:nowrap}
  .m3d-acc .accrijen{display:flex;overflow-x:auto;gap:6px;padding:0 12px 2px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .m3d-acc .accr{flex:0 0 min(88vw,330px);scroll-snap-align:start}
  .m3d-paneel{position:absolute;left:0;right:0;bottom:0;max-height:62%;z-index:3;border-right:0;border-top:2px solid var(--blue);box-shadow:0 -10px 30px rgba(0,46,84,.18);transform:translateY(105%);transition:transform .25s;visibility:hidden}
  .m3d-kader.paneel-open .m3d-paneel{transform:none;visibility:visible}
  .m3d-maat span:not(.thiel-ui-icon){display:none}
}
@media (max-width:900px){.m3d{padding:0}.m3d-kader{max-height:none}
  /* v0.85: kop onder de statusbalk van de iPhone (safe area), sluitkruis altijd bereikbaar, knoppen op één regel */
  .m3d-kop{position:relative;padding:calc(8px + var(--kopruimte)) 52px 8px 12px;gap:6px}
  .m3d-kop h2{font-size:17px;width:100%}.m3d-sluit{position:absolute;top:calc(2px + var(--kopruimte));right:4px;width:44px;height:44px}
  .m3d-kop .xbtn{height:32px;padding:0 10px;font-size:12px}
  .m3d-kop .m3d-pknop{background:var(--blue);border-color:var(--blue);color:#fff}
  #m3dPrint span:not(.thiel-ui-icon){display:none}#m3dPrint{padding:0 9px}
  .m3d-opslaan{height:32px;padding:0 10px;font-size:12px}
  .m3d-gevel{flex:1;min-width:0}.m3d-gevel select{flex:1;min-width:0;max-width:none}
  .m3d-beta{margin-left:0}.m3d-voet{font-size:11px;padding:6px 12px calc(6px + env(safe-area-inset-bottom))}}
.seg{display:inline-flex;border:1px solid var(--field)}
.seg button{background:#fff;color:var(--navy);border:0;padding:5px 12px;font:600 12.5px/1.2 'Open Sans',sans-serif;cursor:pointer}
.seg button+button{border-left:1px solid var(--field)}
.seg button:hover{background:#eaf3fc}
.seg button.aan{background:var(--blue);color:#fff}
.schets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;align-items:end}
.schets.een{grid-template-columns:1fr}
.schets figure{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.schets figcaption{font-size:11px;color:var(--navy);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.schets figcaption span{color:var(--muted);font-weight:500}
.schets svg{display:block;width:100%;height:auto;max-height:340px}
.schets.een svg{max-height:480px}
.legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:10px;font-size:10.5px;color:var(--muted)}
.legenda i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.legenda i.rond{width:7px;height:7px;border-radius:50%}
.legenda i.hout{height:5px}
.noot.klein{margin:4px 0 0;font-size:11px}
.kophead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.kophead h2{margin:0}
.weergave{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.weergave select{border:1px solid var(--field);background:#fff;border-radius:var(--rb);padding:5px 8px;height:32px;color:var(--navy);font-weight:600;font-size:12.5px;text-transform:none;letter-spacing:0}
.dt tr.grp td{background:var(--lblue);color:var(--navy);font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;padding:5px 9px;border-top:1px solid var(--steel)}
.aannames{margin-top:8px;border:1px solid var(--line);border-radius:var(--rb);padding:6px 10px}
.aannames summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--navy)}
.aannames .noot{margin:6px 0 2px}
.printkop{display:none}
.mr .wijz{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:11px;color:#7a3e0a;background:#fdf3e7;border-radius:0;padding:3px 8px}
.mr .wijz button{color:var(--blue);font-size:11px;font-weight:700;text-decoration:underline;padding:0}
.mr .wijz button{display:inline-flex;align-items:center;gap:3px}.mr .wijz button .thiel-ui-icon{width:12px;height:12px}

/* footer */
/* v0.103: dezelfde compacte voet als de site (styles/site.css .voet): navy, logo met social kanalen, adres en contact; de
   Feliro-regel met Rechten blijft als gecentreerde onderste regel (huisregel Feliro-product) */
.voet{background:var(--navy);color:#cfe0f0;margin-top:auto;font-size:14px;border-top:3px solid var(--blue);text-align:left}
.voet a{color:#fff;text-decoration:none}.voet a:hover{text-decoration:underline}
.voet .in.voet-rooster{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px 64px;align-items:center;padding:28px 40px 26px}   /* v0.118: gelijk aan styles/site.css .voet-rooster */
.voet-merk{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 22px;align-items:center}   /* v0.117: logo, social en knop op één rij */
.voet-logo{display:block;width:150px;margin:0}.voet-logo img{width:150px;height:104px;object-fit:cover;display:block}   /* v0.118: als de site */
.voet-social{display:flex;gap:10px;align-items:center}
.voet-social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;transition:background .2s}
.voet-social a:hover{background:var(--blue);border-color:var(--blue);text-decoration:none}
.voet-social svg,.voet-social .thiel-ui-icon{width:16px;height:16px;fill:#fff}
.voet-contact-icoon{display:none!important}
.voet-kolom{margin:0;line-height:1.6;font-size:14px}.voet-kolom b{color:#fff;font-weight:600}
.knop-voet{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;margin-top:0;background:var(--lblue);color:var(--navy)!important;font:600 14px/1 'Open Sans',sans-serif;text-decoration:none!important;transition:background .15s}
.knop-voet:hover{background:#fff}
.voet footer{max-width:1360px;margin:0 auto;padding:16px 40px 20px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;color:#9fb6cc;font-size:13px}
.voet footer a{color:#cfe0f0;text-decoration:none}
.voet footer a:hover{color:#fff;text-decoration:underline}
.voet-feliro{margin-left:auto}
.voet-links{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}   /* v0.141: als de site */
@media (max-width:980px){.voet .in.voet-rooster{grid-template-columns:1fr 1fr;gap:20px 32px}.voet-merk{grid-column:1/-1}}
@media (max-width:640px){.voet .in.voet-rooster{grid-template-columns:1fr;gap:16px;padding:22px 12px 20px}.voet-merk{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}.voet-contact-icoon{display:inline-flex!important;background:var(--lblue);border-color:var(--lblue)}.voet-merk .knop-voet{display:none}.voet-contact-icoon svg,.voet-contact-icoon .thiel-ui-icon{fill:var(--navy)}.voet-kolom{line-height:1.65}.voet footer{padding:12px 12px 16px}.voet-feliro{margin-left:0}}
/* v0.133 (Stefan 17-10): mobiele voet compact — geen logo, de vier iconen in het midden, geen tussenkop "Contact" (de nummers
   staan direct onder het adres). v0.141 (Stefan 18-10): adres en contact links, gelijk met de tekstblokken erboven; onder de
   streep gecentreerd op twee regels: Disclaimer, Privacy policy en Cookie-instellingen, daaronder © Van Thiel, versie en Feliro.nl */
@media (max-width:640px){
  .voet-logo{display:none}
  .voet-merk{justify-content:center}
  .voet-rooster,.voet .in.voet-rooster{gap:0;padding:20px 28px 16px;text-align:left}   /* v0.143 (Stefan 19-10): adres lijnt uit met de tekst in de kaarten (15 px kantlijn + 1 px rand + 12 px binnenruimte) */
  .voet-merk{margin-bottom:14px}
  .voet-kolom{text-align:left;line-height:1.6}
  .voet-kolom+.voet-kolom b,.voet-kolom+.voet-kolom b+br{display:none}
  .voet-onder,.voet footer{justify-content:center;text-align:center;gap:6px 16px;padding-top:12px;padding-bottom:16px}
  .voet-links{justify-content:center;gap:4px 16px;flex-basis:100%}
  .voet-feliro{margin-left:0;flex-basis:100%}
}
/* v0.160: op 360 px past de regel "© … · versie · Feliro.nl · Rechten" van de shop niet op één regel (352 van 336 px);
   onder 375 px een maat kleiner, zodat hij één regel blijft zoals op de site */
@media (max-width:374px){.voet footer .voet-feliro{font-size:12px}}
@media print{.voet{display:none}}

/* onderbalk mobiel (app-shell: position relative, nooit fixed) */
.bnav{position:relative;flex:0 0 auto;display:none;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px;align-items:center;justify-content:space-between}
.bnav .info{font-family:'Oswald',sans-serif;color:var(--navy);font-size:15px;font-weight:600}
.bnav .info{min-width:0;flex:1 1 auto}
.bnav .info small.diffm{display:none;color:var(--blue);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnav.diff-aan .info small.std{display:none}.bnav.diff-aan .info small.diffm{display:block}
.bnav .info small{display:block;font-family:'Open Sans',sans-serif;color:var(--muted);font-size:11px;font-weight:500}

/* mandje (zijpaneel) */
/* het paneel zit ín de overlay: die knipt het gesloten paneel weg zodat het niet in scrollWidth meetelt */
.mproj{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--rb);padding:9px 10px 6px;margin:0 0 10px;background:#fff}
.mph{display:flex;align-items:flex-start;gap:10px}
.mpn{min-width:0;flex:1 1 auto}.mpn b{display:block;color:var(--navy);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpn small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.mpk{display:flex;gap:6px;margin:7px 0 4px}.mpk .xbtn{height:30px;padding:0 10px;font-size:11.5px}
.mpr summary{cursor:pointer;font-size:11.5px;font-weight:700;color:var(--navy);padding:4px 0;list-style-position:inside}
.mpr summary span{font-weight:500;color:var(--muted)}
.mr{display:grid;grid-template-columns:40px minmax(0,1fr) 70px 64px 64px 24px;gap:4px 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
/* kolommen (v0.83): zonder login kg/st en kg totaal, in de klantweergave prijs/st, totaal € en kg; rechts uitgelijnd */
.mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 70px 64px 82px 52px 24px}   /* kolommen zo breed als de getallen */
.mrc{display:contents}
.mr .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--navy)}   /* v0.84: alle getallen in hetzelfde blauw */
.mr .ptot,.mr .kg{font-weight:600;color:var(--navy)}
.mr.mrkop{padding:4px 0 3px;border-bottom:1px solid var(--steel);font-size:10.5px;font-weight:700;color:var(--muted);text-transform:none}
.mr.mrkop .n{color:var(--muted)}.mr.mrkop>.n:first-of-type{padding-right:7px}   /* kopjes rechts boven de getallen (v0.84) */
.mr.mrsom{border-bottom:0;border-top:2px solid var(--navy);font-weight:700;color:var(--navy)}
.mr.mrsom .n{font-weight:700;color:var(--navy)}
.mr .stuks{padding-right:7px}   /* rechts onder het getal in het aantal-veld */
.mtotaal .mtkg{color:var(--muted);font-size:12px}.mtotaal .mtkg b{font-weight:600}
.mtotaal{display:grid;gap:2px;background:var(--lblue);border:1px solid var(--lblue);border-left-width:3px;border-radius:var(--rb);padding:8px 10px;margin-top:10px;font-size:12.5px;color:var(--navy)}
.mtotaal>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mtotaal b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.mtotaal small{color:var(--muted);font-size:11px;font-weight:500}
.mtotaal .eind{border-top:1px solid var(--steel);margin-top:4px;padding-top:6px;font-weight:700}
.mtotaal .eind b{font-family:'Oswald',sans-serif;font-size:19px}
.mr .c{font-weight:700;color:var(--navy)}
.mr .o{color:var(--muted);font-size:11.5px}
.mr input{width:70px;height:30px;border:1px solid var(--field);border-radius:0;padding:4px 6px;text-align:right;color:var(--navy);font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.mr button{border:0;background:transparent;color:var(--red);cursor:pointer;font-weight:800;font-size:15px}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:10px}
.frm .w{grid-column:1/-1}
.frm>div:not(.w){display:flex;flex-direction:column;justify-content:flex-end}
.frm label{display:block;font-size:12px;font-weight:600;color:var(--navy);margin-bottom:3px}
.frm textarea{height:70px;resize:vertical}
.frm label.chk{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);margin:2px 0 0}
.frm .chk input{width:auto;height:auto;margin-top:3px}
.frm select{border:1px solid var(--field);background:#fff;border-radius:var(--rb);padding:6px 9px;height:34px;font-size:13px;color:var(--ink);font-weight:500;width:100%}
.frm-pc{margin:-4px 0 0;font-size:11.5px;color:var(--blue)}.frm-pc:empty{display:none}
.frm [aria-invalid]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.frm .chk input[aria-invalid]{outline:2px solid var(--red);outline-offset:1px}
.pljson{margin-top:10px}
.pljson summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--muted)}
.pljson[open] summary{margin-bottom:6px}
/* losse artikelen (v0.81): kaartjes met productfoto, uitvoering, aantal en toevoegen */
.losse{padding:18px 20px}
/* v0.110 (Stefan 15-10: niet smooth): de shoppagina scrolt als een gewone pagina (het venster, niet het vak #wrap), met de kop
   vast bovenaan zoals op de site; de calculator en het mandje houden het eigen vak (onderbalk, 3D) */
body[data-pagina=shop]{height:auto;min-height:100dvh;overflow:visible;overscroll-behavior:auto}
body[data-pagina=shop] .wrap{flex:1 0 auto;overflow:visible;-webkit-overflow-scrolling:auto}
body[data-pagina=shop] .top{position:sticky;top:0;z-index:20}
/* v0.109 (Stefan 15-10: één website): de shoppagina zonder eigen kaders; koppen, tekst en kaartjes als op de site (styles/site.css) */
body[data-pagina=shop] .pg[data-pg=shop]{font-size:15px;line-height:1.6}
body[data-pagina=shop] .card.losse{border:0;box-shadow:none;background:transparent;border-radius:0;padding:28px 0 0}
body[data-pagina=shop] .loskop h2{font:700 clamp(22px,2.1vw,27px)/1.15 'Oswald',sans-serif;color:var(--navy)}
body[data-pagina=shop] .cfgtegel{border-radius:0;box-shadow:none;border:1px solid var(--line);margin:28px 0 0}
@media (min-width:641px){body[data-pagina=shop] .cfgtegel{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
/* v0.113 (wens Stefan 16-10): de tegel toont dezelfde voorbeeldberekening met opbouwanimatie als de banner op de home
   (styles/site.css .innovatie-scherm), een maat kleiner en zonder watermerk; alleen spans, want de tegel is een knop */
.cfgbeeld{display:grid;grid-template-columns:minmax(0,1fr);place-items:stretch;align-content:start;min-width:0;padding:0;min-height:0;background:#fff;border-right:1px solid var(--line);text-align:left;color:var(--ink);font:400 13px/1.5 'Open Sans',sans-serif}
.cfgbeeld .scherm-balk{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#eef3f8;border-bottom:1px solid var(--line);font:600 12px/1 'Open Sans',sans-serif;color:var(--navy)}
.cfgbeeld .scherm-balk i{width:9px;height:9px;border-radius:50%;background:#c9d4df}
.cfgbeeld .scherm-balk>span{margin-left:8px}
.cfgbeeld .scherm-inhoud{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
.cfgbeeld .bouw{position:relative;padding:10px 8px 4px;background:linear-gradient(180deg,#f7fafc,#fff);overflow:hidden;display:flex;align-items:center}
.cfgbeeld .bouw-svg{display:block;width:100%;height:auto;max-height:230px}
.cfgbeeld .staat{padding:10px 14px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.cfgbeeld .rijen{display:block;margin-bottom:6px}
.cfgbeeld .rij{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.cfgbeeld .rij b,.cfgbeeld .totaal b,.cfgbeeld .front b{font:600 14px/1.2 'Oswald',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.cfgbeeld .totaal,.cfgbeeld .front{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;font-size:12px;color:var(--muted)}
.cfgbeeld .totaal b{font-size:19px;color:var(--blue)}
/* v0.119: dezelfde versnelde opbouw als de banner op de home (styles/site.css): onderdeel voor onderdeel, slag voor slag */
.cfgbeeld .bouw-svg.bouwt{animation:cyclus 11s infinite}
@keyframes cyclus{0%,90%{opacity:1}100%{opacity:0}}
.cfgbeeld .bouw-svg.bouwt .bs{animation:zet .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--b) * .3s)}
@keyframes zet{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.cfgbeeld .rij{animation:rij 11s infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes rij{0%,4%{opacity:.25;transform:translateX(8px)}14%,88%{opacity:1;transform:none}100%{opacity:.25}}
.cfgtegel:not(.speelt) .bouw-svg,.cfgtegel:not(.speelt) .bs,.cfgtegel:not(.speelt) .rij{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.cfgbeeld .bouw-svg,.cfgbeeld .bs,.cfgbeeld .rij{animation:none!important}}
@media (max-width:640px){.cfgbeeld{border-right:0;border-bottom:1px solid var(--line)}.cfgbeeld .scherm-inhoud{grid-template-columns:1fr}.cfgbeeld .bouw-svg{max-height:190px}.cfgbeeld .staat{border-left:0;border-top:1px solid var(--line);padding:8px 12px}.cfgbeeld .rijen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;margin-bottom:2px}.cfgbeeld .rij{min-width:0}.cfgbeeld .rij>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfgbeeld .totaal,.cfgbeeld .front{display:inline-flex;gap:8px;margin:4px 16px 0 0}}
body[data-pagina=shop] .cfgtekst b{font-size:clamp(22px,2.1vw,27px)}
body[data-pagina=shop] .cfgtekst>span:not(.mbtn){font-size:15px;line-height:1.6}
body[data-pagina=shop] .losgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 16px}
body[data-pagina=shop] .lk{border:0;background:transparent}
body[data-pagina=shop] .lk:hover{box-shadow:none}
body[data-pagina=shop] .lkfoto{aspect-ratio:4/3;border:1px solid var(--line);transition:box-shadow .2s}   /* v0.133 (Stefan 17-10): minder wit boven en onder de foto */
body[data-pagina=shop] .lkbeeld{transition:transform .2s}
body[data-pagina=shop] .lk:hover .lkbeeld{transform:translateY(-3px)}
body[data-pagina=shop] .lk:hover .lkfoto{box-shadow:0 14px 34px rgba(0,46,84,.14)}
body[data-pagina=shop] .lkb{padding:10px 0 0}
body[data-pagina=shop] .lkb h3{font-weight:500}
body[data-pagina=shop] .lkmeta{font-size:clamp(10.5px,2.75vw,12.5px);letter-spacing:-.01em}
body[data-pagina=shop] .chip{font-size:12.5px}
@media (max-width:640px){body[data-pagina=shop] .card.losse{padding-top:20px}body[data-pagina=shop] .cfgtegel{margin-top:18px}body[data-pagina=shop] .losgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}body[data-pagina=shop] .lkb h3{font-size:14px}}
.loskop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 16px;flex-wrap:wrap}
.loskop h2{margin:0 0 2px}.loskop .sub{margin:0;max-width:640px}
.loskop .loszoekw{margin-left:auto}   /* v0.93.2: zoekveld en schakelaar samen rechts (wens Stefan) */
.loskop .eenhsw{align-self:center;height:38px;font-size:12px}.loskop .eenhsw span{padding:0 10px}
.loszoek{display:flex;align-items:center;gap:7px;border:1px solid var(--field);background:#fff;height:38px;padding:0 10px;min-width:420px}   /* v0.93.1: breder (wens Stefan) */
.loszoek svg,/* v0.93.1: breder (wens Stefan) */
.loszoek .thiel-ui-icon{width:16px;height:16px;color:var(--muted);flex:none}
.loszoek input{border:0;outline:0;flex:1;min-width:0;height:100%;font:inherit;font-size:14px;background:transparent}
.loszoek:focus-within{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,114,206,.15)}
/* zoeksuggesties (v0.83), zoals op feliro.nl: foto, naam met markering, uitvoering en artikelnummer */
.loszoekw{position:relative;scroll-margin-top:10px}
.zoekpaneel{position:absolute;z-index:30;top:calc(100% + 4px);right:0;width:max(100%,380px);max-height:min(60vh,440px);overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,46,84,.16)}
.zoekpaneel ul{list-style:none;margin:0;padding:4px 0}
.zoekpaneel li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 10px;align-items:center;padding:6px 12px;cursor:pointer}
.zoekpaneel li img{grid-row:span 2;width:40px;height:40px;object-fit:contain}
.zoekpaneel li b{font-weight:600;color:var(--navy);font-size:13px;line-height:1.3}
.zoekpaneel li small{color:var(--muted);font-size:11.5px;line-height:1.3}
.zoekpaneel li[aria-selected=true],.zoekpaneel li:hover{background:var(--lblue)}
.zoekpaneel mark,.losgrid mark{background:none;color:var(--blue);font-weight:700}
.zoekprobeer{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;font-size:12px;color:var(--muted)}
.zoekpaneel ul:not(:empty)+.zoekprobeer{display:none}
.losleeg{padding:6px 0}.losleeg .zoekprobeer{padding:4px 0}
.lk.flits{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,114,206,.25)}
.loschips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.loschips .chip{padding:5px 11px;font-size:12px}
.loschips .chip.aan{background:var(--navy);border-color:var(--navy);color:#fff}
/* v0.91: Ringlock als aparte, rustigere categorie achter de Tube-Lock-groepen; subcategorieën op een eigen rij */
.lossep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.loschips .chip.rl{background:#fff;border-color:#b9c3cc;color:#5b6770}
.loschips .chip.rl.open,.loschips .chip.rl.aan{background:#5b6770;border-color:#5b6770;color:#fff}
.lossub{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 0 0 10px;border-left:3px solid #b9c3cc;margin-top:2px}
.loschips .chip.sub{background:#f2f4f6;border-color:#f2f4f6;color:#3d4852;font-size:11.5px;padding:4px 10px}
.loschips .chip.sub.aan{background:#5b6770;border-color:#5b6770;color:#fff}
.losnoot{font-size:11px;color:var(--muted);flex-basis:100%}
.lkfoto{position:relative}
.lksys{position:absolute;left:8px;top:8px;background:#5b6770;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.2px;padding:2px 7px;pointer-events:none}
.losgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.lk{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;transition:border-color .15s,box-shadow .15s}
.lk:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(0,46,84,.08)}
.lkfoto{aspect-ratio:4/3;display:grid;place-items:center;background:#fff;border:0;border-bottom:1px solid var(--line);overflow:hidden;width:100%;padding:0;cursor:zoom-in}
.lk h3{cursor:pointer}.lk h3:hover{color:var(--blue)}
/* productpop-up (v0.84) */
.pddlg{border:0;padding:0;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 18px 50px rgba(0,46,84,.3);color:var(--ink)}
.pddlg::backdrop{background:rgba(0,30,56,.55)}
.pdsluit{position:absolute;top:6px;right:8px;border:0;background:none;font-size:26px;line-height:1;color:var(--navy);cursor:pointer;padding:4px 8px;z-index:1}
.pdgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;padding:22px}
.pdfoto{display:grid;place-items:center;border:1px solid var(--line);aspect-ratio:1;background:#fff}
/* v0.158: maattekening onder de foto, met de maat van de gekozen variant (navy lijnen uit de prijslijst) */
.pdbeelden{display:flex;flex-direction:column;gap:10px;min-width:0}
.pdteken{grid-column:1/-1;margin:0;border:1px solid var(--line);background:#f4f7fa;padding:10px 16px 12px}
.pdteken img{display:block;width:100%;height:auto;max-height:200px;object-fit:contain}
.pdteken svg{display:block;width:100%;height:auto;max-height:300px;margin:4px auto 0;overflow:visible}   /* v0.167: vector met de maat erin */
.pdteken figcaption{margin-top:8px;font:600 13px/1.3 'Open Sans',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.pdteken .pdtkkop{margin:0 0 4px;font:400 12px/1.3 'Open Sans',sans-serif;color:var(--muted);letter-spacing:.01em}
.pdteken .pdtkkop b{font-weight:600;color:var(--navy)}
.pdfoto img{width:82%;height:auto;max-height:90%;object-fit:contain}
.pdtekst{display:flex;flex-direction:column;gap:9px;min-width:0}
.pdtekst h3{font-size:19px;line-height:1.2;color:var(--navy);margin:0 26px 0 0}
.pdoms{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.pdvar{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--navy)}
.pdspec{border-collapse:collapse;font-size:12px;width:100%}
.pdspec th{text-align:left;font-weight:600;color:var(--muted);padding:4px 10px 4px 0;border-bottom:1px solid var(--line);width:45%}
.pdspec td{padding:4px 0;border-bottom:1px solid var(--line);color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.pddlg .lkadd{margin-top:4px}
.pdmeer{font-size:12px;color:var(--blue);font-weight:600;text-decoration:none}.pdmeer:hover{text-decoration:underline}
@media (max-width:640px){.pdgrid{grid-template-columns:minmax(0,1fr);padding:18px 16px;gap:12px}.pdfoto{aspect-ratio:16/10}}
.lkfoto img{width:70%;height:auto;max-height:92%;object-fit:contain;transition:transform .25s}
/* v0.133 (Stefan 17-10): de prijs als halfdoorzichtige strook onderaan de foto; de foto schuift iets omhoog zodat hij er niet onder valt */
.lkbeeld{position:relative}
.lkbeeld .lkprijs{position:absolute;left:1px;right:1px;bottom:1px;padding:3px 10px 4px;gap:0 6px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-top:1px solid rgba(0,46,84,.08);pointer-events:none}
.lkbeeld .lkprijs b{font-size:16px;line-height:1.2}
.lkbeeld:has(.lkprijs) .lkfoto{padding-bottom:26px}
.lk:hover .lkfoto img{transform:scale(1.04)}
.lkb{display:flex;flex-direction:column;gap:7px;padding:12px 12px 13px;flex:1}
.lkb h3{font-family:'Oswald',sans-serif;font-size:15.5px;font-weight:600;line-height:1.2;color:var(--navy);margin:0;min-height:2.4em}   /* v0.89: hele naam, niet afkappen */
.lkvar.leeg{border:0;background:none}
.lkonder{display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:4px}
.lkvar{height:34px;border:1px solid var(--field);background:#fff;font:inherit;font-size:13px;padding:0 8px;color:var(--ink);width:100%}
.lkmeta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* v0.133: nummer · VE · gewicht altijd op één regel */
.lkmeta .nr{font-weight:700;color:var(--navy)}
.lkprijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px}
.lkprijs b{font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;color:var(--blue)}
.lkprijs small{font-size:10.5px;color:var(--muted)}
.lkprijs s{font-size:11px;color:var(--muted)}
.lkadd{display:flex;gap:6px}
.lkaantal{width:68px;height:38px;border:1px solid var(--field);text-align:right;padding:0 8px;font:inherit;font-weight:600;color:var(--navy);flex:none}
.lkknop{flex:1 1 0;min-width:0;justify-content:center;padding:0 10px;white-space:nowrap}   /* v0.133: krimpt mee, steekt nooit buiten het kaartje */
body[data-pagina=shop] .lkaantal{width:58px}
.mproj.los{border-left:3px solid var(--blue)}
/* klantweergave /klant/ (v0.80): prijzen alleen na inloggen; deze onderdelen bouwt app.js pas daar in de pagina */
.klant .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi.prijskpi{border-top:3px solid var(--blue)}
.kpi.prijskpi .big{color:var(--blue)}
.kpi.prijskpi .big small.eur{margin:0 3px 0 0;color:var(--blue);font-size:19px}
.kpi.prijskpi .big small:last-child{font-size:11px;font-family:'Open Sans',sans-serif}
.dt td.tot{font-weight:600;color:var(--navy)}
.dt .niet{color:var(--muted);font-size:10.5px;font-style:italic;font-weight:400}
.prijsbalk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 10px;padding:7px 10px;background:var(--lblue);border-radius:var(--rb)}
.kortingveld{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy)}
.kortingveld input{width:64px;height:30px;border:1px solid var(--steel);border-radius:var(--rb);padding:3px 7px;text-align:right;font-weight:600;color:var(--navy);background:#fff}
.kortingveld .demo{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--orange);padding:1px 5px}
.kortingveld[hidden]{display:none}   /* v0.128: hidden wint van inline-flex; een ingelogde klant ziet het demoveld nooit (harde regel Stefan 17-10) */
.prijsnoot{margin-left:auto;font-size:11px;color:var(--muted)}
.prijsblok{display:grid;justify-content:end;margin-top:8px;font-variant-numeric:tabular-nums}
.prijsblok>div{display:flex;justify-content:space-between;gap:28px;min-width:280px;padding:3px 7px;font-size:12.5px;color:var(--ink)}
.prijsblok .kort b{color:var(--green)}
.prijsblok .eind{border-top:2px solid var(--navy);margin-top:3px;padding-top:6px;font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;color:var(--navy)}
.prijsblok .eind span{font-family:'Open Sans',sans-serif;font-size:12.5px;font-weight:700;align-self:center}
.mprijs{display:flex;align-items:baseline;gap:6px;background:var(--lblue);border-radius:var(--rb);padding:8px 10px;margin-top:10px;font-size:12px;font-weight:600;color:var(--navy)}
.mprijs b{margin-left:auto;font-family:'Oswald',sans-serif;font-size:19px;font-weight:600}
.mprijs small{color:var(--muted);font-size:11px}
.mpp{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;min-width:110px}
.err{color:var(--red);font-weight:700;font-size:12.5px;margin-top:6px}
.pl{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pl pre{background:#0f1c2b;color:#d6e6f5;font-size:11px;border-radius:var(--rb);padding:10px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.pl .knoppen{margin-top:8px}

@media (max-width:1180px){
  .kpis,.klant .kpis{grid-template-columns:1fr 1fr}.kpi.hero{grid-column:1/-1}
}
/* kop zoals thiel.nl mobiel (en tablet): wit logo, vlag en menu; de rest gaat naar het menu */
@media (max-width:1100px){
  .hnav,.top .right{display:none}
  .mkop{display:flex}
  .top .in{padding:12px 16px;min-height:76px}
  .top img.logo{height:52px}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:9px 12px;min-height:70px}.kpi .big{font-size:22px}
  .bnav{display:flex}
  .mpgrid{grid-template-columns:1fr}
  .cfgtegel{grid-template-columns:minmax(0,1fr)}.cfgbeeld{min-height:0}.cfgtekst{padding:16px 18px}.cfgtekst b{font-size:24px}
  .pgtitel{font-size:26px}
  .toast{bottom:86px}
  .acties .mbtn{display:none}
}
/* mandjeregels mobiel (v0.83): de getallen op een tweede regel onder de omschrijving, met eenheid erachter */
@media (max-width:640px){
  .mr,.mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 64px 22px;gap:2px 8px}
  .mr .thumb{grid-row:span 2}
  .mr input{width:64px}
  .mr button.del{grid-row:1;grid-column:4}
  .mrc{display:flex;grid-column:2/4;justify-content:flex-end;gap:12px;font-size:11.5px}
  .mrc .n[data-e]::after{content:attr(data-e);font-weight:500;color:var(--muted)}
  .mr.mrkop{display:none}
  .mr.mrsom .stuks{grid-column:3}.mr.mrsom .stuks::after{content:attr(data-e)}
}
/* v0.99: iOS zoomt in op een invoerveld met letters kleiner dan 16px (wens Stefan: zoeken zoomde vervelend in).
   Op smalle schermen daarom alle velden op 16px; inzoomen met twee vingers blijft gewoon mogelijk. */
/* v0.126: op iOS stopt maximum-scale=1 (scripts/app.js) dat inzoomen; de velden mogen dus weer kleiner (wens Stefan 17-10) */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:14px!important}
  .accr select,.accvar,.m3d-gevel select,#accGevel,.accgevel select{font-size:13px!important}
}
@media (max-width:480px){
  .losse{padding:14px 12px}
  .loszoek{min-width:0;width:100%}.loszoekw{width:100%}.zoekpaneel{width:100%}.loskop .eenhsw{margin-left:auto}
  .losgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lkb{padding:10px}.lkb h3{font-size:14px}
  .lkadd{gap:5px}.lkadd .lkaantal{width:50px;padding:0 6px}.lkadd .lkknop{min-width:0;padding:0 8px;font-size:12.5px;gap:4px}.lkadd .lkknop svg,.lkadd .lkknop .thiel-ui-icon{width:14px;height:14px}   /* v0.133 (Stefan 17-10): aantal en een kleinere knop op één regel */
  .klant .dt .kgk,.klant .dt .brk{display:none}
  .prijsnoot{margin-left:0;width:100%}
  .prijsblok{justify-content:stretch}.prijsblok>div{min-width:0}
  .acties4{gap:6px}.abtn{flex-direction:column;gap:2px;height:48px;font-size:11px}
  .schets{grid-template-columns:1fr 1fr;gap:10px}
  .kophead .vbchips{margin-left:0;width:100%}
  /* v0.99 (wens Stefan, iPhone): eenhedenschakelaar rechts op de titelregel; voorbeelden korter en kleiner op één
     regel; de actieknoppen met meer lucht erboven en eronder */
  .kophead .eenhsw{margin-left:auto}
  .loskop{align-items:center}.loskop h2{order:1}.loskop .eenhsw{order:2}.loskop .loszoekw{order:3}
  .vbchips{gap:5px;flex-wrap:nowrap}.vblang{display:none}.vbkort{display:inline}
  .vbchips .chip{font-size:11px;padding:3px 8px;white-space:nowrap}
  .acties4{margin:18px 0 6px}
  .zoekpaneel li{padding:9px 12px}
  .ibtn span:not(.thiel-ui-icon){display:none}.ibtn{padding:0 9px;height:32px}
  .dt tr.tot td:first-child{display:table-cell}
  .dt{font-size:11.5px}.dt td{padding:4px 4px}.dt th{padding:5px 4px;font-size:10.5px;white-space:normal}
  .wrap .in{padding:12px 12px 16px}
  .top .right{gap:6px}
  .wrap .in{padding:12px 12px 16px}
  .card{padding:12px 12px}
  .fg{grid-template-columns:1fr 110px}
  .gt th{white-space:normal;font-size:11px;padding-right:4px}
  .gt col.c2,.gt col.c3{width:16%}.gt col.c4{width:17%}.gt col.c5{width:54px}.gt button.dup,.gt button.weg{width:24px}
  .gvs{gap:5px;padding:5px 6px}
  .fg{grid-template-columns:minmax(0,1fr) 148px}
  .gt th:nth-child(2),.gt td:nth-child(2){min-width:90px}
  .kpis{grid-template-columns:1fr 1fr}.kpi .big{font-size:20px}
}

/* print: A4 met huisstijlkop, hele opzet terug naar normaal (zie AGENTS.md dashboardpakket) */
#print3d,#printMandje{display:none}
@page liggend{size:A4 landscape;margin:10mm 12mm}
@media print{
  /* 3D-afdruk (v0.83): alleen het beeld en de gegevens, A4 liggend */
  body.printmandje>*:not(#printMandje){display:none!important}
  body.printmandje #printMandje{display:block}
  #printMandje .printkop{display:block;border-bottom:1px solid var(--steel);padding:0 0 6px;margin:0 0 10px;font-size:11px}
  #printMandje h2{font-size:20px;margin:0 0 2px}#printMandje .pmkop{font-size:11px;color:var(--muted);margin-bottom:10px}
  #printMandje section{break-inside:auto;margin:0 0 12px}
  #printMandje h3{font-size:14px;margin:0 0 4px;break-after:avoid}#printMandje h3 small{font-family:'Open Sans',sans-serif;font-weight:500;font-size:10.5px;color:var(--muted)}
  #printMandje table{width:100%;border-collapse:collapse;font-size:10.5px}
  #printMandje th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--steel);padding:3px 6px 3px 0}#printMandje th.n{text-align:right}
  #printMandje td{padding:2.5px 6px 2.5px 0;border-bottom:1px solid #edf1f5}#printMandje tr{break-inside:avoid}
  #printMandje td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
  #printMandje .n{text-align:right;font-variant-numeric:tabular-nums}
  #printMandje tfoot td{font-weight:700;color:var(--navy);border-bottom:0}
  #printMandje .pmtot{font-size:12px;color:var(--navy);margin-top:4px}
  #printMandje .disc{font-size:9.5px;color:var(--muted);margin-top:10px}
  body.print3d>*:not(#print3d){display:none!important}
  body.print3d #print3d{display:block;page:liggend}
  #print3d .printkop{display:block;border-bottom:1px solid var(--steel);padding:0 0 6px;margin:0 0 8px;font-size:11px}
  #print3d .p3{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:12px;align-items:start}
  #print3d .p3kop{font-size:11px;color:var(--navy);font-weight:600}
  #print3d figure{margin:0;break-inside:avoid}#print3d figure img{width:100%;max-height:135mm;object-fit:contain;border:1px solid var(--line)}
  #print3d .p3teken{margin-top:8px;border:1px solid var(--line);padding:4px;text-align:center}
  #print3d .p3teken svg{max-height:55mm;width:auto;max-width:100%;display:inline-block}
  #print3d figcaption{font-size:10.5px;color:var(--muted);margin-top:3px}
  #print3d h2{font-size:17px;margin:0 0 6px}#print3d h3{font-size:13px;margin:10px 0 4px}
  #print3d table{border-collapse:collapse;font-size:11px;width:100%}#print3d th{text-align:left;color:var(--muted);font-weight:600;padding:2px 8px 2px 0}
  #print3d td{padding:2px 0;color:var(--navy);font-weight:700}
  #print3d ul{margin:0;padding-left:16px;font-size:11px}#print3d li span{color:var(--muted)}
  #print3d .disc{font-size:9.5px;color:var(--muted);margin-top:10px}
  /* tekeningen op papier begrensd in hoogte (Stefan 15-10): een hoge gevel vult niet meer een hele pagina */
  .schets figure svg{max-height:95mm;width:auto;max-width:100%;margin:0 auto;display:block}
  html,body{height:auto!important;display:block!important;overflow:visible!important;position:static!important;background:#fff}
  /* volgorde op papier: kop → kengetallen → materiaalstaat → tekeningen; figuren breken niet door, de kaart wel */
  .uitkomst{display:flex!important;flex-direction:column}
  .uitkomst .kpis{order:1}.uitkomst .card{order:2}.uitkomst .schetskaart{order:3;break-inside:auto!important;break-before:auto}
  .schets figure{break-inside:avoid}
  .uitkomst .card:not(.schetskaart){break-inside:auto}.dt tr{break-inside:avoid}
  /* briefhoofd op elke afdruk (v0.102): Thiel-logo links, gegevens ernaast; geen Feliro en geen versie op papier */
  .printkop .briefhoofd{display:flex;align-items:center;gap:12px;font-size:10px;line-height:1.45;color:var(--muted);margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
  .printkop .briefhoofd strong{color:var(--navy);font-size:11.5px}
  .printkop .plogo{height:15mm;width:auto;flex:none}
  footer{display:none!important}
  #printMandje .printkop,#print3d .printkop{border-bottom:0;padding-bottom:0}

  .wrap{overflow:visible!important;height:auto!important;flex:none!important}
  .top,#titel{display:none!important}   /* v0.102: het briefhoofd met logo staat in de printkop; geen navy balk en geen dubbele titel op papier */
  .top .right,.ibtn,.bnav,.diff,.knoppen,.acties,.staattools,.aanvraagblok,.eenhsw,.toast,.shophero,.calchero,.kruimel,.invoer,.weergave,.prijsbalk,.losse,.mkop,.ocv,.ocv-overlay,.schetskop,.m3d{display:none!important}
  .top .title{display:block!important}
  .printkop{display:block;border-bottom:1px solid var(--steel);padding:0 0 8px;margin:0 0 10px;font-size:12px}
  .printkop .klant{font-size:13px;color:var(--navy);font-weight:700;margin:2px 0}
  .printkop b{display:block;font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;color:var(--navy)}
  .printkop table{border-collapse:collapse;margin-top:6px}.printkop td{padding:1px 14px 1px 0}
  .grid{display:block}.card{box-shadow:none;break-inside:avoid;border:0;padding:0 0 8px}.kpis{gap:8px}
  .aannames{border:0;padding:0}.aannames summary{display:none}
  .schets{gap:6px 14px}
  .dt th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:12mm 12mm 16mm}
  /* v0.93.1: alleen de materiaalstaat (met de kop: klant, project, versie), zonder kengetallen en tekening */
  body.printstaat .uitkomst .kpis,body.printstaat .schetskaart,body.printstaat #prijsblok{display:none!important}
}

/* motion — subtiel, en helemaal uit bij 'verminder beweging' */
@keyframes inkomen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes flits{0%{background:#d6ebfb}100%{background:transparent}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes teken{to{stroke-dashoffset:0}}
@keyframes ocvIn{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .kpi,.card{animation:inkomen .5s cubic-bezier(.2,.7,.2,1) both}
  .kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}
  .uitkomst .card{animation-delay:.12s}.invoer .card+.card{animation-delay:.08s}
  .abtn,.xbtn,.mbtn,.pbtn,.chip,.ibtn{transition:transform .15s ease,box-shadow .15s ease,background .15s,border-color .15s}
  .abtn:active,.xbtn:active,.mbtn:active,.pbtn:active,.chip:active{transform:scale(.98)}
  .dt tr.flits td{animation:flits 1.4s ease-out}
  .ocv:not([hidden]){animation:ocvIn .25s ease-out}
  .cnt.bump{animation:bump .45s ease-out}
  .schets.teken-in [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:teken .9s ease-out forwards}
  .schets.teken-in rect.vloer,.schets.teken-in g.vloer,.schets.teken-in circle{animation:inkomen .6s .35s both}
}
/* v0.88: na te vragen bij Van Thiel (Odoo wijkt af of ontbreekt): omschrijving en prijs in rood, uitleg in de tooltip */
#staat tr.ctrl td.oms,#staat tr.ctrl td.code,#staat tr.ctrl td.n:not(.kgk){color:#c62828}
.mr.ctrl .o,.mr.ctrl .c,.mr.ctrl .pst,.mr.ctrl .ptot{color:#c62828}
.lk.ctrl h3,.lk.ctrl h3 mark,.lk.ctrl .lkprijs b,.lk.ctrl .lkprijs .niet,.accr.ctrl .accnm b,.pdtekst.ctrl h3,.pdtekst.ctrl .lkprijs b{color:#c62828}
.ctrlnoot{margin:2px 0 8px;font-size:12px;color:#c62828}
/* v0.89 mobiel (wens Stefan 15-10): per gevel de omschrijving op een eigen regel, daaronder lengte, hoogte en vloeren
   met hun kop erboven op één regel, zoals de uitgangspunten eronder. De tabelkop vervalt dan. */
.gt td.maat::before{content:none}
@media (max-width:640px){
  #gevelTabel,#gevelTabel tbody.gv{display:block}
  #gevelTabel thead,#gevelTabel colgroup{display:none}
  #gevelTabel tbody.gv{padding:8px 0 2px}
  #gevelTabel tr[data-i]:not(.gvset){display:grid;grid-template-columns:22px repeat(2,minmax(0,1fr)) auto;gap:6px;align-items:end}
  #gevelTabel tr[data-i]:not(.gvset) td{padding:0}
  #gevelTabel td.nr{grid-row:1;grid-column:1;align-self:center;text-align:left;padding:0;width:auto}
  /* v0.89: omschrijving over de hele breedte, kopieer- en weg-knop achter de maten: geen half lege regels */
  #gevelTabel td.naamcel{grid-row:1;grid-column:2/5}
  #gevelTabel td.dupcel{grid-row:2;grid-column:4;align-self:end;display:flex;gap:4px}
  #gevelTabel td.dupcel button.weg{margin-left:0}
  #gevelTabel td.maat{grid-row:2;display:flex;flex-direction:column;gap:2px}
  #gevelTabel td.maat:nth-child(3){grid-column:2}#gevelTabel td.maat:nth-child(4){grid-column:3}
  .gt td.maat::before{content:attr(data-l);font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #gevelTabel tr.gvset{display:block}
  #gevelTabel tr.gvset td:first-child{display:none}
  #gevelTabel tr.gvset td{display:block;padding:6px 0 8px 28px}
}
/* v0.89 mobiel (wens Stefan 15-10): artikelnummer en foto kleiner in de staat en het mandje, de omschrijving mag over
   twee regels in plaats van afgekapt */
@media (max-width:640px){
  .dt td.code{font-size:9.5px;padding-right:2px;padding-left:2px}
  .dt td.code .thumb{width:18px!important;height:18px!important;margin:-4px 3px -4px 0}   /* ook de houtkleur zonder foto (inline maat) */
  .dt th{font-size:10px;padding:5px 3px}.dt td.aant,.dt td.n{padding-left:2px;padding-right:3px}   /* ruimte voor de omschrijving: hoogstens 2 regels */
  .dt td.oms{white-space:normal;line-height:1.2;font-size:11.5px;text-overflow:clip;overflow:visible}
  .mr .c{font-size:10px}
  .accrijen{grid-template-columns:minmax(0,1fr)}
  .accr{grid-template-columns:28px minmax(0,1fr) 92px auto;gap:6px;padding:3px 5px}
  .accvar{font-size:11px;padding:0 1px}
  .accr .thumb{width:28px;height:28px}
  .stap button{width:24px}.stap .accn{width:32px;padding:0 4px}
  .lossub{padding-left:8px;gap:5px}.loschips .chip.sub{font-size:11px;padding:3px 8px}
  .gvs{gap:4px;padding:5px}.gvs label span{font-size:9.5px;letter-spacing:-.1px}.gvs input,.gvs select{padding:2px 4px}   /* v0.93: vijf velden naast elkaar */
}
/* v0.89: zelfde maat en plek als thiel.nl (gemeten op /over-ons/ en /assortiment/): inhoud 1280 px breed met 40 px rand,
   30 px op tablet en 15 px op de telefoon; paginatitel 60 px, op tablet 45 px, op de telefoon 31,5 px */
@media (max-width:959px){
  .top .in,.wrap .in{padding-left:30px;padding-right:30px}
  .shophero .hin{padding:48px 30px 36px}
}
@media (max-width:639px){
  .top .in,.wrap .in{padding-left:15px;padding-right:15px}
  .shophero .hin{padding:48px 15px 36px}
}

/* ---------- v0.93 (wens Stefan 15-10): knoppen als één familie, passend bij thiel.nl ----------
   primair = Thiel-blauw zoals de Contact-knop (In offertemandje, Toevoegen, Gevel toevoegen); nadruk = navy (Bekijk in 3D);
   secundair = lichtblauw met navy rand bij hover (Afdrukken, Excel, Opslaan …). Rechte hoeken, korte overgangen. */
.mbtn,.xbtn,.abtn,.nbtn,.hcontact,.chip{transition:background-color .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}
.mbtn:active:not(:disabled),.xbtn:active,.abtn:active,.nbtn:active{transform:translateY(1px)}
.mbtn:hover:not(:disabled),.nbtn:hover{box-shadow:0 4px 12px rgba(0,46,84,.18)}
.nbtn{background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:var(--rb);height:38px;padding:0 15px;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:inherit}
.nbtn:hover{background:#00457C;border-color:#00457C}
.nbtn svg,.nbtn .thiel-ui-icon{width:18px;height:18px;flex:none}
.nbtn .beta{color:#fff;border-color:rgba(255,255,255,.65)}
.btn3d{height:36px;padding:0 14px;margin-right:auto}
.gvplusrij{display:flex;justify-content:flex-end;border-top:1px dashed #c9d3dc;margin-top:6px;padding-top:10px}   /* v0.93: rechts onder de laatste gevel */
.gvplus{height:34px;font-size:13px;padding:0 12px 0 10px;margin:0}.gvplus svg,.gvplus .thiel-ui-icon{width:17px;height:17px;margin:0}
.gvteller{font-size:11px;font-weight:600;margin-left:2px;padding-left:8px;border-left:1px solid rgba(255,255,255,.4)}
.xbtn svg,.xbtn .thiel-ui-icon{width:16px;height:16px;flex:none}
.xbtn.xls svg,.xbtn.xls .thiel-ui-icon{color:#1D6F42}
.acties .even{min-width:150px;justify-content:center}
/* eenheden: één schakelknop m · kg ⇄ ft · lb, de actieve kant blauw */
.eenhsw{display:inline-flex;align-items:stretch;padding:2px;border:1px solid var(--field);background:#fff;cursor:pointer;font:600 11px/1 'Open Sans',sans-serif;height:26px;flex:none;border-radius:var(--rb)}
.eenhsw span{display:inline-flex;align-items:center;padding:0 7px;color:var(--muted);white-space:nowrap;transition:background-color .15s,color .15s}
.eenhsw[data-stand=metrisch] span[data-e=metrisch],.eenhsw[data-stand=imperiaal] span[data-e=imperiaal]{background:var(--blue);color:#fff}
.eenhsw:hover{border-color:var(--navy)}
.eenhsw:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mbtn,.xbtn,.abtn,.nbtn,.hcontact,.chip,.eenhsw span{transition:none}.mbtn:active,.xbtn:active,.abtn:active,.nbtn:active{transform:none}}
/* v0.93 (wens Stefan): alle knoppen compacter, minder ruimte boven en onder de tekst; Gevel toevoegen klein en rechts */
.mbtn,.nbtn{height:34px;padding:0 13px;font-size:13.5px}
.xbtn,.abtn{height:32px;padding-top:0;padding-bottom:0}
.btn3d{height:32px;padding:0 12px}
.gvplus{height:28px;font-size:12px;padding:0 9px 0 8px;gap:6px}.gvplus svg,.gvplus .thiel-ui-icon{width:15px;height:15px}
.gvplusrij{margin-top:4px;padding-top:7px}
.lkadd .mbtn,.lkaantal{height:34px}
/* ---------- v0.93.1 (wens Stefan 15-10): materiaalstaat in nette kolommen; delen klein en rechts; aanvraag als blok ---------- */
.staatkaart .kophead{flex-wrap:wrap}.staatkaart .kophead .eenhsw{margin-left:auto}.staatkaart .weergave{margin-left:10px}
#staat th.n,#staat td.aant,#staat td.kgk{white-space:nowrap}
#staat th:nth-child(3),#staat td.aant{width:84px;padding-right:22px;text-align:right}
#staat th:nth-child(4),#staat td.kgk{width:104px;text-align:right;padding-right:10px}
#staat td.kgk small{font-size:.86em;color:var(--muted);font-weight:500}
#staat tr.tot td{font-weight:700;color:var(--navy);border-top:2px solid var(--navy)}
#staat tr.tot td.aant{font-variant-numeric:tabular-nums}
.staattools{display:flex;justify-content:flex-end;gap:4px;margin:12px 0 0;flex-wrap:wrap}
.tbtn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border:1px solid var(--line);background:#fff;color:var(--navy);font:600 12px/1 'Open Sans',sans-serif;cursor:pointer;border-radius:var(--rb);transition:background-color .15s,border-color .15s}
.tbtn svg,.tbtn .thiel-ui-icon{width:15px;height:15px;flex:none}.tbtn:hover{background:var(--lblue);border-color:var(--navy)}
.tbtn.xls svg,.tbtn.xls .thiel-ui-icon{color:#1D6F42}
.aanvraagblok{margin-top:12px;padding:12px 14px;background:var(--lblue);border-left:4px solid var(--blue)}
.aanvraagblok h3{margin:0 0 8px;font-size:17px;color:var(--navy)}
.aanvraagblok .acties{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.aanvraagblok .xbtn{background:#fff;border-color:#fff}.aanvraagblok .xbtn:hover{border-color:var(--navy)}
@media (max-width:640px){
  #staat th:nth-child(3),#staat td.aant{width:auto;padding-right:6px}
  #staat th:nth-child(4),#staat td.kgk{width:auto;padding-right:4px}
  .tbtn{padding:0 10px;height:32px}.tbtn span:not(.thiel-ui-icon){display:none}.tbtn svg,.tbtn .thiel-ui-icon{width:17px;height:17px}   /* mobiel: alleen iconen (naam in de tooltip) */
  .aanvraagblok{padding:10px}.aanvraagblok .acties .mbtn{width:100%;justify-content:center}
}
/* v0.93.1: uitklapmenu in de kop bij aanwijzen of toetsenbordfocus; v0.103: hetzelfde lichte paneel met pijltje-omlaag als op de
   site (styles/site.css .nav .sub), zodat shop en site één kop hebben */
.hdd{position:relative;display:flex;align-items:center}
.hdd>a::after,.hdd>button::after{content:'';display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 0 3px 8px;opacity:.8}
.hddmenu{position:absolute;top:calc(100% + 6px);left:-18px;min-width:220px;background:#fff;border-top:3px solid var(--blue);padding:8px 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility 0s .15s;z-index:60;box-shadow:0 14px 36px rgba(0,46,84,.22)}
.hddmenu::after{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.hdd:hover .hddmenu,.hdd:focus-within .hddmenu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hnav .hddmenu a,.hnav .hddmenu button{display:block;width:100%;color:var(--navy);font:500 15px/1.2 'Open Sans',sans-serif;padding:10px 18px;text-align:left;transition:background .12s,color .12s}
.hnav .hddmenu a:hover,.hnav .hddmenu button:hover{background:var(--lblue);color:var(--blue)}
@media (prefers-reduced-motion:reduce){.hddmenu{transition:none}}
.thumb.leeg.slof{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='12' width='26' height='8' fill='%23e2c896' stroke='%23b8935a'/%3E%3Cpath d='M5 15h9M16 17.5h10M8 18h5' stroke='%23c4a26e' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;border-color:#e5d4b9}   /* v0.93.1: slof = één liggend houtje, anders dan de steigerdelen */
#staat td.oms small.incl{display:block;font-size:.85em;color:var(--muted);font-weight:500}

/* v0.94 proef klantomgeving "Mijn omgeving" (alleen in de klantweergave met een klantsessie) */
.kokop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kokop .pgtitel{margin:0}
.kolive{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.kolive i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,158,99,.18)}
.kolive.ververst i{background:#e0a100;box-shadow:0 0 0 3px rgba(224,161,0,.2);animation:koknip 1.2s ease-in-out infinite alternate}   /* v0.134: stand uit de cache, verse stand onderweg */
@keyframes koknip{to{opacity:.35}}
@media (prefers-reduced-motion:reduce){.kolive.ververst i{animation:none}}
/* v0.129 (plan #91 §2): navigatie van Mijn omgeving. Vanaf 1024 px een zijmenu links naast kop en paneel; daaronder een
   keuzeknop met de actieve subpagina, die op een tablet een lijst onder de knop opent en op een telefoon een lijst van
   onderen (zoals het uitschuifmenu). Dezelfde knoppen in beide vormen; geen tabbalk meer die buiten de pagina valt. */
.kolay{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "nav" "paneel";gap:0}
.kolay>.kokop{grid-area:kop}.kolay>.konavwrap{grid-area:nav}.kolay>.kopaneel{grid-area:paneel;min-width:0;container:kopaneel/inline-size}
.konavwrap{position:relative;margin-bottom:14px}
.kokeus{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);color:var(--navy);font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;text-align:left;cursor:pointer}
.kokeus>svg,.kokeus>.thiel-ui-icon{width:20px;height:20px;flex:none;color:var(--blue)}
.kokeus b{flex:1;min-width:0;font-weight:600}
.kokeus .kokeus-pijl{color:var(--navy);transition:transform .15s}
.kokeus[aria-expanded="true"] .kokeus-pijl{transform:rotate(180deg)}
.kokeus:focus-visible,.konav button:focus-visible,.konav-uit:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.konav{display:none;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,46,84,.16)}
.konav.open{display:block}
.konav-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.konav-kop b{grid-column:1;font:600 15px/1.25 'Oswald',sans-serif;color:var(--navy);overflow-wrap:anywhere}
.konav-kop small{grid-column:1;color:var(--muted);font-size:12.5px}
.konav-sluit{grid-column:2;grid-row:1/span 2;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--navy);cursor:pointer;margin:-6px -8px -6px 0}
.konav-sluit svg,.konav-sluit .thiel-ui-icon{width:20px;height:20px}
.konav-lijst{display:flex;flex-direction:column;padding:6px 0}
.konav-lijst button,.konav-uit{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 16px;background:none;border:0;border-left:3px solid transparent;color:var(--ink,#262a2f);font-family:inherit;font-size:15px;font-weight:500;line-height:1.25;text-align:left;text-decoration:none;cursor:pointer}
.konav-lijst button svg,.konav-uit svg,.konav-lijst button .thiel-ui-icon,.konav-uit .thiel-ui-icon{width:20px;height:20px;flex:none;color:var(--muted)}
.konav-lijst button:hover,.konav-uit:hover{background:var(--lblue);color:var(--navy)}
.konav-lijst button[aria-selected="true"]{border-left-color:var(--blue);background:var(--lblue);color:var(--navy);font-weight:600}
.konav-lijst button[aria-selected="true"] svg,.konav-lijst button[aria-selected="true"] .thiel-ui-icon{color:var(--blue)}
.konav-uit{border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.konav-waas{position:fixed;inset:0;z-index:950;background:rgba(0,46,84,.12)}
/* tablet: de lijst klapt onder de knop uit, over de inhoud heen */
@media (min-width:641px) and (max-width:1023.98px) and (min-height:561px){
  .konav.open{position:absolute;z-index:951;top:calc(100% + 4px);left:0;width:min(360px,100%);max-height:min(70vh,560px);overflow-y:auto}
}
/* telefoon (ook liggend, en een lage tablet): lijst van onderen, met een donkerdere waas; de pagina scrolt niet mee */
@media (max-width:640px),(max-width:1023.98px) and (max-height:560px){
  .konav.open{position:fixed;z-index:951;left:0;right:0;bottom:0;max-height:82dvh;overflow-y:auto;border:0;border-top:3px solid var(--blue);padding-bottom:env(safe-area-inset-bottom,0px);animation:konavOp .18s ease-out}
  .konav-waas{background:rgba(0,46,84,.45)}
  .konav-lijst button,.konav-uit{min-height:50px}
  html.konav-open .wrap{overflow:hidden!important}
}
@keyframes konavOp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.konav.open{animation:none}}
/* desktop: zijmenu links, sticky in beeld; de knop en het kruisje zijn er niet */
@media (min-width:1024px){
  .kolay{grid-template-columns:232px minmax(0,1fr);grid-template-areas:"nav kop" "nav paneel";column-gap:28px;align-items:start}
  .konavwrap{position:sticky;top:16px;margin:0;align-self:start}
  .kokeus,.konav-sluit{display:none}
  .konav,.konav.open{display:block;position:static;box-shadow:none;max-height:none;animation:none}
  .konav-waas{display:none}
  .kolay>.kokop .pgtitel small{display:none}   /* bedrijf en klantnummer staan bovenaan het zijmenu */
}
.kotegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.kotegel{border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kotegel svg,.kotegel .thiel-ui-icon{width:20px;height:20px;color:var(--blue);margin-bottom:4px}
.kotegel b{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;color:var(--navy);line-height:1.2;overflow-wrap:anywhere}
.kotegel small{color:var(--muted);font-size:12px}
.kotegel.let{border-top:3px solid var(--orange)}
.kotl{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kocontact{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;background:var(--lblue);padding:10px 14px;margin-bottom:14px;font-size:13px}
.kocontact span:first-child{font-weight:600;color:var(--navy)}
.kosnel{margin-bottom:8px}
.kogrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.kokaart h2.kosub{margin-top:18px}
.kodl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.kodl>div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid #edf1f5}
.kodl dt{color:var(--muted);font-size:12.5px}
.kodl dd{margin:0;overflow-wrap:anywhere}
.koleeg{color:var(--muted);font-style:italic}
.kocontacten{list-style:none;margin:0;padding:0}
.kocontacten li{display:grid;padding:7px 0;border-bottom:1px solid #edf1f5}
.kocontacten small{color:var(--muted)}
.kocontacten span{font-size:12.5px;overflow-wrap:anywhere}
.koadressen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.koadres{border:1px solid var(--line);padding:9px 11px;display:flex;flex-direction:column;gap:1px;font-size:12.5px}
.kowijzig summary{display:inline-flex;list-style:none;cursor:pointer}
.kowijzig summary::-webkit-details-marker{display:none}
.kowijzig select,.kowijzig textarea{width:100%}
.kowijzig textarea{min-height:90px}
.kotw{overflow-x:auto}
.kotabel table{width:100%;border-collapse:collapse;font-size:13px}
.kotabel th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:7px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
.kotabel td{padding:8px;border-bottom:1px solid #edf1f5;vertical-align:top}
.kotabel .n{text-align:right;white-space:nowrap}
.kotabel tfoot td{border-top:2px solid var(--line);border-bottom:0;font-weight:600}
.kotabel .noot{margin:10px 0 0}
/* v0.142 (Stefan 19-10): datums op één regel (dd-mm-jjjj), werkbalk met zoeken en Excel, nummer/datum onder de eerste kolom op de telefoon */
.kotabel td.kod{white-space:nowrap}.kotabel td.kod .kost{display:table;margin-top:3px}
.kowerk{display:flex;gap:8px;align-items:stretch;margin:0 0 10px}.kowerk .kozoek{flex:1;min-width:0;margin:0}
.kowerk .kocsv{flex:none;color:#1D6F42;border-color:#bfe0cb;background:#f2faf5}.kowerk .kocsv:hover{border-color:#1D6F42}
.kotabel .komob{display:none}
.kotabel tfoot td:first-child{white-space:nowrap}
.kotw{overscroll-behavior-x:contain}
.kolaat td{background:#fff6f0}
.kost{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;background:var(--lblue);color:var(--navy);white-space:nowrap}
.kost.st-sale,.kost.st-geleverd{background:#e7f5ee;color:#1d6b43}
.kost.st-draft,.kost.st-sent,.kost.st-gepland{background:#fff4e5;color:#8a4b00}
.kost.st-cancel{background:#f1f1f1;color:#777}
.kost.st-laat{background:#fdecee;color:#a11c2b}
.kost.st-afroep{background:var(--lblue);color:var(--navy)}
.kost.st-aq-ontvangen{background:var(--lblue);color:var(--navy)}
.kost.st-aq-verwerking{background:#fff4e5;color:#8a4b00}
.kost.st-aq-concept{background:#e7f5ee;color:#1d6b43}
.kostuit{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.koaqmeta{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:12px 0 0;font-size:13px}
.koaqmeta dt{color:var(--muted)}.koaqmeta dd{margin:0;overflow-wrap:anywhere}
.koleeg{text-align:center;padding:28px 18px}.koleeg p{margin:0 0 12px}
.koaanvragen .kouit b,.koaanvragen .koaqd{white-space:nowrap}
.kost.st-aq-fout{background:#fdecee;color:#a11c2b}
/* v0.250: het aparte blok met orders uit de Odoo-sandbox; gestippelde rand en een grijs label, zodat het nooit op live lijkt */
.kotest{background:#fffaf0;border:1px dashed #d9a441}   /* amber: tijdelijk, testdata */
.kotsttitel{font-size:15px;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.kost.st-test{background:#f6c453;color:#5c3d00;text-transform:uppercase;letter-spacing:.04em}
.kotstaq{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.bhaqfout{color:#a11c2b!important}
.bhaqcontact{margin:0 0 6px;font-size:13px;line-height:1.5}
.bhaanvragen .bhaq{font-weight:700;white-space:nowrap}
.kokort{color:var(--green);font-weight:600}
.kouit{background:none;border:0;padding:0;cursor:pointer;color:var(--blue);display:inline-flex;align-items:center;gap:5px;text-align:left}
/* v0.138: openklappen met de chevron-right uit het iconenpakket (masker in de tekstkleur); open = 90° gedraaid */
.kouit::before,.bhaq::before{content:"";flex:none;width:10px;height:10px;margin-right:-3px;background-color:currentColor;-webkit-mask:var(--tui-chevron-right) center/contain no-repeat;mask:var(--tui-chevron-right) center/contain no-repeat;transition:transform .15s;forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.kouit[aria-expanded="true"]::before,.bhaq[aria-expanded="true"]::before{transform:rotate(90deg)}
.bhaanvragen .bhaq{display:inline-flex;align-items:center;gap:5px}
@media (prefers-reduced-motion:reduce){.kouit::before,.bhaq::before{transition:none}}
.kodetrij>td{background:#f7f9fb;padding:10px 12px 14px}
.kodet .kotl{margin:12px 0 4px}
table.kosub{width:100%;border-collapse:collapse;background:#fff;font-size:12.5px}
table.kosub th,table.kosub td{padding:5px 8px}
table.kosub small{color:var(--muted)}
.kolev{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px}
.kodocs{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.kodoc{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.kodoc svg,.kodoc .thiel-ui-icon{width:15px;height:15px}
.kodoc:hover{text-decoration:underline}
.kosterkte{display:flex;align-items:center;gap:10px}
.kobalk{flex:0 0 96px;height:5px;background:#e6ebf0;position:relative}
.kobalk i{position:absolute;inset:0 auto 0 0;width:0;background:var(--red);transition:width .2s}
.kobalk i[data-s="1"]{width:25%}.kobalk i[data-s="2"]{width:50%;background:var(--orange)}.kobalk i[data-s="3"]{width:75%;background:var(--blue)}.kobalk i[data-s="4"]{width:100%;background:var(--green)}
.kosterkte small{color:var(--muted);font-size:12px}
/* v0.142 (Stefan 19-10): kortere sterktebalk, zodat "Minimaal 10 tekens, met letters en cijfers." op één regel past */
.kobalk{flex-basis:40px}
.err.ok{color:var(--green)}
.kostatus p{margin:0 0 10px}
.kostatus.laadt p::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:kodraai .8s linear infinite;vertical-align:-2px}
@keyframes kodraai{to{transform:rotate(360deg)}}
/* aanvraagformulier bij een bekende klant: keuze contact en afleveradres, bedrijfsgegevens vast */
.kokeuze{background:var(--lblue);padding:10px 12px;margin-bottom:4px}
.kokeuze .noot{margin:0 0 8px;font-size:12px}
.kokeuzerij{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.kokeuze select{width:100%}
.koander{border:1px solid var(--line);background:#fff;margin:10px 0 0;padding:8px 10px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.koander legend{font-size:12px;font-weight:600;color:var(--navy);padding:0 4px}
.koander input{width:100%}
.frm input[readonly]{background:#f3f5f7;color:var(--muted);border-color:#d6dde4}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.plstatus{border-left:3px solid var(--green);padding:4px 0 4px 10px;margin-bottom:10px}
.plstatus .noot{margin:4px 0 0}
@media (max-width:900px){
  .kotegels{grid-template-columns:1fr 1fr}
  .kogrid,.koadressen{grid-template-columns:1fr}
  .kodl>div{grid-template-columns:120px 1fr}
  .kohide{display:none}
}
@media (max-width:640px){
  .kotabel .kosm{display:none}.kotabel .komob{display:block;font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
  .kotabel .kouit{flex-wrap:wrap;column-gap:5px;row-gap:1px}.kotabel .kouit b{flex:1 1 0;min-width:0}.kotabel .kouit .komob{flex-basis:100%;padding-left:12px}
  .koorders .kost{font-size:11px;padding:1px 5px}.koorders td .kost+.kost{display:table;margin:3px 0 0}
  .kotabel th,.kotabel td{padding-left:5px;padding-right:5px}
  .kotabel td.n>.kodoc{font-size:0;gap:0}.kotabel td.n>.kodoc svg,.kotabel td.n>.kodoc .thiel-ui-icon{width:18px;height:18px}
  .kowerk .kocsv span:not(.thiel-ui-icon){display:none}
}
@media (max-width:520px){
  .kotegels{grid-template-columns:1fr}
  .kokeuzerij,.koander{grid-template-columns:1fr}
}
@media print{.pg[data-pg="account"] .konavwrap,.pg[data-pg="account"] .konav-waas,.pg[data-pg="account"] .kosnel{display:none!important}.pg[data-pg="account"] .kolay{display:block}.kolay>.kokop .pgtitel small{display:inline}}
/* beheer (v0.101): klantaccounts voor bestaande Odoo-klanten en het watermerk per klant */
.bhkaart{margin-bottom:14px}.bhkaart h2{margin-bottom:4px}
.bhzoekw .loszoek{min-width:0;width:100%;max-width:520px}
.bhsugg{list-style:none;margin:6px 0 0;padding:0;max-width:520px;border:1px solid var(--line);border-top:0}
.bhsugg:empty{display:none}
.bhsugg button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:#fff;border:0;border-top:1px solid var(--line);padding:9px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.bhsugg button:hover:not(:disabled),.bhsugg button:focus-visible{background:var(--lblue)}
.bhsugg button:disabled{cursor:default;opacity:.55}
.bhsugg b{color:var(--navy);font-weight:600;font-size:13.5px}.bhsugg small{color:var(--muted);font-size:12px}
.bhnieuw[hidden]{display:none}
.bhnieuw{display:grid;gap:12px;max-width:520px;margin-top:12px;padding:14px;background:var(--lblue)}
.bhgekozen{margin:0;font-size:13.5px;color:var(--navy)}
.bhveld{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--navy)}
.bhveld small{font-weight:400;color:var(--muted)}
.bhwwrij2{display:flex;gap:8px}
.bhveld input,.bhww{flex:1;min-width:0;height:36px;border:1px solid var(--field);padding:0 10px;font:500 14px 'Open Sans',monospace;color:var(--ink);background:#fff}
.bhvink{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.bhvink input{width:18px;height:18px;accent-color:var(--blue)}
.bhmelding:empty{display:none}
.bhmelding p{margin:0 0 14px;padding:10px 14px;background:#eaf6ee;border-left:3px solid var(--green);font-size:13.5px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bhcode{font:600 14px/1 ui-monospace,Menlo,monospace;background:#fff;padding:5px 8px;border:1px solid var(--line);user-select:all}
.bhtabel{overflow-x:auto}
.bhlijst{width:100%}.bhlijst td{vertical-align:middle}
.bhlijst td small{display:block;color:var(--muted);font-size:11.5px}
.bhlijst .c{text-align:center}.bhlijst .r{text-align:right}
.bhnr{font-variant-numeric:tabular-nums;color:var(--muted)}
.bhlabel{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);border:1px solid currentColor;padding:0 5px;margin-left:4px;vertical-align:1px}
.bhintern td{background:#f6f8fa}
.bhuit td:not(:nth-child(4)):not(:nth-child(5)){opacity:.5}
.bhwwin{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0}
.bhwwin label{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;font-size:12.5px;font-weight:600;color:var(--navy)}
/* v0.233: fout en eis direct onder het startwachtwoord in de rij; de opslaanknop houdt zijn tekst, ook op de telefoon */
.bhwwfout{margin:0;color:var(--red);font-size:13px;font-weight:700}.bhwwfout:empty{display:none}
.bhwweis{display:block;color:var(--muted);font-size:11.5px;margin:2px 0 6px;white-space:normal}
@media (max-width:640px){.bhwwin .bhwwopslaan{flex:1 1 100%;justify-content:center;min-height:44px}}
/* schakelaar: echte checkbox (toetsenbord en schermlezer), zichtbaar als schuifje */
.bhsw{position:relative;display:inline-flex;cursor:pointer}
.bhsw input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.bhknop{width:38px;height:22px;border-radius:11px;background:#c9d3dc;position:relative;transition:background .15s}
.bhknop::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.bhsw input:checked+.bhknop{background:var(--blue)}.bhsw input:checked+.bhknop::after{transform:translateX(16px)}
.bhsw input:focus-visible+.bhknop{outline:2px solid var(--blue);outline-offset:2px}
.bhsw input:disabled+.bhknop{opacity:.5}
@media (max-width:640px){
  .bhlijst th:nth-child(2),.bhlijst td.bhnr,.bhintern td:nth-child(2){display:none}
  .bhlijst .bhreset{padding:0 8px;width:36px}.bhlijst .bhreset span:not(.thiel-ui-icon){display:none}
  .bhlijst th,.bhlijst td{padding-left:6px;padding-right:6px}
  .bhaanvragen .bhsmal{display:none}.bhlijst.bhaanvragen th:nth-child(2){display:table-cell}   /* v0.132: aanvragen op de telefoon zonder regels, gewicht en mail */
  .bhwwrij2{flex-wrap:wrap}.bhwwrij2 .xbtn{width:100%}
  /* v0.142: klantaccounts op de telefoon als kaarten — naam en sleutelknop boven, de twee schakelaars met hun label
     naast elkaar, inlogstand eronder (de tabel met zes kolommen was op 390 px niet te lezen) */
  .bhklanten,.bhklanten tbody{display:block;width:100%}
  .bhklanten thead{display:none}
  .bhklanten tbody>tr:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:6px 12px;margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r,0);background:#fff}
  .bhklanten tbody>tr>td{display:block;padding:0;border:0;min-width:0;background:none}
  .bhklanten td.oms{grid-column:1/3;grid-row:1;max-width:none;width:auto;font-size:13.5px}
  .bhklanten td.oms .bhnaam{font-weight:700}
  .bhklanten td.r{grid-column:3;grid-row:1;align-self:start}
  .bhklanten td.bhnr{display:none}
  .bhklanten td.bhwm{grid-column:1;grid-row:2}.bhklanten td.bhact{grid-column:2;grid-row:2}
  .bhklanten td.bhwm,.bhklanten td.bhact{display:flex;align-items:center;gap:8px;text-align:left;font-size:12.5px;font-weight:600;color:var(--navy)}
  .bhklanten td.bhwm::before,.bhklanten td.bhact::before{content:attr(data-l);order:2}
  .bhklanten td.bhinlog{grid-column:1/-1;grid-row:3;min-width:0;padding-top:8px;border-top:1px solid #eef2f6}
  .bhklanten td.bhinlog b{display:inline;margin-right:6px}
  .bhklanten tbody>tr.bhintern{display:block;background:#f6f8fa}
  .bhklanten tr.bhintern td{background:none}.bhklanten tr.bhintern td:not(.oms){display:none}
  .bhklanten tr.bhwwrij:not([hidden]){display:block;margin-top:-6px}
}
@media (prefers-reduced-motion:reduce){.bhknop,.bhknop::after{transition:none}}
/* klantkaart "Mijn bestellingen" (v0.104, naar de klantkaart van het Order Intake Dashboard): kengetallen, grafiek,
   bestellingen naast open facturen en offertes, meest bestelde artikelen; ook in het beheer en als PDF (A4 liggend) */
.kkkaart{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.kkkpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.kkkpis.acht{grid-template-columns:repeat(4,minmax(0,1fr))}
.kkk{border:1px solid var(--line);background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kkk .kkl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kkk b{font-family:'Oswald',sans-serif;font-weight:600;font-size:21px;color:var(--navy);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kkk small{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.kkk.hero{background:var(--navy);border-color:var(--navy);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.kkk.hero .kkl,.kkk.hero small{color:#cfe0f0}.kkk.hero b{color:#fff;font-size:24px}
.kkk.let{border-top:3px solid var(--red)}
.kkk .neg,.kktab td.neg{color:#c0282f;font-weight:600}
.kkdelta{display:inline-block;font-size:11px;font-weight:700;padding:0 5px}
.kkdelta.op{background:#e7f5ee;color:#1d6b43}.kkdelta.neer{background:#fdecee;color:#a11c2b}
.kkblok{border:1px solid var(--line);background:#fff;padding:12px 14px;min-width:0}
.kkblok h3{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin:0 0 8px}
.kkkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kklegenda{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.kklegenda i{display:inline-block;width:11px;height:11px;margin-left:6px}
.kklegenda i.kkdit{background:var(--blue)}.kklegenda i.kkgepland{background:#9cc7ec}.kklegenda i.kkvorig{background:#c9d3dc}
.kkgrafiek{display:block;width:100%;height:auto;max-height:300px}
.kkgrafiek .kkas{stroke:#e6ebf0;stroke-width:1}
.kkgrafiek .kklbl{font:500 11px 'Open Sans',sans-serif;fill:var(--muted)}
.kkgrafiek .kkwaarde{font:700 9.5px 'Open Sans',sans-serif;fill:var(--navy)}.kkgrafiek .kkwaarde.vorig{fill:#8a96a3;font-weight:600}
.kkgrafiek .kkdit{fill:var(--blue)}.kkgrafiek .kkgepland{fill:#9cc7ec}.kkgrafiek .kkvorig{fill:#c9d3dc}
.kkgrafiek rect:hover{opacity:.8}
.kkraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}   /* v0.141: even breed (was 1.25fr/1fr) */
.kkrechts{display:flex;flex-direction:column;gap:14px;min-width:0}
.kktab{width:100%;border-collapse:collapse;font-size:12.5px}
.kktab th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:5px 7px;border-bottom:2px solid var(--navy);white-space:nowrap}
.kktab td{padding:6px 7px;border-bottom:1px solid #edf1f5;vertical-align:top;white-space:nowrap}
.kktab td:first-child{white-space:normal}
.kktab td small{display:block;color:var(--muted);font-size:11px}
.kktab .n{text-align:right;font-variant-numeric:tabular-nums}
.kktab tfoot td:first-child{white-space:nowrap}
.kktab tfoot td{font-weight:700;color:var(--navy);border-top:2px solid var(--navy);border-bottom:0;background:#f6fafd}
.kklink{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer}
.kklink:hover{text-decoration:underline}
.kktop{list-style:none;margin:0;padding:0}
.kktop li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 14px;padding:9px 0;border-bottom:1px solid #edf1f5}
.kktop li:last-child{border-bottom:0}
.kknaam{display:flex;flex-direction:column;min-width:0}
.kknaam b{font-size:13.5px;color:var(--navy);font-weight:600;overflow-wrap:anywhere}
.kknaam small{font-size:11.5px;color:var(--muted)}
.kkprijs{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.kkprijs small{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.kkadd{display:inline-flex;align-items:center;gap:6px}
.kkaantal{width:68px;height:38px;border:1px solid var(--field);padding:0 8px;text-align:right;font:600 16px 'Open Sans',sans-serif;color:var(--navy);background:#fff}
.kkniet{font-size:11.5px;color:var(--muted);white-space:nowrap}
.kkpdfknop svg,.kkpdfknop .thiel-ui-icon{width:16px;height:16px}
/* v0.106: knoppen in Mijn bestellingen even breed, met een dun donker semi-transparant randje (Stefan 15-10) */
.pg[data-pg=account] .kosnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:640px}
.pg[data-pg=account] .kosnel>*,.kkpdfknop,.kkadd .xbtn,.bhkaartknoppen .xbtn{border:1px solid rgba(0,46,84,.28);justify-content:center}
.pg[data-pg=account] .kosnel>*{width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.2}
.kkdoc{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.kkdoc svg,.kkdoc .thiel-ui-icon{width:14px;height:14px}.kkdoc:hover{text-decoration:underline}
.kokop .kkpdfknop{margin-left:auto}
.koafspraken h2{font-size:15px;margin-bottom:8px}
.koafsrij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.koafsrij>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.koafsrij b{color:var(--navy);font-weight:600;overflow-wrap:anywhere}.koafsrij small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.kozoek{min-width:0;width:100%;max-width:440px;margin-bottom:10px}
.kozoek input{font-size:16px}   /* 16 px: iOS zoomt dan niet in */
.kobestel{margin-left:auto}
.bhnaam{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--blue);cursor:pointer;text-align:left}
.bhnaam:hover,.bhnaam:focus-visible{text-decoration:underline}
.bhklantkaart:empty{display:none}
.bhklantkaart{margin-top:6px;padding-top:14px;border-top:3px solid var(--blue);scroll-margin-top:12px}
.bhkaartkop{align-items:center}
.bhkaartknoppen{display:inline-flex;gap:8px;margin-left:auto}
@media (max-width:1100px){.kkkpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kkkpis.acht{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.kkraster{grid-template-columns:1fr}.kkkpis.acht{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .kkkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kkk b{font-size:18px}.kkk.hero b{font-size:20px}
  .kktop li{grid-template-columns:minmax(0,1fr) auto}
  .kkadd{grid-column:1/-1}.kkadd .xbtn{flex:1;justify-content:center}
  .kkaantal{width:76px}
  .koafsrij{grid-template-columns:1fr}
  .kkbest .kktab th:nth-child(5),.kkbest .kktab td:nth-child(5){display:none}
  .kkdoc span:not(.thiel-ui-icon){display:none}.kkdoc svg,.kkdoc .thiel-ui-icon{width:18px;height:18px}
  .pg[data-pg=account] .kosnel{gap:6px}.pg[data-pg=account] .kosnel>*{font-size:12px;padding:6px 6px}
  .kkbest .kktab th:nth-child(2),.kkbest .kktab td:nth-child(2),.kkbest .kktab th:nth-child(3),.kkbest .kktab td:nth-child(3){display:none}
  .kkbest .kktab tfoot td:first-child{white-space:nowrap}
  .kkrechts .kktab th:nth-child(2),.kkrechts .kktab td:nth-child(2){display:none}
  .kktab{font-size:12px}.kktab th,.kktab td{padding:5px 5px}
  .kokop .kkpdfknop{margin-left:0}
  .bhkaartknoppen{margin-left:0;flex-wrap:wrap}
}
/* v0.111 Bonusmeter (tab in de Klantkaart, ook in de PDF) en de staffel in het beheer; rustig, zoals v0.106 */
.kkkpis.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.bmmeter{padding:4px 2px 0}
.bmlbls,.bmhierrij{position:relative;height:22px}
.bmlbl,.bmhier{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bmlbl.gehaald{color:var(--navy)}
.bmhier{top:3px;color:var(--navy);font-weight:700}
.bmbaan{position:relative;height:22px;background:#edf2f7;margin:2px 0 0}
.bmbaan i{position:absolute;top:0;bottom:0;left:0;display:block}
.bmgepland{background:#9cc7ec}.bmomzet{background:var(--blue)}
.bmgrens{width:0!important;top:-6px!important;bottom:-6px!important;border-left:2px dashed #8a96a3;margin-left:-1px}
.bmgrens.gehaald{border-left-style:solid;border-left-color:var(--navy)}
.bmgrafiek .bmdrempel{stroke:#8a96a3;stroke-width:1.2;stroke-dasharray:5 4}
.bmgrafiek .bmlbl{font:600 11px 'Open Sans',sans-serif;fill:var(--muted)}
.bmgrafiek .bmlijn{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.bmgrafiek .bmlijn.omzet{stroke:var(--blue)}.bmgrafiek .bmlijn.verwacht{stroke:#9cc7ec;stroke-dasharray:6 5}
.bmgrafiek .bmpunt{fill:var(--blue);stroke:#fff;stroke-width:2}
.kklegenda i.bmleg{height:3px;width:16px}.kklegenda i.bmleg.omzet{background:var(--blue)}.kklegenda i.bmleg.verwacht{background:repeating-linear-gradient(90deg,#9cc7ec 0 5px,transparent 5px 9px)}
.kktab tr.bmnu td{background:#f2f8fd;font-weight:600;color:var(--navy)}
.bmuitleg{margin:0;font-size:12px}
.bhbonus{margin:0 0 14px}
.bhbonus h3{font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin:0 0 4px}
.bostaffels{list-style:none;margin:10px 0 6px;padding:0;display:flex;flex-direction:column;gap:8px;max-width:520px}
.bostaffel{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;align-items:end}
.bostaffel label{display:grid;gap:3px;font-size:12px;font-weight:600;color:var(--navy);min-width:0}
.bostaffel input{height:38px;border:1px solid var(--field);padding:0 10px;font:600 16px 'Open Sans',sans-serif;color:var(--ink);background:#fff;text-align:right;min-width:0}
.bostaffel .boweg{height:38px;min-width:38px;justify-content:center;font-size:18px;border:1px solid rgba(0,46,84,.28)}
.bhbonus .bhveld{max-width:520px;margin-top:4px}
.bhbonus .bhveld input{font-family:'Open Sans',sans-serif;font-size:16px}
.bovb{margin:8px 0;font-size:12.5px}
@media (max-width:640px){.kkkpis.vier{grid-template-columns:repeat(2,minmax(0,1fr))}.bmlbl,.bmhier{font-size:11px}}
/* klantoverzicht als PDF: A4 liggend, opbouw zoals de klantkaart-PDF van het Order Intake Dashboard */
#printKlant{display:none}
@media print{
  .kkadd,.kozoek,.kobestel,.kkpdfknop,.kklink{display:none!important}
  body.printklant>*:not(#printKlant){display:none!important}
  body.printklant #printKlant{display:block;page:liggend;font-size:10px;color:var(--ink)}
  #printKlant *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printKlant .kkpkop{display:flex;align-items:center;gap:14px;background:var(--navy);border-bottom:3px solid var(--blue);padding:8px 14px;margin-bottom:10px}
  #printKlant .kkpkop img{height:30px;width:auto}
  #printKlant .kkpkop .t{font-family:'Oswald',sans-serif;color:#fff;font-size:17px;font-weight:600}
  #printKlant .kkpkop .s{color:#cfe0f0;font-size:9.5px;font-weight:600;margin-top:1px}
  #printKlant .kkpkop .r{margin-left:auto;color:#cfe0f0;font-size:9.5px;font-weight:600;text-align:right;line-height:1.45}
  #printKlant .kkkpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:8px}
  #printKlant .kkkpis.acht{grid-template-columns:repeat(8,minmax(0,1fr))}
  #printKlant .kkk{padding:5px 7px}#printKlant .kkk .kkl{font-size:7.5px}#printKlant .kkk b{font-size:14px}#printKlant .kkk.hero b{font-size:15px}#printKlant .kkk small{font-size:8px}
  #printKlant .kkblok{padding:7px 9px;break-inside:auto}
  #printKlant .kkblok h3{font-size:10.5px;margin-bottom:4px}
  #printKlant .kkgrafiek{display:inline-block;vertical-align:top;width:100%;height:52mm;max-height:none}   /* inline-block: als blok splitst Chrome de kaart over twee pagina's */
  #printKlant .kktab td small{font-size:7.5px}
  #printKlant>.kkblok,#printKlant .kkrechts>.kkblok{break-inside:avoid}
  #printKlant .kktab tfoot{display:table-row-group}
  #printKlant .kktab th,#printKlant .kktab td{display:table-cell}   /* v0.142: afdruk vanaf de telefoon toont alle kolommen (de telefoonregels verborgen datum en bedrag) */
  #printKlant .kklegenda{font-size:9px}
  #printKlant .kkpraster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;margin-top:8px;align-items:start}
  #printKlant .kkrechts{gap:8px}
  #printKlant .kkpraster+.kkblok{margin-top:8px}
  #printKlant .kktab{font-size:8.5px}#printKlant .kktab th{font-size:7.5px;padding:2px 5px}#printKlant .kktab td{padding:2px 5px}
  #printKlant .kktab tr{break-inside:avoid}#printKlant .kktab thead{display:table-header-group}
  #printKlant .kotw{overflow:visible}
  #printKlant .kost{font-size:7.5px;padding:0 4px}
  #printKlant .kkkpis.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
  #printKlant .bmblok{break-inside:avoid;margin-bottom:8px}
  #printKlant .bmnog{font-size:10px;margin-top:2px}
  #printKlant .kkpvoet{margin:8px 0 0;font-size:8px;color:var(--muted);border-top:1px solid var(--line);padding-top:4px}
}
/* v0.100: op een telefoon geen fotoband boven de shop, zoals op thiel.nl (Stefan, 15-10); staat achteraan omdat de
   schaalregels voor de paginatitel hierboven anders winnen. De home van de site houdt de video. */
@media (max-width:640px){.shophero{min-height:0;background-image:none;background-color:var(--navy)}.shophero::before{display:none}.shophero .hin{padding:22px 15px 20px}.shophero h1{font-size:28px}}   /* v0.103: zelfde maat als de paginakop van de site op een telefoon (74 px) */
/* v0.186 (Stefan 23-10, "toch duidelijk kleurverschil"): zonder foto op de telefoon dezelfde navy als de kop en de paginakop
   van de site (#002E54); de basiskleur #0b2a47 is alleen bedoeld als achtergrond onder de foto op grotere schermen */
/* v0.121: de 3D-tekening is te draaien (slepen, pijltjes); horizontaal slepen draait, verticaal blijft scrollen */
.schets.draaibaar svg{cursor:grab;touch-action:pan-y;user-select:none}
.schets.draaibaar.sleept svg{cursor:grabbing}
.schets:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.isoreset{height:30px;padding:0 10px;font-size:12px}
@media print{.isoreset{display:none!important}}
/* v0.122 (Stefan 16-10): één knopfamilie door de hele shop en calculator.
   - Lichtblauw = secundair, met een dunne blauwe rand; lichtrood = verwijderen, met een dunne rode rand; wit (aanvraagblok,
     werkbalk van de staat) met dezelfde dunne blauwe rand. Aanwijzen: wit vlak met een navy (of rode) rand.
   - Elke knop icoon + tekst; zelfde soort knoppen naast elkaar even breed.
   - Tikdoelen op een aanraakscherm minstens 44 × 44 px (WCAG 2.5.5, review Astra), op een desktop compact zoals nu. */
:root{--rand-blauw:rgba(0,114,206,.45);--rand-rood:rgba(220,53,69,.5)}
.abtn,.xbtn,.chip,.tbtn{border-color:var(--rand-blauw)}
.abtn:hover,.xbtn:hover,.chip:hover,.tbtn:hover{background:#fff;border-color:var(--navy)}
.abtn.wis,.xbtn.wis{border-color:var(--rand-rood)}
.abtn.wis:hover,.xbtn.wis:hover{background:#fff;border-color:var(--red)}
.xbtn.xls{border-color:#9ccfae}
.loschips .chip.aan,.vbchips .chip.aan{border-color:var(--navy)}
.loschips .chip.sub{border-color:#d3d9df}
.xbtn,.abtn{justify-content:center}
.xbtn svg,.abtn svg,.pbtn svg,.xbtn .thiel-ui-icon,.abtn .thiel-ui-icon,.pbtn .thiel-ui-icon{width:16px;height:16px;flex:none}
.pbtn{display:inline-flex;align-items:center;gap:7px}
/* even breed: de knoppen onder het mandje, per project, in het aanvraagblok, de werkbalk van de staat en de 3D-kop */
.mknoppen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mpk{display:grid;grid-template-columns:repeat(2,minmax(0,190px))}
.aanvraagblok .acties .xbtn{flex:0 0 178px;border-color:var(--rand-blauw)}
.aanvraagblok .acties .xbtn:hover{border-color:var(--navy)}
.staattools .tbtn{min-width:96px;justify-content:center}
.m3d-kop .xbtn:not(.m3d-pknop){min-width:132px}
@media (max-width:640px){.mknoppen{grid-template-columns:repeat(2,minmax(0,1fr))}.mpk{grid-template-columns:repeat(2,minmax(0,1fr))}.aanvraagblok .acties .xbtn{flex:1 1 0}.staattools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.staattools .tbtn{min-width:0;padding:0 4px}}
@media (pointer:coarse){
  .abtn,.xbtn,.tbtn,.mbtn,.nbtn,.pbtn,.chip,.mpk .xbtn,.m3d-kop .xbtn{min-height:44px}
  .stap{height:44px}.stap button{width:44px}
  .gt button.dup,.gt button.weg,.mr button.del,.m3dp-acc .del{min-width:44px;min-height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,.eenhsw,.seg button,.vlag,.htaal{min-height:44px}
  .hamb,.hbtn{min-width:44px;min-height:44px}
  summary,.mpr summary{padding-top:14px;padding-bottom:14px}
  .vlag,.seg button{min-width:44px;justify-content:center}
  .kruimel button{padding:14px 8px;margin:-14px -4px}   /* tekstlink in de kruimel: groter tikvlak, zelfde regel */
}
/* v0.122 (Stefan 17-10): in de afdruk de vier kengetallen als smalle blokjes op één regel (A4 valt onder de 900 px-regel,
   die ze anders in twee kolommen met een brede eerste tegel zet); de eerste tegel zonder navy vlak, want dat drukt grijs af */
@media print{
  .kpis,.klant .kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px;margin-bottom:10px}
  .kpi,.kpi.hero{grid-column:auto!important;min-height:0;padding:6px 10px;background:#fff;border:1px solid var(--line);box-shadow:none}
  .kpi.hero{border-top:2px solid var(--navy)}
  .kpi .lbl,.kpi.hero .lbl{font-size:10px;color:var(--muted)}
  .kpi .big,.kpi.hero .big{font-size:17px;margin-top:2px;color:var(--navy)}
  .kpi .big small,.kpi.hero .big small{font-size:10px;color:var(--muted)}
}

/* v0.124: Klantkaart in het Shop-uitklapmenu alleen voor een ingelogde klant */
.hddmenu [hidden]{display:none!important}
/* v0.144 (Stefan 19-10): bonusmeter strak en met weinig tekst — de meter met het % op de prognose en één regel "nog € … voor
   … %"; de uitsplitsing in een uitklapper (telefoon dicht, groot scherm open, naast de meter). Prognose rechtsboven. */
.bmprog{font-size:12.5px;color:var(--muted);white-space:nowrap}.bmprog b{color:var(--navy);font-weight:700}
.bmraster{display:grid;grid-template-columns:minmax(0,440px) minmax(0,560px);gap:8px 40px;align-items:center;padding-top:4px}
.bmmeter{padding:0}
.bmdial{width:100%;height:auto;display:block;overflow:visible}
.bmdial .bmspoor{stroke:var(--lblue)}.bmdial .bmgepland{stroke:#9cc3e8}.bmdial .bmomzet{stroke:var(--blue)}
.bmdial .bmgrens{stroke:#fff;stroke-width:3}
.bmdial .bmlbl{transform:none;position:static;font:600 11px 'Open Sans',sans-serif;fill:var(--muted);transition:fill .3s}.bmdial .bmlbl.gehaald{fill:var(--navy);font-weight:700}
.bmdial .bmwijzer{fill:var(--navy)}
.bmdial .bmpct{font:700 50px/1 'Oswald',sans-serif;fill:var(--navy)}.bmdial .bmpct tspan{font-size:26px}
.bmdial .bmbedrag{font:600 14px 'Open Sans',sans-serif;fill:var(--muted)}
.bmnog{margin:4px 0 0;text-align:center;font-size:15px;color:var(--navy)}.bmnog b{font-weight:700}.bmnog .volg{color:var(--blue)}
.bmhoe summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:32px;font-size:12.5px;color:var(--muted)}
.bmhoe summary::-webkit-details-marker{display:none}
.bmhoe summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.bmhoe[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.bmhoe summary:hover{color:var(--navy)}
.bmreken{margin:6px 0 4px;width:100%;border-collapse:collapse;font-size:13px}
.bmreken td{padding:4px 0}.bmreken td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.bmreken .bmk{display:inline-block;width:9px;height:9px;margin-right:7px}.bmk.omzet{background:var(--blue)}.bmk.gepland{background:#9cc3e8}
.bmreken tr.som td{border-top:1px solid var(--line);font-weight:700;color:var(--navy);padding-top:6px}
.bmklein{margin:6px 0 2px;font-size:12px;color:var(--muted);line-height:1.5}.bmklein b{color:var(--navy)}
@media (max-width:899px){
  .bmraster{grid-template-columns:minmax(0,1fr)}
  .bmlinks{max-width:440px;width:100%;margin:0 auto}
  .bmhoe{border-top:1px solid var(--lblue);margin-top:6px}.bmhoe summary{justify-content:center}
}
@media print{#printKlant .bmraster{grid-template-columns:230px 1fr;gap:4px 20px}#printKlant .bmhoe summary{display:none}#printKlant .bmreken,#printKlant .bmklein{font-size:9px}#printKlant .bmprog{font-size:9px}}

/* ---------- v0.128 (review Stefan 17-10): klantomgeving ---------- */
/* klantkaart: tijdens het ophalen uit Odoo staat het eindraster al klaar met grijze plaatshouders, zodat niets verspringt */
.koskelet{display:grid;gap:12px;margin-bottom:14px}
.koskelet .kotegels{margin:0;grid-template-columns:repeat(6,minmax(0,1fr))}
.koskelet .kotegel{min-height:84px;justify-content:center}
.sk{position:relative;overflow:hidden;background:#eef2f6;border-radius:3px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.7) 50%,transparent 100%);transform:translateX(-100%);animation:skglim 1.3s ease-in-out infinite}
.koskelet .kotegel .sk{height:10px;width:55%}.koskelet .kotegel .sk.b{height:22px;width:70%;margin:6px 0 4px}.koskelet .kotegel .sk.c{width:40%}
.koskelet .skgrafiek{height:230px}
.koskelet .skraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.koskelet .skraster .kkblok{min-height:220px;display:flex;flex-direction:column;gap:9px;padding-top:14px}
.koskelet .skraster .sk{height:11px}.koskelet .skraster .sk.k{width:45%;height:14px;margin-bottom:4px}
.koskelet .sklaad{margin:0;font-size:12px;color:var(--muted)}
@keyframes skglim{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}
@media (max-width:980px){.koskelet .kotegels{grid-template-columns:repeat(3,minmax(0,1fr))}.koskelet .skraster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.koskelet .kotegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* mandje: de bedrijfsgegevens uit Odoo staan ingeklapt achter één regel; alleen contact, afleveradres, projectplaats en opmerking staan open */
.kovast{border:1px solid var(--line);background:#fff;padding:0}
.kovast>summary{cursor:pointer;padding:9px 12px;font-size:12.5px;color:var(--navy);list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.kovast>summary::-webkit-details-marker{display:none}
.kovast>summary::before{content:"";width:7px;height:7px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(-45deg);margin-right:2px;flex:none;transition:transform .2s;align-self:center}
.kovast[open]>summary::before{transform:rotate(45deg)}
.kovast>summary b{font-weight:700}
.kovast .kovastsum{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 200px}
.kovast[open] .kovastsum{display:none}
.kovastin{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:4px 12px 12px;border-top:1px solid var(--line)}
.kovastin .w{grid-column:1/-1}
.kovastin>div:not(.w){display:flex;flex-direction:column;justify-content:flex-end}
@media (max-width:640px){.kovastin{grid-template-columns:1fr}}
/* beheer: kolom Inloggen (eigen of startwachtwoord, laatste inlog) */
.bhlijst td.bhinlog{font-size:12px;color:var(--muted);white-space:normal;line-height:1.3;min-width:150px}
.bhlijst td.bhinlog b{color:var(--navy);font-weight:600;display:block}
.bhlijst td.bhinlog .bhstart{color:#8a4b00}   /* v0.229: donkerder, contrast ≥ 4,5 (axe) */
/* v0.126 (Stefan 17-10): uitschuifmenu in de shop even smal als op de site */
@media (max-width:640px){.ocv{width:min(78vw,320px)}}
/* v0.126 (Stefan 17-10, mobiel): rustiger knoppen. Tekening: Beginstand en 3D/Vooraanzicht als iconen; 3D-pop-up: iconen,
   kruisje in het Specificatie-paneel, "automatisch opgeslagen". De Specificatie-knop bleef na een tik wit-op-wit staan (de
   hover-regel van v0.122 won op een aanraakscherm): die houdt nu zijn blauw. */
.segico button{display:inline-flex;align-items:center;gap:6px}.segico svg,.segico .thiel-ui-icon{width:16px;height:16px;flex:none}
.m3d-maatico{display:none;width:18px;height:18px}
.m3dp-sluit{display:none}
.m3dp-auto{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px;color:var(--muted)}.m3dp-auto svg,.m3dp-auto .thiel-ui-icon{color:#2f9e63;flex:none}
.m3d-kop .m3d-pknop,.m3d-kop .m3d-pknop:hover,.m3d-kop .m3d-pknop:focus,.m3d-kop .m3d-pknop:active{color:#fff}
@media (max-width:900px){
  .m3d-kop .m3d-pknop,.m3d-kop .m3d-pknop:hover,.m3d-kop .m3d-pknop:focus{background:var(--blue);border-color:var(--blue)}
  .m3dp-sluit{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:transparent;color:var(--navy);cursor:pointer;z-index:2}
  .m3dp-sluit svg,.m3dp-sluit .thiel-ui-icon{width:22px;height:22px}
  .m3d-paneel{padding-top:8px}
  .m3d-kop .xbtn:not(.m3d-pknop){min-width:0}
  #m3dReset span:not(.thiel-ui-icon){display:none}#m3dReset,#m3dPrint{width:44px;padding:0;justify-content:center}
  .m3d-maat{width:44px;align-self:stretch;justify-content:center;border:1px solid var(--rand-blauw,#9cc3e8);background:var(--lblue)}
  .m3d-maat{position:relative}.m3d-maat input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}.m3d-maatico{display:block;pointer-events:none}
  /* v0.144 (Stefan 19-10): de meter lichtblauw met rand, even groot als Beginstand en Afdrukken; aan = blauwe rand en blauw
     icoon, uit = gedimd icoon. Grotere iconen met minder marge in de vakken van 44 px. */
  .m3d-maat .m3d-maatico{opacity:.45}
  .m3d-maat:has(input:checked){border-color:var(--blue);color:var(--blue)}.m3d-maat:has(input:checked) .m3d-maatico{opacity:1}
  #m3dReset .thiel-ui-icon,#m3dPrint .thiel-ui-icon,.m3d-maat .m3d-maatico{width:28px;height:28px}
  .m3d-opslaan span{font-size:0}.m3d-opslaan span::after{content:attr(data-kort);font-size:12px}
}
@media (max-width:640px){
  .schetskop{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
  .schetskop .btn3d{grid-column:1/-1;justify-content:center}
  .schetskop .isoreset span:not(.thiel-ui-icon),.segico button span:not(.thiel-ui-icon){display:none}
  .schetskop .isoreset{width:44px;padding:0;justify-content:center;justify-self:end}
  .segico button{padding:5px 12px}
}
@media (hover:none){.m3d-kop .xbtn:hover{background:var(--lblue);border-color:var(--rand-blauw,var(--lblue))}.m3d-kop .m3d-pknop:hover{background:var(--blue)}}
/* v0.178: de korte Engelse knoptekst hoort bij dezelfde breedte als de Nederlandse (max 900 px); erbuiten stond op desktop "Save changesSave" */
@media (max-width:900px){html[lang=en] .m3d-opslaan span::after{content:'Save'}}
@media (max-width:900px){.m3d-kop{padding-right:12px}.m3d-kop h2{padding-right:44px}}
@media (max-width:640px){
  .schetskop .btn3d{justify-self:stretch}
  .accr{grid-template-columns:28px minmax(0,1fr) 84px auto}
  .accr .accnm{font-size:12px;line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
  .accr .accnm b{white-space:normal}
}
/* v0.127 (Stefan 17-10): ook op mobiel en tablet de winkelwagen (met teller) en het persoonicoon (klantlogin/Klantkaart)
   in de kop, links van de vlag; dezelfde knoppen als op desktop, de rest van die rij blijft in het menu */
@media (max-width:1100px){
  .top .right{display:flex;margin-left:auto;gap:2px;align-items:center}
  .top .right>:not(.hbtn){display:none!important}
  .mkop{margin-left:6px}
}
/* v0.133 (Stefan 17-10): mobiele kop strakker — als de site (styles/site.css): iconen 26 px, elk 44 × 44 px op één lijn en gelijk
   verdeeld, lager logo; bij scrollen lager (scripts/app.js zet .klein), bij aanraken veert een icoon kort in */
@media (max-width:1100px){
  .top .in{padding-top:8px;padding-bottom:8px;min-height:64px;gap:6px;transition:min-height .25s ease,padding .25s ease}
  .top img.logo{height:46px;transition:height .25s ease}
  .top .right{gap:6px}
  .top .right .hbtn,.mkop .vlag{width:44px;height:44px;display:inline-grid;place-items:center;padding:0;transition:transform .15s ease,color .15s}
  .top .right .hbtn svg,.top .right .hbtn .thiel-ui-icon{width:26px;height:26px}
  .mkop{display:flex;align-items:center;gap:6px;margin-left:0}
  .mkop .vlag img{width:26px;height:17px}
  .top .hbtn .cnt{top:3px;right:1px;min-width:17px;line-height:17px;font-size:10px;border-radius:9px;padding:0 4px}
  .mkop .hamb{width:44px;height:44px;padding:13px 9px;transition:transform .15s ease}
  .top .right .hbtn:active,.mkop .vlag:active,.mkop .hamb:active{transform:scale(.9)}
  .top.klein .in{min-height:54px;padding-top:5px;padding-bottom:5px}
  .top.klein img.logo{height:38px}
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){.top .in,.top img.logo,.top .right .hbtn,.mkop .vlag,.mkop .hamb{transition:none}}
/* v0.133 (Stefan 17-10): de weg naar een offerte in drie stappen boven het mandje (samenstellen ✓ · controleren · gegevens en
   versturen); de huidige stap blauw, een gedane stap navy met vinkje; klikbaar */
.mstappen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 18px;padding:0;counter-reset:none}
.mstappen li{position:relative}
.mstappen li+li::before{content:'';position:absolute;top:17px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;background:var(--line);transition:background .3s}
.mstappen li.klaar+li::before,.mstappen li.actief::before{background:var(--blue)}
.mstappen button{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0 4px;cursor:pointer;font:600 13px/1.25 'Open Sans',sans-serif;color:var(--muted);text-align:center}
.mstappen .nr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:#fff;color:var(--muted);font:700 15px/1 'Oswald',sans-serif;transition:background .3s,border-color .3s,color .3s,transform .3s}
.mstappen li.klaar .nr{background:var(--navy);border-color:var(--navy);color:#fff}
.mstappen li.actief .nr{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.08);box-shadow:0 0 0 5px rgba(0,114,206,.15)}
.mstappen li.actief button,.mstappen li.klaar button{color:var(--navy)}
.mstappen button:hover .nr{border-color:var(--blue)}
@media (max-width:640px){.mstappen{margin-bottom:14px}.mstappen button{font-size:12px}.mstappen .nr{width:32px;height:32px;font-size:14px}.mstappen li+li::before{top:15px;left:calc(-50% + 20px);right:calc(50% + 20px)}}
@media (prefers-reduced-motion:reduce){.mstappen .nr,.mstappen li+li::before{transition:none}}
/* de knop onderaan de calculator op telefoon en tablet: duidelijk "Vraag offerte aan" met pijl (zet de berekening in het mandje
   en opent het mandje); breder en hoger dan een gewone knop */
.bnav .knopaanvraag{height:46px;padding:0 18px;font-size:15px;font-weight:700;gap:10px;flex:0 1 auto;min-width:min(56%,240px);justify-content:center}
.bnav .knopaanvraag svg,.bnav .knopaanvraag .thiel-ui-icon{width:20px;height:20px;transition:transform .2s}
.bnav .knopaanvraag:hover svg,.bnav .knopaanvraag:active svg,.bnav .knopaanvraag:hover .thiel-ui-icon,.bnav .knopaanvraag:active .thiel-ui-icon{transform:translateX(3px)}
.mverder{display:none}
@media (max-width:900px){.mverder{display:flex;width:100%;height:48px;margin:14px 0 4px;font-size:15px;font-weight:700;gap:10px;justify-content:center}.mverder svg,.mverder .thiel-ui-icon{width:20px;height:20px}}
/* v0.129: het paneel naast het zijmenu is smaller dan het venster: de klantkaart schikt zich naar de breedte van het paneel */
@container kopaneel (max-width:980px){.kkkpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container kopaneel (max-width:1000px){.kkraster{grid-template-columns:minmax(0,1fr)}}
@container kopaneel (max-width:780px){.kogrid{grid-template-columns:minmax(0,1fr)}.kotegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container kopaneel (max-width:520px){.kkkpis{grid-template-columns:repeat(2,minmax(0,1fr))}.koadressen{grid-template-columns:minmax(0,1fr)}}
@container kopaneel (max-width:560px){.koaqsm{display:none}}   /* v0.132: project, regels en gewicht pas weg als het paneel smal is (telefoon) */
@container kopaneel (max-width:520px){.koaqmeta{grid-template-columns:minmax(0,1fr);gap:0}.koaqmeta dd{margin-bottom:8px}}   /* v0.132: Mijn aanvragen, detail onder elkaar */
/* ---------- v0.135: subtiele beweging, gelijk aan de site (styles/site.css, Stefan 18-10) ---------- */
/* menu-onderstreping in de kop */
.hnav>a,.hnav>button,.hnav>.hdd>a,.hnav>.hdd>button{background:linear-gradient(#94cfff,#94cfff) no-repeat 0 100%/0 2px;transition:color .15s,background-size .25s ease}
.hnav>a:hover,.hnav>a:focus-visible,.hnav>button:hover,.hnav>button:focus-visible,.hnav>button.actief,.hnav>.hdd:hover>a,.hnav>.hdd>a:focus-visible,.hnav>.hdd:hover>button,.hnav>.hdd>button:focus-visible,.hnav>.hdd>button.actief{background-size:100% 2px}
/* productkaart in de shop: foto zoomt 3 % in en een blauwe onderrand schuift in */
.lkfoto{background-image:linear-gradient(var(--blue),var(--blue));background-repeat:no-repeat;background-position:0 100%;background-size:0 3px}
.lkfoto,body[data-pagina=shop] .lkfoto{transition:box-shadow .2s,background-size .25s}
@media (hover:hover){.lk:hover .lkfoto{background-size:100% 3px}.lk:hover .lkfoto img{transform:scale(1.03)}}
/* mobiel menu: items schuiven na elkaar in, de blauwe rand links groeit mee */
@keyframes menuItem{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes menuRand{from{background-size:3px 0}to{background-size:3px 100%}}
.ocv{border-left:0;padding-left:31px;background:var(--navy) linear-gradient(var(--blue),var(--blue)) no-repeat 0 0/3px 100%}
.ocv-nav>li:nth-child(2){--i:1}.ocv-nav>li:nth-child(3){--i:2}.ocv-nav>li:nth-child(4){--i:3}.ocv-nav>li:nth-child(5){--i:4}.ocv-nav>li:nth-child(6){--i:5}
.ocv-nav>li:nth-child(7){--i:6}.ocv-nav>li:nth-child(8){--i:7}.ocv-nav>li:nth-child(9){--i:8}.ocv-nav>li:nth-child(n+10){--i:9}
.ocv-nav.tweede>li{--i:9}.ocv-nav.tweede>li:nth-child(n+2){--i:10}
/* toegevoegd: het plusje in "+ Toevoegen" wordt kort een vinkje (scripts/app.js vinkje()) */
@keyframes vinkPop{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.lkknop.klaar{background:var(--navy);border-color:var(--navy)}
@media (prefers-reduced-motion:no-preference){
  .ocv:not([hidden]){animation:ocvIn .25s ease-out,menuRand .35s .1s ease-out both}
  .ocv:not([hidden]) .ocv-nav>li{animation:menuItem .28s ease-out both;animation-delay:calc(60ms + 30ms * var(--i,0))}
  .lkknop.klaar svg,.lkknop.klaar .thiel-ui-icon{animation:vinkPop .3s ease-out}
}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .lk{transition:transform .1s ease-out}
  .lkfoto,body[data-pagina=shop] .lkfoto{transition:transform .1s ease-out,box-shadow .2s,background-size .25s}
  .lkfoto:active,.lk:active{transform:scale(.98)}
}
@media (prefers-reduced-motion:reduce){.hnav>a,.hnav>.hdd>a,.hnav>.hdd>button,.lkfoto,body[data-pagina=shop] .lkfoto{transition:none}}
/* v0.135: ook op desktop heet de calculatorknop "Vraag offerte aan" en schuift het pijltje mee bij hover */
.knopaanvraag svg,/* v0.135: ook op desktop heet de calculatorknop "Vraag offerte aan" en schuift het pijltje mee bij hover */
.knopaanvraag .thiel-ui-icon{transition:transform .2s}
.knopaanvraag:hover svg,.knopaanvraag:hover .thiel-ui-icon{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.knopaanvraag svg,.knopaanvraag .thiel-ui-icon{transition:none}}
/* v0.137: beheer met zijmenu (Klanten · Aanvragen · Analytics, scripts/zijnav.js); breder, zodat het dashboard van Feliro
   Meting (styles/meting.css) vanaf 1440 px in twee kolommen past */
body[data-pagina="beheer"] .wrap .in{max-width:1680px}
#pgBeheer .kolay>.kokop .pgtitel small{display:block}
@media print{#pgBeheer .konavwrap,#pgBeheer .konav-waas{display:none!important}#pgBeheer .kolay{display:block}#pgBeheer .bhpaneel[hidden]{display:none!important}}
/* v0.138: bedieningsiconen uit het Thiel-iconenpakket (styles/iconen.css uit tools/iconen.mjs, scripts/iconen.js). Elk icoon is
   een masker in de tekstkleur van de knop; de maten staan bij de bestaande knopregels (svg en .thiel-ui-icon samen).
   Hier alleen de plekken die eerst geen icoon of een teken (×, +, −, →) hadden, en kleur waar de oude svg 'fill' gebruikte. */
.thiel-ui-icon{-webkit-print-color-adjust:exact;print-color-adjust:exact;forced-color-adjust:none}
.voet-contact-icoon .thiel-ui-icon{color:var(--navy)}
.stap button{display:inline-grid;place-items:center}.stap button .thiel-ui-icon{width:14px;height:14px}
.linkknop .thiel-ui-icon{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.kklink .thiel-ui-icon,.pdmeer .thiel-ui-icon{width:14px;height:14px;margin-left:4px;vertical-align:-2px}
.m3dp-auto .thiel-ui-icon{width:14px;height:14px}
.cfgtekst .mbtn .thiel-ui-icon{width:17px;height:17px}
.boweg .thiel-ui-icon{width:15px;height:15px;margin:0}
.bhreset .thiel-ui-icon{width:15px;height:15px}
summary.xbtn{display:inline-flex;align-items:center;gap:6px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pdmeer .thiel-ui-icon,.kklink .thiel-ui-icon{transition:transform .2s}.pdmeer:hover .thiel-ui-icon,.kklink:hover .thiel-ui-icon{transform:translateX(3px)}}
/* v0.141 (Stefan 18-10): het uitschuifmenu 30 % smaller, gelijk aan de site */
.ocv{width:clamp(196px,55vw,224px);padding-left:22px;padding-right:16px}
/* v0.141 (Stefan 18-10, screenshot iPhone): de knoppen Afdrukken, Excel, Kopiëren en Mailen onder de materiaalstaat waren op de
   telefoon leeg. "span{display:none}" (alleen iconen op een smal scherm) verborg sinds v0.138 ook het icoon, want dat is een span;
   nu overal span:not(.thiel-ui-icon). */
/* v0.141 (Stefan 18-10): in de uitgangspunten van een gevel even hoge velden op een aanraakscherm. De keuzelijst (korteling, klasse)
   negeerde op de iPhone de 44 px van de tikdoelregel en de invoervelden niet: nu alle velden 36 px, de keuzelijst met eigen pijltje */
.gvs select{-webkit-appearance:none;appearance:none;padding-right:20px;background:#fff var(--tui-chevron-down) no-repeat right 5px center/12px 12px}
@media (pointer:coarse){#gevelTabel .gvs input,#gevelTabel .gvs select{height:36px;min-height:36px}}   /* #id: wint van de algemene 44 px-regel voor invoervelden */
/* v0.141 (Stefan 18-10): tabellen in de klantomgeving strakker en overal gelijk: kleinere letter, korte kolomkoppen in hoofdletters,
   datums dd-mm-jjjj, in het overzicht bestellingen en facturen even breed en op desktop zonder scrollen (PDF als icoon, factuur-
   nummer op één regel) */
.kktab{font-size:12px}.kktab th{font-size:10px;padding:5px 6px}.kktab td{padding:5px 6px}
@media (min-width:901px){.kktab td:first-child b{white-space:nowrap}}   /* factuurnummer op één regel; op de telefoon mag het breken */
.kkraster .kkdoc span:not(.thiel-ui-icon){display:none}
.kkraster .kost{font-size:10.5px;padding:1px 5px}
.kotabel table{font-size:12px}
.kotabel th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:5px 7px;border-bottom:2px solid var(--navy)}
.kotabel td{padding:6px 7px}
@media (min-width:901px){.kotabel td:first-child b{white-space:nowrap}}   /* factuurnummer op één regel; op de telefoon mag het breken */
/* inkoopnummer zonder getal (een tekst): afgekapt met …, de hele tekst in de tooltip; in het overzicht geen statuskolom
   ("Nog leveren" zegt het al, het tabblad Bestellingen houdt de status), zodat het blok op desktop niet scrollt */
.kkbest .kktab td:first-child b{display:block;max-width:92px;overflow:hidden;text-overflow:ellipsis}
.koorders td:first-child b{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.kkraster .kkbest .kktab th:nth-child(6),.kkraster .kkbest .kktab td:nth-child(6){display:none}
.kkraster .kktab th,.kkraster .kktab td{padding-left:5px;padding-right:5px}.kkraster .kktab th{letter-spacing:.02em}

/* v0.142 (Stefan 19-10): zachte overgang tussen site en shop, zoals feliro.nl (View Transitions); de kop blijft staan */
@keyframes vt-in-op{from{opacity:0;transform:translateY(18px)}}
@keyframes vt-weg{to{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .top{view-transition-name:kop}
  ::view-transition-old(root){animation:vt-weg 180ms ease both}
  ::view-transition-new(root){animation:vt-in-op 420ms cubic-bezier(.2,.8,.2,1) 60ms both}
  ::view-transition-group(kop){animation-duration:0s}
}
/* v0.144: bij het oplopen van de bonusmeter licht het %-label van een gepasseerde staffelgrens kort op (telKengetallen) */
@media screen and (prefers-reduced-motion:no-preference){.bmdial .bmlbl.flits{animation:bmflits .6s ease-out}}
@keyframes bmflits{0%{fill:var(--blue);font-size:15px}100%{font-size:11px}}
/* v0.143 (Stefan 19-10): zoeken in de voet, naast de social kanalen; op de telefoon links, gelijk met het adres eronder.
   De suggesties openen naar boven (de voet staat onderaan) en lopen nooit buiten het scherm. */
.voet-zoek{position:relative;flex:0 1 280px;min-width:0;display:flex;align-items:center;margin:0}
.voet-zoek>.thiel-ui-icon{position:absolute;left:12px;width:16px;height:16px;color:#cfe0f0;pointer-events:none}
.voet-zoek input{width:100%;height:36px;padding:0 14px 0 36px;border:1px solid rgba(255,255,255,.35);border-radius:18px;background:rgba(255,255,255,.08);color:#fff;font:400 16px/1 'Open Sans',sans-serif;-webkit-appearance:none;appearance:none}
.voet-zoek input::placeholder{color:#b9cde0;opacity:1}
.voet-zoek input:focus{outline:none;border-color:#94cfff;background:rgba(255,255,255,.14)}
.voet-zoeklijst{position:absolute;left:0;bottom:calc(100% + 6px);z-index:20;width:min(360px,calc(100vw - 32px));margin:0;padding:6px 0;list-style:none;background:#fff;color:var(--ink,#262a2f);box-shadow:0 12px 32px rgba(0,20,40,.35);text-align:left}
.voet-zoeklijst a{display:flex;align-items:center;gap:14px;padding:6px 12px;color:inherit!important;text-decoration:none!important}
.voet-zoeklijst li[aria-selected=true] a,.voet-zoeklijst a:hover{background:#eaf3fc}
.voet-zoeklijst .vz-soort{flex:none;width:100px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f6a74}
.voet-zoeklijst .vz-tekst{display:flex;flex-direction:column;min-width:0}
.voet-zoeklijst b{font-size:14px;font-weight:600;color:var(--navy,#002E54);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voet-zoeklijst small{font-size:12px;color:#5f6a74;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voet-zoeklijst .vz-kop{padding:4px 12px 2px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f6a74}
.voet-zoeklijst .vz-shop{border-top:1px solid #e3e8ee;margin-top:4px;padding-top:4px}
.voet-zoeklijst .vz-shop b{color:var(--blue,#0072CE)}
.voet-zoeklijst mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:#94cfff;text-decoration-thickness:2px}
.voet-zoekgeen{padding:8px 12px;font-size:13px;color:#5f6a74}
@media (max-width:640px){.voet-merk{justify-content:flex-start;flex-wrap:nowrap;gap:12px}.voet-zoek{flex:1 1 auto}.voet-social{gap:8px;flex:none}.voet-zoeklijst .vz-soort{width:82px;font-size:10px}.voet-zoeklijst{width:calc(100vw - 56px)}}
@media print{.voet-zoek{display:none}}
/* v0.143 (Stefan 19-10): de productfoto weer door het uitschuifmenu, in donkerblauw zoals vóór v0.133; het smallere formaat,
   de blauwe rand links en de rest van de opmaak blijven. De foto ligt achter de inhoud (isolation + z-index -1), naast de rand. */
.menu-mobiel,.ocv{isolation:isolate}
.menu-mobiel::before,.ocv::before{content:'';position:absolute;top:0;bottom:0;left:3px;right:0;z-index:-1;background:url(/assets/menu-achtergrond.webp) 25% center/cover no-repeat;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
/* v0.143 (Stefan 19-10): de keuze van de uitvoering (bijv. "2 m") bij een accessoire staat in het midden van het veld */
.accvar{text-align:center;text-align-last:center}
/* v0.145 (Stefan 19-10): voet op een groot scherm — de social kanalen met "Neem contact op" ernaast op één rij, daaronder het
   zoekveld over de hele breedte van die rij (duidelijk breder dan eerst); de voorspellingen zo breed als het zoekveld */
@media (min-width:981px){
  .voet-merk{display:grid;grid-template-columns:150px auto minmax(200px,260px);grid-template-areas:"logo soc knop" "logo zoek zoek";gap:14px 16px;align-items:center;justify-content:start}
  .voet-logo{grid-area:logo}
  .voet-social{grid-area:soc}
  .knop-voet{grid-area:knop;justify-content:center}
  .voet-zoek{grid-area:zoek;flex:none}
  /* v0.146 (Stefan 19-10): de voorspellingen breder dan het veld, zodat je meer van de omschrijving ziet */
  .voet-zoeklijst{width:max(100%,min(620px,calc(100vw - 48px)))}
}
/* v0.147 (Stefan 19-10): werkbalk boven de tekening — alles even hoog (eenhedenschakelaar = Beginstand = 2D/3D), de knop naar de
   3D-configurator opvallend in Thiel-oranje; in de 3D-pop-up Beginstand en Afdrukken als losse iconen naast Maatvoering (geen blauw
   vlak), en in de kengetallen past "Strekkende meter" op één regel */
@media (min-width:641px){
  .schetskop .eenhsw,.schetskop .isoreset,.schetskop .seg{height:32px;box-sizing:border-box}
  .schetskop .seg button{height:100%}
}
.btn3d{background:#B85A12;border-color:#B85A12;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(184,90,18,.22)}   /* v0.197 (Stefan 23-10): het oranje van de knop op de landingspagina, minder fel (wit erop 4,7:1) */
.btn3d:hover,.btn3d:focus-visible{background:#9E4C0F;border-color:#9E4C0F;color:#fff}
.btn3d .thiel-ui-icon{color:#fff}
@media (min-width:641px){.btn3d{height:36px;padding:0 16px;font-size:13.5px}}
.kpi .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klant .kpis .kpi{padding-left:14px;padding-right:14px}
@media (min-width:901px){
  .m3d-kop .xbtn.m3d-ico:not(.m3d-pknop){min-width:0;width:40px;height:40px;padding:0;justify-content:center;background:transparent;border-color:transparent;color:var(--navy);box-shadow:none}
  .m3d-kop .xbtn.m3d-ico:hover,.m3d-kop .xbtn.m3d-ico:focus-visible{background:var(--lblue);border-color:transparent;color:var(--blue)}
  .m3d-kop .m3d-ico .thiel-ui-icon{width:24px;height:24px}
  .m3d-kop .m3d-ico span:not(.thiel-ui-icon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .m3d-kop .m3d-maat{margin-right:2px}
  .m3d-kop #m3dReset{margin-left:-4px}
}
/* v0.148 (Stefan 19-10): in de 3D-werkplek een subtiel kruisje bij wat je aanwijst of aantikt — accessoire, ladder, steigerdeel
   (en een tweede voor de hele vloer); "+" zet een weggehaald steigerdeel terug */
.m3d-kruis{position:absolute;z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--navy);color:#fff;font:700 15px/1 'Open Sans',sans-serif;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,46,84,.35);transition:background-color .15s,transform .15s}
.m3d-kruis[hidden]{display:none}
.m3d-kruis:hover,.m3d-kruis:focus-visible{background:#dc3545;transform:scale(1.1)}
.m3d-kruis-vloer{width:auto;height:26px;margin:-13px 0 0 0;padding:0 10px 0 8px;border-radius:13px;display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 'Open Sans',sans-serif;white-space:nowrap}
.m3d-kruis-vloer::before{content:'×';font-size:15px;line-height:1}
@media (pointer:coarse){.m3d-kruis{width:32px;height:32px;margin:-16px 0 0 -16px}.m3d-kruis-vloer{width:auto;height:32px;margin-top:-16px;margin-left:0}}
@media (prefers-reduced-motion:reduce){.m3d-kruis{transition:none}}

/* v0.149 (Stefan 19-10): mobiele voet — zoeken over de hele breedte; LinkedIn, Facebook, YouTube en mail (onderaan)
   gelijk verdeeld in een kolom rechts naast adres en contact, van de eerste tot de laatste regel; adres op dezelfde kantlijn als de tekst in de kaarten (v0.143). Zoekveld,
   voorspellingen en invoer in een kleinere letter (iOS zoomt niet in: maximum-scale=1 sinds v0.126). */
@media (max-width:640px){
  .voet .in.voet-rooster{--voet-in:28px;--voet-halfregel:4px;grid-template-columns:minmax(0,1fr) 34px;column-gap:16px;row-gap:0;padding-left:var(--voet-in);padding-right:var(--voet-in)}
  .voet .voet-merk{display:contents}
  .voet .voet-zoek{grid-column:1/-1;grid-row:1;margin:0 0 18px}   /* over de hele breedte, rechts gelijk met de iconen */
  .voet .voet-social{grid-column:2;grid-row:2/span 2;align-self:stretch;flex-direction:column;justify-content:space-between;gap:4px;padding:var(--voet-halfregel) 0}
  .voet .voet-social a{width:34px;height:34px}   /* vier iconen gelijk verdeeld van de eerste tot de laatste regel tekst; mail onderaan */
  .voet .voet-merk+.voet-kolom{grid-column:1;grid-row:2}
  .voet .voet-kolom+.voet-kolom{grid-column:1;grid-row:3}
  .voet .voet-zoek>.thiel-ui-icon{z-index:1;left:11px;width:14px;height:14px}
  .voet .voet-zoek input[type=search]{font-size:13px!important;padding:0 12px 0 32px}
  .voet .voet-zoeklijst{width:calc(100vw - 2 * var(--voet-in))}
  .voet .voet-zoeklijst a{gap:10px;padding:5px 10px}
  .voet .voet-zoeklijst .vz-soort{width:76px;font-size:9.5px}
  .voet .voet-zoeklijst b{font-size:13px}
  .voet .voet-zoeklijst small{font-size:11px}
  .voet .voet-zoeklijst .vz-kop{padding:4px 10px 2px;font-size:10px}
  .voet .voet-zoekgeen{padding:7px 10px;font-size:12px}
}

/* v0.149 (Stefan 19-10): land kiezen uit alle landen, doorzoekbaar (scripts/landkeuze.js); de lijst valt over het formulier heen */
.frm .landkeuze{position:relative}
.frm .landkeuze>input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23002E54' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;padding-right:28px}
.landlijst{position:absolute;left:0;right:0;top:100%;z-index:30;max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain;margin:2px 0 0;padding:4px 0;list-style:none;background:#fff;border:1px solid var(--field);box-shadow:0 10px 28px rgba(0,30,60,.18)}
.landlijst li[role=option]{padding:8px 12px;font-size:13px;color:var(--ink);cursor:pointer;min-height:36px;display:flex;align-items:center}
.landlijst li[role=option][aria-selected=true],.landlijst li[role=option]:hover{background:var(--lblue)}
.landlijst li.huidig{font-weight:700;color:var(--navy)}
.landlijst .landkop{padding:8px 12px 3px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.landlijst .landkop+li{border-top:0}.landlijst .landkop:not(:first-child){border-top:1px solid #e3e8ee;margin-top:4px}
.landlijst .landgeen{padding:10px 12px;font-size:12.5px;color:var(--muted)}
@media (pointer:coarse){.landlijst li[role=option]{min-height:44px}}
@media print{.landlijst{display:none}}

/* ---------- v0.158 (Feddy 20-10, punt 4; benchmark RIX in docs/benchmark-landing-20261020.md): de shop met een zijbalk links.
   RIX zet categorie en type als platte tekstlinks in een vaste kolom; hier in de huisstijl: de groepen met het aantal, de
   actieve met een navy balk die inschuift, de producttypes van de actieve groep klappen eronder open (200 ms, uit bij minder
   beweging), en de kolom blijft staan bij het scrollen. Tablet en telefoon houden de chiprij bovenaan. ---------- */
.loszij{display:none}
@media (min-width:1024px){
  body[data-pagina=shop] .loswerk{display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start;margin-top:14px}
  body[data-pagina=shop] .loszij{display:block;position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;border-right:1px solid var(--line);padding-right:12px}
  body[data-pagina=shop] #losGroepen{display:none}
}
.loszij-kop{font:600 12px/1.3 'Open Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px 14px}
.zijlijst,.zijsub ul{list-style:none;margin:0;padding:0}
.loszij button{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;min-height:36px;padding:7px 10px 7px 14px;border:0;background:none;text-align:left;font:600 14px/1.3 'Open Sans',sans-serif;color:var(--navy);cursor:pointer;transition:background-color .15s,color .15s}
.loszij button::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--navy);transform:scaleY(0);transform-origin:top;transition:transform .2s ease}
.loszij button:hover{background:var(--lblue)}
.loszij button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.loszij button.aan{background:#eef4fa}
.loszij button.aan::before{transform:scaleY(1)}
.loszij .n{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.zijrl{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.zijsub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s ease,visibility 0s linear .2s}
.zijsub>ul{min-height:0;overflow:hidden}
.open>.zijsub{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s ease,visibility 0s}
.zijsub button{min-height:32px;padding:5px 10px 5px 26px;font-weight:400;font-size:13.5px;color:var(--ink)}
.zijsub button::before{left:12px;width:2px}
.zijsub button.aan{background:none;color:var(--navy);font-weight:600}
.zijrl .zijsub button{font-weight:600;color:var(--navy)}
/* filters op diameter en lengte (alleen desktop; de telefoon heeft het zoekveld) */
.losfacet{display:none}
@media (min-width:1024px){body[data-pagina=shop] .losfacet:not([hidden]){display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:10px 12px;background:#f4f7fa;border:1px solid var(--line)}}
.facetrij{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.facetlabel{font:600 12px/1.3 'Open Sans',sans-serif;color:var(--muted);min-width:64px}
.facetrij .chip{background:#fff;border-color:var(--line);padding:4px 10px;font-size:12px}
.facetrij .chip.aan{background:var(--navy);border-color:var(--navy);color:#fff}
@media (prefers-reduced-motion:reduce){.loszij button,.loszij button::before,.zijsub,.open>.zijsub{transition:none}}
/* v0.158 (Feddy 20-10, punt 7): plus en min naast het aantal (zelfde stap-knoppen als bij de accessoires); op de telefoon de
   stapper over de hele breedte met tikdoelen van 44 px en de knop eronder */
.lkadd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:stretch}
.lkstap,.lkadd .lkstap{height:34px}
.lkstap button{width:28px}
.lkstap .lkaantal,body[data-pagina=shop] .lkstap .lkaantal{width:58px;height:auto;border-left:0;border-right:0;text-align:center;padding:0 4px;font-variant-numeric:tabular-nums}
.pddlg .lkstap .lkaantal{width:72px}
@media (max-width:640px){
  .lkadd{grid-template-columns:minmax(0,1fr)}
  .lkstap,.lkadd .lkstap{height:44px}.lkstap button{width:44px;flex:none}
  .lkstap .lkaantal,body[data-pagina=shop] .lkstap .lkaantal,.lkadd .lkstap .lkaantal{flex:1 1 auto;width:auto;min-width:0}
  .lkadd .lkknop{height:40px}
}
.lkvar.tekst{display:flex;align-items:center;border-color:transparent;background:#f4f7fa;color:var(--navy);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v0.158 (Feddy 20-10, punt 8): losse artikelen per familie met het tekeningetje; sinds v0.238 alleen nog in de afdruk */
#printMandje tr.pmfam td{padding-top:8px;border-bottom:1px solid #9aa7b4}
#printMandje .famteken{width:48px;height:30px;object-fit:contain}
#printMandje small.ean{display:block;font-size:8pt;color:#555}
/* v0.158 (PLAN-FEDDY-RONDES §9): stickers op kaartje en pop-up; navy voor voorraad, oranje rand voor uitloop (geen nieuwe kleur) */
.lkbeeld{position:relative}
.lkstickers{position:absolute;left:6px;top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none;z-index:1}
.sticker{display:inline-block;font:600 11px/1.2 'Open Sans',sans-serif;padding:3px 7px;white-space:nowrap;letter-spacing:.01em}
.sticker.voorraad{background:var(--navy);color:#fff}
.sticker.uitloop{background:#fff;color:#8a4310;border:1px solid #c9621a}
.pdstickers{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pdspec small.ean{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.bhstgroep{margin:18px 0 6px;font-size:15px}
.bhsttabel{width:100%;border-collapse:collapse;font-size:13px}
.bhsttabel td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.bhstnr{font-weight:700;color:var(--navy);white-space:nowrap;width:110px}
.bhstvink{width:220px}.bhstvink label{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
@media (max-width:640px){.bhsttabel tr{display:grid;grid-template-columns:1fr;padding:6px 0;border-bottom:1px solid var(--line)}.bhsttabel td{border:0;padding:2px 0}.bhstvink{width:auto}}

/* v0.165 (Stefan 21-10): zoomknoppen in de kop van de tekening en van de 3D-werkplek, naast Beginstand; alleen op desktop (muis),
   op een telefoon knijp je */
.zoomknoppen{display:none;align-items:stretch;height:31px;background:#fff;border:1px solid var(--lblue);border-radius:var(--rb);overflow:hidden}
.m3d-kop .zoomknoppen{height:38px}
.zoomknop{width:36px;border:0;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .12s}
.zoomknop+.zoomknop{border-left:1px solid var(--lblue)}
.zoomknop .thiel-ui-icon{--thiel-ui-size:19px}
.zoomknop:hover,.zoomknop:focus-visible{background:var(--lblue);outline:none}
.zoomknop:disabled{color:#b6c0ca;cursor:default;background:#fff}
.schets.ingezoomd svg{cursor:move}
.schets.ingezoomd.sleept svg{cursor:grabbing}
@media (hover:hover) and (pointer:fine) and (min-width:900px){.zoomknoppen{display:inline-flex}}
@media print{.zoomknoppen{display:none!important}}


/* v0.170 (Stefan 21-10): beheer → Projecten (scripts/beheer-projecten.js): lijst, nieuw project met foto's, klaarzetten en publiceren.
   Knoppen in een groep even breed (raster), tikdoelen 44 px, velden 16 px (geen inzoomen op de iPhone). */
.bhpkop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bhpkop .mbtn,.bhpknoppen .mbtn,.bhpknoppen .xbtn,.bhpacties .mbtn,.bhpacties .xbtn,.bhpvraag .mbtn,.bhpvraag .xbtn,.bhpkies{height:auto;min-height:44px;justify-content:center}
.bhplijst{list-style:none;margin:6px 0 14px;padding:0}
.bhprij{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.bhpnaam{flex:1;min-width:0;display:grid;gap:2px}.bhpnaam b{color:var(--navy);overflow-wrap:anywhere}.bhpnaam small{color:var(--muted);font-size:12.5px}
.bhpknoppen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;min-width:0}
.bhpstand:empty{display:none}.bhpstand{margin:8px 0;padding:10px 12px;border:1px solid rgba(0,46,84,.28);background:#f4f8fb;font-size:13.5px;overflow-wrap:anywhere}
.bhpvraag .knoppen,.bhpacties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px}
.bhpform h2{margin-bottom:8px}
.bhptwee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:10px}
.bhpveld input,.bhpveld textarea{width:100%;min-width:0;border:1px solid var(--field);padding:8px 10px;font:400 16px/1.5 'Open Sans',sans-serif;color:var(--ink);background:#fff}
.bhpveld input{height:44px}.bhpveld textarea{resize:vertical;min-height:88px}
.bhpteller{text-align:right}
.bhpfeiten,.bhpfotos{border:1px solid var(--line);margin:12px 0;padding:10px 12px 12px}
.bhpfeiten legend,.bhpfotos legend{padding:0 6px;font-weight:600;color:var(--navy);font-size:13.5px}
.bhpfeiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bhpkies{position:relative;cursor:pointer;overflow:hidden}.bhpkies input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.bhpduimen{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bhpduim{border:1px solid var(--line);padding:8px;display:grid;gap:6px;background:#fff;min-width:0}
.bhpduim.is-titel{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.bhpduim img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--lblue)}
.bhpduimnaam{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bhpradio{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;cursor:pointer}.bhpradio input{width:18px;height:18px;accent-color:var(--blue)}
.bhpduimknoppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bhpduimknoppen .xbtn{height:44px;padding:0;justify-content:center}.bhpduimknoppen .xbtn:disabled{opacity:.4;cursor:not-allowed}
.bhpen{margin:10px 0;padding:10px 12px;border:1px solid #e0b252;background:#fff8e8}
.bhpen .noot{display:flex;gap:8px;align-items:flex-start;margin:0 0 6px}.bhpen .bhvink{min-height:44px}
.bhprij.is-verborgen .bhpnaam b{color:var(--muted)}.bhprij.is-verborgen .bhpnaam small{color:#8a5a00}
.bhpmelding:empty{display:none}.bhpmelding{margin:10px 0;font-size:13.5px;color:var(--navy);font-weight:600}
@media (max-width:1023px){.bhpduimen{grid-template-columns:repeat(3,minmax(0,1fr))}.bhpfeiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bhptwee{grid-template-columns:1fr}.bhpduimen{grid-template-columns:repeat(2,minmax(0,1fr))}.bhprij{flex-direction:column;align-items:stretch}
  .bhpkop .mbtn{width:100%}.bhpfeiten{grid-template-columns:1fr}}
/* v0.174 (Stefan 22-10): beheer → Nieuwsbrief (scripts/beheer-nieuwsbrief.js): inschrijvers, opstellen, verzonden.
   Knoppen in een groep even breed (raster), tikdoelen 44 px, velden 16 px (geen inzoomen op de iPhone). */
.bhnkop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bhnkop .xbtn,.bhnacties .mbtn,.bhnacties .xbtn,.bhnvraag .mbtn,.bhnvraag .xbtn{height:auto;min-height:44px;justify-content:center}
.bhnbtel{font-weight:600;color:var(--navy)}
.bhnbmail{padding:8px 12px;border:1px solid #e0b252;background:#fff8e8;color:#5c4300}
.bhnbtabel{width:100%;border-collapse:collapse;font-size:14px}
.bhnbtabel th{text-align:left;font:600 11.5px/1.3 'Open Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.bhnbtabel td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.bhnbadres{overflow-wrap:anywhere;color:var(--navy);font-weight:600}
.bhnbstatus{display:inline-block;padding:3px 8px;font-size:12px;font-weight:600;border:1px solid var(--line)}
.bhnbstatus.is-bevestigd{background:#eaf6ee;color:#1d6b3a;border-color:#bfe2cb}.bhnbstatus.is-wacht{background:#fff8e8;color:#7a5800;border-color:#ecd38f}
.bhnbweg{width:44px;height:44px;padding:0;justify-content:center}
.bhnlijst{list-style:none;margin:6px 0 4px;padding:0}
.bhnrij{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.bhnnaam{flex:1;min-width:0;display:grid;gap:2px}.bhnnaam b{color:var(--navy);overflow-wrap:anywhere}.bhnnaam small{color:var(--muted);font-size:12.5px}
.bhnstand:empty{display:none}.bhnstand{margin:10px 0;padding:10px 12px;border:1px solid rgba(0,46,84,.28);background:#f4f8fb;font-size:13.5px;overflow-wrap:anywhere}
.bhnvraag .knoppen,.bhnacties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px}
.bhnform h2{margin-bottom:8px}
.bhntwee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:10px}
.bhnveld input,.bhnveld textarea,.bhnveld select{width:100%;min-width:0;border:1px solid var(--field);padding:8px 10px;font:400 16px/1.5 'Open Sans',sans-serif;color:var(--ink);background:#fff}
.bhnveld input,.bhnveld select{height:44px}.bhnveld textarea{resize:vertical;min-height:140px}
.bhnbproject{max-width:520px;margin-bottom:10px}
.bhnmelding:empty{display:none}.bhnmelding{margin:10px 0;font-size:13.5px;color:var(--navy);font-weight:600}
/* v0.236: beheer → Back-up (scripts/beheer-backup.js); hergebruikt de lijst en knoppen van Nieuwsbrief */
.bhbk h3{margin:16px 0 4px}.bhbk .bhnbmail.bhbkok{border-color:#bfe2cb;background:#eaf6ee;color:#1d6b3a}
@media (max-width:640px){.bhntwee,.bhnvraag .knoppen,.bhnacties{grid-template-columns:1fr}.bhnkop .xbtn{width:100%}
  .bhnbtabel thead{display:none}.bhnbtabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  .bhnbtabel td{border:0;padding:0}.bhnbtabel td.bhnbadres{grid-column:1/-1}.bhnbtabel td:last-child{grid-column:2;grid-row:2/5;align-self:center}}

/* ---------- v0.172 (Stefan 22-10): offertelijst, uitklapmenu en beheer gelijk aan de site, ronde knop in de voet ---------- */
/* lege offertelijst: centraal, met een kop en een leesbare zin; de twee knoppen even breed */
.mpleeg{align-items:center;text-align:center;padding:56px 16px 64px;max-width:640px;margin:0 auto;gap:14px}
.mpleeg h2{margin:0;font:600 clamp(26px,2.6vw,34px)/1.1 'Oswald',sans-serif;color:var(--navy)}
.mpleeg p{margin:0;font-size:16px;line-height:1.6;color:var(--ink);text-wrap:balance}
.mpleeg .knoppen{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px;justify-content:center;margin-top:8px}
.mpleeg .knoppen>*{width:100%;justify-content:center;min-height:44px;font-size:15px}
@media (max-width:480px){.mpleeg .knoppen{grid-template-columns:minmax(0,1fr);width:100%}}
/* kop van de offertelijst: rechts de eenhedenschakelaar (m · kg / ft · lb) naast "Verder met de calculator" */
.mpkop-acties{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eenhsw.eenhsw--groot{height:38px;font-size:13px}.eenhsw.eenhsw--groot span{padding:0 12px}
/* losse artikelen: geen projectkaart met datum en verwijderknop, alleen de kop */
.mproj.los .mph{margin-bottom:2px}
/* totaal van de hele lijst: dezelfde kolommen als de regels, getallen onder elkaar, rustig formaat */
.mlijsttotaal{border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:var(--rb);padding:0 10px;margin:0 0 10px;background:var(--lblue)}
.mlijsttotaal .mr.mrsom{border-top:0;padding:10px 0;font-size:13px}
.mlijsttotaal small{font-weight:500;color:var(--muted);margin-left:6px}
.mtotaal .eind b{font-size:16px}
/* uitklapmenu in de kop zoals op de site (v0.168): Thiel-blauw met een puntje, witte tekst, oranje streepje bij aanwijzen */
.hddmenu{background:var(--blue);border-top:0;top:calc(100% + 12px);padding:10px 0;box-shadow:0 18px 40px rgba(0,30,60,.32)}
.hddmenu::after{content:'';position:absolute;left:30px;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--blue)}
.hddmenu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.hnav .hddmenu a,.hnav .hddmenu button{position:relative;color:#fff;font-weight:600;padding:11px 24px;transition:background .15s,padding .15s}
.hnav .hddmenu a::before,.hnav .hddmenu button::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--orange);transform:scaleY(0);transition:transform .18s}
.hnav .hddmenu a:hover,.hnav .hddmenu button:hover,.hnav .hddmenu a:focus-visible,.hnav .hddmenu button:focus-visible{background:var(--blue7);color:#fff;padding-left:28px;outline:none}
.hnav .hddmenu a:hover::before,.hnav .hddmenu button:hover::before,.hnav .hddmenu a:focus-visible::before,.hnav .hddmenu button:focus-visible::before{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){.hnav .hddmenu a,.hnav .hddmenu button,.hnav .hddmenu a::before,.hnav .hddmenu button::before{transition:none}}
/* beheer even breed als de rest van de site (was 1680 px; ook de voet liep daardoor breder) */
body[data-pagina="beheer"] .wrap .in{max-width:1360px}
/* "Neem contact op" in de voet: afgeronde knop, passend bij de ronde iconen en het logo */
.knop-voet{border-radius:999px;padding:0 22px}
/* v0.177 (Stefan 22-10, toestelcheck 344–440 px): nummer en VE in de shopkaart minstens 12 px, en de uitloopsticker mag op de
   smalste telefoons (Fold dicht, 344 px) afbreken in plaats van buiten de kaart te lopen */
body[data-pagina=shop] .lkmeta{font-size:clamp(12px,3vw,12.5px)}
@media (max-width:380px){.lkstickers{right:6px}.sticker{white-space:normal}}
/* v0.177: ook in de app-voet een tikvlak van 44 px rond de ronde iconen, zonder dat het rondje groter wordt */
@media (pointer:coarse){.voet-social a,.voet-contact-icoon{position:relative}.voet-social a::after,.voet-contact-icoon::after{content:'';position:absolute;inset:-5px;border-radius:50%}}

/* v0.180 (Stefan 22-10): logo groter in de kop, zoals op de site (styles/site.css): desktop 76 px, telefoon 56 px, na scrollen 42 px.
   Verhouding als het origineel: alleen de hoogte wordt gezet. */
@media (min-width:1101px){.top img.logo{height:76px}.top .in{padding-top:8px;padding-bottom:8px}}
@media (min-width:1101px){.top .in{padding-top:13px;padding-bottom:13px}}   /* v0.197 (Stefan 23-10): kop iets hoger, gelijk aan de site (102 px) */
@media (max-width:1100px){.top .in{min-height:72px}.top img.logo{height:56px}.top.klein img.logo{height:42px}}
/* v0.182 (Stefan 23-10, "in de shop kan veel lege ruimte weg zonder dat het slordig wordt"): de kaartjes in een rij delen hun
   regels (subgrid: foto, uitvoering, naam, artikelregel, aantal + knop). Zo krijgen twee kaartjes naast elkaar dezelfde
   opmaak, maar is elke regel maar zo hoog als nodig: geen uitvoeringskeuze in de hele rij = geen lege ruimte daarvoor, twee
   namen van één regel = één regel hoogte. De naam staat altijd direct boven het artikelnummer (onderaan zijn regel).
   Elke regel krijgt zijn afstand als marge (geen rij-gap), zodat een lege regel echt 0 px is. Zonder subgrid: zoals het was. */
@supports (grid-template-rows:subgrid){
  body[data-pagina=shop] .losgrid{row-gap:0}   /* de afstand tussen de rijen kaartjes staat onder de knop (Chrome gaf een lege regel anders toch de rij-gap) */
  body[data-pagina=shop] .losgrid>.lk{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  body[data-pagina=shop] .losgrid>.lk>.lkb,body[data-pagina=shop] .losgrid>.lk .lkonder{display:contents}
  body[data-pagina=shop] .losgrid>.lk .lkbeeld{grid-row:1}
  body[data-pagina=shop] .losgrid>.lk .lkvar{grid-row:2;margin-top:10px}
  body[data-pagina=shop] .losgrid>.lk .lkvar.leeg{display:none}
  body[data-pagina=shop] .losgrid>.lk h3{grid-row:3;align-self:end;min-height:0;margin-top:8px}
  body[data-pagina=shop] .losgrid>.lk .lkmeta{grid-row:4;margin-top:4px}
  body[data-pagina=shop] .losgrid>.lk .lkadd{grid-row:5;margin:8px 0 22px}
}
@media (max-width:640px){@supports (grid-template-rows:subgrid){
  body[data-pagina=shop] .losgrid>.lk .lkadd{margin-bottom:16px}
}
}
/* v0.200 (Stefan 23-10): de iconen rechts in de kop dichter bij elkaar, gelijk aan de site */
@media (min-width:1101px){.top .right{gap:6px}.top .right .hcontact{margin-right:10px}}
/* v0.200: met Werken bij als eigen item past het menu van de shop tot 1366 px alleen met iets minder ruimte ertussen */
@media (min-width:1101px) and (max-width:1366px){.hnav{gap:16px}}
@media (min-width:1101px) and (max-width:1200px){.hnav{gap:10px}}
@media (min-width:1101px) and (max-width:1200px){.htaal span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}   /* v0.200: alleen de vlag; de naam blijft voor schermlezers */

/* Vacaturebeheer: dezelfde velden en Thiel-opmaak als de bestaande vacature, mobiel één kolom. */
.bhvac-kop,.bhvac-rij{display:flex;justify-content:space-between;align-items:center;gap:16px}.bhvac-rij{padding:16px 0;border-top:1px solid var(--line)}.bhvac-rij small{display:block;margin-top:4px;color:var(--muted)}.bhvac-acties{display:flex;flex-wrap:wrap;gap:8px}.bhvac .xbtn{min-height:44px}.bhvac-form{margin-top:24px;border-top:2px solid var(--blue);padding-top:20px}.bhvac-form[hidden]{display:none}.bhvac-velden{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.bhvac-velden label,.bhvac-import label{display:flex;flex-direction:column;gap:6px;font-weight:600;min-width:0}.bhvac-velden input,.bhvac-velden textarea,.bhvac-velden select{width:100%;min-height:44px;padding:10px;border:1px solid var(--line);font:400 16px/1.5 'Open Sans',sans-serif;box-sizing:border-box}.bhvac-breed{grid-column:1/-1}.bhvac-velden fieldset{border:1px solid var(--line);padding:14px}.bhvac-salaris{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.bhvac-import{display:flex;align-items:end;gap:16px}.bhvac-import input{max-width:100%;font-size:14px}.bhvac-dialog{width:min(480px,calc(100vw - 40px));border:1px solid var(--line);padding:24px;color:var(--ink)}.bhvac-dialog::backdrop{background:#002e5480}.bhvac-dialog h2{margin:0 0 12px}.bhvac-dialog p{margin-bottom:20px}.bhvac-dialog .xbtn{min-height:44px}@media(max-width:640px){.bhvac-kop,.bhvac-rij,.bhvac-import{align-items:stretch;flex-direction:column}.bhvac-velden{grid-template-columns:1fr}.bhvac-salaris{grid-template-columns:1fr}.bhvac-acties>*{flex:1}.bhvac-rij .bhvac-acties{width:100%}}

/* v0.206: kalender voor de gewenste leverdatum (scripts/kalender.js); knop in de maat van de velden, raster rechts uitgelijnd */
.kal{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.kal-knop{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:32px;padding:5px 8px;border:1px solid var(--field);border-radius:var(--rb);background:#fff;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.kal-knop.kal-leeg{color:var(--muted)}.kal-knop.kal-fout{border-color:#c62828}.kal-knop svg{flex:none;width:16px;height:16px;color:var(--navy)}
.kal-pop{position:absolute;z-index:40;top:calc(100% + 4px);right:0;width:min(320px,calc(100vw - 32px));background:#fff;border:1px solid var(--field);border-radius:var(--rb);box-shadow:0 8px 24px rgba(0,0,0,.16);padding:10px}
.kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.kal-kop b{font-size:13px;color:var(--navy);text-transform:capitalize}
.kal-nav{width:34px;height:34px;border:0;background:none;border-radius:var(--rb);cursor:pointer;font:inherit;font-size:20px;line-height:1;color:var(--navy)}.kal-nav:hover:not(:disabled){background:#eef3f8}.kal-nav:disabled{color:#c3cad2;cursor:default}
.kal-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kal-wd{font-size:11px;font-weight:600;color:var(--muted);text-align:center;padding:2px 0;text-transform:lowercase}
.kal-dag{height:34px;border:0;background:none;border-radius:var(--rb);font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.kal-dag:hover:not(:disabled){background:#eef3f8}.kal-dag.buiten{color:#9aa5b1}.kal-dag:disabled{color:#c3cad2;cursor:default;text-decoration:line-through}
.kal-dag.vandaag{font-weight:700;box-shadow:inset 0 0 0 1px var(--navy)}.kal-dag.gekozen,.kal-dag.gekozen:hover{background:var(--navy);color:#fff}
.kal-dag:focus-visible,.kal-nav:focus-visible,.kal-knop:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.kal-voet{display:flex;justify-content:flex-end;margin-top:6px}.kal-wis{border:0;background:none;font:inherit;font-size:12px;color:var(--navy);text-decoration:underline;cursor:pointer;padding:6px 4px}
@media (max-width:640px){.kal-dag{height:42px;font-size:14px}.kal-nav{width:42px;height:42px}}
@media (pointer:coarse){.kal-knop,.kal-dag,.kal-nav,.kal-wis{min-height:44px}.kal-nav{min-width:44px}}   /* v0.210: tikdoelen ≥ 44 px, zoals de velden ernaast */
/* v0.210 (W39): de Feliro-link in de voettekst ook zonder kleur herkenbaar als link */
.voet-feliro a,.voet footer .voet-feliro a{text-decoration:underline;text-underline-offset:2px}
/* v0.210: de foto in het uitschuifmenu binnen het paneel met navy mengen (background-blend-mode) in plaats van met de pagina
   erachter (mix-blend-mode): Safari toonde hem soms grijs, de app blauw. Zelfde kleur, zonder die afhankelijkheid. */
.menu-mobiel::before,.ocv::before{background:url(/assets/menu-achtergrond.webp) 25% center/cover no-repeat,var(--navy);background-blend-mode:multiply;mix-blend-mode:normal;opacity:.5}

/* Drie vacatureacties blijven op elke schermmaat even breed, in één rij. */
.bhvac-rij .bhvac-acties{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex-shrink:0}.bhvac-rij .bhvac-acties .xbtn{padding-inline:10px;white-space:nowrap;min-width:0}@media(max-width:640px){.bhvac-rij .bhvac-acties .xbtn{padding-inline:6px;font-size:12px}}
/* v0.209 (Stefan 24-10): mobiel menu compacter, submenu's als uitklapper (zelfde regels als styles/site.css) */
.ocv-nav a,.ocv-nav button{padding:6px 0}.ocv-nav .sub a{padding:4px 0 4px 16px}
.ocv-rij{display:flex;align-items:center}.ocv-rij>a{flex:1;min-width:0}
.ocv-nav .ocv-open{flex:none;width:96px;height:34px;margin-right:-12px;padding:0 24px 0 0;background:transparent;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:flex-end}   /* v0.226 (Stefan 25-10): breder tikvlak (96 px), zodat net naast het pijltje tikken ook uitklapt en niet naar de pagina gaat */
@media (max-width:380px){.ocv-nav .ocv-open{width:64px;padding-right:16px}}   /* v0.255: op een smalle telefoon past "Assortiment" anders niet naast het pijltje */
.ocv-open::before{content:'';width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.ocv-open[aria-expanded=true]::before{transform:translateY(2px) rotate(-135deg)}
.ocv-open:hover,.ocv-open:focus-visible{color:#94cfff}
.ocv-nav .sub[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ocv-open::before{transition:none}}
/* v0.209 (Stefan 24-10): de voorbeelden (Rijtjeshuis, Rechte gevel) als ronde, compacte chips in een eigen kleur, zodat ze niet
   op de vierkante knoppen lijken; op de telefoon op de titelregel van Gevels, naast m · kg. Tikvlak blijft 44 px (::after). */
.vbchips .chip{position:relative;border-radius:999px;background:#fff;border:1px solid var(--blue);color:var(--blue);padding:0 11px;height:26px;min-height:0;font-size:11.5px;line-height:24px;white-space:nowrap}
.vbchips .chip:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.vbchips .chip::after{content:'';position:absolute;inset:-9px -2px}
.kopr{display:contents}   /* v0.209: groepje m · kg + voorbeelden; op desktop telt het niet mee */
@media (max-width:480px){
  .kophead:has(.vbchips){flex-wrap:wrap;gap:8px}   /* past het niet (Engels, smalle telefoon), dan chips en m · kg samen op de tweede regel, rechts */
  .kopr{display:flex;align-items:center;gap:8px;margin-left:auto}
  .kophead .vbchips{order:1;margin-left:0;width:auto;gap:5px}
  .kopr .eenhsw{order:2;margin-left:0}
  .vbchips .vbkort{display:none}
  .vbchips .chip{padding:0 8px;font-size:11px}
}

/* Centrale beheerinbox: dezelfde Thiel-componenten, één kolom op de telefoon. */
.bhi-kop,.bhi-meta,.bhi-detailkop{display:flex;justify-content:space-between;gap:16px;align-items:start}.bhi-kop{align-items:center}.bhi-kop h2{margin:0}.bhi-filters{display:grid;grid-template-columns:1fr 1fr 2fr;gap:16px;margin:20px 0}.bhinbox label{display:grid;gap:6px;min-width:0}.bhinbox input,.bhinbox select,.bhinbox textarea{width:100%;min-height:44px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:4px;background:#fff;color:#172b4d;font:inherit;padding:10px}.bhinbox textarea{resize:vertical}.bhinbox button,.bhinbox .xbtn{min-height:44px}.bhi-berichten{list-style:none;padding:0;margin:0}.bhi-rij{display:grid;gap:6px;text-align:left;width:100%;background:#fff;color:inherit;border:0;border-top:1px solid #dbe3ed;padding:18px 8px;font:inherit;cursor:pointer;overflow-wrap:anywhere}.bhi-rij:hover{background:#f3f7fc}.bhi-meta{font-size:12px;color:#526477;align-items:center}.bhi-meta strong{white-space:nowrap;color:#005da9}.bhi-rij small{color:#526477;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bhi-tekst{white-space:pre-wrap;overflow-wrap:anywhere}.bhi-detailkop{margin:20px 0}.bhi-detailkop>div{min-width:0;overflow-wrap:anywhere}.bhi-detailkop form{display:grid;gap:10px;min-width:180px}.bhinbox details{border-block:1px solid #dbe3ed;padding:16px 0;margin-block:20px}.bhinbox summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}.bhi-velden{display:grid;gap:8px}.bhi-velden>div{display:grid;grid-template-columns:140px 1fr;gap:12px}.bhi-velden dt{font-weight:600}.bhi-velden dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.bhinbox [data-in-form]{display:grid;gap:16px}.bhi-acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bhi-acties button{display:flex;align-items:center;justify-content:center;gap:8px;padding-inline:8px}.bhi-mail{width:100%;height:640px;border:1px solid #dbe3ed;background:#f4f6f8;box-sizing:border-box}.bhi-reactie{border-top:1px solid #dbe3ed;padding:18px 0;display:grid;gap:8px}.bhi-reactie small{color:#526477}.bhinbox :focus-visible{outline:3px solid #0072ce;outline-offset:3px}.bhinbox [data-in-test]{padding:12px;background:#fff5d9;color:#684800}.bhinbox [role=status]:empty{display:none}@media(max-width:767px){.bhi-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bhi-zoek{grid-column:1/-1}.bhi-detailkop{display:grid}.bhi-detailkop form{width:100%;grid-template-columns:1fr 1fr;align-items:end}.bhi-velden>div{grid-template-columns:1fr;gap:2px}.bhi-meta{font-size:11px;gap:6px}.bhi-acties{gap:8px;font-size:13px}.bhi-acties button{font-size:inherit}.bhi-mail{height:580px}}

.bhi-soorten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px}.bhi-soorten button{display:flex;gap:8px;justify-content:center;align-items:center;min-width:0;padding:10px 6px}.bhi-soorten [aria-pressed=true]{background:#002e54;color:#fff;border-color:#002e54;font-weight:700}.bhi-soorten span{font-variant-numeric:tabular-nums}.bhi-filters{grid-template-columns:1fr 2fr}.bhi-acties button{white-space:nowrap}.bhi-acties .thiel-ui-icon{width:18px;height:18px;flex-shrink:0}@media(max-width:767px){.bhi-soorten{grid-template-columns:repeat(2,minmax(0,1fr));font-size:12px}.bhi-soorten button{font-size:inherit}.bhi-filters{grid-template-columns:1fr}.bhi-acties{font-size:12px}}

/* Stefan 24-10: hulphandelingen compact, tekst links; mobiel duidelijke iconen. */
.bhlay :is(button,a.xbtn),.kolay :is(button,a.xbtn){text-align:left}
.toolactie{min-height:44px;justify-content:flex-start;transition:background var(--t-snel,.2s),border-color var(--t-snel,.2s),transform var(--t-direct,.12s)}
.toolactie:active:not(:disabled){transform:translateY(1px)}
.toolactie:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#bhAanvragen{max-width:100%;overscroll-behavior-x:contain}
#bhAanvragen .bhaanvragen{min-width:900px;table-layout:fixed}
#bhAanvragen .bhaanvragen th:nth-child(1){width:190px}
#bhAanvragen .bhaanvragen th:nth-child(2){width:240px}
#bhAanvragen .bhaanvragen th:nth-child(3){width:155px}
#bhAanvragen .bhaanvragen th:nth-child(4),#bhAanvragen .bhaanvragen th:nth-child(5){width:70px}
#bhAanvragen .bhaanvragen th:nth-child(6){width:190px}
#bhAanvragen .bhaanvragen th:nth-child(7){width:100px}
#bhAanvragen .bhaanvragen .bhsmal{display:table-cell}
.bhaq-samenvatting{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;max-height:2.9em;overflow-wrap:anywhere}
#bhAanvragen .bhaanvragen td{white-space:nowrap}
#bhAanvragen .bhaanvragen td.oms{white-space:normal}
#bhAanvragen .bhaanvragen .bhaqfout{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odoo-status{position:absolute;bottom:-4px;right:-2px;display:inline-flex;align-items:center;gap:2px;padding:1px 3px;background:#eaf3fc;color:#002e54;border:1px solid #a1adb8;border-radius:3px;font:700 9px/1.3 'Open Sans',sans-serif;white-space:nowrap;pointer-events:none}
.hbtn .odoo-status .thiel-ui-icon{display:inline-block;width:11px;height:11px}
.odoo-status[data-status=goed]{background:#e7f5ee;color:#145332;border-color:#1d6b43}
.odoo-status[data-status=fout]{background:#fff4e5;color:#743d00;border-color:#8a4b00}
@media(max-width:640px){
 .kolay .toolactie{width:44px;min-width:44px;max-width:44px;height:44px;padding:0;justify-content:center;flex:0 0 44px}
 .toolactie>.actie-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .bhi-kop,.bhnkop{align-items:center}
}
@media(prefers-reduced-motion:reduce){.toolactie{transition:none}.toolactie:active:not(:disabled){transform:none}}
@media(max-width:359px){.top img.logo{height:46px}.top .in{padding-left:12px;padding-right:12px;gap:4px}.top .right{gap:4px}.top .mkop{gap:0}}
.top .right .hbtn .odoo-status .thiel-ui-icon{width:10px;height:10px}
#bhAanvragen .bhaq{min-height:44px}
.kolay .fm-leeg,.kolay .fm-credit{text-align:left}
.kolay .fm .fm-chip{display:flex;align-items:center;justify-content:center;text-align:center}
.bhinbox [data-in-form][hidden]{display:none}
@media(max-width:640px){.kolay .bhnacties{display:flex;flex-wrap:nowrap;gap:8px}.kolay .bhnacties>.toolactie{flex:0 0 44px}}
.nb-contacten{margin:16px 0;border-block:1px solid var(--line);padding:10px 0}
.nb-contacten summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--navy)}
.nb-contacten label{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-weight:600}
.nb-contacten input:not([type=checkbox]),.nb-contacten select{width:100%;min-height:44px;border:1px solid var(--field);padding:8px;font:inherit}
.nb-contacten .nb-actief{flex-direction:row;align-items:center;min-height:44px;font-weight:400}
.nb-actief input{width:20px;height:20px;flex:none;accent-color:var(--blue)}
.nb-contacten form{border-left:3px solid var(--blue);padding-left:12px}
.nb-contacten [hidden]{display:none}.nb-contacten [role=status]:empty{display:none}
.nb-contacten .bhsugg button{display:flex;align-items:flex-start;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.nb-contacten button:disabled{opacity:.6;cursor:not-allowed}
.nb-rijacties{display:flex;align-items:center;gap:6px}
.nb-rijacties .xbtn{min-height:44px;white-space:nowrap}
.bhnbadres small{display:block;font-weight:400;color:var(--muted)}
@media(max-width:640px){.nb-rijacties .xbtn{width:44px;height:44px;min-width:44px;padding:0;justify-content:center}.nb-rijacties .xbtn>span:not(.thiel-ui-icon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
.bhnbstatus.is-inactief{background:#f2f4f6;color:#52606b;border-color:#bcc6cf}
/* v0.229 (plan onboarding §2): welkomstmail in Outlook direct na aanmaken of een nieuw wachtwoord; kolom Inloggen met "gewijzigd …" */
.bhlijst td.bhinlog .bhgewijzigd{display:block}
.bhwelkom{white-space:normal;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%;gap:8px;margin:0 0 14px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue)}
.bhwelkom .noot{margin:0}
.bhwelkom .knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.bhwkrij{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bhseg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:120px}
.bhseg .xbtn{justify-content:center;min-height:36px}
.bhseg .xbtn[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.bhwkaan{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--navy);min-width:0}
.bhwkaan select{min-width:0;max-width:100%;height:36px;border:1px solid var(--field);padding:0 8px;font:500 13px 'Open Sans',sans-serif;color:var(--ink);background:#fff}
@media (max-width:640px){.bhwkaan{flex:1 1 100%}.bhwkaan select{flex:1;width:100%}.bhwkrij{min-width:0}.bhwelkom .knoppen>*{flex:1 1 100%;justify-content:center}}
/* v0.229 (plan onboarding §3.3): eigen wachtwoord bij de eerste login — één kaart, smal en rustig; tijdens de onboarding geen menu,
   mandje of zoeken naar prijzen of historie (body[data-onboarding], scripts/app.js). Uitloggen en de taalkeuze blijven. */
body[data-onboarding] #hnav,body[data-onboarding] #btnMandjeTop,body[data-onboarding] #btnMenu,body[data-onboarding] .ocv,body[data-onboarding] .ocv-overlay{display:none!important}
.koonboard{max-width:520px;margin:24px auto 40px;padding:0 16px}
.koonboard .kokaart{padding:24px}
.koonboard .pgtitel{font-size:26px;line-height:1.25;margin:0 0 6px}
.koonboard .frm{grid-template-columns:1fr;gap:4px}
.koonboard .frm input{width:100%;min-height:44px;font-size:16px}
.koonboard .frm .noot{margin:0 0 8px}
.koonboard .kofout{display:block;color:var(--red);font-size:12.5px;font-weight:600;margin-top:3px}
.koonboard .kotonen{margin:2px 0 10px}
.koonboard .kotonen .xbtn,.koonboard .mbtn,.koonboard .koobuit .xbtn{min-height:44px}
.koonboard .mbtn{width:100%;justify-content:center}
.koobuit{margin:14px 0 0;text-align:center}
.koobklaar{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;background:#eaf6ee;border-left:3px solid var(--green);color:var(--navy);font-weight:600;font-size:14px}
@media (max-width:640px){.koonboard{margin-top:12px;padding:0}.koonboard .kokaart{padding:18px 16px}.koonboard .pgtitel{font-size:22px}}
.bhmelding .bhwelkom p{display:block;margin:0;padding:0;background:none;border:0;font-size:12.5px}
.bhwelkom a.mbtn{text-decoration:none}
.koonboard .kofout:empty{display:none}
/* v0.232: compact stickerveld, meerdere keuzes; in de rij, nooit een overlay over andere artikelen. */
.bhstproduct{width:100%}.bhstlabels{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.bhstlabels:empty{display:none}
.bhstvink{width:280px;min-width:260px}.bhstmenu{border:1px solid var(--line);background:#fff}
.bhstmenu summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;box-sizing:border-box;cursor:pointer;list-style:none;font-weight:600;color:var(--navy)}
.bhstmenu summary::-webkit-details-marker{display:none}.bhstmenu summary .thiel-ui-icon{margin-left:auto;transition:transform .15s ease}
.bhstmenu[open] summary{border-bottom:1px solid var(--line);background:var(--lblue)}.bhstmenu[open] summary .thiel-ui-icon{transform:rotate(180deg)}
.bhstaantal{font-size:12px;min-width:20px;text-align:center;background:var(--lblue);font-variant-numeric:tabular-nums}
.bhstmenu summary:focus-visible,.bhstkeuzes input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.bhstkeuzes{padding:4px 10px}.bhstkeuzes label{display:flex;gap:10px;min-height:44px;line-height:1.3}.bhstkeuzes input{flex:none;margin:0}
.bhstkeuzes input:disabled+span{opacity:.65}
@media(max-width:640px){.bhstvink{width:auto;min-width:0}.bhsttabel td.bhstvink{padding-top:8px}.bhstmenu{width:100%;max-width:360px}.bhstlabels .sticker{white-space:normal}}
@media(prefers-reduced-motion:reduce){.bhstmenu summary .thiel-ui-icon{transition:none}}

/* v0.234 (Stefan 27-10): configurator strakker, ook op de iPhone.
   1. Keuzelijsten in de calculator, de staat en de 3D-werkplek: eigen pijltje en rechte hoeken (iOS tekende ronde "pillen" met
      een eigen pijl en kapte de tekst af), tekst links met beletselteken.
   2. Aantallen bij de accessoires in het midden tussen − en +, zonder de pijltjes van de browser.
   3. Telefoon: per accessoire de uitvoering onder de naam (op volle breedte leesbaar), het aantal rechts ernaast.
   4. Rustige beweging: knoppen geven kort mee bij een tik, een gekozen regel kleurt zacht in, het 3D-model komt in beeld met een
      korte fade (vaste duur uit van-thiel-motion; bij minder beweging niets). Alleen CSS, geen extra werk voor de browser. */
.accvar,.weergave select,#accGevel,.accgevel select,.m3d-paneel select,#gevelTabel select,.m3d-gevel select{-webkit-appearance:none;appearance:none;border-radius:0;background:#fff var(--tui-chevron-down) no-repeat right 8px center/12px 12px;padding-right:26px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.accvar{text-align:left;text-align-last:auto;padding-left:8px}
.stap .accn{text-align:center;padding:0;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.stap .accn::-webkit-outer-spin-button,.stap .accn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stap button,.accr,.accvar,.weergave select,#gevelTabel select{transition:background-color var(--t-snel,.2s) ease-out,border-color var(--t-snel,.2s) ease-out,box-shadow var(--t-snel,.2s) ease-out}
.stap button:active:not(:disabled){transform:scale(.94);transition-duration:var(--t-direct,.12s)}
.accvar:focus-visible,.weergave select:focus-visible,#gevelTabel select:focus-visible,.m3d-paneel select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.m3d-doek canvas{animation:m3d-in var(--t-nadruk,.5s) var(--e-uit,cubic-bezier(.2,.8,.2,1)) both}
@keyframes m3d-in{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  /* v0.237 (Stefan 27-10): de − en + op dezelfde lijn als de uitvoering eronder (niet meer midden over naam en uitvoering);
     de naam krijgt daarboven de hele breedte */
  .accr{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"foto naam naam" "foto sub stap";row-gap:4px;padding:6px 8px}
  .accr>:first-child{grid-area:foto;align-self:center}
  .accr .accnm,.accr.zonder .accnm{grid-area:naam;align-self:end}
  .accr .accsub{grid-area:sub;min-width:0;align-self:center}
  .accr .stap{grid-area:stap;align-self:center}
  .accr.zonder{grid-template-areas:"foto naam stap"}.accr.zonder .accnm{align-self:center}
  .accr .accvar{width:100%;max-width:220px;height:34px;font-size:14px!important}
}
@media (prefers-reduced-motion:reduce){.stap button:active:not(:disabled){transform:none}.m3d-doek canvas{animation:none}}
/* v0.235 (Stefan 27-10): de gevelregel als één raster, op de telefoon en op desktop hetzelfde. Per gevel: nummer en
   omschrijving met de kopieerknop ernaast; daaronder in de volgorde van de steigerbouwer de maten (lengte, hoogte, slag: even
   breed), de opbouw (korteling iets breder, vakmaat, vloeren met − en +) en de ondergrond en toegang (grondslag over twee
   kolommen, opgangen met − en +). Alle velden even hoog (32 px, op een aanraakscherm 36 px), getallen in het midden; alleen
   de omschrijving en de grondslag staan links. table#… zodat dit ook boven de oudere tabel- en tabletregels gaat. */
table#gevelTabel{--gvh:32px;display:block;width:100%}
table#gevelTabel tbody.gv{display:block;padding:10px 0 4px;border-top:1px solid var(--line)}
table#gevelTabel tbody.gv:first-of-type{border-top:0;padding-top:2px}
table#gevelTabel tr[data-i]{display:block}
table#gevelTabel tr[data-i]:not(.gvset){display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:center}
table#gevelTabel tr[data-i] td{display:block;padding:0;width:auto}
table#gevelTabel td.nr{grid-column:1;grid-row:1;text-align:left;font-size:13px}
table#gevelTabel td.naamcel{grid-column:2;grid-row:1}
table#gevelTabel tr.gvset td,table#gevelTabel tr.gvset td:first-child{display:block;padding:6px 0 0 28px}
table#gevelTabel .gvkop{display:flex;gap:6px;align-items:center}
table#gevelTabel .gvkop input{flex:1 1 auto;min-width:0;text-align:left;font-weight:500}
table#gevelTabel .gvkop button.dup,table#gevelTabel .gvkop button.weg{flex:0 0 var(--gvh);width:var(--gvh);height:var(--gvh);min-width:var(--gvh);min-height:var(--gvh);margin:0}
table#gevelTabel .gvs{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:8px;padding:7px}
table#gevelTabel .gvr{display:grid;gap:8px 6px}
table#gevelTabel .gvr-maat{grid-template-columns:repeat(3,minmax(0,1fr))}
/* v0.237: onderkant (vakmaat, grondslag over twee kolommen) en werkvloeren (korteling, vloeren, opgangen) in dezelfde kolommen */
table#gevelTabel .gvr-onder,table#gevelTabel .gvr-opb{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,.95fr)}
table#gevelTabel .gvbreed{grid-column:span 2}
table#gevelTabel .gvs label,table#gevelTabel .gvl{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:10.5px;font-weight:700;color:var(--muted)}
table#gevelTabel .gvs label>span,table#gevelTabel .gvl>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;letter-spacing:0}
table#gevelTabel input,table#gevelTabel select{height:var(--gvh);min-height:var(--gvh);border:1px solid var(--field);border-radius:0;background-color:#fff;padding:0 8px;font-size:13px;line-height:1;color:var(--navy);font-weight:600;width:100%;min-width:0;text-align:center}
table#gevelTabel select{text-align-last:center;padding:0 24px}
table#gevelTabel .gvbreed select{text-align:left;text-align-last:left;padding:0 26px 0 8px;font-weight:500}
table#gevelTabel input::placeholder{color:#7a8794;font-weight:500}
table#gevelTabel .gvstap{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;height:var(--gvh)}
table#gevelTabel .gvstap input{border-left:0;border-right:0;padding:0 2px;-moz-appearance:textfield}
table#gevelTabel .gvstap button{display:inline-flex;align-items:center;justify-content:center;height:var(--gvh);padding:0;border:1px solid var(--field);background:#fff;color:var(--navy);cursor:pointer;transition:background-color var(--t-snel,.2s) ease-out}
table#gevelTabel .gvstap button .thiel-ui-icon,table#gevelTabel .gvstap button svg{width:12px;height:12px}
table#gevelTabel .gvstap button:hover:not(:disabled){background:var(--lblue)}
table#gevelTabel .gvstap button:active:not(:disabled){transform:scale(.94)}
table#gevelTabel .gvstap button:disabled{color:#b4bec8;cursor:default}
table#gevelTabel input:focus-visible,table#gevelTabel select:focus-visible,table#gevelTabel .gvstap button:focus-visible{outline:2px solid var(--blue);outline-offset:-1px}
@media (pointer:coarse){table#gevelTabel{--gvh:36px}table#gevelTabel input,table#gevelTabel select{font-size:14px}table#gevelTabel .gvstap{grid-template-columns:32px minmax(0,1fr) 32px}}
@media (max-width:640px){table#gevelTabel .gvs{padding:6px}table#gevelTabel .gvr{gap:7px 5px}table#gevelTabel select{padding:0 20px}table#gevelTabel select{background-position:right 5px center}}
@media (prefers-reduced-motion:reduce){table#gevelTabel .gvstap button:active:not(:disabled){transform:none}}
/* v0.235 (Stefan 27-10): op weg naar de offerte. Lege verplichte maten rood (houden de aanvraag tegen), een lege omschrijving
   oranje (houdt niets tegen; bij het aanvragen "Gevel 1"). Op de telefoon de aanvraagknop ook direct onder de staat, iets
   kleiner dan in de onderbalk; de aantallen in de staat een maat kleiner, gelijk aan de gewichten en prijzen. */
table#gevelTabel input.verplicht{border-color:#c62828;background-color:#fff5f5;box-shadow:inset 0 0 0 1px #c62828}
table#gevelTabel input.aanvullen,#project.aanvullen{border-color:#d98a1c;box-shadow:inset 0 0 0 1px #f1c27d}
.staatcta{display:none}
@media (max-width:767px){
  .staatcta{display:flex;justify-content:flex-end;margin:10px 0 2px}
  .staatcta .knopaanvraag{height:40px;padding:0 16px;font-size:14px;font-weight:700;gap:8px;width:100%;justify-content:center}
  .staatcta .knopaanvraag .thiel-ui-icon{width:18px;height:18px}
  #staat td.aant{font-size:11px;font-weight:600}
}
/* v0.235: het venster "Afdrukken of PDF" (Safari, geopend vanuit de iOS-app; scripts/calculator.js afdrukVenster) */
.afdrukdlg{border:0;border-top:4px solid var(--blue);padding:20px 20px 18px;max-width:min(420px,calc(100vw - 32px));box-shadow:0 18px 50px rgba(0,30,60,.3)}
.afdrukdlg::backdrop{background:rgba(0,30,60,.45)}
.afdrukdlg h3{margin:0 0 6px;font-family:'Oswald',sans-serif;color:var(--navy);font-size:22px}
.afdrukdlg p{margin:0 0 14px;color:var(--ink);font-size:14px;line-height:1.45}
.afdrukknoppen{display:flex;gap:8px;flex-wrap:wrap}.afdrukknoppen .mbtn{flex:1 1 auto;justify-content:center;gap:8px}
@media print{.afdrukdlg{display:none!important}}
/* v0.238 (Stefan 27-10): offertelijst rustiger. Het aantal staat er als getal; het potlood rechts opent eronder −, + en ×.
   Plaatje, artikelnummer en omschrijving verticaal gecentreerd; op een telefoon de cijfers op de tweede regel en de totaalregel
   (stuks, prijs, gewicht) op één regel naast elkaar. */
.mr{grid-template-columns:40px minmax(0,1fr) 64px 64px 64px 36px;gap:4px 12px;padding:8px 0}
.mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 64px 56px 72px 88px 36px}   /* v0.246: aantal · kg · prijs/st · totaal € */
.mrt{min-width:0;line-height:1.3}
.mrt .o{overflow-wrap:anywhere}
.mr .mraant{font-size:13px;font-weight:600;padding-right:7px}
/* v0.246 (Stefan 28-10): aantal, gewicht en prijzen in hetzelfde lettertype; de totaalkolom alleen iets zwaarder */
.mr:not(.mrkop) .mrc>.n{font-size:13px;font-weight:600}
.mr:not(.mrkop) .mrc>.ptot{font-weight:700}
.mr.mrsom .n,.mr.mrsom .mrc>.n{font-size:13px;font-weight:700}
.mr button.mrbew{justify-self:end;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid transparent;border-radius:var(--rb);background:transparent;color:var(--navy)}
.mr button.mrbew .thiel-ui-icon{--thiel-ui-size:16px}
.mr button.mrbew:hover{background:var(--lblue);border-color:var(--line)}
.mr button.mrbew:focus-visible,.mrstap button:focus-visible,.mracties .del:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.mr.bewerk button.mrbew{background:var(--navy);border-color:var(--navy);color:#fff}
.mracties{grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 2px}
.mrstap{display:inline-flex;align-items:stretch;height:32px;border:1px solid var(--field);background:#fff}
.mr .mrstap button{width:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--navy);font-size:0}
.mr .mrstap button:hover:not(:disabled){background:var(--lblue)}
.mr .mrstap button:disabled{color:var(--line);cursor:default}
.mrstap .thiel-ui-icon{--thiel-ui-size:16px}
.mr .mrstap input{width:48px;height:auto;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 4px;text-align:center;-moz-appearance:textfield;appearance:textfield}
.mrstap input::-webkit-outer-spin-button,.mrstap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mr .mracties .del{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px;font-size:12px;font-weight:700;color:var(--red)}
.mracties .del .thiel-ui-icon{--thiel-ui-size:16px}
.mr .wijz{grid-column:2/-1;justify-content:space-between}
.mr .wijz button{white-space:nowrap}
@media (max-width:640px){
  .mr,.mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) auto 36px;gap:3px 10px}
  .mr .thumb{grid-row:1}
  .mr .mraant{grid-column:3;grid-row:1;padding-right:0}
  .mr .mraant::after{content:attr(data-e);font-size:11.5px;font-weight:500;color:var(--muted)}
  .mr button.mrbew{grid-column:4;grid-row:1}
  .mr>.mrc{grid-row:2;grid-column:2/4}
  .mracties{grid-column:2/-1}
  .mr.mrsom{display:flex;align-items:baseline;gap:14px}
  .mr.mrsom>span:first-child,.mr.mrsom>span:last-child:empty,.mr.mrsom .n:empty{display:none}
  .mr.mrsom>span:nth-child(2){flex:1 1 auto;min-width:0}
  .mr.mrsom .mrc{display:contents}
  .mr.mrsom .n[data-e]::after{content:attr(data-e);font-weight:500;color:var(--muted)}
}
@media (pointer:coarse){
  .mr{grid-template-columns:40px minmax(0,1fr) 64px 64px 64px 44px}
  .mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 64px 56px 72px 88px 44px}
  .mr button.mrbew,.mr .mrstap button{width:44px;height:44px}
  .mrstap{height:auto}.mr .mrstap input{width:52px}
  .mr .mracties .del{min-height:44px;min-width:44px}
}
@media (pointer:coarse) and (max-width:640px){
  .mr,.mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) auto 44px}
}
/* v0.241 (Stefan 28-10): lengte-eenheid in de labels op de telefoon kort (m, ft), op desktop voluit (meter, feet) */
.lu-l{display:none}
@media (min-width:901px){
  .lu-k{display:none}.lu-l{display:inline}
  /* de keuze van de gevel bij de accessoires en de uitvoering (gelaste buis, H 1200) leesbaar */
  .accgevel select{max-width:min(380px,48vw)}
  .accr{grid-template-columns:30px minmax(80px,1fr) minmax(96px,150px) auto}
  /* v0.242 (Stefan 28-10): in de 3D-werkplek krijgt de naam eerst zijn eigen breedte (Voorloopleuning op één regel); de keuze
     neemt de rest, minstens 90 px */
  .m3d-acc .accr{grid-template-columns:30px minmax(0,max-content) minmax(90px,1fr) auto}
}

/* v0.245 (Stefan 28-10): klik op de naam in de kop: klein menu met Klantkaart (of Beheer) en Uitloggen */
.hacc{position:relative;display:inline-flex;align-items:center}
.haccmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:190px;background:var(--blue);padding:8px 0;display:flex;flex-direction:column;z-index:70;box-shadow:0 18px 40px rgba(0,30,60,.32)}
.haccmenu[hidden]{display:none}
.haccmenu::after{content:'';position:absolute;right:14px;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--blue)}
.haccmenu a,.haccmenu button{display:flex;align-items:center;gap:10px;width:100%;color:#fff;font:600 15px/1.2 'Open Sans',sans-serif;padding:11px 20px;text-align:left;text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap}
.haccmenu a:hover,.haccmenu button:hover,.haccmenu a:focus-visible,.haccmenu button:focus-visible{background:var(--blue7);outline:none}
.haccmenu .thiel-ui-icon{width:18px;height:18px;flex:none}

/* v0.246 (besluit Feddy, Stefan 28-10): korting op de brutoprijs en de disclaimer onder het totaal; disclaimer in de shop */
.mtotaal .mtkort b,.prijsblok .mtkort b{color:#1d6b43}
.mtotaal .mtnoot{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--steel);font-size:11.5px;line-height:1.45;color:var(--muted)}
.shopprijsnoot{margin:-4px 0 12px}

/* v0.251 (Stefan 31-10): de Shop-kop beweegt zoals de paginakoppen van de site (styles/site.css): de foto als eigen laag die in
   16 s heen en terug zoomt (kop-beweeg), titel, lijn en ondertitel komen binnen. Alleen transform/opacity, vanaf 641 px en
   zonder "minder beweging"; op de telefoon blijft de kop een vlakke navy band zonder foto. */
.shophero{overflow:hidden;isolation:isolate}
.shophero .sub{margin:8px 0 0;font-size:16px;color:#dbe8f5;max-width:60ch}
@media (max-width:640px){.shophero .sub{font-size:15px;margin-top:4px}}
/* v0.253 (Stefan 1-11): de ondertekst van de kop staat altijd op één regel, ook op de telefoon; de tekst is daarom kort */
.shophero .sub,.calchero .pgtitel small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes kop-beweeg{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}
@keyframes entree-regel{from{transform:translateY(100%);clip-path:inset(-.1em -.1em 100% -.1em)}to{transform:none;clip-path:inset(-.1em -.1em -.3em -.1em)}}
@keyframes entree-op{from{opacity:0;transform:translateY(12px)}}
@keyframes entree-lijn{from{transform:scaleX(0)}}
@keyframes entree-schuif{from{transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){
  .shophero h1{animation:entree-regel 720ms cubic-bezier(.2,.8,.2,1) 120ms backwards}
  .shophero h1::after{content:'';display:block;width:56px;height:3px;margin-top:12px;background:#94cfff;transform-origin:left;animation:entree-lijn 520ms cubic-bezier(.2,.8,.2,1) 640ms backwards}
  .shophero .sub{animation:entree-op 600ms cubic-bezier(.2,.8,.2,1) 380ms backwards}
}
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  .shophero{background-image:none}
  .shophero::after{content:'';position:absolute;inset:0;z-index:-1;background:#0b2a47 url(../login/poster.webp) center 40%/cover no-repeat;transform-origin:50% 55%;animation:kop-beweeg 16s ease-in-out infinite alternate}
}

/* v0.252 (Stefan 31-10): kopband van de calculator, in de lijn van de paginakoppen van de site maar compact, zodat de invoer
   bovenaan in beeld blijft: navy met een fijn maatraster (alleen CSS, geen foto), kruimel, titel, blauwe lijn en ondertitel. */
.calchero{display:none;position:relative;color:#fff;align-items:flex-end;
  background:linear-gradient(100deg,rgba(0,46,84,.97) 0%,rgba(0,46,84,.9) 55%,rgba(0,69,124,.82) 100%),
    repeating-linear-gradient(0deg,rgba(148,207,255,.09) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(148,207,255,.09) 0 1px,transparent 1px 28px),var(--navy)}
body[data-pagina=configurator] .calchero{display:flex}
.calchero .hin{position:relative;width:100%;max-width:1360px;margin:0 auto;padding:26px 40px 24px}
.calchero .kruimel,.calchero .kruimel button{color:#cfe0f0}
.calchero .kruimel{margin:0 0 6px}
.calchero .pgtitel{color:#fff;font-size:clamp(28px,3vw,40px);line-height:1.15;margin:0}
.calchero .pgtitel small{color:#dbe8f5;font-size:15px;margin-top:0}
.calchero .pgtitel small::before{content:'';display:block;width:56px;height:3px;margin:10px 0 8px;background:#94cfff;transform-origin:left}
.calchero .pgtitel small a{color:#94cfff}
@media (max-width:959px){.calchero .hin{padding:22px 30px 20px}}
@media (max-width:639px){.calchero .hin{padding:14px 15px 16px}.calchero .pgtitel{font-size:26px}.calchero .pgtitel small{font-size:13.5px}.calchero .pgtitel small::before{margin:8px 0 6px}}
@media (prefers-reduced-motion:no-preference){
  .calchero .pgtitel{animation:entree-schuif 600ms cubic-bezier(.2,.8,.2,1) backwards}   /* v0.252: alleen schuiven, geen fade: de titel is meteen zichtbaar (LCP) */
  .calchero .pgtitel small::before{animation:entree-lijn 520ms cubic-bezier(.2,.8,.2,1) 420ms backwards}
}

/* v0.252 (Stefan 31-10): het gevelblok platter, zonder grijs vak binnen de kaart; de velden lijnen uit met de omschrijving */
table#gevelTabel .gvs{background:transparent;border:0;padding:4px 0 2px}
@media (max-width:640px){table#gevelTabel .gvs{padding:4px 0 2px}}

/* v0.252 (Stefan 31-10): uitleg achter een ?-knop in plaats van regels kleine tekst (3D-bediening, accessoires) */
.hulpknop{position:relative;display:inline-flex;flex:none}
.hulpknop>summary{list-style:none;display:inline-flex;align-items:center;gap:7px;min-height:28px;cursor:pointer;color:var(--blue);font-size:12px;font-weight:600;user-select:none}
.hulpknop>summary::-webkit-details-marker{display:none}
.hulpknop .hk-i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;font:700 12px/1 'Open Sans',sans-serif;transition:background-color var(--t-snel,.2s) ease-out,color var(--t-snel,.2s) ease-out}
.hulpknop>summary:hover .hk-i,.hulpknop[open] .hk-i{background:var(--blue);border-color:var(--blue);color:#fff}
.hulpknop>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hk-paneel{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:min(340px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);box-shadow:0 14px 34px rgba(0,30,60,.18);padding:11px 13px;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--ink);text-align:left;white-space:normal}
.hk-paneel p{margin:0}.hk-paneel p+p{margin-top:7px}
.hulpknop.hk-links .hk-paneel{right:auto;left:0}
.hulpknop.boven .hk-paneel{top:auto;bottom:calc(100% + 8px);right:auto;left:0}
@media (pointer:coarse){.hulpknop>summary{min-height:44px;min-width:44px;justify-content:center}}
@media (prefers-reduced-motion:no-preference){.hulpknop[open] .hk-paneel{animation:entree-op 200ms cubic-bezier(.2,.8,.2,1)}}
.acckaart .kophead{gap:8px}
.acckaart .kophead .hulpknop{margin-right:auto}
.m3d-voet{align-items:center;flex-wrap:nowrap}
.m3d-voet .m3d-beta{margin-left:auto;min-width:0}
.m3d-voet .hulpknop{order:2}
.m3d-voet .hulpknop.boven .hk-paneel{left:auto;right:0}
/* v0.252 (Stefan 31-10): de uitvoeringskeuze op de shopkaart in de huisstijl, met hetzelfde pijltje als in de calculator */
select.lkvar{-webkit-appearance:none;appearance:none;padding-right:28px;background:#fff var(--tui-chevron-down) no-repeat right 8px center/12px 12px;cursor:pointer;color:var(--navy);font-weight:500}
select.lkvar:hover{border-color:var(--blue)}
select.lkvar:focus-visible{outline:2px solid var(--blue);outline-offset:-1px}

/* v0.252 (Stefan 1-11): Wissen/Opslaan/Openen/Delen leken uitgeschakeld (lichtblauw vlak) en de tekst liep op tablet tegen de rand.
   Altijd één regel, nooit hoger: icoon en tekst naast elkaar; is de rij te smal (container-query), dan alleen het icoon
   (title en aria-label komen uit data-tt, dus de naam blijft voor schermlezer en tooltip). Wit met staalrand, navy tekst,
   blauw icoon; hover blauwe rand en lichte vulling, ingedrukt lichtblauw. Wissen rustig met een rood icoon. */
.acties4{container-type:inline-size}
.acties4 .abtn{height:38px;padding:0 10px;gap:7px;background:#fff;border:1px solid var(--steel);color:var(--navy);font-size:13px;font-weight:600;letter-spacing:.01em;box-shadow:0 1px 2px rgba(0,46,84,.06);flex-direction:row}
.acties4 .abtn .thiel-ui-icon{width:17px;height:17px;color:var(--blue7);transition:color .15s}
.acties4 .abtn>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.acties4 .abtn:hover{background:#F5F9FD;border-color:var(--blue);color:var(--navy);box-shadow:0 2px 6px rgba(0,46,84,.10)}
.acties4 .abtn:hover .thiel-ui-icon{color:var(--blue)}
.acties4 .abtn:active{background:var(--lblue);box-shadow:none}
.acties4 .abtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.acties4 .abtn.wis{background:#fff;border-color:var(--steel);color:var(--navy)}
.acties4 .abtn.wis .thiel-ui-icon{color:#c82333}
.acties4 .abtn.wis:hover{background:#FFF6F7;border-color:var(--rand-rood);color:#a51d2a}
.acties4 .abtn.wis:hover .thiel-ui-icon{color:#a51d2a}
@container (max-width:439px){.acties4 .abtn{padding:0 6px;gap:6px;font-size:12.5px}.acties4 .abtn .thiel-ui-icon{width:16px;height:16px}}
@container (max-width:379px){.acties4 .abtn{padding:0}.acties4 .abtn>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.acties4 .abtn .thiel-ui-icon{width:19px;height:19px}}
@media (pointer:coarse){.acties4 .abtn{height:44px;min-height:44px}}
/* v0.253 (Stefan 1-11): minder tekst bij de materiaalstaat. De uitgangspunten staan op één regel; Meer klapt ze uit
   (op papier altijd volledig). Waarschuwingen compacter; de ladderwaarschuwing is één melding voor alle gevels. */
.staatkoprij{display:flex;align-items:baseline;gap:8px;margin:-4px 0 10px}
.staatkoprij .staatkop{margin:0;flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
.staatkoprij .staatkop.open{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.kopmeer{flex:none;border:0;background:none;padding:0 2px;font:600 11.5px/1.45 'Open Sans',sans-serif;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.kopmeer:hover{color:var(--navy)}
.kopmeer[hidden]{display:none}
.warn{padding:6px 10px;margin-bottom:8px;font-size:12px;line-height:1.4}
@media print{.staatkoprij .staatkop{display:block;-webkit-line-clamp:unset;overflow:visible}.kopmeer{display:none!important}}
/* v0.253 (Stefan 1-11) telefoon: kengetallen 2 × 2 (Steigerfront niet meer over de volle breedte), de 2D/3D-knop naast
   Start 3D (de knoptekst iets kleiner) en de gevelschetsen onder elkaar in plaats van twee smalle naast elkaar. */
@media (max-width:1180px){.kpis .kpi.hero{grid-column:auto}.klant .kpis .kpi.hero{grid-column:1/-1}}   /* 4 tegels = 2 × 2; de klant (5 tegels) houdt de brede eerste */
@media (max-width:640px){
  .kpis,.klant .kpis{grid-template-columns:1fr 1fr}
  .schetskop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .schetskop .btn3d{flex:1 1 170px;min-width:0;justify-content:center;font-size:12.5px;padding:0 10px;gap:6px}
  .schetskop .btn3d>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .schetskop .seg,.schetskop .isoreset,.schetskop .zoomknoppen{flex:none}
  .schets{grid-template-columns:minmax(0,1fr);gap:14px}
}
/* v0.253 (Stefan 1-11): shopcategorieën op tablet en telefoon als keuzelijst (minder lichtblauwe knoppen); desktop houdt
   de zijbalk. De chiprij blijft in de pagina (verborgen) als terugval zonder CSS. */
#losGroepen{display:none!important}
.losgroepw{display:block;margin:12px 0 14px}
.losgroepsel{-webkit-appearance:none;appearance:none;width:100%;height:42px;padding:0 36px 0 12px;border:1px solid var(--steel);background:#fff var(--tui-chevron-down) no-repeat right 12px center/14px 14px;color:var(--navy);font:600 14px/1 'Open Sans',sans-serif;cursor:pointer;border-radius:var(--rb)}
.losgroepsel:hover{border-color:var(--blue)}
.losgroepsel:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (min-width:1024px){body[data-pagina=shop] .losgroepw{display:none}}
@media (min-width:641px) and (max-width:1023px){.losgroepw{max-width:360px}}
/* v0.253: de eenhedenknop ziet er overal hetzelfde uit (calculator, shop, mandje): 30 px, 12 px tekst; op touch 44 px (tikdoel) */
.eenhsw,.loskop .eenhsw,.eenhsw.eenhsw--groot,.schetskop .eenhsw{height:30px;font-size:12px}
.eenhsw span,.loskop .eenhsw span,.eenhsw.eenhsw--groot span{padding:0 7px}
@media (pointer:coarse){.eenhsw,.loskop .eenhsw,.eenhsw.eenhsw--groot{height:44px;min-height:44px}.eenhsw span,.loskop .eenhsw span,.eenhsw.eenhsw--groot span{padding:0 11px}
  .staatkoprij{align-items:center}.kopmeer{min-height:44px;margin:-12px 0;padding:0 8px}}   /* tikdoel 44 px (v0.122) zonder de regel hoger te maken */
/* v0.254 (Stefan 1-11): Offertelijst, Mijn omgeving en Beheer met dezelfde blauwe kopband als de calculator; de eigen titel
   van de pagina blijft in de DOM (schermlezer leest de band), verborgen. */
body[data-pagina=configurator] .calchero.pgband{display:none}
body[data-pagina=mandje] .calchero.pgband,body[data-pagina=account] .calchero.pgband,body[data-pagina=beheer] .calchero.pgband{display:flex}
.pgband .pgtitel small[hidden]{display:none}
body[data-pagina=mandje] .mpkop>h1.pgtitel,body[data-pagina=account] #pgAccount .kokop>h1.pgtitel,body[data-pagina=beheer] #pgBeheer .kolay>.kokop>h1.pgtitel{display:none}
body[data-pagina=beheer] #pgBeheer .kolay>.kokop:not(:has(>:not(h1))){display:none}
body[data-pagina=mandje] .mpkop{justify-content:flex-start;margin-top:4px}
/* Offertelijst: twee knoppen terug, Shop (lichtblauw) en Calculator (oranje, zoals Start 3D) */
.mnaar{gap:6px;font-weight:700}
.mnaar .thiel-ui-icon{width:16px;height:16px}
.mnaarshop{background:var(--lblue);border-color:var(--rand-blauw,var(--lblue));color:var(--navy)}
.mnaarcalc{background:#B85A12;border-color:#8f450d;color:#fff}
.mnaarcalc:hover{background:#9c4b0e;border-color:#9c4b0e;color:#fff}
.mst-kort{display:none}
@media (max-width:640px){
  .mpkop-acties{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:8px}
  .mpkop-acties .mnaar{justify-content:center;padding:0 8px;min-width:0;gap:5px}.mpkop-acties .mnaar>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mpkop-acties .eenhsw{position:relative;height:30px;min-height:30px;font-size:11px}
  .mpkop-acties .eenhsw span{padding:0 6px}
  .mpkop-acties .eenhsw::after{content:'';position:absolute;inset:-7px 0}
  .mpkop-acties .mnaar{font-size:13px;height:36px;min-height:36px;position:relative}
  .mpkop-acties .mnaar::after{content:'';position:absolute;inset:-4px 0}
  .mstappen .mst-lang{display:none}.mstappen .mst-kort{display:inline}
  .mstappen li:not(:last-child) .mst-lang{display:inline}
}
@media (max-width:350px){.mpkop-acties{gap:6px}.mpkop-acties .mnaar{font-size:12px;padding:0 5px;gap:4px}.mpkop-acties .mnaar .thiel-ui-icon{width:14px;height:14px}}
/* v0.254 (Stefan 1-11) offertelijst op de telefoon: regel 1 foto, nummer en omschrijving, potlood; regel 2 aantal, per stuk en
   totaal in vaste kolommen, met een kopregel erboven en de totaalregel eronder in dezelfde kolommen. Met inlog: aantal,
   prijs per stuk en totaal (het gewicht staat in de somregel en de PDF). */
@media (max-width:640px){
  .mr,.mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 66px 78px 36px;gap:3px 8px;align-items:center}
  .mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 74px 84px 36px}
  .mr .thumb{grid-row:1/span 2;align-self:start}
  .mr>.mrt{grid-column:2/5;grid-row:1}
  .mr .mraant{grid-column:2;grid-row:2;justify-self:end;padding-right:0}
  .mr .mraant::after,.mrc .n[data-e]::after{content:none}
  .mr>.mrc{display:contents}
  .mr .mrc>.n{grid-row:2;font-size:12.5px}
  .mr .mrc>.kgst,.mr .mrc>.pst{grid-column:3}
  .mr .mrc>.kg,.mr .mrc>.ptot{grid-column:4}
  .mpr.prijs .mr .mrc>.kg{display:none}
  .mr button.mrbew{grid-column:5;grid-row:1}
  .mr.mrkop{display:grid;padding:2px 0 3px}
  .mr.mrkop>*,.mr.mrkop .mrc>.n{grid-row:1}
  .mr.mrkop>span.n{grid-column:2;justify-self:end;padding-right:0}
  .mr.mrkop .n{font-size:10px}
  .mr.mrsom,.mlijsttotaal .mr.mrsom{display:grid;gap:3px 8px}
  .mr.mrsom>*,.mr.mrsom .mrc>.n{grid-row:1}
  .mr.mrsom>span:first-child{display:none}
  .mr.mrsom>span:nth-child(2){grid-column:1/3;display:block;justify-self:start}
  .mr.mrsom>span:nth-child(2) small{display:block;font-weight:500}
  .mr.mrsom .stuks{grid-column:2;justify-self:end;padding-right:0}
  .mr.mrsom .stuks::after,.mr.mrsom .n[data-e]::after{content:none}
  .mr.mrsom .n:empty{display:none}
  .mracties,.mr .wijz{grid-column:2/-1}
}
@media (max-width:360px){
  .mr{grid-template-columns:34px minmax(0,1fr) 58px 70px 36px;gap:3px 6px}
  .mpr.prijs .mr{grid-template-columns:34px minmax(0,1fr) 66px 76px 36px}
  .mr .thumb{width:34px;height:34px}
}
@media (pointer:coarse) and (max-width:640px){
  .mr{grid-template-columns:40px minmax(0,1fr) 64px 76px 44px}
  .mpr.prijs .mr{grid-template-columns:40px minmax(0,1fr) 72px 82px 44px}
}
@media (pointer:coarse) and (max-width:360px){
  .mr{grid-template-columns:34px minmax(0,1fr) 56px 68px 44px}
  .mpr.prijs .mr{grid-template-columns:34px minmax(0,1fr) 64px 74px 44px}
}
/* v0.254 (Stefan 1-11): uitschuifmenu ingelogd (klant en beheer): eerst de eigen onderdelen (Shop vooraan), daarna thiel.nl als
   één knop die de sitepagina's uitklapt */
.ocv--klant .ocv-nav.tweede{order:1;border-top:0;padding-top:0;display:flex;flex-direction:column}
.ocv--klant .ocv-nav.tweede>li[data-pg=shop]{order:-2}
.ocv--klant .ocv-nav.tweede>li[data-pg=configurator]{order:-1}
.ocv--klant .ocv-site{order:2}
.ocv--klant #ocvThiel{order:3}
.ocv--klant #ocvThiel[hidden]{display:none}
.ocv-site{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;padding:12px 0 8px;border:0;border-top:1px solid rgba(255,255,255,.2);background:none;color:#94cfff;font:600 15px/1.3 'Open Sans',Arial,sans-serif;cursor:pointer;text-align:left}
.ocv-site::after{content:'';width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ocv-site[aria-expanded=true]::after{transform:translateY(2px) rotate(-135deg)}
.ocv-site:hover,.ocv-site:focus-visible{color:#fff}
@media (prefers-reduced-motion:reduce){.ocv-site::after{transition:none}}
/* v0.254: vinkje Wachtwoord tonen (Mijn omgeving) */
.pwtoon{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2,#3d4b5c);cursor:pointer;min-height:32px}
.pwtoon input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
/* v0.254 (Stefan 1-11): de kopieerknop van een gevel is blauw, zoals Gevel toevoegen (hij doet hetzelfde: een gevel erbij) */
table#gevelTabel .gvkop button.dup{background:var(--blue);border-color:var(--blue);color:#fff}
table#gevelTabel .gvkop button.dup:hover{background:var(--navy);border-color:var(--navy);color:#fff}
/* v0.254 (Stefan 1-11) calculator op de telefoon compacter: Klant en Project onder elkaar over de hele breedte en even hoog als
   de gevelvelden; Gevels, de voorbeelden en m · kg op één regel (kleiner; het tikvlak blijft 44 px via ::after); accessoires
   met lagere velden, ook in de 3D-configurator (smallere kaartjes, kleinere letter). */
@media (max-width:640px){
  .klantrij{grid-template-columns:minmax(0,1fr);gap:8px}
  .invoer .klantrij input[type=text]{height:36px;min-height:36px;font-size:14px}
  .invoer .kophead:has(.vbchips){flex-wrap:nowrap;align-items:center;gap:8px}
  .invoer .kophead:has(.vbchips) h2{flex:none}
  .invoer .kopr{display:flex;flex:1 1 auto;min-width:0;justify-content:flex-end;align-items:center;gap:6px;margin-left:auto}
  .invoer .kopr .vbchips{order:1;display:flex;gap:4px;min-width:0;margin:0;width:auto}
  .invoer .kopr .vbchips .vblang,.invoer .kopr .vbchips .vbkort{display:none}
  .invoer .kopr .vbchips .chip{height:24px;line-height:22px;padding:0 7px;font-size:10.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .invoer .kopr .vbchips .chip::after{inset:-10px -2px}   /* v0.255: tikvlak 44 px bij de lagere chip */
  .invoer .kopr .eenhsw{order:2;flex:none;position:relative;height:28px;min-height:28px;font-size:11px;margin:0}
  .invoer .kopr .eenhsw span{padding:0 6px}
  .invoer .kopr .eenhsw::after{content:'';position:absolute;inset:-8px 0}
  .accr .accvar{height:32px;min-height:32px;font-size:13px!important}
  .accr .stap{height:32px}.accr .stap button{width:32px;min-height:0}.invoer .accr .stap input.accn,.m3d-acc .accr .stap input.accn{width:36px;height:auto;min-height:0}
  .m3d-acc .accr{flex:0 0 min(76vw,280px);padding:5px 7px}
  .m3d-acc .accnm{font-size:12.5px}
}
/* v0.254 (Stefan 1-11): de noot onder de tekening met nadruk: waarschuwingsicoon in oranje, tekst navy en vet */
.schetswaarsch{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;font-size:13px;line-height:1.4;font-weight:700;color:var(--navy)}
.schetswaarsch .thiel-ui-icon{flex:none;width:17px;height:17px;margin-top:1px;color:#B85A12}
/* v0.223 (plan snelheid en tablet 25-10, pakket F): één tabletlaag voor de calculator. Alleen tussen 768 en 1100 px breed én
   minstens 600 px hoog (een telefoon liggend, 844 × 390, houdt de telefoon-UI). Voorheen kreeg een iPad staand tot 900 px de
   telefoonversie (één kolom, onderbalk) en vanaf 901 px twee kolommen waarin de geveltabel uit zijn kaart liep (1024 px).
   Nu: invoer links, tekening en staat rechts; de geveltabel gestapeld zoals op de telefoon (omschrijving op een eigen regel),
   zodat hij in de smalle kolom past; geen onderbalk, de knoppen van de aanvraag zoals op desktop; tikdoelen 44 px.
   Voorwaarde Stefan: niets boven 1100 px of onder 768 px verandert; dit blok wijzigt geen bestaande regel (test/v0223.test.mjs). */
@media (min-width:768px) and (max-width:1100px) and (min-height:600px){
  .pg[data-pg=configurator] .grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .bnav{display:none}
  body[data-pagina=configurator] .toast{bottom:28px}
  .acties .mbtn{display:inline-flex}
  #gevelTabel,#gevelTabel tbody.gv{display:block}
  #gevelTabel thead,#gevelTabel colgroup{display:none}
  #gevelTabel tbody.gv{padding:8px 0 2px}
  #gevelTabel tr[data-i]:not(.gvset){display:grid;grid-template-columns:22px repeat(2,minmax(0,1fr)) auto;gap:6px;align-items:end}
  #gevelTabel tr[data-i]:not(.gvset) td{padding:0}
  #gevelTabel td.nr{grid-row:1;grid-column:1;align-self:center;text-align:left;padding:0;width:auto}
  #gevelTabel td.naamcel{grid-row:1;grid-column:2/5}
  #gevelTabel td.dupcel{grid-row:2;grid-column:4;align-self:end;display:flex;gap:4px}
  #gevelTabel td.dupcel button.weg{margin-left:0}
  #gevelTabel td.maat{grid-row:2;display:flex;flex-direction:column;gap:2px}
  #gevelTabel td.maat:nth-child(3){grid-column:2}#gevelTabel td.maat:nth-child(4){grid-column:3}
  .gt td.maat::before{content:attr(data-l);font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #gevelTabel tr.gvset{display:block}
  #gevelTabel tr.gvset td:first-child{display:none}
  #gevelTabel tr.gvset td{display:block;padding:6px 0 8px 28px}
}
/* v0.223: iPad staand (768–900 px): de kolommen even breed, zodat de vier uitgangspunten per gevel (vloeren, slag, korteling,
   opgangen) leesbaar blijven, zoals op de telefoon */
@media (min-width:768px) and (max-width:900px) and (min-height:600px){
  .pg[data-pg=configurator] .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* v0.223 (pakket G): beheer → Aanvragen op een tablet zonder zijwaarts vegen. In de tabletlaag vallen gewicht en mail weg
   (referentie, klant, datum, regels en status blijven, de status altijd in beeld); kolommen in procenten en de foutregel mag
   doorlopen. Telefoon (aanvragen bewust horizontaal scrollbaar, Stefan 24-10, v0.217) en desktop houden hun opmaak. */
@media (min-width:768px) and (max-width:1100px) and (min-height:600px){
  #bhAanvragen .bhaanvragen{min-width:0;width:100%}
  #bhAanvragen .bhaanvragen tr>:nth-child(5):not([colspan]),#bhAanvragen .bhaanvragen tr>:nth-child(7):not([colspan]){display:none}
  #bhAanvragen .bhaanvragen th:nth-child(1){width:26%}
  #bhAanvragen .bhaanvragen th:nth-child(2){width:28%}
  #bhAanvragen .bhaanvragen th:nth-child(3){width:19%}
  #bhAanvragen .bhaanvragen th:nth-child(4){width:9%}
  #bhAanvragen .bhaanvragen th:nth-child(6){width:18%}
  #bhAanvragen .bhaanvragen td:nth-child(3),#bhAanvragen .bhaanvragen td:nth-child(6){white-space:normal}
  #bhAanvragen .bhaanvragen td:nth-child(6) .kost{white-space:normal}
  #bhAanvragen .bhaanvragen .bhaqfout{max-width:none;white-space:normal;overflow-wrap:anywhere}
}
/* v0.224 (Stefan 25-10): "Waarom Tube-Lock®" in het appmenu op één regel, ook op 320 en 360 px (zelfde maat als de site) */
.ocv{min-width:204px}

/* Gebruikt: onafhankelijke conditiesticker, bestaande merkkleuren. */
.sticker.gebruikt{background:#0072CE;color:#fff}
.bhstvink label{display:flex;min-height:44px}

.bhsttabel tr[hidden]{display:none}

/* Aanvullende eigen productfoto’s, dezelfde neutrale beeldpresentatie. */
.pdbeelden .pdextra{max-width:96px;height:96px;object-fit:contain;display:inline-block}
/* v0.234: grondslag in de 3D-werkplek: label boven de keuze, de lange optie (opbouwhulp) past dan */
.m3dp-v.m3dp-breed{grid-template-columns:minmax(0,1fr);gap:3px}