/* ============================================================
   BEACHBREAK — BASIS-EXTRA'S (site-breed, ná bb-global.css)
   ------------------------------------------------------------
   De design-tokens, .bb-section-basis, knoppen, navigatie,
   nieuwsbrief en footer staan in bb-global.css (de redesign).
   Dit bestand bevat alléén wat de redesign niet dekt:
     - de pagina-banner op subpagina's (textuur + featured image)
     - de leesbare tekstkolom voor losse berichten/pagina's
   ============================================================ */

:root { --bb-header-h: 116px; } /* hoogte vaste nav (topbar + balk) — voor banner-offset */

.bb-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--bb-green-dark); color: #fff;
    border-radius: 0 0 var(--bb-radius-sm, 8px) 0;
}
.bb-skip-link:focus { left: 0; }

/* ============================================================
   PAGINA-BANNER — site-breed (behalve homepage)
   Volle breedte. Achtergrond = groene structuur-textuur (altijd),
   met daarop de uitgelichte afbeelding van de pagina. De vaste,
   transparante nav zweeft hieroverheen.
   ============================================================ */
.bb-pagebanner {
    position: relative;
    left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 100vw; flex-shrink: 0;
    min-height: clamp(260px, 24vw, 380px);
    background-color: var(--bb-green-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex; align-items: flex-end;
    overflow: hidden;
}
.bb-pagebanner .bb-pagebanner__media { position: absolute; inset: 0; z-index: 0; }
.bb-pagebanner .bb-pagebanner__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.bb-pagebanner--has-image::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0) 75%);
    pointer-events: none;
}
.bb-pagebanner .bb-pagebanner__inner {
    position: relative; z-index: 1;
    width: 100%; max-width: var(--bb-container-max);
    margin-inline: auto; padding-inline: var(--bb-container-padding);
    padding-block-start: calc(var(--bb-header-h, 116px) + clamp(3rem, 7vw, 6rem));
    padding-block-end:   clamp(2.5rem, 5vw, 4.5rem);
}
.bb-pagebanner .bb-pagebanner__title {
    font-family: var(--bb-font-display);
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 900; line-height: 1.02; letter-spacing: -0.01em;
    color: var(--bb-text-light); margin: 0;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.bb-pagebanner .bb-pagebanner__wave {
    position: absolute; bottom: -1px; left: 0; width: 100%;
    height: clamp(40px, 5.7vw, 80px);
    pointer-events: none; z-index: 2; overflow: hidden;
}
.bb-pagebanner .bb-pagebanner__wave-track {
    position: absolute; bottom: 0; left: 0; width: 200%; height: 100%;
    will-change: transform; animation: bb-bnr-wave-slide 18s linear infinite;
}
.bb-pagebanner .bb-pagebanner__wave-track svg {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    fill: var(--bb-page-bg, #fff); transform-origin: center bottom;
    animation: bb-bnr-wave-breathe 4.5s ease-in-out infinite;
}
@keyframes bb-bnr-wave-slide   { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes bb-bnr-wave-breathe { 0%,100% { transform: scaleY(0.85); } 50% { transform: scaleY(1.25); } }
@media (prefers-reduced-motion: reduce) {
    .bb-pagebanner .bb-pagebanner__wave-track,
    .bb-pagebanner .bb-pagebanner__wave-track svg { animation: none; }
}

/* ============================================================
   PAGINA-HERO (page.php) — boxed beeld + frosted intro-paneel + golf.
   Zelfde groene textuur-frame als de homepage; nav zweeft transparant.
   ============================================================ */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Groene textuur achter de hero — loopt tot ±de helft van de hero (zodat de
   onderhelft van de hero op wit valt en het blok visueel gescheiden is). De
   hero is ~52vh hoog; de helft + de top-marge ≈ 28vh. Rest blijft wit. */
body.bb-paged {
    background-image: url('../img/bb-header-texture.webp');
    background-position: top center; background-repeat: no-repeat;
    /* Groene header-textuur twee keer zo hoog (alle pagina's). */
    background-size: 100% clamp(440px, 62vh, 600px);
}
.bb-pagehero {
    position: relative;
    /* Hero begint nét onder de nav met een kleine groene marge, zodat de
       afgeronde bovenhoeken volledig vrij op de groene header staan (geen overlap
       die de afronding half bedekt). De nav-hoogte wordt door JS gemeten
       (--bb-nav-real-h) zodat dit bij elke schermbreedte/fontgrootte meeschaalt;
       de 140px-fallback geldt tot JS gedraaid heeft. Mobiel: margin:0 hieronder. */
    max-width: var(--bb-container-max);
    margin: calc(var(--bb-nav-real-h, 140px) + clamp(0.6rem, 1.3vw, 1rem)) auto 0;
    min-height: clamp(440px, 62vh, 620px);
    /* Afgeronde bovenhoeken: de afbeelding "rust" als kaart op de groene header.
       Onderkant blijft vierkant vanwege de golf-divider. */
    border-radius: var(--bb-radius-xl) var(--bb-radius-xl) 0 0; overflow: hidden;
    background: var(--bb-green-dark);
    display: flex; align-items: stretch;
}
.bb-pagehero--noimg { background: #e4e7e5; }
.bb-pagehero__media { position: absolute; inset: 0; z-index: 0; }
/* Geen uitgelichte afbeelding → nette lege placeholder (afbeeldings-icoon). */
.bb-pagehero--noimg .bb-pagehero__media { background: #e4e7e5; }
.bb-pagehero--noimg .bb-pagehero__media::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a5a0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 15.5l-5.5-5.5L4 21.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: clamp(52px, 6vw, 92px);
    opacity: 0.55;
}
.bb-pagehero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Donkere strip bovenaan zodat het witte nav-logo leesbaar blijft op het beeld. */
.bb-pagehero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.32), rgba(0,0,0,0) 28%);
}
.bb-pagehero__inner {
    position: relative; z-index: 2; width: 100%;
    display: flex; justify-content: flex-end; align-items: center;
    padding: calc(var(--bb-header-h, 116px) + clamp(1rem, 2vw, 2rem)) clamp(1rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4rem);
}
.bb-pagehero__panel {
    width: min(48%, 580px);
    background: rgba(255,255,255,0.80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: clamp(16px, 2vw, 28px); padding: clamp(1.5rem, 2.6vw, 2.6rem);
    box-shadow: 0 22px 55px rgba(12,30,24,0.20); color: var(--bb-text);
}
.bb-pagehero__panel .bb-prose > :first-of-type { margin-top: 0; }
.bb-pagehero__panel .bb-prose h2 {
    color: var(--bb-green-dark); font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.03; margin: 0 0 0.35rem;
}
.bb-pagehero__panel .bb-prose h3 {
    color: var(--bb-green-dark); font-size: clamp(1.2rem, 2vw, 1.7rem); margin: 0.2rem 0 0.7rem;
}
.bb-pagehero__panel .bb-prose p { margin: 0 0 0.8rem; }
.bb-pagehero__panel .bb-actions { margin-bottom: 0; }
/* Zichtbare paginatitel op de hero: linksonder, net boven de golf, met een
   donkere verloop-scrim zodat de witte titel altijd goed leesbaar is. */
.bb-pagehero__titlebar {
    position: absolute; inset: auto 0 0 0; z-index: 2; pointer-events: none;
    display: flex; align-items: flex-end;
    /* net boven de golf-divider (golfhoogte + kleine marge) */
    padding-bottom: calc(clamp(56px, 8vw, 110px) + clamp(0.6rem, 1.6vw, 1.4rem));
    background: linear-gradient(to top, rgba(12,30,24,0.62) 12%, rgba(12,30,24,0.28) 42%, rgba(12,30,24,0) 72%);
}
.bb-pagehero__titlebar-inner {
    width: 100%; max-width: var(--bb-container-max); margin-inline: auto;
    padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}
.bb-pagehero__title {
    margin: 0; color: #fff;
    font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(2.1rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.01em;
    text-shadow: 0 2px 22px rgba(12,30,24,0.5);
}
.bb-pagehero__sub {
    margin: 0.55rem 0 0; max-width: 46ch; color: #fff;
    font-family: var(--bb-font-body); font-weight: 500;
    font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.4;
    text-shadow: 0 1px 12px rgba(12,30,24,0.55);
}
/* Golf onderaan de hero — zelfde stijl als de homepage (twee tracks + gele
   crest, geanimeerd via de bb-wave-* keyframes uit bb-global.css). Vult met de
   paginakleur (wit) zodat 'ie naadloos op de tekst eronder aansluit. */
.bb-pagehero__wave {
    position: absolute; left: 0; bottom: -1px; width: 100%;
    height: clamp(56px, 8vw, 110px); z-index: 3; pointer-events: none; overflow: hidden;
}
.bb-pagehero__wave-track {
    position: absolute; bottom: 0; left: 0; width: 200%; height: 100%;
    will-change: transform; animation: bb-wave-slide 18s linear infinite;
}
.bb-pagehero__wave-track svg {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    fill: var(--bb-cream); transform-origin: center bottom;
    animation: bb-wave-breathe-strong 4.2s ease-in-out infinite;
}
.bb-pagehero__wave-track--back { animation-duration: 26s; animation-direction: reverse; opacity: 0.65; }
.bb-pagehero__wave-track--back svg { fill: var(--bb-sand); animation-duration: 5.6s; }
.bb-pagehero__wave-track--front svg { fill: var(--bb-cream); }
.bb-pagehero__wave-crest {
    fill: none; stroke: var(--bb-yellow); stroke-width: 3.5;
    vector-effect: non-scaling-stroke; opacity: 0.95;
    filter: drop-shadow(0 0 6px rgba(244,197,66,0.5));
}
@media (prefers-reduced-motion: reduce) {
    .bb-pagehero__wave-track, .bb-pagehero__wave-track svg { animation: none; }
}
/* Intro-blok onder de hero: alleen op mobiel zichtbaar (desktop = hero-paneel). */
.bb-pagehero__introm { display: none; }
/* Mobiel: hero + beige tekstblok full-bleed (edge-to-edge). */
@media (max-width: 860px) {
    .bb-pagehero {
        margin: 0; border-radius: 0; max-width: none; left: 50%; transform: translateX(-50%);
        width: 100vw; min-height: clamp(380px, 80vw, 520px);
    }
    .bb-page { max-width: none; border-radius: 0; margin: 0; }
    .bb-page__container { padding-inline: var(--bb-container-padding); }
}

/* Contrast (WCAG): oranje "Lees meer"-CTA op witte kaart → donkerder amber
   zodat 'ie 4.5:1 haalt (fel oranje #e3a134 op wit haalt maar ~2:1). */
.bb-blogcard__cta { color: #9c6212; }

/* Publicatiedatum in de blogkaart (klein, gedempt, leesbaar op wit). */
.bb-blogcard__date {
    font-family: var(--bb-font-body); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--bb-green-dark);
    order: -1;
}

/* Contact/nieuwsbrief: lichte oranje achtergrond MET donkere tekst.
   Wit op licht oranje (#e3a134) haalt ~2,2:1; donkergroen (#2a3a32) erop ~5,4:1 → WCAG-OK.
   Zo houden we het lichte oranje én een geslaagde toegankelijkheid. */
.bb-newsletter { color: var(--bb-text); }
.bb-newsletter .bb-newsletter__heading,
.bb-contact__eyebrow,
.bb-contact__lead,
.bb-contact__details li,
.bb-contact__check,
.bb-contact__privacy,
.bb-contact__privacy a { color: var(--bb-text); }
.bb-contact__details a { border-bottom-color: rgba(42,58,50,0.4); }
.bb-contact__details a:hover { border-bottom-color: var(--bb-text); }
.bb-contact__ic { background: rgba(42,58,50,0.14); }
.bb-contact__ic svg { stroke: var(--bb-text); }

/* ============================================================
   BLOG-OVERZICHT (/blogs/) — intro + categoriefilter + kaart-grid
   ============================================================ */
/* Volle-breedte groene moss-achtergrond (zelfde sfeer als de homepage-blogsectie).
   De vaste, opake nav zweeft erover; daarom bovenin ruimte reserveren. */
.bb-blogindex {
    position: relative;
    left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 100vw;
    background-color: #5e7240;
    background-image: url('../img/bb-moss.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-blend-mode: multiply;
    padding-block: calc(var(--bb-header-h, 116px) + clamp(1.5rem, 3vw, 2.5rem)) clamp(3rem, 6vw, 5rem);
    padding-inline: var(--bb-container-padding);
}
body.bb-flat-header #bb-main { padding-top: 0; }
/* Crème paneel met afgeronde hoeken dat op de groene textuur zweeft.
   Twee aparte panelen: (1) titel+intro, (2) filter+listing — met groen ertussen. */
.bb-blogindex .bb-blogindex__panel {
    width: 100%; max-width: var(--bb-container-max);
    margin-inline: auto;
    background: var(--bb-cream);
    color: var(--bb-text);
    border-radius: clamp(20px, 2.5vw, 32px);
    padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
    box-shadow: 0 24px 60px rgba(12,30,24,0.22);
}
.bb-blogindex .bb-blogindex__panel + .bb-blogindex__panel { margin-top: clamp(1rem, 2.2vw, 1.75rem); }
.bb-blogindex .bb-blogindex__panel--intro .bb-blogindex__intro { margin-bottom: 0; }
/* Intro-paneel: tekst links, sfeerbeeld rechts (stapelt op mobiel). */
.bb-blogindex .bb-blogindex__intro-grid {
    display: grid; grid-template-columns: 1.35fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
}
@media (max-width: 768px) { .bb-blogindex .bb-blogindex__intro-grid { grid-template-columns: 1fr; } }
.bb-blogindex .bb-blogindex__intro-img {
    width: 100%; height: clamp(200px, 22vw, 300px);
    object-fit: cover; display: block;
    border-radius: clamp(14px, 1.6vw, 22px);
}
/* Mobiel: sfeerbeeld weg + introtekst inklapbaar zodat de blogkaarten sneller
   in beeld komen. De "Lees meer"-knop wordt door bb-nav.js toegevoegd; zonder
   JS blijft de volledige tekst gewoon zichtbaar (progressive enhancement). */
@media (max-width: 768px) {
    /* Crème panelen van rand tot rand: geen groene marge links/rechts meer
       (boven/onder blijft de groene textuur wel zichtbaar). */
    .bb-blogindex { padding-inline: 0; }
    .bb-blogindex .bb-blogindex__panel { border-radius: 0; }
    .bb-blogindex .bb-blogindex__intro-media { display: none; }
    .bb-blogindex .bb-blogindex__intro.is-collapsed {
        max-height: 7.2em; overflow: hidden; position: relative;
    }
    .bb-blogindex .bb-blogindex__intro.is-collapsed::after {
        content: ""; position: absolute; inset: auto 0 0 0; height: 2.6em;
        background: linear-gradient(to bottom, rgba(250,246,237,0), var(--bb-cream));
        pointer-events: none;
    }
}
.bb-blogindex .bb-blogindex__more {
    display: none; align-items: center; gap: 0.35rem;
    margin: 0.6rem 0 0; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-family: var(--bb-font-display); font-weight: 800;
    font-size: 1rem; color: var(--bb-green-dark);
}
.bb-blogindex .bb-blogindex__more.is-shown { display: inline-flex; }
.bb-blogindex .bb-blogindex__more::after {
    content: ""; width: 0.55em; height: 0.55em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.2s ease;
    margin: -0.2em 0 0 0.1rem;
}
.bb-blogindex .bb-blogindex__more.is-open::after { transform: rotate(-135deg); margin-top: 0.15em; }
/* Minder offset boven op mobiel (nav is daar lager dan op desktop). */
@media (max-width: 1100px) {
    .bb-blogindex { padding-block-start: clamp(80px, 15vw, 104px); }
}
.bb-blogindex .bb-blogindex__title {
    font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.01em;
    color: var(--bb-green-dark); margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
}
.bb-blogindex .bb-blogindex__intro {
    max-width: 72ch; margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
    font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.65;
    color: var(--bb-text);
}
/* Filter-chips */
.bb-blogindex .bb-blogindex__filter {
    position: relative;
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.bb-blogindex .bb-blogindex__chip {
    position: relative; z-index: 1;
    border: 2px solid var(--bb-green-dark); background: #fff; color: var(--bb-green-dark);
    font-family: var(--bb-font-display); font-weight: 800; font-size: 0.95rem;
    padding: 0.5rem 1.15rem; border-radius: var(--bb-radius-pill, 999px);
    cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.bb-blogindex .bb-blogindex__chip:hover,
.bb-blogindex .bb-blogindex__chip:focus-visible { transform: translateY(-1px); }
/* Fallback zonder JS: actieve chip krijgt gewoon de groene vulling. */
.bb-blogindex .bb-blogindex__chip.is-active { background: var(--bb-green-dark); color: #fff; }

/* Mét JS: chips transparant; één groene pill schuift geanimeerd naar de actieve chip. */
.bb-blogindex__filter.bb-has-pill .bb-blogindex__chip {
    background: transparent;
    transition: color 0.25s ease, transform 0.15s ease;
}
.bb-blogindex__filter.bb-has-pill .bb-blogindex__chip.is-active { background: transparent; color: #fff; }
.bb-blogindex__pill {
    position: absolute; top: 0; left: 0; z-index: 0;
    background: var(--bb-green-dark);
    border-radius: var(--bb-radius-pill, 999px);
    transition: transform 0.42s cubic-bezier(0.34, 1.28, 0.5, 1), width 0.35s ease, height 0.35s ease;
    will-change: transform, width;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .bb-blogindex__pill { transition: none; }
}
/* Grid: 4 naast elkaar → 2 → 1 */
.bb-blogindex .bb-blogindex__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.8vw, 1.6rem); align-items: stretch;
}
@media (max-width: 1024px) { .bb-blogindex .bb-blogindex__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bb-blogindex .bb-blogindex__grid { grid-template-columns: 1fr; } }
.bb-blogindex .bb-blogindex__item { display: flex; }
.bb-blogindex .bb-blogindex__item.is-hidden { display: none; }
/* Kaart in grid: vul de cel, geen slider-grijpcursor */
.bb-blogindex .bb-blogcard { width: 100%; max-width: none; cursor: pointer; }
.bb-blogindex .bb-blogindex__empty { grid-column: 1 / -1; margin: 0; color: var(--bb-text); opacity: 0.8; }

/* ============================================================
   SINGULAR / PROSE — losse berichten & pagina-inhoud (site-breed)
   ============================================================ */
.bb-singular { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bb-singular .bb-singular__container {
    width: 100%; max-width: 1160px;
    margin-inline: auto; padding-inline: var(--bb-container-padding);
}
/* Twee koloms: sticky inhoudsopgave links, leeskolom rechts (max 720px). */
.bb-singular .bb-singular__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
/* Alleen mét inhoudsopgave: TOC-kolom links + leeskolom rechts. */
.bb-singular .bb-singular__layout--has-toc {
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
}
.bb-singular .bb-singular__main { min-width: 0; max-width: 760px; }
/* Zonder TOC: leeskolom centreren in het brede container. */
.bb-singular .bb-singular__layout--no-toc .bb-singular__main { margin-inline: auto; }

/* Contactblok onder de inhoudsopgave in de zijbalk. */
.bb-toc__contact {
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
    padding-top: clamp(1rem, 1.6vw, 1.25rem);
    border-top: 1px solid rgba(42, 58, 50, 0.15);
    display: flex; flex-direction: column; gap: 0.55rem;
}
.bb-toc__contact-lbl {
    margin: 0; font-family: var(--bb-font-display); font-weight: 800;
    font-size: 0.82rem; color: var(--bb-green-dark);
}
.bb-toc__contact-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--bb-text); text-decoration: none; font-size: var(--bb-text-sm); line-height: 1.3;
}
.bb-toc__contact-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bb-green-dark); }
.bb-toc__contact-link:hover,
.bb-toc__contact-link:focus-visible { color: var(--bb-green-dark); text-decoration: underline; }

/* ============================================================
   BLOGPOST-OPZET — brede content links + zijbalk rechts
   ============================================================ */
.bb-singular--blog .bb-singular__container { max-width: 1220px; }
.bb-blogpost {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px);
    gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: start;
}
@media (max-width: 900px) { .bb-blogpost { grid-template-columns: 1fr; } }
.bb-blogpost__main { min-width: 0; }
.bb-blogpost__main .bb-singular__content { max-width: 760px; }

/* Byline */
.bb-byline { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.bb-byline__avatar img { width: 44px; height: 44px; border-radius: 50%; display: block; }
.bb-byline__by { display: block; font-family: var(--bb-font-display); font-weight: 800; color: var(--bb-green-dark); line-height: 1.15; }
.bb-byline__meta { display: block; font-size: var(--bb-text-sm); color: rgba(42,58,50,0.72); }
.bb-byline__meta a { color: inherit; text-decoration: none; }
.bb-byline__meta a:hover { color: var(--bb-green-dark); }

/* Zijbalk + kaarten */
.bb-blogpost__aside {
    display: flex; flex-direction: column; gap: clamp(1rem, 1.8vw, 1.5rem);
    position: sticky; top: clamp(90px, 12vh, 130px);
}
@media (max-width: 900px) { .bb-blogpost__aside { position: static; } }
.bb-card {
    background: #fff; border-radius: clamp(14px, 1.4vw, 18px);
    box-shadow: 0 12px 34px rgba(12,30,24,0.10);
    padding: clamp(1.25rem, 2vw, 1.6rem);
}

/* Auteurskaart */
.bb-authorcard { text-align: center; }
.bb-authorcard__avatar-wrap { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.bb-authorcard__avatar { width: 110px; height: 110px; border-radius: 50%; }
.bb-authorcard__name { margin: 0; font-family: var(--bb-font-display); font-weight: 900; font-size: 1.25rem; color: var(--bb-green-dark); }
.bb-authorcard__role { margin: 0.15rem 0 0.75rem; font-size: var(--bb-text-sm); color: #9c6212; font-weight: 700; }
.bb-authorcard__bio { margin: 0 0 1rem; font-size: var(--bb-text-sm); line-height: 1.55; color: var(--bb-text); }
.bb-authorcard__socials { display: flex; justify-content: center; gap: 0.6rem; }
.bb-authorcard__socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bb-cream); color: var(--bb-green-dark); transition: background .2s, color .2s, transform .15s; }
.bb-authorcard__socials a:hover { background: var(--bb-green-dark); color: #fff; transform: translateY(-2px); }
.bb-authorcard__socials svg { width: 18px; height: 18px; }

/* Gerelateerde blogs */
.bb-related__title { margin: 0 0 0.9rem; font-family: var(--bb-font-display); font-weight: 900; font-size: 1.2rem; color: var(--bb-green-dark); }
.bb-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.bb-related__link { display: flex; gap: 0.7rem; align-items: center; text-decoration: none; color: var(--bb-text); }
.bb-related__thumb { flex: 0 0 64px; width: 64px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--bb-sand); }
.bb-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-related__info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bb-related__cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9c6212; }
.bb-related__name { font-family: var(--bb-font-body); font-weight: 700; font-size: 0.9rem; line-height: 1.25; color: var(--bb-green-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-related__link:hover .bb-related__name { text-decoration: underline; }

/* Promo / CTA */
.bb-promo { display: flex; flex-direction: column; gap: 0.4rem; background: var(--bb-green-dark); color: #fff; text-decoration: none; }
.bb-promo__eyebrow { font-size: var(--bb-text-sm); opacity: 0.9; }
.bb-promo__title { font-family: var(--bb-font-display); font-weight: 900; font-size: 1.15rem; line-height: 1.15; }
.bb-promo__cta { margin-top: 0.5rem; font-family: var(--bb-font-display); font-weight: 800; color: #fff; }
.bb-promo:hover .bb-promo__cta { text-decoration: underline; }

/* Blogbericht zonder banner: ruimte onder de vaste nav + titel/hero bovenaan de content. */
body.bb-flat-header .bb-singular--blog { padding-block-start: clamp(100px, 13vw, 150px); }
.bb-blogpost__title {
    font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; letter-spacing: -0.01em;
    color: var(--bb-green-dark); margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.bb-blogpost__hero {
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden;
}
.bb-blogpost__hero img { width: 100%; height: auto; display: block; }

/* ============================================================
   GEDEELD PAGINA-TEMPLATE (page.php) — inhoud + subpagina-tegels + CTA
   ============================================================ */
/* Tekstsectie onder de hero: beige boxed blok op exact de hero-breedte, sluit
   naadloos aan op de golf (afgeronde onderhoeken → één doorlopende kaart). */
.bb-page {
    max-width: var(--bb-container-max); margin: 0 auto;
    background: var(--bb-cream);
    border-radius: 0 0 clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px);
    padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4.5rem);
}
.bb-page__container { width: 100%; max-width: none; margin: 0; padding-inline: clamp(1.5rem, 4vw, 4rem); }
/* Twee kolommen: tekst links, sticky expert/contact-kaart rechts. */
.bb-page__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 360px);
    gap: clamp(2rem, 4vw, 4rem); align-items: stretch;
}
.bb-page__main { min-width: 0; }
/* Tekst links uitgelijnd binnen het blok (niet gecentreerd). */
.bb-page__content { max-width: 820px; margin-inline: 0; }

/* Sticky expert/contact-kaart — foto als achtergrond, contact eroverheen. */
.bb-page__aside { min-width: 0; }
.bb-expertcard {
    position: sticky; top: calc(var(--bb-header-h, 116px) + 1rem);
    display: flex; flex-direction: column;
    background: #fff; color: var(--bb-text);
    border: 1px solid rgba(12,30,24,0.08);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(1.4rem, 2vw, 1.9rem);
    box-shadow: 0 18px 44px rgba(12,30,24,0.12);
}
.bb-expertcard__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9c6212; margin-bottom: 0.55rem; }
.bb-expertcard__quote { font-family: var(--bb-font-display); font-weight: 800; font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.22; color: var(--bb-green-dark); margin: 0 0 1.1rem; }
.bb-expertcard__author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
/* Google-beoordeling (E-E-A-T): sterren + cijfer + aantal reviews. */
.bb-expertcard__rating { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(12,30,24,0.1); }
.bb-rating-stars { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: 1px; color: rgba(12,30,24,0.18); white-space: nowrap; }
.bb-rating-stars::before { content: "\2605\2605\2605\2605\2605"; }
.bb-rating-stars > span { position: absolute; inset: 0; overflow: hidden; width: var(--pct, 100%); color: var(--bb-yellow); white-space: nowrap; }
.bb-rating-stars > span::before { content: "\2605\2605\2605\2605\2605"; }
.bb-expertcard__rating-text { font-size: 0.82rem; color: var(--bb-text); }
.bb-expertcard__rating-text strong { color: var(--bb-green-dark); }
/* Avatar in surfplank-vorm (clip-path → SVG-pad #bb-board in functions.php). */
.bb-expertcard__avatar {
    width: 58px; height: 92px; object-fit: cover; flex-shrink: 0;
    background: var(--bb-sand-light);
    -webkit-clip-path: url(#bb-board); clip-path: url(#bb-board);
}
.bb-expertcard__who { display: flex; flex-direction: column; min-width: 0; }
.bb-expertcard__name { font-family: var(--bb-font-display); font-weight: 900; font-size: 1.05rem; line-height: 1.1; color: var(--bb-green-dark); }
.bb-expertcard__role { font-size: 0.85rem; color: var(--bb-text); opacity: 0.75; }
.bb-expertcard__contact { display: flex; flex-direction: column; gap: 0.5rem; }
.bb-expertcard__contact a { display: flex; align-items: center; gap: 0.55rem; color: var(--bb-green-dark); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.bb-expertcard__contact a:hover { color: #9c6212; }
.bb-expertcard__contact svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--bb-orange); }
.bb-expertcard__cta {
    margin-top: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bb-yellow); color: var(--bb-text); font-family: var(--bb-font-display); font-weight: 800;
    padding: 0.75rem 1.1rem; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.bb-expertcard__cta:hover { background: var(--bb-green-dark); color: #fff; }
@media (max-width: 980px) {
    .bb-page__grid { grid-template-columns: 1fr; }
    .bb-expertcard { position: static; }
}

/* Tegel-grid van subpagina's (contextuele navigatie binnen de sectie) */
.bb-pagetiles-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.bb-pagetiles__eyebrow {
    margin: 0 0 clamp(.85rem, 1.6vw, 1.25rem); font-size: .8rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--bb-green-dark);
}
.bb-pagetiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 0; }
@media (max-width: 900px) { .bb-pagetiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bb-pagetiles { grid-template-columns: 1fr; } }
.bb-pagetile {
    position: relative; display: flex; align-items: flex-end;
    min-height: clamp(150px, 18vw, 210px);
    border-radius: var(--bb-radius-lg, 20px); overflow: hidden;
    text-decoration: none; background: var(--bb-green-dark); box-shadow: var(--bb-shadow-md);
}
.bb-pagetile__media { position: absolute; inset: 0; z-index: 0; }
.bb-pagetile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bb-pagetile:hover .bb-pagetile__media img { transform: scale(1.05); }
.bb-pagetile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); }
.bb-pagetile--noimg::after { background: none; }
.bb-pagetile__title {
    position: relative; z-index: 2; padding: clamp(0.85rem, 1.4vw, 1.2rem);
    color: #fff; font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.15;
}

/* [bb_cards]-grid binnen paginacontent. Prose-proof: selectors winnen van
   .bb-prose a (zelfde stijl als de subpagina-tegels). */
.bb-cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.8rem, 1.6vw, 1.25rem);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0; list-style: none; padding: 0;
}
@media (max-width: 900px) { .bb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bb-cards { grid-template-columns: 1fr; } }
/* Anker-sprong (#meer) onder de sticky header. */
.bb-prose .bb-anchor { display: block; scroll-margin-top: calc(var(--bb-header-h, 116px) + 1rem); }
/* Knoppen binnen paginacontent (intro-acties). */
.bb-prose .bb-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: clamp(1rem, 2vw, 1.6rem) 0; }
.bb-prose .bb-btn {
    display: inline-flex; align-items: center; padding: 0.8rem 1.8rem;
    border-radius: var(--bb-radius-pill, 999px); font-family: var(--bb-font-display);
    font-weight: 800; text-decoration: none; transition: transform .15s ease, background-color .2s ease, color .2s ease;
    background: transparent; color: var(--bb-green-dark); border: 2px solid var(--bb-green-dark);
}
.bb-prose .bb-btn:hover { transform: translateY(-2px); }
.bb-prose .bb-btn--primary { background: var(--bb-yellow); color: var(--bb-text); border-color: var(--bb-yellow); }
.bb-prose .bb-card, .bb-card {
    position: relative; display: flex; align-items: flex-end;
    min-height: clamp(140px, 16vw, 200px);
    border-radius: var(--bb-radius-lg, 20px); overflow: hidden;
    text-decoration: none; background: var(--bb-green-dark); box-shadow: var(--bb-shadow-md);
}
.bb-card__media { position: absolute; inset: 0; z-index: 0; }
.bb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bb-card:hover .bb-card__media img { transform: scale(1.05); }
.bb-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); }
.bb-card--noimg::after { background: none; }
.bb-prose .bb-card__title, .bb-card__title {
    position: relative; z-index: 2; padding: clamp(0.8rem, 1.4vw, 1.1rem);
    color: #fff; font-family: var(--bb-font-display); font-weight: 800;
    font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.15; text-decoration: none;
}

/* Bodem-CTA (volle breedte) */
.bb-pagecta {
    position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw;
    background: var(--bb-green-dark); color: #fff;
    padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center;
}
.bb-pagecta__inner { max-width: 700px; margin-inline: auto; padding-inline: var(--bb-container-padding); }
.bb-pagecta__title { font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 0.5rem; color: #fff; }
.bb-pagecta__text { margin: 0 0 1.5rem; color: rgba(255,255,255,0.9); }
.bb-pagecta__buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.bb-pagecta__btn { display: inline-flex; align-items: center; padding: 0.8rem 1.8rem; border-radius: var(--bb-radius-pill, 999px); font-family: var(--bb-font-display); font-weight: 800; text-decoration: none; transition: transform .15s ease, background-color .2s ease, color .2s ease; }
.bb-pagecta__btn--primary { background: var(--bb-yellow); color: var(--bb-text); }
.bb-pagecta__btn--primary:hover { transform: translateY(-2px); }
.bb-pagecta__btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); }
.bb-pagecta__btn--ghost:hover { background: #fff; color: var(--bb-green-dark); border-color: #fff; }
.bb-singular .bb-singular__meta {
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bb-green-dark); margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.bb-singular .bb-singular__meta a { color: inherit; text-decoration: none; }
.bb-singular .bb-singular__meta a:hover { text-decoration: underline; }
.bb-singular .bb-singular__sep { opacity: 0.5; margin-inline: 0.35em; }

/* ---- Inhoudsopgave (TOC) ---- */
.bb-toc {
    position: sticky; top: calc(var(--bb-header-h, 116px) + 1rem);
    align-self: start;
    font-family: var(--bb-font-body);
    border-left: 2px solid var(--bb-green-light, #a8c0b0);
    padding-left: clamp(0.9rem, 1.4vw, 1.25rem);
}
.bb-toc__title {
    font-family: var(--bb-font-display); font-weight: 800;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--bb-green-dark); margin: 0 0 0.75rem;
}
.bb-toc__list { list-style: none; margin: 0; padding: 0; }
.bb-toc__item { margin: 0; }
.bb-toc__item + .bb-toc__item { margin-top: 0.55rem; }
.bb-toc__item--h3 { padding-left: 0.9rem; }
.bb-toc__link {
    display: block; text-decoration: none;
    font-size: 0.95rem; line-height: 1.35;
    color: var(--bb-text); opacity: 0.75;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.bb-toc__item--h3 .bb-toc__link { font-size: 0.88rem; }
.bb-toc__link:hover, .bb-toc__link:focus-visible { opacity: 1; color: var(--bb-green-dark); }
.bb-toc__link.is-active { opacity: 1; color: var(--bb-green-dark); font-weight: 700; }
/* Mobiele inklap-knop (door bb-nav.js getoond). */
.bb-toc__toggle { display: none; }

.bb-singular .bb-singular__back { margin-top: clamp(2rem, 4vw, 3rem); }
.bb-singular .bb-singular__back a { color: var(--bb-green-dark); font-weight: 700; text-decoration: none; }
.bb-singular .bb-singular__back a:hover,
.bb-singular .bb-singular__back a:focus-visible { text-decoration: underline; }

.bb-prose {
    font-family: var(--bb-font-body);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.7; color: var(--bb-text);
}
.bb-prose > * + * { margin-top: 1.25em; }
.bb-prose h2, .bb-prose h3, .bb-prose h4 {
    font-family: var(--bb-font-display);
    color: var(--bb-green-dark); line-height: 1.15;
}
.bb-prose h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; margin-top: 1.6em; }
.bb-prose h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; margin-top: 1.4em; }
.bb-prose h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem);  font-weight: 800; margin-top: 1.3em; }
/* Kop dichter op de volgende alinea: minder ruimte ná een heading. */
.bb-prose h2 + *, .bb-prose h3 + *, .bb-prose h4 + * { margin-top: 0.45em; }

/* Download-knop in content (bijv. BBQ-menu). a.bb-download beats .bb-prose a. */
.bb-prose a.bb-download { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--bb-font-display); font-weight: 800; font-size: 1rem; background: var(--bb-yellow); color: var(--bb-text); text-decoration: none; padding: 0.8rem 1.4rem; border-radius: 999px; transition: background .2s ease, color .2s ease, transform .15s ease; }
.bb-prose a.bb-download:hover, .bb-prose a.bb-download:focus { background: var(--bb-green-dark); color: #fff; }
.bb-prose a.bb-download svg { width: 18px; height: 18px; }

/* Content-tabellen (bijv. prijzen): strak en direct te scannen. */
.bb-prose table:not(.bb-memb__table) { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.25em 0; font-size: 0.97rem; border: 1.5px solid var(--bb-green-dark); border-radius: 14px; overflow: hidden; }
.bb-prose table:not(.bb-memb__table) th, .bb-prose table:not(.bb-memb__table) td { padding: 0.72rem 1rem; text-align: left; border-bottom: 1px solid rgba(12,30,24,0.12); vertical-align: top; }
.bb-prose table:not(.bb-memb__table) thead th { background: var(--bb-green-dark); color: #fff; font-family: var(--bb-font-display); font-weight: 800; border-bottom: 0; }
.bb-prose table:not(.bb-memb__table) tbody tr:nth-child(even) td { background: rgba(12,30,24,0.03); }
.bb-prose table:not(.bb-memb__table) tbody tr:last-child td { border-bottom: 0; }
.bb-prose table:not(.bb-memb__table) thead th:not(:first-child), .bb-prose table:not(.bb-memb__table) td:not(:first-child) { text-align: right; }
.bb-prose table:not(.bb-memb__table) tbody td:last-child { font-weight: 700; color: var(--bb-green-dark); }
@media (max-width: 560px) { .bb-prose table:not(.bb-memb__table) th, .bb-prose table:not(.bb-memb__table) td { padding: 0.6rem 0.7rem; } .bb-prose table:not(.bb-memb__table) { font-size: 0.9rem; } }

/* ===== Sfeerimpressie-galerij ([bb_sfeer]) + lightbox ===== */
.bb-sfeer { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(0.5rem, 1.2vw, 0.9rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bb-sfeer__item { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; background: var(--bb-sand-light); cursor: zoom-in; }
/* .bb-sfeer-scope beats .bb-prose img { height:auto } zodat de foto's het vak vullen. */
.bb-sfeer .bb-sfeer__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.bb-sfeer .bb-sfeer__item:hover img { transform: scale(1.06); }
.bb-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(12,30,24,0.93); }
.bb-lightbox.is-open { display: flex; }
.bb-lightbox__img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.bb-lightbox__close, .bb-lightbox__nav {
    position: absolute; display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,0.15); color: #fff; border: 0; border-radius: 50%;
    transition: background .2s ease; line-height: 1;
}
.bb-lightbox__close:hover, .bb-lightbox__nav:hover { background: rgba(255,255,255,0.28); }
.bb-lightbox__close { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 26px; }
.bb-lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 30px; }
.bb-lightbox__prev { left: 18px; }
.bb-lightbox__next { right: 18px; }
@media (max-width: 600px) { .bb-lightbox__nav { width: 44px; height: 44px; font-size: 24px; } .bb-lightbox__prev { left: 8px; } .bb-lightbox__next { right: 8px; } }
.bb-prose a { color: var(--bb-blue); text-decoration: underline; }
.bb-prose a:hover, .bb-prose a:focus-visible { color: var(--bb-green-dark); }
.bb-prose img { border-radius: var(--bb-radius-md); height: auto; }
.bb-prose ul, .bb-prose ol { padding-left: 1.4em; margin-block: 1.25em; }
.bb-prose li + li { margin-top: 0.4em; }
.bb-prose blockquote {
    margin: 1.5em 0; padding: 0.25em 0 0.25em 1.1rem;
    border-left: 4px solid var(--bb-orange);
    font-style: italic; color: var(--bb-text);
}
/* Kopjes vrij van de sticky header bij ankersprongen vanuit de TOC. */
.bb-prose h2, .bb-prose h3, .bb-prose h4 { scroll-margin-top: calc(var(--bb-header-h, 116px) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- Opening / lede: de eerste alinea valt op (grab attention → lees verder) ---- */
.bb-singular__content.bb-prose > p:first-of-type {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.6; color: var(--bb-text);
}
/* Halfbrede afbeelding naast de opening (WP-uitlijning of .bb-half). */
.bb-prose .alignright, .bb-prose .bb-half--right { float: right; margin: 0.3em 0 1em 1.6em; }
.bb-prose .alignleft,  .bb-prose .bb-half--left  { float: left;  margin: 0.3em 1.6em 1em 0; }
.bb-prose .alignright, .bb-prose .alignleft,
.bb-prose .bb-half--right, .bb-prose .bb-half--left { max-width: min(48%, 360px); }
.bb-prose figure { margin: 1.5em 0; }
.bb-prose figure img { width: 100%; }
.bb-prose figcaption { font-size: var(--bb-text-sm); color: var(--bb-text); opacity: 0.7; margin-top: 0.5em; }

/* ---- Soundbite: pull-quote om te delen (zwaardere selector zodat het de
   algemene .bb-prose blockquote-stijl overschrijft) ---- */
.bb-prose .bb-soundbite, .bb-soundbite {
    margin: clamp(1.75rem, 4vw, 2.75rem) 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.4rem, 3vw, 2rem);
    background: var(--bb-sand-light, #f5ebd0);
    border-radius: var(--bb-radius-lg, 20px);
    border-left: 6px solid var(--bb-orange);
    font-style: normal;
}
.bb-prose .bb-soundbite p, .bb-soundbite p {
    margin: 0; font-family: var(--bb-font-display); font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.35;
    color: var(--bb-green-dark);
}
.bb-prose .bb-soundbite cite, .bb-soundbite cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: var(--bb-text-sm); font-weight: 700; opacity: 0.75; }

/* ---- CTA-blok: call-to-action met knop ---- */
.bb-cta {
    margin: clamp(1.75rem, 4vw, 2.75rem) 0;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--bb-green-dark); color: #fff;
    border-radius: var(--bb-radius-lg, 20px);
    text-align: center;
}
.bb-cta h2, .bb-cta h3 { color: #fff; margin: 0 0 0.5rem; }
.bb-cta p { margin: 0 0 1.1rem; color: rgba(255,255,255,0.9); }
.bb-cta__btn, .bb-prose .bb-cta__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--bb-yellow); color: var(--bb-green-dark);
    font-family: var(--bb-font-display); font-weight: 800;
    padding: 0.8rem 1.6rem; border-radius: var(--bb-radius-pill, 999px);
    text-decoration: none; transition: transform 0.15s ease, background-color 0.2s ease;
}
.bb-cta__btn:hover, .bb-cta__btn:focus-visible { transform: translateY(-2px); background: var(--bb-orange); color: #fff; }

/* ---- Expert-/auteurblok (E-E-A-T) ---- */
.bb-expert { margin-top: clamp(2.5rem, 5vw, 4rem); }
.bb-expert__eyebrow {
    font-family: var(--bb-font-display); font-weight: 800;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--bb-green-dark); margin: 0 0 0.75rem;
}
.bb-expert__card {
    display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: flex-start;
    background: var(--bb-cream); border: 1px solid rgba(77,112,96,0.18);
    border-radius: var(--bb-radius-lg, 20px);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.bb-expert__media { flex: 0 0 auto; }
.bb-expert__avatar {
    width: clamp(72px, 12vw, 104px); height: clamp(72px, 12vw, 104px);
    border-radius: 50%; object-fit: cover; display: block;
    border: 3px solid #fff; box-shadow: 0 6px 18px rgba(12,30,24,0.15);
}
.bb-expert__body { min-width: 0; }
.bb-expert__name {
    font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--bb-green-dark);
    margin: 0; line-height: 1.2;
}
.bb-expert__role { display: block; font-size: 0.9rem; font-weight: 700; color: var(--bb-text); opacity: 0.75; margin-top: 0.15rem; }
.bb-expert__years { margin: 0.5rem 0 0; font-size: var(--bb-text-sm); font-weight: 700; color: var(--bb-orange); }
.bb-expert__bio { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.6; color: var(--bb-text); }
.bb-expert__contact { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.bb-expert__contact a { color: var(--bb-green-dark); font-weight: 700; text-decoration: none; }
.bb-expert__contact a:hover, .bb-expert__contact a:focus-visible { text-decoration: underline; }

/* ---- Mobiel: TOC bovenaan en inklapbaar, kolommen gestapeld ---- */
@media (max-width: 900px) {
    .bb-singular .bb-singular__layout { grid-template-columns: 1fr; gap: clamp(1.25rem, 4vw, 2rem); }
    .bb-singular .bb-singular__main { max-width: none; }
    .bb-toc {
        position: static; border-left: 0; padding-left: 0;
        background: var(--bb-cream); border: 1px solid rgba(77,112,96,0.18);
        border-radius: var(--bb-radius-md, 14px);
        padding: 0.75rem 1rem;
    }
    .bb-toc__toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
        width: 100%; background: none; border: 0; cursor: pointer; padding: 0;
        font-family: var(--bb-font-display); font-weight: 800;
        font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--bb-green-dark);
    }
    .bb-toc__toggle::after {
        content: ""; width: 0.6em; height: 0.6em; flex: 0 0 auto;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform 0.2s ease;
    }
    .bb-toc.is-open .bb-toc__toggle::after { transform: rotate(-135deg); }
    .bb-toc .bb-toc__title { display: none; }
    /* Met JS: lijst verborgen tot opengeklapt. Zonder JS blijft de lijst zichtbaar. */
    .bb-toc.bb-toc--js .bb-toc__list { display: none; margin-top: 0; }
    .bb-toc.bb-toc--js.is-open .bb-toc__list { display: block; margin-top: 0.75rem; }
}
@media (max-width: 560px) {
    .bb-prose .alignright, .bb-prose .alignleft,
    .bb-prose .bb-half--right, .bb-prose .bb-half--left { float: none; margin: 1.5em 0; max-width: 100%; }
}

/* ============================================================
   CONTACT-MODAL (popup met bronpagina-tracking)
   ============================================================ */
body.bb-modal-open { overflow: hidden; }
.bb-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2rem); }
.bb-modal[hidden] { display: none; }
.bb-modal__backdrop { position: absolute; inset: 0; background: rgba(12,30,24,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bb-modal__dialog {
    position: relative; z-index: 1; width: 100%; max-width: 460px;
    background: #fff; border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 30px 80px rgba(12,30,24,0.35);
    max-height: 92vh; overflow-y: auto;
}
.bb-modal__close { position: absolute; top: 0.5rem; right: 0.8rem; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--bb-text); cursor: pointer; opacity: 0.55; transition: opacity .2s; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.bb-modal__close:hover, .bb-modal__close:focus { opacity: 1; background: none; color: var(--bb-text); outline: none; }
.bb-modal__close:focus-visible { outline: 2px solid var(--bb-orange); outline-offset: 2px; border-radius: 6px; }
.bb-modal__title { font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--bb-green-dark); margin: 0 0 0.25rem; }
.bb-modal__sub { margin: 0 0 1.25rem; color: var(--bb-text); opacity: 0.8; font-size: 0.95rem; }
.bb-contactform { display: flex; flex-direction: column; gap: 0.85rem; }
.bb-contactform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb-contactform__field { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.85rem; color: var(--bb-green-dark); }
.bb-contactform__field input, .bb-contactform__field textarea { font: inherit; font-weight: 400; color: var(--bb-text); padding: 0.7rem 0.85rem; border: 1px solid rgba(12,30,24,0.18); border-radius: 12px; background: #fff; }
.bb-contactform__field input:focus, .bb-contactform__field textarea:focus { border-color: var(--bb-orange); outline: none; box-shadow: inset 0 0 0 2px var(--bb-orange); }
.bb-contactform__field textarea { resize: vertical; min-height: 92px; }
.bb-contactform__cv input[type="file"] { font: inherit; font-size: 0.85rem; color: var(--bb-text); padding: 0.55rem 0.6rem; border: 1px dashed rgba(12,30,24,0.30); border-radius: 12px; background: #fff; width: 100%; cursor: pointer; }
.bb-contactform__cv input[type="file"]::file-selector-button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 0.4rem 0.9rem; margin-right: 0.7rem; background: var(--bb-sand-light); color: var(--bb-green-dark); cursor: pointer; }
.bb-contactform__submit { margin-top: 0.3rem; background: var(--bb-yellow); color: var(--bb-text); font-family: var(--bb-font-display); font-weight: 800; padding: 0.85rem 1.2rem; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.bb-contactform__submit:hover { background: var(--bb-green-dark); color: #fff; }
.bb-contactform__submit:disabled { opacity: 0.6; cursor: default; }
/* Focus (bijv. na 'Terug' of via toetsenbord) mag niet de Hello-Elementor magenta (#c36) worden. */
.bb-expertcard__cta:focus, .bb-contactform__submit:focus { background: var(--bb-yellow); color: var(--bb-text); outline: none; }
.bb-expertcard__cta:focus-visible, .bb-contactform__submit:focus-visible { outline: 2px solid var(--bb-orange); outline-offset: 2px; }
.bb-contactform__msg { margin: 0.25rem 0 0; font-size: 0.9rem; font-weight: 600; }
.bb-contactform__msg.is-ok { color: var(--bb-green-dark); }
.bb-contactform__msg.is-error { color: #b3261e; }

/* "Stel je vraag" → inline uitklap in de expert-kaart (de kaart wordt groter) */
.bb-expertcard__cta { width: 100%; gap: 0.5rem; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.bb-expertcard__cta-caret { transition: transform .3s ease; }
.bb-expertcard__cta[aria-expanded="true"] .bb-expertcard__cta-caret { transform: rotate(180deg); }
/* Flip-kaart: info-paneel <-> formulier-paneel (geanimeerde cross-fade + hoogte). */
.bb-expertcard__panels { position: relative; overflow: hidden; transition: height .42s cubic-bezier(.4,0,.2,1); }
.bb-expertcard__panel { display: flex; flex-direction: column; transition: opacity .3s ease, transform .34s cubic-bezier(.4,0,.2,1); }
.bb-expertcard__panel.is-out { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(12px); pointer-events: none; }
.bb-expertcard__panel.is-active { position: relative; opacity: 1; transform: none; }
.bb-expertcard__panel[hidden] { display: none; } /* fallback zonder JS */
.bb-expertcard__back {
    -webkit-appearance: none; appearance: none; /* geen native knop-highlight (OS-accentkleur) */
    align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 0; padding: 0; margin: 0 0 .9rem;
    color: var(--bb-green-dark); font-family: var(--bb-font-display); font-weight: 800;
    font-size: .95rem; cursor: pointer; transition: color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.bb-expertcard__back svg { width: 18px; height: 18px; }
.bb-expertcard__back:hover, .bb-expertcard__back:focus { color: var(--bb-green); background-color: transparent; }
.bb-expertcard__form-title { margin: 0 0 .7rem; font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.15; color: var(--bb-green-dark); }
.bb-expertcard__panel--form .bb-contactform { margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) {
    .bb-expertcard__panels, .bb-expertcard__panel { transition: none; }
}

/* Converterende boek-CTA (anker naar de configurator op dezelfde pagina) */
.bb-expertcard__cta--book { text-decoration: none; }
.bb-expertcard__cta-arrow { transition: transform .25s ease; }
.bb-expertcard__cta--book:hover .bb-expertcard__cta-arrow { transform: translateY(3px); }

/* Anker-doel boven de configurator — compenseert de sticky header bij scrollen */
.bb-configurator-anchor { display: block; height: 0; scroll-margin-top: clamp(80px, 12vh, 120px); }
html { scroll-behavior: smooth; }

/* Ingebedde Beach Break-configurator (vervangt de tegels op dienst/activiteit-pagina's) */
.bb-configurator-embed {
    padding-block: clamp(1.5rem, 4vw, 3rem);
}
/* Zelfde breedte/uitlijning als de .bb-page tekstsectie erboven — géén eigen
   achtergrond/box (transparant), alleen uitlijnen. */
.bb-configurator-embed__container {
    width: 100%;
    max-width: var(--bb-container-max);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 4rem); /* = .bb-page__container */
}
.bb-configurator-embed__container > * { margin-block: 0; }
/* Wizard vult de breedte (i.p.v. de eigen 1140px-cap) → lijnt met de tekstsectie. */
.bb-configurator-embed .bb-wizard { max-width: none; }
@media (max-width: 860px) {
    .bb-configurator-embed__container { padding-inline: var(--bb-container-padding); }
}

/* Teamleden-listing ([bb_team]) — "de gezichten achter BeachBreak".
   Witte kaarten met foto, naam + functie; hover = lift + foto-zoom + accent. */
.bb-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: clamp(1.5rem, 2.6vw, 2.25rem);
    margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
/* .bb-team-prefix verhoogt de specificiteit zodat de prose-figure-marge
   (.bb-prose figure { margin: 1.5em 0 }) niet de verticale ruimte opblaast. */
.bb-team .bb-team__card {
    margin: 0; /* gelijke ruimte horizontaal én verticaal = de grid-gap */
    background: #fff;
    border-radius: 22px;
    padding: 12px 12px 0; /* wit kader rondom de foto */
    box-shadow: 0 8px 26px rgba(12,30,24,0.10);
    transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease;
}
.bb-team__card:hover,
.bb-team__card:focus-within {
    transform: translateY(-7px);
    box-shadow: 0 26px 52px rgba(12,30,24,0.20);
}
.bb-team__media {
    display: block; position: relative;
    aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 14px; /* foto eigen ronde hoeken (alle vier) */
    background: var(--bb-sand-light);
}
.bb-team__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.bb-team__card:hover .bb-team__media img { transform: scale(1.06); }
/* subtiele tint op de foto bij hover (cue) */
.bb-team__media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(45,58,50,0.45), rgba(45,58,50,0) 55%);
    opacity: 0; transition: opacity .32s ease;
}
.bb-team__card:hover .bb-team__media::after { opacity: 1; }
.bb-team__media--empty::after { display: none; }
.bb-team__cap {
    display: flex; flex-direction: column;
    padding: 0.85rem 0.5rem 1rem; text-align: center;
}
.bb-team__name {
    font-family: var(--bb-font-display); font-weight: 800;
    font-size: 1.2rem; line-height: 1.1; color: var(--bb-green-dark);
    transition: color .25s ease;
}
.bb-team__card:hover .bb-team__name { color: var(--bb-orange); }
.bb-team__role {
    font-family: var(--bb-font-body); font-size: 0.88rem;
    color: var(--bb-green); margin-top: 0.22rem;
}
/* "We want you here"-vacaturetegel: zelfde kaartvorm, groen panel i.p.v. foto.
   Het is een <button> (opent de popup), dus de knop-chrome resetten. */
.bb-team__card--join {
    display: block; width: 100%; text-align: center; cursor: pointer;
    border: 0; font: inherit; color: inherit; text-decoration: none;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.bb-team__card--join:hover, .bb-team__card--join:focus { background: #fff; outline: none; }
.bb-team__card--join:focus-visible { outline: 2px solid var(--bb-orange); outline-offset: 3px; }

/* ===== Vacatures ([bb_vacatures] op Werken bij BeachBreak) ===== */
.bb-vacatures { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bb-vacature {
    background: #fff; border: 1px solid rgba(12,30,24,0.08); border-radius: 18px;
    padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: 0 8px 26px rgba(12,30,24,0.08);
}
.bb-vacature__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 0.7rem; }
.bb-vacature__title { font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--bb-green-dark); margin: 0; }
.bb-vacature__meta { font-family: var(--bb-font-body); font-weight: 600; font-size: 0.82rem; color: var(--bb-green); background: var(--bb-sand-light); padding: 0.28rem 0.75rem; border-radius: 999px; }
.bb-vacature__body { margin-bottom: 1.1rem; }
.bb-vacature__body > :first-child { margin-top: 0; }
.bb-vacature__body > :last-child { margin-bottom: 0; }
.bb-vacature__apply {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--bb-font-display); font-weight: 800; font-size: 0.95rem;
    background: var(--bb-yellow); color: var(--bb-text);
    border: 0; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.bb-vacature__apply:hover, .bb-vacature__apply:focus { background: var(--bb-green-dark); color: #fff; outline: none; }
.bb-vacature__apply:focus-visible { outline: 2px solid var(--bb-orange); outline-offset: 2px; }
.bb-vacature__apply svg { transition: transform .25s ease; }
.bb-vacature__apply:hover svg { transform: translateX(3px); }
.bb-vacatures--empty {
    background: var(--bb-sand-light); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.5rem);
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.bb-vacatures__empty-text { max-width: 52ch; margin: 0; color: var(--bb-text); line-height: 1.5; }

/* ===== Lidmaatschappen-vergelijkingstabel ([bb_lidmaatschappen]) ===== */
.bb-memb { margin: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bb-memb__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1.5px solid var(--bb-green-dark); box-shadow: 0 10px 30px rgba(12,30,24,0.10); }
.bb-memb__table { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; font-size: 0.95rem; }
.bb-memb__table th, .bb-memb__table td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid rgba(12,30,24,0.08); vertical-align: middle; }
.bb-memb__table tbody th[scope="row"] { text-align: left; font-family: var(--bb-font-body); font-weight: 600; color: var(--bb-text); width: 40%; }
.bb-memb__table tbody tr:nth-child(even) th[scope="row"],
.bb-memb__table tbody tr:nth-child(even) td { background: rgba(12,30,24,0.02); }
/* Geen deelstreep onder de laatste rij → schone afronding onderaan. */
.bb-memb__table tbody tr:last-child th, .bb-memb__table tbody tr:last-child td { border-bottom: 0; }
.bb-memb__corner { background: transparent; border-bottom: 0; }
/* Kolomkoppen (lidmaatschappen) */
.bb-memb__table th.bb-memb__plan { position: relative; vertical-align: top; padding-top: 2.7rem; border-bottom: 2px solid rgba(12,30,24,0.10); }
.bb-memb__name { display: block; font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--bb-green-dark); line-height: 1.1; }
.bb-memb__prices { display: block; margin-top: 0.5rem; }
.bb-memb__tier { display: block; line-height: 1.15; margin-top: 0.3rem; }
.bb-memb__amt { font-family: var(--bb-font-display); font-weight: 900; font-size: 1.05rem; color: var(--bb-text); white-space: nowrap; }
.bb-memb__age { display: block; font-size: 0.72rem; font-weight: 600; color: var(--bb-green); white-space: nowrap; }
.bb-memb__per { display: block; margin-top: 0.5rem; font-size: 0.72rem; color: var(--bb-green); }
.bb-memb__badge {
    position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%);
    background: var(--bb-yellow); color: var(--bb-text); font-family: var(--bb-font-display);
    font-weight: 800; font-size: 0.64rem; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 0.22rem 0.7rem; border-radius: 999px; white-space: nowrap; line-height: 1;
}
/* Uitgelichte kolom */
.bb-memb__plan.is-featured { background: rgba(77,112,96,0.08); }
.bb-memb__table td.is-featured { background: rgba(77,112,96,0.06); }
.bb-memb__table tbody tr:nth-child(even) td.is-featured { background: rgba(77,112,96,0.10); }
/* Vinkje / streepje */
.bb-memb__yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bb-green-dark); color: #fff; }
.bb-memb__yes svg { width: 15px; height: 15px; }
.bb-memb__no { color: rgba(12,30,24,0.30); font-weight: 700; }
.bb-memb__note { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--bb-green); }
.bb-memb__locker { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--bb-text); }

/* ===== Kidsclub: lestijden + prijskaarten ([bb_kidsclub]) ===== */
.bb-kids { margin: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bb-kids__when {
    background: rgba(77,112,96,0.08); border: 1.5px solid var(--bb-green-dark);
    border-radius: 18px; padding: clamp(1.25rem, 2.5vw, 1.9rem); margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.bb-kids__when-title { font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--bb-green-dark); margin: 0 0 0.9rem; }
.bb-kids__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.bb-kids__slots li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(12,30,24,0.10); }
.bb-kids__slots li:last-child { border-bottom: 0; padding-bottom: 0; }
.bb-kids__day { font-family: var(--bb-font-display); font-weight: 800; color: var(--bb-green-dark); min-width: 150px; }
.bb-kids__time { color: var(--bb-text); font-weight: 600; }
.bb-kids__time em { font-style: normal; font-weight: 400; color: var(--bb-green); font-size: 0.9em; }
.bb-kids__note { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--bb-green); }

.bb-pricecards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 560px) { .bb-pricecards { grid-template-columns: 1fr; } }
.bb-pricecard { background: #fff; border: 1px solid rgba(12,30,24,0.10); border-radius: 18px; padding: clamp(1.25rem, 2.2vw, 1.75rem); box-shadow: 0 8px 26px rgba(12,30,24,0.08); }
.bb-pricecard__title { font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--bb-green-dark); margin: 0 0 0.2rem; }
.bb-pricecard__sub { font-size: 0.85rem; color: var(--bb-green); margin: 0 0 1rem; line-height: 1.35; }
.bb-pricecard__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bb-pricecard__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(12,30,24,0.08); }
.bb-pricecard__rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.bb-pricecard__rows span { color: var(--bb-text); }
.bb-pricecard__rows strong { font-family: var(--bb-font-display); font-weight: 900; color: var(--bb-green-dark); white-space: nowrap; }

/* ===== Surfcafé menukaarten ([bb_menukaart]) ===== */
.bb-menucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bb-menucard {
    display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
    background: #fff; border: 1px solid rgba(12,30,24,0.10); border-radius: 18px;
    box-shadow: 0 8px 26px rgba(12,30,24,0.10);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bb-menucard:hover, .bb-menucard:focus-visible { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(12,30,24,0.20); outline: none; }
.bb-menucard__media {
    display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center top;
    background-color: var(--bb-sand-light); transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.bb-menucard:hover .bb-menucard__media { transform: scale(1.04); }
.bb-menucard__body { padding: clamp(1rem, 2vw, 1.35rem); display: flex; flex-direction: column; gap: 0.15rem; }
.bb-menucard__title { font-family: var(--bb-font-display); font-weight: 900; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--bb-green-dark); }
.bb-menucard__sub { font-size: 0.9rem; color: var(--bb-green); }
.bb-menucard__cta {
    margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--bb-font-display); font-weight: 800; font-size: 0.9rem; color: var(--bb-orange);
}
.bb-menucard__cta svg { transition: transform .25s ease; }
.bb-menucard:hover .bb-menucard__cta svg { transform: translate(2px,-2px); }
.bb-team__media--join {
    display: grid; place-items: center; text-align: center; padding: 1rem;
    background: linear-gradient(155deg, var(--bb-green-dark) 0%, var(--bb-green) 100%);
}
.bb-team__media--join::after { display: none; }
.bb-team__join-text {
    font-family: var(--bb-font-display); font-weight: 900;
    text-transform: uppercase; color: #fff; line-height: 0.92;
    font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: 0.01em;
}
.bb-team__join-text em {
    display: block; font-style: normal; color: var(--bb-yellow);
    font-size: 1.5em; line-height: 0.9;
}
@media (max-width: 600px) { .bb-team { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
    .bb-team__card, .bb-team__media img { transition: none; }
    .bb-team__card:hover { transform: none; }
    .bb-team__card:hover .bb-team__media img { transform: none; }
}

/* ============================================================
   CONTACTPAGINA (page-contact.php)
   ============================================================ */
/* Dekkende achtergrond (gelijk aan de wave-vulling) zodat de groene body-textuur
   niet als losse band onder de banner doorschijnt. */
.bb-contactpage { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); background: var(--bb-page-bg, #fff); position: relative; }
.bb-contactpage__container {
    width: 100%; max-width: var(--bb-container-max);
    margin-inline: auto; padding-inline: var(--bb-container-padding);
}
.bb-contactpage__eyebrow {
    font-family: var(--bb-font-body); font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; font-size: 0.8rem; color: var(--bb-yellow); margin: 0 0 0.4rem;
}
.bb-contactpage__intro { max-width: 720px; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.bb-contactpage__grid {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
}
@media (max-width: 860px) { .bb-contactpage__grid { grid-template-columns: 1fr; } }
.bb-contactpage__panel {
    background: #fff; border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(1.5rem, 2.5vw, 2.25rem); box-shadow: 0 14px 36px rgba(12,30,24,0.10);
}
.bb-contactpage__h {
    font-family: var(--bb-font-display); font-weight: 900;
    font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--bb-green-dark); margin: 0 0 1.1rem;
}
.bb-contactform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 480px) { .bb-contactform__row { grid-template-columns: 1fr; } }
.bb-contactpage__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.9rem; }
.bb-contactpage__list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--bb-text); line-height: 1.4; }
.bb-contactpage__list a { color: var(--bb-green-dark); text-decoration: none; font-weight: 600; }
.bb-contactpage__list a:hover { color: var(--bb-orange); }
.bb-contactpage__ic { flex-shrink: 0; width: 22px; height: 22px; color: var(--bb-orange); }
.bb-contactpage__ic svg { width: 100%; height: 100%; }
.bb-contactpage__manage {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--bb-font-display); font-weight: 800; color: var(--bb-green-dark); text-decoration: none;
}
.bb-contactpage__manage:hover { color: var(--bb-orange); }
.bb-contactpage__manage svg { transition: transform .25s ease; }
.bb-contactpage__manage:hover svg { transform: translateX(3px); }
.bb-contactpage__socials { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.bb-contactpage__socials a {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
    background: var(--bb-sand-light); color: var(--bb-green-dark);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bb-contactpage__socials a:hover { background: var(--bb-green-dark); color: #fff; transform: translateY(-2px); }
.bb-contactpage__socials svg { width: 20px; height: 20px; }
.bb-contactpage__map {
    margin-top: clamp(1.5rem, 3vw, 2.5rem); border-radius: clamp(16px, 2vw, 24px);
    overflow: hidden; box-shadow: 0 14px 36px rgba(12,30,24,0.10); line-height: 0;
}
.bb-contactpage__map iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; display: block; }

/* Agenda-archief: zelfde header-opzet als de contactpagina — banner met eyebrow
   + titel + golf. De golf vloeit in de peach agenda-sectie (i.p.v. wit). */
.bb-pagebanner__eyebrow {
    font-family: var(--bb-font-body); font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; font-size: 0.8rem; color: var(--bb-yellow);
    margin: 0 0 0.4rem; text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.bb-pagebanner--agenda .bb-pagebanner__wave-track svg { fill: var(--bb-peach); }
.bb-events--archive { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem); }
/* Strakker archief (/agenda/): compacte illustratie-kolom, verticaal
   gecentreerde inhoud en minder lege ruimte dan het homepage-blok. */
.bb-events--archive .bb-events__grid {
    grid-template-columns: minmax(0, 240px) 1fr;
    gap: clamp(1.75rem, 4vw, 3.25rem);
}
.bb-events--archive .bb-events__image { max-width: 210px; margin-inline: auto; }
.bb-events--archive .bb-events__box { padding: clamp(1.75rem, 3vw, 3rem); }
@media (max-width: 767px) {
    .bb-events--archive .bb-events__grid { grid-template-columns: 1fr; }
    .bb-events--archive .bb-events__image { max-width: 170px; }
}

/* ============================================================
   MOBIELE ACTIEKNOP (FAB) — altijd rechtsonder: boeken of contact
   ============================================================ */
.bb-fab { display: none; }
@media (max-width: 860px) {
    .bb-fab {
        display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
        position: fixed; right: 14px; bottom: 14px; z-index: 940;
    }
    .bb-fab__menu {
        display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
        opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
        transition: opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1);
    }
    .bb-fab.is-open .bb-fab__menu { opacity: 1; transform: none; pointer-events: auto; }
    .bb-fab__item {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.72rem 1.15rem; border-radius: 999px;
        font-family: var(--bb-font-display); font-weight: 800; font-size: 0.95rem;
        text-decoration: none; border: 0; cursor: pointer;
        box-shadow: 0 10px 26px rgba(12,30,24,0.22);
        -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
    }
    .bb-fab__item--book { background: var(--bb-yellow); color: var(--bb-text); }
    .bb-fab__item--book:hover, .bb-fab__item--book:focus { background: var(--bb-yellow); color: var(--bb-text); }
    .bb-fab__item--contact { background: #fff; color: var(--bb-green-dark); }
    .bb-fab__item--contact:hover, .bb-fab__item--contact:focus { background: #fff; color: var(--bb-green-dark); }
    .bb-fab__item:focus { outline: none; }
    .bb-fab__item:focus-visible { outline: 2px solid var(--bb-green-dark); outline-offset: 2px; }
    .bb-fab__item svg { width: 18px; height: 18px; flex-shrink: 0; }
    .bb-fab__toggle {
        align-self: flex-end; width: 58px; height: 58px; border-radius: 50%;
        border: 0; cursor: pointer; display: grid; place-items: center;
        background: var(--bb-green-dark); color: #fff;
        box-shadow: 0 12px 28px rgba(12,30,24,0.32);
        -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
        transition: background .25s ease, transform .25s ease;
    }
    .bb-fab__toggle svg { width: 26px; height: 26px; }
    .bb-fab__toggle:hover, .bb-fab__toggle:focus { background: var(--bb-green-dark); color: #fff; outline: none; }
    .bb-fab__toggle:focus-visible { outline: 2px solid var(--bb-orange); outline-offset: 2px; }
    .bb-fab__toggle:active { transform: scale(0.94); }
    .bb-fab.is-open .bb-fab__toggle,
    .bb-fab.is-open .bb-fab__toggle:hover,
    .bb-fab.is-open .bb-fab__toggle:focus { background: var(--bb-orange); }
    .bb-fab__icon-close { display: none; }
    .bb-fab.is-open .bb-fab__icon-open { display: none; }
    .bb-fab.is-open .bb-fab__icon-close { display: block; }
    @media (prefers-reduced-motion: reduce) { .bb-fab__menu { transition: none; } }
}

/* ===================================================================
 * UNIFORME KNOP-STIJL — één primaire CTA-look sitebreed.
 * Geel -> op hover donkergroen met witte tekst en een lichte lift.
 * Trekt expertkaart-, formulier-, vacature-, download- en
 * pagina-CTA-knoppen exact gelijk (padding/afronding/hover).
 * :focus blijft geel (anti-magenta fix); :focus-visible houdt zijn ring.
 * =================================================================== */
.bb-expertcard__cta,
.bb-contactform__submit,
.bb-vacature__apply,
.bb-prose a.bb-download,
.bb-pagecta__btn--primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--bb-font-display); font-weight: 800; font-size: 1rem; line-height: 1.15;
    padding: 0.8rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--bb-yellow); color: var(--bb-text); text-decoration: none;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.bb-expertcard__cta:hover,
.bb-contactform__submit:hover,
.bb-vacature__apply:hover,
.bb-prose a.bb-download:hover,
.bb-pagecta__btn--primary:hover {
    background: var(--bb-green-dark); color: #fff; transform: translateY(-2px);
}

/* ===================================================================
 * UNIFORME KAART-STIJL — witte content-/prijskaarten gelijk.
 * Zelfde afronding (18px), fijne rand en zachte schaduw voor
 * team-, vacature-, menu- en prijskaarten.
 * =================================================================== */
.bb-pricecard,
.bb-vacature,
.bb-menucard,
.bb-team .bb-team__card {
    border-radius: 18px;
    border: 1px solid rgba(12,30,24,0.08);
    box-shadow: 0 8px 26px rgba(12,30,24,0.10);
}

/* ===================================================================
 * UNIFORME TABEL-STIJL — prose-tabel en vergelijkingstabel gelijk.
 * Zelfde afronding (14px), groene rand en zachte schaduw.
 * =================================================================== */
.bb-prose table:not(.bb-memb__table) { box-shadow: 0 8px 26px rgba(12,30,24,0.08); }
.bb-memb__scroll { border-radius: 14px; box-shadow: 0 8px 26px rgba(12,30,24,0.08); }
.bb-memb__table tbody tr:nth-child(even) td { background: rgba(12,30,24,0.03); }

/* ===================================================================
 * SHOP-ETALAGE — [bb_shop]. Producten per categorie in kaarten.
 * =================================================================== */
.bb-shop { margin: 1.5rem 0; }
.bb-shop__cat { margin: 0 0 2.5rem; }
.bb-shop__cat-title { font-family: var(--bb-font-display); font-weight: 900; color: var(--bb-green-dark); font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 0 0 1.1rem; }
.bb-shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.bb-shopcard { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid rgba(12,30,24,0.08); border-radius: 18px; box-shadow: 0 8px 26px rgba(12,30,24,0.10); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.bb-shopcard:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(12,30,24,0.18); }
.bb-shopcard__media { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--bb-sand-light, #f0ece2); }
.bb-shopcard__media--empty { background: linear-gradient(135deg, var(--bb-green-light, #a8c0b0), var(--bb-green, #6b8d7a)); }
.bb-shopcard__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.2rem 1.3rem; }
.bb-shopcard__name { font-family: var(--bb-font-display); font-weight: 800; font-size: 1.1rem; color: var(--bb-text); margin: 0; line-height: 1.2; }
.bb-shopcard__desc { font-size: 0.92rem; color: var(--bb-green-dark); margin: 0; line-height: 1.45; }
.bb-shopcard__price { margin-top: 0.2rem; font-family: var(--bb-font-display); font-weight: 900; font-size: 1.05rem; color: var(--bb-green-dark); }