/* ===========================================================================
   hsb-sprekers.css — het sprekersoverzicht, in de vorm van het canvas
   ===========================================================================

   Hoort bij het bord "Sprekers". Alle maten hieronder zijn overgenomen uit de
   stijlregels van dat bord, niet nagetekend op het oog:

       --r-groot : 40px 2px 40px 2px   de filterkaart
       --r-kaart : 24px 2px 24px 2px   de sprekerskaart
       --r-sm    : 13px                het zoekveld
       --r-knop  : 12px                de knoppen
       --r-keuze : 11px                de keuzelijsten
       --r-xs    : 12px                sorteren en weergave
       --lijn    : #e3e8ee   --vlak : #f6f8fa
       --blauw   : #103856   --grijs: #5b6b7c   --oranje-knop: #c24d16

   WAAROM DE VORIGE VERSIE NIETS DEED -- twee dingen, allebei in sprekers.css:

     1. `.sb-card { border-radius:16px; overflow:hidden }`. Door die
        overflow knipt de kaart alles weg wat eruit steekt, dus ook de
        hoeken die ik aan `.sb-card-media` meegaf. Je zag 16px rond, aan
        alle vier de kanten, wat ik er ook onder zette.

     2. Voor `.sb-filter-card` stond hier simpelweg geen regel. Die hield
        dus zijn eigen 18px.

   Vandaar dat hieronder eerst de omhulsels worden vrijgemaakt (geen rand,
   geen eigen radius, geen overflow) en de rand pas daarna op de delen komt
   te staan die hem op het bord ook hebben.

   Laden NA /assets/css/sprekers.css. Staat het ervoor, dan wint die.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. De kleuren van deze pagina
   ---------------------------------------------------------------------------
   Elke kleur hieronder staat één keer. De donkere stand onderaan dit bestand
   zet alleen deze tokens om; aan de regels zelf verandert dan niets.

   (Ze stonden eerst op `.sb-sprekers`, en die klasse staat nergens in de
   opmaak. Ze deden dus niets -- elke regel viel terug op de kleur die er
   achter de komma stond.)
   --------------------------------------------------------------------------- */

:root {
    --sb-pagina:      #ffffff;   /* de pagina zelf                           */
    --sb-vlak:        #f6f8fa;   /* het vlak achter de filters en de kaarten */
    --sb-kaart:       #ffffff;   /* filterkaart, tekstvlak van een kaart     */
    --sb-veld:        #ffffff;   /* zoekveld, keuzelijst, sorteren           */
    --sb-fotovlak:    #e7edf3;   /* wat je ziet tot de foto geladen is       */
    --sb-lijn:        #e3e8ee;
    --sb-lijn-sterk:  #c3d4e2;   /* rand van een invulveld                   */
    --sb-lijn-hover:  #c6d0da;
    --sb-tekst:       #1d2733;
    --sb-grijs:       #5b6b7c;
    --sb-blauw:       #103856;
    --sb-paneel:      #103856;   /* de hero                                  */
    --sb-knop:        #c24d16;
    --sb-knop-donker: #a63f0f;
    --sb-hover:       #f1f4f7;
    --sb-chip-vlak:   #fdeee4;
    --sb-chip-tekst:  #a0450f;
    --sb-aan:         #103856;   /* de aangezette weergaveknop               */
    --sb-aan-tekst:   #ffffff;
    --sb-glas:        rgba(255, 255, 255, .5);
    --sb-glas-tekst:  #103856;
}


/* ---------------------------------------------------------------------------
   1. De hero als paneel
   --------------------------------------------------------------------------- */

.sb-hero--paneel {
    background: transparent;
    border-bottom: 0;
    padding: 20px 0 0;
}

.sb-hero__paneel {
    border-radius: 48px 2px 48px 2px;
    background: var(--sb-paneel);
    color: #fff;
    padding: 46px 48px 52px;
}

.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap,
.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap *,
.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap a {
    color: rgba(255, 255, 255, .72);
    border-color: rgba(255, 255, 255, .22);
}

.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap a:hover {
    color: #fff;
}

/* De selector moet h1.sb-h1 bevatten en niet alleen .sb-h1. In sprekers.css
   staat `.sb-hero h1.sb-h1 { color: var(--sb-navy) }` -- een klasse, een
   element en nog een klasse. Dat weegt zwaarder dan twee klassen, dus een
   kortere selector verliest en de kop bleef donkerblauw op donkerblauw. */
.sb-hero--paneel .sb-hero__paneel h1.sb-h1 {
    color: #fff;
    margin: 0 0 14px;
    max-width: 16em;
}

.sb-hero--paneel .sb-hero__paneel .sb-hero-intro,
.sb-hero--paneel .sb-hero__paneel .sb-hero-intro p,
.sb-hero--paneel .sb-hero__paneel .sb-hero-intro li,
.sb-hero--paneel .sb-hero__paneel .sb-hero-intro strong {
    color: rgba(255, 255, 255, .8);
    max-width: 38em;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .sb-hero__paneel {
        border-radius: 32px 2px 32px 2px;
        padding: 32px 28px 34px;
    }
}

@media (max-width: 575.98px) {
    .sb-hero__paneel {
        border-radius: 24px 2px 24px 2px;
        padding: 26px 20px 28px;
    }
}


/* ---------------------------------------------------------------------------
   2. Het grijze vlak onder de hero
   ---------------------------------------------------------------------------
   Op het bord staan de filterkaart en de resultaten op #f6f8fa en niet op
   wit. Dat is geen opsmuk: witte kaarten op een witte pagina hebben alleen
   hun randje van 1 px om zich mee af te tekenen, en dat zie je nauwelijks.
   --------------------------------------------------------------------------- */

.sb-vlak {
    background: var(--sb-vlak);
    padding: 28px 0 72px;
}


/* ---------------------------------------------------------------------------
   3. De filterkaart
   --------------------------------------------------------------------------- */

.sb-filter-card {
    margin-top: 0;
    border: 1px solid var(--sb-lijn);
    border-radius: 40px 2px 40px 2px;
    box-shadow: 0 10px 30px rgba(16, 56, 86, .08);
    padding: 18px;
}

@media (max-width: 575.98px) {
    .sb-filter-card {
        border-radius: 28px 2px 28px 2px;
        padding: 14px;
    }
}


/* --- de zoekrij: veld, Zoeken, Alle filters -------------------------------
   Het vergrootglas stond als los icoon bóven het veld. Nu staat het erin,
   met de twee knoppen ernaast, zoals op het bord. De hoeken hier zijn
   bewust klein en gelijk: alleen de kaart eromheen krijgt de huisvorm, de
   bedieningselementen erin niet. Zo blijft de vorm één gebaar per kaart in
   plaats van tien kleine. */

.sb-zoekrij {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.sb-zoekrij .sb-search-wrap {
    flex: 1 1 360px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 18px;
    border: 1px solid var(--sb-lijn);
    border-radius: 13px;
    background: var(--sb-veld);
    margin: 0;
}

.sb-zoekrij .sb-search-wrap > svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--sb-grijs);
}

.sb-zoekrij .sb-search {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-family: inherit;
    color: var(--sb-tekst);
    box-shadow: none;
}

.sb-zoekrij .sb-search-wrap:focus-within {
    border-color: var(--sb-blauw);
    box-shadow: 0 0 0 3px rgba(16, 56, 86, .12);
}

.sb-zoekknop {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 56px;
    padding: 0 30px;
    border: 0;
    border-radius: 12px;
    background: var(--sb-knop);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .2s;
}

.sb-zoekknop:hover,
.sb-zoekknop:focus-visible {
    background: var(--sb-knop-donker);
    color: #fff;
}

/* "Alle filters" vouwt alle keuzelijsten tegelijk open in plaats van ze een
   voor een te laten uitklappen. Met 249 onderwerpen en 45 thema's scheelt
   dat echt werk. Het cijfertje erin is het aantal filters dat aan staat. */
.sb-allefilters {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 56px;
    padding: 0 22px;
    border: 1px solid var(--sb-lijn);
    border-radius: 12px;
    background: var(--sb-veld);
    color: var(--sb-blauw);
    font-size: 15.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.sb-allefilters:hover {
    background: var(--sb-hover);
}

.sb-allefilters[aria-expanded="true"] {
    border-color: var(--sb-blauw);
}

.sb-allefilters__aantal {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sb-knop);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.sb-allefilters__aantal.show {
    display: inline-flex;
}


/* --- de populaire onderwerpen, tussen zoekveld en keuzelijsten ----------- */

.sb-snel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.sb-snel__kop {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sb-grijs);
}

.sb-snel .sb-ai-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.sb-snel .sb-ai-pill {
    border-radius: 999px;
    padding: 7px 14px;
    border-color: var(--sb-lijn);
}

.sb-snel__alle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sb-knop);
    text-decoration: none;
    white-space: nowrap;
}

.sb-snel__alle:hover {
    text-decoration: underline;
    color: var(--sb-knop-donker);
}

@media (max-width: 767.98px) {
    .sb-snel__alle { margin-left: 0; }
}


/* --- de vijf keuzelijsten ------------------------------------------------ */

.sb-filter-row {
    gap: 10px;
}

.sb-filter-card .sb-fd-btn {
    height: 48px;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--sb-lijn);
    border-radius: 11px;
}

.sb-filter-card .sb-fd-btn:hover {
    border-color: var(--sb-lijn-hover);
}

.sb-filter-card .sb-fd-btn.is-open,
.sb-filter-card .sb-fd-btn.has-value {
    border-color: var(--sb-blauw);
}

.sb-filter-card .sb-fd-btn > svg:first-child {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--sb-grijs);
}

.sb-filter-card .sb-fd-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sb-blauw);
}

.sb-filter-card .sb-fd-car {
    width: 15px;
    height: 15px;
    color: var(--sb-grijs);
}

/* Het telletje in een keuzelijst. Dit stond op var(--sb-blauw), en dat token
   is in de donkere stand wit -- wit cijfer op een wit rondje. */
.sb-filter-card .sb-fd-count {
    background: var(--sb-aan);
    color: var(--sb-aan-tekst);
}

.sb-filter-card .sb-fd-menu {
    border-radius: 14px;
    border-color: var(--sb-lijn);
}


/* --- alles tegelijk open ------------------------------------------------- */

.sb-filter-card.toon-alles .sb-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
}

.sb-filter-card.toon-alles .sb-fd {
    flex: none;
    min-width: 0;
}

.sb-filter-card.toon-alles .sb-fd-menu {
    position: static;
    display: block;
    margin-top: 8px;
    min-width: 0;
    max-width: none;
    box-shadow: none;
}

.sb-filter-card.toon-alles .sb-fd-car {
    transform: rotate(180deg);
}

/* Sorteren is géén filter en hoort hier niet bij open te klappen. */
.sb-filter-card.toon-alles #sort-dd .sb-fd-menu {
    position: absolute;
    display: none;
}


/* ---------------------------------------------------------------------------
   4. Zoeken binnen een keuzelijst
   ---------------------------------------------------------------------------
   Alleen bij de lijsten met meer dan twaalf regels: Onderwerp (249) en
   Thema (45). Het veld blijft staan terwijl de lijst eronder scrollt.
   --------------------------------------------------------------------------- */

.sb-fd-zoek {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 2px 0 10px;
    background: var(--sb-kaart);
    border-bottom: 1px solid var(--sb-lijn);
    margin-bottom: 8px;
}

.sb-fd-zoek__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sb-fd-zoek__veld {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--sb-lijn-sterk);
    border-radius: 11px;
    font-size: .9375rem;
    font-family: inherit;
    color: inherit;
    background: var(--sb-veld);
}

.sb-fd-zoek__veld:focus {
    outline: none;
    border-color: var(--sb-blauw);
    box-shadow: 0 0 0 3px rgba(16, 56, 86, .12);
}

.sb-fd-zoek__leeg {
    margin: 10px 2px 0;
    font-size: .875rem;
    color: var(--sb-grijs);
}

/* Een regel die door het zoeken wegvalt. `hidden` alleen is niet genoeg:
   in de lijst staat display: flex, en dat wint van het hidden-attribuut. */
.sb-fd-scroll .sb-check[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------------------------
   5. De balk onder de filterkaart
   ---------------------------------------------------------------------------
   Links de filters die aan staan, rechts het aantal, het sorteren en de
   weergave. De chips stonden hiervoor ín de kaart; op het bord staan ze
   eronder, en dat is ook logischer: ze horen bij de uitkomst en niet bij
   het formulier.
   --------------------------------------------------------------------------- */

.sb-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    /* Onderaan 26 px, anders staat de rij met de chips en het aantal strak
       tegen de bovenkant van de eerste kaarten aan. De kaarten hebben zelf
       alleen een marge ONDER zich (mb-4 van Bootstrap), dus boven het raster
       komt er niets vandaan. */
    padding: 18px 4px 26px;
}

.sb-balk .sb-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.sb-balk .sb-chip,
.sb-balk .sb-chip.is-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px 7px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--sb-chip-vlak);
    color: var(--sb-chip-tekst);
    font-size: 14px;
    font-weight: 600;
}

.sb-balk .chip-sluit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.sb-balk .chip-sluit:hover {
    background: rgba(160, 69, 15, .14);
}

.sb-wisalles {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--sb-grijs);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sb-wisalles:hover { color: var(--sb-blauw); }

.sb-balk__rechts {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* De kop "443 sprekers gevonden". Blijft een h2 voor de structuur van de
   pagina, maar hoeft er niet uit te zien als een koptekst. */
.sb-balk .sb-results-title {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--sb-grijs);
}

.sb-balk .sb-results-title .js-results-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-tekst);
}

.sb-balk .sb-sort-wrap {
    gap: 10px;
    font-size: 14px;
}

/* "Sorteer op:" brak af over twee regels en duwde de balk daarmee hoger. */
.sb-balk .sb-sort-wrap > span { white-space: nowrap; }

.sb-balk .sb-tool-btn {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border-color: var(--sb-lijn);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sb-tekst);
}

.sb-weergave {
    display: flex;
    gap: 6px;
}

.sb-weergave__knop {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sb-lijn);
    border-radius: 12px;
    background: var(--sb-veld);
    color: var(--sb-grijs);
    cursor: pointer;
}

.sb-weergave__knop:hover { border-color: var(--sb-lijn-hover); }

.sb-weergave__knop[aria-pressed="true"] {
    border-color: var(--sb-aan);
    background: var(--sb-aan);
    color: var(--sb-aan-tekst);
}

/* De oude losse resultatenkop is opgegaan in de balk hierboven. */
.sb-results-head.sb-balk {
    justify-content: flex-start;
}


/* ---------------------------------------------------------------------------
   6. De sprekerskaart
   ---------------------------------------------------------------------------
   De foto rondt alleen bovenaan af, het tekstvlak alleen onderaan, zonder
   kier ertussen. Samen vormen ze één kaart met de asymmetrische hoeken.

   `.sb-card` zelf is hier doorzichtig en heeft geen rand meer: die staat op
   het tekstvlak. De radius blijft er wel op staan, want daar volgt de
   schaduw bij het zweven zijn vorm naar. En `overflow` moet weg -- dat was
   wat de hoeken van de foto wegknipte.
   --------------------------------------------------------------------------- */

.sb-card {
    background: transparent;
    border: 0;
    border-radius: 24px 2px 24px 2px;
    overflow: visible;
}

.sb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(16, 56, 86, .10);
}

.sb-card:hover .sb-card-main {
    border-color: var(--sb-lijn-hover);
}

/* Vierkant, zoals op het bord. Stond op height:200px, en dan hangt de
   verhouding af van de kolombreedte: op een breed scherm werd de foto
   liggend en op een smal scherm bijna vierkant. */
.sb-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: none;
    border-radius: 24px 2px 0 0;
    overflow: hidden;
    background: var(--sb-fotovlak);
}

.sb-card-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.sb-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sb-card-main {
    flex: 1 1 auto;
    background: var(--sb-kaart);
    border: 1px solid var(--sb-lijn);
    border-top: 0;
    border-radius: 0 0 24px 2px;
    padding: 20px 22px 22px;
    transition: border-color .2s;
}

.sb-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--sb-blauw);
    margin: 0 0 5px;
    letter-spacing: -.2px;
}

.sb-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sb-grijs);
    margin: 0 0 16px;
    height: 2.95em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- wat er op de foto hangt --------------------------------------------- */

/* Het hartje: zelfde doorzichtige witte vlakje als het vlaglabel, zodat de
   twee hoeken bij elkaar horen. Stond op 94% wit en was daardoor een stuk
   zwaarder dan de rest. */
.sb-card-media .sb-fav {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: var(--sb-glas);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(16, 56, 86, .12);
    color: var(--sb-glas-tekst);
}

/* De vlaggetjes linksonder. Opmaak staat in hsb-vorm.css; hier alleen de
   plaats, gelijk aan die van het tarief ertegenover. */
.sb-card-media .hsb-kaart__talen {
    bottom: 12px;
    left: 12px;
}

/* Het tarief rechtsonder, in hetzelfde doorzichtige vlakje. */
.sb-card-tarief {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--sb-glas);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(16, 56, 86, .12);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sb-glas-tekst);
    white-space: nowrap;
}

/* --- de onderste regel van de kaart -------------------------------------- */

.sb-card-foot {
    margin-top: auto;
    padding-top: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sb-card-chip {
    padding: 5px 10px;
    border: 1px solid var(--sb-lijn);
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sb-grijs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.sb-card-link {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    background: var(--sb-knop);
    color: #fff;
}

.sb-card-link:hover {
    background: var(--sb-knop-donker);
    color: #fff;
}

.sb-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}

.sb-card:hover .sb-card-link svg { transform: translateX(3px); }


/* ---------------------------------------------------------------------------
   7. De lijstweergave
   ---------------------------------------------------------------------------
   De tweede knop rechts in de balk. Dezelfde kaarten, naast elkaar gelegd in
   plaats van onder elkaar, zodat je meer namen tegelijk ziet. De hoeken
   lopen mee: rond linksboven en rechtsonder, de andere twee recht.
   --------------------------------------------------------------------------- */

.sb-lijst #items-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.sb-lijst .sb-card { flex-direction: row; }

/* De foto blijft vierkant. Daarom staat de hoogte van de hele regel vast op
   dezelfde 200 px: rekt het tekstvlak verder uit, dan rekt de foto mee en is
   hij niet vierkant meer. */
.sb-lijst .sb-card-media {
    flex: 0 0 200px;
    width: 200px;
    border-radius: 24px 0 0 2px;
}

.sb-lijst .sb-card-main {
    min-height: 200px;
    border: 1px solid var(--sb-lijn);
    border-left: 0;
    border-radius: 0 2px 24px 0;
    justify-content: center;
}

.sb-lijst .sb-card-desc {
    height: auto;
    -webkit-line-clamp: 2;
}

/* In het raster rekt .sb-card-body uit (flex:1) en duwt margin-top:auto de
   onderste regel naar de bodem van de kaart. Dat is daar precies goed: alle
   kaarten in een rij eindigen dan gelijk. In een regel van 200 px hoog wordt
   het een gat van tachtig pixels tussen de zin en het chipje. Hier dus allebei
   uit, en het blok als geheel verticaal in het midden. */
.sb-lijst .sb-card-body { flex: 0 0 auto; }
.sb-lijst .sb-card-foot { margin-top: 14px; }

@media (max-width: 575.98px) {
    /* Onder deze breedte is een kaart van 200 px foto plus tekst smaller dan
       leesbaar. Dan gewoon weer onder elkaar. */
    .sb-lijst .sb-card { flex-direction: column; }
    .sb-lijst .sb-card-media { flex: none; width: auto; border-radius: 24px 2px 0 0; }
    .sb-lijst .sb-card-main { min-height: 0; border-left: 1px solid var(--sb-lijn); border-top: 0; border-radius: 0 0 24px 2px; }
    .sb-lijst .sb-card-foot { margin-top: auto; }

    /* Een knop van 30 px breed naast een veld van 120 px helpt niemand. */
    .sb-zoekknop,
    .sb-allefilters { flex: 1 1 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------------
   8. Meer sprekers
   ---------------------------------------------------------------------------
   In plaats van één donkere pil: hoeveel je er ziet van het totaal, een
   balkje dat dat laat zien, en twee knoppen. Zo weet je of doorklikken nog
   zin heeft -- bij 443 sprekers is "Laad meer" anders een knop zonder eind.
   --------------------------------------------------------------------------- */

.sb-meer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 44px;
}

.sb-meer__tekst {
    margin: 0;
    font-size: 14.5px;
    color: var(--sb-grijs);
}

.sb-meer__balk {
    width: 220px;
    height: 5px;
    border-radius: 999px;
    background: var(--sb-lijn);
    overflow: hidden;
}

.sb-meer__balk > span {
    display: block;
    height: 100%;
    background: var(--sb-aan);
    transition: width .3s ease;
}

.sb-meer__knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* De bestaande knop houdt zijn id en zijn klasse, zodat de JavaScript eronder
   niet hoeft te veranderen. Alleen de vorm is anders. */
.sb-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 26px;
    border: 1px solid var(--sb-blauw);
    border-radius: 12px;
    background: var(--sb-veld);
    color: var(--sb-blauw);
    font-size: 16px;
    font-weight: 700;
    box-shadow: none;
}

.sb-loadmore:hover {
    background: var(--sb-hover);
    color: var(--sb-blauw);
}

.sb-meer__alles {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 22px;
    border: 1px solid var(--sb-lijn);
    border-radius: 12px;
    background: var(--sb-veld);
    color: var(--sb-tekst);
    font-size: 15.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.sb-meer__alles:hover { background: var(--sb-hover); }


/* ---------------------------------------------------------------------------
   Vangnet voor .visually-hidden
   ---------------------------------------------------------------------------
   hsb-vlag.php zet achter de vlaggetjes een zin die alleen een schermlezer
   hoort: "Spreekt Nederlands en Engels". Die wordt verborgen met de klasse
   .visually-hidden, en die komt uit Bootstrap. Wordt Bootstrap om wat voor
   reden niet geladen, dan staat die zin ineens zichtbaar op de foto.
   --------------------------------------------------------------------------- */

.hsb-kaart__talen .visually-hidden,
.sb-card-tarief .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ---------------------------------------------------------------------------
   9. Kleuren die uit sprekers.css komen
   ---------------------------------------------------------------------------
   Deze elementen krijgen hun kleur daar, met een vaste waarde: background:#fff
   en color:var(--sb-navy). Een token in :root bereikt ze dus niet. Hier worden
   ze alsnog op de tokens hierboven gezet, zodat ze in de donkere stand mee
   omschakelen. In de lichte stand verandert er niets: dezelfde kleuren.
   --------------------------------------------------------------------------- */

/* sprekers.css zet `body { background:#ffffff; color:var(--sb-ink) }` met een
   vaste waarde. Dat bestand laadt na hsb-nacht.css, dus in de donkere stand
   bleef de pagina eronder wit terwijl alles erop zwart werd. */
body                              { background: var(--sb-pagina); color: var(--sb-tekst); }

.sb-filter-card                   { background: var(--sb-kaart); }
.sb-filter-card .sb-fd-btn        { background: var(--sb-veld); }
.sb-filter-card .sb-fd-menu       { background: var(--sb-kaart); }
.sb-filter-card .sb-check         { color: var(--sb-tekst); }
.sb-filter-card .sb-check:hover   { background: var(--sb-hover); }

.sb-snel .sb-ai-pill              { background: var(--sb-veld); color: var(--sb-blauw); }
.sb-snel .sb-ai-pill:hover        { border-color: var(--sb-lijn-hover); }
.sb-snel .sb-ai-pill.active       { background: var(--sb-aan); border-color: var(--sb-aan); color: var(--sb-aan-tekst); }

.sb-balk .sb-tool-btn             { background: var(--sb-veld); }
.sb-balk .sb-sort-menu            { background: var(--sb-kaart); border-color: var(--sb-lijn); }
.sb-balk .sb-sort-item            { color: var(--sb-tekst); }
.sb-balk .sb-sort-item:hover      { background: var(--sb-hover); }
.sb-balk .sb-sort-item.active     { color: var(--sb-blauw); }

.sb-zoekrij .sb-search::placeholder,
.sb-fd-zoek__veld::placeholder    { color: var(--sb-grijs); opacity: 1; }

.sb-seo,
.sb-seo h2                        { color: var(--sb-tekst); }


/* ---------------------------------------------------------------------------
   10. De donkere stand
   ---------------------------------------------------------------------------
   Zwart, wit en oranje. Niet donkerblauw: de menubalk en de hero zijn zelf al
   donkerblauw, en op een donkerblauwe achtergrond vallen die tegen elkaar weg.
   Op zwart staat alles los van elkaar en blijft oranje het enige wat opvalt --
   wat precies de bedoeling is, want dat zijn de knoppen.

   Alleen de tokens veranderen. Aan de regels hierboven verandert niets.

   De dubbele opschrijving hoort erbij: de media query volgt de voorkeur van
   het systeem, de tweede volgt de knop in de menubalk. De knop moet altijd
   winnen, vandaar :root:not([data-thema="licht"]) in de eerste.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --sb-pagina:      #0f1012;
        --sb-vlak:        #0f1012;
        --sb-kaart:       #17181c;
        --sb-veld:        #101114;
        --sb-fotovlak:    #22242a;
        --sb-lijn:        #2b2d33;
        --sb-lijn-sterk:  #3a3d45;
        --sb-lijn-hover:  #4a4e57;
        --sb-tekst:       #f2f3f5;
        --sb-grijs:       #a3a8b0;
        --sb-blauw:       #f2f3f5;
        --sb-paneel:      #17181c;
        --sb-knop:        #ed6e26;
        --sb-knop-donker: #f58a4b;
        --sb-hover:       #22242a;
        --sb-chip-vlak:   rgba(237, 110, 38, .18);
        --sb-chip-tekst:  #f9a877;
        --sb-aan:         #f2f3f5;
        --sb-aan-tekst:   #0f1012;
        --sb-glas:        rgba(255, 255, 255, .55);
        --sb-glas-tekst:  #10131a;
    }
}

:root[data-thema="donker"] {
    --sb-pagina:      #0f1012;
    --sb-vlak:        #0f1012;
    --sb-kaart:       #17181c;
    --sb-veld:        #101114;
    --sb-fotovlak:    #22242a;
    --sb-lijn:        #2b2d33;
    --sb-lijn-sterk:  #3a3d45;
    --sb-lijn-hover:  #4a4e57;
    --sb-tekst:       #f2f3f5;
    --sb-grijs:       #a3a8b0;
    --sb-blauw:       #f2f3f5;
    --sb-paneel:      #17181c;
    --sb-knop:        #ed6e26;
    --sb-knop-donker: #f58a4b;
    --sb-hover:       #22242a;
    --sb-chip-vlak:   rgba(237, 110, 38, .18);
    --sb-chip-tekst:  #f9a877;
    --sb-aan:         #f2f3f5;
    --sb-aan-tekst:   #0f1012;
    --sb-glas:        rgba(255, 255, 255, .55);
    --sb-glas-tekst:  #10131a;
}

/* Twee dingen die geen token kunnen zijn, omdat ze in de lichte stand niet
   bestaan: de hero krijgt een randje zodat hij zich aftekent tegen het zwart,
   en de schaduw onder de filterkaart gaat eruit -- een schaduw op zwart doet
   niets behalve de randen vervuilen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) .sb-hero__paneel { border: 1px solid var(--sb-lijn); }
    :root:not([data-thema="licht"]) .sb-filter-card  { box-shadow: none; }
    :root:not([data-thema="licht"]) .sb-card:hover   { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
}

:root[data-thema="donker"] .sb-hero__paneel { border: 1px solid var(--sb-lijn); }
:root[data-thema="donker"] .sb-filter-card  { box-shadow: none; }
:root[data-thema="donker"] .sb-card:hover   { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }