:root{
  --merk:#2F5D50;
  --merk-zacht:color-mix(in srgb,var(--merk) 10%,#fff);
  --merk-mid:color-mix(in srgb,var(--merk) 22%,#fff);
  --merk-donker:color-mix(in srgb,var(--merk) 80%,#000);
  --bg:#F3F2EE; --vlak:#FFFFFF; --vlak2:#FAF9F6; --lijn:#E4E1DA; --lijn2:#EEECE6;
  --inkt:#1B1A17; --inkt2:#4A4740; --grijs:#7B776E; --grijs2:#A6A198;
  --groen:#2E7D4F; --groen-z:#E5F2EA; --oranje:#B4630E; --oranje-z:#FBEEDD; --rood:#B23A2E; --rood-z:#F8E5E2; --blauw:#2F5E9E; --blauw-z:#E4ECF7;
  --r:10px; --r2:14px; --sch:0 1px 2px rgba(27,26,23,.05),0 4px 16px rgba(27,26,23,.05); --sch2:0 12px 40px rgba(27,26,23,.18);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:ui-monospace,'SF Mono',Menlo,monospace; --kop:'Inter Tight','Inter',system-ui,sans-serif;
  --zij:248px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14.5px/1.5 var(--font);color:var(--inkt);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--merk-donker)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
.dim{color:var(--grijs)}.klein{font-size:12.5px}.vet{font-weight:600}
.verborgen{display:none!important}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- layout ---------- */
#app{min-height:100%}
.shell{display:grid;grid-template-columns:var(--zij) 1fr;min-height:100vh}
.zij{position:sticky;top:0;height:100vh;background:var(--vlak);border-right:1px solid var(--lijn);display:flex;flex-direction:column;padding:18px 12px 12px}
.merkblok{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.merkblok img{max-height:34px;max-width:150px;object-fit:contain}
.merkteken{width:34px;height:34px;border-radius:9px;background:var(--merk);color:#fff;display:grid;place-items:center;font:700 16px var(--kop);flex:none}
.merknaam{font-weight:650;font-size:15px;line-height:1.2}
.merknaam small{display:block;font-weight:450;color:var(--grijs);font-size:12px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--inkt2);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--vlak2);color:var(--inkt)}
.nav a.aan{background:var(--merk-zacht);color:var(--merk-donker)}
.nav a.aan svg{color:var(--merk)}
.nav .kop{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs2);padding:14px 10px 6px}
.nav .tel{margin-left:auto;background:var(--merk);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;font-weight:600}
.wie{display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--lijn2);margin-top:8px}
.wie .naam{font-weight:550;font-size:13.5px;line-height:1.2}.wie .rol{font-size:12px;color:var(--grijs)}
.hoofdvlak{min-width:0;display:flex;flex-direction:column}
.inhoud{padding:28px 36px 60px;max-width:1320px;width:100%}
.paginakop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.paginakop h1{font:650 26px/1.15 var(--kop);letter-spacing:-.02em}
.paginakop p{margin:4px 0 0;color:var(--grijs)}
.acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.demobalk{background:var(--inkt);color:#EDEBE5;font-size:13px;padding:8px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.demobalk b{color:#fff}
.demobalk button{background:transparent;border:1px solid #55524b;color:#EDEBE5;border-radius:20px;padding:3px 11px;cursor:pointer;font-size:12.5px}
.demobalk button.aan{background:#fff;color:var(--inkt);border-color:#fff}
.mobielkop,.tabbalk{display:none}

/* ---------- onderdelen ---------- */
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r2);box-shadow:var(--sch)}
.kaart.pad{padding:20px}
.kaartkop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--lijn2)}
.kaartkop h2,.kaartkop h3{font-size:15px}
.kaartlijf{padding:16px 20px}
.raster{display:grid;gap:16px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}.r3{grid-template-columns:repeat(3,minmax(0,1fr))}.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.stapel{display:flex;flex-direction:column;gap:16px}
.rij{display:flex;align-items:center;gap:10px}.rij.tussen{justify-content:space-between}.rij.wrap{flex-wrap:wrap}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt);border-radius:9px;padding:8px 14px;font-weight:550;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,transform .05s;min-height:38px}
.knop:hover{background:var(--vlak2);border-color:#d3cfc6}
.knop:active{transform:translateY(1px)}
.knop.hoofd{background:var(--merk);border-color:var(--merk);color:#fff}
.knop.hoofd:hover{background:var(--merk-donker)}
.knop.zwart{background:var(--inkt);border-color:var(--inkt);color:#fff}
.knop.kaal{border-color:transparent;background:transparent}
.knop.kaal:hover{background:var(--vlak2)}
.knop.gevaar{color:var(--rood)}
.knop.klein{padding:5px 10px;min-height:32px;font-size:13px}
.knop.ico{padding:0;width:36px;min-height:36px}
.knop[disabled]{opacity:.5;pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:550;padding:2px 9px;border-radius:20px;background:var(--vlak2);color:var(--inkt2);border:1px solid var(--lijn2);white-space:nowrap}
.badge.groen{background:var(--groen-z);color:var(--groen);border-color:transparent}
.badge.oranje{background:var(--oranje-z);color:var(--oranje);border-color:transparent}
.badge.rood{background:var(--rood-z);color:var(--rood);border-color:transparent}
.badge.blauw{background:var(--blauw-z);color:var(--blauw);border-color:transparent}
.badge.merk{background:var(--merk-zacht);color:var(--merk-donker);border-color:transparent}
.stip{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:650;color:#fff;background:var(--grijs);flex:none;border:2px solid var(--vlak)}
.av.groot{width:40px;height:40px;font-size:14px}
.avs{display:flex}.avs .av+.av{margin-left:-8px}
.leeg{text-align:center;padding:40px 20px;color:var(--grijs)}
.leeg svg{width:34px;height:34px;color:var(--grijs2);margin-bottom:8px}
.leeg h3{color:var(--inkt);font-size:15px;margin-bottom:4px}

/* formulieren */
.veld{display:flex;flex-direction:column;gap:5px;min-width:0}
.veld>span,.label{font-size:12.5px;font-weight:550;color:var(--inkt2)}
.inp,select.inp,textarea.inp{width:100%;border:1px solid var(--lijn);background:var(--vlak);border-radius:9px;padding:8px 11px;min-height:38px;outline:none;transition:border-color .12s,box-shadow .12s}
.inp:focus{border-color:var(--merk);box-shadow:0 0 0 3px var(--merk-zacht)}
textarea.inp{min-height:84px;resize:vertical}
.velden{display:grid;gap:14px}
.velden.twee{grid-template-columns:1fr 1fr}.velden.drie{grid-template-columns:1fr 1fr 1fr}
.velden.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.schakel{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.schakel input{appearance:none;width:36px;height:21px;border-radius:20px;background:#D5D1C8;position:relative;cursor:pointer;transition:background .15s;margin:0;flex:none}
.schakel input::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.schakel input:checked{background:var(--merk)}.schakel input:checked::after{transform:translateX(15px)}
.segment{display:inline-flex;background:var(--vlak2);border:1px solid var(--lijn);border-radius:10px;padding:3px;gap:2px}
.segment button{border:0;background:transparent;padding:5px 12px;border-radius:7px;cursor:pointer;font-weight:550;color:var(--grijs);font-size:13px}
.segment button.aan{background:var(--vlak);color:var(--inkt);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.zoek{position:relative}.zoek svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--grijs2)}.zoek .inp{padding-left:34px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--lijn);background:var(--vlak);border-radius:20px;padding:4px 12px;cursor:pointer;font-size:13px;font-weight:500;color:var(--inkt2)}
.chip.aan{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.chip:hover:not(.aan){border-color:#cfcac0}

/* tabellen */
.tabel{width:100%;border-collapse:collapse}
.tabel th{text-align:left;font-size:12px;font-weight:550;color:var(--grijs);padding:10px 14px;border-bottom:1px solid var(--lijn);white-space:nowrap;background:var(--vlak2)}
.tabel td{padding:11px 14px;border-bottom:1px solid var(--lijn2);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel tr.klik{cursor:pointer}.tabel tr.klik:hover td{background:var(--vlak2)}
.tabel .rechts{text-align:right}
.tabelwrap{overflow-x:auto}

/* kpi */
.kpi{padding:18px 20px}
.kpi .l{font-size:12.5px;color:var(--grijs);font-weight:500;display:flex;align-items:center;gap:7px}
.kpi .w{font:650 27px/1.1 var(--kop);margin-top:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12.5px;color:var(--grijs);margin-top:4px}
.balk{height:6px;border-radius:6px;background:var(--lijn2);overflow:hidden}
.balk i{display:block;height:100%;background:var(--merk);border-radius:6px}
.lijst{display:flex;flex-direction:column}
.lijst>.item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--lijn2);text-decoration:none;color:inherit}
.lijst>.item:last-child{border-bottom:0}
a.item:hover,.item.klik:hover{background:var(--vlak2);cursor:pointer}
.item .groei{flex:1;min-width:0}
.item .t{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .o{font-size:12.5px;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modal en toast */
.scherm{position:fixed;inset:0;background:rgba(27,26,23,.42);z-index:50;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;padding:20px;animation:in .15s}
.modal{background:var(--vlak);border-radius:16px;box-shadow:var(--sch2);width:min(560px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:op .18s}
.modal.breed{width:min(820px,100%)}
.modal header{padding:18px 22px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modal header h2{font:650 19px var(--kop)}
.modal .lijf{padding:16px 22px;overflow:auto;min-width:0}
.modal footer{padding:14px 22px 18px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--lijn2)}
@keyframes in{from{opacity:0}}@keyframes op{from{opacity:0;transform:translateY(8px) scale(.98)}}
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--inkt);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--sch2);font-weight:500;animation:op .2s;display:flex;gap:8px;align-items:center}
.toast.fout{background:var(--rood)}
.linkvak{display:flex;gap:8px;align-items:center;background:var(--vlak2);border:1px solid var(--lijn);border-radius:10px;padding:6px 6px 6px 12px}
.linkvak code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12.5px}

/* ---------- inloggen ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--vlak)}
.login .links{padding:48px 56px;display:flex;flex-direction:column}
.login .vorm{max-width:380px;width:100%;margin:auto 0}
.login h1{font:700 34px/1.1 var(--kop);letter-spacing:-.015em;margin:0 0 8px}
.login .rechts{background:#2A2825;color:#F1EFE9;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.metsl-logo{display:flex;align-items:center;gap:10px;font:700 21px var(--kop);letter-spacing:-.02em;text-decoration:none;color:inherit}
.muur{display:flex;flex-direction:column;gap:6px;margin:30px 0}
.muur div{display:flex;gap:6px}.muur div:nth-child(even){margin-left:34px}
.muur span{height:30px;width:64px;border-radius:4px;background:#3A3733;opacity:0;animation:steen .5s forwards}
.muur span.s{background:#B8492E}
@keyframes steen{from{opacity:0;transform:translateY(-10px)}to{opacity:1}}
.demokeuze{display:grid;gap:10px;margin-top:8px}
.demokeuze button{display:flex;align-items:center;gap:14px;text-align:left;background:#33312D;border:1px solid #45423C;color:#F1EFE9;border-radius:12px;padding:14px 16px;cursor:pointer;transition:background .15s,border-color .15s}
.demokeuze button:hover{background:#3C3934;border-color:#B8492E}
.demokeuze b{display:block;font-size:15px}.demokeuze small{color:#B5B0A6;font-size:13px}
.demokeuze .ic{width:38px;height:38px;border-radius:10px;background:#B8492E;display:grid;place-items:center;flex:none}
.foutmelding{background:var(--rood-z);color:var(--rood);padding:9px 12px;border-radius:9px;font-size:13.5px;margin-bottom:12px}

/* ---------- offertebouwer ---------- */
.bouwer{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.samenvatting{position:sticky;top:20px}
.totaalrij{display:flex;justify-content:space-between;padding:5px 0;font-variant-numeric:tabular-nums}
.totaalrij.groot{font:650 22px var(--kop);border-top:1px solid var(--lijn);margin-top:8px;padding-top:12px}
.ruimtes{display:flex;gap:8px;flex-wrap:wrap}
.ruimtetab{border:1px solid var(--lijn);border-radius:10px;padding:7px 12px;background:var(--vlak);cursor:pointer;text-align:left;min-width:120px}
.ruimtetab.aan{border-color:var(--merk);background:var(--merk-zacht);box-shadow:0 0 0 2px var(--merk-zacht)}
.ruimtetab b{display:block;font-size:13.5px}.ruimtetab small{color:var(--grijs);font-size:12px}
.maten{display:flex;gap:6px;flex-wrap:wrap}
.maat{font-size:12px;background:var(--vlak2);border:1px solid var(--lijn2);border-radius:7px;padding:2px 8px;font-variant-numeric:tabular-nums}
.catalogus{max-height:430px;overflow:auto;border-top:1px solid var(--lijn2)}
.catitem{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--lijn2);cursor:pointer;transition:background .1s}
.catitem:hover{background:var(--merk-zacht)}
.catitem .plus{width:26px;height:26px;border-radius:8px;border:1px solid var(--lijn);display:grid;place-items:center;color:var(--merk);flex:none;background:var(--vlak)}
.catitem:hover .plus{background:var(--merk);color:#fff;border-color:var(--merk)}
.regelgroep{border-top:1px solid var(--lijn2)}
.regelgroep h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--grijs);padding:12px 18px 4px;display:flex;justify-content:space-between}
.regel{display:grid;grid-template-columns:minmax(0,1fr) 150px 40px 100px 32px;gap:4px 10px;align-items:center;padding:7px 18px 4px}
.regel:hover{background:var(--vlak2)}
.regel .naam{font-weight:550;line-height:1.3}
.regel .sub{font-size:12px;color:var(--grijs)}
.regel input.aantal{text-align:right;padding:6px 8px;min-height:34px}
.regel .bedrag{text-align:right;font-variant-numeric:tabular-nums;font-weight:550}
.regel .notitie{grid-column:1/-1;margin-top:-4px}
.regel .notitie input{border:0;border-bottom:1px dashed var(--lijn);border-radius:0;min-height:28px;padding:2px 0;font-size:13px;background:transparent;color:var(--inkt2)}
.regel .notitie input:focus{box-shadow:none;border-bottom-color:var(--merk)}
.snelmaten{display:flex;gap:3px;margin-top:3px;flex-wrap:nowrap;justify-content:flex-end}
.snelmaten button{font-size:11px;border:1px solid var(--lijn2);background:var(--vlak);border-radius:6px;padding:0 6px;cursor:pointer;color:var(--grijs)}
.snelmaten button:hover{border-color:var(--merk);color:var(--merk-donker)}
.opgeslagen{font-size:12.5px;color:var(--grijs);display:flex;align-items:center;gap:6px}

/* offerte document */
.doc{background:#fff;max-width:820px;margin:0 auto;padding:56px 60px;border-radius:6px;box-shadow:var(--sch);color:#1d1c1a;font-size:13.5px}
.doc .dkop{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:26px;border-bottom:3px solid var(--merk)}
.doc .dkop img{max-height:56px;max-width:220px}
.doc h1{font:650 28px var(--kop);margin:30px 0 4px;letter-spacing:-.02em}
.doc table{width:100%;border-collapse:collapse;margin-top:8px}
.doc th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#77736a;border-bottom:1px solid #ddd;padding:8px 6px}
.doc td{padding:8px 6px;border-bottom:1px solid #eee;vertical-align:top}
.doc td.r,.doc th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:600px){.doc .pr{display:none}.doc{font-size:13px}.doc td,.doc th{padding:7px 4px}}
.doc .ruimtekop td{background:var(--merk-zacht);font-weight:650;color:var(--merk-donker);border-bottom:0}
.doc .tot{margin-left:auto;width:300px;margin-top:18px}
.doc .tot div{display:flex;justify-content:space-between;padding:4px 0}
.doc .tot .g{font:650 18px var(--kop);border-top:2px solid #1d1c1a;margin-top:6px;padding-top:8px}
.doc .voet{margin-top:36px;padding-top:16px;border-top:1px solid #ddd;font-size:11.5px;color:#77736a;display:flex;gap:20px;flex-wrap:wrap}
.tekenvak{max-width:820px;margin:20px auto 0}
.getekend{display:flex;gap:12px;align-items:center;background:var(--groen-z);color:var(--groen);border-radius:12px;padding:16px 18px;font-weight:550}

/* planning */
.planning{display:grid;border:1px solid var(--lijn);border-radius:var(--r2);overflow:hidden;background:var(--vlak)}
.planning .ph{background:var(--vlak2);padding:10px 12px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--lijn);border-right:1px solid var(--lijn2)}
.planning .ph.vandaag{color:var(--merk-donker);background:var(--merk-zacht)}
.planning .ph small{display:block;font-weight:450;color:var(--grijs)}
.planning .pn{padding:10px 12px;border-bottom:1px solid var(--lijn2);border-right:1px solid var(--lijn);display:flex;gap:9px;align-items:center;background:var(--vlak)}
.planning .pn .t{font-weight:550;font-size:13.5px;line-height:1.2}.planning .pn small{color:var(--grijs);font-size:12px}
.planning .pc{border-bottom:1px solid var(--lijn2);border-right:1px solid var(--lijn2);padding:5px;min-height:74px;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative}
.planning .pc:hover{background:var(--vlak2)}
.planning .pc.vandaag{background:color-mix(in srgb,var(--merk) 4%,#fff)}
.planning .pc .nieuw{opacity:0;position:absolute;right:6px;bottom:4px;color:var(--grijs2);font-size:18px;line-height:1}
.planning .pc:hover .nieuw{opacity:1}
.blok{border-radius:7px;padding:5px 8px;font-size:12px;line-height:1.25;color:#fff;font-weight:550;overflow:hidden;cursor:pointer;border-left:4px solid rgba(0,0,0,.18)}
.blok small{display:block;font-weight:450;opacity:.9;font-size:11px}
.blok.voorstel{background:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
.blok.afgewezen{opacity:.45;text-decoration:line-through}
.planning .mij{background:color-mix(in srgb,var(--merk) 6%,#fff)}

/* project & chat */
.projectkaart{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;transition:transform .12s,box-shadow .12s}
.projectkaart:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(27,26,23,.10)}
.projectkaart .kleur{height:5px}
.projectkaart .lijf{padding:16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.projectkaart h3{font-size:16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--lijn);margin-bottom:18px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:550;color:var(--grijs);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:7px;align-items:center}
.tabs button.aan{color:var(--inkt);border-bottom-color:var(--merk)}
.tabs .tel{background:var(--merk);color:#fff;border-radius:20px;font-size:11px;padding:0 6px}
.chat{display:flex;flex-direction:column;height:min(640px,calc(100vh - 260px));min-height:420px}
.chat .stroom{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:3px;background:var(--vlak2)}
.chat .dagkop{align-self:center;font-size:11.5px;color:var(--grijs);background:var(--vlak);border:1px solid var(--lijn2);border-radius:20px;padding:2px 10px;margin:12px 0 6px}
.bericht{display:flex;gap:8px;max-width:78%;align-items:flex-end}
.bericht .bel{background:var(--vlak);border:1px solid var(--lijn2);border-radius:14px 14px 14px 4px;padding:8px 12px;box-shadow:0 1px 1px rgba(0,0,0,.03);min-width:0}
.bericht .bel .wie{font-size:12px;font-weight:650;margin-bottom:1px;padding:0;border:0}
.bericht .bel .tijd{font-size:11px;color:var(--grijs2);margin-left:8px;float:right;margin-top:6px}
.bericht .bel p{margin:0;white-space:pre-wrap;word-wrap:break-word}
.bericht .bel img{display:block;max-width:260px;width:100%;border-radius:9px;margin:4px 0;cursor:zoom-in}
.bericht.mijn{align-self:flex-end;flex-direction:row-reverse}
.bericht.mijn .bel{background:var(--merk);color:#fff;border-color:var(--merk);border-radius:14px 14px 4px 14px}
.bericht.mijn .bel .tijd{color:rgba(255,255,255,.7)}
.bericht.vervolg .av{visibility:hidden}
.bericht.systeem{align-self:center;max-width:90%}.bericht.systeem .bel{background:var(--merk-zacht);border-color:transparent;font-size:13px;color:var(--merk-donker);border-radius:10px}
.bericht .deel{font-size:11.5px;border:0;background:none;color:var(--merk-donker);cursor:pointer;padding:2px 0;font-weight:600}
.invoer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--lijn);background:var(--vlak);align-items:flex-end}
.invoer textarea{flex:1;min-height:42px;max-height:140px;resize:none;border-radius:21px;padding:10px 16px}
.invoer .knop{border-radius:50%;width:42px;height:42px;padding:0;min-height:42px}
.kanaalinfo{font-size:12.5px;padding:8px 18px;background:var(--vlak);border-bottom:1px solid var(--lijn2);color:var(--grijs);display:flex;gap:8px;align-items:center}
.taak{display:flex;align-items:center;gap:11px;padding:9px 20px;border-bottom:1px solid var(--lijn2)}
.taak input[type=checkbox]{width:19px;height:19px;accent-color:var(--merk);flex:none;cursor:pointer}
.taak.klaar span{text-decoration:line-through;color:var(--grijs)}
.optie{border:1.5px solid var(--lijn);border-radius:12px;padding:14px;cursor:pointer;background:var(--vlak);text-align:left;display:flex;flex-direction:column;gap:3px;transition:border-color .12s}
.optie:hover{border-color:#cfc9bd}
.optie.aan{border-color:var(--merk);background:var(--merk-zacht)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:70;display:grid;place-items:center;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:92vh;border-radius:6px}

/* klantportaal */
.welkom{background:var(--merk);color:#fff;border-radius:var(--r2);padding:28px 30px;position:relative;overflow:hidden}
.welkom h1{font:650 28px var(--kop);letter-spacing:-.02em}
.welkom p{opacity:.85;margin:6px 0 0}
.welkom .balk{background:rgba(255,255,255,.22);margin-top:18px;height:8px}.welkom .balk i{background:#fff}

/* huisstijl */
.kleuren{display:flex;gap:8px;flex-wrap:wrap}
.kleuren button{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--lijn);cursor:pointer}
.kleuren button.aan{box-shadow:0 0 0 2px var(--inkt)}
.logovak{border:1.5px dashed var(--lijn);border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;background:var(--vlak2)}
.logovak img{max-height:60px;max-width:200px}
.voorbeeldapp{border:1px solid var(--lijn);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:120px 1fr;height:200px;font-size:11px}
.voorbeeldapp .vz{background:#fff;border-right:1px solid var(--lijn2);padding:10px;display:flex;flex-direction:column;gap:6px}
.voorbeeldapp .vz i{height:8px;border-radius:4px;background:var(--lijn2)}
.voorbeeldapp .vz i.a{background:var(--merk-mid)}
.voorbeeldapp .vh{background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:8px}

/* ---------- mobiel ---------- */
@media (max-width:1100px){
  .bouwer{grid-template-columns:minmax(0,1fr)}.samenvatting{position:static}
  .r4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .shell{display:block}
  .zij{display:none}
  .mobielkop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn);padding:10px 16px;min-height:56px}
  .mobielkop .titel{font-weight:650;font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobielkop .merkteken{width:30px;height:30px;font-size:14px}
  .mobielkop img{max-height:28px;max-width:110px}
  .tabbalk{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--lijn);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbalk a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:550;color:var(--grijs);text-decoration:none;padding:4px 0;position:relative}
  .tabbalk a.aan{color:var(--merk)}
  .tabbalk a .tel{position:absolute;top:0;left:calc(50% + 6px);background:var(--rood);color:#fff;border-radius:10px;font-size:10px;padding:0 5px}
  .tabbalk svg.i{width:22px;height:22px}
  .inhoud{padding:18px 16px 96px}
  .paginakop h1{font-size:22px}
  .r2,.r3,.r-21,.velden.twee,.velden.drie{grid-template-columns:minmax(0,1fr)}
  .velden.vier{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r4{grid-template-columns:1fr 1fr}
  .login{grid-template-columns:1fr}.login .rechts{order:-1;padding:28px 22px}.login .links{padding:28px 22px}
  .muur{display:none}
  .regel{grid-template-columns:minmax(0,1fr) 96px 84px 28px}
  .snelmaten{flex-wrap:wrap}
  .regel .eenh{display:none}
  .doc{padding:28px 20px}.doc .dkop{flex-direction:column}
  .chat{height:calc(100vh - 230px);min-height:360px}
  .bericht{max-width:88%}
  .planning{overflow-x:auto}
  .kpi .w{font-size:22px}
  /* tabellen worden kaartjes: nooit meer zijwaarts scrollen */
  .tabelwrap{overflow:visible}
  .tabel thead{display:none}
  .tabel,.tabel tbody{display:block;width:100%}
  .tabel tr{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 18px;padding:14px 16px;border-bottom:1px solid var(--lijn2)}
  .tabel tr:last-child{border-bottom:0}
  .tabel td{display:block;padding:0;border:0!important;width:auto!important;text-align:left!important;min-width:0}
  .tabel td:first-child{flex:1 1 100%}
  .tabel td:empty{display:none}
  .tabel td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:11px;font-weight:550;color:var(--grijs);letter-spacing:.02em;margin-bottom:2px}
  .tabel td[data-label=""]::before{display:none}
  .tabel td.actiecel{flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap}
  .tabel td.actiecel .knop{flex:1}
  .tabel tr.klik:active{background:var(--vlak2)}
  .tabel tr.klik:hover td{background:none}
  .modal{border-radius:16px 16px 0 0;align-self:end;max-height:92vh}
  .scherm{padding:0;align-items:end;justify-items:stretch}
  .demobalk{font-size:12px;padding:7px 10px;gap:6px;flex-wrap:nowrap;justify-content:flex-start}
  .demobalk .demotekst{display:none}
  .demobalk .demoknoppen{display:flex;flex:1;gap:4px}
  .demobalk .demoknoppen button{flex:1;padding:4px 2px;font-size:12px}
  /* projecttabs: alles in beeld, icoon boven tekst */
  .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;overflow:visible}
  .tabs button{flex-direction:column;gap:3px;padding:8px 2px 9px;font-size:11.5px;min-width:0;position:relative}
  .tabs button>span.lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs button svg.i{width:20px;height:20px}
  .tabs .tel{position:absolute;top:3px;left:calc(50% + 6px)}
  /* veel tabbladen op de telefoon: alleen het actieve tabblad toont zijn naam, zo past alles zonder afgekapte woorden */
  .tabs.veel{display:flex}
  .tabs.veel button{flex:1 1 0}
  .tabs.veel button.aan{flex:2.4 1 0}
  .tabs.veel button:not(.aan)>span.lbl{display:none}
  .tabs.veel button.aan>span.lbl{white-space:normal;text-align:center;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
  /* lijstregels mogen afbreken in plaats van uit beeld lopen */
  .lijst>.item.breek{flex-wrap:wrap}
  .item .rechtsblok{display:flex;align-items:center;gap:8px;margin-left:auto}
  .verberg-mobiel{display:none!important}
}
@media print{
  body{background:#fff}
  .zij,.mobielkop,.tabbalk,.demobalk,.paginakop,.geen-print,.tekenvak{display:none!important}
  .inhoud{padding:0;max-width:none}
  .doc{box-shadow:none;padding:0;max-width:none}
  .shell{display:block}
}
/* taalkiezer */
.taalkiezer{display:inline-flex;align-items:center}
.taalkiezer .inp{min-height:34px;padding:4px 30px 4px 10px;font-size:13px;width:auto;max-width:160px}
.verborgen-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.taalnoot{max-width:820px;margin:0 auto 14px;padding:10px 14px;border-radius:9px;background:var(--oranje-z);color:var(--inkt);font-size:13px}

/* ---------- beheer ---------- */
.bedrijfkaart{display:flex;flex-direction:column}
.bedrijfkaart.uit{opacity:.7}
.bedrijfkaart .bkop{display:flex;align-items:center;gap:12px;padding:18px 18px 14px}
.bedrijfkaart h3{font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bedrijfkaart .klein.dim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lijn2);border-bottom:1px solid var(--lijn2);background:var(--vlak2)}
.bstat{padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.bstat+.bstat{border-left:1px solid var(--lijn2)}
.bstat b{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bstat:last-child b{font-size:13px;font-weight:600;line-height:22px}
.bstat span{font-size:11.5px;color:var(--grijs)}
.bacties{display:flex;gap:8px;padding:14px 18px;flex-wrap:wrap}
.bacties .knop{flex:1 1 auto}
.sectiekop{font:650 15px var(--kop);margin:26px 0 12px;color:var(--inkt2)}
.hoewerkt{margin-top:18px}
.hoewerkt ol{margin:8px 0 0;padding-left:20px;color:var(--inkt2)}
.hoewerkt li{margin:4px 0}
.demoknoppen{display:inline-flex;gap:6px}
@media (max-width:860px){.bstats{grid-template-columns:repeat(2,minmax(0,1fr))}.bstat:nth-child(3){border-left:0}.bstat:nth-child(n+3){border-top:1px solid var(--lijn2)}}
.matenvak{display:grid;grid-template-columns:repeat(3,92px);gap:8px}
.matenvak label{display:flex;flex-direction:column;gap:3px;color:var(--grijs);font-weight:550}
.matenvak .inp{min-height:36px;padding:5px 9px}
@media (max-width:860px){.matenvak{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}}
.alleen-mobiel{display:none}
.rolregel{display:flex;flex-direction:column;gap:2px;padding:11px 0;border-bottom:1px solid var(--lijn2)}
.rolregel:last-child{border-bottom:0;padding-bottom:0}
.rolregel span{color:var(--inkt2);font-size:13.5px}
@media (max-width:860px){.alleen-mobiel{display:block}}
.deelknoppen{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.deelknoppen .knop{flex:1 1 auto}
@media (max-width:860px){.deelknoppen{flex-direction:column}.deelknoppen .knop{min-height:44px}}
.linkvak code{min-width:0}
.modal,.modal .lijf{min-width:0}
.modal .lijf{overflow-x:hidden}
.naarlogin{display:none}
@media (max-width:860px){.naarlogin{display:inline-flex;align-self:flex-start;margin-top:14px;background:none;border:1px solid #55524b;color:#EDEBE5;border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer}}
@media (max-width:600px){.doc .dkop>div:last-child{text-align:left!important}}

/* ---------- meldingen, meekijken, nieuwe versie ---------- */
.melding{display:block;background:var(--oranje-z);color:var(--oranje);padding:10px 13px;border-radius:9px;font-size:13.5px}
.melding.rood{background:var(--rood-z);color:var(--rood)}
.melding a{color:inherit;font-weight:600}
.meekijkbalk{background:var(--blauw);color:#fff;font-size:13px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.meekijkbalk span{display:inline-flex;gap:7px;align-items:center}
.meekijkbalk button{display:inline-flex;gap:6px;align-items:center;background:#fff;color:var(--blauw);border:0;border-radius:20px;padding:4px 12px;font-weight:600;cursor:pointer;font-size:12.5px}
.versiebalk{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;background:var(--inkt);color:#fff;border-radius:12px;padding:8px 8px 8px 14px;display:flex;gap:12px;align-items:center;box-shadow:var(--sch2);font-size:13.5px;max-width:calc(100% - 24px)}
@media (min-width:861px){.versiebalk{bottom:24px}}

/* ---------- installeren ---------- */
.instappen{display:flex;flex-direction:column;gap:10px}
.instap{display:flex;gap:12px;align-items:center;background:var(--vlak2);border:1px solid var(--lijn2);border-radius:12px;padding:12px 14px}
.instap-n{width:28px;height:28px;border-radius:50%;background:var(--merk);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.instap-ic{color:var(--merk);flex:none}.instap-ic svg.i{width:26px;height:26px}
.instap b{display:block;line-height:1.3}

/* ---------- beheer ---------- */
.stippen{display:inline-flex;gap:2px;margin-left:5px;vertical-align:2px}.stippen i{width:6px;height:6px;border-radius:1px;background:var(--merk)}.stippen i.uit{background:var(--lijn)}
.trechter{display:flex;flex-direction:column;gap:12px}
.trap{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:5px}
.trap:hover span{color:var(--merk-donker)}
.datumblok{width:42px;height:42px;border-radius:9px;background:var(--merk-zacht);color:var(--merk-donker);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none}
.datumblok b{font-size:16px}.datumblok span{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.mailkaart{overflow:hidden}
.mailtabs{display:flex;border-bottom:1px solid var(--lijn)}
.mailtabs button{flex:1;border:0;background:var(--vlak2);padding:10px 6px;font-weight:600;font-size:13px;color:var(--grijs);cursor:pointer;border-right:1px solid var(--lijn2)}
.mailtabs button:last-child{border-right:0}
.mailtabs button.aan{background:var(--vlak);color:var(--inkt);box-shadow:inset 0 -2px 0 var(--merk)}
.mailregel{display:flex;gap:10px;align-items:center;padding:6px 10px 6px 16px;border-bottom:1px solid var(--lijn2);min-height:44px}
.mailregel .label{width:78px;flex:none;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs)}
.kaalinp{border:0!important;box-shadow:none!important;padding:4px 0!important;background:transparent;flex:1;min-width:0}
.mailtekst{border:0!important;border-radius:0!important;box-shadow:none!important;min-height:380px!important;padding:14px 16px!important;line-height:1.55;resize:vertical}
.mailknoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-top:1px solid var(--lijn2);background:var(--vlak2)}
.faseknoppen{display:flex;gap:8px;flex-wrap:wrap}
.feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.feiten .label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs);margin-bottom:2px}
.notatie{margin-top:14px;background:var(--vlak2);border:1px dashed var(--lijn);border-radius:9px;padding:10px 12px;font-size:13px;color:var(--inkt2);display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.stapper{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.stapper button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lijn);background:var(--vlak);border-radius:20px;padding:5px 12px 5px 5px;font-weight:600;font-size:13px;color:var(--grijs);cursor:pointer}
.stapper button span{width:22px;height:22px;border-radius:50%;background:var(--vlak2);display:grid;place-items:center;font-size:12px}
.stapper button span svg.i{width:14px;height:14px}
.stapper button.aan{border-color:var(--merk);color:var(--inkt)}.stapper button.aan span{background:var(--merk);color:#fff}
.stapper button.klaar span{background:var(--groen-z);color:var(--groen)}
.wzkop{font-size:15px;margin-top:6px}
.teamrij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:start;background:var(--vlak2);border:1px solid var(--lijn2);border-radius:12px;padding:12px}
.teamrij>.velden{grid-column:1}.teamrij>.knop{grid-column:2;grid-row:1/3}
.telvoorbeeld{margin-top:8px;width:220px;border:8px solid #1B1A17;border-radius:28px;overflow:hidden;background:var(--bg);font-size:11px;box-shadow:var(--sch)}
.tvkop{display:flex;gap:8px;align-items:center;padding:10px;background:#fff;border-bottom:1px solid var(--lijn2)}.tvkop img{max-height:22px;max-width:90px}
.tvlijf{padding:12px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.tvlijf>b{font-size:14px}
.tvkaart{background:#fff;border:1px solid var(--lijn);border-radius:8px;overflow:hidden;padding:0 0 8px}.tvkaart i{display:block;height:4px;margin-bottom:6px}.tvkaart span{padding:0 8px;font-weight:600}
.tvknop{color:#fff;border-radius:7px;padding:7px;text-align:center;font-weight:600}.tvknop.licht{background:#fff;color:var(--inkt);border:1px solid var(--lijn)}
.tvtab{display:flex;justify-content:space-around;padding:8px;background:#fff;border-top:1px solid var(--lijn2)}.tvtab i{width:16px;height:16px;border-radius:5px;background:var(--lijn)}
.factuurregel{display:grid;grid-template-columns:minmax(0,1fr) 130px 36px;gap:8px;margin-top:6px}
.metsldoc .dkop{border-bottom-color:#B8492E}
.metsllogo{display:flex;align-items:center;gap:10px;font:800 26px var(--kop);letter-spacing:-.03em;color:#1B1A17}
@media (max-width:860px){
  .feiten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mailtekst{min-height:320px!important}
  .faseknoppen .knop,.mailknoppen .knop{flex:1 1 auto}
  .mailregel .label{width:66px}
  .teamrij .velden{grid-template-columns:minmax(0,1fr)!important}
  .factuurregel{grid-template-columns:minmax(0,1fr) 100px 32px}
  .telvoorbeeld{margin:8px auto 0}
}
@media print{.metsldoc .geen-print{display:none}}

.melding>svg.i{vertical-align:-4px;margin-right:6px}
.stippen{margin:0 4px 0 0;vertical-align:1px}
.mailregel .label{width:84px;font-size:10.5px;letter-spacing:.04em}
@media (max-width:860px){.mailregel .label{width:76px}}
.prijsnoot{display:flex;gap:12px;align-items:flex-start;background:var(--oranje-z);border-color:transparent}
.prijsnoot>svg.i{color:var(--oranje);margin-top:2px}
.prijsnoot p{margin:4px 0 0;color:var(--inkt2);font-size:13.5px;max-width:70ch}

/* privacy-uitleg bij eerste keer inloggen */
.privacy-scherm{min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;background:var(--bg)}
.privacy-kaart{width:100%;max-width:560px;background:var(--vlak);border:1px solid var(--lijn);border-radius:16px;padding:28px 24px;line-height:1.55}
.privacy-kaart h1{font:700 26px/1.15 var(--kop);margin:0 0 16px;letter-spacing:-.01em}
.privacy-merk{margin:0 0 22px}.privacy-merk img{max-height:40px;max-width:180px;object-fit:contain}
.privacy-contact{margin:0 0 12px;font-weight:600;overflow-wrap:anywhere}
@media (max-width:600px){.privacy-scherm{padding:16px}.privacy-kaart{padding:22px 18px;border-radius:14px}}

/* ---------- Metsl Pro ---------- */
.betaalvak{margin-top:20px;background:var(--merk-zacht);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;line-height:1.55}
.betaalvak b:first-child{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--merk-donker)}
.fregel{display:grid;grid-template-columns:1fr 120px 84px 36px;gap:8px;align-items:center}
@media (max-width:600px){.fregel{grid-template-columns:1fr 96px 70px 32px}.fregel .inp{padding-left:8px;padding-right:8px}}
.signaal{display:flex;gap:10px;align-items:center;border-radius:10px;padding:12px 14px;margin-bottom:14px;background:var(--vlak2);font-weight:550}
.signaal.goed{background:var(--groen-z);color:var(--groen)}.signaal.let{background:var(--oranje-z);color:var(--oranje)}
.nctabel{display:flex;flex-direction:column}
.ncrij{display:grid;grid-template-columns:minmax(120px,1.3fr) 1fr 1fr 1.4fr;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--lijn2)}
.ncrij.kop{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs);padding-top:0}
.ncrij.totaal{border-bottom:0;border-top:2px solid var(--inkt);font-weight:650;margin-top:2px}
.ncrij .nb{display:flex;align-items:center;gap:8px}.ncrij .nb .balk{flex:1;position:relative;overflow:visible}
.ncrij .nb .balk b{position:absolute;top:-4px;width:2px;height:14px;background:var(--inkt);border-radius:2px}
@media (max-width:600px){.ncrij{grid-template-columns:1.1fr 1fr 1fr;gap:8px;font-size:13px}.ncrij .nb{grid-column:1/-1}.ncrij.kop>div:last-child,.ncrij.totaal>div:last-child{display:none}}
.mwkaart.voorgesteld{border-color:var(--oranje)}.mwkaart.afgewezen{opacity:.7}
.tekenwrap{position:relative;border:1.5px dashed var(--lijn);border-radius:12px;background:var(--vlak2);height:170px;margin:10px 0 4px;touch-action:none}
.tekenwrap.getekend{border-style:solid;border-color:var(--merk);background:#fff}
.tekenwrap .hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--grijs2);pointer-events:none;font-size:13px}
.tekenwrap.getekend .hint{display:none}
canvas.handtekening{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
img.duim{width:38px;height:38px;object-fit:cover;border-radius:7px;cursor:zoom-in;flex:none}
.rapportfoto{max-width:220px;max-height:160px;border-radius:6px;margin-top:6px}
.handtekeningen{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:22px}
.handtekeningen>div{display:flex;flex-direction:column;gap:4px;border-top:1px solid #ddd;padding-top:10px}
.handtekeningen span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#77736a}
.handtekeningen img{height:80px;object-fit:contain;object-position:left}
@media (max-width:600px){.handtekeningen{grid-template-columns:1fr}}
@media print{.betaalvak{border:1px solid #ccc}.doc img.rapportfoto{break-inside:avoid}}