/*
 * marktamigo.nl: de site, niet de applicatie.
 *
 * tokens.css komt ongewijzigd uit applicatie/public/assets/css/. Dat bestand is
 * de enige plek die bepaalt hoe MarktAmigo eruitziet, en het is opgebouwd voor
 * één scherm: eenhandig, buiten, in daglicht op een kraam. Dit bestand voegt toe
 * wat een leespagina nodig heeft en een kassascherm niet: een displaytrap die
 * boven 1,875rem uitkomt, en de kist als bouwsteen.
 *
 * DE KRAAMWAND. De pagina is ingedeeld zoals een kraam is ingedeeld: ongelijke
 * vlakken tegen elkaar aan, alles tegelijk zichtbaar, niets weggeklikt. De maten
 * zijn expres verschillend: vier gelijke vakken naast elkaar is een functiegrid,
 * en dat is precies de categoriestandaard waar deze pagina tegenin gaat.
 */

/* ---- Wat de site aan tokens toevoegt --------------------------------- */

:root {
    /* Displaytrap. tokens.css stopt bij 1,875rem omdat een kassascherm niet
       groter hoeft; een homepage wel. Vloeiend, met een ondergrens die op een
       telefoon van 360px nog past en een bovengrens onder de 6rem-plafond. */
    --kop-xl: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
    --kop-l:  clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    --kop-m:  clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);

    /* En dezelfde redenering voor de ruimte. tokens.css stopt bij --ruimte-7 =
       48px omdat een kassascherm niet meer nodig heeft; de letters hierboven
       lopen tot 80px, en dan is 48px lucht tussen koppen van die maat te krap.

       Op de homepage staat tussen twee secties een haarlijn met aan weerszijden
       de padding van deze maat, dus je leest de helft ervan als de afstand. De
       grootste ruimte bínnen een sectie is 32px. Verhouding tussen scheiden en
       groeperen: 2,5 : 1, waar 2 : 1 de ondergrens is.

       Vloeiend en niet vast, om één reden: op een telefoon is 80px tussen
       secties weggegooid scherm. Onderaan blijft het 48px en groeit het mee met
       de koppen. */
    --ruimte-8: clamp(3rem, 2.2rem + 3.4vw, 5rem);   /* 48px → 80px */

    /* Tussen twee alinea's. Een alinea-afstand hoort tussen 0,75 en 1,25 regel
       te liggen; onder een halve regel lopen alinea's visueel in elkaar over tot
       één blok grijs.

       In em en niet in rem, zodat de maat meerekent met de letter waar hij
       tussen staat: een uitlegstuk (20px) krijgt 27px en de lopende tekst elders
       (17px) 23px, in allebei ongeveer 0,8 regel. Een vaste maat zou in de
       kleinste tekst te ruim uitpakken. */
    --alinea-ruimte: 1.36em;                         /* ± 0,8 regel */

    /* Boven een kop in een lang stuk. De ondergrens is er omdat --ruimte-8 op
       een telefoon op 48px klemt terwijl de alinea's daar hun eigen lucht
       houden; zonder die grens scheidt een kop met 1,7 : 1 en dat is te weinig.
       Met 3,5rem blijft het overal ten minste 2 : 1. Een eigen token en geen
       max() ter plekke, zodat de drie maten die samen het leesritme bepalen op
       één plek staan. */
    --kop-ruimte: max(var(--ruimte-8), 3.5rem);

    /* De kist. Diepere ronding dan de app: daar is een kaart een oppervlak om
       op te tikken, hier is het een krat waar iets in ligt. */
    --kist-radius: 22px;
    --kist-radius-s: 14px;

    /* De naad tussen twee kisten. Kisten staan tegen elkaar aan, niet los
       zwevend met schaduw: daarom een naad en geen marge. */
    --naad: 6px;

    /* De rail waar de hele site op staat. Drie kolommen: marge, inhoud, marge.
     *
     * DE MARGE IS GEEN LOS GETAL. Hij is precies de inzet van de tekst in de
     * kaart van het eerste scherm: de rand óm de kaart plus de binnenmarge
     * erín. Daardoor begint elke kop, elke alinea en elke kolom op de site op
     * exact dezelfde lijn als de slogan. Verander je een van die twee maten,
     * dan schuift de hele site mee — en dat is de bedoeling, want anders lopen
     * ze weer uit elkaar.
     *
     * Tot 12 september 2026 stond er een --breedte-site van 78rem in, en dat
     * was de oorzaak van de scheve stand die de eigenaar aanwees: op een breed
     * scherm begon de kaart op 40px en de sectietekst eronder op 392px. Die maat
     * is geschrapt en niet vervangen. De prijs daarvan staat eerlijk in DESIGN:
     * de pagina heeft nu geen bovengrens meer en rekt door op een heel breed
     * scherm. Wat dat draaglijk maakt is dat elke regellengte al apart is
     * afgetopt in ch — een brede kolom is hier lucht, geen lange regel.        */
    --rail-marge: calc(var(--kraam-marge) + var(--kraam-binnen));
    --rail:
        [volle-start] var(--rail-marge)
        [rail-start]  minmax(0, 1fr)
        [rail-end]    var(--rail-marge)
        [volle-eind];

    /* De kist die de kop draagt is in beide standen de hoofdkleur. Dat is geen
       vergeten donkere variant: tokens.css legt voor de app al vast dat de
       hoofdkleur 's avonds eindelijk het luidst mag zijn, en op één groen vlak
       tegen een donkere grond klopt dat hier net zo goed. #2e3324 op #d6e499
       haalt 13:1, dus de tekst erin staat in beide standen vast. */
    --kist-lichtgroen: var(--merk-lichtgroen);
    --kist-op-lichtgroen: var(--groen-900);

    /* De vulling van een gewone kist. In het donker die van de app; overdag
       #eef3d8 uit het contract, want een wit vlak op warm papier is precies de
       kassaschermlogica die deze pagina niet volgt. De rand moet dan zelf zijn
       werk doen: tussen #f8fce1 en #eef3d8 zit te weinig verschil om een kist
       af te bakenen. */
    --kist-vlak: var(--vlak-rustig);
    --kist-rand: var(--rand);

    /* De kaart die het eerste scherm draagt: hij vult het scherm op een smalle
       rand na. Die rand is het enige wat hem van een gewone volvlak-hero
       onderscheidt, en de maat komt uit de referentie van de eigenaar: 40px op
       een breed scherm, 20px op een telefoon.

       De binnenmarge is wat de kop en de tekst van die rand af houdt. Kop en
       tekst gebruiken allebei dezelfde som — marge plus binnenmarge — zodat het
       woordmerk boven de slogan uitkomt en niet ernaast. */
    --kraam-marge: 40px;
    --kraam-binnen: var(--ruimte-7);
    --kraam-radius: 28px;
}

/* De app zet de grond op zuiver wit, want een kassascherm moet in de zon zoveel
   mogelijk contrast geven. Een leespagina niet: hier is de grond het merkwit
   #f8fce1, warm en rustig, en dat is wat het richtingscontract vastlegt. Alleen
   overdag: in het donker blijft de grond die van de app, dus deze regel mag de
   dark-block van tokens.css niet overschrijven. */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
    :root {
        --achtergrond: var(--groen-025);

        /* Gemeten, niet gekozen. De oude kistvulling #eef3d8 haalde 1,08:1 op
           de grond en kon zichzelf dus niet dragen — de rand deed al het werk,
           en dat is waarom de pagina als een muur van blokjes las. #e3ecbd
           haalt 1,18:1 en draagt zichzelf; de rand kan eraf. De inkt staat er
           met 10,5:1 op, de zachte inkt met 4,93:1. */
        --kist-vlak:   #e3ecbd;
        --kist-rand:   transparent;

    }
}

/* ---- Grond ------------------------------------------------------------ */

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

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

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

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--tekst);
    font-family: var(--lettertype);
    font-size: var(--tekst-m);
    line-height: var(--regelhoogte);
    font-weight: var(--gewicht-normaal);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--lettertype-kop);
    line-height: var(--regelhoogte-kop);
    font-weight: var(--gewicht-vet);
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* De browservlakken die we niet zelf tekenen dragen het ontwerp mee. */
::selection {
    background: var(--merk-lichtgroen);
    color: var(--groen-900);
}

:root { accent-color: var(--accent); caret-color: var(--link); }

@supports (scrollbar-color: auto) {
    html { scrollbar-color: var(--groen-500) var(--achtergrond); }
}

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--link-donker); }

:focus-visible {
    outline: 3px solid var(--focusring);
    outline-offset: 3px;
    border-radius: 4px;
}

img { max-width: 100%; display: block; }

/* De wikkel om een schermafbeelding telt niet mee in de opmaak. Een <picture>
   is inline en heeft geen eigen maat; in een flexcontainer klapt hij dicht en
   blijft er van de afbeelding twee pixels over. Zo is de <img> weer het kind
   van de container en werken de bestaande regels op hem gewoon door. */
picture.schermafbeelding { display: contents; }

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

/* Boven de meelopende kop uit: die staat op 20, en een overslaan-link die
   eronder verdwijnt is precies de link die niemand meer kan gebruiken. */
.overslaan {
    position: absolute;
    left: var(--ruimte-4);
    top: -4rem;
    z-index: 30;
    background: var(--accent);
    color: var(--op-accent);
    padding: var(--ruimte-3) var(--ruimte-4);
    border-radius: var(--radius-m);
    font-weight: var(--gewicht-vet);
    transition: top 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.overslaan:focus { top: var(--ruimte-4); }

/* ---- De wand ---------------------------------------------------------- */

/* De wand is geen doos meer maar een rail: drie kolommen, waarvan de middelste
 * de leesbreedte draagt en de twee buitenste de marge. Alles staat standaard op
 * de rail en leest daardoor precies zo breed als voorheen — de middelste kolom
 * is de oude maat min de oude binnenmarge, dus de geometrie van de acht andere
 * pagina's verandert geen pixel.
 *
 * Wat het oplevert is één ding, en daarvoor is het gedaan: een vlak kan nu van
 * schermrand tot schermrand lopen door `volle-start / volle-eind` te vragen.
 * Dat kan met `100vw` in één regel, en dat is precies wat hier níét staat: vw
 * rekent de schuifbalk mee en levert op Windows horizontale overflow op. Dit
 * project is daar al een keer op fout gegaan bij het lezen van een opname.
 *
 * `main` krijgt dezelfde rail, want de kaart van het eerste scherm zit erin.  */
.wand {
    display: grid;
    grid-template-columns: var(--rail);
    padding-block: var(--ruimte-4);
}

.wand > *,
main > * { grid-column: rail-start / rail-end; }

/* `main` draagt de rail door in plaats van er zelf op te staan, want de kaart
   zit erin en niet ernaast. De klasse in de selector is nodig: zonder hem wint
   `.wand > *` hierboven en blijft main op de rail staan. */
.wand > main {
    grid-column: volle-start / volle-eind;
    display: grid;
    grid-template-columns: var(--rail);
}

/* Kop van de pagina: woordmerk links, de links in het MIDDEN, één knop rechts.
   Zo staat het in de referentie van 12 september 2026, en dat is het enige wat
   er aan de indeling veranderd is; de lijst komt nog steeds uit
   partials/paginas.php, dus een pagina erbij verandert hier niets.

   Drie kolommen en geen `space-between` met een automarge. Met een automarge
   hangen de links aan de knop vast en verspringt het midden zodra er een
   pagina bij of af gaat.

   `1fr auto 1fr` en niet `auto 1fr auto`: de links moeten in het midden van het
   SCHERM staan en niet in het midden van wat er tussen woordmerk en knop
   overblijft. Die twee zijn niet even breed — 99px tegen 178px — dus met de
   tweede opzet stond de groep 40px links van het midden.

   De kop loopt van rand tot rand zodat zijn achtergrond dat straks ook doet
   (zie .js-kop hieronder); de binnenmarge zet de inhoud terug op de rail. */
.paginakop {
    grid-column: volle-start / volle-eind;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--ruimte-3) var(--ruimte-5);
    padding-block: var(--ruimte-3) var(--ruimte-5);
    padding-inline: var(--rail-marge);
}

/* Boven 47rem staan de drie hoofdpagina's los in de balk en voegt het paneel
   daaraan toe: dat is één tik minder dan een menu dat eerst open moet. Daaronder
   past de balk niet meer en neemt de hamburger het over. Zie .menupaneel en het
   blok bij .menuknop hieronder. */
.hoofdnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte-2) var(--ruimte-5);
}

.hoofdnav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--raakvlak);
    color: var(--tekst);
    text-decoration: none;
    font-weight: var(--gewicht-medium);
}

.hoofdnav a:hover { color: var(--link); text-decoration: underline; }

/* Op een telefoon vallen de drie links weg en blijft de knop over. Ze staan
   niet zomaar uit beeld: ze wonen in het paneel, in de groep 'De app', mét een
   regel uitleg per stuk. Op een breed scherm blijven ze staan: daar is de
   ruimte er gewoon en kost verstoppen een tik.

   Wat het oplevert is geen cosmetiek: de vier links kostten 60px van de 328 die
   de kop op 390px in beslag nam, en dat was 43% van het eerste scherm.

   47rem en niet 44: de grens is gemeten, niet gekozen. Woordmerk, drie links,
   'Meer' en 'Begin gratis' passen samen pas vanaf ongeveer 735px op één regel;
   daaronder brak de balk in tweeën en was hij op 705px met 164px juist het
   hóógst van allemaal. De hamburger hoort dus te lopen tot waar de hele balk
   past, en niet tot een rond getal. */
@media (max-width: 47rem) {
    /* De drie links vallen weg en de hamburger neemt het over. Er valt dan
       niets meer te centreren: woordmerk links, en 'Begin gratis' en 'Menu'
       samen rechts, met de lege middenkolom ertussen die ze daarheen duwt.

       Expliciete kolommen en geen `order`. Met order verspringt alleen de
       volgorde waarin de browser plaatst, niet de kolom waarin iets landt, en
       viel de hamburger onder het woordmerk op een tweede regel.

       Krapper dan op een breed scherm: met 24px ertussen paste de regel op een
       telefoon van 360px net niet — 347px aan onderdelen in 336px ruimte — en
       viel de balk alsnog in tweeën. Met 12px blijft er 13px over. */
    .paginakop { grid-template-columns: auto 1fr auto auto; gap: var(--ruimte-3); }
    .paginakop > .woordmerk { grid-area: 1 / 1; }
    .paginakop > .knop { grid-area: 1 / 3; justify-self: auto; }
    .hoofdnav { grid-area: 1 / 4; justify-content: flex-end; gap: 0; }
    .hoofdnav a { display: none; }
}

.woordmerk { display: inline-flex; justify-self: start; }
.paginakop > .knop { justify-self: end; }
/* 64px en niet 52: dun handgetekend letterwerk verliest inktdekking zodra het
   verkleind wordt. De maat helpt, maar wat er echt toe doet is dat er een echt
   1x-bestand wordt aangeleverd in plaats van een 2x die de browser terugschaalt
   zie de srcset in partials/header.php. */
.woordmerk img { height: 64px; width: auto; }

@media (max-width: 30rem) {
    .woordmerk img { height: 48px; }
}

/* ---- De kop op de homepage -------------------------------------------- */

/* Op de homepage ligt de kop ín de kaart van het eerste scherm; overal elders
 * staat hij gewoon op de pagina. Wat dat vraagt staat hier bij elkaar.
 *
 * De binnenmarge is die van de kaart, zodat het woordmerk bóven de slogan
 * uitkomt en niet ernaast. En de inkt is het merkwit, want hij ligt op een
 * foto — zodra je scrolt komt het paginavlak eronder en gaat de inkt terug naar
 * de gewone. Die omslag hangt aan [data-vast], hetzelfde haakje dat het vlak
 * zelf aanzet, dus de twee kunnen niet uit elkaar lopen.                       */
.thuis .paginakop {
    position: relative;
    z-index: 2;
    padding-block: var(--kraam-binnen);
}

.thuis .paginakop:not([data-vast]) {
    color: var(--groen-025);
}

.thuis .paginakop:not([data-vast]) .hoofdnav a,
.thuis .paginakop:not([data-vast]) .menuknop { color: inherit; }

.thuis .paginakop:not([data-vast]) .hoofdnav a:hover,
.thuis .paginakop:not([data-vast]) .menuknop:hover { color: var(--merk-lichtgroen); }

/* Op de foto is het lichtgroene logo het goede, ook overdag: de foto is in
   beide standen donker. */
.thuis .paginakop:not([data-vast]) .woordmerk img {
    content: url("/assets/img/logo-lichtgroen.svg");
}

/* De knop ligt op de foto en moet daar oplichten. Knopgroen zou in de band
   onder de kop verdwijnen — die band ís donkergroen. De hoofdkleur met de
   merkinkt erop haalt 9,5:1; zodra de kop zijn eigen vlak krijgt gaat hij
   terug naar knopgroen. */
.thuis .paginakop:not([data-vast]) > .knop {
    background: var(--merk-lichtgroen);
    color: var(--groen-900);
}

.thuis .paginakop:not([data-vast]) > .knop:hover {
    background: #e3edb4;
    color: var(--groen-900);
}

/* Boven de kaart hoort dezelfde rand als eromheen. */
.thuis .wand { padding-block-start: var(--kraam-marge); }

/* ---- Het menupaneel --------------------------------------------------- */

/* Twee vlakken die alleen dit paneel gebruikt.
 *
 * De tegel is de hoofdkleur op het kratvlak van het paneel: #d6e499 op #eef3d8
 * is overdag duidelijk te zien, en #2e3324 erin haalt 13:1. In het donker kan
 * de hoofdkleur niet de vulling zijn: daar is hij juist de inkt, dus draaien
 * tegel en icoon om. De rail is één stap dieper dan het paneel: net genoeg om
 * een eigen vlak te zijn, te weinig om een tweede kist te worden.
 */
:root {
    --menutegel:    var(--merk-lichtgroen);
    --op-menutegel: var(--groen-900);
    --menurail:     var(--groen-015);

    /* Het glas over de rest van de pagina. Niet --waas: die is 45% en bedoeld
       als scherm voor een venster dat je moet wegklikken. Dit paneel neemt de
       pagina niet over, het legt er iets overheen: de inhoud eronder mag
       zichtbaar blijven, alleen niet meer meelezen. */
    --menuwaas:     rgb(46 51 36 / 0.30);
}

@media (prefers-color-scheme: dark) {
    :root {
        --menutegel:    #333b27;
        --op-menutegel: var(--merk-lichtgroen);
        --menurail:     #1f2419;
        --menuwaas:     rgb(0 0 0 / 0.5);
    }
}

/* De knop hoort bij de drie links en niet bij 'Begin gratis': hij opent iets,
   hij belooft niets. Dus dezelfde letter als een navigatielink, met een punt
   erbij die zegt dat er nog iets onder zit. */
.menuknop {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-1);
    min-height: var(--raakvlak);
    padding: 0;
    background: none;
    border: none;
    color: var(--tekst);
    font-family: var(--lettertype);
    font-size: inherit;
    font-weight: var(--gewicht-medium);
    cursor: pointer;
}

.menuknop:hover { color: var(--link); }
.menuknop:hover .menuknop-woord { text-decoration: underline; }

.menuknop-punt { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.menuknop[aria-expanded="true"] .menuknop-punt { transform: rotate(180deg); }

/* De brede stand is de standaard: het woord 'Meer' met een punt eronder. */
.menuknop-woord--smal,
.menuknop-streepjes,
.menuknop-kruis { display: none; }

/* Ná de regel hierboven en niet erboven: een media query telt niet mee voor
   specificiteit, dus wint bij gelijk gewicht wie het laatst staat. Staat dit
   blok bij de rest van de mobiele kopbalk, dan zet de regel hierboven de
   streepjes weer uit en blijft de knop leeg.

   Drie streepjes, en een kruis zodra het paneel open staat: dezelfde wissel
   die de punt op een breed scherm maakt door om te draaien. Vierkant en 48px,
   want dit is het enige raakvlak naar de rest van de site zodra de links
   weg zijn. */
@media (max-width: 47rem) {
    .menuknop-woord--breed,
    .menuknop-punt { display: none; }

    .menuknop-woord--smal { display: inline; }
    .menuknop-streepjes { display: block; }

    .menuknop[aria-expanded="true"] .menuknop-streepjes { display: none; }
    .menuknop[aria-expanded="true"] .menuknop-kruis { display: block; }

    .menuknop {
        justify-content: center;
        min-width: var(--raakvlak);
    }
}

/* Een blad dat op de pagina ligt, en geen kist die in de kraamwand staat.
   tokens.css legt allebei de kanten daarvan vast met de reden erbij: overdag
   doet de schaduw het werk en tekent een rand er alleen een doos omheen, na
   donker is een schaduw op een donkere grond onzichtbaar en neemt de haarlijn
   het over. Het vlak zelf blijft het warme kratvlak: wit op warm papier is de
   kassaschermlogica die deze pagina niet volgt. */
/* Zonder JavaScript staat het paneel gewoon in de stroom, en dan is het een
   cel in het raster van de kop: over alle kolommen, want het is de hele
   breedte en niet een van de drie groepen. */
.menupaneel {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    margin-block: var(--ruimte-2) var(--ruimte-5);
    background: var(--kist-vlak);
    border: 1px solid var(--paneel-rand);
    border-radius: var(--kist-radius);
    box-shadow: var(--schaduw-paneel);
}

.menupaneel[hidden] { display: none; }

/* Met JavaScript hangt het paneel aan de kop en ligt het over de pagina. Zonder
   JavaScript staat het gewoon in de stroom, want dan is er niets dat het weer
   dichtdoet en zou het permanent over de inhoud liggen. Dat is de hele reden
   dat .js-menu bestaat.

   top:100% is de onderkant van de kop, inclusief zijn onderste opvulling; de
   marge zet de tuit-ruimte er nog onder. */
.js-menu .paginakop {
    position: relative;
    z-index: 20;
}

/* De kop loopt mee met de pagina en verdwijnt als je doorleest; het gedrag zelf
   staat in partials/meelopende-kop.php. Alleen met JavaScript, want zonder
   script is er niets dat hem terugbrengt.

   Bovenaan de pagina is hij doorzichtig: daar staat hij op de paginagrond,
   boven de kaart van het eerste scherm, en een balk met een eigen vlak zou
   daar een tweede horizontale streep zijn die niets scheidt. De achtergrond
   komt er pas zodra er echt iets onderdoor schuift — zie [data-vast]
   hieronder, dat het script al zet zodra je meer dan vier pixels scrolt.
   Vanaf dat moment is de achtergrond niet optioneel: zonder vlak schuift de
   tekst er dwars doorheen. */
.js-kop .paginakop {
    position: sticky;
    top: 0;
    z-index: 20;
    transition:
        transform        260ms cubic-bezier(0.2, 0.8, 0.3, 1),
        background-color 200ms ease,
        box-shadow       200ms ease;
}

/* Het vlak plus een haarlijn zodra er tekst onderdoor schuift. De lijn is een
   inset-schaduw en geen rand: een rand verandert de hoogte van de kop, en die
   hoogte staat in --kop-hoogte waar de ankers en de meelopende inhoudsopgave
   mee rekenen.

   Het vlak loopt van schermrand tot schermrand, want de kop doet dat zelf ook:
   hij staat op `volle-start / volle-eind` en zet zijn inhoud met een
   binnenmarge terug op de rail. */
.js-kop .paginakop[data-vast] {
    background: var(--achtergrond);
    box-shadow: inset 0 -1px 0 0 var(--rand);
}

/* translateY en geen negatieve top: een transform draait op de compositor en
   laat de pagina eronder met rust. Staat er een transform op, dan wordt de kop
   wél het houvast voor position:fixed eronder, en daar hangt het glas van het
   menupaneel aan. Vandaar dat een open paneel deze stand nooit krijgt. */
.js-kop .paginakop[data-kop="weg"] {
    transform: translateY(-100%);
}

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

/* Waar een anker landt. Zonder deze regel duikt de kop van een sectie onder de
   meelopende kop zodra je op een link in een inhoudsopgave klikt, en lees je
   het antwoord op de vraag die je net wegklikte. */
.js-kop {
    scroll-padding-top: calc(var(--kop-hoogte, 6rem) + var(--ruimte-4));
}

/* De twee dingen die zelf al meelopen: het tijdstip in de leesrail en de
   inhoudsopgave van een uitlegstuk. Die stonden op --ruimte-5 vanaf de
   bovenkant van het venster en zouden nu achter de kop blijven hangen. */
.js-kop .stap-tijd,
.js-kop .inhoud {
    top: calc(var(--kop-hoogte, 6rem) + var(--ruimte-4));
}

.js-kop .inhoud {
    max-height: calc(100dvh - var(--kop-hoogte, 6rem) - var(--ruimte-4) * 2);
}

.js-menu .menupaneel {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 1;
    margin-block: var(--ruimte-2) 0;
}

/* Kind van de kop met een negatieve laag: het glas ligt daarmee onder het
   woordmerk, de links en de knop: die staan gewoon in de stroom en tekenen er
   dus overheen, maar boven alles wat buiten de kop staat. Zonder die truc had
   elk element in de balk een eigen z-index nodig.

   De tint eronder is zwaarder dan de vervaging vraagt, want zonder
   backdrop-filter is de tint het enige dat er is. Waar het glas wél werkt mag
   hij grotendeels terug. -webkit- erbij: Safari heeft de eigenschap alleen
   onder die naam, en dat is precies het toestel waarop deze site gelezen
   wordt. */
.menuwaas {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--menuwaas);
    animation: menu-waas 200ms ease both;
}

.menuwaas[hidden] { display: none; }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .menuwaas {
        background: color-mix(in oklab, var(--menuwaas) 40%, transparent);
        -webkit-backdrop-filter: blur(12px) saturate(115%);
        backdrop-filter: blur(12px) saturate(115%);
    }
}

@keyframes menu-waas {
    from { opacity: 0; }
}

/* De tuit wijst naar de knop die het paneel opende; het script zet --tuit-x,
   want de knop schuift mee met de breedte van de balk. Een gedraaid vierkant
   met twee randen: zo loopt de haarlijn van het paneel er in het donker
   doorheen zonder streep dwars over de punt. */
.menupaneel::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--tuit-x, 75%);
    width: 12px;
    height: 12px;
    margin-inline-start: -6px;
    background: var(--kist-vlak);
    border-top: 1px solid var(--paneel-rand);
    border-inline-start: 1px solid var(--paneel-rand);
    border-start-start-radius: 3px;
    transform: rotate(45deg);
}

.menupaneel-breed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--ruimte-5) var(--ruimte-6);
    padding: var(--ruimte-5);
    align-content: start;
}

/* Loopt door tot de rand van het paneel en neemt daar zijn ronding over. Dat
   is wat hem een tweede soort inhoud maakt in plaats van een derde kolom van
   dezelfde. */
.menupaneel-rail {
    display: grid;
    align-content: start;
    gap: var(--ruimte-4);
    padding: var(--ruimte-5);
    background: var(--menurail);
    border-start-end-radius: var(--kist-radius);
    border-end-end-radius: var(--kist-radius);
}

.menugroep-kop {
    font-size: var(--tekst-xs);
    font-weight: var(--gewicht-vet);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
    margin-bottom: var(--ruimte-3);
}

.menugroep--compact .menugroep-kop { margin-bottom: var(--ruimte-2); }

.menugroep ul { display: grid; gap: var(--ruimte-1); }

/* De brede rij: tegel, naam, en een regel eronder. Die tweede regel is het
   halve punt van een paneel: 'Zonder internet' zegt niets tot er 'wat er op
   een veld zonder bereik wél werkt' onder staat. */
.menu-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--ruimte-3);
    padding: var(--ruimte-2) var(--ruimte-3);
    margin-inline-start: calc(var(--ruimte-3) * -1);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: var(--tekst);
}

.menu-item-tekst { display: grid; gap: 2px; }
.menu-item-naam { font-weight: var(--gewicht-medium); }

.menu-item-kort {
    font-size: var(--tekst-s);
    line-height: 1.4;
    color: var(--tekst-zacht);
    text-wrap: pretty;
}

/* Een klein krat: dezelfde ronding als de kisten op de homepage, één maat
   kleiner. Vast van maat, want een tegel die met zijn rij meegroeit is geen
   ankerpunt meer. */
.menu-tegel {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--kist-radius-s);
    background: var(--menutegel);
    color: var(--op-menutegel);
    transition: background-color 160ms ease;
}

.menu-tegel svg { width: 20px; height: 20px; }

/* De compacte rij in de rail: kaal icoon, één regel, geen tegel. Een tegel op
   een getint vlak tekent een vlak op een vlak. */
.menu-item--compact {
    align-items: center;
    gap: var(--ruimte-2);
    padding-block: var(--ruimte-1);
    min-height: 36px;
    font-size: var(--tekst-s);
}

.menu-icoon { display: grid; place-items: center; color: var(--tekst-zacht); }
.menu-icoon svg { width: 17px; height: 17px; }

.menu-item:hover { color: var(--link); background: var(--accent-zacht); }
.menu-item:hover .menu-item-naam { text-decoration: underline; }
.menu-item:hover .menu-item-kort { color: var(--tekst-zacht); }
.menu-item:hover .menu-icoon { color: var(--link); }

/* De rail is al getint, dus de tint van een gewone rij valt daar weg. */
.menupaneel-rail .menu-item:hover { background: var(--kist-vlak); }

/* Waar je staat, in dezelfde accentkleur als op de balk. Op een staande lijst
   staat die streep opzij en niet eronder: onder een item van twee regels leest
   een streep als een scheiding tussen twee items. */
.menu-item[aria-current="page"] {
    box-shadow: inset 3px 0 0 0 var(--link);
}

/* Alleen de naam wordt vet. Op de hele regel maakt het ook de toelichting vet,
   en dan schreeuwt de regel die het minst hoeft te zeggen het hardst. */
.menu-item[aria-current="page"] .menu-item-naam { font-weight: var(--gewicht-vet); }

/* De knop die de rail afsluit. Stil en niet gevuld: 'Begin gratis' staat twee
   centimeter hoger al in de balk, en dezelfde knop twee keer laten schreeuwen
   is het verkooppraatje dat deze site vermijdt. */
.menurail-knop { width: 100%; margin-top: var(--ruimte-2); }

/* De groepen laden uit zoals de kisten op de homepage, met dezelfde vertraging
   per stap. Een animatie en geen overgang: het paneel gaat van display:none
   naar zichtbaar, en een overgang start dan niet. */
.menugroep {
    animation: menu-uitladen 260ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
    animation-delay: var(--vertraging, 0ms);
}

@keyframes menu-uitladen {
    from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .menugroep, .menuwaas { animation: none; }
    .menuknop-punt, .menu-tegel { transition: none; }
}

/* Onder de 62rem past de rail niet meer naast twee brede kolommen zonder dat
   alle drie te smal worden. Hij gaat dan onder de rijen staan en houdt zijn
   eigen vlak: over de volle breedte, met de onderste twee hoeken van het
   paneel. */
@media (max-width: 62rem) {
    .menupaneel { grid-template-columns: minmax(0, 1fr); }

    /* Onder de brede rijen is de rail ineens net zo breed als het paneel. Één
       kolom in die strook is een dunne sliert met een halve meter lucht ernaast,
       en met negen uitlegstukken wordt het een torentje. Dus waaiert hij daar
       uit, met de knop erbij als laatste cel. */
    .menupaneel-rail {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: var(--ruimte-4) var(--ruimte-6);
        align-items: start;
        border-start-end-radius: 0;
        border-end-start-radius: var(--kist-radius);
    }

    .menurail-knop { align-self: start; margin-top: 0; }
}

@media (max-width: 44rem) {

    /* Onder elkaar wordt het paneel op een telefoon hoger dan het scherm, en
       dat groeit mee met elk uitlegstuk dat erbij komt. Dan duwt het openen de
       pagina meer dan een scherm naar beneden en moet je terugscrollen naar
       waar je was. Het paneel scrollt daarom zelf, en niet de pagina eronder.
       svh en niet vh: op een telefoon rekent vh met een adresbalk die er niet
       altijd is. */
    .menupaneel {
        max-height: 70vh;
        max-height: 70svh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Een container die scrollt, knipt af, ook naar boven, en daar steekt de
       tuit uit. Hem hier weglaten is dus geen keuze maar een gevolg; expliciet
       omdat een half afgeknipt driehoekje erger is dan geen. Hij is hier ook
       het minst nodig: het paneel staat vlak onder de knop en er is geen
       tweede plek waar het vandaan zou kunnen komen. */
    .menupaneel::before { display: none; }

    .menupaneel-breed { padding: var(--ruimte-4); gap: var(--ruimte-4); }
    .menupaneel-rail  { padding: var(--ruimte-4); }
}

/* ---- Het vinkje in een lijst ------------------------------------------ */

/* Vier lijsten zetten hetzelfde vinkje voor een regel, en overal hing het te
   hoog: het icoon is 18 pixels en gaat met zijn bovenkant tegen de bovenkant
   van de regel aan, terwijl de letters daar een halve regelafstand onder
   beginnen. Daarom krijgt het icoon de hoogte van één regel en centreert het
   zichzelf daarin: een viewBox schaalt naar de kleinste kant, dus de tekening
   blijft 18 pixels breed en zakt alleen naar het midden van de regel. Zo staat
   het bij elke regelhoogte goed en hoeft geen enkele lijst zijn eigen marge te
   verzinnen. */
.planlijst > li > svg,
.artikel-lijst > li > svg,
.nodig > svg,
.nodig-streep { height: 1lh; }

/* ---- De kraam: het eerste scherm -------------------------------------- */

/* Eén kaart die het scherm vult op een rand van 40px na, met de kop erin en de
 * foto eronder. Naar de referentie van 12 september 2026.
 *
 * DRIE DINGEN DIE SAMEN WERKEN, en die je alle drie moet aanpassen als je er
 * één verandert:
 *
 * 1. **De kop staat in de kaart en niet erboven.** Hij wordt in
 *    partials/pagina-start.php vóór <main> uitgeschreven, want hij is de kop
 *    van elke pagina en niet van deze sectie. De kaart schuift er met een
 *    negatieve bovenmarge onder en zet die hoogte terug als binnenmarge, zodat
 *    de tekst niet achter de kop begint. Dat is één regel in plaats van een
 *    tweede sjabloon voor één pagina.
 *
 * 2. **--kop-hoogte komt uit partials/meelopende-kop.php** en wordt daar bij
 *    elke maatverandering opnieuw gemeten. De terugvalwaarde hieronder is wat
 *    je ziet als er geen JavaScript draait: 100px, de hoogte van de kop met een
 *    woordmerk van 64px erin.
 *
 * 3. **De hoogte is het scherm min wat er nog bóven de kaart staat.** Dat is
 *    nu alleen de rand zelf, maar het was de aanbodbalk en het kan het weer
 *    worden, dus het is geen vast getal: hetzelfde script meet waar de kaart
 *    begint en zet dat in --kraam-boven. Zonder script valt hij terug op de
 *    volle schermhoogte min de rand.
 *
 * dvh en niet vh: op een telefoon rekent vh met de adresbalk ingeklapt, en dan
 * is de kaart bij het laden een balkhoogte te hoog.                            */
.kraam {
    grid-column: volle-start / volle-eind;
    position: relative;
    display: grid;
    border-radius: var(--kraam-radius);
    overflow: hidden;
    isolation: isolate;

    margin-inline: var(--kraam-marge);
    margin-top: calc(-1 * var(--kop-hoogte, 160px));
    margin-bottom: var(--ruimte-8);
    padding-top: var(--kop-hoogte, 160px);

    min-height: calc(100dvh - var(--kraam-boven, var(--kraam-marge)) - var(--kraam-marge));
}

/* Het beeld vult de hele kaart, de kop erboven inbegrepen: absoluut geplaatst
   en niet als cel in het raster, want de binnenmarge die de tekst onder de kop
   houdt zou het beeld daar óók weghouden — en dan ligt de kop op kale grond in
   plaats van op de foto.

   Het woord staat wél gewoon in het raster en erft die binnenmarge dus. */
.kraam-beeld {
    position: absolute;
    inset: 0;
    display: flex;
}

.kraam-woord { grid-area: 1 / 1; }
/* Het kader vult de kaart. De ronding erbij, want anders snijdt de kaart de
   streepjesrand in de hoeken af en blijft er een halve hoek staan. */
.kraam-beeld > * { flex: 1; border-radius: var(--kraam-radius); }

/* Het scherm onder de tekst. Een verloop en geen vlak: een vlak zou de kaart
   in tweeën delen en dan is het weer een kolom met een plaatje ernaast.
 *
 * Het loopt tot 62% en niet over de hele breedte, want daar houdt de tekst op.
 * De inkt is #2e3324 op 0,80 aan de linkerkant; over het lichtgroen van het
 * kader komt dat uit op ongeveer #3d432d, en het merkwit #f8fce1 haalt daar
 * 10,4:1 op. Dat is ruim, en dat is met opzet: een echte foto is ongelijkmatig
 * en de meting moet ook kloppen op de lichtste plek die er straks onder komt. */
.kraam-beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgb(46 51 36 / 0.80) 0%,
        rgb(46 51 36 / 0.62) 32%,
        rgb(46 51 36 / 0.14) 58%,
        rgb(46 51 36 / 0) 76%
    );
}

/* De band onder de kop, als eigen laag.
 *
 * Zonder deze band hangt de leesbaarheid van het menu af van wat er die dag
 * toevallig gefotografeerd is: rechts van het scherm hierboven ligt de kop op
 * kale foto. De maat is dus niet gekozen maar gerekend, en op de slechtst
 * denkbare ondergrond — wit. Het merkwit op 0,74 inkt over wit haalt daar
 * 5,3:1, genoeg voor een menulink van 17px; op de pale groene grond die er nu
 * staat is het ruim 8:1. Bij 0,52 was het 3,7:1 en dus te weinig.
 *
 * In pixels en niet in procenten, want wat afgedekt moet worden is de kop en
 * die heeft een hoogte in pixels — dezelfde --kop-hoogte waar de kaart zelf
 * ook mee rekent. Met procenten zakte de band mee met de kaarthoogte en lag de
 * middelste menugroep er net onder.
 *
 * Een eigen laag en geen tweede stop in het scherm hierboven: op een telefoon
 * wordt dat scherm vervangen en zou de band met het bad water weglopen.        */
.kraam-beeld::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(46 51 36 / 0.74) 0,
        rgb(46 51 36 / 0.70) calc(var(--kop-hoogte, 160px) * 0.7),
        rgb(46 51 36 / 0) calc(var(--kop-hoogte, 160px) + 6rem)
    );
}

/* De tekst. Niet gecentreerd in de kaart maar iets boven het midden, zoals in
   de referentie: de knop krijgt daarmee de rust onder zich die hem tot de
   laatste regel van het blok maakt. */
.kraam-woord {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-4);
    max-width: calc(40rem + var(--kraam-binnen));
    padding: var(--kraam-binnen);
    color: var(--groen-025);
}

.kraam-woord .kop-groot { color: var(--groen-025); }

/* De toelichting onder de claim, op het scherm. Niet --tekst-zacht: die is
   gekozen voor donkere inkt op een lichte grond en is hier onleesbaar. Het
   merkwit op 82% haalt op dezelfde ondergrond nog 7,6:1. */
.kraam-woord .onderkop--tweede,
.kraam-woord .knop-bijschrift {
    color: color-mix(in oklab, var(--groen-025) 82%, transparent);
    opacity: 1;
}

.kraam-woord .knop-regel { margin-top: var(--ruimte-3); }

/* ---- De kraamfoto ----------------------------------------------------- */

/* De foto vult de kaart en snijdt bij: op een breed scherm boven en onder,
   op een telefoon aan de zijkanten. Het anker ligt op de tablet, zodat die
   op elke breedte in beeld blijft. */
.kraamfoto { display: flex; overflow: hidden; }

.kraamfoto img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% 70%;
}

/* ---- De kisten -------------------------------------------------------- */

/* Wat er van de vorige wereld overblijft: een gevuld vlak, nu zonder rand.
   Gebruikt door de twee pakketten en de slotkist op deze pagina, en door
   /prijzen. De vulling staat in --kist-vlak en is gemeten: 1,18:1 op de grond,
   genoeg om zichzelf te dragen. */
.kist {
    background: var(--kist-vlak);
    border: 1px solid var(--kist-rand);
    border-radius: var(--kist-radius);
    padding: var(--ruimte-5);
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-3);
    min-width: 0;
}

.kist--groen {
    background: var(--kist-lichtgroen);
    border-color: transparent;
    color: var(--kist-op-lichtgroen);
}

/* De slogan is de h1 en erft dus Fredoka en de kopregelhoogte; alleen de maat
   en de spatiëring zijn hier groter dan een kop verderop op de pagina. */
.kop-groot {
    /* Eigen trap, niet --kop-xl. Die loopt tot 5rem omdat een sectiekop over de
       volle breedte staat. De slogan staat in een kolom die sinds 12 september
       2026 tot 608px loopt in plaats van ~450px, dus de trap is meegegroeid:
       68px, waarbij "Minder gedoe." ongeveer 484px meet en de twee regels twee
       regels blijven. Bij het oude plafond van 60px bleef er nu lucht rechts
       staan die de kop kleiner liet lijken dan de kolom toestaat. */
    font-size: clamp(1.9rem, 0.83rem + 4.27vw, 4.25rem);
    letter-spacing: -0.035em;
}
.kop-groot span { display: block; }

.onderkop {
    font-size: var(--kop-m);
    max-width: 34ch;
    color: inherit;
}

/* De toelichting onder de claim. Kleiner én breder: op 34ch valt hij in vier
   korte regels uiteen naast een kolom die twee keer zo breed is, en dat leest
   als een kolomfout in plaats van als een maat. */
.onderkop--tweede {
    font-size: var(--tekst-m);
    max-width: 44ch;
    color: var(--tekst-zacht);
}

/* De grenzen van de gratis versie staan er met opzet net zo groot bij als de
   belofte erboven. Kleiner zetten zou de kleine lettertjes maken waar dit
   bedrijf zich juist tegen afzet. */
.grenzen { color: var(--tekst-zacht); }

.kist--groen .onderkop--tweede { color: color-mix(in oklab, var(--kist-op-lichtgroen) 79%, transparent); }

/* ---- Het prijskaartje ------------------------------------------------- */

/* De enige plek waar de warme kleur een vlak vult. De prijs staat gewoon op de
   site, en het hoort er ook uit te zien als een kaartje dat aan een kraam hangt
   en niet als een tariefblok.

   De twee inktkleuren hier zijn de enige die op dit vlak gelezen worden: de
   gewone inkt is er te koel voor. #3a1f0e haalt 6,62:1 en #5a3418 4,72:1. */
.kaartje {
    background: var(--merk-oranje);
    color: #3a1f0e;
    border: none;
    border-radius: var(--kist-radius);
    padding: var(--ruimte-5);
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-5);
    text-align: left;
}

/* Poppins, niet Fredoka: op deze site zijn álle cijfers Poppins, en het bedrag
   waar de hele pagina om draait is niet de plek om die regel te breken. Poppins
   draagt minder ver dan Fredoka op dezelfde graad, dus de maat gaat omhoog en
   het gewicht naar 600. */
.kaartje .bedrag {
    font-size: clamp(2.5rem, 1.7rem + 2.8vw, 3.75rem);
    font-family: var(--lettertype);
    font-weight: var(--gewicht-vet);
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.kaartje .per { font-weight: var(--gewicht-medium); }

.kaartje .incl {
    font-size: var(--tekst-s);
    color: #5a3418;
}

/* Alleen op /prijzen, waar het kaartje twee rijen spant en dus een hoogte
   krijgt die groter is dan zijn inhoud: de kleine lettertjes gaan naar de
   onderrand, zodat de overgebleven ruimte tussen de lijst en de voetnoot valt
   in plaats van als gat onder de laatste zin.

   Bewust op --prijs en niet op .kaartje: op de homepage staat hetzelfde kaartje
   naast de gratis versie en bepaalt daar zelf de rijhoogte. Nu doet deze regel
   daar niets, maar zodra die twee van hoogte verschillen zou hij de voetnoot
   daar ook verplaatsen — en die pagina is af. */
.kaartje--prijs .incl { margin-top: auto; }


/* ---- Knop ------------------------------------------------------------- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte-2);
    min-height: var(--raakvlak);
    padding: var(--ruimte-3) var(--ruimte-5);
    background: var(--accent);
    color: var(--op-accent);
    border: none;
    border-radius: var(--radius-l);
    font-family: var(--lettertype);
    font-size: var(--tekst-m);
    font-weight: var(--gewicht-vet);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Op de groene kist mag de knop niet de kleur van zijn ondergrond aannemen.
   In het donker maakt tokens.css van --accent juist de hoofdkleur, en dat is
   precies de vulling van deze kist: de knop werd daar onzichtbaar. Vandaar dat
   hij op dit vlak in beide standen het donkere groen houdt. */
.kist--groen .knop { background: var(--groen-700); color: var(--kleur-wit); }
.kist--groen .knop:hover { background: var(--accent-donker); color: var(--kleur-wit); }

.knop:hover { background: var(--accent-donker); color: var(--op-accent); transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--groot { font-size: var(--kop-m); padding: var(--ruimte-4) var(--ruimte-6); }

/* De knop op de foto. Knopgroen zou daar in het scherm verdwijnen dat de tekst
   leesbaar houdt: dat scherm ís donkergroen. De hoofdkleur met de merkinkt
   erop haalt 9,5:1 en is het enige vlak op de kaart dat oplicht — precies wat
   een knop op een foto moet doen. Wit mag hier niet: geen van de vier
   merkkleuren draagt witte tekst. */
.knop--opfoto { background: var(--merk-lichtgroen); color: var(--groen-900); }

.knop--opfoto:hover,
.knop--opfoto:active {
    background: #e3edb4;
    color: var(--groen-900);
}

.knop svg { flex: none; }

.knop-regel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte-3) var(--ruimte-4);
}

.knop-bijschrift {
    font-size: var(--tekst-s);
    color: inherit;
    opacity: 0.78;
}

/* ---- De mensen -------------------------------------------------------- */

.mensen-kop {
    font-size: var(--kop-l);
    margin-bottom: var(--ruimte-2);
}

.mensen-tekst {
    color: var(--tekst-zacht);
    margin-bottom: var(--ruimte-4);
    max-width: 46ch;
}

/* De slotkist loopt over de volle breedte, dus hij krijgt drie kolommen: de
   foto, het verhaal, en de contactgegevens. Anders staat een derde van de
   breedte leeg. */
.mensen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ruimte-5) var(--ruimte-7);
    align-items: center;
}

.contactregel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ruimte-2);
}

/* Wij tweeën, klein. De wikkel staat op display:block en niet op contents: bij
   contents wordt óók de <source> een cel in dit grid, en dan schuift de hele
   rij een kolom op. Als blok is de <picture> zelf de cel en krimpt hij naar de
   maat van de foto erin. */
.portret { display: block; }

.portret img {
    width: 132px;
    height: auto;
    border-radius: var(--kist-radius-s);
    border: 1px solid var(--kist-rand);
}

.telefoon {
    display: inline-flex;
    align-items: center;
    min-height: var(--raakvlak);
    gap: var(--ruimte-2);
    font-family: var(--lettertype);
    font-size: var(--kop-m);
    font-weight: var(--gewicht-vet);
    font-variant-numeric: tabular-nums;
    color: var(--tekst);
    text-decoration: none;
}
.telefoon:hover { color: var(--link); }


/* ---- Voet ------------------------------------------------------------- */

/* Twee kisten naast elkaar op de grond, met de naad ertussen die de uitstalling
   op de homepage ook gebruikt. Een grid en geen flex-wrap: zie het commentaar in
   partials/footer.php voor waarom.

   De verhouding is 4 : 8 en niet gelijk: links staat één lijst, rechts vier
   dingen. Twee gelijke helften zouden de linkerkist half leeg laten. */
/* De band met de golvende rand die hier tot 12 september 2026 boven hing, is
   weg. Hij was de tegenhanger van de luifel die het eerste scherm droeg, en
   toen die vervangen werd door de kaart stond hij er alleen — een rand zonder
   waar hij bij hoorde. De eigenaar heeft hem geschrapt.

   De ruimte die hij droeg staat nu op de voet zelf, en de twee kisten krijgen
   hun bovenhoeken terug: zonder band erboven is er niets meer om strak onder
   te hangen. */
.paginavoet {
    margin-top: var(--ruimte-8);
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--naad);
    font-size: var(--tekst-s);
}

/* De donkere kist. --zijbalk en de twee inkten erbij komen uit tokens.css, waar
   ze zijn vastgelegd mét hun contrast: wit op de balk, en #d1d4ce voor zachte
   tekst op 5,46. Ze draaien in de donkere stand vanzelf mee, dus deze voet
   heeft geen eigen dark-regels nodig. */
.voetkist {
    background: var(--zijbalk);
    color: var(--op-zijbalk-zacht);
    border-radius: var(--kist-radius);
    padding: var(--ruimte-6);
}

/* Rechts: identiteit links, twee linkkolommen rechts, de juridische regel over
   de volle breedte eronder. */
.voetkist--merk {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: var(--ruimte-6) var(--ruimte-5);
    align-items: start;
}

.voetmerk { display: grid; gap: var(--ruimte-4); justify-items: start; }
/* Het lichtgroene logo, en niet de kraam: die heeft de naam in donkergroene
   inkt ingebakken en die verdwijnt op dit vlak. Vast en niet via <picture>
   aan de systeemvoorkeur gehangen: het vlak eronder is in beide standen
   donker, dus de keuze hangt niet van de stand af. */
.voetmerk-teken { height: 56px; width: auto; }
.voetwie { max-width: 34ch; }

.voetkop {
    font-weight: var(--gewicht-vet);
    color: var(--op-zijbalk);
    font-size: var(--tekst-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: var(--ruimte-2);
}

.voetuitleg-lead { max-width: 32ch; margin-bottom: var(--ruimte-3); }

.voetlijst { display: grid; gap: 0; }

.voetlink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-2);
    min-height: var(--raakvlak);
    color: var(--op-zijbalk);
    text-decoration: none;
}

/* Het merkgroen is op dit vlak de luidste kleur die er is, en dat is precies
   wat een aanwijzing hoort te zijn. */
.voetlink:hover { color: var(--zijbalk-accent); text-decoration: underline; }

/* De regels onder elkaar hebben elk 48px raakvlak nodig, maar in de lopende
   contactregel staan ze naast elkaar. */
.voetcontact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--ruimte-5);
}

/* Icoon en woord samen: een icoon alleen is een raadspelletje voor wie de
   merken niet herkent, en het woord kost hier niets aan ruimte. */
.voetsociaal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--ruimte-5);
}

.voetsociaal svg { flex: none; }
.voetsociaal-naam { color: var(--op-zijbalk-zacht); }

/* Over de volle breedte van de kist, achter een lijn. Dit is geen navigatie
   waar je heen wilt maar waar je terechtkomt als je iets zoekt. */
.voetjuridisch {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--ruimte-5);
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--zijbalk-rand);
}

/* Onder de 62rem passen drie kolommen in de rechterkist niet meer naast elkaar,
   en onder de 44rem staan de twee kisten onder elkaar. */
/* Onder de 62rem passen drie kolommen in de rechterkist niet meer naast elkaar.
   De twee kisten blijven wél naast elkaar staan: dan telt de hoogste en niet de
   som. Onder elkaar zetten leek korter maar maakte de voet juist langer.

   De verdeling gaat daar van 4:8 naar 3:9. De uitlegkist heeft nog maar vier
   regels en heeft die breedte niet nodig; de merkkist hield op 820px maar 521px
   over en brak toen elke linkkolom af. */
@media (max-width: 62rem) {
    .paginavoet { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
    .voetkist--merk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .voetmerk { grid-column: 1 / -1; }
}

/* Op een telefoon staan de kisten onder elkaar, maar de twee linkkolommen
   blijven naast elkaar. In één kolom wordt de voet daar bijna twee schermen
   hoog: elke link heeft 48px raakvlak en het zijn er dertien. Naast elkaar past
   het, want 'De site' en 'De app' zijn korte labels. */
@media (max-width: 44rem) {
    .paginavoet { grid-template-columns: minmax(0, 1fr); }
    .voetkist { padding: var(--ruimte-5); }

    .voetkist--merk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .voetmerk { grid-column: 1 / -1; }

    .voetcontact { gap: 0; display: grid; }
}

/* ---- De ene beweging -------------------------------------------------- */

/* Het ene geregisseerde moment van de pagina: de kaart komt bij het laden één
   keer op zijn plek, en het tekstblok erin schuift er net achteraan. Daarna
   beweegt er op deze pagina niets meer uit zichzelf.

   Niets wordt uitgefade op de kaart zelf — die staat meteen op vol zicht en
   legt alleen de laatste tien pixels af. Het tekstblok krijgt wél doorzicht,
   want het ligt op een beeld en heeft geen rand die het onderweg afsnijdt.

   Standaard zichtbaar, dus zonder JS of met reduced motion staat alles er
   gewoon: de begintoestanden hangen aan .js en de eindtoestand is de
   normale. */
@media (prefers-reduced-motion: no-preference) {
    .js .kraam { transform: translateY(10px); }

    .js .kraam.uitgeladen {
        transform: none;
        transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .js .kraam-woord { transform: translateY(18px); opacity: 0; }

    .js .kraam-woord.uitgeladen {
        transform: none;
        opacity: 1;
        transition:
            transform 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--vertraging, 0ms),
            opacity   620ms ease                          var(--vertraging, 0ms);
    }
}

/* ---- Smaller ---------------------------------------------------------- */

/* Vanaf hier vervalt de expliciete plaatsing en stroomt alles weer vanzelf. */
@media (max-width: 62rem) {
    .mensen {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
    .contactregel { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-5); }

    /* De kaart wordt smaller dan hij hoog is en 16:8 zou de tekst eruit duwen.
       Vanaf hier bepaalt de tekst de hoogte en houdt de verhouding alleen nog
       een ondergrens vast. Het scherm onder de tekst loopt dan van boven naar
       beneden in plaats van van links naar rechts, want de tekst staat niet
       meer in een linkerhelft maar over de hele breedte. */
    /* De rand wordt smaller en de binnenmarge ook: 40px rondom kost op een
       telefoon een tiende van het scherm, en de kop staat er ook nog in. */
    :root { --kraam-marge: 20px; --kraam-binnen: var(--ruimte-5); }

    .kraam { margin-bottom: var(--ruimte-7); }

    /* De tekst zakt naar de onderkant van de kaart en gaat over de volle
       breedte. De kaart is hier het hele scherm hoog, dus er blijft vanzelf
       beeld boven de tekst over; een marge om dat af te dwingen is niet meer
       nodig. */
    .kraam-woord {
        justify-self: stretch;
        align-self: end;
        max-width: none;
        padding: var(--kraam-binnen);
    }

    /* Van boven naar beneden in plaats van van links naar rechts: de tekst
       staat hier niet in een linkerhelft maar over de hele breedte. De band
       bovenaan blijft, want de kop ligt er nog steeds op; daaronder is het
       scherm licht genoeg om de foto te laten zien, en vanaf de helft loopt
       het op naar de tekst toe. Op 50% staat het op 0,57 en haalt het merkwit
       er 5,3:1; lager, waar de lopende tekst staat, loopt dat naar 8:1. */
    .kraam-beeld::after {
        background: linear-gradient(
            to bottom,
            rgb(46 51 36 / 0.22) 0%,
            rgb(46 51 36 / 0.22) 30%,
            rgb(46 51 36 / 0.85) 66%,
            rgb(46 51 36 / 0.92) 100%
        );
    }
}

@media (max-width: 44rem) {
    /* Op een telefoon kost de binnenmarge van de kaart te veel: 20 + 24 laat op
       een scherm van 390px nog 302px leesbreedte over. Niet --rail-marge zelf
       bijstellen — die volgt uit de twee maten van de kaart, en los bijstellen
       laat de kaart en de rest van de pagina weer uit elkaar lopen. */
    :root { --kraam-binnen: var(--ruimte-4); }
    .wand { padding-block: var(--ruimte-3); }
    .kist { padding: var(--ruimte-4); }
    .mensen { grid-template-columns: 1fr; }
    .contactregel { align-items: flex-start; }
    .portret img { width: 100%; max-width: 180px; }
}

/* ======================================================================
   DE SECTIES ONDER DE UITSTALLING

   De uitstalling is dicht: kisten tegen elkaar aan, alles tegelijk. Wat
   eronder komt is het tegenovergestelde: open, op de paginagrond, met lucht
   eromheen. Die afwisseling is het ritme van de pagina: een dichte passage
   verdient een rustige. Kisten komen alleen terug waar echt een ding wordt
   getoond, niet als omhulsel om elke alinea.
   ====================================================================== */

:root {
    --kop-sectie: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
}

.sectie {
    padding-block: var(--ruimte-8);
    border-top: 1px solid var(--rand);
}

/* De eerste sectie hangt onder de kaart van het eerste scherm en heeft die
   scheidingslijn niet nodig: de kaart sluit zichzelf al af. */
.kraam + .sectie { border-top: none; }

/* De slotkist staat al in een kader, dus daar zou de sectielijn een tweede
   rand zijn op dezelfde plek. */
.sectie:last-of-type { border-top: none; padding-bottom: var(--ruimte-5); }

/* Twee kolommen: de kop en de aanloop links, de inhoud rechts. Zo loopt een
   leesrail niet over de volle breedte uit: dan blijft er rechts een derde
   leeg en lopen de scheidingslijnen door tot voorbij de tekst. */
.sectie--tweekolom {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-5) var(--ruimte-7);
    align-items: start;
}

.sectie--tweekolom .sectielead { margin-top: var(--ruimte-4); }
.sectie--tweekolom .marktdag,
.sectie--tweekolom .nietvoorjou { margin-top: 0; }

@media (max-width: 62rem) {
    .sectie--tweekolom { grid-template-columns: 1fr; gap: var(--ruimte-5); }
}

.sectiekop {
    font-size: var(--kop-sectie);
    letter-spacing: -0.025em;
    max-width: 22ch;
}

.sectielead {
    margin-top: var(--ruimte-4);
    font-size: var(--kop-m);
    color: var(--tekst-zacht);
    max-width: 54ch;
}

/* De link naar de pagina die dieper gaat. Staat onderaan de sectie waar hij
   bij hoort, nooit in de lopende tekst. */
.verder {
    display: inline-flex;
    align-items: center;
    min-height: var(--raakvlak);
    gap: var(--ruimte-2);
    font-weight: var(--gewicht-vet);
    text-decoration: none;
    color: var(--link);
}

/* Geen vaste onderstreping: bij hover tekent de lijn zich van links naar
   rechts onder de tekst, niet onder de pijl. Ook voor "Meer weergeven". */
.verder > span,
.vergelijking-meer > span {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 0.08em;
    padding-bottom: 0.1em;
    transition: background-size 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.verder:hover > span,
.verder:focus-visible > span,
.vergelijking-meer:hover > span { background-size: 100% 0.08em; }
.verder:hover { color: var(--link-donker); }
.verder svg { flex: none; transition: transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.verder:hover svg { transform: translateX(3px); }

/* In een kist staat de verder-link onderaan en mag hij de kist niet oprekken. */
.kist .verder { margin-top: auto; min-height: 0; padding-block: var(--ruimte-2); }

/* ---- De vier pijlers -------------------------------------------------- */

/* Kop, aanloop en knop links; de vier pijlers rechts in een blok van twee bij
 * twee. Naar de referentie van de eigenaar, 12 september 2026.
 *
 * Dit gaat in tegen "vier vlakken van gelijke anatomie naast elkaar is een
 * functiegrid" uit DESIGN.md — zie het blok bij deze sectie in index.php voor
 * het besluit en voor wat het hier anders maakt dan de muur waar die regel uit
 * voortkwam.
 *
 * De vier staan tegen elkaar aan met de naad ertussen en niet met een marge:
 * dat is de bestaande afspraak voor vlakken die één ding vormen. Met lucht
 * ertussen worden het vier losse kisten, en dat is precies de vorm die de regel
 * hierboven verbiedt.                                                          */

/* Twee vlakken en hun inkt, en de tekens erop.
 *
 * De uitspringende pijler wisselt per stand van kleur en dat is geen smaak maar
 * een meting: in het donker is --zijbalk #272d1e en dat is exact de vulling van
 * de drie andere kaarten, dus daar zou "uitspringen" onzichtbaar zijn. Overdag
 * is het donkergroen met wit erop (8,2:1), 's avonds de hoofdkleur met de
 * merkinkt (9,5:1) — precies de stand waarin tokens.css de hoofdkleur het
 * luidst laat zijn.
 *
 * Het teken is in beide gevallen de omkering van zijn eigen kaart. Zo is het
 * rondje altijd het donkerste of het lichtste ding op dat vlak, en nooit de
 * 1,10:1 die de hoofdkleur op de gewone kistvulling haalt.                     */
:root {
    --pijler-vlak:            var(--kist-vlak);
    --pijler-teken:           var(--groen-700);
    --op-pijler-teken:        var(--merk-lichtgroen);

    --pijler-uit:             var(--zijbalk);
    --op-pijler-uit:          var(--op-zijbalk);
    --op-pijler-uit-zacht:    var(--op-zijbalk-zacht);
    --pijler-uit-teken:       var(--merk-lichtgroen);
    --op-pijler-uit-teken:    var(--groen-900);
}

@media (prefers-color-scheme: dark) {
    :root {
        --pijler-teken:        var(--merk-lichtgroen);
        --op-pijler-teken:     var(--groen-900);

        --pijler-uit:          var(--merk-lichtgroen);
        --op-pijler-uit:       var(--groen-900);
        --op-pijler-uit-zacht: color-mix(in oklab, var(--groen-900) 78%, transparent);
        --pijler-uit-teken:    var(--groen-700);
        --op-pijler-uit-teken: var(--merk-lichtgroen);
    }
}

.sectie--pijlers {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: start;
}

.sectie--pijlers .sectiehoofd { display: grid; align-content: start; }
.sectie--pijlers .sectielead { margin-top: var(--ruimte-4); }

/* De kop loopt mee zolang de pijlers langs schuiven. Zonder dit staat er onder
   de knop een gat van een paar honderd pixels dat niets doet; met dit blijft de
   vraag "waarom werkt het op een markt" in beeld terwijl je het antwoord leest.
   Alleen boven 62rem — daaronder staan kop en inhoud onder elkaar en zou een
   meelopende kop de inhoud voor zich uit duwen.

   De afstand tot de bovenkant is de hoogte van de meelopende paginakop plus
   lucht: anders schuift de sectiekop eronder. Diezelfde maat gebruiken de
   inhoudsopgave van een uitlegstuk en het tijdstip in de leesrail al. */
@media (min-width: 62.01rem) {
    .sectie--pijlers .sectiehoofd,
    .sectie--vragen .sectiehoofd {
        position: sticky;
        top: calc(var(--kop-hoogte, 160px) + var(--ruimte-5));
    }
}

.pijlers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--naad);
}

.pijler {
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-3);
    padding: var(--ruimte-5);
    border-radius: var(--kist-radius);
    background: var(--pijler-vlak);
    color: var(--tekst);
}

.pijler-teken {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--pijler-teken);
    color: var(--op-pijler-teken);
    margin-bottom: var(--ruimte-3);
}

.pijler-teken svg { width: 1.375rem; height: 1.375rem; }

.pijler h3 { font-size: var(--kop-m); }
.pijler p { color: var(--tekst-zacht); }
.pijler .voorbehoud { font-size: var(--tekst-s); }

/* De link hangt onderaan de kaart en niet aan de tekst: in een rij van twee
   verschilt de tekstlengte, en met de link direct onder de alinea stonden de
   twee pijlen op verschillende hoogtes in dezelfde band. */
.pijler .verder { margin-top: auto; padding-top: var(--ruimte-2); }

/* De uitspringende. Precies één, en dat is offline-first: het enige punt waar
   volgens PRODUCT.md geen Nederlandse aanbieder op verkoopt. */
.pijler--uit {
    background: var(--pijler-uit);
    color: var(--op-pijler-uit);
}

.pijler--uit .pijler-teken {
    background: var(--pijler-uit-teken);
    color: var(--op-pijler-uit-teken);
}

.pijler--uit p { color: var(--op-pijler-uit-zacht); }

/* De link op dit vlak neemt de inkt van de kaart over en laat de onderstreping
   het werk doen. Dezelfde val als bij .kist--groen: --link is baksteenoranje en
   haalt op dit donkergroen te weinig, en 's avonds is het vlak juist de
   hoofdkleur en zou --accent erin verdwijnen. */
.pijler--uit .verder,
.pijler--uit .verder:hover { color: inherit; }

/* Onder 62rem staan kop en pijlers onder elkaar; de vier blijven twee bij twee,
   want over de volle breedte is daar nog ruimte genoeg voor. Pas onder 44rem
   worden het er vier onder elkaar: twee kolommen van 170px is geen kaart meer
   maar een kolomfout. */
@media (max-width: 62rem) {
    .sectie--pijlers { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 44rem) {
    .pijlers { grid-template-columns: minmax(0, 1fr); }
}

/* ---- De marktdag ------------------------------------------------------ */

/* Kop en aanloop over de volle breedte, de rail eronder.
 *
 * Dit was tot 12 september 2026 een tweekolomssectie: kop links, rail rechts.
 * Dat is dezelfde opzet als de pijlers erboven, en die twee stonden direct na
 * elkaar — precies wat DESIGN.md verbiedt met "Don't twee opeenvolgende secties
 * dezelfde opzet geven". De pijlers houden hun kop links; deze gaat breed, en
 * daarmee wisselt de pagina weer af.
 *
 * De aanloop houdt de maat van een tweekolomssectie en krijgt niet die van
 * .sectie--breed. Dat is geen vergeten regel: de rail eronder is een dichte,
 * fijn geregelde lijst, en een aanloop op 28px zou daar harder boven roepen dan
 * de kop zelf. .sectie--breed is voor de plek waar de pagina niets verkoopt. */
.sectie--marktdag .sectiekop { max-width: 26ch; }
.sectie--marktdag .sectielead { margin-top: var(--ruimte-4); max-width: 56ch; }
.sectie--marktdag .sectielijf { margin-top: var(--kop-ruimte); }

/* De rail loopt niet over de volle breedte mee. Zijn tekst houdt op bij 58ch,
   en zonder deze grens liep elke haarlijn daarna nog 700 pixels door over kale
   grond — een lijn die niets meer onderstreept. Dit houdt de lijnen kort achter
   de tekst, en het scheelt de rail meteen van de lijst in de sectie eronder,
   die wél de volle breedte pakt. */
.sectie--marktdag .marktdag { max-width: 56rem; }

/* Een rail van momenten. De tijden zijn geen versiering maar de informatie
   zelf: het gaat erom wanneer op de dag dit gebeurt. Verticaal, want dat leest
   op een telefoon precies hetzelfde als op een scherm.

   7,5rem is de maat van de labelkolom, maar het is een ondergrens en geen
   plafond: een labelwoord dat langer is ("Omzetbelastingnummer") liep anders
   dwars door de tekst ernaast heen. Die kolom hoort van de rail te zijn en niet
   van de rij, anders staat elke rij op zijn eigen breedte en begint de tekst
   rechts op drie plekken anders. Daarom staan de kolommen hier en erven de
   rijen ze met subgrid. Waar subgrid niet kan, houdt elke rij zijn eigen kolom:
   uitgelijnd is dat niet, maar leesbaar wel. */
.marktdag {
    margin-top: var(--ruimte-6);
    display: grid;
    grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
    column-gap: var(--ruimte-5);
    row-gap: 0;
}

.moment {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
    grid-template-columns: subgrid;
    gap: var(--ruimte-5);
    padding-block: var(--ruimte-4);
    border-top: 1px solid var(--rand);
}

.moment:last-child { border-bottom: 1px solid var(--rand); }

/* Wat verder in de rail staat en geen moment is — op /prijzen de verder-link
   onder de drie momenten — hoort over de volle breedte en niet in de
   labelkolom, die er anders naar uitdijt. */
.marktdag > :not(.moment) { grid-column: 1 / -1; }

.moment-tijd {
    font-variant-numeric: tabular-nums;
    font-weight: var(--gewicht-vet);
    color: var(--tekst);
    padding-top: 0.1em;
}

.moment-tekst { color: var(--tekst-zacht); max-width: 58ch; }
.moment-tekst strong { color: var(--tekst); font-weight: var(--gewicht-medium); }

@media (max-width: 44rem) {
    .marktdag { grid-template-columns: minmax(0, 1fr); }
    .moment { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-1); }
}

/* ---- De rail op zijn kant: de tijdlijn --------------------------------- */

/* Het punt op de lijn wisselt per stand, om dezelfde reden als de uitspringende
   pijler: knopgroen is overdag het donkerste wat er op de grond kan staan
   (8,2:1) en 's avonds bijna dezelfde toon als die grond (2,2:1). Een punt is
   een grafisch element en moet 3:1 halen. In het donker doet de hoofdkleur dat
   met 10,7:1. */
:root { --tijdlijn-punt: var(--groen-700); }

@media (prefers-color-scheme: dark) {
    :root { --tijdlijn-punt: var(--merk-lichtgroen); }
}

/* Dezelfde zes momenten, maar horizontaal: zes punten op één lijn, om en om
 * erboven en eronder. Naar de referentie van de eigenaar, 14 september 2026.
 * Alleen op de homepage; de andere vier pagina's houden de rail rechtop.
 *
 * ZEVEN KOLOMMEN EN ZES PUNTEN, en dat is de hele truc. Een punt staat aan het
 * begin van kolom 1 tot en met 6; een moment beslaat twee kolommen vanaf zijn
 * eigen punt. Daardoor is elk blok twee keer zo breed als de afstand tussen
 * twee punten, en botsen ze toch niet: de blokken bóven de lijn staan in 1-2,
 * 3-4 en 5-6, die eronder in 2-3, 4-5 en 6-7. Wie elkaar overlappen, liggen aan
 * weerszijden van de lijn.
 *
 * Zonder die overlap zou elk blok één kolom breed zijn — 190px op een laptop —
 * en dan rafelt een zin van drie regels uiteen in acht.
 *
 * VANAF 78rem EN NIET EERDER. Daaronder levert zeven kolommen minder dan 140px
 * per kolom op, en dan is er geen leesbare regel meer te maken. De rail rechtop
 * is daar niet de tweede keus maar de goede vorm.                             */
@media (min-width: 78rem) {
    /* De sectie erboven topt de rail af op 56rem; een tijdlijn die halverwege de
       pagina ophoudt is geen tijdlijn. Met dezelfde twee klassen in de selector,
       anders wint die regel op gewicht. */
    .sectie--marktdag .marktdag--tijdlijn { max-width: none; }

    .marktdag--tijdlijn {
        margin-top: var(--ruimte-7);

        /* De afstand tussen twee punten. Een vaste maat en geen breuk: met 1fr
           kneep de tijdlijn zich in de beschikbare breedte en werd de lucht
           tussen twee momenten kleiner naarmate het scherm smaller was —
           precies andersom dan je wilt. Nu is de stap vast en schuift wat er
           niet past. */
        --tl-stap: 17rem;

        grid-template-columns: repeat(7, var(--tl-stap));
        grid-template-rows: auto auto auto;
        column-gap: var(--ruimte-4);
        row-gap: 0;
        align-items: end;

        /* Gecentreerd als het past, schuivend als het niet past. `safe` is het
           hele punt: bij een gewone `center` schuift overvloeiende inhoud aan de
           linkerkant uit beeld en is hij niet meer te bereiken. */
        justify-content: safe center;

        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;

        /* Ruimte onder de schuifbalk, zodat hij niet tegen het onderste blok
           aan komt te staan. */
        padding-bottom: var(--ruimte-3);
    }

    /* De lijn zelf. Een eigen rij in het raster en geen rand onder een blok: zo
       loopt hij door de kolomgaten heen en over de hele lengte van het spoor, en
       is hij één streep in plaats van zes.

       Hij hoort bij de punten en niet bij de tekst: dezelfde kleur als een punt,
       op 45% zodat hij de punten draagt zonder ze te overstemmen. Niet --rand,
       de haarlijn die secties scheidt — die is hier te zwak, want deze lijn
       scheidt niets maar rijgt zes punten aan elkaar, en dat is het enige wat
       van zes losse blokken een dag maakt. Vervaagt aan de rechterkant mee met
       de rest; zie het masker hieronder. */
    .marktdag--tijdlijn::before {
        content: "";
        grid-row: 2;
        grid-column: 1 / -1;
        height: 1px;
        background: color-mix(in oklab, var(--tijdlijn-punt) 45%, transparent);
    }

    /* De focusring van het schuifvlak zelf. Hij is met het toetsenbord te
       bereiken — zie de attributen in index.php — en dan moet je ook zien waar
       je bent. */
    .marktdag--tijdlijn:focus-visible {
        outline: 3px solid var(--focusring);
        outline-offset: 4px;
        border-radius: var(--kist-radius-s);
    }

    /* Wat zegt dát er nog meer is.
     *
     * Niet de schuifbalk, en dat is gemeten: macOS tekent een zwevende balk die
     * in rust onzichtbaar is en geen enkele pixel in beslag neemt. Noch
     * `scrollbar-width`, noch een `::-webkit-scrollbar` met een expliciete
     * hoogte krijgt daar een blijvende balk uit — met allebei bleef
     * `offsetHeight - clientHeight` nul. Op Windows en op een Mac waar de
     * systeeminstelling de balk altijd toont, doet het ::-webkit-blok hieronder
     * wél zijn werk, dus het blijft staan; het draagt alleen de boodschap niet.
     *
     * Wat hem wel draagt is de rand die vervaagt. De laatste 2,5rem loopt uit
     * naar niets, en dan houdt de tekst niet op maar gaat hij verder buiten
     * beeld. Eén verloop, geen pijltje, geen knop: hetzelfde middel dat het
     * eerste scherm ook gebruikt om iets te laten doorlopen.                   */
    .marktdag--tijdlijn {
        --tl-vloei: 2.5rem;

        -webkit-mask-image: linear-gradient(to right,
            #000 calc(100% - var(--tl-vloei)), transparent 100%);
                mask-image: linear-gradient(to right,
            #000 calc(100% - var(--tl-vloei)), transparent 100%);
    }

    /* Uit het palet en niet uit de browser, voor de systemen die hem tekenen:
       de duim is de lijnkleur die ook de invoervelden begrenst, de baan is de
       haarlijn. */
    .marktdag--tijdlijn::-webkit-scrollbar { height: 8px; }

    .marktdag--tijdlijn::-webkit-scrollbar-track {
        background: var(--rand);
        border-radius: 4px;
    }

    .marktdag--tijdlijn::-webkit-scrollbar-thumb {
        background: var(--groen-500);
        border-radius: 4px;
    }

    .marktdag--tijdlijn::-webkit-scrollbar-thumb:hover { background: var(--groen-600); }

    .marktdag--tijdlijn .moment {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-1);
        padding: 0;
        border: none;
        scroll-snap-align: start;
        scroll-margin-inline-start: var(--ruimte-4);
    }

    /* Boven de lijn: tegen de lijn aan, met lucht eronder voor het punt.
       Eronder: andersom. */
    .marktdag--tijdlijn .moment:nth-child(odd) {
        grid-row: 1;
        align-self: end;
        padding-bottom: var(--ruimte-5);
    }

    .marktdag--tijdlijn .moment:nth-child(even) {
        grid-row: 3;
        align-self: start;
        padding-top: var(--ruimte-5);
    }

    /* Expliciet geplaatst en niet aan de automaat overgelaten: met vaste rijen
       en vrije kolommen zet de plaatser twee blokken in dezelfde kolom zodra er
       een rij vol is. */
    .marktdag--tijdlijn .moment:nth-child(1) { grid-column: 1 / span 2; }
    .marktdag--tijdlijn .moment:nth-child(2) { grid-column: 2 / span 2; }
    .marktdag--tijdlijn .moment:nth-child(3) { grid-column: 3 / span 2; }
    .marktdag--tijdlijn .moment:nth-child(4) { grid-column: 4 / span 2; }
    .marktdag--tijdlijn .moment:nth-child(5) { grid-column: 5 / span 2; }
    .marktdag--tijdlijn .moment:nth-child(6) { grid-column: 6 / span 2; }

    /* Het punt op de lijn. Elf pixels, gecentreerd op een lijn van één: dus
       vijf eronder. Knopgroen en niet de hoofdkleur — dit is een grafisch
       element op de paginagrond en moet 3:1 halen, en dat doet de hoofdkleur
       daar niet. */
    .marktdag--tijdlijn .moment::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--tijdlijn-punt);
    }

    .marktdag--tijdlijn .moment:nth-child(odd)::before  { bottom: -5px; }
    .marktdag--tijdlijn .moment:nth-child(even)::before { top: -5px; }

    /* Het streepje van het punt naar zijn tekst: omhoog boven de lijn, omlaag
       eronder. Midden op het punt, en net niet tot aan de tekst. */
    .marktdag--tijdlijn .moment::after {
        content: "";
        position: absolute;
        inset-inline-start: 4.5px;
        width: 2px;
        height: calc(var(--ruimte-5) - var(--ruimte-1));
        background: var(--tijdlijn-punt);
    }

    .marktdag--tijdlijn .moment:nth-child(odd)::after  { bottom: 0; }
    .marktdag--tijdlijn .moment:nth-child(even)::after { top: 0; }

    /* De vetgezette aanhef krijgt zijn eigen regel. In de rail leest hij als
       het begin van een zin, want daar is de regel breed; in een kolom van
       300px is hij de kop van dat moment en hoort de zin eronder te beginnen. */
    .marktdag--tijdlijn .moment-tekst { max-width: none; }
    .marktdag--tijdlijn .moment-tekst strong {
        display: block;
        margin-bottom: var(--ruimte-1);
        font-weight: var(--gewicht-vet);
    }

    .marktdag--tijdlijn .moment-tijd {
        padding-top: 0;
        font-size: var(--tekst-s);
        color: var(--tekst-zacht);
    }
}

/* ---- Wanneer het niet past -------------------------------------------- */

/* De eerlijkheidssectie. Bewust plat: geen kisten, geen kleur, geen iconen.
   Dit is het moment waarop de pagina niets probeert te verkopen, en dat moet je
   kunnen zien. En bewust één brede kolom in plaats van de tweekolomsopzet van
   de marktdag: twee secties met dezelfde anatomie onder elkaar is herhaling,
   geen systeem. Hier is de regel groter en loopt hij door. */
.sectie--breed .sectiekop { max-width: 18ch; }
/* Groter dan de aanloop van de marktdag, maar onder de sectiekop: --kop-l loopt
   tot 44px en de kop tot 40px, dus daarmee ging de aanloop zijn eigen kop
   overstemmen. Het onderscheid met de marktdag zit in de maat van de kolom en
   van de regels eronder, niet in een aanloop die harder roept dan de titel. */
.sectie--breed .sectielead {
    font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
    max-width: 34ch;
}

.nietvoorjou { margin-top: var(--ruimte-6); display: grid; gap: 0; }

.nietvoorjou li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-3) var(--ruimte-6);
    padding-block: var(--ruimte-5);
    border-top: 1px solid var(--rand);
}

.nietvoorjou b { font-size: var(--kop-m); }

.nietvoorjou li:last-child { border-bottom: 1px solid var(--rand); }
.nietvoorjou b { font-weight: var(--gewicht-vet); }
/* De toelichting naast elke regel. Met alleen de 7fr-kolom liep hij op een
   breed scherm door tot 95 tekens; sinds de rail geen bovengrens meer heeft is
   die kolom het breedste blok lopende tekst van de pagina. 54ch is dezelfde
   maat die de brede bewijsstukken hierboven al aanhouden. */
.nietvoorjou span { color: var(--tekst-zacht); max-width: 54ch; }

@media (max-width: 44rem) {
    .nietvoorjou li { grid-template-columns: 1fr; gap: var(--ruimte-1); }
}

/* De slotregel gaat terug naar de middenmaat. De sectie mag een eigen maat
   hebben: dat is wat hem van de marktdag onderscheidt, maar twee vergrote
   alinea's om de lijst heen maken van een platte, zelfverzekerde sectie een
   luide. De aanloop draagt de maat, de slotregel volgt. */
.welvoorjou {
    margin-top: var(--ruimte-6);
    font-size: var(--kop-m);
    max-width: 48ch;
    text-wrap: balance;
}

/* ---- Wat het kost ------------------------------------------------------ */

/* Twee kisten, geen prijstabel. De bedragen staan in de plannen-tabel van de
   applicatie en die is de enige waarheid; hier staat alleen wat er in de
   gratis versie zit en wat € 9,95 daaraan toevoegt. Alles daarboven (Pro, Business) is één zin en een link. */
.kosten {
    margin-top: var(--ruimte-6);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--naad);
}

.kosten .kist--gratisplan { grid-column: span 5; }
.kosten .kaartje--plan    { grid-column: span 7; }

/* Het warme kaartje naast de gratis versie. Het bedrag draagt de kaart, de
   pakketnaam staat ernaast en niet erboven: "Plus" is een label en € 9,95 is
   het argument, en dat verschil hoort in de maat te zitten.

   De kaart rekt hier wél mee met de hoogte van de gratis versie ernaast, anders
   dan het kaartje op /prijzen dat op `align-self: start` staat. Daar hangt het
   los aan een kolom; hier vormen de twee samen één band en zou een kort warm
   vlak naast een lang bleek vlak scheef staan. */
.kaartje--plan {
    gap: var(--ruimte-4);
    justify-content: start;
}

.kaartje-kop {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ruimte-2) var(--ruimte-4);
}

.kaartje-naam {
    font-size: var(--kop-m);
    color: inherit;
}

/* De aanloop naar de lijst, en geen eerste regel ín de lijst: "Alles uit
   Gratis, en daarbovenop:" is geen ding dat je krijgt maar de zin die zegt wat
   er volgt. Met een streepje ervoor las hij als het eerste kenmerk. */
.kaartje-lead { font-size: var(--tekst-s); }

/* De kop van de gratis kaart. Poppins en niet Fredoka, want er kan een bedrag
   in staan en op deze site zijn alle cijfers Poppins. */
.planprijs {
    font-family: var(--lettertype);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: var(--gewicht-vet);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.planlijst { display: grid; gap: var(--ruimte-2); color: var(--tekst-zacht); }
.planlijst li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--ruimte-2); }
.planlijst svg { color: var(--groen-500); }

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

.sectieverder { margin-top: var(--ruimte-5); }
.kist .sectieverder { margin-top: var(--ruimte-3); }

/* De tweede uitgang. De eerste staat in de kop-kist; wie tot hier leest is
   overtuigd door de prijs en moet niet terug hoeven scrollen. */
.knop-regel--sectie { margin-top: var(--ruimte-6); gap: var(--ruimte-4) var(--ruimte-6); }

.kostenvoet {
    margin-top: var(--ruimte-5);
    color: var(--tekst-zacht);
    max-width: 60ch;
}

@media (max-width: 44rem) {
    .kosten .kist--gratisplan,
    .kosten .kaartje--plan { grid-column: span 12; }
}

/* ---- Vragen ------------------------------------------------------------ */

/* Twee kolommen op een scherm, één op een telefoon. Geen uitklappers: wie op
   een kraam staat wil het antwoord lezen, niet eerst ergens op tikken. */
/* ---- De vragen -------------------------------------------------------- */

/* Kop, aanloop en een weg naar ons links; de vragen rechts als lijst die je
 * open- en dichtklapt. Naar de referentie van de eigenaar, 12 september 2026.
 *
 * De opzet is dezelfde 5|7 als bij de pijlers hierboven, en dat is met opzet:
 * twee secties die allebei een kop links en inhoud rechts hebben, horen op
 * dezelfde lijn te staan. Wat ze uit elkaar houdt is wat er rechts staat —
 * vlakken tegen elkaar aan daar, een lijst met haarlijnen hier.
 *
 * Geen kaders om de vragen. Een vraag is geen ding maar een regel, en de
 * haarlijn doet wat een kist hier zou overdrijven.                            */
.sectie--vragen {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: start;
}

.sectie--vragen .sectiehoofd { display: grid; align-content: start; }
.sectie--vragen .sectielead { margin-top: var(--ruimte-4); }
.sectie--vragen .sectieverder { margin-top: var(--ruimte-6); }

.vragen { display: grid; }

.vraag { border-bottom: 1px solid var(--rand); }

/* De hele regel is het raakvlak en niet alleen het woord: een vraag openklappen
   met een duim aan een kraam moet niet vragen om een precieze tik. Vandaar de
   volle breedte, de 48px hoogte en de opvulling links en rechts die de tekst
   van de lijn af houdt.

   list-style en de -webkit-regel samen: Safari tekent het driehoekje via een
   eigen pseudo-element dat list-style niet wegneemt, en dan staat er een pijltje
   naast ons eigen teken. Het testtoestel van dit project is een iPad. */
.vraag-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-5);
    min-height: var(--raakvlak);
    padding-block: var(--ruimte-4);
    cursor: pointer;
    list-style: none;
}

.vraag-kop::-webkit-details-marker { display: none; }

.vraag-kop h3 {
    font-size: var(--kop-m);
    margin: 0;
}

.vraag-kop:hover h3 { color: var(--link); }
.vraag-kop:hover .vraag-teken { color: var(--link); }

/* De focusring volgt de regel en niet de tekst: de summary ís het bedienbare
   ding, en een ring om alleen de kop zou de helft van het raakvlak missen. */
.vraag-kop:focus-visible {
    outline: 3px solid var(--focusring);
    outline-offset: 2px;
    border-radius: var(--radius-m);
}

.vraag-teken {
    flex: none;
    color: var(--tekst-zacht);
    transition: color 160ms ease;
}

/* De plus wordt een min. Intrekken en niet verbergen: zo blijft het één
   tekening die van vorm verandert, en geen tweede icoon dat ervoor in de plaats
   springt. */
.vraag-teken-staaf {
    transform-origin: center;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.vraag[open] .vraag-teken-staaf { transform: scaleY(0); }

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

.vraag-antwoord { padding-bottom: var(--ruimte-5); }
.vraag-antwoord p { color: var(--tekst-zacht); max-width: 58ch; }

/* Eén antwoord bestaat uit twee alinea's, en zonder deze regel liepen die in
   elkaar over: de tweede begon op de regel onder de eerste alsof het dezelfde
   zin was. Dezelfde afstand als tussen twee alinea's elders. */
.vraag-antwoord p + p { margin-top: var(--ruimte-3); }

@media (max-width: 62rem) {
    .sectie--vragen { grid-template-columns: minmax(0, 1fr); }
    .sectie--vragen .sectieverder { margin-top: var(--ruimte-5); }
}

/* ---- Kruimelpad en de huidige pagina --------------------------------- */

/* Het woordmerk brengt ook terug, maar dat weet niet iedereen. Eén expliciete
   weg terug bovenaan elke onderpagina; op de homepage staat hij niet, want
   daar is er niets om naar terug te gaan. */
.kruimel {
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
    padding-block: var(--ruimte-2) var(--ruimte-4);
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

.kruimel a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--link);
    text-decoration: none;
}

.kruimel a:hover { text-decoration: underline; }
.kruimel svg { flex: none; color: var(--groen-500); }

/* Waar je staat. Een streep in de accentkleur onder de link, met genoeg
   afstand dat hij geen onderstreping lijkt. */
.hoofdnav a[aria-current="page"] {
    color: var(--tekst);
    font-weight: var(--gewicht-vet);
    box-shadow: inset 0 -3px 0 0 var(--link);
}

/* ---- De koptekst van een onderpagina ---------------------------------- */

/* Onderpagina's openen niet met een kraamwand maar met een titelblok: kop,
   aanloop, en niets anders. De uitstalling is het gezicht van de homepage en
   moet dat blijven; hem herhalen zou hem verslijten. */
/* Geen maat op het blok zelf, wel op de regels erin. Tot 14 september 2026 zat
   hier --breedte-inhoud (44rem) omheen, en sinds de rail geen bovengrens meer
   heeft strandde daardoor elk titelblok op 704px in een pagina van 1800: een
   kop die ophoudt waar de pagina nog lang niet ophoudt. De regellengte wordt nu
   afgetopt waar hij hoort — op de regel — en het blok gebruikt de breedte die
   er is. */
.paginatitel {
    padding-block: var(--ruimte-5) var(--ruimte-8);
}

.paginatitel h1 {
    font-size: var(--kop-xl);
    letter-spacing: -0.035em;
    max-width: 24ch;
}

.paginatitel .aanloop {
    margin-top: var(--ruimte-5);
    font-size: var(--kop-m);
    color: var(--tekst-zacht);
    max-width: 54ch;
}

/* ---- Niet gevonden ---------------------------------------------------- */

/* De onderkant is dezelfde maat als .paginatitel: dit is het titelblok van de
   404 en hij hoort hetzelfde te ademen. Vandaar --ruimte-8 en geen vaste maat,
   anders is dit de enige pagina die niet met de rest meeademt. */
.nietgevonden {
    padding-block: var(--ruimte-6) var(--ruimte-8);
    max-width: var(--breedte-inhoud);
}

.nietgevonden img { height: 96px; width: auto; margin-bottom: var(--ruimte-5); }
.nietgevonden h1 { font-size: var(--kop-sectie); letter-spacing: -0.025em; }

.nietgevonden .aanloop {
    margin-top: var(--ruimte-4);
    font-size: var(--kop-m);
    color: var(--tekst-zacht);
    max-width: 42ch;
}

/* ---- De stappen op /hoe-het-werkt ------------------------------------- */

/* De leesrail van de homepage, uitgeschreven. Het tijdstip staat links in de
   vaste kolom van 7,5rem die deze component in DESIGN.md heeft, niet als
   kicker boven de kop. Een label boven een kop is de vorm die dit systeem
   nergens gebruikt, en hier zou hij bovendien de eigen signature vervangen.

   Wat rechts van die kolom staat, wisselt per moment van anatomie. Zeven keer
   dezelfde verhouding met alleen het beeld om en om is een functiegrid op zijn
   kant; vijf banden geven de dag een ritme waarin een dichte passage door een
   open wordt gevolgd. */
.stappen { display: grid; gap: 0; }

.stap {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--ruimte-6);
    align-items: start;
    padding-block: var(--ruimte-8);
    border-top: 1px solid var(--rand);
}

.stappen .stap:last-child { border-bottom: 1px solid var(--rand); }

/* Het tijdstip blijft staan zolang zijn moment in beeld is. Bij een moment dat
   meer dan een schermhoogte beslaat, is dat het verschil tussen weten waar je
   bent en terugscrollen om het na te kijken. */
.stap-tijd {
    position: sticky;
    top: var(--ruimte-5);
    font-variant-numeric: tabular-nums;
    font-weight: var(--gewicht-vet);
    color: var(--tekst-zacht);
}

.stap-lijf {
    display: grid;
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: start;
}

.stap--beeld-rechts .stap-lijf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.stap--beeld-links .stap-lijf  { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.stap--beeld-links .stap-tekst { grid-column: 2; grid-row: 1; }
.stap--beeld-links .stap-beeld { grid-column: 1; grid-row: 1; }

/* Het moment waarop de app niets vraagt, toont ook niets. Een scherm naast
   tekst die zegt dat er niets in te stellen valt, spreekt zichzelf tegen. */
/* Op verzoek van de eigenaar (9 oktober 2026) over de volle breedte, ook de
   alinea's: er staat niets naast. */
.stap--stil .stap-tekst,
.stap--stil .stap-tekst > p:not(.stap-lead) { max-width: none; }

/* Eén moment krijgt het merkgroen: het bewijs dat offline werkt is het sterkste
   dat deze pagina te tonen heeft, en dit is het enige kleurvlak op de hele
   lengte. Uitgelijnd op het midden, omdat hier twee vlakken van gelijk gewicht
   naast elkaar staan in plaats van tekst met een illustratie erbij. */
.stap--kist .stap-lijf {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
}

/* Onder elkaar in plaats van naast elkaar: de tekst leest breed uit en het
   scherm staat er los onder, groter dan het in een kolom zou passen. */
.stap--breed .stap-lijf  { grid-template-columns: minmax(0, 1fr); }
.stap--breed .stap-tekst { max-width: 62ch; }

.stap-kop {
    font-size: var(--kop-sectie);
    letter-spacing: -0.025em;
    max-width: 18ch;
}

.stap-lead {
    margin-top: var(--ruimte-3);
    font-size: var(--kop-m);
    max-width: 40ch;
}

.stap-tekst > p:not(.stap-lead) {
    margin-top: var(--ruimte-4);
    color: var(--tekst-zacht);
    max-width: 56ch;
}

/* Een noot is geen kleine lettertjes. Hij staat op dezelfde maat als de rest en
   krijgt een regel erboven, zodat zijn plek gelezen wordt als bedoeld en niet
   als iets dat eronder is gevallen. */
.stap-noot {
    margin-top: var(--ruimte-5) !important;
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--rand);
    color: var(--tekst-zacht);
    max-width: 56ch;
}

.stap .verder { margin-top: var(--ruimte-4); }

/* Het scherm staat in een kist, zoals alles wat dit systeem als ding toont. Dat
   is niet alleen de dragende component terug op zijn plek: een bijna-witte
   schermafbeelding die rechtstreeks op de nachtgrond ligt, is het felste vlak
   van de pagina en overstemt elke kop. De kist zet er een vlak tussen. */
.stap-beeld {
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-4);
}

/* De schermen komen uit een telefoon en zijn dus hoog. Zonder bovengrens duwt
   één scherm de hele stap uit elkaar en gaat het beeld de tekst overstemmen. */
.stap-beeld img {
    width: auto;
    max-width: 100%;
    max-height: 30rem;
    height: auto;
    border-radius: var(--kist-radius-s);
    border: 1px solid var(--kist-rand);
}

.stap--breed .stap-beeld img { max-height: 34rem; }

/* Zolang een scherm er niet is: een gemarkeerde plek met de naam erin. Wat er
   komt is dan tenminste bekend. Geldt niet voor een stille band: daar
   ontbreekt niets. */
.scherm-plek {
    display: grid;
    place-content: center;
    gap: var(--ruimte-1);
    text-align: center;
    aspect-ratio: 4 / 3;
    max-height: 30rem;
    border: 2px dashed var(--groen-500);
    border-radius: var(--kist-radius);
    color: var(--tekst-zacht);
    padding: var(--ruimte-5);
}

.scherm-plek > span:first-child {
    font-family: var(--lettertype-kop);
    font-size: var(--kop-m);
    color: var(--tekst);
}

.scherm-plek-noot { font-size: var(--tekst-xs); }

/* Onder deze grens vouwt de rail zoals hij dat op de homepage ook doet: het
   label boven zijn eigen rij, tussen de haarlijnen die de rij begrenzen. */
@media (max-width: 62rem) {
    .stap { grid-template-columns: 1fr; gap: var(--ruimte-3); }
    .stap-tijd { position: static; }

    .stap--beeld-rechts .stap-lijf,
    .stap--beeld-links .stap-lijf,
    .stap--kist .stap-lijf { grid-template-columns: minmax(0, 1fr); }

    .stap--beeld-links .stap-tekst,
    .stap--beeld-links .stap-beeld { grid-column: 1; grid-row: auto; }
}

/* ---- De prijsvakken op /prijzen --------------------------------------- */

/* Drie vlakken van ongelijke maat tegen elkaar aan, met dezelfde naad als de
   uitstalling op de homepage. Het kaartje is smal en hoog, de twee vlakken
   ernaast zijn breed en laag: dat is de noordster van dit systeem en niet drie
   kolommen van gelijke breedte, wat een pakkettengrid zou zijn, precies de
   vorm waar deze pagina juist niet over gaat. */
.prijsvak {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--naad);
}

.prijsvak + .sectie { border-top: none; }

.prijsvak .kaartje--prijs { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.prijsvak .kist--gratisvak { grid-column: 6 / span 7; grid-row: 1; }
.prijsvak .kist--meervak   { grid-column: 6 / span 7; grid-row: 2; }

.kist--gratisvak h2,
.kist--meervak h2 { font-size: var(--kop-m); }

.kist--gratisvak p,
.kist--meervak p { color: var(--tekst-zacht); max-width: 54ch; }

/* De verderlink hoort onderaan zijn eigen vlak, niet direct onder de tekst:
   twee vlakken naast elkaar met de link op verschillende hoogtes leest als een
   uitlijnfout. */
.kist--gratisvak .verder,
.kist--meervak .verder { margin-top: auto; padding-top: var(--ruimte-2); }

/* Lopende tekst in de rechterkolom van een tweekolomsectie. Geen kist: dit is
   uitleg die je leest, geen ding dat wordt getoond. */
.uitleg > p {
    color: var(--tekst-zacht);
    max-width: 60ch;
}

.uitleg > p + p { margin-top: var(--alinea-ruimte); }

/* ---- Een pakket kiezen op /prijzen ----------------------------------- *
 *
 * Een rij kaarten, en de gekozen kaart is het ene warme vlak van de pagina:
 * de Eén-Warm-Vlak-regel, met als enige verschil dat de bezoeker kiest wélk
 * vlak dat is. Plus staat standaard gekozen. Geen schaduw, geen rand om een
 * kaart: de kaarten dragen zichzelf op toon, net als elke kist.
 *
 * Twee mechanismen, met opzet verschillend. Maand of jaar loopt via gewone
 * broertjes-selectors en werkt dus overal. Het kiezen van een kaart vraagt
 * :has(), en een browser zonder krijgt in elke kaart meteen de startknop.
 */
.pakketkeuze { display: grid; gap: var(--ruimte-5); }

.termijn {
    justify-self: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ruimte-1);
    padding: var(--ruimte-1);
    background: var(--kist-vlak);
    border-radius: var(--radius-l);
}

.termijn-keuze {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-2);
    min-height: var(--raakvlak);
    padding: 0 var(--ruimte-4);
    border-radius: calc(var(--radius-l) - 4px);
    font-weight: var(--gewicht-medium);
    cursor: pointer;
}

#termijn-maand:checked ~ .termijn .termijn-keuze--maand,
#termijn-jaar:checked ~ .termijn .termijn-keuze--jaar {
    background: var(--accent);
    color: var(--op-accent);
}

#termijn-maand:focus-visible ~ .termijn .termijn-keuze--maand,
#termijn-jaar:focus-visible ~ .termijn .termijn-keuze--jaar {
    outline: 3px solid var(--focusring);
    outline-offset: 2px;
}

.termijn-voordeel {
    padding: 0.1em 0.6em;
    border-radius: 999px;
    background: var(--merk-lichtgroen);
    color: var(--groen-900);
    font-size: var(--tekst-s);
    font-variant-numeric: tabular-nums;
}

/* De Omkeer-regel: in de gekozen knop is het label de omkering van die knop.
   In het donker ís de knop pistache, en dan viel een pistache label weg. */
#termijn-jaar:checked ~ .termijn .termijn-voordeel {
    background: var(--op-accent);
    color: var(--accent);
}

.alleen-jaar { display: none; }
#termijn-jaar:checked ~ .pakketrij .alleen-maand { display: none; }
#termijn-jaar:checked ~ .pakketrij .alleen-jaar { display: block; }
#termijn-jaar:checked ~ .pakketrij .knop.alleen-jaar { display: inline-flex; }

/* De rij. Ruimte bovenin voor het label dat over de rand van de aanrader
   hangt. Vier naast elkaar waar het past, twee op een tablet, één op een
   telefoon. */
.pakketrij {
    display: grid;
    gap: var(--ruimte-6) var(--ruimte-4);
    padding-top: var(--ruimte-4);
}

.pakket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-5);
    padding: var(--ruimte-6) var(--ruimte-5);
    background: var(--kist-vlak);
    border-radius: var(--kist-radius);
    transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 44rem) {
    .pakketrij { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 78rem) {
    .pakketrij { grid-template-columns: repeat(4, 1fr); }
}

/* Naam, omschrijving, bedrag, knop en lijst op dezelfde hoogte in elke
   kaart van een rij, hoe lang de omschrijving ook is. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 44rem) {
        .pakket {
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
            row-gap: var(--ruimte-5);
        }
    }
}

.pakket-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: var(--ruimte-1) var(--ruimte-3);
    border-radius: 999px;
    background: var(--accent);
    color: var(--op-accent);
    font-size: var(--tekst-s);
    font-weight: var(--gewicht-medium);
    white-space: nowrap;
}

.pakket-naam { margin: 0; font-size: var(--kop-m); }

/* De hele kaart is het keuzevlak: het label van de kop rekt uit over de
   kaart. De knoppen liggen erboven, anders kiest een tik op "Start" alleen. */
.pakket-vlak { cursor: pointer; }
.pakket-vlak::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.pakket-omschrijving,
.pakket-klein { margin: 0; font-size: var(--tekst-s); color: var(--tekst-zacht); }

.pakket-prijs p { margin: 0; }
.pakket-prijs .pakket-klein { margin-top: var(--ruimte-2); }
.pakket-bedrag {
    font-size: clamp(2rem, 1.7rem + 0.8vw, 2.5rem);
    font-weight: var(--gewicht-vet);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}
.pakket-per { font-weight: var(--gewicht-medium); white-space: nowrap; }

.pakket-actie { position: relative; z-index: 1; display: flex; }
.pakket-actie .knop { width: 100%; }

.pakket-kiesknop {
    display: none;
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 1px var(--rand-sterk);
}
.pakket-kiesknop:hover { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px var(--rand-sterk); }

.pakket .pakket-punten { gap: var(--ruimte-3); padding-top: var(--ruimte-5); border-top: 1px solid var(--rand); }
/* Bolletjes in plaats van de streepjes van .kaartjelijst; het prijskaartje
   op de homepage houdt zijn streepjes. */
.pakket .pakket-punten li::before {
    top: 0.55em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
}

/* De gekozen kaart: het warme vlak, met de twee inkten die erop gelezen
   worden. De knop houdt knopgroen, wat op mandarijn 4,5:1 haalt. */
.pakket:has(.pakket-radio:checked) { background: var(--merk-oranje); color: #3a1f0e; }
.pakket:has(.pakket-radio:checked) .pakket-omschrijving,
.pakket:has(.pakket-radio:checked) .pakket-klein { color: #5a3418; }
.pakket:has(.pakket-radio:checked) .pakket-punten { border-top-color: rgb(58 31 14 / 0.2); }
.pakket:has(.pakket-radio:checked) .knop { background: #4a5239; color: #fff; }
.pakket:has(.pakket-radio:checked) .knop:hover { background: #3c432f; }

.pakket:has(.pakket-radio:focus-visible) {
    outline: 3px solid var(--focusring);
    outline-offset: 3px;
}

@supports selector(:has(*)) {
    #termijn-maand ~ .pakketrij .pakket:not(:has(.pakket-radio:checked)) .pakket-start { display: none; }
    .pakket:not(:has(.pakket-radio:checked)) .pakket-kiesknop { display: inline-flex; }
}

.pakketvoet {
    margin: 0;
    justify-self: center;
    max-width: 60ch;
    text-align: center;
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

/* De vergelijking. Breder dan een telefoon, dus hij scrolt in zijn eigen
   kader; de pagina zelf schuift nooit opzij. */
.vergelijkingkader { overflow-x: auto; margin-top: var(--ruimte-4); }

.vergelijking {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: var(--tekst-s);
}

.vergelijking th,
.vergelijking td {
    padding: var(--ruimte-2) var(--ruimte-3);
    border-bottom: 1px solid var(--rand);
    text-align: left;
    vertical-align: top;
}

.vergelijking thead th { font-weight: var(--gewicht-vet); }
.vergelijking tbody th { font-weight: var(--gewicht-medium); }
.vergelijking td { color: var(--tekst-zacht); }

/* Ingeklapt: vijf rijen, en de zesde voor de helft, vervagend naar de grond.
   Die halve rij is wat zegt dat er meer is; een afgekapte tabel zonder dat
   leest als een tabel die af is. De rest verschijnt met het vinkje. */
.vergelijking-schakel:not(:checked) ~ .vergelijkingkader {
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent);
}
.vergelijking-schakel:not(:checked) ~ .vergelijkingkader tbody tr:nth-child(n+7) { display: none; }
.vergelijking-schakel:not(:checked) ~ .vergelijkingkader tbody tr:nth-child(6) > * { padding-bottom: 0; }
.vergelijking-schakel:not(:checked) ~ .vergelijkingkader .vergelijking { margin-bottom: -0.7em; }

.vergelijking-meer {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--ruimte-2);
    min-height: var(--raakvlak);
    margin: var(--ruimte-2) auto 0;
    font-weight: var(--gewicht-vet);
    color: var(--link);
    cursor: pointer;
}
.vergelijking-meer:hover { color: var(--link-donker); }
.vergelijking-meer svg { flex: none; transition: transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1); }

.vergelijking-meer__open { display: none; }
.vergelijking-schakel:checked ~ .vergelijking-meer .vergelijking-meer__dicht { display: none; }
.vergelijking-schakel:checked ~ .vergelijking-meer .vergelijking-meer__open { display: inline; }
.vergelijking-schakel:checked ~ .vergelijking-meer svg { transform: rotate(180deg); }

.vergelijking-schakel:focus-visible ~ .vergelijking-meer {
    outline: 3px solid var(--focusring);
    outline-offset: 2px;
    border-radius: 4px;
}

.vergelijkingvoet {
    margin-top: var(--ruimte-3);
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

@media (max-width: 62rem) {
    .prijsvak { grid-template-columns: 1fr; }
    .prijsvak .kaartje--prijs,
    .prijsvak .kist--gratisvak,
    .prijsvak .kist--meervak { grid-column: 1; grid-row: auto; }
}

/* Wat de € 9,95 koopt, op het kaartje zelf. Zonder deze regels staat er tussen
   het bedrag en de btw-regel een gat van een paar honderd pixels, omdat het
   kaartje twee rijen hoog is en de twee alinea's uit elkaar getrokken worden.
   Een prijskaartje dat alleen een bedrag draagt, verdient die hoogte ook niet. */
.kaartjelijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--ruimte-2);
    font-size: var(--tekst-s);
}

.kaartjelijst li {
    padding-left: 1.1em;
    position: relative;
}

/* Een streepje in plaats van het vinkje uit partials/: dat vinkje is getekend
   voor de donkere en de lichte grond, niet voor mandarijn, en het zou hier het
   enige plek zijn waar het icoon op een merkkleur staat. */
/* Getekend en niet als letter, zoals .nodig-streep: een streepje uit het
   lettertype hangt op zijn eigen hoogte en heeft zijn eigen dikte, en die twee
   verschillen per lettertype. Dit lijntje staat waar het hoort. */
.kaartjelijst li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.66em;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* Sluit de lijst een sectie af, dan valt zijn onderlijn samen met de lijn van
   de volgende sectie: twee haarlijnen met alleen witruimte ertussen, wat als
   een lege rij leest. Staat er nog iets onder, een knopregel bijvoorbeeld,
   dan doet de lijn wel werk en blijft hij staan. */
.sectie > .nietvoorjou:last-child > li:last-child { border-bottom: none; }

/* ---- De bewijsband op /zonder-internet -------------------------------- */

/* Het bewijs staat boven de uitleg, niet eronder. De hele pagina hangt aan één
   schermafbeelding die er precies zo uitziet als met verbinding; die eerst
   laten zien en er daarna over praten, is de enige volgorde die werkt.

   Het beeld staat in de groene kist. Dat is het enige kleurvlak op deze pagina
   er is geen prijs, dus geen warm vlak, en het houdt de bijna-witte opname
   van de nachtgrond af. */
.bewijsband {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: center;
    padding-block: var(--ruimte-8);
}

.bewijsband-tekst h2 {
    font-size: var(--kop-sectie);
    letter-spacing: -0.025em;
    max-width: 24ch;
}

.bewijsband-tekst > p:not(.sectielead) {
    margin-top: var(--ruimte-4);
    color: var(--tekst-zacht);
    max-width: 52ch;
}

.bewijsband-beeld {
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-4);
}

.bewijsband-beeld img {
    width: auto;
    max-width: 100%;
    max-height: 32rem;
    height: auto;
    border-radius: var(--kist-radius-s);
    border: 1px solid var(--kist-rand);
}

/* In een brede sectie staat de uitleg in twee kolommen naast elkaar en niet
   onder elkaar in één smalle: één kolom laat de rechterhelft leeg. Twee vullen
   de maat en geven de band een eigen anatomie, zodat hij niet de derde
   tweekolomsectie op rij is. */
.sectie--breed .uitleg { margin-top: var(--ruimte-5); }

.uitleg--breed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ruimte-7);
    align-items: start;
}

.uitleg--breed > p { max-width: 52ch; }
.uitleg--breed > p + p { margin-top: 0; }

@media (max-width: 62rem) {
    .uitleg--breed { grid-template-columns: minmax(0, 1fr); }
    .uitleg--breed > p + p { margin-top: var(--alinea-ruimte); }
}

@media (max-width: 62rem) {
    .bewijsband { grid-template-columns: minmax(0, 1fr); }
}

/* ---- /pinnen-zonder-pinapparaat --------------------------------------- */

/* De grens van de belofte, direct onder de titel.

   Vorm: een rij van de leesrail: label links in de vaste kolom van 7,5rem,
   tekst rechts, haarlijnen erboven en eronder. Geen kader met een gekleurde
   zijrand: dat is precies de vorm die elke site voor een waarschuwing gebruikt,
   en hij vult bovendien een vlak met de merkkleur die voor de prijs is
   gereserveerd. Wat deze band laat opvallen is zijn plek: het enige dat tussen
   de titel en de eerste sectie staat, en zijn label. Dat is genoeg, en het is
   zelfverzekerder dan een streep. */
.grens {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--ruimte-6);
    align-items: start;
    margin-top: var(--ruimte-6);
    padding-block: var(--ruimte-6);
    border-top: 1px solid var(--rand);
    border-bottom: 1px solid var(--rand);
}

.grens-label {
    font-weight: var(--gewicht-vet);
    color: var(--tekst-zacht);
}

.grens-tekst h2 {
    font-size: var(--kop-m);
    margin-bottom: var(--ruimte-3);
}

.grens-tekst p {
    color: var(--tekst-zacht);
    max-width: 68ch;
}

.grens-tekst p + p { margin-top: var(--ruimte-3); }
.grens-tekst strong { color: var(--tekst); font-weight: var(--gewicht-medium); }

@media (max-width: 62rem) {
    .grens { grid-template-columns: 1fr; gap: var(--ruimte-3); }
}

/* Wat je nodig hebt en wat niet, in één lijst. Twee lijsten naast elkaar zou
   suggereren dat het twee even zware kolommen zijn; het punt is juist dat de
   rechterhelft (wat je níet hoeft te regelen) de langste is. */
.nodiglijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.nodig {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--ruimte-3);
    align-items: start;
    padding-block: var(--ruimte-4);
    border-top: 1px solid var(--rand);
}

.nodiglijst .nodig:last-child { border-bottom: 1px solid var(--rand); }

.nodig > span > b { display: block; }
.nodig > span > span { display: block; margin-top: 2px; color: var(--tekst-zacht); }

/* Een streepje en geen kruis: dit zijn geen ontbrekende functies maar dingen
   die je niet hoeft te doen, en een kruis leest als een gebrek. Een icoon uit
   dezelfde set als het vinkje ernaast, zodat ze op dezelfde hoogte en dikte
   staan. */
.nodig-streep {
    display: grid;
    place-items: center;
    color: var(--tekst-zacht);
}

.nodig--nee > span > b { color: var(--tekst-zacht); }

/* De vier stappen links, het scherm rechts. */
.hoe-band {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: start;
    margin-top: var(--ruimte-5);
}

.hoe-beeld { display: flex; justify-content: center; }

@media (max-width: 62rem) {
    .hoe-band { grid-template-columns: minmax(0, 1fr); }
}

/* ---- /over-ons -------------------------------------------------------- */

/* De foto links, de tekst rechts. Het beeld eerst, want de hele pagina bestaat
   omdat "je krijgt gewoon ons" een claim is die je moet kunnen zien. */
.mensen-band {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: center;
    padding-block: var(--ruimte-8);
}

.mensen-tekst h2 {
    font-size: var(--kop-sectie);
    letter-spacing: -0.025em;
}

.mensen-tekst > p:not(.sectielead) {
    margin-top: var(--ruimte-4);
    color: var(--tekst-zacht);
    max-width: 56ch;
}

.mensen-tekst strong { color: var(--tekst); font-weight: var(--gewicht-medium); }

/* De foto staat rechtop: twee mensen naast elkaar vullen een staand vlak beter
   dan een liggend, en de smalle kolom van de band vraagt er ook om. Zelfde
   wikkel als bij .portret. */
.mensen-foto { display: block; }

.mensen-beeld img {
    width: 100%;
    height: auto;
    border-radius: var(--kist-radius);
    border: 1px solid var(--kist-rand);
}

/* Uitgevouwen staat de band één kolom en zou de foto over de volle breedte
   gaan staan. Op een telefoon is dat goed; op een tablet niet. */
@media (max-width: 62rem) {
    .mensen-beeld img { max-width: 20rem; }
}

@media (max-width: 62rem) {
    .mensen-band { grid-template-columns: minmax(0, 1fr); }
}

/* Wat hier komt is een telefoonscherm, dus staat de lege plek rechtop. Een
   liggend vlak zou de verkeerde verwachting wekken over wat er komt te staan. */
.hoe-beeld .scherm-plek {
    aspect-ratio: 4 / 7;
    max-height: 30rem;
    width: 100%;
}

/* ---- De pijler /uitleg ------------------------------------------------- */

/* Dit is de enige hoek van de site waar de bezoeker niet beslist maar leest.
   De maat gaat daarom omlaag naar één leeskolom, de regelafstand omhoog, en de
   inhoudsopgave loopt rechts mee, bij een stuk van zes koppen is dat het
   verschil tussen scrollen en zoeken. */
.artikel-kop { padding-block: var(--ruimte-8) var(--ruimte-6); }

/* Het label van de pijler. Geen kicker boven een kop in de zin die dit systeem
   verbiedt: het staat er als rubrieksaanduiding, zoals boven een krantenstuk,
   en het is de enige plek waar de lezer ziet in welke serie hij zit. */
.artikel-pijler {
    font-weight: var(--gewicht-vet);
    color: var(--accent);
    margin-bottom: var(--ruimte-3);
}

/* Met de tekst op --tekst-l moet de hele ladder mee omhoog: een sectiekop van
   24px boven tekst van 20px is geen hiërarchie meer. De titel gaat daarom naar
   --kop-xl, gelijk aan de andere pagina's van de site, en de sectiekop naar
   --kop-sectie. Alledrie staan ze op de ladder van DESIGN.md. */
.artikel-kop h1 {
    font-size: var(--kop-xl);
    letter-spacing: -0.03em;
    max-width: 28ch;
    /* Een titel van één woord dat breder is dan een telefoon, liep rechts het
       scherm uit. Liever een breuk midden in het woord dan een halve titel. */
    overflow-wrap: break-word;
}

/* De standfirst onder de titel. Op de gewone 17px stond hij als een voetnoot
   onder een kop van tachtig pixels; --tekst-l geeft hem het gewicht dat hij in
   een lang stuk hoort te hebben. */
.artikel-kop .aanloop {
    margin-top: var(--ruimte-4);
    font-size: var(--tekst-l);
    max-width: 54ch;
}

.artikel-meta {
    margin-top: var(--ruimte-5);
    padding-top: var(--ruimte-3);
    border-top: 1px solid var(--rand);
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
    max-width: 54ch;
}

/* De tekstkolom houdt zijn maat en de inhoudsopgave gaat naar de rechterrand;
   de lucht valt ertussen.
 *
 * Dat was tot 14 september 2026 andersom: twee banen tegen elkaar aan, met de
 * redenering dat een baan die breder is dan zijn inhoud een gat laat vallen dat
 * niemand heeft ontworpen. Die redenering klopte toen de pagina op 78rem
 * ophield. Nu de rail geen bovengrens meer heeft, stond het paar links in een
 * pagina die rechts nog zeshonderd pixels doorliep, en dat gat had niemand
 * ontworpen — het stond alleen aan de andere kant.
 *
 * De tekstkolom blijft 46rem, en dat is geen smaak: op --tekst-l komt dat uit
 * op ongeveer tweeënzeventig tekens per regel. De breedte bepaalt de
 * lettergrootte, niet andersom, en dus mag de kolom niet meegroeien met het
 * scherm. */
.artikel-lijf {
    display: grid;
    grid-template-columns: minmax(0, 60rem) minmax(0, 1fr);
    gap: var(--ruimte-7);
    align-items: start;
}

/* Allebei in rij 1, zodat de inhoudsopgave over de volle hoogte van de tekst
   kan meelopen. Sticky werkt alleen binnen zijn eigen rij. */
.artikel-tekst { grid-column: 1; grid-row: 1; }
.inhoud {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--ruimte-5);

    /* Tegen de rechterrand en op zijn eigen maat: de baan is alles wat er
       overblijft, maar een inhoudsopgave van achthonderd pixels is geen
       inhoudsopgave meer. */
    justify-self: end;
    width: min(22rem, 100%);

    /* Nooit hoger dan het venster: een meelopende lijst die langer is dan het
       scherm valt onderaan weg, en het stuk dat wegvalt is nergens meer te
       bereiken. De verwerkersovereenkomst liet dat zien. Te lang scrolt hij
       zelf, zonder de pagina mee te nemen. */
    max-height: calc(100dvh - var(--ruimte-5) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.inhoud {
    background: var(--kist-vlak);
    border: 1px solid var(--kist-rand);
    border-radius: var(--kist-radius);
    padding: var(--ruimte-4);
}

.inhoud h2 {
    font-size: var(--tekst-s);
    font-family: var(--lettertype);
    font-weight: var(--gewicht-vet);
    color: var(--tekst-zacht);
    margin-bottom: var(--ruimte-3);
}

.inhoud ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Eén kolom zo breed als het vak. Zonder deze regel groeit de kolom mee
       met de langste regel zodra het vak zelf scrolt, en loopt die regel
       rechts het vak uit in plaats van af te breken. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ruimte-2);
    font-size: var(--tekst-s);
}

.inhoud a { color: var(--tekst-zacht); text-decoration: none; hyphens: auto; overflow-wrap: break-word; }
.inhoud a:hover { color: var(--accent); text-decoration: underline; }

/* Ruim los van wat ervoor kwam, strak tegen zijn eigen tekst aan; de 16px
   eronder blijft daarom staan. Zie --kop-ruimte. */
.artikel-sectie { margin-top: var(--kop-ruimte); }
.artikel-sectie:first-child { margin-top: 0; }

.artikel-sectie h2 {
    font-size: var(--kop-sectie);
    letter-spacing: -0.025em;
    max-width: 22ch;
    margin-bottom: var(--ruimte-4);
}

/* Een maat groter dan de rest van de site, en meegroeiend met de kolom.
 *
 * "De breedte bepaalt de lettergrootte, niet andersom" stond hier al, en sinds
 * 14 september 2026 wordt die regel ook echt gevolgd: de kolom loopt tot 60rem
 * in plaats van 46, dus de letter loopt mee van 20 naar 24px. Op allebei de
 * uitersten komt de regel op ongeveer tweeënzeventig tekens uit, en dat is de
 * band waar een lange tekst in hoort.
 *
 * Met een vaste 20px in een kolom van 60rem zouden het er ruim negentig zijn,
 * en dan leest een kwartaalstuk als een spreadsheet. */
.artikel-tekst p,
.artikel-lijst li {
    font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem);
    line-height: 1.7;
    color: var(--tekst-zacht);
}

.artikel-tekst p + p,
.artikel-lijst + p,
.marktdag + p { margin-top: var(--alinea-ruimte); }

.artikel-lijst {
    list-style: none;
    margin: var(--alinea-ruimte) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.artikel-lijst li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--ruimte-3);
    align-items: start;
    padding-block: var(--ruimte-3);
    border-top: 1px solid var(--rand);
}

.artikel-lijst li:last-child { border-bottom: 1px solid var(--rand); }

.artikel-sectie .marktdag { margin-top: var(--alinea-ruimte); }

/* De vergelijkingstabel. Staat alleen op /wat-kost-een-kassasysteem-marktkraam:
 * negen bedragen naast elkaar is het hele punt van dat stuk, en er is geen
 * andere vorm waarin een lezer twee rijen echt vergelijkt.
 *
 * Kleiner dan de lopende tekst, met opzet. De tekstmaat van dit sjabloon loopt
 * tot 24px, en vier kolommen van 24px passen op geen enkel scherm dat een
 * koopman bij zich heeft. Een tabel wordt ook niet gelezen zoals een alinea:
 * je zoekt één cel en vergelijkt hem met de cel eronder.
 *
 * De wikkel schuift horizontaal en is met tabindex bereikbaar vanaf het
 * toetsenbord, want een baan die je alleen met een muis kunt verschuiven is
 * voor de helft van de lezers geen baan. */
.artikel-tabel {
    margin-top: var(--alinea-ruimte);
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: var(--kist-radius-s);
}

.artikel-tabel:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.artikel-tabel table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tekst-m);
    line-height: 1.5;
    text-align: left;
}

.artikel-tabel th,
.artikel-tabel td {
    padding: var(--ruimte-3);
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}

.artikel-tabel tbody tr:last-child th,
.artikel-tabel tbody tr:last-child td { border-bottom: 0; }

.artikel-tabel thead th {
    font-size: var(--tekst-s);
    font-weight: var(--gewicht-vet);
    color: var(--tekst-zacht);
    background: var(--kist-vlak);
    white-space: nowrap;
}

/* De naam van de aanbieder draagt de rij: hij mag niet afbreken en hij hoort
   donkerder te zijn dan de cellen ernaast. */
.artikel-tabel tbody th {
    font-weight: var(--gewicht-medium);
    color: var(--tekst);
    white-space: nowrap;
}

.artikel-tabel td { color: var(--tekst-zacht); }

/* De eigen rij. Niet uitgelicht om te verkopen, wel herkenbaar: een
   vergelijking waarin de schrijver tussen de anderen wegvalt, laat de lezer
   zoeken naar de enige rij waar hij zeker iets van wil weten. */
.artikel-tabel tbody tr.eigen th,
.artikel-tabel tbody tr.eigen td { background: var(--accent-zacht); }

/* De regel die onder elk stuk in deze pijler hoort. Ingesprongen en met een
   lijn erboven: het is geen alinea van het stuk maar een aantekening erbij. */
.geen-advies {
    margin-top: var(--ruimte-8);
    padding-top: var(--ruimte-5);
    border-top: 1px solid var(--rand);
    max-width: 46rem;
}

.geen-advies p { color: var(--tekst-zacht); }
.geen-advies p + p { margin-top: var(--ruimte-3); }
.geen-advies strong { color: var(--tekst); font-weight: var(--gewicht-medium); }

@media (max-width: 62rem) {
    .artikel-lijf { grid-template-columns: minmax(0, 1fr); }
    .artikel-tekst { grid-column: 1; grid-row: 2; max-width: none; }

    /* Boven de tekst in plaats van ernaast, en weer over de volle breedte: de
       rechtse uitlijning en de eigen maat horen bij de kolomstand. Zonder deze
       twee regels stond de inhoudsopgave op een telefoon ingesprongen tegen de
       rechterrand, met een lege strook links ernaast. */
    .inhoud {
        grid-column: 1;
        grid-row: 1;
        position: static;
        justify-self: stretch;
        width: auto;
        max-height: none;
        overflow-y: visible;
    }

    /* Even specifiek als de regel bovenaan die de hoogte zet, anders wint
       die en wordt de lijst op een telefoon alsnog afgekapt. */
    .js-kop .inhoud { max-height: none; }
}

/* De verwijzingen naar de andere stukken van de pijler. Staat boven de
   adviesregel: eerst waar je verder kunt lezen, dan het voorbehoud. */
.serie {
    margin-top: var(--ruimte-8);
    padding: var(--ruimte-5);
    border: 1px solid var(--kist-rand);
    border-radius: var(--kist-radius);
    background: var(--kist-vlak);
    max-width: 46rem;
}

.serie h2 {
    font-size: var(--tekst-s);
    font-family: var(--lettertype);
    font-weight: var(--gewicht-vet);
    color: var(--tekst-zacht);
    margin-bottom: var(--ruimte-3);
}

.serie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.serie li + li { border-top: 1px solid var(--rand); }

.serie a {
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
    padding-block: var(--ruimte-3);
    text-decoration: none;
    color: var(--tekst);
}

.serie a:hover { color: var(--accent); }
.serie a svg { flex: none; }

/* De uitlegstukken in de voetregel. De enige site-brede ingang naar die pijler
   zolang de hub er niet is; zonder dit blok linkt geen enkele pagina ernaartoe
   en zijn het verweesde adressen. */
.voetuitleg-kop {
    font-weight: var(--gewicht-vet);
    color: var(--tekst);
    margin-bottom: var(--ruimte-1);
}

.voetuitleg ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    max-width: 34ch;
}

.voetuitleg .voetlink { text-decoration: none; }
.voetuitleg .voetlink:hover { text-decoration: underline; }

/* Meer dan één vervolglink onder een moment. Naast elkaar als het past, anders
   onder elkaar: twee losse inline-links zonder deze wikkel plakken aan elkaar
   vast zodra ze op één regel belanden. */
.verder-groep {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-2) var(--ruimte-5);
    margin-top: var(--ruimte-4);
}

.verder-groep .verder { margin-top: 0; }

.marktdag + .verder { margin-top: var(--ruimte-5); }

/* ---- Juridische pagina's ---------------------------------------------- */

/* De bedrijfsgegevens. Een definitielijst en geen tabel: het zijn paren, geen
   rijen met kolommen, en zo leest een schermlezer ze ook. */
.gegevens {
    margin: var(--ruimte-4) 0 0;
    display: grid;
    gap: 0;
}

.gegevens-regel {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--ruimte-3);
    padding-block: var(--ruimte-3);
    border-top: 1px solid var(--rand);
}

.gegevens-regel:last-child { border-bottom: 1px solid var(--rand); }

.gegevens dt { font-weight: var(--gewicht-vet); color: var(--tekst-zacht); }
.gegevens dd { margin: 0; color: var(--tekst); }

/* Wat nog moet komen, staat er zichtbaar als "volgt" en niet als lege regel:
   dezelfde afspraak als de gemarkeerde lege plek bij een ontbrekende foto. */
.gegevens-volgt { color: var(--tekst-zacht); font-style: italic; }

/* De juridische links onderaan de voetregel, over de volle breedte. */
.voetjuridisch {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte-2);
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--rand);
}

@media (max-width: 44rem) {
    .gegevens-regel { grid-template-columns: 1fr; gap: 0; }
}

/* ---- De toestemmingsbalk ---------------------------------------------- */

/* Onderaan het scherm, over de volle breedte, met een rand erboven. Geen
   overlay die de pagina blokkeert: je mag de site lezen zonder eerst een keuze
   te maken, en de balk blijft staan tot je hem beantwoordt. */
.toestemming {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ruimte-3) var(--ruimte-6);
    align-items: center;
    padding: var(--ruimte-4) var(--ruimte-5);
    background: var(--kist-vlak);
    border-top: 1px solid var(--kist-rand);
}

.toestemming-tekst p { max-width: 78ch; }
.toestemming-tekst p + p { margin-top: var(--ruimte-2); color: var(--tekst-zacht); }
.toestemming-tekst strong { color: var(--tekst); font-weight: var(--gewicht-medium); }

.toestemming-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-3);
}

/* Weigeren en accepteren staan naast elkaar, even groot, op dezelfde plek. Een
   weigerknop die kleiner of vager is dan de andere is geen vrije keuze. */
.toestemming-knoppen .knop { min-width: 9rem; justify-content: center; }

.knop--stil {
    background: transparent;
    color: var(--tekst);
    border: 1px solid var(--kist-rand);
}

.knop--stil:hover {
    background: var(--vlak-rustig);
    color: var(--tekst);
}

.toestemming-voet {
    grid-column: 1 / -1;
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

@media (max-width: 44rem) {
    .toestemming { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Het aanbodvenster ------------------------------------------------- */

/* Het aanbod voor de eerste tien kramen, als venster dat na dertig seconden
 * komt. Zie partials/aanbod.php voor waarom dit een venster is en niet meer de
 * balk die hier tot 12 september 2026 stond — inclusief het besluit van de
 * eigenaar dat tegen PRODUCT.md in gaat.
 *
 * Een echt <dialog>: de browser zet hem in de bovenlaag en centreert hem, dus
 * er is geen z-index en geen eigen plaatsing nodig. Wat hier staat is alleen
 * hoe hij eruitziet.                                                          */
.aanbodvenster {
    width: min(30rem, calc(100% - var(--ruimte-6)));
    max-height: calc(100dvh - var(--ruimte-6));
    padding: var(--ruimte-6);
    border: none;
    border-radius: var(--kist-radius);
    background: var(--vlak-rustig);
    color: var(--tekst);

    /* Het ronde teken steekt over de hoek heen en mag dus niet afgesneden
       worden. Chrome geeft een dialog uit zichzelf overflow:auto. */
    overflow: visible;
}

.aanbodvenster::backdrop { background: var(--waas); }

/* Het teken over de hoek, naar de referentie van de eigenaar. De hoofdkleur
   mag hier een vlak vullen: dat is de merkkleur en niet de warme, en de warme
   blijft van de prijs. #2e3324 erop haalt 9,5:1. */
.aanbodvenster-teken {
    position: absolute;
    top: calc(var(--ruimte-5) * -1);
    inset-inline-start: calc(var(--ruimte-5) * -1);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--merk-lichtgroen);
    color: var(--groen-900);
    display: grid;
    place-items: center;
}

.aanbodvenster-teken svg { width: 2.125rem; height: 2.125rem; }

/* De sluitknop in de hoek, met een raakvlak van 48px dat buiten de knop om
   doorloopt: dit is het enige wat iemand hier per se moet kunnen raken. */
.aanbodvenster-sluit {
    position: absolute;
    top: var(--ruimte-2);
    inset-inline-end: var(--ruimte-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--raakvlak);
    min-height: var(--raakvlak);
    padding: 0;
    border: 0;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--tekst-zacht);
    cursor: pointer;
}

.aanbodvenster-sluit:hover {
    background: color-mix(in oklab, var(--tekst) 10%, transparent);
    color: var(--tekst);
}

.aanbodvenster-lijf {
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-3);
    /* Onder het teken door en de sluitknop voorbij: het teken steekt links de
       hoek uit, de knop zit rechtsboven. */
    padding-top: var(--ruimte-5);
}

.aanbodvenster-kop { font-size: var(--kop-m); max-width: 22ch; }
.aanbodvenster-tekst { color: var(--tekst-zacht); }
.aanbodvenster .knop-regel { margin-top: var(--ruimte-2); }

/* Eén beweging bij het openen en verder niets. Vanaf een al zichtbare stand,
   zoals elke andere beweging op deze site: hij komt van dichtbij omhoog in
   plaats van uit het niets op te poppen. */
@media (prefers-reduced-motion: no-preference) {
    .aanbodvenster[open] {
        animation: aanbod-open 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .aanbodvenster[open]::backdrop {
        animation: aanbod-glas 280ms ease;
    }
}

@keyframes aanbod-open {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes aanbod-glas {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Op een smal scherm zou het teken half buiten beeld vallen: het venster staat
   daar zelf al bijna tegen de rand. Het schuift dus naar binnen en wordt
   kleiner. */
@media (max-width: 30rem) {
    .aanbodvenster { padding: var(--ruimte-5); }

    .aanbodvenster-teken {
        position: static;
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: var(--ruimte-4);
    }

    .aanbodvenster-teken svg { width: 1.625rem; height: 1.625rem; }
    .aanbodvenster-lijf { padding-top: 0; }
}

/* Het aanbod op de prijzenpagina. Dit is waar het aanbod zelf staat, en het
   enige vlak dat er nog het merkgroen voor krijgt: de balk bovenaan is een
   melding, dit is het ding. Wie op "Hoe dat zit" klikt herkent de zin, niet de
   kleur — die zin is op allebei de plekken woord voor woord dezelfde. */
/* Twee kolommen in dezelfde 5/7-verhouding die de secties op de site gebruiken.
   In één kolom bleef de rechterhelft van de kist leeg, en dat is precies het
   gat waar de eigenaar op de leespagina's al over viel. */
.aanbodkist {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-5) var(--ruimte-7);
    align-items: start;
    padding: var(--ruimte-6);
}

.aanbodkop { font-size: var(--kop-sectie); letter-spacing: -0.025em; }
.aanbodlead { margin-top: var(--ruimte-3); font-size: var(--kop-m); }
.aanbodkist-lijf > p + p { margin-top: var(--alinea-ruimte); }
.aanbodkist .knop-regel { margin-top: var(--ruimte-5); }
.aanbodkist .knop-bijschrift { max-width: 34ch; }

@media (max-width: 62rem) {
    .aanbodkist { grid-template-columns: minmax(0, 1fr); }
}

/* Een link op het merkgroen krijgt de inkt van dat vlak, met een streep eronder
  , niet de accentkleur. Dat is dezelfde val als bij de knop: in de donkere
   stand is --accent vrijwel hetzelfde lichtgroen als de kist, en dan haalt een
   link 1,7:1. Met de eigen inkt is het 9,5:1 en doet de onderstreping het werk
   dat kleur niet mag doen.

   Sinds 11 september 2026 geldt dit alleen nog voor de kop-kist. */
.kist--groen a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kist--groen a:hover { text-decoration-thickness: 2px; }

/* ---- Contact en het formulier ----------------------------------------- */

/* De insteek uit het voorbeeld: bereikbaarheid links, formulier rechts. De
   verhouding is 5 : 7, dezelfde die de tweekolomsecties op de site gebruiken,
   zodat het formulier de bredere helft krijgt zonder een eigen maat te worden. */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ruimte-6) var(--ruimte-7);
    align-items: start;
    padding-bottom: var(--ruimte-8);
}

.contact-lijst { display: grid; gap: 0; margin-top: var(--ruimte-5); }

.contact-regel {
    padding-block: var(--ruimte-4);
    border-top: 1px solid var(--rand);
}

.contact-regel:last-child { border-bottom: 1px solid var(--rand); }
.contact-regel dt { font-weight: var(--gewicht-vet); }
.contact-regel dd { margin: var(--ruimte-1) 0 0; color: var(--tekst-zacht); max-width: 42ch; }

.contact-noot {
    margin-top: var(--ruimte-5);
    color: var(--tekst-zacht);
    max-width: 42ch;
}

/* Het formulier ligt in een kist. Dat is niet alleen vorm: een formulier is een
   ding dat je bedient, en op deze site is een kist precies dat. */
.formulier,
.contact-gelukt {
    display: grid;
    gap: var(--ruimte-5);
    padding: var(--ruimte-6);
    background: var(--kist-vlak);
    border: 1px solid var(--kist-rand);
    border-radius: var(--kist-radius);
}

.veld { display: grid; gap: var(--ruimte-2); }

.veld label {
    font-weight: var(--gewicht-medium);
    color: var(--tekst);
}

/* 16px is geen smaak maar een eis: onder die maat zoomt iOS het hele scherm in
   zodra je een veld aantikt, en dan staat de bezoeker met een verschoven pagina
   te typen. --tekst-m is 17px en zit daar veilig boven. */
.veld input,
.veld textarea {
    font-family: var(--lettertype);
    font-size: var(--tekst-m);
    line-height: var(--regelhoogte);
    color: var(--tekst);
    background: var(--invoer);
    border: 1px solid var(--rand-sterk);
    border-radius: var(--radius-m);
    padding: var(--ruimte-3) var(--ruimte-4);
    min-height: var(--raakvlak);
    width: 100%;
}

.veld textarea { resize: vertical; min-height: 9rem; }

.veld input:focus-visible,
.veld textarea:focus-visible { border-color: var(--focusring); }

.veld input[aria-invalid="true"],
.veld textarea[aria-invalid="true"] { border-color: var(--fout); }

.veld-fout { color: var(--fout); font-size: var(--tekst-s); }

.veld-fout--blok {
    padding: var(--ruimte-3) var(--ruimte-4);
    background: var(--fout-zacht);
    border-radius: var(--radius-m);
    font-size: var(--tekst-m);
}

/* De honeypot. Uit beeld gezet en niet op display:none, want een bot die op
   verborgen velden let slaat display:none over en vult dit dan juist niet in. Zo blijft hij een
   val in plaats van een aanwijzing. */
.formulier-val {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulier-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte-3) var(--ruimte-5);
}

.formulier-noot {
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
    max-width: 34ch;
}

.contact-gelukt h2 { font-size: var(--kop-m); }
.contact-gelukt p { color: var(--tekst-zacht); max-width: 46ch; }
.contact-gelukt .contact-noot { margin-top: 0; }

@media (max-width: 62rem) {
    .contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 44rem) {
    .formulier,
    .contact-gelukt { padding: var(--ruimte-5); }
}

/* ---- De hub van een pijler -------------------------------------------- */

/* De lijst met stukken op /uitleg/administratie-marktkraam. Twee kolommen op
   een breed scherm, want acht titels onder elkaar is een kolom van een meter.
   Geen kisten: dit zijn ingangen naar tekst, geen dingen die getoond worden. */
.hublijst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0 var(--ruimte-7);
    margin-top: var(--ruimte-6);
}

.hublijst a {
    display: grid;
    gap: var(--ruimte-1);
    padding-block: var(--ruimte-4);
    border-top: 1px solid var(--rand);
    text-decoration: none;
    color: var(--tekst);
}

.hublijst-kop { font-weight: var(--gewicht-vet); text-wrap: balance; }


.hublijst a:hover .hublijst-kop { color: var(--link); text-decoration: underline; }