/* ==========================================================================
   56 Digital - basis

   Volgorde: fonts, reset, typografie, links, focus, hulpklassen, knoppen,
   sectiecontainer, placeholder, koptekst, navigatie, CTA-blok, voettekst,
   bouwstenen, beweging. Alle waarden komen uit tokens.css.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Zelf gehost, latin-subset, variabele gewichtsas van 100 tot 900. Geen
   enkele externe request. */
@font-face {
  font-family: "Chivo";
  src: url("/assets/fonts/chivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo Mono";
  src: url("/assets/fonts/chivo-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] {
  padding: 0;
  list-style: none;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* De browser zet hier zelf display: none, maar elke display-regel op een
   klasse weegt zwaarder dan die van de browser. Een blok dat het script op
   hidden zet, zou dan alsnog zichtbaar blijven. Vandaar deze regel, en
   vandaar het uitroepteken. */
[hidden] { display: none !important; }

/* --- Basis --------------------------------------------------------------- */
body {
  min-height: 100vh;
  background-color: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: var(--maat-body);
  font-weight: var(--gewicht-normaal);
  line-height: var(--regel-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Typografie ----------------------------------------------------------
   H1 en H2 in Black, H3 en H4 in Bold. Zo staat het in de merkgids. */
h1, h2, h3, h4 {
  font-family: var(--font-tekst);
  letter-spacing: var(--spatie-titel);
  text-wrap: balance;
}

h1 {
  font-size: var(--maat-h1);
  line-height: var(--regel-h1);
  font-weight: var(--gewicht-zwart);
}

h2 {
  font-size: var(--maat-h2);
  line-height: var(--regel-h2);
  font-weight: var(--gewicht-zwart);
}

h3 {
  font-size: var(--maat-h3);
  line-height: var(--regel-h3);
  font-weight: var(--gewicht-vet);
}

h4 {
  font-size: var(--maat-h4);
  line-height: var(--regel-h4);
  font-weight: var(--gewicht-vet);
}

p, li { text-wrap: pretty; }

.lead {
  font-size: var(--maat-lead);
  line-height: var(--regel-lead);
}

.klein {
  font-size: var(--maat-klein);
}

strong { font-weight: var(--gewicht-vet); }

/* Label: mono, kapitalen, ruime letterafstand. Voor rubrieken boven een
   kop, voor data en voor alles wat technisch aanvoelt. */
.label {
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

/* Pil: hetzelfde label, maar omkaderd. */
.pil {
  display: inline-block;
  padding: var(--ruimte-1) var(--ruimte-2);
  border: var(--lijn) solid var(--kleur-lijn);
  border-radius: var(--straal);
}

/* --- Links --------------------------------------------------------------- */
a {
  color: var(--kleur-link);
  text-decoration-thickness: var(--lijn-dun);
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: var(--lijn); }

/* --- Focus: altijd zichtbaar, altijd dezelfde vorm ------------------------ */
:focus-visible {
  outline: var(--lijn-dik) solid var(--kleur-focus);
  outline-offset: 2px;
}

/* --- Hulpklassen ---------------------------------------------------------- */

/* Sectiecontainer: 12 kolommen breed, maximaal 1280 px, buitenmarge
   binnenin. Nooit smaller dan 20 px marge. */
.omhulsel {
  width: 100%;
  max-width: var(--breedte-max);
  margin-inline: auto;
  padding-inline: var(--marge-zij);
}

.sectie { padding-block: var(--ruimte-sectie); }

.sectie--donker {
  background-color: var(--kleur-donker-vlak);
  color: var(--kleur-donker-tekst);
}

.sectie--donker a { color: var(--kleur-donker-tekst); }

.sectie--donker :focus-visible { outline-color: var(--kleur-creme); }

/* Het raster zelf. Op telefoon valt alles terug op een kolom. */
.raster {
  display: grid;
  grid-template-columns: repeat(var(--kolommen), minmax(0, 1fr));
  gap: var(--goot);
}

@media (max-width: 47.9375rem) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .raster > * { grid-column: auto !important; }
}

/* Lopende tekst staat op 7 van de 12 kolommen. */
.smal { max-width: var(--breedte-tekst); }

/* Rij knoppen die netjes afbreekt op smalle schermen. */
.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

/* Verticale stroom. Elk volgend kind krijgt ruimte boven zich, zodat er
   nergens losse margins per element nodig zijn. Dat scheelt inline stijlen,
   en die zijn onder onze Content-Security-Policy toch geblokkeerd. */
.stroom > * + * { margin-top: var(--stroom, var(--ruimte-3)); }

.stroom--krap { --stroom: var(--ruimte-2); }
.stroom--ruim { --stroom: var(--ruimte-4); }

/* Balk: scheidt secties en accentueert koppen. */
.balk {
  display: block;
  width: var(--ruimte-5);
  height: var(--balk);
  background-color: var(--kleur-lijn);
}

.balk--blauw { background-color: var(--kleur-blauw); }

/* Enkel voor schermlezers */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sla de navigatie over, verschijnt bij focus */
.overslaan {
  position: absolute;
  top: var(--ruimte-1);
  left: var(--ruimte-1);
  z-index: 100;
  padding: var(--ruimte-1) var(--ruimte-2);
  background-color: var(--kleur-zwart);
  color: var(--kleur-creme);
  font-family: var(--font-mono);
  font-size: var(--maat-klein);
  text-decoration: none;
  transform: translateY(-200%);
}

.overslaan:focus { transform: translateY(0); }

/* --- Beeldplaatshouder ----------------------------------------------------
   Grijs vlak dat later door een foto vervangen wordt. Bewust lelijk, zodat
   meteen duidelijk is dat er nog iets moet gebeuren. Met de klasse
   .plaatshouder zijn ze in een keer terug te vinden. */
.plaatshouder {
  display: grid;
  place-items: center;
  padding: var(--ruimte-3);
  background-color: var(--kleur-placeholder);
  color: var(--kleur-zwart);
  text-align: center;
}

.plaatshouder > span {
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

.plaatshouder--staand { aspect-ratio: 3 / 4; }
.plaatshouder--liggend { aspect-ratio: 3 / 2; }
.plaatshouder--vierkant { aspect-ratio: 1 / 1; }

/* --- Knoppen --------------------------------------------------------------
   Primair is koraal en wijst uitsluitend naar /offerte-aanvragen. Secundair
   is zwart en doet al de rest. */
.knop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-1);
  /* Zelfde marges als de menuschakelaar, zodat elke knop op de site even
     compact oogt. */
  padding: var(--ruimte-1) var(--ruimte-2);
  border: var(--lijn) solid transparent;
  border-radius: var(--straal);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duur) var(--soepel),
              color var(--duur) var(--soepel),
              border-color var(--duur) var(--soepel);
}

.knop--primair {
  background-color: var(--kleur-knop-primair);
  border-color: var(--kleur-knop-primair);
  color: var(--kleur-knop-primair-tekst);
}

.knop--primair:hover {
  background-color: var(--kleur-zwart);
  border-color: var(--kleur-zwart);
  color: var(--kleur-koraal);
}

.knop--secundair {
  background-color: var(--kleur-knop-secundair);
  border-color: var(--kleur-knop-secundair);
  color: var(--kleur-knop-secundair-tekst);
}

.knop--secundair:hover {
  background-color: transparent;
  color: var(--kleur-zwart);
}

/* Op een donker vlak keert de secundaire knop om. */
.sectie--donker .knop--secundair {
  background-color: transparent;
  border-color: var(--kleur-creme);
  color: var(--kleur-creme);
}

.sectie--donker .knop--secundair:hover {
  background-color: var(--kleur-creme);
  color: var(--kleur-zwart);
}

/* --- Koptekst -------------------------------------------------------------
   Zwart vlak, als tegenhanger van de voettekst. Het merkteken blijft blauw,
   de naam wordt creme. Er is geen onderrand: het kleurverschil met de eerste
   sectie is de scheiding, en die sectie is daarom nooit zwart. */
.kop {
  background-color: var(--kleur-donker-vlak);
  color: var(--kleur-donker-tekst);
}

/* Blauw is te donker voor een focusring op zwart. */
.kop :focus-visible { outline-color: var(--kleur-creme); }

.kop__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-2);
  min-height: var(--kop-hoogte);
  padding-block: var(--ruimte-2);
}

/* Vastgeplakt bovenaan. De header blijft in de gewone doorloop van de pagina
   staan, dus hij schuift nooit over de eerste sectie. De scroll-padding houdt
   elk anker en elk element met focus net onder de header, op elke pagina.

   Op een laag scherm, zoals een gsm die liggend gehouden wordt, plakt hij
   niet: daar zou hij een vijfde van het beeld innemen. Zonder script staat het
   menu onder 1024 px altijd open, dus daar blijft hij ook gewoon bovenaan de
   pagina staan. */
@media (min-height: 30rem) {
  html { scroll-padding-top: var(--kop-hoogte); }

  .kop {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

@media (max-width: 63.9375rem) {
  html:not(.js) { scroll-padding-top: 0; }
  html:not(.js) .kop { position: static; }
}

/* Op een gsm staat het merk op een eigen rij boven de knoppen. Die rij scrollt
   mee weg, alleen de rij met het menu en de offerteknop blijft staan, even
   hoog als de balk op een groot scherm. De verschuiving is precies die eerste
   rij: de bovenmarge plus de regelhoogte van de naam. */
@media (max-width: 47.9375rem) {
  .kop__rechts { flex-basis: 100%; }

  .kop { top: calc(-1 * (var(--ruimte-2) + var(--maat-h4) * var(--regel-body))); }
}

.kop__merk {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-1);
  color: var(--kleur-donker-tekst);
  text-decoration: none;
}

.kop__teken {
  width: auto;
  height: 1.75rem;
  color: var(--kleur-blauw);
}

.kop__naam {
  font-size: var(--maat-h4);
  font-weight: var(--gewicht-zwart);
  letter-spacing: var(--spatie-titel);
}

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

/* De primaire knop wordt bij hover zwart met koraal opschrift. Op een zwarte
   koptekst zou hij dan in het vlak verdwijnen, dus daar krijgt hij een rand. */
.kop .knop--primair:hover { border-color: var(--kleur-koraal); }

/* De primaire knop wordt bij hover zwart met koraal opschrift. Op een zwarte
   koptekst zou hij daardoor in het vlak verdwijnen, dus daar krijgt hij een
   koralen rand en wordt hij een omkaderde knop. */
.kop .knop--primair:hover { border-color: var(--kleur-koraal); }

/* --- Navigatie ------------------------------------------------------------
   Zonder JavaScript staat de lijst gewoon open en blijft de schakelaar
   verborgen. Het script zet de klasse js op <html>; pas dan verschijnt de
   schakelaar op smalle schermen. De offerteknop staat buiten de nav en is
   dus altijd zichtbaar. */
.nav__schakelaar { display: none; }

.nav__lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding-block: var(--ruimte-1);
  border-bottom: var(--lijn) solid transparent;
  color: var(--kleur-donker-tekst);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  text-decoration: none;
}

.nav__link:hover { border-bottom-color: var(--kleur-blauw); }

/* Actieve pagina. Elke pagina zet een data-pagina op <body>, zodat de
   ingesloten header op elke pagina letterlijk hetzelfde kan blijven. */
body[data-pagina="mogelijkheden"] .nav__link[href="/mogelijkheden"],
body[data-pagina="werkwijze"] .nav__link[href="/werkwijze"],
body[data-pagina="hosting"] .nav__link[href="/hosting-en-onderhoud"],
body[data-pagina="over-ons"] .nav__link[href="/over-ons"] {
  border-bottom-color: var(--kleur-creme);
}

.nav__streep {
  display: block;
  width: 1.125rem;
  height: var(--lijn);
  background-color: currentColor;
  box-shadow: 0 -0.375rem 0 currentColor, 0 0.375rem 0 currentColor;
}

/* Inklappen vanaf 1024 px, zoals afgesproken in de tokens. */
@media (max-width: 63.9375rem) {
  .js .nav__schakelaar {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-1);
    padding: var(--ruimte-1) var(--ruimte-2);
    border: var(--lijn) solid var(--kleur-donker-tekst);
    border-radius: var(--straal);
    background-color: transparent;
    font-family: var(--font-mono);
    font-size: var(--maat-label);
    font-weight: var(--gewicht-vet);
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
    cursor: pointer;
  }

  .js .nav__schakelaar[aria-expanded="false"] + .nav { display: none; }

  .nav__lijst {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ruimte-2);
    width: 100%;
    margin-top: var(--ruimte-2);
    padding-top: var(--ruimte-2);
    border-top: var(--lijn) solid var(--kleur-donker-lijn);
  }

  .nav__link { font-size: var(--maat-klein); }

  .kop__rechts {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ruimte-2);
  }

  /* De menuknop en de offerteknop blijven naast elkaar staan, de uitgeklapte
     lijst valt daaronder over de volle breedte. */
  .nav {
    order: 3;
    width: 100%;
  }
}

/* --- CTA-blok -------------------------------------------------------------
   Staat onderaan elke pagina behalve /offerte-aanvragen, /bedankt en de
   juridische pagina. Altijd dezelfde vorm, altijd dezelfde plek, altijd het
   koraal accent. */
/* Geen lijn boven het blok. De sectie ervoor staat altijd op wit of zwart,
   dus het kleurverschil markeert het begin al. */
.cta {
  background-color: var(--kleur-achtergrond);
}

.cta__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  padding-block: var(--ruimte-5);
}

.cta__tekst { max-width: var(--breedte-tekst); }

.cta__titel {
  margin-top: var(--ruimte-1);
  margin-bottom: var(--ruimte-1);
}

.cta__uitleg { color: var(--kleur-tekst-zacht); }

/* --- Voettekst ------------------------------------------------------------ */
.voet {
  background-color: var(--kleur-donker-vlak);
  color: var(--kleur-donker-tekst);
  padding-block: var(--ruimte-5);
}

.voet a {
  color: var(--kleur-donker-tekst);
  text-decoration: none;
  border-bottom: var(--lijn-dun) solid var(--kleur-donker-lijn);
}

.voet a:hover { border-bottom-color: var(--kleur-creme); }

.voet :focus-visible { outline-color: var(--kleur-creme); }

.voet__kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--ruimte-4);
}

.voet__titel {
  margin-bottom: var(--ruimte-2);
  color: var(--kleur-donker-zacht);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

.voet__lijst {
  display: grid;
  gap: var(--ruimte-1);
  font-size: var(--maat-klein);
}

.voet__nummer {
  font-family: var(--font-mono);
  color: var(--kleur-donker-zacht);
}

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  justify-content: space-between;
  margin-top: var(--ruimte-5);
  padding-top: var(--ruimte-2);
  border-top: var(--lijn-dun) solid var(--kleur-donker-lijn);
  color: var(--kleur-donker-zacht);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

/* --- Bouwstenen -----------------------------------------------------------
   Onderdelen die op meerdere pagina terugkomen: kolomspannen op het raster,
   kaarten, genummerde stappen, tariefkaarten, het aandachtsblok en het vlak
   voor wat nog bevestigd moet worden. Alles hoekig, alles op tokens.
   ========================================================================== */

/* Kolomspannen op het 12-koloms raster. Onder 768 px valt alles terug op een
   kolom; dat regelt de media query bij .raster hierboven. */
.kol-3 { grid-column: span 3; }
.kol-4 { grid-column: span 4; }
.kol-5 { grid-column: span 5; }
.kol-6 { grid-column: span 6; }
.kol-7 { grid-column: span 7; }
.kol-8 { grid-column: span 8; }
.kol-12 { grid-column: span 12; }

/* Tussen tablet en laptop is twaalf kolommen te fijn voor vier kaarten naast
   elkaar, dus die gaan naar de helft: twee en twee, netjes even.

   Blokken van vier kolommen blijven daar wel met drie op een rij staan. Een
   drietal mag nooit als twee plus een uiteenvallen: dan lijkt het alsof de
   eerste twee bij elkaar horen en de derde er los bij hangt. Bij de drie
   hostingabonnementen zou dat zelfs een vergelijking suggereren die er niet
   is. Drie naast elkaar of alle drie onder elkaar, daartussen zit niets.
   Onder 768 px valt het raster sowieso terug op een kolom, dus dan staan ze
   alle drie onder elkaar. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .kol-3 { grid-column: span 6; }

  .kol-5,
  .kol-7,
  .kol-8 { grid-column: span 12; }
}

/* --- Tweeluik -------------------------------------------------------------
   Twee blokken naast elkaar op het raster, samen even breed als de kaartenrij
   eronder. Zo staat een sectiekop niet meer als een smalle kolom in een lege
   sectie. Onder 1024 px is een halve kolom te smal voor lopende tekst, dus
   daar gaat alles weer onder elkaar. */
@media (max-width: 63.9375rem) {
  .tweeluik > * { grid-column: span 12; }

  /* Over de volle breedte van een tablet wordt een regel te lang. Lopende
     tekst blijft daar op de zeven kolommen uit de gids; een titel mag wel
     doorlopen. */
  .tweeluik > *:not(h2):not(.kopblok) { max-width: var(--breedte-tekst); }
}

/* Vlakvarianten naast .sectie--donker. Wit licht een sectie op zonder een
   vijfde kleur te introduceren; de lijn scheidt twee cremesecties die anders
   in elkaar overlopen. */
.sectie--wit { background-color: var(--kleur-wit); }
.sectie--lijn { border-top: var(--lijn) solid var(--kleur-lijn); }

/* --- Verderlink -----------------------------------------------------------
   Tekstlink met pijl, voor het pad naar een diepere pagina. Geen knop: die
   vorm blijft voor de offerte en voor de belangrijkste actie per sectie. */
.verder {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-1);
  padding-bottom: 0.25rem;
  border-bottom: var(--lijn) solid var(--kleur-blauw);
  color: var(--kleur-link);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  text-decoration: none;
}

.verder:hover {
  border-bottom-color: var(--kleur-zwart);
  color: var(--kleur-zwart);
}

.verder svg {
  width: 1em;
  height: 1em;
  transition: transform var(--duur) var(--soepel);
}

.verder:hover svg { transform: translateX(0.25rem); }

.sectie--donker .verder {
  border-bottom-color: var(--kleur-donker-lijn);
  color: var(--kleur-donker-tekst);
}

.sectie--donker .verder:hover { border-bottom-color: var(--kleur-creme); }

/* --- Kopblok -------------------------------------------------------------
   Titelkolom van een tweeluik met een korte voetregel eronder. De kolom rekt
   mee met de rij, dus die voetregel landt op de onderkant van de inleiding
   ernaast. Zo staat er geen leeg gat onder een korte titel. */
.kopblok {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ruimte-3);
}

/* --- Held -----------------------------------------------------------------
   De eerste schermvulling. Er is geen beeld, dus het contrast moet van de
   typografie komen: klein mono label, zeer grote titel, rustige lead. */
.held { padding-block: var(--ruimte-5) var(--ruimte-sectie); }

/* Het merkteken staat verticaal in het midden van de tekstkolom ernaast.
   Onder 1024 px staan ze onder elkaar en doet dit niets. */
.held__raster {
  align-items: center;
  row-gap: var(--ruimte-3);
}

/* Onder 1024 px past het teken niet meer naast de tekst. Het is bedoeld als
   tegengewicht naast de titel, niet als blok eronder, dus daar tonen we het
   niet. De hele kolom valt weg, zodat er ook geen lege rij overblijft. Een
   verborgen element komt nooit in beeld, dus de opbouw speelt daar ook niet. */
@media (max-width: 63.9375rem) {
  .held__teken { display: none; }
}

.held__lead { color: var(--kleur-tekst-zacht); }

/* Het teken gebruikt dezelfde waarnemer als de scroll-reveals, maar niet hun
   fade: het verschijnt niet in zijn geheel, het wordt opgebouwd. Op telefoon
   staat het onder de vouw, dus zonder dit zou de opbouw ongezien voorbijgaan.
   Zonder JavaScript staat de klasse js er niet en speelt alles gewoon af bij
   het laden. */
.js .merkteken.onthul {
  opacity: 1;
  transform: none;
}

/* --- Merkteken in de held -------------------------------------------------
   Het teken is een pand van blokjes. Bij het openen van de pagina wordt dat
   pand opgebouwd: de grondlaag eerst, dan laag per laag omhoog, en elk blokje
   zakt van boven op zijn plaats. Het loopt een keer en dan is het klaar, geen
   herhaling.

   De volgorde komt uit twee klassen per blokje. Rij 4 is de grondlaag en
   krijgt volgnummer 0, rij 1 is de nok en gaat als laatste. Dat de deur in de
   twee onderste rijen ontbreekt, geeft daar vanzelf een korte hapering: het
   pand wordt eromheen gemetseld.

   Alle beweging staat in een no-preference-query. Wie beweging heeft uitgezet
   krijgt het teken meteen en volledig te zien, zonder vertraging per blokje. */
.merkteken {
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-inline: auto;
  color: var(--kleur-blauw);
}

@media (prefers-reduced-motion: no-preference) {
  .merkteken__blok {
    --rij: 0;
    --kolom: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: blokje-zakt var(--duur-lang) var(--soepel) both;
    animation-delay: calc((var(--rij) * 5 + var(--kolom)) * 55ms);
  }

  .merkteken .rij-4 { --rij: 0; }
  .merkteken .rij-3 { --rij: 1; }
  .merkteken .rij-2 { --rij: 2; }
  .merkteken .rij-1 { --rij: 3; }

  .merkteken .kolom-1 { --kolom: 0; }
  .merkteken .kolom-2 { --kolom: 1; }
  .merkteken .kolom-3 { --kolom: 2; }
  .merkteken .kolom-4 { --kolom: 3; }
  .merkteken .kolom-5 { --kolom: 4; }
  .js .merkteken.onthul .merkteken__blok { animation-play-state: paused; }
  .js .merkteken.is-zichtbaar .merkteken__blok { animation-play-state: running; }
}

@keyframes blokje-zakt {
  from {
    opacity: 0;
    transform: translateY(-46px) scale(0.82);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Kaart ----------------------------------------------------------------
   Omkaderd blok met een icoon of een accentbalk, een kop en twee regels
   uitleg. De rand kleurt blauw bij hover: dat is het hele hover-detail. */
.kaart {
  padding: var(--ruimte-3);
  border: var(--lijn) solid var(--kleur-lijn);
  transition: border-color var(--duur) var(--soepel);
}

.kaart:hover { border-color: var(--kleur-blauw); }

.kaart__icoon {
  width: 2rem;
  height: 2rem;
  color: var(--kleur-blauw);
}

.kaart__titel { margin-top: var(--ruimte-2); }

/* Staat de titel bovenaan de kaart, dan is er niets om afstand van te
   houden. Dat gebeurt zodra de kaart geen icoon draagt. */
.kaart > .kaart__titel:first-child { margin-top: 0; }

/* Een kaart is nooit breed genoeg voor een titel op h2-maat. Vraagt de
   kopstructuur van de pagina toch om een h2, dan draagt die hier de maat van
   een h3. De rangorde voor een schermlezer verandert daar niet door. */
.kaart > h2 {
  font-size: var(--maat-h3);
  line-height: var(--regel-h3);
  font-weight: var(--gewicht-vet);
}

.kaart__tekst {
  margin-top: var(--ruimte-1);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* Een vinklijst die onder lopende tekst in een kaart staat, hoort daar los
   van te vallen. */
.vinklijst--bij { margin-top: var(--ruimte-3); }

/* Op zwart is blauw te donker voor een rand. Daar wordt de hover creme. */
.sectie--donker .kaart { border-color: var(--kleur-donker-lijn); }
.sectie--donker .kaart:hover { border-color: var(--kleur-creme); }
.sectie--donker .kaart__tekst { color: var(--kleur-donker-zacht); }

/* --- Stap -----------------------------------------------------------------
   Genummerde stap uit de werkwijze. Geen kader, wel een dikke lijn boven:
   samen vormen vier stappen een liniaal over de volle breedte. */
.stap { border-top: var(--lijn-dik) solid var(--kleur-lijn); }

.stap__nummer {
  display: block;
  margin-top: var(--ruimte-2);
  color: var(--kleur-blauw);
  font-family: var(--font-mono);
  font-size: var(--maat-h3);
  font-weight: var(--gewicht-zwart);
  line-height: 1;
}

.stap__titel { margin-top: var(--ruimte-2); }

.stap__tekst {
  margin-top: var(--ruimte-1);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* Dezelfde stap, maar als volle rij. Op /werkwijze staat er meer uitleg bij
   dan op de startpagina, en dan zijn vier smalle kolommen naast elkaar te
   krap. Het nummer en de titel staan links, de uitleg rechts. De klasse
   tweeluik zet ze onder 1024 px onder elkaar, want een halve kolom is daar te
   smal voor lopende tekst. */
.stap--rij {
  padding-top: var(--ruimte-3);
  row-gap: var(--ruimte-2);
}

.stap--rij .stap__nummer { margin-top: 0; }

/* --- Vinklijst ------------------------------------------------------------
   Opsomming met een hoekig vinkje ervoor: wat er in een formule zit, wat je
   met je uren kan doen. Het vinkje is een inline SVG in de HTML en draagt
   aria-hidden, want de regel ernaast zegt het al. */
.vinklijst {
  display: grid;
  gap: var(--ruimte-2);
  font-size: var(--maat-klein);
  line-height: var(--regel-h4);
}

.vinklijst li {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-2);
}

.vinklijst svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3em;
  color: var(--kleur-blauw);
}

/* Blauw is te donker voor een zwart vlak. Daar wordt het vinkje creme. */
.sectie--donker .vinklijst svg { color: var(--kleur-creme); }

/* --- Kenmerken ------------------------------------------------------------
   Rijen met een omschrijving links en een waarde rechts, gescheiden door een
   dunne lijn. Staat in de tariefkaarten en in het blok voor bestaande
   klanten. In de HTML is het een dl met een div per rij; die div mag daar
   staan en houdt dt en dd op een regel. */
.kenmerken { border-top: var(--lijn-dun) solid var(--kleur-lijn-zacht); }

.kenmerk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ruimte-1) var(--ruimte-2);
  padding-block: var(--ruimte-1);
  border-bottom: var(--lijn-dun) solid var(--kleur-lijn-zacht);
  font-size: var(--maat-klein);
}

.kenmerk__wat { color: var(--kleur-tekst-zacht); }

.kenmerk__waarde {
  font-family: var(--font-mono);
  font-weight: var(--gewicht-vet);
  text-align: right;
}

.sectie--donker .kenmerken { border-top-color: var(--kleur-donker-lijn); }
.sectie--donker .kenmerk { border-bottom-color: var(--kleur-donker-lijn); }
.sectie--donker .kenmerk__wat { color: var(--kleur-donker-zacht); }

/* --- Kengetal -------------------------------------------------------------
   Een getal dat de pagina in een keer beantwoordt, in een dik kader naast de
   titel. Op /werkwijze staat de doorlooptijd erin: dat is de vraag waarmee
   bezoekers op die pagina komen, en dan hoort het antwoord boven de vouw en
   niet ergens halverwege. */
.kengetal {
  padding: var(--ruimte-3);
  border: var(--lijn-dik) solid var(--kleur-lijn);
}

.kengetal__waarde {
  margin-top: var(--ruimte-2);
  font-family: var(--font-mono);
  font-size: var(--maat-h2);
  font-weight: var(--gewicht-zwart);
  line-height: var(--regel-h2);
  letter-spacing: var(--spatie-titel);
}

.kengetal__voor {
  display: block;
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-tekst);
  font-size: var(--maat-h4);
  font-weight: var(--gewicht-normaal);
}

.kengetal__bij {
  margin-top: var(--ruimte-2);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* --- Tariefkaart ----------------------------------------------------------
   Naam en prijs, meer niet: de vergelijking staat op /hosting-en-onderhoud.
   De uitgelichte kaart krijgt een dikkere rand en een zwarte vlag. Koraal
   blijft voorbehouden aan de offerte. */
.tarief {
  display: flex;
  flex-direction: column;
  /* Wit op de creme sectie eronder. Dat is het enige vlak op de pagina dat
     zichzelf zo losmaakt van de achtergrond, en dat is de bedoeling: hier
     wordt vergeleken en gekozen. Zet een rij tariefkaarten dus niet op
     .sectie--wit, want dan verdwijnt precies dat verschil en blijft alleen
     de rand over. */
  background-color: var(--kleur-wit);
  border: var(--lijn) solid var(--kleur-lijn);
}

.tarief--uitgelicht { border-width: var(--lijn-dik); }

.tarief__vlag {
  padding: var(--ruimte-1) var(--ruimte-2);
  background-color: var(--kleur-zwart);
  color: var(--kleur-creme);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

.tarief__binnen { padding: var(--ruimte-3); }

.tarief__naam {
  font-size: var(--maat-h3);
  line-height: var(--regel-h3);
}

.tarief__prijs {
  margin-top: var(--ruimte-2);
  font-family: var(--font-mono);
  font-size: var(--maat-h2);
  font-weight: var(--gewicht-zwart);
  line-height: var(--regel-h2);
  letter-spacing: var(--spatie-titel);
}

.tarief__per {
  display: block;
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

/* Op /hosting-en-onderhoud dragen de kaarten meer dan een naam en een prijs:
   daar staat ook in wat er in de formule zit. Op de startpagina blijft het bij
   het paar naam en prijs, dus deze regels doen daar niets. */
.tarief__voor {
  margin-top: var(--ruimte-1);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

.tarief .vinklijst,
.tarief .kenmerken { margin-top: var(--ruimte-3); }

/* Onder 1024 px staan de drie tariefkaarten nog altijd naast elkaar, en dan
   is een kaart te smal voor een omschrijving links en een waarde rechts: de
   regel breekt dan halfweg af en de waarde blijft alleen rechts hangen. Daar
   zet de waarde zich onder de omschrijving, links uitgelijnd. Het blok met de
   reactietijden staat niet in een tariefkaart en houdt dus overal zijn twee
   kolommen. */
@media (max-width: 63.9375rem) {
  .tarief .kenmerk {
    flex-direction: column;
    gap: 0;
  }

  .tarief .kenmerk__waarde { text-align: left; }
}

/* --- Tarievenrij ----------------------------------------------------------
   De drie hostingformules naast elkaar. Ze staan niet in het gewone raster
   maar in een eigen grid, want hier moet je kunnen vergelijken: de naam, de
   prijs, de vinkjes en elk kenmerk horen in alle drie de kaarten op dezelfde
   hoogte te staan. Staat de reactietijd van de ene kaart naast de extra uren
   van de andere, dan vergelijk je niets meer, dan lees je drie losse lijstjes.

   Dat regelt subgrid. De rijen liggen hier een keer vast en elke kaart neemt
   ze over in plaats van er zelf te verzinnen; de hoogste cel van een rij
   bepaalt de hoogte voor alle drie. De vlag Aanrader krijgt zo ook een
   eigen rij: bij de twee kaarten zonder vlag blijft die leeg, zodat de drie
   namen alsnog op een lijn staan in plaats van dat de middelste een stuk
   lager begint.

   Het aantal rijen hieronder telt de onderdelen van een kaart: vlag, naam,
   voor wie, prijs, twee vinkjes, drie kenmerken. Zet je er een vinkje of een
   kenmerk bij, dan moet dat getal mee omhoog, anders maakt de browser voor
   dat ene extra onderdeel een rij bij en loopt precies die uitlijning stuk.

   Omdat elke rij zijn eigen spoor is, staat de rijafstand op nul en komt alle
   verticale ruimte uit de marges van de onderdelen zelf. Zet hier dus geen
   row-gap terug: die zou tussen elke rij gaan zitten, ook tussen de naam en
   de regel eronder.

   Kent de browser geen subgrid, dan blijft elke kaart de gewone kolom uit
   .tarief hierboven. De drie staan dan nog altijd naast elkaar, alleen niet
   uitgelijnd. Onder 768 px staan ze onder elkaar en valt er niets uit te
   lijnen, dus daar doet dit hele blok niets.
   ========================================================================== */
.tarieven {
  display: grid;
  gap: var(--goot);
}

@media (min-width: 48rem) {
  .tarieven {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 48rem) {
    .tarieven { grid-template-rows: repeat(9, auto); }

    .tarieven > .tarief {
      display: grid;
      grid-row: span 9;
      grid-template-rows: subgrid;
    }

    /* Allebei expliciet geplaatst. Een kaart zonder vlag zou anders met haar
       inhoud in de vlagrij beginnen, en dan schuift ze een rij omhoog ten
       opzichte van de kaart die wel een vlag draagt. */
    .tarieven .tarief__vlag { grid-row: 1; }

    .tarieven .tarief__binnen {
      display: grid;
      grid-row: 2 / span 8;
      grid-template-rows: subgrid;
    }

    /* De twee lijsten geven hun rijen door aan dezelfde sporen, zodat ook het
       tweede vinkje en de derde kenmerkregel over de drie kaarten heen op een
       lijn staan. Hun eigen rijafstand gaat daarvoor op nul: bij de vinkjes
       komt de tussenruimte uit een marge, bij de kenmerken uit de vulling en
       de lijn die elke regel al heeft. */
    .tarieven .vinklijst {
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .tarieven .vinklijst li + li { margin-top: var(--ruimte-2); }

    .tarieven .kenmerken {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* --- Prijsschakelaar ------------------------------------------------------
   Maandelijks of jaarlijks, zonder een regel JavaScript. Twee radioknoppen
   staan onzichtbaar bovenaan het blok; wat je ziet zijn de twee labels
   eronder. Staat de ene aan, dan vallen de prijzen van de andere weg met een
   broer-selector. De prijzen zijn de kern van deze pagina en horen dus niet
   van een script af te hangen: met JavaScript uit werkt de schakelaar
   precies hetzelfde.

   Daarvoor moeten die twee radioknoppen in de HTML voor de kaarten staan en
   er een broer van zijn. Verplaats ze dus niet, en zet ze niet in een
   fieldset: dan reikt de selector er niet meer overheen. Ze dragen elk een
   aria-label dat het zichtbare opschrift volledig bevat, zodat ze ook zonder
   omkadering te begrijpen zijn.

   De prijzen zelf staan allebei in de kaart, elk in een eigen span. Dat is
   bewust: het bedrag per jaar is dan gewoon tekst in de HTML en geen som die
   ergens gemaakt moet worden. */
.prijzen {
  display: grid;
  gap: var(--ruimte-4);
}

.periode__knoppen {
  display: inline-flex;
  flex-wrap: wrap;
  margin-top: var(--ruimte-2);
  border: var(--lijn) solid var(--kleur-lijn);
}

.periode__knop {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ruimte-1);
  padding: var(--ruimte-1) var(--ruimte-2);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duur) var(--soepel),
              color var(--duur) var(--soepel);
}

.periode__knop + .periode__knop { border-left: var(--lijn) solid var(--kleur-lijn); }

.periode__knop:hover { color: var(--kleur-link); }

.periode__winst { color: var(--kleur-blauw); }

/* De aangevinkte kant wordt zwart. Deze regels wegen zwaarder dan de hover
   hierboven, dus de knop die al aan staat verandert niet meer onder de muis. */
.periode__vak[value="maand"]:checked ~ .periode .periode__knop--maand,
.periode__vak[value="jaar"]:checked ~ .periode .periode__knop--jaar {
  background-color: var(--kleur-zwart);
  color: var(--kleur-creme);
}

.periode__vak[value="jaar"]:checked ~ .periode .periode__knop--jaar .periode__winst {
  color: var(--kleur-creme);
}

/* De radioknop zelf is onzichtbaar, dus de focusring hoort op zijn label. */
.periode__vak[value="maand"]:focus-visible ~ .periode .periode__knop--maand,
.periode__vak[value="jaar"]:focus-visible ~ .periode .periode__knop--jaar {
  outline: var(--lijn-dik) solid var(--kleur-focus);
  outline-offset: 2px;
}

/* Onder 576 px passen de twee opschriften niet meer naast elkaar en breekt
   de rij af. Dan stapelen ze over de volle breedte en verhuist de
   scheidingslijn van links naar boven, zodat het een schakelaar blijft in
   plaats van twee losse knoppen te worden. */
@media (max-width: 35.9375rem) {
  .periode__knoppen {
    display: flex;
    flex-direction: column;
  }

  .periode__knop + .periode__knop {
    border-left: 0;
    border-top: var(--lijn) solid var(--kleur-lijn);
  }
}

.prijs { display: block; }
/* Bij de jaarprijs staat er een doorstreept bedrag boven: wat dezelfde
   formule kost als je twaalf keer de maandprijs betaalt. Het verschil met de
   prijs eronder is precies de twee maanden die de schakelaar belooft, en zo
   hoeft niemand dat zelf uit te rekenen. De bedragen staan voluit in de HTML
   en worden nergens berekend; verandert een maandprijs, dan verander je ze
   allebei. Voor wie de streep niet ziet staat er een verborgen In plaats van
   voor. */
.prijs__was {
  display: block;
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
  font-weight: var(--gewicht-normaal);
  line-height: var(--regel-label);
  letter-spacing: 0;
  text-decoration-thickness: var(--lijn-dun);
}


.periode__vak[value="maand"]:checked ~ * .prijs--jaar,
.periode__vak[value="jaar"]:checked ~ * .prijs--maand { display: none; }

/* --- Aandachtsblok --------------------------------------------------------
   Korte mededeling die uit de lopende tekst moet springen zonder een kader
   te worden. Een dikke blauwe balk links volstaat. */
.notitie {
  padding: var(--ruimte-3);
  padding-left: var(--ruimte-4);
  border-left: var(--balk-dik) solid var(--kleur-blauw);
  background-color: rgb(var(--rgb-zwart) / 0.04);
}

.notitie__knipoog {
  margin-top: var(--ruimte-2);
  font-family: var(--font-mono);
  font-size: var(--maat-klein);
}

/* --- Oprichter ------------------------------------------------------------
   Portret met de naam eronder. Zolang er geen foto is, staat er een
   plaatshouder in dezelfde verhouding. */
.oprichter { margin: 0; }

.oprichter__foto {
  display: block;
  width: 100%;
  height: auto;
  align-self: start;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.oprichter figcaption {
  margin-top: var(--ruimte-2);
  font-size: var(--maat-h3);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-h3);
  letter-spacing: var(--spatie-titel);
}

/* --- Nog te bevestigen ----------------------------------------------------
   Zelfde bedoeling als .plaatshouder: het moet meteen opvallen dat hier nog
   een echte waarde hoort. Bij elk vlak staat een TE BEVESTIGEN-commentaar in
   de HTML, zodat ze in een keer terug te vinden zijn. */
.tebevestigen {
  display: inline-block;
  padding: 0 var(--ruimte-1);
  background-color: var(--kleur-placeholder);
  color: var(--kleur-zwart);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

/* --- Raster op het midden -------------------------------------------------
   Staat er naast een tekstkolom een afgebakend blok, dan hoort dat blok
   verticaal in het midden van de kolom ernaast. Bovenaan uitgelijnd laat het
   onder zich een gat vallen dat nergens naar verwijst. */
.raster--midden { align-items: center; }

/* --- Vervolg op de sectiekop ----------------------------------------------
   In een sectiekop staat de inleiding rechts naast de titel, en de lopende
   tekst staat in het blok daaronder. Op een breed scherm zijn dat twee
   blokken naast elkaar, dus daar hoort de blokafstand van 40 px tussen.

   Onder 1024 px valt het tweeluik uiteen en komen ze onder elkaar te staan.
   Dan is die inleiding gewoon de eerste alinea van een doorlopende kolom, en
   springt die 40 px eruit: de afstand tot de tweede alinea wordt groter dan
   die tussen de tweede en de derde. Vandaar deze klasse op het tekstblok dat
   de inleiding voortzet. Alinea's die bij elkaar horen, staan 16 px uit
   elkaar; 40 px is voor blokken die uit elkaar moeten vallen.

   Zet hem niet op een rij kaarten onder een sectiekop: die horen wel degelijk
   los te vallen van de inleiding erboven. */
@media (max-width: 63.9375rem) {
  .stroom > .raster--vervolg { margin-top: var(--ruimte-2); }
}

/* Het aandachtsblok leunt op een lichte vulling. Op zwart is die onzichtbaar,
   dus daar keert hij om. */
.sectie--donker .notitie { background-color: rgb(var(--rgb-creme) / 0.06); }

/* --- Wegwijzer ------------------------------------------------------------
   Genummerde inhoudsopgave van de rubrieken, in de held van /mogelijkheden.
   Ze staat op de plek waar de startpagina het merkteken zet, maar blijft wel
   staan op een smal scherm: dit is navigatie, geen versiering. */
.wegwijzer__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--lijn) solid var(--kleur-lijn);
}

.wegwijzer__link {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-2);
  padding-block: var(--ruimte-1);
  border-top: var(--lijn) solid var(--kleur-lijn);
  color: var(--kleur-tekst);
  font-weight: var(--gewicht-vet);
  text-decoration: none;
  transition: color var(--duur) var(--soepel);
}

.wegwijzer__link:hover { color: var(--kleur-link); }

.wegwijzer__nummer {
  flex: none;
  color: var(--kleur-blauw);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
}

.wegwijzer__pijl {
  width: 1em;
  height: 1em;
  margin-left: auto;
  transition: transform var(--duur) var(--soepel);
}

.wegwijzer__link:hover .wegwijzer__pijl { transform: translateX(0.25rem); }

/* --- Cursor-demo ----------------------------------------------------------
   Drie vlakken, elk met een eigen muisaanwijzer. Het is het enige stuk van de
   site dat zonder JavaScript niet bestaat, en dat is met opzet: een demo van
   een muisaanwijzer heeft geen betekenis zonder muis. Het blok staat dus
   verborgen tot assets/js/cursor-demo.js vaststelt dat er echt een muis is
   (hover en fine pointer) en dat beweging aan mag staan. Op een tablet, op een
   telefoon en onder prefers-reduced-motion verdwijnt het geheel, inclusief de
   regel eronder. De uitleg in de rubriek zelf staat er los van en blijft dus
   altijd overeind.

   Bij die muisvoorwaarde hoort ook een breedtevoorwaarde. Drie vlakken naast
   elkaar hebben ruimte nodig; onder 1024 px, dezelfde grens waarop de rest van
   de pagina naar de smalle opmaak gaat, vallen ze onder elkaar en is het geen
   demonstratie meer maar een stapel van drie hoge vlakken. Een venster op
   gsm-formaat op een pc heeft wel een muis, maar geen plek, en hoort de demo
   dus evenmin te tonen. Die breedte staat bewust hier in de CSS en niet in het
   script, zodat ze meteen meegaat als je je venster versmalt of je toestel
   draait.

   De aanwijzers zijn puntelementen zonder afmeting: JavaScript zet alleen hun
   transform, de vorm eromheen komt uit de CSS hieronder. Zo blijft de
   Content-Security-Policy heel, want een style-attribuut in de HTML zou
   geblokkeerd worden en een transform via de CSSOM niet. */
.demo { display: none; }

@media (min-width: 64rem) {
  .demo.is-actief { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .demo.is-actief { display: none; }
}

.demo__vlak {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--ruimte-2);
  border: var(--lijn) solid var(--kleur-lijn);
  overflow: hidden;
  cursor: none;
}

.demo__vlak--zwart {
  background-color: var(--kleur-zwart);
  color: var(--kleur-creme);
}

.demo__vlak--blauw {
  background-color: var(--kleur-blauw);
  border-color: var(--kleur-blauw);
  color: var(--kleur-creme);
}

.demo__vlak--kader { background-color: var(--kleur-creme); }

.demo__naam {
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

.demo__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duur-kort) var(--soepel);
}

.demo__cursor.is-binnen { opacity: 1; }

/* Elke vorm hangt aan dat punt en gaat er met zijn eigen transform omheen
   staan. Bij het binnenkomen groeit hij open. */
.demo__blok,
.demo__kruis,
.demo__ruit {
  position: absolute;
  transition: transform var(--duur) var(--soepel);
}

.demo__blok {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--kleur-creme);
  transform: translate(-50%, -50%) scale(0.2);
}

.is-binnen .demo__blok { transform: translate(-50%, -50%) scale(1); }

.demo__kruis {
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%) scale(0.2);
}

.is-binnen .demo__kruis { transform: translate(-50%, -50%) scale(1); }

.demo__kruis::before,
.demo__kruis::after {
  content: "";
  position: absolute;
  background-color: var(--kleur-creme);
}

.demo__kruis::before {
  top: 0;
  left: 50%;
  width: var(--lijn);
  height: 100%;
  margin-left: calc(var(--lijn) / -2);
}

.demo__kruis::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--lijn);
  margin-top: calc(var(--lijn) / -2);
}

.demo__etiket {
  position: absolute;
  top: 0.5rem;
  left: 1.75rem;
  padding: 0.125rem var(--ruimte-1);
  background-color: var(--kleur-creme);
  color: var(--kleur-zwart);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.demo__ruit {
  width: 2.5rem;
  height: 2.5rem;
  border: var(--lijn) solid var(--kleur-zwart);
  transform: translate(-50%, -50%) rotate(45deg) scale(0.2);
}

.is-binnen .demo__ruit { transform: translate(-50%, -50%) rotate(45deg) scale(1); }

.demo__uitleg { color: var(--kleur-tekst-zacht); }

/* --- In de plaats van de demo ---------------------------------------------
   Precies het spiegelbeeld van de twee voorwaarden hierboven. De demo vraagt
   een muis en minstens 1024 px; deze regel verschijnt zodra een van die twee
   ontbreekt, dus op een gsm, op een tablet en in een smal venster. Zo blijft
   er nooit een zin staan die verwijst naar drie vlakken die je niet ziet, en
   weet wie op een klein scherm kijkt tenminste wat er te zien valt en waar.

   Op een breed scherm met een muis blijft ze weg, ook als de demo daar toch
   niet speelt omdat JavaScript uit staat of omdat de bezoeker beweging heeft
   uitgezet. Zo iemand zit al aan een computer, dus hem daarheen sturen zou
   nergens op slaan. Dan staat er gewoon niets, en dat is prima: de rubriek
   legt zichzelf uit. */
.demo-verwijzing {
  display: none;
  padding-top: var(--ruimte-2);
  border-top: var(--lijn) solid var(--kleur-lijn);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

@media (max-width: 63.9375rem) {
  .demo-verwijzing { display: block; }
}

@media (hover: none), (pointer: coarse) {
  .demo-verwijzing { display: block; }
}

/* --- Wensenlijst ----------------------------------------------------------
   De aanvinkbare lijst onderaan /mogelijkheden. Dezelfde vakjes komen terug in
   het offerteformulier, waar ze aangevinkt klaarstaan; de selectie reist mee
   via sessionStorage, niet via het adres in de browser. De opmaak hoort daarom
   hier in base.css en niet in een los paginabestand. */
.wensgroep {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wensgroep__titel {
  padding: 0;
  margin-bottom: var(--ruimte-1);
}

.wensgroep__lijst { border-bottom: var(--lijn-dun) solid var(--kleur-lijn-zacht); }

.wens {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-2);
  padding-block: var(--ruimte-2);
  border-top: var(--lijn-dun) solid var(--kleur-lijn-zacht);
  font-size: var(--maat-klein);
  line-height: var(--regel-h4);
  cursor: pointer;
}

/* Het vakje is een gewone checkbox zonder systeemopmaak: een hoekig kader dat
   blauw vult met een creme vinkje. De focusring blijft de native, dus wie met
   het toetsenbord werkt ziet exact hetzelfde als overal elders op de site. */
.wens__vak {
  flex: none;
  display: grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: var(--lijn) solid var(--kleur-lijn);
  border-radius: var(--straal);
  background-color: var(--kleur-wit);
  cursor: pointer;
  transition: background-color var(--duur-kort) var(--soepel),
              border-color var(--duur-kort) var(--soepel);
}

.wens:hover .wens__vak { border-color: var(--kleur-blauw); }

.wens__vak:checked {
  background-color: var(--kleur-blauw);
  border-color: var(--kleur-blauw);
}

.wens__vak::after {
  content: "";
  width: 0.3rem;
  height: 0.6rem;
  border-right: var(--lijn) solid var(--kleur-creme);
  border-bottom: var(--lijn) solid var(--kleur-creme);
  transform: translateY(-0.1rem) rotate(45deg);
  opacity: 0;
}

.wens__vak:checked::after { opacity: 1; }

/* Het vrije veld staat als laatste blok mee in hetzelfde raster, onder de
   groepen en over de volle breedte. De groepen zelf staan op zes kolommen en
   dus twee bij twee; een aparte media query voor tablet is daardoor niet meer
   nodig, want zes kolommen blijven zes kolommen tot het raster onder 768 px
   terugvalt op een enkele kolom. */
.wensvrij .veld { margin-top: var(--ruimte-1); }

/* --- Formuliervelden ------------------------------------------------------
   Ook deze komen terug op /offerte-aanvragen. */
.veld__label {
  display: block;
  margin-bottom: var(--ruimte-1);
  font-weight: var(--gewicht-vet);
}

.veld {
  display: block;
  width: 100%;
  padding: var(--ruimte-2);
  border: var(--lijn) solid var(--kleur-lijn);
  border-radius: var(--straal);
  background-color: var(--kleur-wit);
  font-family: var(--font-tekst);
  font-size: var(--maat-klein);
  line-height: var(--regel-body);
  resize: vertical;
}

.veld:hover { border-color: var(--kleur-blauw); }

.wens__teller {
  align-self: center;
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

/* Zonder JavaScript blijft de teller leeg. Een lege flexcel zou dan toch een
   goot innemen, dus die halen we weg. */
.wens__teller:empty { display: none; }

.wens__uitleg {
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* --- Het offerteformulier -------------------------------------------------
   Alles wat alleen op /offerte-aanvragen staat. Het formulier is het
   conversiepunt van de site, dus het krijgt de rust van een eigen kolom in
   plaats van de volle paginabreedte, en elk blok wordt van het vorige
   gescheiden door een harde lijn.

   Koraal komt hier maar op een plek voor: de verzendknop. Foutmeldingen
   zijn dus zwart. Dat is geen compromis maar een noodzaak, want koraal
   tekst op creme haalt de contrastnorm niet; alleen als vlak met zwarte
   letters erop doet het dat wel, en die vorm is van de knop. Een fout valt
   hier op door een dikkere rand en een zwart vlak met creme letters, niet
   door een kleur. */
.formulier {
  max-width: var(--breedte-formulier);
}

/* Ruimte tussen de blokken. Het foutoverzicht en het verborgen form-name-veld
   staan er ook tussen. Die nemen geen plek in, maar met een gewone
   broer-selector zouden ze wel een marge doorgeven en viel er een gat boven
   het eerste blok dat je wel ziet. Vandaar de algemene broer-selector: alles
   na het eerste blok krijgt ruimte, het eerste blok zelf niet. */
.formulier > .formblok ~ * { margin-top: var(--ruimte-5); }

.formblok {
  padding-top: var(--ruimte-3);
  border-top: var(--lijn) solid var(--kleur-lijn);
}

.formblok > * + * { margin-top: var(--ruimte-3); }

/* De uitleg hoort bij de titel erboven en staat daarom dichter tegen die
   titel aan dan tegen de velden eronder. */
.formblok > .formblok__uitleg {
  max-width: var(--breedte-tekst);
  margin-top: var(--ruimte-1);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* Twee velden naast elkaar. Onder 768 px onder elkaar, net als het raster. */
.formrij {
  display: grid;
  gap: var(--ruimte-3);
}

@media (min-width: 48rem) {
  .formrij {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Werkt zowel op een div als op een fieldset: die laatste brengt zijn eigen
   rand, vulling en zijmarges mee en die willen we hier geen van drie. De
   marge bovenaan blijft wel vrij, want die komt van de flow van .formblok
   hierboven; zou hier margin: 0 staan, dan won die van de flow en plakte elk
   veld tegen de titel erboven. */
.veldgroep {
  min-width: 0;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

.veldgroep > * + * { margin-top: var(--ruimte-1); }

/* Het label draagt zijn afstand al in de vorm van de marge hierboven. */
.veldgroep > .veld__label { margin-bottom: 0; }

.veld__nodig {
  margin-left: var(--ruimte-1);
  color: var(--kleur-tekst-zacht);
  font-weight: var(--gewicht-normaal);
}

.veld__hulp {
  max-width: var(--breedte-tekst);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* De foutmelding: zwart vlak, creme letters. Onmiskenbaar, en het blijft
   binnen de vier huisstijlkleuren. */
.veld__fout {
  padding: var(--ruimte-1) var(--ruimte-2);
  background-color: var(--kleur-zwart);
  color: var(--kleur-creme);
  font-size: var(--maat-klein);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-h4);
}

.veldgroep--fout .veld { border-width: var(--lijn-dik); }

/* De keuzelijst krijgt hetzelfde hoekige pijltje als het vinkje in de
   wensenlijst: twee randen op een gedraaid vierkantje. Een pijl als
   achtergrondafbeelding zou een hexwaarde in de CSS vragen, en die horen
   uitsluitend in tokens.css. */
.keuzelijst {
  position: relative;
  display: block;
}

.keuzelijst::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--ruimte-2);
  width: 0.5rem;
  height: 0.5rem;
  border-right: var(--lijn) solid var(--kleur-zwart);
  border-bottom: var(--lijn) solid var(--kleur-zwart);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.veld--keuzelijst {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--ruimte-4);
}

/* --- De twee keuzeblokken -------------------------------------------------
   Offerte of eerst een gesprek. Twee gelijkwaardige blokken, dus ook twee
   even brede kolommen: de ene mag niet groter ogen dan de andere.

   De aangevinkte kant valt op door een zwarte rand op een wit vlak, niet
   door een dikkere rand: dat laatste zou het blok bij elke klik een paar
   pixels laten verspringen. De :has-selector doet dat werk. Kent een browser
   die niet, dan blijft het vierkantje in het blok wel gewoon blauw invullen,
   en dat is de eigenlijke aanduiding. */
.keuze {
  display: grid;
  gap: var(--ruimte-2);
}

@media (min-width: 48rem) {
  .keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.keuzeblok {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3);
  border: var(--lijn) solid var(--kleur-lijn-zacht);
  cursor: pointer;
  transition: border-color var(--duur) var(--soepel),
              background-color var(--duur) var(--soepel);
}

.keuzeblok:hover { border-color: var(--kleur-blauw); }

.keuzeblok:has(:checked) {
  border-color: var(--kleur-zwart);
  background-color: var(--kleur-wit);
}

.keuzeblok__tekst { display: block; }

.keuzeblok__titel {
  display: block;
  font-size: var(--maat-h4);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-h4);
}

.keuzeblok__uitleg {
  display: block;
  margin-top: var(--ruimte-1);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* --- Radioknoppen ---------------------------------------------------------
   Zelfde vorm als het vakje in de wensenlijst: een hoekig kader dat blauw
   vult. Een rondje zou de enige ronde vorm op de hele site zijn. Het blijft
   een echte input type=radio, dus toetsenbord en schermlezer merken niets
   van de opmaak. */
.keuzeblok__vak,
.keuzeklein__vak {
  flex: none;
  display: grid;
  place-content: center;
  margin: 0.2rem 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: var(--lijn) solid var(--kleur-lijn);
  border-radius: var(--straal);
  background-color: var(--kleur-wit);
  cursor: pointer;
  transition: background-color var(--duur-kort) var(--soepel),
              border-color var(--duur-kort) var(--soepel);
}

.keuzeblok__vak {
  width: 1.25rem;
  height: 1.25rem;
}

.keuzeklein__vak {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
}

.keuzeblok__vak:checked,
.keuzeklein__vak:checked {
  background-color: var(--kleur-blauw);
  border-color: var(--kleur-blauw);
}

.keuzeblok__vak::after,
.keuzeklein__vak::after {
  content: "";
  background-color: var(--kleur-creme);
  opacity: 0;
}

.keuzeblok__vak::after {
  width: 0.5rem;
  height: 0.5rem;
}

.keuzeklein__vak::after {
  width: 0.375rem;
  height: 0.375rem;
}

.keuzeblok__vak:checked::after,
.keuzeklein__vak:checked::after { opacity: 1; }

/* Ja of nee, naast elkaar. */
.radiorij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

.keuzeklein {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-1);
  padding: var(--ruimte-1) var(--ruimte-2);
  border: var(--lijn) solid var(--kleur-lijn-zacht);
  background-color: var(--kleur-wit);
  font-size: var(--maat-klein);
  cursor: pointer;
  transition: border-color var(--duur) var(--soepel);
}

.keuzeklein:hover { border-color: var(--kleur-blauw); }
.keuzeklein:has(:checked) { border-color: var(--kleur-zwart); }

/* --- Foutoverzicht --------------------------------------------------------
   Verschijnt alleen als een verzending mislukt, en dan komt de focus hier te
   staan. Elke regel is een link naar het veld in kwestie, zodat je vanaf hier
   met een enkele klik of een enkele Enter op de juiste plek staat. */
.foutoverzicht {
  /* Het eerste blok eronder draagt geen marge, zodat de lijn erboven bij een
     leeg formulier bovenaan de sectie staat. Verschijnt het overzicht wel,
     dan zou die lijn tegen de rand van dit kader komen te liggen. Vandaar de
     ruimte hier, die vanzelf verdwijnt zodra het kader dat doet. */
  margin-bottom: var(--ruimte-4);
  padding: var(--ruimte-3);
  border: var(--lijn-dik) solid var(--kleur-lijn);
  background-color: var(--kleur-wit);
}

.foutoverzicht__titel { margin-bottom: var(--ruimte-2); }

.foutoverzicht__lijst {
  display: grid;
  gap: var(--ruimte-1);
  font-size: var(--maat-klein);
}

/* --- Verzenden ------------------------------------------------------------ */
.verzenden {
  display: grid;
  justify-items: start;
  gap: var(--ruimte-2);
}

.verzenden__bij {
  max-width: var(--breedte-tekst);
  color: var(--kleur-tekst-zacht);
  font-size: var(--maat-klein);
}

/* Het honeypotveld. Display none houdt het weg bij de ogen en bij de
   schermlezers, maar het veld wordt wel meeverstuurd: alleen disabled zou
   dat verhinderen, en dan zou een bot het ook niet meer kunnen invullen. */
.honeypot { display: none; }

/* --- Mede-oprichter als rij -----------------------------------------------
   Portret links, het verhaal in de eerste persoon rechts. Twee van deze
   rijen onder elkaar vormen het blok met de twee mede-oprichters. De dikke
   lijn erboven scheidt ze zonder er kaders van te maken; op zwart wordt die
   lijn creme, want zwart op zwart is geen lijn. Bewust geen tweeluik: dat
   zet de kolommen onder 1024 px onder elkaar, en dan wordt het portret
   zeven kolommen breed en dus veel te hoog. */
.oprichter-rij {
  padding-top: var(--ruimte-3);
  border-top: var(--lijn-dik) solid var(--kleur-lijn);
  row-gap: var(--ruimte-3);
}

.sectie--donker .oprichter-rij { border-top-color: var(--kleur-creme); }

/* Het portret hoort links van de tekst, ook op een tablet en in een smal
   venster. Twee dingen zouden dat breken.

   Tussen 768 en 1024 px krimpt een blok van acht kolommen naar de volle
   breedte, zodat vier kaarten daar twee aan twee komen te staan. Voor deze
   rij klopt dat niet: de tekst duikt dan onder het portret. Daar zetten we
   die span dus terug op acht.

   En onder 768 px valt het raster helemaal terug op een kolom. Daar krijgt
   de rij haar eigen twee kolommen, met een portret dat meekrimpt. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .oprichter-rij .kol-8 { grid-column: span 8; }
}

@media (min-width: 30rem) and (max-width: 47.9375rem) {
  .oprichter-rij {
    grid-template-columns: clamp(6rem, 24vw, 12rem) minmax(0, 1fr);
  }
}

/* Pas op gsm-formaat, onder 480 px, staat het portret boven de tekst. Naast
   een kolom van dertig tekens is het geen portret meer. Een staand vlak van
   3:4 wordt daar wel hoger dan het scherm, dus het krijgt een plafond. */
@media (max-width: 29.9375rem) {
  .oprichter-rij .plaatshouder,
  .oprichter-rij .oprichter__foto { max-width: 16rem; }
}

/* --- Vraag ----------------------------------------------------------------
   Een vraag met haar antwoord op /veelgestelde-vragen. Dezelfde liniaal als
   de stappen op /werkwijze: een dikke lijn boven, het nummer en het
   onderwerp links, de vraag en het antwoord rechts. De vraag blijft een h2,
   maar draagt de maat van een h3: zeven koppen van 40 px onder elkaar is een
   pagina die roept in plaats van antwoordt. */
.vraag {
  padding-top: var(--ruimte-3);
  border-top: var(--lijn-dik) solid var(--kleur-lijn);
  row-gap: var(--ruimte-2);
}

.vraag__nummer {
  display: block;
  color: var(--kleur-blauw);
  font-family: var(--font-mono);
  font-size: var(--maat-h3);
  font-weight: var(--gewicht-zwart);
  line-height: 1;
}

.vraag__titel {
  font-size: var(--maat-h3);
  line-height: var(--regel-h3);
  font-weight: var(--gewicht-vet);
}

/* --- Inhoudsopgave over twee kolommen -------------------------------------
   De wegwijzer draagt op de juridische pagina de inhoudsopgave. Bij negentien
   artikels wordt een enkele kolom een lijst waar je doorheen moet scrollen
   voor je aan de tekst begint, dus vanaf 768 px valt ze in twee. */
@media (min-width: 48rem) {
  .wegwijzer--twee .wegwijzer__lijst {
    columns: 2;
    column-gap: var(--goot);
  }

  .wegwijzer--twee .wegwijzer__lijst li { break-inside: avoid; }
}

/* --- Juridische tekst -----------------------------------------------------
   Een doorlopend document in plaats van een opgemaakte pagina: een kolom van
   ongeveer zeventig tekens, koppen op h3-maat en niets dat de aandacht van de
   tekst wegtrekt. De inhoud van deze pagina staat woordelijk vast, dus de
   opmaak moet zich gedeisd houden. */
.juridisch { max-width: var(--breedte-tekst); }

.juridisch__deel { scroll-margin-top: var(--ruimte-3); }

.juridisch__deel h2 {
  font-size: var(--maat-h3);
  line-height: var(--regel-h3);
  font-weight: var(--gewicht-vet);
}

.juridisch__deel > h2 + * { margin-top: var(--ruimte-3); }

.juridisch ul,
.juridisch ol {
  padding-left: var(--ruimte-3);
  list-style: square;
}

.juridisch li + li { margin-top: var(--ruimte-1); }

.juridisch li::marker { color: var(--kleur-blauw); }

/* Het nummer van een artikellid. Mono en blauw, zoals elk cijferdetail op
   deze site, zodat je 10.3 terugvindt zonder de alinea te moeten lezen. */
.juridisch__nr {
  font-family: var(--font-mono);
  font-weight: var(--gewicht-vet);
  color: var(--kleur-blauw);
}

/* Een technische term die letterlijk zo heet, zoals sessionStorage. */
.juridisch code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* --- Uittreksel -----------------------------------------------------------
   Een adres of een citaat dat letterlijk overgenomen is uit een andere bron.
   Mono, met een zwarte balk links: het is geen mededeling van ons, dus het
   krijgt ook niet de blauwe balk van het aandachtsblok. */
.uittreksel {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-left: var(--balk-dik) solid var(--kleur-lijn);
  font-family: var(--font-mono);
  font-size: var(--maat-klein);
  line-height: var(--regel-h4);
}

/* --- Tabel ----------------------------------------------------------------
   Hoekig, met dunne lijnen en een mono kop. Staat enkel in het privacybeleid,
   waar de verwerkingen en hun rechtsgrond naast elkaar horen. */
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--maat-klein);
  text-align: left;
}

.tabel th,
.tabel td {
  padding: var(--ruimte-2);
  border: var(--lijn-dun) solid var(--kleur-lijn-zacht);
  vertical-align: top;
}

.tabel th {
  border-bottom-width: var(--lijn);
  border-bottom-color: var(--kleur-lijn);
  font-family: var(--font-mono);
  font-size: var(--maat-label);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
}

/* Onder 768 px is een halve kolom te smal voor deze zinnen en zou de tabel
   horizontaal moeten schuiven. In de plaats daarvan wordt elke rij een blok:
   de kolomkop komt als mono labeltje boven de cel te staan. Die kop staat als
   data-kop in de HTML, zodat de tabel zelf gewoon een tabel blijft. */
@media (max-width: 47.9375rem) {
  .tabel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabel tr {
    display: block;
    border: var(--lijn) solid var(--kleur-lijn);
  }

  .tabel tr + tr { margin-top: var(--ruimte-2); }

  .tabel td {
    display: block;
    border: 0;
  }

  .tabel td + td { border-top: var(--lijn-dun) solid var(--kleur-lijn-zacht); }

  .tabel td::before {
    content: attr(data-kop);
    display: block;
    margin-bottom: var(--ruimte-1);
    color: var(--kleur-tekst-zacht);
    font-family: var(--font-mono);
    font-size: var(--maat-label);
    font-weight: var(--gewicht-vet);
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
  }
}

/* --- Beweging -------------------------------------------------------------
   Korte fade met verschuiving, eenmalig per element. Zonder JavaScript is
   alles gewoon zichtbaar. */
.js .onthul {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duur-lang) var(--soepel),
              transform var(--duur-lang) var(--soepel);
}

.js .onthul.is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Een blok waar je via een anker naartoe springt, staat meteen op zijn plek.
   Anders rekent de browser met de verschoven positie van voor het invliegen,
   en schuift het blok daarna een stukje onder de header. */
.js .onthul:target,
.js .onthul:has(:target) {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .onthul {
    opacity: 1;
    transform: none;
  }
}