/* Meegeleverde lettertypes (assets/fonts, SIL Open Font License - zie OFL-*.txt).
Relatief pad: werkt op de site (/_fw/fonts/) en in Ocean's editor (assets/fonts/).
Een browser haalt een bestand pas op als een stack hem gebruikt. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/playfair-display.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('fonts/playfair-display-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/lora.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/lora-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/inter-italic.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope.woff2') format('woff2'); }
/* Buildix Site - base.css (framework).
Design-tokens + minimale STRUCTUUR voor de standaard-componenten. Géén merk.
Een theme overschrijft de tokens (snelste reskin) en/of styelt de classes.
Wordt vóór het theme-site.css geladen. */
/* ═══════════════════════════════════════════════════════════════════
TOKENS
Drie soorten, en het onderscheid is de hele truc:
VELD - komt uit Site-instellingen in Ocean. Die 12 waarden worden
door een gegenereerd :root-blok ná dit bestand overschreven.
AFGELEID - rekent zichzelf uit met calc() of color-mix(). Staat hier en
nergens anders, dus je onderhoudt de verhoudingen één keer
voor alle klantsites in plaats van per site.
VAST - niet instelbaar. Een klant die z'n foutmelding roze wil heeft
ongelijk, en een token dat niemand ooit verzet is onderhoud
zonder opbrengst.
Wat hier NIET in kan: breekpunten. Custom properties werken niet binnen
@media-queries, dus de 640/700/1000px verderop blijven vaste getallen.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── Kleur ─────────────────────────────────────────────────────── */
--site-accent: #2e8b8b; /* veld */
--site-ink: #1a2b33; /* veld */
--site-bg: #ffffff; /* veld */
--site-surface: #ffffff; /* veld - kaarten/secties */
/* Donkerder accent voor hover. Niemand kiest dit apart. */
--site-accent-hover: color-mix(in srgb, var(--site-accent) 88%, #000);
/* Tekst óp het accent. Wordt overschreven door het gegenereerde blok, dat
'm in PHP uitrekent - wit of zwart naar helderheid. Zonder dit staat er
witte tekst op een lichtgele knop. */
--site-accent-contrast: #ffffff;
--site-muted: color-mix(in srgb, var(--site-ink) 62%, var(--site-bg));
--site-line: color-mix(in srgb, var(--site-ink) 12%, var(--site-bg));
--site-link: var(--site-accent);
/* Status: merkonafhankelijk, dus vast. */
--site-success: #2e7d32;
--site-warning: #ed6c02;
--site-danger: #c62828;
/* ── Typografie ────────────────────────────────────────────────── */
--site-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* veld */
--site-font-head: var(--site-font); /* veld */
--site-text: 16px; /* veld - basisgrootte */
--site-weight-head: 700; /* veld */
--site-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--site-leading: 1.6;
--site-leading-head: 1.2;
/* Kopgroottes als factor van de basisgrootte: één knop verzet de hele
hiërarchie mee. Losse factoren en geen strikte schaal - die geeft rare
tussenmaten op de h3. */
/* --site-head-scale zet de hele koppenreeks per schermbreedte kleiner of
groter (ontwerpversie, Per schermbreedte); de verhoudingen blijven. */
--site-head-scale: 1;
--site-h1: calc(var(--site-text) * 2.25 * var(--site-head-scale));
--site-h2: calc(var(--site-text) * 1.75 * var(--site-head-scale));
--site-h3: calc(var(--site-text) * 1.35 * var(--site-head-scale));
--site-h4: calc(var(--site-text) * 1.1 * var(--site-head-scale));
/* ── Ruimte en vorm ────────────────────────────────────────────── */
--site-space: 1rem; /* veld - alles rekent hierop */
--site-radius: 10px; /* veld */
--site-shadow: none; /* veld - geen/zacht/diep */
--site-space-section: calc(var(--site-space) * 2.5);
--site-gutter: calc(var(--site-space) * 1.25);
/* Tweede knop (bx-btn--secondary): een versie zet hem om met deze twee. */
--site-btn-secondary-bg: var(--site-ink);
--site-btn-secondary-fg: var(--site-bg);
/* Hero: de hoogtes per stand. Een ontwerpversie kan ze in haar CSS bijstellen. */
--site-hero-full: 100svh;
--site-hero-large: min(68svh, 720px);
--site-hero-medium: min(46svh, 480px);
--site-hero-small: clamp(180px, 26svh, 280px);
--site-hero-bar: 100px;
--site-hero-shade: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .55) 100%);
--site-radius-sm: calc(var(--site-radius) * .5);
--site-radius-lg: calc(var(--site-radius) * 1.6);
--site-border: 1px;
/* ── Layout en interactie ──────────────────────────────────────── */
--site-container: 1100px; /* veld */
--site-measure: 72ch; /* leesbreedte van lopende tekst */
--site-card-min: 260px; /* kolombreedte waarop het raster afbreekt */
--site-transition: .18s;
--site-focus: color-mix(in srgb, var(--site-accent) 55%, transparent);
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--site-font);
font-size: var(--site-text);
line-height: var(--site-leading);
color: var(--site-ink);
background: var(--site-bg);
}
h1, h2, h3, h4 {
font-family: var(--site-font-head);
font-weight: var(--site-weight-head);
line-height: var(--site-leading-head);
}
h1 { font-size: var(--site-h1); }
h2 { font-size: var(--site-h2); }
h3 { font-size: var(--site-h3); }
h4 { font-size: var(--site-h4); }
a { color: var(--site-link); }
/* Zichtbare focus, want zonder dit ziet wie met het toetsenbord navigeert
alleen wat de browser toevallig doet - en dat is per browser iets anders. */
:focus-visible {
outline: 2px solid var(--site-focus);
outline-offset: 2px;
border-radius: var(--site-radius-sm);
}
/* Layout-shell. Kop en footer zijn volle breedte (de achtergrond loopt door tot
de rand); de inhoud erin lijnt uit met de pagina via __inner. */
.site-main { max-width: var(--site-container); margin-inline: auto; padding-inline: var(--site-gutter); padding-block: calc(var(--site-space) * 2); }
.site-header { background: var(--site-bg); border-bottom: var(--site-border) solid var(--site-line); position: relative; z-index: 50; }
.site-header__inner,
.site-footer__inner { max-width: var(--site-container); margin-inline: auto; padding-inline: var(--site-gutter); }
.site-header--width-full .site-header__inner { max-width: none; }
.site-header__inner { display: flex; align-items: center; gap: calc(var(--site-space) * 1.5); padding-block: calc(var(--site-space) * 1.1); }
.site-header__slot--menu { flex: 1; display: flex; }
.site-menu-host--align-start .site-header__slot--menu { justify-content: flex-start; }
.site-menu-host--align-center .site-header__slot--menu { justify-content: center; }
.site-menu-host--align-end .site-header__slot--menu { justify-content: flex-end; }
.site-logo { font-weight: var(--site-weight-head); text-decoration: none; color: var(--site-ink); }
.site-logo img { max-height: 40px; display: block; }
.site-header__button { display: inline-block; padding: calc(var(--site-space) * .5) calc(var(--site-space) * 1.1); border-radius: var(--site-radius-sm);
background: var(--site-accent); color: var(--site-accent-contrast); text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-header__button:hover { background: var(--site-accent-hover); }
.site-header__phone { color: inherit; text-decoration: none; white-space: nowrap; }
/* Bij scrollen: blijft staan, of verdwijnt bij omlaag en komt terug bij omhoog. */
.site-menu-host--scroll-sticky,
.site-menu-host--scroll-hide { position: sticky; top: 0; }
.site-menu-host--scroll-hide { transition: transform var(--site-transition) ease; }
.site-menu-host--scroll-hide.is-hidden { transform: translateY(-100%); }
/* Menu. De oude classes (.site-nav, .menu) blijven werken voor bestaande CSS. */
.site-menu .menu { list-style: none; margin: 0; padding: 0; }
.site-menu__list { display: flex; flex-wrap: wrap; gap: calc(var(--site-space) * .25) calc(var(--site-space) * 1.1); align-items: center; }
.site-menu__item { position: relative; display: flex; align-items: center; }
.site-menu a, .site-nav a { text-decoration: none; color: var(--site-ink); }
.site-menu__link { padding-block: calc(var(--site-space) * .35); }
.site-menu__item--active > .site-menu__link { color: var(--site-accent); font-weight: 600; }
.site-menu__toggle { all: unset; cursor: pointer; width: 1.4em; height: 1.4em; display: inline-grid; place-items: center; border-radius: var(--site-radius-sm); }
.site-menu__toggle::before { content: ""; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-20%) rotate(45deg); transition: transform var(--site-transition); }
.site-menu__toggle[aria-expanded="true"]::before { transform: translateY(20%) rotate(-135deg); }
.site-menu__toggle:focus-visible { outline: 2px solid var(--site-focus); }
.site-menu__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Uitklappen: een paneel onder het item; opzij uitklappen voor het derde niveau. */
.site-menu__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: calc(var(--site-space) * .5);
background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius-sm);
box-shadow: 0 10px 30px rgba(0, 0, 0, .08); z-index: 60; flex-direction: column; align-items: stretch; }
.site-menu__sub .site-menu__item { justify-content: space-between; }
.site-menu__sub .site-menu__link { display: block; padding: calc(var(--site-space) * .4) calc(var(--site-space) * .6); flex: 1; }
.site-menu--submenu-flyout .site-menu__sub .site-menu__sub { top: 0; left: 100%; }
.site-menu--submenu-dropdown .site-menu__sub .site-menu__sub { position: static; box-shadow: none; border: 0; padding-left: calc(var(--site-space) * .6); }
@media (hover: hover) and (min-width: 901px) {
.site-menu__item--has-sub:hover > div > .site-menu__sub,
.site-menu__item--has-sub:focus-within > div > .site-menu__sub { display: flex; }
}
.site-menu__item.is-open > div > .site-menu__sub { display: flex; }
/* ── Weergaves voor modernere homepages (okt 2026) ────────────────── */
/* Agenda als kaarten: grote datum bovenaan, de eerstvolgende in de accentkleur. */
.bx-agenda--cards .bx-agenda__list { display: grid; gap: calc(var(--site-space) * 1.2); grid-template-columns: 1fr; list-style: none; padding: 0; }
@media (min-width: 700px) { .bx-agenda--cards .bx-agenda__list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
.bx-agenda--cards .bx-agenda__item { display: flex; flex-direction: column; gap: calc(var(--site-space) * .8); padding: calc(var(--site-space) * 1.3);
border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); background: var(--site-surface); }
.bx-agenda--cards .bx-agenda__date { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; background: none; padding: 0; color: inherit; }
.bx-agenda--cards .bx-agenda__day { font-family: var(--site-font-head); font-size: 3rem; line-height: 1; font-weight: var(--site-weight-head); }
.bx-agenda--cards .bx-agenda__month, .bx-agenda--cards .bx-agenda__year { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.bx-agenda--featured .bx-agenda__item:first-child { background: var(--site-accent); color: var(--site-accent-contrast); border-color: transparent; }
.bx-agenda--featured .bx-agenda__item:first-child a { color: inherit; }
.bx-agenda--featured .bx-agenda__item:first-child .bx-agenda__meta, .bx-agenda--featured .bx-agenda__item:first-child .bx-agenda__text { color: inherit; opacity: .85; }
/* Mozaïek: het eerste item groot, de rest eromheen (fotogalerij op een homepage). */
.bx-collection--mosaic .bx-collection__grid { display: grid; gap: calc(var(--site-space) * .8); grid-template-columns: 1fr; }
@media (min-width: 700px) {
.bx-collection--mosaic .bx-collection__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 14rem; }
.bx-collection--mosaic .bx-collection__item:first-child { grid-column: span 2; grid-row: span 2; }
}
.bx-collection--mosaic .bx-collection__media { position: relative; height: 100%; margin: 0; }
.bx-collection--mosaic .bx-collection__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--site-radius); }
.bx-collection--mosaic .bx-collection__caption { position: absolute; left: .8em; bottom: .7em; padding: .2em .6em; border-radius: var(--site-radius);
background: color-mix(in srgb, var(--site-ink) 60%, transparent); color: #fff; font-size: .85rem; }
/* Contactgegevens in de pagina (hooks/contact). */
.bx-contact__list { font-style: normal; display: flex; flex-direction: column; gap: calc(var(--site-space) * 1.1); }
.bx-contact--columns .bx-contact__list { flex-direction: row; flex-wrap: wrap; gap: calc(var(--site-space) * 2); }
.bx-contact__group { display: flex; flex-direction: column; gap: .15em; padding-left: .9em; border-left: 2px solid var(--site-accent); }
.bx-contact__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--site-muted); }
.bx-contact__value { font-family: var(--site-font-head); font-size: 1.2rem; color: inherit; text-decoration: none; }
a.bx-contact__value:hover { color: var(--site-accent); }
.bx-contact__note { font-size: .85rem; color: var(--site-muted); }
/* Nieuwsbrief in de footer: het Slate-formulier compact, veld en knop naast elkaar. */
.site-newsletter__text { margin: 0 0 .7em; opacity: .85; }
.site-newsletter .bx-form { display: flex; flex-wrap: wrap; gap: .5em; align-items: flex-end; }
.site-newsletter .bx-form__field { flex: 1 1 12rem; margin: 0; }
.site-newsletter .bx-form__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Citaat (testimonials). */
.bx-collection--quote .bx-collection__grid { gap: calc(var(--site-space) * 2); }
.bx-quote { margin: 0; display: flex; flex-direction: column; gap: calc(var(--site-space) * 1); }
.bx-quote__text { margin: 0; padding: 0; border: 0; font-family: var(--site-font-head); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.3; }
.bx-quote__text p { margin: 0; }
.bx-quote__text::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--site-accent); }
.bx-quote__by { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.bx-quote__photo { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.bx-quote__photo img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.bx-quote__who { display: flex; flex-direction: column; font-size: .9rem; }
.bx-quote__who span { color: var(--site-muted); }
.bx-quote__stars { color: var(--site-accent); letter-spacing: .1em; margin-left: auto; }
/* ── Patronen uit de stijllijst (okt 2026) ──────────────────────────
Bovenregel, knoppenrij, boogafbeelding, citaatkaart, genummerde lijst,
vinkjeslijst en kerncijfers. Alleen CSS op een gewoon element, met de tokens
van de huisstijl - een ontwerpversie stelt ze bij in haar eigen CSS. */
.bx-eyebrow { display: flex; align-items: center; gap: .7em; margin: 0 0 .5em; font-size: .78rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--site-accent); }
.bx-eyebrow::before { content: ""; flex: 0 0 1.8em; height: 2px; background: currentColor; }
.bx-band--bg-accent .bx-eyebrow, .bx-band--bg-ink .bx-eyebrow, .site-hero .bx-eyebrow { color: inherit; opacity: .9; }
.bx-actions { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.bx-btn--light, .bx-band--bg-accent .bx-btn--light, .bx-band--bg-ink .bx-btn--light { background: #fff; color: var(--site-ink); }
.bx-btn--light:hover { background: color-mix(in srgb, #fff 85%, var(--site-accent)); }
/* Een gewone knop op de accentkleur zou wegvallen: dan de lichte. */
.bx-band--bg-accent .bx-btn:not(.bx-btn--ghost):not(.bx-btn--light):not(.bx-btn--secondary):not(.bx-btn--link) { background: var(--site-accent-contrast); color: var(--site-accent); }
img.bx-img--arch, .bx-img--arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--site-radius) var(--site-radius); }
.bx-quote-card { margin: 0; padding: calc(var(--site-space) * 1.1) calc(var(--site-space) * 1.3); max-width: 24rem;
background: var(--site-surface); color: var(--site-ink); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
font-family: var(--site-font-head); font-size: 1.2rem; line-height: 1.35; border-left: 0; }
.bx-quote-card p { margin: 0 0 .5em; }
.bx-quote-card p:last-child { margin: 0; font-family: var(--site-font); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted); }
.bx-quote-card--overlap { position: relative; margin: -5rem 0 0 auto; }
@media (max-width: 699px) { .bx-quote-card--overlap { margin: -2.5rem var(--site-space) 0; } }
ol.bx-list--numbered { list-style: none; counter-reset: bx-n; margin: 0; padding: 0; }
ol.bx-list--numbered > li { counter-increment: bx-n; display: grid; grid-template-columns: 2.8em 1fr; gap: .2em 1em;
padding: .9em 0; border-top: var(--site-border) solid color-mix(in srgb, currentColor 20%, transparent); }
ol.bx-list--numbered > li:last-child { border-bottom: var(--site-border) solid color-mix(in srgb, currentColor 20%, transparent); }
ol.bx-list--numbered > li::before { content: counter(bx-n, decimal-leading-zero); font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--site-accent); padding-top: .25em; }
.bx-band--bg-ink ol.bx-list--numbered > li::before, .bx-band--bg-accent ol.bx-list--numbered > li::before { color: inherit; opacity: .7; }
ol.bx-list--numbered > li > strong:first-child { font-family: var(--site-font-head); font-size: 1.25rem; font-weight: var(--site-weight-head); }
ul.bx-list--check { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em 1.6em; }
ul.bx-list--check > li { position: relative; padding-left: 1.7em; }
ul.bx-list--check > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.15em; height: 1.15em; border-radius: 50%;
background: color-mix(in srgb, currentColor 18%, transparent); }
ul.bx-list--check > li::after { content: ""; position: absolute; left: .42em; top: .42em; width: .3em; height: .55em;
border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
ul.bx-stats { list-style: none; margin: calc(var(--site-space) * 1.2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--site-space) * 2); }
ul.bx-stats > li { display: flex; flex-direction: column; gap: .2em; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); }
ul.bx-stats > li > strong:first-child { font-family: var(--site-font-head); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; font-weight: var(--site-weight-head);
letter-spacing: 0; text-transform: none; color: var(--site-accent); }
.bx-band--bg-ink ul.bx-stats > li, .bx-band--bg-accent ul.bx-stats > li { color: inherit; opacity: .85; }
.bx-band--bg-ink ul.bx-stats > li > strong:first-child, .bx-band--bg-accent ul.bx-stats > li > strong:first-child { color: inherit; }
/* ── Vormen, lagen en kleine bouwstenen (okt 2026) ────────────────────
Wat een modern ontwerp telkens gebruikt: beeld in een vorm, een kaart die
half over een foto ligt, een sectie met een foto erachter, pillen, een
persoonskaartje en een grote quote. Alleen CSS op gewone elementen en
alleen tokens, dus elke ontwerpversie stijlt ze anders - en het donkere
thema werkt vanzelf. */
/* Beeldvormen. De boog staat hierboven (bx-img--arch). */
img.bx-img--circle, .bx-img--circle img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
img.bx-img--rounded, .bx-img--rounded img { border-radius: calc(var(--site-radius) * 3 + 8px); }
img.bx-img--blob, .bx-img--blob img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; }
img.bx-img--slant, .bx-img--slant img { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); border-radius: 0; }
/* Kader: een lijn in de accentkleur die net naast de foto valt. Op een figure
(of de alinea om de foto), want een img heeft geen ::after. */
.bx-img--frame { position: relative; display: block; isolation: isolate; margin-right: 1rem; margin-bottom: 1rem; }
img.bx-img--frame { margin-right: 0; margin-bottom: 0; box-shadow: 1rem 1rem 0 -2px var(--site-bg), 1rem 1rem 0 0 var(--site-accent); }
.bx-img--frame:not(img)::after { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; z-index: -1;
border: 2px solid var(--site-accent); border-radius: var(--site-radius); }
.bx-img--frame:not(img) img { position: relative; display: block; width: 100%; border-radius: var(--site-radius); }
/* Lagen en overlap: een kaart die half over het element erboven valt (een
foto, een sectie). Op een telefoon minder ver, en altijd binnen het scherm. */
.bx-card-block { padding: calc(var(--site-space) * 1.2) calc(var(--site-space) * 1.4); background: var(--site-surface); color: var(--site-ink);
border-radius: var(--site-radius); box-shadow: var(--site-shadow); }
.bx-card-block > :first-child { margin-top: 0; }
.bx-card-block > :last-child { margin-bottom: 0; }
.bx-overlap { position: relative; z-index: 2; margin-top: -5rem; max-width: 26rem; margin-left: auto; margin-right: var(--site-gutter); }
.bx-overlap--left { margin-left: var(--site-gutter); margin-right: auto; }
.bx-overlap--center { margin-left: auto; margin-right: auto; }
@media (max-width: 699px) { .bx-overlap, .bx-overlap--left, .bx-overlap--center { margin: -2.5rem var(--site-space) 0; max-width: none; } }
/* Een bijschrift als kaartje over de hoek van de foto (figure > figcaption). */
figure.bx-figure--card { position: relative; margin-inline: 0; }
figure.bx-figure--card img { display: block; width: 100%; }
figure.bx-figure--card figcaption { position: absolute; left: var(--site-space); bottom: var(--site-space); max-width: min(80%, 20rem);
padding: .6em .9em; background: var(--site-surface); color: var(--site-ink); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
font-size: .9rem; line-height: 1.35; }
figure.bx-figure--card figcaption strong { display: block; font-family: var(--site-font-head); font-size: 1.05rem; }
/* Sectie met een foto erachter: de eerste afbeelding in de sectie wordt de
achtergrond, met een donkere laag zodat tekst leesbaar blijft. Zo blijft de
foto een gewone afbeelding in Ocean (met alt-tekst en renditions) en kiest de
redacteur hem zoals elke andere. */
.bx-band--bg-image { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: calc(var(--site-space-section) * 1.1);
--bx-band-shade: .55; }
.bx-band--bg-image:not(.bx-band--width-full) { padding-inline: var(--site-gutter); border-radius: var(--site-radius); }
.bx-band--bg-image > :is(img, figure, picture):first-child,
.bx-band--bg-image > p:first-child:has(> img:only-child) { position: absolute; inset: 0; z-index: -2; margin: 0; padding: 0; max-width: none; }
.bx-band--bg-image > :is(img, figure, picture, p):first-child img,
.bx-band--bg-image > img:first-child { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; margin: 0; display: block; }
.bx-band--bg-image::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, rgb(0 0 0 / calc(var(--bx-band-shade) * .7)), rgb(0 0 0 / var(--bx-band-shade))); }
.bx-band--shade-light { --bx-band-shade: .3; }
.bx-band--shade-dark { --bx-band-shade: .75; }
.bx-band--shade-accent::before { background: color-mix(in srgb, var(--site-accent) 78%, transparent); }
.bx-band--bg-image a:not(.bx-btn) { color: inherit; }
.bx-band--bg-image .bx-eyebrow { color: inherit; opacity: .9; }
.bx-band--bg-image .bx-btn--ghost { color: #fff; box-shadow: inset 0 0 0 var(--site-border) #fff; }
/* Na de foto staat de eerste tekst bovenaan, niet met een marge ervan af. */
.bx-band--bg-image > :first-child + * { margin-top: 0; }
.bx-band--bg-image > * { max-width: var(--site-measure); }
.bx-band--bg-image.bx-band--width-full > :not(:first-child) { max-width: min(var(--site-measure), var(--site-container)); }
/* Rand van een sectie: schuin of gebogen in plaats van recht. Alleen zinvol
met een achtergrond; de volgende sectie schuift niet onder de rand. */
.bx-band--edge-slant { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); padding-bottom: calc(var(--site-space-section) * .8 + 4vw); }
.bx-band--edge-slant-both { clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
padding-block: calc(var(--site-space-section) * .8 + 4vw); }
.bx-band--edge-curve { border-bottom-left-radius: 50% 5vw; border-bottom-right-radius: 50% 5vw; padding-bottom: calc(var(--site-space-section) * .8 + 3vw); }
/* Pillen: een lijst kenmerken als losse labels ("Vier stemgroepen", "Eerste maand vrij"). */
ul.bx-list--pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; }
ul.bx-list--pills > li { padding: .35em .9em; border-radius: 999px; font-size: .88rem; line-height: 1.3;
background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
ul.bx-list--pills.bx-list--check > li { padding-left: 2.2em; }
ul.bx-list--pills.bx-list--check > li::before { left: .55em; top: .45em; }
ul.bx-list--pills.bx-list--check > li::after { left: .97em; top: .67em; }
/* Pijllijst: rustige links of kenmerken onder elkaar. */
ul.bx-list--arrow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
ul.bx-list--arrow > li { position: relative; padding-left: 1.5em; }
ul.bx-list--arrow > li::before { content: "\2192"; position: absolute; left: 0; color: var(--site-accent); font-weight: 600; }
.bx-band--bg-accent ul.bx-list--arrow > li::before, .bx-band--bg-ink ul.bx-list--arrow > li::before, .bx-band--bg-image ul.bx-list--arrow > li::before { color: inherit; }
/* Badge: een kort woord dat opvalt (een link met deze stijl, of het eerste
vette woord van een alinea met bx-badges). */
a.bx-badge, .bx-badges > strong:first-child { display: inline-flex; align-items: center; gap: .3em; padding: .2em .65em; border-radius: 999px;
font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
background: var(--site-accent); color: var(--site-accent-contrast); vertical-align: middle; }
/* Persoonskaartje: een alinea met een (ronde) foto, een vette naam en een rol.
![]()
Marije van Dalen Artistiek leider
*/
p.bx-person { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8em; align-items: center;
margin: 0; font-size: .9rem; color: var(--site-muted); line-height: 1.3; }
p.bx-person > img:first-child { grid-row: span 2; width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; margin: 0; }
p.bx-person > strong { align-self: end; color: var(--site-ink); font-family: var(--site-font-head); font-size: 1.05rem; }
p.bx-person > br { display: none; }
.bx-band--bg-accent p.bx-person, .bx-band--bg-ink p.bx-person, .bx-band--bg-image p.bx-person { color: inherit; opacity: .9; }
.bx-band--bg-accent p.bx-person > strong, .bx-band--bg-ink p.bx-person > strong, .bx-band--bg-image p.bx-person > strong { color: inherit; }
.bx-person--card { padding: .6em .9em .6em .6em; background: var(--site-surface); border-radius: 999px; box-shadow: var(--site-shadow);
width: fit-content; color: var(--site-muted); }
/* Grote quote: één uitspraak die de sectie draagt. Het laatste stuk (een
alinea met een persoonskaartje of een naam) staat eronder. */
blockquote.bx-quote--large { margin: 0; padding: 0; border: 0; max-width: 46rem; font-family: var(--site-font-head);
font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.3; font-weight: 400; }
blockquote.bx-quote--large::before { content: "\201C"; display: block; height: .55em; font-size: 3.2em; line-height: 1; color: var(--site-accent); }
blockquote.bx-quote--large > p { margin: 0 0 .5em; }
blockquote.bx-quote--large > p:last-child:not(:first-child) { margin: calc(var(--site-space) * 1) 0 0; font-family: var(--site-font); font-size: .95rem; line-height: 1.4; }
blockquote.bx-quote--large.bx-quote--center { margin-inline: auto; text-align: center; }
blockquote.bx-quote--large.bx-quote--center p.bx-person { justify-content: center; grid-template-columns: auto auto; width: fit-content; margin-inline: auto; text-align: left; }
.bx-band--bg-accent blockquote.bx-quote--large::before, .bx-band--bg-ink blockquote.bx-quote--large::before,
.bx-band--bg-image blockquote.bx-quote--large::before { color: inherit; opacity: .6; }
/* ── Kleurverlopen en glas (okt 2026) ────────────────────────────────
De huisstijl heeft één merkkleur; de tweede kleur van een verloop is daar een
afgeleide van (de tint een stukje verder), zodat een verloop bij elke klant en
in het donkere thema vanzelf klopt. Een ontwerpversie kan --site-accent-2 in
haar CSS zelf zetten als de klant een tweede kleur heeft. */
:root {
--site-accent-2: color-mix(in srgb, var(--site-accent) 60%, #ff4d8d);
--site-glow: radial-gradient(55% 65% at 12% 18%, color-mix(in srgb, var(--site-accent) 80%, transparent), transparent 70%),
radial-gradient(45% 55% at 38% 0%, color-mix(in srgb, var(--site-accent-2) 70%, transparent), transparent 72%);
}
@supports (color: oklch(from red l c h)) {
:root { --site-accent-2: oklch(from var(--site-accent) l c calc(h + 50)); }
}
.bx-band--bg-gradient { background: linear-gradient(135deg, var(--site-accent), var(--site-accent-2)); color: var(--site-accent-contrast); }
.bx-band--bg-glow { background: var(--site-glow), var(--site-ink); color: var(--site-bg); }
.bx-band--bg-gradient, .bx-band--bg-glow { padding-block: calc(var(--site-space-section) * .8); }
.bx-band--bg-gradient:not(.bx-band--width-full), .bx-band--bg-glow:not(.bx-band--width-full) { padding-inline: var(--site-gutter); border-radius: var(--site-radius); }
.bx-band--bg-gradient a, .bx-band--bg-glow a { color: inherit; }
.bx-band--bg-gradient .bx-eyebrow, .bx-band--bg-glow .bx-eyebrow { color: inherit; opacity: .9; }
/* Kop met een kleurverloop in de letters. */
.bx-text--gradient { background: linear-gradient(90deg, var(--site-accent), var(--site-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx-band--bg-gradient .bx-text--gradient, .bx-band--bg-accent .bx-text--gradient { background: none; color: inherit; }
/* Glaskaart: doorschijnend vlak met een vage achtergrond, op een foto of gloed. */
.bx-card--glass { background: color-mix(in srgb, var(--site-surface) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent), var(--site-shadow); color: inherit; }
.bx-band--bg-glow .bx-card--glass, .bx-band--bg-image .bx-card--glass, .bx-band--bg-ink .bx-card--glass { background: rgb(255 255 255 / .08); }
/* Onderaan het menu (regio menu, vak extra): achter de items op een groot scherm,
onderaan in de lade op een telefoon. Taalkeuze in de kop: compact. */
.site-menu__extra { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; margin-left: auto; }
.site-menu__extra-item > :first-child { margin: 0; }
.site-languages.bx-languages { margin: 0; }
.site-languages .bx-section__head { display: none; }
.site-languages .bx-languages__list { display: flex; gap: .2em .7em; margin: 0; padding: 0; list-style: none; font-size: .9em; }
@media (max-width: 900px) {
.site-nav .site-menu__extra { flex-direction: column; align-items: flex-start; margin: auto 0 0; padding-top: var(--site-space); border-top: var(--site-border) solid var(--site-line); width: 100%; }
}
/* Kop in twee rijen (header: opbouw two / menu_top): het menu in een eigen balk. */
.site-menubar { background: var(--site-bg); border-bottom: var(--site-border) solid var(--site-line); position: relative; z-index: 49; }
.site-menubar__inner { max-width: var(--site-container); margin-inline: auto; padding: calc(var(--site-space) * .35) var(--site-gutter);
display: flex; position: relative; }
.site-menubar.site-menu-host--align-start .site-menubar__inner { justify-content: flex-start; }
.site-menubar.site-menu-host--align-center .site-menubar__inner { justify-content: center; }
.site-menubar.site-menu-host--align-end .site-menubar__inner { justify-content: flex-end; }
.site-header--layout-menu_top { border-bottom: 0; }
/* Logo in het midden: drie kolommen, zodat het logo echt in het midden staat,
hoeveel er links of rechts ook naast staat. Het menu eronder gecentreerd. */
.site-header--layout-center .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.site-header__side { display: flex; align-items: center; gap: calc(var(--site-space) * 1.2); min-width: 0; }
.site-header__side--end { justify-content: flex-end; }
.site-header__center { display: flex; justify-content: center; }
.site-menubar--center .site-menubar__inner,
.site-menubar--center.site-menu-host--align-start .site-menubar__inner,
.site-menubar--center.site-menu-host--align-end .site-menubar__inner { justify-content: center; }
.site-header__slot--menubutton { display: none; margin-left: auto; }
@media (max-width: 900px) {
/* Telefoon: logo met de menuknop; de balk is leeg (het menu opent als lade). */
.site-header__slot--menubutton { display: flex; }
.site-menubar { border-bottom: 0; }
.site-menubar__inner { padding: 0; }
}
/* Hero (regions/hero.php): beeld of kleurvlak tussen de kop en de inhoud. */
.site-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; color: #fff;
background: var(--site-accent); }
.site-hero--h-full { min-height: var(--site-hero-full); }
.site-hero--h-large { min-height: var(--site-hero-large); }
.site-hero--h-medium { min-height: var(--site-hero-medium); }
.site-hero--h-small { min-height: var(--site-hero-small); }
.site-hero--h-bar { min-height: var(--site-hero-bar); align-items: center; }
.site-hero--bg-color { color: var(--site-accent-contrast, #fff); }
.site-hero__media { position: absolute; inset: 0; }
.site-hero__media img, .site-hero__media picture { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; margin: 0; }
.site-hero__media .bx-banner, .site-hero__media .bx-banner__slide { height: 100%; }
.site-hero--has-image .site-hero__media::after, .site-hero--bg-banners .site-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--site-hero-shade); pointer-events: none; }
.site-hero__inner { position: relative; width: 100%; max-width: var(--site-container); margin-inline: auto;
padding: calc(var(--site-space) * 2) var(--site-gutter); display: flex; flex-direction: column; gap: calc(var(--site-space) * .4); }
.site-hero--h-bar .site-hero__inner { padding-block: calc(var(--site-space) * .8); }
.site-hero--align-center { text-align: center; }
.site-hero--align-center .site-hero__inner { align-items: center; }
.site-hero__title { margin: 0; color: inherit; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; }
.site-hero--h-bar .site-hero__title, .site-hero--h-small .site-hero__title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.site-hero__intro { margin: 0; max-width: 60ch; font-size: 1.1rem; opacity: .92; }
.site-hero__crumb { font-size: .9rem; opacity: .85; }
.site-hero__eyebrow { margin-bottom: .2em; }
.site-hero--align-center .site-hero__eyebrow { justify-content: center; }
.site-hero__text { max-width: 60ch; font-size: 1.1rem; }
.site-hero__text > :first-child { margin-top: 0; }
.site-hero__text .bx-actions, .site-hero__text p:has(> .bx-btn) { margin-top: calc(var(--site-space) * 1.2); }
/* Op beeld valt een knop in de accentkleur goed op; een lijnknop wordt wit. */
.site-hero .bx-btn--ghost { color: #fff; box-shadow: inset 0 0 0 var(--site-border) #fff; }
.site-hero--bg-color .bx-btn:not(.bx-btn--ghost):not(.bx-btn--light):not(.bx-btn--secondary):not(.bx-btn--link) { background: var(--site-accent-contrast); color: var(--site-accent); }
.site-hero__card { position: absolute; right: var(--site-gutter); bottom: calc(var(--site-space) * 2); z-index: 2; display: flex; flex-direction: column; gap: .2em;
min-width: 14rem; max-width: 18rem; padding: calc(var(--site-space) * .9) calc(var(--site-space) * 1.1); border-radius: var(--site-radius);
background: color-mix(in srgb, var(--site-ink) 55%, transparent); backdrop-filter: blur(8px); color: #fff; text-decoration: none;
border-left: 3px solid var(--site-accent); }
.site-hero__card strong { font-family: var(--site-font-head); font-size: 1.6rem; line-height: 1.1; font-weight: var(--site-weight-head); }
.site-hero__card .bx-eyebrow { color: inherit; opacity: .85; margin: 0; }
.site-hero__card .bx-eyebrow::before { display: none; }
a.site-hero__card:hover { background: color-mix(in srgb, var(--site-ink) 70%, transparent); }
@media (max-width: 900px) { .site-hero__card { position: static; margin: 0 var(--site-gutter) calc(var(--site-space) * 1.5); } .site-hero:has(.site-hero__card) { flex-direction: column; align-items: stretch; justify-content: flex-end; } }
.site-hero__crumb a { color: inherit; }
/* Eén titel en één beeld: staat de titel (of de afbeelding) in de hero, dan niet nog eens boven de tekst. */
.site-hero--has-title ~ .site-main .page-title { display: none; }
.site-hero--has-image ~ .site-main .page-hero { display: none; }
/* De kop over de hero: doorzichtig met witte tekst, vast en dicht zodra je scrolt. */
.site-hero-over .site-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
transition: background var(--site-transition) ease, border-color var(--site-transition) ease; }
.site-hero-over .site-header .site-menu a, .site-hero-over .site-header .site-logo, .site-hero-over .site-header a,
.site-hero-over .site-header .site-menu-button { color: #fff; }
.site-hero-over.site-scrolled .site-header { background: var(--site-bg); border-bottom-color: var(--site-line); }
.site-hero-over.site-scrolled .site-header a, .site-hero-over.site-scrolled .site-header .site-logo,
.site-hero-over.site-scrolled .site-header .site-menu-button { color: var(--site-ink); }
.site-hero-over .site-header .site-menu__sub a, .site-hero-over .site-header .site-mega a { color: var(--site-ink); }
.site-hero-over .site-hero__inner { padding-top: calc(var(--site-space) * 5); }
/* Meldingsbalk boven de kop (regions/notice.php). */
.site-notice { background: color-mix(in srgb, var(--site-accent) 12%, var(--site-bg)); color: var(--site-ink); border-bottom: var(--site-border) solid var(--site-line); }
.site-notice--warning { background: #fef3c7; color: #78350f; }
.site-notice--urgent { background: #b91c1c; color: #fff; }
.site-notice__inner { max-width: var(--site-container); margin-inline: auto; padding: calc(var(--site-space) * .5) var(--site-gutter);
display: flex; align-items: center; gap: calc(var(--site-space) * .8); }
.site-notice__text { flex: 1; min-width: 0; }
.site-notice__text p { margin: 0; }
.site-notice__link { color: inherit; font-weight: 600; white-space: nowrap; }
.site-notice__close { all: unset; cursor: pointer; font-size: 1.3em; line-height: 1; padding: 0 .25em; opacity: .7; }
.site-notice__close:hover, .site-notice__close:focus-visible { opacity: 1; }
.site-notice.is-dismissed { display: none; }
/* Megamenu: het paneel loopt over de volle breedte van de kop, niet van het item. */
.site-menu-host:has(.site-menu--submenu-mega) .site-header__inner { position: relative; }
.site-menu--submenu-mega .site-menu__item { position: static; }
.site-mega { display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 100%;
padding: calc(var(--site-space) * 1.2) var(--site-gutter); background: var(--site-surface, #fff);
border-top: var(--site-border) solid var(--site-line); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.site-mega__inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: calc(var(--site-space) * 1.2); }
.site-mega__col { display: flex; flex-direction: column; gap: calc(var(--site-space) * .35); min-width: 0; }
.site-mega__head { font-weight: 600; color: var(--site-ink); }
.site-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--site-space) * .25); }
.site-mega__link { color: var(--site-muted, inherit); }
.site-mega__link:hover, .site-mega__link.is-active, .site-mega__head:hover { color: var(--site-accent); }
@media (hover: hover) {
.site-menu--submenu-mega .site-menu__item--has-sub:hover > div > .site-mega,
.site-menu--submenu-mega .site-menu__item--has-sub:focus-within > div > .site-mega { display: block; }
}
.site-menu--submenu-mega .site-menu__item.is-open > div > .site-mega { display: block; }
/* De menuknop: op telefoons altijd, en bij "alleen een menuknop" ook op grote schermen. */
.site-menu-button { all: unset; cursor: pointer; display: none; align-items: center; gap: .5em; padding: .4em .6em; border-radius: var(--site-radius-sm); font-weight: 600; }
.site-menu-button:focus-visible { outline: 2px solid var(--site-focus); }
.site-menu-button__bars, .site-menu-button__bars::before, .site-menu-button__bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ""; }
.site-menu-button__bars::before { position: absolute; top: -6px; }
.site-menu-button__bars::after { position: absolute; top: 6px; }
.site-menu-host--position-overlay .site-menu-button { display: inline-flex; margin-left: auto; }
.site-menu-host--position-overlay .site-menu { display: none; }
@media (max-width: 900px) {
.site-menu-button { display: inline-flex; margin-left: auto; }
.site-menu { display: none; }
}
/* Open: een lade van rechts, of het hele scherm. */
.site-menu-open .site-menu { display: block; position: fixed; z-index: 100; top: 0; bottom: 0; right: 0; overflow-y: auto;
width: min(340px, 86vw); padding: calc(var(--site-space) * 4) calc(var(--site-space) * 1.5) calc(var(--site-space) * 2);
box-shadow: -10px 0 40px rgba(0, 0, 0, .18); }
/* De kleur van de lade apart en met :where(), dus zo licht als `.site-menu` zelf: een
achtergrond uit de Studio (Stijl › Alle .site-menu, op telefoon) of uit de CSS van
de versie wint dan. Met de volle selector won de lade altijd van je eigen keuze. */
:where(.site-menu-open) .site-menu { background: var(--site-surface); }
.site-menu-open .site-menu--mobile-fullscreen { width: 100%; left: 0; box-shadow: none; }
.site-menu-open .site-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
.site-menu-open .site-menu__item { flex-wrap: wrap; justify-content: space-between; border-bottom: var(--site-border) solid var(--site-line); }
.site-menu-open .site-menu__link { padding-block: calc(var(--site-space) * .7); flex: 1; }
.site-menu-open .site-menu__item > div { width: 100%; }
.site-menu-open .site-menu__sub { position: static; box-shadow: none; border: 0; padding: 0 0 calc(var(--site-space) * .5) calc(var(--site-space) * .8); }
/* In de lade is een megamenu gewoon een lijst onder het item. */
.site-menu-open .site-mega { position: static; box-shadow: none; border: 0; padding: 0 0 calc(var(--site-space) * .5) calc(var(--site-space) * .8); }
.site-menu-open .site-mega__inner { grid-template-columns: 1fr; gap: calc(var(--site-space) * .6); }
.site-menu-open .site-menu-button { position: fixed; z-index: 101; top: calc(var(--site-space) * 1.1); right: var(--site-gutter); }
.site-menu-open { overflow: hidden; }
/* Zijbalk links (grote schermen): de kop wordt een vaste kolom. */
@media (min-width: 901px) {
.site-menu-host--position-side { position: fixed; top: 0; bottom: 0; left: 0; width: 260px; border-bottom: 0; border-right: var(--site-border) solid var(--site-line); overflow-y: auto; }
.site-menu-host--position-side .site-header__inner { flex-direction: column; align-items: stretch; max-width: none; padding-block: calc(var(--site-space) * 2); }
.site-menu-host--position-side .site-header__slot--menu { flex: 0; }
.site-menu-host--position-side .site-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
.site-menu-host--position-side .site-menu__item { flex-wrap: wrap; justify-content: space-between; }
.site-menu-host--position-side .site-menu__item > div { width: 100%; }
.site-menu-host--position-side .site-menu__sub { position: static; box-shadow: none; border: 0; padding: 0 0 0 calc(var(--site-space) * .8); }
body:has(.site-menu-host--position-side) .site-main,
body:has(.site-menu-host--position-side) .site-footer { margin-left: 260px; }
}
/* Footer: kolommen met blokken, en een onderbalk. */
.site-footer { margin-top: var(--site-space-section); padding-top: calc(var(--site-space) * 2); border-top: var(--site-border) solid var(--site-line); color: var(--site-muted); font-size: .9rem; }
/* Rijen (footer.manifest.php › Nieuwe rij): kolommen, achtergrond, lijn, ruimte. */
.site-footer--rows { padding-top: 0; }
.site-footer__row { padding-block: calc(var(--site-space) * 2); }
.site-footer__row--space-small { padding-block: var(--site-space); }
.site-footer__row--space-large { padding-block: calc(var(--site-space) * 3); }
.site-footer__row--line { border-top: var(--site-border) solid var(--site-line); }
.site-footer__row--bg-tint { background: color-mix(in srgb, currentColor 6%, transparent); }
.site-footer__row--bg-surface { background: var(--site-surface); }
.site-footer__row--bg-accent { background: var(--site-accent); color: var(--site-accent-contrast); }
.site-footer__row--bg-ink { background: var(--site-ink); color: var(--site-bg); }
.site-footer__row--bg-accent .site-footer__title, .site-footer__row--bg-ink .site-footer__title { color: inherit; }
.site-footer__row + .site-footer__row--bg-none:not(.site-footer__row--line) { padding-top: 0; }
.site-footer__row-inner { display: grid; gap: calc(var(--site-space) * 2); align-items: start; }
.site-footer__row--cols-2 .site-footer__row-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__row--cols-3 .site-footer__row-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer__row--cols-4 .site-footer__row-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-footer__row--spread .site-footer__row-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--site-space); }
.site-footer__row--center .site-footer__row-inner { text-align: center; justify-items: center; }
.site-footer__row--center.site-footer__row--spread .site-footer__row-inner { justify-content: center; }
@media (max-width: 999px) { .site-footer__row--cols-4 .site-footer__row-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .site-footer__row-inner { grid-template-columns: 1fr; } .site-footer__row--cols-2 .site-footer__row-inner, .site-footer__row--cols-3 .site-footer__row-inner, .site-footer__row--cols-4 .site-footer__row-inner { grid-template-columns: 1fr; } }
.site-footer__title { font-size: 1rem; margin: 0 0 calc(var(--site-space) * .6); color: var(--site-ink); }
.site-footer a { color: inherit; }
.site-footer__menu, .site-socials { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--site-space) * .35); }
.site-footer__menu--horizontal { display: flex; flex-wrap: wrap; gap: var(--site-space); }
.site-footer__menu .site-footer__menu { padding-left: calc(var(--site-space) * .8); margin-top: calc(var(--site-space) * .35); }
.site-contact { font-style: normal; display: grid; gap: calc(var(--site-space) * .35); }
/* Een verdeelde rij (onderbalk): menu naast elkaar, zonder submenu's. */
.site-footer__row--spread .site-footer__menu { display: flex; flex-wrap: wrap; gap: .3em 1.2em; margin: 0; padding: 0; list-style: none; }
.site-footer__row--spread .site-footer__menu ul { display: none; }
.site-footer__row--spread p { margin: 0; }
.site-footer__credit a { color: inherit; }
/* Bovenste band (contact, nieuwsbrief): een eigen tint, net iets donkerder of
lichter dan de footer zelf - volgt de kleur die de footer heeft. */
.site-footer__stack { margin-top: calc(var(--site-space) * 2); }
/* Contact met icoontjes. */
.site-contact--icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--site-space) calc(var(--site-space) * 1.5); }
.site-contact__card { display: flex; gap: .8em; align-items: flex-start; }
.site-contact__icon { flex: 0 0 auto; margin-top: .1em; }
.site-contact__card p { margin: 0; }
.site-contact__label { font-weight: 600; color: var(--site-ink); }
.site-footer .site-contact__label { color: inherit; filter: brightness(1.3); }
.site-contact__line a { color: inherit; }
/* Rij boven de onderbalk (betaalmethodes, social media). */
.site-payments { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; }
.site-payments__title { margin: 0; font-weight: 700; }
.site-payments__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-payments__badge { display: block; }
/* Scheidingsteken tussen menu-items (naast elkaar). */
.site-footer__menu--sep-bar, .site-footer__menu--sep-dot { display: flex; flex-wrap: wrap; column-gap: 0; }
.site-footer__menu--sep-bar > li + li::before { content: '|'; margin-inline: .75em; opacity: .6; }
.site-footer__menu--sep-dot > li + li::before { content: '\00B7'; margin-inline: .6em; opacity: .6; }
.site-footer__copyright { margin: 0; }
.site-header .site-socials { display: flex; gap: calc(var(--site-space) * .6); }
/* Sectie (bx-band): een vlak met eigen breedte, achtergrond en ruimte. Vervangt
blockFull. Volle breedte: site.js meet de kolom en zet breedte en marges precies
(de tekstkolom staat niet altijd in het midden); dit is de terugval zonder script. */
.bx-band { margin-block: var(--site-space-section); }
.bx-band--space-none { margin-block: 0; }
.bx-band--space-large { margin-block: calc(var(--site-space-section) * 1.8); }
.bx-band--width-narrow { max-width: var(--site-measure); margin-inline: auto; }
.bx-band--width-full { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.bx-band--bg-surface,
.bx-band--bg-accent,
.bx-band--bg-ink { padding-block: calc(var(--site-space-section) * .8); }
.bx-band--bg-surface { background: var(--site-surface); }
.bx-band--bg-accent { background: var(--site-accent); color: var(--site-accent-contrast); }
.bx-band--bg-ink { background: var(--site-ink); color: var(--site-bg); }
.bx-band--bg-accent a, .bx-band--bg-ink a { color: inherit; }
.bx-band--bg-surface:not(.bx-band--width-full),
.bx-band--bg-accent:not(.bx-band--width-full),
.bx-band--bg-ink:not(.bx-band--width-full) { padding-inline: var(--site-gutter); border-radius: var(--site-radius); }
.bx-band > :first-child { margin-top: 0; }
.bx-band > :last-child { margin-bottom: 0; }
/* Pagina */
.page-title { font-size: var(--site-h1); margin: 0 0 var(--site-space); }
.page-hero img { width: 100%; height: auto; border-radius: var(--site-radius); margin-bottom: var(--site-gutter); }
.page-content { max-width: var(--site-measure); }
/* Responsive image-component (focal point via CSS-custom-property) */
.bx-image { display: block; }
.bx-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); display: block; }
@media (max-width: 640px) {
.bx-image img { object-position: var(--focal-m, var(--focal, 50% 50%)); }
}
/* Blur-up: de ![]()
heeft de wazige lqip als achtergrond (inline). Terwijl de
scherpe bron laadt zie je de gradient; daarna dekt de geladen ![]()
'm af. */
.bx-image-blurup img { background-repeat: no-repeat; }
/* Style-vloer: gestileerde placeholder-tegel met initialen (geen asset) */
.bx-image-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; aspect-ratio: 16 / 9; color: rgba(255,255,255,.92); }
.bx-image-ph-label { font-weight: 700; font-size: clamp(1.4rem, 6vw, 3rem); letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* Banner / slider (structuur; animatie/pijlen laat het theme of JS doen) */
.bx-banner { position: relative; overflow: hidden; border-radius: var(--site-radius); }
.bx-banner__slide { position: relative; aspect-ratio: 21 / 9; }
.bx-banner__slide .bx-image, .bx-banner__slide .bx-image img { height: 100%; }
.bx-banner__caption { position: absolute; inset-inline-start: 0; inset-block-end: 0; padding: calc(var(--site-space) * 1.25); background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.bx-banner__slide + .bx-banner__slide { display: none; } /* 1 slide zichtbaar tot er JS is */
/* ═══════════════════════════════════════════════════════════════════
PRIMITIEVEN - de gedeelde bouwstenen waar élke hook uit put.
Naamconventie: BEM met bx-prefix → .bx-__--
Een hook geeft semantische classes, nooit opmaak-classes: de hook bepaalt
WAT het is, de site bepaalt HOE het eruitziet. Wil een klant ruimere kaarten,
dan schrijft die `.bx-card { padding: 2rem }` in z'n eigen css - één regel,
alleen daar, en een framework-update overschrijft het niet.
Wat hier staat is een vloer, geen ontwerp: net genoeg dat een hook zonder
theme al toonbaar is. Alles hangt aan de tokens bovenaan, dus een reskin is
dat ene :root-blok overschrijven.
═══════════════════════════════════════════════════════════════════ */
/* Knop. `.btn` blijft werken als alias - hij stond er eerder zonder prefix. */
.bx-btn, .btn {
display: inline-block; padding: .6em 1.2em; border: 0;
border-radius: var(--site-radius); background: var(--site-accent);
color: var(--site-accent-contrast); text-decoration: none; font: inherit;
font-weight: 600; cursor: pointer; line-height: 1.4;
transition: background var(--site-transition) ease;
}
.bx-btn:hover, .btn:hover { background: var(--site-accent-hover); }
.bx-btn--ghost { background: transparent; color: var(--site-accent); box-shadow: inset 0 0 0 var(--site-border) currentColor; }
.bx-btn--ghost:hover { background: color-mix(in srgb, var(--site-accent) 10%, transparent); }
.bx-btn--sm { padding: .4em .9em; font-size: .9em; }
.bx-btn--lg { padding: .8em 1.6em; font-size: 1.1em; }
/* Tweede knop: rustiger dan de primaire, voor de tweede actie ernaast. Kleur via
--site-btn-secondary-bg/-fg, zodat een ontwerpversie hem met één regel omzet. */
.bx-btn--secondary { background: var(--site-btn-secondary-bg); color: var(--site-btn-secondary-fg); }
.bx-btn--secondary:hover { background: color-mix(in srgb, var(--site-btn-secondary-bg) 82%, var(--site-bg)); }
/* Knop als link: tekst met een pijl, voor "lees meer" naast een echte knop. */
.bx-btn--link { background: none; color: var(--site-link); padding-inline: 0; box-shadow: none; }
.bx-btn--link::after { content: "\00a0\2192"; transition: margin var(--site-transition) ease; }
.bx-btn--link:hover { background: none; text-decoration: underline; }
.bx-btn--link:hover::after { margin-left: .2em; }
/* Kaart - de verpakking van bijna elk overzichtsitem. */
.bx-card {
display: flex; flex-direction: column;
background: var(--site-surface); border: var(--site-border) solid var(--site-line);
border-radius: var(--site-radius); overflow: hidden;
box-shadow: var(--site-shadow);
}
.bx-card__media { display: block; }
.bx-card__body { padding: var(--site-space); display: flex; flex-direction: column; gap: calc(var(--site-space) * .4); }
.bx-card__title { margin: 0; font-size: var(--site-h4); }
.bx-card__meta { color: var(--site-muted); font-size: .85rem; }
.bx-card__text { margin: 0; }
/* Duwt de knop naar de onderkant, zodat kaarten van ongelijke lengte toch
uitlijnen. */
.bx-card__foot { margin-top: auto; padding: 0 var(--site-space) var(--site-space); }
/* Raster - auto-fit, dus geen kolom-instelling per hook nodig. */
.bx-grid {
display: grid; gap: var(--site-gutter);
grid-template-columns: repeat(auto-fit, minmax(var(--bx-grid-min, var(--site-card-min)), 1fr));
}
.bx-grid--2 { --bx-grid-min: calc(var(--site-card-min) * 1.45); }
.bx-grid--4 { --bx-grid-min: calc(var(--site-card-min) * .77); }
/* Verticale stapel met vast ritme - het alternatief voor margins overal. */
.bx-stack { display: flex; flex-direction: column; gap: var(--site-space); }
.bx-stack--lg { gap: calc(var(--site-space) * 2); }
/* Sectie: een blok op een pagina, met kop en optionele intro. */
.bx-section { margin-block: var(--site-space-section); }
.bx-section__head { margin-bottom: var(--site-gutter); }
.bx-section__title { margin: 0 0 .3em; font-size: var(--site-h2); }
.bx-section__intro { margin: 0; color: var(--site-muted); max-width: 65ch; }
/* Redactionele tekst: alles wat uit een editor of Markdown komt. */
.bx-prose { max-width: var(--site-measure); }
.bx-prose > :first-child { margin-top: 0; }
.bx-prose > :last-child { margin-bottom: 0; }
.bx-prose img { max-width: 100%; height: auto; border-radius: var(--site-radius); }
.bx-prose table { width: 100%; border-collapse: collapse; }
.bx-prose td, .bx-prose th { border: var(--site-border) solid var(--site-line); padding: .5em .7em; text-align: left; }
.bx-prose blockquote { margin: 0; padding-left: var(--site-space); border-left: 3px solid var(--site-accent); color: var(--site-muted); }
.bx-prose pre { overflow-x: auto; background: var(--site-line); padding: var(--site-space); border-radius: var(--site-radius); font-family: var(--site-font-mono); }
.bx-prose code { font-family: var(--site-font-mono); }
/* Varianten die een redacteur mag kiezen (de Stijl-lijst in de editor). Ze staan
hier en niet in de editor, want de site bepaalt hoe iets eruitziet - de
redacteur kiest alleen WAT het is. Zie CONVENTIONS.md. */
.bx-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--site-line) 45%, transparent); }
.bx-table--compact td, .bx-table--compact th { padding: .3em .5em; font-size: .92em; }
/* Brede tabel op een telefoon: laat de tábel schuiven, niet de pagina. Zonder dit
duwt één brede tabel de hele layout scheef en dat is op mobiel de meest gemaakte
fout in redactionele inhoud. */
.bx-table--scroll { display: block; overflow-x: auto; max-width: 100%; }
.bx-lead { font-size: 1.15em; line-height: var(--site-leading); color: var(--site-muted); }
.bx-note { border-left: 3px solid var(--site-accent); padding: .6em var(--site-space); background: color-mix(in srgb, var(--site-accent) 8%, transparent); border-radius: var(--site-radius); }
.bx-img--wide { width: 100%; max-width: none; }
.bx-img--left { float: left; margin: 0 var(--site-space) var(--site-space) 0; max-width: 45%; }
.bx-img--right { float: right; margin: 0 0 var(--site-space) var(--site-space); max-width: 45%; }
/* Beeld + tekst naast elkaar (portret bij een tekst, foto bij een dienst).
Heette `.bx-media` naar het "media object" uit 2010; hernoemd omdat media
inmiddels voor iedereen video en audio betekent - en dat is wat de gelijknamige
hook doet. Werd nog nergens gebruikt, dus dit brak niets. */
.bx-split { display: grid; gap: calc(var(--site-space) * 1.5); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 700px) {
.bx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bx-split--flip .bx-split__figure { order: 2; }
}
/* Kolommen - de enige indeling die een redacteur zelf mag maken.
Een vaste set verhoudingen in plaats van vrije breedtes: zo blijft het ritme
van de site heel, klapt alles op dezelfde breedte om naar onder elkaar, en
staat er over vijf jaar geen `width: 37%` in een pagina die niemand meer
durft aan te raken.
Twee breekpunten: onder de 700px staat alles onder elkaar, daarboven wordt
drie- en vierkoloms eerst tweekoloms - vier kolommen naast elkaar op een
tablet is vier keer niets. */
.bx-cols { display: grid; gap: var(--site-gutter); grid-template-columns: 1fr; }
/* min-width:0 is wat een grid-kolom nodig heeft om z'n inhoud te laten krimpen;
zonder dit duwt één lange url of brede tabel de kolom uit de pagina. */
.bx-col { min-width: 0; }
.bx-col > :first-child { margin-top: 0; }
.bx-col > :last-child { margin-bottom: 0; }
@media (min-width: 700px) {
.bx-cols--2, .bx-cols--3, .bx-cols--4 { grid-template-columns: 1fr 1fr; }
.bx-cols--head { grid-template-columns: 1.2fr 1fr; align-items: end; }
.bx-cols--2-1 { grid-template-columns: 2fr 1fr; }
.bx-cols--1-2 { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 1000px) {
.bx-cols--3 { grid-template-columns: repeat(3, 1fr); }
.bx-cols--4 { grid-template-columns: repeat(4, 1fr); }
}
/* ── Hook: overzicht (collection) ───────────────────────────────────
De werkpaard-hook: items uit een module in een raster of lijst. Vier varianten
(kaart / icoon / beeld / lijst) vervangen de vijftien losse grid-hooks uit de
oude sites.
Kolommen per breekpunt zónder JavaScript: de media-query staat vast (custom
properties werken niet in een @media-conditie) maar de wáárde erin komt uit
een property die de modifier-class zet. Zo is er één regel per breekpunt in
plaats van vijf, en houdt de hook z'n instelling in een class. */
.bx-collection__grid {
display: grid;
gap: var(--bx-coll-gap, var(--site-gutter));
grid-template-columns: 1fr;
}
.bx-collection--gap-tight { --bx-coll-gap: calc(var(--site-space) * .6); }
.bx-collection--gap-normal { --bx-coll-gap: var(--site-gutter); }
.bx-collection--gap-wide { --bx-coll-gap: calc(var(--site-space) * 2); }
@media (min-width: 700px) {
.bx-collection--grid .bx-collection__grid {
grid-template-columns: repeat(var(--bx-coll-cols-t, 2), minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.bx-collection--grid .bx-collection__grid {
grid-template-columns: repeat(var(--bx-coll-cols, 3), minmax(0, 1fr));
}
}
/* Tablet krijgt bewust minder kolommen dan de instelling: zes naast elkaar op
een tablet is zes keer niets. */
.bx-collection--c2 { --bx-coll-cols: 2; --bx-coll-cols-t: 2; }
.bx-collection--c3 { --bx-coll-cols: 3; --bx-coll-cols-t: 2; }
.bx-collection--c4 { --bx-coll-cols: 4; --bx-coll-cols-t: 2; }
.bx-collection--c5 { --bx-coll-cols: 5; --bx-coll-cols-t: 3; }
.bx-collection--c6 { --bx-coll-cols: 6; --bx-coll-cols-t: 3; }
.bx-collection__item { min-width: 0; display: flex; flex-direction: column; }
/* Het hele item is een link als de items aanklikbaar zijn. Kleur en onderstreping
erven van de kaart, anders wordt elk kaartje accentkleurig. */
a.bx-collection__item { text-decoration: none; color: inherit; transition: border-color var(--site-transition) ease; }
a.bx-collection__item:hover { border-color: var(--site-accent); }
a.bx-collection__item:hover .bx-collection__title { color: var(--site-accent); }
.bx-collection__media { margin: 0; overflow: hidden; }
.bx-collection--card .bx-collection__media .bx-image { aspect-ratio: 4 / 3; }
.bx-collection--image .bx-collection__media .bx-image { aspect-ratio: 1 / 1; border-radius: var(--site-radius); }
.bx-collection__caption { padding-top: calc(var(--site-space) * .4); color: var(--site-muted); font-size: .9rem; }
.bx-collection__icon { display: block; font-size: 2rem; line-height: 1; color: var(--site-accent); margin-bottom: calc(var(--site-space) * .6); }
.bx-collection__body { display: flex; flex-direction: column; gap: calc(var(--site-space) * .35); }
/* Alleen de kaart-variant heeft een omhulsel met een rand; de andere staan vrij
op de pagina en hebben die binnenruimte niet nodig. */
.bx-collection--card .bx-collection__body { padding: var(--site-space); }
.bx-collection__title { margin: 0; font-size: var(--site-h4); transition: color var(--site-transition) ease; }
.bx-collection__meta { margin: 0; color: var(--site-muted); font-size: .85rem; }
.bx-collection__text { margin: 0; }
/* margin-top:auto duwt de leeslink naar onderen, zodat kaarten van ongelijke
lengte toch uitlijnen. */
.bx-collection__more { margin-top: auto; padding-top: calc(var(--site-space) * .5); color: var(--site-accent); font-weight: 600; }
/* Lijst onder elkaar: geen kaarten maar regels met een scheidingslijn. */
.bx-collection--rows .bx-collection__item { padding-block: var(--site-space); border-bottom: var(--site-border) solid var(--site-line); }
.bx-collection--rows .bx-collection__item:last-child { border-bottom: 0; }
.bx-collection--rows .bx-collection__grid { gap: 0; }
/* Lijst-variant: op een breed scherm de datum rechts naast de kop, zoals elk
nieuwsoverzicht dat doet. Onder de 700px valt 'ie vanzelf terug op onder
elkaar, want dan geldt deze regel niet. */
@media (min-width: 700px) {
.bx-collection--list .bx-collection__body {
display: grid; grid-template-columns: 1fr auto;
align-items: baseline; column-gap: var(--site-space);
}
.bx-collection--list .bx-collection__meta { grid-column: 2; grid-row: 1; }
.bx-collection--list .bx-collection__text,
.bx-collection--list .bx-collection__more { grid-column: 1 / -1; }
}
/* `.bx-collection--icon` krijgt bewust geen eigen opmaak: het icoonblok staat
vrij op de pagina (geen kaart, geen rand) en `.bx-collection__icon` doet het
werk. De class staat er als haak voor een theme dat er wél iets mee wil. */
/* ── Hook: kaart ────────────────────────────────────────────────────
Verhouding in plaats van een hoogte in pixels: een kaart van 400px hoog is op
een telefoon bijna vierkant en op een breed scherm een streepje. */
.bx-geomap__frame { position: relative; overflow: hidden; border-radius: var(--site-radius); background: var(--site-line); }
.bx-geomap__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.bx-geomap--breed .bx-geomap__frame { aspect-ratio: 21 / 9; }
.bx-geomap--normaal .bx-geomap__frame { aspect-ratio: 16 / 9; }
.bx-geomap--vierkant .bx-geomap__frame { aspect-ratio: 1 / 1; }
.bx-geomap--hoog .bx-geomap__frame { aspect-ratio: 4 / 5; }
/* Klik-om-te-laden - gedeeld door elk blok dat een derde partij inlaadt (kaart,
video, muziekspeler). Een en geen knop met JavaScript, en dat is geen
stijlkeuze: een browser laadt de inhoud van een dichtgeklapte niet.
Daarmee is dit het enige patroon dat én zonder script werkt, én écht voorkomt
dat er verbinding wordt gemaakt. Zie block_consent() in runtime/helpers.php. */
.bx-consent > summary { list-style: none; cursor: pointer; }
.bx-consent > summary::-webkit-details-marker { display: none; }
.bx-consent__btn {
display: flex; flex-direction: column; gap: .3em;
align-items: center; justify-content: center; text-align: center;
padding: calc(var(--site-space) * 2) var(--site-space);
border: var(--site-border) dashed var(--site-line);
border-radius: var(--site-radius);
background: color-mix(in srgb, var(--site-ink) 4%, transparent);
transition: border-color var(--site-transition) ease;
}
.bx-consent__btn:hover { border-color: var(--site-accent); }
.bx-consent__title {
display: inline-block; padding: .5em 1.2em; border-radius: var(--site-radius);
background: var(--site-accent); color: var(--site-accent-contrast); font-weight: 600;
}
.bx-consent__note { color: var(--site-muted); font-size: .85rem; max-width: 40ch; }
/* Open: de knop verdwijnt, de inhoud komt ervoor in de plaats. */
.bx-consent[open] > summary { display: none; }
.bx-geomap__meta {
margin: calc(var(--site-space) * .6) 0 0;
display: flex; flex-wrap: wrap; gap: calc(var(--site-space) * .8);
align-items: baseline; color: var(--site-muted); font-size: .9rem;
}
/* Het adres is het antwoord op "waar zit je" - dat mag de aandacht hebben, niet
de grijze bijzin worden die de rest van deze regel is. */
.bx-geomap__address { color: var(--site-ink); font-weight: 600; }
.bx-geomap__link { color: var(--site-accent); font-weight: 600; text-decoration: none; }
.bx-geomap__link:hover { text-decoration: underline; }
/* ── Hook: formulier (Slate) ───────────────────────────────────────── */
.bx-form__form { display: grid; gap: var(--site-space); max-width: 40rem; }
.bx-form__label { display: block; font-weight: 600; margin-bottom: .35em; }
.bx-form__input {
width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: var(--site-bg, #fff);
padding: .6em .75em; border: var(--site-border, 1px) solid var(--site-line); border-radius: var(--site-radius);
}
.bx-form__input:focus { outline: 2px solid var(--site-accent); outline-offset: 1px; border-color: var(--site-accent); }
textarea.bx-form__input { resize: vertical; min-height: 7em; }
.bx-form__choices { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em 1.2em; }
.bx-form__choices legend { padding: 0; }
.bx-form__choices label { display: inline-flex; align-items: center; gap: .4em; }
.bx-form__field--rating .bx-form__choices, .bx-form__field--nps .bx-form__choices { gap: .4em .8em; }
.bx-form__help { display: block; color: var(--site-muted); margin-top: .3em; font-size: .9em; }
.bx-form__errors { border-left: 3px solid #c62828; padding: .5em 1em; background: rgba(198, 40, 40, .06); }
.bx-form__errors ul { margin: 0; padding-left: 1.1em; }
.bx-form__done { border-left: 3px solid var(--site-accent); padding: .8em 1em; background: rgba(0, 0, 0, .03); }
.bx-form__submit { justify-self: start; }
/* De honeypot: voor mensen onzichtbaar en onbereikbaar, voor een bot gewoon een veld. */
.bx-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ── Detailpagina's van modules (nieuws, agenda, fotoalbum) ──────────── */
/* Ankers (#contact, Studio › Instellingen): niet onder een plakkerige kop
verdwijnen, en zacht scrollen - behalve voor wie minder beweging wil. */
[id] { scroll-margin-top: calc(var(--site-space) * 6); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Sjablonen (Huisstijl › Sjablonen, runtime/templates.php): de keuzes als
page-t--- op het artikel. De standaard is hoe het al was. */
.page-t--width-wide .page-content, .page-t--width-wide .page-intro { max-width: none; }
.page-t--width-most .page-content, .page-t--width-most .page-intro { max-width: 80%; }
/* Tekst in kolommen (sjabloon Pagina): doorlopend, zoals een krant. Wat zelf al een
indeling is (sectie, kolommen, foto, tabel) loopt over de volle breedte. */
.page-t--text-cols-2 .page-content, .page-t--text-cols-3 .page-content { column-gap: calc(var(--site-gutter) * 2); max-width: none; }
.page-t--text-cols-2 .page-content { columns: 2; }
.page-t--text-cols-3 .page-content { columns: 3; }
.page-t--text-cols-2 .page-content > *, .page-t--text-cols-3 .page-content > * { break-inside: avoid; }
.page-t--text-cols-2 .page-content > :is(.bx-band, .bx-cols, figure, table, ul.bx-stats),
.page-t--text-cols-3 .page-content > :is(.bx-band, .bx-cols, figure, table, ul.bx-stats) { column-span: all; }
.page-t--text-cols-2 .page-content > :first-child, .page-t--text-cols-3 .page-content > :first-child { margin-top: 0; }
@media (max-width: 699px) { .page-t--text-cols-2 .page-content, .page-t--text-cols-3 .page-content { columns: 1; } }
@media (max-width: 699px) { .page-t--width-most .page-content, .page-t--width-most .page-intro { max-width: none; } }
.page-t--title-hide .page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-t__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 38%); gap: var(--site-gutter); align-items: start; }
.page-t__split > :first-child { min-width: 0; }
.page-t__aside .page-hero img { margin-bottom: 0; }
.page--event .page-t__aside { padding: var(--site-space); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); }
.page--event .page-t__aside .bx-event-facts { margin: 0 0 var(--site-space); }
@media (max-width: 699px) {
.page-t__split { grid-template-columns: 1fr; }
.page-t__split > .page-t__aside { order: -1; }
}
.page-t > .page-back:last-child { margin: var(--site-space) 0 0; }
/* Vakjes van het sjabloon: onder de tekst, en een zijbalk naast de inhoud. */
.page-t__slot--after { display: grid; gap: calc(var(--site-space) * 2); margin-top: calc(var(--site-space) * 2); padding-top: calc(var(--site-space) * 2); border-top: var(--site-border) solid var(--site-line); }
.page-t__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); gap: calc(var(--site-gutter) * 1.5); align-items: start; }
.page-t--aside-side-left .page-t__layout { grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); }
.page-t--aside-side-left .page-t__slot--aside { order: -1; }
.page-t__slot--aside { display: grid; gap: calc(var(--site-space) * 1.5); padding: var(--site-space); background: var(--site-surface); border-radius: var(--site-radius); }
.page-t__slot .site-footer__title { font-size: var(--site-h4); margin: 0 0 calc(var(--site-space) * .5); color: inherit; }
.page-t__slot p { margin-top: 0; }
@media (max-width: 899px) { .page-t__layout, .page-t--aside-side-left .page-t__layout { grid-template-columns: 1fr; } .page-t--aside-side-left .page-t__slot--aside { order: 0; } }
/* Product: de prijs groot onder de naam; foto links naast naam en prijs. */
.bx-product-price { font-family: var(--site-font-head); font-size: var(--site-h3); font-weight: var(--site-weight-head); margin: 0 0 var(--site-space); }
.bx-product-number { color: var(--site-muted); font-size: .9em; margin: 0 0 var(--site-space); }
.page-t__split--product { grid-template-columns: minmax(220px, 45%) minmax(0, 1fr); margin-bottom: var(--site-space); }
.page-back { margin: 0 0 var(--site-space); font-size: .9em; }
.page-back a { color: var(--site-muted); text-decoration: none; }
.page-back a:hover { color: var(--site-link); }
.page-meta { color: var(--site-muted); margin: calc(var(--site-space) * -.5) 0 var(--site-space); }
.page-intro { font-size: 1.1em; max-width: var(--site-measure); }
.bx-event-facts { display: grid; grid-template-columns: max-content 1fr; gap: calc(var(--site-space) * .35) var(--site-space);
margin: 0 0 var(--site-space); padding: var(--site-space); background: var(--site-surface);
border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); max-width: var(--site-measure); }
.bx-event-facts dt { font-weight: 600; }
.bx-event-facts dd { margin: 0; }
.bx-event-facts.is-past { opacity: .75; }
.bx-event-past { display: inline-block; margin-left: .4em; padding: 0 .5em; border-radius: var(--site-radius-sm);
background: var(--site-line); color: var(--site-muted); font-size: .85em; }
/* Fotoalbum: raster van kleine foto's; de lichtbak (lightbox.js) maakt er een
blader-venster van, zonder script opent een klik de grote foto. */
.bx-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: calc(var(--site-space) * .5); margin: var(--site-space) 0; }
.bx-album__item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--site-radius-sm); background: var(--site-line); }
.bx-album__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--site-transition); }
.bx-album__item:hover img, .bx-album__item:focus-visible img { transform: scale(1.04); }
.bx-album__more { color: var(--site-muted); font-size: .9em; }
.bx-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
background: rgba(0, 0, 0, .92); color: #fff; }
.bx-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.bx-lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.bx-lightbox__figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.bx-lightbox__figure img { max-width: 92vw; max-height: 82vh; object-fit: contain; }
.bx-lightbox__figure figcaption { margin-top: .5em; font-size: .9em; opacity: .85; }
.bx-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; padding: .5rem 1rem; opacity: .8; }
.bx-lightbox button:hover, .bx-lightbox button:focus-visible { opacity: 1; }
.bx-lightbox__close { top: .5rem; right: .5rem; }
.bx-lightbox__prev { left: .25rem; top: 50%; transform: translateY(-50%); }
.bx-lightbox__next { right: .25rem; top: 50%; transform: translateY(-50%); }
.bx-lightbox__count { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); font-size: .85em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .bx-album__item img { transition: none; } }
/* ── Stijlgids (/_bx/stijl) ───────────────────────────────────────────
Alleen in de Studio en de voorvertoning. Bewust neutraal: de gids zelf mag
niet op de huisstijl lijken, anders zie je niet wat van de site is. */
.bx-sg__intro { margin-bottom: var(--site-space-section); }
.bx-sg__section { margin-block: var(--site-space-section); }
.bx-sg__title { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted);
border-bottom: var(--site-border) solid var(--site-line); padding-bottom: .4em; margin-bottom: var(--site-space); }
.bx-sg__note { color: var(--site-muted); font-size: .9rem; }
.bx-sg__cls { display: inline-block; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .1em .45em; margin-left: .5em;
border-radius: 4px; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; opacity: .8; vertical-align: middle; user-select: all; }
.bx-sg__label { font-size: .85rem; margin: var(--site-space) 0 .4em; opacity: .8; }
.bx-sg__head { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.bx-sg__head > :first-child { margin: .3em 0; }
.bx-sg__row { display: flex; flex-wrap: wrap; gap: var(--site-space) calc(var(--site-space) * 1.5); align-items: center; margin-block: var(--site-space); }
.bx-sg__item { display: inline-flex; align-items: center; gap: .3em; }
.bx-sg__item--block { display: block; padding-block: var(--site-space); border-top: var(--site-border) dashed var(--site-line); }
.bx-sg__item--block > .bx-sg__label { margin-top: 0; }
.bx-sg__img img { max-width: 320px; height: auto; }
.bx-sg__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--site-space); }
.bx-sg__swatch { display: flex; flex-direction: column; gap: .3em; font-size: .85rem; }
.bx-sg__swatch > span { display: block; height: 56px; border-radius: var(--site-radius); border: var(--site-border) solid var(--site-line); }
.bx-sg__swatch .bx-sg__cls { margin-left: 0; align-self: flex-start; }
.bx-sg__space { display: flex; align-items: center; gap: .6em; font-size: .85rem; margin-block: .5em; }
.bx-sg__space > span { display: block; height: 14px; background: var(--site-accent); border-radius: 2px; flex: none; }
.bx-sg__cols .bx-col { background: color-mix(in srgb, var(--site-accent) 10%, transparent); padding: .6em; border-radius: var(--site-radius-sm); }
.bx-sg__cols .bx-col p { margin: 0; }
.bx-sg__src { display: inline-block; font: 600 10px/1.5 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: .1em .5em; margin-left: .4em;
border-radius: 999px; border: 1px solid currentColor; opacity: .55; vertical-align: middle; }
.bx-sg__src--own { opacity: 1; color: #7c3aed; }
.bx-sg__src--off { opacity: .8; color: #b45309; }
.bx-sg .is-off > :not(.bx-sg__label):not(.bx-sg__cls):not(.bx-sg__src) { opacity: .35; }
/* ── Licht/donker-knop (alleen bij een donker thema met knop) ──────────
Zon en maan als CSS: een cirkel, en bij donker een tweede die er een hap uit
neemt. Geen iconenset nodig. */
.site-theme-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
width: 2.25em; height: 2.25em; border-radius: 50%; color: inherit; transition: background var(--site-transition) ease; }
.site-theme-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.site-theme-toggle:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }
.site-theme-toggle__icon { position: relative; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
[data-bx-theme-toggle][aria-pressed="true"] .site-theme-toggle__icon { background: currentColor; box-shadow: none;
-webkit-mask: radial-gradient(circle at 75% 25%, transparent .38em, #000 .4em); mask: radial-gradient(circle at 75% 25%, transparent .38em, #000 .4em); }
/* Terug naar boven (rechtsonder; licht/donker zweeft linksonder). */
.site-totop { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
border-radius: 50%; background: var(--site-accent); color: var(--site-accent-contrast); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
opacity: 0; visibility: hidden; transform: translate3d(0, .8rem, 0); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.site-totop.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.site-totop:hover { background: var(--site-accent-hover); }
.site-totop:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 3px; }
.site-totop__icon { width: .7rem; height: .7rem; border: solid currentColor; border-width: 2px 0 0 2px; transform: translateY(.18rem) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .site-totop, .site-totop.is-shown { transition: none; } }
@media print { .site-totop { display: none; } }
.site-theme-toggle--float { position: fixed; left: 16px; bottom: 16px; z-index: 50; background: var(--site-surface); color: var(--site-ink);
border: var(--site-border) solid var(--site-line); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
/* ── Zichtbaarheid per schermbreedte ────────────────────────────────
Dezelfde grenzen als de ontwerpversie (tablet tot 999, telefoon tot 699).
Verbergen en niet weghalen: zoekmachines en schermlezers zien het nog, dus
alleen voor herhaling (een tweede knop, een lange foto) en nooit voor inhoud
die op een telefoon ontbreekt. */
@media (min-width: 1000px) { .bx-hide-desktop { display: none; } }
@media (min-width: 700px) and (max-width: 999px) { .bx-hide-tablet { display: none; } }
@media (max-width: 699px) { .bx-hide-phone { display: none; } }
/* ══ BLOKKEN ══════════════════════════════════════════════════════
De opmaak van een blok staat in assets/hooks/.css en laadt alleen op
pagina's waar dat blok staat (block_styles). Hier blijft wat blokken delen:
collection (het raster), formulieren en de toestemmingslaag van kaart/video. */
/* Zelf samengesteld sjabloon: een kleine foto rechts naast de tekst, de inforegel. */
.page-t--custom .page-hero--measure { max-width: var(--site-measure, 72ch); }
.page-t--custom .page-hero--small { float: right; width: min(42%, 360px); margin: 0 0 calc(var(--site-space) * 1) calc(var(--site-space) * 1.5); }
.page-t--custom .page-content::after { content: ""; display: block; clear: both; }
.page-meta__item { white-space: nowrap; }
@media (max-width: 640px) { .page-t--custom .page-hero--small { float: none; width: 100%; margin: 0 0 calc(var(--site-space) * 1); } }