/* ===========================================================================
   Redactie

   De vormgeving van het nieuws: het overzicht, het artikel zelf en de
   schrijfomgeving in het beheer. Alles is hier gericht op leesbaarheid:
   een rustige regellengte, ruime tussenruimte en een duidelijke hiërarchie.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Kop van het nieuwsoverzicht
   --------------------------------------------------------------------------- */
.redactiekop {
    position: relative;
    background:
        radial-gradient(58% 90% at 8% 0%, rgba(124, 58, 237, .25), transparent 62%),
        radial-gradient(50% 80% at 96% 100%, rgba(20, 107, 96, .26), transparent 60%),
        var(--inkt);
    color: rgba(255, 255, 255, .82);
    padding-block: var(--ruimte-8) var(--ruimte-7);
    overflow: hidden;
}

.redactiekop::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .025) 0 1px,
        transparent 1px 12px
    );
    pointer-events: none;
}

.redactiekop__binnen { position: relative; z-index: 1; }
.redactiekop h1 { color: var(--wit); margin-bottom: var(--ruimte-3); }
.redactiekop p { color: rgba(255, 255, 255, .74); max-width: 58ch; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   2. Het hoofdverhaal

   Het uitgelichte bericht krijgt de volle breedte en een groter formaat.
   Zo is meteen duidelijk wat de redactie op dit moment het belangrijkst vindt.
   --------------------------------------------------------------------------- */
.hoofdverhaal {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--ruimte-7);
    transition:
        transform var(--tijd-mid) var(--soepel),
        box-shadow var(--tijd-mid) var(--soepel),
        border-color var(--tijd-mid) var(--soepel);
}

@media (hover: hover) and (pointer: fine) {
    .hoofdverhaal:hover {
        transform: translateY(-3px);
        box-shadow: var(--schaduw-l);
        border-color: var(--lijn-sterk);
        color: inherit;
    }
    .hoofdverhaal:hover .hoofdverhaal__beeld img { transform: scale(1.04); }
}

@media (max-width: 820px) {
    .hoofdverhaal { grid-template-columns: 1fr; }
}

.hoofdverhaal__beeld {
    position: relative;
    background: var(--room-diep);
    min-height: 340px;
    overflow: hidden;
}
.hoofdverhaal__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 700ms var(--soepel);
}
@media (max-width: 820px) {
    .hoofdverhaal__beeld { min-height: 0; aspect-ratio: 16 / 9; }
    .hoofdverhaal__beeld img { position: static; }
}

.hoofdverhaal__lijf {
    padding: var(--ruimte-7) var(--ruimte-7) var(--ruimte-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 620px) {
    .hoofdverhaal__lijf { padding: var(--ruimte-5); }
}

.hoofdverhaal__titel {
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
    margin-bottom: var(--ruimte-4);
}
.hoofdverhaal__tekst { color: var(--tekst-zacht); font-size: 1.02rem; margin-bottom: var(--ruimte-5); }

/* ---------------------------------------------------------------------------
   3. Eyebrow boven een titel

   Een kort label dat vertelt wat voor soort bericht dit is. Geen versiering:
   het scheelt de lezer een klik.
   --------------------------------------------------------------------------- */
.eyebrow {
    display: inline-block;
    font-family: var(--font-tekst);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--goud-donker);
    margin-bottom: var(--ruimte-3);
}
.redactiekop .eyebrow, .artikelheld .eyebrow { color: var(--goud); }

/* ---------------------------------------------------------------------------
   4. Berichtenkaart
   --------------------------------------------------------------------------- */
.berichtkaart .kaart__titel {
    font-size: 1.22rem;
    line-height: 1.25;
    margin-bottom: var(--ruimte-3);
}

.berichtkaart .kaart__voet {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------------------
   5. Kop van een artikel

   De titel staat op het inktvlak, met de foto er half overheen. Daardoor
   begint het artikel met beeld zonder dat de titel onleesbaar wordt.
   --------------------------------------------------------------------------- */
.artikelheld {
    position: relative;
    background:
        radial-gradient(62% 90% at 12% 0%, rgba(37, 99, 235, .25), transparent 58%),
        radial-gradient(48% 75% at 94% 100%, rgba(20, 107, 96, .22), transparent 62%),
        linear-gradient(180deg, #0a1420 0%, #111d2d 100%);
    color: rgba(255, 255, 255, .8);
    padding-block: var(--ruimte-8) var(--ruimte-8);
    overflow: hidden;
}

.artikelheld::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .02) 0 1px,
        transparent 1px 16px
    );
    pointer-events: none;
}

.artikelheld .omhulsel {
    position: relative;
    z-index: 1;
}

.artikelheld h1 {
    color: var(--wit);
    max-width: 18ch;
    font-size: clamp(2.3rem, 1.8rem + 2vw, 4.2rem);
    line-height: .98;
    letter-spacing: -.05em;
    margin-bottom: var(--ruimte-4);
}
.artikelheld__lead {
    font-size: 1.08rem;
    line-height: 1.68;
    color: rgba(255, 255, 255, .76);
    max-width: 62ch;
    margin-top: var(--ruimte-4);
}

.artikelheld__kruimels {
    font-size: .85rem;
    color: rgba(255, 255, 255, .58);
    margin-bottom: var(--ruimte-5);
}
.artikelheld__kruimels a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.artikelheld__kruimels a:hover { color: var(--goud); text-decoration: underline; }

.artikelmeta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--ruimte-4), 2vw, var(--ruimte-6));
    margin-top: var(--ruimte-6);
    padding-top: var(--ruimte-5);
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .87rem;
}
.artikelmeta__blok { display: flex; flex-direction: column; gap: 2px; }
.artikelmeta__naam {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .46);
}
.artikelmeta__waarde {
    color: var(--wit);
    font-weight: 500;
}

.artikelbeeld {
    position: relative;
    z-index: 2;
    margin: calc(var(--ruimte-7) * -1) auto var(--ruimte-7);
    max-width: min(100%, 1200px);
    padding: clamp(.4rem, .9vw, .8rem);
    border: 1px solid rgba(226, 167, 47, .22);
    border-radius: var(--rond-l);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(226,167,47,.05));
    box-shadow: 0 24px 56px rgba(10, 20, 32, .18), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
}
.artikelbeeld img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center center;
    border-radius: calc(var(--rond-l) - .3rem);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(226,167,47,.08));
    filter: saturate(1.08) contrast(1.03);
}
.artikelbeeld figcaption {
    font-size: .84rem;
    color: var(--tekst-zacht);
    margin-top: var(--ruimte-3);
    padding-left: var(--ruimte-4);
    border-left: 2px solid var(--goud);
}

@media (max-width: 820px) {
    .artikelheld {
        padding-block: var(--ruimte-7);
    }

    .artikelheld h1 {
        max-width: none;
    }

    .artikelbeeld {
        margin-top: 0;
        margin-bottom: var(--ruimte-5);
        padding: .35rem;
        border-radius: var(--rond-m);
    }

    .artikelbeeld img {
        border-radius: calc(var(--rond-m) - .15rem);
    }
}

/* One standard premium article rhythm for all article pages */
.article, article {
    --article-frame: 1px solid rgba(226, 167, 47, .18);
}

.article .artikeltekst,
article .artikeltekst {
    max-width: var(--breedte-lees);
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   6. De tekst van een artikel
   --------------------------------------------------------------------------- */
.artikeltekst {
    max-width: var(--breedte-lees);
    margin-inline: auto;
    font-size: 1.115rem;
    line-height: 1.75;
    color: #1d2836;
}

.artikeltekst > p { margin-bottom: var(--ruimte-5); }

.artikeltekst h2 {
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
    margin-top: var(--ruimte-8);
    margin-bottom: var(--ruimte-4);
}
.artikeltekst h3 {
    font-size: 1.22rem;
    margin-top: var(--ruimte-7);
    margin-bottom: var(--ruimte-3);
}
.artikeltekst > *:first-child { margin-top: 0; }

.artikeltekst ul, .artikeltekst ol { margin: 0 0 var(--ruimte-5); padding-left: 1.5rem; }
.artikeltekst li { margin-bottom: var(--ruimte-3); padding-left: .25rem; }
.artikeltekst li::marker { color: var(--goud-donker); }

/* De eerste letter groot, zoals in een tijdschrift. Alleen wanneer de
   openingsalinea lang genoeg is; anders loopt de letter door in de alinea
   eronder. De sjabloon zet daarvoor de klasse. */
@media (min-width: 620px) {
    .artikeltekst--initiaal > p:first-of-type { display: flow-root; }

    .artikeltekst--initiaal > p:first-of-type::first-letter {
        font-family: var(--font-titel);
        font-size: 3.6em;
        line-height: .84;
        font-weight: 600;
        float: left;
        margin: .06em .09em 0 0;
        color: var(--goud-donker);
        font-variation-settings: 'SOFT' 30, 'WONK' 1;
    }
}

/* Citaat: het motief van de twee banen keert terug als hoekmarkering. */
.artikeltekst blockquote {
    position: relative;
    margin: var(--ruimte-7) 0;
    padding: var(--ruimte-5) 0 var(--ruimte-5) var(--ruimte-6);
    border-left: 2px solid var(--goud);
    font-family: var(--font-titel);
    font-size: 1.32rem;
    line-height: 1.45;
    font-style: normal;
    letter-spacing: -.015em;
    color: var(--inkt);
    font-variation-settings: 'SOFT' 24, 'WONK' 1;
}

/* Afbeeldingen die de redactie in de tekst zet. */
.artikeltekst figure { margin: var(--ruimte-7) 0; }
.artikeltekst figure img,
.artikeltekst > img {
    width: 100%;
    border-radius: var(--rond-m);
    background: var(--room-diep);
    box-shadow: var(--schaduw-m);
}
.artikeltekst figcaption {
    font-size: .86rem;
    color: var(--tekst-zacht);
    margin-top: var(--ruimte-3);
    padding-left: var(--ruimte-4);
    border-left: 2px solid var(--lijn-sterk);
}

/* Op ruime schermen mag beeld iets buiten de tekstkolom komen. */
@media (min-width: 1000px) {
    .artikeltekst figure {
        width: calc(100% + 6rem);
        margin-inline: -3rem;
    }
    .artikeltekst figcaption { padding-left: 3rem; border-left: 0; }
}

/* ---------------------------------------------------------------------------
   7. Blok over het netwerklid onder een spotlightverhaal
   --------------------------------------------------------------------------- */
.overleden {
    max-width: var(--breedte-lees);
    margin: var(--ruimte-8) auto 0;
}

.overleden__lijst {
    display: grid;
    gap: var(--ruimte-3);
}

.overlid {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--ruimte-4);
    align-items: center;
    padding: var(--ruimte-4);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--tijd-mid) var(--soepel),
        border-color var(--tijd-mid) var(--soepel),
        box-shadow var(--tijd-mid) var(--soepel);
}

@media (hover: hover) and (pointer: fine) {
    .overlid:hover {
        transform: translateY(-2px);
        border-color: var(--goud);
        box-shadow: var(--schaduw-m);
        color: inherit;
    }
    .overlid:hover .overlid__pijl { transform: translateX(3px); color: var(--goud-donker); }
}

.overlid img {
    width: 72px; height: 72px;
    border-radius: var(--rond-m);
    object-fit: cover;
    background: var(--room-diep);
}

.overlid__tekst { min-width: 0; }
.overlid__tekst strong {
    display: block;
    font-family: var(--font-titel);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--inkt);
    margin-bottom: 2px;
}
.overlid__tekst span {
    display: block;
    font-size: .89rem;
    color: var(--tekst-zacht);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overlid__pijl {
    color: var(--tekst-licht);
    display: grid;
    place-items: center;
    transition: transform var(--tijd-mid) var(--soepel), color var(--tijd-kort) var(--soepel-kort);
}

@media (max-width: 560px) {
    .overlid { grid-template-columns: 56px 1fr auto; padding: var(--ruimte-3); }
    .overlid img { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .overlid:hover { transform: none; }
    .overlid:hover .overlid__pijl { transform: none; }
}

/* ---------------------------------------------------------------------------
   8. Projectband op projectdetail
   --------------------------------------------------------------------------- */
.projectband {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--ruimte-6);
    margin: var(--ruimte-7) auto;
    padding: var(--ruimte-6);
    background: var(--room);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-xl);
}

.projectband__kruis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.projectband__kruis span,
.projectband__kruis i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.projectband__kruis span {
    width: 118px;
    height: 1px;
    background: rgba(14, 27, 43, .16);
}

.projectband__kruis span:first-child {
    transform: translate(-50%, -50%) rotate(34deg);
}

.projectband__kruis span:last-child {
    transform: translate(-50%, -50%) rotate(-34deg);
}

.projectband__kruis i {
    width: 14px;
    height: 14px;
    border: 2px solid var(--goud-donker);
    background: var(--room);
    rotate: 45deg;
}

.projectband__kolom {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--ruimte-4);
    align-content: start;
}

.projectband__kolom--community {
    padding-left: var(--ruimte-6);
    border-left: 1px solid var(--lijn);
}

.projectband__kop h2 {
    margin-bottom: var(--ruimte-2);
}

.projectband__status {
    margin-bottom: 0;
}

.projectband__paneel {
    padding: var(--ruimte-4);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
}

.projectband__acties {
    display: grid;
    gap: var(--ruimte-3);
    justify-items: start;
}

.projectband__knop {
    min-height: 44px;
    align-items: center;
}

.projectband__cluster {
    display: flex;
    padding-left: calc(var(--ruimte-4) + 6px);
}

.projectband__clusteritem,
.projectband__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--rond-vol);
    overflow: hidden;
    background: var(--inkt);
    color: var(--goud-licht);
    display: grid;
    place-items: center;
    font-family: var(--font-titel);
    font-weight: 600;
    flex-shrink: 0;
}

.projectband__clusteritem {
    margin-left: -10px;
    border: 2px solid var(--room);
    z-index: calc(10 - var(--cluster-index, 0));
}

.projectband__clusteritem img,
.projectband__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projectband__leden {
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
}

.projectband__lid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-4);
    padding: var(--ruimte-4) 0;
}

.projectband__lid + .projectband__lid {
    border-top: 1px solid var(--lijn);
}

.projectband__persoon {
    display: flex;
    align-items: center;
    gap: var(--ruimte-3);
    min-width: 0;
}

.projectband__persoontekst {
    min-width: 0;
}

.projectband__persoontekst strong,
.projectband__persoontekst strong a {
    display: block;
    color: var(--inkt);
}

.projectband__persoontekst strong a {
    text-decoration: none;
}

.projectband__profiellink {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    text-underline-offset: .18em;
}

.projectband__persoontekst span {
    display: block;
    color: var(--tekst-zacht);
    font-size: .9rem;
}

.projectband a:focus-visible,
.projectband button:focus-visible {
    outline: 3px solid rgba(20, 107, 96, .18);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .projectband {
        grid-template-columns: 1fr;
    }

    .projectband__kolom--community {
        padding-left: 0;
        padding-top: var(--ruimte-5);
        border-left: 0;
        border-top: 1px solid var(--lijn);
    }
}

@media (max-width: 640px) {
    .projectband {
        padding: var(--ruimte-5);
    }

    .projectband__lid {
        flex-direction: column;
        align-items: stretch;
    }

    .projectband__acties,
    .projectband__knop {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   9. Schrijfomgeving in het beheer
   --------------------------------------------------------------------------- */
.editor {
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-m);
    background: var(--wit);
    overflow: hidden;
    transition: border-color var(--tijd-kort) var(--soepel-kort), box-shadow var(--tijd-kort) var(--soepel-kort);
}
.editor:focus-within {
    border-color: var(--groen);
    box-shadow: 0 0 0 3px rgba(20, 107, 96, .14);
}

.editor__balk {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: var(--ruimte-2);
    background: var(--room);
    border-bottom: 1px solid var(--lijn);
    position: sticky;
    top: 0;
    z-index: 5;
}

.editor__knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 34px;
    height: 34px;
    padding: 0 .5rem;
    border: 1px solid transparent;
    border-radius: var(--rond-s);
    background: transparent;
    color: var(--tekst-zacht);
    font-family: var(--font-tekst);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--tijd-tik) var(--soepel-kort),
        color var(--tijd-tik) var(--soepel-kort),
        border-color var(--tijd-tik) var(--soepel-kort);
}
.editor__knop:hover { background: var(--room-diep); color: var(--inkt); }
.editor__knop:active { transform: translateY(1px); }
.editor__knop.is-aan { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.editor__knop[disabled] { opacity: .4; cursor: default; }

.editor__scheiding {
    width: 1px;
    align-self: stretch;
    margin-inline: var(--ruimte-2);
    background: var(--lijn);
}

.editor__veld {
    min-height: 440px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--ruimte-6);
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--tekst);
    outline: none;
}
.editor__veld:empty::before {
    content: attr(data-plaatshouder);
    color: var(--tekst-licht);
    pointer-events: none;
}

/* De tekst in de schrijfomgeving lijkt op de tekst in het artikel, zodat je
   ziet wat je maakt. */
.editor__veld > *:first-child { margin-top: 0; }
.editor__veld p { margin: 0 0 var(--ruimte-4); }
.editor__veld h2 {
    font-size: 1.55rem;
    margin: var(--ruimte-6) 0 var(--ruimte-3);
}
.editor__veld h3 {
    font-size: 1.22rem;
    margin: var(--ruimte-5) 0 var(--ruimte-3);
}
.editor__veld ul, .editor__veld ol { margin: 0 0 var(--ruimte-4); padding-left: 1.5rem; }
.editor__veld li { margin-bottom: var(--ruimte-2); }
.editor__veld blockquote {
    margin: var(--ruimte-5) 0;
    padding: var(--ruimte-3) var(--ruimte-5);
    border-left: 3px solid var(--goud);
    font-family: var(--font-titel);
    font-size: 1.2rem;
    color: var(--inkt);
}
.editor__veld a { color: var(--groen); }
.editor__veld figure { margin: var(--ruimte-5) 0; }
.editor__veld figure img { border-radius: var(--rond-m); width: 100%; }
.editor__veld figcaption {
    font-size: .86rem;
    color: var(--tekst-zacht);
    margin-top: var(--ruimte-2);
    padding-left: var(--ruimte-3);
    border-left: 2px solid var(--lijn-sterk);
}
.editor__veld img { max-width: 100%; height: auto; }

/* Terwijl een foto wordt geüpload. */
.editor__veld figure.is-bezig { opacity: .55; }

.editor__hulp {
    padding: var(--ruimte-3) var(--ruimte-4);
    background: var(--room);
    border-top: 1px solid var(--lijn);
    font-size: .82rem;
    color: var(--tekst-zacht);
    display: flex;
    justify-content: space-between;
    gap: var(--ruimte-4);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   9. Filterknoppen

   De keuze tussen soorten berichten en onderwerpen. Geen pictogrammen: de
   naam van het onderwerp zegt genoeg, en met het aantal erbij weet de lezer
   meteen wat een filter oplevert.
   --------------------------------------------------------------------------- */
.filterbalk__kop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-4);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ruimte-5);
}

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

.filterknoppen--onderwerpen {
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--lijn);
    margin-bottom: var(--ruimte-7);
}

.filterknop {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .56rem 1.05rem;
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-vol);
    background: var(--wit);
    color: var(--tekst-zacht);
    font-family: var(--font-tekst);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .005em;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform var(--tijd-tik) var(--soepel),
        background-color var(--tijd-kort) var(--soepel-kort),
        border-color var(--tijd-kort) var(--soepel-kort),
        color var(--tijd-kort) var(--soepel-kort),
        box-shadow var(--tijd-kort) var(--soepel);
}

.filterknop__aantal {
    font-size: .74rem;
    font-weight: 700;
    color: var(--tekst-licht);
    font-variant-numeric: tabular-nums;
    transition: color var(--tijd-kort) var(--soepel-kort);
}

/* De highlight bij het aanwijzen: warme rand, licht opgetild. */
@media (hover: hover) and (pointer: fine) {
    .filterknop:hover {
        background: #fffdf7;
        border-color: var(--goud);
        color: var(--inkt);
        transform: translateY(-1px);
        box-shadow: var(--schaduw-m);
    }
    .filterknop:hover .filterknop__aantal { color: var(--goud-donker); }
}

/* Bij het indrukken zakt de knop weer in. */
.filterknop:active {
    transform: translateY(1px);
    box-shadow: var(--schaduw-s);
}

/* De gekozen knop is gevuld, met een zachte gouden ring eromheen. */
.filterknop.is-actief {
    background: var(--inkt);
    border-color: var(--inkt);
    color: var(--wit);
    box-shadow: 0 0 0 3px rgba(226, 167, 47, .2), var(--schaduw-m);
}
.filterknop.is-actief .filterknop__aantal { color: var(--goud); }

@media (hover: hover) and (pointer: fine) {
    .filterknop.is-actief:hover {
        background: var(--inkt-op);
        border-color: var(--inkt-op);
        color: var(--wit);
    }
    .filterknop.is-actief:hover .filterknop__aantal { color: var(--goud-licht); }
}

/* ---------------------------------------------------------------------------
   10. Zoekveld bij het nieuws
   --------------------------------------------------------------------------- */
.zoekveld {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .22rem .22rem 1rem;
    background: var(--wit);
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-vol);
    transition: border-color var(--tijd-kort) var(--soepel-kort), box-shadow var(--tijd-kort) var(--soepel);
}
.zoekveld:focus-within {
    border-color: var(--groen);
    box-shadow: 0 0 0 3px rgba(20, 107, 96, .14);
}

.zoekveld input {
    width: 210px;
    max-width: 46vw;
    border: 0;
    background: transparent;
    padding: .4rem 0;
    font-size: .9rem;
}
.zoekveld input:focus { outline: none; box-shadow: none; }

.zoekveld__knop {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--rond-vol);
    background: var(--inkt);
    color: var(--wit);
    cursor: pointer;
    transition: background-color var(--tijd-kort) var(--soepel-kort), transform var(--tijd-tik) var(--soepel);
}
@media (hover: hover) and (pointer: fine) {
    .zoekveld__knop:hover { background: var(--goud); color: var(--inkt); }
}
.zoekveld__knop:active { transform: scale(.94); }