/* techniek.css: de pagina Techniek (/techniek/): kop met schakelaar en live uitlezing, index, twaalf effectblokken,
   toegankelijkheid, prestatie en afsluiting. Alleen tokens uit tokens.css; eigen maten staan onder main[data-page="techniek"].
   Eindstaat eerst: beginstaten (opacity 0) staan onder ".js:not(.motion-failed):not(.motion-off)" en in "no-preference". */

main[data-page="techniek"] {
  --t-rij: 2.75rem;                                   /* een regel in de index: tikdoel van 44 px */
  --t-index: clamp(13rem, 19vw, 17rem);               /* breedte van de zijbalk-index */
  --fs-eff: clamp(2rem, 1.1rem + 2.9vw, 4rem);        /* effectnaam: onder de h2-maat van de kopschaal, boven de h3 */
  --fs-cijfer: clamp(4.5rem, 2.2rem + 8.4vw, 9.5rem); /* groot nummer van een blok */
  --t-schuif: calc(var(--t-middel) * var(--m));       /* dezelfde duur en ease als de header die wegschuift */
}

/* ---------- Kop ---------- */
.tkop {
  padding-top: calc(var(--header-h) + var(--s-64));
  padding-bottom: var(--s-96);
}
.tkop__grid { row-gap: var(--s-48); align-items: end; }
.tkop__titel { font-size: max(var(--fs-h1), 3.75rem); }
.tkop__lead { max-width: 30ch; margin-top: var(--s-32); }
.tkop__spring {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-32);
  margin: var(--s-24) 0 0;
}
.tkop__spring .link { font-weight: 500; gap: 0.5rem; }
.tkop__proef {
  padding-top: var(--s-24);
  border-top: 2px solid var(--fg);
}
.tkop__proef-titel { margin: 0; }
.tkop__proef-tekst { margin: var(--s-12) 0 var(--s-16); max-width: 40ch; color: var(--fg-dim); }
.tkop__schakelaar { margin-left: calc(var(--s-4) * -1); }
.tkop__zonderjs { margin: 0; max-width: 40ch; color: var(--fg-dim); }
/* Staat in de HTML op hidden en komt alleen in beeld zonder JS of na een fout: dan bestaat de schakelaar niet. */
:is(.no-js, .motion-failed) .tkop__zonderjs[hidden] { display: block !important; }
.tkop__live { margin-top: var(--s-24); visibility: hidden; }          /* de ruimte staat er vanaf de eerste paint, de waarden komen als JS ze kent */
.tkop__live.is-klaar { visibility: visible; }
/* In de HTML staat hij op hidden: zonder JS en na een fout blijft hij weg. Met JS staat de ruimte er vanaf de eerste paint (geen verspringing), zoals bij de schakelaar. */
.js:not(.motion-failed) .tkop__live[hidden] { display: block !important; }
.tkop__live-titel { margin: 0 0 var(--s-8); color: var(--fg-dim); }
.tkop__live-lijst { margin: 0; font-family: var(--f-mono); font-size: var(--fs-mono); }
.tkop__live-lijst > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: var(--s-8);
  border-top: 1px solid var(--lijn-fg);
}
.tkop__live-lijst dt { color: var(--fg-dim); }
.tkop__live-lijst dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Inleiding van de effecten ---------- */
.teff__intro { padding-block: var(--s-64) var(--s-96); }
.teff__titel { max-width: 14ch; }
.teff__lead { max-width: 36ch; margin-top: var(--s-24); }

/* ---------- Index en blokken: een raster met een zijbalk vanaf 1000 px ---------- */
.tlayout { isolation: isolate; }                      /* eigen laag: de index (z-index 1) blijft onder de header (z-index 40) */
@media (min-width: 62.5rem) {
  .tlayout {
    display: grid;
    grid-template-columns: var(--t-index) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }
}

.tindex {
  position: sticky;
  top: calc(var(--header-h) + var(--s-16));
  z-index: 1;
  align-self: start;
  transition: translate var(--t-schuif) var(--ease-out);
}
/* Schuift de header weg (omlaag scrollen), dan schuift de index mee omhoog: dezelfde duur en curve. */
html:has(.site-header.is-hidden:not(:focus-within)) .tindex { translate: 0 calc(var(--header-h) * -1); }
@media (min-width: 62.5rem) {
  .tindex {
    max-height: calc(100svh - var(--header-h) - var(--s-32));
    overflow-y: auto;                                  /* hoger dan het scherm (grote tekst): de lijst scrolt zelf */
    overscroll-behavior: contain;
  }
}
@media (max-height: 38rem) and (min-width: 62.5rem) {
  .tindex { position: static; translate: none; max-height: none; overflow: visible; }    /* te laag om te plakken: de lijst scrolt mee */
}
.tindex__titel { margin: 0 0 var(--s-8); padding-left: 0.875rem; color: var(--fg-dim); }
.tindex__spoor { position: relative; }
.tindex__lijst { margin: 0; padding: 0; list-style: none; }
.tindex__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  min-height: var(--t-rij);
  padding-left: 0.875rem;
  color: var(--fg-dim);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--t-snel) ease;
}
.tindex__nr { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: 0.02em; transition: color var(--t-snel) ease; }
.tindex__link:focus-visible { outline-offset: -3px; color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .tindex__link:hover { color: var(--fg); }
}
.tindex__link[aria-current="location"] { color: var(--fg); }
.tindex__link[aria-current="location"] .tindex__nr { color: var(--accent-lees); }
/* De lijn die langs de actieve regel glijdt: translate en scale op een element van 2 bij 1 px (JS meet de regel). */
.tindex__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 1px;
  background: var(--accent);
  transform-origin: 0 0;
  opacity: 0;
}
.tindex.is-live .tindex__marker {
  opacity: 1;
  transition: translate var(--t-schuif) var(--ease-out), scale var(--t-schuif) var(--ease-out);
}
@media (forced-colors: active) {
  .tindex__marker { forced-color-adjust: none; background: Highlight; }
}
@media (max-width: 40rem) and (max-height: 32rem) {
  .tindex { position: static; translate: none; }          /* 400 procent zoom: de rij scrolt mee, samen met de header (components.css) */
  html:has(.site-header.is-hidden:not(:focus-within)) .tindex { translate: none; }
}

/* Onder 1000 px: een compacte rij die onder de header plakt en naar de actieve pil schuift */
@media (max-width: 62.4375rem) {
  .tindex {
    top: var(--header-h);
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    background-color: var(--bg);
    border-bottom: 1px solid var(--lijn-fg);
  }
  .tindex__titel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tindex__marker { display: none; }
  .tindex__lijst {
    display: flex;
    gap: var(--s-8);
    padding-block: 0.375rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .tindex__lijst > li { flex-shrink: 0; }
  .tindex__link {
    scroll-margin-top: -6rem;                           /* de rij plakt in beeld; de scroll-padding van de pagina (header plus 1rem) liet de browser een pil als te hoog zien en de pagina bij elke focus 10 tot 416 px omhoog scrollen (D13) */
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem;
    border: 1.5px solid var(--fg-dim);
    border-radius: var(--r-bediening);
    white-space: nowrap;
    transition: color var(--t-snel) ease, background-color var(--t-snel) ease, border-color var(--t-snel) ease;
  }
  .tindex__link:focus-visible { outline-offset: 2px; }
  .tindex__link[aria-current="location"] {
    border-color: var(--fg);
    background-color: var(--fg);
    color: var(--bg);
  }
  .tindex__link[aria-current="location"] .tindex__nr { color: inherit; }
  .teffect { scroll-margin-top: 3rem; }                 /* het doel landt onder de plakkende rij */
}

/* ---------- Een effectblok ---------- */
.teffect {
  container-type: inline-size;                          /* de maat van de titel volgt de blokbreedte, zodat geen woord midden in breekt (D04) */
  padding-top: var(--s-24);
  border-top: 1px solid var(--lijn-fg);
}
.teffect + .teffect { margin-top: var(--s-96); }
.teffect--a { --tegel-b: clamp(11rem, 24vw, 17rem); }
.teffect--b { --tegel-b: clamp(8rem, 15vw, 12rem); }
.teffect--c { --tegel-b: min(clamp(13rem, 30vw, 24rem), 36cqw); }   /* de brede tegel laat zijn titel minstens 7,8 em: bij 1000 tot 1100 px (zijindex) paste "Paginaovergang" anders niet */

.teffect__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(9rem, 42%);
  grid-template-areas: "nr nr" "titel titel" "feiten tegel";
  column-gap: var(--s-24);
  align-items: start;
}
.teffect__nr { grid-area: nr; margin: 0; }
.teffect__titel {
  grid-area: titel; margin: var(--s-12) 0 0; line-height: 0.98;
  font-size: min(var(--fs-eff), calc(var(--titel-b, 100cqw) / 7.8));   /* het langste woord ("Paginaovergang") is hooguit circa 7,5 em breed */
}
.teffect__feiten { grid-area: feiten; display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-32); margin: var(--s-24) 0 0; }
.teffect__feiten > div { min-width: 0; max-width: 22rem; }
.teffect__feiten dt {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.teffect__feiten dd { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.35; }
.teffect__tegel { grid-area: tegel; align-self: end; min-width: 0; }
@media (min-width: 43.75rem) {
  .teffect { --titel-b: calc(100cqw - var(--tegel-b) - var(--s-48)); }   /* de kolom naast de tegel */
  .teffect--a .teffect__kop,
  .teffect--c .teffect__kop {
    grid-template-columns: minmax(0, 1fr) var(--tegel-b);
    grid-template-areas: "nr tegel" "titel tegel" "feiten tegel";
    column-gap: var(--s-48);
  }
  .teffect--b .teffect__kop {
    grid-template-columns: var(--tegel-b) minmax(0, 1fr);
    grid-template-areas: "tegel nr" "tegel titel" "tegel feiten";
    column-gap: var(--s-48);
  }
}

.teffect__cijfer-mask { display: block; overflow: clip; overflow-clip-margin: var(--masker-marge); }
.teffect__cijfer {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-cijfer);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--fg-dim);
}

.teffect__body { display: grid; gap: var(--s-48); margin-top: var(--s-48); }
.teffect__body > *,
.tprest__tabellen > *,
.tax__groep > * { min-width: 0; }                      /* een rasterkind mag krimpen: een brede tabel scrolt in zijn eigen kader */
@media (min-width: 43.75rem) {
  .teffect__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-48); }
  .teffect__uit { grid-column: 1 / -1; }
}
.teffect__sub {
  margin: 0 0 var(--s-16);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-wrap: wrap;
}
.teffect__regels > li { max-width: 46ch; font-size: var(--fs-body); line-height: var(--lh-tekst); }
.teffect__regels > li + li { margin-top: var(--s-16); }

/* De waardetabel: termen in tekst, waarden in mono, in een eigen kader dat op smalle schermen zelf scrolt */
.ttabel-kader {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 2px solid var(--fg);
}
.ttabel { width: 100%; border-collapse: collapse; }
.ttabel caption {
  padding: var(--s-12) 0 var(--s-8);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.ttabel thead th {
  padding: var(--s-4) var(--s-16) var(--s-8) 0;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--lijn-fg);
}
.ttabel tbody th,
.ttabel tbody td { padding: 0.625rem var(--s-16) 0.625rem 0; vertical-align: top; text-align: left; }
.ttabel tbody th { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.ttabel tbody td { font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ttabel tbody tr + tr > * { border-top: 1px solid var(--lijn-fg); }
.ttabel tbody th { white-space: nowrap; }
.ttabel-kader:focus-visible { outline-offset: 2px; }

/* Bij Beweging uit: de stand zonder beweging, met een klein schakelaarteken (alleen sier) */
.teffect__uit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4) var(--s-32);
  padding-top: var(--s-16);
  border-top: 1px solid var(--lijn-fg);
}
.teffect__uit-kop { display: inline-flex; align-items: center; gap: 0.625rem; margin: 0; flex: 0 1 auto; min-width: min(12rem, 100%); max-width: 100%; color: var(--fg); }
.teffect__uit-tekst { margin: 0; flex: 1 1 18rem; max-width: 52ch; font-weight: 500; }
.tmini-uit {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1rem;
  border: 1.5px solid var(--fg);
  border-radius: var(--r-bediening);
  background: var(--accent);
}
.tmini-uit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 50%;
  background: var(--inkt);
}
@media (forced-colors: active) {
  .tmini-uit { forced-color-adjust: none; background: Highlight; }
  .tmini-uit::after { background: HighlightText; }
}
/* Staat de beweging uit (schakelaar, systeem of fout), dan is dit de stand die je nu ziet. De tekst staat in de HTML op hidden
   en komt alleen met html.motion-off in beeld, zodat hij nooit als verborgen tekst in de pagina hangt. */
.teffect__nu {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-lees);
}
html.motion-off .teffect__nu[hidden] { display: block !important; }

/* Drie vervolgsecties: een haarlijn op contentbreedte aan de bovenkant, adem erboven en eronder */
.tax,
.tprest,
.tafsluiting { margin-top: var(--sectie); }
.tafsluiting { padding-bottom: var(--sectie); }
:is(.tax, .tprest, .tafsluiting) > .container { position: relative; padding-top: var(--s-64); }
:is(.tax, .tprest, .tafsluiting) > .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--rand);
  right: var(--rand);
  border-top: 1px solid var(--lijn-fg);
}

/* ---------- Toegankelijkheid ---------- */
.tax__titel { max-width: 16ch; }
.tax__lead { max-width: 40ch; margin-top: var(--s-24); }
.tax__groepen { margin-top: var(--s-64); }
.tax__groep {
  display: grid;
  gap: var(--s-24) var(--goot);
  padding-block: var(--s-48);
  border-top: 1px solid var(--lijn-fg);
}
.tax__groep-kop > * { margin: 0; }
.tax__groep-kop p { margin-top: var(--s-8); max-width: 26ch; }
.tax__lijst { margin: 0; }
.tax__item + .tax__item { margin-top: var(--s-32); }
.tax__item dt { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; }
.tax__item dd { max-width: 60ch; margin: var(--s-8) 0 0; }
.tax__waar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-8) 0.5rem;
  margin-top: var(--s-12) !important;
  font-size: var(--fs-klein);
}
.tax__waar-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
@media (min-width: 56.25rem) {
  .tax__groep { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tax__groep-kop { grid-column: 1 / span 4; }
  .tax__lijst { grid-column: 6 / span 7; }
}
main[data-page="techniek"] code {
  display: inline-block;                      /* een term blijft op een regel ("aria-label" brak bij het koppelteken in twee stukken met een geknipt vlak, D17); past hij niet in de regel, dan breekt hij pas binnenin */
  max-width: 100%;
  font-family: var(--f-mono);
  font-size: max(0.8125em, 0.75rem);          /* in .klein (14 px) was dit 11,4 px: minstens 12 px op een telefoon (D36) */
  padding: 0.1em 0.4em;
  border-radius: calc(var(--r-vlak) / 2);
  background: var(--bg-2);
  overflow-wrap: anywhere;
}

/* ---------- Prestatie ---------- */
.tprest__titel { max-width: 14ch; }
.tprest__lead { max-width: 44ch; margin-top: var(--s-24); }
.tprest__tabellen { display: grid; gap: var(--s-64) var(--goot); margin-top: var(--s-64); }
.tprest__tabel .ttabel td.num,
.tprest__tabel .ttabel thead th.num { text-align: right; }
.tprest__tabel .ttabel thead th.num { padding-right: 0; }
.tprest__tabel .ttabel tbody td { padding-left: var(--s-16); padding-right: 0; }
.tprest__tabel .ttabel tbody th { white-space: normal; }
.tprest__tabel .ttabel tbody tr + tr > * { border-top: 0; }               /* binnen een groep geen haarlijn per rij: de groep is de eenheid */
.tprest__tabel .ttabel tbody + tbody > tr:first-child > * { border-top: 1px solid var(--lijn-fg); }
.tprest__tabel .ttabel .ttabel__groep th {
  padding: var(--s-16) 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.tprest__tabel .ttabel .ttabel__som > * { font-weight: 600; }
.tprest__tabel .ttabel .ttabel__som td { font-weight: 500; }
.tprest__tabel .ttabel .ttabel__som > * { padding-top: 0.875rem; }
.tprest__noot { max-width: 62ch; margin: var(--s-12) 0 0; color: var(--fg-dim); }
.tprest__niet { max-width: 62ch; margin-top: var(--s-48); }
@media (min-width: 62.5rem) {
  .tprest__tabellen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-64); align-items: start; }
}

/* ---------- Afsluiting ---------- */
.tafsluiting__titel { max-width: 18ch; }                  /* twee regels vanaf 1024 px (12ch gaf op 1440 drie regels met een korte eerste: "Eén / hoofdmoment / per sectie.", D16) */
.tafsluiting__lead { max-width: 36ch; margin-top: var(--s-24); }
.tafsluiting__acties { display: flex; flex-wrap: wrap; gap: var(--s-16); margin: var(--s-48) 0 0; }
.tafsluiting__bron { max-width: 60ch; margin-top: var(--s-48); }

/* ---------- Beginstaten van de reveals: alleen met JS, met beweging aan en zonder reduce ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .teffect :is(.teffect__cijfer, .teffect__titel, .teffect__feiten, .teffect__tegel, .teffect__body) { opacity: 0; }
}

/* Afdrukken: alles staat in zijn eindstaat, ook als een reveal nog niet is afgespeeld */
@media print {
  .teffect :is(.teffect__cijfer, .teffect__titel, .teffect__feiten, .teffect__tegel, .teffect__body) { opacity: 1 !important; }
  .tindex { display: none; }
}