:root{
  --bg:#F2F6F4; --surface:#FFFFFF; --surface-2:#F7FAF9; --ink:#10201F; --soft:#4A5B58; --faint:#7A8986;
  --line:#E0E8E5; --primary:#0F6E6B; --primary-ink:#FFFFFF; --mint:#6FD6C8; --tint:#E3F0EE;
  --warn:#B7791F; --warn-bg:#FBF1DF; --crit:#C0412E; --crit-bg:#FBE7E3; --ok:#1E7F4F; --ok-bg:#E2F3EA;
  --shadow:0 18px 40px -26px rgba(16,32,31,.45);
  --display:'Bricolage Grotesque',Georgia,serif; --body:'Nunito Sans',system-ui,-apple-system,Segoe UI,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark; --bg:#0D1716; --surface:#142321; --surface-2:#182a28; --ink:#E4EEEC; --soft:#A9BDB9; --faint:#7E9490;
  --line:#23403C; --primary:#3FB3A8; --primary-ink:#06201E; --tint:#173835; --warn:#E3AE55; --warn-bg:#3A2E17; --crit:#F08A76; --crit-bg:#3E211C; --ok:#5DCB93; --ok-bg:#16352A;
  --shadow:0 18px 40px -26px rgba(0,0,0,.8);}}
:root[data-theme="dark"]{
  color-scheme:dark; --bg:#0D1716; --surface:#142321; --surface-2:#182a28; --ink:#E4EEEC; --soft:#A9BDB9; --faint:#7E9490;
  --line:#23403C; --primary:#3FB3A8; --primary-ink:#06201E; --tint:#173835; --warn:#E3AE55; --warn-bg:#3A2E17; --crit:#F08A76; --crit-bg:#3E211C; --ok:#5DCB93; --ok-bg:#16352A;
  --shadow:0 18px 40px -26px rgba(0,0,0,.8);}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--body);}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100%}
/* sidebar */
.side{background:#10201F;color:#DCE8E6;display:flex;flex-direction:column;padding:18px 12px;gap:4px;overflow:auto}
.brand{font:700 20px/1 var(--display);letter-spacing:.06em;padding:4px 10px 16px;color:#fff}
.brand span{color:var(--mint)}
.side .lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7FA19C;padding:12px 10px 4px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:none;color:inherit;padding:8px 10px;border-radius:10px;font-weight:700;font-size:13.5px}
.nav:hover{background:rgba(255,255,255,.06)}
.nav[aria-current="true"]{background:rgba(111,214,200,.16);color:#fff}
.nav .n{font:500 11.5px var(--mono);color:#9FC2BC;background:rgba(255,255,255,.07);border-radius:999px;padding:1px 8px}
.side .foot{margin-top:auto;font-size:11.5px;color:#7FA19C;padding:12px 10px 0;line-height:1.45}
/* main */
.main{display:flex;flex-direction:column;min-width:0;height:100%}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.top h1{font:700 21px/1.1 var(--display);margin:0;flex:1;min-width:180px;text-wrap:balance}
.top .sub{display:block;font:600 12px var(--body);color:var(--faint);margin-top:3px;letter-spacing:.01em}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:700;font-size:12.5px;color:var(--soft)}
.chip[aria-pressed="true"]{background:var(--tint);border-color:var(--primary);color:var(--primary)}
.btn{border:0;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:13px;border-radius:999px;padding:9px 16px}
.btn.ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.demo{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:4px 10px}
.view{flex:1;min-height:0;overflow:auto;padding:18px 20px 28px}
/* board */
.board{display:flex;gap:14px;align-items:flex-start;min-height:100%}
.col{flex:0 0 272px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;max-height:100%}
.col.drop-ok{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint)}
.col.drop-no{border-color:var(--crit);opacity:.55}
.colh{padding:12px 12px 8px;border-bottom:1px solid var(--line)}
.colh b{display:flex;justify-content:space-between;gap:8px;font:700 14px/1.25 var(--display)}
.colh b span{font:500 12px var(--mono);color:var(--faint)}
.auto{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.auto i{font-style:normal;font-size:11px;font-weight:700;color:var(--primary);background:var(--tint);border-radius:6px;padding:2px 7px}
.cards{display:flex;flex-direction:column;gap:8px;padding:10px;overflow:auto;min-height:60px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;width:100%;cursor:grab;display:flex;flex-direction:column;gap:6px}
.card:hover{border-color:var(--primary)}
.card .r1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.card .nm{font-weight:800;font-size:13.5px}
.card .amt{font:500 12px var(--mono);color:var(--soft);white-space:nowrap}
.card .meta{font-size:12px;color:var(--faint);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.src{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:1px 6px;background:var(--tint);color:var(--primary)}
.src.solvari{background:#FDEBD9;color:#9A4E12}.src.meta{background:#E4E9FB;color:#3A4DA3}.src.ovg{background:#EFE3F7;color:#74399A}
:root[data-theme="dark"] .src.solvari,:root:not([data-theme="light"]) .src.solvari{}
.age{font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px}
.age.late{background:var(--crit-bg);color:var(--crit)}.age.soon{background:var(--warn-bg);color:var(--warn)}
.empty{font-size:12px;color:var(--faint);text-align:center;padding:12px 4px}
/* drawer */
.scrim{position:fixed;inset:0;background:rgba(8,24,22,.45);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--surface);z-index:21;display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(0,0,0,.6);padding-top:env(safe-area-inset-top,0px)}
.dh{padding:18px 20px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.dh .row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.dh h2{font:700 22px/1.15 var(--display);margin:0}
.dh .ad{color:var(--soft);font-size:13px}
.x{border:0;background:var(--surface-2);border-radius:999px;width:34px;height:34px;font-size:18px;flex-shrink:0}
.status{display:inline-flex;gap:6px;align-items:center;font-weight:800;font-size:12.5px;color:var(--primary);background:var(--tint);border-radius:999px;padding:4px 10px}
.move{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.move select{border:1.5px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--surface);max-width:100%}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 14px;overflow-x:auto}
.tab{border:0;background:none;padding:10px 10px;font-weight:800;font-size:13px;color:var(--faint);border-bottom:2px solid transparent;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--primary);border-color:var(--primary)}
.db{flex:1;overflow:auto;padding:18px 20px 30px;display:flex;flex-direction:column;gap:18px}
.h3{font:700 15px var(--display);margin:0 0 8px}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--faint)} .kv dd{margin:0;font-weight:600}
.house{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.house canvas{display:block;width:100%;height:auto}
.house .cap{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 12px;font-size:12px;color:var(--faint)}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.prod{border:1.5px solid var(--line);border-radius:12px;padding:10px;text-align:left;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.prod[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}
.prod b{font-size:13.5px}.prod span{font:500 12px var(--mono);color:var(--soft)}
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2)}
.stat small{display:block;font-size:11.5px;color:var(--faint);font-weight:700}
.stat b{font:700 20px var(--display);font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--faint)}
.bars{display:flex;align-items:flex-end;gap:3px;height:70px;padding-top:6px}
.bars div{flex:1;border-radius:3px 3px 0 0;background:var(--line)}
.bars div.b{background:var(--primary)}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tl li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:13px}
.tl li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line);margin-top:5px}
.tl li.a::before{background:var(--primary)}
.tl li small{display:block;color:var(--faint);font:500 11.5px var(--mono)}
.quote{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.quote .qh{background:#10201F;color:#fff;padding:14px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.quote .qh b{font:700 16px var(--display);letter-spacing:.08em}
.quote table{width:100%;border-collapse:collapse;font-size:13px}
.quote td{padding:8px 16px;border-bottom:1px solid var(--line)}
.quote td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.quote tr.t td{font-weight:800;border-bottom:0}
.lp{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#10201F}
.lp canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.lpbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;background:#10201F;color:#DCE8E6;font-size:12.5px;font-weight:700}
.lpbar b{font:500 13px var(--mono);color:#fff}
.meter{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok)}
.docs{display:flex;flex-direction:column;gap:6px}
.doc{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px}
.doc span{font-size:11.5px;color:var(--faint)}
.drop{border:2px dashed var(--line);border-radius:12px;padding:14px;text-align:center;color:var(--faint);font-size:13px}
/* planning */
.plan{border:1px solid var(--line);border-radius:16px;overflow:auto;background:var(--surface)}
.plan table{border-collapse:collapse;width:100%;min-width:760px;table-layout:fixed}
.plan th,.plan td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:8px;vertical-align:top;font-size:12.5px}
.plan th{background:var(--surface-2);text-align:left;font-weight:800}
.plan th small{display:block;color:var(--faint);font-weight:600}
.slot{border-radius:8px;background:var(--tint);color:var(--ink);padding:5px 7px;margin-bottom:4px;font-weight:700;font-size:12px}
.slot small{display:block;color:var(--soft);font-weight:600}
.cap{font:500 11px var(--mono);color:var(--faint)}
.full{background:var(--crit-bg)}
.queue{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
/* phone */
.phone-wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.phone{width:300px;max-width:100%;border:10px solid #10201F;border-radius:34px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.phone .pt{background:#10201F;color:#fff;padding:12px 16px 14px}
.phone .pt b{font:700 17px var(--display)}
.pj{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pj b{font-size:14px}.pj span{font-size:12px;color:var(--soft)}
.chk{display:flex;gap:8px;align-items:center;font-size:13px}
.sig{height:70px;border:1.5px dashed var(--line);border-radius:10px;display:flex;align-items:flex-end;justify-content:center;font-size:11px;color:var(--faint);padding:6px}
.explain{max-width:520px;display:flex;flex-direction:column;gap:10px;color:var(--soft)}
.explain h3{font:700 18px var(--display);color:var(--ink);margin:0}
/* flow */
.flow{display:flex;flex-direction:column;gap:18px;max-width:980px}
.phase{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 16px}
.phase h3{font:700 16px var(--display);margin:0 0 10px}
.fr{display:grid;grid-template-columns:minmax(160px,230px) minmax(0,1fr);gap:6px 14px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.fr:first-of-type{border-top:0}
.fr b{font-weight:800}
.fr .to{display:flex;flex-wrap:wrap;gap:4px}
.fr .to span{font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--soft)}
.fr .to span.lost{color:var(--crit);border-color:var(--crit-bg)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#10201F;color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;font-size:13px;z-index:40;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.toast.bad{background:var(--crit);color:#fff}
.menu-btn{display:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;font-weight:800}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:250px;z-index:30;transform:translateX(-100%);transition:transform .2s;padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .side.open{transform:none}
  .menu-btn{display:inline-block}
  .view{padding:14px 16px 24px}
  .top{padding:12px 16px}
  .calc{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:110px minmax(0,1fr)}
  .fr{grid-template-columns:1fr}
}

/* ===== Sollit-achtige indeling ===== */
.app{grid-template-columns:72px minmax(0,1fr)}
.rail{background:#0E4D4A;color:#CFE6E2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0;overflow:auto}
.rail .mark{width:40px;height:40px;border-radius:50%;background:var(--mint);color:#0E4D4A;display:flex;align-items:center;justify-content:center;font:800 18px var(--display);margin-bottom:14px}
.ri{width:60px;border:0;background:none;color:inherit;border-radius:12px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;letter-spacing:.02em}
.ri:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff}
.ri[aria-current="true"]{background:rgba(111,214,200,.2);color:#fff}
.ri:disabled{opacity:.45;cursor:default}
.rail .grow{flex:1}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface);min-height:58px;flex-wrap:wrap}
.topbar h1{flex:1;margin:0;font:800 15px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--primary);min-width:160px}
.topbar h1 small{font-weight:700;color:var(--faint);letter-spacing:.02em;text-transform:none;margin-left:8px;font-size:12.5px}
.who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding-right:14px;border-right:1px solid var(--line)}
.av{width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800}
.logo{font:700 16px var(--display);letter-spacing:.08em;color:var(--ink)}
.logo span{color:var(--primary)}
.subbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;overflow-x:auto;max-width:100%}
.seg button{border:0;background:none;border-radius:9px;padding:7px 12px;font-weight:800;font-size:12.5px;color:var(--soft);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.seg button span{font:500 11px var(--mono);opacity:.75;margin-left:4px}
.spacer{flex:1}
/* projectpagina */
.proj{display:flex;flex-direction:column;gap:14px}
.phead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.phead .who2{display:flex;flex-direction:column;gap:2px}
.phead .back{border:0;background:none;color:var(--primary);font-weight:800;font-size:12.5px;padding:0;text-align:left}
.phead b{font:700 19px var(--display)}
.phead .ad{color:var(--soft);font-size:12.5px}
.ptabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.ptabs .tab{padding:9px 12px}
.pbody{display:flex;flex-direction:column;gap:18px;max-width:980px}
.pbody.wide{max-width:none}
/* legplan-werkblad */
.lpw{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lptop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--soft)}
.lpprog{position:relative;height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.lpprog i{position:absolute;inset:0 auto 0 0;background:#3FA864;border-radius:999px}
.lpprog em{position:absolute;right:8px;top:-1px;font-style:normal;font:700 11px var(--mono);color:var(--ink)}
.stage{position:relative;background:#556b4d}
.stage canvas{display:block;width:100%;height:auto;cursor:crosshair}
.tools{position:absolute;top:0;right:0;bottom:0;width:46px;background:rgba(16,32,31,.92);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0}
.tools button{width:36px;height:36px;border:0;border-radius:8px;background:none;color:#DCE8E6;display:flex;align-items:center;justify-content:center}
.tools button:hover{background:rgba(255,255,255,.1)}
.tools button[aria-pressed="true"]{background:rgba(111,214,200,.25);color:#fff}
.tools hr{width:26px;border:0;border-top:1px solid rgba(255,255,255,.15);margin:4px 0}
.layers{position:absolute;top:10px;right:58px;display:flex;flex-direction:column;gap:8px}
.layers button{width:40px;height:40px;border-radius:10px;border:0;background:#fff;color:#10201F;box-shadow:0 6px 16px -8px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.layers button[aria-pressed="true"]{outline:2px solid var(--mint)}
.nav2{position:absolute;left:12px;bottom:12px;display:flex;align-items:flex-end;gap:10px}
.zoom{display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.zoom button,.pad button{width:32px;height:32px;border:0;background:#fff;color:#10201F;font-weight:800;font-size:16px}
.pad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);gap:2px}
.pad button{border-radius:50%;box-shadow:0 6px 16px -8px rgba(0,0,0,.6);font-size:13px}
.pad .c{grid-column:2;grid-row:2;font:800 12px var(--body)}
.pad .u{grid-column:2;grid-row:1}.pad .l{grid-column:1;grid-row:2}.pad .r{grid-column:3;grid-row:2}.pad .dn{grid-column:2;grid-row:3}
.lpstat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;background:#10201F;color:#9FB8B3;padding:10px 14px;font-size:12.5px;font-weight:700}
.lpstat b{color:#fff;font:500 13.5px var(--mono);margin-left:6px}
.lpstat .more{margin-left:auto;border:0;background:none;color:#fff;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:12px}
.lpmore{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:14px;border-top:1px solid var(--line)}
.lpmore .h3{margin-bottom:6px}
.mbars{display:flex;align-items:flex-end;gap:4px;height:90px}
.mbars div{flex:1;background:var(--primary);border-radius:3px 3px 0 0;position:relative}
.mlab{display:flex;gap:4px;font-size:10px;color:var(--faint)}.mlab span{flex:1;text-align:center}
@media (max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .rail{flex-direction:row;justify-content:space-around;padding:6px 4px;order:2;position:sticky;bottom:0}
  .rail .mark,.rail .grow,.rail .ri:disabled{display:none}
  .app>.main{order:1}
  .who .nm{display:none}
  .topbar h1 small{display:none}
  .tools{width:40px}.tools button{width:32px;height:32px}
  .nav2 .pad{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== 2Solar-achtige opzet ===== */
.app{grid-template-columns:250px minmax(0,1fr)}
.side2{background:#23302E;color:#D6E3E0;display:flex;flex-direction:column;min-height:0;overflow:auto}
.brandblk{background:var(--primary);color:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.brandblk b{font:700 26px/1 var(--display);letter-spacing:.07em}
.brandblk b span{color:var(--mint)}
.brandblk small{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;opacity:.8}
.orgblk{background:#fff;color:#10201F;padding:14px 20px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;line-height:1.2}
.orgblk i{width:34px;height:34px;border-radius:8px;background:var(--tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font-style:normal;font:800 16px var(--display)}
#sideCtx{padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.sbh{font:400 21px/1.2 var(--body);color:#7CC4EE;color:var(--mint);padding:10px 10px 6px}
.sbgrp{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8FA9A4;padding:12px 10px 4px}
.sbitem{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:none;color:#E4EEEC;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600}
.sbitem span{font:500 11.5px var(--mono);color:#9FC2BC}
.sbitem:hover{background:rgba(255,255,255,.06)}
.sbitem[aria-pressed="true"]{background:rgba(111,214,200,.18);color:#fff}
.sbitem.zero{opacity:.55}
.sbitem.add{color:var(--mint);font-weight:800}
.sbback{border:0;background:none;color:var(--mint);font-weight:800;text-align:left;padding:4px 10px 8px}
.sbstat{margin:0 10px;padding:8px 10px;border-radius:8px;background:rgba(111,214,200,.14);color:#fff;font-weight:700;font-size:13px}
.sbtxt{padding:0 10px;font-size:13px;line-height:1.6;color:#C9D8D5;font-style:italic}
.sbfoot{margin:auto 14px 14px;background:rgba(255,255,255,.08);border-radius:8px;padding:10px;text-align:center;font-size:12.5px;font-weight:700;color:#C9D8D5}
.hdr{display:flex;align-items:stretch;gap:18px;background:var(--surface);border-bottom:1px solid var(--line);min-height:92px;padding:0 20px;flex-wrap:wrap}
.hdr h1{margin:0;align-self:center;flex:1;min-width:200px;font:400 16px var(--body);color:var(--ink)}
.htabs{display:flex;align-self:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface-2);max-width:100%;overflow-x:auto}
.ht{border:0;border-right:1px solid var(--line);background:none;min-width:104px;padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--soft);font-size:11.5px;font-weight:600}
.ht:last-child{border-right:0}
.ht:hover{background:var(--surface)}
.ht[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.acct{align-self:center;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-size:14px;color:var(--soft)}
.acct .av{width:30px;height:30px}
.view{background:var(--bg);padding:20px 28px 40px}
.panel,.card2{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.card2{padding:18px 22px;margin-bottom:16px;max-width:1100px}
.card2 h2{font:400 22px/1.2 var(--body);color:var(--primary);margin:0 0 14px}
.pwrap{max-width:1100px}
.form{display:flex;flex-direction:column;gap:10px}
.fl{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}
.fl>label{text-align:right;color:var(--soft);padding-top:8px;font-size:14px}
.fl input,.fl select,.fl textarea,.card2 textarea,.ltools input,.ltools select,.lines select,.lines input{border:1px solid var(--line);border-radius:4px;padding:8px 10px;background:var(--surface);max-width:100%}
.fl input,.fl select{width:260px}
.fl textarea,.card2 textarea{width:100%}
.fl.wide input{width:100%}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.ed{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.edbar{display:flex;gap:2px;align-items:center;border-bottom:1px solid var(--line);padding:6px;flex-wrap:wrap}
.edbar button{border:0;background:none;width:34px;height:32px;border-radius:4px;font-size:16px;color:var(--ink)}
.edbar button:hover{background:var(--surface-2)}
.edbar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.edarea{min-height:220px;padding:14px 18px;font-size:14px;line-height:1.6;outline:none}
.edarea ul{margin:4px 0;padding-left:20px}
.edarea p{margin:0 0 8px}
.edfoot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:4px 10px;font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.pvg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:4px;max-width:620px}
.pvg>div{padding:12px;text-align:center;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:center;font-size:13.5px;color:var(--soft)}
.pvg>div:last-child{border-right:0}
.pvg b{font:500 15px var(--mono);color:var(--ink)}
.pvg input{width:80px;border:1px solid var(--line);border-radius:4px;padding:6px}
.checks{display:flex;flex-direction:column;gap:8px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.actions.sticky{position:sticky;bottom:0;background:var(--bg);padding:12px 0;margin-top:0}
.ltools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.ltools input{width:280px}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:12px;font-weight:800;color:var(--faint);letter-spacing:.03em;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td small{display:block;color:var(--faint);font:500 11.5px var(--mono)}
.tbl tr[data-open]{cursor:pointer}
.tbl tr[data-open]:hover td{background:var(--surface-2)}
.tbl .r{text-align:right}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl tr.t td{font-weight:800;border-bottom:0}
.lines .num{width:70px}
.lnk{border:0;background:none;color:var(--crit);font-weight:700;font-size:12.5px}
.addrow{margin-top:10px}
.pill{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap;background:var(--tint);color:var(--primary)}
.pill.ph-akkoord{background:#E8EDFB;color:#34479A}.pill.ph-wvb{background:#F3EAFB;color:#6B3A94}.pill.ph-montage{background:var(--warn-bg);color:var(--warn)}
.pill.ph-financieel{background:#FDEBD9;color:#9A4E12}.pill.ph-nazorg{background:var(--ok-bg);color:var(--ok)}.pill.ph-verloren{background:var(--crit-bg);color:var(--crit)}
.sigpad{width:100%;height:auto;border:1.5px dashed var(--line);border-radius:6px;background:var(--surface-2);touch-action:none;cursor:crosshair}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.th{width:150px;height:110px;border-radius:6px;background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 8px,var(--line) 8px,var(--line) 9px);display:flex;align-items:flex-end;padding:8px;font-size:12px;font-weight:700;color:var(--soft)}
.board{min-height:0}
.tbl table{min-width:980px}
.tbl .lines,.card2 .tbl table{min-width:560px}
.tbl td:first-child{min-width:170px}
.tbl td b{white-space:nowrap}
.tbl .r,.tbl td .src,.tbl td .pill{white-space:nowrap}
@media (min-width:981px){.hdr{flex-wrap:nowrap}.hdr h1{min-width:0}.ht{min-width:92px}}
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side2{display:none}
  .hdr{padding:10px 16px;gap:10px}
  .ht{min-width:78px}
  .acct .nm{display:none}
  .view{padding:14px 16px 30px}
  .fl{grid-template-columns:1fr;gap:4px}.fl>label{text-align:left;padding-top:0}
  .fl input,.fl select,.ltools input{width:100%}
  .split{grid-template-columns:1fr}
  .pvg{grid-template-columns:1fr}.pvg>div{border-right:0;border-bottom:1px solid var(--line)}
}

/* ===== v5: indeling naar 2Solar ===== */
.sq{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:4px;background:var(--primary);color:var(--primary-ink);vertical-align:middle;flex-shrink:0}
.sq svg{width:16px;height:16px}
.blue{font:400 22px/1.2 var(--body);color:var(--primary);margin:0 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.it{font-style:italic;color:var(--soft);font-size:13.5px;margin:4px 0 14px}
.lnk2{border:0;background:none;color:var(--primary);font-weight:800;padding:0;font-size:13.5px}
.pwrap.wide{max-width:1500px}
/* statusknoppen */
.sbtns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sbtn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:6px 7px 6px 14px;font-size:14px;color:var(--ink)}
.sbtn b{min-width:26px;text-align:center;border-radius:3px;padding:2px 6px;font:500 12.5px var(--mono);color:#fff;background:#2563C9}
.sbtn[aria-pressed="true"]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--tint)}
.sbtn.z{color:var(--faint)}
.sbtn.ph-akkoord b{background:#3B3F9E}.sbtn.ph-wvb b{background:#7A3FA0}.sbtn.ph-montage b{background:#23803F}.sbtn.ph-financieel b{background:#1B2A4A}.sbtn.ph-nazorg b{background:#0F6E6B}.sbtn.ph-verloren b{background:#B23A2A}
.sbtn.ph-verloren{color:var(--crit)}
/* werkbalk */
.ktool{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.ib{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--soft);font-weight:700;font-size:13px}
.ib:hover{border-color:var(--primary);color:var(--primary)}
.ib[aria-pressed="true"],.ib.pr{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.ibg{display:flex;gap:2px}
.ktool input,.ktool select{height:36px;border:1px solid var(--line);border-radius:4px;padding:0 10px;background:var(--surface)}
.ktool input{width:250px}
.amnote{background:#6b7472;color:#fff;border-radius:4px;padding:8px 12px;font-size:13px}
/* tegels */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:18px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 10px 20px -16px rgba(0,0,0,.55);display:flex;flex-direction:column}
.tile header{display:flex;align-items:center;gap:8px;background:#0F6E6B;color:#fff;padding:8px 10px}
.tile header .nm{flex:1;min-width:0;border:0;background:none;color:inherit;text-align:left;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}
.tile header .ic{width:30px;height:30px;border:1.5px solid rgba(255,255,255,.85);border-radius:4px;background:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.tile header .st{border:1.5px solid rgba(255,255,255,.85);border-radius:4px;padding:3px 8px;font-size:12.5px;max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.tb{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;padding:12px 12px 12px;flex:1}
.tb .tel{color:var(--primary);font-size:16px;font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.tb dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;margin:6px 0 0;font-size:12.5px}
.tb dt{color:var(--soft);white-space:nowrap}.tb dd{margin:0;overflow-wrap:break-word;min-width:0}
.tb .a{color:var(--primary);opacity:.75;white-space:nowrap}
.tb .noam{grid-column:1/-1;color:var(--soft)}
.thumbw{display:flex;flex-direction:column;gap:4px}
.thumbw canvas{width:120px;height:104px;display:block;border-radius:2px;background:#62774f}
.thumbw i{font-size:12.5px;color:var(--soft);line-height:1.35}
.nolp{width:120px;height:104px;background:#cbbfb8;color:#8a7c74;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:8px;border-radius:2px}
.ofst{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:800;border-radius:3px;padding:2px 8px}
.ofst.concept{background:var(--surface-2);color:var(--soft)}.ofst.verzonden{background:var(--tint);color:var(--primary)}.ofst.geopend{background:var(--warn-bg);color:var(--warn)}.ofst.ondertekend{background:var(--ok-bg);color:var(--ok)}
.tile footer{display:flex;gap:2px;background:var(--surface-2);padding:8px 10px;border-top:1px solid var(--line)}
.qb{border:0;background:var(--surface);border-radius:4px;width:84px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--soft)}
.qb svg{color:#2E9D57}
.qb:hover{background:var(--tint)}
.pager{display:flex;gap:4px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap}
.pager button,.pager select{min-width:34px;height:34px;border:1px solid var(--line);background:var(--surface);border-radius:4px;font-weight:700}
.pager button[aria-current="true"]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.pager button:disabled{opacity:.4;cursor:default}
.pager .note{margin-left:10px}
/* profielpagina */
.prof{display:grid;grid-template-columns:minmax(0,1fr) 310px;max-width:1440px;align-items:stretch}
.pmain{min-width:0}
.map{position:relative;background:#62774f;overflow:hidden}
.map canvas{display:block;width:100%;height:auto}
.map .bigmap{position:absolute;left:12px;top:12px;border:0;background:#fff;color:#1a66c9;font-size:13px;padding:7px 11px;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.map .zm{position:absolute;right:12px;bottom:30px;display:flex;flex-direction:column;background:#fff;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.map .zm button{width:38px;height:38px;border:0;background:#fff;color:#555;font-size:22px;line-height:1}
.map .zm button+button{border-top:1px solid #e6e6e6}
.map .attr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.78);color:#333;font-size:10.5px;padding:2px 8px}
.pcard{background:var(--surface);border:1px solid var(--line);border-top:0;padding:22px 30px 30px}
.pname h2{font:400 30px/1.2 var(--body);margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pname .sub{color:var(--soft);font-size:17px;margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lbl{background:var(--primary);color:var(--primary-ink);border-radius:3px;padding:1px 7px;font-size:14px}
.pcard hr{border:0;border-top:1px solid var(--line);margin:18px 0 22px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}
.kv2{display:grid;grid-template-columns:175px minmax(0,1fr);gap:12px 16px;margin:0;font-size:14px;align-content:start}
.kv2 dt{color:var(--soft)}.kv2 dd{margin:0;color:var(--soft);line-height:1.55;overflow-wrap:anywhere}
.kv2 a{color:var(--primary);text-decoration:none}
.kv2 .gap{margin-top:12px}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;margin-top:34px}
.drow{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--soft)}
.dn i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--faint)}
.dn i.verzonden{background:var(--primary)}.dn i.ondertekend{background:var(--ok)}.dn i.geopend{background:#E0912F}
.dact{display:grid;grid-template-columns:repeat(2,26px);gap:3px;justify-content:end}
.dact button{width:26px;height:26px;border:0;border-radius:3px;background:var(--primary);color:var(--primary-ink);display:flex;align-items:center;justify-content:center;padding:0}
.dact svg{width:14px;height:14px}
.xl{margin:0 0 14px;padding-left:18px;color:var(--soft);font-size:13.5px}
/* tijdlijn */
.tlf{display:flex;gap:16px;justify-content:flex-end;margin:10px 0 10px;font-size:14px}
.tlf button{border:0;background:none;color:var(--soft);padding:0}
.tlf button[aria-pressed="true"]{text-decoration:underline;color:var(--ink)}
.tl2{list-style:none;margin:0;padding:0}
.tl2 li{display:grid;grid-template-columns:128px 22px minmax(0,1fr);align-items:start;padding-bottom:14px;position:relative}
.tl2 li::before{content:"";position:absolute;left:138px;top:0;bottom:0;width:2px;background:var(--faint);opacity:.5}
.tl2 .tm{font-size:13px;color:var(--faint);line-height:1.3;padding-top:7px}
.tl2 .tm small{display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:5px}
.tl2 .dot{width:10px;height:10px;border-radius:50%;background:var(--faint);margin:12px 0 0 5px;position:relative;z-index:1}
.tc{--c:#5b6164;position:relative;background:var(--c);color:#fff;border-radius:4px;padding:9px 14px;font-size:14px;margin-left:8px}
.tc::before{content:"";position:absolute;left:-7px;top:12px;border-right:7px solid var(--c);border-top:7px solid transparent;border-bottom:7px solid transparent}
.tc.k-notitie{--c:#262b2f}.tc.k-activiteit{--c:#40494d}
.tc p{margin:5px 0 0;font-size:12.5px;opacity:.92;line-height:1.55}
/* infopaneel rechts */
.pinfo{background:#23292B;color:#E7ECEB;padding:22px 20px 26px;font-size:14px}
.pinfo dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px 10px;margin:0}
.pinfo dt{font-weight:700}
.pinfo dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pinfo select{width:100%;border:0;border-radius:3px;padding:5px 6px;background:#3B4447;color:#fff}
.pinfo .tag{display:inline-block;background:#0F6E6B;color:#fff;border-radius:3px;padding:2px 8px;margin:0 4px 4px 0}
.pinfo .tag2{display:inline-block;background:#3B4447;border-radius:3px;padding:2px 8px}
.pinfo h3{font:400 24px/1.2 var(--body);color:var(--mint);margin:28px 0 14px}
.pinfo a{color:#8FD3FF}
.pinfo .auto2{font-size:12px;color:#A9C9C3;margin:14px 0 0;line-height:1.5}
.pinfo .qa{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.pinfo .qa button{border:1px solid rgba(255,255,255,.25);background:none;color:#fff;border-radius:4px;padding:7px 10px;text-align:left;font-weight:700;font-size:13px}
.pinfo .qa button:hover{background:rgba(255,255,255,.08)}
/* legplan-kaart in zijbalk */
.lpcard{margin:0 10px 8px;border-radius:4px;overflow:hidden;background:#fff;border:0;padding:0;text-align:left;display:block;width:calc(100% - 20px);color:#fff}
.lpcard canvas{display:block;width:100%;height:auto}
.lpcard .y{background:#2E3638;font-size:12.5px;padding:6px 10px}
.lpcard .n{display:flex;justify-content:space-between;background:#0F6E6B;font-size:13px;font-weight:700;padding:6px 10px}
.lpcard[aria-pressed="true"]{outline:2px solid var(--mint)}
/* vensters */
.mback{position:fixed;inset:0;background:rgba(10,20,20,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow:auto}
.modal{background:var(--surface);border-radius:4px;width:min(980px,100%);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);display:flex;flex-direction:column}
.modal.sm{width:min(620px,100%)}
.modal>h2{margin:0;background:#0F6E6B;color:#fff;font:400 20px var(--body);padding:13px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:4px 4px 0 0}
.modal>h2 button{border:0;background:none;color:#fff;font-size:26px;line-height:1;padding:0 4px}
.mb{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.mf{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
.btn2{border:1px solid var(--primary);border-radius:3px;padding:9px 18px;font-size:15px;background:var(--primary);color:var(--primary-ink)}
.btn2.o{background:var(--surface);color:var(--primary)}
.mrow{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;align-items:start}
.mrow>label,.mrow>.lab{text-align:right;color:var(--soft);padding-top:8px}
.mrow input[type=text],.mrow input[type=email],.mrow input[type=number],.mrow select,.mrow textarea{border:1px solid var(--line);border-radius:3px;padding:8px 10px;background:var(--surface);width:100%;max-width:580px}
.hint{font-size:13px;color:var(--soft);font-style:italic;margin-top:4px}
.hint code{color:var(--primary);font-family:var(--mono);font-style:normal}
.hint select{font-style:normal;border:1px solid var(--line);border-radius:3px;padding:2px 6px;background:var(--surface)}
.menubar{display:flex;gap:18px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:15px;flex-wrap:wrap}
.menubar button{border:0;background:none;padding:2px 0;color:var(--ink)}
.edbar select{border:0;background:none;padding:4px 6px;min-width:110px}
.edarea h2{font:700 20px var(--body);margin:0 0 8px}.edarea h3{font:700 16px var(--body);margin:0 0 6px}
.cta-prev{display:inline-block;background:#10201F;color:#fff;font-weight:800;letter-spacing:.04em;padding:12px 38px;border-radius:2px;font-size:15px}
.pdc{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:14px;max-width:580px}
.pdc .img{height:120px;border-radius:4px;background:linear-gradient(160deg,#eef2f1,#cfd8d5);display:flex;align-items:center;justify-content:center;color:#6d7a77}
.pdc .img svg{width:42px;height:42px}
.pdc b{display:block;margin-bottom:6px;font-size:15px}
.pdc div{line-height:1.7}
.pdc a{color:var(--primary)}
.combo{position:relative;max-width:580px}
.combo ul{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;background:var(--surface);border:1px solid var(--line);z-index:5;max-height:240px;overflow:auto;box-shadow:var(--shadow)}
.combo li{padding:9px 12px;cursor:pointer}
.combo li:hover,.combo li.on{background:#0F6E6B;color:#fff}
/* offerteregels */
.ol td,.ol th{white-space:nowrap}
.ol td.oms{white-space:normal;min-width:220px}
.ol .ink{color:var(--faint)}
.ol .rb{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.ol .rb button{width:26px;height:26px;border:0;border-radius:3px;background:var(--primary);color:var(--primary-ink);display:flex;align-items:center;justify-content:center;padding:0}
.ol .rb svg{width:14px;height:14px}
.ol input.num{width:64px;border:1px solid var(--line);border-radius:3px;padding:5px 6px;background:var(--surface)}
.mgn{text-align:right;color:var(--soft);font-size:13px;padding:8px 14px}
.mgn b{color:var(--ink);font:500 14px var(--mono)}
.mgn i{display:block}
.vgrid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.vbox{border:1px solid var(--line);border-radius:4px;padding:14px}
.vbox h3{text-align:center;font:700 16px var(--body);margin:0 0 10px}
.vtabs{display:flex;justify-content:space-around;border-bottom:1px solid var(--line);margin-bottom:12px}
.vtabs button{border:0;background:none;padding:6px 10px;font-weight:700;color:var(--faint);border-bottom:2px solid transparent}
.vtabs button[aria-pressed="true"]{color:var(--primary);border-color:var(--primary)}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) 90px 38px;gap:8px;align-items:center;margin-bottom:8px;font-size:13.5px}
.vrow input{width:100%;border:1px solid var(--line);border-radius:3px;padding:6px;background:var(--surface);text-align:right;font-family:var(--mono)}
.vrow small{color:var(--faint);font-size:11px}
.bhead{display:flex;align-items:center;justify-content:center;gap:10px;font:700 16px var(--body);margin-bottom:10px}
.bhead select{border:1px solid var(--line);border-radius:3px;padding:4px 6px;background:var(--surface)}
.btab{width:100%;border-collapse:collapse;font-size:13.5px}
.btab th{background:#1a66c9;background:#0F6E6B;color:#fff;text-align:right;padding:9px 12px;font-weight:700}
.btab th:first-child,.btab td:first-child{text-align:left}
.btab td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono)}
.btab td:first-child{font-family:var(--body)}
.btab tr.t td{font-weight:800;border-bottom:0}
/* factuurregels */
.frow{display:grid;grid-template-columns:18px minmax(0,1fr) 34px;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.frow .grip{color:var(--faint);letter-spacing:-2px;padding-top:8px}
.frow textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:8px 10px;background:var(--surface);resize:vertical}
.fline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.fline .grp{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.fline .grp span{background:var(--surface-2);padding:7px 10px;font-weight:700;font-size:13px}
.fline .grp input{border:0;padding:7px 8px;width:90px;text-align:right;background:var(--surface)}
.fline select{border:1px solid var(--line);border-radius:3px;padding:7px 8px;background:var(--surface)}
.fline .amt{margin-left:auto;font:500 14px var(--mono)}
.frow .del{border:0;background:none;color:var(--primary);padding:6px 0}
.ftot{display:grid;grid-template-columns:auto 130px;gap:6px 20px;justify-content:end;margin-top:14px;font-size:14px}
.ftot span:nth-child(even){text-align:right;font-family:var(--mono)}
.ftot .b{font-weight:800}
/* legplan-zijpaneel */
.lpx{display:grid;grid-template-columns:310px minmax(0,1fr);border:1px solid var(--line);border-radius:4px;background:var(--surface);position:relative}
.lpside{padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;position:relative}
.lpmain{min-width:0}
.lpmain .lpw{border:0;border-radius:0}
.lph{display:flex;align-items:center;gap:8px}
.lph b{flex:1;font:800 17px/1.2 var(--body);letter-spacing:.03em;text-transform:uppercase}
.lph .ci{width:28px;height:28px;border-radius:50%;border:0;background:var(--primary);color:var(--primary-ink);font:800 14px Georgia,serif;font-style:italic;flex-shrink:0}
.lptabs{display:flex;border-bottom:1px solid var(--line);margin-top:4px}
.lptabs button{border:0;background:none;padding:10px 14px;font-weight:800;font-size:12.5px;letter-spacing:.06em;color:var(--soft)}
.lptabs button[aria-pressed="true"]{background:#1B2A4A;color:#fff}
.lpside .l{font-weight:800;font-size:14px;margin-top:4px}
.lpside select,.lpside input[type=number]{border:1px solid var(--line);border-radius:3px;padding:8px;background:var(--surface);width:100%}
.lpbtns{display:flex;gap:3px}
.lpbtns button{border:0;background:#1a66c9;background:#0F6E6B;color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;padding:10px 12px;border-radius:2px;display:flex;align-items:center}
.lpbtns button[aria-pressed="true"]{background:#1B2A4A}
.lpsum{display:flex;justify-content:space-between;background:#1B2A4A;color:#fff;padding:10px 12px;border-radius:2px;font-weight:700;font-size:14px;margin-top:auto}
.lpsum b{font:500 15px var(--mono)}
.picker{position:absolute;left:16px;top:210px;width:360px;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);z-index:6;padding:16px 16px 0}
.picker b{display:block;margin-bottom:12px;font-size:15px}
.pgridx{display:grid;grid-template-columns:repeat(8,32px);gap:6px}
.pgridx button{width:32px;height:32px;border:0;background:#d5d9d8;border-radius:1px;padding:0}
.pgridx button.on{background:#4F95E8}
.pman{display:flex;gap:8px;align-items:center;margin:16px -16px 0;background:var(--surface-2);padding:12px 16px;font-size:13px;flex-wrap:wrap}
.pman label{display:inline-flex;align-items:center;gap:4px}.pman input{width:58px;border:1px solid var(--line);border-radius:3px;padding:6px;background:var(--surface)}
.pman .btn2{margin-left:auto;font-weight:800;font-size:13px;padding:8px 14px}
@media (max-width:1200px){.prof{grid-template-columns:1fr}.vgrid{grid-template-columns:1fr}}
@media (max-width:980px){
  .pgrid,.pcols{grid-template-columns:1fr}.kv2{grid-template-columns:140px minmax(0,1fr)}.pcard{padding:16px}
  .lpx{grid-template-columns:1fr}.lpside{border-right:0;border-bottom:1px solid var(--line)}
  .mrow{grid-template-columns:1fr;gap:4px}.mrow>label,.mrow>.lab{text-align:left;padding-top:0}
  .tiles{grid-template-columns:1fr}.ktool input{width:100%}
  .tl2 li{grid-template-columns:96px 22px minmax(0,1fr)}.tl2 li::before{left:106px}
  .picker{left:12px;right:12px;width:auto;top:200px}.pgridx{grid-template-columns:repeat(8,minmax(0,1fr))}.pgridx button{width:100%}
  .mback{padding:0}.modal{border-radius:0;min-height:100%}
  .drow{grid-template-columns:1fr}.dact{justify-content:start;grid-template-columns:repeat(4,30px)}
}
@media (max-width:440px){.tb{grid-template-columns:1fr}.thumbw canvas,.nolp{width:100%;height:auto;aspect-ratio:300/260}.kv2{grid-template-columns:1fr;gap:2px 0}.kv2 dd{margin-bottom:8px}.kv2 .gap{margin-top:4px}}

/* ===== inloggen en account ===== */
button.acct{background:var(--surface);font:inherit;cursor:pointer}
.is-login .app{display:none}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:#23302E}
.loginbox{width:min(400px,100%);background:var(--surface);border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.loginbox .lb{padding:24px 26px 26px;display:flex;flex-direction:column;gap:8px}
.loginbox h1{font:400 24px var(--body);color:var(--primary);margin:0 0 8px}
.loginbox label{font-weight:700;font-size:13.5px;margin-top:6px}
.loginbox input{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--surface);font:inherit}
.loginbox .btn2{margin-top:12px;font-weight:800}
.loginbox .lnk2{align-self:flex-start;margin-top:6px;font-weight:700}
.lerr{background:var(--crit-bg);color:var(--crit);border-radius:4px;padding:8px 10px;font-size:13.5px;margin:6px 0 0}

/* Legplan: jaar van de luchtfoto en volledig scherm */
.stage .years{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 140px);background:rgba(16,32,31,.72);padding:5px;border-radius:999px;backdrop-filter:blur(3px)}
.stage .years button{border:0;background:transparent;color:#fff;font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer}
.stage .years button[aria-pressed="true"]{background:#6FD6C8;color:#10201F}
.stage .years button:hover{background:rgba(255,255,255,.15)}
.lpx.lpfull{position:fixed;inset:0;z-index:900;border:0;border-radius:0;grid-template-columns:330px minmax(0,1fr);height:100vh}
.lpx.lpfull .lpside{overflow:auto;height:100vh}
.lpx.lpfull .lpmain{height:100vh;overflow:auto}
.lpx.lpfull .lpmain .note{display:none}
.lpx.lpfull canvas#lpCv{width:100%;height:auto}
body.lpfull-on{overflow:hidden}
#lpFull{font-size:20px;font-weight:800}
.lpprice{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px 14px;font-size:13px}
.lpprice span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7a76);margin-top:6px}
.lpprice span:first-child{margin-top:0}
.lpprice b.pr{font-size:22px}
.lpprice small{color:var(--muted,#6b7a76)}
.addp{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:end}
.addp label{display:grid;gap:3px;font-size:12px;font-weight:700}
.addp .btn2{grid-column:1/-1}
.selbox{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-size:13px}
.lpside .seg{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;border-radius:6px;gap:3px}
.lpside .seg button{padding:8px 6px;border-radius:4px;background:var(--bg,#fff);border:1px solid var(--line);color:var(--ink,#16242b);font-size:12.5px;white-space:normal}
.lpside .seg button:hover{border-color:var(--primary)}
.lpside #lpRotSeg{grid-template-columns:repeat(4,1fr)}
.lpside #lpRotSeg button:nth-child(n+5){grid-column:span 2}
.selbox .seg{border:0;padding:0;background:none}
.pmenu{position:absolute;z-index:5;width:180px;background:#fff;color:#10201F;border-radius:8px;box-shadow:0 12px 30px -10px rgba(0,0,0,.55);padding:10px;display:grid;gap:6px;font-size:13px}
.pmenu b{font-size:13px}.pmenu span{font-size:11.5px;font-weight:800;color:#5b6b69;margin-top:4px}
.pmenu button{border:1px solid #d9e2e0;background:#f4f7f6;border-radius:5px;padding:7px 6px;font-weight:700;font-size:12.5px;color:#10201F;cursor:pointer}
.pmenu button:hover:not(:disabled){border-color:#1f7a72}.pmenu button:disabled{opacity:.4;cursor:not-allowed}
.pmenu .del{background:#fdecea;border-color:#f3c3bd;color:#a5281b}
.pmg{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.lphelp{font-size:12.5px;color:var(--soft);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px 12px}.lphelp ul{margin:6px 0 0;padding-left:16px;display:grid;gap:3px}.lphelp li b{color:var(--ink,#10201F)}
#lpCv{touch-action:none;user-select:none;-webkit-user-select:none}
/* ---------- Adviesgesprek ---------- */
.adv{--av-zelf:#00897B;--av-bat:#4A6FE0;--av-terug:#D97316;--av-laadbg:#DCE4FA;--av-net:#C9D2CF;position:relative;max-width:1400px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .adv{--av-zelf:#1A9486;--av-bat:#6E7FE0;--av-terug:#C97A2E;--av-laadbg:#1F2A4A;--av-net:#3A504C}}
:root[data-theme="dark"] .adv{--av-zelf:#1A9486;--av-bat:#6E7FE0;--av-terug:#C97A2E;--av-laadbg:#1F2A4A;--av-net:#3A504C}
.advsteps{display:flex;gap:6px;list-style:none;margin:0 0 16px;padding:0;overflow-x:auto}
.advsteps button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px 7px 7px;font-weight:800;font-size:13px;color:var(--soft);white-space:nowrap}
.advsteps i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);font:600 12px var(--mono)}
.advsteps .done{color:var(--primary)}.advsteps .done i{background:var(--tint);border-color:var(--primary)}
.advsteps [aria-current="step"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.advsteps [aria-current="step"] i{background:var(--primary-ink);color:var(--primary);border-color:var(--primary-ink)}
.advgrid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.advmain{max-width:none;margin:0}
.advmain h2{font:700 24px/1.2 var(--display);color:var(--ink);margin:0 0 6px}
.advmain h3{font-size:15px;margin:0 0 10px}
.advh3{margin-top:22px!important;padding-top:14px;border-top:1px solid var(--line)}
.advlead{color:var(--soft);margin:0 0 16px}
.advrow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:6px 16px;align-items:start;margin:12px 0}
.advrow>label,.advrow>.lab{color:var(--soft);padding-top:9px;font-weight:600}
.advrow small{display:block;color:var(--faint);font-size:12px;margin-top:4px;max-width:560px}
.advlab{display:block;color:var(--soft);font-weight:600;margin:16px 0 8px}
.advin,.advmain select{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface);min-height:44px;width:160px;max-width:100%;font-size:15px}
.advin.wide{width:min(420px,100%)}.advmain select{width:min(320px,100%)}
.advin[type=number]{font-family:var(--mono);text-align:right}
.unit{color:var(--faint);margin-left:6px}
.advseg{display:inline-flex;flex-wrap:wrap}.advseg button{padding:10px 14px;font-size:13.5px}
.advbox{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0;background:var(--surface-2)}
.advmap{border-radius:10px;margin:8px 0 6px}
.advtip{border-left:3px solid var(--primary);background:var(--tint);border-radius:0 8px 8px 0;padding:8px 12px;font-size:13px;margin-top:8px}.advtip p{margin:4px 0}
.advcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.advcard{display:flex;flex-direction:column;gap:4px;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:14px;min-height:110px}
.advcard b{font-size:15px}.advcard span{color:var(--soft);font-size:13px}.advcard em{margin-top:auto;font-style:normal;font:500 12px var(--mono);color:var(--faint)}
.advcard[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}.advcard[aria-pressed="true"] em{color:var(--primary)}
.advdet{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.advdet summary{cursor:pointer;font-weight:700;color:var(--soft)}
.advtk{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--surface)}.advtk.on{border-color:var(--primary)}
.advtkh{padding:12px 14px;font-size:14.5px}.advtkh input{width:20px;height:20px}
.advkwh{margin-left:auto;font:500 12.5px var(--mono);color:var(--primary)}
.advtkb{padding:0 14px 10px 44px}
.advsum{margin-top:14px;padding:12px 14px;background:var(--surface-2);border-radius:10px}
.advnote{font-size:12.5px;color:var(--soft)}
.advwarn{display:block;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:6px 10px;font-size:12.5px;margin-top:6px}
.advkpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.advkpi{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.advkpi small{display:block;color:var(--soft);font-size:12px;font-weight:700}
.advkpi b{display:block;font:700 22px/1.25 var(--display);margin:4px 0 2px}
.advkpi span{color:var(--faint);font-size:12px}
.advkpi.hl{background:var(--tint);border-color:var(--primary)}.advkpi.hl b{color:var(--primary)}
.advbat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface-2)}
.advbat small{display:block;color:var(--soft);font-weight:700;font-size:12px}.advbat b{display:block;font:700 26px/1.2 var(--display);color:var(--primary)}
.advbat span{display:block;font-size:12.5px;color:var(--soft);margin-top:6px}.advbat select{margin-top:4px}
.advchart{margin:18px 0 6px}.advch{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}.advch h3{margin:0}
.advleg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--soft);margin:4px 0}
.advleg span{display:inline-flex;align-items:center;gap:6px}
.advleg .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw.zelf{background:var(--av-zelf)}.sw.bat{background:var(--av-bat)}.sw.terug{background:var(--av-terug)}
.sw.laad{background:repeating-linear-gradient(45deg,var(--av-bat) 0 3px,var(--av-laadbg) 3px 6px);outline:1px solid var(--av-bat);outline-offset:-1px}.sw.net{background:var(--av-net)}
.advleg .ln{width:16px;height:0;border-top:2px solid var(--ink);display:inline-block}
.advsvg svg{display:block;width:100%;height:auto}
.advsvg .gl{stroke:var(--line);stroke-width:1}.advsvg .ax{fill:var(--faint);font:500 10.5px var(--mono)}
.advsvg .laadbg{fill:var(--av-laadbg)}.advsvg .laadst{fill:var(--av-bat)}.advsvg .laad{stroke:var(--av-bat);stroke-width:1}.advsvg .net{fill:var(--av-net)}
.advsvg .br{fill:none;stroke:var(--soft);stroke-width:1.2}.advsvg .an{fill:var(--ink);font:700 12px var(--body)}.advsvg .an2{fill:var(--soft);font:700 11px var(--body)}
.advsvg .pn{fill:var(--surface-2);stroke:var(--line)}.advsvg .pd{fill:var(--ok-bg);stroke:var(--ok)}.advsvg .pp{fill:var(--crit-bg);stroke:var(--crit)}.advsvg .pt{fill:var(--ink);font:600 11.5px var(--mono)}
.advsvg .socf{fill:var(--av-bat);fill-opacity:.18}.advsvg .socl{fill:none;stroke:var(--av-bat);stroke-width:2;stroke-linejoin:round}
.advsvg .zelf{fill:var(--av-zelf)}.advsvg .bat{fill:var(--av-bat)}.advsvg .terug{fill:var(--av-terug)}
.advsvg .vl{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.advsvg .vm{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.advsvg .hit{fill:transparent}.advsvg .hit.on{fill:var(--ink);fill-opacity:.06}
.advtip-pop{position:absolute;z-index:20;pointer-events:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.5;min-width:170px}
.advpitch{border-left:4px solid var(--warn);background:var(--warn-bg);border-radius:0 10px 10px 0;padding:12px 14px;margin:6px 0 10px}
.advtab{width:100%;border-collapse:collapse}.advtab th,.advtab td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}.advtab .r{text-align:right}.advtab .t td{font-weight:800;border-bottom:0}
.advnav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.advnav .btn{padding:12px 22px;font-size:14px}.btn:disabled{opacity:.45;cursor:not-allowed}
.advside{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.advside h3{margin:0 0 10px;font-size:14px}
.advside dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0;font-size:13px}.advside dt{color:var(--soft)}.advside dd{margin:0;text-align:right;font-weight:700}
.advtot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.advtot small{color:var(--soft);font-weight:700}.advtot b{display:block;font:700 26px/1.2 var(--display);color:var(--primary)}
@media (max-width:1100px){.advgrid{grid-template-columns:1fr}.advside{position:static}.advkpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.advrow{grid-template-columns:1fr}.advrow>label,.advrow>.lab{padding-top:0}.advcards,.advbat{grid-template-columns:1fr}.advtkb{padding-left:14px}}
.advladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:stretch;margin:8px 0}
.advstep{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.advstep small{display:block;color:var(--soft);font-size:12px;font-weight:700}.advstep b{display:block;font:700 24px/1.25 var(--display);margin:4px 0 2px}.advstep span{color:var(--soft);font-size:12.5px}
.advstep.warn{background:var(--warn-bg);border-color:var(--warn)}.advstep.hl{background:var(--tint);border-color:var(--primary)}.advstep.hl b{color:var(--primary)}
.advarrow{display:grid;place-items:center;color:var(--faint);font-size:20px}
.advgrid2{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:start;margin-top:10px}
@media (max-width:700px){.advladder{grid-template-columns:1fr}.advarrow{transform:rotate(90deg)}.advgrid2{grid-template-columns:1fr}}
.adv .tbl table.advtab{min-width:0}.advtab .mono{white-space:nowrap}
.advpitch.good{border-left-color:var(--primary);background:var(--tint)}
.advtab th{white-space:normal;vertical-align:bottom;font-size:12px;line-height:1.3}.advtab td .note{display:inline-block;margin-top:2px}
.adv .tbl .advtab th,.adv .tbl .advtab th.r{white-space:normal;padding:10px 8px}
/* adviesgesprek: toekomst met drie keuzes, en kansen */
.advtk .advtkh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px}
.advtk .advtkh b{display:block;font-size:14.5px}.advtk .advtkh small{display:block;color:var(--soft);font-size:12.5px;font-weight:400}
.advtk .advtkh .advseg button{padding:8px 12px;font-size:12.5px}
.advkans{border:1.5px dashed var(--primary);border-radius:12px;padding:14px 16px;margin:10px 0;background:var(--surface)}
.advkh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}.advkh>b{font-size:15px;margin-right:auto}
.advkh .advseg button{padding:7px 11px;font-size:12.5px}
.advkkm{display:inline-flex;align-items:center;gap:8px;color:var(--soft)}.advkkm .advin{width:120px;min-height:38px;padding:6px 10px}
.advkb{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.advkb>div{background:var(--surface-2);border-radius:8px;padding:10px 12px}
.advkb small{display:block;color:var(--soft);font-size:12px;font-weight:700}.advkb b{display:block;font:700 19px/1.25 var(--display);margin:3px 0}.advkb span{color:var(--faint);font-size:12px}
.advkact{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pr2{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25}.pr2 b{font-weight:700}.pr2 small{font-size:11px;color:var(--faint);font-family:var(--body);font-weight:600}
.advtot .note{display:block;margin-top:2px}
.advsom{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;max-width:720px}
.advsomr{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.advsomr b{font-family:var(--mono);font-weight:600;white-space:nowrap;text-align:right}.advsomr small{font-family:var(--body);color:var(--faint);font-weight:400}
.advsomr.t{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:10px;font-weight:800}.advsomr.t b{font-weight:800;color:var(--primary)}
.dknop{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.dknop .btn.sm{padding:6px 12px;font-size:12px;text-decoration:none}
.dn b{color:var(--ink)}
/* ---------- Afspraken en agenda ---------- */
.afrij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.afrij.geannuleerd{opacity:.55}.afrij.geannuleerd b{text-decoration:line-through}
.afsoort{font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap;color:#fff;background:var(--primary)}
.a-loc{background:#0F6E6B;color:#fff}.a-tel{background:#4A6FE0;color:#fff}.a-bel{background:#B7791F;color:#fff}.a-nab{background:#7A5BD6;color:#fff}
.afplan{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.afeerder summary{cursor:pointer;color:var(--soft);font-weight:700;font-size:13px;margin-top:6px}
.afdet{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.afinfo{background:var(--surface-2);border-radius:10px;padding:12px 14px}
.afinfo h4{margin:0 0 6px;font-size:13px}.afinfo dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 12px;font-size:13px}.afinfo dt{color:var(--soft)}.afinfo dd{margin:0;font-weight:700}
.agtop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.agtop select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
.agleg{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--soft)}.agleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.agw{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:auto;min-width:0}
.agu{padding-top:34px;font:500 11px var(--mono);color:var(--faint)}.agu div{text-align:right;padding-right:6px;transform:translateY(-7px)}
.agd{border-left:1px solid var(--line);min-width:110px}.agd.nu{background:var(--tint)}
.agh{height:34px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;border-bottom:1px solid var(--line)}
.agb{position:relative}.agl{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.age{position:absolute;left:3px;right:3px;border:0;border-radius:6px;padding:3px 6px;text-align:left;color:#fff;font-size:11.5px;line-height:1.25;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.age b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.age span{opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.age.geannuleerd{opacity:.4;text-decoration:line-through}.age.afgerond{opacity:.7}
@media (max-width:700px){.afdet{grid-template-columns:1fr}.afrij{grid-template-columns:1fr}}
.melding2{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700}
/* Planbord met weken en installatieblok */
.pwk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}.pwk b{font-size:14px;margin-right:auto}
.plan td.oud{background:repeating-linear-gradient(45deg,transparent 0 8px,var(--surface-2) 8px 9px)}
.plan th.nu{color:var(--primary)}
.slot[data-pid]{cursor:pointer}.slot[data-pid]:hover{outline:2px solid var(--primary)}
.instkv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 18px}.instkv>div{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.afsoort.inst{background:#9A5410}
.plan th:first-child,.plan tbody th{width:120px}
/* Dubbel adres, reden geen opdracht, bulkmail */
.dubbel{display:inline-block;font-size:11px;font-weight:800;color:var(--warn);background:var(--warn-bg);border:1px solid currentColor;border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:middle}
.tile .tb .dubbel{display:table;margin:6px 0 2px}
.redenen{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:14px}
@media (max-width:560px){.redenen{grid-template-columns:1fr}}
.ofst.afgewezen{background:var(--crit-bg);color:var(--crit)}.dn i.afgewezen{background:var(--crit)}
.bulkaan details{display:inline-block;margin-left:8px}.bulkaan summary{cursor:pointer;color:var(--primary);font-weight:700}
.bulklijst{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:6px;display:grid;gap:4px}
/* Meerdere legplannen */
.lpvar{position:relative;margin-bottom:8px}.lpvar .lpcard{margin-bottom:0}
.lpvar:not(.on) .lpcard{opacity:.78}.lpvar:not(.on) .lpcard:hover{opacity:1}
.lpvar.on .lpcard{box-shadow:0 0 0 2px var(--mint,#6FD6C8)}
.lpvb{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;border:0;background:rgba(16,32,31,.78);color:#fff;display:grid;place-items:center;cursor:pointer}
.lpvb:hover{background:var(--primary)}
.lpkeus{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lpkeus select{max-width:320px}
/* Offerte met live voorbeeld */
.ofgrid.met{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:20px;align-items:start}
.ofprev{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ofph{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.ofph .note{margin-right:auto}
.ofscroll{max-height:calc(100vh - 150px);overflow:auto;background:#cfd8d5;padding:12px}
.ofscroll .op{zoom:.43}
.ofvbaan{margin-top:12px}
@media (max-width:1280px){.ofgrid.met{grid-template-columns:1fr}.ofprev{position:static}.ofscroll{max-height:560px}}
.merken{margin-top:18px;padding:18px 20px}.merk{padding:10px 0;border-top:1px solid var(--line)}.merk p{margin:4px 0 0;color:var(--soft);max-width:900px}
/* Eigen notities aanpassen */
.tc .ntk{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:.75}.tc:hover .ntk,.tc .ntk:focus-within{opacity:1}
.tc .ntk button{width:26px;height:26px;border:0;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.tc .ntk button:hover{background:rgba(255,255,255,.3)}.tc .ntk svg{width:15px;height:15px}
.tc:has(.ntk) b{display:block;padding-right:62px}
.tc .bew{display:block;margin-top:4px;font-size:11.5px;opacity:.7}

/* Meldingen altijd boven een geopend venster */
.toast{z-index:1000}
.mfout{outline:2px solid var(--crit);outline-offset:2px;border-radius:6px}
/* Foto's van de klant */
.kfotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:6px 0 10px}
.kfotos.groot{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.kfotos .it{grid-column:1/-1;margin:0}
.kfoto{border:0;padding:0;background:var(--surface-2);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column}
.kfoto img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.kfoto span{font-size:11.5px;font-weight:700;padding:6px 8px;color:var(--soft)}
.kfoto:hover{outline:2px solid var(--primary)}
.advtot .advoud{display:block;margin-top:4px;font-size:15px;font-weight:700;color:var(--faint);text-decoration:line-through;text-decoration-color:var(--crit)}
/* Automations */
.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.auto-k{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.auto-k.aan{border-left:4px solid var(--primary)}
.auto-k header h3{margin:6px 0 0;font-size:17px}
.auto-st{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--soft)}
.auto-k.aan .auto-st{background:var(--ok-bg);color:var(--ok)}
.auto-k dl{margin:0;display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13.5px}.auto-k dt{color:var(--soft);font-weight:700}.auto-k dd{margin:0;line-height:1.5}
.auto-k footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.auto-gepland{margin-top:18px;padding:18px 20px}
@media (max-width:560px){.auto-k dl{grid-template-columns:1fr}}
.instel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px}.instel .lbl2{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}.instel .lnk2{justify-self:start;font-weight:700}
.tc.k-mail{--c:#0F6E6B}
.a-sch{background:#C2410C;color:#fff}
.tmdagen{display:flex;gap:6px;margin-top:4px}.tmdagen .chk{font-size:12px}

/* Terugknop naar alle klanten: alleen op smalle schermen, waar de zijbalk verborgen is */
.ht.mterug{display:none;font-weight:800}
@media (max-width:980px){.ht.mterug{display:inline-flex}}
a.brandblk{text-decoration:none;cursor:pointer}a.brandblk:hover{filter:brightness(1.08)}a.brandblk:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}