/* ============================================================================
   Buurtbudget Kruiskamp Koppel — ontwerpsysteem "Ballonnen op een rustige lucht"
   ----------------------------------------------------------------------------
   Uitgangspunten:
   - Kleur komt uit het logo (de zes ballonnen + het oranje woordmerk). Omdat die
     kleuren zelf te licht zijn voor tekst, heeft elke kleur een schaal: lichte
     tinten voor vlakken, donkere varianten voor tekst en knoppen. Alle
     tekst/achtergrond-combinaties in dit bestand zijn nagerekend op WCAG-contrast
     (zie de per-token vermelde ratio's) en zitten op AAA (7:1) of hoger.
   - Rust door ruimte: één kolom leestekst, ruime regelafstand, grote secties.
   - Beweging is versiering, nooit informatie: alles binnen
     `prefers-reduced-motion: no-preference`.
   - Geen externe verzoeken: lettertypen staan lokaal in static/pages/fonts.
   ============================================================================ */

/* --- 1. Lettertypen (lokaal, variabel) ----------------------------------- */

/* Fraunces — zachte schreefletter voor koppen. Variabele assen: opsz, wght,
   SOFT (afronding) en WONK (eigenzinnige lettervormen). */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/fraunces-latin.be55f75f1668.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/fraunces-latin-ext.0adbead0da30.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* Nunito Sans — humanistische schreefloze voor lopende tekst: open letters,
   ronde uiteinden (past bij de ballonnen) en een grote x-hoogte, wat helpt bij
   lezen op een telefoon en bij tekstvergroting. */
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin.29fab48fb240.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-ext.31a914925919.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* --- 2. Ontwerptokens ---------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* De zes logokleuren, precies zoals in het logo (400 = de ballon zelf).
       50/100/200 zijn vlakken en randen; 600/700/800 zijn tekst- en knopkleuren.
       Dit is een volledige schaal: niet elke trede wordt op dit moment gebruikt,
       maar hij staat er compleet in zodat een nieuw onderdeel niet opnieuw
       kleuren hoeft uit te rekenen. Alle 700-tinten halen minstens 7,05:1 op
       elk vlak van de site. */
    --paars-50: #f5f5ff;   --paars-100: #ebeaff;   --paars-200: #d6d5fa;
    --paars-400: #8f8bc3;  --paars-600: #706ba4;   --paars-700: #4f497f;

    --geel-50: #fff5d0;    --geel-100: #ffeab6;    --geel-200: #f9d485;
    --geel-400: #ffc313;   --geel-600: #a06500;    --geel-700: #7a4000;

    --groen-50: #edfedb;   --groen-100: #dff6c6;   --groen-200: #c6e69f;
    --groen-400: #99cb51;  --groen-600: #507f00;   --groen-700: #2f5a00;

    --roze-50: #ffe9f9;    --roze-100: #ffdaf0;    --roze-200: #ffbdde;
    --roze-400: #f171ab;   --roze-600: #c34080;    --roze-700: #99105d;

    --blauw-50: #ddfcff;   --blauw-100: #c8f4ff;   --blauw-200: #a1e3ff;
    --blauw-400: #27aae1;  --blauw-600: #0079b0;   --blauw-700: #005287;
    --blauw-800: #004478;

    --oranje-50: #fff0d5;  --oranje-100: #ffe4be;  --oranje-200: #ffcb92;
    --oranje-400: #f79521; --oranje-600: #b85600;  --oranje-700: #8f3000;

    /* Papier en inkt. Het warme crème en de licht paarsige inkt komen uit
       dezelfde kleurruimte als het logo, zodat alles bij elkaar hoort. */
    --papier: #fffaf4;
    --papier-doorschijnend: rgb(255 250 244 / 0.88);
    --papier-vrijwel: rgb(255 250 244 / 0.97);
    --papier-diep: #fdf3e8;
    --oppervlak: #ffffff;
    --inkt: #1d1a32;          /* op papier: 16,2:1 — AAA */
    --inkt-vast: #171426;     /* klapt NIET om in donkere modus: voor tekst op
                                 de ballonkleuren (400), die in beide thema's
                                 licht zijn. Levert 5,7:1 op de paarse ballon tot
                                 11,2:1 op de gele. Paars kan met géén enkele
                                 tekstkleur 7:1 halen (met zwart maximaal 6,65:1),
                                 dus deze twee badges blijven op AA staan; de
                                 informatie erin staat altijd ook als gewone
                                 tekst ernaast. */
    --inkt-zacht: #4e4e5f;    /* minimaal 7,09:1 op élk lichtvlak — AAA */
    --rand: #ebe2d6;
    --rand-sterk: #d3c8b8;

    /* Functionele rollen */
    /* Alle 700-tinten hierboven halen minstens 7,05:1 (AAA) op élk vlak dat
       op de site voorkomt, inclusief het donkerste tintvlak. Hover maakt het
       contrast hoger, nooit lager. */
    --link: var(--blauw-700);          /* minimaal 7,15:1 — AAA */
    --link-hover: var(--blauw-800);    /* minimaal 8,71:1 */
    --actie: #993900;                  /* witte tekst erop: 7,14:1 — AAA */
    --actie-tekst: #ffffff;
    --actie-hover: #751300;            /* witte tekst erop: 11,35:1 */
    --focus-lijn: var(--inkt);
    --focus-halo: var(--geel-400);

    --melding-fout-vlak: #fdecea;
    --melding-fout-tekst: #8a1c0d;     /* op eigen vlak 7,1:1 */
    --melding-goed-vlak: var(--groen-50);
    --melding-goed-tekst: var(--groen-700);

    /* Accentkleur van de huidige sectie/kaart. Elk blok kan --accent en
       --accent-vlak overschrijven; de rest van de stijl volgt automatisch. */
    --accent: var(--blauw-400);
    --accent-tekst: var(--blauw-700);
    --accent-vlak: var(--blauw-50);

    /* Typografie */
    --font-kop: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
        Georgia, serif;
    --font-tekst: "Nunito Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
        Roboto, "Helvetica Neue", Arial, sans-serif;

    --tekst-basis: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --tekst-klein: clamp(0.9rem, 0.87rem + 0.12vw, 0.975rem);
    --tekst-lead: clamp(1.2rem, 1.09rem + 0.55vw, 1.5rem);
    --kop-1: clamp(2.1rem, 1.35rem + 3.3vw, 3.85rem);
    --kop-2: clamp(1.6rem, 1.28rem + 1.5vw, 2.4rem);
    --kop-3: clamp(1.2rem, 1.11rem + 0.42vw, 1.42rem);

    /* Ruimte — één schaal, zodat afstanden overal familie van elkaar zijn */
    --ruimte-xs: 0.5rem;
    --ruimte-s: 0.875rem;
    --ruimte-m: 1.5rem;
    --ruimte-l: 2.25rem;
    --ruimte-xl: 3.5rem;
    --ruimte-2xl: clamp(4rem, 8vw, 7rem);
    --ruimte-3xl: clamp(5rem, 11vw, 9.5rem);

    /* Vorm */
    --rond-s: 0.5rem;
    --rond-m: 0.875rem;
    --rond-l: 1.5rem;
    --rond-ballon: 50% 50% 46% 46% / 58% 58% 42% 42%;

    --schaduw-rust: 0 1px 2px rgba(29, 26, 50, 0.04),
        0 6px 20px -8px rgba(29, 26, 50, 0.07);
    --schaduw-zweef: 0 2px 4px rgba(29, 26, 50, 0.05),
        0 18px 40px -14px rgba(29, 26, 50, 0.16);

    /* Beweging — één taal voor alle overgangen */
    --duur-kort: 180ms;
    --duur-mid: 320ms;
    --duur-lang: 620ms;
    --soepel: cubic-bezier(0.22, 0.7, 0.28, 1);
    --zwiep: cubic-bezier(0.34, 1.4, 0.5, 1);

    --breedte-max: 76rem;
    --breedte-lees: 40rem;
}

/* Donkere modus: dezelfde ballonkleuren, maar de lichte varianten worden nu de
   tekstkleuren. Voor mensen die gevoelig zijn voor licht is dit geen extraatje
   maar een toegankelijkheidsvoorziening. */
@media (prefers-color-scheme: dark) {
    :root {
        --papier: #121022;
        --papier-doorschijnend: rgb(18 16 34 / 0.88);
        --papier-vrijwel: rgb(18 16 34 / 0.97);
        --papier-diep: #0d0b19;
        --oppervlak: #1f1e30;
        --inkt: #f1ece7;          /* op papier 15,9:1 */
        --inkt-zacht: #c3c2d4;    /* minimaal 8,96:1 op élk donker vlak */
        --rand: #322f47;
        --rand-sterk: #4a4663;

        --paars-50: #241f3d;   --paars-100: #2c2749;  --paars-200: #3d3763;
        --paars-600: #c0bef0;  --paars-700: #b5b3e4;
        --geel-50: #2a2110;    --geel-100: #352a14;   --geel-200: #4d3c18;
        --geel-600: #eebc42;   --geel-700: #e2b133;
        --groen-50: #1a2610;   --groen-100: #202f14;  --groen-200: #2f451b;
        --groen-600: #aad571;  --groen-700: #9ac562;
        --roze-50: #2e1425;    --roze-100: #3a192e;   --roze-200: #52243f;
        --roze-600: #ff9bcb;   --roze-700: #ff98c7;
        --blauw-50: #0d2431;   --blauw-100: #102d3d;  --blauw-200: #164054;
        --blauw-600: #72d1ff;  --blauw-700: #63c2f2;
        --blauw-800: #9adcff;
        --oranje-50: #2c1a09;  --oranje-100: #38210b; --oranje-200: #4f2f10;
        --oranje-600: #ffaf5c; --oranje-700: #f9a552;

        --link: var(--blauw-700);
        --link-hover: var(--blauw-800);
        --actie: #ffb866;
        --actie-tekst: #2b1200;
        --actie-hover: #ffcd93;
        --focus-lijn: var(--papier);
        --focus-halo: var(--geel-400);

        --melding-fout-vlak: #3a1410;
        --melding-fout-tekst: #ffb4a6;

        --schaduw-rust: 0 1px 2px rgba(0, 0, 0, 0.4),
            0 6px 20px -8px rgba(0, 0, 0, 0.5);
        --schaduw-zweef: 0 2px 4px rgba(0, 0, 0, 0.45),
            0 18px 40px -14px rgba(0, 0, 0, 0.6);
    }
}

/* --- 3. Basis ------------------------------------------------------------ */

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--inkt);
    font-family: var(--font-tekst);
    font-size: var(--tekst-basis);
    font-variation-settings: "opsz" 12;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    text-underline-offset: 0.2em;
}

h1, h2, h3, h4 {
    font-family: var(--font-kop);
    font-weight: 600;
    line-height: 1.12;
    text-wrap: balance;
    margin: 0;
    color: var(--inkt);
}

h1 {
    font-size: var(--kop-1);
    /* WONK 1 geeft Fraunces zijn eigenzinnige lettervormen: alleen op de
       grootste kop, zodat het herkenbaar wordt zonder onrustig te worden. */
    font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
    letter-spacing: -0.018em;
}

h2 {
    font-size: var(--kop-2);
    font-variation-settings: "opsz" 40, "SOFT" 50, "WONK" 0;
    letter-spacing: -0.012em;
}

h3 {
    font-size: var(--kop-3);
    font-variation-settings: "opsz" 20, "SOFT" 40, "WONK" 0;
}

h4 {
    font-size: 1.05rem;
    font-variation-settings: "opsz" 14, "SOFT" 30, "WONK" 0;
}

p, ul, ol, dl, table, figure, blockquote {
    margin: 0;
}

strong, b {
    font-weight: 700;
}

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

a {
    color: var(--link);
    text-decoration-thickness: 0.08em;
    text-decoration-color: color-mix(in oklab, var(--link) 45%, transparent);
    transition: color var(--duur-kort) var(--soepel),
        text-decoration-color var(--duur-kort) var(--soepel);
}

a:hover {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

/* Zichtbare focus die op élke achtergrond opvalt: een lijn in de inktkleur met
   een gele halo eromheen. Zo hoef je nooit op contrast met het vlak te gokken. */
:focus-visible {
    outline: 3px solid var(--focus-lijn);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-halo);
    border-radius: var(--rond-s);
}

/* In Windows-contrastmodus laten we het systeem de kleuren bepalen. */
@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid CanvasText;
        box-shadow: none;
    }

    .kaart, .stap, .button, fieldset, .tegel {
        border: 1px solid CanvasText;
    }
}

::selection {
    background: var(--geel-200);
    color: var(--inkt);
}

/* Ankers niet onder de plakkende koptekst laten verdwijnen. */
:target {
    scroll-margin-top: 6rem;
}

/* --- 4. Layout ---------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--breedte-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* Leeskolom: ~65 tekens per regel is de comfortabele grens. */
.lees {
    max-width: var(--breedte-lees);
}

.sectie {
    padding-block: var(--ruimte-2xl);
    position: relative;
}

.sectie--ruim {
    padding-block: var(--ruimte-3xl);
}

.sectie--vlak {
    background: var(--oppervlak);
}

/* Zachte tint in de accentkleur van de sectie, met afgeronde bovenhoeken zodat
   secties als losse "kaarten" over elkaar heen liggen. */
.sectie--tint {
    background: var(--accent-vlak);
}

/* Verticale ritmiek binnen tekstblokken: afstand komt van de stapel, niet van
   losse margins per element. */
.stapel > * + * {
    margin-top: var(--ruimte-m);
}

.stapel--ruim > * + * {
    margin-top: var(--ruimte-l);
}

.stapel > * + h2 {
    margin-top: var(--ruimte-xl);
}

.stapel > * + h3 {
    margin-top: var(--ruimte-l);
}

.sectie__kop {
    max-width: 34rem;
    margin-bottom: var(--ruimte-xl);
}

.sectie__kop > * + * {
    margin-top: var(--ruimte-s);
}

/* Kleine bovenkop met een ballonnetje ervoor. */
.kicker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--tekst-klein);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-tekst);
    margin: 0 0 var(--ruimte-s);
}

.kicker::before {
    content: "";
    flex: none;
    width: 0.7rem;
    height: 0.85rem;
    background: var(--accent);
    border-radius: var(--rond-ballon);
}

.lead {
    font-size: var(--tekst-lead);
    line-height: 1.5;
    color: var(--inkt);
    font-weight: 300;
    max-width: 34ch;
}

.lead--breed {
    max-width: 46ch;
}

.hulptekst {
    color: var(--inkt-zacht);
    font-size: var(--tekst-klein);
    line-height: 1.6;
}

.notitie {
    border-left: 4px solid var(--accent);
    background: var(--accent-vlak);
    padding: var(--ruimte-m) var(--ruimte-m);
    border-radius: 0 var(--rond-m) var(--rond-m) 0;
    font-size: var(--tekst-klein);
    color: var(--inkt);
}

.notitie > * + * {
    margin-top: var(--ruimte-xs);
}

.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -110%);
    z-index: 100;
    background: var(--inkt);
    color: var(--papier);
    font-weight: 700;
    padding: 0.9rem 1.5rem;
    border-radius: 0 0 var(--rond-m) var(--rond-m);
    text-decoration: none;
    transition: transform var(--duur-mid) var(--zwiep);
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

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

/* --- 5. Lijsten met ballonopsommingen ----------------------------------- */

.lijst {
    list-style: none;
    padding: 0;
}

.lijst > li {
    position: relative;
    padding-left: 2rem;
}

.lijst > li + li {
    margin-top: var(--ruimte-s);
}

.lijst > li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.6em;
    width: 0.62rem;
    height: 0.76rem;
    border-radius: var(--rond-ballon);
    background: var(--accent);
}

/* De vijf ballonkleuren rouleren door de opsomming — precies zoals in het logo. */
.lijst--regenboog > li:nth-child(5n + 1)::before { background: var(--paars-400); }
.lijst--regenboog > li:nth-child(5n + 2)::before { background: var(--geel-400); }
.lijst--regenboog > li:nth-child(5n + 3)::before { background: var(--groen-400); }
.lijst--regenboog > li:nth-child(5n + 4)::before { background: var(--roze-400); }
.lijst--regenboog > li:nth-child(5n + 5)::before { background: var(--blauw-400); }

.lijst--kruis > li::before {
    background: none;
    border-radius: 0;
    content: "×";
    color: var(--inkt-zacht);
    font-size: 1.3em;
    line-height: 1;
    top: 0.35em;
    width: auto;
    height: auto;
    font-weight: 700;
}

/* Genummerde lijst met een ballon als nummerbadge. */
.genummerd {
    list-style: none;
    padding: 0;
    counter-reset: nr;
}

.genummerd > li {
    counter-increment: nr;
    position: relative;
    padding-left: 3.25rem;
}

.genummerd > li + li {
    margin-top: var(--ruimte-m);
}

.genummerd > li::before {
    content: counter(nr);
    position: absolute;
    left: 0;
    top: -0.15em;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.5rem;
    border-radius: var(--rond-ballon);
    background: var(--accent-vlak);
    color: var(--accent-tekst);
    border: 2px solid var(--accent);
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1rem;
    font-variation-settings: "opsz" 14, "SOFT" 40;
}

/* --- 6. Koptekst en navigatie ------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--papier-doorschijnend);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duur-mid) var(--soepel),
        background-color var(--duur-mid) var(--soepel),
        box-shadow var(--duur-mid) var(--soepel);
}

/* nav.js zet deze klasse zodra er gescrold is: de balk krijgt dan pas een rand
   en schaduw, zodat hij bovenaan de pagina onopvallend blijft. */
.site-header.is-gescrold {
    background: var(--papier-vrijwel);
    border-bottom-color: var(--rand);
    box-shadow: 0 6px 24px -18px rgba(29, 26, 50, 0.5);
}

@supports not (backdrop-filter: blur(4px)) {
    .site-header {
        background: var(--papier);
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-m);
    flex-wrap: wrap;
    padding-block: var(--ruimte-s);
}

/* Logo: een woordmerk met vijf ballonnetjes, opgebouwd als inline-SVG zodat het
   scherp blijft en mee kan bewegen. */
.site-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--inkt);
    padding: 0.25rem 0.15rem;
    border-radius: var(--rond-s);
}

.site-logo__merk {
    height: clamp(2.1rem, 6vw, 2.7rem);
    width: auto;
    flex: none;
}

/* "Kruiskamp Koppel" hangt onder het woordmerk en lijnt uit met de eerste
   ballon; samen vormen ze één naam. */
.site-logo__wijk {
    font-size: clamp(0.66rem, 2vw, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--inkt-zacht);
    padding-left: 0.2rem;
}

/* Elke ballon in het logo zweeft in zijn eigen tempo — traag genoeg om rustig
   te blijven, ongelijk genoeg om levend aan te voelen. De <g> die de ballon
   plaatst en de <g> die beweegt zijn in de SVG gescheiden: een CSS-transform
   overschrijft namelijk het transform-attribuut van hetzelfde element. */
@media (prefers-reduced-motion: no-preference) {
    .site-logo__merk .ballon-groep {
        animation: zweef 6s ease-in-out infinite;
        transform-box: fill-box;
        transform-origin: center bottom;
    }

    .site-logo__merk > g:nth-of-type(2) .ballon-groep { animation-duration: 7.1s; animation-delay: -0.8s; }
    .site-logo__merk > g:nth-of-type(3) .ballon-groep { animation-duration: 6.4s; animation-delay: -1.9s; }
    .site-logo__merk > g:nth-of-type(4) .ballon-groep { animation-duration: 7.6s; animation-delay: -2.7s; }
    .site-logo__merk > g:nth-of-type(5) .ballon-groep { animation-duration: 6.8s; animation-delay: -3.4s; }
}

@keyframes zweef {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-4%) rotate(-1.2deg); }
}

.main-nav > ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    margin: 0;
    padding: 0;
}

.main-nav a {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--inkt);
    font-weight: 600;
    font-size: 0.95rem;
    /* Ruime raakvlakken: minstens 44px hoog, zodat de links ook met een duim of
       met beperkte motoriek goed te raken zijn (WCAG 2.2, 2.5.8). */
    padding: 0.7rem 0.6rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    border-radius: var(--rond-s);
    transition: background-color var(--duur-kort) var(--soepel);
}

/* Onderstreping die vanuit het midden uitgroeit. */
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.42rem;
    height: 3px;
    border-radius: 3px;
    background: var(--blauw-400);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duur-mid) var(--zwiep);
}

.main-nav a:hover {
    background: var(--paars-50);
}

.main-nav a:hover::after {
    transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
    color: var(--inkt);
}

.main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--oranje-400);
    height: 4px;
}

.main-nav__cta {
    margin-left: var(--ruimte-xs);
}

.main-nav__cta a::after {
    display: none;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    background: var(--oppervlak);
    color: var(--inkt);
    border: 2px solid var(--rand-sterk);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    min-height: 2.9rem;
}

.nav-toggle__streepjes {
    display: grid;
    gap: 4px;
    width: 1.1rem;
}

.nav-toggle__streepjes span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--inkt);
    transition: transform var(--duur-mid) var(--zwiep),
        opacity var(--duur-kort) linear;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__streepjes span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__streepjes span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__streepjes span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Zonder JavaScript staat het menu altijd open — dat is de veilige basis. Pas
   als het inline script in base.html de klasse .js op <html> heeft gezet,
   schakelt onderstaande CSS het inklapbare menu in. */
@media (max-width: 68rem) {
    /* Zonder JavaScript staat het menu open op een eigen regel onder het logo —
       de veilige basis. */
    .main-nav {
        flex-basis: 100%;
    }

    /* Met JavaScript blijft de knop naast het logo staan en klapt het menu
       eronder uit als paneel over de pagina heen. */
    .js .site-header__inner {
        flex-wrap: nowrap;
    }

    .js .main-nav {
        flex-basis: auto;
    }

    .js .nav-toggle {
        display: inline-flex;
    }

    .js .main-nav > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        background: var(--papier);
        border-bottom: 1px solid var(--rand);
        box-shadow: var(--schaduw-zweef);
        padding: var(--ruimte-s) clamp(1.25rem, 5vw, 3.5rem) var(--ruimte-m);
        /* Past het menu niet op het scherm (kleine telefoon, grote tekst), dan
           is het binnen het paneel te scrollen in plaats van onbereikbaar. */
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .js .main-nav > ul.is-open {
        display: flex;
    }

    .main-nav a {
        font-size: 1.05rem;
        padding-inline: 0.9rem;
    }

    .main-nav__cta {
        margin: var(--ruimte-xs) 0 0;
    }

    .main-nav__cta .button {
        width: 100%;
        justify-content: center;
    }

    @media (prefers-reduced-motion: no-preference) {
        .js .main-nav > ul.is-open > li {
            animation: menu-in var(--duur-mid) var(--soepel) backwards;
        }

        .js .main-nav > ul.is-open > li:nth-child(1) { animation-delay: 20ms; }
        .js .main-nav > ul.is-open > li:nth-child(2) { animation-delay: 45ms; }
        .js .main-nav > ul.is-open > li:nth-child(3) { animation-delay: 70ms; }
        .js .main-nav > ul.is-open > li:nth-child(4) { animation-delay: 95ms; }
        .js .main-nav > ul.is-open > li:nth-child(5) { animation-delay: 120ms; }
        .js .main-nav > ul.is-open > li:nth-child(6) { animation-delay: 145ms; }
        .js .main-nav > ul.is-open > li:nth-child(7) { animation-delay: 170ms; }
        .js .main-nav > ul.is-open > li:nth-child(8) { animation-delay: 195ms; }
    }
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --- 7. Knoppen --------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--actie);
    color: var(--actie-tekst);
    text-decoration: none;
    font-family: var(--font-tekst);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
    padding: 0.85rem 1.6rem;
    min-height: 2.9rem;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--duur-kort) var(--soepel),
        transform var(--duur-kort) var(--zwiep),
        box-shadow var(--duur-mid) var(--soepel);
    box-shadow: 0 2px 0 color-mix(in oklab, var(--actie) 70%, black);
}

@media (prefers-color-scheme: dark) {
    .button {
        box-shadow: 0 2px 0 color-mix(in oklab, var(--actie) 65%, black);
    }
}

/* De knop staat ook in het hoofdmenu, waar `.main-nav a` een hogere
   specificiteit heeft dan `.button`. Daarom hier expliciet terugzetten. */
.main-nav .button {
    color: var(--actie-tekst);
}

/* Ook het hovervlak moet de gewone menulinks overrulen. Wit op donkeroranje
   blijft in beide kleurthema's leesbaar (contrast 11,35:1). */
.main-nav .button:hover,
.main-nav .button:focus-visible {
    background: #751300;
    color: #ffffff;
}

.button:hover {
    background: var(--actie-hover);
    color: var(--actie-tekst);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 color-mix(in oklab, var(--actie) 55%, black),
        var(--schaduw-zweef);
}

.button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--actie) 55%, black);
}

/* Het pijltje schuift een stukje mee bij hover. */
.button__pijl {
    transition: transform var(--duur-mid) var(--zwiep);
}

.button:hover .button__pijl {
    transform: translateX(4px);
}

.button--groot {
    font-size: 1.14rem;
    padding: 1.05rem 2.1rem;
    min-height: 3.4rem;
}

.button--klein {
    font-size: 0.95rem;
    padding: 0.6rem 1.15rem;
    min-height: 2.6rem;
}

.button--lijn {
    background: transparent;
    color: var(--link);
    border-color: currentColor;
    box-shadow: none;
}

.button--lijn:hover {
    background: var(--blauw-50);
    color: var(--link);
    box-shadow: none;
    transform: translateY(-2px);
}

.knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-s) var(--ruimte-m);
    align-items: center;
}

/* Tekstlink met pijl, voor "lees verder"-verwijzingen. */
.pijl-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid color-mix(in oklab, var(--link) 35%, transparent);
    padding-block: 0.15rem;
}

.pijl-link:hover {
    border-bottom-color: currentColor;
}

.pijl-link::after {
    content: "→";
    transition: transform var(--duur-mid) var(--zwiep);
}

.pijl-link:hover::after {
    transform: translateX(4px);
}

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(178deg, var(--blauw-50), var(--papier) 78%);
    padding-block: var(--ruimte-2xl) 0;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--ruimte-xl);
    align-items: end;
}

@media (min-width: 62rem) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--ruimte-2xl);
        align-items: center;
    }
}

.hero__tekst > * + * {
    margin-top: var(--ruimte-m);
}

.hero__tekst h1 {
    max-width: 18ch;
}

.hero__figuur {
    position: relative;
    margin: 0;
}

.hero__figuur img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rond-l);
    box-shadow: var(--schaduw-zweef);
}

@media (min-width: 62rem) {
    .hero__figuur img {
        aspect-ratio: 5 / 4;
    }
}

.hero__onderschrift {
    margin-top: var(--ruimte-s);
    font-size: var(--tekst-klein);
    color: var(--inkt-zacht);
}

/* Decoratieve ballonnen achter de hero. Puur versiering: aria-hidden in de HTML. */
.hero__ballonnen {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero__ballon {
    position: absolute;
    width: var(--maat, 5rem);
    aspect-ratio: 0.84;
    border-radius: var(--rond-ballon);
    background: var(--kleur);
    opacity: 0.24;
    filter: blur(0.5px);
}

.hero__ballon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 220%;
    background: linear-gradient(var(--kleur), transparent);
    opacity: 0.7;
}

.hero__ballon:nth-child(1) { --kleur: var(--paars-400); --maat: 7rem;   left: -3%;  top: 6%; }
.hero__ballon:nth-child(2) { --kleur: var(--geel-400);  --maat: 3.4rem; left: 0.5%; top: 72%; }
.hero__ballon:nth-child(3) { --kleur: var(--groen-400); --maat: 5.5rem; right: 6%;  top: 4%; }
.hero__ballon:nth-child(4) { --kleur: var(--roze-400);  --maat: 3.4rem; right: 24%; top: 62%; }
.hero__ballon:nth-child(5) { --kleur: var(--blauw-400); --maat: 8.5rem; right: -4%; top: 40%; }

@media (prefers-reduced-motion: no-preference) {
    .hero__ballon {
        animation: drijf 14s ease-in-out infinite alternate;
    }

    .hero__ballon:nth-child(1) { animation-duration: 15s;   animation-delay: -2s; }
    .hero__ballon:nth-child(2) { animation-duration: 11.5s; animation-delay: -6s; }
    .hero__ballon:nth-child(3) { animation-duration: 17s;   animation-delay: -4s; }
    .hero__ballon:nth-child(4) { animation-duration: 12.5s; animation-delay: -9s; }
    .hero__ballon:nth-child(5) { animation-duration: 19s;   animation-delay: -1s; }
}

@media (max-width: 62rem) {
    .hero__ballon {
        opacity: 0.15;
    }
}

@keyframes drijf {
    from { transform: translate3d(0, 0, 0) rotate(-3deg); }
    to   { transform: translate3d(1.4rem, -2.4rem, 0) rotate(4deg); }
}

/* Golvende overgang van de hero naar de volgende sectie. */
.hero__golf {
    display: block;
    width: 100%;
    height: clamp(2.5rem, 6vw, 5rem);
    margin-top: var(--ruimte-xl);
    color: var(--oppervlak);
}

/* --- 8b. Paginakop (alle pagina's behalve de startpagina) --------------- */

/* Elke pagina opent met een rustige, gekleurde band: kicker, titel en één
   inleidende alinea. Meer niet — de rest van de pagina begint pas na ruimte. */
.paginakop {
    position: relative;
    overflow: hidden;
    background: linear-gradient(176deg, var(--accent-vlak), var(--papier) 88%);
    /* Onderaan bewust minder ruimte: de sectie hierna heeft zelf al een ruime
       bovenmarge, en samen werd dat een te groot gat. */
    padding-block: var(--ruimte-xl) var(--ruimte-l);
}

/* Let op: dit blok is een kind van .container, niet de container zelf. Zet je
   deze max-width op .container, dan verliest die zijn eigen max-width en
   centreert de tekst in plaats van dat hij uitlijnt met de rest. */
.paginakop__inner {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.paginakop__inner > * + * {
    margin-top: var(--ruimte-m);
}

/* Een slinger van ballonnen rechtsboven, half buiten beeld. Decoratief. */
.paginakop__slinger {
    position: absolute;
    top: -1.5rem;
    right: -2rem;
    width: clamp(9rem, 26vw, 17rem);
    opacity: 0.5;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .paginakop__slinger .ballon-groep {
        animation: zweef 8s ease-in-out infinite;
        transform-box: fill-box;
        transform-origin: center bottom;
    }

    .paginakop__slinger > g:nth-of-type(2) .ballon-groep { animation-duration: 9.4s; animation-delay: -1.7s; }
    .paginakop__slinger > g:nth-of-type(3) .ballon-groep { animation-duration: 8.6s; animation-delay: -3.9s; }
    .paginakop__slinger > g:nth-of-type(4) .ballon-groep { animation-duration: 10.1s; animation-delay: -5.2s; }
}

/* --- 9. Kaarten en rasters ---------------------------------------------- */

.raster {
    display: grid;
    gap: var(--ruimte-m);
    list-style: none;
    padding: 0;
}

@media (min-width: 40rem) {
    .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52rem) {
    .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .raster { gap: var(--ruimte-l); }
}

@media (min-width: 40rem) and (max-width: 51.99rem) {
    .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--oppervlak);
    border: 1px solid var(--rand);
    border-radius: var(--rond-l);
    overflow: hidden;
    box-shadow: var(--schaduw-rust);
    transition: transform var(--duur-mid) var(--soepel),
        box-shadow var(--duur-mid) var(--soepel),
        border-color var(--duur-mid) var(--soepel);
}

/* Het "touwtje" van de ballon: een gekleurd streepje boven elke kaart. */
.kaart::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: var(--accent);
    z-index: 2;
}

.kaart__figuur {
    margin: 0;
    overflow: hidden;
    background: var(--accent-vlak);
}

.kaart__figuur img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--duur-lang) var(--soepel);
}

.kaart__inhoud {
    padding: var(--ruimte-m);
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-xs);
    flex: 1;
}

.kaart__inhoud > h3 {
    margin-bottom: 0.1rem;
}

.kaart__inhoud p {
    color: var(--inkt);
}

.bedrag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-tekst);
    background: var(--accent-vlak);
    border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
}

/* Kleurenrollatie voor kaarten in een raster: elke kaart een eigen ballonkleur. */
.raster--regenboog > *:nth-child(5n + 1) { --accent: var(--paars-400); --accent-tekst: var(--paars-700); --accent-vlak: var(--paars-50); }
.raster--regenboog > *:nth-child(5n + 2) { --accent: var(--geel-400);  --accent-tekst: var(--geel-700);  --accent-vlak: var(--geel-50); }
.raster--regenboog > *:nth-child(5n + 3) { --accent: var(--groen-400); --accent-tekst: var(--groen-700); --accent-vlak: var(--groen-50); }
.raster--regenboog > *:nth-child(5n + 4) { --accent: var(--roze-400);  --accent-tekst: var(--roze-700);  --accent-vlak: var(--roze-50); }
.raster--regenboog > *:nth-child(5n + 5) { --accent: var(--blauw-400); --accent-tekst: var(--blauw-700); --accent-vlak: var(--blauw-50); }

/* Losse tegel: een grote, uitnodigende link. */
.tegel {
    position: relative;
    display: grid;
    gap: var(--ruimte-m);
    align-items: center;
    background: var(--oppervlak);
    border: 1px solid var(--rand);
    border-radius: var(--rond-l);
    padding: var(--ruimte-l);
    box-shadow: var(--schaduw-rust);
    overflow: hidden;
    transition: transform var(--duur-mid) var(--soepel),
        box-shadow var(--duur-mid) var(--soepel),
        border-color var(--duur-mid) var(--soepel);
}

@media (min-width: 52rem) {
    .tegel--met-beeld {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--ruimte-l);
        padding: var(--ruimte-l) var(--ruimte-xl);
    }
}

.tegel:hover,
.tegel:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--schaduw-zweef);
    border-color: var(--accent);
}

.tegel__inhoud > * + * {
    margin-top: var(--ruimte-s);
}

.tegel__figuur {
    margin: 0;
    border-radius: var(--rond-m);
    overflow: hidden;
}

.tegel__figuur img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--duur-lang) var(--soepel);
}

.tegel:hover .tegel__figuur img,
.tegel:focus-within .tegel__figuur img {
    transform: scale(1.04);
}

/* --- 10. Stappen -------------------------------------------------------- */

.stappen {
    display: grid;
    gap: var(--ruimte-l);
    list-style: none;
    padding: 0;
    counter-reset: stap;
}

@media (min-width: 52rem) {
    .stappen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ruimte-xl);
    }
}

.stap {
    counter-increment: stap;
    position: relative;
    padding-top: var(--ruimte-s);
}

.stap > * + * {
    margin-top: var(--ruimte-s);
}

/* Het nummer zit in een echte ballonvorm met een touwtje eronder. */
.stap__nummer {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.7rem;
    border-radius: var(--rond-ballon);
    background: var(--accent);
    color: var(--inkt-vast);
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.5rem;
    font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
    position: relative;
    margin-bottom: var(--ruimte-m);
    transition: transform var(--duur-mid) var(--zwiep);
}

.stap__nummer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1.5px;
    height: 1.4rem;
    background: linear-gradient(var(--accent), transparent);
}

.stap:hover .stap__nummer {
    transform: translateY(-5px) rotate(-4deg);
}

.stappen > *:nth-child(1) { --accent: var(--geel-400);  --accent-tekst: var(--geel-700);  --accent-vlak: var(--geel-50); }
.stappen > *:nth-child(2) { --accent: var(--groen-400); --accent-tekst: var(--groen-700); --accent-vlak: var(--groen-50); }
.stappen > *:nth-child(3) { --accent: var(--roze-400);  --accent-tekst: var(--roze-700);  --accent-vlak: var(--roze-50); }

/* --- 11. Beeldbanden ---------------------------------------------------- */

.band {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.band img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

@media (min-width: 52rem) {
    .band img {
        aspect-ratio: 32 / 9;
    }
}

/* Fotostrook: horizontaal schuivende galerij met toetsenbordondersteuning. */
.strook {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 0.35rem var(--ruimte-m);
    scrollbar-color: var(--rand-sterk) transparent;
}

.strook__lijst {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(74vw, 21rem);
    gap: var(--ruimte-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.strook__lijst > li {
    scroll-snap-align: start;
}

.strook figure {
    margin: 0;
    height: 100%;
}

.strook img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rond-m);
    background: var(--paars-50);
}

.strook figcaption {
    font-size: var(--tekst-klein);
    color: var(--inkt-zacht);
    padding-top: var(--ruimte-xs);
}

/* --- 12. Tabellen ------------------------------------------------------- */

/* De omhullende div is focusbaar en heeft een toegankelijke naam, zodat je de
   tabel ook met alleen een toetsenbord zijwaarts kunt scrollen. */
.tabel-omhulsel {
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: var(--rond-m);
    background: var(--oppervlak);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tekst-klein);
}

caption {
    text-align: left;
    font-weight: 700;
    padding: var(--ruimte-s) var(--ruimte-m);
    color: var(--inkt);
    background: var(--oppervlak);
    border-bottom: 1px solid var(--rand);
}

th, td {
    text-align: left;
    padding: 0.8rem var(--ruimte-s);
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}

thead th {
    background: var(--paars-50);
    color: var(--paars-700);
    font-weight: 700;
    white-space: nowrap;
}

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

tbody tr {
    transition: background-color var(--duur-kort) linear;
}

tbody tr:hover {
    background: var(--geel-50);
}

/* --- 13. Formulieren ---------------------------------------------------- */

form {
    max-width: 44rem;
}

fieldset {
    border: 1px solid var(--rand);
    border-radius: var(--rond-l);
    background: var(--oppervlak);
    padding: var(--ruimte-l);
    margin: 0 0 var(--ruimte-l);
}

legend {
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.18rem;
    font-variation-settings: "opsz" 18, "SOFT" 50;
    background: var(--accent-vlak);
    color: var(--accent-tekst);
    border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    margin-left: -0.2rem;
}

.form-veld + .form-veld {
    margin-top: var(--ruimte-m);
}

.form-veld > label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.form-veld .hulptekst {
    display: block;
    margin-top: 0.4rem;
}

/* Het label vertelt wat verplicht is; niet alleen een sterretje, dat is voor
   screenreaders en voor snelle lezers te weinig informatie. */
.optioneel {
    font-weight: 400;
    color: var(--inkt-zacht);
    font-size: var(--tekst-klein);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--rand-sterk);
    border-radius: var(--rond-s);
    font: inherit;
    background: var(--papier);
    color: var(--inkt);
    transition: border-color var(--duur-kort) var(--soepel),
        background-color var(--duur-kort) var(--soepel);
}

input:hover, textarea:hover, select:hover {
    border-color: var(--inkt-zacht);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--blauw-600);
    background: var(--oppervlak);
}

textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.6;
}

.form-bedrag {
    position: relative;
}

.form-bedrag__valuta {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--inkt-zacht);
    pointer-events: none;
}

.form-bedrag input {
    padding-inline-start: 2.4rem;
}

/* Aanvraag: de stappen worden pas verborgen nadat het eigen script is geladen. */
[data-aanvraag-formulier] [hidden] {
    display: none !important;
}

.aanvraag-voortgang {
    margin-bottom: var(--ruimte-l);
    scroll-margin-top: 7rem;
}

.aanvraag-stappen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ruimte-xs);
    padding: 0;
    margin-top: var(--ruimte-m);
    list-style: none;
}

.aanvraag-stappen li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ruimte-xs);
    padding: var(--ruimte-s) 0.2rem;
    border: 2px solid transparent;
    border-radius: var(--rond-m);
    text-align: center;
    font-size: var(--tekst-klein);
    overflow-wrap: anywhere;
}

.aanvraag-stappen [aria-current="step"] {
    border-color: var(--accent-tekst);
    background: var(--accent-vlak);
    font-weight: 800;
}

.aanvraag-stappen__ballon {
    display: grid;
    place-items: center;
    position: relative;
    width: 2.5rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border: 2px solid var(--inkt-zacht);
    border-radius: var(--rond-ballon);
    background: var(--oppervlak);
    color: var(--inkt);
    font-weight: 800;
    font-size: 1.2rem;
}

.aanvraag-stappen__ballon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 1px);
    width: 2px;
    height: 0.5rem;
    background: var(--inkt-zacht);
}

.aanvraag-stappen [aria-current="step"] .aanvraag-stappen__ballon,
.aanvraag-stappen .is-afgerond .aanvraag-stappen__ballon {
    border-color: var(--accent-tekst);
    background: var(--accent);
    color: var(--inkt-vast);
}

.aanvraag-stappen__staat {
    font-size: 0.85em;
    color: var(--inkt-zacht);
}

.aanvraag-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-s);
}

.form-fout {
    display: block;
    margin-top: var(--ruimte-xs);
    color: var(--melding-fout-tekst);
    font-weight: 700;
}

.form-foutmelding {
    padding: var(--ruimte-m);
    margin-bottom: var(--ruimte-l);
    border-left: 4px solid var(--melding-fout-tekst);
    border-radius: var(--rond-s);
    background: var(--melding-fout-vlak);
    color: var(--melding-fout-tekst);
}

[data-aanvraag-formulier] [aria-invalid="true"] {
    border-color: var(--melding-fout-tekst);
}

@media (max-width: 30rem) {
    .aanvraag-stappen {
        gap: 0.25rem;
    }

    .aanvraag-stappen li {
        padding-inline: 0;
        font-size: 0.85rem;
    }

    [data-aanvraag-stap] {
        min-width: 0;
        padding: var(--ruimte-m) var(--ruimte-s);
    }

    [data-aanvraag-stap] legend {
        max-width: 100%;
        border-radius: var(--rond-s);
    }

    .aanvraag-acties .button {
        width: 100%;
    }
}

@media print {
    [data-aanvraag-formulier] [data-aanvraag-stap][hidden] {
        display: block !important;
    }

    .aanvraag-voortgang, .aanvraag-acties {
        display: none !important;
    }
}

/* --- 14. Meldingen ------------------------------------------------------ */

.messages {
    list-style: none;
    padding: 0;
    margin: var(--ruimte-m) 0 0;
}

.message {
    padding: var(--ruimte-s) var(--ruimte-m);
    border-radius: var(--rond-m);
    border: 1px solid var(--rand);
    margin-bottom: var(--ruimte-xs);
}

.message--info,
.message--success {
    background: var(--melding-goed-vlak);
    color: var(--melding-goed-tekst);
    border-color: var(--groen-200);
}

.message--error,
.message--warning {
    background: var(--melding-fout-vlak);
    color: var(--melding-fout-tekst);
    border-color: color-mix(in oklab, var(--melding-fout-tekst) 30%, transparent);
}

/* --- 15. Team ----------------------------------------------------------- */

.team {
    display: grid;
    gap: var(--ruimte-l);
    list-style: none;
    padding: 0;
}

@media (min-width: 40rem) {
    .team {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

.team-lid {
    text-align: center;
    background: var(--oppervlak);
    border: 1px solid var(--rand);
    border-radius: var(--rond-l);
    padding: var(--ruimte-l) var(--ruimte-m);
    box-shadow: var(--schaduw-rust);
    transition: transform var(--duur-mid) var(--soepel);
}

.team-lid:hover {
    transform: translateY(-4px);
}

.team-lid__ballon {
    width: 4rem;
    height: 4.8rem;
    margin: 0 auto var(--ruimte-m);
    border-radius: var(--rond-ballon);
    background: var(--accent);
    color: var(--inkt-vast);
    display: grid;
    place-items: center;
    font-family: var(--font-kop);
    font-weight: 700;
    font-size: 1.35rem;
    font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
    position: relative;
    transition: transform var(--duur-mid) var(--zwiep);
}

.team-lid__ballon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1.5px;
    height: 1.1rem;
    background: linear-gradient(var(--accent), transparent);
}

.team-lid:hover .team-lid__ballon {
    transform: translateY(-6px) rotate(5deg);
}

.team-lid__rol {
    color: var(--inkt-zacht);
    font-size: var(--tekst-klein);
}

/* --- 16. Kerncijfers ---------------------------------------------------- */

.cijfers {
    display: grid;
    gap: var(--ruimte-m);
    list-style: none;
    padding: 0;
}

@media (min-width: 40rem) {
    .cijfers {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}

.cijfer {
    padding: var(--ruimte-m) 0;
    border-top: 4px solid var(--accent);
}

.cijfer__waarde {
    display: block;
    font-family: var(--font-kop);
    font-weight: 600;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
    font-variation-settings: "opsz" 72, "SOFT" 70, "WONK" 1;
    line-height: 1;
    letter-spacing: -0.02em;
}

.cijfer__label {
    display: block;
    margin-top: var(--ruimte-xs);
    color: var(--inkt-zacht);
    font-size: var(--tekst-klein);
}

/* --- 17. Voettekst ------------------------------------------------------ */

.site-footer {
    background: var(--inkt);
    color: #f4f1ec;
    position: relative;
}

@media (prefers-color-scheme: dark) {
    .site-footer {
        background: var(--papier-diep);
        border-top: 1px solid var(--rand);
    }
}

/* Een rij ballonkleuren als vrolijke afsluiting boven de voettekst. */
.site-footer__lint {
    display: flex;
    height: 6px;
}

.site-footer__lint span {
    flex: 1;
}

.site-footer__lint span:nth-child(1) { background: var(--paars-400); }
.site-footer__lint span:nth-child(2) { background: var(--geel-400); }
.site-footer__lint span:nth-child(3) { background: var(--groen-400); }
.site-footer__lint span:nth-child(4) { background: var(--roze-400); }
.site-footer__lint span:nth-child(5) { background: var(--blauw-400); }
.site-footer__lint span:nth-child(6) { background: var(--oranje-400); }

.site-footer__inner {
    display: grid;
    gap: var(--ruimte-l);
    padding-block: var(--ruimte-xl);
}

@media (min-width: 52rem) {
    .site-footer__inner {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: var(--ruimte-xl);
    }
}

.site-footer h2 {
    font-size: 1rem;
    font-family: var(--font-tekst);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fffaf4;
    margin-bottom: var(--ruimte-s);
}

@media (prefers-color-scheme: dark) {
    .site-footer h2 {
        color: var(--inkt);
    }
}

.site-footer p {
    color: #e2ddd6;
    max-width: 34ch;
}

.site-footer p + p {
    margin-top: var(--ruimte-s);
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer li + li {
    margin-top: 0.2rem;
}

.site-footer a {
    color: #bfe9ff;
    display: inline-block;
    padding-block: 0.4rem;
}

.site-footer a:hover {
    color: #fff;
}

@media (prefers-color-scheme: dark) {
    .site-footer p {
        color: var(--inkt-zacht);
    }

    .site-footer a {
        color: var(--link);
    }

    .site-footer a:hover {
        color: var(--link-hover);
    }
}

.site-footer__slot {
    border-top: 1px solid rgba(255, 250, 244, 0.16);
    padding-block: var(--ruimte-m);
    font-size: var(--tekst-klein);
    color: #cdc7bf;
}

@media (prefers-color-scheme: dark) {
    .site-footer__slot {
        border-top-color: var(--rand);
        color: var(--inkt-zacht);
    }
}

/* --- 18. Verschijnen bij scrollen --------------------------------------- */

/* Blokken komen rustig in beeld. Zonder JavaScript of met een voorkeur voor
   minder beweging staat alles gewoon meteen zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
    .js .verschijn {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity var(--duur-lang) var(--soepel),
            transform var(--duur-lang) var(--soepel);
    }

    .js .verschijn.is-zichtbaar {
        opacity: 1;
        transform: none;
    }

    /* Kinderen van een rij verschijnen één voor één, met een klein verschil. */
    .js .verschijn--trapsgewijs > * {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity var(--duur-lang) var(--soepel),
            transform var(--duur-lang) var(--soepel);
        transition-delay: calc(var(--i, 0) * 90ms);
    }

    .js .verschijn--trapsgewijs.is-zichtbaar > * {
        opacity: 1;
        transform: none;
    }
}

/* --- 19. Afdrukken ----------------------------------------------------- */

@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .hero__ballonnen,
    .hero__golf,
    .strook {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .sectie {
        padding-block: 1rem;
        page-break-inside: avoid;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Bij het afdrukken van de spelregels wil je de doelen van links kunnen zien. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    .kaart, .tegel, fieldset {
        box-shadow: none;
        border: 1px solid #999;
    }

    /* Blokken die normaal bij het scrollen verschijnen moeten op papier
       gewoon staan — een printer scrollt niet. */
    .js .verschijn,
    .js .verschijn--trapsgewijs > * {
        opacity: 1 !important;
        transform: none !important;
    }
}