/* ============================================================
   AI Loopbaan Solutions — centrale stijl
   Pas de huisstijl aan via de variabelen in :root hieronder.
   Gouden regel: staat er een #hexcode buiten :root? Dan is het fout.
   ============================================================ */

:root {
  /* --- Merkkleuren (bron: Brand Guidelines v1.0, "AI Platform Logo Family") ---
     Deze twee zijn de officiële merkkleuren en staan zó in de stijlgids. Neem ze NOOIT over
     uit een logobestand: de geleverde SVG's bevatten door exportafronding zes bijna gelijke
     blauwen en drie oranjes. De waarden hieronder zijn de enige juiste. */
  --kleur-primair:        #044381;  /* AI Navy      — 9,88:1 op wit (AAA) */
  --kleur-primair-hover:  #03335f;  /* donkerder    — 12,78:1 op wit      */
  --kleur-accent:         #fda703;  /* Growth Orange — 1,96:1 op wit: NOOIT als tekst */
  --kleur-accent-hover:   #ee9c02;

  /* Toegankelijke afgeleiden. Het oranje haalt als tekstkleur nooit AA (1,96:1), maar
     *donkere tekst óp het oranje* haalt 8,59:1 (AAA). Daarom draagt de accentknop de échte
     merkkleur met donkere tekst — merktrouwer én toegankelijker dan het oranje verdonkeren. */
  --kleur-accent-knop:        #fda703;  /* donkere tekst hierop  8,59:1 (AAA) */
  --kleur-accent-knop-hover:  #ee9c02;  /* hover, donkere tekst  7,54:1 (AAA) */
  --kleur-accent-knop-tekst:  #1d1d1d;  /* tekstkleur óp de accentknop        */
  --kleur-accent-tekst:       #7a4a00;  /* donkergoud, als tekst op wit 7,48:1 (AAA) */

  /* --- Tekst --- */
  --kleur-tekst:          #1d1d1d;
  --kleur-tekst-zacht:    #555555;
  --kleur-tekst-omgekeerd:#ffffff;

  /* --- Achtergronden --- */
  --kleur-achtergrond:    #f4f5f7;
  --kleur-vlak:           #ffffff;
  --kleur-vlak-zacht:     #eff6ff;

  /* --- Lijnen / randen --- */
  --kleur-rand:           #e5e7eb;
  /* Focus-ring: navy, want die haalt 9,88:1 op wit. Het merk-oranje haalt maar 1,96:1 en
     kan dus nooit als focusindicator dienen — bewuste afwijking van de oude 'oranje ring'.
     Op donkere vlakken (navy footer) wordt deze hieronder omgezet naar wit (ook 9,88:1). */
  --kleur-rand-focus:     var(--kleur-primair);

  /* --- Feedback --- */
  --kleur-succes-bg:      #ecfdf5;  --kleur-succes-tekst:  #065f46;
  --kleur-fout-bg:        #fef2f2;  --kleur-fout-tekst:    #991b1b;
  --kleur-info-bg:        #eff6ff;  --kleur-info-tekst:    #1e40af;
  --kleur-attentie-bg:    #fff7ed;  /* warme 'let op'/binnenkort-tint */
  --kleur-leesmarkering:  #fff3cd;  /* a11y: actief leesblok */
  --kleur-chip-hover:     #e0ecff;  /* ELO-suggestiechip hover */
  /* Hoog-contrast-palet (a11y) */
  --kleur-contrast-tekst: #000000;  --kleur-contrast-bg:   #ffffff;
  --kleur-contrast-zacht: #1a1a1a;  --kleur-contrast-link: #0b3aa3;
  /* Statuslijn-kleuren (feller dan de tekstkleuren) — voor stoplicht-stipjes en mini-trendlijnen. */
  --kleur-goed-lijn:    #10b981;
  --kleur-letop-lijn:   #f59e0b;
  --kleur-kritiek-lijn: #ef4444;

  /* --- Typografie --- */
  --font-titel:  'Poppins', system-ui, sans-serif;
  --font-tekst:  'Open Sans', system-ui, sans-serif;

  --tekst-xs:   0.75rem;
  --tekst-sm:   0.875rem;
  --tekst-base: 1rem;
  --tekst-lg:   1.125rem;
  --tekst-xl:   1.25rem;
  --tekst-2xl:  1.5rem;
  --tekst-3xl:  1.875rem;
  --tekst-4xl:  2.25rem;

  /* --- Vorm & ruimte --- */
  --radius:        10px;
  --radius-groot:  16px;
  --radius-rond:   999px;
  --schaduw:       0 1px 3px rgba(0,0,0,.08);
  --schaduw-lift:  0 8px 24px rgba(0,0,0,.10);

  --ruimte-xs: 0.5rem;
  --ruimte-sm: 0.75rem;
  --ruimte-md: 1rem;
  --ruimte-lg: 1.5rem;
  --ruimte-xl: 2.5rem;

  --max-breedte:        1100px;
  --max-breedte-tekst:  720px;

  /* --- Header & footer: ECOSYSTEEMNORM ---
     Deze maten zijn platformbreed gelijk, zodat de zeven sites herkenbaar één familie zijn.
     Wijzig ze niet per platform; alleen de inhoud (logo, menu-items) verschilt.
     Zie docs/_intern/merknorm.md. */
  /* Header met het HORIZONTALE logo. Bewuste keuze: de header is een navigatiebalk die op
     elke pagina meetelt, dus hoogte is daar een kostenpost. Het gestapelde logo staat in de
     footer, waar wel ruimte is. Deze maat is de middenweg — ruimer dan de oorspronkelijke
     38/76, maar compact genoeg voor mobiel en voor een eventuele meescrollende header. */
  --header-hoogte:         84px;
  --header-hoogte-mobiel:  68px;
  --logo-hoogte:           44px;   /* header, desktop */
  --logo-hoogte-mobiel:    34px;
  /* Gestapeld logo (beeldmerk met naam eronder): dat heeft meer hoogte nodig dan een
     horizontaal logo om de naam leesbaar te houden. */
  --footer-logo-hoogte:    64px;
  /* Kaartlogo bewust kleiner dan het headerlogo: het breedste platformlogo (~259px bij 38px
     hoogte) zou anders tegen de kaartbreedte aanlopen en door max-width verkleind worden —
     precies de ongelijkheid die we net hebben weggewerkt. Bij 32px past de breedste ruim. */
  --logo-hoogte-kaart:     32px;
}

/* --- Basis --- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: var(--tekst-base);
  line-height: 1.6;
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titel);
  font-weight: 700;
  color: var(--kleur-primair);
  line-height: 1.25;
}
h1 { font-size: var(--tekst-3xl); }
h2 { font-size: var(--tekst-2xl); }
h3 { font-size: var(--tekst-xl); }

a { color: var(--kleur-primair); text-decoration: none; }
a:hover { color: var(--kleur-primair-hover); text-decoration: underline; }

/* Zichtbare focus-state (toegankelijkheid) — nooit weghalen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kleur-rand-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

main { flex: 1 0 auto; }

/* --- Schermlezer-only + skip-link --- */
.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;
}
.skip-link {
  position: absolute; left: var(--ruimte-md); top: -6rem;
  background: var(--kleur-accent-knop); color: var(--kleur-accent-knop-tekst);
  padding: var(--ruimte-sm) var(--ruimte-md); border-radius: var(--radius);
  z-index: 100; transition: top .15s;
}
.skip-link:focus { top: var(--ruimte-md); text-decoration: none; }

/* --- Layout-helper --- */
.container {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 var(--ruimte-md);
}
.container--tekst { max-width: var(--max-breedte-tekst); }
.sectie { padding: var(--ruimte-xl) 0; }

/* --- Knoppen --- */
.knop {
  display: inline-block;
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: var(--tekst-base);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.knop--primair { background: var(--kleur-accent-knop); color: var(--kleur-accent-knop-tekst); }
.knop--primair:hover { background: var(--kleur-accent-knop-hover); text-decoration: none; }
.knop--secundair {
  background: transparent; color: var(--kleur-primair); border-color: var(--kleur-primair);
}
.knop--secundair:hover { background: var(--kleur-vlak-zacht); text-decoration: none; }

.veld-uitleg { font-size: var(--tekst-sm); color: var(--kleur-tekst-zacht); margin: var(--ruimte-sm) 0 0; }
.referentie {
  display: inline-block; background: var(--kleur-vlak-zacht); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius); padding: var(--ruimte-md) var(--ruimte-lg); margin-top: var(--ruimte-md);
}

/* --- Kaart / paneel --- */
.kaart {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-lg);
}
.kaart--lift { transition: transform .2s, box-shadow .2s; display: block; color: inherit; }
.kaart--lift:hover { transform: translateY(-3px); box-shadow: var(--schaduw-lift); text-decoration: none; }

/* --- Kaart-grid --- */
.grid { display: grid; gap: var(--ruimte-lg); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px)  { .grid--3 { grid-template-columns: repeat(3,1fr); } }

/* --- Badge --- */
.badge {
  display: inline-block;
  font-size: var(--tekst-xs);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-rond);
  background: var(--kleur-vlak-zacht);
  color: var(--kleur-primair);
}
.badge--binnenkort { background: var(--kleur-attentie-bg); color: var(--kleur-accent-tekst); }

/* --- Formulieren --- */
.veld { margin-bottom: var(--ruimte-md); }
.veld label {
  display: block; font-size: var(--tekst-sm); font-weight: 600;
  color: var(--kleur-tekst); margin-bottom: 0.25rem;
}
.veld input, .veld textarea, .veld select {
  width: 100%; font-family: var(--font-tekst); font-size: var(--tekst-sm);
  padding: 0.6rem 0.9rem; border: 1px solid var(--kleur-rand);
  border-radius: var(--radius); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.veld input:focus, .veld textarea:focus, .veld select:focus {
  border-color: var(--kleur-rand-focus);
  box-shadow: 0 0 0 3px rgba(4,67,129,.25);
}
.veld--fout input, .veld--fout textarea { border-color: var(--kleur-fout-tekst); }
.veld__fout { color: var(--kleur-fout-tekst); font-size: var(--tekst-sm); margin-top: 0.25rem; }
/* Honeypot — visueel én voor schermlezers verborgen, blijft in de DOM. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Flash / feedback --- */
.melding {
  padding: var(--ruimte-sm) var(--ruimte-md); border-radius: var(--radius);
  margin-bottom: var(--ruimte-md); font-size: var(--tekst-sm);
}
.melding--succes { background: var(--kleur-succes-bg); color: var(--kleur-succes-tekst); }
.melding--fout   { background: var(--kleur-fout-bg);   color: var(--kleur-fout-tekst); }
.melding--info   { background: var(--kleur-info-bg);   color: var(--kleur-info-tekst); }
/* 'let op' zit tussen info en fout in: wél opvallen, geen alarm. Zelfde tokens als
   .status--letop, zodat een melding en een badge over hetzelfde onderwerp niet vloeken. */
.melding--letop  { background: var(--kleur-attentie-bg); color: var(--kleur-accent-tekst); }

/* --- Header / nav — ECOSYSTEEMNORM (zie docs/_intern/merknorm.md) --- */
.site-header { background: var(--kleur-vlak); box-shadow: var(--schaduw); position: relative; }
.site-header__balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-md);
  min-height: var(--header-hoogte);   /* vaste hoogte = herkenbaar op elk platform */
}

/* Het logo bepaalt zijn breedte zelf uit de SVG-verhouding; wij zetten alleen de hoogte.
   `display:block` haalt de witruimte onder een inline-afbeelding weg. */
.site-logo { display: inline-flex; align-items: center; }
.site-logo:hover { text-decoration: none; }
.site-logo img { display: block; height: var(--logo-hoogte); width: auto; }

.hoofdnav ul {
  list-style: none; display: flex; gap: var(--ruimte-lg); margin: 0; padding: 0;
}
.hoofdnav a { font-family: var(--font-titel); font-weight: 600; color: var(--kleur-tekst); }
.hoofdnav a:hover { color: var(--kleur-primair); }
/* Huidige pagina zichtbaar maken — niet alleen met kleur, ook met een streep,
   zodat het ook zonder kleurwaarneming te zien is. */
/* Beheer-item: alleen zichtbaar mét sessie. Navy + subtiel vlak, zodat het opvalt als
   "ander soort link" zonder een tweede navigatiestijl te introduceren. */
.hoofdnav__beheer {
  color: var(--kleur-primair); background: var(--kleur-vlak-zacht);
  padding: 0.35rem 0.7rem; border-radius: var(--radius); white-space: nowrap;
}
.hoofdnav__beheer:hover { background: var(--kleur-achtergrond); text-decoration: none; }
/* Teller ongelezen post. Het oranje kan geen tekst dragen, dus donkere tekst erop (8,59:1). */
.hoofdnav__tel {
  display: inline-block; margin-left: 0.2rem; padding: 0 0.4rem;
  border-radius: var(--radius-rond); background: var(--kleur-accent-knop);
  color: var(--kleur-accent-knop-tekst); font-size: var(--tekst-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hoofdnav a[aria-current="page"] {
  color: var(--kleur-primair); border-bottom: 2px solid var(--kleur-accent); padding-bottom: 2px;
}

.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: var(--tekst-2xl); color: var(--kleur-primair); line-height: 1;
  min-width: 44px; min-height: 44px;   /* aanraakdoel WCAG 2.5.8 */
}

@media (max-width: 640px) {
  .site-header__balk { min-height: var(--header-hoogte-mobiel); }
  .site-logo img { height: var(--logo-hoogte-mobiel); }
  .menu-toggle { display: block; }
  .hoofdnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--kleur-vlak); box-shadow: var(--schaduw-lift); z-index: 50;
  }
  .hoofdnav.is-open { display: block; }
  .hoofdnav ul { flex-direction: column; gap: 0; padding: var(--ruimte-sm) var(--ruimte-md); }
  .hoofdnav li { padding: var(--ruimte-sm) 0; border-bottom: 1px solid var(--kleur-rand); }
}

/* --- Hero --- */
.hero { background: var(--kleur-vlak-zacht); padding: var(--ruimte-xl) 0; }
.hero h1 { font-size: var(--tekst-4xl); margin-top: 0; }
.hero p { font-size: var(--tekst-lg); color: var(--kleur-tekst-zacht); max-width: 40rem; }
.hero__acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-sm); margin-top: var(--ruimte-lg); }

/* --- Platformkaart ---
   De kop bevat het logo als afbeelding. De vaste hoogte op de kop reserveert de ruimte al
   vóórdat de SVG geladen is, zodat de kaarten niet verspringen (layout shift). */
.platform-kaart__kop {
  margin: 0 0 var(--ruimte-sm);
  min-height: calc(var(--logo-hoogte-kaart) + 0.5rem);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ruimte-xs);
}
.platform-kaart__logo {
  display: block; height: var(--logo-hoogte-kaart); width: auto; max-width: 100%;
}
.platform-kaart--binnenkort .platform-kaart__kop { color: var(--kleur-tekst-zacht); }
.platform-kaart__domein { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); margin-top: 0; }
.platform-kaart__acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-sm); margin-top: var(--ruimte-md); }

/* --- Footer — ECOSYSTEEMNORM (zie docs/_intern/merknorm.md) ---
   Navy vlak met witte tekst: 9,88:1 (AAA) en meteen herkenbaar als merk op elk platform. */
.site-footer {
  background: var(--kleur-primair);
  color: var(--kleur-tekst-omgekeerd);
  font-size: var(--tekst-sm);
  margin-top: var(--ruimte-xl); flex-shrink: 0;
}
.site-footer .container { padding-top: var(--ruimte-xl); padding-bottom: var(--ruimte-lg); }

/* Laag 1 — drie informatieblokken. */
.footer-blokken { display: grid; gap: var(--ruimte-xl); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-blokken { grid-template-columns: 1.6fr 1fr 1fr; } }

.footer-logo { display: block; height: var(--footer-logo-hoogte); width: auto; margin-bottom: var(--ruimte-md); }
.footer-blok p { margin: 0 0 var(--ruimte-sm); }
.footer-blok--merk p { max-width: 42ch; }
.footer-nap { line-height: 1.7; }
.footer-klein { font-size: var(--tekst-xs); opacity: .85; }

.footer-kop {
  font-family: var(--font-titel); font-size: var(--tekst-base); font-weight: 600;
  color: var(--kleur-tekst-omgekeerd);
  margin: 0 0 var(--ruimte-sm);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-lijst li { margin-bottom: 0.45rem; }

/* Laag 2 — de platformbalk: naam + één regel die zegt wat het platform doet. */
.footer-platformen {
  margin-top: var(--ruimte-xl); padding-top: var(--ruimte-lg);
  border-top: 1px solid rgba(255,255,255,.22);
}
.footer-kop--balk {
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .08em;
  opacity: .8; margin-bottom: var(--ruimte-md);
}
.footer-platformlijst {
  display: grid; gap: var(--ruimte-md) var(--ruimte-xl); grid-template-columns: 1fr;
}
@media (min-width: 560px) { .footer-platformlijst { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer-platformlijst { grid-template-columns: repeat(3, 1fr); } }
.footer-platformlijst a {
  font-family: var(--font-titel); font-weight: 600; font-size: var(--tekst-base);
  text-decoration: none;
}
.footer-platformlijst a:hover { text-decoration: underline; }
.footer-platformzin { display: block; opacity: .82; font-size: var(--tekst-sm); line-height: 1.5; }

/* Links op navy: wit met onderstreping bij hover; oranje als hover-kleur haalt 5,04:1 (AA). */
.site-footer a { color: var(--kleur-tekst-omgekeerd); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--kleur-accent); }


/* Focus op donker: wit in plaats van navy — anders is de ring onzichtbaar (1:1). */
.site-footer a:focus-visible { outline-color: var(--kleur-tekst-omgekeerd); }

.footer-onder {
  text-align: center; margin-top: var(--ruimte-xl); padding-top: var(--ruimte-md);
  border-top: 1px solid rgba(255,255,255,.22);   /* decoratieve scheidingslijn */
  font-size: var(--tekst-xs); opacity: .9;
}

/* --- ELO chat-widget (drijvende knop + paneel) --- */
.elo-knop {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  width: 56px; height: 56px; border-radius: var(--radius-rond);
  background: var(--kleur-accent-knop); color: var(--kleur-accent-knop-tekst);
  border: none; cursor: pointer; box-shadow: var(--schaduw-lift);
  font-size: 1.5rem; z-index: 90;
}
.elo-knop:hover { background: var(--kleur-accent-knop-hover); }
.elo-paneel {
  position: fixed; right: 1.25rem; bottom: 5.5rem;
  width: min(360px, calc(100vw - 2.5rem)); max-height: 70vh;
  display: flex; flex-direction: column; gap: var(--ruimte-sm); z-index: 91;
}
.elo-paneel__kop { font-family: var(--font-titel); font-weight: 700; color: var(--kleur-primair); }
.elo-paneel__berichten { overflow-y: auto; flex: 1; font-size: var(--tekst-sm); }
/* AI Act art. 50(1): disclosure boven het gesprek. De HTML komt uit het gedeelde
   package (ails_core), de stijl hoort bij het platform — bij ons plain CSS. Klein en
   rustig: het is een mededeling, geen boodschap die het gesprek moet overstemmen. */
.ai-disclosure {
  margin: 0; padding: 0 0 var(--ruimte-xs);
  border-bottom: 1px solid var(--kleur-rand);
  font-size: var(--tekst-xs); line-height: 1.35; color: var(--kleur-tekst-zacht);
}
.ai-disclosure a { color: var(--kleur-primair); }

/* ============================================================
   Toegankelijkheid (a11y) — knop linksonder + voorkeuren-paneel
   Voorkeuren via data-attributen op <html>; aangestuurd door a11y.js.
   ============================================================ */

/* Tekstgrootte (schaalt alle rem-maten mee) */
html[data-a11y-tekst="groot"] { font-size: 112.5%; }   /* 16 → 18px */
html[data-a11y-tekst="xl"]    { font-size: 125%;   }   /* 16 → 20px */

/* Hoog contrast */
html[data-a11y-contrast="hoog"] { --kleur-tekst-zacht: var(--kleur-contrast-zacht); }
html[data-a11y-contrast="hoog"] body { background: var(--kleur-contrast-bg); color: var(--kleur-contrast-tekst); }
html[data-a11y-contrast="hoog"] a:not(.knop):not(.a11y-launcher):not(.elo-knop) {
  color: var(--kleur-contrast-link); text-decoration: underline;
}
html[data-a11y-contrast="hoog"] .kaart,
html[data-a11y-contrast="hoog"] .site-header,
html[data-a11y-contrast="hoog"] .site-footer,
html[data-a11y-contrast="hoog"] .veld select,
html[data-a11y-contrast="hoog"] .veld input,
html[data-a11y-contrast="hoog"] .veld textarea { border-color: var(--kleur-contrast-tekst); }

/* Dyslexie-vriendelijk: meer ruimte, rustiger schreefloos font */
html[data-a11y-font="dyslexie"] body,
html[data-a11y-font="dyslexie"] h1, html[data-a11y-font="dyslexie"] h2,
html[data-a11y-font="dyslexie"] h3, html[data-a11y-font="dyslexie"] h4,
html[data-a11y-font="dyslexie"] p, html[data-a11y-font="dyslexie"] li,
html[data-a11y-font="dyslexie"] a, html[data-a11y-font="dyslexie"] span,
html[data-a11y-font="dyslexie"] label, html[data-a11y-font="dyslexie"] button {
  font-family: system-ui, -apple-system, "Segoe UI", Verdana, sans-serif;
  letter-spacing: 0.03em; word-spacing: 0.08em;
}
html[data-a11y-font="dyslexie"] p,
html[data-a11y-font="dyslexie"] li { line-height: 1.9; }

/* Zwevende knop (linksonder; blauw — ELO staat rechtsonder in oranje) */
.a11y-launcher {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 95;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.5rem 0.9rem;
  background: var(--kleur-primair); color: var(--kleur-tekst-omgekeerd);
  border: none; border-radius: var(--radius-rond); cursor: pointer;
  box-shadow: var(--schaduw-lift); font-family: var(--font-titel);
  font-weight: 600; font-size: var(--tekst-sm);
}
.a11y-launcher svg { width: 20px; height: 20px; }
.a11y-launcher:hover { background: var(--kleur-primair-hover); }

/* Paneel (boven de knop) */
.a11y-panel {
  position: fixed; left: 1.25rem; bottom: 4.75rem; z-index: 96;
  width: min(320px, calc(100vw - 2.5rem));
  background: var(--kleur-vlak); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot); box-shadow: var(--schaduw-lift); overflow: hidden;
}
.a11y-panel.hidden { display: none; }
.a11y-panel-kop {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--kleur-primair); color: var(--kleur-tekst-omgekeerd);
  padding: var(--ruimte-sm) var(--ruimte-md);
  font-family: var(--font-titel); font-weight: 700;
}
.a11y-panel-sluit { background: none; border: 0; color: inherit; font-size: var(--tekst-xl); cursor: pointer; line-height: 1; }
.a11y-panel-body { padding: var(--ruimte-md); }
.a11y-panel-body > * + * { margin-top: var(--ruimte-md); }
.a11y-label { font-weight: 600; font-size: var(--tekst-sm); margin: 0 0 0.4rem; }
.a11y-keuze-groep { display: flex; gap: 0.5rem; }
.a11y-keuze {
  flex: 1; min-height: 44px; border: 1px solid var(--kleur-rand);
  background: var(--kleur-vlak); border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-titel); font-weight: 600;
}
.a11y-keuze:hover { background: var(--kleur-vlak-zacht); }
.a11y-keuze[aria-pressed="true"] {
  background: var(--kleur-primair); color: var(--kleur-tekst-omgekeerd); border-color: var(--kleur-primair);
}
.a11y-keuze.t-groot { font-size: var(--tekst-lg); }
.a11y-keuze.t-xl { font-size: var(--tekst-xl); }
.a11y-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-sm); }
.a11y-rij .a11y-label { margin: 0; }
.a11y-schakelaar {
  min-height: 36px; padding: 0.3rem 0.9rem; border: 1px solid var(--kleur-rand);
  background: var(--kleur-vlak); border-radius: var(--radius-rond); cursor: pointer; font-weight: 600;
}
.a11y-schakelaar[aria-pressed="true"] {
  background: var(--kleur-primair); color: var(--kleur-tekst-omgekeerd); border-color: var(--kleur-primair);
}
.a11y-voorlees-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--kleur-primair); background: var(--kleur-vlak);
  color: var(--kleur-primair); border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-titel); font-weight: 600;
}
.a11y-voorlees-knop[aria-pressed="true"] { background: var(--kleur-primair); color: var(--kleur-tekst-omgekeerd); }
.a11y-voorlees-knop:disabled { opacity: .5; cursor: not-allowed; }
.a11y-reset { background: none; border: 0; color: var(--kleur-primair); cursor: pointer; font-weight: 600; padding: 0; }
.a11y-reset:hover { text-decoration: underline; }
.a11y-toelichting { font-size: var(--tekst-xs); color: var(--kleur-tekst-zacht); }
.a11y-leesblok-actief { background: var(--kleur-leesmarkering); outline: 2px solid var(--kleur-accent-knop); border-radius: 4px; }
/* Mini "Lees voor"-knop voor dynamische inhoud (o.a. ELO-antwoorden) */
.a11y-voorlees-mini {
  margin-top: 0.4rem; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--kleur-primair); font-size: var(--tekst-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.a11y-voorlees-mini:hover { text-decoration: underline; }
.a11y-voorlees-mini[aria-pressed="true"] { color: var(--kleur-accent-tekst); }

/* ============================================================
   ELO chat-widget — berichten, chips, invoer
   ============================================================ */
.elo-knop.hidden,
.elo-paneel.hidden { display: none; }

.elo-paneel { padding: 0; }
.elo-paneel__kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ruimte-sm) var(--ruimte-md);
  border-bottom: 1px solid var(--kleur-rand);
}
.elo-paneel__titel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-titel); font-weight: 700; color: var(--kleur-primair);
}
.elo-paneel__avatar { width: 24px; height: 24px; border-radius: var(--radius-rond); display: block; }
.elo-paneel__sluit {
  background: none; border: 0; color: var(--kleur-tekst-zacht);
  font-size: var(--tekst-xl); cursor: pointer; line-height: 1;
}
.elo-paneel__berichten {
  padding: var(--ruimte-md); display: flex; flex-direction: column; gap: var(--ruimte-sm);
}
.elo-bericht { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.elo-bericht p { margin: 0; }
.elo-bericht--gebruiker {
  align-self: flex-end; background: var(--kleur-primair); color: var(--kleur-tekst-omgekeerd);
  border-bottom-right-radius: 4px;
}
.elo-bericht--elo {
  align-self: flex-start; background: var(--kleur-vlak-zacht); color: var(--kleur-tekst);
  border-bottom-left-radius: 4px;
}
.elo-typing { color: var(--kleur-tekst-zacht); font-style: italic; }
.elo-cta {
  display: inline-block; margin-top: var(--ruimte-sm);
  background: var(--kleur-accent-knop); color: var(--kleur-accent-knop-tekst);
  font-size: var(--tekst-sm); font-weight: 600; padding: 0.4rem 0.8rem; border-radius: var(--radius);
}
.elo-cta:hover { background: var(--kleur-accent-knop-hover); text-decoration: none; }
.elo-feedback { margin-top: var(--ruimte-xs); display: flex; gap: 0.4rem; font-size: var(--tekst-sm); }
.elo-feedback button { background: none; border: 0; cursor: pointer; font-size: var(--tekst-base); }
.elo-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 var(--ruimte-md); }
.elo-chip {
  background: var(--kleur-vlak-zacht); color: var(--kleur-primair);
  border: 1px solid var(--kleur-rand); border-radius: var(--radius-rond);
  font-size: var(--tekst-xs); padding: 0.3rem 0.7rem; cursor: pointer;
}
.elo-chip:hover { background: var(--kleur-chip-hover); }
.elo-invoer { display: flex; gap: 0.4rem; align-items: flex-end; padding: var(--ruimte-md); border-top: 1px solid var(--kleur-rand); }
.elo-invoer textarea {
  flex: 1; resize: none; font-family: var(--font-tekst); font-size: var(--tekst-sm);
  padding: 0.5rem 0.7rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius); outline: none;
}
.elo-invoer textarea:focus { border-color: var(--kleur-rand-focus); box-shadow: 0 0 0 3px rgba(4,67,129,.25); }
.elo-verstuur {
  background: var(--kleur-accent-knop); color: var(--kleur-accent-knop-tekst); border: 0;
  border-radius: var(--radius); width: 44px; height: 44px; cursor: pointer; font-size: var(--tekst-lg);
}
.elo-verstuur:hover { background: var(--kleur-accent-knop-hover); }

/* ============================================================
   Bewegingsvoorkeur — respecteer 'prefers-reduced-motion'
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .kaart--lift:hover { transform: none; }
}

/* ============================================================
   Operator-dashboard — statusbadges + logweergave
   ============================================================ */
.status {
  display: inline-block; font-size: var(--tekst-xs); font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-rond);
}
.status--online   { background: var(--kleur-succes-bg);  color: var(--kleur-succes-tekst); }
.status--letop    { background: var(--kleur-attentie-bg); color: var(--kleur-accent-tekst); }
.status--kritiek  { background: var(--kleur-fout-bg);    color: var(--kleur-fout-tekst); }
.status--onbekend { background: var(--kleur-vlak-zacht); color: var(--kleur-tekst-zacht); }

/* Dashboard-kop + snelle-actieknoppen */
.dash-kop {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--ruimte-sm); margin-bottom: var(--ruimte-md);
}
.dash-kop h1 { margin: 0; }
.dash-acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-sm); margin: var(--ruimte-lg) 0; }
.dash-voet { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); margin-top: var(--ruimte-lg); }

/* Statuskaart per platform — drie stoplichten + rand die meekleurt met de slechtste status */
.statuskaart {
  display: block; background: var(--kleur-vlak);
  border: 2px solid var(--kleur-rand); border-radius: var(--radius-groot);
  padding: var(--ruimte-md); box-shadow: var(--schaduw);
  color: inherit; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.statuskaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-lift); text-decoration: none; }
.statuskaart--online   { border-color: var(--kleur-succes-tekst); }
.statuskaart--letop    { border-color: var(--kleur-accent-knop); }
.statuskaart--kritiek  { border-color: var(--kleur-fout-tekst); }
.statuskaart--onbekend { border-color: var(--kleur-rand); }
.statuskaart__kop { display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte-sm); }
.statuskaart__kop h3 { margin: 0; font-size: var(--tekst-lg); color: var(--kleur-primair); }
.statuskaart__lichten { margin: var(--ruimte-md) 0 0; display: flex; flex-direction: column; gap: 0.45rem; }
.statuskaart__lichten > div { display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte-sm); }
.statuskaart__lichten dt { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }
.statuskaart__lichten dd { margin: 0; }
.statuskaart__meer { display: inline-block; margin-top: var(--ruimte-md); color: var(--kleur-primair); font-weight: 600; font-size: var(--tekst-sm); }

/* ── Dashboard-bouwstenen (herbruikbaar, geen inline-stijlen in de templates) ── */
/* Muted/kleine tekst */
.tekst-zacht { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }
.nowrap { white-space: nowrap; }
.dash-intro { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); margin-bottom: var(--ruimte-lg); max-width: 65ch; }
.dash-terug { display: inline-block; margin-bottom: var(--ruimte-sm); }

/* Kaart-hygiëne: eerste/laatste kind plakt netjes tegen de rand (geen losse margin-resets nodig) */
.kaart > :first-child { margin-top: 0; }
.kaart > :last-child { margin-bottom: 0; }

/* Verticale stapel kaarten met onderlinge ruimte (vervangt per-kaart margin-bottom) */
.kaart-lijst { display: flex; flex-direction: column; gap: var(--ruimte-sm); margin-bottom: var(--ruimte-lg); }
.kaart--ongelezen { border-left: 3px solid var(--kleur-accent-knop); }

/* Kop binnen een blok/kaart: titel links, meta of acties rechts */
.blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-sm); flex-wrap: wrap; }

/* Rij met knoppen/formulieren naast elkaar */
.actie-rij { display: flex; gap: var(--ruimte-sm); flex-wrap: wrap; align-items: center; margin-top: var(--ruimte-sm); }
.actie-rij form { margin: 0; }
/* Invoer/keuze direct naast een knop (bv. status-select + Bijwerken) */
.veld-knop { display: inline-flex; gap: var(--ruimte-xs); align-items: center; }

/* Antwoordvak in een zaak: het zwaartepunt van de pagina, dus visueel benadrukt. */
.antwoordvak { border: 2px solid var(--kleur-primair); border-radius: var(--radius); padding: var(--ruimte-md); margin-top: var(--ruimte-md); background: var(--kleur-vlak); }
.antwoordvak textarea { width: 100%; border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: .6rem .8rem; font: inherit; font-size: var(--tekst-sm); line-height: 1.6; resize: vertical; }
.antwoordvak .veld-uitleg { margin: 0 0 var(--ruimte-sm); }

/* Zaaksysteem: statusbadges, thread en detail-indeling */
.zaakstatus { display: inline-flex; align-items: center; font-size: var(--tekst-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-rond); white-space: nowrap; }
.zs--nieuw          { background: var(--kleur-info-bg); color: var(--kleur-info-tekst); }
.zs--in_behandeling { background: var(--kleur-attentie-bg); color: var(--kleur-accent-tekst); }
.zs--wacht_op_klant { background: var(--kleur-achtergrond); color: var(--kleur-tekst-zacht); }
.zs--afgerond       { background: var(--kleur-succes-bg); color: var(--kleur-succes-tekst); }
.zs--te-laat        { background: var(--kleur-fout-bg); color: var(--kleur-fout-tekst); }

.zaak-indeling { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: var(--ruimte-lg); align-items: start; margin-top: var(--ruimte-md); }
@media (max-width: 800px) { .zaak-indeling { grid-template-columns: 1fr; } }
.zij-blok { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: var(--ruimte-md); margin-bottom: var(--ruimte-md); }
.zij-blok h3 { font-size: var(--tekst-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--kleur-tekst-zacht); margin: 0 0 var(--ruimte-sm); }

.thread { display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.bericht { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: var(--ruimte-sm) var(--ruimte-md); }
.bericht--uit { background: var(--kleur-vlak-zacht); border-left: 3px solid var(--kleur-primair); }
.bericht__kop { display: flex; justify-content: space-between; gap: var(--ruimte-sm); flex-wrap: wrap; font-size: var(--tekst-sm); color: var(--kleur-tekst-zacht); }
.bericht__kop strong { color: var(--kleur-tekst); }

/* Kop-/waardelijst (afzender, ontvangstdatum) — label smal, waarde loopt door */
.gegevens { display: grid; grid-template-columns: auto 1fr; gap: var(--ruimte-xs) var(--ruimte-sm); margin: 0 0 var(--ruimte-sm); font-size: var(--tekst-sm); }
.gegevens dt { color: var(--kleur-tekst-zacht); font-weight: 600; }
.gegevens dd { margin: 0; word-break: break-word; }

/* Mail bekijken en testen: uitleg links, voorbeeld rechts. Onder 900px onder elkaar. */
.mail-proef { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--ruimte-md); align-items: start; margin-top: var(--ruimte-md); }
@media (max-width: 900px) { .mail-proef { grid-template-columns: 1fr; } }
/* Het voorbeeld is een echte mail in een frame — vandaar de grijze mailclient-achtergrond. */
.mail-voorbeeld { width: 100%; height: 640px; border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--kleur-vlak-zacht); }

/* Uitklapbaar detail + voorgeformatteerde tekst (mail-body, weekrapport) */
summary { cursor: pointer; }
.pre-tekst { white-space: pre-wrap; word-break: break-word; font-family: var(--font-tekst); font-size: var(--tekst-sm); line-height: 1.55; margin: var(--ruimte-sm) 0 0; }

/* Inline formulier in een kaart (taak afronden: oorzaak/oplossing/preventie) */
.dash-form label { display: block; font-size: var(--tekst-sm); margin-top: var(--ruimte-sm); }
.dash-form textarea, .dash-form input[type="text"] { width: 100%; }

/* Datatabel (signatures, vergelijkend bezoekersoverzicht) */
.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-sm); }
.tabel th, .tabel td { padding: 0.4rem; text-align: left; vertical-align: top; }
.tabel thead tr, .tabel tbody tr { border-bottom: 1px solid var(--kleur-rand); }
.tabel thead th { color: var(--kleur-tekst-zacht); font-weight: 600; }
.tabel tbody tr:hover { background: var(--kleur-vlak-zacht); }

/* KPI-kaart: groot cijfer + label (ELO-cockpit, golden-set) */
.kpi { display: flex; flex-direction: column; gap: 0.15rem; }
.kpi__label { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }
.kpi__cijfer { font-family: var(--font-titel); font-size: var(--tekst-3xl); font-weight: 700; color: var(--kleur-primair); line-height: 1.1; }
.kpi__sub { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }

/* ============================================================
   Dashboard-overzicht — "Helder"-opzet (actie-eerst, ruime rijen)
   ============================================================ */

/* Ecosysteem-KPI's */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ruimte-md); margin-bottom: var(--ruimte-xl); }
.dash-kpi { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: var(--ruimte-lg); display: flex; flex-direction: column; gap: 0.4rem; }
.dash-kpi__label { color: var(--kleur-tekst-zacht); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dash-kpi__cijfer { font-family: var(--font-titel); font-size: var(--tekst-3xl); font-weight: 700; color: var(--kleur-primair); line-height: 1.05; font-variant-numeric: tabular-nums; }
.dash-kpi__sub { font-size: var(--tekst-sm); font-weight: 600; }
.dash-kpi__sub.is-goed { color: var(--kleur-succes-tekst); }
.dash-kpi__sub.is-letop { color: var(--kleur-accent-tekst); }
.dash-kpi__sub.is-kritiek { color: var(--kleur-fout-tekst); }
.dash-kpi__sub.is-zacht { color: var(--kleur-tekst-zacht); font-weight: 500; }

/* Verdict-band */
.dash-verdict { display: flex; align-items: center; gap: var(--ruimte-md); background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-left: 5px solid var(--kleur-letop-lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: var(--ruimte-lg); margin-bottom: var(--ruimte-lg); }
.dash-verdict--goed { border-left-color: var(--kleur-goed-lijn); }
.dash-verdict__dot { flex: none; width: 46px; height: 46px; border-radius: var(--radius-rond); display: grid; place-items: center; font-family: var(--font-titel); font-size: var(--tekst-xl); font-weight: 700; background: var(--kleur-attentie-bg); color: var(--kleur-accent-tekst); }
.dash-verdict--goed .dash-verdict__dot { background: var(--kleur-succes-bg); color: var(--kleur-succes-tekst); }
.dash-verdict__txt h2 { margin: 0; font-size: var(--tekst-xl); }
.dash-verdict__txt p { margin: 0.15rem 0 0; color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }

/* Sectiekop met lijn + telbadge */
.dash-sectiekop { display: flex; align-items: center; gap: var(--ruimte-sm); margin: var(--ruimte-xl) 0 var(--ruimte-md); }
.dash-sectiekop h2 { margin: 0; font-size: var(--tekst-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--kleur-tekst-zacht); }
.dash-rule { flex: 1; height: 1px; background: var(--kleur-rand); }
.dash-tel { font-size: var(--tekst-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-rond); background: var(--kleur-vlak-zacht); color: var(--kleur-tekst-zacht); font-variant-numeric: tabular-nums; }

/* Actie-items */
.dash-actielijst { display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.dash-actie { display: flex; gap: var(--ruimte-md); background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: var(--ruimte-md) var(--ruimte-lg); }
.dash-actie__stripe { flex: none; width: 4px; border-radius: 4px; background: var(--kleur-letop-lijn); }
.dash-actie--kritiek .dash-actie__stripe { background: var(--kleur-kritiek-lijn); }
.dash-actie--goed .dash-actie__stripe { background: var(--kleur-goed-lijn); }
.dash-actie--taak .dash-actie__stripe { background: var(--kleur-primair); }
.dash-ai-kaart { border-left: 4px solid var(--kleur-primair); }
.dash-actie__body { flex: 1; min-width: 0; }
.dash-actie__kop { display: flex; align-items: center; gap: var(--ruimte-sm); flex-wrap: wrap; }
.dash-actie__kop strong { font-size: var(--tekst-base); }
.dash-actie__kop a { color: var(--kleur-tekst); }
.dash-actie__txt { margin: 0.3rem 0 0; color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }
.dash-actie__voet { display: flex; align-items: center; gap: var(--ruimte-sm); margin-top: var(--ruimte-sm); flex-wrap: wrap; }
.dash-actie__spacer { flex: 1; }

/* Chips + kleine knop */
.chip { display: inline-flex; align-items: center; font-size: var(--tekst-xs); font-weight: 600; padding: 2px 9px; border-radius: var(--radius); background: var(--kleur-vlak-zacht); color: var(--kleur-primair); }
.chip--zacht { background: var(--kleur-achtergrond); color: var(--kleur-tekst-zacht); }
.knop--klein { padding: 0.3rem 0.7rem; font-size: var(--tekst-sm); }
/* Onomkeerbare actie (AVG-verwijdering). Rood is hier betekenis, geen decoratie: de knop moet
   er anders uitzien dan elke andere knop in het beheer. Tekstkleur uit de fout-variabelen, dus
   het contrast is hetzelfde als bij de foutmeldingen. */
.knop--gevaar { background: var(--kleur-fout-bg); color: var(--kleur-fout-tekst); border: 1px solid var(--kleur-kritiek-lijn); }
.knop--gevaar:hover { background: var(--kleur-kritiek-lijn); color: #fff; text-decoration: none; }
.veld-groei { flex: 1; min-width: 200px; }

/* Platformrijen — royale spacing, gezondheidsstreep, mini-trend */
.dash-strip { display: flex; flex-direction: column; gap: var(--ruimte-sm); }
.dash-rij { display: grid; grid-template-columns: 1fr auto; gap: var(--ruimte-md) var(--ruimte-lg); align-items: center; background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-left: 4px solid var(--kleur-goed-lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: var(--ruimte-lg); text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .15s ease; }
.dash-rij:hover { transform: translateY(-2px); box-shadow: var(--schaduw-lift); text-decoration: none; }
.dash-rij--letop { border-left-color: var(--kleur-letop-lijn); }
.dash-rij--kritiek { border-left-color: var(--kleur-kritiek-lijn); }
.dash-rij--onbekend { border-left-color: var(--kleur-rand); }
.dash-rij__main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.dash-rij__titel { display: flex; align-items: center; gap: var(--ruimte-sm); flex-wrap: wrap; }
.dash-rij__titel h3 { margin: 0; font-size: var(--tekst-lg); color: var(--kleur-primair); }
.dash-rij__lijn { margin: 0; color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }
.dash-rij__kanalen { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.dash-kdot { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--tekst-xs); color: var(--kleur-tekst-zacht); }
.dash-kdot::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-rond); background: var(--kleur-goed-lijn); flex: none; }
.dash-kdot em { font-style: normal; color: var(--kleur-tekst); font-weight: 600; }
.dash-kdot--letop::before { background: var(--kleur-letop-lijn); }
.dash-kdot--kritiek::before { background: var(--kleur-kritiek-lijn); }
.dash-kdot--onbekend::before { background: var(--kleur-rand); }
.dash-rij__right { display: flex; align-items: center; gap: var(--ruimte-md); }
.dash-rij__trend { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; color: var(--kleur-goed-lijn); }
.dash-rij__trend small { color: var(--kleur-tekst-zacht); font-size: 0.7rem; }
.dash-trend--letop { color: var(--kleur-letop-lijn); }
.dash-trend--kritiek { color: var(--kleur-kritiek-lijn); }
.dash-trend--onbekend { color: var(--kleur-rand); }
.dash-rij__arrow { color: var(--kleur-tekst-zacht); font-size: var(--tekst-2xl); flex: none; }
.sparkline { display: block; }

@media (max-width: 640px) {
  .dash-rij { grid-template-columns: 1fr; }
  .dash-rij__right { justify-content: space-between; }
}

/* Definitielijst (oplossing: oorzaak/oplossing/preventie) */
.dash-dl { font-size: var(--tekst-sm); margin: var(--ruimte-sm) 0; }
.dash-dl dt { font-weight: 600; margin-top: var(--ruimte-xs); }
.dash-dl dd { margin: 0 0 var(--ruimte-xs); }

/* Kleine helpers */
.inline-form { display: inline; margin: 0; }
.ruimte-boven { margin-top: var(--ruimte-xl); }
.ruimte-boven-lg { margin-top: var(--ruimte-lg); }
.tekst-midden { text-align: center; }
.opdracht-tekst { width: 100%; margin-top: var(--ruimte-sm); font-family: monospace; font-size: var(--tekst-sm); }
.dashboard-log {
  background: var(--kleur-vlak-zacht); color: var(--kleur-tekst);
  border: 1px solid var(--kleur-rand); border-radius: var(--radius);
  padding: var(--ruimte-sm); overflow-x: auto; max-height: 320px;
  font-size: var(--tekst-xs); white-space: pre-wrap; word-break: break-word;
}

/* Rijke metriek-panels (dashboard) */
.metriek-event { padding: 0.45rem 0; border-top: 1px solid var(--kleur-rand); }
.metriek-event:first-child { border-top: 0; }
.metriek-event__kop { display: flex; flex-wrap: wrap; gap: var(--ruimte-sm); align-items: baseline; }
.metriek-event details { margin: 0.2rem 0 0 var(--ruimte-md); }
.metriek-event summary { cursor: pointer; color: var(--kleur-primair); font-size: var(--tekst-sm); }

/* ── Postvak als werkbak (11 aug 2026) ──────────────────────────────────────
   Was: één kaart per zaak, drie regels hoog, geen selectie — twintig spamberichten
   opruimen kostte twintig keer openen en terugklikken. Nu: compacte rijen met een
   vinkje en één actiebalk. Rustig houden is hier functioneel: dit scherm wordt
   scannend gelezen, niet gelezen. */
.werkbalk {
  display: flex; align-items: center; gap: var(--ruimte-md); flex-wrap: wrap;
  background: var(--kleur-vlak); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot); padding: var(--ruimte-sm) var(--ruimte-md);
  margin-bottom: var(--ruimte-sm); position: sticky; top: 0; z-index: 5;
}
.werkbalk__alles { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; }
.werkbalk__telling { color: var(--kleur-tekst-zacht); font-size: var(--tekst-sm); }
.werkbalk__acties { display: inline-flex; align-items: center; gap: var(--ruimte-sm); flex-wrap: wrap; margin-left: auto; }
.werkbalk__label { padding: 0.3rem 0.5rem; font-size: var(--tekst-sm); border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--kleur-vlak); }

.zaak-lijst { display: flex; flex-direction: column; }
.zaak-rij {
  display: grid; grid-template-columns: auto 1fr; gap: var(--ruimte-sm);
  padding: 0.6rem var(--ruimte-md); border-bottom: 1px solid var(--kleur-rand);
  background: var(--kleur-vlak);
}
.zaak-rij:first-child { border-top-left-radius: var(--radius-groot); border-top-right-radius: var(--radius-groot); }
.zaak-rij:last-child { border-bottom: 0; border-bottom-left-radius: var(--radius-groot); border-bottom-right-radius: var(--radius-groot); }
.zaak-rij:hover { background: var(--kleur-vlak-zacht); }
/* Ongelezen: een streep links in plaats van een kleurvlak — anders schreeuwt een halfvolle
   werkvoorraad je toe en zie je de echte signalen (te laat, kritiek) niet meer. */
.zaak-rij--ongelezen { border-left: 3px solid var(--kleur-primair); }
.zaak-rij--gekozen { background: var(--kleur-vlak-zacht); }
.zaak-rij__kies { display: flex; align-items: flex-start; padding-top: 0.2rem; cursor: pointer; }
.zaak-rij__kop { display: flex; justify-content: space-between; gap: var(--ruimte-sm); align-items: baseline; }
.zaak-rij__kop a { font-weight: 600; color: var(--kleur-tekst); text-decoration: none; }
.zaak-rij__kop a:hover { text-decoration: underline; }
.zaak-rij__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-size: var(--tekst-sm); color: var(--kleur-tekst-zacht); }

@media (max-width: 640px) {
  .werkbalk { position: static; }
  .werkbalk__acties { margin-left: 0; }
  .zaak-rij__kop { flex-direction: column; gap: 0.1rem; }
}

/* ── Beheerschermen: subnavigatie en slanke voet (11 aug 2026) ───────────────
   Elk beheerscherm eindigde met de publieke voet — 'Onze platformen', 'Contact',
   vier juridische links — ruim een scherm ruis onder elke werkpagina. En van het
   overzicht naar het postvak moest je via de hoofdnavigatie. Beide opgelost. */
.sectie--beheer { padding-top: var(--ruimte-lg); }
.beheer-nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  border-bottom: 1px solid var(--kleur-rand); margin-bottom: var(--ruimte-lg);
}
.beheer-nav__item {
  padding: 0.5rem 0.85rem; border-radius: var(--radius) var(--radius) 0 0;
  color: var(--kleur-tekst-zacht); text-decoration: none; font-weight: 600;
  font-size: var(--tekst-sm); border-bottom: 2px solid transparent; white-space: nowrap;
}
.beheer-nav__item:hover { color: var(--kleur-primair); background: var(--kleur-vlak-zacht); text-decoration: none; }
.beheer-nav__item.is-hier { color: var(--kleur-primair); border-bottom-color: var(--kleur-primair); }
.beheer-nav__tel {
  display: inline-block; min-width: 1.2em; padding: 0 0.35em; margin-left: 0.2em;
  background: var(--kleur-accent-knop); color: var(--kleur-accent-knop-tekst);
  border-radius: var(--radius-rond); font-size: var(--tekst-xs); text-align: center;
}
.beheer-voet {
  border-top: 1px solid var(--kleur-rand); margin-top: var(--ruimte-xl);
  padding: var(--ruimte-md) 0; font-size: var(--tekst-sm); color: var(--kleur-tekst-zacht);
}
.beheer-voet .container { display: flex; justify-content: space-between; gap: var(--ruimte-md); flex-wrap: wrap; }

/* KPI-tegel als link: elk cijfer leidt naar de plek waar je er iets aan doet. */
.dash-kpi--klik { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .15s ease; }
.dash-kpi--klik:hover { transform: translateY(-2px); box-shadow: var(--schaduw); text-decoration: none; }

/* ── Printen (12 aug 2026) ───────────────────────────────────────────────────
   Er stond hiervóór géén enkele printregel. Een uitdraai bevatte dus de volledige
   navigatie, de toegankelijkheidsknop en de ELO-widget — en tegelijk geen enkele
   bronvermelding: geen logo, geen adres, geen datum. Niet te herleiden tot wie het
   gemaakt heeft.

   Gemeld door AICVchecker (terugmelding 11 aug 2026, T5), en hun argument is scherp:
   Ctrl+P is een echt kanaal — het vierde naast site, mail en beeldmerk — en het enige
   dat het merk niet droeg. Drie valkuilen die zij al hadden gevonden staan hieronder
   met de reden erbij, want ze zijn geen van drieën vanzelfsprekend. */

.print-merk,
.print-voet { display: none; }

@media print {
  /* Weg: alles waar je op papier niets aan hebt. */
  header, footer, .beheer-nav, .beheer-voet, .skip-link,
  .a11y-launcher, .a11y-panel, .elo-knop, .elo-paneel, .werkbalk,
  .platformbalk, .knop, form { display: none !important; }

  /* Papier is wit en inkt is duur: geen vlakken, geen schaduwen. */
  * { background: transparent !important; box-shadow: none !important; }
  body { color: #000; font-size: 11pt; line-height: 1.45; }
  main { padding: 0 !important; }
  .kaart, .sectie { border: 0 !important; padding: 0 !important; margin: 0 0 12pt !important; }

  /* Kop op papier. Een echte <img>, want browsers laten CSS-achtergronden bij het
     printen standaard weg — dan zou het logo simpelweg verdwijnen. */
  .print-merk {
    display: block;
    margin: 0 0 10pt;
    padding-bottom: 6pt;
    border-bottom: 1pt solid #044381;
  }
  .print-merk img {
    height: 12mm;
    width: auto;
    /* Zonder dit drukt de browser het navy als grijs af — hij "bespaart" inkt op wat
       hij voor decoratie aanziet. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Voet met bron en datum. De datum wordt server-side gerenderd: bij "printen naar
     PDF" draait er geen JavaScript, dus een datum uit new Date() blijft leeg. */
  .print-voet {
    display: flex;
    justify-content: space-between;
    gap: 10mm;
    margin-top: 10pt;
    padding-top: 6pt;
    border-top: 1pt solid #044381;
    font-size: 9pt;
    color: #444;
  }

  /* Een link zonder zichtbare URL is op papier een dood woord. Alleen externe links:
     bij interne zou elke regel vollopen met hetzelfde domein. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  /* Niet midden in een kop of tabel afbreken. */
  h1, h2, h3 { break-after: avoid; }
  table, figure, .kaart { break-inside: avoid; }
}

/* Platformkiezer in het postvak: zeven merken door elkaar lezen werkt niet — je wisselt
   van toon en context per bericht. Een platform zonder post blijft zichtbaar maar gedimd,
   zodat de rij niet verspringt zodra er post binnenkomt. */
.actie-rij--platform { margin-bottom: var(--ruimte-sm); }
.knop--klein { padding: 0.3rem 0.7rem; font-size: var(--tekst-sm); }
.knop__tel {
  display: inline-block; min-width: 1.4em; margin-left: 0.25em; padding: 0 0.3em;
  background: rgba(0, 0, 0, 0.12); border-radius: var(--radius-rond);
  font-size: var(--tekst-xs); font-weight: 700;
}
.knop.is-leeg { opacity: 0.55; }