/* Corvo Apex dashboard — donker navy met blauw als accent (stijl van de promovideo).
   Oranje (--oranje) alleen voor "let op". */
:root{--bg:#0A1020;--bg2:#0F172A;--kaart:#141D31;--kaart2:#18233A;--rand:#223050;--tekst:#E8EDF7;--stil:#8B96AD;--accent:#3B82F6;--accent2:#7DB2FF;--oranje:#F5A524;--groen:#34D399;--rood:#F87171;--blauw:#3B82F6;--paars:#8B7CF6;--r:14px;--schaduw:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -14px rgba(0,0,0,.65)}
*{box-sizing:border-box}html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--tekst);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;
 background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(59,130,246,.10),transparent 60%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;background-attachment:fixed}
a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
nav{background:rgba(17,23,38,.85);backdrop-filter:blur(12px);border-right:1px solid var(--rand);padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;overflow:hidden}
nav .menu{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px;scrollbar-width:thin}
nav .menu::-webkit-scrollbar{width:6px}nav .menu::-webkit-scrollbar-thumb{background:var(--rand);border-radius:3px}
nav details.groep{border-radius:10px}
nav details.groep>summary{list-style:none;cursor:pointer;padding:9px 12px;border-radius:10px;color:var(--stil);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.7px;display:flex;align-items:center;justify-content:space-between}
nav details.groep>summary::-webkit-details-marker{display:none}
nav details.groep>summary:hover{background:rgba(255,255,255,.04);color:var(--tekst)}
nav details.groep>summary::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
nav details.groep[open]>summary::after{transform:rotate(45deg)}
nav details.groep>a.item{margin-left:10px;font-size:.94rem}
nav .merk{display:flex;align-items:center;gap:10px;padding:6px 8px 20px;border-bottom:1px solid var(--rand);margin-bottom:12px}
nav .merk img{height:34px;max-width:150px;object-fit:contain;border-radius:6px}
nav .merk .naam{font-weight:600;font-size:1.02rem;letter-spacing:.2px}nav .merk .sub{font-size:.72rem;color:var(--stil)}
nav a.item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--tekst);font-weight:500;transition:background .15s}
nav a.item:hover{background:rgba(255,255,255,.05);text-decoration:none}nav a.item.actief{background:linear-gradient(90deg,rgba(59,130,246,.22),transparent);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
nav a.item .dot{width:7px;height:7px;border-radius:50%;background:var(--rand)}nav a.item.actief .dot{background:var(--accent);box-shadow:0 0 10px var(--accent)}
nav .onder{margin-top:auto;border-top:1px solid var(--rand);padding-top:14px;font-size:.78rem;color:var(--stil)}
nav .onder .pwd{display:flex;align-items:center;gap:6px;margin-top:8px}nav .onder .pwd b{color:var(--accent2);letter-spacing:.5px}
main{padding:34px 44px 96px;max-width:1240px}
h1{font-size:1.65rem;font-weight:600;letter-spacing:-.3px;margin:0 0 6px}h1+p.sub{margin:0 0 26px;color:var(--stil)}
h2{font-size:1.05rem;font-weight:600;margin:28px 0 12px;color:#fff}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.kaart{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%),var(--kaart);border:1px solid var(--rand);border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden}
.kaart.glans::before{content:"";position:absolute;inset:-1px;border-radius:var(--r);padding:1px;background:linear-gradient(135deg,rgba(59,130,246,.55),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kpi .label{font-size:.78rem;color:var(--stil);text-transform:uppercase;letter-spacing:.8px}.kpi .waarde{font-size:2.1rem;font-weight:600;margin:6px 0 2px;letter-spacing:-.5px}.kpi .toel{font-size:.8rem;color:var(--stil)}
.kpi .waarde .eenheid{font-size:1rem;color:var(--stil);margin-left:4px}
table{width:100%;border-collapse:collapse;font-size:.92rem}th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.7px;color:var(--stil);padding:8px 10px;border-bottom:1px solid var(--rand)}
td{padding:11px 10px;border-bottom:1px solid rgba(36,48,73,.6);vertical-align:top}tr:hover td{background:rgba(255,255,255,.025)}
.pil{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:600;letter-spacing:.3px}
.pil.open{background:rgba(91,157,255,.15);color:var(--blauw)}.pil.compleet{background:rgba(61,214,140,.15);color:var(--groen)}.pil.afgehandeld{background:rgba(138,148,168,.15);color:var(--stil)}.pil.geannuleerd,.pil.handmatige_controle{background:rgba(255,107,107,.15);color:var(--rood)}
.knop{display:inline-block;background:linear-gradient(180deg,#4B8DF8,#2F6FE0);color:#fff;font-weight:600;padding:10px 18px;border-radius:10px;border:0;cursor:pointer;font-size:.92rem;transition:transform .1s,box-shadow .2s}
.knop:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(59,130,246,.35);text-decoration:none}.knop.stil{background:transparent;color:var(--tekst);border:1px solid var(--rand)}.knop.klein{padding:6px 12px;font-size:.82rem}
input,select,textarea{width:100%;background:var(--bg2);color:var(--tekst);border:1px solid var(--rand);border-radius:10px;padding:10px 12px;font:inherit}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
label{display:block;font-size:.8rem;color:var(--stil);margin:14px 0 6px}
.voorstel{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:12px;border:1px solid var(--rand);background:rgba(255,255,255,.02);margin-bottom:10px}
.voorstel .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.voorstel.waarde .ico{background:rgba(61,214,140,.18);color:var(--groen)}.voorstel.actie .ico{background:rgba(59,130,246,.2);color:var(--accent2)}.voorstel.pakket .ico{background:rgba(91,157,255,.18);color:var(--blauw)}.voorstel.vindbaarheid .ico{background:rgba(125,178,255,.18);color:var(--accent2)}
.voorstel b{display:block;margin-bottom:3px}.voorstel p{margin:0;color:var(--stil);font-size:.9rem}
.spark{width:100%;height:120px}.spark .lijn{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.spark .vlak{fill:url(#g)}.spark .staaf{fill:var(--accent);opacity:.85;rx:3}.spark .as{fill:var(--stil);font-size:10px}
.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login .kaart{width:100%;max-width:420px;padding:36px}
.login .merk{display:flex;align-items:center;gap:12px;margin-bottom:26px}.login .merk .naam{font-weight:600;font-size:1.15rem}
.leeg{padding:34px;text-align:center;color:var(--stil);border:1px dashed var(--rand);border-radius:var(--r)}
.balk{height:8px;background:var(--rand);border-radius:99px;overflow:hidden;margin:8px 0 4px}.balk i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px}
.melding{padding:12px 16px;border-radius:10px;background:rgba(61,214,140,.12);color:var(--groen);margin-bottom:16px}.melding.fout{background:rgba(255,107,107,.12);color:var(--rood)}
.rij{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.score{font-size:2.4rem;font-weight:600}.score small{font-size:1rem;color:var(--stil)}
dl{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0}dt{color:var(--stil);font-size:.85rem}dd{margin:0}
@media(max-width:900px){.shell{grid-template-columns:1fr}nav{position:relative;height:auto;overflow:visible}nav .menu{overflow:visible}.g4,.g3,.g2{grid-template-columns:1fr 1fr}main{padding:22px 22px 96px}}

/* klikbare rijen en kaarten */
[data-href]{cursor:pointer}
tr[data-href]:hover td{background:rgba(255,255,255,.04)}
.kaart[data-href]:hover{border-color:var(--accent)}

/* vinkjes en keuzerondjes: niet de volle breedte (stonden scheef in formulieren) */
input[type=checkbox],input[type=radio]{width:auto;flex:0 0 auto;margin:0;padding:0;accent-color:var(--accent)}
label:has(>input[type=checkbox]){display:flex!important;gap:8px;align-items:center;justify-content:flex-start;color:var(--tekst);font-size:.9rem}
/* tabbladen */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--rand);margin:12px 0 14px}
.tabs .tab{padding:8px 12px;border-radius:10px 10px 0 0;color:var(--stil);text-decoration:none;font-size:.92rem;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.tabs .tab:hover{color:var(--tekst)}.tabs .tab.actief{color:var(--tekst);background:var(--bg2);border-color:var(--rand)}
/* tijdlijn */
.tl-maand{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--stil);margin:12px 0 4px}
.tl-item{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:8px;font-size:.9rem}
.tl-item[data-href]:hover{background:rgba(255,255,255,.04)}
.tl-ico{width:22px;text-align:center;flex:0 0 22px}.tl-dat{color:var(--stil);white-space:nowrap;flex:0 0 56px;font-size:.82rem;padding-top:1px}
.tl-tekst{flex:1;min-width:0;display:flex;flex-direction:column}.tl-detail{color:var(--stil);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-pijl{color:var(--stil);font-size:1.2rem;line-height:1}
/* gesprek: naar een dag springen */
.gs-dag{text-align:center;font-size:.75rem;color:var(--stil);margin:14px 0 6px;scroll-margin-top:20px}
.gs-dag:target{color:var(--accent2);font-weight:600;animation:gsFlits 2.5s ease-out 1;border-radius:8px}
@keyframes gsFlits{0%{background:rgba(59,130,246,.12)}100%{background:transparent}}

/* teller in het menu */
.item .teller{margin-left:auto;background:var(--rood);color:#fff;border-radius:999px;font-size:.72rem;font-weight:600;padding:1px 7px;min-width:18px;text-align:center}
nav details.groep>.subkop{margin:10px 0 2px 22px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--stil);opacity:.75}
nav details.groep>.subkop:first-of-type{margin-top:4px}

/* ===== Stijl 2026: zoals de promovideo ===== */
body{background-image:radial-gradient(ellipse 70% 45% at 55% -12%,rgba(59,130,246,.16),transparent 60%),radial-gradient(ellipse 40% 30% at 100% 100%,rgba(139,124,246,.06),transparent 70%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:auto,auto,48px 48px,48px 48px}
nav{background:rgba(10,15,30,.92);width:auto}
nav a.item{padding:9px 12px;color:#C9D2E3}
nav a.item:hover{background:rgba(59,130,246,.08);color:#fff}
nav a.item.actief{background:linear-gradient(90deg,rgba(59,130,246,.26),rgba(59,130,246,.06));color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
nav .ico{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
nav a.item.actief .ico{opacity:1;color:var(--accent2)}
nav details.groep>summary{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500;color:#C9D2E3;justify-content:flex-start;gap:10px;padding:9px 12px}
nav details.groep>summary::after{margin-left:auto}
nav details.groep[open]>summary{color:#fff}
nav details.groep>a.item{margin-left:20px;padding:7px 12px;font-size:.88rem;border-left:1px solid var(--rand);border-radius:0 8px 8px 0}
nav details.groep>a.item .dot{display:none}
nav details.groep>a.item.actief{box-shadow:inset 2px 0 0 var(--accent);border-left-color:transparent}
nav details.groep>.subkop{text-transform:none;letter-spacing:0;font-size:.74rem;margin-left:32px}
nav .onder .pwd b{color:var(--accent2)}
.kaart{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),var(--kaart);box-shadow:var(--schaduw);border-color:rgba(34,48,80,.9)}
.kaart[data-href]:hover{border-color:rgba(59,130,246,.6)}
.kpi .label{text-transform:none;letter-spacing:0;font-size:.82rem}
th{text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:500}
.knop:hover{box-shadow:0 8px 24px rgba(59,130,246,.35)}
.knop.stil{background:rgba(255,255,255,.02)}.knop.stil:hover{border-color:rgba(59,130,246,.55);box-shadow:none}
.tabs .tab.actief{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35);color:#fff}
.melding{background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.25)}.melding.fout{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.28)}
.pil.let-op,.pil.letop{background:rgba(245,165,36,.15);color:var(--oranje)}
/* status-streep links op kaarten (zoals in de video) */
.kaart.streep{border-left:3px solid var(--accent)}.kaart.streep.groen{border-left-color:var(--groen)}.kaart.streep.oranje{border-left-color:var(--oranje)}.kaart.streep.rood{border-left-color:var(--rood)}
/* pijplijn: pijlvormige fasekoppen */
.fase-kop{position:relative;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 22px 9px 14px;margin:0 0 10px;color:#fff;font-size:.84rem;font-weight:600;background:var(--fase,#3B82F6);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);border-radius:4px}
.kolom:first-child .fase-kop{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);border-radius:8px 4px 4px 8px}
.fase-kop small{font-weight:500;opacity:.85}
.kolom{--fase:#3B82F6}.kolom[data-fase=nieuw]{--fase:#2563EB}.kolom[data-fase=contact]{--fase:#3B82F6}.kolom[data-fase=offerte]{--fase:#6366F1}.kolom[data-fase=afspraak]{--fase:#0EA5E9}.kolom[data-fase=gewonnen]{--fase:#16A34A}.kolom[data-fase=verloren]{--fase:#475569}
.kolom .pkaart{border-left:3px solid var(--fase)}
/* agenda: afspraakblokken */
.afspraak{background:linear-gradient(90deg,rgba(59,130,246,.14),rgba(59,130,246,.04))!important;box-shadow:0 6px 16px -10px rgba(0,0,0,.7)}
.afspraak[data-status=klaar]{background:linear-gradient(90deg,rgba(52,211,153,.14),rgba(52,211,153,.03))!important}
.kaart.dag.vandaag{border-color:rgba(59,130,246,.7);box-shadow:0 0 0 1px rgba(59,130,246,.35),var(--schaduw)}
.spark .lijn{stroke:var(--accent)}.spark .staaf{fill:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
/* telefoon: smalle bovenbalk met menuknop (zoals in de video) */
.shell>*{min-width:0}main{min-width:0}
.menuschakel{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.menuknop{display:none}
@media(max-width:900px){
 nav{position:sticky;top:0;z-index:50;height:auto;max-height:none;overflow:visible;padding:10px 14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;border-right:0;border-bottom:1px solid var(--rand)}
 nav .merk{padding:4px 0;margin:0;border:0}
 nav .merk img{height:28px}
 .menuknop{display:grid;place-items:center;width:42px;height:42px;margin:0;border-radius:10px;border:1px solid var(--rand);background:rgba(255,255,255,.03);cursor:pointer}
 .menuknop svg{width:22px;height:22px;stroke:var(--tekst);fill:none;stroke-width:2;stroke-linecap:round}
 nav .menu,nav .onder{display:none;grid-column:1/-1}
 .menuschakel:checked~.menu{display:flex;flex-direction:column;margin-top:10px;overflow:visible;flex:none;min-height:auto;max-height:none;padding-right:0}
 .menuschakel:checked~.onder{display:block;margin-top:12px}
 nav:has(.menuschakel:checked){position:fixed;inset:0;overflow-y:auto;align-content:start;background:rgba(10,15,30,.98)}
 .menuschakel:checked+.menuknop{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.5)}
 .menuschakel:focus-visible+.menuknop{outline:2px solid var(--accent2);outline-offset:2px}
 main{padding:18px 16px 96px}
}
/* agenda op de telefoon: dagen naast elkaar veegbaar in plaats van 7 smalle kolommen */
@media(max-width:900px){.grid:has(>.kaart.dag){grid-template-columns:repeat(7,minmax(150px,1fr))!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.grid>.kaart.dag{scroll-snap-align:start}}
/* kleine telefoons: grote getallen niet laten afbreken */
@media(max-width:560px){.kpi .waarde{font-size:1.55rem;white-space:nowrap}.kpi .waarde .eenheid{font-size:.85rem}}

/* verborgen is altijd verborgen, ook als een element een eigen display-stijl heeft (bijv. het hulpvenster) */
[hidden]{display:none!important}

/* vergrendelde menu-onderdelen (niet in het pakket) */
nav a.item.slot{opacity:.62}
nav a.item.slot:hover{opacity:1}
nav a.item.slot span{display:flex;flex-direction:column;line-height:1.15}
nav a.item.slot small{font-size:.7rem;color:var(--stil)}
nav details.groep>a.item.slot{padding-left:12px}
/* grafieken en donutdiagrammen */
.spark{height:150px}.spark .as{fill:var(--stil);font-size:10px}
.donut{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut svg{width:132px;height:132px;flex:0 0 132px}
.donut-deel{animation:donutIn .9s ease-out both}
@keyframes donutIn{from{stroke-dasharray:0 999}}
.donut-midden{fill:#fff;font-size:22px;font-weight:700}.donut-onder{fill:var(--stil);font-size:9px}
.donut-legenda{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px;font-size:.88rem}
.donut-legenda div{display:flex;align-items:center;gap:8px}
.donut-legenda i{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.donut-legenda span{flex:1;color:#C9D2E3}.donut-legenda small{color:var(--stil);width:36px;text-align:right}
@media (prefers-reduced-motion:reduce){.donut-deel{animation:none}}
/* menu verspringt niet als de schuifbalk verschijnt */
nav .menu{scrollbar-gutter:stable;overflow-anchor:none}
/* klikbare cijfers en onderdelen */
.klik{cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease}
.kaart.klik:hover{transform:translateY(-2px);border-color:rgba(125,178,255,.55);box-shadow:0 8px 28px rgba(59,130,246,.18)}
span.klik:hover,b.klik:hover,td.klik:hover,small.klik:hover,div.klik:not(.kaart):hover{text-decoration:underline;text-underline-offset:3px}
.klik:focus-visible{outline:2px solid #7DB2FF;outline-offset:2px}
.oplicht{animation:oplicht 1.6s ease-out}
@keyframes oplicht{0%{box-shadow:0 0 0 3px rgba(125,178,255,.9)}100%{box-shadow:0 0 0 3px rgba(125,178,255,0)}}
h2,h3{scroll-margin-top:18px}

/* uitklapbare onderdelen op lange pagina's (zelfde stijl als Instellingen) */
details.sectie{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%),var(--kaart);border:1px solid var(--rand);border-radius:var(--r);margin:0 0 10px;overflow:visible}
details.sectie>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem}
details.sectie>summary::-webkit-details-marker{display:none}
details.sectie>summary::before{content:'›';font-size:1.3rem;line-height:1;color:var(--stil);transition:transform .15s;display:inline-block;width:12px}
details.sectie[open]>summary::before{transform:rotate(90deg)}
details.sectie>summary:hover{background:rgba(59,130,246,.06)}
details.sectie>.instel-inhoud{padding:4px 18px 18px}
details.sectie>.instel-inhoud>.kaart:first-child{margin-top:0}
.inklap-knoppen{display:flex;gap:8px;justify-content:flex-end;margin:4px 0 10px}
a.kaart.kpi.klik .toel{color:var(--stil)}
a.kaart.klik:hover .toel{color:var(--accent2)}

/* klikbare tabelregels */
tr.klik-rij,tr[data-href]{cursor:pointer}
tr.klik-rij:hover td,tr[data-href]:hover td{background:rgba(59,130,246,.07)}

/* vaste ruimte tussen blokken die onder elkaar staan (niet binnen een raster: daar zorgt gap voor) */
main :not(.grid):not(.rij) > .kaart + .kaart,
main :not(.grid):not(.rij) > .kaart + .grid,
main :not(.grid):not(.rij) > .grid + .kaart,
main :not(.grid):not(.rij) > .grid + .grid,
main > .kaart + .kaart, main > .kaart + .grid, main > .grid + .kaart, main > .grid + .grid{margin-top:14px}
main > .rij + .grid, main > .rij + .kaart, main > .rij + .melding{margin-top:16px}
main h2 + .grid, main h2 + .kaart{margin-top:0}
/* labelkleuren (groen = goed, blauw = info, oranje = let op, rood = actie, grijs = neutraal) */
.pil.groen{background:rgba(52,211,153,.14);color:#6EE7B7;border-color:rgba(52,211,153,.35)}
.pil.blauw{background:rgba(59,130,246,.16);color:#9CC3FF;border-color:rgba(59,130,246,.38)}
.pil.oranje{background:rgba(245,165,36,.15);color:#FBC96B;border-color:rgba(245,165,36,.38)}
.pil.rood{background:rgba(248,113,113,.14);color:#FCA5A5;border-color:rgba(248,113,113,.36)}
.pil.grijs{background:rgba(255,255,255,.06);color:#AEB8CC;border-color:rgba(255,255,255,.14)}
/* ---- kort menu, zoeken en tabbladen ---- */
.zoekknop{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 14px;padding:10px 12px;border-radius:12px;border:1px solid var(--rand);background:rgba(255,255,255,.03);color:var(--stil);font:inherit;font-size:.92rem;cursor:pointer;text-align:left}
.zoekknop:hover{border-color:rgba(125,178,255,.5);color:#fff}
.zoekknop span{flex:1}
.zoekknop kbd,.zoek-venster kbd{font:600 .7rem/1 ui-monospace,Consolas,monospace;padding:3px 6px;border-radius:6px;border:1px solid var(--rand);color:var(--stil);background:rgba(255,255,255,.04)}
nav .menu-kort a.item{padding:11px 12px;font-size:.98rem}
nav .menu-kort a.item .teller{margin-left:auto}
.tabbalk{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px 0 20px;padding:0 0 10px;border-bottom:1px solid var(--rand);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.tabbalk::-webkit-scrollbar{display:none}
.tabbalk .tab{flex:0 0 auto;scroll-snap-align:start;padding:8px 14px;border-radius:999px;border:1px solid transparent;color:var(--stil);text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.tabbalk .tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.tabbalk .tab.actief{color:#fff;background:linear-gradient(180deg,#4B8DF8,#2F6FE0);box-shadow:0 4px 14px rgba(59,130,246,.3)}
.tabbalk .tab.slot{opacity:.6}
.tabbalk .teller{display:inline-block;min-width:18px;padding:1px 6px;border-radius:99px;background:var(--rood);color:#fff;font-size:.7rem;margin-left:4px}
@media(max-width:900px){.zoekknop kbd{display:none}.tabbalk{margin:-2px -4px 16px;padding:0 4px 10px}}
/* zoekvenster */
.zoek-achter{position:fixed;inset:0;background:rgba(5,9,20,.65);backdrop-filter:blur(3px);z-index:200;display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.zoek-venster{width:100%;max-width:620px;background:var(--kaart);border:1px solid var(--rand);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.zoek-venster input{width:100%;border:0;border-bottom:1px solid var(--rand);background:transparent;color:#fff;font-size:1.05rem;padding:16px 18px;outline:none}
.zoek-lijst{max-height:60vh;overflow:auto;padding:6px}
.zoek-lijst .kop{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stil);padding:10px 12px 4px}
.zoek-lijst a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;color:#E6ECF7;text-decoration:none}
.zoek-lijst a small{color:var(--stil)}
.zoek-lijst a.gekozen,.zoek-lijst a:hover{background:rgba(59,130,246,.16)}
.zoek-leeg{padding:18px;color:var(--stil);text-align:center}
/* tabbladen: maximaal vijf, de rest onder Meer */
.tabbalk{overflow:visible;flex-wrap:nowrap}
@media(max-width:900px){.tabbalk{overflow-x:auto}}
.tab-meer{position:relative;flex:0 0 auto}
.tab-meer>summary{list-style:none;cursor:pointer}.tab-meer>summary::-webkit-details-marker{display:none}
.tab-meer[open]>summary{color:#fff;background:rgba(255,255,255,.06)}
.tab-meer-lijst{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:230px;max-height:60vh;overflow:auto;padding:6px;border-radius:14px;border:1px solid var(--rand);background:var(--kaart);box-shadow:0 14px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.tab-meer-lijst .tab{border-radius:10px;padding:9px 12px}
@media(max-width:900px){.tab-meer-lijst{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:55vh}}
/* vastgepinde pagina's in het menu */
#vastgepind:not(:empty){margin-top:10px;padding-top:10px;border-top:1px solid var(--rand)}
#vastgepind .kop{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stil);padding:0 12px 4px}
.zoek-lijst a .ster{background:none;border:0;color:var(--stil);cursor:pointer;font-size:1rem;padding:0 4px}.zoek-lijst a .ster.aan{color:#FBBF24}
.zoek-lijst .tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px;padding:0 6px 6px}
/* geen vervagingsmasker op de tabbalk: dat verbergt ook de uitklaplijst van "Meer" */
.tabbalk{mask-image:none;-webkit-mask-image:none}
/* ---- kassa ---- */
.kassa{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:16px;align-items:start}
@media(max-width:900px){.kassa{grid-template-columns:1fr}}
.kassa-zoek{margin-bottom:10px}
.kassa-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.kassa-cat{grid-column:1/-1;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--stil);margin-top:6px}
.kassa-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:78px;padding:12px;border-radius:14px;border:1px solid var(--rand);background:rgba(255,255,255,.035);color:var(--tekst);font:inherit;text-align:left;cursor:pointer;transition:transform .08s,border-color .15s}
.kassa-tegel:hover{border-color:rgba(125,178,255,.55)}.kassa-tegel:active{transform:scale(.97)}
.kassa-tegel b{font-size:.92rem;line-height:1.25}.kassa-tegel span{color:#9CC3FF;font-weight:700}
.kassa-bedrag{max-width:360px}
.kassa-display{font-size:2.2rem;font-weight:800;text-align:right;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--rand);margin:8px 0}
.kassa-btw{font-size:.85rem;color:var(--stil);margin-bottom:8px}.kassa-btw label{display:inline-flex;gap:4px;align-items:center;margin:0 8px 0 0;color:var(--tekst)}.kassa-btw input{width:auto}
.kassa-toetsen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kassa-toetsen button{padding:16px 0;border-radius:12px;border:1px solid var(--rand);background:rgba(255,255,255,.05);color:#fff;font-size:1.25rem;font-weight:700;cursor:pointer}
.kassa-toetsen button:active{background:rgba(59,130,246,.3)}
.kassa-rechts{position:sticky;top:12px}
.kassa-regels{margin:10px 0;max-height:46vh;overflow:auto}
.kassa-regel{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rand)}
.kr-naam{font-size:.92rem}.kr-naam small{display:block;color:var(--stil);font-size:.75rem}
.kr-aantal{display:flex;align-items:center;gap:6px}.kr-aantal button{width:28px;height:28px;border-radius:8px;border:1px solid var(--rand);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.kr-bedrag{font-weight:700;min-width:72px;text-align:right}.kr-knoppen{display:flex;gap:2px;align-items:center}.kr-pct{border:0;background:none;color:var(--stil);font-weight:700;cursor:pointer;padding:2px 6px}.kr-korting{color:var(--groen,#34D399)}.kr-weg{border:0;background:none;color:var(--stil);font-size:1.2rem;cursor:pointer}
.kassa-som>div{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0}.kassa-som input{max-width:110px;text-align:right}
.kassa-btwregel{display:grid!important;grid-template-columns:1fr auto;color:var(--stil);font-size:.85rem}
.kassa-totaal{font-size:1.35rem;padding-top:8px;border-top:1px solid var(--rand)}
.kassa-acties{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:12px}.kassa-acties .knop{padding:14px;font-size:1rem}
.kassa-paneel{position:fixed;inset:0;background:rgba(5,9,20,.7);z-index:250;display:flex;align-items:center;justify-content:center;padding:16px}
.kassa-paneel[hidden]{display:none}
.kassa-venster{width:100%;max-width:520px;max-height:92vh;overflow:auto}
.kassa-tebetalen{font-size:1.1rem;margin:10px 0 14px}.kassa-tebetalen b{font-size:1.6rem;margin-left:8px}
.kassa-methoden{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kassa-methoden button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;border:1px solid var(--rand);background:rgba(255,255,255,.04);color:#fff;font-size:1.4rem;cursor:pointer}
.kassa-methoden button span{font-size:.85rem;font-weight:600}.kassa-methoden button.gekozen{border-color:#4B8DF8;background:rgba(59,130,246,.18)}.kassa-methoden button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:520px){.kassa-methoden{grid-template-columns:repeat(2,1fr)}}
.kassa-deel{margin-top:12px}.kassa-deel small{display:block;color:var(--stil);font-size:.78rem;margin-top:4px}
.kassa-contant{margin-top:12px}.kassa-snel{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.kassa-snel button{padding:8px 12px;border-radius:10px;border:1px solid var(--rand);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.kassa-wissel{margin-top:8px;font-size:1.05rem}
.kassa-lijstregel{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rand)}
.kassa-status{margin-top:12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.04)}.kassa-status.fout{background:rgba(248,113,113,.14);color:#FCA5A5}.kassa-status.ok{background:rgba(52,211,153,.12)}
.kassa-laden{height:4px;border-radius:4px;margin-top:10px;background:linear-gradient(90deg,transparent,#4B8DF8,transparent);background-size:200% 100%;animation:kl 1.2s linear infinite}@keyframes kl{from{background-position:200% 0}to{background-position:-200% 0}}
/* bon */
.kassabon{max-width:340px;margin:0 auto;background:#fff;color:#111;padding:18px;border-radius:8px;font:13px/1.45 ui-monospace,Consolas,monospace}
.kb-rij{display:flex;justify-content:space-between;gap:10px}.kb-totaal{font-weight:800;font-size:15px}.kb-klein{font-size:11px;color:#555}.kb-lijn{border-top:1px dashed #999;margin:8px 0}
@media print{nav,.tabbalk,.geen-print,.zoekknop{display:none!important}.shell{display:block}main{padding:0}body{background:#fff}.kassabon{box-shadow:none;border-radius:0;max-width:80mm;padding:0}}
@media print{.afdruk-wit .kaart,.afdruk-wit .kaart *{color:#000!important;background:transparent!important;box-shadow:none!important;border-color:#bbb!important}.afdruk-wit .kaart{border:1px solid #bbb!important;break-inside:avoid}.afdruk-wit img{background:#fff!important}}
/* Brede tabellen (vooral op de telefoon): binnen de kaart zijwaarts scrollen in plaats van afknippen. Niet bij .glans: dat randje steekt 1px buiten de kaart. */
.kaart:not(.glans):has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
/* + Nieuw: snel een klant, klus/afspraak of factuur maken (onder de zoekknop) */
.nieuwknop{margin:-6px 0 14px;position:relative}.nieuwknop>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;min-height:40px}.nieuwknop>summary::-webkit-details-marker{display:none}.nieuwlijst{display:grid;gap:4px;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;padding:6px;border:1px solid var(--rand);border-radius:12px;background:var(--kaart);box-shadow:0 12px 30px rgba(0,0,0,.45)}@media(max-width:900px){.nieuwlijst{left:auto;min-width:200px}}.nieuwlijst a{display:block;padding:10px 12px;border-radius:10px;border:1px solid var(--rand);text-decoration:none;color:var(--tekst);background:rgba(255,255,255,.03)}.nieuwlijst a:hover{border-color:var(--accent)}
@media print{.nieuwknop{display:none!important}}
/* invoer met eenheid ernaast (min, € per uur) en strakke prijsregels op de klus */
.met-eenheid{display:flex;align-items:center;gap:0;border:1px solid var(--rand);border-radius:10px;background:var(--bg2);overflow:hidden}.met-eenheid:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.met-eenheid input{border:0;border-radius:0;box-shadow:none!important;min-width:0}.met-eenheid span{padding:0 12px;color:var(--stil);font-size:.85rem;white-space:nowrap}
.prijsregels{width:100%;border-collapse:collapse}.prijsregels th{font-size:.75rem;text-align:left;color:var(--stil);font-weight:500;padding:0 6px 6px}.prijsregels td{padding:4px 6px;vertical-align:middle}.prijsregels td.getal,.prijsregels th.getal{text-align:right;white-space:nowrap}
.prijsregels input{padding:8px 10px}.kaart-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}.kaart-kop h2{margin:0}.kaart-kop small{color:var(--stil);font-size:.8rem}
.cijferbalk{display:flex;flex-wrap:wrap;gap:10px 28px}.cijferbalk>div{display:flex;flex-direction:column;min-width:110px}.cijferbalk small{color:var(--stil);font-size:.75rem}.cijferbalk b{font-size:1.15rem}.cijferbalk span{color:var(--stil);font-size:.78rem}
@media(max-width:640px){.g2,.g3{grid-template-columns:1fr}.g2>.met-eenheid,.grid.g2 .met-eenheid{width:100%}}
label:has(>input[type=radio]){display:flex!important;gap:8px;align-items:center;justify-content:flex-start;color:var(--tekst);font-size:.9rem}
/* Volg je aanvraag (punt 104): stappen als tijdlijn */
.vg{list-style:none;margin:8px 0 0;padding:0}.vg-stap{display:flex;gap:10px;padding:0 0 12px;position:relative}.vg-stap:not(:last-child)::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--rand,#e3e5e8)}.vg-bol{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:var(--rand,#e3e5e8);color:var(--stil,#667)}.vg-klaar .vg-bol{background:var(--groen,#1f9d55);color:#fff}.vg-nu .vg-bol{background:var(--accent,#2F7BFF);color:#fff;box-shadow:0 0 0 4px rgba(47,123,255,.18)}.vg-titel{font-weight:600}.vg-nu .vg-titel{color:var(--accent,#2F7BFF)}.vg-op{font-weight:400;font-size:.78rem;color:var(--stil,#667)}.vg-tekst{font-size:.88rem;color:var(--stil,#667);margin-top:2px}.vg-knop{display:inline-block;margin-top:6px;font-size:.88rem;font-weight:600}

/* snelkoppelingen onder het werkonderdeel (per branche) */
.menu-kort .snel{margin:0 0 6px 30px;border-left:1px solid rgba(255,255,255,.08);padding-left:6px}
.menu-kort .snel a.item.sub{padding:6px 10px;font-size:.88rem;opacity:.9}
.menu-kort .snel a.item.sub .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;margin-right:8px;display:inline-block}
.menu-kort .snel a.item.sub.actief{opacity:1}

/* punt 27: telefoon. iPhone zoomt in bij invoervelden kleiner dan 16 px; knoppen groot genoeg om te tikken; tegels in rijen van 3 of 2 */
@media(max-width:900px){input,select,textarea{font-size:16px}.knop.klein{min-height:38px;padding:8px 14px}.tegels6{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:560px){.tegels6{grid-template-columns:repeat(2,1fr)!important}}
/* punt 132: niet verschenen */
.afspraak[data-status=niet_verschenen]{background:linear-gradient(90deg,rgba(248,113,113,.16),rgba(248,113,113,.03))!important;opacity:.8}.afspraak[data-status=niet_verschenen]::after{content:"Niet verschenen";display:block;font-size:.72rem;color:#F87171;font-weight:600;margin-top:4px}
.afspraak[data-status=wacht_betaling]{border-left-style:dashed!important;opacity:.85}.afspraak[data-status=wacht_betaling]::before{content:"Wacht op aanbetaling";display:block;font-size:.7rem;color:var(--accent2);font-weight:600;margin-bottom:2px}
.uitleg{display:block;color:var(--stil);font-size:.8rem;margin-top:4px;font-weight:400;line-height:1.45}
/* punt 141: agenda als dagweergave, een kolom per medewerker */
.ad-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ad-acties{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ad-schakel{display:inline-flex;background:var(--kaart2);border:1px solid var(--rand);border-radius:999px;padding:3px;margin-right:4px}
.ad-schakel a{padding:5px 14px;border-radius:999px;font-size:.85rem;color:var(--stil);text-decoration:none;font-weight:600}
.ad-schakel a.aan{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.35)}
.ad-datum{width:auto;padding:6px 10px;font-size:.85rem}
.ad-rooster{padding:0;overflow:auto;max-height:calc(100vh - 230px)}
.ad-raster{display:grid;position:relative;min-width:max-content}
.ad-hoek,.ad-persoon{position:sticky;top:0;z-index:3;background:var(--kaart);border-bottom:1px solid var(--rand)}
.ad-hoek{left:0;z-index:4}
.ad-persoon{display:flex;gap:10px;align-items:center;padding:12px 12px 10px;border-left:1px solid var(--rand)}
.ad-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--paars,#8b5cf6));flex:0 0 auto}
.ad-tijden{position:sticky;left:0;z-index:2;background:var(--kaart)}
.ad-tijden div{position:absolute;right:8px;transform:translateY(-50%);font-size:.72rem;color:var(--stil);font-variant-numeric:tabular-nums}
.ad-tijden div:first-child{transform:none;top:4px!important}
.ad-kolom{position:relative;border-left:1px solid var(--rand);cursor:copy}
.ad-kolom.doel{background:rgba(59,130,246,.06)}
.ad-werk{position:absolute;left:0;right:0;background:rgba(255,255,255,.025);border-top:1px dashed rgba(255,255,255,.06);border-bottom:1px dashed rgba(255,255,255,.06)}
.ad-lijn{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.05)}
.ad-nu{position:absolute;left:0;right:0;border-top:2px solid #F87171;z-index:2;pointer-events:none}
.ad-nu::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:#F87171}
.ad-blok{position:absolute;left:6px;right:6px;z-index:1;display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:10px;overflow:hidden;text-decoration:none;color:var(--tekst);cursor:grab;
  background:linear-gradient(180deg,rgba(59,130,246,.22),rgba(59,130,246,.12));border-left:3px solid var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .12s,box-shadow .12s}
.ad-blok:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.35);z-index:2}
.ad-blok.sleept{opacity:.45}
.ad-blok b{font-size:.86rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-tijd{font-size:.7rem;color:var(--accent2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-wat{font-size:.74rem;color:var(--stil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-blok[data-status=klaar]{background:linear-gradient(180deg,rgba(52,211,153,.2),rgba(52,211,153,.08));border-left-color:var(--groen)}
.ad-blok[data-status=onderweg]{border-left-color:var(--blauw)}
.ad-blok[data-status=niet_verschenen]{background:rgba(248,113,113,.12);border-left-color:#F87171;opacity:.8}
.ad-blok[data-status=wacht_betaling],.ad-blok[data-status=voorlopig]{background:repeating-linear-gradient(135deg,rgba(224,145,61,.14) 0 8px,rgba(224,145,61,.07) 8px 16px);border-left:3px dashed var(--oranje,#E0913D)}
@media (max-width:700px){.ad-rooster{max-height:none}}
.of-kies{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}.of-kies select{width:auto;max-width:320px}
.ad-verzet{margin:0 0 12px;padding:12px 16px}.ad-verzet summary{cursor:pointer}.ad-verzet-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
/* punt 144: nacalculatie */
.nc{margin-top:10px}.nc-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.nc-cijfers>div{display:flex;flex-direction:column;gap:2px;background:var(--kaart2);border:1px solid var(--rand);border-radius:12px;padding:10px 12px}
.nc-cijfers .label{font-size:.72rem;color:var(--stil);text-transform:uppercase;letter-spacing:.7px}.nc-cijfers b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.nc-balk{display:flex;height:10px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden;margin-top:6px}.nc-balk span{display:block;height:100%}
.nc-legenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:.8rem;color:var(--stil)}.nc-legenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
@media (max-width:600px){.nc-cijfers{grid-template-columns:1fr}}
/* punt 145: vindbaarheid na plaatsen */
.vp-stappen{margin:8px 0 0;padding-left:20px;line-height:1.6;font-size:.9rem}.vp-stappen li.klaar{color:var(--groen)}.vp-stappen li.klaar::marker{content:"✓  "}
.vp-effect{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}.vp-effect>div{display:flex;flex-direction:column;background:var(--kaart2);border:1px solid var(--rand);border-radius:10px;padding:8px 10px}
.vp-effect .label{font-size:.7rem;color:var(--stil);text-transform:uppercase;letter-spacing:.6px}.vp-effect b{font-size:1.2rem;font-variant-numeric:tabular-nums}
@media (max-width:700px){.vp-effect{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* punt 147: bellijst Corvo */
.bl-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bl-vandaag{display:flex;gap:8px}.bl-vandaag>div{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:8px 14px;text-align:center;min-width:92px}
.bl-vandaag b{display:block;font-size:1.3rem;font-variant-numeric:tabular-nums}.bl-vandaag span{font-size:.72rem;color:var(--stil)}
.bl-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;align-items:center;margin-bottom:14px}
.bl-vinkjes{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem}.bl-vinkjes label{display:inline-flex;gap:6px;align-items:center;margin:0;color:var(--tekst)}.bl-vinkjes input{width:auto}
.bl-kaart{margin-bottom:12px;padding:16px}
.bl-boven{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.bl-kans{width:64px;height:64px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.bl-kans b{font-size:1.45rem;line-height:1}.bl-kans span{font-size:.56rem;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.bl-hoog{background:rgba(52,211,153,.16);color:#34D399;box-shadow:inset 0 0 0 1px rgba(52,211,153,.35)}.bl-midden{background:rgba(224,145,61,.15);color:#E0913D;box-shadow:inset 0 0 0 1px rgba(224,145,61,.35)}.bl-laag{background:rgba(255,255,255,.05);color:var(--stil)}
.bl-wie b{font-size:1.05rem}.bl-feiten{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--stil);margin-top:4px}.bl-rood{color:#F87171}
.bl-inhoud{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rand)}
.bl-inhoud .label{font-size:.7rem;color:var(--stil);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}.bl-inhoud ul{margin:0;padding-left:18px;font-size:.86rem;line-height:1.5}
.bl-zeg{margin:0 0 6px;font-size:.88rem;line-height:1.5}
.bl-uitkomst{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--rand)}.bl-uitkomst input[name=notitie]{flex:1 1 200px;width:auto}.bl-terug{display:inline-flex;gap:4px}.bl-terug input{width:auto}
@media (max-width:820px){.bl-inhoud{grid-template-columns:1fr}.bl-boven{grid-template-columns:auto 1fr}.bl-bel{grid-column:1/-1}}

/* punt 154: voorstellen als tegels op Home, elk naar de juiste pagina */
.adv-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px}.adv-tegel{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--rand);border-radius:12px;background:rgba(255,255,255,.02);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}.adv-tegel:hover{border-color:var(--accent);transform:translateY(-1px)}.adv-tegel .pil{align-self:flex-start}.adv-tegel b{font-size:.95rem;line-height:1.3}.adv-tekst{color:var(--stil);font-size:.82rem;line-height:1.35}.adv-voet{display:flex;justify-content:space-between;margin-top:auto;font-size:.82rem;color:var(--groen)}.adv-voet span{color:var(--accent2)}
/* Rondleiding en "Wat is dit?" (punt 158) */
.rl-laag{position:fixed;inset:0;z-index:90;pointer-events:auto}.rl-laag.rl-donker{background:rgba(5,9,20,.6)}
.rl-licht{position:fixed;z-index:91;border-radius:12px;box-shadow:0 0 0 9999px rgba(5,9,20,.6),0 0 0 2px var(--accent2);pointer-events:none;transition:all .25s ease}
.rl-ballon{position:fixed;z-index:92;background:var(--kaart2);border:1px solid var(--rand);border-radius:14px;padding:14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:.92rem;line-height:1.45}
.rl-kop{display:flex;align-items:center;gap:8px;margin-bottom:6px}.rl-teller{margin-left:auto;font-size:.75rem;color:var(--stil)}
.rl-av{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.rl-tekst{color:var(--tekst);margin:2px 0 4px}.rl-knoppen{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
.rl-balk{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:93;display:flex;gap:10px;align-items:center;background:var(--kaart2);border:1px solid var(--accent2);border-radius:12px;padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:calc(100vw - 32px);font-size:.88rem}
body.rl-watis main a,body.rl-watis main button,body.rl-watis nav a,body.rl-watis nav button,body.rl-watis nav summary,body.rl-watis .tab,body.rl-watis .kaart{cursor:help}
body.rl-watis main a:hover,body.rl-watis nav a:hover,body.rl-watis .tab:hover,body.rl-watis main button:hover{outline:2px dashed var(--accent2);outline-offset:2px}
@media(max-width:560px){.rl-balk{bottom:84px;left:12px;right:12px;transform:none;max-width:none}}
/* Pijplijn (10 okt): het bord past in het scherm, elke kolom scrolt zelf; compact; per fase als lijst */
.segment{display:inline-flex;border:1px solid var(--rand);border-radius:10px;overflow:hidden}.segment a{padding:6px 12px;font-size:.85rem;color:var(--stil);text-decoration:none}.segment a.actief{background:var(--accent);color:#fff}
.pp-kpi .kaart.kpi{padding:12px 14px}
.pp-bord{display:grid;grid-template-columns:repeat(var(--kolommen),minmax(230px,1fr));gap:10px;overflow-x:auto;margin-top:12px;padding-bottom:6px;height:calc(100vh - 150px);min-height:420px;align-items:stretch;scroll-snap-type:x proximity}
.pp-bord .kolom{display:flex;flex-direction:column;min-height:0;background:rgba(255,255,255,.025);border:1px solid rgba(34,48,80,.6);border-radius:12px;padding:8px;scroll-snap-align:start}
.pp-bord .kolom.kansen{background:rgba(47,123,255,.06);border:1px dashed rgba(47,123,255,.45)}
.pp-bord .fase-kop{flex:0 0 auto}.pp-bord .kolom-lijst{flex:1;min-height:60px;overflow-y:auto;padding-right:2px;scrollbar-width:thin}
.leeg-kolom{color:var(--stil);font-size:.8rem;text-align:center;padding:18px 6px;border:1px dashed var(--rand);border-radius:10px}
.pkaart{padding:9px 10px!important;margin-bottom:8px;cursor:grab;overflow-wrap:anywhere}
.pk-kop{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.pk-naam{color:inherit;text-decoration:none;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-waarde{font-size:.82rem;white-space:nowrap}.pk-sub{font-size:.78rem;color:var(--stil)}.pk-vraag{font-size:.8rem;color:var(--stil);margin:2px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pk-voet{font-size:.75rem;color:var(--stil);display:flex;justify-content:space-between;gap:6px;margin-top:2px}.pk-voet span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-meer{font-size:.8rem;margin-top:4px}.pk-meer>summary{cursor:pointer;color:var(--stil)}
.pkaart.compact{padding:7px 9px!important;margin-bottom:6px}.pkaart.compact .pk-meer{margin-top:0;position:relative}.pkaart.compact .pk-meer>summary{list-style:none;text-align:right;line-height:1}
.pkaart.compact .pk-vraag{-webkit-line-clamp:2}
.fase-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.fase-knoppen a{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--rand);border-radius:12px;text-decoration:none;color:var(--tekst);min-width:110px;background:var(--kaart)}
.fase-knoppen a span{font-size:.8rem;color:var(--stil)}.fase-knoppen a.actief{border-color:var(--accent);background:rgba(59,130,246,.12)}.fase-knoppen a.kansen{border-style:dashed}
.pp-lijst .kolom,.pp-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.pp-lijst .kolom{grid-column:1/-1}.pp-lijst .pkaart{margin:0}
@media(max-width:900px){.pp-bord{grid-template-columns:repeat(var(--kolommen),82vw);height:calc(100vh - 120px)}}
/* lange namen of adressen zonder spaties mogen een scherm nooit breder maken */
.afkap{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
h1,h2,.kaart{overflow-wrap:break-word}
td a{overflow-wrap:anywhere}td .afkap{overflow-wrap:normal}
.pkaart.compact{position:relative;padding-right:28px!important}.pkaart.compact .pk-meer{position:absolute;right:6px;top:5px}.pkaart.compact .pk-meer[open]{position:static;margin-top:4px}.pkaart.compact .pk-meer>summary{font-size:1rem;color:var(--stil);padding:0 2px}.pkaart.compact .pk-meer>summary::-webkit-details-marker{display:none}
.pp-lijst{display:block}.pp-lijst .kolom{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;align-items:start}.pp-lijst .pkaart{margin:0!important}
/* Pijplijn: werklijst, trechter en 3 kolommen (10 okt) */
.pp-uitleg{margin:4px 0 10px;font-size:.88rem}.pp-uitleg>summary{cursor:pointer;color:var(--stil)}
.pp-stroom{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}.pp-stroom b{background:var(--kaart2);border:1px solid var(--rand);border-radius:8px;padding:3px 8px;font-size:.82rem}.pp-bron{font-size:.8rem;color:var(--stil)}.pijl{color:var(--stil)}
.wl-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.wl-blok{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:12px;min-width:0}.wl-dicht{margin-top:12px}.wl-dicht>summary{cursor:pointer;list-style:none}.wl-dicht>summary::-webkit-details-marker{display:none}
.wl-kop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}.wl-kop b{font-size:1.05rem}.teller-groot{font-size:1.3rem;font-weight:700;color:var(--accent2)}
.wl-sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--stil);margin:8px 0 4px}
.wl-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin-top:6px}.wl-blok .pkaart{cursor:default}
.lrij{border:1px solid var(--rand);border-left:3px solid var(--accent);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:rgba(255,255,255,.02);min-width:0}.lrij.laat{border-left-color:var(--oranje)}
.wl-lijst .lrij{margin:0}.lr-hoofd{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.lr-naam{font-weight:600;color:inherit;text-decoration:none;max-width:70%}.lr-wacht{font-size:.78rem;color:var(--stil);white-space:nowrap}.lrij.laat .lr-wacht{color:var(--oranje);font-weight:600}
.lr-wat{font-size:.84rem;color:var(--stil);margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lr-voet{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--stil)}.lr-voet span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-acties{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}.lr-acties form{margin:0}.lr-meer{font-size:.8rem}.lr-meer>summary{cursor:pointer;color:var(--stil);padding:4px 2px}.lr-meer form{display:grid;gap:4px;margin-top:4px;min-width:220px}
.trechter{display:flex;align-items:stretch;gap:6px;margin:12px 0 6px}.tr-stap{flex:1;position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--rand);border-radius:12px;background:var(--kaart);text-decoration:none;color:var(--tekst);overflow:hidden;min-width:0}
.tr-stap.actief{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.tr-balk{position:absolute;left:0;bottom:0;height:4px;background:var(--accent);opacity:.7}.tr-getal{font-size:1.5rem;font-weight:700}.tr-waarde{font-size:.8rem;color:var(--stil)}.tr-pijl{align-self:center;color:var(--stil);font-size:1.4rem}
.drie-tabs{display:none}
@media(max-width:900px){.wl-raster{grid-template-columns:1fr}.wl-lijst{grid-template-columns:1fr}
  .trechter{display:grid;grid-template-columns:1fr 1fr}.tr-pijl{display:none}
  .drie-tabs{display:flex;gap:6px;margin:10px 0;position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0}.drie-tabs a{flex:1;text-align:center;padding:8px 4px;border:1px solid var(--rand);border-radius:10px;text-decoration:none;color:var(--tekst);font-size:.85rem}.drie-tabs a span{display:block;font-weight:700}.drie-tabs a.actief{border-color:var(--accent);background:rgba(59,130,246,.12)}
  .pp-bord.drie{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible}.pp-bord.drie .kolom.mob-weg{display:none}.pp-bord.drie .kolom-lijst{overflow:visible}}
.pp-bord.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.geldstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}.geld{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--rand);border-radius:14px;background:var(--kaart);text-decoration:none;color:var(--tekst);min-width:0}
.geld b{font-size:1.45rem}.g-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--stil)}.g-sub{font-size:.8rem;color:var(--stil);overflow-wrap:anywhere}.geld.goed b{color:var(--groen)}.geld.slecht b{color:var(--rood)}.geld:hover{border-color:var(--accent)}
@media(max-width:900px){.geldstrip{grid-template-columns:1fr 1fr}.geld b{font-size:1.2rem}}
/* Gesprekken: lijst links, gesprek rechts (zoals de demo) */
.gs-wrap{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:16px;align-items:start}
.gs-lijst{padding:6px;max-height:calc(100vh - 230px);overflow:auto;position:sticky;top:12px}
.gs-item{display:block;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;margin-bottom:2px}
.gs-item:hover{background:rgba(255,255,255,.04)}.gs-item.aan{background:rgba(59,130,246,.16)}
.gs-naam{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700}
.gs-teller{background:var(--rood);color:#fff;border-radius:99px;font-size:.7rem;padding:1px 7px;font-weight:700}
.gs-staat{display:block;font-size:.85rem;color:var(--tekst);margin-top:1px}.gs-let{color:var(--accent2);font-weight:600}
.gs-voorbeeld{display:block;font-size:.8rem;color:var(--stil);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-paneel{padding:18px 20px}.gs-kop h2{margin:0;font-size:1.15rem}.gs-sub{font-size:.8rem;color:var(--stil)}
.gs-berichten{max-height:55vh;overflow:auto;margin:12px 0;padding-right:4px}
.gs-bel{max-width:78%;padding:10px 14px;border-radius:14px;margin:8px 0;border:1px solid transparent}
.gs-bel.in{background:rgba(255,255,255,.06);margin-right:auto}
.gs-bel.uit{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.35);margin-left:auto}
.gs-bel.mens{background:rgba(245,165,36,.14);border-color:rgba(245,165,36,.35);margin-left:auto}
.gs-tekst{white-space:pre-wrap;font-size:.95rem}.gs-wie{font-size:.72rem;color:var(--stil);margin-top:4px}.gs-wie a{color:var(--stil)}
.gs-uitkomst{display:block;padding:12px 14px;border-radius:12px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.3);color:var(--groen);text-decoration:none;margin:8px 0;font-size:.9rem;font-weight:500}
.gs-gemist{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid #FBBF24;border-radius:12px;margin:8px 0}
.gs-acties{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.gs-acties form{margin:0}
.gs-antwoord{margin-top:8px}.gs-antwoord textarea{width:100%}
.gs-terug{display:none;color:var(--stil);margin-bottom:8px}
@media (max-width:900px){.gs-wrap{grid-template-columns:1fr}.gs-lijst{position:static;max-height:none}.gs-wrap.gekozen .gs-lijst{display:none}.gs-wrap:not(.gekozen) .gs-detail{display:none}.gs-terug{display:inline-block}.gs-bel{max-width:90%}}
/* Klussen als tabel (zoals de demo) */
.kl-tabel{padding:4px 8px;overflow-x:auto}.kl-tabel table{min-width:760px}
.kl-tabel th{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--stil);font-weight:600}
.kl-tabel td{vertical-align:middle}.kl-titel{font-weight:700;color:var(--tekst);text-decoration:none}.kl-titel:hover{color:var(--accent2)}
.kl-tabel td:nth-child(3){white-space:nowrap}.kl-sub{font-size:.75rem;color:var(--stil)}.kl-r{text-align:right;white-space:nowrap}.kl-laat{color:var(--rood)}
.kl-status{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Digitale assistenten (punt 269): orb, hulpvenster, chatbellen, voorstelkaart, app-assistent */
.ai-orb{--s:28px;position:relative;display:inline-block;width:var(--s);height:var(--s);flex:0 0 var(--s);border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 115%,rgba(52,211,153,.85) 0,transparent 50%),radial-gradient(circle at 10% 10%,#3B82F6 0,transparent 60%),linear-gradient(135deg,#1D4ED8,#6D5DF0 55%,#4338CA);box-shadow:inset 0 0 calc(var(--s)*.2) rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.2),0 0 calc(var(--s)*.7) calc(var(--s)*-.12) rgba(99,102,241,.75)}
.ai-orb::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 12%,rgba(56,189,248,.75) 24%,transparent 38% 54%,rgba(167,139,250,.8) 66%,transparent 80%,rgba(52,211,153,.6) 92%,transparent);filter:blur(calc(var(--s)*.12));mix-blend-mode:screen;animation:aiDraai 6s linear infinite}
.ai-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.85),rgba(255,255,255,.18) 11%,transparent 28%),radial-gradient(circle at 50% 50%,transparent 58%,rgba(255,255,255,.14) 100%)}
.ai-orb.groot{--s:64px}.ai-orb.klein{--s:24px}.ai-orb.denkt{animation:aiAdem 1.6s ease-in-out infinite}.ai-orb.denkt::before{animation-duration:1.8s}
@keyframes aiDraai{to{transform:rotate(360deg)}}
@keyframes aiAdem{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes aiIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes aiOpen{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aiHalo{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.45);opacity:0}}
@keyframes aiGlans{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ai-knop{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:61;background:none;display:grid;place-items:center;transition:transform .2s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.ai-knop .ai-orb{--s:58px;position:absolute;inset:0}
.ai-knop::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(125,178,255,.7);animation:aiHalo 2.8s ease-out infinite;pointer-events:none}
.ai-knop-teken{position:relative;z-index:1;color:#fff;font-size:1.45rem;font-weight:700;line-height:1;text-shadow:0 1px 6px rgba(10,16,32,.6)}
.ai-knop:hover{transform:translateY(-2px) scale(1.04)}.ai-knop:focus-visible{outline:2px solid var(--accent2);outline-offset:4px}
.ai-paneel{position:fixed;right:18px;bottom:90px;width:min(400px,calc(100vw - 32px));height:min(610px,calc(100vh - 120px));display:flex;flex-direction:column;z-index:60;overflow:hidden;border-radius:20px;color:var(--tekst);background:radial-gradient(120% 60% at 0% 0%,rgba(59,130,246,.16),transparent 55%),radial-gradient(90% 50% at 100% 0%,rgba(139,124,246,.12),transparent 60%),linear-gradient(180deg,rgba(22,32,54,.94),rgba(11,17,32,.96));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(125,178,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 32px 80px -24px rgba(0,0,0,.85),0 0 70px -34px rgba(59,130,246,.7);animation:aiOpen .3s cubic-bezier(.2,.8,.2,1)}
.ai-paneel::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(125,178,255,.8),rgba(139,124,246,.8),transparent);pointer-events:none}
.ai-kop{padding:14px 14px 10px;border-bottom:1px solid rgba(125,178,255,.1)}
.ai-kop-rij{display:flex;align-items:center;gap:11px}.ai-kop-tekst{flex:1;min-width:0}
.ai-uitleg{font-size:.76rem;color:var(--stil);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-kop-acties{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ai-icoonknop{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--stil);cursor:pointer;transition:background .15s,color .15s,border-color .15s;padding:0}
.ai-icoonknop:hover{background:rgba(255,255,255,.06);color:var(--tekst);border-color:rgba(125,178,255,.18)}
.ai-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(125,178,255,.18);background:rgba(255,255,255,.035);color:var(--tekst);border-radius:999px;padding:5px 11px;font:inherit;font-size:.78rem;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;text-align:left;line-height:1.3;text-decoration:none}
.ai-chip:hover{border-color:rgba(125,178,255,.5);background:rgba(59,130,246,.1);text-decoration:none}.ai-chip svg{opacity:.75;flex:0 0 auto}
.hulp-tabs{display:inline-flex;gap:2px;background:rgba(0,0,0,.28);border:1px solid rgba(125,178,255,.12);border-radius:11px;padding:3px}
.hulp-tabs button{border:0;background:none;color:var(--stil);padding:5px 13px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;font-size:.85rem;transition:color .15s,background .2s,box-shadow .2s}
.hulp-tabs button:hover{color:var(--tekst)}
.hulp-tabs button[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,#2563EB,#5B50E6);box-shadow:0 4px 14px -4px rgba(91,80,230,.7),0 0 0 1px rgba(255,255,255,.12) inset}
.ai-berichten{flex:1;overflow-y:auto;padding:6px 14px 14px;font-size:.9rem;scrollbar-width:thin;scrollbar-color:var(--rand) transparent}
.ai-rij{display:flex;gap:9px;margin:12px 0;align-items:flex-end}.ai-rij.eigen{justify-content:flex-end}.ai-rij>.ai-orb{margin-bottom:3px}
.ai-rij.ai-nieuw{animation:aiIn .35s cubic-bezier(.2,.8,.2,1) both}
.ai-bel{max-width:86%;min-width:0;padding:9px 12px;border-radius:16px 16px 16px 5px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;background:rgba(255,255,255,.045);border:1px solid rgba(125,178,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.ai-rij.eigen .ai-bel{border-radius:16px 16px 5px 16px;color:#fff;border-color:transparent;background:linear-gradient(135deg,#2563EB,#5B50E6);box-shadow:0 8px 20px -10px rgba(59,130,246,.8)}
.ai-links{margin-top:8px;display:flex;flex-direction:column;gap:4px;white-space:normal}.ai-links a{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;color:var(--accent2)}.ai-links a::before{content:"";width:5px;height:5px;flex:0 0 5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.ai-leeg .ai-orb.groot{box-shadow:inset 0 0 14px rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 8px rgba(125,178,255,.06),0 0 0 16px rgba(125,178,255,.03),0 0 50px -6px rgba(110,120,250,.85)}
.ai-leeg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 10px 8px;color:var(--stil);font-size:.88rem;line-height:1.5}.ai-leeg p{margin:0;max-width:300px}.ai-leeg .hk-kaart{text-align:left;align-self:stretch}
.ai-snel{padding:0 14px 8px;display:flex;gap:6px;flex-wrap:wrap}.ai-snel:empty{display:none}
.ai-form{padding:10px 12px 12px;margin:0}
.ai-invoer{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(125,178,255,.18);transition:border-color .15s,box-shadow .15s}
.ai-invoer:focus-within{border-color:rgba(125,178,255,.6);box-shadow:0 0 0 3px rgba(59,130,246,.18),0 0 24px -8px rgba(59,130,246,.6)}
.ai-invoer input{flex:1;border:0;background:transparent;padding:8px 0;min-width:0;border-radius:0}.ai-invoer input:focus{box-shadow:none;outline:none}
.ai-stuur{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:0;border-radius:11px;color:#fff;cursor:pointer;padding:0;background:linear-gradient(135deg,#2563EB,#5B50E6);box-shadow:0 6px 16px -6px rgba(91,80,230,.8);transition:transform .15s}
.ai-stuur:hover{transform:translateY(-1px)}.ai-stuur:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.ai-voet{font-size:.7rem;color:var(--stil);padding:0 14px 10px;line-height:1.45}
.ai-feedback{border-top:1px solid rgba(125,178,255,.1);padding:8px 14px}.ai-feedback summary{cursor:pointer;font-size:.82rem}
.ass-bezig{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.ass-bezig i{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--paars));display:inline-block;animation:assStip 1.1s infinite ease-in-out}.ass-bezig i:nth-child(2){animation-delay:.15s}.ass-bezig i:nth-child(3){animation-delay:.3s}
.ass-bezig [data-stap]{margin-left:6px;background:linear-gradient(90deg,var(--stil) 0%,var(--stil) 35%,#fff 50%,var(--stil) 65%,var(--stil) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aiGlans 2.4s linear infinite}
.ass-stap{animation:assFade .4s ease}
@keyframes assStip{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}
@keyframes assFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.ass-bezig [data-stap].ass-stap{animation:assFade .4s ease,aiGlans 2.4s linear infinite}
.hk-kaart{margin-top:8px;border:1px solid rgba(125,178,255,.16);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.18);white-space:normal}.hk-kop{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);margin-bottom:4px;font-weight:600}
.hk-stappen{margin:6px 0 0;padding-left:18px;font-size:.85rem}.hk-stappen li::marker{color:var(--accent2);font-weight:600}.hk-pakket{font-size:.8rem;color:var(--stil);margin-top:6px}.hk-pad{font-size:.75rem;color:var(--stil);margin-top:6px}
.hk-alt{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;align-items:center;white-space:normal}.hk-alt span{font-size:.78rem;color:var(--stil);margin-right:2px}
.hk-corvo{display:inline-flex;margin-top:9px;background:none;border:0;padding:0;color:var(--accent2);font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ass-kaart{position:relative;margin-top:10px;border-radius:14px;padding:11px 12px;white-space:normal;background:linear-gradient(#111a2e,#111a2e) padding-box,linear-gradient(135deg,rgba(125,178,255,.85),rgba(139,124,246,.85),rgba(52,211,153,.6)) border-box;border:1px solid transparent;box-shadow:0 10px 30px -16px rgba(91,80,230,.8)}
.ass-kop{display:flex;align-items:center;gap:6px;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);font-weight:600;margin-bottom:5px}
.ass-acties{display:flex;gap:6px;margin-top:10px}.ass-status{font-size:.8rem;margin-top:6px;color:var(--stil)}
@media (max-width:560px){.ai-paneel{inset:0;width:100%;height:100%;height:100dvh;border-radius:0;border:0}.ai-paneel:not([hidden])~.ai-knop{display:none}.ai-bel{max-width:90%}.ai-kop{padding-top:max(14px,env(safe-area-inset-top))}.ai-form{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
.app-ass{background:radial-gradient(120% 80% at 0% 0%,rgba(59,130,246,.14),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),var(--kaart);border-color:rgba(125,178,255,.22)}
.app-ass-kop{display:flex;align-items:center;gap:11px;margin-bottom:12px}.app-ass-kop small{display:block;font-size:.76rem;color:var(--stil);font-weight:400}
.app-ass-antwoord{white-space:pre-wrap}.app-ass-antwoord:not(:empty){margin:0 0 12px;padding:10px 12px;border-radius:14px 14px 14px 5px;background:rgba(255,255,255,.045);border:1px solid rgba(125,178,255,.12);animation:aiIn .35s cubic-bezier(.2,.8,.2,1)}
.app-ass-antwoord .knop{margin-top:6px}
.app-ass-antwoord.bezig{color:var(--stil)}.app-ass-antwoord.bezig::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--paars));animation:aiAdem 1.2s ease-in-out infinite;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.ai-orb,.ai-orb::before,.ai-knop::after,.ai-rij.ai-nieuw,.ai-paneel,.ass-bezig i,.ass-bezig [data-stap],.ass-stap,.app-ass-antwoord,.app-ass-antwoord.bezig::before{animation:none!important}.ass-bezig [data-stap]{color:var(--stil);background:none}.ai-knop,.ai-chip,.ai-stuur{transition:none}}

/* =====================================================================================
   ONTWERP 2027 (punt 271, bouwt voort op 269): één ontwerpsysteem voor het hele dashboard.
   Alleen uiterlijk; deze laag staat bewust onderaan en gaat vóór de oudere regels hierboven.
   ===================================================================================== */
:root{
  --bg:#070C18;--bg2:#0C1426;--kaart:#0F1729;--kaart2:#141E34;--rand:#1E2A44;
  --lijn:rgba(148,163,184,.13);--lijn2:rgba(148,163,184,.22);--licht:rgba(255,255,255,.06);
  --tekst:#E9EEF8;--tekst2:#C3CCDD;--stil:#8D98AF;
  --r:16px;--r-s:10px;--r-m:12px;--r-l:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --schaduw:0 1px 0 rgba(255,255,255,.045) inset,0 0 0 1px rgba(0,0,0,.25),0 10px 30px -18px rgba(0,0,0,.8);
  --schaduw-hoog:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(0,0,0,.25),0 24px 48px -24px rgba(0,0,0,.9),0 12px 30px -20px rgba(59,130,246,.35);
  --ring:0 0 0 3px rgba(59,130,246,.38);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-feature-settings:"cv11","ss01","ss03";background-color:var(--bg);
  background-image:radial-gradient(60% 40% at 60% -8%,rgba(59,130,246,.16),transparent 70%),radial-gradient(40% 35% at 100% 0%,rgba(139,124,246,.10),transparent 70%),radial-gradient(45% 40% at 0% 100%,rgba(16,185,129,.05),transparent 70%);background-size:auto;background-attachment:fixed}
::selection{background:rgba(59,130,246,.38);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(148,163,184,.4)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
a{transition:color .15s}a:hover{color:#A9CCFF}

/* ---- typografie en paginakop ---- */
main{padding:30px 44px 110px;max-width:1280px}
h1{font-size:1.85rem;font-weight:650;letter-spacing:-.025em;line-height:1.15;margin:0 0 8px;color:#fff}
h1+p.sub,p.sub{color:var(--stil);font-size:.98rem;line-height:1.55;max-width:72ch}
h1+p.sub{margin:0 0 26px}
h2{font-size:1.06rem;font-weight:620;letter-spacing:-.012em;color:#fff}
h3{font-weight:600;letter-spacing:-.01em}
b,strong{font-weight:620}

/* ---- zijbalk ---- */
nav{background:linear-gradient(180deg,rgba(13,20,38,.96),rgba(8,13,26,.98));border-right:1px solid var(--lijn);box-shadow:inset -1px 0 0 rgba(255,255,255,.02);padding:20px 14px}
nav .merk{border-bottom:1px solid var(--lijn);padding:4px 8px 18px;margin-bottom:14px}
nav .merk .naam{font-weight:650;letter-spacing:-.01em;line-height:1.25}
nav .merk .sub{color:var(--stil);font-size:.72rem;margin-top:3px;display:inline-flex;align-items:center;gap:6px}
nav .merk .sub::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
nav a.item{position:relative;border-radius:10px;color:var(--tekst2);font-weight:520;transition:background .15s,color .15s}
nav .menu-kort a.item{padding:9px 12px;font-size:.94rem}
nav a.item:hover{background:rgba(148,163,184,.08);color:#fff;text-decoration:none}
nav a.item .ico{opacity:.72;transition:opacity .15s,color .15s}
nav a.item:hover .ico{opacity:1}
nav a.item.actief{color:#fff;background:linear-gradient(90deg,rgba(59,130,246,.20),rgba(59,130,246,.07));box-shadow:inset 0 0 0 1px rgba(96,165,250,.22)}
nav a.item.actief::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#7DB2FF,#3B82F6);box-shadow:0 0 12px rgba(59,130,246,.8)}
nav a.item.actief .ico{opacity:1;color:#9CC8FF}
nav a.item .teller,.item .teller{background:linear-gradient(180deg,#F87171,#DC2626);box-shadow:0 2px 8px -2px rgba(220,38,38,.7);font-size:.7rem;padding:1px 7px;line-height:1.5}
.menu-kort .snel{margin:2px 0 8px 21px;border-left:1px solid var(--lijn);padding-left:8px}
.menu-kort .snel a.item.sub{padding:6px 10px;font-size:.86rem;color:var(--stil)}
.menu-kort .snel a.item.sub:hover{color:#fff}
.menu-kort .snel a.item.sub.actief{color:#fff;background:rgba(59,130,246,.12);box-shadow:none}
.menu-kort .snel a.item.sub.actief::before{left:-9px;top:8px;bottom:8px;width:2px}
.menu-kort .snel a.item.sub.actief .dot{background:var(--accent2);opacity:1;box-shadow:0 0 8px var(--accent)}
.zoekknop{border-radius:12px;border:1px solid var(--lijn2);background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .15s,background .15s;padding:9px 12px}
.zoekknop:hover{background:rgba(255,255,255,.06);border-color:rgba(125,178,255,.4)}
.zoekknop kbd,.zoek-venster kbd{border-color:var(--lijn2);background:rgba(255,255,255,.05);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.nieuwknop>summary{background:linear-gradient(180deg,#4F8FF9,#2F6FE0);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -10px rgba(59,130,246,.9);transition:filter .15s,transform .1s}
.nieuwknop>summary:hover{filter:brightness(1.08)}.nieuwknop>summary:active{transform:translateY(1px)}
.nieuwlijst{border-color:var(--lijn2);background:rgba(15,23,41,.98);backdrop-filter:blur(14px);border-radius:14px;box-shadow:0 24px 50px -16px rgba(0,0,0,.8);padding:6px}
.nieuwlijst a{border:0;background:none;border-radius:9px;padding:9px 12px;font-weight:520}
.nieuwlijst a:hover{background:rgba(59,130,246,.14);border:0;text-decoration:none}
nav .onder{border-top:1px solid var(--lijn);color:var(--stil)}
nav .onder .pwd b{background:linear-gradient(90deg,#9CC8FF,#B9A8FF);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.06em}
/* menu: Digitale collega's met een klein levend lampje (alleen CSS) */
nav .menu-kort a.item[data-tour="groep-Digitale collega's"]::after{content:"";position:absolute;left:26px;top:8px;width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 0 2px #0B1222;animation:menuLeeft 2.4s ease-out infinite}
nav .menu-kort a.item[data-tour="groep-Digitale collega's"] .ico{color:#B9A8FF;opacity:1}
@keyframes menuLeeft{0%{box-shadow:0 0 0 2px #0B1222,0 0 0 2px rgba(52,211,153,.6)}70%{box-shadow:0 0 0 2px #0B1222,0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 2px #0B1222,0 0 0 2px rgba(52,211,153,0)}}

/* ---- tabbladen: rustige segmentbalk ---- */
.tabbalk{gap:2px;width:fit-content;max-width:100%;margin:-6px 0 24px;padding:4px;border:1px solid var(--lijn);border-radius:13px;background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.tabbalk .tab{padding:7px 14px;border-radius:9px;font-size:.88rem;font-weight:560;color:var(--stil);transition:color .15s,background .15s}
.tabbalk .tab:hover{color:#fff;background:rgba(148,163,184,.08);text-decoration:none}
.tabbalk .tab.actief{color:#fff;background:linear-gradient(180deg,rgba(59,130,246,.30),rgba(59,130,246,.18));box-shadow:inset 0 0 0 1px rgba(125,178,255,.35),0 6px 16px -10px rgba(59,130,246,.9)}
.tab-meer-lijst{border-color:var(--lijn2);background:rgba(15,23,41,.98);backdrop-filter:blur(14px)}
.tabs{border-bottom:1px solid var(--lijn)}.tabs .tab{border-radius:9px 9px 0 0;font-weight:540}
.tabs .tab.actief{background:rgba(59,130,246,.12);border-color:rgba(125,178,255,.3)}

/* ---- kaarten, tegels en cijfers ---- */
.kaart,details.sectie{background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%),var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw)}
.kaart{padding:20px 22px}
.kaart[data-href],.kaart.klik,a.kaart{transition:transform .18s var(--ease),border-color .18s,box-shadow .2s}
.kaart[data-href]:hover,.kaart.klik:hover,a.kaart:hover{transform:translateY(-2px);border-color:rgba(125,178,255,.4);box-shadow:var(--schaduw-hoog);text-decoration:none}
.kaart.glans::before{background:linear-gradient(135deg,rgba(125,178,255,.6),rgba(139,124,246,.25) 35%,transparent 60%)}
.kpi .label{font-size:.8rem;color:var(--stil);font-weight:520}
.kpi .waarde{font-size:2.05rem;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1;margin:8px 0 4px}
.kpi .waarde .eenheid{font-size:.95rem;font-weight:520;letter-spacing:0}
.kpi .toel{font-size:.8rem;color:var(--stil)}
div.kpi[data-href]{border-radius:12px;padding:8px 10px;margin:-8px -10px;transition:background .15s}
div.kpi[data-href]:hover{background:rgba(148,163,184,.06)}
.score{letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cijferbalk b{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.balk{height:7px;background:rgba(148,163,184,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,.3)}
.balk i{background:linear-gradient(90deg,#3B82F6,#7DB2FF);box-shadow:0 0 12px -2px rgba(59,130,246,.8)}
.voorstel{border:1px solid var(--lijn);background:rgba(255,255,255,.02);border-radius:14px;transition:border-color .15s,background .15s}
.voorstel:hover{border-color:var(--lijn2);background:rgba(255,255,255,.03)}

/* ---- tabellen ---- */
table{font-size:.9rem;border-collapse:separate;border-spacing:0}
th{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--stil);padding:10px 12px;border-bottom:1px solid var(--lijn2);background:rgba(148,163,184,.04);white-space:nowrap}
thead th:first-child{border-top-left-radius:10px}thead th:last-child{border-top-right-radius:10px}
td{padding:12px;border-bottom:1px solid var(--lijn);font-variant-numeric:tabular-nums;vertical-align:middle}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
tr:hover td,tr[data-href]:hover td,tr.klik-rij:hover td{background:rgba(59,130,246,.07)}
tbody tr:last-child td{border-bottom:0}

/* ---- knoppen ---- */
.knop{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,#4F8FF9,#2F6FE0);color:#fff;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -8px rgba(59,130,246,.8);font-size:.9rem;line-height:1.3;transition:filter .15s,transform .1s,box-shadow .2s,background .15s,border-color .15s}
.knop:hover{filter:brightness(1.08);transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -8px rgba(59,130,246,.9);text-decoration:none;color:#fff}
.knop:active{transform:translateY(1px);filter:brightness(.97)}
.knop:focus-visible{box-shadow:var(--ring),inset 0 1px 0 rgba(255,255,255,.22)}
.knop.stil,.knop.ghost{background:rgba(255,255,255,.04);color:var(--tekst);border:1px solid var(--lijn2);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.knop.stil:hover,.knop.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);filter:none;color:#fff}
.knop.ghost{background:transparent;border-color:transparent;box-shadow:none}
.knop.klein{padding:6px 11px;font-size:.82rem;border-radius:9px}
.knop:disabled{opacity:.5;cursor:not-allowed;filter:none}

/* ---- invoervelden ---- */
input,select,textarea{background:#0B1324;border:1px solid var(--lijn2);border-radius:10px;padding:10px 12px;transition:border-color .15s,box-shadow .15s,background .15s;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
input:hover,select:hover,textarea:hover{border-color:rgba(148,163,184,.34)}
input:focus,select:focus,textarea:focus{border-color:#60A5FA;box-shadow:var(--ring);background:#0D162A}
input::placeholder,textarea::placeholder{color:#5F6B83}
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D98AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
label{font-weight:520;color:var(--tekst2)}
input[type=checkbox],input[type=radio]{box-shadow:none;width:16px;height:16px}
.met-eenheid{background:#0B1324;border-color:var(--lijn2)}

/* ---- labels, meldingen, lege staten ---- */
.pil{border:1px solid transparent;padding:2px 9px;font-weight:600;letter-spacing:.01em;line-height:1.5}
.melding{border-radius:12px;border:1px solid rgba(52,211,153,.24);background:linear-gradient(90deg,rgba(52,211,153,.12),rgba(52,211,153,.04));box-shadow:inset 3px 0 0 var(--groen);padding:12px 16px 12px 18px;color:#A7F3D0}
.melding.fout{border-color:rgba(248,113,113,.28);background:linear-gradient(90deg,rgba(248,113,113,.13),rgba(248,113,113,.04));box-shadow:inset 3px 0 0 var(--rood);color:#FECACA}
div.leeg,p.leeg{position:relative;padding:92px 24px 30px;border:1px dashed var(--lijn2);border-radius:var(--r);color:var(--stil);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237DB2FF'/%3E%3Cstop offset='1' stop-color='%238B7CF6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='30' y='10' width='60' height='44' rx='9' fill='%23131D33' stroke='url(%23a)' stroke-opacity='.55'/%3E%3Crect x='40' y='22' width='26' height='4' rx='2' fill='%237DB2FF' fill-opacity='.55'/%3E%3Crect x='40' y='31' width='40' height='3' rx='1.5' fill='%238D98AF' fill-opacity='.35'/%3E%3Crect x='40' y='38' width='32' height='3' rx='1.5' fill='%238D98AF' fill-opacity='.25'/%3E%3Ccircle cx='92' cy='14' r='7' fill='%23131D33' stroke='%2334D399' stroke-opacity='.7'/%3E%3Cpath d='M89 14l2 2 4-4' fill='none' stroke='%2334D399' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='46' r='2' fill='%237DB2FF' fill-opacity='.5'/%3E%3Ccircle cx='104' cy='44' r='1.5' fill='%238B7CF6' fill-opacity='.6'/%3E%3C/svg%3E"),radial-gradient(60% 80% at 50% 0%,rgba(59,130,246,.08),transparent 70%);
  background-repeat:no-repeat;background-position:center 20px,center;background-size:120px 64px,auto}
.skelet{position:relative;overflow:hidden;background:rgba(148,163,184,.1);border-radius:8px;min-height:12px}
.skelet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:skelet 1.4s ease-in-out infinite;transform:translateX(-100%)}
@keyframes skelet{to{transform:translateX(100%)}}

/* ---- uitklapbare secties ---- */
details.sectie{margin:0 0 12px}
details.sectie>summary{padding:15px 20px;font-size:1rem;font-weight:620;letter-spacing:-.01em;transition:background .15s;border-radius:var(--r)}
details.sectie>summary:hover{background:rgba(148,163,184,.05)}
details.sectie[open]>summary{border-bottom:1px solid var(--lijn);border-radius:var(--r) var(--r) 0 0}
details.sectie>.instel-inhoud{padding:16px 20px 20px}

/* ---- grafieken ---- */
.spark .lijn{stroke:#60A5FA;filter:drop-shadow(0 4px 8px rgba(59,130,246,.45))}
.donut-midden{font-weight:650;letter-spacing:-.02em}

/* ---- zoekvenster ---- */
.zoek-achter{background:rgba(3,6,14,.7);backdrop-filter:blur(6px)}
.zoek-venster{border:1px solid var(--lijn2);border-radius:18px;background:rgba(15,23,41,.97);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset}
.zoek-lijst a.gekozen,.zoek-lijst a:hover{background:rgba(59,130,246,.16);box-shadow:inset 0 0 0 1px rgba(125,178,255,.25)}

/* ---- telefoon ---- */
@media(max-width:900px){
  nav{background:rgba(8,13,26,.9);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-right:0;border-bottom:1px solid var(--lijn);padding:10px 16px}
  nav a.item.actief::before{left:-6px}
  main{padding:20px 16px 110px}
  h1{font-size:1.5rem}
  .tabbalk{width:auto;margin:-4px 0 18px;border-radius:12px}
  .kaart{padding:16px}
  .menuknop{border-color:var(--lijn2);background:rgba(255,255,255,.04)}
  nav .merk{border:0;padding:4px 0;margin:0}nav .merk .naam{font-size:.95rem}nav .merk .sub{margin-top:1px}
  nav .zoekknop{margin:6px 0 6px}nav .nieuwknop{margin:0}
}
@media(max-width:560px){.kpi .waarde{font-size:1.5rem;white-space:nowrap}.kpi .waarde .eenheid{font-size:.85rem}}

/* =====================================================================================
   Digitale collega's: persona's (views/_persona.ejs) en de pagina /collegas (punt 271)
   Staat via data-staat op een omringend element: werkt · actief · rust · aandacht
   ===================================================================================== */
[data-pz="receptionist"],.col [data-code="receptionist"]{--pz1:#BFDBFE;--pz2:#3B82F6;--pz3:#172F6E}
[data-pz="planner"],.col [data-code="planner"]{--pz1:#DDD6FE;--pz2:#8B5CF6;--pz3:#33186F}
[data-pz="administratie"],.col [data-code="administratie"]{--pz1:#A7F3D0;--pz2:#10B981;--pz3:#053F33}
[data-pz="inkoper"],.col [data-code="inkoper"]{--pz1:#FDE68A;--pz2:#F59E0B;--pz3:#6B3208}
[data-pz="marketing"],.col [data-code="marketing"]{--pz1:#FBCFE8;--pz2:#EC4899;--pz3:#6E1340}
[data-pz="bewaker"],.col [data-code="bewaker"]{--pz1:#A5F3FC;--pz2:#06B6D4;--pz3:#0B3E4A}
[data-pz="assistent"],.col [data-code="assistent"]{--pz1:#C7D2FE;--pz2:#6366F1;--pz3:#1E1B6B}
.pz{--pz-s:56px;position:relative;display:inline-block;width:var(--pz-s);height:var(--pz-s);flex:0 0 var(--pz-s);line-height:0}
.pz svg{width:100%;height:100%;overflow:visible}
.pz-groot{--pz-s:84px}.pz-klein{--pz-s:36px}
.pz-s1{stop-color:var(--pz1)}.pz-s2{stop-color:var(--pz2)}.pz-s3{stop-color:var(--pz3)}
.pz .pz-d{fill:var(--pz1)}
.pz-halo,.pz-ring,.pz-ring2,.pz-deeltjes,.pz-kern{transform-box:view-box;transform-origin:48px 48px}
.pz-kern{animation:pzAdem 5s ease-in-out infinite}
.pz-ring{animation:pzDraai 48s linear infinite}
.pz-ring2{animation:pzDraai 22s linear infinite reverse;opacity:.55}
.pz-halo{animation:pzHalo 5s ease-in-out infinite;opacity:.75}
.pz-deeltjes{opacity:0;transition:opacity .4s}
.pz-scan{opacity:0}
.pz-glyph{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.pz-stip{fill:#64748B;stroke:#0B1222;stroke-width:3.5;transition:fill .3s}
[data-staat="actief"] .pz-stip{fill:#60A5FA}
/* aan het werk: draaiende baan, deeltjes in een baan, scanlijn, heldere gloed */
[data-staat="werkt"] .pz-stip{fill:#34D399;animation:pzStip 1.2s ease-in-out infinite}
[data-staat="werkt"] .pz-ring{animation-duration:7s}
[data-staat="werkt"] .pz-ring2{animation-duration:2.6s;opacity:1}
[data-staat="werkt"] .pz-deeltjes{opacity:1;animation:pzDraai 3.2s linear infinite}
[data-staat="werkt"] .pz-scan{opacity:1;animation:pzScan 2.2s cubic-bezier(.45,0,.55,1) infinite}
[data-staat="werkt"] .pz-halo{opacity:1;animation-duration:1.8s}
[data-staat="werkt"] .pz-kern{animation-duration:1.8s}
/* rust: gedimd en heel traag */
[data-staat="rust"] .pz svg{filter:saturate(.55) brightness(.88)}
[data-staat="rust"] .pz-kern{animation-duration:8s}
[data-staat="rust"] .pz-halo{opacity:.3;animation-duration:8s}
[data-staat="rust"] .pz-ring2{opacity:.25}
/* vraagt aandacht: zacht oranje pulseren */
[data-staat="aandacht"] .pz-stip{fill:#F5A524;animation:pzStip 1.6s ease-in-out infinite}
[data-staat="aandacht"] .pz::before{content:"";position:absolute;inset:8%;border-radius:50%;animation:pzAandacht 2.2s ease-out infinite}
[data-staat="aandacht"] .pz-ring circle{stroke:#F5A524}
@keyframes pzAdem{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes pzHalo{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.04);opacity:.95}}
@keyframes pzDraai{to{transform:rotate(360deg)}}
@keyframes pzScan{0%{transform:translateY(-6px)}100%{transform:translateY(74px)}}
@keyframes pzStip{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes pzAandacht{0%{box-shadow:0 0 0 0 rgba(245,165,36,.5)}100%{box-shadow:0 0 0 14px rgba(245,165,36,0)}}
.pz-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* pagina */
.col-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;padding:28px 30px;margin:0 0 22px;border-radius:var(--r-l);border:1px solid rgba(125,178,255,.18);overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 120% at 0% 0%,rgba(59,130,246,.22),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(139,92,246,.18),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),transparent),#0C1428;box-shadow:var(--schaduw-hoog)}
.col-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(80% 90% at 30% 20%,#000,transparent 75%);mask-image:radial-gradient(80% 90% at 30% 20%,#000,transparent 75%)}
.col-hero h1{font-size:2.1rem;margin:12px 0 8px;background:linear-gradient(180deg,#fff,#C7D7F5);-webkit-background-clip:text;background-clip:text;color:transparent}
.col-hero .sub{margin:0 0 18px}
.col-oog{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#6EE7B7;padding:4px 10px 4px 9px;border-radius:999px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25)}
.col-oog-stil{color:var(--stil);font-weight:500;letter-spacing:.02em;text-transform:none}
.col-livepunt,.col-live i{width:7px;height:7px;border-radius:50%;background:#34D399;animation:menuLeeft 2s ease-out infinite}
.col-team{display:flex;align-items:center;padding-left:6px}
.col-team a{margin-left:-6px;border-radius:50%;transition:transform .2s var(--ease)}
.col-team a:hover{transform:translateY(-3px) scale(1.06);z-index:2}
.col-team .pz{--pz-s:44px}
.col-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.col-stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;border:1px solid var(--lijn);background:rgba(7,12,24,.45);color:inherit;transition:border-color .15s,transform .18s var(--ease),background .15s}
.col-stat:hover{text-decoration:none;border-color:rgba(125,178,255,.4);transform:translateY(-2px);background:rgba(7,12,24,.6);color:inherit}
.col-stat-l{font-size:.74rem;color:var(--stil);font-weight:520}
.col-stat b{font-size:1.9rem;font-weight:700;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums;color:#fff}
.col-stat small{font-size:.76rem;color:var(--stil)}
.col-stat-accent{border-color:rgba(52,211,153,.32);background:linear-gradient(160deg,rgba(52,211,153,.16),rgba(7,12,24,.5) 70%)}
.col-stat-accent b{background:linear-gradient(180deg,#D1FAE5,#34D399);-webkit-background-clip:text;background-clip:text;color:transparent}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.col-kaart{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;color:inherit;text-decoration:none;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--pz2) 22%,rgba(148,163,184,.12));
  background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--pz2) 14%,transparent),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--kaart);
  box-shadow:var(--schaduw);transition:transform .22s var(--ease),border-color .22s,box-shadow .25s}
.col-kaart:hover{transform:translateY(-3px);text-decoration:none;color:inherit;border-color:color-mix(in srgb,var(--pz2) 50%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 28px 50px -26px color-mix(in srgb,var(--pz2) 70%,transparent)}
.col-kaart[data-staat="werkt"]{border-color:color-mix(in srgb,var(--pz2) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--pz2) 22%,transparent),0 24px 50px -24px color-mix(in srgb,var(--pz2) 80%,transparent)}
.col-kaart[data-staat="werkt"]::before{content:"";position:absolute;inset:-70%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 68%,color-mix(in srgb,var(--pz2) 55%,transparent) 84%,transparent 92%);animation:pzDraai 5s linear infinite}
.col-kaart[data-staat="werkt"]::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:17px;background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--pz2) 16%,transparent),transparent 60%),var(--kaart)}
.col-kaart[data-staat="aandacht"]{border-color:rgba(245,165,36,.45);box-shadow:0 0 0 1px rgba(245,165,36,.15),0 22px 46px -26px rgba(245,165,36,.6)}
.col-kaart[data-staat="rust"]{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),var(--kaart);border-color:var(--lijn)}
.col-kop{display:flex;align-items:center;gap:14px}
.col-id{flex:1;min-width:0}
.col-naam{font-size:1.06rem;font-weight:650;letter-spacing:-.015em;line-height:1.25;color:#fff}
.col-status{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:.75rem;font-weight:560;padding:3px 10px 3px 8px;border-radius:999px;color:var(--stil);background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.16)}
.col-stip{width:7px;height:7px;border-radius:50%;background:currentColor}
[data-staat="actief"] .col-status{color:#9CC8FF;background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.3)}
[data-staat="werkt"] .col-status{color:#6EE7B7;background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.35)}
[data-staat="werkt"] .col-stip{box-shadow:0 0 8px #34D399;animation:pzStip 1s ease-in-out infinite}
[data-staat="aandacht"] .col-status{color:#FCD38D;background:rgba(245,165,36,.10);border-color:rgba(245,165,36,.35)}
.col-pa .col-status{color:#C7D2FE;background:rgba(99,102,241,.12);border-color:rgba(129,140,248,.32)}
.col-typen{display:none;gap:3px}.col-kaart[data-staat="werkt"] .col-typen{display:inline-flex}
.col-typen i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:colStip 1.1s infinite}.col-typen i:nth-child(2){animation-delay:.15s}.col-typen i:nth-child(3){animation-delay:.3s}
@keyframes colStip{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.col-pijl{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--stil);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:transform .2s var(--ease),opacity .2s,stroke .2s;align-self:flex-start;margin-top:6px}
.col-kaart:hover .col-pijl{opacity:1;stroke:var(--pz1);transform:translateX(3px)}
.col-taak{margin:0;font-size:.86rem;line-height:1.5;color:var(--tekst2)}
.col-meters{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px;border-radius:14px;background:rgba(5,9,20,.35);border:1px solid var(--lijn)}
.col-ring{position:relative;width:78px;height:78px}
.col-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.col-ring circle{fill:none;stroke-width:5}
.col-ring-baan{stroke:rgba(148,163,184,.13)}
.col-ring-waarde{stroke:var(--pz2);stroke-linecap:round;stroke-dasharray:calc(var(--p,0) * 1) 100;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--pz2) 70%,transparent));transition:stroke-dasharray .8s var(--ease)}
.col-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.col-ring-in b{font-size:1.25rem;font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.col-ring-in small{font-size:.6rem;color:var(--stil);margin-top:2px}
.col-spark{min-width:0}
.col-spark svg{display:block;width:100%;height:44px;overflow:visible}
.col-spark-vlak{fill:color-mix(in srgb,var(--pz2) 20%,transparent)}
.col-spark-lijn{fill:none;stroke:var(--pz1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
[data-staat="rust"] .col-spark-lijn{stroke:#64748B}[data-staat="rust"] .col-spark-vlak{fill:rgba(100,116,139,.12)}[data-staat="rust"] .col-ring-waarde{stroke:#64748B;filter:none}
.col-spark-onder{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:.72rem;color:var(--stil)}
.col-spark-onder b{color:#fff;font-variant-numeric:tabular-nums}
.col-uren{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--tekst2)}
.col-uren svg{width:16px;height:16px;fill:none;stroke:#34D399;stroke-width:2;stroke-linecap:round}
.col-uren b{font-size:1.02rem;color:#6EE7B7;font-variant-numeric:tabular-nums}
.col-laatste{display:flex;align-items:flex-start;gap:9px;margin-top:auto;padding-top:12px;border-top:1px solid var(--lijn);font-size:.8rem;color:var(--tekst2);line-height:1.45}
.col-laatste-punt{flex:0 0 7px;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--pz2);box-shadow:0 0 0 3px color-mix(in srgb,var(--pz2) 18%,transparent)}
[data-staat="werkt"] .col-laatste-punt{animation:menuLeeft 1.6s ease-out infinite;background:#34D399}
[data-staat="rust"] .col-laatste-punt{background:#475569;box-shadow:none}
.col-laatste-tekst{flex:1;min-width:0}
.col-laatste time{flex:0 0 auto;color:var(--stil);font-size:.74rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.col-pa{background:radial-gradient(90% 70% at 100% 0%,rgba(99,102,241,.22),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(34,211,238,.10),transparent 60%),var(--kaart)}
.col-pa-vraag{display:flex;flex-wrap:wrap;gap:6px}
.col-pa-vraag span{font-size:.78rem;padding:6px 11px;border-radius:999px;border:1px solid rgba(129,140,248,.28);background:rgba(99,102,241,.08);color:#C7D2FE}
.col-pa-knop{margin-top:auto;align-self:flex-start;font-size:.86rem;font-weight:620;color:#fff;padding:8px 14px;border-radius:10px;background:linear-gradient(180deg,#6D72F6,#4F46E5);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px -10px rgba(99,102,241,.9)}
/* live tijdlijn */
.col-feed{margin-top:22px;padding:0;overflow:hidden}
.col-feed-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px;border-bottom:1px solid var(--lijn);background:rgba(255,255,255,.015)}
.col-feed-kop h2{margin:0}
.col-live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#6EE7B7;padding:3px 10px;border-radius:999px;border:1px solid rgba(52,211,153,.28);background:rgba(52,211,153,.07)}
.col-tijd{list-style:none;margin:0;padding:6px 10px 12px;max-height:560px;overflow:auto}
.col-tijd li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;line-height:1.4;transition:background .15s}
.col-tijd li[data-iso]:hover{background:rgba(148,163,184,.06)}
.col-tijd .col-dag{position:sticky;top:0;z-index:1;padding:12px 12px 6px;font-size:.7rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--stil);background:linear-gradient(var(--kaart) 70%,transparent);border-radius:0}
.col-f-ava{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 28%,var(--pz1),var(--pz2) 50%,var(--pz3));box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 4px 12px -4px var(--pz2)}
.col-f-ava svg{width:16px;height:16px}
.col-f-tekst{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:.88rem}
.col-f-tekst .wie{font-weight:620;font-size:.84rem}
.col-f-tekst a{color:var(--tekst)}.col-f-tekst a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.col-tijd li[data-wie="receptionist"] .wie{color:#93C5FD}.col-tijd li[data-wie="planner"] .wie{color:#C4B5FD}.col-tijd li[data-wie="administratie"] .wie{color:#6EE7B7}.col-tijd li[data-wie="inkoper"] .wie{color:#FCD34D}.col-tijd li[data-wie="marketing"] .wie{color:#F9A8D4}.col-tijd li[data-wie="bewaker"] .wie{color:#67E8F9}
.col-tijd time{flex:0 0 auto;font-size:.76rem;color:var(--stil);font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:7px;background:rgba(148,163,184,.07)}
.col-tijd li.nieuw{animation:colNieuw 1.4s var(--ease)}
.col-leeg{color:var(--stil);padding:24px 12px!important}
@keyframes colNieuw{from{background:rgba(59,130,246,.2);transform:translateX(-8px);opacity:0}to{background:transparent;transform:none;opacity:1}}
.col-voet{font-size:.78rem;color:var(--stil);margin-top:14px}
@media(max-width:1100px){.col-hero{grid-template-columns:1fr}}
@media(max-width:600px){.col-hero{padding:20px 18px;gap:18px}.col-hero h1{font-size:1.6rem}.col-stat b{font-size:1.5rem}.col-grid{grid-template-columns:1fr}.col-kaart{padding:16px}.col-meters{gap:12px;padding:12px}.col-tijd li{align-items:flex-start}.col-tijd time{margin-top:2px}.pz-groot{--pz-s:64px}.col-team .pz{--pz-s:38px}}
/* Home: het team als rij persona's */
.col-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.col-mini a{font-size:.85rem;display:inline-flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border:1px solid var(--lijn);border-radius:999px;color:inherit;text-decoration:none;background:rgba(255,255,255,.025);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.col-mini a:hover{border-color:rgba(125,178,255,.4);background:rgba(59,130,246,.07);transform:translateY(-1px);text-decoration:none;color:inherit}
.col-mini .pz{--pz-s:30px}
.col-mini-naam{display:flex;flex-direction:column;font-size:.8rem;font-weight:600;line-height:1.2}
.col-mini-naam small{font-size:.68rem;font-weight:500;color:var(--stil)}
.col-mini a[data-staat="werkt"]{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.06)}.col-mini a[data-staat="werkt"] small{color:#6EE7B7}
.col-mini a[data-staat="aandacht"]{border-color:rgba(245,165,36,.4)}.col-mini a[data-staat="aandacht"] small{color:#FCD38D}
.col-mini a b{font-size:.7rem;font-weight:650;min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;background:rgba(125,178,255,.14);color:#9CC8FF;font-variant-numeric:tabular-nums}
.col-mini a.col-mini-alles{border-color:transparent;background:none;color:var(--accent2);padding-left:8px}
@media (prefers-reduced-motion:reduce){.pz *,.pz::before,.col *,.col *::before,.col *::after,.col-mini *,nav .menu-kort a.item::after{animation:none!important;transition:none!important}[data-staat="werkt"] .pz-deeltjes{opacity:1}}

/* =====================================================================================
   ONTWERP 2027, deel 2 (punt 274): dezelfde look op alle overige schermen (dashboard, app,
   Mijn omgeving, Corvo-beheer). Alleen gedeelde opmaak; geen functionaliteit.
   ===================================================================================== */
/* paginatitel: zachte verloop in het wit, zoals Digitale collega's (alleen titels met platte tekst) */
main h1:not(:has(*)){background:linear-gradient(180deg,#fff 35%,#C7D7F5);-webkit-background-clip:text;background-clip:text;color:transparent}
main h1,main h2{text-wrap:balance}
main>h2:not(.kaart h2){display:flex;align-items:center;gap:10px}
main>h2:not(.kaart h2)::before{content:"";width:4px;height:16px;border-radius:3px;background:linear-gradient(180deg,#7DB2FF,#3B82F6);box-shadow:0 0 10px rgba(59,130,246,.55);flex:none}
.kaart>h2:first-child,.kaart>h3:first-child{margin-top:0}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--lijn2),transparent);margin:20px 0}
code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.86em;padding:1px 6px;border-radius:6px;background:rgba(148,163,184,.1);border:1px solid var(--lijn);color:#C7D7F5}
pre{background:#0A1222;border:1px solid var(--lijn2);border-radius:var(--r-m);padding:14px 16px;overflow:auto;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}pre code{background:none;border:0;padding:0}
mark{background:rgba(245,165,36,.22);color:#FDE3AE;border-radius:4px;padding:0 3px}

/* uitklappers (<details> zonder eigen klasse): pijltje in plaats van het driehoekje van de browser */
main details:not([class])>summary:not([class]):not([style*="list-style:none"]),main details.kaart>summary:not([class]):not([style*="list-style:none"]),main details>summary.uitleg{list-style:none;cursor:pointer;transition:color .15s}
main details:not([class])>summary:not([class])::-webkit-details-marker,main details.kaart>summary:not([class])::-webkit-details-marker,main details>summary.uitleg::-webkit-details-marker{display:none}
main details:not([class])>summary:not([class]):not([style*="list-style:none"])::before,main details.kaart>summary:not([class]):not([style*="list-style:none"])::before,main details>summary.uitleg::before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 2px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.55;transition:transform .2s var(--ease),opacity .15s;vertical-align:middle;flex:none}
main details[open]:not([class])>summary:not([class])::before,main details.kaart[open]>summary:not([class])::before,main details[open]>summary.uitleg::before{transform:rotate(45deg);margin-bottom:4px}
main details:not([class])>summary:not([class]):hover,main details.kaart>summary:not([class]):hover{color:#fff}
main details:not([class])>summary:not([class]):hover::before,main details.kaart>summary:not([class]):hover::before{opacity:1}
main details.kaart>summary:not([class]){font-weight:600;letter-spacing:-.01em}
main details.kaart[open]>summary:not([class]){margin-bottom:10px}

/* lege staat met eigen (kleine) binnenruimte: geen tekening, die past er niet in */
div.leeg[style*="padding"],p.leeg[style*="padding"]{background-image:radial-gradient(60% 80% at 50% 0%,rgba(59,130,246,.07),transparent 70%)}

/* kaarten met een signaalkleur (let op / fout / goed): zachte gloed in plaats van alleen een harde rand */
.kaart:is([style*="--oranje"],[style*="#FBBF24"],[style*="#F5A524"],[style*="245,165,36"]){background:radial-gradient(120% 80% at 0% 0%,rgba(245,165,36,.09),transparent 60%),var(--kaart);box-shadow:var(--schaduw),0 18px 40px -28px rgba(245,165,36,.6)}
.kaart:is([style*="--rood"],[style*="255,107,107"],[style*="248,113,113"]){background:radial-gradient(120% 80% at 0% 0%,rgba(248,113,113,.09),transparent 60%),var(--kaart);box-shadow:var(--schaduw),0 18px 40px -28px rgba(248,113,113,.6)}
.kaart:is([style*="--groen"],[style*="52,211,153"]){background:radial-gradient(120% 80% at 0% 0%,rgba(52,211,153,.08),transparent 60%),var(--kaart)}

/* kaart in een kaart: rustiger vlak, geen dubbele schaduw */
.kaart .kaart:not(.glans){background:rgba(255,255,255,.022);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);border-color:var(--lijn)}
.kaart .kaart:not(.glans):is([data-href],.klik,a):hover{background:rgba(59,130,246,.06)}

/* tabellen die niet in een kaart staan: zelf een kaart, en op de telefoon zijwaarts schuiven */
main>table,main>form>table,main>div:not([class])>table,main>section>table{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 40%),var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);overflow:hidden}
main>table th:first-child,main>form>table th:first-child,main>div:not([class])>table th:first-child,main>table td:first-child,main>form>table td:first-child,main>div:not([class])>table td:first-child{padding-left:16px}
tfoot td,tr.totaal td{font-weight:650;color:#fff;border-top:1px solid var(--lijn2);background:rgba(148,163,184,.05)}

/* bestand kiezen en andere velden */
input[type=file]{padding:8px;border-style:dashed;background:rgba(255,255,255,.02);color:var(--stil);cursor:pointer;font-size:.88rem;max-width:100%}
input[type=file]:hover{border-color:rgba(125,178,255,.5);background:rgba(59,130,246,.05)}
input[type=file]::file-selector-button{margin-right:12px;padding:7px 13px;border-radius:9px;border:1px solid var(--lijn2);background:rgba(255,255,255,.06);color:var(--tekst);font:inherit;font-weight:600;font-size:.84rem;cursor:pointer;transition:background .15s,border-color .15s}
input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.1);border-color:rgba(148,163,184,.4)}
input[type=range]{accent-color:var(--accent);box-shadow:none;background:none;border:0;padding:0}
input[type=color]{padding:3px;height:40px;cursor:pointer}
textarea{line-height:1.5;resize:vertical}
fieldset{border:1px solid var(--lijn);border-radius:var(--r-m);padding:14px 16px 16px;margin:0 0 14px}
legend{padding:0 8px;font-size:.78rem;font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--stil)}

/* knoppengroepen en schakelaars */
.segment{border-color:var(--lijn2);border-radius:11px;background:rgba(255,255,255,.025);padding:3px;gap:2px}
.segment a{border-radius:8px;transition:background .15s,color .15s}.segment a:hover{color:#fff;background:rgba(148,163,184,.08)}
.segment a.actief{background:linear-gradient(180deg,rgba(59,130,246,.34),rgba(59,130,246,.2));box-shadow:inset 0 0 0 1px rgba(125,178,255,.35)}
.ad-schakel{background:rgba(255,255,255,.03);border-color:var(--lijn2)}
.inklap-knoppen .knop{background:transparent;border-color:var(--lijn);box-shadow:none;color:var(--stil);font-weight:560}
.inklap-knoppen .knop:hover{color:#fff;background:rgba(255,255,255,.05)}

/* tabbladen binnen een pagina (klantkaart e.d.): lichtgevende onderstreping */
.tabs{gap:2px}
.tabs .tab{position:relative;border:0;background:none;border-radius:9px 9px 0 0;margin-bottom:0;transition:color .15s,background .15s}
.tabs .tab:hover{background:rgba(148,163,184,.06);text-decoration:none;color:#fff}
.tabs .tab.actief{background:linear-gradient(180deg,transparent,rgba(59,130,246,.10));color:#fff;border:0}
.tabs .tab.actief::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#7DB2FF,#3B82F6);box-shadow:0 0 10px rgba(59,130,246,.7)}
@media(max-width:700px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}.tabs .tab{white-space:nowrap;flex:none}}

/* opslaan onderaan (Instellingen): glazen balk */
.opslaan-balk{background:linear-gradient(to top,rgba(7,12,24,.96) 65%,rgba(7,12,24,0))!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* meldingen */
.melding.letop,.melding.let-op,.melding.oranje{border-color:rgba(245,165,36,.3);background:linear-gradient(90deg,rgba(245,165,36,.13),rgba(245,165,36,.04));box-shadow:inset 3px 0 0 var(--oranje);color:#FDE3AE}
.melding.info,.melding.blauw{border-color:rgba(96,165,250,.3);background:linear-gradient(90deg,rgba(59,130,246,.13),rgba(59,130,246,.04));box-shadow:inset 3px 0 0 var(--accent);color:#C9DDFF}

/* inlogpagina en losse pagina's (fout, toegang) */
.login .kaart{border-radius:var(--r-l);box-shadow:var(--schaduw-hoog);background:radial-gradient(90% 60% at 0% 0%,rgba(59,130,246,.14),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--kaart)}
.login h1:not(:has(*)){background:linear-gradient(180deg,#fff 35%,#C7D7F5);-webkit-background-clip:text;background-clip:text;color:transparent}

/* medewerkersapp en Mijn omgeving: bovenbalk als een echte app */
.app-balk{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-16px -16px 16px;padding:12px 16px;background:rgba(8,13,26,.84);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--lijn)}
main[data-omgeving="mijn"] .app-balk{margin:-24px -24px 18px;padding:14px 24px}
.app-balk-merk{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 160px}
.app-balk-merk img{height:36px;width:auto;max-width:96px;border-radius:9px;object-fit:contain}
.app-balk-letter{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 25%,#9CC8FF,#3B82F6 55%,#1E3A8A);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 6px 16px -6px rgba(59,130,246,.8)}
.app-balk-tekst{min-width:0}
.app-balk-naam{font-weight:650;letter-spacing:-.01em;line-height:1.25;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-balk-sub{font-size:.78rem;color:var(--stil);margin-top:1px}
.app-balk-sub a{color:var(--accent2)}
.app-balk-acties{gap:6px;flex-wrap:nowrap}
.app-balk form{margin:0}
.app-links{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 16px}
.app-links a{font-size:.84rem;font-weight:560;padding:6px 12px;border-radius:999px;border:1px solid var(--lijn2);background:rgba(255,255,255,.03);color:var(--tekst2);transition:border-color .15s,background .15s,color .15s}
.app-links a:hover{text-decoration:none;color:#fff;border-color:rgba(125,178,255,.4);background:rgba(59,130,246,.08)}
@media(max-width:420px){.app-balk-acties .knop.klein{padding:6px 9px}}

/* telefoon: losse tabellen schuiven binnen hun kader, nooit de hele pagina */
@media(max-width:700px){
  main>table,main>form>table,main>div:not([class])>table,main>section>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  main h1{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){main details>summary::before{transition:none}}

/* =====================================================================================
   Afwerking (punt 278): grafieken, getallen, paginakop, tabellen, signalen, menu, toasts.
   Alleen opmaak. 8px-raster; cijfers met tabular-nums; respecteert "minder beweging".
   ===================================================================================== */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
svg.ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.knop svg.ico{width:15px;height:15px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* ---- getallen ---- */
.kpi .waarde,.score,table,.gf,.delta,.doelen,.adv-bedrag{font-variant-numeric:tabular-nums}
td.geldkol,th.geldkol{text-align:right;white-space:nowrap}td.r,th.r{text-align:right}
.kpi .toel+.toel{margin-top:2px}

/* ---- deltalabel en trendlijn in tegels ---- */
.delta{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:999px;font-size:.74rem;font-weight:650;line-height:1.6;vertical-align:1px}
.delta.goed{background:rgba(52,211,153,.14);color:#6EE7B7}
.delta.slecht{background:rgba(248,113,113,.14);color:#FCA5A5}
.delta.gelijk{background:rgba(148,163,184,.12);color:#AEB8CC}
.delta-t{color:var(--stil)}
.kpi .sparklijn{display:block;width:100%;height:32px;margin-top:12px;color:#60A5FA;overflow:visible}
.sparklijn .sl-lijn{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 2px 6px rgba(59,130,246,.55))}
.sparklijn .sl-punt{fill:none;stroke:#BFDBFE;stroke-width:6;stroke-linecap:round}

/* ---- gedeelde grafiek (views/_grafiek.ejs) ---- */
.gf{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:var(--gf-h,180px) auto;gap:8px 10px;margin:8px 0 0}
.gf-y{position:relative;min-width:2.6em;font-size:.72rem;color:var(--stil);text-align:right}
.gf-y span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap;line-height:1}
.gf-vlak{position:relative;min-width:0}
.gf-vlak svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gf-raster{stroke:rgba(148,163,184,.10);stroke-width:1;stroke-dasharray:3 4}.gf-raster.nul{stroke:rgba(148,163,184,.28);stroke-dasharray:none}
.gf-lijn{fill:none;stroke:#60A5FA;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 6px 10px rgba(59,130,246,.55))}
.gf-hits{position:absolute;inset:0}
.gf-hit{position:absolute;top:0;bottom:0;transform:translateX(-50%);cursor:default}
.gf-hit::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(125,178,255,.45));opacity:0;transition:opacity .15s}
.gf-t-staaf .gf-hit::before{display:none}
.gf-hit::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(var(--y) + 14px);transform:translate(-50%,4px);padding:6px 10px;border-radius:8px;background:rgba(15,23,41,.97);border:1px solid var(--lijn2);box-shadow:0 12px 28px -12px rgba(0,0,0,.9);color:var(--tekst);font-size:.78rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:3}
.gf-hit.gf-l::after{left:0;transform:translate(0,4px)}.gf-hit.gf-r::after{left:auto;right:0;transform:translate(0,4px)}
.gf-hit:hover::before,.gf-hit:hover::after{opacity:1}.gf-hit:hover::after{transform:translate(-50%,0)}
.gf-hit.gf-l:hover::after,.gf-hit.gf-r:hover::after{transform:translate(0,0)}
.gf-punt{position:absolute;left:50%;bottom:var(--y);width:10px;height:10px;border-radius:50%;transform:translate(-50%,50%);background:#BFDBFE;border:2px solid #3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.18),0 0 14px rgba(96,165,250,.8);opacity:0;transition:opacity .15s}
.gf-hit:hover .gf-punt,.gf-hit.laatste .gf-punt{opacity:1}
.gf-staaf{position:absolute;left:18%;right:18%;bottom:0;height:var(--y);min-height:2px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7DB2FF,#2F6FE0);box-shadow:0 0 18px -6px rgba(59,130,246,.9);transition:filter .15s}
.gf-staaf.nul{background:rgba(148,163,184,.22);box-shadow:none}
.gf-hit:hover .gf-staaf{filter:brightness(1.18)}
.gf-hit.laatste .gf-staaf{background:linear-gradient(180deg,#BFDBFE,#3B82F6)}
.gf-x{grid-column:2;position:relative;height:1.2em;font-size:.72rem;color:var(--stil)}
.gf-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gf-x span.gf-l{transform:none}.gf-x span.gf-r{transform:translateX(-100%)}
.gf-leeg{padding:24px}
@media(max-width:560px){.gf{gap:6px 6px}.gf-y{font-size:.68rem}.gf-x{font-size:.68rem}}

/* ---- paginakop ---- */
.paginakop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 0 24px}
.paginakop .pk-tekst{min-width:0;flex:1 1 320px}
.paginakop .pk-titel{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.paginakop h1{margin:0}
.paginakop .sub{margin:8px 0 0;max-width:68ch}
.paginakop .pk-acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pk-meer{position:relative}
.pk-meer>summary{list-style:none;cursor:pointer}.pk-meer>summary::-webkit-details-marker{display:none}
.pk-meer>summary::before{display:none!important}
.pk-meer-lijst,.rijmenu-lijst{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;padding:6px;border-radius:12px;background:rgba(15,23,41,.98);border:1px solid var(--lijn2);box-shadow:0 24px 48px -20px rgba(0,0,0,.95);display:flex;flex-direction:column}
.pk-meer-lijst a,.rijmenu-lijst a{padding:8px 12px;border-radius:8px;color:var(--tekst);font-size:.88rem;text-decoration:none;white-space:nowrap}
.pk-meer-lijst a:hover,.rijmenu-lijst a:hover{background:rgba(59,130,246,.14);text-decoration:none}
@media(max-width:640px){.paginakop{flex-direction:column;align-items:stretch;gap:16px}.paginakop .pk-tekst{flex:none}.paginakop .pk-acties{justify-content:flex-start}.pk-meer-lijst{right:auto;left:0}}

/* ---- tabellen: kop vast, rustige regels, acties achter ⋯ ---- */
main table thead th{position:sticky;top:0;z-index:2;background:#121B30}
main tbody tr{transition:background .12s}
tr.rij-laat td:first-child{box-shadow:inset 3px 0 0 rgba(248,113,113,.7)}
th.acties,td.acties{width:1%;white-space:nowrap;text-align:right}
.rij-acties{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.rijmenu{position:relative;display:inline-block}
.rijmenu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--lijn2);background:rgba(255,255,255,.03);color:var(--tekst2)}
.rijmenu>summary::-webkit-details-marker{display:none}.rijmenu>summary::before{display:none!important}
.rijmenu>summary:hover,.rijmenu[open]>summary{background:rgba(59,130,246,.14);border-color:rgba(125,178,255,.4);color:#fff}
.rijmenu>summary .ico{width:18px;height:18px;stroke-width:3}
.rijmenu-lijst{min-width:180px;text-align:left}
.rijmenu-lijst.zwevend{position:fixed;right:auto;top:auto}
.kanaal{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;white-space:nowrap}
.kanaal .ico{width:15px;height:15px}
.kanaal-whatsapp .ico{color:#4ADE80}.kanaal-email .ico,.kanaal-mail .ico{color:#7DB2FF}.kanaal-nazorg .ico{color:#A78BFA}
.kanaal-extra{display:block;font-size:.72rem;color:var(--stil);margin-top:2px}
td .pil{white-space:nowrap}

/* ---- signalen: rood alleen voor echte problemen ---- */
.signaal{display:flex;align-items:center;gap:12px;margin:8px 0 16px;padding:10px 14px;border-radius:12px;border:1px solid var(--lijn2);background:rgba(255,255,255,.02);color:inherit;text-decoration:none;font-size:.9rem;transition:border-color .15s,background .15s}
.signaal:hover{text-decoration:none;color:inherit}
.signaal-ico{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:.82rem}
.signaal-tekst{flex:1;min-width:0}.signaal-tekst b{display:block;font-weight:600}.signaal-tekst span{display:block;color:var(--stil);font-size:.84rem}
.signaal-actie{font-size:.85rem;font-weight:600;white-space:nowrap}
.signaal.info{border-color:rgba(96,165,250,.32);background:linear-gradient(90deg,rgba(59,130,246,.11),rgba(59,130,246,.03))}
.signaal.info .signaal-ico{background:rgba(59,130,246,.22);color:#BFDBFE}.signaal.info .signaal-actie{color:var(--accent2)}
.signaal.info:hover{border-color:rgba(125,178,255,.55)}
.signaal.let{border-color:rgba(245,165,36,.32);background:linear-gradient(90deg,rgba(245,165,36,.10),rgba(245,165,36,.02))}
.signaal.let .signaal-ico{background:rgba(245,165,36,.2);color:#FCD38D}.signaal.let .signaal-actie{color:#FCD38D}
.signaal.let:hover{border-color:rgba(245,165,36,.55)}
.signaal.fout{border-color:rgba(248,113,113,.4);background:linear-gradient(90deg,rgba(248,113,113,.12),rgba(248,113,113,.03))}
.signaal.fout .signaal-ico{background:rgba(248,113,113,.22);color:#FECACA}.signaal.fout .signaal-actie{color:#FCA5A5}
@media(max-width:560px){.signaal{flex-wrap:wrap}.signaal-actie{margin-left:40px}}

/* ---- voorstelkaarten op Home: titel, één regel, bedrag groot ---- */
.adv-tegel{gap:8px;padding:14px 16px}
.adv-tegel b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.adv-voet{align-items:flex-end;gap:8px}
.adv-bedrag{font-size:1.2rem;font-weight:650;letter-spacing:-.02em;color:#6EE7B7}.adv-bedrag small{font-size:.72rem;font-weight:500;color:var(--stil);letter-spacing:0}

/* ---- collega's op Home ---- */
.col-mini-rust{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--tekst2);padding:6px 4px}
.col-mini-rust i{width:8px;height:8px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 4px rgba(52,211,153,.15)}

/* ---- laden (skelet) ---- */
.skelet{display:inline-block;border-radius:8px;background:linear-gradient(90deg,rgba(148,163,184,.08) 0%,rgba(148,163,184,.18) 50%,rgba(148,163,184,.08) 100%);background-size:200% 100%;animation:skelet 1.3s ease-in-out infinite,skelet-weg .4s ease 8s forwards}
.skelet-pil{width:160px;height:38px;border-radius:999px}.skelet-pil.kort{width:112px}
@keyframes skelet{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes skelet-weg{to{opacity:0;width:0;margin:0;padding:0}}

/* ---- doelen op Management ---- */
.doelen-kop{justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.doelen-tijd{font-size:.85rem;color:var(--stil)}
.doelen-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px;margin-top:16px}
.doel-kop{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--tekst2)}.doel-kop b{font-size:1rem;color:var(--tekst)}
.balk.doel{position:relative;height:9px;margin:8px 0 6px;overflow:visible}
.balk.doel i{border-radius:99px}
.balk.doel.achter i{background:linear-gradient(90deg,#F59E0B,#FBBF24);box-shadow:0 0 12px -2px rgba(245,165,36,.7)}
.balk.doel.gehaald i{background:linear-gradient(90deg,#10B981,#6EE7B7);box-shadow:0 0 12px -2px rgba(52,211,153,.7)}
.doel-tijd{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(233,238,248,.55)}
.doel-stand{font-size:.85rem}.doel-onder{font-size:.8rem;color:var(--stil);margin-top:2px}.doel-onder.achter{color:#FCD38D}
.doelen-leeg{margin:8px 0 0;color:var(--stil);font-size:.9rem}
.doelen-instellen{margin-top:16px}
.doelen-instellen>summary{list-style:none;cursor:pointer}.doelen-instellen>summary::-webkit-details-marker{display:none}.doelen-instellen>summary::before{display:none!important}
.doelen-instellen[open]>summary{background:rgba(59,130,246,.14)}

/* ---- menu: merk bovenaan, groepskop, gebruiker onderaan ---- */
nav .merk{gap:12px}
.merk-tegel{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:750;font-size:.9rem;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#4F8FF9,#7C5CF6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -8px rgba(79,143,249,.9)}
nav .merk .merk-tekst{min-width:0}nav .merk .naam{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
nav .menu-kop{padding:16px 12px 4px;font-size:.66rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:rgba(141,152,175,.75)}
nav .onder{font-size:.8rem;padding-top:12px}
.gebruiker{position:relative}
.gebruiker>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:12px;transition:background .15s}
.gebruiker>summary::-webkit-details-marker{display:none}.gebruiker>summary::before{display:none!important}
.gebruiker>summary:hover,.gebruiker[open]>summary{background:rgba(148,163,184,.08)}
.avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.76rem;font-weight:700;color:#E0EBFF;background:linear-gradient(135deg,rgba(59,130,246,.45),rgba(139,124,246,.45));box-shadow:0 0 0 1px rgba(125,178,255,.35)}
.gb-tekst{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.gb-tekst b{font-size:.84rem;font-weight:600;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-tekst small{font-size:.72rem;color:var(--stil);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-pijl{color:var(--stil);transition:transform .15s}.gebruiker[open] .gb-pijl{transform:rotate(180deg)}
.gebruiker-menu{position:absolute;left:-8px;right:-8px;bottom:calc(100% + 6px);z-index:60;padding:6px;border-radius:12px;background:rgba(15,23,41,.98);border:1px solid var(--lijn2);box-shadow:0 24px 48px -20px rgba(0,0,0,.95);display:flex;flex-direction:column;gap:2px}
.gebruiker-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--tekst);font-size:.86rem;text-decoration:none}
.gebruiker-menu a:hover{background:rgba(59,130,246,.14);text-decoration:none}
.gebruiker-menu form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--lijn)}
.gebruiker-menu .knop{width:100%;justify-content:flex-start;gap:10px;background:none;border-color:transparent;box-shadow:none;color:var(--tekst2);padding:8px 10px;font-weight:500}
.gebruiker-menu .knop:hover{background:rgba(248,113,113,.12);color:#FECACA}
nav .onder .pwd{margin-top:12px;font-size:.7rem}
@media(max-width:900px){.merk-tegel{flex-basis:30px;width:30px;height:30px;border-radius:9px;font-size:.78rem}.gebruiker-menu{position:static;margin-top:6px}}

/* ---- toasts ---- */
.toasts{position:fixed;right:20px;bottom:96px;z-index:1000;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 40px)}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;max-width:380px;padding:12px 12px 12px 14px;border-radius:12px;background:rgba(15,23,41,.97);border:1px solid rgba(52,211,153,.35);box-shadow:0 24px 48px -20px rgba(0,0,0,.95),0 0 24px -12px rgba(52,211,153,.6);font-size:.88rem;opacity:0;transform:translateY(10px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.toast.in{opacity:1;transform:none}.toast.weg{opacity:0;transform:translateY(6px)}
.toast-ico{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;background:rgba(52,211,153,.2);color:#6EE7B7}
.toast.fout{border-color:rgba(248,113,113,.4);box-shadow:0 24px 48px -20px rgba(0,0,0,.95),0 0 24px -12px rgba(248,113,113,.6)}.toast.fout .toast-ico{background:rgba(248,113,113,.22);color:#FCA5A5}
.toast-tekst{flex:1;line-height:1.4}
.toast-dicht{flex:none;border:0;background:none;color:var(--stil);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 4px}
@media(max-width:560px){.toasts{left:16px;right:16px;bottom:88px;align-items:stretch}.toast{max-width:none}}

@media (prefers-reduced-motion:reduce){.skelet{animation:skelet-weg .01s linear 8s forwards}.toast,.gf-hit::after,.gf-hit::before,.gf-punt{transition:none}}
.rij-acties,.rij-acties form.rij{flex-wrap:nowrap}.rij-acties select{min-width:84px}
table.lijst td:nth-child(-n+4){white-space:nowrap}table.lijst td:nth-child(2){white-space:normal}
/* ===================================================================================================
   Social posts (punt 279) — eigen blok, los van de rest (makkelijk samenvoegen met punt 278)
   =================================================================================================== */
.sp-tegels .kaart.kpi{display:block;color:inherit;text-decoration:none}
.sp-tegels .kaart.kpi:hover{border-color:rgba(125,178,255,.35)}
.sp-k{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:.72rem;font-weight:700;color:#fff;flex:none;line-height:1}
.sp-k.groot{width:38px;height:38px;border-radius:11px;font-size:1rem}
.sp-facebook{background:#1877F2}.sp-instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}.sp-google{background:#fff;color:#4285F4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.sp-linkedin{background:#0A66C2}
.sp-leeg{border-style:dashed}
.sp-lijst{display:flex;flex-direction:column;gap:8px}
.sp-post{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;padding:12px 14px}
.sp-post:hover{text-decoration:none;border-color:rgba(125,178,255,.35)}
.sp-duim{width:52px;height:52px;border-radius:10px;overflow:hidden;flex:none;background:var(--kaart2);display:grid;place-items:center}
.sp-duim img{width:100%;height:100%;object-fit:cover}
.sp-geen,.sp-video{color:var(--stil);font-size:.8rem}
.sp-midden{flex:1;min-width:0}
.sp-tekst{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.sp-kanalen{display:flex;align-items:center;gap:4px;margin-top:4px;flex-wrap:wrap}
.sp-kanaal{display:flex;flex-direction:column}
.sp-kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sp-kal-kop{font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;color:var(--stil);padding:4px 6px}
.sp-kal-dag{min-height:96px;background:var(--kaart);border:1px solid var(--rand);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sp-week .sp-kal-dag{min-height:220px}
.sp-kal-dag.buiten{opacity:.45}.sp-kal-dag.vandaag{border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(59,130,246,.35)}
.sp-kal-nr{font-size:.78rem;color:var(--stil)}
.sp-kal-post{display:block;font-size:.74rem;padding:3px 6px;border-radius:6px;background:rgba(59,130,246,.16);color:#C9DDFF;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-kal-post.st-geplaatst{background:rgba(52,211,153,.14);color:#A7F3D0}.sp-kal-post.st-fout{background:rgba(248,113,113,.14);color:#FECACA}
.sp-kal-post:hover{text-decoration:none;filter:brightness(1.15)}
.sp-kal-plus{margin-top:auto;align-self:flex-end;color:var(--stil);font-size:1rem;opacity:0;text-decoration:none}
.sp-kal-dag:hover .sp-kal-plus{opacity:1}
.sp-editor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;margin-top:14px;align-items:start}
.sp-editor textarea{width:100%;resize:vertical}
.sp-rechts{position:sticky;top:16px;display:flex;flex-direction:column;gap:10px}
.sp-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px}
.sp-mitem{position:relative;border-radius:10px;overflow:hidden;background:var(--kaart2);aspect-ratio:1;display:grid;place-items:center}
.sp-mitem img,.sp-mitem video{width:100%;height:100%;object-fit:cover}
.sp-mlabel{position:absolute;left:0;right:0;bottom:0;font-size:.68rem;padding:3px 6px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff}
.sp-weg{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.sp-voortgang{margin-top:10px}.sp-balk{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.sp-balk>div{height:6px;width:0;background:linear-gradient(90deg,#7DB2FF,#3B82F6);transition:width .3s}
.sp-voortgang .uitleg.fout{color:var(--rood)}
.sp-kanaalkeuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.sp-kkeuze{display:flex;gap:8px;align-items:center;margin:0;padding:8px 10px;border:1px solid var(--rand);border-radius:10px;cursor:pointer}
.sp-kkeuze:has(input:checked){border-color:rgba(125,178,255,.5);background:rgba(59,130,246,.08)}
.sp-voorbeeld{background:#fff;color:#1c1e21;border-radius:14px;padding:12px;box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.sp-voorbeeld .uitleg{color:#65676b}
.sp-vb-kop{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sp-vb-kop>div{flex:1;min-width:0}
.sp-tel{font-size:.72rem;color:#65676b}.sp-tel.te-lang{color:#d93025;font-weight:700}
.sp-vb-tekst{white-space:pre-wrap;word-break:break-word;font-size:.88rem;line-height:1.4;max-height:220px;overflow:auto}
.sp-vb-beeld{position:relative;margin:8px -12px 0;background:#000;aspect-ratio:1.91;overflow:hidden}
.sp-vb-instagram .sp-vb-beeld{aspect-ratio:1;margin:0 -12px 8px}
.sp-vb-beeld img,.sp-vb-beeld video{width:100%;height:100%;object-fit:cover}
.sp-teller-b{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.72rem;padding:2px 8px;border-radius:99px}
.sp-vb-knop{margin-top:8px;display:inline-block;border:1px solid #dadce0;color:#1a73e8;border-radius:99px;padding:5px 14px;font-size:.82rem;font-weight:600}
.sp-vb-meld{margin:8px 0 0;padding-left:18px;font-size:.78rem;color:#65676b}.sp-vb-meld li.f{color:#d93025;font-weight:600}
.sp-voorbeeld .knop.stil{color:#1c1e21;border-color:#dadce0}
.sp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;border:1px solid var(--rand);background:rgba(255,255,255,.03);color:var(--tekst);cursor:pointer;font-size:.82rem}
.sp-chip:hover{border-color:rgba(125,178,255,.45)}
.sp-akkoord{display:flex;gap:10px;align-items:flex-start;margin:0}.sp-akkoord input{margin-top:4px}
.sp-plaatsing{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--rand)}.sp-plaatsing:last-child{border-bottom:0}
.sp-cijfers{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;font-size:.82rem;color:var(--stil)}.sp-cijfers b{color:var(--tekst)}
.sp-keuze{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rand);margin:0;cursor:pointer}
@media(max-width:900px){.sp-editor{grid-template-columns:minmax(0,1fr)}.sp-rechts{position:static}.sp-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .sp-kal{grid-template-columns:minmax(0,1fr);gap:6px}.sp-kal-kop{display:none}.sp-kal-dag{min-height:0}.sp-kal-dag.buiten{display:none}
  .sp-kal-dag:not(:has(.sp-kal-post)):not(.vandaag){display:none}
  .sp-kanaalkeuze{grid-template-columns:minmax(0,1fr)}
  .sp-post .pil{display:none}
  .sp-kanaalkaarten{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================================
   Kortere pagina's (punt 280): lange lijsten in pagina's met zoeken, filterchips en
   sorteren (views/_lijstzoek.ejs, views/_paginabalk.ejs, src/lijst.js); tabbladen in een
   pagina (.pagina-tabs); "Aan de slag" als één regel met voortgangsbalk.
   ===================================================================================== */
.lijstbalk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px}
.lijstzoek{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 320px;min-width:0;margin:0}
.lijstzoek input[type=search]{flex:1 1 220px;min-width:0;width:auto}
.lijstzoek select{width:auto;min-height:36px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--lijn2);background:rgba(255,255,255,.025);color:var(--tekst2);font-size:.84rem;font-weight:550;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.chip:hover{color:#fff;border-color:rgba(125,178,255,.4);text-decoration:none}
.chip.actief{background:linear-gradient(180deg,rgba(59,130,246,.34),rgba(59,130,246,.2));border-color:rgba(125,178,255,.45);color:#fff}
.chip-n{font-size:.74rem;padding:1px 7px;border-radius:99px;background:rgba(148,163,184,.16);color:var(--tekst2);font-variant-numeric:tabular-nums}
.chip.actief .chip-n{background:rgba(255,255,255,.18);color:#fff}
.paginabalk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:12px 2px 4px;font-size:.86rem;color:var(--stil)}
.pb-telling{font-variant-numeric:tabular-nums}
.pb-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pb-knop,.pb-nr{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--lijn2);background:rgba(255,255,255,.025);color:var(--tekst2);text-decoration:none;font-variant-numeric:tabular-nums}
.pb-knop:hover,.pb-nr:hover{color:#fff;border-color:rgba(125,178,255,.4);text-decoration:none}
.pb-nr.actief{background:linear-gradient(180deg,rgba(59,130,246,.34),rgba(59,130,246,.2));border-color:rgba(125,178,255,.45);color:#fff;font-weight:600}
.pb-knop.uit{opacity:.4;cursor:default}
.pb-gat{padding:0 4px;color:var(--stil)}
th a.sorteerkop{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
th a.sorteerkop:hover,th a.sorteerkop.actief{color:#fff}
.sorteerpijl{font-size:.62rem;color:var(--accent2)}
th.geldkol a.sorteerkop,th.r a.sorteerkop{justify-content:flex-end}
/* tabbladen binnen één pagina (Management, Corvo-beheer); gewone links (?tab=…), werkt zonder JavaScript */
.pagina-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px;padding:3px;border:1px solid var(--lijn2);border-radius:12px;background:rgba(255,255,255,.025);width:max-content;max-width:100%}
.pagina-tabs a{padding:7px 14px;border-radius:9px;color:var(--stil);font-size:.88rem;font-weight:550;text-decoration:none;white-space:nowrap}
.pagina-tabs a:hover{color:#fff;background:rgba(148,163,184,.08);text-decoration:none}
.pagina-tabs a.actief{background:linear-gradient(180deg,rgba(59,130,246,.34),rgba(59,130,246,.2));box-shadow:inset 0 0 0 1px rgba(125,178,255,.35);color:#fff}
/* "Aan de slag" ingeklapt tot één regel met voortgang */
details.aan-de-slag>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
details.aan-de-slag>summary .balk{flex:1 1 140px;margin:0;max-width:320px}
details.aan-de-slag>summary .ads-stil{color:var(--stil);font-weight:400;font-size:.85rem}
details.aan-de-slag:not([open]){padding-top:12px;padding-bottom:12px}
.meer-link{display:inline-block;margin-top:8px;font-size:.86rem}
/* Home: "Wat Corvo deze maand voor je deed" compact, vier getallen op één regel */
.wcd-rij{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 4px;font-size:.9rem}
.wcd-rij a{color:var(--tekst2);text-decoration:none;white-space:nowrap}.wcd-rij a:hover{color:#fff}
.wcd-rij b{font-size:1.15rem;font-weight:650;color:#fff;margin-right:2px;font-variant-numeric:tabular-nums}
/* paginabalk in de smalle lijst van Gesprekken */
.gs-lijst .paginabalk{justify-content:center;font-size:.8rem;margin:10px 4px 4px}.gs-lijst .pb-telling{width:100%;text-align:center}.gs-lijst .pb-nr,.gs-lijst .pb-knop{min-width:32px;height:32px;padding:0 8px}
@media(max-width:640px){.lijstzoek{flex-basis:100%}.paginabalk{justify-content:center}.pb-telling{width:100%;text-align:center}.pagina-tabs{width:auto;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.pagina-tabs::-webkit-scrollbar{display:none}}

/* =====================================================================================
   Uiterlijk (punt 282): bento-indeling, één iconenset, typografische schaal, licht thema als keuze,
   initialentegels, rijkere grafieken (ring, trechter, warmtekaart), vloeiende overgangen, compact of ruim.
   Alleen weergave; geen routes, velden of gedrag. Respecteert "minder beweging".
   ===================================================================================== */

/* ---- typografische schaal (6 groottes + één voor grote cijfers) ---- */
:root{
  --fs-1:.8rem;      /* 12px: labels, kleine kop in tabellen */
  --fs-2:.875rem;    /* 13px: toelichting, knoppen klein */
  --fs-3:1rem;       /* 15px: lopende tekst */
  --fs-4:1.125rem;   /* 17px: kop van een kaart (h2) */
  --fs-5:1.875rem;   /* 28px: paginatitel (h1) */
  --fs-6:2.125rem;   /* 32px: cijfer in een tegel */
  --fs-cijfer:2.875rem; /* 43px: het belangrijkste cijfer (grote tegel) */
  --font-cijfer:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --dicht:1;         /* 1 = ruim, kleiner = compact */
  color-scheme:dark;
}
body{font-size:var(--fs-3);font-optical-sizing:auto}
h1{font-size:var(--fs-5);letter-spacing:-.03em;font-variation-settings:"opsz" 32}
h2{font-size:var(--fs-4);letter-spacing:-.015em}
.kpi .label,th,.wk,.tr2-label{font-size:var(--fs-1)}
.kpi .toel,.knop.klein{font-size:var(--fs-2)}
.kpi .waarde,.score,.donut-midden,.ring-tekst,.tr2-getal,.wk-druk b{font-family:var(--font-cijfer);font-optical-sizing:auto;font-variation-settings:"opsz" 32;font-feature-settings:"tnum","cv11","ss01";font-variant-numeric:tabular-nums}
.kpi .waarde{font-size:var(--fs-6);font-weight:640;letter-spacing:-.045em}
.kpi .label{display:flex;align-items:center;letter-spacing:.005em}
@media(max-width:900px){h1{font-size:1.6rem}}
@media(max-width:560px){.kpi .waarde{font-size:1.65rem}}

/* ---- iconen ---- */
svg.ico.ico-mini{width:13px;height:13px;margin-left:3px;vertical-align:-2px}
.kpi-ico{width:15px!important;height:15px!important;margin-right:8px;color:var(--accent2);opacity:.85;flex:none}
.sterren{display:inline-flex;gap:2px;margin-left:10px;vertical-align:4px}
.sterren .ico{width:15px;height:15px;color:var(--stil);opacity:.45}
.sterren .ico.aan{color:#FBBF24;fill:#FBBF24;opacity:1}
.tl-ico .ico,.tijdlijn .ico{width:15px;height:15px}
.met-ico{display:inline-flex;align-items:center;gap:6px}
.met-ico .ico{flex:none}
.ok-ico{color:var(--groen)}.let-ico{color:var(--oranje)}

/* ---- bento-indeling: tegels van verschillende grootte ---- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:16px}
.bento>*{margin:0!important;min-width:0}
.bento>.b-2x1{grid-column:span 2}
.bento>.b-2x2{grid-column:span 2;grid-row:span 2}
.bento>.b-4x1{grid-column:1/-1}
.bento>.b-eerst{order:-1}
.bento.bento-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento.bento-1{grid-template-columns:minmax(0,1fr)}
.bento>.kaart{display:flex;flex-direction:column}
.bento>.b-held{background:radial-gradient(110% 70% at 0% 0%,rgba(59,130,246,.14),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 42%),var(--kaart)}
.bento>.b-held .waarde{font-size:var(--fs-cijfer);letter-spacing:-.05em;margin-top:10px}
.b-grafiek{margin-top:auto;padding-top:16px;min-width:0}
.b-grafiek .gf{margin-bottom:0}
.b-met-ring{flex-direction:row!important;align-items:center;justify-content:space-between;gap:14px}
.b-met-ring>div:first-child{min-width:0}
@media(max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento>.b-2x2{grid-row:span 1}}
@media(max-width:600px){.bento,.bento.bento-2{grid-template-columns:minmax(0,1fr)}.bento>*{grid-column:auto!important;grid-row:auto!important}.bento>.b-eerst{order:0}.bento>.b-held .waarde{font-size:2.1rem}}

/* ---- ringdiagram (zelfde stijl als de donut) ---- */
.ring{width:64px;height:64px;flex:none;overflow:visible}
.ring-spoor{fill:none;stroke:rgba(148,163,184,.16);stroke-width:6}
.ring-deel{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}
.ring-accent .ring-deel{stroke:#60A5FA;filter:drop-shadow(0 0 4px rgba(59,130,246,.55))}
.ring-groen .ring-deel{stroke:#34D399;filter:drop-shadow(0 0 4px rgba(52,211,153,.5))}
.ring-paars .ring-deel{stroke:#A78BFA;filter:drop-shadow(0 0 4px rgba(139,124,246,.55))}
.ring-oranje .ring-deel{stroke:#F5A524;filter:drop-shadow(0 0 4px rgba(245,165,36,.5))}
.ring-rood .ring-deel{stroke:#F87171;filter:drop-shadow(0 0 4px rgba(248,113,113,.5))}
.ring-tekst{font-size:14px;font-weight:650;letter-spacing:-.03em;fill:var(--tekst)}
.donut svg circle:first-child{stroke:rgba(148,163,184,.14)}
.donut-deel{filter:drop-shadow(0 0 3px rgba(0,0,0,.25))}

/* ---- trechter met kleurverloop ---- */
.trechter2{display:grid;gap:8px;margin-top:4px}
.tr2-stap{--tr-t:calc(var(--tr-i) / var(--tr-n));display:grid;grid-template-columns:minmax(80px,120px) minmax(0,1fr) 64px 46px;align-items:center;gap:12px;color:inherit;text-decoration:none}
.tr2-label{color:var(--tekst2);font-weight:540;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr2-baan{height:26px;border-radius:8px;background:rgba(148,163,184,.08);overflow:hidden;position:relative}
.tr2-balk{display:block;height:100%;border-radius:8px;margin:0 auto;
  background:linear-gradient(90deg,color-mix(in oklab,#3B82F6 calc(100% - var(--tr-t) * 100%),#34D399),color-mix(in oklab,#7DB2FF calc(100% - var(--tr-t) * 100%),#6EE7B7));
  box-shadow:0 0 18px -6px color-mix(in oklab,#3B82F6 calc(100% - var(--tr-t) * 100%),#34D399);transition:width .8s var(--ease)}
.tr2-getal{text-align:right;font-size:var(--fs-4);letter-spacing:-.02em}
.tr2-door{text-align:right;font-size:var(--fs-1);color:var(--stil)}
@media(max-width:560px){.tr2-stap{grid-template-columns:minmax(64px,90px) minmax(0,1fr) 48px;gap:8px}.tr2-door{display:none}}

/* ---- warmtekaart drukte (agenda) ---- */
.wk{margin:0;display:grid;gap:4px;overflow-x:auto;padding-bottom:2px}
.wk-rij{display:grid;grid-template-columns:28px repeat(var(--wk-u),minmax(18px,1fr));gap:4px;align-items:center;min-width:calc(28px + var(--wk-u) * 22px)}
.wk-kop span{color:var(--stil);text-align:left;font-variant-numeric:tabular-nums}
.wk-dag{color:var(--stil);font-weight:560}
.wk-cel{height:22px;border-radius:6px;background:color-mix(in oklab,#3B82F6 calc(var(--wk-s) * 100%),rgba(148,163,184,.08));box-shadow:0 0 calc(var(--wk-s) * 14px) -4px rgba(59,130,246,.9)}
.wk-cel.wk-nul{background:rgba(148,163,184,.07);box-shadow:none}
.wk-legenda{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;color:var(--stil);font-size:var(--fs-1)}
.wk-legenda i{width:16px;height:10px;border-radius:3px;background:color-mix(in oklab,#3B82F6 calc(var(--wk-s) * 100%),rgba(148,163,184,.08))}
.wk-druk{margin-left:auto}
details.inklap>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
details.inklap>summary::-webkit-details-marker{display:none}
details.inklap>summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 6px 2px 0;transition:transform .15s;opacity:.7;align-self:center}
details.inklap[open]>summary::before{transform:rotate(45deg)}

/* pijplijn: trechter met kleurverloop per stap */
.tr-stap .tr-balk{background:linear-gradient(90deg,rgba(59,130,246,.30),rgba(52,211,153,.22))}
.tr-stap:nth-child(2) .tr-balk,.tr-stap:nth-child(3) .tr-balk{background:linear-gradient(90deg,rgba(96,165,250,.30),rgba(139,124,246,.22))}
.tr-stap:nth-last-child(1) .tr-balk,.tr-stap:nth-last-child(2) .tr-balk{background:linear-gradient(90deg,rgba(52,211,153,.30),rgba(110,231,183,.18))}

/* ---- klanten herkenbaar: gekleurde beginletters (vaste kleur per naam) ---- */
.av{--av-h:221;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;font-size:.72rem;font-weight:680;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,hsl(var(--av-h) 62% 50%),hsl(calc(var(--av-h) + 30) 58% 38%));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -6px hsl(var(--av-h) 70% 40%)}
.av.av-klein{width:22px;height:22px;border-radius:7px;font-size:.6rem}
.av.av-groot{width:52px;height:52px;border-radius:15px;font-size:1.05rem}
.av-rij{display:flex;align-items:center;gap:9px;min-width:0}
.av-rij>a,.av-rij>span{min-width:0}
.kk-kop{display:flex;align-items:center;gap:14px;min-width:0}
.gs-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;align-items:start}
.gs-item>.av{grid-row:1/span 3;margin-top:2px}
.gs-item>:not(.av){grid-column:2;min-width:0}
.av.av-leeg{background:rgba(148,163,184,.14);color:var(--stil);box-shadow:none}
.av.av-leeg .ico{width:14px;height:14px}
.kassa-methoden button .ico{width:22px;height:22px;display:block;margin:0 auto 4px}
.tl-ico{display:inline-grid;place-items:center;color:var(--accent2)}

/* ---- lege staten met een eigen kleine illustratie ---- */
.leegstaat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 18px 24px;border:1px dashed var(--lijn2);border-radius:var(--r);background:radial-gradient(60% 80% at 50% 0%,rgba(59,130,246,.07),transparent 70%)}
.lg-beeld{width:150px;height:105px;margin-bottom:4px}
.lg-kaart{fill:var(--kaart2);stroke:rgba(125,178,255,.28)}
.lg-regel{fill:rgba(148,163,184,.28)}
.lg-stip{fill:#8B7CF6;opacity:.6}
.lg-titel{font-size:var(--fs-3);color:var(--tekst)}
.lg-tekst{margin:0;color:var(--stil);font-size:var(--fs-2);max-width:46ch}
.lg-actie{margin-top:8px}
td>.leegstaat{border:0;background:none}
@media (prefers-reduced-motion:no-preference){.lg-beeld rect[fill^="url"]{animation:lgZweef 5s ease-in-out infinite}}
@keyframes lgZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---- gebruikersmenu: thema en weergave ---- */
.weergave{display:grid;gap:6px;padding:8px 4px 10px;margin:4px 0 6px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.wg-kop{font-size:.68rem;font-weight:620;text-transform:uppercase;letter-spacing:.08em;color:var(--stil);padding:0 4px}
.wg-seg{display:flex;gap:2px;padding:3px;border:1px solid var(--lijn2);border-radius:10px;background:rgba(148,163,184,.06)}
.wg-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border:0;border-radius:7px;background:none;color:var(--stil);font:inherit;font-size:.74rem;font-weight:560;cursor:pointer;transition:background .15s,color .15s}
.wg-seg button .ico{width:13px;height:13px}
.wg-seg button:hover{color:var(--tekst)}
.wg-seg button[aria-pressed="true"]{background:linear-gradient(180deg,rgba(59,130,246,.32),rgba(59,130,246,.18));color:var(--tekst);box-shadow:inset 0 0 0 1px rgba(125,178,255,.35)}

/* ---- vloeiend: zachte overgang tussen pagina's (View Transitions; browsers zonder ondersteuning wisselen gewoon) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtUit .16s ease-in both}
::view-transition-new(root){animation:vtIn .24s cubic-bezier(.2,.8,.2,1) both}
nav{view-transition-name:zijbalk}
@keyframes vtUit{to{opacity:0;transform:translateY(-4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}
.laadbalk{position:fixed;left:0;top:0;height:2px;width:0;z-index:9999;background:linear-gradient(90deg,#3B82F6,#8B7CF6,#34D399);box-shadow:0 0 10px rgba(59,130,246,.8);opacity:0;pointer-events:none}
.laadbalk.aan{opacity:1;animation:laadbalk 6s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes laadbalk{0%{width:0}20%{width:45%}60%{width:75%}100%{width:92%}}
main{animation:none}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .laadbalk{display:none}
  .ring-deel,.tr2-balk{transition:none}
}

/* skelet: ook voor beelden die nog laden (social posts, foto's) */
img.laadt{background:rgba(148,163,184,.1)}

/* ---- compact of ruim (gebruikersmenu) ---- */
:root[data-dichtheid="compact"]{--dicht:.72}
:root[data-dichtheid="compact"] td{padding-top:7px;padding-bottom:7px}
:root[data-dichtheid="compact"] th{padding-top:7px;padding-bottom:7px}
:root[data-dichtheid="compact"] table{font-size:.86rem}
:root[data-dichtheid="compact"] .kaart{padding:14px 16px}
:root[data-dichtheid="compact"] .grid,:root[data-dichtheid="compact"] .bento{gap:10px}
:root[data-dichtheid="compact"] .kpi .waarde{font-size:1.7rem;margin:4px 0 2px}
:root[data-dichtheid="compact"] .bento>.b-held .waarde{font-size:2.3rem}
:root[data-dichtheid="compact"] main{padding-top:22px}
:root[data-dichtheid="compact"] h1+p.sub{margin-bottom:16px}
:root[data-dichtheid="compact"] main>h2{margin:20px 0 8px}
:root[data-dichtheid="compact"] .gs-item{padding-top:8px;padding-bottom:8px}
:root[data-dichtheid="compact"] nav .menu-kort a.item{padding-top:7px;padding-bottom:7px}

/* =====================================================================================
   Licht thema (punt 282): keuze in het gebruikersmenu; donker blijft standaard.
   Kleuren gecontroleerd op WCAG AA (tekst ≥ 4,5:1 op wit en op de kaartkleur).
   ===================================================================================== */
:root[data-thema="licht"]{
  color-scheme:light;
  --bg:#F4F6FB;--bg2:#EEF2F8;--kaart:#FFFFFF;--kaart2:#F6F8FC;--rand:#DCE3EE;
  --lijn:rgba(15,23,42,.09);--lijn2:rgba(15,23,42,.15);--licht:rgba(15,23,42,.04);
  --tekst:#0F172A;--tekst2:#334155;--stil:#5B6578;
  --accent:#2563EB;--accent2:#1D4ED8;--blauw:#2563EB;--groen:#047857;--rood:#B91C1C;--oranje:#B45309;--paars:#6D28D9;
  --schaduw:0 0 0 1px rgba(15,23,42,.04),0 1px 2px rgba(15,23,42,.05),0 8px 24px -16px rgba(15,23,42,.22);
  --schaduw-hoog:0 0 0 1px rgba(15,23,42,.05),0 2px 4px rgba(15,23,42,.05),0 20px 40px -22px rgba(15,23,42,.35),0 10px 26px -20px rgba(37,99,235,.35);
  --ring:0 0 0 3px rgba(37,99,235,.28);
}
:root[data-thema="licht"] body{background-color:var(--bg);color:var(--tekst);background-image:radial-gradient(60% 40% at 60% -8%,rgba(37,99,235,.08),transparent 70%),radial-gradient(40% 35% at 100% 0%,rgba(124,58,237,.05),transparent 70%)}
:root[data-thema="licht"] ::selection{background:rgba(37,99,235,.2);color:var(--tekst)}
/* punt 283: geen eigen kleur voor elke a in het licht (die won van .kaart-klassen en maakte gewone tekst blauw); de basisregel a{color:var(--accent2)} geldt al met de lichte --accent2 */
:where(:root[data-thema="licht"]) a:hover{color:#1E40AF}
:root[data-thema="licht"] h1,:root[data-thema="licht"] h2,:root[data-thema="licht"] h3{color:var(--tekst)}
:root[data-thema="licht"] main h1:not(:has(*)),:root[data-thema="licht"] .login h1:not(:has(*)){background:linear-gradient(180deg,#0F172A 40%,#334155);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-thema="licht"] main>h2:not(.kaart h2)::before{background:linear-gradient(180deg,#60A5FA,#2563EB);box-shadow:none}
/* --- vaste kleuren van de lagen hierboven, in het licht (gegenereerd uit app.css, punt 282) --- */
:root[data-thema="licht"] nav a.item.actief{color:var(--tekst)}
:root[data-thema="licht"] h2{color:var(--tekst)}
:root[data-thema="licht"] nav a.item{color:var(--tekst2)}
:root[data-thema="licht"] nav a.item:hover{color:var(--tekst)}
:root[data-thema="licht"] nav a.item.actief{color:var(--tekst)}
:root[data-thema="licht"] nav details.groep>summary{color:var(--tekst2)}
:root[data-thema="licht"] nav details.groep[open]>summary{color:var(--tekst)}
:root[data-thema="licht"] .tabs .tab.actief{color:var(--tekst)}
:root[data-thema="licht"] .donut-midden{fill:var(--tekst)}
:root[data-thema="licht"] .donut-legenda span{color:var(--tekst2)}
:root[data-thema="licht"] .pil.groen{color:#047857}
:root[data-thema="licht"] .pil.blauw{color:#1D4ED8}
:root[data-thema="licht"] .pil.oranje{color:#B45309}
:root[data-thema="licht"] .pil.rood{color:#B91C1C}
:root[data-thema="licht"] .pil.grijs{color:var(--tekst2)}
:root[data-thema="licht"] .zoekknop:hover{color:var(--tekst)}
:root[data-thema="licht"] .tabbalk .tab:hover{color:var(--tekst)}
:root[data-thema="licht"] .zoek-venster input{color:var(--tekst)}
:root[data-thema="licht"] .tab-meer[open]>summary{color:var(--tekst)}
:root[data-thema="licht"] .zoek-lijst a .ster.aan{color:#B45309}
:root[data-thema="licht"] .kassa-tegel span{color:#1D4ED8}
:root[data-thema="licht"] .kassa-toetsen button{color:var(--tekst)}
:root[data-thema="licht"] .kr-aantal button{color:var(--tekst)}
:root[data-thema="licht"] .kassa-methoden button{color:var(--tekst)}
:root[data-thema="licht"] .kassa-snel button{color:var(--tekst)}
:root[data-thema="licht"] .kassa-status.fout{color:#B91C1C}
:root[data-thema="licht"] .afspraak[data-status=niet_verschenen]::after{color:#B91C1C}
:root[data-thema="licht"] .ad-schakel a.aan{color:var(--tekst)}
:root[data-thema="licht"] .bl-hoog{color:#047857}
:root[data-thema="licht"] .bl-midden{color:#B45309}
:root[data-thema="licht"] .bl-rood{color:#B91C1C}
:root[data-thema="licht"] .segment a.actief{color:var(--tekst)}
:root[data-thema="licht"] ::selection{color:var(--tekst)}
:where(:root[data-thema="licht"]) a:hover{color:#1D4ED8}
:root[data-thema="licht"] h1{color:var(--tekst)}
:root[data-thema="licht"] h2{color:var(--tekst)}
:root[data-thema="licht"] nav{background:var(--kaart)}
:root[data-thema="licht"] nav a.item:hover{color:var(--tekst)}
:root[data-thema="licht"] nav a.item.actief{color:var(--tekst)}
:root[data-thema="licht"] nav a.item.actief .ico{color:#1D4ED8}
:root[data-thema="licht"] .menu-kort .snel a.item.sub:hover{color:var(--tekst)}
:root[data-thema="licht"] .menu-kort .snel a.item.sub.actief{color:var(--tekst)}
:root[data-thema="licht"] .nieuwlijst{background:var(--kaart)}
:root[data-thema="licht"] .tabbalk .tab:hover{color:var(--tekst)}
:root[data-thema="licht"] .tab-meer-lijst{background:var(--kaart)}
:root[data-thema="licht"] .knop.stil:hover,:root[data-thema="licht"] .knop.ghost:hover{color:var(--tekst)}
:root[data-thema="licht"] input,:root[data-thema="licht"] select,:root[data-thema="licht"] textarea{background:var(--kaart)}
:root[data-thema="licht"] input:focus,:root[data-thema="licht"] select:focus,:root[data-thema="licht"] textarea:focus{background:var(--kaart)}
:root[data-thema="licht"] .met-eenheid{background:var(--kaart)}
:root[data-thema="licht"] .melding{color:#047857}
:root[data-thema="licht"] .melding.fout{color:#B91C1C}
:root[data-thema="licht"] .zoek-venster{background:var(--kaart)}
@media(max-width:900px){
:root[data-thema="licht"] nav{background:var(--kaart)}
}
:root[data-thema="licht"] .col-oog{color:#047857}
:root[data-thema="licht"] .col-stat:hover{background:var(--kaart)}
:root[data-thema="licht"] .col-stat b{color:var(--tekst)}
:root[data-thema="licht"] .col-stat-accent{background:var(--kaart)}
:root[data-thema="licht"] .col-naam{color:var(--tekst)}
:root[data-thema="licht"] [data-staat="actief"] .col-status{color:#1D4ED8}
:root[data-thema="licht"] [data-staat="werkt"] .col-status{color:#047857}
:root[data-thema="licht"] [data-staat="aandacht"] .col-status{color:#B45309}
:root[data-thema="licht"] .col-pa .col-status{color:#6D28D9}
:root[data-thema="licht"] .col-spark-onder b{color:var(--tekst)}
:root[data-thema="licht"] .col-uren b{color:#047857}
:root[data-thema="licht"] .col-pa-vraag span{color:#6D28D9}
:root[data-thema="licht"] .col-pa-knop{color:var(--tekst)}
:root[data-thema="licht"] .col-live{color:#047857}
:root[data-thema="licht"] .col-f-tekst a:hover{color:var(--tekst)}
:root[data-thema="licht"] .col-tijd li[data-wie="receptionist"] .wie{color:#1D4ED8}
:root[data-thema="licht"] .col-tijd li[data-wie="planner"] .wie{color:#6D28D9}
:root[data-thema="licht"] .col-tijd li[data-wie="administratie"] .wie{color:#047857}
:root[data-thema="licht"] .col-tijd li[data-wie="inkoper"] .wie{color:#B45309}
:root[data-thema="licht"] .col-mini a[data-staat="werkt"] small{color:#047857}
:root[data-thema="licht"] .col-mini a[data-staat="aandacht"] small{color:#B45309}
:root[data-thema="licht"] .col-mini a b{color:#1D4ED8}
:root[data-thema="licht"] code{color:var(--tekst)}
:root[data-thema="licht"] pre{background:var(--kaart)}
:root[data-thema="licht"] mark{color:#B45309}
:root[data-thema="licht"] main details:not([class])>summary:not([class]):hover,:root[data-thema="licht"] main details.kaart>summary:not([class]):hover{color:var(--tekst)}
:root[data-thema="licht"] tfoot td,:root[data-thema="licht"] tr.totaal td{color:var(--tekst)}
:root[data-thema="licht"] .segment a:hover{color:var(--tekst)}
:root[data-thema="licht"] .tabs .tab:hover{color:var(--tekst)}
:root[data-thema="licht"] .tabs .tab.actief{color:var(--tekst)}
:root[data-thema="licht"] .opslaan-balk{background:var(--kaart)!important}
:root[data-thema="licht"] .melding.letop,:root[data-thema="licht"] .melding.let-op,:root[data-thema="licht"] .melding.oranje{color:#B45309}
:root[data-thema="licht"] .melding.info,:root[data-thema="licht"] .melding.blauw{color:var(--tekst)}
:root[data-thema="licht"] .app-balk{background:var(--kaart)}
:root[data-thema="licht"] .app-balk-naam{color:var(--tekst)}
:root[data-thema="licht"] .app-links a:hover{color:var(--tekst)}
:root[data-thema="licht"] .delta.goed{color:#047857}
:root[data-thema="licht"] .delta.slecht{color:#B91C1C}
:root[data-thema="licht"] .delta.gelijk{color:var(--tekst2)}
:root[data-thema="licht"] .kpi .sparklijn{color:#1D4ED8}
:root[data-thema="licht"] .gf-hit::after{background:var(--kaart)}
:root[data-thema="licht"] .pk-meer-lijst,:root[data-thema="licht"] .rijmenu-lijst{background:var(--kaart)}
:root[data-thema="licht"] .rijmenu>summary:hover,:root[data-thema="licht"] .rijmenu[open]>summary{color:var(--tekst)}
:root[data-thema="licht"] .kanaal-whatsapp .ico{color:#047857}
:root[data-thema="licht"] .kanaal-email .ico,:root[data-thema="licht"] .kanaal-mail .ico{color:#1D4ED8}
:root[data-thema="licht"] .kanaal-nazorg .ico{color:#6D28D9}
:root[data-thema="licht"] .signaal.info .signaal-ico{color:var(--tekst)}
:root[data-thema="licht"] .signaal.let .signaal-ico{color:#B45309}
:root[data-thema="licht"] .signaal.let .signaal-actie{color:#B45309}
:root[data-thema="licht"] .signaal.fout .signaal-ico{color:#B91C1C}
:root[data-thema="licht"] .signaal.fout .signaal-actie{color:#B91C1C}
:root[data-thema="licht"] .adv-bedrag{color:#047857}
:root[data-thema="licht"] .doel-onder.achter{color:#B45309}
:root[data-thema="licht"] .gebruiker-menu{background:var(--kaart)}
:root[data-thema="licht"] .gebruiker-menu .knop:hover{color:#B91C1C}
:root[data-thema="licht"] .toast{background:var(--kaart)}
:root[data-thema="licht"] .sp-k{color:var(--tekst)}
:root[data-thema="licht"] .sp-kal-post{color:var(--tekst)}
:root[data-thema="licht"] .sp-kal-post.st-geplaatst{color:#047857}
:root[data-thema="licht"] .sp-kal-post.st-fout{color:#B91C1C}
:root[data-thema="licht"] .sp-mlabel{color:var(--tekst)}
:root[data-thema="licht"] .sp-weg{color:var(--tekst)}
:root[data-thema="licht"] .chip:hover{color:var(--tekst)}
:root[data-thema="licht"] .chip.actief{color:var(--tekst)}
:root[data-thema="licht"] .chip.actief .chip-n{color:var(--tekst)}
:root[data-thema="licht"] .pb-knop:hover,:root[data-thema="licht"] .pb-nr:hover{color:var(--tekst)}
:root[data-thema="licht"] .pb-nr.actief{color:var(--tekst)}
:root[data-thema="licht"] th a.sorteerkop:hover,:root[data-thema="licht"] th a.sorteerkop.actief{color:var(--tekst)}
:root[data-thema="licht"] .pagina-tabs a:hover{color:var(--tekst)}
:root[data-thema="licht"] .pagina-tabs a.actief{color:var(--tekst)}
:root[data-thema="licht"] .wcd-rij a:hover{color:var(--tekst)}
:root[data-thema="licht"] .wcd-rij b{color:var(--tekst)}
/* inline kleuren in schermen (style="...color:#..."), precies op de eigenschap color */
:root[data-thema="licht"] [style^="color:#fff"]:not([style*="background"]):not(.knop):not(.av),:root[data-thema="licht"] [style*=";color:#fff"]:not([style*="background"]):not(.knop):not(.av),:root[data-thema="licht"] [style*="; color:#fff"]:not([style*="background"]):not(.knop):not(.av){color:var(--tekst)!important}
:root[data-thema="licht"] [style^="color:#FBBF24"],:root[data-thema="licht"] [style*=";color:#FBBF24"],:root[data-thema="licht"] [style*="; color:#FBBF24"],:root[data-thema="licht"] [style^="color:#FBC96B"],:root[data-thema="licht"] [style*=";color:#FBC96B"],:root[data-thema="licht"] [style*="; color:#FBC96B"],:root[data-thema="licht"] [style^="color:#FCD34D"],:root[data-thema="licht"] [style*=";color:#FCD34D"],:root[data-thema="licht"] [style*="; color:#FCD34D"],:root[data-thema="licht"] [style^="color:#E0913D"],:root[data-thema="licht"] [style*=";color:#E0913D"],:root[data-thema="licht"] [style*="; color:#E0913D"],:root[data-thema="licht"] [style^="color:#FCD38D"],:root[data-thema="licht"] [style*=";color:#FCD38D"],:root[data-thema="licht"] [style*="; color:#FCD38D"],:root[data-thema="licht"] [style^="color:#FDE3AE"],:root[data-thema="licht"] [style*=";color:#FDE3AE"],:root[data-thema="licht"] [style*="; color:#FDE3AE"],:root[data-thema="licht"] [style^="color:#d97706"],:root[data-thema="licht"] [style*=";color:#d97706"],:root[data-thema="licht"] [style*="; color:#d97706"]{color:#B45309!important}
:root[data-thema="licht"] [style^="color:#F87171"],:root[data-thema="licht"] [style*=";color:#F87171"],:root[data-thema="licht"] [style*="; color:#F87171"],:root[data-thema="licht"] [style^="color:#FCA5A5"],:root[data-thema="licht"] [style*=";color:#FCA5A5"],:root[data-thema="licht"] [style*="; color:#FCA5A5"],:root[data-thema="licht"] [style^="color:#FECACA"],:root[data-thema="licht"] [style*=";color:#FECACA"],:root[data-thema="licht"] [style*="; color:#FECACA"]{color:#B91C1C!important}
:root[data-thema="licht"] [style^="color:#34D399"],:root[data-thema="licht"] [style*=";color:#34D399"],:root[data-thema="licht"] [style*="; color:#34D399"],:root[data-thema="licht"] [style^="color:#6EE7B7"],:root[data-thema="licht"] [style*=";color:#6EE7B7"],:root[data-thema="licht"] [style*="; color:#6EE7B7"],:root[data-thema="licht"] [style^="color:#A7F3D0"],:root[data-thema="licht"] [style*=";color:#A7F3D0"],:root[data-thema="licht"] [style*="; color:#A7F3D0"]{color:#047857!important}
:root[data-thema="licht"] [style^="color:#9CC3FF"],:root[data-thema="licht"] [style*=";color:#9CC3FF"],:root[data-thema="licht"] [style*="; color:#9CC3FF"],:root[data-thema="licht"] [style^="color:#7DB2FF"],:root[data-thema="licht"] [style*=";color:#7DB2FF"],:root[data-thema="licht"] [style*="; color:#7DB2FF"],:root[data-thema="licht"] [style^="color:#9CC8FF"],:root[data-thema="licht"] [style*=";color:#9CC8FF"],:root[data-thema="licht"] [style*="; color:#9CC8FF"]{color:#1D4ED8!important}
:root[data-thema="licht"] [style*="background:rgba(255,255,255,.04)"],:root[data-thema="licht"] [style*="background:rgba(255,255,255,.03)"],:root[data-thema="licht"] [style*="background:rgba(255,255,255,.02)"]{background:rgba(15,23,42,.035)!important}
/* zijbalk */
:root[data-thema="licht"] nav{background:linear-gradient(180deg,#FFFFFF,#F8FAFD);border-right:1px solid var(--lijn);box-shadow:none}
:root[data-thema="licht"] nav a.item{color:var(--tekst2)}
:root[data-thema="licht"] nav a.item:hover{background:rgba(15,23,42,.05);color:var(--tekst)}
:root[data-thema="licht"] nav a.item.actief{color:#1E3A8A;background:linear-gradient(90deg,rgba(37,99,235,.12),rgba(37,99,235,.04));box-shadow:inset 0 0 0 1px rgba(37,99,235,.18)}
:root[data-thema="licht"] nav a.item.actief .ico{color:var(--accent)}
:root[data-thema="licht"] nav .menu-kort a.item[data-tour="groep-Digitale collega's"] .ico{color:#6D28D9}
:root[data-thema="licht"] nav .menu-kort a.item[data-tour="groep-Digitale collega's"]::after{box-shadow:0 0 0 2px #fff}
:root[data-thema="licht"] .menu-kort .snel a.item.sub{color:var(--stil)}
:root[data-thema="licht"] .menu-kort .snel a.item.sub:hover,:root[data-thema="licht"] .menu-kort .snel a.item.sub.actief{color:var(--tekst);background:rgba(37,99,235,.08)}
:root[data-thema="licht"] nav .onder .pwd b{background:linear-gradient(90deg,#1D4ED8,#6D28D9);-webkit-background-clip:text;background-clip:text}
:root[data-thema="licht"] .zoekknop{background:#fff;border-color:var(--lijn2);box-shadow:0 1px 2px rgba(15,23,42,.05);color:var(--tekst2)}
:root[data-thema="licht"] .zoekknop kbd,:root[data-thema="licht"] .zoek-venster kbd{background:#F1F5F9;box-shadow:0 1px 0 rgba(15,23,42,.12);color:var(--stil)}
:root[data-thema="licht"] .nieuwlijst,:root[data-thema="licht"] .tab-meer-lijst,:root[data-thema="licht"] .zoek-venster,:root[data-thema="licht"] .gebruiker-menu,:root[data-thema="licht"] .rijmenu-lijst,:root[data-thema="licht"] .toast{background:rgba(255,255,255,.98);border-color:var(--lijn2);box-shadow:0 24px 50px -18px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.04);color:var(--tekst)}
:root[data-thema="licht"] .nieuwlijst a,:root[data-thema="licht"] .gebruiker-menu a{color:var(--tekst2)}
:root[data-thema="licht"] .nieuwlijst a:hover,:root[data-thema="licht"] .gebruiker-menu a:hover,:root[data-thema="licht"] .rijmenu-lijst a:hover,:root[data-thema="licht"] .rijmenu-lijst button:hover{background:rgba(37,99,235,.08);color:var(--tekst)}
:root[data-thema="licht"] .zoek-achter{background:rgba(15,23,42,.28)}
:root[data-thema="licht"] .zoek-lijst a.gekozen,:root[data-thema="licht"] .zoek-lijst a:hover{background:rgba(37,99,235,.08);box-shadow:inset 0 0 0 1px rgba(37,99,235,.2)}
/* tabbladen en segmenten */
:root[data-thema="licht"] .tabbalk,:root[data-thema="licht"] .segment,:root[data-thema="licht"] .ad-schakel,:root[data-thema="licht"] .wg-seg{background:rgba(15,23,42,.035);border-color:var(--lijn);box-shadow:none}
:root[data-thema="licht"] .tabbalk .tab{color:var(--stil)}
:root[data-thema="licht"] .tabbalk .tab:hover,:root[data-thema="licht"] .segment a:hover{color:var(--tekst);background:rgba(15,23,42,.05)}
:root[data-thema="licht"] .tabbalk .tab.actief,:root[data-thema="licht"] .segment a.actief,:root[data-thema="licht"] .wg-seg button[aria-pressed="true"]{color:var(--tekst);background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.1),0 0 0 1px rgba(15,23,42,.06)}
:root[data-thema="licht"] .tabs .tab{color:var(--stil)}
:root[data-thema="licht"] .tabs .tab:hover,:root[data-thema="licht"] .tabs .tab.actief{color:var(--tekst)}
/* kaarten en tegels */
:root[data-thema="licht"] .kaart,:root[data-thema="licht"] details.sectie{background:var(--kaart);border-color:var(--lijn);box-shadow:var(--schaduw)}
:root[data-thema="licht"] .kaart .kaart:not(.glans){background:var(--kaart2);box-shadow:none}
:root[data-thema="licht"] .kaart[data-href]:hover,:root[data-thema="licht"] .kaart.klik:hover,:root[data-thema="licht"] a.kaart:hover{border-color:rgba(37,99,235,.35);box-shadow:var(--schaduw-hoog)}
:root[data-thema="licht"] .kaart.glans::before{background:linear-gradient(135deg,rgba(37,99,235,.45),rgba(124,58,237,.2) 35%,transparent 60%)}
:root[data-thema="licht"] .bento>.b-held{background:radial-gradient(110% 70% at 0% 0%,rgba(37,99,235,.08),transparent 60%),var(--kaart)}
:root[data-thema="licht"] .kpi .waarde{color:var(--tekst)}
:root[data-thema="licht"] .kpi-ico{color:var(--accent)}
:root[data-thema="licht"] .kaart:is([style*="--oranje"],[style*="#FBBF24"],[style*="#F5A524"],[style*="245,165,36"]){background:radial-gradient(120% 80% at 0% 0%,rgba(245,165,36,.08),transparent 60%),var(--kaart);box-shadow:var(--schaduw)}
:root[data-thema="licht"] .kaart:is([style*="--rood"],[style*="255,107,107"],[style*="248,113,113"]){background:radial-gradient(120% 80% at 0% 0%,rgba(220,38,38,.06),transparent 60%),var(--kaart);box-shadow:var(--schaduw)}
:root[data-thema="licht"] .kaart:is([style*="--groen"],[style*="52,211,153"]){background:radial-gradient(120% 80% at 0% 0%,rgba(5,150,105,.06),transparent 60%),var(--kaart)}
/* tabellen */
:root[data-thema="licht"] th{background:#F8FAFC;color:var(--stil);border-bottom-color:var(--lijn2)}
:root[data-thema="licht"] tbody tr:nth-child(even) td{background:rgba(15,23,42,.015)}
:root[data-thema="licht"] tr:hover td,:root[data-thema="licht"] tr[data-href]:hover td,:root[data-thema="licht"] tr.klik-rij:hover td{background:rgba(37,99,235,.05)}
:root[data-thema="licht"] tfoot td,:root[data-thema="licht"] tr.totaal td{color:var(--tekst);background:#F8FAFC}
:root[data-thema="licht"] main>table,:root[data-thema="licht"] main>form>table,:root[data-thema="licht"] main>div:not([class])>table,:root[data-thema="licht"] main>section>table{background:var(--kaart)}
/* knoppen en velden */
:root[data-thema="licht"] .knop{background:linear-gradient(180deg,#3B82F6,#2563EB);border-color:rgba(15,23,42,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 12px -6px rgba(37,99,235,.6);color:#fff}
:root[data-thema="licht"] .knop.stil,:root[data-thema="licht"] .knop.ghost{background:#fff;color:var(--tekst);border-color:var(--lijn2);box-shadow:0 1px 2px rgba(15,23,42,.06)}
:root[data-thema="licht"] .knop.stil:hover,:root[data-thema="licht"] .knop.ghost:hover{background:#F8FAFC;color:var(--tekst);border-color:rgba(15,23,42,.25)}
:root[data-thema="licht"] .knop.ghost{background:transparent;border-color:transparent;box-shadow:none}
:root[data-thema="licht"] .nieuwknop>summary{background:linear-gradient(180deg,#3B82F6,#2563EB);color:#fff}
:root[data-thema="licht"] input,:root[data-thema="licht"] select,:root[data-thema="licht"] textarea,:root[data-thema="licht"] .met-eenheid{background:#fff;color:var(--tekst);border-color:var(--lijn2);box-shadow:inset 0 1px 2px rgba(15,23,42,.05)}
:root[data-thema="licht"] input:focus,:root[data-thema="licht"] select:focus,:root[data-thema="licht"] textarea:focus{background:#fff;border-color:#3B82F6}
:root[data-thema="licht"] input::placeholder,:root[data-thema="licht"] textarea::placeholder{color:#8792A6}
:root[data-thema="licht"] select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
:root[data-thema="licht"] label{color:var(--tekst2)}
:root[data-thema="licht"] input[type=file]::file-selector-button{background:#F1F5F9;color:var(--tekst)}
:root[data-thema="licht"] code{background:#F1F5F9;color:#1E3A8A}
:root[data-thema="licht"] pre{background:#F8FAFC;box-shadow:none}
:root[data-thema="licht"] mark{background:rgba(245,158,11,.22);color:#78350F}
/* meldingen en labels */
:root[data-thema="licht"] .melding{color:#065F46;background:linear-gradient(90deg,rgba(5,150,105,.10),rgba(5,150,105,.03));border-color:rgba(5,150,105,.25)}
:root[data-thema="licht"] .melding.fout{color:#991B1B;background:linear-gradient(90deg,rgba(220,38,38,.09),rgba(220,38,38,.03));border-color:rgba(220,38,38,.25)}
:root[data-thema="licht"] .melding.letop,:root[data-thema="licht"] .melding.let-op,:root[data-thema="licht"] .melding.oranje{color:#92400E;background:linear-gradient(90deg,rgba(217,119,6,.10),rgba(217,119,6,.03));border-color:rgba(217,119,6,.28)}
:root[data-thema="licht"] .melding.info,:root[data-thema="licht"] .melding.blauw{color:#1E3A8A;background:linear-gradient(90deg,rgba(37,99,235,.09),rgba(37,99,235,.03));border-color:rgba(37,99,235,.25)}
:root[data-thema="licht"] .pil.open{background:rgba(37,99,235,.10);color:#1D4ED8}
:root[data-thema="licht"] .pil.compleet{background:rgba(5,150,105,.12);color:#047857}
:root[data-thema="licht"] .pil.afgehandeld{background:rgba(15,23,42,.06);color:var(--stil)}
:root[data-thema="licht"] .pil.geannuleerd,:root[data-thema="licht"] .pil.handmatige_controle,:root[data-thema="licht"] .pil.rood{background:rgba(220,38,38,.10);color:#B91C1C}
:root[data-thema="licht"] .delta.goed{color:#047857;background:rgba(5,150,105,.1)}
:root[data-thema="licht"] .delta.slecht{color:#B91C1C;background:rgba(220,38,38,.09)}
:root[data-thema="licht"] div.leeg,:root[data-thema="licht"] p.leeg{background-color:transparent;border-color:var(--lijn2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237DB2FF'/%3E%3Cstop offset='1' stop-color='%238B7CF6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='30' y='10' width='60' height='44' rx='9' fill='%23FFFFFF' stroke='url(%23a)' stroke-opacity='.55'/%3E%3Crect x='40' y='22' width='26' height='4' rx='2' fill='%237DB2FF' fill-opacity='.55'/%3E%3Crect x='40' y='31' width='40' height='3' rx='1.5' fill='%238D98AF' fill-opacity='.35'/%3E%3Crect x='40' y='38' width='32' height='3' rx='1.5' fill='%238D98AF' fill-opacity='.25'/%3E%3Ccircle cx='92' cy='14' r='7' fill='%23FFFFFF' stroke='%2334D399' stroke-opacity='.7'/%3E%3Cpath d='M89 14l2 2 4-4' fill='none' stroke='%2334D399' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='46' r='2' fill='%237DB2FF' fill-opacity='.5'/%3E%3Ccircle cx='104' cy='44' r='1.5' fill='%238B7CF6' fill-opacity='.6'/%3E%3C/svg%3E"),radial-gradient(60% 80% at 50% 0%,rgba(37,99,235,.05),transparent 70%)}
:root[data-thema="licht"] div.leeg[style*="padding"],:root[data-thema="licht"] p.leeg[style*="padding"]{background-image:none}
:root[data-thema="licht"] .leegstaat{background:radial-gradient(60% 80% at 50% 0%,rgba(37,99,235,.05),transparent 70%)}
:root[data-thema="licht"] .lg-kaart{fill:#fff;stroke:rgba(37,99,235,.25)}
:root[data-thema="licht"] .lg-regel{fill:rgba(15,23,42,.12)}
:root[data-thema="licht"] .skelet{background:rgba(15,23,42,.06)}
:root[data-thema="licht"] .skelet::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
:root[data-thema="licht"] .balk{background:rgba(15,23,42,.07);box-shadow:none}
/* grafieken, ringen, trechter, warmtekaart */
:root[data-thema="licht"] .ring-spoor,:root[data-thema="licht"] .donut svg circle:first-child{stroke:rgba(15,23,42,.08)}
:root[data-thema="licht"] .ring-accent .ring-deel{stroke:#2563EB;filter:none}
:root[data-thema="licht"] .ring-groen .ring-deel{stroke:#059669;filter:none}
:root[data-thema="licht"] .ring-paars .ring-deel{stroke:#7C3AED;filter:none}
:root[data-thema="licht"] .ring-oranje .ring-deel{stroke:#D97706;filter:none}
:root[data-thema="licht"] .ring-rood .ring-deel{stroke:#DC2626;filter:none}
:root[data-thema="licht"] .donut-deel{filter:none}
:root[data-thema="licht"] .donut-midden,:root[data-thema="licht"] .ring-tekst{fill:var(--tekst)}
:root[data-thema="licht"] .donut-onder{fill:var(--stil)}
:root[data-thema="licht"] .tr2-baan,:root[data-thema="licht"] .wk-cel.wk-nul{background:rgba(15,23,42,.05)}
:root[data-thema="licht"] .tr2-balk{box-shadow:none}
:root[data-thema="licht"] .wk-cel,:root[data-thema="licht"] .wk-legenda i{background:color-mix(in oklab,#2563EB calc(var(--wk-s) * 100%),rgba(15,23,42,.05));box-shadow:none}
:root[data-thema="licht"] .spark .lijn{stroke:#2563EB;filter:none}
:root[data-thema="licht"] .sterren .ico.aan{color:#D97706;fill:#F59E0B}
/* overig */
:root[data-thema="licht"] .opslaan-balk{background:linear-gradient(to top,rgba(244,246,251,.96) 65%,rgba(244,246,251,0))!important}
:root[data-thema="licht"] .app-balk{background:rgba(255,255,255,.88);border-bottom-color:var(--lijn)}
:root[data-thema="licht"] .app-balk-naam{color:var(--tekst)}
:root[data-thema="licht"] .app-links a{background:#fff;color:var(--tekst2)}
:root[data-thema="licht"] .app-links a:hover{color:var(--tekst);background:rgba(37,99,235,.06)}
:root[data-thema="licht"] .laadbalk{box-shadow:none}
@media(max-width:900px){:root[data-thema="licht"] nav{background:rgba(255,255,255,.92);border-bottom:1px solid var(--lijn)}:root[data-thema="licht"] .menuknop{background:#fff;border-color:var(--lijn2)}}

/* =====================================================================================
   Dagelijks gemak (punt 283): zoeken, werklijst, meerdere tegelijk, ongedaan maken, meldingenbel, sneltoetsen,
   bewaarde weergaven, status in de regel, relatieve datums en de balk onderin op de telefoon.
   ===================================================================================== */
/* licht thema: gewone tekst in klikbare blokken krijgt de tekstkleur, alleen echte links zijn blauw (zie ook :where hierboven) */
:root[data-thema="licht"] .wcd-rij a{color:var(--tekst2)}:root[data-thema="licht"] .wcd-rij a:hover{color:var(--tekst)}
:root[data-thema="licht"] .wcd-rij a b{color:var(--tekst)}
/* relatieve tijd */
time.rel{white-space:nowrap}
/* zoekvenster: icoon per soort, twee regels per resultaat, voetregel */
.zoek-lijst a{align-items:center}
.zoek-ico{flex:none;width:18px;height:18px;color:var(--stil)}
.zoek-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.zoek-t>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoek-t small{color:var(--stil);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoek-lijst .ster{flex:none;margin-left:6px}
.zoek-lijst[aria-busy="true"]{opacity:.75}
.zoek-voet{display:flex;gap:14px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--rand);color:var(--stil);font-size:.75rem}
@media(max-width:600px){.zoek-voet{display:none}}
/* werklijst "Vandaag te doen" */
.werklijst{list-style:none;margin:0;padding:0}
.wl-rij{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--lijn);transition:opacity .3s,transform .3s}
.wl-rij:last-child{border-bottom:0}
.wl-rij.wl-weg{opacity:0;transform:translateX(16px)}
.wl-ico{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--lijn);color:var(--stil)}
.wl-ico .ico{width:17px;height:17px}
.wl-p1 .wl-ico{color:#FCA5A5;border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}
.wl-p2 .wl-ico{color:#FCD34D;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.07)}
.wl-p3 .wl-ico{color:#93C5FD}
.wl-tekst{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--tekst);text-decoration:none}
.wl-tekst b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.wl-tekst small{color:var(--stil);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-tekst:hover{color:var(--tekst);text-decoration:none}.wl-tekst:hover b{text-decoration:underline;text-underline-offset:3px}
.wl-wanneer{flex:none;font-size:.8rem;color:var(--stil)}.wl-wanneer.laat{color:#FCA5A5}
.wl-acties{flex:none;display:flex;gap:6px}.wl-acties form{margin:0}.wl-acties .knop .ico{width:15px;height:15px;margin-right:4px}
.wl-kaart{padding:4px 12px}
.wl-home{margin:0 0 16px;padding:14px 16px}.wl-home .werklijst{margin-top:6px}
@media(max-width:640px){.wl-rij{flex-wrap:wrap}.wl-tekst{flex-basis:calc(100% - 44px)}.wl-wanneer{margin-left:44px}.wl-acties{margin-left:auto}}
/* meerdere tegelijk */
th.kies,td.kies{width:34px;padding-left:6px!important;padding-right:0!important}
.kies-vak{display:grid;place-items:center;width:28px;height:28px;margin:0;cursor:pointer}
.kies-vak input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer}
tr.gekozen td{background:rgba(59,130,246,.08)}
.bulkbalk{display:none;position:sticky;top:10px;z-index:40;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:10px 14px;border-radius:14px;border:1px solid rgba(125,178,255,.4);background:rgba(17,28,52,.96);box-shadow:0 14px 34px -14px rgba(0,0,0,.6);backdrop-filter:blur(10px)}
.bulkbalk.aan{display:flex;animation:bulkIn .18s ease-out}
.bulk-telling{font-size:.92rem}.bulk-acties{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bulk-acties select,.bulk-acties input{width:auto;min-height:36px;padding:4px 10px}
.bulk-acties .knop .ico{width:15px;height:15px;margin-right:4px}
@keyframes bulkIn{from{opacity:0;transform:translateY(-4px)}}
/* status in de regel */
.status-in-regel{display:inline-flex;margin:0}
.pil-select{appearance:none;-webkit-appearance:none;width:auto!important;min-height:0!important;padding:3px 24px 3px 10px!important;border-radius:99px!important;font-size:.78rem!important;font-weight:600;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)!important;background-position:calc(100% - 12px) 55%,calc(100% - 8px) 55%!important;background-size:4px 4px,4px 4px!important;background-repeat:no-repeat!important}
.kl-status .status-in-regel{margin-left:2px}
/* ongedaan maken */
.ongedaan-toast{position:relative;overflow:hidden;gap:10px}
.ongedaan-knop{flex:none;font-weight:700;color:var(--accent2)!important;pointer-events:auto}
.ongedaan-balk{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;animation:ongedaanTijd linear forwards}
@keyframes ongedaanTijd{to{transform:scaleX(0)}}
/* meldingenbel */
.bel{position:absolute;top:22px;right:12px;z-index:65}
nav .merk{padding-right:44px}
.bel-knop{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--lijn2);background:rgba(255,255,255,.035);color:var(--tekst2);cursor:pointer;padding:0}
.bel-knop .ico{width:19px;height:19px}.bel-knop:hover,.bel.open .bel-knop{color:var(--tekst);border-color:rgba(125,178,255,.45)}
.bel-n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#EF4444;color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg,#0B0F17)}
.bel-paneel{position:absolute;top:46px;left:0;width:360px;max-width:calc(100vw - 24px);max-height:min(70vh,520px);display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--rand);background:var(--kaart);box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden}
.bel-paneel[hidden]{display:none}
.bel-kop{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--lijn)}
.bel-lijst{overflow-y:auto}
.bel-item{display:grid;gap:2px;padding:10px 14px 10px 26px;border-bottom:1px solid var(--lijn);color:var(--tekst2);text-decoration:none;position:relative}
a.bel-item:hover{background:rgba(59,130,246,.07);color:var(--tekst2);text-decoration:none}
.bel-item b{color:var(--tekst);font-weight:600;font-size:.9rem}.bel-item span{font-size:.82rem;color:var(--stil)}.bel-item time{font-size:.74rem;color:var(--stil)}
.bel-item.nieuw::before{content:"";position:absolute;left:11px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.bel-leeg{padding:22px 16px;color:var(--stil);font-size:.88rem;text-align:center}
/* bewaarde weergaven */
.weergaven{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 4px;width:100%}
.weergaven[hidden]{display:none}
.wg-label{font-size:.8rem;color:var(--stil)}
.wg-chip{padding-right:4px}.wg-chip a{color:inherit;text-decoration:none}
.wg-weg{border:0;background:none;color:var(--stil);cursor:pointer;font-size:1rem;line-height:1;padding:0 4px}
.wg-bewaar{cursor:pointer;border-style:dashed}
/* sneltoetsen */
.sneltoetsen{padding:18px 20px;max-width:440px}
.sneltoetsen h2{margin:0 0 4px}
.sneltoetsen dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:14px 0 16px;align-items:center}
.sneltoetsen dt{white-space:nowrap;color:var(--stil);font-size:.82rem}.sneltoetsen dd{margin:0}
.sneltoetsen kbd{font:600 .78rem/1 ui-monospace,Consolas,monospace;padding:4px 7px;border-radius:6px;border:1px solid var(--lijn2);background:rgba(255,255,255,.05);color:var(--tekst)}
/* balk onderin (telefoon) */
.onderbalk{display:none}
@media(max-width:768px){
  .onderbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;align-items:stretch;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(10,15,30,.94);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-top:1px solid var(--lijn2)}
  .ob-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;color:var(--stil);font-size:.7rem;font-weight:600;text-decoration:none;cursor:pointer;list-style:none;min-width:0}
  .ob-item::-webkit-details-marker{display:none}
  .ob-item .ico{width:22px;height:22px}
  .ob-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ob-item.actief{color:var(--tekst)}.ob-item.actief .ico{color:var(--accent2)}
  .ob-nieuw{flex:1;display:flex;position:relative}
  .ob-plus .ob-rond{display:grid;place-items:center;width:34px;height:34px;margin-top:-10px;border-radius:50%;background:linear-gradient(180deg,#4F8FF9,#2F6FE0);color:#fff;box-shadow:0 8px 20px -8px rgba(59,130,246,.9)}
  .ob-plus .ob-rond .ico{width:20px;height:20px}
  .ob-lijst{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));display:grid;gap:4px;padding:8px;border-radius:16px;border:1px solid var(--rand);background:var(--kaart);box-shadow:0 20px 50px rgba(0,0,0,.55)}
  .ob-lijst a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--rand);color:var(--tekst);text-decoration:none}
  main{padding-bottom:120px}
  .ai-knop{bottom:calc(84px + env(safe-area-inset-bottom))}
  .toasts{bottom:calc(96px + env(safe-area-inset-bottom))}
  nav .nieuwknop{display:none}
}
@media(max-width:900px){
  nav{grid-template-columns:1fr auto auto}
  .bel{position:relative;top:auto;right:auto;grid-column:2;grid-row:1}
  nav .menuknop{grid-column:3;grid-row:1}
  nav .merk{padding-right:0}
  .bel-paneel{position:fixed;top:64px;left:12px;right:12px;width:auto;max-width:none}
  nav .zoekknop,nav .nieuwknop,nav .menu,nav .onder{grid-column:1/-1}
}
/* licht thema */
:root[data-thema="licht"] .bel-knop{background:#fff}
:root[data-thema="licht"] .bel-paneel{box-shadow:0 20px 50px -12px rgba(15,23,42,.3)}
:root[data-thema="licht"] .bulkbalk{background:rgba(255,255,255,.97);border-color:rgba(37,99,235,.35);box-shadow:0 14px 34px -16px rgba(15,23,42,.35)}
:root[data-thema="licht"] .wl-ico{background:#F6F8FC}
:root[data-thema="licht"] .wl-p1 .wl-ico{color:#B91C1C;background:#FEF2F2;border-color:#FECACA}
:root[data-thema="licht"] .wl-p2 .wl-ico{color:#B45309;background:#FFFBEB;border-color:#FDE68A}
:root[data-thema="licht"] .wl-p3 .wl-ico{color:#1D4ED8}
:root[data-thema="licht"] .wl-wanneer.laat{color:#B91C1C}
:root[data-thema="licht"] tr.gekozen td{background:rgba(37,99,235,.07)}
:root[data-thema="licht"] .sneltoetsen kbd{background:#F1F5F9}
@media(max-width:768px){:root[data-thema="licht"] .onderbalk{background:rgba(255,255,255,.95)}}
@media print{.onderbalk,.bel,.bulkbalk,td.kies,th.kies{display:none!important}}
@media (prefers-reduced-motion:reduce){.wl-rij,.bulkbalk.aan{transition:none;animation:none}.ongedaan-balk{animation-duration:10s!important}}
.onderbalk label.ob-item{margin:0}
[data-tabbladen]>section[data-tab][hidden]{display:none}
.sectie-tabs{margin-bottom:16px}.sectie-tabs .teller{margin-left:4px}
.bl-meer{margin-top:8px}.bl-meer>summary{cursor:pointer;font-size:.85rem;color:var(--stil)}.bl-meer[open]>summary{margin-bottom:8px}
.groei-maanden>summary{cursor:pointer;font-size:.85rem;color:var(--stil);margin-top:6px}
.bl-uitk{margin-top:8px}.bl-uitk>summary{list-style:none;display:inline-flex}.bl-uitk>summary::-webkit-details-marker{display:none}.bl-uitk[open]>summary{margin-bottom:8px}
.bl-kaart .bl-meer{display:inline-block;margin-right:12px}
.bel-paneel.bel-zwevend{position:fixed;z-index:1100;right:auto}
table[data-bulk-tabel] td:nth-child(2)>a{white-space:nowrap}
.sneltoetsen .st-titel{font-size:1.15rem;font-weight:700;margin-bottom:4px}
/* Stappen van aanvraag tot betaald (punt 284) */
.stappen{display:grid;grid-template-columns:var(--st-kol);gap:0;align-items:stretch;margin-top:6px}
.st-stap{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border:1px solid var(--lijn);border-radius:12px;background:rgba(255,255,255,.025);color:inherit;text-decoration:none;min-width:0}
a.st-stap:hover{border-color:var(--lijn2);background:rgba(255,255,255,.045);text-decoration:none}
.st-label{font-size:.72rem;font-weight:620;text-transform:uppercase;letter-spacing:.08em;color:var(--stil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-getal{font-size:1.9rem;font-weight:650;letter-spacing:-.04em;line-height:1.1;color:var(--tekst);font-variant-numeric:tabular-nums}
.st-deel{font-size:.78rem;color:var(--tekst2)}
.st-balk{height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden;margin:6px 0 2px}.st-balk i{display:block;height:100%;background:var(--accent);border-radius:2px}
.st-weg{font-size:.76rem;color:var(--stil)}
.st-pijl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--stil);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.st-pijl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-stap.lek{border-color:rgba(224,145,61,.55);background:rgba(224,145,61,.06)}.st-stap.lek .st-weg{color:#F0B37A;font-weight:600}.st-stap.lek .st-balk i{background:#E0913D}
.st-pijl.lek{color:#F0B37A}
.st-lek{margin-top:14px;font-size:.88rem;color:var(--tekst2);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@media(max-width:900px){.stappen{grid-template-columns:1fr}.st-pijl{flex-direction:row;padding:4px 0}.st-pijl svg{transform:rotate(90deg)}}
:root[data-thema="licht"] .st-stap{background:#fff}:root[data-thema="licht"] .st-balk{background:rgba(15,23,42,.07)}:root[data-thema="licht"] .st-stap.lek .st-weg,:root[data-thema="licht"] .st-pijl.lek{color:#A95F14}

/* Corvo Premium (punt 284, keuze Wouter 18 okt): glas met diepte, aurora bovenin, glazen tegels met lichtrand,
   licht dat de muis volgt (public/thema.js), witte cijfers en één kleurfamilie (indigo, blauw, cyaan).
   Laag 1 = basis glas (eerst B uit het stijlvoorstel), laag 2 = de verfijning (F). Geladen na app.css. */
/* =====================================================================================
   Laag 1 · basis glas
   ===================================================================================== */
:root{
  --r:20px;--r-m:14px;
  .gf-lijn{stroke-width:2.75}
  .kpi .waarde{font-weight:640}
  .bento>.b-held .waarde{font-weight:680}
  /* de kop van elke pagina (tabbladen) zweeft als glazen balk mee */
  main>.tabbalk:first-child{position:sticky;top:12px;z-index:15}
  .gf-staaf{border-radius:8px 8px 3px 3px}
}
@media (prefers-reduced-motion:no-preference){
  :root .kaart[data-href]:hover,:root .kaart.klik:hover,:root a.kaart:hover{transform:translateY(-3px)}
}
:root:not([data-thema="licht"]){
  --bg:#050913;--kaart:rgba(20,28,50,.62);--kaart2:rgba(28,38,66,.55);
  --lijn:rgba(255,255,255,.085);--lijn2:rgba(255,255,255,.15);
  --tekst:#EEF2FA;--tekst2:#C8D0E0;--stil:#98A3BA;
  --glas:blur(22px) saturate(160%);
  --schaduw:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.02),0 1px 1px rgba(0,0,0,.35),0 10px 20px -10px rgba(0,0,0,.6),0 34px 64px -34px rgba(0,0,0,.85);
  --schaduw-hoog:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.35),0 18px 36px -14px rgba(0,0,0,.75),0 40px 80px -30px rgba(37,99,235,.45);
  /* achtergrond: zachte kleurvlekken (mesh) + fijne ruis */
  & body{background-color:#050913;background-image:
      radial-gradient(42% 38% at 18% 8%,rgba(59,130,246,.30),transparent 70%),
      radial-gradient(38% 34% at 86% 4%,rgba(139,92,246,.24),transparent 70%),
      radial-gradient(40% 40% at 78% 92%,rgba(224,145,61,.12),transparent 70%),
      radial-gradient(45% 45% at 6% 96%,rgba(16,185,129,.10),transparent 70%);background-attachment:fixed}
  & body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E")}
  & h1{text-shadow:0 2px 24px rgba(59,130,246,.25)}
  /* glas: menu, kop, zwevende panelen */
  & nav{background:linear-gradient(180deg,rgba(18,26,48,.55),rgba(10,16,32,.62));backdrop-filter:var(--glas);-webkit-backdrop-filter:var(--glas);border-right:1px solid rgba(255,255,255,.08);box-shadow:inset -1px 0 0 rgba(255,255,255,.04),20px 0 60px -30px rgba(0,0,0,.6)}
  & nav a.item.actief{background:linear-gradient(90deg,rgba(96,165,250,.26),rgba(139,92,246,.10));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(147,197,253,.22),0 8px 22px -10px rgba(59,130,246,.8)}
  & nav a.item.actief::before{box-shadow:0 0 14px 2px rgba(96,165,250,.9)}
  & nav a.item.actief .ico{color:#BFDBFE;filter:drop-shadow(0 0 6px rgba(96,165,250,.8))}
  & .tabbalk,& .pagina-tabs{background:rgba(20,28,50,.5);backdrop-filter:var(--glas);-webkit-backdrop-filter:var(--glas);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px -14px rgba(0,0,0,.8)}
  & .tabbalk .tab.actief,& .pagina-tabs a.actief{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.08),0 6px 18px -6px rgba(59,130,246,.75)}
  & .nieuwlijst,& .tab-meer-lijst,& .zoek-venster,& .gebruiker-menu,& .rijmenu-lijst,& .toast,& .ai-paneel{background:rgba(18,26,48,.62)!important;backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -20px rgba(0,0,0,.85)}
  & .zoekknop{background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}
  & .nieuwknop>summary,& .knop{background:linear-gradient(180deg,#5B9BFF,#2F6FE0);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.15),0 8px 24px -8px rgba(59,130,246,.9),0 0 0 1px rgba(47,111,224,.4)}
  & .knop.stil,& .knop.ghost{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  & .knop.ghost{background:transparent;border-color:transparent;box-shadow:none}
  /* kaarten als glazen lagen met diepte */
  & .kaart,& details.sectie,& main>table,& main>form>table,& main>div:not([class])>table,& main>section>table{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%),rgba(17,25,46,.58);backdrop-filter:var(--glas);-webkit-backdrop-filter:var(--glas);border:1px solid rgba(255,255,255,.09);box-shadow:var(--schaduw)}
  & .kaart .kaart:not(.glans){background:rgba(255,255,255,.035);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  & .kaart[data-href]:hover,& .kaart.klik:hover,& a.kaart:hover{border-color:rgba(147,197,253,.35);box-shadow:var(--schaduw-hoog)}
  /* hoofdtegel: kleurverloop (mesh) erachter */
  & .bento>.b-held{background:
      radial-gradient(70% 90% at 0% 0%,rgba(59,130,246,.50),transparent 62%),
      radial-gradient(60% 80% at 100% 0%,rgba(139,92,246,.42),transparent 60%),
      radial-gradient(70% 70% at 80% 120%,rgba(224,145,61,.28),transparent 60%),
      linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(17,25,46,.6);border-color:rgba(255,255,255,.14)}
  & .bento>.b-held .waarde{text-shadow:0 4px 30px rgba(96,165,250,.45)}
  & .kaart.glans::before{background:linear-gradient(135deg,rgba(147,197,253,.85),rgba(167,139,250,.4) 35%,transparent 60%)}
  & .kpi-ico{color:#93C5FD;filter:drop-shadow(0 0 6px rgba(96,165,250,.7));opacity:1}
  & th{background:rgba(255,255,255,.03)}
  & tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
  & .chip.actief,& .pb-nr.actief{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px -4px rgba(59,130,246,.8)}
  /* gloed op lijnen en actieve elementen */
  & .gf-lijn{stroke:#8CC0FF;filter:drop-shadow(0 0 3px rgba(147,197,253,.95)) drop-shadow(0 0 14px rgba(59,130,246,.75))}
  & .gf stop{stop-color:#60A5FA}
  & .gf stop:first-child{stop-opacity:.55}
  & .gf-punt{box-shadow:0 0 0 5px rgba(96,165,250,.22),0 0 22px 4px rgba(96,165,250,.9)}
  & .gf-staaf{background:linear-gradient(180deg,#A5CBFF,#3B7BEA 70%,rgba(59,123,234,.55));box-shadow:0 0 22px -4px rgba(96,165,250,.9),inset 0 1px 0 rgba(255,255,255,.5)}
  & .gf-hit::after{background:rgba(18,26,48,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.16)}
  & .sparklijn .sl-lijn{stroke-width:2;filter:drop-shadow(0 0 4px rgba(147,197,253,.9)) drop-shadow(0 4px 10px rgba(59,130,246,.6))}
  & .kpi .sparklijn{color:#8CC0FF}
  & .ring-deel{filter:drop-shadow(0 0 7px currentColor)}
  & .ring-accent .ring-deel{filter:drop-shadow(0 0 8px rgba(96,165,250,.95))}
  & .ring-groen .ring-deel{filter:drop-shadow(0 0 8px rgba(52,211,153,.9))}
  & .donut-deel{filter:drop-shadow(0 0 6px rgba(96,165,250,.55))}
  & .tr2-balk{box-shadow:0 0 24px -4px color-mix(in oklab,#3B82F6 calc(100% - var(--tr-t) * 100%),#34D399),inset 0 1px 0 rgba(255,255,255,.35)}
  & .balk i{box-shadow:0 0 16px rgba(96,165,250,.95)}
  & .av{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px -6px hsl(var(--av-h) 80% 50%)}
}
@media(max-width:900px){
  :root:not([data-thema="licht"]) nav{background:rgba(10,16,32,.6)}
  :root main>.tabbalk:first-child{top:72px}
}
:root[data-thema="licht"]{
  --bg:#EDF1F8;--kaart:rgba(255,255,255,.72);--kaart2:rgba(255,255,255,.6);
  --schaduw:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(15,23,42,.05),0 2px 4px rgba(15,23,42,.04),0 16px 32px -16px rgba(15,23,42,.18),0 36px 64px -36px rgba(37,99,235,.25);
  & body{background-color:#EDF1F8;background-image:radial-gradient(42% 38% at 18% 6%,rgba(59,130,246,.18),transparent 70%),radial-gradient(38% 34% at 88% 2%,rgba(139,92,246,.14),transparent 70%),radial-gradient(40% 40% at 80% 95%,rgba(224,145,61,.12),transparent 70%);background-attachment:fixed}
  & nav{background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-right:1px solid rgba(255,255,255,.8);box-shadow:inset -1px 0 0 rgba(15,23,42,.06)}
  & .kaart,& details.sectie,& main>table{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62));backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.85);box-shadow:var(--schaduw)}
  & .bento>.b-held{background:radial-gradient(70% 90% at 0% 0%,rgba(59,130,246,.20),transparent 62%),radial-gradient(60% 80% at 100% 0%,rgba(139,92,246,.16),transparent 60%),radial-gradient(70% 70% at 80% 120%,rgba(224,145,61,.14),transparent 60%),rgba(255,255,255,.75)}
  & .tabbalk,& .pagina-tabs{background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.85);box-shadow:0 10px 24px -14px rgba(15,23,42,.3)}
  & .knop,& .nieuwknop>summary{background:linear-gradient(180deg,#3B82F6,#1D5FD8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px rgba(37,99,235,.7)}
  & .knop.stil,& .knop.ghost{background:rgba(255,255,255,.7);box-shadow:0 1px 2px rgba(15,23,42,.06)}
  & .gf-lijn{stroke:#2563EB;filter:drop-shadow(0 4px 8px rgba(37,99,235,.35))}
  & .gf stop{stop-color:#3B82F6}
  & .gf stop:first-child{stop-opacity:.3}
}

/* =====================================================================================
   Laag 2 · premium: het glas van B, verfijnd. Bijna zwarte basis met aurora bovenin, glazen tegels
   met een lichtrand (licht van boven), licht dat de muis volgt, witte cijfers met zachte gloed,
   één kleurfamilie (indigo, blauw, cyaan), statuskleuren gedempt.
   ===================================================================================== */
:root{
  --r:18px;--r-m:12px;
  h1{font-size:2.1rem;letter-spacing:-.04em;font-weight:640}
  h2{letter-spacing:-.022em;font-weight:620}
  .kpi .label{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;display:flex;align-items:center}
  .kpi .waarde{font-weight:600;letter-spacing:-.045em}
  .bento>.b-held .waarde{font-size:3.4rem;font-weight:620;letter-spacing:-.06em}
  .kpi-ico{width:30px!important;height:30px!important;padding:7px;border-radius:9px;margin-right:10px;opacity:1}
  th{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
  .gf-lijn{stroke:url(#stijl-merk-gf) #6E7BFF;stroke-width:2.75}
  .sparklijn .sl-lijn{stroke:url(#stijl-merk-sl) #6E7BFF;stroke-width:2}
  .gf-raster{stroke-dasharray:1 6;stroke-linecap:round}
  .gf-raster.nul{stroke-dasharray:none}
  .gf-staaf{border-radius:6px 6px 2px 2px}
  .pil,.delta{border-radius:7px}
}
:root:not([data-thema="licht"]){
  --bg:#060712;--tekst:#F3F4F8;--tekst2:#B9BDCC;--stil:#878CA0;
  --accent:#6E7BFF;--accent2:#A5ADFF;
  --lichtrand:linear-gradient(165deg,rgba(255,255,255,.20),rgba(255,255,255,.06) 35%,rgba(255,255,255,.025) 70%,rgba(255,255,255,.06));
  --glasvlak:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 55%),linear-gradient(rgba(13,15,30,.66),rgba(13,15,30,.66));
  --spot:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(130,140,255,.10),transparent 42%);
  & body{background-color:#05060B;background-image:
      radial-gradient(55% 55% at 30% 0%,rgba(88,96,255,.40),transparent 70%),
      radial-gradient(45% 50% at 88% 2%,rgba(56,189,248,.24),transparent 70%),
      radial-gradient(35% 35% at 62% 0%,rgba(168,85,247,.18),transparent 70%),
      radial-gradient(60% 50% at 50% 115%,rgba(88,96,255,.10),transparent 70%);background-attachment:fixed}
  & h1{text-shadow:none}
  & main h1:not(:has(*)){background:linear-gradient(180deg,#FFFFFF 35%,#B8BED6);-webkit-background-clip:text;background-clip:text;color:transparent}
  & main>h2:not(.kaart h2)::before{background:linear-gradient(180deg,#8A92FF,#38E1FF);box-shadow:0 0 12px rgba(110,123,255,.8)}
  & a{color:#A9B2FF}
  & a:hover{color:#D3D8FF}
  /* menu: donker glas */
  & nav{background:linear-gradient(180deg,rgba(12,13,24,.66),rgba(7,8,15,.74));backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);border-right:1px solid rgba(255,255,255,.06);box-shadow:inset -1px 0 0 rgba(255,255,255,.025)}
  & nav a.item{color:#A3A8B8}
  & nav a.item:hover{background:rgba(255,255,255,.04);color:#fff}
  & nav a.item.actief{background:linear-gradient(90deg,rgba(110,123,255,.22),rgba(110,123,255,.05));box-shadow:inset 0 0 0 1px rgba(150,160,255,.22),inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px -12px rgba(110,123,255,.9);color:#fff}
  & nav a.item.actief::before{background:linear-gradient(180deg,#A5ADFF,#38E1FF);box-shadow:0 0 12px 1px rgba(120,140,255,.9)}
  & nav a.item.actief .ico{color:#C9CEFF;filter:drop-shadow(0 0 6px rgba(120,140,255,.7))}
  & nav .onder .pwd b{background:linear-gradient(90deg,#A5ADFF,#38E1FF);-webkit-background-clip:text;background-clip:text;color:transparent}
  & .zoekknop{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  /* knoppen */
  & .knop,& .nieuwknop>summary{background:linear-gradient(180deg,#7D88FF,#5560F0);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(85,96,240,.35),0 10px 26px -10px rgba(99,102,241,.95)}
  & .knop:hover,& .nieuwknop>summary:hover{filter:brightness(1.08)}
  & .knop.stil,& .knop.ghost,& td .knop:not(.stil):not(.ghost){background:rgba(255,255,255,.05);color:#E6E8F0;border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  & .knop.stil:hover,& td .knop:not(.stil):not(.ghost):hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
  & .knop.ghost{background:transparent;border-color:transparent;box-shadow:none}
  /* tabbladen: glazen pil */
  & .tabbalk,& .pagina-tabs{background:rgba(255,255,255,.035);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px -16px rgba(0,0,0,.9)}
  & .tabbalk .tab.actief,& .pagina-tabs a.actief{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.07),0 6px 18px -8px rgba(110,123,255,.9)}
  & .chip.actief,& .pb-nr.actief{background:rgba(110,123,255,.22);border-color:rgba(150,160,255,.35);color:#fff;box-shadow:0 4px 14px -6px rgba(110,123,255,.9)}
  /* glazen tegels met lichtrand en licht dat de muis volgt */
  & .kaart,& details.sectie,& main>table,& main>form>table,& main>div:not([class])>table,& main>section>table,& .st-stap{
      border:1px solid transparent;
      background:var(--spot) padding-box,var(--glasvlak) padding-box,var(--lichtrand) border-box;
      backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 1px rgba(0,0,0,.4),0 24px 56px -28px rgba(0,0,0,.95)}
  & .kaart .kaart:not(.glans),& .kaart .st-stap{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--spot) padding-box,linear-gradient(rgba(255,255,255,.028),rgba(255,255,255,.028)) padding-box,linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.03)) border-box;box-shadow:none}
  & .kaart[data-href]:hover,& .kaart.klik:hover,& a.kaart:hover,& a.st-stap:hover{--lichtrand:linear-gradient(165deg,rgba(170,180,255,.45),rgba(255,255,255,.08) 40%,rgba(120,140,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 60px -26px rgba(70,80,220,.55)}
  & .kaart.glans::before{background:linear-gradient(90deg,transparent,rgba(165,173,255,.9),rgba(56,225,255,.6),transparent)}
  /* gekleurde streep links wordt een zachte gloed bovenin */
  & .kaart.streep{--sk:110,123,255;border-left-width:1px;background:radial-gradient(70% 120% at 0% 0%,rgba(var(--sk),.13),transparent 60%) padding-box,var(--spot) padding-box,var(--glasvlak) padding-box,linear-gradient(165deg,rgba(var(--sk),.55),rgba(255,255,255,.05) 35%,rgba(255,255,255,.03)) border-box}
  & .kaart.streep.groen{--sk:52,211,153}
  & .kaart.streep.oranje{--sk:245,165,36}
  & .kaart.streep.rood{--sk:248,113,113}
  /* hoofdtegel: aurora met witte cijfers */
  & .bento>.b-held{background:
      radial-gradient(85% 95% at 0% 0%,rgba(88,96,255,.48),transparent 62%) padding-box,
      radial-gradient(55% 70% at 100% 0%,rgba(56,189,248,.24),transparent 60%) padding-box,
      radial-gradient(70% 60% at 60% 120%,rgba(168,85,247,.20),transparent 60%) padding-box,
      var(--spot) padding-box,var(--glasvlak) padding-box,
      linear-gradient(165deg,rgba(170,180,255,.45),rgba(255,255,255,.06) 40%,rgba(56,225,255,.20)) border-box}
  & .bento>.b-held .waarde{color:#fff;text-shadow:0 0 42px rgba(120,135,255,.55),0 2px 0 rgba(0,0,0,.2)}
  & .kpi .waarde{color:#fff}
  & .kpi .label{color:#8E93A8}
  /* iconen in glazen tegeltjes */
  & .kpi-ico{background:linear-gradient(135deg,rgba(124,131,255,.32),rgba(56,189,248,.10));color:#E3E6FF;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px -6px rgba(99,102,241,.7);filter:none}
  /* tabellen */
  & th{background:transparent;color:#8E93A8;border-bottom-color:rgba(255,255,255,.08)}
  & td{border-bottom-color:rgba(255,255,255,.05)}
  & tbody tr:nth-child(even) td{background:transparent}
  & tr:hover td,& tr[data-href]:hover td{background:rgba(130,140,255,.06)}
  /* labels gedempt */
  & .pil.blauw,& .pil.open{background:rgba(110,123,255,.14);border-color:rgba(150,160,255,.32);color:#C3C8FF}
  & .av{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.08),0 6px 16px -8px hsl(var(--av-h) 80% 50%)}
  /* grafieken: indigo naar cyaan met gloed */
  & .gf-lijn{filter:drop-shadow(0 0 6px rgba(110,140,255,.7)) drop-shadow(0 8px 18px rgba(88,96,255,.45))}
  & .gf stop{stop-color:#6E7BFF}
  & .gf stop:first-child{stop-opacity:.75}
  & .gf-raster{stroke:rgba(255,255,255,.12)}
  & .gf-punt{background:#fff;border-color:#38E1FF;box-shadow:0 0 0 5px rgba(56,225,255,.18),0 0 18px 3px rgba(56,225,255,.75)}
  & .gf-staaf{background:linear-gradient(180deg,#9AA2FF,#5560F0 75%,rgba(85,96,240,.5));box-shadow:0 0 20px -6px rgba(110,123,255,.9),inset 0 1px 0 rgba(255,255,255,.5)}
  & .gf-hit.laatste .gf-staaf{background:linear-gradient(180deg,#7DEBFF,#5B9BFF 75%,rgba(91,155,255,.5))}
  & .gf-hit::after{background:rgba(14,15,28,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);color:#fff}
  & .sparklijn .sl-lijn{filter:drop-shadow(0 0 4px rgba(110,140,255,.8))}
  & .ring-accent .ring-deel{stroke:#7C83FF;filter:drop-shadow(0 0 6px rgba(124,131,255,.8))}
  & .balk{background:rgba(255,255,255,.07)}
  & .balk i,& .st-balk i{background:linear-gradient(90deg,#7C83FF,#38E1FF);box-shadow:0 0 12px rgba(110,140,255,.8)}
  & .st-stap.lek{background:radial-gradient(80% 100% at 50% 0%,rgba(245,165,36,.14),transparent 70%) padding-box,var(--glasvlak) padding-box,linear-gradient(165deg,rgba(245,165,36,.6),rgba(245,165,36,.12)) border-box}
  & .st-stap.lek .st-balk i{background:linear-gradient(90deg,#F5A524,#F7C873);box-shadow:0 0 12px rgba(245,165,36,.7)}
  & .st-getal{color:#fff}
  /* zwevende vensters: glas */
  & .nieuwlijst,& .tab-meer-lijst,& .zoek-venster,& .gebruiker-menu,& .rijmenu-lijst,& .toast,& .ai-paneel{background:rgba(14,15,28,.78)!important;backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px -24px rgba(0,0,0,.95)}
  & nav .nieuwlijst{background:#0E0F1C!important;backdrop-filter:none;-webkit-backdrop-filter:none}
  & input,& select,& textarea{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.1)}
  & input:focus,& select:focus,& textarea:focus{border-color:rgba(150,160,255,.7);box-shadow:0 0 0 3px rgba(110,123,255,.2)}
}
@media(max-width:900px){
  :root:not([data-thema="licht"]) nav{background:rgba(7,8,15,.82)}
  :root .bento>.b-held .waarde{font-size:2.5rem}
}
/* F: tegels met een gekleurde rand in de pagina zelf (style="border-…") krijgen dezelfde zachte gloed als .streep */
:root:not([data-thema="licht"]) .kaart[style*="border"]{--sk:110,123,255;border-color:transparent!important;border-left-width:1px!important;
  background:radial-gradient(70% 120% at 0% 0%,rgba(var(--sk),.14),transparent 60%) padding-box,var(--spot) padding-box,var(--glasvlak) padding-box,linear-gradient(165deg,rgba(var(--sk),.6),rgba(255,255,255,.05) 35%,rgba(255,255,255,.03)) border-box}
:root:not([data-thema="licht"]) .kaart[style*="groen"]{--sk:52,211,153}
:root:not([data-thema="licht"]) .kaart[style*="F87171"],:root:not([data-thema="licht"]) .kaart[style*="rood"]{--sk:248,113,113}
:root:not([data-thema="licht"]) .kaart[style*="oranje"]{--sk:245,165,36}
:root:not([data-thema="licht"]) .tabbalk .tab:not(.actief),:root:not([data-thema="licht"]) .pagina-tabs a:not(.actief){color:#A3A8B8}
:root:not([data-thema="licht"]) .tabbalk .tab:not(.actief):hover,:root:not([data-thema="licht"]) .pagina-tabs a:not(.actief):hover{color:#fff}
:root[data-thema="licht"] .kaart[style*="border-left"],:root[data-thema="licht"] .kaart.streep{border-left-width:1px!important;box-shadow:inset 0 2px 0 var(--sk-kleur,rgba(37,99,235,.55)),0 1px 2px rgba(15,23,42,.05)}
:root[data-thema="licht"] .kaart[style*="groen"],:root[data-thema="licht"] .kaart.streep.groen{--sk-kleur:rgba(16,185,129,.7)}
:root[data-thema="licht"] .kaart[style*="oranje"],:root[data-thema="licht"] .kaart.streep.oranje{--sk-kleur:rgba(217,119,6,.7)}
:root[data-thema="licht"] .kaart[style*="rood"],:root[data-thema="licht"] .kaart.streep.rood{--sk-kleur:rgba(220,38,38,.7)}