/* Bouwsoftware van DPS Media, handgeschreven stylesheet. Maten komen uit bron/spec/design-system.md. */

/* ---------- 1. Fundament ---------- */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter.woff2) format("woff2"); }
@font-face { font-family: "Inter Fallback"; src: local(Arial); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--tekst); font-family: Inter, "Inter Fallback", system-ui, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
textarea { resize: vertical; }
table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
::placeholder { opacity: 1; color: var(--color-tertiair); }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }
* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
:root { --accent-link: var(--accent); }
:root[data-thema=donker], :root:not([data-thema=licht]).systeem-donker { --accent-link: color-mix(in srgb, var(--accent) 45%, #ffffff); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.overslaan { position: absolute; left: -9999px; top: 0; z-index: 60; }
.overslaan:focus { left: 8px; top: 8px; width: auto; height: auto; border-radius: 8px; background: var(--color-vlak); padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--color-primair); box-shadow: var(--schaduw-overlay); outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 2. Tokens ---------- */
:root {
  --color-primair: #111827; --color-secundair: #4b5563; --color-tertiair: #656c7a; --color-op-donker: #d1d5db; --color-gedempt: #d1d5db;
  --color-vlak: #fff; --color-vlak-zacht: #f9fafb; --color-vlak-diep: #f3f4f6; --color-rand: #e5e7eb; --color-rand-zacht: #f3f4f6; --color-rand-sterk: #d1d5db;
  --color-omgekeerd: #111827; --color-op-omgekeerd: #fff;
  --color-chip-vlak: #f3f4f6; --color-chip-vlak-sterk: #e5e7eb; --color-chip-rand: #e5e7eb; --color-chip-tekst: #374151; --color-chip-zacht: #4b5563;
  --color-gelukt-vlak: #f0fdf4; --color-gelukt-vlak-sterk: #dcfce7; --color-gelukt-rand: #bbf7d0; --color-gelukt-tekst: #15803d; --color-gelukt-zacht: #16a34a;
  --color-waarschuwing-vlak: #fff7ed; --color-waarschuwing-vlak-sterk: #ffedd5; --color-waarschuwing-rand: #fed7aa; --color-waarschuwing-tekst: #7c2d12; --color-waarschuwing-zacht: #c2410c;
  --color-fout-vlak: #fef2f2; --color-fout-vlak-sterk: #fee2e2; --color-fout-rand: #fecaca; --color-fout-tekst: #b91c1c; --color-fout-zacht: #dc2626;
  --color-info-vlak: #f0f9ff; --color-info-vlak-sterk: #e0f2fe; --color-info-rand: #b8e6fe; --color-info-tekst: #0369a1; --color-info-zacht: #0084cc;
  --color-reeks: #334155; --color-op-reeks: #e2e8f0;
  --color-grafiet: #111827; --color-grafiet-zacht: #1f2937; --color-merkaccent: #4A42DD; --color-canvas: #f7f5f0;
  --text-doc-basis: 10pt; --text-doc-kop: 13pt; --text-doc-titel: 18pt; --color-doc-primair: #111827; --color-doc-secundair: #374151; --color-doc-label: #4b5563;
  --bg: #f7f5f0; --tekst: #111827; --groen: #15803d; --oranje: #c2410c; --rood: #b91c1c; --paars: #6d28d9;
  --merk-donker: #101014; --merk-donker-zacht: #1c1c24; --merk-accent: #4A42DD; --merk-accent-zacht: #eceafd; --merk-accent-licht: #8F89FF; --succes-groen: #16a34a;
  --inhoud-breedte: 1360px; --inhoud-breedte-smal: 768px; --veilig-onder: env(safe-area-inset-bottom, 0px);
  --tabbalk-hoogte: 3.5rem; --tabbalk-ruimte: calc(var(--tabbalk-hoogte) + var(--veilig-onder)); --tabbalk-ruimte-mijn: calc(var(--tabbalk-hoogte) + var(--veilig-onder));
  --accent: #2563eb; --accent-zacht: color-mix(in srgb, var(--accent) 10%, white); --accent-rand: color-mix(in srgb, var(--accent) 25%, white); --accent-donker: color-mix(in srgb, var(--accent) 80%, black); --accent-op: #fff;
  --radius-klein: 6px; --radius-normaal: 8px; --radius-groot: 12px;
  --schaduw-rust: 0 1px 2px rgba(16,24,40,.05); --schaduw-zweef: 0 4px 14px rgba(16,24,40,.10); --schaduw-zwevend: 0 8px 28px rgba(16,24,40,.12); --schaduw-overlay: 0 24px 60px -20px rgba(16,24,40,.35); --schaduw-sm: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --overgang: .15s cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}
@media (min-width: 64rem) { :root { --tabbalk-ruimte: 0px; } }

:root[data-thema=donker] { --donker: 1; }
:root[data-thema=donker], :root:not([data-thema=licht]).systeem-donker {
  --color-vlak: #1a2231; --color-vlak-zacht: #212b3d; --color-vlak-diep: #151c28; --color-rand: #313d52; --color-rand-zacht: #273143; --color-rand-sterk: #3d4a62;
  --color-omgekeerd: #34405a; --color-op-omgekeerd: #f3f4f6; --color-primair: #f3f4f6; --color-secundair: #cbd5e1; --color-tertiair: #94a3b8; --color-gedempt: #475569;
  --color-chip-vlak: #2a3446; --color-chip-vlak-sterk: #34405a; --color-chip-rand: #3d4a62; --color-chip-tekst: #e2e8f0; --color-chip-zacht: #cbd5e1;
  --color-gelukt-vlak: #16301f; --color-gelukt-vlak-sterk: #1c4029; --color-gelukt-rand: #2c6b41; --color-gelukt-tekst: #86efac; --color-gelukt-zacht: #4ade80;
  --color-waarschuwing-vlak: #35270f; --color-waarschuwing-vlak-sterk: #47341a; --color-waarschuwing-rand: #7a5620; --color-waarschuwing-tekst: #fdba74; --color-waarschuwing-zacht: #fb923c;
  --color-fout-vlak: #351a1d; --color-fout-vlak-sterk: #4a2226; --color-fout-rand: #7a2f36; --color-fout-tekst: #fca5a5; --color-fout-zacht: #f87171;
  --color-info-vlak: #12283a; --color-info-vlak-sterk: #17364f; --color-info-rand: #2a5f80; --color-info-tekst: #7dd3fc; --color-info-zacht: #38bdf8;
  --color-reeks: #7d93b8; --color-op-reeks: #1b2434; --bg: #0f1520; --tekst: #f3f4f6;
  --accent-zacht: color-mix(in srgb, var(--accent) 22%, #1a2231); --accent-rand: color-mix(in srgb, var(--accent) 45%, #1a2231); --accent-donker: color-mix(in srgb, var(--accent) 55%, white);
  color-scheme: dark;
}
.op-papier { --color-primair: #111827; --color-secundair: #4b5563; --color-tertiair: #656c7a; --color-gedempt: #d1d5db; --color-vlak: #fff; --color-vlak-zacht: #f9fafb; --color-vlak-diep: #f3f4f6; --color-rand: #e5e7eb; --color-rand-zacht: #f3f4f6; --color-rand-sterk: #d1d5db; color-scheme: light; }
.merk-eigen { --accent: #4A42DD; --accent-op: #fff; --accent-zacht: #eceafd; --accent-rand: #c3bef6; --accent-donker: #3a34b0; }
:root[data-thema=donker] .merk-eigen, :root:not([data-thema=licht]).systeem-donker .merk-eigen { --accent: #8F89FF; --accent-op: #101014; --accent-zacht: #23213a; --accent-rand: #4a4585; --accent-donker: #8F89FF; }

/* ---------- 3. Typografie en tekstrollen ---------- */
.t-bijschrift { font-size: 11px; } .t-hulp { font-size: 12px; } .t-basis { font-size: 13px; } .t-nadruk { font-size: 14px; } .t-kop-klein { font-size: 15px; } .t-kop { font-size: 18px; } .t-kop-groot { font-size: 22px; } .t-cijfer { font-size: 28px; }
.primair { color: var(--color-primair); } .secundair { color: var(--color-secundair); } .tertiair { color: var(--color-tertiair); } .gedempt { color: var(--color-gedempt); }
.medium { font-weight: 500; } .semibold { font-weight: 600; } .bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: .025em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pre { white-space: pre-line; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; } .centreer { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.link { font-weight: 500; color: var(--accent-donker); } .link:hover { text-decoration: underline; }
.link-klein { font-size: 12px; font-weight: 500; color: var(--accent-link); } .link-klein:hover { text-decoration: underline; }
.tekstknop { font-size: 13px; font-weight: 500; color: var(--color-secundair); text-decoration: underline; text-underline-offset: 4px; } .tekstknop:hover { color: var(--color-primair); }
.sectiekop { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.kop-h1 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; color: var(--color-primair); }
.kop-sub { margin-top: 4px; font-size: 13px; color: var(--color-tertiair); }
.kop-h2 { font-size: 15px; font-weight: 600; color: var(--color-primair); }
.kop-h2-sub { margin-top: 2px; font-size: 13px; color: var(--color-tertiair); }
dt.sleutel, .sleutel { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
dd.waarde, .waarde { margin-top: 2px; font-size: 14px; color: var(--color-primair); }
dl.sleutels > div + div { margin-top: 10px; }
.hulp { margin-top: 4px; font-size: 12px; color: var(--color-tertiair); }
.fout { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--color-fout-zacht); }
.ster { margin-left: 2px; color: #fb2c36; }
kbd.kbd { border-radius: 4px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 2px 6px; font-size: 11px; font-weight: 500; color: var(--color-tertiair); font-family: inherit; }

/* ---------- 4. Layout-hulpjes ---------- */
.rij { display: flex; align-items: center; gap: 8px; }
.rij-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rij-tussen { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rij-start { display: flex; align-items: flex-start; gap: 12px; }
.kolom { display: flex; flex-direction: column; }
.groei { flex: 1; min-width: 0; } .krimp0 { flex-shrink: 0; }
.stapel > * + * { margin-top: 12px; } .stapel-2 > * + * { margin-top: 8px; } .stapel-5 > * + * { margin-top: 20px; } .stapel-4 > * + * { margin-top: 16px; } .stapel-1 > * + * { margin-top: 4px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; }
.ml-auto { margin-left: auto; } .mx-auto { margin-inline: auto; }
.w-full { width: 100%; } .verborgen { display: none !important; }
.grid-2 { display: grid; gap: 12px; } .grid-3 { display: grid; gap: 12px; } .grid-4 { display: grid; gap: 12px; }
.form-grid { display: grid; gap: 16px; } .form-grid-5 { display: grid; gap: 20px; }
@media (min-width: 40rem) { .grid-2, .grid-3, .grid-4, .form-grid, .form-grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } .col-2 { grid-column: span 2; } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.scheiding { margin: 16px 0; border-top: 1px solid var(--color-rand); }
.scheiding-label { margin: 16px 0; display: flex; align-items: center; gap: 12px; } .scheiding-label hr { flex: 1; border-top: 1px solid var(--color-rand); } .scheiding-label span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.ic { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.7; }
.ic-3 { width: 12px; height: 12px; } .ic-35 { width: 14px; height: 14px; } .ic-4 { width: 16px; height: 16px; } .ic-45 { width: 18px; height: 18px; } .ic-6 { width: 24px; height: 24px; }
.alleen-desktop { display: none; } @media (min-width: 64rem) { .alleen-desktop { display: block; } .alleen-mobiel { display: none !important; } }
.vanaf-md { display: none; } @media (min-width: 48rem) { .vanaf-md { display: block; } .tot-md { display: none !important; } }
.vanaf-sm { display: none; } @media (min-width: 40rem) { .vanaf-sm { display: block; } .tot-sm { display: none !important; } }

/* ---------- 5. Schil ---------- */
.app { display: flex; min-height: 100dvh; background: var(--bg); }
.zijbalk { position: sticky; top: 0; display: none; height: 100dvh; width: 256px; flex-shrink: 0; }
@media (min-width: 64rem) { .zijbalk { display: block; } }
.app-inhoud { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.hoofd { min-width: 0; flex: 1; padding-bottom: var(--tabbalk-ruimte); }

.nav { display: flex; height: 100%; flex-direction: column; background: var(--merk-donker); color: var(--color-op-donker); }
.nav-kop { padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-kop a { display: flex; align-items: center; gap: 10px; }
.bedrijf-avatar { display: grid; width: 40px; height: 40px; flex-shrink: 0; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 700; color: #fff; background: var(--merk-accent); overflow: hidden; }
.bedrijf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-naam { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; }
.nav-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #9ca3af; }
.nav-lijst { flex: 1; overflow-y: auto; padding: 16px 12px; }
.nav-lijst ul > li + li { margin-top: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 500; color: var(--color-op-donker); transition: color var(--overgang), background-color var(--overgang); }
.nav-item .ic { color: var(--color-op-donker); }
@media (hover: hover) { .nav-item:hover { background: rgba(255,255,255,.1); color: #fff; } }
.nav-item.is-actief { background: var(--merk-accent); font-weight: 600; color: #fff; }
.nav-item.is-actief .ic { color: #fff; }
.nav-item span.label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-groep-2 { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; opacity: .8; }
.nav-groep-2 .nav-item { padding: 8px 12px; font-size: 13px; } .nav-groep-2 .ic { width: 18px; height: 18px; }
.nav-voet { border-top: 1px solid rgba(255,255,255,.1); padding: 12px; }
.nav-voet .nav-item { padding: 10px 12px; font-size: 13px; } .nav-voet .ic { width: 18px; height: 18px; color: var(--color-tertiair); }
.nav-demo { margin-top: 8px; border-radius: 8px; background: rgba(255,255,255,.05); padding: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.nav-demo p:first-child { font-size: 12px; font-weight: 600; color: var(--merk-accent-licht); }
.nav-demo p + p { margin-top: 2px; font-size: 11px; line-height: 1.375; color: #9ca3af; }
.knop-geel { display: inline-block; border-radius: 8px; background: var(--merk-accent); padding: 4px 12px; font-weight: 600; color: #fff; text-align: center; }
.knop-geel:hover { filter: brightness(1.05); }
.nav-demo .knop-geel { margin-top: 8px; display: block; padding: 6px 10px; font-size: 12px; }

.drawer-laag { position: fixed; inset: 0; z-index: 50; }
.drawer-laag .overlay { position: absolute; inset: 0; background: rgba(16,24,40,.4); }
.drawer { position: absolute; inset-block: 0; left: 0; width: 288px; box-shadow: var(--schaduw-overlay); animation: .18s ease-out both opkomen; }
@media (min-width: 64rem) { .drawer-laag { display: none; } }

.demobalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; background: var(--merk-donker); padding: 10px 16px; font-size: 13px; line-height: 1.375; color: #fff; }
.demobalk .geel { font-weight: 600; color: var(--merk-accent-licht); } .demobalk .zin { font-weight: 500; } .demobalk .uitleg { color: rgba(255,255,255,.75); }

.topbalk { position: sticky; top: 0; z-index: 30; display: flex; height: 56px; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-rand); background: color-mix(in srgb, var(--color-vlak) 90%, transparent); padding-inline: 16px; backdrop-filter: blur(8px); }
.topbalk-midden { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; }
.woordmerk { flex-shrink: 0; font-size: 13px; font-weight: 600; letter-spacing: -.025em; color: var(--color-primair); }
.kruimels { display: none; min-width: 0; flex-shrink: 1; overflow: hidden; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
@media (min-width: 48rem) { .kruimels { display: flex; } }
.kruimels .sep { color: var(--color-tertiair); } .kruimels a { flex-shrink: 0; color: var(--color-secundair); } .kruimels a:hover { color: var(--color-primair); text-decoration: underline; } .kruimels .huidig { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--color-primair); }
.ikoonknop { display: grid; place-items: center; border-radius: 8px; color: var(--color-tertiair); width: 36px; height: 36px; flex-shrink: 0; transition: color var(--overgang), background-color var(--overgang); }
.ikoonknop:hover { background: var(--color-vlak-diep); color: var(--color-primair); }
.ikoonknop-10 { width: 40px; height: 40px; } .ikoonknop-10:hover { color: var(--color-secundair); }
.ikoonknop-gevaar:hover { background: var(--color-fout-vlak); color: var(--color-fout-zacht); }
.ikoonknop-7 { width: 28px; height: 28px; } .ikoonknop-6 { width: 24px; height: 24px; border-radius: 6px; } .ikoonknop-6:hover { background: var(--color-rand); }
.hamburger { margin-left: -4px; } @media (min-width: 64rem) { .hamburger { display: none; } }
.zoek-loep { width: 40px; height: 40px; } @media (min-width: 48rem) { .zoek-loep { display: none; } }
.zoekknop { display: none; height: 36px; width: 256px; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding-inline: 12px; font-size: 13px; color: var(--color-tertiair); transition: border-color var(--overgang), background-color var(--overgang); }
.zoekknop:hover { border-color: var(--color-rand-sterk); background: var(--color-vlak); }
.zoekknop { flex-shrink: 0; }
.zoekknop span { flex: 1; text-align: left; white-space: nowrap; } .zoekknop .ic { width: 16px; height: 16px; flex-shrink: 0; }
@media (min-width: 48rem) { .zoekknop { display: flex; } }
.demo-link { display: none; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--color-secundair); } .demo-link:hover { background: var(--color-vlak-diep); }
@media (min-width: 40rem) { .demo-link { display: block; } }
.bel-wrap { position: relative; flex-shrink: 0; } .bel-wrap .telling { position: absolute; right: -4px; top: -2px; }
.gebruikersknop { display: flex; height: 40px; align-items: center; gap: 8px; border-radius: 8px; padding: 4px 8px 4px 4px; } .gebruikersknop:hover { background: var(--color-vlak-diep); }
.gebruikersknop .naam { display: none; min-width: 0; } @media (min-width: 40rem) { .gebruikersknop .naam { display: block; } }
.gebruikersknop .naam span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--color-primair); }
.gebruikersknop .naam span + span { display: block; font-size: 11px; line-height: 1.25; color: var(--color-secundair); }
.gebruikersknop .ic { width: 14px; height: 14px; color: var(--color-tertiair); transition: transform var(--overgang); }
.gebruikersknop[aria-expanded=true] .ic { transform: rotate(180deg); }

.paginakop { border-bottom: 1px solid var(--color-rand); background: var(--color-vlak); }
.paginakop-in { margin-inline: auto; width: 100%; max-width: var(--inhoud-breedte); padding: 20px 16px; }
@media (min-width: 40rem) { .paginakop-in { padding: 20px 24px; } }
.paginakop-rij { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.paginakop-rij > .links { min-width: 0; } .paginakop-rij .titel-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paginakop-rij > .rechts { display: flex; flex-shrink: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pagina { margin-inline: auto; width: 100%; max-width: var(--inhoud-breedte); padding: 16px; }
.pagina > * + * { margin-top: 20px; }
.pagina-smal { max-width: var(--inhoud-breedte-smal); }
.pagina-vandaag { max-width: none; padding-bottom: 40px; } .pagina-vandaag > * + * { margin-top: 24px; }
@media (min-width: 40rem) { .pagina { padding: 24px; } }
.terugknop { margin-bottom: 12px; display: inline-flex; height: 44px; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--color-rand-sterk); background: var(--color-vlak); padding-inline: 16px; font-size: 14px; font-weight: 600; color: var(--color-primair); box-shadow: var(--schaduw-rust); transition: border-color var(--overgang), background-color var(--overgang); }
.terugknop:hover { border-color: var(--color-tertiair); background: var(--color-vlak-zacht); } .terugknop .ic { width: 16px; height: 16px; }

.tabbalk { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; height: var(--tabbalk-ruimte); border-top: 1px solid var(--color-rand); background: var(--color-vlak); padding-bottom: var(--veilig-onder); }
@media (min-width: 64rem) { .tabbalk { display: none; } }
.tabbalk a { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0; font-size: 11px; font-weight: 500; color: var(--color-tertiair); }
.tabbalk a.is-actief { color: var(--merk-donker); }
.tabbalk a.is-actief::before { content: ""; position: absolute; inset-inline: 16px; top: 0; height: 2px; border-radius: 9999px; background: var(--merk-accent); }
.tabbalk a .ic-wrap { position: relative; } .tabbalk a .telling { position: absolute; right: -10px; top: -4px; }
.tabbalk a .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
:root[data-thema=donker] .tabbalk a.is-actief { color: var(--color-primair); }

/* Uitvoerdersweergave */
.mijn { display: flex; min-height: 100dvh; flex-direction: column; background: var(--color-vlak-zacht); }
.mijn-kop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-rand); background: var(--color-vlak); padding: 12px 16px; }
.mijn-kop .bedrijf { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--color-primair); }
.mijn-kop .wie { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-tertiair); }
.mijn-hoofd { flex: 1; padding-bottom: var(--tabbalk-ruimte-mijn); }
.mijn-tabs { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; height: var(--tabbalk-ruimte-mijn); border-top: 1px solid var(--color-rand); background: var(--color-vlak); padding-bottom: var(--veilig-onder); }
.mijn-tabs > div { margin-inline: auto; display: flex; height: 100%; max-width: 512px; }
.mijn-tabs a { display: flex; height: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0; font-size: 11px; font-weight: 500; color: var(--color-tertiair); transition: color var(--overgang); }
.mijn-tabs a.is-actief { color: var(--accent-donker); } .mijn-tabs .ic { width: 24px; height: 24px; }
.weekstrook { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.dagtegel { display: flex; min-height: 64px; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding: 8px 4px; text-align: center; }
.dagtegel:active { filter: brightness(.95); }
.dagtegel.is-vrij { background: var(--color-gelukt-vlak); border-color: var(--color-gelukt-rand); } .dagtegel.is-vrij .onder { color: var(--color-gelukt-tekst); }
.dagtegel.is-vandaag { background: var(--color-vlak); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-rand); } .dagtegel.is-vandaag .onder { color: var(--color-secundair); }
.dagtegel.is-afwezig { background: var(--color-fout-vlak); border-color: var(--color-fout-rand); } .dagtegel.is-afwezig .onder { color: var(--color-fout-tekst); }
.dagtegel .dag { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--color-tertiair); }
.dagtegel .num { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--color-primair); }
.dagtegel .onder { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.25; color: var(--color-tertiair); }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--color-secundair); }
.legenda span.blok { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--color-rand); background: var(--color-vlak); margin-right: 6px; vertical-align: -2px; }
.legenda .blok-vrij { background: var(--color-gelukt-vlak); border-color: var(--color-gelukt-rand); } .legenda .blok-afwezig { background: var(--color-fout-vlak); border-color: var(--color-fout-rand); }

/* Openbare pagina's (aanvraag, portaal) */
.publiek-kop { border-bottom: 1px solid var(--color-rand); background: var(--color-vlak); padding: 16px; }
@media (min-width: 40rem) { .publiek-kop { padding: 16px 24px; } }
.publiek-kop-in { margin-inline: auto; display: flex; max-width: 768px; align-items: center; gap: 10px; }
.publiek-avatar { display: grid; width: 36px; height: 36px; flex-shrink: 0; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 700; color: #fff; background: var(--accent); overflow: hidden; }
.publiek-avatar img { width: 100%; height: 100%; object-fit: cover; }
.publiek-inhoud { margin-inline: auto; max-width: 672px; padding: 32px 16px; }
@media (min-width: 40rem) { .publiek-inhoud { padding: 32px 24px; } }
.portaal-inhoud { margin-inline: auto; max-width: 672px; padding: 24px 16px; } .portaal-inhoud > * + * { margin-top: 20px; }
.portaal-lijst > * + * { margin-top: 12px; }
@media (min-width: 40rem) { .portaal-inhoud { padding: 24px; } }
.chip-keuze { display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid var(--color-rand-sterk); padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--color-secundair); transition: all var(--overgang); background: var(--color-vlak); }
.chip-keuze:hover { background: var(--color-vlak-zacht); }
.chip-keuze.is-gekozen { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-donker); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.infovlak { margin-top: 12px; border-radius: 8px; background: var(--accent-zacht); padding: 10px 12px; font-size: 12px; line-height: 1.625; color: var(--accent-donker); }
.totaalregel { margin-top: 16px; border-radius: 8px; background: var(--color-vlak-zacht); padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--color-secundair); }
.login-schil { position: relative; display: flex; min-height: 100dvh; align-items: center; justify-content: center; overflow: hidden; background: var(--color-vlak-zacht); padding: 16px; }
.site-raster { pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(90deg, #1118270e 1px, transparent 1px), linear-gradient(#1118270e 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(80% 60% at 50% 0, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(80% 60% at 50% 0, #000 30%, transparent 78%); }
.login-kolom { position: relative; width: 100%; max-width: 384px; }
.merk-woord { font-size: 19px; font-weight: 600; letter-spacing: -.03em; color: var(--color-grafiet); }
:root[data-thema=donker] .merk-woord { color: var(--color-primair); }

/* ---------- 6. Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 500; transition: all var(--overgang); height: 40px; padding-inline: 16px; font-size: 14px; gap: 8px; white-space: nowrap; }
.knop:disabled { cursor: not-allowed; opacity: .5; }
.knop .ic { width: 16px; height: 16px; }
.knop-klein { height: 32px; padding-inline: 12px; font-size: 13px; gap: 6px; }
.knop-groot { height: 44px; padding-inline: 20px; font-size: 15px; gap: 8px; }
.knop-primair { background: var(--accent); color: var(--accent-op); box-shadow: var(--schaduw-rust); }
.knop-primair:hover:not(:disabled) { filter: brightness(1.1); } .knop-primair:active:not(:disabled) { filter: brightness(.95); }
.knop-secundair { background: var(--color-vlak); color: var(--color-secundair); border: 1px solid var(--color-rand-sterk); }
.knop-secundair:hover:not(:disabled) { background: var(--color-vlak-zacht); } .knop-secundair:active:not(:disabled) { background: var(--color-vlak-diep); }
.knop-zacht { background: var(--accent-zacht); color: var(--accent-donker); border: 1px solid var(--accent-rand); }
.knop-zacht:hover:not(:disabled) { filter: brightness(.97); }
.knop-gevaar { background: #e40014; color: #fff; } .knop-gevaar:hover:not(:disabled) { background: #bf000f; }
.knop-tekst { color: var(--color-secundair); } .knop-tekst:hover:not(:disabled) { color: var(--color-primair); background: var(--color-vlak-diep); }
.knop-oranje { background: #c53c00 !important; color: #fff; box-shadow: var(--schaduw-rust); } .knop-oranje:hover { background: #a33200 !important; }
.knop-bel { display: inline-flex; height: 44px; align-items: center; gap: 8px; border-radius: 8px; background: var(--accent); padding-inline: 16px; font-size: 14px; font-weight: 600; color: var(--accent-op); box-shadow: var(--schaduw-rust); } .knop-bel:hover { filter: brightness(1.1); }
.knop-route { display: inline-flex; height: 44px; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--color-rand-sterk); background: var(--color-vlak); padding-inline: 16px; font-size: 14px; font-weight: 600; color: var(--color-primair); } .knop-route:hover { background: var(--color-vlak-zacht); }
.knop-stippel { width: 100%; border-radius: 8px; border: 1px dashed var(--color-rand-sterk); padding: 8px; font-size: 13px; font-weight: 500; color: var(--color-tertiair); background: transparent; transition: all var(--overgang); }
.knop-stippel:hover { border-color: var(--accent); color: var(--accent); }
.spinner { display: inline-block; width: 14px; height: 14px; border-radius: 9999px; border: 2px solid currentColor; border-top-color: transparent; animation: spin 1s linear infinite; }
.knop-x { display: grid; width: 40px; height: 40px; flex-shrink: 0; place-items: center; border-radius: 8px; color: var(--color-tertiair); margin-right: -6px; }
.knop-x:hover { background: var(--color-vlak-diep); color: var(--color-secundair); } .knop-x .ic { width: 18px; height: 18px; }
.pijlknop { display: grid; height: 16px; width: 24px; place-items: center; border-radius: 4px; font-size: 11px; color: var(--color-tertiair); } .pijlknop:hover { background: var(--color-vlak-diep); color: var(--color-secundair); } .pijlknop:disabled { opacity: .3; background: transparent; }

/* ---------- 7. Invoer ---------- */
.invoer, .keuze, .tekstvlak { width: 100%; border-radius: 8px; border: 1px solid var(--color-rand-sterk); background: var(--color-vlak); padding-inline: 12px; font-size: 16px; line-height: 1.5; color: var(--color-primair); }
.invoer, .keuze { height: 40px; } .keuze { padding-right: 32px; }
.tekstvlak { min-height: 96px; padding-block: 8px; line-height: 1.625; }
@media (min-width: 40rem) { .invoer, .keuze, .tekstvlak { font-size: 14px; } }
.invoer:focus, .keuze:focus, .tekstvlak:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-rand); }
.invoer:disabled, .keuze:disabled, .tekstvlak:disabled { background: var(--color-vlak-zacht); color: var(--color-tertiair); }
.invoer-getal { text-align: right; font-variant-numeric: tabular-nums; }
.invoer-suffix { position: relative; } .invoer-suffix .invoer { padding-right: 44px; }
.invoer-suffix span { pointer-events: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--color-tertiair); }
.invoer-44 { height: 44px; }
.invoer-kleur { height: 40px; width: 48px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--color-rand-sterk); padding: 4px; }
.veld { display: block; }
.veld > .label, label.label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--color-secundair); }
.filterlabel { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.vinkje { display: flex; min-height: 44px; cursor: pointer; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-primair); }
.vinkje input { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; accent-color: var(--accent); }
.vinkje .sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--color-tertiair); }
.vinkje-klein { min-height: 40px; align-items: center; gap: 8px; font-size: 13px; color: var(--color-secundair); } .vinkje-klein input { width: 18px; height: 18px; margin-top: 0; }
.schakelaar-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.schakelaar-rij .titel { font-size: 14px; font-weight: 500; color: var(--color-primair); } .schakelaar-rij .omschrijving { margin-top: 2px; font-size: 12px; line-height: 1.375; color: var(--color-secundair); }
.schakelaar { display: grid; height: 40px; width: 44px; flex-shrink: 0; place-items: center; border-radius: 8px; }
.schakelaar:disabled { opacity: .5; }
.schakelaar .spoor { position: relative; display: block; height: 22px; width: 40px; border-radius: 9999px; background: var(--color-rand-sterk); transition: background-color var(--overgang); }
.schakelaar .spoor::after { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 9999px; background: var(--color-vlak); box-shadow: var(--schaduw-sm); transform: translateX(2px); transition: transform var(--overgang); }
.schakelaar[aria-checked=true] .spoor { background: var(--accent); } .schakelaar[aria-checked=true] .spoor::after { transform: translateX(20px); }
.bestandknop { display: inline-flex; min-height: 44px; cursor: pointer; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--color-rand-sterk); background: var(--color-vlak); padding-inline: 14px; font-size: 13px; font-weight: 600; color: var(--color-primair); } .bestandknop:hover { background: var(--color-vlak-zacht); }
.dropzone { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; border: 2px dashed var(--color-rand-sterk); padding: 28px 16px; text-align: center; min-height: 168px; background: var(--color-vlak-zacht); transition: all var(--overgang); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-zacht); }
.handtekening-vak { position: relative; overflow: hidden; border-radius: 8px; border: 2px dashed var(--color-rand-sterk); background: #fff; }
.handtekening-vak canvas { width: 100%; height: 160px; touch-action: none; }
.handtekening-vak .placeholder { pointer-events: none; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #6b7280; }
.combobox-wrap { position: relative; }
.combobox-lijst { position: absolute; z-index: 30; margin-top: 4px; max-height: 288px; width: 100%; overflow-y: auto; border-radius: 8px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 4px 0; box-shadow: var(--schaduw-overlay); }
.combobox-optie { display: flex; min-height: 44px; width: 100%; flex-direction: column; justify-content: center; padding: 8px 12px; text-align: left; }
.combobox-optie:hover, .combobox-optie.is-aangewezen { background: var(--color-vlak-zacht); }
.combobox-optie .titel { font-size: 14px; font-weight: 500; color: var(--color-primair); } .combobox-optie .sub { font-size: 12px; color: var(--color-tertiair); }
.combobox-extra { margin-top: 4px; display: flex; min-height: 44px; width: 100%; align-items: center; gap: 8px; border-top: 1px solid var(--color-rand-zacht); padding: 8px 12px; text-align: left; font-size: 14px; font-weight: 500; color: var(--accent-donker); } .combobox-extra:hover { background: var(--color-vlak-zacht); }

/* KeuzeKaart */
.keuzekaart { display: flex; width: 100%; border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); text-align: left; transition: all var(--overgang); align-items: flex-start; gap: 12px; padding: 14px; }
.keuzekaart:hover { border-color: var(--color-rand-sterk); background: var(--color-vlak-zacht); }
.keuzekaart.is-gekozen { border-color: var(--accent); background: var(--accent-zacht); box-shadow: 0 0 0 1px var(--accent); }
.keuzekaart:disabled { cursor: not-allowed; border-color: var(--color-rand); background: var(--color-vlak-zacht); opacity: .6; }
.keuzekaart-compact { min-height: 44px; align-items: center; gap: 8px; padding: 10px; }
.keuzekaart .inhoud { min-width: 0; flex: 1; } .keuzekaart .titel { display: block; font-size: 14px; font-weight: 500; color: var(--color-primair); } .keuzekaart-compact .titel { font-size: 13px; }
.keuzekaart .omschrijving { display: block; margin-top: 2px; font-size: 12px; line-height: 1.375; color: var(--color-secundair); }
.keuzekaart .indicator { display: grid; width: 18px; height: 18px; flex-shrink: 0; place-items: center; border: 2px solid var(--color-rand-sterk); border-radius: 9999px; margin-top: 2px; }
.keuzekaart .indicator.vierkant { border-radius: 6px; }
.keuzekaart.is-gekozen .indicator { border-color: var(--accent); background: var(--accent); }
.keuzekaart.is-gekozen .indicator::after { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--color-vlak); }
.keuzekaart.is-gekozen .indicator.vierkant::after { width: 10px; height: 6px; border-radius: 0; background: none; border-left: 2px solid var(--accent-op); border-bottom: 2px solid var(--accent-op); transform: translateY(-2px) rotate(-45deg); }
.dagkeuze { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--color-rand-sterk); font-size: 13px; font-weight: 500; text-transform: capitalize; color: var(--color-secundair); transition: all var(--overgang); }
.dagkeuze:hover { background: var(--color-vlak-zacht); } .dagkeuze.is-gekozen { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-donker); }
.keuzeknop { border-radius: 8px; border: 1px solid var(--color-rand-sterk); padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--color-secundair); transition: all var(--overgang); background: var(--color-vlak); }
.keuzeknop:hover { background: var(--color-vlak-zacht); } .keuzeknop.is-gekozen { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-donker); }
.keuzeknop-44 { height: 44px; padding-inline: 16px; font-size: 14px; }
.dagtegels { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.dagtegel-klein { border-radius: 6px; border: 1px solid var(--color-rand); padding: 6px 0; text-align: center; font-size: 11px; line-height: 1.25; color: var(--color-secundair); transition: all var(--overgang); }
.dagtegel-klein:hover { border-color: var(--accent); background: var(--accent-zacht); }
.dagtegel-klein.is-gekozen { border-color: var(--accent); background: var(--accent-zacht); font-weight: 600; color: var(--accent-donker); }
.dagtegel-klein.is-weekend { border-color: var(--color-rand-zacht); background: var(--color-vlak-zacht); color: var(--color-tertiair); }
.dagtegel-klein.is-bezet { background: var(--merk-accent-zacht); border-color: #f0d774; }
.dagtegel-klein.is-vrij-dag { background: var(--color-gelukt-vlak); border-color: var(--color-gelukt-rand); color: var(--color-gelukt-tekst); }
.dagtegel-klein.is-afwezig-dag { background: var(--color-fout-vlak); border-color: var(--color-fout-rand); color: var(--color-fout-tekst); }
.dagtegel-klein span { display: block; } .dagtegel-klein .num { font-size: 13px; font-weight: 600; }

/* ---------- 8. Kaarten ---------- */
.kaart { border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); box-shadow: var(--schaduw-rust); padding: 20px; }
.kaart-kaal { padding: 0; overflow: hidden; }
.kaart-accent { border-color: var(--accent-rand); background: var(--accent-zacht); }
.kaart-accent-licht { border-color: var(--accent-rand); background: color-mix(in srgb, var(--accent-zacht) 40%, var(--color-vlak)); }
.kaart-aandacht { border-color: var(--color-waarschuwing-rand); background: color-mix(in srgb, var(--color-waarschuwing-vlak) 60%, var(--color-vlak)); }
.kaart-urgent { border-color: var(--color-fout-rand); background: color-mix(in srgb, var(--color-fout-vlak) 60%, var(--color-vlak)); }
.kaart-waarschuwing { border-radius: 12px; border: 1px solid var(--color-waarschuwing-rand); background: var(--color-waarschuwing-vlak); padding: 14px 16px; }
.kaart-waarschuwing .titel { font-size: 14px; font-weight: 600; color: var(--color-waarschuwing-tekst); } .kaart-waarschuwing .sub { margin-top: 2px; font-size: 13px; color: var(--color-waarschuwing-tekst); }
@media (min-width: 40rem) { .kaart-waarschuwing { padding-inline: 20px; } }
.kaart-klik { cursor: pointer; transition: all var(--overgang); } .kaart-klik:hover { border-color: var(--color-rand-sterk); }
.kaart-zweef { transition: all var(--overgang); } .kaart-zweef:hover { transform: translateY(-2px); box-shadow: var(--schaduw-zweef); }
.kaartkop { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kaartkop > div:first-child { min-width: 0; } .kaartkop h2 { font-size: 15px; font-weight: 600; color: var(--color-primair); } .kaartkop p { margin-top: 2px; font-size: 13px; color: var(--color-tertiair); }
.kaartkop .actie { flex-shrink: 0; }
.blok { border-top: 1px solid var(--color-rand); padding-top: 20px; margin-top: 20px; } .blok:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sectiekop-rij { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sectiekop-rij h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); } .sectiekop-rij p { margin-top: 2px; font-size: 13px; color: var(--color-tertiair); }
.vandaag-sectie { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vandaag-sectie h2 { font-size: 15px; font-weight: 700; color: var(--color-primair); }
.subcijfer { border-radius: 8px; border: 1px solid var(--color-rand); background: color-mix(in srgb, var(--color-vlak-zacht) 60%, transparent); padding: 14px; }
.subcijfer .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.subcijfer .waarde { margin-top: 6px; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--color-primair); }
.subcijfer .toelichting { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--color-tertiair); }
.projectkaart { display: block; height: 100%; } .projectkaart .kaart { height: 100%; transition: all var(--overgang); } .projectkaart:hover .kaart { transform: translateY(-2px); box-shadow: var(--schaduw-zweef); }
.projectkaart .titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--color-primair); }
.projectkaart .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-secundair); }
.projectkaart .voet { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--color-rand-zacht); padding-top: 12px; }
.projectkaart .bedrag { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--color-primair); }
.inklap-knop { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 16px; text-align: left; }
.inklap-knop .ic { margin-top: 2px; color: var(--color-tertiair); transition: transform var(--overgang); } .inklap-knop[aria-expanded=true] .ic { transform: rotate(180deg); }

/* ---------- 9. Badges, tellingen, signalen ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--badge-rand); white-space: nowrap; }
.badge-punt::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: .7; }
.badge-grijs, .badge-neutraal, .badge-blauw { background: var(--color-chip-vlak); color: var(--color-chip-tekst); --badge-rand: var(--color-chip-rand); }
.badge-paars { background: var(--color-chip-vlak); color: var(--color-chip-zacht); --badge-rand: var(--color-chip-rand); }
.badge-groen { background: var(--color-gelukt-vlak); color: var(--color-gelukt-tekst); --badge-rand: var(--color-gelukt-rand); }
.badge-oranje { background: var(--color-waarschuwing-vlak); color: var(--color-waarschuwing-tekst); --badge-rand: var(--color-waarschuwing-rand); }
.badge-rood { background: var(--color-fout-vlak); color: var(--color-fout-tekst); --badge-rand: var(--color-fout-rand); }
.badge-info { background: var(--color-info-vlak-sterk); color: var(--color-info-tekst); --badge-rand: var(--color-info-rand); }
.badge-geel { background: var(--merk-accent-zacht); color: var(--merk-accent-licht); --badge-rand: rgba(245,196,0,.3); }
.signaal { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.signaal .ic { width: 14px; height: 14px; } .signaal span { font-weight: 500; }
.signaal-info { color: var(--color-chip-tekst); background: var(--color-chip-vlak); box-shadow: inset 0 0 0 1px var(--color-chip-rand); }
.signaal-waarschuwing { color: var(--color-waarschuwing-tekst); background: var(--color-waarschuwing-vlak-sterk); box-shadow: inset 0 0 0 1px var(--color-waarschuwing-rand); }
.signaal-urgent { color: #fff; background: #e40014; }
.signaal-gelukt { color: var(--color-gelukt-tekst); background: var(--color-gelukt-vlak-sterk); box-shadow: inset 0 0 0 1px var(--color-gelukt-rand); }
.bedragpil { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--pil-rand); }
.bedragpil-rood { background: var(--color-fout-vlak); color: var(--color-fout-tekst); --pil-rand: var(--color-fout-rand); }
.bedragpil-oranje { background: var(--color-waarschuwing-vlak); color: var(--color-waarschuwing-tekst); --pil-rand: var(--color-waarschuwing-rand); }
.bedragpil-grijs { background: var(--color-vlak-zacht); color: var(--color-primair); --pil-rand: var(--color-rand); }
.bedragpil-groen { background: var(--color-gelukt-vlak); color: var(--color-gelukt-tekst); --pil-rand: var(--color-gelukt-rand); }
.telling { display: inline-grid; min-width: 20px; place-items: center; border-radius: 9999px; padding: 2px 6px; font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.telling-urgent { background: #fb2c36; color: #fff; } .telling-actief { background: var(--merk-donker); color: var(--merk-accent-licht); } .telling-neutraal { background: var(--color-vlak-diep); color: var(--color-secundair); }
.filterchip { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; border-radius: 6px; background: var(--color-vlak-diep); padding: 4px 8px 4px 10px; font-size: 12px; font-weight: 500; color: var(--color-secundair); transition: all var(--overgang); }
.filterchip:hover { background: var(--color-rand); color: var(--color-primair); } .filterchip .x { font-size: 15px; line-height: 1; color: var(--color-tertiair); }
.ailabel { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: var(--merk-accent-zacht); padding: 2px 6px; font-size: 11px; font-weight: 500; color: var(--merk-accent-licht); box-shadow: inset 0 0 0 1px rgba(245,196,0,.3); }

/* ---------- 10. Tabs en schakelaars ---------- */
.tabs { position: relative; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--color-rand); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { margin-bottom: -1px; display: flex; min-height: 44px; flex-shrink: 0; align-items: center; gap: 6px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; padding-inline: 14px; font-size: 13px; font-weight: 500; color: var(--color-tertiair); transition: all var(--overgang); white-space: nowrap; }
.tab:hover { border-bottom-color: var(--color-rand-sterk); background: var(--color-vlak-zacht); color: var(--color-primair); }
.tab.is-actief { border-bottom-color: var(--accent); background: var(--accent-zacht); font-weight: 600; color: var(--accent-donker); }
.tab .ic { width: 16px; height: 16px; }
.kaart .tabs { margin: 0 -20px; padding: 0 16px; }
.keuzebalk { display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 4px; }
.keuzebalk button { height: 40px; border-radius: 6px; padding-inline: 12px; font-size: 14px; font-weight: 500; color: var(--color-secundair); transition: all var(--overgang); }
.keuzebalk button:hover { background: var(--color-vlak-zacht); color: var(--color-primair); } .keuzebalk button.is-actief { background: var(--accent-zacht); color: var(--accent-donker); }
.keuzebalk-klein button { min-height: 32px; height: auto; flex: 1; padding: 4px 8px; font-size: 11px; }
.segment { display: inline-flex; border-radius: 8px; border: 1px solid var(--color-rand); padding: 2px; background: var(--color-vlak); }
.segment button { height: 40px; border-radius: 6px; padding-inline: 14px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: var(--color-secundair); transition: all var(--overgang); }
.segment button:hover { background: var(--color-vlak-diep); } .segment button.is-actief { background: var(--accent); color: var(--accent-op); }
.pill { height: 40px; border-radius: 9999px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding-inline: 14px; font-size: 13px; font-weight: 500; color: var(--color-secundair); transition: all var(--overgang); }
.pill.is-actief { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-link); }
.pill-klein { height: auto; border-radius: 9999px; border: 1px solid var(--color-rand); padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--color-secundair); } .pill-klein:hover { background: var(--color-vlak-zacht); }
.pill-avatar { display: flex; height: 40px; align-items: center; gap: 6px; border-radius: 9999px; border: 1px solid var(--color-rand-sterk); background: var(--color-vlak); padding: 0 14px 0 4px; font-size: 13px; font-weight: 500; color: var(--color-primair); transition: all var(--overgang); }
.pill-avatar.is-uit { border-color: var(--color-rand-zacht); background: var(--color-vlak-zacht); color: var(--color-tertiair); } .pill-avatar.is-uit .avatar { opacity: .5; }

/* ---------- 11. Tabellen ---------- */
.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; min-width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { border-bottom: 1px solid var(--color-rand); padding: 10px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); text-align: left; white-space: nowrap; }
.tabel th.rechts, .tabel td.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tabel td { border-bottom: 1px solid var(--color-rand-zacht); padding: 10px 12px; vertical-align: top; color: var(--color-primair); }
.tabel td.midden { vertical-align: middle; }
.tabel tr.klik { position: relative; cursor: pointer; } .tabel tr.klik:hover { background: var(--color-vlak-zacht); }
.tabel tr.klik td:first-child a::after { content: ""; position: absolute; inset: 0; }
.tabel tr.klik td:first-child a:hover { text-decoration: underline; }
.tabel .groepsrij td { background: color-mix(in srgb, var(--color-vlak-zacht) 70%, transparent); padding: 8px 12px; }
.tabel td.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--color-tertiair); }
.tabelkaart-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-rand-zacht); padding: 16px 20px; }
.tabelkaart-kop h2 { font-size: 15px; font-weight: 600; color: var(--color-primair); } .tabelkaart-kop p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--color-tertiair); }
.tabelkaart-voet { border-top: 1px solid var(--color-rand-zacht); padding: 12px 20px; font-size: 12px; line-height: 1.5; color: var(--color-tertiair); }
.sorteer { margin-inline: -4px; display: inline-flex; min-height: 32px; align-items: center; gap: 4px; border-radius: 6px; padding-inline: 4px; text-transform: uppercase; letter-spacing: .025em; transition: color var(--overgang); font-size: 12px; font-weight: 600; color: inherit; }
.sorteer:hover { color: var(--color-primair); } .sorteer.is-actief { color: var(--color-primair); } .sorteer .ic { width: 12px; height: 12px; color: var(--color-gedempt); } .sorteer.is-actief .ic { color: var(--accent); }
.tabel-eenvoudig { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel-eenvoudig th { padding: 8px 20px; font-weight: 500; color: var(--color-secundair); text-align: left; border-bottom: 1px solid var(--color-rand); background: var(--color-vlak-zacht); }
.tabel-eenvoudig td { padding: 10px 20px; color: var(--color-primair); border-bottom: 1px solid var(--color-rand-zacht); }
.tabel-eenvoudig td.rechts, .tabel-eenvoudig th.rechts { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-secundair); }
.tabel-eenvoudig tr.totaal td { background: var(--color-vlak-zacht); font-weight: 600; color: var(--color-primair); }

/* ---------- 12. Modals, menu's, toasts, tooltips ---------- */
.modal-laag { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(16,24,40,.4); opacity: 0; transition: opacity .16s ease-out; }
.modal-laag.is-open { opacity: 1; }
.modal { position: relative; max-height: 92%; width: 100%; overflow-y: auto; border-radius: 12px 12px 0 0; background: var(--color-vlak); box-shadow: var(--schaduw-overlay); animation: .18s ease-out both opkomen; }
@media (min-width: 40rem) { .modal-laag { align-items: center; } .modal { border-radius: 12px; max-width: 512px; } .modal-breed { max-width: 768px; } .modal-smal { max-width: 448px; } }
.modal-kop { position: sticky; top: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-rand); background: var(--color-vlak); padding: 16px 20px; }
.modal-kop > div, .modal-kop > h2 { min-width: 0; } .modal-kop h2 { font-size: 15px; font-weight: 600; color: var(--color-primair); } .modal-kop p { margin-top: 2px; font-size: 13px; color: var(--color-tertiair); }
.modal-kop .knop-x { margin-left: auto; }
.modal-body { padding: 16px 20px; } .modal-body > * + * { margin-top: 16px; }
.modal-voet { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding: 12px 20px calc(12px + var(--veilig-onder)); }
@media (min-width: 40rem) { .modal-voet { padding-bottom: 12px; } }
.modal-voet .links { margin-right: auto; }
body.modal-open { overflow: hidden; }
.menu-laag { position: fixed; inset: 0; z-index: 45; }
.menu { position: absolute; z-index: 46; width: 224px; max-width: calc(100vw - 2rem); max-height: 320px; overflow-y: auto; border-radius: 8px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 4px 0; box-shadow: var(--schaduw-zwevend); animation: .18s ease-out both opkomen; }
.menu-breed { width: 240px; }
.menu-item { display: flex; height: 40px; width: 100%; align-items: center; gap: 10px; padding-inline: 14px; text-align: left; font-size: 13px; font-weight: 500; color: var(--color-secundair); }
.menu-item:hover { background: var(--color-vlak-zacht); } .menu-item.is-gevaar { color: var(--color-fout-zacht); } .menu-item.is-gevaar:hover { background: var(--color-fout-vlak); }
.menu-item:disabled { cursor: not-allowed; opacity: .5; } .menu-item .ic { width: 16px; height: 16px; color: var(--color-tertiair); } .menu-item span:first-of-type { flex: 1; }
.menu-item.is-actief { color: var(--accent-donker); }
.menu-rechts { font-size: 11px; color: var(--color-tertiair); }
.menu-kop { border-bottom: 1px solid var(--color-rand-zacht); padding: 6px 14px 8px; }
.menu-kop .naam { font-size: 13px; font-weight: 600; color: var(--color-primair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-kop .rol { font-size: 12px; color: var(--color-tertiair); }
.menu-scheiding { margin: 4px 0; border-top: 1px solid var(--color-rand-zacht); }
.menu-blok { border-top: 1px solid var(--color-rand-zacht); padding: 8px 14px; }
.menu-blok .label { margin-bottom: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.meldingen { position: absolute; right: 0; z-index: 40; margin-top: 8px; max-height: 70vh; width: min(24rem, calc(100vw - 2rem)); overflow-y: auto; border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 4px 0; box-shadow: var(--schaduw-overlay); animation: .18s ease-out both opkomen; }
.meldingen .kop { padding: 12px 16px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.melding { display: flex; gap: 12px; padding: 12px 16px; } .melding:hover { background: var(--color-vlak-zacht); } .melding.is-nieuw { background: color-mix(in srgb, var(--accent-zacht) 40%, transparent); }
.melding .stip { margin-top: 6px; width: 8px; height: 8px; flex-shrink: 0; border-radius: 9999px; background: var(--color-rand-sterk); } .melding .stip-accent { background: var(--accent); } .melding .stip-groen { background: #00c758; }
.melding .titel { display: block; font-size: 14px; font-weight: 500; color: var(--color-primair); } .melding .tekst { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-secundair); } .melding .tijd { display: block; margin-top: 2px; font-size: 12px; color: var(--color-tertiair); }
.toast-bak { pointer-events: none; position: fixed; bottom: calc(var(--tabbalk-ruimte) + 1rem); right: 16px; z-index: 60; display: flex; width: min(22rem, calc(100vw - 2rem)); flex-direction: column; gap: 8px; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; border-radius: 8px; border: 1px solid var(--color-rand); border-left: 4px solid #00c758; background: var(--color-vlak); padding: 12px; box-shadow: var(--schaduw-zwevend); font-size: 13px; font-weight: 600; color: var(--color-primair); opacity: 0; transform: translateY(6px); transition: all .18s ease-out; }
.toast.is-open { opacity: 1; transform: none; } .toast .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--color-tertiair); }
.toast-info { border-left-color: #90a1b9; } .toast-fout { border-left-color: #fe6e00; }
.tooltip { position: relative; display: inline-flex; max-width: 100%; }
.tooltip .ballon { pointer-events: none; position: absolute; bottom: 100%; left: 0; z-index: 50; margin-bottom: 6px; width: max-content; max-width: 320px; border-radius: 8px; background: var(--color-omgekeerd); padding: 6px 10px; font-size: 12px; font-weight: 500; line-height: 1.375; color: var(--color-op-omgekeerd); box-shadow: var(--schaduw-zwevend); opacity: 0; transition: opacity var(--overgang); }
.tooltip:hover .ballon, .tooltip:focus-within .ballon { opacity: 1; }
.meldingsbalk { border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--mb-rand); }
.meldingsbalk-gelukt { background: var(--color-gelukt-vlak); color: var(--color-gelukt-tekst); --mb-rand: var(--color-gelukt-rand); }
.meldingsbalk-fout { background: var(--color-fout-vlak); color: var(--color-fout-tekst); --mb-rand: var(--color-fout-rand); }
.meldingsbalk-waarschuwing { display: flex; align-items: flex-start; gap: 10px; background: var(--color-waarschuwing-vlak-sterk); color: var(--color-waarschuwing-tekst); --mb-rand: var(--color-waarschuwing-rand); }
.meldingsbalk-accent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--accent-zacht); color: var(--accent-donker); --mb-rand: var(--accent-rand); font-weight: 400; }
.controle-blok { border-radius: 8px; border: 1px solid var(--color-fout-rand); background: var(--color-fout-vlak); padding: 14px 16px; }
.controle-blok .rij-fout { display: flex; gap: 10px; margin-top: 10px; } .controle-blok .rij-fout .ic { width: 16px; height: 16px; color: var(--color-fout-zacht); margin-top: 2px; }
.controle-blok .rij-fout b { font-size: 13px; color: var(--color-primair); } .controle-blok .rij-fout p { font-size: 12px; color: var(--color-secundair); }
.rondleiding-laag { position: fixed; inset: 0; z-index: 44; background: transparent; }
.rondleiding-spot { position: absolute; z-index: 45; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(17,24,39,.55), 0 0 0 2px var(--accent); transition: all .22s cubic-bezier(.22,.61,.36,1); }
.rondleiding { position: absolute; z-index: 46; width: min(22rem, calc(100vw - 32px)); border-radius: 12px; border: 1px solid var(--accent-rand); background: var(--color-vlak); padding: 16px; box-shadow: var(--schaduw-overlay); animation: .18s ease-out both opkomen; }
.rondleiding-onderin { position: fixed; inset-inline: 12px; width: auto; bottom: calc(var(--tabbalk-ruimte) + 1rem); top: auto !important; left: auto !important; }
.rondleiding-midden { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rondleiding h2 { font-size: 15px; font-weight: 600; color: var(--color-primair); }
.rondleiding p { margin-top: 4px; font-size: 14px; line-height: 1.625; color: var(--color-secundair); }
.rondleiding .rondleiding-tel { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-tertiair); }
.rondleiding .rondleiding-scheelt { margin-top: 8px; font-size: 13px; color: var(--color-tertiair); }
.rondleiding .knoppen { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rondleiding-kruis { position: absolute; top: 6px; right: 6px; }
@media (prefers-reduced-motion: reduce) { .rondleiding, .rondleiding-spot { animation: none; transition: none; } }
.zoekdialoog-laag { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: rgba(16,24,40,.4); }
@media (min-width: 40rem) { .zoekdialoog-laag { padding-top: 96px; } }
.zoekdialoog { position: relative; display: flex; max-height: 80vh; width: 100%; max-width: 576px; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--color-vlak); box-shadow: var(--schaduw-overlay); animation: .18s ease-out both opkomen; }
.zoekdialoog .zoekrij { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-rand); padding-inline: 16px; }
.zoekdialoog .zoekrij .ic { color: var(--color-tertiair); } .zoekdialoog input { height: 56px; flex: 1; background: transparent; font-size: 16px; color: var(--color-primair); outline: none; border: 0; }
@media (min-width: 40rem) { .zoekdialoog input { font-size: 14px; } }
.zoekdialoog .resultaten { min-height: 0; flex: 1; overflow-y: auto; } .zoekdialoog .leegtekst { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--color-tertiair); }
.zoekdialoog .groep { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.zoekresultaat { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; } .zoekresultaat:hover, .zoekresultaat.is-aangewezen { background: var(--color-vlak-zacht); }
.zoekresultaat .ic { color: var(--color-tertiair); width: 18px; height: 18px; } .zoekresultaat .titel { font-size: 14px; font-weight: 500; color: var(--color-primair); } .zoekresultaat .sub { font-size: 12px; color: var(--color-tertiair); }
.zoekdialoog .voet { display: none; align-items: center; gap: 16px; border-top: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding: 8px 16px; font-size: 11px; color: var(--color-tertiair); }
@media (min-width: 40rem) { .zoekdialoog .voet { display: flex; } }

/* ---------- 13. Avatar, stappen, voortgang, KPI, lege staat ---------- */
.avatar { display: inline-grid; flex-shrink: 0; place-items: center; border-radius: 9999px; font-weight: 600; color: var(--avatar-op, #fff); background: var(--avatar-kleur, var(--accent)); width: 26px; height: 26px; font-size: 9.36px; }
.avatar-20 { width: 20px; height: 20px; font-size: 7.2px; } .avatar-22 { width: 22px; height: 22px; font-size: 7.92px; } .avatar-28 { width: 28px; height: 28px; font-size: 10.08px; } .avatar-34 { width: 34px; height: 34px; font-size: 12.24px; } .avatar-40 { width: 40px; height: 40px; font-size: 14.4px; }
.avatar-stil { color: var(--color-chip-zacht); background: var(--color-chip-vlak-sterk); }
.avatar-blauw { --avatar-kleur: var(--accent); --avatar-op: var(--accent-op); } .avatar-groen { --avatar-kleur: #15803d; } .avatar-oranje { --avatar-kleur: #c2410c; } .avatar-paars { --avatar-kleur: #7c3aed; } .avatar-teal { --avatar-kleur: #0f766e; } .avatar-roze { --avatar-kleur: #db2777; } .avatar-grijs { --avatar-kleur: #6b7280; }
.avatars { display: flex; align-items: center; } .avatars .avatar { box-shadow: 0 0 0 2px var(--color-vlak); } .avatars .avatar + .avatar { margin-left: -6px; }
.stappenbalk { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; }
.stappenbalk li { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: max-content; } .stappenbalk li:last-child { flex: none; }
.stappenbalk .stap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.stappenbalk .lijn { margin-inline: 4px; height: 1px; min-width: 12px; flex: 1; background: var(--color-rand); } .stappenbalk .lijn.is-af { background: var(--accent); }
.stappenbalk .bol { display: grid; width: 24px; height: 24px; flex-shrink: 0; place-items: center; border-radius: 9999px; font-size: 11px; font-weight: 600; background: var(--color-rand); color: var(--color-tertiair); }
.stappenbalk .bol .ic { width: 14px; height: 14px; }
.stappenbalk .is-af .bol, .stappenbalk .is-huidig .bol { background: var(--accent); color: var(--accent-op); } .stappenbalk .is-huidig .bol { box-shadow: 0 0 0 4px var(--accent-zacht); }
.stappenbalk .naam { white-space: nowrap; font-size: 12px; color: var(--color-tertiair); } .stappenbalk .is-af .naam { color: var(--color-secundair); } .stappenbalk .is-huidig .naam { font-weight: 600; color: var(--color-primair); }
.stappenbalk-lang { display: none; } @media (min-width: 48rem) { .stappenbalk-lang { display: flex; } .stappen-mobiel { display: none; } }
.stappen-mobiel .rij-b { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .stappen-mobiel .huidig { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--color-primair); } .stappen-mobiel .van { flex-shrink: 0; font-size: 12px; color: var(--color-tertiair); }
.stappen-mobiel .uitleg { margin-top: 8px; font-size: 12px; line-height: 1.625; color: var(--color-secundair); }
.voortgang { height: 6px; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--color-rand); margin-top: 8px; } .voortgang > div { height: 100%; border-radius: 9999px; background: var(--accent); transition: all .3s; }
.aandeel { display: block; margin-top: 4px; height: 4px; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--color-vlak-diep); } .aandeel > span { display: block; height: 100%; border-radius: 9999px; background: #00a5ef; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } @media (min-width: 64rem) { .kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kpi { display: block; height: 100%; } .kpi .kaart { position: relative; height: 100%; overflow: hidden; border-left: 4px solid #d1d5dc; padding: 0; transition: all var(--overgang); } .kpi:hover .kaart { transform: translateY(-2px); box-shadow: var(--schaduw-zweef); }
.kpi .in { height: 100%; padding: 16px; } .kpi .pijl { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; color: var(--color-gedempt); opacity: 0; transition: opacity var(--overgang); } .kpi:hover .pijl { opacity: 1; }
.kpi-goed .kaart { border-left-color: #05df72; } .kpi-goed .in { background: color-mix(in srgb, var(--color-gelukt-vlak) 50%, transparent); } .kpi-goed .trend { color: var(--color-gelukt-tekst); }
.kpi-aandacht .kaart { border-left-color: #ff8b1a; } .kpi-aandacht .in { background: color-mix(in srgb, var(--color-waarschuwing-vlak) 50%, transparent); } .kpi-aandacht .trend { color: var(--color-waarschuwing-tekst); }
.kpi-urgent .kaart { border-left-color: #ff6568; } .kpi-urgent .in { background: color-mix(in srgb, var(--color-fout-vlak) 50%, transparent); } .kpi-urgent .trend { color: var(--color-fout-tekst); }
.kpi .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.kpi .waarde { margin-top: 4px; font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--color-primair); } .kpi .waarde.is-leeg { color: var(--color-gedempt); }
.kpi .toelichting { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--color-secundair); } .kpi .trend { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--color-tertiair); } .kpi .trend .ic { width: 14px; height: 14px; }
.actiekaart { overflow: hidden; border-left: 4px solid #d1d5dc; padding: 0; } .actiekaart-vandaag { border-left-color: #fb2c36; } .actiekaart-week { border-left-color: #fe6e00; }
.actiekaart .in { display: flex; height: 100%; flex-direction: column; gap: 12px; padding: 16px; } .actiekaart .titel { font-size: 14px; font-weight: 700; line-height: 1.375; color: var(--color-primair); } .actiekaart .tekst { margin-top: 4px; font-size: 13px; line-height: 1.375; color: var(--color-secundair); } .actiekaart .voet { margin-top: auto; }
.tijdlijn { position: relative; border-left: 2px solid var(--color-rand); padding-left: 20px; } .tijdlijn > li + li { margin-top: 20px; } .tijdlijn li { position: relative; }
.tijdlijn .stip { position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; border-radius: 9999px; border: 2px solid var(--color-vlak); background: var(--accent); box-shadow: var(--schaduw-sm); }
.tijdlijn .stip-groen { background: #16a34a; } .tijdlijn .stip-oranje { background: #f97316; } .tijdlijn .stip-grijs { background: var(--color-rand-sterk); } .tijdlijn .stip-rood { background: #dc2626; }
.tijdlijn .tijd { font-size: 13px; font-weight: 700; color: var(--color-tertiair); } .tijdlijn .titel { margin-top: 2px; display: block; font-size: 14px; font-weight: 600; color: var(--color-primair); } .tijdlijn a.titel:hover { text-decoration: underline; } .tijdlijn .sub { font-size: 13px; color: var(--color-secundair); }
.tijdlijn-dag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); margin-bottom: 8px; }
.leeg { text-align: center; padding: 48px 16px; } .leeg-compact { padding: 24px 16px; }
.leeg .leeg-ic { margin: 0 auto 12px; width: 44px; height: 44px; color: var(--color-gedempt); }
.leeg-titel { font-size: 14px; font-weight: 500; color: var(--color-secundair); } .leeg-tekst { margin: 4px auto 0; max-width: 384px; font-size: 13px; line-height: 1.625; color: var(--color-tertiair); } .leeg .actie { margin-top: 16px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.leeg-bol { margin: 0 auto 12px; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 9999px; background: var(--color-gelukt-vlak-sterk); color: var(--color-gelukt-tekst); }
.stippelvlak { display: grid; flex: 1; place-items: center; border-radius: 8px; border: 1px dashed var(--color-rand-sterk); padding: 16px; text-align: center; font-size: 12px; line-height: 1.375; color: var(--color-tertiair); }
.filterbalk { border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 12px 16px; box-shadow: var(--schaduw-rust); }
.filterbalk .rij-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .filterbalk .zoek { min-width: 224px; flex: 1; }
.filterbalk .keuze { width: 100%; } @media (min-width: 40rem) { .filterbalk .keuze { width: 224px; } .filterbalk .keuze-klein { width: 192px; } }
.filterbalk .actief { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--color-rand-zacht); padding-top: 12px; font-size: 12px; color: var(--color-tertiair); }
.skelet { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; border-radius: 8px; background: var(--color-rand); }

/* ---------- 14. Werkbord en planning ---------- */
.werkbord { display: flex; gap: 12px; overflow-x: auto; margin-inline: -16px; padding: 0 16px 16px; overscroll-behavior-x: contain; }
@media (min-width: 40rem) { .werkbord { margin-inline: -24px; padding-inline: 24px; } }
.kolom-w { display: flex; width: 300px; flex-shrink: 0; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid var(--color-rand); background: color-mix(in srgb, var(--color-vlak-zacht) 70%, transparent); transition: border-color var(--overgang); }
.kolom-w.is-doel { border-color: var(--accent); } .kolom-w.is-dicht { width: 56px; }
.kolom-w .streep { display: block; height: 4px; width: 100%; }
.kolom-w header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--color-rand); padding: 10px 12px; }
.kolom-w header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--color-primair); } .kolom-w header .aantal { font-size: 12px; color: var(--color-tertiair); } .kolom-w header .bedrag { font-size: 12px; font-weight: 500; color: var(--color-secundair); }
.kolom-w .body { display: flex; min-height: 128px; flex: 1; flex-direction: column; gap: 8px; padding: 8px; }
.wkaart { cursor: grab; border-radius: 8px; border: 1px solid var(--color-rand); border-left: 3px solid #9ca3af; background: var(--color-vlak); box-shadow: var(--schaduw-rust); transition: box-shadow var(--overgang); }
.wkaart:hover { box-shadow: var(--schaduw-zweef); } .wkaart:active { cursor: grabbing; } .wkaart.is-sleep { opacity: .4; } .wkaart.is-nieuw { animation: 1.4s ease-out both oplichten; }
.wkaart .in { padding: 12px; } .wkaart .kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .wkaart .titel { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.375; color: var(--color-primair); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wkaart .kop .rechts { margin: -6px -6px 0 0; display: flex; flex-shrink: 0; align-items: center; gap: 4px; }
.wkaart .klant { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-secundair); } .wkaart .plaats { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-tertiair); }
.wkaart .bedrag { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--color-primair); } .wkaart .volgende { margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--color-tertiair); } .wkaart .volgende b { font-weight: 500; color: var(--color-secundair); }
.werkbord-mobiel { display: flex; flex-direction: column; gap: 20px; } .werkbord-mobiel section { display: flex; flex-direction: column; gap: 8px; } .werkbord-mobiel header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-inline: 4px; }
.werkbord-mobiel header .stip { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 9999px; margin-right: 6px; }
@media (min-width: 48rem) { .werkbord-mobiel { display: none; } } @media (max-width: 47.99rem) { .werkbord { display: none; } }
.sleepschaduw { pointer-events: none; position: fixed; z-index: 80; width: 260px; transform: translate(-50%, -50%) rotate(1deg); border-radius: 8px; border: 1px solid var(--color-rand); background: var(--color-vlak); padding: 8px 12px; box-shadow: var(--schaduw-overlay); font-size: 13px; font-weight: 600; }

.week-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); }
.week-grid { display: grid; min-width: max-content; grid-template-columns: 132px repeat(5, 176px) 104px 104px; }
.week-grid .hoek { position: sticky; left: 0; z-index: 20; border-bottom: 1px solid var(--color-rand); border-right: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--color-tertiair); }
.week-grid .dagkop { border-bottom: 1px solid var(--color-rand); border-right: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding: 8px; }
.week-grid .dagkop.is-vandaag { background: var(--accent-zacht); }
.week-grid .dagkop span:first-child { display: block; font-size: 12px; font-weight: 600; text-transform: capitalize; color: var(--color-secundair); } .week-grid .dagkop span + span { display: block; font-size: 11px; color: var(--color-tertiair); }
.week-grid .rijlabel { position: sticky; left: 0; z-index: 10; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-rand); border-right: 1px solid var(--color-rand); background: var(--color-vlak); padding: 8px; }
.week-grid .rijlabel .naam { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--color-primair); } .week-grid .rijlabel .vrij { display: block; font-size: 11px; font-weight: 500; color: var(--color-gelukt-tekst); }
.week-grid .cel { min-height: 64px; border-bottom: 1px solid var(--color-rand-zacht); border-right: 1px solid var(--color-rand-zacht); padding: 6px; } .week-grid .cel > * + * { margin-top: 4px; }
.week-grid .cel.is-vrij { background: var(--color-gelukt-vlak); } .week-grid .cel.is-afwezig { background: var(--color-fout-vlak); } .week-grid .cel.is-doel { background: var(--accent-zacht); }
.week-grid .cel .vrijtekst { display: block; padding: 4px; font-size: 11px; font-weight: 500; color: var(--color-gelukt-tekst); } .week-grid .cel .afwezigtekst { display: block; padding: 4px; font-size: 11px; font-weight: 500; color: var(--color-fout-tekst); }
.afspraakblok { display: block; width: 100%; min-height: 40px; border-radius: 6px; border-left: 4px solid #fe6e00; padding: 4px 6px; text-align: left; background: var(--color-waarschuwing-vlak); color: var(--color-waarschuwing-tekst); box-shadow: inset 0 0 0 1px var(--color-waarschuwing-rand); transition: all var(--overgang); font-size: 11px; line-height: 1.35; cursor: grab; }
.afspraakblok:hover { background: var(--color-waarschuwing-vlak-sterk); }
.afspraakblok.is-opname { border-left-color: #90a1b9; background: var(--color-chip-vlak); color: var(--color-chip-tekst); box-shadow: inset 0 0 0 1px var(--color-chip-rand); } .afspraakblok.is-opname:hover { background: var(--color-chip-vlak-sterk); }
.afspraakblok.is-bevestigd { border-left-color: #16a34a; }
.afspraakblok .tijd { display: block; font-weight: 600; } .afspraakblok .titel { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .afspraakblok .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.dag-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); } .dag-grid { display: flex; min-width: 536px; }
.dag-grid .tijdkolom { width: 56px; flex-shrink: 0; border-right: 1px solid var(--color-rand-zacht); } .dag-grid .tijdkolom .kop { height: 48px; border-bottom: 1px solid var(--color-rand); background: var(--color-vlak-zacht); }
.dag-grid .raster { position: relative; height: 704px; } .dag-grid .uurlabel { position: absolute; transform: translateY(-50%); padding-right: 8px; text-align: right; font-size: 11px; color: var(--color-tertiair); width: 100%; }
.dag-grid .persoonkolom { width: 160px; flex: 1; min-width: 160px; border-right: 1px solid var(--color-rand-zacht); } .dag-grid .persoonkolom:last-child { border-right: 0; }
.dag-grid .persoonkolom .kop { display: flex; height: 48px; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding-inline: 8px; font-size: 12px; font-weight: 600; color: var(--color-primair); }
.dag-grid .persoonkolom .kop .stip { width: 8px; height: 8px; flex-shrink: 0; border-radius: 9999px; background: var(--accent); }
.dag-grid .uurlijn { position: absolute; left: 0; right: 0; height: 1px; background: var(--color-vlak-diep); }
.dagblok { position: absolute; left: 4px; right: 4px; overflow: hidden; border-radius: 6px; border-left: 4px solid var(--accent); background: var(--accent-zacht); padding: 4px 6px; text-align: left; box-shadow: inset 0 0 0 1px var(--accent-rand); transition: opacity var(--overgang); font-size: 11px; line-height: 1.35; color: var(--accent-donker); }
.dagblok:hover { filter: brightness(.97); } .dagblok .tijd { display: flex; align-items: center; gap: 4px; font-weight: 600; } .dagblok .tijd::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); flex-shrink: 0; }
.maand-wrap { overflow: hidden; border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); }
.maand-kop { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-bottom: 1px solid var(--color-rand); background: var(--color-vlak-zacht); }
.maand-kop div { padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--color-tertiair); }
.maand-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.maandcel { min-height: 80px; border-bottom: 1px solid var(--color-rand-zacht); border-right: 1px solid var(--color-rand-zacht); padding: 6px; text-align: left; vertical-align: top; transition: background-color var(--overgang); }
.maandcel:hover { background: var(--color-vlak-zacht); } .maandcel.is-buiten { background: color-mix(in srgb, var(--color-vlak-zacht) 60%, transparent); } .maandcel.is-buiten .num { color: var(--color-gedempt); }
.maandcel .num { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 9999px; font-size: 12px; font-weight: 500; color: var(--color-secundair); } .maandcel.is-vandaag .num { background: var(--accent); color: var(--accent-op); }
.maandcel .blokjes { margin-top: 4px; } .maandcel .blokjes > * + * { margin-top: 2px; }
.maandblok { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; border-left: 3px solid #fe6e00; background: var(--color-waarschuwing-vlak); padding: 2px 4px; font-size: 11px; color: var(--color-waarschuwing-tekst); }
.maandblok.is-opname { border-left-color: #90a1b9; background: var(--color-chip-vlak); color: var(--color-chip-tekst); } .maandblok.is-afwezig { border-left-color: #dc2626; background: var(--color-fout-vlak); color: var(--color-fout-tekst); }
@media (min-width: 40rem) { .maandcel { min-height: 96px; } }
.perdag { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; } .perdag section { flex-shrink: 0; width: 232px; border-radius: 12px; border: 1px solid var(--color-rand); background: var(--color-vlak); transition: border-color var(--overgang); }
.perdag section.is-weekend { width: 132px; } .perdag section.is-vandaag { border-color: var(--accent-rand); }
.perdag header { border-bottom: 1px solid var(--color-rand); background: var(--color-vlak-zacht); padding: 8px 12px; border-radius: 12px 12px 0 0; } .perdag header span:first-child { display: block; font-size: 12px; font-weight: 600; text-transform: capitalize; color: var(--color-secundair); } .perdag header span + span { display: block; font-size: 11px; color: var(--color-tertiair); }
.perdag .body { padding: 8px; } .perdag .body > * + * { margin-top: 6px; } .perdag .persoonkop { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--color-tertiair); display: flex; align-items: center; gap: 6px; }
@media (max-width: 63.99rem) { .perdag { flex-direction: column; } .perdag section, .perdag section.is-weekend { width: auto; } }

/* Catalogus, rijen */
.rij-lijst > * + * { border-top: 1px solid var(--color-rand-zacht); }
.catrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; text-align: left; width: 100%; border-radius: 8px; }
.catrij:hover { background: var(--accent-zacht); }
.categorie-knop { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; text-align: left; } .categorie-knop:hover { background: var(--color-vlak-zacht); }
.categorie-knop .ic { width: 16px; height: 16px; color: var(--color-tertiair); transition: transform var(--overgang); transform: rotate(90deg); } .categorie-knop[aria-expanded=false] .ic { transform: none; }
.offerteregel-mobiel { border-bottom: 1px solid var(--color-rand-zacht); padding: 12px 0; }

/* Documenten (offerte, factuur, werkbon) */
.doc-schil { overflow: auto; border-radius: 8px; border: 1px solid var(--color-rand); background: #fff; }
.doc { margin-inline: auto; width: 100%; max-width: 820px; background: #fff; color: #111827; font-family: Inter, "Helvetica Neue", Arial, sans-serif; padding: 24px; font-size: 10pt; line-height: 1.5; }
.doc.doc-klassiek { font-family: Georgia, "Times New Roman", serif; }
.doc-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 4px solid var(--accent); padding-bottom: 24px; }
.doc-kop .bedrijf { font-size: 18pt; font-weight: 700; letter-spacing: -.025em; color: #111827; } .doc-kop .logo { max-height: 56px; width: auto; margin-bottom: 10px; }
.doc-kop .adres { margin-top: 10px; font-size: 10pt; line-height: 1.625; color: #374151; } .doc-kop .adres p + p { margin-top: 2px; }
.doc-kop .rechts { text-align: right; } .doc-kop .soort { font-size: 18pt; font-weight: 700; letter-spacing: -.025em; color: var(--accent-donker); }
.doc-kop dl { margin-top: 10px; font-size: 10pt; } .doc-kop dl div { display: flex; justify-content: flex-end; gap: 12px; } .doc-kop dl div + div { margin-top: 4px; } .doc-kop dt { color: #4b5563; } .doc-kop dd { width: 144px; white-space: nowrap; color: #111827; } .doc-kop dd.nummer { font-weight: 600; }
.doc-adressen { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 32px; } .doc-adressen > div { min-width: 220px; }
.doc-label { font-size: 10pt; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: #4b5563; } .doc-label.accent { color: var(--accent-donker); }
.doc-adressen .naam { margin-top: 6px; font-weight: 600; color: #111827; } .doc-adressen p { color: #374151; }
.doc-intro { margin-top: 32px; white-space: pre-line; line-height: 1.625; color: #111827; }
.doc-sectie { margin-top: 24px; } .doc-sectie p { margin-top: 6px; white-space: pre-line; line-height: 1.625; color: #111827; }
.doc-tabel { margin-top: 32px; width: 100%; border-collapse: collapse; font-size: 10pt; }
.doc-tabel thead tr { border-bottom: 2px solid #111827; } .doc-tabel th { padding: 8px 12px; font-weight: 600; color: #111827; text-align: left; } .doc-tabel th:first-child { padding-left: 0; } .doc-tabel th:last-child { padding-right: 0; }
.doc-tabel th.rechts, .doc-tabel td.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.doc-tabel tbody tr { border-bottom: 1px solid #f3f4f6; } .doc-tabel td { padding: 10px 12px; vertical-align: top; color: #374151; } .doc-tabel td:first-child { padding-left: 0; color: #111827; } .doc-tabel td:last-child { padding-right: 0; font-weight: 500; color: #111827; }
.doc-totalen { margin-top: 16px; display: flex; justify-content: flex-end; } .doc-totalen > div { width: 100%; max-width: 280px; } .doc-totalen > div > div { display: flex; align-items: center; justify-content: space-between; color: #374151; } .doc-totalen > div > div + div { margin-top: 6px; }
.doc-totalen .totaal { margin-top: 6px; border-radius: 6px; padding: 10px 12px; font-size: 13pt; font-weight: 700; background: var(--accent-zacht); color: var(--accent-donker); }
.doc-voorwaarden { margin-top: 40px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f9fafb; padding: 16px; } .doc-voorwaarden .titel { font-weight: 600; color: #111827; } .doc-voorwaarden p { margin-top: 6px; white-space: pre-line; line-height: 1.625; color: #374151; }
.doc-onderteken { margin-top: 24px; border-radius: 8px; border: 1px solid #e5e7eb; padding: 16px; } .doc-onderteken img { margin-top: 8px; height: 64px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; } .doc-onderteken p { margin-top: 8px; color: #374151; } .doc-onderteken .code { margin-top: 2px; color: #4b5563; }
.doc-voet { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #e5e7eb; padding-top: 16px; color: #4b5563; font-size: 9pt; }
.doc-pagina { min-height: 100dvh; background: #f3f4f6; padding: 24px 16px; }
.doc-pagina .doc { box-shadow: var(--schaduw-zwevend); border-radius: 8px; padding: 40px; }
.doc-balk { max-width: 820px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.doc-voorbeeld { overflow: hidden; border-radius: 8px; border: 1px solid var(--color-rand); background: #fff; }
.doc-voorbeeld .doc { transform-origin: top left; }

/* Grafiek */
.grafiek { position: relative; height: 190px; display: flex; gap: 8px; }
.grafiek .as { display: flex; width: 56px; flex-shrink: 0; flex-direction: column; justify-content: space-between; padding-bottom: 24px; text-align: right; font-size: 11px; color: var(--color-tertiair); }
.grafiek .vlak { position: relative; flex: 1; } .grafiek .lijn { position: absolute; inset-inline: 0; border-top: 1px solid color-mix(in srgb, var(--color-rand) 70%, transparent); } .grafiek .lijn.nul { border-color: var(--color-rand-sterk); }
.grafiek .staven { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 6px; padding-bottom: 24px; }
.grafiek .staafkolom { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.grafiek .staaf { width: 100%; border-radius: 6px 6px 0 0; background: var(--color-reeks); transition: all var(--overgang); } .grafiek .staafkolom:hover .staaf { background: var(--accent); }
.grafiek .waarde { margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; max-width: 100%; }
.grafiek .label { position: absolute; bottom: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; text-transform: capitalize; color: var(--color-tertiair); }

/* ---------- 15. Animaties ---------- */
@keyframes opkomen { 0% { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inschuiven { 0% { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vervagen { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes oplichten { 0% { background-color: var(--accent-zacht); } to { background-color: transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }
.animatie-opkomen { animation: .18s ease-out both opkomen; }
@media (prefers-reduced-motion: reduce) { .animatie-opkomen, .modal, .menu, .toast, .wkaart.is-nieuw { animation: none; transition: none; } }

/* ---------- 16. Print ---------- */
/* ---------- Balkslot: er staat altijd maar een balk bovenaan ---------- */
.balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 16px; font-size: 13px; line-height: 1.4; }
.balk a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.balk-support { background: #024a70; color: #f0f9ff; }
.balk-support .balk-zacht { color: #b8e6fe; }
.balk-knop { flex-shrink: 0; height: 32px; border-radius: 8px; background: rgba(255,255,255,.15); padding-inline: 12px; font-weight: 600; color: #fff; }
.balk-knop:hover { background: rgba(255,255,255,.25); }
.balk-knop:disabled { opacity: .6; }
.balk-bevroren { background: var(--color-waarschuwing-vlak-sterk); color: var(--color-waarschuwing-tekst); }
.balk-incasso { background: var(--color-fout-vlak); color: var(--color-fout-tekst); }

/* ---------- Het beheerscherm van de leverancier ---------- */
.nav-beheer { color: var(--merk-accent-licht) !important; }
.nav-beheer.is-actief { background: rgba(255,255,255,.12); }
.wisselknop { display: none; flex-shrink: 0; align-items: center; gap: 6px; max-width: 220px; height: 36px; border: 1px solid var(--color-rand); border-radius: 8px; padding-inline: 10px 8px; font-size: 13px; font-weight: 500; color: var(--color-primair); }
.wisselknop:hover { background: var(--color-vlak-zacht); }
.wisselknop svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-tertiair); }
@media (min-width: 40rem) { .wisselknop { display: flex; } }
.beheerrij-sub { font-size: 12px; color: var(--color-tertiair); }

/* ---------- De beheerkant staat buiten de app-schil ---------- */
.internschil { min-height: 100dvh; background: var(--bg); }
.internkop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 56px; border-bottom: 1px solid var(--color-rand); background: color-mix(in srgb, var(--color-vlak) 92%, transparent); padding-inline: 16px; backdrop-filter: blur(8px); }
.internkop .merk-woord { font-size: 15px; font-weight: 700; color: var(--color-primair); }
.internlabel { border-radius: 999px; background: var(--color-vlak-diep); padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--color-secundair); }
.internschil .hoofd { padding: 20px 16px 64px; }
@media (min-width: 48rem) { .internschil .hoofd { padding: 24px 24px 64px; } }

/* ---------- De openbare demopagina ---------- */
.demo-schil { min-height: 100dvh; background: var(--bg); }
.demo-hoofd { max-width: 1120px; margin-inline: auto; padding: 28px 16px 64px; }
@media (min-width: 48rem) { .demo-hoofd { padding: 40px 24px 80px; } }
.demo-intro { max-width: 46rem; }
.demo-raster { display: grid; gap: 16px; margin-top: 24px; align-items: start; }
@media (min-width: 60rem) { .demo-raster { grid-template-columns: 1fr 1fr; gap: 20px; } }
.demo-onder { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 48rem) { .demo-onder { grid-template-columns: repeat(3, 1fr); } }
.demo-stappen { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin-top: 14px; list-style: none; padding: 0; }
.demo-stappen li { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; font-size: 12px; font-weight: 500; color: var(--color-secundair); text-align: center; }
.demo-stapbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-rand); background: var(--color-vlak); color: var(--color-tertiair); }
.demo-stapbol svg { width: 18px; height: 18px; }
.demo-voorbeelden { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 10px; }
.demo-voorbeelden li { border: 1px solid var(--color-rand); border-radius: 10px; padding: 12px 14px; background: var(--color-vlak-zacht); }
.demo-vakken { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 30rem) { .demo-vakken { grid-template-columns: 1fr 1fr; } }
.demo-vak { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border: 1px solid var(--color-rand); border-radius: 10px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--color-primair); background: var(--color-vlak); text-align: left; }
.demo-vak:hover { border-color: var(--color-rand-sterk, var(--color-tertiair)); }
.demo-vak.is-gekozen { border-color: var(--accent); background: var(--accent-zacht, color-mix(in srgb, var(--accent) 8%, transparent)); }
.demo-bol { flex-shrink: 0; width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--color-rand); }
.demo-vak.is-gekozen .demo-bol { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--color-vlak); }

/* ---------- Tip om de app op het beginscherm te zetten ---------- */
.beginschermtip { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* ---------- Op een telefoon: knoppen die passen en waar je op kunt tikken ---------- */
@media (max-width: 40rem) {
  .paginakop-rij > .rechts { width: 100%; }
  .paginakop-rij > .rechts > .knop { flex: 1 1 auto; }
  .knop-klein { min-height: 40px; }
  .ikoonknop, .ikoonknop-7 { width: 40px; height: 40px; }
  .pijlknop { min-width: 40px; min-height: 40px; }
  .tekstknop { display: inline-flex; align-items: center; min-height: 40px; }
  .filterbalk .knop { min-height: 40px; }
  .chip-keuze, .filterchip { min-height: 40px; }
}

/* ---------- De opslag doet het niet ---------- */
.opslagbalk { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbalk-ruimte) + 12px); z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; border: 1px solid var(--color-fout-rand); background: var(--color-fout-vlak); padding: 12px 16px; font-size: 13px; line-height: 1.45; color: var(--color-fout-tekst); box-shadow: var(--schaduw-overlay); }
@media (min-width: 48rem) { .opslagbalk { left: auto; right: 20px; bottom: 20px; max-width: 30rem; } }

/* ---------- Foto's ---------- */
.fotorij { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
@media (min-width: 40rem) { .fotorij { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.fotokaart { position: relative; margin: 0; border-radius: 10px; border: 1px solid var(--color-rand); background: var(--color-vlak-diep); overflow: hidden; }
.fotokaart .fotoknop { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.fotokaart img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-vlak-diep); }
.fotokaart figcaption { padding: 4px 8px; font-size: 11px; color: var(--color-tertiair); background: var(--color-vlak); }
.fotoweg { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(17,24,39,.72); font-size: 17px; line-height: 1; color: #fff; }
.fotoweg:hover { background: rgba(185,28,28,.9); }
.bonknop { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--color-rand); overflow: hidden; padding: 0; background: var(--color-vlak-diep); cursor: zoom-in; }
.bonknop img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.badge { cursor: zoom-in; border: 0; font: inherit; }
.fotokaart.is-gekozen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.fotokaart.is-gekozen figcaption { background: var(--accent-zacht); color: var(--accent-donker); font-weight: 600; }
.fotokaart .fotoknop[aria-pressed] { cursor: pointer; }

/* Voor en na naast elkaar */
.voorna { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 48rem) { .voorna { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* Twee foto's over elkaar, met een schuif ertussen */
.vergelijk { position: relative; overflow: hidden; border-radius: 10px; background: var(--color-vlak-diep); user-select: none; aspect-ratio: 4 / 3; container-type: size; }
.vergelijk > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vergelijk-boven { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; border-right: 2px solid #fff; }
/* De bovenste foto houdt de breedte van het hele vak, anders schuift hij mee en vervormt hij. */
.vergelijk-boven > img { position: absolute; top: 0; left: 0; width: 100cqw; height: 100cqh; max-width: none; object-fit: cover; }
.vergelijk-schuif { position: absolute; inset-inline: 0; bottom: 12px; width: calc(100% - 24px); margin-inline: 12px; accent-color: var(--accent); }
.vergelijk-label { position: absolute; top: 10px; border-radius: 999px; background: rgba(17,24,39,.72); padding: 3px 10px; font-size: 12px; font-weight: 600; color: #fff; }
.vergelijk-label.links { left: 10px; } .vergelijk-label.rechts { right: 10px; }

/* Foto's op een offerte of werkbon, ook op papier */
.doc-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.doc-fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb; background: #f3f4f6; }
@media print { .doc-fotos { grid-template-columns: repeat(3, 1fr); break-inside: avoid; } }

@media print {
  .niet-printen, .zijbalk, .topbalk, .tabbalk, .demobalk, .balk, .opslagbalk, .toast-bak, .modal-laag, .menu-laag, .doc-balk, .mijn-tabs { display: none !important; }
  body, .doc-pagina { background: #fff; padding: 0; } .doc-pagina .doc { box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .hoofd { padding: 0; } .pagina { max-width: none; padding: 0; } .kaart { box-shadow: none; break-inside: avoid; }
  @page { margin: 18mm 16mm; }
}

/* Woordmerk als tekst. Er is nog geen eigen logo voor Avondvrij, dus tot die tijd
   zetten we de naam zelf neer in plaats van het logo van de leverancier. */
.woordmerk-groot {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--color-primair);
  line-height: 1.1;
}
.woordmerk-kop {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--color-primair);
}