/* ===========================================================================
   Stichting CreativE ConneXtioN
   Vormgeving van de website.

   De lettertypen worden vanaf onze eigen server geladen, niet bij Google.
   Daardoor gaan er geen gegevens van bezoekers naar externe partijen, wat past
   bij de privacyafspraken van de stichting. Zie public/assets/fonts/LICENSE.md.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Ontwerpwaarden
   --------------------------------------------------------------------------- */
:root {
    /* -----------------------------------------------------------------------
       Kleur - Premium Web 3.0 Palet (Koninklijk Blauw, Paars, Indigo & Zwart)
       Geen bruin of oranje. Afgesteld op het logo van Stichting CreativE ConneXtioN.
       ----------------------------------------------------------------------- */
    --paars:           #7c3aed;   /* helder koninklijk paars */
    --paars-licht:     #f3e8ff;
    --paars-zacht:     #a855f7;
    --paars-donker:    #5b21b6;

    --blauw:           #2563eb;   /* helder elektrisch koningsblauw */
    --blauw-licht:     #eff6ff;
    --blauw-helder:    #3b82f6;
    --blauw-donker:    #1d4ed8;

    --inkt:            #0f172a;   /* diep nachtblauw / premium zwart */
    --inkt-op:         #1e1b4b;   /* verhoogd dieppaars-blauw vlak */
    --inkt-zacht:      #312e81;
    --inkt-lijn:       #4338ca;

    /* Primair accent (vervangt het oude goud door elektrisch koningsblauw/paars) */
    --goud:            #2563eb;
    --goud-licht:      #60a5fa;
    --goud-donker:     #1d4ed8;

    --koraal:          #d946ef;   /* magenta / neon koraal accent */
    --koraal-donker:   #a21caf;

    --groen:           #0d9488;   /* fris teal-groen */
    --groen-licht:     #ccfbf1;

    --room:            #f8fafc;   /* fris koel wit/grijs */
    --room-diep:       #f1f5f9;   /* fris koel schaduwvlak */
    --wit:             #ffffff;

    --tekst:           #0f172a;
    --tekst-zacht:     #475569;
    --tekst-licht:     #64748b;
    --lijn:            #e2e8f0;
    --lijn-sterk:      #cbd5e1;

    --succes:          #0d9488;
    --succes-vlak:     #ccfbf1;
    --fout:            #dc2626;
    --fout-vlak:       #fef2f2;
    --waarschuwing:    #2563eb;
    --waarschuwing-vlak: #eff6ff;
    --info:            #0284c7;
    --info-vlak:       #e0f2fe;

    /* -----------------------------------------------------------------------
       Letters

       Public Sans voor zowel koppen als lopende tekst: strak, modern, schreefloos
       en uitstekend leesbaar op alle apparaten.
       ----------------------------------------------------------------------- */
    --font-titel: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-tekst: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* -----------------------------------------------------------------------
       Ruimte
       ----------------------------------------------------------------------- */
    --ruimte-1: .25rem;
    --ruimte-2: .5rem;
    --ruimte-3: .75rem;
    --ruimte-4: 1rem;
    --ruimte-5: 1.5rem;
    --ruimte-6: 2rem;
    --ruimte-7: 3rem;
    --ruimte-8: 4rem;
    --ruimte-9: 6rem;

    /* -----------------------------------------------------------------------
       Vormen en diepte

       De schaduwen zijn getint met het inktblauw in plaats van met zwart.
       Daardoor lijken vlakken op te tillen van het papier in plaats van
       ergens een grijze rand te krijgen.
       ----------------------------------------------------------------------- */
    --rond-s: 6px;
    --rond-m: 10px;
    --rond-l: 16px;
    --rond-xl: 24px;
    --rond-vol: 999px;

    --schaduw-s:
        0 1px 2px rgba(10, 20, 32, .05),
        0 1px 3px rgba(10, 20, 32, .04);
    --schaduw-m:
        0 2px 4px rgba(10, 20, 32, .04),
        0 6px 16px rgba(10, 20, 32, .07);
    --schaduw-l:
        0 2px 6px rgba(10, 20, 32, .04),
        0 12px 28px rgba(10, 20, 32, .09),
        0 24px 56px rgba(10, 20, 32, .06);
    --schaduw-goud: 0 8px 24px rgba(37, 99, 235, .3);

    /* -----------------------------------------------------------------------
       Beweging

       Een korte, vaste set curven en tijden. Alles wat beweegt gebruikt deze
       waarden, zodat de hele site hetzelfde ritme aanhoudt.
       ----------------------------------------------------------------------- */
    --soepel:      cubic-bezier(0.23, 1, 0.32, 1);      /* binnenkomen en verdwijnen */
    --soepel-heen: cubic-bezier(0.77, 0, 0.175, 1);     /* verplaatsen op het scherm */
    --soepel-kort: cubic-bezier(0.4, 0, 0.2, 1);        /* kleuren en hover */

    --tijd-tik:    120ms;   /* indrukken */
    --tijd-kort:   180ms;   /* hover, labels */
    --tijd-mid:    240ms;   /* uitklappen, menu */
    --tijd-lang:   560ms;   /* binnenkomen bij het scrollen */

    /* -----------------------------------------------------------------------
       Maten
       ----------------------------------------------------------------------- */
    --breedte: 1180px;
    --breedte-smal: 760px;
    --breedte-lees: 680px;   /* prettige regellengte voor artikelen */
    --kop-hoogte: 74px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kop-hoogte) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--room);
    color: var(--tekst);
    font-family: var(--font-tekst);
    font-size: 1.0125rem;
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Cijfers in tabellen en tellingen netjes onder elkaar. */
    font-variant-numeric: proportional-nums;
}

/* Getallen die je met elkaar vergelijkt, staan in kolommen uitgelijnd. */
.tabel td, .tabel th,
.cijfer__getal, .tegel__getal, .logregel__tijd { font-variant-numeric: tabular-nums; }

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

h1, h2, h3, h4 {
    font-family: var(--font-titel);
    font-optical-sizing: auto;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--inkt);
    margin: 0 0 var(--ruimte-4);
    text-wrap: balance;

    /* De zachte, licht eigenzinnige vorm van Fraunces. Terughoudend gezet,
       zodat het warm aanvoelt zonder speels te worden. */
    font-variation-settings: 'SOFT' 18, 'WONK' 1;
}

h1 {
    font-size: clamp(2.15rem, 1.35rem + 3.1vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -.028em;
}
h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
    letter-spacing: -.024em;
}
h3 { font-size: clamp(1.18rem, 1.04rem + .6vw, 1.45rem); letter-spacing: -.015em; }
h4 { font-size: 1.06rem; letter-spacing: -.01em; }

/* Kleine koppen hebben geen optische correctie nodig en staan rustiger
   zonder de wonk-as. */
h3, h4 { font-variation-settings: 'SOFT' 20, 'WONK' 0; }

p { margin: 0 0 var(--ruimte-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--groen); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--koraal); }

:focus-visible {
    outline: 3px solid var(--goud);
    outline-offset: 2px;
    border-radius: var(--rond-s);
}

hr { border: 0; border-top: 1px solid var(--lijn); margin: var(--ruimte-6) 0; }

blockquote {
    margin: var(--ruimte-5) 0;
    padding: var(--ruimte-2) var(--ruimte-5);
    border-left: 3px solid var(--blauw-helder);
    color: var(--tekst-zacht);
    font-style: italic;
}

/* Alleen zichtbaar voor schermlezers */
.verborgen-tekst {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.overslaan {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--inkt);
    color: var(--wit);
    padding: var(--ruimte-3) var(--ruimte-5);
    z-index: 200;
    border-radius: 0 0 var(--rond-m) 0;
}
.overslaan:focus { left: 0; }

/* ---------------------------------------------------------------------------
   3. Indeling
   --------------------------------------------------------------------------- */
.omhulsel {
    width: 100%;
    max-width: var(--breedte);
    margin-inline: auto;
    padding-inline: var(--ruimte-5);
}
.omhulsel--smal { max-width: var(--breedte-smal); }

.sectie { padding-block: var(--ruimte-8); }
.sectie--klein { padding-block: var(--ruimte-7); }
.sectie--room { background: var(--room-diep); }
.sectie--wit { background: var(--wit); }

.sectie--inkt {
    background:
        radial-gradient(70% 120% at 15% 0%, rgba(124, 58, 237, .32), transparent 60%),
        radial-gradient(60% 100% at 100% 100%, rgba(37, 99, 235, .35), transparent 60%),
        var(--inkt);
    color: rgba(255, 255, 255, .88);
}
.sectie--inkt h1, .sectie--inkt h2, .sectie--inkt h3 { color: var(--wit); }
.sectie--inkt a { color: var(--goud-licht); }

.sectiekop { max-width: 640px; margin-bottom: var(--ruimte-6); }
.sectiekop--midden { margin-inline: auto; text-align: center; }
.sectiekop p { color: var(--tekst-zacht); font-size: 1.05rem; margin-bottom: 0; }
.sectie--inkt .sectiekop p { color: rgba(255, 255, 255, .72); }

.sectiekop__label {
    display: inline-block;
    font-family: var(--font-tekst);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--koraal-donker);
    margin-bottom: var(--ruimte-2);
}
.sectie--inkt .sectiekop__label { color: #ffffff; }

.rooster { display: grid; gap: var(--ruimte-5); }
.rooster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rooster--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.rooster--4 { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }

.rij { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: center; }
.rij--tussen { justify-content: space-between; }
.rij--eind { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   4. Koptekst en navigatie
   --------------------------------------------------------------------------- */
.kop {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(14, 27, 43, .96);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.kop__binnen {
    max-width: var(--breedte);
    margin-inline: auto;
    padding: 0 var(--ruimte-5);
    height: var(--kop-hoogte);
    display: flex;
    align-items: center;
    gap: var(--ruimte-5);
}

.merk {
    display: flex;
    align-items: center;
    gap: var(--ruimte-3);
    text-decoration: none;
    flex-shrink: 0;
}
.merk img { width: 42px; height: 42px; border-radius: var(--rond-s); }
.merk__naam {
    font-family: var(--font-titel);
    font-size: 1.05rem;
    font-weight: 700;
    font-style: italic;
    color: var(--wit);
    line-height: 1.15;
    letter-spacing: -.01em;
}
.merk__onder {
    display: block;
    font-family: var(--font-tekst);
    font-style: normal;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #60a5fa;
}

.navigatie { display: flex; align-items: center; gap: var(--ruimte-1); margin-left: auto; }

.navigatie a {
    padding: .5rem .75rem;
    border-radius: var(--rond-s);
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.navigatie a:hover { background: rgba(255, 255, 255, .1); color: var(--wit); }
.navigatie a.is-actief { color: var(--wit); background: linear-gradient(135deg, rgba(37, 99, 235, .4), rgba(124, 58, 237, .4)); border: 1px solid rgba(96, 165, 250, .3); }

.kop__acties { display: flex; align-items: center; gap: var(--ruimte-2); margin-left: var(--ruimte-3); }

.menuknop {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--wit);
    border-radius: var(--rond-s);
    padding: .5rem .7rem;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

/* Het menu klapt in zodra de balk krap wordt. Met een ingelogde beheerder
   staan er drie knoppen naast de navigatie; die passen pas vanaf ongeveer
   1200 pixels netjes naast elkaar. */
@media (max-width: 1200px) {
    .menuknop { display: block; }
    .navigatie, .kop__acties {
        display: none;
        position: absolute;
        top: var(--kop-hoogte);
        left: 0; right: 0;
        background: var(--inkt);
        flex-direction: column;
        align-items: stretch;
        padding: var(--ruimte-3) var(--ruimte-5);
        gap: var(--ruimte-1);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .kop.is-open .navigatie { display: flex; }
    .kop.is-open .kop__acties {
        display: flex;
        top: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        border: 0;
        padding-top: var(--ruimte-3);
        margin: 0;
    }
    .navigatie a { padding: .7rem .75rem; }
}

/* ---------------------------------------------------------------------------
   5. Knoppen
   --------------------------------------------------------------------------- */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--rond-vol);
    font-family: var(--font-tekst);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--tijd-tik) var(--soepel-kort),
        box-shadow var(--tijd-kort) var(--soepel-kort),
        background-color var(--tijd-kort) var(--soepel-kort),
        color var(--tijd-kort) var(--soepel-kort);
    white-space: nowrap;
}

/* Alleen op apparaten met een echte muisaanwijzer. Op een aanraakscherm
   veroorzaakt hover anders een blijvende, verkeerde staat na het tikken. */
@media (hover: hover) and (pointer: fine) {
    .knop:hover { transform: translateY(-1px); }
}
.knop:active { transform: translateY(1px); }
.knop[disabled], .knop.is-uit { opacity: .55; pointer-events: none; }

.knop--goud {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: var(--wit);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.knop--goud:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    color: var(--wit);
    box-shadow: 0 6px 20px rgba(37, 99, 235, .45);
}

.knop--inkt { background: var(--inkt); color: var(--wit); }
.knop--inkt:hover { background: var(--inkt-zacht); color: var(--wit); }

.knop--groen { background: var(--groen); color: var(--wit); }
.knop--groen:hover { background: #12655a; color: var(--wit); }

.knop--koraal { background: var(--koraal); color: var(--wit); }
.knop--koraal:hover { background: var(--koraal-donker); color: var(--wit); }

.knop--rand { background: transparent; border-color: var(--lijn-sterk); color: var(--tekst); }
.knop--rand:hover { border-color: var(--inkt); background: var(--wit); color: var(--inkt); }

.knop--licht { background: rgba(255, 255, 255, .12); color: var(--wit); border-color: rgba(255, 255, 255, .25); }
.knop--licht:hover { background: rgba(255, 255, 255, .2); color: var(--wit); }

.knop--vlak { background: transparent; color: var(--tekst-zacht); padding-inline: .6rem; }
.knop--vlak:hover { color: var(--inkt); background: var(--room-diep); }

.knop--klein { padding: .42rem .85rem; font-size: .84rem; }
.knop--breed { width: 100%; }

/* ---------------------------------------------------------------------------
   6. Kaarten
   --------------------------------------------------------------------------- */
.kaart {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--tijd-mid) var(--soepel),
        box-shadow var(--tijd-mid) var(--soepel),
        border-color var(--tijd-mid) var(--soepel);
}
a.kaart { text-decoration: none; color: inherit; }

@media (hover: hover) and (pointer: fine) {
    a.kaart:hover, .kaart--zweef:hover {
        transform: translateY(-3px);
        box-shadow: var(--schaduw-l);
        border-color: var(--lijn-sterk);
    }
}

.kaart__beeld {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--room-diep);
    overflow: hidden;
}
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.kaart__beeld--breed { aspect-ratio: 16 / 9; }

.kaart__lijf { padding: var(--ruimte-4) var(--ruimte-5) var(--ruimte-5); flex: 1; display: flex; flex-direction: column; }
.kaart__titel { font-size: 1.14rem; margin-bottom: var(--ruimte-2); color: var(--inkt); }
.kaart__tekst { color: var(--tekst-zacht); font-size: .93rem; margin-bottom: var(--ruimte-4); }
.kaart__voet {
    margin-top: auto;
    padding-top: var(--ruimte-3);
    border-top: 1px solid var(--lijn);
    display: flex;
    align-items: center;
    gap: var(--ruimte-3);
    font-size: .84rem;
    color: var(--tekst-zacht);
}

/* Ondernemerskaart */
.lidkaart .kaart__beeld { aspect-ratio: 1 / 1; }
.lidkaart__land {
    position: absolute;
    top: var(--ruimte-3);
    left: var(--ruimte-3);
    background: rgba(14, 27, 43, .78);
    color: var(--wit);
    font-size: .74rem;
    font-weight: 600;
    padding: .22rem .6rem;
    border-radius: var(--rond-vol);
    backdrop-filter: blur(4px);
}
.lidkaart__ster {
    position: absolute;
    top: var(--ruimte-3);
    right: var(--ruimte-3);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: var(--wit);
    font-size: .72rem;
    font-weight: 700;
    padding: .22rem .55rem;
    border-radius: var(--rond-vol);
    box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}

/* ---------------------------------------------------------------------------
   7. Labels
   --------------------------------------------------------------------------- */
.label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .62rem;
    border-radius: var(--rond-vol);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.6;
    background: var(--room-diep);
    color: var(--tekst-zacht);
    text-decoration: none;
    white-space: nowrap;
}
a.label:hover { background: var(--inkt); color: var(--wit); }

.label--goud   { background: #dbeafe; color: #1d4ed8; }
.label--groen  { background: var(--groen-licht); color: var(--groen); }
.label--koraal { background: #fceae6; color: var(--koraal-donker); }
.label--blauw  { background: var(--info-vlak); color: var(--info); }
.label--grijs  { background: var(--room-diep); color: var(--tekst-zacht); }

.labels { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }

/* ---------------------------------------------------------------------------
   8. Meldingen
   --------------------------------------------------------------------------- */
.melding {
    display: flex;
    gap: var(--ruimte-4);
    align-items: flex-start;
    padding: var(--ruimte-4) var(--ruimte-5);
    border-radius: var(--rond-m);
    border: 1px solid;
    margin-bottom: var(--ruimte-4);
    font-size: .95rem;
    box-shadow: var(--schaduw-s);
}

/* De kleur zit in het rondje met het teken, niet in een balk langs de rand.
   Daardoor blijft het vlak rustig en valt het teken juist op. */
.melding__icoon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--rond-vol);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wit);
}

.melding--succes {
    background: var(--succes-vlak);
    border-color: #b9dcd6;
    color: #0e5349;
}
.melding--succes .melding__icoon { background: var(--succes); }

.melding--fout {
    background: var(--fout-vlak);
    border-color: #f0c6c1;
    color: #8e2019;
}
.melding--fout .melding__icoon { background: var(--fout); }

.melding--info {
    background: var(--info-vlak);
    border-color: #c3d9ec;
    color: #164a78;
}
.melding--info .melding__icoon { background: var(--info); }

.melding--waarschuwing {
    background: var(--waarschuwing-vlak);
    border-color: #efd6a6;
    color: #83550a;
}
.melding--waarschuwing .melding__icoon { background: var(--waarschuwing); }

/* ---------------------------------------------------------------------------
   9. Formulieren
   --------------------------------------------------------------------------- */
.veld { margin-bottom: var(--ruimte-5); }

.veld > label, .veldnaam {
    display: block;
    font-weight: 600;
    font-size: .91rem;
    color: var(--inkt);
    margin-bottom: var(--ruimte-2);
}
.veld__hulp { font-size: .84rem; color: var(--tekst-zacht); margin-top: var(--ruimte-2); }
.veld__fout { font-size: .85rem; color: var(--fout); margin-top: var(--ruimte-2); font-weight: 500; }
.verplicht { color: var(--koraal); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=number], input[type=date], input[type=datetime-local],
input[type=search], select, textarea {
    width: 100%;
    padding: .68rem .85rem;
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-m);
    background: var(--wit);
    color: var(--tekst);
    font-family: inherit;
    font-size: .96rem;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--tekst-licht); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--groen);
    box-shadow: 0 0 0 3px rgba(23, 121, 107, .14);
}

input.is-fout, select.is-fout, textarea.is-fout {
    border-color: var(--fout);
    background: #fffbfb;
}

textarea { min-height: 150px; resize: vertical; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6675' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.4rem;
}

.vinkje, .keuze {
    display: flex;
    align-items: flex-start;
    gap: var(--ruimte-3);
    cursor: pointer;
    font-size: .94rem;
    line-height: 1.5;
    margin-bottom: var(--ruimte-3);
}
.vinkje input, .keuze input { width: 18px; height: 18px; margin-top: .18rem; flex-shrink: 0; accent-color: var(--groen); }

/* Keuzelijst met vinkjes, bijvoorbeeld voor categorieen */
.keuzedoos {
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-m);
    padding: var(--ruimte-4);
    background: var(--wit);
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--ruimte-2) var(--ruimte-4);
}
.keuzedoos .vinkje { margin-bottom: 0; }

.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-5); }
@media (max-width: 640px) { .veldrij { grid-template-columns: 1fr; } }

.honingpot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

fieldset {
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
    padding: var(--ruimte-5);
    margin: 0 0 var(--ruimte-6);
}
legend {
    font-family: var(--font-titel);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--inkt);
    padding-inline: var(--ruimte-3);
}

/* ---------------------------------------------------------------------------
   10. Filterbalk
   --------------------------------------------------------------------------- */
.filterbalk {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    padding: var(--ruimte-5);
    margin-bottom: var(--ruimte-6);
    box-shadow: var(--schaduw-s);
}
.filterbalk__rij { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--ruimte-3); align-items: end; }
@media (max-width: 860px) { .filterbalk__rij { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filterbalk__rij { grid-template-columns: 1fr; } }
.filterbalk .veld { margin-bottom: 0; }

.letterbalk { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: var(--ruimte-4); }
.letterbalk a, .letterbalk span {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rond-s);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--tekst-zacht);
    background: var(--room-diep);
}
.letterbalk a:hover { background: var(--inkt); color: var(--wit); }
.letterbalk a.is-actief { background: var(--goud); color: var(--inkt); }
.letterbalk span { opacity: .35; }

/* ---------------------------------------------------------------------------
   10b. Gegevenslijst

   Naam en waarde onder elkaar, gescheiden door haarlijnen. Wordt zowel op
   de website als in de beheeromgeving gebruikt.
   --------------------------------------------------------------------------- */
.gegevenslijst { list-style: none; margin: 0; padding: 0; }
.gegevenslijst li {
    display: flex;
    gap: var(--ruimte-3);
    padding: var(--ruimte-3) 0;
    border-bottom: 1px solid var(--lijn);
    font-size: .93rem;
    align-items: flex-start;
}
.gegevenslijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.gegevenslijst__naam { color: var(--tekst-zacht); min-width: 96px; flex-shrink: 0; }
.gegevenslijst__waarde { word-break: break-word; font-weight: 500; }

/* ---------------------------------------------------------------------------
   11. Tabellen
   --------------------------------------------------------------------------- */
.tabelhulp { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--rond-m); background: var(--wit); }

table.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tabel th, table.tabel td { padding: .78rem 1rem; text-align: left; vertical-align: middle; }
table.tabel thead th {
    background: var(--room-diep);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
    border-bottom: 1px solid var(--lijn);
    white-space: nowrap;
}
table.tabel tbody tr { border-top: 1px solid var(--lijn); }
table.tabel tbody tr:hover { background: var(--room); }
table.tabel td.rechts, table.tabel th.rechts { text-align: right; }
table.tabel .nietsgevonden { text-align: center; padding: var(--ruimte-7); color: var(--tekst-zacht); }

.minifoto {
    width: 42px; height: 42px;
    border-radius: var(--rond-s);
    object-fit: cover;
    background: var(--room-diep);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   12. Paginering
   --------------------------------------------------------------------------- */
.paginering { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ruimte-2); margin-top: var(--ruimte-7); }
.paginering a, .paginering span {
    min-width: 40px;
    padding: .5rem .75rem;
    border-radius: var(--rond-s);
    text-align: center;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tekst-zacht);
    background: var(--wit);
    border: 1px solid var(--lijn);
}
.paginering a:hover { border-color: var(--inkt); color: var(--inkt); }
.paginering .is-actief { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.paginering .is-uit { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------------------
   13. Leegte en laadstaat
   --------------------------------------------------------------------------- */
.leeg {
    text-align: center;
    padding: var(--ruimte-8) var(--ruimte-5);
    background: var(--wit);
    border: 1px dashed var(--lijn-sterk);
    border-radius: var(--rond-l);
    color: var(--tekst-zacht);
}
.leeg__icoon { font-size: 2.4rem; margin-bottom: var(--ruimte-3); opacity: .5; }
.leeg h3 { color: var(--inkt); margin-bottom: var(--ruimte-2); }

/* ---------------------------------------------------------------------------
   14. Voettekst
   --------------------------------------------------------------------------- */
.voet { background: var(--inkt); color: rgba(255, 255, 255, .68); padding-block: var(--ruimte-8) var(--ruimte-5); margin-top: var(--ruimte-8); }
.voet a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.voet a:hover { color: var(--goud); text-decoration: underline; }

.voet__rooster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--ruimte-6); }
@media (max-width: 900px) { .voet__rooster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .voet__rooster { grid-template-columns: 1fr; } }

.voet h4 {
    color: var(--wit);
    font-family: var(--font-tekst);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: var(--ruimte-4);
}
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: var(--ruimte-2); font-size: .92rem; }

.voet__onder {
    margin-top: var(--ruimte-7);
    padding-top: var(--ruimte-5);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-4);
    justify-content: space-between;
    font-size: .85rem;
}

/* Regel onderaan met de maker van de website. */
.voet__maker {
    margin-top: var(--ruimte-5);
    padding-top: var(--ruimte-4);
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    font-size: .8rem;
    color: rgba(255, 255, 255, .42);
    letter-spacing: .02em;
}
.voet__maker a { color: rgba(255, 255, 255, .62); }
.voet__maker a:hover { color: var(--goud); }
.voet__maker span { margin-inline: .35rem; opacity: .5; }

.sociaal { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }
.sociaal a {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rond-vol);
    background: rgba(255, 255, 255, .1);
    color: var(--wit);
    font-size: .9rem;
    transition: background-color .15s ease;
}
.sociaal a:hover { background: var(--goud); color: var(--inkt); }

/* ---------------------------------------------------------------------------
   15. Cookiemelding
   --------------------------------------------------------------------------- */
.cookiebalk {
    position: fixed;
    left: var(--ruimte-4);
    right: var(--ruimte-4);
    bottom: var(--ruimte-4);
    max-width: 560px;
    margin-inline: auto;
    background: var(--wit);
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-l);
    box-shadow: var(--schaduw-l);
    padding: var(--ruimte-5);
    z-index: 150;
    font-size: .9rem;
}
.cookiebalk[hidden] { display: none; }
.cookiebalk__knoppen { display: flex; gap: var(--ruimte-3); margin-top: var(--ruimte-4); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   16. Losse hulpklassen
   --------------------------------------------------------------------------- */
.midden { text-align: center; }
.zacht { color: var(--tekst-zacht); }
.klein { font-size: .87rem; }
.groot { font-size: 1.08rem; }
.vet { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--ruimte-4); }
.mt-4 { margin-top: var(--ruimte-5); }
.mt-5 { margin-top: var(--ruimte-6); }
.mt-6 { margin-top: var(--ruimte-7); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--ruimte-4); }
.mb-4 { margin-bottom: var(--ruimte-5); }
.mb-5 { margin-bottom: var(--ruimte-6); }
.mb-6 { margin-bottom: var(--ruimte-7); }
.vol-breed { width: 100%; }

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

@media print {
    .kop, .voet, .cookiebalk, .knop, .filterbalk { display: none !important; }
    body { background: #fff; }
}