/* Stijl overgenomen van de Depo Planner-desktop (desktop/src/stijl.css), ingekort tot wat deze schermen
   gebruiken: wie beide kent, ziet dezelfde knoppen en velden. De kleuren zijn eigen (2026-10-18, gebruiker:
   "de kleur van geld"): diep bankbiljetgroen in de kopbalk, smaraggroen als accent. --goed is iets geler
   gehouden zodat een geslaagd-melding niet als knop leest. */
@font-face { font-family: "Geist Variable"; src: url("geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --achtergrond: #eef2ef;
  --vlak: #ffffff;
  --vlak-2: #f8fbf9;
  --zijbalk-verloop: linear-gradient(180deg, #11402f 0%, #0c3125 100%);
  --zb-tekst: rgb(255 255 255 / 92%);
  --zb-gedempt: rgb(255 255 255 / 58%);
  --zb-icoon: #9be3bd;
  --zb-hover: rgb(255 255 255 / 7%);
  --zb-lijn: rgb(255 255 255 / 10%);
  --ink: #14201a;
  --muted: #5b6a62;
  --zacht: #a2b0a8;
  --lijn: #cfdbd4;
  --lijn-zacht: #e2eae5;
  --hover: rgb(12 64 44 / 5%);
  --accent: #12704a;
  --accent-tekst: #12704a;
  --accent-zacht: rgb(18 112 74 / 11%);
  --op-accent: #ffffff;
  --goed: #2c8a2a;
  --goed-zacht: rgb(44 138 42 / 12%);
  --fout: #d70015;
  --fout-zacht: rgb(255 59 48 / 11%);
  --let-op: #c93400;
  --info: #2a62c9;
  --info-zacht: rgb(42 98 201 / 11%);
  --let-op-zacht: rgb(255 149 0 / 14%);
  --schaduw: 0 0 0 .5px rgb(10 40 28 / 8%), 0 1px 2px rgb(10 40 28 / 6%), 0 6px 16px -4px rgb(10 40 28 / 8%), 0 16px 32px -12px rgb(10 40 28 / 10%);
  --schaduw-klein: 0 0 0 .5px rgb(10 40 28 / 9%), 0 1px 2px rgb(10 40 28 / 8%);
  --knop-stil: #ffffff;
  --straal-groot: 14px;
  --letter: "Geist Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --snel: .15s cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --achtergrond: #0a0f0c;
    --vlak: #161d19;
    --vlak-2: #1a221e;
    --zijbalk-verloop: linear-gradient(180deg, #0c2a1f 0%, #081f17 100%);
    --ink: #eef4f0;
    --muted: #97a69e;
    --zacht: #5f6d66;
    --lijn: #303d36;
    --lijn-zacht: #232d28;
    --hover: rgb(220 250 235 / 6%);
    --accent: #259a68;
    --accent-tekst: #63d29f;
    --accent-zacht: rgb(37 154 104 / 22%);
    --goed: #30d158;
    --goed-zacht: rgb(48 209 88 / 16%);
    --fout: #ff6961;
    --fout-zacht: rgb(255 69 58 / 18%);
    --let-op: #ffb340;
    --info: #6ea4ff;
    --info-zacht: rgb(110 164 255 / 16%);
    --let-op-zacht: rgb(255 159 10 / 18%);
    --schaduw: 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px 2px rgb(0 0 0 / 50%), 0 8px 24px -6px rgb(0 0 0 / 55%);
    --schaduw-klein: 0 0 0 .5px rgb(255 255 255 / 10%), 0 1px 2px rgb(0 0 0 / 50%);
    --knop-stil: #242c30;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--ink);
  font-family: var(--letter);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.gedempt { color: var(--muted); }
.klein { font-size: 12px; }
.sterk { font-weight: 600; }
.cijfers { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }
.nowrap { white-space: nowrap; }

/* --- Indeling ---
   Kopbalk bovenin naar de bovenbalk van Football Manager (2026-10-18): terug/vooruit, logo,
   secties met uitklapmenu en hun pagina's eronder, rechts zoeken, datum + week, de knop Verder en
   de tellers. Alles in de balk heet kb-. --kop is zijn hoogte, voor alles wat eronder plakt
   (position: sticky) of een schermhoogte vult, inclusief de 8 px lucht erboven.
   De balk zweeft los van de bovenrand (2026-10-18): strak tegen de rand smolt hij samen met de
   browserbalk, en Safari 26 kleurt zijn balk mee met een vaste balk die tegen de rand plakt. */
:root { --kb-h: 64px; --kop: calc(var(--kb-h) + 8px); --kb-licht: #9be3bd; --kb-goud: #f2c94c; --kb-rand: rgb(255 255 255 / 14%); }
.indeling { display: flex; flex-direction: column; min-height: 100%; }
.indeling > * { min-width: 0; }
/* Strook in de achtergrondkleur achter de zwevende kopbalk: wat eronder doorscrolt, schuift niet
   zichtbaar door de kier erboven. Safari 26 neemt de kleur van een vaste balk bovenin over voor
   zijn eigen balk; zo wordt dat deze lichte strook en niet het groen. */
.indeling::before { content: ""; position: fixed; inset: 0 0 auto 0; height: var(--kop); background: var(--achtergrond); z-index: 39; pointer-events: none; }
.kopbalk {
  position: sticky; top: 8px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: var(--kb-h); margin: 8px 10px 0; padding: 0 12px 0 10px; border-radius: 16px;
  background: var(--zijbalk-verloop); color: var(--zb-tekst);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 6%) inset, 0 1px 2px rgb(10 40 28 / 12%), 0 10px 28px -10px rgb(10 40 28 / 45%);
}
.kb-pijlen { display: flex; gap: 4px; flex: none; }
.kb-pijl { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 8%);
  color: var(--zb-tekst); cursor: pointer; }
.kb-pijl:hover { background: rgb(255 255 255 / 16%); }
.kb-logo { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: #fff; padding: 5px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 20%), 0 4px 12px rgb(0 0 0 / 25%); text-decoration: none !important; cursor: pointer; list-style: none; }
.kb-logo::-webkit-details-marker { display: none; }
.kb-logo img { width: 100%; height: 100%; object-fit: contain; }
.kb-logo span { font-size: 18px; font-weight: 750; color: var(--accent); }
.bedrijf-houder { position: relative; flex: none; }

.kb-menu { flex: 1; min-width: 0; display: grid; gap: 0; align-content: center; }
.kb-secties { display: flex; gap: 2px; margin-left: -8px; }
.kb-sectie { position: relative; }
.kb-hoofd { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: 8px; white-space: nowrap;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--zb-tekst); text-decoration: none !important; }
.kb-hoofd svg { opacity: .55; margin-top: 2px; }
.kb-hoofd:hover, .kb-sectie:focus-within .kb-hoofd { background: var(--zb-hover); }
.kb-hoofd.aan { color: var(--kb-licht); }
/* Uitklapmenu: zacht open en dicht. Bij het verlaten even wachten (transition-delay), zodat hij
   niet wegspringt als de muis schuin naar het menu gaat. */
.kb-uitklap { position: absolute; top: calc(100% + 2px); left: 0; z-index: 50; display: grid; min-width: 200px; padding: 4px;
  background: var(--vlak); border-radius: 12px; box-shadow: 0 0 0 .5px rgb(10 40 28 / 9%), 0 8px 20px rgb(10 40 28 / 14%), 0 28px 64px rgb(10 40 28 / 20%);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity .14s ease, transform .16s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .16s; transition-delay: .12s; }
.kb-uitklap::before { content: ""; position: absolute; inset: -8px 0 auto 0; height: 8px; }   /* brug tussen knop en menu */
/* Openen pas na even blijven staan (.3 s): het menu valt over de regel met pagina's eronder, en wie
   snel naar die regel gaat, moet er niet in blijven hangen. Na een klik op de sectie blijft hij dicht
   tot de muis weg is (.dicht, kopbalk.js). */
.kb-sectie:hover .kb-uitklap { opacity: 1; visibility: visible; transform: none; transition-delay: .3s; }
.kb-sectie:focus-visible .kb-uitklap, .kb-sectie:has(:focus-visible) .kb-uitklap { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kb-sectie.dicht .kb-uitklap { opacity: 0; visibility: hidden; transition-delay: 0s; }
.kb-uitklap a, .kb-uitklap button { display: flex; align-items: center; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none !important; transition: background-color .1s, color .1s; }
.kb-uitklap a:hover, .kb-uitklap button:hover { background: var(--accent); color: var(--op-accent); }
.kb-uitklap a.aan { font-weight: 600; color: var(--accent-tekst); }
.kb-uitklap a.aan:hover { color: var(--op-accent); }
.kb-uitklap hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--lijn-zacht); }
.kb-uitklap form { margin: 0; }
.kb-sub { display: flex; gap: 2px; height: 24px; margin-left: -1px; }
.kb-sub a { display: inline-flex; align-items: center; padding: 0 8px; font-size: 13.5px; color: var(--zb-gedempt); text-decoration: none !important; white-space: nowrap; }
.kb-sub a:hover { color: var(--zb-tekst); }
.kb-sub a { position: relative; }
.kb-sub a.aan { color: #fff; }
.kb-streep { position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: var(--kb-licht); }

.kb-rechts { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; }
.kb-gereedschap { display: flex; height: 100%; margin-left: 6px; border: 1px solid var(--kb-rand); border-radius: 10px; overflow: hidden; background: rgb(0 0 0 / 14%); }
.kb-zoekknop { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; background: none; color: var(--zb-tekst); font-size: 14px; cursor: pointer;
  transition: background-color var(--snel); }
.kb-zoekknop:hover, .kb-gereedschap .kb-ikoon:hover { background: rgb(255 255 255 / 9%); }
.kb-gereedschap .kb-ikoon { width: 40px; height: auto; border: 0; border-left: 1px solid var(--kb-rand); border-radius: 0; background: none; cursor: pointer; }
.kb-datum { display: grid; align-content: center; height: 100%; padding: 0 12px; border: 1px solid var(--kb-rand); border-radius: 10px; line-height: 1.2;
  white-space: nowrap; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--snel), border-color var(--snel); }
.kb-datum:hover { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 24%); }
.kb-datum b { font-size: 13px; font-weight: 650; color: #fff; }
.kb-datum span { font-size: 11.5px; font-weight: 550; color: var(--kb-licht); }
.kb-ikoon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--zb-tekst); text-decoration: none !important;
  transition: background-color var(--snel); }
.kb-ikoon:hover { background: var(--zb-hover); }
.kb-tel { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--kb-goud); color: #2a2100;
  box-shadow: 0 0 0 2px #0e3528; }
.kb-tel.rood { background: #ff453a; color: #fff; }
.kb-test { margin-right: 4px; padding: 1px 7px; border-radius: 8px; background: #c93400; color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }

.kb-zoekvenster { position: fixed; z-index: 60; width: 420px; padding: 8px; border-radius: 12px; background: var(--vlak); color: var(--ink);
  box-shadow: 0 0 0 .5px rgb(10 40 28 / 10%), 0 12px 28px rgb(10 40 28 / 18%), 0 32px 72px rgb(10 40 28 / 22%); }
.kb-zoekvenster[hidden] { display: none; }
.kb-zoekvenster input { width: 100%; height: 40px; font-size: 15px; }
.kb-resultaten { max-height: 60vh; overflow-y: auto; margin-top: 4px; }
.kb-groep { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kb-resultaten a { display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none !important; }
.kb-resultaten a b { font-size: 13.5px; font-weight: 550; }
.kb-resultaten a small { font-size: 12px; color: var(--muted); }
.kb-resultaten a:hover, .kb-resultaten a.aan { background: var(--accent-zacht); }
.kb-hint { margin: 0; padding: 12px 10px; font-size: 13px; color: var(--muted); }

/* Zoekvenster: komt zacht uit de knop. */
.kb-zoekvenster:not([hidden]) { animation: kb-in .16s cubic-bezier(.2, .7, .3, 1); transform-origin: top left; }
@keyframes kb-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* --- Vensters uit de kopbalk (kalender, instellingen), zoals in FM ------------------------------
   Een venster midden op het scherm met de pagina vaag erachter; niet schermvullend. kv- is het
   venster zelf, kk- de kalender, ki- de instellingen. */
.kv-laag { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px;
  background: rgb(6 20 14 / 0%); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background-color .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease; }
.kv-laag[hidden] { display: none; }
.kv-laag.open { background: rgb(6 20 14 / 42%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.kv-venster { position: relative; display: flex; flex-direction: column; width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: hidden;
  padding: 16px 20px 18px; border-radius: 18px; background: var(--achtergrond); color: var(--ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 8%) inset, 0 24px 64px rgb(0 0 0 / 30%), 0 4px 12px rgb(0 0 0 / 14%);
  opacity: 0; transform: translateY(10px) scale(.975); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1); }
.kv-laag.open .kv-venster { opacity: 1; transform: none; }
.kv-venster.kalender { width: min(1280px, 100%); height: min(860px, calc(100vh - 48px)); }
.kv-venster > * { transition: opacity .12s ease; }
.kv-venster.wissel > :not(.kv-kop) { opacity: .45; }
.kv-laden { height: 320px; }
html.kv-open { overflow: hidden; }
.kv-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex: none; }
.kv-pad { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.kv-pad span:last-child { color: var(--ink); font-weight: 550; }
.kv-knoppen { display: flex; gap: 6px; }
.kv-rond { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: var(--vlak); color: var(--ink);
  box-shadow: var(--schaduw-klein); cursor: pointer; transition: background-color var(--snel), transform .06s; }
.kv-rond:hover { background: var(--hover); }
.kv-rond:active { transform: scale(.96); }
.kv-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex: none; }
.kv-voet form { margin: 0; }

/* Kalender */
.kk-balk { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex: none; }
.kk-maand { margin: 0; min-width: 180px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.kk-nav { display: flex; align-items: center; gap: 6px; }
.kk-legenda { display: flex; gap: 14px; margin-left: auto; font-size: 12px; color: var(--muted); }
.kk-punt { display: inline-flex; align-items: center; gap: 6px; }
.kk-punt::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--zacht); }
.kk-punt.afspraak::before { background: var(--accent); } .kk-punt.taak::before { background: var(--let-op); }
.kk-punt.import::before { background: var(--info); } .kk-punt.factuur::before { background: var(--muted); }
.kk-raster { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--weken), minmax(0, 1fr));
  border-radius: 14px; overflow: hidden; background: var(--lijn-zacht); gap: 1px; box-shadow: 0 0 0 1px var(--lijn-zacht); }
.kk-wd { padding: 8px 10px; background: var(--vlak-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.kk-dag { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; padding: 6px 7px 7px; background: var(--vlak); }
.kk-dag.buiten { background: var(--vlak-2); }
.kk-dag.buiten .kk-nr { color: var(--zacht); }
.kk-nr { align-self: flex-start; margin: 0 0 2px; padding: 2px 6px; border-radius: 6px; font-size: 13px; font-weight: 650; color: var(--ink); text-decoration: none !important; }
.kk-nr:hover { background: var(--hover); }
.kk-dag.vandaag { box-shadow: inset 0 0 0 2px var(--accent); }
.kk-dag.vandaag .kk-nr { align-self: stretch; background: var(--accent); color: #fff; }
.kk-ding { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 7px; border-radius: 6px; font-size: 12px; line-height: 1.35;
  text-decoration: none !important; color: var(--ink); background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--lijn-zacht); transition: filter var(--snel); }
.kk-ding:hover { filter: brightness(.96); }
.kk-ding span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-ding time { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.kk-ding b { flex: none; color: var(--fout); }
.kk-ding.afspraak { background: var(--accent-zacht); box-shadow: none; color: var(--accent-tekst); }
.kk-ding.taak { background: var(--let-op-zacht); box-shadow: none; color: var(--let-op); }
.kk-ding.taak.laat { background: var(--fout-zacht); color: var(--fout); }
.kk-ding.import { background: var(--info-zacht); box-shadow: none; color: var(--info); }
.kk-dag.voorbij:not(.vandaag) .kk-ding { opacity: .75; }
.kk-meer { padding: 0 7px; font-size: 11.5px; color: var(--muted); text-decoration: none !important; }

/* Instellingen */
.ki-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow-y: auto; min-height: 0; padding: 2px; }
.ki-kaart { position: relative; overflow: hidden; display: block; padding: 16px 18px; border-radius: 14px; background: var(--vlak); color: var(--ink);
  box-shadow: var(--schaduw-klein); text-decoration: none !important; }
a.ki-kaart { transition: box-shadow var(--snel), transform .18s cubic-bezier(.2, .7, .3, 1); }
a.ki-kaart:hover { box-shadow: 0 0 0 1.5px var(--accent), var(--schaduw); transform: translateY(-1px); }
.ki-kaart h3 { position: relative; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--accent-tekst); }
.ki-kaart p { position: relative; margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ki-kaart p b { color: var(--ink); font-weight: 600; }
.ki-tegel { min-height: 168px; }
.ki-mailbox { line-height: 1.3 !important; margin-bottom: 6px !important; }
.ki-mailbox span { font-size: 11px; }
.ki-mailbox small { font-size: 12px; }
.kv-achter { position: absolute; right: -14px; bottom: -18px; width: 112px; height: 112px; color: var(--accent); opacity: .08; pointer-events: none;
  transition: opacity .2s, transform .3s cubic-bezier(.2, .7, .3, 1); }
a.ki-kaart:hover .kv-achter { opacity: .14; transform: scale(1.05) rotate(-4deg); }
.ki-bedrijf { grid-column: span 2; display: grid; gap: 14px; align-content: start; }
.ki-bedrijf > * { min-width: 0; }   /* anders duwt een lange bedrijfsnaam de knop en de IBAN uit de kaart */
.ki-bedrijf-kop { display: flex; align-items: center; gap: 14px; }
.ki-bedrijf-kop .knop { flex: none; }
.ki-logo { display: grid; place-items: center; width: 60px; height: 60px; flex: none; padding: 6px; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--lijn-zacht); text-decoration: none !important; }
.ki-logo img { width: 100%; height: 100%; object-fit: contain; }
.ki-logo span { font-size: 12px; color: var(--muted); }
.ki-bedrijf-naam { flex: 1; min-width: 0; }
.ki-bedrijf-naam h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ki-bedrijf-naam p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.ki-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .6fr) minmax(0, 1.4fr); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.ki-feiten dt { font-size: 12px; color: var(--muted); }
.ki-feiten dd { margin: 2px 0 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.ki-team { grid-column: span 2; }
.ki-team ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ki-team li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--lijn-zacht); }
.ki-team li:first-child { border-top: 0; }
.ki-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent-zacht); color: var(--accent-tekst);
  font-size: 12px; font-weight: 700; }
.ki-wie { flex: 1; min-width: 0; display: grid; }
.ki-wie b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-wie b small { font-weight: 400; color: var(--muted); }
.ki-wie > small { font-size: 12px; color: var(--muted); }
.ki-wanneer { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ki-voet { margin: 8px 0 0 !important; padding-top: 8px; border-top: 1px solid var(--lijn-zacht); font-size: 12.5px !important; color: var(--accent-tekst) !important; }
@media (max-width: 900px) { .ki-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ki-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kk-legenda { display: none; } }

/* Uitklapmenu van het bedrijfslogo (ander bedrijf kiezen): ook zacht. */
details[open] > .menu { animation: kb-in .16s cubic-bezier(.2, .7, .3, 1); }

/* Uitklapmenu's (bedrijf wisselen, account), zoals in Depo Planner; ze vallen uit de kopbalk naar beneden. */
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px;
  background: var(--vlak); color: var(--ink); border-radius: 10px; padding: 4px;
  box-shadow: 0 0 0 .5px rgb(10 40 28 / 9%), 0 8px 20px rgb(10 40 28 / 12%), 0 28px 64px rgb(10 40 28 / 18%);
}
.menu form { margin: 0; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 32px;
  padding: 0 10px; border: none; border-radius: 6px; background: none; font-size: 13px; cursor: pointer;
  text-align: left; color: var(--ink); text-decoration: none !important;
}
.menu-item:hover { background: var(--accent); color: var(--op-accent); }

/* Alleen nog op de schermen zonder kopbalk (inloggen, registreren). */
.testbalk { position: fixed; right: 12px; bottom: 12px; z-index: 50; pointer-events: none; background: #c93400; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 10px; letter-spacing: .04em; opacity: .9; }

.pagina { padding: 28px 32px 48px; min-width: 0; width: 100%; max-width: 1280px; margin: 0 auto; }
.pagina-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pagina-kop h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
.pagina-kop .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zijkop { margin: 26px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Op een kleine laptop: iets kleinere sectienamen, datum weg; daaronder (geen doelgroep) mag het
   balkje omslaan. */
@media (max-width: 1360px) {
  .kb-hoofd { font-size: 17px; padding: 0 7px; }
}
@media (max-width: 1180px) { .kb-pijlen { display: none; } .kb-zoekknop { padding: 0 11px; } }
/* In de browser heeft die zijn eigen terug/vooruit; als geïnstalleerd programma (eigen venster) niet. */
@media (display-mode: browser) { .kb-pijlen { display: none; } }
@media (max-width: 900px) {
  :root { --kop: 0px; }
  .kopbalk { position: static; height: auto; flex-wrap: wrap; padding: 10px 12px; margin: 0; border-radius: 0; }
  .kb-logo { width: 44px; height: 44px; }
  .kb-rechts { width: 100%; justify-items: stretch; }
  .pagina { padding: 18px 16px 40px; }
  .pagina-kop h1 { font-size: 22px; }
}

/* --- Knoppen --- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background-color var(--snel), opacity var(--snel), transform .06s ease;
}
.knop:active:not(:disabled) { transform: scale(.98); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.knop.hoofd {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, white) 0%, var(--accent) 100%);
  color: var(--op-accent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 .5px 0 rgb(255 255 255 / 25%);
}
.knop.hoofd:hover { background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 85%, black) 100%); }
.knop.goed { background: var(--goed); color: #fff; }
.knop.stil { background: var(--knop-stil); color: var(--ink); box-shadow: var(--schaduw-klein); }
.knop.stil:hover { background: color-mix(in srgb, var(--knop-stil) 92%, var(--ink)); }
.knop.gevaar { background: none; color: var(--fout); box-shadow: none; }
.knop.gevaar:hover { background: var(--fout-zacht); }
.knop.klein { height: 26px; padding: 0 10px; font-size: 12px; }
form.inline { display: inline; margin: 0; }

.pil {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 10px;
  font-size: 11px; font-weight: 500; background: var(--hover); color: var(--muted); white-space: nowrap;
}
.pil.concept { background: var(--accent-zacht); color: var(--accent-tekst); }
.pil.goedgekeurd { background: var(--goed-zacht); color: var(--goed); }
.pil.verzonden { background: var(--goed); color: #fff; }
.pil.let-op { background: var(--let-op-zacht); color: var(--let-op); }
.pil.fout { background: var(--fout-zacht); color: var(--fout); }
/* .fout (foutmelding bij inloggen) staat verderop en gaf pilletjes 10 px binnenruimte en 16 px marge. */
.pil.fout { margin: 0; padding: 0 8px; border-radius: 10px; font-size: 11px; }

/* --- Velden --- */
input:not([type="checkbox"]):not([type="file"]), select {
  height: 32px; padding: 0 10px; border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); font-size: 13px; min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); }
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.formulier { display: grid; gap: 14px; }
.formulier label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.formulier label > input:not([type="checkbox"]) { color: var(--ink); font-weight: 400; width: 100%; }
.veldrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vinkje { display: inline-flex !important; align-items: center; gap: 8px !important; white-space: nowrap; font-size: 13px !important; color: var(--ink) !important; cursor: pointer; }
input.bedrag { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.zoekveld { width: 320px; max-width: 100%; }

/* --- Vlakken & tabellen --- */
.kaart { background: var(--vlak); border-radius: 16px; box-shadow: var(--schaduw); padding: 18px; min-width: 0; }
.tabel-houder { background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw); overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th {
  background: var(--vlak-2); text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted);
  padding: 0 12px; height: 34px; border-bottom: 1px solid var(--lijn-zacht); white-space: nowrap;
}
.tabel td { padding: 6px 12px; height: 42px; border-bottom: 1px solid var(--lijn-zacht); }
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel .rechts { text-align: right; }
.tabel .smal { width: 1%; white-space: nowrap; }
.tabel .afkappen { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover td { background: var(--hover); }
.tabel tr.let-op td { background: var(--let-op-zacht); }
.tabel tr.inactief td { color: var(--zacht); }
.tabel .groepsrij td { height: 32px; background: var(--achtergrond); font-size: 12px; font-weight: 600; color: var(--muted); }
.tabel tfoot td { height: 40px; border-top: 1px solid var(--lijn); font-weight: 600; }
.tabel td.compact { height: 36px; padding-top: 3px; padding-bottom: 3px; }

.melding { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; font-weight: 500; }
.melding.goed { background: var(--goed-zacht); color: var(--goed); }
.melding.fout { background: var(--fout-zacht); color: var(--fout); }
.melding.let-op { background: var(--let-op-zacht); color: var(--let-op); }
/* De uitkomst van een actie (melding/fout uit het adres) zweeft onder de kopbalk. Goed verdwijnt
   vanzelf, een fout blijft tot je hem wegklikt. */
.kb-melding { position: fixed; left: 50%; top: calc(var(--kop) + 10px); z-index: 45; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 10px 12px 10px 16px; border-radius: 12px; font-size: 13.5px;
  transform: translateX(-50%); box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 10px 28px -6px rgb(10 40 28 / 30%);
  animation: kb-melding-in .34s cubic-bezier(.2, .9, .3, 1.25) both; }
.melding.goed.kb-melding { background: var(--vlak); color: var(--goed); animation: kb-melding-in .34s cubic-bezier(.2, .9, .3, 1.25) both, kb-melding-uit .3s ease-in 3.6s forwards; }
.melding.fout.kb-melding { animation: kb-melding-in .34s cubic-bezier(.2, .9, .3, 1.25) both; background: var(--vlak); color: var(--fout); box-shadow: inset 3px 0 0 var(--fout), 0 0 0 1px rgb(0 0 0 / 4%), 0 10px 28px -6px rgb(10 40 28 / 30%); }
.melding.goed.kb-melding { box-shadow: inset 3px 0 0 var(--goed), 0 0 0 1px rgb(0 0 0 / 4%), 0 10px 28px -6px rgb(10 40 28 / 30%); }
.kb-melding-weg { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit;
  font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; }
.kb-melding-weg:hover { opacity: 1; background: var(--hover); }
@keyframes kb-melding-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.97); } }
@keyframes kb-melding-uit { to { opacity: 0; transform: translate(-50%, -6px); visibility: hidden; } }

.cijferrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cijfer { background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw); padding: 14px 16px; }
.cijfer .label { font-size: 12px; color: var(--muted); }
.cijfer .waarde { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* --- Sleepvak --- */
.sleepvak {
  display: grid; place-items: center; gap: 8px; text-align: center;
  padding: 34px 16px; border: 2px dashed var(--lijn); border-radius: 16px; background: var(--vlak);
  color: var(--muted); cursor: pointer; margin-bottom: 24px;
  transition: border-color var(--snel), background-color var(--snel);
}
.sleepvak:hover, .sleepvak.over { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-tekst); }
.sleepvak svg { color: var(--accent); }
.sleepvak strong { color: var(--ink); font-size: 15px; }
.sleepvak.bezig { opacity: .5; pointer-events: none; }
.sleepvak input { display: none; }

/* --- Factuur controleren --- */
.controle { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 18px; align-items: start; }
.voorbeeld { background: var(--vlak); border-radius: 16px; box-shadow: var(--schaduw); overflow: hidden; height: 80vh; min-height: 560px; }
.voorbeeld iframe { width: 100%; height: 100%; border: 0; display: block; }
.feiten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.feiten dt { color: var(--muted); }
.feiten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.knopstapel { display: grid; gap: 8px; margin-top: 16px; }
.regels { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.regels td { padding: 5px 0; border-bottom: 1px solid var(--lijn-zacht); }
.regels tr.tot td { border-bottom: none; font-weight: 650; }
.bladeren { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1000px) {
  .controle { grid-template-columns: 1fr; }
  .voorbeeld { height: 70vh; min-height: 420px; }
}

.toeslag { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px; background: var(--hover); color: var(--muted); margin: 1px 2px 1px 0; }
.toeslag.aan { background: var(--let-op-zacht); color: var(--let-op); }

.tabel td.cijfers, .tabel td.rechts { white-space: nowrap; }

/* --- Pop-up (Aanpassen) --- */
.venster {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--vlak);
  color: var(--ink);
  box-shadow: 0 0 0 .5px rgb(10 40 28 / 9%), 0 8px 20px rgb(10 40 28 / 12%), 0 28px 64px rgb(10 40 28 / 18%);
}
.venster::backdrop { background: rgb(8 22 16 / 38%); backdrop-filter: blur(2px); }
.venster[open] { animation: verschijn .16s cubic-bezier(.2, .7, .3, 1); }
@keyframes verschijn { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.venster > form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); gap: 0; }
.venster-kop { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.venster-kop h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.venster-inhoud { overflow-y: auto; padding: 8px 18px 16px; display: grid; gap: 16px; }
.venster-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--lijn-zacht); background: var(--vlak-2); }
.veld { display: grid; gap: 8px; }
.veldlabel { font-size: 12px; font-weight: 500; color: var(--muted); }
details > summary { cursor: pointer; }
.icoonknop { display: inline-grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.icoonknop:hover { background: var(--hover); color: var(--ink); }
.tekstknop { border: none; background: none; padding: 0; color: var(--accent-tekst); cursor: pointer; font: inherit; text-decoration: underline; }
kbd { font-family: var(--letter); font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: rgb(255 255 255 / 22%); }

table.bewerk { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bewerk th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 6px 6px; }
table.bewerk td { padding: 3px 6px; border-top: 1px solid var(--lijn-zacht); }
table.bewerk input { width: 100%; }
table.bewerk .aantal { width: 70px; }
table.bewerk .geld { width: 110px; }
table.bewerk td:has(input[name^="prijs::"]) input, table.bewerk input[name="regel_prijs"], table.bewerk input[name="regel_aantal"] { text-align: right; font-variant-numeric: tabular-nums; }
table.bewerk tr.let-op td { background: var(--let-op-zacht); }
.werkbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.werkbalk select { min-width: 220px; max-width: 100%; }
.knop-teller { background: rgb(255 255 255 / 24%); border-radius: 10px; padding: 0 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
table.bewerk td:has(.weg) { width: 36px; padding-right: 0; }
.venster.vraag { width: min(420px, calc(100vw - 32px)); }

/* Handmatige factuur maken: voorbeeld links, invoeren rechts. */
.controle.maken { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
.controle.maken .voorbeeld { background: #dfe7e2; position: sticky; top: calc(var(--kop) + 16px); }
#maker .knoprij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
@media (max-width: 1000px) {
  .controle.maken { grid-template-columns: minmax(0, 1fr); }
  .controle.maken .voorbeeld { position: static; height: 60vh; min-height: 380px; }
}
.icoonknop.weg-knop:hover { color: var(--fout); background: var(--fout-zacht); }
.tabel td.smal:has(.weg-knop) { padding: 0 6px; }


/* --- Inloggen (opzet uit Depo Planner, desktop/src/stijl.css) --- */
.inlog-scherm { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.inlog-kaart {
  width: 100%; max-width: 360px; background: var(--vlak); border-radius: 20px;
  padding: 36px 32px 28px; box-shadow: var(--schaduw); display: flex; flex-direction: column;
}
.inlog-form { display: flex; flex-direction: column; }
.inlog-merk { width: 56px; height: 56px; border-radius: 13px; margin: 0 auto 14px; }
.inlog-kaart h1 { margin: 0 0 24px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; text-align: center; }
.inlog-sub { margin: -16px 0 20px; text-align: center; color: var(--muted); font-size: 13px; }
.inlog-kaart label:not(.vinkje-label) { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.inlog-kaart input:not([type="checkbox"]) { height: 38px; margin-bottom: 14px; font-size: 14px; }
.inlog-onthouden { margin: 2px 0 20px; }
.vinkje-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.fout { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--fout-zacht); color: var(--fout); font-size: 13px; }
.gelukt { margin: 0 0 16px; padding: 12px; border-radius: 10px; background: var(--goed-zacht); color: var(--goed); font-size: 13px; text-align: center; }
.onderaan { margin: 16px 0 0; text-align: center; font-size: 13px; }
.hint { margin: -8px 0 16px; font-size: 11.5px; color: var(--muted); }
.knop.breed { width: 100%; height: 38px; font-size: 14px; }

/* --- Account, medewerkers --- */
/* Mailboxen (Instellingen > Mailbox, 2026-10-18): elke mailbox een kaart, onderaan toevoegen. */
.mb-lijst { display: grid; gap: 14px; }
.mb-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mb-kop .kaarttitel { margin: 0; }
.mb-kop .kaarttitel span { font-weight: 400; font-size: 13.5px; margin-left: 6px; }
.mb-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.mb-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-acties form { margin: 0; }
.mb-test { display: flex; gap: 6px; }
.mb-test input { width: 210px; height: 30px; font-size: 13px; }
.mb-wijzig { margin-top: 12px; }
.mb-wijzig > summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent-tekst); cursor: pointer; list-style: none; }
.mb-wijzig > summary::-webkit-details-marker { display: none; }
.mb-wijzig > summary::before { content: "›"; display: inline-block; transition: transform .16s ease; }
.mb-wijzig[open] > summary::before { transform: rotate(90deg); }
.mb-wijzig[open] .mb-velden { animation: omhoog .2s ease-out; }
.mb-velden { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.mb-nieuw { border: 1.5px dashed var(--lijn); box-shadow: none; background: var(--vlak-2); }
.mb-uitleg { margin-top: 14px; }
/* Klantprijzen (Klanten > Klantprijzen, 2026-10-26). */
.kp-kaart { display: grid; gap: 14px; margin-bottom: 14px; }
.kp-kaart form { margin: 0; }
.kp-nieuw { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.kp-nieuw label { flex: 0 1 200px; }
/* "Niet meenemen": een vak dat openklapt tot een lijst bedrijven met vinkjes. */
.kp-uit { position: relative; }
.kp-uit > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px;
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); color: var(--ink); cursor: pointer; font-size: 13px; }
.kp-uit > summary::-webkit-details-marker { display: none; }
.kp-uit > summary::after { content: "▾"; color: var(--muted); }
.kp-uit[open] > summary::after { content: "▴"; }
.kp-uit-lijst { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 300px; max-height: 320px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.formulier .kp-uit-lijst label { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 6px;
  font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer; }
.kp-uit-lijst label:hover { background: var(--hover); }
.kp-uit-veld { display: grid; gap: 6px; flex: 0 1 240px; }
.kp-veld-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.breed-veld { width: 100%; }
.kp-mee { text-align: center; width: 150px; }
.kp-mee input { width: 18px; height: 18px; }
.kp-opslaan { display: flex; justify-content: flex-end; }
/* Boekhouding (Instellingen > Boekhouding, Visma, 2026-10-26). */
.bh-kaart { display: grid; gap: 14px; max-width: 720px; margin-bottom: 14px; }
.bh-kaart form { margin: 0; }
.bh-gegevens { display: grid; gap: 6px; margin: 0; }
.bh-gegevens div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.bh-gegevens dt { font-size: 13px; color: var(--muted); }
.bh-gegevens dd { margin: 0; font-size: 14px; }
.bh-code, .bh-plakken { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.bh-code label, .bh-plakken label { flex: 1 1 280px; }
.bh-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.twee-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.kaarttitel { margin: 0; font-size: 15px; font-weight: 600; }
.link-melding { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-melding input { flex: 1; min-width: 200px; font-family: var(--mono); font-size: 12px; }
.logo-voorbeeld { height: 40px; max-width: 140px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.kaart.werkbalk { padding: 12px 14px; }

.of { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--muted); font-size: 12px; }
.of::before, .of::after { content: ""; flex: 1; height: 1px; background: var(--lijn-zacht); }

/* --- Segmenten (tabbladen), chips, tekstvak (zoals in Depo Planner) --- */
.segmenten { display: inline-flex; padding: 2px; gap: 2px; background: var(--hover); border-radius: 8px; flex-shrink: 0; }
.segmenten a, .segmenten button {
  border: none; background: none; height: 28px; padding: 0 14px; border-radius: 6px; display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; text-decoration: none !important;
}
.segmenten a:hover { color: var(--ink); }
.segmenten a.aan { background: var(--vlak); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 0 .5px rgb(0 0 0 / 4%); }
.keuzerij { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--lijn);
  background: var(--vlak); font-size: 12px; font-family: var(--mono); cursor: pointer; color: var(--ink);
}
.chip:hover { border-color: var(--accent); color: var(--accent-tekst); }
.tekstvak {
  display: block; width: 100%; padding: 9px 11px; line-height: 1.5; resize: vertical; border: 1px solid var(--lijn);
  border-radius: 8px; background: var(--vlak); font-size: 13.5px; color: var(--ink); font-weight: 400;
}
.tekstvak:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); }
.tekstvak.groot { min-height: 260px; }

/* Controle tegen de DHL-factuur op de importpagina (2026-10-13). */
.controleblok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px;
  border-radius: 10px; background: var(--vlak); box-shadow: var(--schaduw-klein); font-size: 13px; }
.controleblok.mis { background: var(--fout-zacht); color: var(--fout); }
.controleblok .rechts { margin-left: auto; }
.kleur-fout { color: var(--fout); }
.kleur-goed { color: var(--goed); }

/* --- Registreren met een code (2026-10-16, zoals in Depo Planner) --- */
.inlog-voet { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.al-account { margin: -4px 0 18px; text-align: center; font-size: 13px; color: var(--muted); }
.inlog-kaart:has(#registreren) { max-width: 400px; }
.inlog-kaart input.code-veld { font-family: var(--mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.inlog-kaart input.ongeldig { border-color: var(--fout); box-shadow: 0 0 0 3px var(--fout-zacht); }
.veld-onder { margin: -9px 0 12px; font-size: 12px; line-height: 1.4; min-height: 0; }
.veld-onder:empty { display: none; }
.veld-fout { color: var(--fout); }
.veld-goed { color: var(--goed); }
.veld-goed::before { content: "✓ "; }
.code-bedrijf { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--goed-zacht); font-size: 13.5px; line-height: 1.35; }
.code-bedrijf[hidden] { display: none; }
.code-bedrijf-icoon { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--goed); color: #fff; font-size: 13px; font-weight: 700; }
.naam-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.naam-rij > div { display: flex; flex-direction: column; min-width: 0; }
.eisen { list-style: none; margin: -6px 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
  font-size: 12px; color: var(--muted); }
.eisen li { display: flex; align-items: center; gap: 6px; transition: color var(--snel); }
.eisen li::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--zacht);
  transition: background var(--snel), box-shadow var(--snel); }
.eisen li.gehaald { color: var(--goed); }
.eisen li.gehaald::before { background: var(--goed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: none; }
@media (max-width: 420px) { .naam-rij, .eisen { grid-template-columns: 1fr; } .naam-rij { row-gap: 0; } }

/* Bedrijfscode onder Medewerkers */
.kaart.bedrijfscode { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 4px; }
.bedrijfscode-tekst { flex: 1 1 280px; min-width: 0; display: grid; gap: 4px; }
.bedrijfscode-tekst p { margin: 0; }
.bedrijfscode-code { font-family: var(--mono); font-size: 18px; letter-spacing: .1em; padding: 6px 12px; border-radius: 8px;
  background: var(--vlak-2); box-shadow: var(--schaduw-klein); user-select: all; }
.kaart.bedrijfscode .knoprij { display: flex; gap: 6px; flex-wrap: wrap; }
.kaart.bedrijfscode form { margin: 0; }

/* Account aanmaken met een tijdelijk wachtwoord (2026-10-16) */
.account-maken { align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.account-maken label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); flex: 1 1 160px; min-width: 0; }
.account-maken label:nth-child(3) { flex: 0 0 150px; }
.account-maken input, .account-maken select { width: 100%; min-width: 0; }
.account-maken input.mono { font-family: var(--mono); letter-spacing: .04em; }
.account-maken input.ongeldig { border-color: var(--fout); box-shadow: 0 0 0 3px var(--fout-zacht); }
.account-maken .breed-melding { flex-basis: 100%; margin: 0; font-size: 12.5px; }
.kaart.tijdelijk-klaar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 16px;
  margin-top: 16px; box-shadow: 0 0 0 1.5px var(--goed), var(--schaduw-klein); }
.kaart.tijdelijk-klaar p { margin: 4px 0 0; }
.tijdelijk-gegevens { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13.5px; align-items: center; }
.tijdelijk-gegevens dt { color: var(--muted); }
.tijdelijk-gegevens dd { margin: 0; overflow-wrap: anywhere; }
.kaart.tijdelijk-klaar > .knop { grid-column: 1 / -1; justify-self: start; }

/* ===========================================================================================
   Taken en agenda (2026-10-17), overgenomen uit Depo Planner (desktop/src/stijl.css)
   =========================================================================================== */
.nav-teller { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 650; background: rgb(255 255 255 / 14%); color: inherit; }
.nav-teller.rood { background: var(--fout); color: #fff; }
.segmenten button.aan { background: var(--vlak); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 0 .5px rgb(0 0 0 / 4%); }
.segmenten button:hover { color: var(--ink); }
.pagina:has(.agenda), .pagina:has(.herinneringen) { max-width: none; }

/* Melding onderin, met "Ongedaan maken" */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px; border-radius: 12px; background: #1d2427; color: #fff; font-size: 13.5px; box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2, .7, .3, 1), opacity .18s; }
.toast.zichtbaar { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast.fout { background: var(--fout); }
.toast button { border: 0; background: rgb(255 255 255 / 14%); color: #fff; font: inherit; font-weight: 600; height: 28px; padding: 0 10px; border-radius: 7px; cursor: pointer; }
.toast button:hover { background: rgb(255 255 255 / 24%); }

/* Venster zonder <dialog> (Taken: lijst maken) */
.venster-achter { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgb(8 22 16 / 38%); backdrop-filter: blur(2px); }
.venster-achter .venster { width: min(400px, 100%); display: flex; flex-direction: column; animation: verschijn .16s cubic-bezier(.2, .7, .3, 1); }
.venster-achter .venster-inhoud p { margin: 0; }

/* --- Taken: zoals Herinneringen op de Mac --- */
.herinneringen { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .herinneringen { grid-template-columns: minmax(0, 1fr); } }
.hr-zij { display: grid; gap: 14px; padding: 14px; border-radius: 16px; background: var(--vlak); box-shadow: var(--schaduw); position: sticky; top: calc(var(--kop) + 16px); }
.hr-zoek { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--hover); color: var(--muted); }
.hr-zoek input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; box-shadow: none; padding: 0; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.hr-slim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hr-tegel { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 8px; align-items: center; min-height: 74px;
  padding: 9px 10px 8px; border: 0; border-radius: 12px; text-align: left; cursor: pointer; font: inherit;
  background: color-mix(in srgb, var(--ink) 6%, var(--vlak)); color: var(--ink); }
.hr-tegel:hover { background: color-mix(in srgb, var(--ink) 10%, var(--vlak)); }
.hr-tegel b { font-size: 22px; font-weight: 700; justify-self: end; letter-spacing: -0.02em; }
.hr-tegel-naam { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hr-tegel.aan { background: var(--k); color: #fff; }
.hr-tegel.aan .hr-tegel-naam { color: #fff; }
.hr-tegel.aan .hr-rond { background: #fff; color: var(--k); }
.hr-tegel:focus-visible, .hr-lijst:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hr-rond { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--k, var(--muted)); color: #fff; flex: 0 0 auto; }
.hr-rond.klein { width: 26px; height: 26px; }
.hr-rond.groot { width: 64px; height: 64px; }
.hr-kopje { margin: 6px 4px -6px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.hr-lijsten { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hr-lijst { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 8px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; cursor: pointer; }
.hr-lijst:hover { background: var(--hover); }
.hr-lijst.aan { background: color-mix(in srgb, var(--accent) 14%, var(--vlak)); font-weight: 600; }
.hr-lijst-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-lijst-erbij { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.hr-lijst-erbij:hover { background: var(--hover); color: var(--ink); }

.hr-hoofd { min-width: 0; padding: 20px 28px 24px; border-radius: 16px; background: var(--vlak); box-shadow: var(--schaduw); min-height: 60vh; }
.hr-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hr-kop h1 { margin: 0; font-size: 30px; font-weight: 750; letter-spacing: -0.025em; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-aantal { margin-left: auto; font-size: 30px; font-weight: 750; letter-spacing: -0.02em; }
.hr-nieuw-knop { height: 36px; gap: 6px; }
.hr-groep { margin-top: 10px; }
.hr-groep-kop { display: flex; align-items: center; gap: 6px; margin: 14px 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.hr-rijen { list-style: none; margin: 0; padding: 0; }
.hr-rij { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  background: linear-gradient(var(--lijn-zacht), var(--lijn-zacht)) no-repeat left 44px bottom / calc(100% - 44px) 1px;
  transition: height .26s cubic-bezier(.3, .7, .2, 1), opacity .2s, padding .26s; }
.hr-rij.inklappen { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.hr-rondje { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer; }
.hr-rondje > span, .hr-rondje.leeg::before { content: ""; width: 21px; height: 21px; box-sizing: border-box; border-radius: 50%;
  border: 1.6px solid color-mix(in srgb, var(--ink) 28%, transparent); transition: border-color .15s, background .15s; }
.hr-rondje:hover > span { border-color: var(--k); }
.hr-rondje.af > span { border-color: var(--k); background: radial-gradient(circle, var(--k) 0 5.5px, transparent 6.5px); }
.hr-rondje:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hr-voor { flex: 0 0 36px; display: grid; place-items: center; height: 36px; color: var(--muted); }
.hr-rij-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 0 8px; border: 0;
  background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: text; }
.hr-rij-tekst:disabled { cursor: default; }
.hr-titel { font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.hr-uitroep { color: #FF3B30; font-weight: 800; margin-right: 5px; }
.hr-notitie { font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--muted); }
.hr-wanneer { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.hr-wanneer.vandaag { color: #0A6CDB; background: rgb(0 122 255 / 12%); }
.hr-wanneer.te-laat { color: #E0261B; background: rgb(255 59 48 / 12%); }
.hr-plek { display: inline-flex; align-items: center; gap: 4px; }
.hr-klant { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-tekst); font-weight: 500; }
.hr-gezichten { display: inline-flex; align-items: center; margin: 9px 4px 0 8px; }
.hr-gezichten > .hr-avatar + .hr-avatar { margin-left: -4px; }
.hr-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--k, var(--muted));
  color: #fff; font-size: 9.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--vlak); }
.hr-rij.grijs .hr-titel, .hr-rij.grijs .hr-notitie { color: var(--muted); transition: color .2s; }
.hr-rij.grijs .hr-wanneer { color: var(--muted); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hr-rij.bewerk { background: color-mix(in srgb, var(--accent) 6%, var(--vlak)); border-radius: 12px; padding: 6px 10px 10px 0; margin: 2px 0; }
.hr-bewerk { flex: 1; min-width: 0; display: grid; gap: 4px; padding-top: 6px; }
.hr-titelregel { display: flex; align-items: center; }
.hr-bewerk input.hr-titel-veld, .hr-plek-veld input { flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; font: inherit; font-size: 15.5px; color: var(--ink); outline: none; }
.hr-bewerk textarea.hr-notitie-veld { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; resize: none;
  overflow: hidden; font: inherit; font-size: 13.5px; color: var(--muted); outline: none; }
.hr-plek-veld { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.hr-plek-veld input { font-size: 13.5px; }
.hr-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.hr-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); font: inherit; font-size: 13px; font-weight: 550; color: var(--ink); cursor: pointer; white-space: nowrap; }
.hr-chip:hover { border-color: var(--zacht); }
.hr-chip.open { border-color: var(--accent); }
.hr-chip.gezet { background: var(--accent-zacht); border-color: transparent; color: var(--accent-tekst); }
.hr-chip.rood { background: rgb(255 59 48 / 12%); border-color: transparent; color: #E0261B; }
.hr-uitroep-chip { color: #FF3B30; font-weight: 800; }
.hr-chip-groep { display: inline-flex; align-items: center; }
.hr-chip-groep.gezet .hr-chip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hr-chip-x { display: inline-grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 0 8px 8px 0; background: var(--accent-zacht);
  color: var(--accent-tekst); cursor: pointer; }
.hr-stip { width: 10px; height: 10px; border-radius: 50%; }
.hr-weg { margin-left: auto; color: var(--muted); }
.hr-herstel { margin: 8px 0 0 auto; gap: 4px; }
@keyframes uitklappen { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.hr-pop { position: fixed; z-index: 120; min-width: 250px; padding: 6px; display: grid; border-radius: 12px; background: var(--vlak);
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%), 0 0 0 1px var(--lijn); animation: uitklappen .16s cubic-bezier(.2, .7, .3, 1); }
.hr-pop.breed { width: 300px; gap: 8px; padding: 10px; }
.hr-pop-kop { padding: 6px 10px 4px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.hr-pop-regel { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; cursor: pointer; }
.hr-pop-regel > svg { color: var(--muted); flex: 0 0 auto; }
.hr-pop-regel > span { display: grid; gap: 1px; }
.hr-pop-regel small { font-size: 12.5px; color: var(--muted); }
.hr-pop-regel:hover { background: var(--hover); }
.hr-pop-regel.aan { color: var(--accent-tekst); font-weight: 600; }
.hr-pop-regel.gevaar-tekst, .hr-pop-regel.gevaar-tekst > svg { color: var(--fout); }
.hr-pop hr { width: calc(100% - 12px); margin: 4px 6px; border: 0; border-top: 1px solid var(--lijn-zacht); }
.hr-pop-tijd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 14px; }
.hr-pop-tijd input { width: 96px; height: 32px; }
.hr-pop-klanten { max-height: 300px; overflow-y: auto; margin-top: 6px; }
.hr-pop-klanten > p { margin: 8px 6px; }
.hr-pop-mensen { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.hr-pop-mensen .vinkje-label { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px;
  border-radius: 8px; cursor: pointer; }
.hr-pop-mensen .vinkje-label:hover { background: var(--hover); }
.hr-kalender { width: 256px; padding: 4px; }
.hr-kal-kop { display: flex; align-items: center; gap: 2px; padding: 2px 2px 8px 8px; }
.hr-kal-kop b { flex: 1; font-size: 14px; text-transform: capitalize; }
.hr-kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hr-kal-wd { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 4px; }
.hr-kal-dag { position: relative; height: 34px; border: 0; border-radius: 17px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.hr-kal-dag:hover { background: var(--hover); }
.hr-kal-dag.buiten { color: var(--zacht); }
.hr-kal-dag.nu { color: #FF3B30; font-weight: 700; }
.hr-kal-dag.aan { background: var(--accent); color: var(--op-accent); font-weight: 700; }
.hr-kal-dag.gemarkeerd::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: currentColor; opacity: .55; }
.hr-nieuw-regel { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; margin-top: 6px; padding: 0 8px; border: 0; border-radius: 10px;
  background: none; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; }
.hr-nieuw-regel:hover { background: var(--hover); color: var(--accent-tekst); }
.hr-leeg { margin: 40px 0 20px; text-align: center; color: var(--muted); }
.hr-lijstvenster { display: grid; justify-items: center; gap: 16px; }
.hr-lijstvenster .hr-rond { color: #fff; }
.hr-lijstvenster input { text-align: center; font-size: 17px; font-weight: 600; width: 100%; height: 40px; }
.hr-kleuren { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hr-kleur { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; }
.hr-kleur.aan { outline: 3px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: 2px; }
.skelet-lijst { display: grid; gap: 14px; padding: 18px 0; }
.skelet-lijst span { height: 18px; border-radius: 6px; background: var(--hover); animation: skelet 1.2s ease-in-out infinite alternate; }
.skelet-lijst span:nth-child(2) { width: 70%; }
.skelet-lijst span:nth-child(3) { width: 45%; }
@keyframes skelet { to { opacity: .45; } }

/* --- Agenda: het depotrooster als Apple Agenda --- */
.agenda { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .agenda { grid-template-columns: minmax(0, 1fr); } .ag-zij { display: none; } }
.ag-zij { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--vlak); box-shadow: var(--schaduw); position: sticky; top: calc(var(--kop) + 16px); }
.ag-zij .hr-kalender { width: auto; padding: 0; }
.ag-zij .hr-kal-dag { height: 30px; font-size: 12.5px; }
.ag-personen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ag-personen li { display: flex; align-items: center; gap: 6px; }
.ag-persoon { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ag-persoon:hover { background: var(--hover); }
.ag-persoon input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border-radius: 5px;
  border: 2px solid var(--k); background: var(--vlak); cursor: pointer; display: grid; place-items: center; }
.ag-persoon input:checked { background: var(--k) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ag-persoon input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-persoon-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-kleurknop { width: 22px; height: 22px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--k); cursor: pointer;
  box-shadow: 0 0 0 2px var(--vlak), 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.ag-snel { display: flex; gap: 14px; padding: 0 6px; font-size: 12.5px; }
.ag-snel .tekstknop { text-decoration: none; }
.ag-kleuren { padding: 6px 10px 10px; max-width: 230px; }

.ag-hoofd { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.ag-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--lijn-zacht); }
.ag-pijlen { display: flex; gap: 2px; }
.ag-periode { margin: 0; flex: 1; min-width: 200px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.ag-periode::first-letter { text-transform: uppercase; }
.ag-periode .gedempt { font-size: 14px; font-weight: 500; margin-left: 6px; }
.ag-balk .knop.klein { height: 30px; padding: 0 12px; font-size: 13px; gap: 4px; }

.ag-raster { --hoek: 56px; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; }
.ag-kop, .ag-heledag { display: grid; grid-template-columns: var(--hoek) repeat(var(--kolommen), minmax(0, 1fr)); border-bottom: 1px solid var(--lijn-zacht); }
.ag-hoek { font-size: 10.5px; color: var(--muted); padding: 6px 8px 0 0; text-align: right; }
.ag-kolomkop { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 10px 6px 8px; border: 0; border-left: 1px solid var(--lijn-zacht);
  background: none; font: inherit; color: var(--ink); cursor: zoom-in; }
.ag-kolomkop:hover { background: var(--hover); }
.ag-kolomkop small { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ag-kolomkop b { font-size: 17px; font-weight: 650; display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 15px; }
.ag-kolomkop.vandaag small { color: #FF3B30; }
.ag-kolomkop.vandaag b { background: #FF3B30; color: #fff; }
.ag-kolomkop.persoon { cursor: default; align-items: center; justify-content: flex-start; padding-left: 12px; }
.ag-kolomkop.persoon:hover { background: none; }
.ag-kolomkop.persoon i { width: 10px; height: 10px; border-radius: 5px; flex: 0 0 auto; }
.ag-kolomkop.persoon b { font-size: 14px; min-width: 0; height: auto; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hd-vak { min-height: 30px; padding: 3px; border-left: 1px solid var(--lijn-zacht); display: flex; flex-direction: column; gap: 2px; cursor: copy; }
.ag-hd-blok { display: block; width: 100%; padding: 2px 7px; border: 0; border-radius: 5px; text-align: left; font: inherit; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--kleur) 18%, var(--vlak)); color: color-mix(in srgb, var(--kleur) 75%, var(--ink)); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ag-scroll { position: relative; display: flex; height: calc(100vh - 250px - var(--kop)); min-height: 420px; overflow-y: auto; }
.ag-tijden { position: relative; flex: 0 0 var(--hoek); height: calc(var(--uur) * 24); }
.ag-tijden span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-kolommen { flex: 1; display: grid; grid-template-columns: repeat(var(--kolommen), minmax(0, 1fr)); height: calc(var(--uur) * 24); }
.ag-kolom { position: relative; border-left: 1px solid var(--lijn-zacht); cursor: copy;
  background-image:
    repeating-linear-gradient(to bottom, var(--lijn-zacht) 0 1px, transparent 1px var(--uur)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--uur) / 2), color-mix(in srgb, var(--lijn-zacht) 50%, transparent) calc(var(--uur) / 2) calc(var(--uur) / 2 + 1px), transparent calc(var(--uur) / 2 + 1px) var(--uur)); }
.ag-kolom.vandaag { background-color: color-mix(in srgb, var(--accent) 3%, var(--vlak)); }
.ag-nu { position: absolute; left: -1px; right: 0; height: 2px; background: #FF3B30; z-index: 4; pointer-events: none; }
.ag-nu::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 4px; background: #FF3B30; }
/* Zoals de blokken "plannen" in het depotrooster: licht gevuld in de kleur van de persoon. */
.ag-blok { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 3px 7px; overflow: hidden; border-radius: 6px;
  border-left: 3px solid var(--kleur); background: color-mix(in srgb, var(--kleur) 16%, var(--vlak)); color: color-mix(in srgb, var(--kleur) 70%, var(--ink));
  font-size: 12px; line-height: 1.3; cursor: pointer; touch-action: none; box-shadow: 0 0 0 1px var(--vlak); }
.ag-blok.bewerkbaar { cursor: grab; }
.ag-blok.sleept { cursor: grabbing; z-index: 6; opacity: .92; box-shadow: 0 8px 20px rgb(0 0 0 / 18%); }
.ag-blok.gekozen { background: var(--kleur); color: #fff; }
.ag-blok.kort { flex-direction: row; align-items: center; padding-top: 0; padding-bottom: 0; }
.ag-blok-titel { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-blok-tijd, .ag-blok-plek { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-greep { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.ag-spook { position: absolute; left: 2px; right: 2px; z-index: 5; padding: 3px 7px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 22%, var(--vlak)); color: var(--accent-tekst); border: 1.5px dashed var(--accent); pointer-events: none; }

.ag-maand { display: flex; flex-direction: column; }
.ag-maand-kop { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--lijn-zacht); }
.ag-maand-kop span { padding: 8px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: right; }
.ag-maand-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(108px, 1fr); }
.ag-dagvak { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 6px; border-left: 1px solid var(--lijn-zacht);
  border-bottom: 1px solid var(--lijn-zacht); cursor: copy; }
.ag-dagvak:nth-child(7n + 1) { border-left: 0; }
.ag-dagvak.buiten { background: var(--vlak-2); }
.ag-dagvak.buiten .ag-dagnr { color: var(--zacht); }
.ag-dagvak.sleepdoel, .ag-hd-vak.sleepdoel { background: var(--accent-zacht); }
.ag-dagnr { align-self: flex-end; min-width: 26px; height: 26px; padding: 0 5px; border: 0; border-radius: 13px; background: none; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--ink); cursor: zoom-in; }
.ag-dagnr:hover { background: var(--hover); }
.ag-dagvak.vandaag .ag-dagnr { background: #FF3B30; color: #fff; }
.ag-regel { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; height: 20px; padding: 0 5px; border: 0; border-radius: 4px; background: none;
  font: inherit; font-size: 12px; color: var(--ink); text-align: left; cursor: pointer; }
.ag-regel::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 4px; background: var(--kleur); }
.ag-regel:hover { background: var(--hover); }
.ag-regel span { color: var(--muted); }
.ag-regel b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-regel.heledag { background: color-mix(in srgb, var(--kleur) 18%, var(--vlak)); color: color-mix(in srgb, var(--kleur) 75%, var(--ink)); }
.ag-regel.heledag::before { display: none; }
.ag-meer { align-self: flex-start; border: 0; background: none; padding: 0 5px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ag-meer:hover { color: var(--accent-tekst); }

/* Het kaartje rechts, zoals in het depotrooster */
.ag-kaartje { position: fixed; top: 84px; right: 28px; z-index: 60; width: 320px; max-height: calc(100vh - 110px); overflow: hidden auto; padding: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-radius: 14px; background: var(--vlak);
  box-shadow: 0 0 0 .5px rgb(10 40 28 / 9%), 0 8px 20px rgb(10 40 28 / 12%), 0 28px 64px rgb(10 40 28 / 18%); animation: uitklappen .16s cubic-bezier(.2, .7, .3, 1); }
.ag-kaartje header { display: flex; align-items: center; gap: 10px; }
.ag-kaartje header i { width: 14px; height: 14px; border-radius: 7px; flex: 0 0 auto; }
.ag-kaartje header div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-kaartje header b { font-size: 16px; }
.ag-kaartje input, .ag-kaartje select, .ag-kaartje textarea { width: 100%; font: inherit; font-size: 14px; }
.ag-kaartje .ag-titel { height: 40px; font-size: 16px; font-weight: 600; }
.ag-veldrij { display: flex; align-items: flex-end; gap: 10px; }
.ag-veldrij > * { flex: 1; min-width: 0; }
.ag-veld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ag-heledag-vink { flex: 0 0 auto; height: 34px; color: var(--ink); font-weight: 500; }
.ag-heledag-vink input { width: auto; }
.ag-wie { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-wie-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--lijn); border-radius: 14px;
  background: var(--vlak); font: inherit; font-size: 13px; font-weight: 550; color: var(--ink); cursor: pointer; }
.ag-wie-chip::before { content: ""; width: 9px; height: 9px; border-radius: 5px; border: 2px solid var(--k); box-sizing: border-box; }
.ag-wie-chip.aan { background: color-mix(in srgb, var(--k) 16%, var(--vlak)); border-color: transparent; color: color-mix(in srgb, var(--k) 70%, var(--ink)); }
.ag-wie-chip.aan::before { background: var(--k); }
.ag-kaartje footer { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ag-kaartje footer .ruimte { flex: 1; }
.ag-weg { color: var(--fout); gap: 4px; padding: 0 8px; }
.ag-alleen-lezen { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ag-alleen-lezen.notitie { white-space: pre-wrap; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-blok { background: color-mix(in srgb, var(--kleur) 30%, var(--vlak)); color: color-mix(in srgb, var(--kleur) 40%, white); }
  :root:not([data-theme="light"]) .ag-hd-blok, :root:not([data-theme="light"]) .ag-regel.heledag { background: color-mix(in srgb, var(--kleur) 30%, var(--vlak)); color: color-mix(in srgb, var(--kleur) 40%, white); }
}
/* "Beweging beperken" in het systeem: alles stil, zoals in Depo Planner. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Klantgesprekken in de agenda (2026-10-17) */
.ag-kaartje { width: 344px; }
.segmenten.vol.ag-soort { display: flex; width: 100%; }
.segmenten.vol.ag-soort button { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 12px; }
.ag-klant { display: grid; gap: 1px; font-size: 13px; font-weight: 400; color: var(--ink); min-width: 0; }
.ag-klant b { font-size: 14px; font-weight: 650; }
.ag-klant span { overflow-wrap: anywhere; }
.ag-klant-gekozen { display: flex; align-items: flex-start; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 10px; background: var(--vlak-2);
  box-shadow: inset 0 0 0 1px var(--lijn-zacht); }
.ag-klant-gekozen .ag-klant { flex: 1; }
.ag-kaartje > .ag-klant { padding: 10px 12px; border-radius: 10px; background: var(--vlak-2); }
.ag-klantlijst { display: grid; margin-top: -6px; padding: 4px; border-radius: 10px; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn), 0 8px 20px rgb(0 0 0 / 10%); }
.ag-klantlijst[hidden] { display: none; }
.ag-klantlijst .hr-pop-regel { min-height: 40px; font-size: 14px; }
.ag-klantlijst p { margin: 6px 8px; }
.ag-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-links .knop { gap: 5px; text-decoration: none; }
.gesprekken .tussenkop td { padding-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: var(--vlak-2); }
.gesprekken tr.voorbij td { color: var(--muted); }
/* Taken bij een klant (klantdossier, 2026-10-18) */
.ktaak-acties { justify-content: flex-end; margin-bottom: 12px; }
.ktaak-telaat td.cijfers { color: var(--fout); }
.gesprekken tr.voorbij td.sterk { font-weight: 500; }

/* --- Klantdossier (2026-10-17): zoals een spelersprofiel in Football Manager --- */
.pil.goed { background: var(--goed-zacht); color: var(--goed); }
.pil.fout { background: var(--fout-zacht); color: var(--fout); }
/* .fout (foutmelding bij inloggen) staat verderop en gaf pilletjes 10 px binnenruimte en 16 px marge. */
.pil.fout { margin: 0; padding: 0 8px; border-radius: 10px; font-size: 11px; }
.pil.gewoon { background: var(--hover); color: var(--ink); }
.dossier { display: grid; gap: 16px; }
.dossier-kop { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; }
.dossier-embleem { display: grid; place-items: center; width: 68px; height: 68px; flex: 0 0 auto; border-radius: 18px; background: var(--k);
  color: #fff; font-size: 26px; font-weight: 750; letter-spacing: -0.02em; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 14%); }
.dossier-naam { flex: 1 1 320px; min-width: 0; display: grid; gap: 4px; }
.dossier-naam h1 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -0.025em; }
.dossier-naam p { margin: 0; font-size: 13.5px; }
.dossier-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dossier-labels .pil { height: 22px; font-size: 12px; }
.dossier-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.dossier-tabs { justify-self: start; flex-wrap: wrap; }
.dossier-tabs a { gap: 6px; }
.dossier-tabs a span { font-size: 11.5px; }
.dossier-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1150px) { .dossier-raster { grid-template-columns: minmax(0, 1fr); } }
.dossier-hoofd, .dossier-zij { display: grid; gap: 16px; min-width: 0; }
.dossier .kaart h2 { margin: 0; font-size: 14px; font-weight: 650; }
.dossier .kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tegel { display: grid; gap: 2px; padding: 14px 16px; }
.tegel-label { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tegel b { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; }
.tegel-link { text-decoration: none; color: inherit; }
.tegel-link:hover b { color: var(--accent-tekst); }

.staafjes { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 4px; height: 170px; align-items: end; }
.staaf { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 16px; }
.staaf span { width: 100%; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--accent); opacity: .85; transition: opacity var(--snel); }
.staaf:hover span { opacity: 1; }
.staaf:last-child span { background: color-mix(in srgb, var(--accent) 55%, var(--vlak)); }
.staaf small { position: absolute; bottom: 0; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dossier-mix { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mix ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.mix li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.mix li:has(.gedempt) { grid-template-columns: minmax(0, 1fr) auto auto; }
.mix-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-balk { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.mix-balk i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left; animation: breed .7s cubic-bezier(.2, .7, .3, 1) backwards .1s; }

/* Eigenschappen 1–20 in de kleuren van Football Manager */
.profiel ul { list-style: none; margin: 0; padding: 0; display: grid; }
.profiel li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn-zacht); }
.profiel li:first-child { border-top: 0; }
.profiel-naam { display: grid; font-size: 14px; font-weight: 600; min-width: 0; }
.profiel-naam small { font-size: 12px; font-weight: 400; color: var(--muted); }
.fm { display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 7px; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #fff; }
.fm-0 { background: var(--hover); color: var(--muted); }
.fm-1 { background: #c8433a; }
.fm-2 { background: #e0912b; }
.fm-3 { background: #3d9a4e; }
.fm-4 { background: #12a37d; box-shadow: 0 0 0 2px color-mix(in srgb, #12a37d 30%, transparent); }

.vorm-blokjes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.vorm-blok { display: grid; place-items: center; gap: 0; height: 46px; border-radius: 8px; font-size: 14px; font-weight: 750; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.vorm-blok small { font-size: 9.5px; font-weight: 600; opacity: .85; }
.vorm-blok.hoog { background: #3d9a4e; }
.vorm-blok.voor { background: none; color: var(--zacht); box-shadow: inset 0 0 0 1px var(--lijn); }
.vorm-blok.gewoon { background: #8f9aa1; }
.vorm-blok.laag { background: #e0912b; }
.vorm-blok.geen { background: var(--hover); color: var(--muted); }

.contact dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 10px 0 0; font-size: 13.5px; }
.contact dt { color: var(--muted); }
.contact dd { margin: 0; overflow-wrap: anywhere; }
.notitie-snel { display: grid; gap: 6px; margin-bottom: 10px; }
.notitie-snel button { justify-self: end; }
.notitie-snel textarea, .notitie-nieuw textarea, .notitie-wijzig textarea { width: 100%; resize: vertical; font: inherit; font-size: 13.5px; }
.notities-kort .notitie { padding: 9px 0; border-top: 1px solid var(--lijn-zacht); }
.notitie p { margin: 0 0 3px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; }
.notitie.vast { position: relative; }
.notities-kort .notitie.vast { padding-left: 10px; box-shadow: inset 3px 0 0 var(--let-op); }
.notitie-nieuw { display: grid; gap: 10px; margin-bottom: 14px; }
.notities-lijst { display: grid; gap: 12px; }
.notities-lijst .notitie { display: grid; gap: 8px; }
.notities-lijst .notitie.vast { box-shadow: inset 4px 0 0 var(--let-op), var(--schaduw); }
.notities-lijst header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notitie-acties { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.notitie-acties form { margin: 0; }
.notitie-tekst { font-size: 14px !important; }
.notitie-wijzig { display: none; gap: 8px; }
.notitie.bewerken .notitie-wijzig { display: grid; }
.notitie.bewerken .notitie-tekst { display: none; }
.gesprek-notitie { font-weight: 400; white-space: pre-wrap; margin-top: 2px; }

/* --- Hoofdscherm (2026-10-18), opgezet als het portaal van Football Manager --------------
   Alles met pt- (portaal) of pb- (berichten): de klasse `fm` bestond al voor de cijferbadges
   op de klantpagina. Het scherm past precies in de hoogte onder de kopbalk (gebruiker: "niet
   naar beneden scrollen"); alleen de berichtenlijst, het klassement en een geopend bericht
   scrollen binnen hun eigen kaart. Berichten | midden | rechts, vanaf 1100 px breed; smaller
   (of lager dan ~600 px) valt het terug op onder elkaar met gewoon scrollen. */
.pagina:has(.portaal) { max-width: none; padding: 14px; }
.portaal { display: grid; gap: 14px; height: calc(100vh - var(--kop) - 28px); min-height: 560px;
  grid-template-columns: 300px minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "berichten midden rechts"; }
@media (min-width: 1560px) { .portaal { grid-template-columns: 340px minmax(0, 1fr) 340px; } }
.pt-berichten { grid-area: berichten; min-height: 0; }
.pt-midden { grid-area: midden; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pt-rechts { grid-area: rechts; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1099px) {
  .portaal { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "midden" "rechts" "berichten"; }
  .pt-berichten { height: 70vh !important; }
}

.pt-kaart { background: var(--vlak); color: var(--ink); border-radius: 14px; box-shadow: var(--schaduw); padding: 14px 16px; min-width: 0; }
.pt-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pt-kop h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.005em; color: var(--ink); }
.pt-kop a, .pt-kop span { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.pt-kop a:hover { color: var(--accent-tekst); }
.pt-leeg { margin: 0; font-size: 13px; color: var(--muted); }
.pt-leeg a { color: var(--accent-tekst); }

/* Berichten */
.pt-berichten { color: var(--ink); background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw); display: flex; flex-direction: column; overflow: hidden; }
.pb-kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; }
.pb-kop h2 { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); }
.pb-knoppen { display: flex; gap: 2px; }
.pb-tabs { display: flex; margin: 0 12px 10px; padding: 2px; border-radius: 8px; background: var(--hover); }
.pb-tabs button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 6px; border: 0;
  border-radius: 6px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pb-tabs button:hover { color: var(--ink); }
.pb-tabs button.aan { background: var(--vlak); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 0 .5px rgb(0 0 0 / 4%); }
.pb-tabs button span:not(:empty) { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px;
  font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
/* Rij met mailboxen (bij twee of meer): kleiner dan de tabs erboven. */
.pb-bakken { margin-top: -4px; padding: 2px; background: none; box-shadow: inset 0 0 0 1px var(--lijn-zacht); }
.pb-bakken[hidden] { display: none; }
.pb-bakken button { height: 24px; font-size: 12px; }
.pb-bakken button span:not(:empty) { min-width: 16px; height: 16px; font-size: 10.5px; background: var(--kb-goud); color: #2a2100; }
.pil.pb-mailbox { background: var(--info-zacht); color: var(--info); }
.pb-zoek { margin: 0 12px 10px; height: 32px; }
.pb-status { margin: 0 16px 8px; font-size: 12px; color: var(--muted); }
.pb-status:empty { display: none; }
.pb-lijst { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; flex: 1; border-top: 1px solid var(--lijn-zacht); }
.pb-leeg { padding: 18px 8px; color: var(--muted); font-size: 13px; }
.pb-dag { position: sticky; top: 0; z-index: 1; padding: 10px 8px 4px; background: var(--vlak); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pb-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 8px 9px 14px;
  border-radius: 10px; cursor: pointer; }
.pb-item:hover { background: var(--hover); }
.pb-item.aan { background: var(--accent-zacht); }
.pb-item.ongelezen::before { content: ""; position: absolute; left: 4px; top: 21px; width: 6px; height: 6px; border-radius: 3px; background: var(--accent); }
.pb-item.fout.ongelezen::before, .pb-item.telaat::before { background: var(--fout); }
.pb-icoon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; background: var(--hover); color: var(--muted); }
.pb-icoon svg { width: 16px; height: 16px; }
.pb-icoon.mail { background: var(--accent-zacht); color: var(--accent-tekst); }
.pb-icoon.taak { background: var(--let-op-zacht); color: var(--let-op); }
.pb-icoon.fout { background: var(--fout-zacht); color: var(--fout); }
.pb-tekst { display: grid; gap: 1px; min-width: 0; }
.pb-titel { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-item.ongelezen .pb-titel { font-weight: 650; }
.pb-item.fout .pb-titel { color: var(--fout); }
.pb-van { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-kort { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.pb-labels .pil { height: 18px; font-size: 11px; padding: 0 6px; }
.pb-rechts { display: grid; justify-items: end; gap: 2px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.pb-vink { color: var(--goed); font-size: 11px; letter-spacing: -2px; }

/* Midden */
/* Nieuws en "Te doen" nemen wat ze nodig hebben, Debiteuren vult de rest van de hoogte. */
.pt-dash { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(200px, 1fr); gap: 14px; }
.pt-dash[hidden] { display: none; }
.pt-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
/* Debiteuren op Start (2026-10-20); pd- (portaal debiteuren). */
.pd-kaart { display: flex; flex-direction: column; min-height: 0; }
.pd-cijfers { display: flex; gap: 22px; margin: 0 0 10px; }
.pd-cijfers > div { display: grid; align-content: start; gap: 1px; min-width: 0; }
.pd-cijfers > div + div { padding-left: 22px; border-left: 1px solid var(--lijn-zacht); }
.pd-cijfers dt { font-size: 12px; color: var(--muted); }
.pd-cijfers dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.pd-cijfers small { font-size: 12px; color: var(--muted); }
.pd-cijfers .pd-binnen { color: var(--goed); }
.pd-rol { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 0 -4px; }
.pd-laat { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-laat th { position: sticky; top: 0; background: var(--vlak); text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted);
  height: 28px; padding: 0 4px; border-bottom: 1px solid var(--lijn-zacht); }
.pd-laat td { height: 32px; padding: 0 4px; border-bottom: 1px solid var(--lijn-zacht); white-space: nowrap; }
.pd-laat tbody tr:last-child td { border-bottom: none; }
.pd-laat .rechts { text-align: right; }
.pd-naam { max-width: 0; width: 50%; overflow: hidden; text-overflow: ellipsis; }
.pd-naam a { color: var(--ink); text-decoration: none; font-weight: 500; }
.pd-naam a:hover { color: var(--accent-tekst); }
/* Betalingen op de factuurpagina; fbet- (factuur betalingen). */
.fbet { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); display: grid; gap: 6px; }
.fbet h3 { margin: 0 0 2px; font-size: 13px; font-weight: 650; }
.fbet-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 13px; }
.fbet-van { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.fbet-herinnering { grid-template-columns: auto minmax(0, 1fr); color: var(--muted); }
.fbet .tekstknop { justify-self: start; font-size: 12px; color: var(--muted); }
.fbet-nieuw { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; margin-top: 4px; }
/* Debiteuren-pagina; deb-. */
.deb-omschrijving { max-width: 320px !important; color: var(--muted); }
.deb-koppel { display: flex; gap: 6px; align-items: center; }
.deb-koppel select { max-width: 300px; height: 28px; font-size: 12.5px; }
@media (max-width: 1099px) { .pt-dash { grid-template-rows: none; } }

.pt-nieuws { position: relative; padding: 18px 18px 30px; }
.pn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; min-height: 96px; }
.pn-item[hidden] { display: none; }
.pn-item:not([hidden]) { animation: pt-in .4s cubic-bezier(.2, .7, .3, 1); }
@keyframes pt-in { from { opacity: 0; transform: translateY(4px); } }
.pn-meta { margin-bottom: 8px; }
.pn-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  background: var(--hover); color: var(--muted); }
.pn-label.import { background: var(--accent-zacht); color: var(--accent-tekst); }
.pn-label.goed { background: var(--goed-zacht); color: var(--goed); }
.pn-label.let-op { background: var(--let-op-zacht); color: var(--let-op); }
.pn-label.fout { background: var(--fout-zacht); color: var(--fout); }
.pn-tekst h2 { margin: 0 0 6px; font-size: 20px; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-tekst h2 a { color: inherit; text-decoration: none; }
.pn-tekst h2 a:hover { color: var(--accent-tekst); }
.pn-tekst p { margin: 0; max-width: 60ch; font-size: 13.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pn-cijfer { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 132px; padding: 16px 14px; border-radius: 12px;
  background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--lijn-zacht); text-decoration: none; color: var(--ink); }
.pn-cijfer b { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
.pn-cijfer span { font-size: 12px; color: var(--muted); text-align: center; }
.pn-cijfer.import b { color: var(--accent-tekst); }
.pn-cijfer.goed b { color: var(--goed); }
.pn-cijfer.let-op b { color: var(--let-op); }
.pn-cijfer.fout b { color: var(--fout); }
.pn-nav { position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; gap: 4px; }
.pn-nav button { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--lijn-zacht); cursor: pointer; }
.pn-nav button.aan { background: var(--accent); }
.pn-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 620px) { .pn-item { grid-template-columns: minmax(0, 1fr); } .pn-cijfer { justify-items: start; min-width: 0; } }

.pt-todo { list-style: none; margin: 0; padding: 0; display: grid; }
/* Taken op Start (2026-10-21): invulregel en de open taken, afvinken met het rondje; scrollt binnen de kaart. */
.pt-taken { display: flex; flex-direction: column; min-height: 0; }
.pt-taak-nieuw input { width: 100%; height: 34px; margin-bottom: 6px; }
.pt-takenlijst { list-style: none; margin: 0; padding: 0; max-height: 132px; overflow-y: auto; overscroll-behavior: contain; }
.pt-takenlijst li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-top: 1px solid var(--lijn-zacht);
  transition: opacity .25s ease, transform .25s ease; }
.pt-takenlijst li:first-child { border-top: 0; }
.pt-takenlijst li.klaar { opacity: 0; transform: translateX(8px); }
.pt-takenlijst li.nieuw { animation: pt-taak-in .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes pt-taak-in { from { opacity: 0; transform: translateY(-4px); } }
.pt-takenlijst a { flex: 1; min-width: 0; display: grid; gap: 1px; color: var(--ink); text-decoration: none; }
.pt-takenlijst a b { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-takenlijst a:hover b { color: var(--accent-tekst); }
.pt-takenlijst small { font-size: 12px; color: var(--muted); }
.pt-vink { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 1.5px solid var(--zacht); border-radius: 50%;
  background: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.pt-vink:hover { border-color: var(--accent); }
.pt-takenlijst li.klaar .pt-vink { background: var(--accent); border-color: var(--accent); }
.pt-todo li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lijn-zacht); }
.pt-todo li:first-child { border-top: 0; padding-top: 2px; }
.pt-todo-tekst { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pt-todo-tekst b { font-size: 13.5px; font-weight: 600; }
.pt-todo-tekst small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-todo .knop { flex: 0 0 auto; }


.pt-week { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pt-week li { min-height: 0; }
.pt-week li a { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 84px; overflow: hidden; padding: 8px; border-radius: 10px; background: var(--vlak-2);
  box-shadow: inset 0 0 0 1px var(--lijn-zacht); color: var(--ink); text-decoration: none; min-width: 0; }
.pt-week li a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pt-week li.voorbij a { background: none; }
.pt-week li.voorbij .pt-dag { color: var(--zacht); }
.pt-week li.vandaag a { background: var(--accent-zacht); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pt-dag { display: flex; align-items: baseline; gap: 5px; }
.pt-dag small { font-size: 11.5px; color: var(--muted); }
.pt-dag b { font-size: 15px; font-weight: 650; }
.pt-week li.vandaag .pt-dag b, .pt-week li.vandaag .pt-dag small { color: var(--accent-tekst); }
.pt-ding { font-size: 11px; line-height: 1.3; padding: 2px 5px; border-radius: 4px; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn-zacht);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ding.afspraak { background: var(--accent-zacht); box-shadow: none; color: var(--accent-tekst); }
.pt-ding.taak { background: var(--let-op-zacht); box-shadow: none; color: var(--let-op); }
.pt-ding.import { background: var(--info-zacht); box-shadow: none; color: var(--info); }
@media (max-width: 700px) { .pt-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Rechts: de agenda neemt wat hij nodig heeft (krimpt als het krap wordt), het klassement de rest. */
.pt-agenda-kaart { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pt-agenda-kaart .pt-kop { flex: none; }
.pt-agenda-kaart .pt-agenda { overflow-y: auto; min-height: 0; }
.pt-stand-kaart { flex: 1 1 0; min-height: 220px; display: flex; flex-direction: column; padding-bottom: 8px; }
.pt-stand-rol { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.pt-stand thead th { position: sticky; top: 0; background: var(--vlak); z-index: 1; }
@media (max-width: 1099px) { .pt-rechts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-stand-kaart { max-height: 480px; } }
.pt-agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.pt-agenda li a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--lijn-zacht);
  text-decoration: none; color: var(--ink); }
.pt-agenda li:first-child a { border-top: 0; padding-top: 0; }
.pt-agenda-dag { font-size: 12.5px; color: var(--muted); }
.pt-agenda-wat { display: grid; gap: 1px; min-width: 0; }
.pt-agenda-wat b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-agenda-wat small { font-size: 12px; color: var(--muted); }
.pt-stand { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.pt-stand col.c-pos { width: 40px; } .pt-stand col.c-n { width: 52px; } .pt-stand col.c-geld { width: 74px; }
.pt-stand th { padding: 0 6px 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); text-align: left; border-bottom: 1px solid var(--lijn-zacht); }
.pt-stand td { padding: 6px; border-bottom: 1px solid var(--lijn-zacht); white-space: nowrap; }
.pt-stand tbody tr:last-child td { border-bottom: 0; }
.pt-stand .rechts { text-align: right; }
.pt-pos { color: var(--muted); }
.pt-pos i { font-style: normal; font-size: 9px; margin-left: 3px; vertical-align: 1px; }
.pt-pos i.op { color: var(--goed); } .pt-pos i.neer { color: var(--fout); }
.pt-stand tbody tr:nth-child(-n+3) .pt-pos { color: var(--accent-tekst); font-weight: 650; }
.pt-stand-naam { overflow: hidden; text-overflow: ellipsis; }
.pt-stand-naam a { color: var(--ink); text-decoration: none; }
.pt-stand-naam a:hover { color: var(--accent-tekst); }
.pt-meer { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.pt-meer:hover { color: var(--accent-tekst); }

/* Een geopend bericht in het midden */
.pt-bericht[hidden] { display: none; }
#bericht { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px; border-radius: 14px; background: var(--vlak); box-shadow: var(--schaduw); }
#bericht > * { flex: 0 0 auto; }
#bericht:not([hidden]) { animation: pt-in .22s cubic-bezier(.2, .7, .3, 1); }
.pt-dash:not([hidden]) { animation: pt-in .22s cubic-bezier(.2, .7, .3, 1); }
#bericht[hidden] { display: none; }
.bericht-kop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bericht-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.bericht-onderwerp { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.bericht-van { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn-zacht); font-size: 14px; color: var(--ink); }
#bericht { color: var(--ink); }
.bericht-van .hr-avatar { width: 34px; height: 34px; font-size: 13px; }
.bericht-bijlagen { display: flex; flex-wrap: wrap; gap: 8px; }
.bericht-bijlage { display: inline-flex; align-items: center; gap: 6px; }
.bericht-bijlage .knop { gap: 5px; text-decoration: none; }
.bericht-kader { width: 100%; height: 400px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn-zacht); }
.bericht-tekst { margin: 0; white-space: pre-wrap; font: 14px/1.55 var(--letter); color: var(--ink); }
.bericht-laden { padding: 40px; text-align: center; }
.bericht-antwoord { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.bericht-antwoord label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.bericht-antwoord textarea { width: 100%; resize: vertical; font: 14px/1.5 var(--letter); color: var(--ink); }
.inline { display: inline; }


/* --- Pakketscherm (2026-10-18): links Track & Trace van DHL, rechts kosten, adressen en gegevens ---
   zd- (zending). */
.zd-barcode { font-size: 20px !important; }
.zd-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.zd-links, .zd-rechts, #zd-dhl { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1000px) { .zd-raster { grid-template-columns: minmax(0, 1fr); } }
.zd-kop { margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--accent-tekst); }
.zd-kop .gedempt { font-weight: 400; font-size: 12.5px; margin-left: 6px; }
.zd-laden { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
.zd-laden a { color: var(--accent-tekst); }
.zd-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lijn); border-top-color: var(--accent); animation: zd-draai .8s linear infinite; }
@keyframes zd-draai { to { transform: rotate(360deg); } }

.zd-status-kop { display: flex; align-items: center; gap: 10px; }
.zd-status-kop h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.zd-stip { width: 12px; height: 12px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-zacht); }
.zd-status.bezorgd .zd-stip { background: var(--goed); box-shadow: 0 0 0 4px var(--goed-zacht); }
.zd-status.bezorgd h2 { color: var(--goed); }
.zd-retour { background: var(--info-zacht); color: var(--info); font-weight: 600; }
.zd-wanneer { margin: 6px 0 0 22px; font-size: 14px; }
.zd-optijd { color: var(--goed); font-weight: 550; }
.zd-telaat { color: var(--let-op); font-weight: 550; }
.zd-uitleg { margin: 8px 0 0 22px; font-size: 13px; color: var(--muted); }
.zd-problemen { list-style: none; margin: 10px 0 0 22px; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.zd-metingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 14px 0 0; }
.zd-metingen div { padding: 8px 10px; border-radius: 10px; background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--lijn-zacht); }
.zd-metingen dt { font-size: 11.5px; color: var(--muted); }
.zd-metingen dd { margin: 2px 0 0; font-size: 15px; font-weight: 650; }
.zd-bewijs { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.zd-bewijs b { color: var(--ink); font-weight: 600; }
.zd-bewijs a { color: var(--accent-tekst); }

.zd-dag + .zd-dag { margin-top: 12px; }
.zd-dag h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.zd-dag h4::first-letter { text-transform: uppercase; }
.zd-dag ol { list-style: none; margin: 0; padding: 0 0 0 6px; }
.zd-dag li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 0 5px 16px; font-size: 13px; }
.zd-dag li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 4px; background: var(--zacht); }
.zd-dag li::after { content: ""; position: absolute; left: 3px; top: 20px; bottom: -6px; width: 1px; background: var(--lijn); }
.zd-dag li:last-child::after { display: none; }
.zd-dag li.mis::before { background: var(--fout); }
.zd-dag li.mis .zd-stap { color: var(--fout); font-weight: 550; }
.zd-dag li.af::before { background: var(--goed); box-shadow: 0 0 0 3px var(--goed-zacht); }
.zd-dag li.af .zd-stap { font-weight: 650; color: var(--goed); }
.zd-tijd { color: var(--muted); }
.zd-plek { font-size: 11.5px; color: var(--muted); }
/* Handmatig zoeken bij DHL (barcode + postcode) */
.zd-niets .zd-kop { color: var(--ink); margin-bottom: 14px; }
.zd-zoeken h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.zd-status .zd-zoeken { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.zd-zoekvelden { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.zd-zoekvelden label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.zd-zoekvelden input { height: 34px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.zd-zoekvelden .knop { height: 34px; }

.zd-melding { margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); }
.zd-bedragen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.zd-bedragen dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-bedragen dd { margin: 0; text-align: right; }
.zd-bedragen .zd-toeslag { padding-left: 12px; font-size: 12.5px; }
.zd-bedragen .zd-totaal { padding-top: 8px; border-top: 1px solid var(--lijn-zacht); color: var(--ink); font-weight: 650; }
.zd-adressen { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.zd-adressen div { display: grid; gap: 1px; font-size: 13px; min-width: 0; }
.zd-adressen small { font-size: 11.5px; color: var(--muted); }
.zd-adressen b { font-weight: 600; overflow-wrap: anywhere; }
.zd-adressen span { color: var(--muted); }
.zd-pijl { align-self: center; color: var(--zacht); font-size: 18px; }
.zd-ruw { margin-top: 18px; }
.zd-ruw summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* --- Overzichten van Klanten en Bedrijf (2026-10-18), naar Selectie en Club in Football Manager ------
   ov- is van beide schermen, ko- van het klantenoverzicht, bo- van het bedrijfsoverzicht. Net als het
   hoofdscherm passen ze in één schermhoogte; lijsten scrollen binnen hun kaart. Onder 1100 px breed of
   640 px hoog vallen ze terug op gewoon scrollen. */
.pagina:has(.ov-raster) { max-width: none; padding: 14px; }
.ov-raster { display: grid; gap: 14px; height: calc(100vh - var(--kop) - 28px); min-height: 620px; }
.ov-kaart { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 14px 16px;
  background: var(--vlak); color: var(--ink); border-radius: 14px; box-shadow: var(--schaduw);
  animation: omhoog .26s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 22ms); }
/* Tekst en kopjes krimpen niet: alleen de lijsten (flex: 1) geven ruimte af en scrollen. */
.ov-kaart > * { flex-shrink: 0; }
.ov-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex: 0 0 auto; }
.ov-titel { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ov-titel h2 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.005em; color: var(--accent-tekst); white-space: nowrap; }
.ov-titel span, .ov-kop > a { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ov-kop > a:hover { color: var(--accent-tekst); }
.ov-leeg { margin: 0; font-size: 13px; color: var(--muted); }
.ov-leeg a, .ov-sub a { color: var(--accent-tekst); }
.ov-tekst { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ov-sub { margin: auto 0 0; padding-top: 6px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-sub a { text-decoration: none; }
.ov-cijfer { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ov-cijfer b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.ov-cijfer span { font-size: 13px; color: var(--muted); }
.ov-regel { margin: 0; font-size: 14px; font-weight: 550; }
.ov-regel.let-op { color: var(--let-op); }
.ov-regel.goed { color: var(--goed); }
.ov-klein { padding-bottom: 12px; }
.ov-klein .ov-kop { margin-bottom: 6px; }
.ov-voet { display: flex; justify-content: space-between; gap: 12px; flex: 0 0 auto; margin: 8px -16px -14px; padding: 9px 16px;
  border-top: 1px solid var(--lijn-zacht); font-size: 12.5px; color: var(--muted); }
.ov-voet a { color: var(--accent-tekst); text-decoration: none; font-weight: 550; }
.ov-voet a:hover { text-decoration: underline; }
.ov-embleem { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* Klanten: lijst | stemming | gesprekken | bestemmingen, daaronder aanwas en aandacht, onderaan vier kleine. */
/* Klanten (2026-10-21): kaart | klanten bovenaan, uitschieters | aandacht | zendingen eronder. */
.ko-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas: "kaart kaart lijst lijst" "uitschieters uitschieters aandacht prijzen"; }
.ko-lijst { grid-area: lijst; padding-bottom: 14px; }
.ko-perklant { grid-area: uitschieters; --n: 4; }
.ko-aandacht { grid-area: aandacht; --n: 5; }
.ko-prijzen { grid-area: prijzen; --n: 6; }
.ko-prijzen .ov-sub { white-space: normal; }

.ko-rol { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -16px; padding: 0 16px; overscroll-behavior: contain; }
.ko-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.ko-tabel th { position: sticky; top: 0; z-index: 1; background: var(--vlak); padding: 0 8px 6px; text-align: left; font-size: 11.5px;
  font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--lijn-zacht); }
.ko-tabel td { padding: 6px 8px; height: 46px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: middle; transition: background-color .12s ease; }
.ko-tabel th:first-child, .ko-tabel td:first-child { padding-left: 4px; }
.ko-tabel th:last-child, .ko-tabel td:last-child { padding-right: 4px; }
.ko-tabel .rechts { text-align: right; }
.ko-tabel tbody tr:nth-child(even) td { background: var(--vlak-2); }
.ko-tabel tbody tr[data-href] { cursor: pointer; }
.ko-tabel tbody tr[data-href]:hover td { background: var(--hover); }
.ko-tabel tbody tr:last-child td { border-bottom: 0; }
.ko-c-trend { width: 76px; } .ko-c-n { width: 78px; } .ko-c-geld { width: 84px; }
.ko-c-week { width: 84px; } .ko-c-gem { width: 108px; } .ko-c-verschil { width: 84px; } .ko-c-staaf { width: 26%; }
.ko-sterk { font-weight: 650; }
.ko-aandeel { display: block; height: 8px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.ko-aandeel i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: left; animation: breed .6s cubic-bezier(.2, .7, .3, 1) backwards .1s; }
.ko-afwijking { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--hover); }
.ko-afwijking::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--lijn); }
.ko-afwijking i { position: absolute; top: 0; bottom: 0; border-radius: 4px; animation: breed .6s cubic-bezier(.2, .7, .3, 1) backwards .1s; }
.ko-afwijking.op i { left: 50%; background: var(--goed); transform-origin: left; }
.ko-afwijking.neer i { right: 50%; background: var(--fout); transform-origin: right; }
.ko-naam { display: block; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ko-naam:hover { color: var(--accent-tekst); }
.ko-sub { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-sub b { font-weight: 600; }
.ko-op { color: var(--goed); }
.ko-neer { color: var(--fout); }
.ko-stil .ko-naam { color: var(--muted); font-weight: 500; }
.ko-vorm { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.ko-vorm i { display: block; width: 6px; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--accent);
  transform-origin: bottom; animation: groei .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.ko-vorm i.nul { background: var(--lijn); }
.ko-vorm i.leeg { background: none; }



.ko-groot { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.ko-groot b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-right: 2px; }
@keyframes breed { from { transform: scaleX(0); } }

.ko-uitschieters .ko-rol { margin-top: -2px; }
.ko-tabel-klein td { height: 42px; }
.ko-kruis, .ko-vink { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.ko-kruis svg { color: var(--fout); flex: 0 0 auto; }
.ko-vink svg { color: var(--goed); flex: 0 0 auto; }
.ko-punten { list-style: none; margin: 0 -6px; padding: 0; overflow-y: auto; min-height: 0; flex: 1; }
.ko-punten a { display: grid; gap: 1px; padding: 7px 6px 7px 14px; border-radius: 8px; position: relative; text-decoration: none; transition: background-color .12s ease; }
.ko-punten a:hover { background: var(--hover); }
.ko-punten a::before { content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 3px; background: var(--let-op); }
.ko-punten li.ko-p-fout a::before { background: var(--fout); }
.ko-punten b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-punten small { font-size: 12px; color: var(--muted); }
.ko-notitie { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 12.5px; line-height: 1.4;
  color: var(--muted); text-decoration: none; }
.ko-notitie b { color: var(--ink); font-weight: 600; }
.ko-notitie:hover b { color: var(--accent-tekst); }

/* Bedrijf: bedrijf | weekronde | facturen, financiën | team | logboek, onderaan vier kleine. */
.bo-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1.12fr) auto;
  grid-template-areas: "bedrijf bedrijf bedrijf bedrijf bedrijf ronde ronde ronde ronde facturen facturen facturen"
                       "financien financien financien financien financien team team team team logboek logboek logboek"
                       "inrichting inrichting inrichting inuit inuit inuit imports imports imports agenda agenda agenda"; }
.bo-bedrijf { grid-area: bedrijf; }
.bo-ronde { grid-area: ronde; --n: 1; }
.bo-facturen { grid-area: facturen; --n: 2; }
.bo-financien { grid-area: financien; --n: 3; }
.bo-team { grid-area: team; --n: 4; }
.bo-logboek { grid-area: logboek; --n: 5; }
.bo-inrichting { grid-area: inrichting; --n: 6; }
.bo-inuit { grid-area: inuit; --n: 7; }
.bo-imports { grid-area: imports; --n: 8; }
.bo-agenda { grid-area: agenda; --n: 9; }

.bo-naam { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--lijn-zacht); flex: 0 0 auto; }
.bo-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; flex: 0 0 auto; }
.bo-logo.leeg { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 18px; }
.bo-naam h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.bo-naam span { font-size: 13px; color: var(--muted); }
.bo-split { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: 16px; min-height: 0; flex: 1; }
.bo-feiten { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 6px 8px;
  padding-right: 16px; border-right: 1px solid var(--lijn-zacht); }
.bo-feiten dt { font-size: 12px; color: var(--muted); }
.bo-feiten dd { margin: 0; }
.bo-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--vlak-2);
  box-shadow: inset 0 0 0 1px var(--lijn-zacht); font-size: 13px; font-weight: 550; white-space: nowrap; }
.bo-rang { min-width: 0; min-height: 0; overflow: hidden; }
.bo-rang h4 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.bo-rang ol { list-style: none; margin: 0; padding: 0; }
.bo-rang a { display: grid; grid-template-columns: 18px 14px minmax(0, 1fr) auto 70px; align-items: center; gap: 8px; height: 29px; padding: 0 6px;
  border-radius: 7px; font-size: 13px; color: var(--ink); text-decoration: none; transition: background-color .12s ease; }
.bo-rang li:nth-child(even) a { background: var(--vlak-2); }
.bo-rang a:hover { background: var(--hover); }
.bo-pos { font-weight: 700; text-align: right; }
.bo-beweging { font-size: 9px; color: var(--zacht); text-align: center; }
.bo-beweging.op { color: var(--goed); } .bo-beweging.neer { color: var(--fout); }
.bo-klant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.bo-n { font-size: 12px; color: var(--muted); }
.bo-rang b { text-align: right; font-weight: 650; }
@media (max-width: 1500px) {
  .bo-rang a { grid-template-columns: 16px 12px minmax(0, 1fr) 64px; }
  .bo-n { display: none; }
  .bo-feiten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bo-feiten dd + dt { margin-top: 5px; }
  .bo-feiten .bo-chip { height: 22px; font-size: 12.5px; }
}
/* Laptop (800 px hoog): wat minder lucht, zodat alles blijft passen. */
@media (max-height: 860px) {
  .bo-rang li:nth-child(n+5) { display: none; }
  .bo-naam { padding-bottom: 8px; margin-bottom: 8px; }
  .bo-logo { width: 36px; height: 36px; border-radius: 8px; }
  .bo-logo.leeg { font-size: 14px; }
  .bo-naam h3 { font-size: 16px; }
  .bo-naam span { font-size: 12px; }
  .bo-rang h4 { margin-bottom: 3px; }
  .bo-rang a { height: 26px; }
  .bo-stappen { gap: 2px; }
  .bo-stappen li { padding: 4px 10px; }
  .bo-saldo b { font-size: 19px; }
  .bo-geld { padding: 7px 0; }
  .bo-geld b { font-size: 15px; }
  .bo-marge { padding-top: 6px; }
  .bo-uitleg { font-size: 11px; line-height: 1.2; }
  .bo-stapnaam { line-height: 1.25; }
}

.bo-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bo-stappen li { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; grid-template-rows: auto auto; align-items: center; column-gap: 12px;
  padding: 6px 10px; border-radius: 8px; }
.bo-stappen li:nth-child(odd) { background: var(--vlak-2); }
.bo-stapnaam { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-uitleg { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.bo-voortgang { grid-row: 1 / 3; grid-column: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.bo-voortgang i { height: 5px; border-radius: 3px; background: var(--lijn); }
.bo-voortgang i.vol { background: var(--accent); }
li.klaar .bo-voortgang i.vol { background: var(--goed); }
.bo-stand { grid-row: 1 / 3; grid-column: 3; justify-self: end; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; background: var(--hover); color: var(--muted); white-space: nowrap; }
.bo-stand.klaar { background: var(--goed-zacht); color: var(--goed); }
.bo-stand.bezig { background: var(--accent-zacht); color: var(--accent-tekst); }
.bo-stand.wijkt-af { background: var(--fout-zacht); color: var(--fout); }

.bo-fstatus { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bo-fstatus li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 13px; }
.bo-fstatus li:last-child { border-bottom: 0; }
.bo-fstatus .pil { min-width: 34px; justify-content: center; }

.bo-grafiek { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: 96px; padding: 10px 12px 6px; border-radius: 10px; background: var(--vlak-2);
  box-shadow: inset 0 0 0 1px var(--lijn-zacht); }
.bo-saldo { display: grid; flex: 0 0 auto; }
.bo-saldo b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.bo-saldo span { font-size: 12px; color: var(--muted); }
.bo-grafiek svg { flex: 1 1 0; width: 100%; min-height: 24px; margin-top: 6px; overflow: visible; }
.bo-vlak { fill: var(--accent-zacht); }
.bo-lijn-omzet, .bo-lijn-kosten { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.bo-lijn-omzet { stroke: var(--accent); }
/* De grafiek groeit vanaf de nullijn omhoog, tegelijk met het optellen van de cijfers. */
.bo-grafiek svg { transform-origin: bottom; animation: groei .9s cubic-bezier(.2, .7, .3, 1) backwards .05s; }
.bo-lijn-kosten { stroke: var(--zacht); stroke-width: 1.6; stroke-dasharray: 4 4; }
.bo-as { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.bo-legenda { display: inline-flex; align-items: center; gap: 5px; }
.bo-legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-left: 6px; }
.bo-legenda i.omzet { background: var(--accent); } .bo-legenda i.kosten { background: var(--zacht); }
.bo-geld { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn-zacht); flex: 0 0 auto; }
.bo-geld div { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; }
.bo-geld div + div { padding-left: 12px; border-left: 1px solid var(--lijn-zacht); }
.bo-geld span { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.bo-geld b { font-size: 17px; font-weight: 700; }
.bo-geld small { font-size: 12px; color: var(--muted); }
.bo-marge { padding-top: 8px; flex: 0 0 auto; }
.bo-marge-kop { display: flex; justify-content: space-between; font-size: 12.5px; }
.bo-marge-kop span { color: var(--muted); }
.bo-marge-balk { display: block; height: 8px; margin: 5px 0 4px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.bo-marge-balk i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: left; animation: breed .7s cubic-bezier(.2, .7, .3, 1) backwards .15s; }
.bo-marge-kop small { margin-left: 6px; font-size: 12px; color: var(--muted); }
.bo-marge-balk { margin-bottom: 0; }

.bo-leden { list-style: none; margin: 0 -6px; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.bo-leden li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--lijn-zacht); }
.bo-leden li:last-child { border-bottom: 0; }
.bo-leden .ov-embleem { width: 34px; height: 34px; font-size: 12px; }
.bo-lid { display: grid; min-width: 0; flex: 1; }
.bo-lid b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-lid b small { font-weight: 400; color: var(--muted); }
.bo-lid > small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-taken { display: grid; justify-items: end; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bo-taken small { font-size: 11.5px; }
.bo-taken b { color: var(--ink); }

.bo-log { list-style: none; margin: 0 -6px; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.bo-log li { display: grid; gap: 1px; padding: 6px; border-bottom: 1px solid var(--lijn-zacht); }
.bo-log li:last-child { border-bottom: 0; }
.bo-log-wat { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-log-wat b { font-weight: 600; }
.bo-log-wat span { color: var(--muted); }
.bo-log small { font-size: 11.5px; color: var(--muted); }

.bo-inricht { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bo-inricht li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.bo-inricht a { color: var(--ink); text-decoration: none; font-weight: 550; white-space: nowrap; }
.bo-inricht a:hover { color: var(--accent-tekst); }
.bo-inricht .pil { height: 20px; font-size: 11.5px; white-space: nowrap; }
.bo-transfer { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.bo-transfer b { min-width: 34px; font-size: 18px; font-weight: 700; }
.bo-transfer.op b { color: var(--goed); } .bo-transfer.neer b { color: var(--fout); }

@media (max-width: 1099px), (max-height: 639px) {
  .ov-raster { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .ko-raster { grid-template-areas: "kaart kaart" "lijst lijst" "uitschieters uitschieters" "aandacht prijzen"; }
  .wvd-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "db act" "geg stand" "afst br" "sl kl" "vv rit"; }
  .km-kaartvak { height: 60vh; }
  .bo-raster { grid-template-areas: "bedrijf bedrijf" "ronde facturen" "financien financien" "team logboek" "inrichting inuit" "imports agenda"; }
  .ko-lijst { height: 70vh; }
  .ov-kaart { overflow: visible; }
}

/* --- Beweging (2026-10-18, naar Depo Planner) ----------------------------------------------------
   Gebruiker: "na elke knop schiet alles in een keer op het scherm". Zelfde stijl als Depo Planner:
   kort (0,12–0,34 s), alleen transform en opacity, iets dat er al stond beweegt niet opnieuw.

   Tussen pagina's: Turbo wisselt alleen de inhoud (turbo.js, kopbalk.js) met een View Transition
   (Chrome, Safari 18.2+). De kopbalk blijft staan, het streepje onder de actieve pagina glijdt
   naar de nieuwe, alleen het middenstuk vloeit over. */
.kopbalk { view-transition-name: kopbalk; }
.kb-streep { view-transition-name: kb-streep; }
.pagina { view-transition-name: inhoud; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(kopbalk), ::view-transition-new(kopbalk) { animation: none; }
::view-transition-old(kopbalk) { display: none; }
::view-transition-group(kb-streep) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-group(inhoud) { animation: none; }
::view-transition-old(inhoud) { animation: vt-uit .1s ease-in both; }
::view-transition-new(inhoud) { animation: vt-in .22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-uit { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }
/* Laadbalkje van Turbo (bij een trage pagina) in de huiskleur. */
.turbo-progress-bar { height: 3px; background: var(--kb-licht); }

/* Sorteerbare kolomkoppen (kopbalk.js): klikken op de tekst, een pijltje bij de gekozen kolom. */
th[data-sorteer] { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
th[data-sorteer]:hover { color: var(--ink); }
th[aria-sort] { color: var(--accent-tekst); }
th[aria-sort]::after { content: "▼"; display: inline-block; margin-left: 4px; font-size: .75em; transition: transform .2s ease; }
th[aria-sort="ascending"]::after { transform: rotate(180deg); }

/* Inhoud vloeit in waar hij verschijnt (ook wat een script later tekent). Kwam de pagina al met een
   overgang binnen (html.vt), dan niet nog eens. */
@keyframes inhoud-in { from { opacity: 0; } }
@keyframes omhoog { from { opacity: 0; transform: translateY(6px); } }
.kaart, .tabel-houder, .pt-kaart, .pt-berichten, .melding { animation: omhoog .24s cubic-bezier(.2, .8, .2, 1) backwards; }
.pt-rij > :nth-child(2), .pt-rechts > :nth-child(2) { animation-delay: .04s; }
.pt-dash > :nth-child(3) { animation-delay: .06s; }
.tabel tbody tr { animation: inhoud-in .22s ease-out; }
html.vt .kaart, html.vt .tabel-houder, html.vt .pt-kaart, html.vt .pt-berichten, html.vt .melding, html.vt .tabel tbody tr { animation: none; }
.stil .pt-kaart, .stil .pn-item { animation: none; }

/* Dashboards: de kaarten zweven binnen als een golf vanaf linksboven (beweging.js zet per kaart
   --vertraging en daarna .zweeft op het dashboard). Tot dan onzichtbaar, maar alleen als het
   script draait (html.zweef-aan). Wat het hoofdscherm later stil ververst (.stil), niet opnieuw. */
@keyframes inzweven { from { opacity: 0; transform: translate(-14px, -14px) scale(.985); } }
html.zweef-aan :is(.portaal, .ov-raster, .dossier-raster):not(.zweeft) :is(.pt-kaart, .pt-berichten, .ov-kaart, .kaart) { opacity: 0; animation: none; }
html.zweef-aan .zweeft :is(.pt-kaart, .pt-berichten, .ov-kaart, .kaart) {
  animation: inzweven .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--vertraging, 0ms); }
html.zweef-aan .zweeft .stil :is(.pt-kaart, .pt-berichten, .ov-kaart, .kaart) { animation: none; }

/* Berichtenlijst: na een andere tab schuiven de berichten één voor één in. */
.pb-lijst.vers .pb-item, .pb-lijst.vers .pb-dag { animation: omhoog .2s ease-out backwards; animation-delay: calc(var(--i, 0) * 16ms); }

/* Knoppengroepen: één pilletje dat meeglijdt (beweging.js). */
.met-pil { position: relative; }
.met-pil > a, .met-pil > button { position: relative; z-index: 1; }
.met-pil > .aan { background: transparent !important; box-shadow: none !important; }
.segment-pil { position: absolute; top: 2px; bottom: 2px; left: 0; border-radius: 6px; pointer-events: none;
  background: var(--vlak); box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 0 .5px rgb(0 0 0 / 4%); }
.segment-pil.glijdt { transition: transform .24s cubic-bezier(.2, .8, .2, 1), width .24s cubic-bezier(.2, .8, .2, 1); }

/* Klikbare vlakken komen een fractie omhoog; rijen kleuren zacht mee. */
.pt-week li a, .kk-ding, .pt-agenda li a { transition: box-shadow .12s ease, transform .16s cubic-bezier(.2, .8, .2, 1), filter .12s ease; }
.pt-week li a:hover { transform: translateY(-1px); }
.pt-week li a:active, a.ki-kaart:active { transform: translateY(0) scale(.99); }
.tabel td, .pb-item, .pt-stand td { transition: background-color .12s ease; }

/* Staven groeien op in plaats van er ineens te staan. */
@keyframes groei { from { transform: scaleY(0); } }
.staaf span { transform-origin: bottom; animation: groei .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.pn-nav button { transition: background-color .3s ease; }

/* Vensters: de achtergrond vervaagt erin. */
@keyframes vervaag { from { opacity: 0; } }
.venster::backdrop { animation: vervaag .15s ease-out; }

/* Kalender: het blad schuift mee in de richting van de pijl. */
@keyframes blad-vooruit { from { transform: translateX(40px); opacity: 0; } }
@keyframes blad-terug { from { transform: translateX(-40px); opacity: 0; } }
@keyframes blad-zoom { from { transform: scale(.985); opacity: 0; } }
.kk-raster.blad-vooruit { animation: blad-vooruit .3s cubic-bezier(.3, .7, .2, 1); }
.kk-raster.blad-terug { animation: blad-terug .3s cubic-bezier(.3, .7, .2, 1); }
.kk-raster.blad-zoom { animation: blad-zoom .22s ease-out; }

/* Klantenkaart (2026-10-21, klantenkaart.js) op het Klantenoverzicht: de kaart vult zijn vak, met
   linksboven een zoekbalk en linksonder het vak van de gekozen klant. km- (kk- is de kalender). */
:root { --km-stip: #2f54eb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --km-stip: #5b7cff; } }
:root[data-theme="dark"] { --km-stip: #5b7cff; }
.km-kaartvak { grid-area: kaart; padding: 0; position: relative; --n: 0; }
.km-kaartvak .km-kaart { position: absolute; inset: 0; }   /* maplibre-gl.css zet .maplibregl-map op relative */
.km-kaart .maplibregl-ctrl-attrib { font-size: 11px; }
.km-geen { display: grid; place-items: center; height: 100%; margin: 0; color: var(--muted); font-size: 14px; }
/* Zoeken. */
.km-zoek { position: absolute; top: 12px; left: 12px; z-index: 3; width: min(300px, calc(100% - 24px)); }
.km-zoek svg { position: absolute; left: 12px; top: 11px; color: var(--muted); pointer-events: none; }
.km-zoek input { width: 100%; height: 38px !important; padding-left: 34px !important; border: 0 !important; border-radius: 10px !important;
  background: var(--vlak); box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 4px 14px rgb(10 40 28 / 16%); font-size: 13.5px !important; }
.km-zoek ul { list-style: none; margin: 6px 0 0; padding: 4px; border-radius: 10px; background: var(--vlak); box-shadow: 0 6px 20px rgb(10 40 28 / 20%); }
.km-zoek ul[hidden] { display: none; }
.km-zoek li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.km-zoek li span { color: var(--muted); font-size: 12px; }
.km-zoek li:hover, .km-zoek li.aan { background: var(--hover); }
/* De gekozen klant, zwevend in de kaart. */
.km-klant { position: absolute; left: 12px; bottom: 12px; z-index: 3; width: min(340px, calc(100% - 24px)); display: grid; gap: 12px;
  padding: 14px 16px; border-radius: 12px; background: var(--vlak); color: var(--ink); box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 14px 34px -10px rgb(10 40 28 / 40%); }
.km-klant[hidden] { display: none; }
.km-klant.komt { animation: km-in .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes km-in { from { opacity: 0; transform: translateY(8px); } }
.km-kop { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.km-embleem { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--km-stip); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.km-wie h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-wie p { margin: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--lijn-zacht); }
.km-cijfers div { display: grid; gap: 1px; min-width: 0; }
.km-cijfers dt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.km-cijfers dd { margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
.km-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.km-knoppen .knop { justify-content: center; }
/* Het eigen bedrijf op de kaart. */
.km-thuis { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.km-thuis-stip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--zijbalk-verloop); color: #fff;
  font-size: 12px; font-weight: 750; box-shadow: 0 0 0 3px var(--vlak), 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 14px rgb(10 40 28 / 35%); }
.km-thuis-stip:has(img) { background: #fff; }
.km-thuis-stip img { width: 26px; height: 26px; object-fit: contain; }
.km-thuis-naam { padding: 3px 9px; border-radius: 8px; background: var(--vlak); color: var(--ink); font-size: 12.5px; font-weight: 650;
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%); white-space: nowrap; }
.maplibregl-popup.km-tip .maplibregl-popup-content { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--vlak);
  color: var(--ink); font: 12px/1.35 inherit; box-shadow: 0 4px 14px rgb(0 0 0 / 18%); }
.maplibregl-popup.km-tip .maplibregl-popup-content span { color: var(--muted); }
.maplibregl-popup.km-tip .maplibregl-popup-tip { display: none; }

/* Zendingen (2026-10-21): filters, aantal en bladeren; zl-. */
.zl-filters { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(120px, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.zl-filters label { display: grid; gap: 4px; min-width: 0; }
.zl-filters input, .zl-filters select { width: 100%; }
.zl-wis { align-self: end; }
.zl-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 2px 8px; font-size: 13px; }
.zl-onder { margin-top: 10px; }
.zl-blader { display: inline-flex; align-items: center; gap: 8px; }

/* Uitvergroten (2026-10-21, groot.js): het vak zelf gaat naar het midden; rondom blijft ruimte,
   de achtergrond wordt wazig en een klik daarop sluit. .alleen-groot is alleen groot te zien. */
.groot-achter { position: fixed; inset: 0; z-index: 60; background: rgb(8 24 17 / 26%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: groot-in .22s ease; }   /* gewone muispijl: geen handje naast een venster (gebruiker 2026-10-21) */
.groot-achter.weg { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
@keyframes groot-in { from { opacity: 0; } }
.ov-kaart.groot { position: fixed; z-index: 61; margin: 0; padding: 18px 22px; animation: none !important;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 30px 80px -20px rgb(0 0 0 / 45%); }
.ov-kaart.groot.sleept { box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 40px 100px -20px rgb(0 0 0 / 55%); }
.ov-kaart.groot .ov-kop { cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; margin: -18px -22px 10px; padding: 18px 22px 0; }
.ov-kaart.groot .ov-titel h2 { font-size: 18px; }
.ov-kaart.groot.km-kaartvak { padding: 0; }
.ov-kaart.groot[data-groot-maat="klein"] .ov-sub { margin-top: 14px; }
.groot-plek { min-width: 0; min-height: 0; border-radius: 14px; background: color-mix(in srgb, var(--vlak) 55%, transparent); }
.alleen-groot { display: none !important; }
.ov-kaart.groot .alleen-groot { display: revert !important; }
.ov-kaart.groot select.alleen-groot, .ov-kaart.groot input.alleen-groot { display: block !important; }
/* De knop rechtsboven: vergroten, of in groot sluiten. */
.groot-knop { flex: none; margin-left: auto; color: var(--muted); }
.groot-knop:hover { color: var(--accent-tekst); background: var(--hover); }
.groot-knop .groot-dicht, .ov-kaart.groot .groot-knop .groot-open { display: none; }
.ov-kaart.groot .groot-knop .groot-dicht { display: block; }
.ov-kop .alleen-groot + .groot-knop, .ov-kop select + .groot-knop { margin-left: 0; }
.km-groot-knop { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 10px; background: var(--vlak);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 4px 14px rgb(10 40 28 / 16%); }
/* Overal in een vak klikken vergroot het: bij hover komt het vak iets omhoog met een zachtere,
   diepere schaduw (geen gekleurde rand). De kaart niet: daar is klikken en slepen voor de kaart. */
.ov-kaart[data-groot]:not(.groot):not([data-groot-alleen-knop]) { cursor: pointer; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease; }
.ov-kaart[data-groot]:not(.groot):not([data-groot-alleen-knop]):hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 3%), 0 14px 32px -12px rgb(10 40 28 / 32%); }
/* Een klant in een lijst: naam onderstreept bij de muis, overal hetzelfde. */
.ko-tabel tbody tr[data-href]:hover .ko-naam { text-decoration: underline; text-underline-offset: 2px; }
/* Klanten groot: zoeken en de extra kolommen. */
.ko-zoek { width: 240px !important; height: 32px; margin-left: auto; }
.ko-c-account { width: 96px; } .ko-c-mail { width: 230px; } .ko-c-prijzen { width: 70px; }
.ko-alle { font-size: 12.5px; font-weight: 550; text-decoration: none; }
.ov-kaart.groot .ko-alle { visibility: hidden; }
/* Zendingen per klant: periode en totaal (groot). */
.ko-perklant .ov-kop select { width: auto; min-width: 210px; height: 32px; margin-left: auto; }
.zk-totaal { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.zk-totaal b { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-right: 2px; }
.zk-c-pos { width: 0; }
.ov-kaart.groot .zk-c-pos { width: 44px; }
.ko-perklant:not(.groot) .zk-tabel tr > :first-child { padding: 0; font-size: 0; }

/* Venster (2026-10-21, venster.js): een klant, factuur, zending of de pagina achter "Alles" opent
   groot in het midden, zoals een uitvergroot vak. Boven een uitvergroot vak. */
html.vs-open { overflow: hidden; }
.vs-achter { z-index: 70; }
.vs-venster { position: fixed; z-index: 71; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--achtergrond); box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 30px 80px -20px rgb(0 0 0 / 45%); }
.vs-venster.sleept { box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 40px 100px -20px rgb(0 0 0 / 55%); }
.vs-kop { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 16px; background: var(--achtergrond); touch-action: none; user-select: none; -webkit-user-select: none; }
.vs-kop .vs-terug { margin-left: -6px; }
.vs-kop .vs-terug[hidden] { display: none; }
.vs-greep { flex: 1; align-self: stretch; }
.vs-venster:focus { outline: none; }
.vs-inhoud { position: relative; flex: 1; min-height: 0; }
.vs-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--achtergrond); transition: opacity .15s ease; }
.vs-venster.laadt .vs-frame { opacity: 0; }
.vs-venster.laadt .vs-inhoud::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px;
  border: 2.5px solid var(--lijn); border-top-color: var(--accent); border-radius: 50%; animation: vs-draai .7s linear infinite; }
@keyframes vs-draai { to { transform: rotate(360deg); } }
/* De pagina in het venster: zonder kopbalk; de bovenbalk van het venster neemt die plek in. */
html.in-venster { --kop: 0px; }
html.in-venster .kopbalk, html.in-venster .indeling::before, html.in-venster .kb-zoekvenster { display: none !important; }
html.in-venster .pagina { padding-top: 6px; }
/* Een kaart met een link in de kop ("Alles", "Medewerkers") opent overal klikbaar die pagina in
   een venster; dezelfde schaduw bij de muis als de vakken op het Klantenoverzicht. */
html:not(.in-venster) :is(.pt-kaart:has(> .pt-kop a[href]), .ov-kaart:not([data-groot]):has(> .ov-kop a[href])) {
  cursor: pointer; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease; }
html:not(.in-venster) :is(.pt-kaart:has(> .pt-kop a[href]), .ov-kaart:not([data-groot]):has(> .ov-kop a[href])):hover {
  transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(0 0 0 / 3%), 0 14px 32px -12px rgb(10 40 28 / 32%); }


/* Werving (2026-10-23): eigen categorie. Statussen als pil; Bedrijven/Shortlist als tabel; het
   dashboard (werving_overzicht.html) opgezet als het Werving-scherm in FM. */
.pil.wv-nieuw { background: var(--accent-zacht); color: var(--accent-tekst); }
.pil.wv-interessant { background: var(--goed-zacht); color: var(--goed); }
.pil.wv-niet-interessant { background: var(--hover); color: var(--muted); }
.pil.wv-klant { background: var(--goed); color: #fff; }
.wv-c-km { width: 82px; } .wv-c-tel { width: 140px; } .wv-c-mail { width: 210px; } .wv-c-web { width: 190px; } .wv-c-verv { width: 120px; } .wv-c-status { width: 130px; }
.wv-tabel td { height: 52px; }
.wv-tabel .wv-web { color: var(--accent-tekst); text-decoration: none; }
.wv-tabel .wv-web:hover { text-decoration: underline; text-underline-offset: 2px; }
.wvd-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.62fr);
  grid-template-areas: "db db db db act act act act geg geg geg geg" "stand stand stand stand afst afst afst afst br br br br"
                       "sl sl sl kl kl kl vv vv vv rit rit rit"; }
.wvd-database { grid-area: db; --n: 0; } .wvd-activiteit { grid-area: act; --n: 1; } .wvd-gegevens { grid-area: geg; --n: 2; }
.wvd-stand { grid-area: stand; --n: 3; } .wvd-afstand { grid-area: afst; --n: 4; } .wvd-branches { grid-area: br; --n: 5; }
.wvd-shortlist { grid-area: sl; --n: 6; } .wvd-klanten { grid-area: kl; --n: 7; } .wvd-vervoerders { grid-area: vv; --n: 8; } .wvd-scouts { grid-area: rit; --n: 9; }
.wvd-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wvd-feiten div { display: grid; gap: 2px; min-width: 0; }
.wvd-feiten b { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvd-feiten span { font-size: 12.5px; color: var(--muted); }
.wvd-scheiding { height: 1px; background: var(--lijn-zacht); margin: 12px 0; flex: none; }
.wvd-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border: 1px solid var(--lijn); border-radius: 8px;
  font-size: 12.5px; color: var(--ink); background: var(--vlak-2); }
.wvd-chip svg { color: var(--accent); }
.wvd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wvd-aanbevolen { list-style: none; margin: 8px -6px 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; }
.wvd-aanbevolen a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; text-decoration: none; }
.wvd-aanbevolen a:hover { background: var(--hover); }
.wvd-aanbevolen a:hover b { text-decoration: underline; text-underline-offset: 2px; }
.wvd-wie { display: grid; gap: 1px; min-width: 0; flex: 1; }
.wvd-wie b { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvd-wie small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvd-rond { display: inline-grid; place-items: center; align-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 2px solid var(--accent); font: 700 12.5px/1 inherit; font-variant-numeric: tabular-nums; color: var(--ink); }
.wvd-rond i { font-style: normal; font-size: 9px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.wvd-status { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--muted); }
.wvd-status.aan { color: var(--goed); }
.wvd-status span { display: grid; gap: 1px; }
.wvd-status b { font-size: 15px; font-weight: 650; }
.wvd-status small { font-size: 12.5px; color: var(--muted); }
.wvd-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.wvd-tabel th { text-align: left; font-size: 12.5px; font-weight: 650; padding: 6px 4px; border-bottom: 1px solid var(--lijn-zacht); }
.wvd-tabel td { padding: 4px; border-bottom: 1px solid var(--lijn-zacht); }
.wvd-tabel .rechts { text-align: right; }
.wvd-label { display: inline-block; padding: 1px 7px; border: 1px solid var(--lijn); border-radius: 6px; font-size: 12.5px; background: var(--vlak-2); }
.wvd-kopje { margin: 8px 0 6px; font-size: 13.5px; font-weight: 650; }
.wvd-dekking { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--lijn-zacht); }
.wvd-dekking:last-child { border-bottom: 0; }
.wvd-dekking-naam { font-size: 13px; }
.wvd-dekking b { font-size: 16px; font-weight: 700; } .wvd-dekking b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.wvd-dekking .wvd-balk { grid-column: 1 / -1; }
.wvd-balk { display: block; height: 8px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.wvd-balk i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: left; animation: breed .6s cubic-bezier(.2, .7, .3, 1) backwards .1s; }
.wvd-groot { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.wvd-groot b { font-size: 22px; font-weight: 700; color: var(--ink); margin-right: 4px; }
.wvd-ringen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.wvd-ringen li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.wvd-ringen li span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 16px; border: 2.5px solid var(--accent);
  font-size: 13px; font-weight: 700; color: var(--ink); }
.wvd-r-interessant span { border-color: var(--goed) !important; }
.wvd-r-niet-interessant span { border-color: var(--lijn) !important; }
.wvd-r-klant span { border-color: var(--goed) !important; background: var(--goed-zacht); }
.wvd-staven { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wvd-staven li { display: grid; grid-template-columns: 70px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 13px; }
.wvd-staven b { text-align: right; font-weight: 650; }
.wvd-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; overflow-y: auto; min-height: 0; }
.wvd-lijst li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.wvd-lijst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvd-lijst b { font-weight: 650; }
.wvd-vervoerderlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.wvd-vervoerderlijst .wvd-eigen { color: var(--accent-tekst); font-weight: 600; }
.wvd-vervoerderlijst .wvd-stil { color: var(--muted); }
.wvd-namen { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.wvd-namen a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.wvd-namen a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Dossier van één bedrijf (werving_bedrijf.html). */
.wv-dossier { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 899px) { .wv-dossier { grid-template-columns: minmax(0, 1fr); } }
.wv-dossier h2 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.wv-dl { display: grid; gap: 0; margin: 0; }
.wv-dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn-zacht); }
.wv-dl div:last-child { border-bottom: 0; }
.wv-dl dt { font-size: 13px; color: var(--muted); }
.wv-dl dd { margin: 0; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.wv-dl dd a { color: var(--accent-tekst); }
.wv-route { margin-left: 6px; font-size: 13px; }
.wv-omschrijving { margin: 0; font-size: 15px; line-height: 1.5; }
.wv-links { display: grid; gap: 16px; align-content: start; }
/* Rapport (2026-10-26): pluspunten groen, minpunten rood, gescheiden door een lijn, zoals een scoutingsrapport in FM. */
.wv-rapport { display: grid; gap: 0; }
.wv-punten + .wv-punten { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--lijn-zacht); }
.wv-punten h2 { display: flex; align-items: center; gap: 8px; }
.wv-plus h2 { color: var(--goed); } .wv-min h2 { color: var(--fout); }
.wv-punten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-punten li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.wv-punten li svg { margin-top: 1px; }
.wv-plus li svg { color: var(--goed); } .wv-min li svg { color: var(--fout); }

.wvd-scoutzin { white-space: normal; }
/* Scouts (2026-10-23, werving_scouts.html en werving_scout.html). Wie onderweg is, krijgt een pulserend rondje. */
.sc-sturen { align-items: end; }
.sc-sturen .sc-knop { height: 38px; }
.sc-lijst { display: grid; gap: 10px; margin-top: 16px; }
.sc-scout { display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1.4fr) 80px auto; align-items: center; gap: 16px; padding: 14px 18px; }
.sc-figuur { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hover); color: var(--muted); position: relative; }
.sc-bezig .sc-figuur, .sc-wacht .sc-figuur { background: var(--accent-zacht); color: var(--accent-tekst); }
.sc-bezig .sc-figuur::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: .5; animation: sc-puls 1.6s ease-out infinite; }
@keyframes sc-puls { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-bezig .sc-figuur::after { animation: none; } }
.sc-klaar .sc-figuur { background: var(--goed-zacht); color: var(--goed); }
.sc-mislukt .sc-figuur { background: var(--fout-zacht); color: var(--fout); }
.sc-wat { display: grid; gap: 2px; min-width: 0; }
.sc-soort { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-wat b { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-wat small, .sc-status small { font-size: 12.5px; color: var(--muted); }
.sc-status { display: grid; gap: 2px; min-width: 0; }
.sc-tekst { font-size: 14.5px; font-weight: 600; }
.sc-bezig .sc-tekst, .sc-wacht .sc-tekst { color: var(--accent-tekst); }
.sc-gevonden { display: grid; justify-items: end; gap: 1px; }
.sc-gevonden b { font-size: 20px; font-weight: 700; }
.sc-gevonden small { font-size: 12px; color: var(--muted); }
.sc-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-kop .sc-tekst { font-size: 16px; }
.sc-cijfers { display: flex; gap: 26px; margin: 0; flex-wrap: wrap; }
.sc-cijfers div { display: grid; gap: 2px; }
.sc-cijfers dt { font-size: 12px; color: var(--muted); }
.sc-cijfers dd { margin: 0; font-size: 20px; font-weight: 700; }
@media (max-width: 760px) { .sc-scout { grid-template-columns: 44px minmax(0, 1fr); } .sc-status, .sc-gevonden, .sc-rapport { grid-column: 2; justify-items: start; } }
.sc-sturen [hidden] { display: none !important; }   /* plaatsveld bij KvK-nummer en plaats */
.wv-kvk { margin: 18px 0 4px; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 90ch; }   /* bronvermelding KvK (verplicht) */