:root {
  --paper:#E9EDE6; --paper-2:#F3F6F1;
  --ink:#12201C; --ink-soft:#42564E; --ink-faint:#6B7F76;
  --water:#1E4D42; --water-2:#2C6455; --water-pale:#C9DED5;
  --amber:#C9781F; --amber-2:#E0A33E;
  --line:#CBD4C9; --line-soft:#DFE5DB;
  --dark:#12201C; --dark-2:#1A2C26; --on-dark:#EDF1EA; --on-dark-soft:#9FB3A8;
  --water-band:#1E4D42;

  /* app-mockup, altijd licht — zo zien echte screenshots er straks ook uit */
  --ui-bg:#F7F9F6; --ui-panel:#FFFFFF; --ui-line:#E3E8E1;
  --ui-text:#16221D; --ui-soft:#6C7F76; --ui-accent:#1E4D42; --ui-amber:#C9781F;

  --maxw:1180px; --gutter:clamp(18px, 5vw, 56px);
  --s--1:clamp(.78rem, .765rem + .08vw, .83rem);
  --s-0:clamp(1rem, .975rem + .14vw, 1.07rem);
  --s-1:clamp(1.18rem, 1.1rem + .62vw, 1.48rem);
  --s-2:clamp(1.72rem, 1.36rem + 1.55vw, 2.55rem);
  --s-3:clamp(2.35rem, 1.7rem + 3.2vw, 3.95rem);
  --s-4:clamp(3.1rem, 2rem + 5.4vw, 6.4rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0E1916; --paper-2:#15221D;
    --ink:#E6ECE4; --ink-soft:#A8B9AF; --ink-faint:#83978C;
    --water:#6FBBA3; --water-2:#8BD0B8; --water-pale:#22463C;
    --amber:#E8AE55; --amber-2:#F0C079;
    --line:#2A3B34; --line-soft:#1F2E28;
    --dark:#08110F; --dark-2:#131F1B; --on-dark:#E6ECE4; --on-dark-soft:#9FB3A8;
    --water-band:#14342C;
  }
}
:root[data-theme="dark"] {
  --paper:#0E1916; --paper-2:#15221D;
  --ink:#E6ECE4; --ink-soft:#A8B9AF; --ink-faint:#83978C;
  --water:#6FBBA3; --water-2:#8BD0B8; --water-pale:#22463C;
  --amber:#E8AE55; --amber-2:#F0C079;
  --line:#2A3B34; --line-soft:#1F2E28;
  --dark:#08110F; --dark-2:#131F1B; --on-dark:#E6ECE4; --on-dark-soft:#9FB3A8;
    --water-band:#14342C;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);margin:0;
     font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
     font-size:var(--s-0);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2{overflow-wrap:break-word;hyphens:auto} /* lange woorden zoals "Projectmanagement" passen anders niet op een smal scherm */
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
     font-weight:800;letter-spacing:-.028em;line-height:1.04;text-wrap:balance;margin:0}
h2{line-height:.99;letter-spacing:-.032em}
p{margin:0} a{color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--s--1);
     letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.hero .eyebrow,.h1-kicker{font-size:clamp(.82rem, 1.05vw, 1rem);letter-spacing:.16em;color:var(--water)}
.lede{font-size:var(--s-1);color:var(--ink-soft);max-width:56ch}
.muted{color:var(--ink-soft)}
section{padding-block:clamp(48px, 7vw, 92px)}
.band{background:var(--paper-2)}
.band-dark{background:var(--dark);color:var(--on-dark)}
.band-water{background:var(--water-band);color:#F2F7F3}
.band-dark .eyebrow,.band-dark .muted{color:var(--on-dark-soft)}
.band-dark .lede{color:var(--on-dark-soft)}

/* waterlijn als terugkerend scheidingsteken */
.waterline{height:14px;width:100%;overflow:hidden;line-height:0}
.wrap>.waterline{margin-block:clamp(30px,4vw,50px) 0}
.waterline svg{width:100%;height:14px;display:block}

.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--s-0);
     text-decoration:none;padding:.76em 1.3em;border:2px solid transparent;border-radius:2px;
     transition:background-color .12s ease,transform .12s ease;cursor:pointer}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.btn-primary{background:var(--amber);color:#14100A}
.btn-primary:hover{background:var(--amber-2);transform:translateY(-1px)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:rgba(127,127,127,.12)}
.btn-sm{font-size:var(--s--1);padding:.6em 1em}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
     background:color-mix(in srgb,var(--paper) 90%,transparent);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;gap:clamp(12px, 2.2vw, 26px);min-height:66px;
     max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:.5em;text-decoration:none;margin-right:auto}
.brand-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.04em}
.mark{display:block;width:32px;height:32px;flex:none}
.nav-links{display:none;align-items:center;gap:clamp(12px, 1.8vw, 22px)}
.nav-links>a,.menu>summary{text-decoration:none;font-size:var(--s--1);color:var(--ink-soft);
     padding:6px 2px;border-bottom:2px solid transparent;cursor:pointer}
.nav-links>a:hover,.menu>summary:hover{color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink);border-bottom-color:var(--amber)}
.nav-links a:focus-visible,.menu>summary:focus-visible,.mnav>summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (min-width:1000px){.nav-links{display:flex}}

/* productmenu (desktop) */
.menu{position:relative}
.menu>summary{list-style:none;display:inline-flex;align-items:center;gap:.35em}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;
     border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .15s}
.menu[open]>summary{color:var(--ink)}
.menu[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
.menu-panel{position:absolute;top:calc(100% + 12px);left:-14px;width:min(516px,80vw);
     display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
     border:1px solid var(--line);border-radius:2px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.menu-panel a{background:var(--paper-2);padding:13px 15px;text-decoration:none;display:block}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--paper)}
.menu-panel a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--amber)}
.mi-t{display:block;font-weight:600;font-size:var(--s--1);color:var(--ink)}
.mi-d{display:block;font-size:.78rem;color:var(--ink-faint);margin-top:2px;line-height:1.35}

/* mobiel menu */
.mnav{position:static}
.mnav>summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;
     border:1px solid var(--line);border-radius:2px;color:var(--ink)}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnav-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
     padding:10px var(--gutter) 22px;display:grid;gap:1px;max-height:calc(100vh - 70px);overflow:auto}
.mnav-panel>a:not(.btn){display:block;padding:11px 0;text-decoration:none;border-bottom:1px solid var(--line-soft);font-weight:600}
.mnav-panel>a .mi-d{font-weight:400}
.mnav-panel .mi-t{font-size:var(--s-0)}
.mnav-panel a[aria-current="page"] .mi-t{color:var(--water)}
.mnav-panel a[aria-current="page"]{color:var(--water)}
.mnav-panel .btn{margin-top:16px;justify-self:start}
.mnav-kop{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
     color:var(--ink-faint);margin-top:14px}
.nav-cta{display:none}
@media (min-width:560px){.nav-cta{display:inline-flex}}
@media (min-width:1000px){.mnav{display:none}}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber);color:#14100A;
     padding:10px 14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.sec-kop{margin-top:clamp(40px, 5vw, 64px)}
.sec-h2{font-size:var(--s-2);margin-top:.42em;max-width:22ch;margin-bottom:clamp(20px, 2.6vw, 30px)}


/* ---------- hero ---------- */
.hero{padding-block:clamp(52px, 8vw, 104px) clamp(24px, 3.4vw, 42px)}
.br-breed{display:none}
@media (min-width:900px){.br-breed{display:inline}}
.hero h1{font-size:clamp(2.9rem, 7.4vw, 6.2rem);max-width:23ch;margin-top:0;text-wrap:normal;
      line-height:.94;letter-spacing:-.038em}
.hero-sub{margin-top:.75em;font-size:clamp(1.22rem, 2.1vw, 1.75rem);line-height:1.5;
      color:var(--ink-soft);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:1.9em}
.hero-cta .btn{font-size:clamp(1rem, 1.25vw, 1.12rem);padding:.92em 1.5em}
.hero-note{font-size:clamp(.86rem, 1.05vw, 1rem);color:var(--ink-faint);max-width:26ch;line-height:1.45}

/* ---------- app-mockup: volgt docs/UI-COMPONENTEN.md ----------
   Wit canvas, structuur uit hairlines, witte sidebar, tabelkoppen in kleine
   kapitalen, kanban-kolomkop = bolletje + naam + aantal. Het huismerkpaars
   (--primary) is vervangen door riviergroen; de rest is de echte app. */
.shot{background:#fff;border:1px solid #E9E9EC;border-radius:8px;overflow:hidden;
      color:#1A1F27;box-shadow:0 24px 50px -32px rgba(10,26,21,.38);font-size:12px;line-height:1.45}
/* Een nagetekend scherm is een desktopscherm: smaller dan het ontwerp wordt het op volle breedte
   opgebouwd en als geheel verkleind (app.js zet --z en --h), zoals een screenshot. Een transform
   in plaats van zoom: bij zoom houdt de browser een ondergrens voor lettergrootte aan, en dan
   lopen de verhoudingen uit. */
/* Het verkleinde scherm staat buiten de flow: anders duwt zijn volle breedte een grid- of
   flexouder open, en zou het scherm zichzelf weer groter meten. */
.shot.geschaald{height:var(--h);position:relative}
.shot.geschaald>*{position:absolute;left:0;top:0;width:var(--ontwerp);transform:scale(var(--z));transform-origin:0 0}
.shot .grid2{grid-template-columns:1fr 1fr}
/* Tik om te vergroten: alleen voor een verkleind scherm (smal toestel) */
.shot.geschaald{cursor:zoom-in}
.shot.geschaald::after{content:"Tik om te vergroten";position:absolute;right:8px;bottom:8px;z-index:1;
  font:500 10px/1 "IBM Plex Sans",system-ui,sans-serif;color:#fff;background:rgba(18,32,28,.72);padding:5px 8px;border-radius:999px;pointer-events:none}
.groot{position:fixed;inset:0;z-index:1000;background:#0E1916;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.groot-balk{display:flex;align-items:center;gap:12px;padding:10px 16px;color:#EDF1EA;font-size:.9rem}
.groot-balk span{opacity:.75}
.groot-balk button{margin-left:auto;font:600 .9rem "IBM Plex Sans",system-ui,sans-serif;color:#12201C;background:#EDF1EA;border:0;border-radius:8px;padding:8px 14px;min-height:36px;cursor:pointer}
.groot-balk button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.groot-vlak{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 16px 16px;overscroll-behavior:contain}
.groot-vlak .shot{width:1068px;cursor:auto}
body.groot-open{overflow:hidden} /* binnen een scherm altijd de desktopindeling */
.shot-t{font-size:var(--s-1);margin-bottom:.22em}
.shot-d{font-size:var(--s--1);color:var(--ink-soft);max-width:62ch;margin-bottom:15px}
.app{display:grid;grid-template-columns:172px 1fr;min-height:300px;background:#fff}
.app-side{background:#fff;border-right:1px solid #E9E9EC;display:flex;flex-direction:column}
.app-logo{height:42px;display:flex;align-items:center;gap:7px;padding:0 10px;
      border-bottom:1px solid #E9E9EC;font-weight:600;font-size:12.5px;flex:none}
.app-logo svg{width:19px;height:19px;flex:none}
.app-nav{padding:7px 7px 10px;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.nsec{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:#A2A6AD;
      padding:8px 8px 2px;font-weight:500;line-height:1.3}
.nmeer{font-size:9px;color:#B6BAC1;padding:10px 8px 0;line-height:1.3}
.nv{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:7px;color:#4B5159;
    font-size:10.8px;line-height:1.25}
.nv.on{background:#E3EEE8;color:#1B4A3F;font-weight:600}
.nv svg{width:13px;height:13px;flex:none;display:block;fill:none;stroke:currentColor;
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.nv.on svg{opacity:1}
.app-main{display:flex;flex-direction:column;min-width:0}
/* titelbalk: 64px in de app, hier op schaal 42px — zelfde volgorde */
.app-head{height:42px;display:flex;align-items:center;gap:7px;padding:0 12px;
      border-bottom:1px solid #E9E9EC;flex:none}
.ph-t{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.cnt{font-size:9.5px;font-variant-numeric:tabular-nums;background:#F4F4F6;color:#6E727A;
      padding:1px 6px;border-radius:999px;white-space:nowrap;flex:none;line-height:1.5}
.sub{color:#8A8E96;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip{font-size:10.5px;height:22px;display:inline-flex;align-items:center;padding:0 9px;
      border-radius:7px;color:#5E636B}
.fchip.on{background:#EFF1EF;color:#1A1F27;font-weight:600}
.srch{height:22px;min-width:74px;border:1px solid #E9E9EC;border-radius:7px;display:flex;
      align-items:center;padding:0 8px;color:#9A9EA6;font-size:10.5px;gap:5px}
.ibtn{height:22px;width:22px;border:1px solid #E9E9EC;border-radius:7px;display:grid;
      place-items:center;color:#6E727A;flex:none}
.ibtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
      stroke-linecap:round;stroke-linejoin:round}
.obtn{height:22px;display:inline-flex;align-items:center;padding:0 9px;border:1px solid #E9E9EC;
      border-radius:7px;color:#3E434B;font-size:10.5px;white-space:nowrap}
.pbtn{height:22px;display:inline-flex;align-items:center;padding:0 10px;border-radius:7px;
      background:#1E4D42;color:#fff;font-size:10.5px;font-weight:600;white-space:nowrap}
.app-body{padding:12px;overflow:hidden}
/* onderstreepte record-tabs (34px in de app) */
.rtabs{display:flex;gap:16px;border-bottom:1px solid #E9E9EC;padding:0 12px;flex:none}
.rtabs span{font-size:11px;color:#6E727A;padding:7px 0;border-bottom:2px solid transparent}
.rtabs span.on{color:#1A1F27;font-weight:600;border-bottom-color:#1E4D42}
.rtabs span.c-nu{padding:2px 8px;border-bottom:0;font-size:9.5px;line-height:1.3} /* versiechips tussen de tabs, geen tab */
/* de drie chipsoorten uit §0.2 */
.c-st{font-size:9.5px;padding:1px 7px;border-radius:999px;white-space:nowrap}
.c-ty{font-size:9.5px;padding:1px 7px;border-radius:999px;border:1px solid #E4E4E8;
      color:#6E727A;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.c-ty b{width:5px;height:5px;border-radius:50%;display:block}
.c-nu{font-size:9.5px;padding:1px 7px;border-radius:999px;background:#F4F4F6;color:#6E727A;white-space:nowrap}
.st-groen{background:#E1F0E7;color:#1B5537} .st-amber{background:#FBEFD9;color:#8A5B14}
.st-rood{background:#FBE3E0;color:#8C3126} .st-grijs{background:#F0F1F3;color:#6E727A}
.st-paars{background:#E9EBF7;color:#3E4A8A}
.av{width:18px;height:18px;border-radius:50%;background:#E3EEE8;color:#1B4A3F;font-size:8.5px;
    display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;flex:none;font-weight:500}
/* tabel: kop in kleine kapitalen, wit, alleen onderlijn */
.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#8A8E96;
      font-weight:500;padding:0 8px 7px;border-bottom:1px solid #E9E9EC}
.t td{padding:8px;border-bottom:1px solid #F2F2F4;font-size:11.5px;vertical-align:middle}
.t .num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.t .id{color:#A2A6AD;font-family:"IBM Plex Mono",monospace;margin-right:5px}
.t tr:last-child td{border-bottom:0}
/* Vitals: 3 tot 5 tegels boven de inhoud */
.vit{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px}
.vt{border:1px solid #E9E9EC;border-radius:8px;padding:9px 10px}
.vt .k{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#8A8E96}
.vt .v{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.vt .d{font-size:9.5px;color:#8A8E96;font-family:"IBM Plex Mono",monospace}
/* MiniBar: rood boven 100% (de amberdrempel op 90% is uit de app gehaald) */
.mbar{height:5px;border-radius:999px;background:#EFEFF2;overflow:hidden;margin-top:4px}
.mbar i{display:block;height:100%;background:#1E4D42}
.mbar i.warn{background:#B5820F} .mbar i.over{background:#C0392B}
/* kanban: kolomkop is bolletje + naam + aantal */
.kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.kbh{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#4B5159;margin-bottom:7px}
.kbh b{width:7px;height:7px;border-radius:50%;display:block;flex:none}
.kbh span{margin-left:auto;color:#A2A6AD;font-family:"IBM Plex Mono",monospace;font-size:9.5px}
.kc{border:1px solid #E9E9EC;border-radius:8px;padding:8px 9px;margin-bottom:7px;background:#fff}
.kc .t2{font-size:11px;line-height:1.35}
.kc .m{display:flex;align-items:center;gap:5px;margin-top:7px}
.kc .id{font-size:9.5px;color:#A2A6AD;font-family:"IBM Plex Mono",monospace}
.cardbox{border:1px solid #E9E9EC;border-radius:8px;padding:10px}
.sech{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;margin-bottom:8px}
.sech i{width:20px;height:20px;border-radius:6px;background:#E3EEE8;display:block;flex:none}
.bars{display:flex;align-items:flex-end;gap:6px;height:72px;padding-top:6px}
.bars i{flex:1;background:#1E4D42;border-radius:3px 3px 0 0;display:block;opacity:.85}
.bars i.hi{opacity:1;background:#C9781F}
.grid2{display:grid;gap:10px}
@media (min-width:600px){.grid2{grid-template-columns:1fr 1fr}}
.frow{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;
      padding:5px 0;border-bottom:1px solid #F2F2F4;font-size:11px}
.frow b{color:#8A8E96;font-weight:400}
.frow span{text-align:right}


/* ---------- het muurtje: kleine functieblokjes, gegroepeerd ---------- */
.wall{margin-top:clamp(26px, 3.4vw, 44px)}
.wall-groep+.wall-groep{margin-top:22px}
.wall-groep h3{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--s--1);
     font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.brick{font-size:var(--s--1);line-height:1.2;padding:7px 11px;border:1px solid var(--line);
     border-radius:3px;background:var(--paper-2);color:var(--ink-soft);white-space:nowrap}
.brick.key{background:var(--water);border-color:var(--water);color:#F2F7F4;font-weight:500}
:root[data-theme="dark"] .brick.key,
:root:not([data-theme="light"]) .brick.key{color:#0E1916}


/* ── grafiek met maanden en cijfers ── */
.chart{display:flex;align-items:flex-end;gap:5px;height:158px;margin-top:10px}
.chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:3px;text-align:center;min-width:0}
.chart .bar i{display:block;background:#1E4D42;border-radius:3px 3px 0 0;height:var(--h)}
.chart .bar.hi i{background:#C9781F}
.chart .v,.chart .m{font-family:"IBM Plex Mono",monospace;font-size:8.5px;line-height:1.2;
     font-variant-numeric:tabular-nums;white-space:nowrap}
.chart .v{color:#6E727A} .chart .m{color:#A2A6AD}
/* ── offerteboom ── */
.qt td{padding:6px 8px;border-bottom:1px solid #F4F4F6;font-size:11.5px;vertical-align:middle}
.qt svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:2;
     stroke-linecap:round;stroke-linejoin:round}
.qt .grab,.qt .chev,.qt .fold,.qt .ico{display:inline-flex;vertical-align:-2px}
.qt .grab{color:#CBD0D6;margin-right:2px}
.qt .grab svg{width:11px;height:11px;stroke-width:0;fill:currentColor}
.qt .chev{color:#9AA0A8;margin-right:2px}
.qt .chev svg{width:11px;height:11px}
.qt .fold{color:#C9781F;margin-right:5px}
.qt .ico{color:#9AA0A8;margin-right:5px}
.sel{display:inline-flex;align-items:center;gap:6px;border:1px solid #E4E4E8;border-radius:7px;
     padding:2px 7px;font-size:10px;color:#3E434B;white-space:nowrap}
.sel::after{content:"\2304";color:#A2A6AD;font-size:10px;line-height:1}
.niet{color:#B6BAC1;font-size:10px}
/* ── notitieblok op het bedrijfsdetail ── */
.comp{border:1px solid #E9E9EC;border-radius:8px;padding:10px}
.comp-tabs{display:flex;gap:5px;margin-bottom:8px}
.comp-tab{font-size:10.5px;padding:4px 9px;border-radius:7px;color:#5E636B;border:1px solid transparent}
.comp-tab.on{background:#E3EEE8;color:#1B4A3F;font-weight:600;border-color:#CADFD4}
.comp-box{border:1.5px solid #1E4D42;border-radius:7px;padding:9px;font-size:10.5px;color:#A2A6AD;min-height:40px}
.comp-foot{display:flex;align-items:center;gap:8px;margin-top:8px}
/* ── tijdlijn met bollen, gegroepeerd per dag ── */
.tl-day{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A8E96;margin:13px 0 8px}
.tl-row{display:grid;grid-template-columns:22px 1fr;gap:9px;margin-bottom:7px}
.tl-dot{width:22px;height:22px;border-radius:7px;background:#E3EEE8;display:grid;place-items:center;
     color:#1B4A3F}
.tl-dot svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
     stroke-linecap:round;stroke-linejoin:round}
.tl-dot.taak{background:#FBEFD9;color:#8A5B14}
.tl-card{border:1px solid #E9E9EC;border-radius:8px;padding:8px 10px;font-size:11px}
.tl-card .t3{font-weight:600}
.tl-card .s{color:#8A8E96;font-size:10.5px;margin-top:2px}
/* ── kaart met kop en telling ── */
.kcard{border:1px solid #E9E9EC;border-radius:8px;padding:11px;margin-bottom:10px}
.kcard-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;margin-bottom:8px}
.kcard-h i{width:20px;height:20px;border-radius:6px;background:#E3EEE8;display:block;flex:none}
.kcard-h .n{color:#A2A6AD;font-weight:400}
.kcard-h .add{margin-left:auto;font-size:10px;color:#1B4A3F;font-weight:500}
.segbtn{display:inline-flex;gap:5px}
.segbtn span{border:1px solid #E4E4E8;border-radius:999px;padding:2px 9px;font-size:10px;color:#6E727A}
.segbtn span.on{border-color:#1E4D42;color:#1B4A3F;font-weight:600}


/* ── bewijsblok ── */
.bewijs{display:grid;margin-top:clamp(26px,3.4vw,42px);
     border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
@media (min-width:620px){.bewijs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.bewijs{grid-template-columns:repeat(4,1fr)}}
.bewijs div{padding:clamp(16px,2vw,22px);border-top:1px solid rgba(255,255,255,.18)}
.bewijs div:first-child{border-top:0}
@media (min-width:620px){
  .bewijs div{border-top:0;border-left:1px solid rgba(255,255,255,.18)}
  .bewijs div:nth-child(2n+1){border-left:0}
  .bewijs div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}}
@media (min-width:1000px){
  .bewijs div:nth-child(n){border-top:0;border-left:1px solid rgba(255,255,255,.18)}
  .bewijs div:first-child{border-left:0}}
.bewijs b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
     font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.bewijs span{display:block;margin-top:.3em;font-size:var(--s--1);color:var(--on-dark-soft);line-height:1.35}
/* ── telefoons ── */
.fonts{display:grid;gap:clamp(18px,2.6vw,30px);margin-top:clamp(26px,3.4vw,44px);
     justify-items:center;align-items:stretch}
.fonts>div{display:flex;flex-direction:column;width:100%;max-width:266px}
@media (min-width:640px){.fonts{grid-template-columns:repeat(3,1fr)}}
.fon{width:100%;border:1px solid var(--line);border-radius:22px;background:#fff;
     overflow:hidden;box-shadow:0 22px 46px -30px rgba(10,26,21,.4);
     display:flex;flex-direction:column;flex:1}
.fon-top{height:26px;display:flex;align-items:center;justify-content:center;background:#fff}
.fon-top i{width:56px;height:5px;border-radius:99px;background:#E4E8E4;display:block}
.fon-head{display:flex;align-items:center;gap:6px;padding:0 11px 9px;border-bottom:1px solid #E9E9EC}
.fon-head .t{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.fon-body{padding:9px 11px;font-size:11px;color:#16221D;flex:1}
.fon-card{border:1px solid #E9E9EC;border-radius:8px;padding:8px 9px;margin-bottom:7px}
.fon-card .k{font-weight:600;font-size:11px}
.fon-card .s{color:#8A8E96;font-size:10px;margin-top:2px}
.fon-card .m{display:flex;align-items:center;gap:5px;margin-top:6px}
.fon-nav{display:flex;border-top:1px solid #E9E9EC;background:#fff}
.fon-nav span{flex:1;display:grid;place-items:center;gap:2px;padding:7px 0;color:#8A8E96;font-size:8px}
.fon-nav span.on{color:#1B4A3F;font-weight:600}
.fon-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
     stroke-linecap:round;stroke-linejoin:round}
.fon-cap{margin-top:9px;font-size:var(--s--1);color:var(--ink-faint);text-align:center;
     line-height:1.35;min-height:2.7em}

/* ---------- keten ---------- */
.chain{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(26px, 4vw, 42px)}
@media (min-width:900px){.chain{grid-template-columns:repeat(5,1fr)}}
.step{background:var(--paper);padding:clamp(16px, 2vw, 24px)}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--amber);letter-spacing:.1em}
.step h3{font-size:var(--s-1);margin-top:.45em}
.step p{margin-top:.5em;font-size:var(--s--1);color:var(--ink-soft)}

/* ---------- modulekaarten ---------- */
.mods{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(26px, 4vw, 42px)}
@media (min-width:680px){.mods{grid-template-columns:repeat(2,1fr)}}
/* tien kaarten: twee rijen van drie, dan twee rijen van twee */
@media (min-width:1020px){.mods{grid-template-columns:repeat(6,1fr)}.mod{grid-column:span 2}.mod:nth-child(n+7){grid-column:span 3}}
.mod{background:var(--paper);padding:clamp(20px, 2.3vw, 28px);text-decoration:none;display:flex;
     flex-direction:column;gap:.6em;transition:background-color .14s ease}
.mod:hover{background:var(--paper-2)}
.mod:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.mod h3{font-size:var(--s-1)}
.mod p{font-size:var(--s--1);color:var(--ink-soft)}
.mod .go{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:var(--s--1);color:var(--amber)}

/* ---------- subpagina ---------- */
.sub-head{padding-block:clamp(34px, 5vw, 60px) clamp(18px, 2.4vw, 28px)}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:var(--s--1);color:var(--ink-faint);margin-bottom:1.2em}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2em .5em}
.crumb li+li::before{content:"/";margin-right:.5em;opacity:.6}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.band-dark .crumb{color:var(--on-dark-soft)}
.band-dark .crumb a:hover{color:var(--on-dark)}
.sub-head h1{font-size:var(--s-3);max-width:15ch;line-height:.96;letter-spacing:-.034em}
.shots{display:grid;gap:clamp(26px, 3.4vw, 46px);margin-top:clamp(24px, 3vw, 40px)}
.feature-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(26px, 3.4vw, 44px)}
@media (min-width:700px){.feature-list{grid-template-columns:1fr 1fr}}
.fi{background:var(--paper);padding:clamp(18px, 2.2vw, 26px)}
.fi h3{font-size:var(--s-0)}
.fi p{margin-top:.45em;font-size:var(--s--1);color:var(--ink-soft)}
.pagenav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
     border-top:1px solid var(--line);padding-top:24px;margin-top:clamp(32px, 4vw, 56px)}

/* ---------- prijs ---------- */
.plan{border:2px solid var(--ink);background:var(--paper);margin-top:clamp(26px, 3.4vw, 40px)}
.band-dark .plan{border-color:#2D443B;background:var(--dark-2)}
.plan-top{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;
     padding:clamp(22px, 3vw, 34px);border-bottom:1px solid #2D443B}
.toggle{display:inline-flex;border:1px solid #2D443B;border-radius:3px;overflow:hidden;margin-left:auto}
.toggle button{font:inherit;font-size:var(--s--1);font-weight:600;padding:.5em 1em;border:0;
     background:transparent;color:var(--on-dark-soft);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--amber);color:#14100A}
.toggle button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.plan-parts{display:grid}
@media (min-width:760px){.plan-parts{grid-template-columns:1fr 1fr}}
.part{padding:clamp(22px, 3vw, 34px)}
.part+.part{border-top:1px solid #2D443B}
@media (min-width:760px){.part+.part{border-top:0;border-left:1px solid #2D443B}}
.amount{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.amount b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:var(--s-3);
     letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.amount span{font-size:var(--s--1);color:var(--on-dark-soft)}
.plan-foot{padding:clamp(20px, 2.6vw, 30px);border-top:1px solid #2D443B;
     display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.calc{margin-top:clamp(26px, 3.4vw, 40px);border:1px solid #2D443B;padding:clamp(20px, 2.6vw, 30px);background:var(--dark-2)}
.calc table{width:100%;border-collapse:collapse;font-size:var(--s--1)}
.calc td{padding:9px 0;border-bottom:1px solid #22362E}
.calc td:last-child{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.calc tr:last-child td{border-bottom:0;font-weight:600;color:var(--amber-2)}

.incl{display:grid;gap:10px 26px;margin-top:1.4em;padding:0;list-style:none}
@media (min-width:560px){.incl{grid-template-columns:1fr 1fr}}
.incl li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:var(--s--1);color:var(--on-dark-soft)}
.incl b{color:var(--amber-2);font-family:"IBM Plex Mono",monospace;font-weight:500}

.nope{list-style:none;padding:0;margin:1.5em 0 0;display:grid;gap:13px}
.nope li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:var(--s--1)}
.nope .x{font-family:"IBM Plex Mono",monospace;color:var(--amber)}

.faq{margin-top:clamp(24px, 3vw, 40px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:15px;
     font-family:"IBM Plex Mono",monospace;color:var(--amber);font-size:1.15rem}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.faq .a{padding:0 0 19px;color:var(--ink-soft);max-width:70ch;font-size:var(--s--1)}
.todo{border-left:3px solid var(--amber);padding:9px 0 9px 13px;
      background:color-mix(in srgb,var(--amber) 10%,transparent);display:block}

.split{display:grid;gap:clamp(24px, 4vw, 56px);align-items:start}
@media (min-width:920px){.split{grid-template-columns:1fr 1.15fr}}

footer{background:var(--dark);color:var(--on-dark);padding-block:clamp(40px, 5vw, 68px)}
.foot-grid{display:grid;gap:32px 40px;grid-template-columns:1fr}
@media (min-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}
.foot-merk .brand{margin:0}
.foot-merk p{color:var(--on-dark-soft);font-size:var(--s--1);margin-top:12px;max-width:34ch}
.foot-kol{display:flex;flex-direction:column;gap:9px;font-size:var(--s--1)}
.foot-kop{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:4px}
.foot-kol a{color:var(--on-dark);text-decoration:none;opacity:.86}
.foot-kol a:hover{opacity:1;text-decoration:underline}
.foot-kol a[aria-current="page"]{opacity:1;color:var(--amber-2)}
.foot-onder{margin-top:34px;padding-top:20px;border-top:1px solid #2D443B;font-size:var(--s--1);color:var(--on-dark-soft)}

.h1-kicker{display:block;font-weight:500;line-height:1.4;margin-bottom:clamp(.8rem, 1.6vw, 1.5rem);text-wrap:wrap;
     font-size:clamp(.82rem, 1.05vw, 1rem)}

/* ── AI-pagina: het AI-blok, meetingverslag en taakinvoer, zoals in de app ── */
.aiblok{border:1px solid #E9E9EC;border-radius:8px;background:#F8F9F8;padding:10px;margin-bottom:12px}
.aiblok svg{width:12px;height:12px;fill:none;stroke:#1E4D42;stroke-width:2;stroke-linejoin:round;flex:none}
.ai-l{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;margin-bottom:6px}
.ai-in{border:1px solid #E4E4E8;border-radius:7px;background:#fff;padding:7px 9px;font-size:11px;min-height:40px}
.ai-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.ai-u{font-size:10px;color:#8A8E96;line-height:1.4}
.ai-knop{gap:5px;background:#F0F2F0;border-color:#F0F2F0;font-weight:500}
.ai-toel{border-top:1px solid #E9E9EC;margin-top:8px;padding-top:7px;font-size:10px;color:#8A8E96;line-height:1.5}
.ai-toel b{color:#1A1F27;font-weight:500}
.veld{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #F2F2F4;font-size:11px;align-items:start}
.veld b{color:#8A8E96;font-weight:500}
.veld-lang span{line-height:1.55}
.vchip{justify-self:start;background:#F0F2F0;border-radius:6px;padding:1px 7px}
.ms-kop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ms-kop .sub{margin-right:auto}
.ms-knop{font-size:10.5px;color:#3E434B}
.ms-blok{margin-bottom:11px}
.ms-l{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A8E96;margin-bottom:4px}
.ms-blok p,.ms-blok li{font-size:11px;line-height:1.5}
.ms-blok ul{margin:0;padding-left:16px}
.ap{border:1px solid #E9E9EC;border-radius:8px;padding:8px 9px;margin-bottom:6px}
.ap-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ap-r>b{font-size:11px;font-weight:600}
.ap-c{margin-top:5px;border-left:2px solid #E9E9EC;padding-left:7px;font-size:10px;font-style:italic;color:#8A8E96}
.tinv{border:1px solid #E9E9EC;border-radius:8px;padding:6px 12px 9px}
.tinv-r{display:flex;align-items:center;gap:10px;height:30px}
.tinv-plus{color:#8A8E96;font-size:15px}
.tinv-t{font-size:12px}
.tchips{display:flex;flex-wrap:wrap;gap:5px;padding-left:22px}
.tchip{display:inline-flex;align-items:center;gap:4px;height:21px;border-radius:6px;background:#E3EEE8;
     color:#1B4A3F;font-size:10.5px;font-weight:500;padding:0 5px 0 7px}
.tchip svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tchip em{font-style:normal;font-weight:700;color:#B5820F}
.tchip i{font-style:normal;opacity:.6;margin-left:2px}
.fi-meta{margin-top:.8em !important;font-family:"IBM Plex Mono",monospace;font-size:.74rem !important;
     letter-spacing:.02em;color:var(--water) !important}
.regels{display:grid;gap:1px;margin-top:clamp(24px, 3vw, 38px);background:rgba(255,255,255,.14);
     border:1px solid rgba(255,255,255,.14)}
@media (min-width:700px){.regels{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.regels{grid-template-columns:repeat(3,1fr)}}
.regels>div{background:var(--dark);padding:clamp(18px, 2.2vw, 26px)}
.regels h3{font-size:var(--s-0)}
.regels p{margin-top:.45em;font-size:var(--s--1);color:var(--on-dark-soft)}

/* ── vergelijken ── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vk-rij{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){.vk-rij{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.vk-rij{grid-template-columns:repeat(3,1fr)}}
.vk-kaart{background:var(--paper-2);padding:clamp(18px, 2.2vw, 26px);text-decoration:none;display:flex;flex-direction:column;gap:.5em}
.vk-kaart:hover{background:var(--paper)}
.vk-kaart:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.vk-kaart h3{font-size:var(--s-1);hyphens:auto;overflow-wrap:break-word}
.vk-kaart p{font-size:var(--s--1);color:var(--ink-soft)}
.vk-kaart span{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--amber)}
.past{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.past{grid-template-columns:1fr 1fr}}
.past>div{background:var(--paper);padding:clamp(18px, 2.2vw, 26px)}
.past h3{font-size:var(--s-0)}
.past p{margin-top:.45em;font-size:var(--s--1);color:var(--ink-soft)}
.past .past-hippo{background:var(--water-band);color:#F2F7F3}
.past .past-hippo p{color:#C9DED5}
.kort{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.kort{grid-template-columns:1fr 1fr}}
.kort>div{background:var(--paper-2);padding:clamp(18px, 2.2vw, 26px)}
.kort h3{font-size:var(--s-0)}
.kort ul{margin:.7em 0 0;padding-left:1.1em;display:grid;gap:.45em;font-size:var(--s--1);color:var(--ink-soft)}
.kort .kort-hippo{background:var(--water-band);color:#F2F7F3}
.kort .kort-hippo ul{color:#D5E6DE}
.tekstblok{max-width:70ch;color:var(--ink-soft)}
.tekstblok p+p{margin-top:.8em}
.tekstblok a,.faq .a a,.vtab a{color:var(--ink);text-decoration-color:var(--amber);text-underline-offset:2px}
.vtab-intro{max-width:70ch;color:var(--ink-soft);font-size:var(--s--1);margin-bottom:14px}
.vtab-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper-2);-webkit-overflow-scrolling:touch}
.vtab-wrap:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.vtab{width:100%;border-collapse:collapse;font-size:var(--s--1);min-width:560px}
.vtab-matrix{min-width:1080px}
/* op een breed scherm past de volledige vergelijking zonder schuiven; smaller blijft ze zijwaarts scrollen, met de eerste kolom vast */
@media (min-width:1000px){.vtab-matrix{min-width:0;table-layout:fixed}.vtab-matrix th,.vtab-matrix td{padding:10px 9px}.vtab-matrix tbody th[scope="row"]{width:17%;min-width:0}}
.vtab th,.vtab td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.vtab thead th{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
     color:var(--ink-faint);font-weight:500;border-bottom:1px solid var(--line);background:var(--paper-2)}
.vtab thead th a{color:var(--ink-soft)}
.vtab tbody th[scope="row"]{font-weight:600;width:22%;min-width:170px}
.vtab-matrix tbody th[scope="row"]{position:sticky;left:0;background:var(--paper-2);z-index:1}
.vtab tr.vg th{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
     color:var(--water);padding-top:20px;background:var(--paper-2)}
.vtab .vh-hippo{color:var(--water)}
.vc-hippo{background:color-mix(in srgb,var(--water) 8%,transparent)}
.vgl-c .vgl-i{display:inline-block;width:1.25em;font-weight:700}
.vc-ja .vgl-i::before{content:"✓";color:var(--water)}
.vc-nee .vgl-i::before{content:"✕";color:#B0463A}
.vc-deels .vgl-i::before{content:"◐";color:var(--amber)}
.vc-extra .vgl-i::before{content:"€";color:var(--amber)}
.vc-onbekend .vgl-i::before{content:"?";color:var(--ink-faint)}
.vc-info .vgl-i{display:none}
.vgl-c .vgl-s{font-weight:600}
.vgl-c .vgl-s+.vgl-t::before{content:", "}
.vgl-c .vgl-t{color:var(--ink-soft)}
.vgl-n{font-size:.68em;margin-left:2px}
.vgl-n a{text-decoration:none;color:var(--amber)}
:root[data-theme="dark"] .vc-nee .vgl-i::before{color:#E08A7E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vc-nee .vgl-i::before{color:#E08A7E}}
.bronnen{margin-top:clamp(36px, 4vw, 52px);border-top:1px solid var(--line);padding-top:18px;font-size:.8rem;color:var(--ink-faint)}
.faq + .bronnen{border-top:0;padding-top:0} /* de laatste vraag heeft al een lijn eronder */
.bronnen-kop{font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;margin-bottom:8px}
.bronnen ol{margin:0 0 10px;padding-left:1.6em;display:grid;gap:3px}
.bronnen li{word-break:break-word}
@media (min-width:900px){.bronnen ol{display:block;columns:2;column-gap:36px}.bronnen li{break-inside:avoid;margin-bottom:3px}}
.bronnen a{color:var(--ink-soft)}
.bronnen li:target{background:color-mix(in srgb,var(--amber) 18%,transparent)}
.merken{font-size:.76rem;color:var(--ink-faint);margin-top:10px;max-width:90ch}

.mod-ai{display:grid;gap:.5em;margin-top:1px;background:var(--water-band);color:#F2F7F3;text-decoration:none;
     padding:clamp(20px, 2.6vw, 30px);border:1px solid var(--water-band)}
@media (min-width:900px){.mod-ai{grid-template-columns:auto 1fr auto;align-items:center;gap:28px}}
.mod-ai .eyebrow{color:#C9DED5}
.mod-ai-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:-.02em;line-height:1.2}
.mod-ai .go{color:var(--amber-2);font-family:"IBM Plex Mono",monospace;font-size:var(--s--1)}
.mod-ai:hover{background:var(--water-2)}
.mod-ai:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.nope-meer{margin-top:1.2em;color:var(--ink-soft);max-width:60ch}
.nope-meer a{color:var(--ink);text-decoration-color:var(--amber);text-underline-offset:2px}

.menu-panel-smal{width:min(320px,80vw);grid-template-columns:1fr}

.kort-enkel{grid-template-columns:1fr !important}

/* merkteken in de kop van een portaalscherm */
.app-head>svg{width:20px;height:20px;flex:none;display:block}

.chain-donker{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.chain-donker .step{background:var(--dark)}
.chain-donker .step p{color:var(--on-dark-soft)}
.op-maat-regel{margin-top:clamp(28px, 3.4vw, 40px);padding:16px 18px;border-left:3px solid var(--amber);
     background:var(--paper-2);max-width:78ch;color:var(--ink-soft)}
.op-maat-regel a,.band-dark p a{color:inherit;text-decoration-color:var(--amber);text-underline-offset:2px}
.op-maat-regel a{color:var(--ink)}
.kort a{color:inherit;text-decoration-color:var(--amber);text-underline-offset:2px}

/* tabel in een FAQ-antwoord (reactietijden) */
.faq .a p+p,.faq .a table+p{margin-top:.7em}
.faq-tab{border-collapse:collapse;margin-top:.8em;font-size:var(--s--1);width:100%;max-width:560px}
.faq-tab th,.faq-tab td{text-align:left;padding:7px 12px 7px 0;border-bottom:1px solid var(--line-soft)}
.faq-tab th{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.faq-tab td:last-child{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* ── startpagina: op maat, drie lagen van een omgeving met maatwerk bovenaan ── */
.stapel{display:grid;margin-top:clamp(28px, 4vw, 48px)}
.tier{display:grid;gap:16px 32px;padding:clamp(20px, 2.6vw, 32px) clamp(18px, 2.6vw, 34px)}
@media (min-width:860px){.tier{grid-template-columns:minmax(220px, 1fr) 2.4fr;align-items:center}}
.tier-k{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.tier-kop h3{font-size:var(--s-1);margin-top:.3em}
.tier-kop p{font-size:var(--s--1);margin-top:.35em}
.tier-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tier-chips li{display:inline-flex;align-items:center;gap:8px;font-size:var(--s--1);line-height:1.2;
     padding:8px 12px;border-radius:2px}

/* maatwerk: amber, stukken die erbij komen */
.tier-maat{background:var(--amber);color:#14100A;padding-block:clamp(26px, 3.4vw, 42px)}
.tier-maat .tier-kop h3{font-size:var(--s-2)}
.tier-maat .tier-kop p{color:#3A2A12}
.tier-maat .tier-chips li{border:1.5px dashed rgba(20,16,10,.5);background:rgba(255,255,255,.18);font-weight:600}
.tier-maat .tier-chips li::before{content:"+";font-family:"IBM Plex Mono",monospace;font-weight:600}

/* zelf ingesteld: schakelaars */
.tier-inst{background:var(--dark-2);box-shadow:inset 1px 0 #2D443B,inset -1px 0 #2D443B}
.tier-inst .tier-k{color:var(--amber-2)}
.tier-inst .tier-kop p{color:var(--on-dark-soft)}
.tier-inst .tier-chips li{border:1px solid #2D443B;color:var(--on-dark)}
.tier-inst .tier-chips li::before{content:"";width:18px;height:10px;border-radius:5px;flex:none;
     background:radial-gradient(circle at 13px 5px,var(--dark) 3px,transparent 3.5px) var(--amber-2)}

/* de basis: volle kleur, alles inbegrepen */
.tier-basis{background:var(--water-band);color:#F2F7F3}
.tier-basis .tier-k{color:#A9C9BC}
.tier-basis .tier-kop p{color:#C9DED5}
.tier-basis .tier-chips li{background:rgba(255,255,255,.09)}
.tier-basis .tier-chips li::before{content:"";width:8px;height:4px;flex:none;margin-top:-3px;
     border:solid #A9C9BC;border-width:0 0 2px 2px;transform:rotate(-45deg)}

.maat-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
     margin-top:clamp(24px, 3vw, 36px)}
.maat-stappen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:var(--s--1);color:var(--on-dark-soft)}
.maat-stappen b{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--amber-2);margin-right:.6em}

.menu-panel a:last-child:nth-child(odd){grid-column:1/-1}

/* ── golf als grens tussen secties: de volgende sectie golft omhoog, een detaillijn volgt verschoven ── */
.golf{line-height:0;height:clamp(28px, 3.6vw, 48px);overflow:hidden}
.golf svg{display:block;width:100%;height:100%}
.golf .golf-smal{display:none}
@media (max-width:700px){.golf{height:34px}.golf .golf-breed{display:none}.golf .golf-smal{display:block}}
.golf-van-paper{background:var(--paper)} .golf-vlak-paper{fill:var(--paper)}
.golf-van-paper2{background:var(--paper-2)} .golf-vlak-paper2{fill:var(--paper-2)}
.golf-van-dark{background:var(--dark)} .golf-vlak-dark{fill:var(--dark)}
.golf-van-water{background:var(--water-band)} .golf-vlak-water{fill:var(--water-band)}
.golf-streep{fill:none;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.golf-streep-licht{stroke:var(--line)}
.golf-streep-donker{stroke:#5E8577}

/* ── rapporten: zes KPI-tegels en de takenlijst ── */
.vit-6{grid-template-columns:repeat(6,1fr)}
.taak-grid{display:grid;grid-template-columns:170px 1fr;gap:14px}
.taak-lijsten{display:flex;flex-direction:column;gap:1px;font-size:11px}
.tl-l{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;color:#4B5159}
.tl-l b{margin-left:auto;font-weight:400;color:#A2A6AD;font-family:"IBM Plex Mono",monospace;font-size:10px}
.tl-l i{width:7px;height:7px;border-radius:50%;display:block;flex:none}
.tl-l.on{background:#E3EEE8;color:#1B4A3F;font-weight:600}
.tl-kop{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:#A2A6AD;padding:10px 8px 3px}
.taak{display:grid;grid-template-columns:18px 1fr;gap:9px;padding:9px 4px;border-bottom:1px solid #F2F2F4}
.tk-o{width:14px;height:14px;border:1.5px solid #C4C9CF;border-radius:50%;margin-top:1px}
.tk-klaar{background:#1E4D42;border-color:#1E4D42}
.tk-t{font-size:11.5px}
.tk-m{display:flex;align-items:center;gap:7px;margin-top:4px}
.tk-m em{font-style:normal;font-weight:700;color:#B5820F;font-size:10.5px}

/* een sectie direct na een golf sluit erop aan, zonder eigen marge */
.golf + section, .golf + div{margin-top:0 !important}
/* een inhoudsblok zonder eigen sectiepadding krijgt ruimte voor de golf die erop volgt */
.wrap:has(+ .golf){padding-bottom:clamp(40px, 5vw, 72px)}

/* lopende tekst (privacyverklaring) */
.tekst{max-width:68ch;padding-top:clamp(28px,4vw,48px)}
.tekst h2{font-size:var(--s-1);margin-top:1.8em}
.tekst h2:first-child{margin-top:0}
.tekst p{margin-top:.8em;color:var(--ink-soft)}
.tekst code{font-family:"IBM Plex Mono",monospace;font-size:.88em}

/* aanvraagformulier op /demo/ */
.aanvraag{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (min-width:900px){.aanvraag{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.formulier{display:grid;gap:18px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,30px)}
.velden{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 16px;align-items:start}
@media (min-width:560px){.velden{grid-template-columns:repeat(2,minmax(0,1fr))}.velden .breed{grid-column:1/-1}}
.formulier label{display:grid;grid-template-rows:auto auto;align-content:start;gap:6px;font-weight:600;font-size:.94rem}
.formulier .opt{font-weight:400;color:var(--ink-faint);font-size:.86em}
.formulier input:not([type=checkbox]),.formulier textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-height:42px;width:100%}
.formulier textarea{resize:vertical;min-height:96px}
.formulier input:focus-visible,.formulier textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.formulier [aria-invalid=true]{border-color:#B4452C}
.formulier .vink{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.formulier .vink input{margin-top:.3em;width:17px;height:17px;accent-color:var(--water)}
.formulier .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.verstuur .klein{font-size:var(--s--1);color:var(--ink-faint);margin:0;flex:1 1 220px}
.formulier button[disabled]{opacity:.6;cursor:progress;transform:none}
.melding{margin:0;padding:12px 14px;border-radius:8px;background:var(--water-pale);color:var(--ink)}
.melding.fout{background:color-mix(in srgb,#C0502F 18%,var(--paper));color:var(--ink)}
.foot-onder p{margin:0}.foot-onder p+p{margin-top:.5em}
.liever h3{font-size:var(--s-1)}
.liever p{margin-top:.6em;color:var(--ink-soft)}

/* --- telefoonschermen op /mobiel/ (nagetekend uit de app, zie docs/overdracht.md) --- */
.fonts.twee{grid-template-columns:repeat(auto-fit,minmax(0,266px));justify-content:center}
@media (min-width:640px){.fonts.twee{grid-template-columns:repeat(2,minmax(0,266px));justify-content:start}}
.fon{height:540px;flex:none}
.fon-body{overflow:hidden;position:relative}
.f-rij{display:flex;align-items:center;gap:6px}
.f-knop{margin-left:auto;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:7px;background:#1E4D42;color:#fff;font-size:9.5px;font-weight:600;white-space:nowrap}
.f-knop.licht{background:#fff;color:#16221D;border:1px solid #E1E3E7;margin-left:0}
.f-knop.groen{background:#1F7A4D;width:100%;justify-content:center;height:30px;font-size:11px;margin:0}
.f-seg{display:inline-flex;border:1px solid #E1E3E7;border-radius:7px;overflow:hidden;font-size:9px}
.f-seg span{padding:3px 8px;color:#6E727A}.f-seg span.on{background:#1E4D42;color:#fff}
.f-klein{font-size:9px;color:#8A8E96}
.f-mono{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:#8A8E96}
.f-sep{height:1px;background:#EEF0F2;margin:8px -11px}
/* agenda */
.ag-kop{display:flex;align-items:baseline;gap:6px;padding:6px 0 6px 34px;border-bottom:1px solid #EEF0F2;font-size:10px}
.ag-kop b{font-size:10.5px}.ag-kop .tot{margin-left:auto;font-size:9px;color:#6E727A}
.ag-grid{position:relative;margin-left:34px;border-left:1px solid #EEF0F2}
.ag-uur{height:34px;border-top:1px solid #F2F3F5;position:relative}
.ag-uur span{position:absolute;left:-34px;top:-6px;width:30px;text-align:right;font-size:8.5px;color:#A2A6AD;font-family:"IBM Plex Mono",monospace}
.ag-blok{position:absolute;left:3px;right:3px;border-radius:5px;padding:3px 5px;font-size:8.5px;line-height:1.25;overflow:hidden}
.ag-blok b{font-size:9px;display:block}
.ag-blok .d{position:absolute;right:5px;top:3px;font-weight:600}
.ag-uren{background:#1F4A3E;color:#fff}
.ag-uren2{background:#9A5A16;color:#fff}
.ag-meet{background:#E4EFEA;border:1px solid #B7D2C6;color:#1E4D42}
.ag-plan{background:rgba(201,120,31,.15);border:1px solid #C9781F;color:#8A4F12}
.ag-nu{position:absolute;left:-3px;right:0;height:0;border-top:1.5px solid #12201C}
.ag-nu::before{content:"";position:absolute;left:-3px;top:-4px;width:6px;height:6px;border-radius:50%;background:#12201C}
/* formulier */
.f-tabs{display:flex;gap:2px;border-bottom:1px solid #EEF0F2;margin:0 -11px 8px;padding:0 8px;font-size:9.5px}
.f-tabs span{padding:6px 6px;color:#8A8E96;border-bottom:2px solid transparent}.f-tabs span.on{color:#16221D;border-color:#1E4D42;font-weight:600}
.f-veld{margin-bottom:7px}
.f-veld>i{display:block;font-style:normal;font-size:9px;color:#6E727A;margin-bottom:2px}
.f-in{border:1px solid #E1E3E7;border-radius:6px;padding:5px 7px;font-size:10px;min-height:24px;background:#fff}
.f-in.leeg{color:#A2A6AD}
.f-twee{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.f-strip{font-size:8.5px;color:#1B5537;background:#E1F0E7;border-radius:5px;padding:3px 6px;margin-top:3px}
.f-chip{display:inline-block;font-size:9px;border:1px solid #E1E3E7;border-radius:999px;padding:1px 6px;margin-right:3px}
.f-vink{display:flex;align-items:center;gap:5px;font-size:9.5px;margin:4px 0}
.f-vink i{width:11px;height:11px;border:1px solid #C9CDD3;border-radius:3px;display:inline-block;flex:none}
.f-vink i.aan{background:#1E4D42;border-color:#1E4D42;position:relative}
.f-vink i.aan::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.f-vink.uit{color:#B6BAC1}.f-vink.uit i{border-color:#E1E3E7}
.f-voet{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;border-top:1px solid #EEF0F2;background:#fff;display:flex;gap:6px}
/* ticket */
.f-titel{font-size:14px;font-weight:700;line-height:1.2;margin:4px 0 8px}
.f-lv{display:grid;grid-template-columns:62px 1fr;gap:3px 8px;font-size:9.5px;align-items:center}
.f-lv i{font-style:normal;color:#8A8E96}
.f-av{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#E1F0E7;color:#1B5537;font-size:7px;font-weight:700;vertical-align:middle;margin-right:3px}
.f-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:middle}
.f-comment{border:1px solid #EEF0F2;border-radius:7px;padding:6px 7px;font-size:9.5px;margin-top:5px}
.f-comment b{font-size:9.5px}
.f-event{font-size:8.5px;color:#8A8E96;margin-top:5px;padding-left:4px}
/* bottom sheet en dialoog */
.f-dim{position:absolute;inset:0;background:rgba(16,24,22,.42)}
.f-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:14px 14px 0 0;padding:10px 11px 46px}
.f-dialoog{position:absolute;left:14px;right:14px;top:40px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.f-info{font-size:9px;background:#F3F6F1;border-radius:6px;padding:5px 7px;color:#42564E;margin-bottom:7px}
.f-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px}
.f-kaarten span{border:1px solid #E1E3E7;border-radius:7px;padding:7px;font-size:9.5px;display:flex;align-items:center;gap:5px}
.f-kaarten span.on{border-color:#1E4D42;background:#EEF5F1;font-weight:600}
.f-kaarten svg,.f-ico{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* portaal */
.f-cta{background:#1E4D42;color:#EAF2EE;border-radius:9px;padding:9px;font-size:9.5px;line-height:1.35;margin-bottom:9px}
.f-cta span{display:inline-block;margin-top:6px;background:#fff;color:#1E4D42;border-radius:6px;padding:3px 8px;font-weight:600}
.f-kop{font-size:10px;font-weight:700;margin:8px 0 4px}
.f-groep{font-size:9px;font-weight:600;color:#8C3126;margin:4px 0 3px}
.f-groep.n{color:#6E727A}
.f-lijn{padding:5px 0;border-bottom:1px solid #F2F3F5;font-size:9.5px}
.f-lijn .s{font-size:8.5px;color:#8A8E96;margin-top:1px}
/* ondertekenen */
.f-band{background:#1E4D42;color:#fff;margin:-9px -11px 8px;padding:10px 11px;display:flex;align-items:center;gap:7px;font-size:8.5px}
.f-band b{display:block;font-size:10.5px}
.f-band .tegel{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.f-sign{height:74px;border:1.5px dashed #C9CDD3;border-radius:7px;position:relative;background:#FCFCFD}
.f-sign svg{position:absolute;inset:6px 10px;width:calc(100% - 20px);height:calc(100% - 12px);fill:none;stroke:#1a2b6b;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-sign span{position:absolute;right:6px;bottom:4px;font-size:8.5px;color:#6E727A}
/* inloggen */
.f-login{padding:28px 18px 0;text-align:left}
.f-login h4{font:700 15px/1.2 "Bricolage Grotesque",sans-serif;margin:16px 0 3px}
.f-code{font:500 16px "IBM Plex Mono",monospace;letter-spacing:.35em;text-align:center}

/* --- extra desktopschermen: herinneringen, afwezigheid, ondertekenen, huisstijl --- */
.cbx{display:inline-block;width:11px;height:11px;border:1px solid #C9CDD3;border-radius:3px;vertical-align:middle;position:relative}
.cbx.on{background:#1E4D42;border-color:#1E4D42}
.cbx.on::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.t td.nu{font-weight:600;color:#16221D}
.t.nw td,.t.nw th{white-space:nowrap}
.fchip b{font-weight:600;margin-left:4px;color:#8A8E96}
.gbtn,.rbtn{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:9.5px;font-weight:600;margin-right:4px}
.gbtn{background:#E1F0E7;color:#1B5537}.rbtn{background:#FBE3E0;color:#8C3126}
.ab-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.ab-kaart{border:1px solid #E9E9EC;border-radius:8px;padding:9px 10px;font-size:10.5px}
.ab-kaart .bar{height:5px;border-radius:99px;background:#F0F1F3;margin:6px 0 4px;overflow:hidden}
.ab-kaart .bar i{display:block;height:100%;background:#1E4D42}
.sgn{display:grid;grid-template-columns:1fr 290px;gap:14px;padding:14px;background:#F6F7F6;font-size:11px;color:#16221D}
.sgn-kaart{background:#fff;border:1px solid #E9E9EC;border-radius:9px;overflow:hidden}
.sgn-band{background:#1E4D42;color:#fff;padding:12px 14px;display:flex;align-items:center;gap:9px;font-size:9.5px}
.sgn-band b{display:block;font-size:12.5px}
.sgn-band .tegel{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.2)}
.sgn-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 14px;font-size:10.5px}
.sgn-meta i{display:block;font-style:normal;font-size:9px;color:#8A8E96}
.sgn-doc{padding:12px 14px}
.sgn-doc .regel{height:7px;border-radius:3px;background:#EEF0F2;margin-bottom:7px}
.sgn-doc .rij{display:flex;justify-content:space-between;font-size:10.5px;padding:5px 0;border-bottom:1px solid #F2F3F5}
.sgn-kol{padding:14px}
.sgn-kol .sv{margin-bottom:9px}.sgn-kol .sv i{display:block;font-style:normal;font-size:9.5px;color:#6E727A;margin-bottom:3px}
.sgn-kol .in{border:1px solid #E1E3E7;border-radius:6px;padding:6px 8px;font-size:10.5px}
.sgn-kol .pad{height:96px;border:1.5px dashed #C9CDD3;border-radius:7px;position:relative;background:#FCFCFD}
.sgn-kol .pad svg{position:absolute;inset:10px 16px;width:calc(100% - 32px);height:calc(100% - 20px);fill:none;stroke:#1a2b6b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sgn-kol .go{display:flex;justify-content:center;align-items:center;height:30px;border-radius:7px;background:#1F7A4D;color:#fff;font-weight:600;font-size:11.5px;margin-top:4px}
.hs-tabs{display:flex;gap:16px;border-bottom:1px solid #EEF0F2;padding:0 12px;font-size:11px}
.hs-tabs span{padding:8px 0;color:#8A8E96;border-bottom:2px solid transparent}.hs-tabs span.on{color:#16221D;border-color:#1E4D42;font-weight:600}
.hs-kaart{border:1px solid #E9E9EC;border-radius:9px;padding:12px 14px;margin-top:12px;font-size:11px}
.hs-rij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #F2F3F5}
.hs-rij .l{width:140px;color:#42564E}
.hs-rij .v{flex:1;color:#16221D}
.hs-sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.1)}
.hs-voor{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 4px}
.hs-voor div{border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px;font-size:10.5px}
.hs-knop{padding:3px 10px;border-radius:999px;color:#fff;font-weight:600;font-size:10px}

.f-url{margin:-9px -11px 0;padding:6px 11px;background:#F2F3F5;border-bottom:1px solid #E6E8EB;font-size:9.5px;color:#42564E;text-align:center}
.f-optie{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;border-top:1px solid #EEF0F2;font-size:10.5px}
.f-optie svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-optie.on{background:#EEF5F1;border-radius:7px;padding:8px 8px;margin:0 -6px;font-weight:600;color:#1E4D42;border-top-color:transparent}
.f-app-klein svg{width:100%;height:100%;display:block}
.f-app-klein{width:30px;height:30px;border-radius:8px;border:1px solid #E6E8EB;display:grid;place-items:center;padding:4px;flex:none;box-sizing:border-box}

/* ── abonnementen en licenties: onderdelen van de nagetekende schermen ── */
.c-warn{display:inline-flex;align-items:center;gap:4px}
.c-warn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lfoot{display:flex;flex-wrap:wrap;gap:4px 18px;border-top:1px solid #E9E9EC;padding:8px 12px;margin-top:auto;
      font-size:10.5px;color:#6E727A;font-variant-numeric:tabular-nums}
.lfoot span:first-child{color:#1A1F27;font-weight:600}
.seg{display:flex;justify-content:flex-end;gap:3px;margin-bottom:9px}
.seg span{font-size:10px;padding:3px 8px;border-radius:6px;color:#6E727A}
.seg span.on{background:#1E4D42;color:#fff;font-weight:600}
.vt .v.ok{color:#1B5537}
.t tr.dim td{opacity:.5}
.ico-s{width:13px;height:13px;fill:none;stroke:#8A8E96;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.lnk{color:#1B4A3F;text-decoration:underline;text-underline-offset:2px}
.racties{display:inline-flex;gap:8px;color:#8A8E96}
.racties svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ltoev{display:flex;align-items:center;gap:8px;margin-top:11px}
.tellers{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 6px}
.tellers div{border:1px solid #E9E9EC;background:#F7F8F7;border-radius:8px;padding:6px 10px}
.tellers span{display:block;font-size:9.5px;color:#8A8E96}
.tellers b{font-size:12px;font-variant-numeric:tabular-nums}
.pchart{display:block;width:100%;height:auto}
.pchart text{font-size:9px;fill:#8A8E96;font-family:"IBM Plex Sans",system-ui,sans-serif}
.pc-grid{stroke:#EDEEF0;stroke-width:1}
.pc-gep{fill:#1E4D42}
.pc-gepl{fill:#A9CBBE}
.pc-ref{fill:none;stroke:#8A8E96;stroke-width:1.6;stroke-dasharray:5 4}
.pc-leg{display:flex;gap:14px;font-size:9.5px;color:#8A8E96;margin:4px 0 12px}
.pc-leg span{display:inline-flex;align-items:center;gap:5px}
.pc-leg i{display:block;width:9px;height:9px;border-radius:2px}
.pc-leg .l-gep{background:#1E4D42} .pc-leg .l-gepl{background:#A9CBBE}
.pc-leg .l-ref{height:0;width:14px;border-top:1.6px dashed #8A8E96;border-radius:0}
.pgrid th,.pgrid td{padding-inline:3px}
.pgrid th{font-size:8px;letter-spacing:.04em}
.ginp{display:inline-block;min-width:30px;padding:2px 5px;border:1px solid #E4E4E8;border-radius:5px;text-align:right;font-size:10.5px}
.ginp.ovr{border-color:#E7C98F}

/* ── voor wie: zeven beroepen, op de startpagina met een achtste kaart ── */
@media (min-width:1020px){
  .vk-rij-8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vk-rij-8 .vk-kaart h3{font-size:1.16rem}
  .vk-rij-7{grid-template-columns:repeat(12,minmax(0,1fr))}
  .vk-rij-7>a{grid-column:span 3}
  .vk-rij-7>a:nth-child(n+5){grid-column:span 4}
}
@media (min-width:700px) and (max-width:1019px){.vk-rij-7>a:last-child{grid-column:span 2}}
.vk-rij .vk-rest{background:var(--water-band);color:#F2F7F3}
.vk-rij .vk-rest:hover{background:#2C6455}
.vk-rij .vk-rest p{color:#C9DED5}
.vk-rij .vk-rest span{color:var(--amber-2)}

/* ── te factureren: selectiebalk en voet zoals in de app ── */
.selbalk{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #E9E9EC;background:#F1F6F3;font-size:11px}
.selbalk b{font-weight:600;margin-right:4px}
.selbalk .sb-wis{margin-left:auto;color:#6E727A;font-size:10.5px}
.t tr.sel-rij td{background:#F7FAF8}
.lfoot .lf-tot{margin-left:auto;color:#1A1F27;font-weight:600}



/* ── prototype: van lead tot getekende offerte (/rondleiding/) ── */
.demo-balk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:clamp(22px, 3vw, 34px) 0 14px}
.demo-stappen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.demo-stappen li{display:inline-flex;align-items:center;gap:8px;padding:.5em .9em;border:1px solid var(--line);font-size:var(--s--1);
     font-weight:600;color:var(--ink-faint);background:var(--paper)}
.demo-stappen li b{font-family:"IBM Plex Mono",monospace;font-weight:500}
.demo-stappen li.nu{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.demo-stappen li.nu b{color:var(--amber-2)}
.demo-stappen li.klaar{color:var(--ink-soft)}
.demo-stappen li.klaar b{color:var(--water)}
.demo-opnieuw{margin-left:auto;font:inherit;font-size:var(--s--1);background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:4px}
.demo-podium{position:relative}
.demo-schaal{position:relative;background:#fff;border:1px solid #E9E9EC;border-radius:8px;overflow:hidden;
     color:#1A1F27;font-size:12px;line-height:1.45;box-shadow:0 24px 50px -32px rgba(10,26,21,.38)}
.demo-schaal.geschaald>.demo-binnen{position:absolute;left:0;top:0;width:1066px;transform:scale(var(--z));transform-origin:0 0}
.demo-binnen{position:relative}
.demo-app{min-height:640px}
.demo-app .app-main{position:relative}
.demo button{font:inherit;color:inherit}
.demo-schaal button.obtn,.demo-schaal button.pbtn,.demo-schaal button.tab,.demo-schaal .dm-item{cursor:pointer;border-style:solid}
.demo-schaal button.pbtn{border:0}
.demo-schaal button.obtn{background:#fff}
.demo-schaal .pbtn[disabled],.demo-schaal .obtn[disabled]{opacity:.45;cursor:default}
.demo-schaal .rtabs .tab{background:none;border:0;border-bottom:2px solid transparent;font-size:11px;color:#6E727A;padding:7px 0;cursor:pointer}
.demo-schaal .rtabs .tab.on{color:#1A1F27;font-weight:600;border-bottom-color:#1E4D42}
.demo-schaal .fchip[data-filter]{cursor:pointer}
.demo-schaal .t tbody tr[data-groep]{cursor:pointer}
.demo-schaal .t tbody tr[data-groep]:hover td{background:#F7F9F7}
.sc{display:inline-block;min-width:26px;text-align:center;font-size:9.5px;font-weight:600;padding:1px 7px;border-radius:999px}
.sc-koud{background:#FDE2E1;color:#B42318}.sc-warm{background:#FFEDD5;color:#C2410C}
.sc-heet{background:#FEF9C3;color:#A16207}.sc-zeerheet{background:#DCFCE7;color:#15803D}
.st-blauw{background:#E8F0FD;color:#1D4ED8}
.lead-nieuw{display:none}
.lead-nieuw.toon{display:table-row;animation:d-in .6s ease-out}
.lead-nieuw.toon td{background:#FFF8EC}
@keyframes d-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fasebalk{display:flex;gap:2px;font-size:9.5px}
.fasebalk span{flex:1;text-align:center;padding:5px 4px;background:#F1F3F2;color:#8A8E96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fasebalk span:first-child{border-radius:6px 0 0 6px}.fasebalk span:last-child{border-radius:0 6px 6px 0}
.fasebalk span.voorbij{background:#DCE9E2;color:#1B4A3F}
.fasebalk span.on{background:#1E4D42;color:#fff;font-weight:600}
.tijdlijn{margin-top:12px;display:grid;gap:2px}
.tl-item{display:flex;gap:9px;padding:9px 4px;border-bottom:1px solid #F2F2F4}
.tl-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin-top:1px}
.tl-t{font-size:11px}
.tl-tekst{font-size:11px;color:#42564E;margin:3px 0;max-width:60ch}
.tl-na-verstuur,.tl-na-teken{display:none}
.demo[data-fase-verstuurd] .tl-na-verstuur,.demo[data-fase-getekend] .tl-na-teken{display:flex;animation:d-in .5s ease-out}
.ai-ster{width:11px;height:11px;fill:none;stroke:#7C5CC4;stroke-width:2;stroke-linejoin:round;vertical-align:-1px}
.dmenu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;background:#fff;border:1px solid #E4E4E8;border-radius:8px;
     box-shadow:0 12px 30px -12px rgba(0,0,0,.3);padding:4px;min-width:170px;display:flex;flex-direction:column}
.dmenu[hidden]{display:none}
.dmenu-op{right:auto;left:0;top:auto;bottom:calc(100% + 4px)}
.dm-item{display:flex;align-items:center;gap:6px;justify-content:space-between;text-align:left;padding:6px 9px;border-radius:6px;font-size:11px;background:none;border:0;color:#2A2F36}
button.dm-item:hover,span.dm-item:hover{background:#F2F4F3}
.dm-rood{color:#B42318}
.dmodal{position:absolute;inset:0;z-index:10;background:rgba(18,32,28,.38);display:flex;align-items:flex-start;justify-content:center;padding-top:44px}
.dmodal[hidden]{display:none}
.dm-doos{background:#fff;border-radius:10px;width:480px;padding:16px 18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);display:grid;gap:11px;max-height:560px;overflow:auto}
.dm-kop b{font-size:13px}
.dm-veld{display:grid;gap:4px}
.nb-kaart{max-width:640px}
.nb-velden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dm-veld>i{font-style:normal;font-size:10px;font-weight:600;color:#4B5159}
.dm-veld input,.dm-veld select,.dm-veld textarea,.sgn-kol input.in,.sgn-kol textarea.in{font:inherit;font-size:11px;border:1px solid #DFE2E6;border-radius:6px;padding:6px 8px;background:#fff;color:#1A1F27;width:100%;box-sizing:border-box}
.dm-hulp{white-space:normal;font-size:9.5px}
.dm-check{display:flex;align-items:center;gap:7px;font-size:11px;padding:6px 8px;border:1px solid #E9E9EC;border-radius:6px;cursor:pointer}
.dm-rt{border:1px solid #DFE2E6;border-radius:6px;padding:8px;font-size:10.5px;color:#2A2F36;line-height:1.5}
.dm-bijlage{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;border:1px solid #E9E9EC;border-radius:6px;padding:4px 8px}
.dm-bijlage svg{width:12px;height:12px;fill:none;stroke:#8A8E96;stroke-width:2}
.dm-fout{color:#B42318;font-size:10.5px;margin:0}
.dm-voet{display:flex;justify-content:flex-end;gap:8px}
.dm-ai{display:inline-flex;align-items:center;gap:5px}
.dm-ai.bezig{opacity:.7}
.d-intro{font-size:11px;color:#42564E;line-height:1.55;margin:0}
.qt tr.blok2,.d-preview .blok2,.qt tr.tot2{display:none}
.demo[data-blok2] .qt tr.blok2{display:table-row;animation:d-in .5s ease-out}
.demo[data-blok2] .qt tr.tot2{display:table-row}
.demo[data-blok2] .qt tr.tot1{display:none}
.demo[data-blok2] .d-preview .blok2{display:flex}
.d-preview .rij{display:flex;justify-content:space-between;font-size:10.5px;padding:5px 0;border-bottom:1px solid #F2F3F5}
.d-preview .regel{height:7px;border-radius:3px;background:#EEF0F2}
.d-toasts{position:absolute;right:14px;bottom:14px;z-index:20;pointer-events:none;display:grid;gap:6px;justify-items:end}
.d-toast{background:#16221D;color:#fff;font-size:11px;padding:8px 12px;border-radius:8px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);animation:d-in .3s ease-out;max-width:360px}
.dbuiten{min-height:640px;background:#F6F7F6}
.browser{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EDEFEE;border-bottom:1px solid #E1E4E2;font-size:10.5px;color:#6E727A}
.browser span{width:9px;height:9px;border-radius:50%;background:#D4D8D6}
.browser b{font-weight:500;margin-left:8px}
.mail{max-width:620px;margin:28px auto;background:#fff;border:1px solid #E9E9EC;border-radius:10px;padding:20px 24px;font-size:12px;color:#2A2F36}
.mail-kop{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.mail h3{font-size:15px;margin:0 0 10px;font-family:"IBM Plex Sans",system-ui,sans-serif;letter-spacing:0}
.mail p{margin:0 0 9px;line-height:1.55}
.mail-link{background:none;border:0;padding:0;color:#1D4ED8;text-decoration:underline;cursor:pointer}
.pad-wrap{position:relative;border:1.5px dashed #C9CDD3;border-radius:7px;background:#FCFCFD;height:96px}
.dpad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pad-hint{position:absolute;inset:0;display:grid;place-items:center;color:#A2A6AD;font-size:10.5px;pointer-events:none}
.pad-wrap.getekend .pad-hint{display:none}
.pad-wis{position:absolute;right:6px;bottom:5px;font-size:9.5px;background:none;border:0;color:#6E727A;text-decoration:underline;cursor:pointer}
.sgn-kol label.sv{display:block}
.sgn-kol button.go{width:100%;border:0;cursor:pointer}
.weiger-link{display:block;width:100%;text-align:center;margin-top:8px;background:none;border:0;text-decoration:underline;cursor:pointer}
.sgn-klaar{text-align:center;padding-top:26px}
.sgn-klaar .vink{width:42px;height:42px;border-radius:50%;background:#DCFCE7;display:grid;place-items:center;margin:0 auto 10px}
.sgn-klaar .vink svg{width:22px;height:22px;fill:none;stroke:#15803D;stroke-width:2.5}
.sgn-klaar.geweigerd .vink{background:#FDE2E1}.sgn-klaar.geweigerd .vink svg{stroke:#B42318}
.klaar-rij{display:grid;gap:8px;margin-top:16px;text-align:left}
.klaar-rij i{display:block;font-style:normal;font-size:9.5px;color:#8A8E96}
.klaar-rij img{max-width:100%;height:56px;border:1px solid #EEF0F2;border-radius:6px;background:#fff}
/* de hint: buiten het geschaalde scherm, op ware grootte */
.coach{position:absolute;z-index:30;max-width:290px;background:#14100A;color:#F6F1E8;font-size:.86rem;line-height:1.45;
     padding:11px 13px;border-radius:8px;box-shadow:0 16px 34px -12px rgba(0,0,0,.5)}
.coach[hidden]{display:none}
.coach p{margin:0}
.coach-knoppen{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.coach-knoppen:empty{display:none}
.coach-knoppen button{font:600 .82rem "IBM Plex Sans",system-ui,sans-serif;border:0;border-radius:6px;padding:6px 10px;cursor:pointer;background:var(--amber-2);color:#14100A}
.coach-knoppen button.licht{background:transparent;color:#F6F1E8;text-decoration:underline;padding:6px 2px}
.coach.midden{left:50% !important;top:50% !important;transform:translate(-50%,-50%);max-width:380px}
.coach-ring{position:absolute;z-index:29;pointer-events:none;border:2px solid #E0A33E;border-radius:7px;box-shadow:0 0 0 4px rgba(224,163,62,.28);animation:d-ring 1.6s ease-in-out infinite}
.coach-ring[hidden]{display:none}
@keyframes d-ring{50%{box-shadow:0 0 0 8px rgba(224,163,62,.12)}}
@media (prefers-reduced-motion:reduce){.coach-ring,.lead-nieuw.toon,.d-toast,.tl-item{animation:none}}
.demo [hidden]{display:none !important} /* .app en .fasebalk zetten zelf een display, hidden moet winnen */
/* prototype, stap 5 tot 8 */
.demo-schaal .d-zoek{font:inherit;font-size:10.5px;color:#1A1F27;width:190px;outline:none}
.demo-schaal .d-zoek::placeholder{color:#9A9EA6}
.comp-in{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:10.5px;color:#1A1F27;resize:vertical;outline:none}
.comp-in::placeholder{color:#A2A6AD}
.fasebalk span[data-fase],.fasebalk span[data-pfase]{cursor:pointer}
.lnk-knop{background:none;border:0;padding:0;cursor:pointer;color:#1B4A3F;text-decoration:underline;text-underline-offset:2px}
.wz-rij{border:1px solid #E9E9EC;border-radius:8px;padding:10px 12px;margin-top:9px}
.wz-kop{display:flex;align-items:center;gap:6px;font-size:11.5px}
.wz-kop svg,.bl-kop svg,.wz-klaar>svg{width:13px;height:13px;fill:none;stroke:#C9781F;stroke-width:2;flex:none}
.wz-open{display:grid;gap:8px;margin-top:9px}
.wz-keus{display:flex;gap:4px}
.wz-keus span{font-size:10.5px;padding:4px 9px;border:1px solid #E4E4E8;border-radius:6px;color:#6E727A}
.wz-keus span.on{border-color:#1E4D42;color:#1B4A3F;font-weight:600;background:#F1F6F3}
.wz-knop{justify-content:center;width:100%}
.wz-klaar{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:9px 10px;border-radius:7px;background:#ECF7F0;font-size:11px;color:#1B5537}
.wz-klaar>svg{stroke:#1F7A4D;margin-top:2px}
.wz-alles{margin-top:9px;padding:9px 10px;border-radius:7px;background:#ECF7F0;color:#1B5537;font-size:11px;font-weight:600}
.bl-kop{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:11.5px}
.bl-term{display:inline-flex;align-items:center;gap:5px}
.bl-term.warn{border-color:#E7C98F;color:#8A5B14;background:#FFF8EC}
.tri{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bl-tekst{display:block;font-size:9px;margin-top:2px}
.dm-waarsch{background:#FFF8EC;border:1px solid #F1DDB2;border-radius:7px;padding:8px 10px;font-size:10.5px;color:#6B4A12;display:grid;gap:3px}
.term-form{display:grid;grid-template-columns:1.6fr .6fr 1fr 1.2fr auto;gap:6px;align-items:end}
.term-form .pbtn{height:28px;width:28px;justify-content:center;padding:0;font-size:15px}
.dm-rij3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.dm-los{font:inherit;font-size:12px;border:1px solid #DFE2E6;border-radius:6px;padding:8px 9px;width:100%;box-sizing:border-box}
.ster{color:#C9781F;font-size:13px}
.dkb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;min-height:520px}
.dk{background:#F7F8F7;border-radius:8px;padding:8px}
.dk .kbh{margin-bottom:8px}
.dk-lijst{min-height:60px;display:grid;gap:7px;align-content:start}
.dk-kaart{cursor:grab;margin-bottom:0;touch-action:none}
.dk-kaart:hover{border-color:#C9D2C7}
.dk-spook{position:fixed;z-index:1000;pointer-events:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.35);transform:rotate(2deg);background:#fff;font-size:12px}
.ticket{position:absolute;top:0;right:0;bottom:0;width:360px;background:#fff;border-left:1px solid #E4E4E8;box-shadow:-18px 0 30px -24px rgba(0,0,0,.35);padding:14px;display:grid;gap:12px;align-content:start;z-index:4}
.tk-kop{display:flex;align-items:center;gap:6px}
.tk-titel{flex:1;font:inherit;font-size:14px;font-weight:600;border:1px solid transparent;border-radius:6px;padding:4px 6px;color:#1A1F27}
.tk-titel:focus{border-color:#DFE2E6;outline:none}
.tk-velden{display:grid;gap:8px}
.tk-velden label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;font-size:10.5px}
.tk-velden i{font-style:normal;color:#8A8E96}
.tk-velden select{font:inherit;font-size:11px;border:1px solid #DFE2E6;border-radius:6px;padding:5px 7px}
.tk-omschr{font:inherit;font-size:11px;border:1px solid #DFE2E6;border-radius:6px;padding:8px;resize:vertical}
.demo-schaal [data-goed-bs]{cursor:pointer}
.demo-schaal [data-goed-bs]:hover td,.demo-schaal tr[data-tf]:hover td{background:#F7F9F7}
.demo-schaal tr[data-tf],.demo-schaal [data-u-cbx]{cursor:pointer}
.coach{pointer-events:none} /* de hint mag nooit een klik op het scherm eronder tegenhouden */
.coach-knoppen button{pointer-events:auto}
.dkb{-webkit-user-select:none;user-select:none}
.bl-kop svg,.qt .fold svg{width:13px;height:13px}
.demo-schaal button.pbtn{color:#fff}
.demo-schaal button.fchip{border:0;background:none;cursor:pointer}
.demo-schaal button.fchip.on{background:#EFF1EF}
.dm-check input[type=checkbox]{width:auto;flex:none;margin:0} /* .dm-veld input zet anders ook vinkjes op volle breedte */
.dm-check .sub{margin-left:auto}

/* ── rondleiding op een telefoon: de mobiele weergave van Hippo, op ware grootte ──
   Zelfde markup en logica als de desktopversie; app.js zet .mob op de demo onder 640px.
   Maten uit de app: tekst 14px, knoppen 36px, titel 20px, invoer 16px (geen zoom op iOS). */
.demo:not(.mob) .m-only,.demo:not(.mob) .m-titel{display:none !important}
.demo.mob .demo-schaal{font-size:14px;border-radius:12px}
.demo.mob .demo-binnen{height:min(780px, calc(100svh - 82px));min-height:520px}
.demo.mob .demo-app{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}
.demo.mob .demo-app .app-main{position:static;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.demo.mob .app-body{padding:16px;overflow:visible}
.demo.mob .dbuiten{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
/* onderbalk: vier tabs en Menu, 56px */
.m-onder{flex:none;display:flex;height:56px;border-top:1px solid #E9E9EC;background:#fff}
.demo .m-onder .bn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
     background:none;border:0;padding:0 2px;border-radius:0;font-size:10px;font-weight:500;color:#6E727A;cursor:pointer}
.demo .m-onder .bn svg{width:20px;height:20px;opacity:1;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo .m-onder .bn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo .m-onder .bn.on{background:none;color:#1E4D42;font-weight:500}
/* Menu: de volledige zijbalk schuift van links in */
.demo.mob .app-side{position:absolute;left:0;top:0;bottom:0;width:240px;z-index:12;transform:translateX(-102%);transition:transform .2s ease-out;
     border-right:1px solid #E9E9EC;box-shadow:12px 0 30px -18px rgba(0,0,0,.35)}
.demo.mob.menu-open .app-side{transform:none}
.demo.mob .app-logo{height:56px;padding:0 8px 0 16px;font-size:15px}
.demo.mob .app-logo svg{width:24px;height:24px}
.demo.mob .app-nav{overflow:auto;padding:12px 8px}
.demo.mob .app-side .nv{font-size:14px;padding:5px 12px;gap:12px}
.demo.mob .app-side .nv svg{width:18px;height:18px}
.demo.mob .nsec{font-size:11px;padding:12px 12px 4px}
.m-x{margin-left:auto;width:36px;height:36px;border:0;background:none;font-size:22px;line-height:1;color:#6E727A;cursor:pointer;border-radius:8px}
.m-scrim{position:absolute;inset:0;z-index:11;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s}
.demo.mob.menu-open .m-scrim{opacity:1;pointer-events:auto}
/* titelbalk: titel met ⋯ en de hoofdknop, daaronder de metalijn, dan zoeken en filters */
.demo.mob .app-head{height:auto;flex-wrap:wrap;padding:12px 16px;gap:12px 8px;align-items:center}
.demo.mob .app-head>*{order:7}
.demo.mob .app-head .kr{display:none}
.demo.mob .app-head .m-terug{order:0;width:36px;height:36px;margin-left:-8px;margin-right:-4px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:#1A1F27;cursor:pointer}
.m-terug svg,.m-zoek svg,.srch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo:not(.mob) .srch svg{display:none}
.demo.mob .app-head .ph-t{order:1;font-size:20px;line-height:1.25;white-space:normal;flex:0 1 auto;min-width:0;
     display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.demo.mob .app-head .cnt{order:1;font-size:12px;font-weight:600;background:#E3EEE8;color:#1E4D42;padding:2px 8px}
.demo.mob .app-head .ph-t{flex:1 1 0;min-width:45%}
.demo.mob .app-head:has(.cnt) .ph-t{flex:0 1 auto;min-width:0}
.demo.mob .app-head .cnt{margin-right:auto}
.demo.mob .app-head .acties,.demo.mob .app-head .m-rechts,.demo.mob .app-head>.pbtn,.demo.mob .app-head>.obtn{order:3}
.demo.mob .app-head>span[style*="margin-left:auto"]:empty{display:none}
.demo.mob .app-head .m-rechts{margin-left:auto}
.demo.mob .acties{width:36px;padding:0;justify-content:center;font-size:0 !important}
.demo.mob .acties::before{content:"\22EF";font-size:20px;line-height:1;color:#3E434B}
.demo.mob .app-head.m-meta::after,.demo.mob .app-head.m-r2::before{content:"";flex-basis:100%;height:0;margin:-6px 0}
.demo.mob .app-head.m-meta::after{order:4}
.demo.mob .app-head.m-r2::before{order:6}
.demo.mob .app-head.m-r2:not(.m-meta)::before{order:4}
.demo.mob .app-head .c-st,.demo.mob .app-head .c-ty,.demo.mob .app-head .c-nu,.demo.mob .app-head .ster,.demo.mob .app-head>.sub{order:5}
.demo.mob .app-head>.sub{font-size:14px;flex:0 1 auto;min-width:0}
.demo.mob .app-head .m1{margin-left:36px}
.demo.mob .app-head .m-zoek,.demo.mob .app-head .srch{order:7;width:36px;min-width:36px;height:36px;padding:0;justify-content:center;
     border:1px solid #E1E3E7;border-radius:8px;background:#fff;color:#4B5159;display:grid;place-items:center;margin:0 !important;cursor:pointer}
.demo.mob .app-head .srch>span{display:none}
.demo.mob .app-head .chips{order:8;flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
     -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.demo.mob .app-head .chips::-webkit-scrollbar{display:none}
.demo.mob .app-head .ibtn{order:9;width:36px;height:36px;border-radius:8px;margin-left:auto}
.demo.mob .app-head .ibtn svg{width:18px;height:18px}
.demo.mob .app-head .d-zoek{display:none}
.demo.mob .app-head.zoek-open .d-zoek{display:block;order:8;flex:1;min-width:0;width:auto;height:36px;font-size:16px;border-radius:8px;padding:0 10px;text-align:left}
.demo.mob .app-head.zoek-open .chips,.demo.mob .app-head.zoek-open .ibtn{display:none}
.demo.mob .fchip{height:36px;font-size:14px;padding:0 12px;border-radius:8px;flex:none;white-space:nowrap}
.demo.mob .obtn,.demo.mob .pbtn{height:36px;font-size:14px;padding:0 14px;border-radius:8px}
.demo.mob .ibtn{width:36px;height:36px;border-radius:8px}
.demo.mob .sub{font-size:13px}
.demo.mob .c-st,.demo.mob .c-ty,.demo.mob .c-nu{font-size:12px;padding:2px 9px}
.demo.mob .ster{font-size:18px}
/* knoppen die niet naast de titel passen, zakken samen naar een eigen rij, rechts */
.demo.mob .app-head.m-knoprij::after{content:"";flex-basis:100%;height:0;margin:-6px 0;order:2}
/* tabs: één scrollende rij */
.demo.mob .rtabs{gap:24px;padding:0 16px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.demo.mob .rtabs::-webkit-scrollbar{display:none}
.demo.mob .rtabs span,.demo.mob .rtabs .tab{font-size:14px;padding:12px 0;flex:none}
.demo.mob .rtabs span.c-nu{font-size:12px;padding:2px 9px}
/* lijsten worden kaarten: naam bovenaan, daaronder label links en waarde rechts */
.demo.mob table.kaarten,.demo.mob table.kaarten tbody{display:block}
.demo.mob table.kaarten thead{display:none}
.demo.mob table.kaarten tr{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;padding:12px 16px;border-bottom:1px solid #EEF0F1}
.demo.mob .app-body>table.kaarten,.demo.mob [data-ts-paneel]>table.kaarten,.demo.mob [data-goed-lijst]>table.kaarten{margin:-16px}
.demo.mob table.kaarten td{display:flex;justify-content:space-between;gap:12px;padding:0;border:0;font-size:12px;text-align:right;min-width:0}
.demo.mob table.kaarten td::before{content:attr(data-l);color:#8A8E96;text-align:left;flex:none}
.demo.mob table.kaarten td:first-child{font-size:14px;margin-bottom:2px}
.demo.mob table.kaarten td:first-child::before{content:none}
.demo.mob table.kaarten td.num{font-family:inherit}
.demo.mob table.kaarten tr.leeg td{font-size:14px}
.demo.mob table.kaarten tr.leeg td::before{content:none}
.demo.mob .d-leads td:nth-child(5){display:none}
.demo.mob .lead-nieuw.toon{display:grid}
/* kaart met vinkje links */
.demo.mob table.kaarten tr:has(.cbx){grid-template-columns:28px minmax(0,1fr)}
.demo.mob table.kaarten tr:has(.cbx)>td{grid-column:2}
.demo.mob table.kaarten tr:has(.cbx)>td:first-child{grid-column:1;grid-row:1 / span 6;width:auto !important;margin:0;align-self:start;padding-top:2px}
.demo.mob .cbx{width:18px;height:18px;border-radius:4px}
.demo.mob .cbx.on::after{left:5.5px;top:1.5px;width:5px;height:10px;border-width:0 2px 2px 0}
.demo.mob .ts-k td.m-titel{grid-row:1;font-size:14px;font-weight:500;justify-content:flex-start;text-align:left;margin-bottom:2px}
.demo.mob .ts-k td.m-titel::before{content:none}
.demo.mob .ts-k td:nth-child(5),.demo.mob .ts-k td:nth-child(6){display:none}
.demo.mob .tf-k td:nth-child(2){font-size:14px;margin-bottom:2px}
.demo.mob .tf-k td:nth-child(2)::before{content:none}
.demo.mob .gl-k td:nth-child(2){font-size:14px;margin-bottom:4px}
.demo.mob .gl-k td:nth-child(2)::before{content:none}
/* goedkeuren: per medewerker een kop, per registratie een kaart */
.gd-kop{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mw-kop td{background:#F7F8F7;font-size:11px}
.demo.mob .gd-kop{margin:-4px 0 12px;gap:8px}
.demo.mob .gd-kop b{font-size:16px !important;flex-basis:100%;order:1}
.demo.mob .gd-kop [data-goed-terug]{order:0;flex-basis:100%;font-size:14px;text-align:left}
.demo.mob .gd-kop .sub{order:1;flex-basis:100%;font-size:14px}
.demo.mob .gd-kop>span[style]{display:none}
.demo.mob .gd-kop .obtn,.demo.mob .gd-kop .pbtn{order:2}
.demo.mob .gd-kop .obtn{margin-left:auto}
.demo.mob .gd-kop .obtn~.obtn{margin-left:0}
.demo.mob table.kaarten.gd-k{margin:0 -16px}
.demo.mob table.kaarten.gd-k tr{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.demo.mob table.kaarten.gd-k tr.mw-kop{display:block;background:#F7F8F7;padding:10px 16px}
.demo.mob table.kaarten.gd-k tr.mw-kop td{display:block;background:none;text-align:left;font-size:14px}
.demo.mob table.kaarten.gd-k tr.mw-kop td::before{content:none}
.demo.mob table.kaarten.gd-k td::before{content:none}
.demo.mob table.kaarten.gd-k td:nth-child(3){grid-row:1;grid-column:1;font-size:14px;font-weight:500;justify-content:flex-start}
.demo.mob table.kaarten.gd-k td:nth-child(4){grid-row:1;grid-column:2;font-size:14px;font-variant-numeric:tabular-nums}
.demo.mob table.kaarten.gd-k td:nth-child(1){grid-row:2;grid-column:1 / -1;color:#8A8E96;justify-content:flex-start;font-family:inherit !important;margin:0}
.demo.mob table.kaarten.gd-k td:nth-child(2){grid-row:2;grid-column:1 / -1;justify-content:flex-start;padding-left:84px}
.demo.mob table.kaarten.gd-k td:nth-child(2)::before{content:"·";margin-left:-10px;color:#8A8E96}
.demo.mob table.kaarten.gd-k td:nth-child(5){grid-row:3;grid-column:1 / -1;justify-content:flex-start}
.demo.mob table.kaarten.gd-k td:nth-child(6){grid-row:4;grid-column:1 / -1;justify-content:flex-start;text-align:left;font-size:14px;white-space:normal}
/* selectiebalk en voet lopen over meer lijnen */
.demo.mob .selbalk{flex-wrap:wrap;padding:10px 16px;font-size:14px;gap:8px}
.demo.mob .lfoot{font-size:12px;padding:10px 16px;gap:4px 14px}
.demo.mob .lfoot .lf-tot{margin-left:0;flex-basis:100%}
/* detailschermen: één kolom, velden met het label erboven */
.demo.mob .grid2{grid-template-columns:minmax(0,1fr) !important;gap:16px}
.demo.mob .kcard,.demo.mob .cardbox{padding:12px 16px;border-radius:10px}
.demo.mob .kcard-h,.demo.mob .sech{font-size:14px;margin-bottom:6px}
.demo.mob .kcard-h i,.demo.mob .sech i{width:24px;height:24px}
.demo.mob .frow{grid-template-columns:minmax(0,1fr);gap:2px;padding:6px 0;font-size:14px;border-bottom:0}
.demo.mob .frow span{text-align:left}
.demo.mob .kcard [style*="font-size:11px"],.demo.mob [data-wel-offerte]{font-size:14px !important}
.demo.mob .comp{padding:12px;border-radius:10px}
.demo.mob .comp-tab{font-size:14px;padding:6px 10px}
.demo.mob .comp-in{font-size:16px}
.demo.mob .tl-t,.demo.mob .tl-tekst{font-size:14px}
.demo.mob .tl-item{padding:12px 4px}
/* fasen: chevrons die horizontaal scrollen */
.demo.mob .fasebalk{overflow-x:auto;scrollbar-width:none;gap:0;border-radius:8px;margin:0 0 16px}
.demo.mob .fasebalk::-webkit-scrollbar{display:none}
.demo.mob .fasebalk span{flex:none;min-width:152px;height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;
     padding:0 22px;margin-right:-14px;border-radius:0 !important;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%)}
.demo.mob .fasebalk span:first-child{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)}
.demo.mob .fasebalk span.voorbij{background:#5C8378;color:#fff}
/* offerteregels: naam en mapbedrag op de eerste lijn, keuzes en berekening op de tweede */
.r2{display:contents}
.demo.mob .qt thead th:nth-child(2),.demo.mob .qt thead th:nth-child(3){display:none}
.demo.mob [data-paneel=inhoud] .qt,.demo.mob [data-paneel=inhoud] .qt tbody{display:block}
.demo.mob [data-paneel=inhoud] .qt thead{display:block}
.demo.mob [data-paneel=inhoud] .qt thead tr{display:flex;justify-content:space-between}
.demo.mob [data-paneel=inhoud] .qt tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;align-items:start;border-bottom:1px solid #F2F2F4}
.demo.mob .demo [data-paneel=inhoud] .qt tr.blok2{display:none}
.demo.mob[data-blok2] [data-paneel=inhoud] .qt tbody tr.blok2{display:grid}
.demo.mob:not([data-blok2]) [data-paneel=inhoud] .qt tbody tr.blok2,.demo.mob:not([data-blok2]) [data-paneel=inhoud] .qt tbody tr.tot2,.demo.mob[data-blok2] [data-paneel=inhoud] .qt tbody tr.tot1{display:none}
.demo.mob [data-paneel=inhoud] .qt td{border:0;padding:8px 4px;font-size:14px}
.demo.mob [data-paneel=inhoud] .qt td:nth-child(2),.demo.mob [data-paneel=inhoud] .qt td:nth-child(3){display:none}
.demo.mob [data-paneel=inhoud] .qt tr:not(.map):not(.tot1):not(.tot2) td:nth-child(4){display:none}
.demo.mob [data-paneel=inhoud] .qt tr.map td:nth-child(4){font-size:12px;font-weight:500;padding-top:10px}
.demo.mob [data-paneel=inhoud] .qt tbody tr:not(.tot1):not(.tot2)::after{content:"\22EF";grid-column:3;grid-row:1;color:#8A8E96;font-size:16px;line-height:1;padding-top:10px;text-align:center}
.demo.mob [data-paneel=inhoud] .qt tr:not(.map):not(.tot1):not(.tot2) td:first-child{grid-column:1 / 3}
.demo.mob [data-paneel=inhoud] .qt tr.tot1,.demo.mob [data-paneel=inhoud] .qt tr.tot2{grid-template-columns:minmax(0,1fr) auto;border-top:1px solid #E9E9EC}
.demo.mob .qt .r2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 0 0 52px}
/* de keuzes van een map lopen onder het bedrag en de puntjes door */
.demo.mob [data-paneel=inhoud] .qt tr.map .r2{margin-right:-150px;padding-left:28px}
.demo.mob [data-paneel=inhoud] .qt td.num,.demo.mob [data-ppaneel=budget] .qt td.num{font-family:inherit;font-variant-numeric:tabular-nums}
.demo.mob .qt .sel{font-size:12px;padding:4px 8px}
.demo.mob .qt .niet{font-size:12px}
.m-som{font-size:12px;color:#8A8E96;font-variant-numeric:tabular-nums;flex-basis:100%;white-space:nowrap}
.demo.mob .qt .grab svg,.demo.mob .qt .chev svg{width:14px;height:14px}
.demo.mob .qt .fold svg,.demo.mob .qt .ico svg{width:16px;height:16px}
.demo.mob [data-paneel=inhoud] .cardbox>div[style*="display:flex"]{flex-wrap:wrap}
.demo.mob [data-paneel=inhoud] .cardbox>div[style*="display:flex"] .sub{white-space:normal;flex-basis:100%;font-size:12px}
.demo.mob .d-intro{font-size:14px}
/* omzetten naar projecten */
.demo.mob .wz-kop{font-size:14px;flex-wrap:wrap}
.demo.mob .wz-keus{flex-wrap:wrap}
.demo.mob .wz-keus span{font-size:13px;padding:6px 10px}
.demo.mob .wz-klaar{flex-wrap:wrap;font-size:14px}
.demo.mob .wz-klaar .obtn{margin-left:28px !important}
.demo.mob .wz-alles{font-size:14px}
.demo.mob .sech .c-nu{margin-left:auto}
/* budgetlijnen: naam en bedrag, daaronder de voortgang */
.demo.mob [data-ppaneel=budget]>.cardbox:first-child{flex-wrap:wrap}
.demo.mob [data-ppaneel=budget]>.cardbox:first-child>div{flex-basis:100%;order:3}
.demo.mob .bl-kop{flex-wrap:wrap;font-size:14px}
.demo.mob .bl-kop .bl-term{margin-left:auto}
.demo.mob [data-ppaneel=budget] .qt,.demo.mob [data-ppaneel=budget] .qt tbody{display:block}
.demo.mob [data-ppaneel=budget] .qt tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;border-bottom:1px solid #F2F2F4}
.demo.mob [data-ppaneel=budget] .qt td{border:0;font-size:14px;padding:8px 0}
.demo.mob [data-ppaneel=budget] .qt tr[data-bl] td:nth-child(1){grid-column:1;padding-left:22px !important}
.demo.mob [data-ppaneel=budget] .qt tr[data-bl] td:nth-child(2){display:none}
.demo.mob [data-ppaneel=budget] .qt tr[data-bl] td:nth-child(3){grid-column:1 / -1;grid-row:2;width:auto !important;padding:0 0 10px 22px}
.demo.mob [data-ppaneel=budget] .qt tr[data-bl] td:nth-child(4){display:none}
.demo.mob [data-ppaneel=budget] .qt tr[data-bl] td:nth-child(5){grid-column:2;grid-row:1}
.demo.mob .bl-tekst{font-size:12px}
.demo.mob .mbar{height:6px}
/* projectfacturen en -uren: alleen wat op een telefoon past */
.demo.mob [data-ppaneel=facturen] .t td,.demo.mob [data-ppaneel=uren] .t td{font-size:13px}
.demo.mob [data-ppaneel=facturen] th:nth-child(n+2),.demo.mob [data-ppaneel=facturen] td:nth-child(n+2){display:none}
.demo.mob [data-ppaneel=uren]{overflow-x:auto}
/* board: één kolom tegelijk, gekozen met statustabs */
.m-kolomtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}
.m-kolomtabs::-webkit-scrollbar{display:none}
.m-kolomtabs .kt{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid #E4E4E8;border-radius:6px;
     background:#fff;font-size:12px;color:#6E727A;white-space:nowrap;cursor:pointer}
.m-kolomtabs .kt b{width:8px;height:8px;border-radius:50%;display:block}
.m-kolomtabs .kt span{font-size:10px;color:#A2A6AD}
.m-kolomtabs .kt.on{border-color:#1E4D42;background:#EEF5F1;color:#1A1F27}
.demo.mob .dkb{display:block;min-height:0}
.demo.mob .dk{display:none;padding:10px;border-radius:10px}
.demo.mob .dk.m-actief{display:block}
.demo.mob .dk-lijst{gap:8px}
.demo.mob .dk-kaart{touch-action:auto;cursor:pointer}
.demo.mob .kbh{font-size:12px;font-weight:600}
.demo.mob .kc{padding:10px;border-radius:10px}
.demo.mob .kc .t2{font-size:14px;font-weight:500}
.demo.mob .kc .id{font-size:11px}
/* ticket: schermvullend, eigenschappen onder elkaar */
.demo.mob [data-scherm=bord] .app-body{position:static !important}
.demo.mob .ticket{position:absolute;inset:0;width:auto;z-index:9;border:0;box-shadow:none;padding:0;gap:0;overflow:auto;align-content:start}
.demo.mob .tk-kop{flex-wrap:wrap;height:auto;padding:10px 16px;gap:8px;border-bottom:1px solid #E9E9EC}
.demo.mob .tk-kop .id{font-size:12px;margin-right:auto}
.demo.mob .tk-kop .obtn{width:36px;padding:0;justify-content:center;font-size:18px}
.demo.mob .tk-titel{order:5;flex-basis:100%;font-size:22px;padding:8px 0;margin:4px 0 0;border:0}
.demo.mob .tk-velden{padding:8px 24px 16px;gap:14px}
.demo.mob .tk-velden label{grid-template-columns:minmax(0,1fr);gap:4px;font-size:14px}
.demo.mob .tk-velden select{font-size:16px;padding:8px 10px}
.demo.mob .tk-omschr{margin:0 24px 24px;font-size:16px}
.demo.mob .dmenu{min-width:200px}
.demo.mob .dm-item{font-size:14px;padding:10px 12px}
/* dialogen: gecentreerde kaart met 16px marge, Nieuw ticket als bottom sheet */
.demo.mob .dmodal{align-items:center;padding:24px 16px}
.demo.mob .dm-doos{width:100% !important;max-height:100%;padding:16px 20px;border-radius:12px;gap:14px}
.demo.mob .dm-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demo.mob .dm-kop b{font-size:16px}
.demo.mob .dm-veld>i{font-size:12px}
.demo.mob .dm-veld input,.demo.mob .dm-veld select,.demo.mob .dm-veld textarea,.demo.mob .dm-los{font-size:16px;padding:8px 10px}
.demo.mob .dm-check{font-size:14px;flex-wrap:wrap;padding:10px}
.demo.mob .dm-check .sub{margin-left:24px;flex-basis:100%;white-space:normal;word-break:break-all}
.demo.mob .dm-rt,.demo.mob .dm-bijlage,.demo.mob .dm-fout,.demo.mob .dm-waarsch{font-size:13px}
.demo.mob .dm-hulp{font-size:12px}
.demo.mob .dm-rij3{grid-template-columns:1fr 1fr}
.demo.mob .dm-rij3 .u-datum{grid-column:1 / -1}
.demo.mob [data-modal=ticket]{align-items:flex-end;padding:0}
.demo.mob [data-modal=ticket] .dm-doos{border-radius:16px 16px 0 0;padding:0;gap:0}
.demo.mob [data-modal=ticket] .dm-kop{padding:12px 16px;border-bottom:1px solid #E9E9EC}
.demo.mob [data-modal=ticket] .dm-los{margin:16px;width:calc(100% - 32px)}
.demo.mob [data-modal=ticket] .dm-voet{padding:12px 16px;border-top:1px solid #E9E9EC}
/* betaaltermijnen: twee lijnen per termijn, het formulier in een raster */
.demo.mob [data-term-rijen] tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-bottom:1px solid #F2F2F4}
.demo.mob [data-term-rijen] td{border:0;padding:0;font-size:14px}
.demo.mob [data-term-rijen] td:nth-child(2),.demo.mob [data-term-rijen] td:nth-child(3){display:none}
.demo.mob [data-term-rijen] td:first-child>.sub{display:none}
.term-r2{display:block;font-size:12px;color:#8A8E96;font-variant-numeric:tabular-nums;margin-top:2px}
.demo.mob .term-form{grid-template-columns:1fr 1fr;gap:8px}
.demo.mob .term-form .dm-veld:first-child,.demo.mob .term-form .dm-veld:nth-child(4),.demo.mob .term-form .pbtn{grid-column:1 / -1}
.demo.mob .term-form .pbtn{width:100%;height:36px;font-size:14px}
/* factuur: tegels 2×2, regels als kaart */
.demo.mob .vit{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.demo.mob .vt{padding:12px 14px}
.demo.mob .vt .k{font-size:10px}
.demo.mob .vt .v{font-size:20px}
.demo.mob .f-k,.demo.mob .f-k tbody{display:block}
.demo.mob .f-k thead{display:none}
.demo.mob .f-k tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;column-gap:4px;padding:12px 0;border-bottom:1px solid #EEF0F1}
.demo.mob .f-k td{border:0;padding:0;font-size:12px;color:#8A8E96;font-family:inherit !important;font-variant-numeric:tabular-nums}
.demo.mob .f-k tr.f-regel td:nth-child(1){grid-column:1 / -1;font-size:14px;font-weight:500;color:#1A1F27;margin-bottom:4px;text-align:left}
.demo.mob .f-k tr.f-regel td:nth-child(2){font-family:inherit}
.demo.mob .f-k tr.f-regel td:nth-child(3)::before{content:"\00D7\00A0"}
.demo.mob .f-k tr.f-regel td:nth-child(4){font-size:14px;font-weight:500;color:#1A1F27}
.demo.mob .f-k tr.f-tot{grid-template-columns:minmax(0,1fr) auto;padding:8px 0;border:0}
.demo.mob .f-k tr.f-tot td{font-size:14px;color:inherit}
.demo.mob .f-k tr.f-tot td:first-child{text-align:left}
/* nieuw board */
.demo.mob .nb-velden{grid-template-columns:minmax(0,1fr)}
/* mail en ondertekenen: buiten Hippo, gewoon een telefoonscherm */
.demo.mob .browser{font-size:12px;padding:10px 14px}
.demo.mob .browser span{display:none}
.demo.mob .browser b{margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo.mob .mail{margin:0;border:0;border-radius:0;padding:20px 16px;font-size:15px}
.demo.mob .mail h3{font-size:18px}
.demo.mob .mail-kop{flex-wrap:wrap}
.demo.mob .sgn{display:flex;flex-direction:column;gap:16px;padding:16px;font-size:14px}
.demo.mob .sgn>div:first-child{display:contents}
.demo.mob .sgn>div:first-child>.sgn-kaart:first-child{order:1}
.demo.mob .sgn>.sgn-kaart{order:2}
.demo.mob .sgn>div:first-child>.sgn-kaart:nth-child(2){order:3;margin-top:0 !important}
.demo.mob .sgn-band{font-size:11px;padding:16px 20px}
.demo.mob .sgn-band b{font-size:16px}
.demo.mob .sgn-meta{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 20px;font-size:14px}
.demo.mob .sgn-meta i{font-size:12px}
.demo.mob .sgn-kol{padding:20px}
.demo.mob .sgn-kol .sv i{font-size:13px}
.demo.mob .sgn-kol input.in,.demo.mob .sgn-kol textarea.in{font-size:16px;padding:8px 10px}
.demo.mob .pad-wrap{height:200px}
.demo.mob .pad-hint{font-size:14px}
.demo.mob .pad-wis{font-size:13px}
.demo.mob .sgn-kol .go{height:40px;font-size:15px}
.demo.mob .sgn-doc{padding:16px 20px}
.demo.mob .sgn-doc p{font-size:13px !important}
.demo.mob .sgn-doc .rij{font-size:13px}
.demo.mob .sgn-kol .sub,.demo.mob .klaar-rij i{font-size:12px}
/* hint, ring en meldingen */
.demo.mob .coach{max-width:min(300px, calc(100% - 16px))}
.demo.mob .coach.midden{max-width:calc(100% - 32px);width:max-content}
.demo.mob .d-toasts{left:auto;right:16px;bottom:72px;width:min(22rem, calc(100% - 32px));justify-items:stretch}
.demo.mob .d-toast{font-size:13px;max-width:none}
.demo.mob .demo-balk{gap:10px}
.demo.mob .demo-stappen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;margin:0 -16px;padding:0 16px;box-sizing:content-box}
.demo.mob .demo-stappen::-webkit-scrollbar{display:none}
.demo.mob .demo-stappen li{flex:none}
.demo.mob .demo-opnieuw{margin-left:0}

/* ── oproep naar de rondleiding ── */
.rl-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
     margin-top:clamp(28px, 3.6vw, 44px);padding:clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
     background:var(--water-band);color:#F2F7F3}
.rl-cta .eyebrow{color:#A9C9BC}
.rl-t{margin-top:.35em;font-size:var(--s-1);font-family:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;font-weight:800;
     letter-spacing:-.02em;line-height:1.15;max-width:44ch}
.menu-panel a.menu-rl{grid-column:1/-1;background:var(--water-band)}
.menu-panel a.menu-rl .mi-t{color:#F2F7F3}
.menu-panel a.menu-rl .mi-d{color:#C9DED5}
.menu-panel a.menu-rl:hover,.menu-panel a.menu-rl:focus-visible{background:#2C6455}

/* ── cookiebanner (meten.js) ── */
.cookiebanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:560px;margin-left:auto;
     background:var(--ink);color:var(--paper);padding:16px 18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);
     display:grid;gap:12px;font-size:var(--s--1);line-height:1.5}
.cookiebanner[hidden]{display:none}
.cookiebanner p{margin:0}
.cookiebanner a{color:inherit}
.cookiebanner-knoppen{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cookiebanner .btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--paper)} /* weigeren even zichtbaar als aanvaarden */
.foot-cookies{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ── kennisrubriek (/kennis/) ── */
.byline{margin-top:1.2em;font-family:"IBM Plex Mono",monospace;font-size:var(--s--1);color:var(--ink-faint)}
.artikel h2{font-size:var(--s-2);margin-top:1.6em}
.artikel > h3,.artikel > section > h3{font-size:var(--s-1);margin-top:1.5em} /* tussenkop in de lopende tekst */
.artikel h2 + h3{margin-top:.6em}
.artikel ul:not([class]),.artikel ol:not([class]){margin:.8em 0 0;padding-left:1.3em;color:var(--ink-soft);display:grid;gap:.45em} /* alleen gewone opsommingen: een lijst met een klasse is een schema met eigen opmaak */
.artikel li strong,.artikel p strong{color:var(--ink)}
.artikel a{color:var(--ink);text-decoration-color:var(--amber);text-underline-offset:2px}
.stand{border-left:3px solid var(--amber);background:color-mix(in srgb,var(--amber) 9%,transparent);padding:12px 16px}
.stand p{margin:0}
.ktabel{width:100%;border-collapse:collapse;margin-top:1em;font-size:var(--s--1)}
.ktabel th{text-align:left;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.ktabel td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
.ktabel td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
@media (max-width:640px){.ktabel td:first-child{white-space:normal}}
.artikel .faq{margin-top:1em}
.k-lijst{display:grid;gap:1px;padding:1px;margin-top:clamp(28px, 3.6vw, 44px)}
@media (min-width:860px){.k-lijst{grid-template-columns:1fr 1fr}}
.k-kaart{background:var(--paper);box-shadow:0 0 0 1px var(--line);padding:clamp(18px, 2.4vw, 28px);text-decoration:none;display:grid;gap:.5em}
.k-kaart:hover{background:var(--paper-2)}
.k-kaart h2,.k-kaart h3{font-size:var(--s-1);margin-top:.2em}
.k-kaart p{font-size:var(--s--1);color:var(--ink-soft)}
.k-groep{margin-top:clamp(40px, 5vw, 64px);margin-bottom:0}
.k-groep + .k-lijst{margin-top:clamp(16px, 2vw, 24px)}
/* Filter per beroep bovenaan /kennis/ (app.js). Zonder JavaScript blijft hij verborgen en staat alles er. */
.k-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(24px, 3vw, 36px)}
.k-filter[hidden]{display:none}
.k-filter-kop{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px}
.k-filter button{font:inherit;font-size:var(--s--1);padding:7px 14px;min-height:40px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);border-radius:999px;cursor:pointer}
.k-filter button:hover{border-color:var(--ink-faint);color:var(--ink)}
.k-filter button[aria-pressed="true"]{background:var(--water-band);border-color:var(--water-band);color:#F2F7F3}
.k-filter button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.k-kaart[hidden],.k-groep[hidden],.k-lijst[hidden]{display:none}
.k-meta{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--ink-faint)}

/* artikel: inhoudstafel naast de tekst op brede schermen */
.art-grid{display:grid;gap:0 clamp(28px, 4vw, 56px);padding-top:clamp(24px, 3vw, 40px)}
.art-grid .artikel{max-width:760px;padding-top:0;min-width:0}
.art-grid .artikel > :first-child{margin-top:0} /* gelijk met "In dit artikel" ernaast */
.toc{display:none}
@media (min-width:1080px){
  .art-grid{grid-template-columns:200px minmax(0,1fr)}
  .toc{display:block;position:sticky;top:90px;align-self:start}
}
.toc-kop{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.toc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.toc a{display:block;padding:5px 0 5px 12px;margin-left:-1px;border-left:2px solid transparent;font-size:var(--s--1);color:var(--ink-soft);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--ink);border-left-color:var(--amber)}
.artikel h2[id]{scroll-margin-top:90px}
.artikel section[id]{scroll-margin-top:90px}

.kort-box{margin-top:18px;background:var(--paper-2);border:1px solid var(--line);padding:16px 18px}
.kort-kop{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--water)}
.kort-box ul{margin-top:.5em}

/* tijdlijn: verticaal op smal, horizontaal op breed */
.tijdlijn{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:0}
.tijdlijn li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);margin-left:6px;display:grid;gap:2px}
.tijdlijn li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--water)}
.tijdlijn li:last-child{border-left-color:transparent}
.tijdlijn b{font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:500;color:var(--ink)}
.tijdlijn span{font-size:var(--s--1);color:var(--ink-soft);line-height:1.4}
.tijdlijn li.tl-nu::before{background:var(--amber);border-color:var(--amber)}
.tijdlijn li.tl-nu b{color:var(--amber)}
@media (min-width:760px){
  .tijdlijn{grid-template-columns:repeat(5,1fr);gap:0 10px}
  .tijdlijn li{border-left:0;border-top:2px solid var(--line);margin:0;padding:16px 0 0}
  .tijdlijn li::before{left:0;top:-7px}
  .tijdlijn li:last-child{border-top-color:var(--line)}
}

.zk{font-size:.72rem;padding:2px 8px;border-radius:999px;white-space:nowrap}
.zk-a{background:color-mix(in srgb,var(--water) 14%,transparent);color:var(--water)}
.zk-v{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--ink)}
.zk-o{background:var(--line-soft);color:var(--ink-soft)}

/* één werkdag als balk */
.dag{margin:1.4em 0 0;padding:16px 16px 14px;border:1px solid var(--line);background:var(--paper-2)}
.dag-uren{position:relative;height:1.3em;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);margin-bottom:6px}
.dag-uren span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dag-uren span:first-child{transform:none}.dag-uren span:last-child{transform:translateX(-100%)}
@media (max-width:560px){.dag-uren span:nth-child(3){display:none}} /* 13:15 en 14:00 botsen op een smal scherm */
.dag-balk{display:flex;gap:3px;min-height:58px}
.dag-balk span{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:6px 8px;font-size:.74rem;line-height:1.25;min-width:0;overflow:hidden}
.dag-balk b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-project{background:var(--water-band);color:#F2F7F3}
.dg-intern{background:var(--ink-faint);color:#fff}
.dg-pauze{background:repeating-linear-gradient(45deg,var(--line-soft) 0 6px,transparent 6px 12px);color:var(--ink-faint);align-items:center}
.dag figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:var(--s--1);color:var(--ink-soft)}
.dag figcaption b{color:var(--ink)}
.dg-sw{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.dg-sw-p{background:var(--water-band)}.dg-sw-i{background:var(--ink-faint)}
@media (max-width:560px){.dag-balk span{font-size:.66rem;padding:5px}.dag-balk .dg-intern b,.dag-balk .dg-pauze{font-size:0}.dag-balk .dg-intern{font-size:.62rem}}

/* het blok "Zo doe je dit in Hippo" */
.inhippo{margin-top:2.2em;padding:clamp(18px, 2.6vw, 28px);background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--water)}
.inhippo h2{margin-top:.35em;font-size:var(--s-2)}
.inhippo .eyebrow{color:var(--water)}
.inhippo-shot{margin-top:16px}
.inhippo-punten{list-style:none;padding:0;margin-top:1.1em;display:grid;gap:8px}
@media (min-width:640px){.inhippo-punten{grid-template-columns:1fr 1fr}}
.inhippo-punten li{position:relative;padding-left:22px}
.inhippo-punten li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border:solid var(--water);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.inhippo-noot{font-size:var(--s--1);color:var(--ink-faint)}
.artikel .rl-cta{margin-top:2em}

.auteur{display:flex;gap:14px;align-items:flex-start;margin-top:2.4em;padding-top:18px;border-top:1px solid var(--line)}
.auteur-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:var(--line-soft)}
.auteur-av{width:46px;height:46px;border-radius:50%;background:var(--water-band);color:#F2F7F3;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:.85rem;flex:none}
.auteur p{margin:0;font-size:var(--s--1)}
.auteur-naam{font-weight:600;color:var(--ink)!important}

/* nagetekend formulier "Nieuwe registratie" */
.st-indigo{background:#EEF0FF;color:#4338CA}
.reg-kaart{max-width:560px;display:grid;gap:10px}
.reg-rij3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.rv{display:grid;gap:3px}
.rv>i{font-style:normal;font-size:10px;font-weight:600;color:#4B5159}
.rv-in{border:1px solid #DFE2E6;border-radius:6px;padding:6px 8px;font-size:11px;color:#1A1F27;background:#fff}
.reg-budget{white-space:normal}
.artikel .rl-cta p{color:inherit;margin-top:0} /* .tekst p maakt alinea's donker; in het groene blok moet de tekst licht blijven */
.artikel .rl-cta .rl-t{margin-top:.35em}
.artikel .rl-cta .eyebrow{color:#A9C9BC}

/* rekentools (rekentools.js) */
.rekentool{margin-top:1.4em;border:1px solid var(--line);border-top:3px solid var(--amber);background:var(--paper-2);padding:clamp(16px, 2.4vw, 24px)}
.rekentool-kop{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.rekentool h3{font-size:var(--s-1);margin-top:.3em}
.rk-grid{display:grid;gap:18px;margin-top:14px}
@media (min-width:700px){.rk-grid{grid-template-columns:1fr 1fr}}
.rk-in{display:grid;gap:10px}
.rk-in label{display:grid;gap:4px;font-size:var(--s--1);color:var(--ink-soft)}
.rk-in input{font:inherit;font-size:var(--s-0);padding:8px 10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;width:100%;box-sizing:border-box}
.rk-in input:focus{outline:2px solid var(--amber);outline-offset:1px}
.rk-in small{font-size:.75rem;color:var(--ink-faint)}
.rk-uit{background:var(--water-band);color:#F2F7F3;padding:16px 18px;display:grid;gap:8px;align-content:start}
.rk-uit div{display:flex;justify-content:space-between;gap:12px;font-size:var(--s--1);border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:6px}
.rk-uit div:last-child{border-bottom:0}
.rk-uit output{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.rk-uit .rk-hoofd{font-size:var(--s-0);font-weight:600;color:#fff}
.rk-uit .rk-hoofd output{color:var(--amber-2);font-size:var(--s-1)}
.rekentool:not(.rekentool-aan) .rk-uit output::after{content:"—"}
.rk-noot{margin-top:10px!important;font-size:.78rem!important;color:var(--ink-faint)!important}

/* formule als breuk */
.formule{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:1.1em 0 0;padding:14px 18px;background:var(--paper-2);border:1px solid var(--line);font-weight:600;color:var(--ink)}
.formule .f-is{color:var(--amber);font-family:"IBM Plex Mono",monospace}
.f-breuk{display:inline-grid;text-align:center}
.f-breuk b:first-child{border-bottom:2px solid var(--ink);padding-bottom:3px}
.f-breuk b:last-child{padding-top:3px}

/* opbouw van een offerte */
.opbouw{margin:1.2em 0 0}
.opbouw ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:ob}
@media (min-width:760px){.opbouw ol{grid-template-columns:repeat(6,1fr)}}
.opbouw li{counter-increment:ob;background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--water);padding:10px 10px 12px;display:grid;gap:3px;align-content:start}
.opbouw li::before{content:"0" counter(ob);font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--amber)}
.opbouw b{font-size:var(--s--1);color:var(--ink)}
.opbouw span{font-size:.78rem;color:var(--ink-soft);line-height:1.35}

/* ereloon over de fasen */
.fasebalk-k{margin:1.2em 0 0}
.fk-balk{display:flex;gap:3px;min-height:64px}
.fk-balk span{box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding:8px 8px;background:var(--water-band);color:#F2F7F3;font-size:.74rem;line-height:1.25;min-width:0;overflow:hidden}
.fk-balk span:nth-child(even){background:var(--water-2)}
.fk-balk b{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--amber-2)}
.fasebalk-k figcaption{margin-top:8px;font-size:.78rem;color:var(--ink-faint)}
@media (max-width:560px){.fk-balk{flex-direction:column}.fk-balk span{flex:none!important;flex-direction:row;gap:8px;align-items:baseline}}

/* Lees ook: de verwante artikels onder een kennisartikel (build.mjs zet ze erin) */
.leesook{margin-top:clamp(36px, 4vw, 52px);border-top:1px solid var(--line);display:grid}
.leesook-kop{font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:var(--ink-faint);margin:18px 0 6px}
.leesook a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;min-height:44px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);font-weight:500}
.leesook a:hover span:first-child{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.leesook a span:last-child{color:var(--amber);flex:none}

/* betalingstermijn */
/* kennis-betalingstermijn: voorbeeldbrieven */
.bt-brief{margin-top:1em;border:1px solid var(--line);border-left:3px solid var(--water);background:var(--paper-2);padding:14px 18px;font-size:var(--s--1);color:var(--ink-soft);overflow-wrap:anywhere}
.bt-brief.bt-streng{border-left-color:var(--amber)}
.bt-brief-kop{margin:0 0 .6em;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.bt-brief p{margin:.55em 0 0}
.bt-brief p.bt-onderwerp{margin-top:0;color:var(--ink);font-weight:600}

/* capaciteitsplanning */
/* kennis/capaciteitsplanning: planbord-scherm */
.cp-pb{table-layout:fixed}
.cp-pb th{font-size:10.5px}
.cp-pb td{vertical-align:top;padding:6px 5px;position:relative}
.cp-pb td:first-child{line-height:1.3;font-weight:600;font-size:11px;white-space:nowrap}
.cp-pb td:first-child .sub{font-weight:400;display:inline-block;margin:0 0 0 27px}
.cp-pb td:not(:first-child){border-left:1px solid #F2F2F4;padding-bottom:16px}
.cp-bl,.cp-ab{display:block;border-radius:5px;color:#fff;padding:4px 6px;margin-bottom:3px;font-size:10px;line-height:1.3;font-weight:500;position:relative}
.cp-bl i{display:block;font-style:normal;font-weight:600;font-size:10.5px;padding-right:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-bl em{display:block;font-style:normal;font-size:9px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-bl s,.cp-ab s{position:absolute;right:4px;top:4px;text-decoration:none;background:rgba(0,0,0,.2);border-radius:3px;padding:0 3px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600}
.cp-ab{font-weight:600}
.cp-pb u{position:absolute;right:5px;bottom:3px;text-decoration:none;font-size:9px;color:#8A8E96;font-family:"IBM Plex Mono",monospace}
.cp-fase{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8A8E96;margin:8px 0 4px 2px}
.cp-lijn{display:flex;align-items:center;gap:7px;border:1px solid #E9E9EC;background:#fff;border-radius:7px;padding:5px 7px;margin-bottom:4px}
.cp-lijn b{width:9px;height:9px;border-radius:50%;flex:none}
.cp-lijn span{flex:1 1 auto;display:block;min-width:0;color:#1A1F27;font-size:11px;line-height:1.25}
.cp-lijn i{display:block;font-style:normal;color:#8A8E96;font-size:9.5px}
.cp-lijn s{text-decoration:none;color:#8A8E96;font-family:"IBM Plex Mono",monospace;font-size:10px}

/* van contracturen naar projecturen */
.cp-trap{margin:1.3em 0 0;padding:16px 18px;background:var(--paper-2);border:1px solid var(--line)}
.cp-trap ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cp-trap li{display:grid;grid-template-columns:minmax(0,11.5em) 1fr;gap:4px 12px;align-items:center}
.cp-trap li>span{font-size:var(--s--1);color:var(--ink-soft);line-height:1.3}
.cp-trap li>span b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--ink)}
.cp-staaf{height:22px;position:relative}
.cp-staaf i{position:absolute;top:0;bottom:0;background:var(--water)}
.cp-trap .cp-af i{background:var(--amber);opacity:.75}
.cp-trap .cp-eind i{background:var(--water-2)}
.cp-trap figcaption{margin-top:10px;font-size:.78rem;color:var(--ink-faint)}
@media (max-width:560px){.cp-trap li{grid-template-columns:1fr}}

/* rekenvoorbeeld */
.cp-tabel td:not(:first-child),.cp-tabel th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-tabel tr.cp-som td{border-top:1px solid var(--line);color:var(--ink);font-weight:600}
.cp-tabel .cp-min{color:var(--amber);font-weight:600}
.cp-tabel .cp-plus{color:var(--water-2);font-weight:600}
@media (max-width:480px){.cp-tabel{font-size:.8rem}.cp-tabel th{font-size:.62rem;letter-spacing:.04em}.cp-tabel td,.cp-tabel th{padding-right:5px}.cp-tabel td:last-child,.cp-tabel th:last-child{padding-right:0}}

/* bezetting per rol */
.cp-bezet{margin:1.3em 0 0;display:grid;gap:12px}
.cp-bezet>div{display:grid;grid-template-columns:8.5em 1fr 3.4em;gap:10px;align-items:center;font-size:var(--s--1)}
.cp-bezet>div>span:first-child{color:var(--ink);font-weight:600}
.cp-bezet>div>span:last-child{font-family:"IBM Plex Mono",monospace;text-align:right;color:var(--ink)}
.cp-bz{height:14px;background:var(--line-soft);position:relative}
.cp-bz i{position:absolute;left:0;top:0;bottom:0;background:var(--water)}
.cp-bz i.cp-over{background:var(--amber)}
.cp-bz::after{content:"";position:absolute;top:-4px;bottom:-4px;left:calc(100% / 1.2);border-left:2px dashed var(--ink)}
.cp-bezet figcaption{font-size:.78rem;color:var(--ink-faint)}
@media (max-width:420px){.cp-bezet>div{grid-template-columns:6.5em 1fr 3em;gap:8px}}

/* kennis-leads-opvolgen */
/* kennis-leads-opvolgen: temperatuurbanden van een leadscore */
.lo-temp{margin:1.2em 0 0}
.lo-balk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.lo-balk span{display:grid;gap:2px;align-content:start;padding:10px 10px 12px;font-size:.78rem;line-height:1.3;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-top-width:4px;min-width:0}
.lo-balk b{font-size:var(--s--1);color:var(--ink)}
.lo-balk .lo-koud{border-top-color:#C2453A}
.lo-balk .lo-warm{border-top-color:#D9822B}
.lo-balk .lo-heet{border-top-color:#C9A227}
.lo-balk .lo-zeer{border-top-color:#3E8E5A}
.lo-temp figcaption{margin-top:8px;font-size:.78rem;color:var(--ink-faint)}
@media (max-width:560px){.lo-balk{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* kennis-notulen-ai */
/* kennis-notulen-ai: stroom in vijf stappen (hergebruikt .opbouw) */
@media (min-width:760px){.opbouw.nai-stroom ol{grid-template-columns:repeat(5,1fr)}}
.opbouw.nai-stroom li.nai-hippo{border-top-color:var(--amber)}
.opbouw.nai-stroom figcaption{margin-top:8px;font-size:.78rem;color:var(--ink-soft)}

/* kennis-onderhoudscontract */
/* kennis: onderhoudscontract website (prefix oc-) */
/* een maand onderhoud: de urenpot en wat erboven valt */
.oc-pot{margin:1.4em 0 0;padding:16px 16px 14px;border:1px solid var(--line);background:var(--paper-2)}
.oc-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);margin-bottom:6px}
.oc-kop b{color:var(--ink);font-weight:600}
.oc-rij{display:flex;gap:3px;min-height:58px}
.oc-rij span{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:6px 8px;font-size:.74rem;line-height:1.25;min-width:0;overflow:hidden}
.oc-rij b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-rij small{font-size:.7rem;opacity:.85;white-space:nowrap}
.oc-in{background:var(--water-band);color:#F2F7F3}
.oc-in:nth-child(even){background:var(--water-2)}
.oc-rest{background:repeating-linear-gradient(45deg,var(--line-soft) 0 6px,transparent 6px 12px);color:var(--ink-soft);border:1px dashed var(--ink-faint)}
.oc-boven{margin-top:12px}
.oc-extra{background:var(--amber);color:var(--ink)}
.oc-pijl{flex:none!important;align-items:center;color:var(--ink-faint);font-size:.9rem!important;padding:0 4px!important}
.oc-doel{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft)}
.oc-pot figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:var(--s--1);color:var(--ink-soft)}
.oc-pot figcaption b{color:var(--ink)}
.oc-sw{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.oc-sw-i{background:var(--water-band)}.oc-sw-r{background:repeating-linear-gradient(45deg,var(--ink-faint) 0 2px,transparent 2px 4px)}.oc-sw-e{background:var(--amber)}
@media (max-width:560px){
  .oc-rij{flex-direction:column;min-height:0}
  .oc-rij span{flex:none!important;flex-direction:row;gap:8px;align-items:baseline;justify-content:space-between;padding:7px 10px}
  .oc-pijl{display:none!important}
}

/* formules naast elkaar */
.oc-form{width:100%}
@media (max-width:560px){.oc-form th,.oc-form td{font-size:.78rem;padding-right:6px}}

/* nacalculatie */
/* nacalculatie: de twee betekenissen en de lus van offerte naar offerte */
.nc-twee{display:grid;gap:10px;margin:1.2em 0 0}
@media (min-width:640px){.nc-twee{grid-template-columns:1fr 1fr}}
.nc-kaart{background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--water);padding:14px 16px;display:grid;gap:4px;align-content:start}
.nc-kaart.nc-leer{border-top-color:var(--amber)}
.nc-kaart .nc-nr{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.nc-kaart b{font-size:var(--s-0);color:var(--ink)}
.nc-kaart span{font-size:var(--s--1);color:var(--ink-soft);line-height:1.4}
.nc-lus{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:6px;counter-reset:nc}
@media (min-width:760px){.nc-lus{grid-template-columns:repeat(4,1fr)}}
.nc-lus li{counter-increment:nc;position:relative;background:var(--paper);border:1px solid var(--line);padding:10px 12px;display:grid;gap:2px}
.nc-lus li::before{content:"0" counter(nc);font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--amber)}
.nc-lus li:last-child{border-color:var(--amber)}
.nc-lus b{font-size:var(--s--1);color:var(--ink)}
.nc-lus span{font-size:.78rem;color:var(--ink-soft);line-height:1.35}
.nc-lus-k{margin:0;font-size:.78rem;color:var(--ink-faint)}

/* voorbeeldtabel: cijfers rechts, over en onder het budget gekleurd */
.nc-tabel th.nc-n,.nc-tabel td.nc-n{text-align:right;white-space:nowrap;padding-right:0;padding-left:8px}
.nc-tabel .nc-over{color:var(--amber);font-weight:600}
.nc-tabel .nc-onder{color:var(--water)}
.nc-tabel tr.nc-tot td{border-top:1px solid var(--line);border-bottom:0;color:var(--ink);font-weight:600}
@media (max-width:480px){.nc-tabel{font-size:.78rem}.nc-tabel th{font-size:.62rem;letter-spacing:.04em}.nc-tabel td{padding-right:4px}.nc-tabel td:first-child{hyphens:manual}.nc-tabel th.nc-n,.nc-tabel td.nc-n{padding-left:6px}}

/* scope-creep */
/* kennis: scope creep (prefix sc-) */
/* budgetbalk die over 100 procent gaat */
.sc-balk{margin:1.4em 0 0;padding:16px 16px 14px;border:1px solid var(--line);background:var(--paper-2)}
.sc-schaal{position:relative;height:1.3em;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);margin-bottom:6px}
.sc-schaal span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.sc-schaal span:first-child{transform:none}
.sc-schaal .sc-100{color:var(--ink);font-weight:600}
.sc-rij{display:flex;gap:3px;min-height:56px}
.sc-rij span{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:6px 8px;font-size:.74rem;line-height:1.25;min-width:0;overflow:hidden}
.sc-rij b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-off{background:var(--water-band);color:#F2F7F3;border-right:3px solid var(--amber)}
.sc-extra{background:#C0392B;color:#fff}
.sc-extra:nth-child(odd){background:#A93226}
.sc-balk figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:var(--s--1);color:var(--ink-soft)}
.sc-balk figcaption b{color:var(--ink)}
.sc-sw{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.sc-sw-o{background:var(--water-band)}.sc-sw-e{background:#C0392B}.sc-sw-g{background:var(--amber);width:3px}
@media (max-width:560px){.sc-rij span{font-size:.64rem;padding:5px 4px}.sc-rij .sc-extra b{font-size:0}.sc-rij .sc-extra small{font-size:.64rem}}
.sc-rij small{font-size:.7rem;opacity:.85;white-space:nowrap}

/* stroom wens, inschatting, akkoord, meerwerk */
.sc-stroom{list-style:none;margin:1.3em 0 0;padding:0;display:grid;gap:6px;counter-reset:sc}
@media (min-width:700px){.sc-stroom{grid-template-columns:repeat(4,1fr)}}
.sc-stroom li{counter-increment:sc;position:relative;background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--water);padding:10px 12px 12px;display:grid;gap:3px;align-content:start}
.sc-stroom li::before{content:"0" counter(sc);font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--amber)}
.sc-stroom li:last-child{border-top-color:var(--amber)}
.sc-stroom b{font-size:var(--s--1);color:var(--ink)}
.sc-stroom span{font-size:.8rem;color:var(--ink-soft);line-height:1.4}

/* nagetekend scherm: budgetlijnen van een project */
.sc-kaart{border:1px solid #E9E9EC;border-radius:8px;overflow:hidden;margin-bottom:12px}
.sc-kop{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #E9E9EC;background:#FAFAFB;font-size:11.5px;font-weight:600}
.sc-kop .sc-po{margin-left:auto;border:1px solid #DFE2E6;border-radius:6px;padding:3px 8px;font-size:10px;font-weight:400;color:#A2A6AD;background:#fff}
.sc-kop .sel{font-size:10px;font-weight:400;color:#4B5159;border:1px solid #DFE2E6;border-radius:6px;padding:3px 8px;background:#fff}
.sc-bt td{padding:6px 8px;border-bottom:1px solid #F4F4F6;font-size:11.5px;vertical-align:middle;white-space:nowrap}
.sc-bt th{font-size:10px;font-weight:500;color:#8A8E96;text-align:right;padding:5px 8px 3px}
.sc-bt td.sc-n{width:100%}
.sc-bt .fold{color:#C9781F;margin-right:5px;display:inline-flex;vertical-align:-2px}
.sc-bt .fold svg,.sc-bt .ico svg{width:13px;height:13px}
.sc-bt .ico{color:#9AA0A8;margin-right:5px;display:inline-flex;vertical-align:-2px}
.sc-bt svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-slot{display:inline-flex;color:#C0392B}.sc-slot.open{color:#C9CDD3}
.sc-slot svg{width:11px;height:11px}
.sc-vg{display:flex;align-items:center;gap:6px;min-width:110px}
.sc-vg .mbar{flex:1;margin:0}
.sc-vg em{font-style:normal;font-size:10px;color:#8A8E96;font-family:"IBM Plex Mono",monospace}
.sc-vg em.over{color:#C0392B;font-weight:600}
.sc-ts{border:1px solid #DFE2E6;border-radius:6px;padding:2px 8px;font-size:10.5px;color:#6E727A}
.sc-bt .num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.sc-bt .sc-rood{color:#C0392B;font-weight:600}
.sc-bt .sc-grijs{color:#8A8E96}
.sc-bt tr.sc-map td{font-weight:600}
.sc-bt tr.sc-tot td{border-bottom:0;border-top:1px solid #E9E9EC;font-weight:600}

/* voorschotfactuur */
/* kennis-voorschotfactuur: een vaste prijs in drie termijnen, met btw per termijn */
.vf-schema{margin:1.4em 0 0}
.vf-rij{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:760px){.vf-rij{grid-template-columns:3fr 4fr 3fr}}
.vf-rij li{background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--water);padding:12px 14px;display:grid;gap:3px;align-content:start;min-width:0}
.vf-rij li:nth-child(2){border-top-color:var(--water-2)}
.vf-rij li:nth-child(3){border-top-color:var(--amber)}
.vf-moment{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.vf-naam{font-weight:600;color:var(--ink);font-size:var(--s--1)}
.vf-pct{font-family:"IBM Plex Mono",monospace;color:var(--amber);font-size:.9rem}
.vf-rij dl{margin:6px 0 0;display:grid;grid-template-columns:auto auto;gap:2px 0;font-size:.8rem;color:var(--ink-soft)}
.vf-rij dt{margin:0}
.vf-rij dd{margin:0;padding-left:10px;text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
.vf-rij dt.vf-incl,.vf-rij dd.vf-incl{font-weight:600;border-top:1px solid var(--line);padding-top:3px}
.vf-tot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin-top:8px;padding:10px 14px;background:var(--water-band);color:#F2F7F3;font-size:.82rem}
.vf-tot b{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--amber-2)}
.vf-schema figcaption{margin-top:8px;font-size:.78rem;color:var(--ink-faint)}