/* ImProve Online — design system (fase 1)
   Gebaseerd op het functioneel ontwerp. Montserrat wordt lokaal gehost (geen CDN).
   Avenir Next blijft system-preferred vooraan in de fontstack. */

/* ---- Lokale webfont: Montserrat (variabel 400–900) ---- */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ---- Lokale webfonts: Baloo 2 en Nunito Sans ----
   Kwamen tot 21 augustus 2026 van Google Fonts. Nu lokaal, om twee redenen. De app
   heeft een toestemmingspoort; een verzoek aan fonts.gstatic.com stuurt het IP-adres
   van de bezoeker naar Google vóórdat die poort iets heeft kunnen vragen. En het
   scheelt een externe afhankelijkheid op de kritieke laadweg.
   Alleen de subsets latin en latin-ext zijn overgenomen, net als bij Montserrat.
   Beide zijn variabele fonts: één bestand dekt het hele gewichtsbereik.

   Opmaak v3.0 (28 augustus 2026) haalde Baloo 2 weg en zette één letter voor alles.
   Batch 11B (9 september 2026) zet hem terug voor uitsluitend de koppen: de vastgelegde
   ImProve-typografie is Baloo 2 voor koppen en Nunito Sans voor alle andere tekst en
   bediening. De twee .woff2-bestanden hebben al die tijd in public/fonts gestaan; het
   commentaar hier beweerde ten onrechte dat ze waren verwijderd. */
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("/fonts/baloo-2-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("/fonts/baloo-2-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ----
   Vast ImProve-huisstijlpalet, besluit T-131 van 9 september 2026 (bron:
   HUISSTIJLPALET_IMPROVE_VAST_20260909.md). Alleen de elf merkkleuren en de drie
   lichte basiswaarden uit dat besluit komen hier voor; transparante varianten
   daarvan zijn toegestaan, een eigen tint niet. De NAMEN blijven Engels: §2.1 van
   het oude opmaakdocument schrijft dat voor zodat de bestaande regels blijven
   werken, en StylesheetTokensTest weigert de Nederlandse namen uit het pakket,
   omdat twee sets naast elkaar vragen om drift.

   Het palet kent minder lichte waarden dan het vorige stelsel. Vijf tokens vallen
   daarom samen op zand of papier; ze houden hun naam omdat ~1300 regels ernaar
   verwijzen, maar ze zijn geen aparte kleur meer.

   Drie beslissingen van ImProve, 9 september 2026, sturen de indeling hieronder:

   1. Bruin/goud #8A745A haalt als TEKST 3,85:1 op zand en 4,26:1 op papier, en met
      lichte tekst erop 4,26:1 — alle drie onder de AA-grens van 4,5:1 die a11y.spec.js
      met nul tolerantie bewaakt. Besluit: #8A745A blijft merkaccent voor iconen,
      geselecteerde vlakken en niet-tekstuele accenten (--accent), en donkerbruin
      #874C0D draagt tekstlinks, actieve tekstlabels en primaire knopvlakken
      (--bordeaux). Op een primair knopvlak is de tekstkleur papier #FBFAF8: 6,56:1.
      Geen tussenkleur buiten het palet, en de toegankelijkheidstoets blijft streng.
   2. Het palet kent geen groen. Geslaagd krijgt daarom geen eigen kleur meer: een
      vinkje met donkere tekst op zand. Alleen fout en risico houden kleur (#BC000E).
      --info volgt diezelfde lijn; blauwgrijs #858A9B is volgens het palet geen
      standaard schermaccent en wordt hier bewust niet gebruikt.
   3. Nergens meer #FFFFFF. Zand #F3EEE8 is de pagina-achtergrond, papier #FBFAF8
      draagt kaarten, bovenbalk en zijbalk, #E2DCD6 doet randen en scheidingen.

   Gemeten contrasten staan per token; zand en papier zijn de twee ondergronden. */
:root{
  /* Merk */
  --bordeaux:#874C0D;             /* donkerbruin. Tekstlinks, actieve tekstlabels en het
                                     vlak van de primaire knop. 5,93:1 op zand, 6,56:1 op
                                     papier, en 6,56:1 met papier als tekst erop. De naam
                                     blijft --bordeaux: 134 regels verwijzen ernaar */
  --accent:#8A745A;               /* bruin/goud. UITSLUITEND niet-tekstueel: icoontegels,
                                     voortgangsvlakken, decoratieve tekens. 3,85:1 op zand —
                                     genoeg voor een grafisch element (3:1), te weinig voor
                                     tekst. Zet hier nooit letters in of op */
  --bordeaux-dark:#211C18;        /* hover van de primaire actie, en het donkere icoon op een
                                     zandvlak. Het palet kent geen bruin donkerder dan
                                     #874C0D, dus de hover stapt door naar de donkere tekst */
  --wine:#7B0041;                 /* bordeaux uit het palet: krachtig accent, en de vaste
                                     kleur van de stuurfunctie Werkoverzicht. 9,49:1 op zand */
  --magenta:#C30066;              /* aanvullende reekskleur uit het palet, en de kleur van
                                     de focusrand en het meldingsbolletje. 5,18:1 op zand.
                                     W-01.1#R1 haalt "actie nodig" hier weg: dat sein staat
                                     sinds bouwbundel 6 in --danger, op alle drie de plekken
                                     waar het verschijnt */
  --yellow:#F6A924;               /* vlak- en lijnkleur, altijd met donkere tekst (8,54:1).
                                     Nooit als tekstkleur: 1,71:1 op zand */
  --grey:#717074;                 /* 4,26:1 op zand, 4,71:1 op papier. Alleen op een
                                     papiervlak als tekst gebruiken */
  --grey-dark:#67626C;            /* gedempt; donkerder dan --grey. 5,14:1 op zand */
  --grey-soft:#A1A2A3;            /* neutraal grijs: placeholder en uitgeschakelde tekst */

  /* Tekst en vlakken */
  --ink:#211C18;                  /* koppen, nadruk. 14,64:1 op zand */
  --text:#211C18;                 /* lopende tekst. Het palet kent twee tekstkleuren, donker
                                     en gedempt; --text en --ink vallen daarmee samen */
  --muted:#67626C;                /* secundaire tekst. 5,14:1 op zand, 5,69:1 op papier */
  --kaarttekst:#4A4650;           /* RV-S6-70 (blok 9.8): de toelichting op een modulekaart. De
                                     kaart is WIT (--kaart), dus daar rekent dit token tegen:
                                     9,2:1 op #FFFFFF, en 7,55:1 op het kaartvlak #ECE8E4 voor
                                     het geval de kaart daar ooit op komt te staan. --muted gaf
                                     5,93:1 op wit; dat haalt AA, maar de klacht ging over
                                     leesbaarheid, niet over de norm (de les van RV-S6-26: reken
                                     met de echte achtergrond, niet met puur wit). */
  --line:#E2DCD6;                 /* randen en scheidingen */
  --line-soft:rgba(226,220,214,.6); /* binnenlijnen, tabelcellen, voortgangsspoor:
                                     transparante variant van de lijnkleur */
  --paper:#FBFAF8;                /* RV-S6-100 (H4): nog uitsluitend de CHROME — de balk
                                     bovenin, de zijbalk en het logovak. De kaarten staan
                                     sinds deze ronde op --kaart en de tekst op een merkvlak
                                     op --op-merk. De waarde zelf verschuift niet mee: de
                                     werklijst zegt dat #FBFAF8 blijft wat het is */
  --kaart:#FFFFFF;                /* RV-S6-100 (H4): het vlak van elke kaart, elk paneel en
                                     elke tabel. Wit, en dus lichter dan de chrome eromheen
                                     (#FBFAF8) en dan het werkgebied eronder (#F8F5F1) — die
                                     drie trappen maken de gelaagdheid zichtbaar zonder één
                                     extra lijn. Elk contrast in dit bestand dat "op papier"
                                     zei, is hierna opnieuw tegen wit gerekend; wit is lichter
                                     dan papier, dus elke waarde gaat omhoog, nooit omlaag */
  --op-merk:#FFFFFF;              /* RV-S6-100 (H4): de tekstkleur IN een gevuld merkvlak.
                                     Wit haalt 6,84:1 op --bordeaux (#874C0D) en 4,78:1 op het
                                     modulestandbruin (#846F57). Op --accent (#8A745A) haalt
                                     wit 4,44:1 en dus nét niet — maar --accent draagt nergens
                                     tekst (vijf treffers, alle vijf een balk of een bolletje),
                                     dus die grens wordt niet geraakt. Zie blok 1 van H4 */
  --canvas:#F3EEE8;               /* pagina-achtergrond */
  --offwhite:#F3EEE8;             /* tabelkop en hoverrij: zand binnen een papieren kaart */
  --sand:#F3EEE8;                 /* icoonvlak, actief menu-item, zachte accenten */
  --sand-line:#BBA590;            /* licht taupe: rand bij hover op invoervelden */
  --soft-grey:#F3EEE8;

  /* Status — zie beslissing 2 hierboven */
  /* RV-S6-27 (20-09): "geen groen" geldt nog steeds hier en voor het hele platform, maar niet
     meer overal. De stand Afgerond op de modulekaart van het deelnemersscherm is sinds dat
     besluit wél groen (--kaart-af verderop). Dat is een bewuste herziening van de regie, geen
     uitglijder die hersteld moet worden. */
  --success:#211C18; --success-soft:#F3EEE8;       /* geen groen: vinkje, donkere tekst, zand */
  --warning:#211C18; --warning-soft:rgba(246,169,36,.30); /* geel vlak, altijd donkere tekst */
  --danger:#BC000E;  --danger-soft:rgba(188,0,14,.09);    /* uitsluitend fout en risico */
  /* RV-S6-27 (20-09): T-131 blijft gelden voor --info en voor het hele platform. De stand
     Nog niet gestart op de modulekaart van het deelnemersscherm is sinds dat besluit wél
     blauwgrijs (--kaart-open verderop), na een bewuste keuze die het paletbestand voor deze
     kleur ook al toestond. Niet terugdraaien als vergissing. */
  --info:#67626C;    --info-soft:#F3EEE8;          /* neutraal; geen blauwgrijs (T-131) */

  /* Kleuren van de modulekaart op de leerroutepagina, uit de merkrichtlijn bij de opdracht van
     20-09 (besluit S6-65, deel A). Eigen namen en GEEN wijziging van --success of --info:
     die twee dragen het hele platform, en de opdracht gaat over één scherm. Zo blijft
     terugdraaien één regel per kleur.

     RV-S6-27 (20-09): twee besluiten hierboven zijn hiervoor HERZIEN, bewust en vastgelegd.
     --success staat op "geen groen" en --info op "geen blauwgrijs (T-131)". Die twee blijven
     gelden voor het hele platform, maar niet meer voor de stand op het deelnemersscherm: groen
     mag voor Afgerond, blauwgrijs mag voor Nog niet gestart. Dat is een besluit van de regie en
     geen vergissing van de bouw — draai het niet terug omdat het met --success of --info lijkt
     te botsen. Wil je het toch wijzigen, leg het dan eerst voor.

     RV-S6-26: de tinten zijn iets donkerder dan de tabel in de opdracht, om de norm van 4,5:1 te
     halen die dit project aanhoudt. Nagerekend tegen de kleur die er werkelijk op ligt:
       #4A764F op #E9F0EA = 4,53:1  (was #4E7C53, 4,18:1)
       #FBFAF8 op #846F57 = 4,58:1  (was #8A745A, 4,32:1)
       #5E6478 op #EBEDF1 = 5,02:1  (ongewijzigd, haalde de norm al)
       #211C18 op #ECE8E4 = 13,85:1 (ongewijzigd)

     Let op de eerste kolom van de tweede regel: de tekst op dit vlak is --paper (#FBFAF8) en
     niet puur wit. Dat scheelt genoeg om de norm te missen — de eerste poging met #89735A kwam
     op 4,32:1 en axe wees hem af. Reken hier dus met #FBFAF8, niet met #FFFFFF.

     Het besluit noemde ook #867057 als tekstkleur voor het kopje boven de modulenaam. Dat kopje
     is met RV-S6-25 vervallen, dus die kleur heeft geen toepassing meer en staat hier niet.

     Alle vier staan sinds dit besluit in het paletbestand, dus de kleurcontrole is groen. */
  --kaart-vlak:#ECE8E4;           /* het vlak achter een onderdeel op de kaart */
  --kaart-actie-vlak:#846F57;     /* vlak van de stand "Je bent hier gebleven", tekst in --paper */
  --kaart-af:#4A764F;             --kaart-af-vlak:#E9F0EA;
  --kaart-open:#5E6478;           --kaart-open-vlak:#EBEDF1;

  /* Maatvoering */
  --shadow:0 1px 2px rgba(33,28,24,.04), 0 10px 28px -20px rgba(33,28,24,.35);
  --shadow-soft:0 1px 2px rgba(33,28,24,.04), 0 6px 18px -14px rgba(33,28,24,.3);
  --radius-lg:20px;               /* kaarten, panelen, tabelomhulsel */
  --radius-md:14px;               /* binnenelementen: tegels, meldingen, invoerblokken */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --appbar-h:76px;                /* het logovlak is 108px en steekt er bewust onderuit */
  --sidebar-w:304px;
  --content-max:1120px;

  /* Letters. Twee, met een scherpe grens. --font-head is Baloo 2 en draagt uitsluitend de
     koppen h1 t/m h4. --font is Nunito Sans en draagt al het andere: lopende tekst, labels,
     invoervelden, knoppen, menu-items, tabellen en meldingen. Montserrat blijft als terugval
     in beide stacks staan, daarachter de systeemletters. Alles lokaal gehost; er gaat geen
     enkel verzoek naar Google.
     Let op bij het toevoegen van een regel: --font-head betekent Baloo 2, óók op een
     nadrukkelijk element dat geen kop is. Tot 11B wezen beide namen naar dezelfde stack,
     waardoor negentien niet-kopregels ongemerkt --font-head gebruikten. Die staan nu op
     --font; zie de toelichting bij h1,h2,h3,h4. */
  --font:"Nunito Sans","Montserrat","Avenir Next","Segoe UI",Arial,sans-serif;
  --font-head:"Baloo 2","Montserrat","Avenir Next","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--offwhite);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit}
svg{display:block}
svg.icon{width:16px;height:16px} /* veilige default; componentregels overschrijven dit */
.hidden{display:none!important}
/* left:0 hoort erbij en ontbrak. Zonder positie blijft een absoluut gepositioneerd
   element op zijn statische plek staan, en dat wordt niet weggeknipt door een
   overflow-voorouder die zelf niet gepositioneerd is. In de kop van een brede tabel
   binnen .table-scroll landde zo'n verborgen label daardoor honderden pixels buiten
   beeld en groeide de PAGINA mee: /beheer/bestellingen liep 593px over op 900 breed.
   Gevonden augustus 2026, bij zeven views die dit patroon gebruiken. */
.sr-only,.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;left:0}
.skip-link:focus{position:fixed;left:16px;top:12px;width:auto;height:auto;clip:auto;margin:0;padding:10px 16px;background:var(--bordeaux);color:var(--op-merk);border-radius:10px;z-index:200}
:focus-visible{outline:3px solid rgba(135,76,13,.35);outline-offset:2px}

/* ---- Appbar ---- */
.appbar{height:78px;background:var(--paper);border-bottom:0;display:flex;align-items:center;gap:22px;padding:0 28px;position:sticky;top:0;z-index:40}
.global-search{flex:1;max-width:540px;position:relative;display:block}
.global-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;color:var(--grey)}
.global-search input{width:100%;height:43px;border:1px solid var(--line);background:var(--offwhite);border-radius:999px;padding:0 18px 0 44px;color:var(--ink);outline:none}
.global-search input:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14);background:var(--kaart)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.account-menu{position:relative}
.account-menu>summary{list-style:none;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:5px 6px;border-radius:12px;text-align:left}
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu>summary:hover{background:var(--offwhite)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bordeaux);color:var(--op-merk);font-weight:800;font-size:13px;flex:none}
/* Zonder nowrap wikkelt een lange naam of organisatie door en werd dit blok 106px hoog in
   een balk van 88 — hoe erg hangt af van hoe iemand heet, en dat is geen goede maatstaf
   voor een layout. Afkappen met een beletselteken houdt het altijd op twee regels. */
/* 150 en niet 190: het accountblok drukte anders de productnaam ernaast tot een
   beletselteken bij een organisatiebeheerder met een lange organisatienaam. Een afgekapte
   persoonsnaam is gebruikelijk en de volledige naam staat in het menu eronder; een
   afgekapte merknaam ziet eruit als een fout. */
.account-meta{text-align:right;max-width:150px}
.account-meta strong,.account-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-meta strong{display:block;font-size:13px}
/* RV-S6-29: de organisatieregel is leeg bij een deelnemer zonder organisatie. `min-height` houdt
   dan de ruimte van één regel vast, want de summary hierboven centreert verticaal
   (`align-items:center`) — zonder deze regel zou de naam van een zelfstandige deelnemer een paar
   pixels hoger staan dan die van iemand met een organisatie. Vandaar ook de vaste line-height:
   die maakt de hoogte van de lege regel voorspelbaar in plaats van afhankelijk van het lettertype. */
.account-meta span{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;min-height:1.35em}
.account-panel{position:absolute;right:0;top:calc(100% + 8px);width:230px;background:var(--kaart);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:50}
.account-panel .who{padding:8px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.account-panel .who strong{display:block;font-size:13px}
.account-panel .who span{display:block;color:var(--muted);font-size:11.5px}
.account-panel a,.account-panel button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:transparent;border-radius:10px;text-align:left;font-size:13px;color:var(--ink);text-decoration:none}
.account-panel a:hover,.account-panel button:hover{background:var(--sand)}
.account-panel svg{width:16px;height:16px;color:var(--grey)}
/* Actiemenu in een pagina-kopregel (D-102: "één actiemenu"). Bewust hetzelfde <details>-
   patroon en hetzelfde paneel als het accountmenu hierboven: een tweede soort uitklapmenu
   zou op elk scherm anders openen en sluiten. Alleen de knop zelf verschilt — die staat in
   een knopregel tussen gewone knoppen en moet er dus als knop uitzien. */
.actiemenu{position:relative}
.actiemenu>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;height:43px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--kaart);color:var(--ink);font-size:13.5px;font-weight:700}
.actiemenu>summary::-webkit-details-marker{display:none}
.actiemenu>summary:hover{background:var(--sand)}
.actiemenu>summary svg{width:16px;height:16px;color:var(--grey)}
.actiemenu .account-panel{width:250px}
.actiemenu .account-panel a.danger{color:var(--danger)}
.actiemenu .account-panel a.danger svg{color:var(--danger)}
.mobile-menu{display:none;flex:none;border:1px solid var(--line);background:var(--kaart);border-radius:10px;width:42px;height:42px;place-items:center;color:var(--ink)}
/* Zoekknop in de vaste bovenbalk: op desktop staat het volledige zoekveld er al, dus verborgen;
   op mobiel (zoekveld weg) verschijnt dit zoekicoon dat naar /zoeken linkt. Selector met
   .header-actions ervoor wint van .icon-button (die later in het bestand display:grid zet). */
.header-actions .search-mobile{display:none}

/* ---- Shell + sidebar ---- */
.shell{min-height:calc(100vh - 78px);display:grid;grid-template-columns:248px minmax(0,1fr)}
.sidebar{background:var(--paper);border-right:1px solid var(--line-soft);padding:22px 16px;position:sticky;top:78px;height:calc(100vh - 78px);overflow-y:auto;display:flex;flex-direction:column}
.nav-label{margin:18px 12px 7px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;font-weight:800}
.nav-label:first-child{margin-top:0}
.nav-button{width:100%;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;margin:2px 0;text-align:left;font-size:13.5px;font-weight:650;transition:.16s;text-decoration:none}
.nav-button svg{width:18px;height:18px;color:var(--grey);flex:none}
.nav-button:hover{background:var(--sand)}
.nav-button.active{background:var(--bordeaux);color:var(--op-merk)}
.nav-button.active svg{color:var(--op-merk)}
.nav-chip{margin-left:auto;background:var(--sand);color:var(--bordeaux);font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px}
.nav-button.active .nav-chip{background:rgba(251,250,248,.18);color:var(--op-merk)}
.sidebar-help{margin-top:auto;background:var(--sand);border-radius:16px;padding:16px;color:var(--muted);font-size:12.5px}
.sidebar-help strong{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.sidebar-help a{display:inline-block;color:var(--bordeaux);font-weight:750;text-decoration:none;margin-top:8px}

/* .main vult minimaal de hoogte onder de appbar en is een flex-kolom, zodat .content groeit
   en de footer ALTIJD onderaan de pagina staat — nooit midden in korte content. */
.main{min-width:0;padding:32px 34px 56px;min-height:calc(100vh - 78px);display:flex;flex-direction:column}
.content{max-width:1180px;width:100%;margin:0 auto;animation:rise .22s ease;flex:1 0 auto}
/* R35 (B4, 18-09-2026): één oorzaak, één regel. Een e-mailadres, een URL of een factuurkenmerk
   heeft geen spatie om op af te breken en telt als één blok mee in de min-content-breedte. Op een
   telefoonscherm duwde dat de pagina zijwaarts: 14px op `/beheer` en `/dashboard` (de onderbouwing
   van een aandachtspunt), 3px op `/beheer/aanvragen/{id}` (de gegevenslijst) en daar ook de zin
   "Er is al een account: …". Drie schermen, steeds hetzelfde: een adres in lopende tekst.
   `anywhere` en niet `break-word`, want alleen `anywhere` telt mee in de min-content — dezelfde
   reden als bij `h1,h2,.page-head h1{overflow-wrap:anywhere}` en de zes andere plekken waar dit
   al per element stond. Hier staat het één keer voor de tekstelementen in de inhoudskolom, zodat
   de volgende lange waarde niet opnieuw een eigen regel nodig heeft. Het breekt alleen af wanneer
   het woord anders niet past; kortere tekst verandert er niet van. */
/* EH-S6-03 / EH-S6-23 (19-09-2026) — HIER STONDEN `td` EN `th` BIJ. Dat brak bijna elk woord in
   een tabel af zodra de kolom smal werd: "CATE GORIE", "VER SIE", "GEWIJZIG D", "Wo rd DOCX".
   De bedoeling hierboven ging over lopende tekst — een adres in een alinea, een URL in een
   opsomming — en die blijft staan.

   Bij een tabel werkt het anders, en dat is precies waarom het misging. `anywhere` telt mee in de
   min-content (zie hierboven), dus met deze regel kon elke cel krimpen tot bijna niets. Daardoor
   paste de tabel ALTIJD binnen zijn kader en had `.table-scroll` nooit iets te schuiven: het
   scherm koos afbreken boven schuiven. Dat verklaart ook de tweede helft van EH-S6-23 — tien
   kolommen op de breedte van zes — zonder dat daar een aparte oorzaak voor nodig is.

   Met `td`/`th` eruit krijgt een cel haar natuurlijke min-content terug, wordt de tabel breder dan
   haar kader en schuift `.table-scroll` zoals T5 het bedoelde.

   Wat een lang adres in een tabelkolom dan doet, vangt `.breekbaar` op: die staat sinds dezelfde
   wijziging op de kolommen die een e-mailadres, URL of bestandsnaam kunnen bevatten. Zonder dat
   zou het lange-woordprobleem alleen maar verhuizen van lopende tekst naar tabellen. */
.content p,.content dd,.content li{overflow-wrap:anywhere}
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---- Typografie + koppen ---- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}
.eyebrow{margin:0 0 5px;color:var(--bordeaux);font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
h1,h2,h3,h4,p{margin-top:0}
h1{font-size:31px;line-height:1.18;margin-bottom:7px;letter-spacing:-.025em}
h2{font-size:20px;line-height:1.25;margin-bottom:12px;letter-spacing:-.012em}
h3{font-size:16px;line-height:1.28;margin-bottom:7px}
.lead{color:var(--muted);max-width:720px;margin-bottom:0}

/* ---- Knoppen ---- */
.button{border:0;border-radius:999px;padding:11px 18px;background:var(--bordeaux);color:var(--op-merk);font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:.16s;white-space:nowrap}
.button:hover{background:var(--bordeaux-dark);transform:translateY(-1px)}
.button.secondary{background:var(--kaart);color:var(--bordeaux);border:1px solid var(--line)}
.button.secondary:hover{background:var(--sand)}
/* RV-S6-38: de teller waarop je staat. Zelfde vlak en randkleur als het actieve menu-item,
   zodat een gefilterde lijst ook zonder de kop te lezen te herkennen is. --bordeaux op
   --sand haalt 5,9:1. */
.button.secondary.actief{background:var(--sand);border-color:var(--bordeaux)}
.button.ghost{background:transparent;color:var(--bordeaux);padding-left:2px;padding-right:2px}
.button.small{padding:8px 13px;font-size:12.5px}
.button.danger{background:var(--danger)}
.button svg{width:16px;height:16px}
.icon-button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--kaart);display:grid;place-items:center;color:var(--grey);text-decoration:none}
.icon-button:hover{background:var(--sand)}
.icon-button svg{width:17px;height:17px}

.phase-callout{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--paper) 0%,var(--sand) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:20px}
.phase-callout .phase-number{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bordeaux);color:var(--op-merk);font-weight:850;font-size:18px;flex:none}
.phase-callout p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* ---- Grids + kaarten ---- */
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:20px;min-width:0}
.card.flat{box-shadow:none}
.card.tinted{background:var(--sand);border-color:transparent}
.card p:last-child{margin-bottom:0}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--sand);color:var(--accent);flex:none}
.card-icon svg{width:21px;height:21px}
.card-meta{color:var(--muted);font-size:12.5px;margin-bottom:13px}
.card-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:28px 0 12px}
.section-title h2{margin:0}
.section-title a{color:var(--bordeaux);font-size:12.5px;font-weight:750;text-decoration:none}

/* ── "Snel naar": compacte rij van vier klikbare blokjes (cursist-homepage) ──
   Klein vierkant plaatje bovenaan (i.p.v. een icoon) + label + korte tekst; alle vier naast
   elkaar op één rij. Raster: 4 (desktop) / 2 (mobiel). Beeld vervangen = bestand overschrijven. */
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.quick-card{display:flex;flex-direction:column;background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;text-decoration:none;color:inherit;transition:.16s}
.quick-card:hover{border-color:var(--sand-line);box-shadow:var(--shadow);transform:translateY(-2px)}
.quick-card:focus-visible{outline:3px solid rgba(135,76,13,.35);outline-offset:2px}
.quick-card-media{display:block;width:100%;aspect-ratio:16/9;background:var(--sand);overflow:hidden}
.quick-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.quick-card-body{padding:14px 16px 16px}
.quick-card-body strong{display:block;font-size:15px;margin-bottom:4px;color:var(--ink)}
.quick-card-meta{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
@media(max-width:640px){.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Statuspills ---- */
.status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.status.todo{background:var(--soft-grey);color:var(--muted)}
.status.done{background:var(--success-soft);color:var(--success)}
.status.active{background:var(--sand);color:var(--bordeaux)}
.status.warning{background:var(--warning-soft);color:var(--warning)}
.status.danger{background:var(--danger-soft);color:var(--danger)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- Herocard ---- */
.hero-card{background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.hero-card:after{content:"";position:absolute;right:-35px;top:-55px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(195,0,102,.11),rgba(195,0,102,0) 68%);pointer-events:none}
.hero-card-inner{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:center;position:relative;z-index:1}
.hero-title{font-size:24px;margin-bottom:8px}
.steering-colors{display:flex;gap:6px;margin:14px 0 17px}
.steering-colors span{width:23px;height:8px;border-radius:999px}
.hero-visual{background:var(--sand);border-radius:20px;min-height:160px;padding:20px;display:grid;place-items:center}
.rhythm{width:132px;height:132px;border-radius:50%;position:relative;border:1px dashed rgba(113,112,116,.35)}
.rhythm .center{position:absolute;inset:38px;border-radius:50%;background:linear-gradient(135deg,var(--grey),var(--grey-dark));color:var(--paper);display:grid;place-items:center;text-align:center;font-size:11px;font-weight:800;line-height:1.2}
.rhythm i{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--paper);font-style:normal;font-size:10px;font-weight:800;box-shadow:0 4px 12px rgba(33,28,24,.12)}
.rhythm i:nth-of-type(1){top:-4px;left:51px;background:var(--bordeaux)}
.rhythm i:nth-of-type(2){top:51px;right:-4px;background:var(--magenta)}
.rhythm i:nth-of-type(3){bottom:-4px;left:51px;background:var(--bordeaux)}
.rhythm i:nth-of-type(4){top:51px;left:-4px;background:var(--grey)}

/* ---- Lijsten ---- */
.list{display:flex;flex-direction:column;gap:9px}
.list-row{display:flex;align-items:center;gap:13px;padding:14px 15px;background:var(--kaart);border:1px solid var(--line-soft);border-radius:14px;transition:.15s;text-decoration:none;color:inherit}
.list-row:hover{border-color:var(--sand-line);box-shadow:var(--shadow-soft)}
.list-row .grow{flex:1;min-width:0}
.list-row strong{display:block;font-size:13.5px}
.list-row small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
/* S3: nadruk binnen een uitlegzin in een rij blijft in de zin ("Starttijd als mm:ss of uu:mm:ss." bij
   Hoofdstukken viel anders uiteen in vijf regels). */
.list-row .card-meta strong{display:inline;font-size:inherit}
.list-row .row-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--sand);color:var(--accent);flex:none}
.list-row .row-icon svg{width:17px;height:17px}

/* ---- Training-tabs + modules ---- */
.training-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:17px}
.tab-button{border:1px solid var(--line);background:var(--kaart);padding:8px 13px;border-radius:999px;color:var(--muted);font-weight:700;font-size:12px;white-space:nowrap;text-decoration:none}
.tab-button.active{background:var(--bordeaux);color:var(--op-merk);border-color:var(--bordeaux)}
.module-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px}
.video-player{aspect-ratio:16/9;border-radius:20px;background:var(--ink);display:grid;place-items:center;color:var(--paper);position:relative;overflow:hidden}
.video-player:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(195,0,102,.23),transparent 32%),radial-gradient(circle at 15% 85%,rgba(138,116,90,.26),transparent 35%)}
.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{width:68px;height:68px;border-radius:50%;border:1px solid rgba(251,250,248,.7);background:rgba(251,250,248,.12);display:grid;place-items:center;position:relative;z-index:1;backdrop-filter:blur(5px)}
.play svg{width:25px;height:25px;margin-left:3px;color:var(--paper)}
.video-caption{position:absolute;left:20px;bottom:18px;z-index:1;max-width:80%}
.video-caption strong{display:block;font-size:15px}
.video-caption span{font-size:11.5px;opacity:.78}
.video-stub-note{position:absolute;top:16px;left:16px;right:16px;z-index:1;background:rgba(33,28,24,.4);border:1px solid rgba(251,250,248,.18);border-radius:12px;padding:10px 12px;font-size:11.5px;line-height:1.4}
.chapter-list{display:flex;flex-direction:column;gap:8px}
.chapter{display:flex;align-items:center;gap:11px;padding:12px;background:var(--kaart);border:1px solid var(--line-soft);border-radius:13px}
.chapter-number{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--bordeaux);font-weight:800;font-size:11px;flex:none}
.chapter strong{font-size:12.5px;display:block}
.chapter small{color:var(--muted);font-size:11px}
.chapter .status{margin-left:auto}

/* ---- Templates ---- */
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.template{display:flex;align-items:center;gap:13px;background:var(--kaart);border:1px solid var(--line-soft);border-radius:15px;padding:15px}
.filetype{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--paper);font-size:10px;font-weight:850;flex:none}
.filetype.word{background:var(--bordeaux)}.filetype.pdf{background:var(--wine)}.filetype.xlsx{background:var(--grey)}.filetype.canva{background:var(--magenta)}
/* Mijlpaal J3: extra bestandstypen + losstaand type-icoon (bibliotheek/beheer). */
.filetype.pptx{background:var(--yellow);color:var(--ink)}.filetype.image{background:var(--grey-soft);color:var(--ink)}
.row-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--sand);color:var(--accent);flex:none}
.row-icon svg{width:17px;height:17px}
.meta-list{display:grid;gap:8px;margin:0}
.meta-list>div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:8px}
.meta-list dt{font-weight:700;font-size:12.5px;color:var(--muted)}
.meta-list dd{margin:0;font-size:13.5px;text-align:right}
.template .grow{min-width:0;flex:1}
.template strong{display:block;font-size:13px}
.template small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}

/* ---- De coach: volledige chatpagina ---- */
.coach-shell{background:var(--kaart);border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-soft);max-width:900px}
.coach-header{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.coach-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--bordeaux);font-weight:850}
.coach-header .grow{flex:1}
.coach-header strong{display:block;font-size:13.5px}
.coach-header span{display:block;color:var(--muted);font-size:11.5px}
.chat{min-height:280px;max-height:440px;overflow-y:auto;background:var(--offwhite);padding:20px;display:flex;flex-direction:column;gap:12px}
.message{max-width:74%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5}
.message.bot{align-self:flex-start;background:var(--sand);border-bottom-left-radius:5px}
.message.user{align-self:flex-end;background:var(--bordeaux);color:var(--op-merk);border-bottom-right-radius:5px}
.message.refused{background:var(--warning-soft);color:var(--warning)}
.message .sources{margin-top:8px;padding-top:8px;border-top:1px solid rgba(33,28,24,.08);font-size:11.5px}
.chat-input{display:flex;gap:10px;padding:13px;border-top:1px solid var(--line-soft)}
.chat-input textarea,.chat-input input{flex:1;border:1px solid var(--line);border-radius:16px;padding:11px 15px;outline:none;resize:none;min-height:44px}
.chat-input textarea:focus,.chat-input input:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.privacy-note{color:var(--muted);font-size:11.5px;margin:10px 4px 0;max-width:900px}
.privacy-note strong{margin-right:7px}
/* Compacte, inklapbare privacytoelichting op de coachpagina ("Privacy en gegevens"). */
.coach-privacy{margin:14px 4px 0;max-width:900px}
.coach-privacy>summary{display:inline-flex;align-items:center;gap:6px;color:var(--bordeaux);font-weight:700;font-size:12.5px;cursor:pointer}
.coach-privacy>summary svg{width:14px;height:14px}
.coach-privacy p{color:var(--muted);font-size:11.5px;line-height:1.5;margin:8px 0 0;max-width:720px}

/* ---- Metric ---- */
.metric{padding:18px;background:var(--kaart);border:1px solid var(--line-soft);border-radius:16px}
.metric span{display:block;color:var(--muted);font-size:11.5px}
.metric strong{display:block;font-size:25px;margin-top:4px;line-height:1.1}
.metric small{display:block;color:var(--success);font-size:11px;margin-top:6px}

/* ---- Fase 2: aanbod / checkout / facturen ---- */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:920px}
.price-card{background:var(--kaart);border:1px solid var(--line-soft);border-radius:22px;padding:24px;box-shadow:var(--shadow-soft);position:relative}
.price-card.featured{border:2px solid var(--bordeaux)}
.price-card .ribbon{position:absolute;top:16px;right:16px;background:var(--sand);color:var(--bordeaux);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:850}
.price{font-size:31px;font-weight:850;letter-spacing:-.03em;margin:15px 0 0}
.price small{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.price-card ul{list-style:none;padding:0;margin:18px 0}
.price-card li{display:flex;gap:9px;margin:9px 0;color:var(--muted);font-size:13px}
.price-card li:before{content:"\2713";color:var(--success);font-weight:850}
.price-note{color:var(--muted);font-size:11px;margin-top:12px}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.form-card{background:var(--kaart);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .field.full{grid-column:1/-1}
.summary-card{background:var(--sand);border-radius:20px;padding:20px;position:sticky;top:98px}
.summary-line{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid rgba(138,116,90,.18);font-size:12.5px}
.summary-line.total{border:0;font-size:15px;font-weight:850;padding-top:15px}
@media(max-width:780px){
  .price-grid,.form-grid,.checkout-layout{grid-template-columns:1fr}
  .summary-card{position:static}
}

/* ---- Beheer ---- */
.admin-banner{display:flex;align-items:center;gap:16px;background:var(--grey-dark);color:var(--paper);border-radius:20px;padding:20px;margin-bottom:18px}
.admin-banner .card-icon{background:rgba(251,250,248,.12);color:var(--paper)}
.admin-banner h2{margin:0;color:var(--paper);font-size:18px}
.admin-banner p{margin:2px 0 0;color:rgba(251,250,248,.72);font-size:12.5px}
.data-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--kaart);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;font-size:13px}
.data-table th,.data-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.data-table th{color:var(--muted);background:var(--offwhite);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.data-table tbody tr:hover td{background:var(--offwhite)}
.data-table tr:last-child td{border-bottom:0}
.data-table td .status{font-size:10.5px}
.table-scroll{overflow-x:auto;border-radius:var(--radius-lg)}
/* align-items hoort erbij: zonder deze regel rekt een kale <a class="button"> naast
   een opengeklapte <details> mee tot rijhoogte, en met border-radius:999px wordt dat
   een ovaal. Zichtbaar op /beheer/paginas zodra iemand "Nieuwe versie" openklapt. */
.table-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--sand);color:var(--bordeaux);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}
.wysiwyg-toolbar{display:flex;gap:5px;flex-wrap:wrap;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;padding:8px;background:var(--offwhite)}
.wysiwyg-toolbar button{border:1px solid var(--line);background:var(--kaart);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--ink)}
.wysiwyg-toolbar button:hover{background:var(--sand);border-color:var(--bordeaux)}
.wysiwyg{border:1px solid var(--line);border-radius:0 0 11px 11px;min-height:220px;max-height:460px;overflow-y:auto;padding:16px 18px;box-shadow:none;background:var(--kaart)}
.wysiwyg:focus{outline:2px solid rgba(135,76,13,.25);outline-offset:-1px}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}

/* ---- Artikel-prose ---- */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.prose{background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:28px 30px;max-width:100%}
.prose h2{margin-top:24px}
.prose h3{margin-top:20px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:6px 0}
.prose blockquote{margin:16px 0;padding:12px 16px;border-left:3px solid var(--bordeaux);background:var(--sand);border-radius:0 12px 12px 0;color:var(--grey-dark)}
.prose a{color:var(--bordeaux);font-weight:650}
.aside-card{background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:18px;position:sticky;top:98px}
.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-bottom:14px;flex-wrap:wrap}
.breadcrumb svg{width:14px;height:14px;flex:none;color:var(--grey)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--bordeaux)}
.article-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}

/* ---- Footer ----
   Hier stonden .site-footer, .footer en .footer-links: de brede zandkleurige onderbalk met
   merknaam, copyrightregel en een tweede paar links. T10 laat die op alle platformschermen
   vervallen. Wat onder de inhoud overblijft is .auth-voet (twee kleine tekstlinks op de
   uitgelogde schermen); ingelogd staan Hulp nodig? en Privacy en gegevens in de zijbalk en
   het accountmenu. */

/* ---- Auth / login ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 15%,rgba(195,0,102,.06),transparent 40%),radial-gradient(circle at 85% 85%,rgba(138,116,90,.08),transparent 42%),var(--offwhite)}
.auth-card{width:min(430px,100%);background:var(--kaart);border:1px solid var(--line-soft);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.auth-card .brand{justify-content:center;min-width:auto;margin-bottom:8px}
.auth-card h1{font-size:24px;text-align:center;margin-bottom:4px}
.auth-card .lead{text-align:center;margin:0 auto 22px}
.auth-fields{display:grid;gap:14px}
.field label{display:block;font-size:11.5px;font-weight:750;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--kaart);outline:none;color:var(--ink)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--sand-line)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.field.full{grid-column:1/-1}
.auth-links{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12.5px}
.auth-links a{color:var(--bordeaux);font-weight:700;text-decoration:none}

/* ---- Keuzelijst (aanvinkbare trainingen) ----
   Bevindingen v10 (#3): stond in een vak van 150px met een schuifbalk, dus training twee
   viel buiten beeld. Kolommen die meebuigen met de breedte, compacte vakjes, geen scroll.
   De dubbele klasse in de selector is nodig: deze items zijn label-elementen binnen een
   .field, en `.field label{display:block}` zou een enkelvoudige .keuzelijst-item overrulen —
   dan komt het vinkje boven de trainingnaam te staan in plaats van ernaast. */
.keuzelijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 18px}
.keuzelijst .keuzelijst-item{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:13px;line-height:1.35;padding:3px 0;margin:0}
.keuzelijst .keuzelijst-item input[type=checkbox]{width:15px;height:15px;min-height:0;margin:2px 0 0;padding:0;flex:none}
.keuzelijst .keuzelijst-item small{display:block}
/* BEHEER-HERSTEL-02: de melding bij één keuze — een product dat uit het aanbod is gehaald
   maar wel gekozen blijft. Zonder deze regel wordt de <p> een gewone rastercel en schuift hij
   naast een ándere keuze, waar hij op het scherm bij het verkeerde product lijkt te horen.
   Over de volle breedte staat hij onder het vinkje waar hij over gaat. */
.keuzelijst > .fout{grid-column:1/-1;margin:0 0 4px 23px}

/* ---- Alerts ---- */
.alert{border-radius:12px;padding:12px 15px;font-size:13px;margin-bottom:16px;border:1px solid transparent}
.alert.error{background:var(--danger-soft);border-color:rgba(188,0,14,.30);color:var(--danger)}
.alert.success{background:var(--success-soft);border-color:var(--line);color:var(--success)}
.alert.info{background:var(--sand);border-color:var(--line);color:var(--grey-dark)}
/* Fase G: waarschuwing die geen fout is — verlopen toegang die nog te herstellen valt.
   Zelfde tokens als .status.warning, zodat pil en melding dezelfde taal spreken. */
.alert.warning{background:var(--warning-soft);border-color:var(--warning);color:var(--warning)}
.alert ul{margin:6px 0 0;padding-left:18px}

.empty-state{text-align:center;padding:48px 24px;color:var(--muted);background:var(--kaart);border:1px dashed var(--line);border-radius:var(--radius-lg)}
.empty-state .card-icon{margin:0 auto 14px}

/* ---- Responsive ---- */
@media(max-width:1050px){
  .appbar{padding:0 18px}.global-search{max-width:none}
  .shell{grid-template-columns:214px 1fr}.sidebar{padding:18px 12px}.main{padding:27px 24px 45px}
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-layout,.article-layout{grid-template-columns:1fr}.aside-card{position:static}
}
@media(max-width:780px){
  .appbar{height:68px}.mobile-menu{display:grid}.header-actions .search-mobile{display:grid}.global-search{display:none}.account-meta{display:none}
  .shell{display:block}
  .sidebar{position:fixed;left:0;top:68px;bottom:0;height:auto;width:min(290px,88vw);z-index:60;transform:translateX(-105%);transition:.2s;box-shadow:20px 0 50px rgba(33,28,24,.15)}
  .sidebar.open{transform:none}
  .main{padding:22px 16px 40px;min-height:calc(100vh - 68px)}.page-head{display:block}.page-head .button{margin-top:14px}
  h1{font-size:25px}.grid.two,.grid.three,.grid.four,.hero-card-inner{grid-template-columns:1fr}
  .template-grid{grid-template-columns:1fr}.hero-visual{min-height:150px}
  .module-layout{display:block}.chapter-list{margin-top:14px}
}
@media(max-width:480px){
  .appbar{padding:0 12px;gap:10px}.avatar{width:35px;height:35px}
  .main{padding-left:12px;padding-right:12px}
  /* De kaartvulling stond hier ook, maar verloor van `.card{padding:var(--space-5)}` in
     sectie 32.5 — gelijke specificiteit, later in het bestand. Dood dus. De werkende
     versie staat onderaan bij D.11; deze regel is weggehaald zodat niemand nog denkt dat
     hij iets doet. */
}

/* ---- De coach: zwevend chatvenster (fase 1) ---- */
.coach-launcher{position:fixed;left:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;gap:9px;border:0;background:var(--bordeaux);color:var(--op-merk);border-radius:999px;padding:12px 18px;font-weight:750;box-shadow:var(--shadow)}
.coach-launcher:hover{background:var(--bordeaux-dark);transform:translateY(-1px)}
.coach-launcher .icon{color:var(--op-merk);width:20px;height:20px}
.coach-launcher .lbl{display:none}
@media(min-width:900px){.coach-launcher .lbl{display:inline}}
.coach-panel{position:fixed;left:22px;bottom:22px;z-index:95;width:min(380px,92vw);height:min(560px,80vh);background:var(--kaart);border:1px solid var(--line-soft);border-radius:22px;box-shadow:0 28px 80px rgba(33,28,24,.25);display:none;flex-direction:column;overflow:hidden}
.coach-panel[data-open="true"]{display:flex}
.coach-panel .hd{background:var(--bordeaux);color:var(--op-merk);padding:14px 16px;display:flex;align-items:center;gap:11px}
.coach-panel .hd .icon{color:var(--op-merk)}
.coach-panel .hd .ttl{font-weight:750;line-height:1.15;flex:1}
.coach-panel .hd .ttl small{display:block;font-weight:400;font-size:11.5px;opacity:.85}
.coach-panel .hd button{background:rgba(251,250,248,.16);border:0;color:var(--op-merk);width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.coach-panel .hd button:hover{background:rgba(251,250,248,.28)}
.coach-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--offwhite)}
.coach-msg{max-width:85%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.5}
.coach-msg.user{align-self:flex-end;background:var(--bordeaux);color:var(--op-merk);border-bottom-right-radius:5px}
.coach-msg.coach{align-self:flex-start;background:var(--sand);color:var(--ink);border-bottom-left-radius:5px}
.coach-msg .sources{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font-size:11.5px}
.coach-suggestions{display:flex;flex-direction:column;gap:6px;padding:0 16px 8px;background:var(--offwhite)}
.coach-suggestions button{text-align:left;background:var(--kaart);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12.5px;color:var(--ink)}
.coach-suggestions button:hover{border-color:var(--bordeaux);background:var(--sand)}
.coach-status{font-size:11.5px;color:var(--muted);padding:0 16px 6px;background:var(--offwhite)}
.coach-error{color:var(--danger)}
.coach-form{border-top:1px solid var(--line-soft);padding:11px;display:flex;gap:8px;align-items:flex-end}
.coach-form textarea{flex:1;resize:none;min-height:44px;max-height:120px;border:1px solid var(--line);border-radius:14px;padding:11px 13px;outline:none}
.coach-form textarea:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.coach-form button{flex:none;width:44px;height:44px;padding:0;border-radius:50%}
@media(max-width:780px){
  .coach-panel{left:0;right:0;bottom:0;width:100%;height:86vh;border-radius:22px 22px 0 0}
  .coach-launcher{left:auto;right:16px;bottom:16px}
}

/* ── Cursist-feedback (knop rechtsonder + modaal venster) ──
   Eén knop, geen overlap met andere elementen. Het venster sluit met de X, met Escape en met
   een klik buiten het venster; is er tekst ingevoerd, dan vraagt de JS eerst om bevestiging. */
/* De widget zweefde rechtsonder (position:fixed, z-index 120) en dekte daarmee inhoud af.
   De knop staat nu in de balk bovenin; wat hier overblijft is de dialoog, en die brengt
   zijn eigen `position:fixed` mee. Deze wikkel hoeft dus geen doos meer te zijn. */
.fb-widget{display:contents}
/* Zelfde vorm als .bell-summary ernaast: één rij pictogramknoppen in de balk. */
.fb-fab{width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;background:var(--kaart);color:var(--grey-dark);cursor:pointer}
.fb-fab:hover{background:var(--sand)}
.fb-fab svg{width:18px;height:18px}
.fb-overlay{position:fixed;inset:0;z-index:130;background:rgba(33,28,24,.45);display:grid;place-items:center;padding:20px}
.fb-overlay[hidden]{display:none}
.fb-dialog{width:min(440px,100%);background:var(--kaart);border-radius:20px;box-shadow:0 28px 80px rgba(33,28,24,.28);overflow:hidden;animation:rise .2s ease}
.fb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.fb-head strong{font-size:15px}
.fb-close{border:0;background:var(--sand);color:var(--grey-dark);width:32px;height:32px;border-radius:9px;display:grid;place-items:center}
.fb-close:hover{background:var(--line)}
.fb-close svg{width:16px;height:16px}
.fb-form{padding:16px 18px}
.fb-form label{display:block;font-weight:700;font-size:13px;margin-bottom:8px;color:var(--ink)}
.fb-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;outline:none;resize:vertical;min-height:110px;font:inherit;color:var(--ink)}
.fb-form textarea:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.fb-status{font-size:12.5px;margin-top:10px;min-height:1.1em}
.fb-status.ok{color:var(--success)}
.fb-status.err{color:var(--danger)}
.fb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.fb-thanks{padding:26px 18px 16px;text-align:center}
.fb-thanks-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--bordeaux);color:var(--op-merk);margin-bottom:12px}
.fb-thanks strong{display:block;font-size:16px;color:var(--ink)}
.fb-thanks p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.fb-thanks .fb-actions{justify-content:center;margin-top:18px}
/* Feedbackoverzicht beheer: leesbare berichten (bevinding v05) */
.feedback-bericht{max-width:420px;min-width:220px;overflow-wrap:anywhere}
.feedback-bericht details summary{cursor:pointer;list-style:none}
.feedback-bericht details summary::-webkit-details-marker{display:none}
.feedback-meer{display:inline-block;margin-left:6px;color:var(--bordeaux);font-weight:650;font-size:12.5px;white-space:nowrap}
.feedback-bericht details[open] .feedback-preview{display:none}
.feedback-meer-dicht{display:none;margin-left:0}
.feedback-bericht details[open] .feedback-meer-open{display:none}
.feedback-bericht details[open] .feedback-meer-dicht{display:inline-block}
.feedback-volledig{margin:6px 0 0;background:var(--sand);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* Hier reserveerde A3 ruimte zodat de zwevende Feedback-knop niet over de footerinhoud viel.
   De knop staat inmiddels in de bovenbalk (.fb-fab) en de footer is met T10 vervallen, dus er
   valt niets meer vrij te houden. */
@media(max-width:780px){
  /* De knop is nu altijd al een cirkel met alleen een pictogram; de oude
     regels die hem hier klein maakten zijn daarmee overbodig geworden. */
}

/* ── Uitnodigingen (mijlpaal J1) ──
   Verlopen rij: subtiele lichtrode linkerrand + zachte achtergrond (rood alleen
   functioneel; de statuspil draagt de betekenis, niet de hele rij). */
.data-table tr.row-expired td{background:var(--danger-soft)}
.data-table tr.row-expired td:first-child{border-left:3px solid var(--danger)}
.badge-stack{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* Eenmalige activatielink + kopieerknop (clipboard via [data-copy] in app.js). */
.copy-box h3{margin-bottom:4px}
.copy-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.copy-row input{flex:1;min-width:240px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--ink);background:var(--offwhite)}
.copy-row input:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14);outline:none}
/* Inline vervaldatum-formulier in de actiekolom (alleen bij openstaand/verlopen). */
.expiry-edit{position:relative}
.expiry-edit summary{list-style:none;cursor:pointer}
.expiry-edit summary::-webkit-details-marker{display:none}
.expiry-form{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.expiry-form input[type="date"]{border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:12.5px;color:var(--ink);background:var(--kaart)}
.expiry-form input[type="date"]:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14);outline:none}
.expiry-help{margin-top:6px;max-width:260px}

/* o2b-24 (RV-S6-82) — de bron van de deelnemer: één regel onder "Heeft nu toegang tot",
   met Wijzigen erachter dat de keuzelijst openklapt. Zelfde vorm als .expiry-edit hierboven:
   een <details> zonder driehoekje, zodat het zonder script werkt. */
.bronregel{font-size:13px}
.bronregel strong{color:var(--ink)}
.bronregel strong.zacht{color:var(--muted);font-weight:600}
/* De hele regel is de summary: "Bron: Live training   Wijzigen". Alleen het woord Wijzigen is
   onderstreept, want dat is wat je aanklikt; de regel eromheen is tekst. */
.bron-wijzigen>summary{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.bron-wijzigen>summary .wijzig{font-size:12.5px;color:var(--bordeaux);
  text-decoration:underline;text-underline-offset:2px}
.bron-wijzigen>summary:hover .wijzig{color:var(--magenta)}
.bron-wijzigen>summary:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px}
.bron-wijzigen[open]>summary .wijzig::after{content:" sluiten"}
.bron-wijzigen .actieform{align-items:flex-end}
.bron-wijzigen .field{flex:1;min-width:220px}

/* Blok 19 regel 21 (RV-S6-139) — de afwijkende einddatum per product, in de kolom Einddatum van
   "Heeft nu toegang tot". Dezelfde vorm als .bron-wijzigen hierboven en .expiry-edit daarvoor: een
   <details> zonder driehoekje, zodat "pas na een klik verschijnt de keuze" zonder script werkt.
   Staat er al een eigen einddatum, dan staat de keuze open en draagt de summary de markering
   "Afwijkende einddatum: [datum]" in plaats van het woord Wijzigen. */
.afwijkende-einddatum{margin-top:6px;font-size:12.5px}
.afwijkende-einddatum>summary{display:inline-flex;align-items:baseline;gap:var(--space-1);cursor:pointer;list-style:none}
.afwijkende-einddatum>summary::-webkit-details-marker{display:none}
.afwijkende-einddatum>summary .wijzig{color:var(--bordeaux);text-decoration:underline;text-underline-offset:2px}
.afwijkende-einddatum>summary:hover .wijzig{color:var(--magenta)}
.afwijkende-einddatum>summary:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px}
.afwijkende-einddatum[open]>summary .wijzig::after{content:" sluiten"}
/* De keuze zelf staat onder de regel en mag de kolom niet oprekken: de tabel heeft vaste
   kolombreedtes (EH-S6-70), dus het formulier stapelt in plaats van naast elkaar te gaan staan. */
.afwijkende-einddatum .actieform{display:block;margin-top:var(--space-2);white-space:normal}
.afwijkende-einddatum .veldgroep{gap:var(--space-1)}
.afwijkende-einddatum input[type="date"]{width:100%;min-width:9rem}

/* ── Drag-and-drop volgordebeheer (mijlpaal J2) ──
   Sleephandgreep, zwevende kloon, drop-indicator (placeholder), omhoog/omlaag-
   knoppen (toetsenbordpad) en de statusmelding ("Volgorde opgeslagen"). */
.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border:0;background:transparent;color:var(--muted);border-radius:9px;cursor:grab;touch-action:none}
.drag-handle:hover{background:var(--soft-grey);color:var(--bordeaux)}
.drag-handle:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.drag-handle svg.icon{width:15px;height:15px}
body.is-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.is-dragging .drag-handle{cursor:grabbing}
.drag-clone{position:fixed;z-index:400;pointer-events:none;margin:0;opacity:.96;box-shadow:0 18px 40px rgba(33,28,24,.22);transform:rotate(.4deg);background:var(--kaart)}
.drag-placeholder{opacity:.45;outline:2px dashed var(--magenta);outline-offset:-2px;border-radius:14px;background:var(--sand)}
.sort-btns{display:inline-flex;gap:4px;flex:none}
.sort-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line);background:var(--kaart);color:var(--grey);border-radius:8px;padding:0}
.sort-btn:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.sort-btn:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.sort-btn svg.icon{width:13px;height:13px}
.list-row a.row-link{flex:1;min-width:0;text-decoration:none;color:inherit}
.list-row a.row-link:hover strong{color:var(--bordeaux)}
/* Een regellijst die per rij meer dan één actie draagt. Op /beheer/specials staat naast Openen
   ook de T-43-schakelaar "Los verkoopbaar maken", en die past er op een telefoon niet naast:
   .list-row is een flexrij zonder wrap, dus schoof de rij 143px buiten het scherm. Wrappen in
   plaats van een media query — op een breed scherm is er ruimte en gebeurt er niets. */
.list.acties-wrap .list-row{flex-wrap:wrap}
.list.acties-wrap .list-row a.row-link{flex:1 1 220px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);background:var(--bordeaux);color:var(--op-merk);padding:11px 20px;border-radius:12px;font-size:13.5px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:500;box-shadow:var(--shadow);max-width:min(92vw,480px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.error{background:var(--danger)}

/* ── Meldingen (mijlpaal J6) ──
   Bel-icoon in de appbar met ongelezen-teller, dropdown met recente meldingen,
   en de ongelezen-markering op /meldingen. */
.bell-menu{position:relative}
.bell-menu>summary{list-style:none}
.bell-menu>summary::-webkit-details-marker{display:none}
.bell-summary{position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--kaart);color:var(--grey-dark);cursor:pointer}
.bell-summary:hover{background:var(--sand)}
.bell-summary svg{width:18px;height:18px}
.bell-count{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--bordeaux);color:var(--op-merk);font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--paper)}
.bell-count.is-empty{display:none}
.bell-panel{width:330px;max-height:70vh;overflow-y:auto}
/* Hogere specificiteit dan `.account-panel a` (flex): meldingen zijn blokjes. */
.bell-panel a.bell-item{display:block;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.bell-panel a.bell-item:hover{background:var(--sand)}
.bell-item strong{display:block;font-size:12.5px}
.bell-item span{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;line-height:1.4}
.bell-item small{display:block;color:var(--muted);font-size:10.5px;margin-top:3px}
.bell-panel a.bell-item.unread{background:var(--sand)}
.bell-item.unread strong:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.bell-empty{color:var(--muted);font-size:12px;padding:10px;margin:0}
.bell-footer{display:flex;gap:4px;border-top:1px solid var(--line-soft);margin-top:6px;padding-top:6px}
.bell-footer form{flex:1}
/* Fase E — §9 en §10 verbieden allebei letterlijk een gekleurde verticale linkerrand bij
   updates en meldingen. De rand is eruit; de zachte tint blijft, en de status wordt
   gedragen door het label "Nieuw" in de rij zelf. Kleur is dus nog steeds niet het enige
   verschil, maar nu zonder de rand die het pakket afwijst. */
.list-row.notification-unread{background:var(--sand)}
/* Variabele-invoegknoppen op het notificatie-bewerkscherm (klikbaar, CSP-veilig). */
.var-insert{border:1px solid var(--line);background:var(--kaart);color:var(--bordeaux);font-family:monospace;font-size:11.5px;cursor:pointer}
.var-insert:hover{border-color:var(--bordeaux);background:var(--sand)}

/* Fase 5 — "Module toevoegen": typekeuze als radio-kaarten. Zonder JS blijven alle
   typepanelen (fieldsets) zichtbaar; de kaartstijl markeert de gekozen keuze. */
.module-type-card{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:11px;padding:10px 13px;cursor:pointer;flex:1;min-width:180px;background:var(--kaart)}
.module-type-card:hover{border-color:var(--bordeaux)}
.module-type-card:has(input:checked){border-color:var(--bordeaux);background:var(--sand);box-shadow:0 0 0 1px var(--bordeaux) inset}
.module-type-card:has(input:focus-visible){outline:2px solid var(--magenta);outline-offset:2px}
.module-type-card input{margin-top:3px;flex:none}
.module-type-card>span{display:flex;flex-direction:column;gap:2px}
.module-type-card strong{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.module-type-card small{color:var(--muted);font-weight:400;font-size:11.5px}

/* ---- "Proces content beheren" v1.0: modulebeheer + Leren in jouw eigen praktijk ---- */

/* Accordion per module (native <details>). De kaart is de OMHULLENDE .module-blok, niet
   de <details> zelf — zo staat de Opslaan-knop, die naast de <details> hangt, op smalle
   schermen nog steeds op het witte kaartvlak in plaats van los op de paginaachtergrond.
   Deze `padding:0` verloor eerder van `.card{padding:var(--space-5)}` in sectie 32.5:
   gelijke specificiteit, maar die staat later in het bestand. De module-kaart had daardoor
   24px vulling die hier nooit bedoeld was — en precies daardoor lijnde de Opslaan-knop 25px
   te hoog uit ten opzichte van de titel. Zelfde soort fout als bij a.card.leren-kaart. */
.module-accordion{padding:0}
.module-accordion > *:not(summary){margin-left:20px;margin-right:20px}
.module-accordion > *:last-child{margin-bottom:18px}
.module-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;cursor:pointer;list-style:none}
.module-kop::-webkit-details-marker{display:none}
.module-kop-info{display:flex;align-items:center;gap:11px;min-width:0}
.module-kop-info svg.icon{width:16px;height:16px;color:var(--muted);transition:transform .16s;flex:none}
details[open] > .module-kop .module-kop-info > svg.icon{transform:rotate(180deg)}
/* `min-width:0` staat op .module-kop-info maar niet op de titel erbinnen, en een
   Nederlands samenwoord breekt nergens. Een titel als
   "Onboardingtrajectbegeleidingsverantwoordelijkheid" zette daardoor de min-content-
   breedte van het flex-item: op 900px schoof de status-badge onder de Opslaan-knop
   (37px overlap, "Gevuld" half onleesbaar) en op 390px liep de hele pagina 182px over.
   `overflow-wrap:anywhere` telt — anders dan `break-word` — wél mee in de min-content-
   berekening, en dat is precies wat hier nodig is. Moduletitels zijn vrije invoer van
   een beheerder, dus dit is geen bedacht randgeval.
   `hyphens:auto` erbij omdat de <html> op lang="nl" staat: de browser breekt dan liefst
   op een echt afbreekpunt mét streepje, en valt pas op `anywhere` terug als niets past.
   Zonder dat brak een lang woord op 390px in vier regels met een losse letter aan het
   eind — leesbaar, maar het oogt als een fout. */
.module-kop strong{font-size:14.5px;min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* De Opslaan-knop hoort visueel op de kopregel maar mag niet IN de <summary> staan:
   een knop in een summary is een knop in een knop (axe nested-interactive) en de
   spatiebalk klapt dan open in plaats van op te slaan. Hij staat nu als broer naast
   de <details> en ligt met absolute positionering op dezelfde regel. */
/* Over de tabvolgorde, want die verandert hierdoor en dat is een bewuste keuze.
   De knop staat ná </details> in de DOM. Met het paneel DICHT is de volgorde titel →
   Opslaan, gelijk aan wat je ziet. Met het paneel OPEN wordt het titel → alle velden →
   Opslaan, terwijl de knop rechtsboven staat. Dat is niet ideaal, maar wél de gangbare
   formuliervolgorde: eerst invullen, dan versturen. In de oude opzet (knop ín de summary)
   kwam Opslaan vóór de velden — dus in de open staat is dit een verbetering, niet een
   verslechtering. De knop vóór de <details> zetten verschuift het probleem alleen naar de
   dichte staat, die veel vaker voorkomt. Er is hier geen variant zonder ruil; deze is
   gekozen omdat hij de veelvoorkomende staat goed houdt en de zeldzame staat logisch. */
.module-blok{position:relative}
/* De kaartvulling zit hier op nul: de <summary> en de inhoud zetten hun eigen inspringing,
   zodat de knop tegen de kaartrand kan liggen. (0,2,0) verslaat .card (0,1,0), ook binnen
   de smalle-scherm-mediaquery op regel 484. */
.module-blok.card{padding:0}
.module-blok > .module-opslaan{position:absolute;top:15px;right:20px}
.module-blok .module-kop{padding-right:118px}
@media (max-width:560px){
  /* Te smal om naast de titel te liggen: dan op een eigen regel onder de kopregel — maar
     nog wél binnen de kaart, want de kaart is het blok eromheen. */
  .module-blok > .module-opslaan{position:static;margin:0 20px 16px}
  .module-blok .module-kop{padding-right:20px}
}

/* Compacte, vaste trainingkaarten (rekken niet mee met de schermbreedte);
   de bordeauxlijn onderaan loopt gelijk doordat de voet de restruimte vult. */
.leren-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,320px));gap:22px}
.leren-kaart{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:.16s}
.leren-kaart:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.kaart-afbeelding{width:100%;height:150px;object-fit:cover;display:block;background:var(--sand)}
.kaart-afbeelding-leeg{width:100%;height:150px;display:grid;place-items:center;background:var(--sand);color:var(--bordeaux)}
.kaart-afbeelding-leeg svg.icon{width:30px;height:30px}
.kaart-media{position:relative;display:block}
.kaart-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:rgba(251,250,248,.92);color:var(--bordeaux);box-shadow:var(--shadow-soft)}
.kaart-play svg.icon{width:18px;height:18px;margin-left:2px}
/* EH-S6-29: hier stond border-bottom:3px solid var(--bordeaux) onder de knop. */
.kaartvoet{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:auto;flex:1}
.kaartvoet-tekst{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.kaartvoet-tekst strong{font-size:14px;line-height:1.3}
.kaartvoet-tekst small{color:var(--muted);font-size:11.5px}
.kaart-badge{width:34px;height:34px;border-radius:999px;background:var(--sand);color:var(--bordeaux);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.kaart-vinkje{color:var(--success);flex:none}
.kaart-vinkje svg.icon{width:21px;height:21px}
.kaart-pijl{color:var(--bordeaux);flex:none;display:inline-flex}
.kaart-pijl svg.icon{width:17px;height:17px}

/* De vier tegels op het trainingoverzicht (Videomodules · Coach · Kennis · Templates) */
.leren-tegels .leren-tegel{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-decoration:none;color:inherit;transition:.16s}
.leren-tegels .leren-tegel:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.leren-tegels .leren-tegel strong{font-size:14.5px;margin-top:6px}
.leren-tegels .leren-tegel small{color:var(--muted);font-size:12px}
@media (max-width:980px){.leren-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Toegankelijkheid: respecteer verminderde-bewegingsvoorkeur (WCAG 2.3.3).
   Schakelt de content-fade (.content rise) en alle overgangen uit.

   Hier stond de bekende `animation-duration:.01ms !important`-truc. Die bestaat om
   animationend-events te laten vuren bij code die erop wacht — in dit platform wacht
   niemand daarop (nagegaan: geen enkele animationend/transitionend-luisteraar). En de
   truc heeft een prijs: de animatie BESTAAT dan nog. Tussen het opbouwen van de pagina
   en de eerste frame geldt daardoor de eerste keyframe, en die is `opacity:0`. Dat is
   geen theorie: de toegankelijkheidsmeting ving `.content` herhaaldelijk op opacity 0,
   en axe slaat onzichtbare inhoud over — de meting was dus deels leeg. Bovendien zag
   iemand die minder beweging vraagt alsnog een flits van niets.
   Daarom weg in plaats van kort. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   32. Herontwerp levering 1 — v3.0, 20 augustus 2026
   ==========================================================================
   De gedeelde opmaak, de omlijsting en het beheeroverzicht uit het
   ontwerppakket (ontwerp/assets/improve-online.css v2.6), samengevoegd met
   deze stylesheet. Regels bij dit blok:

   1. Nieuwe opmaak staat HIER, onderaan, niet tussen de bestaande secties.
   2. Bestaande klassenamen blijven werken; waar het ontwerp een bestaande
      klasse anders invult, staat de nieuwe waarde hieronder als override.
   3. De tokennamen zijn Engels (zie het tokenblok bovenaan).
   4. .icon krijgt NOOIT een globale maat: src/Core/Support/icons.php zet
      class="icon" op elke SVG in het platform. Nieuwe maten zijn per
      component gescoopt.

   Bewust NIET overgenomen uit het ontwerp (staat in de oplevering):
   - .sein  -> het platform heeft al .status met dezelfde vijf toestanden
   - .leeg  -> het platform heeft al .empty-state
   - .field als flexkolom -> 209 bestaande gebruiken rekenen op blokgedrag
   - .data-table met min-width:620px -> zou pagina's horizontaal laten schuiven
   - h1..h4 met margin:0 -> zou de verticale ritmiek van elk bestaand scherm
     platslaan; alleen letter, grootte en regelhoogte zijn overgenomen
   ========================================================================== */

/* ---- 32.1 Basis ---- */
body{background:var(--canvas);color:var(--text);font-size:16px}
/* De enige plek waar --font-head (Baloo 2) wordt gebruikt. Batch 11B: Baloo 2 uitsluitend
   voor zichtbare koppen, Nunito Sans voor alle andere tekst en bediening — knoppen
   inbegrepen, ook wanneer die visueel nadrukkelijk zijn.
   Negentien regels stonden hier eerder ook op --font-head: .button, de kengetallen
   (.metric>strong, .kerncijfer .cijfer strong, .actieblok>strong, .balklijst .telling,
   .stap .getal, .feit-kaart b, .stapnummer, .moduleblok .nr) en de kaarttitels
   (.snel strong, .modulekop strong, .uitklapkaart .naam, .coach-header strong,
   .dropzone strong, .orgfeiten strong, .moduleblok .kern>strong, .punt-item .kern strong,
   .bevinding .feit, .ankers a span). Zolang beide namen dezelfde stack opleverden viel dat
   niet op. Ze staan nu op --font. Hoort een van deze elementen alsnog als kop te lezen, dan
   is dat een schermbesluit: zet die ene regel terug op --font-head. */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.14;font-weight:700}
h1{font-size:36px}
h2{font-size:24px}
h3{font-size:18px;font-weight:600}
h4{font-size:15px;font-weight:600}
.eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.14em;font-weight:700}
.lead{margin:8px 0 0;color:var(--muted);max-width:70ch}
.klein{font-size:13px;color:var(--muted)}

/* ---- 32.2 Balk bovenin ----
   Opmaak v3.0: de balk is wit en bestaat uit twee delen met een eigen hoogte. Links het
   logovlak van 108px, even breed als de zijbalk. Rechts de acties, 76px hoog. Het
   werkgebied begint op 76px, dus het logovlak steekt er 32px onderuit en loopt visueel
   door in de witte zijbalk: samen vormen ze één doorlopende witte kolom. Omdat het logo
   over de bovenkant van de zijbalk heen valt, begint de navigatie 58px onder de balk;
   daardoor staat het eerste menu-item op de hooglijn van de eyebrow rechts.
   De onderlijn begint pas waar de zijbalk ophoudt — over de volle breedte zou hij dwars
   door het logovlak snijden. */
.appbar{
  height:var(--appbar-h);
  padding:0 var(--space-6) 0 0;
  gap:0;
  background:var(--paper);
  border-bottom:0;
  overflow:visible;
  box-shadow:none;
}
/* RV-S6-100 (H4): de horizontale haarlijn onder de kop is weg. Hij stond hier als
   pseudo-element omdat hij pas mocht beginnen waar de zijbalk ophoudt; de kleurenbalk van
   RV-S6-97 neemt die scheidende taak nu over, en twee lijnen onder elkaar leest rommelig. */
/* H6 punt 1 (23-09-2026): het vak rekent met --appbar-h en niet meer met een eigen vast
   getal. Het stond op 108px in een balk van 76px en stak er dus 32px onderuit. Dat was
   bedoeld toen die 32px in de witte zijbalk doorliep, maar sinds de kleurenbalk van
   RV-S6-97 ligt daar een DEKKENDE laag overheen (body::before: fixed, top:var(--appbar-h),
   hoogte kier+balk, z-index 45 tegen z-index 40 van .appbar). Alles onder de balk is dus
   onzichtbaar geworden, inclusief de onderste 20px van het logo — het woord ONLINE.
   12px en niet 32: genoeg om het logo te laten ademen, en het blijft achter de kleurenbalk. */
.merkzone{position:relative;flex:none;align-self:flex-start;width:var(--sidebar-w);
  height:calc(var(--appbar-h) + 12px);padding-left:22px;background:var(--paper);z-index:2;
  display:flex;align-items:center;text-decoration:none}
/* RV-S6-100 (H4): de verticale haarlijn tussen het logovak en de rest van de kop is weg.
   Hij zette de rand van de zijbalk door tot in de balk bovenin; zonder hem loopt het witte
   vlak van kop en zijbalk als één geheel door, wat het ontwerp ook laat zien. */
/* Het logo voert de naam en het woord ONLINE zelf; er staat daarom geen tweede tekst
   naast. Op 84px is het 271px breed en past het binnen het vak van 304px met 22px
   inspringing. De invertfilter uit het bordeaux-tijdperk is weg: het logo staat in zijn
   eigen kleur. */
.brand-logo{height:84px;width:auto;display:block;filter:none}
/* H6 punt 1: in de balk bovenin is het logo gebonden aan de balkhoogte, met een harde
   bovengrens erbij. 16px minder dan de balk laat 8px lucht boven en onder; bij --appbar-h
   76px is dat 60px, precies de maat die op 1440x900 al klopte. Omdat beide maten nu uit
   hetzelfde token komen, kan het logo niet meer onder de balk uitkomen — op geen enkele
   zoom en op geen enkele venstermaat. Gemeten op 80, 90, 100, 110 en 125 procent op drie
   venstermaten in tests/e2e/specs/h6-blok1-logo.spec.js.
   `:where()` telt niet mee voor de specificiteit, zodat de breekpunten verderop (46px op de
   telefoon, 34px, 24px) hun gewone gewicht houden en niet hoeven te worden herschreven. De
   inlogpagina heeft geen .appbar; haar logo is .auth-logo (84px, S6-260) en blijft dus
   ongemoeid. */
:where(.appbar) .brand-logo{height:calc(var(--appbar-h) - 16px);
  max-height:calc(var(--appbar-h) - 16px)}

/* Uitgelogd is er geen zijbalk om in door te lopen.
   Het logovlak hierboven is 108px hoog in een balk van 76px omdat het onderuit steekt en
   overgaat in de witte zijbalk eronder — één doorlopende kolom. Zonder zijbalk klopt daar
   niets meer van: het vlak hangt met zijn haarlijn boven de paginakleur, en omdat .appbar
   `sticky` staat schuift dat witte blok bij het scrollen over de inhoud heen. Op /toewijzing,
   /aanbod en /aanvraag zag je het logo daardoor "meebewegen".
   Vandaar: vlak precies zo hoog als de balk, de verticale haarlijn weg (die zette de rand van
   de zijbalk voort), en de onderlijn weer over de volle breedte — de inspringing bestond
   alleen om niet dwars door het logovlak te snijden. Het logo krimpt mee met --appbar-h, dus
   dit blijft kloppen op elk breekpunt. */
.appbar-zonder-zijbalk .merkzone{width:auto;height:auto;align-self:stretch}
/* De twee regels die hier stonden schoven de weggehaalde haarlijnen op; met RV-S6-100 (H4)
   bestaan die lijnen niet meer, dus er is niets meer te verschuiven. */
.appbar-zonder-zijbalk .brand-logo{height:calc(var(--appbar-h) - 22px)}

.shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--appbar-h))}
.main{min-height:calc(100vh - var(--appbar-h))}
.content{max-width:var(--content-max)}
@media (min-width:781px){.sidebar{top:var(--appbar-h);height:calc(100vh - var(--appbar-h))}}

/* Zoekveld, account en knoppen op de witte balk. Deze regels stonden op wit-op-bordeaux
   (rgba(251,250,248,.14) als vlak, een witte focusring van .55 dekking); op een witte
   balk is het eerste onzichtbaar en verdwijnt het tweede volledig. Ze staan nu op het
   bronsvlak, met de gewone focusring van de rest van het platform. */
.header-actions{gap:var(--space-4)}
.global-search{flex:0 1 250px;min-width:0;width:auto;max-width:250px;order:-1}
.global-search input{height:40px;padding:0 16px 0 40px;background:var(--canvas);
  color:var(--ink);border-color:var(--line)}
.global-search input::placeholder{color:var(--grey-soft)}
.global-search input:hover{border-color:var(--sand-line)}
.global-search input:focus{background:var(--kaart);border-color:var(--bordeaux);
  box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.global-search svg{left:13px;width:16px;height:16px;color:var(--muted)}
.account-menu>summary{padding:5px 6px 5px 12px;border-radius:999px}
.account-menu>summary:hover{background:var(--sand)}
.account-meta strong{color:var(--ink)}
.account-meta span{color:var(--muted)}
.avatar{background:var(--bordeaux);color:var(--op-merk)}
.mobile-menu{background:var(--sand);border-color:transparent;color:var(--bordeaux-dark)}
.mobile-menu:hover{background:var(--sand-line)}
.mobile-menu .icon{width:20px;height:20px}
.bell-summary,.fb-fab{background:var(--sand);border-color:transparent;color:var(--bordeaux-dark)}
.bell-summary:hover,.fb-fab:hover{background:var(--sand-line)}
.bell-count{background:var(--magenta);color:var(--paper);border-color:var(--paper)}
.appbar .icon-button{background:var(--sand);border-color:transparent;color:var(--bordeaux-dark)}
.appbar .icon-button:hover{background:var(--sand-line)}
.appbar .button.secondary{background:var(--paper);border-color:var(--line);color:var(--text)}
.appbar .button.secondary:hover{background:var(--canvas);border-color:var(--sand-line)}
:focus-visible{outline-color:rgba(135,76,13,.45)}

/* ---- 32.3 Zijbalk ----
   Ruimere maatvoering dan eerst. De oude maten waren geknepen om alles op 760px
   schermhoogte te laten passen; dat lukte toch al niet voor de hoofdbeheerder (728px
   nodig, 672 beschikbaar) en het las slecht — twintig regels van 4px hoog zonder lucht,
   met kopjes die nauwelijks van hun items te onderscheiden waren.
   Nu: 8px in plaats van 4px verticale ruimte per item, 2px tussen de items, en vooral
   veel meer lucht bóven een groepskop dan eronder, zodat een kop bij zijn eigen groep
   hoort in plaats van los tussen twee groepen te zweven. Gevolg is dat de zijbalk voor
   meer rollen scrollt op een korte laptop; dat werkt (overflow-y:auto, regel 178) en er
   raakt niets onbereikbaar — nagemeten. Leesbaarheid weegt hier zwaarder dan alles in
   één blik. */
.sidebar{background:var(--paper);border-right:1px solid var(--line);
  padding:58px var(--space-3) var(--space-4)}
.nav{display:flex;flex-direction:column;gap:1px}
/* 24px boven, 2px onder — nagemeten in de preview (docs/overdracht, scherm "overview")
   op 1440 bij 1200. Een kop hoort visueel bij wat eronder staat, niet ertussenin, en die
   verhouding van 12 om 1 doet dat werk. */
/* De preview zet de groepskop op --grey-soft (nu #A1A2A3). Op papier is dat 2,45:1 en bij 9,5px
   valt hij daarmee ver door de AA-grens van 4,5:1; axe meldde het op elk scherm met een
   zijbalk. --muted haalt 5,83:1 en is dezelfde warme grijstoon. Dat is dezelfde afweging
   als bij --bordeaux en --muted zelf: maat, spatiëring en gewicht komen letterlijk uit het
   ontwerp, alleen de kleur is opgeschoven tot hij leesbaar is. */
.nav-label{margin:24px 10px 2px;color:var(--muted);font-size:9.5px;letter-spacing:.12em}
.nav-label:first-child{margin-top:4px}
/* Ook 24px; de preview kent geen apart geval voor "kop na een menublok".
   Eerder stond hier 32, en op 28 augustus 2026 heb ik er in twee stappen 40 en toen 52
   van gemaakt omdat de groepen te dicht op elkaar leken. Dat was aan de verkeerde knop
   draaien: de preview haalt zijn lucht niet uit grotere gaten tussen de groepen maar uit
   STRAKKERE items — 1px tussen de regels en 5px binnenruimte. Met die maatvoering valt
   24px vanzelf op als blokscheiding. Groter maken terwijl de items ruim staan, laat het
   geheel juist zweven. */
.nav+.nav-label{margin-top:24px}
.nav-button{align-items:flex-start;gap:10px;padding:5px 11px;margin:0;border-radius:12px;
  font-size:14px;font-weight:600;line-height:1.35;color:var(--muted)}
.nav-button .nav-text{min-width:0}
/* Uitloggen staat sinds paragraaf 14 in de zijbalk en is een POST-formulier, geen link.
   Het formulier is het flex-item in .nav; de knop erin vult het. font:inherit omdat een
   <button> anders terugvalt op de letter van het besturingssysteem. */
.nav-form{margin:0;display:flex}
.nav-form .nav-button{font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.nav-button .icon{width:17px;height:17px;margin-top:2px;color:var(--bordeaux)}
.nav-button:hover{background:var(--canvas);color:var(--ink)}
.nav-button.active,.nav-button[aria-current="page"]{background:var(--sand);color:var(--bordeaux)}
.nav-button.active .icon,.nav-button[aria-current="page"] .icon{color:var(--bordeaux)}
.nav-chip{margin-top:1px;font-size:11px;padding:1px 8px;background:var(--sand);color:var(--bordeaux)}
.nav-button.active .nav-chip,.nav-button[aria-current="page"] .nav-chip{
  background:rgba(251,250,248,.78);color:var(--bordeaux)}
.sidebar-help{display:flex;align-items:center;gap:9px;margin-top:var(--space-5);
  padding:9px 11px;background:var(--canvas);border-radius:var(--radius-md);
  font-size:13px;line-height:1.3;color:var(--muted);text-decoration:none}
.sidebar-help:hover{background:var(--sand);color:var(--ink)}
.sidebar-help .icon{width:16px;height:16px;color:var(--bordeaux);flex:none}

/* ---- 32.4 Knoppen ---- */
.button{border:1px solid var(--bordeaux);font-family:var(--font);font-weight:700;
  font-size:14.5px;padding:11px 18px;border-radius:12px}
.button:hover{background:var(--bordeaux-dark);border-color:var(--bordeaux-dark)}
.button.secondary{border-color:var(--line)}
.button.secondary:hover{background:var(--canvas);border-color:var(--line)}
.button.ghost{border-color:transparent}
.button.ghost:hover{background:transparent;border-color:transparent}
.button.small{font-size:13.5px;padding:8px 14px;border-radius:10px}
.button.danger{border-color:var(--danger)}
.button.danger:hover{background:var(--bordeaux-dark);border-color:var(--bordeaux-dark)}
/* Bevinding 12: "Definitief verwijderen" was rode tekst op een rood vlak. .ghost
   zette de tekst op bordeaux, .danger daarna alleen de achtergrond op rood. Een
   spookknop met .danger is voortaan rode tekst zonder vlak. */
.button.ghost.danger{background:transparent;border-color:transparent;color:var(--danger)}
.button.ghost.danger:hover{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
/* EH-S6-13 (19-09-2026, regie): "Een knop die niet werkt hoort uitgeschakeld te zijn, met de
   reden ernaast." Het attribuut disabled alleen was niet genoeg: het platform kende er geen
   beeld bij, dus een uitgeschakelde Publiceren-knop zag er precies zo uit als een werkende.
   Zand met gedempte tekst, dezelfde twee kleuren als een uitgeschakeld invoerveld hierboven
   (--offwhite met --muted, 5,14:1), geen hover en geen sprongetje.
   Bewust een eigen klasse en niet .button:disabled: de dubbelklikbescherming en een paar
   knoppen die tijdens het wachten even uitgaan, zetten datzelfde attribuut, en die kortstondige
   stand hoort bij een ander besluit. */
.button.uitgeschakeld{background:var(--offwhite);border-color:var(--line);color:var(--muted);
  cursor:not-allowed}
.button.uitgeschakeld:hover{background:var(--offwhite);border-color:var(--line);
  color:var(--muted);transform:none}

/* RV-S6-08 (19-09-2026, Simone) — de opmaak van de pagina Meer informatie, zes onderdelen op
   volgorde: foto bovenaan op 16:9, kaarttekst onder de titel, uitgebreide omschrijving als
   lopende tekst zonder kader, Voor wie en Wat levert het je op naast elkaar met een kopje in de
   ankerkleur, prijs en knop samen in een gekleurde balk onderaan, en minder ruimte tussen de
   kaarttekst en de lopende tekst eronder.

   Twee kleuren noemt het besluit bij naam en niet bij waarde; ze zijn gelezen uit het bestaande
   palet. De ankerkleur is --bordeaux: de kleur van elke tekstlink in dit platform (zie .ankers a
   span). De gekleurde balk is --sand, het zachte vlak van het platform; een balk in --bordeaux
   zou de primaire knop erin onzichtbaar maken, want die is zelf --bordeaux. */
.meerinfo-beeld{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  background:var(--sand);border-radius:var(--radius-lg);margin-bottom:var(--space-5)}
.page-head.meerinfo-hoofd{margin-bottom:var(--space-3)}
.meerinfo-tekst{margin:0 0 var(--space-5)}
.meerinfo-tekst p{margin:0}
.meerinfo-kolommen{margin:0 0 var(--space-5)}
.meerinfo-kolommen h2{margin:0 0 var(--space-2);color:var(--bordeaux);font-size:18px}
.meerinfo-kolommen p{margin:0}
.meerinfo-balk{display:flex;align-items:center;gap:var(--space-4);
  flex-wrap:wrap;background:var(--sand);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}
/* De knop gaat naar rechts, ook als er geen prijs naast staat (RV-S6-04). Met margin-left in
   plaats van space-between, zodat er geen leeg element nodig is om de rij te vullen. */
.meerinfo-balk .button{margin-left:auto}
.meerinfo-balk .meerinfo-prijs p{margin:0;max-width:60ch}
.meerinfo-balk .meerinfo-prijs p + p{margin-top:var(--space-1)}
.tekstknop{background:none;border:0;padding:6px 2px;color:var(--muted);font-size:13px;
  font-weight:600;text-decoration:underline;cursor:pointer}
.tekstknop:hover{color:var(--ink)}

/* ---- 32.5 Kaarten, kengetallen en statuslabels ---- */
.card{border-radius:var(--radius-lg);border-color:var(--line);padding:var(--space-5);
  box-shadow:var(--shadow)}
.grid.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);
  grid-template-rows:auto auto auto}
/* De drie rijen van een kengetal — label, cijfer, voetregel — lijnen over de hele rij uit,
   ongeacht hoe vaak een label afbreekt. De `min-height:2.7em` hieronder deed dat ook, maar
   met een aanname: twee regels. Bij vijf kolommen op 1100px wordt een label er drie, en dan
   stonden de cijfers alsnog op twee hoogtes — gevonden met de uitlijningscontrole uit het
   overdrachtspakket, toegepast op deze schermen. Subgrid heeft die aanname niet nodig. */
.grid.five>.metric{grid-row:span 3;grid-template-rows:subgrid}
/* `align-self:end` op de voetregel duwt kortere voetregels naar de kaartbodem: hun
   ONDERkanten lijnen dan uit en hun bovenkanten niet, en dat laatste is wat het ontwerp
   bedoelt met "voetregels op dezelfde hoogte" (gemeten: vier op 2155, één op 2138 omdat
   die drie regels telt). Binnen de subgrid is die duw ook overbodig — de rijhoogte is al
   die van de langste voetregel. Alleen hier omgezet; elders blijft .metric zoals hij is. */
.grid.five>.metric .onder{align-self:start}
.metric{padding:var(--space-5);border-radius:var(--radius-lg);
  display:grid;grid-template-rows:auto auto 1fr;align-content:start}
/* Labels van één en twee regels zetten de cijfers eronder anders op verschillende
   hoogtes; een vaste hoogte legt alles binnen een rij op dezelfde lijn. */
/* De vaste hoogte legt de cijfers binnen een rij op dezelfde lijn. Alleen waar er ook
   een voetregel staat: op bestaande schermen (label + getal) zou het enkel lucht toevoegen. */
.metric>span:first-child{display:block;font-size:14px;line-height:1.35}
.metric:has(.onder)>span:first-child{min-height:2.7em}
.metric>strong{display:block;font-family:var(--font);font-size:30px;font-weight:700;
  color:var(--ink);line-height:1.2;margin:2px 0}
.metric .rij{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-3);margin:2px 0}
.metric .rij>strong{margin:0}
/* display:inline-block is hier geen opmaakkeuze maar een reparatie. De basisregel
   `.metric span{display:block}` (sectie 12) zet ELKE span in een kengetal op een eigen
   regel. Bij .aandeel hiernaast was dat al ondervangen, bij .van niet — daardoor viel de
   noemer op vier schermen naar de regel onder het getal ("3" met "van 5" eronder) terwijl
   hij ernaast hoort. De kaart bij "Gezondheid van het platform" had er geen last van: daar
   is .van een direct kind van een flexrij, en flex zet zijn kinderen sowieso naast elkaar.
   Gemeld 1-9-2026 ("waarom staat het onder Gebruik niet hetzelfde als daarboven"). */
.metric .van{display:inline-block;font-family:var(--font);font-size:15px;font-weight:400;
  color:var(--muted)}
.metric .aandeel{display:inline-block;margin-left:8px;font-family:var(--font);font-size:12.5px;
  font-weight:700;color:var(--text);background:var(--canvas);border-radius:999px;
  padding:2px 9px;position:relative;top:-4px}
.metric .onder{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;
  min-height:2.7em;align-self:end}

/* ---- 32.5b Actieblokken en de compacte samenvattingsrij (beheeroverzicht) ----
   Vervangt twee vormen die niet meer zijn toegestaan: vier tegels met een icoon in een rond
   vlak (.admin-kerngetallen) en vijf kaarten met een verhoudingsbalk (.kengetalkaart).
   Beide hadden een eigen omranding, achtergrondvlak en afgeronde hoeken.

   T-83: "vier kerncijfers als een compacte samenvattingsrij, met dunne verticale
   scheidingen. Er komen geen losse tegels, omrandingen of achtergrondvlakken."
   T-15: "Aantal met rustige nadruk, korte toelichting eronder. Op mobiel onder elkaar met
   subtiele scheidingslijnen."

   Hier stond: "grid-auto-flow:column met auto-columns van 1fr in plaats van een vast
   kolomaantal: dezelfde rij tekent vier kerncijfers en twee gebruikscijfers, en hoeft dat
   aantal niet te kennen." Dat laatste bleek juist het probleem; zie H6 punt 6b hieronder. */
/* H6 punt 6b (23-09-2026): een VASTE indeling van vier kolommen, niet meer één kolom per
   cijfer. Met `grid-auto-flow:column` maakte de rij zijn kolommen naar het aantal cijfers, dus
   werden de twee cijfers onder "Gebruik" twee halve kolommen van 534px onder vier van 267px.
   Ze lijnden daardoor niet uit met de kerncijfers erboven en hielden elk een half leeg vlak
   naast zich. Vier kolommen is de maat van de kerncijferrij zelf (T-83), en een rij met minder
   cijfers vult gewoon de eerste kolommen. */
.kerncijferrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:var(--space-5) 0}
.kerncijfer{padding-inline:var(--space-5);border-inline-start:1px solid var(--line-soft)}
.kerncijfer:first-child{padding-inline-start:0;border-inline-start:0}
.kerncijfer .cijfer{display:flex;align-items:baseline;gap:8px;margin:0}
.kerncijfer .cijfer strong{font-family:var(--font);font-size:28px;font-weight:700;
  line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
/* Een woord is geen cijfer en krijgt daarom niet de cijfergrootte. */
.kerncijfer .cijfer.leeg strong{font-size:20px}
.kerncijfer .cijfer .van{font-size:15px;color:var(--muted)}
.kerncijfer .wat{display:block;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--text)}
.kerncijfer .context{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;
  color:var(--muted)}
/* Deze regel wacht op iemand — een organisatie zonder toegang, een uitnodiging die
   openstaat. Hij stond in donkerrood, als hetzelfde sein als de pil "Actie nodig"
   (W-01.1#R1). RV-S6-104 (22-09-2026) draait dat terug: een organisatie zonder toegang is
   geen fout, en een rode regel onder een getal schreeuwt. De betekenis zit nu in het
   gekleurde rondje erboven (.seinicoon), en de regel is gewone donkere tekst — de inkt uit
   het palet, zonder extra nadruk. Op dit punt vervangt RV-S6-104 de rij W-01.1#R1. */
.kerncijfer .context.let-op{color:var(--text)}

/* De drie actieblokken. T-15 laat een container toe "wanneer er daadwerkelijk actie nodig
   is"; de controller levert alleen blokken met een aantal boven nul, dus staat hier nooit
   een lege container. Rustig gehouden: een dunne lijn, geen vlak en geen felle kleur (D-97
   "drie gelijke actiekaarten zonder felle kleur"). */
.actieblokken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  margin:var(--space-5) 0}
.actieblok{display:flex;flex-direction:column;gap:2px;padding:var(--space-4) var(--space-5);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:none;
  color:inherit;text-decoration:none}
.actieblok:hover{border-color:var(--bordeaux)}
.actieblok .kop{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  color:var(--muted)}
.actieblok .kop .icon{flex:none;width:18px;height:18px;color:var(--bordeaux)}
.actieblok>strong{font-family:var(--font);font-size:28px;font-weight:700;
  line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.actieblok .onder{font-size:12.5px;line-height:1.4;color:var(--muted)}
.actieblok .naar{display:flex;align-items:center;gap:4px;margin-top:var(--space-2);
  font-size:13px;font-weight:700;color:var(--bordeaux)}
.actieblok .naar .icon{width:14px;height:14px}

/* ---- 32.5c Bevindingen v13 (#4): de tegels waren hoger dan hun inhoud ----
   Twee regels uit de tijd vóór subgrid tellen hier mee: `min-height:2.7em` (een aanname van
   twee regels tekst) en de rijafstand die .grid.five van zijn ouder erft. Binnen een subgrid
   zijn die overbodig — de langste kop en de langste voetregel bepalen de rijhoogte al.
   Alleen hier losgelaten: op de schermen zonder subgrid (coachanalyse, organisatie,
   deelnemer) doen dezelfde regels hun werk nog.
   De derde selector hierin gold de vier kengetaltegels op /beheer. Die tegels zijn met T-83
   vervangen door .kerncijferrij hierboven, dus is de regel vervallen. */
.grid.five{row-gap:0}
.grid.five>.metric>span:first-child,
.grid.five>.metric .onder{min-height:0}

/* ---- 32.6 Secties, kolommen en filters ---- */
.sectiekop{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
/* v4.61 punt 18 (v4.61-A punt B1): de kop boven elke groep formats op /formats. De klasse stond
   er wel en had geen enkele regel — een toets in StylesheetTokensTest vond dat, en terecht: dan
   staat er een H2 in de standaardmaat van het sjabloon, los boven een lijst, zonder dat iets de
   groep bij elkaar houdt. Dezelfde maat en kleur als de andere sectiekoppen van dit platform
   (.meerinfo-kolommen h2), met lucht erboven zodat de ene groep ophoudt waar de volgende begint;
   de eerste kop staat strak onder het zoekveld. Bij een anker uit een terugknop (/formats#groep-7)
   springt de pagina hierheen, dus wat scroll-marge zodat de kop niet tegen de bovenrand plakt. */
.groepskop{margin:var(--space-6) 0 var(--space-3);color:var(--bordeaux);font-size:18px;
  scroll-margin-top:var(--space-5)}
.groepskop:first-of-type{margin-top:var(--space-4)}
.sectiekop .aantal{font-size:13px;font-weight:700;color:var(--muted)}
.sectiekop .naar{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--bordeaux);
  text-decoration:none}
.sectiekop .naar:hover{text-decoration:underline}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);
  align-items:start;margin-top:var(--space-5)}
.filterbalk{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap;
  margin-top:var(--space-4)}
.filterbalk .field{min-width:200px}
/* Keuze 9 (W-05.3#R1, 14-09-2026) gaf Filteren een eigen tweede regel, uitgelijnd met Zoeken. BK9-C
   trok dat door naar ELK lijstscherm met `flex:0 0 100%` — de knopgroep vulde de hele regel, dus
   stond de knop altijd op een eigen regel, ook als de rij ruim paste.

   KEUZE-9b en KEUZE-9c (18-09-2026, Simone) draaien dat terug: "T-135 is te breed uitgevoerd. De
   eigen regel was bedoeld voor één scherm met veel velden." Alleen het deelnemersscherm houdt hem;
   Auditlog, Organisaties, Formats, Leerroutes, Specials, Feedback en Uitnodigingen krijgen de knop
   weer naast de velden. En de vaste regel voor alle lijstschermen: "de knop staat naast de velden.
   Past de rij op 1280 pixels niet meer op één regel, dan gaat de knop naar een eigen regel eronder,
   links uitgelijnd met het eerste veld."

   Dat laatste vraagt geen eigen regel meer: `.filterbalk` heeft `flex-wrap:wrap`, dus de knopgroep
   loopt mee met de velden en valt vanzelf terug naar een eigen regel zodra de rij niet past — en een
   nieuwe flexregel begint op de linkerrand van de houder, waar ook het eerste veld begint.
   tests/e2e/specs/hr1-r34-filterknop.spec.js meet dat op 1280.

   Op /beheer/gebruikers is dit een grid (.deelnemersfilters hieronder); daar zijn flexwaarden zonder
   betekenis en bepaalt het eigen grid-area waar de groep staat. Dat scherm houdt dus zijn eigen
   regel, precies zoals KEUZE-9b vraagt. */
.filterbalk>.filterknoppen{display:flex;align-items:center;
  gap:var(--space-3);flex-wrap:wrap;justify-content:flex-start}

/* Eén uitzondering, en die is geen lijstscherm: het blok "Einddatum aanpassen" op het
   deelnemerdetail (RV-BB6-01) leent de opmaak van een filterbalk voor één veld met één knop. KEUZE-9b
   en -9c gaan over de knop Filteren op lijstschermen en zeggen hier niets over, dus blijft dat blok
   staan zoals het in HR1 is opgeleverd. */
.filterbalk>.filterknoppen.knop-onder{flex:0 0 100%}
.voetnoot{margin-top:var(--space-3);font-size:13.5px;color:var(--muted);max-width:80ch}

/* ---- 32.7 Regellijst: kaart met hairline-gescheiden regels ---- */
.regellijst,.balklijst,.aandachtlijst{background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);margin-top:var(--space-4);overflow:hidden}
.regellijst ul,.balklijst ul{margin:0;padding:0;list-style:none}
.regellijst li,.balklijst li{display:flex;align-items:center;gap:var(--space-4);padding:14px 20px;
  border-top:1px solid var(--line-soft)}
.regellijst li:first-child,.balklijst li:first-child{border-top:0}
.regellijst li:hover{background:var(--offwhite)}
.regellijst .wie{flex:1;min-width:0}
/* EH-BB1-05: hier staat een e-mailadres, en een adres is één lang woord zonder spaties.
   `min-width:0` laat het vak wel krimpen, maar het woord zelf brak niet, en daardoor schoof het
   toewijzingsdetail op 390px zijwaarts. `overflow-wrap:anywhere` breekt alleen wanneer het
   anders niet past — dezelfde keuze als bij `.module-kop strong`. */
.regellijst .wie strong{display:block;color:var(--ink);font-size:14.5px;overflow-wrap:anywhere}
.regellijst .wie span{display:block;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
/* De naam als link. Nodig omdat `a{color:inherit}` (regel 129) een link in een regel
   ononderscheidbaar maakt van gewone tekst: zonder onderstreping is een klikbare naam
   onvindbaar. De tekstkleur blijft --ink, dus het contrast van de regel verandert niet;
   de onderstreping is de hele affordance.

   Die onderstreping staat in --muted en NIET in --line. Eerste poging was --line, en op
   het scherm was er dan niets te zien: die haalt 1,22:1 (zie de notitie bij de
   filterbalk-rand verderop). Een affordance die je niet ziet is geen affordance. */
.regellijst .wie strong a{text-decoration:underline;text-decoration-color:var(--muted);
  text-underline-offset:3px}
.regellijst .wie strong a:hover{text-decoration-color:currentColor}
.regellijst .titel{flex:1;min-width:0;font-weight:700;color:var(--ink);font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.regellijst .meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
/* Vaste actiekolom: de knoppen beginnen op elke rij op dezelfde x, ook als de ene rij er twee
   heeft en de andere vier. Links uitgelijnd binnen het blok — rechts uitlijnen zou de laatste
   knop laten kloppen en de eerste juist niet, en dat is de knop die telt. Onder 900px neemt
   het bestaande flex-wrap het over. */
/* Wrappen binnen het blok: bij Ingevulde formats heeft een herhaald format vier knoppen
   (Verder bewerken · pdf · leeg word · Nieuw exemplaar) en die passen niet in 352px. Zonder
   wrap liep "Nieuw exemplaar" de kaart uit en was hij half onzichtbaar. De vaste breedte
   blijft, dus de eerste knop van elke rij begint nog steeds op dezelfde x. */
.regellijst .acties{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:352px}
.regellijst li>.button.secondary,.balklijst li>.button.secondary{flex:none;width:118px;
  justify-content:center}
/* Veldrijen op de formatpagina (T-33). Een <input> is inline, dus stonden label, hulptekst
   en keuzelijst naast elkaar in dezelfde regel en werd elke waarde halverwege afgekapt —
   "TerugkerendProjectIncid…" is niet te lezen en niet te controleren. Elke eigenschap krijgt
   nu zijn eigen regel; de marges (mb-2/mt-2) in de opmaak blijven het onderlinge wit doen,
   dus hier bewust geen gap. */
.regellijst li[data-veldrij]{align-items:flex-start}
.regellijst li[data-veldrij]>span{min-width:0}
.regellijst li[data-veldrij]>span+span{flex:0 1 18rem}
.regellijst li[data-veldrij] input:not([type=checkbox]),
.regellijst li[data-veldrij] select,
.regellijst li[data-veldrij] textarea{display:block;width:100%}

/* Verhoudingsbalk per regel */
.balklijst .wat{flex:1;min-width:0;font-weight:700;color:var(--ink);font-size:14.5px}
.balklijst .wat span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.balklijst .telling{font-family:var(--font);font-weight:600;font-size:21px;color:var(--ink);
  white-space:nowrap}
.balklijst .telling span{font-family:var(--font);font-size:13px;font-weight:400;color:var(--muted)}
.balk{display:block;flex:none;width:92px;height:7px;border-radius:999px;background:var(--line-soft);
  overflow:hidden}
.balk i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.balk.b i{background:var(--accent)}
.balk.g i{background:var(--yellow)}
.balk.n i{background:var(--grey)}

/* ---- 32.8 Aandachtspunt: samenvatting altijd zichtbaar, onderbouwing eronder ---- */
.punt-item{border-top:1px solid var(--line-soft)}
.punt-item:first-child{border-top:0}
.punt-item>summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-4);
  align-items:center;padding:14px 22px}
.punt-item>summary::-webkit-details-marker{display:none}
.punt-item>summary:hover{background:var(--offwhite)}
.punt-item .kern{flex:1;min-width:0}
.punt-item .kern strong{display:block;color:var(--ink);font-size:15.5px;
  font-family:var(--font);font-weight:600}
.punt-item .kern span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.punt-item .sinds{flex:none;width:118px;text-align:right;font-size:12.5px;font-weight:700;
  color:var(--muted)}
.punt-item .chev{flex:none;width:16px;height:16px;color:var(--grey-soft);transition:transform .15s ease}
.punt-item[open] .chev{transform:rotate(180deg)}
.stip{flex:none;width:9px;height:9px;border-radius:50%;background:var(--grey-soft)}
/* De stip volgt het sein: OverviewController zet 'hoog' bij sein 'danger' en 'midden' bij
   'warning'. W-01.1#R1 geeft die twee dezelfde kleuren als de statuspil ernaast —
   donkerrood voor "Actie nodig", geel voor "Aandacht". De stip staat nooit alleen: de
   betekenis staat in aria-label en in de tekst van het punt. */
.stip.hoog{background:var(--danger)}
.stip.midden{background:var(--yellow)}
.punt-uit{padding:2px 22px 20px 63px;max-width:96ch}
.punt-uit .feitregel{margin:0 0 10px;font-size:15px;color:var(--text)}
.punt-uit .verklaring{margin:0 0 14px;font-size:15px;color:var(--muted)}
.punt-uit .verklaring span{font-weight:700;color:var(--ink)}
.punt-uit .verklaring span::after{content:":"}
.punt-uit .actieregel{margin:0 0 16px;font-size:15px;color:var(--ink);
  border-left:3px solid var(--bordeaux);padding-left:14px}
.punt-uit .knopregel{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* ---- 32.10 Kleinere schermen ----
   De breekpunten van het platform (1050 / 780 / 480) blijven leidend; het mobiele
   menu, .sidebar.open en public/js/app.js hangen daaraan. De maatvoering komt uit
   het ontwerp. */
@media (max-width:1050px){
  :root{--sidebar-w:228px}
  /* R35 (B4, 18-09-2026): `minmax(0,1fr)` en niet `1fr`. `1fr` is een korte schrijfwijze voor
     `minmax(auto,1fr)`, en die auto-ondergrens laat de kolom niet kleiner worden dan de
     min-content van wat erin staat. Op `/beheer/aanvragen/{id}` en `/meldingen/{id}/open` staat in
     deze kolom een `dl.meta-list` met een e-mailadres en een factuurkenmerk; die maakten de kolom
     405px in een venster van 390 en lieten de pagina 27px zijwaarts schuiven. De basisregel
     hierboven (.duo, regel ~1162) doet het wel goed; deze media-regel gooide die bescherming weg.
     Gemeten met de ketenmeting in `04_bewijs/R35/B4/`: `div.duo` was 366px breed met een kolom
     van 405px. */
  .duo{grid-template-columns:minmax(0,1fr)}
  .grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .global-search{width:190px}
  /* H6 punt 1: hier stonden `.brand-logo{height:60px}` en `.merkzone{height:88px}`. Die
     twee waren een tweede bron van waarheid naast de basisregels, en precies daardoor klopte
     het logo alleen in vensters waar dit breekpunt of dat op hoogte aansloeg. De basisregels
     rekenen nu met --appbar-h en geven dezelfde 60/88; deze regels waren dus een herhaling
     die de fout verborg. */
  .appbar{padding-right:var(--space-5)}
}
@media (max-width:780px){
  :root{--appbar-h:68px}
  .appbar{padding:0 var(--space-4);gap:var(--space-2)}
  /* Onder 780px is de zijbalk een overlay; de tweedeling vervalt en de onderlijn
     loopt weer over de volle breedte. */
  .merkzone{width:auto;height:auto;align-self:center;padding-left:0}
  /* RV-S6-100 (H4): op de telefoon droeg .appbar de onderlijn zelf, omdat ::after daar uit
     staat. Allebei weg; ::after bestaat sinds deze ronde niet meer. */
  .appbar{border-bottom:0}
  .brand-logo{height:46px}
  .sidebar{padding-top:var(--space-4)}
  .punt-item .sinds{display:none}
  .punt-uit{padding-left:22px}
  .regellijst li,.balklijst li{flex-wrap:wrap}
  .regellijst li>.button,.balklijst li>.button{width:auto;flex:0 0 auto}
  .actieblokken{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid.five{grid-template-columns:1fr}
  /* T-15: "Op mobiel onder elkaar met subtiele scheidingslijnen." De verticale scheiding
     wordt een horizontale; het eerste cijfer houdt geen lijn boven zich. */
  .kerncijferrij{grid-template-columns:minmax(0,1fr)}
  .kerncijfer{padding-inline:0;padding-block:var(--space-3);border-inline-start:0;
    border-top:1px solid var(--line-soft)}
  .kerncijfer:first-child{padding-top:0;border-top:0}
}
@media (max-width:480px){
  .brand-logo{height:34px}
}

/* ---- 32.11 Omlijsting: inline styles vervangen ----
   Deze drie onderdelen stonden in resources/views/layouts/app.php met een
   style=""-attribuut. Ze zijn hier gescoopt zodat de layout schoon blijft. */
.onderhoudsbalk{background:var(--bordeaux);color:var(--op-merk);padding:.55rem 1rem;text-align:center;
  font-size:.9rem;line-height:1.35}
/* Demo-omgeving: vaste balk bovenaan elke pagina, ook op de inlogpagina. */
.demo-banner{background:var(--wine);color:var(--paper);padding:.32rem 1rem;text-align:center;font-size:.78rem;
  line-height:1.3;font-weight:600;box-shadow:0 1px 0 rgba(33,28,24,.12)}
.demo-banner-label{display:inline-block;background:rgba(251,250,248,.16);color:var(--paper);border-radius:999px;
  padding:.03rem .5rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  margin-right:.5rem;vertical-align:middle}
.demo-banner-tekst{vertical-align:middle;opacity:.92}
/* Demo-omgeving: eigen feedbackknop linksonder, bewust naast (niet over) de
   gewone Feedback-knop rechtsonder. */
.demo-feedback{position:fixed;left:16px;bottom:16px;z-index:120}
.demo-feedback>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px;background:var(--wine);color:var(--paper);border-radius:999px;padding:10px 16px;font-size:.9rem;
  font-weight:600;box-shadow:0 4px 14px rgba(33,28,24,.22)}
.demo-feedback>summary::-webkit-details-marker{display:none}
.demo-feedback>summary .icon{width:16px;height:16px;color:var(--paper)}
.demo-feedback form{position:absolute;left:0;bottom:52px;width:300px;background:var(--kaart);
  border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(33,28,24,.18)}
.demo-feedback label{display:block;font-weight:600;margin-bottom:6px;color:var(--wine)}
.demo-feedback textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;
  font-family:inherit;font-size:.9rem;color:var(--ink)}
.demo-feedback .button{margin-top:8px;width:100%}

/* ==========================================================================
   33. Herontwerp levering 2 — deelnemerschermen, v3.1, 21 augustus 2026
   ==========================================================================
   De vijf schermen van de deelnemer uit het ontwerppakket (secties 19, 22 en 28
   van ontwerp/assets/improve-online.css v2.6): startscherm, leerroute, module,
   kennismodules en een kennismodule lezen.

   Zelfde regels als bij sectie 32:
   1. Nieuwe opmaak staat HIER, onderaan, niet tussen de bestaande secties.
   2. Tokennamen zijn Engels (zie het tokenblok bovenaan). Het ontwerp gebruikt
      Nederlandse namen; die zijn 1-op-1 vertaald.
   3. .icon krijgt nooit een globale maat — per component gescoopt.

   Bewust NIET overgenomen uit het ontwerp:
   - .sein          -> het platform heeft .status met dezelfde toestanden (sectie 32)
   - .checklist en .downloadkeuze -> horen bij de formatschermen, die niet in deze
                       levering zitten; opmaak zonder scherm is dode CSS
   - .doorgaan      -> de doorgaankaart is vervangen door de knop Verder in de
                       paginakop, zodat er één primaire knop per pagina blijft
   ========================================================================== */

/* ---- 33.1 Snelkoppelingen zonder beeld (startscherm) ---- */
.snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);
  margin-top:var(--space-4)}
.snel a{display:block;background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:var(--space-5);text-decoration:none}
.snel a:hover{border-color:var(--bordeaux);box-shadow:var(--shadow-soft)}
.snel .icon{width:24px;height:24px;color:var(--bordeaux);display:block;margin-bottom:10px}
.snel strong{display:block;font-family:var(--font);font-size:17px;color:var(--ink)}
.snel span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

/* ---- 33.2 Kruimelpad terug ---- */
.kruimel{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--space-3);
  font-size:13.5px;font-weight:700;color:var(--bordeaux);text-decoration:none}
.kruimel:hover{text-decoration:underline}
.kruimel .icon{width:15px;height:15px}

/* ---- 33.3 Voortgang van een leerroute of module, één regel ---- */
.voortgangregel{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px var(--space-5);margin-top:var(--space-4)}
.voortgangregel .balk{width:240px}
.voortgangregel span{font-size:14px;color:var(--muted)}
.voortgangregel strong{color:var(--ink)}
/* Een balk die de resterende ruimte vult in plaats van de vaste 92px van .balk. */
.balk.breed-vol{width:240px}

/* ---- 33.5 De stappen binnen een module ---- */
.stappen{margin-top:var(--space-4);background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden}
.stappen ul{margin:0;padding:0;list-style:none}
.stappen li{display:flex;align-items:center;gap:var(--space-4);padding:16px var(--space-5);
  border-top:1px solid var(--line-soft)}
.stappen li:first-child{border-top:0}
.stappen li:hover{background:var(--offwhite)}
.stappen .soort{flex:none;width:38px;height:38px;border-radius:var(--radius-md);display:grid;
  place-items:center;background:var(--sand);color:var(--bordeaux)}
.stappen .soort .icon{width:19px;height:19px}
.stappen li.af .soort{background:var(--success-soft);color:var(--success)}
.stappen .wat{flex:1;min-width:0}
.stappen .wat strong{display:block;color:var(--ink);font-size:15px}
.stappen .wat span{display:block;font-size:13px;color:var(--muted)}
.stappen li>.button{flex:none;width:118px;justify-content:center}
.stappen li.af .wat strong{color:var(--muted)}

/* ---- 33.6 Navigatie onder aan een module ---- */
.stapnav{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.stapnav .verder{margin-left:auto}
.stapnav .button .icon{width:15px;height:15px}

/* ---- 33.7 Keuzepillen: filteren met een link in plaats van een knop ---- */
.keuzepillen{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.keuzepillen .pil{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--kaart);
  color:var(--text);text-decoration:none}
.keuzepillen .pil:hover{border-color:var(--bordeaux)}
.keuzepillen .pil.aan{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--op-merk)}
.keuzepillen .pil.aan .klein{color:rgba(251,250,248,.8)}

/* ---- 33.8 Kennismodules: groepskop per module en tegel per regel ---- */
.modulekop{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  margin:var(--space-5) 0 0}
.modulekop strong{font-family:var(--font);font-weight:600;font-size:16px;color:var(--ink)}
.modulekop span{font-size:13px;color:var(--muted)}
.regellijst .soorttegel{flex:none;width:44px;height:44px;border-radius:var(--radius-md);display:grid;
  place-items:center;background:var(--sand);color:var(--accent)}
.regellijst .soorttegel .icon{width:21px;height:21px}
.regellijst li.gelezen .soorttegel{background:var(--success-soft);color:var(--success)}

/* ---- 33.9 Een kennismodule lezen ---- */
/* Ankernavigatie boven de leestekst. */
.ankers{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px var(--space-5);margin-top:var(--space-4)}
.ankers .op{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--muted)}
.ankers a{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;font-size:14px;
  font-weight:700;color:var(--ink)}
.ankers a span{font-family:var(--font);color:var(--bordeaux);font-size:13px}
.ankers a:hover{color:var(--bordeaux)}

/* Begrensde regellengte: boven ongeveer 72 tekens wordt lezen op een breed scherm
   vermoeiend. De opmaak hieronder geldt alleen binnen .leestekst, zodat de HTML uit
   HtmlSanitizer (h2/h3/p/ul/ol/blockquote/strong/em/a) er zonder eigen klassen goed uitziet. */
.leestekst{max-width:72ch;margin-top:var(--space-5)}
.leestekst h2{font-size:24px;margin:var(--space-6) 0 var(--space-3)}
.leestekst h2:first-child{margin-top:0}
.leestekst h3{font-size:18px;margin:var(--space-5) 0 var(--space-2)}
.leestekst p{font-size:16px;line-height:1.65;margin:0 0 var(--space-3);color:var(--text)}
.leestekst ul,.leestekst ol{margin:0 0 var(--space-4);padding-left:26px}
.leestekst ul{padding-left:0;list-style:none}
.leestekst ul li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16px;
  line-height:1.6;color:var(--text)}
.leestekst ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--bordeaux)}
.leestekst ol li{margin-bottom:12px;font-size:16px;line-height:1.6;color:var(--text)}
.leestekst blockquote{margin:0 0 var(--space-4);padding:2px 0 2px var(--space-4);
  border-left:3px solid var(--bordeaux);font-size:16px;line-height:1.6;color:var(--ink)}
.leestekst a{color:var(--bordeaux);font-weight:600}
.leestekst .callout,.leestekst .note,.leestekst .warning{background:var(--offwhite);
  border:1px solid var(--line-soft);border-left:3px solid var(--bordeaux);
  border-radius:var(--radius-md);padding:var(--space-4);margin:0 0 var(--space-4)}
.leestekst .warning{border-left-color:var(--warning)}

/* Aangeleverde HTML houdt zijn eigen opmaak en gaat ongewijzigd in een frame. */
.kennisframe{padding:0;overflow:hidden;margin-top:var(--space-4)}
.kennisframe iframe{display:block;width:100%;height:calc(100vh - 240px);min-height:560px;
  border:0;background:var(--kaart)}

/* Voetregel van een leesscherm. */
.leesvoet{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line-soft)}
.leesvoet .verder{margin-left:auto}
.leesvoet .button .icon{width:15px;height:15px}

/* ---- 33.10 Kleinere schermen ----
   Onder 1100px passen vier snelkoppelingen niet meer naast elkaar; onder 900px vouwen de
   lijstregels zodat de knop onder de tekst komt in plaats van hem plat te drukken. */
@media (max-width:1100px){
  .snel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .snel{grid-template-columns:1fr}
  .stappen li{flex-wrap:wrap}
  .stappen li>.button{width:auto}
  .voortgangregel .balk,.balk.breed-vol{width:100%}
  .stapnav .verder,.leesvoet .verder{margin-left:0}
  .kennisframe iframe{height:70vh}
}
@media (max-width:560px){
  .stappen li{padding:14px var(--space-4)}
  .ankers{gap:var(--space-3)}
  /* Op een telefoon werd de tekstkolom tussen nummer, label en knop platgedrukt tot
     één woord per regel. Nummer en tekst vullen nu de eerste regel; het label en de
     knop zakken samen naar de tweede. */
  .stappen .wat{flex:1 1 calc(100% - 54px)}
  .stappen .status{margin-left:52px}
  .stappen li>.button{margin-left:auto}
  /* Zelfde bij de lijst met een verhoudingsbalk (startscherm) en de regellijst
     (kennismodules): tekst op de eerste regel, de rest eronder. */
  .balklijst li,.regellijst li{flex-wrap:wrap}
  .balklijst .wat{flex:1 1 100%}
  .regellijst .wie{flex:1 1 calc(100% - 60px)}
  .balklijst li>.button.secondary,.regellijst li>.button.secondary{margin-left:auto}
  .regellijst .status{margin-left:60px}
}

/* ==========================================================================
   34. Herontwerp levering 3 — de digitale werkplaats, v3.2, 22 augustus 2026
   ==========================================================================
   De vier formatschermen uit het ontwerppakket: Mijn formats (met en zonder
   ingevulde formats), de bibliotheek Formats en een format invullen. Uit
   ontwerp/assets/improve-online.css v2.6 komen hier de secties die bij levering 2
   bewust zijn overgeslagen omdat er nog geen scherm bij hoorde: de checklist, de
   downloadkeuze, de melding, de opslagstatus en het invulblok.

   Zelfde regels als bij sectie 32 en 33:
   1. Nieuwe opmaak staat HIER, onderaan, niet tussen de bestaande secties.
   2. De tokennamen zijn Engels; de Nederlandse namen uit het ontwerp zijn
      1-op-1 vertaald.
   3. .icon krijgt nooit een globale maat — per component gescoopt.

   Bewust NIET overgenomen uit het ontwerp:
   - .sein          -> het platform heeft .status met dezelfde toestanden (sectie 32)
   - .leeg          -> het platform heeft .empty-state (sectie 32)
   - table.invul met min-width:840px -> het ontwerp verving die tabel zelf al door
                       .invulblok (ontwerp sectie 23, "invulschermen zonder
                       horizontaal schuiven"); alleen die vorm staat hier
   - de style-attributen uit het ontwerp (margin-top, justify-content) -> die zijn
                       hier klassen geworden (.mt-4 bestond al, .knopregel.midden is nieuw)
   ========================================================================== */

/* ---- 34.1 Melding boven een scherm ---- */
.melding{border-radius:var(--radius-md);padding:var(--space-4);margin-top:var(--space-4);
  font-size:14.5px}
.melding.uitleg{background:var(--offwhite);border:1px solid var(--line);color:var(--text)}
.melding.attentie{display:flex;gap:var(--space-3);align-items:flex-start;
  background:var(--danger-soft);border:1px solid rgba(188,0,14,.30);color:var(--danger)}
.melding.attentie .icon{flex:none;width:20px;height:20px;color:var(--danger);margin-top:1px}
.melding.attentie strong{color:var(--danger)}
.melding p{margin:0}

/* ---- 34.2 Knopregel: losse knoppen onder elkaar blok ----
   Bestond alleen binnen .punt-uit; hier als zelfstandige klasse, zodat een
   style-attribuut op de knoppenrij niet meer nodig is. */
.knopregel{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-top:var(--space-4)}
.knopregel.midden{justify-content:center}
/* R35 (B4, 18-09-2026): een <select> is een flexitem met `min-width:auto`, en zijn intrinsieke
   breedte groeit mee met de LANGSTE optie — niet met de gekozen. Op `/beheer/gebruikers/{id}` staat
   in deze regel de keuzelijst met organisaties; een naam van rond de veertig tekens maakte het item
   364px breed en duwde de pagina op 390px 4px buiten beeld. Met `min-width:0` mag het item krimpen
   en kapt de browser de zichtbare optie af; `flex-wrap:wrap` hierboven zet de knop dan onder de
   lijst. Zelfde ingreep en zelfde reden als `.statusform select{min-width:0}` verderop.
   Deze regel raakt één plek: `resources/views/admin/user-detail.php` is de enige view met een
   <select> als direct kind van .knopregel (users.php, alle-formats.php en werkplaats-mijn.php
   hebben hun keuzelijsten in een .filterbalk, niet hierin). */
.knopregel>select{min-width:0;max-width:100%}
.knopregel .button .icon{width:15px;height:15px}

/* ---- 34.3/34.4 vervallen in fase E ----
   .checklist (vinkjesrij voor vaste formats) en .downloadkeuze (uitklapmenu achter
   Downloaden) stonden hier. Paragraaf 8 van het overdrachtspakket wees ze allebei af:
   Formats en Ingevulde formats moeten dezelfde rijopbouw en dezelfde bullet hebben — dat
   is nu .regellijst met .soorttegel — en "`Downloaden` mag de layout niet laten
   verspringen", wat een uitklapmenu in een rij per definitie doet. De downloads staan nu
   als gewone knoppen naast elkaar. Opmaak zonder scherm is dode CSS, dus hij is weg. */

/* ---- 34.5 Opslagstatus rechtsboven het invulscherm ----
   Groen als het bewaard is, grijs terwijl het loopt, bordeaux als het misging: dat
   laatste moet een deelnemer ZIEN, want er is geen knop om het alsnog te doen. */
.naast{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:flex-end}
.opslag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--success);white-space:nowrap}
.opslag .icon{flex:none;width:15px;height:15px}
/* Geen vinkje zolang er niets bewaard is: dat zou "opgeslagen" suggereren terwijl het
   scherm juist zegt dat je nog niet begonnen bent. */
.opslag.bezig{color:var(--muted)}
.opslag.bezig .icon{display:none}
.opslag.fout{color:var(--danger);white-space:normal}

/* ---- 34.6 Invulblok: één blok per regel, velden die meevouwen ----
   Geen tabel met een min-width: die zou het scherm horizontaal laten schuiven zodra
   iemand een zin in een veld typt. */
.invulblok{margin-top:var(--space-4);background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden}
.invulrij{padding:16px var(--space-5);border-top:1px solid var(--line-soft)}
.invulrij:first-child{border-top:0}
.invulrij .kop{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin-bottom:10px}
.invulrij .kop strong{font-size:15.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.invulrij .kop .status{margin-left:auto}
.invulrij .rijvoet{display:flex;justify-content:flex-end;margin-top:10px}
.invulrij .rijvoet .button .icon{width:14px;height:14px}

.vragen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-3)}
.vragen .vraag{min-width:0}
.vragen .vraag.breed{grid-column:1 / -1}
.vragen .vraag label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:4px}
/* Bevinding 31: "lettertypegrootte in de velden zelf kleiner maken (veel te groot nu)" —
   het gaat om de ingevulde waarde op het invulscherm van een format. Deze velden hadden geen
   eigen font-size en erfden daardoor via `button,input,select,textarea{font:inherit}` de 16px
   van body (sectie 32.1), terwijl hun labels op 12,5px staan. Het ontwerp van ImProve voor
   precies dit scherm schrijft 14px voor. De min-height van 44px blijft: dat is de
   aanraakoppervlakte en staat los van de lettergrootte. */
.vragen .vraag input,.vragen .vraag select,.vragen .vraag textarea{width:100%;min-height:44px;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--kaart);
  color:var(--ink);outline:none;font-size:14px}
.vragen .vraag textarea{resize:vertical}
.vragen .vraag input:focus,.vragen .vraag select:focus,.vragen .vraag textarea:focus{
  border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.vragen .vraag input:disabled,.vragen .vraag select:disabled,.vragen .vraag textarea:disabled{
  background:var(--offwhite);color:var(--muted)}
.vragen .vraag .hulp{margin:5px 0 0;font-size:12px;color:var(--muted)}

/* T-115 — een aankruisvakje. De regel hierboven geeft élk input-element 100% breedte en
   44px hoogte; een checkbox werd daardoor een uitgerekt grijs vlak met zijn tekst erboven,
   en tientallen daarvan onder elkaar lezen niet als een checklist. Hier staat het vakje
   vóór de tekst, houdt het zijn eigen maat, en is de tekst gewone leestekst in plaats van
   een klein grijs veldlabel. Het aanraakoppervlak blijft: het hele label is klikbaar en de
   regel is 44px hoog. */
.vragen .vraag.vinkje{grid-column:1 / -1;display:flex;align-items:flex-start;flex-wrap:wrap;
  gap:0 var(--space-2);min-height:44px;padding:6px 0}
.vragen .vraag.vinkje input[type=checkbox]{order:-1;flex:none;width:20px;min-width:20px;
  height:20px;min-height:20px;margin:2px 0 0;padding:0;accent-color:var(--bordeaux)}
.vragen .vraag.vinkje label{flex:1 1 0;min-width:0;margin:0;font-size:14px;font-weight:400;
  color:var(--ink);line-height:1.5;cursor:pointer}
.vragen .vraag.vinkje .hulp{flex:1 1 100%;margin-left:calc(20px + var(--space-2))}

/* T-111 — een aangeboden waarde uit een eerder format. Bewust een eigen kader en niet de
   grijze hulptekst hierboven: dit is geen uitleg maar een VOORSTEL dat de deelnemer kan
   aannemen of laten liggen, en die keuze moet je zien staan. De knop staat op dezelfde regel
   en wikkelt eronder zodra de kolom te smal wordt. */
.vragen .vraag .hulp.overname{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  margin-top:var(--space-2);padding:var(--space-2) var(--space-3);
  border:1px solid var(--line);border-left:3px solid var(--bordeaux);border-radius:var(--radius-md);
  background:var(--offwhite);color:var(--ink)}
.vragen .vraag .hulp.overname .button{margin-left:auto}

/* T-116 — meerdere ingevulde bronregels. Hetzelfde kader als het enkele voorstel hierboven,
   maar met de regels onder elkaar zodat ze te vergelijken zijn. Er staat er bewust geen
   voorgeselecteerd: de keuze is van de deelnemer, en een aangevinkte optie is al een keuze. */
.vragen .vraag .hulp.overname.keuzebron{display:block;margin:var(--space-2) 0 0}
.vragen .vraag .overname.keuzebron legend{padding:0;font-size:12px;font-weight:600;color:var(--muted)}
.vragen .vraag .bronkeuzes{list-style:none;margin:var(--space-2) 0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-2)}
.vragen .vraag .bronkeuzes .keuze{display:flex;align-items:flex-start;gap:var(--space-2);
  font-size:13px;color:var(--ink);cursor:pointer}
.vragen .vraag .bronkeuzes input[type=radio]{flex:none;width:16px;min-width:16px;height:16px;
  min-height:16px;margin:3px 0 0;padding:0;accent-color:var(--bordeaux)}
.vragen .vraag .bronkeuzes small{display:block;font-size:11.5px}

/* ---- 34.7 Voetregel van een invulscherm ---- */
.formvoet{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)}
.formvoet .rechts{margin-left:auto;display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}

/* ---- 34.7b Herkomst van een herhaald format ----
   .punt-item .sinds is 118px breed, want op het beheeroverzicht staat daar een datum.
   Hier staat de module ("Module 04, Voortgang vasthouden") en die brak af tot drie
   regels. Alleen binnen de formatlijst krijgt de kolom dus meer ruimte. */
.formatlijst .punt-item .sinds{width:auto;max-width:220px;flex:none}

/* ---- 34.7c Een lange formatnaam als paginatitel ----
   "Stuurmomentcanvas" in 36px past op een telefoon niet op één regel en duwde de pagina
   twee pixels breed, met een horizontale schuifbalk tot gevolg. break-word breekt alleen
   een woord dat er in zijn eentje niet op past; kortere titels veranderen niet. */
.page-head h1{overflow-wrap:break-word}

/* ---- 34.8 Kleinere schermen ----
   Onder 900px vouwen de lijstregels zodat de knoppen onder de tekst komen in plaats van
   platgedrukt te worden. De regels voor .checklist en .downloadkeuze zijn met die
   componenten meeverdwenen in fase E (zie 34.3/34.4); .regellijst vouwt al in sectie 32. */
@media (max-width:900px){
  .naast{justify-content:flex-start}
  .formvoet .rechts{margin-left:0;width:100%}
}
@media (max-width:560px){
  .invulrij{padding:14px var(--space-4)}
  .vragen{grid-template-columns:1fr}
}

/* ==========================================================================
   35. Herontwerp levering 3 — rapportage en signalen, v3.2, 22 augustus 2026
   ==========================================================================
   De vier tabbladen van de rapportage (ontwerp/beheer/rapportage.php) en de drie
   aanvullingen op het beheeroverzicht: het verbergformulier bij een aandachtspunt,
   het soort bij feedback en de kengetallen over actief gebruik.

   Zelfde regels als bij sectie 32 en 33:
   1. Nieuwe opmaak staat HIER, onderaan, niet tussen de bestaande secties.
   2. Bestaande klassenamen blijven werken; het ontwerp hergebruikt waar mogelijk
      wat er al staat (.metric, .data-table, .empty-state, .status, .voetnoot).
   3. .icon krijgt nooit een globale maat — per component gescoopt.

   Bewust NIET overgenomen uit het ontwerp:
   - .sein            -> het platform heeft .status met dezelfde toestanden (sectie 32)
   - .tabs met role=tablist en JavaScript -> de tabbladen zijn links met ?tab=, zodat
                         het scherm zonder JavaScript werkt en er geen verborgen
                         inhoud in de pagina staat
   - .grafiek (lijndiagram) -> de weekreeks staat als staven; een lijn suggereert een
                         doorlopende meting, en de meting begint op een datum
   - .op / .neer / .vlak als losse klassen -> .vlak botst met de staafhoogte in
                         .weekstaven; de trendklassen heten hier .trend-*
   ========================================================================== */

/* ---- 35.1 Tabbladen ----
   Links, geen knoppen: elk tabblad heeft een eigen adres en is deelbaar. */
.rap-tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--line);
  margin:var(--space-5) 0 var(--space-4);overflow-x:auto}
.rap-tab{flex:none;padding:0 2px 12px;font-size:14.5px;font-weight:700;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.rap-tab:hover{color:var(--ink)}
.rap-tab.actief{color:var(--bordeaux);border-bottom-color:var(--bordeaux)}
.rap-tab:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px;border-radius:4px}

/* ---- 35.2 Bevinding ----
   Twee vlakken boven elkaar. Bovenin staat wat GEMETEN is: de categorie, de bevinding
   in één zin, en de onderbouwing eronder. In het getinte vlak eronder staat wat
   AANGENOMEN en VOORGESTELD wordt: de mogelijke verklaring en de aanbevolen actie,
   met de knop erbij.

   Die scheiding is de kern van dit blok. De voetnoot eronder zegt het met zoveel
   woorden — "het feit is gemeten, de verklaring is een aanname en de actie is een
   voorstel" — maar tot 31-8-2026 stonden die drie als gelijkwaardige rijen in één
   definitielijst, waardoor een aanname er net zo hard uitzag als een meting. Op een
   scherm dat iemand aanzet een klant te bellen is dat verschil het belangrijkste wat
   de kaart te vertellen heeft.

   De categorie stond links in een eigen kolom van 132px; daaronder bleef een lege
   strook over ter hoogte van de hele kaart. Hij staat nu boven de titel, zodat de
   tekst de volle breedte krijgt en dan pas wordt afgekapt op een leesbare maat. */
.bevindingen{display:grid;gap:var(--space-4)}
.bevinding{background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden}
.bevinding .bovenkant{padding:var(--space-5) var(--space-5) var(--space-4)}
.bevinding .label{display:inline-block;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 11px;
  text-align:center;background:var(--soft-grey);color:var(--grey-dark);
  margin-bottom:var(--space-2)}
.bevinding .label.cat-organisatie{background:var(--info-soft);color:var(--info)}
/* K6 (T-131, W-28): een transparante variant van bordeaux #7B0041 (--wine), op papier vrijwel
   gelijk aan de eerdere losse kleur, die niet in het palet stond. --sand (de keuze van 11A)
   zou dit label gelijk maken aan .cat-zoekgedrag hieronder; dan zijn twee categorieën niet
   meer te onderscheiden. De alfawaarde is uitvoering, geen ontwerpbesluit. */
.bevinding .label.cat-leerroute{background:rgba(123,0,65,.06);color:var(--bordeaux)}
.bevinding .label.cat-content{background:var(--warning-soft);color:var(--warning)}
.bevinding .label.cat-simulatie{background:var(--success-soft);color:var(--success)}
.bevinding .label.cat-zoekgedrag{background:var(--sand);color:var(--bordeaux)}
.bevinding .feit{display:block;font-family:var(--font);font-size:17px;font-weight:700;
  color:var(--ink);line-height:1.3;max-width:60ch}
/* De onderbouwing is de meting zelf en heeft daarom geen label nodig: die regel ÍS
   het bewijs voor de zin erboven. */
.bevinding .gemeten{margin:var(--space-2) 0 0;font-size:14px;color:var(--muted);
  line-height:1.5;max-width:74ch}
.bevinding .duiding{background:var(--offwhite);border-top:1px solid var(--line-soft);
  padding:var(--space-4) var(--space-5) var(--space-5)}
/* 150px is de breedte van "Mogelijke verklaring" plus lucht. Vast, want `auto` liet de
   kolom meebewegen met de langste tekst en dan verspringt de inspringing per kaart. */
/* De definitielijst met "Mogelijke verklaring" en "Aanbevolen actie" stond hier; D-121 laat
   in een signaal alleen het gemeten feit en de link naar de opvolgpagina toe. De onderrand
   draagt nu alleen nog die knop. */
.bevinding .knopregel{margin:0}

/* ---- 35.3 Uitklapkaart ----
   Dezelfde opbouw als .punt-item op het beheeroverzicht, maar als losse kaart:
   in de rapportage staan ze onder elkaar met een tabel ertussen. */
.uitklapkaart{background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);margin-top:var(--space-4);overflow:hidden}
.uitklapkaart>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.uitklapkaart>summary::-webkit-details-marker{display:none}
.uitklapkaart>summary:hover{background:var(--offwhite)}
.uitklapkaart>summary:focus-visible{outline:2px solid var(--bordeaux);outline-offset:-2px}
.uitklapkaart .naam{font-family:var(--font);font-size:16px;font-weight:700;color:var(--ink)}
.uitklapkaart .mee{font-size:13.5px;color:var(--muted)}
.uitklapkaart .chev{flex:none;width:16px;height:16px;margin-left:auto;color:var(--grey-soft);
  transition:transform .15s ease}
.uitklapkaart[open] .chev{transform:rotate(180deg)}
.uitklapkaart .uitklap{padding:0 var(--space-5) var(--space-5);border-top:1px solid var(--line-soft)}
.uitklapkaart .uitklap>*:first-child{margin-top:var(--space-4)}
.conclusie{margin:0;font-size:14.5px;color:var(--text);line-height:1.55;max-width:80ch}

/* Vier korte feiten naast elkaar, boven de onderbouwing. */
.feitenrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);
  margin-top:var(--space-4)}
.feit-kaart{background:var(--offwhite);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.feit-kaart span{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.feit-kaart b{display:block;font-family:var(--font);font-size:19px;color:var(--ink);
  margin-top:2px}

/* Lijst met aanbevolen acties: tekst links, knop rechts. */
.acties{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2)}
.acties li{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  background:var(--offwhite);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4)}
.acties li>span:first-child{flex:1;min-width:0}
.acties b{display:block;font-size:14.5px;color:var(--ink)}
.acties b+span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.acties li>.button{flex:none;margin-left:auto}

/* ---- 35.4 Melding met uitleg of een privacyregel ---- */
.melding{border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);
  font-size:14px;line-height:1.55;margin-top:var(--space-4);max-width:100%}
.melding strong{color:var(--ink)}
.melding.uitleg{background:var(--info-soft);border:1px solid var(--line);color:var(--text)}
.melding.privacy{background:var(--sand);border:1px solid var(--line);color:var(--text)}
.regellijstje{margin:var(--space-2) 0 0;padding-left:1.15em}
.regellijstje li{margin-top:2px}

/* ---- 35.4b Twee gebruikscijfers naast elkaar (beheeroverzicht) ----
   Twee tegels in een grid van vijf oogt als een fout; twee tegels op normale breedte,
   links uitgelijnd, leest als een bewuste keuze. */
.grid.gebruikscijfers{grid-template-columns:repeat(2,minmax(0,340px))}
@media (max-width:780px){.grid.gebruikscijfers{grid-template-columns:1fr}}

/* ---- 35.5 Actieve deelnemers per week ----
   Staven, geen lijn. Alleen gemeten weken; de hoogte komt uit de gegevens en is
   daarom de enige plek met een style-attribuut. */
.weekstaven{display:flex;align-items:flex-end;gap:var(--space-2);height:190px;
  background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-5) var(--space-4);overflow-x:auto}
.weekstaven .week{flex:1 1 0;min-width:34px;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%;gap:6px}
.weekstaven .waarde{font-size:12px;font-weight:700;color:var(--muted)}
.weekstaven .vlak{width:100%;max-width:44px;background:var(--line);border-radius:6px 6px 0 0;
  min-height:4px}
.weekstaven .nu .vlak{background:var(--accent)}
.weekstaven .nu .waarde{color:var(--bordeaux)}
.weekstaven .wk{font-size:11px;color:var(--muted);white-space:nowrap}

/* ---- 35.6 Tabelvarianten uit het ontwerp ----
   .num zet een getalkolom rechts uit, .titel is de eerste kolom met een regel eronder,
   .wikkel laat een analysekolom afbreken in plaats van de tabel op te rekken. */
.data-table.compact th,.data-table.compact td{padding:10px 14px}
.data-table th.num,.data-table td.num{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.data-table td.titel{font-weight:700;color:var(--ink)}
.data-table td .klein{display:block;font-size:12px;font-weight:400;color:var(--muted);
  margin-top:2px}
.data-table td.num .klein{text-align:right}
.data-table th.wikkel,.data-table td.wikkel{white-space:normal;min-width:180px;
  font-weight:400;color:var(--text)}
.data-table code{font-size:12.5px;background:var(--canvas);border-radius:5px;padding:1px 5px}

/* Trendkleuren in een tabelcel. Kleur is een OORDEEL, geen richting: groen = beter,
   rood = aandacht, neutraal = geen van beide. Nooit alléén kleur — er staat altijd een
   + of − bij. */
.trend-op{color:var(--success);font-weight:700}
.trend-neer{color:var(--danger);font-weight:700}
.trend-neutraal{color:var(--muted);font-weight:700}

/* ---- 35.7 Aandachtspunt verbergen (beheeroverzicht) ----
   Een POST-formulier met een CSRF-token, geen link: het verandert iets. */
.verbergform{display:inline}
.punt-uit .knopregel{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.verborgen-melding{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  font-size:13.5px;color:var(--muted);margin-top:var(--space-3)}

/* ---- 35.8 Soort bij feedback ----
   Drie radioknoppen als pillen. De radio zelf blijft in de DOM (en dus bedienbaar met
   het toetsenbord); alleen de standaardweergave is vervangen. */
.fb-soort-groep{border:0;padding:0;margin:0}
.fb-soort-groep legend{padding:0;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:2px}
.fb-soort{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:2px 0 var(--space-3)}
.fb-soort label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--text);
  cursor:pointer;background:var(--kaart)}
.fb-soort input{margin:0;accent-color:var(--bordeaux)}
.fb-soort label:hover{border-color:var(--bordeaux)}
.fb-soort input:focus-visible{outline:2px solid var(--bordeaux);outline-offset:2px}
.fb-soort input:checked+span{color:var(--bordeaux);font-weight:800}
.soort-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;
  font-size:11px;font-weight:800;letter-spacing:.03em;background:var(--soft-grey);
  color:var(--grey-dark);white-space:nowrap}
.soort-badge.probleem{background:var(--danger-soft);color:var(--danger)}
.soort-badge.suggestie{background:var(--success-soft);color:var(--success)}
.soort-badge.vraag{background:var(--info-soft);color:var(--info)}
/* Statusformulier in de feedbacklijst; stond als style-attribuut in de view. */
.statusform{display:flex;gap:6px;align-items:center}

/* Werklijst v3.1 blok E: een knop met eronder de korte regel die zegt wat de deelnemer ervan
   merkt. Op /beheer/modules/{id} staan Publiceren, Terug naar concept en Archiveren naast
   elkaar in één .knopregel; zonder deze kolom zou elke zin achter de knop belanden en was niet
   te zien welke zin bij welke knop hoort. De maximumbreedte houdt de regel leesbaar (±60
   tekens) en voorkomt dat twee paren op een breed scherm tegen elkaar aan lopen. */
.knop-met-uitleg{display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-1);max-width:46ch}
.knop-met-uitleg>small{line-height:1.4}

/* Hetzelfde in het actiemenu van dit scherm: icoon links, daarnaast het label met zijn regel
   eronder. Alleen met .met-uitleg erbij, want het gedeelde .actiemenu staat op meer schermen. */
.account-panel[data-uitleg]{width:330px}
.account-panel[data-uitleg] a,
.account-panel[data-uitleg] button{align-items:flex-start}
.account-panel[data-uitleg] svg{margin-top:2px;flex:none}
.account-panel[data-uitleg] .menuregel{display:flex;flex-direction:column;gap:2px}
.account-panel[data-uitleg] .menuregel small{color:var(--muted);font-size:11.5px;line-height:1.4;
  font-weight:400;white-space:normal}
/* Op een telefoon is 330px breed plus `right:0` net te veel: het paneel hangt dan links
   buiten het scherm (gemeten: x=-68 op 390). Daar hangt het aan de linkerkant van de knop. */
@media (max-width:480px){
  .account-panel[data-uitleg]{right:auto;left:0;width:min(330px, calc(100vw - 48px))}
}

/* T-117 — de verplichte keuze Correctie of Inhoudelijke wijziging
   (resources/views/partials/wijzigingsoort.php). Het volle blok erft de opmaak van
   .veldgroep; alleen de compacte vorm heeft eigen regels nodig, want die staat in een
   knoppenrij naast een bestandskiezer en mag daar niet overheen lopen. */
.wijzigingsoort.compact{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.wijzigingsoort.compact select,.wijzigingsoort.compact input{max-width:260px;min-width:0;
  border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--kaart);
  color:var(--ink);font-size:13px;outline:none}
.wijzigingsoort.compact select:focus,.wijzigingsoort.compact input:focus{
  border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}

/* ---- 35.8b Sectiekop met een toelichting ernaast ----
   .section-title zet de kop links en de toelichting rechts. Op een smal scherm knijpt dat
   beide plat; alleen op de rapportage zakt de toelichting daarom onder de kop. De klasse
   staat er apart bij zodat bestaande schermen ongemoeid blijven. */
@media (max-width:900px){
  .rap-kop{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .rap-kop .lead{max-width:none;margin-top:0}
}

/* ---- 35.9 Kleinere schermen ----
   De rapportage is een breed scherm; op elke breedte mag alleen een tabel binnen zijn
   eigen .table-scroll schuiven, nooit de pagina zelf. */
@media (max-width:1100px){
  .feitenrij{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* De kaart is sinds 31-8-2026 twee vlakken onder elkaar en heeft geen kolommen meer
     om op te heffen; alleen de definitielijst moet nog stapelen. 150px labelkolom is op
     een telefoon de helft van het scherm. */
  .bevinding dl{grid-template-columns:1fr;gap:0}
  .bevinding dt{margin-top:var(--space-3)}
  .bevinding dt:first-child{margin-top:0}
  .acties li{flex-wrap:wrap}
  .acties li>.button{margin-left:0}
}
@media (max-width:560px){
  .rap-tabs{gap:var(--space-4)}
  .feitenrij{grid-template-columns:1fr}
  .uitklapkaart>summary{flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
  .uitklapkaart .chev{margin-left:auto}
  .weekstaven{height:160px;padding:var(--space-4)}
}


/* ==========================================================================
   36. Hulpklassen — v3.2, 21 augustus 2026
   ==========================================================================
   STAAT BEWUST ALS LAATSTE IN HET BESTAND. Dat is geen ordekwestie maar een
   noodzaak: bij gelijke specificiteit wint in CSS de regel die het laatst
   staat. Toen dit blok nog op regel 892 stond, verloor `.mt-0` van
   `.knopregel` (1215), `.naast` (1263), `.formvoet` (1301) en `.acties`
   (1425), die alle vier zelf een marge zetten. `class="knopregel mt-0"` kreeg
   dus tóch een bovenmarge, zonder dat er iets te zien was dat verklaarde
   waarom. Zet hier niets onder.

   Aanleiding: in de views stonden 1052 style-attributen. Die zijn tijdens het
   herontwerp vervangen door de klassen hieronder. Alle maten liggen op de
   --space-schaal (4/8/12/16/24/32/48). Waar een view 10px of 14px had, is dat
   12px of 16px geworden — twee pixels verschil is niet zichtbaar en maakt de
   verticale ritmiek van het platform voor het eerst overal gelijk.
   ========================================================================== */

/* ---- 36.2 Een icoon in een kop ----
   svg{display:block} (regel 89) laat een inline icoon anders op een eigen regel
   vallen. Bewust NIET als `.card h3` geschreven: dat zou alle 118 h3's in het
   platform raken — dezelfde fout als een globale .icon-maat. */
.kop-icoon{display:flex;align-items:center;gap:var(--space-2)}

/* ---- 36.3 Tekst ---- */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mono.kolommen{columns:2}
.mono.breekbaar{word-break:break-all;font-size:12px}
.pre-regel{white-space:pre-line}
.nowrap{white-space:nowrap}
.blok{display:block}
.fout{color:var(--danger)}
.verplicht{color:var(--danger)}
.leesritme{line-height:1.7}
.zacht{color:var(--muted)}
.merk{color:var(--bordeaux)}
.tekst-rechts{text-align:right}
.tekst-midden{text-align:center}
.normaal-gewicht{font-weight:400}
.subregel{display:block;color:var(--muted)}
.klikbaar{cursor:pointer}
/* Een label buiten een .field-wrapper. Aan .field label gehangen zodat er maar
   één plek is waar de labelvorm staat. */
.field label,.veldlabel{display:block;font-size:11.5px;font-weight:750;margin-bottom:5px}
/* .normaal-gewicht (0,1,0) verliest van .field label (0,1,1); vandaar deze. */
.field label.normaal{font-weight:400}

/* ---- 36.4 Breedte ----
   Vier maten, niet meer. Wie een vijfde nodig heeft, heeft waarschijnlijk een
   component nodig in plaats van een breedte. */
.smal{max-width:720px}
.smal-640{max-width:640px}
.smaller{max-width:520px}
.formsmal{max-width:440px}
.vulling{flex:1}
.min-0{min-width:0}
.breed{grid-column:1 / -1}
.vol-breed{width:100%}

/* ---- 36.5 Een rij met een kleine actie erin ----
   Het meest voorkomende patroon in het beheer: een POST-formulier van één of
   twee velden plus een knop (crediteren, factuur registreren, rol wijzigen,
   seats toevoegen). Dit is de generalisatie van .expiry-form hierboven, die
   hetzelfde deed maar alleen voor input[type=date]. */
.actieform{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;
  margin-top:var(--space-2)}
.actieform.onder{align-items:flex-end}
.actieform input,.actieform select,
.veldregel input,.veldregel select{flex:1;min-width:200px;border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;font-size:12.5px;color:var(--ink);background:var(--kaart)}
.actieform input:focus,.actieform select:focus,
.veldregel input:focus,.veldregel select:focus{border-color:var(--bordeaux);
  box-shadow:0 0 0 3px rgba(135,76,13,.14);outline:none}
.actieform .button{flex:none}
.actieform .vulling,.actieform .button.vulling{flex:1}
.actieform .toelichting{flex-basis:100%;font-size:12.5px;color:var(--muted)}
/* Deze twee moeten `.actieform input` (0,1,1) verslaan, dus is de selector even
   specifiek geschreven. Alleen `.kort` (0,1,0) verloor stil van de flex:1 hierboven. */
.actieform .kort,.veldregel .kort{flex:none;width:90px;min-width:0}
.actieform .korter,.veldregel .korter{flex:none;width:70px;min-width:0}
/* .filterbalk .field heeft min-width:200px; deze twee sturen dat per scherm bij. */
.filterbalk .field.groeit{flex:1}
.filterbalk .field.smalveld{min-width:150px}
/* Keuze 9 (W-05.3#R1): de filterbalk op Beheer › Deelnemers, volgens het goedgekeurde ontwerp
   VOORSTEL_DEELNEMERSFILTERS_20260914.html. Vervangt de K2-B-modifier .compact (alles op één regel,
   Zoeken afgekapt). Alleen deze pagina; de gedeelde .filterbalk blijft zoals hij is.

   Ontwerp: Zoeken minimaal 260 px en meegroeiend, Organisatie 164, Product 184, Status 132,
   Uitnodiging 177, 10 px tussenruimte, Filteren op een eigen regel links onder Zoeken. Het ontwerp
   rekent met 29 px rechterruimte in een keuzelijst; T-91 schrijft in dit platform 40 px voor (regel
   select:not([multiple]) onderaan dit bestand) plus 13 px links. Met die ruimte en Nunito Sans 15 px
   zijn de kolommen hier zo breed dat elke vaste keuze past, met 3 px speling: Losse deelnemers,
   Nog geen toegang, Geblokkeerd en Alle uitnodigingen (gemeten 122, 125, 86 en 124 px tekst). Een
   organisatienaam is vrije tekst en kan bij selectie langer zijn. Eén regel vraagt daarmee 990 px.

   Op 1280 px is de inhoud naast de zijbalk 908 px breed. Daarom drie standen, op de breedte van de
   houder en niet van het venster:
     ≥ 990 px  vijf velden naast elkaar, zoals het ontwerp;
     ≥ 644 px  Zoeken (≥ 260 px, groeit), Organisatie en Product op de eerste regel, Status en
               Uitnodiging eronder in dezelfde kolommen, Filteren op die tweede regel direct onder Zoeken
               (bovenaan de cel, links). Herstel K4H (R4): HIER STOND Filteren op een derde regel, met een
               lege cel onder Zoeken ervoor ("Geen onnodig lege extra rij vóór de knop");
     smaller   alles onder elkaar in dezelfde volgorde, Filteren daarna, links. */
.deelnemersfilters-houder{container-type:inline-size}
.filterbalk.deelnemersfilters{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 10px;align-items:end}
.deelnemersfilters .field{min-width:0}
.deelnemersfilters .field label{font-size:12px;font-weight:700}
.deelnemersfilters .field input,.deelnemersfilters .field select{font-family:var(--font);font-size:15px;font-weight:400}
.deelnemersfilters .filterknoppen{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-self:start}
@container (min-width:644px){
  .filterbalk.deelnemersfilters{grid-template-columns:minmax(260px,1fr) 180px 184px;
    grid-template-areas:"zoek organisatie product" "knoppen status uitnodiging"}
  .deelnemersfilters .veld-zoek{grid-area:zoek}
  .deelnemersfilters .veld-organisatie{grid-area:organisatie}
  .deelnemersfilters .veld-product{grid-area:product}
  .deelnemersfilters .veld-status{grid-area:status}
  .deelnemersfilters .veld-uitnodiging{grid-area:uitnodiging}
  .deelnemersfilters .filterknoppen{grid-area:knoppen;align-self:start}
}
@container (min-width:990px){
  .filterbalk.deelnemersfilters{grid-template-columns:minmax(260px,1fr) 180px 184px 144px 182px;
    grid-template-areas:"zoek organisatie product status uitnodiging" "knoppen . . . ."}
}
/* Keuze 3 (W-31.2#R1): de vaste link naar de werkvoorraad Uitnodigingen onder de paginatitel. */
.uitnodigingenlink{display:inline-flex;align-items:center;gap:10px;margin-top:6px;color:var(--bordeaux);
  font-weight:700;text-decoration:none}
.uitnodigingenlink .linktekst{text-decoration:underline;text-underline-offset:3px}
.uitnodigingenlink .aantal-open{padding:1px 8px;border-radius:999px;background:var(--line);color:var(--ink);font-size:12px}

/* ---- 36.6 Losse keuze en knoppenstapel ---- */
.keuze{display:flex;gap:var(--space-2);align-items:flex-start}
/* Radio's stonden hier niet in, en de marge was alleen bovenaan gezet. Een vakje of
   bolletje houdt dan de linkermarge van de browser (5px in Chrome), waardoor het net
   naast de kantlijn van de velden eronder staat — geen zichtbaar verschil, wel een
   zichtbare scheefstand. Vandaar `margin:3px 0 0`: bovenlangs uitlijnen met de eerste
   tekstregel, links strak op de kantlijn. Geldt voor de drie schermen met .keuze-radio's
   (publiceren, releases, simulaties) en voor alle .keuze-vakjes. */
.keuze input[type=checkbox],.keuze input[type=radio]{width:15px;height:15px;min-height:0;
  margin:3px 0 0;flex:none}
/* .keuze is een flexrij, en in een flexrij wordt ELK element-kind een eigen kolom. Zet je
   naast het vakje een los <strong> met de uitleg erachter, dan krijg je dus drie kolommen:
   vakje | naam | uitleg — de naam breekt in zijn eigen smalle kolom af en de uitleg begint
   per keuze op een andere x. Precies wat er op "Module publiceren" rommelig uitzag. De
   markup hoort de tekst daarom in één element te zetten (zie admin/publiceren-alles.php
   en admin/notifications-edit.php); deze regel geeft die tekstkolom de hele restbreedte,
   zodat twee keuzes onder elkaar even breed zijn. min-width:0 houdt een lange ononderbroken
   waarde binnen de kolom in plaats van eroverheen. */
.keuze>span{flex:1;min-width:0}
.knopstapel{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.knopstapel>*,.knopstapel .button{width:100%}
.stapel-rechts{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-end}
.card-list{display:flex;flex-direction:column;gap:var(--space-3)}

/* ---- 36.7 Kaarten en miniaturen ---- */
a.card{text-decoration:none;color:inherit;display:block}
.kaart-vlak{padding:0;overflow:hidden}
.kaart-kop-links{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.kaart-kop-links>div{min-width:0}
.thumb{width:56px;height:40px;object-fit:cover;border-radius:9px;flex:none}
.thumb.groot{width:180px;height:110px;border-radius:11px;display:block;
  margin-bottom:var(--space-2)}
.card.signaal{border-left:4px solid var(--bordeaux)}
.card.signaal.fout{border-left-color:var(--danger);background:var(--danger-soft)}
.grid.boven{align-items:start}
.scheiding{border:0;border-top:1px solid var(--line-soft);margin:var(--space-5) 0}

/* ---- 36.8 Uitklappen ----
   .uitklap is de body van .uitklapkaart (regel 1399). Die klasse stond wel in de
   rapportageschermen maar had nooit een regel gekregen, waardoor die panelen
   zonder padding en zonder scheidingslijn tegen hun samenvatting aan plakten. */
.uitklap{padding:0 var(--space-5) var(--space-5);border-top:1px solid var(--line-soft)}
details>summary.uitklapper{cursor:pointer;font-weight:700}
.uitklapblok{border:1px solid var(--line-soft);border-radius:12px;
  padding:var(--space-3) var(--space-4)}

/* ---- 36.9 Tabellen ---- */
.data-table tr.row-invalid td{background:var(--danger-soft)}
.data-table tr.row-invalid td:first-child{border-left:3px solid var(--danger)}
.data-table td.sleutelkolom{width:45%}
.list-row.wikkelen{flex-wrap:wrap}
/* W-26: een melding met de knop Bekijk aanbod. Zonder ondergrens kromp de tekst op een telefoon tot een kolom van een
   paar letters naast de knop; nu gaat de knop op 390 naar de regel eronder. Zelfde patroon als .acties-wrap. */
.list-row.wikkelen>.grow{flex-basis:220px}
.filterbalk .vinkje{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:13px;font-weight:600;padding-bottom:10px}

/* ---- 36.10 Nog drie die meer dan één keer terugkwamen ---- */
.geslaagd{color:var(--success)}
.gevuld{width:100%;height:100%;object-fit:cover;display:block}
/* Een kop- of knoppenrij binnen een .kaart-vlak (die heeft padding:0, anders zou het
   ingebedde frame een witte rand krijgen). */
.vlakrij{padding:14px 16px}


/* ---- 36.11 Nagekomen: wat de schermronde nog miste ----
   Alleen opgenomen wat op minstens twee plekken terugkwam. Wat één keer voorkwam
   staat bewust nog inline; een klasse voor één gebruik is een klasse te veel. */
.halfvet{font-weight:600}
.vet{font-weight:700}
.smal-880{max-width:880px}
.smal-200{max-width:200px}
/* Een <ul> die als lijst-zonder-bolletjes dient. .list en .card-list gaan uit van een
   <div>; op een <ul> blijft de padding-inline-start van 40px van de browser staan,
   waardoor de rijen 40px rechts van hun eigen kaartkop beginnen. */
.schoon-lijst{list-style:none;margin:0;padding:0}
.grid.onder{align-items:end}
.list-row.onder{align-items:flex-end}
/* v15 AF-05 (M09): op een telefoon kreeg de tekstkolom van een video- of formatrij 2px, want
   alleen .grow mocht krimpen naast icoon, volgordeknoppen en Verwijderen — tekst brak per
   letter af. Onder 560px loopt de rij door: tekst naast het icoon over de volle breedte, de
   knoppen op de regel eronder. Zelfde patroon als .productlijst hieronder. */
@media (max-width:560px){
  .list-row.onder{flex-wrap:wrap;align-items:flex-start}
  .list-row.onder > .grow{flex:1 1 calc(100% - 70px)}
  .list-row.onder > .badge-stack{margin-left:auto}
}
/* ---- 37.1c De producttitels op Organisatie aanmaken braken op een telefoon ----
   A1 en A9 van werklijst v4.54. Op 390px stond er "Jaa rpl an in 5 sta pp en" en
   "vakmen-sen", "leer-route", "inclu-sief". Eén oorzaak, twee gezichten: het
   getalveld naast de titel is `.smal-200` en krimpt niet, dus hield de tekstkolom
   70px over van een rij van 328px (gemeten). In zo'n kolom doet 37.1 precies wat
   het daar moet doen - `overflow-wrap:anywhere` knipt overal, en `hyphens:auto`
   zet er een streepje in - alleen is 70px geen kolom meer.

   Niet 37.1 verbreden (S6-603: die regel is gemeten voor een bestandsnaam op
   1280-1366px en wordt door zes andere schermen gedeeld), maar hetzelfde antwoord
   als bij `.list-row.onder` hierboven en `.productlijst`: niet wringen maar
   afbreken. Onder 560px zakt het getalveld naar zijn eigen regel en krijgt de
   titel de volle breedte. `hyphens:manual` erbij zodat er ook bij een heel lange
   producttitel geen streepje middenin een woord komt.

   Gemeten op /beheer/organisaties/aanmaken, de eerste productrij:

     breedte   rij     tekstkolom ná   gebroken woorden vóór / ná
      1440px   668px      410px               geen / geen
       768px   668px      410px               geen / geen
       390px   328px      286px      Jaarplan, vakmensen, inclusief / geen
       320px   258px      216px      Jaarplan, vakmensen, inclusief / geen

   Vóór deze regel was de tekstkolom op 390px 70px breed (gemeten); op 768px en
   breder verandert er niets, daar past de rij en blijft hij één regel. */
@media (max-width:560px){
  .regellijst.productregels .list-row{flex-wrap:wrap}
  .regellijst.productregels .list-row > .grow{flex:1 1 100%;hyphens:manual}
  .regellijst.productregels .list-row > input{max-width:100%;width:100%}
}
.blokscheiding{border-top:1px solid var(--line-soft);padding-top:var(--space-4);
  margin-top:var(--space-4)}
/* EH-S6-70 (ontwerp 2) — twee tabellen met dezelfde kolommen op één pagina staan recht onder
   elkaar. De breedtes komen uit de colgroup in de view; deze regel zorgt dat de browser ze
   aanhoudt in plaats van naar de inhoud te kijken. */
/* RV-S6-66 (ontwerp 1) — de bevestiging bij de knop waarop je klikte, in plaats van als blok
   bovenaan een scherm waar je niet meer kijkt. Groen mag hier: RV-S6-27 liet deze twee tinten al
   toe (#4A764F op #E9F0EA, 4,53:1 op de kaartachtergrond) en RV-S6-72 punt 1 bevestigt het. */
.melding-bij-knop{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:8px;padding:6px 11px;border-radius:9px;
  background:var(--kaart-af-vlak);color:var(--kaart-af);
  font-size:13.5px;font-weight:600;line-height:1.3;
}
.melding-bij-knop svg.icon{width:16px;height:16px;flex:0 0 16px}
/* De tweede regel is toelichting, geen bevestiging: gewone tekstkleur en gewoon gewicht. */
.melding-bij-knop small{display:block;font-weight:400;color:var(--text)}
.melding-bij-knop.stapel{flex-direction:column;align-items:flex-start;gap:2px}

/* En de tegenhanger: een foutmelding staat bij het veld waar het misging, en blijft staan. */
.veldfout{display:flex;align-items:flex-start;gap:6px;
  margin-top:6px;color:var(--danger);font-size:13px;line-height:1.35}
.veldfout svg.icon{width:15px;height:15px;flex:0 0 15px;margin-top:1px}
.field.heeft-fout input,
.field.heeft-fout textarea,
.field.heeft-fout select{border-color:var(--danger)}

table.gelijke-kolommen{table-layout:fixed;width:100%}

/* TXT-S6-29 (ontwerp 2) — in de kolom Staat het label, met de datum er klein onder. */
.staat-met-datum small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}

.breekbaar{word-break:break-all}

/* EH-S6-66 (ontwerp 18) — het e-mailadres onder de naam in de deelnemerslijst.
   Klein en grijs, met de hele breedte van de oude twee kolommen. Het adres draagt zijn eigen
   breekpunten (`<wbr>`, zie adres_breekbaar()); `word-break: normal` laat het daarom nergens
   anders afbreken dan achter de @ en achter een punt. */
.naam-met-adres small{display:block;margin-top:2px;
  font-size:12.5px;font-weight:400;color:var(--muted);
  overflow-wrap:normal;word-break:normal}
.data-table th.sleutelkolom{width:45%}


/* ==========================================================================
   37. Inloggen, wachtwoord vergeten en het coachgesprek — v3.3, 21 augustus 2026
   ==========================================================================
   Groep B/D van het schermregister. Voor deze schermen lag geen ontwerp; ze
   zijn gebouwd door het bestaande systeem (secties 32-36) door te trekken.
   ========================================================================== */
/* ==========================================================================
   B1. Inloggen, wachtwoord herstellen, de coachkeuze en het coachgesprek
   ==========================================================================
   Groep B van het schermregister: voor deze vier schermen ligt géén ontwerp
   van Simone klaar. Er is dus niets overgenomen — alles hieronder is de
   bestaande opmaak uit secties 32 t/m 36 doorgetrokken naar schermen die die
   ronde nog niet hadden gehad. Nederlandse klassenamen, de --space-schaal,
   tokens uit :root, geen nieuwe kleuren.

   Dezelfde huisregels als bij sectie 32:
   1. Nieuwe opmaak staat achteraan, niet tussen bestaande secties.
   2. Bestaande klassenamen blijven bestaan; waar de nieuwe opmaak een
      bestaande klasse anders invult, staat dat hier als override. Dit
      bestand wordt ná app.css geladen, dus bij gelijke specificiteit wint
      wat hier staat.
   3. .icon krijgt NOOIT een globale maat — src/Core/Support/icons.php zet
      class="icon" op elke SVG in het platform. Maten zijn per component
      gescoopt.

   Bewust NIET aangeraakt:
   - .auth-fields  -> ook in gebruik op /profiel en /uitnodiging, binnen de
                      gewone schil. Een wijziging hier zou twee schermen
                      raken die niet in deze ronde zitten.
   - .leren-kaarten / .leren-kaart -> de kaartenrasters van /leren-videos,
                      /leren-formats, /leren en /mijn-leerroutes hangen
                      hieraan. /coaching deelt die view maar krijgt zijn
                      eigen regellijst; de kaarten blijven zoals ze zijn.
   - .coach-panel en .coach-launcher (het zwevende venster uit fase 1) ->
                      staan niet meer in de layout maar de e2e-suite
                      controleert dat ze afwezig zijn.
   ========================================================================== */

/* ---- B1.1 De schil van het inlogscherm ----
   /login en /wachtwoord-vergeten zijn de enige schermen zonder zijbalk, en
   dat blijft zo: een inlogscherm hoort geen navigatie te hebben die je toch
   niet kunt gebruiken. Wat er wél bij hoort is de herkenning: dezelfde witte
   balk met hetzelfde logo als elk ander scherm, en daaronder een gecentreerde
   kaart in dezelfde kaartvorm als de rest van het platform.

   De balk hergebruikt .brand-logo uit sectie 32.2, inclusief de breekpunten;
   alleen de uitlijning verschilt, want hier is geen zijbalk om tegenaan te
   leggen — en dus ook geen tweedeling in de hoogte. */
/* S6-256 / ontwerp A2 (23-09-2026) — geen witte balk meer.
   Hier stond `.auth-balk`: een witte strook van 140px (76 op een telefoon) met het logo,
   met een lijn eronder. Die is vervallen. Wat ervoor in de plaats komt: de kleurenbalk
   bovenaan, daaronder meteen de zandkleur, en het logo gecentreerd bóven de kaart.
   Logo en kaart vormen samen één blok (.auth-blok). */
.auth-blok{
  width:min(440px,100%);
  /* 20px tussen logo en kaart (S6-256). */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
/* 84px is de maat die het inlogscherm vóór bevindingen v13 had; Simone koos hem op 23-09
   opnieuw uit drie maten naast elkaar (S6-260). Op ÉLKE breedte 84px: het ontwerp zet
   hetzelfde blok op 390 bovenin, niet een kleiner blok. Twee klassen in de selector, want
   `.brand-logo` heeft verderop breekpunten (46px, 34px, 24px) die voor de ingelogde balk
   zijn gemaakt en die anders op de telefoon zouden winnen — daar mat de eerste opname van
   deze spec 24px. */
.auth-merk .auth-logo{height:84px;width:auto;max-height:84px}
.auth-merk{display:flex;align-items:center;text-decoration:none;min-width:0}

/* Het werkgebied staat op dezelfde zandkleur als elk ander scherm (--canvas), niet op de
   lichtere --offwhite met twee radiale verlopen.

   HET BLOK STAAT IN HET MIDDEN VAN HET VENSTER, en schuift mee zodra het venster lager is
   dan het blok zelf: `min-height` met `justify-content:center` doet allebei — bij te weinig
   ruimte groeit de pagina en kun je scrollen, en er valt niets buiten beeld. De voetregel
   volgt het blok en telt dus mee in wat er gecentreerd wordt; hem met `margin-top:auto` naar
   de onderrand duwen zou hem op een hoog venster tientallen centimeters van de kaart zetten.

   De bovenruimte is de hoogte van de kleurenbalk plus lucht: de balk ligt erboven en hoort
   niets af te dekken. */
.auth-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--canvas);
  padding:calc(var(--merkbalk-h) + var(--space-5)) var(--space-4) var(--space-6);
}
/* Op 390 staat hetzelfde blok BOVENIN, met 40px lucht boven het logo (S6-256). */
@media (max-width:780px){
  .auth-wrap{justify-content:flex-start;padding-top:calc(var(--merkbalk-h) + 40px)}
}
.auth-card{
  width:min(440px,100%);
  margin:0 auto;
  border-radius:var(--radius-lg);
  border-color:var(--line-soft);
  padding:var(--space-6);
  box-shadow:var(--shadow-soft);
}
.auth-card h1{font-size:28px;margin-top:0}
.auth-card .lead{font-size:15px;margin-bottom:var(--space-5)}
/* Eén link onder het formulier hoort onder het midden van de knop te staan;
   space-between duwde hem naar de linkerrand van de kaart. */
.auth-links{justify-content:center;gap:var(--space-4);font-size:13.5px}
.auth-voet{
  width:min(440px,100%);
  margin:var(--space-5) auto 0;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}
.auth-voet a{color:var(--bordeaux);font-weight:700;text-decoration:none}
.auth-voet a:hover{text-decoration:underline}

/* De 480px-regel in app.css zet .auth-card terug op 17px padding. Die staat
   vóór dit bestand, dus zonder deze herhaling zou de padding hierboven hem
   overrulen en zou de kaart op een telefoon te weinig marge overhouden. */
@media (max-width:560px){
  /* De zijmarges krimpen; de 40px lucht boven het logo uit S6-256 blijft staan, want die
     is de maat van het ontwerp en niet van de kaartmarge. */
  .auth-wrap{padding:calc(var(--merkbalk-h) + 40px) var(--space-3) var(--space-5)}
  .auth-card{padding:var(--space-5)}
  .auth-card h1{font-size:24px}
}

/* ---- B1.1b Een tweede knop die "verwijderen" betekent ----
   Sectie 32.4 repareerde .button.ghost.danger: rode tekst op een rood vlak. Dezelfde
   fout stond nog in .button.secondary.danger — .secondary zet de tekst op bordeaux,
   .danger daarna het vlak op rood. axe mat 1,47:1 op "Gesprek verwijderen" (/coach).
   De combinatie is nu wit vlak, rode tekst: 7,4:1. Er waren twee gebruiken in het
   platform, /coach en /beheer/content/kennistekst/{id}; dat tweede scherm is met D-116
   vervallen, dus /coach is de overgebleven plek. Geen nieuwe kleuren — de rand blijft
   --line, de hoverkleur is --danger-soft. */
.button.secondary.danger{background:var(--kaart);color:var(--danger)}
.button.secondary.danger:hover{background:var(--danger-soft);border-color:var(--danger)}

/* ---- B1.2 De coachkeuze (/coaching) ----
   De regellijst uit sectie 33.8 doet al het werk. Eén aanvulling: sectie 33.8 kent
   alleen `li.gelezen` voor een afgeronde regel, want daar ging het over lezen. Een
   gespreksoefening rond je af, dus draagt die regel `li.af` — dezelfde naam die
   sectie 33.4 en 33.5 al gebruiken voor een afgeronde module of stap. */
.regellijst li.klaar .soorttegel{background:var(--success-soft);color:var(--success)}

/* ---- B1.3 Het coachgesprek ----
   Het schermregister noemt dit "een ander soort scherm, nog geen component
   voor". Dat klopt voor de gespreksregels zelf; de omlijsting eromheen is
   gewoon een kaart, en die trekt hieronder gelijk met de rest: --radius-lg,
   --line-soft, geen slagschaduw. De klassenamen .coach-shell, .coach-header,
   .chat en .chat-input blijven staan — tests/e2e/specs/smoke.spec.js en
   a11y.spec.js zoeken daarop. */
.coach-shell{
  border-radius:var(--radius-lg);
  border-color:var(--line-soft);
  box-shadow:none;
  max-width:840px;
  margin-top:var(--space-4);
}
.coach-header{gap:var(--space-3);padding:var(--space-4) var(--space-5);flex-wrap:wrap}
/* Dezelfde soorttegel als bij een kennismodule (sectie 33.8): een afgerond
   vierkant in --canvas met een goud icoon, geen bordeaux rondje. Onder een
   bordeaux balk zou dat het derde bordeaux vlak boven elkaar zijn. */
.coach-avatar{
  flex:none;
  width:44px;height:44px;
  border-radius:var(--radius-md);
  background:var(--canvas);
  color:var(--bordeaux);
}
.coach-avatar .icon{width:21px;height:21px}
.coach-header strong{font-family:var(--font);font-weight:600;font-size:16px}
.coach-header span{font-size:13px}

.chat{
  background:var(--canvas);
  padding:var(--space-5);
  gap:var(--space-3);
  min-height:320px;
  max-height:min(52vh,480px);
}
/* Zolang er geen gesprek is, reserveert het gespreksvenster geen 320 pixels leegte:
   één openingsbericht boven een lege grijze vlakte leest als "hier is iets stuk".
   Het venster groeit zodra de eerste vraag er staat. */
.chat.leeg{min-height:0}
.message{
  max-width:78%;
  font-size:15px;
  line-height:1.6;
  border-radius:var(--radius-lg);
  padding:12px 16px;
}
/* Een wit vlak op --canvas leest als "de coach zet iets voor je neer"; het
   oude --sand op --offwhite gaf nauwelijks scheiding tussen bericht en
   achtergrond. De bordeaux bel van de deelnemer verandert niet. */
.message.bot{background:var(--kaart);border:1px solid var(--line-soft)}
/* Een geweigerd antwoord ("dat valt buiten de ImProve-inhoud") is altijd een
   bot-bericht, dus houdt het de rand van .message.bot; alleen het vlak wordt geel. */
.message.refused{background:var(--warning-soft);color:var(--warning)}
.message .sources{font-size:13px;border-top-color:var(--line-soft);margin-top:10px;padding-top:10px}
.message.bot .sources a{color:var(--bordeaux);font-weight:700}

/* De invoerregel vouwt. Op 390px stonden de leerroutekeuze, het tekstvak en de
   verzendknop naast elkaar op één regel; het tekstvak hield daar veertig pixels
   over en toonde nog één letter. De keuze pakt nu de eerste regel, het tekstvak
   met de knop de tweede. */
.chat-input{
  flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-top-color:var(--line-soft);
}
.chat-route{
  flex:1 1 220px;
  max-width:260px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:0 12px;
  background:var(--kaart);
  color:var(--ink);
  outline:none;
}
.chat-route:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.chat-input textarea{flex:1 1 220px;min-width:0;border-radius:var(--radius-md);font-size:15px}
.chat-input .button{flex:none;width:44px;height:44px;padding:0;border-radius:50%}
.chat-input .button .icon{width:18px;height:18px}

/* Privacytekst op de leesmaat van het platform in plaats van 11,5px. Het is
   de enige uitleg over wat er met een vraag gebeurt; die moet leesbaar zijn. */
.coach-privacy{max-width:840px;margin-top:var(--space-4)}
.coach-privacy>summary{font-size:13.5px}
.coach-privacy>summary .icon{width:15px;height:15px}
.coach-privacy p{font-size:14px;line-height:1.6;max-width:80ch}

@media (max-width:560px){
  .chat{padding:var(--space-4);min-height:260px}
  .chat.leeg{min-height:0}
  .message{max-width:88%}
  .chat-route{max-width:none}
}


/* ==========================================================================
   38. Videomodules en simulaties — v3.3, 21 augustus 2026
   ==========================================================================
   Groep B/D van het schermregister. Voor deze schermen lag geen ontwerp; ze
   zijn gebouwd door het bestaande systeem (secties 32-36) door te trekken.
   ========================================================================== */
/* ==========================================================================
   Ronde B2 — video- en simulatieschermen van de deelnemer, 21 augustus 2026
   ==========================================================================
   De vier schermen /leren/{id}/videos, /leren/{id}/videos/{n},
   /leren/{id}/simulaties en /leren/{id}/simulaties/{n}. Er lag geen ontwerp voor;
   ze zijn opgetrokken uit wat er al staat in secties 32 t/m 36 van app.css en uit
   hun directe tegenhangers /leren/{id}/kennis en /leren/{id}/kennis/{n}.

   Hieronder staat alléén wat daar niet in zat. Zelfde regels als sectie 33:
   1. Tokennamen zijn Engels, maten liggen op de --space-schaal.
   2. .icon krijgt nooit een globale maat.
   3. Geen nieuwe kleuren. Op één na, zie .videospeler.

   Bewust NIET geschreven:
   - een eigen kaartsoort voor video en simulatie -> .leren-kaart met .kaart-media,
     .kaart-play en .kaart-vinkje bestaat al en wordt ook door /leren, /leren-videos
     en /coaching gebruikt; een vijfde variant zou die vier uit elkaar laten lopen
   - een eigen lijstsoort voor de oefeningen binnen een module -> .regellijst met
     .soorttegel (33.8) is precies de lijst van de kennismodules, en dat is het
     scherm waar dit de tegenhanger van is
   - losse breedteklassen -> 36.4 staat er vier toe; de videokaart heeft een eigen
     maat en is daarom een component geworden in plaats van een vijfde breedte
   ========================================================================== */

/* ---- Titel met een statuslabel ernaast ----
   Het label stond in de <h1> zelf, waardoor de toegankelijke naam van de kop
   "Keuzes maken Afgerond" werd — een kop hoort te zeggen wat het scherm is, niet
   hoe ver je bent. Het label staat nu naast de kop in een rij die afbreekt: op een
   telefoon zakt het onder de titel in plaats van hem plat te drukken. */
.titelregel{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.titelregel h1{margin-bottom:0}
.titelregel .status{flex:none}

/* ---- De kaart om één videodeel heen ----
   Smaller dan de contentkolom: een speler van 1120px breed is 630px hoog en duwt de
   knoppen eronder buiten beeld. 960px is geen maat uit 36.4 en wordt daarom niet als
   losse breedteklasse geschreven maar als eigenschap van dit ene onderdeel. */
.videokaart{max-width:960px}

/* De speler vult de kaart van rand tot rand; .kaart-vlak heeft padding:0 en
   overflow:hidden, dus de bovenhoeken lopen mee met de kaart.
   #000 is de enige kleur hier die niet uit :root komt: het is de letterbox naast een
   beeld met een andere verhouding, geen merkkleur. Een tint uit het palet zou naast
   het echte zwart van de video als een fout ogen. */
.videospeler{display:block;width:100%;aspect-ratio:16/9;background:var(--ink)}

/* ---- Aangeleverde inhoud in een kader ----
   Twee soorten: een videodeel dat een HTML-pagina is (uitleg met een audiofragment) en
   de oefenomgeving van DialogueTrainer. Beide stonden met een berekende hoogte in een
   style-attribuut, en konden daardoor niet meebewegen met de schermhoogte-regel die
   .kennisframe (33.9) wél heeft. Zelfde opzet als daar, één klasse voor allebei. */
.inhoudsframe{display:block;width:100%;height:calc(100vh - 280px);min-height:520px;
  border:0;background:var(--kaart)}

/* ---- Kleinere schermen ----
   Onder 900px is 100vh - 280px bijna het hele scherm; 70vh laat zien dat de pagina
   doorloopt. Onder 560px zet de regellijst de knop rechts onder de tekst — dat doet
   33.10 al voor .button.secondary, en de oefeningen gebruiken diezelfde knop. */
@media (max-width:900px){
  .inhoudsframe{height:70vh;min-height:420px}
}

/* ---- Herstel: de trainingkaart was haar vorm kwijt ----
   .leren-kaart (app.css 620) zet display:flex met flex-direction:column én padding:0. De
   toelichting bij die regel zegt wat de bedoeling is: een kaart met een randloos beeld, en
   een voet die met flex:1 de restruimte vult zodat de bordeauxlijn van alle kaarten in een
   rij op dezelfde hoogte eindigt.

   Twee latere, algemenere regels wonnen daarvan, allebei omdat ze verderop in het bestand
   staan en specifieker zijn:
     36.7  a.card{...;display:block}      (0,1,1) verslaat .leren-kaart (0,1,0)
     32.5  .card{padding:var(--space-5)}  (0,1,0) gelijk, maar staat later
   Gevolg: de kaart was geen kolom meer, dus flex:1 deed niets; en de afbeelding stond 24px
   van de rand met de bordeauxlijn zwevend boven 24px wit. Zichtbaar op elke kaart met een
   ondertitel van twee regels.

   Deze selector is een element plus twee klassen (0,2,1) en zet alleen dat terug — geen
   nieuwe opmaak. Let op bij het samenvoegen: dit raakt naast /leren/{id}/videos en
   /leren/{id}/simulaties ook /leren, /leren-videos, /coaching en /mijn-leerroutes,
   allemaal in de goede richting. */
/* PUNT 27 (volgorde 02-10, TB-11): deze selector stond op `a.card.leren-kaart` — alleen een
   link. De kaart van een special is een <article> (er staat een knop in, en een knop binnen een
   link is geen geldige HTML), dus die hield de marge van `.card` en stond met zijn foto in een wit
   kader met een witte rand eromheen, terwijl de leerroutekaart zijn foto tot de rand liet lopen.
   Zonder het element erin is dit (0,2,0) en wint het nog steeds van `.card` (0,1,0) én van
   `a.card` (0,1,1), dus de werking voor de link verandert niet. */
.card.leren-kaart{display:flex;padding:0}

/* ---- Een videostill op een kaart ligt op 16:9 ----
   .kaart-afbeelding is 150px hoog; op een kaart van 320px is dat 2,1:1 en snijdt
   object-fit:cover de boven- en onderkant van het beeld weg. Bij een videostill is dat
   precies waar het gezicht zit, en op het scherm erachter staat de speler wél op 16:9.

   Alleen op de videokaart, vandaar .kaart-still ernaast in de view. Een simulatiekaart
   heeft nooit een eigen beeld en houdt de bestaande 150px: die 30px extra zou daar alleen
   het lege vlak groter maken. Het lege vlak van een videokaart volgt wél mee, anders
   wordt een rij kaarten met en zonder still ongelijk. */
.kaart-still .kaart-afbeelding,
.kaart-still .kaart-afbeelding-leeg{height:auto;aspect-ratio:16/9}

/* ---- De oefeningen binnen één module ----
   Dezelfde .regellijst als de kennismodules (32.7), met één verschil: daar staat "Lezen"
   in de knop en hier "Start de oefening". .regellijst li>.button.secondary is 118px breed
   zodat de knoppen in een lijst onder elkaar uitlijnen, en .button heeft white-space:nowrap
   — die tekst zou er dus dwars doorheen lopen. In deze lijst is de knop daarom zo breed als
   zijn tekst; ze staan nog steeds rechts uitgelijnd, want ze zijn even lang. */
.regellijst.oefeningen li>.button.secondary{width:auto}


/* ==========================================================================
   39. Deelnemers, organisaties en feedback — v3.3, 21 augustus 2026
   ==========================================================================
   Groep B/D van het schermregister. Voor deze schermen lag geen ontwerp; ze
   zijn gebouwd door het bestaande systeem (secties 32-36) door te trekken.
   ========================================================================== */
/* ==========================================================================
   B3. Herontwerp vier beheerschermen — deelnemers, organisaties, feedback
   ==========================================================================
   /beheer/gebruikers · /beheer/organisaties · /beheer/organisaties/{id} ·
   /beheer/feedback, plus de deelnemerdetailpagina, "Organisatie met seats"
   en de gedeelde uitnodigingentabel.

   Groep B van het schermregister: er ligt géén ontwerp van Simone voor deze
   schermen. De maat is daarom het al herontworpen buurscherm /beheer en
   /beheer/rapportage (secties 32 en 35 van app.css). Regels bij dit blok:

   1. Bestaat er een klasse, dan wordt die gebruikt: .filterbalk, .data-table,
      .table-scroll, .status, .empty-state, .actieform, .sectiekop, .regellijst,
      .metric, .tekstknop, .breadcrumb, .knopregel, .form-card, .field.
   2. Wat hier bij komt is een uitbreiding van zo'n bestaand onderdeel, geen
      nieuw component. Nederlandse namen, maten op de --space-schaal, kleuren
      uitsluitend uit de tokens in :root — geen enkele nieuwe kleurwaarde.
   3. .icon krijgt nooit een globale maat; nieuwe maten per component gescoopt.
   4. Dit bestand laadt NA app.css. Alles hieronder wint dus bij gelijke
      specificiteit, ook van de ruimteklassen in 36.99. Daarom zet niets
      hieronder een marge die een .mt- of .mb- zou moeten kunnen overrulen.
   ========================================================================== */

/* ---- B3.1 Feedback: wat nog niet is opgepakt ----
   Bevinding 13 gaf de rij de klasse .rij-nieuw als haak voor de opmaak, maar die
   opmaak bestond nergens: het enige verschil was <strong> op 13px, en dat is te
   weinig om een postvak-gevoel te geven. Zelfde vorm als de twee patronen die het
   platform hier al voor heeft — .row-expired in de uitnodigingentabel en
   .list-row.notification-unread bij meldingen: een gekleurde linkerrand plus een
   zachte tint. Kleur is nooit het enige verschil; het vet uit bevinding 13 blijft. */
.data-table tr.rij-nieuw td{background:var(--offwhite)}
.data-table tr.rij-nieuw td:first-child{border-left:3px solid var(--bordeaux)}

/* Statuskeuze per feedbackregel. Stond als kaal <select> in de cel, dus met de
   standaardweergave van de browser tussen de eigen velden van het platform.
   Zelfde vorm als .actieform select, maar zonder de min-width van 200px die in
   een tabelcel de kolom zou oprekken. */
.statusform select{border:1px solid var(--line);border-radius:10px;padding:7px 10px;
  font-size:12.5px;color:var(--ink);background:var(--kaart);max-width:150px}
.statusform select:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14);outline:none}

/* ---- B3.2 Actiekolom in een beheertabel ----
   Eén bestemming als knop, de rest als tekstknop eronder. Dezelfde verdeling als bij een
   aandachtspunt op het beheeroverzicht (.punt-uit .knopregel): daar staat "Naar organisatie"
   als knop naast "Dertig dagen niet tonen" als tekstknop.

   Bewust GEEN vaste kolombreedte. Een vaste breedte (224px was genoeg voor twee tekstknoppen
   naast elkaar) maakte het uitnodigingenoverzicht 74px breder dan voorheen, en dat is precies
   de tabel die eerder al te breed was: bij 1366 paste hij daardoor niet meer binnen zijn
   .table-scroll. Nu bepaalt de tabel zelf hoeveel ruimte deze kolom krijgt — de max-width
   voorkomt dat het bij 1600 één lange regel wordt, de nowrap op de tekstknop voorkomt dat
   "Opnieuw versturen" halverwege afbreekt, en flex-wrap doet de rest. Bij veel ruimte staan
   er twee naast elkaar, bij weinig onder elkaar. */
.rij-acties .nevenacties{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 var(--space-3);max-width:224px}
.rij-acties .tekstknop{padding:2px 0;font-size:12.5px;white-space:nowrap}
/* Een <summary> is display:list-item; zonder deze regel loopt de onderstreping van
   .tekstknop over de volle breedte van de cel in plaats van onder het woord. */
.rij-acties .expiry-edit>summary.tekstknop{display:inline-block}
.rij-acties .expiry-edit{flex:0 0 auto}
/* Opengeklapt is het geen woord meer maar een datumveld met een knop en een uitleg. Zonder
   deze drie regels rekt dat de actiekolom op tot buiten de tabel — dan schuift de tabel
   ineens horizontaal en valt de knop "Opslaan" achter de rand. Opengeklapt neemt het paneel
   dus een volle regel binnen dezelfde kolombreedte, en wat erin staat vouwt mee. */
.rij-acties .expiry-edit[open]{flex:1 0 100%}
.rij-acties .expiry-form input[type=date]{width:100%;min-width:0}
.rij-acties .expiry-help{max-width:100%}

/* ---- B3.3 Deelnemerdetail: leerroutes aan- en uitzetten ----
   Vier style=""-attributen uit de view. De maten zijn ongewijzigd; alleen de plek klopt nu.
   .keuzevak is bewust niet aan .keuze of .keuzelijst gehangen: die twee gaan over een label
   met een vinkje ernaast, hier staat het vinkje los in een .list-row. */
/* Stond op de hele regel (.list-row.op-slot{opacity:.75}); dat verzwakte ook de tekst
   en zakte onder het contrastminimum. Het slot-icoon en de status-badge dragen de
   boodschap al — kleur alleen is sowieso geen toegestaan enig signaal (WCAG 1.4.1). */
.list-row.op-slot .slot-icoon{opacity:.7}
/* De badge zegt sinds WCAG 1.4.1 ook óf de toegang loopt ("· actief" / "· inactief") en
   werd daarmee 36px breder. Op 390px hield de leerroutetitel daardoor nog 62px over en
   viel hij uit elkaar over vier regels. `.status` staat standaard op nowrap; op smalle
   schermen mag deze ene badge afbreken, want de titel is het onderscheidende deel van
   de regel en de badge op elke vergrendelde regel dezelfde. */
/* Sinds de badge er "· actief" bij draagt, past hij op smalle schermen niet meer naast de
   titel: die hield op 390px nog 62px over en viel uit elkaar over vier regels. De badge zelf
   laten afbreken loste dat op maar brak de pil — drie regels met "Via" als weesregel, de
   scheidingsstip aan een regeleinde, en een border-radius van 999px die over 61px hoogte een
   stadionvorm wordt.
   Dus niet wringen maar afbreken: de badge zakt naar zijn eigen regel zodra de titel onder de
   150px zou komen. Bewust géén mediaquery — een vaste breedtegrens raadt naar wanneer het
   knelt, terwijl de min-width het precies dán laat gebeuren. `flex:none` is het punt bij de
   badge: zonder dat blijft hij krimpen en kapt hij zijn eigen tekst af. */
.list-row.op-slot{flex-wrap:wrap}
.list-row.op-slot .grow{min-width:150px}
.list-row.op-slot .status{flex:none}
.list-row .slot-icoon{width:18px;flex:none;text-align:center}
.list-row input[type=checkbox].keuzevak{width:18px;height:18px;min-height:0;flex:none}

/* ---- B3.4 Genummerde stappen ("Organisatie met seats") ----
   Uitleg in drie stappen. Bewust een <ol> met een eigen nummer: de nummers zijn onderdeel
   van de uitleg, en het cijfer in een gevulde ronde is dezelfde vorm als .row-icon in een
   .list-row — alleen kleiner en met een cijfer in plaats van een icoon. */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.stappen li{display:flex;align-items:center;gap:var(--space-3);background:var(--kaart);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);font-size:14.5px;color:var(--text)}
.stapnummer{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:var(--bordeaux);font-family:var(--font);font-weight:700;
  font-size:14px;line-height:1}

/* Een reeks .field-blokken die onder elkaar in een kaart staat. .field zet zelf geen marge —
   normaal komt de ruimte van de .grid of .filterbalk eromheen — dus zonder dit plakt het
   label van het volgende veld tegen het invoervak van het vorige. .mt-0 op een kind blijft
   werken: dit blok zet geen marges, alleen een gap. */
.veldstapel{display:grid;gap:var(--space-4)}

/* ---- B3.5 Sprong binnen de pagina ----
   De ankers #deelnemers en #uitnodigingen bestonden al, maar er wees niets naar. Nu wel, en
   dan valt op dat de balk bovenin sticky is: zonder deze regel landt de sprong precies
   ónder die balk en is de kop waar je heen sprong onzichtbaar. Wel de --space-schaal, niet
   de sidebar: de balk is het enige dat over de inhoud heen staat. */
.sprongdoel{display:block;scroll-margin-top:calc(var(--appbar-h) + var(--space-4))}
/* EH-S6-77 (blok 8.2): dezelfde marge op ELK element waar een anker naartoe wijst. De regel stond
   op drie plekken (.sprongdoel, .moduleblok, .modulekaart) en nergens anders, dus landde de kop
   Doen na "Naar formats" op precies 0 px: volledig achter de balk van 68 px. De ankers zijn
   nageteld en staan in het rapport bij 8.2; dit is de lijst met hun doelelementen:
     #main                 het <main> van beide layouts (de skip-link)
     #profiel              de kaart Profiel op /instellingen
     #toegang-wijzigen     de kaart op /beheer/gebruikers/{id}
     #format-nieuw|-upload de twee <details> op /beheer/formats
     #inhoud-{kind}        de kaart per soort in partials/module-inhoud.php
     #inhoud-item-{id}     de rij van één onderdeel in diezelfde partial
     #doen-{module}        de kop van de baan Doen, op het modulescherm (h2) en bij een special (h3)
     #kop-{n}              de tussenkoppen in een kennistekst (Kennisinhoud::metAnkers)
   De rij #onderdeel-{id} van blok 8.1 staat bij .tijdlijn .baanitems, bij het oplichten zelf. */
main[id="main"],
#profiel,
#toegang-wijzigen,
#format-nieuw,
#format-upload,
[id^="inhoud-"],
.tijdlijn h2[id],
.banen .baan-kop h3[id],
.leestekst h2[id]{scroll-margin-top:calc(var(--appbar-h) + var(--space-4))}


/* ==========================================================================
   40. De organisatieomgeving en het sleepvlak — v3.3, 21 augustus 2026
   ==========================================================================
   Groep B/D van het schermregister. Voor deze schermen lag geen ontwerp; ze
   zijn gebouwd door het bestaande systeem (secties 32-36) door te trekken.
   ========================================================================== */
/* ==========================================================================
   B4. Organisatieomgeving en het sleepvlak — 21 augustus 2026
   ==========================================================================
   Twee dingen: de omgeving van de organisatiebeheerder (/organisatie/{id} en de
   vijf schermen eronder) in lijn brengen met het herontwerp, en .dropzone een
   echte vorm geven — dat was het laatste componentje in het platform dat het
   met vier style-attributen deed.

   Zelfde regels als bij sectie 32 t/m 36 van app.css:
   1. Uitbreiden, niet uitvinden. Bestaat er een klasse (.feitenrij, .snel,
      .balklijst, .punt-item, .melding, .status), dan wordt die gebruikt en
      staat hieronder hooguit een bijstelling voor één scherm.
   2. Geen nieuwe kleuren; alles uit de tokens in :root.
   3. .icon krijgt nooit een globale maat — per component gescoopt.
   4. Alle maten op de --space-schaal.

   Bewust NIET gedaan:
   - geen eigen kengetal-component: .metric met .rij/.van/.aandeel/.onder uit
     sectie 32.5 doet op /organisatie precies wat het op /beheer doet
   - geen eigen aandachtspunt: .punt-item (32.8) is hetzelfde onderdeel, en het
     zou nergens op slaan als hetzelfde signaal er voor de organisatiebeheerder
     anders uitzag dan voor de platformbeheerder
   - .dropzone niet in twee maten: het krappe vlak in de tabel gebruikt dezelfde
     regels, alleen met minder padding via .krap
   ========================================================================== */

/* ---- B4.1 Sleepvlak ----
   Het vlak is zelf een <label> om de file-input heen: klikken werkt daardoor
   overal, en de input BLIJFT zichtbaar en focusbaar zodat het met het toetsenbord
   te bedienen is. Een verstopte input met alleen een sleepvlak eromheen zou voor
   een toetsenbordgebruiker een dood vlak zijn.

   Drie toestanden, alle drie ook zonder kleur te zien (rand, achtergrond én
   tekst veranderen): rust, ergens-boven-slepen (.sleep) en bestand-gekozen
   (.gekozen). De klassen worden gezet door public/js/app.js; zonder JavaScript
   blijft de rusttoestand staan en werkt de gewone bestandskiezer. */
/* Over de rand in --line: gemeten haalt die 1,22:1 tegen --offwhite. Dat is onder de
   3:1 die WCAG 1.4.11 voor de omtrek van een bedieningselement vraagt. Ik laat hem
   toch staan, om twee redenen. Ten eerste is --line de standaardrand van het hele
   platform — .button.secondary haalt er 1,28:1 mee, en elk invoerveld en elke tabel
   gebruikt hem ook; dit vlak een eigen, donkerdere rand geven zou het als enige
   onderdeel uit de pas laten lopen. Ten tweede wordt dit vlak niet door zijn rand
   herkenbaar maar door wat erin staat: een vette kop (15,1:1), een uitleg (5,0:1),
   een icoon en een echte bestandskiezer. De toestanden die ertoe doen zijn wél
   ruim in orde: slepen 9,5:1 en gekozen 5,4:1, allebei met een doorgetrokken rand
   en een andere achtergrond, dus ook zonder kleur te onderscheiden.
   Of --line platformbreed omhoog moet, is een ontwerpbeslissing die niet in dit
   componentje thuishoort — die is gemeld. */
.dropzone{
  display:block;
  border:2px dashed var(--line);
  border-radius:var(--radius-lg);
  background:var(--offwhite);
  padding:var(--space-5) var(--space-4);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.dropzone:hover{border-color:var(--bordeaux);background:var(--sand)}
/* De focusring hoort om het hele vlak, niet om de smalle input erin: het vlak is
   wat de gebruiker als knop ziet. */
.dropzone:focus-within{border-color:var(--bordeaux);border-style:solid;
  box-shadow:0 0 0 3px rgba(135,76,13,.14)}
.dropzone .icon{width:24px;height:24px;margin:0 auto var(--space-2);color:var(--bordeaux)}
.dropzone strong{display:block;font-family:var(--font);font-weight:600;font-size:16px;
  color:var(--ink);line-height:1.25}
.dropzone .card-meta{display:block;margin:var(--space-1) 0 0;font-size:13.5px;color:var(--muted)}

/* De bestandskiezer zelf. De knop die de browser tekent is niet op te maken; wat
   er omheen staat wel, en dat is genoeg om hem als onderdeel van het vlak te laten
   lezen in plaats van als een losgeraakt formulierelement. */
.dropzone input[type=file]{display:block;width:100%;max-width:340px;margin:var(--space-4) auto 0;
  padding:var(--space-2) var(--space-3);font-size:13px;color:var(--text);
  background:var(--kaart);border:1px solid var(--line);border-radius:var(--radius-md);
  cursor:pointer}
.dropzone input[type=file]:focus{outline:none}

/* Sleeptoestand: doorgetrokken rand in de merkkleur, zodat het verschil met de
   rusttoestand niet alleen kleur is. Vervangt de twee style-regels die
   public/js/app.js hier eerst rechtstreeks op het element zette. */
.dropzone.sleep{border-style:solid;border-color:var(--bordeaux);background:var(--sand)}

/* Gekozen bestand: groene rand plus de bestandsnaam met een vinkje ervoor. */
.dropzone.gekozen{border-style:solid;border-color:var(--success);background:var(--success-soft)}
.dropzone.gekozen .icon{color:var(--success)}
.dropzone [data-dropzone-name]{display:block;margin-top:var(--space-3);font-size:13.5px;
  font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.dropzone [data-dropzone-name]:empty{display:none}
.dropzone.gekozen [data-dropzone-name]::before{content:"✓ ";color:var(--success);font-weight:700}

/* Het vlak binnen een tabelrij ("Nieuwe versie") heeft minder ruimte. */
.dropzone.krap{padding:var(--space-4) var(--space-3)}
.dropzone.krap .icon{width:20px;height:20px}
.dropzone.krap strong{font-size:14.5px}
.dropzone.krap input[type=file]{margin-top:var(--space-3)}

/* ---- B4.2 Organisatieomgeving ----
   Het startscherm en de vijf schermen eronder gebruiken uitsluitend klassen die er al
   zijn (.metric, .punt-item, .balklijst, .regellijst, .snel, .sectiekop, .melding,
   .voetnoot, .grid.boven). Hieronder staat daarom maar één ding: het uitklaplijstje
   met de onderdelen per deelnemer op /organisatie/{id}/voortgang, dat een
   style-attribuut had. */
.onderdeellijst{min-width:260px}

/* ---- B4.3 Verborgen tekst mag de pagina niet breed maken ----
   .sr-only (app.css regel 133) is position:absolute zonder left. Een absoluut
   gepositioneerd element zonder left/right blijft op zijn STATISCHE plek staan, en
   wordt bovendien niet geknipt door een overflow-voorouder die zelf niet
   gepositioneerd is. In de kop van een brede tabel binnen .table-scroll landt zo'n
   span dus honderden pixels rechts van het scherm, buiten de knip van de tabel, en
   groeit de PAGINA mee: een horizontale schuifbalk over het hele scherm, veroorzaakt
   door tekst die niemand ziet.

   Gemeten op 900 en 560 pixels breed, vóór deze regel:
     /beheer/bestellingen      593px en 697px te breed
     /beheer/abonnementen       19px en 123px te breed
     /organisatie/1/deelnemers  30px en 134px te breed
   In alle drie de gevallen was het uitstekende element een .sr-only in een <th>.

   left:0 zet de span tegen de linkerrand van zijn omsluitende blok. Voor een element
   van 1 bij 1 pixel met clip:rect(0,0,0,0) maakt de plek niets uit — het is en blijft
   onzichtbaar en gewoon voorleesbaar. Alleen de pagina wordt er niet meer breder van.
   .skip-link deelt de regel maar zet bij :focus zelf position:fixed en left:16px, dus
   die verandert niet. */


/* ==========================================================================
   41. Betaling en administratie — v3.3, 21 augustus 2026
   ==========================================================================
   Groep B/D van het schermregister. Voor deze schermen lag geen ontwerp; ze
   zijn gebouwd door het bestaande systeem (secties 32-36) door te trekken.
   ========================================================================== */
/* ==========================================================================
   D. Betaling en administratie — schermgroep D, 21 augustus 2026
   ==========================================================================
   Zeven beheerschermen over geld en over het auditspoor:
   /beheer/producten · /beheer/bestellingen · /beheer/facturen ·
   /beheer/abonnementen · /beheer/aanvragen · /beheer/audit ·
   /organisatie/{id}/facturen, plus /facturen (dezelfde factuurtabel).

   Uitgangspunt: uitbreiden, niet uitvinden. Bestaat er een klasse in sectie
   32 t/m 36 van app.css, dan wordt die gebruikt. Wat hieronder staat is wat
   er in die secties nog niet was. Geen nieuwe kleuren; alles op de
   --space-schaal en de tokens uit :root.
   ========================================================================== */

/* ---- D.1 .tekst-rechts verloor in elke tabel ----
   `.tekst-rechts` (0,1,0) staat in sectie 36.3, maar `.data-table td`
   (0,1,1) zet text-align:left en is specifieker. Gevolg: de drie
   totaalregels onder de bestelregels stonden LINKS, met hun bedrag
   rechts — precies het patroon dat een totaalregel onleesbaar maakt.
   Hier even specifiek geschreven, zodat de hulpklasse in élke tabel
   doet wat hij belooft, niet alleen op dit scherm. */
.data-table td.tekst-rechts,
.data-table th.tekst-rechts{text-align:right}
.data-table td.tekst-midden,
.data-table th.tekst-midden{text-align:center}

/* ---- D.2 Totaalregels onder een tabel ----
   `tfoot` bestond nog nergens in de opmaak; de drie totaalregels van een
   bestelling liepen daardoor naadloos door in de bestelregels erboven.
   Een dubbele scheiding zet het totaalblok apart zonder een nieuw vlak. */
.data-table tfoot td{background:var(--offwhite);border-bottom:0;color:var(--text)}
.data-table tfoot tr:first-child td{border-top:2px solid var(--line)}
.data-table tfoot tr:last-child td{font-size:14px;color:var(--ink)}

/* ---- D.3 Bedragkolom ----
   Een bedrag hoort rechts uit te lijnen (.num, sectie 35.6) én in een kolom
   te staan die niet meebeweegt met de inhoud: anders schuift dezelfde kolom
   op pagina 2 een centimeter op omdat daar toevallig geen ton in staat.
   8,5em draagt "€ 1.509.475,00" (het breedste realistische bedrag) plus de
   celpadding, zonder de tabel op smalle schermen op te rekken. */
.data-table th.bedragkolom,
.data-table td.bedragkolom{min-width:8.5em}

/* ---- D.3b Bedrag invoeren ----
   Het invoerveld voor een bedrag staat in een tabelcel en niet in een `.field`,
   en kreeg daardoor geen enkele regel uit sectie 8 mee: rechte hoeken, harde
   rand, geen focusring — de standaardopmaak van de browser, midden in een
   scherm dat verder overal zacht is afgerond.

   Drie dingen die hier bewust afwijken van een gewoon veld:
   - 36px hoog in plaats van 44px. Vijf rijen naast elkaar met de volle
     formulierhoogte maakt de tabel een halve schermhoogte langer.
   - De breedte is die van het bedrag (6,6em draagt "1.509,00"), niet die van
     de cel. De cel houdt zijn 8,5em uit D.3, zodat deze kolom precies boven
     dezelfde kolom van de weergavetabel erboven blijft staan; het veld schuift
     door de rechtsuitlijning netjes tegen die rechterrand aan.
   - text-align, font-family en font-variant-numeric staan hier apart. Een
     input erft geen van drieën van zijn cel, dus zonder deze regels staan de
     cijfers links in de systeemletter en lopen de bedragen niet onder elkaar. */
.data-table .bedragveld{width:6.6em;height:36px;padding:0 11px;text-align:right;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--kaart);
  border:1px solid var(--line);border-radius:10px;outline:none}
.data-table .bedragveld:hover{border-color:var(--sand-line)}
.data-table .bedragveld:focus{border-color:var(--bordeaux);
  box-shadow:0 0 0 3px rgba(135,76,13,.14)}

/* ---- D.4 Kenmerkkolom ----
   Sleutel-waardetabellen (bestelgegevens, in gebruik) gebruiken
   <th scope="row"> voor de linkerkolom, net als resources/views/
   invitations/detail.php. Een vaste kolombreedte houdt de waarden op één
   lijn; zonder die breedte springt de scheiding per regel. */
.data-table th.kenmerkkolom{width:210px;vertical-align:middle}
/* Op een telefoon is 210px twee derde van de tabel; daar wint de waarde. */
@media (max-width:700px){
  .data-table th.kenmerkkolom{width:auto;white-space:nowrap}
}

/* ---- D.5 Statuspil in een inleidende regel ----
   Vervangt style="vertical-align:middle" in admin/product-edit.php. Een
   .status is inline-flex; in een regel lopende tekst zakt hij zonder dit
   onder de basislijn weg. */
.lead .status{vertical-align:middle}

/* ---- D.6 Productenlijst op smalle schermen ----
   De rij van een product telt zes onderdelen (sleepgreep, icoon, titel,
   status, knop, sorteerpijlen) die alle zes flex:none of nowrap zijn. Onder
   ongeveer 700px past dat niet meer en liep de PAGINA horizontaal over — 75px
   op een telefoon van 390px. Met flex-wrap breekt de rij in twee regels: de
   titel houdt regel één, de bediening zakt naar regel twee. */
@media (max-width:700px){
  .productlijst .list-row{flex-wrap:wrap}
  .productlijst .list-row .row-link{min-width:min(100%,13rem)}
  .productlijst .list-row>.button,
  .productlijst .list-row>form,
  .productlijst .list-row .sort-btns{margin-left:auto}
}

/* ---- D.7 Aanvragen: kolomverdeling ----
   Zonder sturing kreeg "Factuurgegevens" (vrije tekst van de aanvrager) de
   halve tabel en werd de naam van de cursist in vier regels van één woord
   geperst. .wikkel uit sectie 35.6 doet dit al voor analysekolommen; deze
   twee doen hetzelfde voor de naam- en de tekstkolom van een aanvraag.

   Besluit 5 (08-09-2026) gaf Organisatie een eigen kolom, en die kost breedte.
   Gemeten op deze tabel: 1162px met de kolom tegen 1048px zonder, terwijl er op
   een breed scherm 1120px beschikbaar is. Status — juist de kolom waarin de
   beheerder zijn keuze maakt — viel daarmee achter de schuifbalk. De organisatie
   stond hiervoor ONDER de naam, dus de naamkolom heeft die ruimte niet meer
   nodig; samen met de vrije factuurtekst geven ze de 114px terug. */
.data-table td.aanvrager{min-width:150px}
.data-table th.aanvraagtekst,
.data-table td.aanvraagtekst{white-space:normal;min-width:170px;max-width:26ch}

/* ---- D.8 De laatste inline styles uit de producteditor ----
   Sectie 36 bestaat om style="" uit de views te halen; in
   admin/product-edit.php stonden er nog drie. De statuspil ging op .lead
   .status (D.5) en het aanvinkvakje op .keuze uit sectie 36.6. De twee regels
   hieronder zijn wat daar nog naast nodig was. */
/* Een aanvinkregel in een .field: `.field label` (36.3) is specifieker dan
   `.keuze` en zou het label anders weer als blokkop tekenen. Zelfde patroon
   als `.field label.normaal` in sectie 36.3. */
.field label.keuze{display:flex;align-items:center;font-size:13px;font-weight:600;
  text-transform:none;letter-spacing:0;margin-bottom:var(--space-2)}
/* Een opsomming die uitlegt wat een keuze betekent, direct onder die keuze. */
.uitleglijst{margin:var(--space-3) 0 0;padding-left:18px;color:var(--muted);font-size:13px}
.uitleglijst strong{color:var(--ink)}

/* ---- D.10 De balk bovenin past ook op 320px ----
   WCAG 1.4.10 (Reflow, AA) eist dat een pagina bruikbaar blijft tot 320px zonder
   horizontaal schuiven. Gemeten liep de balk daar 31px over — de smalste breedte die het
   ontwerppakket toetst is 390px, dus dit viel er net buiten. Met de feedbackknop erbij
   werd het 89px, dus het moest hoe dan ook opgelost.
   Gemeten opbouw op 320px: menuknop 34 + logo 120 + vier knoppen met 16px tussenruimte
   = 409 tegen 320 beschikbaar. Niets verbergen — alles wat er staat is bereikbaar en de
   zoekknop is op dit formaat het enige pad naar zoeken. Alleen krapper: kleinere
   tussenruimte, kleiner logo en knoppen van 38px (ruim boven de 24px die WCAG 2.5.8
   vraagt). Dat brengt het op ~300px en laat alles staan. */
/* Tussen 785 en 900px liep de pagina over — tot 118px bij een organisatiebeheerder, en
   het accountblok (naam + organisatie op twee regels) werd 106px hoog in een balk van 88.
   Oorzaak gemeten: de feedbackknop voegt ~58px toe en verbreedde een band die zonder hem
   pas onder ~800px begon. De naam onder 780px verbergen deed de stylesheet al; die grens
   ligt nu op 900, want daarboven is er pas ruimte voor. Het accountmenu houdt zijn avatar,
   en de naam staat in dat menu zelf. Hoe breed dit knelt hangt af van hoe lang iemands
   naam en organisatie zijn — vandaar ruim boven de gemeten 900. */
/* De balk had drie tekstelementen die niet konden krimpen — het logovlak, de productnaam
   en het accountblok — plus een zoekveld op `flex:none;width:250px`. Zolang die alle vier
   hun volle breedte opeisen, kán flexbox niets anders dan buiten de balk lopen; de oude
   breekpunten verborgen ze precies op tijd, maar die waren afgestemd op een balk met drie
   knoppen in plaats van vier. Per 5px nagemeten van 320 tot 1600 leverde dat drie losse
   overloopbanden op (485-560, 785-800, 905-960), elk met een andere schuldige.
   Vandaar krimpbaar in plaats van nóg een grens: wie te weinig ruimte heeft levert in en
   kapt af met een beletselteken. Een grens raadt wanneer het knelt; dit merkt het. */
.header-actions{min-width:0}
/* Krimpbaar mag de tékst zijn, niet de knoppen: zonder dit werd de zoekknop 19px bij 485
   en 26px bij 320 — onder de 24px die WCAG 2.5.8 als doelgrootte vraagt. */
.header-actions>.icon-button,.header-actions .bell-summary{flex:none}
@media (max-width:900px){
  .account-meta{display:none}
  /* De brede zoekbalk staat op `flex:none` met een vaste 250px en kan dus niet krimpen;
     daardoor liep `.header-actions` in deze band buiten de balk (gemeten 805 in een balk
     die op 766 eindigt). Onder 780px wisselde de stylesheet al naar de zoekknop — die
     grens ligt nu op 900, precies waar het knelt. Zelfde patroon, andere grens. */
  .global-search{display:none}
  .header-actions .search-mobile{display:grid}
}
@media (max-width:600px){
  /* Met de feedbackknop erbij staan er vier knoppen in de rij; op 560px liep de balk
     daardoor 6px over. De tussenruimte is hier het goedkoopste wat je kunt inleveren. */
  .header-actions{gap:10px}
}
/* WCAG 1.4.10 (Reflow) rekent tot 320px. Daar duwden zes schermen de pagina uit met
   inhoud die niet mág afbreken: `.button` en `.status` staan op `white-space:nowrap`
   (goed op een breed scherm, want een knoplabel over twee regels leest slecht), en
   `.kop-icoon` is een flexrij waarin een lange paginatitel niet onder zijn min-content
   kan zakken. Gemeten: een knop van 367px en een titel van 368px in 296px ruimte.
   Op deze breedte weegt "past op het scherm" zwaarder dan "staat op één regel". */
/* Regel 484 zet al `.card,.hero-card,.prose,.auth-card{padding:17px}` onder 480px, maar
   die verliest van `.card{padding:var(--space-5)}` in sectie 32.5 — gelijke specificiteit,
   later in het bestand. Dat is voor de derde keer dezelfde cascadefout (zie ook
   `.module-accordion` en `a.card.leren-kaart`). Gemeten op 320px: kaarten hielden 24px
   vulling, dus 48px van de 320 ging op aan wit langs de randen. */
@media (max-width:480px){
  /* Zonder .auth-card, en dat is het punt. Regel 1879 zet die bewust op 24px voor
     ≤560px, mét een comment dat uitlegt waarom: anders houdt de inlogkaart op een
     telefoon te weinig marge over. Zou ik hem hier meenemen, dan wint deze regel
     (later, gelijke specificiteit) en breek ik precies die reparatie weer. Dat is in
     dit bestand nu vier keer gebeurd; deze keer bijna door mijzelf. */
  .card,.hero-card,.prose{padding:17px}
}
@media (max-width:400px){
  .button,.status{white-space:normal}
  .kop-icoon{flex-wrap:wrap}
  /* `.page-head h1{overflow-wrap:break-word}` (regel 1401) is specifieker dan een kale
     `h1` en wint dus ongeacht de volgorde — vandaar hier dezelfde selector. En `anywhere`
     in plaats van `break-word`, want alleen `anywhere` telt mee in de min-content-breedte;
     met break-word bleef "Voortgangsoverzicht" één blok van 325px in 296px ruimte. */
  h1,h2,.page-head h1{overflow-wrap:anywhere}
  /* Het statusblok bij een leerroute-onderdeel is een flexrij van 302px in een regel van
     246px; de rij eromheen mocht al afbreken, dit blok zelf niet. `min-width:0` op het
     keuzemenu is het punt — zonder dat blijft een <select> op zijn min-content staan. */
  .statusform{flex-wrap:wrap;min-width:0}
  .statusform select{min-width:0}
}
@media (max-width:400px){
  .appbar{padding:0 10px;gap:6px}
  /* Het logo van opmaak v3.0 is 700x217, dus 3,23:1 — smaller per hoogte-eenheid dan de
     4:1-balkvariant die hier tot 28 augustus 2026 stond. Op de oude 19px werd het daarom
     maar 61px breed en was het woord ONLINE onleesbaar.
     24 en niet 30: een beheerder heeft één knop méér in de balk dan een deelnemer (de
     meldingenbel). Op 30px is het logo 97px breed en loopt /beheer op 320px 15px over;
     op 24px is het 78px — vrijwel exact de 76px die de oude balkvariant innam, dus de
     balk houdt de ruimte die hij had. Nagemeten op 320, 325 en 330. */
  .brand-logo{height:24px}
  /* 4px en niet 6: met vier knoppen die niet meer mogen krimpen kwam de rij op 320px
     precies 2px tekort. Drie tussenruimtes van 2px minder is genoeg. */
  .header-actions{gap:4px}
  .avatar{width:30px;height:30px}
  .fb-fab,.bell-summary{width:38px;height:38px}
  .fb-fab svg,.bell-summary svg{width:16px;height:16px}
}

/* ---- D.9 Een kop die zijn niveau loskoppelt van zijn maat ----
   Op 37 schermen sprong de koppenvolgorde van <h1> naar <h3>. Soms een kale sprong
   (meldingsvoorkeuren), soms doordat de tussenliggende <h2>-secties achter een rolcheck
   staan en voor die rol niet renderen (instellingen bij een cursist). Een screenreader
   die op koppen navigeert mist dan een niveau en denkt dat er inhoud is overgeslagen.

   Het niveau hoort dus omhoog, maar de MAAT niet: 18px/600 komt uit het ontwerp, en een
   <h2> is 24px/700. Deze klasse houdt de maat waar de betekenis om een <h2> vraagt.
   Bewust geen `.card h2{font-size:18px}`: er staan al 181 <h2>'s in de views, waarvan
   veel binnen een kaart, die hun huidige maat moeten houden. */
.kop-klein{font-size:18px;font-weight:600;line-height:1.14;margin-bottom:7px}
/* Let op de twee waarden hierboven, want ik had ze eerst allebei mis.
   `line-height` is 1.14 en niet de 1.28 van `h3{}` op regel 204: regel 782 zet
   `h1,h2,h3,h4{line-height:1.14}` en staat later, dus dát is de h3 die je op het scherm
   ziet. Overschrijven vanuit de eerste regel die je tegenkomt levert een kop op die 2,5px
   hoger wordt — gemeten 20,52px tegen 23,04px.
   `margin-bottom` staat er omdat h3 7px heeft en h2 12px; zonder deze regel kregen de
   omgezette koppen er 5px witruimte bij. De ruimteklassen uit 36.99 staan later en winnen
   hier nog steeds van, dus een kop met mb-2 of m-0 houdt zijn eigen marge. */
/* Eén niveau dieper. Waar een kaartkop naar <h2> ging, moesten de koppen daarbínnen mee
   van <h4> naar <h3> — anders ruil je een sprong 1→3 in voor een sprong 2→4. Dit is hun
   maat, die eerder als `style="font-size:15px"` in zes views stond. */
.kop-mini{font-size:15px;font-weight:600}

/* ---- D.9 .table-actions op een <td> haalde de cel uit de tabel ----
   `.table-actions` (app.css 348) is `display:flex`. Op een <div> klopt dat,
   maar op een <td> haalt het de cel uit het kolommodel van de tabel: de cel
   wordt een los blok, de rijlijn stopt ervoor en de knoppenkolom lijnt niet
   meer uit met zijn kop. Zichtbaar op /beheer/facturen, /beheer/bestellingen
   en /beheer/abonnementen — en op nog zeven schermen buiten deze groep, want
   het patroon <td class="table-actions"> staat op dertien plekken in de views.
   Daarom hier als één regel op de tabelcel in plaats van dertien keer in een
   view: de cel is weer een cel, de kinderen staan naast elkaar op een regel. */
.data-table td.table-actions{display:table-cell}
.data-table td.table-actions>*{vertical-align:middle}
/* <form> en <details> zijn blokken; inline-block houdt ze naast de knop ernaast,
   zoals de flexversie deed. */
.data-table td.table-actions>form,
.data-table td.table-actions>details{display:inline-block}
.data-table td.table-actions>*+*{margin-left:var(--space-2)}


/* ==========================================================================
   42. Het kaartenraster op een halfbreed scherm — 21 augustus 2026
   ==========================================================================
   Uitbreiden, niet uitvinden: één breekpunt op een bestaande klasse, geen nieuwe
   klassenamen, geen nieuwe kleuren.
   ========================================================================== */

/* ---- 42.1 .leren-kaarten liet op 900px een halve kolom leeg ----
   `repeat(auto-fill, minmax(280px, 320px))` (app.css 666) telt zijn kolommen met de
   MAXIMALE spoormaat zodra die een vaste lengte is — dat is wat de rasterspecificatie
   voorschrijft, en 320px is een vaste lengte. Het aantal kolommen is dus
   floor((breedte + 22) / 342), niet floor((breedte + 22) / 302) zoals de 280px doet
   vermoeden. Gemeten in de inhoudskolom naast de zijbalk:

     scherm 1600 -> 1120 beschikbaar -> 3 kolommen van 320
     scherm 1366 -> 1030             -> 3 kolommen van 320
     scherm 1100 ->  764             -> 2 kolommen van 320
     scherm  900 ->  624             -> 1 kolom  van 320, met 304px ernaast leeg
     scherm  560 ->  528             -> 1 kolom  van 320, met 208px ernaast leeg

   Op 900px is dat de helft van de inhoudskolom wit naast één kaart, terwijl er twee
   kaarten van 280px pásten. Onder dit breekpunt telt het raster daarom met 260px en
   mogen de kolommen de restruimte verdelen (1fr). Dat geeft op 900px twee kolommen van
   301px en op een telefoon één kaart die de volle breedte pakt in plaats van 320px met
   wit ernaast. Boven het breekpunt blijft de vaste maat staan: daar is "kaarten rekken
   niet mee met de schermbreedte" precies de bedoeling uit de oorspronkelijke regel.

   Raakt /leren, /leren-videos, /leren/{id}/videos, /leren/{id}/simulaties en
   /mijn-leerroutes — alle vijf schermen die dit raster nog gebruiken. Dat is een
   kortere lijst dan de opsommingen in B1 ("Bewust NIET aangeraakt") en 38: /coaching,
   /leren-formats en /leren/{id}/simulaties staan sinds deze ronde op de regellijst,
   want daar bestaat geen eigen beeld om te tonen. Die twee blokken beschrijven hun
   eigen ronde; deze regel beschrijft de huidige stand. */
@media (max-width:1050px){
  .leren-kaarten{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}


/* ==========================================================================
   43 De zijbalk past op een korte laptop
   ==========================================================================
   Controlelijst van het pakket: "De zijbalk past zonder scrollen op een
   schermhoogte van 760 pixels." Dat punt was als enige van de zes nooit
   nagemeten. Gemeten op 1440x760 — de zijbalk krijgt daar 100vh - 88px = 672px:

     platformbeheerder    1010px nodig    338 te veel
     deelnemer             740px nodig     68 te veel
     organisatiebeheerder  672px nodig     past precies

   Het is nooit gehaald. Ook vóór de ruimere maatvoering van 32.3 niet: toen had
   de beheerder 728px nodig. De oorzaak is dat het ontwerp een handvol menu-items
   veronderstelde en de platformbeheerder er twintig heeft, in vier groepen.

   Ontleding van die 730px in de compacte maat: 20 knoppen, 4 groepskoppen, de
   hulpregel onderaan, de vulling van de zijbalk zelf en de tussenruimten. Er is
   geen post die je kunt schrappen zonder navigatie weg te halen, dus het moest
   uit de maatvoering komen: knoppen van 27 naar 24px, koppen krapper, en de
   hulpregel op één compacte regel.

   Eén breekpunt, niet twee. Een tussenstap op 900px klonk logisch maar mat
   slechter: tussen 800 en 900 paste hij dan nog steeds niet, en een halve
   oplossing in een band waar je hem niet verwacht leest als een fout. Dit
   breekpunt is daarom gedimensioneerd op de krapste maat die het pakket noemt
   (672px). Boven 900px staat de ruime versie van 32.3 onaangeroerd; daaronder
   heeft elke hoogte tot en met 760px ruimte over.

   Alleen bestaande klassen en alleen verticale maten. Kleur, uitlijning,
   pictogrammen en volgorde blijven gelijk — een korte laptop krijgt hetzelfde
   menu, niet een ander menu.

   Wat hiermee NIET is opgelost, en dat is gemeten en geen aanname: de ruime
   versie van het beheermenu heeft 1010px nodig en past dus pas vanaf een venster
   van 1098px. Tussen 901 en 1097px scrollt de zijbalk van de platformbeheerder,
   met een maximum van 98px op een gangbaar 1080p-venster. Het breekpunt
   daarvoor omhoog trekken zou betekenen dat vrijwel elke laptop de compacte
   versie krijgt en de ruimere maatvoering alleen op een groot scherm bestaat —
   dat is niet wat er gevraagd is. Het pakket noemt één maat, 760px, en die
   wordt gehaald. Deze band is een bewuste keuze, geen restfout. */
@media (max-height:900px){
  /* De tweedelige balk kost de zijbalk bovenaan ruimte die hij eerder niet kwijt was:
     het logovlak is 108px hoog terwijl de balk op 76px eindigt, dus het valt over de
     bovenste 32px van de zijbalk heen. Met de oude padding van 8px stond het eerste
     menu-item daar deels achter — onzichtbaar en onaanklikbaar.
     Op een kort venster is 108px te duur. Het vlak is hier daarom 88px en het logo
     60px: dan hoeft er 12px vrijgehouden te worden in plaats van 32, en kost de
     nieuwe balk de compacte zijbalk netto 12px in plaats van 50. */
  .sidebar{padding:20px var(--space-3) var(--space-3)}
  .nav{gap:1px}
  .nav-label{margin:10px 10px 4px}
  .nav-label:first-child{margin-top:2px}
  .nav+.nav-label{margin-top:var(--space-3)}
  .nav-button{padding:3px 11px;font-size:13.5px;line-height:1.32}
  .nav-button .icon{width:16px;height:16px;margin-top:1px}
  .sidebar-help{margin-top:var(--space-2);padding:6px 11px;font-size:12.5px}
}


/* H6 punt 1: hier stond `@media (max-height:900px) and (min-width:781px)` met opnieuw
   `.merkzone{height:88px}` en `.brand-logo{height:60px}`. Dat was de derde plek met dezelfde
   twee getallen, en de reden dat het logo op één vensterhoogte wél heel bleef en daarbuiten
   niet: zodra het venster hoger werd dan 900px viel de pagina terug op 108/84 en verdween
   het woord ONLINE achter de kleurenbalk. De basisregels rekenen nu met --appbar-h en geven
   dezelfde 88/60 op elke vensterhoogte, dus deze uitzondering is vervallen. */

/* ==========================================================================
   44 De laatste style-attributen uit de views
   ==========================================================================
   De regel van het pakket luidt: "Geen style-blok in een pagina en geen
   style-attribuut op een element, behalve de breedte van een balk of staaf, die
   uit de gegevens komt." Na de schermronde stonden er nog 30, waarvan er 7 zo'n
   balkbreedte waren. De overige 23 waren gewoon opmaak op de verkeerde plek en
   staan hier.

   Eén blijft er inline, bewust: de posterafbeelding van een videomodule
   (learner/module.php). Dat is een bestandspad uit de database, net zo goed een
   waarde-uit-de-gegevens als een balkbreedte, en er is geen klasse denkbaar die
   hem kan bevatten. Hem alsnog weghalen zou een <img> in .video-player vragen,
   en dan moeten de z-index van :before, .play, .video-caption en
   .video-stub-note alle vier mee — vier regels risico op een scherm waar het
   pakket niets over zegt, om één attribuut te besparen. Niet gedaan.
   ========================================================================== */

/* Een <ul> die wél zijn bolletjes houdt (anders .schoon-lijst) maar niet 40px
   inspringt zoals de browser standaard doet. */
.opsomming{padding-left:20px}

/* Tweestapsverificatie: het vlak om de QR-code en de code zelf. Twee schermen
   deden dit met twee verschillende inline sets. */
.qr-vlak{width:132px;height:132px;background:var(--kaart);border:1px solid var(--line);
  border-radius:12px;padding:8px}
.qr-code{border:1px solid var(--line);border-radius:var(--radius-md)}

/* Een kaart die af is (demo-checklist). Groen, met dezelfde zachte vulling als
   .card.signaal.fout aan de andere kant van het spectrum. */
.card.gedaan{border-color:var(--line);background:var(--success-soft)}

/* De merkvariant van .alert: geen fout, geen bevestiging, maar een inleiding. */
.alert.merk{background:var(--sand);border:1px solid var(--line);color:var(--wine);
  border-radius:12px;padding:12px 16px}

.smal-240{max-width:240px}

/* Een <fieldset> als zichtbaar kader, met de legenda in de rand. */
.kaderveld{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.kaderveld>legend{padding:0 6px}

/* De tegenhanger: een <fieldset> die alléén groepeert (om de toegankelijkheid van een
   radiogroep), zonder eigen kader. Gebruik deze binnen een .card — een kader in een
   kader geeft de vraag een andere kantlijn dan de velden eronder, en dat leest als
   scheefstand. De legenda krijgt exact de vorm van .field label, zodat twee vragen
   onder elkaar op dezelfde x beginnen. min-width:0 vanwege de vaste minimumbreedte
   die een fieldset van zichzelf heeft; die breekt anders flex- en gridkinderen. */
.veldgroep{border:0;padding:0;margin:0;min-width:0}
.veldgroep>legend{padding:0;font-size:11.5px;font-weight:750;margin-bottom:5px}

/* Een blok tekst dat in zijn geheel te selecteren hoort te zijn: een token, een
   sleutel. user-select:all zodat één klik de hele waarde pakt. */
.codeblok{background:var(--canvas);padding:12px;border-radius:8px;
  overflow-x:auto;user-select:all}

/* Foutpagina in debugstand: de stacktrace mag schuiven, niet de pagina. */
.foutdump{overflow:auto;font-size:.8rem}

/* Twee kolommen waarvan de linker het werk doet en de rechter een vaste
   minimumbreedte houdt (bewerkscherm met voorbeeld ernaast). */
.grid.two.werkkolom{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}

/* Het voorbeeldvenster van een mailsjabloon. */
.voorbeeldframe{width:100%;height:560px;border:1px solid var(--line);
  border-radius:14px;background:var(--kaart)}

/* Twee kolombreedtes die per tabel verschillen; .sleutelkolom (45%) is te breed
   voor de ene en te smal voor de andere. */
.data-table th.kolom-34{width:34%}
.data-table th.naamkolom{width:220px}

/* Een keuzelabel naast een radio of checkbox, in de maat van een veldlabel. */
.keuzelabel{font-weight:600;font-size:12.5px;display:inline-flex;gap:6px;
  align-items:center}

/* Een bestandskiezer die naast andere velden in een rij staat. */
.bestandsveld{font-size:12px;max-width:200px}

/* Een productafbeelding in het aanbod: nooit hoger dan de kaart aankan. */
.aanbod-beeld{max-height:150px;border-radius:12px}

/* Kaartvoet waarin de onderdelen onder elkaar staan in plaats van naast elkaar. */
.kaartvoet.gestapeld{flex-direction:column;align-items:stretch;gap:10px}
/* Een statuspil in zo'n gestapelde voet rekt anders mee met de volle breedte. */
.zelf-links{align-self:flex-start}

/* Tegenhanger van .list-row.onder (36.11). */
.list-row.boven{align-items:flex-start}
/* Hier stond .list-row.verborgen-reactie: het gedimde pictogram van een verborgen
   reactie. Die regel styleerde uitsluitend het reactieblok op de kennistekst en is
   met dat blok vervallen (T-21). */

/* Een kort getalveld binnen een filterbalk. .actieform/.veldregel hadden .kort
   al; de filterbalk viel er alleen buiten. */
.filterbalk .kort{flex:none;width:90px;min-width:0}


/* ==========================================================================
   45 Twee statussen onder elkaar in één tabelcel
   ==========================================================================
   /beheer/bestellingen had elf kolommen en 1331px nodig. De inhoudskolom naast de zijbalk
   is op een 1600px-scherm 1120px, op 1366px nog 1030px — er viel dus altijd iets achter de
   eigen schuifbalk van de tabel, tot 301px, zonder dat het scherm dat aangeeft.

   Zeven kolommen nu, met dezelfde gegevens: statussen die bij elkaar horen staan onder
   elkaar in één cel in plaats van naast elkaar in vier kolommen. Dat is hetzelfde patroon
   dat de kolom Klant al gebruikte (naam boven, e-mailadres eronder) en dat .klein al kende.
   ========================================================================== */
.data-table td.statusstapel{display:table-cell}
.data-table td.statusstapel .status{display:inline-flex;margin:1px 0}
.data-table td.statusstapel .status+.status{margin-top:3px}
.data-table td.statusstapel>.status{float:left;clear:left}
.data-table td.statusstapel::after{content:"";display:block;clear:both}
.data-table td.statusstapel .klein{clear:both;padding-top:2px}

/* ==========================================================================
   46 Rapportage — de trechter, het gebruiksblok en het organisatiebeeld
   ==========================================================================
   Naar `docs/overdracht/rapportage_mockup.html`, de uitgewerkte mockup bij
   06_RAPPORTAGE_DEFINITIES (goedgekeurd 27 augustus 2026).

   Zelfde regels als bij sectie 35, waar de rest van de rapportage staat:
   1. Nieuwe opmaak staat HIER, onderaan, niet tussen de bestaande secties.
      Alleen 36.99 (de ruimteklassen) blijft daaronder — zie de toelichting daar.
   2. Bestaande klassen worden hergebruikt waar ze passen: de grafiek is
      .weekstaven uit 35.5, de tabel is .data-table.compact uit 35.6 en de
      privacyregel is .melding.privacy uit 35.4. Wat hier bij komt is alleen
      wat er nog niet was.
   3. .icon krijgt nooit een globale maat — per component gescoopt.

   Bewust NIET overgenomen uit de mockup:
   - `.kaart` als losse klasse. Die naam ligt te dicht bij .kaart-afbeelding en
     .kaartvoet (sectie 32) en zou als bare klasse elke toekomstige .kaart-*
     kunnen raken. De kaartopmaak zit daarom in .stap, .orgkop en .opvalt zelf.
   - De schakelknoppen "Alle organisaties / Gemeente Voorbeeldstad" bovenaan.
     Dat is in de mockup een demonstratiehulpje; in de applicatie is het
     organisatiefilter zelf die schakelaar (§1).
   - `.sein.goed / .aandacht / .stil` bij de laatste activiteit. §7 zegt
     uitdrukkelijk: geen gekleurde signaallabels per organisatie. Er staat een
     datum, en die spreekt voor zichzelf.
   ========================================================================== */

/* ---- 46.1 De trechter en het gebruiksblok ----
   Drie kaarten naast elkaar. Het gebruiksblok deelt de opmaak maar krijgt een
   lichtere balk: het is geen trechter, en dat verschil hoort zichtbaar te zijn
   zonder dat je de kop leest. */
.trechter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  margin-top:var(--space-4)}
.stap{position:relative;background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:var(--space-5) var(--space-5) var(--space-4);display:flex;flex-direction:column}
.stap .naam{font-size:14.5px;font-weight:600;color:var(--muted)}
.stap .getal{font-family:var(--font);font-size:34px;font-weight:700;color:var(--ink);
  line-height:1.05;margin:10px 0 2px}
.stap .getal.afgeschermd-getal{color:var(--grey-soft)}
.stap .aantal{font-size:13px;color:var(--muted)}
.stap .staaf{display:block;height:6px;border-radius:999px;background:var(--line-soft);
  margin-top:var(--space-4);overflow:hidden}
.stap .staaf i{display:block;height:6px;background:var(--accent)}
.trechter.gebruiksblok .stap .staaf i{background:var(--sand-line)}
.stap .uitleg{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;
  margin-top:var(--space-3)}

/* Het verschil met het platformgemiddelde (§4b). Kleur is een oordeel — hoger of
   lager dan gemiddeld — maar het teken draagt de betekenis: er staat altijd een
   + of − bij, dus de informatie zit nooit alleen in de kleur. */
.stap .verschil{position:absolute;top:var(--space-4);right:var(--space-4);
  font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.stap .verschil.op{background:var(--success-soft);color:var(--success)}
.stap .verschil.neer{background:var(--danger-soft);color:var(--danger)}
.stap .verschil.gelijk{background:var(--info-soft);color:var(--info)}

/* ---- 46.2 Afgeschermde cijfers (§8) ----
   Onder vijf deelnemers staat er geen percentage maar de reden. Cursief en in de
   gedempte kleur, zodat het als toelichting leest en niet als waarde. */
.afgeschermd{color:var(--muted);font-style:italic;font-size:13.5px}
.data-table td.afgeschermd{white-space:normal}

/* ---- 46.3 De regel onder de grafiek (§6) ----
   "Een trend zonder vergelijking is geen trend." De regel staat direct onder de
   staven, in gewone taal, met het gemiddelde vet. */
.trendregel{margin-top:var(--space-4);font-size:15px;color:var(--text);max-width:70ch}
.trendregel strong{color:var(--ink)}

/* ---- 46.4 De kop van het organisatiebeeld (§4b) ----
   Vier harde feiten naast elkaar: seats, looptijd, verlenging, aantal leerroutes.
   Zelfde ritme als .feitenrij (35.3), maar met een label in kapitalen erboven,
   zoals de mockup het toont. */
.orgkop{background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:var(--space-5) var(--space-5) var(--space-5);margin-top:var(--space-4)}
.orgkop>h2{margin:0}
.orgfeiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);
  margin-top:var(--space-4)}
.orgfeiten span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:var(--grey-soft)}
.orgfeiten strong{display:block;font-family:var(--font);font-size:17px;color:var(--ink);
  margin-top:3px}

/* ---- 46.5 "Wat opvalt" in het organisatiebeeld (§4b) ----
   Feiten, geen advies — dus geen categorielabel, geen knop en geen actieregel
   zoals bij .bevinding (35.2). Alleen een opsomming die je kunt voorlezen. */
.opvalt{background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:var(--space-5);margin-top:var(--space-4)}
.opvalt ul{margin:0;padding:0;list-style:none}
.opvalt li{position:relative;padding:9px 0 9px 22px;font-size:15px;color:var(--text);
  border-top:1px solid var(--line-soft)}
.opvalt li:first-child{border-top:0;padding-top:0}
.opvalt li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--bordeaux)}
.opvalt li:first-child::before{top:8px}

/* ---- 46.6 Kleinere schermen ----
   Drie kaarten worden er twee en daarna één; de tabel schuift binnen zijn eigen
   .table-scroll, nooit de pagina zelf. */
@media (max-width:900px){
  .trechter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orgfeiten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .trechter{grid-template-columns:1fr}
  .orgfeiten{grid-template-columns:1fr}
  .stap .getal{font-size:30px}
  .stap .verschil{position:static;align-self:flex-start;margin-bottom:var(--space-2)}
}



/* ==========================================================================
   47 De vier banen — Kijken · Lezen · Doen · Oefenen
   ==========================================================================
   Naar de deelnemerspreview in `docs/overdracht` (schermen route1, route2 en module)
   en spec §2.4, §2.5 en §2.6. Vervangt `.modulelijst` (één regel per module met een
   samenvattingszin) en het gebruik van `.stappen` op de modulepagina (één ongegroepeerde
   lijst). `.modulelijst` is hierboven verwijderd, want die had verder geen gebruikers;
   `.stappen` blijft staan voor de onboardingstappen in het beheer (sectie 39).

   Zelfde regels als sectie 46:
   1. Nieuwe opmaak staat HIER, onderaan; alleen 36.99 blijft eronder.
   2. Bestaande klassen worden hergebruikt: de statusvlag is `.status` uit sectie 5,
      de knop is `.button.secondary.small`, de voortgangsbalk blijft `.voortgangregel`.
   3. `.icon` krijgt nooit een globale maat — per component gescoopt.

   GEEN nieuwe kleuren. De preview zet vier eigen accenten (#7B0041, #4E5E7A, #8A5C00,
   #5E5D61); die zijn hier op de bestaande tokens gelegd, in dezelfde volgorde en
   dezelfde toon: merk, blauwgrijs, goud, neutraal. Twee palletten naast elkaar is
   vragen om drift, en de contrastwaarden van deze vier zijn al getoetst.
   ========================================================================== */
/* W-21 (09-09-2026): "Gebruik bordeaux #7B0041 voor Kijken, grijs #717074 voor Lezen en oranje/geel #F6A924 met
   donkere tekst voor Doen. Houd de tekst donker. Gebruik de kleur alleen in het icoon en het icoonvlak, niet als
   gekleurde hele rij." Hier stonden Kijken en Lezen allebei op een beige vlak met gekleurde tekst, en was de hele
   Doen-chip geel. Nu: `--baan-vlak` is het icoonvlak in de baankleur, `--baan-icoon` het icoon daarop (papier op
   bordeaux en grijs, donker op geel), en tekst, kop en rijbolletje zijn neutraal. Oefenen valt buiten W-21 en houdt
   zijn neutrale vlak. Gerichte controle vóór stap 9. */
.baan.kijken,.baanchip.kijken,.vlag.kijken{--baan-vlak:var(--wine);--baan-icoon:var(--paper)}
.baan.lezen,.baanchip.lezen,.vlag.lezen{--baan-vlak:var(--grey);--baan-icoon:var(--paper)}
.baan.doen,.baanchip.doen,.vlag.doen{--baan-vlak:var(--yellow);--baan-icoon:var(--ink)}
/* S6-90 (20-09): Oefenen krijgt magenta, net als de andere drie hun eigen kleur hebben. Het stond
   op --soft-grey met een gedempt icoon, omdat de soort nog niet gekozen leek; de meting van
   20-09 wees uit dat `simulatie` al volledig in het platform zit en al op het scherm staat, dus
   is dit opmaak en geen aanleggen (S6-48/S6-54 blijven gelden voor de koppeling zelf).
   Nagerekend met --paper (#FBFAF8) als icoonkleur, niet met puur wit — de les uit RV-S6-26:
   #FBFAF8 op #C30066 = 5,73:1, ruim boven de 4,5:1. Ter vergelijking haalt Kennismodule 4,71:1
   op hetzelfde vlak, dus deze zit aan de veilige kant van wat er al stond. */
.baan.oefenen,.baanchip.oefenen,.vlag.oefenen{--baan-vlak:var(--magenta);--baan-icoon:var(--paper)}

/* Het gekleurde icoonvlak van een baan. */
.vlag{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--baan-vlak,var(--sand));color:var(--baan-icoon,var(--bordeaux))}
.vlag .icon{width:17px;height:17px}

/* --- de modules op de leerroutepagina: uitklapbaar ---------------------- */
/* Blok 15: de modules staan als kaarten in een raster van drie, niet meer als uitklapblokken
   onder elkaar (RV-S6-114, ontwerp v10). auto-fill met een minimum van 280px in plaats van een
   vast repeat(3,1fr): dan vallen het er twee op een tablet en één op een telefoon zonder dat daar
   drie mediaregels voor nodig zijn. */
.modules{margin-top:var(--space-4);display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--space-4);align-items:stretch}
/* De kaart is papier zonder rand en zonder streep links (opdracht 20-09). Hier stond een lijn van
   1px; de kaart moest zich onderscheiden van de zandkleurige pagina, en dat doet het verschil
   tussen #FBFAF8 en #F3EEE8 nu zelf. De huidige module is herkenbaar aan het kopje en de gevulde
   stand, niet aan een rand of een gekleurde kaart. */
.moduleblok{background:var(--kaart);border-radius:var(--radius-lg)}
/* Stap 5 (13-09-2026, W-17.1): Vorige/Volgende module schuift het blok in beeld (app.js); zonder
   deze marge viel de moduletitel onder de vaste appbalk. Zelfde regel als .sprongdoel (B3.5). */
.moduleblok{scroll-margin-top:calc(var(--appbar-h) + var(--space-4))}
/* EH-S6-56 (blok 9.9) — GEMETEN, NIETS GEBOUWD.
   De regie mat op de server dat `.moduleblok[open]` alleen een schaduw krijgt en de dunne lijn
   links mist. In deze werkmap heeft dat besluit geen onderwerp meer: sinds blok 15 (RV-S6-114)
   klapt de modulekaart op de leerroutepagina niet meer open — dat is `.modulekaart`, een kaart
   waar je doorheen klikt naar een eigen pagina. `.moduleblok` bestaat nog op precies één plek,
   `learner/leren-special.php:169`, als de ENIGE kaart van een special, en die staat altijd
   `open`. Een lijn die "deze kaart staat open" betekent, zegt daar niets.
   Opnamen van beide kaarten liggen bij de oplevering; de regie beslist of de lijn er alsnog
   komt, en zo ja waarop. */
.moduleblok[open]{box-shadow:var(--shadow-soft)}
/* De kaart van een module, opmaak van 20-09 (besluit S6-65, deel A).

   Vier kolommen: 120 voor het nummer met het beeld eronder, de naam met de toelichting, 260 voor
   de onderdelen, 24 voor het pijltje. Grid en niet flex-wrap zoals hiervoor: de vorige opzet liet
   de chiprij naar een eigen regel zakken zodra hij niet paste, en dan stond de kaart per module
   anders. Met vaste kolommen staan naam, onderdelen en pijltje bij elke module op dezelfde plek.

   De kaart is nu de gewone kaartkleur zonder rand en zonder streep links: de huidige module is
   herkenbaar aan zijn gevulde stand onderaan ("Je bent hier gebleven"), niet aan een lijst of een
   andere kaartkleur. Tot RV-S6-25 stond er ook een kopje boven de naam; dat is eruit. */
/* PUNT 46 uit v4.62 (S6-964), variant B. HIER STOND een derde kolom van 260 px met de rij
   onderdelen RECHTS, onder elkaar. De linkerkant hield dan alleen de titel en het statuslabel
   over en daaronder viel een leeg vlak, dat groeide met het aantal onderdelen. Nu: titel
   bovenaan, het statuslabel eronder, en daaronder de onderdelen op ÉÉN rij over de volle breedte
   van de kaart. De plekken staan in `grid-template-areas`, zodat de rij ook onder het beeld
   doorloopt en echt de hele kaartbreedte pakt. */
.moduleblok>summary{display:grid;
  grid-template-columns:120px minmax(0,1fr) 24px;
  grid-template-areas:"beeld kern chev" "rij rij rij";
  gap:var(--space-4);align-items:start;
  padding:var(--space-4) var(--space-5);cursor:pointer;list-style:none;border-radius:var(--radius-lg)}
.moduleblok>summary>.kaartlinks{grid-area:beeld}
.moduleblok>summary>.kern{grid-area:kern}
.moduleblok>summary>.banenrij{grid-area:rij}
.moduleblok>summary>.chev{grid-area:chev}
.moduleblok>summary::-webkit-details-marker{display:none}
.moduleblok>summary:hover{background:var(--offwhite)}
.moduleblok>summary:focus-visible{outline:2px solid var(--bordeaux);outline-offset:-2px}
.moduleblok[open]>summary{border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom:1px solid var(--line-soft)}

/* Kolom 1: het nummer met het beeld eronder, gecentreerd. */
.moduleblok .kaartlinks{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.moduleblok .nr{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:var(--ink);font-family:var(--font);font-weight:700;font-size:15px}
/* Het beeld is een vierkant van 120 bij 120 met ronde hoeken. Zonder afbeelding blijft het vak
   leeg staan in plaats van te verdwijnen, anders zakt de kolom in en verspringt de kaart. */
.moduleblok .modulebeeld{width:120px;height:120px;border-radius:var(--radius-lg);
  object-fit:cover;display:block}
.moduleblok .modulebeeld.leeg{background:var(--kaart-vlak)}

/* Kolom 2: het kopje, de naam, de toelichting, en onderaan de stand.
   De kolom is zo hoog als de kaart, zodat `margin-top:auto` de stand op de hoogte van de
   onderste regel rechts zet — dat is wat "de knop staat linksonder" vraagt. */
/* Punt 46 (S6-964): `align-self:stretch` is eruit — de kern rekte zich over de hoogte van de
   rij ernaast, en dat was precies het lege vlak. */
.moduleblok .kern{min-width:0;align-self:start;display:flex;flex-direction:column}
/* Hier stond .gebleven, het kopje "Hier was je gebleven" boven de modulenaam. Het stond in elke
   kaart en was met `visibility` verborgen bij alle op één na, zodat de namen uitgelijnd bleven.
   RV-S6-25 haalt het weg: de stand onderaan zegt nu "Je bent hier gebleven", en twee keer
   dezelfde zin op één kaart is er één te veel. Weg uit alle kaarten, dus de namen blijven
   uitgelijnd zonder dat er een lege regel voor nodig is. */
/* EH-BB4A-06: een lange moduletitel liet de leerroutepagina op een telefoon zijwaarts schuiven.
   `min-width:0` op .kern laat het vak krimpen, maar een lang samengesteld woord liep er dan juist
   buiten. Vandaar overwrap en hyphens, net als bij `.module-kop strong`. */
.moduleblok .kern>strong{display:block;font-family:var(--font);font-weight:700;
  font-size:16px;color:var(--ink);line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
/* De toelichting loopt over vier regels en wordt daarna afgekapt. -webkit-line-clamp is hier de
   enige die het over meer regels doet; hij werkt in elke browser die dit platform ondersteunt.
   Het vak eronder mag krimpen (min-height:0), anders duwt een lange tekst de stand weg. */
/* RV-S6-70 (blok 9.8): de toelichting stond op 13px in --muted, terwijl de lopende tekst op
   deze pagina 1rem is — de regie mat 13px tegen 17px en noemde het te klein. Nu dezelfde maat
   als gewone tekst en een donkerder grijs (--kaarttekst, 9,2:1 op de witte kaart). De vier
   regels van RV-S6-107 blijven; wat er binnen die vier regels past is gemeten op 1440 en 390. */
.moduleblok .kern>.uitleg{display:block;font-size:1rem;color:var(--kaarttekst);margin-top:2px;
  line-height:1.45;min-height:0}
.moduleblok .kern>.toelichting{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:4;overflow:hidden}
.moduleblok .kern>.optioneel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* De stand, linksonder. Drie vormen, één per stand. Geen knop: de meting van 20-09 wees uit dat
   er geen bestaande weg is naar het eerste onderdeel dat nog niet gedaan is (RV-S6-23).
   `margin-top:auto` duwt hem naar de onderkant van de kolom; de marge erboven houdt hem van de
   tekst af als de kaart krap is. */
/* Punt 46 (S6-964): HIER STOND `margin-top:auto`, dat het label naar de onderkant van de kaart
   duwde om alle labels op de leerroutepagina op één hoogte te houden. Die kaart staat daar sinds
   RV-S6-114 niet meer, en hier hoort het label direct onder de titel. */
.moduleblok .standlabel{align-self:flex-start;margin-top:var(--space-2);
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-md);
  font-size:13px;font-weight:700;line-height:1.3}
/* `margin-top:auto` duwt het label naar de onderkant van de kolom. Vult de tekst die kolom
   helemaal, dan is er geen auto-ruimte meer over en zou het label tegen de tekst plakken; de
   marge hieronder houdt die afstand ook in dat geval.
   De negatieve marge erna haalt de dubbeling weg die daardoor tussen de naam en de toelichting
   ontstaat: die twee horen dicht op elkaar (2px), niet 10px uit elkaar. */
.moduleblok .kern>strong,.moduleblok .kern>.uitleg{margin-bottom:10px}
.moduleblok .kern>strong+.uitleg{margin-top:-8px}
.moduleblok .standlabel.af{background:var(--kaart-af-vlak);color:var(--kaart-af)}
.moduleblok .standlabel.af .vink{width:15px;height:15px;color:var(--kaart-af)}
.moduleblok .standlabel.open{background:var(--kaart-open-vlak);color:var(--kaart-open)}
/* De huidige module: gevuld, met de papierkleur als tekst. */
.moduleblok .standlabel.bezig{background:var(--kaart-actie-vlak);color:var(--op-merk)}

/* Kolom 4. EH-S6-54: het pijltje staat op de hoogte van de modulenaam, zoals in het goedgekeurde
   voorstel en zoals .uitklapkaart en .punt-item het elders doen. Het stond op `align-self:center`
   en werd daarmee over de hele kaarthoogte gecentreerd — halverwege, los van waar de naam staat.
   `start` zet het op de eerste regel; de negatieve marge vangt op dat het pijltje 24px hoog is en
   de naamregel 20px (16px maal 1.25), zodat de middens samenvallen in plaats van de bovenkanten. */
.moduleblok .chev{flex:none;width:24px;height:24px;color:var(--muted);transition:transform .15s ease;
  align-self:start;margin-top:-2px}
.moduleblok[open] .chev{transform:rotate(180deg)}

/* ── o2b-07 · de enige kaart op de pagina van een special (RV-S6-76, RV-S6-77) ────────────
   Een special is er één. Er is dus geen volgnummer en geen fotovlak op de kaart — het beeld
   staat al boven de kaart — en daarmee valt de eerste kolom van 120 px weg. Zonder deze regel
   schoof de naam in die 120 px en zakten de onderdelen eronder.

   De stand zet zich hier direct ONDER de naam in plaats van onderaan de kaart. Op de
   leerroutepagina houdt `margin-top:auto` alle standlabels op één hoogte; met één kaart is er
   niets om mee uit te lijnen en blijft precies het lege vlak over waar S6-187 bij ontwerp 10 en
   11 over viel.

   En de ondergrens van vier regels op .banenrij vervalt. Die houdt op de LEERROUTEpagina alle
   kaarten even hoog nu lege chips zijn vervallen (RV-S6-16). Met één kaart houdt hij niets even
   hoog en levert hij alleen leegte: "het lege vlak onder de rij met Kennismodule en Format gaat
   weg" (opmerking van de regie bij o2b-07, 22-09-2026). */
.moduleblok.enige-kaart>summary{grid-template-columns:minmax(0,1fr) 24px;
  grid-template-areas:"kern chev" "rij rij"}

/* Kolom 3: de onderdelen onder elkaar, elk 44 hoog met 10 ertussen, uitgelijnd met de bovenkant
   van de modulenaam.
   RV-S6-16 (20-09): alleen wat er is. "Geen videomodule" en "Geen format" zijn eruit. De kolom
   houdt wél de ruimte van vier regels vast — 4 x 44 plus 3 x 10 — zodat alle kaarten even hoog
   blijven nu het aantal regels per module verschilt. Zonder die ondergrens zou een module met
   twee onderdelen een merkbaar lagere kaart krijgen dan een met vier.
   Hier stond een grid met auto-fill-kolommen van 170px onder de titel; dat was de opzet die de
   lege chips nodig hadden. */
/* PUNT 46 uit v4.62 (S6-964): de rij stond als KOLOM rechts op de kaart, met een ondergrens van
   vier regels (4 x 44 plus 3 x 10) om kaarten náást elkaar even hoog te houden. Variant B zet hem
   als één regel onder de titel; `flex:1 1 0` laat de chips de breedte samen verdelen, dus twee
   worden breed en vier smal. De ondergrens vervalt: de rij is één regel hoog, dus de kaarten zijn
   sowieso even hoog, en de ondergrens zou alleen het lege vlak terugbrengen. */
.banenrij{min-width:0;display:flex;flex-direction:row;gap:10px;min-height:0}
.banenrij>.baanchip{flex:1 1 0}
.baanchip{display:flex;align-items:center;gap:8px;min-width:0;height:44px;
  font-size:13px;font-weight:700;padding:0 12px;border-radius:var(--radius-md);line-height:1.3;
  background:var(--kaart-vlak);color:var(--ink)}
.baanchip .icon{flex:none;width:16px;height:16px}
/* W-21: de kleur zit in het icoon en zijn eigen vlakje, niet in de chip. */
.baanchip>.icon:not(.vink){box-sizing:content-box;padding:4px;border-radius:6px;
  background:var(--baan-vlak,var(--sand));color:var(--baan-icoon,var(--ink))}
/* S6-90: de tekst van deze chip stond op --muted, gedempt, omdat de baan geen eigen kleur had.
   Nu hij die wel heeft, leest hij als de andere drie: --ink op het chipvlak, 13,85:1. */
.baanchip.oefenen{color:var(--ink)}
/* Breekt op een spatie, niet binnen een woord: liever twee hele woorden dan één half woord.
   Nu de regel 44 hoog is en de tekst kort, komt dat zelden voor. */
.baanchip .chiptekst{min-width:0;hyphens:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baanchip .vink{width:15px;height:15px;margin-left:auto;color:var(--success)}

/* --- de banen zelf ------------------------------------------------------ */
/* Op de modulepagina staan ze in een kaart, op de leerroutepagina in de uitklap. */
/* RV-S6-22: de special krijgt geen modulekaart in de opmaak van 20-09 — hij is zelf een module.
   Alleen de kleuren volgen mee, zodat de twee schermen bij elkaar horen: papier zonder rand,
   net als de kaarten op de leerroutepagina. */
.modulekaart{margin-top:var(--space-4);background:var(--kaart);border-radius:var(--radius-lg)}
.banen{padding:var(--space-5)}
.baan+.baan{margin-top:var(--space-5)}
.baan-kop{display:flex;align-items:center;gap:var(--space-3);margin-bottom:10px}
.baan-kop h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.3;color:var(--ink)}
.baan-kop .watishet{display:block;font-size:13px;color:var(--muted)}
.baan-kop .tel{margin-left:auto;font-size:12.5px;color:var(--muted)}
/* De rijen springen in tot onder de baankop en krijgen een bolletje, zodat ze zichtbaar onder hun soort hangen.
   Het bolletje is neutraal: W-21 houdt de baankleur in het icoon en het icoonvlak. */
.baan ul{list-style:none;margin:0 0 0 44px;padding:0;border:1px solid var(--line-soft);
  border-radius:var(--radius-md);overflow:hidden}
.baan li{display:flex;align-items:center;gap:var(--space-3);padding:11px var(--space-4);
  border-top:1px solid var(--line-soft)}
.baan li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--grey)}
.baan li:first-child{border-top:0}
.baan li:hover{background:var(--offwhite)}
.baan .titel{flex:1;min-width:0}
.baan .titel strong{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.baan .titel span{display:block;font-size:12.5px;color:var(--muted)}
.baan .titel span:empty{display:none}
/* Een afgeronde rij blijft goed leesbaar: iets minder vet, niet lichter. */
.baan li.af .titel strong{color:var(--text);font-weight:600}
.baan li>.status{width:118px;justify-content:center}
.baan li>.button{flex:none;width:118px;justify-content:center}
/* --muted en niet --grey-soft: die laatste haalt 2,57:1 op wit, te weinig bij deze tekstgrootte.
   Dezelfde afweging stond bij .baanchip.leeg, de gestippelde chip die met RV-S6-16 is vervallen;
   binnen een uitgeklapte module blijft de lege baan wél staan (spec §2.6), dus deze regel niet. */
/* Hier stond .baan .leegregel, de zin in een lege baan. S6-198 punt 5: een lege baan
   staat er niet meer, dus heeft die regel geen gebruikers meer. */

/* Voetregel van een opengeklapte module. */
.moduleblok>.modulevoet{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  margin:0 var(--space-5) var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--line-soft)}
.moduleblok>.modulevoet .klein{flex:1;min-width:220px;font-size:13px;color:var(--muted)}
.moduleblok>.modulevoet .button{flex:none}

/* "Alles uitklappen" naast de sectiekop, vóór de link ernaast. */
.sectiekop .tekstknop.rechts{margin-left:auto;padding:0;font-size:13.5px;font-weight:700;
  color:var(--bordeaux);cursor:pointer}
.sectiekop .tekstknop.rechts:hover{text-decoration:underline;color:var(--bordeaux-dark)}
.sectiekop .tekstknop.rechts+.naar{margin-left:var(--space-4)}

@media (max-width:760px){
  /* De vier kolommen passen niet op een telefoon: 120 plus 260 plus het pijltje laat voor de
     naam niets over. De onderdelen zakken daarom onder de naam door, over de volle breedte, en
     de linkerkolom krimpt mee met het beeld (zie de regel bij .modulebeeld verderop).
     De ondergrens van vier regels vervalt daar: die houdt kaarten náást elkaar even hoog, en
     onder elkaar zou hij alleen een gat maken onder een module met twee onderdelen. */
  .moduleblok>summary{grid-template-columns:72px minmax(0,1fr) 24px;gap:var(--space-3);
    padding:var(--space-4)}
  /* Punt 46 (S6-964): "Op telefoonbreedte vallen ze onder elkaar." De rij staat al onder de titel
     (grid-template-areas); hier gaat alleen de richting om, met `flex:none` zodat elke chip zijn
     eigen hoogte houdt in plaats van de breedte te delen. */
  .banenrij{flex-direction:column}
  .banenrij>.baanchip{flex:none}
  .moduleblok .standlabel{margin-top:var(--space-3)}
  /* `.banenrij{grid-template-columns:1fr}` stond hier; de kolomopzet is vervallen met de
     opmaak van 20-09 — de onderdelen staan nu altijd onder elkaar. */
  .banen{padding:var(--space-4)}
  .baan ul{margin-left:0}
  /* Op een telefoon vult de naam de eerste regel; de stand en de knop zakken samen naar
     de tweede. Zonder de 100%-basis houden de vaste kolommen van de stand en de knop de
     naam op één woord per regel — precies de fout die .modulelijst hier ooit had. */
  .baan li{flex-wrap:wrap}
  .baan .titel{flex:1 1 calc(100% - 18px)}
  .baan li>.status{width:auto;margin-left:14px}
  .baan li>.button{width:auto;margin-left:auto}
  .moduleblok>.modulevoet{margin:0 var(--space-4) var(--space-4)}
}

/* ==========================================================================
   37. Tekst die onder een badge of knop door liep
   ==========================================================================
   Klantmelding 30 augustus 2026, twee schermen met dezelfde oorzaak: een
   tekstkolom in een flexrij die niet kán krimpen naast buren die dat weigeren.
   `.button` staat op `white-space:nowrap` (regel 219) en de statusbadge ook
   (regel 268); wat overblijft moet de tekstkolom opvangen, en die kan dat pas
   als er ook echt in de tekst geknipt mag worden.

   Dezelfde fout is in dit bestand al twee keer opgelost, en die twee zijn hier
   het voorbeeld: `.regellijst.oefeningen li>.button.secondary{width:auto}`
   (sectie hierboven) laat de knop zo breed zijn als zijn tekst in plaats van
   118px, en `.module-kop strong{min-width:0;overflow-wrap:anywhere;
   hyphens:auto}` (regel 709) laat de titel breken. Hieronder staat geen derde
   aanpak, alleen diezelfde twee op de plekken waar de overlap is gemeten.
   ========================================================================== */

/* ---- 37.1 De bestandsnaam in een .list-row liep onder de statusbadge ----
   Op /beheer/modules/{id} ("Content in deze module", module-beheren.php) staat
   per rij een bestandsnaam naast een badge en vier knoppen. `.list-row .grow`
   (regel 296) heeft al `min-width:0`, dus de DOOS krimpt netjes mee — maar een
   bestandsnaam als "Werving_ImProve_v4.html" heeft geen spatie en geen enkel
   breekpunt, dus de TEKST liep gewoon door.

   Gemeten in de meetopstelling met deze app.css, rij "Werving_ImProve_v4.html"
   (tekst 173,5px) naast "Werving_Rankingformulier.docx" (212,9px):

     venster   .grow-doos   overlap rij 1   overlap rij 2
      1600px      274,8px        geen            geen
      1440px      222,8px        geen            geen
      1366px      148,8px       11,7px          51,1px
      1280px       62,8px       97,7px         137,1px
     <=1200px        0px      160,5px         199,9px

   Met deze regel breekt de naam en is de overlap op 1366px en 1280px weg. Op
   1200px en smaller is `.grow` 0px breed en helpt breken alleen niet meer —
   daarvoor staat 37.1b hieronder. `overflow-wrap:anywhere` en niet
   `break-word`, om precies de reden die bij .module-kop staat: alleen
   `anywhere` telt mee in de min-content-breedte, en dat is wat het flex-item
   hier laat krimpen.
   `hyphens:auto` erbij omdat de <html> op lang="nl" staat — de browser breekt
   dan liefst op een echt afbreekpunt mét streepje. Overgeërfd, dus het geldt
   ook voor de <small> eronder. Verder verandert er niets: waar de rij past,
   breekt er ook niets. */
.list-row .grow{overflow-wrap:anywhere;hyphens:auto}

/* ---- 37.1b En een ondergrens, want breken alleen was niet genoeg ----
   Vanaf 1366px omlaag eisen de badge en de vier knoppen samen méér dan de rij
   breed is: `.grow` zakt naar 62,8px op 1280px en naar 0px op 1200px. Met
   alleen de regel hierboven brak de naam daar in 23 regels van één letter:
   geen overlap meer, maar onleesbaar. 150px eronder lost dat op — alleen groeit de rij daarmee buiten de kaart
   (gemeten: 86px overloop op 1280px, 342px op 1024px), en dat is de kwaal
   verplaatsen in plaats van verhelpen.

   Het antwoord staat al in dit bestand, bij `.list-row.op-slot` hierboven:
   niet wringen maar afbreken. Wrap plus dezelfde 150px, zodat de knoppen naar
   een eigen regel zakken zodra de naam onder die grens zou komen. Gemeten op
   de lijst van module-beheren.php:

     venster   overlap vóór   overlap ná   overloop ná   regels naam
      1600px       geen          geen          geen           1
      1440px       geen          geen          geen           1
      1366px      11,7px         geen          geen           1
      1280px      97,7px         geen          geen           1
      1024px     160,5px         geen          geen           1

   Op 1440px en breder verandert er niets: daar past de rij, wrapt hij niet en
   staat de naam op één regel zoals altijd. De ondergrens hangt bewust aan `.wikkelen` en niet aan elke `.list-row` —
   een rij die niet mag afbreken zou er alleen maar eerder van overlopen. */
.list-row.wikkelen .grow{min-width:150px}

/* ---- 37.2 De bestandskiezer botste met de knop ernaast ----
   Op het contentbeheerscherm (modules-content.php) staat de regel "HTML-variant
   (optioneel)" met een native <input type="file"> en de knop Toevoegen. Die
   input draagt `.smal-200` (max-width:200px), maar een native bestandskiezer is
   geen tekstveld: hij tekent zijn eigen knop plus "Geen bestand gekozen" en kan
   die niet herschikken. Gemeten: de kiezer heeft in het Nederlands 316px nodig
   en kreeg er 200 — 116px van zijn eigen tekst werd afgekapt tot "Ge…zen",
   pal naast de knop Toevoegen (12px ertussen). Geen echte overlap dus, wél een
   onleesbaar veld dat tegen de knop aan staat.

   Zelfde antwoord als bij de oefeningenknop: hier is `width:auto` juist. De
   `.knopregel` breekt al af (flex-wrap), dus de knop zakt op een smalle kolom
   naar de volgende regel in plaats van de kiezer plat te drukken. `flex:none`
   houdt hem op zijn eigen breedte; `max-width:100%` voorkomt dat hij uit een
   kolom loopt die smaller is dan 316px. Raakt alleen de twee bestandskiezers in
   een .knopregel — de andere `.smal-200`-velden (aantal seats, twee datums)
   zijn gewone invoervelden en houden hun 200px. */
.knopregel input[type=file]{flex:none;width:auto;max-width:100%}

/* ---- 37.3 De afbeelding van een module en van een kennismodule bij de deelnemer ----
   Het beheer vraagt om een afbeelding bij een module (admin/module-beheren.php) en om een
   thumbnail bij elk onderdeel (admin/modules-content.php, alle soorten — niet alleen
   video). Bij de deelnemer kwamen ze alleen op de leerroutekaart en op een videokaart
   terecht; op de leerroutepagina en in de kennismodulelijst was er geen plek voor. Die
   twee plekken staan hier, en allebei binnen een vlak dat er al was — een tegel van 44px
   en een miniatuur van 56x40 — zodat het beeld niet opnieuw de hele regel opeet, wat
   levering 2 nu juist had opgelost. */
.regellijst .soorttegel.met-beeld{background:none;overflow:hidden}
/* Hier stond een negatieve marge die het beeld in de oude flexrij naast het nummer trok. In de
   vier kolommen van 20-09 staat het beeld ONDER het nummer en centreert .kaartlinks het zelf. */
/* En in de vier banen binnen een module. Iets kleiner dan .thumb: die rijen zijn 11px hoog
   gepadded, en 40px beeld zou de regel een halve centimeter oprekken. */
.baan li>.baanbeeld{width:48px;height:32px}
/* Houdt de plek vrij in een rij zonder eigen thumbnail, zodat de titels binnen één baan
   op dezelfde x beginnen. */
.baan li>.baanbeeld.leeg{flex:none;display:block}
@media (max-width:780px){
  /* Het beeld stond hier op `display:none`, omdat het in de oude rij met het nummer en de titel
     om dezelfde regel vocht. In de opmaak van 20-09 staat het in een eigen kolom onder het
     nummer en draagt het de kaart mee; weglaten zou die kolom leeg achterlaten. Het krimpt dus
     in plaats van te verdwijnen — 72px is wat er naast de naam overblijft op 390px. */
  .moduleblok .modulebeeld{width:72px;height:72px}
  .baan li>.baanbeeld{display:none}
}

/* ── LICENTIES-01 — capaciteit beheren ───────────────────────────────────────
   Drie dingen die de licentieschermen nodig hebben en die er nog niet waren.
   Uitsluitend kleuren uit het vaste palet; er komt geen nieuwe waarde bij. */

/* Het ingeklapte blok "Licenties toevoegen" op het organisatiescherm. Native
   <details>, geen JavaScript: het inklappen hoort ook te werken bij een trage
   verbinding of een uitgeschakeld script, en de toetsenbordbediening zit er dan
   al in. Dezelfde kaartvorm als .uitklapkaart, maar zonder de eigen chevron —
   hier doet de native markering dat werk. */
.licentieblok{background:var(--kaart);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden}
.licentieblok>summary{cursor:pointer;padding:var(--space-4) var(--space-5);
  font-family:var(--font);font-size:16px;font-weight:700;color:var(--ink)}
.licentieblok>summary:hover{background:var(--offwhite)}
.licentieblok>summary:focus-visible{outline:2px solid var(--bordeaux);outline-offset:-2px}
.licentieblok[open]>summary{border-bottom:1px solid var(--line-soft)}
.licentieblok>form{padding:0 var(--space-5) var(--space-5)}

/* Het getalveld in een tabelcel. Rechts uitgelijnd en met tabelcijfers, zodat de
   kolom optelt zoals hij eruitziet; smal genoeg om naast de standcijfers te passen.

   De rest van dit blok is niet decoratief. De algemene veldopmaak van dit platform hangt
   aan `.field input` (sectie 6), en dit veld staat in een <td> zonder die wikkel — het
   kreeg dus de browserstandaard: zwart op wit, rechte hoeken, een rand van #767676 en
   13px tekst. Alle drie die kleuren vallen buiten het vaste palet, en 13px op een
   invoerveld laat iOS bij focus inzoomen. Gemeten aan de BEREKENDE stijl in de browser;
   in de broncode was er niets aan te zien, want de fout zat in wat er niet stond.
   Daarom hier dezelfde waarden als `.field input`, uit dezelfde variabelen. */
.aantalveld{width:88px;max-width:100%;text-align:right;
  font-variant-numeric:tabular-nums;font-family:inherit;font-size:16px;
  min-height:44px;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;background:var(--kaart);color:var(--ink);outline:none}
.aantalveld:hover{border-color:var(--sand-line)}
.aantalveld:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.14)}

/* De fout bij het veld zelf. `display:block` is nodig omdat dit ook een <span> in
   een tabelcel kan zijn, en juist daarom staat de [hidden]-regel erachter: de
   UA-stylesheet verliest van elke auteursregel die display zet, dus zonder deze
   regel zou een verborgen foutmelding gewoon zichtbaar blijven. */
.veldfout{display:block;margin-top:6px;font-size:12.5px;font-weight:400;
  color:var(--danger);max-width:46em;text-align:left}
.veldfout[hidden]{display:none}

/* Een productrij met een fout — de goedgekeurde vorm uit O-10 v4 en het bewerkvoorstel v1.
   De melding staat in de productcel, direct onder de naam, en niet in de getalcel: een
   .num-cel heeft white-space:nowrap (35.6), dus daar kon de tekst niet afbreken en werd de
   kolom zo breed als de hele melding — gemeten: tabel 1835px in een houder van 862px.
   Kleur uit het bestaande --danger-soft, dezelfde als .alert.error en tr.row-expired. */
.data-table tr.row-invalid td{background:var(--danger-soft)}
.data-table tr.row-invalid td:first-child{border-left:3px solid var(--danger)}

/* Op een smal scherm wordt elke productrij een eigen kaart, zoals in beide goedgekeurde
   voorstellen: kop weg, per cel een regel met het label uit data-kop. Zonder dit schoof de
   tabel zijwaarts en stond het invulveld buiten beeld (600px tabel in 316px, op 390px).
   Bewust beperkt tot .licentietabel: .data-table staat op veel meer schermen, en die horen
   in deze bouw niet van gedaante te veranderen. */
@media (max-width:900px){
  .licentietabel,.licentietabel tbody,.licentietabel tr,.licentietabel td{display:block;width:100%}
  .licentietabel thead,.licentietabel tfoot{display:none}
  .licentietabel{border:0;background:transparent}
  .licentietabel tr{background:var(--kaart);border:1px solid var(--line);border-radius:var(--radius-md);
    margin-bottom:var(--space-3);padding:var(--space-3) var(--space-4)}
  .licentietabel td{border-bottom:0;padding:5px 0;display:flex;justify-content:space-between;
    align-items:center;gap:var(--space-3);text-align:right}
  .licentietabel td::before{content:attr(data-kop);color:var(--muted);font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:none}
  .licentietabel td.titel{display:block;text-align:left;font-size:15px;padding-bottom:var(--space-2)}
  .licentietabel td.titel::before{content:none}
  .licentietabel tr.row-invalid{background:var(--danger-soft);border-color:var(--danger)}
  .licentietabel tr.row-invalid td{background:transparent}
  .licentietabel tr.row-invalid td:first-child{border-left:0}
  .licentietabel td.titel .veldfout{text-align:left}
}

/* Keten 4 herstart, onderdeel B (W-35.1#R1) — O-10 v4: "Na opslaan" onder Extra deelnemerslicenties en het
   overzicht "Dit sla je op". Maten en kleuren uit het ontwerp (.toelichting 12.5px muted, dl 14px met
   tabelcijfers), hier beperkt tot .licentieblok zodat geen ander scherm meeverandert. */
.licentieblok .na-opslaan{font-size:12.5px;color:var(--muted);margin:var(--space-3) 0 0}
.licentieblok .na-opslaan strong{color:var(--ink);font-variant-numeric:tabular-nums}
.licentieblok .opslaglijst{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-4);margin:0;font-size:14px}
.licentieblok .samenvatting dt{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.licentieblok .samenvatting dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.licentieblok .samenvatting dd.leeg{font-weight:400;color:var(--muted)}
.licentieblok .samenvatting hr{border:0;border-top:1px solid var(--line);margin:var(--space-3) 0}
.licentieblok .samenvatting .toelichting{font-size:12.5px;color:var(--muted);margin:var(--space-3) 0 0}

/* --------------------------------------------------------------------------
   K4B — Aanbod-kaarten (W-36). Twee ruime kaarten naast elkaar via .grid.two
   (die valt onder 780px al terug op één kolom). Foto bovenaan zonder
   binnenmarge, daaronder titel, omschrijving en de knoppen, die onderaan de
   kaart blijven staan zodat twee kaarten naast elkaar op één lijn eindigen.
   Alleen opbouw; kleuren komen uit .card en .button.
   -------------------------------------------------------------------------- */
/* EH-BB1-01: een aanbodkaart zonder afbeelding rekte mee met de hoogte van de kaart ernaast,
   omdat een grid-item standaard `stretch` is en de knoppenregel met `margin-top:auto` naar
   onderen wordt geduwd. Het gat zat dus niet in de kaart maar in de rij. `align-self:start`
   laat elke kaart zijn eigen hoogte houden; een kaart mét afbeelding ziet er niet anders uit,
   want die vulde de rij toch al. Een foto is sinds N22 verplicht vóór publiceren, maar wat
   eerder is gepubliceerd kan er nog zonder staan. */
/* EH-S6-60 (blok 13): `.leren-kaarten` erbij. Aanbod stond op `.grid two` en staat nu op de
   kaartenrij van het Overzicht; zonder deze selector rekte een kaart zonder afbeelding weer mee met
   de hoogte van de kaart ernaast — precies wat EH-BB1-01 hierboven wegnam. */
.grid > .card.aanbodkaart,.leren-kaarten > .card.aanbodkaart{align-self:start}
.card.aanbodkaart{display:flex;flex-direction:column;padding:0;overflow:hidden}
.aanbodkaart .kaart-afbeelding{height:auto;aspect-ratio:16/9}
.aanbodkaart-inhoud{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);flex:1}
.aanbodkaart-inhoud h3,.aanbodkaart-inhoud p{margin:0}
.aanbodkaart-inhoud .knopregel{margin-top:auto}
/* Bouwbundel 1 (N23): het label Leerroute/Special staat vlak boven de titel, als één kop. */
.aanbodkaart-kop .eyebrow{display:block;margin:0 0 4px}

/* K2-A (P-01) — Beschikbare ruimte: label en waarde blijven bij elkaar en breken als paar af. */
.ruimte-waarden{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;font-size:13px;color:var(--muted)}
.ruimte-waarden span{white-space:nowrap}
.ruimte-waarden strong{color:var(--ink)}
/* Keten 4 herstart, onderdeel C (keuze 8): het tekort naast Vrij, in de bestaande foutkleur en niet alleen in kleur
   (het woord Tekort staat erbij). [hidden] expliciet, want .ruimte-waarden span zet geen display maar een latere
   regel zou dat kunnen doen. */
.ruimte-waarden .ruimte-tekort{color:var(--danger);font-weight:700}
.ruimte-waarden .ruimte-tekort strong{color:var(--danger)}
.ruimte-waarden .ruimte-tekort[hidden]{display:none}

/* Keten 4 herstart, D — Beheer › Toewijzingen › voorstel: persoon, toelichting en status Aanpassing nodig horen bij
   elkaar in beeld. De gedeelde .regellijst .meta breekt niet (nowrap) en de statuspil krijgt op smalle schermen 60px
   inspringing; met een productnaam als "Grip op je dagelijkse sturing" viel de pil op 390 px half buiten de kaart
   (gezien in K4H-E1-mailfout-390). Alleen op dit scherm en alleen onder 560px: de metaregel mag breken en de pil
   springt niet in. Desktop blijft gelijk. */
@media (max-width:560px){
  .regellijst .persoonsmeta{white-space:normal}
  .regellijst .persoonsmeta .status{margin-left:0}
}

/* Herstel K4H (R4) — Beheer › Toewijzingen › voorstel: "Plaats de actieregel bovenaan en het open correctieformulier
   eronder over de beschikbare breedte." .regellijst li is een flexregel; deze regel is een blok met twee lagen: de
   actieregel (Goedkeuren, Afwijzen en rechts apart Definitief afwijzen) en daaronder het gekozen paneel. Reden en
   toelichting staan vanaf 760px naast elkaar, smaller onder elkaar. Alleen dit scherm. */
.regellijst li.beoordeelregel{display:block}
.beoordeelregel .actieregel{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.beoordeelregel .actieregel form{margin:0}
.beoordeelregel .actieregel .definitief{margin-left:auto}
.beoordeelregel .actieregel .button[aria-expanded="true"]{border-color:var(--bordeaux)}
.beoordeelregel .actiepaneel{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line-soft)}
.beoordeelregel .actiepaneel[hidden]{display:none}
.beoordeelregel .actiepaneel .card-meta{margin:0}
.beoordeelregel .actiepaneel .ontvangerregel{margin-top:4px}
.beoordeelregel .veldenpaar{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
@media (min-width:760px){
  .beoordeelregel .veldenpaar{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start}
}
.ontvangerregel{margin-top:4px}
/* De ene melding over een niet (zeker) verstuurde correctiemail: zin, ontvanger, eventueel het risico van een tweede
   mail, en de knop(pen). De afwijsmailmelding (BB5 deel 1, TXT-MAIL-02) heeft dezelfde opbouw en deelt de opmaak. */
.correctiemailmelding p,.afwijsmailmelding p{margin:0 0 6px}
.correctiemailmelding .knoppen,.afwijsmailmelding .knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.correctiemailmelding .knoppen form,.afwijsmailmelding .knoppen form{margin:0}

/* ==========================================================================
   38. Dropdownpijl — T12 (04-09-2026) en T-91 (06-09-2026)
   ==========================================================================
   T-91: "Alle dropdowns gebruiken één eigen, eenvoudige chevron als
   SVG-achtergrond. De browserpijl wordt verborgen. De rechterzijde van de
   chevron staat 16 CSS-pixels binnen de rechterrand en de veldtekst houdt 40
   CSS-pixels rechterruimte." T12 vraagt dat in de centrale stijlen, voor alle
   dropdowns op desktop en mobiel.

   Beide stonden als "staat erin" in het besluitenlog, maar dit bestand had er
   geen regel voor: in de stap-4-keten (13-09-2026) mat de filterbalk op
   Beheer › Deelnemers `appearance:auto`, geen achtergrondafbeelding en 13px
   rechterruimte (W-05.2).

   De selector heeft specificiteit (0,2,1) en staat ná alle andere select-
   regels, zodat hij van `.field select`, `.statusform select`, `.vragen .vraag
   select` en `.wijzigingsoort.compact select` alleen pijl en rechterruimte
   overneemt; kleur, rand, hoogte en breedte blijven van die regels. Een
   keuzelijst met `multiple` of `size` toont geen pijl en valt erbuiten.

   De viewBox sluit precies om de getekende lijn (streek 1,6 meegerekend), zodat
   de zichtbare rechterzijde van de chevron samenvalt met `right 16px`.
   ========================================================================== */
select:not([multiple]):not([size]){
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' width='12' height='7'%3E%3Cpath d='M.8.8 6 6.2 11.2.8' fill='none' stroke='%23211C18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 7px;
  padding-right:40px
}

/* ==========================================================================
   BB2/BK6 Module beheren (N30–N33, 14-09-2026): hulp, legenda, beheeracties en
   Geüpload bestand. Drie uitklapbare delen met dezelfde vorm: een kleine pijl en een tekstregel
   in de linkkleur (--bordeaux), zodat ze niet met een knop te verwarren zijn.
   ========================================================================== */
.legenda-verplicht{font-size:12.5px;color:var(--muted);margin:0 0 var(--space-2)}
details.hulp,details.beheeracties,details.vervangen{min-width:0}
details.hulp>summary,details.beheeracties>summary,details.vervangen>summary{display:inline-flex;align-items:center;gap:8px;
  min-height:32px;font-size:13px;font-weight:700;color:var(--bordeaux)}
details.hulp>summary::before,details.beheeracties>summary::before,details.vervangen>summary::before{content:"";flex:none;
  border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
details.hulp[open]>summary::before,details.beheeracties[open]>summary::before,details.vervangen[open]>summary::before{transform:rotate(90deg)}
details.hulp>summary:focus-visible,details.beheeracties>summary:focus-visible,details.vervangen>summary:focus-visible{
  outline:2px solid var(--bordeaux);outline-offset:2px;border-radius:6px}
.hulp-inhoud{max-width:70ch;padding:var(--space-1) 0 var(--space-2);color:var(--muted);font-size:13px}
.hulp-inhoud p{margin:0 0 var(--space-2)}
details.beheeracties{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--line-soft)}
/* BK9-C: het N30-patroon staat op vier schermen erbij, en daar is het blok een kaart op
   zichzelf in plaats van de staart van een contentregel. De scheidingslijn hierboven maakt het
   verschil tussen twee delen van één regel; direct onder de bovenrand van een eigen kaart zou
   ze een tweede lijn tekenen op dezelfde plek. */
.form-card>details.beheeracties,.card>details.beheeracties{margin-top:0;padding-top:0;border-top:0}
.geupload{display:grid;gap:var(--space-2);min-width:0}
.bestandsregel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.bestandsregel.vervanging{padding:8px 10px;border:1px dashed var(--line);border-radius:12px}
/* S6-286: een aangeleverd bestand dat de invoer van een deelnemer niet bewaart. Geen fout en
   geen blokkade — het publiceren gaat gewoon door — maar het moet wel opvallen naast een regel
   die verder alleen maar bestandsnaam en omvang toont. Zelfde token als .alert.warning en
   .status.warning, zodat pil en melding dezelfde taal spreken; geen eigen kleur. */
.bestand-waarschuwing{flex-basis:100%;margin-top:6px;padding:8px 12px;border:1px solid var(--warning);border-radius:12px;background:var(--warning-soft);color:var(--warning);font-size:14px;line-height:1.45;max-width:80ch}
.bestandsoort{font-size:12px;font-weight:700;color:var(--grey-dark)}
.bestandsnaam{min-width:0;overflow-wrap:anywhere}
.vervangform{display:grid;gap:var(--space-2);margin-top:var(--space-2);min-width:0}
.vervangform input[type="file"]{max-width:100%}
@media (prefers-reduced-motion:reduce){
  details.hulp>summary::before,details.beheeracties>summary::before,details.vervangen>summary::before{transition:none}
}

/* ==========================================================================
   BB3/BK9 fase B Beheeroverzicht (O-05, T-133 [F]/[G], 15-09-2026)
   Indeling en maten uit het goedgekeurde VOORBEELD_O05_BEHEEROVERZICHT.html (sha 5ed19f9a…,
   de regelnummers hieronder); kleuren via de tokens met dezelfde waarden. Alles hangt onder
   .beheeroverzicht: andere schermen veranderen niet (fase C, BP-S06 open). Wat het voorbeeld
   zelf als bestaand onderdeel tekent (kerncijferrij T-83, hulp N30, de filter in de vorm van het
   deelnemersfilter) en de knop, tekstknop en statuspil die dit scherm al had, blijven het
   platformonderdeel. De zichtbare verschillen daarmee staan in RV-BB3-12.
   ========================================================================== */
.beheeroverzicht{container:beheeroverzicht / inline-size}
/* Ruimte boven elk onderdeel (voorbeeld r.18). */
.beheeroverzicht section{margin-top:34px}
/* Filter op de kopregel van Gebruik (voorbeeld r.19, 20 en 36). */
/* H6 punt 6a: `center` en niet `flex-end`. Met het label sr-only (zie overview.php) zijn de
   keuzelijst en de knop even hoog, en dan hoort de titel op hun middellijn te staan. Op
   `flex-end` hing het woord Gebruik onderaan een kop van 72px. */
.beheeroverzicht .sectiekop.met-filter{align-items:center;gap:10px 16px}
.beheeroverzicht .sectiekop.met-filter h2{margin-right:auto}
.beheeroverzicht .sectiekop.met-filter .filterbalk{margin-top:0;flex-wrap:nowrap;gap:10px}
/* Hulp onder de inhoud van het onderdeel (voorbeeld r.46). */
.beheeroverzicht details.hulp{margin-top:12px}
/* H6 punt 6c: een rustige regel onderaan het blok. De samenvatting stond op 13px/700 en was
   daarmee groter en zwaarder dan de kleinste tekst erboven (de regel onder een cijfer, 12,5px).
   De kleur blijft bordeaux: die is op contrast gemeten en een link hoort als link te lezen. */
.beheeroverzicht details.hulp>summary{font-size:12px;font-weight:600}
/* H6 punt 6d: de ruimte tussen de kerncijfers en het blok eronder. `.beheeroverzicht section`
   brengt 34px mee en de kerncijferrij zelf 24px; die twee vielen samen op 34. Alleen de sectie
   die direct op een kerncijferrij volgt gaat naar 24, zodat de bakken, de kerncijfers en
   Gebruik als één samenvatting lezen. De andere onderdelen houden hun 34px. */
.beheeroverzicht .kerncijferrij+section{margin-top:var(--space-5)}
/* Aandachtspunten: feit, actie en knop direct zichtbaar (voorbeeld r.53 t/m 65). */
.beheeroverzicht .punten{list-style:none;margin:0;padding:0;background:var(--kaart);border:1px solid var(--line);border-radius:16px}
.beheeroverzicht .punt{padding:16px 20px;display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:14px;row-gap:4px}
.beheeroverzicht .punt+.punt{border-top:1px solid var(--line-soft)}
.beheeroverzicht .punt p,.beheeroverzicht .lijst p{margin:0}
.beheeroverzicht .punt .stip{width:10px;height:10px;margin-top:7px;grid-row:1 / span 4}
.beheeroverzicht .titelregel{gap:4px 12px;align-items:baseline}
.beheeroverzicht .titelregel strong{font-size:15.5px}
.beheeroverzicht .sinds{font-size:13px;font-weight:700;color:var(--muted)}
.beheeroverzicht .feit{color:var(--text)}
.beheeroverzicht .actie{color:var(--muted);font-size:14px}
.beheeroverzicht .knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
/* Organisaties: Openen onder de regel, op de linkerlijn van de naam (voorbeeld r.67 t/m 73). */
.beheeroverzicht .lijst{list-style:none;margin:0;padding:0;background:var(--kaart);border:1px solid var(--line);border-radius:16px}
.beheeroverzicht .lijst li{display:grid;justify-items:start;row-gap:2px;padding:14px 20px}
.beheeroverzicht .lijst li+li{border-top:1px solid var(--line-soft)}
.beheeroverzicht .lijst .titelregel{align-items:center}
.beheeroverzicht .reden{font-size:13px;color:var(--muted)}
.beheeroverzicht .lijst .button{margin-top:8px}
/* Naar rapportage onder de inhoud (voorbeeld r.78). */
.beheeroverzicht .onderlijn{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px}
/* Smal: onder elkaar (voorbeeld r.83 t/m 92, dezelfde containergrens van 720px). */
@container beheeroverzicht (max-width:720px){
  .beheeroverzicht .sectiekop.met-filter{align-items:flex-start}
  .beheeroverzicht .sectiekop.met-filter .filterbalk{width:100%;flex-wrap:wrap}
  .beheeroverzicht .sectiekop.met-filter .field{flex:1 1 100%}
  .beheeroverzicht .sectiekop.met-filter select{width:100%;font-size:16px;min-height:46px}
  .beheeroverzicht .punt{padding:14px 16px}
  .beheeroverzicht .lijst li{padding:12px 16px}
}

/* ── RV-S6-33: het venster bij uitloggen met invoer die nog niet is opgeslagen ──
   Tot 20-09 was dit het venster van de browser (TXT-R35-02, optie A). Dat kan geen eigen
   knopteksten dragen, en "Wachten" en "Toch uitloggen" zeggen precies wat er gebeurt.

   Een <dialog> en geen eigen div: showModal() houdt de focus binnen het venster en laat Escape
   sluiten, en dat is hier precies het gewenste gedrag — sluiten IS Wachten. De opmaak volgt
   .card, zodat het venster bij de rest hoort. Alleen bestaande tokens, geen nieuwe kleur. */
.bevestigvenster{max-width:420px;width:calc(100% - 2 * var(--space-4));
  background:var(--kaart);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-5)}
.bevestigvenster::backdrop{background:rgba(33,28,24,.45)}
.bevestigvenster h2{margin:0 0 var(--space-2);font-size:19px}
.bevestigvenster p{margin:0 0 var(--space-5);color:var(--muted)}
.bevestigknoppen{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-end}
/* Op een telefoon onder elkaar en over de volle breedte, met Wachten bovenaan: dat is de knop
   waar de focus op staat en de uitkomst die niets weggooit. */
@media (max-width:480px){
  .bevestigknoppen{flex-direction:column-reverse}
  .bevestigknoppen .button{width:100%;justify-content:center}
}

/* ==========================================================================
   48 Vaste kolombreedtes — EH-S6-70 (22-09-2026)
   ==========================================================================
   Twee beheertabellen staan recht onder elkaar met `table-layout: fixed`
   (.gelijke-kolommen). Dat vraagt een breedte per kolom. Die breedtes stonden
   eerst als style-attribuut op de <col>-elementen in de view; InlineStylesTest
   staat dat alleen toe bij een waarde die uit de gegevens komt, en een vaste
   kolombreedte is dat niet. Ze staan daarom hier, per tabel gescoopt, zodat ze
   niet als losse breedteklassen over andere tabellen kunnen vallen. Verhuist
   een kolom, dan verhuist zijn regel hier mee — de volgorde van de <col>'s in
   de view en van de regels hieronder is dezelfde.
   ========================================================================== */
/* /beheer/toegang — Organisatie of deelnemer · Soort · Toegang tot · Bron · Staat · Actie */
.kolommen-toegang col:nth-child(1){width:30%}
.kolommen-toegang col:nth-child(2){width:11%}
.kolommen-toegang col:nth-child(3){width:14%}
.kolommen-toegang col:nth-child(4){width:16%}
.kolommen-toegang col:nth-child(5){width:19%}
.kolommen-toegang col:nth-child(6){width:10%}
/* /beheer/notificaties — Gebeurtenis · Ontvanger · E-mail · In-app · Tekst · Berichtsoort · Actie */
.kolommen-notificaties col:nth-child(1){width:34%}
.kolommen-notificaties col:nth-child(2){width:14%}
.kolommen-notificaties col:nth-child(3){width:8%}
.kolommen-notificaties col:nth-child(4){width:8%}
.kolommen-notificaties col:nth-child(5){width:12%}
.kolommen-notificaties col:nth-child(6){width:14%}
.kolommen-notificaties col:nth-child(7){width:10%}

/* RV-S6-61 en VR-S6-43 — onder het vinkje Uitlichten: de einddatum en, bij een
   volgende ronde, de vraag wie het mag zien. Staat vóór 36.99: dat blok hoort
   het laatste te blijven. */
.uitlicht-blok{margin-top:var(--space-2);padding:var(--space-3) var(--space-4);
  border:1px solid var(--line);border-radius:10px;background:var(--kaart)}
.uitlicht-blok .field{margin:0}
.uitlicht-blok fieldset{border:0;margin:var(--space-3) 0 0;padding:0}
.uitlicht-blok legend{padding:0;font-weight:600;font-size:14px}
.uitlicht-blok label.keuze{margin-top:6px}
/* Het vinkje staat uit zolang het product nog in concept staat; de regel eronder
   zegt waarom. `disabled` regelt de bediening, dit alleen het beeld. */
.keuze.uit{cursor:default}
.keuze.uit span{color:var(--muted)}

/* ==========================================================================
   49 De gedeelde bevestiging — technische keuze 4 (G4) bij RV-S6-66 (22-09-2026)
   ==========================================================================
   De melding na een actie komt sinds vandaag uit één partial
   (resources/views/partials/meldingen.php) in plaats van uit 34 views. De vorm
   is de toast die al bestond voor de demo-modus; alleen de kleur verandert mee
   met RV-S6-72 punt 1: bevestigingen in de twee groentinten die RV-S6-27
   toeliet (#4A764F op #E9F0EA, 4,53:1 — AA voor gewone tekst). Staat vóór
   36.99, dat blok hoort het laatste te blijven.
   ========================================================================== */
.toast.melding-toast{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--kaart-af-vlak);color:var(--kaart-af);border:1px solid var(--kaart-af);
  font-weight:600}
.toast.melding-toast svg.icon{width:16px;height:16px;flex:0 0 16px}
/* EH-S6-82: dezelfde bevestiging, maar IN de kaart onder de knop, op de uitgelogde
   schermen. Zie resources/views/partials/melding-in-kaart.php voor het waarom. */
.melding-in-kaart{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:10px 12px;
  background:var(--kaart-af-vlak);color:var(--kaart-af);border:1px solid var(--kaart-af);
  border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.45;text-align:left}
.melding-in-kaart svg.icon{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
/* RV-S6-66 punt 2: "verdwijnt na een paar seconden". Hij blijft in de pagina staan — een
   schermlezer heeft hem bij het verschijnen al voorgelezen (role="status") — en vervaagt
   alleen in beeld. Wie minder beweging vroeg houdt hem staan tot de volgende pagina; dat is
   ook de stand waarin de toegankelijkheidsronde meet. */
@media (prefers-reduced-motion: no-preference){
  .toast.melding-toast.show{animation:melding-vervaagt .6s ease-in 5s forwards}
}
@keyframes melding-vervaagt{to{opacity:0}}

/* ==========================================================================
   50 Ronde H2 — de goedgekeurde ontwerpen van O2 (22-09-2026)
   ==========================================================================
   Wat Simone goedkeurde in RV-S6-73 en de regie beoordeelde in S6-190. Elk
   blok noemt zijn ontwerpnummer. Staat vóór 36.99; dat blok blijft het laatste.
   ========================================================================== */

/* ── Ontwerp 3 · de beheerlijst (RV-S6-73 A) ──────────────────────────────
   Een ruimere rij met de foto op 160 bij 120. Zonder foto houdt het vlak
   diezelfde maat: anders verspringt de hele rij zodra er wél een foto komt. */
.list-row.ruim{gap:var(--space-4);padding:var(--space-4) var(--space-5);align-items:center}
.list-row.ruim .rij-beeld{width:160px;height:120px;flex:0 0 160px;border-radius:10px;
  overflow:hidden;background:var(--sand);display:grid;place-items:center;color:var(--bordeaux)}
.list-row.ruim .rij-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.list-row.ruim .rij-beeld svg.icon{width:28px;height:28px}
.list-row.ruim strong{font-size:16px;line-height:1.3}
.list-row.ruim small{font-size:14px;color:var(--muted)}
@media (max-width:760px){
  .list-row.ruim{flex-wrap:wrap;row-gap:var(--space-3)}
  .list-row.ruim .row-link{flex:1 1 100%;min-width:0;order:2}
  .list-row.ruim .rij-beeld{order:1}
  .list-row.ruim .status{order:1;margin-left:auto}
  .list-row.ruim .button{order:3}
  .list-row.ruim .kop-icoon{order:4;margin-left:auto}
}

/* ── Ontwerp 4 en 10 · de productkop (RV-S6-69 herzien, RV-S6-73 A en B) ──
   Foto links, tekst rechts. Op de leerroutepagina de uitgebreide toelichting
   (RV-S6-73 B), op Meer informatie de korte samenvatting. Onder 820px onder
   elkaar, anders wordt de foto een postzegel naast een blok tekst. */
.productkop{display:grid;grid-template-columns:minmax(240px,36%) 1fr;gap:var(--space-5);
  align-items:start;margin:var(--space-2) 0 var(--space-4)}
.productkop img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);
  display:block;background:var(--sand)}
.productkop .samenvatting{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
@media (max-width:820px){.productkop{grid-template-columns:1fr}}

/* ── v4.61 punt 32 · de omloopstand van de productkop (S6-766, Simone 01-10-2026) ──
   Op Meer informatie stond naast de foto alleen de korte intro, bleef daaronder wit staan, en
   begon de uitgebreide tekst onder de foto over de volle breedte. Simone koos: de tekst loopt
   door tot de foto ophoudt, de foto blijft even groot.

   Een raster kan dat niet. Een rastercel loopt nooit onder een andere cel door, dus hoe lang de
   tekst ook is, hij blijft in zijn eigen kolom staan. Een zwevende foto wel: de regels naast de
   foto zijn korter, en zodra de foto op is lopen ze over de volle breedte door.

   "Even groot" is letterlijk de maat van de rasterkolom die er stond, minmax(240px, 36%): 36%
   van de kop met een bodem van 240px. Daarom hier width:36% met min-width:240px, en niet een
   nieuwe maat.

   Eigen klasse en niet .productkop zelf: in de leeromgeving (leren-leerroute.php en
   leren-special.php) staat dezelfde kop met de uitgebreide toelichting ernaast, en die schermen
   staan niet in deze opdracht. */
.productkop.omloop{display:block}
.productkop.omloop::after{content:"";display:block;clear:both}
.productkop.omloop img{float:left;width:36%;min-width:240px;aspect-ratio:4/3;
  margin:0 var(--space-5) var(--space-4) 0}
/* De uitgebreide tekst staat nu in de kop; de witruimte eronder hield hij al zelf
   (.meerinfo-tekst), dus die blijft waar hij was. */
.productkop.omloop .meerinfo-tekst{margin-top:var(--space-3)}
/* Dezelfde grens als het raster: onder 820px onder elkaar, anders wordt de foto een postzegel. */
@media (max-width:820px){.productkop.omloop img{float:none;width:100%;margin:0 0 var(--space-4)}}

/* ── Ontwerp 8, 9 en 10 · foto's op 4:3 (RV-S6-73 A) ──────────────────────
   Overal waar een foto van een leerroute of special staat dezelfde verhouding.
   Een foto die anders is aangeleverd wordt bijgesneden vanuit het midden
   (object-fit:cover, stond er al). De illustraties op de modulekaart blijven
   vierkant en staan hier dus niet bij. */
.kaart-afbeelding,
.kaart-afbeelding-leeg,
.kaart-still .kaart-afbeelding,
.kaart-still .kaart-afbeelding-leeg{height:auto;aspect-ratio:4/3}
.quick-card-media{aspect-ratio:4/3}

/* ── Ontwerp 11 · de knop links, onder de zin (RV-S6-57) ──────────────────
   .meerinfo-balk zet elke knop met margin-left:auto naar rechts; dat is er
   voor de prijsbalk (RV-S6-04). Zonder prijs ernaast stond de knop daardoor
   in het midden van een leeg vak. Nu vult het blok de rij en staan de zin en
   de knop links, onder elkaar. */
.meerinfo-balk .vraag-aan{width:100%;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-3)}
.meerinfo-balk .vraag-aan .button{margin-left:0}
.meerinfo-balk .vraag-aan p{max-width:60ch}
/* S6-198 punt 4 (22-09-2026): dezelfde scheefstand bij een product dat de deelnemer AL heeft.
   Dan staat er geen prijsblok naast, en duwde `margin-left:auto` de ene knop (Naar mijn
   leerroute / Naar mijn special) naar de overkant van een verder leeg vak. Staat de knop daar
   alleen, dan hoort hij links — net als Bespreek met je organisatie in ontwerp 11. Zodra er wél
   een prijsblok naast staat, is `:only-child` niet waar en blijft de knop rechts, waar hij hoort. */
.meerinfo-balk .button:only-child{margin-left:0}

/* ── Ontwerp 8 · Zo werkt het als één regel (RV-S6-58) ────────────────────
   Geen eigen kop en geen eigen blok meer: een regel onder de zin over je
   toegang, in dezelfde rustige kleur als de andere bijzinnen. */
.zo-werkt-het{margin:var(--space-1) 0 0;color:var(--muted);font-size:15px;line-height:1.55}

/* ── Ontwerp 6a en 6b · Gelezen op één lijn (RV-S6-73 C) ──────────────────
   Links Terug naar leerroute, rechts het label met wat je ermee kunt. Het
   groen is dat van RV-S6-27 (4,53:1 op #FBFAF8), bevestigd in RV-S6-72. */
.gelezen-balk{align-items:center}
.gelezen-rechts{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;flex-wrap:wrap}
.gelezen-rechts form{margin:0}
.gelezen-label{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border-radius:999px;font-size:14px;font-weight:600;
  color:var(--kaart-af);background:var(--kaart-af-vlak)}
.gelezen-label svg.icon{width:17px;height:17px}
@media (max-width:700px){
  .gelezen-balk{flex-direction:column;align-items:stretch}
  .gelezen-rechts{margin-left:0;justify-content:space-between}
}

/* ── Ontwerp 15 en 16 · de filterbalk van Beheer (RV-S6-73 F) ─────────────
   De sleepzin staat onder de balk en loopt over twee regels; het zoekveld
   Zoeken op titel is groter, want daar typ je een titel in. */
.filterbalk-voet{flex:0 0 100%;margin:var(--space-3) 0 0;color:var(--muted);
  font-size:13.5px;line-height:1.45}
.filterbalk-voet.sleepzin{max-width:48ch;white-space:normal}

/* Blok 10.1 (EH-S6-62, besluit Simone 21-09-2026): "De afstand van de onderkant van de filterregel
   tot de bovenkant van de eerste kaart is op Leerroutes en op Specials precies gelijk, in pixels,
   met en zonder de sleepzin." Die afstand stond nergens: Specials liet de lijst tegen de balk aan
   beginnen en Leerroutes kreeg hem van de marges van de losse `.card-meta` die daar de sleepzin
   droeg — 0 px tegen 32 px op 1440, gemeten 28-09-2026. Nu is het één regel, op allebei de
   schermen, en hij verandert niet als de sleepzin verschijnt of wegvalt: de zin zit binnen de
   filterbalk. De klasse staat alleen op die twee lijsten en niet op `.filterbalk + .list`, zodat
   de andere lijstschermen hun eigen opmaak houden. */
.filterbalk+.lijst-na-filter{margin-top:var(--space-4)}
.filterbalk input[type="search"]{min-width:280px;font-size:15px;padding:10px 12px}
@media (max-width:700px){
  .filterbalk input[type="search"]{min-width:0;width:100%}
  .filterbalk-voet.sleepzin{max-width:none}
}

/* ── Ontwerp 19 en 20 · Wordt verlengd op [datum] (RV-S6-74) ──────────────
   Eén label met de datum erin, dus zonder afbreekpunt: "Wordt verlengd op
   25-09-2026" hoort op één regel te blijven staan. */
.status.staat-verlengd{white-space:nowrap}

/* ── Ontwerp 21 en 22 · Dit gaat mee (RV-S6-67, S6-190) ───────────────────
   De regie vroeg om korte streepjes: geen bolletjes en geen tabel, want het is
   een opsomming van wat er live gaat. Drie kolommen die uitlijnen — wat het is,
   hoe het heet, en of het nieuw is — zodat de lijst op één lijn loopt. */
.blokkop{margin:0 0 var(--space-2);font-size:15px;font-weight:750;color:var(--ink)}
.gaatmee{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.gaatmee li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:var(--space-2) var(--space-3);padding-left:18px;position:relative;font-size:15px}
.gaatmee li::before{content:"–";position:absolute;left:0;color:var(--muted)}
.gaatmee-wat{color:var(--muted);font-size:13.5px;min-width:9ch}
.gaatmee-naam{min-width:0;overflow-wrap:anywhere}
.gaatmee-nieuw{font-size:12.5px;font-weight:700;color:var(--kaart-af);
  background:var(--kaart-af-vlak);border-radius:999px;padding:1px 9px}
@media (max-width:560px){
  .gaatmee li{grid-template-columns:1fr auto}
  .gaatmee-wat{grid-column:1 / -1;min-width:0}
}

/* ── Ontwerp 25 en 26 · de afwijzing bij elkaar (RV-S6-71) ────────────────
   Datum, reden en toelichting onder elkaar in twee kolommen, en daaronder
   met een streep ertussen de regel over de afwijsmail: envelop, zin en knop
   op één regel (S6-190). Onder 700px onder elkaar, anders wordt de kolom met
   de labels smaller dan de woorden erin. */
.afwijzing{margin-top:var(--space-4);padding:var(--space-4) var(--space-5);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--kaart)}
.afwijzing h3{margin:0 0 var(--space-3);font-size:15px}
.afwijzing dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px var(--space-4);font-size:15px}
.afwijzing dt{color:var(--muted)}
.afwijzing dd{margin:0}
.afwijzing .mailregel{margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--space-2) var(--space-3)}
.afwijzing .mailregel .icon{width:18px;height:18px;color:var(--muted)}
.afwijzing .mailregel .tekst{min-width:0;font-size:15px}
.afwijzing .mailregel form{margin:0}
@media (max-width:700px){
  .afwijzing dl{grid-template-columns:1fr;gap:2px 0}
  .afwijzing dt{margin-top:var(--space-2)}
  /* Smal scherm: de knop onder de zin, uitgelijnd met de zin en niet met de envelop. */
  .afwijzing .mailregel{grid-template-columns:auto 1fr}
  .afwijzing .mailregel form{grid-column:2;justify-self:start}
}

/* ==========================================================================
   45. Het factuurblok — de vorm van het formulier op improvegroup.nl
   ==========================================================================
   Blok 12b (RV-S6-165, werklijst v4.51). De maten komen uit de opmaak van de
   site zelf; de opgehaalde regels staan onveranderd in
   `oplevering_H7/meting/blok12b_website/css_registration-choice.css` en
   `css_factuur.css`. Wat hier staat zijn dezelfde verhoudingen, maar met de
   tokens van dit platform — kleuren en randen van de site overnemen zou een
   tweede kleurenset naast DESIGN.md zetten.

   Staat vóór 36.99; dat blok blijft het laatste. */
.factuur-blok .keuzekaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.factuur-blok .keuzekaart{display:flex;gap:13px;align-items:flex-start;padding:18px;margin:0;
  background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-md);cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease}
.factuur-blok .keuzekaart:hover{border-color:var(--bordeaux)}
/* De gekozen kaart krijgt een rand plus een ring: een kleurverschil alleen is te
   weinig voor wie kleur slecht onderscheidt, en de ring is ook op zand zichtbaar. */
.factuur-blok .keuzekaart:has(input:checked){border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(135,76,13,.09)}
.factuur-blok .keuzekaart input{flex:none;width:19px;height:19px;min-height:19px;margin-top:3px;accent-color:var(--bordeaux)}
.factuur-blok .keuzekaart span{display:block;min-width:0}
.factuur-blok .keuzekaart strong{display:block;margin-bottom:5px;font-size:14.5px}
.factuur-blok .keuzekaart small{display:block;color:var(--muted);font-size:13.5px;line-height:1.42;font-weight:400}

.factuur-adreskop{margin:var(--space-4) 0 var(--space-3)}
.factuur-adreskop .adreskop-titel{margin:0 0 2px;font-weight:600;font-size:14.5px;color:var(--bordeaux)}
.factuur-adreskop .adreskop-uitleg{margin:0;color:var(--muted);font-size:13.5px;line-height:1.42}
.factuur-adreskop [data-adreskop-stand][hidden]{display:none}

/* Straat krijgt ruim twee keer de breedte van huisnummer en toevoeging, net als op de
   site. Onder 640px staat straat op een eigen regel en delen de twee andere de breedte:
   een huisnummerveld van een derde van 390px is smal genoeg. */
.factuur-blok .adresrij{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:0 var(--space-4)}
/* Postcode en plaats delen de breedte (S6-588 punt 2); op de site staan ze ook naast elkaar. */
.factuur-blok .adresrij.tweekolommen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.factuur-blok .veldhint{margin:var(--space-1) 0 0;color:var(--muted);font-size:13.5px;line-height:1.42}
@media (max-width:640px){
  .factuur-blok .keuzekaarten{grid-template-columns:1fr}
  .factuur-blok .adresrij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .factuur-blok .adresrij>div:first-child{grid-column:1/-1}
  /* Twee velden naast elkaar worden op 390 twee velden onder elkaar: een postcodeveld van
     minder dan de halve breedte laat "1234 AB" nog net staan, maar een plaatsnaam niet. */
  .factuur-blok .adresrij.tweekolommen{grid-template-columns:1fr}
}

/* ==========================================================================
   36.99 Ruimte — STAAT HELEMAAL ONDERAAN, en dat is de hele truc
   ==========================================================================
   Dit blok stond eerst bovenaan sectie 36. Toen verloor `.mt-0` van de
   margin-top die `.actieform` (36.5) zelf zet: gelijke specificiteit, dus de
   laatste wint. Dezelfde fout als eerder met `.knopregel`, alleen een
   verdieping lager. Een ruimteklasse hoort per definitie te winnen van elke
   component die zelf een marge meebrengt. Zet hier dus niets onder.
   ========================================================================== */

/* ============================================================================
   RONDE H4 — BLOK 1 · VARIANT B (RV-S6-93, RV-S6-97, RV-S6-98, RV-S6-100)
   ----------------------------------------------------------------------------
   Variant B stond in H3 als los ontwerpbestand naast app.css; Simone keurde hem
   goed (S6-214) en hier staat hij echt in het platform. Wat RV-S6-100 anders
   vraagt dan het ontwerp, staat per onderdeel bij dat onderdeel.

   Drie dingen die in de tokens hierboven zijn geregeld en niet hier:
   de kaarten (--kaart), de tekst op een merkvlak (--op-merk) en het weghalen
   van de twee haarlijnen bovenin (bij .appbar en .merkzone).
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. De achtergrond van het werkgebied — lichter zand, zonder nieuwe kleur

   RV-S6-100 vraagt "het zand van nu, als transparante variant over wit, uitkomst
   ongeveer #F8F5F1". Puur wit kan hier niet als ondergrond: #FFFFFF staat niet
   in `docs/HUISSTIJLPALET_IMPROVE_VAST_20260909.md`, en de werklijst schrijft
   dan #FBFAF8 voor. Gerekend over papier:

       zand #F3EEE8 op 42 %  over  papier #FBFAF8   =  (248, 245, 241) = #F8F5F1

   Dat is tot op de eenheid de gevraagde uitkomst. Beide kleuren staan in het
   palet en `HuisstijlPaletTest` laat een transparante variant uitdrukkelijk toe
   ("de alfawaarde is vrij"), dus er komt geen kleurwaarde bij.

   De taupe #BBA590 uit het H3-ontwerp vervalt: Simone vindt die groenig.

   WAAROM NIET VIA --canvas. Die token doet meer dan de pagina-achtergrond —
   twaalf plekken gebruiken hem voor het zoekveld in de balk bovenin, de hover op
   een menu-item en op een secundaire knop, en de codeblokken. Verzet je de token,
   dan schuiven die twaalf mee en valt de hover weg tegen de nieuwe achtergrond.
   Daarom draagt `html` de ondergrond en `body` de zandlaag, en blijft --canvas
   wat hij was. Dezelfde constructie als in het goedgekeurde ontwerp.

   Contrast op de nieuwe achtergrond (alles gaat omhoog, want lichter):
     --ink      #211C18  14,64:1 → 15,53:1
     --muted    #67626C   5,14:1 →  5,46:1
     --bordeaux #874C0D   5,93:1 →  6,29:1
     --grey     #717074   4,26:1 →  4,52:1   (haalt nu 4,5:1, eerst net niet)
   -------------------------------------------------------------------------- */
html{background:var(--paper)}
body{background:rgba(243,238,232,.42)}

/* ----------------------------------------------------------------------------
   2. De kleurenbalk (RV-S6-97, RV-S6-98)

   Breedtes gemeten op de officiële balk van improvegroup.nl
   (`balk-zonder-pijltjes.jpg`, 2048 x 68 px, middenrij uitgelezen). De zeven
   segmenten zijn exact zeven paletkleuren; hieronder staan de paletwaarden, niet
   de jpeg-waarden (die wijken 1-3 punten af door compressie).

   Hoogte 36 px op de computer, 20 px op de telefoon (RV-S6-97, gemeten op
   `Website_kop_improvegroup.png`: ongeveer 35 px op 1512 breed). Kier 22 px op de
   computer, 0 op de telefoon (RV-S6-98, op dezelfde opname gemeten). Eén token
   per maat, zodat alles wat eronder opschuift met dezelfde waarde rekent.

   De balk ligt als eigen laag over de volle vensterbreedte en dus ook over de
   zijbalk. Als pseudo-element op .appbar begon hij achter de zijbalk en verdween
   het eerste vijfde deel — vandaar `fixed` met een z-index boven de zijbalk.

   Eén laag draagt twee dingen: bovenaan de kier in papierkleur, daaronder de
   balk. Dat moet samen, want tussen de kop en de balk zit links de zijbalk
   (papier) en rechts het werkgebied (lichter); een doorzichtige kier zou
   halverwege van kleur wisselen.

   De balk is decoratief en draagt geen betekenis.
   -------------------------------------------------------------------------- */
:root{
  --merkbalk-h:36px;
  --merkbalk-kier:22px;
}
@media (max-width:780px){
  :root{ --merkbalk-h:20px; --merkbalk-kier:0px; }
}

body::before{
  content:"";
  position:fixed;
  left:0; right:0; top:var(--appbar-h);
  height:calc(var(--merkbalk-kier) + var(--merkbalk-h));
  pointer-events:none;
  z-index:45;
  background-color:var(--paper);
  background-image:linear-gradient(90deg,
      #A1A2A3 0      9.42%,       /* neutraal grijs   */
      #7B0041 9.42%  14.16%,      /* bordeaux         */
      #C30066 14.16% 45.17%,      /* magenta          */
      #BC000E 45.17% 47.61%,      /* donkerrood       */
      #F6A924 47.61% 66.65%,      /* oranje/geel      */
      #874C0D 66.65% 76.22%,      /* donkerbruin      */
      #8A745A 76.22% 100%);       /* bruin/goud       */
  background-repeat:no-repeat;
  background-position:0 var(--merkbalk-kier);
  background-size:100% var(--merkbalk-h);
}

/* De zijbalk en het werkgebied beginnen precies de balkhoogte lager, zodat er
   niets achter de balk verdwijnt. Alles rekent met dezelfde twee tokens. */
.shell{padding-top:calc(var(--merkbalk-kier) + var(--merkbalk-h))}
@media (min-width:781px){
  .sidebar{top:calc(var(--appbar-h) + var(--merkbalk-kier) + var(--merkbalk-h));
    height:calc(100vh - var(--appbar-h) - var(--merkbalk-kier) - var(--merkbalk-h))}
}

/* OP-006 punt 5, gemeten op 04-10-2026. Diezelfde ruimte ontbrak op de schermen ZONDER zijbalk.
   `.shell` reserveert hierboven de balkhoogte, maar de kale variant van layouts/app.php zet
   `<main class="main">` rechtstreeks achter de appbar — zonder `.shell` ertussen. Daar begon de
   inhoud dus op `--appbar-h`, precies waar de vastgezette balk begint, en schoof de kop eronder.
   Gemeten op /fout bij 1440 breed: balk 76-134 px, kop "404" 108-149 px, dus de bovenste 26 px van
   een kop van 41 px stond achter de balk. Bij 390 breed gebeurde dat niet (balk 68-88, kop vanaf
   94,9), want daar is de balk lager en de kier 0.
   Dezelfde twee tokens als hierboven, zodat dit meeverandert als de balk verandert. De 32px is de
   bestaande bovenpadding van `.main`; die blijft, de balkhoogte komt erbij. De minimumhoogte gaat
   met dezelfde maat omlaag, anders wordt de pagina precies die hoogte langer dan het venster en
   verschijnt er een schuifbalk op een pagina die past. Raakt alleen de schermen zonder zijbalk:
   de ingelogde schermen lopen via `.shell`. */
.appbar-zonder-zijbalk + .main{
  /* OP-007 punt 2 (S6-1053). HIER STOND ER OOK
     min-height:calc(100vh - var(--appbar-h) - var(--merkbalk-kier) - var(--merkbalk-h));
     en dat liet onder de voettekst een lichtere strook open: gemeten 58 px op 1440 en 20 px op
     390, precies --merkbalk-kier + --merkbalk-h. De kleurenbalk staat op body::before met
     position:fixed (S6-237, RV-S6-97) en neemt dus GEEN ruimte in de stroom in; hem van 100vh
     aftrekken maakte .main net die hoogte te kort. De regel is hier helemaal weg en niet
     verbeterd, want `.main` heeft zijn eigen min-height al (regel 1098:
     `min-height:calc(100vh - var(--appbar-h))`) en die klopt. Deze regel overschreef die met een
     kleinere waarde. Wat hier WEL hoort te staan is alleen de ruimte onder de balk, want dat is
     het enige dat de kale variant miste ten opzichte van `.shell` (regel 4856). */
  padding-top:calc(32px + var(--merkbalk-kier) + var(--merkbalk-h));
}

/* S6-237 — op een scherm ZONDER appbar schuift de kleurenbalk mee met de pagina.
   Wat er misging: `position:fixed` hoort bij een balk die onder een sticky `.appbar`
   hangt. Op de inlogpagina hing hij onder `.auth-balk`, en die stond gewoon in de
   pagina. Bij de kleinste scrolbeweging — ook de terugveer van een trackpad — schoof
   het logo onder de vastgezette balk en kwam de kop Welkom terug eronder uit.
   `position:absolute` zonder een geplaatste voorouder rekent tegen het begin van het
   document, dus de balk staat bovenaan de PAGINA en scrollt mee. Op de ingelogde
   schermen verandert er niets: daar is `.appbar` sticky en hoort de balk vast te staan.

   De kier van 22px vervalt op deze schermen: in A2 begint onder de kleurenbalk meteen
   de zandkleur, en de kier zou daar een papierkleurige strook boven de balk zetten. */
body:not(:has(.appbar)){--merkbalk-kier:0px}
body:not(:has(.appbar))::before{position:absolute;top:0}

/* ----------------------------------------------------------------------------
   3. Het pijlen-watermerk (RV-S6-81)

   Rustige vlakken, rechtsonder, heel licht, met multiply zodat het wit wegvalt.
   Twee van de drie gevraagde plekken bestaan als eigen vlak: de inlogpagina
   (.auth-wrap) en de lege staat (.empty-state). Het welkomstblok op het Overzicht
   is geen eigen vlak in de huidige opmaak — die pagina begint met een gewone
   .page-head zonder achtergrond, en een watermerk daarop zou op élke pagina
   verschijnen. Dat blijft dus staan tot dat blok er is.
   -------------------------------------------------------------------------- */
/* S6-260: geen pijlenmerk op het inlogscherm. Op 14 procent zag Simone het niet staan, en
   zichtbaar genoeg trekt het het oog naar de rechteronderhoek terwijl de knop Inloggen links
   ervan staat. Het merk blijft op de mails en de documenten. De lege staat houdt het wel. */
.empty-state::before{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:190px; height:206px;
  background:url("../img/pijlen-watermerk.png") right bottom / contain no-repeat;
  mix-blend-mode:multiply;
  opacity:.085;
  pointer-events:none;
}
.empty-state{position:relative;overflow:hidden}

/* ----------------------------------------------------------------------------
   4. Oranje/geel als accent voor "nieuw" (RV-S6-80)

   Het merkbruin blijft de kleur van actie (knop, link, actief menu-item); geel
   markeert alleen wat nieuw is. Een nieuwe rij in een lijst is het enige "nieuw"
   dat de huidige opmaak kent — de blokken Uitgelicht en Nieuw verschenen zijn met
   bevindingen v09 van het Overzicht gehaald. De rand was donkerbruin, dezelfde
   kleur als actie; geel scheidt "nieuw" van "klik hier".

   Wat hier NIET staat: .status.todo geel maken. Die regel wijst W-01.1#R2 juist aan
   als de NEUTRALE pil, om een nieuw feedbackbericht uit het donkerrood te houden.
   Geel zou hem gelijkmaken aan .status.warning.
   -------------------------------------------------------------------------- */
.data-table tr.rij-nieuw td:first-child{border-left-color:var(--yellow)}

/* ==========================================================================
   36.98  HET BEHEEROVERZICHT: DRIE BAKKEN, BETEKENISKLEUR EN DE LIJST
          AANDACHT NODIG   (RV-S6-88 t/m RV-S6-95, RV-S6-101 — S6-214)
   --------------------------------------------------------------------------
   Gebouwd uit ontwerp o3-05 t/m o3-08 van H3. Daar heetten deze klassen
   `b8-*`, omdat acht van de eerste namen in het ontwerpbestand botsten met
   bestaande klassen in dit bestand (.naast was een flexrij met
   justify-content:flex-end, .sinds stond op display:none). Hier zijn de namen
   gecontroleerd: `bakken`, `bak`, `bak-*`, `seinicoon`, `sein-*`,
   `alles-in-orde`, `tabbladen`, `tabblad` en `aandachtrij` komen in dit
   bestand en in resources/views nergens anders voor.

   KLEUR MET BETEKENIS (RV-S6-101 punt 2). Er komt geen kleurwaarde bij: elke
   regel hieronder gebruikt een token dat al in :root staat.
     rood   --danger / --danger-soft            een echt probleem   (Nu regelen)
     oker   --yellow / --warning-soft           er komt iets aan    (Binnenkort)
     blauw  --kaart-open / --kaart-open-vlak    gewone informatie   (Om te weten)
     groen  --kaart-af / --kaart-af-vlak        het staat goed
   Op oker en geel staat de tekst ALTIJD donker (--ink), nooit wit: dat is de
   regie-instructie van 22-09 bij blok 1, en het is ook het enige wat meet —
   wit op #F6A924 haalt 1,86:1.
   ========================================================================== */

/* ── De drie bakken ──────────────────────────────────────────────────────── */
.bakken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:980px){.bakken{grid-template-columns:1fr}}

.bak{background:var(--kaart);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);
  box-shadow:var(--shadow-soft);border-top:4px solid var(--line);overflow:hidden}
.bak.nu-regelen{border-top-color:var(--danger)}
.bak.binnenkort{border-top-color:var(--yellow)}
.bak.om-te-weten{border-top-color:var(--kaart-open)}

/* De kop draagt de betekeniskleur als VLAK, niet alleen als randje. Gemeten
   reden (blok 8, H3): de gele bovenrand haalt tegen de pagina 1,85:1 — met een
   streep van 4 px is de kleur nauwelijks te zien, terwijl juist die kleur in
   één oogopslag iets moet vertellen. Als vlak met donkere tekst haalt hetzelfde
   geel 13,37:1. De bovenrand blijft, maar is niet meer de enige drager. */
.bak-kop{display:flex;align-items:baseline;gap:var(--space-2);margin:calc(-1 * var(--space-4));
  margin-bottom:0;padding:var(--space-3) var(--space-4)}
.bak-kop h3{margin:0;font-size:17px}
.bak-telling{margin-left:auto;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.bak.nu-regelen .bak-kop{background:var(--danger-soft)}
.bak.nu-regelen .bak-telling{color:var(--danger)}
.bak.binnenkort .bak-kop{background:var(--warning-soft)}
.bak.om-te-weten .bak-kop{background:var(--kaart-open-vlak)}
.bak.binnenkort .bak-telling,.bak.om-te-weten .bak-telling{color:var(--ink)}

.bak-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
/* EH-S6-17 (blok 13): de hele regel is klikbaar. De rasterindeling stond op de <li> en staat nu op
   de <a> erin, want die moet het hele oppervlak dekken — anders is alleen de titel aan te klikken en
   niet "de hele regel". De <li> houdt zijn plek in de opsomming. De link erft de tekstkleur en
   draagt geen onderstreping: de bak is een lijst en geen tekst met links erin. Bij hover en bij
   toetsenbordfocus wordt de titel onderstreept, zodat zichtbaar is dat er iets te klikken valt. */
.bak-lijst li{display:block}
.bak-regel{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--space-3);align-items:start;
  color:inherit;text-decoration:none}
.bak-tekst{min-width:0}
a.bak-regel:hover b,a.bak-regel:focus-visible b{text-decoration:underline}
.bak-lijst b{display:block;font-size:13.5px;line-height:1.35;font-weight:700}
/* H6 punt 2 (23-09-2026): stond als `.bak-lijst span`. Die selector raakte niet alleen het
   regeltje onder de titel maar ook het gekleurde rondje ervoor, dat óók een <span> is. Met
   specificiteit 0,1,1 won hij van `.seinicoon{display:grid;place-items:center}` (0,1,0) en
   zette het rondje op `display:block`; daarmee verviel het centreren en stond het pictogram
   tegen de bovenrand — 0px lucht boven, 17px onder. Nu alleen de span ín het tekstblok, dus
   het rondje houdt zijn eigen opmaak, net als bij de kerncijfers. */
/* EH-S6-17: `li>div>span` werd `.bak-tekst>span`, omdat het tekstblok een <span> in de link
   is geworden in plaats van een <div> in de <li>. De sr-only met het label van de handeling valt
   er buiten: die heeft zijn eigen opmaak nodig om onzichtbaar te blijven. */
.bak-tekst>span:not(.sr-only){display:block;color:var(--muted);font-size:12.5px}
.bak-leeg{display:flex;gap:var(--space-3);align-items:center;color:var(--muted);font-size:13.5px;margin:0}
.bak-alle{margin-top:auto;font-weight:700;font-size:13.5px;color:var(--bordeaux)}

/* Alle drie leeg: één groene regel over de volle breedte, bóven de bakken. */
.alles-in-orde{display:flex;gap:var(--space-3);align-items:center;background:var(--kaart-af-vlak);
  border:1px solid var(--kaart-af-vlak);border-left:4px solid var(--kaart-af);
  border-radius:var(--radius-md);padding:var(--space-4);color:var(--kaart-af);font-weight:700;
  margin:0 0 var(--space-4)}
.alles-in-orde .seinicoon{background:var(--kaart)}

/* ── Het ronde icoonvlak: één vorm, vier betekenissen ────────────────────── */
/* RV-S6-101 punt 1: het pictogram staat in het MIDDEN van zijn rondje,
   horizontaal en verticaal. In het ontwerp stond het er bijna buiten. Oorzaak
   gemeten: een <svg> is inline en gaat op de tekstregel staan, dus place-items
   centreerde wel het vakje maar niet de letterregel eronder. `display:block` op
   de svg en `line-height:0` op het vlak halen die regel weg. */
.seinicoon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  flex:none;line-height:0}
.seinicoon svg{width:17px;height:17px;display:block}
.seinicoon.sein-rood{background:var(--danger-soft);color:var(--danger)}
.seinicoon.sein-oker{background:var(--warning-soft);color:var(--ink)}
.seinicoon.sein-blauw{background:var(--kaart-open-vlak);color:var(--kaart-open)}
.seinicoon.sein-groen{background:var(--kaart-af-vlak);color:var(--kaart-af)}

/* ── De vier kerncijfers krijgen hetzelfde rondje ────────────────────────── */
/* De rij onder "Gebruik" gebruikt dezelfde partial maar geeft geen `sein` mee
   en blijft dus precies zoals hij was. */
.kerncijfer .seinicoon{margin-bottom:var(--space-2)}

/* ── De lijstpagina Aandacht nodig (RV-S6-94) ────────────────────────────── */
/* Dit is een TWEEDE tabvorm naast .rap-tabs (de rapportage, sectie 33). Dat is geen
   verdubbeling uit slordigheid: o3-07 toont tabbladen met een telling erin en met de
   kleur van de bak in die telling, en juist die telling is de reden dat de pagina er is.
   .rap-tab is een platte onderstreepte tab zonder plek voor een getal. */
.tabbladen{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line);
  margin-bottom:var(--space-4);flex-wrap:wrap}
.tabblad{padding:10px 16px;border-radius:12px 12px 0 0;text-decoration:none;color:var(--muted);
  font-weight:700;font-size:13.5px;border:1px solid transparent;border-bottom:0;display:flex;
  align-items:center;gap:var(--space-2)}
.tabblad:hover{background:var(--sand)}
.tabblad[aria-current="page"]{background:var(--kaart);border-color:var(--line);color:var(--ink);
  margin-bottom:-1px;padding-bottom:11px}
.tabblad .tab-aantal{font-variant-numeric:tabular-nums;background:var(--sand);border-radius:999px;
  padding:1px 8px;font-size:11.5px}
.tabblad[aria-current="page"].nu-regelen .tab-aantal{background:var(--danger-soft);color:var(--danger)}
.tabblad[aria-current="page"].binnenkort .tab-aantal{background:var(--warning-soft);color:var(--ink)}
.tabblad[aria-current="page"].om-te-weten .tab-aantal{background:var(--kaart-open-vlak);color:var(--kaart-open)}

/* RV-S6-101 punt 3: datum en knop staan in een VASTE kolom, links uitgelijnd,
   direct na de tekst — niet los aan de rechterrand. Daarom is de tekstkolom
   begrensd (minmax(0,34rem)) in plaats van 1fr, staat de derde kolom op een
   vaste breedte en duwt `justify-content:start` het geheel naar links. Met 1fr
   zou de laatste kolom altijd tegen de rechterrand blijven plakken en zouden de
   regels alleen bij toeval onder elkaar uitkomen. Op 390 px valt de kolom onder
   de tekst, met dezelfde inspringing als het pictogram. */
/* .aandachtlijst bestond al (sectie 32.7) als kaartlijst en is hier NIET hergebruikt:
   deze lijst staat zelf al in een .card, en dan zou er een tweede rand omheen komen. */
.aandachtrijen{list-style:none;margin:0;padding:0}
.aandachtrij{display:grid;grid-template-columns:34px minmax(0,34rem) minmax(0,15rem);
  justify-content:start;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;
  border-bottom:1px solid var(--line-soft)}
.aandachtrij:last-child{border-bottom:0}
.aandachtrij b{display:block;font-size:14px;font-weight:700}
.aandachtrij .wie{display:block;color:var(--muted);font-size:12.5px}
.aandachtrij .wanneer{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px}
@media (max-width:700px){
  .aandachtrij{grid-template-columns:34px minmax(0,1fr);row-gap:var(--space-2)}
  .aandachtrij>:last-child{grid-column:2}
}
.soortknoppen{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}

/* ---- Blok 15: het overzicht van de modules (scherm A) en het modulescherm (scherm B) ----
   Ontwerpen `Overzicht_modules_v10_25-09.html` en `Modulescherm_v10_25-09.html`, goedgekeurd.

   De drie standkleuren komen uit de tokens die RV-S6-26 en RV-S6-27 al hebben vastgelegd:
   --kaart-af / --kaart-af-vlak, --kaart-actie-vlak met --paper, --kaart-open / --kaart-open-vlak.
   Het ontwerp koos er twee nieuwe (#FBE9F0 voor Bezig en #3B5F3F voor de groene knoptekst); die
   staan niet in het palet en het besluit gaat voor (S6-398). Hier staat dus geen losse kleurwaarde:
   elke kleur is een token, zodat HuisstijlPaletTest en StylesheetTokensTest hem allebei kunnen
   volgen. */

/* DE ACHT MODULEKLEUREN (S6-380). Eén regel per module, gekoppeld aan `leerroute_modules.code`.
   Welke codes een kleur hebben staat in ImProve\Content\Modulekleuren, dat hier de klassenaam
   `kleur-<code>` bij levert; de waarde in pixels staat alleen hier.

   Waarom niet als style-attribuut in de view: DeelnemerSchermenTest staat op een deelnemersscherm
   geen style toe behalve een balkbreedte (en dat is een goede regel), en HuisstijlPaletTest leest
   public/css en keurt elke kleur af die niet in het paletbestand staat. Alle acht staan erin.

   --modulekleur heeft een terugval, want StylesheetTokensTest wil bij elke var() een definitie
   zien. Zonder kleurklasse laat het scherm de band helemaal weg, dus die waarde komt niet in beeld. */
/* Allebei één klasse diep, en de acht kleurklassen staan hieronder — dus die winnen als ze er
   zijn. Hier stond `.modulekaart,.modulescherm .modulehoofd`: twee klassen diep, en daarmee sterker
   dan `.kleur-gods-m01`. Gevolg: op het modulescherm won altijd de terugvalkleur --wine (#7B0041)
   en had elke module dezelfde bordeaux band, terwijl dezelfde module op de kaart wél zijn eigen
   kleur had (S6-432 punt 4). */
.modulekaart,.modulehoofd{--modulekleur:var(--wine)}
.kleur-gods-inleiding{--modulekleur:#858A9B}   /* 00 blauwgrijs */
.kleur-gods-m01{--modulekleur:#874C0D}         /* 01 donkerbruin */
.kleur-gods-m02{--modulekleur:#7B0041}         /* 02 bordeaux */
.kleur-gods-m03{--modulekleur:#F6A924}         /* 03 amber — nummer in donkerbruin */
.kleur-gods-m04{--modulekleur:#8A745A}         /* 04 bruin/goud */
.kleur-gods-m05{--modulekleur:#717074}         /* 05 grijs */
.kleur-gods-m06{--modulekleur:#BBA590}         /* 06 licht taupe — nummer in donkerbruin */
.kleur-gods-m07{--modulekleur:#C30066}         /* 07 magenta */

/* ── Scherm A: de kaart ── */
.modulekaart{display:flex;flex-direction:column;background:var(--kaart);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(33,28,24,.04);
  scroll-margin-top:calc(var(--appbar-h) + var(--space-4))}
.modulekaart:hover{box-shadow:var(--shadow-soft)}
.modulekaart:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* De kopband. `overflow:visible` hoort erbij: het ronde icoon hangt 19px over de onderrand, en
   met overflow:hidden knipt de band precies dat stuk weg. */
.modulekaart .band{position:relative;display:flex;align-items:center;height:58px;
  padding:0 18px;background:var(--modulekleur);overflow:visible}
.modulekaart .band .nr{font-family:var(--font-head);font-size:37px;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.34)}
/* Bij amber en licht taupe staat het nummer in donkerbruin: wit haalt daar het contrast niet
   (S6-380). Dat is een meting, en welke twee dat zijn staat in Modulekleuren. */
.modulekaart .band.donkernummer .nr{color:rgba(135,76,13,.55)}
.modulekaart .band .ring{position:absolute;right:-20px;top:-21px;width:84px;height:84px;
  border-radius:50%;border:10px solid rgba(255,255,255,.12);pointer-events:none}
.modulekaart .band.donkernummer .ring{border-color:rgba(135,76,13,.12)}
.modulekaart .band .icoon{position:absolute;right:16px;bottom:-19px;z-index:2;
  width:40px;height:40px;border-radius:50%;background:var(--kaart);
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(33,28,24,.14)}
.modulekaart .band .icoon .icon{width:19px;height:19px;color:var(--modulekleur)}
.modulekaart .band.donkernummer .icoon .icon{color:var(--bordeaux)}

.modulekaart .kaartbinnen{display:flex;flex-direction:column;gap:6px;flex:1;
  padding:22px var(--space-4) var(--space-4)}
/* Zonder kleurband houdt de kaart het nummer binnenin: anders staat er helemaal geen nummer. */
.modulekaart .nr.plat{font-family:var(--font-head);font-size:22px;font-weight:700;
  line-height:1;color:var(--muted)}
.modulekaart .kaarttitel{font-family:var(--font);font-size:17px;font-weight:700;
  letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.modulekaart .uitleg.optioneel{font-size:13px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* RV-S6-107: hoogstens vier regels, regel vier eindigt met een beletselteken, geen lees-meer-knop.
   line-clamp kapt op een woordgrens af; de live pagina kapte midden in een woord ("Sla je er e").
   `flex:1` duwt de balk, de stand en de knop naar de onderkant, zodat kaarten met een korte en een
   lange toelichting even hoog blijven. */
/* RV-S6-70 (blok 9.8) geldt ook voor de kaart van een special: zelfde maat als gewone tekst,
   zelfde donkerder grijs. */
.modulekaart .kaarttoelichting{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:4;line-clamp:4;overflow:hidden;
  font-size:1rem;line-height:1.45;color:var(--kaarttekst);flex:1}
.modulekaart .minispoor{display:block;height:6px;border-radius:99px;
  background:var(--kaart-vlak);overflow:hidden;margin-top:var(--space-2)}
.modulekaart .minispoor .vulling{display:block;height:100%;border-radius:99px;
  background:var(--kaart-actie-vlak)}
.modulekaart .minispoor .vulling.af{background:var(--kaart-af)}
.modulekaart .statusrij{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.modulekaart .pil{display:inline-flex;align-items:center;border-radius:99px;padding:4px 10px;
  font-size:12px;font-weight:700}
.modulekaart .pil.done{background:var(--kaart-af-vlak);color:var(--kaart-af)}
.modulekaart .pil.warning{background:var(--kaart-actie-vlak);color:var(--paper)}
.modulekaart .pil.todo{background:var(--kaart-open-vlak);color:var(--kaart-open)}
.modulekaart .minipct{font-size:12px;font-weight:800;color:var(--muted)}
.modulekaart .kaartknop{display:flex;justify-content:center;width:100%;margin-top:var(--space-1)}
/* De vlakke knop: "nog niet begonnen" en "nog eens doen" staan stiller dan "waar je gebleven
   bent" (v10/v11, TXT-S6-40). --kaart-vlak is #ECE8E4, "het vlak achter een onderdeel" uit het
   palet; het ontwerp noemt #EDE8E1 en die kleur bestaat niet in het palet (S6-421). --bordeaux op
   --kaart-vlak haalt 5,61:1, ruim boven de 4,5:1 die tekst nodig heeft. */
.button.secondary.vlak{background:var(--kaart-vlak);border-color:transparent}
/* RV-S6-136 (blok 9.3, besluit Simone 27-09-2026): op /beheer/leerroutes en /beheer/specials is de
   knop Bewerken in een rij even groot als Nieuwe leerroute — 154 bij 46. De hoogte komt uit de
   gewone .button (zonder `small`); alleen de breedte moet erbij, want "Bewerken" is een korter
   woord dan "Nieuwe leerroute". Andere lijsten in beheer houden hun .button.small; dat is wat het
   besluit zegt, en het is de reden dat dit een eigen klasse is en geen wijziging van .button.small. */
.button.rijknop{min-width:154px}
.button.secondary.vlak:hover{background:var(--sand);border-color:transparent}

/* Een afgeronde kaart (S6-381): groene gloed om de rand, een groen vinkje in plaats van het icoon,
   en een groene knop. De kaart houdt zijn eigen kleurband — hij zakt niet weg. */
.modulekaart.klaar{border-color:rgba(74,118,79,.40);
  box-shadow:0 0 0 1px rgba(74,118,79,.14),0 1px 2px rgba(33,28,24,.04)}
.modulekaart.klaar .band .icoon{background:var(--kaart-af)}
.modulekaart.klaar .band .icoon .icon{color:var(--kaart);stroke-width:2.6}
/* Tekst in --kaart-af en niet in het #3B5F3F van het ontwerp: het palet wint (S6-398). */
.modulekaart.klaar .kaartknop{background:var(--kaart-af-vlak);color:var(--kaart-af);border-color:transparent}

/* ── Scherm B: het modulescherm ── */
.modulescherm .modulehoofd{background:var(--kaart);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden}
.modulescherm .modulehoofd .band{position:relative;display:flex;align-items:center;height:52px;
  padding:0 20px;background:var(--modulekleur);overflow:visible}
.modulescherm .modulehoofd .band .nr{font-family:var(--font-head);font-size:33px;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.34)}
.modulescherm .modulehoofd .band.donkernummer .nr{color:rgba(135,76,13,.55)}
.modulescherm .modulehoofd .band .ring{position:absolute;right:-18px;top:-19px;width:76px;height:76px;
  border-radius:50%;border:9px solid rgba(255,255,255,.12);pointer-events:none}
.modulescherm .modulehoofd .band.donkernummer .ring{border-color:rgba(135,76,13,.12)}
.modulescherm .modulehoofd .band .icoon{position:absolute;right:20px;bottom:-17px;z-index:2;
  width:36px;height:36px;border-radius:50%;background:var(--kaart);display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(33,28,24,.14)}
.modulescherm .modulehoofd .band .icoon .icon{width:17px;height:17px;color:var(--modulekleur)}
.modulescherm .modulehoofd .band.donkernummer .icoon .icon{color:var(--bordeaux)}
.modulescherm .kopbinnen{padding:var(--space-4) 20px}
.modulescherm .kopbinnen h1{font-size:24px;letter-spacing:-.02em}
.modulescherm .kopbinnen .toelichting{margin-top:6px;font-size:14.5px;line-height:1.5;
  color:var(--muted);max-width:76ch}
.modulescherm .modulevoortgang{display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-3);max-width:430px}
.modulescherm .modulevoortgang .spoor{flex:1;display:block;height:7px;border-radius:99px;
  background:var(--kaart-vlak);overflow:hidden}
.modulescherm .modulevoortgang .vulling{display:block;height:100%;border-radius:99px;
  background:var(--kaart-actie-vlak)}
.modulescherm .modulevoortgang .vulling.af{background:var(--kaart-af)}
.modulescherm .modulevoortgang .tel{font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap}

/* De tijdlijn: de banen als knopen op één verticale lijn. De lijn zit op ::before van de stap en
   niet als los element, zodat hij precies tot de volgende knoop loopt en met de inhoud meegroeit. */
.tijdlijn{list-style:none;margin:var(--space-4) 0 0;padding:0}
.tijdlijn .baanstap{position:relative;padding:0 0 var(--space-4) 50px}
.tijdlijn .baanstap::before{content:"";position:absolute;left:17px;top:34px;bottom:-2px;
  width:2px;background:var(--line)}
/* Groen zolang de baan erboven helemaal af is, daarna neutraal. */
.tijdlijn .baanstap.af::before{background:rgba(74,118,79,.45)}
.tijdlijn .baanstap.laatste{padding-bottom:0}
.tijdlijn .baanstap.laatste::before{display:none}
.tijdlijn .baanstap>h2{display:flex;align-items:center;min-height:36px;margin:0;
  font-size:17px;letter-spacing:-.01em}
/* De knoop. `box-shadow` in de paginakleur maakt het gat in de lijn, zonder een tweede vlak. */
.tijdlijn .knoop{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 0 0 4px var(--sand)}
.tijdlijn .knoop .icon{width:17px;height:17px;color:var(--paper)}
/* De vier knoopkleuren liggen vast in S6-384. Oefenen is magenta en niet grijs (RV-S6-15).
   Lezen is #5E6478 blauwgrijs; dat is dezelfde palettint als --kaart-open, dus hergebruikt in
   plaats van een tweede token voor één waarde. Doen krijgt het icoon in donkerbruin, want wit
   haalt op amber het contrast niet — dezelfde meting als bij het modulenummer (S6-380). */
.tijdlijn .baanstap.kijken .knoop{background:var(--wine)}
.tijdlijn .baanstap.lezen .knoop{background:var(--kaart-open)}
.tijdlijn .baanstap.doen .knoop{background:var(--yellow)}
.tijdlijn .baanstap.doen .knoop .icon{color:var(--bordeaux)}
.tijdlijn .baanstap.oefenen .knoop{background:var(--magenta)}

.tijdlijn .baanitems{list-style:none;margin:0;padding:0}
.tijdlijn .baanitems>li{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);
  padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:var(--kaart)}
/* RV-S6-55 (blok 8.1): "Verder waar je was" wijst naar #onderdeel-{id} op deze rij. Twee dingen
   horen daarbij. De marge zorgt dat de rij ONDER de vastgezette balk uit komt in plaats van erachter
   — dezelfde regel als .sprongdoel en .moduleblok (EH-S6-77). En het oplichten laat zien wáár je
   bent geland: kort en eenmalig, want het besluit zegt "even". De kleur is --yellow uit het palet,
   als rand om de rij en niet als vulling: een gele vulling zou de stand van de rij (grijs, groen,
   bordeaux) overschreeuwen. `forwards` houdt de rand op nul, dus na de animatie is er geen
   verschil meer met een gewone rij. Wie beweging uit heeft staan ziet de rand een seconde staan
   zonder overgang (zie de reduced-motion-regel onderaan dit blok). */
.tijdlijn .baanitems>li{scroll-margin-top:calc(var(--appbar-h) + var(--space-4))}
.tijdlijn .baanitems>li:target{animation:onderdeel-oplichten 1.6s ease-out 1 forwards}
@keyframes onderdeel-oplichten{
  0%{box-shadow:0 0 0 3px var(--yellow)}
  70%{box-shadow:0 0 0 3px var(--yellow)}
  100%{box-shadow:0 0 0 0 var(--yellow)}
}
@media (prefers-reduced-motion:reduce){
  .tijdlijn .baanitems>li:target{animation:none;box-shadow:0 0 0 3px var(--yellow)}
}
.tijdlijn .baanitems .naam{flex:1 1 auto;min-width:0;padding-right:var(--space-2)}
.tijdlijn .baanitems .naam strong{display:block;font-size:15px;font-weight:700;line-height:1.3}
.tijdlijn .baanitems .naam>span{color:var(--muted);font-size:13px}
/* Vaste breedtes: 122px voor het label en 156px voor de knop. Dat is de reden dat de rechterkant
   op één lijn staat; zonder die maten begint elk label ergens anders en wordt het rommelig. Een
   onderdeel zonder stand (een format dat alleen zijn bestand geeft) houdt de ruimte leeg, zodat
   de knoppen alsnog uitgelijnd blijven. */
.tijdlijn .baanitems .stand{flex:0 0 122px;display:inline-flex;align-items:center;
  border-radius:99px;padding:4px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.tijdlijn .baanitems .stand.leeg{background:none;padding:0}
.tijdlijn .baanitems .stand.done{background:var(--kaart-af-vlak);color:var(--kaart-af)}
.tijdlijn .baanitems .stand.warning{background:var(--kaart-actie-vlak);color:var(--paper)}
.tijdlijn .baanitems .stand.todo{background:var(--kaart-open-vlak);color:var(--kaart-open)}
.tijdlijn .baanitems .button.vastebreedte{flex:0 0 156px;justify-content:center}

/* De voetregel: een dun lijntje, de zin links en de tekstlink rechts. Geen kader en geen knop. */
.modulescherm .modulevoet{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--line)}
.modulescherm .modulevoet .zin{color:var(--muted);font-size:14.5px}
.modulescherm .modulevoet .zin b{color:var(--ink)}
.modulescherm .voetlink{display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--wine);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.modulescherm .voetlink .icon{width:16px;height:16px}
.modulescherm .voetlink:hover{text-decoration:underline}

@media (max-width:640px){
  /* Op 390px past een knop van 156px naast een label van 122px niet meer in één regel; de knop
     gaat dan over de volle breedte eronder en het label houdt zijn eigen maat. */
  .tijdlijn .baanitems>li{flex-wrap:wrap}
  .tijdlijn .baanitems .stand{flex:0 0 auto}
  .tijdlijn .baanitems .button.vastebreedte{flex:1 1 100%}
  .modulescherm .modulevoet{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .modulescherm .kopbinnen h1{font-size:21px}
}

/* S6-622 (werklijst v4.55 punt 4) — Scherm B, de voetregel op 320 px.

   Het blok hierboven (blok 6b, RV-S6-108) zet de zin en de link onder 640 px onder elkaar. Op 390
   past de link daarmee; op 320 niet. `.modulescherm .voetlink` draagt `white-space:nowrap`, en
   "Naar module <nn> <titel> →" is met de langste modulenaam ("Van overleg naar stuurmoment")
   breder dan het venster: gemeten 48 px zijwaarts schuiven. Uit de C3-meting van v4.54 was dit het
   enige scherm van de 123 dat nog schoof.

   Zelfde behandeling als op 390: de regel mag afbreken. `align-items:flex-start` houdt het pijltje
   op de hoogte van de eerste regel in plaats van gecentreerd naast twee regels. Alleen het
   modulescherm — `.voetlink` bestaat nergens anders in app.css, dus er is geen gedeelde bron
   verbreed (S6-603). */
@media (max-width:360px){
  .modulescherm .voetlink{white-space:normal;align-items:flex-start}
}


/* Virtuele coach — de uitleg boven de gesprekken (OP-041 punt 2, S6-1158).
   Overgenomen uit het voorbeeld dat Simone op 10-10-2026 goedkeurde, met de tokens van het
   platform in plaats van losse kleuren. Op een telefoon staan de drie blokken onder elkaar en
   zakt de knop van de demobalk onder de zin. */
.vc-demo{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px var(--space-5)}
.vc-demo p{margin:0;flex:1;color:var(--text);font-size:14.5px}
.vc-demo strong{color:var(--ink)}
.vc-mic{margin:8px 0 0;color:var(--muted);font-size:13px}
.vc-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.vc-stap{background:var(--kaart);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:var(--space-4) var(--space-5)}
.vc-stap h3{margin:0 0 6px;font-family:var(--font-head);font-size:18px;color:var(--ink);display:flex;gap:10px;align-items:baseline}
.vc-stap h3 span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sand);color:var(--accent);font-size:14px;flex:none}
.vc-stap p{margin:0;color:var(--text);font-size:14.5px;line-height:1.5}
@media (max-width:760px){
  .vc-stappen{grid-template-columns:1fr}
  .vc-demo{flex-direction:column;align-items:flex-start}
}


.mt-0{margin-top:0}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}
.mt-6{margin-top:var(--space-6)}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)}
.mb-5{margin-bottom:var(--space-5)}
.mb-6{margin-bottom:var(--space-6)}
.mt-1{margin-top:var(--space-1)}
.mt-7{margin-top:var(--space-7)}
.mb-1{margin-bottom:var(--space-1)}
.m-0{margin:0}