/* Bouwcockpit: gedeelde stijl, gegenereerd door build.mjs uit frontend/src/fonts.css en frontend/src/css. Niet met de hand wijzigen. */
/* Lettertypes (SIL Open Font License; licenties in /fonts). Variabel: Archivo met breedte-as (62–125%) en gewicht, Hanken Grotesk met gewicht.
   Per lettertype twee bestanden: Latijn en Latijn-uitgebreid (Pools, Roemeens, Tsjechisch, Turks, Baltisch, Hongaars, Kroatisch); de browser
   laadt het tweede pas als er zulke letters op het scherm staan. Cyrillisch (Bulgaars, Oekraïens, Russisch) komt uit het systeemlettertype.
   De ttf-bestanden in /fonts blijven voor de pdf's (pdf-lib kan geen woff2 insluiten). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* 00-basis.css */
/* Layout: het planbord van een aannemer. Kop met gele lijn en weeknummer, tabs als ordners, klussen als kaartjes per fase; een klus opent als werkmap aan de zijkant. */
/* Tokens, versie 2 (21 oktober 2026). Kleuren naar bouwmateriaal: zwartgrijs RAL 7021 en antraciet RAL 7016 (de kozijnkleuren van Nederland),
   gipswit als ondergrond, signaalgeel als enige accent, en de RAL-verkeerskleuren voor status. Uitleg en regels: docs/ontwerp.md. */
:root{
  /* vlakken */
  --paper:#F0F1EE;      /* gipswit: achtergrond van de app */
  --sheet:#FFFFFF;      /* wit: panelen, kaarten, invoer */
  --sheet-2:#E6E8E4;    /* beton licht: tweede vlak, balken, tabelkop */
  /* tekst */
  --ink:#23282B;        /* zwartgrijs RAL 7021: tekst, logo, primaire knop */
  --ink-2:#4D555A;      /* bijschrift */
  --ink-3:#636B70;      /* toelichting, placeholders (min. 4,5:1 op wit en gipswit) */
  --line:#DADDD8; --line-2:#C2C7C2;
  /* signaal: geel is een vulkleur met donkere tekst erop, nooit gele tekst op licht */
  --signal:#E8B021; --signal-ink:#5C4400; --signal-soft:#FBEFC6; --on-signal:#23282B;
  /* status, afgeleid van RAL 3020 / 6024 / 5017 */
  --red:#B3261E; --red-soft:#FBE3DF; --green:#1D6B43; --green-soft:#DCEFE3; --blue:#1E5A88; --blue-soft:#DEE9F3;
  /* het instrumentenpaneel (zijbalk, inlogscherm): ook in de lichte stand donker */
  --panel:#23282B; --panel-2:#2D3337; --panel-ink:#EEF0ED; --panel-ink-2:#A3ABAF; --panel-line:#383F43;
  --scrim:rgba(24,27,29,.44);
  --shadow-1:0 1px 2px rgba(35,40,43,.07);
  --shadow:0 1px 2px rgba(35,40,43,.06),0 16px 36px -18px rgba(35,40,43,.36);
  /* letters: Archivo (variabel, breedte 62–125%) voor koppen en cijfers, Hanken Grotesk voor tekst */
  --f-display:"Archivo","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --f-num:"Archivo",ui-sans-serif,system-ui,sans-serif;          /* cijfers en bedragen: Archivo met tabelcijfers (tnum) */
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:116%;          /* font-stretch voor koppen en grote cijfers: de brede letters van bouwborden en busbelettering */
  --fs-xs:12px; --fs-s:13px; --fs-m:15px; --fs-l:17px; --fs-xl:21px; --fs-2xl:27px; --fs-3xl:34px; --fs-4xl:44px;
  /* vorm: hoe groter het vlak, hoe ronder; labels blijven scherp */
  --r-xs:2px;   /* labels, vlaggen */
  --r:6px;      /* knoppen, invoer, chips (oude naam, blijft) */
  --r-m:10px;   /* panelen, kaarten */
  --r-l:16px;   /* lades, sheets, dialogen */
  --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --tap:44px;           /* minimale aanraakmaat op de telefoon */
  --gut:clamp(16px,3vw,32px);
  --sidebar-w:248px;
  --main-max:2400px;    /* breedte van de inhoud: op een breed scherm vult de cockpit het scherm (tot 2400 px, daarboven in het midden) */
  --ease:cubic-bezier(.2,.7,.2,1); --dur-1:120ms; --dur-2:220ms;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#16191B; --sheet:#1E2225; --sheet-2:#282D30; --ink:#ECEEEB; --ink-2:#B2B9BC; --ink-3:#8B9397;
  --line:#2F3539; --line-2:#41484D;
  --signal:#E8B021; --signal-ink:#F3C84E; --signal-soft:#3A3012; --on-signal:#1B1F21;
  --red:#FF8B7B; --red-soft:#3C1F1B; --green:#7ED3A0; --green-soft:#14291D; --blue:#8DBFE9; --blue-soft:#15273A;
  --panel:#0F1214; --panel-2:#1A1E21; --panel-ink:#ECEEEB; --panel-ink-2:#8F979B; --panel-line:#262B2F;
  --scrim:rgba(0,0,0,.62); --shadow-1:0 1px 0 rgba(0,0,0,.4); --shadow:0 1px 0 rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.9);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#16191B; --sheet:#1E2225; --sheet-2:#282D30; --ink:#ECEEEB; --ink-2:#B2B9BC; --ink-3:#8B9397;
  --line:#2F3539; --line-2:#41484D;
  --signal:#E8B021; --signal-ink:#F3C84E; --signal-soft:#3A3012; --on-signal:#1B1F21;
  --red:#FF8B7B; --red-soft:#3C1F1B; --green:#7ED3A0; --green-soft:#14291D; --blue:#8DBFE9; --blue-soft:#15273A;
  --panel:#0F1214; --panel-2:#1A1E21; --panel-ink:#ECEEEB; --panel-ink-2:#8F979B; --panel-line:#262B2F;
  --scrim:rgba(0,0,0,.62); --shadow-1:0 1px 0 rgba(0,0,0,.4); --shadow:0 1px 0 rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.9);
  color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--signal-soft);color:var(--ink)}
img,svg{max-width:100%}
body.locked{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.ic .n{transition:stroke var(--dur-1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 01-kop-algemeen.css */
/* ---------- schil: zijbalk (breed), rail (middel), onderbalk (telefoon) en de balk bovenin ----------
   Eén nav (#tabs) die per breedte anders gevuld wordt (zie renderTabs in 04-render.js). */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:linear-gradient(90deg,var(--panel) 0 var(--sidebar-w),transparent var(--sidebar-w))}
.hoofd{min-width:0;display:flex;flex-direction:column}

/* zijbalk: het instrumentenpaneel, ook in de lichte stand donker */
.side{background:var(--panel);color:var(--panel-ink);position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));z-index:30;min-width:0}
.side-brand{display:flex;gap:12px;align-items:center;padding:2px 8px 16px;border-bottom:1px solid var(--panel-line);min-width:0}
.klantlogo{width:40px;height:40px;border-radius:var(--r);background:var(--panel-ink);color:var(--panel);display:grid;place-items:center;flex:none;overflow:hidden;font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:15px;letter-spacing:.01em;position:relative}
.klantlogo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px}
.klantlogo::after{content:"";position:absolute;right:4px;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--signal)}
.klantlogo.met-logo::after{display:none}
.sb-t{min-width:0}
.sb-t b{display:block;font-family:var(--f-display);font-stretch:108%;font-weight:750;font-size:15px;line-height:1.15;overflow-wrap:anywhere}
.sb-t small{display:block;color:var(--panel-ink-2);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -12px;padding:8px 12px 10px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--panel-line) transparent}
.nav-g{margin:14px 10px 4px;font:600 12px/1 var(--f-body);color:var(--panel-ink-2)}
.nav-i{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r);color:var(--panel-ink);font:550 14.5px/1.2 var(--f-body);cursor:pointer;position:relative;text-align:left;min-height:38px}
.nav-i .ic{width:20px;height:20px;color:var(--panel-ink-2);transition:color var(--dur-1)}
.nav-i:hover{background:var(--panel-2)}
.nav-i:hover .ic{color:var(--panel-ink)}
.nav-i[aria-current="page"]{background:var(--panel-2);font-weight:650}
.nav-i[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:4px;border-radius:0 3px 3px 0;background:var(--signal)}
.nav-i[aria-current="page"] .ic{color:var(--signal)}
.nav-i:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.nav-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{margin-left:auto;font:700 11.5px/18px var(--f-body);min-width:20px;text-align:center;padding:0 6px;border-radius:var(--r-pill);background:var(--red);color:#fff;flex:none}
.side-foot{border-top:1px solid var(--panel-line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.snel{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--signal);color:var(--on-signal);border:0;border-radius:var(--r);min-height:42px;padding:0 12px;font:700 14.5px/1 var(--f-body);cursor:pointer;width:100%}
.snel .ic{width:20px;height:20px}
.snel:hover{filter:brightness(1.05)}
.snel:focus-visible{outline:2px solid var(--panel-ink);outline-offset:2px}
.wie{appearance:none;border:0;background:none;color:inherit;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r);cursor:pointer;width:100%;text-align:left;min-width:0}
.wie:hover{background:var(--panel-2)}
.wie>i{width:32px;height:32px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font:700 12px/1 var(--f-body);font-style:normal;color:var(--panel-ink);flex:none}
.wie:hover>i{background:var(--panel-line)}
.wie>span{font-size:13.5px;line-height:1.25;min-width:0;flex:1}
.wie>span small{display:block;color:var(--panel-ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wie>.ic{width:18px;height:18px;color:var(--panel-ink-2)}
.merk{display:flex;align-items:center;gap:7px;color:var(--panel-ink-2);font-size:11.5px;padding:2px 8px 0}
.merk svg{width:16px;height:16px;flex:none}

/* balk bovenin */
.top{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px)}
.top-in{max-width:var(--main-max);margin-inline:auto;display:flex;align-items:center;gap:14px;padding:14px var(--gut) 10px;color:var(--ink-2);font-size:13.5px;min-height:56px}
.top-merk{display:none}
.datum{white-space:nowrap}
.wk{font-family:var(--f-display);font-stretch:108%;font-weight:750;background:var(--signal);color:var(--on-signal);padding:5px 8px;border-radius:var(--r-xs);font-size:13px;line-height:1;white-space:nowrap}
.sync{margin-left:auto;font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:7px;white-space:nowrap}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;flex:none}
.sync.busy i{background:var(--signal)}
.sync.off i{background:var(--red)}

/* rail: middelbreed */
@media (max-width:1099px) and (min-width:760px){
  .app{grid-template-columns:84px minmax(0,1fr);background:linear-gradient(90deg,var(--panel) 0 84px,transparent 84px)}
  .side{padding:calc(14px + env(safe-area-inset-top,0px)) 8px calc(10px + env(safe-area-inset-bottom,0px))}
  .side-brand{justify-content:center;padding:2px 0 12px}
  .sb-t,.nav-g,.merk,.wie>span,.wie>.ic{display:none}
  .nav{gap:4px;margin:0 -8px;padding:10px 8px}
  .nav-i{flex-direction:column;gap:4px;padding:8px 2px 7px;font-size:11px;font-weight:600;text-align:center;min-height:54px;justify-content:center}
  .nav-i .ic{width:22px;height:22px}
  .nav-i[aria-current="page"]::before{left:-8px}
  .nav-l{max-width:100%}
  .cnt{position:absolute;top:3px;right:8px;margin:0;min-width:18px;line-height:16px;padding:0 4px;font-size:10.5px}
  .snel{padding:0;min-height:44px}
  .snel .snel-l{display:none}
  .wie{justify-content:center;padding:6px 0}
}

/* telefoon: compacte balk bovenin en de onderbalk */
@media (max-width:759px){
  .app{display:block;background:none}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;padding:0;background:var(--sheet);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 -10px 26px -20px rgba(35,40,43,.5);z-index:35}
  .side-brand,.side-foot{display:none}
  .nav{flex-direction:row;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));gap:0;overflow:visible;align-items:center}
  .nav-i{flex-direction:column;justify-content:center;gap:3px;padding:6px 0 4px;min-height:52px;color:var(--ink-3);font-size:11.5px;font-weight:600;text-align:center;border-radius:var(--r)}
  .nav-i .ic{width:23px;height:23px;color:var(--ink-3)}
  .nav-i:hover{background:none}
  .nav-i[aria-current="page"]{background:none;color:var(--ink)}
  .nav-i[aria-current="page"] .ic{color:var(--ink)}
  .nav-i[aria-current="page"]::before{left:50%;top:-5px;bottom:auto;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px}
  .nav-i .cnt{position:absolute;top:2px;left:50%;margin-left:6px;min-width:18px;line-height:16px;padding:0 4px;font-size:10.5px}
  .nav-plus{appearance:none;justify-self:center;width:54px;height:54px;border-radius:50%;background:var(--signal);color:var(--on-signal);display:grid;place-items:center;margin-top:-22px;border:4px solid var(--paper);box-shadow:0 8px 18px -8px rgba(35,40,43,.55);cursor:pointer}
  .nav-plus .ic{width:26px;height:26px}
  .nav-plus[aria-expanded="true"] .ic{transform:rotate(45deg)}
  .nav-plus .ic{transition:transform var(--dur-2) var(--ease)}
  .nav-dot{position:absolute;top:6px;left:50%;margin-left:8px;width:8px;height:8px;border-radius:50%;background:var(--red)}
  .top{border-bottom:1px solid transparent}
  .top-in{padding:10px 16px 8px;gap:10px;min-height:52px}
  .top-merk{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--ink)}
  .top-merk .klantlogo{width:34px;height:34px;font-size:13px;background:var(--ink);color:var(--paper)}
  .top-merk .klantlogo.met-logo{background:#fff}
  .top-merk b{font-family:var(--f-display);font-stretch:108%;font-weight:750;font-size:15.5px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .datum{display:none}
  .sync{margin-left:0;font-size:0;gap:0}
  .sync i{width:9px;height:9px}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}

/* werknemer: alleen de balk bovenin */
.is-ploeg .app{display:block;background:none}
.is-ploeg .side{display:none}
.is-ploeg .top-merk{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--ink)}
.is-ploeg .top-merk .klantlogo{width:34px;height:34px;font-size:13px;background:var(--ink);color:var(--paper)}
.is-ploeg .top-merk b{font-family:var(--f-display);font-stretch:108%;font-weight:750;font-size:15.5px}
.is-ploeg .datum{display:none}
.is-ploeg main{max-width:760px;margin:0 auto}

/* menu's van de schil: snel vastleggen, meer en de gebruiker */
.schil-scrim{position:fixed;inset:0;background:var(--scrim);z-index:50;animation:schil-in var(--dur-2) var(--ease)}
.schil-pop{position:fixed;z-index:51;background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);padding:8px;min-width:260px;animation:pop-in var(--dur-2) var(--ease)}
.schil-pop.snel-pop{left:16px;bottom:132px;width:calc(var(--sidebar-w) + 40px)}
.schil-pop.wie-pop{left:16px;bottom:70px;width:260px}
.schil-pop h2{font:650 12.5px/1.2 var(--f-body);color:var(--ink-3);margin:6px 10px 6px}
.menu-i{appearance:none;border:0;background:none;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-items:center;text-align:left;padding:8px 10px;border-radius:var(--r);color:var(--ink);cursor:pointer;font:inherit;min-height:48px}
.menu-i>.ic{grid-row:1/3;width:22px;height:22px;justify-self:center;color:var(--ink-2)}
.menu-i b{font-weight:650;font-size:14.5px;line-height:1.2}
.menu-i small{color:var(--ink-3);font-size:12.5px;line-height:1.25}
.menu-i:hover{background:var(--sheet-2)}
.menu-i:hover>.ic{color:var(--ink)}
.menu-i:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.menu-i.kort{grid-template-columns:28px minmax(0,1fr);min-height:42px}
.menu-i.kort>.ic{grid-row:auto;width:20px;height:20px}
.menu-i.gevaar{color:var(--red)}.menu-i.gevaar>.ic{color:var(--red)}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
.schil-sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--sheet);color:var(--ink);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--shadow);padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px));max-height:min(86vh,720px);overflow-y:auto;animation:sheet-in var(--dur-2) var(--ease)}
.schil-sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:2px auto 10px}
.schil-sheet h2{font:650 13px/1.2 var(--f-body);color:var(--ink-3);margin:14px 8px 6px}
.schil-sheet h2:first-of-type{margin-top:4px}
.sheet-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sheet-tegel{appearance:none;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-m);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 4px;color:var(--ink);font:600 13px/1.2 var(--f-body);cursor:pointer;text-align:center;position:relative}
.sheet-tegel .ic{width:26px;height:26px;color:var(--ink)}
.sheet-tegel[aria-current="page"]{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--signal)}
.sheet-tegel .cnt{position:absolute;top:6px;right:6px;margin:0}
.sheet-wie{display:flex;align-items:center;gap:12px;padding:12px 8px 4px}
.sheet-wie>i{width:36px;height:36px;border-radius:50%;background:var(--sheet-2);display:grid;place-items:center;font:700 13px/1 var(--f-body);font-style:normal}
.sheet-wie span{font-size:14px;line-height:1.3}.sheet-wie small{display:block;color:var(--ink-3);font-size:12.5px}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}}
@keyframes pop-in{from{transform:translateY(6px);opacity:0}}
@keyframes schil-in{from{opacity:0}}

/* ---------- algemeen ---------- */
main{width:100%;max-width:var(--main-max);margin-inline:auto;padding-inline:var(--gut);padding-block:6px 72px;outline:none;min-width:0}
.view-head{display:flex;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;margin-bottom:20px}
.view-head>div:first-child{min-width:0;flex:1 1 320px}
h1{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:clamp(25px,2.4vw,30px);line-height:1.08;letter-spacing:-.005em;margin:2px 0 0;text-wrap:balance}
.lede{color:var(--ink-2);margin:8px 0 0;max-width:68ch;font-size:15px}
.lede b{color:var(--ink);font-weight:650}
h2.sec{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:17px;line-height:1.2;margin:0 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
h2.sec .aside{margin-left:auto;font-family:var(--f-body);font-stretch:100%;font-weight:500;font-size:13px;color:var(--ink-3)}
h2.sec .aside .lnk{font-size:13px}
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px;min-width:0;box-shadow:var(--shadow-1)}
#view>.panel+.panel,#view>.panel+section.panel{margin-top:18px}
@media (max-width:759px){.panel{padding:14px 16px}#view>.panel+.panel{margin-top:14px}}
.empty{color:var(--ink-3);font-size:14px;margin:4px 0}
.muted{color:var(--ink-3)}
.sm{font-size:13px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lnk{appearance:none;border:0;background:none;padding:0;color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-2);font-family:inherit}
.lnk:hover{text-decoration-color:var(--ink)}
.lnk.subtle{color:var(--ink-3);font-weight:500}
.lnk.subtle:hover{color:var(--ink)}
.lnk.danger{color:var(--red);text-decoration-color:color-mix(in srgb,var(--red) 40%,transparent)}
/* knoppen */
.btn{appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--r);padding:0 14px;font:650 14px/1.15 var(--f-body);cursor:pointer;min-height:38px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
.btn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.btn .ic{width:18px;height:18px;flex:none}
.btn.signal{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.btn.signal:hover{background:color-mix(in srgb,var(--signal) 90%,#fff)}
.btn.ghost{background:var(--sheet);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-1)}
.btn.ghost:hover{border-color:var(--ink-3);background:var(--sheet)}
.btn.ghost .ic{color:var(--ink-2)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:color-mix(in srgb,var(--red) 88%,#000)}
.btn.sm{min-height:32px;padding:0 11px;font-size:13px;gap:6px}
.btn.sm .ic{width:16px;height:16px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:default}
.icon-btn{appearance:none;width:38px;height:38px;border:1px solid var(--line-2);background:var(--sheet);border-radius:var(--r);cursor:pointer;font-size:20px;line-height:1;display:grid;place-content:center;color:var(--ink);flex:none}
.icon-btn:hover{border-color:var(--ink-3)}
.icon-btn .ic{width:20px;height:20px}
@media (max-width:759px){.btn{min-height:44px;padding:0 16px}.btn.sm{min-height:38px}.icon-btn{width:44px;height:44px}}
/* invoer */
.inp{background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r);padding:0 12px;min-height:38px;min-width:0;font-size:14.5px;color:var(--ink);transition:border-color var(--dur-1)}
textarea.inp{padding:9px 12px;line-height:1.45}
select.inp{padding-right:30px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.inp:hover{border-color:var(--ink-3)}
.inp:focus{outline:2px solid var(--signal);outline-offset:-1px;border-color:transparent}
.inp::placeholder,.fi::placeholder{color:var(--ink-3);opacity:1}
@media (max-width:759px){.inp,.fi,select,textarea{font-size:16px!important}.inp{min-height:44px}}
/* aanraakmaat op de telefoon (docs/ontwerp.md: minstens --tap). Knoppen, velden en uitklapregels krijgen die maat echt; tekstlinks,
   chips en kleine schakelaars houden hun beeld en krijgen een onzichtbaar raakvlak van 44 px rond hun midden. */
@media (max-width:759px){
  .btn.sm{min-height:var(--tap);min-width:var(--tap)}
  .fi,details>summary,.chk{min-height:var(--tap)!important}
  .lnk,.copy,.chip,.fchip,.o2-chip,.wp-k,.mic,.aanv-link,.pdfk-sw{position:relative}
  .chip{overflow:clip;overflow-clip-margin:12px}
  .lnk::after,.copy::after,.chip::after,.fchip::after,.o2-chip::after,.wp-k::after,.mic::after,.aanv-link::after,.pdfk-sw::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));transform:translate(-50%,-50%)}
}
/* labels, vlaggen en chips */
.chip{appearance:none;border:0;background:var(--sheet-2);border-radius:4px;padding:0 8px;font:600 12.5px/22px var(--f-body);color:var(--ink-2);cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:5px}
.chip:hover{color:var(--ink);background:color-mix(in srgb,var(--sheet-2) 70%,var(--line-2))}
.chip .knr{font-family:var(--f-num);font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.flag{font:650 12px/20px var(--f-body);padding:0 7px;border-radius:var(--r-xs);background:var(--sheet-2);color:var(--ink-2);white-space:nowrap;display:inline-block}
.flag.warn{background:var(--red-soft);color:var(--red)}
.flag.q{background:var(--signal-soft);color:var(--signal-ink)}
.flag.hi{background:var(--ink);color:var(--paper)}
.flag.ok{background:var(--green-soft);color:var(--green)}
.flag.info{background:var(--blue-soft);color:var(--blue)}
.src{font:600 11.5px/18px var(--f-body);padding:0 7px;border-radius:var(--r-xs);background:var(--sheet-2);color:var(--ink-3);white-space:nowrap}
.src.live{background:var(--green-soft);color:var(--green)}
.due{font:600 12.5px/22px var(--f-body);white-space:nowrap;padding:0 8px;border-radius:var(--r-xs);background:var(--sheet-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.due.late{background:var(--red-soft);color:var(--red);font-weight:650}
.due.today{background:var(--signal-soft);color:var(--signal-ink);font-weight:650}
.flash{animation:fl 2.2s ease-out}
@keyframes fl{0%,40%{background:var(--signal-soft)}100%{background:transparent}}
details>summary{cursor:pointer;font-weight:650;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px;min-height:30px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-1) var(--ease);flex:none;margin:0 2px 0 1px}
details[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.callout{border-radius:var(--r);padding:12px 14px;font-size:14px;display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;background:var(--signal-soft);color:var(--ink);border-left:3px solid var(--signal)}
.callout p{margin:0;flex:1 1 260px;min-width:0}
.connect{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13.5px;color:var(--ink-2)}
.connect p{margin:0;flex:1 1 200px}
.panel>.connect:first-child{margin-top:0;padding-top:0;border-top:0}
/* lege staat met een lijntekening */
.leeg-staat{display:grid;justify-items:center;text-align:center;gap:8px;padding:22px 12px 18px;color:var(--ink-2)}
.leeg-staat>svg{width:96px;height:64px;color:var(--ink-3)}
.leeg-staat>svg .n{stroke:var(--signal)}
.leeg-staat b{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:16px;color:var(--ink)}
.leeg-staat p{margin:0;max-width:44ch;font-size:14px}
.leeg-staat .btn{margin-top:6px}

/* 02-vandaag-planbord.css */
/* vandaag */
/* twee kolommen: taken met daaronder de lopende klussen en de komende weken, rechts de rest; op een breed scherm drie kolommen */
.grid-today{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"a c" "b c";grid-template-rows:auto 1fr;gap:18px;align-items:start}
.grid-today>.col-a{grid-area:a}.grid-today>.col-b{grid-area:b}.grid-today>.col-c{grid-area:c}
@media (min-width:1800px){.grid-today{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b c";grid-template-rows:auto}}
.col{display:grid;gap:18px;min-width:0}
@media (max-width:920px){.grid-today{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;gap:14px}.grid-today>.col{display:contents}.o1{order:1}.letop{order:2}.o2{order:3}.lopenden{order:4}.o4{order:5}.o3{order:6}.o5{order:7}.o6{order:8}.o7{order:9}}
.vandaag-kop{margin-bottom:18px}
.quote{margin:12px 0 0;padding:1px 0 1px 12px;border-left:3px solid var(--signal);color:var(--ink-2);font-size:14px;max-width:62ch;text-wrap:balance}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
@media (max-width:759px){.quick{display:none}}
.tasks{display:grid}
.task{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px 12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.tasks>.task:first-child{border-top:0;padding-top:4px}
.cb{appearance:none;width:20px;height:20px;margin:1px 0 0;border:2px solid var(--line-2);border-radius:5px;background:var(--sheet);cursor:pointer;display:grid;place-content:center;flex:none;transition:background-color var(--dur-1),border-color var(--dur-1)}
.cb:hover{border-color:var(--ink-3)}
.cb:checked{background:var(--ink);border-color:var(--ink)}
.cb:checked::after{content:"";width:10px;height:5px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:translate(0,-1px) rotate(-45deg)}
.cb:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cb[disabled]{cursor:default;opacity:.6}
@media (pointer:coarse){.cb{width:24px;height:24px;margin-top:0}.task{grid-template-columns:26px minmax(0,1fr) auto}}
.task-title{font-weight:650;display:block;font-size:15px;line-height:1.35}
.task-detail{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.task.done .task-title{text-decoration:line-through;text-decoration-color:var(--ink-3);color:var(--ink-3);font-weight:500}
.task-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;align-items:center}
.task-meta:empty{display:none}
.task-side{display:grid;justify-items:end;gap:6px;font-size:13px}
@media (max-width:520px){.task{grid-template-columns:24px minmax(0,1fr)}.task-side{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:6px}}
/* let op: de signalen uit Sturen */
.letop .st-sigs{gap:0}
.letop .st-sig,.st-sig{background:none;border-radius:0;padding:10px 0;border-top:1px solid var(--line)}
.st-sigs>.st-sig:first-child{border-top:0;padding-top:2px}
/* lopende klussen */
.lopend{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.lopenden h2+.lopend{border-top:0;padding-top:4px}
.lopend-t{font-size:15px;font-weight:650;text-align:left;text-decoration:none;color:var(--ink)}
.lopend-t:hover{text-decoration:underline}
.lopend .flag{justify-self:end}
.lopend-s{grid-column:1/-1;color:var(--ink-3);font-size:13px;display:flex;gap:4px 12px;flex-wrap:wrap}
.lopend-w{color:var(--ink-2)}
.lopend .maat-rij{grid-column:1/-1;margin-top:8px}
.flag.fase-aanvraag,.flag.fase-afronden{background:var(--signal-soft);color:var(--signal-ink)}
.flag.fase-opdracht{background:var(--blue-soft);color:var(--blue)}
.flag.fase-uitvoering{background:var(--green-soft);color:var(--green)}
.subdet{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.subdet .tasks{margin-top:4px}
.addrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.addrow input[type=text]{flex:1 1 220px}
.addrow input[type=date]{flex:0 1 160px}
.week{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.weeks>.week:first-child{border-top:0;padding-top:2px}
.wk-lab{font-family:var(--f-display);font-stretch:112%;font-weight:760;font-size:15px;line-height:1.2}
.wk-lab small{display:block;font-family:var(--f-body);font-stretch:100%;font-weight:500;font-size:12px;color:var(--ink-3)}
.week.now .wk-lab{color:var(--signal-ink)}
.ag{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:baseline;padding:2px 0;font-size:14px}
.ag-d{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.ag-s{display:inline-block;font:600 11.5px/18px var(--f-body);padding:0 6px;border-radius:var(--r-xs);background:var(--sheet-2);color:var(--ink-2);margin-right:6px;vertical-align:1px}
.ag-s.fact{background:var(--green-soft);color:var(--green)} .ag-s.start{background:var(--blue-soft);color:var(--blue)} .ag-s.dl{background:var(--red-soft);color:var(--red)} .ag-s.afs{background:var(--signal-soft);color:var(--signal-ink)}
.head-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.agenda-full{padding:6px 16px 10px}
.ag-wk{font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:12.5px;color:var(--ink-3);padding:14px 0 4px}
.ag-day{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ag-day.empty-day{padding:5px 0;align-items:baseline}
.ag-day.today{background:color-mix(in srgb,var(--signal-soft) 40%,var(--sheet));margin:0 -16px;padding:10px 16px;border-top-color:var(--line);box-shadow:inset 3px 0 0 var(--signal)}
.ag-dh{display:flex;flex-direction:column;line-height:1.2}.ag-dh b{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:15px}.ag-dh small{color:var(--ink-3);font-size:12px}
.ag-day.today .ag-dh b{color:var(--ink)}
.ag-list{display:grid;gap:8px;min-width:0}
.agr{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:baseline;min-width:0}
.agr-t{font-variant-numeric:tabular-nums;font-size:13px;font-weight:650;white-space:nowrap}
.agr-main{min-width:0}.agr-head{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;min-width:0}
.agr-title{font-weight:600;color:var(--ink);text-decoration:none;font-size:14.5px;text-align:left;overflow-wrap:anywhere}a.agr-title:hover{text-decoration:underline}
.agr-sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--ink-2);font-size:13px;margin-top:2px}
.agr.cp .agr-title{font-weight:500}
.agf{margin:0 0 16px;width:100%}.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.chk{display:flex!important;gap:8px;align-items:center;min-height:32px;cursor:pointer}
.note-late{margin:0 0 12px}
@media (max-width:520px){.ag-day{grid-template-columns:minmax(0,1fr);gap:6px}.ag-day.empty-day{grid-template-columns:64px minmax(0,1fr)}.agr{grid-template-columns:70px minmax(0,1fr)}}
.docs-top{margin-bottom:16px}
.doc-h{font-family:var(--f-display);font-stretch:110%;font-weight:720;font-size:15px;margin:18px 0 4px}.doc-h:first-child{margin-top:2px}
.docs{display:grid}
.doc-more>summary{cursor:pointer;list-style:revert}
.doc{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.docs>.doc:first-child{border-top:0}
.doc-ic{width:44px;height:44px;border-radius:var(--r);background:var(--sheet-2);color:var(--ink-2);display:grid;place-items:center;font-family:var(--f-display);font-stretch:112%;font-weight:760;font-size:10.5px;letter-spacing:.06em}
.doc-ic.pdf{background:var(--red-soft);color:var(--red)}.doc-ic.foto{background:var(--blue-soft);color:var(--blue)}.doc-ic.drive{background:var(--green-soft);color:var(--green)}.doc-ic.mail{background:var(--signal-soft);color:var(--signal-ink)}
.doc-main{min-width:0}
.doc-t{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:650;font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none;overflow-wrap:anywhere}.doc-t:hover{text-decoration:underline}
.doc-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--ink-3);font-size:12.5px;margin-top:3px}
.doc-side{display:flex;gap:8px;align-items:center}
.doc-ed{padding:4px 0 14px 56px;border-bottom:1px solid var(--line)}
@media (max-width:520px){.doc-ed{padding-left:0}}
.doc-add{display:grid;gap:10px}.doc-add .ask-row{display:flex;gap:8px;flex-wrap:wrap}.doc-add .inp{flex:1 1 160px}
.doc-soon{display:grid;gap:4px;margin-top:12px;font-size:13px}.doc-soon .lnk{text-align:left}
.ag-t{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0}
.ag-t .ag-s{flex:none}
.ag-t .lnk{font-weight:500;font-size:14px;text-align:left}
.ag.late .ag-d{color:var(--red);font-weight:650}
@media (max-width:520px){.week{grid-template-columns:minmax(0,1fr);gap:4px}}
.money{display:grid}
.m-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:10px 0;border-top:1px solid var(--line);align-items:baseline}
.money>.m-row:first-child{border-top:0;padding-top:2px}
.m-lab{font-size:13.5px;color:var(--ink-2)}
.m-val{font-family:var(--f-display);font-stretch:106%;font-weight:720;font-size:22px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.m-sub{grid-column:1/-1;font-size:12.5px;color:var(--ink-3)}
.mail{display:grid}
.mfilter{font-size:12.5px;color:var(--ink-3);margin:-4px 0 8px}
.ml{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid var(--line);align-items:start}
.mail>.ml:first-child{border-top:0;padding-top:2px}
.ml .dot{width:8px;height:8px;border-radius:50%;margin-top:7px}
.ml.unread .dot{background:var(--signal)}
.ml-main{min-width:0}
.ml-from{font-size:12.5px;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ml-subj{font-weight:620;display:block;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
a.ml-subj:hover{text-decoration:underline}
.ml-snip{font-size:13px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ml-side{display:grid;justify-items:end;gap:4px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:10px 0;border-top:1px solid var(--line);align-items:start}
.qs>.qrow:first-child{border-top:0;padding-top:2px}
.qrow p{margin:2px 0 0;font-size:13.5px;color:var(--ink-2)}
.q-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){.qrow{grid-template-columns:minmax(0,1fr)}.q-act{justify-content:flex-start}}
.strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.strip-f{appearance:none;text-align:left;border:0;border-left:1px solid var(--line);background:var(--sheet);padding:12px 14px 13px;cursor:pointer;display:grid;gap:3px;color:inherit;min-width:0;position:relative}
.strip-f:first-child{border-left:0}
.strip-f:hover{background:var(--paper)}
.strip-n{font-family:var(--f-num);font-stretch:var(--wide);font-weight:780;font-size:26px;line-height:1}
.strip-l{font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.25}
.strip-s{font-family:var(--f-num);font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.strip-f.nul .strip-n{color:var(--ink-3)}
@media (max-width:980px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}.strip-f:nth-child(5){border-left:0}.strip-f:nth-child(n+5){border-top:1px solid var(--line)}}
@media (max-width:520px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip-f{border-left:1px solid var(--line)!important;border-top:1px solid var(--line)}.strip-f:nth-child(odd){border-left:0!important}.strip-f:nth-child(-n+2){border-top:0}.strip-f:last-child:nth-child(odd){grid-column:1/-1}}
.strip-panel{margin-top:18px}

/* planbord */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .inp[type=search]{flex:1 1 240px;max-width:380px;padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636B70' stroke-width='1.75'%3E%3Cpath d='M4 10.5a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0-13 0zM15.3 15.3l5.2 5.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px 50%;background-size:18px}
.board-wrap{overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 10px;scrollbar-width:thin}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(248px,1fr);gap:14px;min-width:min-content;align-items:start}
.col-f{background:color-mix(in srgb,var(--sheet-2) 70%,var(--paper));border-radius:var(--r-m);padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.col-h{display:flex;align-items:center;gap:8px;padding:4px 4px 2px;flex-wrap:wrap}
.col-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
.fase-aanvraag .col-h::before{background:var(--signal)}
.fase-verstuurd .col-h::before{background:var(--blue)}
.fase-opdracht .col-h::before{background:var(--blue)}
.fase-uitvoering .col-h::before{background:var(--green)}
.fase-afronden .col-h::before{background:var(--signal)}
.fase-afgerond .col-h::before{background:var(--ink-3)}
.col-h b{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:15px}
.col-h .col-n{font:700 12px/20px var(--f-body);min-width:22px;text-align:center;padding:0 6px;border-radius:var(--r-pill);background:var(--sheet);color:var(--ink-2)}
.col-h .sum{margin-left:auto;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:650;font-size:13px;color:var(--ink-2)}
.col-empty{font-size:13px;color:var(--ink-3);padding:16px 10px;margin:0;border:1.5px dashed var(--line-2);border-radius:var(--r);text-align:center}
.kcard{appearance:none;text-align:left;width:100%;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px 13px;display:grid;gap:4px;cursor:pointer;color:inherit;box-shadow:var(--shadow-1);transition:border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.kcard:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.kcard:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.k-nr{font-family:var(--f-num);font-size:12.5px;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums}
.k-title{font-weight:680;font-size:15px;line-height:1.28}
.k-sub{font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:0 10px}
.k-amt{font-family:var(--f-num);font-stretch:104%;font-weight:720;font-variant-numeric:tabular-nums;font-size:16px;margin-top:2px}
.k-amt.est{color:var(--ink-3);font-weight:600;font-family:var(--f-body);font-stretch:100%;font-size:13.5px}
.k-amt small{font-family:var(--f-body);font-weight:600;font-size:11.5px;color:var(--ink-3)}
.k-next{display:grid;gap:5px;justify-items:start;font-size:13px;color:var(--ink-2);border-top:1px dashed var(--line-2);padding-top:8px;margin-top:4px}
.k-next span:first-child{min-width:0}
.k-flags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.k-flags:empty{display:none}
@media (max-width:760px){
  .board-wrap{overflow:visible;margin-inline:0;padding:0}
  .board{grid-auto-flow:row;grid-auto-columns:auto;min-width:0}
}
.newk{margin-bottom:16px}

/* 03-werkmap.css */
/* werkmap (klus) */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;animation:schil-in var(--dur-2) var(--ease)}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;width:min(720px,calc(100% - 16px));background:var(--sheet);z-index:41;display:flex;flex-direction:column;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;animation:dr-in var(--dur-2) var(--ease)}
@keyframes dr-in{from{transform:translateX(24px);opacity:0}}
.dr-head{padding:18px 22px 16px;border-bottom:1px solid var(--line);position:relative;background:var(--sheet)}
.dr-kicker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-right:52px;min-height:22px}
.dr-kicker .k-nr{font-size:13px}
.dr-kicker .k-amt{margin:0;font-size:15px}
.dr-head h2{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:24px;line-height:1.12;margin:6px 52px 6px 0;text-wrap:balance}
.dr-sub{margin:0;color:var(--ink-2);font-size:14px;display:flex;flex-wrap:wrap;gap:4px 18px}
.dr-sub>span{display:inline-flex;gap:6px;align-items:center;min-width:0}
.dr-sub .ic{width:16px;height:16px;color:var(--ink-3)}
.dr-close{position:absolute;top:14px;right:14px}
.dr-body{overflow-y:auto;overflow-x:hidden;padding:18px 22px calc(env(safe-area-inset-bottom,0px) + 48px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-content:start;overscroll-behavior:contain}
.dr-body>*{min-width:0}
.dr-body h3{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:16px;line-height:1.2;color:var(--ink);margin:0 0 10px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dr-body h3 .kp-som,.dr-body h3 small{font-family:var(--f-body);font-stretch:100%;font-weight:500;font-size:13px;color:var(--ink-3)}
@media (max-width:759px){
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;height:calc(100% - env(safe-area-inset-top,0px) - 8px);border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:0;animation:sheet-in var(--dur-2) var(--ease)}
  .dr-head{padding:16px 16px 14px}
  .dr-head::after{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line-2)}
  .dr-head h2{font-size:21px}
  .dr-body{padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 40px);gap:24px}
}
.stand-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 22px}
.stand-rij small:first-child{color:var(--ink-2)}
.stand-rij small:first-child b{font-weight:650;color:var(--ink)}
.stepper{display:flex;flex-wrap:wrap;gap:6px}
.step{appearance:none;border:1px solid var(--line-2);background:var(--sheet);padding:0 11px;min-height:32px;font:600 13px/1.1 var(--f-body);border-radius:var(--r);cursor:pointer;color:var(--ink-3)}
.step:hover{color:var(--ink);border-color:var(--ink-3)}
.step.past{color:var(--ink-2);background:var(--sheet-2);border-color:transparent}
.step.cur{background:var(--signal);border-color:var(--signal);color:var(--on-signal);font-weight:700}
.step.vv{margin-left:auto;border-style:dashed}
.step[disabled]{cursor:default}
.next-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.next-row .grow{flex:1 1 240px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 20px}
.fld{display:grid;gap:2px;min-width:0;align-content:start}
.fld.wide{grid-column:1/-1}
.fld label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;gap:6px;align-items:baseline}
.wkmini{font-weight:700;color:var(--signal-ink);letter-spacing:.04em}
.fi{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:5px 0 6px;border-radius:0;min-width:0;width:100%;min-height:34px;font-size:14.5px;color:var(--ink)}
.fi:hover{border-bottom-color:var(--ink-3)}
.fi:focus{outline:none;border-bottom:2px solid var(--signal);padding-bottom:5px}
.fi[disabled]{border-bottom-color:transparent;color:var(--ink)}
select.fi{cursor:pointer}
.fi.num{text-align:right}
textarea.fi{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;resize:vertical;min-height:120px;line-height:1.5}
textarea.fi:focus{border:1px solid var(--signal);outline:1px solid var(--signal);padding:8px 10px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl th{text-align:left;font-size:12.5px;color:var(--ink-3);font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--sheet-2);white-space:nowrap}
.tbl td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{background:var(--sheet-2);font-weight:600;border-top:1px solid var(--line);border-bottom:0}
.tbl-term{min-width:640px}
.tbl-term .fi{min-height:28px}
.w4{width:4.2em}.w8{width:8em}
.pill-sel{appearance:none;-webkit-appearance:none;border:0;border-radius:2px;padding:3px 24px 3px 8px;font-size:12.5px;font-weight:700;cursor:pointer;background-color:var(--sheet-2);color:var(--ink-2);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 8px) 55%;background-size:4px 4px;background-repeat:no-repeat;max-width:100%}
.pill-sel[disabled]{cursor:default;background-image:none;padding-right:8px}
.ts-betaald,.ds-in-orde,.ls-klant{background-color:var(--green-soft);color:var(--green)}
.ts-gefactureerd,.ds-gepland,.ls-benaderd{background-color:var(--blue-soft);color:var(--blue)}
.ds-actie,.ls-gesprek{background-color:var(--signal-soft);color:var(--signal-ink)}
.ls-aanvraag{background-color:var(--signal);color:var(--on-signal)}
.ds-ontbreekt{background-color:var(--red-soft);color:var(--red)}
.ds-nvt,.ls-afgewezen{color:var(--ink-3)}
.people{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.person{display:grid;gap:2px;align-content:start;min-width:0}
.person b{font-weight:650}
.person small{color:var(--ink-3);font-size:12.5px}
.contact{display:flex;gap:4px 8px;align-items:baseline;flex-wrap:wrap;font-size:13.5px;min-width:0}
.contact .val{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.copy{appearance:none;border:0;background:none;color:var(--ink-3);font-size:12px;font-weight:650;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.copy:hover{color:var(--ink)}
.links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.links li{display:flex;gap:8px;align-items:baseline;justify-content:space-between;min-width:0}
.links a{overflow-wrap:anywhere;min-width:0}
.link-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.warn-list{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
.log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13.5px}
.log li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;color:var(--ink-2)}
.log-d{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 04-acquisitie-relaties-bedrijf.css */
/* acquisitie */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fchip{appearance:none;border:1px solid var(--line-2);background:var(--sheet);padding:0 12px;min-height:32px;border-radius:var(--r-pill);font:600 13px/1 var(--f-body);cursor:pointer;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fchip:hover{border-color:var(--ink-3);color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fchip[aria-pressed="true"] b{color:inherit}
.fchip b{font-variant-numeric:tabular-nums;margin-left:5px;font-weight:700}
.acq-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:14px 0 16px}
.acq-help .panel{padding:12px 14px}
.acq-help ol,.acq-help ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px;font-size:14px}
.acq-help p{font-size:13px;color:var(--ink-3);margin:8px 0 0}
.leads .tbl{min-width:1120px}
.leads .tbl td{vertical-align:top;padding-block:8px}
.leads .tbl td.c-contact{min-width:250px}
.prio{font-family:var(--f-display);font-weight:800;font-stretch:112%;min-width:24px;height:24px;display:inline-grid;place-content:center;border-radius:2px;font-size:13px}
.prio-A{background:var(--signal);color:var(--on-signal)}
.prio-B{background:var(--sheet-2);color:var(--ink)}
.prio-C{border:1px solid var(--line-2);color:var(--ink-3)}
.lead-cards{display:none}
.lcard{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:12px;display:grid;gap:7px;min-width:0}
.lc-top{display:flex;gap:10px;align-items:flex-start}
.lc-top b{font-size:15px}
@media (max-width:860px){.leads .tbl-wrap{display:none}.lead-cards{display:grid;gap:10px}}

/* relaties */
.rel-sec{margin-bottom:22px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rcard{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;display:grid;gap:8px;align-content:start;min-width:0}
.rcard h3{margin:0;font-size:16px;font-weight:700}
.rcard .meta{font-size:13px;color:var(--ink-2);display:flex;gap:4px 12px;flex-wrap:wrap}
.rcard .note{font-size:13.5px;color:var(--ink-2);margin:0}
.rcard .person{padding-top:8px;border-top:1px solid var(--line)}
.rk{display:flex;gap:4px;flex-wrap:wrap}
@media (max-width:400px){.rel-grid{grid-template-columns:minmax(0,1fr)}}

/* bedrijf */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 20px}
.fact{display:grid;gap:2px;min-width:0;justify-items:start}
.fact .copy{justify-self:start;margin-top:2px}
.fact .lab{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.fact .val{font-weight:620;overflow-wrap:anywhere}
.dos-g{margin-top:18px}
.dos{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:6px 14px;padding:12px 6px;border-top:1px solid var(--line);align-items:start;border-radius:2px}
.dos-title{font-weight:650}
.dos-detail{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.dos-act{font-size:13.5px;margin-top:4px}
.dos-act b{color:var(--signal-ink)}
.dos .callout{margin-top:8px;padding:8px 10px}
.dos .links{margin-top:6px}
@media (max-width:640px){.dos{grid-template-columns:minmax(0,1fr)}}
.req{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:10px}
.req h4{margin:0 0 6px;font-size:14px}
.req ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}

/* werkwijze */
.stages{display:grid;gap:14px}
.stage{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.stage-n{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:36px;line-height:.9;color:var(--signal-ink)}
.stage h3{margin:0;font-family:var(--f-display);font-stretch:112%;font-weight:760;font-size:18px}
.stage .when{font-size:13.5px;color:var(--ink-3);margin:2px 0 12px}
.stage-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px}
.steps{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px}
.side-h{font-size:12.5px;font-weight:650;color:var(--ink-3);margin:0 0 6px}
.cmd{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--sheet-2);border-radius:var(--r);padding:6px 8px;margin-bottom:6px;min-width:0}
.cmd code{font-family:var(--f-mono);font-size:12.5px;overflow-wrap:anywhere;min-width:0}
.tpl{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:13.5px}
.tpl li{display:flex;gap:8px;align-items:baseline;justify-content:space-between}
.tag-nog{font-size:12.5px;font-weight:650;color:var(--red)}
@media (max-width:760px){.stage{grid-template-columns:minmax(0,1fr);gap:6px}.stage-cols{grid-template-columns:minmax(0,1fr)}}
.keep{margin-top:16px}
.keep ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px;font-size:14px}

/* quote, snelknoppen, dagindeling, businessplan */
.day{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.day>summary{font-size:13px;font-weight:500;color:var(--ink-3);gap:8px;min-height:28px}
.day>summary::before{color:var(--ink)}
.day>summary b{font-family:var(--f-display);font-stretch:110%;font-weight:740;font-size:14px;color:var(--ink)}
.day.over>summary span{color:var(--red);font-weight:650}
.day .tasks{margin-top:2px}
.capsel{display:inline-flex;gap:6px;align-items:center}
.capsel select{font:inherit;font-size:12.5px;padding:1px 4px;border:1px solid var(--line-2);border-radius:2px;background:var(--sheet);color:var(--ink)}
.dur{font-size:12px;color:var(--ink-3);white-space:nowrap}
.bar-p{height:8px;background:var(--sheet-2);border-radius:2px;overflow:hidden}
.bar-p i{display:block;height:100%;background:var(--signal)}
.plan-top{display:grid;gap:6px;margin-bottom:10px}
.plan-n{font-family:var(--f-display);font-stretch:110%;font-weight:760;font-size:20px}
.plan-n small{font-family:var(--f-body);font-stretch:100%;font-weight:500;font-size:13px;color:var(--ink-3)}
.pact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.pact-t{font-weight:650}
.pact-w{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.pact-n{font-size:13.5px;margin-top:6px}
.pact.done .pact-t{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pact details{grid-column:1/-1}
.check-list{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
.dc ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px}

/* 05-tools-formulieren.css */
/* tools en formulieren */
.seg{display:inline-flex;gap:2px;flex-wrap:wrap;margin:0 0 18px;padding:3px;background:var(--sheet-2);border-radius:calc(var(--r) + 3px);max-width:100%}
.seg .fchip{border:0;background:transparent;border-radius:var(--r);font:600 14px/1.1 var(--f-body);padding:0 14px;display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:36px;color:var(--ink-2)}
.seg .fchip:hover{color:var(--ink);background:color-mix(in srgb,var(--sheet) 50%,transparent)}
.seg .fchip[aria-pressed="true"]{background:var(--sheet);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
.seg .fchip .cnt{margin-left:0}
@media (max-width:520px){.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.seg .fchip{padding:0 6px;min-height:40px}}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
@media (max-width:920px){.tool-grid{grid-template-columns:minmax(0,1fr)}}
.ask textarea{width:100%;min-height:84px;resize:vertical;display:block}
.ask-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.ask-row select{flex:1 1 180px;max-width:340px}
.qa{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.qas>.qa:first-child{border-top:0;padding-top:2px}
.qa-q{font-weight:620;overflow-wrap:anywhere}
.qa-meta{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-3)}
.qa-a{background:var(--sheet-2);border-radius:var(--r);padding:10px 12px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.qa-a .who{display:block;font-size:12.5px;font-weight:650;color:var(--ink-3);margin-bottom:4px;white-space:normal}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ocard{appearance:none;text-align:left;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:12px;display:grid;gap:5px;align-content:start;cursor:pointer;color:inherit;min-width:0}
.ocard:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.ocard b{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.ocard .sm{color:var(--ink-2)}
.ed-head{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.ed-head .fi{flex:1 1 240px;font-family:var(--f-display);font-stretch:110%;font-weight:740;font-size:19px}
.ed{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.ed h3{font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:12.5px;color:var(--ink-2);margin:0 0 8px}
.ed textarea.fi,.bon-ed textarea.fi{min-height:72px}
.fld.q label{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ph{position:relative;display:grid;gap:4px;min-width:0;align-content:start}
.ph-img{appearance:none;border:1px solid var(--line);padding:0;border-radius:var(--r);overflow:hidden;background:var(--sheet-2);aspect-ratio:1/1;cursor:pointer;display:block;width:100%;max-width:100%}
.ph-img img{width:100%;height:100%;object-fit:cover;display:block}
a.ph-img{text-decoration:none}
.ph-pdf{display:grid;place-content:center;width:100%;height:100%;font-family:var(--f-display);font-weight:780;font-size:15px;color:var(--ink-2);text-decoration:none}
.ph .fi{font-size:12.5px;min-height:26px}
.files .ph .sm{overflow-wrap:anywhere;color:var(--ink-2)}
.ph-x{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:2px;border:0;background:rgba(35,40,43,.72);color:#FCFBF8;font-size:17px;line-height:1;cursor:pointer;display:grid;place-content:center}
.ph-x.sure{width:auto;padding:0 8px;font-size:12px;font-weight:700;background:var(--red);color:var(--paper)}
.up-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.sr:focus-visible+.btn{outline:2px solid var(--signal);outline-offset:2px}
label.btn{cursor:pointer}
.rows{display:grid;gap:8px}
.row2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 28px;gap:8px;align-items:center}
.row-x{appearance:none;border:0;background:none;color:var(--ink-3);font-size:19px;line-height:1;cursor:pointer;width:28px;height:28px;padding:0}
.row-x:hover{color:var(--red)}
.row2.keep{grid-template-columns:minmax(0,1fr) 84px 28px}
@media (max-width:520px){.row2:not(.keep){grid-template-columns:minmax(0,1fr) 28px}.row2:not(.keep)>:first-child{grid-column:1/-1}}
.nd{display:grid;grid-template-columns:18px minmax(0,1.25fr) minmax(0,1fr);gap:4px 8px;align-items:baseline;font-size:14px}
.nd .ok{color:var(--green);font-weight:800}.nd .no{color:var(--ink-3);font-weight:800}
@media (max-width:560px){.nd{grid-template-columns:18px minmax(0,1fr)}.nd .fi{grid-column:2}}
.ask-q{background:var(--signal-soft);border-radius:var(--r);padding:12px 14px;display:grid;gap:10px}
.ask-q p{margin:0;font-weight:620}
.need{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14px}
.need li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:baseline}
.need .ok{color:var(--green);font-weight:800}
.need .no{color:var(--red);font-weight:800}
.yn{display:flex;gap:4px;flex-wrap:wrap}
.lm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:9px 0;border-top:1px solid var(--line);align-items:center;font-size:14px}
.lms>.lm:first-child{border-top:0;padding-top:0}
@media (max-width:560px){.lm{grid-template-columns:minmax(0,1fr)}}
.bon{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:start}
.bons>.bon:first-child{border-top:0}
.bon-th{appearance:none;width:52px;height:52px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--sheet-2);padding:0;cursor:pointer;display:grid;place-content:center;font-size:11px;font-weight:750;color:var(--ink-3);text-decoration:none}
.bon-th img{width:52px;height:52px;object-fit:cover;display:block}
span.bon-th{cursor:default}
.bon-main{min-width:0;display:grid;gap:3px}
.bon-main b{overflow-wrap:anywhere}
.bon-amt{font-family:var(--f-display);font-stretch:106%;font-weight:720;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bon-amt small{display:block;font-family:var(--f-body);font-stretch:100%;font-weight:500;font-size:12.5px;color:var(--ink-3)}
.bon-ed{grid-column:1/-1;background:var(--sheet-2);border-radius:var(--r);padding:12px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;margin-bottom:14px}
.kpi{background:none;border-left:2px solid var(--line);border-radius:0;padding:2px 0 2px 14px;display:grid;gap:3px;min-width:0;align-content:start}
.kpi .lab{font-size:13px;font-weight:600;color:var(--ink-2)}
.kpi .val{font-family:var(--f-num);font-stretch:var(--wide);font-weight:760;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .sub{font-size:12.5px;color:var(--ink-3);line-height:1.35}
#view>.kpis{gap:12px;margin-bottom:18px}
#view>.kpis>.kpi{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;box-shadow:var(--shadow-1)}
#view>.kpis>.kpi.good{box-shadow:inset 3px 0 0 var(--green),var(--shadow-1)}
#view>.kpis>.kpi.bad{box-shadow:inset 3px 0 0 var(--red),var(--shadow-1)}
.kpi.good .val{color:var(--green)}
.kpi.good{border-left-color:var(--green)}
.kpi.bad{border-left-color:var(--red)}
.kpi.bad .val{color:var(--red)}
.dr-quick{display:flex;gap:6px;flex-wrap:wrap}
.meter{font-size:12.5px;color:var(--ink-3);margin:16px 0 0}
.busy{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--signal);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.88);display:grid;place-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:calc(100vh - 32px);display:block}
.lightbox .icon-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px}
.formcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:22px}
@media (max-width:520px){.formcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fcard{padding:12px}.fcard b{font-size:15px;font-stretch:100%;hyphens:auto;overflow-wrap:anywhere}.fcard span{font-size:12.5px}.fcard i{display:none}}
.fcard{appearance:none;text-align:left;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;display:grid;gap:4px;align-content:start;cursor:pointer;color:inherit;min-width:0;box-shadow:var(--shadow-1);transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.fcard>.ic{width:26px;height:26px;color:var(--ink);margin-bottom:6px}
.fcard:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.fcard[disabled]{cursor:default;opacity:.6}
.fcard b{font-family:var(--f-display);font-stretch:110%;font-weight:760;font-size:17px}
.fcard span{font-size:13px;color:var(--ink-2)}
.fcard i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:6px;padding-top:8px;border-top:1px dashed var(--line-2)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r-m);font-size:14.5px;font-weight:550;z-index:70;max-width:calc(100% - 32px);box-shadow:var(--shadow);animation:pop-in var(--dur-2) var(--ease)}
@media (max-width:759px){.toast{bottom:calc(env(safe-area-inset-bottom,0px) + 86px)}}
.state{padding:28px;text-align:left}
.state h2{font-family:var(--f-display);font-stretch:112%;margin:0 0 6px;font-size:18px}
.state p{margin:0;color:var(--ink-2);max-width:60ch}
@media (prefers-reduced-motion:reduce){*,*::before{transition:none!important;animation:none!important}}

.oc-kop{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.oc-kop .ic{width:18px;height:18px;color:var(--ink-3)}
.oc-d{margin-left:auto;font-weight:500;color:var(--ink-3)}

/* 06-geld.css */
/* geld: doorklikken, bonnen naar Jortt, betalingen */
.flag.ok{background:var(--green-soft);color:var(--green)}
.geld-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start}
.geld-grid>.col{display:grid;gap:16px;min-width:0}
@media (max-width:920px){.geld-grid{grid-template-columns:minmax(0,1fr)}}
.gk{display:grid;gap:12px}
.gk-nav{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.gk-nav h2.sec{margin:0}
.gk-count{font-size:13px;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gk-arrows{display:flex;gap:6px;margin-left:auto}
.gk-card{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--paper);padding:14px;display:grid;gap:12px;min-width:0;box-shadow:var(--shadow)}
.gk-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.gk-who{display:grid;gap:4px;min-width:0;justify-items:start}
.gk-who b{font-family:var(--f-display);font-stretch:106%;font-weight:740;font-size:19px;line-height:1.15;overflow-wrap:anywhere}
.gk-amt{font-family:var(--f-display);font-stretch:106%;font-weight:760;font-size:23px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}
.gk-amt.plus,.pay-amt.plus{color:var(--green)}
.gk-stand{margin:0;font-size:14.5px;color:var(--ink-2);max-width:64ch}
.gk-bon{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:8px;background:var(--sheet-2);border-radius:var(--r)}
.gk-bon-t{display:grid;gap:2px;min-width:0;font-size:13px}
.gk-bon-t b{overflow-wrap:anywhere}
.gk-links{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center;margin-top:2px}
.gk-opts{display:grid;gap:8px}
.opt{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;border:1px solid var(--line-2);background:var(--sheet);color:var(--ink);border-radius:var(--r-m);padding:10px 12px;min-height:50px;cursor:pointer;text-decoration:none;font:inherit}
.opt b{font-weight:650;font-size:15px;line-height:1.3}
.opt span{grid-column:1;font-size:12.5px;color:var(--ink-3);line-height:1.35}
.opt i{grid-column:2;grid-row:1/span 2;font-style:normal;color:var(--ink-3)}
.opt:hover{border-color:var(--ink-3)}
.opt.main{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt.main span,.opt.main i{color:inherit;opacity:.78}
.opt[disabled]{opacity:.5;cursor:default}
.gk-foot{margin:0}
.intro{margin:0 0 10px;color:var(--ink-2)}
.jq-go{margin:0 0 6px}
.err{margin:4px 0 0;color:var(--red)}
.pays{display:grid}
.pay-m{font-family:var(--f-display);font-stretch:108%;font-weight:650;font-size:12.5px;color:var(--ink-3);margin:14px 0 2px}
.pays>.pay-m:first-child{margin-top:6px}
.pay{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid var(--line);align-items:start}
.pay-m+.pay{border-top:0}
.pay-d{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
.pay-main{display:grid;gap:2px;min-width:0}
.pay-main b{font-weight:620;overflow-wrap:anywhere}
.pay-main .sm{overflow-wrap:anywhere}
.pay-amt{font-variant-numeric:tabular-nums;font-weight:680;white-space:nowrap;text-align:right;padding-top:1px}
.pay-sum{margin:12px 0 0}
.hoe{padding:12px 16px}
.hoe-l{margin:10px 0 2px;padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--ink-2);max-width:68ch}
.hoe-l b{color:var(--ink)}
@media (max-width:520px){.gk-top{grid-template-columns:minmax(0,1fr)}.gk-amt{font-size:21px}.pay{grid-template-columns:42px minmax(0,1fr) auto}}

/* 07-inkoop-cashflow.css */
/* inkoop, cashflow, onderaannemers, prijzen, garanties, omzet en marge */
.tip{position:fixed;z-index:80;max-width:280px;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:8px 10px;font-size:12.5px;line-height:1.35;pointer-events:none;box-shadow:var(--shadow);display:grid;gap:3px}
.tip-h{font-weight:650;opacity:.8}
.tip-r{display:flex;gap:8px;align-items:baseline}
.tip-r b{font-weight:720;font-variant-numeric:tabular-nums;white-space:nowrap}
.tip-r span{opacity:.75}
.tip-n{opacity:.8}
.cg{margin:2px 0 4px}
.cg-plot{position:relative;margin-left:46px}
.cg-g{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.cg-g.zero{border-top-color:var(--line-2)}
.cg-g span{position:absolute;right:100%;margin-right:7px;transform:translateY(-50%);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cg-area{fill:var(--blue);fill-opacity:.1;stroke:none}
.cg-line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cg-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--blue);border:2px solid var(--sheet);transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.cg-dot.bad{background:var(--red)}
.cg-lab{position:absolute;transform:translate(-50%,calc(-100% - 9px));font-size:12px;font-weight:680;color:var(--ink);white-space:nowrap;background:var(--sheet);padding:0 4px;border-radius:2px;pointer-events:none;font-variant-numeric:tabular-nums;z-index:1}
.cg-lab.r{transform:translate(calc(-100% + 6px),calc(-100% - 9px))}
.cg-lab.l{transform:translate(-6px,calc(-100% - 9px))}
.cg-lab.dn{transform:translate(-50%,9px)}
.cg-lab.r.dn{transform:translate(calc(-100% + 6px),9px)}
.cg-lab.l.dn{transform:translate(-6px,9px)}
.cg-hit{position:absolute;top:0;bottom:0;cursor:crosshair;z-index:2;outline:none}
.cg-hair{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-3);opacity:0;transform:translateX(-.5px)}
.cg-hdot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid var(--sheet);transform:translate(-50%,-50%);opacity:0}
.cg-hit:hover .cg-hair,.cg-hit:focus-visible .cg-hair{opacity:.55}
.cg-hit:hover .cg-hdot,.cg-hit:focus-visible .cg-hdot{opacity:1}
.cg-x{position:relative;height:20px;margin-left:46px;font-size:11px;color:var(--ink-3)}
.cg-x span{position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap}
.cg-x span.l{transform:none}
.cg-x span.r{transform:translateX(-100%)}
.cc .cg-plot{margin-left:46px}
.cc-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:0 4px}
.cc-g{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-radius:2px}
.cc-g.now{background:var(--sheet-2)}
.cc-b{width:min(18px,40%);border-radius:4px 4px 0 0;outline:none;cursor:default}
.cc-b.s1{background:var(--blue)}
.cc-b.s2{background:var(--ink-3)}
.cc-b.dim{opacity:.38}
.cc-b:hover{filter:brightness(1.12)}
.cc-b:focus-visible,.cg-hit:focus-visible{box-shadow:0 0 0 2px var(--signal)}
.cc-x{display:flex;gap:6px;padding:0 4px;margin-left:46px;margin-top:5px}
.cc-x span{flex:1 1 0;min-width:0;text-align:center;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.cc-x span.now{color:var(--ink);font-weight:680}
.cg-leg{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:0 0 10px}
.cg-leg span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.sw.s1,.sw.k1{background:var(--blue)}
.sw.s2,.sw.k3{background:var(--ink-3)}
.sw.k2{background:var(--signal)}
.sw.dim{opacity:.38}
.spr{display:flex;gap:2px;height:18px;border-radius:3px;overflow:hidden;margin:4px 0 10px}
.spr i{display:block;height:100%;min-width:3px;outline:none}
.spr i.s1{background:var(--blue)}
.spr i.s2{background:var(--signal)}
.spr i.s3{background:var(--ink-3)}
.spr i:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.spr-leg .sw.s2{background:var(--signal)}
.spr-leg .sw.s3{background:var(--ink-3)}
.spr-leg b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.m-val.bad{color:var(--red)}
.inks{display:grid}
.ink{border-top:1px solid var(--line);padding:10px 0;border-radius:2px}
.inks>.ink:first-child{border-top:0;padding-top:4px}
.ink-head{appearance:none;border:0;background:none;padding:0;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit}
.ink-st{font-size:11px;font-weight:750;letter-spacing:.03em;padding:2px 7px;border-radius:2px;white-space:nowrap;background:var(--sheet-2);color:var(--ink-2);margin-top:2px}
.ink-st.is-nodig{background:var(--signal-soft);color:var(--signal-ink)}
.ink-st.is-aangevraagd,.ink-st.is-offerte{background:var(--blue-soft);color:var(--blue)}
.ink-st.is-besteld{background:var(--ink);color:var(--paper)}
.ink-st.is-geleverd{background:var(--green-soft);color:var(--green)}
.ink-st.is-vervallen{text-decoration:line-through;opacity:.7}
.ink-main{display:grid;gap:2px;min-width:0}
.ink-main b{overflow-wrap:anywhere;font-weight:650}
.ink-amt{font-family:var(--f-display);font-stretch:106%;font-weight:720;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.ink-sub{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:6px}
.ink-ed,.pr-ed{margin-top:12px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.ink-ed h3,.pr-ed h3,.oa-ed h3{font-size:12.5px;font-weight:650;color:var(--ink-3);margin:16px 0 6px}
.ink-ed .log{margin-top:12px}
.ink-rg{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1fr) 28px;gap:8px;align-items:end}
.inkc-l{display:grid}
.inkc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.inkc-l>.inkc:first-child{border-top:0;padding-top:2px}
.inkc-m{display:grid;gap:3px;min-width:0}
.inkc-m .lnk{text-align:left;font-size:14px}
.inkc-s{display:flex;gap:4px 8px;flex-wrap:wrap;align-items:center}
.inkplan .ag{grid-template-columns:72px minmax(0,1fr)}
.cf-tools{display:flex;gap:8px 14px;flex-wrap:wrap;margin:0 0 12px}
.cf-buf{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cf-buf label{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.cf-buf .fi{width:110px}
.cf-wks{display:grid}
.cf-wk{border-top:1px solid var(--line)}
.cf-wks>.cf-wk:first-child{border-top:0}
.cf-wk>summary{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:9px 0;font-weight:500}
.cf-wk>summary b{font-weight:700}
.cf-wl{display:flex;gap:4px 8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.cf-wl small{color:var(--ink-3);font-size:12.5px}
.cf-io{display:flex;gap:8px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.cf-io .plus,.cf-b.plus{color:var(--green)}
.cf-s{font-family:var(--f-display);font-stretch:106%;font-weight:720;font-variant-numeric:tabular-nums;min-width:84px;text-align:right;white-space:nowrap}
.cf-s.bad{color:var(--red)}
.cf-its{display:grid;gap:5px;padding:0 0 10px}
.cf-it{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;font-size:13.5px;align-items:baseline}
.cf-d{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-t{min-width:0;overflow-wrap:anywhere}
.cf-t .lnk{font-weight:500;font-size:13.5px;text-align:left}
.cf-b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:620}
.cf-z{display:grid}
.cf-zr{display:grid;grid-template-columns:minmax(0,1fr) auto 150px;gap:6px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cf-z>.cf-zr:first-child{border-top:0}
.cf-zr .lnk{text-align:left}
.cfps{display:grid}
.cfp{padding:9px 0;border-top:1px solid var(--line)}
.cfps>.cfp:first-child{border-top:0;padding-top:2px}
.cfp-head{appearance:none;border:0;background:none;padding:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit}
.cfp .ink-sub{margin-top:4px}
.oa-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.oa-top h3{margin:0}
.rel-grid>.rcard.open{grid-column:1/-1}
.chk-row{display:flex;flex-wrap:wrap;gap:4px}
.chk-p{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:2px;background:var(--sheet-2);color:var(--ink-2);white-space:nowrap}
.chk-p i{font-style:normal}
.chk-p.is-ok{background:var(--green-soft);color:var(--green)}
.chk-p.is-bijna{background:var(--signal-soft);color:var(--signal-ink)}
.chk-p.is-mist,.chk-p.is-verlopen{background:var(--red-soft);color:var(--red)}
.oa-ed{border-top:1px solid var(--line);padding-top:4px;margin-top:4px}
.chip-x{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:2px;padding:0 0 0 7px;font-size:12px;font-weight:650;line-height:22px;color:var(--ink-2);max-width:100%}
.chip-x button{appearance:none;border:0;background:none;cursor:pointer;padding:0 7px;font-size:15px;line-height:1;color:var(--ink-3)}
.chip-x button:hover{color:var(--red)}
.pr-g+.pr-g{margin-top:6px}
.pr-gh{font-family:var(--f-display);font-stretch:112%;font-size:12.5px;font-weight:650;color:var(--ink-3);margin:14px 0 0}
.pr-g:first-child .pr-gh{margin-top:2px}
.pr{border-top:1px solid var(--line);padding:9px 0}
.pr-gh+.pr{border-top:0}
.pr-head{appearance:none;border:0;background:none;padding:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit}
.pr-main{display:grid;gap:2px;min-width:0}
.pr-main b{font-weight:640;overflow-wrap:anywhere}
.pr-amt{font-family:var(--f-display);font-stretch:106%;font-weight:740;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;display:grid;line-height:1.2}
.pr-amt small{font-family:var(--f-body);font-stretch:100%;font-weight:500;font-size:11.5px;color:var(--ink-3)}
.pr-sub{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px}
.pr-sub:empty{display:none}
.calc-rs{display:grid;gap:8px}
.calc-r{display:grid;grid-template-columns:minmax(0,1fr) 84px 38px 96px 28px;gap:8px;align-items:center}
.calc-r select{min-width:0;width:100%}
.calc-r .num{text-align:right}
.calc-eh{font-size:12.5px;color:var(--ink-3)}
.calc-t{font-variant-numeric:tabular-nums;text-align:right;font-weight:650;white-space:nowrap}
.gar-z{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.gar-z:first-of-type{border-top:0}
.gms{display:grid}
.gm{display:grid;gap:6px;padding:8px 0;border-top:1px solid var(--line)}
.gms>.gm:first-child{border-top:0}
.gm-r{display:grid;grid-template-columns:minmax(0,170px) auto 28px;gap:8px;align-items:center;justify-content:start}
.tbl-m td .up{color:var(--green);font-weight:650}
.tbl-m td .down{color:var(--red);font-weight:650}
@media (max-width:620px){
  .ink-rg{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}
  .ink-rg>:first-child{grid-column:1/-1}
  .calc-r{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 28px}
  .calc-r select{grid-column:1/4}
  .calc-r .row-x{grid-column:4;grid-row:1}
  .cf-zr{grid-template-columns:minmax(0,1fr) auto}
  .cf-zr input{grid-column:1/-1}
  .cf-wk>summary{grid-template-columns:8px minmax(0,1fr) auto}
  .cf-wk>summary::before{grid-row:1/3}
  .cf-io{grid-column:2;grid-row:2}
  .cf-s{grid-column:3;grid-row:1/3}
}
.seg .fchip{flex:0 0 auto}
.tbl .lnk{text-align:left}
.tbl-m .tm-k{min-width:170px}
@media (max-width:520px){.seg{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}.seg .fchip{white-space:normal;line-height:1.2;padding:7px 6px;text-align:center}}

/* 08-offertes-mail.css */
/* offertes en mail */
.off-sec{margin-bottom:18px}
.off-sec>summary{cursor:pointer;font-weight:650;font-size:14px;color:var(--ink-2);padding:6px 0}
.ofc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.dr-body .ofc-list{grid-template-columns:minmax(0,1fr)}
.ofc{appearance:none;text-align:left;border:1px solid var(--line);background:var(--sheet);border-radius:var(--r-m);padding:12px 14px;cursor:pointer;display:grid;gap:4px;color:inherit;font:inherit;min-width:0;align-content:start}
.ofc:hover{border-color:var(--ink-3)}
.ofc:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.ofc-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;min-width:0}
.ofc-top .k-nr{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofc-amt{font-family:var(--f-display);font-stretch:106%;font-weight:740;font-variant-numeric:tabular-nums;white-space:nowrap}
.ofc-t{font-weight:650;overflow-wrap:anywhere;line-height:1.3}
.ofc .k-flags{margin-top:4px}
.off-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.off-note{margin:0;font-size:13.5px;background:var(--sheet-2);border-radius:var(--r);padding:8px 10px;color:var(--ink-2)}
.off-ai,.mail-ai{background:var(--sheet-2);border-radius:var(--r);padding:12px;display:grid;gap:8px;min-width:0}
.off-ai label{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.off-ai .fi,.mail-ai .inp{background:var(--sheet)}
.off-ai .fi{border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px}
.off-ai .fi:focus{border:1px solid transparent;outline:2px solid var(--signal);outline-offset:-1px;padding-bottom:8px}
.off-diff{margin:0;padding-left:18px;display:grid;gap:3px;font-size:13.5px}
.mail-ai{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.mail-ai .inp{width:100%}
.orows{display:grid;gap:10px}
.orow{border:1px solid var(--line);border-radius:var(--r-m);padding:8px 10px 10px;display:grid;gap:6px;background:var(--sheet);min-width:0}
.orow-h{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px;align-items:center}
.orow-h .fi{font-weight:620}
.orow-h textarea.fi.oms{min-height:32px;resize:none;overflow:hidden;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0 5px;line-height:1.35;outline:none}
.orow-h textarea.fi.oms:focus{border:0;border-bottom:2px solid var(--signal);padding:4px 0 4px;outline:none}
.mail-dr .dr-head h2{font-size:19px}
.orow-n{font-family:var(--f-display);font-stretch:112%;font-weight:760;font-size:13px;color:var(--ink-3);text-align:center}
.orow-tools{display:flex;gap:0;align-items:center}
.orow-tools .row-x{font-size:16px}
.orow-tools .row-x[disabled]{opacity:.3;cursor:default}
.orow-tools .row-x[disabled]:hover{color:var(--ink-3)}
.orow>textarea.fi{margin-left:28px;width:calc(100% - 28px);font-size:13.5px;color:var(--ink-2);resize:vertical}
.orow-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.3fr);gap:10px;align-items:end;margin-left:28px}
.orow-g label{display:grid;gap:0;font-size:12.5px;font-weight:650;color:var(--ink-3);min-width:0}
.orow-g label .fi,.oterm-p .fi{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.off-dr textarea.fi{min-height:0}
.off-nr{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.orow-g .fi.eh{text-align:left}
.orow-t{display:grid;text-align:right;font-variant-numeric:tabular-nums;font-weight:680;white-space:nowrap;padding-bottom:6px}
.orow-t small{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.orow .confirm{margin-left:28px}
.oterm{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:6px 10px;align-items:end;padding:4px 0;border-top:1px solid var(--line)}
.orows>.oterm:first-child{border-top:0}
.oterm-p{display:grid;font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--ink-3)}
.oterm-p .fi{text-align:right}
.orow-g .fi.num{text-align:right}
.oterm-b{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:620;padding-bottom:6px}
.oterm .orow-tools{padding-bottom:2px}
.oterm .confirm{grid-column:1/-1}
.off-tot{margin-top:12px;border-top:2px solid var(--ink);padding-top:8px;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.off-tot>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.off-tot b{font-weight:650;white-space:nowrap}
.off-tot .end{border-top:1px solid var(--line);padding-top:6px;margin-top:2px;font-weight:700}
.off-tot .end b{font-family:var(--f-display);font-stretch:106%;font-weight:760;font-size:17px}
.confirm{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;justify-content:space-between;background:var(--red-soft);border-radius:var(--r);padding:8px 10px;font-size:13.5px;min-width:0}
.confirm>span:first-child{min-width:0;overflow-wrap:anywhere;flex:1 1 200px}
.mail-dr .fields.mail-f{grid-template-columns:minmax(0,1fr);gap:10px}
.mail-txt{font-size:15px;line-height:1.5;resize:vertical;min-height:220px}
.mail-sugg{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.mail-att{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mail-att li{display:flex;gap:8px;align-items:center;justify-content:space-between;min-width:0;padding:6px 8px;background:var(--sheet-2);border-radius:var(--r)}
.mail-att a{overflow-wrap:anywhere;min-width:0;font-weight:600}
.mail-send{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.mail-ok{background:var(--green-soft);border-radius:var(--r);padding:10px 12px;display:grid;gap:6px;font-size:14px}
.mail-ok b{color:var(--green)}
.mail-ctx>summary{cursor:pointer;font-size:13.5px;font-weight:620;color:var(--ink-2)}
.mail-ctx .qa-a{max-height:260px;overflow:auto}
.task-meta .lnk{font-size:12.5px}
.mail-bij{display:grid;gap:8px;min-width:0}
.mail-att li{justify-content:flex-start}
.mail-att li a{flex:1}
.mail-att .doc-ic,.pick-r .doc-ic{width:34px;height:34px;font-size:8.5px;letter-spacing:.04em;flex:none}
.mail-att .row-x{flex:none}
.mail-bij-k{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mail-bij-k .btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pick{border:1px solid var(--line-2);border-radius:var(--r);padding:10px;display:grid;gap:6px;max-height:440px;overflow:auto;min-width:0;overscroll-behavior:contain}
.pick .inp{width:100%}
.pick .ask-row{display:flex;gap:8px;align-items:center}
.pick .ask-row .inp{flex:1}
.pick-h{margin:6px 0 0;font-size:12.5px;font-weight:650;color:var(--ink-3)}
.pick-r{display:flex;gap:10px;align-items:center;min-width:0;padding:6px 0 2px;border-top:1px solid var(--line)}
.pick-h+.pick-r{border-top:0}
.pick-t{flex:1;min-width:0;display:grid;gap:1px}
.pick-t b{font-weight:600;font-size:14px;overflow-wrap:anywhere;line-height:1.3}
.pick-t small{color:var(--ink-3);font-size:12.5px;overflow-wrap:anywhere}
.pick-r .btn,.pick-r .flag{flex:none}
.confirm>.err{flex:1 0 100%;font-weight:600}
.mail-ai-info{margin:0;grid-column:1/-1;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
@media (max-width:620px){
  .orow-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-left:0}
  .orow>textarea.fi{margin-left:0;width:100%}
  .orow .confirm{margin-left:0}
  .oterm{grid-template-columns:56px minmax(0,1fr) auto}
  .oterm>.fi{grid-column:1/-1;grid-row:2}
  .oterm-b{grid-column:2;grid-row:1;text-align:right}
  .oterm .orow-tools{grid-column:3;grid-row:1}
  .mail-ai{grid-template-columns:minmax(0,1fr)}
}

.callout.warn{background:var(--red-soft)}

/* 09-inkoop-bestellijst.css */
/* versie 11: prijsaanvragen, bestellingen en materiaal per klus */
.callout.ok{background:var(--green-soft)}
.mat-dr .kpis{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 6px}
@media (min-width:700px){.mat-dr .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mat-rs{display:grid;gap:8px}
.mat-r{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);min-width:0}
.mat-in,.ink-rg2{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,.95fr) 28px;gap:6px;align-items:end}
.ink-rg2.g7{grid-template-columns:minmax(0,2.2fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,.7fr) 28px}
.mat-ro{display:grid;gap:2px;min-width:0}
.mat-st{display:grid;gap:4px;min-width:0}
.mat-st b.ok{color:var(--green)}
.mat-bar{display:flex;height:6px;border-radius:3px;background:var(--sheet-2);overflow:hidden}
.mat-bar i{display:block;height:100%}
.mat-bar i.g{background:var(--green)}
.mat-bar i.b{background:var(--ink-2)}
.mat-bar i.o{background:var(--blue);opacity:.45}
.mat-los{margin:0;padding-left:18px;font-size:13.5px;display:grid;gap:2px}
.mat-cf{padding:0}
.mat-cf .cf-it{grid-template-columns:52px minmax(0,1fr) auto 96px}
.mat-cf .cf-h{font-size:12.5px;color:var(--ink-3);font-weight:650}
.mat-cf .cf-h>span{font:inherit;color:inherit;letter-spacing:inherit}
.mat-cf .cf-s{font-size:13.5px}
.cf-s.bad,b.bad,.ink-geld.bad,.bo-kv dd.bad{color:var(--red)}
.bestel-ok{border:2px solid var(--ink);border-radius:var(--r);padding:12px;display:grid;gap:10px;background:var(--sheet);margin-top:10px;min-width:0}
.bestel-ok h3{margin:0;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
.bo-t{width:100%;border-collapse:collapse;font-size:13.5px}
.bo-t td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.bo-t td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bo-t small{display:block;color:var(--ink-3);font-size:12px}
.bo-kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 10px;margin:0;font-size:13.5px}
.bo-kv dt{color:var(--ink-3);font-size:12.5px;font-weight:650;padding-top:3px}
.bo-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.bo-kv dd.bad{font-weight:620}
.bo-let{margin:0;padding:8px 10px 8px 26px;background:var(--red-soft);border-radius:var(--r);font-size:13.5px;display:grid;gap:4px}
.bo-chk{font-weight:620;align-items:flex-start}
.bo-chk input{margin-top:3px}
.ink-hist{display:grid;gap:6px;margin:10px 0 4px}
.ink-bo{display:grid;gap:4px;padding:10px 12px;border-radius:var(--r);background:var(--green-soft)}
.ink-geld{font-size:13.5px;margin:8px 0 0;color:var(--ink-2);line-height:1.45}
.ink-snap{min-width:520px}
.ink-snap .fi{min-height:28px;max-width:96px;margin-left:auto;display:block}
.ink-ed .confirm{margin-top:8px}
.inks{grid-template-columns:minmax(0,1fr)}
.inks>.ink,.ink-ed,.ink-hist,.mat-dr .dr-body>section{min-width:0}
@media (max-width:620px){
  .mat-in,.ink-rg2{grid-template-columns:repeat(3,minmax(0,1fr)) 28px}
  .mat-in>:nth-child(1),.ink-rg2>:nth-child(1){grid-column:1/4;grid-row:1}
  .mat-in>:nth-child(6),.ink-rg2>:nth-child(6){grid-column:4;grid-row:1}
  .mat-in>:nth-child(5),.ink-rg2>:nth-child(5){grid-column:1/3}
  .ink-rg2.g7{grid-template-columns:repeat(3,minmax(0,1fr)) 28px}
  .ink-rg2.g7>:nth-child(6){grid-column:3;grid-row:auto}
  .ink-rg2.g7>:nth-child(7){grid-column:4;grid-row:1}
  .bo-kv{grid-template-columns:minmax(0,1fr)}
  .bo-kv dt{padding-top:6px}
  .mat-cf .cf-it{grid-template-columns:44px minmax(0,1fr) auto}
  .mat-cf .cf-s{grid-column:2/-1;grid-row:auto;text-align:right;font-size:12px;color:var(--ink-3)}
  .mat-cf .cf-h{display:none}
}

/* versie 12: bestellijst per klus en klaarzetten */
.bk-g{display:grid;gap:6px;margin:0 0 12px;min-width:0}
.bk-gh{display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap;padding-bottom:4px;border-bottom:1px solid var(--line)}
.bk-gh b{font-size:14.5px}
.bk-rs{display:grid;gap:6px;min-width:0}
.bk-r{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);min-width:0}
.bk-r.later{background:transparent;border-style:dashed}
.bk-n{display:grid;align-content:start;justify-items:end;text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.bk-n b{font-size:18px;line-height:1.1;font-weight:720}
.bk-n span{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.bk-m{display:grid;gap:3px;min-width:0}
.bk-o{font-weight:650;overflow-wrap:anywhere}
.bk-reken{font-size:12.5px;color:var(--ink-2);background:var(--sheet-2);border-radius:var(--r);padding:4px 7px;justify-self:start;max-width:100%;overflow-wrap:anywhere}
.bk-let{color:var(--red)}
.bk-r .mat-st{margin-top:3px}
.bk-r.bk-e{grid-template-columns:minmax(0,1fr);background:var(--sheet)}
.bk-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 28px;gap:6px 8px;align-items:end;min-width:0}
.bk-f{display:grid;gap:1px;min-width:0}
.bk-f small{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.bk-in .bk-oms{grid-column:1/5}
.bk-in>.row-x{grid-column:5;grid-row:1}
.bk-in .bk-lev{grid-column:span 2}
.bk-in .bk-later{align-self:center}
.bk-chk{font-size:13.5px;min-height:32px}
.bk-info{display:grid;gap:3px;margin-top:6px}
.bk-ai .bk-gt{margin:6px 0 0}
.bk-gt{font-size:12.5px;font-weight:650;color:var(--ink-3);margin:12px 0 2px}
.bk-gt .sm{text-transform:none;letter-spacing:0;font-weight:500}
.bk-delen{display:grid;gap:6px;min-width:0}
.bk-deel{display:grid;grid-template-columns:72px minmax(0,170px) minmax(0,1fr);gap:2px 12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);min-width:0}
.bk-deel .fi{min-height:30px}
.bk-deel-s{display:flex;gap:4px 12px;align-items:center;flex-wrap:wrap;min-width:0}
.bk-deel .chk{min-height:28px;font-size:12.5px}
.bk-plan{display:grid;gap:8px;background:var(--sheet-2);justify-content:stretch}
.bk-wz{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px}
.bk-wz ul{margin:2px 0 0;padding-left:16px;display:grid;gap:1px;color:var(--ink-2)}
.bk-h4{font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:12.5px;color:var(--ink-3);margin:16px 0 4px}
.bk-h4 .aside{font-weight:600}
.bk-klaar .callout{margin-top:10px}
.bk-klaar .callout .link-row{flex:1 0 100%}
@media (max-width:620px){
  .bk-r{grid-template-columns:52px minmax(0,1fr);gap:8px;padding:9px}
  .bk-n b{font-size:16px}
  .bk-r.bk-e{position:relative}
  .bk-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-in .bk-oms{grid-column:1/-1}
  .bk-in .bk-oms:first-child{padding-right:30px}
  .bk-in>.row-x{position:absolute;top:8px;right:6px}
  .bk-in .bk-lev{grid-column:1/-1}
  .bk-deel{grid-template-columns:64px minmax(0,1fr)}
  .bk-deel-s{grid-column:2}
}

/* 10-pdf-viewer.css */
/* versie 12.2: pdf bekijken in de cockpit */
html.pv-open,html.pv-open body{overflow:hidden}
.pv{position:fixed;inset:0;z-index:72;display:flex;flex-direction:column;background:var(--sheet-2)}
.pv-bar{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:calc(env(safe-area-inset-top,0px) + 10px) 60px 10px 16px;background:var(--sheet);border-bottom:1px solid var(--line);min-width:0}
.pv-t{display:grid;gap:1px;min-width:0;flex:1 1 220px}
.pv-t b{font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-t span{font-size:12.5px;color:var(--ink-3)}
.pv-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pv-tools .btn{min-width:34px;justify-content:center}
.pv-zl{min-width:46px;text-align:center;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pv-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px}
.pv-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 28px)}
.pv-pages{display:grid;gap:12px;width:max-content;max-width:none;margin:0 auto}
.pv-p{background:#fff;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.22);overflow:hidden}
.pv-p canvas{display:block}
.pv-st{display:grid;gap:12px;justify-items:center;max-width:420px;margin:28px auto;text-align:center;color:var(--ink-2)}
.pv-st:empty{display:none}
.pv-st p{margin:0}
.pv-perr{margin:0;padding:24px;color:var(--red)}
@media (max-width:620px){
  .pv-bar{padding-left:12px;padding-right:56px;gap:6px 10px}
  .pv-body{padding-left:8px;padding-right:8px}
}

/* 11-sturen.css */
/* versie 13: sturen op het businessplan */
.st-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.st-cols>.col>.panel{min-width:0}
@media (max-width:980px){.st-cols{grid-template-columns:minmax(0,1fr)}}
.st-ritme{margin:0 0 16px}
.st-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px;flex:none;background:var(--line-2)}
.st-dot.st-g{background:var(--green)}
.st-dot.st-o{background:var(--signal)}
.st-dot.st-r{background:var(--red)}
.st-f{display:inline-flex;align-items:center}
.st-f .st-dot{width:8px;height:8px;margin-right:5px;vertical-align:0}
.st-sigs{list-style:none;margin:0;padding:0;display:grid}
.st-sigs>.st-sig:first-child{border-top:0;padding-top:2px}
.st-sig{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.st-sig-i{width:10px;height:10px;border-radius:50%;background:var(--line-2);align-self:center}
.st-sig1 .st-sig-i{background:var(--red)}
.st-sig2 .st-sig-i{background:var(--signal)}
.st-sig3 .st-sig-i,.st-sig4 .st-sig-i{background:var(--blue)}
.st-sig .lnk{white-space:nowrap}
.st-mini .st-sigs{margin-bottom:2px}
.st-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.st-doelen{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-tile{gap:4px}
.st-bar{position:relative;height:10px;border-radius:3px;background:var(--sheet-2);overflow:hidden;margin:4px 0 2px}
.st-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--maat-t) calc(10% - 1px) 10%) bottom/100% 4px no-repeat}
.st-bar i{display:block;height:100%;background:var(--signal)}
.st-bar.st-bar-r i{background:var(--red)}
.st-bar.st-bar-g i{background:var(--green)}
.st-tbl{min-width:0}
.st-tbl td,.st-tbl th{white-space:normal}
.st-tbl td.num,.st-tbl th.num{white-space:nowrap}
.st-red{color:var(--red)}
.st-bew td:first-child{font-weight:600}
.st-kop{margin:0 0 10px}
.st-kop .st-dot{margin-right:0}
.st-kop-r{background:var(--red-soft)}
.st-kop-g{background:var(--green-soft)}
.st-kop-x{background:var(--sheet-2)}
/* regels met een kop en getallen: projecten, debiteuren, meerwerk, prestaties */
.st-rows{list-style:none;margin:0;padding:0}
.st-row{display:grid;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.st-row:first-child{border-top:0;padding-top:2px}
.st-row-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-start;justify-content:space-between}
.st-row-t{flex:1 1 220px;min-width:0;font-size:14px}
.st-row-t>.lnk{font-size:14px;text-align:left}
.st-row-t .flag{margin-left:4px;vertical-align:1px}
.st-row-t .muted.sm{margin-top:2px}
.st-row-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.st-kvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px 14px}
.st-kv{display:grid;gap:1px;min-width:0;align-content:start}
.st-kv>span{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.st-kv>b{font-weight:650;font-size:14.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.st-kv>b .flag{font-size:11px}
.st-kv>small{font-size:12px;color:var(--ink-3);line-height:1.35}
.st-kv.bad>b{color:var(--red)}
.st-kv.good>b{color:var(--green)}
.st-h3{font-size:13px;font-weight:700;margin:14px 0 6px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.st-pipe{display:grid;gap:4px}
.st-pipe-r{display:grid;grid-template-columns:minmax(0,1fr) auto 108px;gap:10px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.st-pipe-r .lnk{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pipe-r .num{font-variant-numeric:tabular-nums;font-size:13.5px}
.st-kans{min-height:30px;padding:2px 6px;font-size:13px}
.st-capf{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:10px 0 0;font-size:13.5px}
.st-inl{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}
.st-inl .fi{min-height:32px}
.st-cap{display:grid;gap:4px}
.st-cap-p{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:120px;align-items:end;border-bottom:1px solid var(--line-2)}
.st-cap-c{position:relative;height:100%;display:flex;align-items:flex-end;cursor:default;outline-offset:2px}
.st-cap-b{width:100%;background:var(--ink);border-radius:3px 3px 0 0;min-height:1px;opacity:.85}
.st-cap-b.over{background:var(--red)}
.st-cap-b.mid{background:var(--signal)}
.st-cap-b.laag{background:var(--line-2)}
.st-cap-l{position:absolute;left:-2px;right:-2px;border-top:2px dashed var(--ink)}
.st-cap-x{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;font-size:11px;color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.sw.st-sw-b{background:var(--ink);opacity:.85}
.sw.st-sw-l{background:transparent;border-top:2px dashed var(--ink);height:0;align-self:center}
.sw.st-sw-o{background:var(--red)}
/* algemene kosten per post */
.st-akl{display:grid;margin-top:6px}
.st-akr{display:grid;grid-template-columns:minmax(0,1fr) 7.5em;gap:12px;align-items:end;padding:6px 0}
.st-akr label{display:grid;gap:0;font-size:14px;min-width:0}
.st-akr label b{font-weight:600}
@media (max-width:620px){
  .st-cols{gap:12px}
  .st-cols>.col{gap:12px}
  .st-sig{grid-template-columns:10px minmax(0,1fr);padding:8px}
  .st-sig .lnk{grid-column:2;justify-self:start}
  .st-pipe-r{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .st-pipe-r .st-kans{grid-column:1/-1;justify-self:start;width:auto}
  .st-cap-p{height:96px;gap:2px}
  .st-cap-x{gap:2px;font-size:10px}
  .st-kvs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
  .st-doelen .kpi .lab{letter-spacing:.04em}
}
.spr i.s4,.spr-leg .sw.s4{background:var(--line-2)}

.st-laag{margin:-6px 0 18px}
.st-laag b{color:var(--ink)}

/* 12-offerte-stappen.css */
/* versie 14: offertes in stappen */
.drawer.o2 .dr-body{flex:1 1 auto;min-height:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
.drawer.o2 .dr-sub .lnk{font-size:14px;font-weight:500}
.o2-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--sheet);flex:none}
.o2-st{appearance:none;border:0;border-bottom:3px solid transparent;background:none;padding:9px 2px 7px;display:grid;justify-items:center;gap:3px;cursor:pointer;color:var(--ink-3);min-width:0}
.o2-st b{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-content:center;font-size:11.5px;font-weight:750;font-variant-numeric:tabular-nums}
.o2-st span{font-size:11.5px;font-weight:650;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.o2-st.ok b{background:var(--green-soft);border-color:transparent;color:var(--green)}
.o2-st.warn b{background:var(--signal-soft);border-color:transparent;color:var(--signal-ink)}
.o2-st.cur{color:var(--ink);border-bottom-color:var(--signal)}
.o2-st.cur b{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.o2-st:hover{color:var(--ink)}
.o2-foot{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 10px);border-top:1px solid var(--line);background:var(--sheet)}
.o2-foot-t{display:grid;justify-items:center;gap:1px;min-width:0}
.o2-foot-t small{font-size:12.5px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.o2-foot-t b{font-family:var(--f-display);font-stretch:106%;font-weight:760;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.o2-foot .btn{min-height:40px}
.o2-h3{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.o2-h3 span{font-family:var(--f-body);font-stretch:100%;font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--ink-3)}
.o2-note{display:grid;gap:6px;white-space:pre-wrap}
.o2-note p{margin:0}
.o2-undo{position:sticky;top:-16px;z-index:3;display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;background:var(--signal-soft);border-radius:var(--r);padding:8px 12px;font-size:13.5px;box-shadow:0 2px 8px -4px rgba(0,0,0,.3)}
/* posten als kaarten */
.o2-posts{display:grid;gap:8px}
.o2-post{border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);min-width:0}
.o2-post.open{border-color:var(--ink-3)}
.o2-post-h{appearance:none;border:0;background:none;width:100%;text-align:left;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 12px;cursor:pointer;color:inherit;font:inherit}
.o2-nr{font-family:var(--f-display);font-stretch:112%;font-weight:760;font-size:13px;color:var(--ink-3);text-align:center}
.o2-post-t{display:grid;gap:2px;min-width:0}
.o2-post-t b{font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.o2-post-t small{font-size:12.5px;color:var(--ink-3)}
.o2-post-p{font-variant-numeric:tabular-nums;font-weight:680;white-space:nowrap}
.o2-post-f{display:flex;gap:4px;flex-wrap:wrap;padding:0 12px 10px 46px}
.o2-ed{display:grid;gap:6px;padding:4px 12px 12px;border-top:1px solid var(--line)}
.o2-l{font-size:12.5px;font-weight:650;color:var(--ink-3);margin-top:6px}
.o2-l small{font-weight:500;letter-spacing:0;text-transform:none;font-size:11px}
.o2-ed textarea.fi.oms{min-height:32px;resize:none;overflow:hidden;font-weight:620;line-height:1.35}
.o2-ed textarea.fi{resize:vertical;min-height:0}
.o2-grid3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr);gap:10px;align-items:end}
.o2-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;align-items:end}
.o2-f{display:grid;gap:0;font-size:12.5px;font-weight:650;color:var(--ink-3);min-width:0}
.o2-f .fi{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.o2-f select.fi{font-size:14px}
.o2-f.o2-wide{grid-column:1/-1;margin-top:4px}
.o2-rtot{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-variant-numeric:tabular-nums;margin-top:4px}
.o2-rtot span{font-size:12.5px;color:var(--ink-3)}
.o2-rtot b{font-weight:700}
.o2-calc{background:var(--sheet-2);border-radius:var(--r);padding:10px 12px 12px;display:grid;gap:8px;margin-top:6px}
.o2-calc-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.o2-calc-h b{font-size:12.5px}
.o2-calc-h span{font-size:12px;color:var(--ink-3)}
.o2-calc .fi{background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r-m);padding:5px 8px;min-height:34px}
.o2-calc .fi:focus{border-color:transparent;outline:2px solid var(--signal);outline-offset:-1px;padding-bottom:5px}
.o2-calc-r{margin:0;font-size:13.5px;line-height:1.45}
.o2-ok{color:var(--green);font-weight:650}
.o2-bad{color:var(--red);font-weight:650}
.o2-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.o2-tools .o2-sp{flex:1}
.o2-add{margin-top:8px}
.o2-std{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-2);margin-top:10px}
.o2-std label{display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.o2-std .fi{width:5.5em;min-height:30px;padding:2px 4px;text-align:right}
.o2-kvs{margin-top:4px}
.o2-beg{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;margin-top:10px;padding:8px 10px;background:var(--sheet-2);border-radius:var(--r)}
.o2-beg p{flex:1 1 220px}
/* kiezen uit prijzen, sjablonen, foto's */
.o2-pick{border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px;margin-top:8px;display:grid;gap:8px;background:var(--sheet)}
.o2-pick-h{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.o2-pick-h span{display:grid;gap:2px}
.o2-pick-h small{font-size:12.5px;color:var(--ink-3)}
.o2-pk-g h4{margin:6px 0 4px;font-size:12.5px;font-weight:650;color:var(--ink-3)}
.o2-pk{appearance:none;border:0;border-top:1px solid var(--line);background:none;width:100%;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;cursor:pointer;color:inherit;font:inherit}
.o2-pk:hover .o2-pk-t b{text-decoration:underline;text-underline-offset:3px}
.o2-pk-t{display:grid;gap:1px;min-width:0}
.o2-pk-t b{font-weight:600;overflow-wrap:anywhere}
.o2-pk-t small{font-size:12px;color:var(--ink-3)}
.o2-pk-p{display:grid;justify-items:end;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.o2-pk-p small{font-size:11px;color:var(--ink-3);font-weight:500}
.o2-pk-d summary{cursor:pointer;font-weight:650;padding:6px 0}
.o2-fks{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.o2-fk{appearance:none;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet-2);padding:0 0 4px;display:grid;gap:3px;cursor:pointer;color:inherit;font:inherit;min-width:0;overflow:hidden}
.o2-fk:hover{border-color:var(--ink-3)}
.o2-fk-i{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--sheet-2)}
.o2-fk-i img{width:100%;height:100%;object-fit:cover;display:block}
.o2-fk small{font-size:11px;color:var(--ink-2);padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
/* standaardteksten als keuzes */
.o2-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.o2-chips-l{font-size:12px;color:var(--ink-3)}
.o2-chip{appearance:none;border:1px solid var(--line-2);background:transparent;border-radius:2px;padding:5px 10px;min-height:30px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-2);cursor:pointer;text-align:left;max-width:100%;overflow-wrap:anywhere}
.o2-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.o2-chip.o2-more{border-style:dashed}
.o2-ups{display:grid;gap:6px}
.o2-up{border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.o2-up.open{border-color:var(--ink-3)}
.o2-up-h{appearance:none;border:0;background:none;width:100%;text-align:left;display:grid;gap:2px;padding:8px 12px;cursor:pointer;color:inherit;font:inherit}
.o2-up-h b{font-weight:650}
.o2-up-h span{font-size:12.5px;color:var(--ink-3)}
.o2-som{margin:8px 0 0;font-size:13.5px;font-weight:600}
.o2-som.ok{color:var(--green)}
.o2-som.bad{color:var(--red)}
/* controle */
.o2-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.o2-checks li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:baseline;font-size:14px}
.o2-checks i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-content:center;font-size:12px;font-weight:800;background:var(--sheet-2);color:var(--ink-3);align-self:start}
.o2-checks li.ok i{background:var(--green-soft);color:var(--green)}
.o2-checks li.bad i{background:var(--red-soft);color:var(--red)}
.o2-checks li.bad span{font-weight:600}
.o2-checks .lnk{white-space:nowrap}
.o2-sjf{display:grid;gap:8px;margin-top:10px;padding:10px 12px;background:var(--sheet-2);border-radius:var(--r)}
.o2-log summary{cursor:pointer;font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:12.5px;color:var(--ink-2)}
.o2-log ol{margin-top:8px}
/* nieuwe offerte */
.o2-opts{display:grid;gap:8px}
.o2-opt{appearance:none;text-align:left;border:1px solid var(--line-2);background:var(--sheet);border-radius:var(--r-m);padding:12px 14px;display:grid;gap:3px;cursor:pointer;color:inherit;font:inherit;min-width:0}
.o2-opt:hover{border-color:var(--ink)}
.o2-opt[disabled]{opacity:.5;cursor:default}
.o2-opt b{font-weight:680;font-size:15px}
.o2-opt span{font-size:13px;color:var(--ink-2);line-height:1.4}
.o2-list{display:grid;gap:8px}
.o2-li{display:grid;gap:4px;justify-items:start}
.o2-li-b{appearance:none;text-align:left;border:1px solid var(--line);background:var(--sheet);border-radius:var(--r-m);padding:10px 12px;display:grid;gap:2px;cursor:pointer;color:inherit;font:inherit;width:100%;min-width:0}
.o2-li-b:hover{border-color:var(--ink-3)}
.o2-li-b b{font-weight:650;overflow-wrap:anywhere}
.o2-li-b span{font-size:12.5px;color:var(--ink-2)}
.o2-li-b small{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.o2-aant{display:grid;gap:6px}
.o2-aant-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.o2-aant-r>span:first-child{display:grid;gap:1px;min-width:0}
.o2-aant-r b{font-weight:600;overflow-wrap:anywhere}
.o2-aant-r small{font-size:12px;color:var(--ink-3)}
.o2-aant-i{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--ink-3)}
.o2-aant-i .inp{width:5.5em;text-align:right}
.o2-ta{width:100%;resize:vertical}
.o2-cpt{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:6px}
.o2-cpt-l{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px}
.o2-cpt-l li{display:flex;gap:10px;justify-content:space-between}
.o2-cpt-l li span{min-width:0}
.o2-cpt-l li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.o2-cpt-l small{color:var(--ink-3)}
.o2-cpt-t{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding-top:6px;font-weight:700;font-variant-numeric:tabular-nums}
.o2-vragen{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px}
@media (max-width:620px){
  .o2-nav{padding:0 4px}
  .o2-st{padding:8px 0 6px}
  .o2-st span{font-size:10.5px}
  .o2-foot{padding-left:12px;padding-right:12px;gap:8px}
  .o2-foot .btn{padding-left:10px;padding-right:10px}
  .o2-grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .o2-grid3 .o2-f:last-child{grid-column:1/-1}
  .o2-post-h{padding:10px}
  .o2-ed{padding:4px 10px 10px}
  .o2-post-f{padding-left:44px}
  .drawer.o2 .dr-body{padding-left:14px;padding-right:14px}
  .o2-foot{padding-left:14px;padding-right:14px}
}

/* 13-veiligheid-personeel.css */
/* versie 15: veiligheid (VCA*) en werkgeverszaken */
.vg-quick{margin-top:4px}
/* knoppen met een regel uitleg: icoon, titel en toelichting, rustig zoals de andere knoppen */
.quick.vg-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}
.qbtn{appearance:none;font:inherit;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px;align-items:center;text-align:left;padding:10px 12px;min-height:56px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--sheet);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-1);transition:border-color var(--dur-1) var(--ease)}
.qbtn .ic{grid-row:1/span 2;width:20px;height:20px;color:var(--ink-2)}
.qbtn b{font-weight:650;font-size:14px;line-height:1.25}
.qbtn span{grid-column:2;font-size:12.5px;line-height:1.3;color:var(--ink-3)}
.qbtn:hover{border-color:var(--ink-3)}
.vg-tip{margin-top:10px}
.vg-tip p,.vg-nood p{margin:0}
.vg-nood{background:var(--red-soft)}
.vg-aw{grid-template-columns:minmax(0,1fr) auto 28px}
@media (min-width:641px){.vg-dos .dos{grid-template-columns:120px minmax(0,1fr) auto}}
.vg-auto{font-size:12.5px;color:var(--signal-ink);font-weight:650;margin-top:2px}
.vg-mat.open{background:var(--sheet-2);margin:0 -8px;padding:10px 8px;border-radius:var(--r)}
.vg-mat .flag{vertical-align:1px}
.vg-ed{margin-top:10px;display:grid;gap:8px}
.vg-ed h3.st-h3{margin:6px 0 2px}
/* dagrapport: naam, uren en begin- en eindtijd */
.vg-pl{display:grid;grid-template-columns:minmax(0,1fr) 72px 28px;gap:6px 8px;align-items:center}
.vg-tijd{grid-column:1/-1;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;padding-left:2px}
.vg-t{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-3);font-weight:650}
.vg-t .fi{width:7em;min-height:30px;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
/* mandagenregister */
.md-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:10px}
.md-nav>div{display:grid;justify-items:center;gap:1px}
.md-k{padding:10px 0 4px;border-top:1px solid var(--line)}
.md-nav + .md-k{border-top:0;padding-top:0}
.md-k h3.st-h3{margin:0 0 6px}
.md-ps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.md-p{display:grid;gap:4px;padding:6px 0;border-top:1px solid var(--line)}
.md-n{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:baseline;min-width:0}
.md-d{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.md-d span{display:grid;justify-items:center;gap:1px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-3);padding:3px 0;border-radius:2px;background:var(--sheet-2)}
.md-d span.on{color:var(--ink);font-weight:650;background:var(--signal-soft)}
.md-d span i{font-style:normal;font-size:12.5px;font-weight:650;color:var(--ink-3)}
@media (max-width:620px){
  .vg-dos .dos{grid-template-columns:minmax(0,1fr) auto}
  .vg-dos .dos>div:first-child{grid-column:1/-1}
  .quick.vg-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qbtn{min-height:var(--tap)}
  .vg-pl{grid-template-columns:minmax(0,1fr) 64px 28px}
  .md-d span{font-size:11.5px}
}

/* 14-duidelijk-inkoop.css */
/* versie 16: duidelijk en open per klus */
.kp-som{font-family:var(--f-body);font-stretch:100%;font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--ink-3);margin-left:6px}
/* punten als rustige lijst met dunne lijnen (geen losse kaartjes) */
.kp-ps{display:grid;gap:0;border-top:1px solid var(--line)}
.kp-p{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;min-width:0}
.kp-p.open{box-shadow:inset 3px 0 0 var(--ink-3);background:color-mix(in srgb,var(--sheet-2) 45%,transparent)}
.kp-h{appearance:none;border:0;background:none;width:100%;text-align:left;display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;cursor:pointer;color:inherit;font:inherit}
.kp-dot{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:inline-block;flex:none}
.kp-dot.kp-duidelijk{background:var(--green)}
.kp-dot.kp-aanname{background:var(--signal)}
.kp-dot.kp-open{background:var(--red)}
.kp-t{display:grid;gap:1px;min-width:0}
.kp-t b{font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.kp-t span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-ed{display:grid;gap:4px;padding:2px 10px 10px;border-top:1px solid var(--line)}
.kp-ed textarea.fi{resize:vertical;min-height:0}
.kp-meta{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.kp-vs{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px}
.kp-vs li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px;align-items:start}
.kp-vs li>div{min-width:0;overflow-wrap:anywhere}
.kp-meta .o2-sp{flex:1}
.kp-vs .kp-dot{margin-top:5px}

/* versie 16.1: leverancier kiezen bij een bestelling */
.ink-levkies{display:grid;gap:4px;margin:2px 0 8px}
.ink-levkies .sm{margin:0}

/* 15-facturen-oplevering.css */
/* versie 17: factureren */
.fk-dr .kv{display:grid;gap:0;margin:0 0 4px}
.fk-dr .kv>div{display:flex;gap:10px;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);font-size:14px}
.fk-dr .kv span{color:var(--ink-3);flex:none}
.fk-dr .kv b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.o2-chip.on{border-color:var(--ink);color:var(--ink);background:var(--sheet-2)}
.o2-chip:disabled{opacity:.55;cursor:default}
.fk-dr .confirm{margin-left:0;display:grid;gap:6px}
.tbl-term td:last-child .lnk{white-space:nowrap}

/* versie 17: startklaar en opleverdossier */
.sk-ps .kp-dot.sk-nvt{background:var(--line-2)}
.sk-r.nvt .kp-t b{color:var(--ink-3);text-decoration:line-through}
.sk-acts{display:flex;gap:4px;align-items:center}
.sk-ed{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 10px 10px}
.sk-ed .fi{flex:1 1 160px;min-height:32px}
.sk-r{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;min-width:0}

/* 16-verkooplijn-contract.css */
/* versie 18: verkooplijn en contractcheck */
.vk-dr .dr-kicker .prio{margin:0 2px}
.vk-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vk-acts .btn{text-decoration:none}
.vk-stat{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.vk-stat .o2-l{margin:0}
.vk-contact{display:grid;gap:4px;margin-top:8px}
.vk-det summary{cursor:pointer;font-weight:650;font-size:14px}
.vk-script{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.45}
.vk-tds{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vk-td{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);padding:8px 10px}
.vk-td-t{display:grid;gap:1px;min-width:0}
.vk-td-t .lnk{text-align:left}
.vk-td .btn{text-decoration:none}
.vk-vandaag{margin-bottom:14px}
.vk-verlies{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.leads .tbl td .lnk{text-align:left;font-weight:700}
.lcard .lc-top .lnk{text-align:left;font-weight:700}
.ct-kies{display:grid;gap:6px}
.ct-rs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ct-r{display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px;align-items:start;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);padding:9px 10px}
.ct-r .kp-dot{margin-top:5px}
.ct-r.ct-ok{opacity:.75}
.ct-rt{display:grid;gap:3px;min-width:0}
.ct-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ct-adv{color:var(--ink);font-weight:600}
.kp-dot.ct-hoog{background:var(--red)}
.kp-dot.ct-middel{background:var(--signal)}
.kp-dot.ct-laag{background:var(--line-2)}

/* 17-weekplanning.css */
/* versie 19: weekplanning, weekrapport en nacalculatie */
.wp .md-nav{margin-bottom:8px}
/* weekplanning: rijen met een dunne lijn ertussen, datum links, het werk rechts; vandaag met de gele streep */
.wp-ds{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wp-d{display:grid;grid-template-columns:132px minmax(0,1fr);gap:2px 16px;padding:10px 0 10px 12px;border-bottom:1px solid var(--line);min-width:0}
.wp-d > *{grid-column:2;min-width:0}
.wp-d > .wp-h{grid-column:1;grid-row:1/span 4;display:grid;gap:2px;align-content:start}
.wp-d > .wp-ed{grid-column:1/-1}
.wp-d.we .wp-k,.wp-d.we .wp-dag b{color:var(--ink-3)}
.wp-d.voorbij{opacity:.62}
.wp-d.nu{box-shadow:inset 3px 0 0 var(--signal);background:color-mix(in srgb,var(--signal-soft) 40%,transparent)}
.wp-dag{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wp-weer{font-size:12.5px;color:var(--ink-3)}
.wp-plan{display:grid;gap:2px}
.wp-k{appearance:none;border:0;background:none;padding:0;text-align:left;font:inherit;font-weight:650;color:var(--ink);cursor:pointer;min-height:24px}
.wp-k.auto{font-weight:600;color:var(--ink-2)}
.wp-k.auto small{font-weight:500;color:var(--ink-3)}
.wp-k.leeg{color:var(--ink-3);font-weight:500}
.wp-k:hover{text-decoration:underline;text-underline-offset:3px}
.wp-items{margin:2px 0 0;padding-left:16px;font-size:13px;color:var(--ink-2);display:grid;gap:1px}
@media (max-width:560px){
  .wp-d{grid-template-columns:minmax(0,1fr);padding-left:10px}
  .wp-d > *,.wp-d > .wp-h{grid-column:1;grid-row:auto}
  .wp-d > .wp-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
}
.wp-ed{border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.nc-rs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.nc-r{border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);padding:8px 10px;display:grid;gap:6px;min-width:0}
.nc-t{display:grid;gap:1px}
.nc-u{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:start}
.nc-u .o2-l{grid-column:1/-1;margin:0}
.nc-u .fi{min-height:32px}
.nc-tot .st-kv b{font-size:13px}
.nc-r .btn{white-space:normal;text-align:left}
.nc-t b{overflow-wrap:anywhere}
.st-green{color:var(--green)}
.wp-cap{margin:4px 0 14px}


/* 18-inspreken-ploeg.css */
/* versie 20: inspreken, prijzen vergelijken, ploeg-modus */
.mic{appearance:none;border:1px solid var(--line-2);background:var(--sheet);border-radius:999px;min-width:34px;height:30px;padding:0 10px;font:inherit;font-size:13px;font-weight:650;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
.mic:hover{border-color:var(--ink-3);color:var(--ink)}
.mic .ic{width:16px;height:16px}
.mic.on{background:var(--red-soft);color:var(--red);border-color:var(--red)}
.mic-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:micblink 1s infinite}
@keyframes micblink{50%{opacity:.25}}
.fld-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fld-h label{flex:1 1 auto}
.sp-row{display:flex;gap:8px;align-items:center}
.sp-row .fi{flex:1 1 auto}
h3 .mic{margin-left:8px;vertical-align:middle;text-transform:none;letter-spacing:0;font-weight:650}
.pv-tbl{min-width:0}
.pv-tbl th,.pv-tbl td{vertical-align:top;padding:6px 8px}
.pv-tbl th:first-child,.pv-tbl td:first-child{min-width:150px;max-width:220px;position:sticky;left:0;z-index:1;background:var(--sheet);box-shadow:inset -1px 0 0 var(--line)}
.pv-tbl th:first-child{background:var(--sheet-2)}
.pv-tbl td .fi{min-width:84px}
.pv-tbl .pv-best{background:var(--green-soft)}
.pv-tbl td.pv-laag .fi{color:var(--green);font-weight:700}
.pv-tbl .pv-tot td{border-top:2px solid var(--line-2)}
.lms{display:grid;gap:6px}

/* Mijn account op de ploegpagina (52-ploeg-account.js) */
.pa .pa-acts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.pa .pa-acts .lnk.danger{margin-left:auto}
.pa .pa-sub{display:grid;gap:10px;margin-top:4px}
.pa .pa-gevaar{border-left:3px solid var(--red);padding-left:12px}
@media (max-width:759px){ .pa .pa-acts .btn{min-height:var(--tap)} .pa .pa-acts .lnk.danger{margin-left:0;min-height:var(--tap)} }

/* 19-meters.css */
/* meetinstrumenten: de meter met de gele naald, het instrumentenpaneel en de duimstok (zie 01-meters.js) */
.mtr{display:block;width:124px;height:75px;overflow:visible;--m-trk:var(--line);--m-tick:var(--ink-3);--m-naaf:var(--ink);--m-r:var(--red);--m-g:var(--green)}
.mtr .m-trk{fill:none;stroke:var(--m-trk);stroke-width:7;stroke-linecap:round}
.mtr .m-trk.leeg{stroke-dasharray:2 7;stroke-linecap:butt}
.mtr .m-zone{fill:none;stroke-width:7}
.mtr .m-zone.r{stroke:var(--m-r)}
.mtr .m-zone.g{stroke:var(--m-g)}
.mtr .m-tick{stroke:var(--m-tick);stroke-width:1.6;stroke-linecap:round}
.mtr .m-naald{stroke:var(--signal);stroke-width:5;stroke-linecap:round;transform-box:view-box;transform-origin:66px 70px;animation:m-zwaai 1.1s var(--ease) both}
.mtr .m-naald.rust{stroke:var(--m-tick);animation:none;opacity:.7}
.mtr .m-naaf{fill:var(--m-naaf)}
@keyframes m-zwaai{from{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.mtr .m-naald{animation:none}}

/* het instrumentenpaneel: donker in beide standen, zoals het dashboard van een bus */
.cluster{background:var(--panel);color:var(--panel-ink);border-radius:var(--r-m);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 18px;overflow:hidden}
.cluster .mtr{--m-trk:var(--panel-line);--m-tick:var(--panel-ink-2);--m-naaf:var(--panel-ink);--m-r:#F0786B;--m-g:#5FC08A}
.inst{padding:20px 22px 18px;display:grid;grid-template-columns:124px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:4px 18px;align-items:start;min-width:0}
.inst+.inst{border-left:1px solid var(--panel-line)}
.inst .mtr{grid-row:1/4;align-self:center}
.inst h2{margin:0;font:600 13.5px/1.25 var(--f-body);color:var(--panel-ink-2)}
.inst-v{font-family:var(--f-num);font-stretch:var(--wide);font-weight:780;font-size:31px;line-height:1.02;letter-spacing:-.01em;white-space:nowrap}
.inst-v small{font-size:15px;font-weight:650;color:var(--panel-ink-2);margin-left:4px;font-stretch:100%;letter-spacing:0}
.inst.leeg .inst-v{color:var(--panel-ink-2)}
.inst p{margin:0;font-size:12.5px;line-height:1.4;color:var(--panel-ink-2)}
.inst p b{color:var(--panel-ink);font-weight:600}
.inst p .lnk{color:var(--panel-ink);text-decoration-color:var(--panel-ink-2);font-size:12.5px}
@media (max-width:1180px) and (min-width:760px){.inst{grid-template-columns:96px minmax(0,1fr);padding:16px 16px 14px;gap:2px 12px}.inst .mtr{width:96px;height:58px}.inst-v{font-size:25px}}
@media (max-width:759px){
  .cluster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inst{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 6px 12px;gap:2px}
  .inst+.inst{border-left:1px solid var(--panel-line)}
  .inst .mtr{width:88px;height:53px;margin-bottom:6px;order:-1}
  .inst h2{font-size:11.5px;order:1;line-height:1.2}
  .inst-v{font-size:20px;order:0}
  .inst-v small{font-size:12px;margin-left:2px}
  .inst p{display:none}
}

/* de duimstok: voortgang met maatstreepjes */
:root{--maat-t:rgba(35,40,43,.5);--maat-t2:rgba(35,40,43,.68)}
.maat{position:relative;height:14px;border-radius:3px;background:var(--sheet-2);overflow:hidden}
.maat>i{position:absolute;inset:0 auto 0 0;background:var(--signal);border-radius:3px 0 0 3px;transition:width var(--dur-2) var(--ease)}
.maat::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--maat-t) calc(10% - 1px) 10%) bottom/100% 5px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 calc(50% - 1px),var(--maat-t2) calc(50% - 1px) 50%) bottom/100% 9px no-repeat}
.maat-groen>i{background:var(--green)}
.maat-rood>i{background:var(--red)}
.maat-blauw>i{background:var(--blue)}
.maat-inkt>i{background:var(--ink)}
.maat-s{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink);z-index:1}
.maat.dun{height:8px}.maat.dun::after{background:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--maat-t:rgba(236,238,235,.38);--maat-t2:rgba(236,238,235,.55)}}
:root[data-theme="dark"]{--maat-t:rgba(236,238,235,.38);--maat-t2:rgba(236,238,235,.55)}
.maat-rij{display:grid;gap:5px;min-width:0}
.maat-rij small{display:flex;justify-content:space-between;gap:8px;color:var(--ink-3);font-size:12.5px}
.maat-rij small b{color:var(--ink);font-weight:600}

/* 90-auth.css */
/* inlogscherm en instellingen (platform) */
#auth-root{position:fixed;inset:0;z-index:60;background:var(--paper);overflow:auto;-webkit-overflow-scrolling:touch}
#auth-root[hidden]{display:none}
body.au-open .app{visibility:hidden}
.au-wrap{min-height:100%;display:grid;grid-template-columns:minmax(380px,44%) minmax(0,1fr)}
.au-paneel{background:var(--panel);color:var(--panel-ink);display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:max(40px,env(safe-area-inset-top)) clamp(32px,5vw,72px) 40px;min-height:100vh;min-height:100dvh;position:sticky;top:0}
.au-brand{color:var(--panel-ink)}
.au-logo{display:block;width:min(300px,100%);height:auto}
.au-midden{display:grid;gap:14px;max-width:440px}
.au-meter{width:min(280px,72%);height:auto;overflow:visible;margin:0 0 12px -6px}
.au-meter .am-trk{fill:none;stroke:var(--panel-line);stroke-width:7;stroke-linecap:round}
.au-meter .am-g{fill:none;stroke:#5FC08A;stroke-width:7;stroke-linecap:round}
.au-meter .am-t line{stroke:var(--panel-ink-2);stroke-width:1.6;stroke-linecap:round}
.au-meter .am-naald{stroke:var(--signal);stroke-width:5;stroke-linecap:round;transform-box:view-box;transform-origin:66px 70px;transform:rotate(52deg);animation:au-zwaai 1.4s var(--ease) .15s both}
.au-meter .am-naaf{fill:var(--panel-ink)}
@keyframes au-zwaai{from{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.au-meter .am-naald{animation:none}}
.au-zin{margin:0;font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:clamp(30px,3.2vw,42px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
.au-onder{margin:0;color:var(--panel-ink-2);font-size:16px;line-height:1.5;max-width:40ch}
.au-klein{margin:0;color:var(--panel-ink-2);font-size:13px}
.au-hoofd{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(32px,env(safe-area-inset-top)) 24px 32px;min-width:0}
.au-card{width:100%;max-width:400px;position:relative}
/* taalkeuze (NL, EN, PL) voor werknemers: klein, rechtsboven in de kaart */
.au-taal{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin:0 0 6px;position:relative}
.au-taal-ic{width:18px;height:18px;flex:none;color:var(--ink-3);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0-17 0M3.5 12h17M12 3.5c-2.4 2.3-3.6 5.1-3.6 8.5s1.2 6.2 3.6 8.5M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0-17 0M3.5 12h17M12 3.5c-2.4 2.3-3.6 5.1-3.6 8.5s1.2 6.2 3.6 8.5M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5'/%3E%3C/svg%3E") center/contain no-repeat}
.au-taal-k{appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;font-weight:600;min-height:34px;padding:0 30px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--ink);cursor:pointer;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23656E73' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center/11px 8px}
.au-taal-k:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:759px){ .au-taal-k{min-height:42px;font-size:15px} }
.au-card h1{font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:30px;line-height:1.08;margin:0 0 16px}
.au-p{margin:-6px 0 18px;color:var(--ink-2);font-size:15px;line-height:1.5}
.au-fld{display:block;margin:0 0 14px}
.au-fld span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.au-fld input,.au-fld select{width:100%;box-sizing:border-box;font:inherit;font-size:16px;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--sheet);color:var(--ink)}
.au-fld select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.au-fld input:hover,.au-fld select:hover{border-color:var(--ink-3)}
.au-fld input:focus,.au-fld select:focus{outline:2px solid var(--signal);outline-offset:-1px;border-color:transparent}
.au-btn{width:100%;font:inherit;font-weight:700;font-size:16px;min-height:50px;padding:0 16px;border:0;border-radius:var(--r);background:var(--ink);color:var(--paper);cursor:pointer;margin-top:6px}
.au-btn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.au-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.au-btn:disabled{opacity:.6;cursor:default}
.au-btn.sec{background:var(--sheet-2);color:var(--ink)}
.au-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.au-lnk{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.au-lnk:hover{text-decoration-color:var(--ink)}
.au-fout{margin:14px 0 0;padding:12px 14px;background:var(--red-soft);color:var(--red);border-radius:var(--r);font-size:14px}
.au-info{margin:14px 0 0;padding:12px 14px;background:var(--green-soft);color:var(--green);border-radius:var(--r);font-size:14px}
.au-lijst,.au-twee{display:grid;gap:10px;margin:0 0 14px}
.au-twee{grid-template-columns:1fr 1fr}
@media (max-width:420px){.au-twee{grid-template-columns:1fr}}
.au-kaart{font:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--sheet);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-1)}
.au-kaart b{font-weight:700;font-size:15.5px}
.au-kaart span{font-size:13.5px;color:var(--ink-3)}
.au-kaart:hover{border-color:var(--ink-3)}
.au-voet{margin:28px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
.au-voet a{color:var(--ink);font-weight:600}
@media (max-width:860px){
  .au-wrap{display:block}
  .au-paneel{position:static;min-height:0;padding:max(18px,env(safe-area-inset-top)) 20px 20px;gap:0}
  .au-midden,.au-klein{display:none}
  .au-logo{width:210px}
  .au-hoofd{padding:28px 20px 32px;justify-content:flex-start}
  .au-card h1{font-size:26px}
}
/* instellingen */
.inst-top{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.inst-logo{width:96px;height:96px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r);background:#fff;flex:none}
.inst-logo.leeg{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font-family:var(--f-display);font-weight:800;font-size:30px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px}
.fgrid .fld.wide{grid-column:1/-1}
.fgrid .fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:4px}
.inst-leden{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.inst-leden li{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);font-size:14px}
.inst-code{font-family:var(--f-mono);font-size:22px;letter-spacing:.18em;padding:2px 6px;background:var(--signal-soft);color:var(--signal-ink);border-radius:var(--r)}

/* uren en km */
/* urencriterium als duimstok */
.uc-bar{position:relative;height:14px;border-radius:3px;background:var(--sheet-2);overflow:hidden;margin:8px 0 10px}
.uc-bar i{display:block;height:100%;background:var(--signal);border-radius:3px 0 0 3px}
.uc-bar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--maat-t,rgba(35,40,43,.5)) calc(10% - 1px) 10%) bottom/100% 5px no-repeat,repeating-linear-gradient(90deg,transparent 0 calc(50% - 1px),var(--maat-t2,rgba(35,40,43,.68)) calc(50% - 1px) 50%) bottom/100% 9px no-repeat}

.au-voet a{color:inherit}

/* Instellingen in groepen met een kleine inhoudsopgave (40-profiel.js: instGroepen) */
.inst-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.inst-groep{scroll-margin-top:20px}
.inst-groep + .inst-groep{margin-top:28px}
.inst-groep-t{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:var(--fs-xl);line-height:1.15;margin:0 0 12px;color:var(--ink)}
.inst-groep > .panel + .panel,.inst-groep > section + section{margin-top:14px}
@media (max-width:759px){
  .inst-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .inst-nav::-webkit-scrollbar{display:none}
  .inst-nav .fchip{flex:none}
  .inst-groep{scroll-margin-top:72px}
}

/* 91-abonnement.css */
/* abonnement en proefperiode */
.abo-bar{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin:0 0 14px;padding:9px 12px;border-radius:var(--r);background:var(--signal-soft);color:var(--ink);font-size:14px}
.abo-bar.rood{background:var(--red-soft)}
.abo-bar span{flex:1 1 260px;min-width:0}
.abo-status{margin:0 0 12px;font-size:15px}
.abo-plannen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:10px}
.abo-plan{appearance:none;text-align:left;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--sheet);color:var(--ink);cursor:pointer;font:inherit;min-width:0}
.abo-plan:hover{border-color:var(--ink-3)}
.abo-plan.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),var(--shadow-1);background:var(--sheet);position:relative}
.abo-plan.sel::after{content:"";position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.abo-plan[disabled]{cursor:default;opacity:.7}
.abo-plan b{font-family:var(--f-display);font-stretch:108%;font-size:16px;font-weight:780}
.abo-prijs{font-family:var(--f-num);font-stretch:var(--wide);font-size:24px;font-weight:780;font-variant-numeric:tabular-nums}
.abo-prijs small{font-family:var(--f-body);font-size:12.5px;font-weight:500;color:var(--ink-3)}
.abo-termijn{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.abo-termijn .fchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.abo-acties{margin-bottom:6px}
.abo-h3{font-family:var(--f-display);font-size:13px;margin:16px 0 8px;font-weight:650}
.abo-pill{display:inline-block;padding:1px 7px;border-radius:2px;font-size:12px;font-weight:650;background:var(--sheet-2);color:var(--ink-2);white-space:nowrap}
.abo-pill.ok{background:var(--green-soft);color:var(--green)}
.abo-pill.rood{background:var(--red-soft);color:var(--red)}
.abo-tbl{min-width:520px}
.abo .btn{white-space:normal;max-width:100%;text-align:left;line-height:1.25}
.abo-plan,.abo-status,.abo-bar span{overflow-wrap:anywhere}
.abo-termijn .fchip{white-space:normal}

/* feitenregel per pakket en het label bij Pro */
.abo-feiten{color:var(--ink-2)}
.abo-plan b .flag{margin-left:6px;vertical-align:2px;font-family:var(--f-body);font-stretch:100%}
/* het vinkje bij het gekozen pakket: in donker een donkere vink op de lichte cirkel (wit op wit zag je niet) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .abo-plan.sel::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2225' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] .abo-plan.sel::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2225' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}

/* 92-onboarding.css */
/* Startwizard, startklaar-lijst op Vandaag en het paneel Profiel en beveiliging. Alleen tokens uit 00-basis.css (docs/ontwerp.md). */
body.onb-open{overflow:hidden}

/* ---------- de wizard: telefoon eerst een volledig scherm, vanaf 760 px een kaart in het midden ---------- */
.onb{position:fixed;inset:0;z-index:50;display:flex;align-items:stretch;justify-content:center}
.onb-scrim{position:absolute;inset:0;background:var(--scrim)}
.onb-kaart{position:relative;display:flex;flex-direction:column;width:100%;max-height:100%;background:var(--sheet);color:var(--ink);box-shadow:var(--shadow);overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
@media (min-width:760px){
  .onb{align-items:center;padding:32px 16px}
  .onb-kaart{max-width:680px;max-height:min(880px,100%);border-radius:var(--r-l);border:1px solid var(--line);padding-top:0}
}
.onb-kop{padding:14px 20px 14px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.onb-kop-r{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onb-stapnr{font-weight:600;font-size:var(--fs-s);color:var(--ink-2)}
.onb-kop h2{font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:clamp(22px,5vw,27px);line-height:1.1;margin:6px 0 0;outline:none;text-wrap:balance}
.onb-lede{margin:0;color:var(--ink-2);max-width:62ch}
.onb-body{flex:1;overflow:auto;padding:18px 20px 28px;overscroll-behavior:contain}
.onb-body>p:first-child{margin-top:0}
.onb-voet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--sheet)}
.onb-voet-r{display:flex;align-items:center;gap:18px;margin-left:auto}
.onb .btn{min-height:var(--tap);padding-inline:16px;border-radius:var(--r)}
.onb .btn.sm{min-height:36px;padding-inline:12px}
.onb .btn.signal{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.onb .onb-later{min-height:36px}
.onb-fout{margin:14px 0 0}
.onb .fld label,.acc .fld label{display:block;font-size:var(--fs-s);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-bottom:4px}
.onb .fi{border:1px solid var(--line-2);border-radius:var(--r);background:var(--sheet);padding:10px 12px;min-height:var(--tap);font-size:16px}
.onb select.fi{padding-right:28px}
.onb .fi:focus,.acc .fi:focus{outline:2px solid var(--signal);outline-offset:-1px;border-color:transparent}
.onb .fgrid{gap:14px 16px}

/* de duimstok: voortgang met maatstreepjes, elke 10% een korte en elke 50% een lange */
.onb-maat{position:relative;height:12px;background:var(--sheet-2);border-radius:var(--r-xs);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.onb-maat i{position:absolute;left:0;top:0;bottom:0;background:var(--signal);transition:width var(--dur-2) var(--ease)}
.onb-maat::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;background:
  repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--ink) calc(10% - 1px) 10%) left bottom/100% 4px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 calc(50% - 1px),var(--ink) calc(50% - 1px) 50%) left bottom/100% 8px no-repeat}
@media (prefers-reduced-motion:reduce){.onb-maat i{transition:none}}

/* stap 1 */
.onb-vak{margin-top:16px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line)}
.onb-vak p{margin:0 0 6px}
.onb-lijst{margin:0 0 10px;padding-left:20px;display:grid;gap:4px}
/* stap 2 */
.onb-hints{margin:14px 0 0;padding:10px 14px 10px 30px;border-radius:var(--r);background:var(--signal-soft);color:var(--signal-ink);font-size:var(--fs-s);display:grid;gap:2px}
/* stap 3: het logo en een voorbeeld van de kop van een offerte (een document is altijd wit papier) */
.onb-logo{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.onb-logo-vb{width:112px;height:112px;border:1px dashed var(--line-2);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;background:#FFFFFF;overflow:hidden;flex:none;padding:8px}
.onb-logo-vb img{max-width:100%;max-height:100%;object-fit:contain}
.onb-logo-leeg{font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:30px;color:#636B70}
.onb-logo-leeg.klein{font-size:18px}
.onb-logo-r{flex:1 1 200px;min-width:0}
.onb-logo-r p{margin:8px 0 0}
.onb-vb{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-m);background:#FFFFFF;color:#23282B;padding:16px 18px;display:grid;grid-template-columns:minmax(56px,120px) minmax(0,1fr);gap:4px 16px;align-items:start;position:relative;box-shadow:var(--shadow-1)}
.onb-vb-l{height:56px;display:flex;align-items:center;justify-content:flex-start}
.onb-vb-l img{max-width:100%;max-height:100%;object-fit:contain}
.onb-vb-r{display:grid;gap:2px;font-size:var(--fs-s);color:#4D555A;min-width:0}
.onb-vb-r b{color:#23282B;font-size:var(--fs-m)}
.onb-vb-r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onb-vb-t{grid-column:1/-1;margin-top:10px;font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:var(--fs-xl);color:#23282B}
/* stap 4: prijzen */
.onb-kopregel{margin:0 0 4px;font-weight:600}
.onb-pr-acties{display:flex;gap:18px;margin:0 0 4px}
.onb-pr-g{font-family:var(--f-display);font-stretch:108%;font-weight:700;font-size:var(--fs-l);margin:18px 0 4px}
.onb-prs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.onb-pr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.onb-pr label{display:grid;gap:3px;cursor:pointer;min-width:0}
.onb-pr-t{font-weight:600;line-height:1.3}
.onb-pr-s{font-size:var(--fs-s);color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.onb-pr-p{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;text-align:right}
.onb-pr.al{color:var(--ink-3)}
.onb-pr .cb{margin-top:1px}
/* stap 5: keuzes */
.onb-groep{margin:0 0 24px}
.onb-groep:last-child{margin-bottom:0}
.onb-groep h3{font-size:var(--fs-m);font-weight:700;margin:0 0 10px}
.onb-keuzes{display:flex;flex-wrap:wrap;gap:8px}
.onb-keus{appearance:none;border:1px solid var(--line-2);background:var(--sheet);color:var(--ink);border-radius:var(--r);min-height:var(--tap);padding:8px 16px;font-weight:600;cursor:pointer;text-align:left;position:relative}
.onb-keus:hover{border-color:var(--ink-3)}
.onb-keus[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.onb-keus[aria-pressed="true"]::before{content:"✓";margin-right:8px;font-weight:800}
.onb-keuzes-uitleg .onb-keus[aria-pressed="true"]::before{content:none}
.onb-keuzes-uitleg .onb-keus[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:12px;font-weight:800;font-size:14px}
.onb-keuzes-uitleg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.onb-keuzes-uitleg .onb-keus{display:grid;gap:4px;align-content:start;padding:12px 30px 12px 14px}
.onb-keus b{font-family:var(--f-num);font-stretch:var(--wide);font-weight:800;font-size:var(--fs-l)}
.onb-keus span{font-weight:400;font-size:var(--fs-s);color:var(--ink-2);line-height:1.35}
.onb-check-r{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer}
.onb-uitleg{margin:8px 0 0 34px;max-width:62ch}
/* stap 7 en de startklaar-lijst */
.onb-punten{list-style:none;margin:0;padding:0}
.onb-punten li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.onb-punten li:last-child{border-bottom:0}
.onb-punten.compact li{grid-template-columns:24px minmax(0,1fr)}
.onb-vink{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1}
.onb-punten li.af .onb-vink{background:var(--green);border-color:var(--green);color:var(--sheet)}
.onb-punten li.af .onb-punt-t{color:var(--ink-3)}
.onb-punt-t{min-width:0}
.onb-punt-k{justify-self:end}
.onb-punt-uitleg{grid-column:2/-1}
.onb-punt-uitleg .onb-tel{margin-top:4px}
.onb-tel{margin-top:20px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line)}
.onb-tel h3{margin:0 0 6px;font-size:var(--fs-m);font-weight:700}
.onb-tel p{margin:6px 0}
.onb-check{margin-bottom:16px}
.onb-check-kop{display:grid;gap:10px;margin-bottom:4px}
.onb-check-kop h2.sec{margin:0}
.onb-check-voet{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.onb-check h2.sec,.onb-inst h2.sec,.acc h2.sec{font-size:var(--fs-l);letter-spacing:0;text-transform:none;font-stretch:108%}
.onb-inst p{margin:0 0 10px}
@media (max-width:560px){
  .onb-punten li{padding:8px 0;min-height:var(--tap)}
  .onb-punt-k .btn{min-height:36px}
  .onb-kop,.onb-body{padding-inline:16px}
  /* telefoon: de hoofdknop over de volle breedte, Terug en Overslaan eronder */
  .onb-voet{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding-inline:16px}
  .onb-voet-r{display:contents}
  .onb-voet-r>.btn{grid-column:1/-1;grid-row:1;width:100%;justify-content:center}
  .onb-voet>:first-child{grid-row:2;grid-column:1}
  .onb-voet-r>.lnk{grid-row:2;grid-column:2;justify-self:end;min-height:var(--tap)}
  /* laatste stap: de rondleiding bovenaan, Naar Vandaag of Open je klus eronder */
  .onb[data-stap="klaar"] .onb-voet-r>.btn:not(:last-child){grid-row:2}
  .onb[data-stap="klaar"] .onb-voet>span:first-child{display:none}
}
/* een melding (toast) niet over de knoppen van de wizard */
body.onb-open .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 132px)}
@media (min-width:561px){body.onb-open .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 88px)}}

/* ---------- Profiel en beveiliging ---------- */
.acc-blok{padding:16px 0;border-top:1px solid var(--line)}
.acc h2.sec+.acc-blok{border-top:0;padding-top:4px}
.acc-blok h3{font-size:var(--fs-m);font-weight:700;margin:0 0 10px}
.acc-blok>p{margin:0 0 8px}
.acc-rij{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 4px;min-width:0}
.acc-rij b{overflow-wrap:anywhere}
.acc-sub{margin-top:12px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line)}
.acc-sub .fld{margin-bottom:10px}
.acc .toolbar{margin:10px 0 0}
.acc .fi{border:1px solid var(--line-2);border-radius:var(--r);background:var(--sheet);padding:8px 10px;min-height:40px}
.acc-maat{margin:10px 0 0;max-width:420px}
.acc-maat.vol .onb-maat i{background:var(--red)}
.acc-let{color:var(--red)}
.acc-gevaar h3{color:var(--red)}
.acc-weg{background:var(--red-soft);border-color:transparent}
.acc-gevolg{margin:6px 0 12px;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-s)}
.acc .btn.danger{background:var(--red);border-color:var(--red);color:var(--sheet)}
.acc .btn.danger[disabled]{opacity:.45;cursor:default}
@media (max-width:560px){.acc .fi{font-size:16px}}

/* 93-portaal2.css */
/* Klantportaal 2 (portaal.html laadt /stijl.css): het bedrijf van de aannemer voorop, rustig en documentachtig, telefoon eerst.
   Alleen tokens; het accent (--pt-accent) is het signaalgeel, of de eigen kleur van de aannemer als die is ingesteld.
   Onderaan: de blokken in de cockpit zelf (factuurlade, offertelade, instellingen, Vandaag), met .p2-. */


.pt{--pt-accent:var(--signal);--pt-on-accent:var(--on-signal);min-height:100vh;margin:0}
.pt .btn.pt-cta{background:var(--pt-accent);border-color:var(--pt-accent);color:var(--pt-on-accent)}
.pt .btn{min-height:var(--tap);padding-inline:16px;font-size:var(--fs-m)}
.pt .btn.sm{min-height:36px;padding-inline:12px;font-size:var(--fs-s)}
.pt .btn .ic{width:18px;height:18px}
.pt-balk{height:4px;background:var(--pt-accent)}
.pt-vast{overflow:hidden}
.pt [hidden]{display:none !important}

/* kop: logo en naam van de aannemer */
.pt-kop{max-width:760px;margin:0 auto;padding:20px var(--gut) 0;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.pt-merk{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 240px}
.pt-logo{max-height:52px;max-width:200px;width:auto;object-fit:contain;display:block}
/* logo's zijn meestal voor een lichte achtergrond gemaakt: in de donkere stand op een wit plaatje */
@media (prefers-color-scheme:dark){.pt-logo{background:#FFFFFF;padding:6px 10px;border-radius:var(--r);max-height:60px;box-sizing:border-box}}
.pt-mono{width:48px;height:48px;border-radius:var(--r-m);background:var(--pt-accent);color:var(--pt-on-accent);display:grid;place-items:center;font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:18px;flex:none}
.pt-merk b{display:block;font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:var(--fs-l);line-height:1.15}
.pt-merk span{display:block;color:var(--ink-3);font-size:var(--fs-s);margin-top:2px}
/* het monogram is ook een span: niet de regel hierboven (grijs, klein, blok) maar het blokje in de accentkleur, licht en donker */
.pt-merk .pt-mono{display:grid;color:var(--pt-on-accent);font-size:18px;line-height:1;margin-top:0}
.pt-contact{display:flex;gap:8px;flex-wrap:wrap}

/* inhoud */
.pt-main{max-width:760px;margin:0 auto;padding:28px var(--gut) 48px;display:grid;gap:16px;outline:none}
.pt-hero{padding-bottom:4px}
.pt-hero h1{font-size:clamp(26px,5.6vw,36px);font-stretch:var(--wide);font-weight:800;line-height:1.06;margin:0 0 10px;text-wrap:balance}
.pt-lede{margin:0 0 6px;font-size:var(--fs-l);color:var(--ink);max-width:62ch}
.pt-meta{margin:0;color:var(--ink-2);max-width:68ch}
.pt-status{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pt .flag{font-size:var(--fs-s);padding:3px 9px;letter-spacing:0}
.pt-klaar p{flex-basis:100%}
.pt-brief{max-width:66ch}
.pt-brief p{margin:0 0 10px}
.pt-sec{padding:20px}
@media (max-width:560px){.pt-sec{padding:16px}}
.pt-h2{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:var(--fs-l);line-height:1.2;margin:0 0 12px}
.pt-sec h3{font-size:var(--fs-m);font-weight:700;margin:14px 0 4px}
.pt-sec p{margin:0 0 8px}
.pt-sec > :last-child{margin-bottom:0}
.pt-lijst{margin:0;padding-left:20px}
.pt-lijst li{margin:3px 0}
.pt-twee{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
@media (max-width:560px){.pt-twee{grid-template-columns:1fr}}
.pt-dl{margin:0;display:grid;gap:4px}
.pt-dl dt{font-weight:700;margin-top:8px}
.pt-dl dd{margin:0;color:var(--ink-2)}
.pt-afspraken > div h3{margin-top:0}
.pt-afspraken > div + div{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* het bedrag */
.pt-som{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px}
.pt-bedrag{display:grid;gap:4px}
.pt-bedrag small{color:var(--ink-2);font-size:var(--fs-s);font-weight:600}
.pt-bedrag b{font-family:var(--f-num);font-stretch:var(--wide);font-weight:780;font-size:clamp(32px,8vw,44px);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em}
.pt-acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* posten */
.pt-regels{list-style:none;margin:0;padding:0}
.pt-regel{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pt-regel:first-child{padding-top:2px}
.pt-regel b{font-weight:650}
.pt-regel p{margin:2px 0 0;color:var(--ink-2);font-size:var(--fs-s)}
.pt-regel small{display:block;color:var(--ink-3);font-size:var(--fs-s);margin-top:3px}
.pt-bd{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:650;text-align:right;white-space:nowrap}
.pt-tot{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:2px solid var(--ink)}
.pt-tot > div{display:flex;justify-content:space-between;gap:16px}
.pt-tot span{color:var(--ink-2)}
.pt-tot b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pt-tot .eind{margin-top:4px}
.pt-tot .eind span,.pt-tot .eind b{color:var(--ink);font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:var(--fs-l)}
.pt-noot{margin:8px 0 0}
.pt-termijnen{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:4px}
.pt-termijnen li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed var(--line)}
.pt-termijnen b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* akkoord en handtekening */
.pt-akkoord{scroll-margin-top:16px}
.pt-veld{display:grid;gap:6px;margin:14px 0 0}
.pt-veld > span{font-weight:600;font-size:var(--fs-s);color:var(--ink-2)}
.pt .inp{width:100%;font-size:16px;min-height:var(--tap);padding:10px 12px;background:var(--sheet)}
.pt textarea.inp{min-height:88px;resize:vertical}
.pt-teken{position:relative;height:190px;border:1px solid var(--line-2);border-radius:var(--r-m);background:#FFFFFF;touch-action:none;overflow:hidden}
.pt-teken canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.pt-teken::after{content:"";position:absolute;left:36px;right:20px;bottom:48px;border-bottom:1px solid #C2C7C2;pointer-events:none}
.pt-x{position:absolute;left:14px;bottom:44px;font-size:20px;line-height:1;color:#8B9397;pointer-events:none}
.pt-teken-acties{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;font-size:var(--fs-s);color:var(--ink-3)}
.pt-chk{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;font-size:var(--fs-m);cursor:pointer}
.pt-chk input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.pt-opm{margin-top:14px}
.pt-opm summary{font-size:var(--fs-s);color:var(--ink-2)}
.pt-msg{min-height:1.4em;margin:12px 0 10px;font-size:var(--fs-s);color:var(--ink-2)}
.pt-msg.err{color:var(--red);font-weight:600}
.pt-afwijs{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pt-afwijs .pt-acties{margin-top:12px}

/* betalen */
.pt-betaal-sec{display:grid;gap:18px}
.pt-betaal{display:grid;grid-template-columns:auto 1fr;gap:16px 24px;align-items:start}
@media (max-width:560px){.pt-betaal{grid-template-columns:1fr}}
.pt-som-rij{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.pt-qr{margin:0;display:grid;gap:8px;justify-items:start;max-width:200px}
.pt-qr-code{width:184px;padding:12px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-m)}
.pt-qr-code svg{display:block;width:100%;height:auto}
.pt-qr figcaption{font-size:var(--fs-xs);line-height:1.4;color:var(--ink-3)}
/* op de telefoon kun je je eigen scherm niet scannen: eerst de gegevens om over te nemen, de code eronder en kleiner */
@media (max-width:560px){.pt-qr{order:2;grid-template-columns:120px 1fr;max-width:none;align-items:center}.pt-qr-code{width:120px;padding:8px}.pt-overmaken{order:1}}
.pt-qr-uitleg{margin:0 0 10px;color:var(--ink-2)}
.pt-gegevens{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.pt-gegevens > div{display:grid;grid-template-columns:1fr auto;grid-template-areas:"dt knop" "dd knop";column-gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pt-gegevens dt{grid-area:dt;color:var(--ink-3);font-size:var(--fs-xs)}
.pt-gegevens dd{grid-area:dd;margin:0;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-kopieer{grid-area:knop;font-size:var(--fs-s);min-height:36px;padding:0 4px}
.pt-nog{margin-top:4px}
.pt-nog summary{font-size:var(--fs-s);color:var(--ink-2);margin-bottom:12px}
.pt-betaald{display:grid;gap:0;padding-top:14px;border-top:1px solid var(--line)}
.pt-betaald > p.sm{margin:0}

/* oplevering */
.pt-pv + .pt-pv{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.pt-pv header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.pt-pv header h3{margin:0;font-size:var(--fs-l)}
.pt-pv header p{margin:0;flex:1 1 200px}
.pt-punten{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.pt-punten li{display:grid;grid-template-columns:5.2em 1fr;gap:10px;align-items:baseline}
.pt-punt-st{justify-self:start;font-size:var(--fs-xs);font-weight:700;padding:1px 7px;border-radius:var(--r-xs);background:var(--signal-soft);color:var(--signal-ink);white-space:nowrap}
.pt-punten li.klaar .pt-punt-st{background:var(--green-soft);color:var(--green)}
.pt-punten li.klaar > span:last-child{color:var(--ink-2)}
.pt-opm-t{margin-top:12px !important;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink-2)}
.pt-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:620px){.pt-fotos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pt-foto{appearance:none;border:0;padding:0;margin:0;background:var(--sheet-2);border-radius:var(--r);overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;display:block}
.pt-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pt-foto:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.pt-licht{position:fixed;inset:0;z-index:60;background:rgba(12,14,16,.97);display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;padding:56px 12px 16px}
.pt-licht img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:var(--r)}
.pt-licht p{margin:10px 0 0;color:#ECEEEB;font-size:var(--fs-s);display:flex;gap:16px}
.pt-licht p span{color:#8B9397}
.pt-licht .icon-btn{position:fixed;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#FFFFFF;width:var(--tap);height:var(--tap);font-size:24px}
.pt-licht-x{top:calc(env(safe-area-inset-top,0px) + 10px);right:10px}
.pt-licht-v{left:10px;top:50%}
.pt-licht-n{right:10px;top:50%}
.pt-stukken{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pt-stukken a{display:inline-flex;gap:8px;align-items:center;font-size:var(--fs-m)}

/* voet */
.pt-voet{max-width:760px;margin:0 auto;padding:4px var(--gut) 40px;color:var(--ink-3);font-size:var(--fs-s)}
.pt-voet p{margin:0 0 4px;display:flex;flex-wrap:wrap;column-gap:16px}
.pt-voet p > span{white-space:nowrap}
.pt-via{margin-top:14px !important;font-size:var(--fs-xs)}

/* vaste balk onderin op de telefoon */
.pt-plak{display:none}
@media (max-width:640px){
  .pt-plak{display:flex;position:sticky;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:var(--sheet);border-top:1px solid var(--line);box-shadow:var(--shadow);transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
  .pt-plak.weg{transform:translateY(100%);opacity:0;pointer-events:none}
  .pt-plak small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
  .pt-plak b{font-family:var(--f-num);font-stretch:var(--wide);font-weight:780;font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
}
@media (prefers-reduced-motion:reduce){.pt-plak{transition:none}}
@media print{.pt-plak,.pt-contact,.pt-acties,.pt-akkoord{display:none}.pt-balk{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* ---------- in de cockpit ---------- */
.p2-blok{flex:1 0 100%;display:grid;gap:10px;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
.p2-blok h4{margin:0;font-size:var(--fs-s);font-weight:700}
.p2-blok p{margin:0}
.p2-blok > label.sm{color:var(--ink-2);font-weight:600;margin-bottom:-4px}
.p2-rij{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.p2-rij .inp{flex:1 1 220px;min-width:0}
.p2-log{margin:0;padding-left:18px;font-size:var(--fs-s);color:var(--ink-2)}
.p2-hand{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.p2-hand img{width:220px;max-width:100%;height:auto;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:4px}
.p2-hand small{display:block;color:var(--ink-3)}
@media (max-width:520px){.p2-hand{grid-template-columns:1fr}}
.p2-inst .fgrid{margin-top:8px}
.p2-voorbeeld{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.p2-voorbeeld iframe{display:block;width:100%;height:420px;border:0}

/* 94-aanvragen.css */
/* Aanvragen (Instellingen) en de taalkeuze van de ploegpagina. Alleen tokens; zie docs/ontwerp.md. */
.aanv-intro{margin:0 0 var(--s3);color:var(--ink-2);max-width:70ch}
.aanv-blok{display:grid;gap:6px;margin:0 0 var(--s3)}
.aanv-lab{font-size:var(--fs-s);font-weight:600;color:var(--ink-2)}
.aanv-rij{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;min-width:0}
.aanv-adres{font-weight:650;font-size:var(--fs-l);overflow-wrap:anywhere;background:var(--sheet-2);border-radius:var(--r);padding:6px 10px;min-width:0}
.aanv-manieren{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s2);max-width:72ch}
.aanv-manieren li{padding-left:var(--s4);position:relative;color:var(--ink-2);font-size:var(--fs-m);line-height:1.45}
.aanv-manieren li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:1px;background:var(--ink-3)}
.aanv-manieren b{color:var(--ink);font-weight:650}
.aanv-form{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s3) var(--s4);align-items:center;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
.aanv-qr{width:112px;height:112px;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.aanv-qr svg{width:100%;height:100%;display:block}
.aanv-form-t{display:grid;gap:6px;min-width:0}
.aanv-link{font-weight:600;overflow-wrap:anywhere;text-underline-offset:3px}
.aanv-form .toolbar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:4px}
@media (max-width:520px){.aanv-form{grid-template-columns:1fr}.aanv-qr{width:132px;height:132px}}
.aanv-noot{margin:var(--s2) 0 0}
.aanv-h3{font-family:var(--f-display);font-stretch:108%;font-weight:700;font-size:var(--fs-m);margin:var(--s5) 0 var(--s2)}
.aanv-lijst{list-style:none;margin:0;padding:0;display:grid}
.aanv-lijst li{display:grid;grid-template-columns:8.5em minmax(0,1fr) auto;gap:var(--s2) var(--s3);align-items:center;padding:var(--s2) 0;border-top:1px solid var(--line)}
.aanv-lijst li:first-child{border-top:0}
.aanv-d{font-size:var(--fs-s);color:var(--ink-3);font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.aanv-w{min-width:0;display:flex;flex-wrap:wrap;gap:2px var(--s2);align-items:baseline}
.aanv-w b{font-weight:650;overflow-wrap:anywhere}
.aanv-wie{color:var(--ink-3);font-size:var(--fs-s);flex-basis:100%}
@media (max-width:520px){.aanv-lijst li{grid-template-columns:minmax(0,1fr) auto}.aanv-d{grid-column:1/-1}}
.aanv-nieuw{margin-top:var(--s3)}
.aanv-taal-lijst{list-style:none;margin:0;padding:0;display:grid}
.aanv-taal-lijst li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);flex-wrap:wrap}
.aanv-taal-lijst li:first-child{border-top:0}
.aanv-taal-lijst select{min-width:12em}
/* taalkeuze op de ploegpagina */
.pt-kop-t{flex:1 1 auto;min-width:0}
.pt-rij{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.pt-taal{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;position:relative;color:var(--ink-3)}
.pt-taal .ic{width:20px;height:20px}
.pt-taal-k{appearance:none;-webkit-appearance:none;font:inherit;font-size:15px;font-weight:600;min-height:40px;max-width:46vw;padding:0 30px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--ink);cursor:pointer;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23656E73' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center/11px 8px}
.pt-taal-k:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* 95-jortt.css */
/* Boekhouding (Jortt) in Instellingen: stand van de koppeling, wat er gebeurt, acties. Alleen tokens en bestaande componenten. */
.jk{scroll-margin-top:120px} /* na terugkomen van Jortt scrolt de pagina hierheen; niet half achter een vaste kop */
.jk .jk-intro{margin:0 0 6px;color:var(--ink-2)}
.jk .kv{display:grid;gap:0;margin:2px 0 14px}
.jk .kv>div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.jk .kv span{color:var(--ink-3);flex:none}
.jk .kv b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.jk-wat{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:7px;max-width:70ch}
.jk-wat li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2)}
.jk-wat li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;background:var(--ink-3);border-radius:var(--r-xs)}
.jk .callout{margin:0 0 12px}
.jk .jk-noot{margin:10px 0 0;max-width:70ch}
.jk .jk-acties{align-items:center}
.jk .jk-acties .confirm{flex:1 1 100%}
.jk-binnenkort{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--ink-3)}
@media (max-width:759px){
  .jk .kv>div{flex-wrap:wrap}
  .jk .kv b{text-align:left}
  .jk .jk-acties .btn{min-height:var(--tap)}
}

/* 96-documenten.css */
/* Btw per post (21, 9, geen), de vraag naar de woning, de verdeling van een factuur en de huisstijl van je documenten. Alleen tokens. */
.btw-vraag{margin:0 0 12px}
.btw-woning{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.btw-woning .o2-chip{min-height:34px}
.btw-let{font-size:var(--fs-s);color:var(--red);flex:1 1 220px}
.btw-regel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line-2)}
.btw-regel-l{font-size:var(--fs-s);font-weight:600;color:var(--ink-2);margin-right:4px}
.btw-regel .o2-chip{min-width:52px;justify-content:center;text-align:center}
.btw-regel-h{flex:1 1 100%;color:var(--ink-3);font-size:var(--fs-xs);line-height:1.4}
.fk-verd{margin:6px 0 0}
.fk-verd .fields{margin-top:4px}
/* huisstijl van je documenten */
.pdfk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:16px 24px;align-items:start}
@media (max-width:720px){.pdfk-grid{grid-template-columns:minmax(0,1fr)}}
.pdfk-sws{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.pdfk-sw{appearance:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--sheet);color:var(--ink);font:inherit;font-size:var(--fs-s);font-weight:600;cursor:pointer;text-align:left}
.pdfk-sw:hover{border-color:var(--ink-3)}
.pdfk-sw.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pdfk-sw span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfk-sw i{width:18px;height:18px;border-radius:var(--r-xs);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pdfk-sw[disabled]{opacity:.55;cursor:default}
.pdfk-vb{background:var(--sheet-2);border:1px solid var(--line);border-radius:var(--r-m);padding:10px;display:flex;align-items:center;justify-content:center;min-height:200px}
.pdfk-vb img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:var(--shadow-1);background:#fff}
.pdfk-leeg{font-size:var(--fs-s);color:var(--ink-3)}

/* 97-ontwerp.css */
/* ---------- Tekenen en rekenen: het scherm Ontwerp (52-ontwerp.js) en het 3D-model in het klantportaal ---------- */
.ow-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:0 0 26px}
.ow-kaarten-2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ow-kaart{appearance:none;text-align:left;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto 1fr;gap:2px 14px;align-items:start;padding:14px 16px;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer;font:inherit;transition:border-color var(--dur-1) var(--ease)}
.ow-kaart:hover{border-color:var(--ink-3)}
.ow-kaart svg{grid-row:1/3;width:72px;height:45px;color:var(--ink-2)}
.ow-kaart svg .n{stroke:var(--signal)}
.ow-kaart b{font-family:var(--f-display);font-stretch:108%;font-weight:720;font-size:15px;line-height:1.2}
.ow-kaart span{color:var(--ink-3);font-size:13px;line-height:1.35}
.ow-lijst{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.ow-item{display:grid;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);box-shadow:var(--shadow-1)}
.ow-item-open{appearance:none;border:0;background:none;padding:0;text-align:left;display:grid;gap:2px;color:var(--ink);cursor:pointer;font:inherit}
.ow-item-open b{font-weight:700;font-size:15px}
.ow-item-open span{color:var(--ink-2);font-size:14px}
.ow-item-open small{color:var(--ink-3);font-size:13px}
.ow-item-meta{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.ow-voet{max-width:80ch;margin-top:18px}

/* editor */
.ow-kop{display:grid;gap:6px;align-items:start}
.ow-kop>.lnk{display:inline-flex;align-items:center;gap:4px;justify-self:start;text-decoration:none}
.ow-kop>.lnk .ic{width:18px;height:18px}
.ow-titel{margin:0}
.ow-naam{font:inherit;width:100%;max-width:640px;border-color:transparent;background:transparent;padding:0 8px;margin-left:-9px;min-height:44px}
.ow-naam:hover{border-color:var(--line-2)}
.ow-naam:focus{border-color:var(--ink-3);background:var(--sheet)}
.ow-pro{margin:0 0 16px}
.ow-pro p{flex:1 1 320px}
.ow-acties{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 14px}
.ow-acties .btn .ic{width:18px;height:18px}
.ow-kies{margin:-4px 0 14px;display:grid;gap:10px;background:var(--sheet-2);border-left-color:var(--ink-3)}
.ow-kies .ow-acties{margin:0}
.ow-deel-ber{margin:-6px 0 14px}
.ow-seg{margin-bottom:14px}
.ow-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start}
.ow-grid .ow-seg-invoer{display:none}
@media (min-width:900px){.ow-seg .ow-seg-invoer{display:none}}
@media (max-width:899px){
  .ow-grid{grid-template-columns:minmax(0,1fr)}
  .ow-grid[data-werk="invoer"] .ow-werk{display:none}
  .ow-grid:not([data-werk="invoer"]) .ow-invoer{display:none}
  .ow-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));width:100%}
  .ow-seg .fchip{padding:0 4px}
}
.ow-invoer{display:grid;gap:14px;align-content:start}
.ow-sj{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ow-sj b{font-weight:700}
.ow-sj-kies{display:flex;flex-wrap:wrap;gap:6px}
.ow-sj-kies p{flex:1 0 100%;margin:2px 0 0}
.ow-velden{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 14px}
.ow-veld>span:first-child{font-size:13px;font-weight:600;color:var(--ink-2)}
.ow-veld small{color:var(--ink-3);font-size:12px;line-height:1.35;margin-top:2px}
.ow-inp{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--sheet);min-height:38px}
.ow-inp:focus-within{border-color:var(--ink-3);outline:2px solid var(--signal);outline-offset:1px}
.ow-inp .inp{border:0;flex:1 1 auto;min-width:0;text-align:right;padding-right:6px;background:transparent;outline:none;-moz-appearance:textfield}
.ow-inp .inp::-webkit-outer-spin-button,.ow-inp .inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ow-inp em{font-style:normal;color:var(--ink-3);font-size:13px;padding:0 10px 0 2px;white-space:nowrap}
.ow-vink{display:flex;gap:10px;align-items:flex-start;font-size:14px;min-height:var(--tap);padding-top:10px;grid-column:1/-1}
.ow-vink input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.ow-vink small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.ow-aannames{border-top:1px solid var(--line);padding-top:12px}
.ow-aannames summary{cursor:pointer;font-weight:650;font-size:14px;min-height:var(--tap);display:flex;align-items:center}
.ow-aannames[open] summary{margin-bottom:8px}
.ow-aannames .btn{margin-top:12px}
.ow-ai{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.ow-ai .btn{justify-self:start}
.ow-ai p{margin:0}
.ow-ai .err{color:var(--red)}
.ow-toel{background:var(--blue-soft);border-left-color:var(--blue)}
.ow-toel p{flex:1 0 100%}
.ow-werk{min-width:0;display:grid;gap:12px;align-content:start}
.ow-werk>p{margin:0}
.ow-3d-balk{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ow-3d-balk .ow-vink{padding-top:0;align-items:center;min-height:36px}
.ow-3d{position:relative;height:clamp(320px,58vh,560px);border-radius:var(--r-m);overflow:hidden;background:var(--sheet-2);border:1px solid var(--line);touch-action:none}
.ow-3d canvas{display:block;width:100%;height:100%}
.ow-3d-laden{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:14px}
.ow-onzichtbaar{position:fixed;left:-10000px;top:0;width:640px;height:420px}
.ow-tek{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:6px;overflow:hidden}
.ow-tek .ow-svg{display:block;width:100%;height:auto}
.ow-disclaimer{background:var(--blue-soft);border-left-color:var(--blue)}
.ow-ond{display:grid;gap:12px}
.ow-ond-kop{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
.ow-ond-kop h3{margin:0;font-size:16px;font-weight:700}
.ow-keuze{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700;font-size:17px}
.ow-uc{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center}
.ow-uc .num{font-weight:700}
.ow-schema{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px}
.ow-schema-svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.ow-toetsen td small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px;line-height:1.35}
.ow-toetsen td.r,.ow-toetsen th.r{text-align:right;white-space:nowrap}
.ow-bel summary{cursor:pointer;font-weight:600;font-size:14px;min-height:36px;display:flex;align-items:center}
.ow-bel ul{margin:6px 0 8px;padding-left:18px;font-size:13.5px;display:grid;gap:3px}
.ow-bel p{margin:4px 0 0;color:var(--ink-2)}
.ow-off .ow-acties{margin:0}

/* materiaal: de lijst van het ontwerp */
.ow-mat-acties{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.ow-mat-acties .btn .ic{width:18px;height:18px}
.ow-mat-klus,.ow-mat-oud{display:grid;gap:10px;margin:0}
.ow-mat-klus p,.ow-mat-oud p{margin:0}
.ow-mat-klus .fld{max-width:420px}
.ow-mat-opbouw h3,.ow-mat-g h3{margin:0 0 8px;font-size:15px;font-weight:700;display:flex;gap:8px;align-items:baseline}
.ow-mat-opbouw ul{margin:0 0 8px;padding-left:18px;display:grid;gap:4px;font-size:14px;line-height:1.45}
.ow-mat-opbouw p{margin:0;color:var(--ink-2)}
.ow-mat-l{list-style:none;margin:0;padding:0}
.ow-mat-l li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.ow-mat-l li:first-child{border-top:0;padding-top:2px}
.ow-mat-n{text-align:right;white-space:nowrap}
.ow-mat-n b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}
.ow-mat-n small{color:var(--ink-3);font-size:12px}
.ow-mat-o{display:grid;gap:2px;min-width:0}
.ow-mat-o b{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.ow-mat-o small{color:var(--ink-3);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.ow-mat-o small.ow-mat-noot{color:var(--ink-2)}
@media (max-width:600px){.ow-mat-l li{grid-template-columns:62px minmax(0,1fr);gap:10px}.ow-mat-n b{font-size:15px}}

/* klantportaal: 3D-model van het ontwerp bij de offerte */
.pt-3d{position:relative;height:clamp(300px,52vh,480px);border-radius:var(--r-m);overflow:hidden;background:var(--sheet-2);border:1px solid var(--line);margin:12px 0 8px;touch-action:none}
.pt-3d canvas{display:block;width:100%;height:100%}
.pt-3d>p{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;text-align:center}
.pt-ontwerp .pt-acties{margin-top:12px}
@media (prefers-reduced-motion:reduce){.ow-kaart{transition:none}}
.ow-tek.zoom{overflow:auto;max-height:75vh}
.ow-tek.zoom .ow-svg{width:250%;max-width:none}
@media (max-width:600px){
  .ow-toetsen thead{display:none}
  .ow-toetsen tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .ow-toetsen td{padding:0;border:0}
  .ow-toetsen td:first-child{grid-column:1/-1;margin-bottom:4px}
  .ow-toetsen td.r{text-align:left;white-space:normal}
  .ow-toetsen td[data-l]::before{content:attr(data-l);display:block;font-family:var(--f-body);font-size:12px;color:var(--ink-3)}
}

/* rapport van een vak-sjabloon (vak.js): regels met label, waarde en uitleg; tabellen */
.ow-rap .ow-rap-regel{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:2px 14px;padding:7px 0;border-top:1px solid var(--line);align-items:baseline}
.ow-rap .ow-rap-regel:first-of-type{border-top:0}
.ow-rap .ow-rap-l{color:var(--ink-3);font-size:13.5px}
.ow-rap .ow-rap-regel b{font-size:14.5px;overflow-wrap:anywhere}
.ow-rap .ow-rap-regel small{grid-column:2;color:var(--ink-3);font-size:12.5px;line-height:1.4}
.ow-rap h3{margin:0 0 8px}
.ow-rap .ow-rap-tabel{margin-top:6px}
.ow-rap .ow-rap-bronnen{margin:0;padding-left:18px;font-size:13px;color:var(--ink-2)}
.ow-rap .ow-rap-bronnen li{margin:4px 0}
@media (max-width:640px){.ow-rap .ow-rap-regel{grid-template-columns:1fr}.ow-rap .ow-rap-regel small{grid-column:1}}
/* het pand bij een adres (BAG, 3DBAG): dakplan, zonnepanelen, warmteverlies */
.ow-pand{display:grid;gap:8px;border-bottom:1px solid var(--line);padding-bottom:14px}
.ow-pand-knop{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ow-pand p{margin:0}
.ow-pand .err{color:var(--red)}
.ow-pand-uit .lnk{margin-left:4px}

/* 98-tegoed.css */
/* Tegoed van de assistent (js/53-tegoed.js): de duimstok onder het vraagvak en in Instellingen › Assistent */
.tegoed{margin-top:12px}
.tegoed-ask{padding-top:12px;border-top:1px solid var(--line)}
.tegoed-zin{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0;font-size:var(--fs-s);line-height:1.45;color:var(--ink-2)}
.tegoed-zin span{flex:1 1 220px;min-width:0}
.tegoed-zin.let{color:var(--ink)}
.tegoed-zin .btn{flex:none}

/* 99-app.css */
/* ---------- De iOS-app (63-app.js, docs/app-ios.md): html.in-app ---------- */
html.in-app{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
html.in-app body{overscroll-behavior:none}
html.in-app .nav-i,html.in-app .btn{-webkit-touch-callout:none}
/* breed (iPad): een donkere strook onder de statusbalk, zodat klok en batterij op elke ondergrond leesbaar zijn (lichte tekst, 63-app.js) */
@media (min-width:760px){
  html.in-app body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--panel);z-index:95;pointer-events:none}
}
/* lades blijven onder de statusbalk en boven de thuisbalk (ook in de webapp op het beginscherm) */
@media (min-width:760px){
  .drawer{top:calc(8px + env(safe-area-inset-top,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}

/* 99-materiaal.css */
/* ---------- Tools › Materiaallijst (56-materiaallijst.js) ---------- */
.mt-lede{margin:0 0 var(--s4);max-width:62ch}
.mt-kop{align-items:flex-end;gap:var(--s3) var(--s4)}
.mt-kop h1{margin:2px 0 0}
.mt-terug{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s)}
.mt-terug svg{width:16px;height:16px}
.mt-kop-acties{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.mt-kop-acties .btn svg{width:18px;height:18px}

/* overzicht */
.mt-kaarten{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mt-kaart{width:100%;display:grid;grid-template-columns:1fr auto 20px;gap:4px var(--s3);align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);color:var(--ink);cursor:pointer;min-height:var(--tap)}
.mt-kaart:hover{border-color:var(--line-2)}
.mt-kaart:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mt-kaart-k{display:flex;flex-direction:column;min-width:0}
.mt-kaart-k b{font-family:var(--f-display);font-stretch:var(--wide);font-size:var(--fs-m)}
.mt-kaart-s{font-size:var(--fs-s);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.mt-kaart svg{width:18px;height:18px;color:var(--ink-3)}
.mt-nk{display:grid;grid-template-columns:2fr 1fr auto auto;gap:var(--s2);align-items:center}

/* uitleg en voorstel */
.mt-uitleg summary{cursor:pointer;list-style:none}
.mt-uitleg summary::-webkit-details-marker{display:none}
.mt-uitleg summary h2{display:flex;align-items:center;gap:8px;margin:0}
.mt-uitleg summary h2 svg{width:20px;height:20px;color:var(--signal-ink)}
.mt-uitleg[open] summary{margin-bottom:var(--s3)}
.mt-uitleg-veld{position:relative;display:flex;gap:var(--s2);align-items:flex-start}
.mt-uitleg-veld textarea{flex:1;min-height:104px;resize:vertical}
.mt-chk{margin:var(--s2) 0;font-size:var(--fs-s)}
.mt-fotos{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s2) 0}
.mt-foto{position:relative;display:inline-block}
.mt-foto img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.mt-foto .row-x{position:absolute;top:-8px;right:-8px;background:var(--sheet);border-radius:var(--r-pill)}
.mt-foto-knop,.mt-tek-knop{cursor:pointer}
.mt-foto-knop svg,.mt-tek-knop svg{width:16px;height:16px}
.mt-tek{border:1px dashed var(--line-2);border-radius:var(--r-m);padding:10px 12px;margin:var(--s3) 0}
.mt-tek-t{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.mt-tek-t b{display:inline-flex;gap:6px;align-items:center}
.mt-tek-t svg{width:18px;height:18px}
.mt-tek-l{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
.mt-tek-l li{display:flex;gap:var(--s3);align-items:center;justify-content:space-between}
.mt-ai-laden .busy{margin:0}
.mt-ai-lijst{list-style:none;margin:0 0 var(--s3);padding:0;border-top:1px solid var(--line)}
.mt-ai-lijst li{display:grid;grid-template-columns:76px 1fr;gap:var(--s3);padding:8px 0;border-bottom:1px solid var(--line)}
.mt-ai-n{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.mt-ai-n small{font-weight:400;color:var(--ink-2)}
.mt-ai-o{display:flex;flex-direction:column;gap:2px;min-width:0}
.mt-ai-o small{color:var(--ink-2);font-size:var(--fs-xs)}
.mt-ai-o .mt-ai-noot{color:var(--signal-ink)}
.mt-vragen{background:var(--signal-soft);border-radius:var(--r-m);padding:12px 14px;margin:0 0 var(--s3)}
.mt-vraag{display:grid;gap:4px;margin:0 0 var(--s2);font-size:var(--fs-s)}
.mt-vragen .btn svg{width:16px;height:16px}

/* nakijken */
.mt-nakijk{justify-content:space-between}
.mt-nakijk p{margin:0;flex:1 1 280px}

/* snel toevoegen */
.mt-snel{position:relative;margin:0 0 var(--s3)}
.mt-snel-rij{display:flex;gap:var(--s2)}
.mt-snel-rij .inp{flex:1;min-width:0}
.mt-snel-rij .btn svg{width:18px;height:18px}
.mt-sug{list-style:none;margin:4px 0 0;padding:4px;position:absolute;left:0;right:0;z-index:30;background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow);max-height:320px;overflow:auto}
.mt-sug button{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:0;background:none;color:var(--ink);border-radius:var(--r);cursor:pointer;min-height:var(--tap)}
.mt-sug li[aria-selected="true"] button,.mt-sug button:hover{background:var(--sheet-2)}
.mt-sug small{color:var(--ink-2);font-size:var(--fs-xs)}
.mt-snel-meer{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:var(--fs-s)}
.mt-plak,.mt-sj,.mt-kopie,.mt-cat{margin:0 0 var(--s3);border:1px solid var(--line)}
.mt-plak h3,.mt-sj h3,.mt-kopie h3,.mt-cat h3{margin:0 0 6px}
.mt-plak textarea{width:100%}
.mt-plak-vb{margin:var(--s2) 0;padding-left:18px;font-size:var(--fs-s)}
.mt-sj-l{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:6px}
.mt-sj-l li{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.mt-cat-l{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 10px}

/* de lijst */
.mt-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mt-r{display:grid;grid-template-columns:32px 84px 92px minmax(0,1fr) auto;gap:6px var(--s2);align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.mt-r.nakijk{background:linear-gradient(90deg,var(--signal-soft),transparent 60%)}
.mt-r.later .mt-oms input{color:var(--ink-2)}
.mt-r .fi{width:100%;min-width:0}
.mt-aantal .fi{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.mt-oms{display:flex;flex-direction:column;gap:4px;min-width:0}
.mt-sub{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.mt-sub small{color:var(--ink-2);font-size:var(--fs-xs);line-height:1.35}
.mt-sub small.mt-lev{color:var(--ink);font-weight:600}
.mt-sub .mt-ow{font-size:var(--fs-xs);min-height:0;padding:0}
.mt-sub small.mt-noot{color:var(--ink)}
.mt-vink{width:32px;height:var(--tap);display:grid;place-items:center;border:1.5px solid var(--signal);border-radius:var(--r);background:var(--sheet);color:var(--signal-ink);cursor:pointer}
.mt-vink svg{width:18px;height:18px}
.mt-vink:hover{background:var(--signal-soft)}
.mt-vink-leeg{width:32px}
.mt-acties{display:flex;gap:2px;align-items:center}
.mt-acties .icon-btn{width:36px;height:var(--tap)}
.mt-acties .icon-btn svg{width:18px;height:18px}
.mt-voet{margin-top:var(--s3)}
.mt-reken{grid-column:1/-1;background:var(--sheet-2);border-radius:var(--r-m);padding:12px 14px;margin:4px 0 2px}
.mt-rsoort{margin:0 0 8px}
.mt-stukken{display:grid;gap:6px;margin:0 0 6px}
.mt-stuk{display:flex;gap:6px;align-items:center}
.mt-stuk .fi{width:110px}
.mt-stuk .fi.mt-n{width:84px}
.mt-stuk span{color:var(--ink-3)}
.mt-rfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px var(--s3);margin:8px 0}
.mt-rf{display:grid;gap:4px;font-size:var(--fs-s);color:var(--ink-2)}
.mt-ruit{margin:6px 0 0;font-size:var(--fs-s)}
.mt-ruit b{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.mt-ruit.err{color:var(--red)}
.mt-dr-link{margin:0 0 var(--s4)}
.mt-dr-link p{margin:0;flex:1 1 260px}
.mt-dr-link .btn svg{width:16px;height:16px}

@media (max-width:640px){
  .mt-kop{flex-direction:column;align-items:stretch}
  .mt-kop-acties .btn{flex:1 1 auto}
  .mt-nk{grid-template-columns:1fr}
  /* op de telefoon: aantal, eenheid en de knoppen op één regel, de omschrijving eronder; omhoog en omlaag alleen op een groter scherm */
  .mt-r{grid-template-columns:32px 72px minmax(0,1fr) auto;grid-template-areas:"v a e x" "o o o o"}
  .mt-r>.mt-vink,.mt-r>.mt-vink-leeg{grid-area:v}
  .mt-r>.mt-aantal{grid-area:a}
  .mt-r>.mt-eh-w{grid-area:e}
  .mt-r>.mt-oms{grid-area:o}
  .mt-r>.mt-acties{grid-area:x;justify-content:flex-end}
  .mt-acties [data-act="mt-op"],.mt-acties [data-act="mt-neer"]{display:none}
  .mt-r>.mt-reken{grid-column:1/-1}
  .mt-ai-lijst li{grid-template-columns:64px 1fr}
  .mt-stuk .fi{width:auto;flex:1}
  .mt-stuk .fi.mt-n{width:70px;flex:0 0 70px}
}

/* 99-prijsaanvraag.css */
/* ---------- Prijs vragen bij meer leveranciers (57-prijsaanvraag.js) en de leverancierspagina (leverancier.html) ---------- */

/* de stappen in de lade */
.pa-stappen{list-style:none;margin:0 0 var(--s4);padding:0;display:flex;gap:6px;flex-wrap:wrap;counter-reset:pa}
.pa-stappen li{display:flex;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--ink-3);padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--sheet)}
.pa-stappen li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--sheet-2);color:var(--ink-2);font-weight:700;font-size:var(--fs-xs)}
.pa-stappen li span svg{width:14px;height:14px}
.pa-stappen li.nu{color:var(--ink);border-color:var(--ink);font-weight:650}
.pa-stappen li.nu span{background:var(--ink);color:var(--sheet)}
.pa-stappen li.klaar span{background:var(--green-soft);color:var(--green)}
.pa-stap h3{margin:0 0 6px}
.pa-voet{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);flex-wrap:wrap}
.pa-voet .btn svg{width:18px;height:18px}
.pa-dr .err{margin:var(--s3) 0 0}

/* stap 1: leveranciers */
.pa-levs{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:6px}
.pa-lev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:6px var(--s3);align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.pa-lev.aan{border-color:var(--ink-3);background:var(--sheet-2)}
.pa-lev-k{display:flex;gap:10px;align-items:center;cursor:pointer;min-height:var(--tap);min-width:0}
.pa-lev-k input{width:20px;height:20px;flex:none;accent-color:var(--ink)}
.pa-lev-k span{display:flex;flex-direction:column;min-width:0}
.pa-lev-k b{font-weight:650;overflow-wrap:anywhere}
.pa-lev-k small{color:var(--ink-3);font-size:var(--fs-xs)}
.pa-lev-m{width:100%;min-width:0}
.pa-nieuw{border:1px dashed var(--line-2);border-radius:var(--r-m);padding:12px 14px;margin:var(--s2) 0 0}
.pa-nieuw h4{margin:0 0 8px;font-size:var(--fs-m)}
.pa-nieuw .fields{margin:0}

/* stap 2: regels */
.pa-rgs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pa-rg{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pa-rg > input[type=checkbox]{width:20px;height:20px;accent-color:var(--ink);justify-self:center}
.pa-rg-c{display:grid;place-items:center;color:var(--green)}
.pa-rg-c svg{width:18px;height:18px}
.pa-rg-o{display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer}
.pa-rg-o b{font-weight:600;overflow-wrap:anywhere}
.pa-rg-o small{color:var(--ink-3);font-size:var(--fs-xs)}
.pa-rg:not(.aan) .pa-rg-o b{color:var(--ink-3);font-weight:500}
.pa-rg-n{display:flex;align-items:center;gap:6px}
.pa-rg-n .fi{width:84px;text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.pa-rg-n span{min-width:3.2em;font-size:var(--fs-s);color:var(--ink-2)}

/* stap 4: controleren */
.pa-dl{display:grid;grid-template-columns:auto 1fr;gap:8px var(--s3);margin:0 0 var(--s3)}
.pa-dl dt{color:var(--ink-3);font-size:var(--fs-s)}
.pa-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pa-aan{display:block}
.pa-aan b{font-weight:650}
.pa-mail-t{white-space:pre-wrap;font-family:var(--f-text,inherit);font-size:var(--fs-s);line-height:1.5;background:var(--sheet-2);border-radius:var(--r-m);padding:12px 14px;margin:8px 0 0;overflow-wrap:anywhere}
.pa-voortgang{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:6px}
.pa-voortgang li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.pa-klaar p{flex-basis:100%}

/* onder de materiaallijst */
.pa-stand{margin-top:var(--s4)}
.pa-st-l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.pa-st-l > li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s3);align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.pa-st-k{display:flex;flex-direction:column;min-width:0}
.pa-st-k b{font-family:var(--f-display);font-stretch:var(--wide)}
.pa-st-levs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.pa-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);padding:2px 4px 2px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--sheet-2)}
.pa-chip b{font-weight:600}
.pa-st-a{grid-column:2;grid-row:1;display:flex;gap:var(--s3);align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* in de bestelling */
.pa-panel{margin:var(--s3) 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.pa-h{margin:0 0 8px}
.pa-lv-l{list-style:none;margin:0;padding:0;display:grid}
.pa-lv-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s3);align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pa-lv-r > div{display:flex;flex-direction:column;min-width:0}
.pa-lv-r small{color:var(--ink-3);font-size:var(--fs-xs);overflow-wrap:anywhere}
.pa-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:var(--fs-s)}
.pa-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s2);margin:var(--s3) 0}
.pa-kaart{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet)}
.pa-kaart.best{border-color:var(--green)}
.pa-kaart.gekozen{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pa-kaart-k{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.pa-kaart-k b{font-weight:700}
.pa-kaart-t span{display:block;font-family:var(--f-num);font-stretch:var(--wide);font-weight:780;font-size:var(--fs-xl);font-variant-numeric:tabular-nums;line-height:1.1}
.pa-kaart-t small{color:var(--ink-3);font-size:var(--fs-xs)}
.pa-kaart-f{margin:0;font-size:var(--fs-s);color:var(--ink-2);line-height:1.5}
.pa-kaart-f b{color:var(--ink);font-weight:600}
.pa-kaart-o{margin:0;font-size:var(--fs-s);background:var(--sheet-2);border-radius:var(--r);padding:6px 8px}
.pa-kaart-b{margin:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-s)}
.pa-kaart-b a{display:inline-flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.pa-kaart-b svg{width:16px;height:16px;flex:none}
.pa-kaart .btn{margin-top:auto;align-self:flex-start}
.pa-ok{display:grid;gap:6px;margin-top:auto}
.pa-advies{margin:var(--s3) 0 0;flex-wrap:wrap}
.pa-advies p{flex:1 1 280px;margin:0}
.pa-gekozen{margin:var(--s3) 0}
.pa-gekozen p{margin:0}
.pa-tabel{margin-top:var(--s2)}
.pa-tbl th,.pa-tbl td{vertical-align:top}
.pa-tbl td.num small{display:block;color:var(--ink-3);font-size:var(--fs-xs);font-weight:400}
.pa-tbl td.num small.pa-x{color:var(--ink-2);max-width:16em;margin-left:auto;white-space:normal}
.pa-tbl td.pa-laag{background:var(--signal-soft)}
.pa-tbl td.pa-gek{box-shadow:inset 0 0 0 2px var(--ink)}
.pa-tbl tr.pa-tot td{border-top:2px solid var(--ink)}
.pa-cel{display:block;width:100%;text-align:right;background:none;border:0;padding:2px 0;color:inherit;cursor:pointer;font:inherit;border-radius:var(--r)}
.pa-cel:hover b{text-decoration:underline}
.pa-cel:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.pa-mijn{display:flex;flex-wrap:wrap;gap:8px var(--s3);align-items:center;margin-top:var(--s2);padding:10px 12px;border-radius:var(--r-m);background:var(--sheet-2)}
.pa-mijn p{margin:0;flex:1 1 260px}
.pa-gk{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid}
.pa-gk li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px var(--s3);align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pa-gk-n{display:flex;flex-direction:column;min-width:0}
.pa-gk-n small{color:var(--ink-3);font-size:var(--fs-xs)}
.pa-gk-b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.pa-gk-t{margin:8px 0 0}
.pa-van{margin:var(--s2) 0 0}
.pa-zelf{margin-top:var(--s3)}

@media (max-width:640px){
  .pa-panel{padding:0;border:0;background:none}
  .pa-lev{grid-template-columns:1fr}
  .pa-rg{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"c o" "c n"}
  .pa-rg > input[type=checkbox],.pa-rg > .pa-rg-c{grid-area:c;align-self:start;margin-top:2px}
  .pa-rg-o{grid-area:o}
  .pa-rg-n{grid-area:n}
  .pa-st-l > li{grid-template-columns:1fr}
  .pa-st-a{grid-column:1;grid-row:auto;justify-content:space-between}
  .pa-dl{grid-template-columns:1fr;gap:2px}
  .pa-dl dd{margin-bottom:8px}
}

/* ---------- de leverancierspagina (body.pt.lv) ---------- */
.lv-info{display:grid;gap:4px}
.lv-lev{display:flex;gap:10px;align-items:flex-start}
.lv-lev svg{width:22px;height:22px;flex:none;color:var(--ink-2);margin-top:1px}
.lv-lev p{margin:0;font-size:var(--fs-m);font-weight:600}
.lv-opm{margin:10px 0 0 !important;padding:10px 12px;border-left:3px solid var(--pt-accent);background:var(--sheet-2);border-radius:0 var(--r) var(--r) 0;white-space:pre-wrap}
.lv-n{font-family:var(--f-text,inherit);font-stretch:100%;font-weight:500;font-size:var(--fs-s);color:var(--ink-3);margin-left:6px}
.lv-regels{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lv-r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"wat prijs" "x x";gap:2px 16px;padding:12px 0 6px;border-bottom:1px solid var(--line)}
.lv-r.nl .lv-r-wat b{color:var(--ink-3);text-decoration:line-through}
.lv-r-wat{grid-area:wat;display:flex;gap:10px;min-width:0}
.lv-nr{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sheet-2);color:var(--ink-2);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;margin-top:1px}
.lv-r-wat b{display:block;font-weight:650;overflow-wrap:anywhere}
.lv-r-wat small{display:block;color:var(--ink-2);font-size:var(--fs-s);margin-top:2px;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lv-r-prijs{grid-area:prijs;display:flex;flex-direction:row;align-items:flex-end;gap:14px}
.lv-pr{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lv-l{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.lv-eur{position:relative;display:flex;align-items:center}
.lv-eur > span{position:absolute;left:11px;color:var(--ink-3);pointer-events:none;font-size:var(--fs-m)}
.lv-eur .inp{padding-left:26px}
.lv-pr .inp{width:132px;text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lv-tot{min-width:96px;min-height:1.3em;padding-bottom:13px;text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:650;font-size:var(--fs-s);color:var(--ink-2)}
.lv-r-x{grid-area:x;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:flex-start;padding-left:34px}
.lv-nl{display:inline-flex;gap:8px;align-items:center;font-size:var(--fs-s);color:var(--ink-2);min-height:36px;cursor:pointer}
.lv-nl input{width:18px;height:18px;accent-color:var(--ink)}
.lv-meer{flex:1 1 260px;min-width:0}
.lv-meer summary{font-size:var(--fs-s);color:var(--ink-2);min-height:36px;display:flex;align-items:center;cursor:pointer}
.lv-meer-v{display:grid;gap:0;padding-bottom:4px}
.lv-meer-v .pt-veld{margin-top:8px}
.lv-som{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:2px solid var(--ink)}
.lv-som > div{display:flex;justify-content:space-between;gap:16px}
.lv-som span{color:var(--ink-2)}
.lv-som b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.lv-som .eind span,.lv-som .eind b{color:var(--ink);font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:var(--fs-l)}
.lv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.lv-grid .pt-veld .lv-eur .inp{width:100%}
.lv-best{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.lv-best li{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between}
.lv-best a{display:inline-flex;gap:8px;align-items:center;overflow-wrap:anywhere;min-width:0}
.lv-best svg{width:18px;height:18px;flex:none}
.lv-up{position:relative;cursor:pointer}
.lv-up input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.lv-up.bezig{opacity:.7;pointer-events:none}
.lv-up-t{margin:8px 0 0}
.lv-verstuur{display:grid;justify-items:start;gap:0}
.lv-knop svg{width:20px;height:20px}
.lv-klaar p,.lv-dicht p{flex-basis:100%;margin:0}
@media (max-width:560px){
  .lv-r{grid-template-columns:1fr;grid-template-areas:"wat" "prijs" "x"}
  .lv-r{gap:8px 16px}
  .lv-r-prijs{justify-content:space-between;padding-left:34px}
  .lv-pr{align-items:flex-start}
  .lv-pr .inp{width:150px}
  .lv-tot{min-width:0}
  .lv-grid{grid-template-columns:1fr}
  .lv-knop{width:100%;justify-content:center}
  .lv-verstuur{justify-items:stretch}
}

/* 99-project.css */
/* ---------- Projecten: voortgang, werkplan, team en wie wat deed (60-project.js) ---------- */
.pj-kop{align-items:flex-end;gap:var(--s3) var(--s4)}
.pj-kop h1{margin:2px 0 0}
.pj-kop .lede{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}

/* de stand: groot percentage, de duimstok met een streep voor de tijd, en de getallen */
.pj-stand{display:grid;gap:10px}
.pj-stand-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pj-pct{font-family:var(--f-num);font-stretch:var(--wide);font-weight:750;font-size:var(--fs-3xl);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.pj-pct small{font-size:var(--fs-l);font-weight:650;margin-left:2px;color:var(--ink-2)}
.pj-stand:not(.groot) .pj-pct{font-size:var(--fs-2xl)}
.pj-stand-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.pj-stand-t .flag{align-self:flex-start}
.pj-stand .st-kvs{margin-top:2px}
.pj-stand-p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s5);align-items:start}
.pj-datums{display:flex;gap:var(--s2);flex-wrap:wrap}
.pj-datums .fld{min-width:150px}

.pj-raster{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.pj-links,.pj-rechts{display:grid;gap:16px;min-width:0}

/* werkplan: nieuw werk, filters, groepen en regels */
.pj-nieuw{display:flex;gap:var(--s2);flex-wrap:wrap}
.pj-nieuw .inp{flex:3 1 200px;min-width:0}
.pj-nieuw .inp.pj-ond{flex:1 1 120px}
.pj-nieuw .btn svg{width:18px;height:18px}
.pj-filters{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin:var(--s3) 0 var(--s2)}
.pj-filters .seg{margin:0}
.pj-seg .fchip{padding:0 12px}
.pj-n{font:650 12px/18px var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.pj-seg .fchip[aria-pressed="true"] .pj-n{color:var(--ink-2)}
.pj-wie-f .inp{min-height:36px;padding-top:4px;padding-bottom:4px}
.pj-sj,.pj-off,.pj-ai,.pj-voorbeeld{margin:var(--s3) 0;border:1px solid var(--line)}
.pj-sj h3,.pj-off h3,.pj-ai h3,.pj-voorbeeld h3{margin:0 0 6px}
.pj-off-l,.pj-ai-l{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:2px}
.pj-off-l label{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:var(--fs-s)}
.pj-off-l .cb{margin-top:2px;flex:0 0 auto}
.pj-ai-l li{display:flex;justify-content:space-between;gap:var(--s3);padding:5px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s)}
.pj-groep{margin-top:var(--s3)}
.pj-groep h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 4px;font-size:var(--fs-m)}
.pj-groep h3 .lnk{margin-left:auto;font-size:var(--fs-s);min-height:0}
.pj-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pj-r{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px var(--s3);align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.pj-r>.pj-st{margin-top:3px;width:100%}
.pj-st-open{background-color:var(--sheet-2);color:var(--ink-2)}
.pj-st-bezig{background-color:var(--signal-soft);color:var(--signal-ink)}
.pj-st-klaar{background-color:var(--green-soft);color:var(--green)}
.pj-r-m{display:flex;flex-direction:column;gap:3px;min-width:0}
.pj-titel{display:block;width:100%;text-align:left;border:0;background:none;padding:2px 0;margin:0;font:600 var(--fs-m)/1.35 var(--f-body);color:var(--ink);cursor:pointer;overflow-wrap:anywhere}
button.pj-titel:hover{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
button.pj-titel:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--r-xs)}
span.pj-titel{cursor:default}
.pj-r-klaar .pj-titel{color:var(--ink-2);font-weight:500}
.pj-r-sub{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--fs-s)}
.pj-r-sub .due{font-size:var(--fs-xs)}
.pj-noot{font-style:italic}
.pj-ed{grid-column:1/-1;background:var(--sheet-2);border-radius:var(--r-m);padding:12px 14px;margin:4px 0 2px}
.pj-ed .fields{margin:0}
.pj-ed .link-row .btn svg{width:16px;height:16px}
.pj-namens{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--s2) 0 0}
.pj-r-log{margin:var(--s2) 0 0;font-size:var(--fs-s)}

/* wie: kleine monogrammen met de voornaam */
.pj-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-pill);background:var(--sheet-2);color:var(--ink);border:1px solid var(--line-2);font-family:var(--f-num);font-weight:700;font-size:10.5px;letter-spacing:.02em;flex:0 0 auto}
.pj-av.meer{background:var(--sheet);color:var(--ink-2)}
.pj-wie{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.pj-wie-i{display:inline-flex;gap:5px;align-items:center;font-size:var(--fs-s);color:var(--ink)}
.pj-wie-i.weg{opacity:.55}
.pj-wie-k{font-size:var(--fs-s);min-height:0}
.pj-wie-kies{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.pj-avs{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.pj-avs .pj-av{background:var(--sheet)}

/* team */
.pj-leden{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:2px}
.pj-lid{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.pj-lid-av .pj-av{width:36px;height:36px;font-size:12.5px}
.pj-lid-m{display:grid;gap:4px;min-width:0}
.pj-lid-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.pj-lid-h .lnk{margin-left:auto;font-size:var(--fs-s);min-height:0}
.pj-rol.fi{max-width:260px}
.pj-lid-f{font-size:var(--fs-s);min-height:0;justify-self:start;padding:0}
.pj-team-erbij .ask-row .inp{flex:1;min-width:0}

/* wie deed wat */
.pj-log-f{margin:0 0 var(--s2)}
.pj-log .log{font-size:var(--fs-s)}

/* alle projecten */
.pj-kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s3)}
.pj-kaart{width:100%;height:100%;display:flex;flex-direction:column;gap:8px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-1)}
.pj-kaart:hover{border-color:var(--line-2)}
.pj-kaart:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.pj-kaart-h{display:flex;gap:var(--s3);align-items:flex-start;justify-content:space-between}
.pj-kaart-k{display:flex;flex-direction:column;min-width:0}
.pj-kaart-k b{font-family:var(--f-display);font-stretch:var(--wide);font-size:var(--fs-m)}
.pj-kaart-m{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.pj-kaart-m .num{font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums}
.pj-kaart-v .due{margin-left:4px}
.pj-kaart-l{overflow-wrap:anywhere}

/* in de werkmap */
.pj-dr .pj-stand{margin-bottom:var(--s2)}
.pj-dr-team{margin:0 0 var(--s2);display:flex;flex-wrap:wrap;gap:4px 10px}
.pj-dr-team .pj-av{margin:0;box-shadow:none}
.pj-dr-l{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:4px}
.pj-dr-l li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:var(--fs-s)}
.pj-dr-l .due{margin-left:auto}
.pj-dr-log{font-size:var(--fs-s);margin:0 0 var(--s2)}
.pj-dr .btn svg{width:16px;height:16px}

/* de ploegpagina: je werk */
.pj-pl-k+.pj-pl-k{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.pj-pl-k h3{margin:0 0 6px;font-size:var(--fs-m)}
.pj-pl-l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pj-pw{display:flex;gap:var(--s2) var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.pj-pw-m{flex:1 1 220px;min-width:0}
.pj-pw-sub{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:2px}
.pj-pw-a{display:flex;gap:var(--s2);flex-wrap:wrap}
.pj-pw-a .btn{min-height:var(--tap);min-width:96px}
.pj-pw.pj-r-klaar b{color:var(--ink-2);font-weight:600}
.pj-pl-rest,.pj-pl-later{margin-top:var(--s2)}
.pj-pl-team{margin:var(--s2) 0 0}
/* geen dubbele lijn: de laatste regel van een lijst gaat over in de uitklapper eronder; direct onder de klusnaam geen lijn */
.pj-pl-l>.pj-pw:last-child{border-bottom:0}
.pj-pl-k>h3+.subdet{border-top:0;margin-top:0;padding-top:0}

@media (min-width:641px){
  .pj-nieuw .inp.pj-ond{max-width:170px}
}
@media (max-width:1099px){
  .pj-raster{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* de kop: knoppen onder de titel (in een kolom zou flex-basis 320px van .view-head de titel 320px hoog maken) */
  .pj-kop>div:first-child,.mt-kop>div:first-child{flex-basis:auto}
  .pj-kop .mt-kop-acties{flex:1 1 100%}
  .pj-kop .mt-kop-acties .btn{flex:1 1 auto}
  .pj-stand-p{grid-template-columns:1fr}
  .pj-datums .fld{flex:1 1 140px;min-width:0}
  .pj-r{grid-template-columns:106px minmax(0,1fr);gap:4px 10px}
  .pj-kaarten{grid-template-columns:1fr}
  .pj-pw-a{width:100%}
  .pj-pw-a .btn{flex:1 1 0}
  .pj-nieuw .btn{flex:1 1 100%}
}

/* 99-rondleiding.css */
/* ---------- Rondleiding en "Hoe werkt dit?" (62-rondleiding.js) ---------- */

/* de knop in de balk bovenin; op de telefoon alleen het vraagteken */
.hulp{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 9px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--sheet);color:var(--ink-2);font:600 13px/1 var(--f-body);cursor:pointer;white-space:nowrap;flex:none}
.hulp .ic{width:18px;height:18px}
.hulp:hover{color:var(--ink);border-color:var(--ink-3)}
.hulp:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:759px){
  .hulp{width:38px;height:38px;min-height:38px;padding:0;justify-content:center}
  .hulp-l{display:none}
  .hulp .ic{width:20px;height:20px}
}

/* in de kop van een lade, links van het kruisje */
.dr-hulp{position:absolute;top:14px;right:58px}
.dr-hulp .ic{width:20px;height:20px}
.dr-head:has(.dr-hulp) h2{margin-right:100px}
.dr-head:has(.dr-hulp) .dr-kicker{padding-right:100px}
@media (max-width:759px){
  .dr-hulp{right:64px}
  .dr-head:has(.dr-hulp) h2{margin-right:108px}
  .dr-head:has(.dr-hulp) .dr-kicker{padding-right:108px}
}

/* de laag over de cockpit: een vanger voor klikken, het gat met de gele rand om wat je bekijkt, en het kaartje */
#rl-root .rl{position:fixed;inset:0;z-index:90;pointer-events:none}
.rl-vang{position:fixed;inset:0;pointer-events:auto;background:transparent}
.rl-vang.dim{background:var(--scrim)}
.rl-gat{position:fixed;border-radius:var(--r-m);box-shadow:0 0 0 3px var(--signal),0 0 0 200vmax var(--scrim);pointer-events:none;transition:left var(--dur-2) var(--ease),top var(--dur-2) var(--ease),width var(--dur-2) var(--ease),height var(--dur-2) var(--ease)}
.rl-gat[hidden]{display:none}
.rl-kaart{position:fixed;left:16px;top:16px;pointer-events:auto;width:min(380px,calc(100vw - 32px));background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);padding:12px 16px 14px;display:grid;gap:8px;transition:left var(--dur-2) var(--ease),top var(--dur-2) var(--ease)}
.rl-kaart.midden{left:50%!important;top:50%!important;transform:translate(-50%,-50%);transition:none}
.rl-kaart.tel{left:8px!important;right:8px;width:auto;max-height:calc(50vh - 16px);overflow:auto;transition:none}
.rl-kaart.tel.onder{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
.rl-kaart.tel.boven{top:calc(env(safe-area-inset-top,0px) + 8px)!important;bottom:auto}
.rl-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.rl-nr{font-size:var(--fs-s);font-weight:600;color:var(--ink-2)}
.rl-sluit{width:36px;height:36px;margin:-4px -8px -4px 0;flex:none}
.rl-kaart .maat{margin:0}
.rl-kaart h2{font-family:var(--f-display);font-stretch:var(--wide);font-weight:800;font-size:19px;line-height:1.15;margin:4px 0 0;outline:none;text-wrap:balance}
.rl-kaart p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.rl-kaart p.rl-meer{font-size:13.5px}
.rl-voet{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:4px}
.rl-voet .btn .ic{width:18px;height:18px}
.rl-voet .btn:first-child:not(:last-child)[data-act="rl-vorige"]{margin-right:auto}
@media (max-width:759px){
  .rl-kaart h2{font-size:18px}
  .rl-voet .btn.sm{min-height:42px}
}
@media (prefers-reduced-motion:reduce){.rl-gat,.rl-kaart{transition:none}}
body.rl-aan{overscroll-behavior:none}

/* het kaartje op Vandaag */
.rl-aanbod{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 14px;align-items:center;margin-bottom:16px}
.rl-aanbod-ic{width:40px;height:40px;border-radius:50%;background:var(--signal-soft);color:var(--ink);display:grid;place-items:center}
.rl-aanbod-ic .ic{width:22px;height:22px}
.rl-aanbod h2.sec{margin:0;font-size:var(--fs-l);letter-spacing:0;text-transform:none;font-stretch:108%}
.rl-aanbod p{margin:2px 0 0;color:var(--ink-2)}
.rl-aanbod-k{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:759px){
  .rl-aanbod{grid-template-columns:auto minmax(0,1fr)}
  .rl-aanbod-k{grid-column:1/-1}
}

/* 99-talen.css */
/* ---------- talen en de tolk (versie 2.4, 58-talen.js, 59-tolk.js) ---------- */
/* onder Vandaag op de ploegpagina: de tekst van de baas is vertaald */
.mw-vert{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.mw-vert .ic{width:16px;height:16px;flex:none}
.mw-vert .lnk{font-size:inherit}

/* de tolk */
.tolk .sec .ic{width:20px;height:20px;vertical-align:-4px;margin-right:6px}
.tolk-kies{max-width:320px;margin:0 0 12px}
.tolk-kanten{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tolk-kant{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md, 10px);background:var(--sheet)}
.tolk-kant label{font-size:14px;display:flex;gap:6px;align-items:baseline}
.tolk-veld{position:relative}
.tolk-veld textarea{width:100%;min-height:76px;padding-right:56px;font-size:16px;resize:vertical}
.tolk-veld .mic{position:absolute;right:8px;bottom:10px;height:36px;min-width:40px;justify-content:center}
.tolk-kant .btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}
.tolk-kant .btn .ic{width:18px;height:18px}
.tolk-log{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tolk-zin{padding:12px 14px;border-radius:var(--r-md, 10px);border:1px solid var(--line);background:var(--paper)}
.tolk-zin.van-b{border-left:4px solid var(--signal)}
.tolk-zin.van-a{border-left:4px solid var(--ink-3)}
.tolk-van{margin:0 0 6px;color:var(--ink-3);font-size:14px;line-height:1.4}
.tolk-naar{margin:0;font-size:22px;line-height:1.35;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.tolk-acts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0}
.tolk-acts .lnk{display:inline-flex;align-items:center;gap:5px;font-size:14px;min-height:36px}
.tolk-acts .ic{width:16px;height:16px}
.tolk-uitleg{margin:12px 0 0}
@media (max-width:759px){
  .tolk-kanten{grid-template-columns:1fr}
  .tolk-naar{font-size:24px}
}

/* Instellingen: taal van de cockpit */
.tl-paneel .fld{max-width:360px}

/* 99-vakmodules.css */
/* ---------- Vakmodules (65-vakmodules.js): keuzes, formulieren per vak, keuringen en onderhoud op Vandaag ---------- */
.vm-keuzes{display:grid;gap:8px}
.vm-keuze{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);cursor:pointer}
.vm-keuze input{margin-top:3px;flex:none}
.vm-keuze span{display:flex;flex-direction:column;gap:2px;min-width:0}
.vm-keuze b{font-size:14.5px}
.vm-keuze small{font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.vm-keuzes.klein .vm-keuze{padding:8px 10px}
.vm-onb{margin-top:12px}
/* metingen, bevindingen, groepen en dakdelen: rijen met vaste kolommen, op de telefoon gestapeld */
.vm-meting{display:grid;grid-template-columns:minmax(0,1.6fr) 96px 72px 28px;gap:8px;align-items:center}
.vm-gebrek{display:grid;grid-template-columns:minmax(0,1fr) auto auto 28px;gap:8px 10px;align-items:center}
.vm-groep{display:grid;grid-template-columns:52px minmax(0,1fr) 76px 92px 28px;gap:8px;align-items:center}
.vm-groep.vm-kop{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:0 0 4px}
.vm-groep.vm-kop span:last-child{width:28px}
.vm-deel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr);gap:8px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.rows>.vm-deel:first-child{border-top:0;padding-top:0}
.vm-deel-n{font-size:14px}
.vm-maatregel{display:grid;grid-template-columns:minmax(0,1.6fr) 120px auto minmax(0,1fr) 28px;gap:8px 10px;align-items:center}
@media (max-width:760px){
  .vm-meting{grid-template-columns:minmax(0,1fr) 84px 60px 28px}
  .vm-gebrek{grid-template-columns:minmax(0,1fr) 28px}.vm-gebrek>.yn,.vm-gebrek>.capsel{grid-column:1/-1}
  .vm-groep{grid-template-columns:44px minmax(0,1fr) 28px}.vm-groep>input:nth-child(3),.vm-groep>input:nth-child(4){grid-column:2}.vm-groep.vm-kop{display:none}
  .vm-deel{grid-template-columns:minmax(0,1fr)}
  .vm-maatregel{grid-template-columns:minmax(0,1fr) 28px}.vm-maatregel>input:nth-child(2),.vm-maatregel>.yn,.vm-maatregel>input:nth-child(4){grid-column:1/-1}
}
/* Vandaag: keuringen en onderhoud */
.vm-lijst{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vm-lijst li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.vm-lijst li:first-child{border-top:0;padding-top:0}
.vm-lijst li>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.vm-lijst li b{font-size:14.5px}
.vm-d{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:650;font-size:14px;white-space:nowrap}
.vm-d.laat{color:var(--red)}
.vm-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:520px){.vm-lijst li{grid-template-columns:64px minmax(0,1fr)}.vm-acties{grid-column:2}}

/* 99-zaaglijst.css */
/* ---------- Zaaglijst bij een ontwerp (61-zaaglijst.js) ---------- */
.zl-groep{margin:10px 0 0}
.zl-tot{margin:2px 0 0}
.zl-acties{margin:2px 0}
.zl-m{display:grid;gap:12px;container-type:inline-size}
/* op een breed scherm de stukken links en het zaagplan of de plaatindeling rechts */
.zl-body{display:grid;gap:12px;min-width:0}
.zl-body>*{min-width:0}
@container (min-width:1100px){.zl-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}}
.zl-kop{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.zl-kop h3{margin:0;font-size:15.5px;font-weight:700}
.zl-kop .aside{font-size:13px;color:var(--ink-3)}

/* wat je koopt: lengtes of plaatmaat */
.zl-keuze-d summary{cursor:pointer;min-height:36px;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;font-size:14px;list-style:none}
.zl-keuze-d summary::-webkit-details-marker{display:none}
.zl-keuze-d summary b{font-weight:650;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.zl-keuze-d summary .lnk{font-size:13px}
.zl-keuze-d[open] summary .lnk{display:none}
.zl-keuze-d[open] .zl-keuze{margin-top:6px}
.zl-keuze{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.zl-k-l{font-size:13px;font-weight:650;color:var(--ink-2)}
.zl-chips{display:flex;flex-wrap:wrap;gap:6px}
.zl-hl{min-width:52px;justify-content:center;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.zl-hl.auto[aria-pressed="true"]{outline:2px dashed var(--signal);outline-offset:1px}
.zl-eigen{display:inline-flex;gap:6px;align-items:center}
.zl-eigen .inp{width:112px;min-height:36px}
.zl-plaatmaat{max-width:280px}

/* de stukken */
.zl-tbl td,.zl-tbl th{vertical-align:top}
.zl-tbl td.r,.zl-tbl th.r{text-align:right;white-space:nowrap}
.zl-pos span{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--sheet-2);font:700 12px/1 var(--f-num);font-variant-numeric:tabular-nums}
.zl-naam{overflow-wrap:anywhere}
.zl-noot{color:var(--ink-2);font-size:13px}
.zl-strook{margin:0}

/* het zaagplan: een balk per handelslengte, de stukken erop en de rest gearceerd */
.zl-plan{display:grid;gap:8px}
.zl-koop{margin:0;font-size:14px}
.zl-staven{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.zl-staaf{display:grid;grid-template-columns:44px minmax(0,1fr) 60px;gap:8px;align-items:center}
.zl-n{text-align:right;font-weight:700;font-size:13.5px;white-space:nowrap}
.zl-l{font-size:13px;color:var(--ink-2);text-align:right;white-space:nowrap}
.zl-bar-w{min-width:0}
.zl-bar{display:flex;height:30px;border:1px solid var(--line-2);border-radius:3px;background:var(--sheet-2);overflow:hidden}
.zl-deel{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:0 6px;min-width:0;overflow:hidden;white-space:nowrap;background:var(--signal-soft);color:var(--ink);border-right:2px solid var(--sheet);font-size:12.5px;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.zl-deel b{font-weight:750}
.zl-deel span{color:var(--ink-2)}
.zl-deel.smal{justify-content:center;padding:0 1px}
.zl-rest{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line-2) 5px 6px);color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden}
.zl-rest span{background:var(--sheet-2);padding:0 4px;border-radius:2px}

/* de plaatindeling */
.zl-indeling summary{cursor:pointer;font-weight:600;font-size:14px;min-height:36px;display:flex;align-items:center}
.zl-platen{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px 18px}
.zl-plaat-w{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:start}
.zl-plaat-w .zl-n{padding-top:2px}
.zl-plaat-w>.sm{grid-column:2}
.zl-plaat{position:relative;display:block;width:100%;background:var(--sheet-2);border:1px solid var(--line-2);border-radius:2px}
.zl-p-s{position:absolute;display:grid;place-items:center;background:var(--signal-soft);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;font:700 11.5px/1 var(--f-num);color:var(--ink)}

@media (max-width:600px){
  .zl-staaf{grid-template-columns:34px minmax(0,1fr) 46px;gap:6px}
  .zl-deel{padding:0 4px;font-size:11.5px;gap:3px}
  .zl-deel.mid span{display:none}
  .zl-tbl thead{display:none}
  .zl-tbl tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:2px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
  .zl-tbl td{padding:0;border:0}
  .zl-tbl td.zl-noot{grid-column:2/-1}
  .zl-tbl td.zl-noot:empty{display:none}
  .zl-tbl td[data-l="Aantal"]::after{content:" ×"}
}