/* ===========================================================================
   FRANCHISEHUB, DE GEDEELDE OPMAAK VAN ALLE PUBLIEKE PAGINA'S

   WAT HIER WEL EN NIET IN HOORT
   Hier staat wat op ELKE publieke pagina hetzelfde is: de basis, de
   bouwstenen, de kopbalk, het menupaneel, de voet, het donkere oppervlak, de
   vierkantjes-taal en de twee blokken waarmee elke verdiepingspagina eindigt.
   De COMPOSITIE van een pagina staat nooit hier maar in een eigen bestand
   ernaast: landing-voorpagina.css, landing-matching.css, landing-bewijs.css,
   landing-ai-assistent.css, landing-werken-bij.css.

   Die grens is er om twee redenen. De eerste is de bezoeker: zou de compositie
   van acht pagina's hier staan, dan haalt iemand die er een wil zien de opmaak
   van alle acht op. De tweede is het onderhoud: alles in dit bestand wordt
   op elke pagina tegelijk gewijzigd en dat moet je zien aan waar het staat.

   HOE DEZE GRENS TOT STAND IS GEKOMEN, want dat is niet op gevoel gegaan
   Tot 02-09-2026 stond dit alles in een landing.css met een grensmarkering
   erin en de aantekening dat er nog niet te splitsen viel: er was een publieke
   pagina, dus elke scheiding was een vermoeden. Met /matching en /bewijs erbij
   is het gemeten in plaats van geraden: elke selector onder die markering is
   tegen de klassen van de drie pagina's gelegd. Wat twee of meer pagina's
   gebruiken staat nu hier, wat alleen de voorpagina gebruikt staat in
   landing-voorpagina.css.

   De meting leverde meteen het bewijs dat het moest. De donkere sectie stond
   op dat moment op drie plekken: een keer hier en een keer in elk van de twee
   nieuwe stijlbestanden, allemaal met dezelfde vier declaraties en allemaal
   met een eigen .titel-2{color:#fff}. Een dag oud en al uit elkaar aan het
   lopen.

   EEN VERHUIZING DIE NIET UIT DE METING VOLGT
   De vierkantjes-taal staat hier terwijl vandaag alleen de voorpagina hem
   gebruikt. Dat is met opzet: het is geen sectiedecoratie maar een vocabulaire
   met vijf vastgelegde standen en een legenda die de bezoeker uitlegt wat ze
   betekenen. Een woordenboek dat op een pagina geldt is geen taal. De legenda
   zelf blijft wel bij de voorpagina, want die is de compositie van een sectie.

   DE INDELING, in de volgorde van dit bestand
     1. tokens          niet hier, die staan in landing-tokens.css
     2. basis           reset en elementstijlen
     3. bouwstenen      knoppen, etiketten, koppen, chips, vormen, sectiecasco
     3b. slotblokken    wat het oplevert, verder lezen
     3c. kopbalk        met het menupaneel eronder
     3d. vierkantjes    het criteriaraster en de vijf standen
     3e. bewijsregel    een oordeel met zijn stand
     3f. donker vlak    het oppervlak dat vier secties delen
     3g. voettekst
     4. schermbreedtes  alleen die van het bovenstaande

   CONSISTENTIE ZIT IN HET VAKWERK, NIET IN DE VORM
   De opdracht is dat geen twee secties er hetzelfde uitzien. Dat botst met wat
   een ontwerpsysteem normaal doet. De oplossing: type, kleur, ritme, timing en
   focusstijlen zijn overal gelijk, de compositie per sectie niet. Dezelfde
   materialen, andere gebouwen.

   De contrastverhoudingen in dit bestand zijn doorgerekend op de echte DOM met
   de alphalagen erin verwerkt, niet geschat. Wie een kleur wijzigt, meet
   opnieuw.
   =========================================================================== */

*{box-sizing:border-box}

/* ---------------------------------------------------------------------------
   1. TOKENS
   Staan in /css/landing-tokens.css, dat elke pagina VOOR dit bestand linkt. De
   volgorde is geen smaak: alles hieronder leest var(--blauw) en var(--r5). Een
   custom property die nog niet is gedefinieerd valt terug op niets. Wie de
   twee omdraait krijgt een pagina zonder kleur en zonder ruimte.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2. BASIS
   --------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--wit);color:var(--ink-500);
  font-family:var(--letter);font-weight:400;font-size:var(--t-base);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blauw);text-decoration:none;transition:color var(--duur-kort) var(--soepel)}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:var(--rond-sm)}
::selection{background:var(--blauw);color:#fff}
::placeholder{color:var(--ink-400)}
[data-noscroll]::-webkit-scrollbar{display:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--wit)}
::-webkit-scrollbar-thumb{background:rgba(22,26,61,.16);border-radius:var(--rond-vol)}
::-webkit-scrollbar-thumb:hover{background:rgba(52,85,212,.45)}

@keyframes fhBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fhFlow{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes fhDrijf{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-14px,0) rotate(2.5deg)}}

/* Beweging is een hulpmiddel, geen voorwaarde. Wie er last van heeft krijgt
   dezelfde pagina zonder. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------------------------
   3. BOUWSTENEN
   --------------------------------------------------------------------------- */

/* ---------- Typografie ---------- */
.titel-1{
  font-family:var(--letter);font-weight:600;color:var(--ink-900);
  font-size:var(--t-h1);line-height:1;letter-spacing:-.035em;text-wrap:balance;
}
.titel-2{
  font-family:var(--letter);font-weight:600;color:var(--ink-900);
  font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;
}
.lead{font-size:var(--t-lg);line-height:1.65;color:var(--ink-500);font-weight:400}

/* Mono is teruggebracht tot echte accenten: labels, statussen en losse
   getallen. Het stond op 65 plekken en werd daardoor de gewone letter. */
.mono{
  font-family:var(--mono);font-size:var(--t-2xs);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);
  font-variant-numeric:tabular-nums;
}
.mono-sm{font-size:10px;letter-spacing:.12em}

/* De accentzin in de titel. Geen platte kleurwissel maar een geschilderde
   vlek met vier ongelijke hoeken, die met de tekst meeloopt als hij afbreekt. */
.markeer{position:relative;color:var(--roze-diep);white-space:nowrap;isolation:isolate}
/* De vlek staat in een eigen laag met een vaste hoogte. Een gewone
   achtergrondkleur op inline tekst vult het hele lettervak van de letter en dat
   is bij line-height 1 hoger dan de regel: de vlek dekte dan de staarten van de
   regel erboven af. */
.markeer::before{
  content:"";position:absolute;z-index:-1;
  left:-.12em;right:-.12em;top:50%;height:1.04em;transform:translateY(-52%);
  background:var(--roze-zacht);
  border-radius:.34em .58em .3em .5em;
}

/* ---------- Etiket boven een kop ---------- */
.etiket{
  display:inline-flex;align-items:center;gap:var(--r2);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--blauw);
}
.etiket-stip{width:6px;height:6px;border-radius:50%;background:var(--blauw);box-shadow:0 0 8px var(--blauw);flex:0 0 auto}
.etiket-roze{color:var(--roze)}
.etiket-roze .etiket-stip{background:var(--roze);box-shadow:0 0 8px var(--roze)}
.etiket-licht{color:var(--band-lila)}
.etiket-licht .etiket-stip{background:var(--band-lila);box-shadow:0 0 10px rgba(195,189,245,.8)}

/* ---------- Knoppen ----------
   Elk interactief element heeft hier default, hover, active, focus-visible en
   disabled. Hover staat in @media (hover:hover), anders houdt een
   aanraakscherm de hoverstand vast na een tik. */
.knop{
  display:inline-flex;align-items:center;gap:var(--r2);
  padding:14px 24px;border-radius:var(--rond-sm);
  font-weight:600;font-size:var(--t-base);line-height:1;
  border:1px solid transparent;
  transition:transform var(--duur) var(--soepel),
             box-shadow var(--duur) var(--soepel),
             background var(--duur) var(--soepel),
             border-color var(--duur) var(--soepel),
             color var(--duur) var(--soepel);
}
.knop-klein{padding:10px 17px;font-size:var(--t-md)}
.knop-groot{padding:16px 28px;font-size:var(--t-lg)}

.knop-vol{background:var(--blauw);color:#fff;font-weight:700;box-shadow:var(--schaduw-blauw)}
.knop-vol:active{transform:translateY(0) scale(.985);background:var(--blauw-diep);box-shadow:var(--schaduw-1)}

.knop-rand{background:var(--wit);border-color:var(--rand-sterk);color:var(--ink-700)}
.knop-rand:active{transform:translateY(0) scale(.985);background:var(--blauw-zacht);border-color:var(--blauw-rand)}

.knop:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}
.knop-vol:focus-visible{outline-color:var(--ink-900)}
.knop[aria-disabled="true"],.knop:disabled{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none;
}

@media (hover:hover){
  a:hover{color:var(--blauw-diep)}
  .knop-vol:hover{transform:translateY(-2px);background:var(--blauw-diep);box-shadow:0 22px 44px -18px rgba(36,64,173,.6)}
  .knop-rand:hover{transform:translateY(-2px);border-color:var(--blauw-rand);background:var(--blauw-zacht);color:var(--blauw-diep)}
}

/* Een tekstlink die als vervolgstap fungeert. De pijl schuift, de tekst niet:
   dat leest als richting zonder de regel te laten verspringen. */
.verder{
  display:inline-flex;align-items:center;gap:var(--r2);
  font-size:var(--t-md);font-weight:700;color:var(--blauw);
}
.verder::after{content:"\2192";transition:transform var(--duur) var(--soepel)}
.verder:focus-visible{outline:2px solid var(--blauw);outline-offset:4px}
.verder-grijs{color:var(--ink-700)}
@media (hover:hover){
  .verder:hover::after{transform:translateX(4px)}
  .verder-grijs:hover{color:var(--blauw-diep)}
}

/* ---------- Chips ----------
   De kaart, de opsomming met bolletjes en de opsomming met plussen zijn hier
   op 02-09-2026 uit verdwenen. Niet omdat ze slecht waren maar omdat ze op elke
   sectie hetzelfde beeld opleverden: etiket, kop, alinea, kaartjes. De secties
   dragen hun eigen compositie nu zelf. Wat er van de bouwstenen over is, is wat
   overal hetzelfde hoort te zijn: type, kleur, knoppen, chips en de focusring. */
.chip{
  display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--rond-vol);
  border:1px solid var(--rand);background:var(--wit);color:var(--ink-700);font-size:var(--t-sm);
}
.chip-blauw{border-color:var(--blauw-rand);background:var(--blauw-zacht);color:var(--blauw-diep)}

/* Een rij losse begrippen op één regel, gescheiden door een punt. Als opsomming
   met bolletjes zouden het weer lijstjes worden en dat is precies wat er weg
   moest.

   De punt staat ACHTER het begrip en niet ervoor. Bij het afbreken over twee
   regels begint de tweede regel anders met een losse punt en dat leest als een
   fout. Achteraan valt hij aan het regeleinde weg. */
.reeks{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) 0}
.reeks span:not(:last-child)::after{content:"·";margin:0 12px;color:var(--ink-300)}
.reeks-kop{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-400);
}

/* ---------- Vormen en overgangen ----------
   Een koepel: de bovenrand van een sectie bolt op en duikt onder de vorige
   sectie door. Zo lopen twee vlakken in elkaar over in plaats van als banden
   op elkaar te stapelen. Puur CSS, geen SVG en geen afbeelding. */
.koepel{clip-path:ellipse(160% 100% at 50% 100%)}
.koepel-op{margin-top:calc(var(--r8) * -1);position:relative;z-index:1}

/* Een organische vlek. Twee ervan met multiply erover geven op de plek waar ze
   elkaar overlappen vanzelf een derde tint: dat is het in elkaar smelten. */
.vlek{position:absolute;pointer-events:none;mix-blend-mode:multiply}
.vlek-blauw{background:radial-gradient(120% 120% at 30% 25%,var(--blauw-zacht),var(--papier-lila) 70%,transparent 100%);border-radius:var(--blob-a)}
.vlek-roze{background:radial-gradient(120% 120% at 70% 30%,var(--roze-zacht),var(--papier-roze) 72%,transparent 100%);border-radius:var(--blob-b)}

/* Een wolk in plaats van een vlek: geen leesbare rand, alleen een tonale
   verzachting. Waar een vlek een object draagt, brengt een wolk twee vlakken
   naar elkaar toe. */
.wolk{position:absolute;pointer-events:none;mix-blend-mode:multiply;border-radius:50%}
.wolk-blauw{background:radial-gradient(closest-side,var(--blauw-zacht),rgba(222,231,253,0))}
.wolk-roze{background:radial-gradient(closest-side,var(--roze-zacht),rgba(251,221,233,0))}

/* Een fijn puntenraster geeft de lichte vlakken textuur zonder een byte te
   kosten. Het masker laat het naar de randen toe oplossen. */
.raster{
  background-image:radial-gradient(rgba(22,26,61,.07) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(115% 78% at 50% 34%, #000 18%, transparent 76%);
  mask-image:radial-gradient(115% 78% at 50% 34%, #000 18%, transparent 76%);
}
.raster-licht{
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(115% 78% at 50% 34%, #000 18%, transparent 76%);
  mask-image:radial-gradient(115% 78% at 50% 34%, #000 18%, transparent 76%);
}

/* ---------- Sectiecasco ----------
   HET RITME VAN DE PAGINA, in een regel opgeschreven zodat het niet per sectie
   opnieuw wordt uitgevonden. Tot 02-09-2026 was het ritme gelijk aan de
   achtergrondkleur: wit, band, wit, papier, band, om en om. Elf secties lang
   even luid, dus geen enkel moment dat opvalt. Nu zijn er vijf soorten
   momenten met elk een eigen regel voor hoeveel er te zien mag zijn.

     heromoment     hero, modules        volle breedte, displaytype, levend product
     productmoment  matching, crm, ai    het scherm domineert, tekst ernaast
     datamoment     strook, marketing    dicht, klein, mono, veel getallen
     stiltemoment   twee stuks           een zin, verder niets, drie keer de ruimte
     merkmoment     bewijs, slot         donker oppervlak, een claim

   EN DE VIER OVERGANGEN, elk precies een keer. Er waren er drie en die waren
   alle drie dezelfde koepel; bij drie keer is een vorm geen accent meer maar
   een sjabloon.

     gebogen     modules -> assistent   .koepel, de enige die overblijft
     naadloos    platform -> matching   een verloop in de eerste 110px, geen lijn
     hard        matching -> bewijs     een rand over de volle breedte
     interface   crm -> modules         het venster zelf steekt door de grens

   Wie hier een vijfde overgang bij wil, haalt er eerst een weg. */
.sectie{padding:var(--r-sectie) var(--r-kant);scroll-margin-top:84px;position:relative}
.binnen{max-width:var(--breed);margin:0 auto;position:relative}
/* Bewust geen breedte op het blok zelf: de regellengte hoort bij de kop en bij
   de inleiding apart, want een kop van 52px en een lopende regel van 15px
   breken bij een heel andere breedte prettig af. Die maten staan per sectie. */

/* Wel in de voorleesvolgorde, niet in beeld. Voor labels bij een knop die zijn
   betekenis uit een vorm haalt. `display:none` zou hem ook voor een schermlezer
   weghalen en dat is precies het omgekeerde van de bedoeling. */
.visueel-verborgen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Zichtbaar voor het toetsenbord, weg voor de muis. */
.overslaan{
  position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
  background:var(--blauw);color:#fff;font-weight:700;border-radius:0 0 var(--rond-sm) 0;
}
.overslaan:focus-visible{left:0}

/* ---------------------------------------------------------------------------
   3b. DE TWEE BLOKKEN DIE ELKE VERDIEPINGSPAGINA AFSLUITEN

   Elke pagina onder de voorpagina eindigt hetzelfde: eerst wat het oplevert
   voor de franchisegever en voor de kandidaat, dan waar je verder kunt lezen.
   Dat is de structuur die de opdracht voorschrijft en dus per definitie
   gedeeld. Ze stonden een uur lang in de compositie van /matching en dat was
   een fout in wording: /bewijs zou ze een dag later hebben overgeschreven en
   dan waren er twee die uit elkaar gaan lopen.

   De compositie BOVEN deze twee blokken is per pagina anders en hoort daarom
   niet hier. Deze twee zijn het slot, niet het verhaal.
   --------------------------------------------------------------------------- */

/* Twee kolommen, gever en kandidaat. Bewust geen kaarten: het zijn twee
   antwoorden op dezelfde vraag en geen twee producten. */
.baten{background:var(--wit)}
.baten-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px)}
.baat h2{font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;margin-top:var(--r5)}
.baat-lijst{margin:var(--r5) 0 0;padding:0;list-style:none;display:grid;gap:var(--r4)}
.baat-lijst li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r3);align-items:start}
.baat-vink{color:var(--mint);font-size:var(--t-md);line-height:1.6}
.baat-lijst p{font-size:var(--t-base);line-height:1.65;color:var(--ink-600)}
.baat-lijst b{color:var(--ink-900);font-weight:600}

/* Verder lezen. Twee leeskaarten. Dit is de enige plek op een
   verdiepingspagina waar een kaart nog is toegestaan: hier is een kaart precies
   wat het is, een aanklikbaar geheel dat naar iets anders leidt. */
.verderlezen{background:var(--papier);border-top:1px solid var(--rand)}
.verderlezen-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r5)}
.leeskaart{
  display:grid;gap:var(--r3);align-content:start;
  padding:clamp(24px,3vw,38px);border-radius:var(--rond-lg);
  background:var(--wit);border:1px solid var(--rand);
  transition:border-color var(--duur-kort) var(--soepel),
             box-shadow var(--duur-kort) var(--soepel),
             transform var(--duur-kort) var(--soepel);
}
.leeskaart .mono{color:var(--ink-400)}
.leeskaart-naam{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.leeskaart p{font-size:var(--t-md);line-height:1.6;color:var(--ink-600)}
@media (hover:hover){
  .leeskaart:hover{border-color:var(--blauw-rand);box-shadow:var(--schaduw-2);transform:translateY(-2px)}
}
.leeskaart:active{transform:translateY(0)}
.leeskaart:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}

@media (max-width:940px){
  .baten-raster{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .verderlezen-raster{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Kopbalk ---------- */
.balk{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--rand-zacht);
}
.balk-rij{
  max-width:var(--breed);margin:0 auto;
  padding:13px var(--r-kant);display:flex;align-items:center;gap:clamp(14px,3vw,32px);
}
.merk{display:flex;align-items:center;gap:var(--r3);flex:0 0 auto;color:var(--ink-900)}
.merk img{border-radius:var(--rond-xs);box-shadow:0 0 22px -6px var(--blauw-waas)}
.merk-naam{font-family:var(--letter);font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;color:var(--ink-900)}
.menu{
  flex:1 1 auto;display:flex;align-items:center;gap:clamp(12px,1.9vw,24px);
  overflow-x:auto;scrollbar-width:none;font-size:var(--t-md);font-weight:500;
  white-space:nowrap;padding:4px 0;
}
.menu a{color:var(--ink-600);padding:6px 0;border-bottom:1px solid transparent}
.menu a:focus-visible{outline-offset:6px}
.balk-acties{flex:0 0 auto;display:flex;align-items:center;gap:var(--r3)}
.balk-inloggen{color:var(--ink-600);font-size:var(--t-md);font-weight:600}
@media (hover:hover){
  .menu a:hover{color:var(--blauw);border-bottom-color:var(--blauw)}
  .balk-inloggen:hover{color:var(--blauw)}
}

/* De hoofd-CTA in de balk.
   De vaste strook onderaan met "Demo" is weg. Die stond altijd in beeld, nam
   ruimte af van de inhoud en las als een banner in plaats van als een uitnodiging.
   In plaats daarvan draagt de kopbalk de enige hoofd-CTA en die is stil zolang
   de bezoeker nog in de hero staat: daar staat de knop al groot in het beeld en
   twee keer dezelfde vraag boven elkaar is geen aanbod maar aandringen.

   De richting is bewust omgekeerd. Standaard staat de knop gevuld, dus zonder
   JavaScript of met een waarnemer die niet bestaat is hij gewoon zichtbaar. Pas
   als het script vaststelt dat de hero in beeld is, zet het `data-hero` en wordt
   de knop rustig. Iets verstoppen wat je daarna misschien niet meer aan kunt
   zetten is het soort stil verlies waar niemand achter komt. */
.balk[data-hero] .balk-cta{
  background:transparent;color:var(--ink-700);
  border-color:var(--rand-sterk);box-shadow:none;font-weight:600;
}
@media (hover:hover){
  .balk[data-hero] .balk-cta:hover{
    transform:translateY(-2px);background:var(--blauw-zacht);
    border-color:var(--blauw-rand);color:var(--blauw-diep);box-shadow:none;
  }
}

/* ---------- Menuknop en menupaneel ----------
   Onder 900px verdween het menu zonder vervanging: de zeven ankers waren daar
   simpelweg niet te bereiken. Dit paneel is die vervanging. */
.menu-knop{
  display:none;flex:0 0 auto;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--rond-sm);
  background:var(--wit);border:1px solid var(--rand-sterk);color:var(--ink-700);
  transition:background var(--duur) var(--soepel),border-color var(--duur) var(--soepel);
}
.menu-knop:active{background:var(--blauw-zacht);border-color:var(--blauw-rand)}
@media (hover:hover){
  .menu-knop:hover{background:var(--blauw-zacht);border-color:var(--blauw-rand);color:var(--blauw-diep)}
}
/* Drie streepjes, opgebouwd in CSS. Het middelste is het element zelf, de twee
   andere zijn de pseudo-elementen; bij open kruisen ze. Geen SVG en geen icoon
   dat apart moet worden geladen. */
.menu-streep{position:relative;display:block;width:18px;height:1.5px;border-radius:2px;background:currentColor;
  transition:background var(--duur-kort) var(--soepel)}
.menu-streep::before,.menu-streep::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform var(--duur) var(--soepel);
}
.menu-streep::before{top:-6px}
.menu-streep::after{top:6px}
.menu-knop[aria-expanded="true"] .menu-streep{background:transparent}
.menu-knop[aria-expanded="true"] .menu-streep::before{transform:translateY(6px) rotate(45deg)}
.menu-knop[aria-expanded="true"] .menu-streep::after{transform:translateY(-6px) rotate(-45deg)}

.menupaneel{
  position:fixed;inset:0;z-index:90;display:none;
  background:var(--wit);
  padding:calc(var(--r10) + var(--r5)) var(--r-kant) var(--r8);
  overflow-y:auto;overscroll-behavior:contain;
}
.menupaneel[data-open]{display:block}
.menupaneel-lijst{display:grid;gap:2px;max-width:520px;margin:0 auto}
.menupaneel-lijst a{
  display:flex;align-items:center;gap:var(--r4);
  padding:16px 4px;border-bottom:1px solid var(--rand-zacht);
  font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;
}
.menupaneel-nr{
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.menupaneel-voet{max-width:520px;margin:var(--r8) auto 0;display:grid;gap:var(--r3)}
.menupaneel-voet .knop{justify-content:center}
@media (hover:hover){
  .menupaneel-lijst a:hover{color:var(--blauw)}
}

/* ---------- Het criteriaraster, het dragende motief ----------
   Het verhaal van dit product is één zin: 22 kenmerken van een kandidaat tegen
   26 eisen van een formule, elk oordeel met zijn bewijs en daar komt een score
   uit. Dat verhaal heeft een eigen vorm nodig die overal terugkomt, anders
   blijft het een bewering in een alinea.

   Vandaar dit raster: één vakje per kenmerk, in twee rijen. Het verschil tussen
   22 en 26 is daardoor te zien in plaats van te lezen en de dichtheid leest
   als gegevens in plaats van als versiering.

   Kleur is nooit de enige drager. Onder elk raster staat de telling voluit en
   het raster zelf is aria-hidden: een schermlezer krijgt die telling en niet
   achtenveertig betekenisloze vakjes. */
.vakjes{
  display:grid;gap:5px;grid-template-columns:repeat(11,minmax(0,1fr));
}
.vakjes-26{grid-template-columns:repeat(13,minmax(0,1fr))}
/* Groter formaat voor de rasters in de hero. Daar zijn de vakjes het
   onderwerp en geen detail in een tabel. Bij het aanwijzen moet er iets te
   raken zijn. De vergroting bij hover is scale en geen schaduw: een open
   of leeg vakje tekent zijn ring met een inset-schaduw en een tweede
   box-shadow zou die ring wegdrukken. */
.vakjes-groot{gap:7px}
.vakjes-groot .vak{border-radius:4px}
@media (hover:hover){
  .vakjes-groot .vak{transition:background var(--duur-kort) var(--soepel),
                                box-shadow var(--duur-kort) var(--soepel),
                                transform var(--duur-kort) var(--soepel)}
  .vakjes-groot .vak:hover{transform:scale(1.32);position:relative;z-index:2}
}
/* De overgang hoort bij het vakje zelf. Een vakje dat van stand verandert is
   het kleinste signaal dat dit product geeft: hier is een oordeel gewijzigd.
   Zonder overgang springt het raster tijdens de doorloop van de engine en
   dan leest het als flikkering in plaats van als een uitkomst. */
.vak{
  display:block;aspect-ratio:1;border-radius:3px;background:var(--rand);
  transition:background var(--duur-kort) var(--soepel),
             box-shadow var(--duur-kort) var(--soepel);
}
/* Een eigen groen, lichter dan de --mint waarin tekst staat. Elf donkergroene
   vlakjes op een rij lezen als één balk; op deze tint blijven het losse vakjes.
   Contrast tegen het paneel eronder is 3,08:1, ruim boven de eis van 3:1 voor
   een grafisch element dat betekenis draagt. */
.vak-vast{background:#2f9e6d}
.vak-waar{background:var(--blauw)}
/* Een open kenmerk is een ring en geen vlak: het is nog niet ingevuld en dat
   moet je aan de vorm kunnen zien en niet alleen aan de kleur. */
.vak-open{background:var(--wit);box-shadow:inset 0 0 0 1.5px var(--amber)}
.vak-leeg{background:var(--wit);box-shadow:inset 0 0 0 1px var(--rand-sterk)}
.telling{
  margin-top:var(--r3);font-size:var(--t-xs);line-height:1.5;color:var(--ink-400);
  font-variant-numeric:tabular-nums;
}

/* ---------- HET VIERKANTJE ALS TAAL ----------
   Vanaf 02-09-2026 ligt de betekenis vast. Dit is de enige vorm op de pagina
   die nergens anders vandaan komt en die maakt hem alleen iets waard als hij
   overal precies hetzelfde zegt.

   DE BETEKENIS. Eén vierkantje is altijd één ding waar een oordeel over gaat:
   een kenmerk van een kandidaat, een eis van een formule, een bevinding uit
   een gesprek. Nooit een percentage, nooit een stap in een proces, nooit
   versiering.

   DE VIJF STANDEN. Ze staan hieronder in oplopende twijfel en het zijn
   dezelfde vijf die de engine in de hero gebruikt (zie GEWICHT en KLASSE in
   het script onderaan). Wie er een zesde bij wil, wijzigt eerst dat model.

     .vak-vast   vastgesteld        gevuld groen
     .vak-waar   waarschijnlijk     gevuld blauw
     .vak-open   te verifiëren      open, amberen ring
     .vak-leeg   onbekend           open, grijze haarlijn
     .vak        nog niet gewogen   gevuld grijs, de rusttoestand

   Gevuld tegenover open is het verschil tussen "er ligt iets" en "er ligt nog
   niets". Dat is de vormdrager naast de kleur. Wie alleen op kleur zou varen
   verliest het onderscheid bij kleurenblindheid. Juist bij "onbekend" is
   dat het gevaarlijkste: dat vakje mag nooit worden gelezen als "wel goed".
   Daarom staat elke stand ook voluit in de telling eronder en is elk raster
   aria-hidden.

   DE DRIE MATEN, elk met een eigen rol.
     6px   in een lopende zin, waar het woord het vakje meteen benoemt
     12px  in rasters, waar de dichtheid het verhaal is
     40px  als bouwsteen van een groot moment, één keer, in de legenda

   De ring schaalt mee met de maat. Een ring van 1,5px is op 40px een streepje
   en op 6px bijna de hele vorm; zonder meeschalen leest dezelfde stand op elke
   maat als iets anders en dan is het geen taal meer. */
/* Zes pixels in een regel van zeventien. Op de basislijn zou het vakje onder de
   x-hoogte hangen en als een punt lezen; twee pixels omhoog staat het optisch
   midden in het woordbeeld. De marge is alleen rechts, want het vakje staat
   altijd VOOR het woord dat het benoemt: erachter botst het op de komma. */
.vak-mini{
  display:inline-block;width:6px;height:6px;border-radius:2px;
  vertical-align:2px;margin:0 3px 0 1px;
}
.vak-mini.vak-open{box-shadow:inset 0 0 0 1.5px var(--amber)}
.vak-mini.vak-leeg{box-shadow:inset 0 0 0 1px var(--rand-sterk)}
.vak-groot{width:40px;height:40px;border-radius:7px}
.vak-groot.vak-open{box-shadow:inset 0 0 0 5px var(--amber)}
.vak-groot.vak-leeg{box-shadow:inset 0 0 0 3px var(--rand-sterk)}
/* Een bewijsregel: het oordeel links, de stand rechts. Deze regel is de kleinste
   eenheid van het hele product en staat daarom in elke sectie, telkens op een
   andere schaal. */
.bewijsregel{
  display:flex;align-items:center;gap:var(--r3);
  padding:10px 13px;border-radius:var(--rond-sm);
  border:1px solid var(--rand-zacht);background:var(--wit);
  font-size:var(--t-md);color:var(--ink-700);
}
.bewijsregel-stand{margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);white-space:nowrap}
.br-vast{background:var(--papier-mint);border-color:var(--mint-rand)}
.br-vast .bewijsregel-stand{color:var(--mint)}
.br-open{background:var(--papier-amber);border-color:var(--amber-rand)}
.br-open .bewijsregel-stand{color:var(--amber)}
.br-vrij{background:var(--blauw-zacht);border-color:var(--blauw-rand)}
.br-vrij .bewijsregel-stand{color:var(--blauw-diep)}

/* ---------- Het donkere oppervlak ----------
   Vier plekken op de site zijn bijna zwart: de modulesectie en de bewijssectie
   op de voorpagina, het raamwerk op /matching, de harde regel op /bewijs en de
   voet overal. Dat is een merkmoment en geen achtergrondkleur, dus het hoort
   op een plek te staan.

   Tot 02-09-2026 stond het op drie plekken tegelijk: hier plus nog een keer in
   landing-matching.css en landing-bewijs.css, met dezelfde vier declaraties en
   allebei een eigen .titel-2{color:#fff}. Die twee kopieën waren een dag oud.
   Dat is precies hoe werken-bij.html ook is weggelopen, alleen ging dat een
   half jaar ongemerkt.

   De twee regels onderaan zijn de reden dat dit een bouwsteen is en geen
   kleurwaarde: .titel-2 en .lead zetten hun eigen donkere inkt, dus zonder deze
   twee staat er donkerblauwe tekst op een bijna zwart vlak. Wie het vlak zet
   zonder de tekst om te draaien, maakt een sectie onleesbaar.

   Een sectie die dit gebruikt zet class="sectie band-sectie <eigen-naam>". */
.band-sectie{background:var(--band);isolation:isolate;overflow:hidden;color:var(--band-zacht)}
/* .band-waas is op 02-09-2026 verdwenen. Die drie gekleurde wolken lagen op
   alle vier de donkere vlakken en maakten ze onderling inwisselbaar. De strook
   en de voet dragen nu niets, de modules alleen het stippenraster en de
   bewijssectie randlicht. Terug te halen met git revert als een sectie er ooit
   weer een wolk bij nodig heeft. */
.band-raster{position:absolute;inset:0;z-index:0;pointer-events:none}
.band-sectie .binnen{z-index:1}
.band-sectie .titel-2{color:#fff}
.band-sectie .lead{color:var(--band-zacht)}

/* ---------- Voettekst ----------
   Donker. Dat verankert de onderkant van de pagina en zet een streep onder het
   verhaal, in plaats van het te laten uitdoven in nog een lichtgrijs vlak. */
.voet{background:var(--band);color:var(--band-zacht);padding:clamp(46px,6vw,76px) var(--r-kant) var(--r6);position:relative;isolation:isolate;overflow:hidden}
.voet .binnen{z-index:1}
.voet-raster{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--r7) var(--r6)}
.voet-merk{display:flex;align-items:center;gap:var(--r3)}
.voet-merk-naam{font-family:var(--letter);font-weight:700;font-size:var(--t-lg);color:#fff}
.voet p{margin-top:var(--r4);font-size:var(--t-md);line-height:1.65;color:var(--band-zacht);max-width:36ch}
.voet-site{margin-top:var(--r4);display:inline-block;font-size:var(--t-md);font-weight:600;color:var(--band-lila)}
.voet .mono{color:#fff}
.voet-lijst{margin-top:var(--r4);display:grid;gap:var(--r3);font-size:var(--t-md)}
.voet-lijst a{color:var(--band-zacht)}
.voet-onder{
  margin-top:clamp(32px,4vw,52px);padding-top:var(--r5);border-top:1px solid var(--band-rand);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--r3);
  font-size:var(--t-sm);color:var(--band-zacht);
}
.voet-juridisch{display:flex;flex-wrap:wrap;gap:var(--r2) var(--r5)}
.voet-juridisch a{color:var(--band-zacht)}
@media (hover:hover){
  .voet-lijst a:hover,.voet-juridisch a:hover,.voet-site:hover{color:#fff}
}

/* ---------------------------------------------------------------------------
   4. SCHERMBREEDTES

   Alleen de breedtes van het bovenstaande: kopbalk, menupaneel en voet. De
   omslagpunten van de secties staan in het stijlbestand van de pagina zelf.

   Twee ervan zijn hier uit een groter blok gelicht en staan daarom in een
   @media met een enkele regel erin. Dat leest als een halve regel maar is het
   niet: de voet is gedeeld en de secties waar hij op die breedte naast stond
   zijn dat niet.
   --------------------------------------------------------------------------- */

/* Vier voetkolommen worden er twee. Vier kolommen van 200 pixels breken de
   linkteksten af en een menu met afgebroken woorden leest als een fout. */
@media (max-width:940px){
  .voet-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .menu{display:none}
  .menu-knop{display:inline-flex}
  .balk-rij{gap:var(--r3)}
  .balk-acties{margin-left:auto}
  /* Boven deze breedte is er geen menuknop, dus mag het paneel ook nooit open
     staan. Het script sluit het bij het verbreden; dit is de vangnetregel voor
     het geval dat script niet draait. */
  .menupaneel{display:none}
  .menupaneel[data-open]{display:block}
}
@media (min-width:901px){
  .menupaneel{display:none !important}
}

/* En daaronder een kolom. Twee kolommen van 160 pixels leveren hetzelfde
   afbreekprobleem op als vier van 200. */
@media (max-width:520px){
  .voet-raster{grid-template-columns:minmax(0,1fr);gap:var(--r7)}
}

@media (max-width:430px){
  .balk-inloggen{display:none}
}

/* Onder de 340px passen het woordmerk en de knop niet meer naast elkaar met de
   gewone kantlijn: de balk liep dan een paar pixels buiten beeld en de hele
   pagina werd breder dan het venster. Krappere marge en een kleinere knop in
   plaats van iets weghalen, want de demoknop is juist wat hier moet blijven. */
@media (max-width:360px){
  .balk-rij{padding-left:14px;padding-right:14px;gap:var(--r2)}
  .merk{gap:var(--r2)}
  .merk-naam{font-size:var(--t-base)}
  .balk .knop-klein{padding:10px 13px;font-size:var(--t-sm)}
}

/* Onder 350px passen woordmerk, hoofd-CTA en menuknop niet meer naast elkaar:
   de balk liep vijf pixels buiten beeld en daarmee de hele pagina. Het woordmerk
   wijkt, niet de knoppen. Het beeldmerk blijft staan, dus de herkenning en de
   link terug naar boven blijven bestaan; wat er verdwijnt is de herhaling van
   een naam die twee regels lager in de kop al staat. */
@media (max-width:350px){
  .merk-naam{display:none}
}