/* Inter variabel, alleen de Latijnse tekens, onder de SIL Open Font License 1.1, als bestand van het
   eigen adres. Er komt niets van een ander adres binnen, dus de inhoudsregel blijft ongewijzigd. */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/inter-latijns-3100e775e861.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;
}

:root{
  color-scheme:light;

  /* Kleur — licht. Vlakken worden donkerder naarmate iets dichterbij staat. */
  --vlak:#ffffff; --vlak-zacht:#f9f9fb; --vlak-diep:#f0f0f3; --vlak-sluier:rgba(255,255,255,.78);
  --ink:#1c2024; --ink-zacht:#60646c;
  --lijn:#d9d9e0; --lijn-hard:#80838d;
  --merk:#18705b; --merk-sterk:#18705b; --merk-vlak:#e6f7ed; --op-merk:#ffffff;
  --alarm:#ce2c31; --alarm-vlak:#feebec; --alarm-rand:#e5484d;
  --let-op:#4f3422; --let-op-vlak:#fff7c2; --let-op-rand:#ab6400;

  /* Typografie — negen stappen, van machineregel tot paginakop. */
  --letter:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t1:.6875rem; --t2:.75rem; --t3:.8125rem; --t4:.875rem; --t5:1rem;
  --t6:1.125rem; --t7:1.25rem; --t8:1.5rem; --t9:1.875rem;

  /* Afstand — elf stappen vanaf 2 pixels, zodat afstand een ritme wordt en geen smaak. */
  --s1:.125rem; --s2:.25rem; --s3:.375rem; --s4:.5rem; --s5:.75rem; --s6:1rem;
  --s7:1.25rem; --s8:1.5rem; --s9:2rem; --s10:2.5rem; --s11:3.5rem;

  /* Straal, schaduw en beweging — drie, twee en twee. Meer maakt het niet rustiger. */
  --straal-klein:.25rem; --straal:.5rem; --straal-groot:.75rem;
  --schaduw:0 1px 2px rgba(15,32,50,.06),0 6px 18px -12px rgba(15,32,50,.35);
  --schaduw-diep:0 12px 40px -18px rgba(15,32,50,.45);
  --vlot:120ms cubic-bezier(.2,.7,.3,1); --rustig:180ms cubic-bezier(.2,.7,.3,1);

  /* Maatvoering. De kop is zo hoog dat een sprong naar een kop eronder landt en niet erachter. */
  --breedte:60rem; --breedte-kop:74rem; --kopruimte:7rem;
}
@media (prefers-color-scheme:dark){:root:not([data-thema="licht"]){
  color-scheme:dark;
  --vlak:#111113; --vlak-zacht:#18191b; --vlak-diep:#212225; --vlak-sluier:rgba(17,17,19,.72);
  --ink:#edeef0; --ink-zacht:#b0b4ba;
  --lijn:#363a3f; --lijn-hard:#777b84;
  --merk:#1fd8a4; --merk-sterk:#27b08b; --merk-vlak:#0f2e22; --op-merk:#111113;
  --alarm:#ff9592; --alarm-vlak:#3b1219; --alarm-rand:#e5484d;
  --let-op:#ffca16; --let-op-vlak:#302008; --let-op-rand:#ffc53d;
  --schaduw:0 1px 2px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.85);
  --schaduw-diep:0 16px 48px -20px rgba(0,0,0,.9);
}}
html[data-thema="donker"]{
  color-scheme:dark;
  --vlak:#111113; --vlak-zacht:#18191b; --vlak-diep:#212225; --vlak-sluier:rgba(17,17,19,.72);
  --ink:#edeef0; --ink-zacht:#b0b4ba;
  --lijn:#363a3f; --lijn-hard:#777b84;
  --merk:#1fd8a4; --merk-sterk:#27b08b; --merk-vlak:#0f2e22; --op-merk:#111113;
  --alarm:#ff9592; --alarm-vlak:#3b1219; --alarm-rand:#e5484d;
  --let-op:#ffca16; --let-op-vlak:#302008; --let-op-rand:#ffc53d;
  --schaduw:0 1px 2px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.85);
  --schaduw-diep:0 16px 48px -20px rgba(0,0,0,.9);
}
html[data-thema="licht"]{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--kopruimte)}
/* Beweging is een toevoeging, nooit een drager. Wie haar uitzet, mist niets. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{
  font:var(--t5)/1.55 var(--letter);
  margin:0;color:var(--ink);background:var(--vlak);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto}
/* Cijfers in tabelstand horen in een kolom, niet in een zin: daar gaan ze los staan. */
td,th,.getal,.teller strong,time,.bedrag{font-variant-numeric:tabular-nums}

/* --- De vaste kop ------------------------------------------------------------------------- */
.overslaan{position:absolute;left:-999rem;top:0;background:var(--merk);color:var(--op-merk);padding:var(--s4) var(--s6);border-radius:0 0 var(--straal) 0;z-index:9;text-decoration:none;font-weight:600}
.overslaan:focus{left:0}
header{position:sticky;top:0;z-index:5;background:var(--vlak-sluier);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--lijn)}
header>div{max-width:var(--breedte-kop);margin:auto;padding:var(--s3) var(--s7);display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
header strong{display:flex;align-items:center;gap:var(--s4);color:var(--merk);font-size:var(--t4);font-weight:600;letter-spacing:.01em}
header strong::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:var(--straal-klein);background:var(--merk);box-shadow:0 0 0 .22rem var(--merk-vlak)}
nav{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap;flex:1 1 auto;padding:0}
nav a,.link-button,.knop-stil{
  display:inline-block;border:1px solid transparent;border-radius:var(--straal-klein);background:transparent;color:var(--ink-zacht);
  padding:var(--s3) var(--s4);margin:0;min-height:0;text-decoration:none;font:inherit;font-size:var(--t4);font-weight:400;cursor:pointer;
  transition:background var(--vlot),color var(--vlot),border-color var(--vlot);
}
nav a:hover,.link-button:hover,.knop-stil:hover{background:var(--merk-vlak);color:var(--merk);border-color:var(--lijn)}
nav a[aria-current="page"]{background:var(--merk-vlak);color:var(--merk);font-weight:600}
nav form{margin:0 0 0 auto;display:flex;gap:var(--s1)}
:focus-visible{outline:2px solid var(--merk);outline-offset:2px;border-radius:var(--straal-klein)}

/* --- De pagina ---------------------------------------------------------------------------- */
main{max-width:var(--breedte);margin:auto;padding:var(--s9) var(--s7) var(--s11)}
h1{font-size:var(--t9);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s5);font-weight:650}
h2{font-size:var(--t7);line-height:1.25;letter-spacing:-.01em;font-weight:620;margin:var(--s10) 0 var(--s4);padding:0;border:0}
h2:first-of-type{margin-top:var(--s8)}
h3{font-size:var(--t5);line-height:1.3;font-weight:620;margin:var(--s7) 0 var(--s3)}
p{margin:var(--s4) 0}
.intro{font-size:var(--t6);line-height:1.5;color:var(--ink-zacht);max-width:46rem;margin-bottom:var(--s7)}
.muted{color:var(--ink-zacht);font-size:var(--t4)}
strong{font-weight:620}
a{color:var(--merk);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

/* Een kaart draagt een blok dat op zichzelf staat; een lijstregel draagt een regel in een reeks.
   Ze kregen tot nu toe dezelfde rand, dezelfde vulling en dezelfde schaduw, en daardoor viel er
   niets meer op. De kaart houdt de rand, de lijstregel krijgt alleen een sierlijn eronder. */
article{padding:var(--s6) var(--s7);margin:var(--s5) 0;background:var(--vlak-zacht);border:1px solid var(--lijn);border-radius:var(--straal-groot);box-shadow:var(--schaduw)}
ul{list-style:none;padding:0;margin:var(--s4) 0}
ul>li{padding:var(--s5) var(--s3);margin:0;border-bottom:1px solid var(--lijn);transition:background var(--vlot)}
ul>li:last-child{border-bottom:0}
ul>li:hover{background:var(--vlak-zacht)}

/* Alarm en let op dragen een woord, en de kleur staat ernaast. Nooit andersom. */
.fout{background:var(--alarm-vlak);border-color:var(--alarm-rand);color:var(--alarm);border-left:3px solid var(--alarm-rand);border-radius:var(--straal)}
article.fout{box-shadow:none}
ul>li.fout{padding-left:var(--s5);border-bottom:1px solid var(--lijn)}
.fout a{color:inherit}
/* In een tabel draagt de kleur niet de hele regel. De tint en de balk zeggen "let hier op", het
   woord in de kolom zegt wát er aan de hand is, en de tekst blijft gewoon leesbaar. */
tr.fout td{background:var(--alarm-vlak);color:var(--ink)}
tr.fout td:first-child{box-shadow:inset 3px 0 0 var(--alarm-rand);padding-left:var(--s5)}
tr.fout a{color:var(--alarm)}

/* --- Formulieren en knoppen ---------------------------------------------------------------- */
label{display:block;margin:var(--s5) 0;font-size:var(--t4);color:var(--ink-zacht)}
input,select,textarea{width:100%;max-width:100%;padding:var(--s4) var(--s5);margin-top:var(--s2);border:1px solid var(--lijn-hard);border-radius:var(--straal-klein);font:inherit;color:var(--ink);background:var(--vlak)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-zacht)}
input:focus,select:focus,textarea:focus{border-color:var(--merk);outline:2px solid var(--merk);outline-offset:1px}
textarea{min-height:5.5rem;resize:vertical}
button{padding:var(--s4) var(--s6);border:1px solid var(--merk);border-radius:var(--straal-klein);background:var(--merk);color:var(--op-merk);font:inherit;font-size:var(--t4);font-weight:600;margin:var(--s3) 0;cursor:pointer;min-height:2.25rem;transition:background var(--vlot),border-color var(--vlot)}
button:hover{background:var(--merk-sterk);border-color:var(--merk-sterk)}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.5;cursor:not-allowed}
details{margin:var(--s5) 0;border:1px solid var(--lijn);border-radius:var(--straal);padding:var(--s4) var(--s6);background:var(--vlak-zacht)}
details[open]{background:var(--vlak)}
summary{cursor:pointer;font-size:var(--t4);color:var(--ink-zacht);font-weight:600}
summary:hover{color:var(--ink)}

/* --- Tabellen ------------------------------------------------------------------------------- */
table{width:100%;max-width:100%;border-collapse:collapse;font-size:var(--t4);margin:var(--s5) 0}
th{text-align:left;font-size:var(--t2);text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--ink-zacht);padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--lijn-hard);white-space:nowrap}
td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--lijn);vertical-align:top;overflow-wrap:break-word}
tbody tr:last-child td{border-bottom:0}
tfoot td{border-top:2px solid var(--lijn-hard);border-bottom:0;font-weight:620;padding-top:var(--s4)}
.werkvoorraad tbody tr:hover td{background:var(--vlak-zacht)}
/* De laatste kolom van de werkvoorraad draagt de handeling. Die brak over drie regels, waardoor een
   rij drie keer zo hoog werd als de tekst erin. Hij blijft nu op één regel; past hij niet, dan
   schuift de tabel. */
.werkvoorraad td:last-child{white-space:nowrap}
/* Een sleutel-waardetabel leest als een lijst: de linkerkolom is smal en draagt de vraag. */
.velden th{text-transform:none;letter-spacing:0;font-size:var(--t4);color:var(--ink);white-space:normal}
.velden td:first-child,.velden th:first-child{width:12rem}

/* Zoeken en filteren in het scherm zelf. */
.zeef{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin:var(--s5) 0 var(--s2)}
.zeef input,.zeef select{margin:0;width:auto;flex:1 1 14rem}
.zeef .muted{white-space:nowrap}
[hidden]{display:none!important}

/* --- De assistent --------------------------------------------------------------------------- */
.assistent{border:1px solid var(--lijn);border-radius:var(--straal-groot);background:var(--vlak-zacht);padding:var(--s6) var(--s7);margin:var(--s7) 0;box-shadow:var(--schaduw)}
.assistent h2{margin-top:0;margin-bottom:var(--s4);border:0;padding:0;font-size:var(--t6)}
.assistent form{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:flex-end}
.assistent form label{flex:1 1 20rem;margin:var(--s3) 0}
.assistent .voorzetjes{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 0}
.assistent .voorzetjes button{background:var(--vlak);color:var(--merk);border-color:var(--lijn-hard);font-size:var(--t3);padding:var(--s3) var(--s4);margin:0;min-height:0}
.assistent .voorzetjes button:hover{background:var(--merk-vlak);border-color:var(--merk)}
.antwoord{margin:var(--s5) 0 0;padding:var(--s6) var(--s7);background:var(--vlak);border:1px solid var(--lijn);border-left:3px solid var(--merk);border-radius:var(--straal)}
.antwoord h3{margin:0 0 var(--s4);font-size:var(--t5)}
.antwoord ul{margin:var(--s3) 0}
.antwoord ul>li{background:transparent;border:0;border-radius:0;padding:var(--s1) 0 var(--s1) var(--s6);margin:0;position:relative}
.antwoord ul>li:hover{background:transparent}
.antwoord ul>li::before{content:"";position:absolute;left:0;top:.72rem;width:.32rem;height:.32rem;border-radius:50%;background:var(--merk)}
.antwoord .bronnen{margin-top:var(--s5);padding-top:var(--s4);border-top:1px dashed var(--lijn)}
.antwoord .onbekend{color:var(--let-op);font-weight:600}
.antwoord .vervolg{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.antwoord .vervolg a{font-size:var(--t4);padding:var(--s3) var(--s4);border:1px solid var(--lijn-hard);border-radius:var(--straal-klein);text-decoration:none;background:var(--vlak-zacht);color:var(--merk)}
.antwoord .vervolg a:hover{background:var(--merk-vlak);border-color:var(--merk)}
.bezig{color:var(--ink-zacht);font-size:var(--t4)}
.bezig::after{content:"";display:inline-block;width:.5rem;height:.5rem;margin-left:var(--s3);border-radius:50%;background:var(--merk);animation:pols 1s infinite}
@keyframes pols{0%,100%{opacity:.25}50%{opacity:1}}

/* --- Het opdrachtvenster --------------------------------------------------------------------- */
.paneel{position:fixed;inset:0;background:rgba(10,18,28,.5);display:flex;align-items:flex-start;justify-content:center;padding:8vh var(--s6) var(--s6);z-index:20}
.paneel>div{width:min(38rem,100%);background:var(--vlak);border:1px solid var(--lijn-hard);border-radius:var(--straal-groot);box-shadow:var(--schaduw-diep);overflow:hidden}
.paneel input{border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:var(--s6) var(--s7);font-size:var(--t6);margin:0}
.paneel input:focus{outline-offset:-2px}
.paneel ul{margin:0;max-height:min(24rem,55vh);overflow:auto}
.paneel li{border:0;border-radius:0;margin:0;background:transparent;padding:0}
.paneel li:hover{background:transparent}
.paneel a{display:block;padding:var(--s4) var(--s7);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--lijn)}
.paneel li[aria-selected="true"] a,.paneel a:hover{background:var(--merk-vlak);color:var(--merk)}
.paneel .soort{float:right;font-size:var(--t3);color:var(--ink-zacht)}

/* --- Componenten die erbij komen -------------------------------------------------------------
   Deze klassen draagt vandaag nog geen scherm. Ze staan er zodat de schermbouwers ze kunnen
   oppakken zonder opnieuw over vorm te hoeven beslissen. Per klasse staat erbij waar zij voor is
   en wanneer je haar juist niet gebruikt. --------------------------------------------------- */

/* Paginakop: de titel met de handeling ernaast. Niet gebruiken als er geen handeling is. */
.paginakop{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s5)}
.paginakop h1{margin:0}
.paginakop .rij{margin:0}

/* Blokkop: een sectiekop met een link ernaast, bijvoorbeeld "alles tonen". */
.blokkop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin:var(--s10) 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--lijn)}
.blokkop h2,.blokkop h3{margin:0;border:0;padding:0}

/* Tellers: de vier getallen boven aan een scherm. Hoogstens vier, en elk getal is aan te klikken
   naar de lijst eronder. Niet gebruiken voor een getal dat nergens heen leidt. */
.tellers{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s5);margin:var(--s5) 0 var(--s8)}
.teller{display:block;padding:var(--s5) var(--s6);background:var(--vlak-zacht);border:1px solid var(--lijn);border-radius:var(--straal-groot);text-decoration:none;color:var(--ink);transition:border-color var(--vlot),background var(--vlot)}
a.teller:hover{border-color:var(--merk);background:var(--merk-vlak)}
.teller strong{display:block;font-size:var(--t9);line-height:1.1;letter-spacing:-.02em;font-weight:650}
.teller span{display:block;margin-top:var(--s2);font-size:var(--t4);color:var(--ink-zacht)}
.teller.alarm strong{color:var(--alarm)}
.teller.let-op strong{color:var(--let-op)}

/* Kenmerk: een kort woord met een kleur ernaast. Een kenmerk zonder woord bestaat niet. */
.kenmerk{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s4);border-radius:999px;border:1px solid var(--lijn-hard);background:var(--vlak);color:var(--ink-zacht);font-size:var(--t2);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.kenmerk::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.kenmerk.alarm{color:var(--alarm);background:var(--alarm-vlak);border-color:var(--alarm-rand)}
.kenmerk.let-op{color:var(--let-op);background:var(--let-op-vlak);border-color:var(--let-op-rand)}
.kenmerk.goed{color:var(--merk);background:var(--merk-vlak);border-color:var(--merk)}
.kenmerk.rust{border-color:var(--lijn)}

/* Melding: één regel die zegt wat er aan de hand is, boven de lijst waar het over gaat.
   Niet gebruiken voor iets wat de gebruiker zelf net heeft gedaan; dat hoort in de zin ernaast. */
.melding{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s5) var(--s6);margin:var(--s5) 0;border:1px solid var(--lijn);border-left:3px solid var(--lijn-hard);border-radius:var(--straal);background:var(--vlak-zacht);font-size:var(--t4)}
.melding.alarm{background:var(--alarm-vlak);border-color:var(--alarm-rand);border-left-color:var(--alarm-rand);color:var(--alarm)}
.melding.let-op{background:var(--let-op-vlak);border-color:var(--let-op-rand);border-left-color:var(--let-op-rand);color:var(--let-op)}
.melding.goed{background:var(--merk-vlak);border-color:var(--merk);border-left-color:var(--merk);color:var(--merk)}
.melding a{color:inherit}

/* Kaart: een blok dat op zichzelf staat. Niet gebruiken voor regels die je wilt vergelijken;
   daar hoort een tabel. De variant .kaart.stil is dezelfde kaart zonder schaduw, voor achtergrond. */
.kaart{padding:var(--s6) var(--s7);margin:var(--s5) 0;background:var(--vlak-zacht);border:1px solid var(--lijn);border-radius:var(--straal-groot);box-shadow:var(--schaduw)}
.kaart.stil{box-shadow:none;background:var(--vlak)}
.kaart>:first-child{margin-top:0}
.kaart>:last-child{margin-bottom:0}

/* Lijstregel: één regel in een reeks, met de kern links en de stand rechts. */
.lijstregel{display:flex;gap:var(--s6);align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.lijstregel .kern{flex:1 1 18rem;min-width:0}
.lijstregel .stand{flex:none;display:flex;gap:var(--s4);align-items:center}

/* Getalkolom: rechts uitgelijnd en in tabelstand, zodat de komma's onder elkaar vallen. */
.getal{text-align:right;white-space:nowrap}
th.getal{text-align:right;padding-right:0}
.totaal td,td.totaal{font-weight:650;font-size:var(--t5);border-top:2px solid var(--lijn-hard)}

/* Bronregel: waar een waarde vandaan komt. Kleiner dan de regel erboven, niet bleker. */
.bron{display:block;margin-top:var(--s2);font-size:var(--t2);color:var(--ink-zacht)}

/* Lege toestand: zegt of er niets is, of dat de zeef te scherp staat, of dat er iets stuk is.
   "Niets te tonen" is geen lege toestand. */
.leeg{padding:var(--s9) var(--s7);text-align:center;border:1px dashed var(--lijn-hard);border-radius:var(--straal-groot);background:var(--vlak-zacht);color:var(--ink-zacht)}
.leeg strong{display:block;margin-bottom:var(--s3);color:var(--ink);font-size:var(--t6)}

/* Knop op een link. Er staat nooit een tweede gevulde knop naast de eerste. */
.knop{display:inline-block;padding:var(--s4) var(--s6);border:1px solid var(--merk);border-radius:var(--straal-klein);background:var(--merk);color:var(--op-merk);font-size:var(--t4);font-weight:600;text-decoration:none;cursor:pointer}
.knop:hover{background:var(--merk-sterk);border-color:var(--merk-sterk);color:var(--op-merk)}
.knop.stil{background:var(--vlak);color:var(--merk);border-color:var(--lijn-hard)}
.knop.stil:hover{background:var(--merk-vlak);border-color:var(--merk)}

/* Rij en stapel: twee indelinghulpen, zodat afstand niet per scherm opnieuw wordt bedacht. */
.rij{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin:var(--s5) 0}
.stapel>*+*{margin-top:var(--s5)}

/* Meer tonen: "1 tot 10 van 130" met de knop ernaast. Er wordt niets verborgen; het staat alleen
   niet allemaal tegelijk open. */
.meer{display:flex;gap:var(--s5);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--lijn);font-size:var(--t4);color:var(--ink-zacht)}

/* De snelkoppelingen op het startscherm: even brede blokken die meegroeien met het venster. */
.start-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s5);margin:var(--s5) 0}
.start-actions a{display:block;padding:var(--s6) var(--s7);border:1px solid var(--lijn);border-radius:var(--straal-groot);text-decoration:none;color:var(--ink);background:var(--vlak-zacht);transition:border-color var(--vlot),background var(--vlot)}
.start-actions a:hover{border-color:var(--merk);background:var(--merk-vlak)}

/* Tabelvenster: een tabel die op een smal scherm zelf mag schuiven in plaats van de pagina.
   De vormlaag doet dit hieronder al voor elke tabel; deze klasse is er voor wie het ook op een
   breed scherm wil. */
.tabelvenster{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}

/* --- Smalle schermen -------------------------------------------------------------------------
   Succescriterium 1.4.10 vraagt dat een pagina op 320 pixels leesbaar blijft zonder horizontaal
   te schuiven. Een tabel met echte kolommen is de uitzondering die de norm zelf noemt, maar dan
   moet de tabel schuiven en niet de pagina. Daarom wordt elke tabel onder 52rem haar eigen
   schuifvenster, zonder dat er één regel HTML van een schermbouwer voor hoeft te wijken. --- */
@media(max-width:52rem){
  table{display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  th{white-space:normal}
}
@media(max-width:44rem){
  header{position:static}
  header>div{padding:var(--s4) var(--s5);display:block}
  header strong{font-size:var(--t3)}
  nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);padding-top:var(--s3)}
  nav a,.link-button,.knop-stil{padding:var(--s2) var(--s3);font-size:var(--t3)}
  nav form{margin:0;grid-column:1/-1}
  .link-button{width:100%;text-align:left}
  html{scroll-padding-top:var(--s6)}
  main{padding:var(--s7) var(--s5) var(--s10)}
  h1{font-size:var(--t8)}
  h2{font-size:var(--t6);margin-top:var(--s9)}
  .intro{font-size:var(--t5)}
  article,.kaart{padding:var(--s5);overflow-wrap:anywhere}
  ul>li{overflow-wrap:anywhere}
  .tellers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .teller{padding:var(--s4) var(--s5)}
  .teller strong{font-size:var(--t7)}
  .start-actions{grid-template-columns:1fr}
  .paneel{padding:var(--s6) var(--s4) var(--s4)}
}
@media print{header,nav,form,.assistent form,.paneel{display:none}body{background:#fff;color:#000}article,.kaart{box-shadow:none}}