@charset "UTF-8";
/* ===== /assets/css/hsb-profiel.css ===== */
/* ===========================================================================
   hsb-profiel.css — de profielpagina in de vorm van het canvas
   ===========================================================================

   Hoort bij het bord "Stap 4 — Sprekersprofiel, desktop". Laden NA de rest,
   vanuit item-profiel.php; alleen die pagina heeft het nodig.

   Twee dingen staan hierin:

     1. De opmaak van het ankermenu. Die stond als <style> midden in
        includes/item-subnav.php. Hier staat hij in een bestand, zoals
        afgesproken.

     2. De verschillen met het bord: de quote als donkerblauw paneel, het
        cijfer in een kader, en de huisvorm op de kaarten. De volgorde van de
        secties zit niet hier maar in includes/item-hero.php.

   De tokens onderaan schakelen mee met de donkere stand, net als op
   /sprekers.
   =========================================================================== */

:root {
    --pf-blauw:   #103856;
    --pf-diep:    #0b2940;
    --pf-oranje:  #f56c20;
    --pf-knop:    #c24d16;
    --pf-lijn:    #e3e8ee;
    --pf-vlak:    #f6f8fa;
    --pf-kaart:   #ffffff;
    --pf-tekst:   #1d2733;
    --pf-grijs:   #5b6b7c;
}


/* ---------------------------------------------------------------------------
   1. Het ankermenu
   ---------------------------------------------------------------------------
   Blijft plakken onder de vaste hoofdbalk. Een knop waarvan de sectie niet
   bestaat verbergt het script zelf; dat is handig, want niet elk profiel
   heeft boeken of video's.
   --------------------------------------------------------------------------- */

.item-subnav {
    display: block;
    width: 100%;
    min-height: 50px;
    position: sticky;
    top: var(--hsb-header-h, 76px);
    z-index: 1020;
    background: var(--pf-kaart);
    border-bottom: 1px solid var(--pf-lijn);
    box-shadow: 0 6px 18px rgba(16, 56, 86, .06);
}

.item-subnav-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.item-subnav-scroll::-webkit-scrollbar { display: none; }

.item-subnav-link {
    display: inline-block;
    padding: 16px 14px 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pf-blauw);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.item-subnav-link:hover { color: var(--pf-oranje); }

.item-subnav-link.actief {
    color: var(--pf-blauw);
    border-bottom-color: var(--pf-oranje);
}

/* Op het bord is deze knop donkerblauw en niet oranje. Dat is met opzet:
   oranje blijft voorbehouden aan de twee plekken waar je echt wilt dat er
   geklikt wordt -- de knop in de hero en die onder het aanvraagformulier.
   Is elke knop oranje, dan valt geen enkele knop meer op. */
.item-subnav-cta {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--pf-blauw);
    color: #fff;
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}

.item-subnav-cta:hover {
    background: var(--pf-diep);
    color: #fff;
}

.item-subnav-cta svg { width: 16px; height: 16px; }

@media (max-width: 767.98px) {
    .item-subnav-link { padding: 12px 10px 10px; font-size: .875rem; }
    .item-subnav-cta  { margin-left: 6px; height: 38px; padding: 0 16px; font-size: .85rem; }
    .item-subnav-cta span { display: none; }
}


/* ---------------------------------------------------------------------------
   WAAROM HIER OVERAL `body` VOOR STAAT
   ---------------------------------------------------------------------------
   De opmaak van elke sectie staat als <style> middenin includes/item-hero.php,
   dus ná dit bestand in de pagina, en met selectors van twee klassen
   (`.lezingen-sectie .lezing-card`). Een regel van één klasse hier verloor
   dus twee keer: op gewicht en op volgorde. Dat is de reden dat er van mijn
   vorige levering niets te zien was.

   `body` ervoor maakt de selector één element zwaarder, en dan wint hij
   ongeacht de volgorde. Geen !important: dat wint ook, maar dan kun je er
   verderop niets meer overheen zetten.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   2. De quote
   ---------------------------------------------------------------------------
   Was een lichtgrijze band over de volle breedte. Op het bord is het een
   donkerblauw paneel met de huisvorm en witte tekst. Het enige donkere vlak
   midden op de pagina, en daardoor het enige dat je echt ziet -- wat voor een
   citaat de bedoeling is.
   --------------------------------------------------------------------------- */

body .hsb-quote-band {
    background: transparent;
    padding: 18px 0;
}

body .hsb-quote-band .hsb-quote {
    border-radius: 40px 2px 40px 2px;
    background: var(--pf-blauw);
    padding: 44px 48px;
    gap: 26px;
}

body .hsb-quote-band .hsb-quote__text {
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
    max-width: 30em;
}

body .hsb-quote-band .hsb-quote__cite  { color: rgba(255, 255, 255, .72); }
body .hsb-quote-band .hsb-quote__mark  { color: var(--pf-oranje); align-self: flex-start; }
body .hsb-quote-band .hsb-quote__rule  { display: none; }

@media (max-width: 767.98px) {
    body .hsb-quote-band .hsb-quote {
        border-radius: 28px 2px 28px 2px;
        padding: 28px 22px;
        gap: 14px;
    }
}


/* ---------------------------------------------------------------------------
   3. De lezingen
   ---------------------------------------------------------------------------
   Drie dingen weken af van het bord: er was geen knop "Alle lezingen", de
   pijlen waren grijze schijfjes in plaats van open rondjes, en de kaarten
   waren aan vier kanten rond.
   --------------------------------------------------------------------------- */

body .lezingen-sectie .lez-kop-acties {
    display: flex;
    align-items: center;
    gap: 14px;
}

body .lezingen-sectie .lez-alle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid var(--pf-lijn);
    border-radius: 16px 2px 16px 2px;
    background: var(--pf-kaart);
    color: var(--pf-blauw);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}

body .lezingen-sectie .lez-alle:hover {
    background: var(--pf-vlak);
    border-color: #c6d0da;
    color: var(--pf-blauw);
}

/* Open rondjes met een randje, niet gevuld grijs. */
body .lezingen-sectie .lez-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid var(--pf-lijn);
    background: var(--pf-kaart);
    color: var(--pf-blauw);
}

body .lezingen-sectie .lez-arrow:hover:not(:disabled) {
    background: var(--pf-vlak);
    border-color: #c6d0da;
}

body .lezingen-sectie .lezing-card {
    border-radius: 24px 2px 24px 2px;
    border-color: var(--pf-lijn);
    background: var(--pf-kaart);
}


/* ---------------------------------------------------------------------------
   4. De video's
   ---------------------------------------------------------------------------
   Eén grote speler links, de lijst rechts. De opmaak hoort bij de nieuwe
   indeling in item-hero.php; de oude drie-tegel-regels daar matchen niets
   meer.
   --------------------------------------------------------------------------- */

body .hsb-video__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* --- de speler links ------------------------------------------------------ */

body .hsb-video__main {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 24px 2px 24px 2px;
    overflow: hidden;
    background: #0e1c27;
}

body .hsb-video__speler {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #0e1c27;
    cursor: pointer;
}

body .hsb-video__speler img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* De titel ligt over de speler, zoals op het bord. Met een verloop erachter,
   anders is wit op een lichte still niet te lezen. */
body .hsb-video__hoofdtitel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 46px 26px 22px;
    background: linear-gradient(to top, rgba(8, 18, 28, .9), rgba(8, 18, 28, 0));
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

body .hsb-video__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- de lijst rechts ------------------------------------------------------ */

body .hsb-video__lijst {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body .hsb-video__regel {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--pf-lijn);
    border-radius: 16px 2px 16px 2px;
    background: var(--pf-kaart);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

body .hsb-video__regel:hover {
    border-color: #c6d0da;
    background: var(--pf-vlak);
}

/* Wat er speelt, krijgt een rand in de huiskleur. */
body .hsb-video__regel.is-actief {
    border-color: var(--pf-blauw);
    background: var(--pf-vlak);
}

body .hsb-video__regelbeeld {
    position: relative;
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: 16 / 10;
    border-radius: 12px 2px 12px 2px;
    overflow: hidden;
    background: #dfe4ea;
}

body .hsb-video__regelbeeld img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .hsb-video__regelplay {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--pf-blauw);
}

body .hsb-video__regelplay svg { width: 11px; height: 11px; }

body .hsb-video__regeltitel {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pf-blauw);
}

/* De knop rechtsboven in dezelfde vorm als "Alle lezingen". */
body .hsb-video__allbtn {
    border-radius: 16px 2px 16px 2px;
    border-color: var(--pf-lijn);
    background: var(--pf-kaart);
    height: 48px;
    padding: 0 22px;
}

@media (max-width: 991.98px) {
    /* Onder deze breedte is de linkerkolom te smal voor een speler en de
       rechter te smal voor een titel. Dan onder elkaar. */
    body .hsb-video__layout { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   5. Het cijfer bij de ervaringen
   --------------------------------------------------------------------------- */

body .hsb-te__rating {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: 1px solid var(--pf-lijn);
    border-radius: 24px 2px 24px 2px;
    background: var(--pf-kaart);
}

body .hsb-te__score { line-height: 1; }


/* ---------------------------------------------------------------------------
   6. De huisvorm op de overige kaarten
   --------------------------------------------------------------------------- */

/* .hsb-gr__card stond hier ook; die kaart bestaat niet meer, de carrousel
   gebruikt nu de gedeelde .sb-card met zijn eigen hoeken. */
body .hsb-pub__card,
body .hsb-blog__card,
body .hsb-te__card {
    border-radius: 24px 2px 24px 2px;
    overflow: hidden;
}

body .hsb-gr__band,
body .lead-band-wrap .lead-band {
    border-radius: 40px 2px 40px 2px;
}


/* ---------------------------------------------------------------------------
   7. De donkere stand
   ---------------------------------------------------------------------------
   Alleen de tokens; aan de regels hierboven verandert niets. Zwart, wit en
   oranje, gelijk aan /sprekers.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --pf-blauw:  #17181c;
        --pf-diep:   #22242a;
        --pf-oranje: #ed6e26;
        --pf-knop:   #ed6e26;
        --pf-lijn:   #2b2d33;
        --pf-vlak:   #0f1012;
        --pf-kaart:  #17181c;
        --pf-tekst:  #f2f3f5;
        --pf-grijs:  #a3a8b0;
    }
    :root:not([data-thema="licht"]) body .hsb-quote-band .hsb-quote { border: 1px solid var(--pf-lijn); }
}

:root[data-thema="donker"] {
    --pf-blauw:  #17181c;
    --pf-diep:   #22242a;
    --pf-oranje: #ed6e26;
    --pf-knop:   #ed6e26;
    --pf-lijn:   #2b2d33;
    --pf-vlak:   #0f1012;
    --pf-kaart:  #17181c;
    --pf-tekst:  #f2f3f5;
    --pf-grijs:  #a3a8b0;
}

:root[data-thema="donker"] body .hsb-quote-band .hsb-quote { border: 1px solid var(--pf-lijn); }


/* ===========================================================================
   8. De laatste verschillen met het bord
   ===========================================================================
   Hier staat !important bij. Niet uit luiheid: deze regels moeten het winnen
   van <style>-blokken die verderop in dezelfde pagina staan én uit twee
   klassen bestaan (`.hsb-te .hsb-te__card`). Een zwaardere selector
   verzinnen werkt ook, maar wordt onleesbaar en breekt zodra iemand daar een
   klasse bij zet. Dit is de plek waar de uitzondering het waard is.
   =========================================================================== */


/* --- de quote -------------------------------------------------------------
   Drie dingen weken af: het oranje streepje naast het aanhalingsteken, de
   schuine Georgia-letter, en de naam in hetzelfde wit als het citaat. */

body .hsb-quote-band .hsb-quote {
    align-items: flex-start !important;
    gap: 22px !important;
}

body .hsb-quote-band .hsb-quote__mark {
    border-right: 0 !important;
    padding-right: 0 !important;
    font-size: 2.6rem;
}

body .hsb-quote-band .hsb-quote__mark svg { width: 44px; height: 44px; }

/* Museo700, rechtop. Het bord gebruikt de koplettersoort voor het citaat --
   dat is wat het een citaat laat lijken en geen bijschrift. Cursief Georgia
   hoort niet bij deze site. */
body .hsb-quote-band .hsb-quote__text {
    font-family: "Museo700", Georgia, serif !important;
    font-style: normal !important;
    font-weight: 400;
    color: #fff !important;
    line-height: 1.32 !important;
    margin: 0 0 26px !important;
}

body .hsb-quote-band .hsb-quote__cite {
    color: rgba(255, 255, 255, .6) !important;
    font-weight: 700;
}


/* --- het cijfer bij de ervaringen ---------------------------------------- */

body .hsb-te__rating {
    text-align: left !important;
}

/* De sterren staan niet op het bord. Een cijfer van 8,3 zegt hetzelfde en
   vier-van-de-vijf sterren naast een 8,3 vraagt om hoofdrekenen. */
body .hsb-te__stars { display: none !important; }

body .hsb-te__score {
    font-size: 2.2rem !important;
    color: var(--pf-blauw) !important;
}

body .hsb-te__count {
    display: flex !important;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
    color: var(--pf-grijs) !important;
}

body .hsb-te__card {
    border-radius: 24px 2px 24px 2px !important;
}

/* Het aanhalingsteken op een beoordeling was donkerblauw; op het bord is het
   oranje, net als in het grote citaat erboven. */
body .hsb-te__quote { color: var(--pf-oranje) !important; }


/* --- de opdrachtgevers ----------------------------------------------------
   Op het bord is dit een rustig grijs paneel met een klein kopje linksboven,
   niet een gecentreerde sectiekop met een ondertitel en bolletjes eronder.
   Het is een rijtje logo's; dat hoeft geen eigen hoofdstuk te zijn. */

body .hsb-kl {
    padding: 0 !important;
}

body .hsb-kl > .container > :is(.hsb-kl__head, .hsb-kl__carousel) {
    position: relative;
    z-index: 1;
}

body .hsb-kl > .container {
    border-radius: 40px 2px 40px 2px;
    background: var(--pf-vlak);
    padding: 34px 38px 30px;
}

body .hsb-kl__head {
    text-align: left !important;
    margin-bottom: 18px !important;
}

body .hsb-kl__title {
    font-size: .8125rem !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pf-grijs) !important;
    font-family: inherit !important;
}

body .hsb-kl__sub  { display: none !important; }
body .hsb-kl__dots { display: none !important; }
body .hsb-kl__carousel { padding: 0 !important; }
body .hsb-kl__card { border-radius: 16px 2px 16px 2px !important; }


/* --- de aanvraagbalk ------------------------------------------------------
   Het grijze blok "Benieuwd naar de mogelijkheden?" staat niet op het bord.
   Dat is ook dubbelop: de donkerblauwe balk eronder vraagt hetzelfde, met een
   formulier erin in plaats van een knop ernaartoe.

   LET OP: hierin stond ook de link "Vraag advies". Die is hiermee van de
   profielpagina verdwenen. Wil je hem houden, haal dan deze ene regel weg. */

body .hsb-band { display: none !important; }

body .lead-band-wrap .lead-band {
    border-radius: 40px 2px 40px 2px !important;
}

/* ===========================================================================
   VERHUISD UIT includes/item-hero.php -- 2 november 2026
   ===========================================================================
   Deze blokken stonden als <style> midden in de body van item-hero.php en
   kwamen daarmee NA dit bestand. Ze staan hier achteraan en in dezelfde
   volgorde als in item-hero.php, zodat de cascade hetzelfde blijft. Niets is
   herschreven, samengevoegd of van specificiteit veranderd.

   Drie blokken zijn NIET verhuisd: ze bevatten PHP (de merkkleuren uit de
   database) en staan nog in item-hero.php -- secties CTA AANVRAAG,
   OFFERTE FORMULIER en OFFERTE.
   =========================================================================== */

/* uit item-hero.php: sectie BIOGRAFIE */
  .biography{ --bio-blue: var(--brand-blue, #103856); }

  .biography-text{
    position:relative;
    max-height:300px;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .biography-text.open{ max-height:6000px; }
  .biography-text.open::after{ display:none; }
  .biography-text p{ margin:0 0 24px; }
  .biography-text p:last-child{ margin-bottom:0; }

  .biography-toggle{ color:var(--bio-blue); font-size:16px; font-weight:700; text-decoration:none; }
  .biography-toggle:hover{ opacity:.75; color:var(--bio-blue); }
  .biography-toggle i{ transition:transform .25s; }
  .biography-toggle[aria-expanded="true"] i{ transform:rotate(180deg); }

  @media (min-width:992px){ .biography-photo{ position:sticky; top:120px; } }
    @media (max-width:991.98px){ .biography-photo{ max-width:100%; } }
	.biography-photo img{ width:100%; height:auto; } 

/* uit item-hero.php: sectie TIJDLIJN */
:root{
  --tl-navy:#16264a; --tl-orange:#f08a00; --tl-line:#d7dce5;
  --tl-text:#1f2937; --tl-muted:#6b7280; --tl-item-w:150px;
}
.hsb-timeline{position:relative;background:#fff;border-radius:14px;padding:36px 8px 28px;box-shadow:0 2px 18px rgba(22,38,74,.06);}
.hsb-timeline__title{font-family:Georgia,"Times New Roman",serif;color:var(--tl-navy);text-align:center;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin:0 0 28px;}
.hsb-timeline__scroll{overflow:visible;padding:26px 4px 16px;-webkit-overflow-scrolling:touch;}
.hsb-timeline__scroll.is-scrollable{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.hsb-timeline__track{display:flex;list-style:none;margin:0 auto;padding:0;width:max-content;}
.hsb-timeline__item{position:relative;flex:0 0 var(--tl-item-w);width:var(--tl-item-w);text-align:center;padding-top:26px;box-sizing:border-box;outline:none;}
.hsb-timeline__item::before{content:"";position:absolute;top:32px;left:-50%;width:100%;height:2px;background:var(--tl-line);z-index:0;}
.hsb-timeline__item:first-child::before{display:none;}
.hsb-timeline__dot{position:relative;z-index:1;display:block;width:14px;height:14px;margin:0 auto 14px;border-radius:50%;background:#fff;border:3px solid var(--tl-navy);transition:transform .15s ease;}
.hsb-timeline__item.is-filled .hsb-timeline__dot{background:var(--tl-navy);}
.hsb-timeline__item.is-accent .hsb-timeline__dot{background:var(--tl-orange);border-color:var(--tl-orange);box-shadow:0 0 0 4px rgba(240,138,0,.18);}
.hsb-timeline__item.has-tip:hover .hsb-timeline__dot,
.hsb-timeline__item.has-tip:focus-within .hsb-timeline__dot{transform:scale(1.25);}
.hsb-timeline__year{display:block;font-weight:800;color:var(--tl-navy);font-size:1rem;margin-bottom:6px;}
.hsb-timeline__label{margin:0;font-size:.82rem;line-height:1.35;color:var(--tl-muted);padding:0 8px;}
.hsb-timeline__item.has-tip .hsb-timeline__label{cursor:help;}
.hsb-timeline__item.has-tip:focus-visible .hsb-timeline__year{text-decoration:underline;text-underline-offset:3px;}
.hsb-timeline__tip{display:none;}
.hsb-timeline__pop{
  position:absolute;left:0;top:0;z-index:60;max-width:240px;
  background:var(--tl-navy);color:#fff;font-size:.8rem;line-height:1.4;
  padding:9px 12px;border-radius:9px;text-align:center;
  box-shadow:0 8px 24px rgba(22,38,74,.25);
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.hsb-timeline__pop.is-on{opacity:1;visibility:visible;transform:translateY(0);}
.hsb-timeline__pop::after{content:"";position:absolute;top:100%;left:var(--arrow,50%);transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--tl-navy);}
@media (prefers-reduced-motion:reduce){
  .hsb-timeline__dot,.hsb-timeline__pop{transition:none;}
}

/* uit item-hero.php: sectie LEZINGEN - ONDERWERPEN */
.lezingen-sectie{ --lez-gap:24px; }

/* Navigatie-pijlen */
.lezingen-sectie .lez-nav{ display:flex; gap:10px; }
.lezingen-sectie .lez-arrow{
  width:44px; height:44px; border-radius:50%;
  border:none; background:#f4f5f7; color:#103856;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; transition:background .2s, opacity .2s;
}
.lezingen-sectie .lez-arrow:hover:not(:disabled){ background:#e6e9ee; }
.lezingen-sectie .lez-arrow:disabled{ opacity:.35; cursor:default; }

/* De carousel-baan */
.lezingen-sectie .lez-track{
  display:flex;
  gap:var(--lez-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:6px 2px 18px;
}
.lezingen-sectie .lez-track::-webkit-scrollbar{ display:none; }

/* 4 kaarten naast elkaar op desktop */
.lezingen-sectie .lezing-card{
  flex:0 0 calc((100% - (var(--lez-gap) * 3)) / 4);
  scroll-snap-align:start;
  background:#fff; border:1px solid #eef0f2; border-radius:18px; overflow:hidden;
  box-shadow:0 4px 18px rgba(16,56,86,.05);
  transition:transform .35s cubic-bezier(.165,.84,.44,1), box-shadow .35s ease;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
.lezingen-sectie .lezing-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(16,56,86,.12); }
.lezingen-sectie .lezing-card__img{ aspect-ratio:16/10; overflow:hidden; background:#f4f5f7; }
.lezingen-sectie .lezing-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.165,.84,.44,1); }
.lezingen-sectie .lezing-card:hover .lezing-card__img img{ transform:scale(1.06); }
.lezingen-sectie .lezing-card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 1 auto; }
.lezingen-sectie .lezing-card__cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#f56c20; margin-bottom:6px; }
.lezingen-sectie .lezing-card__title{ font-size:1.15rem; font-weight:700; color:#103856; line-height:1.3; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lezingen-sectie .lezing-card__desc{ font-size:.92rem; color:#6e6e73; line-height:1.55; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lezingen-sectie .lezing-card__more{ margin-top:auto; font-weight:700; font-size:.9rem; color:#f56c20; display:inline-flex; align-items:center; gap:6px; }
.lezingen-sectie .lezing-card__more i{ transition:transform .25s ease; }
.lezingen-sectie .lezing-card:hover .lezing-card__more i{ transform:translateX(4px); }

/* Tablet: 2 naast elkaar */
@media (max-width:991.98px){
  .lezingen-sectie .lezing-card{ flex-basis:calc((100% - var(--lez-gap)) / 2); }
}
/* Mobiel: 1 met een glimp van de volgende */
@media (max-width:575.98px){
  .lezingen-sectie .lezing-card{ flex-basis:85%; }
}

/* uit item-hero.php: sectie LEERPUNTEN */
.leerpunten-lijst{
    list-style:none; margin:1rem 0 0; padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-flow:column;
    grid-template-rows:repeat(var(--lp-rows,4), auto);
    column-gap:2rem; row-gap:.85rem;
    align-items:start;
}
.leerpunten-lijst li{ display:flex; align-items:flex-start; gap:.6rem; line-height:1.4; margin:0; color:#1d1d1f; }
.leerpunten-lijst i{ color:#f08a00; font-size:1.05rem; margin-top:.15rem; flex-shrink:0; }
@media (max-width:767.98px){
    .leerpunten-lijst{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; }
}

/* uit item-hero.php: sectie VIDEO */
    .hsb-video{--brand-navy:#16264a;--brand-blue:#103856;background:#fff;padding:70px 0}
    .hsb-video__head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:28px}
    .hsb-video__eyebrow{color:#7089a3;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;display:block;margin-bottom:8px}
    .hsb-video__title{font-size:2.3rem;font-weight:700;margin:0 0 .5rem;color:var(--brand-navy)}
    .hsb-video__title .soft{color:#8ea0b5}
    .hsb-video__sub{color:#6e7680;font-size:1rem;margin:0;max-width:560px;line-height:1.5}
    .hsb-video__allbtn{border:1px solid #cfd6de;color:var(--brand-navy);background:#fff;border-radius:50px;padding:.75rem 1.5rem;font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;transition:background .2s}
    .hsb-video__allbtn:hover{background:#f1f3f5;color:var(--brand-navy)}
    .hsb-video__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .hsb-video__media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#dfe4ea;cursor:pointer;border:0;padding:0;width:100%;display:block}
    .hsb-video__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .hsb-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:var(--brand-navy);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .2s}
    .hsb-video__media:hover .hsb-video__play{transform:translate(-50%,-50%) scale(1.08)}
    .hsb-video__duur{position:absolute;left:12px;bottom:12px;background:rgba(15,23,42,.85);color:#fff;font-size:.8rem;font-weight:600;padding:.2rem .55rem;border-radius:6px}
    .hsb-video__body{padding:14px 2px 0}
    .hsb-video__t{color:var(--brand-navy);font-weight:700;font-size:1.12rem;margin:0 0 .35rem;line-height:1.25}
    .hsb-video__d{color:#6e7680;font-size:.9rem;margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .hsb-video__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
   @media (max-width:991px){
      .hsb-video__grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:640px){
      .hsb-video__head .hsb-video__allbtn{display:none}
      /* Carrousel: horizontaal swipen */
      .hsb-video__grid{
        display:flex;
        gap:16px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        margin:0 -22px;              /* full-bleed t/m schermrand */
        padding:0 22px 16px;         /* eerste/laatste kaart lijnt uit met de container */
        -webkit-overflow-scrolling:touch;
      }
      .hsb-video__grid::-webkit-scrollbar{display:none}
      .hsb-video__card{
        flex:0 0 82%;                /* kaartbreedte; een stukje van de volgende kaart blijft zichtbaar */
        scroll-snap-align:start;
      }
    }

/* uit item-hero.php: sectie QUOTE */
  .hsb-quote-band{
    --q-navy:#103856; --q-orange:#f56c20;
    background:#f4f5f7;
    padding:48px 0;
  }
  .hsb-quote{ display:flex; align-items:center; gap:28px; }
  .hsb-quote__mark{
    flex:0 0 auto; color:var(--q-orange); line-height:1;
    padding-right:24px; border-right:2px solid rgba(245,108,32,.4);
  }
  .hsb-quote__mark i{ font-size:3.4rem; }
  .hsb-quote__body{ flex:1 1 auto; }
  .hsb-quote__text{
    font-family:Georgia,"Times New Roman",serif; font-style:italic;
    font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.5;
    color:var(--q-navy); margin:0 0 18px;
  }
  .hsb-quote__rule{ display:block; width:54px; height:3px; background:var(--q-orange); border-radius:3px; margin-bottom:10px; }
  .hsb-quote__cite{ font-style:normal; font-weight:600; color:var(--q-navy); font-size:.95rem; }
  @media (max-width:575.98px){
    .hsb-quote{ flex-direction:column; align-items:flex-start; gap:16px; text-align:left; }
    .hsb-quote__mark{ border-right:0; padding-right:0; }
  }

/* uit item-hero.php: sectie REVIEWS (#referenties) */
  .hsb-te{--brand-blue:#103856;--brand-navy:#16264a;background:#fff}
  .hsb-te__head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:34px}
  .hsb-te__eyebrow{color:#86868b;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.09em;display:block;margin-bottom:12px}
  .hsb-te__title{color:var(--brand-navy);margin:0 0 .5rem;font-weight:700}
  .hsb-te__sub{color:#6e6e73;font-size:1.02rem;margin:0;max-width:560px}
  .hsb-te__rating{text-align:right;flex:0 0 auto}
  .hsb-te__score{font-size:2.6rem;font-weight:700;color:var(--brand-navy);line-height:1}
  .hsb-te__score small{font-size:1.1rem;color:#8a929c;font-weight:500}
  .hsb-te__stars{color:#f5a623;font-size:1.15rem;margin:.3rem 0}
  .hsb-te__stars .ster{color:#d3d8de}
  .hsb-te__count{color:#8a929c;font-size:.85rem}
  .hsb-te__carousel{position:relative;padding:0 60px}
  .hsb-te__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
  .hsb-te__track::-webkit-scrollbar{display:none}
  .hsb-te__card{flex:0 0 calc(33.333% - 15px);scroll-snap-align:start;background:#fff;border:1px solid #ececf0;border-radius:20px;padding:40px 38px 30px;display:flex;flex-direction:column;min-height:420px;margin:0}
  .hsb-te__quote{color:var(--brand-navy);font-size:2.2rem;line-height:1;margin-bottom:14px}
  .hsb-te__text{color:#2c3b4e;font-size:1rem;line-height:1.65;flex-grow:1}
  .hsb-te__foot{display:flex;align-items:center;gap:14px;border-top:1px solid #eef1f4;padding-top:20px;margin-top:20px}
  .hsb-te__ava{width:44px;height:44px;border-radius:50%;border:1px solid #dfe3e8;display:flex;align-items:center;justify-content:center;color:#9aa1ab;font-size:1.2rem;flex-shrink:0}
  .hsb-te__name{color:var(--brand-navy);font-weight:700;margin:0;font-size:.98rem}
  .hsb-te__city{color:#6e8199;font-size:.88rem;margin:0}
  .hsb-te__nav{position:absolute;top:calc(50% - 2px);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e3e7ec;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-navy);z-index:2}
  .hsb-te__nav.prev{left:0}.hsb-te__nav.next{right:0}
  .hsb-te__dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
  .hsb-te__dot{width:9px;height:9px;border-radius:50%;background:#d3d8de;border:0;padding:0;cursor:pointer}
  .hsb-te__dot.active{background:var(--brand-navy)}
  @media (max-width:767.98px){
    .hsb-te__card{flex-basis:100%}
    .hsb-te__rating{text-align:left}
    .hsb-te__carousel{padding:0 44px}
  }

/* uit item-hero.php: sectie REVIEWS (#klanten) */
  .hsb-kl{--brand-blue:#103856;--brand-navy:#16264a}
  .hsb-kl__head{margin-bottom:30px}
  .hsb-kl__eyebrow{color:#86868b;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.09em;display:block;margin-bottom:12px}
  .hsb-kl__title{color:var(--brand-navy);margin:0 0 .5rem;font-weight:700}
  .hsb-kl__sub{color:#6e6e73;font-size:1.05rem;margin:0}
  .hsb-kl__carousel{position:relative;padding:0 56px}
  .hsb-kl__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 4px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hsb-kl__track::-webkit-scrollbar{display:none}
  .hsb-kl__card{flex:0 0 200px;scroll-snap-align:start;background:#fff;border:1px solid #ececf0;border-radius:16px;padding:26px 18px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;text-decoration:none;transition:box-shadow .25s,transform .25s}
  .hsb-kl__card:hover{box-shadow:0 14px 32px rgba(16,56,86,.10);transform:translateY(-3px)}
  .hsb-kl__logo{height:70px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .hsb-kl__logo img{max-height:64px;max-width:130px;object-fit:contain}
  .hsb-kl__name{color:var(--brand-navy);font-weight:700;font-size:1rem;margin:0}
  .hsb-kl__city{color:#8a929c;font-size:.85rem;margin:.15rem 0 0}
  .hsb-kl__nav{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e3e7ec;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-navy);font-size:1.1rem;z-index:2}
  .hsb-kl__nav.prev{left:0}.hsb-kl__nav.next{right:0}
  .hsb-kl__dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
  .hsb-kl__dot{width:9px;height:9px;border-radius:50%;background:#d3d8de;border:0;padding:0;cursor:pointer}
  .hsb-kl__dot.active{background:var(--brand-navy)}
  .hsb-kl__cta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px;flex-wrap:wrap}
  .hsb-kl__cta span{color:#5a6472}
  .hsb-kl__cta a{background:var(--brand-navy);color:#fff;border-radius:50px;padding:.8rem 1.6rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:background .2s}
  .hsb-kl__cta a:hover{background:#0d1c38;color:#fff}
  @media (max-width:575px){.hsb-kl__carousel{padding:0 40px}.hsb-kl__card{flex-basis:170px}}

/* uit item-hero.php: sectie REVIEWS (.hsb-band) */
  .hsb-band{--brand-navy:#16264a}
  .hsb-band__box{background:#f4f5f7;border-radius:18px;padding:22px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .hsb-band__icon{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #e4e7ec;display:flex;align-items:center;justify-content:center;color:var(--brand-navy);font-size:1.35rem;flex-shrink:0}
  .hsb-band__text{flex:1 1 340px}
  .hsb-band__text h3{color:var(--brand-navy);font-weight:700;font-size:1.25rem;margin:0 0 .25rem}
  .hsb-band__text p{color:#6e6e73;margin:0;font-size:.96rem;line-height:1.5}
  .hsb-band__btn{background:var(--brand-navy);color:#fff;border-radius:50px;padding:.85rem 1.8rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;flex-shrink:0;transition:background .2s}
  .hsb-band__btn:hover{background:#0d1c38;color:#fff}
  @media (max-width:640px){
    .hsb-band__box{padding:20px}
    .hsb-band__btn{width:100%;justify-content:center}
  }

/* uit item-hero.php: sectie EXPERTISE-BALK */
.profiel-balk{
  display:flex; gap:42px;
  background:#fff; border:1px solid #eef0f2; border-radius:22px;
  padding:34px 38px; box-shadow:0 4px 18px rgba(16,56,86,.04);
}
.profiel-balk__kop{ display:flex; align-items:center; gap:9px; font-size:1.15rem; font-weight:700; color:#103856; margin:0 0 6px; }
.profiel-balk__kop i{ color:#103856; }

/* Links: expertises */
.profiel-balk__exp{ flex:0 0 30%; max-width:30%; border-right:1px solid #e9ebef; padding-right:34px; }
.exp-pills{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 16px; }
.exp-pill{
  display:inline-block; padding:.45rem .9rem;
  background:#f4f5f7; border:1px solid #e6e9ee; border-radius:999px;
  font-size:.85rem; color:#103856; text-decoration:none; transition:.2s;
}
.exp-pill:hover{ background:#103856; border-color:#103856; color:#fff; }
.profiel-balk__sub{ font-size:.82rem; color:#86868b; margin:0 0 12px; }
.profiel-balk__link{ font-size:.85rem; font-weight:700; color:#103856; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.profiel-balk__link:hover{ color:#f56c20; }

/* Rechts: kolommen */
.profiel-balk__cols{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:34px; }
.pf-col{ flex:1 1 150px; min-width:150px; }
.pf-col--breed{ flex:2 1 240px; }
.pf-col__ico--gap{ margin-top:1.5rem; }
.pf-col__ico{ font-size:1.45rem; color:#103856; margin-bottom:12px; }
.pf-col h4{ font-size:1rem; font-weight:700; color:#103856; margin:0 0 14px; }
.pf-col ul{ list-style:none; margin:0 0 14px; padding:0; }
.pf-col li{ display:flex; align-items:flex-start; gap:9px; font-size:.9rem; color:#3d4852; margin-bottom:9px; line-height:1.4; }
.pf-col li i{ color:#f56c20; font-size:1rem; margin-top:1px; flex:0 0 auto; }
.pf-col li a{ color:#3d4852; text-decoration:none; }
.pf-col li a:hover{ color:#103856; }
.pf-col__link{ font-size:.85rem; font-weight:700; color:#103856; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.pf-col__link:hover{ color:#f56c20; }

@media (max-width:991.98px){
  .profiel-balk{ flex-direction:column; gap:28px; padding:28px 26px; }
  .profiel-balk__exp{ flex-basis:auto; max-width:100%; border-right:none; border-bottom:1px solid #e9ebef; padding-right:0; padding-bottom:26px; }
}
@media (max-width:575.98px){
  .profiel-balk__cols{ gap:24px; }
  .pf-col{ flex-basis:45%; }
}

/* uit item-hero.php: sectie PUBLICATIES */
  .hsb-pub{--brand-blue:#103856;--brand-navy:#16264a}
  .hsb-pub__titel{color:var(--brand-navy);font-weight:700;font-size:1.6rem;display:flex;align-items:center;gap:.6rem}
  .hsb-pub__titel i{color:var(--brand-blue)}
  .hsb-pub__layout{display:flex;gap:26px;align-items:stretch}
  .hsb-pub__main{flex:1 1 0;min-width:0}
  .hsb-pub__aside{flex:0 0 340px}
  .hsb-pub__carousel{position:relative}
  .hsb-pub__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px}
  .hsb-pub__track::-webkit-scrollbar{height:6px}
  .hsb-pub__track::-webkit-scrollbar-thumb{background:#d7dde3;border-radius:4px}
  .hsb-pub__card{flex:0 0 236px;scroll-snap-align:start;background:#fff;border:1px solid #edf0f3;border-radius:16px;padding:16px;display:flex;flex-direction:column;text-decoration:none;transition:box-shadow .2s,transform .2s}
  .hsb-pub__card:hover{box-shadow:0 12px 30px rgba(16,56,86,.12);transform:translateY(-3px)}
  .hsb-pub__cover{text-align:center;margin-bottom:14px}
  .hsb-pub__cover img{max-height:250px;width:auto;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.18);object-fit:contain}
  .hsb-pub__nocover{height:250px;border-radius:8px;background:#f1f3f5;display:flex;align-items:center;justify-content:center;color:#adb5bd;font-size:.85rem}
  .hsb-pub__body{display:flex;flex-direction:column;flex-grow:1}
  .hsb-pub__cat{color:var(--brand-blue);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
  .hsb-pub__cardtitel{color:#1d1d1f;font-weight:700;font-size:1.1rem;margin:0 0 .3rem;letter-spacing:-.01em}
  .hsb-pub__sub{color:#6e6e73;font-size:.88rem;line-height:1.45;flex-grow:1;margin:0 0 .9rem}
  .hsb-pub__link{color:var(--brand-blue);font-weight:600;font-size:.88rem;margin-top:auto}
  .hsb-pub__kort{color:#1d1d1f;font-size:.9rem;line-height:1.55;margin:0 0 .8rem}
  .hsb-pub__blok{margin:0 0 .8rem}
  .hsb-pub__label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:#f56c20;margin-bottom:.3rem}
  .hsb-pub__tags{display:flex;flex-wrap:wrap;gap:5px}
  .hsb-pub__tag{background:#f0f3f6;color:#103856;font-size:.74rem;font-weight:600;
    padding:3px 9px;border-radius:99px}
  .hsb-pub__relevant{color:#6e6e73;font-size:.85rem;line-height:1.55;margin:0}
  .hsb-pub__feiten{color:#8a8a8e;font-size:.76rem;line-height:1.5;margin:0 0 .8rem}
  .hsb-pub__nav{position:absolute;top:130px;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e3e7ec;box-shadow:0 4px 14px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-navy);z-index:2}
  .hsb-pub__nav.prev{left:-12px}.hsb-pub__nav.next{right:-12px}
  .hsb-pub__allbtn{background:var(--brand-navy);color:#fff;border-radius:50px;padding:.75rem 1.9rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:background .2s}
  .hsb-pub__allbtn:hover{background:#0d1c38;color:#fff}
  .hsb-pub__gift{background:linear-gradient(180deg,#eef1f6,#e7ebf2);border-radius:18px;padding:28px;display:flex;flex-direction:column}
  .hsb-pub__gift-ico{font-size:2.1rem;color:var(--brand-navy);margin-bottom:.7rem;line-height:1}
  .hsb-pub__gift h3{color:var(--brand-navy);font-weight:700;font-size:1.5rem;line-height:1.15;margin:0 0 .8rem}
  .hsb-pub__gift p{color:#5a6472;font-size:.92rem;line-height:1.5;margin:0 0 1.1rem}
  .hsb-pub__benes{list-style:none;margin:0 0 1.4rem;padding:0}
  .hsb-pub__benes li{padding:.6rem 0;border-bottom:1px solid #d9dfe8;color:#2c3b4e;font-size:.95rem;font-weight:500}
  .hsb-pub__benes li:last-child{border-bottom:0}
  .hsb-pub__giftbtn{background:var(--brand-navy);color:#fff;border-radius:50px;padding:.85rem 1.4rem;font-weight:600;text-decoration:none;text-align:center;margin-top:auto;transition:background .2s}
  .hsb-pub__giftbtn:hover{background:#0d1c38;color:#fff}
  @media (max-width:991px){
    .hsb-pub__layout{flex-direction:column}
    .hsb-pub__aside{flex-basis:auto}
  }

/* uit item-hero.php: sectie BLOG */
  .hsb-blog{--brand-navy:#16264a;--brand-blue:#103856;background:#fbfbfd}
  .hsb-blog__head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:30px}
  .hsb-blog__eyebrow{color:#7089a3;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;display:block;margin-bottom:8px}
  .hsb-blog__title{color:var(--brand-navy);font-size:2.3rem;font-weight:700;margin:0 0 .5rem}
  .hsb-blog__sub{color:#6e7680;font-size:1rem;margin:0;max-width:540px;line-height:1.5}
  .hsb-blog__allbtn{border:1px solid #cfd6de;color:var(--brand-navy);background:#fff;border-radius:50px;padding:.75rem 1.5rem;font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;transition:background .2s}
  .hsb-blog__allbtn:hover{background:#f1f3f5;color:var(--brand-navy)}
  .hsb-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .hsb-blog__card{display:flex;background:#fff;border:1px solid #ececf0;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(16,56,86,.05)}
  .hsb-blog__img{flex:0 0 40%;position:relative;background:#f1f3f5;text-decoration:none;overflow:hidden}
  .hsb-blog__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
  .hsb-blog__card:hover .hsb-blog__img img{transform:scale(1.06)}
  .hsb-blog__body{padding:18px 20px;display:flex;flex-direction:column;flex-grow:1;min-width:0}
  .hsb-blog__date{color:#9aa1ab;font-size:.82rem;margin-bottom:.5rem}
  .hsb-blog__t{font-size:1.12rem;font-weight:700;margin:0 0 .6rem;line-height:1.25}
  .hsb-blog__t a{color:var(--brand-navy);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hsb-blog__card:hover .hsb-blog__t a{color:var(--brand-blue)}
  .hsb-blog__ex{color:#6e7680;font-size:.88rem;line-height:1.5;margin:0 0 1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hsb-blog__more{margin-top:auto;color:var(--brand-navy);font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
  .hsb-blog__more:hover{color:var(--brand-blue)}
  .hsb-blog__mobilebtn{display:none;margin-top:26px;text-align:center}
  @media (max-width:991px){.hsb-blog__grid{grid-template-columns:1fr 1fr}.hsb-blog__head .hsb-blog__allbtn{display:none}.hsb-blog__mobilebtn{display:block}}
  @media (max-width:680px){.hsb-blog__grid{grid-template-columns:1fr}}
  @media (max-width:520px){.hsb-blog__card{flex-direction:column}.hsb-blog__img{flex-basis:auto;aspect-ratio:16/10}}

/* ===========================================================================
   SECTIE FAQ  (#faq, uit includes/item-hero.php)

   Nagebouwd naar het blok op het canvas (Profiel.dc.html).

   WAT ER ANDERS IS DAN HIERVOOR
   De vragen stonden in drie kolommen naast elkaar met de kop erboven. Dat
   las slecht: de volgorde sprong van kolom naar kolom, bij vijf vragen bleef
   er rechtsonder een gat open, en een vraag die openklapte duwde alleen zijn
   eigen kolom uit elkaar.

   Nu links de kop en rechts een lijst. De maten komen van het canvas:
   kolom van 330px, tussenruimte 52px, vragen van 17px, dunne lijnen ertussen.

   De kleuren komen uit de --pf-tokens bovenin dit bestand, zodat de donkere
   stand vanzelf meekomt.
   =========================================================================== */

.hsb-faq {
  background: var(--pf-kaart, #fff);
}

.hsb-faq__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  align-items: flex-start;
}

/* --- links: de kop --------------------------------------------------------- */
.hsb-faq__aside {
  flex: 0 0 330px;
  max-width: 100%;
}

.hsb-faq__title {
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.14;
  font-weight: 700;
  color: var(--pf-blauw, #103856);
}

.hsb-faq__lead {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--pf-grijs, #5b6b7c);
}

.hsb-faq__bel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pf-knop, #c24d16);
  text-decoration: none;
}
.hsb-faq__bel:hover { color: var(--pf-knop, #c24d16); text-decoration: underline; }
.hsb-faq__belpijl { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.hsb-faq__bel:hover .hsb-faq__belpijl { transform: translateX(4px); }

/* --- rechts: de lijst ------------------------------------------------------- */
.hsb-faq__lijst {
  flex: 1 1 560px;
  min-width: 0;
  border-top: 1px solid var(--pf-lijn, #e3e8ee);
}

.hsb-faq__item { border-bottom: 1px solid var(--pf-lijn, #e3e8ee); }
.hsb-faq__h { margin: 0; }

.hsb-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pf-blauw, #103856);
}
.hsb-faq__q:hover { color: var(--pf-knop, #c24d16); }

/* Het pijltje in een rondje, zoals op het canvas. */
.hsb-faq__ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  /* --pf-vlak is het zachte vlak (#f6f8fa licht, bijna zwart in de donkere
     stand); --pf-kaart is wit. Het rondje moet het zachte vlak zijn, anders
     is het wit op wit. */
  background: var(--pf-vlak, #f1f4f7);
  color: var(--pf-blauw, #103856);
  transition: transform .25s ease, background-color .2s ease;
}
.hsb-faq__q:hover .hsb-faq__ico { background: var(--pf-lijn, #e3e8ee); }
.hsb-faq__q[aria-expanded="true"] .hsb-faq__ico { transform: rotate(180deg); }

.hsb-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.hsb-faq__a.open { max-height: 1200px; }

.hsb-faq__a-in {
  max-width: 62em;
  padding: 0 16px 22px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--pf-grijs, #5b6b7c);
}

@media (max-width: 991px) {
  .hsb-faq__grid { gap: 28px; }
  .hsb-faq__aside { flex-basis: 100%; }
  .hsb-faq__title { font-size: 26px; }
}

@media (max-width: 575px) {
  .hsb-faq__q { padding: 16px 0; font-size: 15.5px; gap: 12px; }
  .hsb-faq__a-in { padding: 0 0 18px; }
}

/* ---------------------------------------------------------------------------
   GERELATEERDE SPREKERS  (#gerelateerd, uit includes/item-hero.php)

   Opnieuw opgezet naar het ontwerp op het canvas: de kop links, de pijlen
   rechts ernaast, en kaarten die altijd even hoog zijn.

   DE KERN VAN DE HERBOUW: de kaarten konden eerder van hoogte verschillen.
   Dat kan nu niet meer, door drie dingen bij elkaar:

     1. het fotovlak heeft een vaste verhouding (4/3) en een vaste
        achtergrond, dus ook zonder foto houdt het dezelfde maat
     2. de kaarten staan in een grid-rij met gelijke hoogte
        (align-items: stretch), en de tekst groeit naar beneden
     3. de omschrijving is afgekapt op een vast aantal regels

   Alleen 3 zat er eerder in, en dat is te weinig: een kaart zonder foto, of
   met een plaatje van een andere verhouding, duwde de naam omhoog of omlaag
   en dan stond niets meer op één lijn.
   --------------------------------------------------------------------------- */

.hsb-gr {
  --gr-blauw: #103856;
  --gr-grijs: #5a6b7b;
  --gr-lijn: #e3e8ee;
  --gr-vlak: #e8eef5;
  background: #fff;
}


/* --- De kop, met de pijlen ernaast ---------------------------------------- */
.hsb-gr__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 30px;
}
.hsb-gr__head-tekst { flex: 999 1 420px; min-width: 0; }

.hsb-gr__title {
  color: var(--gr-blauw);
  margin: 0 0 .4rem;
  font-size: 40px;
  line-height: 1.12;
}
.hsb-gr__sub {
  color: var(--gr-grijs);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  max-width: 44em;
}

.hsb-gr__nav-rij {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.hsb-gr__nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d7dfe8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gr-blauw);
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.hsb-gr__nav:hover:not(:disabled) { background: #eef4f9; border-color: #b9ccdd; }
/* Uit, niet weg: verdwijnt de knop, dan verspringt de kop ernaast. */
.hsb-gr__nav:disabled { opacity: .35; cursor: default; }


/* --- De rij kaarten -------------------------------------------------------- */
.hsb-gr__carousel { position: relative; }

.hsb-gr__track {
  display: flex;
  align-items: stretch;      /* alle kaarten even hoog */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 4px;
}
.hsb-gr__track::-webkit-scrollbar { display: none; }

/* De kaarten in de carrousel zijn de gedeelde sprekerskaart (.sb-card uit
   assets/css/hsb-sprekerkaart.css). Hier alleen hoe breed ze in de rij staan;
   hun uiterlijk komt uit dat gedeelde bestand, net als op /sprekers. */
.hsb-gr__track > .sb-card {
  flex: 0 0 calc(25% - 15px);
  scroll-snap-align: start;
}

/* --- De band eronder -------------------------------------------------------- */
.hsb-gr__band {
  background: #f6f8fa;
  border-radius: 40px 2px 40px 2px;
  padding: 28px 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hsb-gr__band-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gr-lijn);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gr-blauw);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.hsb-gr__band-text { flex: 1 1 340px; }
.hsb-gr__band-text h3 {
  color: var(--gr-blauw);
  font-size: 1.35rem;
  margin: 0 0 .3rem;
}
.hsb-gr__band-text p {
  color: var(--gr-grijs);
  margin: 0;
  font-size: .94rem;
  line-height: 1.5;
}
.hsb-gr__band-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* De knoppen komen uit de tabel `buttons` en brengen hun eigen klassen mee.
   Hier alleen de vorm, zodat ze dezelfde hoek krijgen als de rest van de
   site. !important omdat bootstrap rounded-pill met !important meelevert. */
.hsb-gr__band-btns .btn { border-radius: 12px !important; }


/* --- Smallere schermen ------------------------------------------------------ */
@media (max-width: 1199px) {
  .hsb-gr__track > .sb-card { flex-basis: calc(33.333% - 14px); }
  .hsb-gr__title { font-size: 32px; }
}
@media (max-width: 991px) {
  .hsb-gr__track > .sb-card { flex-basis: calc(50% - 10px); }
}
@media (max-width: 767px) {
  .hsb-gr__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hsb-gr__nav-rij { margin-left: 0; }
  .hsb-gr__band { padding: 24px 22px; border-radius: 28px 2px 28px 2px; }
}
@media (max-width: 575px) {
  .hsb-gr__track > .sb-card { flex-basis: 78%; }
  .hsb-gr__title { font-size: 26px; }
  .hsb-gr__band-btns .btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   AANPASSINGEN 2 NOVEMBER 2026 — BOEKEN EN ARTIKELEN

   Staat achteraan en niet tussen de regels hierboven, zodat je in één blik
   ziet wat er is veranderd en het in één keer terug te draaien is.
   =========================================================================== */

/* --- Geen lichtgrijze vlakken meer ---------------------------------------
   De blogsectie had een grijze band (#fbfbfd) en het relatiegeschenkblok
   een grijs verloop. Allebei wit, zodat de kaarten het werk doen in plaats
   van de achtergrond. Het relatiegeschenkblok houdt zijn vorm met een
   randje; zonder achtergrond en zonder rand zweeft het. */
.hsb-blog { background: #fff; }

.hsb-pub__gift {
  background: #fff;
  border: 1px solid #e3e8ee;
}

/* --- Knoppen: licht afgeronde hoeken, geen pil ----------------------------
   border-radius:50px maakt van een knop een capsule. 12px geeft dezelfde
   rustige hoek als de kaarten op de homepagina. */
.hsb-blog__allbtn,
.hsb-pub__giftbtn {
  border-radius: 12px;
}

/* --- Boekenkaart: alleen publicatie, titel, ondertitel en korte tekst -----
   De blokken Onderwerpen en "Waarom dit boek relevant is" en de regel met
   uitgeverij, pagina's en ISBN zijn uit de opmaak gehaald. Deze regels
   zorgen dat de kaart er zonder die blokken nog klopt: de korte tekst vult
   nu de ruimte en duwt "Details bekijken" naar onderen, want dat deed de
   ondertitel eerst.

   De regels voor de weggehaalde blokken blijven hierboven staan. Ze doen
   niets zolang die opmaak er niet is, en als je ze ooit terugzet werkt het
   meteen weer. */
.hsb-pub__sub  { flex-grow: 0; margin-bottom: .55rem; }
.hsb-pub__kort { flex-grow: 1; margin-bottom: 1rem; }

/* Een kaart met minder tekst mag wat ruimer; de titel krijgt zo lucht. */
.hsb-pub__card { padding: 18px; }


/* ===========================================================================
   AANVRAAGBLOK — 2 NOVEMBER 2026, 13:45

   De sectie #aanvraag heeft nog een <style>-blok in item-hero.php staan,
   want daar zit PHP in ($brandBlue en $brandOrange uit het CMS). Dat blok
   staat in de body en wint dus van dit bestand bij gelijke zwaarte. Daarom
   hangen de regels hieronder onder .hsb-lead__blok: twee klassen tegen een,
   dat wint wel. Niets overschrijven met !important dus.
   =========================================================================== */

/* --- De donkerblauwe kaart ------------------------------------------------ */
.hsb-lead__blok {
  background: #103856;
  border-radius: 40px 2px 40px 2px;
  padding: 64px;
}
@media (max-width: 767px) {
  .hsb-lead__blok { padding: 36px 24px; border-radius: 28px 2px 28px 2px; }
}

/* Tekst links staat nu op donkerblauw en moet dus van kleur wisselen. */
.hsb-lead__blok .hsb-lead__intro h2   { color: #fff; }
.hsb-lead__blok .hsb-lead__lead       { color: #c8d8e6; }
.hsb-lead__blok .hsb-lead__lead strong{ color: #fff; }
.hsb-lead__blok .hsb-usp strong       { color: #fff; }
.hsb-lead__blok .hsb-usp p            { color: #b9cde0; }
.hsb-lead__blok .hsb-lead__intro hr   { border-top-color: rgba(255,255,255,.18); }
.hsb-lead__blok .hsb-overleg h3       { color: #fff; }
.hsb-lead__blok .hsb-overleg > p      { color: #c8d8e6; }

/* --- De vinkjes bij de vier punten --------------------------------------- */
.hsb-lead__blok .hsb-usp__vink {
  flex-shrink: 0; color: #e2761f; line-height: 0; margin-top: 2px;
}

/* --- Telefoon en WhatsApp naast elkaar ------------------------------------ */
.hsb-lead__blok .hsb-contactrij {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.hsb-lead__blok .hsb-tel__ico {
  background: rgba(255,255,255,.1); color: #e2761f;
}
.hsb-lead__blok .hsb-tel strong    { color: #fff; }
.hsb-lead__blok .hsb-tel__sub      { color: #b9cde0; }

.hsb-lead__blok .hsb-wa {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-weight: 700; text-decoration: none;
  transition: background-color .25s, border-color .25s;
}
.hsb-lead__blok .hsb-wa svg  { color: #25d366; }
.hsb-lead__blok .hsb-wa:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* --- De witte formulierkaart ---------------------------------------------- */
.hsb-lead__blok .hsb-lead__card {
  background: #fff; border: 0; border-radius: 24px; padding: 36px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
@media (max-width: 767px) {
  .hsb-lead__blok .hsb-lead__card { padding: 24px; border-radius: 20px; }
}

/* De labels stonden als visually-hidden in de opmaak en de veldnaam zat in
   de placeholder. Die verdwijnt zodra je begint te typen, en dan weet je bij
   dertien velden niet meer waar je in staat. De labels staan nu boven het
   veld, zoals in het ontwerp. */
.hsb-lead__blok .hsb-slab {
  display: block; margin-bottom: 6px;
  color: #103856; font-weight: 700; font-size: .92rem;
}
.hsb-lead__blok .hsb-ster { color: #e2761f; }

.hsb-lead__blok .hsb-field { margin-bottom: 18px; }

/* --- De verstuurknop ------------------------------------------------------ */
.hsb-lead__blok .hsb-verstuur {
  width: 100%; min-height: 58px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #c24d16; color: #fff; border: 1px solid #c24d16;
  border-radius: 12px; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: background-color .25s, border-color .25s;
}
.hsb-lead__blok .hsb-verstuur:hover { background: #a63f0f; border-color: #a63f0f; }

.hsb-lead__blok .hsb-geenrecaptcha {
  margin: 14px 0 0; color: #6e7680; font-size: .88rem; line-height: 1.55;
}
.hsb-lead__blok .hsb-geenrecaptcha a { color: #103856; }

/* --- Scheidingslijn boven de optionele velden ----------------------------- */
.hsb-lead__blok .hsb-info-line {
  border-top: 1px solid #e9ebef; padding-top: 20px; margin-top: 4px;
  color: #103856; font-weight: 700;
}

/* ===== /assets/css/hero-tarief.css ===== */
/* ===========================================================================
   hero-tarief.css — de tarief- en beschikbaarheidsregel in de hero
   ===========================================================================
   Deze regels stonden als <style>-blok midden in includes/item-hero.php, en
   dus op elke profielpagina opnieuw in de HTML. Hier staan ze één keer, en
   de browser kan het bestand bewaren.
   =========================================================================== */

.new-speaker-hero .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.new-speaker-hero .hero-fact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-speaker-hero .hero-fact > i {
    font-size: 1.5rem;
    color: #f56c20;
    flex: 0 0 auto;
}

.new-speaker-hero .hero-fact__label {
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .6);
}

.new-speaker-hero .hero-fact__value {
    display: block;
    font-size: 1.05rem;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .new-speaker-hero .hero-facts { gap: 22px; }
}

/* ===========================================================================
   QUICK SPECS — uitbreiding van de hero (tags + extra feiten)
   ===========================================================================
   De doorklikbare themapills onder de lead, en de extra blokjes (taal, vorm,
   duur) die naast tarief en beschikbaarheid in .hero-facts staan. De balk
   zelf heeft al flex-wrap, dus de extra blokjes vouwen vanzelf netjes om.
   =========================================================================== */

.new-speaker-hero .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 2px;
}

.new-speaker-hero .hero-tag {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}

.new-speaker-hero .hero-tag:hover,
.new-speaker-hero .hero-tag:focus-visible {
    background-color: rgba(245, 108, 32, .18);
    border-color: #f56c20;
    color: #fff;
}

/* Een tarief met een tooltip (title) krijgt een hint dat er meer is. */
.new-speaker-hero .hero-fact__value[title] {
    cursor: help;
    text-decoration: underline dotted rgba(255, 255, 255, .45);
    text-underline-offset: 3px;
}

/* Vijf blokjes op een klein scherm: iets strakker, twee per rij. */
@media (max-width: 575.98px) {
    .new-speaker-hero .hero-fact { flex: 1 1 calc(50% - 22px); }
    .new-speaker-hero .hero-fact__value { font-size: .95rem; }
}

/* De shortlistknop naast de CMS-knoppen: zelfde pil-vorm, maar als
   omlijnde secundaire actie zodat de offerteknop de hoofdrol houdt. */
.new-speaker-hero .hero-shortlist {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.new-speaker-hero .hero-shortlist:hover,
.new-speaker-hero .hero-shortlist:focus-visible {
    background-color: rgba(255, 255, 255, .1);
    border-color: #fff;
}

.new-speaker-hero .hero-shortlist svg {
    color: #f56c20;
}

.new-speaker-hero .hero-shortlist .icoon--vol {
    fill: currentColor;
}

/* ===== /assets/css/item-status.css ===== */
/* ===========================================================================
   item-status.css — profielen die niet meer te boeken zijn
   ===========================================================================
   Voor de twee standen "Niet meer te boeken" en "Overleden". Wordt alleen
   ingeladen op die profielen, dus de andere 718 pagina's halen dit bestand
   niet op.

   Rustig gehouden met opzet. Dit is geen melding die om aandacht vraagt maar
   een mededeling: één keer lezen is genoeg. Geen rood, geen uitroepteken,
   geen icoon.
   =========================================================================== */

/* De regel op de plek van de boekknoppen, in de donkere hero. */
.new-speaker-hero__melding {
    margin: 0;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border-left: 3px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 44rem;
}

/* Het blok dat in de plaats komt van de aanvraagbalk, verderop op de pagina. */
.hsb-niet-boekbaar__kaart {
    background: rgb(var(--bs-light-rgb, 248 249 250));
    border: 0;
    border-radius: 24px;
    padding: 2rem;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.hsb-niet-boekbaar__melding {
    color: var(--brand-blue, #103856);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 .75rem;
}

.hsb-niet-boekbaar__hulp {
    color: var(--text-muted, #86868b);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}

.hsb-niet-boekbaar__hulp a {
    color: var(--brand-blue, #103856);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .hsb-niet-boekbaar__kaart { padding: 1.5rem; }
    .hsb-niet-boekbaar__melding { font-size: 1.05rem; }
}

/* ===== /assets/css/hero-feiten.css ===== */
/* ===========================================================================
   De witte feitenbalk onder de hero

   Wordt alleen geladen als er bij de spreker feiten staan. Staat er niets,
   dan komt dit bestand niet op de pagina.
   =========================================================================== */

/* De balk schuift over de onderkant van de hero heen. De hero krijgt daarom
   wat extra ruimte onderin, zodat het tarief eronder niet half wegvalt.

   Twee selectors, omdat de twee hero's anders in elkaar zitten: de brede
   hero heeft losse blokken, de gewone één kolom. */
.new-speaker-hero--breed.heeft-feiten .new-speaker-hero__blok--tarief,
.new-speaker-hero.heeft-feiten .new-speaker-hero__inner {
    padding-bottom: 104px;
}

.hsb-feiten-band {
    position: relative;
    z-index: 3;
    margin-top: -56px;
    margin-bottom: 10px;
}

.hsb-feiten {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgb(16 56 86 / .14);
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    /* De scheidingslijnen lopen tot de rand; zonder dit steken ze buiten de
       afgeronde hoeken uit. */
    overflow: hidden;
}

.hsb-feiten--1 { grid-template-columns: 1fr; }
.hsb-feiten--2 { grid-template-columns: repeat(2, 1fr); }
.hsb-feiten--3 { grid-template-columns: repeat(3, 1fr); }

.hsb-feit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    border-left: 1px solid #e9edf2;
    min-width: 0;
}

.hsb-feit:first-child {
    border-left: 0;
}

.hsb-feit__icoon {
    flex: 0 0 auto;
    color: #103856;
    line-height: 0;
    margin-top: 1px;
}

.hsb-feit__tekst {
    min-width: 0;
}

.hsb-feit__kop {
    display: block;
    color: #103856;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
}

.hsb-feit__regel {
    display: block;
    margin-top: 2px;
    color: #6e6e73;
    font-size: .88rem;
    line-height: 1.45;
}

/* --- tablet en telefoon: geen kaart meer -------------------------------- */
/*  Op een telefoon is de witte kaart met randen en schaduw te veel. Hij nam
    een half scherm in beslag voor vier regels tekst. Hier blijft alleen de
    inhoud over: twee naast elkaar, op de witte pagina, met één lijn erboven
    om hem van de foto te scheiden. Op een breed scherm blijft de kaart. */

@media (max-width: 991.98px) {
    .new-speaker-hero--breed.heeft-feiten .new-speaker-hero__blok--tarief,
    .new-speaker-hero.heeft-feiten .new-speaker-hero__inner {
        padding-bottom: 24px;
    }

    .hsb-feiten-band {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .hsb-feiten {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }

    .hsb-feit {
        /* Icoon naast de tekst, zoals in het ontwerp. Geen kaderlijnen meer:
           die hoorden bij de kaart. */
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 0;
        border: 0;
    }

    /* Eén lijn tussen de twee rijen, zodat het geen losse zwevende blokjes
       worden. */
    .hsb-feit:nth-child(n+3) {
        border-top: 1px solid #e9edf2;
    }

    .hsb-feit__icoon svg {
        width: 22px;
        height: 22px;
    }

    .hsb-feit__kop   { font-size: .9rem; }
    .hsb-feit__regel { font-size: .8rem; }
}

/* --- hele smalle telefoon ------------------------------------------------ */
/*  Onder de 360px is een kolom van 160px te krap voor een icoon plus tekst.
    Dan maar onder elkaar; dat zijn de iPhone SE en wat oudere Androids. */
@media (max-width: 359.98px) {
    .hsb-feiten,
    .hsb-feiten--2,
    .hsb-feiten--3 {
        grid-template-columns: 1fr;
    }

    .hsb-feit:nth-child(n+2) {
        border-top: 1px solid #e9edf2;
    }
}

/* ===== /assets/css/hsb-profiel-secties.css ===== */
/* ===========================================================================
   hsb-profiel-secties.css — de opmaak van drie blokken op de sprekerspagina

   Deze drie stukken stonden als <style>-blok middenin includes/item-hero.php,
   en twee ervan zelfs NA de sectie die ze opmaken. De browser tekende die
   blokken daardoor eerst zonder opmaak en zette ze daarna in een keer goed.
   Nu staan ze in de <head> van item-profiel.php.

   Een op een overgenomen, in dezelfde volgorde, met een uitzondering:
   --bb en --bo stonden in de opmaak als PHP-waarden ($brandBlue en
   $brandOrange). Die twee staan in item-hero.php zelf als vaste kleur
   (#103856 en #f56c20) en komen niet uit het CMS, dus ze staan hier
   uitgeschreven. Verandert de huisstijlkleur ooit, dan is dit de plek --
   samen met de drie regels in item-hero.php waar ze ook nog staan.

   LET OP de volgorde: hsb-profiel.css staat HIERVOOR in de head en zet een
   deel van het aanvraagblok opnieuw (de donkerblauwe kaart, de witte
   formulierkaart, de labels, de knop). Die regels winnen omdat ze twee
   klassen diep zijn (.hsb-lead__blok .hsb-lead__card). Dat was eerder ook
   zo en blijft zo.
   =========================================================================== */

/* --- lead-band: de donkerblauwe balk met het korte formulier ------- */
.lead-band-wrap{--bb:#103856;--bo:#f56c20}
.lead-band{background:var(--bb,#103856);border-radius:18px;padding:26px 30px;color:#fff}
.lead-band__inner{display:flex;align-items:center;gap:28px;flex-wrap:nowrap}
.lead-band__text{flex:1 1 290px;min-width:240px}
.lead-band__text h2{font-size:1.5rem;margin:0 0 .25rem;color:#fff;line-height:1.15}
.lead-band__text p{margin:0;color:rgba(255,255,255,.7);font-size:.9rem}
.lead-band__form{display:flex;gap:10px;flex:2 1 560px;flex-wrap:nowrap;align-items:center;min-width:0}
.lead-band__form input{flex:1 1 0;min-width:70px;padding:.8rem .9rem;border:1px solid rgba(255,255,255,.15);border-radius:10px;font-size:.95rem;background:#fff;color:#1d1d1f}
.lead-band__form input::placeholder{color:#9aa1ab}
.lead-band__form input:focus{outline:none;box-shadow:0 0 0 3px rgba(245,108,32,.35)}
.lead-band__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;border:none;border-radius:10px;padding:.85rem 1.4rem;font-weight:700;font-size:.95rem;color:#fff;cursor:pointer;white-space:nowrap;transition:filter .2s,transform .1s}
.lead-band__btn:hover{filter:brightness(1.08)}
.lead-band__btn:active{transform:translateY(1px)}
.lead-band__badges{display:flex;gap:30px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.lead-band__badges span{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.78);font-size:.82rem}
.lead-band__badges i{color:var(--bo,#f56c20);font-size:1rem}
.lead-err{color:#ffb4a8;font-size:.85rem;margin:.6rem 0 0;min-height:0}
.lead-err:not(:empty){margin-top:.8rem}
.req{color:#f56c20}
@media (max-width:880px){
  .lead-band__inner{flex-wrap:wrap}
  .lead-band__text{flex-basis:100%}
  .lead-band__form{flex-basis:100%;flex-wrap:wrap}
  .lead-band__form input,.lead-band__btn{flex:1 1 100%}
}

/* slide-over */
.lead-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:1080}
.lead-overlay.is-open{opacity:1;visibility:visible}
.lead-panel{position:fixed;top:0;right:0;height:100dvh;width:min(480px,100%);background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1081;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.lead-panel.is-open{transform:translateX(0)}
.lead-panel__head{padding:16px 24px;border-bottom:1px solid #e6e8ec;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;background:#103856;color:#fff}
.lead-panel__head h3{margin:0;font-family:Georgia,serif;font-size:1.25rem}
.lead-panel__head p{margin:.25rem 0 0;font-size:.85rem;opacity:.85}
.lead-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;flex-shrink:0;line-height:1}
#lead-form{display:flex;flex-direction:column;flex:1;min-height:0}
.lead-panel__body{padding:16px 24px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lp-field{margin-bottom:.6rem}
.lp-field label{display:block;font-size:.78rem;font-weight:600;color:#444;margin-bottom:.2rem}
.lp-field input,.lp-field select,.lp-field textarea{width:100%;padding:.5rem .7rem;border:1px solid #e6e8ec;border-radius:9px;font-size:.9rem;background:#fbfbfd;font-family:inherit}
.lp-field input:focus,.lp-field select:focus,.lp-field textarea:focus{outline:none;border-color:#103856;background:#fff}
.lp-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.lp-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:#555;margin:.4rem 0 1rem}
.lead-panel__foot{padding:18px 24px;border-top:1px solid #e6e8ec;background:#fafbfc}
.lead-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border:none;border-radius:10px;padding:.9rem 1.4rem;font-weight:700;font-size:.95rem;color:#fff;cursor:pointer;transition:filter .2s,transform .1s}
.lead-submit:hover{filter:brightness(1.08)}
.lead-submit:active{transform:translateY(1px)}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fw-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ===========================================================================
   HET BLOK "WAAROM ... BOEKEN VIA SPREKERSBURO?"  (#autoriteit)

   Nagebouwd naar het blok op het canvas (Profiel.dc.html).

   WAT ER ANDERS IS DAN HIERVOOR
     - het was een vlak met een blauw verloop en rechts een wazige foto van
       340px breed; nu een witte kaart met een dunne rand en de hoeken van de
       huisstijl, zoals op het canvas
     - de vijf punten stonden gecentreerd met elk hun eigen icoontje (mensen,
       schild, koptelefoon, bliksem). Die verschilden in vorm en gewicht en
       trokken de aandacht naar het plaatje. Nu vijf keer hetzelfde vinkje in
       een rondje, links uitgelijnd
     - de regel met het telefoonnummer eronder is weg; die staat nu bij de
       veelgestelde vragen, waar iemand zit die zijn vraag niet vindt

   De kleuren komen uit de --pf-tokens van hsb-profiel.css, zodat de donkere
   stand vanzelf meekomt.
   =========================================================================== */

  #autoriteit .hsb-aut {
    border: 1px solid var(--pf-lijn, #e3e8ee);
    border-radius: 40px 2px 40px 2px;
    background: var(--pf-kaart, #fff);
    padding: 44px 48px;
  }

  #autoriteit .hsb-aut__title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--pf-blauw, #103856);
  }

  #autoriteit .hsb-aut__intro {
    margin: 0 0 32px;
    max-width: 60em;
    font-size: 16px;
    line-height: 1.7;
    color: var(--pf-grijs, #5b6b7c);
  }

  #autoriteit .hsb-aut__usps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
  }

  #autoriteit .hsb-aut__usp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  #autoriteit .hsb-aut__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--pf-vlak, #f6f8fa);
    color: var(--pf-blauw, #103856);
  }

  #autoriteit .hsb-aut__usp h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--pf-blauw, #103856);
  }

  #autoriteit .hsb-aut__usp p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pf-grijs, #5b6b7c);
  }

  @media (max-width: 1199px) {
    #autoriteit .hsb-aut { padding: 36px 32px; }
    #autoriteit .hsb-aut__usps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  }

  @media (max-width: 767px) {
    #autoriteit .hsb-aut { padding: 28px 22px; border-radius: 28px 2px 28px 2px; }
    #autoriteit .hsb-aut__title { font-size: 22px; }
    #autoriteit .hsb-aut__usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 420px) {
    #autoriteit .hsb-aut__usps { grid-template-columns: minmax(0, 1fr); }
  }


/* --- aanvraag: het aanvraagblok onderaan (#aanvraag) --------------- */
  .hsb-lead{--bb:#103856;--bo:#f56c20;background:#fff}
  .hsb-lead .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .hsb-lead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:52px;align-items:start}

  .hsb-lead__intro h2{color:var(--bb);font-size:2.6rem;line-height:1.12;margin:0 0 1rem;font-weight:700}
  .hsb-lead__lead{color:#5b6470;font-size:1.05rem;line-height:1.6;margin:0 0 1.8rem}
  .hsb-lead__lead strong{color:var(--bb)}
  .hsb-usp{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:1.1rem}
  .hsb-usp li{display:flex;gap:1rem;align-items:flex-start}
  .hsb-usp__ico{width:48px;height:48px;border-radius:50%;border:1px solid #e4e7ec;display:flex;align-items:center;justify-content:center;color:var(--bb);font-size:1.15rem;flex-shrink:0}
  .hsb-usp strong{display:block;color:var(--bb);font-size:1rem;margin-bottom:.15rem}
  .hsb-usp p{margin:0;color:#6e7680;font-size:.9rem;line-height:1.45}
  .hsb-lead__intro hr{border:0;border-top:1px solid #e9ebef;margin:1.8rem 0}
  .hsb-overleg h3{color:var(--bb);font-size:1.35rem;margin:0 0 .4rem}
  .hsb-overleg>p{color:#6e7680;font-size:.95rem;line-height:1.5;margin:0 0 1.1rem}
  .hsb-tel{display:flex;gap:1rem;align-items:center;text-decoration:none}
  .hsb-tel__ico{width:56px;height:56px;border-radius:14px;background:#f1f3f5;display:flex;align-items:center;justify-content:center;color:var(--bb);font-size:1.4rem;flex-shrink:0}
  .hsb-tel strong{display:block;color:var(--bb);font-size:1.5rem;line-height:1}
  .hsb-tel__sub{display:block;margin-top:.2rem;color:#6e7680;font-size:.88rem}

  .hsb-lead__card{border:1px solid #e6e8ec;border-radius:18px;padding:30px;box-shadow:0 10px 40px rgba(16,56,86,.05)}
  .hsb-lead__cardhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.3rem}
  .hsb-lead__cardhead h3{color:var(--bb);font-size:1.5rem;margin:0}
  .hsb-lead__reqnote{color:#9aa1ab;font-size:.82rem}
  .hsb-fieldset{border:0;padding:0;margin:0}
  .hsb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
  .hsb-field{display:flex;flex-direction:column;min-width:0}
  .hsb-full{margin-bottom:.9rem}
  .hsb-field input,.hsb-field select,.hsb-field textarea{width:100%;padding:.9rem 1rem;border:1px solid #e3e7ec;border-radius:12px;font-size:.95rem;background:#fff;font-family:inherit;color:#1d1d1f}
  .hsb-field input::placeholder,.hsb-field textarea::placeholder{color:#9aa1ab}
  .hsb-field select{color:#6e7680}
  .hsb-field input:focus,.hsb-field select:focus,.hsb-field textarea:focus{outline:none;border-color:var(--bb);box-shadow:0 0 0 3px rgba(16,56,86,.1)}
  .hsb-slab{font-size:.8rem;color:#8a929c;margin-bottom:.3rem}
  .hsb-info-line{display:flex;gap:.5rem;align-items:center;color:#8a929c;font-size:.85rem;margin:.4rem 0 1rem}
  .hsb-info-line i{color:var(--bb)}
  .hsb-recap{margin:1.1rem 0}
  .hsb-submit{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;border:none;border-radius:12px;padding:1.05rem 1.4rem;font-weight:700;font-size:1rem;color:#fff;background:var(--bo);cursor:pointer;transition:filter .2s,transform .1s}
  .hsb-submit:hover{filter:brightness(1.06)}
  .hsb-submit:active{transform:translateY(1px)}
  .hsb-akkoord{display:flex;gap:.5rem;align-items:center;justify-content:center;font-size:.88rem;color:#5b6470;margin-top:.9rem}
  .hsb-akkoord a{color:var(--bo)}
  .hsb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .fw-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

  @media (max-width:900px){
    .hsb-lead__grid{grid-template-columns:1fr;gap:36px}
    .hsb-lead__intro h2{font-size:2rem}
    .hsb-lead__card{padding:22px}
  }
  @media (max-width:520px){
    .hsb-grid2{grid-template-columns:1fr}
  }

/* ===== /assets/css/profiel-hero.css ===== */
/* ===========================================================================
   profiel-hero.css — de donkerblauwe kop van de sprekerspagina

   Deze regels stonden in een <style>-blok middenin item-profiel.php, dus
   NA de opmaak van de hero. De browser tekende de kop daardoor eerst
   zonder vormgeving en zette hem daarna in een keer goed: de flikkering
   bij het verversen. Nu staan ze in de <head>, dus ze zijn er al voordat
   er iets getekend wordt.

   Een op een overgenomen; er is geen regel veranderd, toegevoegd of
   weggehaald.
   =========================================================================== */

/* ===========================================================================
   HERO SPREKERSPAGINA

   Donkerblauw vlak, tekst links, profielfoto rechts in een afgeronde
   uitsnede. Eén opzet voor alle sprekers.

   De foto wordt niet bijgesneden of aangepast: object-fit zorgt voor de
   uitsnede, object-position houdt het hoofd in beeld.
   =========================================================================== */

.new-speaker-hero {
  position: relative;
  overflow: hidden;
  background: #002d55;
  color: #fff;
}

.new-speaker-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.new-speaker-hero__content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
}

/* --- de foto ------------------------------------------------------------- */
.new-speaker-hero__foto {
  flex: 0 0 auto;
  width: 380px;
  max-width: 40%;
}

.new-speaker-hero__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Bovenaan uitlijnen: bij een staand portret houdt dat het hoofd in
     beeld, waar 'center' het midden van de foto zou pakken. */
  object-position: center 20%;
  border-radius: 20px;
  display: block;
}

/* --- de tekst ------------------------------------------------------------ */
.new-speaker-hero__breadcrumb {
  font-size: .9rem;
  margin-bottom: 1.25rem;
  color: rgb(255 255 255 / .75);
}
.new-speaker-hero__breadcrumb a { color: rgb(255 255 255 / .85); text-decoration: underline; }
.new-speaker-hero__breadcrumb a:hover { color: #fff; }
.new-speaker-hero__breadcrumb span { margin: 0 .35rem; }

.new-speaker-hero__kop {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f56c20;
  margin-bottom: .5rem;
}

.new-speaker-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  color: #fff;
  margin-bottom: .6rem;
}

.new-speaker-hero h2,
.new-speaker-hero__subtitle {
  color: #fff;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.new-speaker-hero__lead,
.new-speaker-hero__content > p {
  max-width: 560px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgb(255 255 255 / .9);
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width: 991px) {
  .new-speaker-hero__inner { gap: 32px; }
  .new-speaker-hero__foto { width: 300px; }
}

/* --- mobiel -------------------------------------------------------------- */
/*  Foto boven de tekst, breed en niet te hoog, zodat het gezicht altijd
    zichtbaar blijft zonder ingewikkelde uitsnede. */
@media (max-width: 767px) {
  .new-speaker-hero__inner {
    display: block;
    padding-top: 24px;
    padding-bottom: 36px;
  }

  .new-speaker-hero__foto {
    width: 100%;
    max-width: none;
    margin-bottom: 24px;
  }

  .new-speaker-hero__foto img {
    aspect-ratio: 16 / 10;
    object-position: center 15%;
    border-radius: 14px;
  }

  .new-speaker-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ===== /assets/css/hsb-hero-profiel.css ===== */
/* ===========================================================================
   hsb-hero-profiel.css — de hero van het sprekersprofiel, zoals op het canvas
   ===========================================================================

   WAT ER VERANDERT

   De hero stond als een donkerblauwe band over de volle breedte van het
   scherm, met de tekst links en de foto rechts in een afgerond kadertje.

   Op het canvas is het een paneel: het blauw loopt niet door tot de rand van
   het scherm maar houdt op bij 1240 px, met de asymmetrische hoeken van de
   huisstijl. De foto staat links en loopt door tot de rand van dat paneel,
   waar hij in het blauw oplost. De tekst staat rechts.

   Dat verschil is groter dan het klinkt. Een band over de volle breedte leest
   als een kop boven de pagina; een paneel leest als een kaart die bij deze
   ene persoon hoort. En doordat de foto de rand raakt in plaats van in een
   kadertje te zitten, wordt hij onderdeel van het vlak in plaats van een
   plaatje erin.

   WAAROM DIT EEN APART BESTAND IS

   De opmaak van de hero staat als <style> in item-profiel.php, tussen regel
   322 en 448. Daar zit meer in dan de indeling: het kruimelpad, de koppen,
   de knoppen, de tariefregel. Door die niet aan te raken en er alleen deze
   laag overheen te leggen, blijft al dat werk staan en is dit in één regel
   terug te draaien.

   Laden in item-profiel.php, NA het style-blok:
       <link rel="stylesheet" href="/assets/css/hsb-hero-profiel.css">

   WERKT MET EN ZONDER FOTO

   393 van de 718 zichtbare sprekers hebben een profielfoto. Staat er geen,
   dan vult de tekst het hele paneel en klopt het nog steeds — er ontstaat
   geen leeg gat waar de foto hoorde.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Van band naar paneel
   ---------------------------------------------------------------------------
   Het blauw verhuist van de buitenste laag naar de binnenste. Die binnenste
   is tegelijk een Bootstrap-container, dus die had al een maximale breedte;
   nu krijgt hij ook de kleur, de hoeken en de uitsnede.
   --------------------------------------------------------------------------- */

.new-speaker-hero {
    background: transparent;
    overflow: visible;
    padding: 20px 0 0;
}

.new-speaker-hero__inner {
    position: relative;
    z-index: 2;
    border-radius: 48px 2px 48px 2px;
    background: #103856;
    overflow: hidden;

    /* 1240 px, net als op het canvas. Dit staat er expliciet omdat de
       Bootstrap-container 1140 aanhoudt op een breed scherm en 1320 op een
       heel breed scherm. Het paneel zou dan per schermbreedte van maat
       veranderen, en de hero is het eerste wat je ziet. */
    width: 100%;
    max-width: var(--hsb-breedte, 1440px);
    margin-inline: auto;

    /* Een ondergrens, want de hoogte wordt bepaald door de tekst. Bij een
       spreker met twee regels introductie zou het paneel anders een brede,
       lage strook worden en het portret een letterbox. 420 px is ongeveer
       de hoogte die het op het canvas heeft. */
    min-height: 420px;

    /* De container-padding eraf: de foto moet de rand kunnen raken. De tekst
       krijgt hieronder zijn eigen ruimte terug. */
    padding: 0;
    gap: 0;
    align-items: stretch;
}


/* ---------------------------------------------------------------------------
   De foto naar links, tot aan de rand
   ---------------------------------------------------------------------------
   `order: -1` zet hem vóór de tekst zonder dat de opmaak in item-hero.php
   hoeft te veranderen. Voor een schermlezer blijft de vololgorde zoals hij
   was: eerst de tekst, dan de foto. Dat is ook de goede volgorde om te
   horen — de foto heeft een leeg alt en zegt niets.
   --------------------------------------------------------------------------- */

.new-speaker-hero__foto {
    order: -1;
    position: relative;
    flex: 0 0 auto;
    width: 42%;
    max-width: none;
    align-self: stretch;
}

.new-speaker-hero__foto img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    object-position: center 22%;
}

/* HIER STOND HET VERLOOP waarmee de foto in het blauw oploste. Op verzoek
   weggehaald: de foto blijft nu over de volle breedte zichtbaar en eindigt
   met een rechte rand tegen het blauw.

   Dat kost wel iets. Het verloop zat er omdat de foto anders als een
   plaatje naast een vlak leest in plaats van als een geheel. Wil je hem
   ooit terug, dan is dit de regel:

       .new-speaker-hero__foto::after {
           content: ""; position: absolute; inset: 0 0 0 55%;
           background: linear-gradient(to right, rgba(16,56,86,0), #103856);
           pointer-events: none;
       }

   Zonder het verloop raakt de tekst bijna de foto, want de linkerruimte van
   de tekst stond op 8px: het verloop gaf die ruimte visueel al. Die komt
   hieronder dus terug. */


/* ---------------------------------------------------------------------------
   De tekst
   --------------------------------------------------------------------------- */

.new-speaker-hero__content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 46px 52px 50px;
    align-self: center;
}

/* Hier stond padding-left: 8px zodra er een foto was. Dat kon omdat het
   verloop de afstand tussen foto en tekst visueel al gaf. Nu dat weg is,
   zou de tekst tegen de harde rand van de foto aan komen te staan; vandaar
   dezelfde ruimte als aan de andere kanten.

   Blijft met :has() en niet met een buur-selector. In de opmaak staat de
   tekst namelijk VÓÓR de foto — die staat alleen visueel links door
   `order: -1`. Er bestaat geen selector voor "heeft een broer ná zich",
   dus kijken we of het paneel een foto bevat.

   Kent een browser :has() niet, dan houdt de tekst de padding van
   hierboven, en die is nu dezelfde. Er valt dus niets meer te missen. */
.new-speaker-hero__inner:has(.new-speaker-hero__foto) .new-speaker-hero__content {
    padding-left: 52px;
}


/* ---------------------------------------------------------------------------
   De feitenbalk eronder
   ---------------------------------------------------------------------------
   Die schuift met een negatieve marge over de onderrand van de hero heen.
   Nu de hero geen volle band meer is maar een paneel met ronde hoeken, moet
   de balk iets smaller zijn dan het paneel — anders steekt hij links en
   rechts buiten de hoeken uit.
   --------------------------------------------------------------------------- */

.new-speaker-hero.heeft-feiten .new-speaker-hero__inner {
    padding-bottom: 64px;
}


/* ---------------------------------------------------------------------------
   Smallere schermen
   ---------------------------------------------------------------------------
   Onder 992 px past een foto van 42% niet meer naast een lopende tekst: de
   regels worden dan vier, vijf woorden lang. De foto gaat daarom boven de
   tekst staan, over de volle breedte, met een vaste hoogte zodat hij de
   pagina niet wegduwt.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .new-speaker-hero__inner {
        /* display: flex staat hier expliciet. Het blok in item-profiel.php
           zet onder 767 px `display: block`, en dan doet `order: -1` niets
           meer: de foto zakt terug naar waar hij in de opmaak staat, onder
           de tekst. Op het canvas staat hij juist bovenaan — daar zie je op
           een telefoon als eerste wie het is. */
        display: flex;
        flex-direction: column;
        border-radius: 32px 2px 32px 2px;
        min-height: 0;
    }

    .new-speaker-hero__foto {
        width: 100%;
        height: 320px;
    }

    /* Hier stond hetzelfde verloop, maar dan van boven naar beneden, omdat
       de foto onder 992px boven de tekst staat. Ook weggehaald.

       De ruimte boven de tekst komt er wel bij: zonder verloop sluit de
       foto hard aan op de eerste regel. */
    .new-speaker-hero__content,
    .new-speaker-hero__foto + .new-speaker-hero__content {
        padding: 28px 28px 36px;
    }
}

@media (max-width: 575.98px) {
    .new-speaker-hero {
        padding-top: 12px;
    }

    .new-speaker-hero__inner {
        border-radius: 24px 2px 24px 2px;
    }

    .new-speaker-hero__foto {
        height: 260px;
    }

    .new-speaker-hero__content,
    .new-speaker-hero__foto + .new-speaker-hero__content {
        padding: 22px 20px 28px;
    }
}

/* ===== /assets/css/profiel-blokken.css ===== */
/* ===========================================================================
   profiel-blokken.css — de losse stukjes opmaak van de sprekerspagina

   Vier <style>-blokken die verspreid door item-profiel.php stonden, in
   dezelfde volgorde achter elkaar gezet zodat de cascade precies gelijk
   blijft. Ze stonden in de body en kwamen dus te laat: de pagina werd
   eerst zonder getekend.

   Een op een overgenomen; er is geen regel veranderd.

     1. de sticky-kolom en de blauwe links   (stond rond regel 558)
     2. de kleurvariabelen en .btn-blue      (stond rond regel 605)
     3. de doorzichtige mobiele balk         (stond rond regel 651)
     4. de mobiele balk zelf, vast onderaan  (stond rond regel 725)
   =========================================================================== */

/* --- 1. sticky-kolom en blauwe links ----------------------------------- */
.sticky{
  position: static;
  top: auto;
  align-self: auto;
  z-index: auto;
}

/* Pas sticky vanaf desktop */
@media (min-width: 992px){
  .sticky{
    position: sticky;
    top: 88px;
    align-self: flex-start;
    z-index: 2;
  }
}
	/* Desktop: sticky moet kunnen werken */
#main{
  overflow: visible;
}

/* Mobiel: voorkom horizontaal schuiven */
@media (max-width: 991.98px){
  #main{
    overflow-x: hidden;
  }
}
	
	a.link-blue {color: #1d1d1f;}
	a.link-blue:hover {color: #103856;}

/* --- 2. kleurvariabelen en .btn-blue ----------------------------------- */
:root {
  --brand-blue: #103856;
  --brand-orange: #f56c20;
  --fg: #1a2a3a;
}
.btn-blue {
  background-color: var(--brand-blue);
  color: #fff;
  border: 2px solid var(--brand-blue);
  transition: background-color .3s, border-color .3s;
}
.btn-blue:hover {
  background-color: #0b263a;
  border-color: #0b263a;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  color: #fff;
}

/* --- 3. doorzichtige mobiele balk -------------------------------------- */
.mobile-cta {
    /* 1. Maak de achtergrondkleur half-doorzichtig wit */
    /* Het laatste getal (0.8) is de doorzichtigheid tussen 0 en 1 */
    background-color: rgba(255, 255, 255, 0.2)!important;

    /* 2. Voeg de 'blur' toe aan alles wat erachter zit */
    /* Hoe hoger het aantal pixels, hoe waziger */
    backdrop-filter: blur(10px);
    
    /* Voor betere ondersteuning op oudere Apple apparaten (Safari) */
    -webkit-backdrop-filter: blur(10px);

    /* Optioneel: een subtiel randje aan de bovenkant helpt soms for de definitie */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- 4. mobiele balk, vast onderaan ------------------------------------ */
  .mobile-cta{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 12px 0;
  z-index: 1030;
}
  .mobile-cta-btn{
    white-space: nowrap;
  }
  /* Zorg dat content niet achter de fixed bar valt */
  @media (max-width: 991.98px){
    body{ padding-bottom: 78px; }
  }

/* ===== /assets/css/hsb-sprekerkaart.css ===== */
/* ===========================================================================
   hsb-sprekerkaart.css — DE sprekerskaart

   Eén kaart voor drie plekken: het overzicht (/sprekers), de themapagina's
   (/sprekers/thema/...) en het blok "vergelijkbare sprekers" onderaan een
   profiel. De opmaak stond verspreid over sprekers.css en hsb-sprekers.css
   en gold dus alleen op het overzicht; de andere twee hadden hun eigen
   kaart, en die liepen uit de pas.

   Een op een overgenomen uit die twee bestanden, in dezelfde volgorde, en
   daar weggehaald. Beide pagina's laden dit bestand erbij.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DE KLEUREN VAN DE KAART

   Deze variabelen stonden in sprekers.css en hsb-sprekers.css. Die twee
   worden alleen op /sprekers geladen, dus zonder deze regels zou de kaart op
   de themapagina's en de profielpagina kleurloos zijn.

   Een op een overgenomen, inclusief de donkere variant. Dat ze op /sprekers
   twee keer voorkomen maakt niets uit: het zijn dezelfde waarden.
   --------------------------------------------------------------------------- */

:root {
  --sb-navy: #0e1e3c;
  --sb-muted: #667082;
  --sb-line: #e5e8ef;
  --sb-soft: #f6f7fa;
  --sb-orange: #fb6a1b;
  --sb-orange-d: #ec5d0c;
}

:root {
  --sb-kaart: #ffffff;
  --sb-fotovlak: #e7edf3;
  --sb-lijn: #e3e8ee;
  --sb-lijn-hover: #c6d0da;
  --sb-grijs: #5b6b7c;
  --sb-blauw: #103856;
  --sb-knop: #c24d16;
  --sb-knop-donker: #a63f0f;
  --sb-glas: rgba(255, 255, 255, .5);
  --sb-glas-tekst: #103856;
}

:root[data-thema="donker"] {
  --sb-kaart: #17181c;
  --sb-fotovlak: #22242a;
  --sb-lijn: #2b2d33;
  --sb-lijn-hover: #4a4e57;
  --sb-grijs: #a3a8b0;
  --sb-blauw: #f2f3f5;
  --sb-knop: #ed6e26;
  --sb-knop-donker: #f58a4b;
  --sb-glas: rgba(255, 255, 255, .55);
  --sb-glas-tekst: #10131a;
}


@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --sb-kaart: #17181c;
    --sb-fotovlak: #22242a;
    --sb-lijn: #2b2d33;
    --sb-lijn-hover: #4a4e57;
    --sb-grijs: #a3a8b0;
    --sb-blauw: #f2f3f5;
    --sb-knop: #ed6e26;
    --sb-knop-donker: #f58a4b;
    --sb-glas: rgba(255, 255, 255, .55);
    --sb-glas-tekst: #10131a;
  }
}

/* ===== uit sprekers.css ===== */
.sb-card{
      display:flex; flex-direction:column; background:#fff; border:1px solid var(--sb-line);
      border-radius:16px; overflow:hidden; height:100%;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
.sb-card:hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(14,30,60,.12); border-color:#d7dce6; }
.sb-card-media{ position:relative; height:200px; max-height:200px; overflow:hidden; background:var(--sb-soft); }
.sb-card-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.sb-card:hover .sb-card-img{ transform:scale(1.05); }
.sb-fav{
      position:absolute; top:12px; right:12px; width:38px; height:38px; border:none; border-radius:50%;
      background:rgba(255,255,255,.94); backdrop-filter:blur(4px); color:var(--sb-navy);
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      box-shadow:0 3px 10px rgba(0,0,0,.14); transition:transform .12s, color .12s; font-size:1rem;
    }
.sb-fav:hover{ transform:scale(1.08); }
.sb-fav.is-active{ color:var(--sb-orange); }
.sb-card-badge{
      position:absolute; left:12px; top:12px; display:inline-flex; align-items:center;
      color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.2px;
      padding:6px 12px; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,.16);
    }
.sb-card-badge.is-green{ background:#16a34a; }
.sb-card-badge.is-orange{ background:#f97316; }
.sb-card-badge.is-blue{ background:#2563eb; }
.sb-card-badge.is-purple{ background:#7c3aed; }
.sb-card-badge.is-gold{ background:#d99000; }
.sb-card-main{ display:flex; flex-direction:column; flex:1; padding:18px; }
.sb-card-body{ flex:1; }
.sb-card-name{ font-size:1.12rem; font-weight:800; color:var(--sb-navy); margin:0 0 .35rem; letter-spacing:-.2px; }
.sb-card-tags{
      color:var(--sb-orange); font-size:.82rem; font-weight:600; margin-bottom:.55rem;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
.sb-card-desc{
      color:var(--sb-muted); font-size:.86rem; line-height:1.5; margin-bottom:.75rem;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
.sb-card-price{ font-size:.92rem; font-weight:700; color:var(--sb-navy); white-space:nowrap; }
.sb-card-foot{
      margin-top:14px; padding-top:14px; border-top:1px solid var(--sb-line);
      display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    }
.sb-card-link{
      color:var(--sb-navy); font-weight:700; font-size:.88rem; text-decoration:none;
      display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
    }
.sb-card-link:hover{ color:var(--sb-orange-d); }
.sb-card-link .bi{ transition:transform .15s; }
.sb-card:hover .sb-card-link .bi{ transform:translateX(3px); }

/* ===== uit hsb-sprekers.css ===== */
.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);
}
.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;
}
.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);
}
.sb-card-media .hsb-kaart__talen {
    bottom: 12px;
    left: 12px;
}
.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;
}
.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); }
.sb-lijst .sb-card { flex-direction: row; }
.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;
}
.sb-lijst .sb-card-body { flex: 0 0 auto; }
.sb-lijst .sb-card-foot { margin-top: 14px; }
@media (max-width: 575.98px) {
.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; }
}
.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;
}
@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) .sb-card:hover   { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
}
:root[data-thema="donker"] .sb-card:hover   { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }


/* ---------------------------------------------------------------------------
   DE BOVENKOP

   Alleen op de landingspagina's. Daar staat per thema een eigen functietitel
   bij de spreker, zoals "TRENDWATCHER & AI-EXPERT". Elders is dat veld leeg
   en staat er niets, dus de kaart blijft daar precies zoals hij is.
   --------------------------------------------------------------------------- */
.sb-card-bovenkop {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5b6b7c;
}

/* ===========================================================================
   KAART v2 — functietitel, themapills, tariefregel en dubbele CTA
   ===========================================================================
   De uitbreidingen bij het nieuwe kaartontwerp: het tarief verhuisde van de
   fotostrook naar een eigen regel in de kaart, en onderaan staan twee
   knoppen. De oude .sb-card-tarief (op de foto) wordt niet meer gebruikt.
   =========================================================================== */

.sb-card-rol {
    margin: 2px 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: #f56c20;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sb-card-tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid rgba(16, 56, 86, .25);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: #103856;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}

a.sb-card-tag:hover,
a.sb-card-tag:focus-visible {
    background: rgba(245, 108, 32, .1);
    border-color: #f56c20;
    color: #103856;
}

.sb-card-tag--stil { pointer-events: none; }

.sb-card-media > a.sb-card-showreel {
    /* wint van de basisregel `.sb-card-media > a` die foto-links oprekt */
    width: auto;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 56, 86, .78);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
}

.sb-card-showreel:hover,
.sb-card-showreel:focus-visible { background: #f56c20; color: #fff; }

.sb-card-showreel svg { color: #fff; }

.sb-card-foot {
    display: block;              /* was: flex met chip links, pijl rechts */
    padding-top: 10px;
    border-top: 1px solid rgba(16, 56, 86, .1);
}

.sb-card-tariefregel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}

.sb-card-tarieflabel {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(16, 56, 86, .6);
}

.sb-card-tariefwaarde {
    font-size: .95rem;
    color: #103856;
    white-space: nowrap;
}

.sb-card-ctas {
    display: flex;
    gap: 8px;
}

.sb-card-cta {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.sb-card-cta--prim {
    background: #f56c20;
    color: #fff;
}

.sb-card-cta--prim:hover,
.sb-card-cta--prim:focus-visible { background: #d95a14; color: #fff; }

.sb-card-cta--sec {
    border: 1px solid rgba(16, 56, 86, .3);
    color: #103856;
}

.sb-card-cta--sec:hover,
.sb-card-cta--sec:focus-visible {
    border-color: #f56c20;
    color: #f56c20;
}

/* ===== /assets/css/mobiele-balk.css ===== */
/* ===========================================================================
   mobiele-balk.css — de opgeruimde onderkant van het scherm op mobiel
   ===========================================================================
   Op een telefoon stonden onderin drie dingen over elkaar: de vaste balk
   "Beschikbaarheid & Prijs", de oranje chat-bol en de scroll-naar-boven-
   pijl. Dit bestand ruimt dat op:

     1. De balk heeft nu twee knoppen: WhatsApp (1/3) en de oranje
        hoofdknop (2/3). Markup in item-profiel.php.
     2. De chat-bol verdwijnt op mobiel op pagina's met deze balk --
        dezelfde vraag kan daar via WhatsApp.
     3. De scroll-naar-boven-knop verdwijnt op mobiel < 768 px (die regel
        staat in page-up.php zelf, want die knop staat op elke pagina).
     4. De pagina houdt onderaan ruimte vrij voor de balk, plus de veilige
        marge van iPhones met een thuisbalkje (env(safe-area-inset-bottom)).

   Laadt mee in de profiel-CSS-bundel (item-profiel.php).
   =========================================================================== */

@media (max-width: 991.98px) {

    /* --- 4. Ruimte onder de pagina + veilige marge voor iOS ------------- */
    /* profiel-blokken.css zet 78px; hier komt de safe-area erbij en iets
       meer lucht omdat de balk met twee knoppen een fractie hoger is. */
    body {
        padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-cta {
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* --- 2. De chat-bol wijkt voor de balk ------------------------------ */
    /* Alleen op pagina's die deze balk hebben; elders blijft de chat
       gewoon staan. Het paneel van een al geopend gesprek wordt nooit
       verborgen (:not(.is-open)). */
    body:has(.mobile-cta) .hsb-chat:not(.is-open) {
        display: none;
    }
}

/* --- 1. De twee knoppen ------------------------------------------------- */
.mobile-cta__rij {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.mobile-cta__wa {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #25d366;             /* WhatsApp-groen: herkenbaar in één oogopslag */
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: 12px 10px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-cta__wa:hover,
.mobile-cta__wa:focus-visible {
    background: #1fb858;
    color: #fff;
}

.mobile-cta__prim {
    flex: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f56c20;
    color: #fff;
    font-weight: 700;
    font-size: .98rem;
    padding: 12px 14px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-cta__prim:hover,
.mobile-cta__prim:focus-visible {
    background: #d95a14;
    color: #fff;
}

/* Smalle toestellen: iets compacter, zodat beide teksten passen. */
@media (max-width: 360px) {
    .mobile-cta__wa   { font-size: .88rem; padding: 12px 8px; }
    .mobile-cta__prim { font-size: .9rem;  padding: 12px 10px; }
}