/* Mikrotools. Kleuren komen uit tokens.css, op de drie hieronder na.

   Deze regel stond er als "hier staat geen enkele hexwaarde" en dat klopte
   niet: er stonden er zeventien, waarvan één waarde elf keer. Dat is erger
   dan een hexwaarde, want elf plekken die hetzelfde bedoelen kunnen uit
   elkaar gaan lopen zonder dat iemand het merkt.

   Ze staan nu één keer, met een naam die zegt wat ze doen. Hun eindbestemming
   is tools/tokens.py, want dat genereert tokens.css; tot die stap gezet is
   horen ze hier en nergens anders. */
:root {
  /* Lopende tekst op navy. Niet --mt-soft: dat haalt 16,21:1 en is daarmee zo
     wit dat elke bijzin als kop leest. Deze haalt 9,73:1 op --mt-navy en
     8,31:1 op --mt-navy2, allebei ruim boven AA, en laat de koppen koppen. */
  --tekst-op-donker: #9FC7E8;

  /* ---------------------------------------------------------------
     De donkere vlakken, als besluit in plaats van als kleur.

     Het ontwerp werkt met leesritme: een lichte pagina met donkere
     vlakken als leestekens. De hero, het uitgelichte blok, de blokken
     op werkwijze en de voet zijn zulke vlakken, en die stonden alle
     vijf hardgecodeerd op --mt-navy.

     In dark mode is --color-surface exact diezelfde navy. Zonder deze
     laag zouden die vijf vlakken dus onzichtbaar worden: navy op navy.
     Het ritme dat het ontwerp draagt, zou precies in de stand
     verdwijnen waar het het meest nodig is.

     Daarom niet een kleur maar een rol. Een vlak wijkt af van de
     pagina, en in welke richting het afwijkt hangt van de stand af.
     Licht: de pagina is wit, dus gaat het vlak omlaag naar navy.
     Donker: de pagina is al navy, dus gaat het vlak nog dieper, naar
     de gezonken laag, met een haarlijn zodat de rand leesbaar blijft.
     Een kaart op de pagina doet het omgekeerde en komt omhoog.
     --------------------------------------------------------------- */
  --vlak-diep: var(--mt-navy);
  --vlak-rand: transparent;
  --vlak-kaart: var(--mt-navy);
  --vlak-kaart-in: var(--mt-navy2);
  --vlak-kaart-rand: var(--mt-navy2);
  /* Echt wit, en niet --color-surface: dat is in de donkere stand navy en dan
     zou het vel de kleur van de pagina krijgen. Zie .beeld verderop. */
  --fotovel: #FFFFFF;
  /* Lopende tekst op het tundravlak, 7,24:1 op --shared-tundrasoft. */
  --tekst-op-tundra: #3E4A5C;
  /* Scheidingslijn op navy2, net zichtbaar zonder een kader te tekenen. */
  --rand-op-donker: #1B3A5C;
}

/* De donkere stand. Alleen rollen worden omgezet, geen losse kleuren: de
   waarden zelf komen uit het data-theme-blok in tokens.css, dat er al stond
   maar tot nu toe nooit werd bereikt omdat niets het attribuut zette. */
:root[data-theme="dark"] {
  --vlak-diep: var(--color-surface-sunken);
  --vlak-rand: rgb(255 255 255 / .08);
  --vlak-kaart: var(--color-surface-raised);
  --vlak-kaart-in: var(--color-surface-raised);
  --vlak-kaart-rand: rgb(255 255 255 / .12);

  /* Laat de browser zijn eigen onderdelen meekleuren: het schuifbalkje, de
     invoervelden en het menu bij rechtsklikken. Zonder dit blijft een
     donkere pagina een lichte tekstcursor en een wit schuifbalkje houden.

     Hier stond light, terwijl er in ditzelfde blok bovenaan al dark stond.
     Gelijke selector en gelijke property, dus de laatste won en de donkere
     stand draaide al die tijd op light: precies het schuifbalkje en de
     tekstcursor die de regel hierboven zegt te voorkomen. Eén declaratie,
     met de waarde die het commentaar beschrijft. */
  color-scheme: dark;

  /* Latent risico, hier genoteerd zodat het niet per ongeluk werkelijkheid
     wordt: --mt-blue haalt 4,53:1 op wit, de kleinste marge die AA toestaat,
     en zakt naar 4,24:1 op --color-surface-raised. Dat vlak draagt .hero,
     .stappen en .cta. Er staat daar nu geen enkele tekstlink, alleen knoppen
     met een eigen voorgrondkleur, dus het is geen actuele fout. Komt er ooit
     een link in lopende tekst op zo'n vlak, gebruik dan --color-text-accent
     op wit of zet de link op een witte ondergrond. */
}

/* Gesubset op latijn en als woff2 geleverd; zie assets/fonts/README.md voor
   het commando. De ttf-bestanden die hier stonden wogen samen 636 kB en
   maakten ruim negentig procent van elke pagina uit. Nu is dat 34 kB. */
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-surface);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); }
a:hover { text-decoration-thickness: 2px; }

.wrap { width: min(100% - var(--space-8), 68rem); margin-inline: auto; }

/* toetsenbordgebruikers eerst */
.skip {
  position: absolute; left: -9999px;
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-3) var(--space-4); z-index: 10;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* voortgangsbalk
   ---------------------------------------------------------------
   Drie pixels, over de volle breedte, tegen de bovenrand van het venster. Hij
   ligt op de content en niet erboven in de stroom: zou hij ruimte innemen, dan
   verschoof de hele pagina drie pixels zodra het script hem toont.

   De grond is de haarlijn die ook onder de kop staat. Zonder die grond zie je
   alleen het stukje dat vol is en niet hoeveel er nog komt, en juist dat laatste
   is de vraag die de balk beantwoordt.

   Boven het uitgeklapte menu (z-index 20) en boven de skip-link in rust; de
   skip-link staat bij focus lager op het scherm, dus die dekt hij niet af. */
.voortgang {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 30;
  background: var(--color-border);
}
/* De vulling is er altijd op volle breedte en wordt met scaleX ingekort. Dat
   is goedkoper dan width: de browser hoeft de balk niet opnieuw op te meten
   maar alleen anders te tekenen, en dat scheelt bij elke scrollbeweging.
   Geen transition: die zou de vulling achter de vinger aan laten lopen, en dan
   liegt hij precies op het moment dat iemand kijkt of hij er bijna is. */
.voortgang-vulling {
  height: 100%; background: var(--color-text-accent);
  transform: scaleX(var(--voortgang, 0)); transform-origin: left center;
}

h1, h2, h3 { text-wrap: balance; margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line);
     font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line);
     font-weight: var(--text-h2-weight); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
p  { margin: 0 0 var(--space-4); }
.lead { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line);
        color: var(--color-text-muted); }

/* kop */
.kop { border-bottom: 1px solid var(--color-border); position: relative; }
.kop-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-6); padding-block: var(--space-4); }
.merk { flex: 0 0 auto; }
/* Hoogte, nooit breedte: het handboek schrijft voor dat twee lockups naast
   elkaar op hoogte geschaald worden, en dezelfde regel houdt hier het merk op
   maat los van hoe lang de naam is.

   In de kop staat het primaire logo, dus met de pay-off erin, en daar stelt het
   handboek een hogere ondergrens aan dan aan de compacte lockup: 180 px breed
   tegen 120 px. Op 50 px hoog haalt deze 183 px, precies boven die grens.

   Waarom hier toch 68 px staat: op de ondergrens is de pay-off maar 5,4 px
   hoog, en dan staat er wel een regel maar leest niemand hem. Bij 68 px is de
   lockup 249 px breed en de pay-off 7,3 px, en dat is de kleinste maat waarop
   die regel nog werk doet. De kop wordt daarmee 100 px hoog, wat kan omdat hij
   niet meescrollt: die hoogte kost alleen ruimte bovenaan de pagina.

   Hoger kan niet zomaar. Bij 72 px is de lockup 264 px, en samen met de
   menuknop en de tussenruimte is dat 371 px terwijl er op een scherm van 390 px
   maar 358 px te verdelen valt. Vandaar de kleinere maat in de media query
   hieronder, en niet een grotere hier. */
.merk img { height: 68px; width: auto; }
.merk-donker { display: none; }
:root[data-theme="dark"] .merk-licht { display: none; }
:root[data-theme="dark"] .merk-donker { display: block; }
/* ---------------------------------------------------------------
   De themaknop.

   Geen kader. Hij stond eerst in een omlijnd vakje, en dan staan er in
   de balk drie omkaderde dingen naast elkaar: dit vakje, de menuknop en
   de cta. Drie kaders van verschillend gewicht naast vijf kale tekstlinks
   leest als een balk die nog niet af is.

   Wat een utility is, hoort er ook als utility uit te zien: alleen het
   icoon, en pas bij hover of focus een vlak eronder. Het raakvlak is
   2,75rem, ook al is er niets omheen te zien. Hier stond 2,5rem, verantwoord
   tegen de 24 px van WCAG 2.5.8; dat is de ondergrens van het minimum en niet
   de norm. 2.5.5 vraagt 44 px, en dat is de maat waarop een duim een knop
   raakt zonder ernaast te zitten.
   --------------------------------------------------------------- */
.thema {
  flex: 0 0 auto; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  padding: 0; cursor: pointer;
  color: var(--color-text-muted);
  background: transparent; border: 0;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
/* Alleen waar een echte aanwijzer is. Op een touchscreen blijft een hover-stand
   hangen tot er ergens anders getikt wordt, en bij deze knop blijf je op de
   pagina staan: het vlak eronder bleef dus staan na het omschakelen. Dezelfde
   les als eerder bij de vraag in de faq. */
@media (hover: hover) and (pointer: fine) {
  .thema:hover { background: var(--button-quiet-bg-hover); color: var(--color-text); }
}
/* De naam van de knop staat in zichtbare tekst. Op een breed scherm is dat
   teveel in een balk, dus wordt hij weggeklipt en niet verborgen: display:none
   zou hem ook uit de naam halen en dan heet de knop niets meer. */
.thema-tekst { position: absolute; width: 1px; height: 1px; margin: -1px;
               padding: 0; overflow: hidden; clip-path: inset(50%);
               white-space: nowrap; }
/* De scheiding tussen waar je heen kunt en wat je kunt doen. Een haarlijn,
   dezelfde als onder de kop en boven een registeritem, en niet een tweede
   soort streep. De ruimte ervoor is groter dan de ruimte tussen de menu-items,
   want de lijn scheidt twee groepen en staat niet tussen twee gelijken. */
/* De nav is de flexcontainer geworden, want de themaknop staat niet meer in de
   lijst. Met order komt hij achter de lijst te staan en dus achter de cta, waar
   hij eerst er nog vóór stond. Dat is de prijs van hem eruit halen: tussen twee
   items van een lijst kun je iets zetten dat er geen deel van uitmaakt, met css
   niet. De scheidingslijn houdt zijn werk: hij scheidt nu waar je heen kunt en
   wat je kunt doen van hoe de pagina eruitziet. */
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav ul { order: 1; }
.nav-thema { order: 2; display: flex; align-items: center;
             padding-left: var(--space-4);
             border-left: 1px solid var(--color-border); }
/* Zelfde reden als bij het register: op een donkere grond is --color-border
   1,33 en dat leest niet. Een donkere lijn op wit haalt 1,25 en leest wel,
   want een oog vindt een donkere lijn op licht makkelijker dan andersom. De
   getallen mogen dus verschillen zolang het resultaat hetzelfde doet. */
:root[data-theme="dark"] .nav-thema { border-left-color: rgb(255 255 255 / .22); }
/* Zonder javascript is er geen knop. Dan hoort het item er ook niet te staan,
   anders blijft er een gat van een tussenruimte over met een streep ernaast. */
.nav-thema:has(> .thema[hidden]) { display: none; }
/* Toon wat er gebeurt als je drukt, niet waar je nu bent. De knoptekst zegt
   hetzelfde: in de lichte stand staat de maan er, want daar ga je heen.

   Alle vier de regels op dezelfde selectorvorm. Hier stond eerst een losse
   `.thema svg { display: block }` erboven, en die weegt (0,1,1) tegen de
   (0,1,0) van `.thema-zon`. De blanco regel won dus en in de lichte stand
   stonden zon en maan boven elkaar in de knop. Dezelfde soort fout als eerder
   bij de navigatie tegen de knop: een elementselector die per ongeluk zwaarder
   weegt dan de klasse die het echte besluit draagt. */
.thema .thema-zon,
.thema .thema-maan { display: none; }
.thema .thema-maan { display: block; }
:root[data-theme="dark"] .thema .thema-maan { display: none; }
:root[data-theme="dark"] .thema .thema-zon { display: block; }
/* In de donkere hero van een pagina staat de kop nog op de lichte grond, dus
   hier is geen aparte kleur nodig; de knop erft --color-text. */

.nav ul { display: flex; align-items: center; gap: var(--space-6);
          list-style: none; margin: 0; padding: 0; }
/* Let op de selector. Hier stond `.nav a`, en die weegt (0,1,1) tegen de
   (0,1,0) van `.knop-primair`. De navigatieregel won dus, en gaf de
   belangrijkste knop van de site de tekstkleur in plaats van wit: navy op
   blauw is 3,82 en er is 4,5 nodig. Een knop is geen navigatielink en mag
   hier niet worden geraakt. */
.nav ul > li > a:not(.knop) {
  color: var(--color-text); text-decoration: none;
  display: inline-block; padding-block: var(--space-1);
}
/* Hover en de huidige pagina kregen hier exact dezelfde streep, waardoor een
   item waar de muis toevallig boven hing niet te onderscheiden was van de
   pagina waar je stond. Nu draagt de accentkleur alleen de plaats waar je
   bent; hover is een gedempte streep. Geen gewichtsverschil, want dat zou de
   rij bij elke muisbeweging laten verspringen. */
.nav ul > li > a:not(.knop):hover {
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-color: var(--color-border-strong);
}
.nav ul > li > a:not(.knop)[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-text-accent);
}
/* De schakelaar blijft bereikbaar voor het toetsenbord, dus geen display:none.
   Uit beeld klippen mag wel; de focusring verhuist naar het label. */
/* Boven 57rem staat het label .nav-knop op display:none en is er dus geen
   mobiel menu. De schakelaar bleef daar wel focusbaar, weggeklipt tot één
   pixel: een tabstop waar niets te zien is en niets te doen valt, midden in
   de kop, op elke pagina. Onder 57rem komt hij terug, want daar hoort hij
   bereikbaar te zijn; zie de mediaquery verderop. */
.nav-schakel { display: none;
               position: absolute; width: 1px; height: 1px; margin: -1px;
               padding: 0; overflow: hidden; clip-path: inset(50%);
               white-space: nowrap; }
.nav-knop { display: none; }

/* knoppen */
/* 16 px en niet 14: op een smal scherm brak "Plan een demo" anders over drie
   regels, en voor de hoofdactie van een pagina is 14 px sowieso klein. */
.knop { display: inline-block; padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-md); text-decoration: none;
        font-weight: 600; font-size: var(--text-body-size);
        white-space: nowrap; }
.knop-primair { background: var(--button-primary-bg); color: var(--button-primary-fg); }
/* Op een lichte pagina wordt de knop bij hover donkerder, en blijft wit erop
   met 14,78. Op een donkere grond kan dat niet: donkerder dan navy is daar
   geen hover maar een gat, en de knop verdwijnt in de pagina. Daar gaat hij
   dus juist naar azuur. Wit haalt op azuur 2,62 en dat is onder de 4,5 die AA
   vraagt, op de meest herhaalde knop van de site; navy op datzelfde azuur
   haalt 6,59, dezelfde verhouding als de focusring op donkere vlakken maar
   dan omgedraaid. Een knop die bij hover feller wordt en dan donkere letters
   krijgt, is bovendien wat een oog op een donkere pagina verwacht.

   De terugvalwaarde in var() houdt de gewone knop ongemoeid: alleen waar
   hieronder --knop-primair-fg-hover gezet is, draait de letterkleur mee. */
.knop-primair:hover { background: var(--button-primary-bg-hover);
                      color: var(--knop-primair-fg-hover, var(--button-primary-fg)); }
.knop-primair:active { background: var(--button-primary-bg-active);
                       color: var(--knop-primair-fg-hover, var(--button-primary-fg)); }
/* De disabled-tokens stonden tot nu toe ongebruikt, met de reden dat er geen
   knop was die uitgeschakeld kon raken. Die is er nu: de verzendknop, voor de
   tijd tussen de klik en de nieuwe pagina. Geen doorzichtigheid maar de eigen
   tokens, zodat de tekst leesbaar blijft: 5,15 op deze grond. */
.knop-primair:disabled {
  background: var(--button-primary-bg-disabled);
  color: var(--button-primary-fg-disabled);
  cursor: default;
}
.knop-stil { background: var(--button-quiet-bg); color: var(--button-quiet-fg);
             border: 1px solid var(--button-quiet-border); }
.knop-stil:hover { background: var(--button-quiet-bg-hover); }
.knop-stil:active { border-color: var(--color-text-muted); }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* hero */
.hero { padding-block: var(--space-16); background: var(--color-surface-raised);
        position: relative; overflow: hidden; }
.hero h1 { font-size: var(--text-display-size); line-height: var(--text-display-line);
           letter-spacing: var(--text-display-tracking); max-width: 20ch; }
.hero .lead { max-width: 56ch; }

/* Pagina's zonder eigen hero krijgen alleen de titel. Rustiger dan de volle
   hero, maar wel een h1 en wel een aanloop in plaats van tekst die tegen de
   kop aan begint. */
.hero-eenvoudig { padding-block: var(--space-10); }
.hero-eenvoudig h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line);
                     letter-spacing: var(--text-h1-tracking); max-width: 24ch; }
.hero-eenvoudig + .wrap .prose { padding-top: var(--space-8); }

/* Nederlandse en Duitse samenstellingen worden lang: verwerkersovereenkomst,
   inspanningsverplichting, Automatisierungen. Zonder afbreking springt zo'n
   woord in zijn geheel naar de volgende regel en blijft er een gat achter dat
   op een telefoon de halve regel beslaat. De browser breekt af op basis van
   het lang-attribuut, en dat staat per pagina goed. */
.prose p, .prose li, .lead, .blok p, .faq .antwoord,
.geruststelling span, .blok-punten li {
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Niet op koppen en niet op de monospace blokken: daar is een streepje in een
   woord storender dan een korte regel, en in een logregel is het onjuist. */
h1, h2, h3, .bewijs-regels, .bewijs-paren, .product-regels { hyphens: manual; }
/* Domeinen en e-mailadressen: nooit afbreken, ook niet op een smal scherm.
   Liever een regel die iets verder doorloopt dan een adres met een streepje
   erin dat er niet hoort. */
.nobreak { hyphens: manual; -webkit-hyphens: manual; white-space: nowrap; }

/* tekst */
.prose { padding-block: var(--space-12); max-width: 68ch; }
.prose h2 { margin-top: var(--space-8); }
.prose ol, .prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose-kop { margin-bottom: var(--space-6); }

/* ---------------------------------------------------------------
   Een merk van een ander in lopende tekst.

   De maat komt uit de map en niet uit de content. Wie in een
   markdownbestand een hoogte kan meegeven, doet dat per plek anders, en
   dan staat de opmaak in de tekst. Alles onder assets/logos is een merk
   en krijgt hier zijn maat; alles daarbuiten is een afbeelding en volgt
   de gewone regel eronder.

   46 px hoog, gelijk aan het eigen logo in de kop. Dat is de regel: een
   merk van een ander wordt nooit groter getoond dan dat van de site zelf.

   Geen filter, geen kleurwijziging en geen ronde hoeken. Het bestand is
   van de vereniging en dat gebruik je zoals zij het leveren. Moet het op
   een donkere ondergrond, gebruik dan hun monochroom witte bestand en
   niet een omgekleurde versie van deze. */
/* De algemene regel eerst, de uitzondering erna. Andersom ging het mis: toen ik
   de merkregel van .prose losmaakte zodat hij ook in een faq-antwoord zou
   gelden, kwam hij op (0,1,1) uit, gelijk aan `.prose img` eronder. Bij gelijke
   specificiteit wint de laatste, dus kreeg het merk height:auto en stond het
   logo op ware grootte, bijna vier keer te breed. Volgorde is hier het hele
   verschil. */
.prose img { max-width: 100%; height: auto; }

/* Niet op .prose gescopet: hetzelfde merk staat ook in een faq-antwoord op de
   Engelse en de Duitse pagina, en dat zit in .antwoord. De map is de regel. */
img[src^="/assets/logos/"] {
  display: block; height: 46px; width: auto;
  margin-block: var(--space-5) var(--space-6);
}
/* Twee bestanden, een per ondergrond. Het woordmerk van de vereniging is
   donkergrijs en verdwijnt op navy; zij leveren daar zelf een monochroom witte
   versie voor. De afspraak: een bestand op -wit.svg in deze map is de variant
   voor een donkere grond. Ze staan allebei in dezelfde alinea, zodat de
   verborgene geen lege regel achterlaat.

   Omkleuren met een filter zou eenvoudiger zijn en is precies wat je met het
   merk van een ander niet doet. */
img[src^="/assets/logos/"][src$="-wit.svg"] { display: none; }
:root[data-theme="dark"] img[src^="/assets/logos/"]:not([src$="-wit.svg"]) { display: none; }
:root[data-theme="dark"] img[src^="/assets/logos/"][src$="-wit.svg"] { display: block; }
.meta { color: var(--color-text-muted); font-size: var(--text-body-sm-size);
        display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* faq, zonder javascript */
.faq { padding-block: var(--space-12); border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
/* Het teken hoort bij de vraag en niet bij de rechterrand van het vlak. Het
   stond op float: right en parkeerde daardoor tot vierhonderd pixels achter
   het laatste woord, zodat je bij vier vragen onder elkaar vier plussen zag
   die bij niets leken te horen. Als flexregel blijft er ruimte tussen, maar
   ligt het teken op dezelfde regel als de tekst waar het over gaat.

   space-between en niet gap alleen: bij een korte vraag zou het teken anders
   vlak achter het vraagteken plakken en bij een lange tegen de rand. Nu staat
   het altijd rechts uitgelijnd, wat de vier tekens onder elkaar op één lijn
   zet, en dat is precies waarom je ze wel rechts wilt hebben. */
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--text-h4-size);
               list-style: none;
               display: flex; justify-content: space-between; align-items: baseline;
               gap: var(--space-6); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-text-accent);
                      flex: 0 0 auto; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }

/* Het openvouwen zelf staat bij de rest van de beweging, onderaan dit bestand.
   Het stond hier ook, met een eigen cubic-bezier en interpolate-size op :root
   in plaats van op .faq. Die versie verloor van de andere en beweerde dus iets
   anders dan er gebeurde, terwijl hij ondertussen wel elke height: auto op de
   site animeerbaar maakte. Eén plek, en dat is daar. */
.faq .antwoord { color: var(--color-text-muted); max-width: 68ch;
                 padding-top: var(--space-2); }

/* cta */
.cta { background: var(--color-surface-raised); padding-block: var(--space-12);
       border-top: 1px solid var(--color-border); }
.cta-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-8); flex-wrap: wrap; }
.cta h2 { margin-bottom: var(--space-2); }
.cta p { margin: 0; color: var(--color-text-muted); max-width: 52ch; }

/* voet */
/* Hier stond margin-top: var(--space-16). Dat zette op elke pagina een lege
   strook van 64 px tussen de cta-band en de voet, en in de donkere stand is
   dat navy op navy: het leest als een gat waar iets had moeten staan. De twee
   vlakken raken elkaar nu, en de padding hieronder doet het scheiden. */
.voet { background: var(--vlak-diep); color: var(--mt-soft);
        padding-block: var(--space-12) var(--space-6);
        position: relative; overflow: hidden; }
/* Boven snijdt het embleem door de rechterrand, onderaan door de linker. Het
   merk loopt zo door de pagina heen in plaats van er twee keer los op te staan.
   Lagere dekking dan in de hero: hier staat tekst overheen. */
/* Ver naar links en laag: het logo staat linksboven in de voet, en op de
   eerste plaatsing zat dezelfde vorm er precies achter. Twee keer hetzelfde
   merkteken op elkaar, op twee maten, maakt allebei minder leesbaar. Nu blijft
   alleen de bovenrand van de ring zichtbaar, onder het logo langs. */
.voet-embleem {
  position: absolute; left: -24%; bottom: -56%;
  width: min(52vw, 34rem); height: auto;
  opacity: .11; pointer-events: none;
}
.voet-in, .voet-onder { position: relative; z-index: 1; }
/* Op een telefoon klopt de diagonaal niet meer. De kolommen staan dan onder
   elkaar aan de linkerkant en het embleem stond links onder de tekst, ver buiten
   beeld: met left:-46% en bottom:-56% bleef er van een schijf van 52vw niets
   zichtbaars over. De ruimte die er wel is, ligt rechts naast de kolom.

   Daarom hier rechts en volledig in beeld, dus zonder aansnijden. Het merk
   schijnt door achter de tekst; .voet-in en .voet-onder liggen op z-index 1, dus
   de links blijven leesbaar. Iets meer dekking dan op de desktop, want daar
   compenseert de grootte wat hier wegvalt. */
@media (max-width: 60rem) {
  .voet-embleem {
    /* De helft valt buiten de rechterrand, net als bij de hero. Dat is geen
       percentage maar de halve eigen breedte, zodat de verhouding klopt op elk
       scherm: met right in procenten van de container schuift het aandeel dat
       zichtbaar blijft mee met de schermbreedte, en dan is het op een tablet
       ineens een kwart. .voet heeft overflow:hidden, dus het snijden gebeurt
       netjes op de rand.

       Ruimer dan de hero (112vw tegen 64vw): daar staat het embleem naast een
       kop en hier naast een kolom links, dus er is meer ruimte over en een
       grotere schijf oogt rustiger dan een kleine in een groot vlak. Zichtbaar
       blijft ongeveer 56vw, meer dan de 52vw van hiervoor toen hij nog helemaal
       in beeld stond. */
    --voet-em: min(112vw, 28rem);
    left: auto; right: calc(var(--voet-em) / -2);
    bottom: auto; top: 50%; transform: translateY(-50%);
    width: var(--voet-em);
    opacity: .10;
  }
}
/* Het merk staat op een eigen regel en de kolommen eronder. Met het menu erbij
   zouden het er vijf naast elkaar worden, en dan houdt de merkkolom minder over
   dan de 300 px die de primaire lockup nodig heeft om zijn pay-off leesbaar te
   houden. Het handboek staat niet toe hem kleiner te zetten, dus wijkt de kolom
   en niet het logo. Bijkomend voordeel: de kolommen krijgen de volle breedte,
   waardoor Algemene voorwaarden nu op een regel past. */
.voet-in { display: grid; gap: var(--space-10) var(--space-8);
           grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voet-in:has(.voet-talen) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voet-merk { grid-column: 1 / -1; }
.voet h2 { font-size: var(--text-body-sm-size); text-transform: uppercase;
           letter-spacing: .08em; color: var(--mt-azure); }
.voet a { color: var(--mt-soft); }
.voet address { font-style: normal; line-height: 1.9; }
.voet ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
/* Breekt een lange titel af, zoals Algemene voorwaarden op een smalle kolom,
   dan springt de tweede regel in. Zonder dat staan er twee regels links onder
   elkaar en leest de lijst als één item te veel.

   De inspringing staat op de link en niet meer op het item eromheen, want de
   link is nu een inline-block. Op regelhoogte 1,9 was hij 30,4 px hoog en
   verder niets: een inline link is precies zo hoog als zijn letters, dus
   ruimte eromheen doet daar niets aan. Als blok draagt hij de ruimte wel, en
   met 7 px boven en onder komt hij op 44,4 px. Dat zijn negentien links in de
   voet op elke pagina, plus het telefoonnummer en het e-mailadres. */
.voet li a, .voet address a {
  display: inline-block; padding-block: 7px;
  padding-left: 1em; text-indent: -1em;
}
/* De pagina waar de bezoeker al is blijft in de lijst staan, maar hoeft niet
   meer op te vallen: doorklikken naar hier levert niets op. */
.voet [aria-current="page"] { opacity: .6; }
.voet-onder { border-top: 1px solid rgb(255 255 255 / .12); margin-top: var(--space-8);
              padding-top: var(--space-4); font-size: var(--text-caption-size);
              color: var(--mt-soft); opacity: .75; }

/* ---------------------------------------------------------------
   Smal scherm.

   De kop was een flexrij zonder wrap met een logo van 150 px en vier
   items ernaast, waarvan een knop. Onder ongeveer 500 px liep die rij
   het beeld uit en werd het logo tot een streepje samengeknepen. De
   hamburger stond wel in de markup maar op display:none, in geen enkele
   query weer aangezet, en was daarmee dode code. Hier wordt hij alsnog
   aangesloten: het label opent een paneel dat onder de kop uitklapt.
   --------------------------------------------------------------- */
@media (max-width: 48rem) {
  .voet-in, .voet-in:has(.voet-talen) { grid-template-columns: 1fr; }
  .hero { padding-block: var(--space-8); }

}

/* ---------------------------------------------------------------
   De kop klapt eerder dicht dan de rest van de pagina.

   Opnieuw gemeten nu de themaknop erbij staat: het merk is 169 px, de
   knop met de vijf menu-items en de cta samen 647 px, en de tussenruimte
   24 px. Dat is 840 px, en de wrap heeft er 880 bij een scherm van 912.
   Bij 880 px scherm komt de rij op de millimeter uit en breekt Over ons
   in tweeen. Vandaar 57rem, en niet de 48rem van de rest: de voet en de
   hero hebben op een tablet nog ruimte, de kop niet.

   Wordt het menu langer of komt er nog een knop bij, meet dan opnieuw en
   verhoog deze grens. Gokken kost hier een kop van twee regels met een
   half woord eronder, en dat is precies wat er stond.
   --------------------------------------------------------------- */
@media (max-width: 57rem) {
  .kop-in { gap: var(--space-4); }
    /* Terug naar de ondergrens van het handboek, 183 px breed. De 249 px van de
       basisregel past hier niet: met de menuknop van ongeveer 92 px en de
       tussenruimte blijft er van de 358 px op een scherm van 390 px te weinig
       over. De pay-off is op deze maat klein, maar op een telefoon staat het
       merk toch dichter bij het oog. */
    .merk img { height: 50px; }

  /* Hier is er wel een uitklapmenu, dus hier hoort de schakelaar bereikbaar te
     zijn. Weggeklipt en niet verborgen: met display:none valt hij ook uit de
     tabvolgorde en kan een deel van de bezoekers het menu niet openen. */
  .nav-schakel { display: block; }

  .nav-knop {
    display: inline-grid; place-items: center; position: relative;
    cursor: pointer;
    /* Vierkant en even groot als de themaknop ernaast, zodat de twee als een
       paar lezen. 2,75rem is de 44 px van WCAG 2.5.5; zie de opmerking bij
       .thema voor waarom dat de maat is en niet de 24 px van 2.5.8. */
    inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
    border: 1px solid var(--button-quiet-border);
    border-radius: var(--radius-md);
    background: var(--button-quiet-bg); color: var(--button-quiet-fg);
  }
  /* De woorden blijven de naam van de knop en worden alleen weggeklipt. Met
     display:none zouden ze ook uit de naam vallen en heet de knop niets meer;
     dezelfde afweging als bij .thema-tekst. */
  .nav-knop .nav-tekst-open, .nav-knop .nav-tekst-dicht {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .nav-icoon { display: block; }
  .nav-icoon-dicht { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-icoon-open { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-icoon-dicht { display: block; }
  .nav-schakel:focus-visible ~ .nav-knop {
    outline: var(--focus-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-offset);
  }
  .nav-schakel:checked ~ .nav-knop { background: var(--button-quiet-bg-hover); }

  .nav ul {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    z-index: 20; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--space-2) 0 var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
  }
  .nav-schakel:checked ~ ul { display: flex; }
  .nav ul > li { width: min(100% - var(--space-8), 68rem); margin-inline: auto; }
  .nav ul > li > a:not(.knop) { display: block; padding-block: var(--space-3); }
  .nav ul > li > a.knop { display: block; text-align: center;
                          margin-top: var(--space-3); }
  /* De themaknop staat hier in de balk naast de menuknop en niet meer als regel
     in het uitklappaneel. Hij blijft dus het compacte pictogram dat hij op de
     desktop ook is, met zijn naam in de weggeklipte tekst. De streep ervoor
     vervalt: in een balk van twee pictogrammen scheidt die niets.

     De volgorde komt uit de html, eerst de themaknop en dan de menuknop aan de
     rand, dus order terug op nul. Op de desktop staat de themaknop juist achter
     de lijst en daar is order 2. */
  .nav { gap: var(--space-2); }
  .nav-thema { order: 0; margin: 0; padding-left: 0; border-left: 0; }

}

/* ---------------------------------------------------------------
   Eén foto op de hele site.

   Het wit van de uitsnede is exact #FFFFFF en dat is ook de grond van
   deze sectie, dus staat het pand vrij op de pagina in plaats van in een
   kader. Geen kaderlijn, geen schaduw en geen ronde hoeken: die zouden
   allemaal zichtbaar maken dat er een rechthoekig bestand ligt, en dat
   is precies wat de uitsnede probeert te verbergen.

   Dezelfde 68ch als de tekst erboven. Het stond eerst midden op de wrap,
   terwijl de tekst links begint, en dan hangt de foto los van het verhaal
   waar hij bij hoort. Op de kolom uitgelijnd hoort hij bij de alinea's.
   Het origineel is 1200 px breed en zou op de volle wrap opgeblazen
   worden; op deze maat blijft hij scherp. De foto is bewijs, geen decor.
   --------------------------------------------------------------- */
/* De uitsnede van het pand heeft een wit vlak in het bestand zelf gebakken.
   Op een lichte pagina valt dat samen met de ondergrond en staat het pand
   vrij; op een donkere pagina zou er een witte rechthoek middenin staan.
   Daarom in de donkere stand een eigen wit vel met lucht eromheen: dan is
   het wit een besluit en geen naad. Een foto op papier, op een donkere
   tafel. */
.beeld { padding-block: var(--space-12); background: var(--color-surface); }
:root[data-theme="dark"] .beeld figure {
  background: var(--fotovel); border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
}
.beeld figure { margin: 0; max-width: 68ch; }
.beeld img { display: block; width: 100%; height: auto; margin-inline: auto; }
.beeld figcaption { margin-top: var(--space-4);
                    font-size: var(--text-body-sm-size);
                    color: var(--color-text-muted); }

/* formulier */
.formulier { padding-block: var(--space-12); border-top: 1px solid var(--color-border); }
.formulier form { max-width: 34rem; }
.veld { display: flex; flex-direction: column; gap: var(--space-2);
        margin-bottom: var(--space-5); }
.veld label { font-weight: 600; font-size: var(--text-body-sm-size); }
.veld .optioneel { font-weight: 400; color: var(--color-text-muted); }
.veld input, .veld textarea {
  font: inherit; color: var(--color-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
@media (hover: hover) and (pointer: fine) {
  .veld input:hover, .veld textarea:hover { border-color: var(--input-border-hover); }
}
.veld [aria-invalid="true"] { border-color: var(--input-border-error); border-width: 2px; }
.veldfout { color: var(--color-feedback-danger-fg); font-size: var(--text-body-sm-size); }
.veld-uitleg { font-size: var(--text-body-sm-size); color: var(--color-text-muted);
               max-width: 34rem; }
.melding { padding: var(--space-4); border-radius: var(--radius-md);
           max-width: 34rem; border: 1px solid; }
.melding-goed { background: var(--color-feedback-success-bg);
                color: var(--color-feedback-success-fg);
                border-color: var(--color-feedback-success-fg); }
.melding-fout { background: var(--color-feedback-danger-bg);
                color: var(--color-feedback-danger-fg);
                border-color: var(--color-feedback-danger-fg); }
/* ---------------------------------------------------------------
   Het beslismoment.

   Tweekolomsopzet: links het formulier, rechts wat gerust moet stellen.
   De rechterhelft stond hier leeg terwijl dit het enige moment op de site
   is waarop de bezoeker iets riskeert.
   --------------------------------------------------------------- */
.formulier-in { display: grid; gap: var(--space-12);
                grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
/* De geruststelling staat eerst in de broncode, want dat is de volgorde die
   op een smal scherm klopt: eerst wegnemen wat twijfel geeft, dan vragen.
   Stond ze achteraan, dan viel ze onder de verzendknop en kwam ze aan nadat
   de bezoeker al besloten had. Op een breed scherm wijst de plaatsing haar
   terug naar de rechterkolom. Dat verandert niets aan de leesvolgorde van een
   schermlezer, want die volgt de broncode en niet het raster. */
.formulier-hoofd { grid-column: 1; grid-row: 1 / span 2; }
.formulier-naast { grid-column: 2; grid-row: 1; }
/* De lopende tekst van de pagina, onder de geruststelling. Het formulier
   overspant beide rijen, dus de twee kolommen eindigen samen in plaats van
   dat de rechter halverwege stopt en er onder het formulier een smalle kolom
   met een dode helft overblijft. */
.formulier-onder { grid-column: 2; grid-row: 2; }
.formulier-onder > :first-child { margin-top: 0; }
.formulier-hoofd form { max-width: 34rem; }
@media (max-width: 60rem) {
  .formulier-in { grid-template-columns: 1fr; gap: var(--space-8); }
  .formulier-hoofd, .formulier-naast, .formulier-onder {
    grid-column: auto; grid-row: auto;
  }
}

.verplicht { color: var(--color-feedback-danger-fg); font-weight: 400; }
.veld-hint { font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.veld-verplicht-uitleg { font-size: var(--text-caption-size);
                         color: var(--color-text-muted); margin-bottom: var(--space-5); }
/* De belofte staat voor de knop. Daar zit de twijfel, niet in de bevestiging. */
.form-belofte { font-weight: 600; margin-bottom: var(--space-4); }

.melding ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.melding p { margin: 0; }

/* Hier stond padding-top om de kolom uit te lijnen met het eerste veld, want
   ze begon zonder kop. Nu draagt ze er wel een en lijnen beide koppen op
   dezelfde hoogte uit. De tweede kop is bewust een maat kleiner: twee koppen
   van gelijk gewicht naast elkaar vragen om dezelfde aandacht, en die gaat
   naar het formulier. */
.formulier-naast > h2 { font-size: var(--text-h3-size);
                        line-height: var(--text-h3-line);
                        margin-bottom: var(--space-5); }
.geruststelling { list-style: none; margin: 0 0 var(--space-8); padding: 0;
                  display: grid; gap: var(--space-5); }
.geruststelling li { display: grid; gap: var(--space-1);
                     position: relative; padding-left: var(--space-5); }
/* Hetzelfde streepje als bij de punten in een kaart. Hier stond een gekleurde
   rand van twee pixels; dat is een generiek callout-teken dat niets met dit
   merk te maken heeft, terwijl het streepje wel uit de eigen vormentaal komt. */
.geruststelling li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: var(--space-3); height: 2px; border-radius: var(--radius-full);
  background: var(--mt-blue);
}
.geruststelling strong { font-size: var(--text-body-size); }
.geruststelling span { color: var(--color-text-muted);
                       font-size: var(--text-body-sm-size); }

/* Het sterkste bezwaarantwoord van de site stond weggeklapt in een accordeon
   op twee pagina's, en op geen van beide bij het besluit. Hier staat het open,
   op het tundra-vlak dat het elders ook draagt. */
.gerust-vlak {
  background: var(--shared-tundrasoft); color: var(--mt-navy);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.gerust-vlak h3 { font-size: var(--text-h4-size); margin-bottom: var(--space-2);
                  color: var(--mt-navy); }
.gerust-vlak p { margin: 0; color: var(--tekst-op-tundra); font-size: var(--text-body-sm-size);
                 line-height: 1.7; }

/* honeypot uit beeld, maar niet display:none; sommige bots slaan dat over */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px;
            overflow: hidden; }

/* ---------------------------------------------------------------
   Merkvlakken.
   Het handboek noemt donker-transparant op het eigen merkvlak de
   voorkeurszetting. Op dat vlak dragen azure en cyan de tekst, want
   blue haalt op navy maar 3,82 en dat is te weinig voor tekst.
   --------------------------------------------------------------- */
.hero-donker {
  position: relative; overflow: hidden;
  background: var(--vlak-diep); color: var(--mt-soft);
  border-block: 1px solid var(--vlak-rand);
}
.hero-donker .lead { color: var(--tekst-op-donker); }
.hero-in { position: relative; z-index: 1; }
/* het embleem als grafisch middel, niet als logo; de uitsparing neemt
   het navy vlak aan waardoor het uit het vlak gesneden lijkt */
/* ---------------------------------------------------------------
   Het embleem als bouwkundig element.

   Het stond hier als plaatje in de rechterhelft: klein genoeg om er
   helemaal op te passen, en daarmee een decoratie. Nu is het groter dan
   het vlak waarin het staat, zodat je het nooit helemaal ziet. De rand
   van de sectie snijdt erdoorheen en het merk loopt het beeld uit.

   Dat is het verschil tussen een logo dat ergens is neergezet en een vorm
   die het vlak draagt. Het handboek staat dit toe: het embleem mag als
   grafisch middel worden ingezet, en de uitsparing neemt de achtergrond
   aan waardoor het uit het vlak gesneden lijkt.
   --------------------------------------------------------------- */
.hero { --em-grootte: min(64vw, 42rem); --em-rechts: -15%; }
.hero-embleem {
  position: absolute; right: var(--em-rechts); top: 50%;
  transform: translateY(-50%);
  width: var(--em-grootte); height: auto; pointer-events: none;
}
/* Groter vlak vraagt minder dekking; anders wint de vorm het van de tekst. */
.hero-donker .hero-embleem { opacity: .22; }
/* Op licht fluistert het. Het embleem is daar een volvlaks blauwe schijf en
   geen uitsparing, dus dezelfde dekking zou de tekst beconcurreren. */
.hero .hero-embleem { opacity: .06; }
/* Op de lichte hero is het embleem een volvlaks blauwe schijf. Die staat in
   de donkere stand op een donkere ondergrond en verdwijnt op 6 procent; iets
   meer dekking geeft hetzelfde fluisterende effect terug. */
:root[data-theme="dark"] .hero .hero-embleem { opacity: .13; }
.hero-eenvoudig { --em-grootte: min(38vw, 24rem); --em-rechts: -8%; }
.hero-eenvoudig .hero-embleem { opacity: .05; }
@media (max-width: 60rem) {
  /* Het snijpunt is de halve eigen breedte en geen percentage van de container.
     Hier stond -34%, en dat werkte voor de gewone hero (64vw breed, ruim de
     helft blijft staan) maar sneed de eenvoudige hero bijna helemaal weg: die
     heeft een embleem van 38vw, en dan blijft er van 148 px nog 16 px over. Op
     de juridische pagina's was daardoor alleen een boogje te zien. Met de halve
     eigen breedte klopt de verhouding voor elke maat. */
  .hero { --em-rechts: calc(var(--em-grootte) / -2); }
  /* En het embleem zelf mag daar ruimer. Op de desktop staat het naast een korte
     titel in een hoge kop en past 38vw; op een telefoon is die kop juist laag en
     smal, en dan oogt een kleine schijf als een plaatje dat is neergelegd in
     plaats van een vorm die het vlak draagt. Op 56vw blijft er 109 px staan,
     dicht bij de 125 px van de gewone hero, zodat beide soorten pagina's er
     hetzelfde bij staan. */
  .hero-eenvoudig { --em-grootte: min(56vw, 20rem); }
  .hero-donker .hero-embleem { opacity: .14; }
  .hero .hero-embleem { opacity: .04; }
}

/* Azure hoort op donker en nergens anders. Op het lichte vlak haalt hij 2,46
   en op wit 2,60, allebei ver onder de 4,5 die deze maat tekst nodig heeft.
   Dat gold al voor de labels op de kaarten en werd erger toen de eyebrow ook
   op de lichte heros kwam. Nu andersom: gedempt als standaard, accent alleen
   waar de ondergrond het draagt. */
.eyebrow {
  font-size: var(--text-overline-size); line-height: var(--text-overline-line);
  font-weight: var(--text-overline-weight); letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.hero-donker .eyebrow, .vlak-donker .eyebrow, .voet .eyebrow,
.hero-donker .knop-stil {
  background: transparent; color: var(--mt-soft); border-color: var(--mt-azure);
}
.hero-donker .knop-stil:hover { background: rgb(255 255 255 / .08); }

/* ---------------------------------------------------------------
   Focus op donkere vlakken.

   tokens.css zet één focusring voor de hele site en dat is goed, maar de
   kleur is #071B33, en dat is exact --mt-navy. Op elk donker vlak is die
   ring dus onzichtbaar: navy op navy haalt 1,0:1. Dat raakt de twee
   hero-knoppen, de link in het uitgelichte blok en alle vijftien links in
   de voet, op elke pagina. Iemand die met tab door de voet loopt ziet
   niets bewegen.

   In tokens.css staat wel een azuren ring, maar die zit in het
   data-theme-blok. Dat wordt inmiddels wel gezet, door thema-script.php, dus
   in de donkere stand komt de azuren ring daar al vandaan. In de lichte stand
   niet, en daar staan deze vier vlakken ook. Hier wordt hij alsnog
   gebruikt: azure haalt 6,59:1 op navy.

   Alleen de variabele wordt opnieuw gezet, niet de regel zelf. Die staat
   in tokens.css op :where() en dus op specificiteit nul; hem hier
   overschrijven zou de generator en dit bestand uit elkaar laten lopen.
   Een variabele erft, dus dit is genoeg.
   --------------------------------------------------------------- */
.hero-donker, .vlak-donker, .voet, .case-uitgelicht {
  --color-focus-ring: var(--mt-azure);
  /* Zelfde soort correctie, een regel lager in dezelfde cascade. De lichte
     stand laat de knop bij hover naar #0A2947 gaan, en dat is op een navy
     vlak 1,17: de knop lost op in de grond waar hij op staat. Op deze vier
     vlakken gaat hij daarom omhoog naar azuur, met navy erop. */
  --button-primary-bg-hover: var(--mt-azure);
  --button-primary-bg-active: var(--mt-azure);
  --knop-primair-fg-hover: var(--mt-navy);
}
/* In de donkere stand is de hele pagina zo'n vlak. Daar staat de azuren
   hoverkleur al in tokens.css; alleen de letterkleur moest nog mee. */
:root[data-theme="dark"] { --knop-primair-fg-hover: var(--mt-navy); }

/* summary staat niet in de opsomming in tokens.css, terwijl de vragen in de
   faq het belangrijkste bedienbare element van die sectie zijn. Tot dat in
   tools/tokens.py rechtgezet is, staat het hier. */
summary:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

.sectiekop { margin-bottom: var(--space-6); }

/* ---------------------------------------------------------------
   Het register.

   Hier stonden gelijke kaartjes met een eyebrow boven elke kop. Wit op
   wit met een haarlijn eromheen: het kader zei alleen "hier eindigt een
   ding", en dat kan een lijn ook. Wat overblijft is een geruit vel. Elk
   item begint met een haarlijn en een streepje in de accentkleur dat er
   precies op ligt, op de plek waar een tab in een register zit.

   Dat streepje is dezelfde vorm als het ritme boven de sectiekop, alleen
   een maat kleiner en in een kleur: 2,25rem breed, gelijk aan het eerste
   segment van --ritme. De sectie houdt het volledige ritme, de items een
   afgeleide ervan. Zo is er een rangorde binnen hetzelfde motief in
   plaats van twee losse versieringen.

   Alleen een lijn boven en niet rondom. Een raster van lijnen zou bij een
   onvolledige laatste rij gaten laten zien, en dit blok wordt met twee,
   drie en zes items gebruikt.
   --------------------------------------------------------------- */
.blokken { padding-block: var(--space-12); }
/* 20rem en niet 16: op 16 passen er vier naast elkaar, en bij zes items
   levert dat een rij van vier met twee eronder. Op 20rem worden het er drie,
   wat bij zes netjes uitkomt en bij drie of twee ook. */
/* Lucht boven de eerste haarlijn. Boven de sectiekop staat het ritme al als
   streep, en zonder deze marge komen ritme, kop en de eerste rij lijnen met
   hun streepjes binnen een halve centimeter onder elkaar te staan. Drie
   horizontale merktekens vlak op elkaar leest als ruis. */
.raster { display: grid; column-gap: var(--space-8); row-gap: var(--space-10);
          margin-top: var(--space-8);
          grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.blok {
  position: relative;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}
/* Op de lijn en niet eronder: top -1px legt het streepje precies over de
   haarlijn heen, zodat het er een dikker en gekleurd stuk van lijkt in
   plaats van een tweede element vlak eronder. */
.blok::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 2.25rem; height: 3px; border-radius: var(--radius-full);
  background: var(--mt-blue);
}
.blok h3 { font-size: var(--text-h4-size); line-height: var(--text-h4-line); }
/* De leus die eerst de kop was. Zwaar genoeg om de regel te dragen, niet
   zo zwaar dat hij met de naam erboven concurreert. */
.blok-claim { font-weight: 600; color: var(--color-text);
              margin: var(--space-2) 0 0; }
.blok p  { color: var(--color-text-muted); margin: var(--space-2) 0 0; }
/* Twee merken naast elkaar schaal je op hoogte en niet op breedte. De kaders
   zijn per merk even hoog maar verschillend breed, dus bij een gelijke breedte
   staat het ene woordmerk kleiner dan het andere. Op 76 px hoog komen ze uit
   op 301 en 279 px breed, allebei boven de ondergrens van de primaire lockup.
   Het handboek waarschuwt hier letterlijk voor. */
.blok-logo { display: block; height: 76px; width: auto; max-width: 100%;
             margin-bottom: var(--space-4); }
@media (max-width: 30rem) { .blok-logo { height: auto; width: min(100%, 280px); } }

/* Punten binnen een kaart. Geen bolletjes maar een streepje in de accentkleur:
   een lijst met opsommingstekens leest als tekst die toevallig opgesomd is,
   terwijl dit een verdeling is die je kolom voor kolom vergelijkt. */
.blok-punten { list-style: none; margin: var(--space-3) 0 0; padding: 0;
               display: grid; gap: var(--space-2); }
.blok-punten li { position: relative; padding-left: var(--space-5);
                  color: var(--color-text-muted);
                  font-size: var(--text-body-sm-size); line-height: 1.6; }
.blok-punten li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: var(--space-3); height: 2px; border-radius: var(--radius-full);
  background: var(--mt-blue);
}

.vlak-donker { background: var(--vlak-diep); color: var(--mt-soft);
               border-block: 1px solid var(--vlak-rand); }
.vlak-donker .blok-punten li { color: var(--tekst-op-donker); }
.vlak-donker .blok-punten li::before { background: var(--mt-azure); }
/* Op navy is een haarlijn van de lichte rand onzichtbaar; wit met lage
   dekking wel. Zelfde waarde als de scheidingslijn in de voet, zodat de
   twee donkere vlakken dezelfde lijn voeren. */
.vlak-donker .blok { border-top-color: rgb(255 255 255 / .16); }
.vlak-donker .blok::before { background: var(--mt-azure); }
.vlak-donker .blok-claim { color: var(--mt-soft); }
.vlak-donker .blok p { color: var(--tekst-op-donker); }

/* stappen; de nummering is een volgorde in de tijd, geen versiering */
.stappen { padding-block: var(--space-12); background: var(--color-surface-raised); }
.stappenlijst { list-style: none; margin: 0; padding: 0;
                display: grid; gap: var(--space-6);
                grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.stappenlijst li { display: flex; gap: var(--space-4); align-items: flex-start; }
.stapnummer {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  background: var(--mt-blue); color: var(--color-action-fg); display: grid; place-items: center;
  font-weight: 600; font-size: var(--text-body-sm-size);
}
.stappenlijst h3 { font-size: var(--text-h4-size); margin-bottom: var(--space-1); }
.stappenlijst p  { color: var(--color-text-muted); margin: 0; }

/* de faq krijgt lucht en een rustiger kader */
.faq { background: var(--color-surface); }

/* ---------------------------------------------------------------
   Stealth Tundra, de gedeelde steunkleur.

   Twee plekken, meer niet. Het handboek zegt 5 tot 15 procent van een
   uiting; de merkmockup houdt voor Mikrotools 6 tot 8 procent aan.

   De contrastmetingen bepalen waar het kan:
     tekst op tundra-soft   navy 13,95 en graphite 9,20 halen het;
                            blue 3,65, azure 2,12 en wit 1,24 niet.
     tundra als streep      op navy 8,43; op wit 2,05 en dus niet.

   Daarom: een rustig vlak met navy tekst, en twee accentstreepjes die
   alleen op het donkere vlak staan. Nooit onder het logo, nooit op een
   knop, nooit in de navigatie.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Het ritme.

   De twee streepjes uit de merkmockup zijn het terugkerende teken van
   deze site. Ze stonden alleen boven de hero; nu markeren ze elke
   sectiekop, zodat de pagina een maat krijgt in plaats van een reeks
   losse blokken.

   Een definitie, niet drie. Welke twee kleuren het zijn hangt af van de
   ondergrond en staat als --ritme op het vlak, want tundra haalt op wit
   maar 2,05 en azure 2,12: als streep zonder tekstfunctie mag dat, maar
   dan zie je hem niet.
   --------------------------------------------------------------- */
:root {
  --ritme: linear-gradient(to right,
           var(--shared-graphite) 0 2.25rem,
           transparent 2.25rem 2.75rem,
           var(--mt-blue) 2.75rem 100%);
}
/* Op donker wisselt het ritme van paar. Grafiet haalt op navy nog geen 1,5
   en zou dus als eerste streepje simpelweg ontbreken, waardoor het motief van
   twee naar een streep valt en niet meer als motief leest. Tundra en azure
   doen het daar wel. In de donkere stand geldt dat voor de hele pagina en
   niet alleen voor de vlakken, want dan is de pagina zelf navy. */
.hero-donker, .vlak-donker, .voet,
:root[data-theme="dark"] {
  --ritme: linear-gradient(to right,
           var(--shared-tundra) 0 2.25rem,
           transparent 2.25rem 2.75rem,
           var(--mt-azure) 2.75rem 100%);
}
/* Het streepje boven een registeritem volgt dezelfde redenering: blue haalt
   3,82 op navy, genoeg voor een streep maar niet ruim, azure haalt 6,59. */
:root[data-theme="dark"] .blok::before { background: var(--mt-azure); }
/* De haarlijn van het register is geen versiering maar de structuur; haal hem
   weg en de sectie valt uit elkaar. In de donkere stand komt --color-border
   uit op 1,33 tegen de pagina, gemeten op de gerenderde pixel en niet op de
   bedoeling, en dat is te weinig om die rol te dragen. Op 22 procent wit komt
   hij op 2,01: nog steeds een haarlijn, wel een die er is.

   Geen 3:1 nagestreefd. Die eis geldt voor de begrenzing van een bedienbaar
   element en niet voor een scheidingslijn, en een lijn die zo hard is trekt de
   aandacht weg van de tekst die hij ordent. */
:root[data-theme="dark"] .blok { border-top-color: rgb(255 255 255 / .22); }
:root[data-theme="dark"] .faq details,
:root[data-theme="dark"] .faq { border-color: rgb(255 255 255 / .18); }
.faq-tundra .wrap {
  --ritme: linear-gradient(to right,
           var(--shared-graphite) 0 2.25rem,
           transparent 2.25rem 2.75rem,
           var(--mt-navy) 2.75rem 100%);
}

.hero .hero-in::before,
.sectiekop::before,
.faq h2::before,
.cta h2::before,
.formulier-hoofd h2::before {
  content: ""; display: block; width: 5.5rem; height: 4px;
  border-radius: var(--radius-full); margin-bottom: var(--space-4);
  background: var(--ritme);
}

/* de faq is de documentatiekant van de pagina en krijgt het rustige vlak.
   Niet als volle sectiebalk: dat mat 17,9 procent van de pagina en dat is
   boven de richtlijn. Als omsloten vlak met wit eromheen komt het uit op
   het niveau dat de merkmockup aanhoudt. */
.faq-tundra { background: var(--color-surface); padding-block: var(--space-12); }
.faq-tundra .wrap {
  background: var(--shared-tundrasoft); color: var(--mt-navy);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-8) var(--space-6);
  width: min(100% - var(--space-8), 58rem);
}
.faq-tundra h2 { color: var(--mt-navy); }
/* Het tundravlak blijft in beide standen crème, dus de scheidingslijn tussen
   de vragen hoort in beide standen donker te zijn. Dat ging mis op gewicht:
   de themaregel hierboven staat op (0,3,1) en zette een witte lijn, terwijl
   deze regel op (0,2,1) verloor. Wit op crème haalt 1,04 en dan is de lijn er
   niet meer: in de donkere stand liep de hele faq als één blok door. Deze
   regel draagt daarom hetzelfde themavoorvoegsel, zodat hij wint op gelijke
   voet in plaats van op een !important. */
.faq-tundra details,
:root[data-theme="dark"] .faq-tundra details { border-bottom-color: rgb(7 27 51 / .18); }
.faq-tundra details:last-of-type,
:root[data-theme="dark"] .faq-tundra details:last-of-type { border-bottom: 0; }
.faq-tundra summary { color: var(--mt-navy); }
/* het plusteken mag hier geen blue zijn; dat haalt 3,65 op deze ondergrond */
.faq-tundra summary::after { color: var(--mt-navy); }
.faq-tundra .antwoord { color: var(--tekst-op-tundra); }
.faq-tundra a { color: var(--mt-navy); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------
   Wat de browser zelf tekent.

   Selectie, cursor en scrollbalk komen standaard uit het besturingssysteem
   en horen bij geen enkele huisstijl. Het is het goedkoopste verschil
   tussen een pagina die gebouwd is en een die in elkaar is gezet.
   --------------------------------------------------------------- */
::selection { background: var(--mt-azure); color: var(--mt-navy); }
:root { caret-color: var(--mt-blue); accent-color: var(--mt-blue); }
/* De logblokken schuiven horizontaal op een smal scherm; een grijze
   systeembalk onder een navy vlak valt daar uit de toon. */
.bewijs-regels { scrollbar-width: thin; scrollbar-color: var(--mt-azure) transparent; }

/* ---------------------------------------------------------------
   Bewijs.

   Het blok dat laat zien wat de tekst beweert. Vorm bewust technisch en
   niet decoratief: geen browservenster met knopjes, geen schuine schaduw,
   geen afgeronde hoeken van acht pixels of meer. Dat leest als
   marketingmockup en doet precies af aan de geloofwaardigheid die dit
   onderdeel moet opbouwen.
   --------------------------------------------------------------- */

.bewijs { padding-block: var(--space-12); }
/* 20rem is de ondergrens waarop de langste logregel nog binnen het kader
   past. Bij drie blokken levert dat op een gewone laptop drie kolommen op;
   bij meer breedte per blok zouden het er twee worden en blijft de derde
   alleen achter. */
.bewijs-raster { display: grid; gap: var(--space-6);
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
/* Kolom, zodat de bronregel onderaan kan worden vastgezet. De blokken zijn
   even hoog omdat grid ze uitrekt; zonder margin-top:auto op de bron zweeft
   die regel per blok op een andere hoogte, en dat valt op een rij van drie
   meteen op. */
.bewijs-blok {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--vlak-kaart);
  border: 1px solid var(--vlak-kaart-rand);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Label boven de titel en niet ernaast. Naast elkaar past alleen zolang de
   titel kort is; bij een langere titel breekt die halverwege af en staat het
   label alleen op de eerste regel. Onder elkaar houdt de titel de volle
   breedte en blijft de kop rustig, ook als er later een langere bij komt. */
.bewijs-kop {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgb(255 255 255 / .10);
}
.bewijs-label {
  font-family: var(--font-family-mono);
  font-size: var(--text-caption-size);
  text-transform: uppercase; letter-spacing: .10em;
  color: var(--mt-azure);
}
.bewijs-titel { font-size: var(--text-body-sm-size); color: var(--mt-soft); font-weight: 600; }

/* Twee kolommen die zich per blok naar hun eigen inhoud voegen.

   Eerder stond hier een vaste min-width op de eerste kolom. Dat werkt zolang
   elk blok dezelfde soort eerste kolom heeft, en dat is niet zo: in het ene
   blok staat er een tijdspanne (08:30-12:00 uur), in het andere een kort label
   (project, notitie). Een breedte die de tijdspanne aankan, is voor die labels
   vier rem te veel, en dan past de langste regel niet meer in het kader. Het
   gevolg was een horizontale scrollbar, in azuur, die er precies uitzag als een
   streep die iemand er per ongeluk had ingezet.

   Met max-content is de kolom in elk blok zo breed als zijn eigen breedste
   inhoud, en niet breder. De regels blijven binnen elkaar uitgelijnd, want het
   is één grid per blok. */
.bewijs-regels {
  list-style: none; margin: 0; padding: var(--space-4);
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--text-caption-size);
  line-height: 1.85;
  color: var(--tekst-op-donker);
  overflow-x: auto;
}
/* De li zelf is geen box meer, zodat de twee spans in de kolommen vallen. */
.bewijs-regels li { display: contents; }
/* Een regel zonder tweede kolom loopt over de volle breedte. Zonder dit rekt
   zo'n losse regel de eerste kolom op tot zijn eigen lengte. */
.bewijs-regels .bewijs-tekst:only-child { grid-column: 1 / -1; }

/* label links, waarde rechts, cijfers onder elkaar */
.bewijs-paren { margin: 0; padding: var(--space-4);
                font-family: var(--font-family-mono);
                font-size: var(--text-caption-size); line-height: 1.85; }
.bewijs-paren > div { display: flex; align-items: baseline; gap: var(--space-3); }
/* Het label krimpt niet en breekt niet. Andersom ging het mis: met flex:1 1 auto
   op de dt werd "bij afsluiten" over twee regels geduwd door een lange waarde
   ernaast, terwijl die waarde zelf op een regel bleef staan. Nu vult de waarde
   de resterende ruimte en breekt die als het krap wordt. */
.bewijs-paren dt { color: var(--tekst-op-donker); flex: 0 0 auto; white-space: nowrap; }
.bewijs-paren dd { margin: 0; color: var(--mt-soft); font-weight: 600;
                   font-variant-numeric: tabular-nums;
                   flex: 1 1 auto; text-align: right; }
/* Geen breedte meer: de grid hierboven lijnt de kolommen uit. Wel nowrap,
   want een tijdspanne of een label hoort nooit halverwege af te breken. */
.bewijs-tijd {
  white-space: nowrap;
  color: var(--mt-azure); font-variant-numeric: tabular-nums;
}
.bewijs-tekst { color: var(--mt-soft); }

.bewijs-uitleg {
  margin: 0; padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-body-sm-size); color: var(--tekst-op-donker);
}
/* Een voorbeeld hoort als voorbeeld herkenbaar te zijn. Zonder deze regel
   wekt het blok de indruk dat het gegevens van een klant toont. */
.bewijs-bron {
  margin: auto 0 0; padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid rgb(255 255 255 / .08);
  font-size: var(--text-caption-size); color: var(--tekst-op-donker); opacity: .8;
}

/* ---------------------------------------------------------------
   Beweging.

   Regel: beweging beantwoordt een handeling en kondigt nooit het
   ontwerp aan. Deed de bezoeker iets, dan antwoordt de site binnen
   200 ms. Deed hij niets, dan staat de site stil. Geen reveals bij
   het scrollen, geen parallax, geen tellers, niets dat vanzelf
   beweegt. Een merk dat rust en precisie verkoopt hoort geen pagina
   te hebben die friemelt.

   Hiervoor stond hier geen enkele transition. Dat leest niet als
   ingetogen maar als onaf: elke toestandswisseling was een harde
   snede tussen twee frames. Ingetogen is een korte, goed gedempte
   overgang.

   Alleen kleur, rand en schaduw bewegen. Nooit layout, want dat
   verschuift tekst onder het oog van de lezer.

   Bewust niet aangesloten: de hovertoestand van de kaarten
   (--card-shadow-hover). Een .blok bevat geen link, dus een
   hover-affordance zou een belofte doen die er niet is. Zodra de
   kaarten klikbaar worden hoort die schaduw erbij, en geen dag
   eerder. Evenmin de disabled-tokens van de knoppen: er is nu geen
   knop die uitgeschakeld kan raken, en css schrijven voor een
   toestand die niet bestaat is precies de dode code die dit bestand
   probeert te vermijden.
   --------------------------------------------------------------- */

/* Indrukken mag te zien zijn. Een knop die bij het indrukken niets doet, laat
   de bezoeker twijfelen of de tik is aangekomen; dat is precies het moment
   waarop hij een tweede keer klikt. 97 procent is klein genoeg om niet als
   effect te lezen en groot genoeg om te voelen. Alleen transform, dus geen
   layout: de knop verschuift niets om zich heen. */
.knop {
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
.knop:active { transform: scale(.97); }
.thema:active, .nav-knop:active { transform: scale(.94); }
.nav ul > li > a:not(.knop) {
  transition: text-decoration-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.nav-knop { transition: background-color var(--motion-fast) var(--motion-ease),
                        transform var(--motion-fast) var(--motion-ease); }
a { transition: text-decoration-thickness var(--motion-fast) var(--motion-ease); }

.veld input, .veld textarea {
  transition: border-color var(--motion-fast) var(--motion-ease);
}

/* De vraag krijgt een zichtbare affordance. Onderstrepen kan op elke
   ondergrond; een kleurwissel niet, want blue haalt op het tundra-vlak
   maar 3,65. */
.faq summary { transition: text-decoration-color var(--motion-fast) var(--motion-ease); }
/* Alleen waar een echte aanwijzer is. Op een touchscreen blijft een hover-stand
   hangen na een tik, tot je ergens anders tikt: de vraag die je net opende bleef
   onderstreept staan. Dat is geen fout in de stijl maar in de aanname dat hover
   iets tijdelijks is.

   En de decoratie ligt op de vraag en niet op de summary, want die bevat ook het
   plusteken. Dat teken hoort niet onderstreept te worden; het is geen woord. */
@media (hover: hover) {
  .faq summary:hover .faq-vraag {
    text-decoration: underline; text-underline-offset: 6px;
  }
}

/* Het antwoord schuift open in plaats van te verspringen. Dit is de enige
   plek waar beweging echt gebruikswerk doet: zonder overgang springt het
   paneel open en verschuift de tekst eronder onder het oog van de lezer.
   Alleen waar de browser ::details-content kent; elders klapt het open
   zoals het altijd deed, en dat werkt gewoon. */
@supports selector(details::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--motion-base) var(--motion-ease),
                content-visibility var(--motion-base) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* Wie beweging heeft uitgezet in het besturingssysteem krijgt geen beweging.
   Dat is iets anders dan geen overgang: de voorkeur gaat over bewegen, niet
   over kleur. Hier stond een regel die alles op 1 ms zette, dus ook het
   oplichten van een link en de randkleur van een invoerveld, en dat zijn nu
   juist de overgangen die helpen begrijpen dat er iets veranderd is.

   Wat weg moet is wat zich verplaatst of van maat verandert: de knop die
   indrukt, de pijl die opzij schuift, het antwoord dat openschuift. Kleur,
   rand en schaduw blijven zoals ze zijn. Animaties zijn er niet op deze
   site, maar de regel dekt ze af voor het geval er ooit een bij komt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .knop:active, .thema:active, .nav-knop:active,
  .case-uitgelicht-link:hover svg,
  .case-kaart:hover .case-kaart-actie svg { transform: none; }
  .faq details::details-content { transition: none; }
}

/* ---------------------------------------------------------------
   Praktijkbewijs en variatie in paginaritme.

   Eén uitgelichte case krijgt een vol vlak en een code-native fragment van
   de echte bediening. Zo bewijst de pagina wat er gebouwd wordt zonder een
   verzonnen dashboard of klantresultaat te tonen.
   --------------------------------------------------------------- */
.case-uitgelicht {
  background: var(--vlak-diep); color: var(--mt-soft);
  border-block: 1px solid var(--vlak-rand);
  padding-block: var(--space-12);
}
.case-uitgelicht-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .82fr);
  gap: var(--space-12); align-items: center;
}
.case-uitgelicht .eyebrow { color: var(--mt-azure); }
.case-uitgelicht h2 { max-width: 18ch; }
.case-uitgelicht-tekst > p:not(.eyebrow) { color: var(--tekst-op-donker); max-width: 54ch; }
.case-uitgelicht-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--mt-soft); font-weight: 600; text-underline-offset: 5px;
}
.case-uitgelicht-link svg,
.case-kaart-actie svg {
  width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--motion-fast) var(--motion-ease);
}
/* Alleen met een echte aanwijzer. Op een telefoon blijft deze stand hangen na
   een tik, en dat is precies te zien als iemand terugkomt van de casepagina:
   de kaart die hij aanklikte staat dan nog opgelicht. */
@media (hover: hover) and (pointer: fine) {
  .case-uitgelicht-link:hover svg,
  .case-kaart:hover .case-kaart-actie svg { transform: translateX(var(--space-1)); }
}

.product-signaal {
  background: var(--vlak-kaart-in); border: 1px solid var(--vlak-kaart-rand);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-3);
}
.product-signaal-kop,
/* Zelfde rol als de bronregel onder een bewijsblok: een voorbeeld hoort als
   voorbeeld herkenbaar te zijn, zeker met een klantnaam erboven. */
.product-bron {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgb(255 255 255 / .08);
  font-size: var(--text-caption-size); color: var(--tekst-op-donker); opacity: .8;
}
/* Tekst die alleen voor een schermlezer bestaat. Wegklippen en niet verbergen:
   display:none zou het ook uit de voorleesvolgorde halen. Zelfde patroon als
   .thema-tekst en .nav-schakel. */
.alleen-voorlezen { position: absolute; width: 1px; height: 1px; margin: -1px;
                    padding: 0; overflow: hidden; clip-path: inset(50%);
                    white-space: nowrap; }
/* De tijdspanne breekt nooit halverwege af. */
.product-tijd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-tot { color: var(--tekst-op-donker); }

.product-totaal {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
}
.product-signaal-kop {
  border-bottom: 1px solid rgb(255 255 255 / .10); font-weight: 600;
}
.product-status {
  color: var(--mt-azure); font-family: var(--font-family-mono);
  font-size: var(--text-caption-size); text-transform: uppercase;
  letter-spacing: .08em;
}
.product-regels { list-style: none; margin: 0; padding: var(--space-2) var(--space-5); }
/* max-content en geen vaste 8,25rem. Een vaste kolom houdt geen rekening met wat
   erin staat: zodra de tijdspanne langer werd (08:30-12:00 uur in plaats van een
   losse begintijd) paste de tweede kolom niet meer en brak het werk over drie
   regels. Nu is de kolom zo breed als zijn eigen inhoud, net als in het
   bewijsblok. */
.product-regels li {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--space-4);
  padding-block: var(--space-4); border-bottom: 1px solid rgb(255 255 255 / .08);
}
.product-regels time {
  color: var(--mt-azure); font-family: var(--font-family-mono);
  font-size: var(--text-body-sm-size);
}
.product-regels span { color: var(--tekst-op-donker); }
.product-totaal { margin: 0; background: rgb(255 255 255 / .04); }
.product-totaal span { color: var(--tekst-op-donker); }
.product-totaal strong { font-size: var(--text-h3-size); }

/* Eén brede case in plaats van een leeg raster dat al meerdere projecten
   suggereert. De hele kaart is de link naar het onderliggende bewijs. */
.cases { padding-block: 0 var(--space-12); }
.cases-lijst { display: grid; gap: var(--space-5); }
.case-kaart {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10); align-items: center;
  padding: var(--space-8); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text);
  text-decoration: none; background: var(--color-surface);
  box-shadow: var(--shadow-1);
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .case-kaart:hover { border-color: var(--mt-blue); box-shadow: var(--shadow-2); }
}
.case-kaart-inhoud { display: grid; }
.case-kaart .eyebrow { margin-bottom: var(--space-2); }
/* Was een strong en is nu een h3, dus de marges van de gewone kopregel gelden
   hier ook. Die worden hier overschreven: de kaart regelt zijn eigen ruimte. */
.case-kaart-titel {
  font-size: var(--text-h3-size); line-height: var(--text-h3-line);
  margin: 0 0 var(--space-2);
}
.case-kaart-tekst { color: var(--color-text-muted); max-width: 68ch; }
.case-kaart-punten {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4); color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
}
.case-kaart-punten > span { position: relative; padding-left: var(--space-5); }
.case-kaart-punten > span::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: var(--space-3); height: 2px; background: var(--mt-blue);
}
/* Het semantische token en niet de merkkleur. Hier stond --mt-blue, en die
   staat vast op #0677D8: op de witte kaart in de lichte stand is dat 4,53 en
   dus goed, maar op de navy kaart in de donkere stand 3,82 en dus te weinig.
   --color-text-accent is dezelfde kleur in het licht en azuur in het donker,
   en dat is precies waar dat token voor bestaat. */
.case-kaart-actie {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-text-accent); font-weight: 600; white-space: nowrap;
}

/* Hier stond content: none op allebei, met als reden dat de cta en het
   formulier inhoudelijk al duidelijk zijn. Het gevolg was dat juist de twee
   vlakken waar een bezoeker een besluit neemt, de enige koppen op de site
   waren die buiten het ritme vielen. Het streepje is geen versiering maar het
   teken dat een sectie begint; laat je het daar weg, dan lezen die twee als
   losse blokken in plaats van als het eind van de pagina. */

/* Een echte button krijgt dezelfde afwerking als de linkvariant van de CTA. */
button.knop { border: 0; font-family: inherit; cursor: pointer; }

.nav-tekst-dicht { display: none; }

@media (max-width: 60rem) {
  .case-uitgelicht-in { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 48rem) {
  .hero h1 { font-size: 2.35rem; line-height: 1.12; }
  .nav-schakel:checked ~ .nav-knop .nav-tekst-open { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-tekst-dicht { display: inline; }
  .product-regels li { grid-template-columns: 1fr; gap: var(--space-1); }
  .case-kaart { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
  .case-kaart-punten { display: grid; gap: var(--space-2); }
  .case-kaart-actie { justify-self: start; }
}