/*
Theme Name:        Magneet Pure
Theme URI:         https://bureaumagneet.nl/
Description:       Proprietary thema van Bureau Magneet — eigen WP-build zonder pagebuilder. Layout via ACF flex content + PHP partials. © Bureau Magneet — niet kopiëren of doorverkopen. Zie LICENSE.txt en Tools → Magneet Pure voor licentievoorwaarden.
Author:            Bureau Magneet
Author URI:        https://bureaumagneet.nl/
Version:           2.5.25
Requires at least: 6.0
Requires PHP:      8.1
Text Domain:       magneet-pure
License:           Proprietary — see LICENSE.txt
License URI:       https://bureaumagneet.nl/

Magneet Pure WordPress Theme
Copyright © 2026 Bureau Magneet. All rights reserved.

This theme is proprietary software licensed, not sold, by Bureau Magneet.
Redistribution, resale, or use as basis for competing products is strictly
prohibited. Modifications for own use are permitted under the LICENSE.txt
terms shipped with this theme. For licensing inquiries: info@bureaumagneet.nl
*/

/* ═══════════════════════════════════════════════════════════════════════
   :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);
}

.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;
    }
}

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

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

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


/* ═══════════════════════════════════════════════════════════════════════
   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;
}

/* Verberg desktop nav + CTA in de header wanneer overlay open is — alleen logo + hamburger */
body.overlay-open .bm-header-nav,
body.overlay-open .bm-header-actions .pri-cta,
body.overlay-open .bm-header-actions .sec-cta {
    visibility: hidden;
}

.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;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    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: 100%;
    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);
}

/* ── Hamburger animeert naar X bij is-active ── */
.bm-hamburger-toggle.is-active .bm-hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.bm-hamburger-toggle.is-active .bm-hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.bm-hamburger-toggle.is-active .bm-hamburger-bar:nth-child(3) {
    transform: translateY(-7px) 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;
}

.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; }
}

.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;          /* 16:9 ratio van breedte */
    min-width: 177.78vh;       /* 16:9 ratio van hoogte */
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

.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 {
    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 {
    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;
    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 {
    display: block;
    font-size: clamp(4rem, 10vw, 7rem);
    /* v2.5.9: line-height 1 zodat de mark dichter bij de tekst staat
       (was: 0.5 — gaf grote witruimte boven de mark) */
    line-height: 1;
    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);
}

.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);
}

.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);
}

.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%;
    max-width: 280px;
    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);
}
.s-bm-cat-hero .bm-eyebrow,
.s-bm-tag-hero .bm-eyebrow,
.s-bm-kb-hero .bm-eyebrow {
    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 {
    font-size: 25px;
    margin: 0 0 2rem;
    color: var(--color-dark, #111);
}

.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 {
    font-size: 20px;
    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;
}

/* ─── 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.22: kleiner icoon (32px) met links wat ruimte t.o.v. de kaart-rand */
    width: 32px;
    height: 32px;
    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.22: SVG schaalt mee met container */
.bm-artikel-kaart--dienst .bm-dienst-kaart-icoon svg {
    width: 100%;
    height: 100%;
}
.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;
}