/*
    Het Pavinom-thema.

    Uitgangspunt: dit is een club in een bos, niet een merk. De site moet
    ogen als iets waar mensen graag naartoe komen — warm, ruim, en zonder de
    drukte van een sjabloon dat overal vandaan komt. Eén accentkleur die iets
    doet, veel witruimte, en typografie die het werk draagt.

    Alles verwijst naar tokens.css. Staat er hier een losse kleurwaarde, dan
    is dat een fout.
*/

/* ═══════════════════════════════════════════════════════════ grondslag */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navhoogte) + var(--ruimte-4));
}

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

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

h1, h2, h3, h4 {
    font-family: var(--lettertype-kop);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 var(--ruimte-4);
    text-wrap: balance;
}

h1 { font-size: var(--tekst-4xl); }
h2 { font-size: var(--tekst-3xl); }
h3 { font-size: var(--tekst-xl); }

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

a { color: var(--blauw); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--oranje-diep); }

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

.sla-over {
    position: absolute;
    left: var(--ruimte-4);
    top: -100px;
    z-index: 200;
    background: var(--blauw);
    color: var(--op-blauw);
    padding: var(--ruimte-3) var(--ruimte-5);
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    text-decoration: none;
    font-weight: 600;
    transition: top var(--snel) var(--boog);
}
.sla-over:focus { top: 0; color: var(--op-blauw); }

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

/* ═══════════════════════════════════════════════════════════════ raster */

.omhulsel {
    width: 100%;
    max-width: var(--breedte);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.omhulsel--smal { max-width: var(--breedte-smal); }

.vak { padding-block: var(--ruimte-9); }
.vak--kort { padding-block: var(--ruimte-7); }
.vak--diep { background: var(--papier-diep); }

.vak__kop { max-width: 46rem; margin-bottom: var(--ruimte-7); }
.vak__kop--midden { margin-inline: auto; text-align: center; }

.oogje {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-2);
    font-size: var(--tekst-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oranje-diep);
    margin-bottom: var(--ruimte-3);
}
.oogje::before {
    content: "";
    width: 22px; height: 2px;
    background: var(--oranje);
    border-radius: 2px;
}
.vak__kop--midden .oogje::before { display: none; }

.leid { font-size: var(--tekst-l); color: var(--inkt-zacht); }

/* ══════════════════════════════════════════════════════════════ knoppen */

.knop {
    --knop-grond: var(--blauw);
    --knop-inkt: var(--op-blauw);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte-2);
    padding: .78em 1.5em;
    border: 1px solid transparent;
    border-radius: var(--radius-rond);
    background: var(--knop-grond);
    color: var(--knop-inkt);
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--snel) var(--boog),
                box-shadow var(--normaal) var(--boog),
                background var(--snel) var(--boog);
}
.knop:hover { color: var(--knop-inkt); transform: translateY(-1px); box-shadow: var(--schaduw-2); }
.knop:active { transform: translateY(0); }

.knop--doen { --knop-grond: var(--oranje); --knop-inkt: var(--op-oranje); }
.knop--doen:hover { --knop-grond: var(--oranje-diep); }

.knop--rand {
    --knop-grond: transparent;
    --knop-inkt: var(--inkt);
    border-color: var(--lijn-sterk);
}
.knop--rand:hover { border-color: var(--blauw); --knop-inkt: var(--blauw); }

.knop--licht { --knop-grond: rgb(255 255 255 / .14); --knop-inkt: #fff; border-color: rgb(255 255 255 / .3); }
.knop--licht:hover { --knop-grond: rgb(255 255 255 / .24); }

.knop--groot { padding: 1em 2em; font-size: var(--tekst-l); }
.knop--breed { width: 100%; }

/* ═════════════════════════════════════════════════════════ de lichtkrant */

/*
    De band met clubnieuws. Twee identieke sporen die naast elkaar schuiven;
    zodra het eerste helemaal weg is, staat het tweede exact op zijn plaats en
    springt de animatie terug. Daardoor is er geen naad te zien.
*/
.lichtkrant {
    background: var(--blauw-nacht);
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid rgb(255 255 255 / .08);
}

.lichtkrant__spoor {
    display: flex;
    width: max-content;
    animation: schuif var(--banner-duur) linear infinite;
}
.lichtkrant:hover .lichtkrant__spoor { animation-play-state: paused; }

.lichtkrant__reeks {
    display: flex;
    align-items: center;
    gap: var(--ruimte-7);
    padding-block: .55rem;
    padding-inline: var(--ruimte-5) 0;
    white-space: nowrap;
    font-size: var(--tekst-s);
}

.lichtkrant__item { display: inline-flex; align-items: center; gap: var(--ruimte-2); color: #fff; text-decoration: none; }
.lichtkrant__item:hover { color: var(--goud); }
.lichtkrant__punt { width: 5px; height: 5px; border-radius: 50%; background: var(--goud); flex: none; }
.lichtkrant__datum { color: var(--goud); font-weight: 700; }

@keyframes schuif {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* ══════════════════════════════════════════════════════════════ de kop */

.kop {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--papier) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--normaal), background var(--normaal), box-shadow var(--normaal);
}
.kop[data-vast="ja"] { border-bottom-color: var(--lijn); box-shadow: var(--schaduw-1); }

.kop__binnen {
    display: flex;
    align-items: center;
    gap: var(--ruimte-5);
    min-height: var(--navhoogte);
}

.merk { display: inline-flex; align-items: center; gap: var(--ruimte-3); text-decoration: none; color: inherit; flex: none; }
.merk img { width: 46px; height: auto; }
.merk__naam { font-family: var(--lettertype-kop); font-weight: 700; font-size: 1.02rem; line-height: 1.05; letter-spacing: -.01em; }
.merk__onder { display: block; font-family: var(--lettertype); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-flauw); }

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

.nav__link {
    position: relative;
    padding: .5rem .72rem;
    border-radius: var(--radius-m);
    color: var(--inkt-zacht);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    transition: color var(--snel), background var(--snel);
}
.nav__link:hover { color: var(--inkt); background: var(--papier-diep); }
.nav__link[aria-current="page"] { color: var(--blauw); }
.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .72rem; right: .72rem; bottom: .18rem;
    height: 2px; border-radius: 2px;
    background: var(--oranje);
}

.nav__groep { position: relative; }
.nav__paneel {
    position: absolute;
    top: calc(100% + .4rem); left: 0;
    min-width: 15rem;
    padding: var(--ruimte-2);
    background: var(--papier-op);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-l);
    box-shadow: var(--schaduw-2);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--snel), transform var(--snel), visibility var(--snel);
}
.nav__groep:hover .nav__paneel,
.nav__groep:focus-within .nav__paneel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__paneel a { padding: .5rem .7rem; border-radius: var(--radius-s); text-decoration: none; color: var(--inkt-zacht); font-weight: 600; font-size: .93rem; }
.nav__paneel a:hover { background: var(--papier-diep); color: var(--blauw); }

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

.luik { display: none; }

@media (max-width: 1080px) {
    .nav, .kop__acties .knop--rand { display: none; }
    .luik {
        display: inline-flex;
        margin-left: auto;
        width: 44px; height: 44px;
        align-items: center; justify-content: center;
        background: none; border: 1px solid var(--lijn-sterk);
        border-radius: var(--radius-m); cursor: pointer; color: inherit;
    }
    .luik__streep { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
    .luik__streep::before, .luik__streep::after {
        content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
        transition: transform var(--snel) var(--boog);
    }
    .luik__streep::before { top: -6px; }
    .luik__streep::after { top: 6px; }
    .luik[aria-expanded="true"] .luik__streep { background: transparent; }
    .luik[aria-expanded="true"] .luik__streep::before { transform: translateY(6px) rotate(45deg); }
    .luik[aria-expanded="true"] .luik__streep::after { transform: translateY(-6px) rotate(-45deg); }

    .lade {
        position: fixed;
        inset: var(--navhoogte) 0 0 auto;
        width: min(23rem, 100%);
        background: var(--papier-op);
        border-left: 1px solid var(--lijn);
        padding: var(--ruimte-5) var(--rand) var(--ruimte-8);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--normaal) var(--boog);
        z-index: 99;
    }
    .lade[data-open="ja"] { transform: translateX(0); }
    .lade a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: var(--inkt); font-weight: 600; }
    .lade .knop { margin-top: var(--ruimte-5); }
}

@media (min-width: 1081px) { .lade { display: none; } }

/* ══════════════════════════════════════════════════════════════ de held */

.held {
    position: relative;
    min-height: calc(var(--kop-hoogte) * 10vh);
    display: grid;
    align-items: end;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}

.held__beeld { position: absolute; inset: 0; z-index: -2; }
.held__beeld img { width: 100%; height: 100%; object-fit: cover; }

.held::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgb(10 16 38 / .55) 0%, rgb(10 16 38 / .18) 34%, rgb(10 16 38 / .82) 100%),
        radial-gradient(120% 80% at 15% 100%, rgb(18 39 95 / .6), transparent 70%);
}

.held--vlak { background: linear-gradient(150deg, var(--blauw-diep), var(--blauw-nacht) 70%); }
.held--vlak::after { background: radial-gradient(90% 70% at 80% 20%, rgb(244 121 31 / .22), transparent 65%); }
.held--kalm { background: var(--papier-diep); color: var(--inkt); min-height: auto; padding-block: var(--ruimte-8); }
.held--kalm::after { display: none; }

.held__binnen { padding-block: var(--ruimte-8); position: relative; }
.held__inhoud { max-width: 40rem; }

.held__oogje {
    display: inline-flex; align-items: center; gap: var(--ruimte-2);
    padding: .34rem .85rem;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: var(--radius-rond);
    background: rgb(255 255 255 / .1);
    backdrop-filter: blur(6px);
    font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: var(--ruimte-4);
}
.held--kalm .held__oogje { border-color: var(--lijn-sterk); background: var(--papier-op); color: var(--oranje-diep); }

.held h1 { margin-bottom: var(--ruimte-4); }
.held__leid { font-size: var(--tekst-l); color: rgb(255 255 255 / .88); max-width: 34rem; }
.held--kalm .held__leid { color: var(--inkt-zacht); }
.held__knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin-top: var(--ruimte-6); }

/* het wapenschild naast een vlakke kop */
.held__schild { position: absolute; right: var(--rand); bottom: calc(var(--ruimte-9) + var(--ruimte-5)); width: min(210px, 24vw); opacity: .95; filter: drop-shadow(0 12px 30px rgb(0 0 0 / .35)); }
@media (max-width: 860px) { .held__schild { display: none; } }

/* ════════════════════════════════════════════════════════════ de feiten */

.feiten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--lijn);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: calc(var(--ruimte-8) * -1);
    position: relative;
    z-index: 3;
    box-shadow: var(--schaduw-3);
}
.feit { background: var(--papier-op); padding: var(--ruimte-5); text-align: center; }
.feit__getal { font-family: var(--lettertype-kop); font-size: var(--tekst-2xl); font-weight: 700; color: var(--blauw); line-height: 1; }
.feit__label { font-size: var(--tekst-s); color: var(--inkt-flauw); margin-top: var(--ruimte-2); }

/* ═══════════════════════════════════════════════════════════════ kaarten */

.raster { display: grid; gap: var(--ruimte-5); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.kaart {
    background: var(--papier-op);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-xl);
    padding: var(--ruimte-6);
    transition: transform var(--normaal) var(--boog), box-shadow var(--normaal) var(--boog), border-color var(--normaal);
}
.kaart--klikbaar:hover { transform: translateY(-3px); box-shadow: var(--schaduw-2); border-color: var(--lijn-sterk); }
.kaart__kop { font-size: var(--tekst-xl); margin-bottom: var(--ruimte-3); }
.kaart p { color: var(--inkt-zacht); }

.snelkaart { display: flex; flex-direction: column; gap: var(--ruimte-3); text-decoration: none; color: inherit; }
.snelkaart__merk { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-m); background: color-mix(in srgb, var(--blauw) 10%, transparent); color: var(--blauw); }
.snelkaart:hover .snelkaart__merk { background: var(--oranje); color: var(--op-oranje); }
.snelkaart h3 { margin: 0; font-size: var(--tekst-l); }
.snelkaart p { margin: 0; font-size: var(--tekst-s); color: var(--inkt-flauw); }

/* ═══════════════════════════════════════════════════════════════ agenda */

.agenda { display: grid; gap: var(--ruimte-4); }

.gebeurtenis {
    display: grid;
    grid-template-columns: 5.6rem 1fr auto;
    gap: var(--ruimte-5);
    align-items: center;
    padding: var(--ruimte-5);
    background: var(--papier-op);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: transform var(--normaal) var(--boog), box-shadow var(--normaal) var(--boog), border-color var(--normaal);
}
.gebeurtenis:hover { transform: translateY(-2px); box-shadow: var(--schaduw-2); border-color: var(--blauw); color: inherit; }

.blaadje {
    display: grid;
    place-items: center;
    align-content: center;
    padding: var(--ruimte-3) var(--ruimte-2);
    border-radius: var(--radius-l);
    background: var(--blauw);
    color: var(--op-blauw);
    line-height: 1;
}
.blaadje__dag { font-family: var(--lettertype-kop); font-size: 1.85rem; font-weight: 700; }
.blaadje__maand { font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; opacity: .82; }
.blaadje--voorbij { background: var(--papier-diep); color: var(--inkt-flauw); }

.gebeurtenis__titel { font-family: var(--lettertype-kop); font-weight: 700; font-size: var(--tekst-l); line-height: 1.2; margin-bottom: .2rem; }
.gebeurtenis__meta { font-size: var(--tekst-s); color: var(--inkt-flauw); display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-4); }
.gebeurtenis__staart { text-align: right; }

@media (max-width: 640px) {
    .gebeurtenis { grid-template-columns: 4.2rem 1fr; }
    .gebeurtenis__staart { grid-column: 1 / -1; text-align: left; }
}

.merkje {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .62rem;
    border-radius: var(--radius-rond);
    font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .04em;
    background: color-mix(in srgb, var(--blauw) 12%, transparent);
    color: var(--blauw);
}
.merkje--open { background: color-mix(in srgb, #16A34A 16%, transparent); color: #15803D; }
.merkje--vol { background: color-mix(in srgb, var(--gravel) 18%, transparent); color: var(--gravel); }
.merkje--dicht { background: var(--papier-diep); color: var(--inkt-flauw); }
.merkje--goud { background: color-mix(in srgb, var(--goud) 30%, transparent); color: #7A5A00; }

/* ══════════════════════════════════════════════════════════ formulieren */

.formulier { display: grid; gap: var(--ruimte-5); }
.formulier__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ruimte-4); }

.veld { display: grid; gap: var(--ruimte-2); }
.veld__label { font-weight: 650; font-size: var(--tekst-s); }
.veld__ster { color: var(--oranje-diep); }
.veld__uitleg { font-size: var(--tekst-s); color: var(--inkt-flauw); }
.veld__fout { font-size: var(--tekst-s); color: #C0341B; font-weight: 600; }

.invoer {
    width: 100%;
    padding: .72rem .9rem;
    background: var(--papier-op);
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--radius-m);
    color: var(--inkt);
    font: inherit;
    transition: border-color var(--snel), box-shadow var(--snel);
}
.invoer:focus {
    outline: none;
    border-color: var(--blauw);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blauw) 22%, transparent);
}
.invoer[aria-invalid="true"] { border-color: #C0341B; }
textarea.invoer { min-height: 7rem; resize: vertical; }

.keuzes { display: grid; gap: var(--ruimte-2); }
.keuze { display: flex; align-items: flex-start; gap: var(--ruimte-3); padding: .6rem .8rem; border: 1px solid var(--lijn); border-radius: var(--radius-m); cursor: pointer; }
.keuze:hover { border-color: var(--blauw); }
.keuze input { margin-top: .25rem; accent-color: var(--oranje); }

/* De honeypot. Voor een mens onzichtbaar én onbereikbaar — niet met
   display:none, want dat is precies waar een slimme bot op let. */
.honing { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════ het weer */

/* De kaart is het blok; de bovenste rij is .weer. Zo valt de week die
   eronder openschuift binnen dezelfde rand in plaats van eronder te hangen. */
.weerblok {
    background: var(--papier-op);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-xl);
    padding: var(--ruimte-4) var(--ruimte-5);
    transition: border-color var(--normaal), box-shadow var(--normaal);
}
.weerblok:hover, .weerblok:focus-within { border-color: var(--lijn-sterk); box-shadow: var(--schaduw-1); }

.weer {
    display: flex;
    align-items: center;
    gap: var(--ruimte-4);
    flex-wrap: wrap;
}
.weer__nu { display: flex; align-items: center; gap: var(--ruimte-3); }
.weer__graden { font-family: var(--lettertype-kop); font-size: var(--tekst-2xl); font-weight: 700; line-height: 1; }
.weer__woord { font-size: var(--tekst-s); color: var(--inkt-flauw); }
.weer__oordeel { margin-left: auto; text-align: right; font-size: var(--tekst-s); font-weight: 650; }
.weer__oordeel[data-spelen="ja"] { color: #15803D; }
.weer__oordeel[data-spelen="nee"] { color: var(--gravel); }

.weer__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--ruimte-2);
    margin-top: var(--ruimte-4);
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--lijn);
    /* De week schuift pas open bij hover of focus. Op een aanraakscherm is
       er geen hover, dus daar staat hij gewoon open — een detail dat anders
       de helft van de bezoekers uitsluit. */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    margin-top: 0;
    border-top-width: 0;
    transition: max-height var(--normaal) var(--boog), opacity var(--normaal), margin-top var(--normaal), padding-top var(--normaal);
}
.weerblok:hover .weer__week,
.weerblok:focus-within .weer__week {
    max-height: 14rem;
    opacity: 1;
    margin-top: var(--ruimte-4);
    padding-top: var(--ruimte-4);
    border-top-width: 1px;
}
@media (hover: none) {
    .weer__week { max-height: 14rem; opacity: 1; margin-top: var(--ruimte-4); padding-top: var(--ruimte-4); border-top-width: 1px; }
}

.weerdag { text-align: center; font-size: var(--tekst-xs); }
.weerdag__naam { color: var(--inkt-flauw); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.weerdag__teken { font-size: 1.3rem; line-height: 1.4; }
.weerdag__hoog { font-weight: 700; }
.weerdag__laag { color: var(--inkt-flauw); }


/* ═════════════════════════════════════════════════════════════ sponsors */

.sponsors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ruimte-5);
    align-items: center;
}
.sponsor {
    display: grid;
    place-items: center;
    padding: var(--ruimte-4);
    background: var(--papier-op);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-l);
    min-height: 90px;
}
.sponsor img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--normaal), opacity var(--normaal); }
.sponsor:hover img { filter: none; opacity: 1; }

/* De logorij uit de sponsormodule. Op deze donkere huid krijgt elk logo een
   wit tegeltje: een logo op een zwarte achtergrond (Bracke, Clement Wines) of
   met donkere letters verdwijnt anders in de nacht, en grijs maken helpt daar
   niet bij. Geen filter dus: de sponsor heeft voor zijn kleuren betaald. */
.sponsorrij__lijst { gap: var(--ruimte-3) var(--ruimte-3); }
.sponsorrij__item {
    background: #fff;
    border-radius: calc(var(--radius, 10px) * .8);
    padding: 10px 16px;
    min-width: 132px; min-height: 76px;
    justify-content: center;
    box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset;
}
/* Drie klassen diep, want de module zet haar eigen stijl ná deze in de
   bladzijde en die maakt alles grijs. */
.sponsorrij .sponsorrij__item .sponsorrij__logo {
    max-height: 64px; max-width: 176px;
    filter: none; opacity: 1;
}
.sponsorrij .sponsorrij__item--goud { padding: 14px 22px; min-height: 104px; }
.sponsorrij .sponsorrij__item--goud .sponsorrij__logo { max-height: 80px; max-width: 230px; }
.sponsorrij__naam { color: var(--blauw-nacht, #0b1a3a); }
@media (max-width: 720px) {
    /* Twee tegels per rij op een telefoon; één brede tegel met een klein
       logo erin leest als een fout. */
    .sponsorrij .sponsorrij__lijst { gap: var(--ruimte-2); }
    .sponsorrij .sponsorrij__item { flex: 0 0 calc(50% - var(--ruimte-2) / 2); min-width: 0; padding: 12px; min-height: 84px; }
    .sponsorrij .sponsorrij__item .sponsorrij__logo { max-width: 100%; max-height: 60px; }
}

/* ══════════════════════════════════════════════════════════════ de voet */

.voet {
    background: var(--blauw-nacht);
    color: rgb(255 255 255 / .74);
    padding-block: var(--ruimte-8) var(--ruimte-5);
    margin-top: var(--ruimte-9);
}
.voet a { color: rgb(255 255 255 / .84); text-decoration: none; }
.voet a:hover { color: var(--goud); }
.voet h4 { color: #fff; font-size: var(--tekst-s); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--ruimte-4); font-family: var(--lettertype); font-weight: 700; }

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

.voet__merk { display: flex; align-items: center; gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.voet__merk img { width: 54px; }
.voet__merk strong { color: #fff; font-family: var(--lettertype-kop); font-size: 1.05rem; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-2); font-size: var(--tekst-s); }

.voet__staart {
    display: flex; flex-wrap: wrap; gap: var(--ruimte-3) var(--ruimte-5);
    align-items: center;
    margin-top: var(--ruimte-7);
    padding-top: var(--ruimte-5);
    border-top: 1px solid rgb(255 255 255 / .12);
    font-size: var(--tekst-xs);
}
.voet__staart .duw { margin-left: auto; }

.kanaal {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgb(255 255 255 / .2);
    border-radius: var(--radius-rond);
    transition: background var(--snel), border-color var(--snel), transform var(--snel);
}
.kanaal:hover { background: rgb(255 255 255 / .12); border-color: var(--goud); transform: translateY(-2px); }

/* De regel met de makers. Twee merken, één regel, en geen van beide
   schreeuwt — dit is een voetnoot, geen advertentie. */
.makers { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
.makers a { font-weight: 650; border-bottom: 1px solid rgb(255 255 255 / .25); }
.makers a:hover { border-color: var(--goud); }

/* ════════════════════════════════════════════════════════════ meldingen */

.melding {
    display: flex; gap: var(--ruimte-3); align-items: flex-start;
    padding: var(--ruimte-4) var(--ruimte-5);
    border-radius: var(--radius-l);
    border: 1px solid var(--lijn);
    background: var(--papier-op);
    font-size: var(--tekst-s);
}
.melding--gelukt { border-color: color-mix(in srgb, #16A34A 40%, var(--lijn)); background: color-mix(in srgb, #16A34A 8%, var(--papier-op)); }
.melding--fout { border-color: color-mix(in srgb, #C0341B 40%, var(--lijn)); background: color-mix(in srgb, #C0341B 8%, var(--papier-op)); }

/* ═══════════════════════════════════════════════════════════ lange tekst */

.proza { max-width: 44rem; }
.proza h2 { margin-top: var(--ruimte-7); font-size: var(--tekst-2xl); }
.proza h3 { margin-top: var(--ruimte-6); }
.proza > :first-child { margin-top: 0; }
.proza ul, .proza ol { padding-left: 1.3em; margin-bottom: var(--ruimte-4); }
.proza li { margin-bottom: var(--ruimte-2); }
.proza blockquote {
    margin: var(--ruimte-6) 0;
    padding-left: var(--ruimte-5);
    border-left: 3px solid var(--oranje);
    font-size: var(--tekst-l);
    color: var(--inkt-zacht);
}

/* ═══════════════════════════════════════════════════════ de kopbanner ══ */

/*
 * De bannermodule levert zijn eigen opmaak mee; hier staat alleen wat van
 * dit thema is. Dat is de afspraak: de structuur komt uit de module, de
 * vorm hoort bij de club.
 *
 * Het enige wat écht moet: de feitenkaart hieronder schuift met een
 * negatieve marge over de kop heen. Zonder deze twee regels vallen de
 * bolletjes en het voortgangsstreepje daar netjes achter, en dan lijkt de
 * banner geen bediening te hebben.
 */
.ban {
    --ban-bediening-onder: calc(var(--ruimte-8) + 1.4rem);
    --ban-voortgang-onder: calc(var(--ruimte-8) + .4rem);
}

/* De kop van de club is blauw, ook als er nog geen beeld in staat. */
.ban .ban__vlak { background: linear-gradient(150deg, var(--blauw-diep), var(--blauw-nacht) 72%); }

/* Hetzelfde oranje schijnsel als op de vaste kop, zodat de twee varianten
   niet als twee verschillende sites aanvoelen. */
.ban::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(90% 70% at 80% 20%, rgb(244 121 31 / .18), transparent 65%);
}

/* Het wapenschild rechtsonder, net als bij de vlakke kop. Op een smal
   scherm weg: daar staat het in de weg van de tekst. */
.ban--hoog::after,
.ban--scherm::after {
    content: '';
    position: absolute;
    right: var(--rand);
    bottom: calc(var(--ruimte-9) + var(--ruimte-6));
    z-index: 4;
    width: min(190px, 20vw);
    aspect-ratio: 1;
    /* Het beeld komt uit --clubschild, en dat zet het sjabloon met wat er in
       Vormgeving gekozen is. Stond hier het bestand van één bepaalde club, dan
       droeg elke andere club dat schild in haar band. */
    background: var(--clubschild, none) center / contain no-repeat;
    filter: drop-shadow(0 12px 30px rgb(0 0 0 / .4));
    opacity: .95;
    pointer-events: none;
}

@media (max-width: 900px) {
    .ban--hoog::after,
    .ban--scherm::after { display: none; }
}

/* In de lichte stand is de kop nog altijd donker — er ligt een foto of een
   video onder en witte tekst blijft daar het best leesbaar. Wat wél
   meeschuift is de waas: op een licht scherm mag die iets lichter. */
:root[data-thema="licht"] .ban__beeld { --waas: calc(var(--waas-basis, .48) * .9); }