/*
Theme Name:        Zorg Om Naasten Lomm
Theme URI:         https://bureaumagneet.nl/
Description:       Maatwerkthema voor Stichting Zorg Om Naasten Lomm (ZON). Afgeleid van Magneet Pure 2.5.62 door Bureau Magneet. Layout via ACF flex content + PHP partials, geen pagebuilder. © Bureau Magneet — niet kopiëren of doorverkopen. Zie LICENSE.txt.
Author:            Bureau Magneet
Author URI:        https://bureaumagneet.nl/
Version:           1.4.4
Requires at least: 6.0
Requires PHP:      8.1
Text Domain:       bm-zon
License:           Proprietary — see LICENSE.txt
License URI:       https://bureaumagneet.nl/

Zorg Om Naasten Lomm — WordPress theme
Copyright © 2026 Bureau Magneet. All rights reserved.

Dit thema is afgeleid van Magneet Pure, proprietary software van Bureau Magneet,
in licentie gegeven en niet verkocht. Herdistributie, doorverkoop of gebruik als
basis voor concurrerende producten is niet toegestaan. Aanpassingen voor eigen
gebruik zijn toegestaan onder de voorwaarden in LICENSE.txt.
*/

/* ═══════════════════════════════════════════════════════════════════════
   :ROOT — DESIGN TOKENS
   Huisstijl Stichting Zorg Om Naasten Lomm.
   Componenten gebruiken overal var(--token), nooit hardcoded waarden.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* ── BRAND KLEUREN ──
       Crimson is de dragende kleur, oranje het accent.
       Contrastcheck: crimson-dark op wit = 6.6:1 (AA voor lopende tekst),
       wit op crimson = 5.0:1 (AA voor tekst vanaf 18px en voor UI). */
    --color-primary: #D10F43;
    --color-primary-hover: #A80B35;
    --color-primary-light: rgba(209, 15, 67, 0.08);

    /* Donkerdere crimson voor links en kleine tekst op wit (AA vanaf 4.5:1) */
    --color-primary-tekst: #A80B35;

    --color-secondary: #AE0B36;
    --color-secondary-hover: #8A0729;

    --color-accent: #D10F43;
    --color-accent-hover: #A80B35;

    /* Oranje: alleen voor focus-ringen, iconen en decoratie, nooit als
       tekstkleur op wit (contrast te laag). */
    --color-oranje: #F18D21;
    --color-oranje-diep: #C86F0C;

    /* ── WARME NEUTRALEN ── */
    --color-white: #ffffff;
    --color-light: #FEF5EC;
    --color-cream: #FEF5EC;
    --color-cream-diep: #FBE2C8;
    --color-cream-zacht: #FEF0E0;
    --color-roze-zacht: #FDECF1;
    --color-roze-tint: #FDE6EC;
    --color-dark: #241A14;

    /* Tekstnuances: koppen op --color-dark, lopende tekst iets zachter */
    --color-ink-soft: #4A403A;
    --color-ink-mute: #6B5C51;

    /* Warmbruin voor eyebrows en labels, haalt AA op wit en op cream */
    --color-label: #9A5A08;
    --color-label-strong: #8A4E05;

    /* Lijnen */
    --color-lijn-warm: #EBD9C5;
    --color-lijn-cool: #F4E7D8;
    --color-lijn-cream: #F0DFCB;

    --color-gray-50:  #FEF9F3;
    --color-gray-100: #FBF3EA;
    --color-gray-200: #F2E4D5;
    --color-gray-300: #EBD9C5;
    --color-gray-400: #C2AE9B;
    --color-gray-500: #6B5C51;
    --color-gray-600: #5A4C42;
    --color-gray-700: #4A403A;
    --color-gray-800: #362A22;
    --color-gray-900: #241A14;

    /* ── FEEDBACK KLEUREN ── */
    --color-success: #1F7A45;
    --color-warning: #B26A05;
    --color-error:   #C0231C;
    --color-info:    #1F5FA8;

    /* ── CALLOUT KLEUREN (Tekst-blok varianten) ── */
    --color-tip-bg:           #F0F8F2;
    --color-tip-border:       #A8D5B8;
    --color-tip-icon:         #1F7A45;

    --color-voorbeeld-bg:     #FDECF1;
    --color-voorbeeld-border: #F3B9CB;
    --color-voorbeeld-icon:   #A80B35;

    --color-waarschuwing-bg:     #FDF0EE;
    --color-waarschuwing-border: #F0B5AE;
    --color-waarschuwing-icon:   #C0231C;

    --color-info-bg:     #EFF4FA;
    --color-info-border: #B6CCE6;
    --color-info-icon:   #1F5FA8;

    --color-protip-bg:     #FEF5EC;
    --color-protip-border: #F7C98C;
    --color-protip-icon:   #C86F0C;

    /* ── TYPOGRAFIE — FONT FAMILIES ──
       Arvo voor koppen (stevige slab, past bij de warme uitstraling),
       Nunito Sans voor lopende tekst (open en goed leesbaar op grote
       lettergrootte, belangrijk voor de doelgroep). */
    --font-primary: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-secondary: 'Arvo', Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;

    /* ── TYPOGRAFIE — FLUID FONT SIZES ──
       Basis staat op 18px in plaats van 16px: de site richt zich op
       oudere bezoekers, dus lopende tekst mag ruimer. */
    --fs-h1:    clamp(2rem,    1.4rem   + 2.6vw,   3.75rem);  /* 32 → 60px */
    --fs-h2:    clamp(1.625rem,1.3rem   + 1.5vw,   2.625rem); /* 26 → 42px */
    --fs-h3:    clamp(1.3125rem,1.15rem + 0.8vw,   1.875rem); /* 21 → 30px */
    --fs-h4:    clamp(1.125rem,1.05rem  + 0.5vw,   1.5rem);   /* 18 → 24px */
    --fs-h5:    clamp(1.0625rem,1rem    + 0.25vw,  1.25rem);  /* 17 → 20px */
    --fs-h6:    0.9375rem;                                    /* 15px (eyebrow) */

    --fs-lead:  clamp(1.125rem, 1.05rem + 0.35vw,  1.3125rem);/* 18 → 21px */
    --fs-body:  1.125rem;                                     /* 18px */
    --fs-small: 1rem;                                         /* 16px */
    --fs-xs:    0.875rem;                                     /* 14px */

    /* ── TYPOGRAFIE — LINE HEIGHT ── */
    --lh-heading: 1.18;
    --lh-tight:   1.4;
    --lh-base:    1.7;
    --lh-loose:   1.8;

    /* ── TYPOGRAFIE — FONT WEIGHT ──
       Arvo kent alleen 400 en 700, Nunito Sans 400/600/700. */
    --fw-light:    400;
    --fw-normal:   400;
    --fw-medium:   600;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    700;

    /* ── TYPOGRAFIE — LETTER SPACING ── */
    --ls-tight:  -0.01em;
    --ls-normal: 0;
    --ls-wide:   0.04em;
    --ls-wider:  0.09em;

    /* ── TYPOGRAFIE — MAX WIDTHS ── */
    --max-prose:  66ch;
    --max-narrow: 60ch;

    /* ── CONTAINER ── */
    --container-max:     1240px;
    --container-padding: clamp(1.25rem, 4vw, 3rem);

    /* ── SPACING — SECTIE-PADDING ── */
    --space-sm: clamp(2.5rem, 2rem   + 2vw, 3.5rem);
    --space-md: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --space-lg: clamp(5rem,   3.5rem + 6vw, 9rem);

    /* ── SPACING — COMPONENT-NIVEAU ── */
    --gap-xs:  0.25rem;
    --gap-sm:  0.5rem;
    --gap-md:  1rem;
    --gap-lg:  1.5rem;
    --gap-xl:  2rem;
    --gap-2xl: 3rem;

    /* ── BORDER RADIUS ── */
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --radius-xl:    24px;
    --radius-2xl:   28px;
    --radius-full:  9999px;

    --radius-button: var(--radius-full);
    --radius-card:   var(--radius-lg);
    --radius-input:  var(--radius-md);
    --radius-image:  var(--radius-lg);
    --radius-modal:  var(--radius-xl);

    /* ── SHADOWS — warm getint in plaats van neutraal zwart ── */
    --shadow-sm: 0 1px 2px rgba(36, 26, 20, 0.06);
    --shadow-md: 0 2px 6px rgba(36, 26, 20, 0.06),
                 0 8px 20px rgba(36, 26, 20, 0.08);
    --shadow-lg: 0 2px 6px rgba(36, 26, 20, 0.06),
                 0 16px 40px rgba(36, 26, 20, 0.12);
    --shadow-xl: 0 4px 12px rgba(36, 26, 20, 0.08),
                 0 24px 56px rgba(36, 26, 20, 0.16);

    --shadow-card:         var(--shadow-lg);
    --shadow-card-hover:   var(--shadow-xl);
    --shadow-button-hover: 0 8px 24px rgba(209, 15, 67, 0.24);

    /* ── EASINGS ── */
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-snappy:  cubic-bezier(0.4, 0, 0.6, 1);

    /* ── TRANSITIONS ── */
    --transition-fast: 150ms var(--easing-default);
    --transition-base: 250ms var(--easing-default);
    --transition-slow: 400ms var(--easing-default);

    /* ── HOVER EFFECTS ── */
    --hover-lift:   translateY(-2px);
    --hover-scale:  scale(1.02);
    --hover-effect: var(--hover-lift);

    /* ── Z-INDEX SCHAAL ── */
    --z-base:    1;
    --z-sticky:  100;
    --z-header:  500;
    --z-overlay: 900;
    --z-modal:   1000;
    --z-toc-fab: 800;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESET & GLOBALS
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

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

html, body {
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Voorkomt dat anchor-links onder sticky header landen */
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-base);
    color: var(--color-dark);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: hidden;
}

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

img {
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a, a:active, a:focus, button {
    outline: none !important;
}

a, button, [role="button"], [tabindex]:not([tabindex="-1"]),
input[type="submit"], input[type="button"] {
    cursor: pointer !important;
}

button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

* {
    touch-action: manipulation;
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Focus-visible voor keyboard navigatie */
:focus-visible {
    outline: 3px solid var(--color-oranje) !important;
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
    border: 3px solid var(--color-gray-100);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAFIE — HEADINGS
   ═══════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--color-dark);
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    letter-spacing: var(--ls-tight);
}

h2 {
    font-size: var(--fs-h2);
    letter-spacing: var(--ls-tight);
}

h3 {
    font-size: var(--fs-h3);
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
}

h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
}

h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-gray-600);
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAFIE — BODY TEXT
   ═══════════════════════════════════════════════════════════════════════ */
p {
    margin: 0 0 1em;
    line-height: var(--lh-base);
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

/* Lead paragraaf */
.lead, p.lead, .bm-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    max-width: var(--max-narrow);
    margin-bottom: 1.25em;
}

/* Small / fine print */
small, .small {
    font-size: var(--fs-small);
    line-height: var(--lh-base);
    color: var(--color-gray-600);
}

/* Links in lopende tekst */
p a, li a, td a, blockquote a,
.bm-prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast),
                text-decoration-color var(--transition-fast),
                text-decoration-thickness var(--transition-fast);
}

p a:hover, li a:hover, td a:hover, blockquote a:hover,
.bm-prose a:hover {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* Strong / em */
strong, b { font-weight: var(--fw-semibold); }
em, i     { font-style: italic; }

/* Code (inline) */
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-gray-100);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--color-dark);
}

/* Code (block) */
pre {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.6;
    background: var(--color-gray-900);
    color: var(--color-gray-100);
    padding: var(--gap-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 1.5em 0;
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Blockquote */
blockquote {
    margin: 1.5em 0;
    padding: 1.25em 1.5em;
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: var(--lh-tight);
    color: var(--color-gray-800);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p { margin: 0; }
blockquote p + p { margin-top: 0.75em; }

blockquote cite {
    display: block;
    margin-top: 0.75em;
    font-size: var(--fs-small);
    font-style: normal;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
}

blockquote cite::before { content: "— "; }

/* Lijsten */
ul, ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
    line-height: var(--lh-base);
}

ul li, ol li {
    margin-bottom: 0.4em;
}

ul li::marker { color: var(--color-gray-500); }
ol li::marker { color: var(--color-gray-600); font-weight: var(--fw-semibold); }

ul ul, ol ol, ul ol, ol ul {
    margin: 0.4em 0 0;
}

/* Horizontal rule */
hr {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: 2.5em 0;
}

/* Tabel */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: var(--fs-small);
}

th, td {
    padding: 0.75em 1em;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

th {
    font-weight: var(--fw-semibold);
    background: var(--color-gray-50);
    color: var(--color-dark);
}

/* Figure */
figure {
    margin: 1.5em 0;
}

figcaption {
    margin-top: 0.5em;
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    text-align: center;
}

/* Sub / sup */
sub, sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Mark */
mark {
    background: rgba(255, 235, 59, 0.4);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
    color: inherit;
}

/* Abbr */
abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAFIE — HELPERS
   ═══════════════════════════════════════════════════════════════════════ */
.bm-prose {
    max-width: var(--max-prose);
    line-height: var(--lh-base);
}

.bm-prose h2 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.bm-prose h3, .bm-prose h4 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

.bm-prose > *:first-child { margin-top: 0; }
.bm-prose > *:last-child  { margin-bottom: 0; }

.bm-t-center { text-align: center; }
.bm-t-right  { text-align: right; }
/* v2.3.1: smal blok zit altijd auto-gecentreerd op de pagina (was: alleen bij .bm-t-center) */
.bm-t-narrow {
    max-width: var(--max-narrow);
    margin-inline: auto;
}

/* Faq-list ook auto-gecentreerd op smal */
.bm-faq-list.bm-t-narrow {
    margin-inline: auto;
}

/* Gecentreerd blok: tekst-blok zelf gecentreerd, regels blijven links uitgelijnd
   v2.3.1 — DEPRECATED, blijft als alias zodat oude HTML niet breekt */
.bm-t-centered-block {
    margin-inline: auto;
    text-align: left;
}

/* Eyebrow / section label */
.bm-eyebrow {
    display: inline-block;
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-gray-600);
    margin-bottom: 0.5em;
}


/* ═══════════════════════════════════════════════════════════════════════
   SPACING UTILITIES — Bovenruimte / Onderruimte
   ═══════════════════════════════════════════════════════════════════════ */
.ge-top { padding-top: 0; }
.k-top  { padding-top: var(--space-sm); }
.m-top  { padding-top: var(--space-md); }
.gr-top { padding-top: var(--space-lg); }

.ge-bottom { padding-bottom: 0; }
.k-bottom  { padding-bottom: var(--space-sm); }
.m-bottom  { padding-bottom: var(--space-md); }
.gr-bottom { padding-bottom: var(--space-lg); }


/* ═══════════════════════════════════════════════════════════════════════
   ACHTERGRONDKLEUR UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */
.bg-standaard {
    background: var(--color-white);
    color: var(--color-dark);
}

.bg-licht {
    background: var(--color-light);
    color: var(--color-dark);
}

.bg-cream {
    background: var(--color-cream);
    color: var(--color-dark);
}

.bg-donker {
    background: var(--color-dark);
    color: var(--color-white);
}

.bg-donker h1, .bg-donker h2, .bg-donker h3,
.bg-donker h4, .bg-donker h5 {
    color: var(--color-white);
}

.bg-donker h6 {
    color: rgba(255, 255, 255, 0.7);
}

.bg-donker p, .bg-donker li {
    color: rgba(255, 255, 255, 0.85);
}

.bg-donker small,
.bg-donker .small {
    color: rgba(255, 255, 255, 0.6);
}

.bg-donker p a, .bg-donker li a {
    color: var(--color-white);
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.bg-donker p a:hover, .bg-donker li a:hover {
    text-decoration-color: var(--color-white);
}

.bg-accent {
    background: var(--color-accent);
    color: var(--color-white);
}

.bg-accent h1, .bg-accent h2, .bg-accent h3,
.bg-accent h4, .bg-accent h5, .bg-accent h6 {
    color: var(--color-white);
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTAINER / BREEDTE
   ═══════════════════════════════════════════════════════════════════════ */
.breedte-normaal {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.breedte-breed {
    width: 100%;
    max-width: calc(var(--container-max) + 200px);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.breedte-volledig {
    width: 100%;
    padding-inline: 0;
}

.breedte-smal {
    width: 100%;
    max-width: 690px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* ═══════════════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Grid systemen — v2.1.0 — exact aantal kolommen
   Was: auto-fill, minmax(390px) → schermbreedte bepaalde kolommen, niet de keuze.
   Nu: vaste kolomtelling op desktop, adaptief op tablet en mobiel.
   ═══════════════════════════════════════════════════════════════════════ */
.twee-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.drie-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.vier-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Tablet — alle multi-kolom grids naar 2 kolommen */
@media (max-width: 1024px) {
    .drie-items,
    .vier-items {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS / CTA's
   ═══════════════════════════════════════════════════════════════════════ */
.cta-container {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    align-items: center;
}

.cta-space {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* Basis button styling (gedeeld) */
/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — pri / sec / ter
   ═══════════════════════════════════════════════════════════════════ */
.pri-cta, .sec-cta, .ter-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: 0.875em 1.5em;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-button);
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
    min-height: 44px;
    border: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

.pri-cta .button-text,
.sec-cta .button-text,
.ter-cta .button-text {
    text-decoration: none !important;
    color: inherit;
    border-bottom: 0;
}

a.pri-cta, a.sec-cta, a.ter-cta {
    text-decoration: none !important;
}

.pri-cta .button-icon,
.sec-cta .button-icon,
.ter-cta .button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
}

.pri-cta:hover .button-icon,
.sec-cta:hover .button-icon,
.ter-cta:hover .button-icon {
    transform: translateX(4px);
}

/* v2.5.36: download-icoon — geen horizontale beweging op container, alleen
   het pijltje (.bm-icon-part--download-arrow) gaat naar BENEDEN bij hover.
   Tray (.bm-icon-part--download-tray) blijft statisch. */
.pri-cta:hover .button-icon:has(.bm-icon--download-simple),
.sec-cta:hover .button-icon:has(.bm-icon--download-simple),
.ter-cta:hover .button-icon:has(.bm-icon--download-simple) {
    transform: none;
}
.bm-icon--download-simple .bm-icon-part--download-arrow {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s ease;
}
.pri-cta:hover .bm-icon--download-simple .bm-icon-part--download-arrow,
.sec-cta:hover .bm-icon--download-simple .bm-icon-part--download-arrow,
.ter-cta:hover .bm-icon--download-simple .bm-icon-part--download-arrow {
    /* v2.5.37: van 4px → 7px voor duidelijker drop-effect */
    transform: translateY(7px);
}

.pri-cta:active, .sec-cta:active, .ter-cta:active {
    transform: scale(0.97);
}

.pri-cta:focus-visible,
.sec-cta:focus-visible,
.ter-cta:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Primair — gevuld, witte tekst (defensief tegen p a styling) */
.pri-cta,
a.pri-cta,
.pri-cta:visited,
a.pri-cta:visited {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.pri-cta:hover,
a.pri-cta:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pri-cta .button-text,
.pri-cta .button-icon {
    color: var(--color-white);
}

/* Secundair — outline */
.sec-cta,
a.sec-cta,
.sec-cta:visited,
a.sec-cta:visited {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.sec-cta:hover,
a.sec-cta:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.sec-cta:hover .button-text,
.sec-cta:hover .button-icon {
    color: var(--color-white);
}

/* Tertiair — link met arrow */
.ter-cta {
    padding: 0.5em 0.25em;
    min-height: auto;
    background: transparent;
    color: var(--color-primary);
    border: 0;
    border-radius: 0;
    gap: 6px;
    font-weight: var(--fw-semibold);
}

.ter-cta:hover {
    color: var(--color-primary-hover);
    background: transparent;
    transform: none;
}

.ter-cta:hover .button-icon {
    transform: translateX(6px);
}

.ter-cta:active {
    transform: none;
}

/* Donkere/accent achtergrond varianten */
.bg-donker .pri-cta, .bg-accent .pri-cta {
    background: var(--color-white);
    color: var(--color-dark);
}

.bg-donker .pri-cta:hover, .bg-accent .pri-cta:hover {
    background: var(--color-gray-100);
    color: var(--color-dark);
}

.bg-donker .sec-cta, .bg-accent .sec-cta {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.bg-donker .sec-cta:hover, .bg-accent .sec-cta:hover {
    background: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
}

.bg-donker .ter-cta, .bg-accent .ter-cta {
    color: var(--color-white);
}

.bg-donker .ter-cta:hover, .bg-accent .ter-cta:hover {
    color: var(--color-gray-100);
}


/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY HELPERS
   ═══════════════════════════════════════════════════════════════════════ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-content link */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--z-modal);
    padding: 1em 1.5em;
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET / MOBILE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .twee-items,
    .drie-items,
    .vier-items {
        grid-template-columns: 1fr;
    }

    blockquote {
        padding: 1em 1.25em;
    }

    /* v2.5.45: dienst-grid sowieso 1 kolom op mobiel.
       Generic selectors hierboven werken al, maar specifieke
       override voor het geval bm-diensten-grid extra specificity heeft. */
    .bm-diensten-grid.twee-items,
    .bm-diensten-grid.drie-items,
    .bm-diensten-grid.vier-items {
        grid-template-columns: 1fr;
    }

    /* v2.5.45/47: quote op mobiel volledig in beeld (full-width).
       v2.5.47: text-align/footer-center reverted — tekst blijft links zoals voorheen,
       alleen de breedte-limit is weg zodat hij de hele viewport gebruikt.
       v2.5.48: voor de 'standaard' variant ook tekst en footer links op mobiel
       — gelijktrekken met de 'met_portret' layout. */
    .s-bm-quote .c-bm-quote.breedte-smal,
    .s-bm-quote .c-bm-quote.breedte-normaal {
        max-width: none;
        padding-inline: clamp(1rem, 4vw, 1.5rem);
    }
    .s-bm-quote--standaard .c-bm-quote,
    .s-bm-quote--standaard .bm-quote-content,
    .s-bm-quote--standaard .bm-quote-content.bm-t-center,
    .s-bm-quote--standaard .bm-quote-tekst {
        text-align: left;
    }
    .s-bm-quote--standaard .bm-quote-footer {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .cta-container {
        flex-direction: column;
        align-items: stretch;
    }

    /* v2.5.45: bij centered hero ook de CTA-container centeren op mobiel.
       Default stretch geeft links-uitlijning voor ter-cta (inline element). */
    .s-bm-hero--align-midden .cta-container,
    .bm-hero-preset--centered_groot .cta-container {
        align-items: center;
    }

    .pri-cta, .sec-cta {
        width: 100%;
        justify-content: center;
    }

    .ter-cta {
        align-self: flex-start;
    }

    /* v2.5.45: in een centered hero blijft ter-cta anders links staan
       omdat align-self: flex-start hierboven de container-centering overrult. */
    .s-bm-hero--align-midden .ter-cta,
    .bm-hero-preset--centered_groot .ter-cta {
        align-self: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    p, blockquote, ul, ol {
        orphans: 3;
        widows: 3;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .pri-cta, .sec-cta, .ter-cta,
    nav, header, footer,
    .bm-topbar, .bm-popup {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   COMPONENT STYLES
   Worden in volgende fases per blok toegevoegd.
   Conventie: .s-bm-[blok] (section), .c-bm-[blok] (container),
              .bm-[blok]-[element] (children)
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   FASE 4 — COMPONENT STYLES
   Hero, Tekst, Tekst Combinatie, CTA, Logo's
   ═══════════════════════════════════════════════════════════════════════ */


/* ── HEADER (uit Fase 1 templates) ─────────────────────────────────── */
.bm-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

body.scrolled .bm-header {
    box-shadow: var(--shadow-md);
}

/* Wanneer de mobile overlay open is, header boven modal — hamburger blijft klikbaar/zichtbaar
   v2.5.25: position: fixed (ipv sticky) zodat de header NIET meeschuift met
   de body's `top: -savedScrollY` offset uit de scroll-lock van v2.5.24.
   Sticky-positie respecteert de body coordinate space, fixed daarentegen is
   altijd t.o.v. de viewport. */
body.overlay-open .bm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-modal) + 10);
    background: var(--color-white);
    border-bottom-color: transparent;
    box-shadow: none;
}
/* v2.5.35: bij ingelogde gebruikers heeft body een 32px (resp. 46px) top
   margin door de WP admin-bar. Door `position: fixed; top: 0` bij overlay-open
   schoot de header die marge omhoog. Compenseren met top-offset. */
body.admin-bar.overlay-open .bm-header {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar.overlay-open .bm-header {
        top: 46px;
    }
}

/* v2.5.26: smooth fade van CTA + nav wanneer overlay opent.
   Default state (overlay dicht): zichtbaar, opacity 1.
   overlay open: opacity 0, na transition pointer-events uit.
   visibility blijft visible zodat de fade-out zichtbaar is —
   pointer-events:none zorgt dat onzichtbare knoppen niet meer klikbaar zijn. */
.bm-header-actions .pri-cta,
.bm-header-actions .sec-cta,
.bm-header-nav {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
body.overlay-open .bm-header-nav,
body.overlay-open .bm-header-actions .pri-cta,
body.overlay-open .bm-header-actions .sec-cta {
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
}

.bm-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    min-height: 72px;
    padding-block: 0.75rem;
}

.bm-header-logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.bm-header-logo img {
    max-height: 48px;
    width: auto;
}

.bm-logo-licht { display: none; }
body.has-dark-hero .bm-header:not(.scrolled .bm-header) .bm-logo-licht,
body.has-dark-hero:not(.scrolled) .bm-logo-licht { display: block; }
body.has-dark-hero .bm-header:not(.scrolled .bm-header) .bm-logo-donker,
body.has-dark-hero:not(.scrolled) .bm-logo-donker { display: none; }

.bm-header-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Menu rechts uitgelijnd, niet center */
}

.bm-header-menu {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bm-header-menu a {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-weight: var(--fw-medium);
    text-decoration: none;
    color: var(--color-dark);
    position: relative;
    transition: color var(--transition-fast);
}

/* Hover/active: nette underline ipv grijs vlak */
.bm-header-menu a::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.bm-header-menu a:hover::after,
.bm-header-menu .current-menu-item > a::after,
.bm-header-menu .current-menu-ancestor > a::after {
    transform: scaleX(1);
}

.bm-header-menu a:hover,
.bm-header-menu .current-menu-item > a {
    color: var(--color-primary);
}

.bm-header-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    flex-shrink: 0;
}

.bm-hamburger-toggle {
    position: relative;
    z-index: calc(var(--z-modal) + 10);  /* Boven de overlay zodat hij blijft sluiten */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* v2.5.45: 2-streepjes (equals) style — meer vierkant, minder druk.
       Toggle 44×44 (a11y minimum), bars 22px breed met 8px gap = 18×22 content. */
    gap: 8px;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.bm-hamburger-toggle:hover {
    background: var(--color-gray-100);
}

.bm-hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-dark);
    border-radius: 1px;
    transform-origin: center center;
    transition: transform var(--transition-base), opacity var(--transition-fast),
                background var(--transition-fast);
}

/* v2.5.45: middle bar verbergen → 2 streepjes look ("equals" icoon) */
.bm-hamburger-bar:nth-child(2) {
    display: none;
}

/* ── Hamburger animeert naar X bij is-active ── */
/* v2.5.45: 2 bars naar X, gap is 8px dus translate ±5px (helft van bar+gap) */
.bm-hamburger-toggle.is-active .bm-hamburger-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.bm-hamburger-toggle.is-active .bm-hamburger-bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* Bij open overlay: hover-bg sterker en optioneel kleur switch */
.bm-hamburger-toggle.is-active:hover {
    background: var(--color-gray-100);
}

/* Hide hamburger op desktop bij menu-only layout */
.bm-header--menu .bm-hamburger-toggle {
    display: none;
}

/* Hide menu op mobile */
@media (max-width: 1023px) {
    /* v2.5.23: zwaardere selector om regel verderop in CSS te overrulen
       (`.bm-header-nav { display: flex }` op regel ~6889 zonder media query
       verliep eerder van deze rule door later-in-CSS positionering) */
    .bm-header .bm-header-nav,
    .bm-header-nav {
        display: none !important;
    }
    /* v2.5.23: hamburger op mobiel zichtbaar voor ALLE layouts (was: alleen .bm-header--menu) */
    .bm-header .bm-hamburger-toggle,
    .bm-header--menu .bm-hamburger-toggle {
        display: flex;
    }
    .bm-header-cta--desktop-only {
        display: none;
    }
}

/* ── MOBILE OVERLAY ─────────────────────────────────────────────────── */
.bm-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);  /* Lager dan hamburger zodat hij blijft sluiten */
    background: var(--color-white);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    visibility: hidden;
}

/* v2.5.30: WP admin-bar duwt body 32/46px omlaag — overlay (position:fixed)
   negeert dat. Compenseren met top: var(--wp-admin-bar-height) zodat de overlay
   ONDER de admin bar staat ipv erover/eronder. */
body.admin-bar .bm-mobile-overlay {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .bm-mobile-overlay {
        top: 46px;
    }
}

.bm-mobile-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* v2.5.24: harde body-scroll lock wanneer overlay open is.
   - overflow:hidden op html EN body — sommige browsers respecteren alleen html
   - position:fixed + width:100% op body — werkt op iOS Safari waar overflow:hidden
     alleen niet voldoende is (de body blijft daar scrollbaar)
   - top wordt door JS gezet op -savedScrollY zodat de pagina visueel
     op dezelfde plek blijft staan (anders springt 'm naar top) */
html.overlay-open,
body.overlay-open {
    overflow: hidden !important;
}
body.overlay-open {
    position: fixed;
    inset-inline: 0;
    width: 100%;
}

.bm-mobile-overlay-inner {
    /* Match site container — zelfde max-width en padding als breedte-normaal */
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    min-height: 100vh;
}

/* De overlay-header (logo) wordt verborgen — de site-header blijft boven de overlay
   staan dankzij de z-index boost in body.overlay-open. Dat voorkomt dubbel logo. */
.bm-mobile-overlay-header {
    display: none;
}

.bm-mobile-overlay-logo {
    display: inline-flex;
    align-items: center;
}

.bm-mobile-overlay-logo img {
    max-height: 48px;
    width: auto;
}

/* Top padding op overlay inner zodat content NIET onder de site-header valt */
.bm-mobile-overlay-inner {
    padding-top: calc(72px + 1.5rem); /* 72px = header min-height */
}

/* Hamburger heeft hoge z-index — zorg dat hij in beeld blijft op overlay */
/* (close button is verwijderd — hamburger doet zelf het sluiten via .is-active animatie) */

.bm-mobile-overlay-nav .bm-mobile-menu,
.bm-mobile-overlay-extra .bm-mobile-extra-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bm-mobile-overlay-nav .bm-mobile-menu a {
    display: block;
    padding: 1rem 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--color-gray-100);
    text-decoration: none;
}

.bm-mobile-overlay-extra .bm-mobile-extra-menu a {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-gray-700);
    text-decoration: none;
}

.bm-mobile-overlay-cta .pri-cta {
    width: 100%;
    justify-content: center;
}

.bm-mobile-overlay-contact {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: var(--gap-lg) 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.bm-mobile-contact-link {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    color: var(--color-gray-700);
    text-decoration: none;
}

.bm-mobile-contact-link svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.bm-mobile-overlay-social {
    display: flex;
    gap: var(--gap-md);
}

.bm-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    transition: background var(--transition-fast), color var(--transition-fast);
    /* v2.1.3: baseline font-styling voor letter-icons (LinkedIn/Facebook).
       Wordt door ::before overgenomen voor consistente weight. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1;
}

.bm-social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Social icoon styling — v2.1.3 uniform visueel gewicht
   Alle iconen vullen ~50% van de 40px circle (≈ 20px), zodat letters en
   SVGs visueel even sterk lijken. */
.bm-social-link::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Letter-style: LinkedIn en Facebook (klant prefereerde dit boven SVG) */
.bm-social-linkedin::before {
    content: 'in';
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.bm-social-facebook::before {
    content: 'f';
    font-size: 18px;
    font-weight: 800;
}

/* SVG mask: Instagram, X/Twitter, YouTube, TikTok */
.bm-social-instagram::before,
.bm-social-twitter::before,
.bm-social-youtube::before,
.bm-social-tiktok::before {
    content: '';
    width: 19px;
    height: 19px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    display: block;
}
.bm-social-instagram::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.7 4.92 4.92.06 1.27.07 1.65.07 4.85 0 3.21-.01 3.58-.07 4.85-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07-3.2 0-3.58-.01-4.85-.07-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85 0-3.2.01-3.58.07-4.85.15-3.23 1.66-4.77 4.92-4.92 1.27-.06 1.65-.07 4.85-.07zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98 1.28.06 1.69.07 4.95.07s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95C23.74 2.69 21.31.27 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zm6.41-11.84a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.7 4.92 4.92.06 1.27.07 1.65.07 4.85 0 3.21-.01 3.58-.07 4.85-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07-3.2 0-3.58-.01-4.85-.07-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85 0-3.2.01-3.58.07-4.85.15-3.23 1.66-4.77 4.92-4.92 1.27-.06 1.65-.07 4.85-.07zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98 1.28.06 1.69.07 4.95.07s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95C23.74 2.69 21.31.27 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zm6.41-11.84a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E");
}
.bm-social-twitter::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/%3E%3C/svg%3E");
}
.bm-social-youtube::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M23.5 6.19a3.02 3.02 0 00-2.12-2.14C19.51 3.55 12 3.55 12 3.55s-7.51 0-9.38.5A3.02 3.02 0 00.5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81c.34 1.04 1.13 1.84 2.12 2.14 1.87.5 9.38.5 9.38.5s7.51 0 9.38-.5a3.02 3.02 0 002.12-2.14c.5-1.88.5-5.81.5-5.81s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M23.5 6.19a3.02 3.02 0 00-2.12-2.14C19.51 3.55 12 3.55 12 3.55s-7.51 0-9.38.5A3.02 3.02 0 00.5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81c.34 1.04 1.13 1.84 2.12 2.14 1.87.5 9.38.5 9.38.5s7.51 0 9.38-.5a3.02 3.02 0 002.12-2.14c.5-1.88.5-5.81.5-5.81s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'/%3E%3C/svg%3E");
}
.bm-social-tiktok::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.53.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.53.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.bm-mobile-overlay-langs {
    display: flex;
    gap: var(--gap-sm);
}

.bm-lang-link {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

.bm-lang-link.is-current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.bm-mobile-overlay-legal .bm-legal-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
}

.bm-mobile-overlay-legal a {
    color: var(--color-gray-500);
    text-decoration: none;
    font-size: var(--fs-small);
}


/* ── TOPBAR ─────────────────────────────────────────────────────────── */
.bm-topbar {
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--fs-small);
}

.bm-topbar--accent { background: var(--color-accent); color: var(--color-white); }
.bm-topbar--donker { background: var(--color-dark); color: var(--color-white); }
.bm-topbar--licht { background: var(--color-light); color: var(--color-dark); }

.bm-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    padding-block: 0.5rem;
    text-align: center;
}

.bm-topbar-content p {
    margin: 0;
}

.bm-topbar-cta {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--fw-semibold);
}

.bm-topbar-close {
    margin-left: auto;
    padding: 4px;
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.bm-topbar-close:hover {
    opacity: 1;
}


/* ── FOOTER (uit Fase 1) ───────────────────────────────────────────── */
.bm-footer {
    padding-block: var(--space-md) var(--space-sm);
}

.bm-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-2xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .bm-footer-grid--kolommen-1 { grid-template-columns: 2fr 1fr; }
    .bm-footer-grid--kolommen-2 { grid-template-columns: 2fr 1fr 1fr; }
    .bm-footer-grid--kolommen-3 { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .bm-footer-grid--kolommen-4 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }

    /* v2.5.46: contact-kolom verschijnt automatisch bij < 3 menu's. Extra
       grid-kolom zodat hij ERNAAST de menu's komt te staan ipv eronder. */
    .bm-footer-grid--kolommen-1.bm-footer-grid--has-contact {
        grid-template-columns: 2fr 1fr 1fr;       /* brand + 1 menu + contact */
    }
    .bm-footer-grid--kolommen-2.bm-footer-grid--has-contact {
        grid-template-columns: 2fr 1fr 1fr 1fr;   /* brand + 2 menu's + contact */
    }
}

.bm-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.bm-footer-logo img {
    max-height: 48px;
    width: auto;
}

.bm-footer-intro {
    max-width: 32ch;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-small);
}

.bm-footer-social {
    display: flex;
    gap: var(--gap-sm);
}

.bm-footer-social .bm-social-link {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.bm-footer-social .bm-social-link:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

.bm-footer-kolom-titel {
    color: var(--color-white);
    margin-bottom: var(--gap-md);
}

.bm-footer-menu,
.bm-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-footer-menu a,
.bm-footer-contact a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: var(--fs-small);
    transition: color var(--transition-fast);
}

.bm-footer-menu a:hover,
.bm-footer-contact a:hover {
    color: var(--color-white);
}

.bm-footer-adres {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--fs-small);
}

.bm-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
    padding-top: var(--gap-lg);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--fs-small);
}

.bm-footer-legal .bm-legal-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bm-footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.bm-footer-legal a:hover {
    color: var(--color-white);
}


/* ── LIGHTBOX ───────────────────────────────────────────────────────── */
.bm-lightbox {
    position: fixed;
    inset: 0;
    /* v2.1.2: z-index ophogen — moet boven sticky header (incl. de
       overlay-open boost van calc(--z-modal + 10) = 1010) staan */
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

/* v2.1.2: scroll lock + verberg sticky header tijdens lightbox-open
   (eigen class — overlay-open is nu alleen voor mobile menu) */
body.lightbox-open {
    overflow: hidden;
}
body.lightbox-open .bm-header {
    visibility: hidden;
}

.bm-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.bm-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.bm-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.bm-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
}


/* ── POPUP — native <dialog> element (v2.0.35) ─────────────────────── */
.bm-popup {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(500px, calc(100% - 2rem));
    width: 100%;
    max-height: 90vh;
    overflow: visible;
    margin: auto;
}

.bm-popup::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.bm-popup[open] .bm-popup-modal {
    transform: translateY(0) scale(1);
}

.bm-popup-modal {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-modal);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px) scale(0.96);
    transition: transform var(--transition-base);
}

.bm-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: var(--color-white);
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.bm-popup-image img {
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
}

.bm-popup-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.bm-popup-titel {
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   HERO — alle 6 varianten
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-hero {
    position: relative;
    overflow: hidden;
}

.s-bm-hero--has-media {
    color: var(--color-white);
}

.s-bm-hero--has-media h1,
.s-bm-hero--has-media h2 {
    color: var(--color-white);
}

.bm-hero-tekst-donker {
    color: var(--color-dark);
}

.bm-hero-tekst-donker h1,
.bm-hero-tekst-donker h2 {
    color: var(--color-dark);
}

/* v2.5.9: tekstkleur Licht — werkt nu op ALLE elementen (was alleen h1) */
.bm-hero-tekst-licht,
.bm-hero-tekst-licht h1,
.bm-hero-tekst-licht h2,
.bm-hero-tekst-licht h3,
.bm-hero-tekst-licht .bm-eyebrow,
.bm-hero-tekst-licht .lead,
.bm-hero-tekst-licht p,
.bm-hero-tekst-licht .bm-btn--tertiair,
.bm-hero-tekst-licht .bm-breadcrumbs,
.bm-hero-tekst-licht .bm-breadcrumbs a {
    color: var(--color-white);
}
.bm-hero-tekst-licht .bm-eyebrow {
    border-color: var(--color-white);
}

/* v2.5.9: eyebrow neemt geen volle breedte meer — alleen breedte van content */
.bm-eyebrow {
    max-width: fit-content;
}

/* v2.5.10/22: eyebrow met volle breedte (optie 'vol')
   Selectors gebruiken .bm-eyebrow.bm-eyebrow--vol (twee classes) zodat
   ze de andere `.bm-eyebrow {display: inline-block}` rules verderop in
   het CSS bestand overrulen via specificity. */
.bm-eyebrow.bm-eyebrow--vol {
    display: block;
    width: 100%;
    max-width: none;
}

/* v2.5.10/12: eyebrow gecentreerd in centered hero contexts
   We forceren display:block + width:fit-content zodat margin:auto sowieso centreert,
   ongeacht of parent text-align:center heeft */
.bm-hero-preset--centered_groot .bm-eyebrow,
.s-bm-hero--align-midden .bm-eyebrow,
.s-bm-hero--bevestiging .bm-eyebrow {
    display: block;
    width: fit-content;
    margin-inline: auto;
}
/* v2.5.22: override voor centered + vol (specificiteit 0,3,0 zodat alles wijkt) */
.bm-hero-preset--centered_groot .bm-eyebrow.bm-eyebrow--vol,
.s-bm-hero--align-midden .bm-eyebrow.bm-eyebrow--vol,
.s-bm-hero--bevestiging .bm-eyebrow.bm-eyebrow--vol {
    display: block;
    width: 100%;
    max-width: none;
    text-align: center;
}

.bm-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bm-hero-bg-img,
.bm-hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* v2.2.1: YouTube/Vimeo iframe als achtergrond — schaal zodat 16:9 bedekt wordt
   met een minimum aspect ratio (vergelijkbaar met object-fit:cover voor video) */
.bm-hero-bg--video-url {
    overflow: hidden;
    pointer-events: none; /* iframe niet interactief */
}
.bm-hero-bg-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
/* v2.5.31/32: solid backdrop op de hero-bg div zodat tijdens iframe-load
   de hero NIET zwart-vlak met YouTube-frame is, maar gevuld met de overlay-kleur. */
.bm-hero-bg--video-url {
    background: var(--color-dark, #111);
}

/* v2.5.43: facade poster — toont YouTube thumbnail tot user interactie de
   echte iframe injecteert (zie bm-main.js initHeroVideoFacade). Bespaart
   1.5 MB JS + 1+ seconden CPU-tijd uit het LCP-critical-path. */
.bm-hero-bg-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.8s ease;
}

.bm-hero-overlay {
    position: absolute;
    inset: 0;
}

.c-bm-hero {
    position: relative;
    z-index: 1;
}

.bm-hero-content {
    max-width: 60ch;
}

.bm-hero-content--center {
    margin-inline: auto;
    text-align: center;
}

/* Bedankt-icoon in bevestigings-hero — gecentreerd uitgelijnd */
.bm-hero-icoon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.bm-hero-icoon svg {
    width: clamp(64px, 8vw, 96px);
    height: auto;
}

.bm-hero-content--narrow {
    max-width: var(--max-narrow);
}

/* ── Pagina hero variant: compact, links uitgelijnd, eyebrow prominent ── */
.s-bm-hero--pagina {
    /* Compactere hero — kleinere padding */
    padding-block: clamp(2rem, 4vw, 4rem);
}

/* Split presets krijgen iets meer padding voor visuele balans naast afbeelding */
.s-bm-hero--pagina:has(.bm-hero-preset--split_rechts),
.s-bm-hero--pagina:has(.bm-hero-preset--split_links) {
    padding-block: clamp(3rem, 6vw, 6rem);
}

.s-bm-hero--pagina:not(.bg-licht):not(.bg-donker):not(.bg-accent) {
    /* Default lichtgrijze achtergrond zodat het visueel een page-header is */
    background: var(--color-light);
}

.s-bm-hero--pagina .bm-hero-content--page {
    text-align: left;
}

/* Per pagina-preset: passend max-width
   - centered_groot: gecentreerde hero met max-width 920px
   - split_rechts / split_links: volledige container breedte
   - minimal: smal (prose breedte)
   - achtergrond_full: volledige container breedte */
.s-bm-hero--pagina .bm-hero-preset--centered_groot {
    /* v2.5.33: gebruiker-gegeven fix — flex column + align-items center */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
}
/* v2.5.9: cta-container is de echte buttons-wrapper (was: .bm-buttons fout) */
.s-bm-hero--pagina .bm-hero-preset--centered_groot .cta-container,
.s-bm-hero--pagina .bm-hero-preset--centered_groot .bm-buttons,
.s-bm-hero--pagina .bm-hero-preset--centered_groot .bm-buttons-group {
    justify-content: center;
}
.s-bm-hero--pagina .bm-hero-preset--split_rechts,
.s-bm-hero--pagina .bm-hero-preset--split_links,
.s-bm-hero--pagina .bm-hero-preset--achtergrond_full {
    max-width: none;
    width: 100%;
}
.s-bm-hero--pagina .bm-hero-preset--minimal {
    max-width: var(--max-prose);
}

.s-bm-hero--pagina h1 {
    /* Iets kleinere H1 dan standaard hero */
    font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem);
}

.s-bm-hero--pagina .bm-eyebrow {
    margin-bottom: 0.5em;
}

/* ── Standaard hero variant: groot en royaal ── */
/* v2.2.0: hero varianten herstructureerd
   - centered_groot (was: standaard) — homepage/landing groot
   - split_rechts (was: met_afbeelding) — H1+tekst+buttons + afbeelding rechts
   - minimal — compact, links uitgelijnd, kleine H1
   - dienst / vacature — auto CPT data
   Aliases voor backward compat zijn aan einde gedefinieerd */
.s-bm-hero--centered_groot {
    /* Royale padding voor homepage/landing impact */
    padding-block: clamp(3rem, 6vw, 6rem);
}

.s-bm-hero--centered_groot h1 {
    /* v2.5.23: lagere min op mobiel — 32px ipv 32px (was 32 default) */
    font-size: clamp(1.875rem, 1.25rem + 3vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.s-bm-hero--centered_groot .lead {
    font-size: var(--fs-lead);
    max-width: 60ch;
}

/* Backward compat: oude class-naam mapping (voor pagina's die nog niet
   ge-resaved zijn — server-side mapping doet de variant-string al) */
.s-bm-hero--standaard {
    padding-block: clamp(3rem, 6vw, 6rem);
}
.s-bm-hero--standaard h1 {
    font-size: clamp(2rem, 1.5rem + 3vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.s-bm-hero--standaard .lead {
    font-size: var(--fs-lead);
    max-width: 60ch;
}

/* ── Uitlijning voor centered_groot / met_video / bevestiging / dienst / vacature ── */
.s-bm-hero--align-midden .bm-hero-content {
    margin-inline: auto;
    text-align: center;
}

.s-bm-hero--align-midden .cta-container,
.s-bm-hero--align-midden .bm-hero-vacature-meta,
.s-bm-hero--align-midden .bm-hero-dienst-meta {
    justify-content: center;
}

.s-bm-hero--align-links .bm-hero-content {
    text-align: left;
}

.s-bm-hero--align-links .cta-container,
.s-bm-hero--align-links .bm-hero-vacature-meta,
.s-bm-hero--align-links .bm-hero-dienst-meta {
    justify-content: flex-start;
}

.bm-hero-content h1 {
    margin-bottom: 0.5em;
}

.bm-hero-content .lead {
    margin-bottom: 0;
}

.bm-back-link {
    display: inline-block;
    margin-bottom: var(--gap-md);
    color: var(--color-gray-600);
    text-decoration: none;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast);
}

.bm-back-link:hover {
    color: var(--color-primary);
}

/* Hero variant: split_rechts (was: met_afbeelding) */
.s-bm-hero--split_rechts .bm-hero-grid,
.s-bm-hero--met_afbeelding .bm-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

@media (min-width: 768px) {
    .s-bm-hero--split_rechts .bm-hero-grid,
    .s-bm-hero--met_afbeelding .bm-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.bm-hero-afbeelding img {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Hero variant: minimal — compact, links, kleine H1 */
.s-bm-hero--minimal {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}
.s-bm-hero--minimal .bm-hero-content--minimal {
    max-width: var(--max-narrow);
    text-align: left;
}
.s-bm-hero--minimal h1 {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}
.s-bm-hero--minimal .lead {
    font-size: var(--fs-body);
    color: var(--color-gray-700);
    max-width: 65ch;
}
.s-bm-hero--minimal .cta-container {
    justify-content: flex-start;
    margin-top: 1.25rem;
}

/* Hero variant: dienst — auto-data van dienst CPT */
.bm-hero-dienst-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

/* Hero variant: vacature — meta op één regel onder titel */
.bm-hero-vacature-meta {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}
.bm-hero-vacature-meta .bm-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.bm-hero-vacature-meta .bm-hero-meta-item svg {
    flex: 0 0 auto;
    color: var(--color-primary);
}

/* Hero variant: met_video */
.bm-hero-video-container {
    margin-top: var(--gap-2xl);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.bm-hero-video-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — VARIANT: artikel (kennisbank/blog stijl)
   Gecentreerd, items onder elkaar, foto+naam onderaan
   ═══════════════════════════════════════════════════════════════════ */

.bm-hero-cat {
    display: inline-block;
    margin-bottom: var(--gap-md);
    text-decoration: none;
}

.bm-hero-content--artikel {
    /* v2.5.33: gebruiker-gegeven fix — flex column + align-items center voor eyebrow */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}

.bm-hero-content--artikel h1 {
    margin-bottom: 0.5em;
}

.bm-hero-content--artikel .lead {
    margin-bottom: 1.5em;
    color: var(--color-gray-600);
}

/* Meta-info (datum / updated / leestijd) op één regel, gecentreerd */
.bm-hero-meta-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-md);
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    margin-bottom: 2rem;
}

.bm-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
}

.bm-hero-meta-item svg {
    color: var(--color-gray-500);
    flex-shrink: 0;
}

/* Subtiele scheiding tussen meta-items via dot */
.bm-hero-meta-info > .bm-hero-meta-item:not(:last-child)::after {
    content: '·';
    margin-left: var(--gap-md);
    color: var(--color-gray-400);
    font-weight: bold;
}

/* Featured image tussen meta en auteur — blog stijl */
.bm-hero-artikel-afb {
    margin-block: 2rem 2.5rem;
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.bm-hero-artikel-afb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Auteur onder de afbeelding — gecentreerd */
.bm-hero-content--artikel .bm-hero-auteur {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-base);
}

.bm-hero-content--artikel .bm-hero-auteur:hover {
    opacity: 0.85;
}

.bm-hero-auteur-foto {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.bm-hero-auteur-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
}

.bm-hero-auteur-label {
    font-size: var(--fs-xs);
    color: var(--color-gray-500);
    margin-bottom: 0.1em;
}

.bm-hero-auteur-info strong {
    font-size: 1rem;
    color: var(--color-dark);
    font-weight: var(--fw-semibold);
}

.bm-hero-auteur-info small {
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    margin-top: 0.1em;
}

/* Behoud de oude bm-hero-meta voor backwards compat — ongebruikt nu */
.bm-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
    align-items: center;
}

/* Hero variant: bevestiging */
.bm-hero-bevestiging-icoon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--gap-lg);
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-hero-bevestiging-icoon svg {
    width: 40px;
    height: 40px;
}

.bm-hero-overzicht {
    margin-top: var(--gap-xl);
    padding: var(--gap-lg);
    background: var(--color-light);
    border-radius: var(--radius-card);
    text-align: left;
}

.bm-hero-overzicht-titel {
    font-size: var(--fs-h4);
    margin-bottom: var(--gap-md);
}

.bm-hero-overzicht-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-hero-overzicht-lijst li {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.bm-hero-overzicht-lijst li:last-child { border-bottom: 0; }

.bm-hero-overzicht-icoon {
    flex-shrink: 0;
    width: 24px;
    color: var(--color-primary);
}

.bm-hero-overzicht-label {
    font-weight: var(--fw-semibold);
    margin-right: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   TEKST — 6 varianten + TOC
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-tekst {
    /* base — niets specifieks */
}

.bm-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap-md);
    padding: var(--gap-lg);
    border-radius: var(--radius-card);
    border-left: 4px solid;
    margin: 1.5em 0;
}

.bm-callout-icoon {
    font-size: 1.5em;
    line-height: 1.2;
    flex-shrink: 0;
}

.bm-callout-body > *:first-child { margin-top: 0; }
.bm-callout-body > *:last-child { margin-bottom: 0; }

.bm-callout--tip {
    background: var(--color-tip-bg);
    border-color: var(--color-tip-border);
}

.bm-callout--voorbeeld {
    background: var(--color-voorbeeld-bg);
    border-color: var(--color-voorbeeld-border);
}

.bm-callout--waarschuwing {
    background: var(--color-waarschuwing-bg);
    border-color: var(--color-waarschuwing-border);
}

.bm-callout--info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}

.bm-callout--pro_tip {
    background: var(--color-protip-bg);
    border-color: var(--color-protip-border);
}

/* TOC */
.bm-toc {
    margin-bottom: var(--gap-xl);
    padding: var(--gap-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-gray-100);
}

.bm-toc-summary {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    cursor: pointer;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    list-style: none;
}

.bm-toc-summary::-webkit-details-marker {
    display: none;
}

.bm-toc-icon::before {
    content: '▸';
    display: inline-block;
    transition: transform var(--transition-fast);
}

.bm-toc[open] .bm-toc-icon::before {
    transform: rotate(90deg);
}

.bm-toc-list {
    margin: var(--gap-md) 0 0;
    padding: 0;
    list-style: none;
}

.bm-toc-item {
    padding: 0.4rem 0;
}

.bm-toc-item--h3 {
    padding-left: 1.5rem;
    font-size: var(--fs-small);
}

.bm-toc-item a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.bm-toc-item a:hover {
    color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   TEKST COMBINATIE — 5 varianten
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-tc {
    /* base */
}

.bm-tc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

@media (min-width: 768px) {
    .bm-tc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .s-bm-tc--reverse .bm-tc-tekst {
        order: 2;
    }
    .s-bm-tc--reverse .bm-tc-side {
        order: 1;
    }
}

.bm-tc-tekst > *:first-child { margin-top: 0; }
.bm-tc-tekst > *:last-child { margin-bottom: 0; }

/* Variant: media */
.bm-tc-media {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.bm-tc-media img,
.bm-tc-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Variant: lijst */
.bm-tc-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.bm-tc-lijst-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap-md);
}

.bm-tc-lijst-icoon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.bm-tc-lijst-icoon svg {
    width: 24px;
    height: 24px;
}

.bm-tc-lijst-titel {
    margin: 0 0 0.25em;
    font-size: var(--fs-h5);
}

.bm-tc-lijst-tekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

/* Variant: personen */
.bm-tc-personen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--gap-md);
}

.bm-tc-personen--compact {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
}

.bm-tc-persoon {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base);
}

.bm-tc-persoon:hover {
    transform: var(--hover-effect);
}

.bm-tc-personen--compact .bm-tc-persoon {
    flex-direction: row;
    align-items: center;
}

.bm-tc-persoon-foto {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-gray-100);
}

.bm-tc-personen--compact .bm-tc-persoon-foto {
    width: 56px;
    height: 56px;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.bm-tc-persoon-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-tc-persoon-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.bm-tc-persoon-info small {
    color: var(--color-gray-600);
    font-size: var(--fs-small);
}

/* Variant: stats */
.bm-tc-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-lg);
}

.bm-tc-stat {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.bm-tc-stat-getal {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-primary);
}

.bm-tc-stat-prefix,
.bm-tc-stat-suffix {
    color: inherit;
}

.bm-tc-stat-label {
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

/* Variant: formulier */
.bm-tc-form-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.bm-tc--formulier .bm-tc-form-wrapper {
    /* Op donkere achtergrond zorgen we voor witte vorm-wrapper */
}

.bm-tc-form-titel {
    margin: 0;
}

.bm-tc-form-subtekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

.bm-tc-form-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md);
    padding-block: var(--gap-md);
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.bm-tc-form-trust img {
    max-height: 28px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.bm-tc-form-trust img:hover {
    opacity: 1;
    filter: grayscale(0);
}

.bm-tc-form-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-tc-form-usps li {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
}

.bm-tc-form-usp-icoon {
    flex-shrink: 0;
    color: var(--color-success);
    display: flex;
    align-items: center;
}

.bm-tc-form-usp-icoon svg {
    width: 16px;
    height: 16px;
}

.bm-tc-form-onderkanttekst {
    font-size: var(--fs-xs);
    color: var(--color-gray-500);
    line-height: var(--lh-base);
}

.bm-tc-form-fallback {
    text-align: center;
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
}


/* ═══════════════════════════════════════════════════════════════════
   CTA — gradient woord highlight
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-cta {
    /* base — default gebruikt bg-donker */
}

.bm-cta-content h2 {
    text-wrap: balance;
}

.bm-cta-accent {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.bg-donker .bm-cta-accent,
.bg-accent .bm-cta-accent {
    background: linear-gradient(135deg, var(--color-white), rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════
   LOGO'S — Embla marquee
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-logos {
    /* base */
}

.bm-logos-label {
    margin-bottom: var(--gap-lg);
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

.bm-logos-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.embla__viewport {
    overflow: hidden;
}

.embla__container {
    display: flex;
    align-items: center;
    backface-visibility: hidden;
}

.embla__slide {
    flex: 0 0 auto;
    min-width: 0;
}

.bm-logos-track {
    gap: clamp(2rem, 5vw, 4rem);
    animation: bm-logos-scroll 30s linear infinite;
}

.bm-logos-track:hover {
    animation-play-state: paused;
}

.bm-logos-slide {
    /* v2.5.13: width: 100% zodat afbeelding de volle slot-breedte kan pakken (gebruiker feedback) */
    width: 100%;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-logos-slide img {
    /* v2.5.13: max-height weggehaald — afbeelding bepaalt zelf hoogte binnen de slide-breedte */
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* v2.5.27: afgeronde hoekjes consistent met rest van site (--radius-image = 8px) */
    border-radius: var(--radius-image);
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.bm-logos-slide:hover img,
.bm-logos-slide a:hover img {
    opacity: 1;
    filter: grayscale(0);
}

@keyframes bm-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .bm-logos-track {
        animation: none;
    }
    .bm-logos-marquee {
        overflow-x: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   FASE 5 — COMPONENT STYLES
   Grid, Media, Quote, FAQ, Embed
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   GRID — 5 varianten
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-grid {
    /* base */
}

.bm-grid-header {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.bm-grid-header > *:first-child { margin-top: 0; }
.bm-grid-header > *:last-child  { margin-bottom: 0; }

.bm-grid {
    /* uses .twee-items / .drie-items / .vier-items via util classes */
}

/* Variant: iconen */
.bm-grid-icoon-item {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-grid-icoon-icoon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gap-sm);
}

.bm-grid-icoon-icoon svg {
    width: 28px;
    height: 28px;
}

.bm-grid-icoon-titel {
    margin: 0;
    font-size: var(--fs-h4);
}

.bm-grid-icoon-tekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

.bg-donker .bm-grid-icoon-tekst {
    color: rgba(255, 255, 255, 0.75);
}

.bg-donker .bm-grid-icoon-icoon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Variant: kaarten */
.bm-grid-kaart {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

a.bm-grid-kaart:hover {
    transform: var(--hover-effect);
    box-shadow: var(--shadow-card-hover);
}

.bm-grid-kaart-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-gray-100);
}

.bm-grid-kaart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

a.bm-grid-kaart:hover .bm-grid-kaart-img img {
    transform: scale(1.05);
}

.bm-grid-kaart-body {
    padding: var(--gap-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-grid-kaart-titel {
    margin: 0;
    font-size: var(--fs-h4);
}

.bm-grid-kaart-tekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
    flex: 1;
}

.bm-grid-kaart-link {
    margin-top: auto;
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
}

/* Variant: cijfers */
.bm-grid-cijfer {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-grid-cijfer-nummer {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--gap-sm);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bm-grid-cijfer-titel {
    margin: 0;
    font-size: var(--fs-h4);
}

.bm-grid-cijfer-tekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

.bg-donker .bm-grid-cijfer-tekst {
    color: rgba(255, 255, 255, 0.75);
}

/* Variant: stappen */
.bm-grid-stap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--gap-lg);
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base);
}

.bm-grid-stap:hover {
    border-color: var(--color-primary);
}

.bm-grid-stap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gap-sm);
}

.bm-grid-stap-nummer {
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
}

.bm-grid-stap-icoon {
    color: var(--color-primary);
    opacity: 0.6;
}

.bm-grid-stap-icoon svg {
    width: 32px;
    height: 32px;
}

.bm-grid-stap-titel {
    margin: 0;
    font-size: var(--fs-h4);
}

.bm-grid-stap-tekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

/* Variant: voordelen */
.bm-grid-voordeel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap-md);
    align-items: flex-start;
}

.bm-grid-voordeel-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--color-success);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-grid-voordeel-check svg {
    width: 16px;
    height: 16px;
}

.bm-grid-voordeel-body > *:first-child { margin-top: 0; }
.bm-grid-voordeel-body > *:last-child { margin-bottom: 0; }

.bm-grid-voordeel-titel {
    margin: 0 0 0.25em;
    font-size: var(--fs-h5);
}

.bm-grid-voordeel-tekst {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
}

.bg-donker .bm-grid-voordeel-tekst {
    color: rgba(255, 255, 255, 0.75);
}


/* ═══════════════════════════════════════════════════════════════════
   MEDIA — 5 varianten
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-media {
    /* base */
}

.bm-media-figure {
    margin: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.bm-media-figure img,
.bm-media-figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bm-media-figure a.bm-lightbox-trigger {
    display: block;
    cursor: zoom-in;
    transition: opacity var(--transition-fast);
}

.bm-media-figure a.bm-lightbox-trigger:hover {
    opacity: 0.9;
}

.bm-media-caption {
    margin-top: var(--gap-sm);
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    text-align: center;
}

/* Variant: volledig — full width */
.s-bm-media--volledig .c-bm-media {
    padding-inline: 0;
}

.s-bm-media--volledig .bm-media-figure {
    border-radius: 0;
}

/* Variant: centraal */
.bm-media-centraal {
    max-width: 1100px;
    margin-inline: auto;
}

/* Grid varianten — gebruikt generic .twee-items / .drie-items / .vier-items
   uit de globale grid CSS. Geen extra overrides nodig. */
.bm-media-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}


/* ═══════════════════════════════════════════════════════════════════
   QUOTE — 2 varianten
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-quote {
    /* base — default bg-licht */
}

.bm-quote-content {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-style: normal;
}

.bm-quote-mark {
    /* v2.5.27: gebruiker-gegeven styling — line-height: 0 + margin-top: 20px
       zodat de " minder ver boven de tekst staat */
    display: block;
    font-size: clamp(4rem, 10vw, 7rem);
    line-height: 0;
    margin-top: 20px;
    color: var(--color-primary);
    opacity: 0.2;
    font-family: Georgia, serif;
    margin-bottom: 0;
}

.bm-quote-tekst {
    margin: 0 0 var(--gap-lg);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    line-height: 1.5;
    font-weight: var(--fw-medium);
    color: var(--color-dark);
    text-wrap: balance;
}

.bg-donker .bm-quote-tekst {
    color: var(--color-white);
}

.bm-quote-tekst::before { content: '\201C'; }
.bm-quote-tekst::after { content: '\201D'; }

.bm-quote-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-md);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-gray-200);
}

/* v2.5.48/49: naam + functie samen in een meta-blok.
   v2.5.49: desktop = horizontaal met "-" separator; mobiel = onder elkaar (geen separator) */
.bm-quote-meta {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.bg-donker .bm-quote-footer {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.bm-quote-naam {
    font-style: normal;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    /* v2.5.9: margin-top: 0 zodat de naam direct onder de quote staat */
    margin-top: 0;
}

.bg-donker .bm-quote-naam {
    color: var(--color-white);
}

.bm-quote-naam::before { content: ''; }

.bm-quote-functie {
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    /* v2.5.45: line-height 1.2 zodat functie strak onder naam staat bij wrap */
    line-height: 1.2;
}

.bg-donker .bm-quote-functie {
    color: rgba(255, 255, 255, 0.7);
}

.bm-quote-naam + .bm-quote-functie::before {
    content: '-';
    margin-right: 0.5rem;
    color: var(--color-gray-400);
}

/* v2.5.49: mobiel — naam en functie onder elkaar, geen separator */
@media (max-width: 768px) {
    .bm-quote-meta {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }
    .bm-quote-meta .bm-quote-naam + .bm-quote-functie::before {
        content: none;
    }
}

.bm-quote-logo {
    max-height: 32px;
    width: auto;
    margin-left: auto;
    opacity: 0.6;
}

.bg-donker .bm-quote-logo {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

/* Variant: met portret */
.s-bm-quote--met_portret .bm-quote-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
}

@media (min-width: 768px) {
    .s-bm-quote--met_portret .bm-quote-grid {
        grid-template-columns: 280px 1fr;
    }
}

.bm-quote-portret {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.bm-quote-portret img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* v2.5.9-12: standaard variant — gecentreerd op de pagina, mark links */
.s-bm-quote--standaard .c-bm-quote {
    text-align: center;
}
.s-bm-quote--standaard .bm-quote-content {
    /* Tekst-inhoud centreren */
    text-align: center;
}
.s-bm-quote--standaard .bm-quote-mark {
    /* v2.5.12: mark expliciet links uitgelijnd ipv gecentreerd */
    text-align: left;
    width: 100%;
}
.s-bm-quote--standaard .bm-quote-tekst {
    text-align: center;
}
.s-bm-quote--standaard .bm-quote-footer {
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════════
   FAQ — <details>/<summary> accordion
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-faq {
    /* base */
}

.bm-faq-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bm-faq-header > *:first-child { margin-top: 0; }
.bm-faq-header > *:last-child { margin-bottom: 0; }

.bm-faq-list {
    display: flex;
    flex-direction: column;
}

.bm-faq-item {
    border-bottom: 1px solid var(--color-gray-200);
}

.bg-donker .bm-faq-item {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.bm-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
    transition: color var(--transition-fast);
}

.bm-faq-item summary::-webkit-details-marker {
    display: none;
}

.bm-faq-item summary:hover {
    color: var(--color-primary);
}

.bm-faq-item summary h3 {
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
}

.bm-faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.bm-faq-icon::before,
.bm-faq-icon::after {
    content: '';
    position: absolute;
    background: var(--color-dark);
    transition: transform var(--transition-base);
}

.bg-donker .bm-faq-icon::before,
.bg-donker .bm-faq-icon::after {
    background: var(--color-white);
}

.bm-faq-icon::before {
    width: 2px;
    height: 14px;
    top: 5px;
    left: 11px;
}

.bm-faq-icon::after {
    width: 14px;
    height: 2px;
    top: 11px;
    left: 5px;
}

.bm-faq-item[open] .bm-faq-icon::before {
    transform: rotate(90deg);
}

.bm-faq-answer {
    padding: 0 0 1.5em;
    color: var(--color-gray-700);
    line-height: var(--lh-base);
}

.bg-donker .bm-faq-answer {
    color: rgba(255, 255, 255, 0.85);
}

.bm-faq-answer > *:first-child { margin-top: 0; }
.bm-faq-answer > *:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════
   EMBED — YouTube/Vimeo/iframe + privacy thumbnail
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-embed {
    /* base */
}

.bm-embed-titel {
    margin-bottom: var(--gap-xl);
}

.bm-embed-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-gray-900);
    box-shadow: var(--shadow-card);
}

.bm-embed-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bm-embed-wrapper--iframe {
    /* Iframe code wrapper — iframe sizing via aspect-ratio op wrapper */
}

.bm-embed-wrapper--iframe iframe {
    width: 100%;
    height: 100%;
}

/* Privacy-first thumbnail */
.bm-embed-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    padding: 0;
    border: 0;
}

.bm-embed-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.bm-embed-thumbnail:hover img {
    transform: scale(1.03);
}

.bm-embed-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), transform var(--transition-base);
    backdrop-filter: blur(4px);
}

.bm-embed-thumbnail:hover .bm-embed-play {
    background: var(--color-primary);
    transform: translate(-50%, -50%) scale(1.1);
}

.bm-embed-play svg {
    width: 36px;
    height: 36px;
    margin-left: 4px; /* Optical alignment */
}


/* ═══════════════════════════════════════════════════════════════════════
   FASE 6 — COMPONENT STYLES
   Artikelen, Diensten, Contact
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   ARTIKELEN — kaarten / lijst / featured
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-artikelen {
    /* base */
}

.bm-artikelen-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    text-align: center;
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.bm-artikelen-header > *:first-child { margin-top: 0; }
.bm-artikelen-header > *:last-child { margin-bottom: 0; }

/* v2.5.9: header met buttons rechts-boven (split layout) */
.bm-artikelen-header--with-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(1rem, 2vw, 2rem);
    text-align: left;
    max-width: none;
}
.bm-artikelen-header--with-btn .bm-artikelen-header-tekst {
    flex: 1 1 60%;
    min-width: 0;
}
.bm-artikelen-header--with-btn .bm-artikelen-header-btn {
    flex: 0 0 auto;
}
.bm-artikelen-header--with-btn .bm-artikelen-header-btn .cta-container {
    margin: 0;
    justify-content: flex-end;
}

/* v2.5.12: knoppen op mobiel ALTIJD onder de grid, ongeacht keuze
   - desktop: bij 'rechts_boven' verberg de bottom-cta (header heeft de buttons)
   - mobiel: verberg de header-buttons + toon altijd bottom-cta */
@media (min-width: 769px) {
    .s-bm-artikelen--btn-rechts_boven > .c-bm-artikelen > .cta-container,
    .s-bm-artikelen--btn-rechts_boven .c-bm-artikelen > .cta-container {
        display: none;
    }
}
@media (max-width: 768px) {
    .s-bm-artikelen--btn-rechts_boven .bm-artikelen-header-btn {
        display: none;
    }
    /* En de header zelf is niet meer 'with-btn' op mobiel */
    .bm-artikelen-header--with-btn {
        flex-direction: column;
        align-items: stretch;
    }
}

/* v2.5.9: Items centreren bij gecentreerde uitlijning (zodat 2 items in 3-kolom grid centered) */
.s-bm-artikelen.bm-t-align-midden .bm-artikelen-grid,
.s-bm-artikelen.bm-t-align-gecentreerd .bm-artikelen-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.s-bm-artikelen.bm-t-align-midden.s-bm-artikelen--cols-2 .bm-artikelen-grid > *,
.s-bm-artikelen.bm-t-align-gecentreerd.s-bm-artikelen--cols-2 .bm-artikelen-grid > * {
    flex: 1 1 calc(50% - 1.25rem);
    max-width: 480px;
}
.s-bm-artikelen.bm-t-align-midden.s-bm-artikelen--cols-3 .bm-artikelen-grid > *,
.s-bm-artikelen.bm-t-align-gecentreerd.s-bm-artikelen--cols-3 .bm-artikelen-grid > * {
    flex: 1 1 calc(33.33% - 1.67rem);
    max-width: 380px;
}
.s-bm-artikelen.bm-t-align-midden.s-bm-artikelen--cols-4 .bm-artikelen-grid > *,
.s-bm-artikelen.bm-t-align-gecentreerd.s-bm-artikelen--cols-4 .bm-artikelen-grid > * {
    flex: 1 1 calc(25% - 1.875rem);
    max-width: 300px;
}
@media (max-width: 768px) {
    .s-bm-artikelen.bm-t-align-midden .bm-artikelen-grid > *,
    .s-bm-artikelen.bm-t-align-gecentreerd .bm-artikelen-grid > * {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Generieke artikel-kaart */
.bm-artikel-kaart {
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bm-artikel-kaart:hover {
    transform: var(--hover-effect);
    box-shadow: var(--shadow-card-hover);
}

.bm-artikel-kaart-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.bm-artikel-kaart-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-gray-100);
}

.bm-artikel-kaart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.bm-artikel-kaart:hover .bm-artikel-kaart-img img {
    transform: scale(1.05);
}

.bm-artikel-kaart-body {
    padding: var(--gap-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-artikel-kaart-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-primary);
}

.bm-artikel-kaart-titel {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: var(--lh-tight);
}

.bm-artikel-kaart-excerpt {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
    flex: 1;
}

.bm-artikel-kaart-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* v2.5.9: justify-content space-between zodat auteur links en datum rechts staat */
    justify-content: space-between;
    gap: var(--gap-md);
    margin-top: auto;
    padding-top: var(--gap-sm);
    color: var(--color-gray-500);
    font-size: var(--fs-xs);
}

/* v2.5.9: bullet separator alleen tonen als space-between niet werkt (1 element) */
.bm-artikel-kaart-meta:has(> *:nth-child(2)) > *:not(:last-child)::after {
    content: '';
    margin-left: 0;
}

.bm-artikel-kaart-auteur {
    font-weight: var(--fw-medium);
    color: var(--color-gray-700);
}

/* Layout: featured (1 groot + rest klein) */
.bm-artikelen-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 768px) {
    .bm-artikelen-featured-grid {
        grid-template-columns: 1.5fr 1fr;
    }
}

.bm-artikelen-featured-rest {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.bm-artikel-kaart--groot .bm-artikel-kaart-img {
    aspect-ratio: 4 / 3;
}

.bm-artikel-kaart--groot .bm-artikel-kaart-titel {
    font-size: var(--fs-h3);
}

.bm-artikel-kaart--klein .bm-artikel-kaart-link {
    flex-direction: row;
    align-items: stretch;
}

.bm-artikel-kaart--klein .bm-artikel-kaart-img {
    width: 35%;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.bm-artikel-kaart--klein .bm-artikel-kaart-body {
    padding: var(--gap-md);
    gap: 0.25rem;
}

.bm-artikel-kaart--klein .bm-artikel-kaart-titel {
    font-size: var(--fs-h5);
}

/* Layout: lijst (compact horizontal) */
.bm-artikelen-lijst {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.bm-artikel-kaart--lijst {
    box-shadow: none;
    background: transparent;
    border-bottom: 1px solid var(--color-gray-100);
    border-radius: 0;
}

.bm-artikel-kaart--lijst:hover {
    transform: none;
    box-shadow: none;
    background: var(--color-gray-50);
}

.bm-artikel-kaart--lijst .bm-artikel-kaart-link {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--gap-md) 0;
}

.bm-artikel-kaart--lijst .bm-artikel-kaart-img {
    width: 120px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

.bm-artikel-kaart--lijst .bm-artikel-kaart-body {
    padding: 0;
    flex: 1;
}

@media (max-width: 600px) {
    .bm-artikel-kaart--lijst .bm-artikel-kaart-img {
        width: 80px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   DIENSTEN — kaarten met icoon/afbeelding/geen
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-diensten {
    /* base */
}

.bm-diensten-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    text-align: center;
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.bm-diensten-header > *:first-child { margin-top: 0; }
.bm-diensten-header > *:last-child { margin-bottom: 0; }

.bm-dienst-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bm-dienst-card:hover {
    transform: var(--hover-effect);
    box-shadow: var(--shadow-card-hover);
}

/* Variant: icoon */
.bm-dienst-card--icoon {
    padding: var(--gap-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.bm-dienst-card-icoon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-dienst-card-icoon svg {
    width: 28px;
    height: 28px;
}

/* Variant: afbeelding */
.bm-dienst-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-gray-100);
}

.bm-dienst-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.bm-dienst-card:hover .bm-dienst-card-img img {
    transform: scale(1.05);
}

.bm-dienst-card--afbeelding .bm-dienst-card-body {
    padding: var(--gap-lg);
}

/* Variant: geen visual */
.bm-dienst-card--geen {
    padding: var(--gap-xl);
}

/* Body — gemeenschappelijk */
.bm-dienst-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-dienst-card--icoon .bm-dienst-card-body {
    padding: 0;
}

.bm-dienst-card-titel {
    margin: 0;
    font-size: var(--fs-h4);
}

.bm-dienst-card-omschrijving {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
    flex: 1;
}

.bm-dienst-card-link {
    margin-top: auto;
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
}


/* ═══════════════════════════════════════════════════════════════════
   CONTACT — auto info uit Options
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-contact {
    /* base */
}

.bm-contact-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bm-contact-header > *:first-child { margin-top: 0; }
.bm-contact-header > *:last-child { margin-bottom: 0; }

.bm-t-center .bm-contact-header {
    margin-inline: auto;
}

/* 1-kolom layout: gestapeld vertical */
.bm-contact-items--1kol {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    max-width: var(--max-narrow);
    /* Default: links uitgelijnd (geen auto margin op container) */
}

/* Bij gecentreerde uitlijning wordt de container gecentreerd MAAR items blijven links */
.s-bm-contact--gecentreerd .bm-contact-items--1kol {
    margin-inline: auto;
}

.bm-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    text-decoration: none;
    color: inherit;
    text-align: left; /* belangrijk: items zelf altijd links uitgelijnd */
}

/* Klikbare items krijgen hover-feedback */
.bm-contact-item--linked {
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.bm-contact-item--linked:hover {
    background: var(--color-gray-100);
    transform: translateY(-1px);
}

.bg-donker .bm-contact-item--linked:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bm-contact-item-icoon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-contact-item-icoon svg {
    width: 22px;
    height: 22px;
}

.bg-donker .bm-contact-item-icoon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.bm-contact-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    min-width: 0; /* prevent overflow */
}

.bm-contact-item-label {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    font-weight: var(--fw-semibold);
}

.bg-donker .bm-contact-item-label {
    color: rgba(255, 255, 255, 0.6);
}

.bm-contact-item-value {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--color-dark);
}

.bg-donker .bm-contact-item-value {
    color: var(--color-white);
}

.bm-contact-item-value a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.bm-contact-item-value a:hover {
    color: var(--color-primary);
}

.bg-donker .bm-contact-item-value a:hover {
    color: var(--color-white);
}

/* Openingstijden lijst — minder ruimte tussen titel en eerste regel */
.bm-contact-openingstijden {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-body);
}

/* Eerste rij: geen extra padding-top zodat titel en regel dichter bij elkaar staan */
.bm-contact-openingstijden li:first-child {
    padding-top: 0;
}

.bm-contact-openingstijden li {
    display: flex;
    justify-content: space-between;
    padding: 0.4em 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.bg-donker .bm-contact-openingstijden li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.bm-contact-openingstijden li:last-child {
    border-bottom: 0;
}

.bm-contact-openingstijden li > span:first-child {
    font-weight: var(--fw-medium);
}

.bm-contact-openingstijden li > span:last-child {
    color: var(--color-gray-700);
    font-variant-numeric: tabular-nums;
}

.bg-donker .bm-contact-openingstijden li > span:last-child {
    color: rgba(255, 255, 255, 0.7);
}

.bm-contact-openingstijden-extra {
    margin-top: var(--gap-sm);
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    font-style: italic;
}

/* Social icons in contact */
.bm-contact-social {
    display: flex;
    gap: var(--gap-sm);
}

.bm-contact-social .bm-social-link {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.bm-contact-social .bm-social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.bg-donker .bm-contact-social .bm-social-link {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.bg-donker .bm-contact-social .bm-social-link:hover {
    background: var(--color-white);
    color: var(--color-dark);
}


/* ═══════════════════════════════════════════════════════════════════════
   FASE 7 — COMPONENT STYLES
   Artikel Meta, Reviewer Card, Definitielijst
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   ARTIKEL META — auteur card + meta + share
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-artikel-meta {
    /* base */
}

/* ── STIJL: compleet ── */
.bm-artikel-meta-compleet {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-light);
    border-radius: var(--radius-card);
    max-width: var(--max-prose);
    margin-inline: auto;
}

.bg-licht .bm-artikel-meta-compleet {
    background: var(--color-white);
}

.bg-donker .bm-artikel-meta-compleet {
    background: rgba(255, 255, 255, 0.05);
}

/* Auteur card binnen meta */
.bm-auteur-card {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    text-decoration: none;
    color: inherit;
    padding-bottom: var(--gap-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.bg-donker .bm-auteur-card {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.bm-auteur-card-foto {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.bm-auteur-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bm-auteur-card-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-gray-600);
    font-weight: var(--fw-medium);
}

.bg-donker .bm-auteur-card-label {
    color: rgba(255, 255, 255, 0.6);
}

.bm-auteur-card-naam {
    font-size: var(--fs-h5);
    line-height: var(--lh-tight);
    transition: color var(--transition-fast);
}

.bm-auteur-card:hover .bm-auteur-card-naam {
    color: var(--color-primary);
}

.bm-auteur-card-functie {
    font-size: var(--fs-small);
    color: var(--color-gray-600);
}

.bg-donker .bm-auteur-card-functie {
    color: rgba(255, 255, 255, 0.7);
}

/* Meta info */
.bm-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
}

.bm-meta-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bm-meta-info-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-gray-600);
    font-weight: var(--fw-medium);
}

.bg-donker .bm-meta-info-label {
    color: rgba(255, 255, 255, 0.6);
}

.bm-meta-info-item time,
.bm-meta-info-item > span:not(.bm-meta-info-label) {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

/* Tag lijsten */
.bm-meta-cats,
.bm-meta-tags {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.bm-meta-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.bm-meta-tag-list a {
    display: inline-block;
    padding: 0.3em 0.75em;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    transition: all var(--transition-fast);
}

.bm-meta-tag-list a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.bg-donker .bm-meta-tag-list a {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
}

/* ── STIJL: compact ── */
.bm-artikel-meta-compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    align-items: center;
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    max-width: var(--max-prose);
    margin-inline: auto;
    padding-block: var(--gap-md);
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.bg-donker .bm-artikel-meta-compact {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.bm-artikel-meta-compact > *:not(:last-child)::after {
    content: '·';
    margin-left: var(--gap-md);
    color: var(--color-gray-400);
}

/* ── Share buttons ── */
.bm-artikel-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md);
}

.s-bm-artikel-meta--alleen_share .bm-artikel-share {
    justify-content: center;
    max-width: var(--max-prose);
    margin-inline: auto;
}

.bm-artikel-share-label {
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    font-weight: var(--fw-medium);
}

.bg-donker .bm-artikel-share-label {
    color: rgba(255, 255, 255, 0.7);
}

.bm-share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gap-sm);
}

.bm-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.bm-share-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: var(--hover-effect);
}

.bg-donker .bm-share-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
}

.bg-donker .bm-share-btn:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

.bm-share-btn.is-copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}


/* ═══════════════════════════════════════════════════════════════════
   REVIEWER CARD — E-E-A-T
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-reviewer {
    /* base — default bg-licht */
}

/* Compleet card */
.bm-reviewer-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-gray-100);
    max-width: var(--max-prose);
    margin-inline: auto;
}

.bg-licht .bm-reviewer-card {
    background: var(--color-white);
}

.bg-donker .bm-reviewer-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 600px) {
    .bm-reviewer-card {
        grid-template-columns: auto 1fr;
        align-items: start;
    }
}

.bm-reviewer-trust-badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background: var(--color-success);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.bm-reviewer-foto {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    overflow: hidden;
    transition: transform var(--transition-base);
}

.bm-reviewer-foto:hover {
    transform: scale(1.05);
}

.bm-reviewer-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-reviewer-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.bm-reviewer-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-success);
    font-weight: var(--fw-semibold);
}

.bm-reviewer-naam {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: var(--lh-tight);
}

.bm-reviewer-naam a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.bm-reviewer-naam a:hover {
    color: var(--color-primary);
}

.bm-reviewer-functie {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--fs-small);
}

.bm-reviewer-bio {
    margin: 0.5rem 0 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
}

.bg-donker .bm-reviewer-functie,
.bg-donker .bm-reviewer-bio {
    color: rgba(255, 255, 255, 0.7);
}

.bm-reviewer-datum {
    margin: 0.75rem 0 0;
    color: var(--color-gray-500);
    font-size: var(--fs-xs);
    font-style: italic;
}

/* Compact stijl */
.bm-reviewer-compact {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-md);
    background: var(--color-white);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-md);
    max-width: var(--max-prose);
    margin-inline: auto;
    font-size: var(--fs-small);
}

.bg-donker .bm-reviewer-compact {
    background: rgba(255, 255, 255, 0.05);
}

.bm-reviewer-icoon {
    flex-shrink: 0;
    color: var(--color-success);
}

.bm-reviewer-compact-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bm-reviewer-compact-text .bm-reviewer-datum {
    color: var(--color-gray-500);
    font-size: var(--fs-xs);
    margin: 0 0 0 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   FASE 8 — PAGE TEMPLATE STYLES
   404, Search, Categorie archief, Kennisbank lijst, Tag, Single
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   404 PAGINA
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-404 {
    /* v2.1.1: expliciete centering — wrapper-classes gaven niet altijd
       centered output (afhankelijk van CSS load-order en WP main context) */
}
.s-bm-404 .c-bm-404 {
    text-align: center;
    /* v2.1.2: wat ruimer dan bm-t-narrow (was: var(--max-narrow) ≈ 690px) */
    max-width: 820px;
    margin-inline: auto;
}
.s-bm-404 .c-bm-404 .bm-eyebrow,
.s-bm-404 .c-bm-404 h1,
.s-bm-404 .c-bm-404 .lead {
    text-align: center;
}

/* v2.1.2: ademruimte onder de "Terug naar home"-button voordat de
   "Recent toegevoegd"-suggesties beginnen */
.s-bm-404 .cta-container {
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.bm-404-icoon {
    margin: 0 auto var(--gap-lg);
    color: var(--color-warning);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-404-search {
    display: flex;
    gap: var(--gap-sm);
    max-width: 480px;
    margin: var(--gap-xl) auto 0;
}

.bm-404-search input[type="search"] {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--fs-body);
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.bm-404-search input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.s-bm-404-suggesties h2 {
    margin-bottom: var(--gap-md);
}


/* ═══════════════════════════════════════════════════════════════════
   ZOEKRESULTATEN
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-search-hero {
    /* base — uses bg-licht */
}

.bm-search-form {
    display: flex;
    gap: var(--gap-sm);
    max-width: 560px;
    margin-inline: auto;
}

.bm-search-form input[type="search"] {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--fs-body);
    font-family: inherit;
    background: var(--color-white);
    transition: border-color var(--transition-fast);
}

.bm-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.bm-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin-inline: auto;
}

.bm-search-item {
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.bm-search-item:hover {
    background: var(--color-gray-50);
}

.bm-search-item-link {
    display: flex;
    gap: var(--gap-md);
    padding: var(--gap-lg) var(--gap-md);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.bm-search-item-img {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-gray-100);
}

.bm-search-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-search-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bm-search-item-type {
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

.bm-search-item-titel {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: var(--lh-tight);
    color: var(--color-dark);
    transition: color var(--transition-fast);
}

.bm-search-item-link:hover .bm-search-item-titel {
    color: var(--color-primary);
}

.bm-search-item-snippet {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
}

.bm-search-item-url {
    color: var(--color-gray-500);
    font-size: var(--fs-xs);
    word-break: break-all;
}

.bm-search-empty h2 {
    color: var(--color-gray-700);
}

.bm-search-empty ul {
    color: var(--color-gray-700);
}

@media (max-width: 600px) {
    .bm-search-item-img {
        width: 64px;
        height: 64px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   CATEGORIE ARCHIEVEN — Filter pills
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-cat-hero,
.s-bm-tag-hero,
.s-bm-kb-hero {
    /* v2.5.20: echte hero styling — was eerst leeg comment-block */
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--color-gray-100, #f0f0f0);
}
.s-bm-cat-hero h1,
.s-bm-tag-hero h1,
.s-bm-kb-hero h1 {
    margin: 0.5rem 0 0.75rem;
    line-height: var(--lh-tight, 1.15);
}
/* v2.5.30: cat/tag/kb hero eyebrow gecentreerd (binnen bm-t-center container) */
.s-bm-cat-hero .bm-eyebrow,
.s-bm-tag-hero .bm-eyebrow,
.s-bm-kb-hero .bm-eyebrow {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 0.5em;
}
.s-bm-cat-hero .bm-back-link,
.s-bm-kb-hero .bm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.75rem;
    color: var(--color-gray-600, #666);
    text-decoration: none;
    font-size: var(--fs-small, 0.9rem);
    transition: color 0.15s;
}
.s-bm-cat-hero .bm-back-link:hover,
.s-bm-kb-hero .bm-back-link:hover {
    color: var(--color-primary);
}
.s-bm-cat-hero .lead,
.s-bm-tag-hero .lead,
.s-bm-kb-hero .lead {
    margin: 1rem auto 0;
    color: var(--color-gray-700, #444);
    max-width: 60ch;
}

.s-bm-cat-filter {
    padding-block: var(--space-sm);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}

.bm-cat-filter {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

.bm-cat-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: nowrap;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .bm-cat-filter-list {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.bm-cat-filter-pill {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.bm-cat-filter-pill:hover {
    background: var(--color-gray-200);
}

.bm-cat-filter-pill.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

.bm-cat-empty {
    padding-block: var(--space-md);
    color: var(--color-gray-600);
}


/* ═══════════════════════════════════════════════════════════════════
   KENNISBANK — Compact lijst layout
   v2.5.18: Volledige styling overhaul — was te minimaal
   ═══════════════════════════════════════════════════════════════════ */

/* Hero — solide achtergrond + ruimte */
.s-bm-kb-hero {
    background: var(--color-gray-50, #fafafa);
    padding-block: clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--color-gray-100, #f0f0f0);
}
.s-bm-kb-hero .c-bm-kb-hero {
    text-align: left;
    max-width: var(--max-prose, 720px);
    margin-inline: auto;
}
.s-bm-kb-hero h1 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: var(--lh-tight, 1.15);
}
.s-bm-kb-hero .lead {
    color: var(--color-gray-700, #444);
    margin: 0;
    max-width: 60ch;
}
.s-bm-kb-hero .bm-eyebrow {
    margin-bottom: 0.5em;
}

/* Back-link versterking */
.s-bm-kb-hero .bm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-gray-600, #666);
    text-decoration: none;
    font-size: var(--fs-small, 0.9rem);
    margin-bottom: 0.5rem;
    transition: color 0.15s;
}
.s-bm-kb-hero .bm-back-link:hover {
    color: var(--color-primary);
}

/* Subcategorie filter pills — duidelijker zichtbaar */
.s-bm-cat-filter {
    padding-block: 1.5rem;
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-gray-100, #f0f0f0);
}
.s-bm-cat-filter .c-bm-cat-filter {
    max-width: var(--max-content, 1200px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Content section — netjes ingekaderd */
.s-bm-kb-content {
    padding-block: clamp(2rem, 5vw, 4rem);
    background: var(--color-white, #fff);
}
.s-bm-kb-content .c-bm-kb-content {
    max-width: var(--max-content, 1200px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ═══════════════════════════════════════════════════════════════════
   KENNISBANK A-Z navigatie
   v2.5.19: class names matchen nu de bestaande bureaumagneet.nl-styling
   (.bm-kennisbank-* ipv .bm-kb-az-*) zodat de oorspronkelijke CSS werkt
   ═══════════════════════════════════════════════════════════════════ */
.bm-kennisbank-wrapper {
    margin-top: 1.5rem;
}

.bm-kennisbank-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 6rem;
}

.bm-kennisbank-nav a {
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e5e5);
    border-radius: 4px;
    color: var(--color-dark, #111);
    font-weight: 600;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.bm-kennisbank-nav a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.bm-kennisbank-nav a.is-empty {
    opacity: 0.35;
    pointer-events: none;
}

.bm-kennisbank-blok {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-top: solid 1px var(--color-gray-200, #cfcfcf);
}

.bm-kennisbank-blok:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.bm-kennisbank-letter {
    /* v2.5.30: van h2 naar p — geen heading-typografie, alleen visuele letter */
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 2rem;
    color: var(--color-dark, #111);
    line-height: 1;
}

.bm-kennisbank-lijst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bm-kennisbank-item {
    margin: 0;
    padding: 0;
}

.bm-kennisbank-link {
    /* v2.5.30: nu een h2 — zelf font-weight 500 + reset margins zodat het niet als grote heading rendeert */
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    line-height: var(--lh-tight, 1.2);
}

.bm-kennisbank-link a {
    text-decoration: none;
    color: var(--color-dark, #000);
    transition: color 0.15s;
}

.bm-kennisbank-link a:hover {
    color: var(--color-primary);
}

/* Niet-A-Z list (sub-categorie of paginering) */
.bm-kb-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: var(--max-prose, 720px);
    margin-inline: auto;
    list-style: none;
    padding: 0;
}

.bm-kb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding: var(--gap-lg) var(--gap-md);
    border-bottom: 1px solid var(--color-gray-100);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast), padding-left var(--transition-fast);
}

.bm-kb-item:hover {
    background: var(--color-gray-50);
    padding-left: calc(var(--gap-md) + 8px);
}

.bm-kb-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.bm-kb-item-titel {
    margin: 0;
    font-size: var(--fs-h5);
    line-height: var(--lh-tight);
    color: var(--color-dark);
    transition: color var(--transition-fast);
}

.bm-kb-item:hover .bm-kb-item-titel {
    color: var(--color-primary);
}

.bm-kb-item-excerpt {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
}

.bm-kb-item-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    color: var(--color-gray-500);
    font-size: var(--fs-small);
}

.bm-kb-item-arrow {
    transition: transform var(--transition-fast);
}

.bm-kb-item:hover .bm-kb-item-arrow {
    transform: translateX(4px);
    color: var(--color-primary);
}

@media (max-width: 600px) {
    .bm-kb-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .bm-kb-item-meta {
        align-self: stretch;
        justify-content: space-between;
        margin-top: var(--gap-xs);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PAGINERING — universeel voor alle archief templates
   ═══════════════════════════════════════════════════════════════════ */
.bm-pagination {
    margin-top: var(--gap-2xl);
    display: flex;
    justify-content: center;
}

.bm-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
    flex-wrap: wrap;
}

.bm-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    text-decoration: none;
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
    transition: all var(--transition-fast);
}

.bm-pagination .page-numbers:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.bm-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.bm-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--color-gray-400);
}

.bm-pagination .page-numbers.prev,
.bm-pagination .page-numbers.next {
    padding: 0 1rem;
    font-weight: var(--fw-semibold);
}


/* ═══════════════════════════════════════════════════════════════════
   POST CONTENT (single post fallback)
   ═══════════════════════════════════════════════════════════════════ */
.s-bm-post-content {
    /* base */
}

.s-bm-post-related {
    /* uses bg-licht */
}

.s-bm-post-related h2 {
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   FASE 11 — SLIDER / CAROUSEL (Media variant=slider)
   ═══════════════════════════════════════════════════════════════════ */
.bm-media-slider {
    position: relative;
    --slides-per-view: 1;
    --slide-gap: clamp(1rem, 2vw, 1.5rem);
}

.bm-media-slider .embla__viewport {
    overflow: hidden;
    border-radius: var(--radius-card);
    /* v2.1.0: pijltjes positioneren tov viewport ipv slider-wrapper
       (zodat ze niet meeschuiven met bullet-hoogte) */
    position: relative;
}

.bm-media-slider .embla__container {
    display: flex;
    gap: var(--slide-gap);
    backface-visibility: hidden;
}

.bm-slider-slide {
    flex: 0 0 calc(100% / var(--slides-per-view) - var(--slide-gap) * (var(--slides-per-view) - 1) / var(--slides-per-view));
    min-width: 0;
}

@media (max-width: 1023px) {
    /* Op tablet: max 2 zichtbaar */
    .bm-media-slider {
        --slides-per-view: min(var(--slides-per-view), 2);
    }
}

@media (max-width: 600px) {
    /* Op mobiel: altijd 1 zichtbaar */
    .bm-media-slider {
        --slides-per-view: 1;
    }
}

.bm-slider-slide .bm-media-figure {
    margin: 0;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.bm-slider-slide .bm-media-figure img {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pijltjes — v2.1.0: gepositioneerd tov de viewport (afbeelding-zone),
   niet de hele slider (anders verschuiven ze met bullet-hoogte mee).
   We gebruiken een container die alleen de viewport omsluit. */
.bm-media-slider .embla__viewport {
    /* viewport krijgt position: relative zodat pijltjes hier-aan kunnen ankeren */
}

.bm-slider-prev,
.bm-slider-next {
    position: absolute;
    /* top staat op afbeelding-midden via berekening: helft van viewport-hoogte
       (= helft van slider minus bullets indien aanwezig) */
    top: calc(50% - var(--slider-bullets-offset, 0px));
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--color-white);
    color: var(--color-dark);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast), transform var(--transition-fast),
                opacity var(--transition-fast);
    z-index: 2;
}

/* Wanneer bullets zichtbaar zijn: 24px (12px bullets + 12px margin) eraf trekken */
.bm-media-slider:has(.bm-slider-bullets) {
    --slider-bullets-offset: 24px;
}

.bm-slider-prev { left: -8px; }
.bm-slider-next { right: -8px; }

@media (min-width: 1024px) {
    .bm-slider-prev { left: -24px; }
    .bm-slider-next { right: -24px; }
}

.bm-slider-prev:hover,
.bm-slider-next:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.bm-slider-prev:disabled,
.bm-slider-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.bg-donker .bm-slider-prev,
.bg-donker .bm-slider-next {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.bg-donker .bm-slider-prev:hover,
.bg-donker .bm-slider-next:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

/* Bullets */
.bm-slider-bullets {
    display: flex;
    justify-content: center;
    gap: var(--gap-sm);
    margin-top: var(--gap-lg);
}

.bm-slider-bullet {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-gray-300);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast),
                width var(--transition-fast);
}

.bm-slider-bullet:hover {
    background: var(--color-gray-500);
}

.bm-slider-bullet.is-selected {
    background: var(--color-primary);
    width: 24px;
}

.bg-donker .bm-slider-bullet {
    background: rgba(255, 255, 255, 0.25);
}

.bg-donker .bm-slider-bullet:hover {
    background: rgba(255, 255, 255, 0.5);
}

.bg-donker .bm-slider-bullet.is-selected {
    background: var(--color-white);
}


/* ═══════════════════════════════════════════════════════════════════
   v1.0.4 — VIDEO POSTER + MOBILE MEDIA + POLISH
   ═══════════════════════════════════════════════════════════════════ */

/* ── Video wrapper met poster + play overlay ── */
.bm-video-wrapper {
    position: relative;
    display: block;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-gray-900, #1a1a1a);
}

.bm-video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Toon desktop video standaard, mobile video op kleine schermen */
.bm-video-desktop { display: block; }
.bm-video-mobile { display: none; }

@media (max-width: 767px) {
    .bm-video-wrapper:has(.bm-video-mobile) .bm-video-desktop { display: none; }
    .bm-video-wrapper:has(.bm-video-mobile) .bm-video-mobile { display: block; }
}

/* Play knop overlay op video met poster */
.bm-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    border: 0;
    color: var(--color-white);
    cursor: pointer;
    transition: background var(--transition-base);
    width: 100%;
    height: 100%;
}

.bm-video-play::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-base), background var(--transition-base);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.bm-video-play svg {
    position: relative;
    z-index: 1;
    color: var(--color-primary);
    margin-left: 4px; /* play-icon optisch centreren */
    transition: transform var(--transition-base);
}

.bm-video-wrapper:hover .bm-video-play::before,
.bm-video-play:focus-visible::before {
    transform: scale(1.1);
    background: var(--color-primary);
}

.bm-video-wrapper:hover .bm-video-play svg,
.bm-video-play:focus-visible svg {
    color: var(--color-white);
    transform: scale(1.1);
}

.bm-video-wrapper.is-playing .bm-video-play {
    display: none;
}

@media (max-width: 600px) {
    .bm-video-play::before {
        width: 60px;
        height: 60px;
    }
    .bm-video-play svg {
        width: 24px;
        height: 24px;
    }
}

/* ── Picture element responsive (mobile media-override) ── */
.bm-media-figure picture {
    display: block;
    width: 100%;
    height: 100%;
}

.bm-media-figure picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.0.4 — VISUAL POLISH (subtle improvements)
   ═══════════════════════════════════════════════════════════════════ */

/* Smooth hover transitions overal */
.bm-grid-card,
.bm-artikel-kaart,
.bm-team-kaart,
.bm-dienst-kaart {
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

/* Lichte hover-lift op alle cards */
.bm-grid-card:hover,
.bm-artikel-kaart:hover,
.bm-team-kaart:hover,
.bm-dienst-kaart:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Eyebrow stijl iets meer karakter */
.bm-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 0.35em 0.8em;
    background: var(--color-primary-light, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-full);
    margin-bottom: 0.5em;
}

.bg-donker .bm-eyebrow,
.bg-accent .bm-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
}

/* Verfijnde focus-rings */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.0.5 — Button containers onder Media / Embed + cta-center utility
   ═══════════════════════════════════════════════════════════════════ */

/* Buttons onder een media of embed blok */
.bm-media-buttons,
.bm-embed-buttons {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.bm-media-buttons .cta-container,
.bm-embed-buttons .cta-container {
    justify-content: center;
}

/* Utility: gecentreerde cta-container (gebruikt door Grid blok) */
.cta-container.cta-center {
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.0.6 — BREADCRUMBS, FILTER PILLS, CAT/TAG META
   ═══════════════════════════════════════════════════════════════════ */

/* Breadcrumbs */
.bm-breadcrumbs {
    margin-bottom: var(--gap-md);
    font-size: var(--fs-small);
    color: var(--color-gray-600);
}

.bm-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.bm-breadcrumbs--center ol {
    justify-content: center;
}

.bm-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}

.bm-breadcrumbs a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.bm-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.bm-breadcrumbs span[aria-current="page"] {
    color: var(--color-dark);
    font-weight: var(--fw-medium);
}

.bm-breadcrumbs-sep {
    color: var(--color-gray-400);
    margin-inline: 0.25rem;
}

/* Categorie/Tag meta — aantal artikelen, kleiner & gecentreerd */
.bm-cat-meta,
.bm-tag-meta {
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    margin-bottom: 0.75rem;
    margin-top: 0;
}

/* Filter pills */
.bm-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.bm-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 1em;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.bm-filter-pill:hover {
    background: var(--color-gray-200);
    color: var(--color-dark);
}

.bm-filter-pill.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

.bm-filter-pill.is-active:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
}

/* Categorie-naam in artikel-card — al stijl bestaand, maar zorg dat hij zichtbaar is */
.bm-artikel-kaart-cat {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.0.6 — SEARCH OVERLAY + LIVE SEARCH
   ═══════════════════════════════════════════════════════════════════ */

/* Search toggle button in header */
.bm-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-dark);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.bm-search-toggle:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

/* Body lock bij open overlay */
body.search-overlay-open {
    overflow: hidden;
}

/* Search overlay */
.bm-search-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    overflow-y: auto;
}

.bm-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.bm-search-overlay-inner {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 6rem 1.5rem 3rem;
    position: relative;
}

.bm-search-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--color-dark);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-search-close:hover {
    background: var(--color-gray-100);
}

/* Search input */
.bm-search-form {
    margin-bottom: 1.5rem;
}

.bm-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bm-search-input-wrap .bm-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--color-gray-500);
    pointer-events: none;
}

.bm-search-input-wrap input[type="search"] {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    font-size: 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: border-color var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.bm-search-input-wrap input[type="search"]:focus {
    border-color: var(--color-primary);
}

/* Results */
.bm-search-results {
    margin-top: 1rem;
}

.bm-search-hint {
    color: var(--color-gray-600);
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}

.bm-search-loading {
    animation: bm-search-pulse 1.2s ease-in-out infinite;
}

@keyframes bm-search-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.bm-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-search-result {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.bm-search-result:hover {
    background: var(--color-gray-100);
}

.bm-search-result-thumb,
.bm-search-result-thumb-placeholder {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.bm-search-result-thumb-placeholder {
    background: var(--color-gray-100);
}

.bm-search-result-body {
    flex: 1;
    min-width: 0;
}

.bm-search-result-type {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.bm-search-result-title {
    display: block;
    color: var(--color-dark);
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.bm-search-result-excerpt {
    color: var(--color-gray-600);
    font-size: var(--fs-small);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bm-search-view-all {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.bm-search-view-all:hover {
    background: var(--color-gray-100);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .bm-search-overlay-inner {
        padding: 5rem 1rem 2rem;
    }
    .bm-search-input-wrap input[type="search"] {
        font-size: 1rem;
        padding: 0.875rem 1rem 0.875rem 2.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BM AI — Author Card (op blog posts)
   ═══════════════════════════════════════════════════════════════════════ */

.bm-author-card {
    margin-top: 3rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
}

.bm-author-card-header {
    margin-bottom: 1rem;
}

.bm-author-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--fw-semibold);
    color: var(--color-gray-500);
}

.bm-author-card-body {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.bm-author-card-photo {
    flex-shrink: 0;
}

.bm-author-card-photo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bm-author-card-content {
    flex: 1;
    min-width: 0;
}

.bm-author-card-name {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--color-dark);
}

.bm-author-card-role {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin-bottom: 0.75rem;
}

.bm-author-card-bio {
    margin-bottom: 1rem;
    color: var(--color-dark);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bm-author-card-bio p:last-child {
    margin-bottom: 0;
}

.bm-author-card-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bm-author-card-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--color-gray-700);
}

.bm-author-card-socials {
    display: flex;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    gap: 0.5rem;
}

.bm-author-card-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 50%;
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
}

.bm-author-card-socials a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.bm-author-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.bm-author-card-link:hover {
    text-decoration: underline;
}

.bm-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .bm-author-card-body {
        flex-direction: column;
        gap: 1rem;
        text-align: left;
    }
    
    .bm-author-card-photo img {
        width: 64px;
        height: 64px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BM AI — Visible Dates op blog posts
   ═══════════════════════════════════════════════════════════════════════ */

.bm-post-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.bm-post-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bm-post-date svg {
    flex-shrink: 0;
    color: var(--color-gray-500);
}

.bm-post-date-label {
    font-weight: var(--fw-semibold);
}

.bm-post-date time {
    color: var(--color-dark);
}

.bm-post-date--modified .bm-post-date-label {
    color: var(--color-primary);
}



/* ═══════════════════════════════════════════════════════════════════
   SPOTS BLOK — Kaart of afbeelding met markers (pin/bolletje + tooltip)
   Beide modi gebruiken X/Y procent positionering via absolute overlay.
   ═══════════════════════════════════════════════════════════════════ */

.s-bm-spots {
    /* Wrapper-utility (.bg-*, .{ge,k,m,gr}-{top,bottom}) zorgt voor spacing/bg */
}

/* Header */
.bm-spots-header {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 720px;
    margin-inline: auto;
}

.bm-spots-titel {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    margin: 0 0 0.5rem;
    color: var(--color-dark);
}

.bm-spots-inleiding {
    margin: 0;
    color: var(--color-gray-600);
    font-size: 1.05rem;
}

/* ─────────────────────────────────────────────────────────────────
   Canvas — bevat OF iframe OF img + spots overlay
   Critical: position: relative zodat absolute spots erin gepositioneerd zijn
   ───────────────────────────────────────────────────────────────── */
.bm-spots-canvas {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg, 16px);
    background: var(--color-gray-100);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    isolation: isolate; /* nieuwe stacking context */
}

/* Achtergrond — iframe of img — vult volledige canvas */
.bm-spots-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
}

.bm-spots-bg--img {
    object-fit: cover;
}

/* Overlay laag — daar waar de spots in zitten — boven de bg, klikbaar */
.bm-spots-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none; /* overlay zelf niet klikbaar, alleen spots wel */
}

/* ─────────────────────────────────────────────────────────────────
   Individuele spots — absolute op X/Y procent
   ───────────────────────────────────────────────────────────────── */
.bm-spot {
    position: absolute;
    /* left/top via inline style; centreer met translate */
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Pin: punt onderaan wijst naar de positie, dus translate verschilt */
.bm-spot--pin {
    transform: translate(-50%, -100%);
}

.bm-spot-marker {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: transform 0.2s ease;
    position: relative;
}

.bm-spot-marker:hover,
.bm-spot-marker:focus-visible {
    transform: scale(1.15);
    outline: none;
    z-index: 5;
}

/* Pin marker — Phosphor map-pin in cirkel */
.bm-spot-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bm-spot-color, var(--color-primary));
    color: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border: 2px solid var(--color-white);
}

.bm-spot-pin svg {
    width: 20px;
    height: 20px;
}

/* v2.4.0: Custom icoon marker — eigen Phosphor icon in cirkel (zelfde stijl als pin) */
.bm-spot-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bm-spot-color, var(--color-primary));
    color: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border: 2px solid var(--color-white);
    position: relative;
}

.bm-spot-icoon svg {
    width: 20px;
    height: 20px;
}

/* Bolletje marker */
.bm-spot-bol {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: var(--bm-spot-color, var(--color-primary));
    border: 3px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    position: relative;
}

/* ─────────────────────────────────────────────────────────────────
   Pulse-animatie — globaal (legacy: ly_spots_pulseren_pins/_bolletjes)
   en per-pin (v2.4.0: spot_pulseren toggle → .bm-spot--puls class)
   ───────────────────────────────────────────────────────────────── */
.bm-spots-canvas--puls-pins .bm-spot--pin .bm-spot-pin::after,
.bm-spot--puls.bm-spot--pin .bm-spot-pin::after,
.bm-spot--puls .bm-spot-icoon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--bm-spot-color, var(--color-primary));
    opacity: 0;
    animation: bm-spot-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

.bm-spots-canvas--puls-bols .bm-spot--bolletje .bm-spot-bol::after,
.bm-spot--puls.bm-spot--bolletje .bm-spot-bol::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--bm-spot-color, var(--color-primary));
    opacity: 0.4;
    animation: bm-spot-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes bm-spot-pulse {
    0%   { transform: scale(0.6); opacity: 0.7; }
    80%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* v2.4.0: video embed wrapper (gebruikt door media en tekst-combinatie blokken) */
.bm-video-embed {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius, 8px);
    background: #000;
}
.bm-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.bm-media-figure--embed,
.bm-tc-media--embed {
    margin: 0;
}
.bm-tc-media--embed { aspect-ratio: auto; }

/* ─────────────────────────────────────────────────────────────────
   Tooltip — verschijnt boven de spot bij hover/focus
   Edge-detection classes verplaatsen tooltip naar links/rechts/onder
   ───────────────────────────────────────────────────────────────── */
.bm-spot-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--color-white);
    color: var(--color-dark);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    min-width: 220px;
    max-width: 280px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Pijltje onder tooltip wijzend naar marker */
.bm-spot-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--color-white);
}

/* Tonen op hover/focus (van marker of overlap met tooltip zelf) */
.bm-spot:hover .bm-spot-tooltip,
.bm-spot:focus-within .bm-spot-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Pin-spots: tooltip moet boven de pin (niet boven het translate-punt) */
.bm-spot--pin .bm-spot-tooltip {
    bottom: calc(100% + 8px);
}

/* Edge-detection: tooltip tegen linkerrand → naar rechts uitlijnen */
.bm-spot--edge-left .bm-spot-tooltip {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.bm-spot--edge-left:hover .bm-spot-tooltip,
.bm-spot--edge-left:focus-within .bm-spot-tooltip {
    transform: translateX(0) translateY(0);
}
.bm-spot--edge-left .bm-spot-tooltip::after {
    left: 24px;
}

/* Edge-detection: tegen rechterrand → naar links uitlijnen */
.bm-spot--edge-right .bm-spot-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.bm-spot--edge-right:hover .bm-spot-tooltip,
.bm-spot--edge-right:focus-within .bm-spot-tooltip {
    transform: translateX(0) translateY(0);
}
.bm-spot--edge-right .bm-spot-tooltip::after {
    left: auto;
    right: 24px;
    transform: none;
}

/* Edge-detection: tegen bovenrand → tooltip ONDER de marker */
.bm-spot--edge-top .bm-spot-tooltip {
    bottom: auto;
    top: calc(100% + 14px);
}
.bm-spot--edge-top.bm-spot--pin .bm-spot-tooltip {
    top: calc(100% + 8px);
}
.bm-spot--edge-top .bm-spot-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--color-white);
}

/* Tooltip content */
.bm-spot-tooltip-titel {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: var(--fw-bold, 700);
    color: var(--color-primary);
    line-height: 1.3;
}

.bm-spot-tooltip-tekst {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-gray-700);
}

.bm-spot-tooltip-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: var(--fw-semibold, 600);
    color: var(--color-primary);
    text-decoration: none;
}

.bm-spot-tooltip-link:hover { text-decoration: underline; }

.bm-spot-tooltip-link svg { width: 14px; height: 14px; }

/* ─────────────────────────────────────────────────────────────────
   Donkere achtergrond varianten
   ───────────────────────────────────────────────────────────────── */
.bg-donker .bm-spots-titel,
.bg-donker .bm-spots-inleiding { color: var(--color-white); }

/* ─────────────────────────────────────────────────────────────────
   Responsive — kleinere markers op mobiel
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bm-spot-pin { width: 30px; height: 30px; }
    .bm-spot-pin svg { width: 16px; height: 16px; }
    .bm-spot-icoon { width: 30px; height: 30px; }
    .bm-spot-icoon svg { width: 16px; height: 16px; }
    .bm-spot-bol { width: 14px; height: 14px; border-width: 2px; }
    .bm-spot-tooltip { min-width: 180px; max-width: 240px; padding: 0.7rem 0.85rem; }
    .bm-spot-tooltip-titel { font-size: 0.9rem; }
    .bm-spot-tooltip-tekst { font-size: 0.8rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   TEKST COMBINATIE — variant TEGEL
   (afbeelding bovenaan + titel + tekst + buttons in een kaart)
   ═══════════════════════════════════════════════════════════════════ */

.s-bm-tc--tegel .bm-tc-side { /* zelfde container als andere varianten */ }

.bm-tc-tegel {
    background: var(--color-gray-100);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bm-tc-tegel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.bm-tc-tegel-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-gray-200);
}

.bm-tc-tegel-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-tc-tegel-body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bm-tc-tegel-titel {
    margin: 0 0 0.5rem;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    line-height: 1.3;
    color: var(--color-dark);
}

.bm-tc-tegel-tekst {
    margin: 0 0 1rem;
    color: var(--color-gray-700);
    font-size: 0.95rem;
}

.bm-tc-tegel-tekst :first-child { margin-top: 0; }
.bm-tc-tegel-tekst :last-child { margin-bottom: 0; }

.bm-tc-tegel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
}

/* Donkere achtergrond varianten */
.bg-donker .bm-tc-tegel {
    background: rgba(255, 255, 255, 0.06);
}
.bg-donker .bm-tc-tegel-titel { color: #fff; }
.bg-donker .bm-tc-tegel-tekst { color: rgba(255, 255, 255, 0.85); }

/* ═══════════════════════════════════════════════════════════════════
   v2.1.0 — UI fixes
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Volledige breedte — voeg subtiele zij-padding toe zodat tekst
      niet de viewport-rand raakt op grote schermen */
.breedte-volledig {
    padding-inline: clamp(1rem, 4vw, 3rem);
}

/* 2. Header — menu items en CTA verticaal centreren op gelijke hoogte */
.bm-header-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}
.bm-header-nav > a,
.bm-header-nav .pri-cta,
.bm-header-nav .sec-cta {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* 3. Offcanvas — CTA niet volle breedte, krijgt natuurlijke knop-breedte */
.bm-mobile-overlay .pri-cta,
.bm-mobile-overlay .sec-cta {
    align-self: flex-start;
    width: auto;
    display: inline-flex;
}

/* 4. CTA blok buttons — altijd centreren onder titel/subtekst */
.s-bm-cta .bm-cta-buttons,
.s-bm-cta .bm-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* 5. Quote — klantnaam, bedrijfsnaam en logo verticaal centreren */
.bm-quote-attribution,
.bm-quote-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.bm-quote-attribution .bm-quote-bedrijfslogo,
.bm-quote-author .bm-quote-bedrijfslogo {
    display: flex;
    align-items: center;
}
.bm-quote-attribution .bm-quote-bedrijfslogo img,
.bm-quote-author .bm-quote-bedrijfslogo img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
}

/* 6. Tag archive — ruimte onder "X artikelen met deze tag" */
.bm-tag-archive-header,
.tag-archive-intro,
.archive-header .archive-meta {
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* 7. Chevron icon dikker — applies to button-icons */
.pri-cta .bm-icon,
.sec-cta .bm-icon,
.tertiary-cta .bm-icon,
button .bm-icon {
    stroke-width: 2.5;
}
/* Voor inline SVGs (chevron) die geen Phosphor zijn */
.pri-cta svg[stroke-width],
.sec-cta svg[stroke-width],
button svg[stroke-width] {
    stroke-width: 2.5;
}

/* 8. Tekst-combinatie download knop — geen translate op hover
      (download-knop verspringt naar rechts in v2.0.x) */
.s-bm-tekst-combinatie .pri-cta:hover,
.s-bm-tekst-combinatie .sec-cta:hover,
.s-bm-tekst-combinatie .tertiary-cta:hover {
    transform: none;
}

/* 9. breedte-normaal alias toevoegen — Spots gebruikt 'normaal' nu */
.breedte-normaal {
    /* Fallback indien spots PHP nog 'normaal' class output voor er een
       echte breedte-normaal CSS class was. Wordt opgevangen door bestaande
       .breedte-normaal definitie hierboven. */
}

/* 10. Contact blok — 2-kolom layout v2.1.1
       Kolom 1 (telefoon/adres/email/social) | Kolom 2 (openingstijden)
       Mobiel: alles 1 kolom, social onderaan via CSS order */
.bm-contact-grid {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
}

.bm-contact-grid--kolommen-1 {
    grid-template-columns: 1fr;
}

.bm-contact-grid--kolommen-2 {
    grid-template-columns: 1fr 1fr;
}

.bm-contact-kolom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .bm-contact-grid--kolommen-2 {
        /* Op mobiel: alles uit kolom 1 + 2 in 1 kolom-flow */
        grid-template-columns: 1fr;
    }
    .bm-contact-grid--kolommen-2 .bm-contact-kolom--1 {
        order: 1;
    }
    .bm-contact-grid--kolommen-2 .bm-contact-kolom--2 {
        /* Openingstijden op mobiel TUSSEN andere items en social
           door volg-ons in kolom-1 als laatste te plaatsen. We passen 
           order aan zodat social het laatst rendert. */
        order: 2;
    }
    /* Volg ons (social) altijd helemaal onderaan op mobiel */
    .bm-contact-grid--kolommen-2 .bm-contact-kolom--1 .bm-contact-item:has(.bm-contact-social) {
        order: 99;
    }
}

/* 11. Contact item layout — geen donkere hover, geen mee-strekken */
.bm-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 0;
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.bm-contact-item--linked:hover {
    color: var(--color-primary);
    background: transparent;
}
.bm-contact-item--linked:hover .bm-contact-item-value {
    color: var(--color-primary);
}

.bm-contact-item-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bm-contact-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bm-contact-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.bm-contact-item-label {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--color-dark);
    text-transform: none;
    letter-spacing: normal;
}

.bm-contact-item-value {
    color: var(--color-gray-700);
    line-height: 1.5;
}

.bm-contact-openingstijden {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bm-contact-openingstijden li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}
.bm-contact-openingstijden li:last-child {
    border-bottom: 0;
}
.bm-contact-openingstijden-extra {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    font-style: italic;
}

/* 12. Contact-adres niet meer mee-strekken op hover (bug v2.0.x) */
/* (bovenstaande .bm-contact-item--linked:hover regelt dit nu) */

/* 13. Social icons — round, brand-color hover
   v2.1.3: duplicate definitie verwijderd; styling staat nu op één plek
   bij de letter/SVG mask CSS (zoek '.bm-social-link::before' in dit bestand). */
.bm-contact-social,
.bm-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   v2.3.0 — Uitlijning utilities, divider, hero verbeteringen, etc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Generieke uitlijning util's ──────────────────────────────── */
.bm-t-align-links { text-align: left; }
.bm-t-align-gecentreerd { text-align: center; }

/* Buttons binnen gecentreerde sectie ook centreren */
.bm-t-align-gecentreerd .cta-container,
.bm-t-align-gecentreerd .bm-buttons-group,
.bm-t-align-gecentreerd .bm-diensten-buttons-onder,
.bm-t-align-gecentreerd .bm-embed-buttons {
    justify-content: center;
}
.bm-t-align-links .cta-container,
.bm-t-align-links .bm-buttons-group,
.bm-t-align-links .bm-diensten-buttons-onder,
.bm-t-align-links .bm-embed-buttons {
    justify-content: flex-start;
}

/* Header-tekst binnen sectie volgt sectie-uitlijning */
.bm-t-align-gecentreerd .bm-diensten-header,
.bm-t-align-gecentreerd .bm-artikelen-header,
.bm-t-align-gecentreerd .bm-embed-header {
    text-align: center;
    margin-inline: auto;
    max-width: 65ch;
}
.bm-t-align-links .bm-diensten-header,
.bm-t-align-links .bm-artikelen-header,
.bm-t-align-links .bm-embed-header {
    text-align: left;
    max-width: none;
}

/* ── Diensten buttons positie ──────────────────────────────── */
/* "Naast titel rechts" — header wordt grid met tekst links + buttons rechts */
.s-bm-diensten--btn-naast_titel_rechts .bm-diensten-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: clamp(1rem, 2vw, 2rem);
    max-width: none;          /* override de bm-t-align centered max-width */
}
.s-bm-diensten--btn-naast_titel_rechts .bm-diensten-header-tekst {
    min-width: 0;
}
.s-bm-diensten--btn-naast_titel_rechts .bm-diensten-header-buttons {
    flex-shrink: 0;
}
.s-bm-diensten--btn-naast_titel_rechts .bm-diensten-buttons-onder--mobile-only {
    display: none;
}

@media (max-width: 768px) {
    /* Op mobiel: header weer 1 kolom, buttons-rechts wordt verborgen,
       buttons-onder wordt zichtbaar */
    .s-bm-diensten--btn-naast_titel_rechts .bm-diensten-header {
        grid-template-columns: 1fr;
    }
    .s-bm-diensten--btn-naast_titel_rechts .bm-diensten-header-buttons {
        display: none;
    }
    .s-bm-diensten--btn-naast_titel_rechts .bm-diensten-buttons-onder--mobile-only {
        display: flex;
        margin-top: clamp(1.5rem, 3vw, 2.5rem);
    }
}

/* Buttons-onder spacing */
.bm-diensten-buttons-onder {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── Embed: nieuwe header + buttons styling ──────────────────────────── */
.bm-embed-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.bm-embed-header .bm-embed-titel {
    margin: 0 0 0.5em;
}
.bm-embed-header .bm-embed-inleiding {
    margin: 0;
    color: var(--color-gray-700);
}
.bm-embed-buttons {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── Hero artikel: label niet vol breed ──────────────────────── */
.bm-hero-content--artikel .bm-hero-cat {
    display: inline-block;
    width: auto;
    margin-bottom: 1rem;
}

/* Hero artikel: auteur uitlijnen met 690-content */
.bm-hero-content--artikel {
    max-width: var(--max-narrow);
    margin-inline: auto;
    text-align: center;
}
.bm-hero-content--artikel .bm-hero-auteur {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}
.bm-hero-content--artikel .bm-hero-meta-info {
    justify-content: center;
}

/* ── Divider blok ──────────────────────────────────────────── */
.s-bm-divider {
    /* base */
}
.bm-divider-lijn {
    border: 0;
    border-top: 1px solid;
    margin: 0;
}
.bm-divider-spacer {
    height: 1px;
    background: transparent;
}

/* ── Mediablok mobiel: altijd 1 slide ──────────────────────── */
@media (max-width: 768px) {
    .bm-media-slider {
        --slides-per-view: 1 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   v2.3.3 — Bug fixes en verfijningen
   ═══════════════════════════════════════════════════════════════════ */

/* Hero — section MOET position: relative zijn anders krijgt absolute
   bm-hero-bg geen anker en plakt 'ie buiten de hero (onder de section).
   Dat verklaart user-feedback: "achtergrond video onder de hero". */
.s-bm-hero {
    position: relative;
    overflow: hidden;
}

/* Hero artikel: categorie-label klein (was te breed) — extra specificiteit */
.bm-hero-content--artikel .bm-eyebrow.bm-hero-cat,
.bm-hero-content--artikel a.bm-hero-cat {
    display: inline-block;
    width: auto;
    max-width: max-content;
    padding-inline: 0.75rem;
    margin-bottom: 1rem;
}

/* Hero artikel content: 690px breed (gebruikt nu nieuwe --max-narrow) */
.bm-hero-content--artikel {
    max-width: var(--max-narrow);
    margin-inline: auto;
}

/* Diensten: buttons rechts naast titel — uitlijning op visible bottom van lead.
   p.lead heeft margin-bottom 1.25em die de align-items: end positie verschuift.
   Fix: laatste element in tekst-block zonder margin-bottom. */
.s-bm-diensten--btn-naast_titel_rechts .bm-diensten-header-tekst > :last-child {
    margin-bottom: 0;
}

/* CTA: buttons gecentreerd onder titel — hele cta-container ook centreren */
.s-bm-cta .cta-container,
.s-bm-cta .bm-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.s-bm-cta {
    text-align: center;
}
.s-bm-cta .c-bm-cta {
    margin-inline: auto;
}

/* Reviewer card (op single-faq.php) */
.bm-reviewer-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
}
.bm-reviewer-card-foto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.bm-reviewer-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bm-reviewer-card-info .bm-reviewer-card-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bm-reviewer-card-info strong {
    font-size: 1rem;
    line-height: 1.2;
}
.bm-reviewer-card-info small {
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

/* FAQ antwoord layout */
.s-bm-faq-antwoord .bm-prose.bm-t-narrow {
    margin-inline: auto;
}
.s-bm-faq-antwoord .bm-t-center {
    text-align: center;
}

/* FAQ-list bm-t-narrow gecentreerd (al gefixt v2.3.1, ter zekerheid) */
.bm-faq-list.bm-t-narrow {
    margin-inline: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.5.0 — alle nieuwe styling in één blok
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Header: CTA verticaal met menu-items uitlijnen ───────────────── */
.bm-header-nav,
.bm-header-nav > ul,
.bm-header-actions {
    display: flex;
    align-items: center;
}
/* v2.5.9: globale `ul li { margin-bottom: 0.4em }` resetten voor nav menu's
   zodat menu-items verticaal in het midden staan met de CTA */
.bm-header .menu li,
.bm-header-nav li,
.bm-offcanvas .menu li,
.bm-offcanvas-nav li,
.bm-footer .menu li,
.bm-footer-nav li {
    margin-bottom: 0;
}
.bm-header-cta,
.bm-header .bm-btn {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.bm-header a.bm-nav-link,
.bm-header .menu-item > a {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
/* Chevron in button — duidelijker (was te dun) */
.bm-btn svg,
.bm-header-cta svg {
    stroke-width: 2.5;
}

/* ─── Off-canvas: CTA niet vol breedte ─────────────────────────────── */
.bm-offcanvas .bm-btn,
.bm-offcanvas-cta {
    width: auto;
    align-self: flex-start;
    display: inline-flex;
}
.bm-offcanvas-actions {
    align-items: flex-start;
}

/* ─── Spots: nieuwe icoon-marker (al in v2.4 maar uitbreiden) ───────── */
.bm-spots-buttons-wrapper {
    margin-top: 1.5rem;
}
.bm-spots-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* ─── Tekst-combinatie: spots-variant ─────────────────────────────── */
.bm-tc-spots-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius, 8px);
    overflow: hidden;
}
.bm-tc-spots-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.bm-tc-spots-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Tekst-combinatie: tekst-uitlijning + breedte + zijruimte ─────── */
.bm-tc-tekst-gecentreerd .bm-tc-tekst,
.bm-tc-tekst-gecentreerd .bm-tc-form-trust-boven,
.bm-tc-tekst-gecentreerd .bm-tc-form-trust-onder,
.bm-tc-tekst-gecentreerd .bm-tc-form-onderkant,
.bm-tc-tekst-gecentreerd .bm-tc-form-ups {
    text-align: center;
}
.bm-tc-tekst-gecentreerd .bm-buttons,
.bm-tc-tekst-gecentreerd .bm-tc-form-ups,
.bm-tc-tekst-gecentreerd .bm-tc-form-trust-onder {
    justify-content: center;
}
/* Volle breedte heeft ALTIJD zijruimte (was: tegen zijkanten) */
.s-bm-tc .c-bm-tc.breedte-volledig {
    padding-inline: clamp(1rem, 4vw, 3rem);
}
.s-bm-tc .c-bm-tc.breedte-smal {
    max-width: 690px;
    margin-inline: auto;
}

/* Download knop hover — niet meer naar rechts schuiven */
.bm-tc-tekst .bm-btn:hover,
.bm-tc-tekst a[download]:hover {
    transform: none;
}

/* Form ups inline + responsive + centeerbaar */
.bm-tc-form-ups {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-top: 1rem;
}
.bm-tc-form-ups li,
.bm-tc-form-ups > * {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ─── CTA buttons gecentreerd bij 1 of 2 buttons ───────────────────── */
.s-bm-cta .bm-buttons,
.s-bm-cta .bm-cta-buttons,
.s-bm-cta [class*="-buttons"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}
.s-bm-cta {
    text-align: center;
}

/* ─── Quote portret — uitlijning klantnaam/bedrijf/logo ────────────── */
.s-bm-quote .bm-quote-attribution,
.s-bm-quote--portret .bm-quote-attribution {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.s-bm-quote--portret .bm-quote-attribution-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.s-bm-quote--portret .bm-quote-logo {
    flex: 0 0 auto;
    max-height: 40px;
    width: auto;
}

/* ─── Tag pagina hero: ruimte onder count ──────────────────────────── */
.s-bm-tag-hero .bm-tag-count,
.s-bm-tag-hero p:last-child {
    margin-bottom: 2rem;
}

/* ─── Contact: adres-hoogte fix + 2-kolom mobile order ─────────────── */
.bm-contact-grid--kolommen-2 {
    align-items: start; /* voorkomt dat items uitrekken naar elkaars hoogte */
}
.bm-contact-grid--kolommen-2 .bm-contact-kolom {
    align-self: start;
    min-width: 0;
}
.bm-contact-item {
    align-self: start; /* niet uitrekken */
}
/* Volg ons zonder icon: minder padding-links zodat content uitlijnt */
.bm-contact-item--no-icon {
    padding-left: 0;
}
.bm-contact-item--no-icon .bm-contact-item-content {
    margin-left: 0;
}

/* Mobiel: 2-kolom layout valt naar 1-kolom — volg ons (in kolom 1)
   moet ALTIJD na openingstijden (kolom 2). Dat doen we via order. */
@media (max-width: 768px) {
    .bm-contact-grid--kolommen-2 {
        display: flex;
        flex-direction: column;
    }
    .bm-contact-kolom--1 { order: 1; }
    .bm-contact-kolom--2 { order: 2; }
    /* Social-item zit in kolom 1 — verplaats naar het eind */
    .bm-contact-kolom--1 > .bm-contact-item--no-icon {
        order: 99;
    }
    .bm-contact-kolom--1 {
        display: flex;
        flex-direction: column;
    }
}

/* ─── Hero: artikel-label compact (smal) ───────────────────────────── */
.bm-hero-cat--smal {
    display: inline-block;
    width: auto;
    align-self: flex-start;
    max-width: max-content;
}

/* v2.5.48: artikel-hero heeft .bm-hero-content--artikel met flex column +
   align-items: center. Hierin moet de tag dus gecentreerd zijn ipv flex-start. */
.bm-hero-content--artikel .bm-hero-cat--smal {
    align-self: center;
}

/* ─── Hero pagina-presets ──────────────────────────────────────────── */
.bm-hero-preset--centered_groot {
    text-align: center;
    max-width: 920px;
    margin-inline: auto;
}
.bm-hero-preset--minimal {
    max-width: 690px;
    margin-inline: auto;
}
.bm-hero-preset--minimal h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.bm-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
.bm-hero-preset--split_links .bm-hero-split {
    direction: rtl;
}
.bm-hero-preset--split_links .bm-hero-split > * {
    direction: ltr;
}
.bm-hero-split-tekst {
    min-width: 0;
    max-width: 52ch;
}
.bm-hero-preset--split_links .bm-hero-split-tekst {
    margin-inline-start: auto;
}
.bm-hero-split-afb {
    min-width: 0;
}
.bm-hero-split-afb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius, 12px);
    object-fit: cover;
    box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,0.08));
}
.bm-hero-preset--centered_groot {
    text-align: center;
    max-width: 920px;
    margin-inline: auto;
}
.bm-hero-preset--centered_groot .bm-buttons {
    justify-content: center;
}
.bm-hero-preset--achtergrond_full {
    text-align: center;
    color: var(--color-white);
    padding-block: clamp(3rem, 8vw, 6rem);
}
@media (max-width: 768px) {
    .bm-hero-split {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 5vw, 2.5rem);
    }
    .bm-hero-split-tekst {
        max-width: none;
    }
}

/* ─── Mediablok: grid 2/3/4 fix (auto-fit kan items beperken) ──────── */
.bm-media-grid {
    display: grid;
    gap: 1rem;
}
.bm-media-grid.twee-items  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-media-grid.drie-items  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-media-grid.vier-items  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .bm-media-grid.drie-items,
    .bm-media-grid.vier-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .bm-media-grid.twee-items,
    .bm-media-grid.drie-items,
    .bm-media-grid.vier-items { grid-template-columns: 1fr; }
}

/* ─── Lightbox: pijltjes ──────────────────────────────────────────── */
.bm-lightbox-prev,
.bm-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
}
.bm-lightbox-prev:hover,
.bm-lightbox-next:hover {
    background: rgba(0, 0, 0, 0.7);
}
.bm-lightbox-prev { left: 1rem; }
.bm-lightbox-next { right: 1rem; }
@media (max-width: 600px) {
    .bm-lightbox-prev { left: 0.5rem; }
    .bm-lightbox-next { right: 0.5rem; }
}

/* ─── Mediablok: slider pijltjes uitlijnen op afb-hoogte ──────────── */
.bm-media-slider .bm-slider-prev,
.bm-media-slider .bm-slider-next {
    /* Reken niet meer mee met bullets — pin op embla__viewport hoogte */
    top: 0;
    transform: none;
    height: var(--bm-slider-img-height, 100%);
}
.bm-media-slider .embla__viewport {
    position: relative;
}

/* ─── Artikelen blok: slider modus ────────────────────────────────── */
.bm-artikelen-slider {
    position: relative;
}
.bm-artikelen-slider .embla__container {
    display: flex;
    gap: 1rem;
}
.bm-artikelen-slider .embla__slide {
    flex: 0 0 calc(100% / var(--slides-per-view, 3));
    min-width: 0;
}
@media (max-width: 768px) {
    .bm-artikelen-slider .embla__slide {
        flex: 0 0 calc(100% / max(1, var(--slides-per-view-mobile, 1)));
    }
}

/* Paginering onder artikelenblok */
.bm-artikelen-paginering {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.bm-artikelen-paginering .bm-pag-prev,
.bm-artikelen-paginering .bm-pag-next {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 500;
}
.bm-pag-info {
    color: var(--color-gray-700);
    font-size: 0.9rem;
}

/* ─── Artikel-meta: meerdere auteurs cards ────────────────────────── */
.bm-auteur-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.bm-auteur-cards-wrapper .bm-auteur-card {
    flex: 1 1 280px;
}
.bm-auteur-card--reviewer {
    border-left: 3px solid var(--color-primary);
}
.bm-auteur-card--mede .bm-auteur-card-label {
    opacity: 0.8;
}

/* Share-only stijl uitlijning (was niet mooi) */
.s-bm-artikel-meta--alleen_share .bm-artikel-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
}
.s-bm-artikel-meta--alleen_share.bm-t-center .bm-artikel-share,
.bm-t-align-gecentreerd .bm-artikel-share {
    justify-content: center;
}

/* Smooth scroll naar anchor */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* ─── v2.5.0 Items blok — per-CPT kaart-templates ──────────────────── */

/* Vacature kaart */
.bm-artikel-kaart--vacature {
    border: 1px solid var(--color-gray-200, #e5e5e5);
    border-radius: var(--radius, 8px);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bm-artikel-kaart--vacature:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px -8px rgba(0,0,0,0.12);
}
.bm-vacature-kaart-tag {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bm-vacature-kaart-meta {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bm-vacature-kaart-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-700, #555);
}
.bm-vacature-kaart-meta svg {
    color: var(--color-primary);
    flex: 0 0 auto;
}
.bm-vacature-kaart-salaris {
    font-weight: 600;
    color: var(--color-dark);
}

/* Dienst kaart */
.bm-artikel-kaart--dienst .bm-dienst-kaart-icoon {
    /* v2.5.30: rondje terug naar 48px, icoon 24px erin (50% padding visueel) */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100, #f7f7f7);
    border-radius: 50%;
    margin: 1rem 0 1rem 1rem;
    color: var(--color-primary);
}
/* v2.5.30: SVG kleiner dan container — geeft padding-effect */
.bm-artikel-kaart--dienst .bm-dienst-kaart-icoon svg {
    width: 24px;
    height: 24px;
}
.bm-artikel-kaart--dienst {
    /* v2.5.9: tekst links uitgelijnd (was: center) */
    text-align: left;
}
.bm-artikel-kaart--dienst .bm-artikel-kaart-titel {
    /* v2.5.9: titel links uitgelijnd */
    text-align: left;
}

/* Team kaart */
.bm-artikel-kaart--team {
    text-align: center;
}
.bm-team-kaart-foto {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    width: 160px;
    margin: 1rem auto;
}
.bm-team-kaart-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bm-team-kaart-functie {
    color: var(--color-gray-700, #555);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

/* FAQ kaart */
.bm-artikel-kaart--faq .bm-artikel-kaart-titel {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.bm-artikel-kaart--faq .bm-artikel-kaart-titel svg {
    flex: 0 0 auto;
    color: var(--color-primary);
    margin-top: 0.2rem;
}
.bm-faq-kaart-tag {
    display: inline-block;
    background: var(--color-gray-100, #f0f0f0);
    color: var(--color-gray-700, #555);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* "Lees meer" link onderaan kaarten */
.bm-artikel-kaart-link-meer {
    display: inline-block;
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.5.30/34/35: Compactere typografie in smal context
   ═══════════════════════════════════════════════════════════════════════
   Voor secties met `breedte-smal` of `bm-t-narrow` (max ~690px):
   h2 op 24px voor prettiger lezen. Andere headings ook iets kleiner.
   Body blijft op 16px, geen heading wordt kleiner dan body.

   v2.5.35: gebruiker-gegeven selector — `.bm-t-narrow h2` toegevoegd
   (was alleen `.breedte-smal`). Beide classes pakken zelfde concept. */

.breedte-smal h1,
.bm-t-narrow h1 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.75rem) !important;  /* 24 → 28px */
}
.breedte-smal h2,
.bm-t-narrow h2 {
    font-size: 1.5rem !important;   /* 24px */
}
.breedte-smal h3,
.bm-t-narrow h3 {
    font-size: 1.25rem !important;  /* 20px */
}
.breedte-smal h4,
.bm-t-narrow h4 {
    font-size: 1.125rem !important; /* 18px */
}
.breedte-smal h5,
.breedte-smal h6,
.bm-t-narrow h5,
.bm-t-narrow h6 {
    font-size: 1rem !important;     /* 16px — ondergrens (= body) */
}


/* ═══════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER (v2.5.62)
   ═══════════════════════════════════════════════════════════════════════
   Rechtsonderin, klein kaartje. Volgt theme tokens voor styling.
   Z-index hoger dan modals zodat banner altijd boven content komt. */
.bm-cc-banner {
    position: fixed;
    bottom: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    z-index: 99999;
    max-width: 420px;
    width: calc(100vw - 2rem);
    background: var(--color-white, #fff);
    border-radius: var(--radius-card, 12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    overflow: hidden;
    animation: bm-cc-in 0.25s ease-out;
}

@keyframes bm-cc-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bm-cc-banner[hidden] {
    display: none;
}

.bm-cc-banner-inner {
    padding: clamp(1rem, 2vw, 1.25rem);
}

.bm-cc-titel {
    font-size: 1.125rem !important;
    font-weight: var(--fw-semibold, 600);
    margin: 0 0 0.5rem;
    color: var(--color-dark, #111);
}

.bm-cc-tekst {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-gray-700, #374151);
}

.bm-cc-link {
    color: var(--color-primary, #000);
    text-decoration: underline;
}

.bm-cc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-cc-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
    line-height: 1.2;
}

.bm-cc-btn--primary {
    background: var(--color-primary, #000);
    color: var(--color-white, #fff);
}
.bm-cc-btn--primary:hover {
    background: var(--color-primary-hover, #1a1a1a);
}

.bm-cc-btn--secondary {
    background: transparent;
    border-color: var(--color-gray-300, #d1d5db);
    color: var(--color-gray-800, #1f2937);
}
.bm-cc-btn--secondary:hover {
    background: var(--color-gray-100, #f3f4f6);
    border-color: var(--color-gray-400, #9ca3af);
}

/* Voorkeuren-categorieën */
.bm-cc-categorie {
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    padding: 0.75rem 0;
}
.bm-cc-categorie:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.bm-cc-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.bm-cc-cat-naam {
    font-weight: var(--fw-semibold, 600);
    font-size: 0.9375rem;
    color: var(--color-dark, #111);
}

.bm-cc-cat-status {
    font-size: 0.75rem;
    color: var(--color-gray-500, #6b7280);
    font-style: italic;
}

.bm-cc-cat-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-gray-600, #4b5563);
}

/* Toggle switch */
.bm-cc-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.bm-cc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.bm-cc-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-gray-300, #d1d5db);
    border-radius: 22px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.bm-cc-toggle-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.bm-cc-toggle input:checked + .bm-cc-toggle-slider {
    background-color: var(--color-primary, #000);
}
.bm-cc-toggle input:checked + .bm-cc-toggle-slider::before {
    transform: translateX(16px);
}
.bm-cc-toggle input:focus-visible + .bm-cc-toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.bm-cc-prefs .bm-cc-buttons {
    margin-top: 1rem;
}

/* Mobile: meer breedte gebruiken */
@media (max-width: 480px) {
    .bm-cc-banner {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: none;
        width: 100%;
        border-radius: 12px 12px 0 0;
        border-bottom: 0;
    }
}



/* ═══════════════════════════════════════════════════════════════════════
   ZON — HUISSTIJLLAAG
   ═══════════════════════════════════════════════════════════════════════
   Deze laag zet de componenten van het basisthema om naar het goedgekeurde
   ontwerp van Stichting Zorg Om Naasten Lomm. Volgorde:

     1. Basis en typografie
     2. Knoppen
     3. Header
     4. Hero
     5. Feiten
     6. Secties en beeld
     7. Kaarten
     8. CTA
     9. Contact en formulier
    10. Artikelen
    11. Footer
    12. Responsive en print
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   1. BASIS EN TYPOGRAFIE
   ─────────────────────────────────────────────────────────────────────── */

body {
    line-height: 1.7;
    text-wrap: pretty;
}

/* Container: vaste 24px zijruimte, niet meeschalend */
.breedte-normaal,
.breedte-breed,
.breedte-smal {
    padding-inline: 24px;
}

/* Koppen in Arvo. H2 is crimson, dat is het dragende accent in het ontwerp. */
h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.1;
    letter-spacing: 0;
}

h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-primary);
}

h3 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--color-dark);
}

/* Koppen op kleurvlakken blijven wit */
.bg-donker h2,
.bg-accent h2,
.s-bm-hero--has-media h2,
.bm-hero-tekst-licht h2,
.bm-cta-paneel h2 {
    color: var(--color-white);
}

/* Eyebrow: klein, vet, ruim gespatieerd, warmbruin */
.bm-eyebrow {
    margin-bottom: 6px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-label);
    border: 0;
    padding: 0;
    background: none;
}

.lead {
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.6;
    color: var(--color-ink-soft);
}

/* Lopende tekst is iets zachter dan de koppen, strong pakt de volle inkt */
.c-bm-tekst,
.bm-tc-tekst,
.bm-prose,
.bm-prose-full {
    color: var(--color-ink-soft);
}

.c-bm-tekst p,
.bm-tc-tekst p,
.bm-prose p,
.bm-prose-full p {
    line-height: 1.75;
}

.c-bm-tekst strong,
.bm-tc-tekst strong,
.bm-prose strong,
.bm-prose-full strong {
    color: var(--color-dark);
}

/* Links in tekst: onderstreept, niet alleen gekleurd */
.c-bm-tekst a:not([class*="-cta"]),
.bm-tc-tekst a:not([class*="-cta"]),
.bm-prose a:not([class*="-cta"]) {
    color: var(--color-primary-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 0.08em;
}

.c-bm-tekst a:not([class*="-cta"]):hover,
.bm-tc-tekst a:not([class*="-cta"]):hover,
.bm-prose a:not([class*="-cta"]):hover {
    color: var(--color-primary);
    text-decoration-thickness: 0.14em;
}


/* ───────────────────────────────────────────────────────────────────────
   2. KNOPPEN
   Pill, 2px rand, 52px hoog. Primair is crimson, secundair is wit met
   crimson rand, tertiair is een outline-knop.

   Let op de specificiteit: het basisthema zet kleuren via `a.pri-cta:visited`
   (0,2,1). Onze regels moeten daar overheen, dus schrijven we ze uit met
   tag plus :visited erbij.
   ─────────────────────────────────────────────────────────────────────── */

.pri-cta,
.sec-cta,
.ter-cta {
    gap: 8px;
    min-height: 52px;
    padding: 14px 26px;
    border-width: 2px;
    border-style: solid;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* ── Primair: gevuld crimson ── */
.pri-cta,
a.pri-cta,
.pri-cta:visited,
a.pri-cta:visited {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: none;
}

.pri-cta:hover,
a.pri-cta:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
    transform: none;
    box-shadow: none;
}

/* ── Secundair: wit vlak met crimson rand ── */
.sec-cta,
a.sec-cta,
.sec-cta:visited,
a.sec-cta:visited {
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sec-cta:hover,
a.sec-cta:hover {
    background: var(--color-roze-zacht);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: none;
}

.sec-cta:hover .button-text,
.sec-cta:hover .button-icon {
    color: var(--color-primary);
}

/* ── Tertiair: outline, zelfde vorm als de rest ── */
.ter-cta,
a.ter-cta,
.ter-cta:visited,
a.ter-cta:visited {
    padding: 14px 26px;
    min-height: 52px;
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
}

.ter-cta:hover,
a.ter-cta:hover {
    background: var(--color-roze-zacht);
    color: var(--color-primary);
    transform: none;
}

/* ── Op donkere en gekleurde vlakken ──
   Primair wordt een wit vlak, de rest een transparante ghost met witte rand. */
.bg-donker a.pri-cta,
.bg-donker a.pri-cta:visited,
.bg-accent a.pri-cta,
.bg-accent a.pri-cta:visited,
.bm-cta-paneel a.pri-cta,
.bm-cta-paneel a.pri-cta:visited,
.s-bm-hero--has-media a.pri-cta,
.s-bm-hero--has-media a.pri-cta:visited {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.bg-donker a.pri-cta:hover,
.bg-accent a.pri-cta:hover,
.bm-cta-paneel a.pri-cta:hover,
.s-bm-hero--has-media a.pri-cta:hover {
    background: var(--color-cream);
    border-color: var(--color-cream);
    color: var(--color-primary);
}

.bg-donker a.sec-cta,
.bg-donker a.sec-cta:visited,
.bg-donker a.ter-cta,
.bg-donker a.ter-cta:visited,
.bg-accent a.sec-cta,
.bg-accent a.sec-cta:visited,
.bg-accent a.ter-cta,
.bg-accent a.ter-cta:visited,
.bm-cta-paneel a.sec-cta,
.bm-cta-paneel a.sec-cta:visited,
.bm-cta-paneel a.ter-cta,
.bm-cta-paneel a.ter-cta:visited,
.s-bm-hero--has-media a.sec-cta,
.s-bm-hero--has-media a.sec-cta:visited,
.s-bm-hero--has-media a.ter-cta,
.s-bm-hero--has-media a.ter-cta:visited {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--color-white);
}

.bg-donker a.sec-cta:hover,
.bg-donker a.ter-cta:hover,
.bg-accent a.sec-cta:hover,
.bg-accent a.ter-cta:hover,
.bm-cta-paneel a.sec-cta:hover,
.bm-cta-paneel a.ter-cta:hover,
.s-bm-hero--has-media a.sec-cta:hover,
.s-bm-hero--has-media a.ter-cta:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--color-white);
    color: var(--color-white);
}

.bg-donker a.sec-cta:hover .button-text,
.bg-accent a.sec-cta:hover .button-text,
.bm-cta-paneel a.sec-cta:hover .button-text,
.s-bm-hero--has-media a.sec-cta:hover .button-text {
    color: var(--color-white);
}

/* ── Expliciete tekst- en icoonkleuren ──
   De knoptekst leunde op color-overerving van de <a>. Op de staging bleek dat
   fragiel in combinatie met geoptimaliseerde/verouderde CSS (LiteSpeed CCSS),
   met wit-op-wit als gevolg. Daarom zetten we de kleur ook expliciet op de
   spans zelf, met !important zodat geen enkele tussenlaag er nog overheen kan. */
a.pri-cta .button-text,
a.pri-cta .button-icon {
    color: var(--color-white) !important;
}

a.sec-cta .button-text,
a.sec-cta .button-icon,
a.ter-cta .button-text,
a.ter-cta .button-icon {
    color: var(--color-primary) !important;
}

.bg-donker a.pri-cta .button-text,
.bg-donker a.pri-cta .button-icon,
.bg-accent a.pri-cta .button-text,
.bg-accent a.pri-cta .button-icon,
.bm-cta-paneel a.pri-cta .button-text,
.bm-cta-paneel a.pri-cta .button-icon,
.s-bm-hero--has-media a.pri-cta .button-text,
.s-bm-hero--has-media a.pri-cta .button-icon {
    color: var(--color-primary) !important;
}

.bg-donker a.sec-cta .button-text,
.bg-donker a.sec-cta .button-icon,
.bg-donker a.ter-cta .button-text,
.bg-donker a.ter-cta .button-icon,
.bg-accent a.sec-cta .button-text,
.bg-accent a.sec-cta .button-icon,
.bg-accent a.ter-cta .button-text,
.bg-accent a.ter-cta .button-icon,
.bm-cta-paneel a.sec-cta .button-text,
.bm-cta-paneel a.sec-cta .button-icon,
.bm-cta-paneel a.ter-cta .button-text,
.bm-cta-paneel a.ter-cta .button-icon,
.s-bm-hero--has-media a.sec-cta .button-text,
.s-bm-hero--has-media a.sec-cta .button-icon,
.s-bm-hero--has-media a.ter-cta .button-text,
.s-bm-hero--has-media a.ter-cta .button-icon {
    color: var(--color-white) !important;
}

/* Op cream is de secundaire knop wit, zodat hij loskomt van de achtergrond */
.bg-cream a.sec-cta,
.bg-cream a.sec-cta:visited {
    background: var(--color-white);
}

/* Knoppenrij */
.cta-container,
.bm-buttons {
    gap: 16px;
}

/* ───────────────────────────────────────────────────────────────────────
   3. HEADER
   Verloopstreep bovenaan, sticky wit, logo 60px, actief item onderstreept.
   ─────────────────────────────────────────────────────────────────────── */

.bm-header {
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 12px rgba(36, 26, 20, 0.06);
}

/* De accentstreep zit niet in de markup, dus we zetten hem als pseudo-element */
.bm-header::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg,
        var(--color-oranje) 0%,
        #EC6A2A 45%,
        var(--color-primary) 100%);
}

.bm-header-inner {
    gap: 24px 32px;
    min-height: 0;
    padding-block: 12px;
}

.bm-header-logo img,
.bm-logo-donker,
.bm-logo-licht {
    height: 60px;
    max-height: 60px;
    width: auto;
}

.bm-header-menu {
    gap: 8px 32px;
    align-items: center;
}

.bm-header-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-dark);
    text-decoration: none;
    border-radius: 0;
    background: none;
}

.bm-header-menu a:hover {
    color: var(--color-primary);
    background: none;
}

.bm-header-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    opacity: 0;
    transform: none;
    transition: opacity 0.18s ease;
}

.bm-header-menu a:hover::after,
.bm-header-menu .current-menu-item > a::after,
.bm-header-menu .current-menu-ancestor > a::after {
    opacity: 1;
    transform: none;
}

.bm-header-actions {
    gap: 12px;
}

/* Hamburger krijgt dezelfde pill-vorm als de knoppen */
.bm-hamburger-toggle {
    min-height: 48px;
    padding: 12px 18px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-primary);
}

.bm-hamburger-bar {
    background: var(--color-primary);
}


/* ───────────────────────────────────────────────────────────────────────
   4. HERO
   Foto over de volle breedte, donkere scrim van boven naar beneden, daarover
   een warme oranje wash. Tekst staat onderaan links. Golfrand sluit af.
   ─────────────────────────────────────────────────────────────────────── */

.s-bm-hero--pagina.s-bm-hero--has-media {
    display: flex;
    align-items: flex-end;
    min-height: clamp(320px, 42vh, 440px);
    padding-block: 0;
    background: var(--color-dark);
}

/* Grote variant voor de homepage */
.s-bm-hero--pagina.s-bm-hero--has-media.s-bm-hero--groot {
    min-height: clamp(460px, 64vh, 660px);
}

.s-bm-hero--pagina:not(.bg-licht):not(.bg-donker):not(.bg-accent) {
    background: var(--color-cream);
}

.s-bm-hero--has-media .bm-hero-bg-img,
.s-bm-hero--has-media .bm-hero-bg-video {
    object-position: center 35%;
}

/* De vlakke overlay uit het basisthema vervangen we door de scrim uit het
   ontwerp. De inline opacity blijft staan maar valt weg achter deze laag. */
.s-bm-hero--pagina .bm-hero-overlay {
    background: linear-gradient(180deg,
        rgba(36, 26, 20, 0.20) 0%,
        rgba(36, 26, 20, 0.35) 45%,
        rgba(36, 26, 20, 0.85) 100%) !important;
    opacity: 1 !important;
}

.s-bm-hero--pagina.s-bm-hero--groot .bm-hero-overlay {
    background:
        linear-gradient(90deg, rgba(36, 26, 20, 0.62) 0%, rgba(36, 26, 20, 0.22) 45%, transparent 70%),
        linear-gradient(180deg, rgba(36, 26, 20, 0.10) 0%, rgba(36, 26, 20, 0.34) 50%, rgba(36, 26, 20, 0.88) 100%) !important;
}

/* Warme wash bovenop de scrim */
.s-bm-hero--pagina.s-bm-hero--has-media .bm-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(241, 141, 33, 0.38) 0%,
        rgba(230, 90, 45, 0.20) 45%,
        rgba(209, 15, 67, 0.14) 75%,
        rgba(209, 15, 67, 0.05) 100%);
}

.s-bm-hero--pagina.s-bm-hero--has-media .c-bm-hero {
    position: relative;
    width: 100%;
    padding-block: 48px clamp(56px, 8vw, 96px);
}

.s-bm-hero--pagina.s-bm-hero--groot .c-bm-hero {
    padding-block: 64px clamp(72px, 10vw, 128px);
}

/* Tekst links uitlijnen, ook binnen de preset die normaal centreert */
.s-bm-hero--pagina.s-bm-hero--has-media .bm-hero-preset--centered_groot {
    display: block;
    max-width: none;
    margin-inline: 0;
    text-align: left;
}

.s-bm-hero--pagina.s-bm-hero--has-media .bm-hero-preset--centered_groot .cta-container,
.s-bm-hero--pagina.s-bm-hero--has-media .bm-hero-preset--centered_groot .bm-buttons {
    justify-content: flex-start;
}

.s-bm-hero--pagina.s-bm-hero--has-media .bm-hero-preset--centered_groot .bm-eyebrow {
    margin-inline: 0;
}

/* Eyebrow in de hero: beeldmerk ervoor, warm licht */
.s-bm-hero--has-media .bm-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-bottom: 16px;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: #FBD9C0;
}

.s-bm-hero--has-media .bm-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask: url("assets/images/beeldmerk-wit.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk-wit.svg") no-repeat center / contain;
}

.s-bm-hero--has-media h1 {
    margin-bottom: 12px;
    color: var(--color-white);
}

.s-bm-hero--groot h1 {
    max-width: 16ch;
    margin-bottom: 20px;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.08;
}

.s-bm-hero--has-media .lead {
    max-width: 46ch;
    margin-bottom: 0;
    font-size: clamp(17px, 1.4vw, 20px);
    color: #FFF3E7;
}

.s-bm-hero--groot .lead {
    margin-bottom: 32px;
    font-size: clamp(18px, 1.6vw, 21px);
}

.s-bm-hero--has-media .cta-container,
.s-bm-hero--has-media .bm-buttons {
    margin-top: 24px;
}

/* Golfrand */
.bm-hero-golf {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    display: block;
    width: 100%;
    height: clamp(32px, 4.5vw, 64px);
    z-index: 2;
    pointer-events: none;
}

.s-bm-hero--groot .bm-hero-golf {
    height: clamp(40px, 6vw, 88px);
}

.bm-hero-golf path {
    fill: var(--color-white);
}

/* De golf krijgt automatisch de kleur van de sectie eronder, gezet in
   template-parts/blocks/hero.php via bm_volgende_blok_achtergrond(). */
.s-bm-hero--golf-cream .bm-hero-golf path {
    fill: var(--color-cream);
}

.s-bm-hero--golf-licht .bm-hero-golf path {
    fill: var(--color-light);
}

.s-bm-hero--golf-donker .bm-hero-golf path {
    fill: var(--color-dark);
}

.s-bm-hero--golf-accent .bm-hero-golf path {
    fill: var(--color-accent);
}


/* ───────────────────────────────────────────────────────────────────────
   5. FEITEN
   Witte kaart met verloopstreep bovenaan en hairline scheidingen tussen de
   kolommen. Valt met een negatieve marge over de hero heen.
   ─────────────────────────────────────────────────────────────────────── */

.s-bm-feiten {
    position: relative;
    z-index: 3;
    padding-top: 0;
}

.bm-feiten-kaart {
    position: relative;
    background: var(--color-white);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(36, 26, 20, 0.12), 0 2px 6px rgba(36, 26, 20, 0.06);
    padding: 0;
    overflow: hidden;
}

.s-bm-feiten--zwevend .bm-feiten-kaart {
    margin-top: clamp(-88px, -7vw, -40px);
}

.bm-feiten-accent {
    position: static;
    display: block;
    height: 5px;
    background: linear-gradient(90deg,
        var(--color-oranje) 0%,
        #EC6A2A 50%,
        var(--color-primary) 100%);
}

.bm-feiten-titel {
    margin: 0;
    padding: clamp(24px, 2.8vw, 36px) clamp(24px, 2.8vw, 36px) 0;
    font-size: 22px;
    color: var(--color-dark);
}

/* De 1px gap plus achtergrondkleur maakt de hairlines tussen de kolommen */
.bm-feiten-grid {
    display: grid;
    gap: 1px;
    background: var(--color-lijn-cool);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-feiten-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bm-feiten-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bm-feiten-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.bm-feiten-item {
    margin: 0;
    padding: 0;
    background: var(--color-white);
}

.bm-feiten-item-inner {
    display: grid;
    gap: 12px;
    align-content: start;
    height: 100%;
    padding: clamp(24px, 2.8vw, 36px);
    text-decoration: none;
    color: inherit;
}

a.bm-feiten-item-inner:hover {
    background: var(--color-cream);
}

.bm-feiten-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--color-cream-zacht);
    color: #C25A05;
}

.bm-feiten-item:nth-child(3n) .bm-feiten-icoon {
    background: var(--color-roze-tint);
    color: #B00C37;
}

.bm-feiten-tekst {
    display: grid;
    gap: 0;
}

.bm-feiten-label {
    margin-bottom: 6px;
}

.bm-feiten-waarde {
    margin-bottom: 6px;
    font-family: var(--font-secondary);
    font-size: clamp(20px, 1.9vw, 23px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-dark);
}

.bm-feiten-toelichting {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-ink-mute);
}


/* ───────────────────────────────────────────────────────────────────────
   6. SECTIES EN BEELD
   ─────────────────────────────────────────────────────────────────────── */

.bg-cream {
    background: var(--color-cream);
    color: var(--color-dark);
    border-top: 1px solid var(--color-lijn-cream);
    border-bottom: 1px solid var(--color-lijn-cream);
}

.bg-cream h1,
.bg-cream h3,
.bg-cream h4,
.bg-cream h5 {
    color: var(--color-dark);
}

.bg-cream h2 {
    color: var(--color-primary);
}

.bg-cream p,
.bg-cream li {
    color: var(--color-ink-soft);
}

/* Tekst naast beeld: 4/3 beeldkader met ronde hoeken */
.bm-tc-grid {
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.bm-tc-media,
.bm-tc-grid figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-cream);
}

.bg-cream .bm-tc-media,
.bg-cream .bm-tc-grid figure {
    background: var(--color-white);
}

.bm-tc-media img,
.bm-tc-media video,
.bm-tc-grid figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Opsomming met het beeldmerk als markering */
.bm-tc-lijst-item {
    align-items: start;
    gap: 12px;
}

.bm-tc-lijst-icoon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 4px;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
}

.bm-tc-lijst-icoon svg {
    display: none;
}

.bm-tc-lijst-icoon::before {
    content: "";
    width: 26px;
    height: 26px;
    background-color: var(--color-primary);
    -webkit-mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
}

.bm-tc-lijst-tekst {
    color: var(--color-ink-soft);
}


/* ───────────────────────────────────────────────────────────────────────
   7. KAARTEN
   Witte kaarten op cream, ronde hoeken, geen rand, beeldmerk als markering.
   ─────────────────────────────────────────────────────────────────────── */

.bm-grid {
    gap: 24px;
}

.bm-grid-kaart,
.bm-grid-icoon-item,
.bm-grid-cijfer {
    background: var(--color-white);
    border: 0;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: none;
}

.bg-cream .bm-grid-kaart,
.bg-cream .bm-grid-icoon-item,
.bg-cream .bm-grid-cijfer {
    background: var(--color-white);
}

.bg-standaard .bm-grid-kaart,
.bg-standaard .bm-grid-icoon-item,
.bg-standaard .bm-grid-cijfer {
    background: var(--color-cream);
}

.bm-grid-kaart:hover,
.bm-grid-icoon-item:hover {
    transform: none;
    box-shadow: none;
}

.bm-grid-kaart-titel,
.bm-grid-icoon-titel,
.bm-grid-cijfer-titel {
    font-family: var(--font-secondary);
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-dark);
}

.bm-grid-kaart-tekst,
.bm-grid-icoon-tekst,
.bm-grid-cijfer-tekst {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

/* Het ontwerp zet op elke kaart het beeldmerk, niet een los pictogram.
   We verbergen daarom het icoon uit het blok en tonen het beeldmerk als mask,
   zodat de kaarten er hetzelfde uitzien ongeacht welk icoon is gekozen. */
.bm-grid-icoon-icoon {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 0;
    background-color: var(--color-primary);
    -webkit-mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
}

.bm-grid-icoon-icoon svg {
    display: none;
}

/* Genummerde kaarten: crimson cijfer in Arvo */
.bm-grid-cijfer-nummer {
    font-family: var(--font-secondary);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}


/* ───────────────────────────────────────────────────────────────────────
   8. CTA
   Foto naast een crimson verloop-paneel, samen in een afgeronde kaart.
   ─────────────────────────────────────────────────────────────────────── */

.bm-cta-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(36, 26, 20, 0.12);
}

.bm-cta-media {
    position: relative;
    min-height: 300px;
    background: var(--color-dark);
}

.bm-cta-media img,
.bm-cta-media picture,
.bm-cta-media picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Warme wash over de foto, zodat hij aansluit op het paneel */
.bm-cta-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(241, 141, 33, 0.34),
        rgba(209, 15, 67, 0.16));
}

.bm-cta-paneel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: clamp(32px, 4vw, 56px);
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        #AE0B36 100%);
}

.bm-cta-paneel.bg-donker {
    background: linear-gradient(135deg, #3A2B22 0%, var(--color-dark) 100%);
}

.bm-cta-paneel h2 {
    margin: 0;
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.2;
    color: var(--color-white);
}

.bm-cta-paneel .lead,
.bm-cta-paneel p {
    max-width: 44ch;
    margin: 0;
    line-height: 1.7;
    color: #FFE7D6;
}

.bm-cta-paneel .cta-container,
.bm-cta-paneel .bm-buttons {
    margin-top: 4px;
}

/* Pill: klein, vet, ruim gespatieerd */
.bm-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 0;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--color-cream-diep);
    color: var(--color-label-strong);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bm-cta-paneel .bm-pill,
.bg-donker .bm-pill,
.bg-accent .bm-pill {
    background: rgba(255, 255, 255, 0.18);
    color: #FFF3E7;
}

/* Gecentreerde variant houdt de pill in het midden */
.bm-cta-content .bm-pill {
    align-self: center;
    margin-bottom: 16px;
}


/* ── Uitlijning ──
   Het basisthema zet `.s-bm-cta { text-align: center }` (twee keer) en
   centreert de knoppenrij. Het ontwerp lijnt het paneel links uit, dus draaien
   we dat terug voor de varianten met een paneel. */
.s-bm-cta--met_beeld,
.s-bm-cta--paneel,
.s-bm-cta--met_beeld .bm-cta-paneel,
.s-bm-cta--paneel .bm-cta-paneel {
    text-align: left;
}

.s-bm-cta--met_beeld .cta-container,
.s-bm-cta--paneel .cta-container,
.s-bm-cta--met_beeld .bm-buttons,
.s-bm-cta--paneel .bm-buttons,
.s-bm-cta--met_beeld [class*="-buttons"],
.s-bm-cta--paneel [class*="-buttons"] {
    justify-content: flex-start;
    width: auto;
}

.s-bm-cta--met_beeld .bm-cta-paneel h2,
.s-bm-cta--paneel .bm-cta-paneel h2,
.s-bm-cta--met_beeld .bm-cta-paneel .lead,
.s-bm-cta--paneel .bm-cta-paneel .lead {
    margin-inline: 0;
    text-align: left;
}


/* ───────────────────────────────────────────────────────────────────────
   9. CONTACT EN FORMULIER
   Contactgegevens als beschrijvingslijst met scheidingslijnen.
   ─────────────────────────────────────────────────────────────────────── */

.bm-contact-grid {
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.bm-contact-item {
    display: grid;
    gap: 4px;
    padding: 0 0 24px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--color-gray-200);
    background: none;
}

.bm-contact-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bm-contact-item:hover {
    background: none;
    transform: none;
}

.bm-contact-item-icon {
    display: none;
}

.bm-contact-item-label {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-label);
}

.bm-contact-item-value {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-dark);
}

.bm-contact-item-value a {
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bm-contact-item-value a:hover {
    color: var(--color-primary-tekst);
}

/* De beschrijvingslijst blijft smal, anders worden dag en tijd uit elkaar
   getrokken over de volle breedte. */
.bm-contact-kolom {
    max-width: 44ch;
}

.bm-contact-openingstijden li {
    justify-content: flex-start;
    gap: 12px;
    padding: 0.4em 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.bm-contact-openingstijden li > span:first-child {
    min-width: 8ch;
    font-weight: 600;
    color: var(--color-dark);
}

.bm-contact-openingstijden li > span:last-child {
    color: var(--color-ink-soft);
}

/* Formulierblok als cream kaart */
.bm-tc-form,
.bm-tc-form-wrapper,
.bm-tc-side--formulier {
    background: var(--color-cream);
    border: 0;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 3vw, 40px);
}

.bg-cream .bm-tc-form,
.bg-cream .bm-tc-form-wrapper {
    background: var(--color-white);
}

.bm-tc-form-titel {
    font-family: var(--font-secondary);
    font-size: 24px;
    line-height: 1.3;
    color: var(--color-dark);
}

/* Fluent Forms binnen de kaart naar de ZON-vormtaal trekken */
.bm-tc-form .ff-el-form-control,
.bm-tc-form input[type="text"],
.bm-tc-form input[type="email"],
.bm-tc-form input[type="tel"],
.bm-tc-form textarea,
.bm-tc-form select {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #D9C6B2;
    border-radius: 10px;
    background: var(--color-white);
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.4;
    color: var(--color-dark);
}

.bm-tc-form .ff-el-form-control:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-oranje);
    outline-offset: 2px;
}

.bm-tc-form .ff-el-input--label label {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark);
}

.bm-tc-form .ff-btn-submit {
    min-height: 52px;
    padding: 14px 26px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
}

.bm-tc-form .ff-btn-submit:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}


/* ───────────────────────────────────────────────────────────────────────
   10. ARTIKELEN
   ─────────────────────────────────────────────────────────────────────── */

.bm-artikel-kaart {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: 0 2px 6px rgba(36, 26, 20, 0.06);
    overflow: hidden;
}

.bg-cream .bm-artikel-kaart {
    background: var(--color-white);
}

.bm-artikel-kaart:hover {
    transform: none;
    box-shadow: 0 16px 40px rgba(36, 26, 20, 0.12);
}

.bm-artikel-kaart-body {
    padding: 28px;
}

.bm-artikel-kaart-titel {
    font-family: var(--font-secondary);
    font-size: 21px;
    line-height: 1.3;
    color: var(--color-dark);
}

.bm-artikel-kaart-excerpt {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

.bm-artikel-kaart-link-meer,
.bm-artikel-kaart-cat {
    color: var(--color-primary-tekst);
}


/* ───────────────────────────────────────────────────────────────────────
   11. FOOTER
   Oranje naar crimson verloop, logo op een wit vlak, vierkante socials.
   ─────────────────────────────────────────────────────────────────────── */

.bm-footer.bg-donker,
.bm-footer {
    position: relative;
    padding-block: 0;
    background: linear-gradient(135deg, #C96A08 0%, #B4530A 55%, #A8340F 100%);
    color: #FFF6EE;
    overflow: hidden;
}

/* Beeldmerk als watermerk linksonder */
.bm-footer::before {
    content: "";
    position: absolute;
    left: -90px;
    bottom: -140px;
    width: clamp(280px, 24vw, 420px);
    height: clamp(280px, 24vw, 420px);
    opacity: 0.07;
    pointer-events: none;
    background-color: #FFF6EE;
    -webkit-mask: url("assets/images/beeldmerk-wit.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk-wit.svg") no-repeat center / contain;
}

.bm-footer-inner {
    position: relative;
    padding-block: clamp(48px, 6vw, 80px);
}

.bm-footer-grid {
    gap: clamp(32px, 4vw, 48px);
}

/* Logo op een witte plaquette, zoals in het ontwerp */
.bm-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
    padding: 20px 28px;
    background: var(--color-white);
    border-radius: var(--radius-md);
}

.bm-footer-logo img {
    display: block;
    height: 88px;
    max-height: 88px;
    width: auto;
}

.bm-footer-name {
    font-family: var(--font-secondary);
    color: #FFF6EE;
}

.bm-footer-intro,
.bm-footer-intro p,
.bm-footer-contact,
.bm-footer-adres {
    line-height: 1.6;
    color: #FFF6EE;
}

.bm-footer-kolom-titel {
    margin-bottom: 16px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFF6EE;
}

.bm-footer-kolom ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-footer-kolom a,
.bm-footer-contact a,
.bm-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #FFF6EE;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bm-footer-kolom a:hover,
.bm-footer-contact a:hover,
.bm-footer-legal a:hover {
    color: var(--color-white);
    text-decoration-thickness: 0.14em;
}

/* Openingstijden en labels in de contactkolom */
.bm-footer-tijden {
    display: grid;
    gap: 2px;
    margin-top: 8px;
}

.bm-footer-tijden .bm-footer-label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #FFF6EE;
}

.bm-footer-tijd {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    color: #FFF6EE;
}

/* Het logo staat op een wit vlak, dus het volledige kleurenlogo past daar */
.bm-footer-logo {
    align-self: flex-start;
}

/* Socials als afgeronde vierkanten */
.bm-footer-social {
    gap: 12px;
}

.bm-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.16);
    color: #FFF6EE;
    transition: background 0.18s ease;
}

.bm-social-link:hover {
    background: rgba(255, 255, 255, 0.30);
    color: #FFF6EE;
    transform: none;
}

/* Onderbalk */
.bm-footer-bottom {
    position: relative;
    margin-top: 0;
    padding-block: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.bm-footer-copyright,
.bm-footer-legal {
    font-size: 15px;
    line-height: 1.5;
    color: #FFF6EE;
}


/* ───────────────────────────────────────────────────────────────────────
   12b. LIJST MET BEELDMERK
   Opsomming binnen een tekstkolom, met het beeldmerk in plaats van een bolletje.
   ─────────────────────────────────────────────────────────────────────── */

.bm-lijst-beeldmerk {
    display: grid;
    gap: 16px;
    max-width: 58ch;
    margin: 0 0 28px;
    padding-left: 0;
    list-style: none;
}

.bm-lijst-beeldmerk li {
    position: relative;
    padding-left: 40px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

.bm-lijst-beeldmerk li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 26px;
    height: 26px;
    background-color: var(--color-primary);
    -webkit-mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
}

.bm-lijst-beeldmerk strong {
    color: var(--color-dark);
}


/* ───────────────────────────────────────────────────────────────────────
   13. DAGEN
   Grote cream kaarten met een dagprogramma. Kop met label, titel en een
   tijdstip als witte pill. Daaronder de onderdelen met scheidingslijnen.
   ─────────────────────────────────────────────────────────────────────── */

.bm-dagen {
    display: grid;
    gap: 24px;
}

.bm-dagen--1 { grid-template-columns: 1fr; }
.bm-dagen--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.bm-dag {
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 3vw, 40px);
}

.bg-cream .bm-dag {
    background: var(--color-white);
}

.bm-dag-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 28px;
    padding: 0 0 24px;
    border-bottom: 2px solid var(--color-lijn-warm);
}

.bm-dag-kop-tekst {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.bm-dag-titel {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-primary);
}

.bm-dag-tijd {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(36, 26, 20, 0.10);
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-dark);
}

.bg-cream .bm-dag-tijd {
    background: var(--color-cream);
}

.bm-dag-tijd svg {
    color: #C25A05;
}

.bm-dag-lijst {
    display: grid;
    gap: 20px;
}

.bm-dag-rij {
    display: grid;
    gap: 4px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-lijn-warm);
}

.bm-dag-rij:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bm-dag-label {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-dark);
}

.bm-dag-tekst {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-ink-soft);
}

/* Warme pill-variant, gebruikt in de dagkop */
.bm-pill--warm {
    background: var(--color-cream-diep);
    color: var(--color-label-strong);
}


/* ───────────────────────────────────────────────────────────────────────
   14. PANELEN
   Cream kaart met het beeldmerk als watermerk rechtsboven. Voor uitgelichte
   gegevens zoals een rekeningnummer.
   ─────────────────────────────────────────────────────────────────────── */

.bm-panelen {
    display: grid;
    gap: 24px;
    align-content: start;
}

.bm-panelen--1 { grid-template-columns: 1fr; }
.bm-panelen--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bm-panelen--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.bm-paneel {
    position: relative;
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 3vw, 40px);
    overflow: hidden;
}

.bg-cream .bm-paneel {
    background: var(--color-white);
}

.bm-paneel--watermerk::after {
    content: "";
    position: absolute;
    right: -56px;
    top: -56px;
    width: 160px;
    height: 160px;
    opacity: 0.10;
    pointer-events: none;
    background-color: var(--color-primary);
    -webkit-mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
}

.bm-paneel > * {
    position: relative;
}

.bm-paneel-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-label);
}

.bm-paneel-label::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: var(--color-primary);
    -webkit-mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk.svg") no-repeat center / contain;
}

.bm-paneel-titel {
    margin: 0 0 12px;
    font-family: var(--font-secondary);
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-dark);
}

.bm-paneel-waarde {
    margin: 0 0 24px;
    font-family: var(--font-secondary);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-dark);
}

.bm-paneel-tekst {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-ink-soft);
}

.bm-paneel-kopieer + .bm-paneel-tekst {
    margin-top: 20px;
}

.bm-paneel-link {
    margin-top: 4px;
}

/* Compacte knopmaat binnen panelen, zoals in het ontwerp */
.bm-paneel .sec-cta,
.bm-paneel .ter-cta,
.bm-paneel .pri-cta {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 17px;
}


/* ───────────────────────────────────────────────────────────────────────
   15. SPONSORLOGO'S ALS RASTER
   ─────────────────────────────────────────────────────────────────────── */

.bm-logos-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.bm-logos-vak {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 12px;
    border: 1px dashed #E4D3C0;
    border-radius: var(--radius-md);
    background: var(--color-cream);
}

.bg-cream .bm-logos-vak {
    background: var(--color-white);
}

.bm-logos-vak img {
    max-height: 70%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.bm-logos-label {
    margin-bottom: 32px;
    font-family: var(--font-secondary);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark);
    text-transform: none;
    letter-spacing: 0;
}

.c-bm-logos--raster .bm-logos-label {
    text-align: left;
}


/* ───────────────────────────────────────────────────────────────────────
   16. CTA ZONDER BEELD
   Alleen het gekleurde paneel, met het beeldmerk erboven. Voor bevestigings-
   pagina's zoals de bedanktpagina.
   ─────────────────────────────────────────────────────────────────────── */

.bm-cta-duo--solo {
    grid-template-columns: 1fr;
}

.bm-cta-merk {
    display: block;
    width: 64px;
    height: 64px;
    background-color: #FFF6EE;
    -webkit-mask: url("assets/images/beeldmerk-wit.svg") no-repeat center / contain;
    mask: url("assets/images/beeldmerk-wit.svg") no-repeat center / contain;
}

.bm-cta-titel--lg {
    font-size: clamp(30px, 3.4vw, 42px) !important;
    line-height: 1.15;
}


/* ───────────────────────────────────────────────────────────────────────
   17. RESPONSIVE AANVULLINGEN
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .bm-dag,
    .bm-paneel {
        padding: 24px;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   12. RESPONSIVE EN PRINT
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .bm-header-menu {
        gap: 4px 24px;
    }
}

/* Het ontwerp heeft op desktop geen hamburger naast het uitgeschreven menu.
   De overlay blijft bereikbaar op tablet en mobiel. */
@media (min-width: 1025px) {
    .bm-header--menu_cta_hamburger .bm-hamburger-toggle {
        display: none;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 17px;
    }

    .s-bm-feiten--zwevend .bm-feiten-kaart {
        margin-top: clamp(-40px, -5vw, -24px);
    }

    .bm-grid-kaart,
    .bm-grid-icoon-item,
    .bm-grid-cijfer,
    .bm-tc-form,
    .bm-tc-form-wrapper {
        padding: 24px;
    }

    .bm-footer-logo img {
        height: 64px;
        max-height: 64px;
    }
}

@media print {
    .bm-header,
    .bm-footer,
    .bm-hero-golf,
    .bm-hamburger-toggle {
        display: none;
    }

    body {
        font-size: 12pt;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-artikel-kaart,
    .bm-feiten-item-inner,
    .bm-social-link {
        transition: none !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   18. CORRECTIES 1.4.1
   Verschillen tussen de staging en de designexport, gevonden door de
   blokken naast het ontwerp te renderen.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Footer: gelijke kolommen ──
   Het basisthema geeft de brandkolom 2fr en de rest 1fr. Met vier kolommen
   werden de menu's ~135px breed en liep het e-mailadres tot tegen de rand.
   Het ontwerp heeft vier gelijkwaardige kolommen die netjes afbreken. */
@media (min-width: 768px) {
    .bm-footer-grid,
    .bm-footer-grid--kolommen-1,
    .bm-footer-grid--kolommen-2,
    .bm-footer-grid--kolommen-3,
    .bm-footer-grid--kolommen-4,
    .bm-footer-grid--kolommen-1.bm-footer-grid--has-contact,
    .bm-footer-grid--kolommen-2.bm-footer-grid--has-contact {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        align-items: start;
    }
}

/* Lange e-mailadressen mogen afbreken in plaats van de kolom oprekken */
.bm-footer-contact a,
.bm-footer-kolom a {
    overflow-wrap: anywhere;
}

/* ── Contact: openingstijden compact ──
   Dag en tijd stonden als twee kolommen uit elkaar. Het ontwerp schrijft
   "Dinsdag: 10.00 - 15.30 uur" als één regel. */
.bm-contact-openingstijden li {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 6px;
}

.bm-contact-openingstijden li > span:first-child {
    min-width: 0;
}

.bm-contact-openingstijden li > span:first-child::after {
    content: ":";
}

/* De scheidingslijn liep tot de tekstbreedte in plaats van tot de kolom */
.bm-contact-item,
.bm-contact-item--linked {
    width: 100%;
}

/* Laatste regel van de openingstijden zonder lijn, net als de andere items */
.bm-contact-openingstijden li:last-child {
    border-bottom: 0;
}

/* ── Sponsorlogo's: kop links, zoals de andere sectiekoppen ── */
.c-bm-logos--raster .bm-logos-label.bm-t-center {
    text-align: left;
}

/* ───────────────────────────────────────────────────────────────────────
   19. CORRECTIES 1.4.2
   Reparaties die ook werken op content uit een oudere themaversie.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Lijst-variant: kop eerst ──
   Met de omgekeerde volgorde kwam de opsomming links en de kop met de knop
   rechts, waardoor het oog bij de opsomming begon. De tekstkolom staat nu
   altijd eerst, ook als de content nog op "tekst rechts" staat. */
.s-bm-tc--lijst.s-bm-tc--reverse .bm-tc-tekst {
    order: 0;
}

.s-bm-tc--lijst.s-bm-tc--reverse .bm-tc-side {
    order: 1;
}

/* ── Footerlogo altijd zichtbaar op de witte plaquette ──
   Een wit beeldmerk verdwijnt daar. footer.php kiest nu het volledige logo,
   dit is de terugval als er alleen een wit bestand gekoppeld is. */
.bm-footer-logo img[src*="beeldmerk-wit"] {
    filter: brightness(0) saturate(100%) invert(16%) sepia(24%) saturate(2200%) hue-rotate(320deg) brightness(95%) contrast(101%);
}

/* Footer-intro staat niet in het ontwerp; ook weg als de waarde nog gevuld is */
.bm-footer-intro {
    display: none;
}

/* ───────────────────────────────────────────────────────────────────────
   20. CORRECTIES 1.4.3
   ─────────────────────────────────────────────────────────────────────── */

/* ── Golfrand viel weg op de homepage ──
   De zwevende feitenkaart heeft een negatieve bovenmarge. Omdat de sectie geen
   padding-top heeft, collapst die marge door naar de sectie zelf: de volledige
   witte sectieachtergrond schoof mee over de onderkant van de hero en dekte de
   golf af. Op subpagina's staat geen feitenblok, daar was de golf wel te zien.
   De zwevende variant heeft zelf geen achtergrond nodig, de kaart is wit. */
.s-bm-feiten--zwevend {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
}

/* De golf hoort boven de hero-achtergrond te liggen (z-index 0) maar ONDER de
   zwevende feitenkaart (z-index 3). Met een hogere waarde sneed de witte curve
   door de bovenkant van de kaart en werden de icoontjes afgekapt. */
.s-bm-hero--golfrand .bm-hero-golf {
    z-index: 2;
}

/* Extra zekerheid: de icoontjes in de feitenkaart mogen nooit worden afgekapt */
.bm-feiten-icoon {
    flex: 0 0 auto;
    align-self: start;
    overflow: visible;
}

/* ── Formulierkolom leeg: één kolom in plaats van een halve lege sectie ──
   Zolang er geen Fluent Forms-formulier gekoppeld is, blijft de rechterkolom
   leeg en stond de tekst in een halve kolom over de volle regelbreedte. */
.s-bm-tc--formulier .bm-tc-side--formulier:empty {
    display: none;
}

.s-bm-tc--formulier .bm-tc-grid:has(> .bm-tc-side--formulier:empty) {
    grid-template-columns: 1fr;
}

.s-bm-tc--formulier .bm-tc-grid:has(> .bm-tc-side--formulier:empty) .bm-prose {
    max-width: 66ch;
}

/* ── Panelen met tekst ernaast ──
   Het ontwerp van de doneerpagina zet de uitleg links en de panelen rechts.
   Dat waren twee losse secties onder elkaar, met een halve lege regel ernaast. */
.bm-panelen-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.bm-panelen-duo .bm-panelen-intro {
    color: var(--color-ink-soft);
}

.bm-panelen-duo .bm-panelen-intro p {
    max-width: 60ch;
    line-height: 1.75;
}

.bm-panelen-duo .bm-panelen-intro > :first-child {
    margin-top: 0;
}

.bm-panelen-duo .bm-panelen--2,
.bm-panelen-duo .bm-panelen--3 {
    grid-template-columns: 1fr;
}

/* Panelen: gelijke hoogte en niet breder dan nodig */
.bm-panelen--2 > .bm-paneel {
    align-self: stretch;
}

/* ── Bestaande content: opeenvolgende secties bij elkaar houden ──
   Op sites waar de content nog uit een oudere versie komt staan de tekst en de
   panelen (doneren) en de contactgegevens en het formulier (contact) als twee
   losse secties onder elkaar. Dan hoort er geen dubbele sectieruimte tussen. */
.s-bm-tekst + .s-bm-panelen,
.s-bm-contact + .s-bm-tc--formulier {
    padding-top: 0;
}

/* Kop en intro van het contactblok volgen dezelfde regellengte als de rest */
.bm-contact-header .bm-prose,
.bm-contact-header .bm-prose p,
.bm-contact-header > p {
    max-width: 66ch;
}