/* Saled Werkbank. Huisstijl Saled: navy #14377D, lime #C4D82E, Titillium Web (koppen) en Barlow (tekst). Licht thema: content-zware werktool. */
:root{
  --navy:#14377d; --navy-d:#0e2759; --navy-dd:#0a1d44; --lime:#c4d82e; --lime-d:#a9bc1a;
  --page:#f3f4f6; --card:#ffffff; --inset:#eaebef; --line:rgba(15,17,26,.10); --line2:rgba(15,17,26,.16);
  --t1:#14151a; --t2:#4c4f5a; --t3:#5c6070;
  --ok:#047857; --check:#b45309; --no:#9f1239; --info:#0e7490;
  --r:14px; --r2:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--t1);font:400 16px/1.55 Barlow,system-ui,sans-serif;overflow-x:hidden}
body.noscroll{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3{font-family:"Titillium Web",Barlow,sans-serif;font-weight:700;line-height:1.12;margin:0;color:var(--t1);letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(28px,4.4vw,42px);color:var(--navy)}
h3{font-size:20px}
.h2s{font-size:20px}
p{margin:0}
button,.btn,a{touch-action:manipulation}
select{background-color:#fff;color:var(--t1)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--lime-d);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 14px;z-index:60}.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.demo-strip{background:var(--navy-dd);color:#d7def0;font-size:12.5px;line-height:1.45;padding:7px 0}
.demo-strip b{color:#fff;font-weight:600}

/* app bar */
.appbar{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff}
.appbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:0}
.wm{font:800 30px/1 "Barlow Condensed",sans-serif;letter-spacing:.01em}
.wm .sa{color:#fff} .wm .led{color:var(--lime)}
.brand-t{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.25);padding-left:12px;min-width:0}
.brand-t b{font:700 17px/1.1 "Titillium Web"}
.brand-t small{font-size:12.5px;color:#c9d3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{display:flex;align-items:center;gap:8px;font-size:14px;color:#dfe5f3}
.av{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--navy-dd);display:grid;place-items:center;font:700 13px/1 Barlow}
.who-t{display:none}
@media (min-width:640px){.who-t{display:inline}}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:flex;align-items:center;gap:7px;color:#e3e8f4;text-decoration:none;font:600 14.5px/1 Barlow;padding:10px 13px;border-radius:9px;min-height:42px;transition:background .15s ease,color .15s ease}
.tabs a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs a:hover{background:rgba(255,255,255,.1)}
.tabs a.on{background:#fff;color:var(--navy)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--lime);color:var(--navy-dd);font:700 12px/20px Barlow;text-align:center}

main.wrap{padding-top:24px;padding-bottom:56px}
.vhead{margin-bottom:20px}
.eyebrow{font:600 12px/1 Barlow;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:4px;background:var(--lime);border-radius:2px}
.e-lime{color:var(--lime)}
.vlede{margin-top:10px;font-size:16.5px;color:var(--t2);max-width:72ch}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.more{font-size:14px;font-weight:600;text-decoration:none}
.label{font:600 11.5px/1.3 Barlow;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.l-navy{color:var(--navy)} .l-lime{color:var(--lime-d)}
.body{color:var(--t2);font-size:15.5px}
.small{font-size:13px;color:var(--t3);margin-top:10px}
.small.err{color:var(--no)}
.note{margin:-6px 0 12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;font:600 15.5px/1 Barlow;text-decoration:none;cursor:pointer;border:0;transition:transform .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.btn-lime{background:var(--lime);color:var(--navy-dd)} .btn-lime:hover{background:#d1e33f}
.btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-d)}
.btn-line{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-wide{width:100%;margin-top:16px}

/* chips en pills */
.pill{font:600 12px/1 Barlow;padding:6px 9px;border-radius:999px;background:var(--inset);color:var(--t1)}
.pill-navy{background:var(--navy);color:#fff}
.chip,.ch{display:inline-block;font:600 11.5px/1 Barlow;padding:5px 8px;border-radius:6px;color:#fff;white-space:nowrap}
.c-ok{background:var(--ok)} .c-check{background:var(--check)} .c-no{background:var(--no)}
.ch-businesscase{background:var(--navy)} .ch-prijslijst{background:var(--info)} .ch-service{background:var(--check)}
.ch-case{background:var(--lime);color:var(--navy-dd)} .ch-new{background:var(--info)}
.ch-go{background:var(--ok)} .ch-mid{background:var(--check)} .ch-nogo{background:var(--no)} .ch-plain{background:#fff;color:var(--t2);border:1px solid var(--line2)}
.res-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* Vandaag */
.today-hero{display:grid;gap:0;background:var(--navy);border-radius:var(--r);overflow:hidden;color:#fff}
@media (min-width:900px){.today-hero{grid-template-columns:1.1fr 1fr}}
.th-copy{padding:26px 22px;display:flex;flex-direction:column;gap:12px}
@media (min-width:900px){.th-copy{padding:36px 34px}}
.th-copy h1{color:#fff;font-size:clamp(32px,4.6vw,48px)}
.th-copy h1 span{color:var(--lime)}
.th-copy p{color:#dfe5f3;font-size:16.5px;max-width:52ch}
.th-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.th-fig{margin:0;position:relative;min-height:220px}
.th-fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.th-fig figcaption{position:absolute;left:12px;bottom:12px;background:rgba(10,29,68,.85);color:#fff;font-size:12px;padding:5px 8px;border-radius:6px}
.kpis4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
@media (min-width:900px){.kpis4{grid-template-columns:1.25fr 1fr 1fr 1fr}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.k-l{font:600 11px/1.25 Barlow;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.k-v{font:700 clamp(20px,2.6vw,28px)/1.1 "Titillium Web";font-variant-numeric:tabular-nums;color:var(--t1);overflow-wrap:anywhere}
.k-s{font-size:13px;color:var(--t2)}
.k-navy{background:var(--lime);border-color:var(--lime)} .k-navy .k-l{color:#3a4708} .k-navy .k-v{color:var(--navy-dd)} .k-navy .k-s{color:#2c3a0a}
.today-grid{display:grid;gap:14px}
@media (min-width:980px){.today-grid{grid-template-columns:1.5fr 1fr}}
.today-side{display:grid;gap:14px;align-content:start}
.wait{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wait li{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;background:var(--inset);border-radius:var(--r2);padding:12px 14px}
@media (min-width:560px){.wait li{grid-template-columns:auto 1fr auto}}
.wait li>.ch{justify-self:start}
.w-t{display:flex;flex-direction:column;min-width:0}
.w-t b{font-weight:600}
.w-t span{font-size:14px;color:var(--t2)}
.dl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dl li{display:flex;gap:12px;align-items:center}
.dl li div{display:flex;flex-direction:column;min-width:0}
.dl li div span{font-size:13.5px;color:var(--t2)}
.dd{flex:none;width:58px;height:54px;border-radius:10px;background:var(--inset);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--t3)}
.dd b{font:700 20px/1 "Titillium Web";color:var(--t1)}
.dd-hot{background:var(--check);color:#fff} .dd-hot b{color:#fff}
.dd-plus{background:var(--navy);color:#cfd8ee} .dd-plus b{color:var(--lime)}
.bars{display:grid;gap:9px}
.bar-r{display:grid;grid-template-columns:78px 1fr 84px;gap:8px;align-items:center;font-size:14px}
.bar-t{height:14px;background:var(--inset);border-radius:7px;overflow:hidden}
.bar-f{display:block;height:100%;border-radius:7px}
.bf-concept{background:var(--info)} .bf-verstuurd{background:var(--navy)} .bf-gewonnen{background:var(--ok)} .bf-verloren{background:#9aa0ad}
.bar-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.bar-v small{color:var(--t3);font-weight:500}

/* Aanvragen */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fchip{font:600 14px/1 Barlow;padding:9px 13px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--t1);cursor:pointer;min-height:38px}
.fchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.inbox{display:grid;gap:14px}
@media (min-width:980px){.inbox{grid-template-columns:380px 1fr;align-items:start}}
.ilist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ilist a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--t1);background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px}
.ilist a:hover{border-color:var(--navy)}
.ilist a.on{border-color:var(--navy);box-shadow:inset 4px 0 0 var(--navy)}
.i-top{display:flex;align-items:center;gap:8px}
.i-k{font-size:12.5px;color:var(--t3)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--lime-d);margin-left:auto}
.ilist b{font-weight:600}
.i-s{font-size:13.5px;color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.st{font:600 12px/1 Barlow;padding:6px 9px;border-radius:6px;background:var(--inset);color:var(--t1);white-space:nowrap}
.st-nieuw{background:var(--lime);color:var(--navy-dd)} .st-verwerkt{background:var(--ok);color:#fff} .st-in-behandeling{background:var(--info);color:#fff} .st-fictief{background:var(--inset);color:var(--t2)}
.msg{background:var(--inset);border-radius:var(--r2);padding:14px;display:grid;gap:12px;font-size:15px;color:var(--t1)}
@media (min-width:640px){.msg:has(img){grid-template-columns:220px 1fr}}
.msg img{border-radius:8px;width:100%;height:auto;object-fit:cover;max-height:220px}
.aiblock{margin-top:14px;border-left:4px solid var(--navy);padding:4px 0 0 14px}
.ai-s{font-size:15.5px;color:var(--t1)}
.mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 4px}
@media (min-width:640px){.mini{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mini div{background:var(--inset);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column}
.mini b{font:700 19px/1.15 "Titillium Web";font-variant-numeric:tabular-nums}
.mini span{font-size:12.5px;color:var(--t2)}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* formulieren */
.field-l{display:block;font:600 14px/1.3 Barlow;color:var(--t1);margin:14px 0 6px}
textarea,select,input[type=number],input[type=text]{width:100%;font:400 15px/1.45 Barlow;color:var(--t1);background:#fff;border:1px solid var(--line2);border-radius:8px;padding:10px 12px}
textarea{resize:vertical;min-height:100px}
select{min-height:44px}
.row2{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:480px){.row2{grid-template-columns:1fr 1fr}}
.row2 label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--t2)}

/* lampscan */
.tool{display:grid;gap:14px}
@media (min-width:1000px){.tool{grid-template-columns:360px 1fr;align-items:start}}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;min-height:120px;padding:16px;border-radius:var(--r2);background:var(--inset);border:1.5px dashed rgba(20,55,125,.35);cursor:pointer;position:relative}
.drop:hover,.drop.over{background:#dfe3ee}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop-ic{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;margin-bottom:6px}
.drop-t{font-weight:600}
.drop-s{font-size:13px;color:var(--t3)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{position:relative;width:76px;height:58px;border-radius:8px;overflow:hidden;background:var(--inset)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(10,29,68,.85);color:#fff;font:600 14px/1 Barlow;cursor:pointer}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ex{display:flex;align-items:center;gap:8px;text-align:left;background:var(--inset);border:1px solid transparent;border-radius:10px;padding:5px 8px 5px 5px;font:500 13.5px/1.25 Barlow;color:var(--t1);cursor:pointer;min-height:56px}
.ex:hover{border-color:var(--navy)}
.ex img{width:52px;height:42px;border-radius:6px;object-fit:cover;flex:none}
.ex-ic{width:42px;height:42px;flex:none;border-radius:6px;background:var(--navy);color:var(--lime);display:grid;place-items:center;font:700 19px/1 "Titillium Web"}
.out-panel{min-height:420px}
.state-empty{display:grid;gap:16px}
.state-empty img{border-radius:var(--r2);width:100%;aspect-ratio:16/9;object-fit:cover}
.state-load{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;text-align:center;gap:12px}
.state-load.sm{min-height:140px}
.spin{width:42px;height:42px;border-radius:50%;border:4px solid var(--inset);border-top-color:var(--navy);animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.load-t{font:600 16.5px/1.3 Barlow}
.load-steps{margin:0;padding:0 0 0 18px;text-align:left;color:var(--t3);font-size:14px}
.load-steps li.done{color:var(--ok)}
.state-err h3{margin-bottom:8px}
.state-err .btn{margin-top:12px}
.errbox{background:#fff;border:1px solid var(--line);border-left:4px solid var(--no);border-radius:8px;padding:12px 14px;margin-top:12px;font-size:14.5px;color:var(--t2)}
.res-head{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.res-sum{font-size:15.5px;color:var(--t2)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 14px}
@media (min-width:640px){.kpis{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.kpis .kpi{background:var(--inset);border:0}
.kpi-main{background:var(--navy)!important;grid-column:1 / -1}
@media (min-width:640px){.kpi-main{grid-column:auto}}
.kpi-main .k-l{color:#cfd8ee} .kpi-main .k-v{color:var(--lime)} .kpi-main .k-s{color:#dfe5f3}
.plicht{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r2);padding:11px 14px;margin-bottom:14px;font-size:14.5px;color:var(--t2)}
.plicht b{color:var(--t1)} .plicht.no{border-left-color:var(--check)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);margin-bottom:8px;-webkit-overflow-scrolling:touch}
table.lines{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.lines th{font:600 11px/1.2 Barlow;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);text-align:left;padding:10px 8px;background:var(--inset);white-space:nowrap}
.lines td{padding:9px 8px;border-top:1px solid var(--line);vertical-align:top;background:#fff}
.lines td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lines select,.lines input{padding:6px 7px;font-size:14px;min-height:38px;width:auto}
.sel2{display:flex;gap:6px;flex-wrap:wrap}
.lines select[data-k=type]{min-width:150px;max-width:180px}
.lines select[data-k=watt]{min-width:78px}
.in2{display:flex;flex-direction:column;gap:6px}
.in2 label{display:flex;align-items:center;gap:6px}
.in2 span{font-size:12px;color:var(--t3);width:52px;flex:none}
.lines input.c,.lines input.h{width:76px}
.lines .prod b{display:block;font-weight:600;color:var(--t1)}
.lines .prod span{display:block;font-size:12.5px;color:var(--t3)}
.ev{font-size:12px;color:var(--t3);margin-top:4px;max-width:230px}
.conf{display:inline-block;font:600 11px/1 Barlow;padding:4px 6px;border-radius:5px;color:#fff;margin-top:4px}
.conf.hi{background:var(--ok)} .conf.mid{background:var(--check)} .conf.lo{background:var(--no)}
.del{background:none;border:0;color:var(--t3);cursor:pointer;font-size:19px;min-width:36px;min-height:36px}
.tbl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.refline{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--lime-d);border-radius:var(--r2);padding:10px 14px;margin-bottom:12px;font-size:14.5px;color:var(--t2)}
.refline .label{display:block}
.refline a{font-weight:600}
.two-col{display:grid;gap:10px}
@media (min-width:760px){.two-col{grid-template-columns:1fr 1fr}}
.box{background:var(--inset);border-radius:var(--r2);padding:13px 15px}
.box h4{font:600 15px/1.3 Barlow;margin:0 0 7px}
.box ul{margin:0;padding-left:18px;color:var(--t2);font-size:14.5px}
.box li+li{margin-top:5px}
.bc{margin-top:14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime-d);border-radius:var(--r2);padding:13px 15px}
.bc pre,.co2 pre{white-space:pre-wrap;font:400 14px/1.55 Barlow;color:var(--t1);margin:8px 0 0;max-height:340px;overflow:auto}
.assume{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.assume summary{cursor:pointer;padding:15px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.assume summary::after{content:"+";font:700 20px/1 "Titillium Web";color:var(--navy)}
.assume[open] summary::after{content:"-"}
.assume-in{padding:0 18px 16px}
.assume ul{margin:12px 0 0;padding-left:18px;color:var(--t2);font-size:14.5px}
.assume li+li{margin-top:5px}
.settings{display:grid;gap:10px}
@media (min-width:640px){.settings{grid-template-columns:repeat(3,1fr)}}
.settings label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--t2)}

/* Businesscases bord */
.board{display:grid;gap:12px}
@media (min-width:700px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.board{grid-template-columns:repeat(4,minmax(0,1fr))}}
.col{background:var(--inset);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col header{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 6px;border-bottom:3px solid var(--navy)}
.col-concept header{border-color:var(--info)} .col-gewonnen header{border-color:var(--ok)} .col-verloren header{border-color:#9aa0ad}
.col h2 span{font:600 14px Barlow;color:var(--t3)}
.col header b{font-variant-numeric:tabular-nums}
.card{display:flex;flex-direction:column;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:12px 13px;text-decoration:none;color:var(--t1)}
.card:hover{border-color:var(--navy)}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.c-top .label{margin:0}
.card>b{font-weight:600;font-size:15.5px;line-height:1.25}
.c-sec{font-size:13px;color:var(--t3)}
.c-n{display:flex;justify-content:space-between;font-size:13.5px;color:var(--t2);margin-top:4px}
.c-n b{font:700 17px/1 "Titillium Web";color:var(--t1);font-variant-numeric:tabular-nums}
.c-bar{height:6px;background:var(--inset);border-radius:3px;overflow:hidden}
.c-bar span{display:block;height:100%;background:var(--ok)}
.c-f{font-size:12.5px;color:var(--t3)}
.empty{font-size:14px;color:var(--t3);padding:8px 4px}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(10,20,45,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(860px,100%);background:var(--page);z-index:41;overflow-y:auto;overscroll-behavior:contain;box-shadow:-12px 0 40px rgba(10,20,45,.25)}
.drawer-in{padding:20px 16px 40px}
@media (min-width:720px){.drawer-in{padding:26px 28px 48px}}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.dr-head h2{font-size:clamp(22px,3vw,28px);color:var(--navy)}
.x-btn{width:44px;height:44px;flex:none;border-radius:10px;border:1px solid var(--line2);background:#fff;font-size:24px;line-height:1;cursor:pointer;color:var(--t1)}
.stagebar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sb{font:600 14px/1 Barlow;padding:10px 14px;border-radius:9px;border:1px solid var(--line2);background:#fff;color:var(--t1);cursor:pointer;min-height:40px}
.sb.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* Aanbestedingen */
.tgrid{display:grid;gap:14px}
@media (min-width:980px){.tgrid{grid-template-columns:380px 1fr;align-items:start}}
.tlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tlist a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--t1);background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:11px 12px}
.tlist a:hover{border-color:var(--navy)} .tlist a.on{border-color:var(--navy);box-shadow:inset 4px 0 0 var(--navy)}
.t-t{display:flex;flex-direction:column;min-width:0;flex:1}
.t-t b{font-weight:600}
.t-t span{font-size:13.5px;color:var(--t2)}
.t-t .t-m{font-size:12.5px;color:var(--t3)}
.tsrc{margin:8px 0 0;background:var(--inset);border-radius:8px}
.tsrc summary{cursor:pointer;padding:10px 12px;font-weight:600;font-size:14.5px}
.tsrc pre{white-space:pre-wrap;font:400 13.5px/1.5 Barlow;margin:0;padding:0 12px 12px;color:var(--t2);max-height:300px;overflow:auto}
.go{border-radius:var(--r2);padding:15px 17px;color:#fff;margin:14px 0 12px}
.go.g-go{background:var(--ok)} .go.g-mid{background:var(--check)} .go.g-no{background:var(--no)}
.g-l{font:600 11.5px/1 Barlow;letter-spacing:.09em;text-transform:uppercase;opacity:.9}
.g-v{font:700 23px/1.2 "Titillium Web";margin:6px 0 4px}
.go p{font-size:15px}
.reqs{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.req{display:grid;grid-template-columns:1fr;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:11px 13px}
@media (min-width:560px){.req{grid-template-columns:96px 1fr}}
.r-t{font-weight:600;font-size:14.5px}
.r-k{font:600 11px/1.2 Barlow;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-top:4px}
.r-n{font-size:13.5px;color:var(--t2);margin-top:3px}

/* Projecten */
.pgrid{display:grid;gap:14px}
@media (min-width:1000px){.pgrid{grid-template-columns:1.55fr 1fr;align-items:start}}
.refs{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.refs a{display:grid;grid-template-columns:1fr;gap:4px;text-decoration:none;color:var(--t1);padding:9px 6px;border-bottom:1px solid var(--line)}
@media (min-width:640px){.refs a{grid-template-columns:minmax(0,1.3fr) 1fr 120px;align-items:center;gap:12px}}
.refs a:hover{background:var(--inset)}
.rn{display:flex;flex-direction:column;min-width:0}
.rn b{font-weight:600}
.rn span{font-size:12.5px;color:var(--t3)}
.rb{height:10px;background:var(--inset);border-radius:5px;overflow:hidden}
.rb span{display:block;height:100%;background:var(--navy);border-radius:5px}
.rv{font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
@media (min-width:640px){.rv{text-align:right}}
.co2{background:var(--navy);border-color:var(--navy);color:#fff}
.co2 h2{color:#fff} .co2 .body{color:#dfe5f3;margin:6px 0 14px}
.co2 pre{background:#fff;border-radius:8px;padding:12px;margin-top:14px}

/* Catalogus */
.cgrid{display:grid;gap:14px;margin-bottom:14px}
@media (min-width:980px){.cgrid{grid-template-columns:1.4fr 1fr;align-items:start}}
.ask{background:var(--navy);border-color:var(--navy)}
.ask h2{color:#fff;margin-bottom:12px}
.askrow{display:flex;gap:8px}
.askrow input{flex:1;min-height:46px}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sg{font:500 13.5px/1.25 Barlow;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;text-align:left;min-height:36px}
.sg:hover{background:rgba(255,255,255,.16)}
.ask .state-load{color:#fff}
.ask .spin{border-color:rgba(255,255,255,.25);border-top-color:var(--lime)}
.ask .errbox{color:var(--t2)}
.answer{background:#fff;border-radius:var(--r2);padding:14px 16px;margin-top:14px;border-left:4px solid var(--ok)}
.answer.nokb{border-left-color:var(--check)}
.answer p:last-child{font-size:15.5px;color:var(--t1)}
.f-res{margin-top:12px;background:var(--inset);border-radius:var(--r2);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.f-res b{color:var(--navy)}
.f-res span{font-size:13.5px;color:var(--t2)}
.fams{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.fam{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:15px;text-decoration:none;color:var(--t1)}
.fam:hover{border-color:var(--navy)}
.fam>b{font:700 19px/1.15 "Titillium Web";color:var(--navy)}
.fam dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:4px 0 0;font-size:13.5px}
.fam dt{color:var(--t3)} .fam dd{margin:0;color:var(--t1)}
.fam-x{font-size:12.5px;color:var(--t2);border-top:1px solid var(--line);padding-top:7px;margin-top:auto}
.fam-feat{background:var(--lime);border-color:var(--lime)}
.fam-feat .label,.fam-feat dt{color:#3a4708} .fam-feat>b{color:var(--navy-dd)} .fam-feat .fam-x{color:#2c3a0a;border-color:rgba(10,29,68,.18)}

/* Over */
.over-grid{display:grid;gap:14px}
@media (min-width:900px){.over-grid{grid-template-columns:1.3fr 1fr}.o-feat{grid-row:span 2}.o-peter{grid-column:1/-1}}
.o-feat{background:var(--navy);border-color:var(--navy)}
.o-feat h3{color:#fff;margin-bottom:10px;font-size:24px}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ticks li{color:#dfe5f3;font-size:15.5px;padding-left:18px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--lime)}
.ticks b{color:#fff}
.plan{margin:6px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--t2);font-size:15px}
.plan b,.plain b{color:var(--t1)}
.plain{margin:6px 0 0;padding-left:18px;display:grid;gap:7px;color:var(--t2);font-size:15px}
.o-peter{display:grid;gap:18px}
@media (min-width:900px){.o-peter{grid-template-columns:1fr 1.3fr;align-items:center}}
.o-peter img{border-radius:var(--r2);width:100%;aspect-ratio:2/1;object-fit:cover}
.o-peter h3{margin-bottom:8px}
.contact{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
@media (min-width:560px){.contact{grid-template-columns:1fr 1fr}}
.c-item{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--t1);background:var(--inset);border-radius:var(--r2);padding:11px 13px;font-weight:600;overflow-wrap:anywhere}
.c-item span{font:600 11px/1.2 Barlow;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.c-item:first-child{background:var(--navy);color:#fff} .c-item:first-child span{color:var(--lime)}

.foot{background:var(--navy-dd);color:#c9d2e6;padding:22px 0 30px;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--t1);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;z-index:60}
.print-only{display:none}

@media (max-width:719px){
  .tbl-wrap{border:0;overflow:visible}
  table.lines{min-width:0}
  .lines thead{display:none}
  .lines,.lines tbody,.lines tr,.lines td{display:block;width:100%}
  .lines tr{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;margin-bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
  .lines td{border:0;padding:0}
  .lines td[data-l]::before{content:attr(data-l);display:block;font:600 10.5px/1.3 Barlow;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:3px}
  .lines td.span2{grid-column:1/-1}
  .lines td.n{text-align:left}
  .lines select[data-k=type]{max-width:none;flex:1}
  .in2{flex-direction:row}.in2 label{flex:1;flex-direction:column;align-items:stretch;gap:2px}.in2 span{width:auto}
  .lines input.c,.lines input.h{width:100%}
  .lines td.x{position:absolute;top:4px;right:4px;width:auto}
  .ev{max-width:none}
  .brand-t small{display:none}
}
@media print{
  body>*:not(#print-area){display:none!important}
  #print-area{display:block!important;font:400 11pt/1.5 Barlow,sans-serif;color:#000}
  #print-area h1{font-size:20pt;color:#14377d}
  #print-area table{width:100%;border-collapse:collapse;font-size:9.5pt}
  #print-area th,#print-area td{border-bottom:1px solid #ccc;padding:4px;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}