/* seinr.nl — de openbare pagina.

   Het idee: dit is een dossier dat iemand voor je heeft doorgespit. Het beeld
   is hard (koppen van politici, groot, zwartwit), de tekst is droog. Geen
   uitroeptekens, geen stijgende lijnen, geen kleur die iets belooft. De enige
   kleur die iets aanwijst is de markeerstift, en die staat onder woorden,
   nooit onder een rendement.

   De donkere variant is geen omgekeerde lichte. Licht is papier met inkt
   erop; donker is een leesapparaat waar de portretten uit het zwart komen.
   De foto's staan daarom per thema anders ingesteld. */

/* ── tekens ─────────────────────────────────────────────────────────── */
:root {
  --papier: #e7e8e3;
  --vel: #f5f6f2;
  --diep: #dcded7;
  --inkt: #14181b;
  --inkt-2: #4e565c;
  --inkt-3: #838c92;
  --lijn: #cdd0c9;
  --lijn-hard: #b6bab1;
  --markering: #e4d24a;
  --markeervlak: #e9d95c;
  --markeerinkt: #14181b;
  --tegen: #a03027;

  /* De foto's: een kleurlaag over grijswaarden, per thema anders. */
  --duo: #16242c;
  --duo-kracht: 0.4;
  --foto-filter: contrast(1.06) brightness(1.02);
  --foto-rand: #f5f6f2;

  --breed: 74rem;
  --smal: 34rem;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --papier: #101315;
    --vel: #191d20;
    --diep: #0a0c0e;
    --inkt: #e8eae4;
    --inkt-2: #9ca4a9;
    --inkt-3: #6b747a;
    --lijn: #262c30;
    --lijn-hard: #39413f;
    --markering: #c9b735;
    --markeervlak: #c2ae3c;
    --markeerinkt: #0d1012;
    --tegen: #d4736a;

    --duo: #0b1a24;
    --duo-kracht: 0.2;
    --foto-filter: contrast(1.16) brightness(0.94);
    --foto-rand: #303739;
    --mens-filter: contrast(1.1) brightness(0.9);
  }
}

:root[data-thema="donker"] {
  --papier: #101315;
  --vel: #191d20;
  --diep: #0a0c0e;
  --inkt: #e8eae4;
  --inkt-2: #9ca4a9;
  --inkt-3: #6b747a;
  --lijn: #262c30;
  --lijn-hard: #39413f;
  --markering: #c9b735;
  --markeervlak: #c2ae3c;
  --markeerinkt: #0d1012;
  --tegen: #d4736a;

  --duo: #0b1a24;
  --duo-kracht: 0.2;
  --foto-filter: contrast(1.16) brightness(0.94);
  --foto-rand: #303739;
  --mens-filter: contrast(1.1) brightness(0.9);
}

/* ── grond ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--markering); color: #14181b; }

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

.wrap {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}

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

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

/* ── letters ────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.05rem, 4.2vw, 3.15rem); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: 1.2rem; line-height: 1.25; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.leiding { font-size: clamp(1.04rem, 1.6vw, 1.18rem); line-height: 1.55; color: var(--inkt-2); }
.klein { font-size: 0.85rem; line-height: 1.5; color: var(--inkt-2); }

.merk {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

/* De markeerstift: onder woorden, nooit onder een cijfer. */
/* Echt gemarkeerd: het geel ligt achter de woorden, niet eronder.
   Op papier is dat vol geel met donkere inkt erop, precies zoals een
   markeerstift. Op het donkere scherm zou datzelfde vlak een lamp zijn, dus
   daar is het een waas en houdt de tekst zijn eigen kleur. */
.streep {
  background: var(--markeervlak);
  color: var(--markeerinkt);
  padding: 0.08em 0.16em;
  margin: 0 -0.06em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── secties ────────────────────────────────────────────────────────── */
section { padding: clamp(4rem, 9vw, 7rem) 0; }
.regel { border-top: 1px solid var(--lijn); }

.kopje { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 2.2rem; }
.kopje::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--lijn); }

/* ── kop van de pagina ──────────────────────────────────────────────── */
.balk {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--lijn);
}

.balk__in { display: flex; align-items: center; gap: 1.4rem; height: 3.4rem; }

.naam {
  font-family: var(--serif);
  font-size: 1.34rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none;
}

.balk nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.8rem, 2.4vw, 1.7rem); }
.balk nav a { font-size: 0.87rem; text-decoration: none; color: var(--inkt-2); white-space: nowrap; }
.balk nav a:hover { color: var(--inkt); }
.balk .knop { padding: 0.42rem 0.95rem; font-size: 0.84rem; }

@media (max-width: 36rem) { .balk nav .verberg-klein { display: none; } }

/* ── de opening ─────────────────────────────────────────────────────
   De drie staan uitgeknipt en zijn hoger dan het vak waarin ze staan, zodat
   de onderrand ze afsnijdt. Daardoor kijken ze op je neer in plaats van
   netjes in een kader te passen. */
.held {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--lijn);
}

.held__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0 0;
}

@media (min-width: 62rem) {
  .held__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    min-height: min(76vh, 43rem);
  }
}

.held__woord { padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.held h1 { font-size: clamp(2.5rem, 5.8vw, 4.5rem); }
.held .leiding { margin-top: 1.5rem; max-width: 40ch; }
.held__gerust { margin-top: 1.6rem; max-width: 42ch; }

.doen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.3rem; margin-top: 2.1rem; }

.mensen {
  position: relative;
  align-self: end;
  height: clamp(15rem, 52vw, 22rem);
}

/* Op een breed scherm lopen ze door tot de rand van het venster: dan hoeven
   ze niet in een kolom te passen en blijven ze groot. */
@media (min-width: 62rem) {
  .mensen {
    position: absolute;
    right: calc((100% - 100vw) / 2);
    bottom: 0;
    width: min(48rem, 52vw);
    height: min(84%, 30rem);
  }
}

.mens {
  position: absolute;
  bottom: 0;
  height: var(--h, 100%);
  width: auto;
  max-width: none;
  transform: translateX(-50%) rotate(var(--draai, 0deg));
  transform-origin: bottom center;
  /* Grijstinten met wat extra contrast; in het donker iets gedempt zodat ze
     uit het zwart komen in plaats van erin te verdwijnen. */
  filter: var(--mens-filter, contrast(1.08) brightness(1.02));
}

.mens--links { left: 21%; --h: 84%; --draai: -3.5deg; z-index: 1; }
.mens--rechts { left: 79%; --h: 86%; --draai: 3deg; z-index: 2; }
.mens--voor { left: 50%; --h: 100%; z-index: 3; }

@media (max-width: 61.99rem) {
  .held__woord { padding-bottom: clamp(1.4rem, 4vw, 2rem); }
  .mensen { margin: 0 calc(clamp(1.25rem, 5vw, 3.5rem) * -1); }
}

@media (prefers-reduced-motion: no-preference) {
  .mens { animation: opstaan 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) backwards; }
  .mens--voor { animation-delay: 0.08s; }
  .mens--links { animation-delay: 0.24s; }
  .mens--rechts { animation-delay: 0.36s; }
  @keyframes opstaan {
    from { opacity: 0; transform: translateX(-50%) rotate(var(--draai, 0deg)) translateY(3%); }
  }

  h1 { animation: opkomen 0.8s cubic-bezier(0.2, 0.7, 0.25, 1) backwards; animation-delay: 0.05s; }
  @keyframes opkomen { from { opacity: 0; transform: translateY(0.3em); } }
}

/* ── knoppen ────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--inkt); border-radius: 2px;
  background: var(--inkt); color: var(--papier);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease;
}

.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop--groot { padding: 1rem 2rem; font-size: 1.02rem; }
.knop[aria-disabled="true"] {
  background: transparent; color: var(--inkt-3); border-color: var(--lijn); cursor: not-allowed;
}
.knop[aria-disabled="true"]:hover { transform: none; }

.verder {
  font-size: 0.95rem; text-decoration: none;
  border-bottom: 1px solid var(--lijn-hard); padding-bottom: 1px; white-space: nowrap;
}
.verder:hover { border-bottom-color: var(--inkt); }

/* ── de stroom: van 428 formulieren naar 16 signalen ────────────────────
   Het enige stuk van de pagina dat beweegt terwijl je leest, en het vertelt
   precies wat wij doen: bijna alles valt af. Zonder javascript, of met
   beweging uit, staat meteen de eindstand er, dus de tekst klopt altijd. */
.stroom { padding: 0; border-top: 1px solid var(--lijn); }

.stroom__lang { height: 195vh; }

.stroom__vast {
  position: sticky; top: 0;
  height: 100vh; min-height: 33rem;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1.4rem, 3.6vh, 2.6rem);
  overflow: hidden;
  padding: 4rem 0 2rem;
}

.stroom__veld {
  display: flex; flex-wrap: wrap;
  gap: clamp(3px, 0.5vw, 6px);
  justify-content: center;
  width: min(56rem, 90vw);
}

.merkje {
  width: clamp(7px, 1vw, 13px);
  aspect-ratio: 3 / 4;
  background: var(--inkt);
  opacity: 0.68;
  transition: opacity 0.55s ease, transform 0.55s ease, background-color 0.55s ease;
}

.merkje.weg { opacity: 0.09; transform: scale(0.45); }
.merkje.blijft { opacity: 1; }
.merkje.gemarkeerd { background: var(--markering); opacity: 1; transform: scale(1.6); }

.stroom__woord { text-align: center; width: min(40rem, 90vw); min-height: 11rem; }

.teller {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: block;
}

.stroom__woord .merk { display: block; margin-top: 0.55rem; }
.stroom__woord h2 { margin-top: 0.85rem; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.stroom__woord p { margin: 0.6rem auto 0; color: var(--inkt-2); max-width: 40ch; }

.beat { transition: opacity 0.3s ease; }
.beat[hidden] { display: none; }

/* Een dun streepje dat laat zien hoe ver je in dit stuk bent. */
.stroom__maat { width: min(18rem, 55vw); height: 1px; background: var(--lijn); position: relative; }
.stroom__maat::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%); background: var(--inkt);
}

/* ── het voorbeeldsignaal ───────────────────────────────────────────── */
.voorbeeld {
  display: grid; gap: 1.4rem clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr); align-items: end;
}

@media (min-width: 58rem) {
  .voorbeeld { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); }
}

.signaal {
  background: var(--vel); border: 1px solid var(--lijn); border-radius: 3px;
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
}

.signaal__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; }

.plaatje {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em;
  padding: 0.24rem 0.5rem; border: 1px solid var(--lijn-hard); border-radius: 2px; color: var(--inkt-2);
}

.plaatje--koop { border-color: var(--inkt); background: var(--inkt); color: var(--papier); }

.signaal h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: 0.8rem; }
.signaal p { font-size: 0.98rem; }

.signaal__waarom {
  border-left: 2px solid var(--markering); padding-left: 1rem;
  color: var(--inkt-2); font-size: 0.95rem;
}

.signaal__voet {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--lijn);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: space-between; align-items: baseline;
}

/* ── de rekenhulp ────────────────────────────────────────────────────
   Terugkijken met een bedrag erbij. Geen voorspelling: het rekent één ding
   uit dat al gebeurd is, met de peildatum er groot bij. */
.reken {
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--vel);
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
}

.reken__vraag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; }

.reken__veld {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  border-bottom: 2px solid var(--inkt); padding-bottom: 0.15rem;
}

.reken__veld span { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500; }

.reken__veld input {
  width: 6.5ch;
  border: 0; background: none; color: var(--inkt);
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500;
  letter-spacing: -0.02em;
  -moz-appearance: textfield;
}

.reken__veld input::-webkit-outer-spin-button,
.reken__veld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.reken__veld input:focus { outline: none; }
.reken__veld:focus-within { border-bottom-color: var(--markering); }

.reken__snel { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.reken__snel button {
  border: 1px solid var(--lijn-hard); border-radius: 2px; background: transparent; color: var(--inkt-2);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.32rem 0.6rem; cursor: pointer;
}
.reken__snel button:hover { color: var(--inkt); border-color: var(--inkt); }

.reken__uit {
  display: grid; gap: 1.6rem clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--lijn);
}

.reken__blok span:first-child {
  display: block; font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.03em;
}

.reken__blok--index span:first-child { color: var(--inkt-2); }
.reken__blok span:last-child { display: block; margin-top: 0.55rem; font-size: 0.85rem; color: var(--inkt-2); }
.reken__voet { margin-top: 1.5rem; }

/* ── hoe vaak er iets kwam ────────────────────────────────────────────
   Staafjes van het aantal signalen per maand. Geen versiering: de hoogte is
   een aantal, en de lege maand krijgt een streepje in plaats van niets,
   want dat die maand er was is juist het punt. */
.ritme {
  display: grid;
  gap: clamp(2rem, 5vw, 3.4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

@media (min-width: 56rem) {
  .ritme { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
}

.staven {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(6px, 1.4vw, 14px);
  align-items: end;
}

.staven li { display: grid; gap: 0.45rem; justify-items: center; }

.staaf__n {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--inkt-2);
}

.staaf {
  width: 100%;
  height: calc(var(--n) * 1.35rem);
  background: var(--inkt);
}

.staven .leeg .staaf { height: 2px; background: var(--lijn-hard); }
.staven .leeg .staaf__n { color: var(--inkt-3); }

.feitjes {
  display: grid; gap: 1.4rem clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.feit { border-top: 1px solid var(--lijn-hard); padding-top: 0.7rem; }

.feit__getal {
  display: block; font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.028em;
}

.feit__wat {
  display: block; margin-top: 0.5rem; font-size: 0.82rem; line-height: 1.35; color: var(--inkt-2);
}

/* ── het bewijs ─────────────────────────────────────────────────────── */
.bewijs {
  display: grid; gap: clamp(1.8rem, 4vw, 3.4rem);
  grid-template-columns: minmax(0, 1fr); align-items: start;
}

@media (min-width: 52rem) { .bewijs { grid-template-columns: auto minmax(0, 1fr); } }

.meting { display: flex; gap: clamp(1.6rem, 4vw, 2.8rem); }
.meting__blok { border-top: 2px solid var(--inkt); padding-top: 0.85rem; }
.meting__blok + .meting__blok { border-top-color: var(--lijn-hard); }

.meting__getal {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.028em;
  display: block;
}

.meting__blok + .meting__blok .meting__getal { color: var(--inkt-2); }

.meting__wat {
  display: block; margin-top: 0.6rem; max-width: 13ch;
  font-size: 0.86rem; line-height: 1.35; color: var(--inkt-2);
}

/* ── het scherm ─────────────────────────────────────────────────────── */
.scherm { display: grid; gap: clamp(2rem, 5vw, 3.6rem); grid-template-columns: minmax(0, 1fr); align-items: center; }

@media (min-width: 52rem) { .scherm { grid-template-columns: minmax(0, 1fr) 17rem; } }

.scherm__beeld {
  justify-self: center; width: 100%; max-width: 17rem;
  border: 1px solid var(--lijn-hard); border-radius: 14px; overflow: hidden;
  background: var(--vel); box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.55);
}

/* ── prijs ──────────────────────────────────────────────────────────── */
.prijs {
  display: grid; gap: 1.4rem clamp(2rem, 5vw, 3.4rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start;
}

.bedrag {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6.6vw, 3.7rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.03em;
}

.bedrag small {
  display: block; margin-top: 0.7rem;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--inkt-2);
}

/* ── de lijst voor de eerste vijftig ─────────────────────────────────
   Een veld en een knop, verder niets. Dit is geen inschrijfformulier voor
   een nieuwsbrief en het hoort er ook niet als een uit te zien. */
.plek {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin: 1.5rem 0 0; align-items: stretch;
}

.plek__veld {
  flex: 1 1 14rem; min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--lijn-hard); border-radius: 2px;
  background: var(--vel); color: var(--inkt);
  font-family: var(--sans); font-size: 0.98rem;
}

.plek__veld::placeholder { color: var(--inkt-3); }
.plek__veld:focus { outline: none; border-color: var(--inkt); background: var(--papier); }

.plek .knop { flex: 0 0 auto; }
.plek[hidden] { display: none; }
.plek__noot { margin-top: 0.9rem; max-width: 40ch; }

/* ── stappen en lijsten ─────────────────────────────────────────────── */
.stappen { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.stap { border-top: 2px solid var(--inkt); padding-top: 1rem; }
.stap__nr {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  color: var(--inkt-3); display: block; margin-bottom: 0.7rem;
}
.stap h3 { margin-bottom: 0.55rem; }
.stap p { font-size: 0.95rem; color: var(--inkt-2); }

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { padding: 0.85rem 0; border-bottom: 1px solid var(--lijn); display: flex; gap: 0.9rem; align-items: baseline; }
.lijst li:first-child { border-top: 1px solid var(--lijn); }
.lijst__merk {
  flex: 0 0 auto; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--inkt-3); width: 2.4rem;
}

/* ── tijdlijn op de tussenpagina ───────────────────────────────────── */
.tijdlijn {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  counter-reset: stap;
}

.tijdlijn li {
  display: grid;
  gap: 0.3rem clamp(1.2rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.3rem, 3vw, 1.9rem) 0;
  border-top: 1px solid var(--lijn);
}

.tijdlijn li:last-child { border-bottom: 1px solid var(--lijn); }

@media (min-width: 48rem) {
  .tijdlijn li { grid-template-columns: 10rem minmax(0, 42rem); align-items: start; }
  .tijdlijn__wanneer { padding-top: 0.4rem; }
}

.tijdlijn__wanneer {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-3);
}

.tijdlijn h3 { margin-bottom: 0.4rem; }
.tijdlijn p { color: var(--inkt-2); font-size: 0.96rem; }

/* ── tabel ──────────────────────────────────────────────────────────── */
.tabelwikkel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

th, td { text-align: left; padding: 0.72rem 0.9rem 0.72rem 0; border-bottom: 1px solid var(--lijn); white-space: nowrap; }

th {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--inkt-3); border-bottom-color: var(--lijn-hard);
}

td.r, th.r { text-align: right; }

/* Getallen in de sans en niet in de mono: een monospace geeft de
   Nederlandse komma een hele tekenbreedte, en dan leest +18,4% als
   "+18 , 4%". Uitlijnen doet tabular-nums. */
td.getal { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* De redenkolom staat naast een getal dat rechts uitlijnt; zonder deze
   ruimte plakken ze aan elkaar. */
td.reden, thead th:last-child { padding-left: 1.6rem; }
td.reden { white-space: normal; min-width: 20rem; color: var(--inkt-2); font-size: 0.88rem; }
td.tegen { color: var(--tegen); }

/* ── voet ───────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--lijn); padding: 3rem 0 3.6rem; color: var(--inkt-2); font-size: 0.86rem; }

.voet { display: grid; gap: 2rem clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 46rem) { .voet { grid-template-columns: minmax(0, 1fr) auto auto; } }

.voet p { max-width: 46ch; margin-bottom: 0.7rem; }

.voetlijst { display: grid; gap: 0.5rem; align-content: start; }
.voetlijst a { text-decoration: none; color: var(--inkt-2); white-space: nowrap; }
.voetlijst a:hover { color: var(--inkt); }
.voetlijst .merk { margin-bottom: 0.3rem; }

/* ── themaknop ──────────────────────────────────────────────────────── */
.thema {
  border: 1px solid var(--lijn-hard); border-radius: 2px; background: transparent; color: var(--inkt-2);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.36rem 0.6rem; cursor: pointer;
}
.thema:hover { color: var(--inkt); border-color: var(--inkt); }