@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/instrument-sans-latin.6219bc4bfd.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/instrument-serif-latin.60c06664b5.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

/* tokens.css */
/* ============================================================
   Designsysteem — drie lagen (§10)

   1. Primitieven   ruwe merkwaarden. Nooit direct gebruiken in een component.
   2. Semantiek     wat een kleur betekent. Dit gebruik je.
   3. Vlakcontext   [data-vlak] op een sectie herdefinieert laag 2.

   Gevolg: een component weet niet of hij op een lichte of donkere grond staat.
   Zet nooit een primitieve waarde in een component — dan breekt hij zodra hij
   op een donker vlak belandt, en dat merk je pas als de sectie verplaatst is.

   Alle contrastverhoudingen zijn doorgerekend, niet geschat.
   `npm run tokens` rekent ze opnieuw en stopt met exitcode 1 als een paar
   onder de eis zakt. Draai dat vóórdat je een kleur toevoegt.
   ============================================================ */

:root {
  /* ---------- Laag 1 · Primitieven ---------- */
  --inkt-950: #16140F;   /* warm bijna-zwart */
  --inkt-800: #221F18;   /* verhoogd vlak binnen donker */
  --inkt-600: #4A4436;   /* zachte tekst op licht */
  --inkt-400: #B0AA9C;   /* zachte tekst op donker */

  --papier-50: #FAF8F4;  /* warm gebroken wit */
  --papier-100: #F1ECE2; /* verhoogd vlak binnen licht */

  --steen-500: #8F8776;  /* functionele rand op licht (invoervelden) */
  --steen-400: #736C5A;  /* functionele rand op donker */
  --steen-200: #E2DBCC;  /* decoratieve haarlijn op licht */

  --merk-800: #7A2E0F;   /* gebrand oranjerood — merkkleur op lichte grond */
  --merk-400: #E0A03A;   /* amber — dezelfde merkkleur op donkere grond */

  --waar-700: #1F5B33;   /* bevestiging op licht */
  --fout-700: #8C1D1D;   /* fout op licht */

  /* ---------- Laag 1 · Maat, ruimte, tijd ---------- */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;
  --ruimte-8: 4.5rem;
  --ruimte-9: 7rem;

  --rond-1: 3px;
  --rond-2: 6px;
  --rond-3: 14px;

  /* Aanraakvlak: vastgelegd minimum, niet geschat (§10, §14).
     WCAG 2.2 AA (2.5.8) eist 24px; 44px is de comfortabele ondergrens die we
     hier aanhouden voor alles wat je met een duim raakt. */
  --raakvlak-min: 44px;

  --lijn-hoogte-tekst: 1.65;
  --lijn-hoogte-kop: 1.1;
  --maat-leesbreedte: 62ch;
  --maat-inhoud: 1140px;
  --maat-smal: 720px;

  --overgang: 140ms ease-out;

  /* ---------- Laag 2 · Semantiek (lichte grond is de standaard) ---------- */
  --grond: var(--papier-50);
  --grond-verhoogd: var(--papier-100);
  --tekst: var(--inkt-950);          /* 17.35:1 op grond — AAA  */
  --tekst-zacht: var(--inkt-600);    /*  9.12:1 op grond — AAA  */
  --accent: var(--merk-800);         /*  8.90:1 op grond — AAA  */
  --accent-op: var(--papier-50);     /*  8.90:1 op accent — AAA */
  --rand: var(--steen-500);          /*  3.36:1 op grond — 1.4.11 */
  --haarlijn: var(--steen-200);      /* decoratief, geen eis */
  --focus: var(--inkt-950);          /* 17.35:1 op grond */
  --knop-grond: var(--merk-800);
  --knop-tekst: var(--papier-50);
}

/* ---------- Laag 3 · Vlakcontext ---------- */
/* Een sectie met data-vlak="donker" herdefinieert laag 2. Componenten
   daarbinnen veranderen niet mee — ze hoeven er niets van te weten. */
[data-vlak='donker'] {
  --grond: var(--inkt-950);
  --grond-verhoogd: var(--inkt-800);
  --tekst: var(--papier-50);         /* 17.35:1 op grond — AAA  */
  --tekst-zacht: var(--inkt-400);    /*  7.95:1 op grond — AAA  */
  --accent: var(--merk-400);         /*  8.11:1 op grond — AAA  */
  --accent-op: var(--inkt-950);      /*  8.11:1 op accent — AAA */
  --rand: var(--steen-400);          /*  3.04:1 op grond — 1.4.11 */
  --haarlijn: var(--steen-400);
  --focus: var(--merk-400);          /*  8.11:1 op grond */
  --knop-grond: var(--merk-400);
  --knop-tekst: var(--inkt-950);
}

[data-vlak='verhoogd'] {
  --grond: var(--papier-100);
  --grond-verhoogd: var(--papier-50);
}


/* basis.css */
/* ============================================================
   Basis — reset, typografie, ritme.
   Alles hieronder gebruikt uitsluitend semantische tokens uit laag 2.
   ============================================================ */

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

html {
  /* Ankerlinks mogen niet onder de plakkende kop verdwijnen (§15: diepe links
     moeten openen wat ze aanwijzen). */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: var(--lijn-hoogte-tekst);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Vangnet tegen horizontale overloop op 320px. De echte oplossing staat per
     component; dit voorkomt dat één fout de hele pagina laat schuiven. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  line-height: var(--lijn-hoogte-kop);
  letter-spacing: -0.017em;
  text-wrap: balance;
  margin: 0 0 var(--ruimte-4);
  font-weight: 600;
}

h1, .display {
  font-family: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: clamp(2.35rem, 1.4rem + 4.2vw, 4.15rem);
  line-height: 1.03;
}

h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.14rem, 1.05rem + 0.4vw, 1.32rem); }
h4 { font-size: 1.0625rem; }

p, ul, ol, dl { margin: 0 0 var(--ruimte-4); }
p { max-width: var(--maat-leesbreedte); text-wrap: pretty; }
:where(p, li) strong { font-weight: 600; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

/* Zichtbare focus overal, ook waar de browser hem zou verbergen. Nooit
   verwijderen: zonder dit is de site met een toetsenbord onbruikbaar. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--rond-1);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--haarlijn);
  margin: var(--ruimte-7) 0;
}

::selection { background: var(--accent); color: var(--accent-op); }

/* ---------- Structuur ---------- */

.wikkel {
  /* Volle-breedte wikkel. Een achtergrondkleur hoort HIER, nooit op .inhoud —
     die heeft een maximumbreedte en schildert dan maar tot die breedte (§15). */
  background: var(--grond);
  color: var(--tekst);
}

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

.inhoud--smal { max-width: var(--maat-smal); }

.sectie { padding-block: var(--ruimte-8); }
.sectie--ruim { padding-block: var(--ruimte-9); }
.sectie--krap { padding-block: var(--ruimte-7); }

.kopgroep { max-width: 34ch; margin-bottom: var(--ruimte-6); }
.kopgroep p { color: var(--tekst-zacht); max-width: 46ch; }
.kopgroep > :last-child { margin-bottom: 0; }

.bovenkop {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin: 0 0 var(--ruimte-3);
}

.lood { font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.28rem); color: var(--tekst-zacht); }

/* ---------- Overslaan-link ---------- */

.overslaan {
  position: absolute;
  left: var(--ruimte-4);
  top: var(--ruimte-4);
  z-index: 100;
  transform: translateY(-160%);
  background: var(--grond);
  color: var(--tekst);
  border: 2px solid var(--focus);
  border-radius: var(--rond-2);
  padding: var(--ruimte-3) var(--ruimte-4);
  text-decoration: none;
  font-weight: 600;
}
.overslaan:focus { transform: translateY(0); }

/* ---------- Zichtbare plaatshouder (§8) ---------- */
/* Ontbrekende gegevens worden getoond, niet verstopt. `preflight --release`
   stopt zolang er nog één in dist/ staat. Wie dit onzichtbaar maakt, zorgt
   ervoor dat de site met gaten live gaat zonder dat iemand het merkt. */
.ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: repeating-linear-gradient(
    -45deg, var(--grond-verhoogd), var(--grond-verhoogd) 6px,
    transparent 6px, transparent 12px
  );
  border: 1px dashed var(--rand);
  border-radius: var(--rond-1);
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

/* ---------- Toegankelijkheid ---------- */

.enkel-voorlezer {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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


/* componenten.css */
/* ============================================================
   Componenten. Uitsluitend semantische tokens — geen enkele hexwaarde.
   Wie hier een kleur hardcodeert, breekt de vlakcontext uit laag 3.
   ============================================================ */

/* ---------- Kop ---------- */

.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grond);
  border-bottom: 1px solid var(--haarlijn);
}

.kop__binnen {
  display: flex;
  align-items: center;
  gap: var(--ruimte-5);
  min-height: 4.25rem;
  flex-wrap: wrap;
}

/* Het woordmerk staat in de schreefloze en niet in de Instrument Serif van de
   koppen. Dat is een bewuste afwijking: het logo zet "eendag" zwaar en
   "online.nl" licht, en die twee gewichten bestaan alleen in de schreefloze —
   Instrument Serif is hier alleen in 400 geladen. Zet je dit terug op de
   schreefletter, dan valt het onderscheid tussen de twee helften weg en leest
   het als één lang woord. */
.merk {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  color: var(--tekst);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: var(--raakvlak-min);
  margin-inline-end: auto;
}
/* De twee helften zitten in één omhulsel. Zonder dat omhulsel zijn ze allebei
   een flex-kind van .merk en zet de `gap` daar ook ruimte tussen — dan staat er
   "eendag online.nl" met een spatie erin, en dat is een andere naam. */
.merk__naam { white-space: nowrap; }
.merk__vet { font-weight: 600; }
/* De lichte helft heeft een eigen kleur, geen eigen opacity: met opacity zou hij
   op een donker vlak een andere kleur worden dan het token dat daar hoort, en
   dan klopt het gemeten contrast niet meer (§2). */
.merk__licht { font-weight: 400; color: var(--tekst-zacht); }
.merk:hover { color: var(--accent); }
.merk:hover .merk__licht { color: var(--accent); }

.merk__teken {
  /* Iets groter dan de letterhoogte ernaast: de ring is optisch lichter dan een
     letterblok, en op gelijke hoogte oogt hij kleiner dan de naam. Gemeten op
     /styleguide/, niet geschat. */
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  /* De ring erft currentColor van .merk, dus hij kleurt mee bij hover. Zonder
     deze regel blijft de ring staan op de tekstkleur terwijl de naam ernaast
     naar de accentkleur springt, en dat leest als een fout. */
  overflow: visible;
}

/* Alleen voor /styleguide/: het merkteken op drie formaten naast elkaar, zodat
   je in één blik ziet of hij het op faviconformaat nog houdt. */
.merkstalen { display: flex; align-items: flex-end; gap: var(--ruimte-4); }
.merkstaal { color: var(--tekst); display: inline-flex; }
.merkstaal--l .merk__teken { width: 4rem; height: 4rem; }
.merkstaal--m .merk__teken { width: 2rem; height: 2rem; }
.merkstaal--s .merk__teken { width: 1rem; height: 1rem; }

.navigatie { display: flex; align-items: center; gap: var(--ruimte-1); flex-wrap: wrap; }

/* `:not(.knop)` is hier geen netheid maar een reparatie: `.navigatie a` heeft
   een hogere specificiteit dan `.knop--hoofd`, dus zonder deze uitzondering
   overschrijft de menustijl de knopkleur. De knop in de kop kreeg daardoor
   inkt-op-merkkleur: 1,95:1 in plaats van 8,90:1. Onzichtbaar in de bron,
   zichtbaar in de meting. Niet weghalen. */
.navigatie a:not(.knop) {
  display: inline-flex;
  align-items: center;
  min-height: var(--raakvlak-min);
  /* Ook de breedte, niet alleen de hoogte: een kort label als "Werk" haalde
     met alleen padding maar 38 px. Gemeten, niet geschat. */
  min-width: var(--raakvlak-min);
  justify-content: center;
  padding-inline: var(--ruimte-3);
  color: var(--tekst);
  text-decoration: none;
  font-size: 0.96rem;
  border-radius: var(--rond-2);
}
.navigatie a:not(.knop):hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.navigatie a[aria-current='page'] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

@media (max-width: 47.99em) {
  .kop__binnen { padding-block: var(--ruimte-2); }
  .merk { margin-inline-end: 0; width: 100%; }
  .navigatie { margin-inline-start: calc(var(--ruimte-3) * -1); }
  .kop { position: static; }
}

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  min-height: var(--raakvlak-min);
  padding: var(--ruimte-3) var(--ruimte-5);
  border: 2px solid transparent;
  border-radius: var(--rond-2);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang);
}

.knop--hoofd { background: var(--knop-grond); color: var(--knop-tekst); border-color: var(--knop-grond); }
.knop--hoofd:hover { background: var(--tekst); border-color: var(--tekst); color: var(--grond); }

.knop--rand { background: transparent; color: var(--tekst); border-color: var(--rand); }
.knop--rand:hover { border-color: var(--tekst); background: var(--grond-verhoogd); }

.knop--groot { font-size: 1.06rem; padding: var(--ruimte-4) var(--ruimte-6); }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  align-items: center;
}

.knop-noot {
  font-size: 0.92rem;
  color: var(--tekst-zacht);
  margin: var(--ruimte-3) 0 0;
}

/* ---------- Voorwaarde bij de belofte (§ eigen regel: nooit kleine lettertjes) ---------- */

.voorwaarde {
  display: flex;
  gap: var(--ruimte-3);
  align-items: flex-start;
  max-width: 52ch;
  margin: var(--ruimte-5) 0 0;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-inline-start: 3px solid var(--accent);
  background: var(--grond-verhoogd);
  border-radius: 0 var(--rond-2) var(--rond-2) 0;
  font-size: 0.96rem;
  color: var(--tekst);
}
.voorwaarde p { margin: 0; }

/* ---------- Held ---------- */

.held { padding-block: var(--ruimte-8) var(--ruimte-8); }
.held h1 { max-width: 17ch; margin-bottom: var(--ruimte-5); }
.held .lood { max-width: 48ch; margin-bottom: var(--ruimte-6); }

.held__nadruk { color: var(--accent); font-style: italic; }

/* ---------- Eigen component 1 · Klokstrook ---------- */
/* Maakt "binnen 24 uur" tastbaar, en zet de voorwaarde (de klok start pas als
   jouw input compleet is) in het beeld in plaats van in de kleine lettertjes.
   Dat is precies de reden dat dit component bestaat. */

.klokstrook { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ruimte-5); }

@media (min-width: 56em) {
  .klokstrook { grid-template-columns: repeat(4, 1fr); gap: var(--ruimte-4); }
}

.klokstap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  padding-top: var(--ruimte-5);
  border-top: 2px solid var(--haarlijn);
}

.klokstap--start { border-top-color: var(--accent); }

.klokstap__tijd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
}
.klokstap--start .klokstap__tijd { color: var(--accent); }

.klokstap__stip {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--haarlijn);
  flex: none;
  margin-top: calc(var(--ruimte-5) * -1 - 0.3rem);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  transform: translateY(-50%);
}
.klokstap--start .klokstap__stip { background: var(--accent); width: 0.8rem; height: 0.8rem; }

.klokstap h3 { margin: 0; }
.klokstap p { margin: 0; color: var(--tekst-zacht); font-size: 0.98rem; max-width: 34ch; }

.klokstap__vlag {
  align-self: flex-start;
  margin-top: var(--ruimte-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--rond-1);
  background: var(--accent);
  color: var(--accent-op);
  max-width: 30ch;
}

/* ---------- Eigen component 2 · Zekerheidsstrook ---------- */
/* Komt terug vlak boven elke plek waar iemand moet beslissen. Vier zekerheden,
   altijd dezelfde vier, altijd in dezelfde volgorde — herkenning is het punt. */

.zekerheden {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ruimte-1);
  grid-template-columns: 1fr;
  border: 1px solid var(--haarlijn);
  border-radius: var(--rond-3);
  overflow: hidden;
  background: var(--haarlijn);
}

@media (min-width: 40em)  { .zekerheden { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em)  { .zekerheden { grid-template-columns: repeat(4, 1fr); } }

.zekerheid {
  background: var(--grond);
  padding: var(--ruimte-5) var(--ruimte-5);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
}

.zekerheid__merk { color: var(--accent); }
.zekerheid__merk svg { width: 1.45rem; height: 1.45rem; }

.zekerheid__kop { font-weight: 600; font-size: 1rem; }
.zekerheid__uitleg { font-size: 0.92rem; color: var(--tekst-zacht); margin: 0; }

.zekerheden--compact .zekerheid { padding: var(--ruimte-4); }
.zekerheden--compact .zekerheid__uitleg { display: none; }

/* ---------- Kaarten en roosters ---------- */

.rooster { display: grid; gap: var(--ruimte-5); }
@media (min-width: 44em) { .rooster--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56em) { .rooster--3 { grid-template-columns: repeat(3, 1fr); } }

.kaart {
  background: var(--grond-verhoogd);
  border: 1px solid var(--haarlijn);
  border-radius: var(--rond-3);
  padding: var(--ruimte-6);
}
.kaart > :last-child { margin-bottom: 0; }
.kaart h3 { margin-bottom: var(--ruimte-3); }
.kaart p { color: var(--tekst-zacht); }

/* ---------- Prijs ---------- */

.prijsrooster { display: grid; gap: var(--ruimte-5); align-items: start; }
@media (min-width: 52em) { .prijsrooster { grid-template-columns: 1.15fr 1fr; } }

.prijskaart {
  border: 1px solid var(--rand);
  border-radius: var(--rond-3);
  padding: var(--ruimte-6);
  background: var(--grond);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.prijskaart--nadruk { border-width: 2px; border-color: var(--accent); }

.prijskaart__bedrag {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem);
  line-height: 1;
  margin: var(--ruimte-3) 0 var(--ruimte-1);
  letter-spacing: -0.01em;
}
.prijskaart__eenheid { font-size: 0.96rem; color: var(--tekst-zacht); margin: 0 0 var(--ruimte-5); }
.prijskaart .lijst { flex: 1 1 auto; }
.prijskaart .knop { margin-top: var(--ruimte-5); }

/* Waarom de prijs nooit alleen staat: €499 leest als budget zolang er geen
   reden bij staat waarom het kan. Deze regel hoort altijd bij het bedrag. */
.prijs-reden {
  font-size: 0.94rem;
  color: var(--tekst-zacht);
  border-top: 1px solid var(--haarlijn);
  padding-top: var(--ruimte-4);
  margin-top: var(--ruimte-5);
  max-width: 44ch;
}

.anker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ruimte-2) var(--ruimte-4);
  font-size: 0.96rem;
  color: var(--tekst-zacht);
  margin-bottom: var(--ruimte-6);
}
/* Geen doorstreping bij het prijsanker: dat suggereert dat dit ooit jouw prijs
   was. Het is de prijs van iemand anders, en die zet je er gewoon naast. */
.anker strong { font-weight: 600; color: var(--tekst); }

/* ---------- Lijsten met vinkjes / kruisjes ---------- */

.lijst { list-style: none; padding: 0; margin: 0 0 var(--ruimte-4); display: grid; gap: var(--ruimte-3); }
.lijst li { display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--ruimte-3); align-items: start; }
.lijst svg { width: 1.35rem; height: 1.35rem; margin-top: 0.15em; flex: none; }
.lijst--wel svg { color: var(--accent); }
.lijst--niet svg { color: var(--tekst-zacht); }
.lijst small { display: block; color: var(--tekst-zacht); font-size: 0.9rem; }

/* ---------- Veelgestelde vragen ---------- */

.vraag {
  border-bottom: 1px solid var(--haarlijn);
}
.vraag:first-of-type { border-top: 1px solid var(--haarlijn); }

.vraag > summary {
  display: flex;
  gap: var(--ruimte-4);
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: var(--ruimte-5) var(--ruimte-1);
  min-height: var(--raakvlak-min);
  font-weight: 600;
  font-size: 1.06rem;
}
.vraag > summary::-webkit-details-marker { display: none; }

.vraag > summary::after {
  content: '+';
  font-family: ui-monospace, monospace;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  flex: none;
}
.vraag[open] > summary::after { content: '–'; }

.vraag__antwoord { padding: 0 var(--ruimte-1) var(--ruimte-5); }
.vraag__antwoord > :last-child { margin-bottom: 0; }

/* Een diepe link naar een specifiek antwoord moet dat antwoord ook tonen (§15).
   Zonder JavaScript kan dat op twee manieren, en we doen ze allebei omdat
   browsers hier in verschillende fasen van de standaard zitten:
   - moderne browsers verbergen de inhoud met ::details-content;
   - oudere doen dat met `display: none` op de kinderen van een dicht <details>.
   Werkt geen van beide, dan blijft het antwoord dicht en staat het anker er nog
   steeds bovenop — dus dit kan niet stukker dan "gebruiker klikt zelf open".
   Gemeten in de browser vóór oplevering; de uitkomst staat in docs/QA.md. */
.vraag:target::details-content { content-visibility: visible; block-size: auto; }
.vraag:target > .vraag__antwoord { display: block; }

.vraag:target { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--ruimte-4); }
.vraag:target > summary { padding-inline-start: 0; }

/* ---------- Formulier ---------- */

.veld { display: grid; gap: var(--ruimte-2); margin-bottom: var(--ruimte-5); }
.veld > label { font-weight: 600; font-size: 0.98rem; }
.veld__hint { font-size: 0.9rem; color: var(--tekst-zacht); margin: 0; }

.veld input,
.veld textarea,
.veld select {
  font: inherit;
  font-size: 1rem;
  color: var(--tekst);
  background: var(--grond);
  border: 1px solid var(--rand);
  border-radius: var(--rond-2);
  padding: var(--ruimte-3) var(--ruimte-4);
  min-height: var(--raakvlak-min);
  width: 100%;
  max-width: 34rem;
}
.veld textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

.veld input:focus-visible,
.veld textarea:focus-visible,
.veld select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--tekst); }

.veld input[aria-invalid='true'],
.veld textarea[aria-invalid='true'] { border-color: var(--fout-700); border-width: 2px; }

.veld__fout { color: var(--fout-700); font-weight: 600; font-size: 0.94rem; margin: 0; }

.verplicht-noot { font-size: 0.9rem; color: var(--tekst-zacht); }

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

.melding {
  border: 1px solid var(--rand);
  border-inline-start: 4px solid var(--fout-700);
  background: var(--grond-verhoogd);
  border-radius: var(--rond-2);
  padding: var(--ruimte-4) var(--ruimte-5);
  margin-bottom: var(--ruimte-6);
}
.melding > :last-child { margin-bottom: 0; }
.melding--goed { border-inline-start-color: var(--waar-700); }

/* ---------- Tabel ---------- */

.tabelwikkel { overflow-x: auto; margin-bottom: var(--ruimte-5); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.98rem; }
th, td { text-align: left; padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--haarlijn); vertical-align: top; }
th { font-weight: 600; }

/* ---------- Slotoproep ---------- */

.oproep { text-align: left; }
.oproep h2 { max-width: 20ch; }
.oproep .lood { max-width: 46ch; }

/* ---------- Voet ---------- */

.voet { border-top: 1px solid var(--haarlijn); padding-block: var(--ruimte-7) var(--ruimte-6); font-size: 0.96rem; }
.voet__rooster { display: grid; gap: var(--ruimte-6); }
@media (min-width: 44em) { .voet__rooster { grid-template-columns: 1.4fr 1fr 1fr; } }
.voet h2 { font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tekst-zacht); margin-bottom: var(--ruimte-3); font-weight: 600; }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ruimte-1); }
/* 44 px in beide richtingen: voetlinks zijn zelfstandige knoppen, geen links
   midden in een zin. De hoogte zat er eerst onder (35 px), en na het toevoegen
   van het menu-item "Werk" bleek de breedte er ook onder te zitten — een kort
   label haalt met alleen padding maar 36 px. Allebei gemeten op 320 px. */
.voet a {
  color: var(--tekst);
  display: inline-flex;
  align-items: center;
  min-height: var(--raakvlak-min);
  min-width: var(--raakvlak-min);
}
.voet a:hover { color: var(--accent); }
.voet__klein { color: var(--tekst-zacht); border-top: 1px solid var(--haarlijn); margin-top: var(--ruimte-6); padding-top: var(--ruimte-5); font-size: 0.9rem; }
.voet__klein p { max-width: 68ch; margin-bottom: var(--ruimte-2); }

/* ---------- Interne styleguide (nooit geïndexeerd) ---------- */

.staal { display: flex; flex-wrap: wrap; gap: var(--ruimte-4); margin-bottom: var(--ruimte-6); }
.staal__blok { width: 9rem; }
.staal__vlak { height: 4rem; border-radius: var(--rond-2); border: 1px solid var(--rand); }
.staal code { font-size: 0.82rem; }

/* ---------- Zelfstandige "lees verder"-link ---------- */
/* Een link die in zijn eentje een alinea vult, is geen link middenin een zin
   maar een bedieningselement. WCAG 2.2 (2.5.8) zondert alleen dat eerste geval
   uit, dus deze krijgt hetzelfde aanraakvlak als een knop. Gemeten op 320px. */
.verder {
  display: inline-flex;
  align-items: center;
  min-height: var(--raakvlak-min);
  font-weight: 600;
}

/* ---------- Portfolio ---------- */
/* De schermafdrukken zijn het argument; de tekst eromheen is bijzaak. Daarom
   krijgt het beeld de volle breedte van de kaart en staat de tekst eronder,
   niet ernaast. */

.werkrooster { display: grid; gap: var(--ruimte-5); }
@media (min-width: 46em) { .werkrooster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .werkrooster { grid-template-columns: repeat(3, 1fr); } }

.werk {
  display: flex;
  flex-direction: column;
  background: var(--grond);
  border: 1px solid var(--haarlijn);
  border-radius: var(--rond-3);
  overflow: hidden;
  text-decoration: none;
  color: var(--tekst);
  transition: border-color var(--overgang), transform var(--overgang);
}
a.werk:hover { border-color: var(--accent); transform: translateY(-2px); }
a.werk:hover .werk__domein { color: var(--accent); }

.werk__beeld { background: var(--grond-verhoogd); border-bottom: 1px solid var(--haarlijn); }
.werk__beeld img { width: 100%; height: auto; display: block; }

.werk__tekst { padding: var(--ruimte-4) var(--ruimte-5) var(--ruimte-5); display: flex; flex-direction: column; gap: var(--ruimte-1); }
.werk__soort { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-zacht); margin: 0; }
.werk__tekst h3 { margin: 0; font-size: 1.12rem; }
.werk__wat { margin: 0; font-size: 0.95rem; color: var(--tekst-zacht); }
.werk__domein {
  margin: var(--ruimte-2) 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  /* Meedoen aan het aanraakvlak van 44px: de hele kaart is de link, maar deze
     regel is wat eruitziet als "de link". */
  display: flex; align-items: center; min-height: 1.75rem;
}
.werk__offline { font-weight: 400; font-style: italic; }
.werk--geenlink { opacity: 0.92; }

/* ---------- Uitgelicht project ---------- */

.uitgelicht { display: grid; gap: var(--ruimte-6); align-items: center; }
@media (min-width: 56em) { .uitgelicht { grid-template-columns: 1.15fr 1fr; gap: var(--ruimte-7); } }
.uitgelicht__beeld img { width: 100%; height: auto; border-radius: var(--rond-3); border: 1px solid var(--rand); }
.uitgelicht__tekst > :last-child { margin-bottom: 0; }
.uitgelicht__tekst h2 { margin-bottom: var(--ruimte-3); }

/* ---------- Werk, volledige lijst ---------- */

.werkblok { display: grid; gap: var(--ruimte-5); padding-block: var(--ruimte-7); border-top: 1px solid var(--haarlijn); }
.werkblok:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 52em) { .werkblok { grid-template-columns: 1.25fr 1fr; gap: var(--ruimte-7); align-items: center; } }
.werkblok__beeld img { width: 100%; height: auto; border-radius: var(--rond-3); border: 1px solid var(--haarlijn); }
.werkblok__beeld a { display: block; border-radius: var(--rond-3); }
.werkblok__beeld a:hover img { border-color: var(--accent); }
.werkblok__tekst > :last-child { margin-bottom: 0; }
.werkblok__tekst h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); margin-bottom: var(--ruimte-3); }

/* ---------- Juridische artikelen ---------- */
/* Genummerde leden zonder handmatige nummers: verwijder je artikel 7.3, dan
   hernummert de rest zichzelf. Met ingetypte nummers zou dat niet gebeuren,
   en een verwijzing naar "artikel 7.4" verwijst dan ineens naar iets anders.
   De inhoud van een lid staat verplicht in één <span>. Zonder die span wordt
   losse tekst naast een <strong> een eigen gridcel, en dan breekt de tekst per
   woord af in een kolom van 2,9 rem. Dat zag er in de bron nergens fout uit. */

.artikel { margin-bottom: var(--ruimte-7); }
.artikel h2 {
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.24rem);
  padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--haarlijn);
  margin-bottom: var(--ruimte-4);
}

.artikel__leden { list-style: none; counter-reset: lid; padding: 0; margin: 0; display: grid; gap: var(--ruimte-3); }
.artikel__leden > li {
  counter-increment: lid;
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: var(--ruimte-2);
  font-size: 0.98rem;
}
.artikel__leden > li::before {
  content: counter(lid);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  padding-top: 0.22em;
}

/* ---------- Drukwerk ---------- */
/* Volle breedte in plaats van een kaart: een drieluik van twee A4'tjes naast
   elkaar is onleesbaar in een kolom van 350 px, en dan toont hij niets. */

.drukwerk { display: grid; gap: var(--ruimte-5); }
.drukwerk__beeld img {
  width: 100%; height: auto;
  border-radius: var(--rond-3);
  border: 1px solid var(--haarlijn);
  background: var(--grond);
}
.drukwerk__tekst { max-width: 62ch; }
.drukwerk__tekst > :last-child { margin-bottom: 0; }
.drukwerk__tekst h3 { font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem); margin-bottom: var(--ruimte-3); }