/* ===========================================================================
   Ōmata productpagina, opmaak.

   Stond tot 3 september 2026 als <style> in index.html. Eruit gehaald zodat
   een sessie die aan de opmaak werkt niet in hetzelfde bestand zit als een
   sessie die aan de markup of de tekst werkt.

   Wordt ook gebruikt door na-het-afsluiten/index.html. Die pagina had een
   letterlijke kopie van dit blok; die is weg.

   HET @import IS HIER WEG, en dat is met opzet.

   Er stond `@import url('lettertypes/instrument-sans.css')` bovenaan. Dat
   werkt, maar het maakt van het lettertype een ketting van drie verzoeken die
   strikt na elkaar moeten: de browser moet eerst dit bestand binnenhalen (82
   kB) én parsen voordat hij de @import-regel ziet, dan de font-css halen, en
   pas dan de woff2. Nagemeten op de proefserver, met nul netwerkvertraging:
   pagina.css klaar op 66 ms, instrument-sans.css start op 95 ms, het woff2
   start op 98 ms. Over een echte 4G-verbinding met 100 ms heen-en-terug is
   dat drie keer wachten op elkaar in plaats van één keer.

   Nu staat het lettertype als gewone <link> in de kop van elke pagina, met
   een <link rel="preload"> voor het latijnse bestand ernaast. Daarmee vraagt
   de browser het lettertype in dezelfde ronde als deze css aan, en niet drie
   rondes later. font-display: swap blijft staan, dus tekst is meteen leesbaar
   in de terugvalletter; het verschil is dat de echte letter er nu veel
   sneller is en de omschakeling dus veel minder opvalt.

   LET OP bij een nieuwe pagina die deze css gebruikt: neem die twee
   link-regels mee. Zonder de <link> naar instrument-sans.css staat de pagina
   in de systeemletter, want deze css declareert de @font-face niet zelf meer.
   =========================================================================== */

  :root {
    /* Palet uit hero-preview.html, ongewijzigd. */
    --sumi:        #242120;
    --sumi-deep:   #1b1918;
    --sumi-light:  #6a6864;
    --shu:         #d1401f;
    --shu-dark:    #7a1f14;
    --shu-deep:    #a8321a;
    --shu-ink:     #d96a4d;
    --washi:       #efe6d8;
    --washi-dim:   #d9cfc0;

    /* De toegestane afwijking, alleen in het motief van de hero.
       shu-hot is Shu met meer vuur, shu-core is de felle kern van een boog.
       Geen nieuwe kleurfamilie: dit blijft rood. */
    --shu-hot:     #f2551f;
    --shu-core:    #ff6a2a;

    --page-bg:      var(--washi);
    --text-primary: var(--sumi-deep);

    /* De ondertitel en de regel staan op sumi-deep in plaats van sumi, en dat
       is geen smaakkwestie maar de goedkoopste marge die er te halen was.

       Die twee staan lager op het scherm, waar de bogen dichter opeen staan
       en de lichtzone al is uitgedoofd. Met sumi zakten ze door AA op vier
       van de dertien geteste schermformaten. Met sumi-deep haalt alles het,
       en het verschil tussen #242120 en #1b1918 is met het oog niet te zien.
       Het alternatief was de lichtzone sterker maken, en dat had juist meer
       boog achter de tekst weggepoetst. */
    --text-body:    var(--sumi-deep);
    --text-accent:  var(--shu-dark);
    --text-note:    var(--sumi-deep);
    --text-invert:  var(--washi);
    --btn-bg:       var(--sumi-deep);
    --btn-bg-hover: var(--sumi);
    --btn-accent:   var(--washi);   /* was shu, zie de uitleg bij .pill .knob */

    /* Het hero heeft zijn eigen set. Standaard wijzen ze naar het palet van
       de pagina, dus zonder data-hero verandert er niets. */
    --hero-bg:        var(--washi);
    --hero-text:      var(--text-primary);
    --hero-arc:       var(--shu);
    --hero-arc-hot:   var(--shu-hot);
    --hero-arc-core:  var(--shu-core);
    --hero-veil-rgb:  239, 230, 216;

    /* DE RUIT VAN ELKE CHATBALK. Eén knop voor alle vier de vormen: de balk
       in het hero van de homepage (.heroballk__vlak--balk, chat.css), de
       reizende balk op een productpagina (.lp-balk__vlak--balk), het veld
       verderop op zo'n pagina (.lp-veld__doos) en het invoerveld daarbinnen.

       Transparant sinds 15 september 2026, op verzoek. Daarvoor stonden ze
       elk op hun eigen dekkende vlak — #171514 op de homepage, --sumi-deep op
       een productpagina — en dat is precies wat "glas" niet is. Wat de vorm
       nu draagt is de rand, de glansregel en de blur eronder.

       Wat NIET meegaat: de verstuurknop. Die blijft de groene schijf die hij
       is, en de knop rechtsonder houdt zijn berekende 0,68 (zie de meting bij
       .lp-balk__vlak--pil in landing.css). Dat is dezelfde regel als bovenaan
       glas.css: de ruit draagt vorm, niet inhoud. */
    --balk-vlak: transparent;

    --font-sans: 'Instrument Sans', sans-serif;

    --wordmark-bar-o:    28px;
    --wordmark-bar-rest: 24px;

    --size-h1:       clamp(34px, 6.2vw, 64px);
    --leading-h1:    1.12;
    --size-promise:  clamp(19px, 2.6vw, 27px);
    --leading-promise: 1.3;
    --size-sub:      clamp(17px, 2.1vw, 21px);
    --leading-sub:   1.62;
    --size-note:     clamp(14px, 1.5vw, 16px);
    --leading-note:  1.6;
    --size-btn:      18px;
    --tracking-tight: -0.025em;

    --gutter:      24px;
    /* DE HOEK RECHTSONDER HEEFT ZIJN EIGEN MARGE, 17 september 2026.

       De knop "Start" zweeft daar over de leestekst, en op een telefoon is
       elke pixel die hij naar het midden opschuift tekst die hij afdekt. De
       gewone gutter van 24 is de marge van de KOLOM — de afstand waarop
       tekst van de schermrand blijft — en dat is een ander getal dan waar
       een zwevende knop hoort te hangen.

       Op een breed scherm blijven ze gelijk; daar is ruimte genoeg en hoort
       de knop op dezelfde lijn als de kolom te staan. Onder 720 wordt het 12
       (zie onderaan dit bestand), en dan staat de knop echt in de hoek.

       Twee afnemers, en dat is met opzet één token: .dock hieronder gebruikt
       hem voor de homepage, en gutter() in site/landing.js leest hem uit voor
       de reizende balk op de productpagina's. Zou elk zijn eigen getal
       houden, dan staat dezelfde knop op twee pagina's anders. */
    --hoek-gutter: var(--gutter);
    --stack:       36px;
    --stack-tight: 18px;
    --nav-h:       68px;
    /* De breedte van de chatbalk in het hero, en daarmee van alles wat
       eronder in dezelfde kolom hoort uit te lijnen. Stond alleen als losse
       waarde op .hero-chatslot in chat.css (de plaatshouder die motief.js
       opmeet om de vast gepositioneerde balk op te zetten); sinds er ook
       kanaalknoppen onder de balk staan, zijn dat twee plekken die dezelfde
       maat moeten houden. Vandaar één token. */
    --herobalk-breed: min(620px, calc(100vw - var(--gutter) * 2));
    --nav-pad-y:   16px;
    --scroll-pad:  88px;

    --max-shell: 1024px;
    --max-head:  860px;
    --max-sub:   580px;

    --radius-pill: 999px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* ZONDER backdrop-filter TOCH EEN VULLING.

     Een doorzichtige balk is een ruit zolang er een blur onder zit. Kan de
     browser dat niet, dan is het geen ruit maar een gat: een rand die over
     het bewegende motief zweeft, met de plaatshouder daar los in. Dan liever
     dekking dan niets — dezelfde keuze als onderaan glas.css en bij
     .lp-balk__vlak--pil in landing.css.

     0,55 en niet hoger: genoeg om de tekst van de bogen te scheiden, weinig
     genoeg om nog als ruit te lezen. Raakt alleen browsers zonder
     backdrop-filter; elke browser die webgl heeft voor het motief zelf, heeft
     dit ook. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --balk-vlak: rgba(var(--hero-veil-rgb), 0.55); }
  }

  /* De donkere variant. Zie de uitleg in het patchbestand; de kern van de
     boog staat op #93b39c omdat dat de felste is die de kop nog 4,5:1 laat
     halen onder de sluier. */
  html[data-hero="donker"] {
    --hero-bg:        #182019;
    --hero-text:      #e8eee1;
    --hero-arc:       #4e6d59;
    --hero-arc-hot:   #6e9179;
    --hero-arc-core:  #93b39c;
    --hero-veil-rgb:  24, 32, 25;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html {
    scroll-padding-top: var(--scroll-pad); -webkit-text-size-adjust: 100%;
  }
  /* BOVENAAN DE HOOFDPAGINA KAN NIETS MEER OMHOOG.

     Sta je op nul, dan is het enige dat nog omhoog beweegt de elastische
     stuiter van het toestel: het beeld veert mee en er komt een strook
     paginagrond boven het donkere hero. Dat is precies het "naar boven
     scrollen" dat hier weg moet. `overscroll-behavior-y: none` zet die
     stuiter uit zonder javascript en zonder iets aan het scrollen zelf te
     veranderen.

     `:has()` en niet op html zelf: pagina.css wordt ook door
     /na-het-afsluiten/ en /over/ geladen, en die pagina's houden hun gewone
     gedrag. Een browser die `:has()` niet kent, houdt de stuiter — dat is de
     stand van vóór deze regel en breekt niets. */
  html:has(section.hero#hero) { overscroll-behavior-y: none; }

  body {
    margin: 0; background: var(--page-bg); color: var(--text-body);
    font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
    /* LANGE WOORDEN MOGEN BREKEN, 17 september 2026, en dit hoort op body
       omdat het een eigenschap van de taal is en niet van een sectie.

       Nederlands stapelt: "bestuurdersaansprakelijkheid",
       "aansprakelijkheidsverzekering", "arbeidsongevallenverzekering". Zo'n
       woord is bij kopmaat breder dan een kolom op een telefoon, en zonder
       breekpunt loopt het gewoon buiten zijn kader. Nagemeten op
       /cyberverzekering/ bij een venster van 320: de alinea in de kaart was
       206 breed en haar inhoud 298.

       Wat je daarvan ziet is de hele pagina: het document wordt breder dan
       het venster, er mag horizontaal gescrold worden, en dus kan er
       uitgezoomd worden tot er een lege strook naast de site staat. De
       melding was "uitzoomen mag niet mogelijk"; de weg daarheen is niet de
       zoom afzetten (dat neemt ook het inzoomen af, en dat heeft iemand
       nodig) maar zorgen dat er niets te scrollen valt.

       hyphens eerst: Safari en Chrome hebben een Nederlands
       woordafbreekwoordenboek, en "bestuurders-aansprakelijkheid" leest als
       taal. Het attribuut lang op <html> wijst de goede aan, ook op /fr/ en
       /en/. break-word is de terugval waar dat woordenboek er niet is.

       Waarom break-word en niet anywhere: break-word laat de gerekende
       minimumbreedte van een blok ongemoeid en verandert dus geen enkele
       grid- of flexberekening; het treedt alleen op wanneer een woord écht
       niet past. `anywhere` zou overal meerekenen, en dat is een veel
       grotere wijziging dan het probleem.

       Dit raakt geen enkel element met white-space: nowrap (de pillen in de
       keuzesectie, de balktekst), want daar wordt niet gebroken. */
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* ---------------------------------------------------------------------
     De navigatiebalk.

     Doorschijnend met een blur erachter, zoals op de homepage, maar in de
     lichte richting: daar een donkere balk over donkere inhoud, hier een
     lichte over lichte.

     De dekking staat op 0,72. Ik had erbij geschreven dat dit de laagste
     waarde was die het contrast haalt, en dat was fout: doorgemeten over
     zeven schermformaten, de hele scroll en elke cursorstand haalt de
     balktekst zelfs bij 0,60 nog 9,92:1, ruim boven de norm van 4,5. De
     balktekst is dus niet de beperkende factor.

     0,72 is een keuze voor het oog, niet voor de norm: doorschijnend genoeg
     om het motief te laten meespelen, dekkend genoeg om rustig te blijven.
     Lager kan als je meer wil zien, en dat kost geen leesbaarheid.

     backdrop-filter doet het echte werk voor het oog: de blur maakt de
     achtergrond egaal, waardoor de balk rustig blijft ook als het motief
     eronder beweegt. Waar dat niet ondersteund wordt, blijft alleen de
     dekking over, en die is op zichzelf al genoeg voor het contrast.
  --------------------------------------------------------------------- */
  .navbar {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    display: flex; align-items: center; gap: 20px;
    padding: var(--nav-pad-y) var(--gutter); height: var(--nav-h);
    background: rgba(239, 230, 216, 0.72);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid rgba(27, 25, 24, 0.08);
  }

  .navbar__links { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
  /* `> a` en niet `a`: sinds het uitklapmenu van 14 september 2026 staan er
     twintig links IN deze nav die geen balklink zijn. Zonder de directe-kind
     selector kregen die de maat, de kleur en `white-space: nowrap` van een
     balklink — en boven het donkere hero ook de lichte hero-kleur, op een
     licht paneel: onleesbaar. Zie .productenpaneel voor hun eigen regels. */
  .navbar__links > a {
    font-size: 14.5px; font-weight: 500; text-decoration: none;
    color: var(--text-body); white-space: nowrap;
    padding: 6px 2px; border-radius: 6px;
  }
  .navbar__links > a:hover { color: var(--shu-dark); }

  /* Donker hero: zolang het hero onder de balk ligt, is de balk donker. Het
     attribuut wordt door paintDock gezet, zie daar. */
  html[data-hero="donker"] .navbar[data-over-hero="true"] {
    background: rgba(var(--hero-veil-rgb), 0.72);
    border-bottom-color: rgba(232, 238, 225, 0.12);
  }
  html[data-hero="donker"] .navbar[data-over-hero="true"] .wordmark,
  html[data-hero="donker"] .navbar[data-over-hero="true"] .navbar__links > a,
  html[data-hero="donker"] .navbar[data-over-hero="true"] .navbar__uitklapknop,
  html[data-hero="donker"] .navbar[data-over-hero="true"] .navbar__login,
  html[data-hero="donker"] .navbar[data-over-hero="true"] .taalkiezer__knop,
  html[data-hero="donker"] .navbar[data-over-hero="true"] .navbar__burger {
    color: var(--hero-text);
  }
  /* 0,65 en niet 0,55. De rand is de begrenzing van een bedieningselement en
     WCAG vraagt daar 3:1 voor. Nagerekend tegen de balk boven de felste boog
     komt 0,55 op 3,26:1 en 0,65 op 3,70:1. Op licht staat dezelfde rand op
     0,55 en haalt daar 3,68; deze waarde brengt de donkere balk op dezelfde
     marge in plaats van er net onder te scheren. */
  html[data-hero="donker"] .navbar[data-over-hero="true"] .navbar__login {
    border-color: rgba(232, 238, 225, 0.65);
  }
  /* Zelfde omlijning en zelfde 0,65 als de inlogknop hierboven, en om
     dezelfde reden: de rand van de taalknop is ook de begrenzing van een
     bedieningselement, dus WCAG vraagt er 3:1 voor. Op licht is de rand
     donker (rgba(27,25,24,0.55) op Washi); op donker moet hij dus licht
     zijn en niet gewoon onzichtbaar dezelfde donkere rand blijven, anders
     is de knop niet meer af te lezen tegen de donkere balk. */
  html[data-hero="donker"] .navbar[data-over-hero="true"] .taalkiezer__knop {
    border-color: rgba(232, 238, 225, 0.65);
  }
  html[data-hero="donker"] .navbar[data-over-hero="true"] .taalkiezer__knop:hover {
    background: rgba(232, 238, 225, 0.10);
  }
  /* Het paneel niet. Dat hangt ónder de balk, over de pagina heen, en niet
     in de balk: het houdt dus zijn eigen lichte achtergrond, ook wanneer de
     balk donker is. Anders zweeft er een donker vlak over lichte inhoud dat
     nergens bij hoort. */
  .navbar__links > a:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

  /* --- Verzekeringen, het uitklapmenu in de balk -----------------------

     14 september 2026. "Verzekeringen" was een anker naar de sectie
     onderaan; nu klapt het de twintig namen uit in de balk zelf.

     Het open- en dichtklappen staat in pagina.js en volgt dezelfde
     afspraken als de taalkiezer hiernaast (aria-expanded op de knop, Escape
     sluit en zet de aandacht terug, een klik ernaast sluit, wegtabben
     sluit). Twee componenten met hetzelfde gedrag en niet één gedeeld
     script: taalkiezer.js staat op élke pagina en dit menu alleen op de
     hoofdpagina, en dat bestand moest daar niet breder voor worden.
  --------------------------------------------------------------------- */
  .navbar__uitklap { position: relative; display: flex; }
  /* Zelfde maat, kleur en ruimte als de ankers ernaast: het staat in dezelfde
     rij en hoort dus dezelfde link te lijken, niet een knop ertussen. */
  .navbar__uitklapknop {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: transparent;
    padding: 6px 2px; border-radius: 6px;
    font: inherit; font-size: 14.5px; font-weight: 500;
    color: var(--text-body); white-space: nowrap; cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .navbar__uitklapknop:hover { color: var(--shu-dark); }
  .navbar__uitklapknop:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
  .navbar__uitklappijl { flex: none; transition: transform 160ms var(--ease); }
  .navbar__uitklapknop[aria-expanded="true"] .navbar__uitklappijl { transform: rotate(180deg); }

  /* Het paneel. Drie kolommen naast elkaar, gecentreerd onder de knop in
     plaats van links uitgelijnd: de knop staat midden in de balk en een
     paneel van ruim 700 breed zou rechts buiten beeld vallen.

     Zelfde ruit als het taalpaneel (zie daar waarom de glaswaarden als
     terugval achter de tokens staan) en dezelfde krappe schaduw: het hangt
     aan zijn knop en hoort niet als losse kaart boven de pagina te zweven. */
  .productenpaneel {
    /* Links uitgelijnd op de knop en niet gecentreerd eronder. Gecentreerd
       stak het paneel op 1120 breed vijftien pixels links buiten het scherm:
       de knop staat niet in het midden van de balk, en een paneel van 760
       breed om een knop van 110 heen valt dan aan één kant af. Vanaf de
       linkerrand van de knop loopt het naar rechts de balk in, waar plaats
       is — nagemeten van 1100 (het breekpunt) tot 1920. */
    position: absolute; top: calc(100% + 10px); left: 0;
    z-index: 20;
    /* minmax(0, 1fr) en niet minmax(150px, 1fr): met een ondergrens in pixels
       weigert een kolom smaller te worden dan zijn langste woord, en
       "Managementvennootschappen" duwde het paneel dan aan de rechterkant
       open. Nu krimpen de kolommen mee en breekt zo'n woord binnen zijn
       kolom (zie overflow-wrap bij de regels hieronder). */
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 22px;
    padding: 16px 18px;
    /* Een VASTE breedte en niet alleen een max: een absoluut geplaatst
       rooster is anders zo breed als zijn inhoud minimaal kan zijn, en met
       een breekregel erbij is dat één letter. Het paneel kromp daardoor tot
       82 pixels met de namen verticaal uitgespeld. Met een vaste breedte
       krijgen de drie kolommen elk een derde en breekt er niets meer. */
    width: min(760px, calc(100vw - 2 * var(--gutter)));
    /* DEKKEND, EN GEEN GLASRUIT. Het taalpaneel ernaast staat op
       --glas-licht (dekking 0,58): dat is 176 breed met drie regels erin, en
       daar kijk je langs. Dit paneel is 532 bij ruim 300 en hangt over de
       hero-kop; eerst op 0,58 en daarna op 0,985 schemerden die letters er
       nog doorheen — 1,5 procent van een lichte kop van 80 pixels is nog
       altijd zichtbaar, en dan lees je twee teksten door elkaar.

       Dus vol papier, en de blur eraf: een backdrop-filter achter een
       dekkend vlak doet niets behalve een laag kosten. Daarmee is ook de
       @supports-terugval voor browsers zonder blur overbodig geworden. */
    background: #f0f6e8;
    border: 1px solid rgba(27, 25, 24, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
                0 14px 34px rgba(27, 25, 24, 0.20);
    border-radius: 14px;
  }
  .productenpaneel[hidden] { display: none; }

  /* De groepskop. Klein en in kapitalen: het is een opschrift boven een
     kolom en geen regel die je leest. Niet aanklikbaar, dus geen linkkleur. */
  .productenpaneel__kop {
    margin: 0 0 6px; padding: 0 8px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--sumi-light);
  }
  .productenpaneel ul { list-style: none; margin: 0; padding: 0; }
  /* Link en knop krijgen exact dezelfde vorm: welke van de twee het is,
     hangt er alleen van af of dat product al een eigen pagina heeft, en dat
     is niets wat een bezoeker hoort te zien. */
  .productenpaneel a,
  .productenpaneel button {
    display: block; width: 100%;
    padding: 7px 8px; border: 0; border-radius: 8px;
    background: transparent;
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--text-body); text-align: left; text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    /* Een naam mag over twee regels, maar niet buiten zijn kolom.
       `break-word` en niet `anywhere`: dat tweede telt mee in de minimale
       breedte van het rooster, en dan krimpt het hele paneel tot één letter
       breed. Zie de vaste breedte hierboven, die hoort hierbij. */
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .productenpaneel a:hover,
  .productenpaneel button:hover { background: rgba(27, 25, 24, 0.07); }

  /* DE PAGINA WAAR JE OP STAAT. De generator zet die naam neer als <span met
     aria-current="page"> en niet als link: een link naar de pagina waar je
     al bent, is geen link. Zonder deze regel viel zo'n span buiten de opmaak
     hierboven — geen binnenruimte, en de lettermaat van de balk in plaats van
     die van het menu, dus hij stak er in het groot bovenuit.

     Vet en in de volle inkt, plus een licht vlak: hij hoort op te vallen als
     "hier bent u" en niet als "dit kan u aanklikken". Drie signalen en niet
     alleen kleur, want kleur alleen is voor wie die niet onderscheidt geen
     signaal; aria-current zegt het bovendien met zoveel woorden tegen een
     schermlezer. Geen cursor en geen hover: er valt niets te doen. */
  .productenpaneel [aria-current="page"] {
    display: block;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(27, 25, 24, 0.055);
    cursor: default;
  }
  .productenpaneel a:focus-visible,
  .productenpaneel button:focus-visible {
    outline: 3px solid var(--shu-deep); outline-offset: -1px;
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar__uitklappijl { transition: none; }
  }

  .navbar__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

  /* --- Loginknop -------------------------------------------------------- */
  /* Omlijnd en niet gevuld. Inloggen is voor wie al klant is; de aanvraag is
     de hoofdactie en die staat rechtsonder en in de slotsectie.

     Zelfde keuze als bij de talen: niet gedempt met kleur. sumi-deep haalt
     achter de doorschijnende balk 11,04:1, en dat hij nog niet werkt blijkt
     uit de stippellijn, de cursor, aria-disabled en de title. */
  .navbar__login {
    /* 0,55 en niet 0,22.

       De rand is de begrenzing van een bedieningselement, en WCAG vraagt daar
       3:1 voor. Op 0,22 haalde die 1,54:1 achter de doorschijnende balk over
       een felle boog. Zes waarden doorgerekend tegen zowel de kale balk als de
       felst denkbare boog eronder: 0,48 haalt het op de kale balk maar niet
       boven een boog, 0,55 haalt 3,68 en 3,36 en dus beide. */
    border: 1px solid rgba(27, 25, 24, 0.55);
    background: transparent;
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-body);
    white-space: nowrap;
    /* De stippellijn en not-allowed zijn eraf: die hoorden bij een knop die
       niets deed. Hij opent nu een scherm, dus hij hoort er als een gewone
       knop uit te zien. */
    cursor: pointer;
  }
  .navbar__login:hover { background: rgba(27, 25, 24, 0.06); }
  .navbar__login:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

  /* --- Taalkeuze -------------------------------------------------------

     Eén knop met een wereldbol en de huidige taalcode, en daaronder een
     paneel met de drie talen voluit. Tot 11 september 2026 stonden hier drie
     pillen naast elkaar (NL FR EN). Wat daar tegen sprak:

       - Breedte. Drie pillen zijn 110 pixels; deze knop is er 78. Dat is de
         reden dat de taalkeuze onder 480 pixels de balk uit moest, zie de
         berekening verderop bij die media query.
       - "FR" en "EN" zijn codes, geen woorden. Wie de site niet in zijn
         eigen taal voor zich heeft, leest liever "Français" dan "FR". In het
         paneel staat allebei: de code als smalle ankerkolom, de naam erachter.

     Wat hetzelfde bleef, en bewust: het zijn nog steeds gewone ankers met
     data-lang, dus pagina.js, juridisch.js en na-het-afsluiten.js zetten er
     nog altijd zelf aria-current op en vangen er de klik mee af. Er is geen
     regel in die drie bestanden voor veranderd. Openen en sluiten van het
     paneel staat los in taalkiezer.js.

     De volle taalnamen staan niet in de vertaaltabel en horen daar ook niet:
     "Français" heet in het Nederlands ook Français. Een talenlijst schrijft
     elke taal in haar eigen taal, want hij is bedoeld voor wie de huidige
     taal juist niet leest. --------------------------------------------- */
  .taalkiezer { position: relative; }

  /* Zelfde vorm, rand en 0,55 als .navbar__login hierboven: het staat ernaast
     in dezelfde balk, dus het hoort dezelfde knop te zijn. De redenering
     achter die 0,55 staat daar. */
  .taalkiezer__knop {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(27, 25, 24, 0.55);
    background: transparent; border-radius: 999px;
    padding: 7px 12px;
    font: inherit; font-size: 13px; font-weight: 600;
    letter-spacing: 0.03em; color: var(--text-body);
    white-space: nowrap; cursor: pointer;
  }
  .taalkiezer__knop:hover { background: rgba(27, 25, 24, 0.06); }
  .taalkiezer__knop:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
  .taalkiezer__knop svg { flex: none; }
  /* Het pijltje kantelt als het paneel openstaat. Dat is bevestiging dat de
     klik is aangekomen; de toestand zelf staat in aria-expanded, waar een
     schermlezer hem leest. */
  .taalkiezer__pijl { transition: transform 160ms var(--ease); }
  .taalkiezer__knop[aria-expanded="true"] .taalkiezer__pijl { transform: rotate(180deg); }

  .taalkiezer__paneel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
    min-width: 176px; padding: 5px;
    /* LIQUID GLASS, OP ELKE PAGINA.

       De vier waarden komen uit glas.css (de lichte ruit uit de overdracht
       van 14 september 2026), maar staan hier als terugval achter de tokens
       in plaats van als token: de taalkiezer staat op élke pagina en glas.css
       wordt maar door drie pagina's geladen. Waar dat bestand er wél is,
       volgt het paneel vanzelf mee als de ruit ooit wijzigt; waar het er niet
       is, staat dezelfde ruit er alsnog.

       De eigen schaduw blijft, en die is krapper dan de kaartschaduw uit de
       overdracht (0 10px 28px tegen 0 18px 40px). Dit is een uitklappaneel
       en geen kaart: het hoort aan zijn knop vast te zitten, niet los boven
       de pagina te zweven.

       Nagerekend op de twee ondergronden waar dit paneel over hangt. Op het
       lichte papier blijft het licht. In het donkere uitklapmenu van de
       hoofdpagina zakt het naar ongeveer #acb4a7, en --text-body haalt daar
       nog 8,2:1 — ruim boven de 4,5. */
    /* 0,90 en niet de 0,58 van de ruit elders. Een uitklapmenu hangt over
       lopende tekst, en bij 0,58 lees je die tekst door de drie talen heen —
       gemeld op 14 september 2026, en te zien op elke pagina met een
       tekstkolom onder de balk. De blur haalt dat niet weg: hij maakt de
       letters eronder zacht, niet afwezig.

       Dit is dus met opzet géén var(--glas-licht): de ruit van een kaart mag
       doorschijnend zijn, want daar ligt papier onder. Een menu ligt over
       inhoud, en dan is leesbaarheid geen smaak.

       EN DE BLUR HELPT HIER NIET, wat de reden is dat het zo dicht moet.
       Het paneel hangt in de dom binnen .navbar, en die heeft zelf een
       backdrop-filter. Een voorouder met backdrop-filter is een backdrop
       root: het paneel kan de pagina eronder niet meer als achtergrond
       bemonsteren, dus zijn eigen blur heeft niets om te vervagen. Wat je
       ziet is dan enkel de dekking. Nagemeten op de cyberpagina: bij 0,58
       kwam de tekst eronder met 58 grijswaarden door, bij 0,90 met 14, bij
       0,95 met 7. De rand, de glans en de blur blijven staan — die laatste
       doet niets zolang de balk een ruit is, en weer wél zodra dat
       verandert. */
    background: rgba(var(--glas-rgb, 240, 246, 232), 0.95);
    border: 1px solid var(--glas-rand-licht, rgba(255, 255, 255, 0.60));
    box-shadow: var(--glas-glans, inset 0 1px 0 rgba(255, 255, 255, 0.55)),
                0 10px 28px rgba(27, 25, 24, 0.16);
    backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%);
    border-radius: 12px;
  }
  .taalkiezer__paneel[hidden] { display: none; }

  /* Zonder backdrop-filter is een halfdoorschijnend paneel onrustig in plaats
     van mat; dan dekking omhoog. Zelfde afspraak als in glas.css. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .taalkiezer__paneel { background: rgba(240, 246, 232, 0.96); }
  }

  .taalkiezer__paneel a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    text-decoration: none; color: var(--text-body); font-size: 14px;
  }
  .taalkiezer__paneel a:hover { background: rgba(27, 25, 24, 0.07); }
  .taalkiezer__paneel a:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: -1px; }
  /* De code is de ankerkolom: twee tekens op een vaste breedte, zodat de
     namen erachter uitlijnen in plaats van te verspringen. */
  .taalkiezer__code {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--sumi-light); width: 22px; flex: none;
  }
  /* De huidige taal krijgt een vinkje én zwaarder schrift. Niet kleur alleen,
     dezelfde afweging als overal op deze site: status hoort niet uitsluitend
     aan een kleur te hangen. Het vinkje blijft bij de andere twee wel ruimte
     innemen (visibility, geen display), anders schuiven die twee regels een
     paar pixels op zodra de taal wisselt. */
  .taalkiezer__paneel a[aria-current="true"] { font-weight: 600; }
  .taalkiezer__vink { margin-left: auto; flex: none; color: var(--shu-deep); }
  .taalkiezer__paneel a:not([aria-current="true"]) .taalkiezer__vink { visibility: hidden; }

  /* In het uitklapmenu hangt het paneel aan de linkerkant: daar staat de
     kiezer niet rechts in een balk maar links onderin een menu, en rechts
     uitgelijnd zou het half buiten het menu vallen.

     EN NAAR BOVEN OPEN, 18 september 2026. Dezelfde reden, de andere as: de
     kiezer staat onderaan het menu, dus een paneel onder de knop valt buiten
     het menu. Nagemeten op de hoofdpagina bij 390 breed: het menu eindigt op
     443 en het paneel liep van 428 tot 546 — ruim honderd pixels hingen over
     de pagina eronder, en op een menu dat tot onder aan het scherm loopt (met
     de taalmelding erbij, of in het Frans) werd de onderste taal afgesneden.
     Boven de knop is die ruimte er altijd: daar staan de menulinks, en een
     paneel hoort over de inhoud te mogen liggen waar het bij hoort. */
  .navmenu__foot .taalkiezer__paneel {
    right: auto; left: 0;
    top: auto; bottom: calc(100% + 8px);
  }

  @media (prefers-reduced-motion: reduce) {
    .taalkiezer__pijl { transition: none; }
  }

  /* --- Uitklapmenu voor smalle schermen -------------------------------- */
  .navbar__burger {
    display: none; padding: 8px; margin-right: -6px;
    border: 0; background: transparent; color: var(--text-primary); cursor: pointer;
  }
  .navbar__burger:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

  /* Het menu begint onder de vaste kop, en die kop is hoger zodra de
     taalmelding er staat. Zonder deze variabele zou het menu op dezelfde
     hoogte als de melding beginnen en er half achter verdwijnen. Het script
     meet de melding op en zet --header-h. */
  .navmenu {
    position: fixed; inset: var(--header-h, var(--nav-h)) 0 auto 0; z-index: 49;
    padding: 18px var(--gutter) 22px;
    background: rgba(239, 230, 216, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(27, 25, 24, 0.1);
  }
  .navmenu[hidden] { display: none; }
  .navmenu nav { display: flex; flex-direction: column; gap: 4px; }
  .navmenu a {
    font-size: 16px; font-weight: 500; text-decoration: none;
    color: var(--text-body); padding: 8px 0;
  }
  .navmenu a:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
  .navmenu__foot { display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding-top: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--rule); }

  /* Het breekpunt is elke keer nagerekend en nooit gekozen. De reeks:

       vijf lange labels                    1124px nodig  ->  1080
       vier korte labels                     842px nodig  ->   940
       loginknop erbij                       947px nodig  ->  1040
       aanvraagknop eruit                    761px nodig  ->   880
       Na het afsluiten erbij                917px nodig  ->  1040
       en dan hetzelfde in het Frans         974px nodig  ->  1100

     De aanvraagknop kostte 174px plus een tussenruimte. Zonder die knop past
     de balk dus veel eerder, en 1040 laten staan zou betekenen dat je op een
     scherm van 900 breed een burgermenu ziet terwijl er 140px over is.
     880 gaf 119px marge.

     Het label "Na het afsluiten" kost 16 tekens maal 0,56em maal 14,5px is
     130px, plus 4px padding en 22px tussenruimte, samen 156. Dat brengt de
     761 op 917, en met dezelfde marge zou het breekpunt op 1040 komen.

     Maar de balk staat in drie talen, en dat is hier voor het eerst het
     bindende punt. Doorgerekend met dezelfde formule, tegenover het
     Nederlands:

       Engels   24px smaller   893px nodig
       Frans    57px breder    974px nodig

     Het Frans wint, en 974 plus dezelfde marge is 1100. Dat komt niet alleen
     door het nieuwe label: "Notre méthode" is langer dan "Werkwijze" en "Se
     connecter" is vier tekens langer dan "Inloggen". Die twee aten al marge,
     alleen viel dat niet op zolang er 119px over was.

     Dat 1100 hoog is, klopt. Op een venster van 1024 breed zie je nu ook in
     het Nederlands een burgermenu, terwijl daar 183px over is. Eén breekpunt
     per taal kan niet met een media query, en het per taal in het script
     zetten zou betekenen dat de opmaak van de balk op twee plaatsen staat.
     Wil je 1040 terug, dan moet het Franse label korter dan "Après
     souscription"; het Nederlandse label korter maken helpt niet, want dat
     is niet de taal die het breekpunt bepaalt.

     Vijfde keer dat dit getal mee moet. Wie hier iets toevoegt of weghaalt,
     rekent het opnieuw: tekenaantal maal 0,56em maal de lettergrootte, plus
     de padding, plus de tussenruimtes. Het staat op drie plaatsen die gelijk
     moeten blijven: twee media queries en NAV_BREAKPOINT in het script. */
  @media (max-width: 1100px) {
    .navbar__links { display: none; }
    .navbar__burger { display: flex; }

    /* HET PRODUCTENMENU IN HET HAMBURGERMENU, 15 september 2026.

       site/productenmenu.js verplaatst hier hetzelfde element naartoe dat in
       de balk staat — geen tweede lijst, zie de toelichting daar. Wat het
       hier nodig heeft is een andere vorm: in de balk is het een paneel dat
       onder zijn knop hangt, hier is het een stuk van de lijst waar het in
       staat.

       Dus: in de stroom in plaats van absoluut, één kolom in plaats van drie
       (achttien namen naast elkaar op 375 pixels is geen menu), en zonder
       eigen vlak — het hamburgermenu heeft er al een, en een paneel op een
       paneel leest als twee lagen die er niet zijn. */
    /* EN HET MENU MOET KUNNEN SCHUIVEN. Met de zes secties erin was het
       hamburgermenu korter dan elk scherm; met de vierentwintig producten
       erbij is het dat niet meer — gemeten op een telefoon van 812 hoog is het
       paneel opengeklapt 948. Zonder deze twee regels liep de derde groep
       eronderuit en was ze met geen enkele beweging te bereiken.

       De hoogte is die van het scherm min de balk, dezelfde maat die inset
       hierboven al gebruikt; overscroll-behavior houdt de pagina eronder stil
       zodra je het einde van de lijst bereikt. */
    .navmenu {
      max-height: calc(100svh - var(--header-h, var(--nav-h)));
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .navmenu .navbar__uitklap { display: block; }
    .navmenu .navbar__uitklapknop {
      font-size: 16px; font-weight: 500; padding: 8px 0;
      width: 100%; justify-content: space-between;
    }
    .navmenu .productenpaneel {
      position: static;
      width: auto;
      grid-template-columns: 1fr;
      gap: 0;
      padding: 2px 0 10px 12px;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      border-left: 1px solid var(--rule);
      margin-left: 2px;
    }
    /* De kolomkoppen staan hier onder elkaar in plaats van naast elkaar, dus
       ze hebben lucht boven zich nodig; de eerste niet, die volgt de knop. */
    .navmenu .productenpaneel__groep + .productenpaneel__groep { margin-top: 10px; }
  }
  @media (min-width: 1101px) {
    .navmenu { display: none; }
  }
  .wordmark { display: inline-flex; align-items: baseline;
    color: var(--text-primary); text-decoration: none; }
  /* leading 1,12 op de Ō: bij 0,9 wordt het macron afgesneden. */
  .wordmark .mark { font-size: var(--wordmark-bar-o); font-weight: 600;
    line-height: 1.12; letter-spacing: 0.01em; }
  .wordmark .rest { font-size: var(--wordmark-bar-rest); font-weight: 500;
    line-height: 0.9; letter-spacing: 0.02em; margin-left: -1px; }

  .hero { position: relative; width: 100%; }
  .hero-sticky { position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden;
    /* Staat er voor het geval het canvas nog niet geschilderd heeft. Daarna
       dekt het canvas dit af met dezelfde kleur. */
    background: var(--hero-bg); }
  .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* De bogen moeten achter de tekst DOOR lopen, niet erdoor weggepoetst
     worden. In ronde 2 stond hier een dekkende radiale zone die ze op de
     plek van de tekst volledig wegnam; dat was de reden dat het contrast
     haalbaar bleef, maar het is niet wat gevraagd is.

     Wat er nu staat is een veel zwakkere zone, sterk genoeg om de kop van de
     achtergrond te tillen en zwak genoeg om de bogen erdoor te laten zien.
     Wat dat kost in contrast staat gemeten in het rapport, niet geraden. */
  .hero-light {
    position: absolute; inset: 0; pointer-events: none;
    background:
      /* GELIJKGETROKKEN MET .lp-hero__licht, 21 september 2026.

         Hier stond een ellips van 60 bij 44 op 0,70 in het hart. Daardoor
         stonden de bogen op de hoofdpagina lichter dan dezelfde bogen op een
         productpagina: die band draagt een ellips van 92 bij 92 op 0,88. Het
         motief is op beide hetzelfde en tekent met PALETTE_HERO uit dezelfde
         tokens; het verschil zat volledig in deze sluier.

         De reden waarom de twee uiteenliepen is vervallen. landing.css legt
         bij .lp-hero__licht uit dat de bredere ellips er is omdat de inhoud
         daar in twee kolommen over de volle breedte stond; die band is
         inmiddels één gecentreerde kolom, net als hier.

         Contrast gaat hiermee omhoog en nooit omlaag: elke sluier erbij tilt
         de tekst van de achtergrond. De meting bij .lp-hero__licht geldt dus
         ook hier: 12,5:1 op de felste boogkern, 4,88:1 buiten de ellips. */
      radial-gradient(ellipse 92% 92% at 46% 44%,
        rgba(var(--hero-veil-rgb), 0.88) 0%,
        rgba(var(--hero-veil-rgb), 0.80) 42%,
        rgba(var(--hero-veil-rgb), 0.44) 72%,
        rgba(var(--hero-veil-rgb), 0) 100%),
      /* EN EEN VLAKKE SLUIER OVER HET HELE HERO, 15 september 2026.

         Hier stond alleen de ellips hierboven, en daardoor stonden de bogen
         op de homepage merkbaar feller dan dezelfde bogen op een
         productpagina. Dat lag niet aan het motief — beide tekenen met
         PALETTE_HERO uit dezelfde tokens — maar aan de sluier ervoor: de
         band van een productpagina draagt naast zijn ellips ook een vlakke
         laag op 0,40 (.lp-hero__licht in landing.css), en die ontbrak hier.

         Nu dezelfde 0,40, en dus hetzelfde beeld op beide. In het hart komt
         de ellips er nog bij: 0,70 en 0,40 samen geven 0,82, vlak bij de
         0,88 die de productpagina daar heeft.

         Het gaat de goede kant op voor de leesbaarheid: elke sluier erbij
         verhoogt het contrast van de tekst erop, nooit omgekeerd. */
      linear-gradient(rgba(var(--hero-veil-rgb), 0.40), rgba(var(--hero-veil-rgb), 0.40));
  }
  /* --- DE KORREL OVER HET MOTIEF ---------------------------------------

     Waarom dit er staat, en waarom het niet met een instelling van het
     motief op te lossen was.

     Het motief is een zacht verloop op een donkere ondergrond, en een
     verloop op een donker vlak heeft in 8 bits maar een handvol stappen. De
     plek waar het verloop van de ene grijswaarde naar de volgende gaat is
     een contourlijn, en waar die contour bijna horizontaal loopt — het topje
     van een boog — is hij tientallen pixels lang. Skia vult zo'n overgang
     met zijn eigen geordende dithering, en nagemeten is dat geen ruis maar
     een patroon: eerst elke vierde pixel, dan elke tweede. Een regelmatig
     patroon langs een bijna rechte lijn leest het oog als een stippellijn,
     en dat is precies wat er gemeld werd.

     Dit is dus geen fout in het motief maar de bodem van 8-bits kleur, en
     daarom helpt bijstellen niet: bredere bogen, een ander canvasformaat, een
     blur van een halve pixel — alle drie nagemeten, alle drie geen verschil.
     Wat wél werkt is de beslissing tussen twee grijswaarden willekeurig
     maken in plaats van geordend, en daarvoor is een korrel het gereedschap.

     De korrel is een ruisvlak van 180 bij 180 dat zichzelf herhaalt,
     getekend door de browser uit een svg-filter: geen bestand, geen verzoek,
     en één keer tekenen in plaats van per frame.

     De dekking is 0,03 en de korrelmaat 1,8, en die twee zijn gezocht en niet gekozen. Ruis op een
     bijna zwart vlak kan alleen optellen — elke mengstand die van contrast
     uitgaat (overlay, soft-light) tilt donker juist op in plaats van er
     symmetrisch omheen te blijven, nagerekend op waarde 28 van 255. Bij 0,05
     tilde de korrel het zwart van 30 naar 34, en dat is te veel. Bij 0,03 is
     dat nog één grijswaarde.

     De korrelmaat telt net zo hard: op 0,85 is één ruiskorrel ruim twee
     schermpixels op een retinascherm, en dan ligt de ruis grover dan de
     dithering die hij moet breken — nagemeten bleef het patroon van één op
     vier staan. Op 1,8 is een korrel ongeveer één schermpixel en valt het
     patroon wél uiteen.

     Hij ligt op .hero-light en .closing__light en niet op het canvas zelf:
     die twee liggen al over het motief, ze vangen geen muis, en zo hoeft er
     nergens een element bij. Het canvas houdt zijn eigen dekking, dus de
     korrel dooft niet mee met de reveal — dat is juist de bedoeling, want de
     stippellijn is er op elke dekking.
  --------------------------------------------------------------------- */
  .hero-light::after,
  .closing__light::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
  }
  /* Wie geen beweging wil, wil ook geen extra ruis op het scherm. De
     stippellijn die de korrel wegneemt hangt aan de beweging van de bogen,
     en die staat dan toch stil. */
  @media (prefers-reduced-motion: reduce) {
    .hero-light::after, .closing__light::after { display: none; }
  }

  /* Deze waarden zijn niet gekozen op gevoel maar gezocht. Vier kandidaten
     doorgemeten tegen de vier tekstzones, op elke cursorstand en over de hele
     scroll. De twee zwakkere zakten door AA op de ondertitel en de regel
     (4,35 en 3,89 tegen een norm van 4,50); dit is de zwakste die overal
     doorkomt, dus de bogen blijven zo zichtbaar als het mag. */

  /* HIER STOND EEN EIGEN ZONE ONDER 720px, WEG OP 21 september 2026.

     Die verruimde de ellips naar 72 bij 54 op 0,72 omdat de oude desktopzone
     (60 bij 44) op een smal, hoog scherm te klein was. Ze liet daarbij de
     vlakke sluier van 0,40 vallen, want ze verving de hele background.

     De zone hierboven is nu 92 bij 92 op 0,88 mét die vlakke laag, en dus op
     elk formaat sterker dan wat hier stond. Een eigen regel zou het contrast
     op een telefoon alleen verlagen. .lp-hero__licht heeft om dezelfde reden
     één regel voor alle breedtes. */

  /* Alleen de kop in het hero volgt de variant; h1 op andere pagina's niet.
     De ondertitel eronder net zo: .hero-sub staat op --text-body, en dat is
     de kleur voor een lichte achtergrond. */
  .hero-col h1,
  .hero-col .hero-sub { color: var(--hero-text); }

  /* De letterafstand van de kop in het hero, en waarom die hier apart staat.
     10 september 2026.

     De algemene h1 hierboven staat op var(--tracking-tight), en dat is
     -0,025em. Op de kop in het hero is dat de grootste tekst van de site
     (clamp tot 64px), dus daar wordt het -1,6 pixel per letterpaar. Op de
     meeste paren zie je dat niet. Op "rt" wel: de arm van de r eindigt precies
     waar de stam van de t begint, dus dat paar heeft van zichzelf al bijna
     geen ruimte. In "Vertel" liepen ze daardoor tegen elkaar aan. Gemeld met
     een uitsnede van precies die twee letters.

     -0,012em geeft er 0,8 pixel per paar bij. Genoeg om "rt" los te maken, en
     klein genoeg om aan de kop als geheel niets te veranderen: over "Vertel
     wat u wilt verzekeren." is dat samen ongeveer 17 pixels op een regel van
     ruim 900, dus geen andere regelval.

     Waarom niet var(--tracking-tight) zelf aanpassen: die staat ook op de
     koppen van de secties, op de navigatie en op Na het afsluiten, en die
     staan op 34 tot 40 pixels waar hetzelfde getal geen probleem geeft. Eén
     plek aanpassen die één probleem heeft.

     font-kerning expliciet op normal erbij. Het staat standaard op auto, en
     dat is voor deze grootte hetzelfde, maar een browser mag bij auto zelf
     beslissen de kerningtabel te laten vallen. Hier niet: het probleem gaat
     nu net over één letterpaar. */
  .hero-col h1 {
    letter-spacing: -0.012em;
    font-kerning: normal;
  }

  .hero-inner {
    position: relative; z-index: 10;
    display: flex; height: 100%; align-items: center; justify-content: center;
    padding: 0 var(--gutter);
  }
  .hero-col {
    margin: 0 auto; display: flex; max-width: var(--max-shell);
    flex-direction: column; align-items: center; text-align: center;
    gap: var(--stack);
    margin-top: calc(var(--nav-h) - 44px);
  }

  /* Alles begint zichtbaar. Als het script niet loopt, staat de pagina er
     gewoon; de reveal hieronder zet de begintoestand zelf. Omgekeerd, met
     opacity 0 in de CSS, is een zwarte pagina bij een scriptfout. */
  /* .hero-sub matcht sinds 11 september 2026 weer wel: de kop draagt nu de
     belofte en de opdracht staat eronder. Zie M-6 bij CONTENT.hero in
     site/motief.js.

     .head-group, .head-promise en .hero-note matchen nog steeds niets. Ze
     blijven staan omdat die tekst bewaard is in CONTENT en waarschijnlijk
     terugkomt in een sectie onder de hero. Dode CSS die niets selecteert kost
     niets; dode CSS die iets anders overschrijft wel, en dat is hier niet het
     geval. */
  .head-group { display: flex; flex-direction: column; align-items: center;
    gap: var(--stack-tight); }
  h1 {
    margin: 0; max-width: var(--max-head);
    font-size: var(--size-h1); line-height: var(--leading-h1);
    font-weight: 600; letter-spacing: var(--tracking-tight);
    color: var(--text-primary); text-wrap: balance;

    /* "managementvennootschap" is één woord van 22 tekens en liep op smalle
       schermen aan beide kanten buiten beeld, waar overflow: hidden op de
       sticky het afsneed.

       Nagerekend: het woord is bij 34px ongeveer 434 pixels breed, en de
       kolom is op een scherm van 400 breed maar 352 pixels. Onder 768px past
       het dus nooit heel, ook niet met een kleinere letter, dus dit moet met
       afbreken en niet met verkleinen. Daarom blijft de lettergrootte gelijk.

       hyphens: auto breekt het netjes met een koppelteken, en dat werkt hier
       omdat lang="nl" op het html-element staat: zonder die taalaanduiding
       heeft de browser geen Nederlandse afbreekpatronen. Het langste
       fragment daarna is "vennootschap", ongeveer 237 pixels, wat ook op een
       scherm van 320 breed nog past.

       overflow-wrap staat eronder als vangnet: als een browser geen
       Nederlandse patronen heeft, breekt hij het woord zonder koppelteken.
       Niet mooi, maar het loopt nooit meer buiten beeld. */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  .head-promise {
    margin: 0; font-size: var(--size-promise); line-height: var(--leading-promise);
    font-weight: 600; letter-spacing: -0.01em; color: var(--text-accent);
  }
  .hero-sub {
    margin: 0; max-width: var(--max-sub);
    font-size: var(--size-sub); line-height: var(--leading-sub); color: var(--text-body);
  }
  .hero-note {
    margin: 0; font-size: var(--size-note); line-height: var(--leading-note);
    color: var(--text-note);
  }
  .hero-actions { display: flex; flex-direction: column; align-items: center;
    gap: var(--stack-tight); }

  /* De twee kanaalknoppen onder de chatbalk.

     Dezelfde knop als op de laatste slide van de carrousel (.proef__knop):
     omlijnd, doorschijnend, lichte inkt op donker. Die klasse staat verderop
     in dit bestand en draagt de nagerekende randdekking van 0,55 (3,9:1, de
     norm voor de begrenzing van een bedieningselement is 3). Eén knop voor
     twee plekken, dus één plek om die meting te bewaken.

     Wat hier anders is dan op de carrousel: ze staan naast elkaar in plaats
     van in een raster, en de hoeken zijn 14 in plaats van rond — dezelfde
     maat als de klem en het veld in de balk erboven, zodat de drie samen één
     vorm vormen. De minimumbreedte houdt de twee even breed; op een smal
     scherm mogen ze wel wikkelen. */
  .hero-kanalen {
    /* Exact zo breed als de balk erboven, en de twee knoppen delen die
       breedte: zo staan hun buitenranden op één lijn met de balk in plaats
       van als een losse groep in het midden te zweven. De tussenruimte van
       10 is dezelfde als tussen de klem, het veld en de verstuurknop. */
    width: var(--herobalk-breed);
    /* DICHT TEGEN DE BALK, op verzoek 14 september 2026. De twee knoppen zijn
       een tweede manier om hetzelfde te doen als de balk erboven, en dan
       horen ze bij die balk en niet als losse groep eronder te zweven.

       De negatieve marge en niet een kleinere `gap` op .hero-col: die gap
       (var(--stack)) zet óók de ruimte onder de kop en onder de ondertitel,
       en die twee moeten blijven zoals ze zijn. Hier wordt alleen deze ene
       tussenruimte teruggenomen: --stack eraf, en 12 pixels ervoor in de
       plaats — dezelfde orde als de 10 tussen de knoppen onderling. Verzet je
       --stack, dan blijft deze afstand 12. */
    margin: calc(12px - var(--stack)) auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }

  /* De drie startvragen onder de balk. Dezelfde negatieve marge als de
     kanaalknoppen hierboven en om dezelfde reden: balk, vragen en kanalen
     horen als één blok te lezen en niet als drie groepen met --stack ertussen.
     De rij is even breed als de balk, dus ze wikkelt binnen diezelfde kolom
     in plaats van het hero uit te rekken.

     Vorm en kleur van de knoppen staan in carrousel.css (.lp-veld__vraag) —
     hetzelfde matglas als op de donkere band van een landingspagina. Wanneer
     ze komen en gaan staat in site/chat.js. */
  /* .lp-veld__vragen.hero-vragen en niet .hero-vragen alleen: carrousel.css
     wordt op de hoofdpagina ná dit bestand geladen en zet op .lp-veld__vragen
     zelf flex-wrap: wrap en margin: 0. Gelijke specificiteit verliest dan van
     de volgorde — met de twee klassen samen wint deze regel, ongeacht wie
     eerst staat. Op een landingspagina doet .lp-veld--hero hetzelfde werk. */
  .lp-veld__vragen.hero-vragen {
    /* De breedte komt van de regel hieronder (het volle scherm); hier staat
       alleen de afstand tot de balk: 12 pixels, net als de kanaalknoppen
       daaronder. De gap van .hero-col (--stack) wordt eraf gehaald; zie de
       toelichting bij .hero-kanalen hierboven. */
    margin-top: calc(12px - var(--stack));
  }

  /* --- De startvragen bij de balk in de hero -----------------------------

     Eén blok voor beide paginasoorten: .hero-vragen op de hoofdpagina en
     .lp-veld--hero .lp-veld__vragen op een landingspagina. Dit bestand is het
     enige dat ze allebei bereikt — een landingspagina laadt pagina.css en
     daarna landing.css.

     TWEE REGELS DIE SAMEN ÉÉN FOUT OPLOSSEN (17 september 2026). De rij lag
     over de chatbalk heen, en op een telefoon over de halve hero.

     1. .is-stil VERBERGT MAAR HOUDT DE PLEK. visibility en niet display of
        het hidden-attribuut: de balk is vast gepositioneerd en wordt op de
        plaatshouder gezet, maar alleen bij een scroll of een resize. Een rij
        die uit de bladspiegel verschijnt, groeit de gecentreerde hero-kolom
        en schuift die plaatshouder 35 pixels omhoog — onder een balk die
        blijft staan. Met een gereserveerde plek verandert er bij het
        verschijnen niets aan de bladspiegel en valt er dus ook niets meer
        over elkaar.
     2. ÉÉN REGEL, DIE SCHUIFT ALS HET MOET. Op een telefoon vielen drie
        vragen over drie regels, en de langste daarvan over twee — drie
        blokken onder een invoerveld in plaats van een keuzerij. nowrap met
        overflow-x houdt het één regel hoog op elk scherm; past ze niet, dan
        veegt de bezoeker ze zijwaarts, zoals in elke chat-app. De
        gereserveerde plek uit punt 1 is daarmee ook op elk scherm dezelfde
        hoogte.

     `safe center` houdt de rij gecentreerd zolang ze past en zet ze op de
     linkerrand zodra ze schuift; zonder dat trefwoord is het begin van een
     gecentreerde scrollrij niet te bereiken. De gewone `center` erboven
     blijft staan in een browser die het niet kent — dan is alleen dat ene
     geval minder mooi.
  ----------------------------------------------------------------------- */
  .lp-veld__vragen.hero-vragen,
  .lp-veld--hero .lp-veld__vragen {
    /* DE RIJ IS EEN FLEXKIND van een kolom met align-items: center (.hero-col
       hier, .lp-veld in landing.css). Zo'n kind is zo breed als zijn inhoud,
       en met nowrap erbij was dat 889 pixels — op een telefoon van 390 dus
       een rij die dwars uit de pagina liep in plaats van erin te schuiven.
       stretch geeft haar de breedte van de kolom, min-width: 0 laat haar
       daaronder krimpen, en pas dan kan overflow-x iets schuiven. */
    align-self: stretch;
    min-width: 0;
    /* OVER DE VOLLE SCHERMBREEDTE, en niet binnen de kolom. Een schuifrij die
       in een kolom van 342 staat, wordt aan beide kanten door die kolom
       afgesneden — midden in een woord, ver van de schermrand, en dat leest
       als een fout in de opmaak. Nu is de rij het scherm breed: wat wegvalt,
       valt weg aan de rand waar het hoort.

       De banden erboven snijden zelf af (.hero-sticky in dit bestand,
       .lp-hero in landing.css staan allebei op overflow: hidden), dus 100vw
       levert hier geen liggende schuifbalk op de pagina op.

       De binnenmarge is de gutter van de pagina: zo begint de eerste knop
       onder de tekst erboven in plaats van tegen het glas van het scherm. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--gutter);
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    justify-content: safe center;
    /* De schuifbalk zelf hoort hier niet: hij zou over de knoppen liggen en
       op een telefoon is de veeg het gebaar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .lp-veld__vragen.hero-vragen::-webkit-scrollbar,
  .lp-veld--hero .lp-veld__vragen::-webkit-scrollbar { display: none; }
  .hero-vragen .lp-veld__vraag,
  .lp-veld--hero .lp-veld__vraag { flex: none; white-space: nowrap; }
  .lp-veld__vragen.hero-vragen.is-stil,
  .lp-veld--hero .lp-veld__vragen.is-stil { visibility: hidden; }
  /* Vorm en maat staan hier; de vulling staat in hoofdpagina-glas.css, want
     dat is hetzelfde materiaal als de chatbalk erboven en die twee horen bij
     elkaar te blijven. Zonder dat bestand vallen ze terug op de omlijnde knop
     van de carrousel, en dat is een knop die op zichzelf al klopt. */
  .hero-kanalen .proef__knop {
    border-radius: 14px;
    /* De kolommen bepalen de breedte; een eigen minimum zou ze uit elkaar
       trekken zodra de tekst langer is in een andere taal. */
    min-width: 0;
    padding: 0 12px;
  }

  .pill {
    display: inline-flex; align-items: center; gap: 12px;
    border-radius: var(--radius-pill);
    background: var(--btn-bg); color: var(--text-invert);
    padding: 8px 8px 8px 24px; text-decoration: none;
    font-size: var(--size-btn); font-weight: 500;
    transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .pill:hover { background: var(--btn-bg-hover); transform: scale(1.03); }
  .pill:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 3px; }
  .pill .knob {
    display: flex; height: 40px; width: 40px;
    align-items: center; justify-content: center;
    border-radius: var(--radius-pill); background: var(--btn-accent);
    transition: background-color 0.3s var(--ease);
  }
  /* Op hover een tint donkerder, niet een andere kleur. De pil zelf licht
     al op en schaalt 1,03; de schijf hoeft dat niet nog eens over te doen. */
  .pill:hover .knob { background: var(--washi-dim); }
  /* De pijl volgt currentColor in plaats van een vaste kleur, zodat één
     css-regel hem kan omdraaien in plaats van drie plekken in het script. */
  .pill .knob { color: var(--btn-bg); }

  /* Donker hero: de pil zou anders donker op donker staan. */
  html[data-hero="donker"] .hero .pill {
    background: var(--washi); color: var(--btn-bg);
  }
  html[data-hero="donker"] .hero .pill:hover { background: var(--washi-dim); }
  html[data-hero="donker"] .hero .pill .knob {
    background: var(--btn-bg); color: var(--washi);
  }
  html[data-hero="donker"] .hero .pill:hover .knob { background: var(--sumi); }

  /* De knop rechtsonder begint onzichtbaar, want hij komt pas op als de
     hero-knop begint te verdwijnen. Dat is hier de uitzondering op de regel
     dat alles zichtbaar begint: als het script niet loopt is een ontbrekende
     tweede knop onschuldig, want de hero-knop is het origineel en die staat
     er dan gewoon. Een knop die eerst even opflitst is dat niet. */
  .dock {
    position: fixed; right: var(--hoek-gutter); bottom: var(--hoek-gutter); z-index: 60;
    opacity: 0; visibility: hidden;
  }
  .dock .pill { box-shadow: 0 6px 24px rgba(27, 25, 24, 0.18); }

  /* OP EEN SMAL SCHERM STAAT ER "START". "Start uw aanvraag" is op een
     telefoon 220 van de 390 pixels die er zijn, en deze knop zweeft over de
     tekst waar iemand op dat moment in leest.

     De volle zin blijft in de knop staan, weggeklemd zoals .visually-hidden
     verderop het doet: hij is de toegankelijke naam, want "Start" alleen zegt
     niet waaraan. Het korte woord zelf draagt aria-hidden. Beide komen uit
     pilLabel() in site/motief.js en gelden dus ook voor de balk die naar de
     hoek reist — dezelfde knop in een andere stand.

     560 en niet 900: op een tablet past de volle zin ruim, en de knop hangt
     daar niet over de leestekst. */
  .pill__kort { display: none; }
  @media (max-width: 560px) {
    .dock .pill .pill__lang,
    .heroballk__pil .pill__lang,
    .lp-balk__pil .pill__lang {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .dock .pill .pill__kort,
    .heroballk__pil .pill__kort,
    .lp-balk__pil .pill__kort { display: inline; }
  }

  /* =====================================================================
     Tokens voor de secties.

     Apart blok, en niet toegevoegd aan het :root hierboven, omdat dat blok
     bij de hero hoort en die moet ongewijzigd blijven. Zo is aantoonbaar dat
     er niets aan de hero geraakt is. CSS staat meerdere :root-blokken toe en
     ze voegen zich samen.
     ===================================================================== */
  :root {
    /* Een tint lichter dan de pagina, voor kaarten en uitklapblokken. Washi
       45 procent naar wit. Donkere tekst haalt hierop nog meer contrast dan
       op Washi zelf, dus dit kost niets aan leesbaarheid. */
    --surface-tint: #f6f1ea;

    --section-pad-y: clamp(56px, 8vw, 112px);
    --closing-pad-y: clamp(72px, 10vw, 144px);

    /* Leeskolom rond de 70 tekens. */
    --max-read: 660px;

    /* Typografie onder de hero. De hero-kop gaat tot 64px, dus de
       sectiekoppen blijven daaronder om de hiërarchie te bewaren. */
    --size-h2:      clamp(26px, 3.6vw, 42px);
    --leading-h2:   1.2;
    --size-h3:      clamp(18px, 1.9vw, 21px);
    --size-lead:    clamp(18px, 2.0vw, 21px);
    --size-body:    clamp(16px, 1.5vw, 18px);
    --leading-body: 1.65;
    --size-small:   clamp(14px, 1.3vw, 15px);
    --size-label:   13px;
    --size-step-n:  clamp(28px, 3.4vw, 40px);

    /* --rule werd op drie plekken gebruikt en nergens gedefinieerd. Een
       var() zonder waarde maakt de hele declaratie ongeldig, dus
       border-top viel weg en de scheidingslijnen tussen de vijf stappen en
       boven de voet van het mobiele menu stonden er simpelweg niet. Geen
       foutmelding, alleen een lijn die ontbrak. Dit is de enige wijziging
       hier die je niet gevraagd hebt; één regel weghalen en het is terug
       zoals het was. */
    --rule: rgba(27, 25, 24, 0.12);
  }

  /* =====================================================================
     PALETTEN

     Het oorspronkelijke palet staat hierboven in :root en blijft daar staan.
     De blokken hieronder overschrijven het alleen wanneer er een data-palet
     op de html-tag staat. Weghalen van dat attribuut zet alles terug.

     Alle zeven zijn nagemeten en halen dezelfde drempels als het origineel:
     bodytekst boven 4,5:1 op papier en op een getint vlak, het accent boven
     4,5:1, sumi-light boven 4,5:1 en het motief boven 3:1. De laagste waarde
     in de hele reeks is 3,54:1 voor het motief in oker, tegen 3,80:1 nu. Het
     origineel zakt zelf op één punt: sumi-light haalt precies 4,50 op washi,
     alle zeven zitten daarboven.

     Waarom het papier meer chroma krijgt en niet alleen donkerder wordt: dat
     is wat "flets" oplost. Nu heeft washi 23 punten chroma en het getinte
     vlak maar 12, dus de twee liggen dicht bij grijs en dicht bij elkaar.
     Klei zit op 34, mos op 25, oker op 32, fuchsia op 31, framboos op 32,
     kastanje op 34 en saffraan op 37.
     ===================================================================== */

  /* Klei. Hetzelfde gezicht als nu, maar verzadigd: dieper papier, espresso
     in plaats van roetzwart, en gebrande sienna in plaats van vermiljoen.
     Het minste risico voor de herkenbaarheid. */
  :root[data-palet="klei"] {
    --sumi:        #261e18;
    --sumi-deep:   #191310;
    --sumi-light:  #6b6155;
    --shu:         #c04a22;
    --shu-dark:    #6b230f;
    --shu-deep:    #9b3617;
    --shu-ink:     #d07a52;
    --washi:       #ebdfc9;
    --washi-dim:   #d2c2a4;
    --shu-hot:     #e05a24;
    --shu-core:    #f5762f;
    --surface-tint: #f4ebda;
    --rule:        rgba(25, 19, 16, 0.14);
    --palet-glow:  #6b230f;
  }

  /* Mos. Papier met een groene ondertoon, dennenzwarte inkt en een mosgroen
     accent. Rustiger en minder alarmerend dan een rood accent, wat voor
     verzekeringen niet ongepast is. Wel de grootste stap weg van het
     huidige gezicht. */
  :root[data-palet="mos"] {
    --sumi:        #1f261d;
    --sumi-deep:   #141a13;
    --sumi-light:  #5f6659;
    --shu:         #5c7a33;
    --shu-dark:    #2c3f13;
    --shu-deep:    #46601f;
    --shu-ink:     #87a25c;
    --washi:       #ebe9d2;
    --washi-dim:   #d0cdb0;
    --shu-hot:     #6e8f3b;
    --shu-core:    #86a845;
    --surface-tint: #f4f2e2;
    --rule:        rgba(20, 26, 19, 0.14);
    --palet-glow:  #2c3f13;
  }

  /* Oker. Warm ivoor met amber. Het motief wordt goudkleurig in plaats van
     rood, en dat is de grootste verandering aan het beeld dat je nu ziet:
     de bogen in het hero dragen de hele eerste indruk. */
  :root[data-palet="oker"] {
    --sumi:        #241d17;
    --sumi-deep:   #171310;
    --sumi-light:  #6e6455;
    --shu:         #ac6a0d;
    --shu-dark:    #573504;
    --shu-deep:    #8b5407;
    --shu-ink:     #c98f2e;
    --washi:       #f1e7d1;
    --washi-dim:   #dccfae;
    --shu-hot:     #c47c10;
    --shu-core:    #dd9420;
    --surface-tint: #f8f1e2;
    --rule:        rgba(23, 19, 16, 0.14);
    --palet-glow:  #573504;
  }

  /* Fuchsia. Blush papier, bijna zwarte inkt met een pruimzweem, en magenta
     als accent. Je zei eerder geen paars; fuchsia zit daar vlakbij, dus dit
     staat er alleen omdat je er zelf om vroeg. Het motief in het hero wordt
     hiermee roze, en dat is van alle zeven de grootste breuk met wat er nu
     staat. */
  :root[data-palet="fuchsia"] {
    --sumi:        #291d22;
    --sumi-deep:   #1c1418;
    --sumi-light:  #6d5c60;
    --shu:         #c21e63;
    --shu-dark:    #6b0d37;
    --shu-deep:    #9c1450;
    --shu-ink:     #d96693;
    --washi:       #f4ded5;
    --washi-dim:   #dcbfb2;
    --shu-hot:     #d92a73;
    --shu-core:    #f04a8c;
    --surface-tint: #fbeae3;
    --rule:        rgba(28, 20, 24, 0.14);
    --palet-glow:  #6b0d37;
  }

  /* Framboos. Dezelfde familie als fuchsia maar dieper en minder schel: waar
     fuchsia opvalt, valt framboos op zijn plaats. Voor een makelaar is dat
     verschil niet niks. */
  :root[data-palet="framboos"] {
    --sumi:        #261a1d;
    --sumi-deep:   #1a1214;
    --sumi-light:  #6b5c58;
    --shu:         #a81e4a;
    --shu-dark:    #5c0d27;
    --shu-deep:    #87153a;
    --shu-ink:     #c85f80;
    --washi:       #f1e0d1;
    --washi-dim:   #d8c0ab;
    --shu-hot:     #bd2455;
    --shu-core:    #d43e6c;
    --surface-tint: #f9ece0;
    --rule:        rgba(26, 18, 20, 0.14);
    --palet-glow:  #5c0d27;
  }

  /* Kastanje. De aardse kant: warm papier, kastanjebruin accent. Het minst
     opvallende van de zeven en het meest tijdloze. */
  :root[data-palet="kastanje"] {
    --sumi:        #271d16;
    --sumi-deep:   #1a1310;
    --sumi-light:  #6d6053;
    --shu:         #8f3b1e;
    --shu-dark:    #4f1d0c;
    --shu-deep:    #732d13;
    --shu-ink:     #b06a4a;
    --washi:       #eddfcb;
    --washi-dim:   #d4c0a3;
    --shu-hot:     #a44821;
    --shu-core:    #bd5a2b;
    --surface-tint: #f6ecdb;
    --rule:        rgba(26, 19, 16, 0.14);
    --palet-glow:  #4f1d0c;
  }

  /* Saffraan. Het lichtste papier van de zeven met het meeste chroma, 37
     punten, en een diep goudgeel accent. Dichter bij oker dan bij de rest,
     maar geler en met meer licht. */
  :root[data-palet="saffraan"] {
    --sumi:        #262017;
    --sumi-deep:   #191510;
    --sumi-light:  #6f6650;
    --shu:         #9c7008;
    --shu-dark:    #4e3703;
    --shu-deep:    #7d5a04;
    --shu-ink:     #d1a437;
    --washi:       #f2e8cd;
    --washi-dim:   #dccfa5;
    --shu-hot:     #cc9410;
    --shu-core:    #e3aa1e;
    --surface-tint: #f9f2df;
    --rule:        rgba(25, 21, 16, 0.14);
    --palet-glow:  #4e3703;
  }

  /* Regenboog. Het motief loopt van magenta over rood, goud, groen en blauw
     terug naar violet: 320 graden vanaf tint 340. Papier en inkt blijven
     monochroom, want een lichte achtergrond met donkere tekst was de
     voorwaarde en dat verandert hier niet.

     De verzadiging staat op 0,58 en niet hoger. Op vol wordt dit een
     kinderboek; op 0,58 leest het als licht dat breekt, en dat is dichter bij
     wat het motief al doet.

     Let op: dit palet bevat blauw en paars, en die had je eerder uitgesloten.
     Zonsopgang hieronder blijft wel binnen die regel. */
  :root[data-palet="regenboog"] {
    --sumi:        #241f1e;
    --sumi-deep:   #191414;
    --sumi-light:  #6a6462;
    --shu:         #b0325a;
    --shu-dark:    #5f1a30;
    --shu-deep:    #8d2848;
    --shu-ink:     #c9738d;
    --washi:       #f0e7db;
    --washi-dim:   #d8cbba;
    --shu-hot:     #c43a66;
    --shu-core:    #d85681;
    --surface-tint: #f8f1e7;
    --rule:        rgba(25, 20, 20, 0.14);
    --palet-glow:  #5f1a30;
    --motief-spectrum: 340 320 0.58;
  }

  /* Zonsopgang. Dezelfde mechaniek, maar de reeks loopt alleen door de warme
     helft: van magenta over rood en oranje naar goud, 90 graden vanaf tint
     335. Geen blauw en geen paars, dus dit blijft binnen je oorspronkelijke
     regel, en het blijft ook dichter bij het motief zoals het nu is. */
  :root[data-palet="zonsopgang"] {
    --sumi:        #261d19;
    --sumi-deep:   #1a1310;
    --sumi-light:  #6d6155;
    --shu:         #c0402a;
    --shu-dark:    #6b2012;
    --shu-deep:    #9b3018;
    --shu-ink:     #d47a58;
    --washi:       #f1e5d0;
    --washi-dim:   #dbcaad;
    --shu-hot:     #d4522c;
    --shu-core:    #ea6b34;
    --surface-tint: #f9f0df;
    --rule:        rgba(26, 19, 16, 0.14);
    --palet-glow:  #6b2012;
    --motief-spectrum: 335 90 0.66;
  }

  /* Inkt. Koel blauw papier, marineblauwe inkt, indigo accent. Van alle
     zestien het verst van waar je nu staat: de hele pagina wordt koel. */
  :root[data-palet="inkt"] {
    --sumi:        #1d2330;
    --sumi-deep:   #12161f;
    --sumi-light:  #5b6272;
    --shu:         #2e4b8f;
    --shu-dark:    #16244a;
    --shu-deep:    #233a70;
    --shu-ink:     #6b83bd;
    --washi:       #d9e2f2;
    --washi-dim:   #b7c4dd;
    --shu-hot:     #3757a3;
    --shu-core:    #4a6cbd;
    --surface-tint:#e9eefa;
    --rule:        rgba(18, 22, 31, 0.14);
    --palet-glow:  #16244a;
  }

  /* Lavendel. Lila papier met een violet accent. Zacht en licht; het
     motief wordt hiermee paars in plaats van rood. */
  :root[data-palet="lavendel"] {
    --sumi:        #261f31;
    --sumi-deep:   #1a1522;
    --sumi-light:  #645a75;
    --shu:         #6b3fa0;
    --shu-dark:    #331d4f;
    --shu-deep:    #553180;
    --shu-ink:     #9a78c4;
    --washi:       #e3d9f2;
    --washi-dim:   #c3b5dc;
    --shu-hot:     #7c4cb8;
    --shu-core:    #9161cf;
    --surface-tint:#eee7fa;
    --rule:        rgba(26, 21, 34, 0.14);
    --palet-glow:  #331d4f;
  }

  /* Pruim. Roze papier met een diep aubergine accent. Warmer dan lavendel
     en donkerder in het accent, dus minder zoet. */
  :root[data-palet="pruim"] {
    --sumi:        #281c26;
    --sumi-deep:   #1b131a;
    --sumi-light:  #6a5b64;
    --shu:         #6e2a55;
    --shu-dark:    #3a1230;
    --shu-deep:    #571f42;
    --shu-ink:     #a05f88;
    --washi:       #f0d8e2;
    --washi-dim:   #d7b5c4;
    --shu-hot:     #823264;
    --shu-core:    #9c3f79;
    --surface-tint:#f9e7ee;
    --rule:        rgba(27, 19, 26, 0.14);
    --palet-glow:  #3a1230;
  }

  /* Kobalt. Warm papier met een koel accent, en dat is met opzet: het
     contrast tussen die twee is groter dan binnen een familie. */
  :root[data-palet="kobalt"] {
    --sumi:        #1f2530;
    --sumi-deep:   #141821;
    --sumi-light:  #5e6472;
    --shu:         #1f4fa8;
    --shu-dark:    #0e2757;
    --shu-deep:    #173d85;
    --shu-ink:     #5b83cc;
    --washi:       #ede5d3;
    --washi-dim:   #d3c8ae;
    --shu-hot:     #295cbd;
    --shu-core:    #3a70d1;
    --surface-tint:#f6f0e2;
    --rule:        rgba(20, 24, 33, 0.14);
    --palet-glow:  #0e2757;
  }

  /* Salie. Groen papier, salie-accent. De rustigste van de zes en het
     dichtst bij mos, alleen zit de kleur hier ook in de achtergrond. */
  :root[data-palet="salie"] {
    --sumi:        #1e261f;
    --sumi-deep:   #141a15;
    --sumi-light:  #5c665c;
    --shu:         #3f6b4a;
    --shu-dark:    #1d3624;
    --shu-deep:    #305438;
    --shu-ink:     #6e9179;
    /* 15 september 2026, op verzoek: het papier van dit palet is een stap
       lichter. #dce8cf → #eaf2e0, dezelfde waarde als --surface-tint. Wat
       donkergroen is (de banden, de voet, het motief) blijft wat het was.
       Elk contrast tegen een donkere ondergrond gaat hierdoor omhoog, nooit
       omlaag; de getallen in de opmerkingen hieronder zijn de oude en dus de
       strengste. Let op het gevolg dat hieronder bij #veelgesteld .disclose
       staat: --washi is niet langer de diepere van de twee. */
    --washi:       #eaf2e0;
    --washi-dim:   #bccfa9;
    --shu-hot:     #4a7d56;
    --shu-core:    #589166;
    --surface-tint:#eaf2e0;
    --rule:        rgba(20, 26, 21, 0.14);
    --palet-glow:  #1d3624;

    /* ===================================================================
       TWEEDE ACCENT — GEEN GEEL MEER.

       15 september 2026, op verzoek: al het geel van de site eruit.

       WAT HIER STOND. Sinds 7 september 2026 was dit een fel geel
       (#f4c518), met de uitdrukkelijke afspraak dat er maar één geel op de
       site mocht bestaan: elke plek die "het gele accent" toonde, gebruikte
       letterlijk dit token en nooit een eigen hexwaarde. Die afspraak is
       precies wat deze wijziging nu één regel groot maakt.

       De toelichting van toen noteerde ook de prijs, met zoveel woorden
       geaccepteerd: geel haalde tegen --washi 1,42:1, ver onder de 3:1 die
       WCAG voor een betekenisvol bedieningselement of pictogram vraagt. Dat
       stond in de compliancelijst als een bewuste afwijking. Die afwijking
       is hiermee weg; ze hoeft niet langer gemeld te worden.

       WAAROM --shu-ink EN NIET --shu. Het accent staat op lichte én op
       donkere vlakken, en dat was het enige waar geel goed in was. Gemeten:

                         op --washi    op --sumi-deep
           geel            1,42            10,81
           --shu           5,35             2,87
           --shu-ink       3,05             5,04

       --shu is prachtig op papier en te donker op de donkere banden; geel
       was het omgekeerde. --shu-ink is de enige die aan beide kanten boven
       de 3:1 blijft. Dat maakt de carrouselstip, de badge in Mijn dossier en
       het pictogram in een prijskaart in één keer leesbaar, in plaats van
       het probleem van links naar rechts te verplaatsen.

       EN HET VOLGT NU HET PALET. --shu-ink is per palet gedefinieerd, dus
       het tweede accent verschuift mee met het eerste in plaats van in elk
       van de vijftien paletten hetzelfde gele vlekje te zijn.

       Aanpassen: wijzig de ene regel hieronder; alle achttien plekken volgen
       mee (`grep -rn accent2 site/`). */
    --accent2: var(--shu-ink);
  }

  /* Staal. Blauwgrijs papier met een petrolaccent. Het soberste palet van
     alle zestien; papier chroma 15, dus bewust ingehouden. */
  :root[data-palet="staal"] {
    --sumi:        #1b2425;
    --sumi-deep:   #111819;
    --sumi-light:  #596466;
    --shu:         #2f6b72;
    --shu-dark:    #153639;
    --shu-deep:    #245459;
    --shu-ink:     #5f979e;
    --washi:       #d5e4e3;
    --washi-dim:   #b2c6c5;
    --shu-hot:     #387d85;
    --shu-core:    #449099;
    --surface-tint:#e5efee;
    --rule:        rgba(17, 24, 25, 0.14);
    --palet-glow:  #153639;
  }

  /* =====================================================================
     DE SECTIES ONDER DE HERO

     Alles hieronder is nieuw. Boven deze regel is de hero, en die is
     ongewijzigd gebleven.

     Effen achtergrond achter alle leestekst, geen motief. Het motief komt
     alleen terug in de slotsectie.
     ===================================================================== */

  /* ---------------------------------------------------------------------
     De pil als button.

     De pil is ontworpen als een anchor, en een anchor heeft geen eigen rand.
     In de laatste twee ronden zijn er vier button-versies bijgekomen, voor de
     chat en de balk, en een button krijgt van de browser standaard
     "2px outset ButtonBorder". Dat is de lichte omlijning die je zag: geen
     opmaak van mij, maar de standaardstijl van de browser die door een
     ontbrekende declaratie heen kwam.

     Meteen ook font-family: inherit, en dat is een tweede fout van dezelfde
     soort. Een button erft het lettertype niet, dus die vier knoppen stonden
     in het systeemlettertype van de bezoeker en niet in Instrument Sans. Op
     een schermafbeelding valt dat nauwelijks op, op een ander besturingssysteem
     wel.

     Deze regel staat bewust NA de hero-CSS en selecteert alleen button.pill,
     zodat de hero-CSS onaangeroerd blijft en de anchor-pil in de hero
     letterlijk niets merkt.
  --------------------------------------------------------------------- */
  button.pill {
    border: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    /* Zonder dit zet Safari op een tik een grijze vlek over de knop. */
    -webkit-tap-highlight-color: transparent;
  }

  .section { position: relative; padding: var(--section-pad-y) var(--gutter); }
  /* Een pagina zonder hero begint met een sectie, en die schoof onder de
     vaste balk. Op een telefoon is de sectierand 56 pixels en de balk 68, dus
     de kop stond 12 pixels achter de balk en je kon niet verder naar boven.
     De balk erbij optellen lost dat op ongeacht schermbreedte. Alleen als
     eerste kind van main, dus de hero op de productpagina blijft ongemoeid;
     die staat daar als eerste en is geen .section. */
  main > .section:first-child {
    padding-top: calc(var(--header-h, var(--nav-h)) + var(--section-pad-y));
  }
  .section--tint { background: var(--surface-tint); }
  .section__inner { margin: 0 auto; width: 100%; max-width: var(--max-shell); }

  /* Leeskolom. Smaller dan de schil, want een regel van 1024 pixels is te
     lang om comfortabel te lezen. Rond de 70 tekens per regel. */
  .read { max-width: var(--max-read); }

  /* Twee losse afstanden, toegevoegd 7 september 2026, ronde 4.

     Ze stonden als `style="margin-top:28px"` en `style="margin-top:16px"` in
     index.html en na-het-afsluiten/index.html. Twee attributen, en die twee
     waren het enige waarvoor de Content-Security-Policy nog
     `style-src 'unsafe-inline'` moest toelaten voor de hele productkant. Met
     deze twee klassen kan die regel eruit, en dan is de CSP daar echt sluitend
     in plaats van bijna. Zie `_headers`.

     De waarden zijn ongewijzigd overgenomen, in pixels, precies zoals ze in
     de attributen stonden: het is hier geen goed moment om ook nog aan de
     opmaak te sleutelen. */
  .mt-28 { margin-top: 28px; }
  .mt-16 { margin-top: 16px; }

  h2 {
    margin: 0 0 var(--stack-tight);
    font-size: var(--size-h2);
    line-height: var(--leading-h2);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    /* Zelfde behandeling als de kop in de hero: er staan lange samengestelde
       woorden in deze kopjes, zoals bestuurdersaansprakelijkheid. */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  h3 {
    margin: 0 0 8px;
    font-size: var(--size-h3);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  .body { margin: 0 0 var(--stack-tight); font-size: var(--size-body);
    line-height: var(--leading-body); color: var(--text-body); }
  .body:last-child { margin-bottom: 0; }
  .body--lead { font-size: var(--size-lead); }

  /* .label en .rule stonden hier als hulpklassen en zijn in geen enkele
     sectie gebruikt. Weggehaald: CSS die niets selecteert kost geen
     rendertijd, maar wel leestijd van de volgende die dit bestand opent. */

  /* Alleen voor schermlezers. Niet display:none en niet visibility:hidden,
     want dan wordt het ook niet voorgelezen. */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* --- Sectie 3, de vijf stappen ------------------------------------- */
  .steps { list-style: none; margin: var(--stack) 0 0; padding: 0;
    display: flex; flex-direction: column; }
  /* De scheidingslijnen tussen de stappen: even in het tweede accent
     (--accent2) geweest, sinds 7 september 2026 op verzoek teruggezet naar
     het neutrale --rule, en het geel verplaatst naar de cijfers hieronder
     in plaats van hier. */
  /* Het cijfer en de tekst staan in het midden van de balk en niet tegen de
     bovenrand. Twee dingen deden dat mis: .step__n is een <p> en kreeg dus de
     alineamarge van 40px mee — die bepaalde in zijn eentje de hoogte van de
     balk (40 + 44 + 40) en duwde het cijfer een halve regel onder de tekst —
     en de vakken rekten uit tot die hoogte, waardoor de tekst bovenaan bleef
     hangen. De marge eruit (het cijfer is geen alinea maar een label) en
     allebei gecentreerd. De film op de hoofdpagina merkt hier niets van:
     .mockup .steps > li zet zijn eigen display en hoogte. */
  .steps > li { display: grid; grid-template-columns: auto 1fr; gap: 0 20px;
    align-items: center;
    padding: var(--stack-tight) 0; border-top: 1px solid var(--rule); }
  .steps > li:last-child { border-bottom: 1px solid var(--rule); }
  .step__n {
    margin: 0;
    font-size: var(--size-step-n);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Stond hier eerst als rgba(27, 25, 24, 0.22): lichter dan de tekst,
       want een oriëntatiepunt en geen inhoud, en dus vrijgesteld van de
       tekstnorm (het cijfer is aria-hidden; de stap heeft zijn eigen kop).
       Sinds 7 september 2026 op verzoek het tweede accent (--accent2, vol,
       geen eigen opacity meer): dat maakt het cijfer duidelijk zichtbaarder
       dan de vorige, bewust vage grijstint, en dat is hier precies de
       bedoeling. Nog altijd decoratief en aria-hidden; alleen het gewicht
       op de pagina is toegenomen. --accent2 haalt tegen --washi met opzet
       niet de 3:1-norm (zie de toelichting bij het token bij het palet),
       maar dat gold voor deze cijfers al niet toen ze grijs waren. */
    color: var(--accent2);
    font-variant-numeric: tabular-nums;
  }
  .step__body { max-width: var(--max-read); }

  /* De cijfers 1 tot 5 staan in de lijst zelf (.step__n hierboven), in het
     gele accent. Hier stond tot 14 september 2026 een Ō die met de scroll
     meeliep en de stap aanwees, met een wielbegrenzer erbij in pagina.js.
     Dat is er op verzoek uit: het werkte niet goed genoeg om te blijven
     staan, en vijf genummerde stappen zeggen hetzelfde zonder mechaniek. */

  /* --- Sectie 3, de carrousel met de gesprekken ------------------------

     Een spoor met scroll-snap en geen slider die met transform schuift. Zo
     werkt hij zonder javascript ook: dan is het een spoor waar je doorheen
     veegt. De knoppen en de bolletjes zijn een toevoeging bovenop iets dat
     al werkt, niet de enige manier om erbij te komen.

     De band loopt over de volle schermbreedte en lost boven en onder op in
     het papier. Zie het patchbestand voor waarom er zestien stops in dat
     verloop staan en niet twee: op de korrel van het papier oogt een rechte
     alfa-lijn geband, een smoothstep-curve met meer stops niet. */
  .gesprekken {
    --gesprek-groen: 23, 33, 26;                    /* #17211a */
    /* 0,722 is de breedste van de drie verhoudingen: het chatvenster, 1000
       bij 1385 nadat de witte marge eraf is. De doos moet minstens zo breed
       zijn, anders bepaalt de breedte de grootte en staan de drie niet even
       hoog. Vandaar dat de hoogte begrensd wordt door de breedte gedeeld
       door 0,722, en niet alleen door de viewport: op een telefoon is de
       doos 280 breed, en dan past een beeld van 540 hoog daar niet in.
       Nagerekend zonder die grens stond het chatvenster op 390 bij 844
       kleiner in beeld dan de twee telefoons. */
    --gesprek-schijn: 0.55;
    /* 8 september 2026: ondergrens (het geval telefoon) van 280 naar 330
       pixels, en de vw-factor mee opgetrokken zodat de doos ertussenin niet
       een heel stuk plat blijft liggen op de nieuwe ondergrens. Op een
       telefoon staat de chatbubbel-tekst in de mockups vast op 15px; kleiner
       dan 280px liet die tekst dichter op elkaar staan dan in de rest van de
       site, en dat was precies waar dit over ging. Bovengrens ook iets mee
       omhoog (560 naar 620) zodat de verhouding niet verschuift op een breed
       scherm.

       Op een echt toestel bleek dat nog niet genoeg: zie de aparte
       @media-regel na deze, die op smalle schermen --gesprek-b én
       --gesprek-h beide vervangt in plaats van bij te schaven. */
    /* 14 september 2026: de doos een stuk groter. De mockups schalen zich
       zelf naar deze doos, dus dit is de knop die alles in de beelden
       meeneemt, de tekst erin inbegrepen. Nagerekend op 1440x900 gaat de
       doos van 620x576 naar 806x738, en schaalt het WhatsApp-scherm mee van
       0,64 naar 0,84. De tekst in de bronbestanden ging daarbovenop met een
       kwart omhoog (site/mockups/*.html), samen ruim de helft groter.
       56vw en 82vh: de band mag hoger worden dan het venster, er staat geen
       verticale snap op de pagina; wat er niet bij mag is dat de voet met de
       bolletjes van het scherm valt, en die staat na de onderrand van de
       band en niet eronder geschoven. */
    --gesprek-b: clamp(360px, 56vw, 820px);
    --gesprek-h: min(clamp(460px, 82vh, 980px), calc(var(--gesprek-b) / 0.722));

    position: relative;
    margin: var(--stack) calc(50% - 50vw) 0;
    width: 100vw;
    /* De onderrand is groter dan het verloop, want de voet met de regel en
       de bolletjes hoort op ondoorzichtig groen te staan en niet in de zone
       die al aan het uitdoven is. Voet ongeveer 78 hoog, verloop 40, onderrand
       minstens 60: dat past met marge. */
    /* 14 september 2026: boven en onder wat smaller (was 60-104 en 60-88).
       De beelden zijn een stuk groter geworden; zonder dit wordt de band
       bijna 1100 hoog en valt de voet met de bolletjes onder de vouw. */
    padding: clamp(44px, 5vw, 76px) 0 clamp(44px, 4.5vw, 68px);
    /* In pixels en niet in procenten. Een verloop in procenten wordt langer
       naarmate de band hoger is, en de band groeit mee met het scherm; dan
       vervaagt hij op een groot scherm over 260 pixels en op een telefoon
       over 150. Vast op 40 blijft het overal even snel: lang genoeg om zacht
       te ogen, kort genoeg om de band niet te laten naijlen.
       Het verloop volgt geen rechte alfa-lijn maar een smoothstep-curve
       (acht stops per kant in plaats van vier). Een rechte lijn oogt hard
       aan de uiteinden en geband in het midden, zeker boven op de korrel
       van het papier; stops die rond het midden dichter opeenstaan en aan
       de uiteinden juist verder uit elkaar, verdoezelen dat. */
    --gesprek-fade: 40px;
    background: linear-gradient(180deg,
      rgba(var(--gesprek-groen), 0)    0,
      rgba(var(--gesprek-groen), 0.06) calc(var(--gesprek-fade) * 0.15),
      rgba(var(--gesprek-groen), 0.22) calc(var(--gesprek-fade) * 0.30),
      rgba(var(--gesprek-groen), 0.43) calc(var(--gesprek-fade) * 0.45),
      rgba(var(--gesprek-groen), 0.65) calc(var(--gesprek-fade) * 0.60),
      rgba(var(--gesprek-groen), 0.84) calc(var(--gesprek-fade) * 0.75),
      rgba(var(--gesprek-groen), 0.97) calc(var(--gesprek-fade) * 0.90),
      rgba(var(--gesprek-groen), 1)    var(--gesprek-fade),
      rgba(var(--gesprek-groen), 1)    calc(100% - var(--gesprek-fade)),
      rgba(var(--gesprek-groen), 0.97) calc(100% - var(--gesprek-fade) * 0.90),
      rgba(var(--gesprek-groen), 0.84) calc(100% - var(--gesprek-fade) * 0.75),
      rgba(var(--gesprek-groen), 0.65) calc(100% - var(--gesprek-fade) * 0.60),
      rgba(var(--gesprek-groen), 0.43) calc(100% - var(--gesprek-fade) * 0.45),
      rgba(var(--gesprek-groen), 0.22) calc(100% - var(--gesprek-fade) * 0.30),
      rgba(var(--gesprek-groen), 0.06) calc(100% - var(--gesprek-fade) * 0.15),
      rgba(var(--gesprek-groen), 0)    100%);
  }

  /* 8 september 2026: op een echt toestel getest, en de tekst in de
     mockups (chatbubbels, 14,5-15px in de bronbestanden) was op een
     telefoon nog altijd te klein om vlot te lezen, ook na de eerste
     vergroting hierboven (280 naar 330px).

     De echte oorzaak: --gesprek-h hierboven begrenst de hoogte via
     --gesprek-b/0,722 (de breedste van de drie verhoudingen, afgestemd op
     het chatvenster). Het WhatsApp-scherm is met 390 bij 812 juist de
     smalste/hoogste van de drie (0,48), en loopt daardoor als eerste tegen
     die hoogtegrens aan: op een telefoon van 390 breed kwam --gesprek-b op
     330 uit, --gesprek-h op 330/0,722 ≈ 457, en de schaal waarmee het
     WhatsApp-scherm (390×812) daarin past werd dan bepaald door de hoogte
     (457/812 ≈ 0,56) en niet door de breedte (330/390 ≈ 0,85) — het beeld
     vulde zijn eigen doos dus niet eens, en was bovendien met 0,56 flink
     verkleind.

     Op desktop is die 0,722-grens wél juist: daar staan de drie beelden
     half naast elkaar, en moeten ze gelijk hoog blijven. Op een telefoon
     staat er maar één in beeld per keer; daar hoeft die gelijke hoogte
     niet, en mag elk beeld gewoon zoveel ruimte krijgen als het scherm
     toelaat. Vandaar hier geen bijschaving van dezelfde formule, maar een
     eigen --gesprek-h die niet meer van --gesprek-b afhangt.

     92vw en niet 100vw: er moet nog een randje overblijven voor de
     lichte doorkijk naar de buur (zie .gesprekken__spoor, padding op een
     halve beeldbreedte) en voor de schaduw/gloed errond. 80vh laat ruimte
     voor de padding van de band zelf (clamp 60-104px boven en onder) plus
     het bijschrift en de bolletjes/pijlen onderaan, zodat die niet van het
     scherm afvallen. Nagerekend op een iPhone 14 (390×844) komt de schaal
     van het WhatsApp-scherm hiermee op ongeveer 0,69 in plaats van 0,56:
     ruim een kwart groter. */
  @media (max-width: 640px) {
    .gesprekken {
      --gesprek-b: min(92vw, 430px);
      --gesprek-h: min(80vh, 720px);
    }
  }

  .gesprekken__spoor {
    /* Bovenop de reis van de band zelf nog 30 pixels, tegengesteld afnemend.
       Dat geeft een lichte parallax: de band en de beelden komen niet als één
       plat blok aan. --reveal-t komt uit dezelfde reveal-motor als de band,
       dus er zijn geen twee mechanieken die uit elkaar kunnen lopen. De 1 als
       terugval betekent: staat het script uit, dan staat alles op zijn plek. */
    transform: translateY(calc((1 - var(--reveal-t, 1)) * 30px));
    display: flex; align-items: center;
    /* 12vw en niet 4: daarmee blijft van de buren ongeveer 45 procent in
       beeld in plaats van 80, en dat is het verschil tussen een doorkijk en
       drie beelden naast elkaar. Nagerekend op 1440, 1280 en 1024 breed komt
       dat op 46, 41 en 43 procent uit; op een telefoon op 6 tot 17, dus daar
       staat er praktisch één in beeld. */
    gap: clamp(24px, 12vw, 200px);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 0; list-style: none;
    /* Precies een halve beeldbreedte, zodat ook het eerste en het laatste
       beeld in het midden kunnen komen te staan. */
    padding: 0 calc(50% - var(--gesprek-b) / 2);
  }
  .gesprekken__spoor::-webkit-scrollbar { display: none; }
  .gesprekken__spoor:focus-visible { outline: 3px solid var(--washi); outline-offset: -6px; }

  .gesprekken__beeld {
    flex: 0 0 var(--gesprek-b);
    height: var(--gesprek-h);
    /* `none center` en niet enkel `center`: één waarde zet BEIDE assen, en dan
       is elk beeld ook een verticaal vastklikpunt — voor de PAGINA, want de
       band scrolt zelf alleen horizontaal. Zodra er ooit nog eens een
       verticale snap op de pagina komt, gaat die daarop staan haken. `none` in
       de blokrichting houdt dat weg; horizontaal blijft alles zoals het was. */
    scroll-snap-align: none center;
    /* Kolom, want onder elk voorbeeld staat een bijschrift. De doos houdt
       dezelfde hoogte; het beeld krijgt wat er na het bijschrift overblijft,
       dus alle drie de voorbeelden houden dezelfde hoogte. */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
  }
  .gesprekken__beeld iframe {
    /* min-height: 0 hoort erbij: zonder dat weigert een flexkind te krimpen
       onder zijn inhoud en duwt het iframe het bijschrift uit de doos. */
    flex: 1 1 auto; min-height: 0; width: 100%;
    /* Een groene schijn over de beelden, zodat het wasgroen en het blauw van
       WhatsApp niet tegen de band breken. Een filter en geen vlak eroverheen:
       de beelden hebben doorzichtige hoeken, en een vlak zou die hoeken groen
       maken. Filters laten de doorzichtigheid staan.
       --gesprek-schijn is de knop: 0 is het beeld zoals het is, 1 is volledig
       groen monochroom. */
    filter: saturate(calc(1 - var(--gesprek-schijn) * 0.55))
            sepia(calc(var(--gesprek-schijn) * 0.55))
            hue-rotate(calc(var(--gesprek-schijn) * 62deg))
            brightness(calc(1 - var(--gesprek-schijn) * 0.05));
    /* Geen border-radius hier: die zou op de doos vallen en niet op het
       beeld. De ronde hoeken zitten in de bestanden zelf. */
    /* De buren staan er half doorheen. Niet weggeblurd: dat leest als een
       fout in de weergave, terwijl dekking leest als diepte. */
  }
  /* Het bijschrift onder elk voorbeeld. Een paar woorden, geen zin: het zegt
     waar het gesprek over gaat en niet wat er in staat.

     Als label en niet als zin: kleiner, in kapitalen, met ruimere letterafstand
     en een streepje erboven. Dat leest als het opschrift bij een toestel en
     niet als een tweede regel verkooptekst. De woorden zijn niet veranderd,
     alleen de vorm; text-transform doet dat in de opmaak en niet in de tekst,
     dus de vertaaltabel en de schermlezer houden de gewone spelling.

     letter-spacing in em en niet var(--tracking-wide): die variabele bestond
     niet, dus die declaratie was ongeldig en deed niets. */
  .gesprekken__bij {
    flex: none; margin: 0;
    font-size: var(--size-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(232, 238, 225, 0.60);
    text-align: center;
  }
  .gesprekken__bij::before {
    content: '';
    display: block;
    width: 28px; height: 1px;
    margin: 0 auto 12px;
    background: rgba(232, 238, 225, 0.28);
  }
  /* De buren staan er half doorheen. Niet weggeblurd: dat leest als een fout
     in de weergave, terwijl dekking leest als diepte. Beeld en bijschrift
     samen, anders dooft het een en blijft het ander staan. */
  .gesprekken__beeld iframe,
  .gesprekken__bij,
  .proef {
    opacity: 0.30;
    transform: scale(0.88);
    transition: opacity 460ms var(--ease), transform 460ms var(--ease);
  }
  .gesprekken__beeld.is-actief iframe,
  .gesprekken__beeld.is-actief .gesprekken__bij,
  .gesprekken__beeld.is-actief .proef {
    opacity: 1;
    transform: scale(1);
  }
  /* Staat de titelslide in het midden, dan hoort er rechts nog geen beeld half
     in beeld te steken: dat leest als iets dat uitsteekt en niet als een
     gesprek dat volgt. Alleen de buur naast de titel, want de doorkijk tussen
     de beelden zelf is wel de bedoeling. Op 0 en niet weggehaald: dan blijft
     de stap van de knoppen dezelfde en verschuift er niets. */
  .gesprekken__beeld--tekst.is-actief + .gesprekken__beeld :is(iframe, .gesprekken__bij) { opacity: 0; }

  /* De drie mockups staan in een iframe. Ze schalen zichzelf naar deze doos;
     zie het blok onderaan die bestanden voor waarom dat daar gebeurt en niet
     hier.

     pointer-events: none is geen detail: een iframe slikt de aanraking op,
     en dan veeg je het spoor niet meer verder zodra je vinger op een gesprek
     landt. Er is in de carrousel ook niets in te klikken, de knop eronder
     staat er verborgen. */
  .gesprekken__beeld iframe {
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  /* --- Slide 5, zelf proberen ---
     Geen kaart met een vlak eronder: op de band is een vlak een tweede band.
     Drie knoppen op een rij, en op een smal scherm onder elkaar. */
  .proef { text-align: center; }
  .proef__kop {
    margin: 0 0 18px;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--washi);
  }
  /* Twee kolommen van gelijke breedte. WhatsApp is het langste woord en gaat
     over beide, Mail en Chat staan eronder naast elkaar en zijn daardoor
     exact even breed, en samen met de tussenruimte exact zo breed als
     WhatsApp. Met flex-wrap kwamen ze op hun eigen breedte uit en stond Chat
     alleen en niet in het midden. */
  .proef__knoppen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: min(300px, 100%);
    margin: 0 auto;
  }
  .proef__knop--breed { grid-column: 1 / -1; }
  .proef__knop {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 22px;
    border-radius: 999px;
    /* 0,55 en niet 0,30: op de band haalt 0,30 maar 1,9:1 en de norm voor de
       begrenzing van een bedieningselement is 3. Nagerekend haalt 0,55 3,9. */
    border: 1px solid rgba(232, 238, 225, 0.55);
    background: transparent;
    color: var(--washi);
    font: inherit; font-size: var(--size-body); font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background-color 260ms var(--ease), border-color 260ms var(--ease);
  }
  .proef__knop:hover {
    background: rgba(232, 238, 225, 0.12);
    border-color: var(--washi);
  }
  .proef__knop:focus-visible { outline: 2px solid var(--washi); outline-offset: 3px; }

  /* --- de knoppen ---
     Losse chevrons, geen omrande cirkels. Het raakvlak is 56 bij 56, ruim
     boven de 44 die als minimum geldt, en de vorm eromheen komt alleen op
     bij hover en focus. */
  .gesprekken__knop {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    /* 64 en niet 56: de chevron erin is naar 40 gegaan, en op 56 zou de vorm
       die bij hover opkomt er strak omheen staan. */
    height: 64px; width: 64px; border-radius: 999px;
    border: 0; background: transparent;
    color: rgba(232, 238, 225, 0.72);
    cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: color 260ms var(--ease), background-color 260ms var(--ease),
                opacity 260ms var(--ease);
  }
  .gesprekken__knop--vorige { left: clamp(8px, 3vw, 40px); }
  .gesprekken__knop--volgende { right: clamp(8px, 3vw, 40px); }
  .gesprekken__knop:hover {
    color: var(--washi);
    background: rgba(232, 238, 225, 0.10);
  }
  .gesprekken__knop:focus-visible {
    color: var(--washi);
    background: rgba(232, 238, 225, 0.10);
    outline: 2px solid var(--washi); outline-offset: 2px;
  }
  .gesprekken__knop[disabled] { opacity: 0; pointer-events: none; }

  /* --- de regel onder de beelden ---
     Eén regel voor alle drie, dus hij staat buiten het spoor. Stond hij
     erin, dan zou hij meescrollen en per beeld lijken te horen. */
  /* --- de voet van de carrousel ---
     De regel en de bolletjes horen bij elkaar en bij de carrousel, niet bij
     het beeld dat op dat moment in het midden staat. Daarom staan ze samen in
     één element, buiten het spoor: stonden ze erin, dan zouden ze meescrollen
     en per beeld lijken te horen. */
  .gesprekken__voet {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-top: clamp(22px, 3vw, 34px);
  }
  /* Slide 1: de titel. Geen bijschrift meer maar het eerste dat je ziet,
     dus groter en in normale kapitalisatie in plaats van klein en in
     kapitalen. Dezelfde woorden. */
  /* Kolom en niet rij: de slide heeft nu twee kinderen, de titel en de
     wenk, en die horen onder elkaar. */
  .gesprekken__beeld--tekst {
    text-align: center;
    flex-direction: column;
    gap: clamp(20px, 3vw, 34px);
  }

  /* De drie pijlen. Elk licht op en verdwijnt weer, met een verschuiving in de
     tijd, zodat het als een loop naar rechts leest.

     De laagste stand is 0,08 en niet 0: bij 0 zijn ze tussen twee rondes even
     helemaal weg, en dan leest het als iets dat kapot is in plaats van als een
     wenk. */
  .gesprekken__wenk {
    display: flex; justify-content: center; align-items: center;
    gap: 1px;
    /* Sinds 7 september 2026 het tweede accent (--accent2) in plaats van
       --washi: "de drie pijlen" uit de eerste regel van deze toelichting,
       op verzoek in geel. Alleen de opacity van elk svg-kind animeert (zie
       de keyframe verderop), dus deze ene kleur is meteen zowel de dovende
       als de "oplichtende" stand. Zit op de vaste donkere band hieronder
       (--gesprek-groen, #17211a, los van het gekozen palet), dus de felle
       waarde zelf is hier veilig: 10,12:1. */
    color: var(--accent2);
    /* Volgt de titel: buiten het midden dooft de hele wenk mee. */
    opacity: 0.30;
    transition: opacity 460ms var(--ease);
  }
  .gesprekken__beeld.is-actief .gesprekken__wenk { opacity: 1; }
  .gesprekken__wenk svg { opacity: 0.08; }

  /* Alleen lopen wanneer deze slide in het midden staat. Een animatie die
     doorloopt terwijl de slide buiten beeld is, kost elke frame werk voor iets
     wat niemand ziet. */
  .gesprekken__beeld.is-actief .gesprekken__wenk svg {
    animation: gesprek-wenk 1800ms var(--ease) infinite;
  }
  .gesprekken__beeld.is-actief .gesprekken__wenk svg:nth-child(2) { animation-delay: 180ms; }
  .gesprekken__beeld.is-actief .gesprekken__wenk svg:nth-child(3) { animation-delay: 360ms; }

  @keyframes gesprek-wenk {
    0%   { opacity: 0.08; transform: translateX(0); }
    22%  { opacity: 1;    transform: translateX(3px); }
    55%  { opacity: 0.08; transform: translateX(0); }
    100% { opacity: 0.08; transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Stil, en dan alle drie even zichtbaar in plaats van één opgelicht: zo
       leest het als opzet en niet als een animatie die vastliep. */
    .gesprekken__beeld.is-actief .gesprekken__wenk svg { animation: none; opacity: 0.55; }
  }
  .gesprekken__titel {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--washi);
    /* Dooft mee met de buren, net als de beelden. Op het element en niet op
       de li, want de li draagt de breedte en de uitlijning. */
    opacity: 0.30;
    transform: scale(0.88);
    transition: opacity 460ms var(--ease), transform 460ms var(--ease);
  }
  .gesprekken__beeld.is-actief .gesprekken__titel {
    opacity: 1;
    transform: scale(1);
  }

  /* --- de bolletjes --- */
  .gesprekken__stippen {
    display: flex; justify-content: center; gap: 6px;
  }
  .gesprekken__stip {
    height: 32px; width: 32px; padding: 0; border: 0; background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .gesprekken__stip::before {
    content: ''; height: 7px; width: 7px; border-radius: 999px;
    background: rgba(232, 238, 225, 0.32);
    transition: background-color 260ms var(--ease), width 260ms var(--ease);
  }
  /* Sinds 7 september 2026 het tweede accent (--accent2, bij het palet
     hierboven) in plaats van --washi: één van een paar plekken waar die
     kleur af en toe opduikt (zie ook .ph__tag, .polis__voorbeeld en
     .dossier__filters-badge). De band hierboven is vast donkergroen
     (--gesprek-groen, #17211a, los van het gekozen palet), dus de felle
     waarde zelf is hier veilig als vlak: 10,12:1 contrast. */
  .gesprekken__stip[aria-current="true"]::before {
    background: var(--accent2); width: 22px;
  }
  .gesprekken__stip:focus-visible { outline: 2px solid var(--washi); outline-offset: 0; border-radius: 999px; }

  /* De band steekt buiten de leeskolom, dus de sectie mag daar geen
     schuifbalk van maken. Clip en niet hidden: hidden zou er een
     scrollcontainer van maken. */
  #hoe-het-werkt { overflow-x: clip; }

  @media (prefers-reduced-motion: reduce) {
    .gesprekken__beeld img,
    .gesprekken__knop,
    .gesprekken__stip::before { transition: none; }
  }

  /* --- Sectie 4, de vier kanalen ------------------------------------- */
  .channels { list-style: none; margin: var(--stack) 0; padding: 0;
    display: grid; gap: var(--stack-tight);
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .channel { display: flex; flex-direction: column; gap: 10px;
    position: relative; }
  /* De hele kaart opent de chat. Dat gebeurt met een echte knop die als
     onzichtbaar vlak over de kaart ligt, en niet door de kaart zelf een knop
     te maken: de kaart bevat een <p>, en die mag niet in een <button> staan.
     Zo blijven toetsenbord en focusring gratis en blijft de tekst tekst.
     De knop staat rechtstreeks in .channel, dus border-radius: inherit pakt
     de 22px uit glas.css en de focusring volgt de ronding van de kaart. */
  .channel__vlak { position: absolute; inset: 0; width: 100%; padding: 0;
    border: 0; background: none; border-radius: inherit; cursor: pointer; }
  /* Sinds 7 september 2026 zonder het gevulde, afgeronde vlak erachter (op
     verzoek: "omkadering icoontjes moet weg") en met het tweede accent
     (--accent2, toelichting bij het palet hierboven) als lijnkleur van het
     icoon zelf, in plaats van het kader plus --text-accent. width/height/de
     flex-centrering blijven staan voor de uitlijning in de rij; alleen
     border-radius en background zijn weg. Twee plekken gebruiken deze
     klasse: de vier kanalen hieronder (op --surface-tint) en de twee
     kaarten bij "Wat er na het afsluiten gebeurt" (op --washi); --accent2
     haalt op geen van beide de 3:1-norm voor een icoon, met opzet (zie de
     toelichting bij het token). */
  .channel__icon { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: var(--accent2); }
  .channel__name { font-weight: 600; color: var(--text-primary);
    font-size: var(--size-body); }
  .channel__note { margin: 0; font-size: var(--size-small);
    line-height: 1.5; color: var(--text-body); }

  /* --- Twee secties naast elkaar ---------------------------------------

     "Wat er na het afsluiten gebeurt" en "Altijd bereikbaar" stonden onder
     elkaar. Sinds 15 september 2026 delen ze één sectie en staan ze in twee
     kolommen; zie de toelichting boven die sectie in index.html.

     align-items: start, want de twee kolommen zijn niet even lang en een
     kolom die zich uitrekt tot de hoogte van zijn buur zet zijn kaart in het
     midden van een leeg vlak. Onder 900 pixels vallen ze onder elkaar terug
     en is het weer wat het was: twee blokken op volgorde. */
  /* --- Het scrolslot tijdens de intro -----------------------------------

     Zolang de kop, de ondertitel en het gespreksveld in het hero opkomen,
     valt er niet te scrollen. Zonder dit scrolt de bezoeker de kop weg
     terwijl die aan het verschijnen is.

     Het attribuut komt van introSlotDicht() in site/motiefkern.js en gaat er
     langs drie wegen weer af; zie daar. Het staat op <html> en niet op body,
     want het is het documentelement dat op deze pagina's scrolt.

     scrollbar-gutter hoort erbij en is geen sier: `overflow: hidden` haalt de
     schuifbalk weg, en dan wordt de pagina op Windows vijftien pixels breder
     en weer smaller op het moment dat het slot eraf gaat — een sprong precies
     wanneer de tekst klaar is met opkomen. Met de gereserveerde goot blijft
     die ruimte staan en springt er niets. Op macOS en iOS zweeft de
     schuifbalk en is er sowieso niets te reserveren.

     Geen touch-action: none erbij. Dat zou ook knijpen om in te zoomen
     blokkeren, en dat is een toegankelijkheidsvoorziening. */
  html[data-intro-slot],
  html[data-intro-slot] body {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 0;
    align-items: start;
  }
  /* DE VIER RIJEN LIGGEN GELIJK, MET SUBGRID.

     Zonder dit zijn het twee losse stapels naast elkaar, en dan bepaalt de
     inhoud van elke kolom waar zijn blokken landen: de linkerkop loopt over
     twee regels en de rechter niet, dus begon de lead rechts hoger, de kaart
     rechts hoger, en stond de link linksonder een halve kaart lager dan de
     slotregel rechts. Vier blokken die twee aan twee bij elkaar horen en
     nergens op dezelfde hoogte staan.

     Met subgrid erven de twee kolommen de rijen van .duo: kop naast kop,
     lead naast lead, kaart naast kaart, slot naast slot. De hoogte van een
     rij is die van het hoogste van de twee, en omdat de kaart zich uitrekt
     zijn de twee kaarten daarmee ook even hoog.

     row-gap: 0 op allebei: de afstand tussen de blokken komt uit de marges
     die ze zelf al hadden (h2, .body, .channels). Een gap erbovenop zou die
     verdubbelen.

     @supports, want zonder subgrid (Safari onder 16, Chrome onder 117) valt
     dit terug op wat het hiervoor was: twee stapels naast elkaar. Dat is de
     oude stand en niet stuk. */
  @supports (grid-template-rows: subgrid) {
    .duo { grid-template-rows: repeat(4, auto); }
    .duo__kolom {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    /* De kaart vult de rij, zodat twee kaarten van ongelijke tekst toch
       even hoog eindigen. */
    .duo__kolom > .channels { align-self: stretch; }
    .duo__kolom > .channels > .channel { height: 100%; }
  }
  @media (max-width: 899px) {
    /* Onder elkaar is er niets meer om uit te lijnen: terug naar twee gewone
       stapels, in leesvolgorde.

       grid-row: auto hoort erbij en is geen sier. Laat je de `1 / -1` uit het
       blok hierboven staan, dan vraagt de tweede kolom om dezelfde vier rijen
       als de eerste, vindt de plaatsing die bezet en maakt er een impliciete
       kolom naast — twee kolommen van 210 en 310 pixels op een telefoon,
       terwijl grid-template-columns netjes op 1fr staat. */
    .duo { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--stack); }
    .duo__kolom { display: block; grid-row: auto; }
  }
  /* De kaarten vullen de kolom waarin ze staan.

     Niet het vaste raster van vier of twee hierboven: in een halve schil
     zou één kaart dan een kwart of een helft van die helft beslaan, en dat
     is precies het lege vlak waarvoor deze twee kolommen er zijn. auto-fit
     en geen vast aantal, zodat een kaart die door een schakelaar terugkomt
     (WhatsApp, Mijn dossier) de kolom vanzelf deelt in plaats van dat hier
     een getal moet wijzigen.

     Twee klassen in de selector, en dat is geen sier: de twee mediaregels
     onderaan dit bestand zetten .channels op twee kolommen en daarna op één,
     ze staan later in het bestand en ze hebben evenveel gewicht. Zonder de
     dubbele klasse wint daar het raster van twee, en dan staat er onder 900
     pixels weer een halve lege rij naast de enige kaart. */
  .channels.channels--duo { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

  /* Twee kolommen in plaats van vier, voor een sectie met twee items.

     Zonder dit stonden de twee items in de eerste helft van een raster van
     vier en bleef de rechterhelft leeg. Het raster van vier zelf is
     ongewijzigd; dit is een extra klasse en geen aanpassing van .channels. */
  .channels--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Een tekstlink in de bodytekst. Zelfde onderstreping als .dekking, want
     dat is hoe een aanklikbaar woord op deze pagina er al uitziet. */
  .tlink {
    color: var(--text-primary);
    text-decoration: underline;
    /* Even in het tweede accent (--accent2) geweest, sinds 7 september 2026
       op verzoek teruggezet naar de oorspronkelijke, neutrale grijstint.
       .studiolink verderop kreeg dezelfde vraag niet en staat dus nog wel
       in het geel; de twee "meer over"-links op deze pagina hoeven niet
       identiek behandeld te worden. */
    text-decoration-color: rgba(27, 25, 24, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .tlink:hover { color: var(--text-accent); text-decoration-color: var(--text-accent); }

  /* --- Sectie 6, de uitklapbare dekkingen ------------------------------

     Vervangt het vaste raster van vier kolommen. Wat daar niet goed aan was,
     te zien op de schermafbeelding: vier kolommen van 248px zijn te smal voor
     "Bestuurdersaansprakelijkheid", dus dat woord brak met een koppelteken
     midden in een kaart, en de rijen liepen daardoor ongelijk.

     Nu drie kolommen van 335px. Nagerekend: dat langste woord is bij 16px
     251px breed, plus 32px padding en 30px voor het pijltje is 313px, en dat
     past in 335. Vandaar dat het label op 16px staat en niet op de geklemde
     bodygrootte die tot 18px loopt: bij 18px is het 344px en breekt het weer.

     auto-fit met minmax zorgt dat het bij een smaller scherm netjes naar twee
     en dan één kolom terugvalt, zonder extra media query.

     align-items: start is wat maakt dat een open kaart zijn buren niet
     uitrekt: alleen die kaart wordt hoger, de rest van de rij blijft staan.
  --------------------------------------------------------------------- */
  /* --- De balk op een telefoon -----------------------------------------

     De balk liep over, en dat is waarom je de burgerknop niet zag: die werd
     buiten het scherm geduwd.

     Nagerekend wat de balk nodig heeft: logo 69, taalknop 110, Inloggen 99,
     burger 38, marges 48 en tussenruimtes 44, samen 408 pixels. Op een scherm
     van 390 loopt dat 18 pixels over, op 360 al 48 en op 320 zelfs 88.

     Sinds 11 september 2026 is de taalkeuze geen drie pillen meer maar één
     knop met een wereldbol. Opnieuw opgemeten in de browser op 500 pixels
     breed: logo 81, taalknop 85, Inloggen 93, burger 38, marges 48 en
     tussenruimtes 24, samen 369. Op 390 blijft daar 21 pixels van over, op
     360 nog 9, en op 320 loopt het 49 over.

     Het breekpunt blijft toch op 480 staan. Met 9 pixels over op 360 staat
     alles tegen elkaar aan geklemd, en dat was hieronder al de reden om niet
     op 430 te gaan zitten waar het technisch net paste. Wat er veranderd is,
     is dus niet de grens maar de marge erachter.

     De taalknop en Inloggen gaan daarom onder 480 pixels uit de balk. Ze
     verdwijnen niet: ze staan al in het uitklapmenu, dat blijft bereikbaar
     via de burger. De balk houdt dan logo plus burger over, samen 175 pixels,
     wat ook op 320 breed ruim past.

     480 en niet 430, waar het technisch net zou passen: met 22 pixels over
     verdeeld over vier elementen staat alles tegen elkaar aan geklemd, en dat
     is precies wat je op de schermafbeelding ziet. 480 laat genoeg lucht.
  --------------------------------------------------------------------- */
  @media (max-width: 480px) {
    /* Alleen die in de balk, niet die in het uitklapmenu: daar moeten ze
       juist blijven staan. Vandaar de nazaat-selector. */
    .navbar__actions .taalkiezer { display: none; }
    .navbar__actions .navbar__login { display: none; }
  }

  /* --- De pil op een telefoon ------------------------------------------

     Kleiner op smalle schermen. Van 255 bij 56 pixels naar 220 bij 46:
     lettergrootte 18 naar 16, de rode cirkel 40 naar 34, en de padding en
     tussenruimte mee omlaag.

     46 pixels hoog en niet lager, en dat is geen smaakgrens. Een aanraakdoel
     hoort minstens 44 pixels te zijn; de volgende stap die ik doorrekende,
     met een cirkel van 30, komt op 40 en zakt daar dus door. Dit is zo klein
     als het kan zonder de knop moeilijker aan te tikken te maken.

     De regel geldt voor elke pil en niet alleen die in de hero. Twee maten
     van dezelfde knop op één telefoonscherm zou er slechter uitzien dan één
     maat die overal klopt; het raakt de knop in de hero, die rechtsonder en
     die in de slotsectie.

     Staat hier en niet bij .pill zelf, want dat blok hoort bij de hero en
     blijft onaangeroerd; deze override komt erna en overschrijft alleen op
     smalle schermen.
  --------------------------------------------------------------------- */
  @media (max-width: 560px) {
    .pill { gap: 10px; padding: 6px 6px 6px 18px; font-size: 16px; }
    .pill .knob { height: 34px; width: 34px; }
    .pill .knob svg { width: 18px; height: 18px; }
  }

  /* --- Sectie 7, de keuzeschakelaar met chips -------------------------

     14 september 2026. Hier stonden drie lijsten onder elkaar (.dekkingen /
     .dekking, tekstknoppen met een geel streepje eronder). Die zijn eruit:
     twintig namen onder drie koppen waren ruim een scherm hoog, en het las
     als een inhoudsopgave in plaats van als een keuze. Nu één schakelaar met
     drie standen en één rij pillen die doorloopt.

     De maten hieronder komen uit de ontwerpreferentie van 14 september
     ("Omata Hoofdpagina Interactief"); de kleuren zijn de tokens van deze
     site en geen eigen waarden, op de drie doorzichtige vlakken na, die op
     de paginagrond gemengd moeten worden en dus in rgba staan.
  --------------------------------------------------------------------- */
  .keuze { margin-top: 12px; }

  /* De schakelaar. Een bak om de drie knoppen heen, zo breed als ze samen
     nodig hebben: een balk over de volle breedte zou lezen als een tweede
     navigatie. Hij staat op `hidden` in de html en wordt door pagina.js
     aangezet; zonder script staan de drie groepen gewoon onder elkaar en
     zou een schakelaar die niets schakelt erger zijn dan geen. */
  .keuze__schakelaar {
    display: flex; gap: 6px;
    width: fit-content;
    padding: 5px;
    border-radius: 16px;
    background: rgba(20, 26, 21, 0.06);
  }
  .keuze__tab {
    border: 0; background: transparent;
    padding: 10px 18px;
    border-radius: 12px;
    /* 17 en niet var(--size-body): de schakelaar en de pillen staan naast
       elkaar op één maat uit de ontwerpreferentie, en die loopt niet mee met
       de vloeiende tekstmaat van de lopende tekst. */
    font: inherit; font-size: 17px; font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    white-space: nowrap;
    transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
  }
  /* De stand die aan staat. Het lichte vlak tilt de knop op uit de bak; de
     binnenschaduw is de lichtrand bovenaan en de buitenschaduw het beetje
     diepte eronder. Vetter, want kleur alleen mag het verschil niet dragen. */
  .keuze__tab[aria-selected="true"] {
    background: var(--washi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 2px 8px rgba(20, 26, 21, 0.10);
    font-weight: 600;
  }
  .keuze__tab:hover { background: rgba(255, 255, 255, 0.42); }
  .keuze__tab[aria-selected="true"]:hover { background: var(--washi); }
  .keuze__tab:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

  /* De groepen. 44 pixels onder de schakelaar, en tussen twee groepen
     hetzelfde als ze alle drie onder elkaar staan (de stand zonder script). */
  .keuze__paneel { margin-top: 44px; }

  /* Twee maten en niet één: 12 tussen de rijen en 10 binnen een rij.

     Met één gat van 10 stonden de pillen even ver van de pil ernaast als van
     de pil eronder, en dan leest een rij niet meer als een rij maar als een
     wolk. Twee pixels verschil is genoeg — het oog groepeert op het kleinste
     verschil, niet op het grootste. */
  .chips {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 12px 10px;
  }
  /* De pil. Geen schaduw, geen blur en geen pijltje: het is een naam waar je
     op kan klikken, en alles wat daar nog bij komt maakt er een kaart van.
     `white-space: nowrap` omdat een naam die over twee regels breekt de rij
     uit elkaar trekt; de rij wikkelt zelf wel. */
  .chip {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(20, 26, 21, 0.20);
    background: rgba(255, 255, 255, 0.42);
    font: inherit; font-size: 17px; font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
  }
  .chip:hover,
  .chip:focus-visible {
    border-color: var(--shu);
    background: var(--washi);
  }
  .chip:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 3px; }

  /* ORDE IN DE OPSOMMING OP EEN TELEFOON, op verzoek van 16 september 2026.

     De rij wikkelt vanzelf, en met namen van twaalf tot achtentwintig tekens
     valt er op 375 pixels meestal één pil per regel — maar niet altijd: waar
     twee korte namen naast elkaar passen, staan ze samen, en daartussen staan
     de lange alleen. Dat leest als een hoop en niet als een lijst.

     Daarom hier één kolom, allemaal even breed, tekst links: dan loopt er één
     lijn langs alle namen en is de volgorde (per thema, zie de toelichting in
     de html) ook echt te zien. Het kost één regel extra tegenover de twee
     korte die nu een rij delen, en dat is de orde waard.

     En nowrap gaat hier juist uit. Op 375 pixels is de langste naam
     ("Bestuurdersaansprakelijkheid") 325 van de 327 pixels die de pil breed
     is: twee pixels marge. Op een toestel van 360 valt hij eruit, en met
     nowrap is dat geen tweede regel maar tekst die over de rand loopt. In één
     kolom kost een tweede regel niets — de pillen blijven even breed en de
     lijn langs de namen blijft staan. 600 en niet 720: op een tablet passen
     er wel drie naast elkaar, en dan is een pil over de volle breedte juist
     onrustig. */
  @media (max-width: 600px) {
    .chips { display: grid; grid-template-columns: 1fr; gap: 8px; }
    /* `width: 100%` en niet alleen `display: block`. DE DERDE GROEP STOND
       ANDERS DAN DE TWEE ANDERE, gemeld 17 september 2026.

       De twaalf van "Voor uw zaak" en de zeven van "Privé" zijn <a> en
       worden met display:block zo breed als de kolom. De zes van "Werkt u
       in…" zijn <button>, en een knop heeft een eigen voorkeursbreedte: die
       krimpt ook als block naar zijn inhoud. Gevolg: één groep als lijst met
       een rechte lijn erlangs, en één als een trap van zes verschillende
       breedtes. Eén element, twee uitkomsten, en aan de css niet te zien.

       Met een expliciete breedte gedragen beide zich gelijk, en dat geldt
       meteen ook voor elke knop die er later bij komt. */
    .chip { display: block; width: 100%; text-align: left; white-space: normal; }
  }

  /* De slotregel staat op volle inkt en niet op de gedempte tint: het is
     geen voetnoot bij de lijst maar de uitweg voor wie zijn geval er niet in
     ziet staan, en dat is de nuttigste zin van de sectie.

     EN OP 28 PIXELS AFSTAND, sinds 15 september 2026. Hij stond op nul —
     nagemeten, letterlijk tegen de onderste rij pillen aan. Boven de pillen
     staat 44 pixels lucht en eronder stond niets, en dat is wat de sectie
     rommelig maakte: de zin las als een afgebroken vierde rij in plaats van
     als de zin die volgt op de lijst.

     28 en niet 44: hij hoort bij deze lijst en is er geen nieuw blok naast.
     Minder dan de afstand boven de groep, meer dan de 12 tussen twee rijen
     pillen — dan staat hij op zijn eigen niveau in de rangorde. */
  .keuze__slot { color: var(--text-primary); margin-top: 28px; }

  @media (max-width: 900px) {
    .keuze__tab, .chip { font-size: 16px; }
    .keuze__paneel { margin-top: 32px; }
    /* Mee omlaag met de 44 die hier 32 wordt, in dezelfde verhouding. */
    .keuze__slot { margin-top: 20px; }

    /* DE DERDE TAB STOND BUITEN BEELD, tot 15 september 2026.

       De schakelaar staat op width: fit-content en zijn knoppen op nowrap, en
       dat is op een breed scherm precies goed: drie knoppen in een bakje zo
       breed als ze samen nodig hebben. Op een telefoon liep hij gewoon door
       voorbij de rand. Nagemeten in het Frans op een scherm van 365: de
       schakelaar 519 breed, en "Vous travaillez dans…" van 346 tot 538 — dus
       volledig buiten beeld, zonder iets dat aangaf dat hij er was.

       Het Frans is hier het bindende geval, zoals bij het breekpunt van de
       balk: dezelfde drie labels zijn in het Nederlands samen ruim honderd
       pixels korter.

       Omwikkelen en niet horizontaal laten schuiven: een strook die opzij
       schuift zonder zichtbare rand ziet er precies zo uit als een strook die
       compleet is, en dan is de derde tab nog steeds onvindbaar. Twee rijen
       zijn lelijker dan één en wel te zien. */
    .keuze__schakelaar { flex-wrap: wrap; max-width: 100%; }
    .keuze__tab { padding: 10px 14px; }
  }

  /* Lucht na een opsomming, in twee maten.

     Alles wat direct op een opsomming volgt krijgt ruimte, want zonder die
     ruimte plakt het tegen de laatste namen aan en leest het als een
     dertiende item in plaats van als iets nieuws.

     De groepskop "Privé:" krijgt meer dan de slotregel, en dat is met opzet:
     een kop begint een nieuwe groep en hoort dus verder van de vorige af te
     staan dan een zin die de vorige afsluit. 54 en 36 pixels, beide afgeleid
     van --stack zodat het aan de ritmemaat van de pagina vastzit en er geen
     los getal bij komt.

     De tweede regel staat na de eerste en niet ervoor. Beide selectoren
     hebben dezelfde specificiteit, dus de volgorde beslist; omgekeerd zou de
     slotregel ook 54 krijgen en was het onderscheid weg. */
  /* De link onderaan Over ons. Zelfde behandeling als de dekkingnamen: een
     onderlijnde tekstlink en geen knop, want het is een verwijzing en geen
     actie. Kleuren en maten uit de bestaande tokens. */
  .studiolink {
    color: var(--text-accent);
    font-weight: 500;
    text-decoration: underline;
    /* Even in het tweede accent (--accent2) geweest, sinds 7 september 2026
       op verzoek teruggezet: geen eigen text-decoration-color meer, dus de
       onderstreping volgt gewoon weer currentColor (--text-accent, groen),
       zoals voor deze wijziging. */
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .studiolink:hover { color: var(--text-primary); }
  .studiolink:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 3px;
    border-radius: 4px; }

  /* --- Melding bij een taal die nog niet volledig is -------------------
     Onder de balk en boven de hero, zodat je het ziet voor je begint te
     lezen. Zelfde opmaak als de placeholders elders op de pagina, want het
     is hetzelfde soort mededeling: dit is nog niet af.
  --------------------------------------------------------------------- */
  /* Vast onder de balk en niet in de gewone opbouw.

     Eerst stond hier position: relative met margin-top. Daarmee schoof de
     melding de hele main naar beneden, dus ook de hero. Die hero is 200vh met
     een sticky kind van precies één schermhoogte, en dat kind begon dan zo'n
     113 pixels lager: zijn inhoud staat verticaal gecentreerd, dus die zakte
     onder de rand weg en je keek naar een leeg vlak. Precies wat je zag.

     Vast onder de balk laat de opbouw ongemoeid: de hero begint weer exact
     waar hij in het Nederlands begint. De melding vormt nu samen met de balk
     één vaste kop, wat voor een mededeling over de taal ook juist is: dat is
     een blijvende toestand en geen tijdelijk bericht.
  --------------------------------------------------------------------- */
  .langbanner {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 45;
    padding: 12px var(--gutter);

    /* Dekkend genoeg om rustig te blijven, met dezelfde blur als de balk.

       Niet om het contrast: dat was hier nooit in gevaar. Doorgemeten tegen
       de felste boog haalt de tekst zelfs bij een dekking van 0,06 nog
       5,66:1, want sumi-deep is heel donker en het rood is licht. Wat wel
       stoort is dat je de bogen achter de tekst zíet bewegen, en dat leest
       onrustig. Op 0,88 is dat weg en blijft er een spoor van het motief
       doorschemeren, net als bij de balk erboven die op 0,72 staat. */
    background: rgba(240, 228, 216, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Sinds 7 september 2026 het tweede accent (--accent2) als randkleur:
       dit is een "let op, deze taal is nog niet compleet"-balk, dus een
       aandachtskleur past er inhoudelijk bij, en hij is per definitie af en
       toe (alleen zichtbaar in een taal die nog niet af is). --accent2
       haalt hier met opzet niet de 3:1-norm voor een rand (zie de
       toelichting bij het token). */
    border-bottom: 1px dashed var(--accent2);
    font-size: var(--size-small);
    line-height: 1.5;
    color: var(--text-body);
    text-align: center;
  }
  /* Verborgen is display: none, dus in het Nederlands heeft deze melding
     nul effect op de opmaak. */
  .langbanner[hidden] { display: none; }

  /* Hier stonden `.dekkingen + .r` en `.dekkingen + .read`, de lucht na de
     drie opsommingen van sectie 7. Die opsommingen zijn op 14 september 2026
     vervangen door de keuzeschakelaar; de ruimte zit nu in .keuze__paneel en
     .keuze__slot, en deze twee selecteerden niets meer. */

  /* --- Het informatiescherm --------------------------------------------
     Zelfde opzet als het inlogscherm: laag eroverheen, wit paneel, modaal.
     Bewust dezelfde vormentaal, want het is hetzelfde soort scherm.
  --------------------------------------------------------------------- */
  .sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(27, 25, 24, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    overflow-y: auto;
  }
  .sheet[hidden] { display: none; }
  .sheet__panel {
    width: min(560px, 100%);
    margin: auto;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(27, 25, 24, 0.28);
    padding: 18px 22px 24px;
  }
  /* De terugknop staat bovenaan en niet onderaan: dat is waar je hem zoekt,
     en na het lezen van een korte tekst hoef je dan niet terug te scrollen. */
  .sheet__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 8px 10px 8px 2px;
    margin: 0 0 6px;
    font: inherit;
    font-size: var(--size-small);
    font-weight: 600;
    color: var(--text-accent);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Sinds 7 september 2026 het tweede accent (--accent2) als lijnkleur van
     dit lijntje: dezelfde "knop die een lijntje krijgt"-behandeling als
     .studiolink/.tlink hierboven, nu op een knop in plaats van een link. De
     tekst zelf blijft --text-accent (groen); alleen de onderstreping bij
     hover is geel. Werkt op elk .sheet-paneel: het informatiescherm bij een
     dekking én het Account-paneel in Mijn dossier (dossier-scherm.js),
     altijd op het witte .sheet__panel; --accent2 haalt daar met opzet niet
     de 3:1-norm voor een lijn (zie de toelichting bij het token). */
  .sheet__back:hover { text-decoration: underline; text-decoration-color: var(--accent2); }
  .sheet__back:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px;
    border-radius: 6px; }
  .sheet__title {
    margin: 0 0 10px;
    font-size: var(--size-h3);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .sheet__body p { margin: 0; font-size: var(--size-body);
    line-height: var(--leading-body); color: var(--text-body); }
  .sheet__ph {
    padding: 10px 12px;
    border: 2px dashed var(--shu-deep);
    border-radius: 10px;
    background: rgba(168, 50, 26, 0.05);
  }
  .sheet__ph .ph__tag { display: block; margin: 0 0 4px; }

  @media (prefers-reduced-motion: no-preference) {
    .sheet__panel { animation: omata-sheet-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
    @keyframes omata-sheet-in {
      from { opacity: 0; transform: translateY(8px) scale(0.99); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* --- Uitklapbare blokken, secties 5 en 8 ---------------------------- */
  /* Native details en summary: toetsenbord, schermlezer en de open-toestand
     werken dan zonder eigen JavaScript, en er is niets dat stuk kan gaan. */
  .disclose { border: 1px solid var(--rule); border-radius: 14px;
    background: var(--surface-tint); }
  .disclose > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px; cursor: pointer;
    font-size: var(--size-h3); font-weight: 600;
    letter-spacing: -0.01em; color: var(--text-primary);
    list-style: none;
  }
  /* De vraag staat sinds 11 september 2026 in een echte <h3>: een <summary>
     draagt zelf geen kopgewicht, en daarmee was geen van de zeven vragen op
     deze pagina een kop. Die <h3> mag de regel niet uit elkaar duwen, dus hij
     erft gewoon wat .disclose > summary al zet. */
  .disclose__vraag {
    margin: 0; font: inherit; color: inherit; letter-spacing: inherit;
  }
  .disclose > summary::-webkit-details-marker { display: none; }
  .disclose > summary:focus-visible { outline: 3px solid var(--shu-deep);
    outline-offset: 2px; border-radius: 14px; }
  .disclose__chev { margin-left: auto; flex: 0 0 auto; transition: transform 0.2s var(--ease); }
  .disclose[open] .disclose__chev { transform: rotate(180deg); }
  .disclose__body { padding: 0 20px 20px; }

  /* Op verzoek van 9 september 2026, vierde versie: elke omlijnde variant
     hiervoor (dik donker, dik in het paletaccent) oogde niet. Geen rand meer
     dus, en in de plaats de twee groentinten die op deze pagina al naast
     elkaar gebruikt worden: de sectie zelf staat op --surface-tint, de kaart
     erop op --washi. Bij het actieve palet zijn die twee sinds 15 september
     2026 dezelfde kleur (#eaf2e0), dus daar is er geen verschil meer te zien
     tussen de kaart en de sectie eronder. Op de vijftien andere paletten
     blijft het staan: beide variabelen bestaan overal en --washi is er de
     iets diepere van de twee.

     Tekst en pijltje krijgen geen eigen kleur: ze volgen gewoon
     --text-primary van .disclose hierboven, en dat haalt op --washi nog
     altijd ruim boven AAA (het is er zelfs iets donkerder papier dan
     --surface-tint, dus het contrast is er niet minder op). */
  #veelgesteld .disclose {
    background: var(--washi);
    border: none;
  }
  #veelgesteld .disclose__chev { color: var(--shu-dark); }

  /* De stapel vragen in sectie 6b. Meer is er niet nodig: .disclose
     hierboven doet de rest. */
  .vragen { display: grid; gap: 10px; }

  /* --- De gesprekken als tekst, onder de carrousel ---------------------- */
  /* Toegevoegd 11 september 2026. De drie gesprekken staan in een iframe met
     data-src, dus wie geen javascript uitvoert ziet er geen letter van — en
     dat is precies wat de extractielaag achter een AI-crawler doet. Dit blok
     zet dezelfde gesprekken als echte tekst op de pagina, gegenereerd uit
     dezelfde mockups (zie bouwscripts/maak_talen.py).

     In een <noscript> en niet in een uitklapblok. Tot 11 september 2026 stond
     er een <details> met "Lees deze gesprekken als tekst" onder de carrousel.
     Dat regeltje was voor een bezoeker een vreemde eend: een verwijzing naar
     de werking van de pagina, midden in een stuk dat af hoort te ogen. Wie
     javascript uitvoert ziet de gesprekken al draaien en heeft de tekst niet
     nodig; wie het niet uitvoert — elke AI-crawler — krijgt precies dit blok.
     Geen cloaking: <noscript> is de standaardmanier om dat te zeggen, en de
     tekst is dezelfde als wat de beelden tonen.

     Bewust ingetogen: dit is een voetnoot bij de beelden, geen tweede sectie. */
  .gesprektekst {
    max-width: var(--maat-lezen, 42rem);
    margin: 28px auto 0;
    padding: 0 var(--rand, 1.5rem);
  }
  .gesprektekst h3 {
    font-size: 1rem; font-weight: 600; margin: 0 0 10px;
    color: var(--text-primary);
  }
  .gesprektekst__regels {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 10px;
    font-size: 0.92rem; line-height: 1.6;
    color: var(--text-secondary, var(--sumi-light));
  }
  .gesprektekst__regels > li {
    padding-left: 14px;
    border-left: 2px solid var(--rule, rgba(0, 0, 0, 0.12));
  }
  .gesprektekst__regels b { color: var(--text-primary); font-weight: 600; }
  .gesprektekst__regels small { display: inline-block; margin-top: 4px; opacity: 0.8; }

  /* --- De dekkingen als tekst ------------------------------------------ */
  /* H-1, 11 september 2026. De veertien beschrijvingen staan nu ook als
     tekst op de pagina en niet alleen in het informatiescherm dat javascript
     opbouwt. Zelfde vorm en zelfde ingetogenheid als de uitgeschreven
     gesprekken hierboven: een <noscript> onder het overzicht. Het uitklap-
     regeltje "Lees de dekkingen als tekst" stond er tot 11 september 2026 wel
     zichtbaar bij, maar dat leest als gereedschap en niet als de site — het
     overzicht van knoppen erboven is de bedoelde manier om dit te lezen.

     Een <dl> en geen lijst met koppen: dit is precies een naam met een
     omschrijving erbij, en dat is waar een definitielijst voor is. */
  .dekkingtekst {
    max-width: var(--maat-lezen, 42rem);
    margin: 28px auto 0;
    padding: 0 var(--rand, 1.5rem);
    display: grid; gap: 14px;
    font-size: 0.92rem; line-height: 1.6;
  }
  .dekkingtekst dt {
    font-weight: 600; color: var(--text-primary);
  }
  .dekkingtekst dd {
    margin: 4px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--rule, rgba(0, 0, 0, 0.12));
    color: var(--text-secondary, var(--sumi-light));
  }

  /* --- Toelichting bij asterisken --------------------------------------- */
  /* Klein en dichtgeklapt, met opzet lichter dan .disclose bij de FAQ: dit
     is een kanttekening, geen inhoudelijke sectie. Zelfde smalle leesbreedte
     als .gesprektekst/.dekkingtekst hierboven, zodat het oogt als voetnoot
     bij de pagina en niet als nieuw blok. */
  /* DEZELFDE KLEUR ALS DE VOET, op verzoek, 18 september 2026.
     De kanttekening stond op het papier van de pagina, tussen het
     ringenmotief van de slotsectie en de donkere voet. Dat gaf een lichte
     strook van een paar regels hoog tussen twee blokken — en een kanttekening
     bij de pagina hoort bij het slot van die pagina, niet als eigen band
     ertussen. Nu loopt hij door in --sumi-deep en leest hij als de bovenrand
     van de voet.

     VOLLE BREEDTE, LEESKOLOM BINNENIN. De max-width is van deze wrapper naar
     .voetnoten zelf verhuisd: zonder dat zou het vlak een smalle donkere
     strook in het midden zijn in plaats van een band. De marge die hier stond
     is padding geworden, want een marge valt buiten het vlak en zou de lichte
     strook terugbrengen die we net weghalen.

     DE MARGE DIE HIER STOND, en waarom die er was: het ringenmotief loopt tot
     de onderrand van de slotsectie (.lp-motief op inset: 0, zie
     site/landing.css), en zonder ruimte erboven liepen de bogen door de tekst
     heen. Dat probleem is nu anders opgelost: het donkere vlak dekt die rand
     af, dus de bogen eindigen netjes tegen de bovenrand van deze band.

     ONDERAAN NUL, zodat dit vlak en .voet één doorlopend blok zijn. Staat er
     ooit weer ruimte onder, dan verschijnt daar een lichte reep tussen twee
     donkere blokken. */
  .voetnoten-wrap {
    background: var(--sumi-deep);
    padding: 40px var(--rand, 1.5rem) 4px;
    margin: 0;
  }
  .voetnoten.disclose {
    border: none; background: transparent;
    max-width: var(--maat-lezen, 42rem); margin: 0 auto;
  }
  /* LICHTE TEKST, en niet --text-secondary: dat is een donkergrijs dat op
     --sumi-deep 2,95:1 haalt en dus onleesbaar is. --washi op 78% geeft
     9,66:1 op dit vlak (nagerekend) en houdt de gedempte toon die deze
     kanttekening hoort te hebben — dezelfde greep als .lp-hero__antwoord.
     De chevron volgt via currentColor. */
  .voetnoten > summary {
    padding: 8px 0; gap: 8px;
    font-size: 0.85rem; font-weight: 500; letter-spacing: normal;
    color: color-mix(in srgb, var(--washi) 78%, transparent);
  }
  .voetnoten .disclose__chev { width: 14px; height: 14px; }
  .voetnoten__lijst {
    margin: 0; padding: 0 0 10px 1.1em;
    display: grid; gap: 8px;
    font-size: 0.85rem; line-height: 1.6;
    color: color-mix(in srgb, var(--washi) 78%, transparent);
  }

  /* --- Placeholders ---------------------------------------------------- */
  /* Bewust opvallend. Een placeholder die eruitziet als afgewerkt werk is
     een placeholder die blijft staan.

     Op verzoek staat er nu geen enkel .ph-blok meer op de pagina. De tekst
     van elk punt staat als html-commentaar op de plek waar het blok stond,
     dus terugzetten is knippen en plakken. .ph zelf wordt daardoor nergens
     meer gebruikt; .ph__tag wel, want het informatiescherm achter de twaalf
     dekkingen bouwt die op wanneer een dekking geen tekst heeft. */
  .ph {
    border: 2px dashed var(--shu-deep);
    border-radius: 12px;
    padding: 16px 18px;
    background: rgba(168, 50, 26, 0.05);
  }
  /* 0,08em en niet var(--tracking-label): die variabele is nergens
     gedefinieerd, dus deze declaratie was ongeldig en de letterafstand deed
     niets. Gevonden met bouwscripts/controle.py. */
  /* Sinds 7 september 2026 een gevuld pilletje in het tweede accent
     (--accent2, hierboven bij het palet) in plaats van gewoon gekleurde
     tekst: één van de twee plekken waar die kleur "af en toe" opduikt, hier
     precies waar hij inhoudelijk klopt ook (nog niet af, dus een kleur die
     om aandacht vraagt). Donkere inkt als tekst erop (10,81:1, zie de
     toelichting bij het token) in plaats van --text-accent, dat op deze
     achtergrond te weinig contrast zou geven. */
  .ph__tag { display: inline-block; margin: 0 0 6px;
    padding: 2px 8px; border-radius: 999px;
    font-size: var(--size-label); letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700;
    background: var(--accent2); color: var(--sumi-deep); }
  .ph__note { margin: 0; font-size: var(--size-small); line-height: 1.5;
    color: var(--text-body); }
  .ph--inline { display: inline-block; padding: 2px 8px; border-width: 1px;
    border-radius: 8px; font-size: var(--size-small); }

  /* --- Sectie 9, het slot met motief ---------------------------------- */
  .closing { position: relative; overflow: hidden;
    padding: var(--closing-pad-y) var(--gutter); }
  /* De bogen doven uit rond de tekst en komen naar de randen op vol.

     Dit is een mask, geen vlakke dekking. drawArcs vult de canvas eerst met
     Washi en zet de bogen daarover, en de sectie heeft geen eigen achtergrond,
     dus daaronder ligt dezelfde Washi. Waar de mask minder doorlaat, valt de
     boog dus terug op exact de achtergrondkleur: geen grijssluier, en de hero
     met zijn eigen .hero-canvas merkt er niets van.

     Zelfde ellips als de lichtzone hieronder, 80% 72% at 50% 46%. Die
     geometrie is voor deze sectie al doorgemeten, dus de twee vallen samen in
     plaats van dat er twee ovalen scheef over elkaar liggen.

     Het verloop: vlak op 0,18 tot 60 procent van de radius, dat is de tekst,
     en daarna een quintische smootherstep naar 1. Die easing heeft aan beide
     einden snelheid nul, dus er zit geen knik waar het vlakke stuk overgaat
     in de klim, en dat is waar het rustig van wordt.

     Aantal stops nagerekend, niet gekozen. Een CSS-verloop interpoleert
     lineair tussen stops, dus de fout is de afwijking van rechte lijnen tegen
     de echte curve. Bij 12 stops blijft die onder 0,004 in alpha, en op de
     donkerste boogkern is dat 0,76 van 255. Onzichtbaar. Bij 4 stops was het
     5,5 van 255 en dat had je gezien.

     Leesbaarheid: op vol haalde de bodytekst tegen de donkerste boogkern
     3,94:1 waar de lichtzone is uitgedoofd, tegen een norm van 4,5. Met dit
     verloop is het laagste punt binnen de tekstzone 10,8:1. */
  /* Tweede masklaag: uitdoven naar de boven- en onderrand van de sectie.

     Waarom dit nodig is. .closing heeft overflow: hidden en de canvas vult de
     sectie, dus de bogen worden aan de boven- en onderrand recht afgesneden.
     Zolang de bogen daar zwak waren viel dat niet op, maar de radiale mask
     hierboven maakt juist het midden zwak en de randen sterk: nagerekend
     staat de mask op de bovenhoeken op 0,90 en op de onderrand op 0,41. Op
     die snijlijn stonden de bogen dus vol tegen een sectie zonder bogen, en
     dat las als een harde horizontale lijn.

     De tweede laag dooft de bogen uit over 18 procent van de hoogte aan
     beide einden, met een quintische smootherstep zodat er geen knik in het
     verloop zit. mask-composite intersect vermenigvuldigt de twee lagen, dus
     de radiale uitsparing rond de tekst blijft precies zoals hij was.

     Twaalf stops per flank, en dat is nagerekend: een CSS-verloop trekt
     rechte lijnen tussen stops, en bij twaalf blijft de afwijking van de
     echte curve onder 0,92 van 255 op de donkerste boogkern. Bij drie was
     het 12,9 en dan zie je de knikken. */
  .closing__canvas { position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
    -webkit-mask-image:
      radial-gradient(ellipse 80% 72% at 50% 46%,
      rgba(0,0,0,0.180) 0%,
      rgba(0,0,0,0.180) 60%,
      rgba(0,0,0,0.184) 63.33%,
      rgba(0,0,0,0.209) 66.67%,
      rgba(0,0,0,0.265) 70%,
      rgba(0,0,0,0.352) 73.33%,
      rgba(0,0,0,0.464) 76.67%,
      rgba(0,0,0,0.590) 80%,
      rgba(0,0,0,0.716) 83.33%,
      rgba(0,0,0,0.828) 86.67%,
      rgba(0,0,0,0.915) 90%,
      rgba(0,0,0,0.971) 93.33%,
      rgba(0,0,0,0.996) 96.67%,
      rgba(0,0,0,1.000) 100%),
      linear-gradient(to bottom,
      rgba(0,0,0,0.000) 0%,
      rgba(0,0,0,0.005) 1.5%,
      rgba(0,0,0,0.035) 3%,
      rgba(0,0,0,0.104) 4.5%,
      rgba(0,0,0,0.210) 6%,
      rgba(0,0,0,0.347) 7.5%,
      rgba(0,0,0,0.500) 9%,
      rgba(0,0,0,0.653) 10.5%,
      rgba(0,0,0,0.790) 12%,
      rgba(0,0,0,0.896) 13.5%,
      rgba(0,0,0,0.965) 15%,
      rgba(0,0,0,0.995) 16.5%,
      rgba(0,0,0,1.000) 18%,
      rgba(0,0,0,1.000) 82%,
      rgba(0,0,0,0.995) 83.5%,
      rgba(0,0,0,0.965) 85%,
      rgba(0,0,0,0.896) 86.5%,
      rgba(0,0,0,0.790) 88%,
      rgba(0,0,0,0.653) 89.5%,
      rgba(0,0,0,0.500) 91%,
      rgba(0,0,0,0.347) 92.5%,
      rgba(0,0,0,0.210) 94%,
      rgba(0,0,0,0.104) 95.5%,
      rgba(0,0,0,0.035) 97%,
      rgba(0,0,0,0.005) 98.5%,
      rgba(0,0,0,0.000) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(ellipse 80% 72% at 50% 46%,
      rgba(0,0,0,0.180) 0%,
      rgba(0,0,0,0.180) 60%,
      rgba(0,0,0,0.184) 63.33%,
      rgba(0,0,0,0.209) 66.67%,
      rgba(0,0,0,0.265) 70%,
      rgba(0,0,0,0.352) 73.33%,
      rgba(0,0,0,0.464) 76.67%,
      rgba(0,0,0,0.590) 80%,
      rgba(0,0,0,0.716) 83.33%,
      rgba(0,0,0,0.828) 86.67%,
      rgba(0,0,0,0.915) 90%,
      rgba(0,0,0,0.971) 93.33%,
      rgba(0,0,0,0.996) 96.67%,
      rgba(0,0,0,1.000) 100%),
      linear-gradient(to bottom,
      rgba(0,0,0,0.000) 0%,
      rgba(0,0,0,0.005) 1.5%,
      rgba(0,0,0,0.035) 3%,
      rgba(0,0,0,0.104) 4.5%,
      rgba(0,0,0,0.210) 6%,
      rgba(0,0,0,0.347) 7.5%,
      rgba(0,0,0,0.500) 9%,
      rgba(0,0,0,0.653) 10.5%,
      rgba(0,0,0,0.790) 12%,
      rgba(0,0,0,0.896) 13.5%,
      rgba(0,0,0,0.965) 15%,
      rgba(0,0,0,0.995) 16.5%,
      rgba(0,0,0,1.000) 18%,
      rgba(0,0,0,1.000) 82%,
      rgba(0,0,0,0.995) 83.5%,
      rgba(0,0,0,0.965) 85%,
      rgba(0,0,0,0.896) 86.5%,
      rgba(0,0,0,0.790) 88%,
      rgba(0,0,0,0.653) 89.5%,
      rgba(0,0,0,0.500) 91%,
      rgba(0,0,0,0.347) 92.5%,
      rgba(0,0,0,0.210) 94%,
      rgba(0,0,0,0.104) 95.5%,
      rgba(0,0,0,0.035) 97%,
      rgba(0,0,0,0.005) 98.5%,
      rgba(0,0,0,0.000) 100%);
    mask-composite: intersect; }
  /* Zelfde principe als in de hero: een lichtzone tilt de tekst van het
     motief. Waarden hier apart gemeten, want deze sectie is veel lager dan
     een volle schermhoogte en de bogen staan er dus dichter op.

     Mijn eerste waarde stond op 0,86 in het hart. Doorgemeten haalde de
     bodytekst daar 9,19:1 tegen een norm van 4,5, dus dat was twee keer te
     veilig: het motief was er nog maar voor 14 procent, terwijl het in deze
     sectie juist mag terugkomen. Vijf sterktes doorgerekend op vijf
     sectiehoogtes; bij 0,40 haalt de tekst nog 6,30:1 en is het motief voor
     60 procent zichtbaar. Dat is de keuze. */
  .closing__light { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 72% at 50% 46%,
      rgba(239, 230, 216, 0.40) 0%,
      rgba(239, 230, 216, 0.34) 45%,
      rgba(239, 230, 216, 0.16) 72%,
      rgba(239, 230, 216, 0) 100%); }
  .closing__inner { position: relative; z-index: 2; margin: 0 auto;
    max-width: var(--max-shell); text-align: center; }
  .closing__inner .body { margin-left: auto; margin-right: auto; }
  .closing h2 { margin-bottom: var(--stack-tight); }

  /* --- Reveal op scroll ------------------------------------------------ */
  /* Zichtbaar in de CSS, het script zet de begintoestand. Omgekeerd zou een
     scriptfout een lege pagina geven. */
  .r { opacity: 1; }

  /* will-change stond hier op ALLE .r-elementen, permanent.

     Nagemeten op 1440x900 met DPR 2: dat zijn 28 elementen, en de browser
     houdt voor elk een eigen compositielaag in geheugen zolang de pagina
     open staat. Samen 54 MB, waarvan 18 MB voor de carrouselband alleen
     (1440x829). Daar komen de twee canvassen nog bij. Op een telefoon met
     een krap grafisch budget is dat het verschil tussen een pagina die
     blijft staan en een tab die de browser wegdoet.

     En het kocht niets: will-change is een hint om een laag KLAAR te zetten
     vóór een animatie begint. Een transform- of opacity-animatie krijgt zijn
     laag toch al van de compositor op het moment dat ze loopt. De hint is
     alleen zinvol in het korte venster vlak voor de eerste frame, en de
     specificatie zegt daar letterlijk bij: niet op veel elementen zetten, en
     niet laten staan.

     Nu hangt de hint aan een attribuut dat het script zet zolang een element
     echt beweegt, en weghaalt als het op zijn eindstand staat. Zie
     paintSections in pagina.js. Elementen die klaar zijn kosten vanaf dan
     geen laag meer. */
  .js-reveal .r[data-beweegt] { will-change: opacity, transform; }

  /* .grid-list stond hier ook in: die regels zijn eruit omdat .covers met
     auto-fit zelf terugvalt naar twee en dan één kolom. De regels voor
     .channels en .steps zijn ongewijzigd. Het voorbeeldgesprek is eruit,
     dus de regel voor .convo__msg hier ook. */
  @media (max-width: 900px) {
    .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .channels { grid-template-columns: 1fr; }
    .steps > li { grid-template-columns: 1fr; gap: 4px; }
  }

  /* Op een telefoon gaat de Ō eruit. Hij kan alleen naast de lijst staan —
     erboven is het een strook die het lezen onderbreekt — en naast een kolom
     van 390 pixels kost hij een vijfde van de leesbreedte, terwijl dezelfde
     stap hier al over tien regels loopt. Dan liever de terugvalstand: de
     cijfers staan gewoon weer in de lijst zelf. */
  @media (prefers-reduced-motion: reduce) {
    .pill { transition: none; }
    .pill:hover { transform: none; }
  }

  /* =====================================================================
     De voet met de wettelijke vermeldingen.

     Klein, stil en leesbaar: dit is geen verkooptekst maar informatie die
     iemand komt zoeken. Dekking van de tekst hoog genoeg om te lezen en niet
     hoger, want boven de voet staat de slotsectie en die hoort te blijven
     trekken. Nagerekend haalt --text-body op de paginagrond 8,0:1.
     ===================================================================== */
  /* Donker, met lichte letters. De slotsectie erboven is licht en houdt het
     motief; de voet zet daar een streep onder in plaats van door te lopen in
     dezelfde kleur. Dit is ook de plek waar niets meer verkocht wordt.

     Nagerekend op sumi-deep #141a15: washi haalde als #dce8cf 12,93:1 en
     als #eaf2e0 sinds 15 september 2026 meer, en de gedempte tint #a8bd9b
     7,68:1, tegen een eis van 4,5. De links staan op #93b39c en halen
     6,05:1.

     10 september 2026: de doorzichtigheid van 0,78 is eraf, op verzoek. Die
     bracht de tekst samengesteld op ongeveer 7,7:1 — ruim boven de eis, en
     toch slecht leesbaar. Een contrastverhouding meet twee kleuren en niet
     hoe een letter oogt: dunne lichte letters van 14px op een bijna zwarte
     grond ogen matter dan hetzelfde getal op een lichte grond, en dan is
     "haalt AA" geen antwoord op "ik lees het niet". Nu vol washi, 12,93:1.
     Verlagen kan, maar dan met de tekst zelf nagekeken en niet op het
     getal alleen. */
  .voet {
    padding: clamp(28px, 4vw, 48px) var(--gutter);
    background: var(--sumi-deep);
    color: var(--washi);
    font-size: var(--size-small);
    line-height: 1.6;
  }
  .voet__inner { max-width: var(--read, 68ch); margin: 0 auto; }

  /* DE BEDRIJFSPAGINA OP LINKEDIN, bovenaan de voet sinds 17 september 2026.
     Stond eerst als tekstlink "LinkedIn" onder de juridische links; op
     verzoek van Ōmata nu boven de wettelijke regels, groter, en als het
     merkteken zelf.

     HET LOGO IN WIT EN NIET IN HET SITE-ACCENT. LinkedIn staat hun "in"-vlag
     toe in hun blauw, in zwart of in wit, en niet hertint. Het accent van
     deze site (--shu-ink) verschilt per pagina, dus dat zou het logo op elke
     landingspagina een andere kleur geven. Vandaar --washi, en alleen de
     dekking beweegt bij hover — dat verandert de kleur niet.

     De maat staat op 24px en niet op 1em: het is een beeldmerk en geen
     letter, en meeschalen met de tekstgrootte maakt het op een telefoon
     kleiner dan het raakvlak dat een vinger nodig heeft. Het raakvlak zelf is
     44px hoog via de padding op de link, met een negatieve marge zodat de
     regel er niet hoger van wordt. */
  .voet__sociaal {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 16px;
  }
  .voet__sociaal a {
    display: inline-flex;
    align-items: center;
    color: var(--washi);
    opacity: .85;
    padding: 10px;
    margin: -10px;
  }
  .voet__sociaal a:hover { opacity: 1; }
  .voet__sociaal a:focus-visible {
    outline: 3px solid var(--washi); outline-offset: 0; border-radius: 6px;
  }
  .voet__logo { width: 24px; height: 24px; fill: currentColor; display: block; }
  .voet__regel { margin: 0 0 6px; }
  .voet__klein { margin-top: 10px; }
  /* De wijzigingsdatum. Kleiner en gedempt: hij hoort er te staan voor
     wie hem zoekt, en niet te concurreren met de wettelijke regels
     erboven. */
  .voet__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; }
  /* Even in het tweede accent (--accent2) geweest, sinds 7 september 2026
     op verzoek teruggezet naar het oorspronkelijke, gedempte --shu-ink: op
     elke pagina tegelijk (de voet is gedeelde opmaak) bleek dat te veel
     geel. */
  .voet__links a, .voet__knop {
    color: var(--shu-ink, #93b39c);
    text-decoration: underline;
    text-underline-offset: 3px;
    font: inherit;
  }
  .voet__links a:hover, .voet__knop:hover { color: var(--washi); }
  .voet__knop {
    border: 0; background: transparent; padding: 0;
    cursor: pointer; text-align: left;
  }
  .voet__links a:focus-visible, .voet__knop:focus-visible {
    outline: 3px solid var(--washi); outline-offset: 3px; border-radius: 3px;
  }

  /* De link om de navigatie over te slaan.

     Niet display: none en niet visibility: hidden: die halen hem ook uit de
     tab-orde, en dan is er niets om over te slaan. Eén pixel buiten beeld,
     zichtbaar zodra hij focus krijgt. Dat is de enige manier waarop hij zowel
     onzichtbaar als bruikbaar is. */
  .overslaan {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--sumi-deep, #141a15);
    color: var(--washi, #eaf2e0);
    text-decoration: none;
    border-radius: 0 0 10px 0;
    font-size: var(--size-small);
    font-weight: 500;
  }
  .overslaan:focus {
    left: 0;
    outline: 3px solid var(--shu-core, #589166);
    outline-offset: -3px;
  }

/* ===========================================================================
   De marge van de hoek rechtsonder op een telefoon.

   Staat onderaan en niet bij de tokens bovenaan: die staan in een :root
   zonder mediavraag, en deze hoort er juist een te hebben. 720 is dezelfde
   grens als balkSmal() in site/motief.js gebruikt.
   ========================================================================= */
@media (max-width: 720px) {
  :root { --hoek-gutter: 12px; }
}