/* ============================================================
   JURIDISCHE PAGINA'S — gedeelde opmaak.
   Donker, zoals de rest van het merk. De paragraafnummers lopen van
   rood naar paars door het document heen, zodat je aan de kleur ziet
   hoe ver je bent. Leesbaarheid gaat hier voor sier: regelbreedte
   begrensd, tekstgrootte ruim, contrast hoog.
============================================================ */
:root{
  --bg: #0A0A0B;
  --panel: #101114;
  --ink: #F2F2F4;
  --ink-dim: #A6A6AD;
  --ink-faint: #6A6A72;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.20);
  --accent: #E8B13C;
  --accent-rgb: 255,49,49;
  --rood: #FF3131;
  --rood-rgb: 255,49,49;
  --display: 'Archivo','Inter',system-ui,sans-serif;
  --sans: 'Archivo','Inter',system-ui,sans-serif;
  --mono: 'Space Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--rood); text-underline-offset: 3px; }
a:hover{ color: #fff; }
:focus-visible{ outline: 2px solid var(--rood); outline-offset: 3px; }

/* ---- voortgangsrail links, rood naar paars ---- */
.rail{
  position: fixed; left: 0; top: 0; width: 3px; height: 100vh; z-index: 60;
  background: rgba(255,255,255,0.05);
}
.rail i{
  display: block; width: 100%; height: 0;
  background: linear-gradient(180deg, rgb(var(--accent-rgb)), rgb(var(--rood-rgb)));
  box-shadow: 0 0 14px 1px rgba(var(--rood-rgb), .35);
}

/* ---- nav ---- */
.nav{
  position: sticky; top: 0; z-index: 50; background: rgba(10,10,11,0.86);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 20px; gap: 20px;
}
/* Alleen de maat; vorm, vulling en glans staan in /merk.css.
   De verticale padding vervangt de regelhoogte die het merk had toen het nog
   inline stond: zonder dat werd deze kopbalk 58px terwijl de rest van de site
   op 65px zit. Met 6px komt hij op dezelfde 65px uit. */
.mark{
  font-size: 17px; letter-spacing: .08em;
  text-decoration: none; display: inline-block;
  padding: 6px 0;
}
.nav-back{
  position: absolute; right: 20px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  text-decoration: none;
}
.nav-back:hover{ color: var(--ink); }

/* ---- kop van de pagina ---- */
.kop{ max-width: 1120px; margin: 0 auto; padding: 64px 24px 30px; }
.label{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px;
}
.label::before{ content:''; width: 34px; height: 1px; background: var(--accent); }
h1{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
h1 em{ font-style: normal; color: var(--accent); }
.inleiding{ max-width: 70ch; color: var(--ink-dim); font-size: 17px; margin: 0 0 22px; }
.stempel{
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0; margin-top: 10px;
}
.stempel b{ color: var(--ink-dim); font-weight: 400; }

/* ---- taalknop ---- */
.taal{ display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.taal button{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; background: none; border: 0; color: var(--ink-faint); cursor: pointer;
}
.taal button[aria-pressed="true"]{ background: rgba(var(--rood-rgb), .14); color: var(--rood); }

/* ---- indeling met inhoudsopgave ---- */
.blad{
  max-width: 1120px; margin: 0 auto; padding: 10px 24px 90px;
  display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 48px; align-items: start;
}
.toc{ position: sticky; top: 86px; }
.toc-kop{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.toc ol{ list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li{ counter-increment: t; }
.toc a{
  display: flex; gap: 10px; padding: 5px 0; text-decoration: none;
  font-size: 13px; line-height: 1.4; color: var(--ink-faint);
  border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px;
}
.toc a::before{
  content: counter(t, decimal-leading-zero);
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint); flex: none;
}
.toc a:hover{ color: var(--ink); }
.toc a.hier{ color: var(--ink); border-left-color: var(--rood); }
.toc a.hier::before{ color: var(--rood); }

/* ---- paragrafen ---- */
section{ scroll-margin-top: 90px; padding-top: 26px; }
section + section{ border-top: 1px solid var(--line); margin-top: 34px; }
h2{
  font-family: var(--display); font-weight: 900; font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 14px;
}
h2 .nr{
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em;
  color: var(--stap, var(--accent)); flex: none;
}
h3{
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  margin: 26px 0 8px; color: var(--ink);
}
section p, section li{ max-width: 72ch; color: var(--ink-dim); }
section p{ margin: 0 0 14px; }
section ul, section ol{ margin: 0 0 16px; padding-left: 20px; }
section li{ margin-bottom: 8px; }
section li::marker{ color: var(--ink-faint); }
strong{ color: var(--ink); font-weight: 700; }

/* ---- uitgelichte blokken ---- */
.let-op{
  border: 1px solid rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .07);
  padding: 20px 22px; margin: 20px 0; border-radius: 2px;
}
.let-op .kopje{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.let-op .kopje::before{
  content: '!'; display: grid; place-items: center; width: 17px; height: 17px;
  border: 1px solid var(--accent); border-radius: 50%; font-size: 10px; flex: none;
}
.let-op p:last-child, .let-op ul:last-child{ margin-bottom: 0; }
.let-op p, .let-op li{ color: #E9DADA; }

.goed{
  border: 1px solid rgba(var(--rood-rgb), .34);
  background: rgba(var(--rood-rgb), .07);
  padding: 20px 22px; margin: 20px 0; border-radius: 2px;
}
.goed .kopje{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rood); margin-bottom: 10px;
}
.goed p:last-child{ margin-bottom: 0; }
.goed p, .goed li{ color: #DCD6F0; }

/* ---- gegevensblok ---- */
.gegevens{
  display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 0;
  border: 1px solid var(--line); margin: 18px 0; font-size: 14px;
}
.gegevens dt{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); padding: 12px 16px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.gegevens dd{
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.gegevens dt:last-of-type, .gegevens dd:last-of-type{ border-bottom: 0; }
.tevoegen{ color: var(--accent); font-family: var(--mono); font-size: 12px; }

/* ---- voettekst ---- */
.voet{
  border-top: 1px solid var(--line); background: #08080A;
  padding: 44px 24px 56px; text-align: center;
}
.voet-links{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.voet-links a{ color: var(--ink-faint); text-decoration: none; }
.voet-links a:hover{ color: var(--ink); }
.voet-links a[aria-current]{ color: var(--rood); }
.voet-klein{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 2;
}

@media (max-width: 900px){
  .blad{ grid-template-columns: 1fr; gap: 0; padding-bottom: 70px; }
  .toc{ position: static; border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 30px; }
  .toc ol{ columns: 2; column-gap: 22px; }
  .kop{ padding: 44px 20px 24px; }
  .blad{ padding-left: 20px; padding-right: 20px; }
  .gegevens{ grid-template-columns: 1fr; }
  .gegevens dt{ border-right: 0; padding-bottom: 0; border-bottom: 0; }
  body{ font-size: 15px; }
}
@media (max-width: 480px){
  .toc ol{ columns: 1; }
  .nav-back{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .rail i{ transition: none; }
}