/* ============================================================
   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; }

/* --- 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 {
  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 {
  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); }

/* --- 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. */
.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); }

/* ============================================================
   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 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; }

/* 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); }
.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); }