/* Kantoorpakket: de STYLE voor de kantoorkant, ronde 1 (19-10-2026).
   Basis: exact-bonnetjes/docs/ontwerp-ui/stijl.css (Weggeboekt), zelfde opbouw, tokens en componentnamen. Anders dan
   Weggeboekt: de kantoorkleur komt van de server, er is een donkere modus (alleen tokens), de dichtheid is hoger, en onderaan
   staan de oude klassen van het pakket (blok OUD) zodat nog niet omgebouwde schermen in de nieuwe schil blijven kloppen.

   Laden: alleen scherm() en het inlogscherm, als /stijl.css?v=<hash> (lange cache), met <body class="kp">. De klantkant
   (kaal(): /offerte, /afspraak; klantpagina.ts) laadt dit bestand NIET en houdt in ronde 1 zijn oude STYLE.
   Per kantoor zet de server direct na de link één regel in <head> (waarden uit kantoren.kleur, kleur_knop, kleur_donker):
     <style>:root{--merk:#DA1B2E;--merk-knop:#DA1B2E;--merk-donker:#E8394C}</style>
   Thema: cookie "thema" (apparaat, licht, donker) wordt <html data-thema="...">; apparaat volgt prefers-color-scheme.

   Regels: geen kleur buiten de tokens; donker overschrijft alleen tokens; rood alleen voor te laat, fout en gevaar; de
   kantoorkleur (--accent) alleen op de ene gevulde hoofdknop, het actieve menu-item, de focusrand, links, het "jouw deel"
   van een balk en het merkje. Knoppen in regels zijn omrand in inkt (.omrand), tellers inkt op lichtgrijs.
   Dit bestand bevat geen backticks, geen dollarteken met accolade en geen backslashes: het mag letterlijk in een
   template string. */

@font-face{font-family:Manrope;src:url(/merk/manrope.woff2) format("woff2");font-weight:400 800;font-display:swap}

/* ================================================================ tokens (licht) */
:root{
  /* kantoorkleur: de server overschrijft deze drie; dit is alleen de standaard zonder kantoor (inlogscherm) */
  --merk:#4F46E5;--merk-knop:#4F46E5;--merk-donker:#8D87F7;
  --inkt:#16143A;--tekst:#3B3A5C;--dof:#6B6A88;--lijn:#E4E3F3;--lijn-d:#CFCDE6;--veldrand:#8F8DB0;
  --licht:#F4F4FF;--bg:#F7F7FC;--kaart:#FFFFFF;--chat:#F1F0F8;
  --op-accent:#FFFFFF;--op-inkt:#FFFFFF;--balk:#16143A;--op-balk:#FFFFFF;
  --groen:#0E7A4F;--groen-bg:#E3F5EC;--groen-rand:#BFE6D2;--groen-t:#0A5537;
  --oranje:#9A4A00;--oranje-bg:#FFF0DD;--oranje-rand:#F6D9B0;--oranje-t:#5C2E00;
  --rood:#B42318;--rood-bg:#FDECEA;--rood-rand:#F4C7C2;--rood-t:#7A1A12;--rood-vol:#B42318;
  --indigo:#4F46E5;--indigo-bg:#EEEDFD;--indigo-rand:#D9D7FB;--indigo-t:#3730A3;
  --grijs:#4B4A68;--grijs-bg:#EFEFF5;
  --geel-bg:#FFF7DE;--geel-rand:#EEDDA6;--geel-t:#5A4500;
  --uit-bg:#E5F5EB;--uit-rand:#CBE9D6;
  --vul-groen:#2E9E6A;--vul-oranje:#E8912D;--vul-indigo:#6D66EA;--vul-grijs:#DAD9EA;--vul-inkt:#16143A;--stip-oranje:#D97706;
  --r:12px;--r-veld:10px;--r-klein:8px;--zij:232px;--regel:56px;--tint:10%;
  --schaduw:0 1px 2px rgba(22,20,58,.05);
  --schaduw-hoog:0 18px 40px -18px rgba(22,20,58,.35),0 4px 12px -6px rgba(22,20,58,.12);
  --sluier-kleur:rgba(22,20,58,.38);
  --logo-licht:block;--logo-donker:none;
  --letter:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  /* oude namen, voor de inline styles en blokken die nog in de code zitten. Let op: --zacht is hier het oude zachte VLAK,
     de zachte tekstkleur (in Weggeboekt --zacht) heet hier --dof. */
  --ink:var(--inkt);--muted:var(--dof);--line:var(--lijn);--card:var(--kaart);--zacht:var(--licht);--ok:var(--groen);--warn:var(--oranje);--wit:var(--kaart);
}
/* afgeleid van de kantoorkleur; .merkvlak rekent ze opnieuw uit voor een voorbeeld met een andere kleur (Kantoor > Huisstijl) */
:root,.merkvlak{
  --accent:var(--merk-knop);   /* tekst en lijnen: links, focus, actief balkje, jouw deel (donker: --merk-donker) */
  --knop:var(--merk-knop);     /* gevulde vlakken met witte tekst: hoofdknop, merkje (ook in donker: wit blijft leesbaar) */
  --accent-d:color-mix(in srgb,var(--knop) 84%,#000);
  --merk-zacht:color-mix(in srgb,var(--accent) var(--tint),var(--kaart));
  --merk-rand:color-mix(in srgb,var(--accent) 40%,var(--kaart));
  --focus:var(--accent);
  --focus-ring:color-mix(in srgb,var(--accent) 22%,transparent);
}

/* ================================================================ tokens (donker): twee keer dezelfde set */
:root[data-thema="donker"]{
  color-scheme:dark;
  --inkt:#F2F1FA;--tekst:#CFCDE6;--dof:#9C9ABA;--lijn:#2E2D40;--lijn-d:#42415A;--veldrand:#605E82;
  --licht:#23222F;--bg:#121218;--kaart:#1B1B24;--chat:#16161E;
  --op-inkt:#121218;--balk:#2E2D45;--op-balk:#F2F1FA;
  --groen:#6FD3A3;--groen-bg:#15281E;--groen-rand:#22412F;--groen-t:#B4EBCF;
  --oranje:#F2B266;--oranje-bg:#2C2012;--oranje-rand:#4A3519;--oranje-t:#F7D7AE;
  --rood:#F4978E;--rood-bg:#2E1715;--rood-rand:#532622;--rood-t:#FAC9C3;--rood-vol:#C4372B;
  --indigo:#8D87F7;--indigo-bg:#211F43;--indigo-rand:#373379;--indigo-t:#C0BCFB;
  --grijs:#C3C1DB;--grijs-bg:#28273A;
  --geel-bg:#29230F;--geel-rand:#4A3F1C;--geel-t:#EEDFA8;
  --uit-bg:#173022;--uit-rand:#24472F;
  --vul-groen:#3FB27F;--vul-oranje:#E39A3F;--vul-indigo:#7C76F0;--vul-grijs:#3A3950;--vul-inkt:#CFCDE6;--stip-oranje:#F59E0B;
  --tint:16%;
  --schaduw:0 1px 2px rgba(0,0,0,.4);
  --schaduw-hoog:0 18px 40px -18px rgba(0,0,0,.8),0 4px 12px -6px rgba(0,0,0,.5);
  --sluier-kleur:rgba(0,0,0,.6);
  --logo-licht:none;--logo-donker:block;
}
:root[data-thema="donker"],:root[data-thema="donker"] .merkvlak{--accent:var(--merk-donker)}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="licht"]){
    color-scheme:dark;
    --inkt:#F2F1FA;--tekst:#CFCDE6;--dof:#9C9ABA;--lijn:#2E2D40;--lijn-d:#42415A;--veldrand:#605E82;
    --licht:#23222F;--bg:#121218;--kaart:#1B1B24;--chat:#16161E;
    --op-inkt:#121218;--balk:#2E2D45;--op-balk:#F2F1FA;
    --groen:#6FD3A3;--groen-bg:#15281E;--groen-rand:#22412F;--groen-t:#B4EBCF;
    --oranje:#F2B266;--oranje-bg:#2C2012;--oranje-rand:#4A3519;--oranje-t:#F7D7AE;
    --rood:#F4978E;--rood-bg:#2E1715;--rood-rand:#532622;--rood-t:#FAC9C3;--rood-vol:#C4372B;
    --indigo:#8D87F7;--indigo-bg:#211F43;--indigo-rand:#373379;--indigo-t:#C0BCFB;
    --grijs:#C3C1DB;--grijs-bg:#28273A;
    --geel-bg:#29230F;--geel-rand:#4A3F1C;--geel-t:#EEDFA8;
    --uit-bg:#173022;--uit-rand:#24472F;
    --vul-groen:#3FB27F;--vul-oranje:#E39A3F;--vul-indigo:#7C76F0;--vul-grijs:#3A3950;--vul-inkt:#CFCDE6;--stip-oranje:#F59E0B;
    --tint:16%;
    --schaduw:0 1px 2px rgba(0,0,0,.4);
    --schaduw-hoog:0 18px 40px -18px rgba(0,0,0,.8),0 4px 12px -6px rgba(0,0,0,.5);
    --sluier-kleur:rgba(0,0,0,.6);
    --logo-licht:none;--logo-donker:block;
  }
  :root:not([data-thema="licht"]),:root:not([data-thema="licht"]) .merkvlak{--accent:var(--merk-donker)}
}

/* ================================================================ basis */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tekst);font:400 15px/1.5 var(--letter);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{max-width:100%}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.logo-licht{display:var(--logo-licht)}
.logo-donker{display:var(--logo-donker)}

/* ================================================================ typografie */
h1,h2,h3{color:var(--inkt);letter-spacing:-.015em;line-height:1.2}
h1{font-size:24px;font-weight:800;margin:0 0 4px;letter-spacing:-.025em}
h2{font-size:17px;font-weight:800;margin:0 0 12px}
h3{font-size:15px;font-weight:700;margin:0 0 4px}
p{margin:0 0 12px}
a{color:var(--accent);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
strong,b{color:var(--inkt);font-weight:700}
.sub{font-size:14px;color:var(--dof);margin:0}
.small,.klein{font-size:13px;color:var(--dof)}
.bedrag{font-weight:700;color:var(--inkt);white-space:nowrap;font-variant-numeric:tabular-nums}
.bedrag.groot{font-size:24px;font-weight:800;letter-spacing:-.02em}
.code{font-size:12px;font-weight:600;color:var(--dof)}
/* .label is het oude kopje: blijft een alias, nooit een statuschip (die heet .chip) */
.kopje,.label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--dof);margin:0 0 8px}
.centreer{text-align:center}
hr{border:0;border-top:1px solid var(--lijn);margin:16px 0}
kbd{display:inline-block;min-width:20px;padding:2px 6px;border-radius:6px;background:var(--kaart);box-shadow:0 0 0 1px var(--lijn),inset 0 -1px 0 var(--lijn-d);font:700 11px/1.4 var(--letter);color:var(--inkt);text-align:center}
.citaat{font-style:italic;color:var(--tekst)}
.vermelding{font-weight:800;color:var(--inkt)}

/* ================================================================ knoppen (.knop en <button>) */
button,.knop{appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:700;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;min-height:40px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--kaart);color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--lijn-d);transition:background .15s,box-shadow .15s,color .15s}
button:hover,.knop:hover{background:var(--licht);box-shadow:inset 0 0 0 1.5px var(--veldrand);text-decoration:none}
/* maat eerst, dan de soort: zo wint .primair altijd van .klein */
button.klein,.knop.klein{padding:6px 12px;min-height:32px;font-size:13px;color:var(--inkt)}
button.groot,.knop.groot{padding:15px 24px;min-height:52px;font-size:16px}
button.breed,.knop.breed{width:100%}
button.breed,.knop.breed,button.breekt,.knop.breekt{white-space:normal;text-align:center}
/* omrand: de hoofdknop van een regel (inkt, niet de kantoorkleur) */
button.omrand,.knop.omrand{box-shadow:inset 0 0 0 1.5px var(--inkt)}
button.omrand:hover,.knop.omrand:hover{background:var(--licht);box-shadow:inset 0 0 0 2px var(--inkt)}
/* primair: de ene gevulde hoofdknop van het scherm, in de kantoorkleur */
button.primair,.knop.primair,button.primary,.knop.primary{background:var(--knop);color:var(--op-accent);box-shadow:none}
button.primair:hover,.knop.primair:hover,button.primary:hover,.knop.primary:hover{background:var(--accent-d);box-shadow:none}
button.stil,.knop.stil{background:transparent;box-shadow:none;color:var(--tekst);padding-left:12px;padding-right:12px}
button.stil:hover,.knop.stil:hover{background:var(--licht);box-shadow:none;color:var(--inkt)}
button.gevaar,.knop.gevaar{background:var(--kaart);color:var(--rood);box-shadow:inset 0 0 0 1.5px var(--rood-rand)}
button.gevaar:hover,.knop.gevaar:hover{background:var(--rood-bg);box-shadow:inset 0 0 0 1.5px var(--rood)}
button.stil.gevaar,.knop.stil.gevaar{background:transparent;box-shadow:none}
button.stil.gevaar:hover,.knop.stil.gevaar:hover{background:var(--rood-bg)}
/* alleen een icoon (⋯, ‹ ›, zoeken): rond */
button.ico,.knop.ico{width:40px;padding:0}
button.ico.klein,.knop.ico.klein{width:32px}
button svg,.knop svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.klein svg,.knop.klein svg{width:16px;height:16px}
button .n,.knop .n{margin-left:-2px}
button.primair .n,.knop.primair .n{background:rgba(255,255,255,.22);color:inherit}
/* eerste klik op een knop met data-bevestig (script ALGEMEEN): rood gevuld, tweede klik voert uit */
button[data-klaar]{background:var(--rood-vol)!important;color:#fff!important;box-shadow:none!important}
button:disabled,.knop[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.knoppen.rechts{justify-content:flex-end}

/* ================================================================ velden en formulierregels */
input,select,textarea{font:inherit;font-size:15px;color:var(--inkt);background:var(--kaart);border:1.5px solid var(--veldrand);border-radius:var(--r-veld);padding:9px 12px;min-height:42px;max-width:100%;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--dof);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--dof)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
input[readonly]{background:var(--licht);color:var(--tekst)}
input.kort{width:110px}
input.vol{width:100%}
textarea{min-height:84px;resize:vertical;line-height:1.5;width:100%}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background:var(--kaart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F8DB0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--inkt);vertical-align:-4px;cursor:pointer}
input[type=file]{min-height:0;border:0;padding:0}
input.zoek{max-width:100%;padding-left:38px;background:var(--kaart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F8DB0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center/18px}
input.let-op,select.let-op{border-color:var(--vul-oranje);background-color:var(--oranje-bg)}
label{display:block;font-size:13px;font-weight:700;color:var(--inkt);margin:12px 0 6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:block;padding:0;font-size:13px;font-weight:700;color:var(--inkt);margin:0 0 6px}
label.vink{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;color:var(--inkt);margin:8px 0;cursor:pointer}
label.vink input{margin-top:1px}
.veld{margin:0 0 14px}
.veld>label{margin-top:0}
.veld input:not([type=checkbox]):not([type=radio]),.veld select,.veld textarea{width:100%}
.veld .hulp{font-size:13px;color:var(--dof);margin-top:5px}
.veld.fout input,.veld.fout select,.veld.fout textarea,input.fout,select.fout{border-color:var(--rood);box-shadow:0 0 0 3px var(--rood-bg)}
.veld .foutje,.foutje{font-size:13px;font-weight:700;color:var(--rood);margin-top:5px}
.velden{display:grid;gap:0 16px;grid-template-columns:repeat(var(--k,2),minmax(0,1fr))}
.velden.k3{--k:3}.velden.k4{--k:4}
.velden .vol{grid-column:1/-1}
.velden .twee{grid-column:span 2}
.invoerrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invoerrij input{flex:1 1 180px;min-width:0}
.invoerrij input.kort{flex:0 1 110px}
.invoerrij>label{margin:0}
.veldrij{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:flex-end}
.veldrij>.veld{margin:0}
.zoekrij{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.zoekrij input.zoek{flex:1 1 240px;min-width:0}
/* gegevenskaart: lezen met per kaart een eigen Wijzig (klantpagina, tab Gegevens) */
dl.gegevens{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px 16px;margin:0;font-size:14px}
dl.gegevens dt{color:var(--dof);font-weight:600}
dl.gegevens dd{margin:0;color:var(--inkt);overflow-wrap:anywhere}
dl.gegevens.smal{grid-template-columns:96px minmax(0,1fr);font-size:13px;gap:6px 12px}
/* snelle invoer (Mijn dag, + Nieuw, Taken): één regel, Enter verstuurt */
.snel{display:flex;gap:10px;align-items:center;background:var(--kaart);border:1.5px solid var(--veldrand);border-radius:var(--r-veld);padding:4px 4px 4px 12px;transition:border-color .15s,box-shadow .15s}
.snel:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.snel>span,.snel>svg{flex:none;color:var(--dof);font-weight:800;font-size:18px;line-height:1}
.snel>svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.snel input,.snel input:focus,.snel input:hover{flex:1;min-width:0;border:0;box-shadow:none;outline:0;background:transparent;min-height:34px;padding:4px 0;font-size:15px}
.snel button{flex:none}

/* ================================================================ kaarten */
.kaart,.card{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:20px 24px;margin:0 0 16px;box-shadow:var(--schaduw)}
.kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 14px}
.kaart-kop h2{margin:0;display:flex;align-items:center;gap:8px}
.kaart-kop .rechts{margin-left:auto}
.kaart.vlak{padding:0;overflow:hidden}
.kaart.vlak>.kaart-kop{padding:16px 20px 12px;margin:0;border-bottom:1px solid var(--lijn)}
.kaart.vlak>.kaart-kop.zonder-lijn{border-bottom:0;padding-bottom:4px}
.kaart.vlak>.voetregel{padding:12px 20px;border-top:1px solid var(--lijn);font-size:13px;color:var(--dof)}
.kaart.gevaarzone{border-color:var(--rood-rand)}
.kaart.klaar{border-color:var(--groen-rand)}
.kaart.licht{background:var(--licht);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.kaart.licht>div:first-child{flex:1;min-width:min(240px,100%)}
.kaart.licht h2{margin:0 0 2px}
.kaart.licht p{margin:0}
.raster{display:grid;gap:16px;grid-template-columns:repeat(var(--k,2),minmax(0,1fr));align-items:start;margin:0 0 16px}
.raster>.kaart{margin:0}
.raster.k3{--k:3}
/* tegels: klikbare getallen (Werk > Team, Kantoor > Overzicht) */
.raster.tegels{--k:4;align-items:stretch}
.raster.tegels.k5{--k:5}
.kaart.tegel{display:block;margin:0;padding:16px 18px;text-decoration:none;color:var(--tekst);font-weight:600;font-size:13px;line-height:1.4}
.kaart.tegel:hover{border-color:var(--lijn-d);text-decoration:none;box-shadow:var(--schaduw-hoog)}
.kaart.tegel .getal{display:block;font-size:28px;font-weight:800;color:var(--inkt);letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.kaart.tegel.let-op .getal{color:var(--oranje)}
.kaart.tegel.laat .getal{color:var(--rood)}

/* ================================================================ chips en statuslabels (één bron: de STAP-tabel) */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;line-height:1.35;padding:3px 9px;border-radius:999px;background:var(--grijs-bg);color:var(--grijs);white-space:nowrap;vertical-align:1px;text-decoration:none}
a.chip:hover{text-decoration:none;filter:brightness(.97)}
.chip.grijs{background:var(--grijs-bg);color:var(--grijs)}
.chip.oranje{background:var(--oranje-bg);color:var(--oranje)}   /* het kantoor moet iets: Opvragen, Bij ons, Klant laten weten */
.chip.indigo{background:var(--indigo-bg);color:var(--indigo-t)}  /* wacht op een ander: Bij de klant, Review, Wacht op akkoord */
.chip.groen{background:var(--groen-bg);color:var(--groen)}       /* klaar */
.chip.rood{background:var(--rood-bg);color:var(--rood)}          /* fout of gevaar */
.chip.vol{background:var(--inkt);color:var(--op-inkt)}           /* Indienen: inkt, nooit de kantoorkleur */
.chip.rand{background:transparent;color:var(--dof);box-shadow:inset 0 0 0 1px var(--lijn-d)}
.chip.nieuw{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--inkt)}
/* te laat: altijd rood op lichtrood met een klokje en woorden ("3 dagen te laat"); herkenbaar ook als het kantoor rood is */
.chip.laat{background:var(--rood-bg);color:var(--rood)}
.chip.laat::before{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.chip.breekt{white-space:normal;text-align:left;max-width:100%;border-radius:12px}
.chip .stip{width:6px;height:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* stip: koppelingsstand en stapkleur (groen standaard) */
.stip{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--groen);flex:none}
.stip.groen{background:var(--vul-groen)}
.stip.rood{background:var(--rood)}
.stip.oranje{background:var(--stip-oranje)}
.stip.indigo{background:var(--vul-indigo)}
.stip.grijs{background:var(--vul-grijs)}
.stip.vol{background:var(--vul-inkt)}
/* bolletjes per dienst en periode (klantenlijst, klantpagina): kleur van de stap, .open = nog niet, .half = bezig, .uit = dienst uit */
.bolletjes{display:inline-flex;align-items:center;gap:4px;vertical-align:-1px}
.bolletje{--b:var(--vul-grijs);display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--b);flex:none}
.bolletje.groen{--b:var(--vul-groen)}.bolletje.oranje{--b:var(--vul-oranje)}.bolletje.indigo{--b:var(--vul-indigo)}.bolletje.vol{--b:var(--vul-inkt)}
.bolletje.open{--b:var(--veldrand);background:transparent;box-shadow:inset 0 0 0 1.5px var(--b)}
.bolletje.half{background:linear-gradient(90deg,var(--b) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--b)}
.bolletje.uit{width:10px;height:2px;border-radius:2px;background:var(--lijn-d)}
.diensten{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;font-weight:700;color:var(--dof)}
.diensten>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}

/* ================================================================ meldingen en flitsbalk */
.melding{padding:12px 16px;border-radius:var(--r);background:var(--oranje-bg);border:1px solid var(--oranje-rand);color:var(--oranje-t);font-size:14px;margin:0 0 16px}
.melding strong,.melding b{color:inherit}
.melding.goed{background:var(--groen-bg);border-color:var(--groen-rand);color:var(--groen-t)}
.melding.fout{background:var(--rood-bg);border-color:var(--rood-rand);color:var(--rood-t)}
.melding.info{background:var(--indigo-bg);border-color:var(--indigo-rand);color:var(--indigo-t)}
.melding ul{margin:4px 0 0;padding-left:18px}
.melding .knoppen{margin-top:10px}
.regelmelding{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.regelmelding .wat{flex:1;min-width:min(240px,100%)}
.melding .regelmelding .knoppen{margin-top:0}
/* flits: na elke actie centraal bovenaan (?klaar= en ?na=); in een keten met "Nog 8." */
.flits{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 12px 10px 16px;border-radius:var(--r);background:var(--groen-bg);border:1px solid var(--groen-rand);color:var(--groen-t);font-size:14px;font-weight:600;margin:0 0 16px}
.flits strong,.flits b{color:inherit;font-weight:800}
.flits svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flits .knoppen{justify-content:flex-end}
.flits a{color:inherit;text-decoration:underline}
.flits .nog{font-weight:800;white-space:nowrap}
.flits.let-op{background:var(--oranje-bg);border-color:var(--oranje-rand);color:var(--oranje-t)}
.flits.fout{background:var(--rood-bg);border-color:var(--rood-rand);color:var(--rood-t)}

/* ================================================================ tabellen (kaartjes onder 640px; .schuif = blijft een tabel die zelf schuift) */
.tabel{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:700;color:var(--dof);padding:10px 12px;border-bottom:1px solid var(--lijn);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--lijn);vertical-align:middle;color:var(--inkt)}
tbody tr:last-child td{border-bottom:0}
th.getal,td.getal,th.bedrag,td.bedrag{text-align:right}
td.vink,th.vink{width:44px;padding-right:0}
td.acties{text-align:right;white-space:nowrap}
td.acties .knoppen{justify-content:flex-end;flex-wrap:nowrap;gap:4px}
td .sub,td small{display:block;font-size:13px;color:var(--dof);font-weight:500;margin-top:2px}
td a{color:var(--inkt);font-weight:700}
td a:hover{color:var(--accent)}
tr[data-href]{cursor:pointer}
tbody tr[data-href]:hover td,tbody tr.hover:hover td{background:var(--licht)}
tbody tr.klaar td:first-child{box-shadow:inset 3px 0 0 var(--vul-groen)}
tbody tr.stil td{color:var(--dof)}
tr.dochter td.hoofd,tr.dochter td:first-child:not(.vink){padding-left:32px}
tr.dochter td.hoofd::before,tr.dochter td:first-child:not(.vink)::before{content:"↳ ";color:var(--dof);font-weight:600}
.kaart.vlak table th:first-child,.kaart.vlak table td:first-child{padding-left:20px}
.kaart.vlak table th:last-child,.kaart.vlak table td:last-child{padding-right:20px}
/* tabel die niet in zijn kaart past (script onder elke pagina zet .kaartjes): dezelfde kaartjes als onder 640px */
.tabel.kaartjes{overflow:visible}
.tabel.kaartjes table,.tabel.kaartjes tbody{display:block}
.tabel.kaartjes thead{display:none}
.tabel.kaartjes tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;margin:0 0 8px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r)}
.tabel.kaartjes tr:has(>td.vink){grid-template-columns:28px minmax(0,1fr) auto}
.tabel.kaartjes td{display:block;padding:0;border:0;grid-column:1/-1;text-align:left;overflow-wrap:anywhere}
.tabel.kaartjes tr:has(>td.vink)>td{grid-column:2/-1}
.tabel.kaartjes td.vink{grid-column:1!important;grid-row:1/span 3;width:auto;padding-top:2px}
.tabel.kaartjes td.hoofd{grid-column:1;grid-row:1}
.tabel.kaartjes tr:has(>td.vink)>td.hoofd{grid-column:2}
.tabel.kaartjes td.bedrag,.tabel.kaartjes td.rechts{grid-column:-2/-1!important;grid-row:1;text-align:right}
.tabel.kaartjes td[data-label]::before{content:attr(data-label) " ";font-size:12px;font-weight:700;color:var(--dof)}
.tabel.kaartjes td:empty{display:none}
.tabel.kaartjes td.acties{text-align:left;margin-top:6px}
.tabel.kaartjes td.acties .knoppen{justify-content:flex-start;flex-wrap:wrap}
.tabel.kaartjes tbody tr[data-href]:hover td{background:none}
.kaart .tabel.kaartjes tr{margin:0;border:0;border-top:1px solid var(--lijn);border-radius:0;padding:12px 0}
.kaart.vlak .tabel.kaartjes tr{padding:12px 20px}
.kaart .tabel.kaartjes tr:first-child{border-top:0}
.kaart.vlak .tabel.kaartjes td:first-child,.kaart.vlak .tabel.kaartjes td:last-child{padding-left:0;padding-right:0}

/* ================================================================ regels: de werklijst (Vandaag, Berichten, ronde, taken, leads)
   <ul class="regels"><li class="regel" id="r-…" data-href="…">[.vink] [.avatar] <div class="wat"><span class="titel"><b>Klant</b>
   wat er moet</span><span class="sub">…</span></div> [.chips] <span class="knoppen">[Later .stil] [⋯ .ico.stil] [knop .omrand]</span></li> */
.regels{list-style:none;margin:0;padding:0}
.regel{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:var(--regel);padding:8px 20px;border-top:1px solid var(--lijn);font-size:14px;scroll-margin-top:80px}
.regels>.regel:first-child{border-top:0}
.regels.dicht{--regel:48px}
.regels.dicht>.regel{padding-top:5px;padding-bottom:5px}
.regel>.vink{flex:none;display:flex}
.regel>.avatar{flex:none}
.regel>.wat{flex:1 1 0;min-width:0}
.regel .titel{display:block;color:var(--inkt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regel .titel b,.regel .titel a{font-weight:800;color:var(--inkt)}
.regel .sub{display:block;font-size:13px;color:var(--dof);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regel .bericht{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;color:var(--tekst);font-size:14px;overflow-wrap:anywhere}
.regel>.chips{flex:none}
.regel>.knoppen{flex:none;flex-wrap:nowrap;gap:4px}
.regel>.knoppen button,.regel>.knoppen .knop{padding:6px 12px;min-height:32px;font-size:13px}
.regel>.knoppen .ico{width:32px;padding:0}
.regel>.tekstknop{flex:none;font-size:13px;color:var(--dof);font-weight:600}  /* "Bij Daan", "Indienen doet een senior" */
.regel[data-href]{cursor:pointer}
.regel[data-href]:hover{background:var(--licht)}
.regel.gekozen{background:var(--licht);box-shadow:inset 3px 0 0 var(--accent)}
.regel.onder{padding-left:48px}                 /* dossierregel onder de kopregel van zijn ronde (Vandaag, In de rondes) */
.regel.kopregel{background:var(--licht)}
.regel.kopregel .titel{font-weight:800}
.regel.af .titel{color:var(--dof);text-decoration:line-through}
.regel .uitklap{flex:1 1 100%;margin:4px 0 4px;padding:14px 16px;background:var(--licht);border-radius:10px} /* Indienen en Akkoord vastleggen klappen open in de regel */
.regels+.meerlink,.meerlink{display:block;padding:10px 20px 14px;font-size:13px;border-top:1px solid var(--lijn)}
/* stand-kolom in een ronderegel: balk en tellingen per vak */
.regel>.stand{flex:0 1 340px;min-width:180px;display:grid;gap:6px}
.vaklinks{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;font-weight:700;color:var(--dof)}
.vaklinks a,.vaklinks span{display:inline-flex;align-items:center;gap:5px;color:var(--dof);font-weight:700}
.vaklinks a:hover{color:var(--inkt)}
.vaklinks .stip{width:7px;height:7px}

/* ================================================================ schakelaar (segmented control): stand in inkt, niet in de kantoorkleur */
.schakelaar{display:inline-flex;gap:2px;padding:3px;margin:0;max-width:100%;background:var(--licht);border:1px solid var(--lijn);border-radius:999px;vertical-align:middle;position:relative}
.schakelaar button,.schakelaar label,.schakelaar a{margin:0;min-height:34px;padding:7px 14px;border-radius:999px;background:transparent;box-shadow:none;color:var(--tekst);font-size:13px;font-weight:700;line-height:1.25;text-align:center;white-space:normal;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.schakelaar button:hover,.schakelaar label:hover,.schakelaar a:hover{background:var(--kaart);box-shadow:none;color:var(--inkt);text-decoration:none}
.schakelaar button[aria-pressed="true"],.schakelaar a[aria-current]{background:var(--inkt);color:var(--op-inkt);opacity:1;pointer-events:none}
.schakelaar input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.schakelaar input:checked+label{background:var(--inkt);color:var(--op-inkt)}
.schakelaar input:focus-visible+label{outline:3px solid var(--focus);outline-offset:1px}
.schakelaar .n{background:var(--kaart)}
.schakelaar [aria-pressed="true"] .n,.schakelaar [aria-current] .n,.schakelaar input:checked+label .n{background:rgba(255,255,255,.2);color:inherit}
.schakelaar.klein button,.schakelaar.klein label,.schakelaar.klein a{min-height:28px;padding:4px 11px;font-size:12px}
.schakelaar.breed{display:flex}
.schakelaar.breed button,.schakelaar.breed label,.schakelaar.breed a{flex:1;justify-content:center}
.instelling{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 0;border-top:1px solid var(--lijn);flex-wrap:wrap}
.kaart-kop+.instelling,.instelling:first-child{border-top:0;padding-top:4px}
.instelling .naam{font-weight:700;color:var(--inkt);font-size:14px}
.instelling .uitleg{font-size:13px;color:var(--dof);margin-top:2px}
.instelling .laatst{font-size:12px;color:var(--dof);margin-top:2px}
.instelling.uit .naam,.instelling.uit .uitleg{color:var(--dof)}
.instelling>div:first-child{flex:1;min-width:min(200px,100%)}

/* ================================================================ tabbladen, filters en teller */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--lijn);margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--dof);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.tabs a:hover{color:var(--inkt);text-decoration:none}
.tabs a.actief{color:var(--inkt);border-bottom-color:var(--accent)}
.n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;padding:0 6px;border-radius:999px;background:var(--grijs-bg);color:var(--grijs);font-size:12px;font-weight:800;line-height:20px}
.tabs a.actief .n{background:var(--inkt);color:var(--op-inkt)}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filter{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border-radius:999px;background:var(--kaart);box-shadow:inset 0 0 0 1px var(--lijn-d);color:var(--tekst);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.filter:hover{box-shadow:inset 0 0 0 1px var(--veldrand);text-decoration:none;color:var(--inkt)}
.filter.actief{background:var(--inkt);color:var(--op-inkt);box-shadow:none}
.filter.actief .n{background:rgba(255,255,255,.2);color:inherit}
.filter.persoon{min-width:32px;padding:5px 8px;justify-content:center;letter-spacing:.02em}   /* filter per collega: initialen */
.filters .scheiding{width:1px;height:20px;background:var(--lijn-d);margin:0 4px}
.lijstkop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin:0 0 12px}
.lijstkop input.zoek,.kaart-kop input.zoek{width:280px}
/* teller in het menu: inkt op lichtgrijs, alleen boven 0, nooit rood en nooit in de kantoorkleur */
.teller{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--grijs-bg);color:var(--inkt);font-size:12px;font-weight:800;line-height:1}

/* ================================================================ avatar met initialen (behandelaar, collega, meekijker) */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--grijs-bg);color:var(--inkt);font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;text-decoration:none}
.avatar.klein{width:24px;height:24px;font-size:10px}
.avatar.groot{width:36px;height:36px;font-size:13px}
.avatar.ik{background:var(--inkt);color:var(--op-inkt)}
.avatar.leeg{background:transparent;border:1.5px dashed var(--veldrand);color:var(--dof)}   /* zonder behandelaar */
.avatars{display:inline-flex;align-items:center}
.avatars .avatar{box-shadow:0 0 0 2px var(--kaart)}
.avatars .avatar+.avatar{margin-left:-6px}

/* ================================================================ schil: zijbalk (desktop), kopbalk en tabbalk (telefoon) */
/* de achtergrond tekent de zijbalk door tot onderaan, ook als de pagina langer is dan het scherm */
.app{display:grid;grid-template-columns:var(--zij) minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--kaart) calc(var(--zij) - 1px),var(--lijn) calc(var(--zij) - 1px),var(--lijn) var(--zij),transparent var(--zij))}
.zijbalk{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;padding:18px 12px 14px;background:var(--kaart);border-right:1px solid var(--lijn);overflow-y:auto;scrollbar-width:thin}
.zijbalk .merk{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px;margin:0 0 14px;color:var(--inkt);text-decoration:none}
.zijbalk .merk:hover{text-decoration:none}
.zijbalk .merk img{display:block;height:28px;width:auto;max-width:180px}
.zijbalk .merk .kortenaam{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* merkje: zonder logo een blokje in de kantoorkleur met de initialen ("TB", "BM") */
.merkje{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--knop);color:var(--op-accent);font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1}
.merkje.klein{width:26px;height:26px;border-radius:7px;font-size:11px}
.zijknop{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:8px 10px;border-radius:10px;background:transparent;box-shadow:none;color:var(--tekst);font-size:14px;font-weight:700;justify-content:flex-start}
.zijknop:hover{background:var(--licht);box-shadow:none;color:var(--inkt)}
.zijknop kbd{margin-left:auto;font-size:10px;min-width:18px;padding:1px 5px}
.hoofdnav,.zijnav{display:grid;gap:2px}
.hoofdnav{margin-top:10px}
.zijnav{margin-top:10px;padding-top:10px;border-top:1px solid var(--lijn)}
.hoofdnav a,.zijnav a,.zijvoet a{display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 10px;border-radius:10px;color:var(--tekst);font-size:14px;font-weight:700;text-decoration:none;position:relative}
.zijnav a{min-height:34px;padding:6px 10px;font-size:13px}
.hoofdnav a:hover,.zijnav a:hover,.zijvoet a:hover{background:var(--licht);color:var(--inkt);text-decoration:none}
/* actief: tint van de kantoorkleur met een balkje van 3px; de tekst blijft inkt (leesbaar bij elke kleur) */
.hoofdnav a.actief,.zijnav a.actief{background:var(--merk-zacht);color:var(--inkt);box-shadow:inset 3px 0 0 var(--accent)}
.hoofdnav svg,.zijnav svg,.zijvoet svg,.zijknop svg,.tabbalk svg,.kopbalk svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zijnav svg{width:18px;height:18px}
.zijnav .stip{margin-left:auto}
.zijvoet{margin-top:auto;display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--lijn)}
.zijvoet a.koppeling{font-size:13px;min-height:34px}
.zijvoet a.koppeling .stip{margin:0 6px}
.zijvoet a.koppeling.weg{background:var(--rood-bg);color:var(--rood)}
.zijvoet a.ingelogd{display:block;min-height:0;padding:6px 10px;font-size:13px;font-weight:700;color:var(--inkt);line-height:1.35;overflow-wrap:anywhere}
.zijvoet a.ingelogd span{display:block;font-size:12px;font-weight:600;color:var(--dof)}
/* strook iconen (68px): keten, reviewmodus en schermen van 761 tot 1100px */
.app.iconen{--zij:68px}
.app.iconen .zijbalk{padding:16px 10px;align-items:center}
.app.iconen .zijbalk .merk{padding:0;justify-content:center}
.app.iconen .zijbalk .merk img,.app.iconen .zijbalk .merk .kortenaam,.app.iconen .zijvoet a.ingelogd,.app.iconen .zijknop kbd{display:none}
.app.iconen .hoofdnav span,.app.iconen .zijnav span,.app.iconen .zijvoet span,.app.iconen .zijknop span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app.iconen .hoofdnav a,.app.iconen .zijnav a,.app.iconen .zijvoet a,.app.iconen .zijknop{justify-content:center;padding:10px;width:44px}
.app.iconen .teller{position:absolute;top:1px;right:-3px;min-width:18px;height:18px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px var(--kaart)}
.app.iconen .zijnav .stip{position:absolute;top:6px;right:6px}
.app.iconen .zijvoet .koppeling .stip{margin:0}
.kopbalk,.tabbalk{display:none}
/* inhoud: lijsten tot 1200px, formulieren en Kantoor 860px, ronde/bord/klantpagina de volle breedte */
main.inhoud{display:block;width:100%;max-width:1200px;margin:0;padding:28px 40px 72px;min-width:0}
main.inhoud.smal{max-width:940px}
main.inhoud.vol{max-width:none}
.paginakop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 20px}
.paginakop>div:first-child{min-width:0;max-width:100%}
.paginakop .terug{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--dof);margin:0 0 6px}
.paginakop .terug:hover{color:var(--inkt);text-decoration:none}
.paginakop .terug svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.paginakop .zin{font-size:16px;color:var(--tekst);margin:4px 0 0;line-height:1.45}
.paginakop .zin b{color:var(--inkt);font-weight:800}
.paginakop .knoppen{margin-left:auto}
.paginakop .chips{margin-top:10px}
/* Bekijk als: vaste gele balk boven de inhoud. Tekst in één <span> (flex zet anders gaten rond de <b>), knop erna */
.alsbalk{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 40px;background:var(--geel-bg);border-bottom:1px solid var(--geel-rand);color:var(--geel-t);font-size:14px;font-weight:600}
.alsbalk b{color:inherit;font-weight:800}
.alsbalk .knop{margin-left:auto;min-height:32px;padding:6px 12px;font-size:13px}
/* werkbalk van een keten: "‹ Btw Q3 2026 · 3 van 11 · Daarna: Studio Linde ›" */
.werkbalk{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 40px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn);font-size:13px}
.werkbalk .terug{font-weight:800;color:var(--inkt);overflow:hidden;text-overflow:ellipsis;min-width:0}
.werkbalk .positie{color:var(--dof);font-weight:700}
.werkbalk .daarna{margin-left:auto;color:var(--dof);font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.werkbalk .grens{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--oranje-bg);color:var(--oranje);font-weight:700}
.werkbalk .knop{min-height:32px;width:32px;padding:0}

/* ================================================================ menu (⋯ op een regel, Meer in de actiebalk) */
details.menu{position:relative;display:inline-block}
details.menu>summary{list-style:none}
details.menu>summary::-webkit-details-marker{display:none}
.menu-lijst{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:grid;gap:2px;min-width:230px;max-width:calc(100vw - 32px);padding:6px;background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;box-shadow:var(--schaduw-hoog);text-align:left}
.menu-lijst.boven{top:auto;bottom:calc(100% + 6px)}
.menu-lijst.links{right:auto;left:0}
.menu-lijst button,.menu-lijst a{justify-content:flex-start;width:100%;min-height:38px;padding:8px 12px;border-radius:8px;background:transparent;box-shadow:none;color:var(--inkt);font-size:14px;font-weight:700;text-decoration:none;white-space:normal;text-align:left}
.menu-lijst button:hover,.menu-lijst a:hover{background:var(--licht);box-shadow:none;text-decoration:none}
.menu-lijst .gevaar{color:var(--rood)}
.menu-lijst svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--dof)}
.menu-lijst a{display:flex;align-items:center;gap:8px}
.menu-lijst hr{margin:4px 6px}
.menu-kop{padding:8px 12px 2px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dof)}
.menu-namen{display:flex;flex-wrap:wrap;gap:6px;padding:4px 8px 8px}
.menu-lijst .menu-namen button{width:auto;min-height:32px;padding:5px 12px;border-radius:999px;font-size:13px;box-shadow:inset 0 0 0 1.5px var(--lijn-d)}
.menu-lijst .menu-namen button:hover{box-shadow:inset 0 0 0 1.5px var(--inkt)}

/* ================================================================ zoeken en commandopalet (/ en Ctrl/Cmd+K), + Nieuw (N) */
.sluier{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:var(--sluier-kleur)}
.palet,.venster{width:100%;max-width:640px;max-height:76vh;display:flex;flex-direction:column;background:var(--kaart);border:1px solid var(--lijn);border-radius:16px;box-shadow:var(--schaduw-hoog);overflow:hidden}
.venster{max-width:520px}
.palet-veld{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--lijn)}
.palet-veld svg{width:20px;height:20px;flex:none;stroke:var(--dof);fill:none;stroke-width:2;stroke-linecap:round}
.palet-veld input,.palet-veld input:focus,.palet-veld input:hover{flex:1;min-width:0;border:0;box-shadow:none;background:transparent;padding:6px 0;min-height:0;font-size:17px;font-weight:600}
.palet-lijst{overflow-y:auto;padding:6px;overscroll-behavior:contain}
.palet-groep{padding:10px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dof)}
.palet-optie{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;color:var(--inkt);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.palet-optie:hover{text-decoration:none}
.palet-optie>.wat{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palet-optie .sub{display:inline;font-size:13px;font-weight:500;color:var(--dof);margin-left:6px}
.palet-optie .ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--licht);color:var(--tekst)}
.palet-optie .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.palet-optie kbd{margin-left:auto;visibility:hidden}
.palet-optie[aria-selected="true"],.palet-optie:hover{background:var(--licht)}
.palet-optie[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--accent)}
.palet-optie[aria-selected="true"] kbd{visibility:visible}
.palet-optie mark{background:transparent;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.palet-leeg{padding:14px 12px;font-size:14px;color:var(--dof)}
.palet-voet{display:flex;gap:6px 14px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--lijn);font-size:12px;color:var(--dof)}
.venster-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0}
.venster-kop h2{margin:0;font-size:16px}
.venster-romp{padding:12px 16px 16px;overflow-y:auto}
.nieuwknoppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.nieuwknoppen .knop,.nieuwknoppen button{justify-content:flex-start;border-radius:12px;min-height:48px;white-space:normal;text-align:left}

/* ================================================================ lege staat, stappen, stappenpad, voortgang */
div.leeg{text-align:center;padding:36px 20px;color:var(--dof)}
div.leeg .ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--licht);color:var(--tekst);margin:0 0 12px}
div.leeg.klaar .ico{background:var(--groen-bg);color:var(--groen)}
div.leeg.slot .ico{background:var(--grijs-bg);color:var(--grijs)}
div.leeg .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
div.leeg h3{font-size:16px;margin:0 0 4px}
div.leeg p{max-width:34em;margin:0 auto 16px}
div.leeg .knoppen{justify-content:center}
/* stappen: plan "Kantoor inrichten" */
.stappen{list-style:none;margin:0;padding:0}
.stap{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:16px 0;border-top:1px solid var(--lijn)}
.stap:first-child{border-top:0;padding-top:4px}
.stap .nr{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--licht);color:var(--tekst);font-weight:800}
.stap .nr svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.stap.nu .nr{background:var(--inkt);color:var(--op-inkt)}
.stap.klaar .nr{background:var(--groen-bg);color:var(--groen)}
.stap.klaar h3{color:var(--dof)}
.stap p{margin:2px 0 0;font-size:14px}
.stap .knoppen{align-self:center}
/* stappenpad van een dossier: Stukken › Bij ons › Review › Akkoord › Ingediend › Klant laten weten */
.stappenpad{display:flex;list-style:none;margin:0 0 18px;padding:0}
.stappenpad>li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding-right:8px}
.stappenpad>li::after{content:"";position:absolute;top:13px;left:36px;right:8px;height:2px;border-radius:2px;background:var(--lijn)}
.stappenpad>li:last-child::after{display:none}
.stappenpad>li.klaar::after{background:var(--vul-groen)}
.stappenpad .nr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;margin-bottom:6px;background:var(--kaart);box-shadow:inset 0 0 0 1.5px var(--lijn-d);color:var(--dof);font-size:12px;font-weight:800}
.stappenpad .nr svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stappenpad .klaar .nr{background:var(--groen-bg);box-shadow:none;color:var(--groen)}
.stappenpad .nu .nr{background:var(--inkt);box-shadow:none;color:var(--op-inkt)}
.stappenpad b{font-size:13px;font-weight:800;color:var(--inkt);line-height:1.3}
.stappenpad .straks b{color:var(--dof);font-weight:700}
.stappenpad .datum{font-size:12px;color:var(--dof)}
.stappenpad-kort{display:none;margin:0 0 14px;font-size:13px;font-weight:700;color:var(--dof)}
.stappenpad-kort b{color:var(--inkt)}
.stappenpad-kort .voortgang{margin-top:6px}
/* voortgang: inkt; .groen = klaar; i.mijn = jouw deel in de kantoorkleur; meer i's naast elkaar = verdeling */
.voortgang{display:flex;height:6px;border-radius:999px;background:var(--vul-grijs);overflow:hidden}
.voortgang>i,.voortgang>div{display:block;flex:none;height:100%;background:var(--vul-inkt)}
.voortgang.groen>i{background:var(--vul-groen)}
.voortgang>i.mijn{background:var(--accent)}
.voortgang>i.groen{background:var(--vul-groen)}
.voortgang>i.oranje{background:var(--vul-oranje)}
.voortgang>i.indigo{background:var(--vul-indigo)}
.voortgang.dik{height:8px}
/* stapbalk: een ronde in de stapkleuren, segmenten met een naadje */
.stapbalk{display:flex;gap:2px;height:8px;border-radius:999px;overflow:hidden}
.stapbalk>i{display:block;height:100%;min-width:3px;background:var(--vul-grijs)}
.stapbalk>i.groen{background:var(--vul-groen)}
.stapbalk>i.oranje{background:var(--vul-oranje)}
.stapbalk>i.indigo{background:var(--vul-indigo)}
.stapbalk>i.vol{background:var(--vul-inkt)}
/* deadlinegroep met haalbaarheid (Werk > Rondes) */
.deadlinegroep{margin:0 0 24px}
.deadlinekop{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:0 0 10px}
.deadlinekop h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--inkt)}
.deadlinekop .sub{font-size:13px}
.deadlinekop .chip{margin-left:auto}
.haalbaar{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--lijn);background:var(--licht);font-size:14px;color:var(--tekst)}
.haalbaar p{margin:0;flex:1 1 360px;min-width:0}
.haalbaar b{color:var(--inkt)}

/* ================================================================ werkbank: een ronde als lijst in vakken of als bord (geen slepen) */
.vakgroep{margin:0 0 16px}
.vakkop{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--lijn);font-size:14px;font-weight:800;color:var(--inkt)}
.vakkop .stip{width:9px;height:9px}
.vakkop .knoppen{margin-left:auto;gap:6px}
.vakkop .knoppen button,.vakkop .knoppen .knop{min-height:32px;padding:6px 12px;font-size:13px}
details.vakgroep>summary{list-style:none;cursor:pointer}
details.vakgroep>summary::-webkit-details-marker{display:none}
.werkbank{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:12px;overflow-x:auto;padding:0 0 10px;align-items:start;scrollbar-width:thin}
.vak{display:flex;flex-direction:column;gap:8px;min-height:180px;padding:10px;background:var(--licht);border:1px solid var(--lijn);border-radius:var(--r)}
.vak>.vakkop{padding:4px 4px 6px;border:0;font-size:13px}
.vak>.vakkop .n{margin-left:auto}
.vak .bulk{width:100%;min-height:32px;padding:6px 10px;font-size:13px}
.vakkaart{display:block;padding:10px 12px;background:var(--kaart);border:1px solid var(--lijn);border-radius:10px;box-shadow:var(--schaduw);color:var(--tekst);font-size:13px;text-decoration:none}
.vakkaart:hover{border-color:var(--lijn-d);text-decoration:none}
.vakkaart .kop2{display:flex;align-items:center;gap:8px}
.vakkaart .klant{flex:1;min-width:0;font-size:14px;font-weight:800;color:var(--inkt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vakkaart .sub{display:block;font-size:12px;margin-top:2px}
.vakkaart .onder{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.vakkaart .onder .knop,.vakkaart .onder button{margin-left:auto;min-height:30px;padding:5px 11px;font-size:12px}

/* ================================================================ Nu-kaart (Mijn dag en dossier): één zin en één hoofdknop */
.nukaart{background:var(--kaart);border:1.5px solid var(--inkt);border-radius:14px;padding:16px 18px;margin:0 0 16px}
.nukaart .kopje{margin-bottom:6px}
.nukaart .titel{font-size:18px;font-weight:800;color:var(--inkt);letter-spacing:-.015em;line-height:1.3;margin:0 0 6px}
.nukaart .zin{font-size:15px;color:var(--tekst);margin:0}
.nukaart .briefing{margin:10px 0 0;padding:10px 12px;background:var(--licht);border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}
.nukaart>.knoppen{margin-top:14px}
.nukaart.rustig{border-width:1px;border-color:var(--lijn)}

/* ================================================================ gesprek: WhatsApp-bubbels, mails, notities, systeemregels */
.chat{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--chat);border:1px solid var(--lijn);border-radius:var(--r);max-height:72vh;overflow-y:auto;overscroll-behavior:contain}
.chat.vrij{max-height:none;overflow:visible}
.chat>*{flex:none}
.chat [hidden]{display:none!important}
.chat .dag{align-self:center;margin:12px 0 4px;padding:2px 10px;border-radius:999px;background:var(--kaart);border:1px solid var(--lijn);font-size:12px;font-weight:700;color:var(--dof)}
.chat .meerladen{align-self:center;min-height:32px;padding:6px 14px;font-size:13px}
.ballon,.wa{position:relative;max-width:min(78%,560px);padding:7px 12px 6px;border-radius:14px;font-size:14px;line-height:1.45;color:var(--inkt);white-space:pre-wrap;overflow-wrap:anywhere}
.ballon.in,.wa.in{align-self:flex-start;background:var(--kaart);border:1px solid var(--lijn);border-top-left-radius:4px}
.ballon.uit,.wa.uit{align-self:flex-end;background:var(--uit-bg);border:1px solid var(--uit-rand);border-top-right-radius:4px}
.ballon .van,.wa .afzender{display:block;font-size:12px;font-weight:800;color:var(--tekst);margin-bottom:1px;white-space:normal}
.ballon .tijd,.wa small{display:block;text-align:right;font-size:11px;font-weight:600;color:var(--dof);margin-top:2px;white-space:normal}
.ballon .tijd .ok{color:var(--groen);font-weight:800}
.ballon.concept{align-self:flex-end;background:transparent;border:1.5px dashed var(--veldrand);color:var(--tekst);border-top-right-radius:4px}
.ballon.concept .van{color:var(--dof)}
.ballon.mislukt{border-color:var(--rood-rand)}
.ballon.mislukt .tijd{color:var(--rood)}
.wa-ok{align-self:flex-end;font-size:11px;font-weight:700;color:var(--groen);margin:-2px 4px 2px}
/* mail, gesprek (telefoon), notitie en intern als kaartje; .uit staat rechts */
.chatkaart{align-self:flex-start;width:min(82%,640px);padding:10px 14px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);font-size:14px;color:var(--inkt)}
.chatkaart.uit{align-self:flex-end}
.chatkaart .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 4px;font-size:12px;font-weight:700;color:var(--dof)}
.chatkaart .meta svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chatkaart .meta .rechts{margin-left:auto;font-weight:600}
.chatkaart .onderwerp{display:block;font-weight:800;color:var(--inkt);margin:0 0 2px}
.chatkaart .tekst{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tekst)}
.chatkaart .tekst.ingekort{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.chatkaart .knoppen{margin-top:8px}
.chatkaart.notitie{background:var(--licht);border-style:dashed;border-color:var(--lijn-d)}
.chatkaart.intern{background:var(--geel-bg);border-color:var(--geel-rand)}
.chatkaart.intern .meta,.chatkaart.intern .tekst{color:var(--geel-t)}
.systeem{align-self:center;display:flex;align-items:center;gap:6px;max-width:90%;padding:2px 0;font-size:12px;font-weight:600;color:var(--dof);text-align:center}
.systeem svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ================================================================ schrijfvak (klantpagina, berichtscherm, Antwoord in een keten) */
.schrijfvak,.schrijf{background:var(--kaart);border:1.5px solid var(--lijn-d);border-radius:var(--r);padding:10px 14px;margin:12px 0 0;transition:border-color .15s,box-shadow .15s}
.schrijfvak:focus-within,.schrijf:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.schrijfvak.intern{background:var(--geel-bg);border-color:var(--geel-rand)}
.kanalen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 6px}
.kanalen label{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0;min-height:30px;padding:4px 12px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--lijn-d);color:var(--tekst);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.kanalen label:hover{box-shadow:inset 0 0 0 1px var(--veldrand);color:var(--inkt)}
.kanalen label:has(input:checked){background:var(--inkt);color:var(--op-inkt);box-shadow:none}
.kanalen label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}
.kanalen input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kanalen svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.regelveld{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid var(--lijn);font-size:14px}
.regelveld>label,.regelveld>.wat{margin:0;flex:none;width:76px;font-size:13px;font-weight:700;color:var(--dof)}
.regelveld input,.regelveld input:focus,.regelveld input:hover{flex:1;min-width:120px;border:0;box-shadow:none;background:transparent;padding:6px 0;min-height:0;font-size:14px}
.schrijfvak textarea,.schrijf textarea,.schrijfvak textarea:focus,.schrijf textarea:focus{display:block;border:0;box-shadow:none;outline:0;background:transparent;padding:10px 0;min-height:96px;font-size:15px;resize:vertical}
.schrijf .onderwerp,.schrijf .onderwerp:focus{width:100%;border:0;border-bottom:1px solid var(--lijn);border-radius:0;box-shadow:none;padding:6px 0;min-height:0;font-size:14px;outline:0}
.conceptregel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 0;font-size:12px;font-weight:700;color:var(--dof)}
.conceptregel .chip{font-size:11px}
.schrijfvak .voet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--lijn)}
.schrijfvak .voet .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.schrijfvak .voet .hint{flex:1 1 200px;font-size:13px;color:var(--dof)}

/* ================================================================ actiebalk en vinkbalk */
.actiebalk{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 28px;background:color-mix(in srgb,var(--kaart) 96%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--lijn)}
.actiebalk .rechts{margin-left:auto}
.sneltoetsen{width:100%;font-size:12px;color:var(--dof);display:flex;gap:6px 14px;flex-wrap:wrap}
.vinkbalk{position:sticky;bottom:16px;z-index:10;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 8px 8px 18px;margin:12px 0 0;border-radius:999px;background:var(--balk);color:var(--op-balk);font-size:14px;font-weight:700;box-shadow:var(--schaduw-hoog)}
.vinkbalk button,.vinkbalk .knop{background:rgba(255,255,255,.1);color:var(--op-balk);box-shadow:none;min-height:32px;padding:6px 12px;font-size:13px}
.vinkbalk button:hover,.vinkbalk .knop:hover{background:rgba(255,255,255,.2);box-shadow:none}
.vinkbalk button.primair{background:var(--op-balk);color:var(--balk)}
.vinkbalk button.stil{background:transparent}
.vinkbalk .rechts{margin-left:auto}

/* ================================================================ indelingen */
/* Vandaag met Mijn dag aan (vanaf 1200px): werk links tot 760px, Mijn dag rechts 360px en blijft staan */
.indeling-vandaag{display:grid;grid-template-columns:minmax(0,760px) 360px;gap:32px;align-items:start}
.zijkolom{position:sticky;top:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
/* klantpagina: gesprek links, rechts 320px (Loopt nu, Contact, In het kort, Afspraken, Bonnetjes) */
.indeling-klant{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.zijblokken{display:grid;gap:12px;min-width:0}
.zijblokken>.kaart{margin:0;padding:16px 18px}
/* Kantoor: subnavigatie 200px en inhoud tot 860px */
.metsubnav{display:grid;grid-template-columns:200px minmax(0,860px);gap:32px;align-items:start}
.subnav{position:sticky;top:20px;display:grid;gap:2px}
.subnav a{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 10px;border-radius:8px;color:var(--tekst);font-size:14px;font-weight:700;text-decoration:none}
.subnav a:hover{background:var(--licht);color:var(--inkt);text-decoration:none}
.subnav a.actief{background:var(--merk-zacht);color:var(--inkt);box-shadow:inset 3px 0 0 var(--accent)}
.subnav a>span{flex:1;min-width:0}
/* reviewmodus: concept groot links, checklist en mailvoorbeeld rechts */
.tweeluik{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,1fr);min-height:100vh}
.doc{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--licht);border-right:1px solid var(--lijn)}
.docbalk{display:flex;align-items:center;gap:4px;padding:8px 12px;background:var(--kaart);border-bottom:1px solid var(--lijn);font-size:12px;color:var(--dof);font-weight:600}
.beeld{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:20px}
.beeld iframe{width:100%;height:100%;border:0;background:#fff;border-radius:4px}
.paneel{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);padding:20px 28px 8px}
/* Mijn dag-kolom */
.dagnav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dagnav h2{margin:0;font-size:17px}
.dagnav .knoppen{gap:2px}
.dagstart{font-size:13px;color:var(--dof);margin:0}
.dagstart b{color:var(--inkt)}
.straks{list-style:none;margin:0;padding:0;font-size:13px}
.straks li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:36px;padding:6px 0;border-top:1px solid var(--lijn);color:var(--inkt);font-weight:600}
.straks li:first-child{border-top:0}
.straks .tijd{font-weight:800;color:var(--inkt);font-variant-numeric:tabular-nums}
.straks .wat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.straks li.gebed,.straks li.vrij{color:var(--dof);font-weight:600}
.straks li.gebed .wat{display:flex;align-items:center;gap:6px}
.straks li.gebed svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.straks li.vrij .wat{font-style:italic}
.straks li.voorbij{opacity:.55}
/* inlogscherm (neutraal, met de productnaam) */
.inlogvak{max-width:420px;margin:12vh auto 48px;padding:0 16px}
.inlogvak .kaart{padding:28px}

/* ================================================================ focus en beweging */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0}
#laadbalk{position:fixed;top:0;left:0;z-index:1000;height:3px;width:0;background:var(--accent);opacity:0;pointer-events:none}
#laadbalk.aan{opacity:1;width:90%;transition:width 6s cubic-bezier(.08,.8,.2,1)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================================================================ OUD: klassen van de nog niet omgebouwde schermen
   In de nieuwe kleuren, zonder eigen donkere regels (alleen tokens). Verdwijnen in de opruimstap, scherm voor scherm.
   Hernoemd: het oude filterpilletje .chip heet .kp-chip (werkbord.ts, programmas.ts, schermen/klant.ts); .label blijft een
   alias van .kopje; .leeg, .inhoud en .merk zijn in de nieuwe stijl gescoped (div.leeg, main.inhoud, p.merk) en botsen niet
   meer met .rond.leeg, .bijlage.leeg en .tijdlijn .inhoud. Vervallen (alleen de oude schil gebruikte ze): nav.app, .mwmenu,
   .mwlijst, .progknop, .navzoek, .themaknop, main.breed, de oude .teller en .alsbalk, .driekoloms, .lijst, .lijstrij,
   .tijdlijn2, .nieuwblok. */
.kp-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border-radius:999px;background:var(--kaart);box-shadow:inset 0 0 0 1px var(--lijn-d);color:var(--tekst);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;border:0}
.kp-chip:hover{box-shadow:inset 0 0 0 1px var(--veldrand);color:var(--inkt);text-decoration:none;background:var(--kaart)}
.kp-chip.aan,button.kp-chip.aan{background:var(--inkt);color:var(--op-inkt);box-shadow:none}
p.merk{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--inkt)}
p.merk svg{height:22px;width:auto}
.kantoorlogo{display:block;margin:0 0 18px}
.kantoorlogo img{height:26px;width:auto}
.kantoorlogo .licht{display:var(--logo-licht)}
.kantoorlogo .donker{display:var(--logo-donker)}
main.smal{max-width:440px;margin:12vh auto 48px;padding:0 16px}
.kop{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;align-items:start}
.formrij{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.formrij>*{margin:0}
form.inline{display:inline;margin:0}
.zoek{width:100%;max-width:360px}
select.mini{font-size:13px;min-height:32px;padding:4px 30px 4px 10px;background-position:right 8px center;border-radius:8px}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.tegel{display:block;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 16px;color:inherit;text-decoration:none;font-weight:500}
.tegel b{display:block;font-size:26px;font-weight:800;line-height:1.2;color:var(--inkt)}
.tegel span{font-size:13px;color:var(--dof)}
.tegel.rood b{color:var(--rood)}
.b{display:inline-flex;align-items:center;font-size:12px;font-weight:700;line-height:1.35;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--grijs-bg);color:var(--grijs)}
.b.groen,.b.teal{background:var(--groen-bg);color:var(--groen)}
.b.blauw,.b.paars{background:var(--indigo-bg);color:var(--indigo-t)}
.b.oranje,.b.geel{background:var(--oranje-bg);color:var(--oranje)}
.b.rood{background:var(--rood-bg);color:var(--rood)}
.dl.rood{color:var(--rood);font-weight:700}
.dl.oranje{color:var(--oranje);font-weight:700}
.redenen{display:flex;flex-wrap:wrap;gap:6px}
.redenmenu{display:inline-block}
.redenmenu[open]{display:block;width:100%}
.redenmenu>summary{list-style:none}
.redenmenu>summary::-webkit-details-marker{display:none}
.redenmenu .redenen{margin-top:6px}
.tijdlijn>div{border-left:2px solid var(--lijn);padding:0 0 14px 14px;position:relative}
.tijdlijn>div::before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--lijn-d)}
.tijdlijn .inhoud{white-space:pre-wrap;font-size:14px;margin-top:4px}
.planbord td.cel{min-width:130px;white-space:nowrap}
.planbord td:first-child{min-width:200px}
.kaartje{background:var(--kaart);border:1px solid var(--lijn);border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:14px}
.kaartje h3{font-size:15px;margin:0 0 4px}
.check{list-style:none;padding:0;margin:0;font-size:14px}
.check li{padding:4px 0;display:flex;gap:8px;align-items:center}
.mwrij{padding:12px 0;border-bottom:1px solid var(--lijn)}
.rollen{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.rolvink{margin:0;font-size:13px;font-weight:600;color:var(--inkt);display:flex;gap:6px;align-items:center}
table.matrix td:not(:first-child),table.matrix th:not(:first-child){text-align:center}
table.matrix td:not(:first-child){color:var(--groen);font-weight:800}
.plakvak{background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:10px;padding:12px;margin-bottom:6px}
.keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.keuzekaart{display:block;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:22px;color:var(--inkt);text-decoration:none}
.keuzekaart:hover{border-color:var(--lijn-d);box-shadow:var(--schaduw-hoog);text-decoration:none}
.keuzekaart b{display:block;font-size:18px;font-weight:800;margin-bottom:6px}
.keuzekaart span{font-size:14px;font-weight:500;color:var(--dof)}
.radiokaart{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--lijn);border-radius:10px;padding:12px;margin:8px 0 0;color:var(--inkt);font-size:14px;font-weight:600;cursor:pointer}
.radiokaart:has(input:checked){border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
.dienstrij{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--lijn)}
.gesprek input:not([type=checkbox]):not([type=radio]),.gesprek select{font-size:15px}
.afronden{border:2px solid var(--lijn)}
table.prijstabel{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 8px}
table.prijstabel td{padding:6px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
table.prijstabel tr.som td{font-weight:800;color:var(--inkt);border-bottom:0}
.akkoord{margin-top:18px;padding-top:14px;border-top:1px solid var(--lijn)}
.groep{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--dof);margin:22px 0 10px}
.acties:not(td):not(th){display:flex;flex-direction:column;gap:8px}
.actie{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 16px}
.actie-tekst{flex:1 1 260px;min-width:0}
.actie-klant{font-size:13px;font-weight:600;color:var(--dof);text-decoration:none}
a.actie-klant:hover{color:var(--inkt)}
.actie-wat{font-size:15px;font-weight:700;color:var(--inkt);margin:1px 0 0}
.actie-waarom{font-size:13px;color:var(--dof);margin:2px 0 0}
.actie-knoppen{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.actie-sub{font-weight:500;color:var(--dof);font-size:14px}
.actie-bericht{margin:2px 0 0;font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.actie.gesprek .actie-klant a{color:var(--inkt);text-decoration:none}
.actie.bundel .aantal{flex:none;min-width:34px;height:34px;padding:0 6px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:var(--rood-bg);color:var(--rood)}
.actie.bundel.laat .aantal{background:var(--grijs-bg);color:var(--grijs)}
/* afvinkrondje: blijft 20px (de knopbasis zou er 40px van maken) */
.rond{flex:none;display:inline-block;width:20px;height:20px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--kaart);box-shadow:inset 0 0 0 1.5px var(--veldrand);cursor:pointer;vertical-align:middle}
.rond:hover{background:var(--groen-bg);box-shadow:inset 0 0 0 1.5px var(--groen)}
.rond.leeg{background:transparent;box-shadow:none;cursor:default}
.rond.leeg:hover{background:transparent;box-shadow:none}
.klein-snel{margin-top:10px}
.klein-snel input{font-size:14px}
.midden{flex:1;min-width:0;padding:20px 28px 40px}
.zijkant{background:var(--kaart);border-left:1px solid var(--lijn);padding:18px 18px 40px}
.tweekoloms{display:flex;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--lijn);min-height:calc(100vh - 70px)}
.tweekoloms .midden{flex:999 1 560px}
.tweekoloms .zijkant{flex:1 1 340px;width:auto;align-self:stretch}
.zijblok{margin-bottom:20px}
.zijblok .acties{gap:6px}
.zijblok .actie{padding:10px 12px}
.zijblok .actie-wat{font-size:14px}
.iemand summary{cursor:pointer;padding:5px 4px;list-style:none;color:var(--accent);font-weight:700}
.iemand[open]{flex-basis:100%}
.tlfilter{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tlfilter input[type=date]{min-height:34px;padding:5px 8px;font-size:13px}
.dag{align-self:center;font-size:12px;font-weight:700;color:var(--dof);background:var(--kaart);border:1px solid var(--lijn);border-radius:999px;padding:2px 10px;margin:10px 0 4px}
.chat .moment{margin:6px 0}
.moment{display:flex;gap:12px}
.moment .icoon{width:30px;height:30px;border-radius:50%;background:var(--grijs-bg);color:var(--inkt);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.moment .icoon.sys{background:var(--groen-bg);color:var(--groen)}
.wanneer{font-size:12px;color:var(--dof);margin:0 0 4px}
.bel{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:9px 12px;font-size:14px;max-width:640px;color:var(--inkt)}
.bel.intern{background:var(--geel-bg);border-color:var(--geel-rand)}
.bijlage{display:block;margin:2px 0 4px;max-width:100%}
.bijlage.foto img{display:block;max-width:min(280px,100%);max-height:320px;border-radius:8px;object-fit:cover;background:var(--licht)}
audio.bijlage{width:260px;max-width:100%}
video.bijlage{max-width:min(320px,100%);max-height:320px;border-radius:8px}
.bijlage.bestand{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;background:var(--licht);color:var(--inkt);text-decoration:none;white-space:normal;overflow-wrap:anywhere;font-weight:700}
.bijlage.bestand .ext{flex:none;font-size:10px;font-weight:800;color:var(--op-inkt);background:var(--inkt);border-radius:4px;padding:3px 5px;text-transform:uppercase}
.bijlage.leeg{font-size:13px;color:var(--dof);font-style:italic;white-space:normal}
.bonlabel{display:block;font-size:12px;color:var(--dof);margin:-2px 0 4px;white-space:normal}
.bonlabel.ok{color:var(--groen)}
.bonlabel.warn{color:var(--oranje)}
.bonlabel a{color:inherit;text-decoration:underline}
.bord{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px;margin-top:14px}
.bordkolom{background:var(--licht);border:1px solid var(--lijn);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;min-height:200px}
.bordkolom.groen{background:var(--groen-bg)}
.bordkolom.over{outline:2px dashed var(--accent)}
.bordkop{font-size:13px;font-weight:800;color:var(--inkt);margin:2px 4px 8px;display:flex;justify-content:space-between}
.bordkop span{color:var(--dof);font-weight:600}
.bordlijst{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 290px);overflow-y:auto}
.bordkaart{display:block;background:var(--kaart);border:1px solid var(--lijn);border-radius:10px;padding:8px 10px;text-decoration:none;color:var(--inkt)}
.bordkaart b{display:block;font-size:13.5px}
.bordkaart small{display:block;font-size:12px;color:var(--dof);margin-top:2px}
.dagen{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;margin-top:6px;background:var(--grijs-bg);color:var(--grijs)}
.dagen.oranje{background:var(--oranje-bg);color:var(--oranje)}
.dagen.rood{background:var(--rood-bg);color:var(--rood)}
.overzicht{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.overzicht .links{display:flex;flex-direction:column;gap:0;min-width:0}
.balk{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--vul-grijs);width:220px;max-width:100%}
.balk i{display:block;height:10px}
.legenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12px;color:var(--dof)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.uitz{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--inkt)}
.uitz:last-child{border-bottom:0}
.uitz:hover b{text-decoration:underline}
.uitz .stip{margin-top:6px}
.geefaan{margin:-4px 0 6px 18px}
.uitz small.overdracht{font-size:12px;font-weight:700;color:var(--indigo-t)}
.uitz small{display:block;font-size:13px;margin-top:1px}
.uitz small.klein{font-size:12px}
.rondje{flex:none;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:var(--grijs-bg);color:var(--grijs)}
a.meer{display:block;padding:4px 2px}
.laat{color:var(--rood)}
.rondes{display:flex;flex-direction:column;gap:10px}
.ronde{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 16px}
.ronde.later{background:transparent}
.rondekop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.rondenaam{flex:1 1 300px;min-width:0}
.rondenaam h2{font-size:16px;margin:0}
.rondenaam h2 a{color:var(--inkt);text-decoration:none}
.rondenaam p{margin:0}
.rondebalk{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--vul-grijs);margin-top:12px}
.rondebalk span{display:block;height:10px}
.laterlijst{margin-top:16px}
.laterlijst summary{cursor:pointer}
details.gegevensblok>summary{cursor:pointer;list-style:none}
details.gegevensblok>summary::-webkit-details-marker{display:none}
details.zeker{display:inline-block}
details.zeker>summary{list-style:none}
details.zeker>summary::-webkit-details-marker{display:none}
details.zeker[open]>summary{display:none}
.dagrij{padding:10px 0;border-bottom:1px solid var(--lijn)}
.dagrij:last-child{border-bottom:0}
details.bundelgroep>summary{list-style:none;cursor:pointer}
details.bundelgroep>summary::-webkit-details-marker{display:none}
.bestandjes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.bestandjes li{display:flex;gap:8px;justify-content:space-between}
.bestandjes a{overflow-wrap:anywhere}
details.inklap{border-top:1px solid var(--lijn)}
details.inklap>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 20px;font-weight:700;color:var(--inkt);font-size:14px}
details.inklap>summary::-webkit-details-marker{display:none}
details.inklap>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--dof);border-bottom:2px solid var(--dof);transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
details.inklap[open]>summary::before{transform:rotate(45deg)}
details.meer>summary{list-style:none;cursor:pointer;color:var(--accent);font-weight:700;font-size:13px}
details.meer>summary::-webkit-details-marker{display:none}

/* ================================================================ breed, smal en telefoon */
@media (min-width:761px){.alleen-smal{display:none!important}}
@media (max-width:760px){.alleen-breed{display:none!important}}
/* Vandaag met Mijn dag (de schil zet .app.met-mijndag): tussen 1200 en 1400px de zijbalk als iconen, zodat werk en Mijn dag passen */
@media (max-width:1399px) and (min-width:1200px){
  .app.met-mijndag{--zij:68px}
  .app.met-mijndag .zijbalk{padding:16px 10px;align-items:center}
  .app.met-mijndag .merk{padding:0;justify-content:center}
  .app.met-mijndag .merk img,.app.met-mijndag .merk .kortenaam,.app.met-mijndag .zijvoet a.ingelogd,.app.met-mijndag .zijknop kbd{display:none}
  .app.met-mijndag .hoofdnav span,.app.met-mijndag .zijnav span,.app.met-mijndag .zijvoet span,.app.met-mijndag .zijknop span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .app.met-mijndag .hoofdnav a,.app.met-mijndag .zijnav a,.app.met-mijndag .zijvoet a,.app.met-mijndag .zijknop{justify-content:center;padding:10px;width:44px}
  .app.met-mijndag .teller{position:absolute;top:1px;right:-3px;min-width:18px;height:18px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px var(--kaart)}
  .app.met-mijndag .zijnav .stip{position:absolute;top:6px;right:6px}
}
@media (max-width:1199px){
  .indeling-vandaag{grid-template-columns:minmax(0,1fr)}
  .zijkolom{position:static}
}
@media (max-width:1100px){
  main.inhoud{padding:24px 24px 72px}
  .alsbalk,.werkbalk{padding-left:24px;padding-right:24px}
  .indeling-klant,.tweeluik{grid-template-columns:minmax(0,1fr)}
  .doc{position:relative;height:60vh;border-right:0;border-bottom:1px solid var(--lijn)}
  .metsubnav{grid-template-columns:180px minmax(0,1fr);gap:24px}
  .raster.tegels.k5{--k:3}
}
/* 761 tot 1100px: de zijbalk wordt vanzelf een strook iconen (zelfde regels als .app.iconen) */
@media (max-width:1100px) and (min-width:761px){
  .app{--zij:68px}
  .zijbalk{padding:16px 10px;align-items:center}
  .zijbalk .merk{padding:0;justify-content:center}
  .zijbalk .merk img,.zijbalk .merk .kortenaam,.zijvoet a.ingelogd,.zijknop kbd{display:none}
  .hoofdnav span,.zijnav span,.zijvoet span,.zijknop span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hoofdnav a,.zijnav a,.zijvoet a,.zijknop{justify-content:center;padding:10px;width:44px}
  .hoofdnav .teller{position:absolute;top:1px;right:-3px;min-width:18px;height:18px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px var(--kaart)}
  .zijnav .stip{position:absolute;top:6px;right:6px}
  .zijvoet .koppeling .stip{margin:0}
}
@media (max-width:760px){
  .app{display:block;background:none}
  .zijbalk{display:none}
  /* kopbalk: merkje en korte naam, rechts zoeken en +; op een klant of dossier "‹ naam ⋯"; in een keten "‹ Btw Q3 · 3 van 11 ›" */
  .kopbalk{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;height:56px;padding:0 8px 0 16px;background:color-mix(in srgb,var(--kaart) 96%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
  .kopbalk .merk{display:flex;align-items:center;gap:8px;min-width:0;color:var(--inkt);text-decoration:none}
  .kopbalk .merk img{display:block;height:22px;width:auto}
  .kopbalk .kortenaam{font-size:15px;font-weight:800;color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kopbalk .rechts{margin-left:auto;display:flex;align-items:center;gap:2px}
  .kopbalk .rechts a,.kopbalk .rechts button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--inkt)}
  .kopbalk .rechts a:hover,.kopbalk .rechts button:hover{background:var(--licht)}
  .kopbalk .terug{display:inline-flex;align-items:center;gap:2px;flex:1;min-width:0;min-height:44px;margin-left:-8px;font-size:16px;font-weight:800;color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
  .kopbalk .terug svg{width:22px;height:22px;stroke-width:2.2}
  .kopbalk .positie{margin-left:auto;font-size:13px;font-weight:700;color:var(--dof);white-space:nowrap}
  .tabbalk{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--kaart);border-top:1px solid var(--lijn)}
  .tabbalk a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:4px 0;color:var(--dof);font-size:11px;font-weight:700;text-decoration:none}
  .tabbalk a.actief{color:var(--inkt)}
  .tabbalk a.actief svg{stroke-width:2.2}
  .tabbalk a.actief::before{content:"";position:absolute;top:-7px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .tabbalk .teller{position:absolute;top:0;left:calc(50% + 4px);margin:0;min-width:18px;height:18px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px var(--kaart)}
  .app.iconen .tabbalk{display:none}
  main.inhoud{padding:16px 16px 96px}
  .alsbalk{padding:10px 16px;top:56px}
  .alsbalk .knop{margin-left:0}
  .werkbalk{display:none}
  .paginakop{align-items:flex-start}
  .paginakop .knoppen{margin-left:0;width:100%}
  .paginakop .knoppen .knop.primair,.paginakop .knoppen button.primair{flex:1}
  .paginakop .zin{font-size:15px}
  h1{font-size:21px}
  .kaart,.card{padding:16px}
  .kaart.vlak>.kaart-kop{padding:14px 16px 10px}
  .kaart.vlak>.voetregel{padding:12px 16px}
  .velden,.velden.k3,.velden.k4,.raster,.raster.k3{grid-template-columns:minmax(0,1fr)}
  .velden .twee{grid-column:auto}
  input,select,textarea{font-size:16px}
  .lijstkop input.zoek,.kaart-kop input.zoek{width:100%}
  .filters .scheiding{display:none}
  .raster.tegels,.raster.tegels.k5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .instelling .schakelaar{width:100%;display:flex}
  .instelling .schakelaar button,.instelling .schakelaar label,.instelling .schakelaar a{flex:1;justify-content:center}
  fieldset>.schakelaar{max-width:100%}
  fieldset>.schakelaar label{white-space:normal;text-align:center}
  dl.gegevens{grid-template-columns:minmax(0,1fr);gap:0}
  dl.gegevens dt{font-size:12px;margin-top:8px}
  dl.gegevens dt:first-child{margin-top:0}
  /* knoppen in lijsten: minstens 40px om op te tikken */
  button.klein,.knop.klein{min-height:40px;padding:8px 14px}
  button.ico.klein,.knop.ico.klein{width:40px;padding:0}
  .flits{grid-template-columns:auto minmax(0,1fr)}
  .flits .knoppen,.flits>a{grid-column:2;justify-content:flex-start}
  /* regel wordt een kaartje: tekst over de breedte, chips eronder, de knop over de volle breedte */
  .regel{flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:14px 16px}
  .regel.onder{padding-left:16px}
  /* regel 1: (vinkje, avatar en) de tekst over de hele breedte; regel 2: chips en knoppen naast elkaar, de hoofdknop vult aan */
  .regel>.wat{flex:1 1 calc(100% - 48px)}
  .regel:has(>.vink)>.wat{flex-basis:calc(100% - 84px)}
  .regel .titel,.regel .sub{white-space:normal}
  .regel>.chips{flex:0 1 auto;min-height:40px}
  .regel>.stand{flex:1 1 100%;min-width:0}
  .regel>.knoppen{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .regel>.knoppen button,.regel>.knoppen .knop{min-height:40px;padding:8px 14px}
  .regel>.knoppen .ico{width:40px}
  .regel>.knoppen>.omrand,.regel>.knoppen>.primair,.regel>.knoppen>form:last-child{flex:1}
  .regel>.knoppen>form:last-child>button{width:100%}
  .regel>.tekstknop{flex:1 1 100%}
  .meerlink{padding:12px 16px}
  .vakkop{padding:12px 16px}
  .vakkop .knoppen{margin-left:0;width:100%}
  .haalbaar{padding:12px 16px}
  .deadlinekop .chip{margin-left:0}
  .stappenpad{display:none}
  .stappenpad-kort{display:block}
  .stap{grid-template-columns:36px minmax(0,1fr)}
  .stap .knoppen{grid-column:2}
  .chat{max-height:none;padding:12px;border-radius:0;border-left:0;border-right:0;margin:0 -16px}
  .ballon,.wa{max-width:88%}
  .chatkaart{width:100%}
  .schrijfvak.vast{position:fixed;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom));z-index:15;margin:0;border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;max-height:60vh;overflow-y:auto;box-shadow:var(--schaduw-hoog)}
  .regelveld>label,.regelveld>.wat{width:auto}
  .kanalen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  .kanalen::-webkit-scrollbar{display:none}
  .kanalen label{flex:none}
  .actiebalk{position:fixed;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom));padding:10px 16px}
  .app.iconen .actiebalk,.actiebalk.zonder-tabbalk{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .actiebalk .knop.primair,.actiebalk button.primair{flex:1}
  .actiebalk .menu-lijst{left:auto;right:0}
  .sneltoetsen{display:none}
  .vinkbalk{bottom:76px;border-radius:16px;padding:8px}
  .sluier{padding:0;align-items:stretch}
  .palet,.venster{max-width:none;max-height:none;height:100%;border-radius:0;border:0}
  .palet-optie{min-height:48px}
  .palet-voet{display:none}
  .nieuwknoppen{grid-template-columns:minmax(0,1fr)}
  .metsubnav{display:block}
  .subnav{position:static;margin:0 0 16px}
  .subnav.als-lijst{gap:0;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
  .subnav.als-lijst a{min-height:52px;padding:12px 16px;border-radius:0;border-top:1px solid var(--lijn);box-shadow:none;background:transparent}
  .subnav.als-lijst a:first-child{border-top:0}
  .subnav.als-lijst a::after{content:"›";color:var(--dof);font-size:18px}
  .werkbank{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  .tweeluik .paneel{padding:16px 16px 120px}
  /* oud */
  .tweekoloms .midden{padding:16px 0}
  .tweekoloms .zijkant{border-left:0;padding:16px 0}
  .overzicht{grid-template-columns:minmax(0,1fr)}
  .actie{padding:12px 14px}
  main.smal{margin-top:6vh}
}
@media (max-width:640px){
  /* tabellen worden kaartjes: hoofd en bedrag op regel 1, de rest eronder (td[data-label] krijgt zijn kolomnaam).
     Dezelfde regels staan bij .tabel.kaartjes: wijzig ze samen. Een oude tabel zonder td.hoofd die moet blijven schuiven
     (planbord, matrix) krijgt .schuif. */
  .tabel:not(.schuif){overflow:visible}
  .tabel:not(.schuif) table,.tabel:not(.schuif) tbody{display:block}
  .tabel:not(.schuif) thead{display:none}
  .tabel:not(.schuif) tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;margin:0 0 8px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r)}
  .tabel:not(.schuif) tr:has(>td.vink){grid-template-columns:28px minmax(0,1fr) auto}
  .tabel:not(.schuif) td{display:block;padding:0;border:0;grid-column:1/-1;text-align:left;overflow-wrap:anywhere}
  .tabel:not(.schuif) tr:has(>td.vink)>td{grid-column:2/-1}
  .tabel:not(.schuif) td.vink{grid-column:1!important;grid-row:1/span 3;width:auto;padding-top:2px}
  .tabel:not(.schuif) td.hoofd{grid-column:1;grid-row:1}
  .tabel:not(.schuif) tr:has(>td.vink)>td.hoofd{grid-column:2}
  .tabel:not(.schuif) td.bedrag,.tabel:not(.schuif) td.rechts{grid-column:-2/-1!important;grid-row:1;text-align:right}
  .tabel:not(.schuif) td[data-label]::before{content:attr(data-label) " ";font-size:12px;font-weight:700;color:var(--dof)}
  .tabel:not(.schuif) td:empty{display:none}
  .tabel:not(.schuif) td.acties{text-align:left;margin-top:6px}
  .tabel:not(.schuif) td.acties .knoppen{justify-content:stretch;flex-wrap:wrap}
  .tabel:not(.schuif) td.acties .knoppen>*{flex:1}
  .tabel:not(.schuif) tbody tr.klaar td:first-child{box-shadow:none}
  .tabel:not(.schuif) tbody tr.klaar{box-shadow:inset 3px 0 0 var(--vul-groen)}
  .tabel:not(.schuif) tbody tr[data-href]:hover td{background:none}
  .tabel:not(.schuif) tr.dochter td.hoofd{padding-left:0}
  .kaart .tabel:not(.schuif) tr{margin:0;border:0;border-top:1px solid var(--lijn);border-radius:0;padding:12px 0}
  .kaart.vlak .tabel:not(.schuif) tr,.kaart.vlak .tabel.kaartjes tr{padding:12px 16px}
  .kaart .tabel:not(.schuif) tr:first-child{border-top:0}
  .kaart.vlak .tabel:not(.schuif) td:first-child,.kaart.vlak .tabel:not(.schuif) td:last-child{padding-left:0;padding-right:0}
  .invoerrij>input,.invoerrij>select,.invoerrij>button,.invoerrij>.knop,.invoerrij>.schakelaar,.zoekrij>*{flex:1 1 100%}
  .invoerrij>input.kort{flex:1 1 100%}
  .invoerrij>.schakelaar{display:flex}
  .invoerrij>.schakelaar label,.invoerrij>.schakelaar button{flex:1;justify-content:center}
}
/* AANVULLING (BOUWSPEC 1.1). Staat direct na stijl.css en wint daardoor bij gelijke specificiteit. Bronnen: de mockups
   (maak.mjs A1 tot en met A13 en maak-10-21.mjs LOKAAL) en de controle van 19-10-2026 (BOUWSPEC 9). */
/* Herstel 1 (A10): het oude main.smal uit blok OUD (inlogscherm) heeft dezelfde specificiteit als main.inhoud en staat later,
   dus het wint marge en padding van main.inhoud.smal. inlogPagina() houdt main.smal zonder .inhoud. */
main.inhoud.smal{margin:0;padding:28px 40px 72px}
@media (max-width:1100px){main.inhoud.smal{padding:24px 24px 72px}}
@media (max-width:760px){main.inhoud.smal{padding:16px 16px 96px}}
/* Herstel 2: het oude .tegels uit blok OUD zet grid-template-columns op auto-fit 150px, dan doet --k niets */
.raster.tegels{grid-template-columns:repeat(var(--k),minmax(0,1fr))}
@media (max-width:760px){.raster.tegels,.raster.tegels.k5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A1 schil: kolom 2 van .app is de wrapper div.kolom met kopbalk, alsbalk, werkbalk en main */
.app>.kolom{min-width:0}
.alsbalk+.werkbalk{top:42px}
fieldset.kijken{display:contents}
/* A2 logo: brede woordmerken houden hun verhouding; licht en donker zijn twee img's; in de iconenstrook het merkje.
   De regels die het logo in de iconenstrook verbergen, staan hier opnieuw omdat .merk img.logo-licht later in het bestand staat. */
/* Tot 40 px hoog: een breed woordmerk (Ten Bruggen) loopt eerst tegen de breedte aan en blijft rond 28 px, een compact of
   vierkant logo van een ander kantoor wordt niet meer piepklein (98x28 voor 294x84) */
.zijbalk .merk img{height:auto;max-height:40px;max-width:100%;object-fit:contain;object-position:left center}
.merk img.logo-licht{display:var(--logo-licht)}
.merk img.logo-donker{display:var(--logo-donker)}
.merk.met-logo .merkje{display:none}
.app.iconen .zijbalk .merk img{display:none}
.app.iconen .merk.met-logo .merkje{display:inline-flex}
@media (max-width:1100px) and (min-width:761px){.zijbalk .merk img{display:none}.zijbalk .merk.met-logo .merkje{display:inline-flex}}
@media (max-width:1399px) and (min-width:1200px){.app.met-mijndag .zijbalk .merk img{display:none}.app.met-mijndag .merk.met-logo .merkje{display:inline-flex}}
/* A3 Vandaag: kop in de werkkolom, Mijn dag (of Komende deadlines) rechts over de volle hoogte; onder 1200px de schakelaar */
.indeling-vandaag{row-gap:0}
.indeling-vandaag>.zijkolom{grid-column:2;grid-row:1/span 3}
.zijkolom>.kaart,.zijkolom>.nukaart{margin:0}
.zijkolom>.kaart{padding:16px 18px}
.zijkolom>.kaart.vlak{padding:0}
.kaart-kop>.kopje{margin:0}
.dagschakelaar{display:none!important}
@media (max-width:1199px){
  .indeling-vandaag>.zijkolom{grid-column:auto;grid-row:auto}
  .paginakop>.dagschakelaar{display:flex!important;flex:1 1 100%;margin:4px 0 0}
  .indeling-vandaag[data-toon="mijndag"]>.werkdeel,.indeling-vandaag[data-toon="mijndag"] .paginakop .knoppen{display:none}
  .indeling-vandaag[data-toon="werk"]>.zijkolom{display:none}
}
.werkdeel>.kaart{margin-bottom:16px}
/* telefoon: per blok hooguit 3 regels, daaronder "Nog n ›" naar de hele lijst */
@media (max-width:760px){.werkdeel .kaart.vlak>.regels>.regel:nth-child(n+4){display:none}}
/* A4 regels in smalle zijblokken (klantpagina rechts, Mijn dag) */
.zijblokken .regels .regel,.zijkolom .regels .regel{padding:10px 0;min-height:0}
.zijblokken .regel .titel .stip{margin-right:6px;vertical-align:1px}
.kaart.vlak>details.inklap:first-child{border-top:0}
/* A5 sleepvak (dossier: concept, klantpagina: documenten); label.sleepvak met het bestandsveld erin, script 5.8 zet .over */
.sleepvak{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:72px;padding:16px;margin:12px 0 0;border:1.5px dashed var(--veldrand);border-radius:var(--r);color:var(--dof);font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.kaart.vlak>.sleepvak,.kaart.vlak>form>.sleepvak{margin:12px 20px 16px}
.sleepvak.over{border-color:var(--accent);background:var(--merk-zacht);color:var(--inkt)}
.sleepvak svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* het bestandsveld zelf onzichtbaar (mockup 08): het hele vak is het label en opent de keuze; met het toetsenbord krijgt het vak de focusrand */
.sleepvak{position:relative}
.sleepvak input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.sleepvak:focus-within{outline:2px solid var(--accent);outline-offset:2px}
/* A6 bestandsregel (stuk, concept) */
.regel>.bestico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--licht);color:var(--tekst)}
.regel>.bestico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.regel>.bestico.groen{background:var(--groen-bg);color:var(--groen)}
/* A7 voorbeeld van een bericht dat mee gaat (Indienen in de regel, review) */
.voorbeeldbericht{margin:12px 0 0;padding:10px 14px;background:var(--kaart);border:1px solid var(--lijn);border-radius:10px;font-size:14px;color:var(--tekst)}
.voorbeeldbericht .meta{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--dof);margin:0 0 4px}
.voorbeeldbericht .meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voorbeeldbericht b{display:block;margin:0 0 2px}
.voorbeeldbericht p{margin:0;white-space:pre-wrap}
/* A8 deadlinelijst (Vandaag zonder Mijn dag) */
dl.gegevens.deadlines{grid-template-columns:84px minmax(0,1fr);gap:10px 12px}
dl.gegevens.deadlines dd span{display:block}
dl.gegevens.deadlines dd span+span{margin-top:2px}
/* A9 paginakop: de titel en de zin nemen de ruimte, de knoppen staan rechts en zakken pas als het echt niet past */
.paginakop>div:first-child{flex:1 1 320px}
/* A11 icoon in de docbalk van de reviewmodus (stijl.css geeft svg daar geen maat) */
.docbalk svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* A12 ronderegels: de knoppenkolom heeft een vaste breedte, zodat de balken onder elkaar uitlijnen */
.regels.rondes .regel>.knoppen{min-width:184px;justify-content:flex-start}
/* A13 klantenlijst: diensten op één regel, de stapchip boven de tekst */
@media (min-width:641px){.tabel td .diensten{flex-wrap:nowrap}}
.stapcel .chip{margin-bottom:4px}
.stapcel>span:last-child{display:block}
dl.gegevens dd>.stip{margin-right:6px}
/* zoeklijst onder een veld (ZOEKLIJST, 5.5): het veld staat in een .zoekveld */
.zoekveld{position:relative;flex:1 1 220px;min-width:0}
ul.zoeklijst{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;box-shadow:var(--schaduw-hoog);max-height:320px;overflow-y:auto}
ul.zoeklijst li{display:block;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;color:var(--inkt)}
ul.zoeklijst li .sub{display:block;font-size:12px;font-weight:500;color:var(--dof);margin-top:1px}
ul.zoeklijst li[aria-selected="true"],ul.zoeklijst li:hover{background:var(--licht)}
ul.zoeklijst li.leeg{cursor:default;font-weight:500;color:var(--dof);background:none}
/* na Bellen in een regel: "Gebeld om 10:52 · bereikt?" met Gesproken en Niet bereikt (VANDAAG_SCRIPT, 5.2) */
.regel>.belna{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 100%;margin:2px 0 4px;font-size:13px;font-weight:700;color:var(--tekst)}
.regel>.belna[hidden]{display:none}
/* Uit de mockups 10 tot en met 21 (maak-10-21.mjs, LOKAAL) */
/* berichtenkaart (Berichten): de kop is een gewone .regel, de berichten staan ingesprongen onder de avatar */
.bklijst{display:grid;gap:12px;padding:0 20px 16px 62px}
.bk{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 10px;font-size:14px}
.bk>svg{width:16px;height:16px;margin-top:2px;stroke:var(--dof);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk .meta{font-size:13px;color:var(--dof);font-weight:600}
.bk .meta b{color:var(--inkt);font-weight:800}
.bk .onderwerp{display:block;font-weight:800;color:var(--inkt);margin-top:2px}
.bk>.tekst,.bk>.extra{grid-column:2}
.bk>.tekst{color:var(--tekst);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bk>.extra{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:4px}
.bk .bijlage.bestand{display:inline-flex;margin:0;padding:5px 10px;font-size:13px}
.bk .bonlabel{margin:0;font-size:12px}
.bkconcept{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:0 20px 16px 62px}
.bkconcept .ballon{max-width:min(86%,640px)}
.bkconcept .melding{align-self:stretch;margin:0}
.uitklap-los{margin:0 20px 16px 62px;padding:14px 16px;background:var(--licht);border-radius:10px}
.uitklap-los .veldrij{margin-top:4px}
.uitklap-los fieldset.veld{margin:0}
@media (max-width:760px){.bklijst,.bkconcept{padding-left:16px;padding-right:16px}.uitklap-los{margin-left:16px;margin-right:16px}.bkconcept .ballon{max-width:100%}}
/* uitklaprij onder een tabelregel (Medewerkers: Wijzig, Uitzetten) */
tr.open td{border-bottom:0}
tr.uitklaprij td{padding:0 20px 16px!important}
tr.uitklaprij .uitklap-los{margin:0}
/* kleurkeuze (Huisstijl, nieuw kantoor) */
.kleuren{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kleuren label.kleur{position:relative;margin:0;width:34px;height:34px;border-radius:10px;cursor:pointer;background:var(--k);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kleuren label.kleur input{position:absolute;opacity:0;width:1px;height:1px}
.kleuren label.kleur:has(input:checked){box-shadow:0 0 0 2px var(--kaart),0 0 0 4px var(--inkt)}
.kleuren label.kleur:has(input:checked)::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat}
.kleuren .eigen{display:flex;align-items:center;gap:8px;margin-left:6px;font-size:13px;font-weight:700;color:var(--inkt)}
.kleuren .eigen input{width:112px;min-height:36px;padding:6px 10px;font-size:14px}
/* logo-vakken */
.logovakken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.logovak{border:1.5px dashed var(--lijn-d);border-radius:var(--r);padding:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;font-size:12px;color:var(--dof)}
.logovak b{color:var(--inkt);font-size:13px}
.logobeeld{height:58px;border-radius:8px;background:var(--licht);display:flex;align-items:center;justify-content:center;padding:8px}
.logobeeld.donker{background:#16143A}
.logobeeld img{max-height:36px;max-width:100%}
.logovak .knop,.logovak button{min-height:32px;padding:5px 10px;font-size:12px;justify-self:start}
/* kaart met een levend voorbeeld rechts (Huisstijl, Sjablonen) */
.metvoorbeeld{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.metvoorbeeld.helft{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.metvoorbeeld>.voorbeeld{position:sticky;top:20px;display:grid;gap:12px;min-width:0}
.metvoorbeeld>.voorbeeld>.kaart{margin:0}
@media (max-width:1100px){.metvoorbeeld,.metvoorbeeld.helft{grid-template-columns:minmax(0,1fr)}.metvoorbeeld>.voorbeeld{position:static}}
.minizij{display:grid;gap:2px;padding:10px;border:1px solid var(--lijn);border-radius:10px;background:var(--kaart)}
.minizij .merk{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;font-weight:800;color:var(--inkt);font-size:14px}
.minizij .merk img{height:26px;display:var(--logo-licht)}
.minizij .merk img.donker{display:var(--logo-donker)}
.minizij a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:700;color:var(--tekst);text-decoration:none}
.minizij a.actief{background:var(--merk-zacht);color:var(--inkt);box-shadow:inset 3px 0 0 var(--accent)}
.minizij svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* mailvoorbeeld: zoals merkMail() de mail opmaakt (altijd licht) */
.mailvoorbeeld{background:#FAFAFA;border:1px solid var(--lijn);border-radius:var(--r);padding:12px;color-scheme:light}
.mailvoorbeeld .mailonderwerp{font-size:12px;color:#6B6A88;margin:0 0 8px}
.mailvoorbeeld .mailonderwerp b{color:#16143A}
.mailvoorbeeld .mail{background:#fff;border:1px solid #ECECEC;border-radius:12px;overflow:hidden}
.mailvoorbeeld .mailkop{padding:12px 16px;border-bottom:1px solid #ECECEC}
.mailvoorbeeld .mailkop img{height:26px;display:block}
.mailvoorbeeld .mailromp{padding:14px 16px 4px;font-size:13px;line-height:1.6;color:#2A2A2A}
.mailvoorbeeld .mailromp p{margin:0 0 10px}
.mailvoorbeeld .mailknop{display:inline-block;margin:2px 0 12px;padding:8px 16px;border-radius:999px;background:var(--knop);color:#fff;font-weight:700;font-size:13px}
.mailvoorbeeld .mailvoet{padding:12px 16px;background:#0A0A0A;color:#8A8A8A;font-size:11px;line-height:1.5}
.mailvoorbeeld .mailvoet b{display:block;color:#fff;font-size:12px;font-weight:700}
.mailvoorbeeld var{font-style:normal;background:#FFF0DD;color:#9A4A00;border-radius:4px;padding:0 3px}
/* stapnummer in een kaartkop (Klanten importeren) */
.kopnr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--licht);color:var(--tekst);font-size:13px;font-weight:800}
.kopnr.klaar{background:var(--groen-bg);color:var(--groen)}
.kopnr.nu{background:var(--inkt);color:var(--op-inkt)}
.kopnr svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* tegel met een zin in plaats van een getal (Kantoor > Overzicht) */
.kaart.tegel .kopje{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--inkt)}
.kaart.tegel p{margin:0;font-size:13px;font-weight:500;color:var(--tekst)}
/* kopje boven de subnavigatie van Kantoor, op de hoogte van de h1 */
.subnav .kopje{padding:6px 10px 6px;margin:0}
/* een subregel die niet afgekapt mag worden (foutmelding in een regel) */
.regel .sub.heel{white-space:normal}
/* dichte tabel (lange lijst om na te lopen, zoals kolommen koppelen) */
.kaart.dicht td{padding-top:7px;padding-bottom:7px}
/* belstand (Leads, keten) */
.belnummer{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.belnummer a.nummer{font-size:32px;font-weight:800;letter-spacing:-.01em;color:var(--inkt);font-variant-numeric:tabular-nums}
.vragen{margin:6px 0 0;padding-left:18px;font-size:14px}
.vragen li{margin:2px 0}
/* rolkeuze als kaartjes (Medewerkers) */
.rolkeuze{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.rolkeuze .radiokaart{margin:0;background:var(--kaart);align-items:flex-start}
.rolkeuze .radiokaart input{margin-top:2px}
.rolkeuze .radiokaart small{display:block;font-size:12.5px;font-weight:500;color:var(--dof);margin-top:2px;line-height:1.4}
/* klantpagina (S05, WP4; uit KLANT_STIJL in schermen/klant.ts, WP10): alleen op de klantpagina (body:has(.klanttabs)). Een kaart die je
   wijzigt krijgt een rand in inkt en verbergt zijn leesweergave (mockup 05); regels in een kaart zonder eigen rand; het schrijfvak
   op de telefoon compact (mockup 04 mobiel) */
body:has(.klanttabs) .kaart:has(>.wijzigvak:not([hidden])){border-color:var(--inkt);box-shadow:0 0 0 1px var(--inkt)}
body:has(.klanttabs) .kaart:has(>.wijzigvak:not([hidden]))>.leesvak{display:none}
body:has(.klanttabs) .wijzigvak{margin-top:4px}
body:has(.klanttabs) .raster.werkraster{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
body:has(.klanttabs) .zijblokken{grid-template-columns:minmax(0,1fr)}
body:has(.klanttabs) .zijblokken>#bonblok>.kaart{margin:0;padding:16px 18px}
body:has(.klanttabs) .smalblokken{display:grid;gap:12px;margin:0 0 16px}
body:has(.klanttabs) .smalblokken>.kaart{margin:0;padding:16px 18px}
@media (max-width:760px){body:has(.klanttabs) .raster.werkraster{grid-template-columns:minmax(0,1fr)}}
/* Telefoon (mockup 04 mobiel): het vaste schrijfvak compact. Geen hint (de knop zegt al wat er gebeurt), zodat Sjabloon en de
   verstuurknop op één regel staan; drie regels tekst; + Iemand anders in de regel van Aan */
@media (max-width:760px){
body:has(.klanttabs) .schrijfvak .voet .hint{display:none}
body:has(.klanttabs) .schrijfvak textarea,body:has(.klanttabs) .schrijfvak textarea:focus{height:86px;min-height:86px}
body:has(.klanttabs) .schrijfvak .regelveld>.kanalen{flex:1 1 0;min-width:0;margin-right:0;padding-right:0}
body:has(.klanttabs) .schrijfvak .regelveld>.iemand:not([open]){flex:none}
body:has(.klanttabs) .schrijfvak .regelveld>.iemand>summary{padding:5px 0}
}
body:has(.klanttabs) .regels.zonder-rand>.regel{padding-left:0;padding-right:0}
body:has(.klanttabs) .regels.zonder-rand>.regel:first-child{border-top:0}
body:has(.klanttabs) .kaart>.regels{margin:0 -4px}
body:has(.klanttabs) .kaart.vlak .uitklap{margin-left:0;margin-right:0}
body:has(.klanttabs) #tlfilter .kanalen{margin-bottom:8px}
body:has(.klanttabs) fieldset.veld>.schakelaar{flex-wrap:wrap;border-radius:20px}
body:has(.klanttabs) .regelveld input.minuten{flex:0 0 84px;width:84px;min-width:0;min-height:34px;padding:5px 10px;border:1.5px solid var(--veldrand);border-radius:var(--r-veld);background:var(--kaart)}
body:has(.klanttabs) .regelveld input.minuten:hover{border-color:var(--dof)}
body:has(.klanttabs) .regelveld input.minuten:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}

/* tabel: een .sr in een cel van een schuivende tabel maakt de pagina niet breder (afmaken/wp4.md) */
.tabel td{position:relative}
/* een open menu in een lijst valt niet weg achter de rand van een .kaart.vlak (afmaken/wp6.md) */
.kaart.vlak:has(details.menu[open]),.kaart.vlak:has(details[open]>.menu-lijst){overflow:visible}
/* kleurvlakjes: in de donkere stand een rand, zodat inkt #16143A zichtbaar blijft (afmaken/wp7.md) */
:root[data-thema="donker"] .kleuren label.kleur:not(:has(input:checked)){box-shadow:inset 0 0 0 1px var(--lijn-d)}
@media (prefers-color-scheme:dark){:root:not([data-thema="licht"]) .kleuren label.kleur:not(:has(input:checked)){box-shadow:inset 0 0 0 1px var(--lijn-d)}}

/* lijst "dit maakt het pakket" */
.wordtgemaakt{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}
.wordtgemaakt li{display:flex;gap:8px;align-items:flex-start}
.wordtgemaakt svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--groen);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}