/* =============================================================================
   schoolagenda.digimak.nl

   RICHTING — Nederlands rastermodernisme.

   Het product is een rooster: tijdvakken, grenzen, en de vraag wie welk vak mag
   zien. Dat is hier ook de vormtaal geworden. Kolomlijnen lopen door de pagina
   zoals lijnen door een rooster, tijden en nummers staan in mono met tabulaire
   cijfers zodat ze onder elkaar uitlijnen, en secties zijn genummerd omdat de
   inhoud werkelijk een volgorde heeft.

   Het accent is markeerstiftgeel. Niet als versiering: het is waar een docent
   een rooster mee bewerkt, en het markeert hier precies één ding — wat van jou
   is. Diepgroen blijft de merkkleur en de primaire actie.

   Van watermelon komt de opbouw: randgedreven in plaats van schaduwgedreven,
   hairline-randen, pilvormige knoppen met een lichte binnenrand bovenlangs, en
   hun bewegingstaal (0,2-0,8s, easeOut, opacity plus verschuiving, gestapeld).

   GEEN inline stijlen in de HTML. De CSP staat op style-src 'self', dus een
   style-attribuut wordt door de browser geweigerd. Dat kostte hier een middag:
   iconen van 514 pixels omdat hun maat in een style-attribuut stond.
   ========================================================================== */

/* ------------------------------------------------------------- lettertypen */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/lettertype/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/lettertype/archivo-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: 'DM Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/lettertype/dmmono-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;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --papier:     #EFEEE8;
  --papier-2:   #E6E4DA;
  --vel:        #FBFAF6;
  --inkt:       #12140F;
  --klei:       #585C51;
  --klei-2:     #82857A;
  --lijn:       #D8D5C8;
  --lijn-2:     #C4C0AF;

  --groen:      #17564A;
  --groen-diep: #0F3E35;
  --groen-vlak: #DEE9E3;
  --groen-rand: #A9C7BB;

  /* Markeerstift. Uitsluitend als ondergrond met donkere inkt erop — als tekst
     op papier haalt dit nooit genoeg contrast, en dat is geen smaakkwestie. */
  --marker:     #D8F24B;
  --marker-mat: #F0F8C6;
  --marker-rand:#B9D42F;
  --marker-inkt:#3E4B08;

  --rood:       #96382A;
  --rood-vlak:  #F3E3DE;

  --pil:    999px;
  --hoek:   10px;
  --hoek-s: 6px;

  --glans:  inset 0 1px 0 0 rgb(255 255 255 / 0.18);
  --lift:   0 1px 2px rgb(18 20 15 / 0.05);
  --lift-2: 0 2px 4px rgb(18 20 15 / 0.05), 0 14px 30px -16px rgb(18 20 15 / 0.24);

  --schil: clamp(1.25rem, 5vw, 4.5rem);
  --maat:  1220px;

  --soepel: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ basis */

*, *::before, *::after { box-sizing: border-box; }

/* Het hidden-attribuut verbergt via display:none in de browserstijl, en élke
   eigen display-waarde wint daarvan. Zonder deze regel staan de drie rolpanelen
   alle drie tegelijk in beeld, want .rolvlak is een grid. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Elke svg krijgt hier een maat. Zonder dit valt een inline-svg terug op zijn
   eigen standaard van 300 bij 150 — de fout die deze pagina eerder sloopte. */
svg { width: 1.125rem; height: 1.125rem; flex: none; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--groen); text-underline-offset: 3px; }
a:hover { color: var(--groen-diep); }

:focus-visible {
  outline: 2.5px solid var(--groen);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------- structuur */

.schil {
  width: 100%;
  max-width: var(--maat);
  margin-inline: auto;
  padding-inline: var(--schil);
}

/* De kolomlijnen. Ze lopen door de hele pagina en maken van het vlak een
   rooster — precies wat het product organiseert. Op smalle schermen weg: daar
   is geen ruimte voor kolommen en wordt het ruis. */
.raster-lijnen {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}
@media (min-width: 64rem) {
  .raster-lijnen { display: block; }
  .raster-lijnen::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(
      calc(100vw - 2 * var(--schil)),
      calc(var(--maat) - 2 * var(--schil))
    );
    background-image: repeating-linear-gradient(
      to right,
      var(--lijn) 0 1px,
      transparent 1px 16.6667%
    );
    opacity: .45;
  }
}
body > *:not(.raster-lijnen) { position: relative; z-index: 1; }

section { padding-block: 3.5rem; }
@media (min-width: 48rem) { section { padding-block: 5.25rem; } }
@media (min-width: 64rem) { section { padding-block: 6.5rem; } }

.streep { border-top: 1px solid var(--lijn); }

/* --------------------------------------------------------------- tekstlaag */

.mono {
  font-family: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Het sectielabel: een nummer in mono plus een naam. Het nummer zegt iets —
   deze pagina's beschrijven een volgorde — en anders zou het decoratie zijn. */
.label {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--groen);
  margin-bottom: 1.1rem;
}
.label::before {
  content: attr(data-nr);
  color: var(--klei-2);
  border-right: 1px solid var(--lijn-2);
  padding-right: .6rem;
}
.label.zonder-nr::before { content: none; }

h1 {
  font-size: clamp(2.3rem, 6.6vw, 4.4rem);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -.033em;
}
h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -.026em;
}
h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
}

.lood {
  margin-top: 1rem;
  color: var(--klei);
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (min-width: 48rem) { .lood { font-size: 1.15rem; } }

.tekst { color: var(--klei); font-size: .9375rem; }
.tekst + .tekst { margin-top: .8rem; }
.klein { font-size: .8125rem; color: var(--klei-2); }

.meet-56 { max-width: 56ch; }
.meet-64 { max-width: 64ch; }
.meet-40 { max-width: 40ch; }

.sectiekop { max-width: 46rem; margin-bottom: 2.5rem; }

/* Markeerstift onder een woord. Geen highlight-rechthoek maar een streek die
   onder de basislijn doorloopt, zoals een echte marker over gedrukte tekst. */
.gemarkeerd {
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-size: 100% .34em;
  background-position: 0 84%;
  padding-inline: .06em;
}

/* ----------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--pil);
  border: 1px solid transparent;
  padding: .78rem 1.4rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s var(--soepel), border-color .18s var(--soepel),
              transform .18s var(--soepel), color .18s var(--soepel),
              box-shadow .18s var(--soepel);
}
.knop:active { transform: translateY(1px); }
.knop svg { width: 1rem; height: 1rem; }

.knop-vol { background: var(--groen); color: #fff; box-shadow: var(--glans); }
.knop-vol:hover {
  background: var(--groen-diep); color: #fff;
  box-shadow: var(--glans), 0 6px 20px -8px rgb(23 86 74 / .5);
}

.knop-rand { background: var(--vel); color: var(--inkt); border-color: var(--lijn-2); }
.knop-rand:hover { border-color: var(--inkt); color: var(--inkt); }

.knop-stil { background: transparent; color: var(--klei); padding-inline: .55rem; }
.knop-stil:hover { color: var(--inkt); }

.knop[disabled] { opacity: .5; pointer-events: none; }
.knoprij { display: flex; flex-wrap: wrap; gap: .7rem; }
.knop-breed { flex: 1; min-width: 12rem; }

/* ------------------------------------------------------------------ vlakken */

.kaart {
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  padding: 1.5rem;
}
.kaart-groen { border-color: var(--groen-rand); background: #F4F9F6; }
.kaart-rood  { border-color: #E4CFC8; background: #FAF4F2; }
.kaart-mark  { border-color: var(--marker-rand); background: #FBFDEE; }

.raster { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .raster-2, .raster-3, .raster-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
  .raster-4 { grid-template-columns: repeat(4, 1fr); }
}

.merkje {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: var(--hoek-s);
  background: var(--groen-vlak);
  border: 1px solid var(--groen-rand);
  color: var(--groen);
  margin-bottom: 1rem;
}
.merkje svg { width: 1.15rem; height: 1.15rem; }

.pil {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: var(--pil);
  border: 1px solid var(--lijn-2);
  background: var(--vel);
  padding: .28rem .7rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--klei);
  white-space: nowrap;
}
.pil-groen { background: var(--groen-vlak); border-color: var(--groen-rand); color: var(--groen); }
.pil-mark  { background: var(--marker); border-color: var(--marker-rand); color: var(--marker-inkt); font-weight: 500; }

/* ------------------------------------------------------------------ header */

.balk {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--soepel), background-color .25s var(--soepel);
}
.balk.geplakt { border-bottom-color: var(--lijn); background: color-mix(in srgb, var(--papier) 96%, transparent); }
.balk .schil { display: flex; align-items: center; gap: 1rem; height: 4.1rem; }

.merk {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.0625rem; font-stretch: 106%;
  letter-spacing: -.03em; color: var(--inkt); text-decoration: none;
}
.merk .vlek {
  width: 1.7rem; height: 1.7rem; border-radius: 6px;
  background: var(--groen); color: #fff;
  display: grid; place-items: center;
  font-size: .8125rem; font-weight: 700;
  box-shadow: var(--glans);
}
.merk small {
  font-weight: 400; font-stretch: 100%; color: var(--klei-2);
  font-size: .8125rem; letter-spacing: 0;
}
/* Onder de 26rem duwt de toevoeging de knop uit beeld. In de voettekst,
   waar de ruimte er wel is, blijft hij staan. */
@media (max-width: 26rem) { .balk .merk small { display: none; } }

.hoofdmenu { display: none; margin-left: auto; }
@media (min-width: 68rem) { .hoofdmenu { display: flex; align-items: center; gap: .1rem; } }
.hoofdmenu a {
  position: relative;
  white-space: nowrap;
  color: var(--klei); text-decoration: none; font-size: .875rem;
  padding: .5rem .75rem; border-radius: var(--pil);
  transition: color .18s var(--soepel);
}
.hoofdmenu a::after {
  content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .3rem;
  height: 2px; background: var(--marker);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--soepel);
}
.hoofdmenu a:hover { color: var(--inkt); }
.hoofdmenu a:hover::after { transform: scaleX(1); }

.balk .acties { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
@media (min-width: 68rem) { .balk .acties { margin-left: 0; } }
.balk .acties .knop { padding: .58rem 1.1rem; font-size: .875rem; }
.verberg-klein { display: none; }
@media (min-width: 32rem) { .verberg-klein { display: inline-flex; } }

/* -------------------------------------------------------------------- hero */

.hero { padding-top: 3rem; padding-bottom: 3.25rem; }
@media (min-width: 64rem) { .hero { padding-top: 4.75rem; padding-bottom: 5.5rem; } }

.hero-raster { display: grid; gap: 2.75rem; align-items: start; }
@media (min-width: 64rem) { .hero-raster { grid-template-columns: 1.04fr .96fr; gap: 4rem; } }
.hero h1 { margin-top: .2rem; }
.hero .lood { max-width: 34rem; }
.hero .knoprij { margin-top: 2rem; }

.onder-knop {
  margin-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .75rem; color: var(--klei-2);
}
.onder-knop li { display: inline-flex; align-items: center; gap: .35rem; }
.onder-knop svg { width: .85rem; height: .85rem; color: var(--groen); }

/* ------------------------------------------------- het rooster als element */

.venster {
  border: 1px solid var(--lijn-2);
  border-radius: var(--hoek);
  background: var(--vel);
  overflow: hidden;
  box-shadow: var(--lift-2);
}
.venster-balk {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--lijn);
  background: var(--papier-2);
}
.venster-balk .wie { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.venster-balk .naam { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.venster-balk .sub {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem; color: var(--klei-2); letter-spacing: .04em;
}
.venster-balk .rechts { margin-left: auto; }
.venster-inhoud { padding: 1rem; }

.slots { display: grid; gap: .35rem; }

.slot {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-s);
  background: var(--vel);
  padding: .62rem .8rem;
  font: inherit;
  font-size: .875rem;
  text-align: left;
  color: inherit;
  transition: border-color .18s var(--soepel), background-color .18s var(--soepel),
              transform .18s var(--soepel);
}
.slot .tijd {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.01em;
}
.slot .wie-erin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .merkw {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--klei-2);
  text-align: right;
}
.slot .vink { width: 1rem; height: 1rem; opacity: 0; transition: opacity .2s var(--soepel); color: var(--marker-inkt); }

button.slot { cursor: pointer; }
button.slot:hover { border-color: var(--groen); transform: translateX(2px); }

.slot.bezet { background: var(--papier-2); color: var(--klei-2); border-style: dashed; }
.slot.bezet .tijd { color: var(--klei-2); }

.slot.pauze {
  background: repeating-linear-gradient(
    -45deg, transparent 0 7px, rgb(184 176 140 / .18) 7px 14px);
  border-style: dashed;
}
.slot.pauze .merkw { color: var(--klei); }

/* Gekozen: markeerstift. Eén plek in de hele pagina waar dit geel vol wordt
   ingezet, en het betekent precies één ding — dit is van jou. */
.slot.gekozen {
  border-color: var(--marker-rand);
  border-width: 1.5px;
  background: var(--marker-mat);
  padding: calc(.62rem - .5px) calc(.8rem - .5px);
}
.slot.gekozen .merkw { color: var(--marker-inkt); font-weight: 500; }
.slot.gekozen .vink { opacity: 1; }

.venster-voet {
  border-top: 1px solid var(--lijn);
  padding: .85rem .9rem;
  font-size: .75rem; color: var(--klei-2); line-height: 1.55;
  background: var(--papier-2);
}
.venster-voet strong { color: var(--klei); font-weight: 500; }

/* --------------------------------------------------------- rolwisselaar */

.rolkiezer {
  display: inline-flex; gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--lijn-2);
  border-radius: var(--pil);
  background: var(--papier-2);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.rolkiezer button {
  border: 0; background: transparent;
  border-radius: var(--pil);
  padding: .55rem 1.05rem;
  font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--klei); cursor: pointer;
  transition: background-color .22s var(--soepel), color .22s var(--soepel);
}
.rolkiezer button:hover { color: var(--inkt); }
.rolkiezer button[aria-selected="true"] {
  background: var(--inkt); color: var(--papier);
  box-shadow: var(--glans);
}

.rolvlak { display: grid; gap: 1.75rem; }
@media (min-width: 58rem) { .rolvlak { grid-template-columns: .88fr 1.12fr; gap: 2.75rem; align-items: start; } }

.rol-uitleg .wat { display: grid; gap: .6rem; margin-top: 1.2rem; }
.rol-uitleg .wat li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .65rem;
  font-size: .9375rem; align-items: start;
}
.rol-uitleg .wat svg { width: 1.05rem; height: 1.05rem; margin-top: .25rem; }
.rol-uitleg .ja svg  { color: var(--groen); }
.rol-uitleg .nee     { color: var(--klei-2); }
.rol-uitleg .nee svg { color: var(--rood); }

/* Wat deze rol niet mag zien wordt niet weggelaten maar afgedekt. Een lege
   plek leest als "er is niets"; een afgedekte plek laat zien dat er wél iets
   is en dat het niet voor jou is. Dat is het hele punt van dit product. */
.afgedekt { position: relative; color: transparent; user-select: none; }
.afgedekt::after {
  content: '';
  position: absolute; inset: .12em -.25em;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg, var(--lijn-2) 0 5px, var(--papier-2) 5px 10px);
  opacity: .9;
}

/* ------------------------------------------------------------ stappenreeks */

.stappen { counter-reset: stap; display: grid; gap: 1rem; }
@media (min-width: 62rem) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.stappen > li {
  counter-increment: stap;
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  padding: 1.5rem;
}
.stappen > li::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .75rem; font-weight: 500; letter-spacing: .1em;
  color: var(--klei-2);
  padding-bottom: .8rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--lijn);
}
.stappen h3 { margin-bottom: .4rem; }
.stappen p { color: var(--klei); font-size: .9375rem; }

/* --------------------------------------------------------------- lijstjes */

.vergelijk { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .vergelijk { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.vergelijk h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; }
.vergelijk h3 svg { width: 1.15rem; height: 1.15rem; }
.vergelijk ul { display: grid; gap: .65rem; }
.vergelijk li {
  display: grid; grid-template-columns: 1.05rem 1fr; gap: .6rem;
  font-size: .9375rem; align-items: start;
}
.vergelijk li svg { width: 1rem; height: 1rem; margin-top: .25rem; }
.kaart-rood  svg { color: var(--rood); }
.kaart-rood  li  { color: var(--klei); }
.kaart-groen svg { color: var(--groen); }

.vinklijst { display: grid; gap: .7rem; margin-top: 1.6rem; }
.vinklijst li {
  display: grid; grid-template-columns: 1.15rem 1fr; gap: .65rem;
  font-size: .9375rem; color: var(--klei); align-items: start;
}
.vinklijst svg { width: 1.1rem; height: 1.1rem; margin-top: .22rem; color: var(--groen); }
.vinklijst .nee svg { color: var(--rood); }

/* ------------------------------------------------------------------ tabel */

.rol-tabel {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: var(--vel);
}
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9375rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
thead th {
  background: var(--papier-2);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--klei-2);
}
tbody tr:last-child td { border-bottom: 0; }
td.rol { font-weight: 600; white-space: nowrap; }

/* -------------------------------------------------------------------- faq */

.faq { display: grid; gap: .5rem; max-width: 48rem; }
details.vraag {
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  padding: 0 1.3rem;
  transition: border-color .2s var(--soepel);
}
details.vraag[open] { border-color: var(--lijn-2); }
details.vraag summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-weight: 500; font-size: 1rem;
  position: relative;
}
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::after {
  content: ''; position: absolute; right: .3rem; top: 1.42rem;
  width: .7rem; height: .7rem;
  border-right: 1.6px solid var(--klei-2);
  border-bottom: 1.6px solid var(--klei-2);
  transform: rotate(45deg);
  transition: transform .3s var(--soepel), border-color .2s var(--soepel);
}
details.vraag[open] summary::after { transform: rotate(-135deg); border-color: var(--groen); }
details.vraag .antwoord { padding-bottom: 1.3rem; color: var(--klei); font-size: .9375rem; }
details.vraag .antwoord p + p { margin-top: .7rem; }

/* ---------------------------------------------------------------- citaat */

.citaat { border-left: 2.5px solid var(--groen); padding-left: 1.4rem; max-width: 34rem; }
.citaat q {
  display: block;
  font-size: clamp(1.2rem, 3.2vw, 1.65rem);
  font-weight: 500; font-stretch: 103%;
  line-height: 1.38; letter-spacing: -.02em;
  quotes: '\201C' '\201D';
}
.citaat footer {
  margin-top: .9rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .75rem; color: var(--klei-2); letter-spacing: .04em;
}

/* -------------------------------------------------------------- formulier */

.aanvraag {
  background: var(--vel);
  border: 1px solid var(--lijn-2);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--lift-2);
}
@media (min-width: 48rem) { .aanvraag { padding: 2rem; } }

.keuzerij { display: grid; gap: .5rem; margin-bottom: 1.4rem; }
@media (min-width: 34rem) { .keuzerij { grid-template-columns: repeat(3, 1fr); } }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze span {
  display: block; text-align: center;
  border: 1px solid var(--lijn-2);
  border-radius: var(--hoek-s);
  padding: .72rem .6rem;
  font-size: .875rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .18s var(--soepel), background-color .18s var(--soepel), color .18s var(--soepel);
}
.keuze span:hover { border-color: var(--klei); }
.keuze input:checked + span {
  border-color: var(--groen); border-width: 1.5px;
  background: var(--groen-vlak); color: var(--groen);
  padding: calc(.72rem - .5px) calc(.6rem - .5px);
}
.keuze input:focus-visible + span { outline: 2.5px solid var(--groen); outline-offset: 2px; }

.veldrij { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .veldrij-2 { grid-template-columns: 1fr 1fr; } }
.veldrij + .veldrij { margin-top: 1rem; }

.veld label {
  display: block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--klei);
  margin-bottom: .4rem;
}
.veld label .opt { color: var(--klei-2); font-weight: 400; text-transform: none; letter-spacing: .02em; }

.invoer {
  width: 100%;
  border: 1px solid var(--lijn-2);
  border-radius: var(--hoek-s);
  background: var(--papier);
  padding: .72rem .85rem;
  font: inherit; font-size: 1rem;
  color: var(--inkt);
  transition: border-color .18s var(--soepel), box-shadow .18s var(--soepel), background-color .18s var(--soepel);
}
.invoer::placeholder { color: var(--klei-2); }
.invoer:focus {
  outline: none; background: var(--vel);
  border-color: var(--groen);
  box-shadow: 0 0 0 3px var(--groen-vlak);
}
textarea.invoer { resize: vertical; min-height: 5.5rem; line-height: 1.55; }

.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding {
  border-radius: var(--hoek-s);
  padding: .85rem 1rem;
  font-size: .875rem;
  margin-top: 1rem;
  border: 1px solid;
}
.melding-goed { background: var(--groen-vlak); border-color: var(--groen-rand); color: var(--groen); }
.melding-fout { background: var(--rood-vlak); border-color: #E0C7BF; color: var(--rood); }
.melding[hidden] { display: none; }

.kleine-letter { font-size: .8125rem; color: var(--klei-2); margin-top: 1.1rem; line-height: 1.55; }

/* --------------------------------------------------------------- kruimels */

.kruimels {
  border-bottom: 1px solid var(--lijn);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .75rem;
}
.kruimels .schil { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-block: .75rem; }
.kruimels a { color: var(--klei); text-decoration: none; }
.kruimels a:hover { color: var(--inkt); text-decoration: underline; }
.kruimels .scheiding { color: var(--klei-2); }
.kruimels [aria-current="page"] { color: var(--inkt); }

/* ------------------------------------------------------------------ footer */

.voet { border-top: 1px solid var(--lijn); background: var(--papier-2); }
.voet .schil { padding-block: 3rem; }
.voet-raster { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .voet-raster { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.voet h4 {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--klei-2); margin-bottom: .9rem; font-weight: 500;
}
.voet ul { display: grid; gap: .5rem; }
.voet a { color: var(--klei); text-decoration: none; font-size: .9375rem; }
.voet a:hover { color: var(--inkt); }
.voet p { color: var(--klei); font-size: .9375rem; }
.voet .merk { margin-bottom: .9rem; }
.slotregel {
  border-top: 1px solid var(--lijn-2);
  margin-top: 2.5rem; padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.3rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .75rem; color: var(--klei-2);
}

/* ------------------------------------------------------------- hulpklassen */

/* Op een onderwerppagina staat de kop een maat kleiner dan op de homepage: die
   moet niet met de hoofdpagina concurreren in het zoekresultaat noch in beeld. */
.h1-onderwerp { font-size: clamp(1.9rem, 5.2vw, 3rem); }
.zelf-midden { align-self: center; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--groen); color: #fff; padding: .75rem 1.2rem;
  border-radius: 0 0 var(--hoek-s) 0; text-decoration: none;
}
.overslaan:focus { left: 0; color: #fff; }

.stapel { display: grid; gap: 1.25rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2rem; }

/* ---------------------------------------------------------------- beweging */

/* Watermelon's bewegingstaal: opacity plus een kleine verschuiving, easeOut,
   rond een halve seconde, gestapeld per index. De vertraging staat als
   custom property op het element, gezet door het script — een style-attribuut
   zou door de CSP geweigerd worden. */
[data-toon] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .62s var(--soepel), transform .62s var(--soepel);
}

/* De stapeling staat als attribuut in de HTML en de vertraging hier. Dat is
   geen omweg maar noodzaak: een style-attribuut of een via JavaScript gezette
   stijl wordt door style-src 'self' geweigerd. Zo blijft de CSP streng en is
   de opbouw in de HTML meteen af te lezen. */
[data-toon="1"] { transition-delay:  70ms; }
[data-toon="2"] { transition-delay: 140ms; }
[data-toon="3"] { transition-delay: 210ms; }
[data-toon="4"] { transition-delay: 280ms; }
[data-toon="5"] { transition-delay: 350ms; }
[data-toon="6"] { transition-delay: 420ms; }
[data-toon].zichtbaar { opacity: 1; transform: none; }

/* Zonder JavaScript hoort de pagina gewoon leesbaar te zijn. */
.geen-js [data-toon] { opacity: 1; transform: none; }