/*
Theme Name:        ikwileenstartershypotheek.nl
Theme URI:         https://ikwileenstartershypotheek.nl/
Description:       Maatwerkthema voor ikwileenstartershypotheek.nl, gebouwd op de Magneet Pure codebase. Layout via ACF flex content + PHP partials. Bevat de huisstijl, het CPT vestiging met adviseurs en documenten, het Advieskeuze-blok en een content installer. © Bureau Magneet — niet kopiëren of doorverkopen. Zie LICENSE.txt.
Author:            Bureau Magneet
Author URI:        https://bureaumagneet.nl/
Version:           1.68.0
Requires at least: 6.5
Requires PHP:      8.1
Text Domain:       magneet-pure
License:           Proprietary — see LICENSE.txt
License URI:       https://bureaumagneet.nl/

Basis: Magneet Pure 2.5.70 (Bureau Magneet).
Projectlaag: style-customizations.css (tokens en componenten), inc/cpt-vestiging.php,
inc/content-installer.php, inc/content-data.php, single-vestiging.php,
template-parts/blocks/advieskeuze.php.
*/

/* ═══════════════════════════════════════════════════════════════════════
   :ROOT — DESIGN TOKENS
   Pas tokens aan per project voor unieke look-and-feel.
   Componenten gebruiken overal var(--token), nooit hardcoded waarden.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* ── BRAND KLEUREN (PROJECT — pas aan) ── */
    --color-primary: #000000;
    --color-primary-hover: #1a1a1a;
    --color-primary-light: rgba(0, 0, 0, 0.06);

    --color-secondary: #555555;
    --color-secondary-hover: #333333;

    --color-accent: #ff3300;
    --color-accent-hover: #cc2900;

    /* ── NEUTRAL SCHAAL (universeel) ── */
    --color-white: #ffffff;
    --color-light: #f7f7f7;
    --color-dark: #111111;

    --color-gray-50:  #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;

    /* ── FEEDBACK KLEUREN (universeel) ── */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error:   #ef4444;
    --color-info:    #3b82f6;

    /* ── CALLOUT KLEUREN (Tekst-blok varianten) ── */
    --color-tip-bg:           #f0fdf4;
    --color-tip-border:       #86efac;
    --color-tip-icon:         #16a34a;

    --color-voorbeeld-bg:     #f5f3ff;
    --color-voorbeeld-border: #c4b5fd;
    --color-voorbeeld-icon:   #7c3aed;

    --color-waarschuwing-bg:     #fef2f2;
    --color-waarschuwing-border: #fca5a5;
    --color-waarschuwing-icon:   #dc2626;

    --color-info-bg:     #eff6ff;
    --color-info-border: #93c5fd;
    --color-info-icon:   #2563eb;

    --color-protip-bg:     #fefce8;
    --color-protip-border: #fde047;
    --color-protip-icon:   #ca8a04;

    /* ── TYPOGRAFIE — FONT FAMILIES (PROJECT — vervang voor webfont) ── */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-secondary: var(--font-primary);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;

    /* ── TYPOGRAFIE — FLUID FONT SIZES (clamp voor responsiveness) ──
       v2.5.23: lagere min-waardes voor logischer schaalverhouding op mobiel
       (320–375px viewport). Body blijft 16px. */
    --fs-h1:    clamp(1.75rem,  1.25rem  + 2.5vw,   3.5rem);   /* 28 → 56px */
    --fs-h2:    clamp(1.5rem,   1.2rem   + 1.5vw,   2.5rem);   /* 24 → 40px */
    --fs-h3:    clamp(1.25rem,  1.1rem   + 0.75vw,  1.875rem); /* 20 → 30px */
    --fs-h4:    clamp(1.0625rem,1rem     + 0.5vw,   1.5rem);   /* 17 → 24px */
    --fs-h5:    clamp(1rem,     0.95rem  + 0.25vw,  1.25rem);  /* 16 → 20px */
    --fs-h6:    0.875rem;                                       /* 14px (eyebrow) */

    --fs-lead:  clamp(1rem,     0.95rem  + 0.3125vw, 1.25rem); /* 16 → 20px */
    --fs-body:  1rem;                                          /* 16px (NEVER < 16px op mobile) */
    --fs-small: 0.875rem;                                      /* 14px */
    --fs-xs:    0.75rem;                                       /* 12px (alleen micro-labels) */

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

    /* ── TYPOGRAFIE — FONT WEIGHT ── */
    --fw-light:    300;
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* ── TYPOGRAFIE — LETTER SPACING ── */
    --ls-tight:  -0.02em;
    --ls-normal: 0;
    --ls-wide:   0.05em;
    --ls-wider:  0.1em;

    /* ── TYPOGRAFIE — MAX WIDTHS (leesbaarheid) ── */
    --max-prose:  690px;      /* Smal lezen — optimaal voor leesbaarheid (~85 chars) */
    --max-narrow: 690px;       /* v2.3.3: was 50ch (~510px), nu 690 voor consistentie met "smal" labels */       /* Lead paragrafen, intro-tekst */

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

    /* ── SPACING — SECTIE-PADDING (PROJECT — pas aan voor ritme) ── */
    --space-sm: clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-md: clamp(3rem, 2rem  + 4vw, 6rem);
    --space-lg: clamp(5rem, 3rem  + 6vw, 9rem);

    /* ── SPACING — COMPONENT-NIVEAU ── */
    --gap-xs:  0.25rem;       /* 4px */
    --gap-sm:  0.5rem;        /* 8px */
    --gap-md:  1rem;          /* 16px */
    --gap-lg:  1.5rem;        /* 24px */
    --gap-xl:  2rem;          /* 32px */
    --gap-2xl: 3rem;          /* 48px */

    /* ── BORDER RADIUS (PROJECT — pas aan voor karakter) ── */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-2xl:   32px;
    --radius-full:  9999px;

    /* Component-specifieke radius (gebruik deze in components) */
    --radius-button: var(--radius-full);
    --radius-card:   var(--radius-lg);
    --radius-input:  var(--radius-md);
    --radius-image:  var(--radius-md);
    --radius-modal:  var(--radius-xl);

    /* ── SHADOWS (PROJECT — pas aan voor diepte) ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05),
                 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.05),
                 0 12px 32px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.08),
                 0 24px 48px rgba(0, 0, 0, 0.12);

    /* Component-specifieke shadows */
    --shadow-card:         var(--shadow-lg);
    --shadow-card-hover:   var(--shadow-xl);
    --shadow-button-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ── EASINGS (PROJECT — pas aan voor karakter) ── */
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);          /* smooth */
    --easing-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55); /* bouncy */
    --easing-snappy:  cubic-bezier(0.4, 0, 0.6, 1);          /* snappy */

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

    /* ── HOVER EFFECTS (PROJECT — kies stijl) ── */
    --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: 2px solid var(--color-primary) !important;
    outline-offset: 2px;
    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-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;
    }
}