/* michielheijmans.com — designsysteem.

   Bron: design_handoff_michielheijmans/README.md plus de negen ontwerpbestanden
   in designs/. Die zijn leidend voor structuur en styling; de live site is
   alleen leidend voor de tekst. Alle waarden hieronder komen letterlijk uit de
   handoff of zijn er rechtstreeks uit geteld — er is niets bij verzonnen.

   De ontwerpen zijn getekend op 1180px breed. Afgesproken is een max-width van
   1440px; de opgegeven px-maten blijven daarbij staan, alleen de contentkolom
   is breder. Leesbaarheid is in de ontwerpen met ch-waarden begrensd, niet met
   de containerbreedte, dus dat blijft kloppen.

   Zelf-gehoste fonts: zie fonts.css. */

:root {
    /* ─── Kleuren ───
       Uit de tokentabel van de handoff. Geel is de vlakkleur voor CTA's; als
       TEKST wordt altijd het donkere oker gebruikt, want #FFCC00 op licht
       haalt geen enkele leesbaarheidsnorm. */
    --zwart: #111111;        /* body-tekst, donkere secties, knop op geel */
    --papier: #faf8f3;       /* afwisselende sectie-achtergrond */
    --wit: #ffffff;          /* basis, en kaarten op papier */
    --goud: #ffcc00;         /* CTA-knoppen, CTA-secties, accentstreepjes */
    /* Was #a37f00. Op papier gaf dat 3,5:1 en de kicker is 13px hoofdletters,
       dus kleine tekst: die heeft 4,5:1 nodig. Deze tint haalt 4,5:1 op papier
       en 4,8:1 op wit, en is van het origineel nauwelijks te onderscheiden.
       Op zwart en donker wordt de kicker toch al door --goud overschreven. */
    --oker: #8e6e00;         /* kickers, plus-tekens in de FAQ, link-hover */
    --rand: #e5e2da;         /* kaartranden en scheidingslijnen */
    --rand-veld: #ddd8ce;    /* formuliervelden */

    --tekst: #111111;
    --intro-tekst: #444444;  /* intro-paragrafen */
    --gedempt: #555555;      /* body-secundair */
    /* Was #888888: 3,3:1 op papier, terwijl de fijne regel 13px is. */
    --fijn: #727272;         /* fine print */
    --op-zwart: #f2f2f2;     /* primaire tekst op een zwarte sectie */
    --op-zwart-zacht: #bbbbbb;

    /* Citaat en bron, nagemeten op de live site. Het ontwerp noemt #222 voor
       een citaat; de site zelf gebruikt het donkere neutraal, en dat staat er
       rustiger. De bron is dezelfde kleur op 73% dekking. */
    --citaat-tekst: #383838;
    --citaat-bron: rgba(56, 56, 56, 0.73);

    /* Nog in gebruik buiten de ontworpen pagina's. */
    --goud-hover: #f0c000;
    --goud-tekst: var(--oker);
    --kop: var(--zwart);
    --donker: var(--zwart);
    --grijs: var(--papier);
    --citaat: var(--zwart);
    --checkmark: #32cd32;
    /* Was #ee6b4e. Die tint deed drie dingen tegelijk: de schaarsteregel ("Nog
       5 plekken op 10 april"), "Uitverkocht", en de tekst én de rand van een
       formulierfout. Op wit haalde hij 3,07 en op papier 2,89, waar 4,5 nodig
       is. Bij de formulierfout telde dat dubbel: de fout wordt óók met de
       randkleur aangegeven, dus wie kleur slecht ziet miste beide signalen.
       Deze tint haalt 5,17 op wit en 4,87 op papier, en is van het origineel
       herkenbaar dezelfde kleur. De badge op /fotowolk zet er wit op; daar
       gaat het contrast mee van 3,07 naar 5,17. */
    --koraal: #c0431f;
    /* Twee wassingen van datzelfde koraal, voor een vlak waar koraal op moet
       kunnen staan in plaats van ernaast. Niet een tweede rood: het zijn
       #c0431f op wit, 8% voor het vlak en 25% voor de rand. Op --koraal-vlak
       haalt de koraaltekst 4,61 en dat is genoeg voor de 4,5 die lopende
       tekst nodig heeft; een wassing van 10% zit al op 4,48 en valt er dus
       doorheen. Voluit uitgerekende hexwaarden en geen color-mix(), want dan
       kan een browser die dat niet kent er niet stilletjes iets anders van
       maken achter een kleur die nou juist het signaal is. */
    --koraal-vlak: #faf0ed;
    --koraal-rand: #efd0c7;

    /* ─── Typografie ───
       Twee letters, allebei nieuw op 16 september 2026 in plaats van Archivo.
       Noto Serif 600 voor de koppen, Outfit voor de rest: 600 voor knoppen en
       labels, 400 voor lopende tekst. Noto Serif is een variabele letter, dus
       die 600 staat in het bestand zelf en is geen namaakvet van de browser.
       De schaal komt uit de tabel in de handoff; de clamps lopen precies
       tussen de daar genoemde mobiele en desktopmaten, zodat er nooit een
       waarde buiten dat bereik uitkomt.
       H1 34→54px · H2 24→32px · H3 22→26px. Body blijft 15,5px. */
    --font: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-kop: 'Noto Serif', Georgia, serif;
    --font-knop: var(--font);
    /* Newsreader is er alleen voor citaten. Dat lettertype staat niet in de
       handoff, maar wél op de live site, en daar staan de citaten mooier mee. */
    --font-quote: 'Newsreader', Georgia, serif;

    --h1: clamp(2.125rem, 1.661rem + 1.905vw, 3.375rem);
    --h2: clamp(1.5rem, 1.314rem + 0.762vw, 2rem);
    --h3: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem);
    --h4: 1.125rem;          /* 18px, kaartkop */
    --kicker-maat: 0.8125rem;/* 13px */
    --intro: 1.0625rem;      /* 17px */
    /* De handoff noemt 15,5px, maar die ontwerpen zijn getekend op 1180px en
       wij bouwen op 1440. Op de live site is lopende tekst 17,0 → 17,7px, en
       dat leest op onze breedte beter. Gemeten bij 390px en 1440px. */
    --body: clamp(1.063rem, 1.047rem + 0.068vw, 1.15rem);  /* 17,0 → 17,7px */
    --kaart-body: 0.90625rem;/* 14,5px */
    --fijn-maat: 0.8125rem;  /* 13px */
    --knop-maat: 1rem;       /* 16px */
    --klein: 0.9375rem;      /* 15px */
    --faq-vraag: 1rem;       /* 16px */
    /* Citaatmaat van de live site, niet van het ontwerp: die is groter en
       staat er beter. Gemeten bij 500px en 1440px: 26,8 → 33,3px. */
    --quote: clamp(1.629rem, 1.46rem + 0.689vw, 2.311rem);

    /* ─── Vormen ───
       4px voor knoppen, chips en invoervelden. 6px voor kaarten en
       afbeeldingsblokken. Geen schaduwen, geen gradients. */
    --radius-knop: 4px;
    --radius: 6px;
    --radius-beeld: 6px;
    --rand-breedte: 1px;

    /* ─── Ritme ───
       Sectiepadding uit de handoff: 72/48 voor ruime secties, 64/48 voor CTA
       en donkere secties, 40/48 voor de footer, 24/48 voor de header. Op
       smalle schermen wordt dat 48/20. */
    --max: 1440px;
    --gutter: 20px;
    --sectie: 48px;
    --sectie-cta: 48px;
    --kolom-gap: 32px;

    --r1: 0.25rem; --r2: 0.5rem; --r3: 1rem;
    --r4: 1.5rem; --r5: 2.5rem; --r6: 4rem;
}

@media (min-width: 768px) {
    :root {
        --gutter: 48px;
        --sectie: 72px;
        --sectie-cta: 64px;
        --kolom-gap: 56px;
    }
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--body);
    line-height: 1.5;
    color: var(--tekst);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

/* Koptrap uit de handoff, inclusief de opgegeven regelafstand en
   letterspatiëring. H4 is de kaartkop. */
h1, h2, h3, h4 {
    font-family: var(--font-kop);
    font-weight: 600;
    color: var(--zwart);
    margin: 0 0 var(--r3);
}
h1 { font-size: var(--h1); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--h3); line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-size: var(--h4); line-height: 1.25; }
p { margin: 0 0 var(--r3); }

a { color: inherit; }

/* ─── Toegankelijkheid ─── */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--goud); color: var(--zwart);
    padding: var(--r2) var(--r3); font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--goud-tekst); outline-offset: 2px; }
/* WCAG 2.2 · 2.4.11 Focus Not Obscured (Minimum), nieuw op niveau AA.
   Het element dat focus heeft mag niet volledig bedekt zijn door iets wat de
   auteur er zelf overheen heeft gezet. Op mobiel heeft deze site er twee: de
   infobalk onderaan en de cookiebanner. Gemeten met 45 tabstops per pagina was
   op /pauze 16 keer het gefocuste element voor de helft of meer bedekt, op
   /contact 14 keer, en op de homepage was "Plan jouw PAUZE" voor 100% weg
   achter de infobalk op het moment dat hij focus kreeg.

   Zonder scroll-padding vindt de browser dat het element in beeld staat en
   scrolt hij niet: dat het achter een vaste balk ligt, weet hij niet. De
   hoogte komt uit site.js, want de cookiebanner heeft geen vaste maat en
   verdwijnt zodra de bezoeker gekozen heeft. Op desktop mat ik nul gevallen,
   dus daar blijft het 0px en verandert er niets aan het scrollgedrag. */
html { scroll-padding-bottom: var(--vaste-balk-onder, 0px); }

/* Dezelfde afweging voor de bovenkant, en om dezelfde reden: de header is
   sticky, dus een anker landt eronder en de bezoeker ziet niets gebeuren.

   Hier stonden drie losse `scroll-margin-top: 9rem`-regels, op de koppen in
   lopende tekst, op de formulieren en op het koopblok. Die dekten 32 ankers.
   Op 15 september 2026 zijn alle ankerdoelen sitebreed nagemeten — uit
   blokken_{nl,en,de,fr}, body_html_* en beschrijving_*, aangevuld met elke
   a[href*="#"] naar het eigen pad in de gerenderde pagina — en er bleken er
   99 ongedekt: de skip-link (#inhoud op <main>, op alle 38 pagina's), 20
   sectie-ankers op blokken, 12 koopblokken in de producthero en de 29
   wandeling-{datum}-ankers. Gemeten gedrag: het element kwam op top 0 te
   staan met 109-110px header eroverheen, dus de eerste regel was onzichtbaar.

   Een vierde selectorlijst zou dat oplossen tot de volgende die er weer
   buiten valt — en twee van die 99 groepen worden door een sjabloon
   gegenereerd en staan nergens in de database. Vandaar één regel op de
   scrollcontainer: die geldt voor elk anker dat er nu is en elk anker dat er
   nog bij komt, zonder onderhoud.

   LET OP: scroll-padding-top hier en scroll-margin-top op een element tellen
   bij elkaar op. Zet je zo'n marge er toch ergens bij, dan springt dat anker
   288px in plaats van 144. De drie oude regels zijn daarom weggehaald en niet
   blijven staan.

   9rem (144px) is ruim genoeg. Gemeten in de browser op 375, 768, 1024, 1159,
   1160, 1200, 1240, 1320 en 1440px in alle vier de talen: de header is overal
   109,6px, en 109,8px in het Frans tussen 1160 en 1240 (zie de clamp bij de
   1160-grens hieronder). Hier stond eerder "127px op de breedste weergave";
   dat was de gele knop die over drie regels brak en dat doet hij sinds die
   clamp niet meer. */
html { scroll-padding-top: 9rem; }

.visueel-verborgen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ─── Kicker (het labelregeltje boven een kop) ───
   Handoff: 13px, gewicht 600, letter-spacing 0.12em, hoofdletters, in het
   donkere oker. De kleur volgt de band: oker op wit en papier, zwart op de
   gele band, geel op zwart. Die uitzonderingen staan bij de
   sectie-achtergronden verderop. */
.kicker {
    font-weight: 600;
    font-size: var(--kicker-maat);
    line-height: 1.4;
    letter-spacing: 0.12em;
    color: var(--oker);
    text-transform: uppercase;
    margin: 0 0 var(--r2);
}

/* ─── Knoppen ───
   Handoff: 15–16px, gewicht 600, radius 4px, geen schaduw. De maten komen uit
   de ontwerpen zelf: hero-CTA 16px met padding 16/32, gewone knop 14/28,
   headerknop 12/24. Hover mag alleen subtiel donkerder worden. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: var(--knop-maat);
    font-weight: 600;
    line-height: 1.2;
    padding: 16px 32px;
    border-radius: var(--radius-knop);
    border: 1px solid transparent;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Geel is de primaire actie op wit, papier en zwart. */
.btn--cta { background: var(--goud); color: var(--zwart); }
.btn--cta:hover { background: var(--goud-hover); }
/* Zwart met witte tekst is de primaire actie ÓP de gele band. */
.btn--primary { background: var(--zwart); color: var(--wit); }
.btn--primary:hover { background: #2a2a2a; }
/* Wit met zwarte tekst is daar de secundaire actie. */
.btn--secondary { background: var(--wit); color: var(--zwart); border-color: var(--wit); }
.btn--secondary:hover { background: #f2f2f2; }
.btn--klein {
    font-size: 0.90625rem; /* 14,5px, zoals de headerknop */
    padding: 12px 24px;
}

/* Tekstlink met onderstreping, zoals "Hoe werkt het?" naast de hero-CTA */
.tekstlink {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.tekstlink:hover { text-decoration-color: var(--goud); }

/* Pijl-link uit de kaarten: "Naar PAUZE →" */
.pijllink {
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: var(--klein);
}
.pijllink::after { content: " \2192"; }
.pijllink:hover { text-decoration-color: var(--goud); }

/* Een link die op zichzelf onder een blok staat, niet middenin een alinea.
   De kleine, aangestreepte variant hierboven verdwijnt daar: hij leest als een
   voetnoot terwijl het de enige doorstap van dat blok is. Michiel op
   15 september 2026 over de FAQ-link: "die rare kleine linkjes onder bepaalde
   blokken moet je echt voorkomen (…) maak een nette link, met meer witruimte."

   Geen knop: het is een verwijzing naar een andere pagina en geen actie, en een
   knop over de volle breedte mag op desktop sowieso niet. Wel een echt
   aanklikgebied — 44px hoog is de ondergrens voor een vinger. */
.pijllink--groot {
    /* Bodygrootte en niet de kleine kaartmaat: op 14,5px blijft het het
       voetnootje waar Michiel vanaf wilde, ook met ruimte eromheen. */
    font-size: var(--body);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 12px 0 7px;

    /* Eén doorlopende streep, en dat is een harde huisregel: nooit een
       onderbroken streep onder iets dat één link is. `text-decoration` streept
       de tekst en de pijl apart en laat de tussenruimte wit — in een inline-flex
       is die gap geen tekst, dus er valt niets te onderstrepen. Een rand loopt
       wél onder het hele element door, gap incluis. */
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.pijllink--groot::after {
    /* De pijl schuift mee bij hover, zodat de link zich als doorstap gedraagt
       en niet als een streepje tekst. */
    content: "\2192";
    transition: transform .15s ease;
}
.pijllink--groot:hover { border-bottom-color: var(--goud); }
.pijllink--groot:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .pijllink--groot::after { transition: none; }
    .pijllink--groot:hover::after { transform: none; }
}

/* De ruimte eromheen is het halve verzoek: de link stond tegen de laatste vraag
   aan geplakt en las daardoor als onderdeel van dat antwoord. */
.faq-meer { margin: var(--r5) 0 0; }
.faq-met-beeld .faq-meer { clear: both; }

/* ─── Aankondigingsbalk ─── */
.aankondiging {
    background: var(--zwart);
    color: var(--wit);
    font-size: var(--klein);
    text-align: center;
    padding: 0.7rem var(--gutter);
    position: relative;
}
.aankondiging a { color: var(--wit); text-decoration: none; text-underline-offset: 3px; }
/* De hele balk is de link: het uitgerekte ::after vangt de klik over de volle
   breedte. De tekst is zelf niet meer standaard onderstreept — dat staat nu
   in de tekst zelf via <u>, zie eBeperkt() in helpers.php. */
.aankondiging__link::after { content: ""; position: absolute; inset: 0; }
.aankondiging__link:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; }
/* De sluitknop moet bovenop het uitgerekte vlak liggen, anders vangt de link
   die klik af en navigeert de balk weg in plaats van dicht te gaan. */
.aankondiging__sluit {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--wit);
    font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem;
    z-index: 1;
}
/* Ruimte voor de sluitknop, zodat een lange aftelling er niet onder schuift. */
.aankondiging { padding-right: 2.5rem; }
.aankondiging__sluit:hover { color: var(--goud); }

/* ─── Header ─── */
.site-header {
    background: var(--papier);
    border-bottom: 1px solid transparent;
    position: sticky; top: 0; z-index: 50;
}
.site-header--sticky {
    background: rgba(250, 248, 243, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--rand);
}
/* Handoff: padding 24/48, navigatielinks 15px in #333 met gap 28, en dan de
   gele knop. Het beeldmerk blijft staan op de plek waar het ontwerp de
   wordmark tekende. */
.site-header__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px var(--gutter);
    display: flex;
    align-items: center;
    gap: 28px;
}
.site-header__logo { flex-shrink: 0; text-decoration: none; }
.site-header__logo img { width: 190px; height: auto; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.site-nav__lijst {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 28px;
}
.site-nav__item { position: relative; display: flex; align-items: center; gap: 0.2rem; }
.site-nav__item > a {
    text-decoration: none; font-size: 0.9375rem; color: #333;
    padding-bottom: 2px;
}
.site-nav__item > a:hover { color: var(--oker); }
/* Actief item: 600, zwart, met een gele onderrand van 2px. */
.site-nav__item--actief > a,
.site-nav__item > a[aria-current="page"] {
    font-weight: 600; color: var(--zwart);
    border-bottom: 2px solid var(--goud);
}

/* Het driehoekje was 8 bij 12 pixels: de enige regel die axe op élke pagina
   afkeurde (WCAG 2.5.8 vraagt 24 bij 24). Het blijft optisch even klein, het
   klikvlak groeit eromheen. Datzelfde geldt voor de zoek- en taalknop
   hieronder, die 20 bij 20 en 55 bij 15 waren. */
.site-nav__toggle {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: 0.7em; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; min-height: 24px;
}
.site-nav__sub {
    display: none; position: absolute; top: 100%; left: -0.75rem;
    min-width: 13rem; list-style: none; margin: 0; padding: var(--r2) 0;
    background: var(--wit);
    border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    z-index: 60;
}
.site-nav__item--open .site-nav__sub { display: block; }
.site-nav__sub a { display: block; padding: 0.45rem 1rem; text-decoration: none; font-size: var(--klein); }
.site-nav__sub a:hover { background: var(--papier); }

/* Vanaf desktopbreedte ook uitklappen op hover/focus, naast de klik-toggle
   (die blijft nodig voor toetsenbord en touch-schermen zonder hover). Zelfde
   grens als de hamburger hieronder: dit werkt alleen als de volledige
   navigatie ook echt getoond wordt. Verandert die grens, dan deze mee. */
@media (min-width: 1160px) {
    .site-nav__item--heeft-sub:hover .site-nav__sub,
    .site-nav__item--heeft-sub:focus-within .site-nav__sub {
        display: block;
    }

    /* Vlak boven de grens is de balk krap, en dat betaalde de gele knop.
       Nagemeten op 14 september 2026 op 1160px, alle vier de talen: de knop
       brak daar over drie regels en de header werd 127px in plaats van 109px.
       Niet alleen in het Frans — Nederlands, Engels en Duits deden het tot
       1188px net zo goed, het Frans alleen over een veel bredere band
       (1160–1233). Twee regels kost niets: de header blijft dan 109,8px,
       want het logo bepaalt de hoogte. Drie regels kost 17px.

       Waarom dit hier staat en niet op de knop zelf: de knop kan zichzelf
       niet redden. Hij is het enige item in .site-nav dat kan krimpen (de
       menulijst staat al op zijn min-content), dus vangt hij het hele tekort
       op. Maakt hij zichzelf smaller — minder padding, kleiner lettertype —
       dan krimpt zijn flex-basis mee en deelt flexbox hem naar rato juist
       mínder ruimte toe. Gemeten: padding 24→16px bracht het Frans van 107px
       naar 91px, en 24→12px naar 83px. Het werd er dus slechter van. De
       ruimte moet uit de balk komen, niet uit de knop.

       Vandaar dat het ritme meebuigt: 18px op 1160, terug op de 28px uit het
       ontwerp vanaf 1320. Vloeiend, zodat er geen tweede grens bijkomt die
       iemand later moet onthouden. Resultaat: nl/en/de staan vanaf 1160 op
       één regel, het Frans tot 1240 op twee (header blijft 109,8px) en vanaf
       1250 op één. Op 1160, het krapste punt, houdt het Frans 31px over tot
       de volgende breuk. Boven 1320 verandert er niets.

       Raak je de 1159/1160-grens hierboven aan, dan hoort deze mee. */
    .site-header__inner,
    .site-nav,
    .site-nav__lijst {
        gap: clamp(18px, 6.25vw - 54.5px, 28px);
    }
    .site-header__cta {
        padding-left: clamp(18px, 3.75vw - 25.5px, 24px);
        padding-right: clamp(18px, 3.75vw - 25.5px, 24px);
    }
}

.taal-wissel__knop {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.9375rem; font-family: var(--font);
    min-height: 24px;
}
.taal-wissel__code { font-size: var(--klein); }
.taal-wissel__lijst { min-width: 10rem; }
.taal-wissel__lijst a { display: flex; align-items: center; gap: 0.5rem; }

.hamburger {
    display: none; margin-left: auto;
    flex-direction: column; justify-content: space-between;
    width: 30px; height: 14px; padding: 0;
    background: none; border: none; cursor: pointer;
}
.hamburger span { display: block; height: 2px; width: 100%; background: currentColor; }

/* DERDE WAARDE VOOR DEZE GRENS: 899 → 1024 → 1160. Lees dit voor je hem
   aanscherpt, want hij is nu twee keer te krap gebleken.

   De volledige balk (logo + zes navigatie-items + zoek- en taalknop + gele
   knop) past niet in een vast getal, want hoeveel hij nodig heeft hangt van de
   taal af. Nagemeten op 14 september 2026, per taal de kleinste breedte waarbij
   niets meer uitsteekt: Duits 1104, Nederlands 1120, Engels 1128, Frans 1152.
   Op 1024px stak hij 79 tot 126px uit, afhankelijk van de taal — op iPad
   liggend dus, en op elke pagina, niet alleen de workshops.

   1160 is het Franse maximum plus een kleine marge. Ruimer dan strikt nodig en
   met opzet: een langere vertaling of een extra menu-item schuift dat getal
   omhoog, en dan valt de gele knop weer half van de pagina. Wie hem krapper
   wil, moet eerst alle vier de talen nameten — niet alleen het Nederlands.

   Onder deze grens verliezen we niets: tot 1023 stond de hamburger er toch al.

   Dezelfde grens staat op drie andere plekken, en die horen mee te bewegen:
   het uitklappen op hover hierboven, het meebuigende balkritme dat daar in
   hetzelfde blok staat, en het zoekpaneel onderaan dit bestand. Alle vier
   horen bij dezelfde vraag: staat de volledige navigatie er? */
@media (max-width: 1159px) {
    .hamburger { display: flex; }
    .site-header__inner { position: relative; }
    .site-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: var(--r3);
        background: var(--wit);
        border-top: 1px solid var(--rand);
        padding: var(--r4) var(--gutter);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    }
    .site-nav--open { display: flex; }
    .site-nav__lijst { flex-direction: column; align-items: flex-start; gap: var(--r3); }
    /* Label + toggle blijven op hun regel; het submenu breekt via flex-basis
       naar een eigen volle-breedte regel eronder in plaats van ernaast. */
    .site-nav__item { flex-wrap: wrap; }
    .site-nav__sub { position: static; flex: 1 0 100%; box-shadow: none; border: none; padding: var(--r2) 0 0 var(--r3); }
    .site-header__cta { width: 100%; }
}

/* ─── Secties ───
   Handoff: sectiepadding 72px boven en onder voor ruime secties, 64px voor de
   CTA en donkere secties, 48px links en rechts. Op smalle schermen 48px 20px.
   Geen minimumhoogte: een sectie is zo hoog als zijn inhoud.

   De contentkolom loopt tot 1440px en staat daarboven gecentreerd. */
.blok__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--sectie) var(--gutter);
}
/* De gele CTA-band en de zwarte secties krijgen de compactere maat. */
.blok--goud .blok__inner,
.blok--zwart .blok__inner { padding-block: var(--sectie-cta); }

/* Sectie-achtergronden. De live site wisselt bewust af tussen wit, warm
   papier, zwart en goud; dat ritme is een groot deel van hoe de pagina
   oogt. De themanamen van Squarespace vertalen 1-op-1:
   bright-inverse → wit · light-bold/leeg → papier · black → zwart ·
   bright → goud. */
.blok--wit { background: var(--wit); }
.blok--papier { background: var(--papier); }
.blok--grijs { background: var(--grijs); }

/* Zwart is in de ontwerpen gereserveerd voor ADDITIEVE content: het
   "Over Michiel"-blok, media en boeken, een citaat. Maximaal één zwarte sectie
   per pagina. Tekst daarop is #F2F2F2, secundaire tekst #BBB. */
.blok--zwart { background: var(--zwart); color: var(--op-zwart); }
.blok--zwart h1, .blok--zwart h2, .blok--zwart h3, .blok--zwart h4 { color: var(--op-zwart); }
.blok--zwart p { color: var(--op-zwart); }
/* .sqsrte-small zat hier ook bij, maar krijgt zijn kleur op een zwarte band
   verderop al (samen met .blok--donker), en die regel staat later. */
.blok--zwart .fijn { color: var(--op-zwart-zacht); }
.blok--zwart .kicker { color: var(--goud); }
/* Nadruk op zwart is geel: zo zet het ontwerp de productnaam neer. */
.blok--zwart strong, .blok--zwart b { color: var(--goud); }
/* Zelfde afbakening als bij `.content a` verderop: een knop op een zwarte band
   bepaalt zijn eigen opmaak. */
.blok--zwart .content a:where(:not([class])) { text-decoration-color: var(--goud); }
.blok--zwart .content a:where(:not([class])):hover { background: var(--goud); color: var(--zwart); }
.blok--zwart .btn--secondary { color: var(--wit); border-color: var(--wit); }
.blok--zwart .btn--secondary:hover { background: var(--wit); color: var(--zwart); }

/* Geel is in de ontwerpen gereserveerd voor de CALL-TO-ACTION: de band direct
   boven de footer. Elke gouden accentkleur is daar onzichtbaar, dus alles
   wordt zwart. */
.blok--goud { background: var(--goud); }
/* Op geel is de kicker zwart, niet oker: oker op geel leest niet. */
.blok--goud .kicker { color: var(--zwart); font-weight: 700; }
.blok--goud .content a:where(:not([class])) { text-decoration-color: var(--zwart); }
.blok--goud .content a:where(:not([class])):hover { background: var(--zwart); color: var(--goud); }
.blok--goud .btn--cta { background: var(--zwart); color: var(--wit); }
.blok--goud .btn--cta:hover { background: #2a2a2a; }

/* Donkergrijs (Squarespace-thema "dark") — subtieler dan volledig zwart. */
.blok--donker { background: var(--donker); color: var(--wit); }
.blok--donker h1, .blok--donker h2, .blok--donker h3, .blok--donker h4 { color: var(--wit); }
.blok--donker .kicker { color: var(--goud); }

/* Gecentreerde sectie: op de live site staat de tekstkolom regelmatig
   midden op het grid (bijvoorbeeld kolom 8 t/m 19 van de 26). */
.blok--midden .content, .blok--midden .blok__tekst { margin-inline: auto; }

/* Bredere tekstkolommen voor secties die op de bron over meer dan de helft
   van het grid lopen. */
.blok--breed .content { max-width: 86ch; }
.blok--vol .content { max-width: none; }

/* ─── Sectieraster ───
   De bron legt elk onderdeel van een sectie neer met een grid-area op 26
   kolommen: 24 voor de inhoud, met links en rechts een marge-kolom. Die marges
   zitten bij ons al in de padding, dus schuift alles één kolom op en houden we
   er 24 over. De rijhoogte is 0,0215 × de contentbreedte (gemeten 28,48px bij
   1440 breed) en de tussenruimte 11px.

   De rijen komen letterlijk uit de bron. Daarmee staat een knop naast zijn
   tekst in plaats van eronder, en houdt een citaat de hoogte die het daar ook
   heeft. Rijen mogen groeien (minmax met auto): wikkelt een zin naar een regel
   extra, dan rekt de rij mee in plaats van dat de tekst eruit loopt.

   Onder 900px vervalt het raster en staat alles onder elkaar in bronvolgorde. */
@media (min-width: 900px) {
    .blok--raster .blok__inner {
        display: grid;
        grid-template-columns: repeat(24, minmax(0, 1fr));
        grid-auto-rows: minmax(calc(0.0215 * (min(var(--max), 100vw) - 2 * var(--gutter))), auto);
        gap: 11px;
        max-width: none;
    }
    .blok--raster .deel { grid-area: var(--plek); min-width: 0; }
    /* Elk vak is op de bron een blok op zichzelf: de marges van de eerste en
       laatste alinea komen daar bovenop de rijhoogte en horen hier weg. */
    .blok--raster .deel > :first-child { margin-top: 0; }
    .blok--raster .deel > :last-child { margin-bottom: 0; }

    /* Een beeld vult zijn vak. Het staat absoluut zodat de foto níét meetelt
       voor de rijhoogte: op de bron bepaalt het raster hoe hoog een beeld is,
       niet andersom. Zonder dit rekt een staand portret de hele sectie uit. */
    .blok--raster .deel--beeld { position: relative; }
    .blok--raster .deel--beeld > figure {
        position: absolute; inset: 0; margin: 0; overflow: hidden;
    }
    .blok--raster .deel--beeld > figure img {
        width: 100%; height: 100%; object-fit: cover;
    }
}
.blok--raster .deel > figure { margin: 0; }
.blok--raster .deel + .deel { margin-top: var(--r3); }
@media (min-width: 900px) { .blok--raster .deel + .deel { margin-top: 0; } }

/* ─── Opmaakklassen uit de bron ───
   Squarespace zet tekstopmaak niet in de HTML maar in een handvol vaste
   klassen. Die komen mee bij de import, dus ze hebben hier een equivalent
   nodig — anders valt de hiërarchie weg (de agenda gebruikt sqsrte-large
   voor élk dagnummer). Waarden nagemeten op de live site bij 1440px.
   Accentkleur volgt de twee-gouden-regel: als tekst #8e6e00, op donkere
   grond het felle #ffcc00.

   sqsrte-text-color--custom krijgt hier BEWUST geen kleur. Die klasse draagt
   op de bron zelf ook geen kleur: die staat inline en verschilt per plek
   (rgb(168,163,163) in de footer, grijs bij een prijsnoot, wit op zwart). Eén
   vaste kleur meegeven maakte alle gouden kickers grijs. De import houdt de
   inline kleur daarom vast — zie schoonHtml() in de importer.

   De kicker zit hier niet meer tussen. Die wordt bij de import herkend en
   krijgt .kicker, die zijn kleur per band kent — zie src/Kicker.php. */
.sqsrte-large { font-size: 1.29em; line-height: 1.5; }
/* .sqsrte-small stond hier ook, op 1rem/#444. Die regel deed niets: verderop
   staat `.fijn, .sqsrte-small` met dezelfde specificiteit maar later in het
   bestand, en die zet allebei de eigenschappen opnieuw. Twee waarden voor één
   klasse op twee plekken is precies hoe je later naar de verkeerde kijkt. */

/* Squarespace laat kleurloze tekst de sectiekleur volgen. Een vaste #444
   verdwijnt op zwart en vecht met goud, dus krijgen de donkere en gouden
   banden dezelfde uitzondering als de koppen. Datzelfde geldt voor een
   kleurklasse die tóévallig op de verkeerde band belandt: --white op wit en
   --accent op goud zijn onzichtbaar, en dat mag niet van de bron afhangen. */
.blok--goud .sqsrte-small { color: var(--zwart); }
.blok--zwart .sqsrte-small,
.blok--donker .sqsrte-small { color: rgba(255, 255, 255, 0.85); }

.sqsrte-text-color--accent { color: var(--goud-tekst); }
.blok--zwart .sqsrte-text-color--accent,
.blok--donker .sqsrte-text-color--accent { color: var(--goud); }
.blok--goud .sqsrte-text-color--accent { color: var(--zwart); }
.sqsrte-text-color--white { color: var(--wit); }
.blok--wit .sqsrte-text-color--white,
.blok--papier .sqsrte-text-color--white,
.blok--grijs .sqsrte-text-color--white,
.blok--goud .sqsrte-text-color--white { color: var(--zwart); }
.sqsrte-text-color--black { color: var(--zwart); }
.blok--zwart .sqsrte-text-color--black,
.blok--donker .sqsrte-text-color--black { color: var(--wit); }

/* Onderdelen die op de live site naast elkaar staan in plaats van onder
   elkaar. Meestal een knop met een tekstlink ernaast, maar in de gouden
   CTA-band staat er een hele alinea links naast de knop rechts. Vandaar dat
   tekst mag meegroeien en knoppen hun eigen breedte houden. */
.acties {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--r4); margin: var(--r4) 0;
}
.acties > p { margin: 0; flex: 1 1 10rem; }
.acties > .btn, .acties > .tekstlink { flex: 0 0 auto; }
.acties > :last-child:not(p) { margin-left: auto; }

/* ─── Hero: tekst links, beeld rechts ─── */
/* Handoff: twee gelijke kolommen met kolomafstand 56, padding 48/48/64.
   Links kicker, H1, een intro van maximaal 46–50 tekens breed en een knoprij
   met de gele knop plus een onderstreepte tekstlink. Rechts een staand beeld
   met een verhouding tussen 4/4.4 en 4/4.6. */
.blok--hero .blok__inner {
    display: grid;
    gap: var(--kolom-gap);
    align-items: center;
    padding-block: 48px 64px;
}
@media (min-width: 768px) {
    .blok--hero .blok__inner { grid-template-columns: 1fr 1fr; }
}
.hero__tekst { display: flex; flex-direction: column; gap: 22px; max-width: none; }
/* Afbreken mag in deze kop. Nederlandse samenstellingen worden lang, en in
   het koformaat van de hero past er op een telefoon maar één op een regel:
   "straatfotografieworkshop" is 396px breed terwijl er 335px is, en
   /lezing-straatfotografie-voor-fotoclubs schoof daardoor 40px over de rand
   (WCAG 1.4.10). `hyphens` en niet `overflow-wrap`, want dit levert een net
   afbreekstreepje op in plaats van een woord dat middenin ophoudt; <html>
   draagt al een lang-attribuut, dus de browser weet waar hij mag breken.

   De drempel van 18 tekens is het halve verhaal, en het belangrijkste deel.
   `hyphens: auto` breekt uit zichzelf ook woorden af die prima passen, puur om
   regels voller te maken, en in koformaat is dat lelijker dan de witruimte die
   het bespaart. Van "Fotografie workshops en straatfotografie masterclasses"
   op /agenda maakte het vier schone regels tot drie regels met twee
   afbreekstreepjes, waaronder "work-shops". Korter, maar niet beter.

   Nagemeten waar de grens ligt: in de 335px die een telefoon van 375px
   overlaat passen 16 tekens, en het breedste woord dat sitebreed in een
   hero-kop staat is "straatfotografie" (16 tekens, 241px). Dat past dus. Het
   enige woord dat niet past is "straatfotografieworkshop" (24 tekens, 396px).
   Met een ondergrens van 18 tekens breekt alleen dat woord af en blijft elke
   andere hero-kop precies zoals hij was. Drie letters aan weerskanten
   voorkomt dat er een losse lettergreep achterblijft.

   Een browser die `hyphenate-limit-chars` niet kent, negeert die regel en
   hyphenateert dus ruimer. Dat is lelijker maar niet stuk, en het is de reden
   dat de drempel hier staat en niet de afbreking zelf regelt. */
.hero__titel { margin: 0; hyphens: auto; hyphenate-limit-chars: 18 3 3; }
.hero__tekst .kicker { margin: 0; }
.hero__sub {
    font-size: 2.08rem; font-weight: 700; line-height: 1.06; color: #383838;
    max-width: 48ch; margin: 0;
}
.hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hero__bewijs {
    margin: 0;
    font-size: 0.84375rem; /* 13,5px */
    color: var(--fijn);
}
.hero__sterren { color: var(--fijn); letter-spacing: 0.05em; }
.hero__beeld img {
    width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover;
    border-radius: var(--radius-beeld);
}
/* Hero met achtergrondfoto (voor pagina's zonder los beeld) */
.blok--hero-beeld {
    position: relative;
    background-size: cover; background-position: center;
    color: var(--wit);
    min-height: 60vh; display: flex; align-items: flex-end;
}
.blok--hero-beeld::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 78%);
}
.blok--hero-beeld .blok__inner { position: relative; z-index: 1; }
.blok--hero-beeld h1, .blok--hero-beeld .hero__titel { color: var(--wit); }
.blok--hero-beeld .kicker { color: var(--goud); }

/* ─── Kaarten (3-koloms blok onder de hero) ─── */
/* Handoff: drie kolommen met gap 24, kaartpadding 24–28 verticaal en 28–32
   horizontaal, radius 6, rand 1px. De laatste regel lijnt onderaan uit
   (margin-top: auto), zodat prijzen en knoppen over de kaarten heen op één
   lijn staan. */
.kaart-rij {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Een vast aantal kolommen (bv. vier uitgelichte locaties in een 2×2-raster)
   in plaats van het aanvullende auto-fit hierboven. */
@media (min-width: 640px) {
    .kaart-rij[style*="--kaart-rij-kolommen"] {
        grid-template-columns: repeat(var(--kaart-rij-kolommen), 1fr);
    }
}
.kaart {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 28px 30px;
    background: transparent;
    display: flex; flex-direction: column; gap: var(--r2);
}
.kaart__nummer { color: var(--oker); font-weight: 700; font-size: var(--klein); }
/* Ook h2. Een kaartenblok zonder eigen sectiekop zet zijn kaarttitels op h2
   (blokken.php, blokKaarten): dat klopt in de koppenstructuur, maar zonder
   deze regel staan ze op de 28px van een sectiekop. Gemeten op FIELD NOTES
   Kopenhagen, /londen-straatfotografie-workshop en de homepage: twaalf
   kaarttitels op 28,0115px in plaats van de 18px kaartkop. */
.kaart h2, .kaart h3, .kaart h4 { font-size: var(--h4); margin: 0; }
/* Alleen kale alinea's: `.kaart p` is 0,1,1 en won daarmee van .kaart__prijs
   (0,1,0), waardoor het bedrag op de workshopkaarten op 14,5px gedempt grijs
   stond in plaats van 28px zwart, en zijn `margin: auto 0 0` kwijtraakte.
   Nagemeten: 576 kale alinea's in kaarten, 8 met .kaart__prijs. */
.kaart p:where(:not([class])) { font-size: var(--kaart-body); line-height: 1.65; color: var(--gedempt); margin: 0; }
.kaart .pijllink { margin-top: auto; padding-top: var(--r2); }
/* Kaart op een papieren sectie krijgt wit, zoals in de ontwerpen. */
.blok--papier .kaart { background: var(--wit); }
/* De middelste kaart in een prijsrij staat op papier. */
.kaart--nadruk { background: var(--papier); }
/* De contactkaart heeft een zwarte rand van 2px en de gele knop onderaan. */
.kaart--contact { border: 2px solid var(--zwart); }
.kaart--contact .btn { margin-top: auto; }

/* ─── Tekst + beeld ─── */
.blok--tekst-beeld .blok__inner {
    display: grid; gap: var(--r5); align-items: center;
}
@media (min-width: 900px) {
    .blok--tekst-beeld .blok__inner { grid-template-columns: 1fr 1fr; gap: var(--r6); }
    .blok--beeld-rechts .blok__media { order: 2; }
}
/* In een tweekoloms blok is de kolom zélf al de leesmaat (op de live site
   657px bij 1440 breed). De extra begrenzing van .content op 38rem maakt hem
   daar onnodig smal, waardoor knoppenrijen gaan afbreken. */
/* Lopende tekst naast een beeld houdt een leesbare regellengte. De ontwerpen
   zijn getekend op 1180px; bij een contentkolom van 1440 zou de tekstkolom
   anders regels van ruim 110 tekens opleveren. */
.blok--tekst-beeld .blok__tekst { max-width: 68ch; }
/* Een tekstblok zonder beeld ernaast houdt dezelfde leesmaat, en staat links
   op de marge van de sectie. */
.blok--tekst .blok__tekst { max-width: 68ch; }
.blok__figuur { margin: 0; }

/* De kolomverdeling komt uit het grid van de bron, niet uit een vaste 50/50.
   Op de live site staat een beeld soms in 8 van de 24 kolommen naast tekst in
   16 — een halve pagina zou daar veel te breed zijn. Zonder die gegevens valt
   het blok terug op gelijke helften. */
@media (min-width: 900px) {
    .blok--tekst-beeld[style*="--kolommen"] .blok__inner {
        grid-template-columns: var(--kolommen);
    }

    /* Het volledige grid van de bron: 24 kolommen met 11px ertussen, waarbij
       tekst en beeld op hun eigen kolommen staan. Zo blijven de kolommen die
       op de echte site leeg zijn ook hier leeg, en klopt de breedte van een
       beeld dat maar een derde van de pagina beslaat. */
    .blok--tekst-beeld[style*="--kol-beeld"] .blok__inner {
        grid-template-columns: repeat(24, 1fr);
        column-gap: 11px;
    }
    /* Allebei op rij 1. Zonder die regel plaatst het grid ze automatisch, en
       omdat het daarbij nooit terugspringt naar een eerdere kolom belandt de
       tekst op een tweede rij zodra hij links van het beeld hoort. */
    .blok--tekst-beeld[style*="--kol-beeld"] .blok__media {
        grid-column: var(--kol-beeld); grid-row: 1; order: 0;
    }
    .blok--tekst-beeld[style*="--kol-beeld"] .blok__tekst {
        grid-column: var(--kol-tekst); grid-row: 1;
    }
}
/* Bijsnijden op de gridcel, precies zoals de bron doet. */
.blok--tekst-beeld[style*="--beeld-verhouding"] .blok__figuur img {
    aspect-ratio: var(--beeld-verhouding);
    object-fit: cover;
    height: auto;
}
.blok__figuur img { width: 100%; border-radius: var(--radius-beeld); }

/* ─── Lopende tekst (ook TinyMCE-output) ─── */
/* De handoff begrenst leesbaarheid met ch-waarden, niet met de container:
   intro's op 46–50ch, lopende tekst rond 62ch. */
.content { max-width: 62ch; }
.intro { font-size: var(--intro); line-height: 1.65; color: var(--intro-tekst); max-width: 48ch; }
.fijn, .sqsrte-small { font-size: var(--fijn-maat); line-height: 1.6; color: var(--fijn); }
.content h2 { margin: var(--r5) 0 var(--r3); }
/* Een kicker hoort strak boven zijn kop. De ontwerpen houden in zo'n kolom
   overal dezelfde 16px aan; de standaardmarge van 40px boven een h2 maakt
   daar een gat van dat er niet hoort. */
.content .kicker { margin-bottom: var(--r3); }
.content .kicker + h1,
.content .kicker + h2,
.content .kicker + h3,
.content .kicker + h4 { margin-top: 0; }
.content h3 { margin: var(--r4) 0 var(--r2); }
.content > :first-child { margin-top: 0; }

/* Koppen waar vanuit een inhoudsopgave naartoe gesprongen wordt (zoals op de
   algemene voorwaarden) landen onder de sticky header. Dat wordt nu sitebreed
   afgevangen door `html { scroll-padding-top: 9rem }` bovenin; hier stond een
   eigen scroll-margin-top die daarbij zou optellen. */
/* Alleen links die als lópende tekst in de editor staan, dus zonder klasse.
   `.content a` is 0,1,1 en wint daarmee van elk linkcomponent (0,1,0): een
   .btn in editor-tekst kreeg een gouden onderstreping over zijn label, en
   .tekstlink/.pijllink kregen goud op 3px waar ze zwart op 4px horen. De
   editor mag knoppen in de tekst zetten (klassenFilter() in de importer laat
   btn, btn--*, checks, faq-item, acties, kicker en product-kaart door), dus
   die componenten kómen hier echt voor en mogen niet door de wikkel worden
   overruled.
   Nagemeten over 123 pagina's voordat ik het omzette: 255 kale links in
   lopende tekst, en 19 links mét componentklasse (14 btn, 4 tekstlink, 1
   pijllink). Geen enkele link in de hele contentset draagt een sqsrte-klasse,
   dus die groep raakt hier niets kwijt.

   Waarom `:where(:not([class]))` en niet gewoon `:not([class])`: een kale
   `:not()` telt mee voor de specificiteit. Dat maakt de regel sterker in
   plaats van kleiner, en dan gaat er verderop iets anders stuk — met
   `.kolommen__kolom p:not([class])` won die regel opeens van
   `.kolommen__kolom > :last-child { margin-bottom: 0 }` en werden 23 kolommen
   16px hoger. `:where()` telt voor nul, dus de regel houdt exact dezelfde
   specificiteit als voorheen en matcht alleen minder. Dat is wat we hier
   willen: bereik weghalen, geen specificiteitsgevecht winnen. Dezelfde vorm
   staat op .kaart p, .kolommen__kolom p en .datumkaart p. */
.content a:where(:not([class])) {
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 2px; text-decoration-color: var(--goud);
    /* Vangnet voor een kale URL als linktekst. Dat is één ondeelbaar woord, en
       op /voorbereiding stonden er acht van ongeveer 355px in een kolom van
       335px: de pagina schoof op een telefoon van 375px 26 pixels over de rand
       (WCAG 1.4.10). De linkteksten zelf zijn vervangen
       (scripts/voorbereiding-routelinks.php), dit voorkomt dat de volgende
       kale URL hetzelfde doet.

       Alleen dit, en met opzet geen `minmax(0, 1fr)` op de gridkolom erbij
       zoals bij .gegevens__rij hierboven. Nagemeten: overflow-wrap alleen
       haalt de overloop weg én laat de kolom vanzelf krimpen (het
       ondeelbare woord wás de min-content), terwijl minmax(0, 1fr) op
       .blok--tekst-beeld .blok__inner de overloop niet weghaalt en op 1440px
       de tweekolomsopmaak sloopt: 640+640 wordt dan één kolom van 1344. */
    overflow-wrap: anywhere;
}
.content a:where(:not([class])):hover { background: var(--goud); text-decoration: none; }
.content ul, .content ol { margin: 0 0 var(--r3); padding-left: 1.25rem; }
.content li { margin-bottom: var(--r2); }
/* Citaat, nagemeten op de live site bij 500px en 1440px: Newsreader cursief,
   26,8→33,3px, regelafstand 1,5, in het donkere neutraal. Daar stond het op
   gewicht 500, hier staat 400: het Newsreader-bestand dat wij zelf hosten is
   statisch 400, en dezelfde regel op 400 tot en met 700 gaf precies dezelfde
   breedte. Die 500 beloofde dus iets wat het bestand niet levert. (16 sep
   2026, lokaal gemeten in het browserpaneel.) Geen gouden balk ernaast en geen
   eigen marge: de ruimte eromheen komt van de sectie. De bron staat op een
   eigen regel, rechts, klein en in Outfit.

   De inspringing van 6% komt eveneens van de bron (gemeten op citaten van 601,
   824 en 880 breed: 36, 49 en 53px). Die houdt het citaat vrij van een foto
   ernaast; zonder die ruimte plakken de twee tegen elkaar. */
.content blockquote {
    font-family: var(--font-quote); font-style: italic;
    font-weight: 400;
    font-size: var(--quote); line-height: 1.5;
    color: var(--donker);
    margin: 0 0 var(--r3);
    padding-inline: 6%;
    border: 0;
}
.content blockquote cite {
    display: block;
    margin-top: var(--r2);
    font-family: var(--font); font-style: normal; font-weight: 400;
    font-size: 1rem; line-height: 1.5;
    color: var(--citaat-bron);
    text-align: right;
}
.content figure { margin: var(--r5) 0; }
.content figcaption { font-size: var(--klein); color: var(--gedempt); margin-top: var(--r1); }
.content img { border-radius: var(--radius-beeld); }

/* Uitlijning voor een afbeelding die met de knop in de tekst is gezet (zie
   admin-content-beeld.js). Zelfde patroon als .content img.merk hierboven:
   alleen vanaf 700px naast de tekst, op smal scherm gewoon boven elkaar —
   een uitgerekte foto naast twee woorden tekst is nergens goed voor. */
.content-beeld--links, .content-beeld--rechts { max-width: 100%; }
@media (min-width: 700px) {
    .content-beeld--links { float: left; width: 45%; margin: 0 var(--r4) var(--r3) 0; }
    .content-beeld--rechts { float: right; width: 45%; margin: 0 0 var(--r3) var(--r4); }
}

/* Een merkteken in een tekstblok (zoals het DuPho-lidmaatschapslogo bij de
   voorwaarden) is geen illustratie: het houdt zijn eigen maat in plaats van
   over de volle leeskolom uitgerekt te worden, en de tekst loopt er links
   langs. Op smal scherm is naast elkaar niet leesbaar, dus staat het gewoon
   boven de tekst. */
.content img.merk {
    width: 240px;
    margin: 0 0 var(--r3);
}
@media (min-width: 700px) {
    .content img.merk { float: right; margin: 0 0 var(--r3) var(--r4); }
}

ul.checks, .content ul.checks { list-style: none; padding-left: 0; }
ul.checks li { position: relative; padding-left: 1.75em; margin-bottom: var(--r2); }
ul.checks li::before {
    content: "\2713"; position: absolute; left: 0;
    color: var(--checkmark); font-weight: 700;
}

/* Het tegenovergestelde van ul.checks: wat er nadrukkelijk niet bij zit
   (reis, verblijf, lunch). Een streepje in plaats van een vinkje, en gedempt
   in plaats van --checkmark-groen — dit is geen foutmelding, alleen een grens. */
ul.kruis, .content ul.kruis { list-style: none; padding-left: 0; }
ul.kruis li { position: relative; padding-left: 1.75em; margin-bottom: var(--r2); color: var(--gedempt); }
ul.kruis li::before {
    content: "\2013"; position: absolute; left: 0;
    color: var(--fijn); font-weight: 700;
}

/* ─── Kenmerken ───
   Los rijtje feitjes onder de hero-intro ("twee dagen", "max. 5 personen").
   Geen badge: dat is voor een signaal, dit is neutrale informatie. */
.kenmerken { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 4px 0 0; padding: 0; }
.kenmerk { font-size: var(--klein); color: var(--gedempt); }
/* Een groen vinkje, zoals bij ul.checks: dit zijn feiten die geruststellen
   ("inbegrepen"), geen losse feitjes. Platte tekst, geen blokje: dat oogde
   als een knop en liet er maar drie per regel passen. */
.kenmerk::before { content: "\2713"; color: var(--checkmark); font-weight: 700; margin-right: 4px; }

/* ─── CTA-blok ─── */
/* ─── Gele CTA-band ───
   Handoff: grid-template-columns 1fr auto, padding 64/48. Links kicker, H2 van
   maximaal 26–30 tekens breed en een korte alinea; rechts één of twee knoppen
   onder elkaar met gap 10. Staat altijd direct boven de footer.
   Op smalle schermen één kolom met de knoppen op volle breedte. */
/* De CTA-band regelt alleen de indeling; de kleur komt van de
   achtergrondklasse, zodat dezelfde band ook op wit kan staan. */
.blok--cta .blok__inner {
    display: grid; grid-template-columns: 1fr; gap: var(--r5);
    align-items: center;
}
@media (min-width: 768px) {
    .blok--cta .blok__inner { grid-template-columns: 1fr auto; gap: var(--kolom-gap); }
}
.blok--cta h2 { margin: 0 0 var(--r3); max-width: 30ch; }
/* De leesbreedte geldt voor de alinea, niet voor de kicker erboven. */
.blok--cta .cta__body p { max-width: 46ch; }
.blok--cta .cta__acties { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 767px) { .blok--cta .cta__acties .btn { width: 100%; } }

/* ─── Galerij ─── */
.galerij {
    display: grid; gap: var(--r2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.galerij__intro { margin-bottom: var(--r5); }
.galerij__item { margin: 0; }
/* Een galerij in een artikelbody: .content figure zet er anders een marge van
   var(--r5) omheen en dan valt het raster uit elkaar. */
.content .galerij__item { margin: 0; }
.galerij__item a { display: block; height: 100%; color: inherit; text-decoration: none; }
.galerij__item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-beeld); }
.galerij--portret .galerij__item { aspect-ratio: 2 / 3; }
.galerij--vierkant .galerij__item { aspect-ratio: 1 / 1; }
.galerij--boek .galerij__item { aspect-ratio: 3 / 4; }

/* Metselwerk, zoals de galerijsecties op de live site: kolommen die elk beeld
   zijn eigen verhouding laten houden. Bijsnijden op één vaste verhouding zou
   staand en liggend werk door elkaar gaan husselen.

   Het aantal kolommen en de tussenruimte komen per galerij uit de bron mee
   (zie galerijMetselwerk in src/blokken.php). De tussenruimte is daar een
   percentage van de contentbreedte; een percentage-gap werkt in CSS alleen
   horizontaal, dus rekenen we hem hier één keer om naar een lengte.

   Die lengte rekent met min(100vw, var(--max)) en niet met 100vw alleen. De
   galerij zelf houdt namelijk op met groeien bij --max, en met kale 100vw deed
   de tussenruimte dat niet: op een scherm van 2560 breed stond er 24,6 px
   tussen beelden die samen nog steeds 1344 px breed waren. Het percentage sloeg
   dan op een breedte die de galerij niet had. Onder 1440 verandert er niets. */
.galerij--metsel {
    --galerij-gap: calc((min(100vw, var(--max)) - 2 * var(--gutter)) * var(--galerij-gutter, 4) / 100);
    display: flex;
    align-items: flex-start;
    gap: var(--galerij-gap);
}
.galerij--metsel .galerij__kolom {
    display: flex; flex-direction: column; gap: var(--galerij-gap);
    flex: 1 1 0; min-width: 0;
}
/* Onder 900px halveert de bron zijn tussenruimte ongeveer. */
@media (max-width: 899px) {
    .galerij--metsel { --galerij-gap: calc((min(100vw, var(--max)) - 2 * var(--gutter)) * var(--galerij-gutter, 4) / 200); }
}
/* Galerijen met drie of meer kolommen worden op de bron smaller uitgevoerd.
   Wij zetten ze daar in één kolom: de kolommen verdwijnen uit de opmaak en de
   order-stijl per beeld herstelt de bronvolgorde, zodat de reeks leest zoals
   hij bedoeld is in plaats van kolom voor kolom. */
@media (max-width: 899px) {
    .galerij--metsel-breed { flex-direction: column; }
    .galerij--metsel-breed .galerij__kolom { display: contents; }
}
.galerij--metsel .galerij__item { margin: 0; aspect-ratio: auto; }
.galerij--metsel .galerij__item img { height: auto; object-fit: fill; }
.galerij__item img { transition: opacity 0.15s ease; }
.galerij__item a:hover img { opacity: 0.88; }

/* ─── FAQ ───
   Maten gemeten op de live site (1440px): vraag 26,4px/700 in het donkere
   neutraal, 30px lucht boven en onder, een gouden haarlijn ónder elk item en
   een antwoord dat op 70% van de kolom blijft staan. */
/* FAQ volgens de handoff: twee kolommen met kolomafstand 56, elke vraag een
   rij met een bovenrand, 20px verticale padding, vraag in 700/16px met een
   plus in oker rechts uitgelijnd, antwoord in 14,5px/1.65 in #555. Standaard
   dicht; het openklappen doet de <details> zelf. */
.faq-lijst {
    display: grid; gap: 0 var(--kolom-gap);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 768px) { .faq-lijst { grid-template-columns: 1fr 1fr; } }
/* Elke kolom staat op zichzelf: een uitgeklapte vraag verschuift alleen zijn
   eigen kolom, niet die ernaast. */
.faq-kolom { min-width: 0; }
/* De bovenrand van het eerste item in de tweede kolom lijnt uit met de eerste. */
.faq-lijst .blok__kop { grid-column: 1 / -1; }

.faq-item {
    border-top: 1px solid var(--rand);
    padding: 0;
}
.faq-item summary {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
    font-weight: 700; font-size: var(--faq-vraag); line-height: 1.35;
    color: var(--zwart); cursor: pointer;
    list-style: none;
    padding: 20px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    color: var(--oker); font-size: 1.125rem; font-weight: 600; line-height: 1;
    flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .content {
    max-width: none;
    margin-inline: 0;
    padding-bottom: 20px;
    font-size: var(--kaart-body); line-height: 1.65;
    color: var(--gedempt);
}

/* ─── FAQ zonder uitklapper ───
   `open` op het blok: elke vraag is een net blok met het antwoord er meteen
   onder, in plaats van een rij die je moet aanklikken. Op /faq-workshops leek de
   pagina door de accordeon vrijwel leeg (Michiel, 15 september 2026). De vraag
   houdt dezelfde maat en hetzelfde gewicht als in de uitklapper, zodat de twee
   varianten naast elkaar op de site niet als twee ontwerpen lezen; alleen de
   plus rechts vervalt, want er valt niets te openen. */
.faq-item--open > :is(h2, h3, h4) {
    /* Geen font-size, geen weight, geen kleur: dit ís een h2 (of h3 als het blok
       een eigen titel heeft) en hoort de gewone koptrap van de site te volgen.
       De uitklapper zet ze op 16px/700, want daar is de vraag een aanklikbare
       regel en geen kop. Michiel, 15 september 2026: "waarom hebben die h2's dan
       de opmaak van de accordion nog? Wees hier strenger op."

       Alleen de ruimte eromheen staat hier, want die hoort bij de rij en niet
       bij de kop. */
    margin: 0;
    padding: 0 0 var(--r2);
}
/* Het antwoord is hier gewone bodytekst en geen bijschrift. In de uitklapper
   staat het op 14,5px in grijs, en dat klopt dáár: het is een terzijde tussen
   de rest van een verkooppagina. Op een pagina waar deze antwoorden de inhoud
   zíjn, leest dat als kleine lettertjes. Michiel, 15 september 2026: "op
   /faq-workshops verwacht ik ook de default <p> fontgrootte." */
.faq-item--open {
    padding: var(--r5) 0;
}
.faq-item--open .content {
    font-size: var(--body);
    line-height: 1.7;
    color: var(--tekst);
}

/* ─── FAQ met een beeld ernaast ───
   Desktop: het beeld zweeft rechts en de vragen lopen eromheen. Daarvoor staat
   de figure in de HTML vóór de lijst — een float raakt alleen wat erna komt.
   Mobiel: de omhullende wordt een flexkolom en `order` zet het beeld onder de
   vragen. In een flexitem wordt float genegeerd, dus die twee bijten elkaar
   niet en er is geen tweede regel nodig om de float terug te draaien. */
.faq-met-beeld { display: flex; flex-direction: column; }
.faq-met-beeld .faq-beeld { order: 2; margin: var(--r5) 0 0; }
.faq-met-beeld .faq-lijst { order: 1; }
.faq-beeld img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
    .faq-met-beeld { display: block; }
    .faq-met-beeld .faq-beeld {
        float: right;
        width: 38%;
        margin: 0 0 var(--r4) var(--kolom-gap);
    }
    /* Naast een zwevend beeld is één kolom de enige indeling die klopt: tekst
       kan om een float heen lopen, een tweede kolom ernaast niet. */
    .faq-lijst--een-kolom { grid-template-columns: 1fr; }
}

/* Een los, langer stuk tekst (een SEO-longread) als dichtgeklapt kaartje in
   plaats van een rij in een FAQ-lijst: eigen rand en achtergrond, verder
   dezelfde openklap-vraag als de rest van de site. */
.faq-item--kaart {
    background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
    padding: 26px 30px; border-top: 1px solid var(--rand);
}
.faq-item--kaart summary { font-size: var(--h4); }
.faq-item--kaart .content { padding-bottom: 0; margin-top: 18px; max-width: 68ch; }
.faq-item--kaart + .faq-item--kaart { margin-top: var(--r4); }

/* De vraag in een uitklapper is een echte kop. Die moet zich gedragen als de
   regel die er stond: de summary bepaalt grootte, gewicht en kleur, en de kop
   voegt alleen betekenis toe. Zonder dit springt hij naar het formaat van een
   gewone h2 of h3 en staat er ineens een marge onder. */
:is(.faq-item, .klap-item) summary > :is(h2, h3, h4) {
    font: inherit; letter-spacing: inherit; color: inherit; margin: 0;
}

/* De kop van zo'n longread-kaartje is een echte h2 en geen span. Op de live
   site stonden deze twee onderwerpen als sectiekop boven hun eigen h3'jes;
   zonder h2 hier hangen die zeven h3'jes nergens aan vast in de koptrap.
   Het uiterlijk blijft gelijk: de h2 erft alles van de summary, en de plus
   schuift met margin-left naar rechts nu de flexrij drie items telt in
   plaats van twee. */
.faq-item--kaart summary { justify-content: flex-start; gap: var(--r2); }
.faq-item--kaart summary h2 {
    font: inherit; letter-spacing: inherit; color: inherit; margin: 0;
}
.faq-item--kaart summary::after { margin-left: auto; }

/* Eén kolom dichtgeklapte leestekst binnen een gewoon tekstblok: een chevron
   links in plaats van de plus van de FAQ, en een haarlijn zowel boven als
   onder elk item (de FAQ heeft alleen een bovenrand). Bedoeld voor lange
   uitleg die je liever laat openklappen dan in de vloeitekst zet. */
.klap-lijst { border-top: 1px solid var(--rand); margin: var(--r3) 0; }
.klap-item { border-bottom: 1px solid var(--rand); }
.klap-item summary {
    display: flex; align-items: baseline; gap: var(--r3);
    font-weight: 700; font-size: var(--faq-vraag); line-height: 1.35;
    color: var(--zwart); cursor: pointer;
    list-style: none;
    padding: 20px 0;
}
.klap-item summary::-webkit-details-marker { display: none; }
.klap-item summary::before {
    content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 0.3em;
    background: var(--oker);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
}
.klap-item[open] summary::before { transform: rotate(-180deg); }
.klap-item .content {
    max-width: none; margin-inline: 0; padding-bottom: 20px;
    font-size: var(--kaart-body); line-height: 1.65; color: var(--gedempt);
}

/* ─── Testimonial ─── */
.blok--testimonial .blok__inner { max-width: 46rem; text-align: center; }
.testimonial__tekst {
    font-family: var(--font-quote); font-style: italic; font-weight: 400;
    font-size: var(--quote); line-height: 1.5; color: var(--donker);
    margin: 0 0 var(--r3);
}
.testimonial__naam { font-weight: 600; color: var(--gedempt); font-size: var(--klein); }

/* ─── Lightbox ───
   Het venster is een <dialog> die het hele scherm vult (zie lightbox.js). Geen
   kale div meer: showModal() maakt de rest van het document inert, en dat is
   wat een schermlezer nodig heeft om niet achter het open venster langs te
   blijven lezen.

   De maatvoering moet daarom de standaardstijl van de browser overrulen: een
   dialog is van zichzelf zo groot als zijn inhoud, met een rand, padding en
   `margin: auto`, en begrensd op ongeveer het scherm min wat marge. Vandaar
   width/height op 100%, max-* op none en margin/border op nul. */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; border: none;
    background: rgba(0, 0, 0, 0.93);
    padding: var(--r4);
}
/* `[open]` hoort hier echt bij. De browser verbergt een gesloten dialog met
   `dialog:not([open]) { display: none }` uit de browserstijl, en élke
   auteurregel wint daarvan, ongeacht specificiteit. Stond `display: flex`
   hier zonder `[open]`, dan bleef de lightbox ná het sluiten zichtbaar: hij
   sloot wél, maar je zag hem nog. Dezelfde valkuil staat bij de koopmodal. */
.lightbox[open] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Het venster is zelf ondoorzichtig en schermvullend, dus de backdrop is
   hooguit even zichtbaar tijdens het openen. Zwart houden voorkomt dat er een
   lichte flits onder de foto doorschijnt. */
.lightbox::backdrop { background: rgba(0, 0, 0, 0.93); }
.lightbox__beeld { max-width: 92vw; max-height: 82vh; object-fit: contain; }
.lightbox__titel { color: var(--goud); margin-top: var(--r3); font-weight: 600; }
.lightbox__sluit {
    position: absolute; top: var(--r3); right: var(--r4);
    background: none; border: none; color: var(--wit);
    font-size: 2rem; cursor: pointer; line-height: 1;
}
.lightbox__sluit:hover { color: var(--goud); }

/* Doorbladeren. Aanraakvlak bewust 48px: WCAG 2.2 vraagt minstens 24, en dit
   zijn knoppen die je op een telefoon met je duim raakt terwijl er een foto
   achter ligt. De schaduw houdt ze leesbaar op een licht beeld; het beeld is
   max 92vw breed, dus ze staan er deels overheen. */
.lightbox__vorige,
.lightbox__volgende {
    position: absolute; top: 50%; transform: translateY(-50%);
    min-width: 48px; min-height: 48px;
    background: none; border: none; color: var(--wit);
    font-size: 2.75rem; line-height: 1; cursor: pointer;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.lightbox__vorige { left: var(--r2); }
.lightbox__volgende { right: var(--r2); }
.lightbox__vorige:hover,
.lightbox__volgende:hover { color: var(--goud); }
.lightbox__vorige[hidden],
.lightbox__volgende[hidden] { display: none; }

/* ─── Artikelen ─── */
.artikel-lijst {
    display: grid; gap: var(--r5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.artikel-kaart { text-decoration: none; color: inherit; display: block; }
.artikel-kaart__beeld { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: var(--radius-beeld); }
.artikel-kaart__titel { font-size: 1.25rem; margin: var(--r3) 0 var(--r1); line-height: 1.2; }
.artikel-kaart__excerpt { color: var(--gedempt); font-size: var(--klein); margin: 0; }
.artikel-kaart:hover .artikel-kaart__titel { box-shadow: inset 0 -3px 0 var(--goud); }

/* ─── Artikel ───
   Een artikel volgt dezelfde marge als de rest van de site: kop en tekst
   links op de containermarge. Geen hero-beeld meer tussen kop en tekst (zie
   templates/public/artikel.php) — .artikel__kop draagt de ruimte die eerst
   het hero-beeld ertussen zette, zodat de meta-regel niet tegen de eerste
   alinea aan plakt. */
.artikel__kop { padding-bottom: var(--r5); }
.artikel__titel { max-width: 20ch; }
.artikel__titel { margin-bottom: var(--r2); }
.artikel__meta { color: var(--gedempt); font-size: var(--klein); }
.artikel__body { padding-top: 0; }
.artikel__body .content { max-width: 68ch; }

/* ─── Paginering ─── */
.paginering { display: flex; gap: var(--r2); justify-content: center; margin-top: var(--r6); }
.paginering a, .paginering span {
    padding: 0.4rem 0.9rem; border-radius: var(--radius-knop);
    border: var(--rand-breedte) solid var(--rand); text-decoration: none;
}
.paginering .actief { background: var(--kop); color: var(--wit); border-color: var(--kop); }
.paginering a:hover { border-color: var(--goud); }

/* ─── Footer ───
   Zwarte balk volgens de handoff: padding 40/48, space-between, links de naam
   vet plus ★★★★★ in geel en "op Google", rechts de links in #bbb met gap 24.
   Daaronder blijft de lichte band met de juridische links staan; die staan
   niet in het ontwerp maar horen wel vindbaar te zijn. */
.site-footer__band--donker { background: var(--zwart); color: var(--op-zwart); }
.site-footer__band--licht { background: var(--papier); color: var(--tekst); }

.site-footer__inner {
    max-width: var(--max); margin: 0 auto;
    padding: 40px var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--r3);
    font-size: 0.875rem;
}
/* De lichte onderbalk is smaller: die draagt alleen de juridische links. */
.site-footer__band--licht .site-footer__inner { padding-block: 20px; }

.site-footer__merk { margin: 0; }
.site-footer__sterren { color: var(--goud); letter-spacing: 0.05em; }

.site-footer__socials, .site-footer__links {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 24px;
}
.site-footer__links { flex: 1; justify-content: center; gap: var(--r2); }
/* De scheidingstekens tussen de juridische links staan op de live site
   letterlijk in de tekst; hier doet de rand het werk. */
.site-footer__links li + li::before {
    content: "|"; margin-right: var(--r2); color: var(--rand);
}

.site-footer a { color: var(--op-zwart-zacht); text-decoration: none; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--goud); }
.site-footer__band--licht a { color: var(--gedempt); }
.site-footer__band--licht a:hover { color: var(--oker); }

/* ─── Formulieren ───
   Labels klein en rustig (12px, zoals live), velden op de huisrand van 2px
   met radius 8px, en de knop exact de CTA uit de pagina. */
.formulier { max-width: 34rem; }
.formulier__boven { margin-bottom: var(--r5); }
.blok--midden .formulier, .blok--midden .formulier__boven { margin-inline: auto; }

.formulier__titel { margin-bottom: var(--r2); }
.formulier__intro { margin-bottom: var(--r5); color: var(--gedempt); }

.formulier__veld { margin-bottom: var(--r4); }
.formulier__veld > label {
    display: block; margin-bottom: var(--r1);
    font-size: 0.75rem; line-height: 1.6;
}
.formulier__optioneel { color: var(--gedempt); }
.formulier__hulp {
    margin: 0 0 var(--r2); font-size: var(--klein); color: var(--gedempt);
}

.formulier input[type="text"], .formulier input[type="email"],
.formulier input[type="tel"], .formulier input[type="date"],
.formulier select, .formulier textarea {
    width: 100%;
    font-family: var(--font); font-size: var(--body); color: var(--tekst);
    background: var(--wit);
    border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
}
.formulier textarea { min-height: 8rem; resize: vertical; }
.formulier :is(input, select, textarea):focus-visible {
    outline: 3px solid var(--goud-tekst); outline-offset: 1px; border-color: transparent;
}

.formulier__naam { display: flex; flex-wrap: wrap; gap: var(--r3); }
.formulier__naamdeel { flex: 1 1 10rem; }

.formulier__opties { display: flex; flex-direction: column; gap: var(--r2); }
.formulier__optie, .formulier__veld--vink label {
    display: flex; align-items: flex-start; gap: var(--r2);
    font-size: var(--body); line-height: 1.5;
}
.formulier__optie input, .formulier__veld--vink input { margin-top: 0.3em; }

.formulier__veld--fout :is(input, select, textarea) { border-color: var(--koraal); }
.formulier__fout { margin: var(--r1) 0 0; font-size: var(--klein); color: var(--koraal); }
.formulier__melding { padding: var(--r3); border-radius: var(--radius); }
.formulier__melding--fout { background: #fdeeea; color: #8a2b12; }

/* De bevestiging na een geslaagde verzending. Een gouden wassing en geen
   groen: dit is geen statuslampje maar het antwoord van de site, en geel is
   hier de accentkleur. #fff5cc is --goud op 18% over wit, dus hij leest op
   wit, op papier en op een zwarte sectie alle drie, en zwarte tekst haalt
   erop 17:1. Uitgerekend en niet color-mix(), zelfde reden als bij
   --koraal-vlak. */
.formulier__melding--ok { background: #fff5cc; color: var(--zwart); margin-bottom: var(--r4); }
/* Na het verzenden stuurt de server naar #formulier-{id}, en na het sluiten van
   de modal zet het script de focus op dit paneel. Allebei zouden ze het onder
   de vaste header schuiven. Dat doet `html { scroll-padding-top: 9rem }`
   bovenin nu sitebreed; de eigen scroll-margin-top die hier stond zou daarbij
   optellen tot 288px. */
.formulier__melding-tekst { margin: 0; }
/* Twee knoppen naast elkaar, allebei gevuld. Op desktop houden ze hun eigen
   breedte; over de volle breedte is daar geen knop meer. Op een telefoon mag
   dat wel, en daar leest het ook prettiger. */
.formulier__melding-acties { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--r3) 0 0; }
@media (max-width: 640px) { .formulier__melding-acties .btn { width: 100%; } }
/* Sluiten kan alleen iets sluiten als er een modal is. Staat het paneel gewoon
   in de pagina (geen JavaScript, of na het sluiten), dan zou die knop een knop
   zijn die niets doet. */
.formulier__melding:not(.formulier__melding--modaal) .formulier__melding-sluit { display: none; }
/* In de aanmeldstrook (de voettekst) staan kop en intro gecentreerd over de
   volle 1100px van de strook. Een paneel dat die breedte pakt geeft een regel
   van 1100px en een knop die links onder een gecentreerde zin hangt. Vandaar
   dezelfde leesbreedte als een gewoon formulier, en de knoppen in het midden. */
.formulier--rij .formulier__melding--ok { max-width: 34rem; margin-inline: auto; }
.formulier--rij .formulier__melding-acties { justify-content: center; }

.formulier__knop { margin-top: var(--r3); }

/* Honeypot: nooit zichtbaar, ook niet voor schermlezers. display:none zou
   sommige bots juist waarschuwen, vandaar dit. */
.formulier__vangnet {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Op donkere en gouden secties moeten labels en tekst meekleuren. */
.blok--zwart .formulier__intro, .blok--donker .formulier__intro { color: rgba(255, 255, 255, 0.75); }
.blok--zwart .formulier__veld > label, .blok--donker .formulier__veld > label { color: var(--wit); }
.blok--zwart .formulier__optie, .blok--donker .formulier__optie,
.blok--zwart .formulier__veld--vink label,
.blok--donker .formulier__veld--vink label { color: var(--wit); }

/* ─── Meldingen ─── */
.melding {
    padding: var(--r3); margin: 0 0 var(--r4);
    border-left: 3px solid var(--goud); background: var(--wit);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.melding--fout { border-left-color: var(--koraal); }

/* ══════════════════════════════════════════════════════════════════════════
   Shop, winkelmand en checkout
   ══════════════════════════════════════════════════════════════════════════ */

.shop-filter { display: flex; flex-wrap: wrap; gap: var(--r3) var(--r4); margin-top: var(--r4); }
.shop-filter a { text-decoration: none; padding-bottom: 3px; box-shadow: inset 0 -2px 0 transparent; }
.shop-filter a:hover, .shop-filter a.actief { box-shadow: inset 0 -2px 0 var(--goud); }

.product-grid {
    display: grid; gap: var(--r5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.product-kaart { color: inherit; text-decoration: none; display: block; }
.product-kaart__beeld {
    position: relative; overflow: hidden;
    background: var(--grijs); border-radius: var(--radius);
}
.product-kaart__beeld--portret { aspect-ratio: 2 / 3; }
.product-kaart__beeld--vierkant { aspect-ratio: 1 / 1; }
.product-kaart__beeld--boek { aspect-ratio: 3 / 4; }
.product-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.product-kaart__badge {
    position: absolute; top: var(--r2); left: var(--r2);
    background: var(--zwart); color: var(--wit);
    padding: 0.15rem 0.6rem; font-size: 0.8rem; font-weight: 600; border-radius: 4px;
}
.product-kaart__titel { font-size: 1.15rem; margin: var(--r3) 0 var(--r1); line-height: 1.2; }
.product-kaart__prijs { margin: 0; color: var(--gedempt); font-size: var(--klein); }
.product-kaart:hover .product-kaart__titel { box-shadow: inset 0 -3px 0 var(--goud); }
/* Kaart binnen lopende tekst (geïmporteerde productverwijzingen): de spans
   moeten zich als blokken gedragen, anders loopt alles op één regel door. */
.product-kaart__beeld, .product-kaart__titel,
.product-kaart__prijs, .product-kaart__kort { display: block; }
.product-kaart__kort { margin: var(--r2) 0 0; font-size: var(--klein); color: var(--gedempt); }
.product-kaart__knop { margin-top: var(--r3); }
.content .product-kaart { max-width: 20rem; margin: var(--r5) 0; }
.content .product-kaart:hover { text-decoration: none; }

/* ─── Productpagina ───
   Beeld links, koopblok rechts. Het koopblok is een paneel, zodat prijs en
   knop samen één ding zijn in plaats van losse regels in het wit. De
   beschrijving staat daaronder in een eigen band, links uitgelijnd op dezelfde
   marge als de rest van de pagina: gecentreerd op leesbreedte zweefde hij los
   onder een paginabrede foto. */
.product-detail { display: grid; gap: var(--r5); }
/* Onder de 900 is er één kolom en lost het omhulsel om titel en koopblok
   zichzelf op: de titel wordt dan een eigen rasteritem en gaat met order naar
   boven, vóór de omslag. Dat is de enige plek waar hij zonder scrollen te
   lezen is; in het koopblok staat hij op een telefoon op 2418 pixels. */
.product-detail__kolom { display: contents; }
.product-detail__titel { order: -1; margin: 0; }
@media (min-width: 900px) {
    .product-detail { grid-template-columns: 1.1fr 1fr; gap: var(--kolom-gap); align-items: start; }
    /* Vanaf 900 verandert er niets aan wat er stond: het omhulsel ís de witte
       kaart, met de titel erin op dezelfde plek als vroeger. De kaartopmaak
       verhuist daarvoor van .koopblok naar dit omhulsel; de maten zijn
       letterlijk dezelfde. */
    .product-detail__kolom {
        display: block;
        /* --header-hoogte (site.js) is de echte header+aankondigingsbalk-hoogte:
           met de balk nog open is de header hoger dan de vaste 6rem hierachter
           als terugval (JS uit, of nog niet gedraaid). */
        position: sticky; top: calc(var(--header-hoogte, 6rem) + 1rem);
        background: var(--wit); border: var(--rand-breedte) solid var(--rand);
        border-radius: var(--radius); padding: 26px 30px;
    }
    .product-detail__kolom .koopblok {
        background: none; border: 0; border-radius: 0; padding: 0;
    }
    .product-detail__titel { order: 0; margin: 0 0 var(--r3); }
    .product-detail--zonder-beeld { grid-template-columns: minmax(0, 34rem); }
}
/* De ankerknop boven de omslag: alleen op een telefoon en een tablet, want
   vanaf 900 pixels staat het koopblok ernaast in de tweede kolom. Waarom
   bóven en niet onder staat in templates/public/product.php. */
.product-detail__anker { margin: 0 0 var(--r3); }
@media (min-width: 900px) {
    .product-detail__anker { display: none; }
}
.product-detail__hoofdbeeld { margin: 0; }
.product-detail__beeld img { width: 100%; border-radius: var(--radius-beeld); }
.product-detail__beeld .galerij { margin-top: var(--r3); gap: var(--r3); }

/* ─── Shopproduct-hero (blokProductHero) ───
   Galerij naast een sticky info/koop-kolom, voor een shopproduct met een
   eigen ontwerp (het design-handoff-patroon voor /shop/p/{slug}) in plaats
   van de gedeelde .product-detail-indeling hierboven. */
.product-hero { display: grid; gap: var(--r4); padding-bottom: var(--r4); }
.product-hero__beeld { display: flex; flex-direction: column; gap: 14px; }
/* min-height/min-width:0 is nodig omdat .product-hero__hoofdbeeld een
   flex-item is (en .product-hero__item een grid-item): zonder dat wint de
   automatische minimumgrootte van de <img> erin (afgeleid van diens eigen
   width/height-attributen) van aspect-ratio hierboven zodra de bronfoto
   een heel andere verhouding heeft. Zonder deze regel leek aspect-ratio
   hier soms genegeerd te worden — dat was 'm. */
.product-hero__hoofdbeeld,
.product-hero__item { margin: 0; aspect-ratio: 4 / 3; min-height: 0; min-width: 0; }
.product-hero__hoofdbeeld { aspect-ratio: 3 / 2.1; }
/* Voor bronfoto's die staand horen te blijven (zoals de fine art prints,
   30x45/40x60/60x90 cm = 2:3) i.p.v. de liggende standaardcrop. */
.product-hero--beeld-staand .product-hero__hoofdbeeld { aspect-ratio: 2 / 3; }
/* Voor boekomslagen (~3:4, zoals Straatfotobijbel/De Wet van de Straat/
   The Observer) — dichter bij vierkant dan --staand, maar nog altijd geen
   exacte match met 2:3. */
.product-hero--beeld-boek .product-hero__hoofdbeeld { aspect-ratio: 3 / 4; }
.product-hero__hoofdbeeld img,
.product-hero__item img {
    width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-beeld);
}
.product-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.product-hero__info { display: flex; flex-direction: column; gap: var(--r3); }
.product-hero__titel { margin: 0; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.02em; }
.product-hero__intro { color: var(--intro-tekst); font-size: var(--klein); line-height: 1.65; }
.product-hero__koop {
    background: var(--papier); border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius); padding: 26px 28px;
}
.product-hero__koop .koopblok { background: none; border: 0; border-radius: 0; padding: 0; }
.product-hero__kenmerken {
    list-style: none; margin: var(--r3) 0 0; padding: var(--r3) 0 0;
    border-top: var(--rand-breedte) solid var(--rand);
    display: flex; flex-direction: column; gap: var(--r1);
    color: var(--gedempt); font-size: 0.906rem; line-height: 1.75;
}
/* Groen, net als `ul.checks`, `.kenmerk` en `.vinklijst`: een vinkje staat voor
   "goed" en dit lijstje vertelt wat er bij het product in zit. Hiermee voeren
   alle vier de vinkjesstijlen op de site dezelfde --checkmark. */
.product-hero__kenmerken li::before { content: '\2713\00A0\00A0'; color: var(--checkmark); }
.product-hero__fijn { margin: var(--r2) 0 0; color: var(--fijn); font-size: 0.8125rem; line-height: 1.6; }
@media (min-width: 900px) {
    .product-hero { grid-template-columns: 1fr 420px; gap: var(--kolom-gap); align-items: start; }
    .product-hero__info { position: sticky; top: calc(var(--header-hoogte, 6rem) + 1rem); }
    /* Galerij en info/koop verwisseld: alleen de volgorde draait om, de
       kolombreedtes (420px sticky, de rest voor de galerij) blijven gelijk. */
    .product-hero--beeld-rechts { grid-template-columns: 420px 1fr; }
    .product-hero--beeld-rechts .product-hero__beeld { order: 2; }
    .product-hero--beeld-rechts .product-hero__info { order: 1; }
}

/* ─── Koopblok ───
   Prijs, keuze en de knop naar de winkelmand. Hetzelfde blok hangt op twee
   soorten pagina's: rechts op /shop/p/{slug} en als blok op een landingspagina.
   Het is overal een kaart, zodat kopen er hetzelfde uitziet en zich losmaakt
   van de tekst eromheen. */
.koopblok {
    background: var(--wit); border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius); padding: 26px 30px;
}
.koopblok__titel { margin: 0 0 var(--r3); }
.koopblok__kort {
    font-size: var(--intro); line-height: 1.65; color: var(--intro-tekst); margin: 0 0 var(--r4);
}
.koopblok__prijs { font-size: 1.75rem; font-weight: 700; margin: 0; color: var(--zwart); }
/* De koopknop van een hero staat op dezelfde regel als de prijs (punt 2.46).
   Naast elkaar passen ze op een telefoon precies binnen de kaart: op 375 is
   de prijs 151 pixels en de knop 120, met 12 ertussen in een kaart van 335
   min 2 keer 30 padding. Wordt de prijs langer, dan wrapt de knop eronder in
   plaats van uit de kaart te lopen. */
.koopblok__prijsrij {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--r2) 12px; flex-wrap: wrap;
}
.koopblok__cta { padding: 12px 16px; font-size: 0.875rem; }
.koopblok__btw { margin: var(--r1) 0 0; color: var(--gedempt); font-size: var(--klein); }
/* Dezelfde stijl als .koopblok__voorraad hieronder: schaarste is op deze site
   koraal en vet, of het nu om exemplaren of om plekken gaat. */
.koopblok__schaarste {
    color: var(--koraal); font-weight: 600; font-size: var(--klein); margin: var(--r2) 0 0;
}
/* De aanbetaling is geen kader in een kader: een lijntje scheidt hem af. */
.koopblok__aanbetaling {
    border-top: 1px solid var(--rand); padding-top: var(--r3);
    margin: var(--r3) 0 0; font-size: var(--klein); color: var(--gedempt);
}
.koopblok__voorraad {
    color: var(--koraal); font-weight: 600; font-size: var(--klein); margin: var(--r3) 0 0;
}

/* Wanneer je krijgt wat je koopt. Fijne print, maar wel vóór de knop: bij
   digitale levering vervalt de bedenktijd zodra de levering begint. */
.koopblok__levering {
    margin: var(--r3) 0 0;
    font-size: var(--fijn-maat);
    line-height: 1.5;
    color: var(--gedempt);
}
.koopblok__form { margin-top: var(--r4); }
.koopblok__form label { display: block; font-weight: 600; margin: var(--r3) 0 var(--r1); }
.koopblok__form select, .koopblok__form input[type="number"] {
    width: 100%; padding: 0.65rem 0.8rem; font: inherit;
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius-knop); background: var(--wit);
}
.koopblok__form .btn { margin-top: var(--r4); width: 100%; }

/* Op een telefoon mag een knop de volle breedte pakken, op desktop niet: dat
   is de huisregel. De 100% hierboven blijft dus staan en krijgt er boven
   767px alleen een plafond bij. Gemeten op 1440px was de knop daarvoor
   644px op /londen, 482px op /polaroids en 362px op een productpagina.

   Het bestelmenu gaat mee, anders staat een select van 362px op een knop van
   320px en valt dat verschil op. Het plafond zit met opzet niet op
   .koopblok__form zelf: dan krimpt de datumkeuze mee, op /londen gemeten van
   594px naar 320px, en die lijst hoort de breedte van het kaartje te houden.
   Het aantalveld staat al op 80px en blijft daarbuiten.

   Dezelfde grens geldt voor de doorverwijsknop, die verderop in dit bestand
   staat (.koopblok__verwijs .btn) omdat hij buiten het formulier valt. */
@media (min-width: 768px) {
    .koopblok__form .btn,
    .koopblok__form select,
    .koopblok__verwijs .btn { max-width: 20rem; }
}

/* Twee mededelingen onder de datumkeuze, in dezelfde fijne print als de
   leveringsregel hierboven en zonder kader. "Kosteloos annuleren tot 28 dagen
   van tevoren" is een geruststelling naast de keuze en "neem iemand mee" een
   voordeel erbij; geen van beide hoort te concurreren met de koopknop. */
.koopblok__annuleren,
.koopblok__telaat,
.koopblok__samen {
    margin: var(--r3) 0 0;
    font-size: var(--fijn-maat);
    line-height: 1.5;
    color: var(--gedempt);
}

/* Wat er na de betaalknop gebeurt: fijne print, zoals de leveringsregel in
   het koopblok. Geen kader, want dit is een geruststelling naast de knop en
   geen tweede aanbod. */
.checkout__gerust {
    margin: var(--r3) 0 0;
    font-size: var(--fijn-maat);
    line-height: 1.5;
    color: var(--gedempt);
}

/* Aantal personen: label en veld naast elkaar in plaats van op een eigen
   regel, dat scheelt een regel in een formulier dat toch al lang genoeg is. */
.koopblok__aantal {
    display: flex; align-items: center; gap: var(--r3);
    margin: var(--r3) 0 var(--r1);
}
.koopblok__aantal label { margin: 0; }
.koopblok__aantal input[type="number"] { width: 5rem; flex: 0 0 auto; }

/* Op een landingspagina staat het blok niet naast een foto maar tussen de
   tekst, en dan is een kolombreed vlak te breed om als actie te lezen. */
/* Ankers waar een knop naartoe springt: de datumkeuze in een koopblok en het
   koopblok als sectie. De header is sticky, dus zonder marge landt het doel
   eronder en lijkt er niets te gebeuren. Gemeten: zonder dekking kwam "Kies je
   data in Nijmegen" na de sprong op 0 te staan, met de header tot 110.

   Ook dit loopt nu via `html { scroll-padding-top: 9rem }` bovenin. Dat dekt
   meteen de koopblokken in de producthero (.product-hero__koop op de boeken en
   de workshoplandingspagina's), die hier níét bij stonden en dus onder de balk
   landden — op het kooppad, want dat blok is waar de koopmodal op terugvalt. */
.blok--koop .koopblok { max-width: 34rem; margin: 0 auto; }

/* ─── Datumkeuze ───
   Bij een workshop is de datum de enige keuze die er te maken valt. Dan hoort
   hij niet in een uitklaplijst maar als rij aanklikbare regels: je ziet alles
   in één oogopslag en kiest met één klik. */
/* Algemeen: visueel verborgen maar wel voorleesbaar. Voor een <legend> die al
   op een andere plek zichtbaar staat (zoals hieronder), niet voor content die
   nergens anders staat. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* De titel ("Kies je data in Londen") staat niet meer in de <legend> zelf:
   die moet native blijven voor screenreaders, en het aantal edities ernaast
   past daar niet goed bij. De <legend> is er nog wél, maar visueel verborgen. */
.koopblok__data-kop {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: var(--r2);
    margin-top: var(--r4);
}
.koopblok__data-titel { font-weight: 600; }
.koopblok__data-telling { font-size: var(--klein); color: var(--gedempt); }
.koopblok__data { border: 0; padding: 0; margin: var(--r2) 0 0; }
.koopblok__form .datumkeuze {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
    gap: 2px var(--r3);
    padding: 12px 14px; margin-top: 8px; cursor: pointer;
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius-knop);
    background: var(--wit);
}
.koopblok__form .datumkeuze:hover { border-color: var(--zwart); }
.koopblok__form .datumkeuze input {
    grid-area: 1 / 1 / 3 / 2; align-self: center;
    margin: 0; accent-color: var(--zwart);
}
.koopblok__form .datumkeuze__wanneer { grid-area: 1 / 2 / 2 / 3; font-weight: 600; }
/* Bewust geen .badge (dat is de zware gele CTA-stijl en oogt naast een datum
   als een knop). Dit is informatie, geen actie: hetzelfde rustige pil-patroon
   als .kenmerk onder de hero-intro. */
.datumkeuze__badge {
    margin-left: 8px; display: inline-block; vertical-align: middle;
    background: var(--papier); border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius-knop); padding: 3px 9px;
    font-size: 0.6875rem; font-weight: 600; color: var(--gedempt);
}
/* Bij twee plekken of minder gaat dit labeltje op koraal. Dat is geen nieuwe
   alarmkleur maar de kleur die op deze pagina al schaarste betekent: de regel
   onder de prijs (.koopblok__schaarste) en "Nog 2 beschikbaar"
   (.koopblok__voorraad) staan er al in. Dit labeltje was de enige plek waar
   schaarste grijs bleef, of het er nu vijf waren of één.

   Koraaltekst op een koraalwassing, niet wit op vol koraal: vol koraal met
   witte tekst is op deze site het Fotowolk-submerk (.wandeling__badge), en
   dat hoort niet naast de datums van een workshop op te duiken.

   Alleen het labeltje verandert. De datum, de plaats en de prijs in dezelfde
   rij blijven zwart, anders verschuift het signaal van "deze datum loopt vol"
   naar "er is iets mis met deze regel". Kleur is ook niet het enige signaal:
   er staat "nog 1 plek" tegenover "nog 5 plekken", dus wie het kleurverschil
   niet ziet leest het gewoon. */
.datumkeuze__badge--schaars {
    background: var(--koraal-vlak);
    border-color: var(--koraal-rand);
    color: var(--koraal);
}
/* De oude prijs staat doorgestreept vóór de nieuwe. Geen nowrap meer: bij twee
   bedragen naast elkaar moet deze kolom kunnen afbreken in plaats van de datum
   ernaast weg te drukken. Het kortingslabel zelf staat op de fijne regel
   (.datumkeuze__waar), want daar is ruimte en blijft het ondergeschikt aan de
   datum waar de keuze over gaat. */
.koopblok__form .datumkeuze__prijs {
    grid-area: 1 / 3 / 2 / 4; font-weight: 600; text-align: right;
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
    gap: 2px 5px;
}
.datumkeuze__prijs-was { font-weight: 400; font-size: 0.8125rem; color: var(--fijn); }
.datumkeuze__prijs-actie { font-weight: 600; color: var(--oker); }
.koopblok__form .datumkeuze__waar {
    grid-area: 2 / 2 / 3 / 4; font-size: var(--klein); color: var(--gedempt);
}
/* De gekozen datum krijgt het geel van de site, niet alleen een randje. */
.koopblok__form .datumkeuze:has(input:checked) {
    border-color: var(--zwart); box-shadow: inset 3px 0 0 var(--goud);
}
.koopblok__form .datumkeuze:focus-within { outline: 2px solid var(--zwart); outline-offset: 2px; }
/* De uitklap onder de eerste drie datums, als kaart in dezelfde vorm als een
   datum: zelfde rand, zelfde achtergrond, zelfde padding en marge. Stond er
   eerst als een kale regel met het driehoekje van de browser, en onder drie
   kaarten leest dat als een losse link in plaats van als de vierde rij.

   Geen gevulde knop en geen gele nadruk: dit is een rij in de lijst, geen
   actie die met de koopknop concurreert. De volle breedte is daarmee ook geen
   knop over de volle breedte; hij volgt de datums erboven, op elk scherm.

   Het eigen driehoekje gaat uit (list-style plus het WebKit-pseudo-element) en
   de pijl staat rechts, waar bij een datum de prijs staat. */
.koopblok__form .datumkeuze-meer > summary {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 2px var(--r3);
    /* Links even ver inspringen als de tekst van een datum, want daar staat de
       radioknop vóór. 13px is de breedte die zo'n knop hier rendert (gemeten op
       15 september 2026, op 1180 en op 375); var(--r3) is de kolomafstand uit
       de .datumkeuze-regel hierboven. Zonder dit begint "Latere datums" 29px
       naar links en leest de rij niet als de vierde kaart maar als een losse
       regel eronder. */
    padding: 12px 14px 12px calc(14px + 13px + var(--r3));
    margin-top: 8px; cursor: pointer;
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius-knop);
    background: var(--wit);
    list-style: none;
}
.koopblok__form .datumkeuze-meer > summary::-webkit-details-marker { display: none; }
.koopblok__form .datumkeuze-meer > summary:hover { border-color: var(--zwart); }
.koopblok__form .datumkeuze-meer > summary:focus-visible {
    outline: 2px solid var(--zwart); outline-offset: 2px;
}
.datumkeuze-meer__titel { grid-area: 1 / 1 / 2 / 2; font-weight: 600; }
/* De uitleg loopt onder de pijl door, over de volle breedte van de kaart. Met
   de pijl ernaast brak "plaatsvinden." naar een tweede regel. */
.datumkeuze-meer__uitleg {
    grid-area: 2 / 1 / 3 / 3; font-size: var(--klein); color: var(--gedempt);
}
/* De pijl staat op de titelregel, precies zoals de prijs bij een datum
   (.datumkeuze__prijs staat ook alleen op rij 1). */
.datumkeuze-meer__pijl {
    grid-area: 1 / 2 / 2 / 3; color: var(--gedempt);
    transition: transform 0.15s ease;
}
.koopblok__form .datumkeuze-meer[open] > summary .datumkeuze-meer__pijl {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .datumkeuze-meer__pijl { transition: none; }
}

/* Een datum die vol zit en een datum waarvoor het boeken gesloten is, zien er
   hetzelfde uit: allebei blijven ze staan en allebei zijn ze niet te kiezen.
   Twee klassen en niet één, want in de HTML is "vol" iets anders dan "te laat"
   - en dat verschil staat ook in de tekst naast de datum. */
.koopblok__form .datumkeuze--vol,
.koopblok__form .datumkeuze--telaat { opacity: 0.55; cursor: not-allowed; }
.koopblok__form .datumkeuze--vol:hover,
.koopblok__form .datumkeuze--telaat:hover { border-color: var(--rand); }

/* ─── Workshop-kaarten ───
   Rij koopkaarten met beeld, voor een overzichtspagina als /workshops. Elke
   kaart is .koopblok met een foto erboven; de rand komt van de kaart zelf, dus
   die van het koopblok gaat eraf om een dubbele rand te voorkomen. */
.workshop-kaarten { display: grid; gap: var(--r5); }
@media (min-width: 768px) { .workshop-kaarten { grid-template-columns: 1fr 1fr; } }
/* Precies drie kaarten (zoals de portretshoots) verdienen een rij van drie in
   plaats van 2+1; :has() detecteert dat zonder een aparte modifierklasse. */
@media (min-width: 900px) {
    .workshop-kaarten:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* Vier kaarten op één rij in plaats van een 2×2-raster. Dat scheelt op
   /straatfotografie-workshops een half scherm scrollen voordat de vierde stad
   in beeld komt, en het is wat het ontwerp tekent. Pas vanaf 1100px, want
   daaronder wordt een kaart met beeld, prijs en knop te smal. */
@media (min-width: 1100px) {
    .workshop-kaarten:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}
/* Tekst naast de kaarten. De tekstkolom houdt links de leesbreedte van de
   rest van de site; `--rechts` wisselt de volgorde zodat de kaart links komt
   te staan. Onder 900px staan ze gewoon onder elkaar, tekst eerst. */
.workshop-kaarten-naast { display: grid; gap: var(--r5); }
@media (min-width: 900px) {
    .workshop-kaarten-naast {
        grid-template-columns: 1fr 1fr; gap: var(--kolom-gap); align-items: start;
    }
    .workshop-kaarten-naast--rechts .workshop-kaarten__tekst { order: 2; }
}
/* Eén kaart naast de tekst deelt zijn kolom met niemand. Zonder deze regel
   erft die kaart de `1fr 1fr` van .workshop-kaarten hierboven en wordt hij
   half zo breed als de kolom waar hij in staat: op /straatfotografie-workshops
   302px in een kolom van 644px (gemeten 20 september 2026 op 1440px). Het
   koopblok hing daardoor smal en verloren naast een brede tekstkolom. */
@media (min-width: 768px) {
    .workshop-kaarten-naast .workshop-kaarten:has(> :only-child) {
        grid-template-columns: 1fr;
    }
}
.blok--workshop-kaarten .kaarten__kop { margin-bottom: var(--r5); }
.workshop-kaarten-naast .kaarten__kop { margin-bottom: var(--r4); }
.blok--workshop-kaarten > .blok__inner > .workshop-kaarten__tekst { margin-bottom: var(--r5); }
.workshop-kaart {
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius);
    overflow: hidden; background: var(--wit);
}
.workshop-kaart__beeld { aspect-ratio: 4 / 3; }
.workshop-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.workshop-kaart .koopblok { border: 0; border-radius: 0; }

/* De beschrijving sluit aan op het koopblok: één band, geen dubbele
   sectiepadding en geen gat tussen de twee. */
.blok--producttekst .blok__inner { padding-top: var(--sectie-cta); }
.product-detail__tekst { max-width: 68ch; }
.product-detail__tekst > :first-child { margin-top: 0; }
.product-detail__tekst > :last-child { margin-bottom: 0; }

.mand-tabel { width: 100%; border-collapse: collapse; margin: var(--r4) 0; }
.mand-tabel td { padding: var(--r3) var(--r2); border-bottom: 1px solid var(--rand); vertical-align: middle; }
.mand-tabel a { text-decoration: none; font-weight: 600; }
.mand-tabel a:hover { box-shadow: inset 0 -2px 0 var(--goud); }
/* Zonder dit bepaalt het langste woord de minimale kolombreedte. "Minishoot
   voor theatermakers, liedjesschrijvers, muzikanten en acteurs" zet daarmee in
   zijn eentje 130px neer, en dat is op een telefoon het verschil tussen een
   bedrag dat te zien is en een bedrag dat buiten beeld valt. */
.mand-tabel__naam { overflow-wrap: anywhere; }
.mand-tabel__beeld { width: 88px; }
.mand-tabel__beeld img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-beeld); }
.mand-tabel__stuk { display: block; color: var(--gedempt); font-weight: 400; font-size: var(--klein); }
.mand-tabel__aantal input {
    width: 4.5rem; padding: 0.4rem; font: inherit;
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius-knop);
}

/* De winkelmand op een telefoon: de rij gestapeld in plaats van vijf kolommen
   naast elkaar.

   Vijf kolommen vroegen 442px waar er 335 is. De pagina schoof daardoor
   horizontaal weg met het bedrag buiten beeld, precies op het moment dat
   iemand gaat afrekenen. Alleen de kolommen smaller maken lost de schuif wel
   op maar levert een naamkolom van 122px, en dan staat er "liedjesschrijve rs"
   en "straatfotografi e" — nagemeten op 375px. Beeld links over twee regels,
   naam en kruisknop erboven, aantal en bedrag eronder houdt alles leesbaar op
   de breedte die er is.

   De rollen staan in de opmaak (role="table"/"rowgroup"/"row"/"cell"): een
   `display` die van table afwijkt haalt de impliciete tabelrollen weg, en dan
   verliest een schermlezer de rijverbanden. Ze zijn op desktopbreedte
   overbodig maar niet verkeerd, dus ze kunnen gewoon blijven staan.

   Alleen de winkelmand: de bevestiging heeft twee kolommen en past prima. */
.mand-tabel--bewerkbaar tbody tr {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    grid-template-areas:
        "beeld naam   weg"
        "beeld aantal prijs";
    gap: var(--r2) var(--r3);
    align-items: center;
    padding: var(--r4) 0;
    border-bottom: 1px solid var(--rand);
}
.mand-tabel--bewerkbaar tbody tr:last-child { border-bottom: 0; }
.mand-tabel--bewerkbaar td { display: block; padding: 0; border-bottom: 0; }
.mand-tabel--bewerkbaar .mand-tabel__beeld { grid-area: beeld; align-self: start; }
.mand-tabel--bewerkbaar .mand-tabel__naam { grid-area: naam; }
.mand-tabel--bewerkbaar .mand-tabel__aantal { grid-area: aantal; }
.mand-tabel--bewerkbaar .mand-tabel__prijs { grid-area: prijs; }
.mand-tabel--bewerkbaar .mand-tabel__wegcel { grid-area: weg; text-align: right; }
@media (min-width: 768px) {
    .mand-tabel--bewerkbaar tbody tr {
        display: table-row;
        padding: 0;
        border-bottom: 0;
    }
    .mand-tabel--bewerkbaar td {
        display: table-cell;
        padding: var(--r3) var(--r2);
        border-bottom: 1px solid var(--rand);
    }
}
.mand-tabel__prijs { text-align: right; white-space: nowrap; font-weight: 600; }
.mand-tabel__weg { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--gedempt); line-height: 1; }
.mand-tabel__weg:hover { color: var(--koraal); }

.mand-acties { display: grid; gap: var(--r5); }
@media (min-width: 768px) { .mand-acties { grid-template-columns: 1fr 1fr; } }
.mand-codes label { display: block; font-weight: 600; margin: var(--r3) 0 var(--r1); }
.mand-codes input {
    width: 100%; max-width: 18rem; padding: 0.6rem 0.8rem; font: inherit;
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius-knop); background: var(--wit);
}
.mand-codes .btn { margin-top: var(--r3); }

.mand-totaal {
    background: var(--wit); border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius); padding: var(--r4);
}
/* Kolomafstand nul en de ruimte links van het bedrag, net als bij
   .checkout__totalen: anders houdt de streep boven "Totaal" halverwege op,
   want dat zijn twee grid-cellen met elk een eigen bovenrand. */
.mand-totaal dl { display: grid; grid-template-columns: 1fr auto; gap: var(--r2) 0; margin: 0; }
.mand-totaal dd { margin: 0; text-align: right; padding-left: var(--r4); }
.mand-totaal__groot {
    font-size: 1.2rem; font-weight: 700; color: var(--kop);
    padding-top: var(--r2); border-top: 2px solid var(--kop);
}
.mand-totaal__btw { color: var(--gedempt); font-size: var(--klein); margin: var(--r2) 0 0; }
.mand-totaal .btn { margin-top: var(--r3); width: 100%; }

.checkout__kolommen { display: grid; gap: var(--r5); }
@media (min-width: 900px) { .checkout__kolommen { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.checkout__velden label, .checkout__code label { display: block; font-weight: 600; margin: var(--r3) 0 var(--r1); }
.checkout__velden input, .checkout__velden select, .checkout__velden textarea,
.checkout__code input {
    width: 100%; max-width: 28rem; padding: 0.65rem 0.8rem; font: inherit;
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius-knop); background: var(--wit);
}
.checkout__velden .veld-hulp, .checkout__overzicht .veld-hulp {
    color: var(--gedempt); font-size: var(--klein); margin: var(--r2) 0 0;
}
label.checkbox { display: flex; align-items: flex-start; gap: var(--r2); font-weight: 400; }
label.checkbox input { width: auto; margin-top: 0.3rem; }

/* Postcode en huisnummer naast elkaar: samen zijn ze één adresregel, en het
   scheelt de bezoeker twee regels scrollen op een telefoon. Grid en geen vaste
   breedtes, zodat ze onder de 28rem van de andere velden blijven en op een
   smal scherm gewoon even breed zijn. De inputs erin mogen hun max-width van
   28rem niet houden, anders staat het huisnummer even breed als de straat. */
.checkout__adres-regel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r2); max-width: 28rem; }
.checkout__adres-regel input { max-width: none; }
.checkout__velden .checkout__adres-regel label { margin-top: var(--r3); }

/* De bedrijfsgegevens op de afrekenpagina staan achter het factuurvinkje.
   Verbergen gebeurt hier en niet in JavaScript.

   Het staat omgekeerd: verbergen wanneer het vinkje uit is, en niet tonen
   wanneer het aan is. Kent een browser :has() niet, dan valt deze hele regel
   weg en staan de velden gewoon open, zoals ze tot 1 september 2026 stonden.
   Dat is de goede kant om op te falen: onnodig zichtbaar is te overzien,
   onbereikbaar is dat niet. */
.checkout__velden .checkout__factuur { margin-top: var(--r3); }
.checkout__factuur:not(:has(:checked)) + .factuur-velden { display: none; }

/* ─── Het overzicht op de afrekenpagina ───
   Michiel, 14 september 2026: "in het witte blok staat alles zo op elkaar dat
   het een brij wordt." Het kader blijft (dat is de plek waar je bevestigt wat
   je koopt, daar mag het afsteken), maar de inhoud stond zonder rust onder
   elkaar. Nagemeten met drie regels in de mand liepen de afstanden van boven
   naar beneden: 16, 16, 16, 4, 0, 24. Geen van die sprongen zei iets over wat
   bij wat hoorde, en de nul zat precies tussen de btw-regel en het eerste
   vinkje.

   Nu: 24, 40, 24, 8, 40, 40. Dat is de indeling wat je koopt / een code en wat
   het kost / waar je mee akkoord gaat / de knop, met 8 tot 24px binnen een
   groep en 40px ertussen. Dat verschil is het hele punt: een afstand maakt pas
   een groep als hij opvalt ten opzichte van de afstanden eromheen.

   De maten zijn met opzet niet nog ruimer. De knop moet op een telefoon in
   beeld blijven, en met drie regels in de mand is dit blok al bijna een heel
   scherm hoog. */
.checkout__overzicht {
    background: var(--wit); border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius); padding: var(--r4);
}
/* Meer binnenruimte zodra er ruimte voor is; op een telefoon is 24px al een
   tiende van de schermbreedte per kant. */
@media (min-width: 900px) {
    .checkout__overzicht { padding: var(--r5); }
}
.checkout__overzicht > h2 { margin: 0 0 var(--r4); }
/* Elke regel is een eigen aankoop, met een "Verwijderen" eronder die anders
   tegen de volgende productnaam aanloopt. */
.checkout__regels { list-style: none; margin: 0 0 var(--r5); padding: 0; font-size: var(--klein); display: grid; gap: var(--r3); }
/* Kortingscode en cadeaubon in de checkout. Ingeklapt, want de meeste mensen
   hebben er geen; open zodra er een code staat of er iets mis is met een code.
   De winkelmand wordt in de praktijk overgeslagen, dus dit is voor veel
   bezoekers de enige plek waar ze een bon kunnen inwisselen. */
/* Dichter op de totalen dan op de regels erboven: een code verandert wat je
   betaalt, dus hij hoort bij "wat het kost" en niet los tussen twee groepen in
   te zweven. */
.checkout__codes { margin: 0 0 var(--r4); font-size: var(--klein); }
.checkout__codes > summary { cursor: pointer; color: var(--gedempt); }
.checkout__codes > summary:hover { color: var(--zwart); }
/* Het veld zelf op de gewone tekstgrootte: `font: inherit` zou anders het
   kleinere lettertype van de samenvatting overnemen en dan staat er een
   kleiner veld dan links op dezelfde pagina. */
.checkout__code { font-size: var(--body); }
.checkout__codes .btn { margin-top: var(--r2); }
.veld-fout { color: var(--fout, #c62828); font-size: var(--klein); margin: 0.35rem 0 0; }
.checkout__regels li { display: flex; justify-content: space-between; gap: var(--r3); }
.checkout__regelprijs { white-space: nowrap; }
/* "Verwijderen" onder de productnaam, en dus niet achter de prijs: zo houden
   de regelbedragen dezelfde rechterlijn als de totalen eronder. */
.checkout__weg {
    display: block; margin: 0.1rem 0 0 -0.25rem; padding: 0.15rem 0.25rem;
    background: none; border: 0; font: inherit; font-size: 0.9em;
    color: var(--gedempt); cursor: pointer; text-decoration: underline;
}
.checkout__weg:hover { color: var(--koraal); }
/* Geen kolomafstand, maar padding links van het bedrag.

   De streep boven "Totaal" is de bovenrand van twee grid-cellen. Met een
   kolomafstand van 16px ertussen hield die streep halverwege op en begon hij
   verderop weer: zichtbaar in de winkelmand, in het overzicht op de
   afrekenpagina en op de bestelbevestiging. Met de afstand aan de linkerkant
   van het bedrag raken de cellen elkaar en loopt de streep door. Het bedrag
   zelf staat rechts uitgelijnd en verschuift dus geen pixel. */
.checkout__totalen { display: grid; grid-template-columns: 1fr auto; gap: var(--r2) 0; margin: 0; }
.checkout__totalen dd { margin: 0; text-align: right; padding-left: var(--r3); }
.checkout__totalen .groot {
    font-size: 1.2rem; font-weight: 700; color: var(--kop);
    padding-top: var(--r2); border-top: 2px solid var(--kop);
}
.checkout__betaalwijze { border: none; padding: 0; margin: var(--r5) 0; display: grid; gap: var(--r3); }
.checkout__betaalwijze legend { font-weight: 700; padding: 0 0 var(--r1); }
/* De twee vinkjes: het enige in dit blok waar je zelf een keuze maakt, en
   allebei met een label van twee regels. Ze hebben daarom hun eigen groep, met
   24px tussen de twee (minder en de tweede regel van het ene label plakt tegen
   het volgende vinkje) en 40px eromheen. */
.checkout__akkoord { display: grid; gap: var(--r4); margin-top: var(--r5); }
.checkout__overzicht .btn { margin-top: var(--r5); width: 100%; }

/* ─── Bestelbevestiging ───
   De leeskolom staat op iets meer dan de helft van de sectie. Op volle breedte
   liep de lijn van de totaal-tabel door tot de rechterrand en stond het bedrag
   daar in zijn eentje, meters van de omschrijving vandaan; dan verdwijnt juist
   het getal waar het om gaat. Onder 900px blijft de kolom de volle breedte:
   55% van een telefoonscherm is geen kolom meer. */
.bestelling { max-width: 100%; }
@media (min-width: 900px) {
    .bestelling { max-width: 55%; }
}
.bestelling__kop { display: grid; grid-template-columns: auto 1fr; gap: var(--r2) var(--r4); margin: var(--r4) 0; }
.bestelling__kop dt { font-weight: 600; }
.bestelling__kop dd { margin: 0; }
/* Wat heb ik gekocht: het antwoord waarvoor deze pagina bestaat, en dus geen
   gewone celtekst. Alleen hier, want in de winkelmand staat de naam al als
   vetgedrukte link naast een productfoto. */
.bestelling .mand-tabel__naam { font-family: var(--font-kop); font-size: var(--h3); font-weight: 600; line-height: 1.2; }
/* Alleen hier nul: de naam en het regelbedrag lijnen dan uit met de totalen
   eronder, die uit een grid komen en dus geen zijpadding hebben. De winkelmand
   houdt de 8px uit .mand-tabel, want daar staan vijf kolommen naast elkaar.

   En op de grondlijn in plaats van gecentreerd: de naamkolom is hier twee of
   drie regels hoog (grote naam plus de datum eronder), en dan zweeft een
   verticaal gecentreerd bedrag ergens tussen die regels in. Met `baseline`
   staat het op dezelfde regel als de naam waar het bij hoort. */
.bestelling .mand-tabel td { padding-inline: 0; vertical-align: baseline; }
/* De datum onder de productnaam: duidelijk ondergeschikt aan de naam, maar
   gewone leestekst en geen fijndruk. Het is het tweede wat je hier komt
   controleren. */
.bestelling__wanneer { display: block; margin-top: var(--r1); font-size: var(--body); font-weight: 400; color: var(--gedempt); }
.bestelling__vervolg { margin-top: var(--r6); }
.bestelling__vervolg h2 { font-size: var(--h3); margin: 0 0 var(--r3); }
.bestelling__vervolg .btn { margin-top: var(--r2); }

/* De oude agenda-opzet (.agenda-lijst met .agenda-item__datum en
   .agenda-item__locatie) stond hier tot 14 september 2026. Die markup wordt
   nergens meer gerenderd — het agendablok in src/blokken.php zet
   .agenda__lijst neer met __dag/__cijfer/__weekdag/__wat/__waar/__wanneer —
   maar de `.agenda-item`-regel gold nog wél voor de nieuwe markup en gaf elke
   regel naast de `border-top` van de huidige opzet óók een `border-bottom`.
   Het gat tussen twee items is 0, dus de streep ertussen was 2px waar het
   ontwerp 1px zegt, met een losse streep onder de laatste regel van elke
   maand. Ook de media query op 700px was dood: die stond eerder in het
   bestand dan de huidige `.agenda-item` en verloor dus op volgorde.
   De echte agenda staat verderop, onder het kopje "Agenda". */

code {
    background: var(--grijs); padding: 0.1rem 0.35rem;
    border-radius: 4px; font-size: 0.9em;
}

/* ─── Koppen die van niveau zijn veranderd bij de import ───
   Een pagina moet precies één h1 hebben, maar het uiterlijk mag niet
   veranderen. Een h2 die h1 werd houdt dus de h2-maat, en andersom. */
h1.kop-als-h2 { font-size: var(--h2); line-height: 1.04; }
h2.kop-als-h1 { font-size: var(--h1); line-height: 0.99; }
/* Zelfde afspraak, nu voor de koptrap (punt 2.22). Op /voorbereiding stond de
   kop van het contactkaartje als h4 onder een h2, en dat is een sprong; hij is
   nu een h3 met de maat van een kaartkop. Op /ebook stond boven de h1 een h4
   met "Lekker praktisch, direct toepasbaar": een regel bóven de titel is geen
   kop maar een aankondiging, en die is nu een alinea met dezelfde maat. */
h3.kop-als-h4, p.kop-als-h4 {
    font-size: var(--h4); line-height: 1.25; letter-spacing: normal;
    margin: 0 0 var(--r3);
}
/* Een h3 in lopende tekst krijgt van .content h3 een marge van 24 boven en 8
   onder, en een h4 niet: die houdt in een kaart de nul uit .kaart h4. Zonder
   deze regel zou de kop van het contactkaartje op /voorbereiding dus wél van
   plek verschuiven, terwijl alleen het niveau hoort te veranderen. */
.kaart h3.kop-als-h4 { margin: 0; }
p.kop-als-h4 { font-family: var(--font-kop); font-weight: 600; color: var(--zwart); }

/* ─── Verwante content onderaan artikelen en producten ─── */
/* De achtergrondkleur komt van de sectieklasse, zoals bij elk ander blok. */
.blok--verwant h2 { font-size: var(--h3); margin: 0 0 var(--r4); }

/* ─── Video's (pas laden bij klikken) ───
   Tot de bezoeker klikt staat er alleen een thumbnail van YouTube. Geen
   iframe, geen scripts, geen cookies — en op /mediakit scheelt dat zes
   zware insluitingen tegelijk. */
.video-rij {
    display: grid; gap: var(--r4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.video { margin: 0; }
.video__knop {
    display: block; position: relative; width: 100%; padding: 0; border: 0;
    background: var(--zwart); border-radius: var(--radius-beeld); overflow: hidden;
    cursor: pointer; aspect-ratio: 16 / 9;
}
.video__knop img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
    position: absolute; inset: 0; margin: auto;
    width: 4.5rem; height: 3.2rem; border-radius: 12px;
    background: rgba(0, 0, 0, 0.72);
    transition: background-color 0.15s ease;
}
.video__play::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 0; height: 0;
    border-left: 1.1rem solid var(--wit);
    border-top: 0.7rem solid transparent;
    border-bottom: 0.7rem solid transparent;
}
.video__knop:hover .video__play { background: var(--goud); }
.video__knop:hover .video__play::after { border-left-color: var(--zwart); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-beeld); }
.video figcaption { margin-top: var(--r2); font-size: var(--klein); color: var(--gedempt); }

/* ─── Boekaanbevelingen ─── */
.boektip-rij {
    display: grid; gap: var(--r4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.boektip {
    display: flex; flex-direction: column; gap: var(--r1);
    text-decoration: none; color: inherit;
}
.boektip__cover img {
    width: 100%; height: auto; border-radius: var(--radius-beeld);
    border: 1px solid var(--rand);
}
.boektip__titel { margin-top: var(--r2); font-weight: 600; line-height: 1.25; }
.boektip__auteur { font-size: var(--klein); color: var(--gedempt); }
.boektip__knop {
    margin-top: auto; padding-top: var(--r2);
    font-size: var(--klein); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 2px; text-decoration-color: var(--goud);
}
.boektip:hover .boektip__knop { background: var(--goud); text-decoration: none; }
.boektip__melding { margin: var(--r5) 0 0; font-size: var(--klein); color: var(--gedempt); }

/* ─── Reviews ───
   Eén uitgebreid verhaal maakte de hele rij meters hoog, want de kaarten in
   een grid-rij zijn zo hoog als de langste. Daarom knipt site.js lange
   citaten af op --review-regels en zet er een knop onder; kaarten die er
   toch al in passen houden geen knop over. Zonder JavaScript staat de tekst
   er gewoon voluit — de klem hangt aan een klasse die JavaScript zet. */
.review-rij {
    --review-regels: 8;
    display: grid; gap: var(--r4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.review {
    margin: 0; padding: var(--r4);
    border: var(--rand-breedte) solid var(--rand); border-radius: var(--radius);
    background: var(--wit);
    display: flex; flex-direction: column; gap: var(--r2);
}
.review__sterren { margin: 0; color: var(--goud); letter-spacing: 0.08em; }
.review__tekst { margin: 0; font-size: var(--klein); line-height: 1.6; }
.review--klapbaar:not(.review--open) .review__tekst {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--review-regels); line-clamp: var(--review-regels);
    overflow: hidden;
}
/* De knop is tekst, geen blokje: dezelfde onderstreping als de pijllink,
   links uitgelijnd onder het citaat. */
.review__meer {
    align-self: flex-start;
    margin: 0; padding: 0; border: 0; background: none;
    font: inherit; font-size: var(--klein); font-weight: 600;
    color: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: var(--goud);
}
.review__meer:hover { text-decoration-color: currentColor; }
.review__naam { font-weight: 600; margin-top: auto; }
.blok--zwart .review, .blok--donker .review { background: transparent; border-color: rgba(255,255,255,0.25); }

/* ─── Adres ─── */
.adres { font-style: normal; margin: 0 0 var(--r3); line-height: 1.7; }

/* ─── Beeldcitaat (foto van een ander, met bronvermelding) ─── */
.beeldcitaat { margin: var(--r5) 0; max-width: 26rem; }
.beeldcitaat img { border-radius: var(--radius-beeld); }
.beeldcitaat figcaption {
    margin-top: var(--r2); font-size: var(--klein); color: var(--gedempt);
}
.beeldcitaat figcaption strong { color: var(--tekst); }

/* ─── Cookiebanner ─── */
.cookiebanner {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 90;
    max-width: 34rem;
    margin-inline: auto;
    background: var(--zwart);
    color: var(--wit);
    border-radius: 4px;
    padding: var(--r3) var(--r3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: var(--r3);
}
.cookiebanner[hidden] { display: none; }
/* Een tint kleiner dan --klein (15px): de banner is een mededeling met een
   keuze eronder, geen leestekst, en hoort niet te schreeuwen. */
.cookiebanner__tekst {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.cookiebanner__tekst em { font-style: italic; }
.cookiebanner__tekst a { color: var(--goud); text-underline-offset: 3px; }
.cookiebanner__knoppen {
    display: flex;
    gap: var(--r2);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cookiebanner__knoppen .btn { font-size: 0.8125rem; }
/* De weigerknop staat op een donkere ondergrond en heeft dus een eigen rand. */
.cookiebanner__knoppen .btn:not(.btn--cta) {
    background: transparent;
    color: var(--wit);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.cookiebanner__knoppen .btn:not(.btn--cta):hover {
    border-color: var(--wit);
}
@media (min-width: 40rem) {
    .cookiebanner {
        flex-direction: row;
        align-items: center;
        max-width: 46rem;
    }
    .cookiebanner__knoppen { justify-content: flex-end; flex-shrink: 0; }
}

/* ═══ Blokken uit de designhandoff ═══════════════════════════════════════
   Zie docs/styleguide.md. Alle maten komen uit de ontwerpbestanden. */

/* Kop die over een hele sectie loopt, boven de kolommen. */
.blok__kop { margin: 0 0 36px; }
.blok__kop--midden { text-align: center; }

/* ─── Statement: gecentreerde kop, links lezende tekst ─── */
.blok--statement .blok__inner {
    display: flex; flex-direction: column; gap: 24px; align-items: center;
}
.statement__kop { max-width: 24ch; text-align: center; margin: 0; }
.statement__tekst {
    max-width: 68ch;
    font-size: var(--body);
    line-height: 1.5;
    color: var(--tekst);
}

/* ─── Aanbodkaart: beeld links, gegevens rechts, één kader eromheen ─── */
.aanbod {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
}
@media (min-width: 768px) {
    .aanbod { grid-template-columns: var(--kol-beeld-breedte, 440px) 1fr; }
}
.aanbod__beeld { margin: 0; }
.aanbod__beeld img {
    width: 100%; height: 100%;
    aspect-ratio: var(--beeld-verhouding, 1 / 1.05);
    object-fit: cover; border-radius: 0;
}
.aanbod__inhoud {
    padding: 44px 48px;
    display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
@media (max-width: 767px) { .aanbod__inhoud { padding: 28px 24px; } }
.aanbod__regel {
    margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.badge {
    background: var(--goud); color: var(--zwart);
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em;
    padding: 6px 12px; border-radius: var(--radius-knop);
}
/* De maat van .aanbod__prijs staat verderop, bij de rest van het aanbodblok.
   Hier stond 0,84375rem, die daar door var(--klein) werd overruled; alleen de
   kleur deed nog iets. Beide eigenschappen staan nu op één plek. */
.aanbod__tekst {
    max-width: none; margin: 0;
    font-size: 1rem; line-height: 1.7; color: var(--intro-tekst);
}
.aanbod__tekst > :last-child { margin-bottom: 0; }
.aanbod__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.aanbod__acties .btn { padding: 14px 28px; font-size: 0.9375rem; }
.aanbod__fijn {
    margin: 0; font-size: 0.875rem; font-style: italic; color: #666;
}

/* ─── Galerij met een vast raster ─── */
.galerij--raster {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .galerij--raster { grid-template-columns: repeat(var(--galerij-kolommen, 4), 1fr); }
}
.galerij--raster .galerij__item { margin: 0; }
.galerij--raster .galerij__item img {
    width: 100%; aspect-ratio: var(--galerij-verhouding, 4 / 5);
    object-fit: cover; border-radius: var(--radius-beeld);
}
.blok--galerij .blok__inner { display: flex; flex-direction: column; gap: 32px; }

/* ─── Citaat ───
   Nagemeten op de live site, niet uit het ontwerp overgenomen: die versie is
   groter en staat er beter. Newsreader cursief 400, 26,1 → 33,3px, regelafstand
   1,5, in het donkere neutraal. De tekst leest links uitgelijnd, de bron staat
   rechts eronder in Outfit 16px. De em-dash vóór de naam is de enige plek op
   de site waar hij mag staan.

   De inspringing van 6% komt eveneens van de bron en houdt het citaat vrij van
   een foto ernaast. */
.quote {
    font-family: var(--font-quote); font-style: italic; font-weight: 400;
    font-size: var(--quote); line-height: 1.5;
    color: var(--citaat-tekst);
    max-width: 68ch; margin: 0; text-align: left;
    padding-inline: 6%; border: 0;
}
.quote__bron {
    display: block; margin-top: var(--r2);
    font-family: var(--font); font-style: normal; font-weight: 400;
    font-size: 1rem; line-height: 1.5;
    color: var(--citaat-bron);
    text-align: right;
}
.blok--zwart .quote { color: var(--op-zwart); }
.blok--zwart .quote__bron { color: var(--op-zwart-zacht); }

/* ─── Gele CTA-band: gecentreerde variant ─── */
.blok--cta-midden .blok__inner {
    grid-template-columns: 1fr;
    justify-items: center; text-align: center;
    gap: 18px;
}
.blok--cta-midden .cta__tekst { display: contents; }
.blok--cta-midden h2 { max-width: 26ch; margin: 0; }
.blok--cta-midden .cta__acties { flex-direction: row; align-items: center; gap: 18px; }
.cta__tekst { display: flex; flex-direction: column; gap: 12px; }
.cta__tekst h2 { margin: 0; }
.cta__tekst .kicker { margin: 0; }
.cta__body { margin-top: 12px; font-size: 0.96875rem; line-height: 1.65; max-width: 60ch; }
.cta__body p { margin-bottom: var(--r3); }
.cta__body > :last-child { margin-bottom: 0; }
.cta__link { font-size: 0.875rem; text-align: center; }

/* Blokken die samen één sectie vormen: de sectiepadding valt ertussen weg en
   maakt plaats voor de 36px die de ontwerpen daar aanhouden. */
.blok--plak-onder .blok__inner { padding-bottom: 0; }
.blok--plak-beide .blok__inner { padding-block: 36px 0; }
.blok--plak-boven .blok__inner { padding-top: 36px; }

/* Zonder padding onder valt de ondermarge van de laatste alinea buiten de
   sectie. Die marge toont dan de papierkleur van de body als een streep dwars
   door een blok dat wit hoort te zijn (gemeten op FIELD NOTES Kopenhagen:
   16px papier tussen de twee helften van de vergelijking). flow-root houdt de
   marge binnen het blok, zonder de hoogte te veranderen. */
.blok--plak-onder .blok__inner,
.blok--plak-beide .blok__inner { display: flow-root; }

/* Het omgekeerde: een sectie die juist nadrukkelijk ruimte onder zich houdt.
   Gemaakt voor de bestelbevestiging, waar de nieuwsbriefaanmelding uit de
   voettekst er direct op volgt en de gewone 72px te weinig is om die twee uit
   elkaar te houden. Op smalle schermen minder, want daar is 200px bijna een
   heel scherm scrollen naar niets. */
.blok--ruim-onder .blok__inner { padding-bottom: 120px; }
@media (min-width: 768px) {
    .blok--ruim-onder .blok__inner { padding-bottom: 200px; }
}

/* ─── Genummerde stappen ───
   Ontwerp: gecentreerde kop met daaronder een regel in oker, dan drie kolommen
   met gap 32. Elk nummer staat in een geel rondje van 40px. */
.blok--stappen .blok__inner { display: flex; flex-direction: column; gap: 36px; }
.stappen__kop { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.stappen__kop h2 { margin: 0; }
.stappen__regel { margin: 0; color: var(--oker); font-weight: 600; font-size: var(--klein); }
.stappen { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
/* Een vast aantal kolommen (bv. vier stappen naast elkaar) in plaats van de
   standaard 3 hierboven — zelfde patroon als --kaart-rij-kolommen. */
@media (min-width: 768px) {
    .stappen[style*="--stappen-kolommen"] {
        grid-template-columns: repeat(var(--stappen-kolommen), 1fr);
    }
}
.stap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.stap__nummer {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--goud); color: var(--zwart);
    font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.stap__titel { font-size: var(--h4); line-height: 1.25; margin: 0; }
.stap__tekst { margin: 0; font-size: var(--kaart-body); line-height: 1.65; color: var(--gedempt); }

/* ─── Dagschema ───
   De planning van een meerdaagse masterclass: elke dag zijn eigen kolom, met
   een startpunt en daaronder de tijdlijn van die dag. Geen kaartrand om de
   kolommen — het onderscheid komt van de ruimte ertussen en de gouden
   badge boven elke kolom. */
.blok--dagschema .blok__inner { display: flex; flex-direction: column; gap: var(--r5); }
.dagschema__kop {
    display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid var(--zwart); padding-bottom: var(--r3);
}
.dagschema__kop h2 { margin: 0; }
.dagschema__regel { margin: 0; color: var(--gedempt); font-size: var(--klein); }
.dagschema__intro { max-width: none; }
.dagschema__dagen { display: grid; gap: var(--r5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .dagschema__dagen { grid-template-columns: 1fr 1fr; gap: var(--kolom-gap); } }
/* Eén dag (de eendaagse workshops) blijft één kolom, ook vanaf 768px —
   anders zweeft de tijdlijn half zo breed naast een lege tweede kolom. */
.dagschema__dagen:has(> .dagschema__dag:only-child) { grid-template-columns: 1fr; }
.dagschema__dag { display: flex; flex-direction: column; gap: var(--r3); }
.dagschema__label { display: flex; align-items: center; gap: var(--r2); margin: 0; font-weight: 600; }
.dagschema__locatie {
    background: var(--papier); border-radius: var(--radius);
    padding: 14px 18px;
}
.blok--papier .dagschema__locatie { background: var(--wit); }
.dagschema__locatie-naam { margin: 0; font-weight: 600; }
.dagschema__locatie-regel { margin: 4px 0 0; font-size: var(--klein); color: var(--gedempt); }
.dagschema__items { list-style: none; margin: 0; padding: 0; }
.dagschema__moment {
    display: grid; grid-template-columns: 52px 1fr; gap: var(--r3);
    padding: 14px 0; border-top: 1px solid var(--rand);
}
/* FIELD NOTES Kopenhagen noemt geen tijden: de dag heeft een ritme, geen
   raster. Zonder tijdkolom begint de titel gewoon links. */
.dagschema__moment--zonder-tijd { grid-template-columns: 1fr; }
.dagschema__moment:first-child { border-top: 0; }
.dagschema__tijd { font-weight: 700; }
.dagschema__titel { margin: 0; font-weight: 600; }
.dagschema__tekst { margin: 4px 0 0; font-size: var(--klein); color: var(--gedempt); }
/* De fijne regel onder het schema. De negatieve marge haalt hem uit het
   ritme van .blok__inner (gap: var(--r5)) terug naar var(--r3), zodat hij
   als voetnoot bij het schema hoort en niet als eigen sectie leest.
   Kleur: var(--fijn). Michiel vroeg #888888, maar dat haalt bij 15px de
   AA-norm niet (3,36:1 op papier, 3,55:1 op wit, tegen 4,5:1); na die meting
   koos hij op 20 september 2026 alsnog voor --fijn. */
.dagschema__voorbehoud {
    margin: calc(var(--r3) - var(--r5)) 0 0;
    font-size: var(--klein); font-style: italic; color: var(--fijn);
}
.dagschema__nadruk {
    background: var(--papier); border-radius: var(--radius);
    padding: 24px 28px;
}
.blok--papier .dagschema__nadruk { background: var(--wit); }
.dagschema__nadruk h3 { margin: 0 0 var(--r2); }
.dagschema__nadruk p { margin: 0; color: var(--gedempt); }

/* ─── Uitgelichte kaarten ─── */
.blok--uitgelicht .blok__inner { display: flex; flex-direction: column; gap: 30px; }
.uitgelicht__kop {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: var(--r3);
}
.uitgelicht__kop h2 { margin: 0; }
.uitgelicht__rij { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .uitgelicht__rij { grid-template-columns: repeat(var(--uitgelicht-aantal, 2), 1fr); }
}
.uitgelicht__kaart {
    background: var(--wit);
    border: 1px solid var(--rand); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
}
.uitgelicht__beeld { margin: 0; }
.uitgelicht__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.uitgelicht__inhoud { padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.uitgelicht__titelrij { display: flex; justify-content: space-between; align-items: center; gap: var(--r3); }
.uitgelicht__titelrij h3 { font-size: 1.1875rem; margin: 0; line-height: 1.25; }
/* Sfeertekst onder de titel. Leest als lopende tekst en niet als label, dus
   de gewone body-grootte en niet de kleinere kaartregel eronder. */
.uitgelicht__tekst p { margin: 0 0 var(--r2); }
.uitgelicht__tekst p:last-child { margin-bottom: 0; }
.uitgelicht__regel { margin: 0; font-size: var(--kaart-body); color: var(--gedempt); }
.uitgelicht__voet { margin: 0; font-size: var(--kaart-body); color: #666; }
.uitgelicht__voet a { font-weight: 600; }
/* Omlijnde badge: een datum in plaats van een aanbieding. */
.badge--omlijnd { background: transparent; border: 1px solid var(--zwart); }

/* ─── Citaat naast een geel actieblok ─── */
.blok--citaat-cta .blok__inner {
    display: grid; grid-template-columns: 1fr; gap: var(--kolom-gap);
    align-items: center;
}
@media (min-width: 768px) { .blok--citaat-cta .blok__inner { grid-template-columns: 1fr 1fr; } }
.citaat-cta__citaat .quote { max-width: none; text-align: left; margin: 0; }
.citaat-cta__citaat .quote__bron { text-align: left; }
.actiekaart {
    background: var(--goud); color: var(--zwart);
    border-radius: var(--radius); padding: 36px 40px;
    display: flex; flex-direction: column; gap: 12px;
}
.actiekaart__kop { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.actiekaart__tekst { margin: 0; font-size: var(--klein); line-height: 1.55; }
.actiekaart__actie { margin: 0; }
.actiekaart .btn { padding: 14px 28px; font-size: var(--klein); }
/* Sluit strak aan op het blok erboven, zonder tussenruimte. Zo staan de drie
   ingangen op de homepage direct onder de hero. */
.blok--plak-boven-strak .blok__inner { padding-top: 0; }

/* ─── Gelijke tekstkolommen onder een kop ─── */
.blok--kolommen .blok__inner { display: flex; flex-direction: column; }
.kolommen { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .kolommen { grid-template-columns: repeat(var(--kolommen-aantal, 3), 1fr); gap: 56px 32px; }
}
/* Lopende tekst in een kolom leest als lopende tekst: dezelfde maat als de
   rest van de site, met gewone alinearuimte.

   Alleen kale alinea's, want componenten in een kolom zetten hun eigen marge
   en verloren die hier: .prijslijst__noot en .kicker (allebei 0,1,0) gingen
   onderuit tegen deze regel (0,1,1).

   De regel helemaal schrappen kan ook — de basisregel `p` bovenaan dit
   bestand geeft exact dezelfde waarde — maar dan wint `.kaart p { margin: 0 }`
   voor alinea's in een kaart die in een kolom staat, en dat verandert 110
   alinea's op 15 pagina's van 24px naar 8px ruimte. Nagemeten, en dat is een
   ontwerpkeuze en geen opruimactie, dus die ligt bij Michiel. */
.kolommen__kolom p:where(:not([class])) { margin: 0 0 var(--r3); }
.kolommen__kolom > :last-child { margin-bottom: 0; }
/* Een opsomming van namen mag compacter, zonder ruimte tussen de regels. */
.kolommen--compact .kolommen__kolom p {
    font-size: var(--kaart-body); line-height: 1.85; color: var(--gedempt);
}
/* Meer lucht tussen kolommen die inhoudelijk los van elkaar staan, zoals de
   prijslijst en de linklijst op /contact. */
@media (min-width: 768px) {
    .kolommen--ruim { column-gap: 64px; }
}
.kolommen__kolom strong { color: var(--zwart); font-weight: 600; }
/* Op een zwarte sectie is nadruk geel, ook binnen een link. */
.blok--zwart .kolommen__kolom strong { color: var(--goud); }
.kolommen__kolom a { font-weight: 600; }

/* Aanbodkaart met het beeld rechts, en meerdere labels op één regel. */
@media (min-width: 768px) {
    .aanbod--beeld-rechts { grid-template-columns: 1fr var(--kol-beeld-breedte, 440px); }
    .aanbod--beeld-rechts .aanbod__beeld { order: 2; }
}
.aanbod__intro {
    max-width: 68ch; margin: 0 auto 36px; text-align: center;
    font-size: 1rem; line-height: 1.7; color: var(--intro-tekst);
}
.aanbod__titel { margin: 0; font-size: 1.375rem; line-height: 1.25; }
.aanbod__fijnregel { font-size: 0.84375rem; color: var(--fijn); }
.badge--zwart { background: var(--zwart); color: var(--goud); }
.aanbod__prijs { font-size: var(--klein); color: var(--fijn); }
/* Was #999: 2,85 op wit, waar 4,5 nodig is. --fijn is de token die daar al
   voor bestaat en 4,5 haalt; hij is eerder om dezelfde reden bijgesteld. */
.aanbod__prijs s { color: var(--fijn); }

/* ─── Citaat met portret ───
   De live site zet het portret van de persoon bij het citaat: boven de tekst
   in een smalle gecentreerde kolom, of ernaast. Dat is sterker dan een los
   citaat en het is hier overgenomen, in de maten van de huisstijl. */
.quote__beeld { margin: 0; }
.quote__beeld img {
    width: 100%;
    aspect-ratio: var(--beeld-verhouding, 4 / 5);
    object-fit: cover;
    border-radius: var(--radius-beeld);
}

/* Portret boven het citaat, allebei in dezelfde smalle kolom. */
/* Citaat zonder foto: één gecentreerde kolom, zoals de live site. */
.blok--quote .blok__inner { max-width: calc(880px + 2 * var(--gutter)); }
.blok--quote .quote { max-width: none; }

/* Portret boven het citaat, allebei in dezelfde smalle kolom. */
.blok--quote-boven .blok__inner {
    display: flex; flex-direction: column; gap: 28px;
    /* De kolom zelf is 600px breed; de sectiepadding komt daar bovenop. */
    max-width: calc(600px + 2 * var(--gutter));
    margin-inline: auto;
}

/* Portret naast het citaat. Het citaat leest dan links uitgelijnd. */
.blok--quote-rechts .blok__inner,
.blok--quote-links .blok__inner {
    display: grid; grid-template-columns: 1fr; gap: var(--kolom-gap);
    align-items: center;
}
@media (min-width: 768px) {
    /* Het portret staat in de HTML vóór het citaat; met grid-column zetten we
       het rechts zonder de leesvolgorde om te gooien. Breedte 310px, staand:
       dat is de maat die de live site aanhoudt (307 × 384). */
    .blok--quote-rechts .blok__inner,
    .blok--quote-links .blok__inner { max-width: var(--max); }
    .blok--quote-rechts .blok__inner { grid-template-columns: 1fr 310px; }
    .blok--quote-rechts .quote__beeld { grid-column: 2; grid-row: 1; }
    .blok--quote-rechts .quote { grid-column: 1; grid-row: 1; }
    .blok--quote-links .blok__inner { grid-template-columns: 310px 1fr; }
}
.blok--quote-rechts .quote,
.blok--quote-links .quote { max-width: none; }

/* ─── Tijdlijn ───
   Links een tekstkolom, rechts de jaren. Elke rij is 64px voor het jaartal
   plus de rest, met een dunne bovenrand. */
.blok--tijdlijn .blok__inner {
    display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start;
}
@media (min-width: 768px) {
    .blok--tijdlijn .blok__inner { grid-template-columns: 1fr 1fr; }
}
.tijdlijn__tekst { max-width: 62ch; }
.tijdlijn__tekst h2 { margin-top: 0; }
.tijdlijn__label { padding-bottom: 16px; margin: 0; }
.tijdlijn__rij {
    display: grid; grid-template-columns: 64px 1fr; gap: 0 20px;
    border-top: 1px solid var(--rand); padding: 16px 0;
}
.tijdlijn__jaar { font-weight: 700; font-size: 1rem; }
.tijdlijn__items { font-size: var(--kaart-body); line-height: 1.75; color: var(--gedempt); }
.tijdlijn__items a { font-weight: 600; }

/* Kolommen met een gouden bovenrand, zoals de zwarte mediasectie. */
.kolommen--gerand .kolommen__kolom {
    border-top: 2px solid var(--goud); padding-top: 20px;
}
/* De knop plus de tekstlink onder een kolomkop, naast elkaar op één regel.
   Zelfde maatvoering als .aanbod__acties, want het is dezelfde rij: een
   gouden knop met er een tekstlink naast. */
.kolommen__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kolommen__acties .btn { padding: 14px 28px; font-size: 0.9375rem; }
/* Eén lijn over de volle breedte bóven de kolommen, in plaats van een rand
   per kolom. Scheidt de stukken van een reeks (de drie steden, de twee
   masterclasses): goud boven het eerste, een haarlijn boven de rest. */
.kolommen--lijn-goud { border-top: 2px solid var(--goud); padding-top: var(--r4); }
.kolommen--lijn-rand { border-top: 1px solid var(--rand); padding-top: var(--r4); }
/* De afsluitende regel onder de kolommen: geldt voor het hele blok, niet voor
   één kolom. Zelfde gouden lijn erboven als het ontwerp tekent. */
.kolommen__nadruk {
    border-top: 2px solid var(--goud); padding-top: var(--r3); margin-top: var(--r4);
}
.kolommen__kolom h3 { font-size: var(--h4); line-height: 1.25; margin: 0 0 12px; }
.blok--zwart .kolommen__kolom { color: var(--op-zwart-zacht); }
.blok--zwart .kolommen__kolom p { color: var(--op-zwart-zacht); }
.blok--zwart .kolommen__kolom a { color: var(--op-zwart); }

/* Meer dan één beeld in de beeldkolom, en een kaartje eronder. */
/* De beeldkolom is één geheel: de foto's plus een eventueel kaartje eronder.
   Als losse gridkinderen zouden ze elk een eigen kolom pakken en de tekst
   naar de volgende rij duwen. */
.blok__media { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.blok__figuur { display: flex; flex-direction: column; gap: 20px; }

/* ─── Bijschrift onder een beeld ───
   Draagt bij een foto van iemand anders de credit. Die staat hier en niet in
   het alt-attribuut: alt beschrijft wat er te zien is voor wie het beeld niet
   ziet, en een figcaption hoort bij dezelfde <figure> en wordt door een
   schermlezer gewoon meegelezen. Zo krijgt iedereen allebei.

   Maten volgen het bestaande onderschrift bij .content figcaption en .video
   figcaption: --klein in --gedempt. */
.bijschrift {
    margin: 0;
    font-size: var(--klein);
    color: var(--gedempt);
    line-height: 1.4;
}
/* In lopende tekst zet .content figcaption er anders var(--r1) bovenop, en
   die telt op bij de afstand die de figuur zelf al geeft. */
.content .bijschrift { margin: 0; }

/* De figuur hierboven is een flexkolom met 20px ertussen. Die 20px is de
   afstand tussen twee beelden, niet die tussen een beeld en zijn eigen
   onderschrift: zo ver eronder gaat de credit bij het volgende beeld horen.
   Terug naar var(--r2), 8px. */
.blok__figuur > .bijschrift { margin-top: calc(var(--r2) - 20px); }

/* De hero krijgt alleen een <figure> als er een bijschrift staat (zie
   blokHero in src/blokken.php), dus deze regel raakt geen bestaande hero.
   .hero__beeld img is een afstammelingsselector en blijft dus gelden. */
.hero__figuur { margin: 0; display: flex; flex-direction: column; gap: var(--r2); }

/* In een galerij zit de verhouding op het item zelf, en een bijschrift zou
   dan bínnen die bijsnijding moeten passen. Staat er een bijschrift, dan
   verhuist de verhouding naar het beeld en groeit het item mee. De
   metselvariant heeft geen vaste verhouding en verandert dus niets. */
.galerij--portret  { --galerij-item-verhouding: 2 / 3; }
.galerij--vierkant { --galerij-item-verhouding: 1 / 1; }
.galerij--boek     { --galerij-item-verhouding: 3 / 4; }
.galerij--raster   { --galerij-item-verhouding: var(--galerij-verhouding, 4 / 5); }
.galerij__item:has(> .bijschrift) {
    display: flex; flex-direction: column; gap: var(--r2);
    aspect-ratio: auto;
}
.galerij__item:has(> .bijschrift) img {
    height: auto;
    aspect-ratio: var(--galerij-item-verhouding, auto);
}
.citaatkaart {
    border: 1px solid var(--rand); border-radius: var(--radius);
    background: var(--wit); padding: 24px 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.citaatkaart p { margin: 0; }
/* Volgt het kaartje op lopende tekst, dan hoort er lucht tussen: de alinea
   houdt zijn eigen 16px en het kaartje zet daar 24px bovenop, zoals de kolom
   in het ontwerp met gap 24 doet. In een beeldkolom staat het kaartje al los,
   daar hoeft er niets bij. */
p + .citaatkaart,
ul + .citaatkaart,
ol + .citaatkaart { margin-top: var(--r4); }
.citaatkaart__tekst { font-size: var(--kaart-body); line-height: 1.65; color: var(--gedempt); font-style: italic; }
.citaatkaart__bron { font-size: 0.84375rem; color: var(--fijn); }

/* Een uitgelicht kadertje binnen een tekstkolom (een compliment, een noot). */
.uitlichting {
    background: var(--papier); border-radius: var(--radius);
    padding: 20px 24px; font-size: var(--klein); line-height: 1.65; color: var(--gedempt);
}
.blok--papier .uitlichting { background: var(--wit); }
.uitlichting strong { color: var(--zwart); }

/* Twee kleine datumkaarten naast elkaar binnen een tekstkolom. */
.datumkaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 var(--r3); }
.datumkaart {
    border: 1px solid var(--rand); border-radius: var(--radius);
    padding: 20px 24px; display: flex; flex-direction: column; gap: 8px;
}
.datumkaart__plaats { font-weight: 700; font-size: var(--klein); letter-spacing: 0.08em; margin: 0; }
/* Kale alinea's, niet .datumkaart__plaats hierboven: die zet zijn eigen maat
   en verloor hem aan deze regel (0,1,1 tegen 0,1,0). */
.datumkaart p:where(:not([class])) { margin: 0; font-size: var(--kaart-body); line-height: 1.7; color: var(--gedempt); }

/* ─── Prijskaarten ───
   Kop met er rechts van een fijne noot, daaronder drie kaarten. Wat onderaan
   staat (de prijs of de knop) lijnt over de kaarten heen uit. */
.blok--kaarten .blok__inner { display: flex; flex-direction: column; gap: 24px; }
.kaarten__kop {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 32px;
}
.kaarten__kop h2 { margin: 0; }
.kaarten__noot { margin: 0; font-size: 0.875rem; font-style: italic; color: var(--fijn); }
.kaart__prijs {
    margin: auto 0 0; font-weight: 700; font-size: 1.75rem; letter-spacing: -0.01em;
    color: var(--zwart);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
/* Zelfde behandeling als .datumkeuze__prijs-was/-actie hierboven: de oude
   prijs klein en gedempt, het kortingslabel gaat niet hier maar bij de datum
   (Eerstvolgende::kaart(), ondergeschikt aan waar de keuze over gaat). */
.kaart__prijs-was { font-weight: 400; font-size: 0.8125rem; color: var(--fijn); }
.kaart__prijs-actie { font-weight: 600; color: var(--oker); }
/* `margin-top: auto` duwt de knop naar onderen, zodat hij over de kaarten heen
   op één lijn staat. `align-self` hoort daarbij: `.kaart` is een kolom-flexbox,
   en die rekt zijn kinderen standaard op tot de volle kaartbreedte. De knop
   werd daardoor op elk venster even breed als de kaart — op /headshots een
   knop van 368px in een kaart van 368px. Geen `width: 100%` om weg te halen
   dus, maar de rek eraf.

   Op mobiel rekt hij wel mee: daar staat de kaartrij in één kolom en helpt een
   groot raakvlak. Zelfde grens als de CTA-band en het formulierblok. */
.kaart .btn { margin-top: auto; align-self: start; }
@media (max-width: 767px) {
    .kaart .btn { align-self: stretch; }
}

/* ─── Kaart met beeld ───
   Een foto boven de kaart (16:9). De padding verhuist dan van de kaart zelf
   naar een binnenste .kaart__inhoud, anders loopt het beeld tegen de rand aan. */
.kaart--met-beeld { padding: 0; }
.kaart__beeld { aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; margin: 0; }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaart__inhoud { padding: 28px 30px; display: flex; flex-direction: column; gap: var(--r2); flex: 1; }
.kaart__inhoud > .badge { align-self: flex-start; }

/* Gegevenslijstje van twee kolommen (Duur / Groep / Erbij), met een haarlijn
   erboven en eronder — zoals op de workshopkaarten. */
.kaart__gegevens {
    display: grid; grid-template-columns: auto 1fr; gap: 8px 14px;
    font-size: 0.84375rem; line-height: 1.4; color: var(--gedempt);
    padding: 14px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
    margin: 0;
}
.kaart__gegevens dt { font-weight: 700; color: var(--zwart); }
.kaart__gegevens dd { margin: 0; }

/* Prijs met een fijne regel ernaast ("per persoon"), samen onderaan de kaart. */
.kaart__prijsrij { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.kaart__prijsrij .kaart__prijs { margin: 0; }
.kaart__prijs-fijn { font-size: 0.8125rem; color: var(--fijn); }

.vinklijst { list-style: none; margin: 0; padding: 0; }
.vinklijst li {
    position: relative; padding-left: 1.6em; margin-bottom: 0.35em;
    font-size: var(--klein); line-height: 1.9; color: var(--gedempt);
}
/* Groen, niet oker. Michiel op 14 september 2026: een groen vinkje staat voor
   "goed" en geeft vertrouwen, en dat is precies wat deze lijstjes doen. Ze
   staan op de tarievenkaarten van /headshots en /zakelijke-portretfotos en
   vertellen wat er bij de prijs in zit.

   Dit is dezelfde --checkmark als ul.checks (regel 878) en .kenmerk (899) al
   voeren, dus het maakt de site consistenter in plaats van andersom: van vier
   vinkjesstijlen waren er twee groen en twee oker. De vierde,
   .product-hero__kenmerken op de productpagina's, is inmiddels ook om; alle
   vier voeren nu --checkmark. */
.vinklijst li::before {
    content: "\2714"; position: absolute; left: 0;
    color: var(--checkmark); font-weight: 700;
}

/* ─── Genummerde stappenlijst binnen een tekstkolom ───
   Geel blokje met het nummer, radius 4, 34px breed. */
.stappenlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/* Het nummer staat absoluut: met een grid zouden de <strong> en de tekst
   erna elk een eigen kolom pakken en breekt de regel middenin. */
.stappenlijst li {
    position: relative; padding-left: 48px;
    counter-increment: stap;
    font-size: var(--klein); line-height: 1.65; color: var(--intro-tekst);
}
.stappenlijst { counter-reset: stap; }
.stappenlijst li::before {
    content: counter(stap);
    position: absolute; left: 0; top: 0;
    width: 34px; padding: 6px 0;
    background: var(--goud); color: var(--zwart);
    border-radius: var(--radius-knop);
    font-weight: 700; font-size: 0.875rem; text-align: center;
}
.stappenlijst strong { color: var(--zwart); }

/* Lang testimonial binnen een tekstkolom. Een kort pull-quote krijgt het grote
   Newsreader-citaat; een lang verhaal van een klant staat in Outfit cursief
   van 22px. Zo doet de live site het, en zo staat het ook in het ontwerp. */
.quote--lang,
.content blockquote.quote--lang {
    font-family: var(--font); font-size: 1.375rem; line-height: 1.6;
    font-weight: 400; max-width: 62ch; padding-inline: 0;
}
.blok--zwart .quote--lang { color: var(--op-zwart); }

/* ─── Blokken binnen een tekstkolom ───
   Een kolom kan meer dan één onderwerp dragen. Het ontwerp scheidt die op twee
   manieren: met een haarlijn erboven, of door het tweede onderwerp in een
   papieren paneel te zetten. Zonder een van beide leest de kolom als één lap
   tekst. */
.kolomblok:not(:first-child) {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--rand);
}
.kolomblok > :first-child { margin-top: 0; }
.kolomblok > :last-child { margin-bottom: 0; }

.paneel {
    background: var(--papier); border-radius: var(--radius);
    padding: 26px 30px;
}
.paneel:not(:first-child) { margin-top: 28px; }
.paneel > :first-child { margin-top: 0; }
.paneel > :last-child { margin-bottom: 0; }
.paneel h3, .paneel h4 { font-size: 1.25rem; line-height: 1.25; }
/* Op een papieren sectie krijgt het paneel wit, zodat het zich aftekent. */
.blok--papier .paneel { background: var(--wit); border: 1px solid var(--rand); }

/* Een kop verderop in een kolom heeft lucht boven zich nodig. */
.kolommen__kolom > h2:not(:first-child),
.kolommen__kolom > h3:not(:first-child),
.kolommen__kolom > h4:not(:first-child) { margin-top: 28px; }

/* ─── Formulierkaart ───
   Geen eigen vlak: de velden staan los op de sectie-achtergrond, zoals op de
   site vóór de herbouw. Alleen de velden zelf zijn wit met een randje.
   `.formulier__kaart` blijft als haakje bestaan voor de veldopmaak hieronder.

   Dat gold eerst alleen voor `blok--formulier-naast` (/contact en de
   homepage). De tien andere pagina's met een formulierblok hadden een licht
   vlak met een rand eromheen, en dat is precies het kaderblok-met-formulier
   waar we vanaf wilden. Het viel pas op toen de verzendknop niet meer de volle
   breedte pakte: de kaart liep op 1440px over de hele sectie, dus het
   e-mailveld werd 1254px breed terwijl de intro erboven op 630px stond — twee
   breedtes onder elkaar in dezelfde gecentreerde sectie. */
.formulier__kop { margin: 0 0 20px; font-size: 1.375rem; }
/* Alleen náást tekst mag het formulier zijn kolom helemaal vullen; dáár bepaalt
   de kolom de breedte al. Staat het formulier alleen in de sectie, dan houdt
   het gewoon de leesbreedte van `.formulier` (34rem) en centreert
   `blok--midden` het, net als de intro erboven. */
.blok--formulier-naast .formulier__kaart .formulier { max-width: none; }
.formulier__fijn {
    margin: 16px 0 0; font-size: var(--fijn-maat); line-height: 1.6; color: var(--fijn);
}

/* Tekst links, formulierkaart rechts. De leesbreedte van 46ch geldt alleen
   in die tweekolomsopmaak: onder 900px staat de tekst in dezelfde ene kolom
   als het formulier eronder, en zonder deze media query bleef hij daar toch
   smal staan (eerst op 46ch, en met alleen die regel weg nog op de 62ch van
   de generieke .content-klasse). Tussen ongeveer 700 en 890px liet dat een
   lege strook rechts van de tekst staan, terwijl het formulier eronder al
   wél de volle breedte gebruikte, twee breedtes op dezelfde pagina. */
.blok--formulier-naast .blok__inner {
    /* minmax(0, 1fr) en niet 1fr: een 1fr-kolom krijgt automatisch
       min-width:auto, en dat is de min-content van wat erin staat. Op /contact
       is dat een beeld, en op een venster van 320 pixels schoot de kolom
       daardoor 24 pixels over de rand (WCAG 1.4.10). Met een minimum van 0 mag
       de kolom krimpen en doet de img{max-width:100%} hierboven zijn werk. */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start;
}
.formulier__tekst { max-width: none; }
@media (min-width: 900px) {
    .blok--formulier-naast .blok__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .formulier__tekst { max-width: 46ch; }
}

/* Velden volgens het ontwerp. */
.formulier__kaart .formulier__veld > label {
    font-size: 0.84375rem; font-weight: 600; margin-bottom: 6px;
}
.formulier__kaart :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select) {
    background: var(--wit); border: 1px solid var(--rand-veld);
    border-radius: var(--radius-knop); min-height: 46px;
}
.formulier__kaart textarea {
    background: var(--wit); border: 1px solid var(--rand-veld);
    border-radius: var(--radius-knop); min-height: 140px;
}
/* Volle breedte alleen op mobiel, waar de kolom smal is en een groot raakvlak
   helpt. Op desktop zo breed als zijn tekst: op /bedrijfsfotografie-in-nijmegen
   staat de kaart in één kolom over de hele sectie, en werd "Verzenden" op een
   venster van 1440px een zwarte balk van 1254 pixels. Dat leest als een banner
   en niet meer als een knop. Zelfde grens en dezelfde reden als de knoppen in
   de CTA-band (`.blok--cta .cta__acties .btn` hierboven). */
@media (max-width: 767px) {
    .formulier__kaart .formulier__knop { width: 100%; }
}

/* Een keuzeveld wordt een rij chips: wit met een rand, en zwart zodra hij
   aanstaat. Het vinkje zelf blijft er voor toetsenbord en schermlezer. */
.formulier__kaart .formulier__opties { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.formulier__kaart .formulier__optie {
    display: inline-flex; align-items: center; gap: 0;
    border: 1px solid var(--rand-veld); background: var(--wit);
    border-radius: var(--radius-knop); padding: 9px 16px;
    font-size: 0.84375rem; font-weight: 600; color: var(--gedempt);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.formulier__kaart .formulier__optie input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.formulier__kaart .formulier__optie:has(input:checked) {
    background: var(--zwart); border-color: var(--zwart); color: var(--wit);
}
.formulier__kaart .formulier__optie:has(input:focus-visible) {
    outline: 3px solid var(--oker); outline-offset: 2px;
}

/* ─── Gegevenstabel ───
   Rijen van 120px plus de rest, gescheiden door haarlijnen. */
.gegevens { border-top: 1px solid var(--rand); margin: 0; }
.gegevens__rij {
    /* minmax(0, 1fr) en niet 1fr: die tweede kolom krijgt automatisch
       min-width:auto, en dat is de min-content van wat erin staat. Bij een
       e-mailadres of een adres op één regel is dat breder dan de kolom, en op
       een venster van 320 pixels schoof /contact daardoor 24 pixels over de
       rand (WCAG 1.4.10). De overflow-wrap hoort erbij: krimpen alleen helpt
       niet als het woord zelf niet mag afbreken. */
    display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px;
    padding: 18px 0; border-bottom: 1px solid var(--rand);
    font-size: var(--klein);
}
.gegevens__rij dt, .gegevens__label { font-weight: 700; margin: 0; }
.gegevens__rij dd, .gegevens__waarde {
    margin: 0; color: var(--intro-tekst); line-height: 1.6;
    overflow-wrap: anywhere;
}
.gegevens__waarde a { font-weight: 600; }
.gegevens__elders { display: flex; flex-wrap: wrap; gap: 18px; }

/* ─── Prijslijst ───
   Regels met een stippellijn tussen de omschrijving en het bedrag, zoals de
   tarieven op de contactpagina. De stippellijn is een border-bottom op een
   tussenliggend element, zodat hij precies tot aan het bedrag loopt. */
.prijslijst { margin: 0 0 var(--r4); }
.prijslijst__groep + .prijslijst__groep { margin-top: var(--r4); }
.prijslijst__regel {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
    gap: 8px; padding: 4px 0;
    font-size: var(--klein);
}
.prijslijst__regel span:nth-child(2) {
    border-bottom: 1px dotted var(--rand); transform: translateY(-4px);
}
.prijslijst__bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prijslijst__noot { margin: 0; font-size: var(--fijn-maat); color: var(--fijn); }

.uitgelicht__datum { margin: 0; font-size: var(--fijn-maat); color: var(--fijn); }
.formulier__kolom { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero__badge { margin: 0; }
.hero__badge .badge { font-size: 0.8125rem; padding: 7px 14px; }

/* ─── Uitschrijfpagina ─── */
.uitschrijven__reden {
    margin: var(--r5) 0;
    padding: var(--r4);
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: 4px;
}
.uitschrijven__reden fieldset { border: 0; padding: 0; margin: 0 0 var(--r3); }
.uitschrijven__reden legend { padding: 0; margin-bottom: var(--r3); font-size: var(--klein); }
.uitschrijven__optie {
    display: flex; align-items: baseline; gap: var(--r2);
    padding: 0.35rem 0; cursor: pointer;
}
.uitschrijven__optie input { margin: 0; flex-shrink: 0; }
.uitschrijven__toelichting { display: block; margin-bottom: var(--r3); }
.uitschrijven__toelichting span {
    display: block; margin-bottom: var(--r2); font-size: var(--klein); color: var(--gedempt);
}
.uitschrijven__toelichting textarea {
    width: 100%; padding: 0.6rem 0.75rem;
    border: 1px solid var(--rand); border-radius: 4px;
    font: inherit; font-size: var(--klein);
}
.uitschrijven__dank { color: var(--oker); font-weight: 600; }
.uitschrijven__kop { margin-top: var(--r6); }
.uitschrijven__pauze {
    margin: var(--r5) 0;
    padding: var(--r4);
    background: var(--papier);
    border-left: 3px solid var(--goud);
    border-radius: 0 4px 4px 0;
}
.uitschrijven__pauze h2 { margin: 0 0 var(--r2); font-size: var(--h3, 1.25rem); }
.uitschrijven__pauze p { margin: 0 0 var(--r3); }
.uitschrijven__pauze form { margin: 0; }

/* ─── De vier zinnen op de bevestigingspagina ───
   Geen wit kaderblok met een formulier erin: dat patroon past niet in het
   ontwerp. Hetzelfde papier met een gouden streep als het pauzeblok hierboven,
   en de vier antwoorden zijn regels die je aanklikt, geen knoppenrij. Ze zijn
   even breed als hun zin en niet breder, dus op desktop nooit de volle breedte;
   op mobiel lopen ze vanzelf tot de rand. */
.keuzevraag {
    margin: var(--r5) 0;
    padding: var(--r4);
    background: var(--papier);
    border-left: 3px solid var(--goud);
    border-radius: 0 4px 4px 0;
}
.keuzevraag h2 { margin: 0 0 var(--r2); font-size: var(--h3, 1.25rem); }
.keuzevraag p { margin: 0; }
.keuzevraag p + p { margin-top: var(--r3); }
.keuzevraag form { margin: 0; }
.keuzevraag fieldset {
    display: flex; flex-direction: column; align-items: flex-start;
    border: 0; padding: 0; margin: 0;
}
.keuzevraag legend { padding: 0; margin-bottom: var(--r3); font-size: var(--klein); }
.keuzevraag__optie {
    max-width: 100%;
    padding: 0.55rem 0;
    border: 0; border-bottom: 1px solid var(--rand);
    background: none;
    font: inherit; text-align: left; color: inherit;
    cursor: pointer;
}
.keuzevraag__optie:last-child { border-bottom: 0; }
.keuzevraag__optie:hover,
.keuzevraag__optie:focus-visible { color: var(--oker); }
.keuzevraag__dank { color: var(--oker); font-weight: 600; }

/* ─── Agenda ───
   Een lijst met de dag links, wat er gebeurt in het midden en de tijd rechts.
   Datum en weekdag staan op elkaar: het cijfer vind je scannend terug, de
   weekdag bepaalt of het uitkomt. */
.agenda__maand {
    margin: var(--r6) 0 var(--r3);
    font-size: var(--h3);
}
.agenda__maand:first-of-type { margin-top: 0; }
.agenda__lijst { list-style: none; margin: 0; padding: 0; }
.agenda-item {
    display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: baseline;
    gap: var(--r3);
    padding: 16px 0;
    border-top: 1px solid var(--rand);
}
.agenda-item__dag { display: flex; align-items: baseline; gap: 6px; }
.agenda-item__cijfer { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.agenda-item__weekdag { font-size: var(--fijn-maat); color: var(--gedempt); }
.agenda-item__wat a { font-weight: 600; }
.agenda-item__waar {
    display: block; font-size: var(--klein); color: var(--gedempt); margin-top: 2px;
}
.agenda-item__wanneer {
    font-size: var(--klein); color: var(--gedempt); white-space: nowrap;
}
@media (max-width: 599px) {
    .agenda-item { grid-template-columns: 3rem 1fr; }
    .agenda-item__wanneer { grid-column: 2; }
}

/* Hier stond een blok dat alle tekst binnen `.formulier__kaart` terugkleurde
   naar zwart op een zwarte, donkere of gouden sectie. Dat was nodig zolang de
   kaart een licht vlak had: een wit label op papier is niet te lezen. Nu de
   kaart geen eigen vlak meer heeft staan de labels rechtstreeks op de sectie,
   en moeten ze juist meekleuren mét de sectie. Dat regelt "Op donkere en
   gouden secties moeten labels en tekst meekleuren" bij de basisopmaak van
   `.formulier` al; deze regels wonnen het daarvan en maakten de labels op
   /checklist-portretfotografie zwart op zwart. Op een gouden sectie is de
   tekst sowieso al zwart. */

/* ─── Wandelingen: één blok per datum ───
   Links de maand en de knop, rechts de tekst van díe wandeling. De maand blijft
   bij het meescrollen naast zijn tekst staan (sticky), zodat je bij een lange
   omschrijving nog ziet welke datum je leest. Op smal scherm valt de zijkolom
   boven de tekst, met de knop eronder in de leesrichting. */
.wandelingen__intro { margin-bottom: var(--r5); max-width: 70ch; }

.wandelingen { list-style: none; margin: 0; padding: 0; }

.wandeling {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r3);
    padding: var(--r5) 0;
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}
.wandeling:first-child { border-top: 0; padding-top: 0; }

.wandeling__zij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3); }

/* De Fotowolk voert een eigen merkkleur: rood. Die afwijking hoort bij dat
   submerk en nergens anders, dus staat hij op het blok en níet in :root. Zo kan
   hij niet per ongeluk elders op de site opduiken. */
.blok--wandelingen { --wandeling-merk: var(--koraal); }
.blok--wandelingen[data-merk="fotowolk"] { --wandeling-merk: #cc0000; }

/* Maten en kleuren gemeten op de livepagina: badge 31px met zwarte tekst op
   rood, knop zwart met witte tekst. */
.wandeling__badge {
    margin: 0;
    background: var(--wandeling-merk);
    color: var(--wit);
    font-weight: 600;
    font-size: 1.50rem;    /* 24px */
    line-height: 1.8;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    white-space: nowrap;
}

.wandeling__form { margin: 0; }
.wandeling__knop {
    width: 100%;
    background: #000;      /* écht zwart, niet de huis-#111 */
    color: var(--wit);
    font-size: 1.24rem;    /* 19,8px */
    border-radius: 6px;
}
/* Hover volgt de huis-CTA: goud, net als elke andere .btn--cta. Hier stond
   var(--merk, #cc0000), en --merk bestaat alleen op [data-merk="fotowolk"] —
   dus overal élders viel de hover terug op het Fotowolk-rood, ook op
   /workshops. De Fotowolk houdt zijn eigen rood in de regel eronder. */
.wandeling__knop:hover { background: var(--goud-hover); color: var(--zwart); }
[data-merk="fotowolk"] .wandeling__knop:hover { background: var(--merk); color: var(--wit); }

/* De eerstvolgende datum die nog te boeken is, is de hoofdactie van de lijst
   en krijgt de gewone huis-CTA terug: goud met zwarte tekst. Eén gouden knop
   per lijst, want vijftien gelijkwaardige zijn geen keuze. Welke rij dat is,
   bepaalt Wandelingen::render() — dat hangt van de bezetting af en is dus
   niets voor een :first-child. Ook bij de Fotowolk goud: dit is de huisactie
   en geen merkaccent, en de rode hover blijft voor de overige knoppen. */
.wandeling__knop--primair { background: var(--goud); color: var(--zwart); }
.wandeling__knop--primair:hover,
[data-merk="fotowolk"] .wandeling__knop--primair:hover {
    background: var(--goud-hover);
    color: var(--zwart);
}

.wandeling__kop { color: #383838; }

/* "vol" en "boeken gesloten" staan op dezelfde plek als de knop en zien er
   hetzelfde uit: allebei zeggen ze dat je hier niet terechtkunt. Twee klassen,
   want in de HTML is de reden verschillend. */
.wandeling__vol,
.wandeling__telaat {
    margin: 0;
    font-weight: 600;
    color: var(--zwart);
    opacity: 0.6;
}

.wandeling__kop { margin: 0 0 var(--r3); }
.wandeling__inhoud .content, .wandeling__tekst { max-width: 70ch; }
/* De omschrijving staat in de HTML ná de knop, zodat een telefoon hem daar ook
   ná de knop stapelt; zie rij(). Op desktop haalt het raster hem terug naar
   rechts. Deze marge vervangt de ruimte die hij binnen .wandeling__inhoud had. */
.wandeling__tekst { margin-top: var(--r3); }
.wandeling__thema { margin-top: 0; }

/* ─── De datum vooraan ───
   Michiel, 15 september 2026: op de lijst van vijftien rijen begon de kop op
   negen rijen met dezelfde vier woorden en stond de dag achteraan. De datum
   staat nu vooraan en voluit, met het jaar, want de agenda loopt tot eind 2027.
   Tabulaire cijfers zodat de datums onder elkaar uitlijnen ondanks verschillende
   cijferbreedtes; nowrap omdat "za 3 okt 2026" niet hoort te breken. */
.wandeling__datum {
    margin: 0;
    display: flex; flex-direction: column; gap: 2px;
    font-weight: 700; color: var(--zwart);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* De tweede dag van een tweedaagse staat eronder en is een aanvulling, geen
   tweede keuze. Wél dezelfde lettergrootte als de regel erboven: kleiner zetten
   maakte er optisch een voetnoot van, en het is gewoon de tweede dag. Michiel,
   15 september 2026. Het lichtere gewicht en de gedempte kleur blijven, want die
   laten zien dat de regel bij de datum erboven hoort en geen losse datum is. */
.wandeling__datum-dag--tweede { font-weight: 600; color: var(--gedempt); }

/* Draagt het blok een submerk, dan draagt de datum het accent van dat merk.
   Michiel, 15 september 2026: de rode maandbadge die hier stond was het enige
   rood in de Fotowolk-lijst, en dat wilde hij houden toen de badge voor de
   datum plaatsmaakte. Kleur uit --wandeling-merk, dus dat rood staat nog steeds
   op één plek (zie .blok--wandelingen[data-merk] hierboven).

   Alleen bij een blok mét data-merk, en alleen in de gestapelde variant: op
   /workshops en /tweedaagse is er geen submerk en blijft de datum zwart.

   Contrast nagerekend, niet aangenomen: #cc0000 haalt 5,89:1 op wit en 5,55:1
   op --papier. De datum is vet op 17px, dus geen "grote tekst", en dan is 4,5:1
   de eis. Allebei ruim erboven. */
.blok--wandelingen[data-merk] .wandeling:not(.wandeling--compact) .wandeling__datum {
    color: var(--wandeling-merk);
}

/* Het vlaggetje achter de plaatsnaam. Een dun randje eromheen, want een witte
   baan (Nederland, Frankrijk) loopt anders weg in de achtergrond en dan lijkt de
   vlag een stukje kleur in plaats van een vlag. `vertical-align` op de tekst en
   niet op het midden: de kop staat in kapitalen, dus het optische midden ligt
   hoger dan het echte. */
.vlag {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.02em;
    border: 1px solid rgba(17, 17, 17, 0.18);
    border-radius: 1px;
}

/* Het soort dag, klein onder de kop: "Workshop conceptuele straatfotografie". */
.wandeling__soort { margin: 4px 0 0; font-size: var(--klein); color: var(--gedempt); }

/* ─── Compacte wandeling: één rij ───
   Voor een overzicht als /workshops, waar elke datum maar één regel is: titel
   en datum links, prijs in het midden, knop rechts — in plaats van de
   gestapelde opzet met een groot maandbadge die bij de Fotowolk hoort. */
/* Bovenaan uitlijnen en niet centreren. Michiel, 15 september 2026, over de
   live lijst: de datum zakte naar het midden van het blok met plaatsnaam en
   soort ernaast, en het prijsblok deed hetzelfde. Gemeten stond de datum 23px
   lager dan de prijs. Nu beginnen de drie kolommen op dezelfde lijn.

   Alleen de compacte variant: de gestapelde (/fotowolk) staat in een raster met
   `align-items: start` en verandert hier niet van. */
.wandeling--compact {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--r3) 28px;
}
.wandeling--compact .wandeling__inhoud { flex: 1 1 200px; min-width: 0; }
.wandeling--compact .wandeling__kop { margin: 0; font-size: 1.125rem; font-weight: 700; }
/* De rechterkolom houdt zijn breedte, ook als er geen knop in staat.
   Gemeten op 15 september 2026: op een volle rij vervangt het woordje "vol" de
   knop, waardoor die kolom van 170px naar 24px kromp. De inhoudskolom groeit
   (`flex: 1 1 200px`) en slokte die 146px op, dus schoof het prijsblok van die
   ene rij 146px naar rechts. Het prijsblok zelf was niet de oorzaak: dat is op
   élke rij 162px breed en begint op dezelfde x.

   11rem is de breedte van "Boek deze datum" plus wat lucht. Staat er op een
   pagina een langer knoplabel, dan groeit de kolom gewoon mee; het gaat erom
   dat hij niet kleiner wordt dan een knop. */
.wandeling--compact .wandeling__zij { order: 3; flex: 0 0 auto; }
/* "vol" of "boeken gesloten" op de plek van de knop, met een onzichtbare kopie
   van het knoplabel eronder die de kolom even breed houdt als een knop. Zonder
   die kopie kromp de kolom van 224px naar 24px en schoof het prijsblok van die
   ene rij 48px uit de pas; zie Wandelingen::staat() voor waarom een vast getal
   in de CSS dat niet oplost. Allebei in dezelfde rastercel, dus de brede
   onzichtbare bepaalt de breedte en de zichtbare staat erbovenop. */
.wandeling__staat { margin: 0; display: grid; align-items: center; }
.wandeling__staat > * { grid-area: 1 / 1; }
.wandeling__staat-maat { visibility: hidden; }
/* Onder 768px staat er niets naast elkaar: de rij wrapt en elke kolom krijgt
   zijn eigen regel. Dan valt er ook niets uit te lijnen, en houdt die
   onzichtbare knop alleen nog een gat van zijn eigen hoogte open boven en onder
   het woordje "vol". Dus weg ermee, en het wordt weer een gewone regel. */
@media (max-width: 767px) {
    .wandeling__staat { display: block; }
    .wandeling__staat-maat { display: none; }
}
.wandeling--compact .wandeling__vol,
.wandeling--compact .wandeling__telaat { text-align: left; }
.wandeling--compact .wandeling__badge { display: none; }
/* De datumkolom houdt op elke rij dezelfde breedte, anders staan de plaatsnamen
   in een rafelige kolom. 9rem past "za 3 okt 2026" en het Duitse
   "Sa 3. Okt 2026"; op een telefoon mag hij smaller en boven de rest staan. */
.wandeling--compact .wandeling__datum { order: 0; flex: 0 0 auto; font-size: 1.0625rem; }
@media (min-width: 768px) {
    .wandeling--compact .wandeling__datum { min-width: 9rem; }
}
/* De plaats is hier de tweede blikvanger na de datum. Kapitalen via CSS en niet
   in de tekst, zodat een schermlezer "Antwerpen" leest en niet losse letters.
   Alleen in de compacte lijst: daar is de kop een plaatsnaam. Op /fotowolk is
   het de naam van de wandeling ("Rondje Spiegelwaal") en die hoort gewoon te
   staan zoals hij geschreven is. */
.wandeling--compact .wandeling__plaats { text-transform: uppercase; letter-spacing: 0.01em; }
.wandeling--compact .wandeling__knop { width: auto; white-space: nowrap; }
.wandeling__prijs { order: 2; flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.wandeling__prijs-bedrag { font-weight: 700; font-size: 1.125rem; color: var(--zwart); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.wandeling__prijs-fijn { font-size: 0.78125rem; color: var(--fijn); }
/* Zelfde actieprijs als in de datumkeuze van het koopblok, zie actiePrijs()
   in helpers.php: doorgestreepte oude prijs, nieuwe prijs, klein label. */
.wandeling__prijs-was { font-weight: 400; font-size: 0.875rem; color: var(--fijn); }
.wandeling__prijs-actie { font-size: 0.78125rem; font-weight: 600; color: var(--oker); }

@media (min-width: 768px) {
    .wandeling {
        grid-template-columns: 160px 1fr;
        gap: var(--kolom-gap);
    }
    /* De linkerkolom van de gestapelde variant (/fotowolk) hield de maandbadge
       en de knop. De badge is vervangen door de volledige datum; de rest van de
       kolom blijft staan zoals hij was. Expliciete gebieden, want de volgorde in
       de HTML is datum, inhoud, prijs, knop en die loopt anders vanzelf de
       verkeerde cel in. */
    /* Datum, prijs en knop vormen één blok bovenaan de linkerkolom, en niet
       drie dingen met gaten ertussen. De vierde rij is leeg en krijgt alle
       overgebleven hoogte (1fr); zonder die rij verdelen de drie zich over de
       volle hoogte van de tekstkolom en stond de knop zo'n 350px onder de
       datum. Michiel wil hem in beeld hebben zodra je de rij begint te lezen,
       niet pas na de hele omschrijving. */
    .wandeling:not(.wandeling--compact) {
        grid-template-areas: "datum inhoud" "prijs tekst" "knop tekst" "rest tekst";
        grid-template-rows: auto auto auto 1fr;
        row-gap: var(--r3);
        align-items: start;
    }
    .wandeling:not(.wandeling--compact) .wandeling__datum { grid-area: datum; }
    .wandeling:not(.wandeling--compact) .wandeling__inhoud { grid-area: inhoud; }
    .wandeling:not(.wandeling--compact) .wandeling__tekst { grid-area: tekst; }
    .wandeling:not(.wandeling--compact) .wandeling__prijs { grid-area: prijs; }
    .wandeling:not(.wandeling--compact) .wandeling__zij { grid-area: knop; }
    .wandeling__zij {
        flex-direction: column;
        align-items: stretch;
        gap: var(--r3);
        position: sticky;
        /* --header-hoogte (site.js): zelfde reden als .product-hero__info
           hierboven — de vaste var(--r6) hield geen rekening met de sticky
           header (en een eventueel nog open aankondigingsbalk) en schoof
           hier onder de header. */
        top: calc(var(--header-hoogte, 6rem) + 1rem);
        align-self: start;
    }
    .wandeling__badge { text-align: center; }
}

/* Het Fotowolk-wordmerk onder de herotekst. Een merk, geen illustratie: het
   staat op ware grootte en groeit niet mee met de kolom. */
.hero__merk { margin: var(--r4) 0 0; }
.hero__merk img { display: block; width: 180px; max-width: 100%; height: auto; }

/* ─── Fotowolk: een eigen merk op een eigen adres ───
   Deze pagina staat ook op fotowolk.nl en voert een eigen kleur (rood). De
   afwijking hangt aan data-merk="fotowolk" en niet aan :root, zodat hij nergens
   anders op de site kan opduiken. */
[data-merk="fotowolk"] { --merk: #cc0000; }

[data-merk="fotowolk"] .hero__titel { color: var(--merk); }

/* Gemeten op de livepagina: de leadregel is donkergrijs en vet op 25px, niet
   rood. Alleen de kop draagt de merkkleur. */
[data-merk="fotowolk"] .hero__sub {
    color: #383838;
    font-weight: 700;
    font-size: 1.575rem;   /* 25,2px */
    line-height: 1.35;
    max-width: 34ch;
}

/* De hero lijnt bovenaan uit. Met align-items:center zakt de kop naar het
   midden zodra de rechterkolom hoger wordt dan de tekst, en dat is precies wat
   er gebeurt zodra het koopkaartje onder de foto staat. */
.blok--hero[data-merk] .blok__inner,
.blok--hero:has(.hero__beeld .koopblok) .blok__inner { align-items: start; }

/* De hero draagt hier twee dingen in de rechterkolom: de foto en het
   koopkaartje eronder. Ze staan boven elkaar en houden hun eigen ruimte.

   `align-self: start` is het spiegelbeeld van de regel hierboven. Daar zakt de
   kop naar het midden omdat de rechterkolom hoger is; hier zakt de foto naar
   het midden zodra de tekstkolom hoger is. Op
   /parijs-straatfotografie-workshop stond daardoor 369px wit boven de foto, en
   zag je in het eerste scherm een leeg vlak met daaronder een halve foto.

   Gemeten op productie op 16 september 2026, in een iframe per pagina: dit
   speelt op 25 van de 40 pagina's met een hero-foto, van 4px op
   /eindhoven-straatfotografie-workshop tot 968px op /drvkkery, en op elke
   breedte vanaf 768px. Daar is het gat juist het grootst (631px op /parijs),
   want de kolommen zijn er smal en de tekst wordt dus hoog.

   Alleen de rechterkolom gaat omhoog, niet `align-items` op de hele rij. Is de
   foto hoger dan de tekst, dan blijft die tekst gecentreerd zoals het ontwerp
   vraagt. Dat is op de veertien overige pagina's zo, waaronder /home en
   /agenda. */
.hero__beeld { display: flex; flex-direction: column; gap: var(--r4); align-self: start; }
.hero__beeld .koopblok {
    background: var(--papier);
    border-radius: var(--radius);
    padding: 24px;
}
.blok--wit .hero__beeld .koopblok { background: var(--papier); }
.koopblok__verwijs { margin: var(--r3) 0 0; }
.koopblok__verwijs .btn { width: 100%; }
/* Boven 767px staat hier een plafond van 20rem op, zie de huisregel bij
   .koopblok__form .btn. */

/* Het koopkaartje in de beeldkolom van een tekst+beeld-sectie. */
.blok__media .koopblok {
    background: var(--papier);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: var(--r4);
}
.blok--wit .blok__media .koopblok { background: var(--papier); }
.blok--papier .blok__media .koopblok,
.blok--papier .hero__beeld .koopblok { background: var(--wit); }

/* ─── Aanmeldstrook: kop gecentreerd, velden en knop op één regel ───
   Zoals de Fotowolk-strook op de live site. Geen kaart: dit blok staat midden
   in een verhaal, niet aan het eind van een trechter, en een lichte kaart op
   zwart trekt daar meer aandacht dan het waard is. */
.blok--formulier-rij .blok__inner { padding-block: var(--sectie-cta); }

.formulier--rij { max-width: 1100px; margin: 0 auto; }

.formulier__header { text-align: center; margin-bottom: var(--r5); }
.formulier__header .formulier__titel { margin: 0 0 var(--r2); }
.formulier__header .formulier__intro { margin: 0; }

.formulier__strook {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r3);
    align-items: end;
}
@media (min-width: 768px) {
    .formulier__strook { grid-template-columns: repeat(3, 1fr) auto; }
}

/* De placeholders zeggen al wat er in het veld hoort. Het label blijft staan
   voor wie het scherm niet ziet. */
.formulier--rij .formulier__veld { margin: 0; }
.formulier--rij .formulier__veld > label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.formulier--rij .formulier__knop { margin: 0; white-space: nowrap; }

/* Praktijkregel op het koopkaartje: tijden en startpunt, cursief onder de
   omschrijving. */
.koopblok__praktisch { margin: calc(var(--r2) * -1) 0 var(--r3); font-size: 0.9375rem; color: var(--fijn); }

/* Persoonlijke afwijking op /fotowolk: het koopkaartje staat onder de tekst in
   de linkerkolom in plaats van onder de foto. Extra lucht ertussen, anders
   plakt de kaart aan de laatste alinea. */
.hero__tekst .koopblok {
    margin-top: var(--r5);
    background: var(--papier);
    border-radius: var(--radius);
    padding: 24px;
}
.blok--papier .hero__tekst .koopblok { background: var(--wit); }

/* Kaal: geen kaart, maar een koopregel die doorloopt onder de tekst. Voor een
   koopblok zonder kop en zonder korte tekst, waar alleen de prijs en de knop
   overblijven: die drie regels in een eigen kader met een rand lezen als een
   gat in de pagina. Zie de toelichting bij `kaal` in Koopblok::render().

   De selectors hebben `.blok` ervoor omdat de regels hierboven `.hero__tekst
   .koopblok` en `.blok--papier .hero__tekst .koopblok` heten: zonder die extra
   klasse wint het vlak van de kaart het alsnog van deze modifier. */
.blok .hero__tekst .koopblok--kaal,
.blok .hero__beeld .koopblok--kaal,
.blok .blok__media .koopblok--kaal,
.koopblok--kaal {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* En dan mag de extra lucht van hierboven er ook af. Die --r5 hoort bij de
   kaart: die heeft een eigen vlak en plakt anders aan de laatste alinea. Kaal
   is er geen vlak, en dan komt die 40px bovenop de kolomafstand van 22px die
   `.hero__tekst` al aanhoudt. Gemeten op /play: 62px tussen de intro en de
   prijs, tegen 22px tussen de titel, de subtitel en de intro onderling. Dat
   leest als een gat. Met 0 volgt de koopregel hetzelfde ritme als de rest van
   de kolom en is de hero weer een blok. */
.blok .hero__tekst .koopblok--kaal { margin-top: 0; }

/* ─── Mobiele infobalk ───
   De live site heeft onderaan een vaste balk met E-mail, Bellen en Kaart,
   alleen op een telefoon. Daar is hij 64px hoog met een icoon boven een
   label van 10px; hier is het een verlengstuk van de zwarte footerband, met
   labels in dezelfde stijl als een kicker. 44px is de ondergrens voor een
   raakvlak, dus 60px zit daar ruim boven. Iconen heeft de front-end niet. */
:root { --infobalk: 60px; }

.infobalk { display: none; }

@media (max-width: 767px) {
    .infobalk {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        background: var(--zwart);
        border-top: 1px solid rgba(242, 242, 242, 0.14);
        /* De hoogte staat op de balk zelf, niet op de items: met border-box
           telt de rand mee en is de balk precies zo hoog als de ruimte die de
           body onderaan vrijhoudt. Anders dekt hij de laatste regel af. */
        min-height: var(--infobalk);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .infobalk__item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--op-zwart);
        font-size: var(--fijn-maat);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .infobalk__item + .infobalk__item {
        border-left: 1px solid rgba(242, 242, 242, 0.14);
    }
    .infobalk__item:hover,
    .infobalk__item:focus-visible { color: var(--goud); }

    /* De balk ligt vast over de onderkant van de pagina heen; deze ruimte
       houdt de laatste footerband vrij.

       max() met --vaste-balk-onder erbij (zie site.js) omdat scroll-padding
       niets meer kan zodra je onderaan de pagina staat: daar valt niet verder
       te scrollen, dus blijft een gefocuste footerlink onder de cookiebanner
       liggen. Alleen extra ruimte zolang die banner er is; hij verdwijnt zodra
       de bezoeker gekozen heeft en dan valt de waarde terug op de balkhoogte.
       Gemeten op /pauze: vijf footerlinks die anders volledig bedekt waren. */
    body {
        padding-bottom: max(
            calc(var(--infobalk) + env(safe-area-inset-bottom)),
            var(--vaste-balk-onder, 0px)
        );
    }

    /* De cookiebanner staat ook onderaan vast. Hij schuift een balkhoogte
       omhoog, anders dekt hij de drie ingangen af.

       Op een telefoon is hij verder compacter dan op een groot scherm. Met de
       maten van het grote scherm was hij 148 pixels hoog en begon hij op
       /nijmegen-straatfotografie-workshop op 584, terwijl "vanaf € 195" daar
       van 582 tot 624 staat: de prijs viel er bij een eerste bezoek volledig
       achter weg, op de pagina waar geboekt wordt (punt 2.45). Gemeten op 375
       bij 812. Met deze maten, en met een bannertekst van twee regels in
       plaats van drie, begint hij op 631 en blijft de prijs leesbaar. De
       knoppen houden hun formaat: dat is een raakvlak. */
    .cookiebanner {
        bottom: calc(var(--r2) + var(--infobalk) + env(safe-area-inset-bottom));
        padding: 0.75rem var(--r3);
        gap: var(--r2);
    }
}

/* ─── Tabellen in lopende tekst ───
   Het designsysteem had hier nog niets voor: geen van de ontworpen pagina's
   heeft een tabel. De teruggehaalde pagina /sensor bestaat vrijwel helemaal uit
   conversietabellen, en die moeten leesbaar zijn zonder de pagina horizontaal
   te laten schuiven. Vandaar een eigen schuifbalk om de tabel heen in plaats
   van om de hele pagina. Alle waarden komen uit de tokens.

   WAAROM `.content` EN NIET `.blok`
   Deze groep stond tot 14 september 2026 op `.blok table` en `.blok th, .blok
   td`, dus op élke tabel in élke sectie. Daarmee gold ze ook voor de
   winkelmand, de afrekenpagina en de bestelbevestiging, die geen lopende tekst
   zijn maar een component met eigen regels — en ze won dat gevecht ook nog,
   want `.blok td` (0,1,1) is specifieker dan `.mand-tabel__prijs` (0,1,0). Drie
   gevolgen op het kooppad: het regelbedrag ging links in zijn kolom staan, de
   productnaam sprong 14px in ten opzichte van de labels erboven, en
   `min-width: 24rem` liet de pagina op een scherm van 375px horizontaal
   wegschuiven met de bedragen buiten beeld.

   `.content` is per blokken-contract de wikkel om editor-HTML, en dat is
   precies waar deze regels voor bedoeld zijn. Nagemeten voor de omzetting: de
   database bevat 16 tabellen in contentvelden, alle 16 binnen een `.content`
   (en toevallig ook alle 16 in een `.tabel-scroll`); geen enkel artikel heeft
   er een; het beheer laadt alleen admin.css en verandert dus niet. Op
   `.content` scopen in plaats van op `.tabel-scroll` houdt de opmaak heel voor
   een tabel die ooit zonder wikkel uit de editor komt.

   Een component hoort hier niet meer onderuit te gaan: `.mand-tabel` staat
   nooit in `.content`. */
.tabel-scroll {
    overflow-x: auto;
    margin: var(--r4) 0;
    -webkit-overflow-scrolling: touch;
}
.blok .content table {
    border-collapse: collapse;
    width: 100%;
    min-width: 24rem;
    font-size: var(--kaart-body);
}
.blok .content th,
.blok .content td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}
.blok .content thead th { font-weight: 700; }
.blok .content tbody tr:last-child td { border-bottom: 0; }

/* ─── Zoeken (punt 1.48) ───
   Vergrootglas in het menu, ná Contact en vóór de taalkeuze (Contact staat
   als laatste item in navigatie_items). Hergebruikt de open/dicht-mechaniek
   van .site-nav__toggle uit site.js (klik-toggle, sluit bij klik buiten,
   Escape): een eigen paneelklasse in plaats van .site-nav__sub, want dat is
   een dropdown-lijst en dit is een invoerveld met suggesties eronder. */
.zoek-widget__knop {
    background: none; border: none; color: #333; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    min-width: 24px; min-height: 24px;
}
.zoek-widget__knop:hover { color: var(--oker); }
.zoek-icoon { display: block; }

.zoek-widget__paneel {
    display: none;
    position: absolute; top: 100%; right: 0;
    width: 20rem; max-width: calc(100vw - 2 * var(--gutter));
    margin-top: 0.5rem;
    background: var(--wit);
    border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    padding: var(--r3);
    z-index: 60;
}
.zoek-widget.site-nav__item--open .zoek-widget__paneel { display: block; }

.zoek-widget__form { display: flex; }
.zoek-widget__input {
    width: 100%; font-family: var(--font); font-size: var(--klein);
    padding: 0.5rem 0.75rem;
    border: var(--rand-breedte) solid var(--rand-veld);
    border-radius: var(--radius);
}
.zoek-widget__suggesties {
    list-style: none; margin: 0.75rem 0 0; padding: 0;
    max-height: 22rem; overflow-y: auto;
    border-top: var(--rand-breedte) solid var(--rand);
}
.zoek-widget__suggesties li { border-bottom: var(--rand-breedte) solid var(--rand); }
.zoek-widget__suggesties li:last-child { border-bottom: none; }
.zoek-widget__suggesties a {
    display: block; padding: 0.6rem 0.25rem; text-decoration: none; color: inherit;
}
.zoek-widget__suggesties a:hover,
.zoek-widget__suggesties a.zoek-widget__suggestie--actief { background: var(--papier); }
.zoek-widget__suggestie-type {
    display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--oker); margin-bottom: 0.15rem;
}
.zoek-widget__suggestie-titel { display: block; font-weight: 600; font-size: var(--klein); }
.zoek-widget__leeg { padding: 0.6rem 0.25rem; font-size: var(--klein); color: var(--gedempt); }

/* Zoekresultatenpagina (/zoeken, /en/search). */
.zoek-pagina { max-width: 46rem; }
.zoek-formulier { display: flex; gap: 0.5rem; margin: var(--r4) 0 var(--r5); }
.zoek-formulier input {
    flex: 1; font-family: var(--font); font-size: 1rem;
    padding: 0.65rem 1rem;
    border: var(--rand-breedte) solid var(--rand-veld);
    border-radius: var(--radius);
}
.zoek-formulier button {
    font-family: var(--font-knop); font-size: var(--klein); font-weight: 600;
    padding: 0.65rem 1.25rem;
    background: var(--zwart); color: var(--wit);
    border: none; border-radius: var(--radius); cursor: pointer;
}
.zoek-formulier button:hover { background: var(--oker); }
.zoek-lijst { list-style: none; margin: 0; padding: 0; }
.zoek-item { border-bottom: var(--rand-breedte) solid var(--rand); }
.zoek-item a { display: block; padding: var(--r3) 0; text-decoration: none; color: inherit; }
.zoek-item a:hover .zoek-item__titel { color: var(--oker); }
.zoek-item__type {
    display: inline-block; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--oker); margin-bottom: 0.2rem;
}
.zoek-item__titel { display: block; font-size: 1.1rem; font-weight: 600; color: var(--zwart); }
.zoek-item__snippet { display: block; margin-top: 0.25rem; color: var(--gedempt); font-size: var(--klein); }
.zoek-leeg { color: var(--gedempt); }

/* De zoekwidget is een .site-nav__item, dus hij zit in het uitklapmenu zodra de
   hamburger verschijnt. Daar hoort het paneel in de regel mee te lopen in
   plaats van er als zwevend kaartje boven te hangen. Zelfde grens als de
   hamburger daarom, en die staat bij .hamburger uitgelegd: verandert hij daar,
   dan hier mee. */
@media (max-width: 1159px) {
    .zoek-widget__paneel {
        position: static; width: auto; max-width: none; margin-top: var(--r2);
        box-shadow: none; border: none; padding: 0;
    }
}

/* ─── Koopblok in een modal ───
   Punt 1.56. Het koopblok is inhoudelijk in orde; het was de plek die niet
   klopte. Het hangt niet meer als los wit kader onder aan een pagina maar
   opent achter een knop, sitewide (zie koopblok-modal.js).

   Het venster ís hier de kaart, dus het blok erin verliest zijn eigen rand en
   achtergrond. Twee kaders in elkaar is precies het witte kaderblok waar dit
   punt over gaat. */
.koopmodal,
.bedanktmodal {
    width: min(34rem, calc(100vw - 2 * var(--r4)));
    max-width: none;
    /* dvh en niet vh: op een telefoon telt vh de adresbalk mee, en dan valt de
       onderkant van het venster (de koopknop) buiten beeld. */
    max-height: min(86dvh, 44rem);
    padding: 0;
    border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius);
    background: var(--wit);
    color: var(--tekst);
    /* De inhoud scrollt binnen het venster; het venster zelf niet. */
    overflow: hidden;
}
/* De browser verbergt een dialog die niet open staat met
   `dialog:not([open]) { display: none }`, en dát is een regel uit de
   browserstijl. Elke auteurregel wint daarvan, ongeacht specificiteit. Stond
   `display: flex` hier zonder `[open]`, dan bleef het venster ná het sluiten
   gewoon in beeld staan: de dialog sloot wél (`open` werd false), maar je zag
   hem nog. Op staging leek het kruisje daardoor niets te doen. */
.koopmodal[open], .bedanktmodal[open] { display: flex; flex-direction: column; }
.koopmodal::backdrop, .bedanktmodal::backdrop { background: rgba(17, 17, 17, 0.62); }

/* ─── Exit intent ───
   Het venster dat op een workshoppagina vraagt waarom iemand niet boekt.
   Dezelfde maat en dezelfde rand als de koopmodal: het is hetzelfde soort
   venster en twee maten naast elkaar leest als twee systemen. `[open]` om
   dezelfde reden als daar - de browser verbergt een gesloten dialog met een
   eigen regel, en elke auteurregel wint daarvan. */
.exitmodal {
    width: min(30rem, calc(100vw - 2 * var(--r4)));
    max-width: none;
    max-height: min(86dvh, 40rem);
    padding: 26px 30px;
    border: var(--rand-breedte) solid var(--rand);
    border-radius: var(--radius);
    background: var(--wit);
    color: var(--tekst);
    overflow-y: auto;
}
.exitmodal[open] { display: block; }
.exitmodal::backdrop { background: rgba(17, 17, 17, 0.62); }

/* 44 bij 44 is het aanraakvlak dat WCAG 2.5.8 vraagt. */
.exitmodal__sluit {
    position: absolute; top: 6px; right: 8px;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--gedempt);
    font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.exitmodal__sluit:hover { color: var(--zwart); }

.exitmodal__titel { margin: 0 44px 0.5rem 0; }
.exitmodal__intro { margin: 0 0 var(--r3); color: var(--gedempt); }
.exitmodal__vraag { font-weight: 600; margin: 0 0 var(--r2); padding: 0; }

/* Een fieldset zonder rand: de legend draagt de vraag, zodat een schermlezer
   bij elke optie hoort waar hij bij hoort. */
.exitmodal__opties { border: none; margin: 0; padding: 0; }
.exitmodal__optie {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.45rem 0; cursor: pointer;
}
.exitmodal__optie input { margin-top: 0.25rem; flex-shrink: 0; }
.exitmodal__toelichting { margin: 0.25rem 0 0 1.7rem; }
.exitmodal__toelichting textarea { width: 100%; }

.exitmodal__suggesties { list-style: none; margin: 0 0 var(--r3); padding: 0; }
.exitmodal__suggesties a {
    display: flex; justify-content: space-between; gap: var(--r2);
    padding: 0.7rem 0; border-bottom: 1px solid var(--rand);
    text-decoration: none; color: inherit;
}
.exitmodal__suggesties a:hover { color: var(--goud-tekst); }
.exitmodal__stad { font-weight: 600; }
.exitmodal__datum { color: var(--gedempt); white-space: nowrap; }

/* Knop en tekstlink naast elkaar, en op een telefoon onder elkaar. Geen knop
   over de volle breedte op desktop; op mobiel mag dat wel. */
.exitmodal__acties {
    display: flex; align-items: center; gap: var(--r3);
    margin-top: var(--r3); flex-wrap: wrap;
}
/* Een <button> met .tekstlink erop houdt de rand en de achtergrond van de
   browser, en dan staat er een kadertje dat op een tweede knop lijkt naast de
   echte. Michiels regel is dat iets wat geen knop is er ook niet als een knop
   uitziet; hier is het wél klikbaar, maar het hoort een tekstlink te zijn en
   niet de gelijke van "Versturen". */
.exitmodal__acties .tekstlink {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.exitmodal__dank { margin: 0; font-weight: 600; }
@media (max-width: 480px) {
    .exitmodal__acties { flex-direction: column; align-items: stretch; }
    .exitmodal__acties .btn { width: 100%; }
}

/* 44 bij 44 is het aanraakvlak dat WCAG 2.5.8 vraagt; het kruisje zelf is
   kleiner. Staat bóven de inhoud, dus de inhoud houdt er rechtsboven ruimte
   voor vrij. */
.koopmodal__sluit {
    position: absolute; top: 6px; right: 8px; z-index: 1;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    /* Wit en niet doorzichtig: de inhoud scrollt eronderdoor, en op een lijst
       met datums werd het kruisje anders onleesbaar. */
    background: var(--wit); border: none; color: var(--gedempt);
    font-size: 1.75rem; line-height: 1; cursor: pointer;
    border-radius: var(--radius);
}
.koopmodal__sluit:hover { color: var(--zwart); }

.koopmodal__body,
.bedanktmodal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Rechtsboven staat de sluitknop: 44 breed plus 8 marge. */
    padding: 26px 30px;
}
.koopmodal__laden { color: var(--gedempt); margin: 0; padding-right: 44px; }

/* Het blok zelf is hier geen kaart meer. */
.koopmodal .koopblok {
    background: none; border: 0; border-radius: 0; padding: 0;
}
.koopmodal .koopblok__titel { margin-right: 44px; }

/* Op een telefoon een blad van onderen: dat is waar de duim zit, en het scheelt
   een venster dat halverwege het scherm zweeft. `margin: auto 0 0` duwt de
   dialog naar de onderrand — de browser centreert hem anders met `margin: auto`.
   92dvh en niet 100: de bovenrand blijft zichtbaar, zodat te zien is dat er een
   pagina achter ligt. */
@media (max-width: 640px) {
    .koopmodal,
    .bedanktmodal {
        width: 100%;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: var(--radius) var(--radius) 0 0;
        border-width: var(--rand-breedte) 0 0;
    }
    .koopmodal__body,
    .bedanktmodal__body { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
}

/* ─── Bevestiging na het versturen van een formulier ───
   Het venster is hetzelfde als dat van de koopmodal: zelfde maat, zelfde rand,
   zelfde blad van onderen op een telefoon. Daarom deelt het die regels hierboven
   in plaats van ze over te schrijven; alleen de inhoud verschilt. Er zit geen
   kruisje rechtsboven, want in het paneel staat een knop "Sluiten".

   In de modal is het venster zelf het vlak, dus het paneel verliest daar zijn
   eigen wassing en padding. Twee vlakken in elkaar is precies het kaderblok
   waar punt 1.56 over gaat. */
.bedanktmodal .formulier__melding--ok {
    background: none; padding: 0; margin: 0;
}
/* Het paneel krijgt de focus zodra de modal opengaat, zodat een schermlezer de
   bevestiging voorleest. De gouden focusrand van :focus-visible trok daar een
   kader binnen het venster: precies het kader-in-een-kader dat hierboven net
   is weggehaald. Weg mag hier, want dit is geen bedienbaar element en met de
   tabtoets kom je er niet; de twee knoppen houden hun rand gewoon. In de
   pagina, ná het sluiten, blijft de rand wél staan: daar zegt hij waar je bent,
   net als bij de foutmelding. */
.bedanktmodal .formulier__melding--ok:focus { outline: none; }

/* Keuzehulp. Vijf keuzes als menu, en onder de gekozen regel de aanbeveling met
   één alternatief ernaast. De vijf links werken ook zonder JavaScript: dan is
   het een lijst die naar vijf pagina's wijst. Alles hieronder moet dus in beide
   toestanden kloppen, niet alleen in de toestand die de JS maakt. */
.keuzehulp__vraag { margin: 0 0 var(--r3); }
.keuzehulp__intro { margin: 0 0 var(--r4); max-width: 62ch; }
.keuzehulp__wegen { list-style: none; margin: 0; padding: 0; }
.keuzehulp__weg-rij { border-top: 1px solid var(--rand); }
.keuzehulp__weg-rij:last-child { border-bottom: 1px solid var(--rand); }

/* De rij draagt de lijn over de volle breedte, dus de link zelf niet: twee
   strepen onder elkaar op verschillende breedtes leest als een fout. Daarmee
   vervalt ook de hover van .pijllink--groot, die diezelfde rand goud kleurt;
   de tekstkleur neemt dat over. */
.keuzehulp__weg {
    display: flex; justify-content: space-between; align-items: baseline;
    width: 100%; padding: 18px 0;
    border-bottom: 0;
}
.keuzehulp__weg:hover { color: var(--oker); }
.keuzehulp__weg::after { margin-left: var(--r3); }

/* Open: de pijl wijst naar het paneel eronder in plaats van naar de pagina
   erachter. De hover-regel van .pijllink--groot zet translateX op datzelfde
   pseudo-element, dus die wordt hier expliciet overschreven; anders springt de
   pijl terug naar rechts zodra de muis erop staat. */
.keuzehulp__weg[aria-expanded="true"] { color: var(--oker); }
.keuzehulp__weg[aria-expanded="true"]::after,
.keuzehulp__weg[aria-expanded="true"]:hover::after { transform: rotate(90deg); }

.keuzehulp__paneel {
    display: grid; gap: var(--r4);
    padding: var(--r2) 0 var(--r5);
}
@media (min-width: 768px) {
    .keuzehulp__paneel {
        grid-template-columns: 3fr 2fr; gap: var(--kolom-gap);
        align-items: start;
    }
}
/* display:grid wint van het hidden-attribuut. Zonder deze regel staan alle vijf
   panelen open zodra de opmaak laadt, ook bij een bezoeker zonder JavaScript,
   en is de keuzehulp precies de muur tekst die hij moest vervangen. */
.keuzehulp__paneel[hidden] { display: none; }

.keuzehulp__titel { margin: 0 0 var(--r2); font-size: var(--h3); }
.keuzehulp__tekst { margin: 0 0 var(--r3); max-width: 58ch; }
.keuzehulp__actie { margin: 0; }

/* Het alternatief is een echte tweede weg en krijgt daarom ruimte, maar geen
   kader: een scheidingslijn, links op breed en boven op smal. */
.keuzehulp__alt { border-top: 1px solid var(--rand); padding-top: var(--r3); }
@media (min-width: 768px) {
    .keuzehulp__alt {
        border-top: 0; border-left: 1px solid var(--rand);
        padding: 0 0 0 var(--kolom-gap);
    }
}
.keuzehulp__alt-kop {
    margin: 0 0 var(--r1);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--fijn);
}
.keuzehulp__alt-titel { margin: 0 0 var(--r2); font-size: var(--h4); }
.keuzehulp__alt-tekst { margin: 0 0 var(--r3); color: var(--gedempt); font-size: var(--klein); }
.keuzehulp__alt-actie { margin: 0; }
.keuzehulp__alt-link { font-size: var(--klein); }

/* Op een donkere grond is var(--rand) een harde lichte streep. */
.blok--donker .keuzehulp__weg-rij,
.blok--zwart .keuzehulp__weg-rij,
.blok--donker .keuzehulp__alt,
.blok--zwart .keuzehulp__alt { border-color: rgba(255, 255, 255, 0.22); }