/*
 * Componenten van het portaal op de tokens uit tokens.css. Dit is de enige CSS die een scherm mag
 * gebruiken: klassen met prefix k-, Nederlandse namen, blok__element--variant. Een scherm met
 * eigen CSS faalt de review (AGENTS.md, UX.md Ontwerpsysteem). De maten en het gedrag per
 * component staan in UX.md onder Ontwerprichtlijn (kaart #72); een nieuwe klasse krijgt eerst een
 * plek in die richtlijn.
 *
 * Inhoud: basis, kop en navigatie, pagina (kop, meta, kolommen, gegevens), paneel (kaart) met de
 * zones kop, inhoud en acties, tabel (ruim en dicht), status en statuslint, tijdlijn, tabbladen,
 * formulier en veld, knoppen, besluitpaneel, afmeldpaneel, bevestiging, upload, melding, lege
 * staat, foutstaat en geen-rechten-staat, galerij, responsief gedrag.
 *
 * Toegankelijkheid: focus altijd zichtbaar (ring, nooit alleen een randkleur), klikdoelen minstens
 * --hoogte-klik hoog, kleur nooit de enige drager (status heeft label en vorm), geen beweging
 * behalve een korte kleurovergang die bij prefers-reduced-motion uitgaat.
 *
 * Knoppen en statuslabels breken nooit af: white-space: nowrap, een minimale breedte, en de zone
 * eromheen wrapt of stapelt (zie Knoppen en Responsief). test/unit/portal/design.test.ts bewaakt
 * dat en de maximale tekstlengte in teksten.ts.
 */

/* ------------------------------------------------------------------------- */
/* Basis                                                                      */
/* ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-basis);
  font-size: var(--font-grootte-basis);
  line-height: var(--regelhoogte);
}
a { color: var(--kleur-primair); text-underline-offset: 3px; }
a:hover { color: var(--kleur-primair-actief); }
:focus-visible { outline: none; box-shadow: var(--focusring); border-radius: var(--hoek-klein); }
/* Hoogcontrast (forced-colors): de browser verwijdert box-shadow, dus daar een echte outline in de systeemkleur. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}
h1 { font-size: var(--font-grootte-kop1); margin: 0 0 var(--ruimte-2); line-height: var(--regelhoogte-kop1); letter-spacing: -0.01em; overflow-wrap: anywhere; }
h2 { font-size: var(--font-grootte-kop2); margin: 0 0 var(--ruimte-3); line-height: var(--regelhoogte-kop); overflow-wrap: anywhere; }
h3 { font-size: var(--font-grootte-basis); margin: 0 0 var(--ruimte-2); line-height: var(--regelhoogte-kop); }
p { margin: 0 0 var(--ruimte-3); max-width: var(--breedte-tekst); }
button, input, select, textarea { font: inherit; color: inherit; }
time { font-variant-numeric: var(--cijfers); }
b, strong { font-weight: var(--gewicht-vet); }

/* Schermlezer-only */
.k-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Naar de inhoud: zichtbaar zodra hij focus krijgt */
.k-naar-inhoud {
  position: absolute; left: var(--ruimte-2); top: -4rem;
  background: var(--kleur-vlak); color: var(--kleur-primair);
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek); z-index: 10;
}
.k-naar-inhoud:focus { top: var(--ruimte-2); }

/* ------------------------------------------------------------------------- */
/* Kop en navigatie: merk en kantoor links, medewerker en uitloggen rechts, de hoofdnavigatie   */
/* op een eigen regel eronder (scrolt horizontaal op een smal scherm, breekt nooit af).       */
/* ------------------------------------------------------------------------- */
.k-kop { background: var(--kleur-vlak); border-bottom: 1px solid var(--kleur-rand); }
.k-kop__binnen {
  max-width: var(--breedte-inhoud); margin: 0 auto; padding: var(--ruimte-3) var(--ruimte-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-6);
}
.k-kop__binnen > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ruimte-1) 0; min-height: var(--hoogte-klik-klein); }
.k-kop__merk { font-weight: var(--gewicht-vet); color: var(--kleur-tekst); text-decoration: none; font-size: var(--font-grootte-kop3); letter-spacing: var(--letterafstand-kop); }
.k-kop__merk:hover { color: var(--kleur-primair); }
.k-kop__kantoor { color: var(--kleur-tekst-zacht); margin-left: var(--ruimte-3); padding-left: var(--ruimte-3); border-left: 1px solid var(--kleur-rand); font-size: var(--font-grootte-klein); }
.k-kop__gebruiker { display: flex; align-items: center; gap: var(--ruimte-3); color: var(--kleur-tekst-zacht); font-size: var(--font-grootte-klein); }
.k-kop__gebruiker form { margin: 0; }

/* Hoofdnavigatie: lijst van links; de actieve link heeft aria-current="page" én een streep */
/* min-width: 0: zonder die regel is het flex-item minstens zo breed als alle links naast elkaar en scrolt de
   pagina op 390 px horizontaal in plaats van de lijst */
.k-navigatie { flex-basis: 100%; order: 3; min-width: 0; margin: 0 calc(-1 * var(--ruimte-4)) calc(-1 * var(--ruimte-3)); }
.k-navigatie__lijst { list-style: none; margin: 0; padding: 0 var(--ruimte-4); display: flex; gap: var(--ruimte-2); overflow-x: auto; }
.k-navigatie__link {
  display: inline-flex; align-items: center; min-height: var(--hoogte-klik); padding: var(--ruimte-1) var(--ruimte-3);
  color: var(--kleur-tekst-zacht); text-decoration: none; font-weight: var(--gewicht-vet); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.k-navigatie__link:hover { color: var(--kleur-tekst); border-bottom-color: var(--kleur-rand); }
.k-navigatie__link[aria-current="page"] { color: var(--kleur-primair); border-bottom-color: var(--kleur-primair); }
.k-navigatie__link:focus-visible { border-radius: var(--hoek-klein); }

/* ------------------------------------------------------------------------- */
/* Pagina: titelzone (terug-link, titel met status, acties rechts), metaregel, inleiding,     */
/* daarna de secties met --ruimte-sectie ertussen.                                            */
/* ------------------------------------------------------------------------- */
.k-pagina { max-width: var(--breedte-inhoud); margin: 0 auto; padding: var(--ruimte-8) var(--ruimte-4) var(--ruimte-12); }
.k-pagina--smal { max-width: var(--breedte-smal); }
.k-pagina:focus { outline: none; box-shadow: none; }
.k-pagina__kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-3) var(--ruimte-6); margin-bottom: var(--ruimte-3); }
.k-pagina__kop h1 { margin-bottom: 0; }
.k-pagina__titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); min-width: 0; }
/* De naam van het scherm: een h1 op de pagina, een h2 als het scherm als voorbeeld in de galerij staat; zelfde maat */
.k-pagina__naam { font-size: var(--font-grootte-kop1); line-height: var(--regelhoogte-kop1); letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
.k-pagina__terug { flex-basis: 100%; font-size: var(--font-grootte-klein); }
.k-pagina__terug::before { content: "\2190\00A0"; }
.k-pagina__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); }
.k-pagina__inleiding { color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-6); }
/* Metaregel: sleutel-waardeparen op één regel, gescheiden door witruimte; wrapt per paar */
.k-pagina__meta { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-6); margin: 0 0 var(--ruimte-6); font-size: var(--font-grootte-klein); color: var(--kleur-tekst-zacht); }
.k-pagina__meta > div { display: flex; gap: var(--ruimte-1); min-width: 0; }
.k-pagina__meta dt::after { content: ":"; }
.k-pagina__meta dd { margin: 0; color: var(--kleur-tekst); font-variant-numeric: var(--cijfers); overflow-wrap: anywhere; }

/* Twee kolommen (werk links, context rechts), onder 64rem één kolom */
.k-kolommen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--ruimte-6); align-items: start; }

/* Gegevenslijst: label en waarde naast elkaar, lijn per rij, waarde met tabulaire cijfers */
.k-gegevens { margin: 0; display: grid; grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 1.4fr); gap: 0 var(--ruimte-4); font-size: var(--font-grootte-klein); line-height: var(--regelhoogte-dicht); }
.k-gegevens > dt, .k-gegevens > dd { padding: var(--ruimte-2) 0; border-top: 1px solid var(--kleur-rand-zacht); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.k-gegevens > dt { color: var(--kleur-tekst-zacht); }
.k-gegevens > dd { font-variant-numeric: var(--cijfers); }
.k-gegevens > dt:first-of-type, .k-gegevens > dt:first-of-type + dd { border-top: 0; }

/* ------------------------------------------------------------------------- */
/* Paneel (kaart): drie vaste zones. Kop (titel links, telling of status rechts, op één       */
/* basislijn), inhoud, acties (knoppen onder een lijn). Padding --ruimte-paneel (24 px, op een  */
/* smal scherm 16 px). Eén accentstreep op het paneel dat om een handeling vraagt.            */
/* ------------------------------------------------------------------------- */
.k-kaart {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--hoek-groot);
  padding: var(--ruimte-paneel); margin-bottom: var(--ruimte-6); box-shadow: var(--schaduw-1);
}
.k-kaart > :last-child { margin-bottom: 0; }
.k-kaart__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-4); margin-bottom: var(--ruimte-4); }
.k-kaart__kop h2 { margin-bottom: 0; }
.k-kaart__telling { color: var(--kleur-tekst-zacht); font-size: var(--font-grootte-klein); font-variant-numeric: var(--cijfers); white-space: nowrap; }
.k-kaart__voet { margin: var(--ruimte-4) 0 0; color: var(--kleur-tekst-zacht); font-size: var(--font-grootte-klein); }
.k-kaart__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-5); padding-top: var(--ruimte-4); border-top: 1px solid var(--kleur-rand-zacht); }
/* De kaart die om een handeling vraagt, krijgt als enige een accentstreep: wat gekleurd is, is van jou */
.k-kaart--actie { border-left: 4px solid var(--kleur-primair); }
.k-kaart--mislukt { border-left: 4px solid var(--kleur-status-mislukt-bol); }

/* ------------------------------------------------------------------------- */
/* Tabel. Ruim (standaard): rij 44 px, cel 12 × 16 px, tekst klein. Dicht (k-tabel--dicht):    */
/* rij 36 px, cel 8 × 12 px, tekst mini; voor lijsten van stappen, gebeurtenissen en           */
/* referenties. Koprij gedempt in mini, rijlijnen zacht, rijhover, geen ellips (een afgekapte  */
/* naam is erger dan een hogere rij). De eerste en laatste cel dragen de paneelpadding zodat   */
/* de tekst op één lijn staat met de kop van de kaart en de rijhover tot de rand loopt.        */
/* Vaste kolomsoorten: getal (rechts, tabulair), tijd (nowrap, gedempt), status (smal, nowrap), */
/* acties (rechts, smal, nowrap), nummer (volgnummer, gedempt).                                */
/* ------------------------------------------------------------------------- */
/* position: relative: absoluut geplaatste inhoud (.k-verborgen in een sorteerbare kop) valt binnen de
   scrollhouder en maakt de pagina niet breder */
.k-tabel-houder { overflow-x: auto; position: relative; margin: 0 calc(-1 * var(--ruimte-paneel)); }
.k-tabel { width: 100%; border-collapse: collapse; font-size: var(--font-grootte-klein); line-height: var(--regelhoogte-dicht); }
.k-tabel caption { text-align: left; }
.k-tabel th, .k-tabel td {
  text-align: left; padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--kleur-rand-zacht);
  vertical-align: top; overflow-wrap: break-word; height: var(--hoogte-rij);
}
.k-tabel th:first-child, .k-tabel td:first-child { padding-left: var(--ruimte-paneel); }
.k-tabel th:last-child, .k-tabel td:last-child { padding-right: var(--ruimte-paneel); }
.k-tabel th { font-weight: var(--gewicht-vet); color: var(--kleur-tekst-zacht); white-space: nowrap; letter-spacing: var(--letterafstand-kop); font-size: var(--font-grootte-mini); }
.k-tabel thead th { border-bottom: 1px solid var(--kleur-rand); height: auto; padding-top: var(--ruimte-2); padding-bottom: var(--ruimte-2); vertical-align: bottom; }
.k-tabel tbody tr:last-child td { border-bottom: none; }
.k-tabel tbody tr:hover { background: var(--kleur-achtergrond); }
/* De dichte tabel krimpt niet onder 36rem: smaller breken de stapnamen per letter; op 390 px scrolt hij
   binnen de kaart (.k-tabel-houder) */
.k-tabel--dicht { font-size: var(--font-grootte-mini); min-width: 36rem; }
.k-tabel--dicht th, .k-tabel--dicht td { padding: var(--ruimte-2) var(--ruimte-3); height: var(--hoogte-rij-dicht); }
/* Pil en kleine knop in een dichte rij: 20 en 28 px hoog, zodat de rij 36 px blijft */
.k-tabel--dicht .k-status { font-size: var(--font-grootte-mini); min-height: 1.25rem; }
.k-tabel--dicht .k-knop--klein { min-height: 1.75rem; padding-top: 0; padding-bottom: 0; }
.k-tabel__cel--getal { text-align: right; font-variant-numeric: var(--cijfers); white-space: nowrap; }
.k-tabel__cel--nummer { text-align: right; font-variant-numeric: var(--cijfers); white-space: nowrap; width: 1%; color: var(--kleur-tekst-zacht); }
.k-tabel__cel--tijd { white-space: nowrap; font-variant-numeric: var(--cijfers); color: var(--kleur-tekst-zacht); }
.k-tabel__cel--status { white-space: nowrap; width: 1%; }
.k-tabel__cel--acties { white-space: nowrap; width: 1%; text-align: right; }
/* De cel met een pil (24 px) of een kleine knop (36 px) houdt de rij op 44 px: minder verticale padding dan een tekstcel */
td.k-tabel__cel--status { padding-top: calc(var(--ruimte-3) - 2px); padding-bottom: calc(var(--ruimte-3) - 2px); }
td.k-tabel__cel--acties { padding-top: var(--ruimte-1); padding-bottom: var(--ruimte-1); }
.k-tabel--dicht td.k-tabel__cel--status { padding-top: var(--ruimte-2); padding-bottom: var(--ruimte-2); }
.k-tabel__rijlink { font-weight: var(--gewicht-vet); }
/* Sortering gebeurt server-side: de kop is een link naar dezelfde pagina met ?sorteer=; de
   richting staat in aria-sort op de th en als pijl erachter (vorm naast kleur) */
.k-tabel__sorteer { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--ruimte-1); }
.k-tabel__sorteer:hover { color: var(--kleur-primair); text-decoration: underline; }
.k-tabel__sorteer::after { content: "\2195"; color: var(--kleur-rand-sterk); }
th[aria-sort="ascending"] .k-tabel__sorteer::after { content: "\2191"; color: var(--kleur-primair); }
th[aria-sort="descending"] .k-tabel__sorteer::after { content: "\2193"; color: var(--kleur-primair); }
th[aria-sort] .k-tabel__sorteer { color: var(--kleur-tekst); }
.k-tabel__leeg { color: var(--kleur-tekst-zacht); padding: var(--ruimte-4) var(--ruimte-3); }

/* ------------------------------------------------------------------------- */
/* Status (pil, 24 px hoog, nooit afbrekend) en statuslint. De bol draagt een vorm per status: */
/* bol wacht, driehoek loopt, kruis mislukt, vinkje voltooid, open bol neutraal, streep geen    */
/* rechten. Het label (hoogstens 16 tekens) draagt de betekenis.                               */
/* ------------------------------------------------------------------------- */
.k-status {
  display: inline-flex; align-items: center; gap: var(--ruimte-2); min-height: var(--hoogte-status); padding: 0 var(--ruimte-3) 0 var(--ruimte-2);
  border-radius: var(--hoek-rond); border: 1px solid var(--kleur-status-neutraal-rand);
  background: var(--kleur-status-neutraal-vlak); color: var(--kleur-status-neutraal-tekst);
  font-size: var(--font-grootte-klein); font-weight: var(--gewicht-vet); line-height: 1; white-space: nowrap; vertical-align: middle; max-width: 100%;
}
.k-status__bol { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; font-size: 0.7rem; line-height: 1; color: var(--kleur-op-donker); background: var(--kleur-status-neutraal-bol); flex: none; }
.k-status__bol::before { content: ""; }
.k-status--wacht { background: var(--kleur-status-wacht-vlak); border-color: var(--kleur-status-wacht-rand); color: var(--kleur-status-wacht-tekst); }
.k-status--wacht .k-status__bol { background: var(--kleur-status-wacht-bol); }
.k-status--wacht .k-status__bol::before { content: "\2022"; }
.k-status--loopt { background: var(--kleur-status-loopt-vlak); border-color: var(--kleur-status-loopt-rand); color: var(--kleur-status-loopt-tekst); }
.k-status--loopt .k-status__bol { background: var(--kleur-status-loopt-bol); }
.k-status--loopt .k-status__bol::before { content: "\25B8"; }
.k-status--mislukt { background: var(--kleur-status-mislukt-vlak); border-color: var(--kleur-status-mislukt-rand); color: var(--kleur-status-mislukt-tekst); }
.k-status--mislukt .k-status__bol { background: var(--kleur-status-mislukt-bol); }
.k-status--mislukt .k-status__bol::before { content: "\00D7"; font-size: 0.85rem; }
.k-status--voltooid { background: var(--kleur-status-voltooid-vlak); border-color: var(--kleur-status-voltooid-rand); color: var(--kleur-status-voltooid-tekst); }
.k-status--voltooid .k-status__bol { background: var(--kleur-status-voltooid-bol); }
.k-status--voltooid .k-status__bol::before { content: "\2713"; }
.k-status--neutraal .k-status__bol { background: transparent; border: 2px solid var(--kleur-status-neutraal-bol); }
.k-status--geen-rechten { border-color: var(--kleur-status-geen-rechten-rand); border-style: dashed; }
.k-status--geen-rechten .k-status__bol { background: var(--kleur-status-geen-rechten-bol); }
.k-status--geen-rechten .k-status__bol::before { content: "\2013"; }

/* Statuslint: de stappen van een proces. Basis (tot 72rem): compacte rijen in een raster van
   één (smal) of twee (768 px) kolommen, nummer links, naam en statuspil rechts. Vanaf 72rem een
   strook: alle stappen op één rij met een lijn door de nummers, naam en status eronder; de
   status staat dan als tekst zonder pil, zodat hij bij tien stappen op 1280 px nooit afbreekt.
   In de strook breekt ook de naam nooit af: elke stap is minstens zo breed als zijn naam en de
   overgebleven ruimte wordt gelijk verdeeld; past de som niet, dan scrolt de strook binnen
   zichzelf (nooit de pagina).
   De huidige stap heeft aria-current="step" en een accentrand; voltooide stappen kleuren de lijn. */
.k-statuslint { list-style: none; margin: 0 0 var(--ruimte-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--ruimte-1) var(--ruimte-4); }
.k-statuslint__stap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ruimte-3); row-gap: var(--ruimte-1); align-items: center;
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek); border: 1px solid transparent; position: relative;
}
.k-statuslint__stap--huidig { border-color: var(--kleur-primair); background: var(--kleur-primair-vlak); }
.k-statuslint__nummer { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: var(--font-grootte-klein); font-weight: var(--gewicht-vet); font-variant-numeric: var(--cijfers); background: var(--kleur-vlak); color: var(--kleur-tekst-zacht); border: 2px solid var(--kleur-rand); grid-row: 1 / span 2; position: relative; z-index: 1; }
.k-statuslint__stap--voltooid .k-statuslint__nummer { background: var(--kleur-status-voltooid-bol); color: var(--kleur-op-donker); border-color: var(--kleur-status-voltooid-bol); }
.k-statuslint__stap--mislukt .k-statuslint__nummer { background: var(--kleur-status-mislukt-bol); color: var(--kleur-op-donker); border-color: var(--kleur-status-mislukt-bol); }
.k-statuslint__stap--wacht .k-statuslint__nummer { background: var(--kleur-status-wacht-vlak); color: var(--kleur-status-wacht-tekst); border-color: var(--kleur-status-wacht-bol); }
.k-statuslint__stap--loopt .k-statuslint__nummer { background: var(--kleur-status-loopt-vlak); color: var(--kleur-status-loopt-tekst); border-color: var(--kleur-status-loopt-bol); }
.k-statuslint__stap--neutraal .k-statuslint__nummer { border-style: dashed; }
.k-statuslint__stap--huidig .k-statuslint__nummer { border-color: var(--kleur-primair); color: var(--kleur-primair); background: var(--kleur-vlak); box-shadow: 0 0 0 3px var(--kleur-primair-vlak); }
.k-statuslint__naam { font-size: var(--font-grootte-klein); font-weight: var(--gewicht-vet); line-height: var(--regelhoogte-dicht); overflow-wrap: anywhere; grid-column: 2; }
.k-statuslint__status { grid-column: 2; min-width: 0; }

/* ------------------------------------------------------------------------- */
/* Tijdlijn: gebeurtenissen onder elkaar met een doorlopende lijn door de punten, tijd links in */
/* een vaste kolom (--breedte-tijd), wat en wie rechts, toelichting eronder. Nieuwste boven.   */
/* ------------------------------------------------------------------------- */
.k-tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.k-tijdlijn::before { content: ""; position: absolute; left: 0.4375rem; top: var(--ruimte-3); bottom: var(--ruimte-3); width: 2px; background: var(--kleur-rand-zacht); }
.k-tijdlijn__item { position: relative; display: grid; grid-template-columns: var(--breedte-tijd) minmax(0, 1fr); gap: var(--ruimte-1) var(--ruimte-4); padding: var(--ruimte-3) 0 var(--ruimte-3) var(--ruimte-6); font-size: var(--font-grootte-klein); line-height: var(--regelhoogte-dicht); }
.k-tijdlijn__item + .k-tijdlijn__item { border-top: 1px solid var(--kleur-rand-zacht); }
.k-tijdlijn__punt { position: absolute; left: 0; top: calc(var(--ruimte-3) + 0.125rem); width: 1rem; height: 1rem; border-radius: 50%; background: var(--kleur-vlak); border: 2px solid var(--kleur-status-neutraal-bol); box-shadow: 0 0 0 3px var(--kleur-vlak); }
.k-tijdlijn__item--voltooid .k-tijdlijn__punt { background: var(--kleur-status-voltooid-bol); border-color: var(--kleur-status-voltooid-bol); }
.k-tijdlijn__item--mislukt .k-tijdlijn__punt { background: var(--kleur-status-mislukt-bol); border-color: var(--kleur-status-mislukt-bol); }
.k-tijdlijn__item--wacht .k-tijdlijn__punt { background: var(--kleur-status-wacht-bol); border-color: var(--kleur-status-wacht-bol); }
.k-tijdlijn__item--besluit .k-tijdlijn__punt { background: var(--kleur-primair); border-color: var(--kleur-primair); }
.k-tijdlijn__tijd { color: var(--kleur-tekst-zacht); font-variant-numeric: var(--cijfers); white-space: nowrap; font-size: var(--font-grootte-mini); padding-top: 0.0625rem; }
.k-tijdlijn__wat { overflow-wrap: anywhere; }
.k-tijdlijn__wat b { font-weight: var(--gewicht-vet); }
.k-tijdlijn__item--mislukt .k-tijdlijn__wat b { color: var(--kleur-status-mislukt-tekst); }
.k-tijdlijn__wie { color: var(--kleur-tekst-zacht); }
.k-tijdlijn__wie::before { content: "\00B7 "; }
.k-tijdlijn__toelichting { grid-column: 2; margin: 0; color: var(--kleur-tekst-zacht); overflow-wrap: anywhere; max-width: var(--breedte-tekst); }

/* ------------------------------------------------------------------------- */
/* Tabbladen: server-side via de querystring; het actieve tabblad heeft aria-current="page".   */
/* Labels breken nooit af; de lijst scrolt horizontaal op een smal scherm.                     */
/* ------------------------------------------------------------------------- */
.k-tabbladen { border-bottom: 1px solid var(--kleur-rand); margin-bottom: var(--ruimte-6); }
.k-tabbladen__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ruimte-6); overflow-x: auto; }
.k-tabbladen__link {
  display: inline-flex; align-items: center; min-height: var(--hoogte-klik); padding: var(--ruimte-1) var(--ruimte-1); margin-bottom: -1px;
  color: var(--kleur-tekst-zacht); text-decoration: none; font-weight: var(--gewicht-vet); white-space: nowrap; border-bottom: 3px solid transparent;
}
.k-tabbladen__link:hover { color: var(--kleur-tekst); border-bottom-color: var(--kleur-rand); }
.k-tabbladen__link[aria-current="page"] { color: var(--kleur-primair); border-bottom-color: var(--kleur-primair); }
.k-tabbladen__link:focus-visible { border-radius: var(--hoek-klein); }
.k-tabbladen__telling { margin-left: var(--ruimte-1); font-weight: var(--gewicht-normaal); color: var(--kleur-tekst-zacht); font-variant-numeric: var(--cijfers); }

/* ------------------------------------------------------------------------- */
/* Formulier en veld: label boven, hint daaronder, fout tussen label en invoer en gekoppeld   */
/* met aria-describedby, verplicht als tekst bij het label. Velden hoogstens --breedte-tekst.  */
/* ------------------------------------------------------------------------- */
.k-formulier { display: grid; gap: var(--ruimte-5); }
.k-veld { display: grid; gap: var(--ruimte-1); max-width: var(--breedte-tekst); }
.k-veld__label { font-weight: var(--gewicht-vet); }
.k-veld__verplicht { font-weight: var(--gewicht-normaal); color: var(--kleur-tekst-zacht); font-size: var(--font-grootte-klein); margin-left: var(--ruimte-1); }
.k-veld__hulp { color: var(--kleur-tekst-zacht); font-size: var(--font-grootte-klein); margin: 0; line-height: var(--regelhoogte-dicht); }
.k-veld__invoer {
  font: inherit; color: var(--kleur-tekst); background: var(--kleur-vlak); width: 100%; min-height: var(--hoogte-klik);
  border: 1px solid var(--kleur-rand-sterk); border-radius: var(--hoek); padding: var(--ruimte-2) var(--ruimte-3); margin-top: var(--ruimte-1);
}
textarea.k-veld__invoer { min-height: 6rem; resize: vertical; }
.k-veld__invoer:focus-visible { box-shadow: var(--focusring); border-color: var(--kleur-focus); border-radius: var(--hoek); }
.k-veld--fout .k-veld__invoer { border-color: var(--kleur-fout-tekst); border-width: 2px; }
.k-veld__fout { color: var(--kleur-fout-tekst); font-size: var(--font-grootte-klein); font-weight: var(--gewicht-vet); margin: 0; line-height: var(--regelhoogte-dicht); }
.k-veld__fout::before { content: "\26A0\FE0E"; margin-right: var(--ruimte-1); }
.k-veldgroep { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--ruimte-2); }
.k-veldgroep__legenda { font-weight: var(--gewicht-vet); padding: 0; margin-bottom: var(--ruimte-1); }
.k-keuze { display: flex; align-items: flex-start; gap: var(--ruimte-2); min-height: var(--hoogte-klik); padding: var(--ruimte-2) var(--ruimte-3); border: 1px solid var(--kleur-rand); border-radius: var(--hoek); cursor: pointer; }
.k-keuze input { margin: 0.2rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--kleur-primair); flex: none; }
.k-keuze:has(input:checked) { border-color: var(--kleur-primair); background: var(--kleur-primair-vlak); }
.k-keuze__uitleg { display: block; color: var(--kleur-tekst-zacht); font-size: var(--font-grootte-klein); }

/* ------------------------------------------------------------------------- */
/* Knoppen: primair (één per scherm), secundair, gevaarlijk (altijd met bevestiging via een  */
/* tweede POST), link, klein. Minstens --hoogte-klik hoog en --breedte-knop-min breed; de      */
/* tekst breekt nooit af (nowrap, hoogstens 24 tekens): past hij niet naast zijn buren, dan    */
/* wrapt de actiezone en op een smal scherm stapelt zij.                                       */
/* ------------------------------------------------------------------------- */
.k-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-2); min-height: var(--hoogte-klik); min-width: var(--breedte-knop-min); max-width: 100%;
  font: inherit; font-weight: var(--gewicht-vet); line-height: var(--regelhoogte-dicht); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--kleur-primair); color: var(--kleur-op-primair);
  border: 1px solid var(--kleur-primair); border-radius: var(--hoek); padding: var(--ruimte-2) var(--ruimte-5);
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.k-knop:hover { background: var(--kleur-primair-actief); border-color: var(--kleur-primair-actief); color: var(--kleur-op-primair); }
.k-knop--secundair { background: var(--kleur-vlak); color: var(--kleur-primair); border-color: var(--kleur-rand-sterk); }
.k-knop--secundair:hover { background: var(--kleur-achtergrond); color: var(--kleur-primair-actief); border-color: var(--kleur-rand-sterk); }
.k-knop--gevaarlijk { background: var(--kleur-gevaar); border-color: var(--kleur-gevaar); color: var(--kleur-op-gevaar); }
.k-knop--gevaarlijk:hover { background: var(--kleur-gevaar-actief); border-color: var(--kleur-gevaar-actief); color: var(--kleur-op-gevaar); }
.k-knop--gevaarlijk-licht { background: var(--kleur-vlak); border-color: var(--kleur-gevaar); color: var(--kleur-gevaar); }
.k-knop--gevaarlijk-licht:hover { background: var(--kleur-fout-vlak); border-color: var(--kleur-gevaar-actief); color: var(--kleur-gevaar-actief); }
.k-knop--link { background: none; border-color: transparent; min-width: 0; padding-left: var(--ruimte-1); padding-right: var(--ruimte-1); color: var(--kleur-primair); font-weight: var(--gewicht-normaal); text-decoration: underline; text-underline-offset: 3px; }
.k-knop--link:hover { background: none; border-color: transparent; color: var(--kleur-primair-actief); }
.k-knop--klein { min-height: var(--hoogte-klik-klein); min-width: 0; padding: var(--ruimte-1) var(--ruimte-3); font-size: var(--font-grootte-klein); }
.k-knop--breed { width: 100%; }
.k-knop:disabled, .k-knop[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Actiezone: knoppen en links naast elkaar, primair eerst; wrapt als de ruimte op is */
.k-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-5); }
.k-acties--rechts { justify-content: flex-end; }

/* ------------------------------------------------------------------------- */
/* Besluitpaneel: één formulier met de zones kop (titel en status), inhoud (uitleg en          */
/* toelichting) en acties (drie knoppen van natuurlijke breedte onder een lijn; wrappen als de  */
/* kolom smal is, stapelen op een smal scherm; nooit afbreken).                                */
/* ------------------------------------------------------------------------- */
.k-besluitpaneel { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-left: 4px solid var(--kleur-primair); border-radius: var(--hoek-groot); padding: var(--ruimte-paneel); margin-bottom: var(--ruimte-6); box-shadow: var(--schaduw-1); }
.k-besluitpaneel__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-3); margin-bottom: var(--ruimte-3); }
.k-besluitpaneel__kop h2 { margin: 0; }
.k-besluitpaneel__uitleg { color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-5); }
.k-besluitpaneel__uitleg b { color: var(--kleur-tekst); }
.k-besluitpaneel__knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin-top: 0; padding-top: var(--ruimte-4); border-top: 1px solid var(--kleur-rand-zacht); }
.k-besluitpaneel .k-formulier > .k-veld__hulp:last-child { margin-top: calc(-1 * var(--ruimte-2)); }

/* Afmeldpaneel: toelichting, bewijsvelden en optioneel een bestand; één primaire knop */
.k-afmeldpaneel { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-left: 4px solid var(--kleur-status-wacht-bol); border-radius: var(--hoek-groot); padding: var(--ruimte-paneel); margin-bottom: var(--ruimte-6); box-shadow: var(--schaduw-1); }
.k-afmeldpaneel__kop { margin-bottom: var(--ruimte-3); }
.k-afmeldpaneel__kop h2 { margin: 0; }
.k-afmeldpaneel__uitleg { color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-5); }
.k-afmeldpaneel__uitleg b { color: var(--kleur-tekst); }
.k-afmeldpaneel__bewijs { border-top: 1px solid var(--kleur-rand-zacht); padding-top: var(--ruimte-5); display: grid; gap: var(--ruimte-4); }
.k-afmeldpaneel__bewijs h3 { margin: 0; }
.k-afmeldpaneel .k-acties { padding-top: var(--ruimte-4); border-top: 1px solid var(--kleur-rand-zacht); margin-top: 0; }

/* Bevestiging van een gevaarlijke handeling: de tweede POST. Zegt wat er gebeurt en dat het
   niet terug te draaien is; de bevestigknop is de enige gevaarlijke knop op het scherm. */
.k-bevestiging { border: 1px solid var(--kleur-fout-rand); border-left: 4px solid var(--kleur-gevaar); background: var(--kleur-vlak); border-radius: var(--hoek-groot); padding: var(--ruimte-paneel); margin-bottom: var(--ruimte-6); box-shadow: var(--schaduw-2); }
.k-bevestiging h2 { color: var(--kleur-gevaar); }
.k-bevestiging__gevolg { color: var(--kleur-tekst); }
.k-bevestiging .k-acties { padding-top: var(--ruimte-4); border-top: 1px solid var(--kleur-rand-zacht); }

/* Upload: gewoon bestandsveld, hint met toegestane soorten en maximum, fout bij het veld */
.k-upload { display: grid; gap: var(--ruimte-1); max-width: var(--breedte-tekst); }
.k-upload__invoer { font: inherit; width: 100%; min-height: var(--hoogte-klik); padding: var(--ruimte-2) var(--ruimte-3); margin-top: var(--ruimte-1); border: 1px dashed var(--kleur-rand-sterk); border-radius: var(--hoek); background: var(--kleur-vlak-2); color: var(--kleur-tekst); }
.k-upload__invoer:focus-visible { box-shadow: var(--focusring); border-color: var(--kleur-focus); border-style: solid; }
.k-upload--fout .k-upload__invoer { border-color: var(--kleur-fout-tekst); border-style: solid; border-width: 2px; }
.k-upload__bestand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); font-size: var(--font-grootte-klein); color: var(--kleur-tekst-zacht); }

/* ------------------------------------------------------------------------- */
/* Melding: succes, waarschuwing, fout, info. Teken vóór de titel, hooguit één handeling.    */
/* ------------------------------------------------------------------------- */
.k-melding { display: grid; gap: var(--ruimte-1); border: 1px solid var(--kleur-neutraal-rand); border-left-width: 4px; border-radius: var(--hoek); padding: var(--ruimte-3) var(--ruimte-4); margin-bottom: var(--ruimte-5); background: var(--kleur-neutraal-vlak); color: var(--kleur-neutraal-tekst); line-height: var(--regelhoogte-dicht); }
.k-melding__titel { font-weight: var(--gewicht-vet); }
.k-melding p { margin: 0; max-width: none; }
.k-melding--succes { color: var(--kleur-succes-tekst); background: var(--kleur-succes-vlak); border-color: var(--kleur-succes-rand); }
.k-melding--waarschuwing { color: var(--kleur-waarschuwing-tekst); background: var(--kleur-waarschuwing-vlak); border-color: var(--kleur-waarschuwing-rand); }
.k-melding--fout { color: var(--kleur-fout-tekst); background: var(--kleur-fout-vlak); border-color: var(--kleur-fout-rand); }
.k-melding--info { color: var(--kleur-info-tekst); background: var(--kleur-info-vlak); border-color: var(--kleur-info-rand); }
.k-melding__titel::before { margin-right: var(--ruimte-2); }
.k-melding--succes .k-melding__titel::before { content: "\2713"; }
.k-melding--waarschuwing .k-melding__titel::before, .k-melding--fout .k-melding__titel::before { content: "\26A0\FE0E"; }
.k-melding--info .k-melding__titel::before { content: "\2139\FE0E"; }
.k-melding .k-acties { margin-top: var(--ruimte-2); }
.k-melding a { color: inherit; }

/* ------------------------------------------------------------------------- */
/* Lege staat: tekst (wat hier normaal staat), teken (open ring) en, als dat kan, een actie   */
/* ------------------------------------------------------------------------- */
.k-leeg { color: var(--kleur-tekst-zacht); padding: var(--ruimte-3) 0; margin: 0; }
.k-leeg--groot { text-align: center; padding: var(--ruimte-10) var(--ruimte-4); }
.k-leeg__teken { display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto var(--ruimte-4); border: 2px dashed var(--kleur-rand-sterk); border-radius: 50%; }
.k-leeg__titel { font-weight: var(--gewicht-vet); color: var(--kleur-tekst); margin: 0 0 var(--ruimte-1); font-size: var(--font-grootte-kop3); }
.k-leeg__tekst { margin: 0 auto; max-width: 52ch; }
.k-leeg__actie { margin: var(--ruimte-4) 0 0; }

/* ------------------------------------------------------------------------- */
/* Foutstaat met herstelactie, en de geen-rechten-staat (zelfde bouw, neutrale kleur): teken, */
/* titel, wat er mis is, wat je nu kunt doen, één knop                                        */
/* ------------------------------------------------------------------------- */
.k-foutstaat {
  border: 1px solid var(--kleur-fout-rand); border-left: 4px solid var(--kleur-status-mislukt-bol); background: var(--kleur-fout-vlak); color: var(--kleur-fout-tekst);
  border-radius: var(--hoek-groot); padding: var(--ruimte-paneel); margin-bottom: var(--ruimte-6);
}
.k-foutstaat h2 { color: inherit; }
.k-foutstaat h2::before { content: "\26A0\FE0E"; margin-right: var(--ruimte-2); }
.k-foutstaat p { color: inherit; }
.k-foutstaat > :last-child { margin-bottom: 0; }
.k-foutstaat__actie { margin: var(--ruimte-4) 0 0; }
.k-foutstaat__actie .k-knop { background: var(--kleur-vlak); color: var(--kleur-primair); border-color: var(--kleur-rand-sterk); }
.k-foutstaat__actie .k-knop:hover { background: var(--kleur-achtergrond); color: var(--kleur-primair-actief); }
.k-foutstaat--geen-rechten { border-color: var(--kleur-status-geen-rechten-rand); border-left-color: var(--kleur-status-geen-rechten-bol); background: var(--kleur-neutraal-vlak); color: var(--kleur-neutraal-tekst); }
.k-foutstaat--geen-rechten h2 { color: var(--kleur-tekst); }
.k-foutstaat--geen-rechten h2::before { content: "\2013"; }

/* ------------------------------------------------------------------------- */
/* Galerij (/ontwerp, alleen development): inhoudsopgave, schermvoorbeeld in een kader, per     */
/* component de toestanden                                                                    */
/* ------------------------------------------------------------------------- */
.k-galerij__inhoud { columns: 2; column-gap: var(--ruimte-6); font-size: var(--font-grootte-klein); padding-left: var(--ruimte-5); margin: 0 0 var(--ruimte-6); }
.k-galerij__sectie { border-top: 1px solid var(--kleur-rand); padding-top: var(--ruimte-8); margin-top: var(--ruimte-8); }
.k-galerij__sectie > h2 { font-size: var(--font-grootte-kop1); }
.k-galerij__uitleg { color: var(--kleur-tekst-zacht); max-width: var(--breedte-tekst); }
.k-galerij__voorbeeld { margin: var(--ruimte-4) 0 var(--ruimte-8); }
.k-galerij__label { display: block; font-size: var(--font-grootte-mini); font-weight: var(--gewicht-vet); color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-2); letter-spacing: var(--letterafstand-kop); text-transform: uppercase; }
.k-galerij__scherm { border: 1px dashed var(--kleur-rand-sterk); border-radius: var(--hoek-groot); padding: var(--ruimte-6) var(--ruimte-4) var(--ruimte-2); margin: var(--ruimte-4) 0 var(--ruimte-6); }
.k-galerij__staal { display: inline-grid; gap: var(--ruimte-1); width: 9rem; margin: 0 var(--ruimte-2) var(--ruimte-2) 0; font-size: var(--font-grootte-klein); vertical-align: top; }
.k-galerij__kleur { height: 2.5rem; border-radius: var(--hoek); border: 1px solid var(--kleur-rand); }
.k-galerij__staal code { color: var(--kleur-tekst-zacht); font-size: 0.75rem; }
.k-galerij__kleur--achtergrond { background: var(--kleur-achtergrond); }
.k-galerij__kleur--vlak { background: var(--kleur-vlak); }
.k-galerij__kleur--vlak-2 { background: var(--kleur-vlak-2); }
.k-galerij__kleur--rand { background: var(--kleur-rand); }
.k-galerij__kleur--tekst { background: var(--kleur-tekst); }
.k-galerij__kleur--tekst-zacht { background: var(--kleur-tekst-zacht); }
.k-galerij__kleur--primair { background: var(--kleur-primair); }
.k-galerij__kleur--primair-vlak { background: var(--kleur-primair-vlak); }
.k-galerij__kleur--gevaar { background: var(--kleur-gevaar); }
.k-galerij__kleur--focus { background: var(--kleur-focus); }
.k-galerij__kleur--fout { background: var(--kleur-fout-vlak); border-color: var(--kleur-fout-rand); }
.k-galerij__kleur--succes { background: var(--kleur-succes-vlak); border-color: var(--kleur-succes-rand); }
.k-galerij__kleur--waarschuwing { background: var(--kleur-waarschuwing-vlak); border-color: var(--kleur-waarschuwing-rand); }
.k-galerij__kleur--info { background: var(--kleur-info-vlak); border-color: var(--kleur-info-rand); }
.k-galerij__kleur--neutraal { background: var(--kleur-neutraal-vlak); border-color: var(--kleur-neutraal-rand); }
.k-galerij__tekstmaat--mini { font-size: var(--font-grootte-mini); line-height: var(--regelhoogte-dicht); }
.k-galerij__tekstmaat--klein { font-size: var(--font-grootte-klein); line-height: var(--regelhoogte-dicht); }
.k-galerij__tekstmaat--basis { font-size: var(--font-grootte-basis); }
.k-galerij__tekstmaat--kop3 { font-size: var(--font-grootte-kop3); line-height: var(--regelhoogte-kop); }
.k-galerij__tekstmaat--kop2 { font-size: var(--font-grootte-kop2); line-height: var(--regelhoogte-kop); }
.k-galerij__tekstmaat--kop1 { font-size: var(--font-grootte-kop1); line-height: var(--regelhoogte-kop1); }
.k-galerij__ruimte { display: inline-block; background: var(--kleur-primair-vlak); border: 1px solid var(--kleur-info-rand); height: 1rem; vertical-align: middle; margin-right: var(--ruimte-2); }
.k-galerij__ruimte--1 { width: var(--ruimte-1); }
.k-galerij__ruimte--2 { width: var(--ruimte-2); }
.k-galerij__ruimte--3 { width: var(--ruimte-3); }
.k-galerij__ruimte--4 { width: var(--ruimte-4); }
.k-galerij__ruimte--5 { width: var(--ruimte-5); }
.k-galerij__ruimte--6 { width: var(--ruimte-6); }
.k-galerij__ruimte--8 { width: var(--ruimte-8); }
.k-galerij__ruimte--10 { width: var(--ruimte-10); }
.k-galerij__ruimte--12 { width: var(--ruimte-12); }
.k-galerij__focus { box-shadow: var(--focusring); }

/* ------------------------------------------------------------------------- */
/* Responsief. Drie maten uit de richtlijn: 390 px (smal, tot 48rem), 768 px (middel, tot     */
/* 72rem) en 1280 px (breed). Tokens voor titel en paneelpadding schakelen in tokens.css.     */
/* ------------------------------------------------------------------------- */

/* Breed (vanaf 72rem): statuslint als strook op één rij */
@media (min-width: 72rem) {
  .k-statuslint { display: flex; gap: 0; overflow-x: auto; }
  .k-statuslint__stap { flex: 1 0 auto; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; column-gap: 0; row-gap: var(--ruimte-1); padding: var(--ruimte-2) var(--ruimte-1); }
  .k-statuslint__stap::before, .k-statuslint__stap::after { content: ""; position: absolute; top: calc(var(--ruimte-2) + 0.875rem - 1px); height: 2px; background: var(--kleur-rand); }
  .k-statuslint__stap::before { left: 0; right: 50%; }
  .k-statuslint__stap::after { left: 50%; right: 0; }
  .k-statuslint__stap:first-child::before, .k-statuslint__stap:last-child::after { display: none; }
  .k-statuslint__stap--voltooid::before, .k-statuslint__stap--voltooid::after, .k-statuslint__stap--voltooid + .k-statuslint__stap::before { background: var(--kleur-status-voltooid-bol); }
  .k-statuslint__stap--huidig { background: none; border-color: transparent; }
  .k-statuslint__nummer { grid-row: auto; }
  .k-statuslint__naam, .k-statuslint__status { grid-column: 1; max-width: 100%; }
  .k-statuslint__naam { font-size: var(--font-grootte-mini); white-space: nowrap; }
  /* De status als tekst zonder pil: bij tien stappen is 1248 px gedeeld door tien te smal voor een pil met bol */
  .k-statuslint__status .k-status { border: 0; background: none; padding: 0; min-height: 0; font-size: var(--font-grootte-mini); gap: 0; }
  .k-statuslint__status .k-status__bol { display: none; }
}

/* Middel en smal (tot 64rem): één kolom in plaats van twee */
@media (max-width: 63.9375rem) {
  .k-kolommen { grid-template-columns: minmax(0, 1fr); }
}

/* Smal (tot 48rem, 390 px): lezen en goedkeuren werkt op een telefoon. Knoppen in een actiezone
   stapelen en vullen de breedte (links en kleine knoppen niet); tijdlijn en gegevens in één kolom;
   de statuslint één rij per stap; de inhoudsopgave van de galerij in één kolom. */
@media (max-width: 47.9375rem) {
  .k-statuslint { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-1); }
  .k-tijdlijn__item { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-1); }
  .k-tijdlijn__toelichting { grid-column: 1; }
  .k-gegevens { grid-template-columns: minmax(0, 1fr); }
  .k-gegevens > dd { border-top: 0; padding-top: 0; }
  .k-pagina__meta { gap: var(--ruimte-1) var(--ruimte-4); }
  .k-pagina__acties { flex-basis: 100%; }
  .k-pagina__acties > .k-knop:not(.k-knop--link):not(.k-knop--klein) { flex: 1 1 100%; }
  .k-acties > .k-knop:not(.k-knop--link):not(.k-knop--klein), .k-acties > form, .k-besluitpaneel__knoppen > .k-knop, .k-kaart__acties > .k-knop:not(.k-knop--link):not(.k-knop--klein) { flex: 1 1 100%; }
  .k-galerij__inhoud { columns: 1; }
  .k-galerij__scherm { padding-left: var(--ruimte-3); padding-right: var(--ruimte-3); }
  .k-kop__kantoor { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}